# Observability Redesign Brief

## Request

Ask Opus to redesign the local agent observability dashboard before any
implementation starts.

## Context

The dashboard lives under `.agents/observability/` and is served by
`.agents/scripts/observe.mjs` at `http://127.0.0.1:4317`.

Current files:

- `.agents/observability/index.html`
- `.agents/observability/styles.css`
- `.agents/observability/app.js`
- `.agents/scripts/observe.mjs`

The dashboard currently shows:

- Summary cards for active run, phase, branch, and blockers.
- A runs list with run metadata and agent rows.
- Checkpoint next action, workspace, blockers, and active progress tail.
- Tail length selector, refresh button, and live/error status.

Known design problem:

- The current layout feels generic and visually weak.
- It does not make agent liveness, leases, progress, blockers, or next action
  feel operationally obvious enough.
- It should feel like a focused orchestration cockpit, not a landing page.

## Product Requirements

- First viewport should immediately answer:
  - What is active?
  - Is anything dead or blocked?
  - Who is working?
  - What happened most recently?
  - What should the manager do next?
- Preserve the data source and static app constraint.
- Keep the UI dense, calm, and operational.
- Avoid marketing layout, decorative cards inside cards, and hero-style copy.
- Make liveness and lease expiry visually obvious.
- Make progress tail readable without dominating the whole page.
- Support desktop and mobile layouts without text overlap.
- Prefer familiar controls and icons if implementation later adds an icon
  library or inline symbols.
- Keep the design implementable in plain HTML, CSS, and vanilla JS.

## Current Constraints

- This is a read-only Opus design proposal request.
- Do not edit application files yet.
- The distribution workspace is not a git repository yet, so branch-based Opus
  implementation is still blocked.
- If implementation is later approved, the likely write scope is:
  - `.agents/observability/index.html`
  - `.agents/observability/styles.css`
  - `.agents/observability/app.js`
  - possibly `.agents/scripts/observe.mjs` if Opus needs small API fields for
    better status grouping.

## Opus Output Requested

Write `opus-proposal.md` with:

1. The proposed information architecture.
2. The exact visual layout direction.
3. The key interactions and states.
4. Any small API/data-shape changes requested from `observe.mjs`.
5. Mobile behavior.
6. Implementation notes for the eventual Opus coding pass.
7. Concerns or blockers, if any.
