@tonyclaw/agent-inspector 2.1.16 → 2.1.17

package/.output/server/_ssr/{ProxyViewerContainer-N4J7uBCX.mjs → ProxyViewerContainer-DCZIJC2b.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { I as InspectorGroupsListResponseSchema, C as CapturedLogSchema, 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, p as packageJson, P as ProviderConfigSchema, i as apiFormatForPath, n as GroupEvidenceExportResultSchema, o as DeleteInspectorGroupResponseSchema, v as createPendingProviderTestResults, w as ProviderTestResultsSchema, x as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, y as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, l as AlertSummarySchema, m as AlertListResponseSchema, G as GroupEvidenceReadResponseSchema, t as maskApiKey, q as providerHasContextMetadata, r as findProviderModelMetadata, f as parseOpenAIResponse, g as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, h as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, z as resolveProviderContextWindow, j as getSessionPath, u as buildUpstreamUrl, K as KnowledgeCandidateSchema, B as isPlainRecord, k as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-CQ4Zxhmr.mjs";
+import { I as InspectorGroupsListResponseSchema, C as CapturedLogSchema, 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, p as packageJson, P as ProviderConfigSchema, i as apiFormatForPath, n as GroupEvidenceExportResultSchema, o as DeleteInspectorGroupResponseSchema, y as createPendingProviderTestResults, z as ProviderTestResultsSchema, B as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, E as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, l as AlertSummarySchema, m as AlertListResponseSchema, G as GroupEvidenceReadResponseSchema, t as maskApiKey, u as PATH_V1_MESSAGES, v as PATH_V1_CHAT_COMPLETIONS, w as PATH_V1_RESPONSES, q as providerHasContextMetadata, r as findProviderModelMetadata, f as parseOpenAIResponse, g as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, h as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, F as resolveProviderContextWindow, j as getSessionPath, x as previewUpstreamUrl, K as KnowledgeCandidateSchema, H as isPlainRecord, k as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-__o2wrfO.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 { c as cva } from "../_libs/class-variance-authority.mjs";
 import { u as useWindowVirtualizer, a as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
 import { d as diffJson, a as diffLines } from "../_libs/diff.mjs";
 import { R as Root2, T as Trigger, I as Icon, V as Value, P as Portal, C as Content2, a as Viewport, b as Item, c as ItemIndicator, d as ItemText, S as ScrollUpButton, e as ScrollDownButton } from "../_libs/radix-ui__react-select.mjs";
-import { T as TriangleAlert, C as CircleCheck, X, I as Info, a as ChevronDown, b as Check, U as Upload, D as Download, F as FileBraces, c as Trash2, P as Plus, A as ArrowLeft, d as ChevronUp, e as Copy, f as ChevronsLeft, g as ChevronLeft, h as ChevronRight, i as ChevronsRight, j as Clapperboard, S as Siren, G as Gauge, L as LoaderCircle, R as RefreshCw, k as Layers, l as Settings, M as Monitor, m as Scan, n as CircleAlert, o as Terminal, p as ArrowUpRight, q as ArrowDownRight, r as Cpu, s as FolderOpen, B as Bell, t as Clock3, u as ShieldAlert, E as EyeOff, v as Eye, w as ExternalLink, x as RotateCw, y as Clock, z as Pencil, H as MessageSquare, Z as Zap, W as Wrench, J as Brain, K as Minus, N as CircleCheckBig, O as CircleQuestionMark, Q as Server, V as Lock, Y as Wifi, _ as WifiOff, $ as CircleX, a0 as ShieldCheck, a1 as Save, a2 as FileSearch, a3 as CloudUpload, a4 as OctagonAlert, a5 as Radio, a6 as Globe, a7 as FileTerminal, a8 as ChevronsUp, a9 as ChevronsDown, aa as FileDiff, ab as History, ac as RotateCcw, ad as Search, ae as GitCompareArrows, af as ArrowUp, ag as ArrowDown, ah as Ellipsis, ai as CodeXml, aj as Blocks, ak as MousePointerClick, al as FileText, am as Rows3, an as Columns2 } from "../_libs/lucide-react.mjs";
+import { T as TriangleAlert, C as CircleCheck, X, I as Info, a as ChevronDown, b as Check, U as Upload, D as Download, F as FileBraces, c as Trash2, P as Plus, A as ArrowLeft, d as ChevronUp, e as Copy, f as ChevronsLeft, g as ChevronLeft, h as ChevronRight, i as ChevronsRight, j as Clapperboard, k as Flag, S as Siren, l as Timer, G as Gauge, L as LoaderCircle, R as RefreshCw, m as Layers, n as Settings, M as Monitor, o as Scan, p as CircleAlert, q as Terminal, r as ArrowUpRight, s as ArrowDownRight, t as Cpu, u as FolderOpen, B as Bell, v as Clock3, w as ShieldAlert, E as EyeOff, x as Eye, y as ExternalLink, z as RotateCw, H as Clock, J as Pencil, K as MessageSquare, Z as Zap, W as Wrench, N as Brain, O as Minus, Q as CircleCheckBig, V as CircleQuestionMark, Y as Server, _ as Lock, $ as Wifi, a0 as WifiOff, a1 as CircleX, a2 as ShieldCheck, a3 as Save, a4 as FileSearch, a5 as CloudUpload, a6 as OctagonAlert, a7 as Radio, a8 as Globe, a9 as FileTerminal, aa as ChevronsUp, ab as ChevronsDown, ac as FileDiff, ad as History, ae as RotateCcw, af as Search, ag as GitCompareArrows, ah as ArrowUp, ai as ArrowDown, aj as Ellipsis, ak as CodeXml, al as Blocks, am as MousePointerClick, an as FileText, ao as Rows3, ap as Columns2 } from "../_libs/lucide-react.mjs";
 import { u as union, d as object, a as array, l as literal, b as string, n as number, c as boolean, _ as _enum } from "../_libs/zod.mjs";
 import { S as Slot } from "../_libs/radix-ui__react-slot.mjs";
 import { R as Root2$1, L as List, T as Trigger$2, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
@@ -522,6 +522,78 @@ function formatTimestamp$2(iso, format) {
 function formatTimestampRange(startedAt, endedAt, format) {
   return `${formatTimestamp$2(startedAt, format)} - ${formatTimestamp$2(endedAt, format)}`;
 }
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function normalizeAnthropicStopReason(value) {
+  switch (value) {
+    case "end_turn":
+    case "tool_use":
+      return value;
+    default:
+      return null;
+  }
+}
+function normalizeOpenAIFinishReason(value) {
+  switch (value) {
+    case "stop":
+    case "length":
+      return value;
+    default:
+      return null;
+  }
+}
+function isResponsesLengthLimitReason(value) {
+  switch (value) {
+    case "max_output_tokens":
+    case "max_tokens":
+      return true;
+    default:
+      return false;
+  }
+}
+function extractStopReason(log) {
+  if (log.responseText === null) return null;
+  try {
+    let json = JSON.parse(log.responseText);
+    if (typeof json === "string") {
+      json = JSON.parse(json);
+    }
+    if (!isRecord(json)) return null;
+    if (typeof json.stop_reason === "string") {
+      return normalizeAnthropicStopReason(json.stop_reason);
+    }
+    if (Array.isArray(json.choices)) {
+      for (const choice of json.choices) {
+        if (!isRecord(choice) || typeof choice.finish_reason !== "string") continue;
+        const reason = normalizeOpenAIFinishReason(choice.finish_reason);
+        if (reason !== null) return reason;
+      }
+    }
+    if (Array.isArray(json.output)) {
+      for (const item of json.output) {
+        if (isRecord(item) && item.type === "function_call") {
+          return "tool_use";
+        }
+      }
+      if (json.status === "completed") {
+        return "stop";
+      }
+    }
+    if (json.status === "incomplete" && isRecord(json.incomplete_details)) {
+      const reason = json.incomplete_details.reason;
+      if (typeof reason === "string" && isResponsesLengthLimitReason(reason)) {
+        return "length";
+      }
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function isTurnBoundary(stopReason) {
+  return stopReason === "end_turn" || stopReason === "stop" || stopReason === "length";
+}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -1003,7 +1075,6 @@ function TooltipContent({
   ) });
 }
 const MAX_VISIBLE_LOGOS = 3;
-const ROW_CHEVRON_SLOT_CLASS = "flex h-8 w-5 shrink-0 items-center justify-center text-muted-foreground";
 function ProviderLogoStack({
   items,
   ariaLabel,
@@ -1410,6 +1481,28 @@ function resolveLogFormat(log) {
   const pathFormat = apiFormatForPath(log.path);
   return pathFormat === "unknown" ? log.apiFormat : pathFormat;
 }
+const HEADER_ACTION_BUTTON_CLASS$1 = "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground";
+function HeaderMetric({
+  icon,
+  children,
+  title,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "span",
+    {
+      className: cn(
+        "border border-border bg-muted/30 inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground",
+        className
+      ),
+      title,
+      children: [
+        icon,
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 font-mono tabular-nums", children })
+      ]
+    }
+  );
+}
 function ConversationHeader({
   conversationId,
   startTime,
@@ -1453,6 +1546,8 @@ function ConversationHeader({
   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 timeLabel = formatTimestampRange(startTime, endTime, timeDisplayFormat);
+  const callsLabel = `${totalCalls} call${totalCalls !== 1 ? "s" : ""}`;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -1461,11 +1556,11 @@ function ConversationHeader({
       "data-nav-id": `conv-${conversationId}`,
       "data-nav-action": expanded ? "collapse" : "expand",
       className: cn(
-        "border border-border bg-card shadow-sm flex cursor-pointer items-center gap-3 rounded-[8px] px-3 py-2 transition-colors",
+        "border border-border bg-card shadow-sm flex cursor-pointer items-start gap-3 rounded-[8px] px-3 py-2.5 transition-colors",
         "hover:border-cyan-200/20",
         "select-none",
         "sticky top-0 z-10 mb-2",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
+        "focus-visible:ring-1 focus-visible:ring-cyan-300/35 focus-visible:outline-none"
       ),
       onClick: onToggle,
       onKeyDown: (e) => {
@@ -1476,115 +1571,119 @@ function ConversationHeader({
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogoStack, { items: providerLogoItems, ariaLabel: "Models used in this session" }),
-        isFallbackConversation && showProcessMetadata ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          clientPid !== null && clientPid !== void 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "span",
-            {
-              className: "shrink-0 font-mono text-xs font-semibold text-violet-200",
-              title: `PID ${clientPid}`,
-              children: [
-                "PID ",
-                clientPid
-              ]
-            }
-          ) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 font-mono text-xs font-semibold text-violet-200", children: conversationId }),
-          clientProjectFolder !== null && clientProjectFolder !== void 0 && clientProjectFolder !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "span",
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ProviderLogoStack,
+          {
+            items: providerLogoItems,
+            ariaLabel: "Models used in this session",
+            className: "mt-0.5"
+          }
+        ),
+        /* @__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: [
+            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",
+                title: `PID ${clientPid}`,
+                children: [
+                  "PID ",
+                  clientPid
+                ]
+              }
+            ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "span",
+              {
+                className: "min-w-0 max-w-full truncate font-mono text-xs font-semibold text-violet-200",
+                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",
+                title: conversationId,
+                children: isFallbackConversation ? "sessionless" : compactSessionLabel
+              }
+            ),
+            !isFallbackConversation && showProcessMetadata && clientPid !== null && clientPid !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "span",
+              {
+                className: "border border-border bg-muted/40 shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground",
+                title: `Client process ID ${clientPid}`,
+                children: [
+                  "PID ",
+                  clientPid
+                ]
+              }
+            ),
+            isFallbackConversation && showProcessMetadata && clientProjectFolder !== null && clientProjectFolder !== void 0 && clientProjectFolder !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "span",
+              {
+                className: "min-w-0 max-w-[240px] truncate font-mono text-xs text-muted-foreground",
+                title: clientProjectFolder,
+                children: clientProjectFolder
+              }
+            ),
+            showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "span",
+              {
+                className: "border border-border bg-muted/30 inline-flex h-6 max-w-[180px] shrink-0 items-center gap-1 rounded-md px-1.5 text-xs text-muted-foreground",
+                title: clientTooltip ?? clientDisplayLabel,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { client: clientApp, className: "size-4 shrink-0" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-mono tabular-nums", children: clientDisplayLabel })
+                ]
+              }
+            )
+          ] }),
+          /* @__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-amber-400", children: formatTokens(totalOutputTokens) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex shrink-0 items-start gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
             {
-              className: "text-muted-foreground text-xs font-mono truncate max-w-[200px] shrink-0",
-              title: clientProjectFolder,
-              children: clientProjectFolder
+              type: "button",
+              onClick: handleOpenInNewTab,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  handleOpenInNewTab(e);
+                }
+              },
+              "aria-label": `Open session ${conversationId} in a new tab`,
+              title: "Open this session in a new tab",
+              className: HEADER_ACTION_BUTTON_CLASS$1,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-3.5" })
             }
-          )
-        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "span",
+          ),
+          onClear !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
             {
-              className: "shrink-0 font-mono text-xs font-semibold text-violet-200",
-              title: conversationId,
-              children: isFallbackConversation ? "sessionless" : compactSessionLabel
+              type: "button",
+              onClick: handleClearClick,
+              "aria-label": `Clear group (${totalCalls} request${totalCalls !== 1 ? "s" : ""})`,
+              title: "Clear this group",
+              className: HEADER_ACTION_BUTTON_CLASS$1,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" })
             }
           ),
-          showProcessMetadata && clientPid !== null && clientPid !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
-              className: "border border-border bg-muted/40 shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground",
-              title: `Client process ID ${clientPid}`,
-              children: [
-                "PID ",
-                clientPid
-              ]
+              className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200",
+              "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" })
             }
           )
         ] }),
-        showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "span",
-          {
-            className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0",
-            title: clientTooltip ?? clientDisplayLabel,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { client: clientApp, className: "size-5" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[120px]", children: clientDisplayLabel })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatTimestampRange(startTime, endTime, timeDisplayFormat) })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
-            totalCalls,
-            " call",
-            totalCalls !== 1 ? "s" : ""
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs shrink-0", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3 text-muted-foreground" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-blue-400", children: formatTokens(totalInputTokens) }),
-            " / ",
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-amber-400", children: formatTokens(totalOutputTokens) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 min-w-0" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleOpenInNewTab,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                handleOpenInNewTab(e);
-              }
-            },
-            "aria-label": `Open session ${conversationId} in a new tab`,
-            title: "Open this session in a new tab",
-            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-3.5" })
-          }
-        ),
-        onClear !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleClearClick,
-            "aria-label": `Clear group (${totalCalls} request${totalCalls !== 1 ? "s" : ""})`,
-            title: "Clear this group",
-            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "span",
-          {
-            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200",
-            "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" })
-          }
-        ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ConfirmDialog,
           {
@@ -1667,794 +1766,406 @@ function readLogFocusRequest(event) {
       return null;
   }
 }
-function isRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
+const FULL_EXPAND_NODE_LIMIT = 400;
+const STRUCTURE_EXPAND_NODE_LIMIT = 2e3;
+function isJsonArray(value) {
+  return Array.isArray(value);
 }
-function normalizeAnthropicStopReason(value) {
-  switch (value) {
-    case "end_turn":
-    case "tool_use":
-      return value;
-    default:
-      return null;
+function countJsonNodesUpTo(value, limit) {
+  const stack = [value];
+  let count = 0;
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (current === void 0) continue;
+    count += 1;
+    if (count > limit) return count;
+    if (current === null || typeof current !== "object") continue;
+    if (isJsonArray(current)) {
+      for (const child of current) {
+        stack.push(child);
+      }
+      continue;
+    }
+    for (const key of Object.keys(current)) {
+      const child = current[key];
+      if (child !== void 0) stack.push(child);
+    }
   }
+  return count;
 }
-function normalizeOpenAIFinishReason(value) {
-  switch (value) {
-    case "stop":
-    case "length":
-      return value;
-    default:
-      return null;
-  }
+function getJsonExpansionPolicy(value) {
+  const nodeCount = countJsonNodesUpTo(value, STRUCTURE_EXPAND_NODE_LIMIT + 1);
+  if (nodeCount <= FULL_EXPAND_NODE_LIMIT) return { depth: Number.POSITIVE_INFINITY };
+  if (nodeCount <= STRUCTURE_EXPAND_NODE_LIMIT) return { depth: 3 };
+  return { depth: 2 };
 }
-function isResponsesLengthLimitReason(value) {
-  switch (value) {
-    case "max_output_tokens":
-    case "max_tokens":
-      return true;
-    default:
-      return false;
+function parseJsonText(text) {
+  try {
+    const parsed = JSON.parse(text);
+    return { kind: "json", data: safeJsonValue(parsed) };
+  } catch {
+    return { kind: "text" };
   }
 }
-function extractStopReason(log) {
-  if (log.responseText === null) return null;
-  try {
-    let json = JSON.parse(log.responseText);
-    if (typeof json === "string") {
-      json = JSON.parse(json);
-    }
-    if (!isRecord(json)) return null;
-    if (typeof json.stop_reason === "string") {
-      return normalizeAnthropicStopReason(json.stop_reason);
-    }
-    if (Array.isArray(json.choices)) {
-      for (const choice of json.choices) {
-        if (!isRecord(choice) || typeof choice.finish_reason !== "string") continue;
-        const reason = normalizeOpenAIFinishReason(choice.finish_reason);
-        if (reason !== null) return reason;
-      }
-    }
-    if (Array.isArray(json.output)) {
-      for (const item of json.output) {
-        if (isRecord(item) && item.type === "function_call") {
-          return "tool_use";
-        }
-      }
-      if (json.status === "completed") {
-        return "stop";
+function useJsonBulkExpansion(text) {
+  const parsed = reactExports.useMemo(() => text === null ? null : parseJsonText(text), [text]);
+  const parsedData = parsed?.kind === "json" ? parsed.data : null;
+  const policy = reactExports.useMemo(
+    () => parsedData === null ? null : getJsonExpansionPolicy(parsedData),
+    [parsedData]
+  );
+  const [isExpanded, setIsExpanded] = reactExports.useState(false);
+  const [bulkDepth, setBulkDepth] = reactExports.useState(0);
+  const [bulkRevision, setBulkRevision] = reactExports.useState(0);
+  const [isPending, startTransition] = reactExports.useTransition();
+  const toggle = reactExports.useCallback(() => {
+    const nextExpanded = !isExpanded;
+    const targetDepth = nextExpanded && policy !== null ? policy.depth : 0;
+    startTransition(() => {
+      setIsExpanded(nextExpanded);
+      setBulkDepth(targetDepth);
+      setBulkRevision((current) => current + 1);
+    });
+  }, [isExpanded, policy]);
+  return { parsedData, policy, isExpanded, toggle, isPending, bulkDepth, bulkRevision };
+}
+function safeJsonValue(value) {
+  if (value === null || value === void 0) return null;
+  switch (typeof value) {
+    case "string":
+      return value;
+    case "number":
+      return value;
+    case "boolean":
+      return value;
+    case "object": {
+      if (Array.isArray(value)) {
+        return value.map((item) => safeJsonValue(item));
       }
-    }
-    if (json.status === "incomplete" && isRecord(json.incomplete_details)) {
-      const reason = json.incomplete_details.reason;
-      if (typeof reason === "string" && isResponsesLengthLimitReason(reason)) {
-        return "length";
+      const result = {};
+      for (const key of Object.keys(value)) {
+        const descriptor = Object.getOwnPropertyDescriptor(value, key);
+        result[key] = safeJsonValue(descriptor?.value);
       }
+      return result;
     }
-    return null;
-  } catch {
-    return null;
+    case "bigint":
+    case "symbol":
+    case "function":
+    case "undefined":
+      return String(value);
   }
+  return null;
 }
-function isTurnBoundary(stopReason) {
-  return stopReason === "end_turn" || stopReason === "stop" || stopReason === "length";
-}
-function SvgShell({
+function Tabs({
   className,
-  style,
-  d,
-  eyeStalks,
-  eyes,
-  legs,
-  extras
+  orientation = "horizontal",
+  ...props
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      style,
-      className: cn("inline-block size-5", className),
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d }),
-        eyeStalks,
-        eyes,
-        legs,
-        extras
-      ]
-    }
-  );
-}
-const StdLegs = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6.5", y1: "16", x2: "4.5", y2: "19.5" }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9", y1: "17.5", x2: "8", y2: "20.5" }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "15", y1: "17.5", x2: "16", y2: "20.5" }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17.5", y1: "16", x2: "19.5", y2: "19.5" })
-] });
-const ShortLegs = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "7", y1: "16", x2: "5.5", y2: "18.5" }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9.5", y1: "17", x2: "8.5", y2: "19.5" }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14.5", y1: "17", x2: "15.5", y2: "19.5" }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17", y1: "16", x2: "18.5", y2: "18.5" })
-] });
-function Crab1({ className }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
+    Root2$1,
     {
-      className,
-      d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z",
-      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
-      ] }),
-      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" })
-      ] }),
-      legs: StdLegs,
-      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" })
-      ] })
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      orientation,
+      className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className),
+      ...props
     }
   );
 }
-function Crab2({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
-    {
-      className,
-      d: "M4 13 C4 7 7.5 5.5 12 5.5 C16.5 5.5 20 7 20 13 C20 17.5 16.5 19 12 19 C7.5 19 4 17.5 4 13 Z",
-      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9.5", y1: "6.5", x2: "9.5", y2: "4.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14.5", y1: "6.5", x2: "14.5", y2: "4.5" })
-      ] }),
-      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4", r: "1.1", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4", r: "1.1", fill: "currentColor", stroke: "none" })
-      ] }),
-      legs: ShortLegs,
-      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C4 9.5 2.5 10 3 12 C3.5 13.5 4.5 13 5 12" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20 9.5 21.5 10 21 12 C20.5 13.5 19.5 13 19 12" })
-      ] })
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  );
-}
-function Crab3({ className }) {
+  }
+);
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
+    List,
     {
-      className,
-      d: "M3 13.5 C3 8 7 6 12 6 C17 6 21 8 21 13.5 C21 17 17 19 12 19 C7 19 3 17 3 13.5 Z",
-      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "7", y1: "7", x2: "6.5", y2: "4.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17", y1: "7", x2: "17.5", y2: "4.5" })
-      ] }),
-      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "6.5", cy: "4", r: "0.8", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "17.5", cy: "4", r: "0.8", fill: "currentColor", stroke: "none" })
-      ] }),
-      legs: StdLegs,
-      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 12 C2.5 10.5 1 11 1.5 13 C2 14.5 3.5 14 4.5 13" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20 12 C21.5 10.5 23 11 22.5 13 C22 14.5 20.5 14 19.5 13" })
-      ] })
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn(tabsListVariants({ variant }), className),
+      ...props
     }
   );
 }
-function Crab4({ className }) {
+function TabsTrigger({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
+    Trigger$2,
     {
-      className,
-      d: "M6 14 C6 8 9 5.5 12 5.5 C15 5.5 18 8 18 14 C18 18 15 20 12 20 C9 20 6 18 6 14 Z",
-      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "6.5", x2: "10", y2: "3.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "6.5", x2: "14", y2: "3.5" })
-      ] }),
-      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "10", cy: "3", r: "0.7", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14", cy: "3", r: "0.7", fill: "currentColor", stroke: "none" })
-      ] }),
-      legs: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "7", y1: "17", x2: "5", y2: "20.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9.5", y1: "18.5", x2: "8.5", y2: "21.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14.5", y1: "18.5", x2: "15.5", y2: "21.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17", y1: "17", x2: "19", y2: "20.5" })
-      ] }),
-      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6.5 11 C5 8.5 3 9 3.5 11.5 C4 13.5 5 13 6 12" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17.5 11 C19 8.5 21 9 20.5 11.5 C20 13.5 19 13 18 12" })
-      ] })
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      ),
+      ...props
     }
   );
 }
-function Crab5({ className }) {
+function TabsContent({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
+    Content$1,
     {
-      className,
-      d: "M5 13 C5 9 8 7 12 7 L13 4 L14 7 C16 7 19 9 19 13 C19 16 16 18 13 18 L12 21 L11 18 C8 18 5 16 5 13 Z",
-      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
-      ] }),
-      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.8", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.8", fill: "currentColor", stroke: "none" })
-      ] }),
-      legs: StdLegs,
-      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" })
-      ] })
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none", className),
+      ...props
     }
   );
 }
-function Crab6({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
-    {
-      className,
-      d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z",
-      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
-      ] }),
-      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "13.5", y1: "4", x2: "15.5", y2: "5" })
-      ] }),
-      legs: StdLegs,
-      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" })
-      ] })
-    }
+function useCopyFeedback(text) {
+  const [copied, setCopied] = reactExports.useState(false);
+  const timerRef = reactExports.useRef(null);
+  reactExports.useEffect(
+    () => () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    },
+    []
   );
-}
-function Crab7({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
-    {
-      className,
-      d: "M5.5 13.5 C5.5 10 8.5 8 12 8 C15.5 8 18.5 10 18.5 13.5 C18.5 16 15.5 17.5 12 17.5 C8.5 17.5 5.5 16 5.5 13.5 Z",
-      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "8", x2: "10", y2: "6" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "8", x2: "14", y2: "6" })
-      ] }),
-      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9", y1: "6", x2: "11", y2: "6.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "13", y1: "6", x2: "15", y2: "6.5" })
-      ] }),
-      legs: ShortLegs,
-      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6 11.5 C4.5 10.5 3 11 3.5 12.5 C4 13.5 5 13 5.5 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18 11.5 C19.5 10.5 21 11 20.5 12.5 C20 13.5 19 13 18.5 12.5" })
-      ] })
-    }
+  const copy = reactExports.useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (text === null) return;
+      void copyTextToClipboard(text).then((success) => {
+        if (!success) return;
+        setCopied(true);
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setCopied(false), 2e3);
+      });
+    },
+    [text]
   );
+  return { copied, copy };
 }
-function Crab8({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
-    {
-      className,
-      d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z",
-      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
-      ] }),
-      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.7", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.7", fill: "currentColor", stroke: "none" })
-      ] }),
-      legs: StdLegs,
-      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "8.5", y1: "4", x2: "10.5", y2: "4.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "15.5", y1: "4", x2: "13.5", y2: "4.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 15.5 C10 14.5 14 14.5 15 15.5" })
-      ] })
-    }
+const LazyCompareDrawer = reactExports.lazy(
+  () => import("./CompareDrawer-qC3adEeq.mjs").then((m) => ({ default: m.CompareDrawer }))
+);
+const LazyReplayDialog = reactExports.lazy(
+  () => import("./ReplayDialog-CvX4XYCi.mjs").then((m) => ({ default: m.ReplayDialog }))
+);
+const LazyRequestAnatomy = reactExports.lazy(
+  () => import("./RequestAnatomy-HQfrxjO1.mjs").then((m) => ({ default: m.RequestAnatomy }))
+);
+const LazyResponseView = reactExports.lazy(
+  () => import("./ResponseView-QSlSD11e.mjs").then((m) => ({ default: m.ResponseView }))
+);
+const LazyStreamingChunkSequence = reactExports.lazy(
+  () => import("./StreamingChunkSequence-DTAiwlnI.mjs").then((m) => ({
+    default: m.StreamingChunkSequence
+  }))
+);
+const LazyJsonViewer = reactExports.lazy(
+  () => import("./json-viewer-CrIX0e0Q.mjs").then((m) => ({ default: m.JsonViewer }))
+);
+const LazyJsonViewerFromString = reactExports.lazy(
+  () => import("./json-viewer-CrIX0e0Q.mjs").then((m) => ({ default: m.JsonViewerFromString }))
+);
+const HIGHLIGHT_DURATION_MS = 1200;
+const MAX_HIGHLIGHT_ATTEMPTS = 12;
+function useAnatomyJump(options) {
+  const { containerRef, setExpandToPath, ensureTabActive, highlightMs } = options;
+  const highlightTimer = reactExports.useRef(null);
+  return reactExports.useCallback(
+    (segment2) => {
+      ensureTabActive?.();
+      setExpandToPath(segment2.path);
+      const applyHighlight = (target) => {
+        target.scrollIntoView({ behavior: "smooth", block: "center" });
+        target.classList.add(
+          "ring-2",
+          "ring-primary/60",
+          "ring-offset-1",
+          "ring-offset-background",
+          "rounded-sm",
+          "transition-shadow"
+        );
+        if (highlightTimer.current !== null) clearTimeout(highlightTimer.current);
+        highlightTimer.current = setTimeout(() => {
+          target.classList.remove(
+            "ring-2",
+            "ring-primary/60",
+            "ring-offset-1",
+            "ring-offset-background",
+            "rounded-sm",
+            "transition-shadow"
+          );
+          setExpandToPath(null);
+        }, highlightMs ?? HIGHLIGHT_DURATION_MS);
+      };
+      const escape = (value) => {
+        if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+          return CSS.escape(value);
+        }
+        return value.replace(/(["'\\[\](){}])/g, "\\$1");
+      };
+      const selector = `[data-anatomy-path="${escape(segment2.path)}"]`;
+      const tryFindTarget = (attemptsLeft) => {
+        const container = containerRef.current;
+        if (container !== null) {
+          const target = container.querySelector(selector);
+          if (target !== null) {
+            applyHighlight(target);
+            return;
+          }
+        }
+        if (attemptsLeft > 0) {
+          window.requestAnimationFrame(() => tryFindTarget(attemptsLeft - 1));
+        } else {
+          setExpandToPath(null);
+        }
+      };
+      window.requestAnimationFrame(() => tryFindTarget(MAX_HIGHLIGHT_ATTEMPTS));
+    },
+    [containerRef, ensureTabActive, highlightMs, setExpandToPath]
   );
 }
-function Crab9({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
-    {
-      className,
-      d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z",
-      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
-      ] }),
-      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "1.2", fill: "none", stroke: "currentColor" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "1.2", fill: "none", stroke: "currentColor" })
-      ] }),
-      legs: StdLegs,
-      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("ellipse", { cx: "12", cy: "15", rx: "2", ry: "1.5", fill: "currentColor", stroke: "none" })
-      ] })
-    }
-  );
+const DEFAULT_FULL_BODY_HYDRATION_ERROR_DETAIL = "The compact log metadata is still available. Retry if the local server was restarting or the body store was briefly unavailable.";
+function formatBytes$1(bytes) {
+  if (bytes < 1024) return `${bytes.toLocaleString()} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MiB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GiB`;
 }
-function Crab10({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
-    {
-      className,
-      d: "M4.5 13 C4.5 8 7.5 6 12 6 C16.5 6 19.5 8 19.5 13 C19.5 17 16.5 18.5 12 18.5 C7.5 18.5 4.5 17 4.5 13 Z",
-      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9.5", y1: "7", x2: "9", y2: "5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14.5", y1: "7", x2: "15", y2: "5" })
-      ] }),
-      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9", cy: "4.5", r: "1", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "15", cy: "4.5", r: "1", fill: "currentColor", stroke: "none" })
-      ] }),
-      legs: StdLegs,
-      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9 2 9.5 2.5 12 C3 14 4 13 5 12" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9 22 9.5 21.5 12 C21 14 20 13 19 12" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 14.5 C10 16 14 16 15 14.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "7", cy: "13", r: "1", fill: "currentColor", stroke: "none", opacity: "0.3" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "17", cy: "13", r: "1", fill: "currentColor", stroke: "none", opacity: "0.3" })
-      ] })
-    }
-  );
+function formatBodyHydrationFootprint(requestBytes, responseBytes) {
+  const parts = [];
+  if (requestBytes !== null && requestBytes !== void 0) {
+    parts.push(`Request ${formatBytes$1(requestBytes)}`);
+  }
+  if (responseBytes !== null && responseBytes !== void 0) {
+    parts.push(`Response ${formatBytes$1(responseBytes)}`);
+  }
+  return parts.length === 0 ? null : parts.join(" · ");
 }
-function Crab11({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
-    {
-      className,
-      d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z",
-      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5.5" })
-      ] }),
-      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "7.5", y1: "5.5", x2: "16.5", y2: "5.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "7", y: "5", width: "4", height: "2", rx: "0.5", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "13", y: "5", width: "4", height: "2", rx: "0.5", fill: "currentColor", stroke: "none" })
-      ] }),
-      legs: StdLegs,
-      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.5 15 C10.5 16 13.5 16 14.5 15" })
-      ] })
-    }
-  );
+function describeFullBodyHydrationError(error) {
+  if (error instanceof ApiTimeoutError) {
+    return {
+      title: "Full bodies timed out",
+      detail: "The log store did not answer before the UI timeout. Compact metadata is still available; retry loading the bodies."
+    };
+  }
+  if (error instanceof Error) {
+    const message = error.message.trim();
+    return {
+      title: "Full bodies could not be loaded",
+      detail: message === "" ? DEFAULT_FULL_BODY_HYDRATION_ERROR_DETAIL : message
+    };
+  }
+  return {
+    title: "Full bodies could not be loaded",
+    detail: DEFAULT_FULL_BODY_HYDRATION_ERROR_DETAIL
+  };
 }
-function Crab12({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
-    {
-      className,
-      d: "M7 13.5 C7 10.5 9.5 9 12 9 C14.5 9 17 10.5 17 13.5 C17 16 14.5 17.5 12 17.5 C9.5 17.5 7 16 7 13.5 Z",
-      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10.5", y1: "9.5", x2: "10.5", y2: "8" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "13.5", y1: "9.5", x2: "13.5", y2: "8" })
-      ] }),
-      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "10.5", cy: "7.5", r: "0.8", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "13.5", cy: "7.5", r: "0.8", fill: "currentColor", stroke: "none" })
-      ] }),
-      legs: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "8", y1: "16", x2: "6.5", y2: "18" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "17", x2: "9.5", y2: "19" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "17", x2: "14.5", y2: "19" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "16", y1: "16", x2: "17.5", y2: "18" })
-      ] }),
-      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M7.5 12 C6.5 11 5.5 11.5 6 13 C6.5 14 7 13.5 7.5 13" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M16.5 12 C17.5 11 18.5 11.5 18 13 C17.5 14 17 13.5 16.5 13" })
-      ] })
-    }
-  );
-}
-const crabVariants = [
-  Crab1,
-  Crab2,
-  Crab3,
-  Crab4,
-  Crab5,
-  Crab6,
-  Crab7,
-  Crab8,
-  Crab9,
-  Crab10,
-  Crab11,
-  Crab12
-];
-function getCrabVariant(index) {
-  return crabVariants[Math.abs(index) % crabVariants.length] ?? Crab1;
-}
-function getInteriorCrabVariantIndex(seed) {
-  const interiorCount = crabVariants.length - 2;
-  if (interiorCount <= 0) return 0;
-  const normalizedSeed = Number.isFinite(seed) ? Math.trunc(seed) : 0;
-  return 1 + (normalizedSeed % interiorCount + interiorCount) % interiorCount;
-}
-function getInteriorCrabVariant(seed) {
-  return getCrabVariant(getInteriorCrabVariantIndex(seed));
+function normalizeHeaders(headers) {
+  if (headers === void 0) return [];
+  return Object.entries(headers).map((entry) => [entry[0].toLowerCase(), entry[1]]).sort(([a], [b]) => a.localeCompare(b));
 }
-const FULL_EXPAND_NODE_LIMIT = 400;
-const STRUCTURE_EXPAND_NODE_LIMIT = 2e3;
-function isJsonArray(value) {
-  return Array.isArray(value);
+function headerLine([key, value]) {
+  return `${key}: ${value}`;
 }
-function countJsonNodesUpTo(value, limit) {
-  const stack = [value];
-  let count = 0;
-  while (stack.length > 0) {
-    const current = stack.pop();
-    if (current === void 0) continue;
-    count += 1;
-    if (count > limit) return count;
-    if (current === null || typeof current !== "object") continue;
-    if (isJsonArray(current)) {
-      for (const child of current) {
-        stack.push(child);
+function changesToLines(changes) {
+  const lines = [];
+  let oldNum = 0;
+  let newNum = 0;
+  for (const change of changes) {
+    const parts = change.value.split("\n");
+    if (parts.length > 0 && parts[parts.length - 1] === "") parts.pop();
+    for (const text of parts) {
+      if (change.added) {
+        newNum += 1;
+        lines.push({ kind: "added", text, oldLineNumber: null, newLineNumber: newNum });
+      } else if (change.removed) {
+        oldNum += 1;
+        lines.push({ kind: "removed", text, oldLineNumber: oldNum, newLineNumber: null });
+      } else {
+        oldNum += 1;
+        newNum += 1;
+        lines.push({
+          kind: "context",
+          text,
+          oldLineNumber: oldNum,
+          newLineNumber: newNum
+        });
       }
-      continue;
-    }
-    for (const key of Object.keys(current)) {
-      const child = current[key];
-      if (child !== void 0) stack.push(child);
     }
   }
-  return count;
+  return lines;
 }
-function getJsonExpansionPolicy(value) {
-  const nodeCount = countJsonNodesUpTo(value, STRUCTURE_EXPAND_NODE_LIMIT + 1);
-  if (nodeCount <= FULL_EXPAND_NODE_LIMIT) return { depth: Number.POSITIVE_INFINITY };
-  if (nodeCount <= STRUCTURE_EXPAND_NODE_LIMIT) return { depth: 3 };
-  return { depth: 2 };
+function computeHeadersDiff(rawHeaders, processedHeaders) {
+  const left = normalizeHeaders(rawHeaders).map(headerLine).join("\n");
+  const right = normalizeHeaders(processedHeaders).map(headerLine).join("\n");
+  if (left === right) {
+    return { lines: [], isEmpty: true };
+  }
+  const changes = diffLines(left, right);
+  return { lines: changesToLines(changes), isEmpty: false };
 }
-function parseJsonText(text) {
+function tryParseJson(text) {
   try {
     const parsed = JSON.parse(text);
-    return { kind: "json", data: safeJsonValue(parsed) };
+    if (parsed === null) return parsed;
+    if (typeof parsed === "string" || typeof parsed === "object") return parsed;
+    return null;
   } catch {
-    return { kind: "text" };
+    return null;
   }
 }
-function useJsonBulkExpansion(text) {
-  const parsed = reactExports.useMemo(() => text === null ? null : parseJsonText(text), [text]);
-  const parsedData = parsed?.kind === "json" ? parsed.data : null;
-  const policy = reactExports.useMemo(
-    () => parsedData === null ? null : getJsonExpansionPolicy(parsedData),
-    [parsedData]
-  );
-  const [isExpanded, setIsExpanded] = reactExports.useState(false);
-  const [bulkDepth, setBulkDepth] = reactExports.useState(0);
-  const [bulkRevision, setBulkRevision] = reactExports.useState(0);
-  const [isPending, startTransition] = reactExports.useTransition();
-  const toggle = reactExports.useCallback(() => {
-    const nextExpanded = !isExpanded;
-    const targetDepth = nextExpanded && policy !== null ? policy.depth : 0;
-    startTransition(() => {
-      setIsExpanded(nextExpanded);
-      setBulkDepth(targetDepth);
-      setBulkRevision((current) => current + 1);
-    });
-  }, [isExpanded, policy]);
-  return { parsedData, policy, isExpanded, toggle, isPending, bulkDepth, bulkRevision };
-}
-function safeJsonValue(value) {
-  if (value === null || value === void 0) return null;
-  switch (typeof value) {
-    case "string":
-      return value;
-    case "number":
-      return value;
-    case "boolean":
-      return value;
-    case "object": {
-      if (Array.isArray(value)) {
-        return value.map((item) => safeJsonValue(item));
-      }
-      const result = {};
-      for (const key of Object.keys(value)) {
-        const descriptor = Object.getOwnPropertyDescriptor(value, key);
-        result[key] = safeJsonValue(descriptor?.value);
-      }
-      return result;
-    }
-    case "bigint":
-    case "symbol":
-    case "function":
-    case "undefined":
-      return String(value);
+function computeRequestDiff(rawBody, processedBody) {
+  const left = rawBody ?? "";
+  const right = processedBody ?? "";
+  if (left === right) {
+    return { lines: [], isEmpty: true };
   }
-  return null;
-}
-function Tabs({
-  className,
-  orientation = "horizontal",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Root2$1,
-    {
-      "data-slot": "tabs",
-      "data-orientation": orientation,
-      orientation,
-      className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className),
-      ...props
-    }
-  );
-}
-const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent"
+  const leftJson = tryParseJson(left);
+  const rightJson = tryParseJson(right);
+  if (leftJson !== null && rightJson !== null) {
+    const changes2 = diffJson(leftJson, rightJson) ?? [];
+    if (changes2.length === 1) {
+      const first = changes2[0];
+      if (first !== void 0 && !first.added && !first.removed) {
+        return { lines: [], isEmpty: true };
       }
-    },
-    defaultVariants: {
-      variant: "default"
     }
+    return { lines: changesToLines(changes2), isEmpty: false };
   }
-);
-function TabsList({
-  className,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    List,
-    {
-      "data-slot": "tabs-list",
-      "data-variant": variant,
-      className: cn(tabsListVariants({ variant }), className),
-      ...props
-    }
-  );
+  const changes = diffLines(left, right);
+  return { lines: changesToLines(changes), isEmpty: false };
 }
-function TabsTrigger({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Trigger$2,
-    {
-      "data-slot": "tabs-trigger",
-      className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
-        className
-      ),
-      ...props
-    }
-  );
+const ESTIMATED_LINE_HEIGHT = 22;
+const MAX_RENDERED_LINES = 1e4;
+function kindPrefix(kind) {
+  if (kind === "added") return "+";
+  if (kind === "removed") return "-";
+  return " ";
 }
-function TabsContent({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Content$1,
-    {
-      "data-slot": "tabs-content",
-      className: cn("flex-1 outline-none", className),
-      ...props
-    }
-  );
-}
-function useCopyFeedback(text) {
-  const [copied, setCopied] = reactExports.useState(false);
-  const timerRef = reactExports.useRef(null);
-  reactExports.useEffect(
-    () => () => {
-      if (timerRef.current !== null) clearTimeout(timerRef.current);
-    },
-    []
-  );
-  const copy = reactExports.useCallback(
-    (event) => {
-      event.stopPropagation();
-      if (text === null) return;
-      void copyTextToClipboard(text).then((success) => {
-        if (!success) return;
-        setCopied(true);
-        if (timerRef.current !== null) clearTimeout(timerRef.current);
-        timerRef.current = setTimeout(() => setCopied(false), 2e3);
-      });
-    },
-    [text]
-  );
-  return { copied, copy };
-}
-const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-CO-Ti5sg.mjs").then((m) => ({ default: m.CompareDrawer }))
-);
-const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-J1VxC0In.mjs").then((m) => ({ default: m.ReplayDialog }))
-);
-const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-DBH-F3rq.mjs").then((m) => ({ default: m.RequestAnatomy }))
-);
-const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-DLFwV7Hd.mjs").then((m) => ({ default: m.ResponseView }))
-);
-const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-BywmuND0.mjs").then((m) => ({
-    default: m.StreamingChunkSequence
-  }))
-);
-const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-DlQu0N1x.mjs").then((m) => ({ default: m.JsonViewer }))
-);
-const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-DlQu0N1x.mjs").then((m) => ({ default: m.JsonViewerFromString }))
-);
-const HIGHLIGHT_DURATION_MS = 1200;
-const MAX_HIGHLIGHT_ATTEMPTS = 12;
-function useAnatomyJump(options) {
-  const { containerRef, setExpandToPath, ensureTabActive, highlightMs } = options;
-  const highlightTimer = reactExports.useRef(null);
-  return reactExports.useCallback(
-    (segment2) => {
-      ensureTabActive?.();
-      setExpandToPath(segment2.path);
-      const applyHighlight = (target) => {
-        target.scrollIntoView({ behavior: "smooth", block: "center" });
-        target.classList.add(
-          "ring-2",
-          "ring-primary/60",
-          "ring-offset-1",
-          "ring-offset-background",
-          "rounded-sm",
-          "transition-shadow"
-        );
-        if (highlightTimer.current !== null) clearTimeout(highlightTimer.current);
-        highlightTimer.current = setTimeout(() => {
-          target.classList.remove(
-            "ring-2",
-            "ring-primary/60",
-            "ring-offset-1",
-            "ring-offset-background",
-            "rounded-sm",
-            "transition-shadow"
-          );
-          setExpandToPath(null);
-        }, highlightMs ?? HIGHLIGHT_DURATION_MS);
-      };
-      const escape = (value) => {
-        if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
-          return CSS.escape(value);
-        }
-        return value.replace(/(["'\\[\](){}])/g, "\\$1");
-      };
-      const selector = `[data-anatomy-path="${escape(segment2.path)}"]`;
-      const tryFindTarget = (attemptsLeft) => {
-        const container = containerRef.current;
-        if (container !== null) {
-          const target = container.querySelector(selector);
-          if (target !== null) {
-            applyHighlight(target);
-            return;
-          }
-        }
-        if (attemptsLeft > 0) {
-          window.requestAnimationFrame(() => tryFindTarget(attemptsLeft - 1));
-        } else {
-          setExpandToPath(null);
-        }
-      };
-      window.requestAnimationFrame(() => tryFindTarget(MAX_HIGHLIGHT_ATTEMPTS));
-    },
-    [containerRef, ensureTabActive, highlightMs, setExpandToPath]
-  );
-}
-function normalizeHeaders(headers) {
-  if (headers === void 0) return [];
-  return Object.entries(headers).map((entry) => [entry[0].toLowerCase(), entry[1]]).sort(([a], [b]) => a.localeCompare(b));
-}
-function headerLine([key, value]) {
-  return `${key}: ${value}`;
-}
-function changesToLines(changes) {
-  const lines = [];
-  let oldNum = 0;
-  let newNum = 0;
-  for (const change of changes) {
-    const parts = change.value.split("\n");
-    if (parts.length > 0 && parts[parts.length - 1] === "") parts.pop();
-    for (const text of parts) {
-      if (change.added) {
-        newNum += 1;
-        lines.push({ kind: "added", text, oldLineNumber: null, newLineNumber: newNum });
-      } else if (change.removed) {
-        oldNum += 1;
-        lines.push({ kind: "removed", text, oldLineNumber: oldNum, newLineNumber: null });
-      } else {
-        oldNum += 1;
-        newNum += 1;
-        lines.push({
-          kind: "context",
-          text,
-          oldLineNumber: oldNum,
-          newLineNumber: newNum
-        });
-      }
-    }
-  }
-  return lines;
-}
-function computeHeadersDiff(rawHeaders, processedHeaders) {
-  const left = normalizeHeaders(rawHeaders).map(headerLine).join("\n");
-  const right = normalizeHeaders(processedHeaders).map(headerLine).join("\n");
-  if (left === right) {
-    return { lines: [], isEmpty: true };
-  }
-  const changes = diffLines(left, right);
-  return { lines: changesToLines(changes), isEmpty: false };
-}
-function tryParseJson(text) {
-  try {
-    const parsed = JSON.parse(text);
-    if (parsed === null) return parsed;
-    if (typeof parsed === "string" || typeof parsed === "object") return parsed;
-    return null;
-  } catch {
-    return null;
-  }
-}
-function computeRequestDiff(rawBody, processedBody) {
-  const left = rawBody ?? "";
-  const right = processedBody ?? "";
-  if (left === right) {
-    return { lines: [], isEmpty: true };
-  }
-  const leftJson = tryParseJson(left);
-  const rightJson = tryParseJson(right);
-  if (leftJson !== null && rightJson !== null) {
-    const changes2 = diffJson(leftJson, rightJson) ?? [];
-    if (changes2.length === 1) {
-      const first = changes2[0];
-      if (first !== void 0 && !first.added && !first.removed) {
-        return { lines: [], isEmpty: true };
-      }
-    }
-    return { lines: changesToLines(changes2), isEmpty: false };
-  }
-  const changes = diffLines(left, right);
-  return { lines: changesToLines(changes), isEmpty: false };
-}
-const ESTIMATED_LINE_HEIGHT = 22;
-const MAX_RENDERED_LINES = 1e4;
-function kindPrefix(kind) {
-  if (kind === "added") return "+";
-  if (kind === "removed") return "-";
-  return " ";
-}
-function kindClass(kind) {
-  if (kind === "added") {
-    return "bg-green-500/10 text-green-700 dark:text-green-300";
-  }
-  if (kind === "removed") {
-    return "bg-red-500/10 text-red-700 dark:text-red-300";
-  }
-  return "text-foreground/80";
+function kindClass(kind) {
+  if (kind === "added") {
+    return "bg-green-500/10 text-green-700 dark:text-green-300";
+  }
+  if (kind === "removed") {
+    return "bg-red-500/10 text-red-700 dark:text-red-300";
+  }
+  return "text-foreground/80";
 }
 const DiffViewInner = function DiffView2({ result, emptyLabel }) {
   const [mode, setMode] = reactExports.useState("unified");
@@ -2814,6 +2525,8 @@ const LogEntryHeader = reactExports.memo(function({
   const hasClientCwd = log.clientCwd !== null && log.clientCwd !== void 0 && log.clientCwd !== "";
   const statusCue = STATUS_CUE_CLASSES[statusCategory];
   const statusLabel2 = statusCueLabel(statusCategory, log.responseStatus);
+  const showStatusBadge = statusCategory !== "success" || log.responseStatus !== 200;
+  const showStandaloneStreamingIndicator = log.streaming && firstChunkLabel === null && tokenRateLabel === null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -2823,7 +2536,7 @@ const LogEntryHeader = reactExports.memo(function({
       "data-nav-id": `log-${log.id}`,
       "data-nav-action": expanded ? "collapse" : "expand",
       className: cn(
-        "group/header relative isolate flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 overflow-hidden px-3 py-2 cursor-pointer transition-[background-color,border-color,box-shadow]",
+        "group/header relative isolate flex min-w-0 cursor-pointer items-start gap-2 overflow-hidden px-3 py-2 transition-[background-color,border-color,box-shadow]",
         expanded ? "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.10)]" : "bg-transparent hover:bg-white/[0.035]",
         "select-none before:pointer-events-none before:absolute before:inset-x-3 before:top-0 before:h-px before:bg-white/12",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
@@ -2836,277 +2549,286 @@ const LogEntryHeader = reactExports.memo(function({
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "span",
-          {
-            className: cn(
-              "border border-border bg-muted/40 inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2 font-mono",
-              statusCue.frame
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("size-1.5 rounded-full", statusCue.dot), "aria-hidden": "true" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs font-semibold tabular-nums", title: `Log ID ${String(log.id)}`, children: [
-                "#",
-                displayNumber
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "border border-border bg-muted/40 flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", title: log.timestamp, children: formatTimestamp$2(log.timestamp, timeDisplayFormat) })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Badge,
-          {
-            variant: "outline",
-            className: cn(
-              "h-6 gap-1 rounded-md px-2 py-0 font-mono text-[10px] font-semibold uppercase tabular-nums shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
-              STATUS_BADGE_CLASSES[statusCategory]
-            ),
-            children: [
-              statusCategory === "success" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3", "aria-label": "Success" }) : statusCategory === "server_error" ? /* @__PURE__ */ jsxRuntimeExports.jsx(OctagonAlert, { className: "size-3", "aria-label": "Server error" }) : statusCategory === "client_error" ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Client error" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3 animate-spin", "aria-label": "Pending" }),
-              statusLabel2
-            ]
-          }
-        ),
-        warningCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            Badge,
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "span",
             {
-              variant: "outline",
-              className: "h-6 gap-1 rounded-md border-amber-300/30 bg-amber-300/[0.10] px-2 py-0 font-mono text-[10px] tabular-nums text-amber-100",
+              className: cn(
+                "border border-border bg-muted/40 inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2 font-mono",
+                statusCue.frame
+              ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Tool schema warnings" }),
-                warningCount
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("size-1.5 rounded-full", statusCue.dot), "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs font-semibold tabular-nums", title: `Log ID ${String(log.id)}`, children: [
+                  "#",
+                  displayNumber
+                ] })
               ]
             }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: warningCount === 1 ? "1 tool schema warning" : `${warningCount} tool schema warnings` })
-        ] }),
-        log.elapsedMs !== null && (isSlowResponse ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "span",
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "border border-border bg-muted/40 flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", title: log.timestamp, children: formatTimestamp$2(log.timestamp, timeDisplayFormat) })
+          ] }),
+          showStatusBadge && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Badge,
             {
+              variant: "outline",
               className: cn(
-                TELEMETRY_CHIP_CLASS,
-                "shrink-0 border-amber-300/25 text-amber-200"
+                "h-6 gap-1 rounded-md px-2 py-0 font-mono text-[10px] font-semibold uppercase tabular-nums shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+                STATUS_BADGE_CLASSES[statusCategory]
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$3(log.elapsedMs) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Slow response" })
+                statusCategory === "success" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3", "aria-label": "Success" }) : statusCategory === "server_error" ? /* @__PURE__ */ jsxRuntimeExports.jsx(OctagonAlert, { className: "size-3", "aria-label": "Server error" }) : statusCategory === "client_error" ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Client error" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3 animate-spin", "aria-label": "Pending" }),
+                statusLabel2
               ]
             }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipContent, { children: [
-            "Slow response: ",
-            formatElapsed$3(log.elapsedMs),
-            " exceeds",
-            " ",
-            formatElapsed$3(slowResponseThresholdSeconds * 1e3)
-          ] })
-        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground"), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$3(log.elapsedMs) })
-        ] })),
-        log.streaming && firstChunkLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300"), children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { className: "size-3" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
-              "first ",
-              firstChunkLabel
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Time to first streaming chunk" })
-        ] }),
-        log.streaming && tokenRateLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300"), children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Gauge, { className: "size-3" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: tokenRateLabel })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Output token throughput after first chunk" })
-        ] }),
-        hasTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "min-w-0 sm:shrink-0"), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3 text-muted-foreground" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-1 font-mono tabular-nums", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "span",
+          ),
+          warningCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Badge,
               {
-                className: cn(
-                  "whitespace-nowrap",
-                  log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground"
-                ),
+                variant: "outline",
+                className: "h-6 gap-1 rounded-md border-amber-300/30 bg-amber-300/[0.10] px-2 py-0 font-mono text-[10px] tabular-nums text-amber-100",
                 children: [
-                  "IN ",
-                  log.inputTokens !== null ? formatTokens(log.inputTokens) : "n/a"
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Tool schema warnings" }),
+                  warningCount
                 ]
               }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "/" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: warningCount === 1 ? "1 tool schema warning" : `${warningCount} tool schema warnings` })
+          ] }),
+          log.elapsedMs !== null && (isSlowResponse ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "span",
               {
                 className: cn(
-                  "whitespace-nowrap",
-                  log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground"
+                  TELEMETRY_CHIP_CLASS,
+                  "shrink-0 border-amber-300/25 text-amber-200"
                 ),
                 children: [
-                  "OUT ",
-                  log.outputTokens !== null ? formatTokens(log.outputTokens) : "n/a"
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$3(log.elapsedMs) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Slow response" })
                 ]
               }
-            )
-          ] })
-        ] }),
-        log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0"), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.creation ?? null }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-cyan-300", children: [
-            "KV Cache +",
-            formatTokens(log.cacheCreationInputTokens)
-          ] })
-        ] }),
-        log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0"), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.read ?? null }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-purple-400", children: [
-            "KV Cache ~",
-            formatTokens(log.cacheReadInputTokens)
-          ] })
-        ] }),
-        messageCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground"), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: messageCount })
-        ] }),
-        toolCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground"), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: toolCount })
-        ] }),
-        log.origin !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "span",
-          {
-            className: cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-muted-foreground xl:flex"),
-            title: `Origin: ${log.origin}`,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Globe, { className: "size-3" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[120px]", title: log.origin, children: log.origin })
-            ]
-          }
-        ),
-        showClientMetadata && (hasClientPid || hasClientProjectFolder) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-purple-300 xl:flex"), children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(FileTerminal, { className: "size-3" }),
-            hasClientProjectFolder ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: log.clientProjectFolder }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
-              "PID ",
-              log.clientPid
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipContent, { children: [
+              "Slow response: ",
+              formatElapsed$3(log.elapsedMs),
+              " exceeds",
+              " ",
+              formatElapsed$3(slowResponseThresholdSeconds * 1e3)
             ] })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: hasClientCwd ? `PID: ${log.clientPid ?? "?"}  CWD: ${log.clientCwd}` : `Process ID: ${log.clientPid ?? "?"}` })
-        ] }),
-        log.streaming && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { className: "size-3 text-muted-foreground/60 shrink-0" }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Request used SSE streaming" })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 min-w-0" }),
-        expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "span",
-          {
-            className: "flex items-center gap-1.5 shrink-0",
-            onClick: (e) => e.stopPropagation(),
-            onKeyDown: (e) => e.stopPropagation(),
-            children: [
-              tabActions !== void 0 && activeTab !== void 0 && (() => {
-                const action = tabActions[activeTab];
-                if (action === void 0) return null;
-                return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                  action.expansion !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Button,
-                      {
-                        variant: "outline",
-                        size: "icon",
-                        className: HEADER_ACTION_BUTTON_CLASS,
-                        onClick: action.expansion.onToggle,
-                        disabled: action.expansion.isPending,
-                        "aria-pressed": action.expansion.isExpanded,
-                        "aria-label": action.expansion.isExpanded ? "Collapse all JSON" : "Expand all JSON",
-                        children: action.expansion.isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsUp, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsDown, { className: "size-3.5" })
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.expansion.isExpanded ? "Collapse all JSON nodes" : "Expand all JSON nodes" })
-                  ] }),
-                  action.diffWithRaw !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Button,
-                      {
-                        variant: "outline",
-                        size: "icon",
-                        className: cn(
-                          HEADER_ACTION_BUTTON_CLASS,
-                          action.diffWithRaw.active && "border-cyan-300/35 bg-cyan-400/15 text-cyan-100"
-                        ),
-                        onClick: action.diffWithRaw.onToggle,
-                        "aria-pressed": action.diffWithRaw.active,
-                        "aria-label": action.diffWithRaw.active ? "Hide raw diff" : "Diff with raw",
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileDiff, { className: "size-3.5" })
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.diffWithRaw.active ? "Hide diff with raw request" : "Show diff between displayed and raw request body" })
-                  ] }),
-                  action.diffWithPrevious !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Button,
-                      {
-                        variant: "outline",
-                        size: "icon",
-                        className: HEADER_ACTION_BUTTON_CLASS,
-                        onClick: action.diffWithPrevious,
-                        "aria-label": "Diff with previous",
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(History, { className: "size-3.5" })
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Compare this request with the immediately preceding one" })
-                  ] }),
-                  action.copyText !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Button,
-                      {
-                        variant: "outline",
-                        size: "icon",
-                        className: HEADER_ACTION_BUTTON_CLASS,
-                        onClick: action.onCopy,
-                        "aria-label": action.copyCopied ? "Copied" : action.copyLabel,
-                        children: action.copyCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 text-cyan-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.copyCopied ? "Copied to clipboard" : action.copyLabel })
-                  ] })
-                ] });
-              })(),
-              onReplay !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    variant: "outline",
-                    size: "icon",
-                    className: HEADER_ACTION_BUTTON_CLASS,
-                    onClick: onReplay,
-                    "aria-label": "Replay request",
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-3.5" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Re-send this request to the provider" })
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$3(log.elapsedMs) })
+          ] })),
+          log.streaming && firstChunkLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300"), children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { className: "size-3" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
+                "first ",
+                firstChunkLabel
               ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "span",
-          {
-            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200",
-            "aria-hidden": "true",
-            children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" })
-          }
-        )
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Time to first streaming chunk" })
+          ] }),
+          log.streaming && tokenRateLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300"), children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Gauge, { className: "size-3" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: tokenRateLabel })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Output token throughput after first chunk" })
+          ] }),
+          hasTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "min-w-0 sm:shrink-0"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-1 font-mono tabular-nums", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "span",
+                {
+                  className: cn(
+                    "whitespace-nowrap",
+                    log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground"
+                  ),
+                  children: [
+                    "IN ",
+                    log.inputTokens !== null ? formatTokens(log.inputTokens) : "n/a"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "/" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "span",
+                {
+                  className: cn(
+                    "whitespace-nowrap",
+                    log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground"
+                  ),
+                  children: [
+                    "OUT ",
+                    log.outputTokens !== null ? formatTokens(log.outputTokens) : "n/a"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.creation ?? null }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-cyan-300", children: [
+              "KV Cache +",
+              formatTokens(log.cacheCreationInputTokens)
+            ] })
+          ] }),
+          log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.read ?? null }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-purple-400", children: [
+              "KV Cache ~",
+              formatTokens(log.cacheReadInputTokens)
+            ] })
+          ] }),
+          messageCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: messageCount })
+          ] }),
+          toolCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: toolCount })
+          ] }),
+          log.origin !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "span",
+            {
+              className: cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-muted-foreground xl:flex"),
+              title: `Origin: ${log.origin}`,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Globe, { className: "size-3" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[120px]", title: log.origin, children: log.origin })
+              ]
+            }
+          ),
+          showClientMetadata && (hasClientPid || hasClientProjectFolder) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "span",
+              {
+                className: cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-purple-300 xl:flex"),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FileTerminal, { className: "size-3" }),
+                  hasClientProjectFolder ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: log.clientProjectFolder }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
+                    "PID ",
+                    log.clientPid
+                  ] })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: hasClientCwd ? `PID: ${log.clientPid ?? "?"}  CWD: ${log.clientCwd}` : `Process ID: ${log.clientPid ?? "?"}` })
+          ] }),
+          showStandaloneStreamingIndicator && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { className: "size-3 text-muted-foreground/60 shrink-0" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Request used SSE streaming" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex shrink-0 items-start gap-1.5", children: [
+          expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "span",
+            {
+              className: "flex items-center gap-1.5 shrink-0",
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => e.stopPropagation(),
+              children: [
+                tabActions !== void 0 && activeTab !== void 0 && (() => {
+                  const action = tabActions[activeTab];
+                  if (action === void 0) return null;
+                  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                    action.expansion !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Button,
+                        {
+                          variant: "outline",
+                          size: "icon",
+                          className: HEADER_ACTION_BUTTON_CLASS,
+                          onClick: action.expansion.onToggle,
+                          disabled: action.expansion.isPending,
+                          "aria-pressed": action.expansion.isExpanded,
+                          "aria-label": action.expansion.isExpanded ? "Collapse all JSON" : "Expand all JSON",
+                          children: action.expansion.isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsUp, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsDown, { className: "size-3.5" })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.expansion.isExpanded ? "Collapse all JSON nodes" : "Expand all JSON nodes" })
+                    ] }),
+                    action.diffWithRaw !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Button,
+                        {
+                          variant: "outline",
+                          size: "icon",
+                          className: cn(
+                            HEADER_ACTION_BUTTON_CLASS,
+                            action.diffWithRaw.active && "border-cyan-300/35 bg-cyan-400/15 text-cyan-100"
+                          ),
+                          onClick: action.diffWithRaw.onToggle,
+                          "aria-pressed": action.diffWithRaw.active,
+                          "aria-label": action.diffWithRaw.active ? "Hide raw diff" : "Diff with raw",
+                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileDiff, { className: "size-3.5" })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.diffWithRaw.active ? "Hide diff with raw request" : "Show diff between displayed and raw request body" })
+                    ] }),
+                    action.diffWithPrevious !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Button,
+                        {
+                          variant: "outline",
+                          size: "icon",
+                          className: HEADER_ACTION_BUTTON_CLASS,
+                          onClick: action.diffWithPrevious,
+                          "aria-label": "Diff with previous",
+                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(History, { className: "size-3.5" })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Compare this request with the immediately preceding one" })
+                    ] }),
+                    action.copyText !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Button,
+                        {
+                          variant: "outline",
+                          size: "icon",
+                          className: HEADER_ACTION_BUTTON_CLASS,
+                          onClick: action.onCopy,
+                          "aria-label": action.copyCopied ? "Copied" : action.copyLabel,
+                          children: action.copyCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 text-cyan-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.copyCopied ? "Copied to clipboard" : action.copyLabel })
+                    ] })
+                  ] });
+                })(),
+                onReplay !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "icon",
+                      className: HEADER_ACTION_BUTTON_CLASS,
+                      onClick: onReplay,
+                      "aria-label": "Replay request",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-3.5" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Re-send this request to the provider" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "span",
+            {
+              className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200",
+              "aria-hidden": "true",
+              children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" })
+            }
+          )
+        ] })
       ]
     }
   ) });
@@ -3615,12 +3337,6 @@ function shouldUseChunkedBodyLoading(log) {
 function shouldHydrateLogBody(log) {
   return isCompactBody(log) && !shouldUseChunkedBodyLoading(log);
 }
-function formatBytes$1(bytes) {
-  if (bytes < 1024) return `${bytes.toLocaleString()} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MiB`;
-  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GiB`;
-}
 function bodyPreviewErrorMessage(error) {
   if (error instanceof ApiTimeoutError) {
     return "Body preview timed out. The log is still available on disk; try loading again.";
@@ -3628,6 +3344,43 @@ function bodyPreviewErrorMessage(error) {
   if (error instanceof Error) return error.message;
   return "Body preview could not be loaded.";
 }
+function FullBodyHydrationNotice({
+  status,
+  error,
+  footprint,
+  onRetry
+}) {
+  switch (status) {
+    case "idle":
+      return null;
+    case "loading":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "loading", title: "Loading full bodies", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3.5 shrink-0 animate-spin text-cyan-200" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Loading full request and response bodies from the log store." })
+        ] }),
+        footprint !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded border border-cyan-300/15 bg-cyan-300/[0.06] px-2 py-0.5 font-mono text-[11px] text-cyan-100", children: footprint })
+      ] }) });
+    case "failed":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "warning", title: error?.title ?? "Full bodies could not be loaded", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: error?.detail ?? "Compact metadata is still available." }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 gap-1.5 text-xs text-amber-100",
+            onClick: onRetry,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "size-3" }),
+              "Retry"
+            ]
+          }
+        )
+      ] }) });
+  }
+}
 function bodyPreviewTextForView(enabled, state) {
   if (!enabled) return null;
   if (state.text !== "") return state.text;
@@ -3794,7 +3547,9 @@ const LogEntry = reactExports.memo(function({
   const [activeTab, setActiveTab] = reactExports.useState("request");
   const [expandToPath, setExpandToPath] = reactExports.useState(null);
   const [hydratedLog, setHydratedLog] = reactExports.useState(null);
-  const [bodyHydrationState, setBodyHydrationState] = reactExports.useState("idle");
+  const [bodyHydrationStatus, setBodyHydrationStatus] = reactExports.useState("idle");
+  const [bodyHydrationError, setBodyHydrationError] = reactExports.useState(null);
+  const [bodyHydrationRetryNonce, setBodyHydrationRetryNonce] = reactExports.useState(0);
   const [requestPreview, setRequestPreview] = reactExports.useState(
     () => createEmptyBodyPreviewState(log.rawRequestBodyBytes ?? null)
   );
@@ -3806,6 +3561,10 @@ const LogEntry = reactExports.memo(function({
   const bodyHydrationInFlightRef = reactExports.useRef(false);
   const displayLog = hydratedLog ?? log;
   const useChunkedBody = hydratedLog === null && shouldUseChunkedBodyLoading(log);
+  const fullBodyHydrationFootprint = reactExports.useMemo(
+    () => formatBodyHydrationFootprint(log.rawRequestBodyBytes, log.responseTextBytes),
+    [log.rawRequestBodyBytes, log.responseTextBytes]
+  );
   const requestPreviewBody = bodyPreviewTextForView(useChunkedBody, requestPreview);
   const responsePreviewBody = bodyPreviewTextForView(useChunkedBody, responsePreview);
   const rawRequestBodyForView = displayLog.rawRequestBody ?? requestPreviewBody;
@@ -4002,6 +3761,13 @@ const LogEntry = reactExports.memo(function({
     },
     [log.id]
   );
+  const retryFullBodyHydration = reactExports.useCallback(() => {
+    if (bodyHydrationInFlightRef.current) return;
+    setHydratedLog(null);
+    setBodyHydrationStatus("idle");
+    setBodyHydrationError(null);
+    setBodyHydrationRetryNonce((current) => current + 1);
+  }, []);
   const handleToggleExpanded = reactExports.useCallback(() => {
     const nextExpanded = !expanded;
     if (nextExpanded) {
@@ -4013,7 +3779,9 @@ const LogEntry = reactExports.memo(function({
     logIdRef.current = log.id;
     bodyHydrationInFlightRef.current = false;
     setHydratedLog(null);
-    setBodyHydrationState("idle");
+    setBodyHydrationStatus("idle");
+    setBodyHydrationError(null);
+    setBodyHydrationRetryNonce(0);
     setRequestPreview(createEmptyBodyPreviewState(log.rawRequestBodyBytes ?? null));
     setResponsePreview(createEmptyBodyPreviewState(log.responseTextBytes ?? null));
   }, [log.id, log.rawRequestBodyBytes, log.responseTextBytes]);
@@ -4023,7 +3791,8 @@ const LogEntry = reactExports.memo(function({
     if (hydratedLog !== null || bodyHydrationInFlightRef.current) return;
     let cancelled = false;
     bodyHydrationInFlightRef.current = true;
-    setBodyHydrationState("loading");
+    setBodyHydrationStatus("loading");
+    setBodyHydrationError(null);
     void fetchJsonWithTimeout(
       `/api/logs/${String(log.id)}`,
       CapturedLogSchema,
@@ -4032,11 +3801,13 @@ const LogEntry = reactExports.memo(function({
       if (cancelled) return;
       bodyHydrationInFlightRef.current = false;
       setHydratedLog(fullLog);
-      setBodyHydrationState("idle");
-    }).catch(() => {
+      setBodyHydrationStatus("idle");
+      setBodyHydrationError(null);
+    }).catch((error) => {
       if (cancelled) return;
       bodyHydrationInFlightRef.current = false;
-      setBodyHydrationState("failed");
+      setBodyHydrationStatus("failed");
+      setBodyHydrationError(describeFullBodyHydrationError(error));
     });
     return () => {
       cancelled = true;
@@ -4048,7 +3819,8 @@ const LogEntry = reactExports.memo(function({
     log.bodyContentMode,
     log.id,
     log.rawRequestBodyBytes,
-    log.responseTextBytes
+    log.responseTextBytes,
+    bodyHydrationRetryNonce
   ]);
   reactExports.useEffect(() => {
     if (!expanded) return;
@@ -4155,6 +3927,15 @@ const LogEntry = reactExports.memo(function({
                     }
                   ),
                   shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      FullBodyHydrationNotice,
+                      {
+                        status: bodyHydrationStatus,
+                        error: bodyHydrationError,
+                        footprint: fullBodyHydrationFootprint,
+                        onRetry: retryFullBodyHydration
+                      }
+                    ),
                     useChunkedBody && /* @__PURE__ */ jsxRuntimeExports.jsx(
                       BodyPreviewNotice,
                       {
@@ -4174,8 +3955,15 @@ const LogEntry = reactExports.memo(function({
                     ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(RawTextBlock, { children: rawRequestBodyForView })
                   ] }) }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
-                    bodyHydrationState === "loading" && /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "loading", children: "Loading full request and response bodies..." }),
-                    bodyHydrationState === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "warning", children: "Full request and response bodies could not be loaded. Compact metadata is still available." }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      FullBodyHydrationNotice,
+                      {
+                        status: bodyHydrationStatus,
+                        error: bodyHydrationError,
+                        footprint: fullBodyHydrationFootprint,
+                        onRetry: retryFullBodyHydration
+                      }
+                    ),
                     useChunkedBody && /* @__PURE__ */ jsxRuntimeExports.jsx(
                       BodyPreviewNotice,
                       {
@@ -4258,6 +4046,15 @@ const LogEntry = reactExports.memo(function({
                     }
                   ) }) }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: activeTab === "raw" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      FullBodyHydrationNotice,
+                      {
+                        status: bodyHydrationStatus,
+                        error: bodyHydrationError,
+                        footprint: fullBodyHydrationFootprint,
+                        onRetry: retryFullBodyHydration
+                      }
+                    ),
                     useChunkedBody && /* @__PURE__ */ jsxRuntimeExports.jsx(
                       BodyPreviewNotice,
                       {
@@ -4286,6 +4083,15 @@ const LogEntry = reactExports.memo(function({
                     ) })
                   ] }) }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: activeTab === "parsed" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      FullBodyHydrationNotice,
+                      {
+                        status: bodyHydrationStatus,
+                        error: bodyHydrationError,
+                        footprint: fullBodyHydrationFootprint,
+                        onRetry: retryFullBodyHydration
+                      }
+                    ),
                     useChunkedBody && /* @__PURE__ */ jsxRuntimeExports.jsx(
                       BodyPreviewNotice,
                       {
@@ -4341,66 +4147,107 @@ function boundaryTitle(stopReason) {
       return "End of Turn";
   }
 }
+function markerTone({
+  isFusedBoundary,
+  isBoundary,
+  isTurnStart,
+  isRunning
+}) {
+  if (isFusedBoundary) return "fused";
+  if (isBoundary) return "end";
+  if (isTurnStart) return "start";
+  if (isRunning) return "running";
+  return "idle";
+}
+function markerClass(tone, interactive) {
+  const base = "inline-flex size-3.5 items-center justify-center rounded-full border transition-colors";
+  const cursor = interactive ? "cursor-pointer hover:border-cyan-200/70 hover:bg-cyan-300/20" : "";
+  switch (tone) {
+    case "start":
+      return cn(base, cursor, "border-cyan-300/50 bg-cyan-300/12 text-cyan-200");
+    case "end":
+      return cn(base, cursor, "border-amber-300/55 bg-amber-300/12 text-amber-200");
+    case "fused":
+      return cn(
+        base,
+        cursor,
+        "border-slate-200/50 bg-slate-200/10 text-slate-100 ring-2 ring-cyan-300/15"
+      );
+    case "running":
+      return cn(
+        base,
+        cursor,
+        "border-amber-300/45 bg-amber-300/10 text-amber-200 ring-2 ring-amber-300/10"
+      );
+    case "idle":
+      return cn(base, cursor, "border-muted-foreground/25 bg-muted/30 text-muted-foreground/60");
+  }
+}
+function markerInnerClass(tone) {
+  switch (tone) {
+    case "running":
+      return "size-1.5 rounded-full bg-current animate-pulse";
+    case "idle":
+      return "size-1 rounded-full bg-current opacity-55";
+    case "start":
+    case "end":
+    case "fused":
+      return "size-1.5 rounded-full bg-current";
+  }
+}
+function markerTitle(tone, stopReason) {
+  switch (tone) {
+    case "start":
+      return "Start of turn";
+    case "end":
+      return boundaryTitle(stopReason);
+    case "fused":
+      return "Single-request turn";
+    case "running":
+      return "Processing";
+    case "idle":
+      return "Request in turn";
+  }
+}
 function ThreadConnector({
   stopReason,
   isPending,
   isFirst,
   isTurnStart,
   isOnlyEntry = false,
-  crabIndex = 0,
   collapsible = false,
   onToggle
 }) {
   const isBoundary = isTurnBoundary(stopReason);
   const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
   const isRunning = isPending && !isBoundary;
-  const Crab = reactExports.useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
-  const FusedCrab = reactExports.useMemo(() => getInteriorCrabVariant(crabIndex), [crabIndex]);
-  const interactiveProps = collapsible && onToggle ? {
-    role: "button",
-    tabIndex: 0,
-    className: "cursor-pointer",
-    onClick: (e) => {
-      e.stopPropagation();
-      onToggle();
-    },
-    onKeyDown: (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        onToggle();
-      }
-    }
-  } : {};
+  const tone = markerTone({ isFusedBoundary, isBoundary, isTurnStart, isRunning });
+  const interactive = collapsible && onToggle !== void 0;
+  const handleMarkerClick = (event) => {
+    if (!interactive || onToggle === void 0) return;
+    event.stopPropagation();
+    onToggle();
+  };
+  const handleMarkerKeyDown = (event) => {
+    if (!interactive || onToggle === void 0) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onToggle();
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center w-6 shrink-0 pt-0.5 pb-0.5", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center h-[calc(0.75rem-8px)]", children: !isFirst && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-0.5 bg-muted-foreground/30 h-full" }) }),
-    isFusedBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: "Start and end of turn", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      FusedCrab,
-      {
-        className: cn(
-          "size-3.5 text-cyan-300/90",
-          "animate-crab-settle",
-          "drop-shadow-[0_0_4px_rgba(103,232,249,0.35)]"
-        )
-      }
-    ) }) : isBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: boundaryTitle(stopReason), ...interactiveProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Crab,
-      {
-        className: cn(
-          "size-3.5 text-amber-400",
-          "animate-crab-settle",
-          "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]"
-        )
-      }
-    ) }) : isTurnStart ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: "Start of turn", ...interactiveProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Crab,
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "span",
       {
-        className: cn(
-          "size-3.5 text-cyan-300/85",
-          "animate-crab-appear",
-          "drop-shadow-[0_0_4px_rgba(103,232,249,0.32)]"
-        )
+        role: interactive ? "button" : void 0,
+        tabIndex: interactive ? 0 : void 0,
+        title: markerTitle(tone, stopReason),
+        className: markerClass(tone, interactive),
+        onClick: handleMarkerClick,
+        onKeyDown: handleMarkerKeyDown,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: markerInnerClass(tone) })
       }
-    ) }) : isRunning ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: "Processing…", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Crab, { className: cn("size-3.5 text-amber-300/80", "animate-crab-crawl") }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Crab, { className: "size-3.5 text-muted-foreground/40" }) }),
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex justify-center min-h-0", children: !isBoundary && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -4761,8 +4608,6 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
       maxElapsed
     };
   }, [entries, lastIdx]);
-  const StartCrab = reactExports.useMemo(() => getCrabVariant(entries[0]?.log.id ?? 0), [entries]);
-  const EndCrab = reactExports.useMemo(() => getCrabVariant(entries[lastIdx]?.log.id ?? 0), [entries, lastIdx]);
   const bgClass = turnIndex % 2 === 0 ? "bg-white/[0.012]" : "bg-cyan-300/[0.012]";
   const aggregateIsSlow = aggregate.maxElapsed !== null && slowResponseThresholdSeconds > 0 && aggregate.maxElapsed > slowResponseThresholdSeconds * 1e3;
   const toolEventsByLogId = reactExports.useMemo(() => {
@@ -4812,155 +4657,114 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
         isPending ? "border-amber-300/15 shadow-[0_0_0_1px_rgba(252,211,77,0.04)]" : "border-transparent",
         !collapsed && "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
       ),
-      children: collapsed ? (
-        /* ---- Collapsed: dual-crab (+ summary card for multi-log turns) ---- */
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            "data-nav-id": `turn-collapsed-${String(firstLogId)}`,
-            "data-nav-action": "expand",
-            role: "button",
-            tabIndex: 0,
-            className: "flex items-stretch cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none rounded-lg",
-            onClick: toggleCollapse,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                toggleCollapse();
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 shrink-0 flex items-start pt-1.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none", children: turnIndex + 1 }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-6 shrink-0 flex flex-col items-center pt-0.5 pb-0.5", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center h-[calc(0.75rem-8px)]" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "span",
-                  {
-                    role: "button",
-                    tabIndex: 0,
-                    title: "Start of turn - click to expand",
-                    className: "cursor-pointer",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      toggleCollapse();
-                    },
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        toggleCollapse();
-                      }
-                    },
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      StartCrab,
-                      {
-                        className: cn(
-                          "size-3.5 text-cyan-300/85",
-                          "animate-crab-appear drop-shadow-[0_0_4px_rgba(103,232,249,0.32)]"
-                        )
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex justify-center min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-0.5 bg-muted-foreground/30 h-full" }) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "span",
-                  {
-                    role: "button",
-                    tabIndex: 0,
-                    title: "End of Turn - click to expand",
-                    className: "cursor-pointer",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      toggleCollapse();
-                    },
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        toggleCollapse();
-                      }
-                    },
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      EndCrab,
-                      {
-                        className: cn(
-                          "size-3.5 text-amber-400",
-                          "animate-crab-settle drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]"
-                        )
-                      }
-                    )
-                  }
-                )
-              ] }),
-              entries.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "div",
+      children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          "data-nav-id": `turn-collapsed-${String(firstLogId)}`,
+          "data-nav-action": "expand",
+          role: "button",
+          tabIndex: 0,
+          className: "flex items-stretch cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none rounded-lg",
+          onClick: toggleCollapse,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              toggleCollapse();
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 shrink-0 flex items-start pt-1.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none", children: turnIndex + 1 }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-6 shrink-0 flex flex-col items-center pt-1.5 pb-1.5", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center h-[calc(0.75rem-8px)]" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "size-2 rounded-full border border-cyan-300/45 bg-cyan-300/20" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex justify-center min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-px bg-muted-foreground/25 h-full" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
                 {
                   className: cn(
-                    "flex-1 min-w-0 mb-0.5 rounded-lg border border-cyan-300/10 py-1.5 px-3 flex items-center gap-3 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
-                    "border border-border bg-card shadow-sm",
-                    bgClass
+                    "size-2 rounded-full border",
+                    isComplete ? "border-amber-300/45 bg-amber-300/20" : "border-muted-foreground/30 bg-muted/30"
+                  )
+                }
+              )
+            ] }),
+            entries.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex-1 min-w-0 mb-0.5 rounded-[8px] py-1.5 px-3 flex items-center gap-3 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+                  "border border-border bg-card shadow-sm transition-colors hover:border-cyan-200/20",
+                  bgClass
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/70", children: turnLabel }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "span",
+                    {
+                      className: "text-blue-300/85 font-mono font-semibold tabular-nums shrink-0",
+                      title: `Log IDs ${String(entries[0]?.log.id ?? "?")} ~ ${String(
+                        entries[lastIdx]?.log.id ?? "?"
+                      )}`,
+                      children: [
+                        "#",
+                        entries[0]?.sessionLogNumber ?? "?",
+                        " ~ #",
+                        entries[lastIdx]?.sessionLogNumber ?? "?"
+                      ]
+                    }
                   ),
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: ROW_CHEVRON_SLOT_CLASS, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" }) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground shrink-0", children: [
+                    entries.length,
+                    " request",
+                    entries.length > 1 ? "s" : ""
+                  ] }),
+                  aggregate.maxElapsed !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                       "span",
                       {
-                        className: "text-blue-400/80 font-mono font-semibold tabular-nums shrink-0",
-                        title: `Log IDs ${String(entries[0]?.log.id ?? "?")} ~ ${String(
-                          entries[lastIdx]?.log.id ?? "?"
-                        )}`,
+                        className: cn(
+                          "flex items-center gap-1 shrink-0",
+                          aggregateIsSlow ? "text-amber-400" : "text-muted-foreground"
+                        ),
                         children: [
-                          "#",
-                          entries[0]?.sessionLogNumber ?? "?",
-                          " ~ #",
-                          entries[lastIdx]?.sessionLogNumber ?? "?"
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$2(aggregate.maxElapsed) }),
+                          aggregateIsSlow && /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Slow response" })
                         ]
                       }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground shrink-0", children: [
-                      entries.length,
-                      " request",
-                      entries.length > 1 ? "s" : ""
-                    ] }),
-                    aggregate.maxElapsed !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                        "span",
-                        {
-                          className: cn(
-                            "flex items-center gap-1 shrink-0",
-                            aggregateIsSlow ? "text-amber-400" : "text-muted-foreground"
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-                            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$2(aggregate.maxElapsed) }),
-                            aggregateIsSlow && /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Slow response" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: aggregateIsSlow ? `Slow response: ${formatElapsed$2(
-                        aggregate.maxElapsed
-                      )} exceeds ${formatElapsed$2(slowResponseThresholdSeconds * 1e3)}` : "Slowest request in this turn" })
-                    ] }) }),
-                    aggregate.hasTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 shrink-0", children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3 text-muted-foreground" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-400", children: [
-                          "IN ",
-                          formatTokens(aggregate.totalInput)
-                        ] }),
-                        " / ",
-                        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-amber-400", children: [
-                          "OUT ",
-                          formatTokens(aggregate.totalOutput)
-                        ] })
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: aggregateIsSlow ? `Slow response: ${formatElapsed$2(
+                      aggregate.maxElapsed
+                    )} exceeds ${formatElapsed$2(slowResponseThresholdSeconds * 1e3)}` : "Slowest request in this turn" })
+                  ] }) }),
+                  aggregate.hasTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 shrink-0", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3 text-muted-foreground" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-400", children: [
+                        "IN ",
+                        formatTokens(aggregate.totalInput)
+                      ] }),
+                      " / ",
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-amber-400", children: [
+                        "OUT ",
+                        formatTokens(aggregate.totalOutput)
                       ] })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 min-w-0" })
-                  ]
-                }
-              )
-            ]
-          }
-        )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 min-w-0" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "span",
+                    {
+                      className: "border border-input bg-background inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" })
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
       ) : (
         /* ---- Expanded: full entries ---- */
         entries.map((entry, visibleIdx) => {
@@ -4976,7 +4780,6 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                 isFirst: visibleIdx === 0,
                 isTurnStart,
                 isOnlyEntry: isSingleLog,
-                crabIndex: log.id % 12,
                 collapsible: collapsible && isTurnStart,
                 onToggle: toggleCollapse
               }
@@ -5993,30 +5796,370 @@ function CrabLogo({ className }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      className: cn("inline-block size-5", className),
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z" }),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className: cn("inline-block size-5", className),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6.5", y1: "16", x2: "4.5", y2: "19.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9", y1: "17.5", x2: "8", y2: "20.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "15", y1: "17.5", x2: "16", y2: "20.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17.5", y1: "16", x2: "19.5", y2: "19.5" })
+      ]
+    }
+  );
+}
+function SvgShell({
+  className,
+  style,
+  d,
+  eyeStalks,
+  eyes,
+  legs,
+  extras
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style,
+      className: cn("inline-block size-5", className),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d }),
+        eyeStalks,
+        eyes,
+        legs,
+        extras
+      ]
+    }
+  );
+}
+const StdLegs = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6.5", y1: "16", x2: "4.5", y2: "19.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9", y1: "17.5", x2: "8", y2: "20.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "15", y1: "17.5", x2: "16", y2: "20.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17.5", y1: "16", x2: "19.5", y2: "19.5" })
+] });
+const ShortLegs = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "7", y1: "16", x2: "5.5", y2: "18.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9.5", y1: "17", x2: "8.5", y2: "19.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14.5", y1: "17", x2: "15.5", y2: "19.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17", y1: "16", x2: "18.5", y2: "18.5" })
+] });
+function Crab1({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      className,
+      d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z",
+      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" })
+      ] })
+    }
+  );
+}
+function Crab2({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      className,
+      d: "M4 13 C4 7 7.5 5.5 12 5.5 C16.5 5.5 20 7 20 13 C20 17.5 16.5 19 12 19 C7.5 19 4 17.5 4 13 Z",
+      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9.5", y1: "6.5", x2: "9.5", y2: "4.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14.5", y1: "6.5", x2: "14.5", y2: "4.5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4", r: "1.1", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4", r: "1.1", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: ShortLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C4 9.5 2.5 10 3 12 C3.5 13.5 4.5 13 5 12" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20 9.5 21.5 10 21 12 C20.5 13.5 19.5 13 19 12" })
+      ] })
+    }
+  );
+}
+function Crab3({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      className,
+      d: "M3 13.5 C3 8 7 6 12 6 C17 6 21 8 21 13.5 C21 17 17 19 12 19 C7 19 3 17 3 13.5 Z",
+      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "7", y1: "7", x2: "6.5", y2: "4.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17", y1: "7", x2: "17.5", y2: "4.5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "6.5", cy: "4", r: "0.8", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "17.5", cy: "4", r: "0.8", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 12 C2.5 10.5 1 11 1.5 13 C2 14.5 3.5 14 4.5 13" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20 12 C21.5 10.5 23 11 22.5 13 C22 14.5 20.5 14 19.5 13" })
+      ] })
+    }
+  );
+}
+function Crab4({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      className,
+      d: "M6 14 C6 8 9 5.5 12 5.5 C15 5.5 18 8 18 14 C18 18 15 20 12 20 C9 20 6 18 6 14 Z",
+      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "6.5", x2: "10", y2: "3.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "6.5", x2: "14", y2: "3.5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "10", cy: "3", r: "0.7", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14", cy: "3", r: "0.7", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "7", y1: "17", x2: "5", y2: "20.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9.5", y1: "18.5", x2: "8.5", y2: "21.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14.5", y1: "18.5", x2: "15.5", y2: "21.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17", y1: "17", x2: "19", y2: "20.5" })
+      ] }),
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6.5 11 C5 8.5 3 9 3.5 11.5 C4 13.5 5 13 6 12" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17.5 11 C19 8.5 21 9 20.5 11.5 C20 13.5 19 13 18 12" })
+      ] })
+    }
+  );
+}
+function Crab5({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      className,
+      d: "M5 13 C5 9 8 7 12 7 L13 4 L14 7 C16 7 19 9 19 13 C19 16 16 18 13 18 L12 21 L11 18 C8 18 5 16 5 13 Z",
+      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.8", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.8", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" })
+      ] })
+    }
+  );
+}
+function Crab6({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      className,
+      d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z",
+      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "13.5", y1: "4", x2: "15.5", y2: "5" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" })
+      ] })
+    }
+  );
+}
+function Crab7({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      className,
+      d: "M5.5 13.5 C5.5 10 8.5 8 12 8 C15.5 8 18.5 10 18.5 13.5 C18.5 16 15.5 17.5 12 17.5 C8.5 17.5 5.5 16 5.5 13.5 Z",
+      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "8", x2: "10", y2: "6" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "8", x2: "14", y2: "6" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9", y1: "6", x2: "11", y2: "6.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "13", y1: "6", x2: "15", y2: "6.5" })
+      ] }),
+      legs: ShortLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6 11.5 C4.5 10.5 3 11 3.5 12.5 C4 13.5 5 13 5.5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18 11.5 C19.5 10.5 21 11 20.5 12.5 C20 13.5 19 13 18.5 12.5" })
+      ] })
+    }
+  );
+}
+function Crab8({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      className,
+      d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z",
+      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.7", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.7", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "8.5", y1: "4", x2: "10.5", y2: "4.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "15.5", y1: "4", x2: "13.5", y2: "4.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 15.5 C10 14.5 14 14.5 15 15.5" })
+      ] })
+    }
+  );
+}
+function Crab9({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      className,
+      d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z",
+      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "1.2", fill: "none", stroke: "currentColor" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "1.2", fill: "none", stroke: "currentColor" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("ellipse", { cx: "12", cy: "15", rx: "2", ry: "1.5", fill: "currentColor", stroke: "none" })
+      ] })
+    }
+  );
+}
+function Crab10({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      className,
+      d: "M4.5 13 C4.5 8 7.5 6 12 6 C16.5 6 19.5 8 19.5 13 C19.5 17 16.5 18.5 12 18.5 C7.5 18.5 4.5 17 4.5 13 Z",
+      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9.5", y1: "7", x2: "9", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14.5", y1: "7", x2: "15", y2: "5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9", cy: "4.5", r: "1", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "15", cy: "4.5", r: "1", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9 2 9.5 2.5 12 C3 14 4 13 5 12" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9 22 9.5 21.5 12 C21 14 20 13 19 12" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 14.5 C10 16 14 16 15 14.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "7", cy: "13", r: "1", fill: "currentColor", stroke: "none", opacity: "0.3" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "17", cy: "13", r: "1", fill: "currentColor", stroke: "none", opacity: "0.3" })
+      ] })
+    }
+  );
+}
+function Crab11({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      className,
+      d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z",
+      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5.5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "7.5", y1: "5.5", x2: "16.5", y2: "5.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "7", y: "5", width: "4", height: "2", rx: "0.5", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "13", y: "5", width: "4", height: "2", rx: "0.5", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6.5", y1: "16", x2: "4.5", y2: "19.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9", y1: "17.5", x2: "8", y2: "20.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "15", y1: "17.5", x2: "16", y2: "20.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17.5", y1: "16", x2: "19.5", y2: "19.5" })
-      ]
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.5 15 C10.5 16 13.5 16 14.5 15" })
+      ] })
+    }
+  );
+}
+function Crab12({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      className,
+      d: "M7 13.5 C7 10.5 9.5 9 12 9 C14.5 9 17 10.5 17 13.5 C17 16 14.5 17.5 12 17.5 C9.5 17.5 7 16 7 13.5 Z",
+      eyeStalks: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10.5", y1: "9.5", x2: "10.5", y2: "8" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "13.5", y1: "9.5", x2: "13.5", y2: "8" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "10.5", cy: "7.5", r: "0.8", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "13.5", cy: "7.5", r: "0.8", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "8", y1: "16", x2: "6.5", y2: "18" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "17", x2: "9.5", y2: "19" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "17", x2: "14.5", y2: "19" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "16", y1: "16", x2: "17.5", y2: "18" })
+      ] }),
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M7.5 12 C6.5 11 5.5 11.5 6 13 C6.5 14 7 13.5 7.5 13" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M16.5 12 C17.5 11 18.5 11.5 18 13 C17.5 14 17 13.5 16.5 13" })
+      ] })
     }
   );
 }
+const crabVariants = [
+  Crab1,
+  Crab2,
+  Crab3,
+  Crab4,
+  Crab5,
+  Crab6,
+  Crab7,
+  Crab8,
+  Crab9,
+  Crab10,
+  Crab11,
+  Crab12
+];
 const McpLogoPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAQAAAAi5ZK2AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfpCxsJDCnsge2KAAAM2ElEQVR42u2de3AW1RnGnyQQDARDwiUFpHIVMHIpYgFRB2nLxQrC0FIDiCKDWNqBUqBlai8wvciIpaRTWh3QDqCDIIjKDL0IaBC5SKlysWJArgqh3BMICYFs/wgpGUi+8579dr89e/Z5zp/59j2755fn3d2z5wJQFEVRFEVRoVQSm+AG1UFrtEdT1EcjNEA5SlCMIhxDAQoJ3S4lIwf9cD+6ozXq1vKbYuzHNmxEPo6xwcKtungIS3EajkYpwLPoyqYLp3KwACe1cFcvezATmWzEMOk+rMBV18CrSjHy0IqNGQb1wMa4cV8vZfgzGrNRTVYm8nDFQ+SV5QymIIWNa6ZGaz6y6ZR/I4cNbJrSkOcb8MpyCVPYzCapKz71GXllWY5b2dhm6EGcTwhyBw52oyUbPHgNx6WEIXfg4CDuYKMHq0kevI/rlhP4Ghs+OE1ERcKRO3BwEh3Z+NFC7sDBATQngMRrcoDIHTj4iE/yUXJ5VVlhYsMkWezy+a6urgRbsAP7cRincQGpqI+maI+O6IMuSHYRbwIW0X/mJvZTeAH9ah1CATTCaKxBmWbUi7iTOMxEXoCncIsodgvM1ezo2cFPMebdy89qfyHL0vxSN5FQzHL5ajRxVU8v7NO4cWQRjCnIy/DDOOq6FcvENS0gGjMS+wUMjvvdZ5awrsv4KvEE7/Iz+Lontc4Q1vc8AQXt8rO4x7Oa54hqLOLI2aBdfrenHVyviWqdQUx2uLxS6fhMUO8ugrLD5VXqLfpmfxdh2eHyKi0S1P5b4rLF5ZVqiiJl/Z8SmD0ur9TzgnNoQWi2uLxSt+Gy8ixGEpvZLs9AN3RGqsYRa5Xn8SeCM9XlDfFT7Ll2bDnWYYRwOMZjyjP5kOjMdPkDOHpTjPX4iuDILOWL2znCMxH5IyitMc4+ZAuO3q08nyYEaFpiHxbjYWyDIMm/qDyje4kwPMgdOBihjDBNeU7fJcQwIXewTnBzUJ3Vk8Rozr18mOAtuxT1FFH6KmNMJkhTkH+7lse3G0s7RZyuygjPEGVYEntV6aSIlKOM8CvCDEtirywVyFDE6q2M8WPiDJPLJcMgBiljPEWg4XG5AwfTlfEmKWPkEml4XO7gCBooI85TRvlm8I1ax3CX68w8PYeB2KGFfEWM6Yo3qgy5uKj8VU/lLz5HG2QjHRlIA1CCIhTjBI6ggg43LbGXYYggZj3lgkYVtbwaluITvIlf4gHhNEomdheJXfpeXoX8EVHUAR4sY1CKfEyN5gibMCIHXvJsBYur2IDxSCNy05HXx1mPFy/5L2ZFZb6rGR2uusiByb6sWlOMZ5FOl5vocqAuDvm2XNExjLV5t52wuhyY7vM6Ve+jA11uksuB5glYcLgIY+hyc1yeJBj87E35q6BXkC5PAHJgdgKXI9xlzzt8eF0OjE/wypQH7Li7h9nl4wJYjPQ4utPlwSF/LKD1Z8+gC10eLeQOHHyJ1nR54pGPCniVadmcGyK3xOVVZYvWnNpqb5hBIv+L1hCJAdiuhXyVcpT6dV3GSLylhXyxy7YrxHYU4CBO4yKABmiCNuiIe9DMVbT5mMp7eWJc/rgLl1dgC6bE2NelM6Zim4uoDzOxm5nYS/GicNOuznhJc0X5k2HprIkS8gos1cTSSrgYodFbhkQ5sR/F/a7aqD8Oa9TSny43x+UblDNialcmVovr2WP2qOYoIV8V57tREuaK6/o+E7sJid2bO+00Ya0HTPV6lFy+3LNWmymsMZfIg+1w9fZ5ep6ozp3mjaKjy90rGetF9d5H5Ha4vFLZOB62zYGIPH6NEk2NqEvk4U/s1V/f8gX1DyJye5ADQC/BGfyRyO1I7Nf1rvIcPiZye1xeqaGCua6ZNiMf7sOSAolD3h+v4otrH2RewYPCo1JxWnkmQ4jcROTZNcyGWSMcN7PQ5KUJw4zc33t5G+xHzfu3S7655wqmPRG5ccgPxxjkqN7DvbnyfDYRuVmJvY1iYMQEQYxCxRkVEnlYXF5ZdguibFLEKI/6S9pQg1x+Ow4IYrZSxlmqjJFGl4fF5dLVJBcoYzQl8jDcy3XestV7tbcl8vC43IGD3spo6gEVtxF5mJCXCu7H6u6ZRlFE/nAoE7sDB8sEEd9URqkTfuT2P7FXlSuiZQb2KKKU0OXhcbmDGYKYdZWrTO8l8nDcyx04mCeKqh5IsYaJPRyJ3cEfhHFnePTPQ+ShQQ68r4z1NJEHkdj9Q95KcN7didwmlwOzBC2dTOT2uByoj5PBPcbR5UEgly0tPo3I7XE5kI1zgoVOWhO5PS4HXhHE/IDI7XE5MFIU9QdEbo/LO6NIEPWS98Mn/F04pD+R16oWOCiK+4LXyMf4irwnin1ErrtWzGtGIW+MXcJvdB4v/H87LvqIvL1yWG90XZ6J7UHNpVvoI/KGKPDxS5q/Lm/ry5e06i7/SBi5HHd5izxVI/nqIpcM6aXL1WW+1z7v6SPyJ0I7RMJvl+sgP+H9uLihviFvp5FDmNhrL096/34+2Jf3cgBYw8TuAfI3/OiHu8MXl+tsMM97ee3lKBr7AT1JuVuwG+Sp2EvkcSMvR1+/PqbO9Bw5MIn38rgTu69rP6fFeJd2hzwFn/OJPU6XO5gNX5VTy6iNk66QA4+KLqoCY5nYay0L4bs6YedN1e5EJ5fRdogu60dM7DE+/SZk+lIqxmMzrl5br2wzxrvbCA5Ad9FlraTLay2vJ3YV2DS0Rds4VzuYI7isQ1q9TNG6l79uzsK/8ldAyffhYRoRwz0qJgLIgT6CC/uHMcjpck/0c8Gl9aHLbUIO/FN5aflEbhfyOoJBfrlEbhNyydf5C0jnvdwm5MAY5eWtInK7kAOzlRc4mYndLuTAq8pL7KGMMTzUXTGGdrj6qc2KS7yq7O27E1fYxx4ufaK4yCOK41M0ofg7dYHIRVIh2xr3gyBdbpxUW8+8ozh+PV0ePqkmSK1RJPdLhrj890Qu1ynFxa6PeXRTQ76X871cS6rPqh/GPDrLiJc0ulxTqgVtj8U8OglneS8Pn9RrHjaMefwbvJeHT4vj/JY+iMjDJ/UQip8oIqyNcewyJnYT9T3lpf9NEaEJPqvlyEV0uZnqKpjVkqWIkV3DTuKlmusfE3kClYwzygaYIIiSi03XxuA7OIF5aE7kJuttZRPsQpIoUga64W601l75mF0xCZdkYdvBPtZP5AGom6Ahtvu2brnfiZ3IXfbKye7rdHmo9AtBc5zyYftIujxAtRONcduIFLrcJm3wpdmDdfm/iDy2BgqbZnpoXE7kSiUJOy8qMNWD2nJwlC43QY+Km+i5OF/fHhD0ARJ5grpjt4qbaT1auM4oU1DGxG6Oev2/71xdCpEr7Jqtro5YpwWELk+AXtZqsHz01ojdDHM1PU7kCVEznNDEko8RuEXQ0bsAJZqRiTxhGqQ5FdGBg3NYgsfRpoZoDTEIv8N/tCNGDnlSwPU/hxkujyzCPhzBOZQiBY3QFB3i6Lidp7lhZSbe0VorcyVGoZwer1JdbHHlTC8LE3vC1US8CLg/xf+XtDqEfLPa4BiRR0/dBXsGhzOxE3kMdcGXCUc+h8iDT/IFCQR+BROJ3ARlaw5DcF8uYAiRm6J6yHPRXaNb9mhvUknkPmuocuGC+MoS1Cdy89QSK3wCvg8PaZ8NkSdM/YT7hsvLRcwSfKwh8kBVB08LN/JSlxIscNUzT+QBKBlDsC1O4OeR53LkDZEHqN7Ic9VRW4a3kav92EbkxigF38BcbEO5CMBhLME45Tz3yCJPChn8dPRBF7RHB3RARrVtvC6hGIewHwUowBYcirMW/e/lubhCZybunyALmR7/6zKxR05ETuRETuRETuRsNCKniJwicorIKSKniJwicorIKSKniJyqGfnHmvsyE3nIlRJzHxi63ErlEXnUNI6JPWrKUO7rTJdbp98QedSUjWIm9qjpGSKPnrYysUdNzYRLEBO5RRrLxF6p5AhB7yz4zUqMtn+CUpSgZyt/sZpz0mzTWuXU5sbRaIgoOT1T8fdCnCZ026RC2lJzQ25CD4EKFX9PwWLUI/RoQQe+hbdcrEBFGazRovf0tdFwe1SUJVyx5u90u03aKOx7J3aLNEP8lY1J3ho10hg3Q7dbo59pjJwhdkvUAMeJPXr6jtY2Ary3W6Jfaw2CptutUJLmJgLEboXSsUkLO5O8JQ9079LtxE7sxE7sxE7sFqkhH+mIXV1WhG43DMoD7OPZZNHD/gWnPUUR+4BwX2wyeQMAijEYH4h/fS+hRw97c0K3B/tAvCf6ZRmh26OLGCpy+wE2VfQe6XLYTFHD/h6bKGrYy9CDDWQr9vwakV/FE2wce5WGl29CfgrD2TC2qy+W4/w14Hsxy5aVKvjFSN1CLVAPp1DEpqAoiqIoyiz9D9lYMumhgrvLAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI1LTExLTI3VDA5OjEyOjQxKzAwOjAwvIZCxQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNS0xMS0yN1QwOToxMjo0MSswMDowMM3b+nkAAAAASUVORK5CYII=";
 function McpLogo({ className }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -8022,17 +8165,47 @@ function ProviderTestDetails({ result }) {
 function ProviderFormatTestStatus({
   results
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid min-w-0 gap-2 sm:grid-cols-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 rounded-md border border-border/60 bg-muted/20 px-2 py-1.5", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground", children: "Non-stream" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TestStatus, { result: results.nonStreaming })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 rounded-md border border-border/60 bg-muted/20 px-2 py-1.5", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground", children: "Stream" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TestStatus, { result: results.streaming })
     ] })
   ] });
 }
+function EndpointDiagnosticLine({
+  diagnostic
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: diagnostic.severity === "warning" ? "text-amber-200" : "text-muted-foreground", children: diagnostic.message });
+}
+function ProviderEndpointSummary({
+  label,
+  baseUrl,
+  endpoint,
+  providerName,
+  children
+}) {
+  const preview = previewUpstreamUrl(baseUrl, endpoint, { providerName });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-col gap-2 border-t border-border/60 pt-2 first:border-t-0 first:pt-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid min-w-0 gap-1 text-xs sm:grid-cols-[104px_minmax(0,1fr)]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "min-w-0 break-all font-mono text-foreground/80", children: baseUrl }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] uppercase text-muted-foreground/80", children: "Final" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "min-w-0 break-all font-mono text-foreground", children: preview.finalUrl })
+    ] }),
+    preview.diagnostics.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 text-xs", children: preview.diagnostics.map((diagnostic) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      EndpointDiagnosticLine,
+      {
+        diagnostic
+      },
+      `${diagnostic.severity}:${diagnostic.message}`
+    )) }),
+    children
+  ] });
+}
 function getErrorIcon(type) {
   const iconProps = { className: "size-3", strokeWidth: 2 };
   switch (type) {
@@ -8130,8 +8303,8 @@ function TestStatus({ result }) {
       displayTiming.push(timingParts[i]);
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-xs text-green-600 shrink-0", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { className: "size-3" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-xs text-cyan-100 shrink-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { className: "size-3 text-cyan-300" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Connected" }),
         tokenParts.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground", children: [
           "(",
@@ -8233,6 +8406,13 @@ function ProviderCard({
   const hasContextMetadata = providerHasContextMetadata(provider);
   const canRefreshMetadata = provider.modelMetadataUrl !== void 0 && provider.modelMetadataUrl.trim() !== "";
   const metadataImportLabel = canRefreshMetadata ? "Refresh" : "Import defaults";
+  const providerSourceBadge = provider.source === "company" ? /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 rounded border border-cyan-300/20 bg-cyan-300/[0.08] px-1.5 py-0.5 text-xs text-cyan-100", children: "Company" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Company-provided API key" })
+  ] }) }) : provider.source === "personal" ? /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 rounded border border-violet-300/20 bg-violet-300/[0.08] px-1.5 py-0.5 text-xs text-violet-100", children: "Personal" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Your personal API key" })
+  ] }) }) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -8241,11 +8421,12 @@ function ProviderCard({
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium truncate", children: provider.name }),
-            provider.source === "company" && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            providerSourceBadge,
+            providerSourceBadge === null && provider.source === "company" && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 shrink-0", children: "公司" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Company-provided API key" })
             ] }) }),
-            provider.source === "personal" && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            providerSourceBadge === null && provider.source === "personal" && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 shrink-0", children: "个人" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Your personal API key" })
             ] }) })
@@ -8344,31 +8525,40 @@ function ProviderCard({
               onClick: handleCopy,
               className: "text-muted-foreground hover:text-foreground transition-colors p-1",
               "aria-label": "Copy API key",
-              children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4" })
+              children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4 text-cyan-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4" })
             }
           )
         ] }),
-        provider.anthropicBaseUrl !== void 0 && provider.anthropicBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Anthropic:" }),
-            " ",
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: provider.anthropicBaseUrl })
-          ] }),
-          testResults !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: testResults.anthropic })
-        ] }),
-        provider.openaiBaseUrl !== void 0 && provider.openaiBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "OpenAI Chat:" }),
-            " ",
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: provider.openaiBaseUrl })
-          ] }),
-          testResults !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: testResults.openai })
-        ] }),
-        provider.openaiResponsesBaseUrl !== void 0 && provider.openaiResponsesBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-w-0 flex-col gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "OpenAI Responses:" }),
-          " ",
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: provider.openaiResponsesBaseUrl })
-        ] }) }),
+        provider.anthropicBaseUrl !== void 0 && provider.anthropicBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ProviderEndpointSummary,
+          {
+            label: "Anthropic",
+            baseUrl: provider.anthropicBaseUrl,
+            endpoint: PATH_V1_MESSAGES,
+            providerName: provider.name,
+            children: testResults !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: testResults.anthropic })
+          }
+        ),
+        provider.openaiBaseUrl !== void 0 && provider.openaiBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ProviderEndpointSummary,
+          {
+            label: "OpenAI Chat",
+            baseUrl: provider.openaiBaseUrl,
+            endpoint: PATH_V1_CHAT_COMPLETIONS,
+            providerName: provider.name,
+            children: testResults !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: testResults.openaiChat })
+          }
+        ),
+        provider.openaiResponsesBaseUrl !== void 0 && provider.openaiResponsesBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ProviderEndpointSummary,
+          {
+            label: "OpenAI Responses",
+            baseUrl: provider.openaiResponsesBaseUrl,
+            endpoint: PATH_V1_RESPONSES,
+            providerName: provider.name,
+            children: testResults !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: testResults.openaiResponses })
+          }
+        ),
         testResults?.testedAt !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
@@ -8395,12 +8585,14 @@ function ProviderCard({
             /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: "border-b border-border", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left py-1 px-2 font-medium text-muted-foreground", children: "Model" }),
               provider.anthropicBaseUrl !== void 0 && provider.anthropicBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left py-1 px-2 font-medium text-muted-foreground", children: "Anthropic" }),
-              provider.openaiBaseUrl !== void 0 && provider.openaiBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left py-1 px-2 font-medium text-muted-foreground", children: "OpenAI" })
+              provider.openaiBaseUrl !== void 0 && provider.openaiBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left py-1 px-2 font-medium text-muted-foreground", children: "Chat" }),
+              provider.openaiResponsesBaseUrl !== void 0 && provider.openaiResponsesBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left py-1 px-2 font-medium text-muted-foreground", children: "Responses" })
             ] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: Object.entries(testResults.models).map(([modelName, modelResult]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: "border-b border-border/50 last:border-0", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1 px-2 font-medium", children: modelName }),
               provider.anthropicBaseUrl !== void 0 && provider.anthropicBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1 px-2 align-top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: modelResult.anthropic }) }),
-              provider.openaiBaseUrl !== void 0 && provider.openaiBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1 px-2 align-top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: modelResult.openai }) })
+              provider.openaiBaseUrl !== void 0 && provider.openaiBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1 px-2 align-top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: modelResult.openaiChat }) }),
+              provider.openaiResponsesBaseUrl !== void 0 && provider.openaiResponsesBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1 px-2 align-top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: modelResult.openaiResponses }) })
             ] }, modelName)) })
           ] }) })
         ] }),
@@ -8460,9 +8652,9 @@ const ZHIPU_CODING_PROVIDER_KEYWORDS = [
   "z.ai coding",
   "zai coding"
 ];
-const ANTHROPIC_MESSAGES_ENDPOINT = "/v1/messages";
-const OPENAI_CHAT_COMPLETIONS_ENDPOINT = "/v1/chat/completions";
-const OPENAI_RESPONSES_ENDPOINT = "/v1/responses";
+const ANTHROPIC_MESSAGES_ENDPOINT = PATH_V1_MESSAGES;
+const OPENAI_CHAT_COMPLETIONS_ENDPOINT = PATH_V1_CHAT_COMPLETIONS;
+const OPENAI_RESPONSES_ENDPOINT = PATH_V1_RESPONSES;
 const KNOWN_PROVIDER_PRESETS = {
   deepseek: {
     openaiBaseUrl: "https://api.deepseek.com"
@@ -8650,19 +8842,28 @@ function stripEndpointSuffix(value, endpoint) {
   const normalized = trimmed.replace(/\/+$/, "");
   return normalized.endsWith(endpoint) ? normalized.slice(0, -endpoint.length).replace(/\/+$/, "") : trimmed;
 }
-function previewEndpointUrl(baseUrl, endpoint) {
+function previewEndpointUrl(baseUrl, endpoint, providerName) {
   const trimmed = baseUrl.trim();
-  return trimmed === "" ? null : buildUpstreamUrl(trimmed, endpoint);
+  return trimmed === "" ? null : previewUpstreamUrl(trimmed, endpoint, { providerName });
 }
 function EndpointUrlPreview({
   baseUrl,
-  endpoint
+  endpoint,
+  providerName
 }) {
-  const finalUrl = previewEndpointUrl(baseUrl, endpoint);
-  if (finalUrl === null) return null;
+  const preview = previewEndpointUrl(baseUrl, endpoint, providerName);
+  if (preview === null) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-muted/40 rounded-md px-3 py-2 text-xs", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground", children: "Final URL" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "break-all font-mono text-foreground", children: finalUrl })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "break-all font-mono text-foreground", children: preview.finalUrl }),
+    preview.diagnostics.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 space-y-1", children: preview.diagnostics.map((diagnostic) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: diagnostic.severity === "warning" ? "text-amber-200" : "text-muted-foreground",
+        children: diagnostic.message
+      },
+      `${diagnostic.severity}:${diagnostic.message}`
+    )) })
   ] });
 }
 function ProviderForm({ provider, onSubmit, onCancel }) {
@@ -9037,7 +9238,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
             onClick: handleCopy,
             className: "text-muted-foreground hover:text-foreground transition-colors p-1 shrink-0",
             "aria-label": "Copy API key",
-            children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4" })
+            children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4 text-cyan-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4" })
           }
         )
       ] }),
@@ -9263,7 +9464,14 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground", children: ANTHROPIC_MESSAGES_ENDPOINT })
       ] }),
       errors.anthropicBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.anthropicBaseUrl }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(EndpointUrlPreview, { baseUrl: anthropicBaseUrl, endpoint: ANTHROPIC_MESSAGES_ENDPOINT }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        EndpointUrlPreview,
+        {
+          baseUrl: anthropicBaseUrl,
+          endpoint: ANTHROPIC_MESSAGES_ENDPOINT,
+          providerName: name
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Anthropic-compatible base URL. Leave empty if this provider does not support Anthropic format." })
     ] }),
     activeTab === "openai" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
@@ -9291,7 +9499,8 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
           EndpointUrlPreview,
           {
             baseUrl: openaiBaseUrl,
-            endpoint: OPENAI_CHAT_COMPLETIONS_ENDPOINT
+            endpoint: OPENAI_CHAT_COMPLETIONS_ENDPOINT,
+            providerName: name
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "OpenAI Chat Completions-compatible base URL. Leave empty if this provider only supports the Responses API." })
@@ -9320,7 +9529,8 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
           EndpointUrlPreview,
           {
             baseUrl: openaiResponsesBaseUrl,
-            endpoint: OPENAI_RESPONSES_ENDPOINT
+            endpoint: OPENAI_RESPONSES_ENDPOINT,
+            providerName: name
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Optional Responses-compatible base URL. Set only when the provider supports the Responses API." })
@@ -9851,7 +10061,7 @@ function ProvidersPanel({
             },
             className: "shrink-0 ml-auto text-muted-foreground hover:text-foreground transition-colors",
             "aria-label": configPathCopied ? "Copied config file path" : "Copy config file path",
-            children: configPathCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3 text-green-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3" })
+            children: configPathCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3 text-cyan-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3" })
           }
         ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Copy config file path to clipboard" })
@@ -12141,97 +12351,348 @@ function getModelLabel(logs) {
   if (sorted.length === 1) return sorted[0] ?? "Model unknown";
   return `${sorted.length} models`;
 }
+function getProviderLabel(logs) {
+  const providers = /* @__PURE__ */ new Set();
+  for (const log of logs) {
+    if (log.providerName !== null && log.providerName !== void 0 && log.providerName.length > 0) {
+      providers.add(log.providerName);
+    }
+  }
+  const sorted = [...providers].sort();
+  if (sorted.length === 0) return "Provider unknown";
+  if (sorted.length === 1) return sorted[0] ?? "Provider unknown";
+  return `${sorted.length} providers`;
+}
+function formatElapsedMs(ms) {
+  if (ms < 1e3) return `${ms}ms`;
+  if (ms < 6e4) {
+    const seconds2 = ms / 1e3;
+    return `${seconds2 < 10 ? seconds2.toFixed(1) : seconds2.toFixed(0)}s`;
+  }
+  const totalSeconds = Math.round(ms / 1e3);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}m ${seconds}s`;
+}
+function formatTokenPair(inputTokens, outputTokens) {
+  return `${formatTokens(inputTokens)} in / ${formatTokens(outputTokens)} out`;
+}
+function countSessionTurns(logs, conversationGroups) {
+  if (logs.length === 0) return 0;
+  if (conversationGroups.length === 0) return buildTurnGroups(logs).length;
+  let turns = 0;
+  for (const group of conversationGroups) {
+    turns += buildTurnGroups(group.logs).length;
+  }
+  return turns;
+}
+function summarizeFinishReason({
+  stopReason,
+  pending,
+  lastFailureLogNumber
+}) {
+  if (pending > 0) {
+    return {
+      label: "In flight",
+      detail: `${pending} request${pending === 1 ? "" : "s"} pending`,
+      tone: "cool"
+    };
+  }
+  if (lastFailureLogNumber !== null && stopReason === null) {
+    return {
+      label: "Error",
+      detail: `Last failed request #${lastFailureLogNumber}`,
+      tone: "danger"
+    };
+  }
+  switch (stopReason) {
+    case "end_turn":
+      return { label: "End turn", detail: "Assistant completed the turn", tone: "neutral" };
+    case "stop":
+      return { label: "Stop", detail: "Model reached a stop condition", tone: "neutral" };
+    case "length":
+      return { label: "Output limit", detail: "Turn ended at max output tokens", tone: "watch" };
+    case "tool_use":
+      return { label: "Tool call", detail: "Assistant requested a tool", tone: "cool" };
+    case null:
+      return { label: "Unknown", detail: "No finish reason captured", tone: "neutral" };
+  }
+}
+function isClientAbortError(error) {
+  if (error === null) return false;
+  const lower = error.toLowerCase();
+  return lower.includes("abort") || lower.includes("cancel") || lower.includes("client disconnected") || lower.includes("stream disconnected") || lower.includes("connection closed");
+}
+function summarizeSessionOutcome({
+  pending,
+  failures,
+  lengthStops,
+  stopReason,
+  lastFailure
+}) {
+  if (lastFailure !== null && (lastFailure.status === 499 || isClientAbortError(lastFailure.error))) {
+    return {
+      label: "Client aborted",
+      detail: `Request #${lastFailure.logNumber} ended before completion`,
+      tone: "watch"
+    };
+  }
+  if (pending > 0) {
+    return {
+      label: "In flight",
+      detail: `${pending} request${pending === 1 ? "" : "s"} still running`,
+      tone: "cool"
+    };
+  }
+  if (lastFailure !== null && lastFailure.status !== null && lastFailure.status >= 500) {
+    return {
+      label: "Provider error",
+      detail: `Request #${lastFailure.logNumber} returned HTTP ${lastFailure.status}`,
+      tone: "danger"
+    };
+  }
+  if (failures > 0 && lastFailure !== null) {
+    return {
+      label: "Failed",
+      detail: `Request #${lastFailure.logNumber} needs attention`,
+      tone: "danger"
+    };
+  }
+  if (lengthStops > 0 || stopReason === "length") {
+    return {
+      label: "Output limited",
+      detail: "Model stopped at the output token limit",
+      tone: "watch"
+    };
+  }
+  switch (stopReason) {
+    case "end_turn":
+    case "stop":
+      return { label: "Completed", detail: "Assistant completed normally", tone: "neutral" };
+    case "tool_use":
+      return { label: "Tool requested", detail: "Assistant handed off to a tool", tone: "cool" };
+    case null:
+      return { label: "Unknown", detail: "No terminal signal captured", tone: "neutral" };
+  }
+}
 function buildSessionSlateStats({
   logs,
+  conversationGroups,
   isLoading,
   timeDisplayFormat,
   slowResponseThresholdSeconds
 }) {
   let failures = 0;
+  let pending = 0;
   let slow = 0;
+  let lengthStops = 0;
   let totalIn = 0;
   let totalOut = 0;
+  let terminalStopReason = null;
+  let lastFailureLogNumber = null;
+  let lastFailure = null;
+  let slowestMs = null;
+  let slowestLogNumber = null;
+  let heaviestTokens = 0;
+  let heaviestInputTokens = 0;
+  let heaviestOutputTokens = 0;
+  let heaviestLogNumber = null;
   const slowThresholdMs = slowResponseThresholdSeconds * 1e3;
-  for (const log of logs) {
-    if (hasLogFailure(log)) failures += 1;
+  for (let index = 0; index < logs.length; index += 1) {
+    const log = logs[index];
+    if (log === void 0) continue;
+    const logNumber = index + 1;
+    const stopReason = extractStopReason(log);
+    if (stopReason !== null) terminalStopReason = stopReason;
+    if (stopReason === "length") lengthStops += 1;
+    if (hasLogFailure(log)) {
+      failures += 1;
+      lastFailureLogNumber = logNumber;
+      lastFailure = {
+        logNumber,
+        status: log.responseStatus,
+        error: log.error ?? null
+      };
+    }
+    if (log.responseStatus === null) pending += 1;
     if (slowResponseThresholdSeconds > 0 && log.elapsedMs !== null && log.elapsedMs >= slowThresholdMs) {
       slow += 1;
     }
     if (log.inputTokens !== null) totalIn += log.inputTokens;
     if (log.outputTokens !== null) totalOut += log.outputTokens;
+    if (log.elapsedMs !== null && (slowestMs === null || log.elapsedMs > slowestMs)) {
+      slowestMs = log.elapsedMs;
+      slowestLogNumber = logNumber;
+    }
+    const inputTokens = log.inputTokens ?? 0;
+    const outputTokens = log.outputTokens ?? 0;
+    const requestTokens = inputTokens + outputTokens;
+    if (requestTokens > heaviestTokens) {
+      heaviestTokens = requestTokens;
+      heaviestInputTokens = inputTokens;
+      heaviestOutputTokens = outputTokens;
+      heaviestLogNumber = logNumber;
+    }
   }
-  const status = isLoading ? "rolling" : failures > 0 ? "failed" : slow > 0 ? "watch" : "clear";
+  const status = isLoading || pending > 0 && failures === 0 ? "rolling" : failures > 0 ? "failed" : slow > 0 || lengthStops > 0 ? "watch" : "clear";
   const statusLabel2 = status === "rolling" ? "Rolling" : status === "failed" ? "Failure" : status === "watch" ? "Watch" : "Clear";
+  const finish = summarizeFinishReason({
+    stopReason: terminalStopReason,
+    pending,
+    lastFailureLogNumber
+  });
+  const outcome = summarizeSessionOutcome({
+    pending,
+    failures,
+    lengthStops,
+    stopReason: terminalStopReason,
+    lastFailure
+  });
   return {
     status,
     statusLabel: statusLabel2,
     modelLabel: getModelLabel(logs),
+    providerLabel: getProviderLabel(logs),
     requests: logs.length,
+    turns: countSessionTurns(logs, conversationGroups),
     failures,
+    pending,
     slow,
+    lengthStops,
     timeRange: formatTimeRange(logs, timeDisplayFormat),
-    tokenLabel: `${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`
+    tokenLabel: `${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`,
+    finishLabel: finish.label,
+    finishDetail: finish.detail,
+    finishTone: finish.tone,
+    outcomeLabel: outcome.label,
+    outcomeDetail: outcome.detail,
+    outcomeTone: outcome.tone,
+    slowestLabel: slowestMs === null ? "n/a" : formatElapsedMs(slowestMs),
+    slowestDetail: slowestLogNumber === null ? "Latency pending" : `Request #${slowestLogNumber}`,
+    heaviestDetail: heaviestLogNumber === null ? "Tokens pending" : `#${heaviestLogNumber} ${formatTokenPair(heaviestInputTokens, heaviestOutputTokens)}`
   };
 }
-function slateStatusClass(status) {
+function slateMetricToneClass(tone) {
+  switch (tone) {
+    case "cool":
+      return "text-cyan-100";
+    case "danger":
+      return "text-red-100";
+    case "watch":
+      return "text-amber-100";
+    case "neutral":
+      return "text-foreground";
+  }
+}
+function statusMetricTone(status) {
   switch (status) {
     case "rolling":
-      return "border-cyan-400/35 bg-cyan-500/10 text-cyan-200";
+      return "cool";
     case "failed":
-      return "border-red-400/35 bg-red-500/10 text-red-100";
+      return "danger";
     case "watch":
-      return "border-amber-300/35 bg-amber-400/10 text-amber-100";
+      return "watch";
     case "clear":
-      return "border-slate-300/20 bg-slate-300/[0.08] text-slate-100";
+      return "neutral";
   }
 }
+function requestHealthDetail(stats) {
+  if (stats.pending > 0) return `${stats.pending} pending / ${stats.failures} failed`;
+  if (stats.lengthStops > 0) return `${stats.lengthStops} output limit / ${stats.failures} failed`;
+  return `${stats.failures} failed / ${stats.slow} slow`;
+}
+function SessionSlateMetric({
+  label,
+  value,
+  detail,
+  icon,
+  tone = "neutral"
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 border-t border-white/10 px-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-[10px] uppercase text-muted-foreground", children: [
+      icon,
+      label
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("mt-2 font-mono text-sm font-semibold", slateMetricToneClass(tone)), children: value }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 font-mono text-[11px] leading-snug text-muted-foreground", children: detail })
+  ] });
+}
 function SessionOpeningSlate({ stats }) {
   if (stats.requests === 0) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border bg-card shadow-sm mb-4 rounded-[8px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-0 md:grid-cols-[minmax(220px,1.2fr)_repeat(4,minmax(120px,1fr))]", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-2 border-b border-white/10 px-4 py-3 md:col-span-1 md:border-b-0 md:border-r", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-[10px] font-semibold uppercase text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Clapperboard, { className: "size-3.5 text-cyan-300" }),
-        "Opening Slate"
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-card shadow-sm mb-4 overflow-hidden rounded-[8px]", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-[10px] font-semibold uppercase text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Clapperboard, { className: "size-3.5 text-slate-300" }),
+          "Flight Recorder"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 min-w-0 font-mono text-sm font-semibold text-foreground", children: stats.modelLabel })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 min-w-0 truncate font-mono text-sm font-semibold text-foreground", children: stats.modelLabel }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 truncate font-mono text-[11px] text-muted-foreground", children: stats.timeRange ?? "Timeline pending" })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-r border-b border-white/10 px-4 py-3 md:border-b-0", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase text-muted-foreground", children: "Status" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 font-mono", children: stats.providerLabel }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 font-mono", children: stats.timeRange ?? "Timeline pending" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 border-t border-white/10 md:grid-cols-3 2xl:grid-cols-6", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
+        SessionSlateMetric,
         {
-          className: cn(
-            "mt-2 inline-flex h-7 items-center rounded-md border px-2.5 font-mono text-xs font-semibold",
-            slateStatusClass(stats.status)
-          ),
-          children: stats.statusLabel
+          label: "Status",
+          value: stats.statusLabel,
+          detail: requestHealthDetail(stats),
+          tone: statusMetricTone(stats.status)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SessionSlateMetric,
+        {
+          label: "Turns",
+          value: String(stats.turns),
+          detail: stats.finishLabel,
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Flag, { className: "size-3 text-muted-foreground" }),
+          tone: stats.finishTone
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SessionSlateMetric,
+        {
+          label: "Requests",
+          value: String(stats.requests),
+          detail: `${stats.failures} failed / ${stats.slow} slow`,
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Siren, { className: "size-3 text-muted-foreground" }),
+          tone: stats.failures > 0 ? "danger" : "neutral"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SessionSlateMetric,
+        {
+          label: "Peak",
+          value: stats.slowestLabel,
+          detail: stats.slowestDetail,
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Timer, { className: "size-3 text-muted-foreground" }),
+          tone: stats.slow > 0 ? "watch" : "neutral"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SessionSlateMetric,
+        {
+          label: "Tokens",
+          value: stats.tokenLabel,
+          detail: stats.heaviestDetail,
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Gauge, { className: "size-3 text-muted-foreground" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SessionSlateMetric,
+        {
+          label: "Outcome",
+          value: stats.outcomeLabel,
+          detail: stats.outcomeDetail,
+          tone: stats.outcomeTone
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-b border-white/10 px-4 py-3 md:border-b-0 md:border-r", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase text-muted-foreground", children: "Requests" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 font-mono text-xl font-semibold text-foreground", children: stats.requests })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-r border-white/10 px-4 py-3 md:border-r", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-[10px] uppercase text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Siren, { className: "size-3 text-red-300" }),
-        "Failure"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 font-mono text-xl font-semibold text-red-100", children: stats.failures })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-[10px] uppercase text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Gauge, { className: "size-3 text-amber-200" }),
-        "Tempo"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 font-mono text-sm font-semibold text-foreground", children: [
-        stats.slow,
-        " slow"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 truncate font-mono text-[11px] text-muted-foreground", children: stats.tokenLabel })
     ] })
-  ] }) });
+  ] });
 }
 function resolveSessionContextScope({
   pinnedSessionId,
@@ -13193,11 +13654,12 @@ function ProxyViewer({
   const slateStats = reactExports.useMemo(
     () => buildSessionSlateStats({
       logs,
+      conversationGroups: groups,
       isLoading,
       timeDisplayFormat,
       slowResponseThresholdSeconds
     }),
-    [isLoading, logs, slowResponseThresholdSeconds, timeDisplayFormat]
+    [groups, isLoading, logs, slowResponseThresholdSeconds, timeDisplayFormat]
   );
   const handleCompareWithPrevious = reactExports.useCallback(
     (log) => {