@tonyclaw/agent-inspector 2.1.12 → 2.1.14

package/.output/server/_ssr/{ProxyViewerContainer-BDLJSawP.mjs → ProxyViewerContainer-CDfEE_w-.mjs}

@@ -1,16 +1,15 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { I as InspectorGroupsListResponseSchema, C as CapturedLogSchema, D as DEFAULT_CAPTURE_MODE, a as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, b as DEFAULT_PROVIDER_TEST_TIMEOUT_SECONDS, c as DEFAULT_TIME_DISPLAY_FORMAT, d as RuntimeConfigSchema, p as packageJson, P as ProviderConfigSchema, g as apiFormatForPath, l as GroupEvidenceExportResultSchema, m as DeleteInspectorGroupResponseSchema, r as createPendingProviderTestResults, t as ProviderTestResultsSchema, u as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, v as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, h as getSessionPath, f as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, w as resolveProviderContextWindow, j as AlertSummarySchema, k as AlertListResponseSchema, G as GroupEvidenceReadResponseSchema, q as maskApiKey, n as providerHasContextMetadata, o as findProviderModelMetadata, K as KnowledgeCandidateSchema, i as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema, x as isPlainRecord } from "./router-BEmMnVa7.mjs";
+import { I as InspectorGroupsListResponseSchema, C as CapturedLogSchema, D as DEFAULT_CAPTURE_MODE, a as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, b as DEFAULT_PROVIDER_TEST_TIMEOUT_SECONDS, c as DEFAULT_TIME_DISPLAY_FORMAT, d as RuntimeConfigSchema, p as packageJson, P as ProviderConfigSchema, i as apiFormatForPath, n as GroupEvidenceExportResultSchema, o as DeleteInspectorGroupResponseSchema, v as createPendingProviderTestResults, w as ProviderTestResultsSchema, x as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, y as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, j as getSessionPath, l as AlertSummarySchema, m as AlertListResponseSchema, G as GroupEvidenceReadResponseSchema, t as maskApiKey, q as providerHasContextMetadata, r as findProviderModelMetadata, s as safeGetOwnProperty, K as KnowledgeCandidateSchema, f as parseOpenAIResponse, g as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, h as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, z as resolveProviderContextWindow, u as buildUpstreamUrl, k as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema, B as isPlainRecord } from "./router-4bdm6Mt2.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";
 import { t as twMerge } from "../_libs/tailwind-merge.mjs";
 import { R as Root, T as Trigger$1, C as Content, a as Close, b as Title, D as Description, P as Portal$2, O as Overlay } from "../_libs/radix-ui__react-dialog.mjs";
 import { c as cva } from "../_libs/class-variance-authority.mjs";
-import { d as diffJson, a as diffLines } from "../_libs/diff.mjs";
 import { u as useWindowVirtualizer, a as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
+import { d as diffJson, a as diffLines } from "../_libs/diff.mjs";
 import { R as Root2, T as Trigger, I as Icon, V as Value, P as Portal, C as Content2, a as Viewport, b as Item, c as ItemIndicator, d as ItemText, S as ScrollUpButton, e as ScrollDownButton } from "../_libs/radix-ui__react-select.mjs";
-import { I as Info, C as ChevronDown, a as Check, X, U as Upload, D as Download, F as FileBraces, T as Trash2, P as Plus, A as ArrowLeft, b as ChevronUp, c as Copy, d as ChevronsLeft, e as ChevronLeft, f as ChevronRight, g as ChevronsRight, h as Clapperboard, S as Siren, G as Gauge, L as LoaderCircle, R as RefreshCw, i as Layers, j as Settings, k as Scan, l as CircleAlert, m as Terminal, n as ArrowUpRight, o as ArrowDownRight, p as User, q as Clock, M as MessageSquare, Z as Zap, E as ExternalLink, W as Wrench, r as TriangleAlert, B as Brain, s as Bell, t as Clock3, u as ShieldAlert, v as EyeOff, w as Eye, x as RotateCw, y as Pencil, z as CircleX, H as ShieldCheck, J as Save, K as FileSearch, N as CircleCheck, O as CloudUpload, Q as OctagonAlert, V as Radio, Y as Globe, _ as FileTerminal, $ as ChevronsUp, a0 as ChevronsDown, a1 as FileDiff, a2 as History, a3 as RotateCcw, a4 as Search, a5 as GitCompareArrows, a6 as Minus, a7 as CircleCheckBig, a8 as ArrowUp, a9 as ArrowDown, aa as CircleQuestionMark, ab as Server, ac as Lock, ad as Wifi, ae as WifiOff, af as Ellipsis, ag as CodeXml, ah as Blocks, ai as MousePointerClick, aj as FileText, ak as Rows3, al as Columns2 } from "../_libs/lucide-react.mjs";
-import { M as Markdown } from "../_libs/react-markdown.mjs";
+import { I as Info, C as ChevronDown, a as Check, X, U as Upload, D as Download, F as FileBraces, T as Trash2, P as Plus, A as ArrowLeft, b as ChevronUp, c as Copy, d as ChevronsLeft, e as ChevronLeft, f as ChevronRight, g as ChevronsRight, h as Clapperboard, S as Siren, G as Gauge, L as LoaderCircle, R as RefreshCw, i as Layers, j as Settings, k as Scan, l as CircleAlert, m as Terminal, n as ArrowUpRight, o as ArrowDownRight, p as User, q as Clock, M as MessageSquare, Z as Zap, E as ExternalLink, W as Wrench, r as TriangleAlert, B as Brain, s as Bell, t as Clock3, u as ShieldAlert, v as EyeOff, w as Eye, x as RotateCw, y as Pencil, z as CircleX, H as ShieldCheck, J as Save, K as FileSearch, N as CircleCheck, O as CloudUpload, Q as Minus, V as CircleCheckBig, Y as CircleQuestionMark, _ as Server, $ as Lock, a0 as Wifi, a1 as WifiOff, a2 as OctagonAlert, a3 as Radio, a4 as Globe, a5 as FileTerminal, a6 as ChevronsUp, a7 as ChevronsDown, a8 as FileDiff, a9 as History, aa as RotateCcw, ab as Search, ac as GitCompareArrows, ad as ArrowUp, ae as ArrowDown, af as Ellipsis, ag as CodeXml, ah as Blocks, ai as MousePointerClick, aj as FileText, ak as Rows3, al as Columns2 } from "../_libs/lucide-react.mjs";
 import { u as union, d as object, a as array, l as literal, b as string, n as number, c as boolean, _ as _enum } from "../_libs/zod.mjs";
 import { S as Slot } from "../_libs/radix-ui__react-slot.mjs";
 import { R as Root2$1, L as List, T as Trigger$2, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
@@ -1078,9 +1077,9 @@ function contentToText(content) {
     if (block === null || typeof block !== "object") continue;
     const b = block;
     const type = b.type;
-    if (type === "text" && typeof b.text === "string") {
+    if ((type === "text" || type === "input_text" || type === "output_text") && typeof b.text === "string") {
       parts.push(b.text);
-    } else if (type === "image_url") {
+    } else if (type === "image_url" || type === "input_image") {
       parts.push("[image]");
     }
   }
@@ -1110,15 +1109,54 @@ function toolsToText(tools) {
   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));
+    const fn = safeGetOwnProperty(tool, "function");
+    const name = safeGetOwnProperty(fn, "name") ?? safeGetOwnProperty(tool, "name");
+    const description = safeGetOwnProperty(fn, "description") ?? safeGetOwnProperty(tool, "description");
+    const parameters = safeGetOwnProperty(fn, "parameters") ?? safeGetOwnProperty(tool, "parameters");
+    if (typeof name === "string") parts.push(name);
+    if (typeof description === "string") parts.push(description);
+    if (parameters !== void 0) parts.push(JSON.stringify(parameters));
   }
   return parts.join("\n");
 }
+function countResponsesInput(input) {
+  if (typeof input === "string") return input.length > 0 ? 1 : 0;
+  if (Array.isArray(input)) return input.length;
+  if (input === void 0 || input === null) return null;
+  return 1;
+}
+function responsesInputItemToText(input) {
+  if (typeof input === "string") return input;
+  const directText = safeGetOwnProperty(input, "text");
+  if (typeof directText === "string") return directText;
+  const contentText = contentToText(safeGetOwnProperty(input, "content"));
+  if (contentText.length > 0) return contentText;
+  const outputText = contentToText(safeGetOwnProperty(input, "output"));
+  if (outputText.length > 0) return outputText;
+  const argumentsText = safeGetOwnProperty(input, "arguments");
+  return typeof argumentsText === "string" ? argumentsText : "";
+}
+function responsesInputRole(input) {
+  const role = safeGetOwnProperty(input, "role");
+  if (role === "system" || role === "user" || role === "assistant" || role === "tool") {
+    return role;
+  }
+  const type = safeGetOwnProperty(input, "type");
+  if (type === "function_call_output") return "tool";
+  if (type === "message") return "user";
+  return "user";
+}
+function responsesToolNames(response) {
+  const output = safeGetOwnProperty(response, "output");
+  if (!Array.isArray(output)) return [];
+  const names = [];
+  for (const item of output) {
+    if (safeGetOwnProperty(item, "type") !== "function_call") continue;
+    const name = safeGetOwnProperty(item, "name");
+    if (typeof name === "string" && name.length > 0) names.push(name);
+  }
+  return names;
+}
 function segment(role, label, text, path) {
   return {
     role,
@@ -1135,7 +1173,16 @@ const openAILogFormatAdapter = {
     if (rawBody === null) return emptyRequestAnalysis(rawBody);
     try {
       const result = OpenAIRequestSchema.safeParse(JSON.parse(rawBody));
-      if (!result.success) return emptyRequestAnalysis(rawBody);
+      if (!result.success) {
+        const responsesResult = OpenAIResponsesRequestSchema.safeParse(JSON.parse(rawBody));
+        if (!responsesResult.success) return emptyRequestAnalysis(rawBody);
+        return {
+          parsed: responsesResult.data,
+          comparisonValue: responsesResult.data,
+          messageCount: countResponsesInput(responsesResult.data.input),
+          toolCount: responsesResult.data.tools !== void 0 && responsesResult.data.tools.length > 0 ? responsesResult.data.tools.length : null
+        };
+      }
       return {
         parsed: result.data,
         comparisonValue: result.data,
@@ -1149,7 +1196,15 @@ const openAILogFormatAdapter = {
   analyzeResponse(responseText) {
     if (responseText === null) return EMPTY_RESPONSE_ANALYSIS;
     const parsed = parseOpenAIResponse(responseText);
-    if (parsed === null) return EMPTY_RESPONSE_ANALYSIS;
+    if (parsed === null) {
+      const responsesParsed = parseOpenAIResponsesResponse(responseText);
+      if (responsesParsed === null) return EMPTY_RESPONSE_ANALYSIS;
+      const toolNames2 = responsesToolNames(responsesParsed);
+      return {
+        parsed: responsesParsed,
+        toolNames: toolNames2.length > 0 ? toolNames2 : null
+      };
+    }
     const toolNames = parsed.choices[0]?.message?.tool_calls?.map((toolCall) => toolCall.function?.name ?? "").filter((name) => name !== "") ?? [];
     return {
       parsed,
@@ -1160,6 +1215,9 @@ const openAILogFormatAdapter = {
     if (parsed === null || typeof parsed !== "object") return null;
     const body = parsed;
     const segments = [];
+    if (typeof body.instructions === "string" && body.instructions.length > 0) {
+      segments.push(segment("system", "instructions", body.instructions, "/instructions"));
+    }
     if (Array.isArray(body.messages)) {
       body.messages.forEach((message, index) => {
         if (message === null || typeof message !== "object") return;
@@ -1169,6 +1227,17 @@ const openAILogFormatAdapter = {
         segments.push(segment(role, `[${index}] ${role}`, text, `/messages/${index}`));
       });
     }
+    if (!Array.isArray(body.messages)) {
+      if (typeof body.input === "string" && body.input.length > 0) {
+        segments.push(segment("user", "input", body.input, "/input"));
+      } else if (Array.isArray(body.input)) {
+        body.input.forEach((item, index) => {
+          const role = responsesInputRole(item);
+          const text = responsesInputItemToText(item);
+          segments.push(segment(role, `[${index}] ${role}`, text, `/input/${index}`));
+        });
+      }
+    }
     if (Array.isArray(body.tools) && body.tools.length > 0) {
       const text = toolsToText(body.tools);
       segments.push(segment("tools", "tools", text, "/tools"));
@@ -1418,6 +1487,35 @@ function groupLogsByConversation(logs) {
   result.sort((a, b) => (a.logs[0]?.timestamp ?? "").localeCompare(b.logs[0]?.timestamp ?? ""));
   return result;
 }
+const LOG_FOCUS_REQUEST_EVENT = "agent-inspector:focus-log";
+function dispatchLogFocusRequest(request) {
+  window.dispatchEvent(new CustomEvent(LOG_FOCUS_REQUEST_EVENT, { detail: request }));
+}
+function readLogFocusRequest(event) {
+  if (typeof CustomEvent === "undefined" || !(event instanceof CustomEvent)) return null;
+  const detail = event.detail;
+  const logId = safeGetOwnProperty(detail, "logId");
+  if (typeof logId !== "number" || !Number.isInteger(logId) || logId < 0) return null;
+  const tab = safeGetOwnProperty(detail, "tab");
+  switch (tab) {
+    case "anatomy":
+    case "request":
+      break;
+    case void 0:
+      break;
+    default:
+      return null;
+  }
+  const source = safeGetOwnProperty(detail, "source");
+  switch (source) {
+    case "virtualizer":
+      return { logId, tab: tab ?? "request", source };
+    case void 0:
+      return { logId, tab: tab ?? "request" };
+    default:
+      return null;
+  }
+}
 function isRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -1438,6 +1536,16 @@ function extractStopReason(log) {
     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";
     }
+    if (Array.isArray(json.output)) {
+      for (const item of json.output) {
+        if (isRecord(item) && item.type === "function_call") {
+          return "tool_use";
+        }
+      }
+      if (json.status === "completed") {
+        return "stop";
+      }
+    }
     return null;
   } catch {
     return null;
@@ -1798,8 +1906,38 @@ function getInteriorCrabVariantIndex(seed) {
 function getInteriorCrabVariant(seed) {
   return getCrabVariant(getInteriorCrabVariantIndex(seed));
 }
-function getJsonExpansionPolicy(_value) {
-  return { depth: Number.POSITIVE_INFINITY };
+const FULL_EXPAND_NODE_LIMIT = 400;
+const STRUCTURE_EXPAND_NODE_LIMIT = 2e3;
+function isJsonArray(value) {
+  return Array.isArray(value);
+}
+function countJsonNodesUpTo(value, limit) {
+  const stack = [value];
+  let count = 0;
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (current === void 0) continue;
+    count += 1;
+    if (count > limit) return count;
+    if (current === null || typeof current !== "object") continue;
+    if (isJsonArray(current)) {
+      for (const child of current) {
+        stack.push(child);
+      }
+      continue;
+    }
+    for (const key of Object.keys(current)) {
+      const child = current[key];
+      if (child !== void 0) stack.push(child);
+    }
+  }
+  return count;
+}
+function getJsonExpansionPolicy(value) {
+  const nodeCount = countJsonNodesUpTo(value, STRUCTURE_EXPAND_NODE_LIMIT + 1);
+  if (nodeCount <= FULL_EXPAND_NODE_LIMIT) return { depth: Number.POSITIVE_INFINITY };
+  if (nodeCount <= STRUCTURE_EXPAND_NODE_LIMIT) return { depth: 3 };
+  return { depth: 2 };
 }
 function parseJsonText(text) {
   try {
@@ -1813,7 +1951,7 @@ 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 === null ? null : getJsonExpansionPolicy(parsedData),
     [parsedData]
   );
   const [isExpanded, setIsExpanded] = reactExports.useState(false);
@@ -1961,27 +2099,27 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-D9wf870o.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-ceW5VxMo.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-B2dS4kmP.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-V0s_eEbR.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-k49Peshi.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-f1ccwR9d.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-Bk3B1suu.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-BIRrqG4H.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-D6MDGCgh.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-V3JFjCgX.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => Promise.resolve().then(() => jsonViewer).then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-Dcnm0Ivf.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => Promise.resolve().then(() => jsonViewer).then((m) => ({ default: m.JsonViewerFromString }))
+  () => import("./json-viewer-Dcnm0Ivf.mjs").then((m) => ({ default: m.JsonViewerFromString }))
 );
 const HIGHLIGHT_DURATION_MS = 1200;
 const MAX_HIGHLIGHT_ATTEMPTS = 12;
@@ -2405,12 +2543,35 @@ function Badge({
   );
 }
 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: "bg-rose-500/15 text-rose-400 border-rose-500/25",
-  pending: "bg-muted text-muted-foreground border-border"
+  success: "bg-emerald-400/[0.08] text-emerald-200 border-emerald-300/25",
+  client_error: "bg-amber-300/[0.10] text-amber-100 border-amber-300/30",
+  server_error: "bg-rose-400/[0.10] text-rose-100 border-rose-300/30",
+  pending: "bg-cyan-300/[0.08] text-cyan-100 border-cyan-300/25"
+};
+const STATUS_CUE_CLASSES = {
+  success: {
+    frame: "border-emerald-300/20 bg-emerald-300/[0.06] text-emerald-100",
+    dot: "bg-emerald-300 shadow-[0_0_14px_rgba(110,231,183,0.8)]",
+    rail: "bg-emerald-300/45 shadow-[0_0_22px_rgba(110,231,183,0.28)]"
+  },
+  client_error: {
+    frame: "border-amber-300/25 bg-amber-300/[0.08] text-amber-100",
+    dot: "bg-amber-200 shadow-[0_0_14px_rgba(252,211,77,0.8)]",
+    rail: "bg-amber-300/50 shadow-[0_0_22px_rgba(252,211,77,0.28)]"
+  },
+  server_error: {
+    frame: "border-rose-300/25 bg-rose-300/[0.08] text-rose-100",
+    dot: "bg-rose-300 shadow-[0_0_14px_rgba(253,164,175,0.8)]",
+    rail: "bg-rose-300/50 shadow-[0_0_22px_rgba(253,164,175,0.28)]"
+  },
+  pending: {
+    frame: "border-cyan-300/25 bg-cyan-300/[0.08] text-cyan-100",
+    dot: "bg-cyan-200 shadow-[0_0_14px_rgba(103,232,249,0.8)]",
+    rail: "bg-cyan-300/50 shadow-[0_0_22px_rgba(103,232,249,0.28)]"
+  }
 };
 const HEADER_ACTION_BUTTON_CLASS = "size-8 border-white/10 bg-[#0a0d11] text-muted-foreground shadow-none hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100";
+const TELEMETRY_CHIP_CLASS = "flex h-7 items-center gap-1 rounded-md border border-white/10 bg-black/20 px-2 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]";
 function formatElapsed$3(ms) {
   if (ms < 1e3) return `${ms}ms`;
   return `${(ms / 1e3).toFixed(1)}s`;
@@ -2419,6 +2580,18 @@ function formatTokenRate$1(tokensPerSecond) {
   if (tokensPerSecond >= 10) return `${tokensPerSecond.toFixed(0)}/s`;
   return `${tokensPerSecond.toFixed(1)}/s`;
 }
+function statusCueLabel(category, status) {
+  switch (category) {
+    case "success":
+      return status === null ? "OK" : String(status);
+    case "client_error":
+      return status === null ? "WARN" : String(status);
+    case "server_error":
+      return status === null ? "FAIL" : String(status);
+    case "pending":
+      return "ROLL";
+  }
+}
 function CacheTrendIndicator({ trend }) {
   if (trend === null) return null;
   const isUp = trend.direction === "up";
@@ -2456,6 +2629,8 @@ const LogEntryHeader = reactExports.memo(function({
   const hasClientPid = log.clientPid !== null && log.clientPid !== void 0;
   const hasClientProjectFolder = log.clientProjectFolder !== null && log.clientProjectFolder !== void 0 && log.clientProjectFolder !== "";
   const hasClientCwd = log.clientCwd !== null && log.clientCwd !== void 0 && log.clientCwd !== "";
+  const statusCue = STATUS_CUE_CLASSES[statusCategory];
+  const statusLabel2 = statusCueLabel(statusCategory, log.responseStatus);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -2465,9 +2640,9 @@ const LogEntryHeader = reactExports.memo(function({
       "data-nav-id": `log-${log.id}`,
       "data-nav-action": expanded ? "collapse" : "expand",
       className: cn(
-        "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 px-3 py-1.5 cursor-pointer transition-colors",
-        expanded ? "bg-[#0c1015]" : "hover:bg-muted/30",
-        "select-none",
+        "group/header relative isolate flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 overflow-hidden px-3 py-2 cursor-pointer transition-[background-color,border-color,box-shadow]",
+        expanded ? "bg-[linear-gradient(90deg,#0f1720_0%,#090d12_50%,#07090d_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]" : "bg-[#080b10] hover:bg-[#0b1016]",
+        "select-none before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-white/10",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
       ),
       onClick: onToggle,
@@ -2478,25 +2653,48 @@ const LogEntryHeader = reactExports.memo(function({
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-400/80 font-mono text-xs font-semibold tabular-nums shrink-0", children: [
-          "#",
-          log.id
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            className: cn(
+              "absolute left-0 top-2 bottom-2 w-0.5 rounded-r-full transition-colors",
+              statusCue.rail
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex h-8 shrink-0 items-center gap-2 rounded-md border px-2 font-mono shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+              statusCue.frame
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("size-1.5 rounded-full", statusCue.dot), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[9px] font-semibold uppercase tracking-normal text-current/65", children: "Shot" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs font-semibold tabular-nums", children: [
+                "#",
+                log.id
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex h-7 items-center gap-1 rounded-md border border-white/10 bg-black/20 px-2 text-muted-foreground text-xs shrink-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", title: log.timestamp, children: formatTimestamp$2(log.timestamp, timeDisplayFormat) })
         ] }),
-        statusCategory !== "success" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
           Badge,
           {
             variant: "outline",
             className: cn(
-              "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums gap-1",
+              "h-6 gap-1 rounded-md px-2 py-0 font-mono text-[10px] font-semibold uppercase tabular-nums shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
               STATUS_BADGE_CLASSES[statusCategory]
             ),
             children: [
-              statusCategory === "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
+              statusCategory === "success" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3", "aria-label": "Success" }) : statusCategory === "server_error" ? /* @__PURE__ */ jsxRuntimeExports.jsx(OctagonAlert, { className: "size-3", "aria-label": "Server error" }) : statusCategory === "client_error" ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Client error" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3 animate-spin", "aria-label": "Pending" }),
+              statusLabel2
             ]
           }
         ),
@@ -2505,7 +2703,7 @@ const LogEntryHeader = reactExports.memo(function({
             Badge,
             {
               variant: "outline",
-              className: "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums gap-1 bg-amber-500/15 text-amber-400 border-amber-500/25",
+              className: "h-6 gap-1 rounded-md border-amber-300/30 bg-amber-300/[0.10] px-2 py-0 font-mono text-[10px] tabular-nums text-amber-100",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Tool schema warnings" }),
                 warningCount
@@ -2515,11 +2713,20 @@ const LogEntryHeader = reactExports.memo(function({
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: warningCount === 1 ? "1 tool schema warning" : `${warningCount} tool schema warnings` })
         ] }),
         log.elapsedMs !== null && (isSlowResponse ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs text-amber-400 shrink-0", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$3(log.elapsedMs) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Slow response" })
-          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "span",
+            {
+              className: cn(
+                TELEMETRY_CHIP_CLASS,
+                "shrink-0 border-amber-300/25 text-amber-200"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$3(log.elapsedMs) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Slow response" })
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipContent, { children: [
             "Slow response: ",
             formatElapsed$3(log.elapsedMs),
@@ -2527,12 +2734,12 @@ const LogEntryHeader = reactExports.memo(function({
             " ",
             formatElapsed$3(slowResponseThresholdSeconds * 1e3)
           ] })
-        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground shrink-0", children: [
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground"), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$3(log.elapsedMs) })
         ] })),
         log.streaming && firstChunkLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs text-cyan-400 shrink-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300"), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { className: "size-3" }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
               "first ",
@@ -2542,13 +2749,13 @@ const LogEntryHeader = reactExports.memo(function({
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Time to first streaming chunk" })
         ] }),
         log.streaming && tokenRateLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs text-emerald-400 shrink-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-emerald-300"), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Gauge, { className: "size-3" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: tokenRateLabel })
           ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Output token throughput after first chunk" })
         ] }),
-        hasTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-center gap-1 text-xs sm:shrink-0", children: [
+        hasTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "min-w-0 sm:shrink-0"), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3 text-muted-foreground" }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-1 font-mono tabular-nums", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -2580,32 +2787,32 @@ const LogEntryHeader = reactExports.memo(function({
             )
           ] })
         ] }),
-        log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs shrink-0", children: [
+        log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0"), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.creation ?? null }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-emerald-400", children: [
             "KV Cache +",
             formatTokens(log.cacheCreationInputTokens)
           ] })
         ] }),
-        log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs shrink-0", children: [
+        log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0"), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.read ?? null }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-purple-400", children: [
             "KV Cache ~",
             formatTokens(log.cacheReadInputTokens)
           ] })
         ] }),
-        messageCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
+        messageCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground"), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: messageCount })
         ] }),
-        toolCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
+        toolCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground"), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: toolCount })
         ] }),
         log.origin !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "span",
           {
-            className: "hidden xl:flex items-center gap-1 text-muted-foreground text-xs shrink-0",
+            className: cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-muted-foreground xl:flex"),
             title: `Origin: ${log.origin}`,
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Globe, { className: "size-3" }),
@@ -2614,7 +2821,7 @@ const LogEntryHeader = reactExports.memo(function({
           }
         ),
         (hasClientPid || hasClientProjectFolder) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden xl:flex items-center gap-1 text-purple-400/80 text-xs shrink-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-purple-300 xl:flex"), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(FileTerminal, { className: "size-3" }),
             hasClientProjectFolder ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: log.clientProjectFolder }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
               "PID ",
@@ -2740,365 +2947,6 @@ function CollapsibleContent({
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent$1, { "data-slot": "collapsible-content", ...props });
 }
-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 getEntries(value) {
-  if (Array.isArray(value)) {
-    return value.map((item, index) => [String(index), item]);
-  }
-  if (typeof value === "object" && value !== null) {
-    return Object.entries(value);
-  }
-  return [];
-}
-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",
-      {
-        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",
-        onClick: (e) => {
-          e.stopPropagation();
-          setExpanded(false);
-        },
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.stopPropagation();
-            setExpanded(false);
-          }
-        },
-        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 copyTextToClipboard(JSON.stringify(value, null, 2)).then((success) => {
-      if (!success) return;
-      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",
-      "aria-label": copied ? "Copied JSON" : "Copy JSON",
-      title: "Copy JSON",
-      children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3 text-green-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3" })
-    }
-  );
-}
-function CopyButton({ value }) {
-  const [copied, setCopied] = reactExports.useState(false);
-  function handleCopy(e) {
-    e.stopPropagation();
-    void copyTextToClipboard(JSON.stringify(value, null, 2)).then((success) => {
-      if (!success) return;
-      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",
-      "aria-label": copied ? "Copied JSON value" : "Copy JSON value",
-      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 ExpandCollapseButton({
-  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: "Expand all descendants",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsDown, { className: "size-3.5 text-muted-foreground" })
-    }
-  );
-}
-const JsonNode = reactExports.memo(function JsonNode2({
-  name,
-  value,
-  level,
-  defaultExpandDepth,
-  isArrayItem,
-  path,
-  expandTargetPath,
-  anatomyPaths
-}) {
-  const isAncestorOfTarget = reactExports.useMemo(() => {
-    if (expandTargetPath === null) return false;
-    if (path === "") return expandTargetPath.length > 0;
-    return expandTargetPath === path || expandTargetPath.startsWith(`${path}/`);
-  }, [expandTargetPath, path]);
-  const initialExpanded = level < defaultExpandDepth || isAncestorOfTarget && isExpandable(value);
-  const [expanded, setExpanded] = reactExports.useState(initialExpanded);
-  reactExports.useEffect(() => {
-    if (isAncestorOfTarget && isExpandable(value) && !expanded) {
-      setExpanded(true);
-    }
-  }, [expandTargetPath]);
-  const [childResetKey, setChildResetKey] = reactExports.useState(0);
-  const [childDepthOverride, setChildDepthOverride] = reactExports.useState(null);
-  const expandable = isExpandable(value);
-  const fullyExpanded = childDepthOverride === Number.POSITIVE_INFINITY;
-  const entries = reactExports.useMemo(() => getEntries(value), [value]);
-  const hasExpandableChild = reactExports.useMemo(
-    () => entries.some(([, child]) => isExpandable(child)),
-    [entries]
-  );
-  const dataType = classifyValue(value);
-  const openBracket = dataType === "array" ? "[" : "{";
-  const closeBracket = dataType === "array" ? "]" : "}";
-  const hasAnatomyPath = anatomyPaths !== null && anatomyPaths.has(path);
-  function expandAllDeep() {
-    setExpanded(true);
-    setChildDepthOverride(Number.POSITIVE_INFINITY);
-    setChildResetKey((k) => k + 1);
-  }
-  function collapseToDefault() {
-    setExpanded(false);
-    setChildDepthOverride(0);
-    setChildResetKey((k) => k + 1);
-  }
-  function handleRowToggle() {
-    if (fullyExpanded) {
-      collapseToDefault();
-    } else {
-      setExpanded(!expanded);
-    }
-  }
-  function handleExpandAll(e) {
-    e.stopPropagation();
-    expandAllDeep();
-  }
-  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"
-        ),
-        "data-anatomy-path": hasAnatomyPath ? path : void 0,
-        onClick: expandable ? handleRowToggle : void 0,
-        onKeyDown: expandable ? (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleRowToggle();
-          }
-        } : void 0,
-        onDoubleClick: expandable && hasExpandableChild ? () => expandAllDeep() : void 0,
-        role: expandable ? "button" : void 0,
-        tabIndex: expandable ? 0 : void 0,
-        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: [
-              " ",
-              entries.length,
-              " ",
-              entries.length === 1 ? "item" : "items",
-              " ",
-              closeBracket
-            ] })
-          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PrimitiveValue, { value }) }),
-          expandable && hasExpandableChild && !fullyExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandCollapseButton, { onClick: handleExpandAll }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { value })
-        ]
-      }
-    ),
-    expandable && expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pl-4", children: [
-      entries.map(([key, childValue]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        JsonNode2,
-        {
-          name: key,
-          value: childValue,
-          level: level + 1,
-          defaultExpandDepth: effectiveChildDepth,
-          isArrayItem: dataType === "array",
-          path: path === "" ? `/${key}` : `${path}/${key}`,
-          expandTargetPath,
-          anatomyPaths
-        },
-        key
-      )),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground py-0.5 px-1", children: closeBracket })
-    ] }, childResetKey)
-  ] });
-});
-function JsonViewer({
-  data,
-  defaultExpandDepth = 0,
-  className,
-  showCopy = false,
-  bulkDepth: controlledBulkDepth,
-  bulkRevision: controlledBulkRevision,
-  anatomyPaths = null,
-  expandToPath = null
-}) {
-  const expandable = isExpandable(data);
-  const entries = reactExports.useMemo(() => getEntries(data), [data]);
-  const bulkDepth = controlledBulkDepth ?? defaultExpandDepth;
-  const bulkRevision = controlledBulkRevision ?? 0;
-  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("div", { className: "mb-2 flex items-center justify-end gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyValueButton, { value: data }) }),
-    entries.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-white/10 bg-black/20 px-3 py-2 text-muted-foreground", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-cyan-300", children: isArray ? "[]" : "{}" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 text-[10px] uppercase", children: "0 items" })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: entries.map(([key, childValue]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      JsonNode,
-      {
-        name: key,
-        value: childValue,
-        level: 0,
-        defaultExpandDepth: bulkDepth,
-        isArrayItem: isArray,
-        path: `/${key}`,
-        expandTargetPath: expandToPath,
-        anatomyPaths
-      },
-      key
-    )) }, bulkRevision)
-  ] }) });
-}
-const JsonViewerFromString = reactExports.memo(function JsonViewerFromString2({
-  text,
-  defaultExpandDepth = 0,
-  className,
-  bulkDepth,
-  bulkRevision
-}) {
-  const parsed = reactExports.useMemo(() => parseJsonText(text), [text]);
-  if (parsed.kind === "json") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      JsonViewer,
-      {
-        data: parsed.data,
-        defaultExpandDepth,
-        className,
-        bulkDepth,
-        bulkRevision
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: cn("font-mono text-xs whitespace-pre-wrap break-words", className), children: text });
-});
-const jsonViewer = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  JsonViewer,
-  JsonViewerFromString
-}, Symbol.toStringTag, { value: "Module" }));
 function ScrollArea({
   className,
   children,
@@ -3253,10 +3101,16 @@ function ToolRow({ tool, called }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-white/10 bg-white/[0.02] px-2.5 py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: open && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-white/10 bg-white/[0.02] px-2.5 py-2", children: [
       tool.description !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: tool.description }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(RequiredParameters, { names: tool.requiredParameters }),
-      tool.schema !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "max-h-64 rounded-md border border-white/10 bg-[#06080b] p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewer, { data: safeJsonValue(tool.schema), defaultExpandDepth: 0 }) })
+      tool.schema !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "max-h-64 rounded-md border border-white/10 bg-[#06080b] p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        reactExports.Suspense,
+        {
+          fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground", children: "Loading JSON..." }),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyJsonViewer, { data: safeJsonValue(tool.schema), defaultExpandDepth: 0 })
+        }
+      ) })
     ] }) })
   ] }) });
 }
@@ -3369,26 +3223,6 @@ const RequestTools = reactExports.memo(function RequestTools2({
     ] })
   ] });
 });
-const LOG_FOCUS_REQUEST_EVENT = "agent-inspector:focus-log";
-function dispatchLogFocusRequest(request) {
-  window.dispatchEvent(new CustomEvent(LOG_FOCUS_REQUEST_EVENT, { detail: request }));
-}
-function readLogFocusRequest(event) {
-  if (typeof CustomEvent === "undefined" || !(event instanceof CustomEvent)) return null;
-  const detail = event.detail;
-  const logId = safeGetOwnProperty(detail, "logId");
-  if (typeof logId !== "number" || !Number.isInteger(logId) || logId < 0) return null;
-  const tab = safeGetOwnProperty(detail, "tab");
-  switch (tab) {
-    case "anatomy":
-    case "request":
-      return { logId, tab };
-    case void 0:
-      return { logId, tab: "request" };
-    default:
-      return null;
-  }
-}
 function shouldShowRawRequestTab(apiFormat, viewMode, strip) {
   return apiFormat === "anthropic" && viewMode === "full" && strip;
 }
@@ -3500,10 +3334,12 @@ function parseAnthropicTool(tool) {
 }
 function parseOpenAITool(tool) {
   const fn = safeGetOwnProperty(tool, "function");
-  const name = safeGetOwnProperty(fn, "name");
+  const toolType = safeGetOwnProperty(tool, "type");
+  if (fn === void 0 && toolType !== "function") return null;
+  const name = safeGetOwnProperty(fn, "name") ?? safeGetOwnProperty(tool, "name");
   if (typeof name !== "string" || name.length === 0) return null;
-  const description = safeGetOwnProperty(fn, "description");
-  const schema = safeGetOwnProperty(fn, "parameters") ?? null;
+  const description = safeGetOwnProperty(fn, "description") ?? safeGetOwnProperty(tool, "description");
+  const schema = safeGetOwnProperty(fn, "parameters") ?? safeGetOwnProperty(tool, "parameters") ?? null;
   const normalizedDescription = typeof description === "string" ? description : null;
   return {
     name,
@@ -3576,7 +3412,7 @@ const FULL_LOG_HYDRATION_TIMEOUT_MS = 15e3;
 const BODY_CHUNK_TIMEOUT_MS = 15e3;
 const BODY_CHUNK_BYTES = 256 * 1024;
 const CHUNKED_BODY_THRESHOLD_BYTES = 1024 * 1024;
-const TAB_TRIGGER_CLASS = "h-9 flex-none rounded-none border-0 border-b-2 border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none hover:bg-cyan-400/[0.04] hover:text-foreground data-[state=active]:border-cyan-300 data-[state=active]:bg-transparent data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
+const TAB_TRIGGER_CLASS = "h-9 flex-none rounded-none border-0 border-b-2 border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:bg-cyan-400/[0.05] hover:text-foreground data-[state=active]:border-cyan-300 data-[state=active]:bg-cyan-300/[0.04] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
 function createEmptyBodyPreviewState(totalBytes = null) {
   return {
     status: "idle",
@@ -3627,7 +3463,7 @@ function ExpandedPanel({
     "div",
     {
       className: cn(
-        "inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-md border border-white/10 bg-[#06080b] p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+        "inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-md border border-cyan-300/10 bg-[#05070a] p-3 shadow-[0_16px_45px_rgba(0,0,0,0.24),inset_0_1px_0_rgba(255,255,255,0.05)]",
         className
       ),
       children
@@ -3786,6 +3622,7 @@ const LogEntry = reactExports.memo(function({
   );
   const requestJsonRef = reactExports.useRef(null);
   const logIdRef = reactExports.useRef(log.id);
+  const bodyHydrationInFlightRef = reactExports.useRef(false);
   const displayLog = hydratedLog ?? log;
   const useChunkedBody = hydratedLog === null && shouldUseChunkedBodyLoading(log);
   const requestPreviewBody = bodyPreviewTextForView(useChunkedBody, requestPreview);
@@ -3817,10 +3654,10 @@ const LogEntry = reactExports.memo(function({
     requestPreviewShouldParse ? displayedRequestBody : null
   );
   const rawRequestExpansion = useJsonBulkExpansion(
-    requestPreviewShouldParse ? rawRequestBodyForView : null
+    activeTab === "raw-request" && requestPreviewShouldParse ? rawRequestBodyForView : null
   );
   const responseExpansion = useJsonBulkExpansion(
-    responsePreviewShouldParse ? responseTextForView : null
+    activeTab === "raw" && responsePreviewShouldParse ? responseTextForView : null
   );
   const headersText = reactExports.useMemo(
     () => displayLog.headers && Object.keys(displayLog.headers).length > 0 ? JSON.stringify(displayLog.headers, null, 2) : null,
@@ -3993,6 +3830,7 @@ const LogEntry = reactExports.memo(function({
   }, [anatomySegments, expanded]);
   reactExports.useEffect(() => {
     logIdRef.current = log.id;
+    bodyHydrationInFlightRef.current = false;
     setHydratedLog(null);
     setBodyHydrationState("idle");
     setRequestPreview(createEmptyBodyPreviewState(log.rawRequestBodyBytes ?? null));
@@ -4001,8 +3839,9 @@ const LogEntry = reactExports.memo(function({
   reactExports.useEffect(() => {
     if (!expanded) return;
     if (!shouldHydrateLogBody(log)) return;
-    if (hydratedLog !== null || bodyHydrationState !== "idle") return;
+    if (hydratedLog !== null || bodyHydrationInFlightRef.current) return;
     let cancelled = false;
+    bodyHydrationInFlightRef.current = true;
     setBodyHydrationState("loading");
     void fetchJsonWithTimeout(
       `/api/logs/${String(log.id)}`,
@@ -4010,17 +3849,19 @@ const LogEntry = reactExports.memo(function({
       FULL_LOG_HYDRATION_TIMEOUT_MS
     ).then((fullLog) => {
       if (cancelled) return;
+      bodyHydrationInFlightRef.current = false;
       setHydratedLog(fullLog);
       setBodyHydrationState("idle");
     }).catch(() => {
       if (cancelled) return;
+      bodyHydrationInFlightRef.current = false;
       setBodyHydrationState("failed");
     });
     return () => {
       cancelled = true;
+      bodyHydrationInFlightRef.current = false;
     };
   }, [
-    bodyHydrationState,
     expanded,
     hydratedLog,
     log.bodyContentMode,
@@ -4060,10 +3901,27 @@ const LogEntry = reactExports.memo(function({
       "div",
       {
         className: cn(
-          "mb-2 overflow-hidden rounded-md border bg-[#090a0d] transition-[background-color,border-color,box-shadow]",
-          expanded ? "border-cyan-300/20 shadow-[0_18px_60px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.05)]" : "border-border/70 hover:border-border"
+          "relative mb-2 overflow-hidden rounded-lg border bg-[#07090d] transition-[background-color,border-color,box-shadow]",
+          expanded ? "border-cyan-300/25 shadow-[0_24px_80px_rgba(0,0,0,0.34),0_0_0_1px_rgba(103,232,249,0.04),inset_0_1px_0_rgba(255,255,255,0.06)]" : "border-white/10 shadow-[0_6px_24px_rgba(0,0,0,0.16)] hover:border-cyan-300/15"
         ),
         children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: cn(
+                "pointer-events-none absolute inset-y-3 left-1 w-px rounded-full",
+                expanded ? "bg-cyan-300/45 shadow-[0_0_20px_rgba(103,232,249,0.28)]" : "bg-white/10"
+              ),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-x-3 top-0 h-px bg-gradient-to-r from-transparent via-white/15 to-transparent",
+              "aria-hidden": "true"
+            }
+          ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             LogEntryHeader,
             {
@@ -4082,186 +3940,195 @@ const LogEntry = reactExports.memo(function({
               }
             }
           ),
-          expanded && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              className: "border-t border-white/10 bg-[#050607]/80 pt-2",
+              className: "relative border-t border-cyan-300/10 bg-[linear-gradient(180deg,#06090d_0%,#040506_100%)] pt-2",
               onClick: (e) => e.stopPropagation(),
               onKeyDown: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "gap-2", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  TabsList,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
                   {
-                    variant: "line",
-                    className: "inspector-scrollbar mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-none border-b border-white/10 bg-transparent p-0",
-                    children: [
-                      viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "raw-headers", children: "Raw Headers" }),
-                      viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "headers", children: "Headers" }),
-                      anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "anatomy", children: "Context" }),
-                      shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "raw-request", children: "Raw Request" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "request", children: "Request" }),
-                      viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "raw", children: "Raw Response" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "parsed", children: "Response" })
-                    ]
+                    className: "pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-cyan-300/[0.035] to-transparent",
+                    "aria-hidden": "true"
                   }
                 ),
-                shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
-                  useChunkedBody && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    BodyPreviewNotice,
-                    {
-                      label: "Request",
-                      state: requestPreview,
-                      expectedBytes: log.rawRequestBodyBytes ?? null,
-                      onLoadMore: () => loadBodyChunk("request", requestPreview.offset)
-                    }
-                  ),
-                  rawRequestBodyForView === null ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, { children: useChunkedBody ? "Request preview is loading" : "No request body" }) : rawRequestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    LazyJsonViewer,
-                    {
-                      data: rawRequestExpansion.parsedData,
-                      bulkDepth: rawRequestExpansion.bulkDepth,
-                      bulkRevision: rawRequestExpansion.bulkRevision
-                    }
-                  ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(RawTextBlock, { children: rawRequestBodyForView })
-                ] }) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
-                  bodyHydrationState === "loading" && /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "loading", children: "Loading full request and response bodies..." }),
-                  bodyHydrationState === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "warning", children: "Full request and response bodies could not be loaded. Compact metadata is still available." }),
-                  useChunkedBody && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    BodyPreviewNotice,
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "gap-2", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    TabsList,
                     {
-                      label: "Request",
-                      state: requestPreview,
-                      expectedBytes: log.rawRequestBodyBytes ?? null,
-                      onLoadMore: () => loadBodyChunk("request", requestPreview.offset)
+                      variant: "line",
+                      className: "inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-none border-b border-cyan-300/10 bg-black/10 p-0",
+                      children: [
+                        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "raw-headers", children: "Raw Headers" }),
+                        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "headers", children: "Headers" }),
+                        anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "anatomy", children: "Context" }),
+                        shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "raw-request", children: "Raw Request" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "request", children: "Request" }),
+                        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "raw", children: "Raw Response" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "parsed", children: "Response" })
+                      ]
                     }
                   ),
-                  warnings.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(NoticeBlock, { tone: "warning", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 font-semibold text-amber-300", children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3.5" }),
-                      "Tool schema warnings"
+                  shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
+                    useChunkedBody && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      BodyPreviewNotice,
+                      {
+                        label: "Request",
+                        state: requestPreview,
+                        expectedBytes: log.rawRequestBodyBytes ?? null,
+                        onLoadMore: () => loadBodyChunk("request", requestPreview.offset)
+                      }
+                    ),
+                    rawRequestBodyForView === null ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, { children: useChunkedBody ? "Request preview is loading" : "No request body" }) : rawRequestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      LazyJsonViewer,
+                      {
+                        data: rawRequestExpansion.parsedData,
+                        bulkDepth: rawRequestExpansion.bulkDepth,
+                        bulkRevision: rawRequestExpansion.bulkRevision
+                      }
+                    ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(RawTextBlock, { children: rawRequestBodyForView })
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
+                    bodyHydrationState === "loading" && /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "loading", children: "Loading full request and response bodies..." }),
+                    bodyHydrationState === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "warning", children: "Full request and response bodies could not be loaded. Compact metadata is still available." }),
+                    useChunkedBody && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      BodyPreviewNotice,
+                      {
+                        label: "Request",
+                        state: requestPreview,
+                        expectedBytes: log.rawRequestBodyBytes ?? null,
+                        onLoadMore: () => loadBodyChunk("request", requestPreview.offset)
+                      }
+                    ),
+                    warnings.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(NoticeBlock, { tone: "warning", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 font-semibold text-amber-300", children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3.5" }),
+                        "Tool schema warnings"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "mt-2 space-y-1 text-muted-foreground", children: warnings.map((warning) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: warning }, warning)) })
                     ] }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "mt-2 space-y-1 text-muted-foreground", children: warnings.map((warning) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: warning }, warning)) })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    RequestTools,
-                    {
-                      summary: requestTools,
-                      calledToolNames: responseAnalysis.toolNames ?? []
-                    }
-                  ),
-                  requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    RequestDiffContent,
-                    {
-                      rawBody: displayLog.rawRequestBody,
-                      displayedBody: displayedRequestBody,
-                      emptyLabel: "No transformation applied; raw and sent request bodies are identical."
-                    }
-                  ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: requestJsonRef, children: displayedRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, { children: useChunkedBody ? "Request preview is loading" : "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(RawTextBlock, { children: displayedRequestBody }) })
-                ] }) }),
-                anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "anatomy", children: activeTab === "anatomy" && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedPanel, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  LazyRequestAnatomy,
-                  {
-                    parsed: requestExpansion.parsedData,
-                    inputTokens: displayLog.inputTokens ?? null,
-                    model: displayLog.model,
-                    segments: anatomySegments,
-                    onSegmentActivate: jumpToAnatomySegment
-                  }
-                ) }) }) }),
-                viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: activeTab === "headers" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end gap-2 mb-2", children: shouldShowHeadersDiffButton(
-                    viewMode,
-                    displayLog.rawHeaders !== void 0 && Object.keys(displayLog.rawHeaders).length > 0
-                  ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    DiffToggleButton,
-                    {
-                      active: headersDiff,
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        setHeadersDiff(!headersDiff);
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      RequestTools,
+                      {
+                        summary: requestTools,
+                        calledToolNames: responseAnalysis.toolNames ?? []
                       }
-                    }
-                  ) }),
-                  headersDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    HeadersDiffContent,
-                    {
-                      rawHeaders: displayLog.rawHeaders,
-                      headers: displayLog.headers,
-                      emptyLabel: "No transformation applied; raw and processed headers are identical."
-                    }
-                  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderRows, { headers: displayLog.headers, emptyLabel: "No headers captured" })
-                ] }) }),
-                viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: activeTab === "raw-headers" && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedPanel, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  HeaderRows,
-                  {
-                    headers: displayLog.rawHeaders,
-                    emptyLabel: "No raw headers captured"
-                  }
-                ) }) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: activeTab === "raw" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { className: "space-y-3", children: [
-                  useChunkedBody && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    BodyPreviewNotice,
-                    {
-                      label: "Response",
-                      state: responsePreview,
-                      expectedBytes: log.responseTextBytes ?? null,
-                      onLoadMore: () => loadBodyChunk("response", responsePreview.offset)
-                    }
-                  ),
-                  displayLog.error !== void 0 && displayLog.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "danger", title: "SSE Error", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: displayLog.error }) }),
-                  responseTextForView !== null && responsePreviewShouldParse ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    LazyJsonViewerFromString,
-                    {
-                      text: responseTextForView,
-                      defaultExpandDepth: 0,
-                      bulkDepth: responseExpansion.bulkDepth,
-                      bulkRevision: responseExpansion.bulkRevision
-                    }
-                  ) }) : responseTextForView !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(RawTextBlock, { children: responseTextForView }) : /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, { children: useChunkedBody ? "Response preview is loading" : "No response" }),
-                  displayLog.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    LazyStreamingChunkSequence,
-                    {
-                      logId: displayLog.id,
-                      truncated: displayLog.streamingChunksPath !== null
-                    }
-                  ) })
-                ] }) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: activeTab === "parsed" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
-                  useChunkedBody && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    BodyPreviewNotice,
+                    ),
+                    requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      RequestDiffContent,
+                      {
+                        rawBody: displayLog.rawRequestBody,
+                        displayedBody: displayedRequestBody,
+                        emptyLabel: "No transformation applied; raw and sent request bodies are identical."
+                      }
+                    ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: requestJsonRef, children: displayedRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, { children: useChunkedBody ? "Request preview is loading" : "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(RawTextBlock, { children: displayedRequestBody }) })
+                  ] }) }),
+                  anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "anatomy", children: activeTab === "anatomy" && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedPanel, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    LazyRequestAnatomy,
                     {
-                      label: "Response",
-                      state: responsePreview,
-                      expectedBytes: log.responseTextBytes ?? null,
-                      onLoadMore: () => loadBodyChunk("response", responsePreview.offset)
+                      parsed: requestExpansion.parsedData,
+                      inputTokens: displayLog.inputTokens ?? null,
+                      model: displayLog.model,
+                      segments: anatomySegments,
+                      onSegmentActivate: jumpToAnatomySegment
                     }
-                  ),
-                  responsePreviewIsActive && !responsePreviewShouldParse ? /* @__PURE__ */ jsxRuntimeExports.jsx(RawTextBlock, { children: responseTextForView }) : /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    LazyResponseView,
+                  ) }) }) }),
+                  viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: activeTab === "headers" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end gap-2 mb-2", children: shouldShowHeadersDiffButton(
+                      viewMode,
+                      displayLog.rawHeaders !== void 0 && Object.keys(displayLog.rawHeaders).length > 0
+                    ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      DiffToggleButton,
+                      {
+                        active: headersDiff,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          setHeadersDiff(!headersDiff);
+                        }
+                      }
+                    ) }),
+                    headersDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      HeadersDiffContent,
+                      {
+                        rawHeaders: displayLog.rawHeaders,
+                        headers: displayLog.headers,
+                        emptyLabel: "No transformation applied; raw and processed headers are identical."
+                      }
+                    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderRows, { headers: displayLog.headers, emptyLabel: "No headers captured" })
+                  ] }) }),
+                  viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: activeTab === "raw-headers" && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedPanel, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    HeaderRows,
                     {
-                      responseText: responseTextForView,
-                      responseStatus: displayLog.responseStatus,
-                      streaming: displayLog.streaming,
-                      inputTokens: displayLog.inputTokens,
-                      outputTokens: displayLog.outputTokens,
-                      cacheCreationInputTokens: displayLog.cacheCreationInputTokens,
-                      cacheReadInputTokens: displayLog.cacheReadInputTokens,
-                      apiFormat: resolvedFormat,
-                      error: displayLog.error
+                      headers: displayLog.rawHeaders,
+                      emptyLabel: "No raw headers captured"
                     }
-                  ) })
-                ] }) })
-              ] })
+                  ) }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: activeTab === "raw" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { className: "space-y-3", children: [
+                    useChunkedBody && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      BodyPreviewNotice,
+                      {
+                        label: "Response",
+                        state: responsePreview,
+                        expectedBytes: log.responseTextBytes ?? null,
+                        onLoadMore: () => loadBodyChunk("response", responsePreview.offset)
+                      }
+                    ),
+                    displayLog.error !== void 0 && displayLog.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "danger", title: "SSE Error", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: displayLog.error }) }),
+                    responseTextForView !== null && responsePreviewShouldParse ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      LazyJsonViewerFromString,
+                      {
+                        text: responseTextForView,
+                        defaultExpandDepth: 0,
+                        bulkDepth: responseExpansion.bulkDepth,
+                        bulkRevision: responseExpansion.bulkRevision
+                      }
+                    ) }) : responseTextForView !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(RawTextBlock, { children: responseTextForView }) : /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, { children: useChunkedBody ? "Response preview is loading" : "No response" }),
+                    displayLog.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      LazyStreamingChunkSequence,
+                      {
+                        logId: displayLog.id,
+                        truncated: displayLog.streamingChunksPath !== null
+                      }
+                    ) })
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: activeTab === "parsed" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
+                    useChunkedBody && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      BodyPreviewNotice,
+                      {
+                        label: "Response",
+                        state: responsePreview,
+                        expectedBytes: log.responseTextBytes ?? null,
+                        onLoadMore: () => loadBodyChunk("response", responsePreview.offset)
+                      }
+                    ),
+                    responsePreviewIsActive && !responsePreviewShouldParse ? /* @__PURE__ */ jsxRuntimeExports.jsx(RawTextBlock, { children: responseTextForView }) : /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      LazyResponseView,
+                      {
+                        responseText: responseTextForView,
+                        responseStatus: displayLog.responseStatus,
+                        streaming: displayLog.streaming,
+                        inputTokens: displayLog.inputTokens,
+                        outputTokens: displayLog.outputTokens,
+                        cacheCreationInputTokens: displayLog.cacheCreationInputTokens,
+                        cacheReadInputTokens: displayLog.cacheReadInputTokens,
+                        apiFormat: resolvedFormat,
+                        error: displayLog.error
+                      }
+                    ) })
+                  ] }) })
+                ] })
+              ]
             }
           )
         ]
@@ -4383,6 +4250,19 @@ function ToolTraceEvents({ events }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-3 mb-2 grid gap-1.5", children: events.map((event) => /* @__PURE__ */ jsxRuntimeExports.jsx(ToolTraceEventRow, { event }, event.id)) });
 }
 const PREVIEW_LIMIT = 180;
+const toolTraceCache = /* @__PURE__ */ new WeakMap();
+function responseMayContainToolTrace(log, format) {
+  const responseText = log.responseText;
+  if (responseText === null) return false;
+  switch (format) {
+    case "anthropic":
+      return responseText.includes("tool_use");
+    case "openai":
+      return responseText.includes("tool_calls") || responseText.includes("function_call");
+    case "unknown":
+      return false;
+  }
+}
 function shouldRenderConversationContent(standalone, expanded) {
   return standalone || expanded;
 }
@@ -4494,18 +4374,59 @@ function extractOpenAIToolTraceEvents(log) {
       });
     }
   }
+  const output = safeGetOwnProperty(parsed, "output");
+  if (Array.isArray(output)) {
+    for (const item of output) {
+      if (safeGetOwnProperty(item, "type") !== "function_call") continue;
+      const name = safeGetOwnProperty(item, "name");
+      if (typeof name !== "string" || name.length === 0) continue;
+      const args = safeGetOwnProperty(item, "arguments");
+      events.push({
+        id: `${String(log.id)}-openai-tool-${String(events.length)}`,
+        logId: log.id,
+        index: events.length,
+        provider: "openai",
+        name,
+        argumentsText: copyValue(args),
+        argumentsPreview: previewValue(args)
+      });
+    }
+  }
   return events;
 }
 function extractToolTraceEvents(log) {
+  const cached = toolTraceCache.get(log);
+  if (cached !== void 0 && cached.apiFormat === log.apiFormat && cached.responseText === log.responseText) {
+    return cached.events;
+  }
   const format = resolveLogFormat(log);
+  if (!responseMayContainToolTrace(log, format)) {
+    const events2 = [];
+    toolTraceCache.set(log, {
+      apiFormat: log.apiFormat,
+      responseText: log.responseText,
+      events: events2
+    });
+    return events2;
+  }
+  let events;
   switch (format) {
     case "anthropic":
-      return extractAnthropicToolTraceEvents(log);
+      events = extractAnthropicToolTraceEvents(log);
+      break;
     case "openai":
-      return extractOpenAIToolTraceEvents(log);
+      events = extractOpenAIToolTraceEvents(log);
+      break;
     case "unknown":
-      return [];
+      events = [];
+      break;
   }
+  toolTraceCache.set(log, {
+    apiFormat: log.apiFormat,
+    responseText: log.responseText,
+    events
+  });
+  return events;
 }
 function buildTraceSummary(logs, slowResponseThresholdSeconds, knowledgeCandidateCount = 0) {
   let failedCallCount = 0;
@@ -4571,7 +4492,8 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
   onCompareWithPrevious,
   comparisonPredecessors,
   turnIndex = 0,
-  timeDisplayFormat
+  timeDisplayFormat,
+  pendingFocusRequest
 }) {
   const lastIdx = entries.length - 1;
   const lastStop = entries[lastIdx]?.stopReason ?? null;
@@ -4601,6 +4523,19 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
       window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
     };
   }, [collapsible, entries]);
+  reactExports.useEffect(() => {
+    if (pendingFocusRequest === void 0) return void 0;
+    if (!entries.some((entry) => entry.log.id === pendingFocusRequest.logId)) return void 0;
+    if (collapsible) setCollapsed(false);
+    const timer = window.setTimeout(() => {
+      dispatchLogFocusRequest({
+        logId: pendingFocusRequest.logId,
+        tab: pendingFocusRequest.tab,
+        source: "virtualizer"
+      });
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [collapsible, entries, pendingFocusRequest]);
   const toggleCollapse = reactExports.useCallback(() => {
     if (collapsible) setCollapsed((prev) => !prev);
   }, [collapsible]);
@@ -4639,7 +4574,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
   }, [entries]);
   const StartCrab = reactExports.useMemo(() => getCrabVariant(entries[0]?.log.id ?? 0), [entries]);
   const EndCrab = reactExports.useMemo(() => getCrabVariant(entries[lastIdx]?.log.id ?? 0), [entries, lastIdx]);
-  const bgClass = turnIndex % 2 === 0 ? "bg-muted/10" : "bg-muted/25";
+  const bgClass = turnIndex % 2 === 0 ? "bg-[#070a0f]" : "bg-[#090d12]";
   const aggregateIsSlow = aggregate.maxElapsed !== null && slowResponseThresholdSeconds > 0 && aggregate.maxElapsed > slowResponseThresholdSeconds * 1e3;
   const toolEventsByLogId = reactExports.useMemo(() => {
     const events = /* @__PURE__ */ new Map();
@@ -4667,17 +4602,25 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
   }, []);
   const firstLogId = entries[0]?.log.id ?? turnIndex;
   const turnLabel = `Turn ${String(turnIndex + 1)}`;
+  const containmentStyle = reactExports.useMemo(
+    () => ({
+      contentVisibility: "auto",
+      containIntrinsicSize: collapsed ? "48px" : "160px"
+    }),
+    [collapsed]
+  );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref: containerRef,
+      style: containmentStyle,
       tabIndex: collapsed ? void 0 : 0,
       role: collapsed ? void 0 : "group",
       "aria-label": collapsed ? void 0 : turnLabel,
       "data-nav-id": collapsed ? void 0 : `turn-${String(firstLogId)}`,
       className: cn(
-        "border rounded-lg",
-        isPending ? "border-amber-500/10" : "border-transparent",
+        "border rounded-lg transition-[border-color,box-shadow]",
+        isPending ? "border-amber-300/15 shadow-[0_0_0_1px_rgba(252,211,77,0.04)]" : "border-transparent",
         !collapsed && "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
       ),
       children: collapsed ? (
@@ -4763,7 +4706,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                 "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",
+                    "flex-1 min-w-0 mb-0.5 rounded-lg border border-cyan-300/10 py-1.5 px-3 flex items-center gap-3 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
                     bgClass
                   ),
                   children: [
@@ -4861,6 +4804,103 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
     }
   );
 });
+const VIRTUALIZE_TURN_THRESHOLD = 24;
+const ESTIMATED_TURN_HEIGHT = 132;
+const VIRTUAL_OVERSCAN$1 = 8;
+function shouldVirtualizeTurnGroups(turnCount) {
+  return turnCount > VIRTUALIZE_TURN_THRESHOLD;
+}
+function buildLogTurnIndex(turnGroups) {
+  const result = /* @__PURE__ */ new Map();
+  for (let index = 0; index < turnGroups.length; index++) {
+    const group = turnGroups[index];
+    if (group === void 0) continue;
+    for (const entry of group.entries) {
+      result.set(entry.log.id, index);
+    }
+  }
+  return result;
+}
+function renderTurnGroup(turnGroup, props, pendingFocusRequest) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    TurnGroup,
+    {
+      entries: turnGroup.entries,
+      viewMode: props.viewMode,
+      strip: props.strip,
+      slowResponseThresholdSeconds: props.slowResponseThresholdSeconds,
+      timeDisplayFormat: props.timeDisplayFormat,
+      cacheTrends: props.cacheTrends,
+      onCompareWithPrevious: props.onCompareWithPrevious,
+      comparisonPredecessors: props.comparisonPredecessors,
+      turnIndex: turnGroup.turnIndex,
+      pendingFocusRequest
+    },
+    turnGroup.turnIndex
+  );
+}
+function TurnGroupList(props) {
+  if (!shouldVirtualizeTurnGroups(props.turnGroups.length)) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: props.turnGroups.map((turnGroup) => renderTurnGroup(turnGroup, props)) });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(VirtualizedTurnGroupList, { ...props });
+}
+function VirtualizedTurnGroupList(props) {
+  const { turnGroups } = props;
+  const [pendingFocusRequest, setPendingFocusRequest] = reactExports.useState(
+    null
+  );
+  const virtualizer = useWindowVirtualizer({
+    count: turnGroups.length,
+    estimateSize: () => ESTIMATED_TURN_HEIGHT,
+    overscan: VIRTUAL_OVERSCAN$1,
+    getItemKey: (index) => turnGroups[index]?.turnIndex ?? index
+  });
+  const turnIndexByLogId = reactExports.useMemo(() => buildLogTurnIndex(turnGroups), [turnGroups]);
+  reactExports.useEffect(() => {
+    const handleLogFocusRequest = (event) => {
+      const request = readLogFocusRequest(event);
+      if (request === null) return;
+      if (request.source === "virtualizer") return;
+      const turnIndex = turnIndexByLogId.get(request.logId);
+      if (turnIndex === void 0) return;
+      virtualizer.scrollToIndex(turnIndex, { align: "center" });
+      setPendingFocusRequest((previous) => ({
+        ...request,
+        turnIndex,
+        nonce: previous === null ? 1 : previous.nonce + 1
+      }));
+    };
+    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    return () => {
+      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    };
+  }, [turnIndexByLogId, virtualizer]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: "relative w-full",
+      style: { height: `${virtualizer.getTotalSize()}px` },
+      "data-virtualized-turn-list": "true",
+      children: virtualizer.getVirtualItems().map((virtualItem) => {
+        const turnGroup = turnGroups[virtualItem.index];
+        if (turnGroup === void 0) return null;
+        const itemFocusRequest = pendingFocusRequest !== null && pendingFocusRequest.turnIndex === virtualItem.index ? pendingFocusRequest : void 0;
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            "data-index": virtualItem.index,
+            ref: virtualizer.measureElement,
+            className: "absolute left-0 top-0 w-full",
+            style: { transform: `translateY(${virtualItem.start}px)` },
+            children: renderTurnGroup(turnGroup, props, itemFocusRequest)
+          },
+          virtualItem.key
+        );
+      })
+    }
+  );
+}
 const CandidateResponseSchema = object({
   candidates: array(KnowledgeCandidateSchema)
 });
@@ -5703,21 +5743,19 @@ const ConversationGroup = reactExports.memo(function({
           timeDisplayFormat
         }
       ),
-      turnGroups.map((tg) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        TurnGroup,
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TurnGroupList,
         {
-          entries: tg.entries,
+          turnGroups,
           viewMode,
           strip,
           slowResponseThresholdSeconds,
           timeDisplayFormat,
           cacheTrends,
           onCompareWithPrevious,
-          comparisonPredecessors,
-          turnIndex: tg.turnIndex
-        },
-        tg.turnIndex
-      ))
+          comparisonPredecessors
+        }
+      )
     ] })
   ] });
 });
@@ -7449,6 +7487,7 @@ const ExternalProviderSchema = object({
   format: _enum(["anthropic", "openai"]),
   anthropicBaseUrl: string(),
   openaiBaseUrl: string(),
+  openaiResponsesBaseUrl: string().optional().default(""),
   models: array(string()),
   sourceTool: _enum(["claude-code", "opencode", "mimo-code"]),
   alreadyExists: boolean()
@@ -7545,6 +7584,7 @@ function ImportWizardDialog({
       format: p.format,
       anthropicBaseUrl: p.anthropicBaseUrl,
       openaiBaseUrl: p.openaiBaseUrl,
+      openaiResponsesBaseUrl: p.openaiResponsesBaseUrl,
       models: p.models,
       createdAt: now,
       updatedAt: now
@@ -7624,7 +7664,7 @@ function ImportWizardDialog({
                 p.models.slice(0, 4).join(", "),
                 p.models.length > 4 ? ` +${p.models.length - 4} more` : ""
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground mt-0.5 truncate", children: p.format === "anthropic" ? p.anthropicBaseUrl : p.openaiBaseUrl }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground mt-0.5 truncate", children: p.format === "anthropic" ? p.anthropicBaseUrl : p.openaiResponsesBaseUrl !== "" ? p.openaiResponsesBaseUrl : p.openaiBaseUrl }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: p.apiKey.length > 8 ? `${p.apiKey.slice(0, 4)}••••${p.apiKey.slice(-4)}` : "••••" })
             ] })
           ]
@@ -8069,12 +8109,17 @@ function ProviderCard({
         ] }),
         provider.openaiBaseUrl !== void 0 && provider.openaiBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "OpenAI:" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "OpenAI Chat:" }),
             " ",
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: provider.openaiBaseUrl })
           ] }),
           testResults !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: testResults.openai })
         ] }),
+        provider.openaiResponsesBaseUrl !== void 0 && provider.openaiResponsesBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-w-0 flex-col gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "OpenAI Responses:" }),
+          " ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: provider.openaiResponsesBaseUrl })
+        ] }) }),
         testResults?.testedAt !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
@@ -8166,12 +8211,17 @@ const ZHIPU_CODING_PROVIDER_KEYWORDS = [
   "z.ai coding",
   "zai coding"
 ];
+const ANTHROPIC_MESSAGES_ENDPOINT = "/v1/messages";
+const OPENAI_CHAT_COMPLETIONS_ENDPOINT = "/v1/chat/completions";
+const OPENAI_RESPONSES_ENDPOINT = "/v1/responses";
 const KNOWN_PROVIDER_PRESETS = {
   deepseek: {
     openaiBaseUrl: "https://api.deepseek.com"
   },
   minimax: {
     anthropicBaseUrl: "https://api.minimaxi.com/anthropic",
+    openaiBaseUrl: "https://api.minimaxi.com",
+    openaiResponsesBaseUrl: "https://api.minimaxi.com",
     apiDocsUrl: "https://platform.minimaxi.com/docs/api-reference/api-overview"
   },
   "zhipu coding": {
@@ -8345,6 +8395,27 @@ function readPositiveIntegerInput(value) {
   if (!Number.isInteger(parsed) || parsed <= 0) return null;
   return parsed;
 }
+function stripEndpointSuffix(value, endpoint) {
+  if (value === void 0) return "";
+  const trimmed = value.trim();
+  const normalized = trimmed.replace(/\/+$/, "");
+  return normalized.endsWith(endpoint) ? normalized.slice(0, -endpoint.length).replace(/\/+$/, "") : trimmed;
+}
+function previewEndpointUrl(baseUrl, endpoint) {
+  const trimmed = baseUrl.trim();
+  return trimmed === "" ? null : buildUpstreamUrl(trimmed, endpoint);
+}
+function EndpointUrlPreview({
+  baseUrl,
+  endpoint
+}) {
+  const finalUrl = previewEndpointUrl(baseUrl, endpoint);
+  if (finalUrl === null) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-border/70 bg-muted/35 px-3 py-2 text-xs", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground", children: "Final URL" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "break-all font-mono text-foreground", children: finalUrl })
+  ] });
+}
 function ProviderForm({ provider, onSubmit, onCancel }) {
   const [name, setName] = reactExports.useState(provider?.name ?? "");
   const [apiKey, setApiKey] = reactExports.useState(provider?.apiKey ?? "");
@@ -8361,8 +8432,15 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
     )
   );
   const [activeTab, setActiveTab] = reactExports.useState("anthropic");
-  const [anthropicBaseUrl, setAnthropicBaseUrl] = reactExports.useState(provider?.anthropicBaseUrl ?? "");
-  const [openaiBaseUrl, setOpenaiBaseUrl] = reactExports.useState(provider?.openaiBaseUrl ?? "");
+  const [anthropicBaseUrl, setAnthropicBaseUrl] = reactExports.useState(
+    stripEndpointSuffix(provider?.anthropicBaseUrl, ANTHROPIC_MESSAGES_ENDPOINT)
+  );
+  const [openaiBaseUrl, setOpenaiBaseUrl] = reactExports.useState(
+    stripEndpointSuffix(provider?.openaiBaseUrl, OPENAI_CHAT_COMPLETIONS_ENDPOINT)
+  );
+  const [openaiResponsesBaseUrl, setOpenaiResponsesBaseUrl] = reactExports.useState(
+    stripEndpointSuffix(provider?.openaiResponsesBaseUrl, OPENAI_RESPONSES_ENDPOINT)
+  );
   const [apiDocsUrl, setApiDocsUrl] = reactExports.useState(provider?.apiDocsUrl ?? "");
   const [modelMetadataUrl, setModelMetadataUrl] = reactExports.useState(provider?.modelMetadataUrl ?? "");
   const [source, setSource] = reactExports.useState(provider?.source);
@@ -8385,6 +8463,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
   }, [openModelDropdown]);
   const [manualAnthropicUrlOverride, setManualAnthropicUrlOverride] = reactExports.useState(false);
   const [manualOpenaiUrlOverride, setManualOpenaiUrlOverride] = reactExports.useState(false);
+  const [manualOpenaiResponsesUrlOverride, setManualOpenaiResponsesUrlOverride] = reactExports.useState(false);
   const isMiniMax = name.toLowerCase().includes("minimax");
   const isAlibaba = name.toLowerCase().includes("alibaba");
   const isZhipu = [...ZHIPU_PROVIDER_KEYWORDS, ...ZHIPU_CODING_PROVIDER_KEYWORDS].some(
@@ -8406,13 +8485,21 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       const nextModels = (provider.models?.length ?? 0) > 0 ? provider.models : [""];
       setModels(nextModels);
       setModelMetadataDrafts(createMetadataDrafts(provider, nextModels));
-      setAnthropicBaseUrl(provider.anthropicBaseUrl ?? "");
-      setOpenaiBaseUrl(provider.openaiBaseUrl ?? "");
+      setAnthropicBaseUrl(
+        stripEndpointSuffix(provider.anthropicBaseUrl, ANTHROPIC_MESSAGES_ENDPOINT)
+      );
+      setOpenaiBaseUrl(
+        stripEndpointSuffix(provider.openaiBaseUrl, OPENAI_CHAT_COMPLETIONS_ENDPOINT)
+      );
+      setOpenaiResponsesBaseUrl(
+        stripEndpointSuffix(provider.openaiResponsesBaseUrl, OPENAI_RESPONSES_ENDPOINT)
+      );
       setApiDocsUrl(provider.apiDocsUrl ?? "");
       setModelMetadataUrl(provider.modelMetadataUrl ?? "");
       setSource(provider.source);
       setManualAnthropicUrlOverride(false);
       setManualOpenaiUrlOverride(false);
+      setManualOpenaiResponsesUrlOverride(false);
     }
   }, [provider]);
   reactExports.useEffect(() => {
@@ -8425,6 +8512,9 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
         if (preset.openaiBaseUrl !== void 0 && !manualOpenaiUrlOverride) {
           setOpenaiBaseUrl(preset.openaiBaseUrl);
         }
+        if (preset.openaiResponsesBaseUrl !== void 0 && !manualOpenaiResponsesUrlOverride) {
+          setOpenaiResponsesBaseUrl(preset.openaiResponsesBaseUrl);
+        }
         if (preset.apiDocsUrl !== void 0 && !apiDocsUrl) {
           setApiDocsUrl(preset.apiDocsUrl);
         }
@@ -8458,6 +8548,9 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
     if (openaiBaseUrl.trim() && !isValidUrl(openaiBaseUrl.trim())) {
       newErrors.openaiBaseUrl = "Invalid URL format";
     }
+    if (openaiResponsesBaseUrl.trim() && !isValidUrl(openaiResponsesBaseUrl.trim())) {
+      newErrors.openaiResponsesBaseUrl = "Invalid URL format";
+    }
     if (modelMetadataUrl.trim() && !isValidUrl(modelMetadataUrl.trim())) {
       newErrors.modelMetadataUrl = "Invalid URL format";
     }
@@ -8474,7 +8567,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
         newErrors[`modelMetadata.${index}.outputLimit`] = "Output limit should not exceed context window";
       }
     });
-    if (!anthropicBaseUrl.trim() && !openaiBaseUrl.trim()) {
+    if (!anthropicBaseUrl.trim() && !openaiBaseUrl.trim() && !openaiResponsesBaseUrl.trim()) {
       newErrors.format = "At least one format URL (Anthropic or OpenAI) is required";
     }
     setErrors(newErrors);
@@ -8590,6 +8683,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
         models: models.map((m) => m.trim()).filter((m) => m !== ""),
         anthropicBaseUrl: anthropicBaseUrl.trim() || void 0,
         openaiBaseUrl: openaiBaseUrl.trim() || void 0,
+        openaiResponsesBaseUrl: openaiResponsesBaseUrl.trim() || void 0,
         apiDocsUrl: apiDocsUrl.trim() || void 0,
         modelMetadataUrl: modelMetadataUrl.trim() || void 0,
         modelMetadata: buildModelMetadata(),
@@ -8902,41 +8996,86 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
     ] }),
     activeTab === "anthropic" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-anthropic-base-url", className: "text-sm font-medium", children: "Anthropic Base URL" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          id: "provider-anthropic-base-url",
-          type: "text",
-          value: anthropicBaseUrl,
-          onChange: (e) => {
-            setManualAnthropicUrlOverride(true);
-            setAnthropicBaseUrl(e.target.value);
-          },
-          placeholder: "https://api.anthropic.com",
-          className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
-        }
-      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 overflow-hidden rounded-md border border-input bg-background ring-offset-background focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            id: "provider-anthropic-base-url",
+            type: "text",
+            value: anthropicBaseUrl,
+            onChange: (e) => {
+              setManualAnthropicUrlOverride(true);
+              setAnthropicBaseUrl(e.target.value);
+            },
+            placeholder: "https://api.anthropic.com",
+            className: "min-w-0 flex-1 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground", children: ANTHROPIC_MESSAGES_ENDPOINT })
+      ] }),
       errors.anthropicBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.anthropicBaseUrl }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Anthropic-compatible endpoint URL. Leave empty if this provider does not support Anthropic format." })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(EndpointUrlPreview, { baseUrl: anthropicBaseUrl, endpoint: ANTHROPIC_MESSAGES_ENDPOINT }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Anthropic-compatible base URL. Leave empty if this provider does not support Anthropic format." })
     ] }),
-    activeTab === "openai" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-openai-base-url", className: "text-sm font-medium", children: "OpenAI Base URL" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          id: "provider-openai-base-url",
-          type: "text",
-          value: openaiBaseUrl,
-          onChange: (e) => {
-            setManualOpenaiUrlOverride(true);
-            setOpenaiBaseUrl(e.target.value);
-          },
-          placeholder: "https://api.openai.com/v1",
-          className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
-        }
-      ),
-      errors.openaiBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.openaiBaseUrl }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "OpenAI-compatible endpoint URL. Leave empty if this provider does not support OpenAI format." })
+    activeTab === "openai" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-openai-base-url", className: "text-sm font-medium", children: "OpenAI Chat Base URL" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 overflow-hidden rounded-md border border-input bg-background ring-offset-background focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              id: "provider-openai-base-url",
+              type: "text",
+              value: openaiBaseUrl,
+              onChange: (e) => {
+                setManualOpenaiUrlOverride(true);
+                setOpenaiBaseUrl(e.target.value);
+              },
+              placeholder: "https://api.openai.com",
+              className: "min-w-0 flex-1 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground", children: OPENAI_CHAT_COMPLETIONS_ENDPOINT })
+        ] }),
+        errors.openaiBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.openaiBaseUrl }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          EndpointUrlPreview,
+          {
+            baseUrl: openaiBaseUrl,
+            endpoint: OPENAI_CHAT_COMPLETIONS_ENDPOINT
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "OpenAI Chat Completions-compatible base URL. Leave empty if this provider only supports the Responses API." })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-openai-responses-base-url", className: "text-sm font-medium", children: "OpenAI Responses Base URL" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 overflow-hidden rounded-md border border-input bg-background ring-offset-background focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              id: "provider-openai-responses-base-url",
+              type: "text",
+              value: openaiResponsesBaseUrl,
+              onChange: (e) => {
+                setManualOpenaiResponsesUrlOverride(true);
+                setOpenaiResponsesBaseUrl(e.target.value);
+              },
+              placeholder: "https://api.openai.com",
+              className: "min-w-0 flex-1 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground", children: OPENAI_RESPONSES_ENDPOINT })
+        ] }),
+        errors.openaiResponsesBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.openaiResponsesBaseUrl }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          EndpointUrlPreview,
+          {
+            baseUrl: openaiResponsesBaseUrl,
+            endpoint: OPENAI_RESPONSES_ENDPOINT
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Optional Responses-compatible base URL. Set only when the provider supports the Responses API." })
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-api-docs-url", className: "text-sm font-medium", children: "API Docs URL" }),
@@ -8983,6 +9122,7 @@ function createProviderPayload(data) {
     models: data.models,
     anthropicBaseUrl: (data.anthropicBaseUrl?.length ?? 0) > 0 ? data.anthropicBaseUrl : void 0,
     openaiBaseUrl: (data.openaiBaseUrl?.length ?? 0) > 0 ? data.openaiBaseUrl : void 0,
+    openaiResponsesBaseUrl: (data.openaiResponsesBaseUrl?.length ?? 0) > 0 ? data.openaiResponsesBaseUrl : void 0,
     apiDocsUrl: (data.apiDocsUrl?.length ?? 0) > 0 ? data.apiDocsUrl : void 0,
     modelMetadataUrl: (data.modelMetadataUrl?.length ?? 0) > 0 ? data.modelMetadataUrl : void 0,
     modelMetadata: data.modelMetadata,
@@ -9272,7 +9412,7 @@ function ProvidersPanel({
           await refreshProviderMetadata(updated.id, data.modelMetadataUrl, false);
         }
         refreshProviders();
-        const criticalFieldsChanged = (data.apiKey ?? "") !== (editingProvider.apiKey ?? "") || JSON.stringify(data.models) !== JSON.stringify(editingProvider.models) || (data.anthropicBaseUrl ?? "") !== (editingProvider.anthropicBaseUrl ?? "") || (data.openaiBaseUrl ?? "") !== (editingProvider.openaiBaseUrl ?? "");
+        const criticalFieldsChanged = (data.apiKey ?? "") !== (editingProvider.apiKey ?? "") || JSON.stringify(data.models) !== JSON.stringify(editingProvider.models) || (data.anthropicBaseUrl ?? "") !== (editingProvider.anthropicBaseUrl ?? "") || (data.openaiBaseUrl ?? "") !== (editingProvider.openaiBaseUrl ?? "") || (data.openaiResponsesBaseUrl ?? "") !== (editingProvider.openaiResponsesBaseUrl ?? "");
         if (criticalFieldsChanged) {
           await runTest(updated.id);
         }
@@ -11259,6 +11399,13 @@ const CONTEXT_USAGE_THRESHOLDS = {
   watch: WATCH_USAGE_PERCENT,
   danger: DANGER_USAGE_PERCENT
 };
+const snapshotCache = /* @__PURE__ */ new WeakMap();
+function providerSignature(providers) {
+  return providers.map((provider) => {
+    const metadata = provider.modelMetadata?.map((entry) => `${entry.model}:${String(entry.contextWindow ?? "")}`).join(",") ?? "";
+    return `${provider.id}:${provider.updatedAt}:${provider.models.join(",")}:${metadata}`;
+  }).join("|");
+}
 function parseRequestBody(rawBody) {
   if (rawBody === null) return null;
   try {
@@ -11308,6 +11455,25 @@ function snapshotFromLog(log, providers) {
     roleTotalTokens: roleSegments.reduce((sum, segment2) => sum + segment2.size, 0)
   };
 }
+function cachedSnapshotFromLog(log, providers, providersSignature) {
+  const cached = snapshotCache.get(log);
+  if (cached !== void 0 && cached.id === log.id && cached.rawRequestBody === log.rawRequestBody && cached.inputTokens === log.inputTokens && cached.model === log.model && cached.path === log.path && cached.apiFormat === log.apiFormat && cached.timestamp === log.timestamp && cached.providersSignature === providersSignature) {
+    return cached.snapshot;
+  }
+  const snapshot = snapshotFromLog(log, providers);
+  snapshotCache.set(log, {
+    id: log.id,
+    rawRequestBody: log.rawRequestBody,
+    inputTokens: log.inputTokens,
+    model: log.model,
+    path: log.path,
+    apiFormat: log.apiFormat,
+    timestamp: log.timestamp,
+    providersSignature,
+    snapshot
+  });
+  return snapshot;
+}
 function isHigherPeak(candidate, current) {
   if (candidate.usagePercent !== null && current.usagePercent !== null) {
     return candidate.usagePercent > current.usagePercent;
@@ -11341,11 +11507,21 @@ function trendPercent(first, latest) {
   if (first.usagePercent === null || latest.usagePercent === null) return null;
   return (latest.usagePercent - first.usagePercent) * 100;
 }
+function logsInAscendingIdOrder(logs) {
+  for (let index = 1; index < logs.length; index++) {
+    const previous = logs[index - 1];
+    const current = logs[index];
+    if (previous === void 0 || current === void 0) continue;
+    if (previous.id > current.id) return [...logs].sort((left, right) => left.id - right.id);
+  }
+  return logs;
+}
 function buildSessionContextSummary(logs, providers = []) {
-  const sortedLogs = [...logs].sort((left, right) => left.id - right.id);
+  const sortedLogs = logsInAscendingIdOrder(logs);
+  const providersSignature = providerSignature(providers);
   const byModel = /* @__PURE__ */ new Map();
   for (const log of sortedLogs) {
-    const snapshot = snapshotFromLog(log, providers);
+    const snapshot = cachedSnapshotFromLog(log, providers, providersSignature);
     if (snapshot === null) continue;
     const existing = byModel.get(snapshot.model);
     if (existing === void 0) {
@@ -12730,7 +12906,7 @@ function filterLogs(logs, selectedSession, selectedModel) {
     return true;
   });
 }
-const DEBOUNCE_MS = 50;
+const DEBOUNCE_MS = 100;
 const HASH_SCROLL_ATTEMPTS = 12;
 const HASH_HIGHLIGHT_MS = 1800;
 const MAX_CLIENT_LOGS = 500;
@@ -12787,6 +12963,7 @@ function ProxyViewerContainer({
   const [logPage, setLogPage] = reactExports.useState(null);
   const [sessionPageLoading, setSessionPageLoading] = reactExports.useState(initialSessionId !== void 0);
   const [sessionMemberships, setSessionMemberships] = reactExports.useState([]);
+  const [, startLogTransition] = reactExports.useTransition();
   const eventSourceRef = reactExports.useRef(null);
   const reconnectTimeoutRef = reactExports.useRef(null);
   const handledHashRef = reactExports.useRef(null);
@@ -12805,22 +12982,28 @@ function ProxyViewerContainer({
     const updates = pendingUpdatesRef.current;
     pendingUpdatesRef.current = [];
     if (updates.length === 0) return;
-    setAllLogs((prev) => {
-      let next = prev;
-      for (const log of updates) {
-        const idx = logIndexRef.current.get(log.id);
-        if (idx !== void 0) {
-          next = [...next.slice(0, idx), log, ...next.slice(idx + 1)];
-        } else {
-          logIndexRef.current.set(log.id, next.length);
-          next = [...next, log];
+    startLogTransition(() => {
+      setAllLogs((prev) => {
+        const next = [...prev];
+        for (const log of updates) {
+          const indexedPosition = logIndexRef.current.get(log.id);
+          if (indexedPosition !== void 0 && next[indexedPosition]?.id === log.id) {
+            next[indexedPosition] = log;
+            continue;
+          }
+          const existingPosition = next.findIndex((entry) => entry.id === log.id);
+          if (existingPosition >= 0) {
+            next[existingPosition] = log;
+            continue;
+          }
+          next.push(log);
         }
-      }
-      next = trimClientLogs(next);
-      logIndexRef.current = buildLogIndex(next);
-      return next;
+        const trimmed = trimClientLogs(next);
+        logIndexRef.current = buildLogIndex(trimmed);
+        return trimmed;
+      });
     });
-  }, []);
+  }, [startLogTransition]);
   const scheduleUpdate = reactExports.useCallback(
     (log) => {
       pendingUpdatesRef.current.push(log);
@@ -13142,9 +13325,10 @@ export {
   Badge as B,
   CONTEXT_USAGE_THRESHOLDS as C,
   Dialog as D,
-  JsonViewer as E,
+  LazyJsonViewer as E,
   safeJsonValue as F,
-  JsonViewerFromString as J,
+  parseJsonText as G,
+  LazyJsonViewerFromString as L,
   ProxyViewerContainer as P,
   ROLE_COLOR_CLASSES as R,
   SegmentBar as S,