@tonyclaw/llm-inspector 1.18.2 → 1.19.0

package/.output/server/_ssr/{ProxyViewerContainer--3K3o3Sm.mjs → ProxyViewerContainer-B-zDOLYE.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, D as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, a as RuntimeConfigSchema, r as requestFormatForPath, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, d as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, g as getSessionPath, e as ProviderConfigSchema, s as stripClaudeCodeBillingHeader, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, b as AnthropicRequestSchema } from "./router-DVixpJO-.mjs";
+import { C as CapturedLogSchema, D as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, a as RuntimeConfigSchema, r as requestFormatForPath, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, d as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, g as getSessionPath, e as ProviderConfigSchema, s as stripClaudeCodeBillingHeader, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, b as AnthropicRequestSchema } from "./router-aCaUgVTW.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.mjs";
 import { J as JSZip } from "../_libs/jszip.mjs";
 import { c as clsx } from "../_libs/clsx.mjs";
@@ -9,7 +9,7 @@ import { R as Root, T as Trigger$2, C as Content, a as Close, b as Title, P as P
 import { d as diffJson, a as diffLines } from "../_libs/diff.mjs";
 import { u as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
 import { R as Root2, T as Trigger, I as Icon, V as Value, P as Portal, C as Content2, a as Viewport, b as Item, c as ItemIndicator, d as ItemText, S as ScrollUpButton, e as ScrollDownButton } from "../_libs/radix-ui__react-select.mjs";
-import { C as Check, X, P as Plus, D as Download, S as Settings, A as ArrowLeft, a as Copy, b as ChevronDown, U as Upload, c as Scan, d as CircleAlert, e as ChevronUp, L as LoaderCircle, f as ChevronRight, g as User, h as Clock, M as MessageSquare, Z as Zap, E as ExternalLink, T as Trash2, i as TriangleAlert, j as EyeOff, k as Eye, R as RotateCw, l as Pencil, G as GitCompareArrows, m as Minus, n as CircleCheckBig, O as OctagonAlert, W as Wrench, o as Globe, F as FileTerminal, p as Radio, q as ChevronsUp, r as ChevronsDown, s as RotateCcw, t as CircleQuestionMark, u as Server, v as Gauge, w as Lock, x as Wifi, y as WifiOff, z as ArrowUp, B as ArrowDown, H as Rows3, I as Columns2 } from "../_libs/lucide-react.mjs";
+import { C as Check, X, P as Plus, D as Download, S as Settings, A as ArrowLeft, a as Copy, b as ChevronDown, U as Upload, c as Scan, d as CircleAlert, e as ChevronUp, L as LoaderCircle, f as ChevronRight, g as User, h as Clock, M as MessageSquare, Z as Zap, E as ExternalLink, T as Trash2, i as TriangleAlert, j as EyeOff, k as Eye, R as RotateCw, l as Pencil, m as Minus, n as CircleCheckBig, O as OctagonAlert, W as Wrench, G as Globe, F as FileTerminal, o as Radio, p as ChevronsUp, q as ChevronsDown, r as FileDiff, H as History, s as RotateCcw, t as GitCompareArrows, u as CircleQuestionMark, v as Server, w as Gauge, x as Lock, y as Wifi, z as WifiOff, B as ArrowUp, I as ArrowDown, J as Rows3, K 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 { P as Provider, R as Root3, T as Trigger$1, a as Portal$1, C as Content2$1, A as Arrow2 } from "../_libs/radix-ui__react-tooltip.mjs";
 import { R as Root2$1, L as List, T as Trigger$3, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
@@ -275,7 +275,7 @@ function getStatusCategory(status) {
   if (status >= 500) return "server_error";
   return "pending";
 }
-const version = "1.18.2";
+const version = "1.19.0";
 const packageJson = {
   version
 };
@@ -1181,37 +1181,6 @@ function TooltipContent({
     }
   ) });
 }
-function JsonExpansionButton({
-  policy,
-  isExpanded,
-  isPending,
-  onToggle
-}) {
-  if (policy === null) return null;
-  const label = isPending ? "Updating..." : isExpanded ? "Collapse all" : "Expand all";
-  const tooltip = isExpanded ? "Collapse all JSON nodes" : "Expand all JSON nodes";
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Button,
-      {
-        variant: "outline",
-        size: "sm",
-        className: "h-8 text-xs",
-        onClick: (e) => {
-          e.stopPropagation();
-          onToggle();
-        },
-        disabled: isPending,
-        "aria-pressed": isExpanded,
-        children: [
-          isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsUp, { className: "size-3.5 mr-1" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsDown, { className: "size-3.5 mr-1" }),
-          label
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: tooltip })
-  ] }) });
-}
 function getJsonExpansionPolicy(_value) {
   return { depth: Number.POSITIVE_INFINITY };
 }
@@ -1350,28 +1319,51 @@ function TabsContent({
     }
   );
 }
+function useCopyFeedback(text) {
+  const [copied, setCopied] = reactExports.useState(false);
+  const timerRef = reactExports.useRef(null);
+  reactExports.useEffect(
+    () => () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const copy = reactExports.useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (text === null) return;
+      void window.navigator.clipboard.writeText(text).then(() => {
+        setCopied(true);
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setCopied(false), 2e3);
+      });
+    },
+    [text]
+  );
+  return { copied, copy };
+}
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-BGUgukJ8.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-DNGYdUXs.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-Bo86xZI4.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-DWeqMA4y.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-jRU5qgwB.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-TOsrMu9-.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-DdO_-79a.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-BuqdPrzm.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-BigLwhh4.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-DuzNZkqL.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-B4c_WjXD.mjs").then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-BL8xhHbi.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-B4c_WjXD.mjs").then((m) => ({ default: m.JsonViewerFromString }))
+  () => import("./json-viewer-BL8xhHbi.mjs").then((m) => ({ default: m.JsonViewerFromString }))
 );
 const HIGHLIGHT_DURATION_MS = 1200;
 const MAX_HIGHLIGHT_ATTEMPTS = 12;
@@ -1790,11 +1782,9 @@ const LogEntryHeader = reactExports.memo(function({
   onToggle,
   responseToolNames = null,
   cacheTrend = null,
+  activeTab,
+  tabActions,
   onReplay,
-  onCopyRequest,
-  requestCopied = false,
-  onToggleRequestExpansion,
-  requestExpansionState = null,
   slowResponseThresholdSeconds = 0
 }) {
   const statusCategory = getStatusCategory(log.responseStatus);
@@ -1958,36 +1948,74 @@ const LogEntryHeader = reactExports.memo(function({
             onClick: (e) => e.stopPropagation(),
             onKeyDown: (e) => e.stopPropagation(),
             children: [
-              requestExpansionState !== null && onToggleRequestExpansion !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    variant: "outline",
-                    size: "icon",
-                    className: "size-8",
-                    onClick: onToggleRequestExpansion,
-                    disabled: requestExpansionState.isPending,
-                    "aria-pressed": requestExpansionState.isExpanded,
-                    "aria-label": requestExpansionState.isExpanded ? "Collapse all JSON" : "Expand all JSON",
-                    children: requestExpansionState.isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsUp, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsDown, { className: "size-3.5" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: requestExpansionState.isExpanded ? "Collapse all JSON nodes" : "Expand all JSON nodes" })
-              ] }),
-              onCopyRequest !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    variant: "outline",
-                    size: "icon",
-                    className: "size-8",
-                    onClick: onCopyRequest,
-                    "aria-label": "Copy request body",
-                    children: requestCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 text-emerald-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: requestCopied ? "Copied to clipboard" : "Copy request body" })
-              ] }),
+              tabActions !== void 0 && activeTab !== void 0 && (() => {
+                const action = tabActions[activeTab];
+                if (action === void 0) return null;
+                return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  action.expansion !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        size: "icon",
+                        className: "size-8",
+                        onClick: action.expansion.onToggle,
+                        disabled: action.expansion.isPending,
+                        "aria-pressed": action.expansion.isExpanded,
+                        "aria-label": action.expansion.isExpanded ? "Collapse all JSON" : "Expand all JSON",
+                        children: action.expansion.isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsUp, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsDown, { className: "size-3.5" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.expansion.isExpanded ? "Collapse all JSON nodes" : "Expand all JSON nodes" })
+                  ] }),
+                  action.diffWithRaw !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        size: "icon",
+                        className: cn(
+                          "size-8",
+                          action.diffWithRaw.active && "bg-accent text-accent-foreground"
+                        ),
+                        onClick: action.diffWithRaw.onToggle,
+                        "aria-pressed": action.diffWithRaw.active,
+                        "aria-label": action.diffWithRaw.active ? "Hide raw diff" : "Diff with raw",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileDiff, { className: "size-3.5" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.diffWithRaw.active ? "Hide diff with raw request" : "Show diff between displayed and raw request body" })
+                  ] }),
+                  action.diffWithPrevious !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        size: "icon",
+                        className: "size-8",
+                        onClick: action.diffWithPrevious,
+                        "aria-label": "Diff with previous",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(History, { className: "size-3.5" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Compare this request with the immediately preceding one" })
+                  ] }),
+                  action.copyText !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        size: "icon",
+                        className: "size-8",
+                        onClick: action.onCopy,
+                        "aria-label": action.copyCopied ? "Copied" : action.copyLabel,
+                        children: action.copyCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 text-emerald-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.copyCopied ? "Copied to clipboard" : action.copyLabel })
+                  ] })
+                ] });
+              })(),
               onReplay !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
@@ -2328,31 +2356,6 @@ function shouldShowRequestDiffButton(apiFormat, viewMode, strip, hasRawRequest)
 function TabFallback() {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-1", "aria-hidden": "true" });
 }
-function CopyButton({
-  text,
-  label,
-  copied,
-  onCopy
-}) {
-  if (text === null) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Button,
-      {
-        variant: "outline",
-        size: "sm",
-        className: "h-8 text-xs",
-        onClick: onCopy,
-        "aria-label": label,
-        children: [
-          copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 mr-1 text-emerald-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5 mr-1" }),
-          copied ? "Copied!" : label
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: copied ? "Copied to clipboard" : label })
-  ] });
-}
 function DiffToggleButton({
   active,
   onClick
@@ -2394,29 +2397,6 @@ const HeadersDiffContent = reactExports.memo(function({
   const result = reactExports.useMemo(() => computeHeadersDiff(rawHeaders, headers), [rawHeaders, headers]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DiffView, { result, emptyLabel });
 });
-function useCopyFeedback(text) {
-  const [copied, setCopied] = reactExports.useState(false);
-  const timerRef = reactExports.useRef(null);
-  reactExports.useEffect(
-    () => () => {
-      if (timerRef.current !== null) clearTimeout(timerRef.current);
-    },
-    []
-  );
-  const copy = reactExports.useCallback(
-    (event) => {
-      event.stopPropagation();
-      if (text === null) return;
-      void window.navigator.clipboard.writeText(text).then(() => {
-        setCopied(true);
-        if (timerRef.current !== null) clearTimeout(timerRef.current);
-        timerRef.current = setTimeout(() => setCopied(false), 2e3);
-      });
-    },
-    [text]
-  );
-  return { copied, copy };
-}
 const LogEntry = reactExports.memo(function({
   log,
   viewMode = "simple",
@@ -2449,11 +2429,106 @@ const LogEntry = reactExports.memo(function({
     return stripClaudeCodeBillingHeader(log.rawRequestBody).body;
   }, [log.rawRequestBody, resolvedFormat, strip]);
   const displayedRequestBody = strippedRequestBody ?? log.rawRequestBody;
+  const requestExpansion = useJsonBulkExpansion(displayedRequestBody);
+  const rawRequestExpansion = useJsonBulkExpansion(log.rawRequestBody);
+  const responseExpansion = useJsonBulkExpansion(log.responseText);
+  const headersText = reactExports.useMemo(
+    () => log.headers && Object.keys(log.headers).length > 0 ? JSON.stringify(log.headers, null, 2) : null,
+    [log.headers]
+  );
+  const rawHeadersText = reactExports.useMemo(
+    () => log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? JSON.stringify(log.rawHeaders, null, 2) : null,
+    [log.rawHeaders]
+  );
   const requestCopy = useCopyFeedback(displayedRequestBody);
   const rawRequestCopy = useCopyFeedback(log.rawRequestBody);
+  const headersCopy = useCopyFeedback(headersText);
+  const rawHeadersCopy = useCopyFeedback(rawHeadersText);
   const responseCopy = useCopyFeedback(log.responseText);
-  const requestExpansion = useJsonBulkExpansion(displayedRequestBody);
-  const rawRequestExpansion = useJsonBulkExpansion(log.rawRequestBody);
+  const tabActions = reactExports.useMemo(
+    () => ({
+      request: {
+        copyLabel: "Copy request body",
+        copyText: displayedRequestBody,
+        copyCopied: requestCopy.copied,
+        onCopy: requestCopy.copy,
+        expansion: {
+          isExpanded: requestExpansion.isExpanded,
+          isPending: requestExpansion.isPending,
+          onToggle: requestExpansion.toggle
+        },
+        // "Diff with Raw" only makes sense when there's a raw body to compare
+        // against (Anthropic + strip pipeline produces one). "Diff with
+        // Previous" only exists when the parent wired up the compare drawer.
+        diffWithRaw: shouldShowRequestDiffButton(
+          resolvedFormat,
+          viewMode,
+          strip,
+          log.rawRequestBody !== null
+        ) ? { active: requestDiff, onToggle: () => setRequestDiff(!requestDiff) } : void 0,
+        diffWithPrevious: onCompareWithPrevious === void 0 ? void 0 : () => {
+          onCompareWithPrevious(log);
+        }
+      },
+      "raw-request": {
+        copyLabel: "Copy raw request",
+        copyText: log.rawRequestBody,
+        copyCopied: rawRequestCopy.copied,
+        onCopy: rawRequestCopy.copy,
+        expansion: {
+          isExpanded: rawRequestExpansion.isExpanded,
+          isPending: rawRequestExpansion.isPending,
+          onToggle: rawRequestExpansion.toggle
+        }
+      },
+      headers: {
+        copyLabel: "Copy headers",
+        copyText: headersText,
+        copyCopied: headersCopy.copied,
+        onCopy: headersCopy.copy,
+        // Headers are a flat dict, no JSON tree to expand.
+        expansion: null
+      },
+      "raw-headers": {
+        copyLabel: "Copy raw headers",
+        copyText: rawHeadersText,
+        copyCopied: rawHeadersCopy.copied,
+        onCopy: rawHeadersCopy.copy,
+        expansion: null
+      },
+      raw: {
+        copyLabel: "Copy response",
+        copyText: log.responseText,
+        copyCopied: responseCopy.copied,
+        onCopy: responseCopy.copy,
+        expansion: {
+          isExpanded: responseExpansion.isExpanded,
+          isPending: responseExpansion.isPending,
+          onToggle: responseExpansion.toggle
+        }
+      }
+    }),
+    [
+      displayedRequestBody,
+      requestCopy,
+      requestExpansion,
+      requestDiff,
+      log.rawRequestBody,
+      rawRequestCopy,
+      rawRequestExpansion,
+      headersText,
+      headersCopy,
+      rawHeadersText,
+      rawHeadersCopy,
+      log.responseText,
+      responseCopy,
+      responseExpansion,
+      resolvedFormat,
+      viewMode,
+      strip,
+      onCompareWithPrevious
+    ]
+  );
   const anatomySegments = reactExports.useMemo(
     () => requestExpansion.parsedData !== null ? adapter.anatomySegments(requestExpansion.parsedData) : null,
     [adapter, requestExpansion.parsedData]
@@ -2482,17 +2557,10 @@ const LogEntry = reactExports.memo(function({
           responseToolNames: responseAnalysis.toolNames,
           cacheTrend,
           slowResponseThresholdSeconds,
+          activeTab,
+          tabActions,
           onReplay: onCompareWithPrevious === void 0 ? void 0 : () => {
             setReplayOpen(true);
-          },
-          onCopyRequest: displayedRequestBody === null ? void 0 : (e) => {
-            requestCopy.copy(e);
-          },
-          requestCopied: requestCopy.copied,
-          onToggleRequestExpansion: requestExpansion.toggle,
-          requestExpansionState: requestExpansion.policy === null ? null : {
-            isExpanded: requestExpansion.isExpanded,
-            isPending: requestExpansion.isPending
           }
         }
       ),
@@ -2506,96 +2574,31 @@ const LogEntry = reactExports.memo(function({
           viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" })
         ] }),
-        shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              JsonExpansionButton,
-              {
-                policy: rawRequestExpansion.policy,
-                isExpanded: rawRequestExpansion.isExpanded,
-                isPending: rawRequestExpansion.isPending,
-                onToggle: rawRequestExpansion.toggle
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              CopyButton,
-              {
-                text: log.rawRequestBody,
-                label: "Copy",
-                copied: rawRequestCopy.copied,
-                onCopy: rawRequestCopy.copy
-              }
-            )
-          ] }),
-          log.rawRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : rawRequestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            LazyJsonViewer,
-            {
-              data: rawRequestExpansion.parsedData,
-              bulkDepth: rawRequestExpansion.bulkDepth,
-              bulkRevision: rawRequestExpansion.bulkRevision
-            }
-          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words", children: log.rawRequestBody })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3", children: [
-          (shouldShowRequestDiffButton(
-            resolvedFormat,
-            viewMode,
-            strip,
-            log.rawRequestBody !== null
-          ) || onCompareWithPrevious !== void 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
-            shouldShowRequestDiffButton(
-              resolvedFormat,
-              viewMode,
-              strip,
-              log.rawRequestBody !== null
-            ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              DiffToggleButton,
-              {
-                active: requestDiff,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setRequestDiff(!requestDiff);
-                }
-              }
-            ),
-            onCompareWithPrevious !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                Button,
-                {
-                  variant: "outline",
-                  size: "sm",
-                  className: "h-8 text-xs",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onCompareWithPrevious(log);
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(GitCompareArrows, { className: "size-3 mr-1" }),
-                    "Diff with Previous"
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Compare this request with the immediately preceding one" })
-            ] })
-          ] }),
-          requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            RequestDiffContent,
-            {
-              rawBody: log.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("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : requestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            LazyJsonViewer,
-            {
-              data: requestExpansion.parsedData,
-              bulkDepth: requestExpansion.bulkDepth,
-              bulkRevision: requestExpansion.bulkRevision,
-              anatomyPaths,
-              expandToPath
-            }
-          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words", children: displayedRequestBody }) })
-        ] }) }),
+        shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: log.rawRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : rawRequestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          LazyJsonViewer,
+          {
+            data: rawRequestExpansion.parsedData,
+            bulkDepth: rawRequestExpansion.bulkDepth,
+            bulkRevision: rawRequestExpansion.bulkRevision
+          }
+        ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words", children: log.rawRequestBody }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          RequestDiffContent,
+          {
+            rawBody: log.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("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : requestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          LazyJsonViewer,
+          {
+            data: requestExpansion.parsedData,
+            bulkDepth: requestExpansion.bulkDepth,
+            bulkRevision: requestExpansion.bulkRevision,
+            anatomyPaths,
+            expandToPath
+          }
+        ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words", children: displayedRequestBody }) }) }) }),
         anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "anatomy", children: activeTab === "anatomy" && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           LazyRequestAnatomy,
           {
@@ -2646,16 +2649,15 @@ const LogEntry = reactExports.memo(function({
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: log.error })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CopyButton,
+          log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LazyJsonViewerFromString,
             {
               text: log.responseText,
-              label: "Copy",
-              copied: responseCopy.copied,
-              onCopy: responseCopy.copy
+              defaultExpandDepth: 0,
+              bulkDepth: responseExpansion.bulkDepth,
+              bulkRevision: responseExpansion.bulkRevision
             }
-          ) }),
-          log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyJsonViewerFromString, { text: log.responseText, defaultExpandDepth: 0 }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
+          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
           log.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             LazyStreamingChunkSequence,
             {
@@ -5417,132 +5419,141 @@ function ProxyViewer({
     [comparisonPredecessors]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-[1400px] xl:max-w-[1600px] 2xl:max-w-[1800px] mx-auto px-6 pb-6", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1fr_auto_1fr] items-start gap-3 pt-6 pb-8", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "flex min-w-0 flex-col items-center gap-2 text-center", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex max-w-[calc(100vw-7rem)] items-end gap-2 whitespace-nowrap", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex shrink-0 items-end gap-1 group cursor-default", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden items-end gap-0.5 sm:flex", children: crabVariants.map((Crab, i) => {
-              const color = [
-                "text-amber-500",
-                "text-rose-500",
-                "text-sky-500",
-                "text-emerald-500",
-                "text-violet-500",
-                "text-orange-500",
-                "text-cyan-500",
-                "text-pink-500",
-                "text-lime-500",
-                "text-blue-500",
-                "text-yellow-500",
-                "text-fuchsia-500"
-              ][i];
-              const entranceClass = crabEntrancePhase === "hidden" ? "opacity-0 scale-0" : crabEntrancePhase === "playing" ? "animate-crab-piano-pop" : "";
-              return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Crab,
-                {
-                  className: `size-5 ${color} transition-all duration-300 ease-out group-hover:scale-125 group-hover:-translate-y-1 ${entranceClass}`,
-                  style: {
-                    transitionDelay: `${i * 50}ms`,
-                    ...crabEntrancePhase === "playing" ? { animationDelay: `${i * 400}ms` } : {}
-                  }
-                },
-                i
-              );
-            }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-baseline gap-2 pl-1", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-lg font-bold", children: "LLM Inspector" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "shrink-0 font-mono text-xs font-semibold text-muted-foreground", children: [
-              "v",
-              packageJson.version
-            ] })
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sticky top-0 z-30 bg-background pt-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1fr_auto_1fr] items-start gap-3 pb-8", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "flex min-w-0 flex-col items-center gap-2 text-center", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex max-w-[calc(100vw-7rem)] items-end gap-2 whitespace-nowrap", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "span",
+              {
+                className: "flex shrink-0 items-end gap-1 group cursor-default",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden items-end gap-0.5 sm:flex", children: crabVariants.map((Crab, i) => {
+                    const color = [
+                      "text-amber-500",
+                      "text-rose-500",
+                      "text-sky-500",
+                      "text-emerald-500",
+                      "text-violet-500",
+                      "text-orange-500",
+                      "text-cyan-500",
+                      "text-pink-500",
+                      "text-lime-500",
+                      "text-blue-500",
+                      "text-yellow-500",
+                      "text-fuchsia-500"
+                    ][i];
+                    const entranceClass = crabEntrancePhase === "hidden" ? "opacity-0 scale-0" : crabEntrancePhase === "playing" ? "animate-crab-piano-pop" : "";
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Crab,
+                      {
+                        className: `size-5 ${color} transition-all duration-300 ease-out group-hover:scale-125 group-hover:-translate-y-1 ${entranceClass}`,
+                        style: {
+                          transitionDelay: `${i * 50}ms`,
+                          ...crabEntrancePhase === "playing" ? { animationDelay: `${i * 400}ms` } : {}
+                        }
+                      },
+                      i
+                    );
+                  }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-baseline gap-2 pl-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-lg font-bold", children: "LLM Inspector" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "shrink-0 font-mono text-xs font-semibold text-muted-foreground", children: [
+                "v",
+                packageJson.version
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4 shrink-0 text-muted-foreground/70", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(McpLogo, { className: "size-10 shrink-0" })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4 shrink-0 text-muted-foreground/70", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(McpLogo, { className: "size-10 shrink-0" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(McpReadyBadge, {})
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(McpReadyBadge, {})
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "justify-self-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {}) })
-    ] }),
-    pinnedSessionId !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      SessionContextBar,
-      {
-        sessionId: pinnedSessionId,
-        logs,
-        totalIn,
-        totalOut
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
-      !hideSessionFilter && /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedSession, onValueChange: onSessionChange, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[350px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All sessions" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All sessions" }),
-          sessions.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: s, children: truncateSessionId(s) }, s))
-        ] })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "justify-self-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {}) })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedModel, onValueChange: onModelChange, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[250px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All models" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All models" }),
-          models.map((m) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: m, children: m }, m))
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-border rounded-md overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+      pinnedSessionId !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SessionContextBar,
+        {
+          sessionId: pinnedSessionId,
+          logs,
+          totalIn,
+          totalOut
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+        !hideSessionFilter && /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedSession, onValueChange: onSessionChange, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[350px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All sessions" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All sessions" }),
+            sessions.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: s, children: truncateSessionId(s) }, s))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedModel, onValueChange: onModelChange, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[250px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All models" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All models" }),
+            models.map((m) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: m, children: m }, m))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-border rounded-md overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onViewModeChange("simple"),
+              className: `h-8 px-3 cursor-pointer transition-colors text-xs ${viewMode === "simple" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
+              children: "Simple"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onViewModeChange("full"),
+              className: `h-8 px-3 cursor-pointer transition-colors text-xs ${viewMode === "full" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
+              children: "Full"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground text-xs font-mono", children: [
+          logs.length,
+          " request",
+          logs.length !== 1 ? "s" : "",
+          totalIn > 0 || totalOut > 0 ? ` · ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out` : ""
+        ] }),
+        logs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
             type: "button",
-            onClick: () => onViewModeChange("simple"),
-            className: `h-8 px-3 cursor-pointer transition-colors text-xs ${viewMode === "simple" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
-            children: "Simple"
+            onClick: () => {
+              void handleExport();
+            },
+            disabled: exporting,
+            className: "h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 rounded-md hover:bg-muted",
+            title: "Export all logs as JSON ZIP",
+            children: exporting ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Exporting..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3.5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export" })
+            ] })
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
             type: "button",
-            onClick: () => onViewModeChange("full"),
-            className: `h-8 px-3 cursor-pointer transition-colors text-xs ${viewMode === "full" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
-            children: "Full"
+            onClick: onClearAll,
+            className: "h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer rounded-md hover:bg-muted",
+            title: "Clear all logs",
+            children: "Clear"
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground text-xs font-mono", children: [
-        logs.length,
-        " request",
-        logs.length !== 1 ? "s" : "",
-        totalIn > 0 || totalOut > 0 ? ` · ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out` : ""
-      ] }),
-      logs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            void handleExport();
-          },
-          disabled: exporting,
-          className: "h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 rounded-md hover:bg-muted",
-          title: "Export all logs as JSON ZIP",
-          children: exporting ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Exporting..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3.5" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export" })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onClearAll,
-          className: "h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer rounded-md hover:bg-muted",
-          title: "Clear all logs",
-          children: "Clear"
-        }
-      )
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: logs.length === 0 ? selectedSession !== "__all__" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-muted-foreground py-16 space-y-4", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: "Session not found" }),