charles/claude-hooks

Fork

You've already forked claude-hooks

Code Issues 10 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Monitor: implement the #70 Penpot mockups into src/dashboard.html #122

New issue

Closed

opened 2026-04-20 10:21:45 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-04-20 10:21:45 +00:00

Collaborator

Copy link

User story

As the operator running claude-hooks, I want the rendered monitor at / (served from src/dashboard.html) to match the Penpot mockups produced by #70 so the pain points that ticket enumerated — scroll-of-doom event stream, invisible cost/duration, queue/running/history mixed, no per-agent filter, read-only storage card — get actually fixed in the UI, not only in mockups.

#70 is closed (designs accepted). This ticket is the implementation follow-up it explicitly blocked.

Acceptance criteria

Pages / layout

Populated state — task list shows queued / running (pulse dot) / completed-with-PR / failed (retry affordance) / cancelled variants as per the designed Task row component.
Queue focus — visible separation between "what's running now" and "what's queued behind it". A collapsed-sidebar mode or a tabbed sidebar with Running / Queued / History tabs, matching the designer's choice.
Empty state — fresh service with no tasks renders a first-run helper card with links to docs + /health.
Event stream (long) — the designer's pick for the scroll-of-doom problem is implemented (collapsed tool-call blocks by default, turns summary at top, and/or timeline strip). Follow the mockup verbatim unless the mockup is physically unrealizable in HTML/CSS — in which case document the deviation in the PR.
Cost / usage card — spend-per-agent and spend-per-day derived client-side from /history[].cost_usd. No new backend endpoint required; if aggregation becomes expensive at scale, a follow-up can lift it server-side.
Disconnect state — SSE drop shows last-known-as-of timestamp + a retry button + a pointer to journalctl.

Components

Task row — state variants (idle / running / queued / failed / completed-with-PR / cancelled) with agent colour chip, repo·#issue, elapsed time, $cost.
Event block — collapse affordance, per-type styling (assistant, tool_call with per-tool icon, tool_summary, result, error, progress).
Agent filter chip-strip — toggles which agents' tasks render in the sidebar.
Storage bar — three stacked bars (cache-clones, worktrees, sessions) with warning thresholds; clicking reveals per-agent breakdown and a "sweep now" button (backed by a new POST /sweep endpoint — add it if missing).

Interaction behaviors

Auto-scroll vs. user scroll-lock in the event stream — if the user scrolls up, stop auto-scrolling; a "jump to live" button reappears. Resume auto-scroll when the user returns to the bottom.
Cancel flow — button location per mockup, confirm modal, post-cancel row state visible.
Re-dispatch — after a failed task, a one-click "re-dispatch" affordance that unassigns + reassigns the issue (same mechanism the operator uses today manually).

Design system

Colour tokens, type scale, spacing lifted verbatim from design/tokens.json (Tokyo Night). No new palette values introduced.
CSS is inline in src/dashboard.html per existing convention (single-file dashboard).

Tests

src/dashboard-smoke.test.ts (the structural HTML checks we already have) grows tests for every new component presence: task-row variants, event-block variants, agent-filter chip-strip, storage bar.
If happy-dom is present (from #117), add at least one behavioral test for: auto-scroll lock, agent filter toggling, event-block collapse.

Out of scope

New backend endpoints beyond POST /sweep — everything else in the mockups is derivable from existing routes. If the implementer finds a specific screen that genuinely needs new data, flag it as an "asks from backend" in the PR body and skip that screen with a TODO — do not bloat the backend mid-implementation.
Mobile layout / light theme — desktop + dark only, per #70's scope.
Worker process model changes — this is a pure UI ticket on top of existing data surfaces.

References

Parent design ticket: #70 (closed, 3 design rounds, accepted).
Penpot file with the mockups: claude-hooks — dashboard (team peon-manager, file-id 689d7fa4-f94b-81d4-8007-e39c5c82f66c). Designer's handoff comments on #70 have the deep-links.
Current dashboard: src/dashboard.html.
HTTP surface: src/main.ts routes (/health, /queue, /history, /storage, /events, /cancel).
Token source: design/tokens.json.

Dependencies

Blocked by: nothing.
Blocks: nothing.
Branch off: main.

## User story As the **operator** running claude-hooks, I want the rendered monitor at `/` (served from `src/dashboard.html`) to match the Penpot mockups produced by #70 so the pain points that ticket enumerated — scroll-of-doom event stream, invisible cost/duration, queue/running/history mixed, no per-agent filter, read-only storage card — get actually fixed in the UI, not only in mockups. #70 is closed (designs accepted). This ticket is the implementation follow-up it explicitly blocked. ## Acceptance criteria ### Pages / layout - [ ] **Populated state** — task list shows queued / running (pulse dot) / completed-with-PR / failed (retry affordance) / cancelled variants as per the designed `Task row` component. - [ ] **Queue focus** — visible separation between "what's running now" and "what's queued behind it". A collapsed-sidebar mode or a tabbed sidebar with Running / Queued / History tabs, matching the designer's choice. - [ ] **Empty state** — fresh service with no tasks renders a first-run helper card with links to docs + `/health`. - [ ] **Event stream (long)** — the designer's pick for the scroll-of-doom problem is implemented (collapsed tool-call blocks by default, turns summary at top, and/or timeline strip). Follow the mockup verbatim unless the mockup is physically unrealizable in HTML/CSS — in which case document the deviation in the PR. - [ ] **Cost / usage card** — spend-per-agent and spend-per-day derived client-side from `/history[].cost_usd`. No new backend endpoint required; if aggregation becomes expensive at scale, a follow-up can lift it server-side. - [ ] **Disconnect state** — SSE drop shows last-known-as-of timestamp + a retry button + a pointer to `journalctl`. ### Components - [ ] **Task row** — state variants (idle / running / queued / failed / completed-with-PR / cancelled) with agent colour chip, repo·#issue, elapsed time, $cost. - [ ] **Event block** — collapse affordance, per-type styling (`assistant`, `tool_call` with per-tool icon, `tool_summary`, `result`, `error`, `progress`). - [ ] **Agent filter chip-strip** — toggles which agents' tasks render in the sidebar. - [ ] **Storage bar** — three stacked bars (cache-clones, worktrees, sessions) with warning thresholds; clicking reveals per-agent breakdown and a "sweep now" button (backed by a new `POST /sweep` endpoint — add it if missing). ### Interaction behaviors - [ ] **Auto-scroll vs. user scroll-lock** in the event stream — if the user scrolls up, stop auto-scrolling; a "jump to live" button reappears. Resume auto-scroll when the user returns to the bottom. - [ ] **Cancel flow** — button location per mockup, confirm modal, post-cancel row state visible. - [ ] **Re-dispatch** — after a failed task, a one-click "re-dispatch" affordance that unassigns + reassigns the issue (same mechanism the operator uses today manually). ### Design system - [ ] Colour tokens, type scale, spacing lifted verbatim from `design/tokens.json` (Tokyo Night). No new palette values introduced. - [ ] CSS is inline in `src/dashboard.html` per existing convention (single-file dashboard). ### Tests - [ ] `src/dashboard-smoke.test.ts` (the structural HTML checks we already have) grows tests for every new component presence: task-row variants, event-block variants, agent-filter chip-strip, storage bar. - [ ] If happy-dom is present (from #117), add at least one behavioral test for: auto-scroll lock, agent filter toggling, event-block collapse. ## Out of scope - **New backend endpoints beyond `POST /sweep`** — everything else in the mockups is derivable from existing routes. If the implementer finds a specific screen that genuinely needs new data, flag it as an "asks from backend" in the PR body and skip that screen with a TODO — do not bloat the backend mid-implementation. - **Mobile layout / light theme** — desktop + dark only, per #70's scope. - **Worker process model changes** — this is a pure UI ticket on top of existing data surfaces. ## References - Parent design ticket: #70 (closed, 3 design rounds, accepted). - Penpot file with the mockups: `claude-hooks — dashboard` (team `peon-manager`, file-id `689d7fa4-f94b-81d4-8007-e39c5c82f66c`). Designer's handoff comments on #70 have the deep-links. - Current dashboard: `src/dashboard.html`. - HTTP surface: `src/main.ts` routes (`/health`, `/queue`, `/history`, `/storage`, `/events`, `/cancel`). - Token source: `design/tokens.json`. ## Dependencies - **Blocked by:** nothing. - **Blocks:** nothing. - **Branch off:** `main`.

claude-desktop added the

area:dashboard

type:user-story

labels

2026-04-20 10:22:55 +00:00

code-lead was assigned by claude-desktop

2026-04-20 10:22:58 +00:00

code-lead referenced this issue from a commit

2026-04-20 10:40:09 +00:00

feat(dashboard): implement #70 monitor mockups (#122)

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

2026-04-20 10:40:28 +00:00

feat(dashboard): implement #70 monitor mockups #126

code-lead closed this issue

2026-04-20 10:58:25 +00:00

code-lead referenced this issue from a commit

2026-04-20 10:58:25 +00:00

feat(dashboard): implement #70 monitor mockups

claude-desktop referenced this issue

2026-04-20 11:33:35 +00:00

Dashboard: /stats UI panel consuming GET /stats #129

No Branch/Tag specified

main

chore/sync-pre-push-from-forge-base

fix/flows-yaml-dispatch-identity

feat/board-tap-to-assign

dev/1107

code-lead/1106

code-lead/1108

dev/1104

code-lead/1103

code-lead/1080

dev/1087

feat/flows-yaml-ci-events

chore/board-drop-stalled-and-density-controls

fix/flows-yaml-routes-always-register

flows-yaml/api-defaults

dev/1023

fix/event-log-history-bleed

fix/janitor-fix-ci-logs-and-cap

dev/1022

fix/board-card-provider

code-lead/1036

dev/1025

code-lead/1020

dev/1017

code-lead/1026

feat/web-shortcut-registry-1018

dev/1015

code-lead/1009

code-lead/1008

dev/975

dev/969

dev/973

dev/967

code-lead/968

code-lead/953

dev/970

dev/976

code-lead/966

code-lead/956

code-lead/951

dev/962

dev/963

dev/977

dev/955

dev/983

dev/961

dev/974

code-lead/950

code-lead/939

dev/941

dev/940

dev/937

dev/938

dev/936

dev/935

feat/web-i18n-fr-locale

feat/spec-editor-ui-polish

chore/drop-legacy-compat

fix/skills-drop-preview-pane

fix/882-skills-safety-rail

dev/911

dev/909

dev/923

dev/917

dev/915

feat/879-sr11-m2-drop-legacy-skill

code-lead/873

dev/881

code-lead/869

dev/867

code-lead/845

code-lead/843

code-lead/844

dev/837

dev/861

dev/849

code-lead/837

code-lead/842

fix/dedup-rebase-inflight

dev/838

code-lead/847

dev/833

code-lead/848

pr/838

code-lead/841

feat/settings-save-bar/836

code-lead/840

dev/846

code-lead/839

dev/832

fix/board-sse-stale-cache

dev/834

dev/835

feat/settings-breadcrumbs

feat/forge-oauth-credentials

refactor/service-config-consolidation

feat/agent-tokens-to-secrets

feat/gitlab-oauth-to-db

feat/authelia-rip-and-voice-fixes

fix/rebase-storm-and-dead-letter

code-lead/797

code-lead/796

dev/811

code-lead/798

dev/810

code-lead/795

dev/808

code-lead/794

dev/805

dev/802

dev/803

feat/avatar-menu-settings-entry

feat/per-agent-token-tracking

dev/793

dev/747

dev/752

code-lead/790

code-lead/759

dev/756

dev/760

dev/741

dev/767

dev/740

dev/709

dev/644

dev/637

boss/614

dev/600

dev/611

dev/585

fix/login-bonus-fixes

boss/544

dev/542

refactor/api-prefix-and-session-gate

dev/489

boss/531

boss/518

dev/499

boss/516

dev/530

dev/517

dev/519

dev/515

dev/522

dev/503

dev/471

boss/329

dev/417

dev/418

dev/402

boss/327

dev/334

dev/332

boss/326

boss/325

dev/331

boss/324

boss/323

boss/322

dev/294

test/s11-task-analytics

dev/262

boss/270

dev/268

foreman/ui-consolidation-spec

dev/234

boss/196

boss/176

boss/164

fix/124-session-persist-bind

boss/52

dev/87

boss/73

dev/77

dev/81

dev/82

boss/79

dev/42

dev/35

boss/7

No results found.

Labels

Clear labels

area:agents

Agent types, pool scheduling, per-instance config

area:dashboard

Dashboard UI and observability surfaces

area:database

DB layer — schema, migrations, ORM, raw SQL

area:design

UI/UX mockup work — routes to designer agent

area:design-review

Design review dispatch — routes to design-reviewer agent

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

area:infra

Deployment, isolation, containers, systemd units

area:meta

Tracking, scaffolding, project setup

area:security

Security — routes to reviewer-security (opus)

area:sessions

Session-id store, Claude SDK resume logic

area:webhook

Forgejo webhook routing and handlers

area:workdir

Clone cache, worktrees, git identity

security

Security-sensitive issue

Tracking or decisions, not implementation work

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

code-lead

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#122

Reference in a new issue

Repository

charles/claude-hooks

Title

Body

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?

Rows
Columns