Pipeline Plan 192

Plan saved to docs/plans/2026-03-01-pipeline-progress-indicator.md.

---

Plan Summary

Goal: Add a real-time, accessible pipeline progress indicator to the Overview tab's pipeline cards.

What's Being Built

A new renderPipelineProgress() component that replaces the SVG node graph in pipeline cards with an HTML progress bar that is:

• Accessible: role="progressbar", aria-valuenow/min/max, aria-label
• Real-time: Re-renders on every WebSocket state update; async ETA fetch updates without full re-render
• Responsive: Stage chips flex-wrap; hidden on <480px screens
• No new deps: Reuses STAGES, STAGE_SHORT, escapeHtml, formatDuration, fetchPredictions

Files (4 total)

Action	Path
Create	dashboard/src/components/charts/pipeline-progress.ts
Create	dashboard/src/components/charts/pipeline-progress.test.ts (16 tests)
Modify	dashboard/src/views/overview.ts
Modify	dashboard/public/styles.css

Tasks (9 checkboxes)

1. Create the component
2. Write + run 16 unit tests
3. Add CSS for .pipeline-progress-* classes
4. Integrate into overview.ts (import, etaCache, HTML swap, async ETA fetch)
5. Run full test suite

---

Plan complete and saved to docs/plans/2026-03-01-pipeline-progress-indicator.md. Two execution options:

1. Subagent-Driven (this session) — I dispatch a fresh subagent per task, review between tasks

2. Parallel Session (separate) — Open a new session pointing at this plan and use superpowers:executing-plans

Which approach would you like?