docs(09-02): complete StepIndicator MD3 rebuild plan

- Create 09-02-SUMMARY.md with execution details and decisions
- Update STATE.md position, decisions, session info
- Update ROADMAP.md phase 9 progress (1/3 plans complete)
- Mark COMP-04 complete in REQUIREMENTS.md

.planning/REQUIREMENTS.md

@@ -15,7 +15,7 @@
 - [ ] **COMP-01**: All text inputs render as MD3 outlined text fields with floating labels that animate on focus and when the field has content
 - [ ] **COMP-02**: Buttons follow MD3 hierarchy — filled for primary actions (Next, Download), outlined for secondary (Back, Copy), text for tertiary
 - [ ] **COMP-03**: Backend selection cards and output blocks use MD3 elevation with tonal surface tint, consistent padding, and shape tokens
-- [ ] **COMP-04**: Step indicator displays as numbered circles connected by lines, with completed steps showing a checkmark, current step highlighted, and future steps muted
+- [x] **COMP-04**: Step indicator displays as numbered circles connected by lines, with completed steps showing a checkmark, current step highlighted, and future steps muted
 
 ### Content & Clarity
 
@@ -61,7 +61,7 @@
 | COMP-01 | Phase 9 | Pending |
 | COMP-02 | Phase 9 | Pending |
 | COMP-03 | Phase 9 | Pending |
-| COMP-04 | Phase 9 | Pending |
+| COMP-04 | Phase 9 | Complete |
 | DEBT-01 | Phase 9 | Pending |
 | UX-01 | Phase 10 | Pending |
 | UX-02 | Phase 10 | Pending |

.planning/ROADMAP.md

@@ -66,7 +66,7 @@ Plans:
   3. Backend selection cards and output blocks display MD3 elevation with tonal surface tint and consistent shape tokens
   4. Step indicator shows numbered circles connected by lines, with checkmarks on completed steps, highlight on current, and muted future steps
   5. FieldRenderer produces identical `aria-label` attributes for both text-branch and select-branch inputs
-**Plans:** 3 plans
+**Plans:** 1/3 plans executed
 Plans:
 - [ ] 09-01-PLAN.md — TextFieldMD3 component, MD3 button constants, DEBT-01 aria-label fix
 - [ ] 09-02-PLAN.md — StepIndicator rebuild with MD3 circles and connectors
@@ -106,6 +106,6 @@ Plans:
 | 6. New Backends | v1.1 | 4/4 | Complete | 2026-03-31 |
 | 7. Validation & UX Polish | v1.1 | 3/3 | Complete | 2026-03-31 |
 | 8. Theme Foundation | v1.2 | 2/2 | Complete | 2026-04-01 |
-| 9. MD3 Components | v1.2 | 0/3 | Not started | - |
+| 9. MD3 Components | 1/3 | In Progress|  | - |
 | 10. Content & Clarity | v1.2 | 0/? | Not started | - |
 | 11. Polish & Responsiveness | v1.2 | 0/? | Not started | - |

.planning/STATE.md

@@ -3,14 +3,14 @@ gsd_state_version: 1.0
 milestone: v1.2
 milestone_name: UI Polish & Clarity
 status: in-progress
-stopped_at: Completed 08-02 — Phase 8 (Theme Foundation) fully complete
+stopped_at: Completed 09-02 — StepIndicator MD3 rebuild complete
-last_updated: "2026-04-01T03:27:12.053Z"
+last_updated: "2026-04-01T07:20:16.150Z"
 last_activity: 2026-04-01 — Phase 8 complete (THEME-01, THEME-02 satisfied)
 progress:
   total_phases: 4
   completed_phases: 1
-  total_plans: 2
+  total_plans: 5
-  completed_plans: 2
+  completed_plans: 3
 ---
 
 ---
@@ -62,6 +62,8 @@ Recent decisions affecting current work:
 - [Phase 08-02]: Mechanical migration only — zero DOM structure changes, only className strings replaced
 - [Phase 08-02]: Post-migration grep check is mandatory — replace_all can miss occurrences in dual-branch components with identical className strings
 - [Phase 08-02]: User visually confirmed light/dark theme renders correctly across all 4 wizard steps — THEME-01 and THEME-02 complete
+- [Phase 09-02]: Label text inside button element (not adjacent) preserves test selector compatibility: textContent includes step name
+- [Phase 09-02]: Pre-existing TextFieldMD3.test.tsx failure scoped out — component not yet built, belongs to future plan
 
 ### Pending Todos
 
@@ -73,6 +75,6 @@ None yet.
 
 ## Session Continuity
 
-Last session: 2026-04-01T05:15:00Z
+Last session: 2026-04-01T07:20:16.148Z
-Stopped at: Completed 08-02 — Phase 8 (Theme Foundation) fully complete
+Stopped at: Completed 09-02 — StepIndicator MD3 rebuild complete
 Resume file: None

.planning/phases/09-md3-components/09-02-SUMMARY.md

@@ -0,0 +1,106 @@
+---
+phase: 09-md3-components
+plan: "02"
+subsystem: ui
+tags: [react, tailwind, md3, wizard, step-indicator, accessibility]
+
+# Dependency graph
+requires:
+  - phase: 08-theme-foundation
+    provides: MD3 semantic token classes (bg-primary, text-on-primary, border-outline, etc.)
+provides:
+  - MD3 visual step indicator with numbered circles, checkmark completed states, connector lines
+affects: [wizard layout, dark-mode rendering, any plan touching StepIndicator or wizard navigation]
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - "MD3 stepper pattern: circles + flex-1 connector lines inside ol/li structure"
+    - "Test-compatible button pattern: label text inside button so textContent includes step name"
+    - "flex flex-col button wrapping both icon and label keeps button.textContent matchable by tests"
+
+key-files:
+  created: []
+  modified:
+    - src/components/wizard/StepIndicator.tsx
+
+key-decisions:
+  - "Label text inside button element (not adjacent) so textContent includes step name for test selectors"
+  - "Connector div uses mb-4 to visually align with circle midline"
+  - "Pre-existing TextFieldMD3.test.tsx failure is out-of-scope (component not yet built — belongs to a future plan)"
+
+patterns-established:
+  - "MD3 step indicator: ol > li with circle span + connector div between steps"
+  - "Completed step: button with flex-col containing icon span + label span"
+  - "Active step: non-interactive div with border-primary ring"
+  - "Future step: non-interactive div with border-outline muted text"
+
+requirements-completed: [COMP-04]
+
+# Metrics
+duration: 6min
+completed: 2026-04-01
+---
+
+# Phase 9 Plan 02: StepIndicator MD3 Rebuild Summary
+
+**Text breadcrumbs replaced with MD3 visual stepper: numbered circles, checkmark completed steps, connector lines, semantic color tokens — all 5 WIZD-03 tests pass without modification**
+
+## Performance
+
+- **Duration:** ~6 min
+- **Started:** 2026-04-01T07:18:12Z
+- **Completed:** 2026-04-01T07:24:00Z
+- **Tasks:** 1
+- **Files modified:** 1
+
+## Accomplishments
+
+- StepIndicator rebuilt from text breadcrumbs to MD3 circles with `w-8 h-8 rounded-full` sizing
+- Completed steps render as clickable `<button>` with checkmark circle + label; `textContent` includes step name so test selectors work unchanged
+- Active step uses `border-primary bg-primary/10 text-primary font-bold` ring styling
+- Future steps muted with `border-outline text-on-surface-container/40`
+- Connector lines between steps: `bg-primary` for completed segments, `bg-outline` for future
+- All inline `style={{}}` props removed; no hardcoded color values (`#999`, etc.)
+- `handleStepClick` logic unchanged: dispatches `SET_REMOTE_PARAMS({})` before `SET_STEP(0)` when navigating back to step 0
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: Rebuild StepIndicator with MD3 circles and connectors** - `b704844` (feat)
+
+**Plan metadata:** (docs commit — see below)
+
+## Files Created/Modified
+
+- `src/components/wizard/StepIndicator.tsx` - Rebuilt MD3 visual step indicator; 55 lines
+
+## Decisions Made
+
+- **Label inside button:** The plan's CRITICAL note specified label text must be inside the `<button>` element so `button.textContent?.includes('Backend')` works. Used `flex-col` button layout with icon span + label span both inside the button.
+- **Connector vertical alignment:** Added `mb-4` to connector `div` to visually align the `h-0.5` line with the circle midpoints given the flex-col label below.
+- **Pre-existing test failure scoped out:** `TextFieldMD3.test.tsx` fails with "Cannot find module './TextFieldMD3'" — this is a test file for a component not yet built (future plan). Not caused by this change. Logged to deferred-items.
+
+## Deviations from Plan
+
+None — plan executed exactly as written.
+
+## Issues Encountered
+
+- `TextFieldMD3.test.tsx` was already failing in the full test suite before this change (missing component file). Confirmed out-of-scope — not introduced by StepIndicator rebuild.
+
+## User Setup Required
+
+None — no external service configuration required.
+
+## Next Phase Readiness
+
+- StepIndicator is fully MD3-compliant and dark-mode aware via semantic tokens
+- Ready for Phase 9 Plan 03 (TextFieldMD3 component build, which will also fix the pre-existing test failure)
+- 131 test selector fragility concern remains (ongoing, per STATE.md blocker) — this plan's approach of keeping label text inside button elements is the established pattern to follow
+
+---
+*Phase: 09-md3-components*
+*Completed: 2026-04-01*