@tonyclaw/llm-inspector 1.15.0 → 1.16.0

package/.output/server/_ssr/{index-P66uoVEU.mjs → index-BIOEVAzU.mjs}

@@ -1,18 +1,18 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, a as parseRequest, R as RuntimeConfigSchema, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, b as createFailedProviderTestResults, d as ProviderConfigSchema, O as OpenAIRequestSchema, p as parseOpenAIResponse, I as InspectorResponseSchema, s as stripClaudeCodeBillingHeader } from "./router-DpLCKk51.mjs";
+import { C as CapturedLogSchema, R as RuntimeConfigSchema, r as requestFormatForPath, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, b as createFailedProviderTestResults, d as ProviderConfigSchema, s as stripClaudeCodeBillingHeader, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, a as AnthropicRequestSchema } from "./router-THS9ptvu.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.mjs";
-import { u as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
 import { c as clsx } from "../_libs/clsx.mjs";
 import { t as twMerge } from "../_libs/tailwind-merge.mjs";
 import { J as JSZip } from "../_libs/jszip.mjs";
 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$2, C as Content, a as Close, b as Title, P as Portal$2, O as Overlay } from "../_libs/radix-ui__react-dialog.mjs";
+import { d as diffJson, a as diffLines } from "../_libs/diff.mjs";
+import { u as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
 import { R as Root2, T as Trigger, I as Icon, V as Value, P as Portal, C as Content2, a as Viewport, b as Item, c as ItemIndicator, d as ItemText, S as ScrollUpButton, e as ScrollDownButton } from "../_libs/radix-ui__react-select.mjs";
 import "../_libs/modelcontextprotocol__server.mjs";
-import { D as Download, S as Settings, C as ChevronDown, a as Check, X, U as Upload, b as Scan, P as Plus, c as Copy, d as CircleAlert, e as ChevronUp, L as LoaderCircle, f as ChevronRight, g as User, h as Clock, M as MessageSquare, Z as Zap, R as Rows3, i as Columns2, j as Minus, k as Pencil, E as Equal, l as EyeOff, m as Eye, n as ExternalLink, o as RotateCw, T as Trash2, G as GitCompareArrows, p as RotateCcw, q as CircleCheckBig, W as Wrench, r as Globe, F as FileTerminal, s as Radio, t as CircleQuestionMark, u as Server, v as Gauge, w as Lock, x as Wifi, y as WifiOff, A as ArrowUp, z as ArrowDown, B as TriangleAlert, H as CircleStop, I as ChevronsUp, J as ChevronsDown, K as Brain, N as Terminal } from "../_libs/lucide-react.mjs";
+import { D as Download, S as Settings, C as ChevronDown, a as Check, X, U as Upload, b as Scan, P as Plus, c as Copy, d as CircleAlert, e as ChevronUp, L as LoaderCircle, f as ChevronRight, g as User, h as Clock, M as MessageSquare, Z as Zap, T as Trash2, R as Rows3, i as Columns2, j as Minus, k as Pencil, E as Equal, l as EyeOff, m as Eye, n as ExternalLink, o as RotateCw, G as GitCompareArrows, p as RotateCcw, q as CircleCheckBig, W as Wrench, r as Globe, F as FileTerminal, s as Radio, t as CircleQuestionMark, u as Server, v as Gauge, w as Lock, x as Wifi, y as WifiOff, A as ArrowUp, z as ArrowDown, B as TriangleAlert, H as CircleStop, I as ChevronsUp, J as ChevronsDown, K as Brain, N as Terminal } from "../_libs/lucide-react.mjs";
 import { M as Markdown } from "../_libs/react-markdown.mjs";
-import { a as array, b as string, u as union, d as object, l as literal, n as number, c as boolean, _ as _enum } from "../_libs/zod.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";
 import { S as Slot } from "../_libs/radix-ui__react-slot.mjs";
@@ -36,8 +36,9 @@ import "stream";
 import "crypto";
 import "../_libs/isbot.mjs";
 import "node:fs";
-import "node:path";
 import "node:fs/promises";
+import "node:buffer";
+import "node:path";
 import "../_libs/conf.mjs";
 import "node:util";
 import "node:process";
@@ -62,7 +63,6 @@ import "../_libs/uint8array-extras.mjs";
 import "node:child_process";
 import "../_libs/use-sync-external-store.mjs";
 import "../_libs/dequal.mjs";
-import "../_libs/tanstack__virtual-core.mjs";
 import "../_libs/readable-stream.mjs";
 import "events";
 import "node:string_decoder";
@@ -99,6 +99,7 @@ import "../_libs/get-nonce.mjs";
 import "../_libs/use-sidecar.mjs";
 import "../_libs/use-callback-ref.mjs";
 import "../_libs/aria-hidden.mjs";
+import "../_libs/tanstack__virtual-core.mjs";
 import "../_libs/radix-ui__number.mjs";
 import "../_libs/radix-ui__react-collection.mjs";
 import "../_libs/radix-ui__react-direction.mjs";
@@ -333,38 +334,10 @@ async function exportLogsAsZip(logs) {
   document.body.removeChild(anchor);
   URL.revokeObjectURL(url);
 }
-const version = "1.15.0";
+const version = "1.16.0";
 const packageJson = {
   version
 };
-function isRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function extractStopReason(log) {
-  if (log.responseText === null) return null;
-  try {
-    let json = JSON.parse(log.responseText);
-    if (typeof json === "string") {
-      json = JSON.parse(json);
-    }
-    if (!isRecord(json)) return null;
-    if (typeof json.stop_reason === "string") {
-      if (json.stop_reason === "end_turn" || json.stop_reason === "tool_use") {
-        return json.stop_reason;
-      }
-      return null;
-    }
-    if (Array.isArray(json.choices) && json.choices.length > 0 && isRecord(json.choices[0]) && typeof json.choices[0].finish_reason === "string" && json.choices[0].finish_reason === "stop") {
-      return "stop";
-    }
-    return null;
-  } catch {
-    return null;
-  }
-}
-function isTurnBoundary(stopReason) {
-  return stopReason === "end_turn" || stopReason === "stop";
-}
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -400,6 +373,156 @@ function Badge({
     }
   );
 }
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$2, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$2, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg font-semibold leading-none tracking-tight", className),
+      ...props
+    }
+  );
+}
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  variant = "default",
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: title }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: description }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          variant,
+          size: "sm",
+          onClick: () => {
+            onConfirm();
+            onOpenChange(false);
+          },
+          children: confirmLabel
+        }
+      )
+    ] })
+  ] }) });
+}
 const API_FORMAT_LABELS = {
   anthropic: "Anthropic",
   openai: "OpenAI",
@@ -421,8 +544,15 @@ function ConversationHeader({
   onToggle,
   hideApiFormat = false,
   isLoading = false,
-  userAgent
+  userAgent,
+  onClear
 }) {
+  const [confirmOpen, setConfirmOpen] = reactExports.useState(false);
+  const handleClearClick = (e) => {
+    e.stopPropagation();
+    if (onClear === void 0) return;
+    setConfirmOpen(true);
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -432,10 +562,11 @@ function ConversationHeader({
         "flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors",
         "hover:bg-muted/50",
         "select-none",
-        "border border-border rounded-lg mb-2 bg-muted/30"
+        "border border-border rounded-lg mb-2 bg-background sticky top-0 z-10"
       ),
       onClick: onToggle,
       onKeyDown: (e) => {
+        if (e.target !== e.currentTarget) return;
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
           onToggle();
@@ -499,7 +630,32 @@ function ConversationHeader({
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-amber-400", children: formatTokens(totalOutputTokens) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 min-w-0" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 min-w-0" }),
+        onClear !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleClearClick,
+            "aria-label": `Clear group (${totalCalls} request${totalCalls !== 1 ? "s" : ""})`,
+            title: "Clear this group",
+            className: "text-muted-foreground hover:text-foreground transition-colors shrink-0 inline-flex items-center justify-center size-6 rounded hover:bg-muted cursor-pointer",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ConfirmDialog,
+          {
+            open: confirmOpen,
+            onOpenChange: setConfirmOpen,
+            title: "Clear this group?",
+            description: `This will remove ${totalCalls} request${totalCalls !== 1 ? "s" : ""} from this conversation. This action cannot be undone.`,
+            confirmLabel: "Clear",
+            variant: "destructive",
+            onConfirm: () => {
+              onClear?.();
+            }
+          }
+        )
       ]
     }
   );
@@ -522,11 +678,15 @@ function hasMixedApiFormat(logs) {
   return false;
 }
 function getConversationId(log) {
-  if (log.sessionId !== null && log.sessionId !== "") {
+  if (log.isTest === true) return "provider-test";
+  if (log.sessionId !== null && log.sessionId !== "" && log.sessionId !== void 0) {
     return log.sessionId;
   }
-  const pid = log.clientPid !== null ? `PID:${log.clientPid}` : "unknown";
-  const folder = log.clientProjectFolder !== null ? log.clientProjectFolder : "no-folder";
+  const hasPid = log.clientPid !== null && log.clientPid !== void 0;
+  const hasFolder = log.clientProjectFolder !== null && log.clientProjectFolder !== void 0;
+  if (!hasPid && !hasFolder) return "default";
+  const pid = hasPid ? `PID:${log.clientPid}` : "unknown";
+  const folder = hasFolder ? log.clientProjectFolder : "no-folder";
   return `${pid}|${folder}`;
 }
 function groupLogsByConversation(logs) {
@@ -552,45 +712,33 @@ function groupLogsByConversation(logs) {
   result.sort((a, b) => (a.logs[0]?.timestamp ?? "").localeCompare(b.logs[0]?.timestamp ?? ""));
   return result;
 }
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "size-9"
+function isRecord$1(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function extractStopReason(log) {
+  if (log.responseText === null) return null;
+  try {
+    let json = JSON.parse(log.responseText);
+    if (typeof json === "string") {
+      json = JSON.parse(json);
+    }
+    if (!isRecord$1(json)) return null;
+    if (typeof json.stop_reason === "string") {
+      if (json.stop_reason === "end_turn" || json.stop_reason === "tool_use") {
+        return json.stop_reason;
       }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
+      return null;
     }
-  }
-);
-function Button({
-  className,
-  variant,
-  size,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "button",
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
+    if (Array.isArray(json.choices) && json.choices.length > 0 && isRecord$1(json.choices[0]) && typeof json.choices[0].finish_reason === "string" && json.choices[0].finish_reason === "stop") {
+      return "stop";
     }
-  );
+    return null;
+  } catch {
+    return null;
+  }
+}
+function isTurnBoundary(stopReason) {
+  return stopReason === "end_turn" || stopReason === "stop";
 }
 function classifyValue(value) {
   if (value === null) return "null";
@@ -779,7 +927,7 @@ function ExpandCollapseButton({
     }
   );
 }
-function JsonNode({
+const JsonNode = reactExports.memo(function JsonNode2({
   name,
   value,
   level,
@@ -853,7 +1001,7 @@ function JsonNode({
     ),
     expandable && expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pl-4", children: [
       getEntries(value).map(([key, childValue]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        JsonNode,
+        JsonNode2,
         {
           name: key,
           value: childValue,
@@ -866,7 +1014,7 @@ function JsonNode({
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground py-0.5 px-1", children: closeBracket })
     ] }, childResetKey)
   ] });
-}
+});
 function JsonViewer({
   data,
   defaultExpandDepth = 2,
@@ -1112,7 +1260,7 @@ function kindClass(kind) {
   }
   return "text-foreground/80";
 }
-function DiffView({ result, emptyLabel }) {
+const DiffViewInner = function DiffView2({ result, emptyLabel }) {
   const [mode, setMode] = reactExports.useState("unified");
   const scrollRef = reactExports.useRef(null);
   const virtualizer = useVirtualizer({
@@ -1189,7 +1337,7 @@ function DiffView({ result, emptyLabel }) {
       }
     )
   ] });
-}
+};
 function UnifiedRows({
   virtualizer,
   lines
@@ -1347,6 +1495,7 @@ function SplitRows({ lines }) {
     idx
   )) });
 }
+const DiffView = reactExports.memo(DiffViewInner);
 const AnthropicLogoSvg = "data:image/svg+xml,%3csvg%20height='2500'%20viewBox='0%206.603%201192.672%201193.397'%20width='2500'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m233.96%20800.215%20234.684-131.678%203.947-11.436-3.947-6.363h-11.436l-39.221-2.416-134.094-3.624-116.296-4.832-112.67-6.04-28.35-6.04-26.577-35.035%202.738-17.477%2023.84-16.027%2034.147%202.98%2075.463%205.155%20113.235%207.812%2082.147%204.832%20121.692%2012.644h19.329l2.738-7.812-6.604-4.832-5.154-4.832-117.182-79.41-126.845-83.92-66.443-48.321-35.92-24.484-18.12-22.953-7.813-50.093%2032.618-35.92%2043.812%202.98%2011.195%202.98%2044.375%2034.147%2094.792%2073.37%20123.786%2091.167%2018.12%2015.06%207.249-5.154.886-3.624-8.135-13.61-67.329-121.692-71.838-123.785-31.974-51.302-8.456-30.765c-2.98-12.645-5.154-23.275-5.154-36.242l37.127-50.416%2020.537-6.604%2049.53%206.604%2020.86%2018.121%2030.765%2070.39%2049.852%20110.818%2077.315%20150.684%2022.631%2044.698%2012.08%2041.396%204.51%2012.645h7.813v-7.248l6.362-84.886%2011.759-104.215%2011.436-134.094%203.946-37.772%2018.685-45.262%2037.127-24.482%2028.994%2013.852%2023.839%2034.148-3.303%2022.067-14.174%2092.134-27.785%20144.323-18.121%2096.644h10.55l12.08-12.08%2048.887-64.913%2082.147-102.685%2036.242-40.752%2042.282-45.02%2027.14-21.423h51.303l37.772%2056.135-16.913%2057.986-52.832%2067.007-43.812%2056.779-62.82%2084.563-39.22%2067.651%203.623%205.396%209.343-.886%20141.906-30.201%2076.671-13.852%2091.49-15.705%2041.396%2019.329%204.51%2019.65-16.269%2040.189-97.852%2024.16-114.764%2022.954-170.9%2040.43-2.093%201.53%202.416%202.98%2076.993%207.248%2032.94%201.771h80.617l150.12%2011.195%2039.222%2025.933%2023.517%2031.732-3.946%2024.16-60.403%2030.766-81.503-19.33-190.228-45.26-65.235-16.27h-9.02v5.397l54.362%2053.154%2099.624%2089.96%20124.752%20115.973%206.362%2028.671-16.027%2022.63-16.912-2.415-109.611-82.47-42.282-37.127-95.758-80.618h-6.363v8.456l22.067%2032.296%20116.537%20175.167%206.04%2053.719-8.456%2017.476-30.201%2010.55-33.181-6.04-68.215-95.758-70.39-107.84-56.778-96.644-6.926%203.947-33.503%20360.886-15.705%2018.443-36.243%2013.852-30.201-22.953-16.027-37.127%2016.027-73.37%2019.329-95.758%2015.704-76.107%2014.175-94.55%208.456-31.41-.563-2.094-6.927.886-71.275%2097.852-108.402%20146.497-85.772%2091.812-20.537%208.134-35.597-18.443%203.301-32.94%2019.893-29.315%20118.712-151.007%2071.597-93.583%2046.228-54.04-.322-7.813h-2.738l-315.302%20204.725-56.135%207.248-24.16-22.63%202.98-37.128%2011.435-12.08%2094.792-65.236-.322.323z'%20fill='%23d97757'/%3e%3c/svg%3e";
 const OpenAILogoSvg = "data:image/svg+xml,%3csvg%20height='2500'%20viewBox='-1%20-.1%20949.1%20959.8'%20width='2474'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m925.8%20456.3c10.4%2023.2%2017%2048%2019.7%2073.3%202.6%2025.3%201.3%2050.9-4.1%2075.8-5.3%2024.9-14.5%2048.8-27.3%2070.8-8.4%2014.7-18.3%2028.5-29.7%2041.2-11.3%2012.6-23.9%2024-37.6%2034-13.8%2010-28.5%2018.4-44.1%2025.3-15.5%206.8-31.7%2012-48.3%2015.4-7.8%2024.2-19.4%2047.1-34.4%2067.7-14.9%2020.6-33%2038.7-53.6%2053.6-20.6%2015-43.4%2026.6-67.6%2034.4-24.2%207.9-49.5%2011.8-75%2011.8-16.9.1-33.9-1.7-50.5-5.1-16.5-3.5-32.7-8.8-48.2-15.7s-30.2-15.5-43.9-25.5c-13.6-10-26.2-21.5-37.4-34.2-25%205.4-50.6%206.7-75.9%204.1-25.3-2.7-50.1-9.3-73.4-19.7-23.2-10.3-44.7-24.3-63.6-41.4s-35-37.1-47.7-59.1c-8.5-14.7-15.5-30.2-20.8-46.3s-8.8-32.7-10.6-49.6c-1.8-16.8-1.7-33.8.1-50.7%201.8-16.8%205.5-33.4%2010.8-49.5-17-18.9-31-40.4-41.4-63.6-10.3-23.3-17-48-19.6-73.3-2.7-25.3-1.3-50.9%204-75.8s14.5-48.8%2027.3-70.8c8.4-14.7%2018.3-28.6%2029.6-41.2s24-24%2037.7-34%2028.5-18.5%2044-25.3c15.6-6.9%2031.8-12%2048.4-15.4%207.8-24.3%2019.4-47.1%2034.3-67.7%2015-20.6%2033.1-38.7%2053.7-53.7%2020.6-14.9%2043.4-26.5%2067.6-34.4%2024.2-7.8%2049.5-11.8%2075-11.7%2016.9-.1%2033.9%201.6%2050.5%205.1s32.8%208.7%2048.3%2015.6c15.5%207%2030.2%2015.5%2043.9%2025.5%2013.7%2010.1%2026.3%2021.5%2037.5%2034.2%2024.9-5.3%2050.5-6.6%2075.8-4s50%209.3%2073.3%2019.6c23.2%2010.4%2044.7%2024.3%2063.6%2041.4%2018.9%2017%2035%2036.9%2047.7%2059%208.5%2014.6%2015.5%2030.1%2020.8%2046.3%205.3%2016.1%208.9%2032.7%2010.6%2049.6%201.8%2016.9%201.8%2033.9-.1%2050.8-1.8%2016.9-5.5%2033.5-10.8%2049.6%2017.1%2018.9%2031%2040.3%2041.4%2063.6zm-333.2%20426.9c21.8-9%2041.6-22.3%2058.3-39s30-36.5%2039-58.4c9-21.8%2013.7-45.2%2013.7-68.8v-223q-.1-.3-.2-.7-.1-.3-.3-.6-.2-.3-.5-.5-.3-.3-.6-.4l-80.7-46.6v269.4c0%202.7-.4%205.5-1.1%208.1-.7%202.7-1.7%205.2-3.1%207.6s-3%204.6-5%206.5a32.1%2032.1%200%200%201%20-6.5%205l-191.1%20110.3c-1.6%201-4.3%202.4-5.7%203.2%207.9%206.7%2016.5%2012.6%2025.5%2017.8%209.1%205.2%2018.5%209.6%2028.3%2013.2%209.8%203.5%2019.9%206.2%2030.1%208%2010.3%201.8%2020.7%202.7%2031.1%202.7%2023.6%200%2047-4.7%2068.8-13.8zm-455.1-151.4c11.9%2020.5%2027.6%2038.3%2046.3%2052.7%2018.8%2014.4%2040.1%2024.9%2062.9%2031s46.6%207.7%2070%204.6%2045.9-10.7%2066.4-22.5l193.2-111.5.5-.5q.2-.2.3-.6.2-.3.3-.6v-94l-233.2%20134.9c-2.4%201.4-4.9%202.4-7.5%203.2-2.7.7-5.4%201-8.2%201-2.7%200-5.4-.3-8.1-1-2.6-.8-5.2-1.8-7.6-3.2l-191.1-110.4c-1.7-1-4.2-2.5-5.6-3.4-1.8%2010.3-2.7%2020.7-2.7%2031.1s1%2020.8%202.8%2031.1c1.8%2010.2%204.6%2020.3%208.1%2030.1%203.6%209.8%208%2019.2%2013.2%2028.2zm-50.2-417c-11.8%2020.5-19.4%2043.1-22.5%2066.5s-1.5%2047.1%204.6%2070c6.1%2022.8%2016.6%2044.1%2031%2062.9%2014.4%2018.7%2032.3%2034.4%2052.7%2046.2l193.1%20111.6q.3.1.7.2h.7q.4%200%20.7-.2.3-.1.6-.3l81-46.8-233.2-134.6c-2.3-1.4-4.5-3.1-6.5-5a32.1%2032.1%200%200%201%20-5-6.5c-1.3-2.4-2.4-4.9-3.1-7.6-.7-2.6-1.1-5.3-1-8.1v-227.1c-9.8%203.6-19.3%208-28.3%2013.2-9%205.3-17.5%2011.3-25.5%2018-7.9%206.7-15.3%2014.1-22%2022.1-6.7%207.9-12.6%2016.5-17.8%2025.5zm663.3%20154.4c2.4%201.4%204.6%203%206.6%205%201.9%201.9%203.6%204.1%205%206.5%201.3%202.4%202.4%205%203.1%207.6.6%202.7%201%205.4.9%208.2v227.1c32.1-11.8%2060.1-32.5%2080.8-59.7%2020.8-27.2%2033.3-59.7%2036.2-93.7s-3.9-68.2-19.7-98.5-39.9-55.5-69.5-72.5l-193.1-111.6q-.3-.1-.7-.2h-.7q-.3.1-.7.2-.3.1-.6.3l-80.6%2046.6%20233.2%20134.7zm80.5-121h-.1v.1zm-.1-.1c5.8-33.6%201.9-68.2-11.3-99.7-13.1-31.5-35-58.6-63-78.2-28-19.5-61-30.7-95.1-32.2-34.2-1.4-68%206.9-97.6%2023.9l-193.1%20111.5q-.3.2-.5.5l-.4.6q-.1.3-.2.7-.1.3-.1.7v93.2l233.2-134.7c2.4-1.4%205-2.4%207.6-3.2%202.7-.7%205.4-1%208.1-1%202.8%200%205.5.3%208.2%201%202.6.8%205.1%201.8%207.5%203.2l191.1%20110.4c1.7%201%204.2%202.4%205.6%203.3zm-505.3-103.2c0-2.7.4-5.4%201.1-8.1.7-2.6%201.7-5.2%203.1-7.6%201.4-2.3%203-4.5%205-6.5%201.9-1.9%204.1-3.6%206.5-4.9l191.1-110.3c1.8-1.1%204.3-2.5%205.7-3.2-26.2-21.9-58.2-35.9-92.1-40.2-33.9-4.4-68.3%201-99.2%2015.5-31%2014.5-57.2%2037.6-75.5%2066.4-18.3%2028.9-28%2062.3-28%2096.5v223q.1.4.2.7.1.3.3.6.2.3.5.6.2.2.6.4l80.7%2046.6zm43.8%20294.7%20103.9%2060%20103.9-60v-119.9l-103.8-60-103.9%2060z'/%3e%3c/svg%3e";
 const DeepSeekLogoSvg = "data:image/svg+xml,%3csvg%20fill='none'%20height='1320'%20viewBox='3.771%206.973%2023.993%2017.652'%20width='2500'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m27.501%208.469c-.252-.123-.36.111-.508.23-.05.04-.093.09-.135.135-.368.395-.797.652-1.358.621-.821-.045-1.521.213-2.14.842-.132-.776-.57-1.238-1.235-1.535-.349-.155-.701-.309-.944-.645-.171-.238-.217-.504-.303-.765-.054-.159-.108-.32-.29-.348-.197-.031-.274.135-.352.273-.31.567-.43%201.192-.419%201.825.028%201.421.628%202.554%201.82%203.36.136.093.17.186.128.321-.081.278-.178.547-.264.824-.054.178-.135.217-.324.14a5.448%205.448%200%200%201%20-1.719-1.169c-.848-.82-1.614-1.726-2.57-2.435-.225-.166-.449-.32-.681-.467-.976-.95.128-1.729.383-1.82.267-.096.093-.428-.77-.424s-1.653.293-2.659.677a2.782%202.782%200%200%201%20-.46.135%209.554%209.554%200%200%200%20-2.853-.1c-1.866.21-3.356%201.092-4.452%202.6-1.315%201.81-1.625%203.87-1.246%206.018.399%202.261%201.552%204.136%203.326%205.601%201.837%201.518%203.955%202.262%206.37%202.12%201.466-.085%203.1-.282%204.942-1.842.465.23.952.322%201.762.392.623.059%201.223-.031%201.687-.127.728-.154.677-.828.414-.953-2.132-.994-1.665-.59-2.09-.916%201.084-1.285%202.717-2.619%203.356-6.94.05-.343.007-.558%200-.837-.004-.168.034-.235.228-.254a4.084%204.084%200%200%200%201.529-.47c1.382-.757%201.938-1.997%202.07-3.485.02-.227-.004-.463-.243-.582zm-12.041%2013.391c-2.067-1.627-3.07-2.162-3.483-2.138-.387.021-.318.465-.233.754.089.285.205.482.368.732.113.166.19.414-.112.598-.666.414-1.823-.139-1.878-.166-1.347-.793-2.473-1.842-3.267-3.276-.765-1.38-1.21-2.861-1.284-4.441-.02-.383.093-.518.472-.586a4.692%204.692%200%200%201%201.514-.04c2.109.31%203.905%201.255%205.41%202.749.86.853%201.51%201.871%202.18%202.865.711%201.057%201.478%202.063%202.454%202.887.343.289.619.51.881.672-.792.088-2.117.107-3.022-.61zm.99-6.38a.304.304%200%201%201%20.609%200c0%20.17-.136.304-.306.304a.3.3%200%200%201%20-.303-.305zm3.077%201.581c-.197.08-.394.15-.584.159a1.246%201.246%200%200%201%20-.79-.252c-.27-.227-.463-.354-.546-.752a1.752%201.752%200%200%201%20.016-.582c.07-.324-.008-.531-.235-.72-.187-.155-.422-.196-.682-.196a.551.551%200%200%201%20-.252-.078c-.108-.055-.197-.19-.112-.356.027-.053.159-.183.19-.207.352-.201.758-.135%201.134.016.349.142.611.404.99.773.388.448.457.573.678.906.174.264.333.534.441.842.066.192-.02.35-.248.448z'%20fill='%234d6bfe'/%3e%3c/svg%3e";
@@ -1461,13 +1610,14 @@ const LogEntryHeader = reactExports.memo(function({
 }) {
   const statusCategory = getStatusCategory(log.responseStatus);
   const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  const toolNamesJoined = reactExports.useMemo(() => responseToolNames?.join(", ") ?? null, [responseToolNames]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       role: "button",
       tabIndex: 0,
       className: cn(
-        "flex items-center gap-2.5 px-3 py-2 cursor-pointer transition-colors",
+        "flex items-center gap-2 px-3 py-1 cursor-pointer transition-colors",
         "hover:bg-muted/50",
         "select-none"
       ),
@@ -1483,15 +1633,15 @@ const LogEntryHeader = reactExports.memo(function({
           "#",
           log.id
         ] }),
-        log.model !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        log.model !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogo, { provider: detectProvider(log.model), className: "size-4" }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: log.model })
-        ] }) }),
+        ] }),
         statusCategory !== "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: statusCategory === "server_error" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           Badge,
           {
             variant: "destructive",
-            className: "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums",
+            className: "text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums",
             children: log.responseStatus
           }
         ) : statusCategory === "pending" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1499,7 +1649,7 @@ const LogEntryHeader = reactExports.memo(function({
           {
             variant: "outline",
             className: cn(
-              "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums",
+              "text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums",
               STATUS_BADGE_CLASSES[statusCategory]
             ),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3 animate-spin" })
@@ -1509,7 +1659,7 @@ const LogEntryHeader = reactExports.memo(function({
           {
             variant: "outline",
             className: cn(
-              "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums",
+              "text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums",
               STATUS_BADGE_CLASSES[statusCategory]
             ),
             children: log.responseStatus
@@ -1522,10 +1672,16 @@ const LogEntryHeader = reactExports.memo(function({
         hasTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs shrink-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3 text-muted-foreground" }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground", children: [
-              "IN ",
-              log.inputTokens !== null ? formatTokens(log.inputTokens) : "—"
-            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "span",
+              {
+                className: log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground",
+                children: [
+                  "IN ",
+                  log.inputTokens !== null ? formatTokens(log.inputTokens) : "—"
+                ]
+              }
+            ),
             " / ",
             /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "span",
@@ -1539,7 +1695,7 @@ const LogEntryHeader = reactExports.memo(function({
             )
           ] })
         ] }),
-        log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__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: [
@@ -1548,8 +1704,8 @@ const LogEntryHeader = reactExports.memo(function({
             ] })
           ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Tokens cached for reuse, reducing future API cost" })
-        ] }) }),
-        log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        ] }),
+        log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__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: [
@@ -1558,31 +1714,31 @@ const LogEntryHeader = reactExports.memo(function({
             ] })
           ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Tokens served from cache, reducing API cost" })
-        ] }) }),
-        messageCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        ] }),
+        messageCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__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 })
           ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Number of messages in the conversation" })
-        ] }) }),
-        toolCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        ] }),
+        toolCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: toolCount })
           ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Number of tools defined in the request" })
-        ] }) }),
-        responseToolNames !== null && responseToolNames.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        ] }),
+        responseToolNames !== null && responseToolNames.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-amber-400/80 text-xs shrink-0", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[160px]", children: responseToolNames.join(", ") })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[160px]", children: toolNamesJoined })
           ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipContent, { children: [
             "Tools called by model: ",
-            responseToolNames.join(", ")
+            toolNamesJoined
           ] })
-        ] }) }),
+        ] }),
         log.origin !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "span",
           {
@@ -1594,7 +1750,7 @@ const LogEntryHeader = reactExports.memo(function({
             ]
           }
         ),
-        (log.clientPid !== null || log.clientProjectFolder !== null) && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        (log.clientPid !== null || log.clientProjectFolder !== null) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden xl:flex items-center gap-1 text-purple-400/80 text-xs shrink-0", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(FileTerminal, { className: "size-3" }),
             log.clientProjectFolder !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: log.clientProjectFolder }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
@@ -1603,98 +1759,17 @@ const LogEntryHeader = reactExports.memo(function({
             ] })
           ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: log.clientCwd !== null ? `PID: ${log.clientPid ?? "?"}  CWD: ${log.clientCwd}` : `Process ID: ${log.clientPid ?? "?"}` })
-        ] }) }),
-        log.streaming && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        ] }),
+        log.streaming && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { className: "size-3 text-muted-foreground/60 shrink-0" }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Request used SSE streaming" })
-        ] }) }),
+        ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 min-w-0" }),
         expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" })
       ]
     }
-  );
+  ) });
 });
-function Dialog({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root, { "data-slot": "dialog", ...props });
-}
-function DialogTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$2, { "data-slot": "dialog-trigger", ...props });
-}
-function DialogPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$2, { "data-slot": "dialog-portal", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Overlay,
-    {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogContent({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Content,
-      {
-        "data-slot": "dialog-content",
-        className: cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Close" })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      "data-slot": "dialog-header",
-      className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
-      ...props
-    }
-  );
-}
-function DialogTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn("text-lg font-semibold leading-none tracking-tight", className),
-      ...props
-    }
-  );
-}
 function Separator({
   className,
   orientation = "horizontal",
@@ -1807,7 +1882,7 @@ function extractThinkingFromContent(text) {
   const remainingText = text.replace(THINKING_TAG_REGEX, "").trim();
   return { thinking, remainingText };
 }
-function TextBlock({ text }) {
+const TextBlock = reactExports.memo(function TextBlock2({ text }) {
   if (text.includes("<system-reminder>")) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(SystemReminderBlock, { text });
   }
@@ -1817,8 +1892,10 @@ function TextBlock({ text }) {
     remainingText.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { children: remainingText }) }),
     thinking === null && remainingText.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "Empty text block" })
   ] });
-}
-function ThinkingBlock({ thinking }) {
+});
+const ThinkingBlock = reactExports.memo(function ThinkingBlock2({
+  thinking
+}) {
   const [open, setOpen] = reactExports.useState(false);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-l-2 border-purple-500/40 my-1", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsibleTrigger, { className: "flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-purple-500/5 transition-colors rounded-r-sm group", children: [
@@ -1840,8 +1917,8 @@ function ThinkingBlock({ thinking }) {
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "max-h-[60vh]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap font-mono leading-relaxed", children: thinking }) }) }) })
   ] }) });
-}
-function ToolUseBlock({
+});
+const ToolUseBlock = reactExports.memo(function ToolUseBlock2({
   name,
   input
 }) {
@@ -1855,8 +1932,8 @@ function ToolUseBlock({
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "max-h-[60vh]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewer, { data: safeJsonValue(input), defaultExpandDepth: 2 }) }) }) })
   ] }) });
-}
-function ResponseContentBlockRenderer({
+});
+const ResponseContentBlockRenderer = reactExports.memo(function ResponseContentBlockRenderer2({
   block
 }) {
   switch (block.type) {
@@ -1870,8 +1947,8 @@ function ResponseContentBlockRenderer({
     default:
       return assertNever();
   }
-}
-function StructuredResponseViewAnthropic({
+});
+const StructuredResponseViewAnthropic = reactExports.memo(function StructuredResponseViewAnthropic2({
   response
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
@@ -1913,7 +1990,7 @@ function StructuredResponseViewAnthropic({
       response.content.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "Empty response content" })
     ] })
   ] });
-}
+});
 function parseToolArguments(raw) {
   if (raw === void 0 || raw === "") return {};
   try {
@@ -1941,7 +2018,9 @@ function OpenAIToolCallBlock({ call }) {
     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewer, { data: safeJsonValue(parsed), defaultExpandDepth: 2 }) }) }) })
   ] }) });
 }
-function OpenAIResponseView({ response }) {
+const OpenAIResponseView = reactExports.memo(function OpenAIResponseView2({
+  response
+}) {
   const choice = response.choices[0];
   const message = choice?.message;
   const toolCalls = message?.tool_calls ?? [];
@@ -1999,17 +2078,119 @@ function OpenAIResponseView({ response }) {
       (message?.content === null || message?.content === void 0 || message.content.length === 0) && (message?.reasoning_content === null || message?.reasoning_content === void 0 || message.reasoning_content.length === 0) && (message?.function_call === null || message?.function_call === void 0) && toolCalls.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "Empty response content" })
     ] })
   ] });
+});
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-function isOpenAIResponse(resp) {
-  if (typeof resp !== "object" || resp === null) return false;
-  const desc = Object.getOwnPropertyDescriptor(resp, "object");
-  return desc?.value === "chat.completion";
+function isOpenAIResponse(response) {
+  return isRecord(response) && response.object === "chat.completion";
+}
+function isAnthropicResponse(response) {
+  return isRecord(response) && response.type === "message" && Array.isArray(response.content);
 }
 function formatViewFor(apiFormat, response) {
-  if (isOpenAIResponse(response)) {
+  if (apiFormat === "openai" && isOpenAIResponse(response)) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(OpenAIResponseView, { response });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(StructuredResponseViewAnthropic, { response });
+  if (apiFormat === "anthropic" && isAnthropicResponse(response)) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(StructuredResponseViewAnthropic, { response });
+  }
+  return null;
+}
+function emptyRequestAnalysis(rawBody) {
+  return {
+    parsed: null,
+    comparisonValue: rawBody,
+    messageCount: null,
+    toolCount: null
+  };
+}
+const EMPTY_RESPONSE_ANALYSIS = {
+  parsed: null,
+  toolNames: null
+};
+const anthropicLogFormatAdapter = {
+  format: "anthropic",
+  analyzeRequest(rawBody) {
+    if (rawBody === null) return emptyRequestAnalysis(rawBody);
+    try {
+      const result = AnthropicRequestSchema.safeParse(JSON.parse(rawBody));
+      if (!result.success) return emptyRequestAnalysis(rawBody);
+      return {
+        parsed: result.data,
+        comparisonValue: result.data,
+        messageCount: result.data.messages.length,
+        toolCount: result.data.tools !== void 0 && result.data.tools.length > 0 ? result.data.tools.length : null
+      };
+    } catch {
+      return emptyRequestAnalysis(rawBody);
+    }
+  },
+  analyzeResponse(responseText) {
+    if (responseText === null) return EMPTY_RESPONSE_ANALYSIS;
+    try {
+      let json = JSON.parse(responseText);
+      if (typeof json === "string") json = JSON.parse(json);
+      const result = AnthropicResponseSchema$1.safeParse(json);
+      if (!result.success) return EMPTY_RESPONSE_ANALYSIS;
+      const toolNames = result.data.content.filter((block) => block.type === "tool_use").map((block) => block.name);
+      return {
+        parsed: result.data,
+        toolNames: toolNames.length > 0 ? toolNames : null
+      };
+    } catch {
+      return EMPTY_RESPONSE_ANALYSIS;
+    }
+  }
+};
+const openAILogFormatAdapter = {
+  format: "openai",
+  analyzeRequest(rawBody) {
+    if (rawBody === null) return emptyRequestAnalysis(rawBody);
+    try {
+      const result = OpenAIRequestSchema.safeParse(JSON.parse(rawBody));
+      if (!result.success) return emptyRequestAnalysis(rawBody);
+      return {
+        parsed: result.data,
+        comparisonValue: result.data,
+        messageCount: result.data.messages.length,
+        toolCount: result.data.tools !== void 0 && result.data.tools.length > 0 ? result.data.tools.length : null
+      };
+    } catch {
+      return emptyRequestAnalysis(rawBody);
+    }
+  },
+  analyzeResponse(responseText) {
+    if (responseText === null) return EMPTY_RESPONSE_ANALYSIS;
+    const parsed = parseOpenAIResponse(responseText);
+    if (parsed === null) return EMPTY_RESPONSE_ANALYSIS;
+    const toolNames = parsed.choices[0]?.message?.tool_calls?.map((toolCall) => toolCall.function?.name ?? "").filter((name) => name !== "") ?? [];
+    return {
+      parsed,
+      toolNames: toolNames.length > 0 ? toolNames : null
+    };
+  }
+};
+const unknownLogFormatAdapter = {
+  format: "unknown",
+  analyzeRequest(rawBody) {
+    return emptyRequestAnalysis(rawBody);
+  },
+  analyzeResponse() {
+    return EMPTY_RESPONSE_ANALYSIS;
+  }
+};
+const ADAPTERS = {
+  anthropic: anthropicLogFormatAdapter,
+  openai: openAILogFormatAdapter,
+  unknown: unknownLogFormatAdapter
+};
+function getLogFormatAdapter(format) {
+  return ADAPTERS[format];
+}
+function resolveLogFormat(log) {
+  const pathFormat = requestFormatForPath(log.path);
+  return pathFormat === "unknown" ? log.apiFormat : pathFormat;
 }
 function getStatusClasses(category) {
   switch (category) {
@@ -2023,23 +2204,6 @@ function getStatusClasses(category) {
       return "text-muted-foreground";
   }
 }
-function parseResponse(text, apiFormat) {
-  try {
-    let json = JSON.parse(text);
-    if (typeof json === "string") {
-      json = JSON.parse(json);
-    }
-    if (apiFormat === "openai") {
-      const result2 = parseOpenAIResponse(text);
-      if (result2) return result2;
-    }
-    const result = InspectorResponseSchema.safeParse(json);
-    if (result.success) return result.data;
-    return null;
-  } catch {
-    return null;
-  }
-}
 function StatusIndicator({ status }) {
   const category = getStatusCategory(status);
   const classes = getStatusClasses(category);
@@ -2057,7 +2221,7 @@ function ErrorResponseView({ text }) {
 function MarkdownFallbackView({ text }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { children: text }) });
 }
-function ResponseView({
+const ResponseView = reactExports.memo(function ResponseView2({
   responseText,
   responseStatus,
   streaming,
@@ -2068,6 +2232,11 @@ function ResponseView({
   apiFormat,
   error
 }) {
+  const resolvedFormat = apiFormat ?? "unknown";
+  const parsed = reactExports.useMemo(
+    () => getLogFormatAdapter(resolvedFormat).analyzeResponse(responseText).parsed,
+    [resolvedFormat, responseText]
+  );
   if (responseText === null && error === void 0) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 py-3", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: responseStatus }),
@@ -2095,11 +2264,10 @@ function ResponseView({
       responseText !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorResponseView, { text: responseText }) })
     ] });
   }
-  const parsed = responseText !== null ? parseResponse(responseText, apiFormat) : null;
   if (parsed !== null) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: responseStatus }),
-      formatViewFor(apiFormat, parsed)
+      formatViewFor(resolvedFormat, parsed)
     ] });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
@@ -2126,7 +2294,7 @@ function ResponseView({
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownFallbackView, { text: responseText ?? "" })
   ] });
-}
+});
 const ReplayResultSchema = object({
   success: boolean(),
   error: string().optional(),
@@ -2276,7 +2444,7 @@ function ReplayDialog({ log, open, onOpenChange }) {
     ] })
   ] }) });
 }
-function StreamingChunkSequence({
+const StreamingChunkSequence = reactExports.memo(function StreamingChunkSequence2({
   logId,
   truncated
 }) {
@@ -2408,7 +2576,7 @@ function StreamingChunkSequence({
     ] }) }),
     containerExpanded === true ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-border bg-muted/20 overflow-auto max-h-64", children: renderBody() }) : null
   ] });
-}
+});
 function shouldShowRawRequestTab(apiFormat, viewMode, strip) {
   return apiFormat === "anthropic" && viewMode === "full" && strip;
 }
@@ -2445,7 +2613,7 @@ function DiffToggleButton({
   active,
   onClick
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
@@ -2463,7 +2631,49 @@ function DiffToggleButton({
       }
     ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: active ? "Hide diff view" : "Compare proxy output against the original raw version" })
-  ] }) });
+  ] });
+}
+const RequestDiffContent = reactExports.memo(function({
+  rawBody,
+  displayedBody,
+  emptyLabel
+}) {
+  const result = reactExports.useMemo(
+    () => computeRequestDiff(rawBody, displayedBody),
+    [rawBody, displayedBody]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(DiffView, { result, emptyLabel });
+});
+const HeadersDiffContent = reactExports.memo(function({
+  rawHeaders,
+  headers,
+  emptyLabel
+}) {
+  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,
@@ -2473,156 +2683,81 @@ const LogEntry = reactExports.memo(function({
   onCompareWithPrevious
 }) {
   const [expanded, setExpanded] = reactExports.useState(false);
-  const [requestCopied, setRequestCopied] = reactExports.useState(false);
-  const [rawRequestCopied, setRawRequestCopied] = reactExports.useState(false);
-  const [responseCopied, setResponseCopied] = reactExports.useState(false);
   const [replayOpen, setReplayOpen] = reactExports.useState(false);
   const [headersDiff, setHeadersDiff] = reactExports.useState(false);
   const [requestDiff, setRequestDiff] = reactExports.useState(false);
-  const messageCount = reactExports.useMemo(() => {
-    if (log.rawRequestBody === null) return null;
-    if (log.apiFormat === "anthropic") {
-      const parsed = parseRequest(log.rawRequestBody);
-      if (parsed !== null) return parsed.messages.length;
-    } else if (log.apiFormat === "openai") {
-      try {
-        const result = OpenAIRequestSchema.safeParse(JSON.parse(log.rawRequestBody));
-        if (result.success) return result.data.messages.length;
-      } catch {
-      }
-    }
-    return null;
-  }, [log.rawRequestBody, log.apiFormat]);
-  const toolCount = reactExports.useMemo(() => {
-    if (log.rawRequestBody === null) return null;
-    if (log.apiFormat === "anthropic") {
-      const parsed = parseRequest(log.rawRequestBody);
-      if (parsed !== null && parsed.tools !== void 0 && parsed.tools.length > 0) {
-        return parsed.tools.length;
-      }
-    } else if (log.apiFormat === "openai") {
-      try {
-        const result = OpenAIRequestSchema.safeParse(JSON.parse(log.rawRequestBody));
-        if (result.success && result.data.tools !== void 0 && result.data.tools.length > 0) {
-          return result.data.tools.length;
-        }
-      } catch {
-      }
-    }
-    return null;
-  }, [log.rawRequestBody, log.apiFormat]);
-  const responseToolNames = reactExports.useMemo(() => {
-    if (log.responseText === null) return null;
-    if (log.apiFormat === "openai") {
-      const parsed = parseOpenAIResponse(log.responseText);
-      if (parsed !== null) {
-        const toolCalls = parsed.choices[0]?.message?.tool_calls;
-        if (toolCalls !== void 0 && toolCalls !== null && toolCalls.length > 0) {
-          return toolCalls.map((tc) => tc.function?.name ?? "?").filter((n) => n !== "");
-        }
-      }
-    } else if (log.apiFormat === "anthropic") {
-      try {
-        const result = InspectorResponseSchema.safeParse(JSON.parse(log.responseText));
-        if (result.success) {
-          const names = result.data.content.filter((c) => c.type === "tool_use").map((c) => c.name);
-          if (names.length > 0) return names;
-        }
-      } catch {
-      }
-    }
-    return null;
-  }, [log.responseText, log.apiFormat]);
+  const [activeTab, setActiveTab] = reactExports.useState("request");
+  const resolvedFormat = resolveLogFormat(log);
+  const adapter = getLogFormatAdapter(resolvedFormat);
+  const requestAnalysis = reactExports.useMemo(
+    () => adapter.analyzeRequest(log.rawRequestBody),
+    [adapter, log.rawRequestBody]
+  );
+  const responseAnalysis = reactExports.useMemo(
+    () => adapter.analyzeResponse(log.responseText),
+    [adapter, log.responseText]
+  );
   const strippedRequestBody = reactExports.useMemo(() => {
-    if (!strip || log.apiFormat !== "anthropic" || log.rawRequestBody === null) {
+    if (!strip || resolvedFormat !== "anthropic" || log.rawRequestBody === null) {
       return null;
     }
     return stripClaudeCodeBillingHeader(log.rawRequestBody).body;
-  }, [log.rawRequestBody, log.apiFormat, strip]);
+  }, [log.rawRequestBody, resolvedFormat, strip]);
   const displayedRequestBody = strippedRequestBody ?? log.rawRequestBody;
-  const headersDiffResult = reactExports.useMemo(
-    () => computeHeadersDiff(log.rawHeaders, log.headers),
-    [log.rawHeaders, log.headers]
-  );
-  const requestDiffResult = reactExports.useMemo(
-    () => computeRequestDiff(log.rawRequestBody, displayedRequestBody),
-    [log.rawRequestBody, displayedRequestBody]
-  );
-  function handleCopyRequest(e) {
-    e.stopPropagation();
-    if (displayedRequestBody === null) return;
-    void window.navigator.clipboard.writeText(displayedRequestBody).then(() => {
-      setRequestCopied(true);
-      setTimeout(() => setRequestCopied(false), 2e3);
-    });
-  }
-  function handleCopyRawRequest(e) {
-    e.stopPropagation();
-    if (log.rawRequestBody === null) return;
-    void window.navigator.clipboard.writeText(log.rawRequestBody).then(() => {
-      setRawRequestCopied(true);
-      setTimeout(() => setRawRequestCopied(false), 2e3);
-    });
-  }
-  function handleCopyResponse(e) {
-    e.stopPropagation();
-    if (log.responseText === null) return;
-    void window.navigator.clipboard.writeText(log.responseText).then(() => {
-      setResponseCopied(true);
-      setTimeout(() => setResponseCopied(false), 2e3);
-    });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border rounded-lg mb-3 overflow-hidden", children: [
+  const requestCopy = useCopyFeedback(displayedRequestBody);
+  const rawRequestCopy = useCopyFeedback(log.rawRequestBody);
+  const responseCopy = useCopyFeedback(log.responseText);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border rounded-lg mb-1 overflow-hidden", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         LogEntryHeader,
         {
           log,
-          messageCount,
-          toolCount,
+          messageCount: requestAnalysis.messageCount,
+          toolCount: requestAnalysis.toolCount,
           expanded,
           onToggle: () => setExpanded(!expanded),
-          responseToolNames,
+          responseToolNames: responseAnalysis.toolNames,
           cacheTrend
         }
       ),
-      expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "request", children: [
+      expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "mx-4 mt-2", children: [
-          viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw-headers", children: "Raw Headers" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "HTTP headers received from the upstream provider" })
-          ] }) }),
-          viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          ] }),
+          viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "headers", children: "Headers" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Request and response headers sent and received" })
-          ] }) }),
-          shouldShowRawRequestTab(log.apiFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          ] }),
+          shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw-request", children: "Raw Request" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Exact HTTP request sent to the upstream provider" })
-          ] }) }),
+          ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "request", children: "Request" }),
-          viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Exact HTTP response from the upstream provider" })
-          ] }) }),
+          ] }),
           /* @__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: [
+        shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             CopyButton,
             {
               text: log.rawRequestBody,
               label: "Copy Raw Request",
-              copied: rawRequestCopied,
-              onCopy: handleCopyRawRequest
+              copied: rawRequestCopy.copied,
+              onCopy: rawRequestCopy.copy
             }
           ) }),
           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.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
             shouldShowRequestDiffButton(
-              log.apiFormat,
+              resolvedFormat,
               viewMode,
               strip,
               log.rawRequestBody !== null
@@ -2636,7 +2771,7 @@ const LogEntry = reactExports.memo(function({
                 }
               }
             ),
-            onCompareWithPrevious !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            onCompareWithPrevious !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 Button,
                 {
@@ -2645,7 +2780,7 @@ const LogEntry = reactExports.memo(function({
                   className: "h-7 text-xs",
                   onClick: (e) => {
                     e.stopPropagation();
-                    onCompareWithPrevious();
+                    onCompareWithPrevious(log);
                   },
                   children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx(GitCompareArrows, { className: "size-3 mr-1" }),
@@ -2654,8 +2789,8 @@ const LogEntry = reactExports.memo(function({
                 }
               ) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Compare this request with the immediately preceding one" })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 Button,
                 {
@@ -2673,26 +2808,27 @@ const LogEntry = reactExports.memo(function({
                 }
               ) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Re-send this request to the provider" })
-            ] }) }),
+            ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               CopyButton,
               {
                 text: displayedRequestBody,
                 label: "Copy Request",
-                copied: requestCopied,
-                onCopy: handleCopyRequest
+                copied: requestCopy.copied,
+                onCopy: requestCopy.copy
               }
             )
           ] }),
           requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DiffView,
+            RequestDiffContent,
             {
-              result: requestDiffResult,
+              rawBody: log.rawRequestBody,
+              displayedBody: displayedRequestBody,
               emptyLabel: "No transformation applied — raw and sent request bodies are identical."
             }
           ) : displayedRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: displayedRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
         ] }) }),
-        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
+        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: activeTab === "headers" && /* @__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
@@ -2707,9 +2843,10 @@ const LogEntry = reactExports.memo(function({
             }
           ) }),
           headersDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DiffView,
+            HeadersDiffContent,
             {
-              result: headersDiffResult,
+              rawHeaders: log.rawHeaders,
+              headers: log.headers,
               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: [
@@ -2720,14 +2857,14 @@ const LogEntry = reactExports.memo(function({
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
           ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No headers captured" })
         ] }) }),
-        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.rawHeaders).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: activeTab === "raw-headers" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 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: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: activeTab === "raw" && /* @__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 })
@@ -2737,8 +2874,8 @@ const LogEntry = reactExports.memo(function({
             {
               text: log.responseText,
               label: "Copy Response",
-              copied: responseCopied,
-              onCopy: handleCopyResponse
+              copied: responseCopy.copied,
+              onCopy: responseCopy.copy
             }
           ) }),
           log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: log.responseText, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
@@ -2750,7 +2887,7 @@ const LogEntry = reactExports.memo(function({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: activeTab === "parsed" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           ResponseView,
           {
             responseText: log.responseText,
@@ -2760,7 +2897,7 @@ const LogEntry = reactExports.memo(function({
             outputTokens: log.outputTokens,
             cacheCreationInputTokens: log.cacheCreationInputTokens,
             cacheReadInputTokens: log.cacheReadInputTokens,
-            apiFormat: log.apiFormat,
+            apiFormat: resolvedFormat,
             error: log.error
           }
         ) }) })
@@ -3173,37 +3310,37 @@ function ThreadConnector({
     ) })
   ] });
 }
-function TurnGroup({
-  logs,
+const TurnGroup = reactExports.memo(function TurnGroup2({
+  entries,
   viewMode,
   strip,
   cacheTrends,
   onCompareWithPrevious,
+  comparisonPredecessors,
   turnIndex = 0
 }) {
-  const stopReasons = reactExports.useMemo(() => logs.map((l) => extractStopReason(l)), [logs]);
-  const lastIdx = logs.length - 1;
-  const lastStop = stopReasons[lastIdx] ?? null;
+  const lastIdx = entries.length - 1;
+  const lastStop = entries[lastIdx]?.stopReason ?? null;
   const isComplete = lastStop !== null ? isTurnBoundary(lastStop) : false;
-  const isPending = logs[lastIdx]?.responseStatus === null;
+  const isPending = entries[lastIdx]?.log.responseStatus === null;
   const collapsible = isComplete && !isPending;
   const [collapsed, setCollapsed] = reactExports.useState(false);
   const toggleCollapse = reactExports.useCallback(() => {
     if (collapsible) setCollapsed((prev) => !prev);
   }, [collapsible]);
-  const visibleLogs = reactExports.useMemo(() => {
-    if (!collapsed) return logs;
-    const last = logs[lastIdx];
+  const visibleEntries = reactExports.useMemo(() => {
+    if (!collapsed) return entries;
+    const last = entries[lastIdx];
     return last !== void 0 ? [last] : [];
-  }, [logs, collapsed, lastIdx]);
+  }, [entries, collapsed, lastIdx]);
   const bgClass = turnIndex % 2 === 0 ? "bg-muted/10" : "bg-muted/25";
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       className: cn("border rounded-lg", isPending ? "border-amber-500/10" : "border-transparent"),
-      children: visibleLogs.map((log, visibleIdx) => {
+      children: visibleEntries.map((entry, visibleIdx) => {
         const originalIdx = collapsed ? lastIdx : visibleIdx;
-        const reason = stopReasons[originalIdx] ?? null;
+        const { log, stopReason: reason } = entry;
         const isBoundary = reason === "end_turn" || reason === "stop";
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3214,25 +3351,59 @@ function TurnGroup({
               isFirst: originalIdx === 0,
               isTurnStart: originalIdx === 0,
               crabIndex: log.id % 12,
-              collapsible: collapsible && isBoundary && logs.length > 1,
+              collapsible: collapsible && isBoundary && entries.length > 1,
               collapsed,
               onToggle: toggleCollapse
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex-1 min-w-0 mb-2 rounded-lg", bgClass), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex-1 min-w-0 mb-0.5 rounded-lg", bgClass), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             LogEntry,
             {
               log,
               viewMode,
               strip,
               cacheTrend: cacheTrends?.get(log.id) ?? null,
-              onCompareWithPrevious: () => onCompareWithPrevious(log)
+              onCompareWithPrevious: comparisonPredecessors.has(log.id) ? onCompareWithPrevious : void 0
             }
           ) })
         ] }, log.id);
       })
     }
   );
+});
+function shouldRenderConversationContent(standalone, expanded) {
+  return standalone || expanded;
+}
+function buildTurnGroups(logs) {
+  const groups = [];
+  let entries = [];
+  let turnIndex = 0;
+  for (const log of logs) {
+    entries.push({ log, stopReason: extractStopReason(log) });
+    const current = entries[entries.length - 1];
+    if (current !== void 0 && isTurnBoundary(current.stopReason)) {
+      groups.push({ entries, turnIndex });
+      entries = [];
+      turnIndex += 1;
+    }
+  }
+  if (entries.length > 0) groups.push({ entries, turnIndex });
+  return groups;
+}
+function buildValidPredecessors(groups) {
+  const predecessors = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    for (let index = 1; index < group.logs.length; index += 1) {
+      const current = group.logs[index];
+      const previous = group.logs[index - 1];
+      if (current === void 0 || previous === void 0) continue;
+      const currentFormat = resolveLogFormat(current);
+      const previousFormat = resolveLogFormat(previous);
+      if (currentFormat === "unknown" || currentFormat !== previousFormat) continue;
+      predecessors.set(current.id, previous);
+    }
+  }
+  return predecessors;
 }
 function computeStats(logs) {
   let totalInput = 0;
@@ -3249,51 +3420,19 @@ const ConversationGroup = reactExports.memo(function({
   strip,
   cacheTrends,
   onCompareWithPrevious,
+  comparisonPredecessors,
+  onClearGroup,
   standalone = false
 }) {
-  const [expanded, setExpanded] = reactExports.useState(standalone);
-  const stats = computeStats(group.logs);
+  const [expanded, setExpanded] = reactExports.useState(false);
+  const stats = reactExports.useMemo(() => computeStats(group.logs), [group.logs]);
   const startTime = group.logs[0]?.timestamp ?? (/* @__PURE__ */ new Date()).toISOString();
   const endTime = group.logs[group.logs.length - 1]?.timestamp ?? (/* @__PURE__ */ new Date()).toISOString();
   const mixed = hasMixedApiFormat(group.logs);
   const isLoading = group.logs.some((log) => log.responseStatus === null);
-  const stopReasons = reactExports.useMemo(() => group.logs.map((log) => extractStopReason(log)), [group.logs]);
-  const turnIndices = reactExports.useMemo(() => {
-    const indices = [];
-    let turn = 0;
-    for (let i = 0; i < stopReasons.length; i++) {
-      if (i > 0 && (stopReasons[i - 1] === "end_turn" || stopReasons[i - 1] === "stop")) {
-        turn++;
-      }
-      indices.push(turn);
-    }
-    return indices;
-  }, [stopReasons]);
-  const turnGroups = reactExports.useMemo(() => {
-    const groups = [];
-    let currentGroup = [];
-    let currentTurn = 0;
-    for (let i = 0; i < group.logs.length; i++) {
-      const turnIdx = turnIndices[i] ?? 0;
-      const log = group.logs[i];
-      if (!log) continue;
-      if (turnIdx !== currentTurn) {
-        if (currentGroup.length > 0) {
-          groups.push({ logs: currentGroup, turnIndex: currentTurn });
-        }
-        currentGroup = [log];
-        currentTurn = turnIdx;
-      } else {
-        currentGroup.push(log);
-      }
-    }
-    if (currentGroup.length > 0) {
-      groups.push({ logs: currentGroup, turnIndex: currentTurn });
-    }
-    return groups;
-  }, [group.logs, turnIndices]);
+  const turnGroups = reactExports.useMemo(() => buildTurnGroups(group.logs), [group.logs]);
   const displayId = group.conversationId.startsWith("PID:") || group.conversationId.includes("|") ? group.conversationId : group.conversationId.length > 24 ? group.conversationId.slice(0, 12) + "…" + group.conversationId.slice(-12) : group.conversationId;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
     !standalone && /* @__PURE__ */ jsxRuntimeExports.jsx(
       ConversationHeader,
       {
@@ -3308,17 +3447,19 @@ const ConversationGroup = reactExports.memo(function({
         onToggle: () => setExpanded(!expanded),
         hideApiFormat: mixed,
         isLoading,
-        userAgent: group.logs[0]?.userAgent ?? null
+        userAgent: group.logs[0]?.userAgent ?? null,
+        onClear: () => onClearGroup(group.logs.map((l) => l.id))
       }
     ),
-    expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: turnGroups.map((tg) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    shouldRenderConversationContent(standalone, expanded) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-[70vh] overflow-y-auto", children: turnGroups.map((tg) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       TurnGroup,
       {
-        logs: tg.logs,
+        entries: tg.entries,
         viewMode,
         strip,
         cacheTrends,
         onCompareWithPrevious,
+        comparisonPredecessors,
         turnIndex: tg.turnIndex
       },
       tg.turnIndex
@@ -3509,6 +3650,32 @@ function OpenCodeIcon() {
     }
   );
 }
+function MiMoCodeIcon() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "svg",
+    {
+      fill: "currentColor",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "size-6 shrink-0",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("title", { children: "MiMo Code" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "text",
+          {
+            x: "12",
+            y: "18",
+            textAnchor: "middle",
+            fontSize: "16",
+            fontWeight: "800",
+            fontFamily: "system-ui, sans-serif",
+            children: "M"
+          }
+        )
+      ]
+    }
+  );
+}
 const ExternalProviderSchema = object({
   name: string(),
   apiKey: string(),
@@ -3516,7 +3683,7 @@ const ExternalProviderSchema = object({
   anthropicBaseUrl: string(),
   openaiBaseUrl: string(),
   models: array(string()),
-  sourceTool: _enum(["claude-code", "opencode"]),
+  sourceTool: _enum(["claude-code", "opencode", "mimo-code"]),
   alreadyExists: boolean()
 });
 const ScanResponseSchema = object({
@@ -3531,7 +3698,8 @@ const ImportResponseSchema$1 = object({
 });
 const sourceLogoMap = {
   "claude-code": ClaudeCodeIcon,
-  opencode: OpenCodeIcon
+  opencode: OpenCodeIcon,
+  "mimo-code": MiMoCodeIcon
 };
 function ImportWizardDialog({
   open,
@@ -3645,7 +3813,7 @@ function ImportWizardDialog({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-xl max-h-[80vh] overflow-hidden flex flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogHeader, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Import from External Tools" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Detect provider configurations from Claude Code and OpenCode." })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Detect provider configurations from Claude Code, OpenCode, and MiMo Code." })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto space-y-3", children: [
       scanning && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center py-8 gap-2 text-muted-foreground", children: [
@@ -3659,7 +3827,7 @@ function ImportWizardDialog({
       !scanning && scanError === null && providers.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-muted-foreground py-8 text-center", children: [
         "No external provider configurations found.",
         /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: "Supported tools: Claude Code (~/.claude/settings.json), OpenCode (~/.config/opencode/opencode.json)" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: "Supported tools: Claude Code (~/.claude/settings.json), OpenCode (~/.config/opencode/opencode.json), MiMo Code (~/.config/mimocode/mimocode.jsonc)" })
       ] }),
       !scanning && providers.map((p, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "label",
@@ -3723,35 +3891,6 @@ function ImportWizardDialog({
     ] })
   ] }) });
 }
-function ConfirmDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  confirmLabel = "Confirm",
-  variant = "default",
-  onConfirm
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: title }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: description }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: () => onOpenChange(false), children: "Cancel" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          variant,
-          size: "sm",
-          onClick: () => {
-            onConfirm();
-            onOpenChange(false);
-          },
-          children: confirmLabel
-        }
-      )
-    ] })
-  ] }) });
-}
 function maskApiKey(apiKey) {
   if (apiKey.length <= 8) return "••••••••";
   return apiKey.slice(0, 4) + "••••••••" + apiKey.slice(-4);
@@ -5776,10 +5915,23 @@ function SideSummary({ log, side }) {
 }
 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);
+    const leftRequest = getLogFormatAdapter(resolveLogFormat(left)).analyzeRequest(
+      left.rawRequestBody
+    );
+    const rightRequest = getLogFormatAdapter(resolveLogFormat(right)).analyzeRequest(
+      right.rawRequestBody
+    );
+    const l = normalizeRequest(leftRequest.comparisonValue);
+    const r = normalizeRequest(rightRequest.comparisonValue);
     return diffTrees(l, r);
-  }, [left.rawRequestBody, right.rawRequestBody]);
+  }, [
+    left.apiFormat,
+    left.path,
+    left.rawRequestBody,
+    right.apiFormat,
+    right.path,
+    right.rawRequestBody
+  ]);
   const grouped = reactExports.useMemo(() => groupContiguousEquals(ops), [ops]);
   const counts = reactExports.useMemo(() => {
     let added = 0;
@@ -6116,13 +6268,28 @@ function ProxyViewer({
   onSessionChange,
   onModelChange,
   onClearAll,
+  onClearGroup,
   viewMode,
   onViewModeChange,
   strip
 }) {
-  const { totalIn, totalOut } = computeTokenSummary(logs);
+  const { totalIn, totalOut } = reactExports.useMemo(() => computeTokenSummary(logs), [logs]);
   const [exporting, setExporting] = reactExports.useState(false);
   const [comparePair, setComparePair] = reactExports.useState(null);
+  const [crabEntrancePhase, setCrabEntrancePhase] = reactExports.useState(
+    "hidden"
+  );
+  reactExports.useEffect(() => {
+    const perCrabDuration = 400;
+    const startDelay = 50;
+    const playingDone = startDelay + crabVariants.length * perCrabDuration;
+    const t1 = setTimeout(() => setCrabEntrancePhase("playing"), startDelay);
+    const t2 = setTimeout(() => setCrabEntrancePhase("done"), playingDone);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+    };
+  }, []);
   const handleExport = reactExports.useCallback(async () => {
     setExporting(true);
     try {
@@ -6131,58 +6298,55 @@ function ProxyViewer({
       setExporting(false);
     }
   }, [logs]);
-  const parentRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
     setComparePair(null);
   }, [selectedSession, selectedModel]);
   const closeCompare = reactExports.useCallback(() => {
     setComparePair(null);
   }, []);
+  const groups = reactExports.useMemo(() => groupLogsByConversation(logs), [logs]);
+  const cacheTrends = reactExports.useMemo(() => computeCacheTrends(groups), [groups]);
+  const comparisonPredecessors = reactExports.useMemo(() => buildValidPredecessors(groups), [groups]);
   const handleCompareWithPrevious = reactExports.useCallback(
     (log) => {
-      const idx = logs.indexOf(log);
-      if (idx <= 0) return;
-      const predecessor = logs[idx - 1];
-      if (predecessor === void 0) return;
-      setComparePair([predecessor, log]);
+      const predecessor = comparisonPredecessors.get(log.id);
+      if (predecessor !== void 0) setComparePair([predecessor, log]);
     },
-    [logs]
+    [comparisonPredecessors]
   );
-  const groups = reactExports.useMemo(() => groupLogsByConversation(logs), [logs]);
-  const cacheTrends = reactExports.useMemo(() => computeCacheTrends(groups), [groups]);
-  const rowVirtualizer = useVirtualizer({
-    count: groups.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 150,
-    measureElement: typeof window !== "undefined" ? (element) => element.getBoundingClientRect().height : void 0,
-    overscan: 5
-  });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-[1200px] mx-auto flex flex-col h-screen", style: { maxHeight: "100vh" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-end px-6 pt-6 pb-3 relative", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-end px-6 pt-6 pb-8 relative", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "text-lg font-bold flex items-end gap-2 absolute left-1/2 -translate-x-1/2 whitespace-nowrap", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-end gap-1 group cursor-default", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-end gap-0.5", children: crabVariants.map((Crab, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Crab,
-            {
-              className: `size-5 ${[
-                "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]} transition-all duration-300 ease-out group-hover:scale-125 group-hover:-translate-y-1`,
-              style: { transitionDelay: `${i * 50}ms` }
-            },
-            i
-          )) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-end gap-0.5", 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 items-baseline gap-2", children: [
           "LLM Inspector",
@@ -6267,59 +6431,26 @@ function ProxyViewer({
       )
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 px-6 pb-6", children: logs.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-muted-foreground py-16 space-y-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-12 text-muted-foreground/20 mx-auto" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: "No requests captured yet." }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs", children: "Route AI coding tools through the proxy:" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableCommand, { command: "LLM_BASE_URL=http://localhost:25947/proxy <your-tool>" })
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: parentRef, className: "overflow-y-auto h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-y-auto h-full flex flex-col gap-2", children: groups.map((group) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConversationGroup,
       {
-        style: {
-          height: `${rowVirtualizer.getTotalSize()}px`,
-          width: "100%",
-          position: "relative"
-        },
-        children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
-          const group = groups[virtualRow.index];
-          if (group === void 0) return null;
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              "data-index": virtualRow.index,
-              ref: rowVirtualizer.measureElement,
-              style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                transform: `translateY(${virtualRow.start}px)`
-              },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                ConversationGroup,
-                {
-                  group,
-                  viewMode,
-                  strip,
-                  cacheTrends,
-                  onCompareWithPrevious: handleCompareWithPrevious,
-                  standalone: groups.length === 1
-                }
-              )
-            },
-            group.id
-          );
-        })
-      }
-    ) }) }),
+        group,
+        viewMode,
+        strip,
+        cacheTrends,
+        onCompareWithPrevious: handleCompareWithPrevious,
+        comparisonPredecessors,
+        onClearGroup,
+        standalone: groups.length === 1
+      },
+      group.id
+    )) }) }),
     comparePair !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(CompareDrawer, { left: comparePair[0], right: comparePair[1], onClose: closeCompare })
   ] });
 }
-object({
-  logs: array(CapturedLogSchema),
-  total: number(),
-  offset: number(),
-  limit: number()
-});
 const SSEUpdateSchema = union([
   object({
     type: literal("init"),
@@ -6344,8 +6475,17 @@ function extractModels(logs) {
   }
   return [...set];
 }
+function filterLogs(logs, selectedSession, selectedModel) {
+  if (selectedSession === "__all__" && selectedModel === "__all__") return logs;
+  return logs.filter((l) => {
+    if (selectedSession !== "__all__" && l.sessionId !== selectedSession) return false;
+    if (selectedModel !== "__all__" && l.model !== selectedModel) return false;
+    return true;
+  });
+}
+const DEBOUNCE_MS = 50;
 function ProxyViewerContainer() {
-  const [logs, setLogs] = reactExports.useState([]);
+  const [allLogs, setAllLogs] = reactExports.useState([]);
   const [sessions, setSessions] = reactExports.useState([]);
   const [models, setModels] = reactExports.useState([]);
   const [selectedSession, setSelectedSession] = reactExports.useState("__all__");
@@ -6354,31 +6494,58 @@ function ProxyViewerContainer() {
   const [error, setError] = reactExports.useState(null);
   const eventSourceRef = reactExports.useRef(null);
   const reconnectTimeoutRef = reactExports.useRef(null);
-  const fetchSessionsAndModels = reactExports.useCallback(async () => {
-    try {
-      const [sessionsRes, modelsRes] = await Promise.all([
-        fetch("/api/sessions"),
-        fetch("/api/models")
-      ]);
-      if (sessionsRes.ok && modelsRes.ok) {
-        const sessionsJson = await sessionsRes.json();
-        const modelsJson = await modelsRes.json();
-        const sessionsResult = array(string()).safeParse(sessionsJson);
-        const modelsResult = array(string()).safeParse(modelsJson);
-        if (sessionsResult.success) setSessions(sessionsResult.data);
-        if (modelsResult.success) setModels(modelsResult.data);
+  const logIndexRef = reactExports.useRef(/* @__PURE__ */ new Map());
+  const logsRef = reactExports.useRef([]);
+  const pendingUpdatesRef = reactExports.useRef([]);
+  const flushTimerRef = reactExports.useRef(null);
+  const logs = reactExports.useMemo(
+    () => filterLogs(allLogs, selectedSession, selectedModel),
+    [allLogs, selectedSession, selectedModel]
+  );
+  const flushUpdates = reactExports.useCallback(() => {
+    flushTimerRef.current = null;
+    const updates = pendingUpdatesRef.current;
+    pendingUpdatesRef.current = [];
+    if (updates.length === 0) return;
+    setAllLogs((prev) => {
+      let next = prev;
+      let sessionsChanged = false;
+      let modelsChanged = false;
+      for (const log of updates) {
+        const idx = logIndexRef.current.get(log.id);
+        if (idx !== void 0) {
+          next = [...next.slice(0, idx), log, ...next.slice(idx + 1)];
+        } else {
+          logIndexRef.current.set(log.id, next.length);
+          next = [...next, log];
+        }
+        if (log.sessionId !== null && log.sessionId !== "" && !sessions.includes(log.sessionId)) {
+          sessionsChanged = true;
+        }
+        if (log.model !== null && log.model !== "" && !models.includes(log.model)) {
+          modelsChanged = true;
+        }
       }
-    } catch {
-    }
-  }, []);
+      logsRef.current = next;
+      if (sessionsChanged) setSessions((s) => extractSessions(next));
+      if (modelsChanged) setModels((m) => extractModels(next));
+      return next;
+    });
+  }, [sessions, models]);
+  const scheduleUpdate = reactExports.useCallback(
+    (log) => {
+      pendingUpdatesRef.current.push(log);
+      if (flushTimerRef.current === null) {
+        flushTimerRef.current = setTimeout(flushUpdates, DEBOUNCE_MS);
+      }
+    },
+    [flushUpdates]
+  );
   const connectSSE = reactExports.useCallback(() => {
     if (eventSourceRef.current) {
       eventSourceRef.current.close();
     }
-    const params = new URLSearchParams();
-    if (selectedSession !== "__all__") params.set("sessionId", selectedSession);
-    if (selectedModel !== "__all__") params.set("model", selectedModel);
-    const es = new EventSource(`/api/logs/stream?${params}`);
+    const es = new EventSource("/api/logs/stream");
     eventSourceRef.current = es;
     es.onmessage = (event) => {
       try {
@@ -6391,35 +6558,24 @@ function ProxyViewerContainer() {
         }
         const update = updateResult.data;
         if (update.type === "init") {
-          setLogs(update.logs);
+          if (flushTimerRef.current !== null) {
+            clearTimeout(flushTimerRef.current);
+            flushTimerRef.current = null;
+          }
+          pendingUpdatesRef.current = [];
+          const idx = /* @__PURE__ */ new Map();
+          for (let i = 0; i < update.logs.length; i++) {
+            const log = update.logs[i];
+            if (log !== void 0) idx.set(log.id, i);
+          }
+          logIndexRef.current = idx;
+          logsRef.current = update.logs;
+          setAllLogs(update.logs);
           setSessions(extractSessions(update.logs));
           setModels(extractModels(update.logs));
           setError(null);
         } else if (update.type === "update") {
-          setLogs((prev) => {
-            const sessionMatch = selectedSession === "__all__" || update.log.sessionId === selectedSession;
-            const modelMatch = selectedModel === "__all__" || update.log.model === selectedModel;
-            if (!sessionMatch || !modelMatch) return prev;
-            const existsIndex = prev.findIndex((l) => l.id === update.log.id);
-            if (existsIndex >= 0) {
-              return prev.map((l) => l.id === update.log.id ? update.log : l);
-            }
-            return [...prev, update.log];
-          });
-          setSessions((prev) => {
-            const sessionId = update.log.sessionId;
-            if (sessionId !== null && sessionId !== void 0 && sessionId !== "") {
-              return prev.includes(sessionId) ? prev : [...prev, sessionId];
-            }
-            return prev;
-          });
-          setModels((prev) => {
-            const model = update.log.model;
-            if (model !== null && model !== void 0 && model !== "") {
-              return prev.includes(model) ? prev : [...prev, model];
-            }
-            return prev;
-          });
+          scheduleUpdate(update.log);
         }
       } catch {
         setError("Failed to parse SSE data");
@@ -6433,8 +6589,7 @@ function ProxyViewerContainer() {
       }
       reconnectTimeoutRef.current = setTimeout(connectSSE, 3e3);
     };
-    void fetchSessionsAndModels();
-  }, [selectedSession, selectedModel, fetchSessionsAndModels]);
+  }, [scheduleUpdate]);
   reactExports.useEffect(() => {
     connectSSE();
     return () => {
@@ -6446,6 +6601,10 @@ function ProxyViewerContainer() {
         clearTimeout(reconnectTimeoutRef.current);
         reconnectTimeoutRef.current = null;
       }
+      if (flushTimerRef.current !== null) {
+        clearTimeout(flushTimerRef.current);
+        flushTimerRef.current = null;
+      }
     };
   }, [connectSSE]);
   const handleClearAll = reactExports.useCallback(() => {
@@ -6456,7 +6615,9 @@ function ProxyViewerContainer() {
           setError("Failed to clear logs");
           return;
         }
-        setLogs([]);
+        logIndexRef.current.clear();
+        logsRef.current = [];
+        setAllLogs([]);
         setSessions([]);
         setModels([]);
         setError(null);
@@ -6465,6 +6626,39 @@ function ProxyViewerContainer() {
       }
     })();
   }, []);
+  const handleClearGroup = reactExports.useCallback((ids) => {
+    if (ids.length === 0) return;
+    void (async () => {
+      try {
+        const res = await fetch("/api/logs", {
+          method: "DELETE",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ ids })
+        });
+        if (!res.ok) {
+          setError("Failed to clear group");
+          return;
+        }
+        const idSet = new Set(ids);
+        setAllLogs((prev) => {
+          const remaining = prev.filter((l) => !idSet.has(l.id));
+          const idx = /* @__PURE__ */ new Map();
+          for (let i = 0; i < remaining.length; i++) {
+            const log = remaining[i];
+            if (log !== void 0) idx.set(log.id, i);
+          }
+          logIndexRef.current = idx;
+          logsRef.current = remaining;
+          setSessions(extractSessions(remaining));
+          setModels(extractModels(remaining));
+          return remaining;
+        });
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error clearing group");
+      }
+    })();
+  }, []);
   const { strip } = useStripConfig();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     error !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed top-4 right-4 bg-destructive text-destructive-foreground px-4 py-2 rounded-md text-sm z-50", children: error }),
@@ -6479,6 +6673,7 @@ function ProxyViewerContainer() {
         onSessionChange: setSelectedSession,
         onModelChange: setSelectedModel,
         onClearAll: handleClearAll,
+        onClearGroup: handleClearGroup,
         viewMode,
         onViewModeChange: setViewMode,
         strip