agmon 0.2.0 → 0.2.1

package/src/components/chat/MarkdownRenderer.js

@@ -21,7 +21,7 @@ export default function MarkdownRenderer({ content = "", onImageClick }) {
   if (!content) return null;
 
   return (
-    <div className="chat-markdown text-slate-200 text-sm leading-relaxed break-words">
+    <div className="chat-markdown text-[var(--text-main)] text-[var(--font-size-ui)] leading-relaxed break-words font-sans">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{
@@ -31,7 +31,7 @@ export default function MarkdownRenderer({ content = "", onImageClick }) {
               <span className="inline-block my-2 max-w-full group">
                 <span
                   onClick={() => onImageClick?.({ src: resolved, alt: alt || "Image preview" })}
-                  className="relative inline-block cursor-pointer overflow-hidden rounded-lg border border-slate-700/80 bg-slate-950 shadow-md transition-all hover:border-cyan-500/70 hover:shadow-cyan-500/10 hover:shadow-xl"
+                  className="relative inline-block cursor-pointer overflow-hidden rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-chat-code)] shadow-md transition-all hover:border-[var(--accent-secondary)] hover:shadow-xl"
                   title="Click to view popup preview"
                 >
                   {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -48,7 +48,7 @@ export default function MarkdownRenderer({ content = "", onImageClick }) {
                   </span>
                 </span>
                 {alt && (
-                  <span className="block mt-1 text-center text-[11px] text-slate-400 italic">
+                  <span className="block mt-1 text-center text-[11px] text-[var(--text-muted)] italic">
                     {alt}
                   </span>
                 )}
@@ -105,19 +105,19 @@ export default function MarkdownRenderer({ content = "", onImageClick }) {
                 <button
                   type="button"
                   onClick={() => onImageClick?.({ src: resolved, alt: cleanPath })}
-                  className="inline-flex items-center gap-1.5 px-2 py-0.5 my-0.5 rounded bg-cyan-950/80 hover:bg-cyan-900 border border-cyan-500/50 hover:border-cyan-400 text-cyan-300 font-mono text-[11px] transition-all cursor-pointer group shadow-sm"
+                  className="inline-flex items-center gap-1.5 px-2 py-0.5 my-0.5 rounded bg-[var(--bg-chat-user)] hover:brightness-110 border border-[var(--border-chat-user)] text-[var(--accent-secondary)] font-mono text-[11px] transition-all cursor-pointer group shadow-sm"
                   title="Click to preview image in popup"
                 >
-                  <ImageIcon className="w-3.5 h-3.5 text-cyan-400 shrink-0 transition-transform group-hover:scale-110" />
-                  <span className="underline decoration-cyan-500/40">{cleanPath}</span>
-                  <Maximize2 className="w-3 h-3 text-cyan-400 opacity-60 group-hover:opacity-100" />
+                  <ImageIcon className="w-3.5 h-3.5 text-[var(--accent-secondary)] shrink-0 transition-transform group-hover:scale-110" />
+                  <span className="underline decoration-[var(--border-chat-user)]">{cleanPath}</span>
+                  <Maximize2 className="w-3 h-3 text-[var(--accent-secondary)] opacity-60 group-hover:opacity-100" />
                 </button>
               );
             }
 
             return (
               <code
-                className="px-1.5 py-0.5 rounded bg-slate-800/90 text-cyan-300 font-mono text-[12px] border border-slate-700/50"
+                className="px-1.5 py-0.5 rounded bg-[var(--bg-chat-code)] text-[var(--accent-secondary)] font-mono text-[12px] border border-[var(--border-subtle)]"
                 {...props}
               >
                 {children}
@@ -133,10 +133,10 @@ export default function MarkdownRenderer({ content = "", onImageClick }) {
               return (
                 <span
                   onClick={() => onImageClick?.({ src: resolved, alt: String(children) || "Image link" })}
-                  className="cursor-pointer text-cyan-400 underline decoration-cyan-500/40 hover:decoration-cyan-400 hover:text-cyan-300 font-medium transition-colors inline-flex items-center gap-1.5"
+                  className="cursor-pointer text-[var(--accent-secondary)] underline decoration-[var(--accent-secondary)]/40 hover:decoration-[var(--accent-secondary)] hover:brightness-110 font-medium transition-colors inline-flex items-center gap-1.5"
                   title="Click to view image"
                 >
-                  <ImageIcon className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
+                  <ImageIcon className="w-3.5 h-3.5 text-[var(--accent-secondary)] shrink-0" />
                   <span>{children}</span>
                 </span>
               );
@@ -147,7 +147,7 @@ export default function MarkdownRenderer({ content = "", onImageClick }) {
                 href={href}
                 target="_blank"
                 rel="noreferrer noopener"
-                className="text-cyan-400 underline decoration-cyan-500/40 hover:decoration-cyan-400 hover:text-cyan-300 transition-colors"
+                className="text-[var(--accent-secondary)] underline decoration-[var(--accent-secondary)]/40 hover:decoration-[var(--accent-secondary)] hover:brightness-110 transition-colors"
               >
                 {children}
               </a>
@@ -155,8 +155,8 @@ export default function MarkdownRenderer({ content = "", onImageClick }) {
           },
           table({ children }) {
             return (
-              <div className="my-3 overflow-x-auto rounded-lg border border-slate-700/80 bg-slate-900/60">
-                <table className="min-w-full divide-y divide-slate-800 text-left text-xs">
+              <div className="my-3 overflow-x-auto rounded-lg border border-[var(--border-card)] bg-[var(--bg-card)]">
+                <table className="min-w-full divide-y divide-[var(--border-subtle)] text-left text-xs">
                   {children}
                 </table>
               </div>
@@ -164,21 +164,21 @@ export default function MarkdownRenderer({ content = "", onImageClick }) {
           },
           th({ children }) {
             return (
-              <th className="px-3 py-2 font-semibold text-slate-300 bg-slate-800/60">
+              <th className="px-3 py-2 font-semibold text-[var(--text-bright)] bg-[var(--bg-card-inner)]">
                 {children}
               </th>
             );
           },
           td({ children }) {
             return (
-              <td className="px-3 py-2 border-t border-slate-800/60 text-slate-300">
+              <td className="px-3 py-2 border-t border-[var(--border-subtle)] text-[var(--text-main)]">
                 {children}
               </td>
             );
           },
           blockquote({ children }) {
             return (
-              <blockquote className="my-2 border-l-2 border-cyan-500/60 pl-3 italic text-slate-400 text-xs">
+              <blockquote className="my-2 border-l-2 border-[var(--accent-primary)] pl-3 italic text-[var(--text-muted)] text-xs">
                 {children}
               </blockquote>
             );
@@ -193,13 +193,13 @@ export default function MarkdownRenderer({ content = "", onImageClick }) {
             return <p className="mb-2 last:mb-0">{children}</p>;
           },
           h1({ children }) {
-            return <h1 className="text-lg font-bold text-slate-100 my-2">{children}</h1>;
+            return <h1 className="text-lg font-bold text-[var(--text-bright)] my-2">{children}</h1>;
           },
           h2({ children }) {
-            return <h2 className="text-base font-semibold text-slate-100 my-2">{children}</h2>;
+            return <h2 className="text-base font-semibold text-[var(--text-bright)] my-2">{children}</h2>;
           },
           h3({ children }) {
-            return <h3 className="text-sm font-semibold text-slate-200 my-1.5">{children}</h3>;
+            return <h3 className="text-sm font-semibold text-[var(--text-bright)] my-1.5">{children}</h3>;
           },
         }}
       >

package/src/components/chat/SessionChatView.js

@@ -193,11 +193,11 @@ export default function SessionChatView({
     : MODE_LABELS[sessionTrace.mode] || sessionTrace.state || "Active";
 
   return (
-    <div className="flex flex-col h-full w-full bg-[#1e1e1e] text-[#cccccc] select-none overflow-hidden">
+    <div className="flex flex-col h-full w-full bg-[var(--bg-editor)] text-[var(--text-main)] select-none overflow-hidden">
       {/* 1. Header Area */}
       {isSidebar ? (
         /* Sidebar Variant Header Sub-bar: Compact identity & quick action tools */
-        <div className="border-b border-[#2b2b2b] bg-[#252526] px-3 py-2 flex items-center justify-between gap-2 shrink-0">
+        <div className="border-b border-[var(--border-subtle)] bg-[var(--bg-sidebar)] px-3 py-2 flex items-center justify-between gap-2 shrink-0">
           <div className="flex items-center gap-2 min-w-0">
             <div
               className="w-6 h-6 rounded-md border flex items-center justify-center shrink-0 relative"
@@ -214,7 +214,7 @@ export default function SessionChatView({
 
             <div className="min-w-0">
               <div className="flex items-center gap-1.5">
-                <span className="font-bold text-slate-200 text-xs truncate max-w-[130px]">
+                <span className="font-bold text-[var(--text-bright)] text-xs truncate max-w-[130px]">
                   {sessionTrace.account || `Desk #${(sessionTrace.deskIndex ?? 0) + 1}`}
                 </span>
                 <span
@@ -228,7 +228,7 @@ export default function SessionChatView({
                   <span>{isAppClient ? "APP" : "CLI"}</span>
                 </span>
               </div>
-              <div className="text-[10px] text-slate-400 font-mono truncate">
+              <div className="text-[10px] text-[var(--text-muted)] font-mono truncate">
                 {session?.model || sessionTrace.model || "Unavailable"}
               </div>
             </div>
@@ -242,7 +242,7 @@ export default function SessionChatView({
               className={`p-1 rounded text-xs transition-colors cursor-pointer ${
                 isSearchOpen
                   ? "bg-cyan-950 border border-cyan-500/50 text-cyan-300"
-                  : "text-slate-400 hover:text-white hover:bg-[#333333]"
+                  : "text-[var(--text-muted)] hover:text-[var(--text-bright)] hover:bg-[var(--bg-hover)]"
               }`}
               title="Search transcript (Ctrl+F)"
             >
@@ -255,7 +255,7 @@ export default function SessionChatView({
               className={`p-1 rounded text-xs transition-colors cursor-pointer ${
                 showInfoDrawer
                   ? "bg-cyan-950 border border-cyan-500/50 text-cyan-300"
-                  : "text-slate-400 hover:text-white hover:bg-[#333333]"
+                  : "text-[var(--text-muted)] hover:text-[var(--text-bright)] hover:bg-[var(--bg-hover)]"
               }`}
               title="Agent Details & Specs"
             >
@@ -265,7 +265,7 @@ export default function SessionChatView({
             {/* Refresh */}
             <button
               onClick={refresh}
-              className="p-1 rounded text-slate-400 hover:text-white hover:bg-[#333333] 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="Refresh transcript"
             >
               <RefreshCw className="w-3.5 h-3.5" />
@@ -275,7 +275,7 @@ export default function SessionChatView({
             {onStartReplay && (
               <button
                 onClick={() => onStartReplay(sessionId || targetTraceId)}
-                className="p-1 rounded text-cyan-400 hover:text-cyan-200 hover:bg-[#333333] transition-colors cursor-pointer"
+                className="p-1 rounded text-cyan-400 hover:text-cyan-200 hover:bg-[var(--bg-hover)] transition-colors cursor-pointer"
                 title="Time-Machine: Replay this session"
               >
                 <RotateCcw className="w-3.5 h-3.5" />
@@ -285,7 +285,7 @@ export default function SessionChatView({
             {/* Export */}
             <button
               onClick={() => setIsExportModalOpen(true)}
-              className="p-1 rounded text-slate-400 hover:text-white hover:bg-[#333333] 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="Export session report (HTML, PDF, Markdown)"
             >
               <Download className="w-3.5 h-3.5" />
@@ -294,7 +294,7 @@ export default function SessionChatView({
             {/* Open in Standalone Detached Window (VS Code style) */}
             <button
               onClick={() => openChatInNewWindow(sessionId || targetTraceId)}
-              className="p-1 rounded text-slate-400 hover:text-cyan-300 hover:bg-[#333333] transition-colors cursor-pointer"
+              className="p-1 rounded text-[var(--text-muted)] hover:text-cyan-300 hover:bg-[var(--bg-hover)] transition-colors cursor-pointer"
               title="Open in Detached Window (VS Code style)"
             >
               <AppWindow className="w-3.5 h-3.5" />
@@ -303,7 +303,7 @@ export default function SessionChatView({
         </div>
       ) : (
         /* Modal Variant Header: Full-width modal bar */
-        <div className="flex items-center justify-between px-5 py-3 border-b border-slate-800 bg-slate-900/80 rounded-t-2xl shrink-0">
+        <div className="flex items-center justify-between px-5 py-3 border-b border-[var(--border-subtle)] bg-[var(--bg-titlebar)] rounded-t-2xl shrink-0">
           <div className="flex items-center gap-3 min-w-0">
             <div
               className="w-9 h-9 rounded-xl border flex items-center justify-center shrink-0 shadow-inner relative"
@@ -320,7 +320,7 @@ export default function SessionChatView({
 
             <div className="min-w-0">
               <div className="flex items-center gap-2">
-                <h2 className="text-sm font-bold text-slate-100 truncate">
+                <h2 className="text-sm font-bold text-[var(--text-bright)] truncate">
                   {sessionTrace.account || "AI Agent Session"}
                 </h2>
                 {/* Client Type badge */}
@@ -351,14 +351,14 @@ export default function SessionChatView({
                       ? "border-rose-500/50 bg-rose-950/60 text-rose-300 animate-pulse"
                       : isAgentActive
                       ? "border-cyan-500/50 bg-cyan-950/60 text-cyan-300"
-                      : "border-slate-700 bg-slate-800/80 text-slate-300"
+                      : "border-[var(--border-subtle)] bg-[var(--bg-card)] text-[var(--text-main)]"
                   }`}
                 >
                   {modeText}
                 </span>
               </div>
 
-              <div className="text-[11px] text-slate-400 font-mono truncate mt-0.5 flex items-center gap-1.5">
+              <div className="text-[11px] text-[var(--text-muted)] font-mono truncate mt-0.5 flex items-center gap-1.5">
                 <span>{sessionTrace.connectionId}</span>
                 <span>•</span>
                 <span className="text-cyan-400 uppercase">
@@ -367,7 +367,7 @@ export default function SessionChatView({
                 {session?.cwd && (
                   <>
                     <span>•</span>
-                    <span className="text-slate-400 truncate max-w-44">{session.cwd}</span>
+                    <span className="text-[var(--text-muted)] truncate max-w-44">{session.cwd}</span>
                   </>
                 )}
               </div>
@@ -396,7 +396,7 @@ export default function SessionChatView({
               className={`p-1.5 rounded-lg border text-xs font-medium transition-colors cursor-pointer ${
                 isSearchOpen
                   ? "bg-cyan-950 border-cyan-500/50 text-cyan-300 shadow-sm shadow-cyan-500/10"
-                  : "border-slate-800 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+                  : "border-[var(--border-subtle)] text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-bright)]"
               }`}
               title="Search transcript (Ctrl+F)"
             >
@@ -409,7 +409,7 @@ export default function SessionChatView({
               className={`flex items-center gap-1 px-2 py-1.5 rounded-lg border text-xs font-medium transition-colors cursor-pointer ${
                 showInfoDrawer
                   ? "bg-cyan-950 border-cyan-500/50 text-cyan-300"
-                  : "border-slate-800 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+                  : "border-[var(--border-subtle)] text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-bright)]"
               }`}
               title="Agent Details & Specs"
             >
@@ -421,7 +421,7 @@ export default function SessionChatView({
             {/* Refresh */}
             <button
               onClick={refresh}
-              className="p-1.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors cursor-pointer"
+              className="p-1.5 rounded-lg text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-bright)] transition-colors cursor-pointer"
               title="Refresh transcript"
             >
               <RefreshCw className="w-4 h-4" />
@@ -445,7 +445,7 @@ export default function SessionChatView({
             {/* Export */}
             <button
               onClick={() => setIsExportModalOpen(true)}
-              className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-medium border border-slate-700 transition-colors cursor-pointer"
+              className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-[var(--bg-card)] hover:bg-[var(--bg-hover)] text-[var(--text-main)] text-xs font-medium border border-[var(--border-subtle)] transition-colors cursor-pointer"
               title="Export session report (HTML, PDF, Markdown)"
             >
               <Download className="w-3.5 h-3.5" />
@@ -456,7 +456,7 @@ export default function SessionChatView({
             {onDockToSidebar && (
               <button
                 onClick={() => onDockToSidebar(sessionTrace)}
-                className="flex items-center gap-1 px-2 py-1.5 rounded-lg bg-slate-800 hover:bg-[#007acc] text-slate-300 hover:text-white text-xs font-medium border border-slate-700 transition-colors cursor-pointer"
+                className="flex items-center gap-1 px-2 py-1.5 rounded-lg bg-[var(--bg-card)] hover:bg-[var(--accent-primary)] text-[var(--text-main)] hover:text-white text-xs font-medium border border-[var(--border-subtle)] transition-colors cursor-pointer"
                 title="Dock into Sidebar"
               >
                 <PanelRightClose className="w-3.5 h-3.5" />
@@ -470,7 +470,7 @@ export default function SessionChatView({
                 openChatInNewWindow(sessionId || targetTraceId);
                 onClose?.();
               }}
-              className="flex items-center gap-1 px-2 py-1.5 rounded-lg bg-slate-800 hover:bg-[#007acc] text-slate-300 hover:text-white text-xs font-medium border border-slate-700 transition-colors cursor-pointer"
+              className="flex items-center gap-1 px-2 py-1.5 rounded-lg bg-[var(--bg-card)] hover:bg-[var(--accent-primary)] text-[var(--text-main)] hover:text-white text-xs font-medium border border-[var(--border-subtle)] transition-colors cursor-pointer"
               title="Open in Detached Window (VS Code style)"
             >
               <AppWindow className="w-3.5 h-3.5 text-cyan-400" />
@@ -484,7 +484,7 @@ export default function SessionChatView({
                 className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-xs font-medium transition-colors cursor-pointer ${
                   isFullscreen
                     ? "bg-cyan-950 border-cyan-500/50 text-cyan-300 shadow-sm shadow-cyan-500/10 font-semibold"
-                    : "border-slate-700 bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white"
+                    : "border-[var(--border-subtle)] bg-[var(--bg-card)] text-[var(--text-main)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-bright)]"
                 }`}
                 title={isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
               >
@@ -496,7 +496,7 @@ export default function SessionChatView({
             {/* Close */}
             <button
               onClick={onClose}
-              className="p-1.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-rose-400 transition-colors cursor-pointer"
+              className="p-1.5 rounded-lg text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-rose-400 transition-colors cursor-pointer"
               title="Close window"
             >
               <X className="w-4 h-4" />
@@ -507,7 +507,7 @@ export default function SessionChatView({
 
       {/* 2. Floating Session Search Bar */}
       {isSearchOpen && (
-        <div className={`py-2 border-b border-[#2b2b2b] bg-[#252526] flex justify-end shrink-0 ${isSidebar ? "px-3" : "px-5"}`}>
+        <div className={`py-2 border-b border-[var(--border-subtle)] bg-[var(--bg-sidebar)] flex justify-end shrink-0 ${isSidebar ? "px-3" : "px-5"}`}>
           <SessionSearch
             isOpen={isSearchOpen}
             onClose={() => setIsSearchOpen(false)}
@@ -603,8 +603,8 @@ export default function SessionChatView({
       )}
 
       {/* 5. Subheader: Filter bar & Live Telemetry toggle */}
-      <div className={`flex items-center justify-between border-b border-[#2b2b2b] bg-[#1e1e1e] text-xs shrink-0 py-1.5 ${isSidebar ? "px-3" : "px-5"}`}>
-        <div className="flex items-center gap-1 bg-[#181818] p-0.5 rounded-lg border border-[#2b2b2b] overflow-x-auto max-w-full">
+      <div className={`flex items-center justify-between border-b border-[var(--border-subtle)] bg-[var(--bg-editor)] text-xs shrink-0 py-1.5 ${isSidebar ? "px-3" : "px-5"}`}>
+        <div className="flex items-center gap-1 bg-[var(--bg-workbench)] p-0.5 rounded-lg border border-[var(--border-subtle)] overflow-x-auto max-w-full">
           {[
             { id: "all", label: "All", icon: MessageSquare },
             { id: "prompts", label: "Prompts", icon: User },
@@ -619,8 +619,8 @@ export default function SessionChatView({
                 onClick={() => setFilter(tab.id)}
                 className={`flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-medium transition-all whitespace-nowrap cursor-pointer ${
                   filter === tab.id
-                    ? "bg-[#252526] text-cyan-300 shadow-sm font-semibold border border-[#3e3e42]"
-                    : "text-slate-400 hover:text-slate-200 hover:bg-[#252526]/50"
+                    ? "bg-[var(--bg-card)] text-[var(--accent-secondary)] shadow-sm font-semibold border border-[var(--border-card)]"
+                    : "text-[var(--text-muted)] hover:text-[var(--text-bright)] hover:bg-[var(--bg-hover)]"
                 }`}
               >
                 <Icon className="w-3 h-3 shrink-0" />
@@ -631,12 +631,12 @@ export default function SessionChatView({
         </div>
 
         <div className="flex items-center gap-2 shrink-0 ml-2">
-          <label className="flex items-center gap-1 text-[11px] text-slate-400 cursor-pointer select-none">
+          <label className="flex items-center gap-1 text-[11px] text-[var(--text-muted)] cursor-pointer select-none">
             <input
               type="checkbox"
               checked={autoScroll}
               onChange={(e) => setAutoScroll(e.target.checked)}
-              className="rounded border-slate-700 bg-slate-900 text-cyan-500 focus:ring-0 w-3 h-3 cursor-pointer"
+              className="rounded border-[var(--border-card)] bg-[var(--bg-card)] text-[var(--accent-primary)] focus:ring-0 w-3 h-3 cursor-pointer"
             />
             <span className="hidden sm:inline">Auto-scroll</span>
           </label>
@@ -648,13 +648,13 @@ export default function SessionChatView({
         {filter === "telemetry" ? (
           /* VIEW 1: Live Telemetry Drawer */
           <div className="space-y-2 font-mono text-[11px]">
-            <div className="flex items-center justify-between pb-1.5 mb-2 border-b border-[#2b2b2b] text-xs text-slate-400">
-              <span className="font-semibold text-slate-200">Terminal Telemetry Stream</span>
+            <div className="flex items-center justify-between pb-1.5 mb-2 border-b border-[var(--border-subtle)] text-xs text-[var(--text-muted)]">
+              <span className="font-semibold text-[var(--text-bright)]">Terminal Telemetry Stream</span>
               <span>Last {logs.length} actions</span>
             </div>
 
             {logs.length === 0 ? (
-              <div className="py-12 text-center text-slate-500 text-xs">
+              <div className="py-12 text-center text-[var(--text-muted)] text-xs">
                 No telemetry actions recorded yet for this session.
               </div>
             ) : (
@@ -663,9 +663,9 @@ export default function SessionChatView({
                 return (
                   <div
                     key={idx}
-                    className="flex items-start gap-2 p-2 rounded-lg bg-[#141414] border border-[#2b2b2b] hover:border-slate-700 transition-colors"
+                    className="flex items-start gap-2 p-2 rounded-lg bg-[var(--bg-chat-code)] border border-[var(--border-subtle)] hover:border-[var(--border-card)] transition-colors"
                   >
-                    <span className="text-[10px] text-slate-500 whitespace-nowrap pt-0.5">
+                    <span className="text-[10px] text-[var(--text-muted)] opacity-70 whitespace-nowrap pt-0.5">
                       {formatLogTimestamp(log.timestamp)}
                     </span>
                     <span
@@ -674,9 +674,9 @@ export default function SessionChatView({
                       {log.type}
                     </span>
                     <div className="min-w-0 flex-1">
-                      <div className="text-slate-200 font-medium truncate">{log.summary || log.type}</div>
+                      <div className="text-[var(--text-bright)] font-medium truncate">{log.summary || log.type}</div>
                       {log.detail && (
-                        <div className="text-slate-400 text-[11px] truncate mt-0.5 whitespace-pre-wrap break-all">
+                        <div className="text-[var(--text-muted)] text-[11px] truncate mt-0.5 whitespace-pre-wrap break-all">
                           {log.detail}
                         </div>
                       )}
@@ -691,14 +691,14 @@ export default function SessionChatView({
           /* VIEW 2: AI Conversation Turns */
           <>
             {loading && turns.length === 0 && (
-              <div className="h-full flex flex-col items-center justify-center text-slate-400 gap-2 py-12">
+              <div className="h-full flex flex-col items-center justify-center text-[var(--text-muted)] gap-2 py-12">
                 <RefreshCw className="w-5 h-5 animate-spin text-cyan-400" />
                 <span className="text-xs">Loading session transcript...</span>
               </div>
             )}
 
             {error && turns.length === 0 && (
-              <div className="h-full flex flex-col items-center justify-center text-slate-400 gap-2 py-12">
+              <div className="h-full flex flex-col items-center justify-center text-[var(--text-muted)] gap-2 py-12">
                 <div className="p-3 rounded-lg bg-rose-950/30 border border-rose-800/40 text-rose-300 text-xs text-center max-w-md">
                   <p className="font-semibold mb-1">Unable to load transcript</p>
                   <p className="text-[11px] text-rose-400">{error}</p>
@@ -707,7 +707,7 @@ export default function SessionChatView({
             )}
 
             {!loading && turns.length === 0 && !error && (
-              <div className="h-full flex flex-col items-center justify-center text-slate-500 gap-2 py-12">
+              <div className="h-full flex flex-col items-center justify-center text-[var(--text-muted)] gap-2 py-12">
                 <Layers className="w-8 h-8 opacity-40" />
                 <span className="text-xs">No conversation history found for this session.</span>
               </div>
@@ -729,7 +729,7 @@ export default function SessionChatView({
       </div>
 
       {/* 7. Footer Metrics */}
-      <div className={`border-t border-[#2b2b2b] bg-[#181818] flex items-center justify-between text-[11px] text-slate-400 font-mono shrink-0 py-2 ${isSidebar ? "px-3" : "px-5 rounded-b-2xl"}`}>
+      <div className={`border-t border-[var(--border-subtle)] bg-[var(--bg-workbench)] flex items-center justify-between text-[11px] text-[var(--text-muted)] font-mono shrink-0 py-2 ${isSidebar ? "px-3" : "px-5 rounded-b-2xl"}`}>
         <div className="flex items-center gap-2 truncate">
           <span>{turns.length} turns</span>
           <span>•</span>

package/src/components/chat/SessionSearch.js

@@ -129,8 +129,8 @@ export default function SessionSearch({
   if (!isOpen) return null;
 
   return (
-    <div className={`flex items-center gap-1.5 bg-slate-900/95 border border-slate-700/80 rounded-xl px-2.5 py-1.5 shadow-2xl backdrop-blur-md animate-fadeIn z-30 ${className}`}>
-      <Search className="w-4 h-4 text-slate-400 shrink-0" />
+    <div className={`flex items-center gap-1.5 bg-[var(--bg-card)] border border-[var(--border-card)] rounded-xl px-2.5 py-1.5 shadow-2xl backdrop-blur-md animate-fadeIn z-30 ${className}`}>
+      <Search className="w-4 h-4 text-[var(--text-muted)] shrink-0" />
       
       <input
         ref={inputRef}
@@ -139,22 +139,22 @@ export default function SessionSearch({
         onChange={(e) => setSearchTerm(e.target.value)}
         onKeyDown={handleKeyDown}
         placeholder="Search transcript (content, code, tools)..."
-        className="bg-transparent border-none text-xs text-slate-200 placeholder:text-slate-500 focus:outline-none w-56 md:w-64"
+        className="bg-transparent border-none text-xs text-[var(--text-bright)] placeholder:text-[var(--text-muted)] focus:outline-none w-56 md:w-64 font-sans"
       />
 
       {/* Match Counter */}
       {searchTerm.trim() && (
-        <span className="text-[11px] font-mono px-1.5 py-0.5 rounded bg-slate-800 text-slate-300 border border-slate-700/60 shrink-0">
+        <span className="text-[11px] font-mono px-1.5 py-0.5 rounded bg-[var(--bg-card-inner)] text-[var(--text-main)] border border-[var(--border-subtle)] shrink-0">
           {matches.length > 0 ? `${currentIndex + 1}/${matches.length}` : "0 matches"}
         </span>
       )}
 
       {/* Prev / Next controls */}
-      <div className="flex items-center border-l border-slate-800 pl-1.5 gap-0.5">
+      <div className="flex items-center border-l border-[var(--border-subtle)] pl-1.5 gap-0.5">
         <button
           onClick={handlePrev}
           disabled={matches.length <= 1}
-          className="p-1 rounded text-slate-400 hover:text-slate-200 hover:bg-slate-800 disabled:opacity-40 disabled:hover:bg-transparent transition-colors"
+          className="p-1 rounded text-[var(--text-muted)] hover:text-[var(--text-bright)] hover:bg-[var(--bg-hover)] disabled:opacity-40 disabled:hover:bg-transparent transition-colors cursor-pointer"
           title="Previous match (Shift+Enter)"
         >
           <ChevronUp className="w-3.5 h-3.5" />
@@ -162,7 +162,7 @@ export default function SessionSearch({
         <button
           onClick={handleNext}
           disabled={matches.length <= 1}
-          className="p-1 rounded text-slate-400 hover:text-slate-200 hover:bg-slate-800 disabled:opacity-40 disabled:hover:bg-transparent transition-colors"
+          className="p-1 rounded text-[var(--text-muted)] hover:text-[var(--text-bright)] hover:bg-[var(--bg-hover)] disabled:opacity-40 disabled:hover:bg-transparent transition-colors cursor-pointer"
           title="Next match (Enter)"
         >
           <ChevronDown className="w-3.5 h-3.5" />
@@ -172,7 +172,7 @@ export default function SessionSearch({
       {/* Close button */}
       <button
         onClick={onClose}
-        className="p-1 rounded text-slate-400 hover:text-rose-400 hover:bg-slate-800/80 transition-colors ml-1"
+        className="p-1 rounded text-[var(--text-muted)] hover:text-rose-400 hover:bg-[var(--bg-hover)] transition-colors ml-1 cursor-pointer"
         title="Close search (Esc)"
       >
         <X className="w-3.5 h-3.5" />

package/src/components/chat/ThinkingAccordion.js

@@ -11,10 +11,10 @@ export default function ThinkingAccordion({ thinking = "" }) {
   const wordCount = thinking.trim().split(/\s+/).length;
 
   return (
-    <div className="my-2.5 rounded-lg border border-purple-900/40 bg-purple-950/20 overflow-hidden transition-all">
+    <div className="my-2.5 rounded-lg border border-purple-500/30 bg-purple-500/10 overflow-hidden transition-all">
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="w-full flex items-center justify-between px-3 py-2 text-left bg-purple-950/30 hover:bg-purple-900/30 transition-colors text-xs text-purple-300 font-medium"
+        className="w-full flex items-center justify-between px-3 py-2 text-left bg-purple-500/15 hover:bg-purple-500/20 transition-colors text-xs text-purple-400 dark:text-purple-300 font-medium cursor-pointer"
       >
         <div className="flex items-center gap-2">
           <Brain className="w-3.5 h-3.5 text-purple-400" />
@@ -31,7 +31,7 @@ export default function ThinkingAccordion({ thinking = "" }) {
       </button>
 
       {isOpen && (
-        <div className="p-3 text-xs text-purple-200/90 leading-relaxed font-mono whitespace-pre-wrap border-t border-purple-900/30 max-h-96 overflow-y-auto bg-black/40">
+        <div className="p-3 text-xs text-[var(--text-main)] leading-relaxed font-mono whitespace-pre-wrap border-t border-purple-500/20 max-h-96 overflow-y-auto bg-[var(--bg-chat-code)]">
           {thinking.trim()}
         </div>
       )}

package/src/components/chat/ToolCallCard.js

@@ -97,14 +97,14 @@ export default function ToolCallCard({ tool, onImageClick }) {
     <div className={`my-2 rounded-xl border ${styleClass} overflow-hidden text-xs transition-all shadow-md`}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-slate-800/40 transition-colors"
+        className="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-[var(--bg-hover)] transition-colors cursor-pointer"
       >
         <div className="flex items-center gap-2 min-w-0 flex-1">
           <Icon className="w-3.5 h-3.5 shrink-0 opacity-80" />
-          <span className="font-semibold uppercase tracking-wider text-[10px] px-1.5 py-0.5 rounded bg-slate-900/60 border border-slate-700/50 shrink-0">
+          <span className="font-semibold uppercase tracking-wider text-[10px] px-1.5 py-0.5 rounded bg-[var(--bg-card-inner)] border border-[var(--border-subtle)] text-[var(--text-bright)] shrink-0">
             {type}
           </span>
-          <span className="truncate font-mono text-[11px] text-slate-200">
+          <span className="truncate font-mono text-[11px] text-[var(--text-bright)]">
             {detailSummary}
           </span>
         </div>
@@ -127,16 +127,16 @@ export default function ToolCallCard({ tool, onImageClick }) {
           )}
 
           {isOpen ? (
-            <ChevronDown className="w-3.5 h-3.5 text-slate-400" />
+            <ChevronDown className="w-3.5 h-3.5 text-[var(--text-muted)]" />
           ) : (
-            <ChevronRight className="w-3.5 h-3.5 text-slate-400" />
+            <ChevronRight className="w-3.5 h-3.5 text-[var(--text-muted)]" />
           )}
         </div>
       </button>
 
       {/* Special Inline Cards when expanded */}
       {isOpen && (
-        <div className="p-3 border-t border-slate-800/60 bg-slate-950/70 space-y-3">
+        <div className="p-3 border-t border-[var(--border-subtle)] bg-[var(--bg-chat-tool)] space-y-3">
           {/* 1. Subagent Tree View */}
           {isSubagentTool && (
             <SubagentTree