@tonyclaw/agent-inspector 3.0.28 → 3.0.30

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

@@ -1,5 +1,5 @@
 import { Suspense, useEffect, useMemo, useRef, useState } from "react";
-import type { JSX } from "react";
+import type { JSX, KeyboardEvent as ReactKeyboardEvent } from "react";
 import {
   Check,
   ChevronRight,
@@ -46,6 +46,11 @@ type ChangedOp = Extract<DiffOp, { kind: "changed" }>;
 
 type DiffMode = "unified" | "split";
 
+export const COMPARE_RESPONSIVE_HEADER_CLASS_NAME =
+  "flex flex-col gap-3 border-b border-border px-3 py-3 sm:flex-row sm:items-start sm:gap-4 sm:px-4";
+export const COMPARE_RESPONSIVE_SPLIT_CLASS_NAME =
+  "grid min-w-0 grid-cols-1 gap-x-2 gap-y-0.5 px-3 py-2 text-xs md:grid-cols-[200px_minmax(0,1fr)_minmax(0,1fr)]";
+
 /** Walk the JsonNode tree and pretty-print it back to a JSON string for the
  *  expanded-equal-subtree view. The node is a plain object structure so
  *  `JSON.stringify` produces correct output. */
@@ -162,23 +167,23 @@ const KIND_VISUAL: Record<
 > = {
   added: {
     icon: Plus,
-    accent: "text-emerald-600 dark:text-emerald-400",
-    bg: "bg-emerald-500/5 hover:bg-emerald-500/10",
-    border: "border-l-emerald-500",
+    accent: "text-status-success",
+    bg: "bg-status-success/5 hover:bg-status-success/10",
+    border: "border-l-status-success",
     label: "ADDED",
   },
   removed: {
     icon: Minus,
-    accent: "text-rose-600 dark:text-rose-400",
-    bg: "bg-rose-500/5 hover:bg-rose-500/10",
-    border: "border-l-rose-500",
+    accent: "text-status-danger",
+    bg: "bg-status-danger/5 hover:bg-status-danger/10",
+    border: "border-l-status-danger",
     label: "REMOVED",
   },
   changed: {
     icon: Pencil,
-    accent: "text-amber-600 dark:text-amber-400",
-    bg: "bg-amber-500/5 hover:bg-amber-500/10",
-    border: "border-l-amber-500",
+    accent: "text-status-watch",
+    bg: "bg-status-watch/5 hover:bg-status-watch/10",
+    border: "border-l-status-watch",
     label: "CHANGED",
   },
   equal: {
@@ -294,19 +299,19 @@ function UnifiedOpRow({
       ? [
           {
             text: previewNode(op.left, 400),
-            tone: "text-rose-700 dark:text-rose-300 line-through",
+            tone: "text-status-danger line-through",
           },
-          { text: previewNode(op.right, 400), tone: "text-emerald-700 dark:text-emerald-300" },
+          { text: previewNode(op.right, 400), tone: "text-status-success" },
         ]
       : op.kind === "removed"
         ? [
             {
               text: previewNode(op.value, 400),
-              tone: "text-rose-700 dark:text-rose-300 line-through",
+              tone: "text-status-danger line-through",
             },
           ]
         : op.kind === "added"
-          ? [{ text: previewNode(op.value, 400), tone: "text-emerald-700 dark:text-emerald-300" }]
+          ? [{ text: previewNode(op.value, 400), tone: "text-status-success" }]
           : [{ text: previewNode(op.value, 400), tone: "text-muted-foreground" }];
 
   const justCopied = copiedPath === op.path && op.path !== "";
@@ -376,7 +381,7 @@ function UnifiedOpRow({
             className={cn(
               "shrink-0 p-1 rounded transition-colors cursor-pointer inline-flex items-center justify-center",
               justCopied
-                ? "text-emerald-500"
+                ? "text-status-success"
                 : "text-muted-foreground/50 hover:text-foreground hover:bg-muted",
             )}
             aria-label={justCopied ? "Copied" : "Copy"}
@@ -427,12 +432,12 @@ function ExpandedSubtree({ op }: { op: AddedOp | RemovedOp | ChangedOp }): JSX.E
   }
   return (
     <div className="pl-5 mt-2 grid grid-cols-1 md:grid-cols-2 gap-2">
-      <div className="border border-rose-500/30 rounded p-2 bg-rose-500/5">
-        <div className="text-[10px] uppercase tracking-wider text-rose-500 mb-1">Old</div>
+      <div className="rounded border border-status-danger/30 bg-status-danger/5 p-2">
+        <div className="mb-1 text-[10px] uppercase tracking-wider text-status-danger">Old</div>
         <LazyJsonStringView text={nodeToJsonString(op.left)} defaultExpandDepth={0} />
       </div>
-      <div className="border border-emerald-500/30 rounded p-2 bg-emerald-500/5">
-        <div className="text-[10px] uppercase tracking-wider text-emerald-500 mb-1">New</div>
+      <div className="rounded border border-status-success/30 bg-status-success/5 p-2">
+        <div className="mb-1 text-[10px] uppercase tracking-wider text-status-success">New</div>
         <LazyJsonStringView text={nodeToJsonString(op.right)} defaultExpandDepth={0} />
       </div>
     </div>
@@ -461,7 +466,7 @@ function SummaryChips({
         className={cn(
           "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
           counts.removed > 0
-            ? "border-rose-500/40 text-rose-600 dark:text-rose-400 bg-rose-500/10 hover:bg-rose-500/20"
+            ? "border-status-danger/40 bg-status-danger/10 text-status-danger hover:bg-status-danger/20"
             : "border-border text-muted-foreground/40 cursor-not-allowed",
         )}
         title={counts.removed > 0 ? "Jump to first removed" : "No removals"}
@@ -476,7 +481,7 @@ function SummaryChips({
         className={cn(
           "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
           counts.added > 0
-            ? "border-emerald-500/40 text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20"
+            ? "border-status-success/40 bg-status-success/10 text-status-success hover:bg-status-success/20"
             : "border-border text-muted-foreground/40 cursor-not-allowed",
         )}
         title={counts.added > 0 ? "Jump to first added" : "No additions"}
@@ -491,7 +496,7 @@ function SummaryChips({
         className={cn(
           "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
           counts.changed > 0
-            ? "border-amber-500/40 text-amber-600 dark:text-amber-400 bg-amber-500/10 hover:bg-amber-500/20"
+            ? "border-status-watch/40 bg-status-watch/10 text-status-watch hover:bg-status-watch/20"
             : "border-border text-muted-foreground/40 cursor-not-allowed",
         )}
         title={counts.changed > 0 ? "Jump to first changed" : "No changes"}
@@ -563,27 +568,29 @@ function SideSummary({
           className={cn(
             "text-[10px] px-1.5 py-0 h-5 font-mono shrink-0",
             side === "left"
-              ? "border-rose-500/40 text-rose-400"
-              : "border-emerald-500/40 text-emerald-400",
+              ? "border-status-danger/40 text-status-danger"
+              : "border-status-success/40 text-status-success",
           )}
         >
           {side === "left" ? "← Left" : "Right →"}
         </Badge>
-        <span className="font-mono text-blue-400/80" title={`Log ID ${String(log.id)}`}>
+        <span className="font-mono text-status-info" title={`Log ID ${String(log.id)}`}>
           #{displayNumber}
         </span>
         {log.model !== null && (
-          <span className="font-mono leading-snug text-muted-foreground">{log.model}</span>
+          <span className="min-w-0 truncate font-mono leading-snug text-muted-foreground">
+            {log.model}
+          </span>
         )}
       </div>
-      <div className="flex items-center gap-3 text-muted-foreground font-mono">
+      <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 font-mono text-muted-foreground">
         {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
-          <span className="text-emerald-400">
+          <span className="text-status-success">
             KV Cache +{formatTokens(log.cacheCreationInputTokens)}
           </span>
         )}
         {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
-          <span className="text-purple-400">
+          <span className="text-status-accent">
             KV Cache ~{formatTokens(log.cacheReadInputTokens)}
           </span>
         )}
@@ -605,6 +612,9 @@ export function CompareDrawer({
   rightDisplayNumber,
   onClose,
 }: CompareDrawerProps): JSX.Element {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const previousActiveElementRef = useRef<HTMLElement | null>(null);
   // Memoize the diff so re-renders (e.g. parent re-renders) don't recompute.
   const ops = useMemo<DiffOp[]>(() => {
     const leftRequest = getLogFormatAdapter(resolveLogFormat(left)).analyzeRequest(
@@ -716,8 +726,12 @@ export function CompareDrawer({
     }
   };
 
-  // Esc keybinding + body scroll lock while the drawer is open.
+  // Esc keybinding, initial focus, focus restoration, and body scroll lock while open.
   useEffect(() => {
+    previousActiveElementRef.current =
+      document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    closeButtonRef.current?.focus();
+
     const onKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose();
     };
@@ -727,9 +741,36 @@ export function CompareDrawer({
     return () => {
       document.removeEventListener("keydown", onKey);
       document.body.style.overflow = prevOverflow;
+      previousActiveElementRef.current?.focus();
     };
   }, [onClose]);
 
+  const handlePanelKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>): void => {
+    event.stopPropagation();
+    if (event.key !== "Tab") return;
+
+    const panel = panelRef.current;
+    if (panel === null) return;
+    const focusable = Array.from(
+      panel.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      ),
+    );
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (first === undefined || last === undefined) return;
+
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+      return;
+    }
+    if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
   const sameSession = getConversationId(left) === getConversationId(right);
   const allEqual = ops.length === 1 && ops[0]?.kind === "equal";
 
@@ -751,22 +792,24 @@ export function CompareDrawer({
 
       {/* Drawer panel */}
       <div
+        ref={panelRef}
         className={cn(
-          "relative bg-background border-l border-border shadow-xl",
+          "relative overflow-x-hidden bg-background border-l border-border shadow-xl",
           "w-full md:w-[70vw] max-w-[1100px] flex flex-col h-full",
         )}
         onClick={(e) => e.stopPropagation()}
-        onKeyDown={(e) => e.stopPropagation()}
+        onKeyDown={handlePanelKeyDown}
       >
         {/* Header */}
-        <div className="flex items-start gap-4 px-4 py-3 border-b border-border">
-          <div className="flex-1 flex gap-4 min-w-0">
+        <div className={COMPARE_RESPONSIVE_HEADER_CLASS_NAME}>
+          <div className="grid min-w-0 flex-1 grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
             <SideSummary log={left} side="left" displayNumber={leftDisplayNumber} />
             <SideSummary log={right} side="right" displayNumber={rightDisplayNumber} />
           </div>
-          <div className="flex items-center gap-2 shrink-0">
+          <div className="flex w-full shrink-0 items-center justify-between gap-2 sm:w-auto sm:justify-start">
             <ModeToggle mode={mode} onChange={setMode} />
             <button
+              ref={closeButtonRef}
               type="button"
               onClick={onClose}
               aria-label="Close"
@@ -778,7 +821,7 @@ export function CompareDrawer({
         </div>
 
         {!sameSession && (
-          <div className="px-4 py-1.5 text-xs text-amber-400 bg-amber-500/10 border-b border-border">
+          <div className="border-b border-border bg-warning/10 px-4 py-1.5 text-xs text-foreground">
             Heads up: the two selected logs are from different sessions.
           </div>
         )}
@@ -835,7 +878,7 @@ export function CompareDrawer({
   );
 }
 
-/** Legacy 3-column (path | left | right) view, retained as a toggle option. */
+/** Three-column on wide screens and a bounded stacked comparison on narrow screens. */
 function SplitBody({
   grouped,
   left,
@@ -850,9 +893,9 @@ function SplitBody({
   rightDisplayNumber: number;
 }): JSX.Element {
   return (
-    <div className="grid grid-cols-[200px_1fr_1fr] gap-x-2 gap-y-0.5 px-3 py-2 text-xs">
+    <div data-compare-layout="responsive-split" className={COMPARE_RESPONSIVE_SPLIT_CLASS_NAME}>
       {/* Column headers */}
-      <div className="grid grid-cols-[200px_1fr_1fr] gap-x-2 col-span-3 pb-2 mb-2 border-b border-border text-[10px] uppercase tracking-wider text-muted-foreground">
+      <div className="col-span-1 mb-2 grid grid-cols-1 gap-x-2 gap-y-1 border-b border-border pb-2 text-[10px] uppercase tracking-wider text-muted-foreground md:col-span-3 md:grid-cols-[200px_minmax(0,1fr)_minmax(0,1fr)]">
         <span>Path</span>
         <span title={`Log ID ${String(left.id)}`}>Left (Log #{leftDisplayNumber})</span>
         <span title={`Log ID ${String(right.id)}`}>Right (Log #{rightDisplayNumber})</span>
@@ -864,7 +907,7 @@ function SplitBody({
             <div
               // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
               key={i}
-              className="col-span-3 px-2 py-1 text-xs text-muted-foreground/60"
+              className="col-span-1 px-2 py-1 text-xs text-muted-foreground/60 md:col-span-3"
             >
               {g.ops.length} equal siblings collapsed — switch to Unified to expand
             </div>
@@ -876,7 +919,7 @@ function SplitBody({
             <div
               // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
               key={i}
-              className="col-span-3 grid grid-cols-[200px_1fr_1fr] gap-x-2 px-2 py-0.5 text-muted-foreground"
+              className="col-span-1 grid min-w-0 grid-cols-1 gap-x-2 gap-y-1 px-2 py-0.5 text-muted-foreground md:col-span-3 md:grid-cols-[200px_minmax(0,1fr)_minmax(0,1fr)]"
             >
               <span className="font-mono text-xs truncate" title={op.path}>
                 {op.path}
@@ -895,10 +938,10 @@ function SplitBody({
             <div
               // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
               key={i}
-              className="col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-emerald-400/70 bg-emerald-500/5"
+              className="col-span-1 rounded border-l-2 border-l-status-success bg-status-success/5 px-2 py-1 text-xs md:col-span-3"
             >
               <div className="font-mono text-xs text-muted-foreground mb-0.5">{op.path}</div>
-              <div className="font-mono break-all text-emerald-300/90">
+              <div className="font-mono break-all text-status-success">
                 + {previewNode(op.value, 400)}
               </div>
             </div>
@@ -909,10 +952,10 @@ function SplitBody({
             <div
               // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
               key={i}
-              className="col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-rose-400/70 bg-rose-500/5"
+              className="col-span-1 rounded border-l-2 border-l-status-danger bg-status-danger/5 px-2 py-1 text-xs md:col-span-3"
             >
               <div className="font-mono text-xs text-muted-foreground mb-0.5">{op.path}</div>
-              <div className="font-mono break-all text-rose-300/90 line-through">
+              <div className="font-mono break-all text-status-danger line-through">
                 − {previewNode(op.value, 400)}
               </div>
             </div>
@@ -922,14 +965,14 @@ function SplitBody({
           <div
             // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
             key={i}
-            className="col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-amber-400/70 bg-amber-500/5"
+            className="col-span-1 rounded border-l-2 border-l-status-watch bg-status-watch/5 px-2 py-1 text-xs md:col-span-3"
           >
             <div className="font-mono text-xs text-muted-foreground mb-1">{op.path}</div>
-            <div className="grid grid-cols-2 gap-2">
-              <div className="font-mono text-rose-300/90 break-all line-through">
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+              <div className="font-mono break-all text-status-danger line-through">
                 {previewNode(op.left, 400)}
               </div>
-              <div className="font-mono text-emerald-300/90 break-all">
+              <div className="font-mono break-all text-status-success">
                 {previewNode(op.right, 400)}
               </div>
             </div>

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}