M18-3: Monitor page parity on the new stack + SSE reliability fix

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

charles/claude-hooks#164

code-lead commented

2026-04-20 16:02:56 +00:00

Collaborator

As an operator, I want every feature from the current dashboard.html ported to the new apps/web under /app/monitor, plus the long-standing "Live updates disconnected" false-positive finally killed, so that I can dogfood the SPA without losing any observability.

Acceptance criteria

Feature parity checklist

Header with service title + live connection pill (see SSE section below)
Tabs: Monitor, Agents, Stats (and Usage if #M17-2 has landed)
Monitor page:
- Storage strip (cache / worktrees / sessions)
- Filter-by-agent chips (counts refresh live)
- Task list with RUNNING / QUEUED / HISTORY tabs
- Detail pane: header (repo#issue, agent, model, elapsed, cost, status), prompt accordion, turns strip, event log with filter
- Cancel flow (inline confirm, success toast, live status update)
- Re-dispatch hint toast
Agents page: list, create, edit, delete (matches current CRUD + skill picker)
Stats page: per-agent / per-repo / per-day aggregates

SSE reliability

Server sends : heartbeat\n\n on /events every 15 seconds
Web client debounces the "disconnected" banner: only shows after >5s without any SSE activity
On onerror, probe /health once before painting the disconnected banner — distinguishes "service down" from "stream blip"
Pill has three states: live (green), reconnecting (amber, <10s), disconnected (red, >10s + /health failing)

Design tokens

All colours come from design/tokens.json via CSS vars; no raw hex in components (lint rule enforces)
Tailwind config maps tokens to semantic theme names (bg, surface, border, accent, error, …)

Tests

Vitest component tests for task list, detail pane, filter chips
Playwright end-to-end: open /app/monitor, mock SSE, confirm running task appears, click Cancel, confirm banner toggles + POST fires
Contract test against /history shape — packages/shared types match server output

Migration

Both / (legacy) and /app/monitor (SPA) are routable side-by-side
README adds a "Trying the new UI" section pointing at /app/monitor

Out of scope

Usability redesigns ("agent swimlanes", richer sparkline) — parity only; redesigns are a separate milestone
Mobile / responsive layout beyond what the current dashboard already supports
Sunsetting the old UI — #M18-9

Blocks on #M18-2 (web app bootstrap).
Can parallel with #M18-4.

References

Spec: specs/m18-ui-rewrite-and-architect.md §Story M18-3
SSE disconnected false-positive: partial fix on legacy HTML in commit d254cb6; SPA version takes the logic forward

As an operator, I want every feature from the current `dashboard.html` ported to the new `apps/web` under `/app/monitor`, plus the long-standing "Live updates disconnected" false-positive finally killed, so that I can dogfood the SPA without losing any observability. ## Acceptance criteria ### Feature parity checklist - [ ] Header with service title + live connection pill (see SSE section below) - [ ] Tabs: **Monitor**, **Agents**, **Stats** (and **Usage** if #M17-2 has landed) - [ ] Monitor page: - [ ] Storage strip (cache / worktrees / sessions) - [ ] Filter-by-agent chips (counts refresh live) - [ ] Task list with RUNNING / QUEUED / HISTORY tabs - [ ] Detail pane: header (repo#issue, agent, model, elapsed, cost, status), prompt accordion, turns strip, event log with filter - [ ] Cancel flow (inline confirm, success toast, live status update) - [ ] Re-dispatch hint toast - [ ] Agents page: list, create, edit, delete (matches current CRUD + skill picker) - [ ] Stats page: per-agent / per-repo / per-day aggregates ### SSE reliability - [ ] Server sends `: heartbeat\n\n` on `/events` every 15 seconds - [ ] Web client debounces the "disconnected" banner: only shows after >5s without any SSE activity - [ ] On `onerror`, probe `/health` once before painting the disconnected banner — distinguishes "service down" from "stream blip" - [ ] Pill has three states: `live` (green), `reconnecting` (amber, <10s), `disconnected` (red, >10s + `/health` failing) ### Design tokens - [ ] All colours come from `design/tokens.json` via CSS vars; no raw hex in components (lint rule enforces) - [ ] Tailwind config maps tokens to semantic theme names (`bg`, `surface`, `border`, `accent`, `error`, …) ### Tests - [ ] Vitest component tests for task list, detail pane, filter chips - [ ] Playwright end-to-end: open `/app/monitor`, mock SSE, confirm running task appears, click Cancel, confirm banner toggles + POST fires - [ ] Contract test against `/history` shape — `packages/shared` types match server output ### Migration - [ ] Both `/` (legacy) and `/app/monitor` (SPA) are routable side-by-side - [ ] README adds a "Trying the new UI" section pointing at `/app/monitor` ## Out of scope - Usability redesigns ("agent swimlanes", richer sparkline) — parity only; redesigns are a separate milestone - Mobile / responsive layout beyond what the current dashboard already supports - Sunsetting the old UI — #M18-9 ## Dependencies - **Blocks on #M18-2** (web app bootstrap). - **Can parallel with #M18-4.** ## References - Spec: `specs/m18-ui-rewrite-and-architect.md` §Story M18-3 - SSE disconnected false-positive: partial fix on legacy HTML in commit `d254cb6`; SPA version takes the logic forward

code-lead added this to the Next-gen UI + architect agent milestone

code-lead added the

labels

code-lead was assigned by claude-desktop

2026-04-20 18:21:47 +00:00

code-lead referenced this issue from a commit

2026-04-20 18:43:38 +00:00

feat(m18): port monitor parity + SSE reliability to apps/web (#164)

code-lead referenced this issue from a pull request that will close it,

2026-04-20 18:43:56 +00:00

feat(m18): port monitor parity + SSE reliability to apps/web #173

charles referenced this issue from a commit