M19-3: Expanded pipeline graph (per-issue drill-down) #176

Closed
opened 2026-04-20 18:44:12 +00:00 by code-lead · 1 comment
Collaborator

As an operator, I want clicking an issue row in the pipeline list to expand into a full GitLab-style pipeline graph for that issue, with per-stage cards showing agent, duration, cost, turns, and deep-links.

Acceptance criteria

Layout

  • Horizontal DAG. Stages as columns; each column contains one stage card
  • Stage card fields: stage name, state badge, agent instance, started → finished, duration (human-readable), cost (USD), turns. Force-merge badge when applicable; review round counter on Review; stalled-since timestamp on stalled stages
  • Edges between stages = simple left-to-right line. Design track branches from Implement → Design → Design-Review, rejoins before Merge
  • Review loop: a self-loop arrow back to Implement when round > 0, labelled with the round counter
  • Each card has a "View events" button → /app/monitor/task/<task_id> for primary task, OR the PR/CI/review URL for derived stages

Interaction

  • Expand/collapse from the issue row OR reachable at /app/monitor/issue/<repo>/<n> (same pattern #M19-2 picked)
  • Keyboard: ←/→ moves focus between stage cards; Enter opens the card's default link
  • Live updates: SSE pipeline_stage re-paints the affected card without collapsing the row

Tests

  • pipeline-graph.test.tsx — fixture issue with 6 stages; assert each card's rendered fields match the fixture's values
  • Review-loop fixture (round=2) → self-loop arrow renders and carries "↺ 2"
  • Playwright: expand an issue, click a stage card, land on task-event view

Out of scope

  • Editing / re-dispatching from a card (re-dispatch toast stays in the task-event view)
  • Gantt timeline inside the card — see #M19-5

Dependencies

  • Blocks on #M19-2
  • Can parallel with #M19-4 + #M19-5 + #M19-6

References

  • Spec: specs/m19-pipeline-monitor.md §Story M19-3
As an operator, I want clicking an issue row in the pipeline list to expand into a full GitLab-style pipeline graph for that issue, with per-stage cards showing agent, duration, cost, turns, and deep-links. ## Acceptance criteria ### Layout - [ ] Horizontal DAG. Stages as columns; each column contains one stage card - [ ] Stage card fields: stage name, state badge, agent instance, started → finished, duration (human-readable), cost (USD), turns. Force-merge badge when applicable; review round counter on Review; stalled-since timestamp on stalled stages - [ ] Edges between stages = simple left-to-right line. Design track branches from Implement → Design → Design-Review, rejoins before Merge - [ ] Review loop: a self-loop arrow back to Implement when `round > 0`, labelled with the round counter - [ ] Each card has a "View events" button → `/app/monitor/task/<task_id>` for primary task, OR the PR/CI/review URL for derived stages ### Interaction - [ ] Expand/collapse from the issue row OR reachable at `/app/monitor/issue/<repo>/<n>` (same pattern #M19-2 picked) - [ ] Keyboard: ←/→ moves focus between stage cards; `Enter` opens the card's default link - [ ] Live updates: SSE `pipeline_stage` re-paints the affected card without collapsing the row ### Tests - [ ] `pipeline-graph.test.tsx` — fixture issue with 6 stages; assert each card's rendered fields match the fixture's values - [ ] Review-loop fixture (round=2) → self-loop arrow renders and carries "↺ 2" - [ ] Playwright: expand an issue, click a stage card, land on task-event view ## Out of scope - Editing / re-dispatching from a card (re-dispatch toast stays in the task-event view) - Gantt timeline inside the card — see #M19-5 ## Dependencies - **Blocks on #M19-2** - **Can parallel with #M19-4 + #M19-5 + #M19-6** ## References - Spec: `specs/m19-pipeline-monitor.md` §Story M19-3
Collaborator

Mockup reference: this story blocks on the Penpot frames produced by #181 (M19-0) — specifically the Expanded issue graph frame (linear + design-track variants, review self-loop). Do not start CSS/layout work until the designer hands off and the design-reviewer verdict is APPROVED.

**Mockup reference**: this story blocks on the Penpot frames produced by **#181 (M19-0)** — specifically the **Expanded issue graph** frame (linear + design-track variants, review self-loop). Do not start CSS/layout work until the designer hands off and the `design-reviewer` verdict is APPROVED.
Sign in to join this conversation.
No milestone
No project
No assignees
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#176
No description provided.