@geminilight/mindos 0.5.63 → 0.5.65

package/app/components/panels/AgentsPanelAgentListRow.tsx

@@ -1,34 +1,36 @@
 'use client';
 
 import { useState } from 'react';
-import { ChevronRight, Loader2 } from 'lucide-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';
 
 export interface AgentsPanelAgentListRowCopy {
   installing: string;
-  install: (name: string) => string;
+  install: string;
+  installSuccess: string;
+  installFailed: string;
+  retryInstall: string;
 }
 
 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={`
@@ -38,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">
@@ -56,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">
@@ -79,23 +80,45 @@ function AgentInstallButton({
   copy: AgentsPanelAgentListRowCopy;
 }) {
   const [installing, setInstalling] = useState(false);
+  const [installState, setInstallState] = useState<'idle' | 'success' | 'error'>('idle');
 
   const handleInstall = async (e: React.MouseEvent) => {
     e.stopPropagation();
+    if (installing) return;
     setInstalling(true);
-    await onInstallAgent(agentKey);
+    setInstallState('idle');
+    const ok = await onInstallAgent(agentKey);
     setInstalling(false);
+    setInstallState(ok ? 'success' : 'error');
   };
 
+  const isError = installState === 'error';
+  const isSuccess = installState === 'success';
+  const label = installing
+    ? copy.installing
+    : isSuccess
+      ? copy.installSuccess
+      : isError
+        ? copy.retryInstall
+        : copy.install;
+
   return (
     <button
       type="button"
       onClick={handleInstall}
       disabled={installing}
-      className="flex items-center gap-1 px-2 py-1.5 text-2xs rounded-lg font-medium text-[var(--amber-foreground)] disabled:opacity-50 transition-colors shrink-0 bg-[var(--amber)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      className={`flex items-center gap-1 px-2 py-1.5 text-2xs rounded-lg font-medium text-white disabled:opacity-50 transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+        isError ? 'bg-error hover:bg-error/90' : isSuccess ? 'bg-success hover:bg-success/90' : 'bg-[var(--amber)] hover:bg-[var(--amber)]/90'
+      }`}
+      aria-label={`${agentName} ${label}`}
     >
       {installing ? <Loader2 size={10} className="animate-spin" /> : null}
-      {installing ? copy.installing : copy.install(agentName)}
+      {!installing && isSuccess ? <Check size={10} /> : null}
+      {!installing && isError ? <RotateCw size={10} /> : null}
+      {label}
+      <span className="sr-only" aria-live="polite">
+        {isError ? copy.installFailed : ''}
+      </span>
     </button>
   );
 }

package/app/components/panels/AgentsPanelHubNav.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { type RefObject } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
 import { LayoutDashboard, Server, Zap } from 'lucide-react';
 import { PanelNavRow } from './PanelNavRow';
 
@@ -13,35 +13,35 @@ type HubCopy = {
 export function AgentsPanelHubNav({
   copy,
   connectedCount,
-  overviewRef,
-  skillsRef,
-  scrollTo,
-  openAdvancedConfig,
 }: {
   copy: HubCopy;
   connectedCount: number;
-  overviewRef: RefObject<HTMLDivElement | null>;
-  skillsRef: RefObject<HTMLDivElement | null>;
-  scrollTo: (el: HTMLElement | null) => void;
-  openAdvancedConfig: () => void;
 }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const tab = searchParams.get('tab');
+  const inAgentsRoute = pathname === '/agents';
+
   return (
     <div className="py-2">
       <PanelNavRow
         icon={<LayoutDashboard size={14} className="text-[var(--amber)]" />}
         title={copy.navOverview}
         badge={<span className="text-2xs tabular-nums text-muted-foreground">{connectedCount}</span>}
-        onClick={() => scrollTo(overviewRef.current)}
+        href="/agents"
+        active={inAgentsRoute && (tab === null || tab === 'overview')}
       />
       <PanelNavRow
         icon={<Server size={14} className="text-muted-foreground" />}
         title={copy.navMcp}
-        onClick={openAdvancedConfig}
+        href="/agents?tab=mcp"
+        active={inAgentsRoute && tab === 'mcp'}
       />
       <PanelNavRow
         icon={<Zap size={14} className="text-muted-foreground" />}
         title={copy.navSkills}
-        onClick={() => scrollTo(skillsRef.current)}
+        href="/agents?tab=skills"
+        active={inAgentsRoute && tab === 'skills'}
       />
     </div>
   );

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

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
-import { getAllRenderers, isRendererEnabled, setRendererEnabled, loadDisabledState } from '@/lib/renderers/registry';
+import { getPluginRenderers, isRendererEnabled, setRendererEnabled, loadDisabledState } from '@/lib/renderers/registry';
 import { Toggle } from '../settings/Primitives';
 import PanelHeader from './PanelHeader';
 import { useLocale } from '@/lib/LocaleContext';
@@ -32,7 +32,7 @@ export default function PluginsPanel({ active, maximized, onMaximize }: PluginsP
   useEffect(() => {
     if (!mounted || fetchedRef.current) return;
     fetchedRef.current = true;
-    const entryPaths = getAllRenderers()
+    const entryPaths = getPluginRenderers()
       .map(r => r.entryPath)
       .filter((p): p is string => !!p);
     if (entryPaths.length === 0) return;
@@ -47,7 +47,7 @@ export default function PluginsPanel({ active, maximized, onMaximize }: PluginsP
       .catch(() => {});
   }, [mounted]);
 
-  const renderers = mounted ? getAllRenderers() : [];
+  const renderers = mounted ? getPluginRenderers() : [];
   const enabledCount = mounted ? renderers.filter(r => isRendererEnabled(r.id)).length : 0;
 
   const handleToggle = useCallback((id: string, enabled: boolean) => {
@@ -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,12 +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,
-  entryPath: '.agent-log.json',
-  match: ({ filePath }) => /\.agent-log\.json$/i.test(filePath),
+  core: true,
+  appBuiltinFeature: true,
+  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/config/manifest.ts

@@ -9,6 +9,7 @@ export const manifest: RendererDefinition = {
   tags: ['config', 'json', 'settings', 'schema'],
   builtin: true,
   core: true,
+  appBuiltinFeature: true,
   entryPath: 'CONFIG.json',
   match: ({ filePath, extension }) => extension === 'json' && /(^|\/)CONFIG\.json$/i.test(filePath),
   load: () => import('./ConfigRenderer').then(m => ({ default: m.ConfigRenderer })),

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

@@ -9,6 +9,7 @@ export const manifest: RendererDefinition = {
   tags: ['csv', 'table', 'gallery', 'board', 'data'],
   builtin: true,
   core: true,
+  appBuiltinFeature: true,
   entryPath: 'Resources/Products.csv',
   match: ({ extension, filePath }) => extension === 'csv' && !/\bTODO\b/i.test(filePath),
   load: () => import('./CsvRenderer').then(m => ({ default: m.CsvRenderer })),

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'}

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 ?? '中文'}