Design: rework the claude-hooks monitor (dashboard home screen) #70
Labels
No labels
area:agents
area:dashboard
area:database
area:design
area:design-review
area:flows
area:infra
area:meta
area:security
area:sessions
area:webhook
area:workdir
security
type:bug
type:chore
type:meta
type:user-story
No milestone
No project
No assignees
3 participants
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
charles/claude-hooks#70
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
User story
As the operator running claude-hooks, I want the monitor screen
(
src/dashboard.html, served at/) to let me spotwhich tasks need attention, understand cost / health at a glance, and
drill into an event stream without drowning in noise — so that
agent-pool issues surface on the dashboard instead of only in
journalctl -u claude-hooks.The current monitor (two-panel grid + flat storage card + chronological
event dump) gets the job done but has several operator pain points that
a designer pass can address without changing backend contracts.
Current state (2026-04-19)
One page, one route (
/), one purpose — task monitoring.Layout:
Data surfaces that already exist on the API (from
main.ts):/health— per-worker busy/queue_depth/current/queue— current + queued tasks per worker/history— last 50TaskRecords with cost_usd, turns, pr_url,error, status, events[], started_at, finished_at
/storage— cache-clones / worktrees / sessions byte counts + entrycounts
/events— SSE of live task events/cancel— POST to abort current taskOperator pain points to address
dozens of
tool_call+assistantlines; today they scroll as aflat list. Hard to see "what is the agent doing right now" vs.
"what did it already do".
to open a task to see its cost. No summary of spend per agent or
per day.
finished tasks live in the same list with only a colour badge
separating them. Hard to scan "what's queued right now".
to filter "show me just the
designertasks".trigger a sweeper pass, no TTL indication, no per-agent breakdown
of who owns what.
produces a new task with no visual link to the prior one.
disconnected — no error detail when SSE drops.
Acceptance criteria
Pages (Penpot file
claude-hooks — dashboard, new pages)Designer adds new pages to the existing Penpot file alongside the
/agentspages from #55 (file-id689d7fa4-f94b-81d4-8007-e39c5c82f66c).Reuse the Tokyo Night Storm (dark) palette + type scale + spacing
tokens already in the file — no new palette.
Monitor — populated— dashboard with 3+ tasks acrossdifferent states (idle / running / completed with PR / failed
with retry button / queued). Shows the storage card, the task
list, and the detail panel with an active event stream.
Monitor — queue focus— sidebar collapsed / sorted /tabbed so "what is running and what's queued behind it" is the
dominant information on screen.
Monitor — empty— no tasks yet (fresh service).First-run state: what should the operator do? Link to
/health, pointers to docs.Monitor — event stream, long— detail pane with a100-event task, showing the designer's pick on how to solve
the "scroll-of-doom" problem (collapsed tool blocks? timeline
strip? turns summary at top?).
Monitor — cost / usage— summary card or drawer thatsurfaces cost per agent, per day; spend on the current task;
$ spent this month. Pulled from
/history[].cost_usd.Monitor — disconnect state— SSE dropped, backendunreachable. Shows last known state, when it last updated, and
how to recover (retry button, link to
journalctl).Components to define on the existing
Componentspagefailed / completed-with-PR / cancelled. Shows agent colour
chip, repo · #issue, elapsed time, $cost.
affordance. Variants:
assistant/tool_call(withper-tool icon) /
tool_summary/result/error/progress.tasks appear in the sidebar. Selected = accent-colored, muted
= dimmed.
worktrees, sessions), colour-coded by warning threshold,
clickable to reveal per-agent breakdown + "sweep now" button.
Interaction notes the designer should document
lock — today it always scrolls to bottom on new event, which
fights with read-back.
confirm looks like, what the post-cancel row state is.
fastest path from "see error" → "re-trigger same task"?
(This is an operator flow that the UI doesn't surface
today — manual label-toggle on the issue.)
Handoff
#55 issuecomment-5241:
deep-link to the Penpot file, per-page table, token CSS block
(lifted from
design/tokens.json), decisions-that-deviatedlist.
Out of scope
/agents(done on #55),/historyfull-page,
/storagefull-page — separate design tickets if everneeded.
works with the surfaces listed in "Data surfaces that already
exist" above. If a screen genuinely needs new data, flag it as an
"asks from backend" list in the handoff comment — don't design
around speculative endpoints.
a theme toggle. The light palette in the file is for future use.
only; a follow-up
dev/bossticket lifts the CSS intosrc/dashboard.html.References
src/dashboard.html(436 lines).src/main.tsroutes/health,/queue,/history,/storage,/events,/cancel.#55 issuecomment-5241
— shape + depth + decision-list we want back on this ticket.
design/tokens.jsononmain(DTCG, Tokyo Night).claude-hooks — dashboard(file-id689d7fa4-f94b-81d4-8007-e39c5c82f66c). Add pages here, don'tcreate a new file.
Dependencies
Penpot MCP ships canvas primitive tools (
create_page,create_frame,create_text,export_frame_png). Until then the10 token-CRUD tools only can't render any of the above pages.
dev/bossticket to lift the CSS intosrc/dashboard.html.main.Designer — aborted, blocked by #69
This dispatch cannot produce the mockups. The ticket body already
flags #69 as a hard blocker; I'm confirming here that the blocker is
still in place as of this run, so the operator knows not to expect
frames on the Penpot file.
Penpot MCP tools available to me right now
Ten token-CRUD tools only — exactly the surface #69 is meant to
extend:
Tools the AC needs but that do not exist yet
Every page in the AC (
Monitor — populated,— queue focus,— empty,— event stream, long,— cost / usage,— disconnect state) plusthe four components on
Componentsrequire at minimum:create_page— to add pages next to the #55 onescreate_frame— 1280+ px desktop frames per pagecreate_text— task rows, event-stream lines, storage bar labelsexport_frame_png— the skill's sanity-check step before handoffNone are in the MCP. The designer skill refuses to fabricate rendered
frames it can't verify, so I'm stopping here rather than inventing
work.
File state (for the post-#69 designer)
689d7fa4-f94b-81d4-8007-e39c5c82f66c— reachable, revn 631,name matches (
claude-hooks — dashboard). No auth issues.get_design_tokensreturns{}. The Tokyo Night palette from #55'shandoff
lives as drawn shapes on page
01 · Design tokens, not as DTCGtokens in the tokens-lib. That is consistent with the prior
designer's point #3 ("base components are visual specs, not Penpot
Components"). Not a bug — just a note that any token-linking work
on this ticket (#70 doesn't ask for it, #60 does) would have to
either seed the tokens-lib from those shapes or import
design/tokens.jsonviaimport_tokens_dtcg."no new palette".
Recommendation
penpot-mcp-serverto 0.5.0, smoke-test against this same file UUID — the live test
the ticket describes).
(routing, container mode, access-token auth, transit-json fix,
.claude.jsonseed) is already in place per #66/#67/#68 —the next run should land the full AC in one pass.
What will be produced on the re-dispatch
Recording the plan here so it survives across dispatches:
Monitor — populatedMonitor — queue focusMonitor — empty/health, docs linksMonitor — event stream, longMonitor — cost / usage/history[].cost_usdMonitor — disconnect stateComponents(additions)Dark-only, Tokyo Night Storm, reusing #55's tokens and pill / chip /
badge recipes verbatim. Desktop ≥ 1280px only (per "out of scope").
Asks from backend
None speculative — the six AC pages are buildable on the data
surfaces listed in the issue (
/health,/queue,/history,/storage,/events,/cancel). The "re-dispatch after failure"flow flagged in the interaction notes does require the existing
issue-label toggle path to surface through the dashboard, but that's
a UI affordance on top of today's API, not a new endpoint.
Status
Blocked — no Penpot artifacts produced, no handoff to design-reviewer
yet. Close this run as a no-op; dispatch-again-after-#69.
claude-desktop referenced this issue2026-04-19 00:26:39 +00:00
Handoff — UX mockups for the
/monitor reworkPenpot file: claude-hooks — dashboard in team
peon-manager.File: https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&project-id=689d7fa4-f94b-81d4-8007-e39c2a7171bf&file-id=689d7fa4-f94b-81d4-8007-e39c5c82f66c
All seven new pages added alongside the #55 pages — no new palette, no new tokens.
#69unblocked this dispatch (canvas primitivescreate_page/create_frame/create_textare live on the MCP).Pages
Monitor — populatedMonitor — queue focusMonitor — emptyGET /health →btn, secondaryRead the docs ↗, footer stats stripMonitor — event stream, longMonitor — cost / usageMonitor — disconnect state↻ RETRY/ journalctl btn), last-known stale rows in text-dim, numbered recovery listComponents — monitor additions02 · Components).Design tokens — unchanged from #55 issuecomment-5241
All values reused verbatim from
design/tokens.json(Tokyo Night Storm, dark). No new tokens introduced this ticket.New component recipes (lift straight into
src/dashboard.html)Interaction notes (from pages 12, 09, 14)
[ ⟳ auto-scroll paused — jump to live ]pill appears in the top-right of the event-stream pane; clicking it re-enables tail-follow. Auto-scroll also re-arms automatically if the user scrolls back within 32 px of the bottom. No modifier keys, no confirm.■ CANCELbutton sits in the detail panel's top-right, right under the status pill. Click → inline confirm (■ CANCEL · click again within 3 s to confirm). Post-cancel the row flips toCANCELLEDvariant (text-dim) and the detail panel shows a one-linecancelled by operator at 11:28:04 · partial event stream retained · [re-dispatch].FAILEDorCANCELLEDrow the meta line ends with· ↻ re-dispatch. Clicking it POSTs/taskwith the same payload the row'sTaskRecordwas built from (role / repo / issue_number / prompt-template). No modal; a toast lands in the header:↻ re-dispatched to <role> · id <taskId>. The original row stays in history; the new row joins the queue. This replaces today's manual "togglearea:designon the issue" workaround.turn N · 4 tool_calls · 2 assistant · 18 s.(all agents)). Chip counts (dev 1) come from/history+/queueaggregated per role.[ SWEEP NOW ]calls a NEW endpoint the dashboard would need (see Asks from backend below).↻ RETRYbutton re-subscribes to/eventswithout a reload; failing that, the operator falls back tojournalctl -u claude-hooks -n 100over SSH (hint text only, no button action). Stale rows and stale event stream stay visible in text-dim — we never wipe to empty, since running tasks continue server-side.Decisions that deviated from the spec
02 · Componentsin place. The spec said "components to define on the existing Components page". I added a separate15 · Components — monitor additionspage instead of writing shapes into the existing02 · Componentsbecause the MCP has no list-pages / move-shape primitives — adding to page 02 risks colliding with the #55 specs that already live there. If the reviewer wants everything on one page, a five-minute manual pass in the Penpot UI will move them across; I've kept naming + positions predictable to make that trivial.role-chamanreuses--success(#9ECE6A). Tokens indesign/tokens.jsononly definerole-dev / boss / reviewer / designer; chaman isn't named. Rather than introduce a new palette entry (spec said "no new palette") I reused the success green — they never appear at the same time (chaman is a role chip, success is an outcome state), so there's no conflict. Flagging explicitly in case we want a dedicated token.src/dashboard.html) already has a bare/cancelPOST without confirmation; a modal would be a regression in flow speed. The inline re-click pattern is the lightest thing that still prevents fat-finger cancels on a 30-turn task.--accentand varyopacityfrom 0.3→1.0. This avoids introducing semantic colours that don't exist in the token file and keeps the strip readable in the disconnect/stale state (page 14) where the whole body is already dimmed.≈ 3m / 6m / 12m / 17m. The backend today has no ETA estimator; the mock uses historical avg-task-duration as a placeholder. If the dev-ticket implementer wants to drop ETAs, replace them withposition 1 / 4in the queue row's right column — the layout still works.42 tasks · avg $0.44 · 7 failed (no charge). That's how Anthropic's billing currently treats server-side failures. If claude-hooks starts counting partial-turn failures against spend, the copy needs to change — flagging so the dev-ticket implementer doesn't wire the number directly.export_frame_pngsanity-render in this dispatch. The MCP exposescreate_page/create_frame/create_text(from #69) but notexport_frame_png. I couldn't render thumbnails before handoff as the skill normally asks; the reviewer will have to open the file directly. Flagging so we can add the RPC on the nextpenpot-mcp-serverbump.Asks from backend
None speculative — every screen sources from the data surfaces listed in the ticket (
/health,/queue,/history,/storage,/events,/cancel). Two nice-to-haves surfaced while designing:POST /storage/sweep(orPOST /storage/sweep?role=boss) for the[ SWEEP NOW ]button on the storage bar. Today operators sweep via a manual script; wiring it into the dashboard needs this endpoint.POST /task/:id/re-dispatch(orPOST /taskis fine if we keep the UI shim) for the re-dispatch flow from a failed row. Doable client-side by replaying theTaskRecordfields toPOST /task, but a first-class endpoint keeps the dashboard thinner.Both can ship with the implementation ticket; neither blocks the Penpot mockup.
Out of scope (from AC)
/agentsshipped on #55;/history//storagefull-page views not requested).dev/bossticket lifts the recipes above intosrc/dashboard.html.Handoff label
⚠️
area:design-reviewlabel does NOT exist on this repo.mcp__forgejo__list_repo_labelsreturned onlyarea:agents · area:dashboard · area:design · area:infra · area:meta · area:sessions · area:webhook · area:workdir · type:meta · type:user-story. Per the designer skill, I won't create the label myself (that's a repo-setup concern). Recommend you:area:design) —gh api repos/charles/claude-hooks/labels -f name=area:design-review -f color=ec4899 -f description="Design mockups ready for design-reviewer".issues.labeledrouting in the forge-claw webhook forarea:design-review → design-reviewer, if it isn't already — #55 used the same label per its own handoff, so this may already be covered.Once the label is on this issue,
design-reviewerpicks up the handoff automatically.Design Review — Monitor rework (7 pages)
Reviewed: pages 09–15 of
claude-hooks — dashboard(file689d7fa4…f66c, revn 1275, 2026-04-19).Method: structural review from handoff CSS recipes, token values, frame specs, and interaction notes.
export_frame_pngis not yet in this MCP build (designer's deviation #7); review is based on the declarative spec. Contrast ratios calculated from the published token hex values.overflow
O-1 · Pages 09 / 10 / 12 / 15 — task row →
.task-row__titlegrid-template-columns: 3px 1fr 80pxon a ~360 px sidebar row leaves the title column ≈ 277 px wide. At 13 px Fira Code the stringmy-organization/long-repo-name · #999overflows without any truncation directive in the CSS recipe. Fix: addoverflow: hidden; white-space: nowrap; text-overflow: ellipsisto.task-row__title.O-2 · Pages 09 / 12 — event block →
.ev__bodyTool call payloads routinely contain long file paths, base64 blobs, or JSON with no natural break points.
.ev__bodycarries no overflow directive, so these strings will escape the event-block boundary. Fix: addoverflow-wrap: break-word(orword-break: break-allfor pure base64 content) to.ev__body.contrast
C-1 · Pages 09 / 10 / 12 / 15 — task row →
.task-row__meta(10 px)--text-dim (#565F89)on--surface (#24283B)yields ≈ 2.3:1 (calculated from token hex values). WCAG AA requires 4.5:1 for text ≤ 18 px regular / ≤ 14 px bold. At 10 px this fails at every surface background (--surface,--surface-high,--bg). Fix: use--text-muted (#9AA5CE)for.task-row__meta, which gives ≈ 5.6:1 on--surface.C-2 · Pages 09 / 10 / 15 — task row → status pills for
IDLEandCANCELLED.task-row__pill--idleand.task-row__pill--cancelledboth reference--text-dim (#565F89)at 10 px bold. Same ratio ≈ 2.3:1; same fix — replace with--text-muted (#9AA5CE)for the inactive-state pills. The dim treatment is intentional but must clear 4.5:1;--text-mutedstill reads as "subdued" relative to the accent-coloured active pills.C-3 · Page 12 — turns timeline bar → low-density segments
--accent (#7AA2F7)atopacity: 0.3composited over--bg (#1A1B26)resolves to approximately#374367, giving a contrast of ≈ 1.9:1 against the background. These are non-text graphical elements so hard WCAG AA does not apply, but the perceptual distance betweenopacity: 0.3(low) andopacity: 0.6(mid) is 1.9:1 vs 3.2:1 — the transition is subtle and may be invisible on uncalibrated displays or for users with low vision. Raise the floor toopacity: 0.45and consider a minimum segment width of 3 px so zero-event turns remain visible.alignment
A-1 · Page 10 — queue-focus sidebar → missing section headers
The pinned running card and the four compact queue rows share the same column width but have different heights and visual weights, with no label delineating "RUNNING" from "QUEUED." Without a
RUNNINGsection header or horizontal rule above the pinned card, the layout reads as a broken list rather than an intentional two-zone design. Add aRUNNINGlabel (11 px, uppercase,--text-dim) above the pinned card and aQUEUEDlabel above the compact rows.A-2 · Page 15 — components canvas → storage bar segments
grid-auto-flow: columndivides the bar into equal-width segments regardless of actual byte counts. A cache-clones segment consuming 200 MB and a sessions segment consuming 2 MB would appear identically wide. Either use proportionalflexvalues or add an annotation marking the segments as categorical (not proportional), so the dev-ticket implementer doesn't wire proportional data to a fixed-width grid.typography
T-1 · All pages — 10 px usage below declared type scale
The design system bottoms out at
11 meta (uppercase, ls 0.5). The CSS recipes use 10 px for.task-row__meta,.task-row__pill, and.ev__role. Three distinct components are off-scale; the smallest rendered text will be 10 px rather than 11 px. Align all three to 11 px or add an explicit10 nanostep to the type scale so it's intentional.T-2 · Page 14 — disconnect banner →
.disconnect__detailmissing line-heightfont: 11px 'Fira Code', monoomits the weight and line-height slots. The CSSfontshorthand defaults tonormalweight (400) andnormalline-height (≈ 1.2). A long SSE error message wrapping at 11 px with line-height 1.2 will be noticeably tighter than the body rhythm used elsewhere. Fix:font: 400 11px/1.5 'Fira Code', monoto match the body scale.UX
U-1 · Page 11 — empty state → primary button label
GET /health →The HTTP method prefix
GETis developer jargon that reads as a verb ("retrieve something") to non-developer operators. The label should describe the operator action, not the HTTP method:Check service health →orOpen /health →. The HTTP method can surface as a subtitle or tooltip for clarity without confusing the CTA.U-2 · Page 10 — queue-focus sidebar → ETA values are unimplementable
Queue rows show
≈ 3m / 6m / 12m / 17m. The backend has no ETA estimator (designer's deviation #5). A dev implementer following the mockup as a spec will either ship a hard-coded value or hunt for a non-existent API field. Replace ETAs withpos. 2 / 3 / 4 / 5(queue position) as the primary cell content, and annotate the ETA in the mockup as a "backlog enhancement" with a greyed-out≈ ?mplaceholder. This makes the achievable design ship without friction.U-3 · Page 13 — cost drawer → copy reads
7 failed (no charge)The parenthetical encodes a billing assumption — that Anthropic does not charge for server-side failures — as a factual UI string. If billing behaviour changes, the UI will silently lie. Replace with
7 failedand move the billing caveat to a footnote or tooltip:* Anthropic may charge for partial-turn failures — verify in billing dashboard.U-4 · Page 12 — event stream → collapsed history fold is below the visible scroll position
Auto-scroll pins the user to the bottom (TURN 21). The
▸ TURNS 1–17 · 54 events collapsedfold lives at the top of the stream and is not visible on arrival. A first-time user of the detail panel will not know the collapsible history exists. Fix: add a sticky breadcrumb in the event pane's header area — e.g.,▲ 54 events in turns 1–17 · tap to expand— that remains visible regardless of scroll position.U-5 · Page 15 — agent chip-strip → inverted empty-selection semantics
"Zero chips selected = show all" breaks the common filter mental model (no filter active → empty result). While the
(all agents)hint text mitigates it, an operator who accidentally deselects all chips is surprised to see more data rather than less. Consider an explicitALLchip that is pre-selected and becomes deselected (exclusive) when any agent chip is selected — matching the tabs pattern already used on page 10 and removing the inversion.suggestion
S-1 · Page 09 — cancel confirm → 3-second re-click window
■ CANCEL · click again within 3 s to confirmmay be too short for a running 30-turn task. The operator needs to read the changed label, confirm intent, and click — 3 s is tight. Consider 5 s; the marginal risk of an errant cancel on a long task outweighs the 2-second friction for deliberate cancels.S-2 · Page 14 — disconnect state →
journalctlhint as prosejournalctl -u claude-hooks -n 100is presented as plain hint text. Showing it in a copyable monospace chip (click-to-copy) would save the operator a transcription step when SSE has dropped and they're already stressed. One-line change; high operator value.S-3 · Page 12 — turns timeline → monochrome segments
All segments use
--accentat varying opacity, conveying density but not event-type mix. Colouring segments by the dominant event type in that turn (accent for assistant-heavy,--text-mutedfor tool-heavy,--infofor tool_summary) would let operators spot "agent is stuck in a tool-call loop on turn 18" without opening the event stream. Optional but high signal-to-noise improvement.S-4 · All pages — re-dispatch link colour
· ↻ re-dispatchlives in.task-row__metawhich, after fixing C-1, will use--text-muted. That makes the action link the same colour as non-interactive meta text, reducing affordance. Give the re-dispatch linkcolor: var(--accent)specifically so it reads as a clickable action distinct from the surrounding metadata.verdict
Seven findings at severity contrast or UX warrant a designer pass before engineering handoff — particularly C-1/C-2 (systematic
--text-dimcontrast failures at 10 px across every task row across every screen) and U-2 (unimplementable ETA values on page 10). Overflow and typography findings are minor but worth bundling into the same pass since they touch the same components. Suggestions are optional polish.No
export_frame_pngwas available to render ground-truth PNGs (designer's deviation #7); recommend adding that MCP method so the next dispatch can provide thumbnail verification before handoff.area:designwhen addingarea:design-review#96Handoff — UX mockups for the
/monitorPenpot file: claude-hooks — dashboard in team
peon-manager.File (root, opens on the first page — use the layer panel to reach the new ones):
https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&project-id=689d7fa4-f94b-81d4-8007-e39c2a7171bf&file-id=689d7fa4-f94b-81d4-8007-e39c5c82f66c
New pages land alongside the
01–08set from #55 (same file, no fork, no palette change).Pages
Monitor — populatedMonitor — populated,header,storage card,sidebar,detail, 6×row-*/stripe-*,turn-ribbon, 5×evt-*Monitor — queue focusMonitor — queue focus,queue panel,detail dimmed,now-running card+ stripe↑ ↓ ✕ hold, collapsed done/failed groupsMonitor — emptyMonitor — empty,header,empty card→ open README · configure agents · trigger a test taskMonitor — event stream longMonitor — event stream long,summary card,event stream,turn-14 expanded,turn-28 liveMonitor — cost and usageper-agent breakdown,top-tasks panelMonitor — disconnectbanner,sidebar (dimmed),recovery panelcurl /health/journalctl/systemctl restartshortcutsMonitor — components§1 Task row variants(6),§2 Event block variants(6),§3 Agent filter chip-strip,§4 Storage barEvery page has ≥ 1 rendered frame; page 15 is tall (1600 px) because it holds four component blocks stacked.
Token CSS — lift straight into
src/dashboard.htmlReused as-is from #55 issuecomment-5241 and
design/tokens.json— no new palette, no new type scale, no new spacing.Interaction notes
turn-28 liveframe) with[ ⤓ jump to live ]and[ keep paused ]. This matches how Slack / tail-f-style UIs handle read-back vs. live. The setting on the toolbar (◉ live · ○ lock on manual scroll · ○ off) lets the operator pick the default.Cancel koinos #42? [ yes, cancel ] [ keep running ](not a modal). Afteryes: row state transitionsRUNNING → CANCELLING(spinner, 0–120 s) →CANCELLED(grey stripe, ⊘ glyph). The row fades to 60 % alpha after 5 s but stays in the list until operator dismisses with[ ✕ ].[ re-dispatch ]inline on every failed / cancelled row and in the detail pane action bar. Clicking it (a) re-posts the issue's area: label to trigger forge-claw, (b) opens the new task when it lands, (c) shows a small↻ prior: $0.21 · 8tsubtitle on the new row so the operator can eyeball progress vs. the failed attempt. This is UX only — it calls existing endpoints (POST /taskwith the same payload +forgejo_token) and does not need new backend surface.↑ ↓move a queued task up/down.✕ holdflips the item toHELD, keeps it in place but it's skipped by the FIFO dispatcher. Both require a new POST — see "asks from backend" below.Asks from backend
The mocks stay inside today's API surface with three exceptions. Flagging rather than designing around:
PATCH /queue/:task_id { priority, held }or equivalent. Cheap and additive; the queue is already in-memory./history[].cost_usdtoday, but/historyis capped at the last 50 records — so monthly charts would be wrong. Either raise the cap, or addGET /stats/cost?range=30d&group=agent|day.config/agents.jsontop-level"budget"key, or a new/config/budgetendpoint.Nothing else in the mocks depends on new data — everything else reads from
/health,/queue,/history,/storage,/events,/cancel.Decisions that deviated from the spec
progressevent gets a faint blue bg (#292E42, accent @ ~15 % alpha over--bg) so the live-streaming row is visually distinct from the settled tool-call blocks above it. Not in the #55 palette but it's a compositional use of--accent, not a new color.#2F1D29= error @ ~15 % over--bg. Same rationale as above — lets the operator spot errors while scanning 100-event streams without reading every line.agent chip · repo · #issue · elapsed · $coston one line; at the 340 px sidebar width this truncates painfully. Mock splits title (repo + agent) and meta (state + elapsed + cost) into two lines. Same token budget, better readability.15), not merged into the existing02 Componentspage as the spec asked. Rationale: I didn't have a way to see the existing page's layer layout via the MCP, so merging would risk stomping #55's shapes. A five-minute UI pass in Penpot can cut+paste them across; callout is here so the reviewer knows it's intentional.create_component. Implementation pulls CSS from the spec, not from the Penpot component tree, so the indirection isn't paying for itself.mcp__penpot__import_tokens_dtcgwith thedesign/tokens.jsoncontent to register the tokens as first-class Penpot design tokens; the Penpot server rejected the change-op schema (:add-token-setunknown). Surfacing rather than silently retrying. The file still has zero design tokens stored — pages reference hex literals directly, which matches how #55 left it. If token sync is wanted, either (a) upgrade the Penpot install, or (b) import via the Penpot UI:Tokens tab → ⋯ → Import → paste design/tokens.json.penpot-mcp export_frame_pngfor a per-page sanity render. That tool is not exposed by the currentpenpot-mcp-serverbuild (0.4.0) — only the canvas-create + token tools are available. Sanity-checked by coordinate-checking the frame/text placements in the tool responses instead.What's not covered (stays out of scope per AC)
/agents,/history,/storagefull-page routes — separate tickets.src/dashboard.htmlis a follow-updev/bossticket.Ready for
design-reviewervia thearea:design-reviewlabel below.Design Review — Monitor rework (second handoff, 7 pages)
Reviewed: handoff comment #5858 ·
claude-hooks — dashboard(file689d7fa4…f66c, revn 1452, 2026-04-19T18:28Z)Method: structural review from CSS recipes, token values, frame specs, and interaction notes.
export_frame_pngis not exposed by the currentpenpot-mcp-serverbuild (0.4.0); contrast ratios calculated from published token hex values.✅ Fixed since prior review (comment #5845)
--text-dimat 10 px on.task-row__metaacross every page.task-row__metanow--text-mutedat 11 px/14 px--text-dimonIDLE/CANCELLEDstatus pills--state-idle/--state-cancelledboth map to--text-muted[ yes, cancel ] [ keep running ]overflow
O-1 · Pages 09 / 10 / 12 / 15 — task row →
.task-row__title(unresolved from prior review).task-row__title { font: 600 13px/16px 'Fira Code' }carries no truncation directive. The stringmy-org/long-repo-name · #999at 13 px fills the available column width (≈ 277 px in the 360 px row minus the 3 px stripe and 80 px right column) and overflows horizontally without clipping. Fix: addoverflow: hidden; white-space: nowrap; text-overflow: ellipsisto.task-row__title.O-2 · Pages 09 / 12 — event block body (unresolved from prior review)
The new recipe
.event { padding: 8px 12px; font: 12px/16px 'Fira Code' }still carries no overflow directive. Tool-call payloads (file paths, base64 blobs, minified JSON) contain no natural break points and will escape the block boundary. Fix: addoverflow-wrap: break-wordto.event.contrast
C-3 · Page 12 — turns timeline bar → low-density segments (unresolved from prior review)
--accent (#7AA2F7)atopacity: 0.3composited over--bg (#1A1B26)resolves to ≈#374367, giving graphical contrast of ≈ 1.9:1. Deviation #4 in the new handoff explicitly retains the opacity-only encoding; the perceptual gap between low (0.3, ≈ 1.9:1) and mid (0.6, ≈ 3.2:1) density buckets will be nearly imperceptible on uncalibrated displays or for low-vision operators. Suggest raising the opacity floor to0.45and enforcing a minimum segment width of 3 px so zero-event turns remain visible.C-4 · All pages —
--role-chamanundefined in new CSS block (new)The second handoff's token block lists
--role-dev / --role-boss / --role-reviewer / --role-designerbut omits--role-chaman. The first handoff's deviation #2 used--success (#9ECE6A)as a stand-in; the second handoff silently drops it. Chaman agent chips and the 3 px task-row stripe for chaman tasks will render with undefined / inherited colour (likely transparent or white), breaking those rows in production. Fix: add--role-chaman: var(--success);to the token block with an inline comment marking it as a temporary alias pending a dedicated token on ticket #60.alignment
A-2 · Page 15 — storage bar segments not proportional (unresolved from prior review)
The second handoff provides only colour-threshold CSS (
.storage--ok/warm/hot) but no updated bar layout recipe; the prior handoff'sgrid-auto-flow: column(equal-width segments regardless of byte counts) remains the implementation reference. A 200 MB cache-clones segment and a 2 MB sessions segment will render identically wide. Fix: either add proportionalflex-basis: calc(var(--bytes) / var(--total) * 100%)sizing to the recipe, or add an annotation on the page 15 storage bar spec:"segments: categorical layout — compute flex-basis from byte fraction at runtime"so the dev-ticket implementer knows to wire the widths dynamically.typography
T-2 · Page 14 — disconnect banner →
.disconnect__detailmissing line-height (unresolved from prior review)The second handoff does not update the disconnect banner CSS; the recipe
font: 11px 'Fira Code', monoomits both weight and line-height, defaulting tonormal / normal(≈ 1.2). At 11 px this produces noticeably tight leading on multi-line SSE error messages. Fix:font: 400 11px/1.5 'Fira Code', monospace— consistent with the body rhythm used elsewhere.T-3 · Pages 09 / 12 / 15 —
--event-tool-summaryand--event-resultshare--success(new)The new semantic aliases assign both
--event-tool-summary: var(--success)and--event-result: var(--success)(#9ECE6A). These are semantically distinct event types — one is a mid-stream tool summary, the other is the terminal task result — yet they render identically in colour. On a 100-event stream (page 12) operators cannot visually distinguish "tool finished summarising" from "task completed". Fix: assign--event-tool-summary: var(--info)(#7DCFFF) and keep--event-result: var(--success); both remain within the existing token set and give each type a distinct hue.UX
U-1 · Page 11 — empty state → primary button label
GET /health →(unresolved from prior review)GETis HTTP-method jargon that reads as a verb to non-developer operators. Fix:Check service health →with the route shown as a subtitle or tooltip.U-2 · Page 10 — queue-focus sidebar → ETA values unimplementable (unresolved from prior review)
Queue rows display
≈ 3m / 6m / 12m / 17m; the backend has no ETA estimator (deviation #5, retained in new handoff). Replace withpos. 2 / 3 / 4 / 5as the primary cell content, and annotate the ETA column on the page 10 frame spec as"backlog enhancement — requires avg-duration estimator". The implementable design ships cleanly without the developer needing to stub a placeholder.U-3 · Page 13 — cost drawer →
7 failed (no charge)encodes billing assumption (unresolved from prior review)The parenthetical encodes a current Anthropic billing rule as a factual UI string. If billing behaviour changes the UI will silently lie. Fix: display
7 failedand move the caveat to a footnote tooltip:* Anthropic may charge for partial-turn failures — verify in billing dashboard.U-4 · Page 12 — collapsed history fold not reachable on auto-scroll arrival (unresolved from prior review)
Auto-scroll pins the user to the bottom (TURN 21);
▸ TURNS 1–17 · 54 events collapsedis at the top of the stream, off-screen. First-time users of the detail panel will not discover the fold. Fix: add a sticky breadcrumb in the event pane header — e.g.,▲ 54 events in turns 1–17 · tap to expand— visible regardless of scroll position.U-5 · Page 15 — agent chip-strip → inverted empty-selection semantics (unresolved from prior review)
Zero chips selected = show all breaks the standard filter mental model (no filter active → empty result). Operators who accidentally deselect all chips are surprised to see more data rather than less. Suggest an explicit
ALLchip (pre-selected, goes inactive when any agent chip is toggled) to match the tab pattern already used on page 10 and remove the semantic inversion.U-6 · Page 10 — queue reorder controls lack backend-dependency annotation (new)
↑ ↓ ✕ holdcontrols are rendered as interactive but depend onPATCH /queue/:task_id { priority, held }(asks from backend #1), which does not exist today. Without an annotation on the page 10 frame a dev-ticket implementer may ship the controls as non-functional stubs without realising the backend gap. Fix: add a red-outlined spec callout on the page 10 frame:"requires PATCH /queue/:task_id — not in current API".U-7 · Page 13 — budget alert toggles lack backend-dependency annotation (new)
Budget threshold alert toggles are rendered as interactive but require persistent threshold storage (asks from backend #3 —
config/agents.jsonor new/config/budgetendpoint). Same gap as U-6. Fix: add a spec callout on the page 13 frame marking the alerts section as"requires persistent config storage — not in current API".U-8 · Page 09 — cancel → CANCELLING state has no escalation signal (new)
The interaction note describes
RUNNING → CANCELLING (spinner, 0–120 s) → CANCELLED. The 0–120 s window is wide with no feedback gradient: an operator watching a spinner for 90 s cannot tell whether the agent is winding down normally or is hung. Fix: add a secondary escalation string after a threshold — e.g., after 45 s:"still waiting… check server logs if this persists"— and ensure the CANCELLED flip is automatic at the 120 s hard timeout, with a log reference in the UI.suggestion
S-2 · Page 14 —
journalctlhint as plain prosejournalctl -u claude-hooks -n 100is shown as hint text. A click-to-copy monospace chip would save the operator a transcription step when SSE has dropped and they are already stressed. One-line change; high operator value.S-3 · Page 12 — turns timeline monochrome
All segments use
--accentat varying opacity (deviation #4). Colouring segments by dominant event type per turn (e.g.,--accentfor assistant-heavy,--infofor tool-heavy,--successfor resolved turns) would let operators spot "agent stuck in a tool-call loop on turn 18" without opening the stream. Optional; would require overriding deviation #4.S-4 · Pages 09 / 10 / 12 — re-dispatch link colour
· ↻ re-dispatchsits within.task-row__meta(--text-mutedafter C-1/C-2 fixes), giving the interactive link the same colour as surrounding non-interactive metadata. Give the re-dispatch linkcolor: var(--accent)so it reads as a distinct clickable affordance.S-5 · Page 13 — ASCII daily bar chart
An ASCII-art bar chart may render inconsistently across monospace font stacks or at non-integer DPR on the ≥ 1280 px target desktop. A CSS-native bar (
<div>with percentageheightand the--filltoken) is easier to implement, theme-safe, and renders crisply at any DPR with no change to the visual intent.verdict
Four findings from the prior review are confirmed fixed (C-1, C-2, T-1, S-1). Eleven findings remain or are newly surfaced: O-1, O-2 (overflow), C-3, C-4 (contrast), A-2 (alignment), T-2, T-3 (typography), U-1–U-8 (UX), plus four suggestions.
Recommended priority for the designer follow-up pass:
--role-chamanundefined; chaman task rows / chips will render visibly broken in production.tool_summaryandresultevents visually identical; critical distinguishability lost on dense streams.export_frame_pngremains unavailable (penpot-mcp-server 0.4.0); review is structural. Recommend exposing the RPC on the next server bump so the following dispatch can verify rendered thumbnails before handoff.Handoff — Monitor rework, review-fix pass
Penpot file: claude-hooks — dashboard in team
peon-manager.File (opens on first page — use the layer panel to reach page 16):
https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&project-id=689d7fa4-f94b-81d4-8007-e39c2a7171bf&file-id=689d7fa4-f94b-81d4-8007-e39c5c82f66c
This dispatch addresses the 15 open findings from the design review in issuecomment-5862 (the review summary called it "eleven" but the itemised list totals 11 findings + 4 suggestions = 15). Pages 09–15 from issuecomment-5858 remain in place and are unchanged; the fixes live on a new page
16 · Monitor — review fixesas 13 grouped fix cards plus a consolidated updated token + recipe block. The dev-ticket implementer should lift the recipe patches from page 16, not from #5858.No new palette, no new hex literals. The only token addition is
--role-chaman: var(--success)— a temporary alias per deviation #2 on #5858.Pages
Monitor — review fixesEarlier pages (unchanged reference):
Monitor — populatedMonitor — queue focusMonitor — emptyMonitor — event stream longMonitor — cost and usageMonitor — disconnectMonitor — componentsPer-finding resolution
--role-chamanundefined — chaman rows broken--role-chaman: var(--success)with temp-alias note (#60 → dedicated)tool_summary&resultboth--success--event-tool-summary: var(--info);--event-resultstays--success⚠ requires PATCH /queue/:task_id — not in current APIcallout on page 10⚠ requires persistent config storage — not in current APIcallout on page 13.task-row__titleunguardedoverflow: hidden; white-space: nowrap; text-overflow: ellipsis.event__bodyunguarded (paths / base64)overflow-wrap: anywhereon.eventand.event__bodymin-width: 3px.disconnect__detailshorthand defaulted weight / line-heightfont: 400 11px/1.5 'Fira Code', monospacedisplay: flex; flex: 0 0 var(--share, 0%); min-width: 2pxGET /health →reads as developer jargonCheck service health →; route drops to subtitle + tooltippos. N;≈ ?mbacklog placeholder column with annotation7 failed (no charge)encodes billing assumption7 failed *with footnote: "Anthropic may charge for partial-turn failures…"▲ 54 events in turns 1–17 · tap to expandabove scrollALLchip, exclusive with agent chips; empty → snaps back to ALLCANCELLING0–120 s window no feedback gradientjournalctlhint as prose.hint-chipclass · click-to-copy · ⎘ + toast.task-row__action--redispatch { color: var(--accent) }.sparkbarwith custom-prop height → DPR-safe13 findings resolved in recipe + Penpot · 2 deferred with callout only (U-6, U-7 — backend-blocked, same class as deviations #1/#3 from #5858) · 3 suggestions adopted, 1 deferred.
Updated token + recipe block — lift verbatim (supersedes #5858)
All surface / semantic / state tokens unchanged from #55 issuecomment-5241. Diff below lands in
src/dashboard.html:Interaction-note deltas
RUNNING → CANCELLING → CANCELLEDsequence with three tiered status strings on the detail pane so the operator gets a feedback gradient across the 0–120 s window. Row pill staysCANCELLINGthroughout; auto-flips toCANCELLED ⊘at the 120 s hard timeout with ajournalctlpointer string.▲ 54 events in turns 1–17 · tap to expandthat remains visible irrespective of scroll position. Clicking unfolds the collapsed history and scrolls to turn 1. Complements (does not replace) the auto-scroll / scroll-lock behaviour from #5858.ALLchip that is pre-selected at mount; mutually exclusive with any agent chip toggle. Deselecting all agent chips snaps back toALLrather than showing the "(all agents)" empty-hint from #5858. Removes the inverted-filter mental model.pos. N). The≈ ?mETA column is retained as a backlog placeholder with an on-frame annotation for the dev-ticket implementer: ETAs wire up when an avg-duration estimator exists, not before.Check service health →with/healthas a muted subtitle andGET http://.../healthas the tooltip — operator verb first, HTTP details available but not leading.Asks from backend
Unchanged from #5858; re-listed here for the dev-ticket implementer. Each corresponds to a frame carrying a red-outlined callout so nothing is rendered as a "will just work" stub:
PATCH /queue/:task_id { priority, held }— page 10 reorder controls (↑ ↓ ✕ hold). Annotation U-6.GET /stats/cost?range=30d&group=agent|day(or raise the/historycap above 50) — page 13 monthly / per-agent cards would otherwise silently clip on busy days.config/agents.jsontop-level"budget"key orPOST /config/budget) — page 13 alert toggles. Annotation U-7.Nice-to-haves, none speculative, all optional for the first dev-ticket pass — the UI degrades gracefully without them (queue reorder hidden, cost cards show last-50 only, alerts hidden).
Decisions that deviated from the review
16 · Monitor — review fixes, not by editing pages 09–15 in place. The MCP has no shape-move / shape-update / delete primitives, only create. Re-writing the existing frames would require clearing them first (impossible) or stacking duplicates (noisy). Page 16 is the authoritative recipe now; dev-ticket lifts from there. Pages 09–15 remain as the visual reference, annotated by cross-reference in the per-finding table above.pos. N". I kept both —pos. Nas the primary cell (implementable today) and≈ ?mas a muted placeholder markedbacklog enhancement. Rationale: when the estimator lands on a follow-up ticket, the layout is already allocated and no re-design pass is needed. If the dev-ticket implementer wants to ship lean, just drop the≈ ?mcolumn — layout still works.--role-chamanstays an alias, not a new hex. Dedicated token belongs on ticket #60 per the review's own wording. Adding a hex here would create a collision target on #60's tokens-lib import; aliasing is reversible.export_frame_pngsanity render. Still not exposed bypenpot-mcp-server(0.4.0 ships create-only canvas primitives per #69). Reviewer verifies structurally off page 16's textual recipes, same as comment #5862.Out of scope (from AC — unchanged since #5858)
/agents,/history,/storagefull-page).dev/bossticket lifts the recipes intosrc/dashboard.html.Handoff label
Attaching
area:design-review(id 87) per the skill's label-routing contract. Thearea:designlabel is already absent from the issue (current labels:type:user-storyonly — the webhook consumedarea:designon dispatch), so no removal step is needed this time. The Forgejo v15label_updatedpayload-walking behaviour noted in the skill is moot here.Ready for
design-reviewerpickup.Design Review — Monitor rework, third pass (review-fix handoff #6117)
Reviewed: handoff comment #6117 ·
claude-hooks — dashboard(file689d7fa4…f66c, revn 1499, 2026-04-19T23:45Z)Method: structural review from CSS recipe patches, token values, frame specs, interaction notes on page 16 plus annotated pages 09–15.
export_frame_pngis still not exposed bypenpot-mcp-server0.4.0; contrast ratios calculated from published token hex values.✅ All 15 findings from comment #5862 confirmed resolved
.task-row__titleno truncationoverflow: hidden; white-space: nowrap; text-overflow: ellipsis✓.event__bodyno overflow guardoverflow-wrap: anywhereon.event, .event__body✓min-width: 3px✓--role-chamanundefined--role-chaman: var(--success)alias with temp-alias note ✓fontshorthand defaulted weight/line-heightfont: 400 11px/1.5 'Fira Code', monospace✓tool_summaryandresultboth--success--event-tool-summary: var(--info),--event-result: var(--success)✓display: flex; flex: 0 0 var(--share, 0%); min-width: 2px✓GET /health →developer jargon on empty-state CTACheck service health →with route as muted subtitle ✓pos. Nprimary cell;≈ ?mretained as annotated backlog placeholder ✓7 failed (no charge)encodes billing assumption7 failed *with footnote tooltip ✓▲ N events in turns 1–17 · tap to expandbreadcrumb ✓ALLchip, exclusive with agent chips ✓⚠ requires PATCH /queue/:task_idcallout on page 10 ✓⚠ requires persistent config storagecallout on page 13 ✓journalctlhint as prose.hint-chipclick-to-copy chip ✓.task-row__action--redispatch { color: var(--accent) }✓.sparkbarwithheight: var(--h, 0%)✓UX
U-9 · Page 09 · Page 16 card U-8 — CANCELLING flip is timer-driven rather than SSE-event-driven
The U-8 interaction note specifies
"auto-flips to CANCELLED ⊘ at the 120 s hard timeout"with no mention of an SSE trigger. Used as the primary state-transition mechanism, a client-side 120 s timer will (a) hold the row inCANCELLINGfor up to 120 s even when the agent winds down in 10 s, and (b) displayCANCELLEDeven if the agent is still running (e.g., the cancel signal was lost). Fix: restate the trigger as "flip toCANCELLEDon receipt of acancelled/result/errorSSE event; 120 s timer fires only if no event arrives (network partition fallback)". The UI escalation strings (0 s / 15 s / 45 s) are unaffected — they apply regardless of which trigger ultimately closes the state.U-10 · All pages —
.task-row::beforereferences undeclared--role-colorThe task-row stripe recipe is
background: var(--role-color)but--role-colorappears nowhere in the token block; only--role-dev / --role-boss / --role-reviewer / --role-designer / --role-chamanare defined. A dev-ticket implementer reading the recipe verbatim will get a transparent stripe and no error. Fix: add a single comment to the recipe — e.g.,/* set --role-color per row: <div class="task-row" style="--role-color: var(--role-dev)"> */— so the per-row wiring is explicit rather than assumed.suggestion
S-6 · Page 16 token-recipe frame —
.sparkbarmissing parent container specThe S-5 recipe gives
.sparkbar { width: 10px; height: var(--h, 0%); }butheightin percentage requires a fixed-height ancestor to resolve. In a block formatting contextheight: 0%computes to0and the bars will be invisible. Add a companion.sparkbars { display: flex; align-items: flex-end; height: 48px; gap: 2px; }container rule alongside.sparkbarso the dev implementer can lift both together.S-7 · Page 16 token-recipe frame —
--event-tool-callcolor change undocumented in deviations--event-tool-callchanged fromvar(--info)(#7DCFFF, as in #5858) tovar(--text-muted)(#9AA5CE) in the #6117 recipe. The change is semantically correct (freeing--infofortool_summaryto resolve T-3, while revertingtool_callto the dimmer muted-blue-gray of the first handoff), but it does not appear in the deviations list or the T-3 resolution row. A dev implementer diffing the two handoffs will see the change with no explanation. Add it to the deviations note under T-3: "tool_call reverted to--text-mutedto vacate--infofor tool_summary."S-8 · Page 16 / all event blocks —
#1E2030event-block background is a literal hex.event { background: #1E2030 }hard-codes a value that is not aliased in the token block. It sits between--bg (#1A1B26)and--surface (#24283B)and could be expressed as--event-bg: #1E2030(or--surface-dim: #1E2030) for consistency with the token-first convention and to make theme changes a single-point edit. Optional — no contrast or rendering impact.verdict
All 15 findings from the second review (comment #5862) are confirmed resolved. Two new UX notes are surfaced: U-9 (CANCELLING flip should be SSE-event-driven with the timer as fallback, not the primary trigger) and U-10 (
--role-colorwiring not documented in the recipe). Three suggestions are optional polish with no blocking impact on engineering handoff.Recommended action:
Once U-9 and U-10 are annotated on page 16, the spec is ready for engineering handoff.
export_frame_pngremains unavailable (penpot-mcp-server 0.4.0); this is the third consecutive structural review. Strongly recommend exposing the RPC on the next server bump so rendered PNG verification can replace spec-reading.Operator accepts the mockups (3 design rounds, design-reviewer cleared). Closing this design ticket; implementation ticket tracked separately.
export_frame_png(file_id, page_id, frame_id, scale?)#74