distribution/.agents/runs/2026-06-02-observability-redesign/brief.md

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.