docs(04-review-download-security): create phase 4 plan
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>
This commit is contained in:
Claude Sonnet 4.6
@@ -0,0 +1,129 @@
|
||||
---
|
||||
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>
|
||||
Reference in New Issue
Block a user