web-next: implement guided onboarding UX and define backend onboarding RPC contract#172
Conversation
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 47554d028d
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| <section className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6 md:p-8"> | ||
| {state.step === 'welcome' && ( | ||
| <div className="space-y-4"> | ||
| {localStorage.getItem(STORAGE_KEY) && <p className="rounded-xl bg-indigo-500/10 p-3 text-sm text-indigo-200">Welcome back — we saved your progress.</p>} |
There was a problem hiding this comment.
Gate resume banner on restored session data
The welcome-step banner currently checks localStorage.getItem(STORAGE_KEY) directly, but this key is always written on mount by the persistence effect, so first-time users (and users who just pressed Skip) are incorrectly shown “Welcome back — we saved your progress.” even when no prior session was resumed. This makes resume state unreliable and confuses onboarding state recovery logic.
Useful? React with 👍 / 👎.
| const resetProgress = () => { | ||
| const fresh = createInitialState(); | ||
| fresh.packageManager = detectPackageManager(); | ||
| localStorage.removeItem(STORAGE_KEY); | ||
| setState(fresh); |
There was a problem hiding this comment.
Make "Skip setup" actually skip onboarding
The Skip setup control is wired to resetProgress, which resets the flow back to welcome instead of marking onboarding as skipped or exiting the flow, so users who click Skip are kept inside onboarding and must still proceed through steps. That behavior contradicts the control label and the documented skip semantics, and will block integrations expecting a real skipped state.
Useful? React with 👍 / 👎.
Motivation
Description
apps/web-next/src/views/OnboardingFlow.tsxthat covers: welcome/resume messaging, gateway mode selection and auth gating, permissions review with grant simulation, optional CLI detection/install state machine, onboarding-chat prompt selection, progress bar, skip/reset behavior, and local persistence vialocalStoragefor resume.authMode=none) and basic UX state machines forcliStatusand permission grants.apps/web-next/docs/ONBOARDING_BACKEND_SPEC.md, a complete backend API / Gateway RPC specification that definesonboarding.start,onboarding.get,onboarding.step.update,onboarding.permissions.*,onboarding.cli.*,onboarding.chat.handoff, push events, data models (OnboardingSession), validation rules, telemetry/event names, security and retry semantics, and a migration plan.Testing
pnpm installandpnpm buildfromapps/web-next, and the build completed successfully.pnpm dev --host 0.0.0.0 --port 4173) and captured a Playwright screenshot of the Onboarding view to verify UI layout and navigation (artifact:browser:/tmp/codex_browser_invocations/713b85a7fc46b607/artifacts/artifacts/onboarding-flow.png).localStorageresume behavior, gating of remote+no-auth, CLI install flow transitions, and permission toggle/grant interactions all behaved as expected in the running dev build.Files changed:
apps/web-next/src/views/OnboardingFlow.tsx,apps/web-next/docs/ONBOARDING_BACKEND_SPEC.md.Docs referenced:
https://docs.openclaw.ai/start/onboarding
https://docs.openclaw.ai/start/wizard
https://docs.openclaw.ai/start/onboarding-tour-spec
https://docs.openclaw.ai/start/wizard-cli-reference
Codex Task