@geminilight/mindos 0.5.8 → 0.5.10

package/app/components/Sidebar.tsx

@@ -121,7 +121,7 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
 
       {/* Mobile navbar */}
       <header className="md:hidden fixed top-0 left-0 right-0 z-30 bg-card border-b border-border flex items-center justify-between px-3 py-2" style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}>
-        <button onClick={() => setMobileOpen(true)} className="p-2.5 -ml-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label="Open menu">
+        <button onClick={() => setMobileOpen(true)} className="p-3 -ml-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label="Open menu">
           <Menu size={20} />
         </button>
         <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
@@ -132,15 +132,15 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
           {/* #8 — Mobile sync dot: visible when there's a problem */}
           <button
             onClick={openSyncSettings}
-            className="p-2.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent flex items-center justify-center"
+            className="p-3 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent flex items-center justify-center"
             aria-label="Sync status"
           >
             <MobileSyncDot status={syncStatus} />
           </button>
-          <button onClick={() => setSearchOpen(true)} className="p-2.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.searchTitle}>
+          <button onClick={() => setSearchOpen(true)} className="p-3 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.searchTitle}>
             <Search size={20} />
           </button>
-          <button onClick={() => setSettingsOpen(true)} className="p-2.5 -mr-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.settingsTitle}>
+          <button onClick={() => setSettingsOpen(true)} className="p-3 -mr-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.settingsTitle}>
             <Settings size={20} />
           </button>
         </div>

package/app/components/SidebarLayout.tsx

@@ -15,6 +15,14 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
 
   return (
     <>
+      {/* Skip to main content — accessibility for keyboard users */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[60] focus:px-4 focus:py-2 focus:rounded-lg focus:text-sm focus:font-medium focus:font-display"
+        style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+      >
+        Skip to main content
+      </a>
       <Sidebar
         fileTree={fileTree}
         collapsed={collapsed}
@@ -22,6 +30,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         onExpand={() => setCollapsed(false)}
       />
       <main
+        id="main-content"
         className={`min-h-screen transition-all duration-300 pt-[52px] md:pt-0 ${
           collapsed ? 'md:pl-0' : 'md:pl-[280px]'
         }`}

package/app/components/SyncStatusBar.tsx

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

package/app/components/TableOfContents.tsx

@@ -111,7 +111,7 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
         style={{ background: 'var(--background)' }}
       >
         <p
-          className="text-[10px] font-semibold uppercase tracking-wider px-2 mb-1"
+          className="text-2xs font-semibold uppercase tracking-wider px-2 mb-1"
           style={{ color: 'var(--muted-foreground)', opacity: 0.5 }}
         >
           On this page

package/app/components/UpdateBanner.tsx

@@ -60,7 +60,7 @@ export default function UpdateBanner() {
         </span>
         <span className="text-muted-foreground">
           {updateT?.runUpdate ?? 'Run'}{' '}
-          <code className="px-1 py-0.5 rounded bg-muted font-mono text-[11px]">mindos update</code>
+          <code className="px-1 py-0.5 rounded bg-muted font-mono text-xs">mindos update</code>
           {updateT?.orSee ? (
             <>
               {' '}{updateT.orSee}{' '}

package/app/components/ask/FileChip.tsx

@@ -12,7 +12,7 @@ export default function FileChip({ path, onRemove, variant = 'kb' }: FileChipPro
   const name = path.split('/').pop() ?? path;
   const isCsv = name.endsWith('.csv');
   const Icon = variant === 'upload' ? Paperclip : isCsv ? Table : FileText;
-  const iconClass = variant === 'upload' ? 'text-zinc-400' : isCsv ? 'text-emerald-400' : 'text-zinc-400';
+  const iconClass = variant === 'upload' ? 'text-muted-foreground' : isCsv ? 'text-success' : 'text-muted-foreground';
 
   return (
     <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs border border-border bg-muted text-foreground max-w-[220px]">

package/app/components/ask/MentionPopover.tsx

@@ -31,18 +31,18 @@ export default function MentionPopover({ results, selectedIndex, onSelect }: Men
             }`}
           >
             {isCsv ? (
-              <Table size={13} className="text-emerald-400 shrink-0" />
+              <Table size={13} className="text-success shrink-0" />
             ) : (
-              <FileText size={13} className="text-zinc-400 shrink-0" />
+              <FileText size={13} className="text-muted-foreground shrink-0" />
             )}
             <span className="truncate flex-1">{name}</span>
-            <span className="text-[10px] text-muted-foreground/50 truncate max-w-[140px] shrink-0">
+            <span className="text-2xs text-muted-foreground/50 truncate max-w-[140px] shrink-0">
               {f.split('/').slice(0, -1).join('/')}
             </span>
           </button>
         );
       })}
-      <div className="px-3 py-1.5 border-t border-border flex gap-3 text-[10px] text-muted-foreground/50">
+      <div className="px-3 py-1.5 border-t border-border flex gap-3 text-2xs text-muted-foreground/50">
         <span>↑↓ navigate</span>
         <span>↵ select</span>
         <span>ESC dismiss</span>

package/app/components/ask/MessageList.tsx

@@ -89,13 +89,13 @@ export default function MessageList({
           {m.role === 'user' ? (
             <div
               className="max-w-[85%] px-3 py-2 rounded-xl rounded-br-sm text-sm leading-relaxed whitespace-pre-wrap"
-              style={{ background: 'var(--amber)', color: '#131210' }}
+              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
             >
               {m.content}
             </div>
           ) : m.content.startsWith('__error__') ? (
-            <div className="max-w-[85%] px-3 py-2.5 rounded-xl rounded-bl-sm border border-red-500/20 bg-red-500/8 text-sm">
-              <div className="flex items-start gap-2 text-red-400">
+            <div className="max-w-[85%] px-3 py-2.5 rounded-xl rounded-bl-sm border border-error/20 bg-error/8 text-sm">
+              <div className="flex items-start gap-2 text-error">
                 <AlertCircle size={14} className="shrink-0 mt-0.5" />
                 <span className="leading-relaxed">{m.content.slice(9)}</span>
               </div>

package/app/components/ask/SessionHistory.tsx

@@ -14,7 +14,7 @@ interface SessionHistoryProps {
 export default function SessionHistory({ sessions, activeSessionId, onLoad, onDelete }: SessionHistoryProps) {
   return (
     <div className="border-b border-border px-4 py-2.5 max-h-[190px] overflow-y-auto">
-      <div className="text-[11px] text-muted-foreground mb-2">Session History</div>
+      <div className="text-xs text-muted-foreground mb-2">Session History</div>
       <div className="flex flex-col gap-1.5">
         {sessions.length === 0 && (
           <div className="text-xs text-muted-foreground/70">No saved sessions.</div>
@@ -31,12 +31,12 @@ export default function SessionHistory({ sessions, activeSessionId, onLoad, onDe
               }`}
             >
               <div className="truncate">{sessionTitle(s)}</div>
-              <div className="text-[10px] opacity-60">{new Date(s.updatedAt).toLocaleString()}</div>
+              <div className="text-2xs opacity-60">{new Date(s.updatedAt).toLocaleString()}</div>
             </button>
             <button
               type="button"
               onClick={() => onDelete(s.id)}
-              className="p-1 rounded text-muted-foreground hover:text-red-400 hover:bg-muted"
+              className="p-1 rounded text-muted-foreground hover:text-error hover:bg-muted"
               title="Delete session"
             >
               <Trash2 size={12} />

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

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

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

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

package/app/components/renderers/csv/BoardView.tsx

@@ -80,7 +80,7 @@ export function BoardView({ headers, rows, cfg, saveAction }: {
                   {headers.map((h, ci) => {
                     if (ci === groupIdx || ci === titleIdx || ci === descIdx) return null;
                     const v = row[ci]; if (!v) return null;
-                    return <span key={ci} className="text-[10px] px-1.5 py-0.5 rounded font-display"
+                    return <span key={ci} className="text-2xs px-1.5 py-0.5 rounded font-display"
                       style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}
                     >{h}: {v}</span>;
                   })}
@@ -124,7 +124,7 @@ export function BoardView({ headers, rows, cfg, saveAction }: {
                 setShowNewCol(false);
               }}
                 className="text-xs px-2 py-1 rounded font-display"
-                style={{ background: 'var(--amber)', color: '#131210' }}
+                style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
               >Create</button>
               <button onClick={() => { setNewColInput(''); setShowNewCol(false); }}
                 className="text-xs px-2 py-1 rounded font-display"

package/app/components/renderers/csv/ConfigPanel.tsx

@@ -39,7 +39,7 @@ export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
       {view === 'table' && (
         <>
           <div className="h-px" style={{ background: 'var(--border)' }} />
-          <p className="text-[11px] font-semibold uppercase tracking-wider" style={labelStyle}>Sort</p>
+          <p className="text-xs font-semibold uppercase tracking-wider" style={labelStyle}>Sort</p>
           <FieldSelect label="Sort by" value={cfg.table.sortField}
             onChange={v => onChange({ ...cfg, table: { ...cfg.table, sortField: v } })} />
           <div className="flex items-center justify-between gap-2">
@@ -51,7 +51,7 @@ export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
                   style={{
                     fontSize: '0.72rem',
                     background: cfg.table.sortDir === d ? 'var(--amber)' : 'var(--background)',
-                    color: cfg.table.sortDir === d ? '#131210' : 'var(--muted-foreground)',
+                    color: cfg.table.sortDir === d ? 'var(--amber-foreground)' : 'var(--muted-foreground)',
                   }}
                 >{d}</button>
               ))}
@@ -59,12 +59,12 @@ export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
           </div>
 
           <div className="h-px" style={{ background: 'var(--border)' }} />
-          <p className="text-[11px] font-semibold uppercase tracking-wider" style={labelStyle}>Group</p>
+          <p className="text-xs font-semibold uppercase tracking-wider" style={labelStyle}>Group</p>
           <FieldSelect label="Group by" value={cfg.table.groupField}
             onChange={v => onChange({ ...cfg, table: { ...cfg.table, groupField: v } })} />
 
           <div className="h-px" style={{ background: 'var(--border)' }} />
-          <p className="text-[11px] font-semibold uppercase tracking-wider" style={labelStyle}>Columns</p>
+          <p className="text-xs font-semibold uppercase tracking-wider" style={labelStyle}>Columns</p>
           <div className="flex flex-col gap-1.5">
             {headers.map(h => {
               const hidden = cfg.table.hiddenFields.includes(h);
@@ -77,7 +77,7 @@ export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
                       : [...cfg.table.hiddenFields, h];
                     onChange({ ...cfg, table: { ...cfg.table, hiddenFields: next } });
                   }}
-                    className="text-[11px] px-2 py-0.5 rounded transition-colors font-display"
+                    className="text-xs px-2 py-0.5 rounded transition-colors font-display"
                     style={{
                       background: hidden ? 'var(--muted)' : 'var(--amber-dim)',
                       color: hidden ? 'var(--muted-foreground)' : 'var(--amber)',

package/app/components/renderers/csv/GalleryView.tsx

@@ -18,7 +18,7 @@ export function GalleryView({ headers, rows, cfg }: { headers: string[]; rows: s
           <div key={i} className="rounded-xl border p-4 flex flex-col gap-2 hover:bg-muted/50 transition-colors"
             style={{ borderColor: 'var(--border)', background: 'var(--card)' }}
           >
-            {tag && tc && <span className="self-start text-[11px] px-2 py-0.5 rounded-full font-medium"
+            {tag && tc && <span className="self-start text-xs px-2 py-0.5 rounded-full font-medium"
               style={{ background: tc.bg, color: tc.text }}>{tag}</span>}
             <p className="text-sm font-semibold leading-snug" style={{ color: 'var(--foreground)' }}>{title}</p>
             {desc && <p className="text-xs leading-relaxed line-clamp-3" style={{ color: 'var(--muted-foreground)' }}>{desc}</p>}

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

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

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

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

package/app/components/renderers/graph/GraphRenderer.tsx

@@ -149,7 +149,7 @@ const WikiNode = memo(function WikiNode({ data }: NodeProps) {
         textOverflow: 'ellipsis',
         opacity: isOrphan ? 0.4 : 1,
         background: isCurrent ? 'var(--amber)' : 'var(--card)',
-        color: isCurrent ? '#131210' : 'var(--foreground)',
+        color: isCurrent ? 'var(--amber-foreground)' : 'var(--foreground)',
         border: `1.5px solid ${isCurrent ? 'var(--amber)' : 'var(--border)'}`,
         boxShadow: isCurrent 
           ? '0 0 20px var(--amber-dim), 0 0 0 2px var(--amber-dim)' 

package/app/components/renderers/summary/SummaryRenderer.tsx

@@ -155,7 +155,7 @@ Be specific. Reference actual content from the files. Keep the total response un
             cursor: streaming || recentFiles.length === 0 ? 'not-allowed' : 'pointer',
             border: 'none',
             background: streaming ? 'var(--muted)' : 'var(--amber)',
-            color: streaming ? 'var(--muted-foreground)' : '#131210',
+            color: streaming ? 'var(--muted-foreground)' : 'var(--amber-foreground)',
             opacity: recentFiles.length === 0 ? 0.5 : 1,
             transition: 'opacity .15s',
           }}

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

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

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

@@ -92,9 +92,9 @@ function renderBody(body: string): string {
 function StatusIcon({ status }: { status: StepStatus }) {
   if (status === 'pending')  return <Circle size={15} style={{ color: 'var(--border)' }} />;
   if (status === 'running')  return <Loader2 size={15} style={{ color: 'var(--amber)', animation: 'spin 1s linear infinite' }} />;
-  if (status === 'done')     return <CheckCircle2 size={15} style={{ color: '#7aad80' }} />;
+  if (status === 'done')     return <CheckCircle2 size={15} style={{ color: 'var(--success)' }} />;
   if (status === 'skipped')  return <SkipForward size={15} style={{ color: 'var(--muted-foreground)', opacity: .5 }} />;
-  return <AlertCircle size={15} style={{ color: '#c85050' }} />;
+  return <AlertCircle size={15} style={{ color: 'var(--error)' }} />;
 }
 
 const STATUS_BORDER: Record<StepStatus, string> = {
@@ -206,7 +206,7 @@ function StepCard({
                   padding: '3px 10px', borderRadius: 6, fontSize: '0.72rem',
                   cursor: canRun ? 'pointer' : 'not-allowed',
                   border: 'none', background: canRun ? 'var(--amber)' : 'var(--muted)',
-                  color: canRun ? '#131210' : 'var(--muted-foreground)',
+                  color: canRun ? 'var(--amber-foreground)' : 'var(--muted-foreground)',
                   opacity: canRun ? 1 : 0.5,
                 }}
               >
@@ -362,7 +362,7 @@ export function WorkflowRenderer({ filePath, content }: RendererContext) {
                 padding: '4px 12px', borderRadius: 7, fontSize: '0.75rem',
                 cursor: running ? 'not-allowed' : 'pointer',
                 border: 'none', background: running ? 'var(--muted)' : 'var(--amber)',
-                color: running ? 'var(--muted-foreground)' : '#131210',
+                color: running ? 'var(--muted-foreground)' : 'var(--amber-foreground)',
                 opacity: running ? 0.7 : 1,
               }}
             >

package/app/components/settings/KnowledgeTab.tsx

@@ -114,7 +114,7 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
                 className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
                 title={k.authTokenCopy}
               >
-                {copied ? <Check size={13} className="text-green-500" /> : <Copy size={13} />}
+                {copied ? <Check size={13} className="text-success" /> : <Copy size={13} />}
               </button>
             )}
           </div>