@geminilight/mindos 0.5.9 → 0.5.11

package/app/components/setup/StepKB.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { Field } from '@/components/settings/Primitives';
+import type { Messages } from '@/lib/i18n';
+import type { SetupState } from './types';
+import { TEMPLATES } from './constants';
+
+// Derive parent dir from current input for ls — supports both / and \ separators
+function getParentDir(p: string): string {
+  if (!p.trim()) return '';
+  const trimmed = p.trim();
+  // Already a directory (ends with separator)
+  if (trimmed.endsWith('/') || trimmed.endsWith('\\')) return trimmed;
+  // Find last separator (/ or \)
+  const lastSlash = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'));
+  return lastSlash >= 0 ? trimmed.slice(0, lastSlash + 1) : '';
+}
+
+export interface StepKBProps {
+  state: SetupState;
+  update: <K extends keyof SetupState>(key: K, val: SetupState[K]) => void;
+  t: Messages;
+  homeDir: string;
+}
+
+export default function StepKB({ state, update, t, homeDir }: StepKBProps) {
+  const s = t.setup;
+  // Build platform-aware placeholder, e.g. /Users/alice/MindOS/mind or C:\Users\alice\MindOS\mind
+  // Windows homedir always contains \, e.g. C:\Users\Alice — safe to detect by separator
+  const sep = homeDir.includes('\\') ? '\\' : '/';
+  const placeholder = homeDir !== '~' ? [homeDir, 'MindOS', 'mind'].join(sep) : s.kbPathDefault;
+  const [pathInfo, setPathInfo] = useState<{ exists: boolean; empty: boolean; count: number } | null>(null);
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [activeSuggestion, setActiveSuggestion] = useState(-1);
+  const [showTemplatePickerAnyway, setShowTemplatePickerAnyway] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const justSelectedRef = useRef(false);
+
+  // Debounced autocomplete
+  useEffect(() => {
+    // Skip when a suggestion was just selected — prevents dropdown flicker
+    if (justSelectedRef.current) { justSelectedRef.current = false; return; }
+    if (!state.mindRoot.trim()) { setSuggestions([]); return; }
+    const timer = setTimeout(() => {
+      const parent = getParentDir(state.mindRoot) || homeDir;
+      fetch('/api/setup/ls', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: parent }),
+      })
+        .then(r => r.json())
+        .then(d => {
+          if (!d.dirs?.length) { setSuggestions([]); return; }
+          // Normalize parent to end with a separator (preserve existing / or \)
+          const endsWithSep = parent.endsWith('/') || parent.endsWith('\\');
+          const localSep = parent.includes('\\') ? '\\' : '/';
+          const parentNorm = endsWithSep ? parent : parent + localSep;
+          const typed = state.mindRoot.trim();
+          const full: string[] = (d.dirs as string[]).map((dir: string) => parentNorm + dir);
+          const endsWithAnySep = typed.endsWith('/') || typed.endsWith('\\');
+          const filtered = endsWithAnySep ? full : full.filter(f => f.startsWith(typed));
+          setSuggestions(filtered.slice(0, 8));
+          setShowSuggestions(filtered.length > 0);
+          setActiveSuggestion(-1);
+        })
+        .catch(e => { console.warn('[SetupWizard] autocomplete fetch failed:', e); setSuggestions([]); });
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [state.mindRoot, homeDir]);
+
+  // Debounced path check
+  useEffect(() => {
+    if (!state.mindRoot.trim()) { setPathInfo(null); return; }
+    const timer = setTimeout(() => {
+      fetch('/api/setup/check-path', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: state.mindRoot }),
+      })
+        .then(r => r.json())
+        .then(d => {
+          setPathInfo(d);
+          setShowTemplatePickerAnyway(false);
+          // Non-empty directory: default to skip template (user can opt-in to merge)
+          if (d?.exists && !d.empty) update('template', '');
+        })
+        .catch(e => { console.warn('[SetupWizard] check-path failed:', e); setPathInfo(null); });
+    }, 600);
+    return () => clearTimeout(timer);
+  }, [state.mindRoot, update]);
+
+  const hideSuggestions = () => {
+    setSuggestions([]);
+    setShowSuggestions(false);
+    setActiveSuggestion(-1);
+  };
+
+  const selectSuggestion = (val: string) => {
+    justSelectedRef.current = true;
+    update('mindRoot', val);
+    hideSuggestions();
+    inputRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!showSuggestions || suggestions.length === 0) return;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveSuggestion(i => Math.min(i + 1, suggestions.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveSuggestion(i => Math.max(i - 1, -1));
+    } else if (e.key === 'Enter' && activeSuggestion >= 0) {
+      e.preventDefault();
+      selectSuggestion(suggestions[activeSuggestion]);
+    } else if (e.key === 'Escape') {
+      setShowSuggestions(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <Field label={s.kbPath} hint={s.kbPathHint}>
+        <div className="relative">
+          <input
+            ref={inputRef}
+            value={state.mindRoot}
+            onChange={e => { update('mindRoot', e.target.value); setShowSuggestions(true); }}
+            onKeyDown={handleKeyDown}
+            onBlur={() => setTimeout(() => hideSuggestions(), 150)}
+            onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
+            placeholder={placeholder}
+            className="w-full px-3 py-2 text-sm rounded-lg border outline-none transition-colors focus-visible:ring-1 focus-visible:ring-ring"
+            style={{
+              background: 'var(--input, var(--card))',
+              borderColor: 'var(--border)',
+              color: 'var(--foreground)',
+            }}
+          />
+          {showSuggestions && suggestions.length > 0 && (
+            <div
+              role="listbox"
+              className="absolute z-50 left-0 right-0 top-full mt-1 rounded-lg border overflow-auto"
+              style={{
+                background: 'var(--card)',
+                borderColor: 'var(--border)',
+                boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
+                maxHeight: '220px',
+              }}>
+              {suggestions.map((suggestion, i) => (
+                <button
+                  key={suggestion}
+                  type="button"
+                  role="option"
+                  aria-selected={i === activeSuggestion}
+                  onMouseDown={() => selectSuggestion(suggestion)}
+                  className="w-full text-left px-3 py-2 text-sm font-mono transition-colors"
+                  style={{
+                    background: i === activeSuggestion ? 'var(--muted)' : 'transparent',
+                    color: 'var(--foreground)',
+                    borderTop: i > 0 ? '1px solid var(--border)' : undefined,
+                  }}>
+                  {suggestion}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        {/* Recommended default — one-click accept */}
+        {state.mindRoot !== placeholder && placeholder !== s.kbPathDefault && (
+          <button type="button"
+            onClick={() => update('mindRoot', placeholder)}
+            className="mt-1.5 px-2.5 py-1 text-xs rounded-md border transition-colors hover:bg-muted/50"
+            style={{ borderColor: 'var(--amber)', color: 'var(--amber)' }}>
+            {s.kbPathUseDefault(placeholder)}
+          </button>
+        )}
+      </Field>
+      {/* Template selection — conditional on directory state */}
+      {pathInfo && pathInfo.exists && !pathInfo.empty && !showTemplatePickerAnyway ? (
+        <div>
+          <label className="text-sm text-foreground font-medium mb-3 block">{s.template}</label>
+          <div className="rounded-lg border p-3 text-sm" style={{ borderColor: 'var(--amber)', background: 'color-mix(in srgb, var(--amber) 6%, transparent)' }}>
+            <p style={{ color: 'var(--amber)' }}>
+              {s.kbPathHasFiles(pathInfo.count)}
+            </p>
+            <div className="flex gap-2 mt-2">
+              <button type="button"
+                onClick={() => update('template', '')}
+                className="px-2.5 py-1 text-xs rounded-md border transition-colors"
+                style={{
+                  borderColor: 'var(--amber)',
+                  color: state.template === '' ? 'var(--background)' : 'var(--amber)',
+                  background: state.template === '' ? 'var(--amber)' : 'transparent',
+                }}>
+                {state.template === '' ? <>{s.kbTemplateSkip} ✓</> : s.kbTemplateSkip}
+              </button>
+              <button type="button"
+                onClick={() => setShowTemplatePickerAnyway(true)}
+                className="px-2.5 py-1 text-xs rounded-md border transition-colors hover:bg-muted/50"
+                style={{ borderColor: 'var(--border)', color: 'var(--muted-foreground)' }}>
+                {s.kbTemplateMerge}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+      <div>
+        <label className="text-sm text-foreground font-medium mb-3 block">{s.template}</label>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+          {TEMPLATES.map(tpl => (
+            <button key={tpl.id} onClick={() => update('template', tpl.id)}
+              className="flex flex-col items-start gap-2 p-4 rounded-xl border text-left transition-all duration-150"
+              style={{
+                background: state.template === tpl.id ? 'var(--amber-dim)' : 'var(--card)',
+                borderColor: state.template === tpl.id ? 'var(--amber)' : 'var(--border)',
+              }}>
+              <div className="flex items-center gap-2">
+                <span style={{ color: 'var(--amber)' }}>{tpl.icon}</span>
+                <span className="text-sm font-medium" style={{ color: 'var(--foreground)' }}>
+                  {t.onboarding.templates[tpl.id as 'en' | 'zh' | 'empty'].title}
+                </span>
+              </div>
+              <div className="w-full rounded-lg px-2.5 py-1.5 text-xs leading-relaxed font-display"
+                style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}>
+                {tpl.dirs.map(d => <div key={d}>{d}</div>)}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+      )}
+    </div>
+  );
+}

package/app/components/setup/StepPorts.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { Loader2, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
+import { Field, Input } from '@/components/settings/Primitives';
+import type { SetupState, PortStatus, SetupMessages } from './types';
+
+// ─── PortField ────────────────────────────────────────────────────────────────
+function PortField({
+  label, hint, value, onChange, status, onCheckPort, s,
+}: {
+  label: string; hint: string; value: number;
+  onChange: (v: number) => void;
+  status: PortStatus;
+  onCheckPort: (port: number) => void;
+  s: SetupMessages;
+}) {
+  // Debounce auto-check on input change (500ms)
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = parseInt(e.target.value, 10) || value;
+    onChange(v);
+    clearTimeout(timerRef.current);
+    if (v >= 1024 && v <= 65535) {
+      timerRef.current = setTimeout(() => onCheckPort(v), 500);
+    }
+  };
+  const handleBlur = () => {
+    // Cancel pending debounce — onBlur fires the check immediately
+    clearTimeout(timerRef.current);
+    onCheckPort(value);
+  };
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+
+  return (
+    <Field label={label} hint={hint}>
+      <div className="space-y-1.5">
+        <Input
+          type="number" min={1024} max={65535} value={value}
+          onChange={handleChange}
+          onBlur={handleBlur}
+        />
+        {status.checking && (
+          <p className="text-xs flex items-center gap-1" role="status" style={{ color: 'var(--muted-foreground)' }}>
+            <Loader2 size={11} className="animate-spin" /> {s.portChecking}
+          </p>
+        )}
+        {!status.checking && status.available === false && (
+          <div className="flex items-center gap-2" role="alert">
+            <p className="text-xs flex items-center gap-1" style={{ color: 'var(--amber)' }}>
+              <AlertTriangle size={11} /> {s.portInUse(value)}
+            </p>
+            {status.suggestion !== null && (
+              <button type="button"
+                onClick={() => {
+                  onChange(status.suggestion!);
+                  setTimeout(() => onCheckPort(status.suggestion!), 0);
+                }}
+                className="text-xs px-2 py-0.5 rounded border transition-colors"
+                style={{ borderColor: 'var(--amber)', color: 'var(--amber)' }}>
+                {s.portSuggest(status.suggestion)}
+              </button>
+            )}
+          </div>
+        )}
+        {!status.checking && status.available === true && (
+          <p className="text-xs flex items-center gap-1" style={{ color: 'var(--success)' }}>
+            <CheckCircle2 size={11} /> {status.isSelf ? s.portSelf : s.portAvailable}
+          </p>
+        )}
+      </div>
+    </Field>
+  );
+}
+
+// ─── Step 3: Ports ────────────────────────────────────────────────────────────
+export interface StepPortsProps {
+  state: SetupState;
+  update: <K extends keyof SetupState>(key: K, val: SetupState[K]) => void;
+  webPortStatus: PortStatus;
+  mcpPortStatus: PortStatus;
+  setWebPortStatus: (s: PortStatus) => void;
+  setMcpPortStatus: (s: PortStatus) => void;
+  checkPort: (port: number, which: 'web' | 'mcp') => void;
+  portConflict: boolean;
+  s: SetupMessages;
+}
+
+export default function StepPorts({
+  state, update, webPortStatus, mcpPortStatus, setWebPortStatus, setMcpPortStatus, checkPort, portConflict, s,
+}: StepPortsProps) {
+  return (
+    <div className="space-y-5">
+      <PortField
+        label={s.webPort} hint={s.portHint} value={state.webPort}
+        onChange={v => { update('webPort', v); setWebPortStatus({ checking: false, available: null, isSelf: false, suggestion: null }); }}
+        status={webPortStatus}
+        onCheckPort={port => checkPort(port, 'web')}
+        s={s}
+      />
+      <PortField
+        label={s.mcpPort} hint={s.portHint} value={state.mcpPort}
+        onChange={v => { update('mcpPort', v); setMcpPortStatus({ checking: false, available: null, isSelf: false, suggestion: null }); }}
+        status={mcpPortStatus}
+        onCheckPort={port => checkPort(port, 'mcp')}
+        s={s}
+      />
+      {portConflict && (
+        <p className="text-xs flex items-center gap-1.5" role="alert" style={{ color: 'var(--amber)' }}>
+          <AlertTriangle size={12} /> {s.portConflict}
+        </p>
+      )}
+      {!portConflict && (webPortStatus.available === null || mcpPortStatus.available === null) && !webPortStatus.checking && !mcpPortStatus.checking && (
+        <p className="text-xs" style={{ color: 'var(--muted-foreground)' }}>{s.portVerifyHint}</p>
+      )}
+      <p className="text-xs flex items-center gap-1.5" style={{ color: 'var(--muted-foreground)' }}>
+        <Info size={12} /> {s.portRestartWarning}
+      </p>
+    </div>
+  );
+}

package/app/components/setup/StepReview.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import {
+  Loader2, AlertTriangle, CheckCircle2, XCircle,
+} from 'lucide-react';
+import type { SetupState, SetupMessages, AgentInstallStatus } from './types';
+
+// ─── Restart Block ────────────────────────────────────────────────────────────
+function RestartBlock({ s, newPort }: { s: SetupMessages; newPort: number }) {
+  const [restarting, setRestarting] = useState(false);
+  const [done, setDone] = useState(false);
+  const pollRef = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  // Cleanup polling interval on unmount
+  useEffect(() => () => { clearInterval(pollRef.current); }, []);
+
+  const handleRestart = async () => {
+    setRestarting(true);
+    try {
+      await fetch('/api/restart', { method: 'POST' });
+      setDone(true);
+      const redirect = () => { window.location.href = `http://localhost:${newPort}/?welcome=1`; };
+      // Poll the new port until ready, then redirect
+      let attempts = 0;
+      clearInterval(pollRef.current);
+      pollRef.current = setInterval(async () => {
+        attempts++;
+        try {
+          const r = await fetch(`http://localhost:${newPort}/api/health`);
+          if (r.status < 500) { clearInterval(pollRef.current); redirect(); return; }
+        } catch { /* not ready yet */ }
+        if (attempts >= 10) { clearInterval(pollRef.current); redirect(); }
+      }, 800);
+    } catch (e) {
+      console.warn('[SetupWizard] restart request failed:', e);
+      setRestarting(false);
+    }
+  };
+
+  if (done) {
+    return (
+      <div className="p-3 rounded-lg text-sm flex items-center gap-2"
+        style={{ background: 'color-mix(in srgb, var(--success) 10%, transparent)', color: 'var(--success)' }}>
+        <CheckCircle2 size={14} /> {s.restartDone}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="p-3 rounded-lg text-sm flex items-center gap-2"
+        style={{ background: 'color-mix(in srgb, var(--amber) 10%, transparent)', color: 'var(--amber)' }}>
+        <AlertTriangle size={14} /> {s.restartRequired}
+      </div>
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={handleRestart}
+          disabled={restarting}
+          className="flex items-center gap-1.5 px-4 py-2 text-sm rounded-lg transition-colors disabled:opacity-50"
+          style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}>
+          {restarting ? <Loader2 size={13} className="animate-spin" /> : null}
+          {restarting ? s.restarting : s.restartNow}
+        </button>
+        <span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
+          {s.restartManual} <code className="font-mono">mindos start</code>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+// ─── Step 6: Review ───────────────────────────────────────────────────────────
+export interface StepReviewProps {
+  state: SetupState;
+  selectedAgents: Set<string>;
+  agentStatuses: Record<string, AgentInstallStatus>;
+  onRetryAgent: (key: string) => void;
+  error: string;
+  needsRestart: boolean;
+  s: SetupMessages;
+  skillInstallResult: { ok?: boolean; skill?: string; error?: string } | null;
+  setupPhase: 'review' | 'saving' | 'agents' | 'skill' | 'done';
+}
+
+export default function StepReview({
+  state, selectedAgents, agentStatuses, onRetryAgent, error, needsRestart, s,
+  skillInstallResult, setupPhase,
+}: StepReviewProps) {
+  const failedAgents = Object.entries(agentStatuses).filter(([, v]) => v.state === 'error');
+
+  // Compact config summary (only key info)
+  const summaryRows: [string, string][] = [
+    [s.kbPath, state.mindRoot],
+    [s.webPort, `${state.webPort} / ${state.mcpPort}`],
+    [s.agentToolsTitle, selectedAgents.size > 0 ? s.agentCountSummary(selectedAgents.size) : '—'],
+  ];
+
+  // Progress stepper phases
+  type Phase = typeof setupPhase;
+  const phases: { key: Phase; label: string }[] = [
+    { key: 'saving', label: s.phaseSaving },
+    { key: 'agents', label: s.phaseAgents },
+    { key: 'skill', label: s.phaseSkill },
+    { key: 'done', label: s.phaseDone },
+  ];
+  const phaseOrder: Phase[] = ['saving', 'agents', 'skill', 'done'];
+  const currentIdx = phaseOrder.indexOf(setupPhase);
+
+  return (
+    <div className="space-y-5">
+      {/* Compact config summary */}
+      <div className="rounded-xl border overflow-hidden" style={{ borderColor: 'var(--border)' }}>
+        {summaryRows.map(([label, value], i) => (
+          <div key={i} className="flex items-center justify-between px-4 py-2.5 text-sm"
+            style={{
+              background: i % 2 === 0 ? 'var(--card)' : 'transparent',
+              borderTop: i > 0 ? '1px solid var(--border)' : undefined,
+            }}>
+            <span style={{ color: 'var(--muted-foreground)' }}>{label}</span>
+            <span className="font-mono text-xs truncate ml-4" style={{ color: 'var(--foreground)' }}>{value}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Before submit: review hint */}
+      {setupPhase === 'review' && (
+        <p className="text-sm" style={{ color: 'var(--muted-foreground)' }}>{s.reviewHint}</p>
+      )}
+
+      {/* Progress stepper — visible during/after setup */}
+      {setupPhase !== 'review' && (
+        <div className="space-y-2 py-2">
+          {phases.map(({ key, label }, i) => {
+            const idx = phaseOrder.indexOf(key);
+            const isDone = currentIdx > idx || (key === 'done' && setupPhase === 'done');
+            const isActive = setupPhase === key && key !== 'done';
+            const isPending = currentIdx < idx;
+            return (
+              <div key={key} className="flex items-center gap-3">
+                <div className="w-5 h-5 rounded-full flex items-center justify-center shrink-0 text-2xs"
+                  style={{
+                    background: isDone ? 'color-mix(in srgb, var(--success) 15%, transparent)' : isActive ? 'color-mix(in srgb, var(--amber) 15%, transparent)' : 'var(--muted)',
+                    color: isDone ? 'var(--success)' : isActive ? 'var(--amber)' : 'var(--muted-foreground)',
+                  }}>
+                  {isDone ? <CheckCircle2 size={12} /> : isActive ? <Loader2 size={12} className="animate-spin" /> : (i + 1)}
+                </div>
+                <span className="text-sm" style={{
+                  color: isDone ? 'var(--success)' : isActive ? 'var(--foreground)' : 'var(--muted-foreground)',
+                  fontWeight: isActive ? 500 : 400,
+                  opacity: isPending ? 0.5 : 1,
+                }}>
+                  {label}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Agent failures — expandable */}
+      {failedAgents.length > 0 && setupPhase === 'done' && (
+        <div className="p-3 rounded-lg space-y-2" style={{ background: 'color-mix(in srgb, var(--error) 8%, transparent)' }}>
+          <p className="text-xs font-medium" style={{ color: 'var(--error)' }}>
+            {s.agentFailedCount(failedAgents.length)}
+          </p>
+          {failedAgents.map(([key, st]) => (
+            <div key={key} className="flex items-center justify-between gap-2">
+              <span className="text-xs flex items-center gap-1" style={{ color: 'var(--error)' }}>
+                <XCircle size={11} /> {key}{st.message ? ` — ${st.message}` : ''}
+              </span>
+              {/* Retry button — no disabled guard needed: once clicked, state becomes
+                 'installing' and this entry is filtered out of failedAgents */}
+              <button
+                type="button"
+                onClick={() => onRetryAgent(key)}
+                className="text-xs px-2 py-0.5 rounded border transition-colors"
+                style={{ borderColor: 'var(--error)', color: 'var(--error)' }}>
+                {s.retryAgent}
+              </button>
+            </div>
+          ))}
+          <p className="text-xs" style={{ color: 'var(--muted-foreground)' }}>{s.agentFailureNote}</p>
+        </div>
+      )}
+
+      {/* Skill result — compact */}
+      {skillInstallResult && setupPhase === 'done' && (
+        <div className="flex items-center gap-2 text-xs px-3 py-2 rounded-lg" style={{
+          background: skillInstallResult.ok ? 'color-mix(in srgb, var(--success) 6%, transparent)' : 'color-mix(in srgb, var(--error) 6%, transparent)',
+        }}>
+          {skillInstallResult.ok ? (
+            <><CheckCircle2 size={11} className="text-success shrink-0" />
+            <span style={{ color: 'var(--foreground)' }}>{s.skillInstalled} — {skillInstallResult.skill}</span></>
+          ) : (
+            <><XCircle size={11} className="text-error shrink-0" />
+            <span style={{ color: 'var(--error)' }}>{s.skillFailed}{skillInstallResult.error ? `: ${skillInstallResult.error}` : ''}</span></>
+          )}
+        </div>
+      )}
+
+      {error && (
+        <div className="p-3 rounded-lg text-sm text-error" style={{ background: 'color-mix(in srgb, var(--error) 10%, transparent)' }}>
+          {s.completeFailed}: {error}
+        </div>
+      )}
+      {needsRestart && setupPhase === 'done' && <RestartBlock s={s} newPort={state.webPort} />}
+    </div>
+  );
+}

package/app/components/setup/StepSecurity.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useState } from 'react';
+import { Copy, Check, RefreshCw } from 'lucide-react';
+import { Field, Input } from '@/components/settings/Primitives';
+import type { SetupMessages } from './types';
+
+export interface StepSecurityProps {
+  authToken: string;
+  tokenCopied: boolean;
+  onCopy: () => void;
+  onGenerate: (seed?: string) => void;
+  webPassword: string;
+  onPasswordChange: (v: string) => void;
+  s: SetupMessages;
+}
+
+export default function StepSecurity({
+  authToken, tokenCopied, onCopy, onGenerate, webPassword, onPasswordChange, s,
+}: StepSecurityProps) {
+  const [seed, setSeed] = useState('');
+  const [showSeed, setShowSeed] = useState(false);
+  const [showUsage, setShowUsage] = useState(false);
+  return (
+    <div className="space-y-5">
+      <Field label={s.authToken} hint={s.authTokenHint}>
+        <div className="flex gap-2">
+          <Input value={authToken} readOnly className="font-mono text-xs" />
+          <button onClick={onCopy}
+            className="flex items-center gap-1 px-3 py-2 text-xs rounded-lg border border-border hover:bg-muted transition-colors shrink-0"
+            style={{ color: 'var(--foreground)' }}>
+            {tokenCopied ? <Check size={14} /> : <Copy size={14} />}
+            {tokenCopied ? s.copiedToken : s.copyToken}
+          </button>
+          <button onClick={() => onGenerate()}
+            aria-label={s.generateToken}
+            className="flex items-center gap-1 px-3 py-2 text-xs rounded-lg border border-border hover:bg-muted transition-colors shrink-0"
+            style={{ color: 'var(--foreground)' }}>
+            <RefreshCw size={14} />
+          </button>
+        </div>
+      </Field>
+      <div className="space-y-1.5">
+        <button onClick={() => setShowUsage(!showUsage)} className="text-xs underline"
+          aria-expanded={showUsage}
+          style={{ color: 'var(--muted-foreground)' }}>
+          {s.authTokenUsageWhat}
+        </button>
+        {showUsage && (
+          <p className="text-xs leading-relaxed px-3 py-2 rounded-lg"
+            style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}>
+            {s.authTokenUsage}
+          </p>
+        )}
+      </div>
+      <div>
+        <button onClick={() => setShowSeed(!showSeed)} className="text-xs underline"
+          aria-expanded={showSeed}
+          style={{ color: 'var(--muted-foreground)' }}>
+          {s.authTokenSeed}
+        </button>
+        {showSeed && (
+          <div className="mt-2 flex gap-2">
+            <Input value={seed} onChange={e => setSeed(e.target.value)} placeholder={s.authTokenSeedHint} />
+            <button onClick={() => { if (seed.trim()) onGenerate(seed); }}
+              className="px-3 py-2 text-xs rounded-lg border border-border hover:bg-muted transition-colors shrink-0"
+              style={{ color: 'var(--foreground)' }}>
+              {s.generateToken}
+            </button>
+          </div>
+        )}
+      </div>
+      <Field label={s.webPassword} hint={s.webPasswordHint}>
+        <Input type="password" value={webPassword} onChange={e => onPasswordChange(e.target.value)} placeholder="(optional)" />
+      </Field>
+    </div>
+  );
+}

package/app/components/setup/constants.tsx

@@ -0,0 +1,13 @@
+import { Globe, BookOpen, FileText } from 'lucide-react';
+import type { Template } from './types';
+
+export const TEMPLATES: Array<{ id: Template; icon: React.ReactNode; dirs: string[] }> = [
+  { id: 'en', icon: <Globe size={18} />, dirs: ['Profile/', 'Connections/', 'Notes/', 'Workflows/', 'Resources/', 'Projects/'] },
+  { id: 'zh', icon: <BookOpen size={18} />, dirs: ['画像/', '关系/', '笔记/', '流程/', '资源/', '项目/'] },
+  { id: 'empty', icon: <FileText size={18} />, dirs: ['README.md', 'CONFIG.json', 'INSTRUCTION.md'] },
+];
+
+export const TOTAL_STEPS = 6;
+export const STEP_KB = 0;
+export const STEP_PORTS = 2;
+export const STEP_AGENTS = 4;