---
phase: 04-review-download-security
plan: 04
type: execute
wave: 4
depends_on: [04-03]
files_modified:
  - src/App.tsx
  - src/components/wizard/StepIndicator.tsx
autonomous: true
requirements: [CONF-02, CONF-03, DOWN-01, DOWN-02, DOWN-03, DOWN-04, DOWN-05, DOWN-06, SECU-01, SECU-02, SECU-03]

must_haves:
  truths:
    - "App.tsx renders ReviewStep when currentStep is 3"
    - "StepIndicator shows 4 labels: Backend, Remote Config, Deployment, Review"
    - "Navigating to step 3 via StepIndicator dispatch renders the ReviewStep component"
    - "Full npm test suite remains GREEN after wiring"
  artifacts:
    - path: "src/App.tsx"
      provides: "Wired ReviewStep as step index 3 in the steps array"
      contains: "ReviewStep"
    - path: "src/components/wizard/StepIndicator.tsx"
      provides: "STEP_LABELS updated with fourth entry 'Review'"
      contains: "Review"
  key_links:
    - from: "src/App.tsx"
      to: "src/components/wizard/ReviewStep.tsx"
      via: "import { ReviewStep }"
      pattern: "ReviewStep"
    - from: "src/components/wizard/StepIndicator.tsx"
      to: "STEP_LABELS array"
      via: "array entry at index 3"
      pattern: "'Review'"
---

<objective>
Wire ReviewStep into the running application: add it as step index 3 in App.tsx and add 'Review' as the fourth entry in StepIndicator's STEP_LABELS array.

Purpose: ReviewStep is fully implemented and tested in isolation (Plan 03). This plan completes the integration so the full 4-step wizard flow is navigable end-to-end.
Output: Updated App.tsx and StepIndicator.tsx. No new files.
</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/phases/04-review-download-security/04-RESEARCH.md
@src/App.tsx
@src/components/wizard/StepIndicator.tsx
@src/App.test.tsx
</context>

<interfaces>
<!-- Existing extension points — both files were pre-annotated for this change -->

From src/App.tsx (current — step 3 add point annotated in comments):
```typescript
// Guard: clamp to valid range (phase 4 will add step 3 for review/download)
const stepIndex = Math.min(state.currentStep, steps.length - 1);
// steps array currently has indices 0, 1, 2
```

From src/components/wizard/StepIndicator.tsx (current):
```typescript
const STEP_LABELS = ['Backend', 'Remote Config', 'Deployment'];
// Add 'Review' as index 3
```

The App.tsx clamp logic (`Math.min(state.currentStep, steps.length - 1)`) already handles step 3 correctly once ReviewStep is in the array — no logic changes needed, only array population.
</interfaces>

<tasks>

<task type="auto">
  <name>Task 1: Wire ReviewStep into App.tsx and add 'Review' label to StepIndicator</name>
  <files>src/App.tsx, src/components/wizard/StepIndicator.tsx</files>
  <action>
    Edit src/App.tsx:
    1. Add import: `import { ReviewStep } from './components/wizard/ReviewStep';`
    2. Add ReviewStep as the fourth element in the steps array:
       ```typescript
       const steps = [
         <BackendSelectionStep key="backend" />,
         <RemoteConfigStep key={state.remote.backendType ?? 'none'} />,
         <DeploymentStep key="deployment" />,
         <ReviewStep key="review" />,   // step index 3 — Phase 4
       ];
       ```
    3. Remove or update the comment "phase 4 will add step 3 for review/download" — it is now implemented.
    4. The `Math.min(state.currentStep, steps.length - 1)` clamp requires NO change — it automatically works with 4 steps.

    Edit src/components/wizard/StepIndicator.tsx:
    1. Update STEP_LABELS to include 'Review' as the fourth entry:
       ```typescript
       const STEP_LABELS = ['Backend', 'Remote Config', 'Deployment', 'Review'];
       ```
    2. Update the header comment to reflect the new step: `// 1.Backend > 2.Remote Config > 3.Deployment > 4.Review`
    3. No other logic changes needed — the map over STEP_LABELS automatically renders the fourth step.

    After edits, run `npm test` to verify:
    - App.test.tsx (existing step routing tests) must remain GREEN
    - StepIndicator.test.tsx must remain GREEN
    - All other tests must remain GREEN
  </action>
  <verify>
    <automated>npm test 2>&1 | tail -20</automated>
  </verify>
  <done>App.tsx imports and renders ReviewStep at step index 3. StepIndicator shows 4 step labels including 'Review'. Full npm test suite GREEN. TypeScript compilation clean.</done>
</task>

</tasks>

<verification>
`npm run build` succeeds. `npm test` full suite GREEN. The app wires ReviewStep without breaking any existing step routing, StepIndicator navigation, or prior test assertions.
</verification>

<success_criteria>
- src/App.tsx imports ReviewStep and includes it as steps[3]
- src/components/wizard/StepIndicator.tsx STEP_LABELS has 4 entries ending with 'Review'
- All existing tests (App.test.tsx, StepIndicator.test.tsx, all Phase 1–3 tests) remain GREEN
- `npm run build` produces no errors
</success_criteria>

<output>
After completion, create `.planning/phases/04-review-download-security/04-04-SUMMARY.md`
</output>