@tonyclaw/agent-inspector 3.0.27 → 3.0.29

package/.output/server/_ssr/{ProxyViewerContainer-CbyBpCAj.mjs → ProxyViewerContainer-DUgxRNbj.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, R as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, B as DeleteInspectorGroupsResponseSchema, D as DEFAULT_CAPTURE_MODE, a as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, b as DEFAULT_PROVIDER_TEST_TIMEOUT_SECONDS, c as DEFAULT_TIME_DISPLAY_FORMAT, d as RuntimeConfigSchema, g as readStoredUiScalePreference, h as persistUiScalePreference, j as applyUiScalePreference, x as extractStopReason, p as packageJson, P as ProviderConfigSchema, U as UI_SCALE_STORAGE_KEY, k as normalizeUiScalePreference, t as apiFormatForPath, E as GroupEvidenceExportResultSchema, F as DeleteInspectorGroupResponseSchema, $ as PiAgentResponseSchema, w as isTurnBoundary, r as readStoredThemeMode, e as applyThemeMode, f as persistThemeMode, a2 as formatUiScale, y as AlertSummarySchema, z as AlertListResponseSchema, I as InspectorGroupsListResponseSchema, G as GroupEvidenceReadResponseSchema, V as createPendingProviderTestResults, W as ProviderTestResultsSchema, X as createFailedProviderTestResults, Y as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, Z as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, _ as TimeDisplayFormatSchema, i as isRecord, T as THEME_MODE_STORAGE_KEY, n as normalizeThemeMode, M as PATH_V1_MESSAGES, N as PATH_V1_CHAT_COMPLETIONS, Q as PATH_V1_RESPONSES, H as providerHasContextMetadata, m as parseOpenAIResponse, o as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, q as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, l as AnthropicRequestSchema, s as safeGetOwnProperty, a0 as resolveProviderContextWindow, u as getSessionPath, J as findProviderModelMetadata, S as previewUpstreamUrl, K as KnowledgeCandidateSchema, a1 as isPlainRecord, v as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-Dgx6-ot3.mjs";
+import { C as CapturedLogSchema, B as DeleteInspectorGroupsResponseSchema, D as DEFAULT_CAPTURE_MODE, a as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, b as DEFAULT_PROVIDER_TEST_TIMEOUT_SECONDS, c as DEFAULT_TIME_DISPLAY_FORMAT, d as RuntimeConfigSchema, g as readStoredUiScalePreference, h as persistUiScalePreference, j as applyUiScalePreference, x as extractStopReason, p as packageJson, P as ProviderConfigSchema, U as UI_SCALE_STORAGE_KEY, k as normalizeUiScalePreference, t as apiFormatForPath, E as GroupEvidenceExportResultSchema, F as DeleteInspectorGroupResponseSchema, $ as PiAgentResponseSchema, w as isTurnBoundary, r as readStoredThemeMode, e as applyThemeMode, f as persistThemeMode, a2 as formatUiScale, y as AlertSummarySchema, z as AlertListResponseSchema, I as InspectorGroupsListResponseSchema, G as GroupEvidenceReadResponseSchema, V as createPendingProviderTestResults, W as ProviderTestResultsSchema, X as createFailedProviderTestResults, Y as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, Z as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, _ as TimeDisplayFormatSchema, i as isRecord, T as THEME_MODE_STORAGE_KEY, n as normalizeThemeMode, M as PATH_V1_MESSAGES, N as PATH_V1_CHAT_COMPLETIONS, Q as PATH_V1_RESPONSES, H as providerHasContextMetadata, m as parseOpenAIResponse, o as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, q as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, l as AnthropicRequestSchema, s as safeGetOwnProperty, a0 as resolveProviderContextWindow, u as getSessionPath, J as findProviderModelMetadata, S as previewUpstreamUrl, K as KnowledgeCandidateSchema, a1 as isPlainRecord, v as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-BYlePDj8.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.mjs";
 import { J as JSZip } from "../_libs/jszip.mjs";
 import { c as clsx } from "../_libs/clsx.mjs";
@@ -9,7 +9,7 @@ import { u as useWindowVirtualizer, a as useVirtualizer } from "../_libs/tanstac
 import { d as diffJson, a as diffLines } from "../_libs/diff.mjs";
 import { r as reactDomExports } from "../_libs/react-dom.mjs";
 import { W as WebGLRenderer, S as SRGBColorSpace, A as ACESFilmicToneMapping, a as Scene, O as OrthographicCamera, M as MeshPhysicalMaterial, C as Color, G as Group, b as Mesh, c as CircleGeometry, d as MeshBasicMaterial, e as SphereGeometry, f as AmbientLight, H as HemisphereLight, D as DirectionalLight, P as PointLight, V as Vector3, g as CylinderGeometry } from "../_libs/three.mjs";
-import { T as TriangleAlert, C as CircleCheck, X, I as Info, a as ChevronDown, b as Check, P as PanelRightOpen, c as PanelRightClose, S as Search, U as Upload, D as Download, F as FileBraces, R as RefreshCw, d as Trash2, H as Heart, e as Pause, f as Play, g as Plus, B as BrainCircuit, L as LoaderCircle, h as Send, A as ArrowLeft, i as ChevronUp, j as Copy, k as ChevronsLeft, l as ChevronLeft, m as ChevronRight, n as ChevronsRight, o as Clapperboard, p as Flag, q as Siren, r as Timer, G as Gauge, s as Sun, E as Eye, M as Moon, t as ALargeSmall, u as Layers, v as FlaskConical, w as Sparkles, x as Activity, y as Beaker, N as Network, z as Terminal, J as Settings, K as Monitor, O as Rocket, Q as PackageCheck, V as History, W as Scan, Y as CircleAlert, Z as ArrowUpRight, _ as ArrowDownRight, $ as Cpu, a0 as FolderOpen, a1 as Bell, a2 as Clock3, a3 as ShieldAlert, a4 as EyeOff, a5 as ExternalLink, a6 as Clock, a7 as RotateCw, a8 as CircleCheckBig, a9 as Pencil, aa as MessageSquare, ab as Zap, ac as Wrench, ad as Brain, ae as Minus, af as CircleX, ag as ShieldCheck, ah as Save, ai as FileSearch, aj as CloudUpload, ak as CircleQuestionMark, al as Server, am as Lock, an as Wifi, ao as WifiOff, ap as OctagonAlert, aq as Radio, ar as Globe, as as FileTerminal, at as ChevronsUp, au as ChevronsDown, av as FileDiff, aw as RotateCcw, ax as GitCompareArrows, ay as ArrowUp, az as ArrowDown, aA as Ellipsis, aB as CodeXml, aC as Blocks, aD as MousePointerClick, aE as FileText, aF as Rows3, aG as Columns2 } from "../_libs/lucide-react.mjs";
+import { T as TriangleAlert, C as CircleCheck, X, I as Info, a as ChevronDown, b as Check, P as PanelRightOpen, c as PanelRightClose, S as Search, U as Upload, D as Download, F as FileBraces, R as RefreshCw, d as Trash2, H as Heart, e as Pause, f as Play, g as Plus, B as BrainCircuit, L as LoaderCircle, h as Send, A as ArrowLeft, i as ChevronUp, j as Copy, k as ChevronsLeft, l as ChevronLeft, m as ChevronRight, n as ChevronsRight, o as Clapperboard, p as Flag, q as Siren, r as Timer, G as Gauge, s as Sun, E as Eye, M as Moon, t as ALargeSmall, u as Layers, v as FlaskConical, w as Sparkles, x as Activity, y as Beaker, N as Network, z as Terminal, J as Settings, K as Monitor, O as Rocket, Q as PackageCheck, V as History, W as Scan, Y as CircleAlert, Z as ArrowUpRight, _ as ArrowDownRight, $ as CodeXml, a0 as Cpu, a1 as FolderOpen, a2 as Bell, a3 as Clock3, a4 as ShieldAlert, a5 as EyeOff, a6 as ExternalLink, a7 as Clock, a8 as RotateCw, a9 as CircleCheckBig, aa as Pencil, ab as MessageSquare, ac as Zap, ad as Wrench, ae as Brain, af as Minus, ag as CircleX, ah as ShieldCheck, ai as Save, aj as FileSearch, ak as CloudUpload, al as CircleQuestionMark, am as Server, an as Lock, ao as Wifi, ap as WifiOff, aq as OctagonAlert, ar as Radio, as as Globe, at as FileTerminal, au as ChevronsUp, av as ChevronsDown, aw as FileDiff, ax as RotateCcw, ay as GitCompareArrows, az as ArrowUp, aA as ArrowDown, aB as Ellipsis, aC as Blocks, aD as MousePointerClick, aE as FileText, aF as Rows3, aG as Columns2 } from "../_libs/lucide-react.mjs";
 import { u as union, o as object, e as array, l as literal, n as number, d as boolean, b as string, _ as _enum } from "../_libs/zod.mjs";
 import { S as Select$1, a as SelectTrigger$1, b as SelectIcon, c as SelectValue$1, d as SelectPortal, e as SelectContent$1, f as SelectViewport, g as SelectItem$1, h as SelectItemIndicator, i as SelectItemText, j as SelectScrollUpButton$1, k as SelectScrollDownButton$1 } from "../_libs/radix-ui__react-select.mjs";
 import { D as Dialog$1, a as DialogContent$1, b as DialogClose, c as DialogTitle$1, d as DialogDescription$1, e as DialogPortal$1, f as DialogOverlay$1, g as DialogTrigger$1 } from "../_libs/radix-ui__react-dialog.mjs";
@@ -566,7 +566,11 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 function formatTokens(count) {
-  if (count >= 1e6) return (count / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
+  const absoluteCount = Math.abs(count);
+  if (absoluteCount < 1e3) return String(count);
+  if (absoluteCount >= 1e6) {
+    return (count / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
+  }
   return (count / 1e3).toFixed(1).replace(/\.0$/, "") + "K";
 }
 function formatContextWindowTokens(count) {
@@ -874,7 +878,8 @@ const CLIENT_LABELS = {
   codex: "Codex",
   opencode: "OpenCode",
   "mimo-code": "MiMo Code",
-  "claude-code": "Claude Code"
+  "claude-code": "Claude Code",
+  "ai-sdk": "AI SDK"
 };
 function normalize(value) {
   return value?.toLowerCase() ?? "";
@@ -902,6 +907,7 @@ function detectClientApp(input) {
   if (matchesAny(haystack, ["codex desktop", "codex-cli", "openai-codex", "codex"])) {
     return "codex";
   }
+  if (matchesAny(normalize(input.userAgent), ["ai-sdk", "ai/"])) return "ai-sdk";
   return "unknown";
 }
 function clientAppLabel(client) {
@@ -911,11 +917,25 @@ function clientAppLabel(client) {
     case "opencode":
     case "mimo-code":
     case "claude-code":
+    case "ai-sdk":
       return CLIENT_LABELS[client];
     case "unknown":
       return null;
   }
 }
+function clientAppTypeLabel(client) {
+  switch (client) {
+    case "codex":
+    case "opencode":
+    case "mimo-code":
+    case "claude-code":
+      return "IDE";
+    case "agent-inspector":
+    case "ai-sdk":
+    case "unknown":
+      return "CLIENT";
+  }
+}
 const CLIENT_LOGOS = {
   "agent-inspector": AgentInspectorLogo,
   codex: CodexLogoSvg,
@@ -924,11 +944,11 @@ const CLIENT_LOGOS = {
   "claude-code": ClaudeCodeLogoSvg
 };
 const CLIENT_LOGO_FRAMES = {
-  "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 = {
   "agent-inspector": "p-0.5 drop-shadow-[0_0_8px_rgba(251,146,60,0.35)]",
@@ -939,11 +959,27 @@ const CLIENT_LOGO_IMAGES = {
 };
 function ClientLogo({
   client,
-  className
+  className,
+  decorative = false
 }) {
   if (client === "unknown") return null;
   const label = clientAppLabel(client);
   if (label === null) return null;
+  if (client === "ai-sdk") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "span",
+      {
+        className: cn(
+          "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 ? void 0 : label,
+        "aria-hidden": decorative ? true : void 0,
+        title: label,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(CodeXml, { className: "size-1/2", "aria-hidden": "true" })
+      }
+    );
+  }
   const logoSrc = CLIENT_LOGOS[client];
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "span",
@@ -953,7 +989,8 @@ function ClientLogo({
         CLIENT_LOGO_FRAMES[client],
         className
       ),
-      "aria-label": label,
+      "aria-label": decorative ? void 0 : label,
+      "aria-hidden": decorative ? true : void 0,
       title: label,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "img",
@@ -1669,7 +1706,14 @@ function resolveLogFormat(log) {
   const pathFormat = apiFormatForPath(log.path);
   return pathFormat === "unknown" ? log.apiFormat : pathFormat;
 }
-const HEADER_ACTION_BUTTON_CLASS$1 = "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";
+const HEADER_ACTION_BUTTON_CLASS$1 = "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";
+function isSyntheticSessionId(conversationId) {
+  return conversationId.startsWith("PID:") || conversationId.startsWith("process:") || conversationId.startsWith("connection:") || conversationId.includes("|");
+}
+function compactSessionLabel(conversationId) {
+  if (isSyntheticSessionId(conversationId)) return "No session ID";
+  return conversationId.length > 24 ? `${conversationId.slice(0, 12)}...${conversationId.slice(-12)}` : conversationId;
+}
 function HeaderMetric({
   icon,
   children,
@@ -1680,7 +1724,7 @@ function HeaderMetric({
     "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,
@@ -1691,11 +1735,11 @@ function HeaderMetric({
     }
   );
 }
-function PendingTurnBadge$1() {
+function PendingTurnBadge() {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "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 tracking-[0.14em] 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",
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3 animate-spin" }),
@@ -1745,8 +1789,8 @@ function ConversationHeader({
   const hasUserAgent = userAgent !== null && userAgent !== void 0 && userAgent !== "";
   const clientDisplayLabel = detectedClientLabel ?? userAgent ?? null;
   const clientTooltip = detectedClientLabel !== null && hasUserAgent ? `${detectedClientLabel} - ${userAgent}` : null;
-  const isFallbackConversation = conversationId.startsWith("PID:") || conversationId.includes("|");
-  const compactSessionLabel = conversationId.length > 24 ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12) : conversationId;
+  const isFallbackConversation = isSyntheticSessionId(conversationId);
+  const sessionLabel = compactSessionLabel(conversationId);
   const timeLabel = formatTimestampRange(startTime, endTime, timeDisplayFormat);
   const callsLabel = `${totalCalls} call${totalCalls !== 1 ? "s" : ""}`;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -1757,11 +1801,11 @@ function ConversationHeader({
       "data-nav-id": `conv-${conversationId}`,
       "data-nav-action": expanded ? "collapse" : "expand",
       className: cn(
-        "bg-card/80 shadow-sm relative flex cursor-pointer items-start gap-3 overflow-hidden rounded-[8px] px-3 py-2.5 transition-colors",
-        "hover:bg-card",
+        "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) => {
@@ -1782,10 +1826,11 @@ function ConversationHeader({
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 rounded bg-[var(--inspector-surface-medium)] px-1.5 py-0.5 font-mono text-[9px] uppercase text-muted-foreground", children: "Session" }),
             isFallbackConversation && showProcessMetadata ? clientPid !== null && clientPid !== void 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "span",
               {
-                className: "min-w-0 max-w-full truncate font-mono text-xs font-semibold text-violet-200",
+                className: "min-w-0 max-w-full truncate font-mono text-xs font-semibold text-foreground",
                 title: `PID ${clientPid}`,
                 children: [
                   "PID ",
@@ -1795,22 +1840,22 @@ function ConversationHeader({
             ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
               "span",
               {
-                className: "min-w-0 max-w-full truncate font-mono text-xs font-semibold text-violet-200",
+                className: "min-w-0 max-w-full truncate font-mono text-xs font-semibold text-foreground",
                 title: conversationId,
                 children: conversationId
               }
             ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
               "span",
               {
-                className: "min-w-0 max-w-full truncate font-mono text-xs font-semibold text-violet-200",
+                className: "min-w-0 max-w-full truncate font-mono text-xs font-semibold text-foreground",
                 title: conversationId,
-                children: isFallbackConversation ? "sessionless" : compactSessionLabel
+                children: sessionLabel
               }
             ),
             !isFallbackConversation && showProcessMetadata && clientPid !== null && clientPid !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "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}`,
                 children: [
                   "PID ",
@@ -1829,23 +1874,23 @@ function ConversationHeader({
             showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "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,
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { client: clientApp, className: "size-4 shrink-0" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { client: clientApp, className: "size-4 shrink-0", decorative: true }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono leading-snug tabular-nums", children: clientDisplayLabel })
                 ]
               }
             ),
-            isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(PendingTurnBadge$1, {})
+            isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(PendingTurnBadge, {})
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mt-1.5 flex min-w-0 flex-wrap items-center gap-1.5", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderMetric, { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3 shrink-0" }), title: timeLabel, children: timeLabel }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderMetric, { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3 shrink-0" }), children: callsLabel }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderMetric, { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3 shrink-0" }), className: "max-w-full", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-blue-400", children: formatTokens(totalInputTokens) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[var(--inspector-status-info)]", children: formatTokens(totalInputTokens) }),
               " / ",
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-amber-400", children: formatTokens(totalOutputTokens) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[var(--inspector-status-watch)]", children: formatTokens(totalOutputTokens) })
             ] })
           ] })
         ] }),
@@ -1880,7 +1925,7 @@ function ConversationHeader({
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "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",
               children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 shrink-0" }) : isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 shrink-0 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" })
             }
@@ -1889,9 +1934,9 @@ function ConversationHeader({
         isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "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",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("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)]" })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute inset-y-0 left-0 w-1/3 animate-pulse rounded-full bg-[var(--inspector-status-watch)] opacity-70" })
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2524,27 +2569,27 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-K2k9G7r1.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-R_P1-VNr.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-DacI2Iv0.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-De9wKKzS.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-gh-pAdkO.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-Db4MxUYo.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-BRJKN50-.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-8rDXOiNB.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-BQLVEuWY.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-N9teZHkA.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-DNs1ZjKI.mjs").then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-BjoHRbjS.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-DNs1ZjKI.mjs").then((m) => ({ default: m.JsonViewerFromString }))
+  () => import("./json-viewer-BjoHRbjS.mjs").then((m) => ({ default: m.JsonViewerFromString }))
 );
 const HIGHLIGHT_DURATION_MS = 1200;
 const MAX_HIGHLIGHT_ATTEMPTS = 12;
@@ -6170,7 +6215,7 @@ const ConversationGroup = reactExports.memo(function({
       window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
     };
   }, [group.logs, setExpanded]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-1.5", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ConversationHeader,
       {
@@ -12416,8 +12461,8 @@ function resolveInspectorPetStatus(logs, nowMs) {
       capturedCount
     };
   }
-  const latestTimestamp = Date.parse(latest.timestamp);
-  if (Number.isFinite(latestTimestamp) && nowMs - latestTimestamp >= INSPECTOR_PET_SLEEP_AFTER_MS) {
+  const latestTimestamp2 = Date.parse(latest.timestamp);
+  if (Number.isFinite(latestTimestamp2) && nowMs - latestTimestamp2 >= INSPECTOR_PET_SLEEP_AFTER_MS) {
     return {
       mood: "sleeping",
       label: "All quiet",
@@ -13043,16 +13088,6 @@ function InspectorPet({ logs }) {
                         ) })
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "absolute right-0 top-2 size-3 rounded-full border border-background/90",
-                          moodDotClass(status.mood),
-                          status.mood === "active" && !reduceMotion && "animate-pulse"
-                        )
-                      }
-                    ),
                     reactionVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(
                       Heart,
                       {
@@ -13268,6 +13303,11 @@ function compareField(previous, current) {
   if (current < previous) return { direction: "down", delta: previous - current };
   return null;
 }
+const COLLAPSED_CLIENTS_STORAGE_KEY = "agent-inspector.hierarchy.collapsedClients";
+const COLLAPSED_PROCESSES_STORAGE_KEY = "agent-inspector.hierarchy.collapsedProcesses";
+function hasPendingLogs(logs) {
+  return logs.some((log) => log.responseStatus === null);
+}
 function countPendingTurns(logs) {
   return logs.filter((log) => log.responseStatus === null).length;
 }
@@ -13302,9 +13342,9 @@ function groupClient(group) {
   });
 }
 function fallbackClientLabel(userAgent) {
-  if (userAgent === null || userAgent === "") return "Unknown IDE";
+  if (userAgent === null || userAgent === "") return "Unknown client";
   const firstToken = userAgent.split(/[ /;]/)[0] ?? "";
-  if (firstToken === "") return "Unknown IDE";
+  if (firstToken === "") return "Unknown client";
   return firstToken;
 }
 function clientLabel(client, userAgent) {
@@ -13326,22 +13366,41 @@ function processKey(clientPid, projectFolder) {
 function sortLogsByTimestamp(logs) {
   return [...logs].sort((a, b) => a.timestamp.localeCompare(b.timestamp));
 }
-function firstTimestamp(logs) {
-  return sortLogsByTimestamp(logs)[0]?.timestamp ?? "";
+function latestTimestamp(logs) {
+  let latest = "";
+  for (const log of logs) {
+    if (log.timestamp > latest) latest = log.timestamp;
+  }
+  return latest;
 }
-function sortByFirstLogTime(items) {
-  return [...items].sort((a, b) => firstTimestamp(a.logs).localeCompare(firstTimestamp(b.logs)));
+function operationalPriority(logs) {
+  if (hasPendingLogs(logs)) return 0;
+  if (logs.some(
+    (log) => log.error !== null && log.error !== void 0 || log.responseStatus !== null && log.responseStatus !== void 0 && log.responseStatus >= 400
+  )) {
+    return 1;
+  }
+  return 2;
+}
+function sortByOperationalPriority(items) {
+  return [...items].sort((left, right) => {
+    const priorityDifference = operationalPriority(left.logs) - operationalPriority(right.logs);
+    if (priorityDifference !== 0) return priorityDifference;
+    const recencyDifference = latestTimestamp(right.logs).localeCompare(latestTimestamp(left.logs));
+    if (recencyDifference !== 0) return recencyDifference;
+    return left.id.localeCompare(right.id);
+  });
 }
 function buildConversationHierarchy(groups) {
-  const ideGroups = /* @__PURE__ */ new Map();
+  const clientGroups = /* @__PURE__ */ new Map();
   for (const group of groups) {
     const userAgent = firstUserAgent(group.logs);
     const projectFolder = firstClientProjectFolder(group.logs);
     const client = groupClient(group);
     const currentIdeKey = ideKey(client, userAgent, projectFolder);
-    let ideGroup = ideGroups.get(currentIdeKey);
-    if (ideGroup === void 0) {
-      ideGroup = {
+    let clientGroup = clientGroups.get(currentIdeKey);
+    if (clientGroup === void 0) {
+      clientGroup = {
         id: currentIdeKey,
         client,
         label: clientLabel(client, userAgent),
@@ -13349,12 +13408,12 @@ function buildConversationHierarchy(groups) {
         processes: /* @__PURE__ */ new Map(),
         logs: []
       };
-      ideGroups.set(currentIdeKey, ideGroup);
+      clientGroups.set(currentIdeKey, clientGroup);
     }
-    ideGroup.logs.push(...group.logs);
+    clientGroup.logs.push(...group.logs);
     const clientPid = firstClientPid(group.logs);
     const currentProcessKey = `${currentIdeKey}:${processKey(clientPid, projectFolder)}`;
-    let processGroup = ideGroup.processes.get(currentProcessKey);
+    let processGroup = clientGroup.processes.get(currentProcessKey);
     if (processGroup === void 0) {
       processGroup = {
         id: currentProcessKey,
@@ -13363,32 +13422,32 @@ function buildConversationHierarchy(groups) {
         sessions: [],
         logs: []
       };
-      ideGroup.processes.set(currentProcessKey, processGroup);
+      clientGroup.processes.set(currentProcessKey, processGroup);
     }
     processGroup.sessions.push(group);
     processGroup.logs.push(...group.logs);
   }
   const hierarchy = [];
-  for (const ideGroup of ideGroups.values()) {
-    const processes = sortByFirstLogTime(
-      [...ideGroup.processes.values()].map((processGroup) => ({
+  for (const clientGroup of clientGroups.values()) {
+    const processes = sortByOperationalPriority(
+      [...clientGroup.processes.values()].map((processGroup) => ({
         id: processGroup.id,
         clientPid: processGroup.clientPid,
         clientProjectFolder: processGroup.clientProjectFolder,
-        sessions: sortByFirstLogTime(processGroup.sessions),
+        sessions: sortByOperationalPriority(processGroup.sessions),
         logs: sortLogsByTimestamp(processGroup.logs)
       }))
     );
     hierarchy.push({
-      id: ideGroup.id,
-      client: ideGroup.client,
-      label: ideGroup.label,
-      userAgent: ideGroup.userAgent,
+      id: clientGroup.id,
+      client: clientGroup.client,
+      label: clientGroup.label,
+      userAgent: clientGroup.userAgent,
       processes,
-      logs: sortLogsByTimestamp(ideGroup.logs)
+      logs: sortLogsByTimestamp(clientGroup.logs)
     });
   }
-  return sortByFirstLogTime(hierarchy);
+  return sortByOperationalPriority(hierarchy);
 }
 function formatTokenCount(count) {
   if (count <= 0) return "0";
@@ -13412,6 +13471,44 @@ function countSessions(processes) {
   }
   return sessions;
 }
+function readStoredIdSet(storageKey) {
+  if (typeof window === "undefined") return null;
+  try {
+    const storedValue = window.localStorage.getItem(storageKey);
+    if (storedValue === null) return null;
+    const parsed = JSON.parse(storedValue);
+    if (!Array.isArray(parsed)) return null;
+    return new Set(parsed.filter((value) => typeof value === "string"));
+  } catch {
+    return null;
+  }
+}
+function persistIdSet(storageKey, values) {
+  try {
+    window.localStorage.setItem(storageKey, JSON.stringify([...values]));
+  } catch {
+  }
+}
+function removeIds(values, ids) {
+  let changed = false;
+  const next = new Set(values);
+  for (const id of ids) {
+    if (next.delete(id)) changed = true;
+  }
+  return changed ? next : values;
+}
+function buildDefaultCollapsedProcessIds(hierarchy) {
+  const collapsedIds = /* @__PURE__ */ new Set();
+  for (const clientGroup of hierarchy) {
+    for (let index = 1; index < clientGroup.processes.length; index++) {
+      const processGroup = clientGroup.processes[index];
+      if (processGroup !== void 0 && !hasPendingLogs(processGroup.logs)) {
+        collapsedIds.add(processGroup.id);
+      }
+    }
+  }
+  return collapsedIds;
+}
 function shortProjectPath(projectFolder) {
   if (projectFolder === null || projectFolder === "") return null;
   const parts = projectFolder.replaceAll("\\", "/").split("/").filter((part) => part !== "");
@@ -13430,57 +13527,69 @@ function SummaryChip({
     "span",
     {
       className: cn(
-        "bg-white/[0.045] 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
       ),
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-[10px] uppercase tracking-[0.12em] text-white/35", children: label }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums text-slate-100", children: value })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-[10px] uppercase text-muted-foreground/70", children: label }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums text-foreground", children: value })
       ]
     }
   );
 }
-function PendingTurnBadge({
-  count,
-  label = "Turn open"
-}) {
+function AncestorActivityIndicator({ count }) {
+  const label = `${count} open turn${count === 1 ? "" : "s"}`;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "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 tracking-[0.14em] text-amber-100/90 ring-1 ring-amber-200/10",
-      title: `${count} turn${count !== 1 ? "s" : ""} not finished yet`,
+      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,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3 animate-spin" }),
-        label,
-        count > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "tabular-nums", children: [
-          "x",
-          count
-        ] })
+        count > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("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)]", children: count })
       ]
     }
   );
 }
-function LoadingSweep() {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "span",
-    {
-      className: "pointer-events-none absolute inset-x-3 bottom-0 h-px overflow-hidden rounded-full bg-white/[0.06]",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx("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)]" })
-    }
-  );
-}
 function ConversationGroupList({
   groups,
   ...groupProps
 }) {
   const hierarchy = reactExports.useMemo(() => buildConversationHierarchy(groups), [groups]);
-  const [collapsedIdeIds, setCollapsedIdeIds] = reactExports.useState(() => /* @__PURE__ */ new Set());
-  const [collapsedProcessIds, setCollapsedProcessIds] = reactExports.useState(
+  const [collapsedClientIds, setCollapsedClientIds] = reactExports.useState(
     () => /* @__PURE__ */ new Set()
   );
-  const toggleIde = reactExports.useCallback((id) => {
-    setCollapsedIdeIds((previous) => {
+  const [collapsedProcessIds, setCollapsedProcessIds] = reactExports.useState(
+    () => buildDefaultCollapsedProcessIds(hierarchy)
+  );
+  const [storedCollapseStateLoaded, setStoredCollapseStateLoaded] = reactExports.useState(false);
+  reactExports.useEffect(() => {
+    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);
+  }, []);
+  reactExports.useEffect(() => {
+    if (!storedCollapseStateLoaded) return;
+    persistIdSet(COLLAPSED_CLIENTS_STORAGE_KEY, collapsedClientIds);
+    persistIdSet(COLLAPSED_PROCESSES_STORAGE_KEY, collapsedProcessIds);
+  }, [collapsedClientIds, collapsedProcessIds, storedCollapseStateLoaded]);
+  reactExports.useEffect(() => {
+    const activeClientIds = new Set(
+      hierarchy.filter((group) => hasPendingLogs(group.logs)).map((group) => group.id)
+    );
+    const activeProcessIds = new Set(
+      hierarchy.flatMap(
+        (group) => group.processes.filter((process) => hasPendingLogs(process.logs)).map((process) => process.id)
+      )
+    );
+    setCollapsedClientIds((previous) => removeIds(previous, activeClientIds));
+    setCollapsedProcessIds((previous) => removeIds(previous, activeProcessIds));
+  }, [hierarchy]);
+  const toggleClient = reactExports.useCallback((id) => {
+    setCollapsedClientIds((previous) => {
       const next = new Set(previous);
       if (next.has(id)) {
         next.delete(id);
@@ -13501,24 +13610,24 @@ function ConversationGroupList({
       return next;
     });
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: hierarchy.map((ideGroup) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    IdeGroupSection,
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: hierarchy.map((clientGroup) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ClientGroupSection,
     {
-      group: ideGroup,
-      collapsed: collapsedIdeIds.has(ideGroup.id),
+      group: clientGroup,
+      collapsed: collapsedClientIds.has(clientGroup.id),
       collapsedProcessIds,
-      onToggleIde: () => toggleIde(ideGroup.id),
+      onToggleClient: () => toggleClient(clientGroup.id),
       onToggleProcess: toggleProcess,
       conversationProps: groupProps
     },
-    ideGroup.id
+    clientGroup.id
   )) });
 }
-function IdeGroupSection({
+function ClientGroupSection({
   group,
   collapsed,
   collapsedProcessIds,
-  onToggleIde,
+  onToggleClient,
   onToggleProcess,
   conversationProps
 }) {
@@ -13531,8 +13640,8 @@ function IdeGroupSection({
     "section",
     {
       className: cn(
-        "bg-card/75 shadow-sm relative isolate overflow-hidden rounded-[8px]",
-        isWorking && "bg-card/85"
+        "relative isolate overflow-hidden rounded-[8px] bg-card/65",
+        isWorking && "bg-card/80"
       ),
       "data-ide-group": group.id,
       children: [
@@ -13540,25 +13649,25 @@ function IdeGroupSection({
           "button",
           {
             type: "button",
-            className: "flex w-full min-w-0 items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-white/[0.03] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/45",
-            onClick: onToggleIde,
+            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,
             children: [
-              group.client === "unknown" ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "bg-white/[0.045] inline-flex size-10 shrink-0 items-center justify-center rounded-[8px] text-slate-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Monitor, { className: "size-5" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { client: group.client, className: "size-10 rounded-[8px] text-cyan-100" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0 flex-1", children: [
+              group.client === "unknown" ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-[var(--inspector-surface-low)] text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Monitor, { className: "size-4" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { client: group.client, className: "size-9 rounded-md", decorative: true }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "span",
                     {
-                      className: "truncate text-sm font-semibold text-slate-50",
+                      className: "truncate text-sm font-semibold text-foreground",
                       title: group.userAgent ?? group.label,
                       children: group.label
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded bg-cyan-300/[0.06] px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-cyan-100/75", children: "IDE" }),
-                  isWorking && /* @__PURE__ */ jsxRuntimeExports.jsx(PendingTurnBadge, { count: pendingTurnCount, label: "Turn open" })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded bg-[var(--inspector-surface-medium)] px-1.5 py-0.5 font-mono text-[9px] uppercase text-muted-foreground", children: clientAppTypeLabel(group.client) }),
+                  isWorking && /* @__PURE__ */ jsxRuntimeExports.jsx(AncestorActivityIndicator, { count: pendingTurnCount })
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
                     group.processes.length,
                     " process",
@@ -13571,21 +13680,21 @@ function IdeGroupSection({
                   ] }),
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
                     logCount,
-                    " log",
-                    logCount !== 1 ? "s" : ""
+                    " req"
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden shrink-0 items-center gap-2 md:flex", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "IN", value: formatTokenCount(totals.inputTokens) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "OUT", value: formatTokenCount(totals.outputTokens) })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("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", children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4" }) })
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [
+                collapsed && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden shrink-0 items-center gap-2 md:flex", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "IN", value: formatTokenCount(totals.inputTokens) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "OUT", value: formatTokenCount(totals.outputTokens) })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("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)]", children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4" }) })
+              ] })
             ]
           }
         ),
-        isWorking && /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingSweep, {}),
-        !collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3 px-3 pb-3 pt-2 sm:px-4", children: group.processes.map((processGroup) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        !collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-0.5 px-2 pb-2 pt-0.5", children: group.processes.map((processGroup) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           ProcessGroupSection,
           {
             group: processGroup,
@@ -13611,69 +13720,66 @@ function ProcessGroupSection({
   const logCount = group.logs.length;
   const pendingTurnCount = countPendingTurns(group.logs);
   const isWorking = pendingTurnCount > 0;
-  const processLabel = group.clientPid !== null && group.clientPid !== void 0 ? `PID ${group.clientPid}` : "process";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "relative pl-5", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute bottom-1 left-2 top-1 w-px bg-white/[0.055]", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-black/[0.10] relative overflow-hidden rounded-[8px]", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "button",
-        {
-          type: "button",
-          className: "flex w-full min-w-0 items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-white/[0.035] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/40",
-          onClick: onToggle,
-          "aria-expanded": !collapsed,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "bg-white/[0.045] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-amber-100", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Cpu, { className: "size-4" }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs font-semibold tabular-nums text-slate-100", children: processLabel }),
-                isWorking && /* @__PURE__ */ jsxRuntimeExports.jsx(PendingTurnBadge, { count: pendingTurnCount, label: "Turn open" }),
-                projectLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  "span",
-                  {
-                    className: "inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground",
-                    title: group.clientProjectFolder ?? projectLabel,
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(FolderOpen, { className: "size-3 shrink-0" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-mono", children: projectLabel })
-                    ]
-                  }
-                )
+  const processLabel = group.clientPid !== null && group.clientPid !== void 0 ? `PID ${group.clientPid}` : "Process unavailable";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "relative pl-3", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        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,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex size-8 shrink-0 items-center justify-center text-[var(--inspector-status-watch)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Cpu, { className: "size-4" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs font-semibold tabular-nums text-foreground", children: processLabel }),
+              isWorking && /* @__PURE__ */ jsxRuntimeExports.jsx(AncestorActivityIndicator, { count: pendingTurnCount }),
+              projectLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "span",
+                {
+                  className: "inline-flex min-w-0 items-center gap-1 text-[11px] text-muted-foreground",
+                  title: group.clientProjectFolder ?? projectLabel,
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(FolderOpen, { className: "size-3 shrink-0" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-mono", children: projectLabel })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                sessionCount,
+                " session",
+                sessionCount !== 1 ? "s" : ""
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                  sessionCount,
-                  " session",
-                  sessionCount !== 1 ? "s" : ""
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                  logCount,
-                  " log",
-                  logCount !== 1 ? "s" : ""
-                ] })
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                logCount,
+                " req"
               ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden shrink-0 items-center gap-2 md:flex", children: [
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [
+            collapsed && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden shrink-0 items-center gap-2 md:flex", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "IN", value: formatTokenCount(totals.inputTokens) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "OUT", value: formatTokenCount(totals.outputTokens) })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200", children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4" }) })
-          ]
-        }
-      ),
-      isWorking && /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingSweep, {}),
-      !collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 p-2 pt-1 sm:p-3 sm:pt-2", children: group.sessions.map((session) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ConversationGroup,
-        {
-          group: session,
-          ...conversationProps,
-          showClientIdentity: false,
-          showLogClientMetadata: false,
-          showProcessMetadata: false
-        },
-        session.id
-      )) })
-    ] })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("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)]", children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4" }) })
+          ] })
+        ]
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 pb-1 pl-3 pr-1 pt-1", children: group.sessions.map((session) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConversationGroup,
+      {
+        group: session,
+        ...conversationProps,
+        showClientIdentity: false,
+        showLogClientMetadata: false,
+        showProcessMetadata: false
+      },
+      session.id
+    )) })
   ] });
 }
 const NAV_ATTR = "data-nav-id";
@@ -15421,6 +15527,27 @@ function ThemeModeToggle() {
     }
   );
 }
+function PetVisibilityToggle({
+  visible,
+  onToggle
+}) {
+  const label = visible ? "Hide Inspector pet" : "Summon Inspector pet";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      className: cn(
+        "border-border/70 bg-muted/70 inline-flex size-8 shrink-0 items-center justify-center rounded-md border text-muted-foreground shadow-sm transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+        visible && "bg-background text-amber-500 shadow-sm"
+      ),
+      "aria-label": label,
+      "aria-pressed": visible,
+      title: label,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: cn("size-4 transition-opacity", !visible && "opacity-45") })
+    }
+  );
+}
 function UiScaleControl({
   preference,
   resolvedScale,
@@ -15532,11 +15659,20 @@ function BrandHeader({
   ] });
 }
 const DETAILS_PANEL_COLLAPSED_STORAGE_KEY = "agent-inspector.detailsPanelCollapsed";
+const INSPECTOR_PET_VISIBLE_STORAGE_KEY = "agent-inspector.pet.visible";
 function readStoredDetailsPanelCollapsed() {
   if (typeof window === "undefined") return true;
   const stored = window.localStorage.getItem(DETAILS_PANEL_COLLAPSED_STORAGE_KEY);
   return stored === null || stored === "1";
 }
+function readStoredInspectorPetVisible() {
+  if (typeof window === "undefined") return true;
+  try {
+    return window.localStorage.getItem(INSPECTOR_PET_VISIBLE_STORAGE_KEY) !== "0";
+  } catch {
+    return true;
+  }
+}
 function SessionContextLogButton({ label, logId }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
@@ -15863,6 +15999,8 @@ function ProxyViewer({
   const [deletingCurrentView, setDeletingCurrentView] = reactExports.useState(false);
   const [detailsPanelCollapsed, setDetailsPanelCollapsed] = reactExports.useState(true);
   const [detailsPanelStorageLoaded, setDetailsPanelStorageLoaded] = reactExports.useState(false);
+  const [petVisible, setPetVisible] = reactExports.useState(true);
+  const [petVisibilityStorageLoaded, setPetVisibilityStorageLoaded] = reactExports.useState(false);
   const [comparePair, setComparePair] = reactExports.useState(null);
   const [crabEntrancePhase, setCrabEntrancePhase] = reactExports.useState(
     "hidden"
@@ -15910,6 +16048,17 @@ function ProxyViewer({
       detailsPanelCollapsed ? "1" : "0"
     );
   }, [detailsPanelCollapsed, detailsPanelStorageLoaded]);
+  reactExports.useEffect(() => {
+    setPetVisible(readStoredInspectorPetVisible());
+    setPetVisibilityStorageLoaded(true);
+  }, []);
+  reactExports.useEffect(() => {
+    if (!petVisibilityStorageLoaded) return;
+    try {
+      window.localStorage.setItem(INSPECTOR_PET_VISIBLE_STORAGE_KEY, petVisible ? "1" : "0");
+    } catch {
+    }
+  }, [petVisibilityStorageLoaded, petVisible]);
   reactExports.useEffect(() => {
     if (pinnedSessionId === void 0) {
       document.title = "Agent Inspector";
@@ -16027,6 +16176,9 @@ function ProxyViewer({
   const toggleDetailsPanelCollapsed = reactExports.useCallback(() => {
     setDetailsPanelCollapsed((value) => !value);
   }, []);
+  const togglePetVisibility = reactExports.useCallback(() => {
+    setPetVisible((value) => !value);
+  }, []);
   const groups = reactExports.useMemo(() => groupLogsByConversation(logs), [logs]);
   const displayNumberByLogId = reactExports.useMemo(() => buildDisplayNumberByLogId(groups), [groups]);
   const sessionContextScope = reactExports.useMemo(
@@ -16105,7 +16257,7 @@ function ProxyViewer({
         ]
       }
     ),
-    detailsPanelCollapsed && /* @__PURE__ */ jsxRuntimeExports.jsx(InspectorPet, { logs }),
+    petVisibilityStorageLoaded && petVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(InspectorPet, { logs }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -16229,6 +16381,7 @@ function ProxyViewer({
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-semibold text-foreground", children: "Logs" }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 font-mono text-[11px] text-muted-foreground", children: activeScopeLabel })
                 ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(PetVisibilityToggle, { visible: petVisible, onToggle: togglePetVisibility }),
                 onImportLogs !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "input",