@tonyclaw/llm-inspector 1.14.6 → 1.14.8

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

@@ -1,4 +1,12 @@
-import { ChevronDown, ChevronRight, Clock, MessageSquare, Zap } from "lucide-react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  GitBranch,
+  Loader2,
+  MessageSquare,
+  Zap,
+} from "lucide-react";
 import type { JSX } from "react";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
@@ -10,6 +18,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 +33,13 @@ 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;
 };
 
 function formatTimestamp(iso: string): string {
@@ -41,6 +58,9 @@ export function ConversationHeader({
   expanded,
   onToggle,
   hideApiFormat = false,
+  isLoading = false,
+  viewMode,
+  onToggleViewMode,
 }: ConversationHeaderProps): JSX.Element {
   return (
     <div
@@ -60,13 +80,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"

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

@@ -5,6 +5,7 @@ import { cn } from "../../lib/utils";
 import { type CapturedLog, parseRequest } 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";
@@ -31,10 +32,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,21 +117,29 @@ 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>
   );
 }
 
@@ -142,8 +149,7 @@ export const LogEntry = memo(function ({
   suppressApiFormatBadge = false,
   strip,
   cacheTrend = null,
-  isSelected = false,
-  onToggleSelect,
+  onCompareWithPrevious,
 }: LogEntryProps): JSX.Element {
   const [expanded, setExpanded] = useState<boolean>(false);
   const [requestCopied, setRequestCopied] = useState<boolean>(false);
@@ -199,12 +205,7 @@ 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}
@@ -212,21 +213,61 @@ export const LogEntry = memo(function ({
           onToggle={() => setExpanded(!expanded)}
           suppressApiFormatBadge={suppressApiFormatBadge}
           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 +308,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"

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

@@ -1,7 +1,6 @@
 import {
   ArrowDown,
   ArrowUp,
-  Check,
   ChevronDown,
   ChevronRight,
   Clock,
@@ -20,6 +19,7 @@ import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../
 import type { CapturedLog, InspectorRequest } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
 import { ProviderLogo, detectProvider } from "../providers/ProviderLogo";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import type { CacheTrend } from "./cacheTrend";
 
 function formatElapsed(ms: number): string {
@@ -67,10 +67,6 @@ export type LogEntryHeaderProps = {
    * the corresponding cache span renders as it did before — no arrow.
    */
   cacheTrend?: { creation: CacheTrend | null; read: CacheTrend | null } | null;
-  /** Whether this log is currently marked for comparison. */
-  isSelected?: boolean;
-  /** Toggle this log in/out of the comparison selection. */
-  onToggleSelect?: (logId: number) => void;
 };
 
 export const LogEntryHeader = memo(function ({
@@ -80,8 +76,6 @@ export const LogEntryHeader = memo(function ({
   onToggle,
   suppressApiFormatBadge = false,
   cacheTrend = null,
-  isSelected = false,
-  onToggleSelect,
 }: LogEntryHeaderProps): JSX.Element {
   const statusCategory = getStatusCategory(log.responseStatus);
 
@@ -111,40 +105,23 @@ export const LogEntryHeader = memo(function ({
         }
       }}
     >
-      {/* Selection checkbox (for log-request comparison) */}
-      {onToggleSelect !== undefined && (
-        <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",
-          )}
-        >
-          {isSelected && <Check className="size-3" strokeWidth={3} />}
-        </button>
-      )}
-
       {/* Request ID */}
       <span className="text-blue-400/80 font-mono text-xs font-semibold tabular-nums shrink-0">
         #{log.id}
       </span>
 
-      {/* Model */}
+      {/* Model — logo icon only, model name in tooltip */}
       {log.model !== null && (
-        <>
-          <ProviderLogo provider={detectProvider(log.model)} className="size-4 shrink-0" />
-          <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-mono">
-            {log.model}
-          </Badge>
-        </>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="shrink-0">
+                <ProviderLogo provider={detectProvider(log.model)} className="size-4" />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>{log.model}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
 
       {/* API Format Badge */}
@@ -220,36 +197,64 @@ export const LogEntryHeader = memo(function ({
       )}
       {/* Cache tokens */}
       {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
-        <span className="flex items-center gap-1 text-xs shrink-0">
-          <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
-          <span className="font-mono tabular-nums text-emerald-400">
-            Cache +{formatTokens(log.cacheCreationInputTokens)}
-          </span>
-        </span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-xs shrink-0">
+                <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
+                <span className="font-mono tabular-nums text-emerald-400">
+                  Cache +{formatTokens(log.cacheCreationInputTokens)}
+                </span>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Tokens cached for reuse, reducing future API cost</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
       {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
-        <span className="flex items-center gap-1 text-xs shrink-0">
-          <CacheTrendIndicator trend={cacheTrend?.read ?? null} />
-          <span className="font-mono tabular-nums text-purple-400">
-            Cache ~{formatTokens(log.cacheReadInputTokens)}
-          </span>
-        </span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-xs shrink-0">
+                <CacheTrendIndicator trend={cacheTrend?.read ?? null} />
+                <span className="font-mono tabular-nums text-purple-400">
+                  Cache ~{formatTokens(log.cacheReadInputTokens)}
+                </span>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Tokens served from cache, reducing API cost</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
 
       {/* Message count */}
       {messageCount !== null && (
-        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
-          <MessageSquare className="size-3" />
-          <span className="font-mono tabular-nums">{messageCount}</span>
-        </span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+                <MessageSquare className="size-3" />
+                <span className="font-mono tabular-nums">{messageCount}</span>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Number of messages in the conversation</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
 
       {/* Tool count */}
       {toolCount !== null && (
-        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
-          <Wrench className="size-3" />
-          <span className="font-mono tabular-nums">{toolCount}</span>
-        </span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+                <Wrench className="size-3" />
+                <span className="font-mono tabular-nums">{toolCount}</span>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Number of tools defined in the request</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
 
       {/* Origin */}
@@ -280,25 +285,38 @@ export const LogEntryHeader = memo(function ({
 
       {/* Client info (PID + project folder) */}
       {(log.clientPid !== null || log.clientProjectFolder !== null) && (
-        <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 ?? "?"}`
-          }
-        >
-          <FileTerminal className="size-3" />
-          {log.clientProjectFolder !== null ? (
-            <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>
-          ) : (
-            <span className="font-mono tabular-nums">PID {log.clientPid}</span>
-          )}
-        </span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-purple-400/80 text-xs shrink-0">
+                <FileTerminal className="size-3" />
+                {log.clientProjectFolder !== null ? (
+                  <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>
+                ) : (
+                  <span className="font-mono tabular-nums">PID {log.clientPid}</span>
+                )}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              {log.clientCwd !== null
+                ? `PID: ${log.clientPid ?? "?"}  CWD: ${log.clientCwd}`
+                : `Process ID: ${log.clientPid ?? "?"}`}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
 
       {/* Streaming indicator */}
-      {log.streaming && <Radio className="size-3 text-muted-foreground/60 shrink-0" />}
+      {log.streaming && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Radio className="size-3 text-muted-foreground/60 shrink-0" />
+            </TooltipTrigger>
+            <TooltipContent>Request used SSE streaming</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
 
       {/* Spacer */}
       <span className="flex-1 min-w-0" />

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

@@ -3,6 +3,7 @@ import type { JSX } from "react";
 import { useState } from "react";
 import { z } from "zod";
 import { Button } from "../ui/button";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { ResponseView } from "./ResponseView";
@@ -92,12 +93,21 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
           <TabsContent value="modified" className="space-y-4">
             <div>
               <label className="text-sm font-medium mb-2 block">Request Body (JSON)</label>
-              <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}
-              />
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <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}
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Edit the request body before re-sending to the provider
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </div>
 
             {error !== null && error !== "" && (

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo, type JSX } from "react";
 import { ChevronDown, ChevronRight, Loader2 } from "lucide-react";
 import { Badge } from "../ui/badge";
 import { JsonViewer } from "../ui/json-viewer";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import type { StreamingChunk } from "../../proxy/schemas";
 
 export type StreamingChunkSequenceProps = {
@@ -153,22 +154,29 @@ export function StreamingChunkSequence({
 
   return (
     <div className="space-y-1">
-      <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)}
-      >
-        {containerExpanded ? (
-          <ChevronDown className="size-3" />
-        ) : (
-          <ChevronRight className="size-3" />
-        )}
-        <span>Raw SSE Events</span>
-        <Badge variant="outline" className="text-[9px] px-1 py-0 h-4 font-mono ml-1">
-          {logId}
-          {truncated === true ? "+" : ""}
-        </Badge>
-      </button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <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)}
+            >
+              {containerExpanded ? (
+                <ChevronDown className="size-3" />
+              ) : (
+                <ChevronRight className="size-3" />
+              )}
+              <span>Raw SSE Events</span>
+              <Badge variant="outline" className="text-[9px] px-1 py-0 h-4 font-mono ml-1">
+                {logId}
+                {truncated === true ? "+" : ""}
+              </Badge>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>Server-Sent Events streaming chunks from the provider</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       {containerExpanded === true ? (
         <div className="rounded-md border border-border bg-muted/20 overflow-auto max-h-64">