feat(30-02): wire multi-step wizard in NexusOnboardingWizard

- Refactor to 3-step flow: hardware detection, mode selection, root directory
- Add step indicator 'Step N of 3'
- Add HardwareSummaryStep on step 1 with dynamic heading
- Add ModeSelector on step 2 with 'both' pre-selected
- Add Back buttons on steps 2 and 3
- Persist selected mode via updateNexusSettings on wizard completion
- Reset step and mode on wizard close

ui/src/components/NexusOnboardingWizard.tsx

@@ -1,4 +1,4 @@
-// [nexus] Replacement onboarding wizard — single-step root directory flow
+// [nexus] Replacement onboarding wizard — 3-step flow: hardware detection, mode selection, root directory
 // Exports `OnboardingWizard` to match the named import in App.tsx.
 // Wired via Vite alias: all imports of ./components/OnboardingWizard are
 // redirected here at build time; the original file is preserved for upstream rebase.
@@ -17,8 +17,12 @@ import { Dialog, DialogPortal } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { cn } from "../lib/utils";
+import { ModeSelector } from "./onboarding/ModeSelector";
+import { HardwareSummaryStep } from "./onboarding/HardwareSummaryStep";
+import { useHardwareInfo } from "../hooks/useHardwareInfo";
+import { updateNexusSettings, type NexusMode } from "../api/hardware";
 
-// [nexus] Single-step onboarding wizard: root directory → workspace + PM + Engineer
+// [nexus] 3-step onboarding wizard: hardware detection → mode selection → root directory
 export function OnboardingWizard() {
   const { onboardingOpen, onboardingOptions, closeOnboarding } = useDialog();
   const { companies, setSelectedCompanyId, loading: companiesLoading } = useCompany();
@@ -45,11 +49,20 @@ export function OnboardingWizard() {
     setRouteDismissed(false);
   }, [location.pathname]);
 
+  // Step state: 1 = hardware detection, 2 = mode selection, 3 = root directory
+  const [step, setStep] = useState(1);
+
+  // Mode state: "both" pre-selected per UI-SPEC
+  const [selectedMode, setSelectedMode] = useState<NexusMode>("both");
+
   // Form state
   const [rootDir, setRootDir] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // [nexus] Hardware detection — only fetch when wizard is open
+  const { data: hardwareInfo, isLoading: hwLoading, isError: hwError } = useHardwareInfo(effectiveOnboardingOpen);
+
   // [nexus] Adapter detection state — probe for Hermes when wizard opens
   const [defaultAdapter, setDefaultAdapter] = useState<"claude_local" | "hermes_local">("claude_local");
   const [probing, setProbing] = useState(false);
@@ -60,6 +73,8 @@ export function OnboardingWizard() {
       setRootDir("");
       setError(null);
       setLoading(false);
+      setStep(1);
+      setSelectedMode("both");
     }
   }, [effectiveOnboardingOpen]);
 
@@ -161,6 +176,13 @@ export function OnboardingWizard() {
         queryKey: queryKeys.agents.list(company.id),
       });
 
+      // Persist selected mode — non-blocking
+      try {
+        await updateNexusSettings({ mode: selectedMode });
+      } catch {
+        // Non-blocking — mode defaults to "both" if save fails
+      }
+
       // Navigate to dashboard — not an issue detail page
       closeOnboarding();
       navigate(`/${company.issuePrefix}/dashboard`);
@@ -188,6 +210,68 @@ export function OnboardingWizard() {
             "p-8 flex flex-col gap-6"
           )}
         >
+          {/* Step indicator */}
+          <p className="text-xs text-muted-foreground text-center">Step {step} of 3</p>
+
+          {/* Step 1 — Hardware Detection */}
+          {step === 1 && (
+            <>
+              <div className="flex flex-col gap-2 text-center">
+                <h1 className="text-2xl font-semibold tracking-tight">
+                  {hwLoading ? "Detecting your hardware..." : "Your hardware"}
+                </h1>
+              </div>
+
+              <HardwareSummaryStep
+                hardwareInfo={hardwareInfo}
+                isLoading={hwLoading}
+                isError={hwError}
+              />
+
+              <Button
+                type="button"
+                onClick={() => setStep(2)}
+                className="w-full"
+              >
+                Continue
+              </Button>
+            </>
+          )}
+
+          {/* Step 2 — Mode Selection */}
+          {step === 2 && (
+            <>
+              <div className="flex flex-col gap-2 text-center">
+                <h1 className="text-2xl font-semibold tracking-tight">
+                  Choose your mode
+                </h1>
+              </div>
+
+              <ModeSelector value={selectedMode} onChange={setSelectedMode} />
+
+              <div className="flex flex-col gap-2">
+                <Button
+                  type="button"
+                  onClick={() => setStep(3)}
+                  className="w-full"
+                >
+                  Continue
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={() => setStep(1)}
+                  className="w-full"
+                >
+                  Back
+                </Button>
+              </div>
+            </>
+          )}
+
+          {/* Step 3 — Root Directory */}
+          {step === 3 && (
+            <>
               {/* Header */}
               <div className="flex flex-col gap-2 text-center">
                 <h1 className="text-2xl font-semibold tracking-tight">
@@ -261,7 +345,19 @@ export function OnboardingWizard() {
                     "Get Started"
                   )}
                 </Button>
+
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={() => setStep(2)}
+                  className="w-full"
+                  disabled={loading}
+                >
+                  Back
+                </Button>
               </form>
+            </>
+          )}
         </div>
       </div>
     </DialogPortal>