@geminilight/mindos 0.5.9 → 0.5.11

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,7 +20,7 @@ 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-error',       // #6 — conflicts more prominent than unpushed
   error: 'bg-error',
@@ -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,7 +231,7 @@ 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 === '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}

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,7 +89,7 @@ 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>

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,7 +31,7 @@ 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"

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

@@ -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/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/workflow/WorkflowRenderer.tsx

@@ -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/AiTab.tsx

@@ -1,9 +1,30 @@
 'use client';
 
-import { AlertCircle } from 'lucide-react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { AlertCircle, Loader2 } from 'lucide-react';
 import type { AiSettings, ProviderConfig, SettingsData } from './types';
 import { Field, Select, Input, EnvBadge, ApiKeyInput } from './Primitives';
 
+type TestState = 'idle' | 'testing' | 'ok' | 'error';
+type ErrorCode = 'auth_error' | 'model_not_found' | 'rate_limited' | 'network_error' | 'unknown';
+
+interface TestResult {
+  state: TestState;
+  latency?: number;
+  error?: string;
+  code?: ErrorCode;
+}
+
+function errorMessage(t: any, code?: ErrorCode): string {
+  switch (code) {
+    case 'auth_error': return t.settings.ai.testKeyAuthError;
+    case 'model_not_found': return t.settings.ai.testKeyModelNotFound;
+    case 'rate_limited': return t.settings.ai.testKeyRateLimited;
+    case 'network_error': return t.settings.ai.testKeyNetworkError;
+    default: return t.settings.ai.testKeyUnknown;
+  }
+}
+
 interface AiTabProps {
   data: SettingsData;
   updateAi: (patch: Partial<AiSettings>) => void;
@@ -15,13 +36,76 @@ export function AiTab({ data, updateAi, t }: AiTabProps) {
   const envVal = data.envValues ?? {};
   const provider = data.ai.provider;
 
-  function patchProvider(name: 'anthropic' | 'openai', patch: Partial<ProviderConfig>) {
+  // --- Test key state ---
+  const [testResult, setTestResult] = useState<Record<string, TestResult>>({});
+  const okTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const prevProviderRef = useRef(provider);
+
+  // Reset test result when provider changes
+  useEffect(() => {
+    if (prevProviderRef.current !== provider) {
+      prevProviderRef.current = provider;
+      setTestResult({});
+      if (okTimerRef.current) { clearTimeout(okTimerRef.current); okTimerRef.current = undefined; }
+    }
+  }, [provider]);
+
+  // Cleanup ok timer
+  useEffect(() => () => { if (okTimerRef.current) clearTimeout(okTimerRef.current); }, []);
+
+  const handleTestKey = useCallback(async (providerName: 'anthropic' | 'openai') => {
+    const prov = data.ai.providers?.[providerName] ?? {} as ProviderConfig;
+    setTestResult(prev => ({ ...prev, [providerName]: { state: 'testing' } }));
+
+    try {
+      const body: Record<string, string> = { provider: providerName };
+      if (prov.apiKey) body.apiKey = prov.apiKey;
+      if (prov.model) body.model = prov.model;
+      if (providerName === 'openai' && prov.baseUrl) body.baseUrl = prov.baseUrl;
+
+      const res = await fetch('/api/settings/test-key', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      const json = await res.json();
+
+      if (json.ok) {
+        setTestResult(prev => ({ ...prev, [providerName]: { state: 'ok', latency: json.latency } }));
+        // Auto-clear after 5s
+        if (okTimerRef.current) clearTimeout(okTimerRef.current);
+        okTimerRef.current = setTimeout(() => {
+          setTestResult(prev => ({ ...prev, [providerName]: { state: 'idle' } }));
+        }, 5000);
+      } else {
+        setTestResult(prev => ({
+          ...prev,
+          [providerName]: { state: 'error', error: json.error, code: json.code },
+        }));
+      }
+    } catch {
+      setTestResult(prev => ({
+        ...prev,
+        [providerName]: { state: 'error', code: 'network_error', error: 'Network error' },
+      }));
+    }
+  }, [data.ai.providers]);
+
+  // Reset test result when key changes
+  const patchProviderWithReset = useCallback((name: 'anthropic' | 'openai', patch: Partial<ProviderConfig>) => {
+    if ('apiKey' in patch) {
+      setTestResult(prev => ({ ...prev, [name]: { state: 'idle' } }));
+    }
     updateAi({
       providers: {
         ...data.ai.providers,
         [name]: { ...data.ai.providers?.[name], ...patch },
       },
     });
+  }, [data.ai.providers, updateAi]);
+
+  function patchProvider(name: 'anthropic' | 'openai', patch: Partial<ProviderConfig>) {
+    patchProviderWithReset(name, patch);
   }
 
   const anthropic = data.ai.providers?.anthropic ?? { apiKey: '', model: '' };
@@ -31,6 +115,38 @@ export function AiTab({ data, updateAi, t }: AiTabProps) {
   const activeEnvKey = provider === 'anthropic' ? env.ANTHROPIC_API_KEY : env.OPENAI_API_KEY;
   const missingApiKey = !activeApiKey && !activeEnvKey;
 
+  // Test button helper
+  const renderTestButton = (providerName: 'anthropic' | 'openai', hasKey: boolean, hasEnv: boolean) => {
+    const result = testResult[providerName] ?? { state: 'idle' as TestState };
+    const disabled = result.state === 'testing' || (!hasKey && !hasEnv);
+
+    return (
+      <div className="flex items-center gap-2 mt-1.5">
+        <button
+          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"
+        >
+          {result.state === 'testing' ? (
+            <>
+              <Loader2 size={12} className="animate-spin" />
+              {t.settings.ai.testKeyTesting}
+            </>
+          ) : (
+            t.settings.ai.testKey
+          )}
+        </button>
+        {result.state === 'ok' && result.latency != null && (
+          <span className="text-xs text-success">{t.settings.ai.testKeyOk(result.latency)}</span>
+        )}
+        {result.state === 'error' && (
+          <span className="text-xs text-error">✗ {errorMessage(t, result.code)}</span>
+        )}
+      </div>
+    );
+  };
+
   return (
     <div className="space-y-5">
       <Field label={<>{t.settings.ai.provider} <EnvBadge overridden={env.AI_PROVIDER} /></>}>
@@ -60,6 +176,7 @@ export function AiTab({ data, updateAi, t }: AiTabProps) {
               value={anthropic.apiKey}
               onChange={v => patchProvider('anthropic', { apiKey: v })}
             />
+            {renderTestButton('anthropic', !!anthropic.apiKey, !!env.ANTHROPIC_API_KEY)}
           </Field>
         </>
       ) : (
@@ -79,6 +196,7 @@ export function AiTab({ data, updateAi, t }: AiTabProps) {
               value={openai.apiKey}
               onChange={v => patchProvider('openai', { apiKey: v })}
             />
+            {renderTestButton('openai', !!openai.apiKey, !!env.OPENAI_API_KEY)}
           </Field>
           <Field
             label={<>{t.settings.ai.baseUrl} <EnvBadge overridden={env.OPENAI_BASE_URL} /></>}

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>