@geminilight/mindos 0.5.64 → 0.5.66

package/app/components/settings/McpSkillRow.tsx

@@ -51,7 +51,7 @@ export default function SkillRow({
         {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
         <span className="text-xs font-medium flex-1">{skill.name}</span>
         <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' ? 'bg-muted text-muted-foreground' : 'bg-[var(--amber-subtle)] text-[var(--amber)]'
         }`}>
           {skill.source === 'builtin' ? (m?.skillBuiltin ?? 'Built-in') : (m?.skillUser ?? 'Custom')}
         </span>
@@ -106,8 +106,7 @@ export default function SkillRow({
                     <button
                       onClick={() => onEditSave(skill.name)}
                       disabled={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: 'var(--amber-foreground)' }}
+                      className="flex items-center gap-1 px-2.5 py-1 text-xs rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-colors bg-[var(--amber)] text-[var(--amber-foreground)]"
                     >
                       {saving && <Loader2 size={10} className="animate-spin" />}
                       {m?.saveSkill ?? 'Save'}

package/app/components/settings/McpSkillsSection.tsx

@@ -239,7 +239,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
                 onClick={() => handleLangSwitch('en')}
                 disabled={switchingLang}
                 className={`px-2.5 py-1 text-xs transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
-                  currentLang === 'en' ? 'bg-amber-500/15 text-amber-600 font-medium' : 'text-muted-foreground hover:bg-muted'
+                  currentLang === 'en' ? 'bg-[var(--amber-subtle)] text-[var(--amber)] font-medium' : 'text-muted-foreground hover:bg-muted'
                 }`}
               >
                 {m?.skillLangEn ?? 'English'}
@@ -248,7 +248,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
                 onClick={() => handleLangSwitch('zh')}
                 disabled={switchingLang}
                 className={`px-2.5 py-1 text-xs transition-colors disabled:opacity-50 disabled:cursor-not-allowed border-l border-border ${
-                  currentLang === 'zh' ? 'bg-amber-500/15 text-amber-600 font-medium' : 'text-muted-foreground hover:bg-muted'
+                  currentLang === 'zh' ? 'bg-[var(--amber-subtle)] text-[var(--amber)] font-medium' : 'text-muted-foreground hover:bg-muted'
                 }`}
               >
                 {m?.skillLangZh ?? '中文'}

package/app/components/settings/McpTab.tsx

@@ -68,7 +68,7 @@ export function McpTab({ t }: McpTabProps) {
       {/* MCP Config Viewer */}
       {mcp.agents.length > 0 && (
         <div>
-          <h3 className="text-sm font-medium text-foreground mb-3">MCP</h3>
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">MCP</p>
           <AgentConfigViewer
             connectedAgents={connectedAgents}
             detectedAgents={detectedAgents}
@@ -91,13 +91,13 @@ export function McpTab({ t }: McpTabProps) {
 
       {/* Skills */}
       <div>
-        <h3 className="text-sm font-medium text-foreground mb-3">{m?.skillsTitle ?? 'Skills'}</h3>
+        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">{m?.skillsTitle ?? 'Skills'}</p>
         <SkillsSection t={t} />
       </div>
 
       {/* Batch Agent Install */}
       <div>
-        <h3 className="text-sm font-medium text-foreground mb-3">{m?.agentsTitle ?? 'Agent Configuration'}</h3>
+        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">{m?.agentsTitle ?? 'Agent Configuration'}</p>
         <AgentInstall agents={mcp.agents} t={t} onRefresh={mcp.refresh} />
       </div>
     </div>
@@ -119,8 +119,8 @@ function McpStatusCard({ status, restarting, onRestart, onRefresh, m }: {
       <div className="flex items-center gap-2.5 text-xs">
         {restarting ? (
           <>
-            <Loader2 size={12} className="animate-spin" style={{ color: 'var(--amber)' }} />
-            <span style={{ color: 'var(--amber)' }}>{m?.restarting ?? 'Restarting...'}</span>
+            <Loader2 size={12} className="animate-spin text-[var(--amber)]" />
+            <span className="text-[var(--amber)]">{m?.restarting ?? 'Restarting...'}</span>
           </>
         ) : (
           <>
@@ -142,8 +142,7 @@ function McpStatusCard({ status, restarting, onRestart, onRefresh, m }: {
       <div className="flex items-center gap-2">
         {!status.running && !restarting && (
           <button onClick={onRestart}
-            className="flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-lg font-medium text-white transition-colors"
-            style={{ background: 'var(--amber)' }}>
+            className="flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-lg font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors">
             <RotateCcw size={12} /> {m?.restart ?? 'Restart'}
           </button>
         )}
@@ -222,18 +221,18 @@ function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, cu
           {/* Agent status badge */}
           <div className="flex items-center gap-2">
             {currentAgent.present && currentAgent.installed ? (
-              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
-                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block" />
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium bg-success/10 text-success">
+                <span className="w-1.5 h-1.5 rounded-full bg-success inline-block" />
                 {m?.tagConnected ?? 'Connected'}
               </span>
             ) : currentAgent.present && !currentAgent.installed ? (
-              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium" style={{ background: 'var(--amber-subtle, rgba(200,135,58,0.1))', color: 'var(--amber)' }}>
-                <span className="w-1.5 h-1.5 rounded-full inline-block" style={{ background: 'var(--amber)' }} />
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium bg-[var(--amber-subtle)] text-[var(--amber)]">
+                <span className="w-1.5 h-1.5 rounded-full bg-[var(--amber)] inline-block" />
                 {m?.tagDetected ?? 'Detected — not configured'}
               </span>
             ) : (
               <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium bg-muted text-muted-foreground">
-                <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 inline-block" />
+                <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground inline-block" />
                 {m?.tagNotInstalled ?? 'Not installed'}
               </span>
             )}
@@ -267,7 +266,7 @@ function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, cu
 
           {/* Auth warning */}
           {transport === 'http' && mcpStatus && !mcpStatus.authConfigured && (
-            <p className="flex items-center gap-1.5 text-xs" style={{ color: 'var(--amber)' }}>
+            <p className="flex items-center gap-1.5 text-xs text-[var(--amber)]">
               <AlertCircle size={12} />
               {m?.noAuthWarning ?? 'Auth not configured. Run `mindos token` to set up.'}
             </p>

package/app/components/settings/MonitoringTab.tsx

@@ -52,7 +52,7 @@ function ProgressBar({ value, max, className }: { value: number; max: number; cl
   return (
     <div className={`h-2 w-full rounded-full bg-muted ${className ?? ''}`}>
       <div
-        className={`h-full rounded-full transition-all duration-300 ${pct > 85 ? 'bg-destructive' : 'bg-amber-500'}`}
+        className={`h-full rounded-full transition-all duration-300 ${pct > 85 ? 'bg-destructive' : 'bg-[var(--amber)]'}`}
         style={{ width: `${pct}%` }}
       />
     </div>
@@ -125,10 +125,10 @@ export function MonitoringTab({ t }: MonitoringTabProps) {
     <div className="space-y-6">
       {/* System */}
       <section>
-        <h3 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-3">
-          <Cpu size={13} className="text-muted-foreground" />
+        <p className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+          <Cpu size={13} />
           {mon.system || 'System'}
-        </h3>
+        </p>
         <div className="space-y-3">
           <div>
             <div className="flex justify-between text-xs mb-1">
@@ -147,10 +147,10 @@ export function MonitoringTab({ t }: MonitoringTabProps) {
 
       {/* Application */}
       <section>
-        <h3 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-3">
-          <Zap size={13} className="text-muted-foreground" />
+        <p className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+          <Zap size={13} />
           {mon.application || 'Application'}
-        </h3>
+        </p>
         <div className="grid grid-cols-3 gap-4">
           <StatCard label={mon.requests || 'Requests'} value={application.agentRequests} />
           <StatCard label={mon.toolCalls || 'Tool Calls'} value={application.toolExecutions} />
@@ -166,10 +166,10 @@ export function MonitoringTab({ t }: MonitoringTabProps) {
 
       {/* Knowledge Base */}
       <section>
-        <h3 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-3">
-          <Database size={13} className="text-muted-foreground" />
+        <p className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+          <Database size={13} />
           {mon.knowledgeBase || 'Knowledge Base'}
-        </h3>
+        </p>
         <div className="grid grid-cols-3 gap-4">
           <StatCard label={mon.files || 'Files'} value={knowledgeBase.fileCount} />
           <StatCard label={mon.totalSize || 'Total Size'} value={formatBytes(knowledgeBase.totalSizeBytes)} />
@@ -179,10 +179,10 @@ export function MonitoringTab({ t }: MonitoringTabProps) {
 
       {/* MCP */}
       <section>
-        <h3 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-3">
-          <HardDrive size={13} className="text-muted-foreground" />
+        <p className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+          <HardDrive size={13} />
           MCP
-        </h3>
+        </p>
         <div className="grid grid-cols-3 gap-4">
           <StatCard
             label={mon.mcpStatus || 'Status'}

package/app/components/settings/PluginsTab.tsx

@@ -8,7 +8,7 @@ import type { PluginsTabProps } from './types';
 export function PluginsTab({ pluginStates, setPluginStates, t }: PluginsTabProps) {
   const renderers = getPluginRenderers();
   return (
-    <div className="space-y-5">
+    <div className="space-y-6">
       <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">{t.settings.plugins.title}</p>
 
       {renderers.length === 0 ? (
@@ -30,7 +30,7 @@ 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-2xs 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-[var(--amber-subtle)] text-[var(--amber)] font-mono">
                             core
                           </span>
                         )}

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-2xs 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-[var(--amber-subtle)] text-[var(--amber)] font-mono ml-1.5">env</span>
   );
 }
 
@@ -72,7 +72,7 @@ export function Toggle({ checked, onChange, size = 'md', disabled, title, onClic
       onClick={onClick ?? (() => onChange?.(!checked))}
       className={`relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 ${
         sm ? 'h-4 w-7' : 'h-5 w-9'
-      } ${checked ? 'bg-amber-500' : 'bg-muted'}`}
+      } ${checked ? 'bg-[var(--amber)]' : 'bg-muted'}`}
     >
       <span
         className={`pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform ${
@@ -119,8 +119,7 @@ export function PrimaryButton({ children, disabled, onClick, type = 'button', cl
       type={type}
       onClick={onClick}
       disabled={disabled}
-      className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${className}`}
-      style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+      className={`px-4 py-2 text-sm font-medium rounded-lg bg-[var(--amber)] text-[var(--amber-foreground)] transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${className}`}
       {...props}
     >
       {children}

package/app/components/settings/SettingsContent.tsx

@@ -245,7 +245,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
               onClick={() => setTab(tabItem.id)}
               className={`flex items-center gap-1 px-2 py-2 text-[11px] font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
                 tab === tabItem.id
-                  ? 'border-amber-500 text-foreground'
+                  ? 'border-[var(--amber)] text-foreground'
                   : 'border-transparent text-muted-foreground hover:text-foreground'
               }`}
             >
@@ -296,7 +296,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
               onClick={() => setTab(tabItem.id)}
               className={`flex items-center gap-1.5 px-3 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
                 tab === tabItem.id
-                  ? 'border-amber-500 text-foreground'
+                  ? 'border-[var(--amber)] text-foreground'
                   : 'border-transparent text-muted-foreground hover:text-foreground'
               }`}
             >
@@ -330,7 +330,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
                 }`}
               >
                 {tab === tabItem.id && (
-                  <div className="absolute left-0 top-1 bottom-1 w-[3px] rounded-r-full bg-amber-500" />
+                  <div className="absolute left-0 top-1 bottom-1 w-[3px] rounded-r-full bg-[var(--amber)]" />
                 )}
                 {tabItem.icon}
                 {tabItem.label}

package/app/components/settings/SyncTab.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { RefreshCw, AlertCircle, CheckCircle2, Loader2, GitBranch, ExternalLink, Eye, EyeOff } from 'lucide-react';
-import { SectionLabel, PrimaryButton } from './Primitives';
+import { SectionLabel, PrimaryButton, Input } from './Primitives';
 import { apiFetch } from '@/lib/api';
 import type { SyncStatus, SyncTabProps } from './types';
 import type { Messages } from '@/lib/i18n';
@@ -64,7 +64,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: Messages; onInitComplete: ()
   };
 
   return (
-    <div className="space-y-5">
+    <div className="space-y-6">
       {/* Header */}
       <div className="flex items-center gap-3">
         <div className="w-9 h-9 rounded-lg bg-muted flex items-center justify-center shrink-0">
@@ -85,19 +85,15 @@ function SyncEmptyState({ t, onInitComplete }: { t: Messages; onInitComplete: ()
         <label className="text-xs font-medium text-foreground block">
           {syncT?.remoteUrl ?? 'Git Remote URL'}
         </label>
-        <input
+        <Input
           type="text"
           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-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          style={{
-            borderColor: remoteUrl.trim() && !isValid ? 'var(--destructive, red)' : 'var(--border)',
-            color: 'var(--foreground)',
-          }}
+          className={`font-mono ${remoteUrl.trim() && !isValid ? 'border-destructive' : ''}`}
         />
         {remoteUrl.trim() && !isValid && (
-          <p className="text-xs" style={{ color: 'var(--destructive, red)' }}>
+          <p className="text-xs text-destructive">
             {syncT?.invalidUrl ?? 'Invalid Git URL — use HTTPS (https://...) or SSH (git@...)'}
           </p>
         )}
@@ -117,13 +113,12 @@ function SyncEmptyState({ t, onInitComplete }: { t: Messages; onInitComplete: ()
             <span className="text-muted-foreground font-normal">{syncT?.optional ?? '(optional, for private repos)'}</span>
           </label>
           <div className="relative">
-            <input
+            <Input
               type={showToken ? 'text' : 'password'}
               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-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-              style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}
+              className="pr-9 font-mono"
             />
             <button
               type="button"
@@ -144,13 +139,12 @@ function SyncEmptyState({ t, onInitComplete }: { t: Messages; onInitComplete: ()
         <label className="text-xs font-medium text-foreground block">
           {syncT?.branchLabel ?? 'Branch'}
         </label>
-        <input
+        <Input
           type="text"
           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-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}
+          className="max-w-[200px] font-mono"
         />
       </div>
 
@@ -168,7 +162,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: Messages; onInitComplete: ()
 
       {/* Error */}
       {error && (
-        <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)' }}>
+        <div className="flex items-start gap-2 text-xs p-3 rounded-lg bg-destructive/10 text-destructive" role="alert" aria-live="polite">
           <AlertCircle size={13} className="shrink-0 mt-0.5" />
           <span>{error}</span>
         </div>
@@ -269,7 +263,7 @@ export function SyncTab({ t }: SyncTabProps) {
   const conflicts = status.conflicts || [];
 
   return (
-    <div className="space-y-5">
+    <div className="space-y-6">
       <SectionLabel>Sync</SectionLabel>
 
       {/* Status overview */}

package/app/components/settings/UpdateTab.tsx

@@ -57,7 +57,7 @@ function StageIcon({ status }: { status: string }) {
     case 'done':
       return <CheckCircle2 size={14} className="text-success shrink-0" />;
     case 'running':
-      return <Loader2 size={14} className="animate-spin shrink-0" style={{ color: 'var(--amber)' }} />;
+      return <Loader2 size={14} className="animate-spin shrink-0 text-[var(--amber)]" />;
     case 'failed':
       return <AlertCircle size={14} className="text-destructive shrink-0" />;
     default:
@@ -119,7 +119,7 @@ function DesktopUpdateTab() {
   };
 
   return (
-    <div className="space-y-5">
+    <div className="space-y-6">
       <div className="rounded-xl border border-border bg-card p-4 space-y-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
@@ -137,14 +137,14 @@ function DesktopUpdateTab() {
         )}
 
         {state === 'idle' && !available && (
-          <div className="flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400">
+          <div className="flex items-center gap-2 text-xs text-success">
             <CheckCircle2 size={13} />
             {u?.upToDate ?? "You're up to date"}
           </div>
         )}
 
         {state === 'idle' && available && (
-          <div className="flex items-center gap-2 text-xs" style={{ color: 'var(--amber)' }}>
+          <div className="flex items-center gap-2 text-xs text-[var(--amber)]">
             <Download size={13} />
             {version ? `Update available: v${version}` : 'Update available'}
           </div>
@@ -153,20 +153,20 @@ function DesktopUpdateTab() {
         {state === 'downloading' && (
           <div className="space-y-2">
             <div className="flex items-center gap-2 text-xs text-foreground">
-              <Loader2 size={13} className="animate-spin" style={{ color: 'var(--amber)' }} />
+              <Loader2 size={13} className="animate-spin text-[var(--amber)]" />
               {u?.desktopDownloading ?? 'Downloading update...'}
             </div>
             <div className="h-1 rounded-full bg-muted overflow-hidden">
               <div
-                className="h-full rounded-full transition-all duration-300"
-                style={{ width: `${Math.max(progress, 3)}%`, background: 'var(--amber)' }}
+                className="h-full rounded-full bg-[var(--amber)] transition-all duration-300"
+                style={{ width: `${Math.max(progress, 3)}%` }}
               />
             </div>
           </div>
         )}
 
         {state === 'ready' && (
-          <div className="flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400">
+          <div className="flex items-center gap-2 text-xs text-success">
             <CheckCircle2 size={13} />
             {u?.desktopReady ?? 'Update downloaded. Restart to apply.'}
           </div>
@@ -193,8 +193,7 @@ function DesktopUpdateTab() {
         {state === 'idle' && available && (
           <button
             onClick={handleInstall}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-medium text-white transition-colors"
-            style={{ background: 'var(--amber)' }}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors"
           >
             <Download size={12} />
             {version ? `Update to v${version}` : 'Update'}
@@ -204,8 +203,7 @@ function DesktopUpdateTab() {
         {state === 'ready' && (
           <button
             onClick={() => bridge.installUpdate()}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-medium text-white transition-colors"
-            style={{ background: 'var(--amber)' }}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors"
           >
             <RefreshCw size={12} />
             {u?.desktopRestart ?? 'Restart Now'}
@@ -401,7 +399,7 @@ function BrowserUpdateTab() {
   const progress = stages.length > 0 ? Math.round((doneCount / stages.length) * 100) : 0;
 
   return (
-    <div className="space-y-5">
+    <div className="space-y-6">
       {/* Version Card */}
       <div className="rounded-xl border border-border bg-card p-4 space-y-3">
         <div className="flex items-center justify-between">
@@ -419,14 +417,14 @@ function BrowserUpdateTab() {
         )}
 
         {state === 'idle' && info && !info.hasUpdate && (
-          <div className="flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400">
+          <div className="flex items-center gap-2 text-xs text-success">
             <CheckCircle2 size={13} />
             {u?.upToDate ?? "You're up to date"}
           </div>
         )}
 
         {state === 'idle' && info?.hasUpdate && (
-          <div className="flex items-center gap-2 text-xs" style={{ color: 'var(--amber)' }}>
+          <div className="flex items-center gap-2 text-xs text-[var(--amber)]">
             <Download size={13} />
             {u?.available ? u.available(info.current, info.latest) : `Update available: v${info.current} → v${info.latest}`}
           </div>
@@ -449,8 +447,8 @@ function BrowserUpdateTab() {
             {/* Progress bar */}
             <div className="h-1 rounded-full bg-muted overflow-hidden">
               <div
-                className="h-full rounded-full transition-all duration-500 ease-out"
-                style={{ width: `${Math.max(progress, 5)}%`, background: 'var(--amber)' }}
+                className="h-full rounded-full bg-[var(--amber)] transition-all duration-500 ease-out"
+                style={{ width: `${Math.max(progress, 5)}%` }}
               />
             </div>
 
@@ -463,7 +461,7 @@ function BrowserUpdateTab() {
         )}
 
         {state === 'updated' && (
-          <div className="flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400">
+          <div className="flex items-center gap-2 text-xs text-success">
             <CheckCircle2 size={13} />
             {u?.updated ?? 'Updated successfully! Reloading...'}
           </div>
@@ -471,7 +469,7 @@ function BrowserUpdateTab() {
 
         {state === 'timeout' && (
           <div className="space-y-2">
-            <div className="flex items-center gap-2 text-xs text-amber-600 dark:text-amber-400">
+            <div className="flex items-center gap-2 text-xs text-[var(--amber)]">
               <AlertCircle size={13} />
               {u?.timeout ?? 'Update may still be in progress.'}
             </div>
@@ -521,8 +519,7 @@ function BrowserUpdateTab() {
         {info?.hasUpdate && state !== 'updating' && state !== 'updated' && (
           <button
             onClick={handleUpdate}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-medium text-white transition-colors"
-            style={{ background: 'var(--amber)' }}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors"
           >
             <Download size={12} />
             {u?.updateButton ? u.updateButton(info.latest) : `Update to v${info.latest}`}

package/app/components/settings/types.ts

@@ -79,6 +79,20 @@ export interface AgentInfo {
   globalNestedKey?: string;
   globalPath: string;
   projectPath?: string | null;
+  skillMode?: 'universal' | 'additional' | 'unsupported';
+  skillAgentName?: string;
+  skillWorkspacePath?: string;
+  hiddenRootPath?: string;
+  hiddenRootPresent?: boolean;
+  runtimeConversationSignal?: boolean;
+  runtimeUsageSignal?: boolean;
+  runtimeLastActivityAt?: string;
+  configuredMcpServers?: string[];
+  configuredMcpServerCount?: number;
+  configuredMcpSources?: string[];
+  installedSkillNames?: string[];
+  installedSkillCount?: number;
+  installedSkillSourcePath?: string;
 }
 
 export interface SkillInfo {

package/app/components/setup/StepKB.tsx

@@ -61,7 +61,7 @@ export default function StepKB({ state, update, t, homeDir }: StepKBProps) {
           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));
+          setSuggestions(filtered.slice(0, 20));
           setShowSuggestions(filtered.length > 0);
           setActiveSuggestion(-1);
         })

package/app/hooks/useMcpData.tsx

@@ -12,7 +12,7 @@ export interface McpContextValue {
   skills: SkillInfo[];
   loading: boolean;
   refresh: () => Promise<void>;
-  toggleSkill: (name: string, enabled: boolean) => Promise<void>;
+  toggleSkill: (name: string, enabled: boolean) => Promise<boolean>;
   installAgent: (key: string, opts?: { scope?: string; transport?: string }) => Promise<boolean>;
 }
 
@@ -108,7 +108,7 @@ export default function McpProvider({ children }: { children: ReactNode }) {
     await fetchAll();
   }, [fetchAll]);
 
-  const toggleSkill = useCallback(async (name: string, enabled: boolean) => {
+  const toggleSkill = useCallback(async (name: string, enabled: boolean): Promise<boolean> => {
     // Optimistic update
     setSkills(prev => prev.map(s => s.name === name ? { ...s, enabled } : s));
     try {
@@ -117,9 +117,11 @@ export default function McpProvider({ children }: { children: ReactNode }) {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ action: 'toggle', name, enabled }),
       });
+      return true;
     } catch {
       // Revert on failure
       setSkills(prev => prev.map(s => s.name === name ? { ...s, enabled: !enabled } : s));
+      return false;
     }
   }, []);
 

package/app/hooks/useMention.ts

@@ -2,21 +2,30 @@
 
 import { useState, useCallback, useEffect } from 'react';
 
+function safeFetchFiles(): Promise<string[]> {
+  return fetch('/api/files')
+    .then((r) => (r.ok ? r.json() : []))
+    .then((data) => (Array.isArray(data) ? data : []))
+    .catch(() => [] as string[]);
+}
+
 export function useMention() {
   const [allFiles, setAllFiles] = useState<string[]>([]);
   const [mentionQuery, setMentionQuery] = useState<string | null>(null);
   const [mentionResults, setMentionResults] = useState<string[]>([]);
   const [mentionIndex, setMentionIndex] = useState(0);
 
-  // Load file list once
-  useEffect(() => {
-    fetch('/api/files')
-      .then((r) => r.json())
-      .then(setAllFiles)
-      .catch(() => {});
+  const loadFiles = useCallback(() => {
+    safeFetchFiles().then(setAllFiles);
   }, []);
 
-  /** Parse @-mention from input text; returns updated input if a mention was selected. */
+  useEffect(() => {
+    loadFiles();
+    const handler = () => loadFiles();
+    window.addEventListener('mindos:files-changed', handler);
+    return () => window.removeEventListener('mindos:files-changed', handler);
+  }, [loadFiles]);
+
   const updateMentionFromInput = useCallback(
     (val: string) => {
       const atIdx = val.lastIndexOf('@');
@@ -30,8 +39,15 @@ export function useMention() {
         return;
       }
       const query = val.slice(atIdx + 1).toLowerCase();
+      const filtered = allFiles.filter((f) => f.toLowerCase().includes(query)).slice(0, 30);
+      if (filtered.length === 0) {
+        setMentionQuery(null);
+        setMentionResults([]);
+        setMentionIndex(0);
+        return;
+      }
       setMentionQuery(query);
-      setMentionResults(allFiles.filter((f) => f.toLowerCase().includes(query)).slice(0, 8));
+      setMentionResults(filtered);
       setMentionIndex(0);
     },
     [allFiles],
@@ -39,6 +55,7 @@ export function useMention() {
 
   const navigateMention = useCallback(
     (direction: 'up' | 'down') => {
+      if (mentionResults.length === 0) return;
       if (direction === 'down') {
         setMentionIndex((i) => Math.min(i + 1, mentionResults.length - 1));
       } else {