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

phase, plan, type, wave, depends_on, files_modified, autonomous, gap_closure, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	gap_closure	requirements	must_haves
09-md3-components	04	execute	1		src/components/wizard/BackendSelectionStep.tsx	true	true	COMP-01 COMP-02 COMP-03 COMP-04 DEBT-01	truths artifacts key_links BackendSelectionStep 'Remote name' input renders as a TextFieldMD3 with floating label Existing BackendSelectionStep tests pass without modification Full test suite remains green (179+ tests) path provides contains src/components/wizard/BackendSelectionStep.tsx TextFieldMD3 integration for Remote name field TextFieldMD3 from to via pattern src/components/wizard/BackendSelectionStep.tsx src/components/ui/TextFieldMD3.tsx import { TextFieldMD3 } import.*TextFieldMD3.*from from to via pattern src/components/wizard/BackendSelectionStep.tsx react-hook-form register('name') passed as registration prop registration=.*register

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.

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

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md

@.planning/phases/09-md3-components/09-03-SUMMARY.md

From src/components/ui/TextFieldMD3.tsx:

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:

export const MD3_BTN_FILLED: string;

Task 1: Replace plain Remote name input with TextFieldMD3 src/components/wizard/BackendSelectionStep.tsx 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:

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

<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". npx vitest run src/components/wizard/BackendSelectionStep.test.tsx --reporter=dot && npx vitest run --reporter=dot 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.

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 `` + `` patterns for text fields in wizard steps `grep -n "

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

After completion, create `.planning/phases/09-md3-components/09-04-SUMMARY.md`