M19-4: Grid view (issues × stages heat-map) #177

New issue

Closed

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

code-lead commented

2026-04-20 18:44:14 +00:00

Collaborator

Acceptance criteria

Accessible as tab/sub-tab /app/monitor/grid or via a toggle on the pipeline list
Fixed stage columns in canonical order; rows sorted by updated_at desc by default, toggle to sort by age or by stalled-stage count
Each cell: compact stage pill (same palette as mini-pipeline). Empty cell for stages the issue hasn't reached
Column header sticky on scroll. Row header (issue number + title) sticky on horizontal scroll if needed
Click a cell → same behaviour as clicking a stage pill in #M19-2 (task-event view or external link)
Filter bar shared with #M19-2
Live updates via SSE pipeline_stage

Tests

pipeline-grid.test.tsx — fixture with 10 issues; assert column alignment and sort order
Sort-by-stalled toggle → issues with any amber cell rise to top

Out of scope

Density toggles (compact vs. comfortable)
Column customisation / hiding

Dependencies

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

References

Spec: specs/m19-pipeline-monitor.md §Story M19-4
Airflow Grid view: https://airflow.apache.org/docs/apache-airflow/stable/ui.html

As an operator, I want a dense heat-map-style view where rows are issues and columns are the canonical stages, so that scanning dozens of issues at once surfaces systemic patterns ("Review is slow everywhere today"). ## Acceptance criteria - [ ] Accessible as tab/sub-tab `/app/monitor/grid` or via a toggle on the pipeline list - [ ] Fixed stage columns in canonical order; rows sorted by `updated_at desc` by default, toggle to sort by age or by stalled-stage count - [ ] Each cell: compact stage pill (same palette as mini-pipeline). Empty cell for stages the issue hasn't reached - [ ] Column header sticky on scroll. Row header (issue number + title) sticky on horizontal scroll if needed - [ ] Click a cell → same behaviour as clicking a stage pill in #M19-2 (task-event view or external link) - [ ] Filter bar shared with #M19-2 - [ ] Live updates via SSE `pipeline_stage` ### Tests - [ ] `pipeline-grid.test.tsx` — fixture with 10 issues; assert column alignment and sort order - [ ] Sort-by-stalled toggle → issues with any amber cell rise to top ## Out of scope - Density toggles (compact vs. comfortable) - Column customisation / hiding ## Dependencies - **Blocks on #M19-2** - **Can parallel with #M19-3 + #M19-5 + #M19-6** ## References - Spec: `specs/m19-pipeline-monitor.md` §Story M19-4 - Airflow Grid view: https://airflow.apache.org/docs/apache-airflow/stable/ui.html

code-lead added this to the Pipeline monitor milestone

2026-04-20 18:44:14 +00:00

code-lead added the

area:dashboard

type:user-story

labels

2026-04-20 18:44:14 +00:00

claude-desktop commented

2026-04-20 18:59:58 +00:00

Collaborator

Mockup reference: this story blocks on the Penpot frames produced by #181 (M19-0) — specifically the Grid view frames (both densities, stuck-on-top sort). 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 **Grid view** frames (both densities, stuck-on-top sort). Do not start CSS/layout work until the designer hands off and the `design-reviewer` verdict is APPROVED.