charles/claude-hooks
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages 1 Wiki Activity Actions

M19-2: Pipeline list view (main monitor, mini-pipeline per issue) #175

New issue
Closed
opened 2026-04-20 18:44:10 +00:00 by code-lead · 1 comment
code-lead commented 2026-04-20 18:44:10 +00:00
Collaborator
Copy link

As an operator, I want the primary /app/monitor to become a list of open issues with a horizontal mini-pipeline badge per row, so that "where is issue N in its lifecycle" is answerable at a glance. Current task-event view moves to /app/monitor/task/:id — preserved, not deleted.

Acceptance criteria

Layout

  • Header unchanged — title, SSE pill (three-state from #M18-3), tabs: Pipeline (new default), Tasks (legacy monitor), Agents, Stats, Usage (if landed)
  • Main table rows: <repo>#<n> | title | milestone | assignee | mini-pipeline | latest activity
  • Mini-pipeline = horizontal sequence of stage pills. Colour palette:
    • green ✓ success
    • blue pulsing ● running
    • gray ○ pending
    • red ✗ failure
    • amber ⚠ stalled
    • purple ↺ review round (↺ 2)
    • gold ★ force-merge
  • Hover tooltip on a stage pill: agent instance, started/finished, duration, cost, turns. Deep-link to PR / CI run / review where applicable
  • Filter bar: repo, milestone, label(s), assignee agent, state (open / closed / all). Filters sync to URL query params — views are shareable
  • Empty state: "No open issues" with a link to the Forgejo repo

Routing

  • /app/monitor → pipeline list (default)
  • Click a row → expanded pipeline (#M19-3) inline under the row (accordion) OR navigates to /app/monitor/issue/<repo>/<n>. Pick one pattern, document in PR body
  • Click a stage pill → /app/monitor/task/<task_id> (the legacy task-event view, verbatim from #M18-3)
  • Deep-link /app/monitor/task/<task_id> works standalone (bookmarkable, same layout as #M18-3's view)

Live updates

  • Subscribes to the existing SSE stream. pipeline_stage events from #M19-1 update mini-pipeline badges in place without a full re-fetch
  • Stage transitions animate (200-300ms colour swap). No layout shift
  • Polls /issues/pipeline every 60s as refresh backstop. Poll pauses when tab is hidden (Page Visibility API)

Design tokens

  • Stage pill palette maps to design/tokens.json via existing CSS vars. No raw hex
  • Pulsing animation = shared @keyframes stage-pulse so Grid / Gantt views reuse it

Tests

  • pipeline-list.test.tsx — render a fixture with 5 issues spanning all stage states; assert each badge's classname / aria-label matches
  • pipeline-list.test.tsx — SSE pipeline_stage updates only the affected row in-place
  • Playwright: navigate to /app/monitor, click a stage pill, land on task-event view, back-button returns to the pipeline

Migration notes

  • Old Tasks-tab view (#M18-3's monitor) stays behind the Tasks tab. No feature loss
  • README adds a "Pipeline monitor" subsection with a screenshot or ASCII mock

Out of scope

  • Grid view (#M19-4), Gantt view (#M19-5), stuck-detection UI polish (#M19-6)
  • Cross-repo unified pipeline
  • Editing / assigning from the pipeline view (see #M18-7 assignment board)

Dependencies

  • Blocks on #M19-1 + #M18-3 (endpoint + legacy monitor view preserved)
  • Unblocks #M19-3, #M19-4, #M19-5, #M19-6

References

As an operator, I want the primary `/app/monitor` to become a **list of open issues** with a horizontal mini-pipeline badge per row, so that "where is issue N in its lifecycle" is answerable at a glance. Current task-event view moves to `/app/monitor/task/:id` — preserved, not deleted. ## Acceptance criteria ### Layout - [ ] Header unchanged — title, SSE pill (three-state from #M18-3), tabs: **Pipeline** (new default), **Tasks** (legacy monitor), **Agents**, **Stats**, **Usage** (if landed) - [ ] Main table rows: `<repo>#<n>` | title | milestone | assignee | **mini-pipeline** | latest activity - [ ] Mini-pipeline = horizontal sequence of stage pills. Colour palette: - green ✓ success - blue pulsing ● running - gray ○ pending - red ✗ failure - amber ⚠ stalled - purple ↺ review round (`↺ 2`) - gold ★ force-merge - [ ] Hover tooltip on a stage pill: agent instance, started/finished, duration, cost, turns. Deep-link to PR / CI run / review where applicable - [ ] Filter bar: repo, milestone, label(s), assignee agent, state (open / closed / all). Filters sync to URL query params — views are shareable - [ ] Empty state: "No open issues" with a link to the Forgejo repo ### Routing - [ ] `/app/monitor` → pipeline list (default) - [ ] Click a row → expanded pipeline (#M19-3) inline under the row (accordion) OR navigates to `/app/monitor/issue/<repo>/<n>`. Pick one pattern, document in PR body - [ ] Click a stage pill → `/app/monitor/task/<task_id>` (the legacy task-event view, verbatim from #M18-3) - [ ] Deep-link `/app/monitor/task/<task_id>` works standalone (bookmarkable, same layout as #M18-3's view) ### Live updates - [ ] Subscribes to the existing SSE stream. `pipeline_stage` events from #M19-1 update mini-pipeline badges in place without a full re-fetch - [ ] Stage transitions animate (200-300ms colour swap). No layout shift - [ ] Polls `/issues/pipeline` every 60s as refresh backstop. Poll pauses when tab is hidden (Page Visibility API) ### Design tokens - [ ] Stage pill palette maps to `design/tokens.json` via existing CSS vars. No raw hex - [ ] Pulsing animation = shared `@keyframes stage-pulse` so Grid / Gantt views reuse it ### Tests - [ ] `pipeline-list.test.tsx` — render a fixture with 5 issues spanning all stage states; assert each badge's classname / aria-label matches - [ ] `pipeline-list.test.tsx` — SSE `pipeline_stage` updates only the affected row in-place - [ ] Playwright: navigate to `/app/monitor`, click a stage pill, land on task-event view, back-button returns to the pipeline ### Migration notes - [ ] Old Tasks-tab view (#M18-3's monitor) stays behind the Tasks tab. No feature loss - [ ] README adds a "Pipeline monitor" subsection with a screenshot or ASCII mock ## Out of scope - Grid view (#M19-4), Gantt view (#M19-5), stuck-detection UI polish (#M19-6) - Cross-repo unified pipeline - Editing / assigning from the pipeline view (see #M18-7 assignment board) ## Dependencies - **Blocks on #M19-1 + #M18-3** (endpoint + legacy monitor view preserved) - **Unblocks #M19-3, #M19-4, #M19-5, #M19-6** ## References - Spec: `specs/m19-pipeline-monitor.md` §Story M19-2 - GitLab mini pipeline graph: https://design.gitlab.com/data-visualization/mini-pipeline-graph/
claude-desktop commented 2026-04-20 18:59:41 +00:00
Collaborator
Copy link

Mockup reference: this story blocks on the Penpot frames produced by #181 (M19-0). Do not start CSS/layout work until the designer hands off and the design-reviewer verdict is APPROVED. Implementation must match the locked visual language — no improvised palettes, no raw hex.

**Mockup reference**: this story blocks on the Penpot frames produced by **#181 (M19-0)**. Do not start CSS/layout work until the designer hands off and the `design-reviewer` verdict is APPROVED. Implementation must match the locked visual language — no improvised palettes, no raw hex.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
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

  
type:bug
Bug

  
type:chore
Chore

  
type:meta
Tracking or decisions, not implementation work

  
type:user-story
User story

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
Milestone
Clear milestone
No items
No milestone
Pipeline monitor
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
code-lead
2 participants
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#175
No description provided.