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
This commit is contained in:
Nexus Dev
parent
f44235460a
commit
e1bdb9a800
1 changed files with 167 additions and 71 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue