@tonyclaw/llm-inspector 1.11.8 → 1.13.0

package/.output/server/_ssr/{index-RTuHuCHN.mjs → index-C8VC13EA.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, a as parseRequest, s as stripClaudeCodeBillingHeader, R as RuntimeConfigSchema, P as ProviderConfigSchema, p as parseOpenAIResponse, I as InspectorResponseSchema, S as StreamingChunkSchema$1 } from "./router-DeW8M_70.mjs";
+import { C as CapturedLogSchema, a as parseRequest, s as stripClaudeCodeBillingHeader, R as RuntimeConfigSchema, P as ProviderConfigSchema, p as parseOpenAIResponse, I as InspectorResponseSchema, S as StreamingChunkSchema$1 } from "./router-D5ccnemB.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.mjs";
 import { u as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
 import { J as JSZip } from "../_libs/jszip.mjs";
@@ -9,7 +9,7 @@ import { c as cva } from "../_libs/class-variance-authority.mjs";
 import { d as diffLines, a as diffJson } from "../_libs/diff.mjs";
 import { R as Root, T as Trigger$1, C as Content, a as Close, b as Title, P as Portal$1, O as Overlay } from "../_libs/radix-ui__react-dialog.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 { D as Download, L as LayoutGrid, a as List, S as Settings, C as ChevronDown, b as Check, R as RotateCcw, X, U as Upload, P as Plus, c as Copy, d as CircleAlert, e as ChevronUp, f as ChevronRight, g as Clock, M as MessageSquare, Z as Zap, h as LoaderCircle, W as Wrench, G as Globe, i as User, F as FileTerminal, j as Radio, k as GitCompareArrows, l as Rows3, m as Columns2, E as ExternalLink, n as EyeOff, o as Eye, p as RotateCw, q as Pencil, T as Trash2, r as TriangleAlert, s as Minus, t as CircleCheckBig, u as CircleStop, v as CircleQuestionMark, w as Server, x as Gauge, y as Lock, z as Wifi, A as WifiOff, B as ChevronsUp, H as ChevronsDown, I as Brain, J as Terminal } from "../_libs/lucide-react.mjs";
+import { D as Download, L as LayoutGrid, a as List, G as GitCompareArrows, X, S as Settings, C as ChevronDown, b as Check, R as RotateCcw, U as Upload, P as Plus, c as Copy, d as CircleAlert, e as ChevronUp, f as ChevronRight, g as Clock, M as MessageSquare, Z as Zap, h as LoaderCircle, W as Wrench, i as Globe, j as User, F as FileTerminal, k as Radio, l as Rows3, m as Columns2, E as ExternalLink, n as EyeOff, o as Eye, p as RotateCw, q as Pencil, T as Trash2, A as ArrowUp, r as ArrowDown, s as TriangleAlert, t as Minus, u as CircleCheckBig, v as CircleStop, w as CircleQuestionMark, x as Server, y as Gauge, z as Lock, B as Wifi, H as WifiOff, I as ChevronsUp, J as ChevronsDown, K as Brain, N as Terminal } from "../_libs/lucide-react.mjs";
 import { M as Markdown } from "../_libs/react-markdown.mjs";
 import { a as array, s as string, u as union, o as object, l as literal, n as number, b as boolean, r as record, _ as _enum } from "../_libs/zod.mjs";
 import { R as Root2$1, L as List$1, T as Trigger$2, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
@@ -275,7 +275,7 @@ async function exportLogsAsZip(logs) {
   document.body.removeChild(anchor);
   URL.revokeObjectURL(url);
 }
-const version = "1.11.8";
+const version = "1.13.0";
 const packageJson = {
   version
 };
@@ -1395,12 +1395,28 @@ const STATUS_BADGE_CLASSES = {
   server_error: "",
   pending: "bg-muted text-muted-foreground border-border"
 };
+function CacheTrendIndicator({ trend }) {
+  if (trend === null) return null;
+  const isUp = trend.direction === "up";
+  const Icon2 = isUp ? ArrowUp : ArrowDown;
+  const sign = isUp ? "+" : "-";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-0.5 text-muted-foreground tabular-nums", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: isUp ? "size-3 text-emerald-400" : "size-3 text-rose-400" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
+      sign,
+      formatTokens(trend.delta)
+    ] })
+  ] });
+}
 const LogEntryHeader = reactExports.memo(function({
   log,
   parsedRequest,
   expanded,
   onToggle,
-  suppressApiFormatBadge = false
+  suppressApiFormatBadge = false,
+  cacheTrend = null,
+  isSelected = false,
+  onToggleSelect
 }) {
   const statusCategory = getStatusCategory(log.responseStatus);
   const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
@@ -1424,6 +1440,23 @@ const LogEntryHeader = reactExports.memo(function({
         }
       },
       children: [
+        onToggleSelect !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onToggleSelect(log.id);
+            },
+            "aria-label": isSelected ? "Deselect for comparison" : "Select for comparison",
+            "aria-pressed": isSelected,
+            className: cn(
+              "shrink-0 size-4 rounded-sm border flex items-center justify-center transition-colors cursor-pointer",
+              isSelected ? "bg-amber-400 border-amber-400 text-amber-950" : "border-muted-foreground/40 hover:border-amber-400 hover:bg-amber-400/10"
+            ),
+            children: isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3", strokeWidth: 3 })
+          }
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-400/80 font-mono text-xs font-semibold tabular-nums shrink-0", children: [
           "#",
           log.id
@@ -1490,14 +1523,20 @@ const LogEntryHeader = reactExports.memo(function({
             )
           ] })
         ] }),
-        log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center gap-1 text-xs shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-emerald-400", children: [
-          "Cache +",
-          formatTokens(log.cacheCreationInputTokens)
-        ] }) }),
-        log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center gap-1 text-xs shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-purple-400", children: [
-          "Cache ~",
-          formatTokens(log.cacheReadInputTokens)
-        ] }) }),
+        log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs shrink-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.creation ?? null }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-emerald-400", children: [
+            "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: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.read ?? null }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-purple-400", children: [
+            "Cache ~",
+            formatTokens(log.cacheReadInputTokens)
+          ] })
+        ] }),
         messageCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: messageCount })
@@ -2364,7 +2403,10 @@ const LogEntry = reactExports.memo(function({
   log,
   viewMode = "simple",
   suppressApiFormatBadge = false,
-  strip
+  strip,
+  cacheTrend = null,
+  isSelected = false,
+  onToggleSelect
 }) {
   const [expanded, setExpanded] = reactExports.useState(false);
   const [requestCopied, setRequestCopied] = reactExports.useState(false);
@@ -2414,163 +2456,175 @@ const LogEntry = reactExports.memo(function({
     });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("border border-border rounded-lg mb-3 overflow-hidden"), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        LogEntryHeader,
-        {
-          log,
-          parsedRequest,
-          expanded,
-          onToggle: () => setExpanded(!expanded),
-          suppressApiFormatBadge
-        }
-      ),
-      expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "request", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "mx-4 mt-2", children: [
-          viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw-headers", children: "Raw Headers" }),
-          viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "headers", children: "Headers" }),
-          shouldShowRawRequestTab(log.apiFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw-request", children: "Raw Request" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "request", children: "Request" }),
-          viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" })
-        ] }),
-        shouldShowRawRequestTab(log.apiFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CopyButton,
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: cn(
+          "border border-border rounded-lg mb-3 overflow-hidden",
+          isSelected && "border-l-2 border-l-amber-400"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LogEntryHeader,
             {
-              text: log.rawRequestBody,
-              label: "Copy Raw Request",
-              copied: rawRequestCopied,
-              onCopy: handleCopyRawRequest
+              log,
+              parsedRequest,
+              expanded,
+              onToggle: () => setExpanded(!expanded),
+              suppressApiFormatBadge,
+              cacheTrend,
+              isSelected,
+              onToggleSelect
             }
-          ) }),
-          log.rawRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: log.rawRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
-            shouldShowRequestDiffButton(
-              log.apiFormat,
-              viewMode,
-              strip,
-              log.rawRequestBody !== null
-            ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              DiffToggleButton,
-              {
-                active: requestDiff,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setRequestDiff(!requestDiff);
+          ),
+          expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "request", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "mx-4 mt-2", children: [
+              viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw-headers", children: "Raw Headers" }),
+              viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "headers", children: "Headers" }),
+              shouldShowRawRequestTab(log.apiFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw-request", children: "Raw Request" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "request", children: "Request" }),
+              viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" })
+            ] }),
+            shouldShowRawRequestTab(log.apiFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                CopyButton,
+                {
+                  text: log.rawRequestBody,
+                  label: "Copy Raw Request",
+                  copied: rawRequestCopied,
+                  onCopy: handleCopyRawRequest
                 }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              Button,
-              {
-                variant: "outline",
-                size: "sm",
-                className: "h-7 text-xs",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setReplayOpen(true);
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-3 mr-1" }),
-                  "Replay"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              CopyButton,
+              ) }),
+              log.rawRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: log.rawRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
+                shouldShowRequestDiffButton(
+                  log.apiFormat,
+                  viewMode,
+                  strip,
+                  log.rawRequestBody !== null
+                ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  DiffToggleButton,
+                  {
+                    active: requestDiff,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setRequestDiff(!requestDiff);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    className: "h-7 text-xs",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setReplayOpen(true);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-3 mr-1" }),
+                      "Replay"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  CopyButton,
+                  {
+                    text: displayedRequestBody,
+                    label: "Copy Request",
+                    copied: requestCopied,
+                    onCopy: handleCopyRequest
+                  }
+                )
+              ] }),
+              requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                DiffView,
+                {
+                  result: requestDiffResult,
+                  emptyLabel: "No transformation applied — raw and sent request bodies are identical."
+                }
+              ) : displayedRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: displayedRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
+            ] }) }),
+            viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end gap-2 mb-2", children: shouldShowHeadersDiffButton(
+                viewMode,
+                log.rawHeaders !== void 0 && Object.keys(log.rawHeaders).length > 0
+              ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                DiffToggleButton,
+                {
+                  active: headersDiff,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setHeadersDiff(!headersDiff);
+                  }
+                }
+              ) }),
+              headersDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                DiffView,
+                {
+                  result: headersDiffResult,
+                  emptyLabel: "No transformation applied — raw and processed headers are identical."
+                }
+              ) : log.headers && Object.keys(log.headers).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.headers).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
+                  key,
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
+              ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No headers captured" })
+            ] }) }),
+            viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.rawHeaders).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
+                key,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
+            ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No raw headers captured" }) }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3 space-y-3", children: [
+              log.error !== void 0 && log.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: log.error })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                CopyButton,
+                {
+                  text: log.responseText,
+                  label: "Copy Response",
+                  copied: responseCopied,
+                  onCopy: handleCopyResponse
+                }
+              ) }),
+              log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: log.responseText, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
+              log.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                StreamingChunkSequence,
+                {
+                  logId: log.id,
+                  truncated: log.streamingChunksPath !== null
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ResponseView,
               {
-                text: displayedRequestBody,
-                label: "Copy Request",
-                copied: requestCopied,
-                onCopy: handleCopyRequest
+                responseText: log.responseText,
+                responseStatus: log.responseStatus,
+                streaming: log.streaming,
+                inputTokens: log.inputTokens,
+                outputTokens: log.outputTokens,
+                cacheCreationInputTokens: log.cacheCreationInputTokens,
+                cacheReadInputTokens: log.cacheReadInputTokens,
+                apiFormat: log.apiFormat,
+                error: log.error
               }
-            )
-          ] }),
-          requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DiffView,
-            {
-              result: requestDiffResult,
-              emptyLabel: "No transformation applied — raw and sent request bodies are identical."
-            }
-          ) : displayedRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: displayedRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
-        ] }) }),
-        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end gap-2 mb-2", children: shouldShowHeadersDiffButton(
-            viewMode,
-            log.rawHeaders !== void 0 && Object.keys(log.rawHeaders).length > 0
-          ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DiffToggleButton,
-            {
-              active: headersDiff,
-              onClick: (e) => {
-                e.stopPropagation();
-                setHeadersDiff(!headersDiff);
-              }
-            }
-          ) }),
-          headersDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DiffView,
-            {
-              result: headersDiffResult,
-              emptyLabel: "No transformation applied — raw and processed headers are identical."
-            }
-          ) : log.headers && Object.keys(log.headers).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.headers).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
-              key,
-              ":"
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
-          ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No headers captured" })
-        ] }) }),
-        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.rawHeaders).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
-            key,
-            ":"
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
-        ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No raw headers captured" }) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3 space-y-3", children: [
-          log.error !== void 0 && log.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: log.error })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CopyButton,
-            {
-              text: log.responseText,
-              label: "Copy Response",
-              copied: responseCopied,
-              onCopy: handleCopyResponse
-            }
-          ) }),
-          log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: log.responseText, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
-          log.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            StreamingChunkSequence,
-            {
-              logId: log.id,
-              truncated: log.streamingChunksPath !== null
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ResponseView,
-          {
-            responseText: log.responseText,
-            responseStatus: log.responseStatus,
-            streaming: log.streaming,
-            inputTokens: log.inputTokens,
-            outputTokens: log.outputTokens,
-            cacheCreationInputTokens: log.cacheCreationInputTokens,
-            cacheReadInputTokens: log.cacheReadInputTokens,
-            apiFormat: log.apiFormat,
-            error: log.error
-          }
-        ) }) })
-      ] }) })
-    ] }),
+            ) }) })
+          ] }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ReplayDialog, { log, open: replayOpen, onOpenChange: setReplayOpen })
   ] });
 });
@@ -2586,7 +2640,10 @@ function computeStats(logs) {
 const ConversationGroup = reactExports.memo(function({
   group,
   viewMode = "simple",
-  strip
+  strip,
+  cacheTrends,
+  selectedSet,
+  onToggleSelect
 }) {
   const [expanded, setExpanded] = reactExports.useState(false);
   const stats = computeStats(group.logs);
@@ -2616,7 +2673,10 @@ const ConversationGroup = reactExports.memo(function({
         log,
         viewMode,
         suppressApiFormatBadge: !mixed,
-        strip
+        strip,
+        cacheTrend: cacheTrends?.get(log.id) ?? null,
+        isSelected: selectedSet.has(log.id),
+        onToggleSelect
       },
       log.id
     )) })
@@ -3873,6 +3933,503 @@ function ProxySettingsTab() {
     ] })
   ] });
 }
+function computeCacheTrends(groups) {
+  const result = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    const logs = group.logs;
+    for (let i = 1; i < logs.length; i++) {
+      const prev = logs[i - 1];
+      const curr = logs[i];
+      if (prev === void 0 || curr === void 0) continue;
+      result.set(curr.id, {
+        creation: compareField(prev.cacheCreationInputTokens, curr.cacheCreationInputTokens),
+        read: compareField(prev.cacheReadInputTokens, curr.cacheReadInputTokens)
+      });
+    }
+  }
+  return result;
+}
+function compareField(previous, current) {
+  if (current === null) return null;
+  if (previous === null) return null;
+  if (current > previous) return { direction: "up", delta: current - previous };
+  if (current < previous) return { direction: "down", delta: previous - current };
+  return null;
+}
+const ROOT_PATH = "";
+function formatPath(segments) {
+  if (segments.length === 0) return ROOT_PATH;
+  let out = "";
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i];
+    if (seg === void 0) continue;
+    if (typeof seg === "number") {
+      out += `[${seg}]`;
+    } else if (i === 0) {
+      out += seg;
+    } else {
+      out += `.${seg}`;
+    }
+  }
+  return out;
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function normalizeRequest(raw) {
+  if (typeof raw === "string") {
+    try {
+      return toNode(JSON.parse(raw));
+    } catch {
+      return { kind: "primitive", value: raw };
+    }
+  }
+  return toNode(raw);
+}
+function toNode(value) {
+  if (value === null) return { kind: "primitive", value: null };
+  if (typeof value === "string") return { kind: "primitive", value };
+  if (typeof value === "number") return { kind: "primitive", value };
+  if (typeof value === "boolean") return { kind: "primitive", value };
+  if (Array.isArray(value)) {
+    return { kind: "array", value: value.map((v) => toNode(v)) };
+  }
+  if (isPlainObject(value)) {
+    const out = {};
+    for (const k of Object.keys(value).sort()) {
+      out[k] = toNode(value[k]);
+    }
+    return { kind: "object", value: out };
+  }
+  return { kind: "primitive", value: null };
+}
+function diffTrees(left, right) {
+  const ops = [];
+  walk([], left, right, ops);
+  return ops;
+}
+function walk(segments, left, right, out) {
+  const path = formatPath(segments);
+  if (nodeEqual(left, right)) {
+    out.push({ kind: "equal", path, value: left });
+    return;
+  }
+  if (left.kind !== right.kind) {
+    out.push({ kind: "changed", path, left, right });
+    return;
+  }
+  if (left.kind === "primitive" && right.kind === "primitive") {
+    out.push({ kind: "changed", path, left, right });
+    return;
+  }
+  if (left.kind === "object" && right.kind === "object") {
+    const leftKeys = Object.keys(left.value);
+    const rightKeys = Object.keys(right.value);
+    const rightKeySet = new Set(rightKeys);
+    for (const k of leftKeys) {
+      const lChild = left.value[k];
+      if (lChild === void 0) continue;
+      if (!rightKeySet.has(k)) {
+        out.push({
+          kind: "removed",
+          path: formatPath([...segments, k]),
+          value: lChild
+        });
+      } else {
+        const rChild = right.value[k];
+        if (rChild === void 0) continue;
+        walk([...segments, k], lChild, rChild, out);
+      }
+    }
+    for (const k of rightKeys) {
+      if (leftKeys.includes(k)) continue;
+      const rChild = right.value[k];
+      if (rChild === void 0) continue;
+      out.push({
+        kind: "added",
+        path: formatPath([...segments, k]),
+        value: rChild
+      });
+    }
+    return;
+  }
+  if (left.kind === "array" && right.kind === "array") {
+    const minLen = Math.min(left.value.length, right.value.length);
+    for (let i = 0; i < minLen; i++) {
+      const lChild = left.value[i];
+      const rChild = right.value[i];
+      if (lChild === void 0 || rChild === void 0) continue;
+      walk([...segments, i], lChild, rChild, out);
+    }
+    for (let i = minLen; i < right.value.length; i++) {
+      const rChild = right.value[i];
+      if (rChild === void 0) continue;
+      out.push({
+        kind: "added",
+        path: formatPath([...segments, i]),
+        value: rChild
+      });
+    }
+    for (let i = minLen; i < left.value.length; i++) {
+      const lChild = left.value[i];
+      if (lChild === void 0) continue;
+      out.push({
+        kind: "removed",
+        path: formatPath([...segments, i]),
+        value: lChild
+      });
+    }
+  }
+}
+function nodeEqual(a, b) {
+  if (a.kind !== b.kind) return false;
+  if (a.kind === "primitive" && b.kind === "primitive") {
+    return a.value === b.value;
+  }
+  if (a.kind === "array" && b.kind === "array") {
+    if (a.value.length !== b.value.length) return false;
+    for (let i = 0; i < a.value.length; i++) {
+      const ai = a.value[i];
+      const bi = b.value[i];
+      if (ai === void 0 || bi === void 0) return false;
+      if (!nodeEqual(ai, bi)) return false;
+    }
+    return true;
+  }
+  if (a.kind === "object" && b.kind === "object") {
+    const aKeys = Object.keys(a.value);
+    const bKeys = Object.keys(b.value);
+    if (aKeys.length !== bKeys.length) return false;
+    for (const k of aKeys) {
+      const av = a.value[k];
+      const bv = b.value[k];
+      if (av === void 0 || bv === void 0) return false;
+      if (!nodeEqual(av, bv)) return false;
+    }
+    return true;
+  }
+  return false;
+}
+function previewNode(node, maxLen = 80) {
+  let s;
+  switch (node.kind) {
+    case "primitive":
+      s = node.value === null ? "null" : JSON.stringify(node.value);
+      break;
+    case "array":
+      s = `[… ${node.value.length} items]`;
+      break;
+    case "object":
+      s = `{… ${Object.keys(node.value).length} keys}`;
+      break;
+  }
+  if (s.length > maxLen) s = `${s.slice(0, maxLen - 1)}…`;
+  return s;
+}
+function nodeToJsonString(node, indent = 2) {
+  return JSON.stringify(nodeToJsonValue(node), null, indent);
+}
+function nodeToJsonValue(node) {
+  switch (node.kind) {
+    case "primitive":
+      return node.value;
+    case "array":
+      return node.value.map(nodeToJsonValue);
+    case "object": {
+      const out = {};
+      for (const [k, v] of Object.entries(node.value)) {
+        out[k] = nodeToJsonValue(v);
+      }
+      return out;
+    }
+  }
+}
+function parentPath(path) {
+  if (path === "") return "";
+  for (let i = path.length - 1; i >= 0; i--) {
+    const ch = path[i];
+    if (ch === "." || ch === "[") {
+      return path.substring(0, i);
+    }
+  }
+  return "";
+}
+function isDeepEqual(op) {
+  return op.kind === "equal" && (op.value.kind === "object" || op.value.kind === "array");
+}
+function groupContiguousEquals(ops) {
+  const out = [];
+  let i = 0;
+  while (i < ops.length) {
+    const op = ops[i];
+    if (op !== void 0 && isDeepEqual(op)) {
+      const startParent = parentPath(op.path);
+      let j = i + 1;
+      while (j < ops.length) {
+        const next = ops[j];
+        if (next === void 0) break;
+        if (!isDeepEqual(next)) break;
+        if (parentPath(next.path) !== startParent) break;
+        j++;
+      }
+      if (j - i > 1) {
+        const equalOps = [];
+        for (let k = i; k < j; k++) {
+          const eop = ops[k];
+          if (eop !== void 0 && eop.kind === "equal") {
+            equalOps.push(eop);
+          }
+        }
+        out.push({ kind: "equal-run", ops: equalOps });
+        i = j;
+        continue;
+      }
+    }
+    if (op !== void 0) {
+      out.push({ kind: "single", op });
+    }
+    i++;
+  }
+  return out;
+}
+function EqualRunRow({
+  ops,
+  expanded,
+  onToggle
+}) {
+  const first = ops[0];
+  const last = ops[ops.length - 1];
+  if (first === void 0 || last === void 0) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "col-span-3 text-muted-foreground/40 text-xs", children: "—" });
+  }
+  const firstPath = first.path;
+  const lastPath = last.path;
+  const label = ops.length === 1 ? firstPath : `${firstPath} … ${lastPath}`;
+  const summary = first.value.kind === "array" ? `${ops.length} equal arrays` : first.value.kind === "object" ? `${ops.length} equal objects` : "equal";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-3", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        className: "w-full text-left flex items-center gap-2 px-2 py-1 text-xs text-muted-foreground hover:bg-muted/40 rounded cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ChevronRight,
+            {
+              className: cn("size-3 transition-transform shrink-0", expanded && "rotate-90")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono truncate flex-1", children: label }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground/60 shrink-0", children: [
+            "(",
+            summary,
+            ")"
+          ] })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-5 mt-1 mb-2 space-y-2", children: ops.map((op) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border/50 rounded p-2 bg-muted/20", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-1", children: op.path }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: nodeToJsonString(op.value), defaultExpandDepth: 2 })
+    ] }, op.path)) })
+  ] });
+}
+function AddOrRemoveRow({
+  op,
+  kind
+}) {
+  const accent = kind === "added" ? "border-l-2 border-l-emerald-400/70 bg-emerald-500/5" : "border-l-2 border-l-rose-400/70 bg-rose-500/5";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("col-span-3 px-2 py-1 rounded text-xs", accent), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-0.5", children: op.path }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono break-all", children: kind === "added" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-emerald-300/90", children: [
+      "+ ",
+      previewNode(op.value, 400)
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-rose-300/90 line-through", children: [
+      "- ",
+      previewNode(op.value, 400)
+    ] }) })
+  ] });
+}
+function ChangedRow({ op }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-amber-400/70 bg-amber-500/5", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-1", children: op.path }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-rose-300/90 break-all line-through", children: previewNode(op.left, 400) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-emerald-300/90 break-all", children: previewNode(op.right, 400) })
+    ] })
+  ] });
+}
+function SideSummary({ log, side }) {
+  const conversationId = getConversationId(log);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 space-y-1 text-xs", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: cn(
+            "text-[10px] px-1.5 py-0 h-5 font-mono shrink-0",
+            side === "left" ? "border-rose-500/40 text-rose-400" : "border-emerald-500/40 text-emerald-400"
+          ),
+          children: side === "left" ? "← Left" : "Right →"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-blue-400/80", children: [
+        "#",
+        log.id
+      ] }),
+      log.model !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-muted-foreground truncate", children: log.model })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 text-muted-foreground font-mono", children: [
+      log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-emerald-400", children: [
+        "Cache +",
+        formatTokens(log.cacheCreationInputTokens)
+      ] }),
+      log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-purple-400", children: [
+        "Cache ~",
+        formatTokens(log.cacheReadInputTokens)
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", title: log.timestamp, children: log.timestamp })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground/70 font-mono truncate", title: conversationId, children: [
+      "session: ",
+      conversationId
+    ] })
+  ] });
+}
+function CompareDrawer({ left, right, onClose }) {
+  const ops = reactExports.useMemo(() => {
+    const l = normalizeRequest(parseRequest(left.rawRequestBody) ?? left.rawRequestBody);
+    const r = normalizeRequest(parseRequest(right.rawRequestBody) ?? right.rawRequestBody);
+    return diffTrees(l, r);
+  }, [left.rawRequestBody, right.rawRequestBody]);
+  const grouped = reactExports.useMemo(() => groupContiguousEquals(ops), [ops]);
+  const [expandedRuns, setExpandedRuns] = reactExports.useState(/* @__PURE__ */ new Set());
+  const toggleRun = (idx) => {
+    setExpandedRuns((prev) => {
+      const next = new Set(prev);
+      if (next.has(idx)) next.delete(idx);
+      else next.add(idx);
+      return next;
+    });
+  };
+  reactExports.useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [onClose]);
+  const sameSession = getConversationId(left) === getConversationId(right);
+  const allEqual = ops.length === 1 && ops[0]?.kind === "equal";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex justify-end",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Compare two log requests",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            "aria-label": "Close compare drawer",
+            className: "absolute inset-0 bg-black/40 cursor-default",
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: cn(
+              "relative bg-background border-l border-border shadow-xl",
+              "w-full md:w-[70vw] max-w-[1100px] flex flex-col h-full"
+            ),
+            onClick: (e) => e.stopPropagation(),
+            onKeyDown: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4 px-4 py-3 border-b border-border", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex gap-4 min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SideSummary, { log: left, side: "left" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SideSummary, { log: right, side: "right" })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    "aria-label": "Close",
+                    className: "shrink-0 p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" })
+                  }
+                )
+              ] }),
+              !sameSession && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-1.5 text-xs text-amber-400 bg-amber-500/10 border-b border-border", children: "Heads up: the two selected logs are from different sessions." }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: allEqual ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-12 text-center text-muted-foreground text-sm", children: "The two Request payloads are identical." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[200px_1fr_1fr] gap-x-2 gap-y-0.5 px-3 py-2 text-xs", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-3 grid grid-cols-[200px_1fr_1fr] gap-x-2 pb-2 mb-2 border-b border-border text-[10px] uppercase tracking-wider text-muted-foreground", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Path" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                    "Left (Log #",
+                    left.id,
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                    "Right (Log #",
+                    right.id,
+                    ")"
+                  ] })
+                ] }),
+                grouped.map((g, i) => {
+                  if (g.kind === "equal-run") {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      EqualRunRow,
+                      {
+                        ops: g.ops,
+                        expanded: expandedRuns.has(i),
+                        onToggle: () => toggleRun(i)
+                      },
+                      `r${i}`
+                    );
+                  }
+                  const op = g.op;
+                  if (op.kind === "equal") {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "div",
+                      {
+                        className: "col-span-3 grid grid-cols-[200px_1fr_1fr] gap-x-2 px-2 py-0.5 text-muted-foreground",
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs truncate", title: op.path, children: op.path }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs break-all opacity-60", children: previewNode(op.value, 200) }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs break-all opacity-60", children: previewNode(op.value, 200) })
+                        ]
+                      },
+                      `e${i}`
+                    );
+                  }
+                  if (op.kind === "added") {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(AddOrRemoveRow, { op, kind: "added" }, `a${i}`);
+                  }
+                  if (op.kind === "removed") {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(AddOrRemoveRow, { op, kind: "removed" }, `r${i}`);
+                  }
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(ChangedRow, { op }, `c${i}`);
+                })
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function truncateSessionId(id) {
   if (id.length <= 30) return id;
   return id.slice(0, 12) + "…" + id.slice(-12);
@@ -3953,6 +4510,9 @@ function ProxyViewer({
   const { totalIn, totalOut } = computeTokenSummary(logs);
   const [groupedView, setGroupedView] = reactExports.useState(true);
   const [exporting, setExporting] = reactExports.useState(false);
+  const [selectedLogIds, setSelectedLogIds] = reactExports.useState([]);
+  const [compareOpen, setCompareOpen] = reactExports.useState(false);
+  const [comparePair, setComparePair] = reactExports.useState(null);
   const handleExport = reactExports.useCallback(async () => {
     setExporting(true);
     try {
@@ -3962,7 +4522,75 @@ function ProxyViewer({
     }
   }, [logs]);
   const parentRef = reactExports.useRef(null);
+  const handleToggleSelect = reactExports.useCallback((logId) => {
+    setSelectedLogIds((prev) => {
+      if (prev.includes(logId)) {
+        return prev.filter((id) => id !== logId);
+      }
+      if (prev.length < 2) {
+        return [...prev, logId];
+      }
+      const newer = prev[1];
+      if (newer === void 0) return prev;
+      return [newer, logId];
+    });
+  }, []);
+  reactExports.useEffect(() => {
+    setSelectedLogIds([]);
+    setCompareOpen(false);
+  }, [selectedSession, selectedModel]);
+  const selectedSet = reactExports.useMemo(() => new Set(selectedLogIds), [selectedLogIds]);
+  const openCompare = reactExports.useCallback(() => {
+    if (selectedLogIds.length !== 2) return;
+    const [idA, idB] = selectedLogIds;
+    if (idA === void 0 || idB === void 0) return;
+    const logA = logs.find((l) => l.id === idA);
+    const logB = logs.find((l) => l.id === idB);
+    if (logA === void 0 || logB === void 0) return;
+    setComparePair([logA, logB]);
+    setCompareOpen(true);
+  }, [selectedLogIds, logs]);
+  const closeCompare = reactExports.useCallback(() => {
+    setCompareOpen(false);
+  }, []);
+  const clearSelection = reactExports.useCallback(() => {
+    setSelectedLogIds([]);
+  }, []);
+  const selectedSummary = reactExports.useMemo(() => {
+    if (selectedLogIds.length !== 2) return null;
+    const [idA, idB] = selectedLogIds;
+    if (idA === void 0 || idB === void 0) return null;
+    const logA = logs.find((l) => l.id === idA);
+    const logB = logs.find((l) => l.id === idB);
+    if (logA === void 0 || logB === void 0) return null;
+    const sameSession = getConversationId(logA) === getConversationId(logB);
+    let elapsed = "";
+    if (logA.timestamp !== null && logB.timestamp !== null) {
+      const a = Date.parse(logA.timestamp);
+      const b = Date.parse(logB.timestamp);
+      if (!Number.isNaN(a) && !Number.isNaN(b)) {
+        const ms = Math.abs(b - a);
+        elapsed = formatElapsed2(ms);
+      }
+    }
+    return {
+      logA,
+      logB,
+      sameSession,
+      elapsed
+    };
+  }, [selectedLogIds, logs]);
+  function formatElapsed2(ms) {
+    if (ms < 1e3) return `${ms}ms`;
+    const sec = Math.floor(ms / 1e3);
+    if (sec < 60) return `${sec}s`;
+    const min = Math.floor(sec / 60);
+    if (min < 60) return `${min}m`;
+    const hr = Math.floor(min / 60);
+    return `${hr}h${min % 60}m`;
+  }
   const groups = reactExports.useMemo(() => groupLogsByConversation(logs), [logs]);
+  const cacheTrends = reactExports.useMemo(() => computeCacheTrends(groups), [groups]);
   const renderGroups = logs.length > 0 && groupedView && !(groups.length === 1 && groups[0]?.logs.length === logs.length);
   const rowVirtualizer = useVirtualizer({
     count: renderGroups ? groups.length : logs.length,
@@ -4103,7 +4731,17 @@ function ProxyViewer({
                   width: "100%",
                   transform: `translateY(${virtualRow.start}px)`
                 },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConversationGroup, { group, viewMode, strip })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ConversationGroup,
+                  {
+                    group,
+                    viewMode,
+                    strip,
+                    cacheTrends,
+                    selectedSet,
+                    onToggleSelect: handleToggleSelect
+                  }
+                )
               },
               group.id
             );
@@ -4122,14 +4760,58 @@ function ProxyViewer({
                   width: "100%",
                   transform: `translateY(${virtualRow.start}px)`
                 },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(LogEntry, { log, viewMode, strip })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  LogEntry,
+                  {
+                    log,
+                    viewMode,
+                    strip,
+                    cacheTrend: cacheTrends.get(log.id) ?? null,
+                    isSelected: selectedSet.has(log.id),
+                    onToggleSelect: handleToggleSelect
+                  }
+                )
               },
               log.id
             );
           }
         })
       }
-    ) }) })
+    ) }) }),
+    selectedSummary !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-3 bg-background border border-border rounded-lg shadow-lg px-4 py-2 text-xs", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(GitCompareArrows, { className: "size-4 text-amber-400 shrink-0" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground font-mono", children: [
+        "#",
+        selectedSummary.logA.id,
+        " ↔ #",
+        selectedSummary.logB.id,
+        " · ",
+        selectedSummary.sameSession ? "same session" : "different sessions",
+        selectedSummary.elapsed !== "" && ` · ${selectedSummary.elapsed} apart`
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: clearSelection,
+          className: "text-muted-foreground hover:text-foreground transition-colors cursor-pointer inline-flex items-center gap-1",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-3" }),
+            "Clear"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: openCompare,
+          className: "bg-amber-400 text-amber-950 hover:bg-amber-300 transition-colors px-3 py-1 rounded font-medium cursor-pointer",
+          children: "Compare 2 logs"
+        }
+      )
+    ] }),
+    compareOpen && comparePair !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(CompareDrawer, { left: comparePair[0], right: comparePair[1], onClose: closeCompare })
   ] });
 }
 object({