@geminilight/mindos 0.5.9 → 0.5.11

package/app/components/settings/McpTab.tsx

@@ -94,8 +94,8 @@ function ServerStatus({ status, t }: { status: McpStatus | null; t: any }) {
       <div className="space-y-1.5 text-sm pl-11">
         <div className="flex items-center gap-2">
           <span className="text-muted-foreground w-20 shrink-0 text-xs">{m?.status ?? 'Status'}</span>
-          <span className={`text-xs flex items-center gap-1 ${status.running ? 'text-green-500' : 'text-muted-foreground'}`}>
-            <span className={`inline-block w-1.5 h-1.5 rounded-full ${status.running ? 'bg-green-500' : 'bg-muted-foreground'}`} />
+          <span className={`text-xs flex items-center gap-1 ${status.running ? 'text-success' : 'text-muted-foreground'}`}>
+            <span className={`inline-block w-1.5 h-1.5 rounded-full ${status.running ? 'bg-success' : 'bg-muted-foreground'}`} />
             {status.running ? (m?.running ?? 'Running') : (m?.stopped ?? 'Stopped')}
           </span>
         </div>
@@ -115,7 +115,7 @@ function ServerStatus({ status, t }: { status: McpStatus | null; t: any }) {
           <span className="text-muted-foreground w-20 shrink-0 text-xs">{m?.auth ?? 'Auth'}</span>
           <span className="text-xs">
             {status.authConfigured
-              ? <span className="text-green-500">{m?.authSet ?? 'Token set'}</span>
+              ? <span className="text-success">{m?.authSet ?? 'Token set'}</span>
               : <span className="text-muted-foreground">{m?.authNotSet ?? 'No token'}</span>}
           </span>
         </div>
@@ -214,22 +214,23 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
               type="checkbox"
               checked={selected.has(agent.key)}
               onChange={() => toggle(agent.key)}
-              className="rounded border-border accent-amber-500"
+              className="rounded border-border"
+              style={{ accentColor: 'var(--amber)' }}
             />
             <span className="w-28 shrink-0 text-xs">{agent.name}</span>
-            <span className="text-[10px] px-1.5 py-0.5 rounded font-mono"
+            <span className="text-2xs px-1.5 py-0.5 rounded font-mono"
               style={{ background: 'rgba(100,100,120,0.08)' }}>
               {getEffectiveTransport(agent)}
             </span>
             {agent.installed ? (
               <>
-                <span className="text-[10px] px-1.5 py-0.5 rounded bg-green-500/15 text-green-500 font-mono">
+                <span className="text-2xs px-1.5 py-0.5 rounded bg-success/15 text-success font-mono">
                   {agent.transport}
                 </span>
-                <span className="text-[10px] text-muted-foreground">{agent.scope}</span>
+                <span className="text-2xs text-muted-foreground">{agent.scope}</span>
               </>
             ) : (
-              <span className="text-[10px] text-muted-foreground">
+              <span className="text-2xs text-muted-foreground">
                 {agent.present ? (m?.detected ?? 'Detected') : (m?.notFound ?? 'Not found')}
               </span>
             )}
@@ -238,7 +239,7 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
               <select
                 value={scopes[agent.key] || 'project'}
                 onChange={e => setScopes({ ...scopes, [agent.key]: e.target.value as 'project' | 'global' })}
-                className="ml-auto text-[10px] px-1.5 py-0.5 rounded border border-border bg-background text-foreground"
+                className="ml-auto text-2xs px-1.5 py-0.5 rounded border border-border bg-background text-foreground"
               >
                 <option value="project">{m?.project ?? 'Project'}</option>
                 <option value="global">{m?.global ?? 'Global'}</option>
@@ -273,7 +274,8 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
             name="transport"
             checked={transport === 'auto'}
             onChange={() => setTransport('auto')}
-            className="accent-amber-500"
+            className=""
+            style={{ accentColor: 'var(--amber)' }}
           />
           {m?.transportAuto ?? 'auto (recommended)'}
         </label>
@@ -283,7 +285,8 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
             name="transport"
             checked={transport === 'stdio'}
             onChange={() => setTransport('stdio')}
-            className="accent-amber-500"
+            className=""
+            style={{ accentColor: 'var(--amber)' }}
           />
           {m?.transportStdio ?? 'stdio'}
         </label>
@@ -293,7 +296,8 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
             name="transport"
             checked={transport === 'http'}
             onChange={() => setTransport('http')}
-            className="accent-amber-500"
+            className=""
+            style={{ accentColor: 'var(--amber)' }}
           />
           {m?.transportHttp ?? 'http'}
         </label>
@@ -329,7 +333,7 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
         onClick={handleInstall}
         disabled={selected.size === 0 || installing}
         className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-        style={{ background: 'var(--amber)', color: '#131210' }}
+        style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
       >
         {installing && <Loader2 size={12} className="animate-spin" />}
         {installing ? (m?.installing ?? 'Installing...') : (m?.installSelected ?? 'Install Selected')}
@@ -339,7 +343,7 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
       {message && (
         <div className="flex items-center gap-1.5 text-xs" role="status">
           {message.type === 'success' ? (
-            <><CheckCircle2 size={12} className="text-green-500" /><span className="text-green-500">{message.text}</span></>
+            <><CheckCircle2 size={12} className="text-success" /><span className="text-success">{message.text}</span></>
           ) : (
             <><AlertCircle size={12} className="text-destructive" /><span className="text-destructive">{message.text}</span></>
           )}
@@ -480,7 +484,7 @@ function SkillsSection({ t }: { t: any }) {
           >
             {expanded === skill.name ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
             <span className="text-xs font-medium flex-1">{skill.name}</span>
-            <span className={`text-[10px] px-1.5 py-0.5 rounded ${
+            <span className={`text-2xs px-1.5 py-0.5 rounded ${
               skill.source === 'builtin' ? 'bg-blue-500/15 text-blue-500' : 'bg-purple-500/15 text-purple-500'
             }`}>
               {skill.source === 'builtin' ? (m?.skillBuiltin ?? 'Built-in') : (m?.skillUser ?? 'Custom')}
@@ -489,7 +493,7 @@ function SkillsSection({ t }: { t: any }) {
             <button
               onClick={e => { e.stopPropagation(); handleToggle(skill.name, !skill.enabled); }}
               className={`relative inline-flex h-4 w-7 items-center rounded-full transition-colors ${
-                skill.enabled ? 'bg-green-500' : 'bg-muted-foreground/30'
+                skill.enabled ? 'bg-success' : 'bg-muted-foreground/30'
               }`}
             >
               <span className={`inline-block h-3 w-3 rounded-full bg-white transition-transform ${
@@ -501,11 +505,11 @@ function SkillsSection({ t }: { t: any }) {
           {expanded === skill.name && (
             <div className="px-3 py-2 border-t border-border text-xs space-y-1.5 bg-muted/20">
               <p className="text-muted-foreground">{skill.description || 'No description'}</p>
-              <p className="text-muted-foreground font-mono text-[10px]">{skill.path}</p>
+              <p className="text-muted-foreground font-mono text-2xs">{skill.path}</p>
               {skill.editable && (
                 <button
                   onClick={() => handleDelete(skill.name)}
-                  className="flex items-center gap-1 text-[10px] text-destructive hover:underline"
+                  className="flex items-center gap-1 text-2xs text-destructive hover:underline"
                 >
                   <Trash2 size={10} />
                   {m?.deleteSkill ?? 'Delete'}
@@ -526,7 +530,7 @@ function SkillsSection({ t }: { t: any }) {
             </button>
           </div>
           <div className="space-y-1">
-            <label className="text-[10px] text-muted-foreground">{m?.skillName ?? 'Name'}</label>
+            <label className="text-2xs text-muted-foreground">{m?.skillName ?? 'Name'}</label>
             <input
               type="text"
               value={newName}
@@ -536,7 +540,7 @@ function SkillsSection({ t }: { t: any }) {
             />
           </div>
           <div className="space-y-1">
-            <label className="text-[10px] text-muted-foreground">{m?.skillDesc ?? 'Description'}</label>
+            <label className="text-2xs text-muted-foreground">{m?.skillDesc ?? 'Description'}</label>
             <input
               type="text"
               value={newDesc}
@@ -546,7 +550,7 @@ function SkillsSection({ t }: { t: any }) {
             />
           </div>
           <div className="space-y-1">
-            <label className="text-[10px] text-muted-foreground">{m?.skillContent ?? 'Content'}</label>
+            <label className="text-2xs text-muted-foreground">{m?.skillContent ?? 'Content'}</label>
             <textarea
               value={newContent}
               onChange={e => setNewContent(e.target.value)}
@@ -556,7 +560,7 @@ function SkillsSection({ t }: { t: any }) {
             />
           </div>
           {error && (
-            <p className="text-[10px] text-destructive flex items-center gap-1">
+            <p className="text-2xs text-destructive flex items-center gap-1">
               <AlertCircle size={10} />
               {error}
             </p>
@@ -566,7 +570,7 @@ function SkillsSection({ t }: { t: any }) {
               onClick={handleCreate}
               disabled={!newName.trim() || saving}
               className="flex items-center gap-1 px-2.5 py-1 text-xs rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-              style={{ background: 'var(--amber)', color: '#131210' }}
+              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
             >
               {saving && <Loader2 size={10} className="animate-spin" />}
               {m?.saveSkill ?? 'Save'}

package/app/components/settings/PluginsTab.tsx

@@ -33,25 +33,25 @@ export function PluginsTab({ pluginStates, setPluginStates, t }: PluginsTabProps
                       <div className="flex items-center gap-2 flex-wrap">
                         <span className="text-sm font-medium text-foreground">{renderer.name}</span>
                         {isCore && (
-                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-600/15 text-amber-600 font-mono">
+                          <span className="text-2xs px-1.5 py-0.5 rounded bg-amber-600/15 text-amber-600 font-mono">
                             core
                           </span>
                         )}
                         {renderer.builtin && !isCore && (
-                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-mono">
+                          <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-mono">
                             {t.settings.plugins.builtinBadge}
                           </span>
                         )}
                         <div className="flex gap-1 flex-wrap">
                           {renderer.tags.map(tag => (
-                            <span key={tag} className="text-[10px] px-1.5 py-0.5 rounded bg-muted/60 text-muted-foreground">
+                            <span key={tag} className="text-2xs px-1.5 py-0.5 rounded bg-muted/60 text-muted-foreground">
                               {tag}
                             </span>
                           ))}
                         </div>
                       </div>
                       <p className="text-xs text-muted-foreground mt-1 leading-relaxed">{renderer.description}</p>
-                      <p className="text-[11px] text-muted-foreground/60 mt-1.5 font-mono">
+                      <p className="text-xs text-muted-foreground/60 mt-1.5 font-mono">
                         {t.settings.plugins.matchHint}: <code className="bg-muted px-1 rounded">{renderer.match.toString().match(/\/(.+)\//)?.[1] ?? '—'}</code>
                       </p>
                     </div>

package/app/components/settings/Primitives.tsx

@@ -35,7 +35,7 @@ export function Select({ className = '', ...props }: React.SelectHTMLAttributes<
 export function EnvBadge({ overridden }: { overridden: boolean }) {
   if (!overridden) return null;
   return (
-    <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-500 font-mono ml-1.5">env</span>
+    <span className="text-2xs px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-500 font-mono ml-1.5">env</span>
   );
 }
 

package/app/components/settings/SyncTab.tsx

@@ -111,12 +111,12 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
           }}
         />
         {remoteUrl.trim() && !isValid && (
-          <p className="text-[11px]" style={{ color: 'var(--destructive, red)' }}>
+          <p className="text-xs" style={{ color: 'var(--destructive, red)' }}>
             {syncT?.invalidUrl ?? 'Invalid Git URL — use HTTPS (https://...) or SSH (git@...)'}
           </p>
         )}
         {urlType === 'ssh' && (
-          <p className="text-[11px] text-muted-foreground flex items-center gap-1">
+          <p className="text-xs text-muted-foreground flex items-center gap-1">
             <AlertCircle size={11} className="shrink-0" />
             {syncT?.sshHint ?? 'SSH URLs require SSH key configured on this machine. HTTPS with token recommended.'}
           </p>
@@ -147,7 +147,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
               {showToken ? <EyeOff size={14} /> : <Eye size={14} />}
             </button>
           </div>
-          <p className="text-[11px] text-muted-foreground">
+          <p className="text-xs text-muted-foreground">
             {syncT?.tokenHint ?? 'GitHub: Settings → Developer settings → Personal access tokens → repo scope'}
           </p>
         </div>
@@ -174,7 +174,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
         onClick={handleConnect}
         disabled={!isValid || connecting}
         className="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-        style={{ background: 'var(--amber)', color: '#131210' }}
+        style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
       >
         {connecting && <Loader2 size={14} className="animate-spin" />}
         {connecting
@@ -191,7 +191,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
       )}
 
       {/* Features */}
-      <div className="grid grid-cols-2 gap-2 text-[11px] text-muted-foreground pt-2">
+      <div className="grid grid-cols-2 gap-2 text-xs text-muted-foreground pt-2">
         {[
           syncT?.featureAutoCommit ?? 'Auto-commit on save',
           syncT?.featureAutoPull ?? 'Auto-pull from remote',
@@ -199,7 +199,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
           syncT?.featureMultiDevice ?? 'Works across devices',
         ].map((f, i) => (
           <div key={i} className="flex items-center gap-1.5">
-            <CheckCircle2 size={11} className="text-green-500/60 shrink-0" />
+            <CheckCircle2 size={11} className="text-success/60 shrink-0" />
             <span>{f}</span>
           </div>
         ))}
@@ -336,7 +336,7 @@ export function SyncTab({ t }: SyncTabProps) {
           className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
             status.enabled
               ? 'border-border text-muted-foreground hover:text-destructive hover:border-destructive/50'
-              : 'border-green-500/30 text-green-500 hover:bg-green-500/10'
+              : 'border-success/30 text-success hover:bg-success/10'
           }`}
         >
           {status.enabled ? 'Disable Auto-sync' : 'Enable Auto-sync'}
@@ -347,7 +347,7 @@ export function SyncTab({ t }: SyncTabProps) {
       {message && (
         <div className="flex items-center gap-1.5 text-xs" role="status" aria-live="polite">
           {message.type === 'success' ? (
-            <><CheckCircle2 size={13} className="text-green-500" /><span className="text-green-500">{message.text}</span></>
+            <><CheckCircle2 size={13} className="text-success" /><span className="text-success">{message.text}</span></>
           ) : (
             <><AlertCircle size={13} className="text-destructive" /><span className="text-destructive">{message.text}</span></>
           )}

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