@tonyclaw/agent-inspector 2.0.4 → 2.0.6

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

@@ -550,11 +550,13 @@ function SideSummary({ log, side }: { log: CapturedLog; side: "left" | "right" }
       <div className="flex items-center gap-3 text-muted-foreground font-mono">
         {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
           <span className="text-emerald-400">
-            Cache +{formatTokens(log.cacheCreationInputTokens)}
+            KV Cache +{formatTokens(log.cacheCreationInputTokens)}
           </span>
         )}
         {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
-          <span className="text-purple-400">Cache ~{formatTokens(log.cacheReadInputTokens)}</span>
+          <span className="text-purple-400">
+            KV Cache ~{formatTokens(log.cacheReadInputTokens)}
+          </span>
         )}
         <span className="truncate" title={log.timestamp}>
           {log.timestamp}

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

@@ -177,7 +177,7 @@ export const LogEntry = memo(function ({
   const responseCopy = useCopyFeedback(log.responseText);
 
   // Per-tab action bundles consumed by the header. The header renders the
-  // entry whose key matches `activeTab`. Tabs without an entry (Anatomy,
+  // entry whose key matches `activeTab`. Tabs without an entry (Context,
   // Parsed Response) render no header buttons.
   const tabActions: HeaderTabActions = useMemo(
     () => ({
@@ -320,7 +320,7 @@ export const LogEntry = memo(function ({
                   <TabsTrigger value="raw-request">Raw Request</TabsTrigger>
                 )}
                 <TabsTrigger value="request">Request</TabsTrigger>
-                {anatomySegments !== null && <TabsTrigger value="anatomy">Anatomy</TabsTrigger>}
+                {anatomySegments !== null && <TabsTrigger value="anatomy">Context</TabsTrigger>}
                 {viewMode === "full" && <TabsTrigger value="raw">Raw Response</TabsTrigger>}
                 <TabsTrigger value="parsed">Response</TabsTrigger>
               </TabsList>
@@ -359,7 +359,7 @@ export const LogEntry = memo(function ({
                       <RequestDiffContent
                         rawBody={log.rawRequestBody}
                         displayedBody={displayedRequestBody}
-                        emptyLabel="No transformation applied — raw and sent request bodies are identical."
+                        emptyLabel="No transformation applied; raw and sent request bodies are identical."
                       />
                     ) : (
                       <div ref={requestJsonRef}>
@@ -424,7 +424,7 @@ export const LogEntry = memo(function ({
                         <HeadersDiffContent
                           rawHeaders={log.rawHeaders}
                           headers={log.headers}
-                          emptyLabel="No transformation applied — raw and processed headers are identical."
+                          emptyLabel="No transformation applied; raw and processed headers are identical."
                         />
                       ) : log.headers && Object.keys(log.headers).length > 0 ? (
                         <div className="space-y-1 font-mono text-xs">

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

@@ -92,7 +92,7 @@ export type HeaderTabAction = {
 };
 
 /**
- * Tab actions keyed by Tabs value. Tabs without an entry (Anatomy, Parsed
+ * Tab actions keyed by Tabs value. Tabs without an entry (Context, Parsed
  * Response) leave the corresponding key unset, so the header renders no
  * action buttons for them. Typed as a record (rather than a `Partial<...>`
  * union) so the per-tab lookup in the header is type-safe.
@@ -109,14 +109,14 @@ export type LogEntryHeaderProps = {
   onToggle: () => void;
   /** 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.
+   * the corresponding cache span renders as it did before: no arrow.
    */
   cacheTrend?: { creation: CacheTrend | null; read: CacheTrend | null } | null;
   /** Currently-active tab value (matches the `Tabs` value prop). The header
    *  uses this to pick the right entry from `tabActions`. */
   activeTab?: string;
   /** Per-tab Copy + Expand-all actions. Only tabs with an entry will show
-   *  buttons when active. Tabs without an entry (Anatomy, Parsed Response)
+   *  buttons when active. Tabs without an entry (Context, Parsed Response)
    *  render no header buttons. */
   tabActions?: HeaderTabActions;
   /** Re-send this request to the provider. Rendered in the header row when
@@ -264,30 +264,20 @@ export const LogEntryHeader = memo(function ({
         )}
         {/* Cache tokens */}
         {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
-          <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>
+          <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">
+              KV Cache +{formatTokens(log.cacheCreationInputTokens)}
+            </span>
+          </span>
         )}
         {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
-          <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>
+          <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">
+              KV Cache ~{formatTokens(log.cacheReadInputTokens)}
+            </span>
+          </span>
         )}
 
         {/* Message count */}

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

@@ -1,22 +1,31 @@
 import { RotateCcw } from "lucide-react";
 import type { JSX } from "react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { z } from "zod";
+import { useProviders } from "../../lib/useProviders";
 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";
 import type { CapturedLog } from "../../proxy/schemas";
+import {
+  buildReplayComparisons,
+  buildReplayMetrics,
+  readRequestModel,
+  replaceRequestModel,
+  type ReplayMetricComparison,
+  type ReplayMetricValue,
+} from "./replayComparison";
 
 const ReplayResultSchema = z.object({
   success: z.boolean(),
   error: z.string().optional(),
-  responseStatus: z.number().optional(),
-  responseText: z.string().optional(),
-  inputTokens: z.number().optional(),
-  outputTokens: z.number().optional(),
-  elapsedMs: z.number().optional(),
+  responseStatus: z.number().nullable().optional(),
+  responseText: z.string().nullable().optional(),
+  inputTokens: z.number().nullable().optional(),
+  outputTokens: z.number().nullable().optional(),
+  elapsedMs: z.number().nullable().optional(),
   streaming: z.boolean().optional(),
 });
 
@@ -28,7 +37,91 @@ type ReplayDialogProps = {
   onOpenChange: (open: boolean) => void;
 };
 
+type ReplayModelOption = {
+  key: string;
+  providerName: string;
+  model: string;
+};
+
+function formatElapsed(ms: number): string {
+  if (ms < 1000) return `${String(ms)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function formatMetricValue(
+  value: ReplayMetricValue,
+  metricId: ReplayMetricComparison["id"],
+): string {
+  if (value === null) return "-";
+  if (typeof value === "boolean") return value ? "stream" : "non-stream";
+  switch (metricId) {
+    case "elapsed":
+      return formatElapsed(value);
+    case "input":
+    case "output":
+    case "bytes":
+      return value.toLocaleString();
+    case "status":
+      return String(value);
+    case "streaming":
+      return value ? "stream" : "non-stream";
+  }
+}
+
+function formatDelta(delta: number | null, metricId: ReplayMetricComparison["id"]): string {
+  if (delta === null) return "-";
+  const sign = delta > 0 ? "+" : "";
+  switch (metricId) {
+    case "elapsed":
+      return `${sign}${formatElapsed(delta)}`;
+    case "input":
+    case "output":
+    case "bytes":
+    case "status":
+      return `${sign}${delta.toLocaleString()}`;
+    case "streaming":
+      return "-";
+  }
+}
+
+function deltaToneClass(delta: number | null): string {
+  if (delta === null || delta === 0) return "text-muted-foreground";
+  if (delta > 0) return "text-amber-400";
+  return "text-emerald-400";
+}
+
+function ReplayComparisonTable({
+  comparisons,
+}: {
+  comparisons: ReplayMetricComparison[];
+}): JSX.Element {
+  return (
+    <div className="overflow-hidden rounded-md border border-border">
+      <div className="grid grid-cols-[1fr_1fr_1fr_1fr] bg-muted/40 px-3 py-2 text-[11px] font-medium text-muted-foreground">
+        <span>Metric</span>
+        <span>Original</span>
+        <span>Replay</span>
+        <span>Delta</span>
+      </div>
+      {comparisons.map((comparison) => (
+        <div
+          key={comparison.id}
+          className="grid grid-cols-[1fr_1fr_1fr_1fr] border-t border-border px-3 py-2 text-xs"
+        >
+          <span className="text-muted-foreground">{comparison.label}</span>
+          <span className="font-mono">{formatMetricValue(comparison.original, comparison.id)}</span>
+          <span className="font-mono">{formatMetricValue(comparison.replay, comparison.id)}</span>
+          <span className={`font-mono ${deltaToneClass(comparison.delta)}`}>
+            {formatDelta(comparison.delta, comparison.id)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JSX.Element {
+  const { providers } = useProviders();
   const [modifiedBody, setModifiedBody] = useState<string>(() => {
     return log.rawRequestBody ?? "{}";
   });
@@ -73,6 +166,55 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
     onOpenChange(false);
   }
 
+  const replayModelOptions = useMemo<ReplayModelOption[]>(() => {
+    const options: ReplayModelOption[] = [];
+    for (const provider of providers) {
+      for (const model of provider.models) {
+        if (model.trim().length === 0) continue;
+        options.push({
+          key: `${provider.id}:${model}`,
+          providerName: provider.name,
+          model,
+        });
+      }
+    }
+    return options;
+  }, [providers]);
+  const currentReplayModel = readRequestModel(modifiedBody) ?? log.model ?? "";
+
+  function handleReplayModelChange(model: string): void {
+    const result = replaceRequestModel(modifiedBody, model);
+    if (result.error !== null) {
+      setError(result.error);
+      return;
+    }
+    setModifiedBody(result.body);
+    setReplayResult(null);
+    setError(null);
+  }
+
+  const originalMetrics = buildReplayMetrics({
+    status: log.responseStatus,
+    elapsedMs: log.elapsedMs,
+    inputTokens: log.inputTokens,
+    outputTokens: log.outputTokens,
+    responseText: log.responseText,
+    streaming: log.streaming,
+  });
+  const replayMetrics =
+    replayResult === null
+      ? null
+      : buildReplayMetrics({
+          status: replayResult.responseStatus,
+          elapsedMs: replayResult.elapsedMs,
+          inputTokens: replayResult.inputTokens,
+          outputTokens: replayResult.outputTokens,
+          responseText: replayResult.responseText,
+          streaming: replayResult.streaming,
+        });
+  const replayComparisons =
+    replayMetrics === null ? [] : buildReplayComparisons(originalMetrics, replayMetrics);
+
   return (
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="max-w-4xl max-h-[85vh] overflow-auto">
@@ -88,9 +230,34 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
             <TabsTrigger value="modified">Modified Request</TabsTrigger>
             <TabsTrigger value="original">Original Response</TabsTrigger>
             {replayResult && <TabsTrigger value="replay">Replay Response</TabsTrigger>}
+            {replayResult && <TabsTrigger value="compare">Compare</TabsTrigger>}
           </TabsList>
 
           <TabsContent value="modified" className="space-y-4">
+            {replayModelOptions.length > 0 && (
+              <div className="grid gap-1.5">
+                <label htmlFor={`replay-model-${String(log.id)}`} className="text-sm font-medium">
+                  Replay target
+                </label>
+                <select
+                  id={`replay-model-${String(log.id)}`}
+                  value={currentReplayModel}
+                  onChange={(event) => handleReplayModelChange(event.currentTarget.value)}
+                  className="h-8 rounded-md border border-input bg-background px-2 text-sm"
+                >
+                  {currentReplayModel === "" && <option value="">Select model</option>}
+                  {currentReplayModel !== "" &&
+                    !replayModelOptions.some((option) => option.model === currentReplayModel) && (
+                      <option value={currentReplayModel}>{currentReplayModel}</option>
+                    )}
+                  {replayModelOptions.map((option) => (
+                    <option key={option.key} value={option.model}>
+                      {option.providerName} / {option.model}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
             <div>
               <label className="text-sm font-medium mb-2 block">Request Body (JSON)</label>
               <TooltipProvider>
@@ -127,6 +294,10 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
               </Button>
             </div>
 
+            {replayResult !== null && (
+              <ReplayComparisonTable comparisons={replayComparisons.slice(0, 4)} />
+            )}
+
             {replayResult && replayResult.success && (
               <Tabs defaultValue="parsed">
                 <TabsList>
@@ -184,7 +355,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
 
           {replayResult && replayResult.success && (
             <TabsContent value="replay">
-              {replayResult.responseText !== null ? (
+              {(replayResult.responseText ?? null) !== null ? (
                 <Tabs defaultValue="parsed">
                   <TabsList>
                     <TabsTrigger value="parsed">Response</TabsTrigger>
@@ -202,7 +373,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
                   </TabsContent>
                   <TabsContent value="raw">
                     <pre className="font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto">
-                      {replayResult.responseText}
+                      {replayResult.responseText ?? ""}
                     </pre>
                   </TabsContent>
                 </Tabs>
@@ -211,6 +382,17 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
               )}
             </TabsContent>
           )}
+
+          {replayResult && (
+            <TabsContent value="compare" className="space-y-3">
+              <ReplayComparisonTable comparisons={replayComparisons} />
+              {replayResult.success ? null : (
+                <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
+                  {replayResult.error ?? "Replay failed"}
+                </div>
+              )}
+            </TabsContent>
+          )}
         </Tabs>
       </DialogContent>
     </Dialog>

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

@@ -148,14 +148,14 @@ export const ResponseView = memo(function ResponseView({
               cacheCreationInputTokens !== undefined &&
               cacheCreationInputTokens > 0 && (
                 <span className="font-mono tabular-nums text-emerald-400">
-                  Cache +{formatTokens(cacheCreationInputTokens)}
+                  KV Cache +{formatTokens(cacheCreationInputTokens)}
                 </span>
               )}
             {cacheReadInputTokens !== null &&
               cacheReadInputTokens !== undefined &&
               cacheReadInputTokens > 0 && (
                 <span className="font-mono tabular-nums text-purple-400">
-                  Cache ~{formatTokens(cacheReadInputTokens)}
+                  KV Cache ~{formatTokens(cacheReadInputTokens)}
                 </span>
               )}
           </span>

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

@@ -1,31 +1,52 @@
 import { type JSX } from "react";
-import { ChevronRight, Wrench } from "lucide-react";
+import { Check, ChevronRight, Copy, Wrench } from "lucide-react";
 import type { ToolTraceEvent } from "./viewerState";
+import { useCopyFeedback } from "./useCopyFeedback";
 
 type ToolTraceEventsProps = {
   events: ToolTraceEvent[];
 };
 
+function ToolTraceEventRow({ event }: { event: ToolTraceEvent }): JSX.Element {
+  const argumentCopy = useCopyFeedback(event.argumentsText);
+  const canCopyArguments = event.argumentsText !== null;
+
+  return (
+    <div
+      key={event.id}
+      className="group/tool-trace flex min-w-0 items-center gap-2 rounded-md border border-border/70 bg-muted/20 px-2.5 py-1.5 text-xs"
+    >
+      <Wrench className="size-3.5 shrink-0 text-sky-400/70" />
+      <span className="font-mono font-semibold text-foreground/80">{event.name}</span>
+      {event.argumentsPreview !== null && (
+        <>
+          <ChevronRight className="size-3 shrink-0 text-muted-foreground/60" />
+          <span className="min-w-0 truncate font-mono text-muted-foreground">
+            {event.argumentsPreview}
+          </span>
+        </>
+      )}
+      {canCopyArguments && (
+        <button
+          type="button"
+          className="ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-background/80 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/tool-trace:opacity-100 group-focus-within/tool-trace:opacity-100"
+          onClick={argumentCopy.copy}
+          aria-label={argumentCopy.copied ? "Copied tool arguments" : "Copy tool arguments"}
+          title={argumentCopy.copied ? "Copied tool arguments" : "Copy tool arguments"}
+        >
+          {argumentCopy.copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+        </button>
+      )}
+    </div>
+  );
+}
+
 export function ToolTraceEvents({ events }: ToolTraceEventsProps): JSX.Element | null {
   if (events.length === 0) return null;
   return (
     <div className="mx-3 mb-2 grid gap-1.5">
       {events.map((event) => (
-        <div
-          key={event.id}
-          className="flex min-w-0 items-center gap-2 rounded-md border border-border/70 bg-muted/20 px-2.5 py-1.5 text-xs"
-        >
-          <Wrench className="size-3.5 shrink-0 text-sky-400/70" />
-          <span className="font-mono font-semibold text-foreground/80">{event.name}</span>
-          {event.argumentsPreview !== null && (
-            <>
-              <ChevronRight className="size-3 shrink-0 text-muted-foreground/60" />
-              <span className="min-w-0 truncate font-mono text-muted-foreground">
-                {event.argumentsPreview}
-              </span>
-            </>
-          )}
-        </div>
+        <ToolTraceEventRow key={event.id} event={event} />
       ))}
     </div>
   );

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

@@ -137,15 +137,27 @@ export const TurnGroup = memo(function TurnGroup({
     };
   }, []);
 
+  const firstLogId = entries[0]?.log.id ?? turnIndex;
+  const turnLabel = `Turn ${String(turnIndex + 1)}`;
+
   return (
     <div
       ref={containerRef}
-      className={cn("border rounded-lg", isPending ? "border-amber-500/10" : "border-transparent")}
+      tabIndex={collapsed ? undefined : 0}
+      role={collapsed ? undefined : "group"}
+      aria-label={collapsed ? undefined : turnLabel}
+      data-nav-id={collapsed ? undefined : `turn-${String(firstLogId)}`}
+      className={cn(
+        "border rounded-lg",
+        isPending ? "border-amber-500/10" : "border-transparent",
+        !collapsed &&
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
+      )}
     >
       {collapsed ? (
         /* ---- Collapsed: dual-crab (+ summary card for multi-log turns) ---- */
         <div
-          data-nav-id={`turn-collapsed-${entries[0]?.log.id ?? turnIndex}`}
+          data-nav-id={`turn-collapsed-${String(firstLogId)}`}
           data-nav-action="expand"
           role="button"
           tabIndex={0}