robotica4us-collab
c2cbdeec44
* feat(issue-17): add onboarding wizard for new users
Adds a step-based onboarding wizard that guides new users through their
first Claw3D setup: welcome, prerequisites, gateway connection, agent
discovery, and a completion screen.
Architecture:
src/features/onboarding/ (new feature module):
- types.ts: Step definitions, navigation helpers (getNextStep/getPrevStep)
- useOnboardingState.ts: localStorage-backed persistence hook
- index.ts: Barrel exports for clean imports
- components/OnboardingWizard.tsx: Main wizard container with step
navigation, progress bar, and modal overlay
- components/WelcomeStep.tsx: Feature highlights grid
- components/PrerequisitesStep.tsx: Checklist with links/commands
- components/ConnectStep.tsx: Compact gateway connection form
- components/AgentsStep.tsx: Agent discovery feedback
- components/CompleteStep.tsx: Final screen with CTA
Design decisions:
- Modular step system: new steps can be added by extending
OnboardingStepId and registering a component in the switch
- localStorage persistence: wizard shows once per browser, resettable
from settings (future: wire into Studio settings API)
- Connect step gates forward navigation: users cannot skip connection
- Follows Claw3D conventions: feature-first module, no shared state
pollution, Tailwind utility classes, lucide-react icons
- Does NOT modify existing routes or components — zero-risk integration
(parent wiring left to maintainer preference)
Integration guide (for maintainer):
1. Import { OnboardingWizard, useOnboardingState } from the module
2. Add useOnboardingState() to the root layout or agents page
3. Render <OnboardingWizard /> when showOnboarding is true
4. Pass gateway connection props from existing store
tests/unit/onboardingTypes.test.ts (13 tests):
- Step structure validation, navigation helpers, ordering
tests/unit/onboardingState.test.ts (5 tests):
- localStorage persistence, show/hide/reset lifecycle
Addresses #17
* fix(onboarding): wire wizard launch into office UI
Mount the onboarding wizard in OfficeScreen and add a settings action that can re-open it so the new-user flow is reachable and testable.
Made-with: Cursor
---------
Co-authored-by: Neo <neo@openclaw.ai>
Co-authored-by: iamlukethedev <lucas.guilherme@smartwayslfl.com>
62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
/**
|
|
* WelcomeStep — First onboarding screen introducing Claw3D.
|
|
*/
|
|
import { Building2, Eye, MessageSquare, Users } from "lucide-react";
|
|
|
|
const features = [
|
|
{
|
|
icon: Eye,
|
|
title: "Watch agents work",
|
|
description: "See your AI agents in real time in a shared 3D office",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Manage your fleet",
|
|
description: "Create, configure, and monitor agents from one place",
|
|
},
|
|
{
|
|
icon: MessageSquare,
|
|
title: "Chat and approve",
|
|
description: "Talk to agents, approve exec commands, review their work",
|
|
},
|
|
{
|
|
icon: Building2,
|
|
title: "Build your office",
|
|
description: "Customize rooms, desks, and the whole office layout",
|
|
},
|
|
] as const;
|
|
|
|
export const WelcomeStep = () => (
|
|
<div className="space-y-5">
|
|
<div className="space-y-2">
|
|
<p className="text-sm leading-relaxed text-white/80">
|
|
Claw3D turns your AI automation into a{" "}
|
|
<span className="font-medium text-white">visual workplace</span> — an
|
|
office where your OpenClaw agents collaborate, code, test, and execute
|
|
tasks in a shared 3D environment.
|
|
</p>
|
|
<p className="text-sm text-white/60">
|
|
This wizard will help you connect to your OpenClaw gateway and get
|
|
started in about two minutes.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{features.map(({ icon: Icon, title, description }) => (
|
|
<div
|
|
key={title}
|
|
className="rounded-lg border border-white/8 bg-white/[0.03] px-3.5 py-3"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Icon className="h-4 w-4 shrink-0 text-emerald-400" />
|
|
<span className="text-xs font-semibold text-white">{title}</span>
|
|
</div>
|
|
<p className="mt-1.5 text-[11px] leading-snug text-white/55">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|