Ready2Blob/.planning/phases/04-review-download-security/04-04-PLAN.md

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

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
04-review-download-security	04	execute	4	04-03	src/App.tsx src/components/wizard/StepIndicator.tsx	true	CONF-02 CONF-03 DOWN-01 DOWN-02 DOWN-03 DOWN-04 DOWN-05 DOWN-06 SECU-01 SECU-02 SECU-03	truths artifacts key_links 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 path provides contains src/App.tsx Wired ReviewStep as step index 3 in the steps array ReviewStep path provides contains src/components/wizard/StepIndicator.tsx STEP_LABELS updated with fourth entry 'Review' Review from to via pattern src/App.tsx src/components/wizard/ReviewStep.tsx import { ReviewStep } ReviewStep from to via pattern src/components/wizard/StepIndicator.tsx STEP_LABELS array array entry at index 3 'Review'

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.

<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/phases/04-review-download-security/04-RESEARCH.md @src/App.tsx @src/components/wizard/StepIndicator.tsx @src/App.test.tsx

From src/App.tsx (current — step 3 add point annotated in comments):

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

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.

Task 1: Wire ReviewStep into App.tsx and add 'Review' label to StepIndicator src/App.tsx, src/components/wizard/StepIndicator.tsx 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 = [ , , , , // 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

npm test 2>&1 | tail -20 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. `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.

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

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