285bf585be
6 phases, 13 plans, 21 requirements. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
101 lines
4.6 KiB
Markdown
101 lines
4.6 KiB
Markdown
---
|
|
phase: 32-multi-step-onboarding-wizard
|
|
plan: 01
|
|
subsystem: ui
|
|
|
|
tags: [react, onboarding, wizard, vitest, testing-library]
|
|
|
|
requires:
|
|
- phase: 31-puter.js-zero-config-cloud
|
|
provides: provider selection step, puter/google/apiKey credential capture in wizard state
|
|
|
|
provides:
|
|
- OnboardingSummaryStep component — read-only review card showing hardware, mode, provider, root dir
|
|
- Skip buttons on steps 1 and 2 (step 3 already had skip via ProviderSelectionStep)
|
|
- Step 4 "Review & finish" + "Skip to summary" buttons advancing to step 5
|
|
- Step 5 summary screen wired into NexusOnboardingWizard
|
|
- handleStartChat function creating workspace then opening chat panel (ONBD-06)
|
|
- Step indicator shows "Summary" on step 5 instead of "Step 5 of 4"
|
|
- deriveProviderLabel helper for human-readable provider display
|
|
|
|
affects: [onboarding, chat-panel, dashboard-navigation]
|
|
|
|
tech-stack:
|
|
added: []
|
|
patterns:
|
|
- OnboardingSummaryStep uses SummaryRow internal subcomponent for label-value pairs
|
|
- createWorkspace() refactored out of handleSubmit/handleStartChat to avoid duplication
|
|
- renderToStaticMarkup + fireEvent pattern for jsdom component tests without jest-dom
|
|
|
|
key-files:
|
|
created:
|
|
- ui/src/components/onboarding/OnboardingSummaryStep.tsx
|
|
- ui/src/components/onboarding/OnboardingSummaryStep.test.tsx
|
|
modified:
|
|
- ui/src/components/NexusOnboardingWizard.tsx
|
|
|
|
key-decisions:
|
|
- "createWorkspace() helper extracted so both handleSubmit and handleStartChat share workspace creation without duplication"
|
|
- "Tests use renderToStaticMarkup for static assertions + @testing-library/react fireEvent for click tests (no jest-dom or user-event available)"
|
|
- "Step 4 form submit removed — replaced with button advancing to step 5; actual workspace creation deferred to summary CTA"
|
|
|
|
patterns-established:
|
|
- "SummaryRow: internal non-exported subcomponent rendering label-value pair with optional mono font"
|
|
- "deriveProviderLabel: pure function mapping provider state to display string, placed outside component"
|
|
|
|
requirements-completed: [ONBD-04, ONBD-05, ONBD-06]
|
|
|
|
duration: 4min
|
|
completed: 2026-04-01
|
|
---
|
|
|
|
# Phase 32 Plan 01: Multi-Step Onboarding Wizard Summary
|
|
|
|
**5-step onboarding wizard with skip buttons on steps 1/2/4, summary screen as step 5, and "Start chatting" CTA that creates workspace then opens chat panel.**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** 4 min
|
|
- **Started:** 2026-04-03T21:32:00Z
|
|
- **Completed:** 2026-04-03T21:36:00Z
|
|
- **Tasks:** 2
|
|
- **Files modified:** 3
|
|
|
|
## Accomplishments
|
|
|
|
- Created `OnboardingSummaryStep` component rendering hardware tier, mode, provider, and root directory in a bordered card with "Start chatting" CTA
|
|
- Added skip buttons on steps 1 (hardware), 2 (mode), and 4 (root dir) — fulfilling ONBD-04
|
|
- Wired summary as step 5 in `NexusOnboardingWizard` with step indicator showing "Summary" instead of "Step 5 of 4"
|
|
- Implemented `handleStartChat` that calls `createWorkspace()` then `setChatOpen(true)` after navigation — fulfilling ONBD-06
|
|
- Refactored shared workspace creation into `createWorkspace()` helper used by both submit paths
|
|
- 6 unit tests pass covering rendering, conditional root dir row, error display, click handler, loading/disabled state
|
|
|
|
## Task Commits
|
|
|
|
1. **Task 1: Create OnboardingSummaryStep component and tests** - `c0d7ea5a` (feat)
|
|
2. **Task 2: Wire summary step into wizard, add skip buttons, connect chat handoff** - `47630e53` (feat)
|
|
|
|
**Plan metadata:** (docs commit follows)
|
|
|
|
## Files Created/Modified
|
|
|
|
- `ui/src/components/onboarding/OnboardingSummaryStep.tsx` — Read-only summary card with SummaryRow subcomponent and Start chatting CTA
|
|
- `ui/src/components/onboarding/OnboardingSummaryStep.test.tsx` — 6 unit tests using renderToStaticMarkup + fireEvent
|
|
- `ui/src/components/NexusOnboardingWizard.tsx` — 5-step wizard with skip on 1/2/4, summary on step 5, createWorkspace helper, handleStartChat with setChatOpen(true)
|
|
|
|
## Deviations from Plan
|
|
|
|
### Auto-fixed Issues
|
|
|
|
**1. [Rule 1 - Bug] Replaced @testing-library/user-event with fireEvent**
|
|
- **Found during:** Task 1
|
|
- **Issue:** `@testing-library/user-event` is not installed in the project; only `@testing-library/react` and `renderToStaticMarkup` patterns are used
|
|
- **Fix:** Rewrote tests to use `renderToStaticMarkup` for static rendering assertions and `fireEvent.click` from `@testing-library/react` for interaction tests; also added `cleanup()` after each test to isolate renders
|
|
- **Files modified:** `ui/src/components/onboarding/OnboardingSummaryStep.test.tsx`
|
|
- **Commit:** c0d7ea5a
|
|
|
|
## Known Stubs
|
|
|
|
None — all rows display live wizard state passed as props.
|
|
|
|
## Self-Check: PASSED
|