agmon 0.2.0 → 0.2.2

package/src/app/api/traces/stream/route.js

@@ -7,8 +7,32 @@ export async function GET(request) {
   const { searchParams } = new URL(request.url);
   const source = searchParams.get("source") || "live";
   const mockPreset = searchParams.get("mockPreset") || searchParams.get("preset");
-  const hours = Number(searchParams.get("hours") || 24);
-  const maxAgeMs = Math.max(1, hours) * 60 * 60 * 1000;
+  const rawHours = searchParams.get("hours");
+  let hours = 24;
+  if (rawHours !== null) {
+    if (rawHours === "0" || rawHours === "all") {
+      hours = 0;
+    } else {
+      const parsedHours = Number(rawHours);
+      if (!Number.isNaN(parsedHours) && parsedHours >= 0) {
+        hours = parsedHours;
+      }
+    }
+  }
+  const maxAgeMs = hours > 0 ? hours * 60 * 60 * 1000 : Infinity;
+
+  const rawLimit = searchParams.get("limit") || searchParams.get("top");
+  let limit = 20;
+  if (rawLimit !== null) {
+    if (rawLimit === "0" || rawLimit === "all") {
+      limit = 0;
+    } else {
+      const parsedLimit = Number(rawLimit);
+      if (!Number.isNaN(parsedLimit) && parsedLimit >= 0) {
+        limit = parsedLimit;
+      }
+    }
+  }
 
   const encoder = new TextEncoder();
 
@@ -30,24 +54,35 @@ export async function GET(request) {
 
         if (source === "mock" || mockPreset) {
           const presetConfig = MOCK_PRESETS[mockPreset] || MOCK_PRESETS.cases;
-          const traces = generateMockTraces({
+          const rawTraces = generateMockTraces({
             count: presetConfig.agents,
             errorRatio: presetConfig.errorRatio,
             cases: !!presetConfig.cases,
             preset: mockPreset,
             seed: 42,
           });
+          const totalCount = rawTraces.length;
+          const traces = (limit > 0 && limit < totalCount) ? rawTraces.slice(0, limit) : rawTraces;
           const providers = mockProviderDescriptors(traces);
-          send({ traces, providers, timestamp: Date.now(), mode: "mock", preset: mockPreset || "cases" });
+          send({
+            traces,
+            totalCount,
+            providers,
+            timestamp: Date.now(),
+            mode: "mock",
+            preset: mockPreset || "cases",
+            activeAgents: traces.filter((t) => t.state === "streaming" || t.state === "pending").length,
+          });
           return;
         }
 
         // Live Mode
         try {
-          const { traces, errors } = await getLiveTraceSnapshot(false, maxAgeMs);
+          const { traces, totalCount, errors } = await getLiveTraceSnapshot(false, maxAgeMs, limit);
           const providers = getProvidersFromTraces(traces);
           send({
             traces,
+            totalCount,
             providers,
             errors,
             timestamp: Date.now(),
@@ -58,6 +93,7 @@ export async function GET(request) {
           console.error("[SSE] Failed to fetch live traces:", err);
           send({
             traces: [],
+            totalCount: 0,
             providers: [],
             errors: [{ source: "telemetry", message: err.message || "Failed to read live traces" }],
             timestamp: Date.now(),

package/src/app/chat/page.js

@@ -69,30 +69,30 @@ function StandaloneChatContent() {
   };
 
   return (
-    <div className="h-screen w-screen overflow-hidden bg-[#181818] flex flex-col select-none text-[#cccccc] font-sans">
+    <div className="h-screen w-screen overflow-hidden bg-[var(--bg-workbench)] flex flex-col select-none text-[var(--text-main)] font-sans">
       {/* Detached Window Title Bar (VS Code Auxiliary Window style) */}
-      <header className="h-[38px] min-h-[38px] bg-[#1e1e1e] border-b border-[#2b2b2b] px-3 flex items-center justify-between shrink-0 z-30">
+      <header className="h-[38px] min-h-[38px] bg-[var(--bg-card)] border-b border-[var(--border-subtle)] px-3 flex items-center justify-between shrink-0 z-30">
         {/* Left: Brand & Return Navigation */}
         <div className="flex items-center gap-3">
           <Link
             href="/"
             title="Back to Virtual Office"
-            className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-white transition-colors"
+            className="flex items-center gap-1.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-bright)] transition-colors"
           >
             <ArrowLeft className="w-3.5 h-3.5" />
             <span className="hidden sm:inline font-medium">Virtual Office</span>
           </Link>
 
-          <span className="text-slate-600">|</span>
+          <span className="text-[var(--border-card)]">|</span>
 
           <div className="flex items-center gap-2">
-            <div className="w-5 h-5 rounded bg-[#007acc]/20 border border-[#007acc]/40 flex items-center justify-center">
-              <Bot className="w-3.5 h-3.5 text-[#4fc1ff]" />
+            <div className="w-5 h-5 rounded bg-[var(--accent-primary)]/20 border border-[var(--accent-primary)]/40 flex items-center justify-center">
+              <Bot className="w-3.5 h-3.5 text-[var(--accent-primary)]" />
             </div>
-            <span className="text-xs font-bold text-white tracking-wide">
+            <span className="text-xs font-bold text-[var(--text-bright)] tracking-wide">
               AGMon
             </span>
-            <span className="text-[10px] bg-[#2d2d2d] px-1.5 py-0.2 rounded border border-[#3e3e42] text-slate-400 hidden sm:inline">
+            <span className="text-[10px] bg-[var(--bg-card-inner)] px-1.5 py-0.2 rounded border border-[var(--border-card)] text-[var(--text-muted)] hidden sm:inline">
               Detached Window
             </span>
           </div>
@@ -100,18 +100,18 @@ function StandaloneChatContent() {
 
         {/* Center: Agent Quick Switcher */}
         {traces.length > 1 && (
-          <div className="flex items-center gap-1.5 bg-[#252526] border border-[#3e3e42] rounded px-2 py-0.5 text-xs">
-            <Layers className="w-3 h-3 text-cyan-400 shrink-0" />
+          <div className="flex items-center gap-1.5 bg-[var(--bg-card-inner)] border border-[var(--border-card)] rounded px-2 py-0.5 text-xs">
+            <Layers className="w-3 h-3 text-[var(--accent-secondary)] shrink-0" />
             <select
               value={activeId}
               onChange={(e) => setSelectedId(e.target.value)}
-              className="bg-transparent text-slate-200 text-xs font-mono outline-none cursor-pointer"
+              className="bg-transparent text-[var(--text-main)] text-xs font-mono outline-none cursor-pointer"
             >
               {traces.map((t) => (
                 <option
                   key={t.connectionId || t.traceId}
                   value={t.connectionId || t.traceId}
-                  className="bg-[#252526] text-slate-200"
+                  className="bg-[var(--bg-card)] text-[var(--text-main)]"
                 >
                   {t.account || t.connectionId} ({t.model || "gemini"})
                 </option>
@@ -125,7 +125,7 @@ function StandaloneChatContent() {
           {/* Fullscreen Toggle */}
           <button
             onClick={toggleBrowserFullscreen}
-            className="p-1 rounded text-slate-400 hover:text-white hover:bg-[#2d2d2d] transition-colors cursor-pointer"
+            className="p-1 rounded text-[var(--text-muted)] hover:text-[var(--text-bright)] hover:bg-[var(--bg-hover)] transition-colors cursor-pointer"
             title={isBrowserFullscreen ? "Exit Fullscreen" : "Fullscreen (F11)"}
           >
             {isBrowserFullscreen ? (
@@ -138,7 +138,7 @@ function StandaloneChatContent() {
           {/* Close Window */}
           <button
             onClick={handleCloseWindow}
-            className="p-1 rounded text-slate-400 hover:text-rose-400 hover:bg-[#2d2d2d] transition-colors cursor-pointer"
+            className="p-1 rounded text-[var(--text-muted)] hover:text-rose-400 hover:bg-[var(--bg-hover)] transition-colors cursor-pointer"
             title="Close auxiliary window"
           >
             <X className="w-4 h-4" />

package/src/app/globals.css

@@ -38,6 +38,20 @@
   --text-main: #cccccc;
   --text-muted: #858585;
   --text-bright: #ffffff;
+  --text-on-accent: #ffffff;
+
+  /* Chat Semantics */
+  --bg-chat-user: rgba(8, 47, 73, 0.6);
+  --border-chat-user: rgba(6, 182, 212, 0.35);
+  --text-chat-user: #67e8f9;
+  --text-chat-user-body: #f1f5f9;
+  --bg-chat-agent: #1e1e1e;
+  --border-chat-agent: #2b2b2b;
+  --bg-chat-tool: #141414;
+  --border-chat-tool: #2b2b2b;
+  --bg-chat-code: #141414;
+  --text-chat-code: #e2e8f0;
+  --bg-input: #252526;
 }
 
 /* 1. One Dark Pro */
@@ -61,6 +75,20 @@
   --text-main: #abb2bf;
   --text-muted: #5c6370;
   --text-bright: #e5e5e5;
+  --text-on-accent: #ffffff;
+
+  /* Chat Semantics */
+  --bg-chat-user: #21252b;
+  --border-chat-user: rgba(97, 175, 239, 0.4);
+  --text-chat-user: #61afef;
+  --text-chat-user-body: #e5e5e5;
+  --bg-chat-agent: #282c34;
+  --border-chat-agent: #353b45;
+  --bg-chat-tool: #1e2227;
+  --border-chat-tool: #181a1f;
+  --bg-chat-code: #1e2227;
+  --text-chat-code: #abb2bf;
+  --bg-input: #21252b;
 }
 
 /* 2. Tokyo Night */
@@ -84,6 +112,20 @@
   --text-main: #a9b1d6;
   --text-muted: #565f89;
   --text-bright: #c0caf5;
+  --text-on-accent: #ffffff;
+
+  /* Chat Semantics */
+  --bg-chat-user: #1f2335;
+  --border-chat-user: rgba(122, 162, 247, 0.4);
+  --text-chat-user: #7aa2f7;
+  --text-chat-user-body: #c0caf5;
+  --bg-chat-agent: #1a1b26;
+  --border-chat-agent: #292e42;
+  --bg-chat-tool: #16161e;
+  --border-chat-tool: #292e42;
+  --bg-chat-code: #13141c;
+  --text-chat-code: #a9b1d6;
+  --bg-input: #1f2335;
 }
 
 /* 3. GitHub Dark */
@@ -107,6 +149,20 @@
   --text-main: #c9d1d9;
   --text-muted: #8b949e;
   --text-bright: #f0f6fc;
+  --text-on-accent: #ffffff;
+
+  /* Chat Semantics */
+  --bg-chat-user: #161b22;
+  --border-chat-user: rgba(47, 129, 247, 0.4);
+  --text-chat-user: #58a6ff;
+  --text-chat-user-body: #f0f6fc;
+  --bg-chat-agent: #161b22;
+  --border-chat-agent: #30363d;
+  --bg-chat-tool: #0d1117;
+  --border-chat-tool: #21262d;
+  --bg-chat-code: #0a0c10;
+  --text-chat-code: #c9d1d9;
+  --bg-input: #0d1117;
 }
 
 /* 4. Monokai Pro */
@@ -130,6 +186,20 @@
   --text-main: #fcfcfa;
   --text-muted: #939293;
   --text-bright: #ffffff;
+  --text-on-accent: #19181a;
+
+  /* Chat Semantics */
+  --bg-chat-user: #2d2a2e;
+  --border-chat-user: rgba(255, 216, 102, 0.4);
+  --text-chat-user: #ffd866;
+  --text-chat-user-body: #fcfcfa;
+  --bg-chat-agent: #221f22;
+  --border-chat-agent: #403e41;
+  --bg-chat-tool: #19181a;
+  --border-chat-tool: #403e41;
+  --bg-chat-code: #171618;
+  --text-chat-code: #fcfcfa;
+  --bg-input: #2d2a2e;
 }
 
 /* 5. Light+ (VS Code Modern) */
@@ -154,6 +224,20 @@
   --text-main: #24292f;
   --text-muted: #6e7781;
   --text-bright: #09090b;
+  --text-on-accent: #ffffff;
+
+  /* Chat Semantics for Light Mode */
+  --bg-chat-user: #e0f2fe;
+  --border-chat-user: #7dd3fc;
+  --text-chat-user: #0284c7;
+  --text-chat-user-body: #0f172a;
+  --bg-chat-agent: #ffffff;
+  --border-chat-agent: #e2e8f0;
+  --bg-chat-tool: #f8fafc;
+  --border-chat-tool: #e2e8f0;
+  --bg-chat-code: #f1f5f9;
+  --text-chat-code: #0f172a;
+  --bg-input: #ffffff;
 }
 
 html {
@@ -206,6 +290,16 @@ samp {
 .bg-\[\#37373d\] { background-color: var(--bg-selection) !important; }
 .bg-\[\#007acc\] { background-color: var(--accent-primary) !important; }
 
+/* Dynamic mappings for auxiliary dark shades */
+.bg-\[\#141414\] { background-color: var(--bg-chat-code) !important; }
+.bg-\[\#121214\] { background-color: var(--bg-workbench) !important; }
+.bg-\[\#18181b\] { background-color: var(--bg-card) !important; }
+.bg-\[\#1f1f23\] { background-color: var(--bg-card-inner) !important; }
+.bg-\[\#27272a\] { background-color: var(--bg-hover) !important; }
+.bg-\[\#17171e\] { background-color: var(--bg-card) !important; }
+.bg-\[\#242632\] { background-color: var(--bg-card-inner) !important; }
+.bg-\[\#2e3142\] { background-color: var(--bg-hover) !important; }
+
 .hover\:bg-\[\#2a2d2e\]:hover { background-color: var(--bg-hover) !important; }
 .hover\:bg-\[\#333333\]:hover { background-color: var(--bg-hover) !important; }
 .hover\:bg-\[\#2d2d2e\]:hover { background-color: var(--bg-hover) !important; }
@@ -216,11 +310,45 @@ samp {
 .border-\[\#3e3e42\] { border-color: var(--border-card) !important; }
 .border-\[\#1e1e1e\] { border-color: var(--border-subtle) !important; }
 .border-\[\#007acc\] { border-color: var(--border-focus) !important; }
+.border-\[\#27272a\] { border-color: var(--border-subtle) !important; }
+.border-\[\#333338\] { border-color: var(--border-card) !important; }
+.border-\[\#2b2b36\] { border-color: var(--border-card) !important; }
+.border-\[\#3b3e52\] { border-color: var(--border-card) !important; }
 
 .text-\[\#cccccc\] { color: var(--text-main) !important; }
 .text-\[\#858585\] { color: var(--text-muted) !important; }
 .text-\[\#007acc\] { color: var(--accent-primary) !important; }
 
+/* Light+ theme adaptations for slate elements & text contrast */
+[data-theme="light-plus"] .text-slate-100,
+[data-theme="light-plus"] .text-slate-200 {
+  color: var(--text-bright) !important;
+}
+
+[data-theme="light-plus"] .text-slate-300 {
+  color: var(--text-main) !important;
+}
+
+[data-theme="light-plus"] .text-slate-400 {
+  color: var(--text-muted) !important;
+}
+
+[data-theme="light-plus"] .text-white:not([class*="bg-indigo-"]):not([class*="bg-cyan-"]):not([class*="bg-sky-"]):not([class*="bg-emerald-"]):not([class*="bg-rose-"]):not([class*="bg-blue-"]):not([class*="bg-purple-"]):not([class*="bg-[#007acc]"]):not([class*="accent-primary"]):not([class*="bg-gradient-"]):not(.keep-white) {
+  color: var(--text-bright) !important;
+}
+
+/* Light mode selection and input styling */
+[data-theme="light-plus"] select {
+  background-color: var(--bg-card) !important;
+  color: var(--text-main) !important;
+  border-color: var(--border-card) !important;
+}
+
+[data-theme="light-plus"] select option {
+  background-color: var(--bg-card) !important;
+  color: var(--text-main) !important;
+}
+
 /* Global cursor: pointer for all buttons, interactive controls, and action elements */
 button:not(:disabled),
 [role="button"]:not([aria-disabled="true"]),

package/src/app/layout.js

@@ -26,7 +26,7 @@ export const viewport = {
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en" className="dark" suppressHydrationWarning>
       <head>
         <link rel="manifest" href="/manifest.json" />
         <link rel="apple-touch-icon" href="/icons/icon.svg" />
@@ -38,8 +38,14 @@ export default function RootLayout({ children }) {
           href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
           rel="stylesheet"
         />
+        <script
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var raw=localStorage.getItem("agmon_theme_settings");var t="dark-plus";var fz="13";var uf="";var cf="";if(raw){var s=JSON.parse(raw);if(s.theme)t=s.theme;if(s.fontSize)fz=s.fontSize;if(s.uiFont)uf=s.uiFont;if(s.codeFont)cf=s.codeFont;}document.documentElement.setAttribute("data-theme",t);if(t==="light-plus"){document.documentElement.classList.remove("dark");document.documentElement.classList.add("light");}else{document.documentElement.classList.remove("light");document.documentElement.classList.add("dark");}document.documentElement.style.setProperty("--font-size-ui",fz+"px");document.documentElement.style.setProperty("--font-size-base",fz+"px");}catch(e){}})();`,
+          }}
+        />
       </head>
-      <body className="antialiased bg-[#070b12] text-slate-100 select-none">
+      <body className="antialiased bg-[var(--bg-workbench)] text-[var(--text-main)] select-none">
         <PwaRegister />
         {children}
       </body>

package/src/app/page.js

@@ -26,7 +26,18 @@ export default function FactoryPage() {
     }
   }, []);
 
-  const { traces, connected, live, isRefreshing, refresh } = useFactoryTraces({
+  const {
+    traces,
+    totalCount,
+    top,
+    setTop,
+    timeframe,
+    setTimeframe,
+    connected,
+    live,
+    isRefreshing,
+    refresh,
+  } = useFactoryTraces({
     mode,
     preset: mockPreset,
   });
@@ -34,10 +45,15 @@ export default function FactoryPage() {
   const office = useMemo(() => buildOffice(traces), [traces]);
 
   return (
-    <main className="h-screen w-screen overflow-hidden bg-[#181818]">
+    <main className="h-screen w-screen overflow-hidden bg-[var(--bg-workbench)]">
       <UpdateNotification />
       <VSCodeWorkbench
         traces={traces}
+        totalCount={totalCount}
+        top={top}
+        onTopChange={setTop}
+        timeframe={timeframe}
+        onTimeframeChange={setTimeframe}
         office={office}
         mode={mode}
         mockPreset={mockPreset}

package/src/components/chat/ChatMessageItem.js

@@ -36,18 +36,18 @@ export default function ChatMessageItem({ turn, agentColor = "38bdf8", filter =
         id={`chat-turn-${turn.id}`}
         className="flex gap-3 justify-end my-4 animate-in fade-in slide-in-from-bottom-1 scroll-mt-20"
       >
-        <div className="max-w-[85%] rounded-2xl rounded-tr-sm bg-gradient-to-br from-cyan-900/60 to-slate-800/80 border border-cyan-500/30 p-3.5 shadow-lg">
-          <div className="flex items-center justify-between gap-2 mb-1.5 text-[11px] text-cyan-300/80">
+        <div className="max-w-[85%] rounded-2xl rounded-tr-sm bg-[var(--bg-chat-user)] border border-[var(--border-chat-user)] p-3.5 shadow-lg">
+          <div className="flex items-center justify-between gap-2 mb-1.5 text-[11px] text-[var(--text-chat-user)]">
             <span className="font-semibold uppercase tracking-wider">User Request</span>
-            <span className="font-mono text-[10px] text-slate-400">{formatTime(turn.timestamp)}</span>
+            <span className="font-mono text-[10px] opacity-75">{formatTime(turn.timestamp)}</span>
           </div>
-          <div className="text-slate-100 text-sm whitespace-pre-wrap leading-relaxed">
+          <div className="text-[var(--text-chat-user-body)] text-sm whitespace-pre-wrap leading-relaxed">
             {turn.content}
           </div>
 
           {/* User Attached Media / Images */}
           {Array.isArray(turn.media) && turn.media.length > 0 && (
-            <div className="flex flex-wrap gap-2 mt-2 pt-2 border-t border-cyan-500/20">
+            <div className="flex flex-wrap gap-2 mt-2 pt-2 border-t border-[var(--border-chat-user)]">
               {turn.media.map((med, mIdx) => {
                 const src = med.uri
                   ? `/api/media?path=${encodeURIComponent(med.uri)}`
@@ -56,7 +56,7 @@ export default function ChatMessageItem({ turn, agentColor = "38bdf8", filter =
                   <div
                     key={mIdx}
                     onClick={() => onImageClick?.({ src, alt: `User Attachment ${mIdx + 1}` })}
-                    className="group relative cursor-pointer overflow-hidden rounded-lg border border-cyan-500/40 bg-black/60 shadow hover:border-cyan-300 transition-colors"
+                    className="group relative cursor-pointer overflow-hidden rounded-lg border border-[var(--border-chat-user)] bg-black/40 shadow hover:border-[var(--accent-secondary)] transition-colors"
                   >
                     {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img
@@ -74,8 +74,8 @@ export default function ChatMessageItem({ turn, agentColor = "38bdf8", filter =
             </div>
           )}
         </div>
-        <div className="w-8 h-8 rounded-full bg-cyan-600/30 border border-cyan-500/50 flex items-center justify-center shrink-0 shadow-md">
-          <User className="w-4 h-4 text-cyan-300" />
+        <div className="w-8 h-8 rounded-full bg-[var(--bg-chat-user)] border border-[var(--border-chat-user)] flex items-center justify-center shrink-0 shadow-md text-[var(--text-chat-user)]">
+          <User className="w-4 h-4" />
         </div>
       </div>
     );
@@ -98,17 +98,17 @@ export default function ChatMessageItem({ turn, agentColor = "38bdf8", filter =
         <Bot className="w-4 h-4" style={{ color: hexColor }} />
       </div>
 
-      <div className="flex-1 min-w-0 max-w-[92%] rounded-2xl rounded-tl-sm bg-slate-900/90 border border-slate-800 p-4 shadow-xl">
+      <div className="flex-1 min-w-0 max-w-[92%] rounded-2xl rounded-tl-sm bg-[var(--bg-chat-agent)] border border-[var(--border-chat-agent)] p-4 shadow-xl">
         {/* Header */}
-        <div className="flex items-center justify-between gap-2 mb-2 pb-1.5 border-b border-slate-800/60 text-[11px]">
-          <div className="flex items-center gap-1.5 font-semibold text-slate-300">
+        <div className="flex items-center justify-between gap-2 mb-2 pb-1.5 border-b border-[var(--border-subtle)] text-[11px]">
+          <div className="flex items-center gap-1.5 font-semibold text-[var(--text-bright)]">
             <span
               className="inline-block w-2 h-2 rounded-full"
               style={{ backgroundColor: hexColor }}
             />
             <span>Agent Assistant</span>
           </div>
-          <span className="font-mono text-[10px] text-slate-400">{formatTime(turn.timestamp)}</span>
+          <span className="font-mono text-[10px] text-[var(--text-muted)]">{formatTime(turn.timestamp)}</span>
         </div>
 
         {/* 1. Thinking / Chain of Thought */}

package/src/components/chat/CodeBlock.js

@@ -39,15 +39,15 @@ export default function CodeBlock({ language = "text", code = "" }) {
   };
 
   return (
-    <div className="my-3 rounded-lg border border-slate-700/80 bg-slate-950 overflow-hidden shadow-md text-xs font-mono">
+    <div className="my-3 rounded-lg border border-[var(--border-card)] bg-[var(--bg-chat-code)] overflow-hidden shadow-md text-xs font-mono">
       {/* Header bar */}
-      <div className="flex items-center justify-between px-3 py-1.5 bg-slate-900 border-b border-slate-800 text-[11px] text-slate-400">
-        <span className="font-semibold uppercase tracking-wider text-slate-300">
+      <div className="flex items-center justify-between px-3 py-1.5 bg-[var(--bg-card-inner)] border-b border-[var(--border-subtle)] text-[11px] text-[var(--text-muted)]">
+        <span className="font-semibold uppercase tracking-wider text-[var(--text-bright)]">
           {cleanLang || "code"}
         </span>
         <button
           onClick={handleCopy}
-          className="flex items-center gap-1 px-2 py-0.5 rounded hover:bg-slate-800 hover:text-slate-200 transition-colors text-slate-400"
+          className="flex items-center gap-1 px-2 py-0.5 rounded hover:bg-[var(--bg-hover)] hover:text-[var(--text-bright)] transition-colors text-[var(--text-muted)] cursor-pointer"
           title="Copy code"
         >
           {copied ? (
@@ -65,7 +65,7 @@ export default function CodeBlock({ language = "text", code = "" }) {
       </div>
 
       {/* Code body */}
-      <pre className="p-3 overflow-x-auto text-slate-200 leading-relaxed font-mono whitespace-pre text-[12px]">
+      <pre className="p-3 overflow-x-auto text-[var(--text-chat-code)] leading-relaxed font-mono whitespace-pre text-[12px]">
         <code dangerouslySetInnerHTML={{ __html: highlighted }} />
       </pre>
     </div>

package/src/components/chat/DiffViewer.js

@@ -132,13 +132,13 @@ export default function DiffViewer({
   };
 
   return (
-    <div className="my-2 rounded-xl border border-slate-800 bg-[#080c14] overflow-hidden shadow-lg font-mono text-[11px]">
+    <div className="my-2 rounded-xl border border-[var(--border-card)] bg-[var(--bg-chat-code)] overflow-hidden shadow-lg font-mono text-[11px]">
       {/* Diff Header */}
-      <div className="flex items-center justify-between px-3 py-2 bg-slate-900/90 border-b border-slate-800">
+      <div className="flex items-center justify-between px-3 py-2 bg-[var(--bg-card-inner)] border-b border-[var(--border-subtle)]">
         <div className="flex items-center gap-2 min-w-0">
           <FileDiff className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
           {filePath && (
-            <span className="text-slate-200 font-semibold truncate text-[11px]">{filePath}</span>
+            <span className="text-[var(--text-bright)] font-semibold truncate text-[11px]">{filePath}</span>
           )}
           <div className="flex items-center gap-1.5 text-[10px]">
             <span className="px-1.5 py-0.5 rounded bg-emerald-950/70 text-emerald-400 border border-emerald-800/60 font-bold">
@@ -152,14 +152,14 @@ export default function DiffViewer({
 
         <div className="flex items-center gap-1.5 shrink-0">
           {/* Mode Switcher */}
-          <div className="flex items-center gap-0.5 bg-slate-950 p-0.5 rounded-lg border border-slate-800">
+          <div className="flex items-center gap-0.5 bg-[var(--bg-card)] p-0.5 rounded-lg border border-[var(--border-card)]">
             <button
               onClick={() => setViewMode("unified")}
               title="Unified View (Inline)"
               className={`p-1 rounded flex items-center gap-1 text-[10px] cursor-pointer transition-colors ${
                 viewMode === "unified"
-                  ? "bg-slate-800 text-cyan-300 font-semibold"
-                  : "text-slate-400 hover:text-slate-200"
+                  ? "bg-[var(--bg-selection)] text-[var(--accent-secondary)] font-semibold"
+                  : "text-[var(--text-muted)] hover:text-[var(--text-bright)]"
               }`}
             >
               <AlignJustify className="w-3 h-3" />
@@ -170,8 +170,8 @@ export default function DiffViewer({
               title="Split View (Side-by-side)"
               className={`p-1 rounded flex items-center gap-1 text-[10px] cursor-pointer transition-colors ${
                 viewMode === "split"
-                  ? "bg-slate-800 text-cyan-300 font-semibold"
-                  : "text-slate-400 hover:text-slate-200"
+                  ? "bg-[var(--bg-selection)] text-[var(--accent-secondary)] font-semibold"
+                  : "text-[var(--text-muted)] hover:text-[var(--text-bright)]"
               }`}
             >
               <Columns className="w-3 h-3" />
@@ -182,7 +182,7 @@ export default function DiffViewer({
           <button
             onClick={handleCopyUnified}
             title="Copy Unified Diff"
-            className="flex items-center gap-1 px-2 py-1 rounded bg-slate-800 hover:bg-slate-700 text-slate-300 transition-colors cursor-pointer text-[10px]"
+            className="flex items-center gap-1 px-2 py-1 rounded bg-[var(--bg-card)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-bright)] border border-[var(--border-subtle)] transition-colors cursor-pointer text-[10px]"
           >
             {copied ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
             <span>{copied ? "Copied" : "Copy"}</span>
@@ -192,7 +192,7 @@ export default function DiffViewer({
 
       {/* Diff Body */}
       {viewMode === "unified" ? (
-        <div className="overflow-x-auto max-h-[380px] divide-y divide-slate-900/60">
+        <div className="overflow-x-auto max-h-[380px] divide-y divide-[var(--border-subtle)]">
           {lineDiffs.map((line, idx) => {
             const isAdd = line.type === "add";
             const isDel = line.type === "del";
@@ -202,24 +202,24 @@ export default function DiffViewer({
                 key={idx}
                 className={`flex items-start px-2 py-0.5 leading-5 select-text ${
                   isAdd
-                    ? "bg-emerald-950/30 text-emerald-300"
+                    ? "bg-emerald-950/30 text-emerald-400"
                     : isDel
-                    ? "bg-rose-950/30 text-rose-300"
-                    : "text-slate-400 hover:bg-slate-900/40"
+                    ? "bg-rose-950/30 text-rose-400"
+                    : "text-[var(--text-main)] hover:bg-[var(--bg-hover)]"
                 }`}
               >
                 {/* Old line num */}
-                <span className="w-9 shrink-0 text-right pr-2 text-slate-600 select-none">
+                <span className="w-9 shrink-0 text-right pr-2 text-[var(--text-muted)] opacity-60 select-none">
                   {line.oldNum}
                 </span>
                 {/* New line num */}
-                <span className="w-9 shrink-0 text-right pr-2 text-slate-600 select-none">
+                <span className="w-9 shrink-0 text-right pr-2 text-[var(--text-muted)] opacity-60 select-none">
                   {line.newNum}
                 </span>
                 {/* Prefix */}
                 <span
                   className={`w-4 shrink-0 text-center font-bold select-none ${
-                    isAdd ? "text-emerald-400" : isDel ? "text-rose-400" : "text-slate-600"
+                    isAdd ? "text-emerald-400" : isDel ? "text-rose-400" : "text-[var(--text-muted)] opacity-60"
                   }`}
                 >
                   {isAdd ? "+" : isDel ? "-" : " "}
@@ -232,21 +232,21 @@ export default function DiffViewer({
         </div>
       ) : (
         /* Split Side-by-Side View */
-        <div className="grid grid-cols-2 divide-x divide-slate-800 overflow-x-auto max-h-[380px]">
+        <div className="grid grid-cols-2 divide-x divide-[var(--border-subtle)] overflow-x-auto max-h-[380px]">
           {/* Left: Original */}
-          <div className="divide-y divide-slate-900/50">
+          <div className="divide-y divide-[var(--border-subtle)]">
             {splitLines.left.map((line, idx) => (
               <div
                 key={idx}
                 className={`flex items-start px-2 py-0.5 leading-5 select-text min-h-[20px] ${
                   line.type === "del"
-                    ? "bg-rose-950/30 text-rose-300"
+                    ? "bg-rose-950/30 text-rose-400"
                     : line.type === "empty"
-                    ? "bg-slate-950/60"
-                    : "text-slate-400"
+                    ? "bg-[var(--bg-card-inner)] opacity-40"
+                    : "text-[var(--text-main)]"
                 }`}
               >
-                <span className="w-8 shrink-0 text-right pr-2 text-slate-600 select-none text-[10px]">
+                <span className="w-8 shrink-0 text-right pr-2 text-[var(--text-muted)] opacity-60 select-none text-[10px]">
                   {line.num || ""}
                 </span>
                 <span className="w-3 shrink-0 text-center text-rose-400 select-none">
@@ -258,19 +258,19 @@ export default function DiffViewer({
           </div>
 
           {/* Right: Modified */}
-          <div className="divide-y divide-slate-900/50">
+          <div className="divide-y divide-[var(--border-subtle)]">
             {splitLines.right.map((line, idx) => (
               <div
                 key={idx}
                 className={`flex items-start px-2 py-0.5 leading-5 select-text min-h-[20px] ${
                   line.type === "add"
-                    ? "bg-emerald-950/30 text-emerald-300"
+                    ? "bg-emerald-950/30 text-emerald-400"
                     : line.type === "empty"
-                    ? "bg-slate-950/60"
-                    : "text-slate-400"
+                    ? "bg-[var(--bg-card-inner)] opacity-40"
+                    : "text-[var(--text-main)]"
                 }`}
               >
-                <span className="w-8 shrink-0 text-right pr-2 text-slate-600 select-none text-[10px]">
+                <span className="w-8 shrink-0 text-right pr-2 text-[var(--text-muted)] opacity-60 select-none text-[10px]">
                   {line.num || ""}
                 </span>
                 <span className="w-3 shrink-0 text-center text-emerald-400 select-none">