@tonyclaw/llm-inspector 1.14.7 → 1.14.9

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

@@ -1,4 +1,13 @@
-import { ChevronDown, ChevronRight, Clock, MessageSquare, Zap } from "lucide-react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  GitBranch,
+  Loader2,
+  MessageSquare,
+  User,
+  Zap,
+} from "lucide-react";
 import type { JSX } from "react";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
@@ -10,6 +19,8 @@ const API_FORMAT_LABELS: Record<"anthropic" | "openai" | "unknown", string> = {
   unknown: "Unknown",
 };
 
+export type ViewMode = "flat" | "thread";
+
 export type ConversationHeaderProps = {
   conversationId: string;
   startTime: string;
@@ -23,6 +34,15 @@ export type ConversationHeaderProps = {
   /** Hide the API format badge on the header (used when the group contains
    * mixed formats — the per-log badges are shown instead). */
   hideApiFormat?: boolean;
+  /** When true and the group is collapsed, show a spinner instead of the
+   * expand chevron to indicate an in-flight request inside the group. */
+  isLoading?: boolean;
+  /** Current display mode for this group (flat cards or threaded timeline). */
+  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 {
@@ -41,6 +61,10 @@ export function ConversationHeader({
   expanded,
   onToggle,
   hideApiFormat = false,
+  isLoading = false,
+  viewMode,
+  onToggleViewMode,
+  userAgent,
 }: ConversationHeaderProps): JSX.Element {
   return (
     <div
@@ -60,13 +84,39 @@ export function ConversationHeader({
         }
       }}
     >
-      {/* Expand chevron */}
+      {/* Expand chevron — shows spinner when collapsed and group has pending logs */}
       {expanded ? (
         <ChevronDown className="size-4 text-muted-foreground shrink-0" />
+      ) : isLoading ? (
+        <Loader2 className="size-4 animate-spin text-muted-foreground shrink-0" />
       ) : (
         <ChevronRight className="size-4 text-muted-foreground shrink-0" />
       )}
 
+      {/* Thread/flat view toggle — only shown when expanded */}
+      {expanded && onToggleViewMode !== undefined && (
+        <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"
+          }
+        >
+          <GitBranch className="size-3" />
+        </button>
+      )}
+
       {/* Conversation ID */}
       <span
         className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"
@@ -77,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,9 +2,16 @@ 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";
 import { JsonViewerFromString } from "../ui/json-viewer";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { computeHeadersDiff, computeRequestDiff, DiffView } from "./diff";
@@ -17,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).
@@ -31,10 +35,8 @@ export type LogEntryProps = {
    * `null` (or absent) means the header should render with no arrows.
    */
   cacheTrend?: CacheTrendEntry | null;
-  /** Whether this log is currently marked for comparison. */
-  isSelected?: boolean;
-  /** Toggle this log in/out of the comparison selection. */
-  onToggleSelect?: (logId: number) => void;
+  /** Callback to open CompareDrawer with this log and its immediate predecessor. */
+  onCompareWithPrevious?: () => void;
 };
 
 /**
@@ -118,32 +120,38 @@ function DiffToggleButton({
   onClick: (e: React.MouseEvent) => void;
 }): JSX.Element {
   return (
-    <button
-      type="button"
-      onClick={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"}
-    >
-      <GitCompareArrows className="size-3" />
-      {active ? "Showing diff" : "Diff with Raw"}
-    </button>
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            onClick={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",
+            )}
+          >
+            <GitCompareArrows className="size-3" />
+            {active ? "Showing diff" : "Diff with Raw"}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {active ? "Hide diff view" : "Compare proxy output against the original raw version"}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }
 
 export const LogEntry = memo(function ({
   log,
   viewMode = "simple",
-  suppressApiFormatBadge = false,
   strip,
   cacheTrend = null,
-  isSelected = false,
-  onToggleSelect,
+  onCompareWithPrevious,
 }: LogEntryProps): JSX.Element {
   const [expanded, setExpanded] = useState<boolean>(false);
   const [requestCopied, setRequestCopied] = useState<boolean>(false);
@@ -152,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;
@@ -199,34 +263,70 @@ export const LogEntry = memo(function ({
 
   return (
     <>
-      <div
-        className={cn(
-          "border border-border rounded-lg mb-3 overflow-hidden",
-          isSelected && "border-l-2 border-l-amber-400",
-        )}
-      >
+      <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}
-          isSelected={isSelected}
-          onToggleSelect={onToggleSelect}
         />
 
         {expanded && (
           <div onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
             <Tabs defaultValue="request">
               <TabsList className="mx-4 mt-2">
-                {viewMode === "full" && <TabsTrigger value="raw-headers">Raw Headers</TabsTrigger>}
-                {viewMode === "full" && <TabsTrigger value="headers">Headers</TabsTrigger>}
+                {viewMode === "full" && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <TabsTrigger value="raw-headers">Raw Headers</TabsTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        HTTP headers received from the upstream provider
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
+                {viewMode === "full" && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <TabsTrigger value="headers">Headers</TabsTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Request and response headers sent and received
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
                 {shouldShowRawRequestTab(log.apiFormat, viewMode, strip) && (
-                  <TabsTrigger value="raw-request">Raw Request</TabsTrigger>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <TabsTrigger value="raw-request">Raw Request</TabsTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Exact HTTP request sent to the upstream provider
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 )}
                 <TabsTrigger value="request">Request</TabsTrigger>
-                {viewMode === "full" && <TabsTrigger value="raw">Raw Response</TabsTrigger>}
+                {viewMode === "full" && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <TabsTrigger value="raw">Raw Response</TabsTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Exact HTTP response from the upstream provider
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
                 <TabsTrigger value="parsed">Response</TabsTrigger>
               </TabsList>
 
@@ -267,18 +367,48 @@ export const LogEntry = memo(function ({
                         }}
                       />
                     )}
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="h-7 text-xs"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setReplayOpen(true);
-                      }}
-                    >
-                      <RotateCcw className="size-3 mr-1" />
-                      Replay
-                    </Button>
+                    {onCompareWithPrevious !== undefined && (
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="h-7 text-xs"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                onCompareWithPrevious();
+                              }}
+                            >
+                              <GitCompareArrows className="size-3 mr-1" />
+                              Diff with Previous
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            Compare this request with the immediately preceding one
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    )}
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="h-7 text-xs"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setReplayOpen(true);
+                            }}
+                          >
+                            <RotateCcw className="size-3 mr-1" />
+                            Replay
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Re-send this request to the provider</TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
                     <CopyButton
                       text={displayedRequestBody}
                       label="Copy Request"