@aion0/forge 0.10.35 → 0.10.37

package/components/OnboardingWizard.tsx

@@ -0,0 +1,924 @@
+'use client';
+
+/**
+ * Onboarding wizard — first-run setup banner + right-side drawer.
+ *
+ * - Banner: thin bar at top of Dashboard when `settings.onboardingCompleted` is
+ *   false. Clicking it opens the drawer. Drawer is a slide-in panel ~520px
+ *   wide; the rest of the UI stays visible behind it (per user request).
+ * - 6 sections: Identity / API Profile / Connectors / Pipelines / Projects /
+ *   Memory. Apply hits POST /api/onboarding (action:apply) once with the
+ *   full payload — backend phases each step atomically and reports back.
+ *
+ * Re-runnable from Settings → "Re-run Onboarding" (POST action:reset).
+ */
+
+import { useEffect, useRef, useState } from 'react';
+
+// ─── Types echoing the API surface ───────────────────────────
+
+interface PromptDef {
+  label: string;
+  hint?: string;
+  url?: string;
+  url_label?: string;
+  secret?: boolean;
+  required?: boolean;
+  /** Override the auto-detected group (default = first target's connector). */
+  group?: string;
+  /** Pre-filled value shown in the input on first render. */
+  default?: string;
+}
+
+interface OnboardingState {
+  ok: boolean;
+  onboardingCompleted: boolean;
+  current: {
+    displayName: string;
+    displayEmail: string;
+    apiProfileIds: string[];
+    apiProfile: {
+      id: string; name: string;
+      provider: 'anthropic' | 'openai-compatible';
+      model: string; baseUrl: string;
+      apiKeySet: boolean;
+    } | null;
+    chatAgent: string;
+    defaultAgent: string;
+    agents: Array<{ id: string; name: string; tool: string; path: string; enabled: boolean }>;
+    projectRoots: string[];
+  };
+  detected_cli: Array<{ name: string; path: string; version: string }>;
+  template_prompts: Record<string, PromptDef>;
+  /** Per ${key} prompt: true = at least one target field already has a real value;
+   *  leave blank to keep it. Backend's applyConnectors preserves existing on empty. */
+  prompt_values_set: Record<string, boolean>;
+  /** Per ${key}: which connector.field references it (for UI hint). */
+  prompt_targets: Record<string, Array<{ connector: string; field: string }>>;
+  suggested_pipelines: string[];
+}
+
+interface ApplyResultPhase {
+  phase: string;
+  ok: boolean;
+  error?: string;
+  detail?: any;
+}
+
+// ─── Banner ──────────────────────────────────────────────────
+
+export function OnboardingBanner({ onOpen }: { onOpen: () => void }) {
+  return (
+    <div className="bg-[var(--accent)]/10 border-b border-[var(--accent)]/40 px-3 py-1.5 flex items-center justify-between text-[11px] text-[var(--text-primary)]">
+      <span>
+        <span className="font-medium">Welcome to Forge.</span>{' '}
+        Finish setup — identity, API key, connectors, pipelines (1 click).
+      </span>
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onOpen}
+          className="text-[11px] px-2.5 py-0.5 bg-[var(--accent)] text-white rounded hover:opacity-90"
+        >
+          Open setup →
+        </button>
+        <button
+          onClick={async () => {
+            await fetch('/api/onboarding', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ action: 'apply', payload: {} }),
+            });
+            window.location.reload();
+          }}
+          className="text-[10px] px-2 py-0.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+          title="Mark setup as completed without changes"
+        >
+          Skip
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Drawer ──────────────────────────────────────────────────
+
+const inputCls = 'w-full text-[11px] bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]';
+
+const PROVIDER_DEFAULTS: Record<string, { baseUrl: string; model: string }> = {
+  anthropic: { baseUrl: 'https://api.anthropic.com', model: 'claude-sonnet-4-6' },
+  deepseek: { baseUrl: 'https://api.deepseek.com', model: 'deepseek-chat' },
+  openai: { baseUrl: 'https://api.openai.com/v1', model: 'gpt-4o-mini' },
+  qwen: { baseUrl: 'https://dashscope.aliyuncs.com/compatible-mode/v1', model: 'qwen-max' },
+  // LiteLLM proxy — baseUrl points to your LiteLLM instance (default
+  // local). Lets one token-cap profile front many backend models.
+  litellm: { baseUrl: 'http://127.0.0.1:4000/v1', model: 'gpt-4o-mini' },
+};
+
+export function OnboardingDrawer({ onClose, onComplete }: { onClose: () => void; onComplete: () => void }) {
+  const [state, setState] = useState<OnboardingState | null>(null);
+
+  // Section 1: Identity
+  const [displayName, setDisplayName] = useState('');
+  const [displayEmail, setDisplayEmail] = useState('');
+
+  // Section 2: API Profile
+  const [apiProfileId, setApiProfileId] = useState('deepseek');
+  const [apiProvider, setApiProvider] = useState<'anthropic' | 'openai-compatible'>('openai-compatible');
+  const [apiBaseUrl, setApiBaseUrl] = useState(PROVIDER_DEFAULTS.deepseek.baseUrl);
+  const [apiModel, setApiModel] = useState(PROVIDER_DEFAULTS.deepseek.model);
+  const [apiKey, setApiKey] = useState('');
+  const [apiKeyExisting, setApiKeyExisting] = useState(false);   // true → "leave blank to keep current"
+  const [apiSetAsDefault, setApiSetAsDefault] = useState(true);
+
+  // Section 2.5: CLI Agent
+  const [cliAgentId, setCliAgentId] = useState('');             // '' = don't configure
+  const [cliAgentTool, setCliAgentTool] = useState<'claude' | 'codex' | 'aider' | 'opencode'>('claude');
+  const [cliAgentPath, setCliAgentPath] = useState('');
+  const [cliSetAsDefault, setCliSetAsDefault] = useState(true);
+
+  // Section 3: Connector template values (one per ${key})
+  const [connectorValues, setConnectorValues] = useState<Record<string, string>>({});
+
+  // Section 4: Pipelines
+  const [selectedPipelines, setSelectedPipelines] = useState<Set<string>>(new Set());
+
+  // Section 5: Projects
+  const [projectInput, setProjectInput] = useState('');
+  // Folder picker — uses Forge's existing /api/fs/browse endpoint.
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [pickerPath, setPickerPath] = useState('');
+  const [pickerEntries, setPickerEntries] = useState<Array<{ name: string; path: string }>>([]);
+  const [pickerParent, setPickerParent] = useState<string | null>(null);
+
+  async function openPicker(path?: string) {
+    setPickerOpen(true);
+    try {
+      const url = path ? `/api/fs/browse?path=${encodeURIComponent(path)}` : '/api/fs/browse';
+      const r = await fetch(url);
+      const j = await r.json();
+      if (j.ok) {
+        setPickerPath(j.path);
+        setPickerEntries(j.entries || []);
+        setPickerParent(j.parent || null);
+      }
+    } catch { /* ignore */ }
+  }
+
+  function addPickedPath(path: string) {
+    const lines = projectInput.split('\n').map(s => s.trim()).filter(Boolean);
+    if (!lines.includes(path)) lines.push(path);
+    setProjectInput(lines.join('\n'));
+    setPickerOpen(false);
+  }
+
+  // Apply state
+  const [applying, setApplying] = useState(false);
+  const [result, setResult] = useState<ApplyResultPhase[] | null>(null);
+
+  // Post-apply health-check step. Once apply succeeds we slide the
+  // drawer into a "checks" view that runs glab-sync / login-status /
+  // backend monitor probes — so users see what's actually live before
+  // we dismiss the wizard.
+  type CheckState = { status: 'pending' | 'running' | 'ok' | 'fail'; message?: string; detail?: any };
+  const [phase, setPhase] = useState<'form' | 'checks'>('form');
+  const [checks, setChecks] = useState<Record<string, CheckState>>({
+    glabCli: { status: 'pending' },
+    loginStatus: { status: 'pending' },
+    services: { status: 'pending' },
+  });
+
+  async function runChecks() {
+    // glab sync — only meaningful if gitlab connector enabled w/ a token.
+    setChecks(c => ({ ...c, glabCli: { status: 'running' } }));
+    fetch('/api/connectors/gitlab/sync-cli', { method: 'POST' })
+      .then(r => r.json().then(j => ({ ok: r.ok && j.ok !== false, j })))
+      .then(({ ok, j }) => setChecks(c => ({
+        ...c,
+        glabCli: {
+          status: ok ? 'ok' : 'fail',
+          message: ok ? 'glab CLI synced with GitLab token' : (j.error || j.stderr || 'sync failed'),
+          detail: j,
+        },
+      })))
+      .catch(e => setChecks(c => ({ ...c, glabCli: { status: 'fail', message: e.message } })));
+
+    // Login status — POST triggers fresh check across all sources.
+    setChecks(c => ({ ...c, loginStatus: { status: 'running' } }));
+    fetch('/api/login-status', { method: 'POST' })
+      .then(r => r.json())
+      .then(j => {
+        const rows = j.rows || j.results || [];
+        const okCount = rows.filter((r: any) => r.result?.ok).length;
+        const failCount = rows.length - okCount;
+        setChecks(c => ({
+          ...c,
+          loginStatus: {
+            status: rows.length === 0 ? 'ok' : (failCount === 0 ? 'ok' : 'fail'),
+            message: rows.length === 0
+              ? 'no sources configured yet'
+              : `${okCount}/${rows.length} sources ok` + (failCount ? `, ${failCount} need attention` : ''),
+            detail: rows,
+          },
+        }));
+      })
+      .catch(e => setChecks(c => ({ ...c, loginStatus: { status: 'fail', message: e.message } })));
+
+    // Backend processes via /api/monitor.
+    setChecks(c => ({ ...c, services: { status: 'running' } }));
+    fetch('/api/monitor')
+      .then(r => r.json())
+      .then(j => {
+        const procs = j.processes || j;
+        const expected = ['nextjs', 'terminal', 'workspace', 'chat'];
+        const down = expected.filter(k => !procs[k]?.running);
+        setChecks(c => ({
+          ...c,
+          services: {
+            status: down.length === 0 ? 'ok' : 'fail',
+            message: down.length === 0 ? 'core services running' : `down: ${down.join(', ')}`,
+            detail: procs,
+          },
+        }));
+      })
+      .catch(e => setChecks(c => ({ ...c, services: { status: 'fail', message: e.message } })));
+  }
+  // Dirty tracking — flip true on any input touch. Guards close.
+  // Suppress the first effect run (initial state hydration from API).
+  const [dirty, setDirty] = useState(false);
+  const initializedRef = useRef(false);
+  useEffect(() => {
+    if (!initializedRef.current) { initializedRef.current = true; return; }
+    setDirty(true);
+  }, [displayName, displayEmail, apiKey, apiBaseUrl, apiModel, apiProfileId, apiProvider,
+      connectorValues, selectedPipelines, projectInput, cliAgentId, cliAgentPath]);
+  // Inline marketplace sync (so user doesn't have to leave the wizard
+  // to populate the pipeline list when it's empty / stale).
+  const [syncingMarket, setSyncingMarket] = useState(false);
+  const [syncMsg, setSyncMsg] = useState<string>('');
+
+  async function syncMarketplaceAndReload() {
+    if (syncingMarket) return;
+    setSyncingMarket(true); setSyncMsg('');
+    try {
+      const r = await fetch('/api/workflows/marketplace', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'sync' }),
+      });
+      const j = await r.json();
+      if (!r.ok || j.ok === false) {
+        setSyncMsg(`sync failed: ${j.error || r.status}`);
+        return;
+      }
+      // Pull fresh onboarding state (which re-computes suggested_pipelines).
+      const s = await fetch('/api/onboarding').then(x => x.json()) as OnboardingState;
+      setState(s);
+      // Auto-select fortinet-* (existing user selections preserved).
+      setSelectedPipelines(prev => {
+        const next = new Set(prev);
+        for (const n of s.suggested_pipelines) next.add(n);
+        return next;
+      });
+      setSyncMsg(`synced — ${s.suggested_pipelines.length} fortinet-* pipeline(s) suggested`);
+    } catch (e) {
+      setSyncMsg(`sync failed: ${e instanceof Error ? e.message : String(e)}`);
+    } finally { setSyncingMarket(false); }
+  }
+
+  // ─── Load state ─────────────────────────────────────────
+  // detect-cli is a separate (slower) endpoint — fire it in parallel
+  // so the main state arrives instantly, CLI list fills in shortly
+  // after. Avoids blocking the wizard mount on `which claude` etc.
+  useEffect(() => {
+    Promise.all([
+      fetch('/api/onboarding').then(r => r.json()),
+      fetch('/api/onboarding/detect-cli').then(r => r.json()).catch(() => ({ detected: [] })),
+    ]).then(([s, d]: [OnboardingState, { detected: typeof s.detected_cli }]) => {
+      // Merge probe results into state
+      s.detected_cli = d.detected || [];
+      setState(s);
+      setDisplayName(s.current.displayName);
+      setDisplayEmail(s.current.displayEmail);
+      setSelectedPipelines(new Set(s.suggested_pipelines));
+
+      // Pre-fill any prompt that declares a `default` (e.g. jenkins
+      // instance name = "default-jenkins"). User-set values from a prior
+      // run would shadow these via the "currently set" path on apply.
+      const presets: Record<string, string> = {};
+      for (const [key, def] of Object.entries(s.template_prompts || {})) {
+        if (def?.default && !s.prompt_values_set?.[key]) {
+          presets[key] = def.default;
+        }
+      }
+      if (Object.keys(presets).length > 0) setConnectorValues(presets);
+
+      // Pre-fill API profile from existing default (settings.chatAgent)
+      if (s.current.apiProfile) {
+        const a = s.current.apiProfile;
+        setApiProfileId(a.id);
+        setApiProvider(a.provider);
+        setApiBaseUrl(a.baseUrl);
+        setApiModel(a.model);
+        setApiKeyExisting(a.apiKeySet);
+      }
+
+      // Pre-fill CLI agent: pick existing default, else first detected
+      if (s.current.defaultAgent && s.current.agents.find(a => a.id === s.current.defaultAgent)) {
+        const a = s.current.agents.find(x => x.id === s.current.defaultAgent)!;
+        setCliAgentId(a.id);
+        if (['claude', 'codex', 'aider', 'opencode'].includes(a.tool)) {
+          setCliAgentTool(a.tool as any);
+        }
+        setCliAgentPath(a.path || '');
+      } else if (s.detected_cli.length > 0) {
+        const first = s.detected_cli[0];
+        setCliAgentId(first.name);
+        setCliAgentTool(first.name as any);
+        setCliAgentPath(first.path);
+      }
+    }).catch(() => setState({
+      ok: false, onboardingCompleted: false,
+      current: { displayName: '', displayEmail: '', apiProfileIds: [], apiProfile: null, chatAgent: '', defaultAgent: '', agents: [], projectRoots: [] },
+      detected_cli: [], template_prompts: {}, prompt_values_set: {}, prompt_targets: {}, suggested_pipelines: [],
+    }));
+  }, []);
+
+  // Quick provider preset switch
+  function setProviderPreset(key: keyof typeof PROVIDER_DEFAULTS) {
+    setApiProfileId(key);
+    const p = PROVIDER_DEFAULTS[key];
+    setApiBaseUrl(p.baseUrl);
+    setApiModel(p.model);
+    setApiProvider(key === 'anthropic' ? 'anthropic' : 'openai-compatible');
+  }
+
+  async function apply() {
+    if (applying) return;
+    setApplying(true); setResult(null);
+    try {
+      const payload: any = {
+        identity: { displayName, displayEmail },
+        connectorValues,
+        pipelines: Array.from(selectedPipelines),
+        projectRoots: projectInput.split(/[\n,]/).map(s => s.trim()).filter(Boolean),
+      };
+      // Send apiProfile if a key was typed OR if we're re-confirming an
+      // existing profile (apiKeyExisting=true and user changed any field).
+      // Empty apiKey + existing → backend preserves the on-disk key.
+      if (apiKey.trim() || apiKeyExisting) {
+        payload.apiProfile = {
+          id: apiProfileId,
+          name: apiProfileId,
+          provider: apiProvider,
+          model: apiModel,
+          baseUrl: apiBaseUrl,
+          setAsDefault: apiSetAsDefault,
+          ...(apiKey.trim() ? { apiKey: apiKey.trim() } : {}),
+        };
+      }
+      if (cliAgentId) {
+        payload.cliAgent = {
+          id: cliAgentId,
+          tool: cliAgentTool,
+          ...(cliAgentPath ? { path: cliAgentPath } : {}),
+          setAsDefault: cliSetAsDefault,
+        };
+      }
+      const r = await fetch('/api/onboarding', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'apply', payload }),
+      });
+      const j = await r.json();
+      setResult(j.phases || []);
+      if (j.ok) {
+        setDirty(false);          // applied state is canonical now
+        setPhase('checks');
+        runChecks();
+      }
+    } catch (e) {
+      setResult([{ phase: 'request', ok: false, error: e instanceof Error ? e.message : String(e) }]);
+    } finally { setApplying(false); }
+  }
+
+  if (!state) {
+    return (
+      <DrawerShell onClose={onClose}>
+        <div className="p-4 text-[11px] text-[var(--text-secondary)]">Loading…</div>
+      </DrawerShell>
+    );
+  }
+
+  const prompts = state.template_prompts || {};
+  // Group prompts by the prompt's own `group` field (if set) — else
+  // fall back to the first connector target. Within a group, preserve
+  // template insertion order (gives template authors control over UI
+  // order; e.g. put 'gitlab token name' above 'gitlab PAT' just by
+  // listing it first in _prompts).
+  const promptGroups = (() => {
+    const byConnector = new Map<string, string[]>();
+    for (const key of Object.keys(prompts)) {
+      const explicit = prompts[key]?.group;
+      const targets = state.prompt_targets?.[key] || [];
+      const conn = explicit || targets[0]?.connector || '_other';
+      if (!byConnector.has(conn)) byConnector.set(conn, []);
+      byConnector.get(conn)!.push(key);
+    }
+    return Array.from(byConnector.entries());
+  })();
+
+  const guardedClose = () => {
+    if (!dirty || confirm('Close without saving? Your unsaved inputs will be lost.')) onClose();
+  };
+
+  if (phase === 'checks') {
+    return (
+      <DrawerShell onClose={onClose}>
+        <div className="overflow-y-auto flex-1 p-4 space-y-4">
+          <h2 className="text-sm font-medium text-[var(--text-primary)]">Setup applied — verifying</h2>
+          <p className="text-[11px] text-[var(--text-secondary)]">
+            Running post-setup checks. You can finish anytime; failures here usually
+            just mean the corresponding token/connector wasn't configured.
+          </p>
+
+          <CheckRow
+            title="GitLab → glab CLI sync"
+            hint="Writes the GitLab PAT into ~/.config/glab-cli so shell `glab` matches Forge."
+            state={checks.glabCli}
+          />
+          <CheckRow
+            title="Connector login status"
+            hint="Probes each configured connector source (gitlab, mantis, etc.) for live auth."
+            state={checks.loginStatus}
+            renderDetail={d => Array.isArray(d) ? (
+              <ul className="space-y-0.5">
+                {d.map((row: any, i: number) => {
+                  const ok = !!row.result?.ok;
+                  const ref = row.source?.refresh;
+                  return (
+                    <li key={i} className="font-mono flex items-center gap-1 flex-wrap">
+                      <span className={ok ? 'text-emerald-500' : 'text-red-400'}>
+                        {ok ? '✓' : '✗'}
+                      </span>
+                      <span>{row.source?.label || row.source?.id || 'source'}</span>
+                      {row.result?.message && (
+                        <span className="text-[var(--text-secondary)]">— {row.result.message}</span>
+                      )}
+                      {/* Render a direct fix link only when the row failed */}
+                      {!ok && ref?.kind === 'open-url' && ref.url && (
+                        <a
+                          href={ref.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-[var(--accent)] hover:underline ml-auto"
+                          title={ref.description || ref.url}
+                        >
+                          ↗ login
+                        </a>
+                      )}
+                      {!ok && ref?.kind === 'show-command' && (
+                        <code
+                          className="text-[var(--accent)] cursor-pointer ml-auto"
+                          title={`Click to copy — ${ref.description}`}
+                          onClick={() => navigator.clipboard?.writeText(ref.command)}
+                        >
+                          ⧉ {ref.command}
+                        </code>
+                      )}
+                      {!ok && ref?.kind === 'open-settings' && (
+                        <span className="text-[var(--text-secondary)] ml-auto">
+                          (configure in Settings → {ref.section})
+                        </span>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            ) : null}
+          />
+          <CheckRow
+            title="Backend services"
+            hint="Web / terminal / workspace / chat process counts (per ps aux)."
+            state={checks.services}
+            renderDetail={d => d && typeof d === 'object' ? (
+              <ul className="space-y-0.5">
+                {Object.entries(d).map(([k, v]: [string, any]) => (
+                  <li key={k} className="font-mono">
+                    <span className={v?.running ? 'text-emerald-500' : 'text-red-400'}>
+                      {v?.running ? '✓' : '✗'}
+                    </span>{' '}
+                    {k}{v?.pid ? ` (pid ${v.pid})` : ''}{v?.port ? `:${v.port}` : ''}
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          />
+        </div>
+
+        <div className="border-t border-[var(--border)] p-3 flex items-center gap-2 shrink-0">
+          <button
+            onClick={runChecks}
+            className="text-[10px] px-2.5 py-1 border border-[var(--border)] text-[var(--text-secondary)] rounded hover:border-[var(--text-primary)]"
+          >
+            ↻ Re-run checks
+          </button>
+          <div className="flex-1" />
+          <button
+            onClick={onComplete}
+            className="text-[11px] px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90"
+          >
+            Finish
+          </button>
+        </div>
+      </DrawerShell>
+    );
+  }
+
+  return (
+    <DrawerShell onClose={guardedClose}>
+      <div className="overflow-y-auto flex-1 p-4 space-y-5">
+        <h2 className="text-sm font-medium text-[var(--text-primary)]">Forge Setup</h2>
+        <p className="text-[11px] text-[var(--text-secondary)] -mt-3">
+          Fill in once. Re-runnable from Settings → "Re-run Onboarding".
+        </p>
+
+        {/* ── 1. Identity ──────────────────────────────────────── */}
+        <Section title="1. Identity" hint="Used as your name in pipeline/connector contexts; referenceable later as {user.name} / {user.email}.">
+          <Field label="Display name">
+            <input className={inputCls} value={displayName} onChange={e => setDisplayName(e.target.value)} placeholder="Zhen Liu" />
+          </Field>
+          <Field label="Email">
+            <input className={inputCls} value={displayEmail} onChange={e => setDisplayEmail(e.target.value)} placeholder="zliu@fortinet.com" />
+          </Field>
+        </Section>
+
+        {/* ── 2. API Profile ───────────────────────────────────── */}
+        <Section title="2. Chat API key" hint="The LLM Forge's chat agent talks to. DeepSeek / Anthropic / OpenAI / Qwen / LiteLLM-compatible. Key encrypted at rest.">
+          <div className="flex gap-1 mb-1 flex-wrap">
+            {(['deepseek', 'anthropic', 'openai', 'qwen', 'litellm'] as const).map(p => (
+              <button
+                key={p}
+                onClick={() => setProviderPreset(p)}
+                className={`text-[10px] px-2 py-0.5 rounded ${apiProfileId === p ? 'bg-[var(--accent)] text-white' : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'}`}
+              >
+                {p}
+              </button>
+            ))}
+          </div>
+          <Field label="Base URL">
+            <input className={inputCls + ' font-mono'} value={apiBaseUrl} onChange={e => setApiBaseUrl(e.target.value)} />
+          </Field>
+          <Field label="Model">
+            <input className={inputCls + ' font-mono'} value={apiModel} onChange={e => setApiModel(e.target.value)} />
+          </Field>
+          <Field label={apiKeyExisting ? `API Key (current profile "${apiProfileId}" already has a key — leave blank to keep, or paste new to overwrite)` : 'API Key (required to make chat work)'}>
+            <input
+              type="password"
+              className={inputCls + ' font-mono'}
+              value={apiKey}
+              onChange={e => setApiKey(e.target.value)}
+              placeholder={apiKeyExisting ? '•••••••• (keep existing)' : 'sk-...'}
+            />
+          </Field>
+          <label className="flex items-center gap-1.5 text-[10px] text-[var(--text-secondary)]">
+            <input type="checkbox" checked={apiSetAsDefault} onChange={e => setApiSetAsDefault(e.target.checked)} />
+            Use this profile as the default chat agent
+          </label>
+        </Section>
+
+        {/* ── 2.5. CLI Agent ──────────────────────────────────── */}
+        <Section title="3. CLI Agent" hint="The CLI tool Forge launches for terminal / task sessions (claude-code / codex / aider). Detected on PATH below.">
+          {state.detected_cli.length === 0 && state.current.agents.length === 0 && (
+            <p className="text-[10px] text-amber-500">
+              No CLI agents detected on PATH. Install one (e.g. <code>npm i -g @anthropic-ai/claude-code</code>) and re-run onboarding.
+            </p>
+          )}
+          {state.detected_cli.map(c => (
+            <label key={c.name} className="flex items-center gap-1.5 text-[11px] text-[var(--text-primary)]">
+              <input
+                type="radio"
+                name="cli-agent"
+                checked={cliAgentId === c.name}
+                onChange={() => {
+                  setCliAgentId(c.name);
+                  setCliAgentTool(c.name as any);
+                  setCliAgentPath(c.path);
+                }}
+              />
+              <span className="font-mono">{c.name}</span>
+              {c.version && <span className="text-[9px] text-[var(--text-secondary)]">v{c.version}</span>}
+              <span className="text-[9px] text-[var(--text-secondary)] font-mono truncate">{c.path}</span>
+            </label>
+          ))}
+          {state.current.agents.filter(a => !state.detected_cli.find(c => c.name === a.tool)).map(a => (
+            <label key={a.id} className="flex items-center gap-1.5 text-[11px] text-[var(--text-primary)]">
+              <input
+                type="radio"
+                name="cli-agent"
+                checked={cliAgentId === a.id}
+                onChange={() => {
+                  setCliAgentId(a.id);
+                  if (['claude', 'codex', 'aider', 'opencode'].includes(a.tool)) {
+                    setCliAgentTool(a.tool as any);
+                  }
+                  setCliAgentPath(a.path);
+                }}
+              />
+              <span className="font-mono">{a.id}</span>
+              <span className="text-[9px] text-[var(--text-secondary)]">{a.tool}</span>
+              <span className="text-[9px] text-[var(--text-secondary)] font-mono truncate">{a.path}</span>
+            </label>
+          ))}
+          {(state.detected_cli.length > 0 || state.current.agents.length > 0) && (
+            <label className="flex items-center gap-1.5 text-[10px] text-[var(--text-secondary)] mt-1">
+              <input type="checkbox" checked={cliSetAsDefault} onChange={e => setCliSetAsDefault(e.target.checked)} />
+              Use this CLI agent as the default for terminal sessions
+            </label>
+          )}
+        </Section>
+
+        {/* ── 3. Connectors ────────────────────────────────────── */}
+        <Section title="3. Connector tokens" hint="Forge ships a Fortinet template. Shared keys (e.g. GitLab PAT for both gitlab + jenkins) are asked once. Tokens encrypted at rest.">
+          {promptGroups.length === 0 && (
+            <p className="text-[10px] text-amber-500">
+              No template loaded. Make sure the marketplace has been synced (Settings → Connectors → Sync).
+            </p>
+          )}
+          {promptGroups.map(([connector, keys]) => (
+            <div key={connector} className="border-l-2 border-[var(--accent)]/40 pl-2.5 space-y-2.5">
+              <div className="text-[10px] font-mono uppercase tracking-wider text-[var(--accent)]">
+                {connector}
+              </div>
+              {keys.map(key => {
+                const p = prompts[key];
+                const v = connectorValues[key] ?? '';
+                const isSet = !!state.prompt_values_set?.[key];
+                const targets = state.prompt_targets?.[key] || [];
+                const sharedWith = targets.filter(t => t.connector !== connector);
+                return (
+                  <div key={key} className="space-y-1">
+                    <label className="text-[10px] font-medium text-[var(--text-primary)] flex items-center gap-1.5 flex-wrap">
+                      {p.label}
+                      {p.required && !isSet && <span className="text-red-500">*</span>}
+                      {!p.required && !isSet && <span className="text-[9px] text-[var(--text-secondary)]">(optional)</span>}
+                      {isSet && <span className="text-[9px] text-emerald-500">● currently set</span>}
+                      {p.url && (
+                        <a href={p.url} target="_blank" rel="noopener noreferrer" className="ml-auto text-[10px] text-[var(--accent)] hover:underline" title={p.url}>
+                          ↗ {p.url_label || 'Get token'}
+                        </a>
+                      )}
+                    </label>
+                    {p.hint && <p className="text-[9px] text-[var(--text-secondary)] leading-snug">{p.hint}</p>}
+                    {sharedWith.length > 0 && (
+                      <p className="text-[9px] text-[var(--text-secondary)] font-mono">
+                        also used by: {sharedWith.map(t => `${t.connector}.${t.field}`).join(', ')}
+                      </p>
+                    )}
+                    <input
+                      type={p.secret ? 'password' : 'text'}
+                      className={inputCls + ' font-mono'}
+                      value={v}
+                      onChange={e => setConnectorValues({ ...connectorValues, [key]: e.target.value })}
+                      placeholder={isSet ? '•••••••• (leave blank to keep current)' : (p.required ? 'required' : 'leave blank')}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </Section>
+
+        {/* ── 4. Pipelines ─────────────────────────────────────── */}
+        <Section title="4. Pipelines" hint="Installs from the workflow marketplace. fortinet-* default-selected.">
+          <div className="flex items-center gap-2 mb-1">
+            <button
+              type="button"
+              onClick={syncMarketplaceAndReload}
+              disabled={syncingMarket}
+              className="text-[10px] px-2 py-0.5 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white disabled:opacity-40"
+            >
+              {syncingMarket ? 'Syncing…' : '↻ Sync marketplace'}
+            </button>
+            {syncMsg && <span className="text-[10px] text-[var(--text-secondary)]">{syncMsg}</span>}
+          </div>
+          {state.suggested_pipelines.length === 0 && (
+            <p className="text-[10px] text-amber-500">
+              No pipelines found yet. Click <strong>Sync marketplace</strong> above to pull the latest registry.
+            </p>
+          )}
+          {state.suggested_pipelines.map(name => (
+            <label key={name} className="flex items-center gap-1.5 text-[11px] text-[var(--text-primary)]">
+              <input
+                type="checkbox"
+                checked={selectedPipelines.has(name)}
+                onChange={e => {
+                  const next = new Set(selectedPipelines);
+                  if (e.target.checked) next.add(name); else next.delete(name);
+                  setSelectedPipelines(next);
+                }}
+              />
+              <span className="font-mono">{name}</span>
+            </label>
+          ))}
+        </Section>
+
+        {/* ── 5. Projects ──────────────────────────────────────── */}
+        <Section title="5. Project roots (optional)" hint="Directories Forge can run agents in. Pick from filesystem or type/paste paths (one per line).">
+          {state.current.projectRoots.length > 0 && (
+            <p className="text-[10px] text-[var(--text-secondary)]">
+              Existing: <span className="font-mono">{state.current.projectRoots.join(', ')}</span> (new entries appended)
+            </p>
+          )}
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => openPicker()}
+              className="text-[10px] px-2 py-0.5 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white"
+            >
+              📁 Pick folder…
+            </button>
+            <span className="text-[9px] text-[var(--text-secondary)]">or type below</span>
+          </div>
+          <textarea
+            rows={2}
+            className={inputCls + ' font-mono'}
+            value={projectInput}
+            onChange={e => setProjectInput(e.target.value)}
+            placeholder="/Users/you/IdeaProjects"
+          />
+
+          {pickerOpen && (
+            <div className="border border-[var(--border)] rounded p-2 bg-[var(--bg-tertiary)] space-y-1">
+              <div className="flex items-center gap-1 text-[10px] font-mono text-[var(--text-secondary)] truncate">
+                {pickerParent && (
+                  <button onClick={() => openPicker(pickerParent!)} className="text-[var(--accent)] hover:underline">..</button>
+                )}
+                <span className="truncate">{pickerPath || '(loading)'}</span>
+                <button
+                  onClick={() => setPickerOpen(false)}
+                  className="ml-auto text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                >✕</button>
+              </div>
+              <div className="max-h-40 overflow-y-auto space-y-0.5">
+                {pickerEntries.length === 0 && (
+                  <p className="text-[10px] text-[var(--text-secondary)] italic">no subdirectories</p>
+                )}
+                {pickerEntries.map(e => (
+                  <div key={e.path} className="flex items-center gap-1 text-[10px] font-mono">
+                    <button
+                      onClick={() => openPicker(e.path)}
+                      className="text-[var(--text-primary)] hover:text-[var(--accent)] flex-1 text-left truncate"
+                      title="Drill into this folder"
+                    >
+                      📁 {e.name}
+                    </button>
+                    <button
+                      onClick={() => addPickedPath(e.path)}
+                      className="text-[9px] text-[var(--accent)] hover:underline px-1"
+                      title="Add this folder to project roots"
+                    >+ pick</button>
+                  </div>
+                ))}
+              </div>
+              {pickerPath && (
+                <button
+                  onClick={() => addPickedPath(pickerPath)}
+                  className="text-[10px] px-2 py-0.5 bg-[var(--accent)] text-white rounded w-full"
+                >
+                  Use current folder: <span className="font-mono">{pickerPath}</span>
+                </button>
+              )}
+            </div>
+          )}
+        </Section>
+
+        {/* ── 6. Memory (info only) ────────────────────────────── */}
+        <Section title="6. Memory">
+          <p className="text-[10px] text-[var(--text-secondary)]">
+            Defaults to local SQLite — no setup needed. Want team-shared memory?
+            Configure Temper later in Settings → Memory.
+          </p>
+        </Section>
+      </div>
+
+      {/* Footer */}
+      <div className="border-t border-[var(--border)] p-3 flex items-center gap-2 shrink-0">
+        {result && (
+          <div className="flex-1 text-[10px]">
+            {result.map((p, i) => (
+              <span key={i} className={`mr-2 ${p.ok ? 'text-emerald-500' : 'text-red-400'}`}>
+                {p.ok ? '✓' : '✗'} {p.phase}
+              </span>
+            ))}
+          </div>
+        )}
+        <button
+          onClick={() => { if (!dirty || confirm('Close without saving? Your unsaved inputs will be lost.')) onClose(); }}
+          className="text-[10px] px-2.5 py-1 border border-[var(--border)] text-[var(--text-secondary)] rounded hover:border-[var(--text-primary)]"
+        >
+          Close
+        </button>
+        <button
+          onClick={async () => {
+            if (dirty && !confirm('Skip setup? Your unsaved inputs will be discarded. (Banner will not appear again.)')) return;
+            // Mark onboarding completed without applying anything — empty payload.
+            await fetch('/api/onboarding', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ action: 'apply', payload: {} }),
+            });
+            onComplete();
+          }}
+          className="text-[10px] px-2.5 py-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+          title="Mark setup as done without applying anything"
+        >
+          Skip
+        </button>
+        <button
+          onClick={apply}
+          disabled={applying}
+          className="text-[11px] px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-40"
+        >
+          {applying ? 'Applying…' : 'Apply & Finish'}
+        </button>
+      </div>
+    </DrawerShell>
+  );
+}
+
+// ─── Drawer shell ────────────────────────────────────────────
+
+function DrawerShell({ onClose, children }: { onClose: () => void; children: React.ReactNode }) {
+  return (
+    <>
+      {/* Backdrop — semi-opaque, click-to-close */}
+      <div className="fixed inset-0 bg-black/30 z-40" onClick={onClose} />
+      {/* Drawer */}
+      <div className="fixed right-0 top-0 bottom-0 w-[520px] max-w-full bg-[var(--bg-primary)] border-l border-[var(--border)] shadow-xl z-50 flex flex-col">
+        {children}
+      </div>
+    </>
+  );
+}
+
+function Section({ title, hint, children }: { title: string; hint?: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1.5 pb-3 border-b border-[var(--border)]/40">
+      <h3 className="text-[12px] font-medium text-[var(--text-primary)]">{title}</h3>
+      {hint && <p className="text-[10px] text-[var(--text-secondary)] leading-snug">{hint}</p>}
+      {children}
+    </div>
+  );
+}
+
+function CheckRow({
+  title, hint, state, renderDetail,
+}: {
+  title: string;
+  hint?: string;
+  state: { status: 'pending' | 'running' | 'ok' | 'fail'; message?: string; detail?: any };
+  renderDetail?: (d: any) => React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const icon = state.status === 'ok' ? '✓'
+    : state.status === 'fail' ? '✗'
+    : state.status === 'running' ? '⟳'
+    : '○';
+  const color = state.status === 'ok' ? 'text-emerald-500'
+    : state.status === 'fail' ? 'text-red-400'
+    : state.status === 'running' ? 'text-amber-500'
+    : 'text-[var(--text-secondary)]';
+  return (
+    <div className="border border-[var(--border)] rounded p-2.5 space-y-1">
+      <div className="flex items-center gap-2 text-[12px]">
+        <span className={`${color} font-mono w-3 inline-block`}>{icon}</span>
+        <span className="text-[var(--text-primary)] font-medium">{title}</span>
+        {state.message && (
+          <span className={`text-[10px] ${state.status === 'fail' ? 'text-red-400' : 'text-[var(--text-secondary)]'} truncate`}>
+            — {state.message}
+          </span>
+        )}
+        {state.detail && renderDetail && (
+          <button onClick={() => setOpen(o => !o)} className="ml-auto text-[10px] text-[var(--accent)] hover:underline">
+            {open ? 'hide' : 'details'}
+          </button>
+        )}
+      </div>
+      {hint && <p className="text-[10px] text-[var(--text-secondary)] leading-snug ml-5">{hint}</p>}
+      {open && state.detail && renderDetail && (
+        <div className="text-[10px] text-[var(--text-secondary)] ml-5 pt-1 border-t border-[var(--border)]/40">
+          {renderDetail(state.detail)}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-0.5">
+      <label className="text-[10px] text-[var(--text-secondary)]">{label}</label>
+      {children}
+    </div>
+  );
+}