@geminilight/mindos 0.5.9 → 0.5.10

package/app/components/setup/StepAI.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { Brain, Zap, SkipForward, CheckCircle2 } from 'lucide-react';
+import { Field, Input, ApiKeyInput } from '@/components/settings/Primitives';
+import type { SetupState, SetupMessages } from './types';
+
+export interface StepAIProps {
+  state: SetupState;
+  update: <K extends keyof SetupState>(key: K, val: SetupState[K]) => void;
+  s: SetupMessages;
+}
+
+export default function StepAI({ state, update, s }: StepAIProps) {
+  const providers = [
+    { id: 'anthropic' as const, icon: <Brain size={18} />, label: 'Anthropic', desc: 'Claude — claude-sonnet-4-6' },
+    { id: 'openai' as const, icon: <Zap size={18} />, label: 'OpenAI', desc: 'GPT or any OpenAI-compatible API' },
+    { id: 'skip' as const, icon: <SkipForward size={18} />, label: s.aiSkipTitle, desc: s.aiSkipDesc },
+  ];
+  return (
+    <div className="space-y-5">
+      <div className="grid grid-cols-1 gap-3">
+        {providers.map(p => (
+          <button key={p.id} onClick={() => update('provider', p.id)}
+            className="flex items-start gap-3 p-4 rounded-xl border text-left transition-all duration-150"
+            style={{
+              background: state.provider === p.id ? 'var(--amber-dim)' : 'var(--card)',
+              borderColor: state.provider === p.id ? 'var(--amber)' : 'var(--border)',
+            }}>
+            <span className="mt-0.5" style={{ color: state.provider === p.id ? 'var(--amber)' : 'var(--muted-foreground)' }}>
+              {p.icon}
+            </span>
+            <div>
+              <p className="text-sm font-medium" style={{ color: 'var(--foreground)' }}>{p.label}</p>
+              <p className="text-xs mt-0.5" style={{ color: 'var(--muted-foreground)' }}>{p.desc}</p>
+            </div>
+            {state.provider === p.id && (
+              <CheckCircle2 size={16} className="ml-auto mt-0.5 shrink-0" style={{ color: 'var(--amber)' }} />
+            )}
+          </button>
+        ))}
+      </div>
+      {state.provider !== 'skip' && (
+        <div className="space-y-4 pt-2">
+          <Field label={s.apiKey}>
+            <ApiKeyInput
+              value={state.provider === 'anthropic' ? state.anthropicKey : state.openaiKey}
+              onChange={v => update(state.provider === 'anthropic' ? 'anthropicKey' : 'openaiKey', v)}
+              placeholder={state.provider === 'anthropic' ? 'sk-ant-...' : 'sk-...'}
+            />
+          </Field>
+          <Field label={s.model}>
+            <Input
+              value={state.provider === 'anthropic' ? state.anthropicModel : state.openaiModel}
+              onChange={e => update(state.provider === 'anthropic' ? 'anthropicModel' : 'openaiModel', e.target.value)}
+            />
+          </Field>
+          {state.provider === 'openai' && (
+            <Field label={s.baseUrl} hint={s.baseUrlHint}>
+              <Input value={state.openaiBaseUrl} onChange={e => update('openaiBaseUrl', e.target.value)}
+                placeholder="https://api.openai.com/v1" />
+            </Field>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/app/components/setup/StepAgents.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import {
+  Loader2, CheckCircle2, XCircle, Brain, ChevronDown,
+} from 'lucide-react';
+import { Field, Select } from '@/components/settings/Primitives';
+import type { SetupMessages, McpMessages, Template, AgentEntry, AgentInstallStatus } from './types';
+
+export interface StepAgentsProps {
+  agents: AgentEntry[];
+  agentsLoading: boolean;
+  selectedAgents: Set<string>;
+  setSelectedAgents: React.Dispatch<React.SetStateAction<Set<string>>>;
+  agentTransport: 'auto' | 'stdio' | 'http';
+  setAgentTransport: (v: 'auto' | 'stdio' | 'http') => void;
+  agentScope: 'global' | 'project';
+  setAgentScope: (v: 'global' | 'project') => void;
+  agentStatuses: Record<string, AgentInstallStatus>;
+  s: SetupMessages;
+  settingsMcp: McpMessages;
+  template: Template;
+}
+
+export default function StepAgents({
+  agents, agentsLoading, selectedAgents, setSelectedAgents,
+  agentTransport, setAgentTransport, agentScope, setAgentScope,
+  agentStatuses, s, settingsMcp, template,
+}: StepAgentsProps) {
+  const toggleAgent = (key: string) => {
+    setSelectedAgents(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key); else next.add(key);
+      return next;
+    });
+  };
+
+  const [showOtherAgents, setShowOtherAgents] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  const getEffectiveTransport = (agent: AgentEntry) => {
+    if (agentTransport === 'auto') return agent.preferredTransport;
+    return agentTransport;
+  };
+
+  const getStatusBadge = (key: string, agent: AgentEntry) => {
+    const st = agentStatuses[key];
+    if (st) {
+      if (st.state === 'installing') return (
+        <span className="flex items-center gap-1 text-xs" style={{ color: 'var(--muted-foreground)' }}>
+          <Loader2 size={10} className="animate-spin" /> {s.agentInstalling}
+        </span>
+      );
+      if (st.state === 'ok') return (
+        <span className="flex items-center gap-1 text-xs px-1.5 py-0.5 rounded"
+          style={{ background: 'color-mix(in srgb, var(--success) 12%, transparent)', color: 'var(--success)' }}>
+          <CheckCircle2 size={10} /> {s.agentStatusOk}
+        </span>
+      );
+      if (st.state === 'error') return (
+        <span className="flex items-center gap-1 text-xs px-1.5 py-0.5 rounded"
+          style={{ background: 'color-mix(in srgb, var(--error) 10%, transparent)', color: 'var(--error)' }}>
+          <XCircle size={10} /> {s.agentStatusError}
+          {st.message && <span className="ml-1 text-2xs">({st.message})</span>}
+        </span>
+      );
+    }
+    if (agent.installed) return (
+      <span className="text-xs px-1.5 py-0.5 rounded"
+        style={{ background: 'color-mix(in srgb, var(--success) 12%, transparent)', color: 'var(--success)' }}>
+        {settingsMcp.installed}
+      </span>
+    );
+    if (agent.present) return (
+      <span className="text-xs px-1.5 py-0.5 rounded"
+        style={{ background: 'var(--amber-dim)', color: 'var(--amber)' }}>
+        {s.agentDetected}
+      </span>
+    );
+    return (
+      <span className="text-xs px-1.5 py-0.5 rounded"
+        style={{ background: 'color-mix(in srgb, var(--muted-foreground) 10%, transparent)', color: 'var(--muted-foreground)' }}>
+        {s.agentNotFound}
+      </span>
+    );
+  };
+
+  const { detected, other } = useMemo(() => ({
+    detected: agents.filter(a => a.installed || a.present),
+    other: agents.filter(a => !a.installed && !a.present),
+  }), [agents]);
+
+  const renderAgentRow = (agent: AgentEntry, i: number) => (
+    <label key={agent.key}
+      className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-muted/50 transition-colors"
+      style={{
+        background: i % 2 === 0 ? 'var(--card)' : 'transparent',
+        borderTop: i > 0 ? '1px solid var(--border)' : undefined,
+      }}>
+      <input
+        type="checkbox"
+        checked={selectedAgents.has(agent.key)}
+        onChange={() => toggleAgent(agent.key)}
+        style={{ accentColor: 'var(--amber)' }}
+        disabled={agentStatuses[agent.key]?.state === 'installing'}
+      />
+      <span className="text-sm flex-1" style={{ color: 'var(--foreground)' }}>{agent.name}</span>
+      <span className="text-2xs px-1.5 py-0.5 rounded font-mono"
+        style={{ background: 'color-mix(in srgb, var(--muted-foreground) 8%, transparent)', color: 'var(--muted-foreground)' }}>
+        {getEffectiveTransport(agent)}
+      </span>
+      {getStatusBadge(agent.key, agent)}
+    </label>
+  );
+
+  return (
+    <div className="space-y-5">
+      <p className="text-sm" style={{ color: 'var(--muted-foreground)' }}>{s.agentToolsHint}</p>
+      {agentsLoading ? (
+        <div className="flex items-center gap-2 py-4" style={{ color: 'var(--muted-foreground)' }}>
+          <Loader2 size={14} className="animate-spin" />
+          <span className="text-sm">{s.agentToolsLoading}</span>
+        </div>
+      ) : agents.length === 0 ? (
+        <p className="text-sm py-4 text-center" style={{ color: 'var(--muted-foreground)' }}>
+          {s.agentToolsEmpty}
+        </p>
+      ) : (
+        <>
+          {/* Badge legend */}
+          <div className="flex items-center gap-4 text-2xs" style={{ color: 'var(--muted-foreground)' }}>
+            <span className="flex items-center gap-1">
+              <span className="inline-block w-1.5 h-1.5 rounded-full" style={{ background: 'var(--success)' }} />
+              {s.badgeInstalled}
+            </span>
+            <span className="flex items-center gap-1">
+              <span className="inline-block w-1.5 h-1.5 rounded-full" style={{ background: 'var(--amber)' }} />
+              {s.badgeDetected}
+            </span>
+            <span className="flex items-center gap-1">
+              <span className="inline-block w-1.5 h-1.5 rounded-full" style={{ background: 'var(--muted-foreground)' }} />
+              {s.badgeNotFound}
+            </span>
+          </div>
+
+          {/* Detected agents — always visible */}
+          {detected.length > 0 ? (
+            <div className="rounded-xl border overflow-hidden" style={{ borderColor: 'var(--border)' }}>
+              {detected.map((agent, i) => renderAgentRow(agent, i))}
+            </div>
+          ) : (
+            <p className="text-xs py-2" style={{ color: 'var(--muted-foreground)' }}>
+              {s.agentNoneDetected}
+            </p>
+          )}
+          {/* Other agents — collapsed by default */}
+          {other.length > 0 && (
+            <div>
+              <button
+                type="button"
+                onClick={() => setShowOtherAgents(!showOtherAgents)}
+                aria-expanded={showOtherAgents}
+                className="flex items-center gap-1.5 text-xs py-1.5 transition-colors"
+                style={{ color: 'var(--muted-foreground)' }}>
+                <ChevronDown size={12} className={`transition-transform ${showOtherAgents ? 'rotate-180' : ''}`} />
+                {s.agentShowMore(other.length)}
+              </button>
+              {showOtherAgents && (
+                <div className="rounded-xl border overflow-hidden mt-1" style={{ borderColor: 'var(--border)' }}>
+                  {other.map((agent, i) => renderAgentRow(agent, i))}
+                </div>
+              )}
+            </div>
+          )}
+          {/* Skill context + auto-install hint */}
+          <div className="space-y-1.5">
+            <p className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
+              {s.skillWhat}
+            </p>
+            <div className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs"
+              style={{ background: 'color-mix(in srgb, var(--muted-foreground) 6%, transparent)', color: 'var(--muted-foreground)' }}>
+              <Brain size={13} className="shrink-0" />
+              <span>{s.skillAutoHint(template === 'zh' ? 'mindos-zh' : 'mindos')}</span>
+            </div>
+          </div>
+          {/* Advanced options — collapsed by default */}
+          <div>
+            <button
+              type="button"
+              onClick={() => setShowAdvanced(!showAdvanced)}
+              aria-expanded={showAdvanced}
+              className="flex items-center gap-1.5 text-xs py-1.5 transition-colors"
+              style={{ color: 'var(--muted-foreground)' }}>
+              <ChevronDown size={12} className={`transition-transform ${showAdvanced ? 'rotate-180' : ''}`} />
+              {s.agentAdvanced}
+            </button>
+            {showAdvanced && (
+              <div className="grid grid-cols-2 gap-4 mt-2">
+                <Field label={s.agentTransport}>
+                  <Select value={agentTransport} onChange={e => setAgentTransport(e.target.value as 'auto' | 'stdio' | 'http')}>
+                    <option value="auto">{s.agentTransportAuto}</option>
+                    <option value="stdio">{settingsMcp.transportStdio}</option>
+                    <option value="http">{settingsMcp.transportHttp}</option>
+                  </Select>
+                </Field>
+                <Field label={s.agentScope}>
+                  <Select value={agentScope} onChange={e => setAgentScope(e.target.value as 'global' | 'project')}>
+                    <option value="global">{s.agentScopeGlobal}</option>
+                    <option value="project">{s.agentScopeProject}</option>
+                  </Select>
+                </Field>
+              </div>
+            )}
+          </div>
+          <div className="flex gap-2 mt-1">
+            <button
+              type="button"
+              onClick={() => setSelectedAgents(new Set(
+                agents.filter(a => a.installed || a.present).map(a => a.key)
+              ))}
+              className="text-xs px-2.5 py-1 rounded-md border transition-colors hover:bg-muted/50"
+              style={{ borderColor: 'var(--amber)', color: 'var(--amber)' }}>
+              {s.agentSelectDetected}
+            </button>
+            <button
+              type="button"
+              onClick={() => setSelectedAgents(new Set())}
+              className="text-xs px-2.5 py-1 rounded-md border transition-colors hover:bg-muted/50"
+              style={{ borderColor: 'var(--border)', color: 'var(--muted-foreground)' }}>
+              {s.agentSkipLater}
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/app/components/setup/StepDots.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+export interface StepDotsProps {
+  step: number;
+  setStep: (s: number) => void;
+  stepTitles: readonly string[];
+  disabled?: boolean;
+}
+
+export default function StepDots({ step, setStep, stepTitles, disabled }: StepDotsProps) {
+  return (
+    <div className="flex items-center gap-2 mb-8" role="navigation" aria-label="Setup steps">
+      {stepTitles.map((title: string, i: number) => (
+        <div key={i} className="flex items-center gap-2">
+          {i > 0 && <div className="w-8 h-px" style={{ background: i <= step ? 'var(--amber)' : 'var(--border)' }} />}
+          <button onClick={() => setStep(i)}
+            aria-current={i === step ? 'step' : undefined}
+            aria-label={title}
+            className="flex items-center gap-1.5 p-1 -m-1 disabled:cursor-not-allowed disabled:opacity-60"
+            disabled={disabled || i >= step}>
+            <div
+              className="w-6 h-6 rounded-full text-xs font-medium flex items-center justify-center transition-colors"
+              style={{
+                background: i <= step ? 'var(--amber)' : 'var(--muted)',
+                color: i <= step ? 'var(--amber-foreground)' : 'var(--muted-foreground)',
+                opacity: i <= step ? 1 : 0.5,
+              }}>
+              {i + 1}
+            </div>
+            <span className="text-xs hidden sm:inline"
+              style={{ color: i === step ? 'var(--foreground)' : 'var(--muted-foreground)', opacity: i <= step ? 1 : 0.5 }}>
+              {title}
+            </span>
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

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>
+  );
+}