Ready2Blob/.planning/phases/09-md3-components/09-04-PLAN.md

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