@geminilight/mindos 0.5.8 → 0.5.9

package/app/components/SyncStatusBar.tsx

@@ -22,8 +22,8 @@ export function getStatusLevel(status: SyncStatus | null, syncing: boolean): Sta
 export const DOT_COLORS: Record<StatusLevel, string> = {
   synced: 'bg-green-500',
   unpushed: 'bg-yellow-500',
-  conflicts: 'bg-red-500',       // #6 — conflicts more prominent than unpushed
-  error: 'bg-red-500',
+  conflicts: 'bg-error',       // #6 — conflicts more prominent than unpushed
+  error: 'bg-error',
   off: 'bg-muted-foreground/40',
   syncing: 'bg-blue-500',
 };
@@ -232,7 +232,7 @@ export default function SyncStatusBar({ collapsed, onOpenSyncSettings }: SyncSta
       <div className="flex items-center gap-1 shrink-0 ml-2">
         {/* #2 — sync result flash */}
         {(syncResult === 'success' || toast) && <CheckCircle2 size={12} className="text-green-500 animate-in fade-in duration-200" />}
-        {syncResult === 'error' && <XCircle size={12} className="text-red-500 animate-in fade-in duration-200" />}
+        {syncResult === 'error' && <XCircle size={12} className="text-error animate-in fade-in duration-200" />}
         <button
           onClick={handleSyncNow}
           disabled={syncing}

package/app/components/ask/MessageList.tsx

@@ -94,8 +94,8 @@ export default function MessageList({
               {m.content}
             </div>
           ) : m.content.startsWith('__error__') ? (
-            <div className="max-w-[85%] px-3 py-2.5 rounded-xl rounded-bl-sm border border-red-500/20 bg-red-500/8 text-sm">
-              <div className="flex items-start gap-2 text-red-400">
+            <div className="max-w-[85%] px-3 py-2.5 rounded-xl rounded-bl-sm border border-error/20 bg-error/8 text-sm">
+              <div className="flex items-start gap-2 text-error">
                 <AlertCircle size={14} className="shrink-0 mt-0.5" />
                 <span className="leading-relaxed">{m.content.slice(9)}</span>
               </div>

package/app/components/ask/SessionHistory.tsx

@@ -36,7 +36,7 @@ export default function SessionHistory({ sessions, activeSessionId, onLoad, onDe
             <button
               type="button"
               onClick={() => onDelete(s.id)}
-              className="p-1 rounded text-muted-foreground hover:text-red-400 hover:bg-muted"
+              className="p-1 rounded text-muted-foreground hover:text-error hover:bg-muted"
               title="Delete session"
             >
               <Trash2 size={12} />

package/app/components/renderers/agent-inspector/AgentInspectorRenderer.tsx

@@ -59,8 +59,8 @@ function opKind(tool: string): OpKind {
 const KIND_STYLE: Record<OpKind, { bg: string; text: string; border: string }> = {
   read:   { bg: 'rgba(138,180,216,0.10)', text: '#8ab4d8', border: 'rgba(138,180,216,0.25)' },
   write:  { bg: 'rgba(200,135,58,0.10)',  text: 'var(--amber)', border: 'rgba(200,135,58,0.25)' },
-  create: { bg: 'rgba(122,173,128,0.10)', text: '#7aad80', border: 'rgba(122,173,128,0.25)' },
-  delete: { bg: 'rgba(200,80,80,0.10)',   text: '#c85050', border: 'rgba(200,80,80,0.25)' },
+  create: { bg: 'rgba(122,173,128,0.10)', text: 'var(--success)', border: 'rgba(122,173,128,0.25)' },
+  delete: { bg: 'rgba(200,80,80,0.10)',   text: 'var(--error)', border: 'rgba(200,80,80,0.25)' },
   search: { bg: 'rgba(200,160,216,0.10)', text: '#c8a0d8', border: 'rgba(200,160,216,0.25)' },
   other:  { bg: 'var(--muted)', text: 'var(--muted-foreground)', border: 'var(--border)' },
 };
@@ -159,8 +159,8 @@ function OpCard({ op }: { op: AgentOp }) {
         <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
           {/* result */}
           {op.result === 'ok'
-            ? <CheckCircle2 size={13} style={{ color: '#7aad80' }} />
-            : <AlertCircle size={13} style={{ color: '#c85050' }} />
+            ? <CheckCircle2 size={13} style={{ color: 'var(--success)' }} />
+            : <AlertCircle size={13} style={{ color: 'var(--error)' }} />
           }
           {/* timestamp */}
           <span className="font-display" style={{ fontSize: '0.68rem', color: 'var(--muted-foreground)', opacity: 0.6 }} title={formatTs(op.ts)}>
@@ -191,7 +191,7 @@ function OpCard({ op }: { op: AgentOp }) {
           {op.message && (
             <div className="font-display" style={{ marginTop: 6, padding: '5px 9px', borderRadius: 5, fontSize: '0.72rem',
               background: op.result === 'error' ? 'rgba(200,80,80,0.08)' : 'rgba(122,173,128,0.08)',
-              color: op.result === 'error' ? '#c85050' : '#7aad80',
+              color: op.result === 'error' ? 'var(--error)' : 'var(--success)',
               border: `1px solid ${op.result === 'error' ? 'rgba(200,80,80,0.2)' : 'rgba(122,173,128,0.2)'}`,
             }}>
               {op.message}

package/app/components/renderers/config/ConfigRenderer.tsx

@@ -98,7 +98,7 @@ export function ConfigRenderer({ content, saveAction }: RendererContext) {
 
   if (!parsed || !data) {
     return (
-      <div className="rounded-xl border border-border p-4 text-sm text-red-400">
+      <div className="rounded-xl border border-border p-4 text-sm text-error">
         CONFIG.json parse failed. Please check JSON format.
       </div>
     );
@@ -110,11 +110,11 @@ export function ConfigRenderer({ content, saveAction }: RendererContext) {
         <div className="text-xs text-muted-foreground">CONFIG Control Panel</div>
         <div className="text-xs flex items-center gap-2">
           {saving && <span className="inline-flex items-center gap-1 text-muted-foreground"><Loader2 size={12} className="animate-spin" />Saving</span>}
-          {!saving && saved && <span className="inline-flex items-center gap-1" style={{ color: '#7aad80' }}><Check size={12} />Saved</span>}
+          {!saving && saved && <span className="inline-flex items-center gap-1" style={{ color: 'var(--success)' }}><Check size={12} />Saved</span>}
         </div>
       </div>
 
-      {error && <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">{error}</div>}
+      {error && <div className="rounded-lg border border-error/30 bg-error/10 px-3 py-2 text-xs text-error">{error}</div>}
 
       {sections.map((section) => (
         <div key={section.id} className="rounded-xl border border-border bg-card p-4">

package/app/components/renderers/csv/types.ts

@@ -73,7 +73,7 @@ export function serializeCSV(headers: string[], rows: string[][]) {
 
 const TAG_COLORS = [
   { bg: 'rgba(200,135,58,0.12)', text: 'var(--amber)' },
-  { bg: 'rgba(122,173,128,0.12)', text: '#7aad80' },
+  { bg: 'rgba(122,173,128,0.12)', text: 'var(--success)' },
   { bg: 'rgba(138,180,216,0.12)', text: '#8ab4d8' },
   { bg: 'rgba(200,160,216,0.12)', text: '#c8a0d8' },
   { bg: 'rgba(200,96,96,0.12)', text: '#c86060' },

package/app/components/renderers/diff/DiffRenderer.tsx

@@ -191,8 +191,8 @@ function DiffCard({ entry, saveAction, fullContent }: {
         </span>
 
         {/* diff stats */}
-        <span className="font-display" style={{ fontSize: '0.7rem', color: '#7aad80', flexShrink: 0 }}>+{added}</span>
-        <span className="font-display" style={{ fontSize: '0.7rem', color: '#c85050', flexShrink: 0 }}>−{removed}</span>
+        <span className="font-display" style={{ fontSize: '0.7rem', color: 'var(--success)', flexShrink: 0 }}>+{added}</span>
+        <span className="font-display" style={{ fontSize: '0.7rem', color: 'var(--error)', flexShrink: 0 }}>−{removed}</span>
 
         {/* tool badge */}
         <span className="font-display" style={{ fontSize: '0.65rem', padding: '1px 7px', borderRadius: 999, background: 'var(--muted)', color: 'var(--muted-foreground)', flexShrink: 0 }}>
@@ -210,20 +210,20 @@ function DiffCard({ entry, saveAction, fullContent }: {
             <button
               onClick={handleApprove}
               title="Approve this change"
-              style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: '#7aad80', display: 'flex', alignItems: 'center' }}
+              style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--success)', display: 'flex', alignItems: 'center' }}
             >
               <CheckCircle2 size={15} />
             </button>
             <button
               onClick={handleReject}
               title="Reject & revert this change"
-              style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: '#c85050', display: 'flex', alignItems: 'center' }}
+              style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--error)', display: 'flex', alignItems: 'center' }}
             >
               <XCircle size={15} />
             </button>
           </>
         ) : (
-          <span className="font-display" style={{ fontSize: '0.68rem', color: approved ? '#7aad80' : '#c85050' }}>
+          <span className="font-display" style={{ fontSize: '0.68rem', color: approved ? 'var(--success)' : 'var(--error)' }}>
             {approved ? '✓ approved' : '✕ reverted'}
           </span>
         )}
@@ -252,8 +252,8 @@ function DiffCard({ entry, saveAction, fullContent }: {
               line.type === 'delete' ? 'rgba(200,80,80,0.10)' :
               'transparent';
             const color =
-              line.type === 'insert' ? '#7aad80' :
-              line.type === 'delete' ? '#c85050' :
+              line.type === 'insert' ? 'var(--success)' :
+              line.type === 'delete' ? 'var(--error)' :
               'var(--muted-foreground)';
             const prefix =
               line.type === 'insert' ? '+' :
@@ -299,8 +299,8 @@ export function DiffRenderer({ content, saveAction }: RendererContext) {
       {/* stats bar */}
       <div className="font-display" style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: '1.2rem', fontSize: 11, color: 'var(--muted-foreground)' }}>
         <span>{entries.length} change{entries.length !== 1 ? 's' : ''}</span>
-        <span style={{ color: '#7aad80' }}>+{totalAdded}</span>
-        <span style={{ color: '#c85050' }}>−{totalRemoved}</span>
+        <span style={{ color: 'var(--success)' }}>+{totalAdded}</span>
+        <span style={{ color: 'var(--error)' }}>−{totalRemoved}</span>
       </div>
 
       {entries.map((entry, i) => (

package/app/components/renderers/timeline/TimelineRenderer.tsx

@@ -110,7 +110,7 @@ function renderBody(body: string): string {
 
 const TAG_PALETTE = [
   { bg: 'rgba(200,135,58,0.12)', text: 'var(--amber)' },
-  { bg: 'rgba(122,173,128,0.12)', text: '#7aad80' },
+  { bg: 'rgba(122,173,128,0.12)', text: 'var(--success)' },
   { bg: 'rgba(138,180,216,0.12)', text: '#8ab4d8' },
   { bg: 'rgba(200,160,216,0.12)', text: '#c8a0d8' },
 ];

package/app/components/renderers/workflow/WorkflowRenderer.tsx

@@ -92,9 +92,9 @@ function renderBody(body: string): string {
 function StatusIcon({ status }: { status: StepStatus }) {
   if (status === 'pending')  return <Circle size={15} style={{ color: 'var(--border)' }} />;
   if (status === 'running')  return <Loader2 size={15} style={{ color: 'var(--amber)', animation: 'spin 1s linear infinite' }} />;
-  if (status === 'done')     return <CheckCircle2 size={15} style={{ color: '#7aad80' }} />;
+  if (status === 'done')     return <CheckCircle2 size={15} style={{ color: 'var(--success)' }} />;
   if (status === 'skipped')  return <SkipForward size={15} style={{ color: 'var(--muted-foreground)', opacity: .5 }} />;
-  return <AlertCircle size={15} style={{ color: '#c85050' }} />;
+  return <AlertCircle size={15} style={{ color: 'var(--error)' }} />;
 }
 
 const STATUS_BORDER: Record<StepStatus, string> = {

package/app/components/settings/McpTab.tsx

@@ -5,7 +5,6 @@ import {
   Plug, CheckCircle2, AlertCircle, Loader2, Copy, Check,
   ChevronDown, ChevronRight, Trash2, Plus, X,
 } from 'lucide-react';
-import { SectionLabel } from './Primitives';
 import { apiFetch } from '@/lib/api';
 
 /* ── Types ─────────────────────────────────────────────────────── */
@@ -206,9 +205,7 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
   }));
 
   return (
-    <div className="space-y-3">
-      <SectionLabel>{m?.agentsTitle ?? 'Agent Configuration'}</SectionLabel>
-
+    <div className="space-y-3 pt-2">
       {/* Agent list */}
       <div className="space-y-1">
         {agents.map(agent => (
@@ -251,6 +248,23 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
         ))}
       </div>
 
+      {/* Select detected / Clear buttons */}
+      <div className="flex gap-2 text-xs pt-1">
+        <button type="button"
+          onClick={() => setSelected(new Set(
+            agents.filter(a => !a.installed && a.present).map(a => a.key)
+          ))}
+          className="px-2.5 py-1 rounded-md border transition-colors hover:bg-muted/50"
+          style={{ borderColor: 'var(--amber)', color: 'var(--amber)' }}>
+          {m?.selectDetected ?? 'Select Detected'}
+        </button>
+        <button type="button"
+          onClick={() => setSelected(new Set())}
+          className="px-2.5 py-1 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground">
+          {m?.clearSelection ?? 'Clear'}
+        </button>
+      </div>
+
       {/* Transport selector */}
       <div className="flex items-center gap-4 text-xs pt-1">
         <label className="flex items-center gap-1.5 cursor-pointer">
@@ -294,7 +308,7 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
               type="text"
               value={httpUrl}
               onChange={e => setHttpUrl(e.target.value)}
-              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus:ring-1 focus:ring-ring"
+              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
             />
           </div>
           <div className="space-y-1">
@@ -304,7 +318,7 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
               value={httpToken}
               onChange={e => setHttpToken(e.target.value)}
               placeholder="Bearer token"
-              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus:ring-1 focus:ring-ring"
+              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
             />
           </div>
         </div>
@@ -414,9 +428,7 @@ function SkillsSection({ t }: { t: any }) {
   }
 
   return (
-    <div className="space-y-3">
-      <SectionLabel>{m?.skillsTitle ?? 'Skills'}</SectionLabel>
-
+    <div className="space-y-3 pt-2">
       {/* Skill language switcher */}
       {(() => {
         const mindosEnabled = skills.find(s => s.name === 'mindos')?.enabled ?? true;
@@ -520,7 +532,7 @@ function SkillsSection({ t }: { t: any }) {
               value={newName}
               onChange={e => setNewName(e.target.value.replace(/[^a-z0-9-]/g, ''))}
               placeholder="my-skill"
-              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus:ring-1 focus:ring-ring"
+              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
             />
           </div>
           <div className="space-y-1">
@@ -530,7 +542,7 @@ function SkillsSection({ t }: { t: any }) {
               value={newDesc}
               onChange={e => setNewDesc(e.target.value)}
               placeholder="What does this skill do?"
-              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground outline-none focus:ring-1 focus:ring-ring"
+              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
             />
           </div>
           <div className="space-y-1">
@@ -540,7 +552,7 @@ function SkillsSection({ t }: { t: any }) {
               onChange={e => setNewContent(e.target.value)}
               rows={6}
               placeholder="Skill instructions (markdown)..."
-              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground outline-none focus:ring-1 focus:ring-ring resize-y font-mono"
+              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y font-mono"
             />
           </div>
           {error && (
@@ -586,6 +598,8 @@ export function McpTab({ t }: McpTabProps) {
   const [mcpStatus, setMcpStatus] = useState<McpStatus | null>(null);
   const [agents, setAgents] = useState<AgentInfo[]>([]);
   const [loading, setLoading] = useState(true);
+  const [showAgents, setShowAgents] = useState(false);
+  const [showSkills, setShowSkills] = useState(false);
 
   const fetchAll = useCallback(async () => {
     try {
@@ -609,22 +623,50 @@ export function McpTab({ t }: McpTabProps) {
     );
   }
 
+  const m = t.settings?.mcp;
+
   return (
     <div className="space-y-6">
-      {/* MCP Server Status */}
-      <ServerStatus status={mcpStatus} t={t} />
-
-      {/* Divider */}
-      <div className="border-t border-border" />
-
-      {/* Agent Install */}
-      <AgentInstall agents={agents} t={t} onRefresh={fetchAll} />
+      {/* MCP Server Status — prominent card */}
+      <div className="rounded-xl border p-4" style={{ borderColor: 'var(--border)', background: 'var(--card)' }}>
+        <ServerStatus status={mcpStatus} t={t} />
+      </div>
 
-      {/* Divider */}
-      <div className="border-t border-border" />
+      {/* Agent Install — collapsible */}
+      <div className="rounded-xl border overflow-hidden" style={{ borderColor: 'var(--border)' }}>
+        <button
+          type="button"
+          onClick={() => setShowAgents(!showAgents)}
+          className="w-full flex items-center justify-between px-4 py-3 text-sm font-medium hover:bg-muted/50 transition-colors"
+          style={{ color: 'var(--foreground)' }}
+        >
+          <span>{m?.agentsTitle ?? 'Agent Configuration'}</span>
+          <ChevronDown size={14} className={`transition-transform text-muted-foreground ${showAgents ? 'rotate-180' : ''}`} />
+        </button>
+        {showAgents && (
+          <div className="px-4 pb-4 border-t" style={{ borderColor: 'var(--border)' }}>
+            <AgentInstall agents={agents} t={t} onRefresh={fetchAll} />
+          </div>
+        )}
+      </div>
 
-      {/* Skills */}
-      <SkillsSection t={t} />
+      {/* Skills — collapsible */}
+      <div className="rounded-xl border overflow-hidden" style={{ borderColor: 'var(--border)' }}>
+        <button
+          type="button"
+          onClick={() => setShowSkills(!showSkills)}
+          className="w-full flex items-center justify-between px-4 py-3 text-sm font-medium hover:bg-muted/50 transition-colors"
+          style={{ color: 'var(--foreground)' }}
+        >
+          <span>{m?.skillsTitle ?? 'Skills'}</span>
+          <ChevronDown size={14} className={`transition-transform text-muted-foreground ${showSkills ? 'rotate-180' : ''}`} />
+        </button>
+        {showSkills && (
+          <div className="px-4 pb-4 border-t" style={{ borderColor: 'var(--border)' }}>
+            <SkillsSection t={t} />
+          </div>
+        )}
+      </div>
     </div>
   );
 }

package/app/components/settings/Primitives.tsx

@@ -18,7 +18,7 @@ export function Input({ className = '', ...props }: React.InputHTMLAttributes<HT
   return (
     <input
       {...props}
-      className={`w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring disabled:opacity-50 ${className}`}
+      className={`w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 ${className}`}
     />
   );
 }
@@ -27,7 +27,7 @@ export function Select({ className = '', ...props }: React.SelectHTMLAttributes<
   return (
     <select
       {...props}
-      className={`w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground outline-none focus:ring-1 focus:ring-ring disabled:opacity-50 ${className}`}
+      className={`w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 ${className}`}
     />
   );
 }
@@ -53,7 +53,7 @@ export function ApiKeyInput({ value, onChange, placeholder, disabled }: {
       onChange={e => onChange(e.target.value)}
       placeholder={placeholder ?? 'sk-...'}
       disabled={disabled}
-      className="w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring disabled:opacity-50"
+      className="w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
       onFocus={() => { if (isMasked) onChange(''); }}
     />
   );

package/app/components/settings/SyncTab.tsx

@@ -104,7 +104,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
           value={remoteUrl}
           onChange={e => { setRemoteUrl(e.target.value); setError(''); }}
           placeholder="https://github.com/user/my-mind.git"
-          className="w-full px-3 py-2 text-sm rounded-lg border bg-transparent font-mono text-xs transition-colors focus:outline-none focus:ring-1"
+          className="w-full px-3 py-2 text-sm rounded-lg border bg-transparent font-mono text-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           style={{
             borderColor: remoteUrl.trim() && !isValid ? 'var(--destructive, red)' : 'var(--border)',
             color: 'var(--foreground)',
@@ -136,7 +136,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
               value={token}
               onChange={e => setToken(e.target.value)}
               placeholder="ghp_xxxxxxxxxxxx"
-              className="w-full px-3 py-2 pr-9 text-sm rounded-lg border bg-transparent font-mono text-xs transition-colors focus:outline-none focus:ring-1"
+              className="w-full px-3 py-2 pr-9 text-sm rounded-lg border bg-transparent font-mono text-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}
             />
             <button
@@ -163,7 +163,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
           value={branch}
           onChange={e => setBranch(e.target.value)}
           placeholder="main"
-          className="w-full max-w-[200px] px-3 py-2 text-sm rounded-lg border bg-transparent font-mono text-xs transition-colors focus:outline-none focus:ring-1"
+          className="w-full max-w-[200px] px-3 py-2 text-sm rounded-lg border bg-transparent font-mono text-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}
         />
       </div>
@@ -184,7 +184,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
 
       {/* Error */}
       {error && (
-        <div className="flex items-start gap-2 text-xs p-3 rounded-lg" role="alert" aria-live="polite" style={{ background: 'rgba(239,68,68,0.1)', color: 'var(--destructive, red)' }}>
+        <div className="flex items-start gap-2 text-xs p-3 rounded-lg" role="alert" aria-live="polite" style={{ background: 'rgba(200,80,80,0.1)', color: 'var(--error)' }}>
           <AlertCircle size={13} className="shrink-0 mt-0.5" />
           <span>{error}</span>
         </div>
@@ -361,7 +361,7 @@ export function SyncTab({ t }: SyncTabProps) {
           <div className="space-y-1.5">
             {conflicts.map((c, i) => (
               <div key={i} className="flex items-center gap-2 text-xs group">
-                <AlertCircle size={12} className="text-red-500 shrink-0" />
+                <AlertCircle size={12} className="text-error shrink-0" />
                 <a
                   href={`/view/${encodeURIComponent(c.file)}`}
                   className="font-mono truncate hover:text-foreground hover:underline transition-colors"

package/app/lib/i18n.ts

@@ -228,6 +228,8 @@ export const messages = {
         skillLanguage: 'Skill Language',
         skillLangEn: 'English',
         skillLangZh: '中文',
+        selectDetected: 'Select Detected',
+        clearSelection: 'Clear',
       },      save: 'Save',
       saved: 'Saved',
       saveFailed: 'Save failed',
@@ -283,7 +285,11 @@ export const messages = {
       kbPath: 'Knowledge base path',
       kbPathHint: 'Absolute path to your notes directory.',
       kbPathDefault: '~/MindOS/mind',
+      kbPathUseDefault: (path: string) => `Use ${path}`,
       kbPathExists: (n: number) => `Directory already has ${n} file(s) — template will not be applied.`,
+      kbPathHasFiles: (n: number) => `This directory already contains ${n} file${n > 1 ? 's' : ''}. You can skip the template or merge (existing files won't be overwritten).`,
+      kbTemplateSkip: 'Skip template',
+      kbTemplateMerge: 'Choose a template to merge',
       template: 'Starter template',
       templateSkip: 'Skip (directory already has files)',
       // Step 2
@@ -325,7 +331,16 @@ export const messages = {
       agentToolsLoading: 'Loading agents…',
       agentToolsEmpty: 'No supported agents detected.',
       agentNoneSelected: 'No agents selected — you can configure later in Settings → MCP.',
-      agentSkipLater: 'Skip — configure later',
+      agentSkipLater: 'Skip — install agents later in Settings > MCP',
+      agentSelectDetected: 'Select detected agents',
+      agentNoneDetected: 'No agents detected on your system.',
+      agentShowMore: (n: number) => `Show ${n} more agents`,
+      agentAdvanced: 'Advanced options',
+      agentScopeGlobal: 'Install for all projects',
+      agentScopeProject: 'This project only',
+      badgeInstalled: 'Installed',
+      badgeDetected: 'Detected',
+      badgeNotFound: 'Not found',
       agentNotInstalled: 'not installed',
       agentDetected: 'detected',
       agentNotFound: 'not found',
@@ -338,6 +353,7 @@ export const messages = {
       agentUnverified: 'unverified',
       agentVerifyNote: 'stdio agents are verified after restart',
       // Skill auto-install
+      skillWhat: 'Skills teach AI agents how to use your knowledge base — like instructions for reading, writing, and organizing your notes.',
       skillAutoHint: (name: string) => `Based on your template, the "${name}" skill will be installed to selected agents.`,
       skillLabel: 'Skill',
       skillInstalling: 'Installing skill…',
@@ -347,9 +363,15 @@ export const messages = {
       aiSkipTitle: 'Skip for now',
       aiSkipDesc: 'You can add an API key later in Settings → AI.',
       // Step 6 — Review
-      reviewHint: 'Verify your settings before completing setup.',
+      reviewHint: 'Verify your settings, then press Complete Setup.',
       reviewInstallResults: 'Agent configuration results:',
+      phaseSaving: 'Saving configuration…',
+      phaseAgents: 'Configuring agents…',
+      phaseSkill: 'Installing skill…',
+      phaseDone: 'Setup complete!',
       retryAgent: 'Retry',
+      agentFailedCount: (n: number) => `${n} agent${n > 1 ? 's' : ''} failed`,
+      agentCountSummary: (n: number) => `${n} agent${n > 1 ? 's' : ''}`,
       agentFailureNote: 'Agent failures are non-blocking — you can enter MindOS and retry from Settings → MCP.',
       portAvailable: 'Available',
       portChanged: 'Port changed — please restart the server for it to take effect.',
@@ -601,6 +623,8 @@ export const messages = {
         skillLanguage: 'Skill 语言',
         skillLangEn: 'English',
         skillLangZh: '中文',
+        selectDetected: '选择已检测',
+        clearSelection: '清除',
       },      save: '保存',
       saved: '已保存',
       saveFailed: '保存失败',
@@ -656,7 +680,11 @@ export const messages = {
       kbPath: '知识库路径',
       kbPathHint: '笔记目录的绝对路径。',
       kbPathDefault: '~/MindOS/mind',
+      kbPathUseDefault: (path: string) => `使用 ${path}`,
       kbPathExists: (n: number) => `目录已有 ${n} 个文件 — 将不会应用模板。`,
+      kbPathHasFiles: (n: number) => `该目录已有 ${n} 个文件。可以跳过模板，或选择合并（已有文件不会被覆盖）。`,
+      kbTemplateSkip: '跳过模板',
+      kbTemplateMerge: '选择模板合并',
       template: '初始模板',
       templateSkip: '跳过（目录已有文件）',
       // Step 2
@@ -698,7 +726,16 @@ export const messages = {
       agentToolsLoading: '正在加载 Agent…',
       agentToolsEmpty: '未检测到受支持的 Agent。',
       agentNoneSelected: '未选择 agent — 可稍后在 设置 → MCP 中配置。',
-      agentSkipLater: '跳过 — 稍后配置',
+      agentSkipLater: '跳过 — 稍后在 设置 > MCP 中安装',
+      agentSelectDetected: '选择已检测到的 Agent',
+      agentNoneDetected: '未在系统中检测到已安装的 Agent。',
+      agentShowMore: (n: number) => `显示另外 ${n} 个 Agent`,
+      agentAdvanced: '高级选项',
+      agentScopeGlobal: '为所有项目安装',
+      agentScopeProject: '仅当前项目',
+      badgeInstalled: '已安装',
+      badgeDetected: '已检测到',
+      badgeNotFound: '未找到',
       agentNotInstalled: '未安装',
       agentDetected: '已检测到',
       agentNotFound: '未找到',
@@ -711,6 +748,7 @@ export const messages = {
       agentUnverified: '未验证',
       agentVerifyNote: 'stdio agent 需重启后验证',
       // Skill auto-install
+      skillWhat: 'Skill 教 AI Agent 如何使用你的知识库 — 包括笔记的读取、写入和整理规则。',
       skillAutoHint: (name: string) => `根据您选择的模板，将向选中的 Agent 安装「${name}」Skill。`,
       skillLabel: 'Skill',
       skillInstalling: '正在安装 Skill…',
@@ -720,9 +758,15 @@ export const messages = {
       aiSkipTitle: '暂时跳过',
       aiSkipDesc: '稍后可在 设置 → AI 中添加 API 密钥。',
       // Step 6 — Review
-      reviewHint: '完成设置前请确认以下信息。',
+      reviewHint: '确认设置无误后，点击完成。',
       reviewInstallResults: 'Agent 配置结果：',
+      phaseSaving: '正在保存配置…',
+      phaseAgents: '正在配置 Agent…',
+      phaseSkill: '正在安装 Skill…',
+      phaseDone: '设置完成！',
       retryAgent: '重试',
+      agentFailedCount: (n: number) => `${n} 个 Agent 配置失败`,
+      agentCountSummary: (n: number) => `${n} 个 Agent`,
       agentFailureNote: 'Agent 安装失败不影响进入 MindOS — 可稍后在 设置 → MCP 中重试。',
       portAvailable: '可用',
       portChanged: '端口已变更 — 请重启服务以使其生效。',