@tonyclaw/llm-inspector 1.14.8 → 1.14.9

package/.output/server/index.mjs

@@ -38,51 +38,51 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-11T12:14:10.996Z",
+    "mtime": "2026-06-11T13:44:56.125Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/index-vP91146S.css": {
+  "/assets/index-bqeypwJB.css": {
     "type": "text/css; charset=utf-8",
-    "etag": '"14a58-Ts4ulNygZtoNVfw4qwf2tNfAXoU"',
-    "mtime": "2026-06-11T12:14:10.997Z",
-    "size": 84568,
-    "path": "../public/assets/index-vP91146S.css"
-  },
-  "/assets/zhipuai-BPNAnxo-.svg": {
-    "type": "image/svg+xml",
-    "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-11T12:14:10.996Z",
-    "size": 11256,
-    "path": "../public/assets/zhipuai-BPNAnxo-.svg"
+    "etag": '"14d2d-fciDL/LvvG4KiFnlq0WNx0FqBmw"',
+    "mtime": "2026-06-11T13:44:56.125Z",
+    "size": 85293,
+    "path": "../public/assets/index-bqeypwJB.css"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-11T12:14:10.996Z",
+    "mtime": "2026-06-11T13:44:56.125Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/main-CJ4MreBr.js": {
+  "/assets/zhipuai-BPNAnxo-.svg": {
+    "type": "image/svg+xml",
+    "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
+    "mtime": "2026-06-11T13:44:56.122Z",
+    "size": 11256,
+    "path": "../public/assets/zhipuai-BPNAnxo-.svg"
+  },
+  "/assets/main-C8OUJKbz.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"50599-xS7/i8WCDvqJMx9qZW3sZ2pNsvE"',
-    "mtime": "2026-06-11T12:14:10.997Z",
+    "etag": '"50599-x4LjDXM7jigK2tdjHCfXl0STwVQ"',
+    "mtime": "2026-06-11T13:44:56.125Z",
     "size": 329113,
-    "path": "../public/assets/main-CJ4MreBr.js"
+    "path": "../public/assets/main-C8OUJKbz.js"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-11T12:14:10.996Z",
+    "mtime": "2026-06-11T13:44:56.125Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/index-CdnotuLh.js": {
+  "/assets/index-Dv-dj1xH.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"95a74-8hHRRtv/cPIlS0z++Wpqpv18rpY"',
-    "mtime": "2026-06-11T12:14:10.999Z",
-    "size": 612980,
-    "path": "../public/assets/index-CdnotuLh.js"
+    "etag": '"9600f-3dnGI92f5ekK1BS9qp5iLg0Map4"',
+    "mtime": "2026-06-11T13:44:56.127Z",
+    "size": 614415,
+    "path": "../public/assets/index-Dv-dj1xH.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.14.8",
+  "version": "1.14.9",
   "type": "module",
   "description": "LLM API proxy inspector — captures and displays requests/responses from AI coding tools in a web UI",
   "license": "MIT",

package/src/components/ProxyViewer.tsx

@@ -1,6 +1,7 @@
 import { type JSX, useCallback, useEffect, useMemo, useState, useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { Download, GitBranch, LayoutGrid, List } from "lucide-react";
+import { cn } from "../lib/utils";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./ui/tooltip";
 import type { CapturedLog } from "../proxy/schemas";
 import { exportLogsAsZip } from "../lib/export-logs";
@@ -156,6 +157,18 @@ export function ProxyViewer({
   const cacheTrends = useMemo(() => computeCacheTrends(groups), [groups]);
   const stopReasons = useMemo(() => logs.map((log) => extractStopReason(log)), [logs]);
 
+  const turnIndices = useMemo(() => {
+    const indices: number[] = [];
+    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]);
+
   // Determine what items to render (groups or individual logs)
   const renderGroups = logs.length > 0 && groupedView && groups.length > 1;
 
@@ -402,8 +415,18 @@ export function ProxyViewer({
                             isPending={log.responseStatus === null}
                             isFirst={idx === 0}
                             isLast={idx === logs.length - 1}
+                            isTurnStart={
+                              idx === 0 ||
+                              stopReasons[idx - 1] === "end_turn" ||
+                              stopReasons[idx - 1] === "stop"
+                            }
                           />
-                          <div className="flex-1 min-w-0 mb-2">
+                          <div
+                            className={cn(
+                              "flex-1 min-w-0 mb-2 rounded-lg",
+                              (turnIndices[idx] ?? 0) % 2 === 0 ? "bg-muted/10" : "bg-muted/25",
+                            )}
+                          >
                             <LogEntry
                               log={log}
                               viewMode={viewMode}

package/src/components/proxy-viewer/ConversationGroup.tsx

@@ -2,6 +2,7 @@ import { useState, memo, useMemo, useEffect } from "react";
 import type { JSX } from "react";
 import type { CapturedLog } from "../../proxy/schemas";
 import { extractStopReason } from "../../lib/stopReason";
+import { cn } from "../../lib/utils";
 import {
   ConversationHeader,
   getConversationId,
@@ -68,6 +69,19 @@ export const ConversationGroup = memo(function ({
   // Pre-compute stop reasons for each log — used by ThreadConnector
   const stopReasons = useMemo(() => group.logs.map((log) => extractStopReason(log)), [group.logs]);
 
+  // Compute turn indices for alternating background colours
+  const turnIndices = useMemo(() => {
+    const indices: number[] = [];
+    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
@@ -89,6 +103,7 @@ export const ConversationGroup = memo(function ({
         onToggle={() => setExpanded(!expanded)}
         hideApiFormat={mixed}
         isLoading={isLoading}
+        userAgent={group.logs[0]?.userAgent ?? null}
         viewMode={groupViewMode}
         onToggleViewMode={() => setGroupViewMode((prev) => (prev === "thread" ? "flat" : "thread"))}
       />
@@ -100,7 +115,6 @@ export const ConversationGroup = memo(function ({
               key={log.id}
               log={log}
               viewMode={viewMode}
-              suppressApiFormatBadge={!mixed}
               strip={strip}
               cacheTrend={cacheTrends?.get(log.id) ?? null}
               onCompareWithPrevious={() => onCompareWithPrevious(log)}
@@ -111,26 +125,35 @@ export const ConversationGroup = memo(function ({
 
       {expanded && groupViewMode === "thread" && (
         <div className="ml-3">
-          {group.logs.map((log, idx) => (
-            <div key={log.id} className="flex items-stretch">
-              <ThreadConnector
-                stopReason={stopReasons[idx] ?? null}
-                isPending={log.responseStatus === null}
-                isFirst={idx === 0}
-                isLast={idx === group.logs.length - 1}
-              />
-              <div className="flex-1 min-w-0 mb-2">
-                <LogEntry
-                  log={log}
-                  viewMode={viewMode}
-                  suppressApiFormatBadge={!mixed}
-                  strip={strip}
-                  cacheTrend={cacheTrends?.get(log.id) ?? null}
-                  onCompareWithPrevious={() => onCompareWithPrevious(log)}
+          {group.logs.map((log, idx) => {
+            const isTurnStart =
+              idx === 0 || stopReasons[idx - 1] === "end_turn" || stopReasons[idx - 1] === "stop";
+            return (
+              <div key={log.id} className="flex items-stretch">
+                <ThreadConnector
+                  stopReason={stopReasons[idx] ?? null}
+                  isPending={log.responseStatus === null}
+                  isFirst={idx === 0}
+                  isLast={idx === group.logs.length - 1}
+                  isTurnStart={isTurnStart}
                 />
+                <div
+                  className={cn(
+                    "flex-1 min-w-0 mb-2 rounded-lg",
+                    (turnIndices[idx] ?? 0) % 2 === 0 ? "bg-muted/10" : "bg-muted/25",
+                  )}
+                >
+                  <LogEntry
+                    log={log}
+                    viewMode={viewMode}
+                    strip={strip}
+                    cacheTrend={cacheTrends?.get(log.id) ?? null}
+                    onCompareWithPrevious={() => onCompareWithPrevious(log)}
+                  />
+                </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       )}
     </div>

package/src/components/proxy-viewer/ConversationHeader.tsx

@@ -5,6 +5,7 @@ import {
   GitBranch,
   Loader2,
   MessageSquare,
+  User,
   Zap,
 } from "lucide-react";
 import type { JSX } from "react";
@@ -40,6 +41,8 @@ export type ConversationHeaderProps = {
   viewMode?: ViewMode;
   /** Toggle between flat and thread display modes for this group. */
   onToggleViewMode?: () => void;
+  /** User-Agent string from the first log in the group. */
+  userAgent?: string | null;
 };
 
 function formatTimestamp(iso: string): string {
@@ -61,6 +64,7 @@ export function ConversationHeader({
   isLoading = false,
   viewMode,
   onToggleViewMode,
+  userAgent,
 }: ConversationHeaderProps): JSX.Element {
   return (
     <div
@@ -123,6 +127,17 @@ export function ConversationHeader({
           : conversationId}
       </span>
 
+      {/* User-Agent */}
+      {userAgent !== null && userAgent !== undefined && userAgent !== "" && (
+        <span
+          className="flex items-center gap-1 text-muted-foreground text-xs shrink-0"
+          title={userAgent}
+        >
+          <User className="size-3" />
+          <span className="font-mono tabular-nums truncate max-w-[120px]">{userAgent}</span>
+        </span>
+      )}
+
       {/* API Format Badge */}
       {!hideApiFormat && (
         <Badge

package/src/components/proxy-viewer/LogEntry.tsx

@@ -2,7 +2,13 @@ import { Check, Copy, GitCompareArrows, RotateCcw } from "lucide-react";
 import type { JSX } from "react";
 import { useMemo, useState, memo } from "react";
 import { cn } from "../../lib/utils";
-import { type CapturedLog, parseRequest } from "../../proxy/schemas";
+import {
+  type CapturedLog,
+  parseRequest,
+  InspectorResponseSchema,
+  parseOpenAIResponse,
+  OpenAIRequestSchema,
+} from "../../proxy/schemas";
 import { stripClaudeCodeBillingHeader } from "../../proxy/claudeCodeStrip";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
@@ -18,10 +24,7 @@ import type { CacheTrendEntry } from "./cacheTrend";
 export type LogEntryProps = {
   log: CapturedLog;
   viewMode?: "simple" | "full";
-  /** Suppress the API format badge when log is displayed within a group */
-  suppressApiFormatBadge?: boolean;
-  /**
-   * Live "strip Claude Code billing header" flag, sourced once at the viewer
+  /** Live "strip Claude Code billing header" flag, sourced once at the viewer
    * container. Hoisted out of `LogEntry` so a single SWR subscription serves
    * the whole virtualized list (N logs == N subscriptions is the previous
    * cost).
@@ -146,7 +149,6 @@ function DiffToggleButton({
 export const LogEntry = memo(function ({
   log,
   viewMode = "simple",
-  suppressApiFormatBadge = false,
   strip,
   cacheTrend = null,
   onCompareWithPrevious,
@@ -158,7 +160,63 @@ export const LogEntry = memo(function ({
   const [replayOpen, setReplayOpen] = useState<boolean>(false);
   const [headersDiff, setHeadersDiff] = useState<boolean>(false);
   const [requestDiff, setRequestDiff] = useState<boolean>(false);
-  const parsedRequest = useMemo(() => parseRequest(log.rawRequestBody), [log.rawRequestBody]);
+  const messageCount = 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 {
+        // ignore
+      }
+    }
+    return null;
+  }, [log.rawRequestBody, log.apiFormat]);
+  const toolCount = useMemo(() => {
+    if (log.rawRequestBody === null) return null;
+    if (log.apiFormat === "anthropic") {
+      const parsed = parseRequest(log.rawRequestBody);
+      if (parsed !== null && parsed.tools !== undefined && 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 !== undefined && result.data.tools.length > 0) {
+          return result.data.tools.length;
+        }
+      } catch {
+        // ignore
+      }
+    }
+    return null;
+  }, [log.rawRequestBody, log.apiFormat]);
+  const responseToolNames = 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 !== undefined && 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 {
+        // JSON parse failed, ignore
+      }
+    }
+    return null;
+  }, [log.responseText, log.apiFormat]);
   const strippedRequestBody = useMemo(() => {
     if (!strip || log.apiFormat !== "anthropic" || log.rawRequestBody === null) {
       return null;
@@ -208,10 +266,11 @@ export const LogEntry = memo(function ({
       <div className="border border-border rounded-lg mb-3 overflow-hidden">
         <LogEntryHeader
           log={log}
-          parsedRequest={parsedRequest}
+          messageCount={messageCount}
+          toolCount={toolCount}
           expanded={expanded}
           onToggle={() => setExpanded(!expanded)}
-          suppressApiFormatBadge={suppressApiFormatBadge}
+          responseToolNames={responseToolNames}
           cacheTrend={cacheTrend}
         />
 

package/src/components/proxy-viewer/LogEntryHeader.tsx

@@ -9,14 +9,13 @@ import {
   Loader2,
   MessageSquare,
   Radio,
-  User,
   Wrench,
   Zap,
 } from "lucide-react";
 import type { JSX } from "react";
 import { memo } from "react";
 import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
-import type { CapturedLog, InspectorRequest } from "../../proxy/schemas";
+import type { CapturedLog } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
 import { ProviderLogo, detectProvider } from "../providers/ProviderLogo";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
@@ -56,13 +55,15 @@ function CacheTrendIndicator({ trend }: { trend: CacheTrend | null }): JSX.Eleme
 
 export type LogEntryHeaderProps = {
   log: CapturedLog;
-  parsedRequest: InspectorRequest | null;
+  /** Number of messages in the request (supports both Anthropic and OpenAI formats). */
+  messageCount?: number | null;
+  /** Number of tools defined in the request (supports both Anthropic and OpenAI formats). */
+  toolCount?: number | null;
   expanded: boolean;
   onToggle: () => void;
-  /** Suppress the API format badge when log is displayed within a group */
-  suppressApiFormatBadge?: boolean;
-  /**
-   * Per-log cache token trend (creation + read) relative to the previous log
+  /** Tool call names extracted from the model response (e.g., ["read_file", "grep"]). */
+  responseToolNames?: string[] | null;
+  /** Per-log cache token trend (creation + read) relative to the previous log
    * in the same conversation group. When `undefined` or a field is `null`,
    * the corresponding cache span renders as it did before — no arrow.
    */
@@ -71,23 +72,17 @@ export type LogEntryHeaderProps = {
 
 export const LogEntryHeader = memo(function ({
   log,
-  parsedRequest,
+  messageCount = null,
+  toolCount = null,
   expanded,
   onToggle,
-  suppressApiFormatBadge = false,
+  responseToolNames = null,
   cacheTrend = null,
 }: LogEntryHeaderProps): JSX.Element {
   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 !== undefined && parsedRequest.tools.length > 0
-      ? parsedRequest.tools.length
-      : null;
-
   return (
     <div
       role="button"
@@ -124,50 +119,38 @@ export const LogEntryHeader = memo(function ({
         </TooltipProvider>
       )}
 
-      {/* API Format Badge */}
-      {!suppressApiFormatBadge && (
-        <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",
-          )}
-        >
-          {log.apiFormat === "anthropic"
-            ? "Anthropic"
-            : log.apiFormat === "openai"
-              ? "OpenAI"
-              : "Unknown"}
-        </Badge>
-      )}
-
-      {/* Response Status */}
-      {statusCategory === "server_error" ? (
-        <Badge variant="destructive" className="text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums">
-          {log.responseStatus}
-        </Badge>
-      ) : statusCategory === "pending" ? (
-        <Badge
-          variant="outline"
-          className={cn(
-            "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums",
-            STATUS_BADGE_CLASSES[statusCategory],
-          )}
-        >
-          <Loader2 className="size-3 animate-spin" />
-        </Badge>
-      ) : (
-        <Badge
-          variant="outline"
-          className={cn(
-            "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums",
-            STATUS_BADGE_CLASSES[statusCategory],
+      {/* Response Status — only shown for non-200 or pending */}
+      {statusCategory !== "success" && (
+        <>
+          {statusCategory === "server_error" ? (
+            <Badge
+              variant="destructive"
+              className="text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums"
+            >
+              {log.responseStatus}
+            </Badge>
+          ) : statusCategory === "pending" ? (
+            <Badge
+              variant="outline"
+              className={cn(
+                "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums",
+                STATUS_BADGE_CLASSES[statusCategory],
+              )}
+            >
+              <Loader2 className="size-3 animate-spin" />
+            </Badge>
+          ) : (
+            <Badge
+              variant="outline"
+              className={cn(
+                "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums",
+                STATUS_BADGE_CLASSES[statusCategory],
+              )}
+            >
+              {log.responseStatus}
+            </Badge>
           )}
-        >
-          {log.responseStatus}
-        </Badge>
+        </>
       )}
 
       {/* Elapsed time */}
@@ -257,6 +240,23 @@ export const LogEntryHeader = memo(function ({
         </TooltipProvider>
       )}
 
+      {/* Response tool calls — tool names the model requested to invoke */}
+      {responseToolNames !== null && responseToolNames.length > 0 && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-amber-400/80 text-xs shrink-0">
+                <Wrench className="size-3" />
+                <span className="font-mono tabular-nums truncate max-w-[160px]">
+                  {responseToolNames.join(", ")}
+                </span>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Tools called by model: {responseToolNames.join(", ")}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+
       {/* Origin */}
       {log.origin !== null && (
         <span
@@ -270,19 +270,6 @@ export const LogEntryHeader = memo(function ({
         </span>
       )}
 
-      {/* User-Agent */}
-      {log.userAgent !== null && (
-        <span
-          className="flex items-center gap-1 text-muted-foreground text-xs shrink-0"
-          title={`User-Agent: ${log.userAgent}`}
-        >
-          <User className="size-3" />
-          <span className="font-mono tabular-nums truncate max-w-[150px]" title={log.userAgent}>
-            {log.userAgent}
-          </span>
-        </span>
-      )}
-
       {/* Client info (PID + project folder) */}
       {(log.clientPid !== null || log.clientProjectFolder !== null) && (
         <TooltipProvider>