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

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

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

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?