From 34023f426e0080df0af4b93b2fb0cfae03d55d50 Mon Sep 17 00:00:00 2001
From: Dev M <devtechedge@gmail.com>
Date: Sun, 20 Sep 2026 07:28:47 +0530
Subject: [PATCH] ui: modern surface revamp for light and dark themes

Bright high-contrast dark typography, fully light chrome in light mode,
contained report pane with thin auto-hide scrollbar, Inter + JetBrains Mono,
and theme CSS variables replacing hard-coded dark surfaces.
---
 src/app/globals.css                     | 364 +++++++++++++++++++-----
 src/app/layout.tsx                      |  19 +-
 src/components/synthesis/AgentGraph.tsx |  44 ++-
 src/components/synthesis/App.tsx        | 172 ++++++-----
 src/components/synthesis/ReportView.tsx |   7 +-
 src/components/synthesis/Timeline.tsx   |  34 +--
 6 files changed, 463 insertions(+), 177 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 30f6b6e..b09fcd0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,26 +1,76 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+/* Class-based dark mode (html.dark / data-theme) for Tailwind dark: variants */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: var(--font-jetbrains), ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-solid: var(--surface-solid);
+  --color-surface-raised: var(--surface-raised);
+  --color-fg: var(--fg);
+  --color-fg-heading: var(--fg-heading);
+  --color-muted: var(--muted);
+  --color-muted-strong: var(--muted-strong);
+  --color-border: var(--border);
+  --color-input: var(--input-bg);
+  --color-inset: var(--inset);
+  --color-header: var(--header-bg);
+  --color-accent: var(--accent);
+  --color-accent-2: var(--accent-2);
+}
+
 :root,
 [data-theme="dark"] {
   color-scheme: dark;
-  --bg: #05060f;
-  --surface: rgba(255, 255, 255, 0.03);
-  --fg: #e2e8f0;
+  --bg: #030712;
+  --surface: rgba(255, 255, 255, 0.035);
+  --surface-solid: #0a0e1a;
+  --surface-raised: rgba(255, 255, 255, 0.055);
+  --fg: #f8fafc;
+  --fg-heading: #ffffff;
   --muted: #94a3b8;
+  --muted-strong: #cbd5e1;
   --border: rgba(255, 255, 255, 0.1);
+  --input-bg: #0a0e1a;
+  --inset: rgba(0, 0, 0, 0.28);
+  --header-bg: rgba(3, 7, 18, 0.82);
+  --accent: #a78bfa;
+  --accent-2: #22d3ee;
+  --glow-violet: rgba(124, 58, 237, 0.22);
+  --glow-cyan: rgba(6, 182, 212, 0.14);
+  --glow-fuchsia: rgba(217, 70, 239, 0.1);
+  --grid-line: rgba(148, 163, 184, 0.055);
 }
 
 [data-theme="light"] {
   color-scheme: light;
-  --bg: #f4f2fb;
+  --bg: #f8fafc;
   --surface: #ffffff;
+  --surface-solid: #ffffff;
+  --surface-raised: #f1f5f9;
   --fg: #0f172a;
-  --muted: #475569;
-  --border: rgba(15, 23, 42, 0.12);
+  --fg-heading: #020617;
+  --muted: #64748b;
+  --muted-strong: #334155;
+  --border: rgba(15, 23, 42, 0.1);
+  --input-bg: #ffffff;
+  --inset: rgba(15, 23, 42, 0.04);
+  --header-bg: rgba(255, 255, 255, 0.88);
+  --accent: #7c3aed;
+  --accent-2: #0891b2;
+  --glow-violet: rgba(124, 58, 237, 0.1);
+  --glow-cyan: rgba(6, 182, 212, 0.08);
+  --glow-fuchsia: rgba(217, 70, 239, 0.06);
+  --grid-line: rgba(15, 23, 42, 0.05);
 }
 
-html[data-theme="light"] { color-scheme: light; }
+html[data-theme="light"] {
+  color-scheme: light;
+}
 
 html {
   scroll-behavior: smooth;
@@ -30,14 +80,19 @@ html {
 body {
   background-color: var(--bg);
   color: var(--fg);
+  font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
 }
 
-/* Ambient background: deep space gradient + faint engineering grid */
+/* Ambient background: deep space / soft cool light + faint engineering grid */
 .app-bg {
   position: relative;
   isolation: isolate;
+  min-height: 100vh;
+  background-color: var(--bg);
+  color: var(--fg);
 }
 .app-bg::before {
   content: "";
@@ -45,9 +100,10 @@ body {
   inset: 0;
   z-index: -2;
   background:
-    radial-gradient(1100px 700px at 12% -8%, rgba(124, 58, 237, 0.22), transparent 60%),
-    radial-gradient(1000px 620px at 92% 4%, rgba(6, 182, 212, 0.16), transparent 60%),
-    radial-gradient(900px 600px at 50% 120%, rgba(217, 70, 239, 0.12), transparent 60%);
+    radial-gradient(1100px 700px at 12% -8%, var(--glow-violet), transparent 60%),
+    radial-gradient(1000px 620px at 92% 4%, var(--glow-cyan), transparent 60%),
+    radial-gradient(900px 600px at 50% 120%, var(--glow-fuchsia), transparent 60%),
+    var(--bg);
 }
 .app-bg::after {
   content: "";
@@ -55,14 +111,109 @@ body {
   inset: 0;
   z-index: -1;
   background-image:
-    linear-gradient(to right, rgba(148, 163, 184, 0.06) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
+    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
   background-size: 44px 44px;
   mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
   -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
+  pointer-events: none;
 }
 
-/* Overlay hover-reveal scrollbars: invisible until the pointer is over that pane. */
+/* Semantic surface primitives — flip with [data-theme] */
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 1rem;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+.panel-solid {
+  background: var(--surface-solid);
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+}
+.surface-inset {
+  background: var(--inset);
+  border: 1px solid var(--border);
+}
+.chrome-header {
+  background: var(--header-bg);
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(16px) saturate(1.2);
+  -webkit-backdrop-filter: blur(16px) saturate(1.2);
+}
+.input-surface {
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  color: var(--fg);
+}
+.input-surface::placeholder {
+  color: color-mix(in oklab, var(--muted) 75%, transparent);
+}
+.tab-rail {
+  background: var(--inset);
+  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
+  border-radius: 0.5rem;
+}
+.text-heading {
+  color: var(--fg-heading);
+}
+.text-body {
+  color: var(--fg);
+}
+.text-soft {
+  color: var(--muted-strong);
+}
+.text-dim {
+  color: var(--muted);
+}
+.border-theme {
+  border-color: var(--border);
+}
+
+/* Overlay / auto-hide thin scrollbars — appear on hover, focus, or scroll intent */
+.scrollbar-overlay {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  scrollbar-gutter: stable;
+}
+.scrollbar-overlay:hover,
+.scrollbar-overlay:focus,
+.scrollbar-overlay:focus-within,
+.scrollbar-overlay.is-scrolling {
+  scrollbar-color: color-mix(in oklab, var(--fg) 35%, transparent) transparent;
+}
+.scrollbar-overlay::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background: transparent;
+}
+.scrollbar-overlay::-webkit-scrollbar-track,
+.scrollbar-overlay::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.scrollbar-overlay::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.scrollbar-overlay::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background-clip: padding-box;
+}
+.scrollbar-overlay:hover::-webkit-scrollbar-thumb,
+.scrollbar-overlay:focus::-webkit-scrollbar-thumb,
+.scrollbar-overlay:focus-within::-webkit-scrollbar-thumb,
+.scrollbar-overlay.is-scrolling::-webkit-scrollbar-thumb {
+  background-color: color-mix(in oklab, var(--fg) 35%, transparent);
+}
+.scrollbar-overlay:hover::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in oklab, var(--fg) 55%, transparent);
+}
+
+/* Global overlay scrollbars for fine pointers */
 @media (hover: hover) and (pointer: fine) {
   * {
     scrollbar-width: thin;
@@ -74,8 +225,8 @@ body {
     scrollbar-color: color-mix(in oklab, var(--fg) 32%, transparent) transparent;
   }
   *::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
     background: transparent;
   }
   *::-webkit-scrollbar-track,
@@ -90,7 +241,7 @@ body {
   *::-webkit-scrollbar-thumb {
     background-color: transparent;
     border-radius: 999px;
-    border: 2px solid transparent;
+    border: 1px solid transparent;
     background-clip: padding-box;
   }
   *:not(html):not(body):hover::-webkit-scrollbar-thumb,
@@ -103,42 +254,83 @@ body {
   }
 }
 
-/* Markdown theming (overrides Tailwind typography vars for a premium dark look) */
+/* Report / content pane: contained reading height */
+.report-pane {
+  max-height: min(70vh, 720px);
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+}
+
+/* Markdown theming */
 .markdown-body {
-  --tw-prose-body: #cbd5e1;
-  --tw-prose-headings: #f8fafc;
-  --tw-prose-lead: #94a3b8;
-  --tw-prose-links: #c4b5fd;
-  --tw-prose-bold: #ffffff;
-  --tw-prose-counters: #a78bfa;
-  --tw-prose-bullets: #6366f1;
-  --tw-prose-hr: rgba(148, 163, 184, 0.18);
-  --tw-prose-quotes: #e2e8f0;
-  --tw-prose-quote-borders: #8b5cf6;
-  --tw-prose-captions: #94a3b8;
-  --tw-prose-th-borders: rgba(148, 163, 184, 0.25);
-  --tw-prose-td-borders: rgba(148, 163, 184, 0.15);
-  --tw-prose-code: #e9d5ff;
-}
-.markdown-body :where(h2, h3, h4) { scroll-margin-top: 6rem; }
+  --tw-prose-body: var(--fg);
+  --tw-prose-headings: var(--fg-heading);
+  --tw-prose-lead: var(--muted);
+  --tw-prose-links: var(--accent);
+  --tw-prose-bold: var(--fg-heading);
+  --tw-prose-counters: var(--accent);
+  --tw-prose-bullets: var(--accent);
+  --tw-prose-hr: var(--border);
+  --tw-prose-quotes: var(--fg);
+  --tw-prose-quote-borders: var(--accent);
+  --tw-prose-captions: var(--muted);
+  --tw-prose-th-borders: var(--border);
+  --tw-prose-td-borders: var(--border);
+  --tw-prose-code: color-mix(in oklab, var(--accent) 85%, var(--fg));
+  color: var(--fg);
+  font-size: 0.9375rem;
+  line-height: 1.7;
+}
+.markdown-body :where(h1, h2, h3, h4) {
+  color: var(--fg-heading);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.markdown-body :where(h2, h3, h4) {
+  scroll-margin-top: 6rem;
+}
 .markdown-body :where(h2) {
-  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
+  border-bottom: 1px solid var(--border);
   padding-bottom: 0.4rem;
 }
-.markdown-body :where(table) { font-size: 0.875rem; overflow: hidden; border-radius: 0.6rem; }
+.markdown-body :where(p, li) {
+  color: var(--fg);
+}
+.markdown-body :where(table) {
+  font-size: 0.875rem;
+  overflow: hidden;
+  border-radius: 0.6rem;
+}
 .markdown-body :where(th) {
-  background: rgba(139, 92, 246, 0.12);
-  color: #f1f5f9;
+  background: color-mix(in oklab, var(--accent) 14%, transparent);
+  color: var(--fg-heading);
   font-weight: 600;
 }
-.markdown-body :where(tr):nth-child(even) td { background: rgba(148, 163, 184, 0.04); }
+.markdown-body :where(tr):nth-child(even) td {
+  background: color-mix(in oklab, var(--muted) 6%, transparent);
+}
 .markdown-body :where(blockquote) {
-  background: linear-gradient(180deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.03));
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklab, var(--accent) 12%, transparent),
+    color-mix(in oklab, var(--accent) 3%, transparent)
+  );
   border-left-width: 3px;
   border-radius: 0 0.6rem 0.6rem 0;
   padding-top: 0.6rem;
   padding-bottom: 0.6rem;
 }
+.markdown-body :where(code) {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+}
+.markdown-body :where(pre) {
+  background: var(--inset) !important;
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+}
 
 /* Animated gradient text */
 .text-gradient {
@@ -150,53 +342,69 @@ body {
   animation: shimmer 6s linear infinite;
 }
 @keyframes shimmer {
-  to { background-position: 200% center; }
+  to {
+    background-position: 200% center;
+  }
 }
 
-.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }
+.pulse-dot {
+  animation: pulse-dot 1.8s ease-in-out infinite;
+}
 @keyframes pulse-dot {
-  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
-  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
+  }
+  50% {
+    opacity: 0.7;
+    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
+  }
 }
 
-[data-theme="light"] .app-bg::before {
-  background:
-    radial-gradient(1100px 700px at 12% -8%, rgba(124, 58, 237, 0.12), transparent 60%),
-    radial-gradient(1000px 620px at 92% 4%, rgba(6, 182, 212, 0.10), transparent 60%),
-    radial-gradient(900px 600px at 50% 120%, rgba(217, 70, 239, 0.08), transparent 60%);
+.theme-toggle {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  flex: 0 0 36px;
+  display: grid;
+  place-items: center;
+  position: relative;
+  border-radius: 8px;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  color: var(--fg);
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 18%, transparent);
+  transition: background 200ms ease, box-shadow 200ms ease;
 }
-[data-theme="light"] .app-bg::after {
-  background-image:
-    linear-gradient(to right, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
+.theme-toggle:hover {
+  background: var(--surface-raised);
+}
+.theme-toggle .icon {
+  grid-area: 1 / 1;
+  display: grid;
+  place-items: center;
+  transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1), transform 300ms cubic-bezier(0.2, 0, 0, 1),
+    filter 300ms cubic-bezier(0.2, 0, 0, 1);
 }
-[data-theme="light"] header {
-  background-color: color-mix(in oklab, var(--surface) 80%, transparent) !important;
-  border-color: var(--border) !important;
+.theme-toggle .icon.on {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
 }
-[data-theme="light"] .text-white { color: var(--fg) !important; }
-[data-theme="light"] .border-white\/10 { border-color: var(--border) !important; }
-[data-theme="light"] .bg-white\/\[0\.03\] { background-color: var(--surface) !important; }
-[data-theme="light"] .markdown-body {
-  --tw-prose-body: #334155;
-  --tw-prose-headings: #0f172a;
-  --tw-prose-lead: #475569;
-  --tw-prose-links: #6d28d9;
-  --tw-prose-bold: #0f172a;
-  --tw-prose-code: #5b21b6;
+.theme-toggle .icon.off {
+  opacity: 0;
+  transform: scale(0.25);
+  filter: blur(4px);
 }
 
-.theme-toggle {
-  width: 36px; height: 36px; padding: 0; flex: 0 0 36px;
-  display: grid; place-items: center; position: relative;
-  border-radius: 8px; cursor: pointer; border: 0;
-  background: transparent; color: inherit;
-  box-shadow: 0 0 0 1px color-mix(in oklab, currentColor 18%, transparent);
+/* Agent graph pending nodes adapt to theme */
+[data-theme="light"] .graph-node-pending {
+  fill: #e2e8f0;
+  stroke: #94a3b8;
 }
-.theme-toggle .icon {
-  grid-area: 1 / 1; display: grid; place-items: center;
-  transition: opacity 300ms cubic-bezier(0.2,0,0,1), transform 300ms cubic-bezier(0.2,0,0,1), filter 300ms cubic-bezier(0.2,0,0,1);
+[data-theme="dark"] .graph-node-pending {
+  fill: #1e293b;
+  stroke: #475569;
 }
-.theme-toggle .icon.on { opacity: 1; transform: scale(1); filter: blur(0); }
-.theme-toggle .icon.off { opacity: 0; transform: scale(0.25); filter: blur(4px); }
-
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d6b2e71..49fe5a2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,20 @@
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
+import { Inter, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+const jetbrains = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jetbrains",
+  display: "swap",
+});
+
 const faviconSvg =
   "data:image/svg+xml," +
   encodeURIComponent(
@@ -36,7 +49,7 @@ export const metadata: Metadata = {
     description:
       "Plan → research → synthesize → critique → finalize. A cited, confidence-scored agentic research system.",
     type: "website",
-    images: [{ url: 'https://synthesis-gold.vercel.app/og.png', width: 1200, height: 630, alt: 'synthesis' }],
+    images: [{ url: "https://synthesis-gold.vercel.app/og.png", width: 1200, height: 630, alt: "synthesis" }],
   },
 };
 
@@ -44,11 +57,11 @@ const THEME_BOOT = `(function(){try{var k="synthesis-theme";var t=localStorage.g
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning className={`${inter.variable} ${jetbrains.variable}`}>
       <head>
         <script dangerouslySetInnerHTML={{ __html: THEME_BOOT }} />
       </head>
-      <body>{children}</body>
+      <body className="font-sans antialiased">{children}</body>
     </html>
   );
 }
diff --git a/src/components/synthesis/AgentGraph.tsx b/src/components/synthesis/AgentGraph.tsx
index 51c99e4..fa8dc10 100644
--- a/src/components/synthesis/AgentGraph.tsx
+++ b/src/components/synthesis/AgentGraph.tsx
@@ -33,9 +33,9 @@ const EDGES: [string, string, boolean][] = [
 const R = 22;
 
 function stateColor(s: NodeState) {
-  if (s === "active") return { fill: "#7c3aed", stroke: "#a78bfa", glow: true };
-  if (s === "done") return { fill: "#059669", stroke: "#34d399", glow: false };
-  return { fill: "#1e293b", stroke: "#334155", glow: false };
+  if (s === "active") return { fill: "#7c3aed", stroke: "#a78bfa", glow: true, pending: false };
+  if (s === "done") return { fill: "#059669", stroke: "#34d399", glow: false, pending: false };
+  return { fill: "currentColor", stroke: "currentColor", glow: false, pending: true };
 }
 
 function AgentGraphBase({
@@ -51,11 +51,11 @@ function AgentGraphBase({
   const pos = (id: string) => NODES.find((n) => n.id === id)!;
 
   return (
-    <div className="overflow-x-auto">
-      <svg viewBox="0 0 720 280" className="h-[220px] w-full min-w-[640px]">
+    <div className="overflow-x-auto scrollbar-overlay">
+      <svg viewBox="0 0 720 280" className="h-[220px] w-full min-w-[640px] text-slate-300 dark:text-slate-700">
         <defs>
           <marker id="arrow" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
-            <path d="M0,0 L6,3 L0,6 Z" fill="#475569" />
+            <path d="M0,0 L6,3 L0,6 Z" className="fill-slate-400 dark:fill-slate-500" />
           </marker>
         </defs>
 
@@ -84,7 +84,7 @@ function AgentGraphBase({
               y1={a.y}
               x2={b.x}
               y2={b.y}
-              stroke="#334155"
+              className="stroke-slate-300 dark:stroke-slate-600"
               strokeWidth={1.5}
               markerEnd="url(#arrow)"
             />
@@ -97,11 +97,33 @@ function AgentGraphBase({
           return (
             <g key={n.id} transform={`translate(${n.x},${n.y})`}>
               {c.glow && <circle r={R + 8} fill="#7c3aed" opacity={0.18} className="pulse-dot" />}
-              <circle r={R} fill={c.fill} stroke={c.stroke} strokeWidth={2} />
-              <text textAnchor="middle" y={4} fontSize={9} fontWeight={700} fill="#f8fafc">
-                {n.label.split(" ").map((w) => w[0]).join("").slice(0, 3)}
+              <circle
+                r={R}
+                fill={c.pending ? undefined : c.fill}
+                stroke={c.pending ? undefined : c.stroke}
+                strokeWidth={2}
+                className={c.pending ? "graph-node-pending" : undefined}
+              />
+              <text
+                textAnchor="middle"
+                y={4}
+                fontSize={9}
+                fontWeight={700}
+                className={c.pending ? "fill-slate-600 dark:fill-slate-200" : "fill-white"}
+              >
+                {n.label
+                  .split(" ")
+                  .map((w) => w[0])
+                  .join("")
+                  .slice(0, 3)}
               </text>
-              <text textAnchor="middle" y={R + 16} fontSize={10} fontWeight={600} fill={s === "pending" ? "#64748b" : "#cbd5e1"}>
+              <text
+                textAnchor="middle"
+                y={R + 16}
+                fontSize={10}
+                fontWeight={600}
+                className={s === "pending" ? "fill-slate-500" : "fill-slate-700 dark:fill-slate-300"}
+              >
                 {n.label}
               </text>
             </g>
diff --git a/src/components/synthesis/App.tsx b/src/components/synthesis/App.tsx
index 667efdd..ad39394 100644
--- a/src/components/synthesis/App.tsx
+++ b/src/components/synthesis/App.tsx
@@ -39,6 +39,8 @@ export default function SynthesisApp({ initialRuns }: { initialRuns: RunSummary[
   const [tab, setTab] = useState<Tab>("timeline");
   const [error, setError] = useState<string | null>(null);
   const abortRef = useRef<AbortController | null>(null);
+  const paneScrollRef = useRef<HTMLDivElement | null>(null);
+  const paneScrollTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const refreshRuns = useCallback(async () => {
     try {
@@ -228,17 +230,32 @@ export default function SynthesisApp({ initialRuns }: { initialRuns: RunSummary[
   const busy = phase === "planning" || phase === "running";
   const showDashboard = phase !== "idle";
 
+  useEffect(() => {
+    const el = paneScrollRef.current;
+    if (!el) return;
+    const onScroll = () => {
+      el.classList.add("is-scrolling");
+      if (paneScrollTimer.current) clearTimeout(paneScrollTimer.current);
+      paneScrollTimer.current = setTimeout(() => el.classList.remove("is-scrolling"), 800);
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      if (paneScrollTimer.current) clearTimeout(paneScrollTimer.current);
+    };
+  }, [showDashboard, tab]);
+
   return (
     <div className="app-bg min-h-screen">
-      <header className="sticky top-0 z-40 border-b border-white/10 bg-[#05060f]/80 backdrop-blur-xl">
+      <header className="chrome-header sticky top-0 z-40">
         <div className="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-3 sm:px-6">
           <div className="flex items-center gap-2.5">
-            <div className="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-violet-500 via-fuchsia-500 to-cyan-400 text-base font-black text-white shadow-lg shadow-violet-900/40">
+            <div className="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-violet-500 via-fuchsia-500 to-cyan-400 text-base font-black text-white shadow-lg shadow-violet-500/25">
               S
             </div>
             <div className="leading-tight">
-              <p className="text-sm font-bold tracking-tight text-white">Synthesis</p>
-              <p className="hidden text-[0.68rem] text-slate-400 sm:block">Autonomous Multi-Agent Research Platform</p>
+              <p className="text-sm font-bold tracking-tight text-heading">Synthesis</p>
+              <p className="hidden text-[0.68rem] text-dim sm:block">Autonomous Multi-Agent Research Platform</p>
             </div>
           </div>
           <div className="flex items-center gap-2">
@@ -250,8 +267,8 @@ export default function SynthesisApp({ initialRuns }: { initialRuns: RunSummary[
 
       <main className="mx-auto max-w-7xl px-4 py-6 sm:px-6">
         {/* Brief intake */}
-        <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-4 sm:p-5">
-          <label className="mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-400">
+        <section className="panel p-4 sm:p-5">
+          <label className="mb-2 block text-xs font-semibold uppercase tracking-wider text-dim">
             Research brief
           </label>
           <textarea
@@ -261,7 +278,7 @@ export default function SynthesisApp({ initialRuns }: { initialRuns: RunSummary[
             rows={2}
             data-testid="brief-input"
             placeholder="Ask a complex research question - the crew will plan, search, retrieve, synthesize, critique, and return a cited report with a confidence score."
-            className="w-full resize-none rounded-xl border border-white/10 bg-[#0b0e1a] px-3.5 py-3 text-sm text-slate-100 placeholder:text-slate-600 focus:border-violet-400/50 focus:outline-none focus:ring-1 focus:ring-violet-400/40 disabled:opacity-50"
+            className="input-surface w-full resize-none rounded-xl px-3.5 py-3 text-sm focus:border-violet-400/50 focus:outline-none focus:ring-1 focus:ring-violet-400/40 disabled:opacity-50"
           />
           <div className="mt-3 flex flex-wrap items-center gap-2">
             {!showDashboard && (
@@ -269,7 +286,7 @@ export default function SynthesisApp({ initialRuns }: { initialRuns: RunSummary[
                 onClick={startRun}
                 disabled={!brief.trim() || busy}
                 data-testid="launch-research"
-                className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-violet-500 via-fuchsia-500 to-cyan-400 px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-900/40 transition hover:scale-[1.02] disabled:cursor-not-allowed disabled:opacity-40"
+                className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-violet-500 via-fuchsia-500 to-cyan-400 px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/30 transition hover:scale-[1.02] disabled:cursor-not-allowed disabled:opacity-40"
               >
                 🚀 Launch research
               </button>
@@ -277,7 +294,7 @@ export default function SynthesisApp({ initialRuns }: { initialRuns: RunSummary[
             {showDashboard && (
               <button
                 onClick={reset}
-                className="inline-flex items-center gap-2 rounded-xl border border-white/15 bg-white/5 px-4 py-2.5 text-sm font-semibold text-slate-200 transition hover:bg-white/10"
+                className="inline-flex items-center gap-2 rounded-xl border border-theme bg-transparent px-4 py-2.5 text-sm font-semibold text-body transition hover:bg-[var(--surface-raised)]"
               >
                 ✚ New brief
               </button>
@@ -288,40 +305,44 @@ export default function SynthesisApp({ initialRuns }: { initialRuns: RunSummary[
                   key={ex}
                   onClick={() => setBrief(ex)}
                   data-testid="example-prompt"
-                  className="rounded-lg border border-white/10 bg-white/[0.04] px-2.5 py-1.5 text-xs text-slate-400 transition hover:border-violet-400/40 hover:text-violet-200"
+                  className="rounded-lg border border-theme bg-transparent px-2.5 py-1.5 text-xs text-dim transition hover:border-violet-400/40 hover:text-[color:var(--accent)]"
                 >
                   {ex.length > 42 ? ex.slice(0, 42) + "…" : ex}
                 </button>
               ))}
-            <span className="ml-auto text-[0.7rem] text-slate-600">
-              Engine: <span className="text-slate-400">LangGraph.js</span> · {evidence.length} evidence ·{" "}
+            <span className="ml-auto font-mono text-[0.7rem] text-dim">
+              Engine: <span className="text-soft">LangGraph.js</span> · {evidence.length} evidence ·{" "}
               {finalStats ? `${(finalStats.tokens / 1000).toFixed(1)}k tok` : "—"}
             </span>
           </div>
-          {error && <p className="mt-3 rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">{error}</p>}
+          {error && (
+            <p className="mt-3 rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-400 dark:text-red-300">
+              {error}
+            </p>
+          )}
         </section>
 
         {/* Plan approval (HITL) */}
         {phase === "awaiting" && plan && (
-          <section className="mt-5 rounded-2xl border border-amber-400/25 bg-amber-500/[0.06] p-4 sm:p-5">
+          <section className="mt-5 rounded-2xl border border-amber-400/30 bg-amber-500/[0.08] p-4 sm:p-5">
             <div className="mb-3 flex items-center justify-between gap-3">
-              <h2 className="text-sm font-bold text-amber-200">🟡 Plan ready - human approval required</h2>
+              <h2 className="text-sm font-bold text-amber-700 dark:text-amber-200">🟡 Plan ready - human approval required</h2>
               <button
                 onClick={approve}
                 data-testid="approve-execute"
-                className="rounded-lg bg-gradient-to-r from-emerald-500 to-teal-400 px-4 py-2 text-sm font-bold text-white shadow-lg shadow-emerald-900/30 transition hover:scale-[1.02]"
+                className="rounded-lg bg-gradient-to-r from-emerald-500 to-teal-400 px-4 py-2 text-sm font-bold text-white shadow-lg shadow-emerald-500/25 transition hover:scale-[1.02]"
               >
                 ✓ Approve &amp; execute
               </button>
             </div>
-            <p className="mb-3 text-xs text-amber-100/70">{plan.rationale}</p>
+            <p className="mb-3 text-xs text-amber-800/80 dark:text-amber-100/70">{plan.rationale}</p>
             <div className="grid gap-2 sm:grid-cols-2">
               {plan.subQuestions.map((s, i) => (
-                <div key={s.id} className="rounded-lg border border-white/10 bg-[#0b0e1a] px-3 py-2">
-                  <p className="text-xs font-semibold text-slate-200">
+                <div key={s.id} className="panel-solid px-3 py-2">
+                  <p className="text-xs font-semibold text-body">
                     {i + 1}. {s.question}
                   </p>
-                  <p className="mt-1 text-[0.7rem] text-slate-500">strategy: {s.strategy}</p>
+                  <p className="mt-1 font-mono text-[0.7rem] text-dim">strategy: {s.strategy}</p>
                 </div>
               ))}
             </div>
@@ -332,34 +353,38 @@ export default function SynthesisApp({ initialRuns }: { initialRuns: RunSummary[
         {showDashboard && (
           <section className="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_320px]">
             <div className="space-y-5">
-              <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
+              <div className="panel p-4">
                 <div className="mb-2 flex items-center justify-between">
-                  <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400">Agent graph</h3>
-                  {activeNode && <span className="text-[0.7rem] text-violet-300">executing: {activeNode}</span>}
+                  <h3 className="text-xs font-semibold uppercase tracking-wider text-dim">Agent graph</h3>
+                  {activeNode && <span className="font-mono text-[0.7rem] text-violet-500 dark:text-violet-300">executing: {activeNode}</span>}
                 </div>
                 <AgentGraph activeNode={activeNode} done={nodeDone} />
               </div>
 
-              <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-                <div className="mb-3 flex gap-1 rounded-lg bg-black/30 p-1">
+              <div className="panel flex min-h-0 flex-col p-4">
+                <div className="tab-rail mb-3 flex gap-1 p-1">
                   {(["timeline", "report", "evidence"] as Tab[]).map((t) => (
                     <button
                       key={t}
                       onClick={() => setTab(t)}
                       className={`flex-1 rounded-md px-3 py-1.5 text-xs font-semibold capitalize transition ${
-                        tab === t ? "bg-violet-500/30 text-violet-100" : "text-slate-400 hover:text-slate-200"
+                        tab === t
+                          ? "bg-violet-500/25 text-violet-700 shadow-sm dark:bg-violet-500/30 dark:text-violet-100"
+                          : "text-dim hover:text-body"
                       }`}
                     >
                       {t}
                       {t === "evidence" && evidence.length > 0 && (
-                        <span className="ml-1 text-slate-500">({evidence.length})</span>
+                        <span className="ml-1 text-dim">({evidence.length})</span>
                       )}
                     </button>
                   ))}
                 </div>
-                {tab === "timeline" && <Timeline entries={entries} />}
-                {tab === "report" && <ReportView markdown={report} streaming={phase === "running"} />}
-                {tab === "evidence" && <EvidenceList items={evidence} />}
+                <div ref={paneScrollRef} className="report-pane scrollbar-overlay min-h-0" tabIndex={0}>
+                  {tab === "timeline" && <Timeline entries={entries} />}
+                  {tab === "report" && <ReportView markdown={report} streaming={phase === "running"} />}
+                  {tab === "evidence" && <EvidenceList items={evidence} />}
+                </div>
               </div>
             </div>
 
@@ -379,7 +404,7 @@ export default function SynthesisApp({ initialRuns }: { initialRuns: RunSummary[
         )}
       </main>
 
-      <footer className="border-t border-white/10 py-6 text-center text-xs text-slate-600">
+      <footer className="border-t border-theme py-6 text-center font-mono text-xs text-dim">
         Synthesis · agentic-loop engineering · plan → research → synthesize → critique → finalize · deploy on GitHub + Vercel
       </footer>
     </div>
@@ -388,18 +413,18 @@ export default function SynthesisApp({ initialRuns }: { initialRuns: RunSummary[
 
 function StatusBadge({ phase }: { phase: Phase }) {
   const map: Record<Phase, { label: string; cls: string; dot: string }> = {
-    idle: { label: "Idle", cls: "border-slate-500/30 text-slate-300", dot: "bg-slate-400" },
-    planning: { label: "Planning", cls: "border-amber-400/30 text-amber-300", dot: "bg-amber-400" },
-    awaiting: { label: "Awaiting approval", cls: "border-amber-400/30 text-amber-300", dot: "bg-amber-400" },
-    running: { label: "Running", cls: "border-violet-400/30 text-violet-300", dot: "bg-violet-400" },
-    done: { label: "Done", cls: "border-emerald-400/30 text-emerald-300", dot: "bg-emerald-400" },
-    error: { label: "Error", cls: "border-red-400/30 text-red-300", dot: "bg-red-400" },
+    idle: { label: "Idle", cls: "border-[var(--border)] text-soft", dot: "bg-slate-400" },
+    planning: { label: "Planning", cls: "border-amber-400/40 text-amber-600 dark:text-amber-300", dot: "bg-amber-400" },
+    awaiting: { label: "Awaiting approval", cls: "border-amber-400/40 text-amber-600 dark:text-amber-300", dot: "bg-amber-400" },
+    running: { label: "Running", cls: "border-violet-400/40 text-violet-600 dark:text-violet-300", dot: "bg-violet-400" },
+    done: { label: "Done", cls: "border-emerald-400/40 text-emerald-600 dark:text-emerald-300", dot: "bg-emerald-400" },
+    error: { label: "Error", cls: "border-red-400/40 text-red-600 dark:text-red-300", dot: "bg-red-400" },
   };
   const s = map[phase];
   return (
     <span
       data-testid="status-badge"
-      className={`inline-flex items-center gap-1.5 rounded-full border bg-white/5 px-3 py-1 text-xs font-medium ${s.cls}`}
+      className={`inline-flex items-center gap-1.5 rounded-full border bg-[var(--surface-raised)] px-3 py-1 text-xs font-medium ${s.cls}`}
     >
       <span className={`h-1.5 w-1.5 rounded-full ${s.dot} ${phase === "running" ? "pulse-dot" : ""}`} />
       {s.label}
@@ -418,15 +443,15 @@ function BudgetPanel({
 }) {
   const conf = finalStats?.confidence ?? 0;
   return (
-    <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-      <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-slate-400">Telemetry</h3>
+    <div className="panel p-4">
+      <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-dim">Telemetry</h3>
       <dl className="grid grid-cols-2 gap-3 text-center">
         <Stat label="Confidence" value={finalStats ? `${(conf * 100).toFixed(0)}%` : "—"} accent={conf >= 0.8 ? "emerald" : "amber"} />
         <Stat label="Cost (USD)" value={finalStats ? `$${finalStats.costUsd.toFixed(4)}` : "—"} />
         <Stat label="Tokens" value={finalStats ? finalStats.tokens.toLocaleString() : "—"} />
         <Stat label="Latency" value={finalStats ? `${(finalStats.latencyMs / 1000).toFixed(1)}s` : phase === "running" ? "…" : "—"} />
       </dl>
-      <div className="mt-3 flex items-center justify-between text-[0.7rem] text-slate-500">
+      <div className="mt-3 flex items-center justify-between font-mono text-[0.7rem] text-dim">
         <span>evidence: {evidenceCount}</span>
         <span>budget-capped · resumable</span>
       </div>
@@ -435,11 +460,16 @@ function BudgetPanel({
 }
 
 function Stat({ label, value, accent }: { label: string; value: string; accent?: "emerald" | "amber" }) {
-  const c = accent === "emerald" ? "text-emerald-300" : accent === "amber" ? "text-amber-300" : "text-slate-100";
+  const c =
+    accent === "emerald"
+      ? "text-emerald-600 dark:text-emerald-300"
+      : accent === "amber"
+        ? "text-amber-600 dark:text-amber-300"
+        : "text-heading";
   return (
-    <div className="rounded-lg border border-white/5 bg-black/20 px-2 py-2">
-      <dd className={`text-base font-bold ${c}`}>{value}</dd>
-      <dt className="mt-0.5 text-[0.62rem] uppercase tracking-wider text-slate-500">{label}</dt>
+    <div className="surface-inset rounded-lg px-2 py-2">
+      <dd className={`font-mono text-base font-bold ${c}`}>{value}</dd>
+      <dt className="mt-0.5 text-[0.62rem] uppercase tracking-wider text-dim">{label}</dt>
     </div>
   );
 }
@@ -447,19 +477,23 @@ function Stat({ label, value, accent }: { label: string; value: string; accent?:
 function ReflectionCard({ reflection }: { reflection: Reflection }) {
   const pct = Math.round(reflection.faithfulness * 100);
   return (
-    <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-      <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">Critic / Reflexion</h3>
-      <div className="mb-2 h-2 w-full overflow-hidden rounded-full bg-black/40">
+    <div className="panel p-4">
+      <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-dim">Critic / Reflexion</h3>
+      <div className="mb-2 h-2 w-full overflow-hidden rounded-full bg-[var(--inset)]">
         <div className="h-full rounded-full bg-gradient-to-r from-amber-400 to-emerald-400 transition-all" style={{ width: `${pct}%` }} />
       </div>
-      <p className="text-xs text-slate-300">
-        Faithfulness <span className="font-bold text-slate-100">{pct}%</span> · recommendation{" "}
-        <span className={reflection.recommendation === "accept" ? "text-emerald-300" : "text-amber-300"}>{reflection.recommendation}</span>
+      <p className="text-xs text-soft">
+        Faithfulness <span className="font-bold text-heading">{pct}%</span> · recommendation{" "}
+        <span className={reflection.recommendation === "accept" ? "text-emerald-600 dark:text-emerald-300" : "text-amber-600 dark:text-amber-300"}>
+          {reflection.recommendation}
+        </span>
       </p>
       {reflection.unsupportedClaims.length > 0 && (
         <ul className="mt-2 space-y-1">
           {reflection.unsupportedClaims.map((c, i) => (
-            <li key={i} className="text-[0.7rem] text-slate-500">• {c}</li>
+            <li key={i} className="text-[0.7rem] text-dim">
+              • {c}
+            </li>
           ))}
         </ul>
       )}
@@ -468,14 +502,14 @@ function ReflectionCard({ reflection }: { reflection: Reflection }) {
 }
 
 function EvidenceList({ items }: { items: EvidenceItem[] }) {
-  if (items.length === 0) return <p className="text-sm text-slate-600">No evidence gathered yet.</p>;
+  if (items.length === 0) return <p className="text-sm text-dim">No evidence gathered yet.</p>;
   return (
-    <div className="max-h-[460px] space-y-2 overflow-y-auto pr-1">
+    <div className="space-y-2 pr-1">
       {items.map((e) => (
-        <div key={e.id} className="rounded-lg border border-white/5 bg-black/20 px-3 py-2">
-          <p className="text-xs text-slate-300">{e.claim}</p>
-          <div className="mt-1 flex items-center gap-2 text-[0.68rem] text-slate-500">
-            <span className="rounded bg-violet-500/15 px-1.5 py-0.5 text-violet-300">{e.source.domain}</span>
+        <div key={e.id} className="surface-inset rounded-lg px-3 py-2">
+          <p className="text-xs text-body">{e.claim}</p>
+          <div className="mt-1 flex items-center gap-2 font-mono text-[0.68rem] text-dim">
+            <span className="rounded bg-violet-500/15 px-1.5 py-0.5 text-violet-600 dark:text-violet-300">{e.source.domain}</span>
             <span>cred {(e.source.credibility * 100).toFixed(0)}%</span>
             <span>rel {(e.score * 100).toFixed(0)}%</span>
           </div>
@@ -496,20 +530,28 @@ function RecentRuns({
 }) {
   if (runs.length === 0) return null;
   return (
-    <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-      <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-slate-400">Recent runs</h3>
-      <div className="max-h-[260px] space-y-1 overflow-y-auto pr-1">
+    <div className="panel p-4">
+      <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-dim">Recent runs</h3>
+      <div className="max-h-[260px] space-y-1 overflow-y-auto pr-1 scrollbar-overlay">
         {runs.map((r) => (
           <button
             key={r.id}
             onClick={() => onPick(r.id)}
             className={`flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-left transition ${
-              currentId === r.id ? "border-violet-400/40 bg-violet-500/10" : "border-white/5 bg-black/20 hover:bg-white/5"
+              currentId === r.id
+                ? "border-violet-400/40 bg-violet-500/10"
+                : "border-theme bg-[var(--inset)] hover:bg-[var(--surface-raised)]"
             }`}
           >
-            <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${r.status === "done" ? "bg-emerald-400" : r.status === "error" ? "bg-red-400" : "bg-slate-500"}`} />
-            <span className="min-w-0 flex-1 truncate text-xs text-slate-300">{r.brief}</span>
-            {r.confidence != null && <span className="shrink-0 text-[0.65rem] text-slate-500">{(r.confidence * 100).toFixed(0)}%</span>}
+            <span
+              className={`h-1.5 w-1.5 shrink-0 rounded-full ${
+                r.status === "done" ? "bg-emerald-400" : r.status === "error" ? "bg-red-400" : "bg-slate-500"
+              }`}
+            />
+            <span className="min-w-0 flex-1 truncate text-xs text-soft">{r.brief}</span>
+            {r.confidence != null && (
+              <span className="shrink-0 font-mono text-[0.65rem] text-dim">{(r.confidence * 100).toFixed(0)}%</span>
+            )}
           </button>
         ))}
       </div>
diff --git a/src/components/synthesis/ReportView.tsx b/src/components/synthesis/ReportView.tsx
index 2a4176c..1141e94 100644
--- a/src/components/synthesis/ReportView.tsx
+++ b/src/components/synthesis/ReportView.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { memo } from "react";
 import ReactMarkdown from "react-markdown";
@@ -6,10 +6,11 @@ import remarkGfm from "remark-gfm";
 
 function ReportViewBase({ markdown, streaming }: { markdown: string; streaming?: boolean }) {
   if (!markdown) {
-    return <p className="text-sm text-slate-600">The cited report will stream in here as the synthesizer works…</p>;
+    return <p className="text-sm text-dim">The cited report will stream in here as the synthesizer works…</p>;
   }
+
   return (
-    <div className="markdown-body relative max-w-none">
+    <div className="markdown-body prose prose-sm relative max-w-none dark:prose-invert">
       {streaming && (
         <span className="ml-0.5 inline-block h-4 w-1.5 animate-pulse bg-fuchsia-400 align-middle" aria-hidden />
       )}
diff --git a/src/components/synthesis/Timeline.tsx b/src/components/synthesis/Timeline.tsx
index e6a2d79..8818231 100644
--- a/src/components/synthesis/Timeline.tsx
+++ b/src/components/synthesis/Timeline.tsx
@@ -24,17 +24,17 @@ const ICON: Record<string, string> = {
 };
 
 const COLOR: Record<string, string> = {
-  node_start: "text-violet-300",
-  node_end: "text-slate-400",
-  plan_ready: "text-amber-300",
-  researcher: "text-cyan-300",
-  tool_call: "text-sky-300",
-  evidence: "text-emerald-300",
-  report_chunk: "text-fuchsia-300",
-  reflection: "text-yellow-300",
-  final: "text-emerald-400",
-  error: "text-red-400",
-  status: "text-slate-500",
+  node_start: "text-violet-600 dark:text-violet-300",
+  node_end: "text-dim",
+  plan_ready: "text-amber-600 dark:text-amber-300",
+  researcher: "text-cyan-600 dark:text-cyan-300",
+  tool_call: "text-sky-600 dark:text-sky-300",
+  evidence: "text-emerald-600 dark:text-emerald-300",
+  report_chunk: "text-fuchsia-600 dark:text-fuchsia-300",
+  reflection: "text-yellow-600 dark:text-yellow-300",
+  final: "text-emerald-600 dark:text-emerald-400",
+  error: "text-red-600 dark:text-red-400",
+  status: "text-dim",
 };
 
 function describe(e: AgentEvent): string {
@@ -71,13 +71,13 @@ function TimelineBase({ entries }: { entries: TimelineEntry[] }) {
   }, [entries.length]);
 
   return (
-    <div className="max-h-[460px] space-y-1 overflow-y-auto pr-1 font-mono text-xs">
-      {entries.length === 0 && <p className="text-slate-600">Awaiting events…</p>}
+    <div className="space-y-1 pr-1 font-mono text-xs">
+      {entries.length === 0 && <p className="text-dim">Awaiting events…</p>}
       {entries.map((t) => (
-        <div key={t.seq} className="flex gap-2 rounded-md px-2 py-1 hover:bg-white/[0.03]">
-          <span className="select-none text-slate-600">{String(t.seq).padStart(3, "0")}</span>
-          <span className={COLOR[t.event.type] ?? "text-slate-400"}>{ICON[t.event.type] ?? "·"}</span>
-          <span className="min-w-0 flex-1 text-slate-300">{describe(t.event)}</span>
+        <div key={t.seq} className="flex gap-2 rounded-md px-2 py-1 hover:bg-[var(--surface-raised)]">
+          <span className="select-none text-dim">{String(t.seq).padStart(3, "0")}</span>
+          <span className={COLOR[t.event.type] ?? "text-soft"}>{ICON[t.event.type] ?? "·"}</span>
+          <span className="min-w-0 flex-1 text-soft">{describe(t.event)}</span>
         </div>
       ))}
       <div ref={endRef} />