@tonyclaw/agent-inspector 3.0.28 → 3.0.29

package/.output/server/index.mjs

@@ -20,121 +20,121 @@ const assets = {
   "/assets/agent-inspector-58K1_MsC.ico": {
     "type": "image/vnd.microsoft.icon",
     "etag": '"38fa-ZD8kPABHYjPIkcH82FMY6iZM7fI"',
-    "mtime": "2026-07-11T07:25:10.079Z",
+    "mtime": "2026-07-11T08:33:29.981Z",
     "size": 14586,
     "path": "../public/assets/agent-inspector-58K1_MsC.ico"
   },
-  "/assets/index-B3aAuqWq.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"1cd2d-NtF7W+NRjTmAvD+1JKZI8rtHI7U"',
-    "mtime": "2026-07-11T07:25:10.087Z",
-    "size": 118061,
-    "path": "../public/assets/index-B3aAuqWq.js"
-  },
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-07-11T07:25:10.085Z",
+    "mtime": "2026-07-11T08:33:29.981Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/json-viewer-wuJSKaed.js": {
+  "/assets/json-viewer-CfaDJwx8.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1ae7-BU19qUySeFzJhdQR46CWzhjoXCo"',
-    "mtime": "2026-07-11T07:25:10.087Z",
+    "etag": '"1ae7-T+/M8FSSwkvGbzOkJ/2Lb5mJqSs"',
+    "mtime": "2026-07-11T08:33:29.982Z",
     "size": 6887,
-    "path": "../public/assets/json-viewer-wuJSKaed.js"
+    "path": "../public/assets/json-viewer-CfaDJwx8.js"
+  },
+  "/assets/index-DPiESBo2.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"1cd2d-ZvxO1FYMv7b0bavhQij+IxPqNxI"',
+    "mtime": "2026-07-11T08:33:29.982Z",
+    "size": 118061,
+    "path": "../public/assets/index-DPiESBo2.js"
   },
-  "/assets/index-BsxAGqMA.css": {
+  "/assets/index-DliqmwUw.css": {
     "type": "text/css; charset=utf-8",
-    "etag": '"28b55-jHTF06GuUcizq3n19QXDY4Rs9bY"',
-    "mtime": "2026-07-11T07:25:10.085Z",
-    "size": 166741,
-    "path": "../public/assets/index-BsxAGqMA.css"
+    "etag": '"28ec4-pKYnk6JA2sEAWeib/WGc4RsJlZo"',
+    "mtime": "2026-07-11T08:33:29.981Z",
+    "size": 167620,
+    "path": "../public/assets/index-DliqmwUw.css"
+  },
+  "/assets/index-DTLNVcgc.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"537cd-D7PyRt2jku7bDF92q6ovZ+at3vc"',
+    "mtime": "2026-07-11T08:33:29.981Z",
+    "size": 341965,
+    "path": "../public/assets/index-DTLNVcgc.js"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-07-11T07:25:10.085Z",
+    "mtime": "2026-07-11T08:33:29.981Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/index-DzARL2Fi.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"537cd-n0LgXNt1QLHB07TADWQSjwwA7ao"',
-    "mtime": "2026-07-11T07:25:10.085Z",
-    "size": 341965,
-    "path": "../public/assets/index-DzARL2Fi.js"
-  },
-  "/assets/CompareDrawer-TghZr5t1.js": {
+  "/assets/CompareDrawer-Cb5ccPeX.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"4bc4-EO0Pced4VNvNgQhISz9DCokb9HU"',
-    "mtime": "2026-07-11T07:25:10.087Z",
+    "etag": '"4bc4-DHG9pbDatJk9bClyztEt1UqrAT4"',
+    "mtime": "2026-07-11T08:33:29.981Z",
     "size": 19396,
-    "path": "../public/assets/CompareDrawer-TghZr5t1.js"
+    "path": "../public/assets/CompareDrawer-Cb5ccPeX.js"
   },
-  "/assets/index-D4HkS7Ct.js": {
+  "/assets/ReplayDialog-CctnITbt.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"265-GATgiXd9lc1ztQtCZI0flLv7tLY"',
-    "mtime": "2026-07-11T07:25:10.085Z",
-    "size": 613,
-    "path": "../public/assets/index-D4HkS7Ct.js"
+    "etag": '"3348-0fckCAOkK1UC4nkjRLBGehN4X2A"',
+    "mtime": "2026-07-11T08:33:29.981Z",
+    "size": 13128,
+    "path": "../public/assets/ReplayDialog-CctnITbt.js"
   },
-  "/assets/ResponseView-d25MdFhY.js": {
+  "/assets/index-Bq-nqolG.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"47fe-Po8oiwgEzmPD5hRtGam0HQony8k"',
-    "mtime": "2026-07-11T07:25:10.087Z",
-    "size": 18430,
-    "path": "../public/assets/ResponseView-d25MdFhY.js"
+    "etag": '"265-eCPwzF17tobzPmkS8kveSyjk/f8"',
+    "mtime": "2026-07-11T08:33:29.981Z",
+    "size": 613,
+    "path": "../public/assets/index-Bq-nqolG.js"
   },
-  "/assets/RequestAnatomy-DNWccR7O.js": {
+  "/assets/RequestAnatomy-BrN0RBbL.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"43f3-aiF5LhFVPVUreSkzjdqgZFSwONM"',
-    "mtime": "2026-07-11T07:25:10.087Z",
+    "etag": '"43f3-tHiogWhSlLk1V4B2zt7nDCFLDWI"',
+    "mtime": "2026-07-11T08:33:29.981Z",
     "size": 17395,
-    "path": "../public/assets/RequestAnatomy-DNWccR7O.js"
+    "path": "../public/assets/RequestAnatomy-BrN0RBbL.js"
   },
-  "/assets/ReplayDialog-CZMApaF4.js": {
+  "/assets/ResponseView-Cqq87lX_.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"3348-CNibW415vjAp7j+7orWWQiIbLDA"',
-    "mtime": "2026-07-11T07:25:10.085Z",
-    "size": 13128,
-    "path": "../public/assets/ReplayDialog-CZMApaF4.js"
+    "etag": '"47fe-jzMkpDCjmJMzOygADqj3agP67TA"',
+    "mtime": "2026-07-11T08:33:29.981Z",
+    "size": 18430,
+    "path": "../public/assets/ResponseView-Cqq87lX_.js"
   },
-  "/assets/StreamingChunkSequence-DIFZEnWe.js": {
+  "/assets/StreamingChunkSequence-CnTa9mCr.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"e96-uRF1QBlYJ4LJvlyn05RZzDtEbkE"',
-    "mtime": "2026-07-11T07:25:10.087Z",
+    "etag": '"e96-YzbbUNDZ2WAJTeAaxiEjdXJL4uA"',
+    "mtime": "2026-07-11T08:33:29.982Z",
     "size": 3734,
-    "path": "../public/assets/StreamingChunkSequence-DIFZEnWe.js"
-  },
-  "/assets/qwen-CONDcHqt.png": {
-    "type": "image/png",
-    "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-07-11T07:25:10.085Z",
-    "size": 357059,
-    "path": "../public/assets/qwen-CONDcHqt.png"
+    "path": "../public/assets/StreamingChunkSequence-CnTa9mCr.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-07-11T07:25:10.085Z",
+    "mtime": "2026-07-11T08:33:29.981Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/_sessionId-DRfvuE2k.js": {
+  "/assets/qwen-CONDcHqt.png": {
+    "type": "image/png",
+    "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
+    "mtime": "2026-07-11T08:33:29.981Z",
+    "size": 357059,
+    "path": "../public/assets/qwen-CONDcHqt.png"
+  },
+  "/assets/_sessionId-DKM91udC.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"36d-DdOUH1ep4qcEQKZ8gAcubBJENCU"',
-    "mtime": "2026-07-11T07:25:10.085Z",
+    "etag": '"36d-H7Npt5FbAUZ4PkVzy9EXc0/6t3c"',
+    "mtime": "2026-07-11T08:33:29.981Z",
     "size": 877,
-    "path": "../public/assets/_sessionId-DRfvuE2k.js"
+    "path": "../public/assets/_sessionId-DKM91udC.js"
   },
-  "/assets/ProxyViewerContainer-fShBAZjj.js": {
+  "/assets/ProxyViewerContainer-COBe5GTT.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"140e7c-9dZ35KxZynE0VFMwXVZlbDNocic"',
-    "mtime": "2026-07-11T07:25:10.087Z",
-    "size": 1314428,
-    "path": "../public/assets/ProxyViewerContainer-fShBAZjj.js"
+    "etag": '"141300-JvEEzV1kBx2VyyR9a6sSD0j8rSQ"',
+    "mtime": "2026-07-11T08:33:29.982Z",
+    "size": 1315584,
+    "path": "../public/assets/ProxyViewerContainer-COBe5GTT.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/agent-inspector",
-  "version": "3.0.28",
+  "version": "3.0.29",
   "type": "module",
   "description": "Agent observability and knowledge capture layer for AI coding tools.",
   "license": "MIT",

package/src/components/clients/ClientLogo.tsx

@@ -106,11 +106,14 @@ const CLIENT_LOGOS: Record<ImageClientApp, string> = {
 };
 
 const CLIENT_LOGO_FRAMES: Record<ImageClientApp, string> = {
-  "agent-inspector": "border-orange-200/25 bg-orange-300/[0.12]",
-  codex: "border-cyan-200/20 bg-cyan-300/[0.08]",
-  opencode: "border-sky-200/25 bg-sky-300/[0.12]",
-  "mimo-code": "border-orange-200/25 bg-orange-400/[0.12]",
-  "claude-code": "border-amber-100/20 bg-amber-300/[0.09]",
+  "agent-inspector":
+    "border-orange-700/15 bg-orange-500/[0.08] dark:border-orange-200/25 dark:bg-orange-300/[0.12]",
+  codex: "border-cyan-700/15 bg-cyan-500/[0.08] dark:border-cyan-200/20 dark:bg-cyan-300/[0.08]",
+  opencode: "border-sky-700/15 bg-sky-500/[0.09] dark:border-sky-200/25 dark:bg-sky-300/[0.12]",
+  "mimo-code":
+    "border-orange-700/15 bg-orange-500/[0.09] dark:border-orange-200/25 dark:bg-orange-400/[0.12]",
+  "claude-code":
+    "border-amber-700/15 bg-amber-500/[0.08] dark:border-amber-100/20 dark:bg-amber-300/[0.09]",
 };
 
 const CLIENT_LOGO_IMAGES: Record<ImageClientApp, string> = {
@@ -137,7 +140,7 @@ export function ClientLogo({
     return (
       <span
         className={cn(
-          "inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-cyan-200/20 bg-cyan-300/[0.08] text-cyan-100 shadow-sm",
+          "inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-cyan-700/15 bg-cyan-500/[0.08] text-[var(--inspector-status-cool)] shadow-sm dark:border-cyan-200/20 dark:bg-cyan-300/[0.08]",
           className,
         )}
         aria-label={decorative ? undefined : label}

package/src/components/proxy-viewer/ConversationGroupList.tsx

@@ -284,14 +284,16 @@ function countSessions(processes: readonly ProcessGroupData[]): number {
   return sessions;
 }
 
-function readStoredIdSet(storageKey: string): ReadonlySet<string> {
-  if (typeof window === "undefined") return new Set();
+function readStoredIdSet(storageKey: string): ReadonlySet<string> | null {
+  if (typeof window === "undefined") return null;
   try {
-    const parsed: unknown = JSON.parse(window.localStorage.getItem(storageKey) ?? "[]");
-    if (!Array.isArray(parsed)) return new Set();
+    const storedValue = window.localStorage.getItem(storageKey);
+    if (storedValue === null) return null;
+    const parsed: unknown = JSON.parse(storedValue);
+    if (!Array.isArray(parsed)) return null;
     return new Set(parsed.filter((value): value is string => typeof value === "string"));
   } catch {
-    return new Set();
+    return null;
   }
 }
 
@@ -312,6 +314,21 @@ function removeIds(values: ReadonlySet<string>, ids: ReadonlySet<string>): Reado
   return changed ? next : values;
 }
 
+export function buildDefaultCollapsedProcessIds(
+  hierarchy: readonly ClientGroupData[],
+): ReadonlySet<string> {
+  const collapsedIds = new Set<string>();
+  for (const clientGroup of hierarchy) {
+    for (let index = 1; index < clientGroup.processes.length; index++) {
+      const processGroup = clientGroup.processes[index];
+      if (processGroup !== undefined && !hasPendingLogs(processGroup.logs)) {
+        collapsedIds.add(processGroup.id);
+      }
+    }
+  }
+  return collapsedIds;
+}
+
 function shortProjectPath(projectFolder: string | null): string | null {
   if (projectFolder === null || projectFolder === "") return null;
   const parts = projectFolder
@@ -337,12 +354,12 @@ function SummaryChip({
   return (
     <span
       className={cn(
-        "bg-white/[0.04] inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground",
+        "inline-flex h-7 items-center gap-1 rounded-md bg-[var(--inspector-surface-low)] px-2 text-xs text-muted-foreground",
         className,
       )}
     >
-      <span className="font-mono text-[10px] uppercase text-white/35">{label}</span>
-      <span className="font-mono tabular-nums text-slate-100">{value}</span>
+      <span className="font-mono text-[10px] uppercase text-muted-foreground/70">{label}</span>
+      <span className="font-mono tabular-nums text-foreground">{value}</span>
     </span>
   );
 }
@@ -351,13 +368,13 @@ function AncestorActivityIndicator({ count }: { count: number }): JSX.Element {
   const label = `${count} open turn${count === 1 ? "" : "s"}`;
   return (
     <span
-      className="relative inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-amber-300/[0.08] text-amber-100/90 ring-1 ring-amber-200/10"
+      className="relative inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-[var(--inspector-surface-medium)] text-[var(--inspector-status-watch)] ring-1 ring-border/50"
       aria-label={label}
       title={label}
     >
       <Loader2 className="size-3 animate-spin" />
       {count > 1 && (
-        <span className="absolute translate-x-2 -translate-y-2 rounded bg-background px-0.5 font-mono text-[8px] tabular-nums text-amber-100">
+        <span className="absolute translate-x-2 -translate-y-2 rounded bg-card px-0.5 font-mono text-[8px] tabular-nums text-[var(--inspector-status-watch)]">
           {count}
         </span>
       )}
@@ -373,14 +390,16 @@ export function ConversationGroupList({
   const [collapsedClientIds, setCollapsedClientIds] = useState<ReadonlySet<string>>(
     () => new Set(),
   );
-  const [collapsedProcessIds, setCollapsedProcessIds] = useState<ReadonlySet<string>>(
-    () => new Set(),
+  const [collapsedProcessIds, setCollapsedProcessIds] = useState<ReadonlySet<string>>(() =>
+    buildDefaultCollapsedProcessIds(hierarchy),
   );
   const [storedCollapseStateLoaded, setStoredCollapseStateLoaded] = useState(false);
 
   useEffect(() => {
-    setCollapsedClientIds(readStoredIdSet(COLLAPSED_CLIENTS_STORAGE_KEY));
-    setCollapsedProcessIds(readStoredIdSet(COLLAPSED_PROCESSES_STORAGE_KEY));
+    const storedClientIds = readStoredIdSet(COLLAPSED_CLIENTS_STORAGE_KEY);
+    const storedProcessIds = readStoredIdSet(COLLAPSED_PROCESSES_STORAGE_KEY);
+    if (storedClientIds !== null) setCollapsedClientIds(storedClientIds);
+    if (storedProcessIds !== null) setCollapsedProcessIds(storedProcessIds);
     setStoredCollapseStateLoaded(true);
   }, []);
 
@@ -470,38 +489,34 @@ function ClientGroupSection({
   return (
     <section
       className={cn(
-        "bg-card/60 relative isolate overflow-hidden rounded-[8px] shadow-sm",
-        isWorking && "bg-card/70",
+        "relative isolate overflow-hidden rounded-[8px] bg-card/65",
+        isWorking && "bg-card/80",
       )}
       data-ide-group={group.id}
     >
       <button
         type="button"
-        className="grid w-full min-w-0 grid-cols-[2.25rem_minmax(0,1fr)_auto] items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-white/[0.025] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-300/40"
+        className="grid w-full min-w-0 grid-cols-[2.25rem_minmax(0,1fr)_auto] items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-[var(--inspector-surface-low)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
         onClick={onToggleClient}
         aria-expanded={!collapsed}
       >
         {group.client === "unknown" ? (
-          <span className="bg-white/[0.04] inline-flex size-9 shrink-0 items-center justify-center rounded-md text-slate-300">
+          <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-[var(--inspector-surface-low)] text-muted-foreground">
             <Monitor className="size-4" />
           </span>
         ) : (
-          <ClientLogo
-            client={group.client}
-            className="size-9 rounded-md text-cyan-100"
-            decorative={true}
-          />
+          <ClientLogo client={group.client} className="size-9 rounded-md" decorative={true} />
         )}
 
         <span className="min-w-0">
           <span className="flex min-w-0 items-center gap-2">
             <span
-              className="truncate text-sm font-semibold text-slate-50"
+              className="truncate text-sm font-semibold text-foreground"
               title={group.userAgent ?? group.label}
             >
               {group.label}
             </span>
-            <span className="rounded bg-cyan-300/[0.05] px-1.5 py-0.5 font-mono text-[9px] uppercase text-cyan-100/70">
+            <span className="rounded bg-[var(--inspector-surface-medium)] px-1.5 py-0.5 font-mono text-[9px] uppercase text-muted-foreground">
               {clientAppTypeLabel(group.client)}
             </span>
             {isWorking && <AncestorActivityIndicator count={pendingTurnCount} />}
@@ -524,14 +539,14 @@ function ClientGroupSection({
               <SummaryChip label="OUT" value={formatTokenCount(totals.outputTokens)} />
             </span>
           )}
-          <span className="bg-white/[0.04] hover:bg-white/[0.07] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-300">
+          <span className="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-[var(--inspector-surface-low)] text-muted-foreground transition-colors group-hover:bg-[var(--inspector-surface-medium)]">
             {collapsed ? <ChevronRight className="size-4" /> : <ChevronDown className="size-4" />}
           </span>
         </span>
       </button>
 
       {!collapsed && (
-        <div className="space-y-1 px-2 pb-2 pt-1">
+        <div className="space-y-0.5 px-2 pb-2 pt-0.5">
           {group.processes.map((processGroup) => (
             <ProcessGroupSection
               key={processGroup.id}
@@ -567,23 +582,23 @@ function ProcessGroupSection({
   const processLabel =
     group.clientPid !== null && group.clientPid !== undefined
       ? `PID ${group.clientPid}`
-      : "PID unavailable";
+      : "Process unavailable";
 
   return (
-    <section className="relative pl-4">
+    <section className="relative pl-3">
       <button
         type="button"
-        className="bg-black/[0.07] grid w-full min-w-0 grid-cols-[2rem_minmax(0,1fr)_auto] items-center gap-2.5 rounded-md px-2.5 py-2 text-left transition-colors hover:bg-white/[0.03] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-300/35"
+        className="grid w-full min-w-0 grid-cols-[2rem_minmax(0,1fr)_auto] items-center gap-2.5 rounded-md bg-[var(--inspector-surface-low)] px-2.5 py-2 text-left transition-colors hover:bg-[var(--inspector-surface-medium)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
         onClick={onToggle}
         aria-expanded={!collapsed}
       >
-        <span className="bg-white/[0.04] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-amber-100/85">
+        <span className="inline-flex size-8 shrink-0 items-center justify-center text-[var(--inspector-status-watch)]">
           <Cpu className="size-4" />
         </span>
 
         <span className="min-w-0">
           <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-            <span className="font-mono text-xs font-semibold tabular-nums text-slate-100">
+            <span className="font-mono text-xs font-semibold tabular-nums text-foreground">
               {processLabel}
             </span>
             {isWorking && <AncestorActivityIndicator count={pendingTurnCount} />}
@@ -612,14 +627,14 @@ function ProcessGroupSection({
               <SummaryChip label="OUT" value={formatTokenCount(totals.outputTokens)} />
             </span>
           )}
-          <span className="bg-white/[0.04] hover:bg-white/[0.07] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-300">
+          <span className="inline-flex size-7 shrink-0 items-center justify-center rounded-md bg-[var(--inspector-surface-low)] text-muted-foreground transition-colors hover:bg-[var(--inspector-surface-medium)]">
             {collapsed ? <ChevronRight className="size-4" /> : <ChevronDown className="size-4" />}
           </span>
         </span>
       </button>
 
       {!collapsed && (
-        <div className="space-y-1.5 pb-1 pl-4 pr-1 pt-1.5">
+        <div className="space-y-1 pb-1 pl-3 pr-1 pt-1">
           {group.sessions.map((session) => (
             <ConversationGroup
               key={session.id}

package/src/components/proxy-viewer/ConversationHeader.tsx

@@ -22,7 +22,7 @@ import { ProviderLogoStack } from "./ProviderLogoStack";
 import { resolveLogFormat } from "./log-formats";
 
 const HEADER_ACTION_BUTTON_CLASS =
-  "bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground";
+  "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md bg-[var(--inspector-surface-low)] text-muted-foreground transition-colors hover:bg-[var(--inspector-surface-medium)] hover:text-foreground";
 
 export function isSyntheticSessionId(conversationId: string): boolean {
   return (
@@ -34,7 +34,7 @@ export function isSyntheticSessionId(conversationId: string): boolean {
 }
 
 export function compactSessionLabel(conversationId: string): string {
-  if (isSyntheticSessionId(conversationId)) return "Sessionless";
+  if (isSyntheticSessionId(conversationId)) return "No session ID";
   return conversationId.length > 24
     ? `${conversationId.slice(0, 12)}...${conversationId.slice(-12)}`
     : conversationId;
@@ -54,7 +54,7 @@ function HeaderMetric({
   return (
     <span
       className={cn(
-        "bg-white/[0.045] inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground",
+        "inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md bg-[var(--inspector-surface-low)] px-2 text-xs text-muted-foreground",
         className,
       )}
       title={title}
@@ -68,7 +68,7 @@ function HeaderMetric({
 function PendingTurnBadge(): JSX.Element {
   return (
     <span
-      className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-md bg-amber-300/[0.10] px-1.5 font-mono text-[10px] uppercase text-amber-100/90 ring-1 ring-amber-200/10"
+      className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-md bg-[var(--inspector-surface-medium)] px-1.5 font-mono text-[10px] uppercase text-[var(--inspector-status-watch)] ring-1 ring-border/50"
       title="This session has a turn that has not finished yet"
     >
       <Loader2 className="size-3 animate-spin" />
@@ -174,11 +174,11 @@ export function ConversationHeader({
       data-nav-id={`conv-${conversationId}`}
       data-nav-action={expanded ? "collapse" : "expand"}
       className={cn(
-        "bg-black/[0.10] relative flex cursor-pointer items-start gap-2.5 overflow-hidden rounded-[8px] px-3 py-2.5 transition-colors",
-        "hover:bg-black/[0.16]",
+        "relative flex cursor-pointer items-start gap-2.5 overflow-hidden rounded-md bg-[var(--inspector-surface-low)] px-3 py-2.5 transition-colors",
+        "hover:bg-[var(--inspector-surface-medium)]",
         "select-none",
         "sticky top-0 z-10 mb-2",
-        "focus-visible:ring-1 focus-visible:ring-cyan-300/35 focus-visible:outline-none",
+        "focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
       )}
       onClick={onToggle}
       onKeyDown={(e) => {
@@ -198,20 +198,20 @@ export function ConversationHeader({
 
       <span className="min-w-0 flex-1">
         <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-          <span className="shrink-0 rounded bg-white/[0.04] px-1.5 py-0.5 font-mono text-[9px] uppercase text-muted-foreground/70">
+          <span className="shrink-0 rounded bg-[var(--inspector-surface-medium)] px-1.5 py-0.5 font-mono text-[9px] uppercase text-muted-foreground">
             Session
           </span>
           {isFallbackConversation && showProcessMetadata ? (
             clientPid !== null && clientPid !== undefined ? (
               <span
-                className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-slate-100"
+                className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-foreground"
                 title={`PID ${clientPid}`}
               >
                 PID {clientPid}
               </span>
             ) : (
               <span
-                className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-slate-100"
+                className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-foreground"
                 title={conversationId}
               >
                 {conversationId}
@@ -219,7 +219,7 @@ export function ConversationHeader({
             )
           ) : (
             <span
-              className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-slate-100"
+              className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-foreground"
               title={conversationId}
             >
               {sessionLabel}
@@ -231,7 +231,7 @@ export function ConversationHeader({
             clientPid !== null &&
             clientPid !== undefined && (
               <span
-                className="bg-white/[0.045] shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground"
+                className="shrink-0 rounded bg-[var(--inspector-surface-medium)] px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground"
                 title={`Client process ID ${clientPid}`}
               >
                 PID {clientPid}
@@ -253,7 +253,7 @@ export function ConversationHeader({
 
           {showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && (
             <span
-              className="bg-white/[0.045] inline-flex min-h-6 shrink-0 flex-wrap items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-muted-foreground"
+              className="inline-flex min-h-6 shrink-0 flex-wrap items-center gap-1 rounded-md bg-[var(--inspector-surface-medium)] px-1.5 py-0.5 text-xs text-muted-foreground"
               title={clientTooltip ?? clientDisplayLabel}
             >
               <ClientLogo client={clientApp} className="size-4 shrink-0" decorative={true} />
@@ -272,9 +272,13 @@ export function ConversationHeader({
             {callsLabel}
           </HeaderMetric>
           <HeaderMetric icon={<Zap className="size-3 shrink-0" />} className="max-w-full">
-            <span className="text-blue-400">{formatTokens(totalInputTokens)}</span>
+            <span className="text-[var(--inspector-status-info)]">
+              {formatTokens(totalInputTokens)}
+            </span>
             {" / "}
-            <span className="text-amber-400">{formatTokens(totalOutputTokens)}</span>
+            <span className="text-[var(--inspector-status-watch)]">
+              {formatTokens(totalOutputTokens)}
+            </span>
           </HeaderMetric>
         </span>
       </span>
@@ -311,7 +315,7 @@ export function ConversationHeader({
 
         {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
         <span
-          className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200"
+          className="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-[var(--inspector-surface-low)] text-muted-foreground transition-colors hover:bg-[var(--inspector-surface-medium)] hover:text-foreground"
           aria-hidden="true"
         >
           {expanded ? (
@@ -326,10 +330,10 @@ export function ConversationHeader({
 
       {isLoading && (
         <span
-          className="pointer-events-none absolute inset-x-3 bottom-0 h-px overflow-hidden rounded-full bg-white/[0.06]"
+          className="pointer-events-none absolute inset-x-3 bottom-0 h-px overflow-hidden rounded-full bg-[var(--inspector-surface-medium)]"
           aria-hidden="true"
         >
-          <span className="absolute inset-y-0 left-0 w-1/3 animate-pulse rounded-full bg-amber-200/65 shadow-[0_0_14px_rgba(252,211,77,0.32)]" />
+          <span className="absolute inset-y-0 left-0 w-1/3 animate-pulse rounded-full bg-[var(--inspector-status-watch)] opacity-70" />
         </span>
       )}
 

package/src/lib/utils.ts

@@ -6,7 +6,11 @@ export function cn(...inputs: ClassValue[]): string {
 }
 
 export function formatTokens(count: number): string {
-  if (count >= 1_000_000) return (count / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
+  const absoluteCount = Math.abs(count);
+  if (absoluteCount < 1000) return String(count);
+  if (absoluteCount >= 1_000_000) {
+    return (count / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
+  }
   return (count / 1000).toFixed(1).replace(/\.0$/, "") + "K";
 }