kawaandClaude Sonnet 4.6
405bf477b4
5 plans across 5 waves: Wave 0 TDD stubs, utilities + OutputBlock, ReviewStep implementation, App.tsx wiring, human verify checkpoint. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
130 lines
5.0 KiB
Markdown
130 lines
5.0 KiB
Markdown
---
|
||
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>
|