docs(09): create gap closure plan for BackendSelectionStep TextFieldMD3 migration

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 10:19:48 +02:00
parent 7d5b3f7e73
commit 107a259d19
2 changed files with 152 additions and 2 deletions
@@ -66,11 +66,12 @@ 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/3 plans complete
+**Plans:** 4 plans (3 complete, 1 gap closure)
 Plans:
 - [x] 09-01-PLAN.md — TextFieldMD3 component, MD3 button constants, DEBT-01 aria-label fix
 - [x] 09-02-PLAN.md — StepIndicator rebuild with MD3 circles and connectors
 - [x] 09-03-PLAN.md — Integration: wire TextFieldMD3 + button styles + elevation into all wizard steps
+- [ ] 09-04-PLAN.md — Gap closure: Replace BackendSelectionStep plain input with TextFieldMD3

 ### Phase 10: Content & Clarity
 **Goal**: A first-time visitor understands what Ready2Blob does and what each wizard step expects without external documentation
@@ -106,6 +107,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 | 3/3 | Complete | 2026-04-01 |
+| 9. MD3 Components | v1.2 | 3/4 | Gap closure | - |
 | 10. Content & Clarity | v1.2 | 0/? | Not started | - |
 | 11. Polish & Responsiveness | v1.2 | 0/? | Not started | - |
@@ -0,0 +1,149 @@
+---
+phase: 09-md3-components
+plan: 04
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - src/components/wizard/BackendSelectionStep.tsx
+autonomous: true
+gap_closure: true
+requirements:
+  - COMP-01
+  - COMP-02
+  - COMP-03
+  - COMP-04
+  - DEBT-01
+
+must_haves:
+  truths:
+    - "BackendSelectionStep 'Remote name' input renders as a TextFieldMD3 with floating label"
+    - "Existing BackendSelectionStep tests pass without modification"
+    - "Full test suite remains green (179+ tests)"
+  artifacts:
+    - path: "src/components/wizard/BackendSelectionStep.tsx"
+      provides: "TextFieldMD3 integration for Remote name field"
+      contains: "TextFieldMD3"
+  key_links:
+    - from: "src/components/wizard/BackendSelectionStep.tsx"
+      to: "src/components/ui/TextFieldMD3.tsx"
+      via: "import { TextFieldMD3 }"
+      pattern: "import.*TextFieldMD3.*from"
+    - from: "src/components/wizard/BackendSelectionStep.tsx"
+      to: "react-hook-form"
+      via: "register('name') passed as registration prop"
+      pattern: "registration=.*register"
+---
+
+<objective>
+Close verification gap: BackendSelectionStep "Remote name" input is the only text input in the wizard that does not use TextFieldMD3 with a floating label. This violates COMP-01's "All text inputs" requirement.
+
+Purpose: Achieve 12/12 must-have truths for Phase 9 verification (currently 11/12 partial).
+Output: Updated BackendSelectionStep.tsx with TextFieldMD3 replacing the plain label+input.
+</objective>
+
+<execution_context>
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md
+@C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@.planning/PROJECT.md
+@.planning/ROADMAP.md
+@.planning/STATE.md
+
+@.planning/phases/09-md3-components/09-03-SUMMARY.md
+
+<interfaces>
+<!-- TextFieldMD3 component interface — the exact contract to use -->
+
+From src/components/ui/TextFieldMD3.tsx:
+```typescript
+interface TextFieldMD3Props {
+  id: string;
+  label: string;
+  error?: FieldError;
+  registration: UseFormRegisterReturn;
+  type?: 'text' | 'password';
+  helpText?: string;
+  required?: boolean;
+  suffix?: React.ReactNode;
+}
+
+export function TextFieldMD3({ id, label, error, registration, type, helpText, required, suffix }: TextFieldMD3Props): JSX.Element;
+```
+
+From src/styles/md3-buttons.ts:
+```typescript
+export const MD3_BTN_FILLED: string;
+```
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Replace plain Remote name input with TextFieldMD3</name>
+  <files>src/components/wizard/BackendSelectionStep.tsx</files>
+  <action>
+In BackendSelectionStep.tsx, replace the plain label+input block (lines 57-63) with a TextFieldMD3 component:
+
+1. Add import: `import { TextFieldMD3 } from '../ui/TextFieldMD3';`
+
+2. Replace this block:
+```tsx
+<div>
+  <label htmlFor="remote-name">Remote name</label>
+  <input id="remote-name" type="text" {...register('name')} />
+  {errors.name && (
+    <p role="alert">{errors.name.message}</p>
+  )}
+</div>
+```
+
+With:
+```tsx
+<TextFieldMD3
+  id="remote-name"
+  label="Remote name"
+  registration={register('name')}
+  error={errors.name}
+  required
+/>
+```
+
+Key constraints:
+- Keep `id="remote-name"` unchanged (matches existing test selectors via getByRole('textbox'))
+- Pass `register('name')` as `registration` prop (same pattern as FieldRenderer, line 103 of FieldRenderer.tsx)
+- Pass `errors.name` as `error` prop — TextFieldMD3 already renders `role="alert"` on error messages
+- Remove the manual `{errors.name && ...}` block since TextFieldMD3 handles error display internally
+- Add `required` prop since the name field is required (schema has `.min(1)`)
+
+The existing tests use `screen.getByRole('textbox')` to find the input and `screen.getByRole('alert')` for error messages. TextFieldMD3 preserves both: the `<input>` retains its textbox role, and the error `<p>` has `role="alert"`.
+  </action>
+  <verify>
+    <automated>npx vitest run src/components/wizard/BackendSelectionStep.test.tsx --reporter=dot && npx vitest run --reporter=dot</automated>
+  </verify>
+  <done>BackendSelectionStep renders "Remote name" as a TextFieldMD3 with floating label. All 5 BackendSelectionStep tests pass. Full test suite (179+ tests) remains green. COMP-01 "All text inputs" requirement is fully satisfied.</done>
+</task>
+
+</tasks>
+
+<verification>
+1. `npx vitest run src/components/wizard/BackendSelectionStep.test.tsx` — all 7 tests pass (WIZD-01 + WIZD-04)
+2. `npx vitest run --reporter=dot` — full suite green, zero regressions
+3. Grep check: no remaining plain `<label>` + `<input>` patterns for text fields in wizard steps
+   `grep -n "<label.*htmlFor" src/components/wizard/BackendSelectionStep.tsx` — should return no results (label is now inside TextFieldMD3)
+4. Import check: `grep "TextFieldMD3" src/components/wizard/BackendSelectionStep.tsx` — confirms import present
+</verification>
+
+<success_criteria>
+- BackendSelectionStep "Remote name" field renders as TextFieldMD3 with floating label
+- All BackendSelectionStep tests pass without any test modifications
+- Full test suite passes with zero regressions
+- Phase 9 VERIFICATION.md Truth #12 can be re-verified as VERIFIED (12/12)
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/09-md3-components/09-04-SUMMARY.md`
+</output>