feat: choose-your-path onboarding wizard with real API calls#1189
Draft
simple-agent-manager[bot] wants to merge 10 commits into
Draft
feat: choose-your-path onboarding wizard with real API calls#1189simple-agent-manager[bot] wants to merge 10 commits into
simple-agent-manager[bot] wants to merge 10 commits into
Conversation
Replace tab-based onboarding with a TurboTax-style question-driven flow: - Questions phase: AI subscription, cloud account, GitHub readiness - Path preview: personalized setup plan based on answers - Step execution: real API calls for credential validation, GitHub install, project creation - Completion: success screen with next-steps guidance Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Fix setState during render: use useEffect for auto-select and repo loading - Fix stale closures: use functional updaters in handleAnswer/handleBack - Deduplicate tags to prevent accumulation on remount - Validate selectedRepo exists before createProject - Fix misleading action labels: ai-oauth and ai-sam steps now say "Continue" - Fix template path: navigate to /projects instead of broken createProject call - Split StepExecution.tsx into step-actions.ts and ProjectSelector.tsx (file size) - Fix missing space in template literal for error messages Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add role="radiogroup" + aria-checked on question option buttons - Add aria-live region for phase transition announcements - Add role="region" to wizard container - Add progressbar ARIA attributes (valuenow, valuemin, valuemax, label) - Add proper labels to all form inputs (API key, Hetzner token, repo select) - Replace raw <select> with Select component from design system - Remove internal tag debug output from PathPreview - Fix step numbering: skip auto-handled steps in numbering - Filter auto-handled steps from execution phase - Use sam-type-section-heading instead of page-title for widget headings - Add loading skeleton during initial status check - Add min-h-[44px] to header buttons for touch target compliance - Fix getTimeEstimate "~0 mins" edge case - Rename "Done" badge to "Handled" for clarity - Simplify question counter (removed misleading "of ~4") Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- GitHub App install opens in new tab instead of navigating away, preserving wizard state. Polls for installation completion every 3s. - Completion screen adds explicit Dismiss button and dismisses on "Go to my projects" click so the wizard card disappears. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- existing-* tags now mark steps as optional in path-generator, so returning users skip already-completed setup steps - Refactor handleAnswer to avoid nested setState inside updater - Store and clean up GitHub poll timeout on unmount - aria-live region announces question text during question phase - Fix ai-oauth step details to not promise a redirect - Template project path calls onSkip to properly dismiss wizard Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add `?? []` guard in `listAgentProfiles()` to prevent crash when API returns unexpected shape (fixes React error on project page load after onboarding wizard creates a new project) - Add Playwright recording spec for 7 onboarding scenarios × 2 viewports (14 videos uploaded to SAM library under /onboarding-wizard-recordings/) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Review findings addressed: - CRITICAL: Template path never dismissed wizard — onSkip was always undefined for the project step. Now passes onDismiss directly. - CRITICAL: handleCreateProject double-navigation — removed competing setTimeout; dismiss wizard and navigate directly to project. - CRITICAL: GitHub poll double-click leaked intervals — clear existing poll before starting new one. - CRITICAL: QuestionCard used invalid role="radio" on <button> — replaced with aria-pressed on plain buttons. - HIGH: GitHub poll timeout was silent — now sets error message with retry prompt after 5 minutes. - HIGH: No focus management on transitions — added ref-based focus to phase content area and step headings. - HIGH: text-[10px] below minimum readable size — replaced with text-xs. - HIGH: text-fg-muted/30 and /40 failed WCAG contrast — raised to text-fg-muted for all instances. - HIGH: Touch targets below 44px — fixed "Show details" button and agent selector buttons. - HIGH: Select not disabled during project creation — added disabled prop during loading. - MEDIUM: Promise.all lost partial results on single failure — replaced with Promise.allSettled. - Removed broken old test files (OnboardingWizard.test.tsx and onboarding-wizard-audit.spec.ts) that tested the replaced tab-based wizard. - Added aria-hidden to decorative "S" badge. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- questions.test.ts: validates graph structure (no cycles, all reachable, all paths terminate), content integrity (non-empty fields, terminal tags), and full path enumeration (16 paths confirmed) - step-actions.test.ts: validates validation-before-save invariant for both ai-apikey and cloud-hetzner steps, input trimming, error messages, fallback messages, and pass-through step behavior - path-generator.test.ts: already committed in previous batch 56 tests across 3 files, all passing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Critical fixes: - Fix TS2304: onDismiss was not in StepForm scope — add to StepFormProps and pass through from StepExecution (template path was completely broken) - Fix tag race condition: handleAnswer now uses functional updater for setTags to prevent checkStatus effect from overwriting existing-* tags - Remove dead onSkip prop from ProjectSelector (replaced by onDismiss) High fixes: - Add aria-expanded to "Show details" disclosure button - Add aria-pressed to agent selector buttons in ai-apikey step - Fix first-step focus: remove > 0 guard so heading gets focus on mount - Change QuestionCard container from role="list" to role="group" (buttons are not valid listitem children) Medium fixes: - Add aria-hidden to pipe separators in PathPreview stats - Add min-h-[44px] touch target to "Change my answers" button - Use semantic <ol>/<li> for CompletionScreen "What's next" list - Add aria-hidden to ArrowLeft icon in Back button Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the tab-based onboarding wizard with a TurboTax-style question-driven flow that personalizes the setup experience based on user answers.
Flow
What's real (not mocked)
validateAgentCredential/saveAgentCredentialvalidateCredential/createCredentialgetGitHubInstallUrllistGitHubInstallations/listRepositoriescreateProjectAccessibility
role="radiogroup"+aria-checkedon question optionsaria-liveregion for phase transition announcementsrole="progressbar"with full ARIA attributes<label>elements on all form inputsFiles
choose-path/ChoosePathWizard.tsx— main orchestrator (258 lines)choose-path/questions.ts— question definitions with branchingchoose-path/path-generator.ts— tag-based step generationchoose-path/QuestionCard.tsx— accessible question UIchoose-path/PathPreview.tsx— step preview with time estimateschoose-path/StepExecution.tsx— step forms with real API callschoose-path/ProjectSelector.tsx— repo picker componentchoose-path/step-actions.ts— API call execution logicchoose-path/CompletionScreen.tsx— success screen🤖 Generated with Claude Code