@tonyclaw/llm-inspector 1.14.8 → 1.14.9

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

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, a as parseRequest, s as stripClaudeCodeBillingHeader, R as RuntimeConfigSchema, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, b as createFailedProviderTestResults, d as ProviderConfigSchema, p as parseOpenAIResponse, I as InspectorResponseSchema } from "./router-BKnjB_zi.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 { c as clsx } from "../_libs/clsx.mjs";
@@ -10,7 +10,7 @@ import { d as diffLines, a as diffJson } from "../_libs/diff.mjs";
 import { R as Root, T as Trigger$2, C as Content, a as Close, b as Title, P as Portal$2, O as Overlay } from "../_libs/radix-ui__react-dialog.mjs";
 import { 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 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 Clock, M as MessageSquare, Z as Zap, W as Wrench, k as Globe, l as User, 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 { 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 { 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";
@@ -333,7 +333,7 @@ async function exportLogsAsZip(logs) {
   document.body.removeChild(anchor);
   URL.revokeObjectURL(url);
 }
-const version = "1.14.8";
+const version = "1.14.9";
 const packageJson = {
   version
 };
@@ -419,7 +419,8 @@ function ConversationHeader({
   hideApiFormat = false,
   isLoading = false,
   viewMode,
-  onToggleViewMode
+  onToggleViewMode,
+  userAgent
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
@@ -465,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,
           {
@@ -1455,16 +1467,15 @@ function CacheTrendIndicator({ trend }) {
 }
 const LogEntryHeader = reactExports.memo(function({
   log,
-  parsedRequest,
+  messageCount = null,
+  toolCount = null,
   expanded,
   onToggle,
-  suppressApiFormatBadge = false,
+  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",
     {
@@ -1491,20 +1502,14 @@ const LogEntryHeader = reactExports.memo(function({
           /* @__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 })
         ] }) }),
-        !suppressApiFormatBadge && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        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",
@@ -1524,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) })
@@ -1583,6 +1588,16 @@ const LogEntryHeader = reactExports.memo(function({
           ] }) }),
           /* @__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(", ")
+          ] })
+        ] }) }),
         log.origin !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "span",
           {
@@ -1594,17 +1609,6 @@ 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.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" }),
@@ -2479,7 +2483,6 @@ function DiffToggleButton({
 const LogEntry = reactExports.memo(function({
   log,
   viewMode = "simple",
-  suppressApiFormatBadge = false,
   strip,
   cacheTrend = null,
   onCompareWithPrevious
@@ -2491,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;
@@ -2537,10 +2593,11 @@ const LogEntry = reactExports.memo(function({
         LogEntryHeader,
         {
           log,
-          parsedRequest,
+          messageCount,
+          toolCount,
           expanded,
           onToggle: () => setExpanded(!expanded),
-          suppressApiFormatBadge,
+          responseToolNames,
           cacheTrend
         }
       ),
@@ -2731,26 +2788,14 @@ function ThreadConnector({
   stopReason,
   isPending,
   isFirst,
-  isLast
+  isLast: _isLast,
+  isTurnStart
 }) {
   const isBoundary = stopReason === "end_turn" || stopReason === "stop";
   const isToolUse = stopReason === "tool_use";
-  cn(
-    "w-0.5 bg-muted-foreground/30",
-    isPending && "border-dashed bg-transparent border-l-2 border-muted-foreground/20"
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch h-full w-6 shrink-0 relative", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute left-1/2 -translate-x-1/2 w-0.5 top-0 flex flex-col items-center", children: [
-      !isFirst && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: cn("w-0.5 grow", "bg-muted-foreground/30", "h-4"),
-          style: { minHeight: "0.5rem" }
-        }
-      ),
-      isFirst && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4" })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 -translate-x-1/2 top-4 flex items-center justify-center z-10", children: isBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+  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(
@@ -2763,8 +2808,11 @@ function ThreadConnector({
     ) : isToolUse ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: "size-2 rounded-full bg-muted-foreground/25",
-        title: "Tool Use — turn continues"
+        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",
@@ -2772,26 +2820,24 @@ function ThreadConnector({
         className: "size-2.5 rounded-full border-2 border-dashed border-muted-foreground/30 animate-pulse",
         title: "Response pending"
       }
-    ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-1.5 rounded-full bg-muted-foreground/30" }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: "absolute left-1/2 -translate-x-1/2 w-0.5 top-4 flex flex-col items-center",
-        style: { bottom: 0 },
-        children: [
-          !isBoundary && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: cn(
-                "w-0.5 flex-1",
-                isPending ? "border-dashed bg-transparent border-l-2 border-muted-foreground/20" : "bg-muted-foreground/30"
-              )
-            }
-          ),
-          isBoundary && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-0.5 h-4 bg-muted-foreground/10" })
-        ]
+        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) {
@@ -2822,6 +2868,17 @@ const ConversationGroup = reactExports.memo(function({
   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(
@@ -2838,6 +2895,7 @@ const ConversationGroup = reactExports.memo(function({
         onToggle: () => setExpanded(!expanded),
         hideApiFormat: mixed,
         isLoading,
+        userAgent: group.logs[0]?.userAgent ?? null,
         viewMode: groupViewMode,
         onToggleViewMode: () => setGroupViewMode((prev) => prev === "thread" ? "flat" : "thread")
       }
@@ -2847,35 +2905,46 @@ const ConversationGroup = reactExports.memo(function({
       {
         log,
         viewMode,
-        suppressApiFormatBadge: !mixed,
         strip,
         cacheTrend: cacheTrends?.get(log.id) ?? null,
         onCompareWithPrevious: () => onCompareWithPrevious(log)
       },
       log.id
     )) }),
-    expanded && groupViewMode === "thread" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-3", children: group.logs.map((log, idx) => /* @__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
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0 mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        LogEntry,
-        {
-          log,
-          viewMode,
-          suppressApiFormatBadge: !mixed,
-          strip,
-          cacheTrend: cacheTrends?.get(log.id) ?? null,
-          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 }) {
@@ -5706,6 +5775,17 @@ function ProxyViewer({
   const groups = reactExports.useMemo(() => groupLogsByConversation(logs), [logs]);
   const cacheTrends = reactExports.useMemo(() => computeCacheTrends(groups), [groups]);
   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,
@@ -5908,19 +5988,29 @@ function ProxyViewer({
                       stopReason: stopReasons[idx] ?? null,
                       isPending: log.responseStatus === null,
                       isFirst: idx === 0,
-                      isLast: idx === logs.length - 1
+                      isLast: idx === logs.length - 1,
+                      isTurnStart: idx === 0 || stopReasons[idx - 1] === "end_turn" || stopReasons[idx - 1] === "stop"
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0 mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    LogEntry,
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
                     {
-                      log,
-                      viewMode,
-                      strip,
-                      cacheTrend: cacheTrends.get(log.id) ?? null,
-                      onCompareWithPrevious: () => handleCompareWithPrevious(log)
+                      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,
                   {

package/.output/server/_ssr/index.mjs

@@ -198,7 +198,7 @@ function getResponse() {
   return event.res;
 }
 async function getStartManifest(matchedRoutes) {
-  const { tsrStartManifest } = await import("../_tanstack-start-manifest_v-IsglLVKy.mjs");
+  const { tsrStartManifest } = await import("../_tanstack-start-manifest_v-BVIiyDeJ.mjs");
   const startManifest = tsrStartManifest();
   const rootRoute = startManifest.routes[rootRouteId] = startManifest.routes[rootRouteId] || {};
   rootRoute.assets = rootRoute.assets || [];
@@ -767,7 +767,7 @@ let entriesPromise;
 let baseManifestPromise;
 let cachedFinalManifestPromise;
 async function loadEntries() {
-  const routerEntry = await import("./router-BKnjB_zi.mjs").then((n) => n.r);
+  const routerEntry = await import("./router-CmanwZJc.mjs").then((n) => n.r);
   const startEntry = await import("./start-HYkvq4Ni.mjs");
   return { startEntry, routerEntry };
 }

package/.output/server/_ssr/{router-BKnjB_zi.mjs → router-CmanwZJc.mjs}

@@ -45,7 +45,7 @@ import "../_libs/debounce-fn.mjs";
 import "../_libs/mimic-function.mjs";
 import "../_libs/semver.mjs";
 import "../_libs/uint8array-extras.mjs";
-const appCss = "/assets/index-vP91146S.css";
+const appCss = "/assets/index-bqeypwJB.css";
 const Route$k = createRootRoute({
   head: () => ({
     meta: [
@@ -69,7 +69,7 @@ function RootDocument({ children }) {
     ] })
   ] });
 }
-const $$splitComponentImporter = () => import("./index-9uTJ4xYR.mjs");
+const $$splitComponentImporter = () => import("./index-_9xcAkkw.mjs");
 const Route$j = createFileRoute("/")({
   component: lazyRouteComponent($$splitComponentImporter, "component")
 });
@@ -577,6 +577,7 @@ const OpenAIRequestSchema = object({
   stream: boolean().optional(),
   tools: array(OpenAIToolDefinition).optional(),
   tool_choice: union([
+    _enum(["auto", "none", "required"]),
     object({ type: literal("auto") }),
     object({ type: literal("none") }),
     object({ type: literal("function"), function: object({ name: string() }) })
@@ -1276,11 +1277,7 @@ const AnthropicFormatHandler = {
       const json = JSON.parse(rawBody);
       if (typeof json === "object" && json !== null && !Array.isArray(json)) {
         const keys = Object.keys(json);
-        if (keys.includes("model") && keys.includes("messages")) {
-          if (keys.includes("system") || keys.includes("tools")) {
-            return true;
-          }
-        }
+        return keys.includes("model") && keys.includes("messages") && keys.includes("system");
       }
       return false;
     } catch {
@@ -1410,6 +1407,21 @@ function extractOpenAIStream(raw, log, fallbackModel, collectChunks = true) {
         promptTokens = chunk.usage.prompt_tokens ?? 0;
         completionTokens = chunk.usage.completion_tokens ?? 0;
         log.inputTokens = promptTokens;
+        if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+          const usageDesc = Object.getOwnPropertyDescriptor(parsed, "usage");
+          if (usageDesc !== void 0 && typeof usageDesc.value === "object" && usageDesc.value !== null) {
+            const detailsDesc = Object.getOwnPropertyDescriptor(
+              usageDesc.value,
+              "prompt_tokens_details"
+            );
+            if (detailsDesc !== void 0 && typeof detailsDesc.value === "object" && detailsDesc.value !== null) {
+              const cacheDesc = Object.getOwnPropertyDescriptor(detailsDesc.value, "cached_tokens");
+              if (cacheDesc !== void 0 && typeof cacheDesc.value === "number") {
+                log.cacheReadInputTokens = cacheDesc.value;
+              }
+            }
+          }
+        }
         usageCaptured = true;
       }
       for (const choice of chunk.choices) {
@@ -1506,11 +1518,31 @@ const OpenAIFormatHandler = {
   extractTokens(responseBody) {
     const parsed = parseOpenAIResponse(responseBody);
     if (parsed) {
+      let cacheReadInputTokens = null;
+      try {
+        const raw = JSON.parse(responseBody);
+        if (raw !== null && typeof raw === "object" && !Array.isArray(raw)) {
+          const usageDesc = Object.getOwnPropertyDescriptor(raw, "usage");
+          if (usageDesc !== void 0 && typeof usageDesc.value === "object" && usageDesc.value !== null) {
+            const detailsDesc = Object.getOwnPropertyDescriptor(
+              usageDesc.value,
+              "prompt_tokens_details"
+            );
+            if (detailsDesc !== void 0 && typeof detailsDesc.value === "object" && detailsDesc.value !== null) {
+              const cacheDesc = Object.getOwnPropertyDescriptor(detailsDesc.value, "cached_tokens");
+              if (cacheDesc !== void 0 && typeof cacheDesc.value === "number") {
+                cacheReadInputTokens = cacheDesc.value;
+              }
+            }
+          }
+        }
+      } catch {
+      }
       return {
         inputTokens: parsed.usage.prompt_tokens ?? null,
         outputTokens: parsed.usage.completion_tokens ?? null,
         cacheCreationInputTokens: null,
-        cacheReadInputTokens: null
+        cacheReadInputTokens
       };
     }
     return {
@@ -1529,11 +1561,7 @@ const OpenAIFormatHandler = {
       const json = JSON.parse(rawBody);
       if (typeof json === "object" && json !== null && !Array.isArray(json)) {
         const keys = Object.keys(json);
-        if (keys.includes("model") && keys.includes("messages")) {
-          if (!keys.includes("system") && !keys.includes("tools")) {
-            return true;
-          }
-        }
+        return keys.includes("model") && keys.includes("messages") && !keys.includes("system");
       }
       return false;
     } catch {
@@ -2504,6 +2532,8 @@ async function handleProxy(req) {
   upstreamHeaders.forEach((value, key) => {
     upstreamHeadersObj[key.toLowerCase()] = value;
   });
+  const bodyFormat = formatRegistry.detectFormat(requestBody);
+  const displayApiFormat = bodyFormat !== "unknown" ? bodyFormat : formatHandler.format;
   const log = await createLog(
     req.method,
     parsed.apiPath,
@@ -2512,7 +2542,7 @@ async function handleProxy(req) {
     clientInfo,
     rawHeaders,
     upstreamHeadersObj,
-    formatHandler.format,
+    displayApiFormat,
     model,
     sessionId,
     preAcquiredId
@@ -4713,6 +4743,7 @@ const router = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
 export {
   CapturedLogSchema as C,
   InspectorResponseSchema as I,
+  OpenAIRequestSchema as O,
   ProviderTestResultsSchema as P,
   RuntimeConfigSchema as R,
   parseRequest as a,

package/.output/server/{_tanstack-start-manifest_v-IsglLVKy.mjs → _tanstack-start-manifest_v-BVIiyDeJ.mjs}

@@ -1,4 +1,4 @@
-const tsrStartManifest = () => ({ "routes": { "__root__": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/__root.tsx", "children": ["/", "/api/config", "/api/health", "/api/logs", "/api/mcp", "/api/models", "/api/providers", "/api/sessions", "/proxy/$"], "preloads": ["/assets/main-CJ4MreBr.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-CdnotuLh.js"] }, "/api/config": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/config.ts", "children": ["/api/config/paths"] }, "/api/health": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/health.ts" }, "/api/logs": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.ts", "children": ["/api/logs/$id", "/api/logs/stream"] }, "/api/mcp": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/mcp.ts" }, "/api/models": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/models.ts" }, "/api/providers": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.ts", "children": ["/api/providers/$providerId", "/api/providers/export", "/api/providers/import", "/api/providers/scan"] }, "/api/sessions": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/sessions.ts" }, "/proxy/$": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/proxy/$.ts" }, "/api/config/paths": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/config.paths.ts" }, "/api/logs/$id": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.ts", "children": ["/api/logs/$id/chunks", "/api/logs/$id/replay"] }, "/api/logs/stream": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.stream.ts" }, "/api/providers/$providerId": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.ts", "children": ["/api/providers/$providerId/test"] }, "/api/providers/export": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.export.ts" }, "/api/providers/import": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.import.ts" }, "/api/providers/scan": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.scan.ts" }, "/api/logs/$id/chunks": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.chunks.ts" }, "/api/logs/$id/replay": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.replay.ts" }, "/api/providers/$providerId/test": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.test.ts", "children": ["/api/providers/$providerId/test/log"] }, "/api/providers/$providerId/test/log": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.test.log.ts" } }, "clientEntry": "/assets/main-CJ4MreBr.js" });
+const tsrStartManifest = () => ({ "routes": { "__root__": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/__root.tsx", "children": ["/", "/api/config", "/api/health", "/api/logs", "/api/mcp", "/api/models", "/api/providers", "/api/sessions", "/proxy/$"], "preloads": ["/assets/main-C8OUJKbz.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-Dv-dj1xH.js"] }, "/api/config": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/config.ts", "children": ["/api/config/paths"] }, "/api/health": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/health.ts" }, "/api/logs": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.ts", "children": ["/api/logs/$id", "/api/logs/stream"] }, "/api/mcp": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/mcp.ts" }, "/api/models": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/models.ts" }, "/api/providers": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.ts", "children": ["/api/providers/$providerId", "/api/providers/export", "/api/providers/import", "/api/providers/scan"] }, "/api/sessions": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/sessions.ts" }, "/proxy/$": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/proxy/$.ts" }, "/api/config/paths": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/config.paths.ts" }, "/api/logs/$id": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.ts", "children": ["/api/logs/$id/chunks", "/api/logs/$id/replay"] }, "/api/logs/stream": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.stream.ts" }, "/api/providers/$providerId": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.ts", "children": ["/api/providers/$providerId/test"] }, "/api/providers/export": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.export.ts" }, "/api/providers/import": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.import.ts" }, "/api/providers/scan": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.scan.ts" }, "/api/logs/$id/chunks": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.chunks.ts" }, "/api/logs/$id/replay": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.replay.ts" }, "/api/providers/$providerId/test": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.test.ts", "children": ["/api/providers/$providerId/test/log"] }, "/api/providers/$providerId/test/log": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.test.log.ts" } }, "clientEntry": "/assets/main-C8OUJKbz.js" });
 export {
   tsrStartManifest
 };