@tonyclaw/llm-inspector 1.16.3 → 1.16.5

package/.output/server/_ssr/{index-CjvQZBI0.mjs → index-CDjLoMsk.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, R as RuntimeConfigSchema, r as requestFormatForPath, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, b as createFailedProviderTestResults, d as ProviderConfigSchema, s as stripClaudeCodeBillingHeader, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, a as AnthropicRequestSchema } from "./router-CO9_4CVh.mjs";
+import { C as CapturedLogSchema, R as RuntimeConfigSchema, r as requestFormatForPath, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, b as createFailedProviderTestResults, d as ProviderConfigSchema, s as stripClaudeCodeBillingHeader, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, a as AnthropicRequestSchema } from "./router-BrdjOUEW.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,16 +9,11 @@ import { R as Root, T as Trigger$1, C as Content, a as Close, b as Title, P as P
 import { d as diffJson, a as diffLines } from "../_libs/diff.mjs";
 import { u as useVirtualizer } from "../_libs/tanstack__react-virtual.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 "../_libs/modelcontextprotocol__server.mjs";
-import { C as Check, X, D as Download, S as Settings, a as ChevronDown, U as Upload, b as Scan, P as Plus, c as Copy, d as CircleAlert, e as ChevronUp, L as LoaderCircle, f as ChevronRight, g as User, h as Clock, M as MessageSquare, Z as Zap, T as Trash2, R as Rows3, i as Columns2, j as Minus, k as Pencil, E as Equal, l as EyeOff, m as Eye, n as ExternalLink, o as RotateCw, G as GitCompareArrows, p as RotateCcw, q as CircleCheckBig, W as Wrench, r as Globe, F as FileTerminal, s as Radio, t as CircleQuestionMark, u as Server, v as Gauge, w as Lock, x as Wifi, y as WifiOff, A as ArrowUp, z as ArrowDown, B as TriangleAlert, H as CircleStop, I as ChevronsUp, J as ChevronsDown, K as Brain, N as Terminal } from "../_libs/lucide-react.mjs";
-import { M as Markdown } from "../_libs/react-markdown.mjs";
+import { C as Check, X, D as Download, S as Settings, a as ChevronDown, U as Upload, b as Scan, P as Plus, c as Copy, d as CircleAlert, e as ChevronUp, L as LoaderCircle, f as ChevronRight, g as User, h as Clock, M as MessageSquare, Z as Zap, T as Trash2, E as EyeOff, i as Eye, j as ExternalLink, R as RotateCw, k as Pencil, G as GitCompareArrows, l as Minus, m as CircleCheckBig, O as OctagonAlert, n as TriangleAlert, W as Wrench, o as Globe, F as FileTerminal, p as Radio, q as ChevronsUp, r as ChevronsDown, s as RotateCcw, t as CircleQuestionMark, u as Server, v as Gauge, w as Lock, x as Wifi, y as WifiOff, A as ArrowUp, z as ArrowDown, B as Rows3, H 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 { R as Root2$1, L as List, T as Trigger$2, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
 import { P as Provider, R as Root3, T as Trigger$3, a as Portal$2, C as Content2$1, A as Arrow2 } from "../_libs/radix-ui__react-tooltip.mjs";
 import { S as Slot } from "../_libs/radix-ui__react-slot.mjs";
-import { R as Root$1 } from "../_libs/radix-ui__react-separator.mjs";
-import { R as Root$2, C as CollapsibleTrigger$1, a as CollapsibleContent$1 } from "../_libs/radix-ui__react-collapsible.mjs";
-import { R as Root$3, V as Viewport$1, C as Corner, S as ScrollAreaScrollbar, a as ScrollAreaThumb } from "../_libs/radix-ui__react-scroll-area.mjs";
 import "../_libs/tanstack__react-router.mjs";
 import "../_libs/tiny-warning.mjs";
 import "../_libs/tanstack__router-core.mjs";
@@ -61,6 +56,7 @@ import "../_libs/mimic-function.mjs";
 import "../_libs/semver.mjs";
 import "../_libs/uint8array-extras.mjs";
 import "node:child_process";
+import "../_libs/modelcontextprotocol__server.mjs";
 import "../_libs/use-sync-external-store.mjs";
 import "../_libs/dequal.mjs";
 import "../_libs/readable-stream.mjs";
@@ -112,57 +108,6 @@ import "../_libs/radix-ui__react-arrow.mjs";
 import "../_libs/radix-ui__react-use-size.mjs";
 import "../_libs/radix-ui__react-use-previous.mjs";
 import "../_libs/@radix-ui/react-visually-hidden+[...].mjs";
-import "../_libs/devlop.mjs";
-import "../_libs/unified.mjs";
-import "../_libs/bail.mjs";
-import "../_libs/extend.mjs";
-import "../_libs/is-plain-obj.mjs";
-import "../_libs/trough.mjs";
-import "../_libs/vfile.mjs";
-import "../_libs/vfile-message.mjs";
-import "../_libs/unist-util-stringify-position.mjs";
-import "node:url";
-import "../_libs/remark-parse.mjs";
-import "../_libs/mdast-util-from-markdown.mjs";
-import "../_libs/micromark-util-decode-numeric-character-reference+[...].mjs";
-import "../_libs/micromark-util-decode-string.mjs";
-import "../_libs/decode-named-character-reference+[...].mjs";
-import "../_libs/character-entities.mjs";
-import "../_libs/micromark-util-normalize-identifier+[...].mjs";
-import "../_libs/micromark.mjs";
-import "../_libs/micromark-util-combine-extensions+[...].mjs";
-import "../_libs/micromark-util-chunked.mjs";
-import "../_libs/micromark-factory-space.mjs";
-import "../_libs/micromark-util-character.mjs";
-import "../_libs/micromark-core-commonmark.mjs";
-import "../_libs/micromark-util-classify-character+[...].mjs";
-import "../_libs/micromark-util-resolve-all.mjs";
-import "../_libs/micromark-util-subtokenize.mjs";
-import "../_libs/micromark-factory-destination.mjs";
-import "../_libs/micromark-factory-label.mjs";
-import "../_libs/micromark-factory-title.mjs";
-import "../_libs/micromark-factory-whitespace.mjs";
-import "../_libs/micromark-util-html-tag-name.mjs";
-import "../_libs/mdast-util-to-string.mjs";
-import "../_libs/remark-rehype.mjs";
-import "../_libs/mdast-util-to-hast.mjs";
-import "../_libs/ungap__structured-clone.mjs";
-import "../_libs/micromark-util-sanitize-uri.mjs";
-import "../_libs/unist-util-position.mjs";
-import "../_libs/trim-lines.mjs";
-import "../_libs/unist-util-visit.mjs";
-import "../_libs/unist-util-visit-parents.mjs";
-import "../_libs/unist-util-is.mjs";
-import "../_libs/hast-util-to-jsx-runtime.mjs";
-import "../_libs/comma-separated-tokens.mjs";
-import "../_libs/property-information.mjs";
-import "../_libs/space-separated-tokens.mjs";
-import "../_libs/style-to-js.mjs";
-import "../_libs/style-to-object.mjs";
-import "../_libs/inline-style-parser.mjs";
-import "../_libs/hast-util-whitespace.mjs";
-import "../_libs/estree-util-is-identifier-name.mjs";
-import "../_libs/html-url-attributes.mjs";
 import "../_libs/radix-ui__react-roving-focus.mjs";
 const ApiErrorSchema = object({
   error: string()
@@ -327,10 +272,10 @@ function OnboardingBanner() {
             onClick: () => {
               void markSeen();
             },
-            className: "inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-amber-500/40 text-amber-700 dark:text-amber-300 hover:bg-amber-500/10 transition-colors shrink-0",
+            className: "inline-flex items-center gap-1.5 text-xs h-8 px-3 rounded-md border border-amber-500/40 text-amber-700 dark:text-amber-300 hover:bg-amber-500/10 transition-colors shrink-0",
             "aria-label": "Dismiss onboarding tip",
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5" }),
               "Got it"
             ]
           }
@@ -390,7 +335,7 @@ async function exportLogsAsZip(logs) {
   document.body.removeChild(anchor);
   URL.revokeObjectURL(url);
 }
-const version = "1.16.3";
+const version = "1.16.5";
 const packageJson = {
   version
 };
@@ -398,9 +343,8 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 function formatTokens(count) {
-  if (count >= 1048576) return (count / 1048576).toFixed(1).replace(/\.0$/, "") + "M";
-  if (count >= 1024) return (count / 1024).toFixed(1).replace(/\.0$/, "") + "K";
-  return count.toString();
+  if (count >= 1e6) return (count / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
+  return (count / 1e3).toFixed(1).replace(/\.0$/, "") + "K";
 }
 function getStatusCategory(status) {
   if (status === null) return "pending";
@@ -629,11 +573,14 @@ function ConversationHeader({
     {
       role: "button",
       tabIndex: 0,
+      "data-nav-id": `conv-${conversationId}`,
+      "data-nav-action": expanded ? "collapse" : "expand",
       className: cn(
         "flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors",
         "hover:bg-muted/50",
         "select-none",
-        "border border-border rounded-lg mb-2 bg-background sticky top-0 z-10"
+        "border border-border rounded-lg mb-2 bg-background sticky top-0 z-10",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
       ),
       onClick: onToggle,
       onKeyDown: (e) => {
@@ -709,7 +656,7 @@ function ConversationHeader({
             onClick: handleClearClick,
             "aria-label": `Clear group (${totalCalls} request${totalCalls !== 1 ? "s" : ""})`,
             title: "Clear this group",
-            className: "text-muted-foreground hover:text-foreground transition-colors shrink-0 inline-flex items-center justify-center size-6 rounded hover:bg-muted cursor-pointer",
+            className: "text-muted-foreground hover:text-foreground transition-colors shrink-0 inline-flex items-center justify-center size-8 rounded hover:bg-muted cursor-pointer",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" })
           }
         ),
@@ -783,7 +730,7 @@ function groupLogsByConversation(logs) {
   result.sort((a, b) => (a.logs[0]?.timestamp ?? "").localeCompare(b.logs[0]?.timestamp ?? ""));
   return result;
 }
-function isRecord$1(value) {
+function isRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function extractStopReason(log) {
@@ -793,14 +740,14 @@ function extractStopReason(log) {
     if (typeof json === "string") {
       json = JSON.parse(json);
     }
-    if (!isRecord$1(json)) return null;
+    if (!isRecord(json)) return null;
     if (typeof json.stop_reason === "string") {
       if (json.stop_reason === "end_turn" || json.stop_reason === "tool_use") {
         return json.stop_reason;
       }
       return null;
     }
-    if (Array.isArray(json.choices) && json.choices.length > 0 && isRecord$1(json.choices[0]) && typeof json.choices[0].finish_reason === "string" && json.choices[0].finish_reason === "stop") {
+    if (Array.isArray(json.choices) && json.choices.length > 0 && isRecord(json.choices[0]) && typeof json.choices[0].finish_reason === "string" && json.choices[0].finish_reason === "stop") {
       return "stop";
     }
     return null;
@@ -1151,8 +1098,17 @@ const crabVariants = [
   Crab11,
   Crab12
 ];
-function getCrabVariant(index) {
-  return crabVariants[Math.abs(index) % crabVariants.length] ?? Crab1;
+function getCrabVariant(index2) {
+  return crabVariants[Math.abs(index2) % 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));
 }
 const AnthropicLogoSvg = "data:image/svg+xml,%3csvg%20height='2500'%20viewBox='0%206.603%201192.672%201193.397'%20width='2500'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m233.96%20800.215%20234.684-131.678%203.947-11.436-3.947-6.363h-11.436l-39.221-2.416-134.094-3.624-116.296-4.832-112.67-6.04-28.35-6.04-26.577-35.035%202.738-17.477%2023.84-16.027%2034.147%202.98%2075.463%205.155%20113.235%207.812%2082.147%204.832%20121.692%2012.644h19.329l2.738-7.812-6.604-4.832-5.154-4.832-117.182-79.41-126.845-83.92-66.443-48.321-35.92-24.484-18.12-22.953-7.813-50.093%2032.618-35.92%2043.812%202.98%2011.195%202.98%2044.375%2034.147%2094.792%2073.37%20123.786%2091.167%2018.12%2015.06%207.249-5.154.886-3.624-8.135-13.61-67.329-121.692-71.838-123.785-31.974-51.302-8.456-30.765c-2.98-12.645-5.154-23.275-5.154-36.242l37.127-50.416%2020.537-6.604%2049.53%206.604%2020.86%2018.121%2030.765%2070.39%2049.852%20110.818%2077.315%20150.684%2022.631%2044.698%2012.08%2041.396%204.51%2012.645h7.813v-7.248l6.362-84.886%2011.759-104.215%2011.436-134.094%203.946-37.772%2018.685-45.262%2037.127-24.482%2028.994%2013.852%2023.839%2034.148-3.303%2022.067-14.174%2092.134-27.785%20144.323-18.121%2096.644h10.55l12.08-12.08%2048.887-64.913%2082.147-102.685%2036.242-40.752%2042.282-45.02%2027.14-21.423h51.303l37.772%2056.135-16.913%2057.986-52.832%2067.007-43.812%2056.779-62.82%2084.563-39.22%2067.651%203.623%205.396%209.343-.886%20141.906-30.201%2076.671-13.852%2091.49-15.705%2041.396%2019.329%204.51%2019.65-16.269%2040.189-97.852%2024.16-114.764%2022.954-170.9%2040.43-2.093%201.53%202.416%202.98%2076.993%207.248%2032.94%201.771h80.617l150.12%2011.195%2039.222%2025.933%2023.517%2031.732-3.946%2024.16-60.403%2030.766-81.503-19.33-190.228-45.26-65.235-16.27h-9.02v5.397l54.362%2053.154%2099.624%2089.96%20124.752%20115.973%206.362%2028.671-16.027%2022.63-16.912-2.415-109.611-82.47-42.282-37.127-95.758-80.618h-6.363v8.456l22.067%2032.296%20116.537%20175.167%206.04%2053.719-8.456%2017.476-30.201%2010.55-33.181-6.04-68.215-95.758-70.39-107.84-56.778-96.644-6.926%203.947-33.503%20360.886-15.705%2018.443-36.243%2013.852-30.201-22.953-16.027-37.127%2016.027-73.37%2019.329-95.758%2015.704-76.107%2014.175-94.55%208.456-31.41-.563-2.094-6.927.886-71.275%2097.852-108.402%20146.497-85.772%2091.812-20.537%208.134-35.597-18.443%203.301-32.94%2019.893-29.315%20118.712-151.007%2071.597-93.583%2046.228-54.04-.322-7.813h-2.738l-315.302%20204.725-56.135%207.248-24.16-22.63%202.98-37.128%2011.435-12.08%2094.792-65.236-.322.323z'%20fill='%23d97757'/%3e%3c/svg%3e";
 const OpenAILogoSvg = "data:image/svg+xml,%3csvg%20height='2500'%20viewBox='-1%20-.1%20949.1%20959.8'%20width='2474'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m925.8%20456.3c10.4%2023.2%2017%2048%2019.7%2073.3%202.6%2025.3%201.3%2050.9-4.1%2075.8-5.3%2024.9-14.5%2048.8-27.3%2070.8-8.4%2014.7-18.3%2028.5-29.7%2041.2-11.3%2012.6-23.9%2024-37.6%2034-13.8%2010-28.5%2018.4-44.1%2025.3-15.5%206.8-31.7%2012-48.3%2015.4-7.8%2024.2-19.4%2047.1-34.4%2067.7-14.9%2020.6-33%2038.7-53.6%2053.6-20.6%2015-43.4%2026.6-67.6%2034.4-24.2%207.9-49.5%2011.8-75%2011.8-16.9.1-33.9-1.7-50.5-5.1-16.5-3.5-32.7-8.8-48.2-15.7s-30.2-15.5-43.9-25.5c-13.6-10-26.2-21.5-37.4-34.2-25%205.4-50.6%206.7-75.9%204.1-25.3-2.7-50.1-9.3-73.4-19.7-23.2-10.3-44.7-24.3-63.6-41.4s-35-37.1-47.7-59.1c-8.5-14.7-15.5-30.2-20.8-46.3s-8.8-32.7-10.6-49.6c-1.8-16.8-1.7-33.8.1-50.7%201.8-16.8%205.5-33.4%2010.8-49.5-17-18.9-31-40.4-41.4-63.6-10.3-23.3-17-48-19.6-73.3-2.7-25.3-1.3-50.9%204-75.8s14.5-48.8%2027.3-70.8c8.4-14.7%2018.3-28.6%2029.6-41.2s24-24%2037.7-34%2028.5-18.5%2044-25.3c15.6-6.9%2031.8-12%2048.4-15.4%207.8-24.3%2019.4-47.1%2034.3-67.7%2015-20.6%2033.1-38.7%2053.7-53.7%2020.6-14.9%2043.4-26.5%2067.6-34.4%2024.2-7.8%2049.5-11.8%2075-11.7%2016.9-.1%2033.9%201.6%2050.5%205.1s32.8%208.7%2048.3%2015.6c15.5%207%2030.2%2015.5%2043.9%2025.5%2013.7%2010.1%2026.3%2021.5%2037.5%2034.2%2024.9-5.3%2050.5-6.6%2075.8-4s50%209.3%2073.3%2019.6c23.2%2010.4%2044.7%2024.3%2063.6%2041.4%2018.9%2017%2035%2036.9%2047.7%2059%208.5%2014.6%2015.5%2030.1%2020.8%2046.3%205.3%2016.1%208.9%2032.7%2010.6%2049.6%201.8%2016.9%201.8%2033.9-.1%2050.8-1.8%2016.9-5.5%2033.5-10.8%2049.6%2017.1%2018.9%2031%2040.3%2041.4%2063.6zm-333.2%20426.9c21.8-9%2041.6-22.3%2058.3-39s30-36.5%2039-58.4c9-21.8%2013.7-45.2%2013.7-68.8v-223q-.1-.3-.2-.7-.1-.3-.3-.6-.2-.3-.5-.5-.3-.3-.6-.4l-80.7-46.6v269.4c0%202.7-.4%205.5-1.1%208.1-.7%202.7-1.7%205.2-3.1%207.6s-3%204.6-5%206.5a32.1%2032.1%200%200%201%20-6.5%205l-191.1%20110.3c-1.6%201-4.3%202.4-5.7%203.2%207.9%206.7%2016.5%2012.6%2025.5%2017.8%209.1%205.2%2018.5%209.6%2028.3%2013.2%209.8%203.5%2019.9%206.2%2030.1%208%2010.3%201.8%2020.7%202.7%2031.1%202.7%2023.6%200%2047-4.7%2068.8-13.8zm-455.1-151.4c11.9%2020.5%2027.6%2038.3%2046.3%2052.7%2018.8%2014.4%2040.1%2024.9%2062.9%2031s46.6%207.7%2070%204.6%2045.9-10.7%2066.4-22.5l193.2-111.5.5-.5q.2-.2.3-.6.2-.3.3-.6v-94l-233.2%20134.9c-2.4%201.4-4.9%202.4-7.5%203.2-2.7.7-5.4%201-8.2%201-2.7%200-5.4-.3-8.1-1-2.6-.8-5.2-1.8-7.6-3.2l-191.1-110.4c-1.7-1-4.2-2.5-5.6-3.4-1.8%2010.3-2.7%2020.7-2.7%2031.1s1%2020.8%202.8%2031.1c1.8%2010.2%204.6%2020.3%208.1%2030.1%203.6%209.8%208%2019.2%2013.2%2028.2zm-50.2-417c-11.8%2020.5-19.4%2043.1-22.5%2066.5s-1.5%2047.1%204.6%2070c6.1%2022.8%2016.6%2044.1%2031%2062.9%2014.4%2018.7%2032.3%2034.4%2052.7%2046.2l193.1%20111.6q.3.1.7.2h.7q.4%200%20.7-.2.3-.1.6-.3l81-46.8-233.2-134.6c-2.3-1.4-4.5-3.1-6.5-5a32.1%2032.1%200%200%201%20-5-6.5c-1.3-2.4-2.4-4.9-3.1-7.6-.7-2.6-1.1-5.3-1-8.1v-227.1c-9.8%203.6-19.3%208-28.3%2013.2-9%205.3-17.5%2011.3-25.5%2018-7.9%206.7-15.3%2014.1-22%2022.1-6.7%207.9-12.6%2016.5-17.8%2025.5zm663.3%20154.4c2.4%201.4%204.6%203%206.6%205%201.9%201.9%203.6%204.1%205%206.5%201.3%202.4%202.4%205%203.1%207.6.6%202.7%201%205.4.9%208.2v227.1c32.1-11.8%2060.1-32.5%2080.8-59.7%2020.8-27.2%2033.3-59.7%2036.2-93.7s-3.9-68.2-19.7-98.5-39.9-55.5-69.5-72.5l-193.1-111.6q-.3-.1-.7-.2h-.7q-.3.1-.7.2-.3.1-.6.3l-80.6%2046.6%20233.2%20134.7zm80.5-121h-.1v.1zm-.1-.1c5.8-33.6%201.9-68.2-11.3-99.7-13.1-31.5-35-58.6-63-78.2-28-19.5-61-30.7-95.1-32.2-34.2-1.4-68%206.9-97.6%2023.9l-193.1%20111.5q-.3.2-.5.5l-.4.6q-.1.3-.2.7-.1.3-.1.7v93.2l233.2-134.7c2.4-1.4%205-2.4%207.6-3.2%202.7-.7%205.4-1%208.1-1%202.8%200%205.5.3%208.2%201%202.6.8%205.1%201.8%207.5%203.2l191.1%20110.4c1.7%201%204.2%202.4%205.6%203.3zm-505.3-103.2c0-2.7.4-5.4%201.1-8.1.7-2.6%201.7-5.2%203.1-7.6%201.4-2.3%203-4.5%205-6.5%201.9-1.9%204.1-3.6%206.5-4.9l191.1-110.3c1.8-1.1%204.3-2.5%205.7-3.2-26.2-21.9-58.2-35.9-92.1-40.2-33.9-4.4-68.3%201-99.2%2015.5-31%2014.5-57.2%2037.6-75.5%2066.4-18.3%2028.9-28%2062.3-28%2096.5v223q.1.4.2.7.1.3.3.6.2.3.5.6.2.2.6.4l80.7%2046.6zm43.8%20294.7%20103.9%2060%20103.9-60v-119.9l-103.8-60-103.9%2060z'/%3e%3c/svg%3e";
@@ -1276,334 +1232,70 @@ function TooltipContent({
     }
   ) });
 }
-function classifyValue(value) {
-  if (value === null) return "null";
-  if (Array.isArray(value)) return "array";
-  switch (typeof value) {
-    case "string":
-      return "string";
-    case "number":
-      return "number";
-    case "boolean":
-      return "boolean";
-    case "object":
-      return "object";
-    case "bigint":
-    case "symbol":
-    case "undefined":
-    case "function":
-      return "object";
-  }
-}
-function isExpandable(value) {
-  return value !== null && (Array.isArray(value) || typeof value === "object");
-}
-function getPropertyValue(obj, key) {
-  const descriptor = Object.getOwnPropertyDescriptor(obj, key);
-  if (descriptor === void 0) return void 0;
-  return descriptor.value;
-}
-function getEntries(value) {
-  if (Array.isArray(value)) {
-    return value.map((item, index) => [String(index), item]);
-  }
-  if (typeof value === "object" && value !== null) {
-    return Object.keys(value).map((key) => {
-      const raw = getPropertyValue(value, key);
-      return [key, safeJsonValue(raw)];
-    });
-  }
-  return [];
-}
-function getItemCount(value) {
-  if (Array.isArray(value)) return value.length;
-  if (typeof value === "object" && value !== null) return Object.keys(value).length;
-  return 0;
-}
-const STRING_TRUNCATE_LIMIT = 120;
-function StringValue({ text }) {
-  const [expanded, setExpanded] = reactExports.useState(false);
-  const isLong = text.length > STRING_TRUNCATE_LIMIT;
-  if (!isLong) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-emerald-400 break-all", children: [
-      '"',
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "prose prose-sm dark:prose-invert inline max-w-none [&_p]:inline [&_p]:my-0 [&_code]:text-emerald-300 [&_a]:text-emerald-300", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { children: text }) }),
-      '"'
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-emerald-400 break-all", children: [
-    '"',
-    expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "span",
+function JsonExpansionButton({
+  policy,
+  isExpanded,
+  isPending,
+  onToggle
+}) {
+  if (policy === null) return null;
+  const label = isPending ? "Updating..." : isExpanded ? "Collapse all" : "Expand all";
+  const tooltip = isExpanded ? "Collapse all JSON nodes" : "Expand all JSON nodes";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Button,
       {
-        className: "cursor-pointer prose prose-sm dark:prose-invert inline max-w-none [&_p]:inline [&_p]:my-0 [&_code]:text-emerald-300 [&_a]:text-emerald-300",
+        variant: "outline",
+        size: "sm",
+        className: "h-8 text-xs",
         onClick: (e) => {
           e.stopPropagation();
-          setExpanded(false);
-        },
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.stopPropagation();
-            setExpanded(false);
-          }
+          onToggle();
         },
-        role: "button",
-        tabIndex: 0,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { children: text })
-      }
-    ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 300, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        TooltipTrigger,
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            setExpanded(true);
-          },
-          className: "text-left cursor-pointer",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: text.slice(0, STRING_TRUNCATE_LIMIT) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-emerald-400/50", children: "…" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        TooltipContent,
-        {
-          side: "bottom",
-          className: "max-w-md text-xs p-2 break-words whitespace-pre-wrap",
-          children: [
-            text.slice(0, 500),
-            text.length > 500 ? "…" : ""
-          ]
-        }
-      )
-    ] }),
-    '"'
-  ] });
-}
-function PrimitiveValue({ value }) {
-  if (value === null) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-rose-400 italic", children: "null" });
-  }
-  switch (typeof value) {
-    case "string":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(StringValue, { text: value });
-    case "number":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-amber-400", children: value });
-    case "boolean":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-blue-400", children: value ? "true" : "false" });
-    case "object":
-    case "bigint":
-    case "symbol":
-    case "undefined":
-    case "function":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: JSON.stringify(value) });
-  }
-}
-function CopyValueButton({ value }) {
-  const [copied, setCopied] = reactExports.useState(false);
-  function handleCopy(e) {
-    e.stopPropagation();
-    void window.navigator.clipboard.writeText(JSON.stringify(value, null, 2)).then(() => {
-      setCopied(true);
-      setTimeout(() => {
-        setCopied(false);
-      }, 2e3);
-    });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: handleCopy,
-      className: "inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors",
-      title: "Copy JSON",
-      children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3 text-green-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3" })
-    }
-  );
-}
-function CopyButton$1({ value }) {
-  const [copied, setCopied] = reactExports.useState(false);
-  function handleCopy(e) {
-    e.stopPropagation();
-    void window.navigator.clipboard.writeText(JSON.stringify(value, null, 2)).then(() => {
-      setCopied(true);
-      setTimeout(() => {
-        setCopied(false);
-      }, 2e3);
-    });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: handleCopy,
-      className: "opacity-0 group-hover/row:opacity-100 hover:bg-muted p-0.5 rounded transition-opacity shrink-0",
-      title: "Copy to clipboard",
-      children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3 text-green-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3 text-muted-foreground" })
-    }
-  );
-}
-function hasExpandableDescendant(value) {
-  if (!isExpandable(value)) return false;
-  return getEntries(value).some(([, v]) => isExpandable(v));
-}
-function ExpandCollapseButton({
-  allExpanded,
-  onClick
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: "opacity-0 group-hover/row:opacity-100 hover:bg-muted p-0.5 rounded transition-opacity shrink-0",
-      title: allExpanded ? "Collapse all" : "Expand all",
-      children: allExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsUp, { className: "size-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsDown, { className: "size-3.5 text-muted-foreground" })
-    }
-  );
-}
-const JsonNode = reactExports.memo(function JsonNode2({
-  name,
-  value,
-  level,
-  defaultExpandDepth,
-  isArrayItem
-}) {
-  const [expanded, setExpanded] = reactExports.useState(level < defaultExpandDepth);
-  const [childResetKey, setChildResetKey] = reactExports.useState(0);
-  const [childDepthOverride, setChildDepthOverride] = reactExports.useState(null);
-  const [allExpanded, setAllExpanded] = reactExports.useState(false);
-  const expandable = isExpandable(value);
-  const dataType = classifyValue(value);
-  const openBracket = dataType === "array" ? "[" : "{";
-  const closeBracket = dataType === "array" ? "]" : "}";
-  function toggleDeepExpansion() {
-    if (allExpanded) {
-      setExpanded(false);
-      setChildDepthOverride(0);
-      setChildResetKey((k) => k + 1);
-      setAllExpanded(false);
-    } else {
-      setExpanded(true);
-      setChildDepthOverride(Number.POSITIVE_INFINITY);
-      setChildResetKey((k) => k + 1);
-      setAllExpanded(true);
-    }
-  }
-  function handleExpandAll(e) {
-    e.stopPropagation();
-    toggleDeepExpansion();
-  }
-  const effectiveChildDepth = childDepthOverride ?? defaultExpandDepth;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(level > 0 && "border-l border-border/50 ml-2"), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: cn(
-          "flex items-start gap-1 py-0.5 px-1 -ml-1 rounded-sm group/row",
-          expandable && "cursor-pointer hover:bg-muted/50"
-        ),
-        onClick: expandable ? () => {
-          if (expanded) {
-            setAllExpanded(false);
-          }
-          setExpanded(!expanded);
-        } : void 0,
-        onKeyDown: expandable ? (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            setExpanded(!expanded);
-          }
-        } : void 0,
-        onDoubleClick: expandable && hasExpandableDescendant(value) ? () => toggleDeepExpansion() : void 0,
-        role: expandable ? "button" : void 0,
-        tabIndex: expandable ? 0 : void 0,
+        disabled: isPending,
+        "aria-pressed": isExpanded,
         children: [
-          expandable ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-4 h-5 flex items-center justify-center shrink-0", children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 text-muted-foreground" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-4 shrink-0" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("shrink-0", isArrayItem ? "text-muted-foreground" : "text-cyan-400"), children: isArrayItem ? name : `"${name}"` }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground shrink-0", children: expandable ? "" : ":" }),
-          expandable ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground", children: [
-            openBracket,
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground/60 text-xs", children: [
-              " ",
-              getItemCount(value),
-              " ",
-              getItemCount(value) === 1 ? "item" : "items",
-              " ",
-              closeBracket
-            ] })
-          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PrimitiveValue, { value }) }),
-          expandable && hasExpandableDescendant(value) && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandCollapseButton, { allExpanded, onClick: handleExpandAll }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton$1, { value })
+          isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsUp, { className: "size-3.5 mr-1" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsDown, { className: "size-3.5 mr-1" }),
+          label
         ]
       }
-    ),
-    expandable && expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pl-4", children: [
-      getEntries(value).map(([key, childValue]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        JsonNode2,
-        {
-          name: key,
-          value: childValue,
-          level: level + 1,
-          defaultExpandDepth: effectiveChildDepth,
-          isArrayItem: dataType === "array"
-        },
-        key
-      )),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground py-0.5 px-1", children: closeBracket })
-    ] }, childResetKey)
-  ] });
-});
-function JsonViewer({
-  data,
-  defaultExpandDepth = 2,
-  className,
-  showCopy = false
-}) {
-  const expandable = isExpandable(data);
-  if (!expandable) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("font-mono text-xs leading-relaxed", className), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(PrimitiveValue, { value: data }),
-      showCopy && /* @__PURE__ */ jsxRuntimeExports.jsx(CopyValueButton, { value: data })
-    ] }) }) });
-  }
-  const dataType = classifyValue(data);
-  const isArray = dataType === "array";
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("font-mono text-xs leading-relaxed", className), children: [
-    showCopy && /* @__PURE__ */ jsxRuntimeExports.jsx(CopyValueButton, { value: data }),
-    getEntries(data).map(([key, childValue]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      JsonNode,
-      {
-        name: key,
-        value: childValue,
-        level: 0,
-        defaultExpandDepth,
-        isArrayItem: isArray
-      },
-      key
-    ))
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: tooltip })
   ] }) });
 }
-function JsonViewerFromString({
-  text,
-  defaultExpandDepth = 2,
-  className
-}) {
+function getJsonExpansionPolicy(_value) {
+  return { depth: Number.POSITIVE_INFINITY };
+}
+function parseJsonText(text) {
   try {
     const parsed = JSON.parse(text);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      JsonViewer,
-      {
-        data: safeJsonValue(parsed),
-        defaultExpandDepth,
-        className
-      }
-    );
+    return { kind: "json", data: safeJsonValue(parsed) };
   } catch {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: cn("font-mono text-xs whitespace-pre-wrap break-words", className), children: text });
+    return { kind: "text" };
   }
 }
+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]
+  );
+  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) {
@@ -1709,6 +1401,88 @@ function TabsContent({
     }
   );
 }
+const LazyCompareDrawer = reactExports.lazy(
+  () => import("./CompareDrawer-ftkJxyk6.mjs").then((m) => ({ default: m.CompareDrawer }))
+);
+const LazyReplayDialog = reactExports.lazy(
+  () => import("./ReplayDialog-DcmE3lj5.mjs").then((m) => ({ default: m.ReplayDialog }))
+);
+const LazyRequestAnatomy = reactExports.lazy(
+  () => import("./RequestAnatomy-rK_LNMdG.mjs").then((m) => ({ default: m.RequestAnatomy }))
+);
+const LazyResponseView = reactExports.lazy(
+  () => import("./ResponseView-CbQ4n-aJ.mjs").then((m) => ({ default: m.ResponseView }))
+);
+const LazyStreamingChunkSequence = reactExports.lazy(
+  () => import("./StreamingChunkSequence-84FZkIzv.mjs").then((m) => ({
+    default: m.StreamingChunkSequence
+  }))
+);
+const LazyJsonViewer = reactExports.lazy(
+  () => import("./json-viewer-B-qpM5xC.mjs").then((m) => ({ default: m.JsonViewer }))
+);
+const LazyJsonViewerFromString = reactExports.lazy(
+  () => import("./json-viewer-B-qpM5xC.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));
@@ -2036,16 +1810,16 @@ function SplitRows({ lines }) {
   )) });
 }
 const DiffView = reactExports.memo(DiffViewInner);
-function formatElapsed$1(ms) {
-  if (ms < 1e3) return `${ms}ms`;
-  return `${(ms / 1e3).toFixed(1)}s`;
-}
 const STATUS_BADGE_CLASSES = {
   success: "bg-emerald-500/15 text-emerald-400 border-emerald-500/25",
   client_error: "bg-amber-500/15 text-amber-400 border-amber-500/25",
-  server_error: "",
+  server_error: "bg-rose-500/15 text-rose-400 border-rose-500/25",
   pending: "bg-muted text-muted-foreground border-border"
 };
+function formatElapsed$1(ms) {
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(1)}s`;
+}
 function CacheTrendIndicator({ trend }) {
   if (trend === null) return null;
   const isUp = trend.direction === "up";
@@ -2066,7 +1840,12 @@ const LogEntryHeader = reactExports.memo(function({
   expanded,
   onToggle,
   responseToolNames = null,
-  cacheTrend = null
+  cacheTrend = null,
+  onReplay,
+  onCopyRequest,
+  requestCopied = false,
+  onToggleRequestExpansion,
+  requestExpansionState = null
 }) {
   const statusCategory = getStatusCategory(log.responseStatus);
   const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
@@ -2076,10 +1855,13 @@ const LogEntryHeader = reactExports.memo(function({
     {
       role: "button",
       tabIndex: 0,
+      "data-nav-id": `log-${log.id}`,
+      "data-nav-action": expanded ? "collapse" : "expand",
       className: cn(
         "flex items-center gap-2 px-3 py-1 cursor-pointer transition-colors",
         "hover:bg-muted/50",
-        "select-none"
+        "select-none",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
       ),
       onClick: onToggle,
       onKeyDown: (e) => {
@@ -2097,34 +1879,20 @@ const LogEntryHeader = reactExports.memo(function({
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogo, { provider: detectProvider(log.model), className: "size-4" }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: log.model })
         ] }),
-        statusCategory !== "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: statusCategory === "server_error" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Badge,
-          {
-            variant: "destructive",
-            className: "text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums",
-            children: log.responseStatus
-          }
-        ) : statusCategory === "pending" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        statusCategory !== "success" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           Badge,
           {
             variant: "outline",
             className: cn(
-              "text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums",
+              "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums gap-1",
               STATUS_BADGE_CLASSES[statusCategory]
             ),
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3 animate-spin" })
-          }
-        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Badge,
-          {
-            variant: "outline",
-            className: cn(
-              "text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums",
-              STATUS_BADGE_CLASSES[statusCategory]
-            ),
-            children: log.responseStatus
+            children: [
+              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" }) : statusCategory === "pending" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3 animate-spin", "aria-label": "Pending" }) : null,
+              log.responseStatus
+            ]
           }
-        ) }),
+        ),
         log.elapsedMs !== null && /* @__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: formatElapsed$1(log.elapsedMs) })
@@ -2213,350 +1981,182 @@ const LogEntryHeader = reactExports.memo(function({
           /* @__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: [
+              requestExpansionState !== null && onToggleRequestExpansion !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "icon",
+                    className: "size-8",
+                    onClick: onToggleRequestExpansion,
+                    disabled: requestExpansionState.isPending,
+                    "aria-pressed": requestExpansionState.isExpanded,
+                    "aria-label": requestExpansionState.isExpanded ? "Collapse all JSON" : "Expand all JSON",
+                    children: requestExpansionState.isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsUp, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsDown, { className: "size-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: requestExpansionState.isExpanded ? "Collapse all JSON nodes" : "Expand all JSON nodes" })
+              ] }),
+              onCopyRequest !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "icon",
+                    className: "size-8",
+                    onClick: onCopyRequest,
+                    "aria-label": "Copy request body",
+                    children: requestCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 text-emerald-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: requestCopied ? "Copied to clipboard" : "Copy request body" })
+              ] }),
+              onReplay !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "icon",
+                    className: "size-8",
+                    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" })
+              ] })
+            ]
+          }
+        ),
         expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" })
       ]
     }
   ) });
 });
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Root$1,
-    {
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      className: cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      ),
-      ...props
-    }
-  );
+function forEachCodePoint(text, visit) {
+  for (const ch of Array.from(text)) {
+    visit(ch);
+  }
 }
-function Collapsible({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root$2, { "data-slot": "collapsible", ...props });
+const CJK_REGEX = /[\u3000-\u9FFF\uAC00-\uD7FF\uF900-\uFAFF\uFF00-\uFFEF\u{1F300}-\u{1FAFF}]/u;
+function estimateTokens(text) {
+  if (text.length === 0) return 0;
+  let cjk = 0;
+  let other = 0;
+  forEachCodePoint(text, (ch) => {
+    if (CJK_REGEX.test(ch)) {
+      cjk += 1;
+    } else {
+      other += 1;
+    }
+  });
+  return Math.ceil(cjk * 1) + Math.ceil(other / 4);
 }
-function CollapsibleTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleTrigger$1, { "data-slot": "collapsible-trigger", ...props });
+function countCharacters(text) {
+  if (text.length === 0) return 0;
+  let n = 0;
+  forEachCodePoint(text, () => {
+    n += 1;
+  });
+  return n;
 }
-function CollapsibleContent({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent$1, { "data-slot": "collapsible-content", ...props });
+function emptyRequestAnalysis(rawBody) {
+  return {
+    parsed: null,
+    comparisonValue: rawBody,
+    messageCount: null,
+    toolCount: null
+  };
 }
-function ScrollArea({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Root$3,
-    {
-      "data-slot": "scroll-area",
-      className: cn("relative", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Viewport$1,
-          {
-            "data-slot": "scroll-area-viewport",
-            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
-            children
+const EMPTY_RESPONSE_ANALYSIS = {
+  parsed: null,
+  toolNames: null
+};
+function contentToText$1(content) {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  const parts = [];
+  for (const block of content) {
+    if (block === null || typeof block !== "object") continue;
+    const b = block;
+    const type = b.type;
+    switch (type) {
+      case "text":
+        if (typeof b.text === "string") parts.push(b.text);
+        break;
+      case "thinking":
+      case "think":
+        if (typeof b.thinking === "string") parts.push(b.thinking);
+        break;
+      case "tool_use": {
+        const name = typeof b.name === "string" ? b.name : "";
+        const input = b.input !== void 0 ? JSON.stringify(b.input) : "";
+        parts.push(`${name} ${input}`.trim());
+        break;
+      }
+      case "tool_result": {
+        const inner = b.content;
+        if (typeof inner === "string") {
+          parts.push(inner);
+        } else if (Array.isArray(inner)) {
+          for (const item of inner) {
+            if (item !== null && typeof item === "object") {
+              const t = item.text;
+              if (typeof t === "string") parts.push(t);
+            }
           }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollBar, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Corner, {})
-      ]
+        }
+        break;
+      }
+      case "image":
+        parts.push("[image]");
+        break;
     }
-  );
-}
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    ScrollAreaScrollbar,
-    {
-      "data-slot": "scroll-area-scrollbar",
-      orientation,
-      className: cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ScrollAreaThumb,
-        {
-          "data-slot": "scroll-area-thumb",
-          className: "bg-border relative flex-1 rounded-full"
-        }
-      )
-    }
-  );
-}
-function assertNever(_value) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
-}
-function SystemReminderBlock({ text }) {
-  const [open, setOpen] = reactExports.useState(false);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsibleTrigger, { className: "flex items-center gap-1.5 py-0.5 cursor-pointer hover:opacity-80 transition-opacity group", children: [
-      open ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 text-muted-foreground" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground text-xs italic select-none opacity-60", children: "[system-reminder]" })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-4 pt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { children: text }) }) }) })
-  ] });
-}
-const THINKING_TAG_REGEX = /<think>([\s\S]*?)<\/think>/gi;
-const THINKING_TAG_REGEX_SINGLE = /<think>([\s\S]*?)<\/think>/i;
-function extractThinkingFromContent(text) {
-  const match = THINKING_TAG_REGEX_SINGLE.exec(text);
-  if (!match || match[1] === void 0) {
-    return { thinking: null, remainingText: text };
-  }
-  const thinking = match[1].trim();
-  const remainingText = text.replace(THINKING_TAG_REGEX, "").trim();
-  return { thinking, remainingText };
-}
-const TextBlock = reactExports.memo(function TextBlock2({ text }) {
-  if (text.includes("<system-reminder>")) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(SystemReminderBlock, { text });
-  }
-  const { thinking, remainingText } = extractThinkingFromContent(text);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-    thinking !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ThinkingBlock, { thinking }),
-    remainingText.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { children: remainingText }) }),
-    thinking === null && remainingText.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "Empty text block" })
-  ] });
-});
-const ThinkingBlock = reactExports.memo(function ThinkingBlock2({
-  thinking
-}) {
-  const [open, setOpen] = reactExports.useState(false);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-l-2 border-purple-500/40 my-1", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsibleTrigger, { className: "flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-purple-500/5 transition-colors rounded-r-sm group", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Brain, { className: "size-3.5 text-purple-400 shrink-0" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-purple-400", children: "Thinking" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Badge,
-        {
-          variant: "ghost",
-          className: "text-[10px] text-muted-foreground px-1.5 py-0 h-4 font-mono",
-          children: [
-            thinking.length.toLocaleString(),
-            " chars"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1" }),
-      open ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 text-muted-foreground" })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "max-h-[60vh]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap font-mono leading-relaxed", children: thinking }) }) }) })
-  ] }) });
-});
-const ToolUseBlock = reactExports.memo(function ToolUseBlock2({
-  name,
-  input
-}) {
-  const [open, setOpen] = reactExports.useState(false);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-l-2 border-blue-500/40 my-1", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsibleTrigger, { className: "flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-blue-500/5 transition-colors rounded-r-sm group", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Terminal, { className: "size-3.5 text-blue-400 shrink-0" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "text-[10px] font-mono px-1.5 py-0 h-4", children: name }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1" }),
-      open ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 text-muted-foreground" })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "max-h-[60vh]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewer, { data: safeJsonValue(input), defaultExpandDepth: 2 }) }) }) })
-  ] }) });
-});
-const ResponseContentBlockRenderer = reactExports.memo(function ResponseContentBlockRenderer2({
-  block
-}) {
-  switch (block.type) {
-    case "text":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(TextBlock, { text: block.text });
-    case "thinking":
-    case "think":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(ThinkingBlock, { thinking: block.thinking });
-    case "tool_use":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(ToolUseBlock, { name: block.name, input: block.input });
-    default:
-      return assertNever();
-  }
-});
-const StructuredResponseViewAnthropic = reactExports.memo(function StructuredResponseViewAnthropic2({
-  response
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "secondary", className: "text-[10px] px-1.5 py-0 h-5 font-mono", children: response.model }),
-      response.stop_reason !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Badge,
-        {
-          variant: "outline",
-          className: "text-[10px] px-1.5 py-0 h-5 font-mono flex items-center gap-1",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(CircleStop, { className: "size-2.5" }),
-            response.stop_reason
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
-          formatTokens(response.usage.input_tokens ?? 0),
-          " in /",
-          " ",
-          formatTokens(response.usage.output_tokens ?? 0),
-          " out"
-        ] }),
-        response.usage.cache_creation_input_tokens !== void 0 && response.usage.cache_creation_input_tokens !== null && response.usage.cache_creation_input_tokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-emerald-400", children: [
-          "Cache +",
-          formatTokens(response.usage.cache_creation_input_tokens)
-        ] }),
-        response.usage.cache_read_input_tokens !== void 0 && response.usage.cache_read_input_tokens !== null && response.usage.cache_read_input_tokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-purple-400", children: [
-          "Cache ~",
-          formatTokens(response.usage.cache_read_input_tokens)
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { className: "opacity-50" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-      response.content.map((block, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(ResponseContentBlockRenderer, { block }, i)),
-      response.content.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "Empty response content" })
-    ] })
-  ] });
-});
-function parseToolArguments(raw) {
-  if (raw === void 0 || raw === "") return {};
-  try {
-    return JSON.parse(raw);
-  } catch {
-    return null;
   }
-}
-function OpenAIToolCallBlock({ call }) {
-  const [open, setOpen] = reactExports.useState(false);
-  const name = call.function.name ?? "(unnamed tool)";
-  const parsed = parseToolArguments(call.function.arguments);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-l-2 border-blue-500/40 my-1", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsibleTrigger, { className: "flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-blue-500/5 transition-colors rounded-r-sm group", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Terminal, { className: "size-3.5 text-blue-400 shrink-0" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "text-[10px] font-mono px-1.5 py-0 h-4", children: name }),
-      call.id !== void 0 && call.id !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] font-mono text-muted-foreground/60 truncate", children: call.id }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1" }),
-      open ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 text-muted-foreground" })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "max-h-[60vh]", children: parsed === null ? (
-      // JSON.parse failed — show the raw string so the user can
-      // still see what the model tried to call.
-      /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words text-rose-300/90", children: call.function.arguments })
-    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewer, { data: safeJsonValue(parsed), defaultExpandDepth: 2 }) }) }) })
-  ] }) });
-}
-const OpenAIResponseView = reactExports.memo(function OpenAIResponseView2({
-  response
-}) {
-  const choice = response.choices[0];
-  const message = choice?.message;
-  const toolCalls = message?.tool_calls ?? [];
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "secondary", className: "text-[10px] px-1.5 py-0 h-5 font-mono", children: response.model }),
-      choice?.finish_reason !== null && choice?.finish_reason !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Badge,
-        {
-          variant: "outline",
-          className: "text-[10px] px-1.5 py-0 h-5 font-mono flex items-center gap-1",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(CircleStop, { className: "size-2.5" }),
-            choice.finish_reason
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
-          formatTokens(response.usage.prompt_tokens ?? 0),
-          " in /",
-          " ",
-          formatTokens(response.usage.completion_tokens ?? 0),
-          " out"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { className: "opacity-50" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-      message?.reasoning_content !== null && message?.reasoning_content !== void 0 && message.reasoning_content.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ThinkingBlock, { thinking: message.reasoning_content }),
-      message?.content !== null && message?.content !== void 0 && message.content.length > 0 && (() => {
-        const hasReasoningField = message.reasoning_content !== null && message.reasoning_content !== void 0 && message.reasoning_content.length > 0;
-        const { thinking, remainingText } = extractThinkingFromContent(message.content);
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          thinking !== null && !hasReasoningField && /* @__PURE__ */ jsxRuntimeExports.jsx(ThinkingBlock, { thinking }),
-          remainingText.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { children: remainingText }) })
-        ] });
-      })(),
-      toolCalls.map((call, i) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: tool_calls is the positionally stable list from the response
-        /* @__PURE__ */ jsxRuntimeExports.jsx(OpenAIToolCallBlock, { call }, call.id ?? `tc-${i}`)
-      )),
-      message?.function_call !== null && message?.function_call !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-blue-500/30 rounded-md p-3 bg-blue-500/5", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-blue-400 font-mono mb-1", children: "function_call" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono text-xs", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-blue-300", children: message.function_call.name }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground", children: [
-            "(",
-            message.function_call.arguments,
-            ")"
-          ] })
-        ] })
-      ] }),
-      (message?.content === null || message?.content === void 0 || message.content.length === 0) && (message?.reasoning_content === null || message?.reasoning_content === void 0 || message.reasoning_content.length === 0) && (message?.function_call === null || message?.function_call === void 0) && toolCalls.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "Empty response content" })
-    ] })
-  ] });
-});
-function isRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function isOpenAIResponse(response) {
-  return isRecord(response) && response.object === "chat.completion";
-}
-function isAnthropicResponse(response) {
-  return isRecord(response) && response.type === "message" && Array.isArray(response.content);
-}
-function formatViewFor(apiFormat, response) {
-  if (apiFormat === "openai" && isOpenAIResponse(response)) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(OpenAIResponseView, { response });
+  return parts.join("\n");
+}
+function systemToText(system) {
+  if (typeof system === "string") return system;
+  if (!Array.isArray(system)) return "";
+  const parts = [];
+  for (const block of system) {
+    if (block !== null && typeof block === "object") {
+      const t = block.text;
+      const type = block.type;
+      if (type === "text" && typeof t === "string") parts.push(t);
+    }
   }
-  if (apiFormat === "anthropic" && isAnthropicResponse(response)) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(StructuredResponseViewAnthropic, { response });
+  return parts.join("\n");
+}
+function toolsToText$1(tools) {
+  if (!Array.isArray(tools)) return "";
+  const parts = [];
+  for (const tool of tools) {
+    if (tool === null || typeof tool !== "object") continue;
+    const t = tool;
+    if (typeof t.name === "string") parts.push(t.name);
+    if (typeof t.description === "string") parts.push(t.description);
+    if (t.input_schema !== void 0) parts.push(JSON.stringify(t.input_schema));
   }
-  return null;
+  return parts.join("\n");
 }
-function emptyRequestAnalysis(rawBody) {
+function segment$1(role, label, text, path) {
   return {
-    parsed: null,
-    comparisonValue: rawBody,
-    messageCount: null,
-    toolCount: null
+    role,
+    label,
+    text,
+    size: estimateTokens(text),
+    characters: countCharacters(text),
+    path
   };
 }
-const EMPTY_RESPONSE_ANALYSIS = {
-  parsed: null,
-  toolNames: null
-};
 const anthropicLogFormatAdapter = {
   format: "anthropic",
   analyzeRequest(rawBody) {
@@ -2589,8 +2189,92 @@ const anthropicLogFormatAdapter = {
     } catch {
       return EMPTY_RESPONSE_ANALYSIS;
     }
+  },
+  anatomySegments(parsed) {
+    if (parsed === null || typeof parsed !== "object") return null;
+    const body = parsed;
+    const segments = [];
+    if (body.system !== void 0) {
+      const text = systemToText(body.system);
+      if (text.length > 0) {
+        segments.push(segment$1("system", "system", text, "/system"));
+      }
+    }
+    if (Array.isArray(body.messages)) {
+      body.messages.forEach((message, index2) => {
+        if (message === null || typeof message !== "object") return;
+        const m = message;
+        const role = m.role === "user" || m.role === "assistant" ? m.role : "user";
+        const text = contentToText$1(m.content);
+        segments.push(segment$1(role, `[${index2}] ${role}`, text, `/messages/${index2}`));
+      });
+    }
+    if (Array.isArray(body.tools) && body.tools.length > 0) {
+      const text = toolsToText$1(body.tools);
+      segments.push(segment$1("tools", "tools", text, "/tools"));
+    }
+    return segments.length > 0 ? segments : null;
   }
 };
+function contentToText(content) {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  const parts = [];
+  for (const block of content) {
+    if (block === null || typeof block !== "object") continue;
+    const b = block;
+    const type = b.type;
+    if (type === "text" && typeof b.text === "string") {
+      parts.push(b.text);
+    } else if (type === "image_url") {
+      parts.push("[image]");
+    }
+  }
+  return parts.join("\n");
+}
+function messageToText(message) {
+  const parts = [];
+  const text = contentToText(message.content);
+  if (text.length > 0) parts.push(text);
+  const reasoning = typeof message.reasoning_content === "string" ? message.reasoning_content : typeof message.thinking === "string" ? message.thinking : typeof message.think === "string" ? message.think : "";
+  if (reasoning.length > 0) parts.push(reasoning);
+  const toolCalls = message.tool_calls;
+  if (Array.isArray(toolCalls)) {
+    for (const call of toolCalls) {
+      if (call === null || typeof call !== "object") continue;
+      const fn = call.function;
+      if (fn === void 0) continue;
+      const name = typeof fn.name === "string" ? fn.name : "";
+      const args = typeof fn.arguments === "string" ? fn.arguments : "";
+      parts.push(`${name} ${args}`.trim());
+    }
+  }
+  return parts.join("\n");
+}
+function toolsToText(tools) {
+  if (!Array.isArray(tools)) return "";
+  const parts = [];
+  for (const tool of tools) {
+    if (tool === null || typeof tool !== "object") continue;
+    const t = tool;
+    const fn = t.function;
+    if (fn === void 0) continue;
+    if (typeof fn.name === "string") parts.push(fn.name);
+    if (typeof fn.description === "string") parts.push(fn.description);
+    if (fn.parameters !== void 0) parts.push(JSON.stringify(fn.parameters));
+  }
+  return parts.join("\n");
+}
+function segment(role, label, text, path) {
+  return {
+    role,
+    label,
+    text,
+    size: estimateTokens(text),
+    characters: countCharacters(text),
+    path
+  };
+}
 const openAILogFormatAdapter = {
   format: "openai",
   analyzeRequest(rawBody) {
@@ -2617,6 +2301,25 @@ const openAILogFormatAdapter = {
       parsed,
       toolNames: toolNames.length > 0 ? toolNames : null
     };
+  },
+  anatomySegments(parsed) {
+    if (parsed === null || typeof parsed !== "object") return null;
+    const body = parsed;
+    const segments = [];
+    if (Array.isArray(body.messages)) {
+      body.messages.forEach((message, index2) => {
+        if (message === null || typeof message !== "object") return;
+        const m = message;
+        const role = m.role === "user" || m.role === "assistant" || m.role === "system" || m.role === "tool" ? m.role : "user";
+        const text = messageToText(m);
+        segments.push(segment(role, `[${index2}] ${role}`, text, `/messages/${index2}`));
+      });
+    }
+    if (Array.isArray(body.tools) && body.tools.length > 0) {
+      const text = toolsToText(body.tools);
+      segments.push(segment("tools", "tools", text, "/tools"));
+    }
+    return segments.length > 0 ? segments : null;
   }
 };
 const unknownLogFormatAdapter = {
@@ -2626,6 +2329,9 @@ const unknownLogFormatAdapter = {
   },
   analyzeResponse() {
     return EMPTY_RESPONSE_ANALYSIS;
+  },
+  anatomySegments() {
+    return null;
   }
 };
 const ADAPTERS = {
@@ -2640,391 +2346,6 @@ function resolveLogFormat(log) {
   const pathFormat = requestFormatForPath(log.path);
   return pathFormat === "unknown" ? log.apiFormat : pathFormat;
 }
-function getStatusClasses(category) {
-  switch (category) {
-    case "success":
-      return "text-emerald-400";
-    case "client_error":
-      return "text-amber-400";
-    case "server_error":
-      return "text-red-400";
-    case "pending":
-      return "text-muted-foreground";
-  }
-}
-function StatusIndicator({ status }) {
-  const category = getStatusCategory(status);
-  const classes = getStatusClasses(category);
-  if (status === null) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground italic", children: "pending" });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn("flex items-center gap-1 text-xs font-mono font-semibold", classes), children: [
-    category === "server_error" && /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3" }),
-    status
-  ] });
-}
-function ErrorResponseView({ text }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-red-500/30 bg-red-500/5 p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs text-red-300 whitespace-pre-wrap font-mono leading-relaxed overflow-auto max-h-[60vh]", children: text }) });
-}
-function MarkdownFallbackView({ text }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { children: text }) });
-}
-const ResponseView = reactExports.memo(function ResponseView2({
-  responseText,
-  responseStatus,
-  streaming,
-  inputTokens,
-  outputTokens,
-  cacheCreationInputTokens,
-  cacheReadInputTokens,
-  apiFormat,
-  error
-}) {
-  const resolvedFormat = apiFormat ?? "unknown";
-  const parsed = reactExports.useMemo(
-    () => getLogFormatAdapter(resolvedFormat).analyzeResponse(responseText).parsed,
-    [resolvedFormat, responseText]
-  );
-  if (responseText === null && error === void 0) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 py-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: responseStatus }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground italic", children: "No response" })
-    ] });
-  }
-  const isHttpError = responseStatus !== null && responseStatus >= 400;
-  if (isHttpError) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: responseStatus }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorResponseView, { text: responseText ?? "" }),
-      error !== void 0 && error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: error })
-      ] })
-    ] });
-  }
-  if (error !== void 0 && error !== null) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: responseStatus }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: error })
-      ] }),
-      responseText !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorResponseView, { text: responseText }) })
-    ] });
-  }
-  if (parsed !== null) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: responseStatus }),
-      formatViewFor(resolvedFormat, parsed)
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: responseStatus }),
-      streaming && (inputTokens !== null || outputTokens !== null) && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
-          inputTokens !== null ? formatTokens(inputTokens) : "—",
-          " in /",
-          " ",
-          outputTokens !== null ? formatTokens(outputTokens) : "—",
-          " out"
-        ] }),
-        cacheCreationInputTokens !== null && cacheCreationInputTokens !== void 0 && cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-emerald-400", children: [
-          "Cache +",
-          formatTokens(cacheCreationInputTokens)
-        ] }),
-        cacheReadInputTokens !== null && cacheReadInputTokens !== void 0 && cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-purple-400", children: [
-          "Cache ~",
-          formatTokens(cacheReadInputTokens)
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownFallbackView, { text: responseText ?? "" })
-  ] });
-});
-const ReplayResultSchema = object({
-  success: boolean(),
-  error: string().optional(),
-  responseStatus: number().optional(),
-  responseText: string().optional(),
-  inputTokens: number().optional(),
-  outputTokens: number().optional(),
-  elapsedMs: number().optional(),
-  streaming: boolean().optional()
-});
-function ReplayDialog({ log, open, onOpenChange }) {
-  const [modifiedBody, setModifiedBody] = reactExports.useState(() => {
-    return log.rawRequestBody ?? "{}";
-  });
-  const [replayResult, setReplayResult] = reactExports.useState(null);
-  const [loading, setLoading] = reactExports.useState(false);
-  const [error, setError] = reactExports.useState(null);
-  async function handleReplay() {
-    setLoading(true);
-    setError(null);
-    setReplayResult(null);
-    try {
-      const res = await fetch(`/api/logs/${log.id}/replay`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ modifiedBody })
-      });
-      const json = await res.json();
-      const parsed = ReplayResultSchema.safeParse(json);
-      if (!parsed.success) {
-        setError("Invalid response from server");
-        setLoading(false);
-        return;
-      }
-      const data = parsed.data;
-      setReplayResult(data);
-      if (!data.success) {
-        setError(data.error ?? "Replay failed");
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Network error");
-    } finally {
-      setLoading(false);
-    }
-  }
-  function handleClose() {
-    setReplayResult(null);
-    setError(null);
-    onOpenChange(false);
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-4xl max-h-[85vh] overflow-auto", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-4" }),
-      "Replay Request #",
-      log.id
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "modified", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "modified", children: "Modified Request" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "original", children: "Original Response" }),
-        replayResult && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "replay", children: "Replay Response" })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsContent, { value: "modified", className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium mb-2 block", children: "Request Body (JSON)" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "textarea",
-              {
-                className: "w-full h-64 p-3 font-mono text-xs bg-muted rounded-md border border-input resize-none focus:outline-none focus:ring-2 focus:ring-ring",
-                value: modifiedBody,
-                onChange: (e) => setModifiedBody(e.target.value),
-                spellCheck: false
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Edit the request body before re-sending to the provider" })
-          ] }) })
-        ] }),
-        error !== null && error !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md", children: error }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            onClick: () => {
-              void handleReplay();
-            },
-            disabled: loading,
-            children: loading ? "Replaying..." : "Replay"
-          }
-        ) }),
-        replayResult && replayResult.success && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "parsed", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ResponseView,
-            {
-              responseText: replayResult.responseText ?? null,
-              responseStatus: replayResult.responseStatus ?? null,
-              streaming: replayResult.streaming ?? false,
-              inputTokens: replayResult.inputTokens ?? null,
-              outputTokens: replayResult.outputTokens ?? null,
-              apiFormat: log.apiFormat
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto", children: replayResult.responseText ?? "No response" }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "original", children: log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "parsed", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ResponseView,
-          {
-            responseText: log.responseText,
-            responseStatus: log.responseStatus,
-            streaming: log.streaming,
-            inputTokens: log.inputTokens,
-            outputTokens: log.outputTokens,
-            cacheCreationInputTokens: log.cacheCreationInputTokens,
-            cacheReadInputTokens: log.cacheReadInputTokens,
-            apiFormat: log.apiFormat
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto", children: log.responseText }) })
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground italic", children: "No original response" }) }),
-      replayResult && replayResult.success && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "replay", children: replayResult.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "parsed", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ResponseView,
-          {
-            responseText: replayResult.responseText ?? null,
-            responseStatus: replayResult.responseStatus ?? null,
-            streaming: replayResult.streaming ?? false,
-            inputTokens: replayResult.inputTokens ?? null,
-            outputTokens: replayResult.outputTokens ?? null,
-            apiFormat: log.apiFormat
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto", children: replayResult.responseText }) })
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground italic", children: "No replay response" }) })
-    ] })
-  ] }) });
-}
-const StreamingChunkSequence = reactExports.memo(function StreamingChunkSequence2({
-  logId,
-  truncated
-}) {
-  const [containerExpanded, setContainerExpanded] = reactExports.useState(false);
-  const [chunkState, setChunkState] = reactExports.useState({ status: "idle" });
-  const [expandedIndices, setExpandedIndices] = reactExports.useState(/* @__PURE__ */ new Set());
-  reactExports.useEffect(() => {
-    if (!containerExpanded || chunkState.status !== "idle") return;
-    let cancelled = false;
-    setChunkState({ status: "loading" });
-    fetch(`/api/logs/${logId}/chunks`).then((res) => {
-      if (!res.ok) {
-        return Promise.reject(new Error("Chunks not found"));
-      }
-      return res.json();
-    }).then((data) => {
-      if (!cancelled) {
-        setChunkState({ status: "success", chunks: data.chunks });
-      }
-    }).catch(() => {
-      if (!cancelled) {
-        setChunkState({ status: "error", message: "Chunk data unavailable" });
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [containerExpanded, logId]);
-  const groups = reactExports.useMemo(() => {
-    if (chunkState.status !== "success") return [];
-    const map = /* @__PURE__ */ new Map();
-    for (const chunk of chunkState.chunks) {
-      const existing = map.get(chunk.index);
-      if (existing) {
-        existing.push(chunk);
-      } else {
-        map.set(chunk.index, [chunk]);
-      }
-    }
-    return Array.from(map.entries()).map(([index, chunks]) => ({ index, chunks })).sort((a, b) => a.index - b.index);
-  }, [chunkState]);
-  const toggleIndex = (index) => {
-    setExpandedIndices((prev) => {
-      const next = new Set(prev);
-      if (next.has(index)) {
-        next.delete(index);
-      } else {
-        next.add(index);
-      }
-      return next;
-    });
-  };
-  function renderBody() {
-    if (chunkState.status === "idle" || chunkState.status === "loading") {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 py-2 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3 animate-spin" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Loading chunks..." })
-      ] });
-    }
-    if (chunkState.status === "error") {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-2 text-xs text-muted-foreground italic", children: chunkState.message });
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-2 space-y-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-[10px] text-muted-foreground font-mono mb-2", children: [
-        groups.length,
-        " index group",
-        groups.length !== 1 ? "s" : "",
-        " available"
-      ] }),
-      groups.map((group) => {
-        const isExpanded = expandedIndices.has(group.index);
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-border bg-background", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "button",
-            {
-              type: "button",
-              className: "flex items-center gap-2 w-full px-2 py-1.5 text-left hover:bg-muted/50 transition-colors cursor-pointer",
-              onClick: () => toggleIndex(group.index),
-              children: [
-                isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[10px] text-muted-foreground font-mono", children: [
-                  "[",
-                  group.index,
-                  "] ",
-                  group.chunks[0]?.type ?? ""
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[10px] text-muted-foreground font-mono", children: [
-                  group.chunks.length,
-                  " chunk",
-                  group.chunks.length !== 1 ? "s" : ""
-                ] })
-              ]
-            }
-          ),
-          isExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2 pb-2 space-y-1", children: group.chunks.map((chunk) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-border bg-muted/20 p-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[10px] text-muted-foreground font-mono", children: [
-                "+",
-                chunk.timestamp,
-                "ms"
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground font-mono", children: chunk.type })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewer, { data: chunk, defaultExpandDepth: 1, showCopy: true })
-          ] }, chunk.index)) })
-        ] }, group.index);
-      })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "button",
-        {
-          type: "button",
-          className: "flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
-          onClick: () => setContainerExpanded((v) => !v),
-          children: [
-            containerExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Raw SSE Events" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "outline", className: "text-[9px] px-1 py-0 h-4 font-mono ml-1", children: [
-              logId,
-              truncated === true ? "+" : ""
-            ] })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Server-Sent Events streaming chunks from the provider" })
-    ] }) }),
-    containerExpanded === true ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-border bg-muted/20 overflow-auto max-h-64", children: renderBody() }) : null
-  ] });
-});
 function shouldShowRawRequestTab(apiFormat, viewMode, strip) {
   return apiFormat === "anthropic" && viewMode === "full" && strip;
 }
@@ -3034,6 +2355,9 @@ function shouldShowHeadersDiffButton(viewMode, hasRawHeaders) {
 function shouldShowRequestDiffButton(apiFormat, viewMode, strip, hasRawRequest) {
   return apiFormat === "anthropic" && viewMode === "full" && strip && hasRawRequest;
 }
+function TabFallback() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-1", "aria-hidden": "true" });
+}
 function CopyButton({
   text,
   label,
@@ -3041,39 +2365,39 @@ function CopyButton({
   onCopy
 }) {
   if (text === null) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: onCopy,
-      className: "flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded hover:bg-muted",
-      children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3 text-green-500" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-green-500", children: "Copied!" })
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: label })
-      ] })
-    }
-  );
-}
-function DiffToggleButton({
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "h-8 text-xs",
+        onClick: onCopy,
+        "aria-label": label,
+        children: [
+          copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 mr-1 text-emerald-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5 mr-1" }),
+          copied ? "Copied!" : label
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: copied ? "Copied to clipboard" : label })
+  ] });
+}
+function DiffToggleButton({
   active,
   onClick
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
+      Button,
       {
-        type: "button",
+        variant: active ? "default" : "outline",
+        size: "sm",
+        className: "h-8 text-xs",
         onClick,
         "aria-pressed": active,
-        className: cn(
-          "flex items-center gap-1.5 text-xs px-2 py-1 rounded transition-colors",
-          active ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-muted"
-        ),
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(GitCompareArrows, { className: "size-3" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(GitCompareArrows, { className: "size-3.5 mr-1" }),
           active ? "Showing diff" : "Diff with Raw"
         ]
       }
@@ -3135,6 +2459,8 @@ const LogEntry = reactExports.memo(function({
   const [headersDiff, setHeadersDiff] = reactExports.useState(false);
   const [requestDiff, setRequestDiff] = reactExports.useState(false);
   const [activeTab, setActiveTab] = reactExports.useState("request");
+  const [expandToPath, setExpandToPath] = reactExports.useState(null);
+  const requestJsonRef = reactExports.useRef(null);
   const resolvedFormat = resolveLogFormat(log);
   const adapter = getLogFormatAdapter(resolvedFormat);
   const requestAnalysis = reactExports.useMemo(
@@ -3155,6 +2481,23 @@ const LogEntry = reactExports.memo(function({
   const requestCopy = useCopyFeedback(displayedRequestBody);
   const rawRequestCopy = useCopyFeedback(log.rawRequestBody);
   const responseCopy = useCopyFeedback(log.responseText);
+  const requestExpansion = useJsonBulkExpansion(displayedRequestBody);
+  const rawRequestExpansion = useJsonBulkExpansion(log.rawRequestBody);
+  const anatomySegments = reactExports.useMemo(
+    () => requestExpansion.parsedData !== null ? adapter.anatomySegments(requestExpansion.parsedData) : null,
+    [adapter, requestExpansion.parsedData]
+  );
+  const anatomyPaths = reactExports.useMemo(() => {
+    if (anatomySegments === null) return void 0;
+    return new Set(anatomySegments.map((s) => s.path));
+  }, [anatomySegments]);
+  const jumpToAnatomySegment = useAnatomyJump({
+    containerRef: requestJsonRef,
+    setExpandToPath,
+    ensureTabActive: () => {
+      if (activeTab !== "request") setActiveTab("request");
+    }
+  });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border rounded-lg mb-1 overflow-hidden", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3166,7 +2509,19 @@ const LogEntry = reactExports.memo(function({
           expanded,
           onToggle: () => setExpanded(!expanded),
           responseToolNames: responseAnalysis.toolNames,
-          cacheTrend
+          cacheTrend,
+          onReplay: onCompareWithPrevious === void 0 ? void 0 : () => {
+            setReplayOpen(true);
+          },
+          onCopyRequest: displayedRequestBody === null ? void 0 : (e) => {
+            requestCopy.copy(e);
+          },
+          requestCopied: requestCopy.copied,
+          onToggleRequestExpansion: requestExpansion.toggle,
+          requestExpansionState: requestExpansion.policy === null ? null : {
+            isExpanded: requestExpansion.isExpanded,
+            isPending: requestExpansion.isPending
+          }
         }
       ),
       expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [
@@ -3175,23 +2530,47 @@ const LogEntry = reactExports.memo(function({
           viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "headers", children: "Headers" }),
           shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw-request", children: "Raw Request" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "request", children: "Request" }),
+          anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "anatomy", children: "Anatomy" }),
           viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" })
         ] }),
-        shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CopyButton,
+        shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              JsonExpansionButton,
+              {
+                policy: rawRequestExpansion.policy,
+                isExpanded: rawRequestExpansion.isExpanded,
+                isPending: rawRequestExpansion.isPending,
+                onToggle: rawRequestExpansion.toggle
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              CopyButton,
+              {
+                text: log.rawRequestBody,
+                label: "Copy",
+                copied: rawRequestCopy.copied,
+                onCopy: rawRequestCopy.copy
+              }
+            )
+          ] }),
+          log.rawRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : rawRequestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LazyJsonViewer,
             {
-              text: log.rawRequestBody,
-              label: "Copy Raw Request",
-              copied: rawRequestCopy.copied,
-              onCopy: rawRequestCopy.copy
+              data: rawRequestExpansion.parsedData,
+              bulkDepth: rawRequestExpansion.bulkDepth,
+              bulkRevision: rawRequestExpansion.bulkRevision
             }
-          ) }),
-          log.rawRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: log.rawRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
+          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words", children: log.rawRequestBody })
         ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3", children: [
+          (shouldShowRequestDiffButton(
+            resolvedFormat,
+            viewMode,
+            strip,
+            log.rawRequestBody !== null
+          ) || onCompareWithPrevious !== void 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
             shouldShowRequestDiffButton(
               resolvedFormat,
               viewMode,
@@ -3213,7 +2592,7 @@ const LogEntry = reactExports.memo(function({
                 {
                   variant: "outline",
                   size: "sm",
-                  className: "h-7 text-xs",
+                  className: "h-8 text-xs",
                   onClick: (e) => {
                     e.stopPropagation();
                     onCompareWithPrevious(log);
@@ -3225,35 +2604,7 @@ const LogEntry = reactExports.memo(function({
                 }
               ) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Compare this request with the immediately preceding one" })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                Button,
-                {
-                  variant: "outline",
-                  size: "sm",
-                  className: "h-7 text-xs",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setReplayOpen(true);
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-3 mr-1" }),
-                    "Replay"
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Re-send this request to the provider" })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              CopyButton,
-              {
-                text: displayedRequestBody,
-                label: "Copy Request",
-                copied: requestCopy.copied,
-                onCopy: requestCopy.copy
-              }
-            )
+            ] })
           ] }),
           requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             RequestDiffContent,
@@ -3262,9 +2613,27 @@ const LogEntry = reactExports.memo(function({
               displayedBody: displayedRequestBody,
               emptyLabel: "No transformation applied — raw and sent request bodies are identical."
             }
-          ) : displayedRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: displayedRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
+          ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: requestJsonRef, children: displayedRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : requestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LazyJsonViewer,
+            {
+              data: requestExpansion.parsedData,
+              bulkDepth: requestExpansion.bulkDepth,
+              bulkRevision: requestExpansion.bulkRevision,
+              anatomyPaths,
+              expandToPath
+            }
+          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words", children: displayedRequestBody }) })
         ] }) }),
-        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: activeTab === "headers" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
+        anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "anatomy", children: activeTab === "anatomy" && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          LazyRequestAnatomy,
+          {
+            parsed: null,
+            inputTokens: log.inputTokens ?? null,
+            segments: anatomySegments,
+            onSegmentActivate: jumpToAnatomySegment
+          }
+        ) }) }),
+        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: activeTab === "headers" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end gap-2 mb-2", children: shouldShowHeadersDiffButton(
             viewMode,
             log.rawHeaders !== void 0 && Object.keys(log.rawHeaders).length > 0
@@ -3293,14 +2662,14 @@ const LogEntry = reactExports.memo(function({
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
           ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No headers captured" })
         ] }) }),
-        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: activeTab === "raw-headers" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.rawHeaders).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: activeTab === "raw-headers" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.rawHeaders).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
             key,
             ":"
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
         ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No raw headers captured" }) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: activeTab === "raw" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3 space-y-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: activeTab === "raw" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3 space-y-3", children: [
           log.error !== void 0 && log.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: log.error })
@@ -3309,22 +2678,22 @@ const LogEntry = reactExports.memo(function({
             CopyButton,
             {
               text: log.responseText,
-              label: "Copy Response",
+              label: "Copy",
               copied: responseCopy.copied,
               onCopy: responseCopy.copy
             }
           ) }),
-          log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: log.responseText, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
-          log.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            StreamingChunkSequence,
+          log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyJsonViewerFromString, { text: log.responseText, defaultExpandDepth: 0 }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
+          log.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LazyStreamingChunkSequence,
             {
               logId: log.id,
               truncated: log.streamingChunksPath !== null
             }
-          )
+          ) })
         ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: activeTab === "parsed" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ResponseView,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: activeTab === "parsed" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          LazyResponseView,
           {
             responseText: log.responseText,
             responseStatus: log.responseStatus,
@@ -3336,10 +2705,10 @@ const LogEntry = reactExports.memo(function({
             apiFormat: resolvedFormat,
             error: log.error
           }
-        ) }) })
+        ) }) }) })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ReplayDialog, { log, open: replayOpen, onOpenChange: setReplayOpen })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyReplayDialog, { log, open: replayOpen, onOpenChange: setReplayOpen }) })
   ] });
 });
 function ThreadConnector({
@@ -3347,13 +2716,16 @@ function ThreadConnector({
   isPending,
   isFirst,
   isTurnStart,
+  isOnlyEntry = false,
   crabIndex = 0,
   collapsible = false,
   onToggle
 }) {
   const isBoundary = stopReason === "end_turn" || stopReason === "stop";
+  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,
@@ -3371,7 +2743,16 @@ function ThreadConnector({
   } : {};
   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" }) }),
-    isBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    isFusedBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: "Start and end of turn", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FusedCrab,
+      {
+        className: cn(
+          "size-3.5 text-[#80FF00]",
+          "animate-crab-settle",
+          "drop-shadow-[0_0_4px_rgba(128,255,0,0.5)]"
+        )
+      }
+    ) }) : isBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
         title: stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)",
@@ -3408,6 +2789,43 @@ function ThreadConnector({
     ) })
   ] });
 }
+function shouldRenderConversationContent(standalone, expanded) {
+  return standalone || expanded;
+}
+function isTurnCollapsible(entryCount, isComplete, isPending) {
+  return entryCount > 1 && isComplete && !isPending;
+}
+function buildTurnGroups(logs) {
+  const groups = [];
+  let entries = [];
+  let turnIndex = 0;
+  for (const log of logs) {
+    entries.push({ log, stopReason: extractStopReason(log) });
+    const current = entries[entries.length - 1];
+    if (current !== void 0 && isTurnBoundary(current.stopReason)) {
+      groups.push({ entries, turnIndex });
+      entries = [];
+      turnIndex += 1;
+    }
+  }
+  if (entries.length > 0) groups.push({ entries, turnIndex });
+  return groups;
+}
+function buildValidPredecessors(groups) {
+  const predecessors = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    for (let index2 = 1; index2 < group.logs.length; index2 += 1) {
+      const current = group.logs[index2];
+      const previous = group.logs[index2 - 1];
+      if (current === void 0 || previous === void 0) continue;
+      const currentFormat = resolveLogFormat(current);
+      const previousFormat = resolveLogFormat(previous);
+      if (currentFormat === "unknown" || currentFormat !== previousFormat) continue;
+      predecessors.set(current.id, previous);
+    }
+  }
+  return predecessors;
+}
 function formatElapsed(ms) {
   if (ms < 1e3) return `${ms}ms`;
   return `${(ms / 1e3).toFixed(1)}s`;
@@ -3425,15 +2843,18 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
   const lastStop = entries[lastIdx]?.stopReason ?? null;
   const isComplete = lastStop !== null ? isTurnBoundary(lastStop) : false;
   const isPending = entries[lastIdx]?.log.responseStatus === null;
-  const collapsible = isComplete && !isPending;
+  const isSingleLog = entries.length === 1;
+  const collapsible = isTurnCollapsible(entries.length, isComplete, isPending);
   const [collapsed, setCollapsed] = reactExports.useState(false);
-  const prevCompleteRef = reactExports.useRef(isComplete);
+  const prevCompleteRef = reactExports.useRef(false);
   reactExports.useEffect(() => {
-    if (isComplete && !prevCompleteRef.current) {
+    if (!collapsible) {
+      setCollapsed(false);
+    } else if (isComplete && !prevCompleteRef.current) {
       setCollapsed(true);
     }
     prevCompleteRef.current = isComplete;
-  }, [isComplete]);
+  }, [collapsible, isComplete]);
   const toggleCollapse = reactExports.useCallback(() => {
     if (collapsible) setCollapsed((prev) => !prev);
   }, [collapsible]);
@@ -3498,129 +2919,137 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
       ref: containerRef,
       className: cn("border rounded-lg", isPending ? "border-amber-500/10" : "border-transparent"),
       children: collapsed ? (
-        /* ---- Collapsed: dual-crab + summary ---- */
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch", children: [
-          /* @__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,
+        /* ---- Collapsed: dual-crab (+ summary card for multi-log turns) ---- */
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            "data-nav-id": `turn-collapsed-${entries[0]?.log.id ?? turnIndex}`,
+            "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",
                   {
-                    className: cn(
-                      "size-3.5 text-emerald-400",
-                      "animate-crab-appear",
-                      "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]"
+                    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-emerald-400",
+                          "animate-crab-appear drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]"
+                        )
+                      }
                     )
                   }
-                )
-              }
-            ),
-            /* @__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,
+                ),
+                /* @__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",
                   {
-                    className: cn(
-                      "size-3.5 text-amber-400",
-                      "animate-crab-settle",
-                      "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]"
+                    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)]"
+                        )
+                      }
                     )
                   }
                 )
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              className: cn(
-                "flex-1 min-w-0 mb-0.5 rounded-lg border border-border py-1 px-3 flex items-center gap-3 text-xs cursor-pointer",
-                bgClass
-              ),
-              onClick: toggleCollapse,
-              role: "button",
-              tabIndex: 0,
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  toggleCollapse();
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-400/80 font-mono font-semibold tabular-nums shrink-0", children: [
-                  "#",
-                  entries[0]?.log.id ?? "?",
-                  " ~ #",
-                  entries[lastIdx]?.log.id ?? "?"
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground shrink-0", children: [
-                  entries.length,
-                  " request",
-                  entries.length > 1 ? "s" : ""
-                ] }),
-                uniqueProviders.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center gap-0.5 shrink-0", children: uniqueProviders.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogo, { provider: p, className: "size-4" }, p)) }),
-                aggregate.hasElapsed && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground shrink-0", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed(aggregate.totalElapsed) })
-                ] }),
-                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)
+              ] }),
+              entries.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex-1 min-w-0 mb-0.5 rounded-lg border border-border py-1 px-3 flex items-center gap-3 text-xs",
+                    bgClass
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-400/80 font-mono font-semibold tabular-nums shrink-0", children: [
+                      "#",
+                      entries[0]?.log.id ?? "?",
+                      " ~ #",
+                      entries[lastIdx]?.log.id ?? "?"
                     ] }),
-                    " / ",
-                    /* @__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(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" })
-              ]
-            }
-          )
-        ] })
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground shrink-0", children: [
+                      entries.length,
+                      " request",
+                      entries.length > 1 ? "s" : ""
+                    ] }),
+                    uniqueProviders.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center gap-0.5 shrink-0", children: uniqueProviders.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogo, { provider: p, className: "size-4" }, p)) }),
+                    aggregate.hasElapsed && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground shrink-0", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed(aggregate.totalElapsed) })
+                    ] }),
+                    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(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
       ) : (
         /* ---- Expanded: full entries ---- */
         entries.map((entry, visibleIdx) => {
           const { log, stopReason: reason } = entry;
           const isTurnStart = visibleIdx === 0;
           return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch", children: [
+            isTurnStart ? /* @__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.jsx("div", { className: "w-5 shrink-0" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               ThreadConnector,
               {
@@ -3628,8 +3057,9 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                 isPending: log.responseStatus === null,
                 isFirst: visibleIdx === 0,
                 isTurnStart,
+                isOnlyEntry: isSingleLog,
                 crabIndex: log.id % 12,
-                collapsible: collapsible && entries.length > 1 && isTurnStart,
+                collapsible: collapsible && isTurnStart,
                 onToggle: toggleCollapse
               }
             ),
@@ -3649,40 +3079,6 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
     }
   );
 });
-function shouldRenderConversationContent(standalone, expanded) {
-  return standalone || expanded;
-}
-function buildTurnGroups(logs) {
-  const groups = [];
-  let entries = [];
-  let turnIndex = 0;
-  for (const log of logs) {
-    entries.push({ log, stopReason: extractStopReason(log) });
-    const current = entries[entries.length - 1];
-    if (current !== void 0 && isTurnBoundary(current.stopReason)) {
-      groups.push({ entries, turnIndex });
-      entries = [];
-      turnIndex += 1;
-    }
-  }
-  if (entries.length > 0) groups.push({ entries, turnIndex });
-  return groups;
-}
-function buildValidPredecessors(groups) {
-  const predecessors = /* @__PURE__ */ new Map();
-  for (const group of groups) {
-    for (let index = 1; index < group.logs.length; index += 1) {
-      const current = group.logs[index];
-      const previous = group.logs[index - 1];
-      if (current === void 0 || previous === void 0) continue;
-      const currentFormat = resolveLogFormat(current);
-      const previousFormat = resolveLogFormat(previous);
-      if (currentFormat === "unknown" || currentFormat !== previousFormat) continue;
-      predecessors.set(current.id, previous);
-    }
-  }
-  return predecessors;
-}
 function computeStats(logs) {
   let totalInput = 0;
   let totalOutput = 0;
@@ -3729,7 +3125,7 @@ const ConversationGroup = reactExports.memo(function({
         onClear: () => onClearGroup(group.logs.map((l) => l.id))
       }
     ),
-    shouldRenderConversationContent(standalone, expanded) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-[70vh] overflow-y-auto", children: turnGroups.map((tg) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    shouldRenderConversationContent(standalone, expanded) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: turnGroups.map((tg) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       TurnGroup,
       {
         entries: tg.entries,
@@ -4031,13 +3427,13 @@ function ImportWizardDialog({
       scan();
     }
   }, [open, scan]);
-  const toggleProvider = reactExports.useCallback((index) => {
+  const toggleProvider = reactExports.useCallback((index2) => {
     setSelected((prev) => {
       const next = new Set(prev);
-      if (next.has(index)) {
-        next.delete(index);
+      if (next.has(index2)) {
+        next.delete(index2);
       } else {
-        next.add(index);
+        next.add(index2);
       }
       return next;
     });
@@ -4562,10 +3958,10 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
   const modelRowRefs = reactExports.useRef([]);
   reactExports.useEffect(() => {
     if (openModelDropdown === null) return;
-    const index = openModelDropdown;
+    const index2 = openModelDropdown;
     function handleClick(e) {
       if (!(e.target instanceof Node)) return;
-      const ref = modelRowRefs.current[index];
+      const ref = modelRowRefs.current[index2];
       if (ref !== null && ref !== void 0 && !ref.contains(e.target)) {
         setOpenModelDropdown(null);
       }
@@ -5507,968 +4903,240 @@ function SettingsDialog() {
               isLoading,
               externalTestResults: testResults,
               externalTestingProviders: testingProviders,
-              externalTestingTimeLeft: testingTimeLeft,
-              onProvidersMutate: () => {
-                return mutate();
-              },
-              onTestResultsChange: handleTestResultsChange,
-              onTestingProvidersChange: handleTestingProvidersChange,
-              onTestingTimeLeftChange: handleTestingTimeLeftChange
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "proxy", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProxySettingsTab, {}) })
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function ProxySettingsTab() {
-  const { strip, isLoading, setStrip } = useStripConfig();
-  const [error, setError] = reactExports.useState(null);
-  const [pending, setPending] = reactExports.useState(false);
-  const handleToggle = reactExports.useCallback(
-    async (next) => {
-      setError(null);
-      setPending(true);
-      try {
-        await setStrip(next);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : String(err));
-      } finally {
-        setPending(false);
-      }
-    },
-    [setStrip]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold", children: "Claude Code billing header" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground", children: [
-        "When enabled, the proxy strips the synthetic ",
-        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "x-anthropic-billing-header" }),
-        " text block that Claude Code prepends to the system prompt before forwarding to upstream. Improves prefix-cache hit rates against third-party upstreams. The default at startup is controlled by the ",
-        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "LLM_INSPECTOR_STRIP_CLAUDE_CODE_BILLING_HEADER" }),
-        " environment variable; your choice is persisted to ",
-        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "config.json" }),
-        " and overrides the env var for subsequent requests."
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          type: "checkbox",
-          role: "switch",
-          checked: strip,
-          disabled: isLoading || pending,
-          onChange: (e) => {
-            void handleToggle(e.currentTarget.checked);
-          },
-          className: "size-4 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: isLoading ? "Loading…" : strip ? "Stripping enabled" : "Stripping disabled" })
-    ] }),
-    error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-destructive", children: [
-      "Failed to save: ",
-      error
-    ] })
-  ] });
-}
-function computeCacheTrends(groups) {
-  const result = /* @__PURE__ */ new Map();
-  for (const group of groups) {
-    const logs = group.logs;
-    for (let i = 1; i < logs.length; i++) {
-      const prev = logs[i - 1];
-      const curr = logs[i];
-      if (prev === void 0 || curr === void 0) continue;
-      result.set(curr.id, {
-        creation: compareField(prev.cacheCreationInputTokens, curr.cacheCreationInputTokens),
-        read: compareField(prev.cacheReadInputTokens, curr.cacheReadInputTokens)
-      });
-    }
-  }
-  return result;
-}
-function compareField(previous, current) {
-  if (current === null) return null;
-  if (previous === null) return null;
-  if (current > previous) return { direction: "up", delta: current - previous };
-  if (current < previous) return { direction: "down", delta: previous - current };
-  return null;
-}
-const ROOT_PATH = "";
-function formatPath(segments) {
-  if (segments.length === 0) return ROOT_PATH;
-  let out = "";
-  for (let i = 0; i < segments.length; i++) {
-    const seg = segments[i];
-    if (seg === void 0) continue;
-    if (typeof seg === "number") {
-      out += `[${seg}]`;
-    } else if (i === 0) {
-      out += seg;
-    } else {
-      out += `.${seg}`;
-    }
-  }
-  return out;
-}
-function isPlainObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function normalizeRequest(raw) {
-  if (typeof raw === "string") {
-    try {
-      return toNode(JSON.parse(raw));
-    } catch {
-      return { kind: "primitive", value: raw };
-    }
-  }
-  return toNode(raw);
-}
-function toNode(value) {
-  if (value === null) return { kind: "primitive", value: null };
-  if (typeof value === "string") return { kind: "primitive", value };
-  if (typeof value === "number") return { kind: "primitive", value };
-  if (typeof value === "boolean") return { kind: "primitive", value };
-  if (Array.isArray(value)) {
-    return { kind: "array", value: value.map((v) => toNode(v)) };
-  }
-  if (isPlainObject(value)) {
-    const out = {};
-    for (const k of Object.keys(value).sort()) {
-      out[k] = toNode(value[k]);
-    }
-    return { kind: "object", value: out };
-  }
-  return { kind: "primitive", value: null };
-}
-function diffTrees(left, right) {
-  const ops = [];
-  walk([], left, right, ops);
-  return ops;
-}
-function walk(segments, left, right, out) {
-  const path = formatPath(segments);
-  if (nodeEqual(left, right)) {
-    out.push({ kind: "equal", path, value: left });
-    return;
-  }
-  if (left.kind !== right.kind) {
-    out.push({ kind: "changed", path, left, right });
-    return;
-  }
-  if (left.kind === "primitive" && right.kind === "primitive") {
-    out.push({ kind: "changed", path, left, right });
-    return;
-  }
-  if (left.kind === "object" && right.kind === "object") {
-    const leftKeys = Object.keys(left.value);
-    const rightKeys = Object.keys(right.value);
-    const rightKeySet = new Set(rightKeys);
-    for (const k of leftKeys) {
-      const lChild = left.value[k];
-      if (lChild === void 0) continue;
-      if (!rightKeySet.has(k)) {
-        out.push({
-          kind: "removed",
-          path: formatPath([...segments, k]),
-          value: lChild
-        });
-      } else {
-        const rChild = right.value[k];
-        if (rChild === void 0) continue;
-        walk([...segments, k], lChild, rChild, out);
-      }
-    }
-    for (const k of rightKeys) {
-      if (leftKeys.includes(k)) continue;
-      const rChild = right.value[k];
-      if (rChild === void 0) continue;
-      out.push({
-        kind: "added",
-        path: formatPath([...segments, k]),
-        value: rChild
-      });
-    }
-    return;
-  }
-  if (left.kind === "array" && right.kind === "array") {
-    const minLen = Math.min(left.value.length, right.value.length);
-    for (let i = 0; i < minLen; i++) {
-      const lChild = left.value[i];
-      const rChild = right.value[i];
-      if (lChild === void 0 || rChild === void 0) continue;
-      walk([...segments, i], lChild, rChild, out);
-    }
-    for (let i = minLen; i < right.value.length; i++) {
-      const rChild = right.value[i];
-      if (rChild === void 0) continue;
-      out.push({
-        kind: "added",
-        path: formatPath([...segments, i]),
-        value: rChild
-      });
-    }
-    for (let i = minLen; i < left.value.length; i++) {
-      const lChild = left.value[i];
-      if (lChild === void 0) continue;
-      out.push({
-        kind: "removed",
-        path: formatPath([...segments, i]),
-        value: lChild
-      });
-    }
-  }
-}
-function nodeEqual(a, b) {
-  if (a.kind !== b.kind) return false;
-  if (a.kind === "primitive" && b.kind === "primitive") {
-    return a.value === b.value;
-  }
-  if (a.kind === "array" && b.kind === "array") {
-    if (a.value.length !== b.value.length) return false;
-    for (let i = 0; i < a.value.length; i++) {
-      const ai = a.value[i];
-      const bi = b.value[i];
-      if (ai === void 0 || bi === void 0) return false;
-      if (!nodeEqual(ai, bi)) return false;
-    }
-    return true;
-  }
-  if (a.kind === "object" && b.kind === "object") {
-    const aKeys = Object.keys(a.value);
-    const bKeys = Object.keys(b.value);
-    if (aKeys.length !== bKeys.length) return false;
-    for (const k of aKeys) {
-      const av = a.value[k];
-      const bv = b.value[k];
-      if (av === void 0 || bv === void 0) return false;
-      if (!nodeEqual(av, bv)) return false;
-    }
-    return true;
-  }
-  return false;
-}
-function previewNode(node, maxLen = 80) {
-  let s;
-  switch (node.kind) {
-    case "primitive":
-      s = node.value === null ? "null" : JSON.stringify(node.value);
-      break;
-    case "array":
-      s = `[… ${node.value.length} items]`;
-      break;
-    case "object":
-      s = `{… ${Object.keys(node.value).length} keys}`;
-      break;
-  }
-  if (s.length > maxLen) s = `${s.slice(0, maxLen - 1)}…`;
-  return s;
-}
-function nodeToJsonString(node, indent = 2) {
-  return JSON.stringify(nodeToJsonValue(node), null, indent);
-}
-function nodeToJsonValue(node) {
-  switch (node.kind) {
-    case "primitive":
-      return node.value;
-    case "array":
-      return node.value.map(nodeToJsonValue);
-    case "object": {
-      const out = {};
-      for (const [k, v] of Object.entries(node.value)) {
-        out[k] = nodeToJsonValue(v);
-      }
-      return out;
-    }
-  }
-}
-function parentPath(path) {
-  if (path === "") return "";
-  for (let i = path.length - 1; i >= 0; i--) {
-    const ch = path[i];
-    if (ch === "." || ch === "[") {
-      return path.substring(0, i);
-    }
-  }
-  return "";
-}
-function isDeepEqual(op) {
-  return op.kind === "equal" && (op.value.kind === "object" || op.value.kind === "array");
-}
-function groupContiguousEquals(ops) {
-  const out = [];
-  let i = 0;
-  while (i < ops.length) {
-    const op = ops[i];
-    if (op !== void 0 && isDeepEqual(op)) {
-      const startParent = parentPath(op.path);
-      let j = i + 1;
-      while (j < ops.length) {
-        const next = ops[j];
-        if (next === void 0) break;
-        if (!isDeepEqual(next)) break;
-        if (parentPath(next.path) !== startParent) break;
-        j++;
-      }
-      if (j - i > 1) {
-        const equalOps = [];
-        for (let k = i; k < j; k++) {
-          const eop = ops[k];
-          if (eop !== void 0 && eop.kind === "equal") {
-            equalOps.push(eop);
-          }
-        }
-        out.push({ kind: "equal-run", ops: equalOps });
-        i = j;
-        continue;
-      }
-    }
-    if (op !== void 0) {
-      out.push({ kind: "single", op });
-    }
-    i++;
-  }
-  return out;
-}
-const KIND_VISUAL = {
-  added: {
-    icon: Plus,
-    accent: "text-emerald-600 dark:text-emerald-400",
-    bg: "bg-emerald-500/5 hover:bg-emerald-500/10",
-    border: "border-l-emerald-500",
-    label: "ADDED"
-  },
-  removed: {
-    icon: Minus,
-    accent: "text-rose-600 dark:text-rose-400",
-    bg: "bg-rose-500/5 hover:bg-rose-500/10",
-    border: "border-l-rose-500",
-    label: "REMOVED"
-  },
-  changed: {
-    icon: Pencil,
-    accent: "text-amber-600 dark:text-amber-400",
-    bg: "bg-amber-500/5 hover:bg-amber-500/10",
-    border: "border-l-amber-500",
-    label: "CHANGED"
-  },
-  equal: {
-    icon: Equal,
-    accent: "text-muted-foreground/70",
-    bg: "bg-muted/20 hover:bg-muted/30",
-    border: "border-l-muted-foreground/20",
-    label: "EQUAL"
-  }
-};
-function EqualRunRow({
-  ops,
-  expanded,
-  onToggle
-}) {
-  const first = ops[0];
-  const last = ops[ops.length - 1];
-  if (first === void 0 || last === void 0) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground/40 text-xs", children: "—" });
-  }
-  const firstPath = first.path;
-  const lastPath = last.path;
-  const label = ops.length === 1 ? firstPath : `${firstPath} … ${lastPath}`;
-  const summary = first.value.kind === "array" ? `${ops.length} equal arrays` : first.value.kind === "object" ? `${ops.length} equal objects` : "equal";
-  const v = KIND_VISUAL.equal;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("border-l-4 rounded-sm", v.border, v.bg), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: onToggle,
-        className: "w-full text-left flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground cursor-pointer",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ChevronRight,
-            {
-              className: cn("size-3 transition-transform shrink-0", expanded && "rotate-90")
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(v.icon, { className: cn("size-3 shrink-0", v.accent) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono truncate flex-1", title: `${firstPath} … ${lastPath}`, children: label }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("text-[10px] uppercase tracking-wider shrink-0", v.accent), children: v.label }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground/60 shrink-0", children: [
-            "(",
-            summary,
-            ")"
-          ] })
-        ]
-      }
-    ),
-    expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-5 mt-1 mb-2 space-y-2 pr-2", children: ops.map((op) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border/50 rounded p-2 bg-muted/20", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-1", children: op.path }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: nodeToJsonString(op.value), defaultExpandDepth: 2 })
-    ] }, op.path)) })
-  ] });
-}
-function UnifiedOpRow({
-  op,
-  idx,
-  copiedPath,
-  onCopyPath,
-  expanded,
-  onToggle
-}) {
-  const v = KIND_VISUAL[op.kind];
-  const Icon2 = v.icon;
-  const isExpandable2 = op.kind === "added" || op.kind === "removed" ? op.value.kind === "object" || op.value.kind === "array" : op.kind === "changed" ? op.left.kind === "object" || op.left.kind === "array" || op.right.kind === "object" || op.right.kind === "array" : false;
-  const preview = op.kind === "changed" ? [
-    {
-      text: previewNode(op.left, 400),
-      tone: "text-rose-700 dark:text-rose-300 line-through"
-    },
-    { text: previewNode(op.right, 400), tone: "text-emerald-700 dark:text-emerald-300" }
-  ] : op.kind === "removed" ? [
-    {
-      text: previewNode(op.value, 400),
-      tone: "text-rose-700 dark:text-rose-300 line-through"
-    }
-  ] : op.kind === "added" ? [{ text: previewNode(op.value, 400), tone: "text-emerald-700 dark:text-emerald-300" }] : [{ text: previewNode(op.value, 400), tone: "text-muted-foreground" }];
-  const justCopied = copiedPath === op.path && op.path !== "";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      "data-diff-idx": idx,
-      "data-diff-kind": op.kind,
-      className: cn("border-l-4 rounded-sm px-3 py-2 my-0.5 transition-colors", v.border, v.bg),
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: onToggle,
-            disabled: !isExpandable2,
-            className: cn(
-              "w-full flex items-center gap-2 text-xs text-left rounded-sm",
-              isExpandable2 ? "cursor-pointer" : "cursor-default"
-            ),
-            "aria-expanded": isExpandable2 ? expanded : void 0,
-            "aria-label": isExpandable2 ? expanded ? `Collapse ${op.path || "root"}` : `Expand ${op.path || "root"}` : void 0,
-            children: [
-              isExpandable2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                ChevronRight,
-                {
-                  className: cn(
-                    "size-3 shrink-0 transition-transform",
-                    v.accent,
-                    expanded && "rotate-90"
-                  )
-                }
-              ) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "size-3 shrink-0", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: cn("size-3.5 shrink-0", v.accent), strokeWidth: 2.5 }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono truncate flex-1 min-w-0", title: op.path || "(root)", children: op.path === "" ? "(root)" : op.path }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "span",
-                {
-                  className: cn(
-                    "text-[9px] font-bold uppercase tracking-wider shrink-0 px-1.5 py-0.5 rounded",
-                    v.accent,
-                    op.kind === "equal" ? "bg-muted/40" : "bg-background/60"
-                  ),
-                  children: v.label
-                }
-              ),
-              op.path !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "span",
-                {
-                  role: "button",
-                  tabIndex: 0,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onCopyPath(op.path);
-                  },
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.stopPropagation();
-                      e.preventDefault();
-                      onCopyPath(op.path);
-                    }
-                  },
-                  className: cn(
-                    "shrink-0 p-1 rounded transition-colors cursor-pointer inline-flex items-center justify-center",
-                    justCopied ? "text-emerald-500" : "text-muted-foreground/50 hover:text-foreground hover:bg-muted"
-                  ),
-                  "aria-label": justCopied ? "Copied" : "Copy path",
-                  title: justCopied ? "Copied!" : "Copy path",
-                  children: justCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3" })
-                }
-              )
-            ]
-          }
-        ),
-        preview.map((p, i) => (
-          // biome-ignore lint/suspicious/noArrayIndexKey: preview list is rebuilt on every render and is positional
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("font-mono text-xs mt-1 break-all pl-5", p.tone), children: p.text }, i)
-        )),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: "overflow-hidden transition-all duration-200",
-            style: { maxHeight: expanded && isExpandable2 ? "2000px" : "0" },
-            "aria-hidden": !expanded,
-            children: expanded && isExpandable2 && op.kind !== "equal" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedSubtree, { op }) : null
-          }
-        )
-      ]
-    }
-  );
-}
-function ExpandedSubtree({ op }) {
-  if (op.kind === "added" || op.kind === "removed") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-5 mt-2 border border-border/50 rounded p-2 bg-muted/20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: nodeToJsonString(op.value), defaultExpandDepth: 2 }) });
-  }
-  const leftIsStructured = op.left.kind === "object" || op.left.kind === "array";
-  const rightIsStructured = op.right.kind === "object" || op.right.kind === "array";
-  if (!leftIsStructured && !rightIsStructured) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-5 mt-2 text-xs text-muted-foreground/70 italic", children: "Primitive values are shown inline above." });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pl-5 mt-2 grid grid-cols-1 md:grid-cols-2 gap-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-rose-500/30 rounded p-2 bg-rose-500/5", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase tracking-wider text-rose-500 mb-1", children: "Old" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: nodeToJsonString(op.left), defaultExpandDepth: 2 })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-emerald-500/30 rounded p-2 bg-emerald-500/5", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase tracking-wider text-emerald-500 mb-1", children: "New" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: nodeToJsonString(op.right), defaultExpandDepth: 2 })
-    ] })
-  ] });
-}
-function SummaryChips({
-  counts,
-  onJumpTo
-}) {
-  const total = counts.added + counts.removed + counts.changed;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-2 border-b border-border bg-muted/20 flex items-center gap-2 text-xs flex-wrap", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground font-medium", children: [
-      total,
-      " ",
-      total === 1 ? "change" : "changes"
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => onJumpTo("removed"),
-        disabled: counts.removed === 0,
-        className: cn(
-          "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
-          counts.removed > 0 ? "border-rose-500/40 text-rose-600 dark:text-rose-400 bg-rose-500/10 hover:bg-rose-500/20" : "border-border text-muted-foreground/40 cursor-not-allowed"
-        ),
-        title: counts.removed > 0 ? "Jump to first removed" : "No removals",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Minus, { className: "size-3" }),
-          counts.removed,
-          " removed"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => onJumpTo("added"),
-        disabled: counts.added === 0,
-        className: cn(
-          "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
-          counts.added > 0 ? "border-emerald-500/40 text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20" : "border-border text-muted-foreground/40 cursor-not-allowed"
-        ),
-        title: counts.added > 0 ? "Jump to first added" : "No additions",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-3" }),
-          counts.added,
-          " added"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => onJumpTo("changed"),
-        disabled: counts.changed === 0,
-        className: cn(
-          "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
-          counts.changed > 0 ? "border-amber-500/40 text-amber-600 dark:text-amber-400 bg-amber-500/10 hover:bg-amber-500/20" : "border-border text-muted-foreground/40 cursor-not-allowed"
-        ),
-        title: counts.changed > 0 ? "Jump to first changed" : "No changes",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Pencil, { className: "size-3" }),
-          counts.changed,
-          " changed"
-        ]
-      }
-    )
+              externalTestingTimeLeft: testingTimeLeft,
+              onProvidersMutate: () => {
+                return mutate();
+              },
+              onTestResultsChange: handleTestResultsChange,
+              onTestingProvidersChange: handleTestingProvidersChange,
+              onTestingTimeLeftChange: handleTestingTimeLeftChange
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "proxy", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProxySettingsTab, {}) })
+        ] })
+      ] })
+    ] })
   ] });
 }
-function ModeToggle({
-  mode,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex rounded-md border border-border overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => onChange("unified"),
-        "aria-pressed": mode === "unified",
-        className: cn(
-          "flex items-center gap-1 px-2 py-1 text-xs transition-colors cursor-pointer",
-          mode === "unified" ? "bg-muted text-foreground" : "hover:bg-muted/50 text-muted-foreground"
-        ),
-        title: "Unified view (single column, emphasized diffs)",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Rows3, { className: "size-3" }),
-          "Unified"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => onChange("split"),
-        "aria-pressed": mode === "split",
-        className: cn(
-          "flex items-center gap-1 px-2 py-1 text-xs transition-colors border-l border-border cursor-pointer",
-          mode === "split" ? "bg-muted text-foreground" : "hover:bg-muted/50 text-muted-foreground"
-        ),
-        title: "Split view (path | left | right)",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Columns2, { className: "size-3" }),
-          "Split"
-        ]
+function ProxySettingsTab() {
+  const { strip, isLoading, setStrip } = useStripConfig();
+  const [error, setError] = reactExports.useState(null);
+  const [pending, setPending] = reactExports.useState(false);
+  const handleToggle = reactExports.useCallback(
+    async (next) => {
+      setError(null);
+      setPending(true);
+      try {
+        await setStrip(next);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setPending(false);
       }
-    )
-  ] });
-}
-function SideSummary({ log, side }) {
-  const conversationId = getConversationId(log);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 space-y-1 text-xs", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+    },
+    [setStrip]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold", children: "Claude Code billing header" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        "When enabled, the proxy strips the synthetic ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "x-anthropic-billing-header" }),
+        " text block that Claude Code prepends to the system prompt before forwarding to upstream. Improves prefix-cache hit rates against third-party upstreams. The default at startup is controlled by the ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "LLM_INSPECTOR_STRIP_CLAUDE_CODE_BILLING_HEADER" }),
+        " environment variable; your choice is persisted to ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "config.json" }),
+        " and overrides the env var for subsequent requests."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Badge,
+        "input",
         {
-          variant: "outline",
-          className: cn(
-            "text-[10px] px-1.5 py-0 h-5 font-mono shrink-0",
-            side === "left" ? "border-rose-500/40 text-rose-400" : "border-emerald-500/40 text-emerald-400"
-          ),
-          children: side === "left" ? "← Left" : "Right →"
+          type: "checkbox",
+          role: "switch",
+          checked: strip,
+          disabled: isLoading || pending,
+          onChange: (e) => {
+            void handleToggle(e.currentTarget.checked);
+          },
+          className: "size-4 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-blue-400/80", children: [
-        "#",
-        log.id
-      ] }),
-      log.model !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-muted-foreground truncate", children: log.model })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 text-muted-foreground font-mono", children: [
-      log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-emerald-400", children: [
-        "Cache +",
-        formatTokens(log.cacheCreationInputTokens)
-      ] }),
-      log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-purple-400", children: [
-        "Cache ~",
-        formatTokens(log.cacheReadInputTokens)
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", title: log.timestamp, children: log.timestamp })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: isLoading ? "Loading…" : strip ? "Stripping enabled" : "Stripping disabled" })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground/70 font-mono truncate", title: conversationId, children: [
-      "session: ",
-      conversationId
+    error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-destructive", children: [
+      "Failed to save: ",
+      error
     ] })
   ] });
 }
-function CompareDrawer({ left, right, onClose }) {
-  const ops = reactExports.useMemo(() => {
-    const leftRequest = getLogFormatAdapter(resolveLogFormat(left)).analyzeRequest(
-      left.rawRequestBody
-    );
-    const rightRequest = getLogFormatAdapter(resolveLogFormat(right)).analyzeRequest(
-      right.rawRequestBody
-    );
-    const l = normalizeRequest(leftRequest.comparisonValue);
-    const r = normalizeRequest(rightRequest.comparisonValue);
-    return diffTrees(l, r);
-  }, [
-    left.apiFormat,
-    left.path,
-    left.rawRequestBody,
-    right.apiFormat,
-    right.path,
-    right.rawRequestBody
-  ]);
-  const grouped = reactExports.useMemo(() => groupContiguousEquals(ops), [ops]);
-  const counts = reactExports.useMemo(() => {
-    let added = 0;
-    let removed = 0;
-    let changed = 0;
-    for (const g of grouped) {
-      if (g.kind !== "single") continue;
-      switch (g.op.kind) {
-        case "added":
-          added++;
-          break;
-        case "removed":
-          removed++;
-          break;
-        case "changed":
-          changed++;
-          break;
-      }
-    }
-    return { added, removed, changed };
-  }, [grouped]);
-  const [expandedRuns, setExpandedRuns] = reactExports.useState(/* @__PURE__ */ new Set());
-  const toggleRun = (idx) => {
-    setExpandedRuns((prev) => {
-      const next = new Set(prev);
-      if (next.has(idx)) next.delete(idx);
-      else next.add(idx);
-      return next;
-    });
-  };
-  const [expandedRows, setExpandedRows] = reactExports.useState(/* @__PURE__ */ new Set());
-  const toggleRow = (idx) => {
-    setExpandedRows((prev) => {
-      const next = new Set(prev);
-      if (next.has(idx)) next.delete(idx);
-      else next.add(idx);
-      return next;
-    });
-  };
-  reactExports.useEffect(() => {
-    setExpandedRows(/* @__PURE__ */ new Set());
-  }, [left.id, right.id]);
-  const [mode, setMode] = reactExports.useState("unified");
-  const bodyRef = reactExports.useRef(null);
-  const [copiedPath, setCopiedPath] = reactExports.useState(null);
-  const copyResetTimer = reactExports.useRef(null);
-  const onCopyPath = (path) => {
-    void window.navigator.clipboard.writeText(path).then(() => {
-      setCopiedPath(path);
-      if (copyResetTimer.current !== null) clearTimeout(copyResetTimer.current);
-      copyResetTimer.current = setTimeout(() => setCopiedPath(null), 1500);
-    });
-  };
-  reactExports.useEffect(() => {
-    return () => {
-      if (copyResetTimer.current !== null) clearTimeout(copyResetTimer.current);
-    };
-  }, []);
-  const jumpToKind = (kind) => {
-    const idx = grouped.findIndex((g) => g.kind === "single" && g.op.kind === kind);
-    if (idx === -1) return;
-    const root = bodyRef.current;
-    if (root === null) return;
-    const el = root.querySelector(`[data-diff-idx="${idx}"]`);
-    if (el !== null) {
-      el.scrollIntoView({ behavior: "smooth", block: "center" });
+function computeCacheTrends(groups) {
+  const result = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    const logs = group.logs;
+    for (let i = 1; i < logs.length; i++) {
+      const prev = logs[i - 1];
+      const curr = logs[i];
+      if (prev === void 0 || curr === void 0) continue;
+      result.set(curr.id, {
+        creation: compareField(prev.cacheCreationInputTokens, curr.cacheCreationInputTokens),
+        read: compareField(prev.cacheReadInputTokens, curr.cacheReadInputTokens)
+      });
     }
-  };
+  }
+  return result;
+}
+function compareField(previous, current) {
+  if (current === null) return null;
+  if (previous === null) return null;
+  if (current > previous) return { direction: "up", delta: current - previous };
+  if (current < previous) return { direction: "down", delta: previous - current };
+  return null;
+}
+const NAV_ATTR = "data-nav-id";
+const NAV_ACTION_ATTR = "data-nav-action";
+function findNavItems(container) {
+  return Array.from(container.querySelectorAll(`[${NAV_ATTR}]`));
+}
+function isFocusTarget(node) {
+  return node instanceof HTMLElement;
+}
+function findClosestNavItem(target, container) {
+  let el = target;
+  while (el !== null && el !== container) {
+    if (el.hasAttribute(NAV_ATTR)) return el;
+    el = el.parentElement;
+  }
+  if (target.hasAttribute(NAV_ATTR)) return target;
+  return null;
+}
+function getAction(el) {
+  const val = el.getAttribute(NAV_ACTION_ATTR);
+  if (val === "toggle" || val === "expand" || val === "collapse") return val;
+  return null;
+}
+function focusAndScroll(el) {
+  el.focus({ preventScroll: true });
+  el.scrollIntoView({ block: "nearest", behavior: "smooth" });
+}
+function safeItemAt(items, index2) {
+  const el = items[index2];
+  return el ?? null;
+}
+function isEditableTarget(target) {
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA") return true;
+  if (target.isContentEditable) return true;
+  return false;
+}
+function useKeyboardNavigation(containerRef, wrapperRef) {
+  const rootRef = wrapperRef ?? containerRef;
+  const handleFocusContainer = reactExports.useCallback(
+    (e) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const target = e.target;
+      if (!isFocusTarget(target)) return;
+      if (target !== rootRef.current) return;
+      if (!container.contains(target)) return;
+      const items = findNavItems(container);
+      const first = safeItemAt(items, 0);
+      if (first !== null) focusAndScroll(first);
+    },
+    [containerRef, rootRef]
+  );
   reactExports.useEffect(() => {
-    const onKey = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKey);
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = prevOverflow;
-    };
-  }, [onClose]);
-  const sameSession = getConversationId(left) === getConversationId(right);
-  const allEqual = ops.length === 1 && ops[0]?.kind === "equal";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex justify-end",
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Compare two log requests",
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onClose,
-            "aria-label": "Close compare drawer",
-            className: "absolute inset-0 bg-black/40 cursor-default",
-            tabIndex: -1
+    const root = rootRef.current;
+    const container = containerRef.current;
+    if (!root || !container) return;
+    const handleKeyDown = (e) => {
+      const target = e.target;
+      if (!isFocusTarget(target)) return;
+      if (!container.contains(target)) return;
+      if (isEditableTarget(target)) return;
+      const items = findNavItems(container);
+      if (items.length === 0) return;
+      const current = findClosestNavItem(target, container);
+      const currentIdx = current !== null ? items.indexOf(current) : -1;
+      let handled = false;
+      switch (e.key) {
+        case "ArrowUp":
+        case "W": {
+          if (e.key === "W" && !e.shiftKey) break;
+          e.preventDefault();
+          const prevIdx = currentIdx > 0 ? currentIdx - 1 : currentIdx === -1 ? items.length - 1 : -1;
+          if (prevIdx !== -1) {
+            const prev = safeItemAt(items, prevIdx);
+            if (prev !== null) focusAndScroll(prev);
           }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            className: cn(
-              "relative bg-background border-l border-border shadow-xl",
-              "w-full md:w-[70vw] max-w-[1100px] flex flex-col h-full"
-            ),
-            onClick: (e) => e.stopPropagation(),
-            onKeyDown: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4 px-4 py-3 border-b border-border", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex gap-4 min-w-0", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(SideSummary, { log: left, side: "left" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(SideSummary, { log: right, side: "right" })
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(ModeToggle, { mode, onChange: setMode }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: onClose,
-                      "aria-label": "Close",
-                      className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer",
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" })
-                    }
-                  )
-                ] })
-              ] }),
-              !sameSession && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-1.5 text-xs text-amber-400 bg-amber-500/10 border-b border-border", children: "Heads up: the two selected logs are from different sessions." }),
-              allEqual ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto flex items-center justify-center text-muted-foreground text-sm", children: "The two Request payloads are identical." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChips, { counts, onJumpTo: jumpToKind }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: bodyRef, className: "flex-1 min-h-0 overflow-y-auto", children: mode === "unified" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-2 space-y-0.5", children: grouped.map((g, i) => {
-                  if (g.kind === "equal-run") {
-                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      EqualRunRow,
-                      {
-                        ops: g.ops,
-                        expanded: expandedRuns.has(i),
-                        onToggle: () => toggleRun(i)
-                      },
-                      `r${i}`
-                    );
-                  }
-                  const op = g.op;
-                  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    UnifiedOpRow,
-                    {
-                      op,
-                      idx: i,
-                      copiedPath,
-                      onCopyPath,
-                      expanded: expandedRows.has(i),
-                      onToggle: () => toggleRow(i)
-                    },
-                    `o${i}`
-                  );
-                }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(SplitBody, { grouped, left, right }) })
-              ] })
-            ]
+          handled = true;
+          break;
+        }
+        case "ArrowDown":
+        case "S": {
+          if (e.key === "S" && !e.shiftKey) break;
+          e.preventDefault();
+          const nextIdx = currentIdx < items.length - 1 ? currentIdx + 1 : currentIdx === -1 ? 0 : -1;
+          if (nextIdx !== -1) {
+            const next = safeItemAt(items, nextIdx);
+            if (next !== null) focusAndScroll(next);
           }
-        )
-      ]
-    }
-  );
-}
-function SplitBody({
-  grouped,
-  left,
-  right
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[200px_1fr_1fr] gap-x-2 gap-y-0.5 px-3 py-2 text-xs", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[200px_1fr_1fr] gap-x-2 col-span-3 pb-2 mb-2 border-b border-border text-[10px] uppercase tracking-wider text-muted-foreground", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Path" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-        "Left (Log #",
-        left.id,
-        ")"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-        "Right (Log #",
-        right.id,
-        ")"
-      ] })
-    ] }),
-    grouped.map((g, i) => {
-      if (g.kind === "equal-run") {
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            className: "col-span-3 px-2 py-1 text-xs text-muted-foreground/60",
-            children: [
-              g.ops.length,
-              " equal siblings collapsed — switch to Unified to expand"
-            ]
-          },
-          i
-        );
-      }
-      const op = g.op;
-      if (op.kind === "equal") {
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            className: "col-span-3 grid grid-cols-[200px_1fr_1fr] gap-x-2 px-2 py-0.5 text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs truncate", title: op.path, children: op.path }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs break-all opacity-60", children: previewNode(op.value, 200) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs break-all opacity-60", children: previewNode(op.value, 200) })
-            ]
-          },
-          i
-        );
-      }
-      if (op.kind === "added") {
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            className: "col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-emerald-400/70 bg-emerald-500/5",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-0.5", children: op.path }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono break-all text-emerald-300/90", children: [
-                "+ ",
-                previewNode(op.value, 400)
-              ] })
-            ]
-          },
-          i
-        );
+          handled = true;
+          break;
+        }
+        case "ArrowLeft":
+        case "A": {
+          if (e.key === "A" && !e.shiftKey) break;
+          if (current === null) break;
+          e.preventDefault();
+          const action = getAction(current);
+          if (action === "collapse") {
+            current.click();
+          } else if (currentIdx > 0) {
+            const prev = safeItemAt(items, currentIdx - 1);
+            if (prev !== null) focusAndScroll(prev);
+          }
+          handled = true;
+          break;
+        }
+        case "ArrowRight":
+        case "D": {
+          if (e.key === "D" && !e.shiftKey) break;
+          if (current === null) break;
+          e.preventDefault();
+          const action = getAction(current);
+          if (action === "expand") {
+            current.click();
+          } else if (currentIdx < items.length - 1) {
+            const next = safeItemAt(items, currentIdx + 1);
+            if (next !== null) focusAndScroll(next);
+          }
+          handled = true;
+          break;
+        }
+        case " ": {
+          if (current === null) break;
+          e.preventDefault();
+          const action = getAction(current);
+          if (action !== null) current.click();
+          handled = true;
+          break;
+        }
       }
-      if (op.kind === "removed") {
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            className: "col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-rose-400/70 bg-rose-500/5",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-0.5", children: op.path }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono break-all text-rose-300/90 line-through", children: [
-                "− ",
-                previewNode(op.value, 400)
-              ] })
-            ]
-          },
-          i
-        );
+      if (handled) {
+        e.stopPropagation();
       }
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: "col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-amber-400/70 bg-amber-500/5",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-1", children: op.path }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-rose-300/90 break-all line-through", children: previewNode(op.left, 400) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-emerald-300/90 break-all", children: previewNode(op.right, 400) })
-            ] })
-          ]
-        },
-        i
-      );
-    })
-  ] });
+    };
+    document.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => document.removeEventListener("keydown", handleKeyDown, { capture: true });
+  }, [containerRef, rootRef]);
+  reactExports.useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    root.addEventListener("focus", handleFocusContainer);
+    return () => root.removeEventListener("focus", handleFocusContainer);
+  }, [handleFocusContainer, rootRef]);
 }
 function truncateSessionId(id) {
   if (id.length <= 30) return id;
@@ -6554,6 +5222,9 @@ function ProxyViewer({
   const [crabEntrancePhase, setCrabEntrancePhase] = reactExports.useState(
     "hidden"
   );
+  const logListRef = reactExports.useRef(null);
+  const logListWrapperRef = reactExports.useRef(null);
+  useKeyboardNavigation(logListRef, logListWrapperRef);
   reactExports.useEffect(() => {
     const perCrabDuration = 400;
     const startDelay = 50;
@@ -6589,8 +5260,8 @@ function ProxyViewer({
     },
     [comparisonPredecessors]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-[1200px] mx-auto flex flex-col h-screen", style: { maxHeight: "100vh" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-end px-6 pt-6 pb-8 relative", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-[1400px] xl:max-w-[1600px] 2xl:max-w-[1800px] mx-auto px-6 pb-6", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-end pt-6 pb-8 relative", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "text-lg font-bold flex items-end gap-2 absolute left-1/2 -translate-x-1/2 whitespace-nowrap", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-end gap-1 group cursor-default", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" }),
@@ -6633,7 +5304,7 @@ function ProxyViewer({
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {}) })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 px-6 mb-4", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedSession, onValueChange: onSessionChange, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[350px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All sessions" }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
@@ -6654,7 +5325,7 @@ function ProxyViewer({
           {
             type: "button",
             onClick: () => onViewModeChange("simple"),
-            className: `px-2 py-1 cursor-pointer transition-colors text-xs ${viewMode === "simple" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
+            className: `h-8 px-3 cursor-pointer transition-colors text-xs ${viewMode === "simple" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
             children: "Simple"
           }
         ),
@@ -6663,7 +5334,7 @@ function ProxyViewer({
           {
             type: "button",
             onClick: () => onViewModeChange("full"),
-            className: `px-2 py-1 cursor-pointer transition-colors text-xs ${viewMode === "full" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
+            className: `h-8 px-3 cursor-pointer transition-colors text-xs ${viewMode === "full" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
             children: "Full"
           }
         )
@@ -6683,10 +5354,10 @@ function ProxyViewer({
             void handleExport();
           },
           disabled: exporting,
-          className: "text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1",
+          className: "h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 rounded-md hover:bg-muted",
           title: "Export all logs as JSON ZIP",
           children: exporting ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Exporting..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3.5" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export" })
           ] })
         }
@@ -6696,31 +5367,39 @@ function ProxyViewer({
         {
           type: "button",
           onClick: onClearAll,
-          className: "text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+          className: "h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer rounded-md hover:bg-muted",
           title: "Clear all logs",
           children: "Clear"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 px-6 pb-6", children: logs.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-muted-foreground py-16 space-y-4", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: logs.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-muted-foreground py-16 space-y-4", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: "No requests captured yet." }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs", children: "Route AI coding tools through the proxy:" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableCommand, { command: "LLM_BASE_URL=http://localhost:25947/proxy <your-tool>" })
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-y-auto h-full flex flex-col gap-2", children: groups.map((group) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ConversationGroup,
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
       {
-        group,
-        viewMode,
-        strip,
-        cacheTrends,
-        onCompareWithPrevious: handleCompareWithPrevious,
-        comparisonPredecessors,
-        onClearGroup,
-        standalone: groups.length === 1
-      },
-      group.id
-    )) }) }),
-    comparePair !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(CompareDrawer, { left: comparePair[0], right: comparePair[1], onClose: closeCompare })
+        ref: logListWrapperRef,
+        tabIndex: 0,
+        className: "flex flex-col gap-2 focus:outline-none",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: logListRef, children: groups.map((group) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ConversationGroup,
+          {
+            group,
+            viewMode,
+            strip,
+            cacheTrends,
+            onCompareWithPrevious: handleCompareWithPrevious,
+            comparisonPredecessors,
+            onClearGroup,
+            standalone: groups.length === 1
+          },
+          group.id
+        )) })
+      }
+    ) }),
+    comparePair !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyCompareDrawer, { left: comparePair[0], right: comparePair[1], onClose: closeCompare }) })
   ] });
 }
 const SSEUpdateSchema = union([
@@ -6758,8 +5437,6 @@ function filterLogs(logs, selectedSession, selectedModel) {
 const DEBOUNCE_MS = 50;
 function ProxyViewerContainer() {
   const [allLogs, setAllLogs] = reactExports.useState([]);
-  const [sessions, setSessions] = reactExports.useState([]);
-  const [models, setModels] = reactExports.useState([]);
   const [selectedSession, setSelectedSession] = reactExports.useState("__all__");
   const [selectedModel, setSelectedModel] = reactExports.useState("__all__");
   const [viewMode, setViewMode] = reactExports.useState("simple");
@@ -6767,13 +5444,14 @@ function ProxyViewerContainer() {
   const eventSourceRef = reactExports.useRef(null);
   const reconnectTimeoutRef = reactExports.useRef(null);
   const logIndexRef = reactExports.useRef(/* @__PURE__ */ new Map());
-  const logsRef = reactExports.useRef([]);
   const pendingUpdatesRef = reactExports.useRef([]);
   const flushTimerRef = reactExports.useRef(null);
   const logs = reactExports.useMemo(
     () => filterLogs(allLogs, selectedSession, selectedModel),
     [allLogs, selectedSession, selectedModel]
   );
+  const sessions = reactExports.useMemo(() => extractSessions(allLogs), [allLogs]);
+  const models = reactExports.useMemo(() => extractModels(allLogs), [allLogs]);
   const flushUpdates = reactExports.useCallback(() => {
     flushTimerRef.current = null;
     const updates = pendingUpdatesRef.current;
@@ -6781,8 +5459,6 @@ function ProxyViewerContainer() {
     if (updates.length === 0) return;
     setAllLogs((prev) => {
       let next = prev;
-      let sessionsChanged = false;
-      let modelsChanged = false;
       for (const log of updates) {
         const idx = logIndexRef.current.get(log.id);
         if (idx !== void 0) {
@@ -6791,19 +5467,10 @@ function ProxyViewerContainer() {
           logIndexRef.current.set(log.id, next.length);
           next = [...next, log];
         }
-        if (log.sessionId !== null && log.sessionId !== "" && !sessions.includes(log.sessionId)) {
-          sessionsChanged = true;
-        }
-        if (log.model !== null && log.model !== "" && !models.includes(log.model)) {
-          modelsChanged = true;
-        }
       }
-      logsRef.current = next;
-      if (sessionsChanged) setSessions((s) => extractSessions(next));
-      if (modelsChanged) setModels((m) => extractModels(next));
       return next;
     });
-  }, [sessions, models]);
+  }, []);
   const scheduleUpdate = reactExports.useCallback(
     (log) => {
       pendingUpdatesRef.current.push(log);
@@ -6841,10 +5508,7 @@ function ProxyViewerContainer() {
             if (log !== void 0) idx.set(log.id, i);
           }
           logIndexRef.current = idx;
-          logsRef.current = update.logs;
           setAllLogs(update.logs);
-          setSessions(extractSessions(update.logs));
-          setModels(extractModels(update.logs));
           setError(null);
         } else if (update.type === "update") {
           scheduleUpdate(update.log);
@@ -6888,10 +5552,7 @@ function ProxyViewerContainer() {
           return;
         }
         logIndexRef.current.clear();
-        logsRef.current = [];
         setAllLogs([]);
-        setSessions([]);
-        setModels([]);
         setError(null);
       } catch (err) {
         setError(err instanceof Error ? err.message : "Unknown error clearing logs");
@@ -6920,9 +5581,6 @@ function ProxyViewerContainer() {
             if (log !== void 0) idx.set(log.id, i);
           }
           logIndexRef.current = idx;
-          logsRef.current = remaining;
-          setSessions(extractSessions(remaining));
-          setModels(extractModels(remaining));
           return remaining;
         });
         setError(null);
@@ -6955,6 +5613,32 @@ function ProxyViewerContainer() {
   ] });
 }
 const SplitComponent = ProxyViewerContainer;
+const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  component: SplitComponent
+}, Symbol.toStringTag, { value: "Module" }));
 export {
-  SplitComponent as component
+  Badge as B,
+  Dialog as D,
+  Tabs as T,
+  getConversationId as a,
+  DialogContent as b,
+  cn as c,
+  DialogHeader as d,
+  DialogTitle as e,
+  formatTokens as f,
+  getLogFormatAdapter as g,
+  TabsList as h,
+  TabsTrigger as i,
+  TabsContent as j,
+  TooltipProvider as k,
+  Tooltip as l,
+  TooltipTrigger as m,
+  TooltipContent as n,
+  Button as o,
+  getStatusCategory as p,
+  parseJsonText as q,
+  resolveLogFormat as r,
+  safeJsonValue as s,
+  index as t
 };