---
phase: 11-polish-responsiveness
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - src/styles/md3-buttons.ts
  - src/components/ui/BackendCard.tsx
  - src/components/ui/ThemeToggle.tsx
  - src/components/ui/FieldRenderer.tsx
  - src/components/wizard/BackendSelectionStep.tsx
  - src/components/wizard/RemoteConfigStep.tsx
  - src/components/wizard/DeploymentStep.tsx
  - src/components/wizard/ReviewStep.tsx
  - src/components/wizard/StepIndicator.tsx
autonomous: true
requirements:
  - POLISH-01
  - POLISH-02

must_haves:
  truths:
    - "On mobile viewport (<640px), backend cards stack vertically in a single column"
    - "On mobile viewport (<640px), navigation buttons stretch to full width and stack vertically"
    - "On mobile viewport (<640px), StepIndicator hides label text but keeps circles and connectors"
    - "On desktop viewport (>=640px), backend cards display in a 2-column grid"
    - "Every button and interactive card shows a 3px MD3 focus ring when keyboard-navigated"
    - "Focus ring does not appear on mouse click (uses focus-visible, not focus)"
  artifacts:
    - path: "src/styles/md3-buttons.ts"
      provides: "MD3 button constants with focus-visible:ring-3"
      contains: "focus-visible:ring-3"
    - path: "src/components/ui/BackendCard.tsx"
      provides: "Responsive full-width card with focus-visible ring"
      contains: "focus-visible:ring-3"
    - path: "src/components/wizard/StepIndicator.tsx"
      provides: "Collapsed labels on mobile, upgraded focus ring"
      contains: "hidden sm:block"
    - path: "src/components/wizard/BackendSelectionStep.tsx"
      provides: "Responsive card grid and button row"
      contains: "grid grid-cols-1 sm:grid-cols-2"
  key_links:
    - from: "src/styles/md3-buttons.ts"
      to: "all step components"
      via: "MD3_BTN_FILLED / MD3_BTN_OUTLINED constants"
      pattern: "focus-visible:ring-3"
    - from: "src/components/ui/BackendCard.tsx"
      to: "BackendSelectionStep.tsx"
      via: "component usage"
      pattern: "w-full.*focus-visible:ring-3"
---

<objective>
Make the wizard layout mobile-responsive and add MD3 focus-visible indicators to all interactive elements.

Purpose: POLISH-01 ensures the wizard is usable on mobile devices (cards stack, buttons stretch, step labels collapse). POLISH-02 ensures keyboard navigability with visible 3px MD3 focus rings on all interactive elements.
Output: All step components, BackendCard, StepIndicator, ThemeToggle, and FieldRenderer updated with responsive classes and focus-visible rings.
</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/11-polish-responsiveness/11-RESEARCH.md

<interfaces>
<!-- Key constants and component signatures the executor needs -->

From src/styles/md3-buttons.ts:
```typescript
export const MD3_BTN_FILLED = '...' // contains focus-visible:ring-2 focus-visible:ring-primary/50 — upgrade to ring-3
export const MD3_BTN_OUTLINED = '...' // same pattern
export const MD3_BTN_TEXT = '...' // same pattern
```

From src/components/ui/BackendCard.tsx:
```typescript
// className array does NOT have focus-visible — must add
// className does NOT have w-full — must add for grid cell fill
export function BackendCard({ name, description, selected, onClick, ...rest }: BackendCardProps)
```

From src/components/wizard/StepIndicator.tsx:
```typescript
// Three label spans (completed, active, future) need hidden sm:block
// Completed step button: group-focus-visible:ring-2 → upgrade to ring-3
```

From src/components/ui/ThemeToggle.tsx:
```typescript
// Buttons have NO focus-visible classes — must add
// className is conditional (selected vs not) — add focus-visible to both branches
```

From src/components/ui/FieldRenderer.tsx:
```typescript
// Select element: focus:ring-2 → change to focus-visible:ring-2 (inputs keep focus: per convention)
// Tooltip buttons (2 instances): NO focus-visible — must add
```

Button row pattern in all step components:
```tsx
<div className="flex gap-3 mt-6">  // → flex flex-col sm:flex-row gap-3 mt-6
  <button className={MD3_BTN_OUTLINED}>Back</button>  // → add w-full sm:w-auto
  <button className={MD3_BTN_FILLED}>Next</button>  // → add w-full sm:w-auto
</div>
```
</interfaces>
</context>

<tasks>

<task type="auto">
  <name>Task 1: Mobile responsive layout — card grid, button rows, step indicator collapse</name>
  <files>src/components/wizard/BackendSelectionStep.tsx, src/components/ui/BackendCard.tsx, src/components/wizard/RemoteConfigStep.tsx, src/components/wizard/DeploymentStep.tsx, src/components/wizard/ReviewStep.tsx, src/components/wizard/StepIndicator.tsx</files>
  <action>
POLISH-01: Make wizard layout mobile-responsive using Tailwind v4 mobile-first approach.

1. **BackendSelectionStep.tsx** — Change the `data-testid="backend-cards"` div from bare div to responsive grid:
   - Add className `grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4` to the `data-testid="backend-cards"` div
   - Change button row from `flex gap-3 mt-6` to `flex flex-col sm:flex-row gap-3 mt-6`
   - Add `w-full sm:w-auto` to the Next button className (append after MD3_BTN_FILLED)

2. **BackendCard.tsx** — Add `w-full` to the className array so the button fills its grid cell on all viewports. Insert at the start of the className string: `'w-full flex flex-col items-start...'`

3. **RemoteConfigStep.tsx** — Change button row div from `flex gap-3 mt-6` to `flex flex-col sm:flex-row gap-3 mt-6`. Add `w-full sm:w-auto` to both Back and Next button classNames (use template literal: `` `${MD3_BTN_OUTLINED} w-full sm:w-auto` ``).

4. **DeploymentStep.tsx** — Same button row changes as RemoteConfigStep: `flex flex-col sm:flex-row gap-3 mt-6` on the wrapper div, `w-full sm:w-auto` on both buttons.

5. **ReviewStep.tsx** — Change button row div from `flex gap-3 mt-6` to `flex flex-col sm:flex-row gap-3 mt-6`. Add `w-full sm:w-auto` to the Back button. The "Download All (ZIP)" button already has `w-full` — leave as-is.

6. **StepIndicator.tsx** — Add `hidden sm:block` to all three label `<span>` elements:
   - Completed step label: `className="text-xs text-primary hidden sm:block"`
   - Active step label: `className="text-xs text-primary font-semibold hidden sm:block"`
   - Future step label: `className="text-xs text-on-surface-container/40 hidden sm:block"`

Do NOT change any DOM structure beyond adding/modifying className strings. Do NOT add wrapper elements. The `data-testid="backend-cards"` div already exists — just add classes to it.
  </action>
  <verify>
    <automated>npx vitest run</automated>
  </verify>
  <done>Backend cards use responsive grid (1-col mobile, 2-col desktop). All step button rows stack vertically on mobile and go horizontal on desktop. StepIndicator labels hidden on mobile, visible on desktop. All existing tests pass.</done>
</task>

<task type="auto">
  <name>Task 2: MD3 focus-visible indicators on all interactive elements</name>
  <files>src/styles/md3-buttons.ts, src/components/ui/BackendCard.tsx, src/components/wizard/StepIndicator.tsx, src/components/ui/ThemeToggle.tsx, src/components/ui/FieldRenderer.tsx</files>
  <action>
POLISH-02: Upgrade all interactive elements to 3px MD3 focus-visible rings for keyboard navigation.

1. **md3-buttons.ts** — In all three constants (MD3_BTN_FILLED, MD3_BTN_OUTLINED, MD3_BTN_TEXT), replace:
   `focus-visible:ring-2 focus-visible:ring-primary/50`
   with:
   `focus-visible:ring-3 focus-visible:ring-primary`
   Keep `focus-visible:outline-none` as-is.

2. **BackendCard.tsx** — Add focus-visible ring to the button className array. Add this string to the base classes (the first string before the ternary):
   `'w-full flex flex-col items-start gap-1 rounded-xl border-2 p-4 text-left transition-all focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary'`
   Do NOT add `ring-offset-2` (omit ring-offset to avoid dark mode surface color issues per research open question #2).

3. **StepIndicator.tsx** — On the completed-step circle `<span>`, change:
   `group-focus-visible:ring-2 group-focus-visible:ring-primary/50`
   to:
   `group-focus-visible:ring-3 group-focus-visible:ring-primary`

4. **ThemeToggle.tsx** — Add focus-visible ring to BOTH branches of the ternary className on each theme button:
   - Selected: `'flex-1 px-3 py-1 bg-primary text-on-primary font-medium focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary focus-visible:ring-inset'`
   - Unselected: `'flex-1 px-3 py-1 bg-surface-container text-on-surface-container hover:bg-surface focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary focus-visible:ring-inset'`
   Use `ring-inset` because ThemeToggle buttons share a border (overflow-hidden) — outset ring would be clipped.

5. **FieldRenderer.tsx** — Two changes:
   a. **Select element:** Change `focus:ring-2` to `focus-visible:ring-2` in the select className (keep ring-2 for form controls — inputs conventionally show focus on mouse too, but selects should match button behavior).
   b. **Tooltip info buttons** (both the select-branch tooltip button and the text-branch tooltip button): Add `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded` to both tooltip button classNames. These are small buttons so ring-2 is appropriate (not ring-3).

Note on TextFieldMD3: The input element uses `focus:ring-2` which is correct for text inputs (users expect visible focus on mouse click for inputs). Do NOT change TextFieldMD3.
  </action>
  <verify>
    <automated>npx vitest run</automated>
  </verify>
  <done>MD3_BTN_FILLED/OUTLINED/TEXT contain focus-visible:ring-3. BackendCard has focus-visible ring. StepIndicator completed-step has upgraded group-focus-visible:ring-3. ThemeToggle buttons have focus-visible ring. FieldRenderer select uses focus-visible:ring-2, tooltip buttons have focus-visible ring. All tests pass.</done>
</task>

</tasks>

<verification>
- `npx vitest run` — all tests green
- Grep for `focus-visible:ring-3` in md3-buttons.ts, BackendCard.tsx, StepIndicator.tsx, ThemeToggle.tsx — all present
- Grep for `grid grid-cols-1 sm:grid-cols-2` in BackendSelectionStep.tsx — present
- Grep for `flex-col sm:flex-row` in all step components — present
- Grep for `hidden sm:block` in StepIndicator.tsx — 3 occurrences (one per label state)
</verification>

<success_criteria>
- All step button rows use `flex-col sm:flex-row` (mobile stacks, desktop inline)
- Backend cards container uses `grid grid-cols-1 sm:grid-cols-2`
- BackendCard has `w-full` for grid cell fill
- StepIndicator labels have `hidden sm:block` (3 spans)
- All MD3 button constants use `focus-visible:ring-3 focus-visible:ring-primary`
- BackendCard, ThemeToggle, StepIndicator completed-step, FieldRenderer tooltip buttons all have focus-visible rings
- All existing tests pass (no regressions)
</success_criteria>

<output>
After completion, create `.planning/phases/11-polish-responsiveness/11-01-SUMMARY.md`
</output>