@geminilight/mindos 0.5.64 → 0.5.65

package/app/components/panels/AgentsPanel.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import { useState } from 'react';
-import { Loader2, RefreshCw, ChevronDown, ChevronRight, Settings } from 'lucide-react';
+import { usePathname } from 'next/navigation';
+import { Loader2, RefreshCw, Settings } from 'lucide-react';
 import { useMcpData } from '@/hooks/useMcpData';
 import { useLocale } from '@/lib/LocaleContext';
-import { Toggle } from '../settings/Primitives';
-import type { SkillInfo } from '../settings/types';
 import PanelHeader from './PanelHeader';
 import { AgentsPanelHubNav } from './AgentsPanelHubNav';
 import { AgentsPanelAgentGroups } from './AgentsPanelAgentGroups';
@@ -14,9 +13,7 @@ interface AgentsPanelProps {
   active: boolean;
   maximized?: boolean;
   onMaximize?: () => void;
-  /** Highlights the row for the agent whose detail is open in the right dock. */
   selectedAgentKey?: string | null;
-  onOpenAgentDetail?: (key: string) => void;
 }
 
 export default function AgentsPanel({
@@ -24,14 +21,13 @@ export default function AgentsPanel({
   maximized,
   onMaximize,
   selectedAgentKey = null,
-  onOpenAgentDetail,
 }: AgentsPanelProps) {
   const { t } = useLocale();
   const p = t.panels.agents;
   const mcp = useMcpData();
+  const pathname = usePathname();
   const [refreshing, setRefreshing] = useState(false);
   const [showNotDetected, setShowNotDetected] = useState(false);
-  const [showBuiltinSkills, setShowBuiltinSkills] = useState(false);
 
   const handleRefresh = async () => {
     setRefreshing(true);
@@ -47,15 +43,17 @@ export default function AgentsPanel({
   const detected = mcp.agents.filter(a => a.present && !a.installed);
   const notFound = mcp.agents.filter(a => !a.present);
 
-  const customSkills = mcp.skills.filter(s => s.source === 'user');
-  const builtinSkills = mcp.skills.filter(s => s.source === 'builtin');
-  const activeSkillCount = mcp.skills.filter(s => s.enabled).length;
   const installAgentWithRefresh = async (key: string) => {
     const ok = await mcp.installAgent(key);
     if (ok) await mcp.refresh();
     return ok;
   };
 
+  const routeSelectedAgentKey = pathname?.startsWith('/agents/')
+    ? decodeURIComponent(pathname.slice('/agents/'.length))
+    : null;
+  const effectiveSelectedAgentKey = routeSelectedAgentKey ?? selectedAgentKey;
+
   const listCopy = {
     installing: p.installing,
     install: p.install,
@@ -108,28 +106,13 @@ export default function AgentsPanel({
           <div className="flex flex-col gap-2 py-4 px-0">
             {hub}
             <div className="mx-4 border-t border-border" />
-            <div className="mx-3 rounded-lg border border-border bg-card/50 px-3 py-2.5 flex items-center justify-between">
-              <span className="text-xs font-medium text-foreground">{p.mcpServer}</span>
-              {mcp.status?.running ? (
-                <span className="flex items-center gap-1.5 text-[11px]">
-                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block" />
-                  <span className="text-emerald-600 dark:text-emerald-400">:{mcp.status.port}</span>
-                  <span className="text-muted-foreground">· {mcp.status.toolCount} tools</span>
-                </span>
-              ) : (
-                <span className="flex items-center gap-1.5 text-[11px]">
-                  <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 inline-block" />
-                  <span className="text-muted-foreground">{p.stopped}</span>
-                </span>
-              )}
-            </div>
-            <div className="mx-3 rounded-lg border border-dashed border-border px-3 py-3 text-center">
-              <p className="text-xs text-muted-foreground mb-2">{p.noAgents}</p>
+            <div className="mx-3 rounded-lg border border-dashed border-border px-3 py-4 text-center">
+              <p className="text-xs text-muted-foreground mb-1.5">{p.noAgents}</p>
               <p className="text-2xs text-muted-foreground mb-3">{p.skillsEmptyHint}</p>
               <button
                 onClick={handleRefresh}
                 type="button"
-                className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <RefreshCw size={11} /> {p.retry}
               </button>
@@ -142,28 +125,11 @@ export default function AgentsPanel({
             <div className="mx-4 border-t border-border" />
 
             <div className="px-3 py-3 space-y-4">
-              <div className="rounded-lg border border-border bg-card/50 px-3 py-2.5 flex items-center justify-between">
-                <span className="text-xs font-medium text-foreground">{p.mcpServer}</span>
-                {mcp.status?.running ? (
-                  <span className="flex items-center gap-1.5 text-[11px]">
-                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block" />
-                    <span className="text-emerald-600 dark:text-emerald-400">:{mcp.status.port}</span>
-                    <span className="text-muted-foreground">· {mcp.status.toolCount} tools</span>
-                  </span>
-                ) : (
-                  <span className="flex items-center gap-1.5 text-[11px]">
-                    <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 inline-block" />
-                    <span className="text-muted-foreground">{p.stopped}</span>
-                  </span>
-                )}
-              </div>
-
               <AgentsPanelAgentGroups
                 connected={connected}
                 detected={detected}
                 notFound={notFound}
-                onOpenDetail={onOpenAgentDetail}
-                selectedAgentKey={selectedAgentKey}
+                selectedAgentKey={effectiveSelectedAgentKey}
                 listCopy={listCopy}
                 onInstallAgent={installAgentWithRefresh}
                 showNotDetected={showNotDetected}
@@ -175,55 +141,6 @@ export default function AgentsPanel({
                   sectionNotDetected: p.sectionNotDetected,
                 }}
               />
-
-              <section>
-                {mcp.skills.length > 0 ? (
-                  <>
-                    <div className="flex items-center justify-between mb-2">
-                      <h3 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider">
-                        {p.skillsTitle} <span className="normal-case font-normal">{activeSkillCount} {p.skillsActive}</span>
-                      </h3>
-                      <button
-                        type="button"
-                        onClick={openAdvancedConfig}
-                        className="text-2xs text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
-                      >
-                        {p.newSkill}
-                      </button>
-                    </div>
-
-                    {customSkills.length > 0 && (
-                      <div className="space-y-0.5 mb-2">
-                        {customSkills.map(skill => (
-                          <SkillRow key={skill.name} skill={skill} onToggle={mcp.toggleSkill} />
-                        ))}
-                      </div>
-                    )}
-
-                    {builtinSkills.length > 0 && (
-                      <>
-                        <button
-                          type="button"
-                          onClick={() => setShowBuiltinSkills(!showBuiltinSkills)}
-                          className="flex items-center gap-1 text-2xs text-muted-foreground hover:text-foreground transition-colors mb-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
-                        >
-                          {showBuiltinSkills ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
-                          {p.builtinSkills} ({builtinSkills.length})
-                        </button>
-                        {showBuiltinSkills && (
-                          <div className="space-y-0.5">
-                            {builtinSkills.map(skill => (
-                              <SkillRow key={skill.name} skill={skill} onToggle={mcp.toggleSkill} />
-                            ))}
-                          </div>
-                        )}
-                      </>
-                    )}
-                  </>
-                ) : (
-                  <p className="text-2xs text-muted-foreground py-1">{p.skillsEmptyHint}</p>
-                )}
-              </section>
             </div>
           </div>
         )}
@@ -242,12 +159,3 @@ export default function AgentsPanel({
     </div>
   );
 }
-
-function SkillRow({ skill, onToggle }: { skill: SkillInfo; onToggle: (name: string, enabled: boolean) => void }) {
-  return (
-    <div className="flex items-center justify-between gap-2 px-2 py-1.5 rounded-md hover:bg-muted/30 transition-colors">
-      <span className="text-xs text-foreground truncate">{skill.name}</span>
-      <Toggle size="sm" checked={skill.enabled} onChange={v => onToggle(skill.name, v)} />
-    </div>
-  );
-}

package/app/components/panels/AgentsPanelAgentDetail.tsx

@@ -77,7 +77,7 @@ export default function AgentsPanelAgentDetail({
   };
 
   const dot =
-    agentStatus === 'connected' ? 'bg-emerald-500' : agentStatus === 'detected' ? 'bg-amber-500' : 'bg-zinc-400';
+    agentStatus === 'connected' ? 'bg-[var(--success)]' : agentStatus === 'detected' ? 'bg-[var(--amber)]' : 'bg-muted-foreground';
 
   return (
     <div className="flex flex-col h-full min-h-0">
@@ -125,7 +125,7 @@ export default function AgentsPanelAgentDetail({
             </button>
             {result && (
               <span
-                className={`flex items-center gap-1 text-2xs ${result.type === 'success' ? 'text-emerald-600 dark:text-emerald-400' : 'text-destructive'}`}
+                className={`flex items-center gap-1 text-2xs ${result.type === 'success' ? 'text-success' : 'text-destructive'}`}
               >
                 {result.type === 'success' ? <CheckCircle2 size={12} /> : <AlertCircle size={12} />}
                 {result.text}

package/app/components/panels/AgentsPanelAgentGroups.tsx

@@ -15,7 +15,6 @@ export function AgentsPanelAgentGroups({
   connected,
   detected,
   notFound,
-  onOpenDetail,
   selectedAgentKey,
   onInstallAgent,
   listCopy,
@@ -26,7 +25,6 @@ export function AgentsPanelAgentGroups({
   connected: AgentInfo[];
   detected: AgentInfo[];
   notFound: AgentInfo[];
-  onOpenDetail?: (key: string) => void;
   selectedAgentKey?: string | null;
   onInstallAgent: (key: string) => Promise<boolean>;
   listCopy: AgentsPanelAgentListRowCopy;
@@ -34,8 +32,6 @@ export function AgentsPanelAgentGroups({
   setShowNotDetected: (v: boolean | ((prev: boolean) => boolean)) => void;
   p: AgentsCopy;
 }) {
-  const open = onOpenDetail ?? (() => {});
-
   return (
     <div>
       <div className="px-0 py-1 mb-0.5">
@@ -53,7 +49,7 @@ export function AgentsPanelAgentGroups({
                 agent={agent}
                 agentStatus="connected"
                 selected={selectedAgentKey === agent.key}
-                onOpenDetail={() => open(agent.key)}
+                detailHref={`/agents/${encodeURIComponent(agent.key)}`}
                 onInstallAgent={onInstallAgent}
                 copy={listCopy}
               />
@@ -74,7 +70,7 @@ export function AgentsPanelAgentGroups({
                 agent={agent}
                 agentStatus="detected"
                 selected={selectedAgentKey === agent.key}
-                onOpenDetail={() => open(agent.key)}
+                detailHref={`/agents/${encodeURIComponent(agent.key)}`}
                 onInstallAgent={onInstallAgent}
                 copy={listCopy}
               />
@@ -101,7 +97,7 @@ export function AgentsPanelAgentGroups({
                   agent={agent}
                   agentStatus="notFound"
                   selected={selectedAgentKey === agent.key}
-                  onOpenDetail={() => open(agent.key)}
+                  detailHref={`/agents/${encodeURIComponent(agent.key)}`}
                   onInstallAgent={onInstallAgent}
                   copy={listCopy}
                 />

package/app/components/panels/AgentsPanelAgentListRow.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
 import { Check, ChevronRight, Loader2, RotateCw } from 'lucide-react';
 import type { AgentInfo } from '../settings/types';
+import { AgentAvatar } from '../agents/AgentsPrimitives';
 
 export type AgentsPanelAgentListStatus = 'connected' | 'detected' | 'notFound';
 
@@ -18,20 +20,17 @@ export default function AgentsPanelAgentListRow({
   agent,
   agentStatus,
   selected = false,
-  onOpenDetail,
+  detailHref,
   onInstallAgent,
   copy,
 }: {
   agent: AgentInfo;
   agentStatus: AgentsPanelAgentListStatus;
   selected?: boolean;
-  onOpenDetail: () => void;
+  detailHref: string;
   onInstallAgent: (key: string) => Promise<boolean>;
   copy: AgentsPanelAgentListRowCopy;
 }) {
-  const dot =
-    agentStatus === 'connected' ? 'bg-emerald-500' : agentStatus === 'detected' ? 'bg-amber-500' : 'bg-zinc-400';
-
   return (
     <div
       className={`
@@ -41,12 +40,11 @@ export default function AgentsPanelAgentListRow({
           : 'border-border/70 bg-card/50 hover:border-border hover:bg-muted/25'}
       `}
     >
-      <button
-        type="button"
-        onClick={onOpenDetail}
-        className="flex flex-1 min-w-0 items-center gap-2.5 text-left rounded-xl pl-3 pr-2 py-2.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      <Link
+        href={detailHref}
+        className="flex flex-1 min-w-0 items-center gap-2.5 text-left rounded-xl pl-2.5 pr-2 py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       >
-        <span className={`w-2 h-2 rounded-full shrink-0 ring-2 ring-background ${dot}`} />
+        <AgentAvatar name={agent.name} status={agentStatus} size="sm" />
         <span className="text-sm font-medium text-foreground truncate leading-tight">{agent.name}</span>
         {agentStatus === 'connected' && agent.transport && (
           <span className="text-2xs font-mono tabular-nums px-1.5 py-0.5 rounded-md bg-muted/90 text-muted-foreground shrink-0 border border-border/50">
@@ -59,7 +57,7 @@ export default function AgentsPanelAgentListRow({
           className={`shrink-0 transition-opacity duration-150 ${selected ? 'text-[var(--amber)] opacity-90' : 'text-muted-foreground/45 group-hover:text-muted-foreground/80'}`}
           aria-hidden
         />
-      </button>
+      </Link>
 
       {agentStatus === 'detected' && (
         <div className="pr-2 py-2 shrink-0">

package/app/components/panels/EchoPanel.tsx

@@ -19,27 +19,25 @@ export default function EchoPanel({ active, maximized, onMaximize }: EchoPanelPr
   const e = t.panels.echo;
   const pathname = usePathname() ?? '';
 
-  const rowBySegment: Record<EchoSegment, { icon: ReactNode; title: string }> = {
-    'about-you': { icon: <UserRound size={14} />, title: e.aboutYouTitle },
-    continued: { icon: <Bookmark size={14} />, title: e.continuedTitle },
-    daily: { icon: <Sun size={14} />, title: e.dailyEchoTitle },
-    'past-you': { icon: <History size={14} />, title: e.pastYouTitle },
-    growth: { icon: <Brain size={14} />, title: e.intentGrowthTitle },
+  const rowBySegment: Record<EchoSegment, { icon: ReactNode; title: string; subtitle: string }> = {
+    'about-you': { icon: <UserRound size={14} />, title: e.aboutYouTitle, subtitle: e.aboutYouDesc },
+    continued: { icon: <Bookmark size={14} />, title: e.continuedTitle, subtitle: e.continuedDesc },
+    daily: { icon: <Sun size={14} />, title: e.dailyEchoTitle, subtitle: e.dailyDesc },
+    'past-you': { icon: <History size={14} />, title: e.pastYouTitle, subtitle: e.pastYouDesc },
+    growth: { icon: <Brain size={14} />, title: e.intentGrowthTitle, subtitle: e.growthDesc },
   };
 
   return (
     <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
       <PanelHeader title={e.title} maximized={maximized} onMaximize={onMaximize} />
       <div className="flex-1 overflow-y-auto min-h-0">
-        <div className="flex flex-col py-1">
+        <div className="flex flex-col gap-0.5 py-1.5">
           {ECHO_SEGMENT_ORDER.map((segment) => {
             const row = rowBySegment[segment];
             const href = ECHO_SEGMENT_HREF[segment];
             const isActive = pathname === href || pathname.startsWith(`${href}/`);
             return (
-              <div key={segment} className="border-b border-border/60 last:border-b-0">
-                <PanelNavRow href={href} icon={row.icon} title={row.title} active={isActive} />
-              </div>
+              <PanelNavRow key={segment} href={href} icon={row.icon} title={row.title} subtitle={row.subtitle} active={isActive} />
             );
           })}
         </div>

package/app/components/panels/PanelNavRow.tsx

@@ -5,10 +5,11 @@ import Link from 'next/link';
 import { ChevronRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
-/** Row matching Discover panel nav: icon tile, title, optional badge, chevron. */
+/** Row matching Discover panel nav: icon tile, title, optional subtitle, optional badge, chevron. */
 export function PanelNavRow({
   icon,
   title,
+  subtitle,
   badge,
   href,
   onClick,
@@ -16,6 +17,7 @@ export function PanelNavRow({
 }: {
   icon: ReactNode;
   title: string;
+  subtitle?: string;
   badge?: React.ReactNode;
   href?: string;
   onClick?: () => void;
@@ -25,7 +27,12 @@ export function PanelNavRow({
   const content = (
     <>
       <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted">{icon}</span>
-      <span className="flex-1 text-left text-sm font-medium text-foreground">{title}</span>
+      <span className="flex-1 min-w-0">
+        <span className="block text-left text-sm font-medium text-foreground truncate">{title}</span>
+        {subtitle ? (
+          <span className="block text-left text-2xs text-muted-foreground truncate">{subtitle}</span>
+        ) : null}
+      </span>
       {badge}
       <ChevronRight size={14} className="shrink-0 text-muted-foreground" />
     </>

package/app/components/panels/PluginsPanel.tsx

@@ -142,12 +142,12 @@ export default function PluginsPanel({ active, maximized, onMaximize }: PluginsP
                   </span>
                 ))}
                 {r.entryPath && enabled && !fileExists && (
-                  <span className="text-2xs" style={{ color: 'var(--amber)' }}>
+                  <span className="text-2xs text-[var(--amber)]">
                     {(p.createFile ?? 'Create {file}').replace('{file}', r.entryPath)}
                   </span>
                 )}
                 {canOpen && (
-                  <span className="text-2xs" style={{ color: 'var(--amber)' }}>
+                  <span className="text-2xs text-[var(--amber)]">
                     → {r.entryPath}
                   </span>
                 )}

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

@@ -6,13 +6,13 @@ import { Terminal, FileEdit, FilePlus, Trash2, Search, Clock, ChevronDown, Alert
 import type { RendererContext } from '@/lib/renderers/registry';
 
 // ─── Log entry format ─────────────────────────────────────────────────────────
-// Each entry is a fenced JSON block in the markdown:
+// Primary format:
+// {
+//   "version": 1,
+//   "events": [{ "ts": "...", "tool": "mindos_write_file", "params": {}, "result": "ok" }]
+// }
 //
-// ```agent-op
-// { "ts": "2025-01-15T10:30:00Z", "tool": "mindos_write_file",
-//   "params": { "path": "...", "content": "..." },
-//   "result": "ok" | "error", "message": "..." }
-// ```
+// Legacy format (still supported for compatibility): JSON Lines.
 
 interface AgentOp {
   ts: string;
@@ -22,9 +22,14 @@ interface AgentOp {
   message?: string;
 }
 
+interface AgentAuditState {
+  version?: number;
+  events?: AgentOp[];
+}
+
 // ─── Parser ───────────────────────────────────────────────────────────────────
 
-function parseOps(content: string): AgentOp[] {
+function parseJsonLines(content: string): AgentOp[] {
   const ops: AgentOp[] = [];
 
   // JSON Lines format: each line is a JSON object
@@ -36,6 +41,23 @@ function parseOps(content: string): AgentOp[] {
       if (op.tool && op.ts) ops.push(op);
     } catch { /* skip non-JSON lines */ }
   }
+  return ops;
+}
+
+function parseOps(content: string): AgentOp[] {
+  // New format: JSON object with events array.
+  try {
+    const parsed = JSON.parse(content) as AgentAuditState;
+    if (Array.isArray(parsed.events)) {
+      return parsed.events
+        .filter((op) => Boolean(op?.tool) && Boolean(op?.ts))
+        .sort((a, b) => new Date(b.ts).getTime() - new Date(a.ts).getTime());
+    }
+  } catch {
+    // Fallback to legacy JSONL.
+  }
+
+  const ops = parseJsonLines(content);
 
   // newest first
   return ops.sort((a, b) => new Date(b.ts).getTime() - new Date(a.ts).getTime());
@@ -236,7 +258,7 @@ export function AgentInspectorRenderer({ content }: RendererContext) {
         <Terminal size={28} style={{ margin: '0 auto 10px', opacity: 0.3 }} />
         <p>No agent operations logged yet.</p>
         <p style={{ marginTop: 6, opacity: 0.6, fontSize: 11 }}>
-          Agent writes appear here as <code style={{ background: 'var(--muted)', padding: '1px 5px', borderRadius: 4 }}>```agent-op</code> blocks.
+          Agent writes appear here from <code style={{ background: 'var(--muted)', padding: '1px 5px', borderRadius: 4 }}>.mindos/agent-audit-log.json</code>.
         </p>
       </div>
     );

package/app/components/renderers/agent-inspector/manifest.ts

@@ -3,14 +3,14 @@ import type { RendererDefinition } from '@/lib/renderers/registry';
 export const manifest: RendererDefinition = {
   id: 'agent-inspector',
   name: 'Agent Inspector',
-  description: 'Visualizes agent tool-call logs as a filterable timeline. Auto-activates on .agent-log.json (JSON Lines format).',
+  description: 'Visualizes agent tool-call logs as a filterable timeline. Auto-activates on .mindos/agent-audit-log.json and supports legacy .agent-log.json.',
   author: 'MindOS',
   icon: '🔍',
   tags: ['agent', 'inspector', 'log', 'mcp', 'tools'],
   builtin: true,
   core: true,
   appBuiltinFeature: true,
-  entryPath: '.agent-log.json',
-  match: ({ filePath }) => /\.agent-log\.json$/i.test(filePath),
+  entryPath: '.mindos/agent-audit-log.json',
+  match: ({ filePath }) => /(^|\/)\.mindos\/agent-audit-log\.json$/i.test(filePath) || /\.agent-log\.json$/i.test(filePath),
   load: () => import('./AgentInspectorRenderer').then(m => ({ default: m.AgentInspectorRenderer })),
 };

package/app/components/renderers/todo/manifest.ts

@@ -9,6 +9,7 @@ export const manifest: RendererDefinition = {
   tags: ['productivity', 'tasks', 'markdown'],
   builtin: true,
   core: true,
+  appBuiltinFeature: true,
   entryPath: 'TODO.md',
   match: ({ filePath }) => /\bTODO\b.*\.(md|csv)$/i.test(filePath),
   load: () => import('./TodoRenderer').then(m => ({ default: m.TodoRenderer })),

package/app/components/settings/AiTab.tsx

@@ -121,7 +121,7 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
           type="button"
           disabled={disabled}
           onClick={() => handleTestKey(providerName)}
-          className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+          className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
         >
           {result.state === 'testing' ? (
             <>
@@ -143,7 +143,7 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
   };
 
   return (
-    <div className="space-y-5">
+    <div className="space-y-6">
       <Field label={<>{t.settings.ai.provider} <EnvBadge overridden={env.AI_PROVIDER} /></>}>
         <Select
           value={provider}
@@ -214,7 +214,7 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
       )}
 
       {Object.values(env).some(Boolean) && (
-        <div className="flex items-start gap-2 text-xs text-amber-500/80 bg-amber-500/8 border border-amber-500/20 rounded-lg px-3 py-2.5">
+        <div className="flex items-start gap-2 text-xs text-[var(--amber)] bg-[var(--amber-subtle)] border border-[var(--amber)]/20 rounded-lg px-3 py-2.5">
           <AlertCircle size={13} className="shrink-0 mt-0.5" />
           <span>{t.settings.ai.envHint}</span>
         </div>

package/app/components/settings/AppearanceTab.tsx

@@ -67,7 +67,7 @@ export function AppearanceTab({ font, setFont, contentWidth, setContentWidth, da
               onClick={() => setFont(f.value)}
               className={`px-3 py-1.5 text-xs rounded-lg border transition-all ${
                 font === f.value
-                  ? 'border-amber-500 bg-amber-500/10 text-foreground font-medium shadow-sm'
+                  ? 'border-[var(--amber)] bg-[var(--amber-subtle)] text-foreground font-medium shadow-sm'
                   : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
               }`}
               style={{ fontFamily: f.style.fontFamily }}
@@ -94,7 +94,7 @@ export function AppearanceTab({ font, setFont, contentWidth, setContentWidth, da
               onClick={() => setContentWidth(w.value)}
               className={`px-3 py-1.5 text-xs rounded-lg border transition-all ${
                 contentWidth === w.value
-                  ? 'border-amber-500 bg-amber-500/10 text-foreground font-medium shadow-sm'
+                  ? 'border-[var(--amber)] bg-[var(--amber-subtle)] text-foreground font-medium shadow-sm'
                   : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
               }`}
             >

package/app/components/settings/KnowledgeTab.tsx

@@ -116,7 +116,7 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
   }
 
   return (
-    <div className="space-y-5">
+    <div className="space-y-6">
       <SectionLabel>Knowledge Base</SectionLabel>
 
       <Field
@@ -208,7 +208,7 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
             )}
           </div>
           {revealedToken && (
-            <p className="text-xs text-amber-500">
+            <p className="text-xs text-[var(--amber)]">
               New token generated. Copy it now — it won&apos;t be shown in full again.
             </p>
           )}
@@ -221,7 +221,7 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
           <SectionLabel>{t.guide?.title ?? 'Getting Started'}</SectionLabel>
           <div className="flex items-center justify-between py-2">
             <div className="flex items-center gap-2">
-              <Sparkles size={14} style={{ color: 'var(--amber)' }} />
+              <Sparkles size={14} className="text-[var(--amber)]" />
               <div>
                 <div className="text-sm text-foreground">{t.guide?.showGuide ?? 'Show getting started guide'}</div>
               </div>

package/app/components/settings/McpAgentInstall.tsx

@@ -94,8 +94,7 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
               style={{ accentColor: 'var(--amber)' }}
             />
             <span className="w-28 shrink-0 text-xs">{agent.name}</span>
-            <span className="text-2xs px-1.5 py-0.5 rounded font-mono"
-              style={{ background: 'rgba(100,100,120,0.08)' }}>
+            <span className="text-2xs px-1.5 py-0.5 rounded font-mono bg-muted">
               {getEffectiveTransport(agent)}
             </span>
             {agent.installed ? (
@@ -131,8 +130,7 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
           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)' }}>
+          className="px-2.5 py-1 rounded-md border border-[var(--amber)] text-[var(--amber)] transition-colors hover:bg-muted/50">
           {m?.selectDetected ?? 'Select Detected'}
         </button>
         <button type="button"
@@ -205,8 +203,7 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
       <button
         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: 'var(--amber-foreground)' }}
+        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 bg-[var(--amber)] text-[var(--amber-foreground)]"
       >
         {installing && <Loader2 size={12} className="animate-spin" />}
         {installing ? (m?.installing ?? 'Installing...') : (m?.installSelected ?? 'Install Selected')}

package/app/components/settings/McpSkillCreateForm.tsx

@@ -129,7 +129,7 @@ export default function SkillCreateForm({ onSave, onCancel, saving, error, m }:
               onClick={() => handleTemplateChange(tmpl)}
               className={`px-2.5 py-1 text-xs transition-colors ${i > 0 ? 'border-l border-border' : ''} ${
                 selectedTemplate === tmpl
-                  ? 'bg-amber-500/15 text-amber-600 font-medium'
+                  ? 'bg-[var(--amber-subtle)] text-[var(--amber)] font-medium'
                   : 'text-muted-foreground hover:bg-muted'
               }`}
             >
@@ -160,8 +160,7 @@ export default function SkillCreateForm({ onSave, onCancel, saving, error, m }:
         <button
           onClick={() => onSave(newName.trim(), newContent || getTemplate(newName.trim() || 'my-skill'))}
           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: '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'}