@tonyclaw/agent-inspector 2.1.21 → 2.1.23

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;
+};

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

@@ -1,5 +1,5 @@
 import { StopCircle, Terminal, Zap } from "lucide-react";
-import { memo, Suspense, useState, type JSX } from "react";
+import { memo, Suspense, useEffect, useRef, useState, type JSX, type RefObject } from "react";
 import type {
   OpenAIResponse,
   OpenAIResponsesResponse,
@@ -17,6 +17,7 @@ import { ChevronDown, ChevronRight } from "lucide-react";
 import { ThinkingBlock } from "../anthropic/ContentBlocks";
 import { extractThinkingFromContent } from "../anthropic/thinkingExtract";
 import { LazyJsonViewer } from "../../lazy";
+import type { ResponseToolFocus } from "../index";
 
 // Re-export for use in other components
 export { extractThinkingFromContent } from "../anthropic/thinkingExtract";
@@ -36,15 +37,95 @@ function parseToolArguments(raw: string | undefined): unknown {
 /** One collapsible tool_use row, mirroring the Anthropic ToolUseBlock visual
  *  treatment (Terminal icon, soft tool accent, name as a Badge, JSON input in
  *  a scrollable JsonViewer). */
-function OpenAIToolCallBlock({ call }: { call: OpenAIToolCall }): JSX.Element {
+function useToolFocus({
+  toolIndex,
+  toolFocus,
+  setOpen,
+}: {
+  toolIndex: number;
+  toolFocus?: ResponseToolFocus;
+  setOpen: (open: boolean) => void;
+}): RefObject<HTMLButtonElement | null> {
+  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);
+  }, [setOpen, shouldFocus, toolFocus, toolFocus?.toolFocusNonce]);
+
+  return triggerRef;
+}
+
+function OpenAIFunctionCallBlock({
+  name,
+  argumentsText,
+  toolIndex,
+  toolFocus,
+}: {
+  name: string | undefined;
+  argumentsText: string | undefined;
+  toolIndex: number;
+  toolFocus?: ResponseToolFocus;
+}): JSX.Element {
+  const blockRef = useRef<HTMLDivElement | null>(null);
+  const shouldFocus = toolFocus?.focusedToolIndex === toolIndex;
+
+  useEffect(() => {
+    if (!shouldFocus || toolFocus === undefined || toolFocus.toolFocusNonce <= 0) return undefined;
+    const timer = window.setTimeout(() => {
+      const block = blockRef.current;
+      if (block === null) return;
+      block.scrollIntoView({ block: "center", behavior: "smooth" });
+      block.focus({ preventScroll: true });
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [shouldFocus, toolFocus, toolFocus?.toolFocusNonce]);
+
+  return (
+    <div
+      ref={blockRef}
+      tabIndex={-1}
+      className="border border-sky-400/20 rounded-md p-3 bg-muted/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      data-response-tool-index={toolIndex}
+    >
+      <div className="text-xs text-sky-400/80 font-mono mb-1">function_call</div>
+      <div className="font-mono text-xs">
+        <span className="text-foreground/80">{name}</span>
+        <span className="text-muted-foreground">({argumentsText})</span>
+      </div>
+    </div>
+  );
+}
+
+function OpenAIToolCallBlock({
+  call,
+  toolIndex,
+  toolFocus,
+}: {
+  call: OpenAIToolCall;
+  toolIndex: number;
+  toolFocus?: ResponseToolFocus;
+}): JSX.Element {
   const [open, setOpen] = useState(false);
   const name = call.function.name ?? "(unnamed tool)";
   const parsed = open ? parseToolArguments(call.function.arguments) : {};
+  const triggerRef = useToolFocus({ toolIndex, toolFocus, setOpen });
 
   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}
@@ -136,15 +217,27 @@ function extractResponsesFunctionCalls(response: OpenAIResponsesResponse): Respo
   return calls;
 }
 
-function ResponsesFunctionCallBlock({ call }: { call: ResponsesFunctionCall }): JSX.Element {
+function ResponsesFunctionCallBlock({
+  call,
+  toolIndex,
+  toolFocus,
+}: {
+  call: ResponsesFunctionCall;
+  toolIndex: number;
+  toolFocus?: ResponseToolFocus;
+}): JSX.Element {
   const [open, setOpen] = useState(false);
   const parsed = open ? parseToolArguments(call.argumentsText) : {};
   const identity = call.callId ?? call.id;
+  const triggerRef = useToolFocus({ toolIndex, toolFocus, setOpen });
 
   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">
             {call.name}
@@ -192,8 +285,10 @@ function ResponsesFunctionCallBlock({ call }: { call: ResponsesFunctionCall }):
 
 export const OpenAIResponseView = memo(function OpenAIResponseView({
   response,
+  toolFocus,
 }: {
   response: OpenAIResponse;
+  toolFocus?: ResponseToolFocus;
 }): JSX.Element {
   const choice = response.choices[0];
   const message = choice?.message;
@@ -253,16 +348,20 @@ export const OpenAIResponseView = memo(function OpenAIResponseView({
           })()}
         {toolCalls.map((call, i) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: tool_calls is the positionally stable list from the response
-          <OpenAIToolCallBlock key={call.id ?? `tc-${i}`} call={call} />
+          <OpenAIToolCallBlock
+            key={call.id ?? `tc-${i}`}
+            call={call}
+            toolIndex={i}
+            toolFocus={toolFocus}
+          />
         ))}
         {message?.function_call !== null && message?.function_call !== undefined && (
-          <div className="border border-sky-400/20 rounded-md p-3 bg-muted/20">
-            <div className="text-xs text-sky-400/80 font-mono mb-1">function_call</div>
-            <div className="font-mono text-xs">
-              <span className="text-foreground/80">{message.function_call.name}</span>
-              <span className="text-muted-foreground">({message.function_call.arguments})</span>
-            </div>
-          </div>
+          <OpenAIFunctionCallBlock
+            name={message.function_call.name}
+            argumentsText={message.function_call.arguments}
+            toolIndex={toolCalls.length}
+            toolFocus={toolFocus}
+          />
         )}
         {(message?.content === null ||
           message?.content === undefined ||
@@ -281,8 +380,10 @@ export const OpenAIResponseView = memo(function OpenAIResponseView({
 
 export const OpenAIResponsesResponseView = memo(function OpenAIResponsesResponseView({
   response,
+  toolFocus,
 }: {
   response: OpenAIResponsesResponse;
+  toolFocus?: ResponseToolFocus;
 }): JSX.Element {
   const text = extractResponsesOutputText(response);
   const calls = extractResponsesFunctionCalls(response);
@@ -323,7 +424,12 @@ export const OpenAIResponsesResponseView = memo(function OpenAIResponsesResponse
         {text.length > 0 && <AnswerMarkdown text={text} />}
         {calls.map((call, i) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: response output order is stable
-          <ResponsesFunctionCallBlock key={call.callId ?? call.id ?? `call-${i}`} call={call} />
+          <ResponsesFunctionCallBlock
+            key={call.callId ?? call.id ?? `call-${i}`}
+            call={call}
+            toolIndex={i}
+            toolFocus={toolFocus}
+          />
         ))}
         {text.length === 0 && calls.length === 0 && (
           <p className="text-xs text-muted-foreground italic">Empty response content</p>

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

@@ -2,13 +2,14 @@ import { safeGetOwnProperty } from "../../lib/objectUtils";
 
 export const LOG_FOCUS_REQUEST_EVENT = "agent-inspector:focus-log";
 
-export type LogFocusTab = "anatomy" | "request";
+export type LogFocusTab = "anatomy" | "request" | "response";
 
 export type LogFocusSource = "virtualizer";
 
 export type LogFocusRequest = {
   logId: number;
   tab: LogFocusTab;
+  toolCallIndex?: number;
   source?: LogFocusSource;
 };
 
@@ -27,6 +28,7 @@ export function readLogFocusRequest(event: Event): LogFocusRequest | null {
   switch (tab) {
     case "anatomy":
     case "request":
+    case "response":
       break;
     case undefined:
       break;
@@ -35,11 +37,17 @@ export function readLogFocusRequest(event: Event): LogFocusRequest | null {
   }
 
   const source = safeGetOwnProperty(detail, "source");
+  const toolCallIndex = safeGetOwnProperty(detail, "toolCallIndex");
+  const focusRequest =
+    typeof toolCallIndex === "number" && Number.isInteger(toolCallIndex) && toolCallIndex >= 0
+      ? { logId, tab: tab ?? "request", toolCallIndex }
+      : { logId, tab: tab ?? "request" };
+
   switch (source) {
     case "virtualizer":
-      return { logId, tab: tab ?? "request", source };
+      return { ...focusRequest, source };
     case undefined:
-      return { logId, tab: tab ?? "request" };
+      return focusRequest;
     default:
       return null;
   }

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

@@ -181,18 +181,33 @@ function extractOpenAIToolTraceEvents(log: CapturedLog): ToolTraceEvent[] {
   for (const choice of choices) {
     const message = safeGetOwnProperty(choice, "message");
     const toolCalls = safeGetOwnProperty(message, "tool_calls");
-    if (!Array.isArray(toolCalls)) continue;
-    for (const call of toolCalls) {
-      const fn = safeGetOwnProperty(call, "function");
-      const name = safeGetOwnProperty(fn, "name");
-      if (typeof name !== "string" || name.length === 0) continue;
-      const args = safeGetOwnProperty(fn, "arguments");
+    if (Array.isArray(toolCalls)) {
+      for (const call of toolCalls) {
+        const fn = safeGetOwnProperty(call, "function");
+        const name = safeGetOwnProperty(fn, "name");
+        if (typeof name !== "string" || name.length === 0) continue;
+        const args = safeGetOwnProperty(fn, "arguments");
+        events.push({
+          id: `${String(log.id)}-openai-tool-${String(events.length)}`,
+          logId: log.id,
+          index: events.length,
+          provider: "openai",
+          name,
+          argumentsText: copyValue(args),
+          argumentsPreview: previewValue(args),
+        });
+      }
+    }
+    const functionCall = safeGetOwnProperty(message, "function_call");
+    const functionCallName = safeGetOwnProperty(functionCall, "name");
+    if (typeof functionCallName === "string" && functionCallName.length > 0) {
+      const args = safeGetOwnProperty(functionCall, "arguments");
       events.push({
         id: `${String(log.id)}-openai-tool-${String(events.length)}`,
         logId: log.id,
         index: events.length,
         provider: "openai",
-        name,
+        name: functionCallName,
         argumentsText: copyValue(args),
         argumentsPreview: previewValue(args),
       });

package/src/routes/session/$sessionId.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useState, type JSX } from "react";
 import { ProxyViewerContainer } from "../../components/ProxyViewerContainer";
 import { decodeSessionIdFromPath, encodeSessionIdForPath } from "../../lib/sessionUrl";
 
@@ -17,7 +18,32 @@ export const Route = createFileRoute("/session/$sessionId")({
   }),
 });
 
-function SessionViewerRoute(): React.JSX.Element {
+function SessionViewerRoute(): JSX.Element {
   const { sessionId } = Route.useParams();
+  return <ClientOnlySessionViewer sessionId={sessionId} />;
+}
+
+function ClientOnlySessionViewer({ sessionId }: { sessionId: string }): JSX.Element {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <main className="min-h-screen bg-background text-foreground">
+        <div className="mx-auto flex min-h-screen w-full max-w-2xl flex-col justify-center px-6 py-16 text-center">
+          <div className="border border-border bg-card shadow-sm rounded-[8px] px-4 py-8">
+            <p className="text-sm font-medium text-muted-foreground">Loading session data...</p>
+            <p className="mt-3 inline-block max-w-full rounded bg-muted px-3 py-1 font-mono text-xs break-all text-muted-foreground">
+              {sessionId}
+            </p>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
   return <ProxyViewerContainer key={sessionId} initialSessionId={sessionId} />;
 }