@tonyclaw/agent-inspector 2.1.22 → 2.1.23

package/.output/server/index.mjs

@@ -38,114 +38,114 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-07-06T08:42:14.499Z",
+    "mtime": "2026-07-06T23:30:24.816Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/CompareDrawer-B-I_z_oJ.js": {
+  "/assets/index-B26q0-ch.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"4bbf-boMYNxH3OYElTxrB6f+S8JpJhEU"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 19391,
-    "path": "../public/assets/CompareDrawer-B-I_z_oJ.js"
-  },
-  "/assets/json-viewer-VR9OOnl8.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"1ae6-q2HRnhbr4RmbtnJRlXqA3AA5pn0"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 6886,
-    "path": "../public/assets/json-viewer-VR9OOnl8.js"
-  },
-  "/assets/index-DFEiGFKE.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"74-qVbgeAxjdS6pAIAlbzvrFevVSso"',
-    "mtime": "2026-07-06T08:42:14.500Z",
+    "etag": '"74-AZvnGEhntbiyIDS+wwwbTZjCuCw"',
+    "mtime": "2026-07-06T23:30:24.817Z",
     "size": 116,
-    "path": "../public/assets/index-DFEiGFKE.js"
+    "path": "../public/assets/index-B26q0-ch.js"
   },
-  "/assets/index-M6p8Q0LA.js": {
+  "/assets/json-viewer-DERQNZRV.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1cd2c-dKmvWl4iX4kQEQiFVvEkD2o9yeo"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 118060,
-    "path": "../public/assets/index-M6p8Q0LA.js"
+    "etag": '"1ae6-A6B2jiKFX+jryATLfM15t7QIsvM"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 6886,
+    "path": "../public/assets/json-viewer-DERQNZRV.js"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-07-06T08:42:14.499Z",
+    "mtime": "2026-07-06T23:30:24.816Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/main-C9gW57P6.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"512fd-Qkx6OXZVaW68qCJzUwcgoV0n85s"',
-    "mtime": "2026-07-06T08:42:14.499Z",
-    "size": 332541,
-    "path": "../public/assets/main-C9gW57P6.js"
+  "/assets/index-CxszCIFm.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"219d3-hGkO4OXmpghyDnxd7KIL9unRxwQ"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 137683,
+    "path": "../public/assets/index-CxszCIFm.css"
   },
-  "/assets/ReplayDialog-ofqVRdc-.js": {
+  "/assets/CompareDrawer-Cvgl_Jmi.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"31d6-1x+H2vdKEwKrpalZioFQypNeHQk"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 12758,
-    "path": "../public/assets/ReplayDialog-ofqVRdc-.js"
+    "etag": '"4bbf-qdrjZBBOyzn/JHMYJ2UAiNDDbFQ"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 19391,
+    "path": "../public/assets/CompareDrawer-Cvgl_Jmi.js"
   },
-  "/assets/index-bXU6y_wh.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"21894-+/BIDNcJdO1E5wKWMCSoJKkp5xY"',
-    "mtime": "2026-07-06T08:42:14.499Z",
-    "size": 137364,
-    "path": "../public/assets/index-bXU6y_wh.css"
+  "/assets/index-BZxLBVYd.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"1cd2c-eSvMM8zbdBG02FS4JJNg0vJ028w"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 118060,
+    "path": "../public/assets/index-BZxLBVYd.js"
   },
-  "/assets/RequestAnatomy-lyPjHWzS.js": {
+  "/assets/RequestAnatomy-CrLSqdiA.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"43f2-dm2JSsxHwTjClZaY75s6pB3OCRE"',
-    "mtime": "2026-07-06T08:42:14.500Z",
+    "etag": '"43f2-YwOCt5e63SibXMhWqzHRxd1nNC8"',
+    "mtime": "2026-07-06T23:30:24.817Z",
     "size": 17394,
-    "path": "../public/assets/RequestAnatomy-lyPjHWzS.js"
+    "path": "../public/assets/RequestAnatomy-CrLSqdiA.js"
   },
-  "/assets/StreamingChunkSequence-CIn2xdVv.js": {
+  "/assets/ReplayDialog-DeEELx0X.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"dd6-1z9xyDwQxM73GFtieH0lBUQMPeo"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 3542,
-    "path": "../public/assets/StreamingChunkSequence-CIn2xdVv.js"
+    "etag": '"31d6-hWOAjkfta2prr+9EmQOXzNOAzTU"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 12758,
+    "path": "../public/assets/ReplayDialog-DeEELx0X.js"
   },
-  "/assets/ResponseView-BL263es5.js": {
+  "/assets/ResponseView-CFIqDL5E.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"3fbb-YhzY74QAmiktBkyeD8ZWACFw+Rc"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 16315,
-    "path": "../public/assets/ResponseView-BL263es5.js"
+    "etag": '"47fa-+VN13C6cvB2BYNKPjLEy9ibIswM"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 18426,
+    "path": "../public/assets/ResponseView-CFIqDL5E.js"
   },
-  "/assets/_sessionId-KmeAKZJw.js": {
+  "/assets/main-BoshTI0W.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"36c-l3ljkLbVkD0313o3NVfJSSh4zLI"',
-    "mtime": "2026-07-06T08:42:14.499Z",
-    "size": 876,
-    "path": "../public/assets/_sessionId-KmeAKZJw.js"
+    "etag": '"512fd-NlLbmALn+PuYHWA4Dj6BVyzFIuM"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 332541,
+    "path": "../public/assets/main-BoshTI0W.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-07-06T08:42:14.499Z",
+    "mtime": "2026-07-06T23:30:24.816Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
+  "/assets/_sessionId-ZuH6-ZX5.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"36c-yfRDDJm0mM1r+nbDh5oXBDpciWQ"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 876,
+    "path": "../public/assets/_sessionId-ZuH6-ZX5.js"
+  },
+  "/assets/StreamingChunkSequence-DSRjbgqb.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"dd6-phWzlhQq/JJk54G5Z2rU0kzp2as"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 3542,
+    "path": "../public/assets/StreamingChunkSequence-DSRjbgqb.js"
+  },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-07-06T08:42:14.500Z",
+    "mtime": "2026-07-06T23:30:24.816Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/ProxyViewerContainer-ygSGJ4EB.js": {
+  "/assets/ProxyViewerContainer-CNLLZq37.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"aec2b-qUHkR4rnnxAag/CXPZQmFBfa3hA"',
-    "mtime": "2026-07-06T08:42:14.500Z",
-    "size": 715819,
-    "path": "../public/assets/ProxyViewerContainer-ygSGJ4EB.js"
+    "etag": '"aece0-rsojOMYS6lexxfh1G0dXZ/InUpE"',
+    "mtime": "2026-07-06T23:30:24.817Z",
+    "size": 716e3,
+    "path": "../public/assets/ProxyViewerContainer-CNLLZq37.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/agent-inspector",
-  "version": "2.1.22",
+  "version": "2.1.23",
   "type": "module",
   "description": "Agent observability and knowledge capture layer for AI coding tools.",
   "license": "MIT",

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

@@ -60,6 +60,8 @@ function resolveFocusedTab(tab: LogFocusTab, anatomySegments: AnatomySegment[] |
       return anatomySegments === null ? "request" : "anatomy";
     case "request":
       return "request";
+    case "response":
+      return "parsed";
   }
 }
 
@@ -429,6 +431,8 @@ export const LogEntry = memo(function ({
   const [headersDiff, setHeadersDiff] = useState<boolean>(false);
   const [requestDiff, setRequestDiff] = useState<boolean>(false);
   const [activeTab, setActiveTab] = useState("request");
+  const [focusedToolIndex, setFocusedToolIndex] = useState<number | null>(null);
+  const [toolFocusNonce, setToolFocusNonce] = useState(0);
   const [expandToPath, setExpandToPath] = useState<string | null>(null);
   const [hydratedLog, setHydratedLog] = useState<CapturedLog | null>(null);
   const [bodyHydrationStatus, setBodyHydrationStatus] = useState<BodyHydrationStatus>("idle");
@@ -779,6 +783,10 @@ export const LogEntry = memo(function ({
       if (request.logId !== log.id) return;
       setExpanded(true);
       setActiveTab(resolveFocusedTab(request.tab, anatomySegments));
+      if (request.tab === "response" && request.toolCallIndex !== undefined) {
+        setFocusedToolIndex(request.toolCallIndex);
+        setToolFocusNonce((current) => current + 1);
+      }
     };
 
     window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
@@ -1120,6 +1128,8 @@ export const LogEntry = memo(function ({
                           cacheReadInputTokens={displayLog.cacheReadInputTokens}
                           apiFormat={resolvedFormat}
                           error={displayLog.error}
+                          focusedToolIndex={focusedToolIndex}
+                          toolFocusNonce={toolFocusNonce}
                         />
                       </Suspense>
                     )}

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

@@ -19,6 +19,8 @@ export type ResponseViewProps = {
   apiFormat?: ApiFormat;
   /** SSE error message from streaming response */
   error?: string | null;
+  focusedToolIndex?: number | null;
+  toolFocusNonce?: number;
 };
 
 function getStatusClasses(category: StatusCategory): string {
@@ -74,6 +76,8 @@ export const ResponseView = memo(function ResponseView({
   cacheReadInputTokens,
   apiFormat,
   error,
+  focusedToolIndex = null,
+  toolFocusNonce = 0,
 }: ResponseViewProps): JSX.Element {
   const resolvedFormat = apiFormat ?? "unknown";
   const parsed = useMemo(
@@ -128,7 +132,7 @@ export const ResponseView = memo(function ResponseView({
     return (
       <div className="space-y-2">
         <StatusIndicator status={responseStatus} />
-        {formatViewFor(resolvedFormat, parsed)}
+        {formatViewFor(resolvedFormat, parsed, { focusedToolIndex, toolFocusNonce })}
       </div>
     );
   }

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

@@ -1,52 +1,40 @@
 import { type JSX } from "react";
-import { Check, ChevronRight, Copy, Wrench } from "lucide-react";
+import { Wrench } from "lucide-react";
 import type { ToolTraceEvent } from "./viewerState";
-import { useCopyFeedback } from "./useCopyFeedback";
+import { dispatchLogFocusRequest } from "./logFocus";
 
 type ToolTraceEventsProps = {
   events: ToolTraceEvent[];
 };
 
-function ToolTraceEventRow({ event }: { event: ToolTraceEvent }): JSX.Element {
-  const argumentCopy = useCopyFeedback(event.argumentsText);
-  const canCopyArguments = event.argumentsText !== null;
-
+function ToolTraceEventChip({ event }: { event: ToolTraceEvent }): JSX.Element {
   return (
-    <div
+    <button
+      type="button"
       key={event.id}
-      className="group/tool-trace flex min-w-0 items-center gap-2 rounded-md bg-white/[0.035] px-2.5 py-1.5 text-xs"
+      className="inline-flex min-w-0 items-center gap-1.5 rounded-md bg-white/[0.035] px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-sky-400/[0.08] hover:text-sky-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      onClick={() =>
+        dispatchLogFocusRequest({
+          logId: event.logId,
+          tab: "response",
+          toolCallIndex: event.index,
+        })
+      }
+      aria-label={`Open response tool call ${event.name}`}
+      title={`Open ${event.name} in Response`}
     >
       <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>
+      <span className="min-w-0 truncate font-mono font-semibold">{event.name}</span>
+    </button>
   );
 }
 
 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">
+    <div className="mx-3 mb-2 flex flex-wrap gap-1.5">
       {events.map((event) => (
-        <ToolTraceEventRow key={event.id} event={event} />
+        <ToolTraceEventChip key={event.id} event={event} />
       ))}
     </div>
   );

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

@@ -14,6 +14,7 @@ import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../contracts";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+import { getCrabVariant } from "../ui/crab-variants";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LogEntry } from "./LogEntry";
 import {
@@ -177,6 +178,7 @@ export const TurnGroup = memo(function TurnGroup({
 
   const firstLogId = entries[0]?.log.id ?? turnIndex;
   const turnLabel = `Turn ${String(turnIndex + 1)}`;
+  const CollapsedCrab = useMemo(() => getCrabVariant(firstLogId % 12), [firstLogId]);
   const containmentStyle = useMemo<CSSProperties>(
     () => ({
       contentVisibility: "auto",
@@ -224,16 +226,28 @@ export const TurnGroup = memo(function TurnGroup({
 
           <div className="w-6 shrink-0 flex flex-col items-center pt-1.5 pb-1.5">
             <div className="flex justify-center h-[calc(0.75rem-8px)]" />
-            <span className="size-2 rounded-full bg-cyan-300/45" />
-            <div className="flex-1 flex justify-center min-h-0">
-              <div className="w-px bg-muted-foreground/14 h-full" />
-            </div>
-            <span
+            <CollapsedCrab
               className={cn(
-                "size-2 rounded-full",
-                isComplete ? "bg-amber-300/45" : "bg-muted-foreground/25",
+                "size-3.5",
+                isPending
+                  ? "animate-crab-crawl text-amber-300/80"
+                  : "animate-crab-appear text-emerald-400",
+                isPending
+                  ? "drop-shadow-[0_0_4px_rgba(252,211,77,0.42)]"
+                  : "drop-shadow-[0_0_4px_rgba(52,211,153,0.45)]",
               )}
             />
+            <div className="flex-1 flex justify-center min-h-0">
+              <div className="w-px bg-muted-foreground/14 h-full" />
+            </div>
+            {isComplete && (
+              <CollapsedCrab
+                className={cn(
+                  "size-3.5 animate-crab-settle text-amber-400",
+                  "drop-shadow-[0_0_4px_rgba(251,191,36,0.45)]",
+                )}
+              />
+            )}
           </div>
 
           {/* Summary content - hidden for single-log turns. */}

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

@@ -1,6 +1,7 @@
 import { Brain, ChevronDown, ChevronRight, Terminal } from "lucide-react";
-import { type JSX, memo, Suspense, useState } from "react";
+import { type JSX, memo, Suspense, useEffect, useRef, useState } from "react";
 import type { ResponseContentBlockType } from "../../../../contracts/anthropic";
+import type { ResponseToolFocus } from "../index";
 import { AnswerMarkdown } from "../../AnswerMarkdown";
 import { Badge } from "../../../ui/badge";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../ui/collapsible";
@@ -99,16 +100,37 @@ export const ThinkingBlock = memo(function ThinkingBlock({
 export const ToolUseBlock = memo(function ToolUseBlock({
   name,
   input,
+  toolIndex,
+  toolFocus,
 }: {
   name: string;
   input: Record<string, unknown>;
+  toolIndex: number;
+  toolFocus?: ResponseToolFocus;
 }): JSX.Element {
   const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const shouldFocus = toolFocus?.focusedToolIndex === toolIndex;
+
+  useEffect(() => {
+    if (!shouldFocus || toolFocus === undefined || toolFocus.toolFocusNonce <= 0) return undefined;
+    setOpen(true);
+    const timer = window.setTimeout(() => {
+      const trigger = triggerRef.current;
+      if (trigger === null) return;
+      trigger.scrollIntoView({ block: "center", behavior: "smooth" });
+      trigger.focus({ preventScroll: true });
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [shouldFocus, toolFocus, toolFocus?.toolFocusNonce]);
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="border-l-2 border-sky-400/25 my-1">
-        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-sky-400/[0.04] transition-colors rounded-r-sm group">
+      <div className="border-l-2 border-sky-400/25 my-1" data-response-tool-index={toolIndex}>
+        <CollapsibleTrigger
+          ref={triggerRef}
+          className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-sky-400/[0.04] transition-colors rounded-r-sm group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
           <Terminal className="size-3.5 text-sky-400/70 shrink-0" />
           <Badge variant="outline" className="text-[10px] font-mono px-1.5 py-0 h-4">
             {name}
@@ -140,8 +162,12 @@ export const ToolUseBlock = memo(function ToolUseBlock({
 
 export const ResponseContentBlockRenderer = memo(function ResponseContentBlockRenderer({
   block,
+  toolIndex,
+  toolFocus,
 }: {
   block: ResponseContentBlockType;
+  toolIndex?: number;
+  toolFocus?: ResponseToolFocus;
 }): JSX.Element {
   switch (block.type) {
     case "text":
@@ -150,7 +176,14 @@ export const ResponseContentBlockRenderer = memo(function ResponseContentBlockRe
     case "think":
       return <ThinkingBlock thinking={block.thinking} />;
     case "tool_use":
-      return <ToolUseBlock name={block.name} input={block.input} />;
+      return (
+        <ToolUseBlock
+          name={block.name}
+          input={block.input}
+          toolIndex={toolIndex ?? 0}
+          toolFocus={toolFocus}
+        />
+      );
     default:
       return assertNever(block);
   }

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

@@ -4,13 +4,18 @@ import type { AnthropicResponse } from "../../../../contracts/anthropic";
 import { formatTokens } from "../../../../lib/utils";
 import { Badge } from "../../../ui/badge";
 import { Separator } from "../../../ui/separator";
+import type { ResponseToolFocus } from "../index";
 import { ResponseContentBlockRenderer } from "./ContentBlocks";
 
 export const StructuredResponseViewAnthropic = memo(function StructuredResponseViewAnthropic({
   response,
+  toolFocus,
 }: {
   response: AnthropicResponse;
+  toolFocus?: ResponseToolFocus;
 }): JSX.Element {
+  let toolIndex = 0;
+
   return (
     <div className="space-y-3">
       <div className="flex items-center gap-2 flex-wrap">
@@ -54,9 +59,18 @@ export const StructuredResponseViewAnthropic = memo(function StructuredResponseV
       <Separator className="opacity-50" />
 
       <div className="space-y-2">
-        {response.content.map((block, i) => (
-          <ResponseContentBlockRenderer key={i} block={block} />
-        ))}
+        {response.content.map((block, i) => {
+          const currentToolIndex = block.type === "tool_use" ? toolIndex : undefined;
+          if (block.type === "tool_use") toolIndex += 1;
+          return (
+            <ResponseContentBlockRenderer
+              key={i}
+              block={block}
+              toolIndex={currentToolIndex}
+              toolFocus={toolFocus}
+            />
+          );
+        })}
         {response.content.length === 0 && (
           <p className="text-xs text-muted-foreground italic">Empty response content</p>
         )}

package/src/components/proxy-viewer/formats/index.tsx

@@ -28,15 +28,20 @@ function isAnthropicResponse(response: unknown): response is AnthropicResponse {
 export function formatViewFor(
   apiFormat: ApiFormat | undefined,
   response: unknown,
+  toolFocus?: ResponseToolFocus,
 ): JSX.Element | null {
   if (apiFormat === "openai" && isOpenAIResponse(response)) {
-    return <OpenAIResponseView response={response} />;
+    return <OpenAIResponseView response={response} toolFocus={toolFocus} />;
   }
   if (apiFormat === "openai" && isOpenAIResponsesResponse(response)) {
-    return <OpenAIResponsesResponseView response={response} />;
+    return <OpenAIResponsesResponseView response={response} toolFocus={toolFocus} />;
   }
   if (apiFormat === "anthropic" && isAnthropicResponse(response)) {
-    return <StructuredResponseViewAnthropic response={response} />;
+    return <StructuredResponseViewAnthropic response={response} toolFocus={toolFocus} />;
   }
   return null;
 }
+export type ResponseToolFocus = {
+  focusedToolIndex: number | null;
+  toolFocusNonce: number;
+};