b680948d8c
- Fix race condition: add request ID guard for stale workspace detection responses
- Guard workspaceMode:true: only persist when repos.length > 0
- Add server-side taskPrefix validation (/^[A-Z]{1,5}$/)
- Move store.init() inside try/finally in both CLI TaskStore lifecycles
- Accept 1-character prefixes in CLI prompt (was requiring >= 2)
- Fix workspaceMode passing: forward false explicitly (was coerced to undefined)
- Fix 3rd KB→FN fallback in distributed-task-id.ts catch block
- Add try/finally to dashboard TaskStore in register-project-routes
- Gate workspace detection on existing-directory mode only (skip clone mode)
817 lines
36 KiB
TypeScript
817 lines
36 KiB
TypeScript
import "./SetupWizardModal.css";
|
|
import { lazy, Suspense, useState, useCallback, useMemo, useRef, useEffect, type KeyboardEvent } from "react";
|
|
import { X, Loader2, CheckCircle, ChevronRight, Sparkles } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
import type { AgentOnboardingSummary, ProjectInfo, ProjectCreateInput } from "../api";
|
|
import { createAgent, registerProject, detectWorkspace } from "../api";
|
|
import { DirectoryPicker } from "./DirectoryPicker";
|
|
import { suggestProjectName } from "../utils/projectDetection";
|
|
|
|
/*
|
|
FNXC:TaskPrefix 2026-06-24-19:00:
|
|
Derive a task prefix from a project name in the browser. Mirrors the logic in
|
|
@fusion/core's suggestTaskPrefix: strip non-alpha, uppercase, take 2-4 chars,
|
|
fall back to "FN". Duplicated because @fusion/core is server-only.
|
|
*/
|
|
function suggestTaskPrefixFromName(name: string): string {
|
|
const cleaned = name.replace(/[^a-zA-Z]/g, "").toUpperCase();
|
|
if (cleaned.length >= 2 && cleaned.length <= 4) return cleaned;
|
|
if (cleaned.length > 4) return cleaned.slice(0, 4);
|
|
return "FN";
|
|
}
|
|
import { useNodes } from "../hooks/useNodes";
|
|
import { AgentAvatar } from "./AgentAvatar";
|
|
import { ErrorBoundary } from "./ErrorBoundary";
|
|
import { AGENT_PRESETS, getPresetById } from "./agent-presets";
|
|
import {
|
|
buildAgentCreatePayload,
|
|
mapOnboardingSummaryToAgentDraft,
|
|
mapPresetToAgentDraft,
|
|
type AgentDraftValues,
|
|
} from "./agent-presets/agentCreatePayload";
|
|
|
|
const ExperimentalAgentOnboardingModal = lazy(() =>
|
|
import("./ExperimentalAgentOnboardingModal").then((m) => ({ default: m.ExperimentalAgentOnboardingModal })),
|
|
);
|
|
|
|
export interface SetupWizardModalProps {
|
|
/** Called when first-run setup should enter the registered project. */
|
|
onProjectRegistered: (project: ProjectInfo) => void;
|
|
/** Called when wizard is closed (completed or cancelled) */
|
|
onClose?: () => void;
|
|
/** Enables the existing AI interview entry point for first-agent drafting. */
|
|
agentOnboardingEnabled?: boolean;
|
|
/** When false, register the project and return control to a parent onboarding flow. */
|
|
includeAgentStep?: boolean;
|
|
}
|
|
|
|
type WizardStep = "manual" | "agent" | "complete";
|
|
type ManualSetupMode = "existing" | "clone";
|
|
type AgentOutcome = "created" | "skipped" | null;
|
|
|
|
interface WizardState {
|
|
step: WizardStep;
|
|
manualMode: ManualSetupMode;
|
|
manualPath: string;
|
|
manualCloneUrl: string;
|
|
manualName: string;
|
|
manualIsolationMode: "in-process" | "child-process";
|
|
manualNodeId: string;
|
|
manualTaskPrefix: string;
|
|
detectedRepos: string[];
|
|
workspaceMode: boolean;
|
|
isDetectingWorkspace: boolean;
|
|
registeredProject: ProjectInfo | null;
|
|
selectedPresetId: string;
|
|
agentDraft: AgentDraftValues;
|
|
isCreatingAgent: boolean;
|
|
isRegistering: boolean;
|
|
error: string | null;
|
|
agentError: string | null;
|
|
agentOutcome: AgentOutcome;
|
|
}
|
|
|
|
/**
|
|
* Setup wizard for project registration.
|
|
*
|
|
* Provides a focused project-details -> project-agent flow with a directory
|
|
* picker for selecting the project directory and auto-name suggestion.
|
|
*/
|
|
export function SetupWizardModal({
|
|
onProjectRegistered,
|
|
onClose,
|
|
agentOnboardingEnabled = false,
|
|
includeAgentStep = true,
|
|
}: SetupWizardModalProps) {
|
|
const { t } = useTranslation("app");
|
|
const helpUrl = "https://discord.gg/ksrfuy7WYR";
|
|
/*
|
|
FNXC:Onboarding 2026-06-22-03:11:
|
|
New-project setup must collect project details first, then offer a project-specific persistent agent after registration, defaulting to the CEO preset while still letting users choose another template or skip creation.
|
|
The AI interview entry point is feature-flagged by `agentOnboardingEnabled`; preset creation and skip remain available without it.
|
|
|
|
FNXC:Onboarding 2026-06-22-05:16:
|
|
Brand-new onboarding already has its own Agent step after AI, GitHub, and Project setup.
|
|
When this wizard is opened as that Project sub-flow, register the project and return immediately so users do not see two agent prompts.
|
|
*/
|
|
const ceoPreset = useMemo(
|
|
() => getPresetById("ceo") ?? AGENT_PRESETS[0]!,
|
|
[],
|
|
);
|
|
const [isOpen, setIsOpen] = useState(true);
|
|
const [state, setState] = useState<WizardState>(() => ({
|
|
step: "manual",
|
|
manualMode: "existing",
|
|
manualPath: "",
|
|
manualCloneUrl: "",
|
|
manualName: "",
|
|
manualIsolationMode: "in-process",
|
|
manualNodeId: "",
|
|
manualTaskPrefix: "",
|
|
detectedRepos: [],
|
|
workspaceMode: false,
|
|
isDetectingWorkspace: false,
|
|
registeredProject: null,
|
|
selectedPresetId: ceoPreset.id,
|
|
agentDraft: mapPresetToAgentDraft(ceoPreset),
|
|
isCreatingAgent: false,
|
|
isRegistering: false,
|
|
error: null,
|
|
agentError: null,
|
|
agentOutcome: null,
|
|
}));
|
|
const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
|
|
const [isInterviewOpen, setIsInterviewOpen] = useState(false);
|
|
const agentErrorRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
const { nodes, loading: nodesLoading } = useNodes();
|
|
const localNodeId = nodes.find((n) => n.type === "local")?.id;
|
|
|
|
const handleClose = useCallback(() => {
|
|
setIsOpen(false);
|
|
onClose?.();
|
|
}, [onClose]);
|
|
|
|
const handleFinish = useCallback(() => {
|
|
if (state.registeredProject) {
|
|
onProjectRegistered(state.registeredProject);
|
|
return;
|
|
}
|
|
handleClose();
|
|
}, [handleClose, onProjectRegistered, state.registeredProject]);
|
|
|
|
useEffect(() => {
|
|
if (state.agentError) {
|
|
agentErrorRef.current?.focus();
|
|
}
|
|
}, [state.agentError]);
|
|
|
|
const detectWorkspaceRequestId = useRef(0);
|
|
|
|
const handlePathChange = useCallback((path: string) => {
|
|
setState((prev) => {
|
|
const updates: Partial<WizardState> = { manualPath: path, detectedRepos: [], workspaceMode: false };
|
|
// Auto-suggest name when path changes and name is empty or was previously auto-suggested
|
|
if (path && (!prev.manualName || prev.manualName === suggestProjectName(prev.manualPath))) {
|
|
updates.manualName = suggestProjectName(path);
|
|
}
|
|
// Auto-suggest prefix when name changes and prefix is empty or was previously auto-suggested
|
|
const suggestedName = updates.manualName ?? prev.manualName;
|
|
if (suggestedName && (!prev.manualTaskPrefix || prev.manualTaskPrefix === suggestTaskPrefixFromName(suggestProjectName(prev.manualPath)))) {
|
|
updates.manualTaskPrefix = suggestTaskPrefixFromName(suggestedName);
|
|
}
|
|
return { ...prev, ...updates };
|
|
});
|
|
|
|
/*
|
|
FNXC:Workspace 2026-06-24-21:00:
|
|
Detect workspace sub-repos only in existing-directory mode (clone mode creates a fresh
|
|
directory with a single repo). A monotonic request ID guards against stale responses
|
|
overwriting state from a newer path entry (race condition on rapid typing).
|
|
*/
|
|
if (state.manualMode === "existing" && path.trim() && path.trim() !== "/") {
|
|
const requestId = ++detectWorkspaceRequestId.current;
|
|
setState((prev) => ({ ...prev, isDetectingWorkspace: true }));
|
|
detectWorkspace(path.trim())
|
|
.then((result) => {
|
|
if (requestId !== detectWorkspaceRequestId.current) return;
|
|
setState((prev) => ({
|
|
...prev,
|
|
isDetectingWorkspace: false,
|
|
detectedRepos: result.repos,
|
|
workspaceMode: result.isWorkspace,
|
|
}));
|
|
})
|
|
.catch(() => {
|
|
if (requestId !== detectWorkspaceRequestId.current) return;
|
|
setState((prev) => ({ ...prev, isDetectingWorkspace: false }));
|
|
});
|
|
}
|
|
}, [state.manualMode]);
|
|
|
|
const handleManualRegister = useCallback(async () => {
|
|
const trimmedPath = state.manualPath.trim();
|
|
const trimmedName = state.manualName.trim();
|
|
const trimmedCloneUrl = state.manualCloneUrl.trim();
|
|
|
|
if (!trimmedPath || !trimmedName) return;
|
|
if (state.manualMode === "clone" && !trimmedCloneUrl) return;
|
|
|
|
setState((prev) => ({ ...prev, isRegistering: true, error: null }));
|
|
|
|
try {
|
|
const input: ProjectCreateInput = {
|
|
name: trimmedName,
|
|
path: trimmedPath,
|
|
isolationMode: state.manualIsolationMode,
|
|
nodeId: state.manualNodeId || undefined,
|
|
cloneUrl: state.manualMode === "clone" ? trimmedCloneUrl : undefined,
|
|
workspaceMode: state.workspaceMode,
|
|
taskPrefix: state.manualTaskPrefix.trim() || undefined,
|
|
};
|
|
|
|
const result = await registerProject(input);
|
|
|
|
if (!includeAgentStep) {
|
|
setState((prev) => ({
|
|
...prev,
|
|
isRegistering: false,
|
|
}));
|
|
onProjectRegistered(result);
|
|
return;
|
|
}
|
|
|
|
setState((prev) => ({
|
|
...prev,
|
|
step: "agent",
|
|
registeredProject: result,
|
|
isRegistering: false,
|
|
}));
|
|
} catch (err) {
|
|
setState((prev) => ({
|
|
...prev,
|
|
isRegistering: false,
|
|
error: err instanceof Error ? err.message : "Failed to register project",
|
|
}));
|
|
}
|
|
}, [includeAgentStep, onProjectRegistered, state.manualPath, state.manualName, state.manualCloneUrl, state.manualMode, state.manualIsolationMode, state.manualNodeId, state.workspaceMode, state.manualTaskPrefix]);
|
|
|
|
const handlePresetSelect = useCallback((presetId: string) => {
|
|
const preset = getPresetById(presetId);
|
|
if (!preset) return;
|
|
setState((prev) => ({
|
|
...prev,
|
|
selectedPresetId: preset.id,
|
|
agentDraft: mapPresetToAgentDraft(preset),
|
|
agentError: null,
|
|
}));
|
|
}, []);
|
|
|
|
const handlePresetKeyDown = useCallback((event: KeyboardEvent<HTMLButtonElement>, presetId: string) => {
|
|
const currentIndex = AGENT_PRESETS.findIndex((preset) => preset.id === presetId);
|
|
if (currentIndex < 0) return;
|
|
|
|
const lastIndex = AGENT_PRESETS.length - 1;
|
|
let nextIndex: number | null = null;
|
|
if (event.key === "ArrowDown" || event.key === "ArrowRight") {
|
|
nextIndex = currentIndex === lastIndex ? 0 : currentIndex + 1;
|
|
} else if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
|
|
nextIndex = currentIndex === 0 ? lastIndex : currentIndex - 1;
|
|
} else if (event.key === "Home") {
|
|
nextIndex = 0;
|
|
} else if (event.key === "End") {
|
|
nextIndex = lastIndex;
|
|
}
|
|
|
|
if (nextIndex === null) return;
|
|
event.preventDefault();
|
|
const nextPreset = AGENT_PRESETS[nextIndex];
|
|
handlePresetSelect(nextPreset.id);
|
|
requestAnimationFrame(() => {
|
|
document.querySelector<HTMLButtonElement>(`[data-agent-preset-id="${nextPreset.id}"]`)?.focus();
|
|
});
|
|
}, [handlePresetSelect]);
|
|
|
|
|
|
const handleApplyAgentDraft = useCallback((draft: AgentOnboardingSummary) => {
|
|
setState((prev) => ({
|
|
...prev,
|
|
selectedPresetId: "",
|
|
agentDraft: mapOnboardingSummaryToAgentDraft(draft),
|
|
agentError: null,
|
|
}));
|
|
}, []);
|
|
|
|
const handleCreateFirstAgent = useCallback(async () => {
|
|
if (!state.registeredProject || !state.agentDraft.name.trim()) return;
|
|
setState((prev) => ({ ...prev, isCreatingAgent: true, agentError: null }));
|
|
try {
|
|
await createAgent(buildAgentCreatePayload(state.agentDraft), state.registeredProject.id);
|
|
setState((prev) => ({
|
|
...prev,
|
|
step: "complete",
|
|
isCreatingAgent: false,
|
|
agentOutcome: "created",
|
|
}));
|
|
} catch (err) {
|
|
setState((prev) => ({
|
|
...prev,
|
|
isCreatingAgent: false,
|
|
agentError: err instanceof Error ? err.message : t("setup.firstAgentCreateError", "Failed to create agent"),
|
|
}));
|
|
}
|
|
}, [state.agentDraft, state.registeredProject, t]);
|
|
|
|
const handleSkipAgent = useCallback(() => {
|
|
setState((prev) => ({
|
|
...prev,
|
|
step: "complete",
|
|
agentError: null,
|
|
agentOutcome: "skipped",
|
|
}));
|
|
}, []);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const isExistingMode = state.manualMode === "existing";
|
|
const isCloneMode = state.manualMode === "clone";
|
|
const hasPath = state.manualPath.trim().length > 0;
|
|
const hasName = state.manualName.trim().length > 0;
|
|
const hasCloneUrl = state.manualCloneUrl.trim().length > 0;
|
|
const isRegisterDisabled = state.isRegistering
|
|
|| !hasPath
|
|
|| !hasName
|
|
|| (isCloneMode && !hasCloneUrl);
|
|
const selectedPreset = state.selectedPresetId
|
|
? getPresetById(state.selectedPresetId)
|
|
: undefined;
|
|
const isAgentActionDisabled = state.isCreatingAgent;
|
|
/*
|
|
FNXC:Onboarding 2026-06-22-06:03:
|
|
AI-generated agent drafts are custom and should not appear selected as a template, but the template radiogroup still needs one tabbable item for keyboard users.
|
|
*/
|
|
const agentPresetTabStopId = state.selectedPresetId || ceoPreset.id;
|
|
/*
|
|
FNXC:Onboarding 2026-06-22-05:37:
|
|
The optional project-agent step needs more horizontal room than project details so templates and preview can be compared side by side.
|
|
Keep the wider modal scoped to the agent step so the initial project form stays compact.
|
|
*/
|
|
const modalClassName = `modal setup-wizard-modal${state.step === "agent" ? " setup-wizard-modal--agent" : ""}`;
|
|
|
|
return (
|
|
<div className="modal-overlay open setup-wizard-overlay" role="dialog" aria-modal="true" aria-labelledby="wizard-title">
|
|
<div className={modalClassName}>
|
|
{/* Header */}
|
|
<div className="setup-wizard-header">
|
|
<div className="setup-wizard-heading">
|
|
<div className="setup-wizard-brand" aria-label={t("setup.brandName", "Fusion")}>
|
|
<svg
|
|
className="setup-wizard-brand-logo"
|
|
width={28}
|
|
height={28}
|
|
viewBox="0 0 128 128"
|
|
fill="none"
|
|
aria-label={t("setup.brandLogo", "Fusion logo")}
|
|
role="img"
|
|
>
|
|
<circle
|
|
cx="64"
|
|
cy="64"
|
|
r="52"
|
|
stroke="currentColor"
|
|
strokeWidth="8"
|
|
/>
|
|
<path
|
|
d="M26 101C44 82 62 64 82 45C90 37 98 30 104 24C96 35 89 47 81 60C70 79 57 95 43 108C38 112 32 108 26 101Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
<span className="setup-wizard-brand-name">{t("setup.brandName", "Fusion")}</span>
|
|
</div>
|
|
<h2 id="wizard-title" className="setup-wizard-title">
|
|
{state.step === "manual" && t("setup.welcomeToFusion", "Welcome to Fusion")}
|
|
{state.step === "agent" && t("setup.firstAgentTitle", "Create your first agent")}
|
|
{state.step === "complete" && t("setup.setupCompleteTitle", "Setup Complete!")}
|
|
</h2>
|
|
</div>
|
|
{state.step !== "complete" && state.step !== "agent" && (
|
|
<button
|
|
className="modal-close"
|
|
onClick={handleClose}
|
|
aria-label={t("setup.closeWizard", "Close wizard")}
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="setup-wizard-content">
|
|
{/* Manual Step */}
|
|
{state.step === "manual" && (
|
|
<div className="setup-wizard-manual">
|
|
<div className="form-group">
|
|
<label htmlFor="project-name">{t("setup.projectName", "Project Name")}</label>
|
|
<input
|
|
id="project-name"
|
|
type="text"
|
|
value={state.manualName}
|
|
onChange={(e) =>
|
|
setState((prev) => ({ ...prev, manualName: e.target.value }))
|
|
}
|
|
placeholder={t("setup.projectNamePlaceholder", "my-project")}
|
|
/>
|
|
<p className="form-hint">
|
|
{isCloneMode
|
|
? t("setup.projectNameHintClone", "By default this follows the destination folder name unless you edit it.")
|
|
: t("setup.projectNameHintExisting", "By default this follows the selected directory name unless you edit it.")}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="project-path">{isCloneMode ? t("setup.destinationDirectory", "Destination Directory") : t("setup.projectDirectory", "Project Directory")}</label>
|
|
<DirectoryPicker
|
|
value={state.manualPath}
|
|
onChange={handlePathChange}
|
|
nodeId={state.manualNodeId || undefined}
|
|
localNodeId={localNodeId}
|
|
placeholder={isCloneMode ? t("setup.clonePathPlaceholder", "/path/for/new-clone") : t("setup.projectPathPlaceholder", "/path/to/your/project")}
|
|
/>
|
|
<p className="form-hint">
|
|
{isCloneMode
|
|
? t("setup.clonePathHint", "Select or type an absolute destination path. Fusion will clone into this directory.")
|
|
: t("setup.projectPathHint", "Select or type the absolute path to your project")}
|
|
</p>
|
|
</div>
|
|
|
|
{/*
|
|
FNXC:Workspace 2026-06-24-19:00:
|
|
Workspace mode detection: when the selected directory contains git sub-repos,
|
|
show a checkbox letting the user opt into workspace mode. In workspace mode,
|
|
tasks run per-sub-repo and no git repo is created at the root.
|
|
*/}
|
|
{isExistingMode && state.manualPath.trim() && (
|
|
<div className="form-group">
|
|
<label htmlFor="workspace-mode" className="checkbox-label">
|
|
<input
|
|
id="workspace-mode"
|
|
type="checkbox"
|
|
checked={state.workspaceMode}
|
|
onChange={(e) => setState((prev) => ({ ...prev, workspaceMode: e.target.checked }))}
|
|
/>
|
|
{t("setup.workspaceMode", "Workspace mode (multi-repo)")}
|
|
</label>
|
|
{state.isDetectingWorkspace && (
|
|
<p className="form-hint">
|
|
<Loader2 size={12} className="animate-spin" style={{ display: "inline-block", verticalAlign: "middle", marginRight: 4 }} />
|
|
{t("setup.detectingWorkspace", "Detecting sub-repositories...")}
|
|
</p>
|
|
)}
|
|
{!state.isDetectingWorkspace && state.detectedRepos.length > 0 && (
|
|
<p className="form-hint">
|
|
{t("setup.detectedRepos", "Found {{count}} repositories:", { count: state.detectedRepos.length })}
|
|
{" "}
|
|
{state.detectedRepos.join(", ")}
|
|
</p>
|
|
)}
|
|
{!state.isDetectingWorkspace && state.detectedRepos.length === 0 && state.workspaceMode === false && state.manualPath.trim() && (
|
|
<p className="form-hint">
|
|
{t("setup.noSubReposDetected", "No sub-repositories detected. Enable if this is a multi-repo workspace.")}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/*
|
|
FNXC:TaskPrefix 2026-06-24-19:00:
|
|
Task prefix field: auto-derived from the project name. The prefix is used
|
|
for task IDs (e.g. "MYPR-1"). Users can override it.
|
|
*/}
|
|
<div className="form-group">
|
|
<label htmlFor="task-prefix">{t("setup.taskPrefix", "Task Prefix")}</label>
|
|
<input
|
|
id="task-prefix"
|
|
type="text"
|
|
value={state.manualTaskPrefix}
|
|
onChange={(e) => setState((prev) => ({ ...prev, manualTaskPrefix: e.target.value.toUpperCase() }))}
|
|
placeholder={suggestTaskPrefixFromName(state.manualName || "FN")}
|
|
maxLength={5}
|
|
/>
|
|
<p className="form-hint">
|
|
{t("setup.taskPrefixHint", "Used for task IDs (e.g. \"{{prefix}}-1\"). Derived from project name.", { prefix: state.manualTaskPrefix || "FN" })}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="setup-wizard-advanced">
|
|
<button
|
|
type="button"
|
|
className="setup-wizard-advanced-toggle"
|
|
aria-expanded={showAdvancedSettings}
|
|
onClick={() => setShowAdvancedSettings((prev) => !prev)}
|
|
>
|
|
<ChevronRight size={16} className="setup-wizard-advanced-chevron" />
|
|
<span>{t("setup.advancedSettings", "Advanced settings")}</span>
|
|
</button>
|
|
{showAdvancedSettings && (
|
|
<div className="setup-wizard-advanced-panel">
|
|
<fieldset className="setup-wizard-mode-switch" aria-label="Project setup mode">
|
|
<legend>{t("setup.setupMode", "Setup Mode")}</legend>
|
|
<label
|
|
className={`setup-wizard-mode-option${isExistingMode ? " selected" : ""}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="setup-mode"
|
|
value="existing"
|
|
checked={isExistingMode}
|
|
onChange={() => setState((prev) => ({ ...prev, manualMode: "existing", error: null }))}
|
|
/>
|
|
<span>{t("setup.useExistingDirectory", "Use Existing Directory")}</span>
|
|
</label>
|
|
<label
|
|
className={`setup-wizard-mode-option${isCloneMode ? " selected" : ""}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="setup-mode"
|
|
value="clone"
|
|
checked={isCloneMode}
|
|
onChange={() => setState((prev) => ({ ...prev, manualMode: "clone", error: null }))}
|
|
/>
|
|
<span>{t("setup.cloneGitRepository", "Clone Git Repository")}</span>
|
|
</label>
|
|
</fieldset>
|
|
|
|
{isCloneMode && (
|
|
<div className="form-group">
|
|
<label htmlFor="project-clone-url">{t("setup.repositoryUrl", "Repository URL")}</label>
|
|
<input
|
|
id="project-clone-url"
|
|
type="text"
|
|
value={state.manualCloneUrl}
|
|
onChange={(e) => setState((prev) => ({ ...prev, manualCloneUrl: e.target.value }))}
|
|
placeholder={t("setup.repositoryUrlPlaceholder", "https://github.com/owner/repo.git")}
|
|
/>
|
|
<p className="form-hint">
|
|
{t("setup.cloneGitHint", "Fusion will run git clone into the destination directory, then register that cloned folder.")}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="form-group">
|
|
<div className="project-node-selector">
|
|
<span className="project-node-selector__label">{t("setup.runtimeNode", "Runtime Node")}</span>
|
|
<select
|
|
value={state.manualNodeId}
|
|
onChange={(e) => setState((prev) => ({ ...prev, manualNodeId: e.target.value }))}
|
|
disabled={nodesLoading || state.isRegistering}
|
|
>
|
|
<option value="">{t("setup.localNode", "Local node")}</option>
|
|
{nodes.map((node) => (
|
|
<option key={node.id} value={node.id}>
|
|
{node.name} ({node.type})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label>{t("setup.isolationMode", "Isolation Mode")}</label>
|
|
<div className="setup-wizard-isolation-options">
|
|
<label
|
|
className={`setup-wizard-isolation-option${state.manualIsolationMode === "in-process" ? " selected" : ""}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="isolation-mode"
|
|
value="in-process"
|
|
checked={state.manualIsolationMode === "in-process"}
|
|
onChange={() =>
|
|
setState((prev) => ({ ...prev, manualIsolationMode: "in-process" }))
|
|
}
|
|
/>
|
|
<div className="setup-wizard-isolation-option-content">
|
|
<strong>{t("setup.inProcess", "In-Process")}</strong>
|
|
<span>{t("setup.inProcessDesc", "Lower overhead, shared memory. Best for most projects.")}</span>
|
|
<span className="wizard-option-recommended">{t("setup.recommended", "Recommended")}</span>
|
|
</div>
|
|
</label>
|
|
<label
|
|
className={`setup-wizard-isolation-option${state.manualIsolationMode === "child-process" ? " selected" : ""}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="isolation-mode"
|
|
value="child-process"
|
|
checked={state.manualIsolationMode === "child-process"}
|
|
onChange={() =>
|
|
setState((prev) => ({ ...prev, manualIsolationMode: "child-process" }))
|
|
}
|
|
/>
|
|
<div className="setup-wizard-isolation-option-content">
|
|
<strong>{t("setup.childProcess", "Child-Process")}</strong>
|
|
<span>{t("setup.childProcessDesc", "Isolated execution with crash containment.")}</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{state.error && (
|
|
<div className="wizard-error" role="alert">
|
|
{state.error}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* FNXC:Onboarding 2026-06-22-03:11: First-run setup asks for an optional persistent coordinating agent after project registration. Users can skip it because task creation and task execution do not require an assigned persistent agent; Fusion automatically spawns temporary planning, execution, review, and merge agents for task work. */}
|
|
{state.step === "agent" && (
|
|
<div className="setup-wizard-agent-step">
|
|
<p className="setup-wizard-agent-intro">
|
|
{t("setup.firstAgentIntro", "Agents are optional. Fusion can build tasks without one by starting temporary agents for planning, coding, review, and merge. Create an agent only if you want help coordinating tasks and direction.")}
|
|
</p>
|
|
|
|
<div className="setup-wizard-agent-layout">
|
|
<section className="setup-wizard-agent-presets" aria-labelledby="setup-first-agent-presets-heading">
|
|
<div className="setup-wizard-agent-section-heading" id="setup-first-agent-presets-heading">
|
|
{t("setup.firstAgentTemplates", "Templates")}
|
|
</div>
|
|
<div className="setup-wizard-agent-preset-list" role="radiogroup" aria-label={t("setup.firstAgentTemplates", "Templates")}>
|
|
{AGENT_PRESETS.map((preset) => {
|
|
const selected = state.selectedPresetId === preset.id;
|
|
return (
|
|
<button
|
|
key={preset.id}
|
|
type="button"
|
|
className={`setup-wizard-agent-preset${selected ? " selected" : ""}`}
|
|
role="radio"
|
|
aria-checked={selected}
|
|
aria-label={selected ? t("setup.selectedAgentTemplate", "{{name}} selected", { name: preset.name }) : preset.name}
|
|
tabIndex={preset.id === agentPresetTabStopId ? 0 : -1}
|
|
data-agent-preset-id={preset.id}
|
|
disabled={isAgentActionDisabled}
|
|
onClick={() => handlePresetSelect(preset.id)}
|
|
onKeyDown={(event) => handlePresetKeyDown(event, preset.id)}
|
|
>
|
|
<AgentAvatar agent={{ id: preset.id, icon: preset.icon, name: preset.name }} size={28} />
|
|
<span className="setup-wizard-agent-preset-copy">
|
|
<span className="setup-wizard-agent-preset-name">
|
|
{preset.name}
|
|
{preset.id === "ceo" && <span className="wizard-option-recommended">{t("setup.recommended", "Recommended")}</span>}
|
|
</span>
|
|
<span className="setup-wizard-agent-preset-description">{preset.description}</span>
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="setup-wizard-agent-preview" aria-labelledby="setup-first-agent-preview-heading">
|
|
<div className="setup-wizard-agent-section-heading" id="setup-first-agent-preview-heading">
|
|
{t("setup.firstAgentPreview", "Preview")}
|
|
</div>
|
|
<div className="setup-wizard-agent-preview-card">
|
|
<div className="setup-wizard-agent-preview-title-row">
|
|
<AgentAvatar agent={{ id: state.selectedPresetId || "draft", icon: state.agentDraft.icon, name: state.agentDraft.name }} size={36} />
|
|
<div>
|
|
<h3>{state.agentDraft.name || t("setup.firstAgentDraftName", "Draft agent")}</h3>
|
|
<p>{state.agentDraft.title || selectedPreset?.title || t("setup.firstAgentCustomDraft", "Custom agent draft")}</p>
|
|
</div>
|
|
</div>
|
|
<dl className="setup-wizard-agent-preview-list">
|
|
<div>
|
|
<dt>{t("agents.fieldRole", "Role")}</dt>
|
|
<dd>{state.agentDraft.role}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>{t("agents.fieldInstructionsText", "Inline Instructions")}</dt>
|
|
<dd>{state.agentDraft.instructionsText || t("setup.firstAgentNoInstructions", "No inline instructions yet")}</dd>
|
|
</div>
|
|
</dl>
|
|
{agentOnboardingEnabled && (
|
|
<button
|
|
type="button"
|
|
className="btn setup-wizard-agent-ai-btn"
|
|
onClick={() => setIsInterviewOpen(true)}
|
|
disabled={isAgentActionDisabled}
|
|
>
|
|
<Sparkles size={16} />
|
|
<span>{t("agents.aiInterview", "AI Interview")}</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{state.agentError && (
|
|
<div className="wizard-error" role="alert" tabIndex={-1} ref={agentErrorRef}>
|
|
{state.agentError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Complete Step */}
|
|
{state.step === "complete" && (
|
|
<div className="setup-wizard-complete">
|
|
<div className="setup-wizard-success-streak" aria-hidden="true">
|
|
<div className="setup-wizard-success-streak-core" />
|
|
<div className="setup-wizard-success-streak-glow" />
|
|
</div>
|
|
<CheckCircle size={64} className="success-icon" />
|
|
<h3>{t("setup.allSet", "All Set!")}</h3>
|
|
<p>
|
|
{state.agentOutcome === "created"
|
|
? t("setup.firstAgentCreatedSuccess", "Your project is registered and your first agent is ready.")
|
|
: t("setup.projectRegisteredSuccess", "Your project has been registered successfully.")}
|
|
</p>
|
|
<p>
|
|
{state.agentOutcome === "skipped"
|
|
? t("setup.firstAgentSkippedHint", "You can create agents later from the Agents view.")
|
|
: t("setup.addMoreProjectsHint", "You can add more projects anytime from the project overview.")}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="setup-wizard-footer">
|
|
<a
|
|
className="btn setup-wizard-help-link"
|
|
href={helpUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{t("setup.needHelp", "Need help?")}
|
|
</a>
|
|
{state.step === "manual" && (
|
|
<button
|
|
className="btn btn-primary"
|
|
onClick={handleManualRegister}
|
|
disabled={isRegisterDisabled}
|
|
>
|
|
{state.isRegistering ? (
|
|
<>
|
|
<Loader2 size={16} className="animate-spin" />
|
|
<span>{t("setup.registering", "Registering...")}</span>
|
|
</>
|
|
) : (
|
|
<span>{t("setup.registerProject", "Register Project")}</span>
|
|
)}
|
|
</button>
|
|
)}
|
|
|
|
{state.step === "agent" && (
|
|
<>
|
|
<button
|
|
className="btn"
|
|
onClick={handleSkipAgent}
|
|
disabled={isAgentActionDisabled}
|
|
>
|
|
{t("setup.skipFirstAgent", "Skip for now")}
|
|
</button>
|
|
<button
|
|
className="btn btn-primary"
|
|
onClick={() => void handleCreateFirstAgent()}
|
|
disabled={isAgentActionDisabled || !state.agentDraft.name.trim()}
|
|
aria-busy={state.isCreatingAgent}
|
|
>
|
|
{state.isCreatingAgent ? (
|
|
<>
|
|
<Loader2 size={16} className="animate-spin" />
|
|
<span>{t("setup.creatingFirstAgent", "Creating agent...")}</span>
|
|
</>
|
|
) : (
|
|
<span>{t("setup.createFirstAgent", "Create Agent")}</span>
|
|
)}
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
{state.step === "complete" && (
|
|
<button className="btn btn-primary" onClick={handleFinish}>
|
|
<CheckCircle size={16} />
|
|
<span>{t("setup.getStarted", "Get Started")}</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{agentOnboardingEnabled && isInterviewOpen && (
|
|
<ErrorBoundary
|
|
level="modal"
|
|
fallback={(
|
|
<div className="wizard-error setup-wizard-agent-interview-error" role="alert">
|
|
<span>{t("setup.firstAgentInterviewLoadError", "AI interview could not load. You can still create an agent from a template or skip this step.")}</span>
|
|
<button type="button" className="btn" onClick={() => setIsInterviewOpen(false)}>
|
|
{t("setup.firstAgentContinueWithTemplates", "Continue with templates")}
|
|
</button>
|
|
</div>
|
|
)}
|
|
>
|
|
<Suspense fallback={(
|
|
<div className="wizard-error setup-wizard-agent-interview-error" role="status">
|
|
{t("setup.firstAgentInterviewLoading", "Loading AI Interview...")}
|
|
</div>
|
|
)}
|
|
>
|
|
<ExperimentalAgentOnboardingModal
|
|
isOpen={isInterviewOpen}
|
|
onClose={() => setIsInterviewOpen(false)}
|
|
onUseDraft={handleApplyAgentDraft}
|
|
projectId={state.registeredProject?.id}
|
|
existingAgents={[]}
|
|
mode="create"
|
|
/>
|
|
</Suspense>
|
|
</ErrorBoundary>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|