@tonyclaw/agent-inspector 2.0.4 → 2.0.5

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/LogEntryHeader.tsx

@@ -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}

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

@@ -38,14 +38,14 @@ export const StructuredResponseViewAnthropic = memo(function StructuredResponseV
             response.usage.cache_creation_input_tokens !== null &&
             response.usage.cache_creation_input_tokens > 0 && (
               <span className="font-mono tabular-nums text-emerald-400">
-                Cache +{formatTokens(response.usage.cache_creation_input_tokens)}
+                KV Cache +{formatTokens(response.usage.cache_creation_input_tokens)}
               </span>
             )}
           {response.usage.cache_read_input_tokens !== undefined &&
             response.usage.cache_read_input_tokens !== null &&
             response.usage.cache_read_input_tokens > 0 && (
               <span className="font-mono tabular-nums text-purple-400">
-                Cache ~{formatTokens(response.usage.cache_read_input_tokens)}
+                KV Cache ~{formatTokens(response.usage.cache_read_input_tokens)}
               </span>
             )}
         </span>

package/src/components/proxy-viewer/replayComparison.ts

@@ -0,0 +1,131 @@
+export type ReplayMetricValue = number | boolean | null;
+
+export type ReplayMetrics = {
+  status: number | null;
+  elapsedMs: number | null;
+  inputTokens: number | null;
+  outputTokens: number | null;
+  responseBytes: number | null;
+  streaming: boolean;
+};
+
+export type ReplayMetricComparison = {
+  id: "status" | "elapsed" | "input" | "output" | "bytes" | "streaming";
+  label: string;
+  original: ReplayMetricValue;
+  replay: ReplayMetricValue;
+  delta: number | null;
+};
+
+type JsonObject = Record<string, unknown>;
+
+function isJsonObject(value: unknown): value is JsonObject {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function byteLength(value: string | null | undefined): number | null {
+  if (value === null || value === undefined) return null;
+  return new TextEncoder().encode(value).length;
+}
+
+export function readRequestModel(body: string): string | null {
+  try {
+    const parsed: unknown = JSON.parse(body);
+    if (!isJsonObject(parsed)) return null;
+    const model = parsed["model"];
+    return typeof model === "string" && model.length > 0 ? model : null;
+  } catch {
+    return null;
+  }
+}
+
+export function replaceRequestModel(
+  body: string,
+  model: string,
+): { body: string; error: string | null } {
+  try {
+    const parsed: unknown = JSON.parse(body);
+    if (!isJsonObject(parsed)) {
+      return { body, error: "Request body must be a JSON object." };
+    }
+    return {
+      body: JSON.stringify({ ...parsed, model }, null, 2),
+      error: null,
+    };
+  } catch {
+    return { body, error: "Request body must be valid JSON before changing the replay model." };
+  }
+}
+
+export function buildReplayMetrics(input: {
+  status: number | null | undefined;
+  elapsedMs: number | null | undefined;
+  inputTokens: number | null | undefined;
+  outputTokens: number | null | undefined;
+  responseText: string | null | undefined;
+  streaming: boolean | null | undefined;
+}): ReplayMetrics {
+  return {
+    status: input.status ?? null,
+    elapsedMs: input.elapsedMs ?? null,
+    inputTokens: input.inputTokens ?? null,
+    outputTokens: input.outputTokens ?? null,
+    responseBytes: byteLength(input.responseText),
+    streaming: input.streaming === true,
+  };
+}
+
+function numericDelta(original: number | null, replay: number | null): number | null {
+  if (original === null || replay === null) return null;
+  return replay - original;
+}
+
+export function buildReplayComparisons(
+  original: ReplayMetrics,
+  replay: ReplayMetrics,
+): ReplayMetricComparison[] {
+  return [
+    {
+      id: "status",
+      label: "Status",
+      original: original.status,
+      replay: replay.status,
+      delta: numericDelta(original.status, replay.status),
+    },
+    {
+      id: "elapsed",
+      label: "Elapsed",
+      original: original.elapsedMs,
+      replay: replay.elapsedMs,
+      delta: numericDelta(original.elapsedMs, replay.elapsedMs),
+    },
+    {
+      id: "input",
+      label: "Input",
+      original: original.inputTokens,
+      replay: replay.inputTokens,
+      delta: numericDelta(original.inputTokens, replay.inputTokens),
+    },
+    {
+      id: "output",
+      label: "Output",
+      original: original.outputTokens,
+      replay: replay.outputTokens,
+      delta: numericDelta(original.outputTokens, replay.outputTokens),
+    },
+    {
+      id: "bytes",
+      label: "Bytes",
+      original: original.responseBytes,
+      replay: replay.responseBytes,
+      delta: numericDelta(original.responseBytes, replay.responseBytes),
+    },
+    {
+      id: "streaming",
+      label: "Stream",
+      original: original.streaming,
+      replay: replay.streaming,
+      delta: null,
+    },
+  ];
+}