feat(issue-17): add onboarding wizard for new users (#26)

* 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>

src/features/onboarding/components/WelcomeStep.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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>
+);