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
@@ -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>