@tonyclaw/llm-inspector 1.14.7 → 1.14.9

package/.output/server/_ssr/{index-BvHLASu8.mjs → index-_9xcAkkw.mjs}

@@ -1,20 +1,20 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, a as parseRequest, s as stripClaudeCodeBillingHeader, R as RuntimeConfigSchema, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, b as createFailedProviderTestResults, d as ProviderConfigSchema, p as parseOpenAIResponse, I as InspectorResponseSchema } from "./router-lUOA8pi6.mjs";
+import { C as CapturedLogSchema, a as parseRequest, O as OpenAIRequestSchema, p as parseOpenAIResponse, I as InspectorResponseSchema, s as stripClaudeCodeBillingHeader, R as RuntimeConfigSchema, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, b as createFailedProviderTestResults, d as ProviderConfigSchema } from "./router-CmanwZJc.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.mjs";
 import { u as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
-import { J as JSZip } from "../_libs/jszip.mjs";
 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$1, C as Content, a as Close, b as Title, P as Portal$1, O as Overlay } from "../_libs/radix-ui__react-dialog.mjs";
-import { R as Root2, T as Trigger, I as Icon, V as Value, P as Portal, C as Content2, a as Viewport, b as Item, c as ItemIndicator, d as ItemText, S as ScrollUpButton, e as ScrollDownButton } from "../_libs/radix-ui__react-select.mjs";
+import { 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 { R as Root2, T as Trigger$1, I as Icon, V as Value, P as Portal$1, C as Content2$1, 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, L as LayoutGrid, a as List, G as GitCompareArrows, X, S as Settings, C as ChevronDown, b as Check, R as RotateCcw, U as Upload, c as Scan, P as Plus, d as Copy, e as CircleAlert, f as ChevronUp, g as ChevronRight, h as Clock, M as MessageSquare, Z as Zap, i as LoaderCircle, W as Wrench, j as Globe, k as User, F as FileTerminal, l as Radio, m as Rows3, n as Columns2, o as Minus, p as Pencil, E as Equal, q as EyeOff, r as Eye, s as ExternalLink, t as RotateCw, T as Trash2, A as ArrowUp, u as ArrowDown, v as TriangleAlert, w as CircleCheckBig, x as CircleStop, y as CircleQuestionMark, z as Server, B as Gauge, H as Lock, I as Wifi, J as WifiOff, K as ChevronsUp, N as ChevronsDown, O as Brain, Q as Terminal } from "../_libs/lucide-react.mjs";
+import { D as Download, L as LayoutGrid, a as List, G as GitBranch, S as Settings, C as ChevronDown, b as Check, c as GitCompareArrows, R as RotateCcw, X, U as Upload, d as Scan, P as Plus, e as Copy, f as CircleAlert, g as ChevronUp, h as LoaderCircle, i as ChevronRight, j as User, k as Clock, M as MessageSquare, Z as Zap, W as Wrench, l as Globe, F as FileTerminal, m as Radio, n as Rows3, o as Columns2, p as Minus, q as Pencil, E as Equal, r as EyeOff, s as Eye, t as ExternalLink, u as RotateCw, T as Trash2, A as ArrowUp, v as ArrowDown, w as TriangleAlert, x as CircleCheckBig, y as CircleStop, z as CircleQuestionMark, B as Server, H as Gauge, I as Lock, J as Wifi, K as WifiOff, N as ChevronsUp, O as ChevronsDown, Q as Brain, V 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 { R as Root2$1, L as List$1, T as Trigger$2, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
-import { P as Provider, R as Root3, T as Trigger$3, a as Portal$2, C as Content2$1, A as Arrow2 } from "../_libs/radix-ui__react-tooltip.mjs";
+import { P as Provider, R as Root3, T as Trigger, a as Portal, C as Content2, A as Arrow2 } from "../_libs/radix-ui__react-tooltip.mjs";
+import { R as Root2$1, L as List$1, 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";
 import { R as Root$1 } from "../_libs/radix-ui__react-separator.mjs";
 import { R as Root$2, C as CollapsibleTrigger$1, a as CollapsibleContent$1 } from "../_libs/radix-ui__react-collapsible.mjs";
@@ -237,6 +237,63 @@ function useStripConfig() {
     setStrip
   };
 }
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function formatTokens(count) {
+  if (count >= 1048576) return (count / 1048576).toFixed(1).replace(/\.0$/, "") + "M";
+  if (count >= 1024) return (count / 1024).toFixed(1).replace(/\.0$/, "") + "K";
+  return count.toString();
+}
+function getStatusCategory(status) {
+  if (status === null) return "pending";
+  if (status >= 200 && status < 300) return "success";
+  if (status >= 400 && status < 500) return "client_error";
+  if (status >= 500) return "server_error";
+  return "pending";
+}
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root3, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Content2,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Arrow2, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
 async function fetchStreamingChunks(logId) {
   try {
     const response = await fetch(`/api/logs/${logId}/chunks`);
@@ -276,24 +333,34 @@ async function exportLogsAsZip(logs) {
   document.body.removeChild(anchor);
   URL.revokeObjectURL(url);
 }
-const version = "1.14.7";
+const version = "1.14.9";
 const packageJson = {
   version
 };
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-function formatTokens(count) {
-  if (count >= 1048576) return (count / 1048576).toFixed(1).replace(/\.0$/, "") + "M";
-  if (count >= 1024) return (count / 1024).toFixed(1).replace(/\.0$/, "") + "K";
-  return count.toString();
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-function getStatusCategory(status) {
-  if (status === null) return "pending";
-  if (status >= 200 && status < 300) return "success";
-  if (status >= 400 && status < 500) return "client_error";
-  if (status >= 500) return "server_error";
-  return "pending";
+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 (log.apiFormat === "anthropic" && typeof json.stop_reason === "string") {
+      if (json.stop_reason === "end_turn" || json.stop_reason === "tool_use") {
+        return json.stop_reason;
+      }
+      return null;
+    }
+    if (log.apiFormat === "openai" && 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;
+  }
 }
 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",
@@ -349,7 +416,11 @@ function ConversationHeader({
   apiFormat,
   expanded,
   onToggle,
-  hideApiFormat = false
+  hideApiFormat = false,
+  isLoading = false,
+  viewMode,
+  onToggleViewMode,
+  userAgent
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
@@ -370,7 +441,23 @@ function ConversationHeader({
         }
       },
       children: [
-        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" }),
+        expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 text-muted-foreground shrink-0" }) : isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 animate-spin text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" }),
+        expanded && onToggleViewMode !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onToggleViewMode();
+            },
+            className: cn(
+              "px-1.5 py-0.5 rounded text-[10px] font-mono transition-colors shrink-0 cursor-pointer",
+              viewMode === "thread" ? "bg-amber-500/15 text-amber-400 border border-amber-500/30" : "bg-muted text-muted-foreground border border-border hover:text-foreground"
+            ),
+            title: viewMode === "thread" ? "Thread view — click for flat view" : "Flat view — click for thread view",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(GitBranch, { className: "size-3" })
+          }
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "span",
           {
@@ -379,6 +466,17 @@ function ConversationHeader({
             children: conversationId.length > 24 ? conversationId.slice(0, 12) + "…" + conversationId.slice(-12) : conversationId
           }
         ),
+        userAgent !== null && userAgent !== void 0 && userAgent !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "span",
+          {
+            className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0",
+            title: userAgent,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(User, { className: "size-3" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[120px]", children: userAgent })
+            ]
+          }
+        ),
         !hideApiFormat && /* @__PURE__ */ jsxRuntimeExports.jsx(
           Badge,
           {
@@ -509,48 +607,6 @@ function Button({
     }
   );
 }
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
-}
-function Tooltip({ ...props }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root3, { "data-slot": "tooltip", ...props });
-}
-function TooltipTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$3, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Content2$1,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Arrow2, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
-      ]
-    }
-  ) });
-}
 function classifyValue(value) {
   if (value === null) return "null";
   if (Array.isArray(value)) return "array";
@@ -953,7 +1009,7 @@ function TabsTrigger({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Trigger$2,
+    Trigger$3,
     {
       "data-slot": "tabs-trigger",
       className: cn(
@@ -1411,18 +1467,15 @@ function CacheTrendIndicator({ trend }) {
 }
 const LogEntryHeader = reactExports.memo(function({
   log,
-  parsedRequest,
+  messageCount = null,
+  toolCount = null,
   expanded,
   onToggle,
-  suppressApiFormatBadge = false,
-  cacheTrend = null,
-  isSelected = false,
-  onToggleSelect
+  responseToolNames = null,
+  cacheTrend = null
 }) {
   const statusCategory = getStatusCategory(log.responseStatus);
   const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
-  const messageCount = parsedRequest !== null ? parsedRequest.messages.length : null;
-  const toolCount = parsedRequest !== null && parsedRequest.tools !== void 0 && parsedRequest.tools.length > 0 ? parsedRequest.tools.length : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -1441,45 +1494,22 @@ const LogEntryHeader = reactExports.memo(function({
         }
       },
       children: [
-        onToggleSelect !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onToggleSelect(log.id);
-            },
-            "aria-label": isSelected ? "Deselect for comparison" : "Select for comparison",
-            "aria-pressed": isSelected,
-            className: cn(
-              "shrink-0 size-4 rounded-sm border flex items-center justify-center transition-colors cursor-pointer",
-              isSelected ? "bg-amber-400 border-amber-400 text-amber-950" : "border-muted-foreground/40 hover:border-amber-400 hover:bg-amber-400/10"
-            ),
-            children: isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3", strokeWidth: 3 })
-          }
-        ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-400/80 font-mono text-xs font-semibold tabular-nums shrink-0", children: [
           "#",
           log.id
         ] }),
-        log.model !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogo, { provider: detectProvider(log.model), className: "size-4 shrink-0" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "secondary", className: "text-[10px] px-1.5 py-0 h-5 font-mono", children: log.model })
-        ] }),
-        !suppressApiFormatBadge && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        log.model !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__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: "outline",
-            className: cn(
-              "text-[10px] px-1.5 py-0 h-5 font-mono shrink-0",
-              log.apiFormat === "openai" && "border-blue-500/40 text-blue-400",
-              log.apiFormat === "anthropic" && "border-orange-500/40 text-orange-400",
-              log.apiFormat === "unknown" && "border-muted text-muted-foreground"
-            ),
-            children: log.apiFormat === "anthropic" ? "Anthropic" : log.apiFormat === "openai" ? "OpenAI" : "Unknown"
+            variant: "destructive",
+            className: "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums",
+            children: log.responseStatus
           }
-        ),
-        statusCategory === "server_error" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "destructive", className: "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums", children: log.responseStatus }) : statusCategory === "pending" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ) : statusCategory === "pending" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           Badge,
           {
             variant: "outline",
@@ -1499,7 +1529,7 @@ const LogEntryHeader = reactExports.memo(function({
             ),
             children: log.responseStatus
           }
-        ),
+        ) }),
         log.elapsedMs !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed(log.elapsedMs) })
@@ -1524,28 +1554,50 @@ const LogEntryHeader = reactExports.memo(function({
             )
           ] })
         ] }),
-        log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs shrink-0", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.creation ?? null }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-emerald-400", children: [
-            "Cache +",
-            formatTokens(log.cacheCreationInputTokens)
-          ] })
-        ] }),
-        log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs shrink-0", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.read ?? null }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-purple-400", children: [
-            "Cache ~",
-            formatTokens(log.cacheReadInputTokens)
+        log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__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: [
+              "Cache +",
+              formatTokens(log.cacheCreationInputTokens)
+            ] })
+          ] }) }),
+          /* @__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: [
+          /* @__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: [
+              "Cache ~",
+              formatTokens(log.cacheReadInputTokens)
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Tokens served from cache, reducing API cost" })
+        ] }) }),
+        messageCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__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: [
+          /* @__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: [
+          /* @__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.jsxs(TooltipContent, { children: [
+            "Tools called by model: ",
+            responseToolNames.join(", ")
           ] })
-        ] }),
-        messageCount !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: messageCount })
-        ] }),
-        toolCount !== null && /* @__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 })
-        ] }),
+        ] }) }),
         log.origin !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "span",
           {
@@ -1557,32 +1609,20 @@ const LogEntryHeader = reactExports.memo(function({
             ]
           }
         ),
-        log.userAgent !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "span",
-          {
-            className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0",
-            title: `User-Agent: ${log.userAgent}`,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(User, { className: "size-3" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[150px]", title: log.userAgent, children: log.userAgent })
-            ]
-          }
-        ),
-        (log.clientPid !== null || log.clientProjectFolder !== null) && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "span",
-          {
-            className: "flex items-center gap-1 text-purple-400/80 text-xs shrink-0",
-            title: log.clientCwd !== null ? `PID: ${log.clientPid ?? "?"} | CWD: ${log.clientCwd}` : `PID: ${log.clientPid ?? "?"}`,
-            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: [
-                "PID ",
-                log.clientPid
-              ] })
-            ]
-          }
-        ),
-        log.streaming && /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { className: "size-3 text-muted-foreground/60 shrink-0" }),
+        (log.clientPid !== null || log.clientProjectFolder !== null) && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "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: [
+              "PID ",
+              log.clientPid
+            ] })
+          ] }) }),
+          /* @__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: [
+          /* @__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" })
       ]
@@ -1597,12 +1637,12 @@ function Dialog({
 function DialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$1, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$2, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$1, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$2, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
@@ -2167,15 +2207,18 @@ function ReplayDialog({ log, open, onOpenChange }) {
       /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsContent, { value: "modified", className: "space-y-4", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium mb-2 block", children: "Request Body (JSON)" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "textarea",
-            {
-              className: "w-full h-64 p-3 font-mono text-xs bg-muted rounded-md border border-input resize-none focus:outline-none focus:ring-2 focus:ring-ring",
-              value: modifiedBody,
-              onChange: (e) => setModifiedBody(e.target.value),
-              spellCheck: false
-            }
-          )
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "textarea",
+              {
+                className: "w-full h-64 p-3 font-mono text-xs bg-muted rounded-md border border-input resize-none focus:outline-none focus:ring-2 focus:ring-ring",
+                value: modifiedBody,
+                onChange: (e) => setModifiedBody(e.target.value),
+                spellCheck: false
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Edit the request body before re-sending to the provider" })
+          ] }) })
         ] }),
         error !== null && error !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md", children: error }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2359,22 +2402,25 @@ function StreamingChunkSequence({
     ] });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        className: "flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
-        onClick: () => setContainerExpanded((v) => !v),
-        children: [
-          containerExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Raw SSE Events" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "outline", className: "text-[9px] px-1 py-0 h-4 font-mono ml-1", children: [
-            logId,
-            truncated === true ? "+" : ""
-          ] })
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+          onClick: () => setContainerExpanded((v) => !v),
+          children: [
+            containerExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Raw SSE Events" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "outline", className: "text-[9px] px-1 py-0 h-4 font-mono ml-1", children: [
+              logId,
+              truncated === true ? "+" : ""
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Server-Sent Events streaming chunks from the provider" })
+    ] }) }),
     containerExpanded === true ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-border bg-muted/20 overflow-auto max-h-64", children: renderBody() }) : null
   ] });
 }
@@ -2414,32 +2460,32 @@ function DiffToggleButton({
   active,
   onClick
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "button",
-    {
-      type: "button",
-      onClick,
-      "aria-pressed": active,
-      className: cn(
-        "flex items-center gap-1.5 text-xs px-2 py-1 rounded transition-colors",
-        active ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-muted"
-      ),
-      title: active ? "Hide diff with raw" : "Diff this view against the raw version",
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(GitCompareArrows, { className: "size-3" }),
-        active ? "Showing diff" : "Diff with Raw"
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "aria-pressed": active,
+        className: cn(
+          "flex items-center gap-1.5 text-xs px-2 py-1 rounded transition-colors",
+          active ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(GitCompareArrows, { className: "size-3" }),
+          active ? "Showing diff" : "Diff with Raw"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: active ? "Hide diff view" : "Compare proxy output against the original raw version" })
+  ] }) });
 }
 const LogEntry = reactExports.memo(function({
   log,
   viewMode = "simple",
-  suppressApiFormatBadge = false,
   strip,
   cacheTrend = null,
-  isSelected = false,
-  onToggleSelect
+  onCompareWithPrevious
 }) {
   const [expanded, setExpanded] = reactExports.useState(false);
   const [requestCopied, setRequestCopied] = reactExports.useState(false);
@@ -2448,7 +2494,60 @@ const LogEntry = reactExports.memo(function({
   const [replayOpen, setReplayOpen] = reactExports.useState(false);
   const [headersDiff, setHeadersDiff] = reactExports.useState(false);
   const [requestDiff, setRequestDiff] = reactExports.useState(false);
-  const parsedRequest = reactExports.useMemo(() => parseRequest(log.rawRequestBody), [log.rawRequestBody]);
+  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 strippedRequestBody = reactExports.useMemo(() => {
     if (!strip || log.apiFormat !== "anthropic" || log.rawRequestBody === null) {
       return null;
@@ -2489,178 +2588,258 @@ const LogEntry = reactExports.memo(function({
     });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: cn(
-          "border border-border rounded-lg mb-3 overflow-hidden",
-          isSelected && "border-l-2 border-l-amber-400"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            LogEntryHeader,
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border rounded-lg mb-3 overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        LogEntryHeader,
+        {
+          log,
+          messageCount,
+          toolCount,
+          expanded,
+          onToggle: () => setExpanded(!expanded),
+          responseToolNames,
+          cacheTrend
+        }
+      ),
+      expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "request", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "mx-4 mt-2", children: [
+          viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__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: [
+            /* @__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: [
+            /* @__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: [
+            /* @__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: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CopyButton,
             {
-              log,
-              parsedRequest,
-              expanded,
-              onToggle: () => setExpanded(!expanded),
-              suppressApiFormatBadge,
-              cacheTrend,
-              isSelected,
-              onToggleSelect
+              text: log.rawRequestBody,
+              label: "Copy Raw Request",
+              copied: rawRequestCopied,
+              onCopy: handleCopyRawRequest
             }
-          ),
-          expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "request", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "mx-4 mt-2", children: [
-              viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw-headers", children: "Raw Headers" }),
-              viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "headers", children: "Headers" }),
-              shouldShowRawRequestTab(log.apiFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw-request", children: "Raw Request" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "request", children: "Request" }),
-              viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" })
-            ] }),
-            shouldShowRawRequestTab(log.apiFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                CopyButton,
-                {
-                  text: log.rawRequestBody,
-                  label: "Copy Raw Request",
-                  copied: rawRequestCopied,
-                  onCopy: handleCopyRawRequest
-                }
-              ) }),
-              log.rawRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: log.rawRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
-                shouldShowRequestDiffButton(
-                  log.apiFormat,
-                  viewMode,
-                  strip,
-                  log.rawRequestBody !== null
-                ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  DiffToggleButton,
-                  {
-                    active: requestDiff,
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      setRequestDiff(!requestDiff);
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  Button,
-                  {
-                    variant: "outline",
-                    size: "sm",
-                    className: "h-7 text-xs",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      setReplayOpen(true);
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-3 mr-1" }),
-                      "Replay"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  CopyButton,
-                  {
-                    text: displayedRequestBody,
-                    label: "Copy Request",
-                    copied: requestCopied,
-                    onCopy: handleCopyRequest
-                  }
-                )
-              ] }),
-              requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                DiffView,
-                {
-                  result: requestDiffResult,
-                  emptyLabel: "No transformation applied — raw and sent request bodies are identical."
+          ) }),
+          log.rawRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: log.rawRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
+            shouldShowRequestDiffButton(
+              log.apiFormat,
+              viewMode,
+              strip,
+              log.rawRequestBody !== null
+            ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              DiffToggleButton,
+              {
+                active: requestDiff,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setRequestDiff(!requestDiff);
                 }
-              ) : displayedRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: displayedRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
-            ] }) }),
-            viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end gap-2 mb-2", children: shouldShowHeadersDiffButton(
-                viewMode,
-                log.rawHeaders !== void 0 && Object.keys(log.rawHeaders).length > 0
-              ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                DiffToggleButton,
+              }
+            ),
+            onCompareWithPrevious !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                Button,
                 {
-                  active: headersDiff,
+                  variant: "outline",
+                  size: "sm",
+                  className: "h-7 text-xs",
                   onClick: (e) => {
                     e.stopPropagation();
-                    setHeadersDiff(!headersDiff);
-                  }
+                    onCompareWithPrevious();
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(GitCompareArrows, { className: "size-3 mr-1" }),
+                    "Diff with Previous"
+                  ]
                 }
               ) }),
-              headersDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                DiffView,
-                {
-                  result: headersDiffResult,
-                  emptyLabel: "No transformation applied — raw and processed headers are identical."
-                }
-              ) : log.headers && Object.keys(log.headers).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.headers).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
-                  key,
-                  ":"
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
-              ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No headers captured" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Compare this request with the immediately preceding one" })
             ] }) }),
-            viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.rawHeaders).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
-                key,
-                ":"
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
-            ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No raw headers captured" }) }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3 space-y-3", children: [
-              log.error !== void 0 && log.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: log.error })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                CopyButton,
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                Button,
                 {
-                  text: log.responseText,
-                  label: "Copy Response",
-                  copied: responseCopied,
-                  onCopy: handleCopyResponse
+                  variant: "outline",
+                  size: "sm",
+                  className: "h-7 text-xs",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setReplayOpen(true);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-3 mr-1" }),
+                    "Replay"
+                  ]
                 }
               ) }),
-              log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: log.responseText, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
-              log.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                StreamingChunkSequence,
-                {
-                  logId: log.id,
-                  truncated: log.streamingChunksPath !== null
-                }
-              )
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Re-send this request to the provider" })
             ] }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              ResponseView,
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              CopyButton,
               {
-                responseText: log.responseText,
-                responseStatus: log.responseStatus,
-                streaming: log.streaming,
-                inputTokens: log.inputTokens,
-                outputTokens: log.outputTokens,
-                cacheCreationInputTokens: log.cacheCreationInputTokens,
-                cacheReadInputTokens: log.cacheReadInputTokens,
-                apiFormat: log.apiFormat,
-                error: log.error
+                text: displayedRequestBody,
+                label: "Copy Request",
+                copied: requestCopied,
+                onCopy: handleCopyRequest
               }
-            ) }) })
-          ] }) })
-        ]
-      }
-    ),
+            )
+          ] }),
+          requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DiffView,
+            {
+              result: requestDiffResult,
+              emptyLabel: "No transformation applied — raw and sent request bodies are identical."
+            }
+          ) : displayedRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: displayedRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
+        ] }) }),
+        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end gap-2 mb-2", children: shouldShowHeadersDiffButton(
+            viewMode,
+            log.rawHeaders !== void 0 && Object.keys(log.rawHeaders).length > 0
+          ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DiffToggleButton,
+            {
+              active: headersDiff,
+              onClick: (e) => {
+                e.stopPropagation();
+                setHeadersDiff(!headersDiff);
+              }
+            }
+          ) }),
+          headersDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DiffView,
+            {
+              result: headersDiffResult,
+              emptyLabel: "No transformation applied — raw and processed headers are identical."
+            }
+          ) : log.headers && Object.keys(log.headers).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.headers).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
+              key,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
+          ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No headers captured" })
+        ] }) }),
+        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.rawHeaders).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
+            key,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
+        ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No raw headers captured" }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3 space-y-3", children: [
+          log.error !== void 0 && log.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: log.error })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CopyButton,
+            {
+              text: log.responseText,
+              label: "Copy Response",
+              copied: responseCopied,
+              onCopy: handleCopyResponse
+            }
+          ) }),
+          log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: log.responseText, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
+          log.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            StreamingChunkSequence,
+            {
+              logId: log.id,
+              truncated: log.streamingChunksPath !== null
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ResponseView,
+          {
+            responseText: log.responseText,
+            responseStatus: log.responseStatus,
+            streaming: log.streaming,
+            inputTokens: log.inputTokens,
+            outputTokens: log.outputTokens,
+            cacheCreationInputTokens: log.cacheCreationInputTokens,
+            cacheReadInputTokens: log.cacheReadInputTokens,
+            apiFormat: log.apiFormat,
+            error: log.error
+          }
+        ) }) })
+      ] }) })
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ReplayDialog, { log, open: replayOpen, onOpenChange: setReplayOpen })
   ] });
 });
+function ThreadConnector({
+  stopReason,
+  isPending,
+  isFirst,
+  isLast: _isLast,
+  isTurnStart
+}) {
+  const isBoundary = stopReason === "end_turn" || stopReason === "stop";
+  const isToolUse = stopReason === "tool_use";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center w-6 shrink-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center h-4", children: !isFirst && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-0.5 bg-muted-foreground/30" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center py-0.5", children: isBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: cn(
+          "size-2.5 rounded-full border-2",
+          "bg-background border-amber-400",
+          "shadow-[0_0_6px_rgba(251,191,36,0.4)]"
+        ),
+        title: stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)"
+      }
+    ) : isToolUse ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: cn(
+          "size-2 rounded-full",
+          isTurnStart ? "bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.5)]" : "bg-muted-foreground/25"
+        ),
+        title: isTurnStart ? "Tool Use — start of turn" : "Tool Use — turn continues"
+      }
+    ) : isPending ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "size-2.5 rounded-full border-2 border-dashed border-muted-foreground/30 animate-pulse",
+        title: "Response pending"
+      }
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: cn(
+          "size-1.5 rounded-full",
+          isTurnStart ? "bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.5)]" : "bg-muted-foreground/30"
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex justify-center min-h-1", children: isBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-0.5 bg-muted-foreground/10 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: cn(
+          "w-0.5 h-full",
+          isPending ? "border-dashed bg-transparent border-l-2 border-muted-foreground/20" : "bg-muted-foreground/30"
+        )
+      }
+    ) })
+  ] });
+}
 function computeStats(logs) {
   let totalInput = 0;
   let totalOutput = 0;
@@ -2675,14 +2854,31 @@ const ConversationGroup = reactExports.memo(function({
   viewMode = "simple",
   strip,
   cacheTrends,
-  selectedSet,
-  onToggleSelect
+  onCompareWithPrevious,
+  defaultGroupViewMode = "thread"
 }) {
   const [expanded, setExpanded] = reactExports.useState(false);
+  const [groupViewMode, setGroupViewMode] = reactExports.useState(defaultGroupViewMode);
+  reactExports.useEffect(() => {
+    setGroupViewMode(defaultGroupViewMode);
+  }, [defaultGroupViewMode]);
   const stats = computeStats(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 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: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2697,22 +2893,58 @@ const ConversationGroup = reactExports.memo(function({
         apiFormat: getGroupApiFormat(group.logs),
         expanded,
         onToggle: () => setExpanded(!expanded),
-        hideApiFormat: mixed
+        hideApiFormat: mixed,
+        isLoading,
+        userAgent: group.logs[0]?.userAgent ?? null,
+        viewMode: groupViewMode,
+        onToggleViewMode: () => setGroupViewMode((prev) => prev === "thread" ? "flat" : "thread")
       }
     ),
-    expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-4 border-l-2 border-muted ml-3", children: group.logs.map((log) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    expanded && groupViewMode === "flat" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-4 border-l-2 border-muted ml-3", children: group.logs.map((log) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       LogEntry,
       {
         log,
         viewMode,
-        suppressApiFormatBadge: !mixed,
         strip,
         cacheTrend: cacheTrends?.get(log.id) ?? null,
-        isSelected: selectedSet.has(log.id),
-        onToggleSelect
+        onCompareWithPrevious: () => onCompareWithPrevious(log)
       },
       log.id
-    )) })
+    )) }),
+    expanded && groupViewMode === "thread" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-3", children: group.logs.map((log, idx) => {
+      const isTurnStart = idx === 0 || stopReasons[idx - 1] === "end_turn" || stopReasons[idx - 1] === "stop";
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ThreadConnector,
+          {
+            stopReason: stopReasons[idx] ?? null,
+            isPending: log.responseStatus === null,
+            isFirst: idx === 0,
+            isLast: idx === group.logs.length - 1,
+            isTurnStart
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: cn(
+              "flex-1 min-w-0 mb-2 rounded-lg",
+              (turnIndices[idx] ?? 0) % 2 === 0 ? "bg-muted/10" : "bg-muted/25"
+            ),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              LogEntry,
+              {
+                log,
+                viewMode,
+                strip,
+                cacheTrend: cacheTrends?.get(log.id) ?? null,
+                onCompareWithPrevious: () => onCompareWithPrevious(log)
+              }
+            )
+          }
+        )
+      ] }, log.id);
+    }) })
   ] });
 });
 function CrabLogo({ className }) {
@@ -2760,7 +2992,7 @@ function SelectTrigger({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Trigger,
+    Trigger$1,
     {
       "data-slot": "select-trigger",
       "data-size": size,
@@ -2783,8 +3015,8 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Content2,
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Content2$1,
     {
       "data-slot": "select-content",
       className: cn(
@@ -3208,20 +3440,26 @@ function TestStatus({ result }) {
     }
     if (result.cacheCreationInputTokens !== void 0 && result.cacheCreationInputTokens > 0) {
       tokenParts.push(
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-emerald-400", children: [
-          "+",
-          result.cacheCreationInputTokens,
-          " cache"
-        ] }, "cache-create")
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-emerald-400", children: [
+            "+",
+            result.cacheCreationInputTokens,
+            " cache"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Tokens cached for reuse, reducing future API cost" })
+        ] }) }, "cache-create")
       );
     }
     if (result.cacheReadInputTokens !== void 0 && result.cacheReadInputTokens > 0) {
       tokenParts.push(
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-purple-400", children: [
-          "~",
-          result.cacheReadInputTokens,
-          " cached"
-        ] }, "cache-read")
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-purple-400", children: [
+            "~",
+            result.cacheReadInputTokens,
+            " cached"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Tokens served from cache, reducing API cost" })
+        ] }) }, "cache-read")
       );
     }
     const displayTokens = [];
@@ -3229,15 +3467,18 @@ function TestStatus({ result }) {
       if (i > 0) displayTokens.push(", ");
       displayTokens.push(tokenParts[i]);
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-xs text-green-600 shrink-0", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { className: "size-3" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Connected" }),
-      tokenParts.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground", children: [
-        "(",
-        displayTokens,
-        ")"
-      ] })
-    ] });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-xs text-green-600 shrink-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { className: "size-3" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Connected" }),
+        tokenParts.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground", children: [
+          "(",
+          displayTokens,
+          ")"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Connection test passed" })
+    ] }) });
   }
   const error = result.error;
   const errorMessage = error?.message ?? "Connection failed";
@@ -3247,17 +3488,22 @@ function TestStatus({ result }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1 shrink-0", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-xs text-red-600 max-w-[200px]", children: [
       getErrorIcon(errorType),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: errorMessage }),
-      errorDetails !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => setShowDetails(!showDetails),
-          className: "shrink-0 text-muted-foreground hover:text-foreground transition-colors",
-          title: showDetails ? "Hide details" : "Show details",
-          children: showDetails ? /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "size-3" })
-        }
-      )
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: errorMessage }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Connection test failed" })
+      ] }) }),
+      errorDetails !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowDetails(!showDetails),
+            className: "shrink-0 text-muted-foreground hover:text-foreground transition-colors",
+            children: showDetails ? /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "size-3" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: showDetails ? "Hide error details" : "Show detailed error information" })
+      ] }) })
     ] }),
     showDetails && errorDetails !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-muted-foreground bg-muted/50 rounded p-2 max-w-[300px]", children: [
       errorHint !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-1", children: errorHint }),
@@ -3328,8 +3574,14 @@ function ProviderCard({
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium truncate", children: provider.name }),
-            provider.source === "company" && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 shrink-0", children: "公司" }),
-            provider.source === "personal" && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 shrink-0", children: "个人" })
+            provider.source === "company" && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 shrink-0", children: "公司" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Company-provided API key" })
+            ] }) }),
+            provider.source === "personal" && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 shrink-0", children: "个人" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Your personal API key" })
+            ] }) })
           ] }),
           docsUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "a",
@@ -3808,24 +4060,30 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1 border-b border-border", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setActiveTab("anthropic"),
-            className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === "anthropic" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
-            children: "Anthropic Format"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setActiveTab("openai"),
-            className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === "openai" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
-            children: "OpenAI Format"
-          }
-        )
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setActiveTab("anthropic"),
+              className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === "anthropic" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+              children: "Anthropic Format"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Anthropic Messages API protocol" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setActiveTab("openai"),
+              className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === "openai" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+              children: "OpenAI Format"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "OpenAI Chat Completions API protocol" })
+        ] }) })
       ] }),
       errors.format !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.format })
     ] }),
@@ -4222,32 +4480,38 @@ function ProvidersPanel({
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between sticky top-0 z-10 bg-background pb-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium", children: "Providers" }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: () => handleExport(),
-            className: "gap-1 hover:bg-muted",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3" }),
-              "Export"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: handleImportClick,
-            className: "gap-1 hover:bg-muted",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "size-3" }),
-              "Import"
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => handleExport(),
+              className: "gap-1 hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3" }),
+                "Export"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Download providers as JSON for backup or sharing" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: handleImportClick,
+              className: "gap-1 hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "size-3" }),
+                "Import"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Import providers from an exported JSON file" })
+        ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
           {
@@ -4283,21 +4547,23 @@ function ProvidersPanel({
     configPath !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground bg-muted/30 rounded-md px-3 py-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0", children: "Config:" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono truncate", title: configPath, children: configPath }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            void window.navigator.clipboard.writeText(configPath).then(() => {
-              setConfigPathCopied(true);
-              setTimeout(() => setConfigPathCopied(false), 2e3);
-            });
-          },
-          className: "shrink-0 ml-auto text-muted-foreground hover:text-foreground transition-colors",
-          title: "Copy path",
-          children: configPathCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3 text-green-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3" })
-        }
-      )
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              void window.navigator.clipboard.writeText(configPath).then(() => {
+                setConfigPathCopied(true);
+                setTimeout(() => setConfigPathCopied(false), 2e3);
+              });
+            },
+            className: "shrink-0 ml-auto text-muted-foreground hover:text-foreground transition-colors",
+            children: configPathCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3 text-green-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Copy config file path to clipboard" })
+      ] }) })
     ] }),
     error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "size-4 shrink-0" }),
@@ -4310,16 +4576,18 @@ function ProvidersPanel({
         "Add Your First Provider"
       ] })
     ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-1 border-b border-border", children: ["all", "personal", "company"].map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => setSourceFilter(tab),
-          className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors ${sourceFilter === tab ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
-          children: tab === "all" ? "All" : tab === "personal" ? "Personal" : "Company"
-        },
-        tab
-      )) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-1 border-b border-border", children: ["all", "personal", "company"].map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSourceFilter(tab),
+            className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors ${sourceFilter === tab ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+            children: tab === "all" ? "All" : tab === "personal" ? "Personal" : "Company"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: tab === "all" ? "Show all providers" : tab === "personal" ? "Providers you configured yourself" : "Providers set by your organization" })
+      ] }) }, tab)) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: listScrollRef, className: "space-y-3", children: filteredProviders.map((provider) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         ProviderCard,
         {
@@ -4490,22 +4758,25 @@ function ProxySettingsTab() {
         " and overrides the env var for subsequent requests."
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          type: "checkbox",
-          role: "switch",
-          checked: strip,
-          disabled: isLoading || pending,
-          onChange: (e) => {
-            void handleToggle(e.currentTarget.checked);
-          },
-          className: "size-4 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: isLoading ? "Loading…" : strip ? "Stripping enabled" : "Stripping disabled" })
-    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "checkbox",
+            role: "switch",
+            checked: strip,
+            disabled: isLoading || pending,
+            onChange: (e) => {
+              void handleToggle(e.currentTarget.checked);
+            },
+            className: "size-4 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: isLoading ? "Loading…" : strip ? "Stripping enabled" : "Stripping disabled" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Strip Claude Code billing header to improve cache hit rates" })
+    ] }) }),
     error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-destructive", children: [
       "Failed to save: ",
       error
@@ -5473,9 +5744,8 @@ function ProxyViewer({
 }) {
   const { totalIn, totalOut } = computeTokenSummary(logs);
   const [groupedView, setGroupedView] = reactExports.useState(true);
+  const [groupViewMode, setGroupViewMode] = reactExports.useState("thread");
   const [exporting, setExporting] = reactExports.useState(false);
-  const [selectedLogIds, setSelectedLogIds] = reactExports.useState([]);
-  const [compareOpen, setCompareOpen] = reactExports.useState(false);
   const [comparePair, setComparePair] = reactExports.useState(null);
   const handleExport = reactExports.useCallback(async () => {
     setExporting(true);
@@ -5486,76 +5756,37 @@ function ProxyViewer({
     }
   }, [logs]);
   const parentRef = reactExports.useRef(null);
-  const handleToggleSelect = reactExports.useCallback((logId) => {
-    setSelectedLogIds((prev) => {
-      if (prev.includes(logId)) {
-        return prev.filter((id) => id !== logId);
-      }
-      if (prev.length < 2) {
-        return [...prev, logId];
-      }
-      const newer = prev[1];
-      if (newer === void 0) return prev;
-      return [newer, logId];
-    });
-  }, []);
   reactExports.useEffect(() => {
-    setSelectedLogIds([]);
-    setCompareOpen(false);
+    setComparePair(null);
   }, [selectedSession, selectedModel]);
-  const selectedSet = reactExports.useMemo(() => new Set(selectedLogIds), [selectedLogIds]);
-  const openCompare = reactExports.useCallback(() => {
-    if (selectedLogIds.length !== 2) return;
-    const [idA, idB] = selectedLogIds;
-    if (idA === void 0 || idB === void 0) return;
-    const logA = logs.find((l) => l.id === idA);
-    const logB = logs.find((l) => l.id === idB);
-    if (logA === void 0 || logB === void 0) return;
-    setComparePair([logA, logB]);
-    setCompareOpen(true);
-  }, [selectedLogIds, logs]);
   const closeCompare = reactExports.useCallback(() => {
-    setCompareOpen(false);
-  }, []);
-  const clearSelection = reactExports.useCallback(() => {
-    setSelectedLogIds([]);
+    setComparePair(null);
   }, []);
-  const selectedSummary = reactExports.useMemo(() => {
-    if (selectedLogIds.length !== 2) return null;
-    const [idA, idB] = selectedLogIds;
-    if (idA === void 0 || idB === void 0) return null;
-    const logA = logs.find((l) => l.id === idA);
-    const logB = logs.find((l) => l.id === idB);
-    if (logA === void 0 || logB === void 0) return null;
-    const sameSession = getConversationId(logA) === getConversationId(logB);
-    let elapsed = "";
-    if (logA.timestamp !== null && logB.timestamp !== null) {
-      const a = Date.parse(logA.timestamp);
-      const b = Date.parse(logB.timestamp);
-      if (!Number.isNaN(a) && !Number.isNaN(b)) {
-        const ms = Math.abs(b - a);
-        elapsed = formatElapsed2(ms);
-      }
-    }
-    return {
-      logA,
-      logB,
-      sameSession,
-      elapsed
-    };
-  }, [selectedLogIds, logs]);
-  function formatElapsed2(ms) {
-    if (ms < 1e3) return `${ms}ms`;
-    const sec = Math.floor(ms / 1e3);
-    if (sec < 60) return `${sec}s`;
-    const min = Math.floor(sec / 60);
-    if (min < 60) return `${min}m`;
-    const hr = Math.floor(min / 60);
-    return `${hr}h${min % 60}m`;
-  }
+  const 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]);
+    },
+    [logs]
+  );
   const groups = reactExports.useMemo(() => groupLogsByConversation(logs), [logs]);
   const cacheTrends = reactExports.useMemo(() => computeCacheTrends(groups), [groups]);
-  const renderGroups = logs.length > 0 && groupedView && !(groups.length === 1 && groups[0]?.logs.length === logs.length);
+  const stopReasons = reactExports.useMemo(() => logs.map((log) => extractStopReason(log)), [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 renderGroups = logs.length > 0 && groupedView && groups.length > 1;
   const rowVirtualizer = useVirtualizer({
     count: renderGroups ? groups.length : logs.length,
     getScrollElement: () => parentRef.current,
@@ -5575,26 +5806,29 @@ function ProxyViewer({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-border rounded-md overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onViewModeChange("simple"),
-            className: `px-2 py-1 cursor-pointer transition-colors text-xs ${viewMode === "simple" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
-            children: "Simple"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onViewModeChange("full"),
-            className: `px-2 py-1 cursor-pointer transition-colors text-xs ${viewMode === "full" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
-            children: "Full"
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-border rounded-md overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onViewModeChange("simple"),
+              className: `px-2 py-1 cursor-pointer transition-colors text-xs ${viewMode === "simple" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
+              children: "Simple"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onViewModeChange("full"),
+              className: `px-2 py-1 cursor-pointer transition-colors text-xs ${viewMode === "full" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
+              children: "Full"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Simple shows parsed output; Full adds raw headers and tokens" })
+      ] }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground text-xs font-mono", children: [
         logs.length,
@@ -5665,6 +5899,28 @@ function ProxyViewer({
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "size-4" })
           }
         )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-border rounded-md overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setGroupViewMode("thread"),
+            className: `px-2 py-1.5 cursor-pointer transition-colors ${groupViewMode === "thread" ? "bg-amber-500/15 text-amber-400 border-r border-amber-500/30" : "text-muted-foreground hover:bg-muted/50"}`,
+            title: "Thread view (connected timeline)",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(GitBranch, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setGroupViewMode("flat"),
+            className: `px-2 py-1.5 cursor-pointer transition-colors ${groupViewMode === "flat" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
+            title: "Flat view (card list)",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "size-4" })
+          }
+        )
       ] })
     ] }),
     /* @__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: [
@@ -5702,8 +5958,8 @@ function ProxyViewer({
                     viewMode,
                     strip,
                     cacheTrends,
-                    selectedSet,
-                    onToggleSelect: handleToggleSelect
+                    onCompareWithPrevious: handleCompareWithPrevious,
+                    defaultGroupViewMode: groupViewMode
                   }
                 )
               },
@@ -5712,6 +5968,7 @@ function ProxyViewer({
           } else {
             const log = logs[virtualRow.index];
             if (log === void 0) return null;
+            const idx = virtualRow.index;
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
@@ -5724,15 +5981,44 @@ function ProxyViewer({
                   width: "100%",
                   transform: `translateY(${virtualRow.start}px)`
                 },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                children: groupViewMode === "thread" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch ml-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    ThreadConnector,
+                    {
+                      stopReason: stopReasons[idx] ?? null,
+                      isPending: log.responseStatus === null,
+                      isFirst: idx === 0,
+                      isLast: idx === logs.length - 1,
+                      isTurnStart: idx === 0 || stopReasons[idx - 1] === "end_turn" || stopReasons[idx - 1] === "stop"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex-1 min-w-0 mb-2 rounded-lg",
+                        (turnIndices[idx] ?? 0) % 2 === 0 ? "bg-muted/10" : "bg-muted/25"
+                      ),
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        LogEntry,
+                        {
+                          log,
+                          viewMode,
+                          strip,
+                          cacheTrend: cacheTrends.get(log.id) ?? null,
+                          onCompareWithPrevious: () => handleCompareWithPrevious(log)
+                        }
+                      )
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
                   LogEntry,
                   {
                     log,
                     viewMode,
                     strip,
                     cacheTrend: cacheTrends.get(log.id) ?? null,
-                    isSelected: selectedSet.has(log.id),
-                    onToggleSelect: handleToggleSelect
+                    onCompareWithPrevious: () => handleCompareWithPrevious(log)
                   }
                 )
               },
@@ -5742,40 +6028,7 @@ function ProxyViewer({
         })
       }
     ) }) }),
-    selectedSummary !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-3 bg-background border border-border rounded-lg shadow-lg px-4 py-2 text-xs", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(GitCompareArrows, { className: "size-4 text-amber-400 shrink-0" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground font-mono", children: [
-        "#",
-        selectedSummary.logA.id,
-        " ↔ #",
-        selectedSummary.logB.id,
-        " · ",
-        selectedSummary.sameSession ? "same session" : "different sessions",
-        selectedSummary.elapsed !== "" && ` · ${selectedSummary.elapsed} apart`
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: clearSelection,
-          className: "text-muted-foreground hover:text-foreground transition-colors cursor-pointer inline-flex items-center gap-1",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-3" }),
-            "Clear"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: openCompare,
-          className: "bg-amber-400 text-amber-950 hover:bg-amber-300 transition-colors px-3 py-1 rounded font-medium cursor-pointer",
-          children: "Compare 2 logs"
-        }
-      )
-    ] }),
-    compareOpen && comparePair !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(CompareDrawer, { left: comparePair[0], right: comparePair[1], onClose: closeCompare })
+    comparePair !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(CompareDrawer, { left: comparePair[0], right: comparePair[1], onClose: closeCompare })
   ] });
 }
 object({