@tonyclaw/agent-inspector 2.1.13 → 2.1.14

package/src/components/proxy-viewer/anatomy/sessionContextSummary.ts

@@ -46,6 +46,32 @@ type SummaryAccumulator = {
   peak: SessionContextSnapshot;
 };
 
+type SnapshotCacheEntry = {
+  id: number;
+  rawRequestBody: string | null;
+  inputTokens: number | null;
+  model: string | null;
+  path: string;
+  apiFormat: CapturedLog["apiFormat"];
+  timestamp: string;
+  providersSignature: string;
+  snapshot: SessionContextSnapshot | null;
+};
+
+const snapshotCache = new WeakMap<CapturedLog, SnapshotCacheEntry>();
+
+function providerSignature(providers: readonly ProviderConfig[]): string {
+  return providers
+    .map((provider) => {
+      const metadata =
+        provider.modelMetadata
+          ?.map((entry) => `${entry.model}:${String(entry.contextWindow ?? "")}`)
+          .join(",") ?? "";
+      return `${provider.id}:${provider.updatedAt}:${provider.models.join(",")}:${metadata}`;
+    })
+    .join("|");
+}
+
 function parseRequestBody(rawBody: string | null): unknown | null {
   if (rawBody === null) return null;
   try {
@@ -104,6 +130,41 @@ function snapshotFromLog(
   };
 }
 
+function cachedSnapshotFromLog(
+  log: CapturedLog,
+  providers: readonly ProviderConfig[],
+  providersSignature: string,
+): SessionContextSnapshot | null {
+  const cached = snapshotCache.get(log);
+  if (
+    cached !== undefined &&
+    cached.id === log.id &&
+    cached.rawRequestBody === log.rawRequestBody &&
+    cached.inputTokens === log.inputTokens &&
+    cached.model === log.model &&
+    cached.path === log.path &&
+    cached.apiFormat === log.apiFormat &&
+    cached.timestamp === log.timestamp &&
+    cached.providersSignature === providersSignature
+  ) {
+    return cached.snapshot;
+  }
+
+  const snapshot = snapshotFromLog(log, providers);
+  snapshotCache.set(log, {
+    id: log.id,
+    rawRequestBody: log.rawRequestBody,
+    inputTokens: log.inputTokens,
+    model: log.model,
+    path: log.path,
+    apiFormat: log.apiFormat,
+    timestamp: log.timestamp,
+    providersSignature,
+    snapshot,
+  });
+  return snapshot;
+}
+
 function isHigherPeak(candidate: SessionContextSnapshot, current: SessionContextSnapshot): boolean {
   if (candidate.usagePercent !== null && current.usagePercent !== null) {
     return candidate.usagePercent > current.usagePercent;
@@ -149,15 +210,26 @@ function trendPercent(
   return (latest.usagePercent - first.usagePercent) * 100;
 }
 
+function logsInAscendingIdOrder(logs: readonly CapturedLog[]): readonly CapturedLog[] {
+  for (let index = 1; index < logs.length; index++) {
+    const previous = logs[index - 1];
+    const current = logs[index];
+    if (previous === undefined || current === undefined) continue;
+    if (previous.id > current.id) return [...logs].sort((left, right) => left.id - right.id);
+  }
+  return logs;
+}
+
 export function buildSessionContextSummary(
   logs: readonly CapturedLog[],
   providers: readonly ProviderConfig[] = [],
 ): SessionContextSummary {
-  const sortedLogs = [...logs].sort((left, right) => left.id - right.id);
+  const sortedLogs = logsInAscendingIdOrder(logs);
+  const providersSignature = providerSignature(providers);
   const byModel = new Map<string, SummaryAccumulator>();
 
   for (const log of sortedLogs) {
-    const snapshot = snapshotFromLog(log, providers);
+    const snapshot = cachedSnapshotFromLog(log, providers, providersSignature);
     if (snapshot === null) continue;
 
     const existing = byModel.get(snapshot.model);

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

@@ -1,12 +1,12 @@
 import { Brain, ChevronDown, ChevronRight, Terminal } from "lucide-react";
-import { type JSX, memo, useState } from "react";
+import { type JSX, memo, Suspense, useState } from "react";
 import type { ResponseContentBlockType } from "../../../../contracts/anthropic";
 import { AnswerMarkdown } from "../../AnswerMarkdown";
 import { Badge } from "../../../ui/badge";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../ui/collapsible";
-import { JsonViewer } from "../../../ui/json-viewer";
 import { safeJsonValue } from "../../../ui/json-viewer-bulk";
 import { ScrollArea } from "../../../ui/scroll-area";
+import { LazyJsonViewer } from "../../lazy";
 import { extractThinkingFromContent } from "./thinkingExtract";
 
 function assertNever(_value: never): JSX.Element {
@@ -121,11 +121,17 @@ export const ToolUseBlock = memo(function ToolUseBlock({
           )}
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <div className="px-3 pb-2">
-            <ScrollArea className="max-h-[60vh]">
-              <JsonViewer data={safeJsonValue(input)} defaultExpandDepth={0} />
-            </ScrollArea>
-          </div>
+          {open && (
+            <div className="px-3 pb-2">
+              <ScrollArea className="max-h-[60vh]">
+                <Suspense
+                  fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}
+                >
+                  <LazyJsonViewer data={safeJsonValue(input)} defaultExpandDepth={0} />
+                </Suspense>
+              </ScrollArea>
+            </div>
+          )}
         </CollapsibleContent>
       </div>
     </Collapsible>

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

@@ -1,12 +1,12 @@
 import type { JSX } from "react";
 import type { ApiFormat } from "../../../contracts";
 import type { AnthropicResponse } from "../../../contracts/anthropic";
-import type { OpenAIResponse } from "../../../contracts/openai";
+import type { OpenAIResponse, OpenAIResponsesResponse } from "../../../contracts/openai";
 import { StructuredResponseViewAnthropic } from "./anthropic/ResponseView";
-import { OpenAIResponseView } from "./openai/ResponseView";
+import { OpenAIResponseView, OpenAIResponsesResponseView } from "./openai/ResponseView";
 
 export { StructuredResponseViewAnthropic } from "./anthropic/ResponseView";
-export { OpenAIResponseView } from "./openai/ResponseView";
+export { OpenAIResponseView, OpenAIResponsesResponseView } from "./openai/ResponseView";
 export { ResponseContentBlockRenderer } from "./anthropic/ContentBlocks";
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -17,6 +17,10 @@ function isOpenAIResponse(response: unknown): response is OpenAIResponse {
   return isRecord(response) && response.object === "chat.completion";
 }
 
+function isOpenAIResponsesResponse(response: unknown): response is OpenAIResponsesResponse {
+  return isRecord(response) && response.object === "response";
+}
+
 function isAnthropicResponse(response: unknown): response is AnthropicResponse {
   return isRecord(response) && response.type === "message" && Array.isArray(response.content);
 }
@@ -28,6 +32,9 @@ export function formatViewFor(
   if (apiFormat === "openai" && isOpenAIResponse(response)) {
     return <OpenAIResponseView response={response} />;
   }
+  if (apiFormat === "openai" && isOpenAIResponsesResponse(response)) {
+    return <OpenAIResponsesResponseView response={response} />;
+  }
   if (apiFormat === "anthropic" && isAnthropicResponse(response)) {
     return <StructuredResponseViewAnthropic response={response} />;
   }

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

@@ -1,10 +1,14 @@
 import { StopCircle, Terminal, Zap } from "lucide-react";
-import { memo, useState, type JSX } from "react";
-import type { OpenAIResponse, OpenAIToolCall } from "../../../../contracts/openai";
+import { memo, Suspense, useState, type JSX } from "react";
+import type {
+  OpenAIResponse,
+  OpenAIResponsesResponse,
+  OpenAIToolCall,
+} from "../../../../contracts/openai";
+import { safeGetOwnProperty } from "../../../../lib/objectUtils";
 import { formatTokens } from "../../../../lib/utils";
 import { AnswerMarkdown } from "../../AnswerMarkdown";
 import { Badge } from "../../../ui/badge";
-import { JsonViewer } from "../../../ui/json-viewer";
 import { safeJsonValue } from "../../../ui/json-viewer-bulk";
 import { ScrollArea } from "../../../ui/scroll-area";
 import { Separator } from "../../../ui/separator";
@@ -12,6 +16,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../ui
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { ThinkingBlock } from "../anthropic/ContentBlocks";
 import { extractThinkingFromContent } from "../anthropic/thinkingExtract";
+import { LazyJsonViewer } from "../../lazy";
 
 // Re-export for use in other components
 export { extractThinkingFromContent } from "../anthropic/thinkingExtract";
@@ -34,7 +39,7 @@ function parseToolArguments(raw: string | undefined): unknown {
 function OpenAIToolCallBlock({ call }: { call: OpenAIToolCall }): JSX.Element {
   const [open, setOpen] = useState(false);
   const name = call.function.name ?? "(unnamed tool)";
-  const parsed = parseToolArguments(call.function.arguments);
+  const parsed = open ? parseToolArguments(call.function.arguments) : {};
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
@@ -57,19 +62,128 @@ function OpenAIToolCallBlock({ call }: { call: OpenAIToolCall }): JSX.Element {
           )}
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <div className="px-3 pb-2">
-            <ScrollArea className="max-h-[60vh]">
-              {parsed === null ? (
-                // JSON.parse failed — show the raw string so the user can
-                // still see what the model tried to call.
-                <pre className="font-mono text-xs whitespace-pre-wrap break-words text-rose-300/90">
-                  {call.function.arguments}
-                </pre>
-              ) : (
-                <JsonViewer data={safeJsonValue(parsed)} defaultExpandDepth={0} />
-              )}
-            </ScrollArea>
-          </div>
+          {open && (
+            <div className="px-3 pb-2">
+              <ScrollArea className="max-h-[60vh]">
+                {parsed === null ? (
+                  // JSON.parse failed — show the raw string so the user can
+                  // still see what the model tried to call.
+                  <pre className="font-mono text-xs whitespace-pre-wrap break-words text-rose-300/90">
+                    {call.function.arguments}
+                  </pre>
+                ) : (
+                  <Suspense
+                    fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}
+                  >
+                    <LazyJsonViewer data={safeJsonValue(parsed)} defaultExpandDepth={0} />
+                  </Suspense>
+                )}
+              </ScrollArea>
+            </div>
+          )}
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+type ResponsesFunctionCall = {
+  id: string | null;
+  callId: string | null;
+  name: string;
+  argumentsText: string;
+  status: string | null;
+};
+
+function extractResponsesOutputText(response: OpenAIResponsesResponse): string {
+  if (response.output_text !== undefined && response.output_text.length > 0) {
+    return response.output_text;
+  }
+  const parts: string[] = [];
+  for (const outputItem of response.output ?? []) {
+    if (safeGetOwnProperty(outputItem, "type") !== "message") continue;
+    const content = safeGetOwnProperty(outputItem, "content");
+    if (!Array.isArray(content)) continue;
+    for (const contentPart of content) {
+      const type = safeGetOwnProperty(contentPart, "type");
+      const text = safeGetOwnProperty(contentPart, "text");
+      if ((type === "output_text" || type === "text") && typeof text === "string") {
+        parts.push(text);
+      }
+    }
+  }
+  return parts.join("\n");
+}
+
+function extractResponsesFunctionCalls(response: OpenAIResponsesResponse): ResponsesFunctionCall[] {
+  const calls: ResponsesFunctionCall[] = [];
+  for (const outputItem of response.output ?? []) {
+    if (safeGetOwnProperty(outputItem, "type") !== "function_call") continue;
+    const name = safeGetOwnProperty(outputItem, "name");
+    if (typeof name !== "string" || name.length === 0) continue;
+    const id = safeGetOwnProperty(outputItem, "id");
+    const callId = safeGetOwnProperty(outputItem, "call_id");
+    const args = safeGetOwnProperty(outputItem, "arguments");
+    const status = safeGetOwnProperty(outputItem, "status");
+    calls.push({
+      id: typeof id === "string" && id.length > 0 ? id : null,
+      callId: typeof callId === "string" && callId.length > 0 ? callId : null,
+      name,
+      argumentsText: typeof args === "string" ? args : "",
+      status: typeof status === "string" && status.length > 0 ? status : null,
+    });
+  }
+  return calls;
+}
+
+function ResponsesFunctionCallBlock({ call }: { call: ResponsesFunctionCall }): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const parsed = open ? parseToolArguments(call.argumentsText) : {};
+  const identity = call.callId ?? call.id;
+
+  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">
+          <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}
+          </Badge>
+          {identity !== null && (
+            <span className="text-[10px] font-mono text-muted-foreground/60 truncate">
+              {identity}
+            </span>
+          )}
+          {call.status !== null && (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-4 font-mono">
+              {call.status}
+            </Badge>
+          )}
+          <span className="flex-1" />
+          {open ? (
+            <ChevronDown className="size-3 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="size-3 text-muted-foreground" />
+          )}
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          {open && (
+            <div className="px-3 pb-2">
+              <ScrollArea className="max-h-[60vh]">
+                {parsed === null ? (
+                  <pre className="font-mono text-xs whitespace-pre-wrap break-words text-rose-300/90">
+                    {call.argumentsText}
+                  </pre>
+                ) : (
+                  <Suspense
+                    fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}
+                  >
+                    <LazyJsonViewer data={safeJsonValue(parsed)} defaultExpandDepth={0} />
+                  </Suspense>
+                )}
+              </ScrollArea>
+            </div>
+          )}
         </CollapsibleContent>
       </div>
     </Collapsible>
@@ -164,3 +278,57 @@ export const OpenAIResponseView = memo(function OpenAIResponseView({
     </div>
   );
 });
+
+export const OpenAIResponsesResponseView = memo(function OpenAIResponsesResponseView({
+  response,
+}: {
+  response: OpenAIResponsesResponse;
+}): JSX.Element {
+  const text = extractResponsesOutputText(response);
+  const calls = extractResponsesFunctionCalls(response);
+  const status = response.status ?? null;
+  const inputTokens = response.usage?.input_tokens ?? 0;
+  const outputTokens = response.usage?.output_tokens ?? 0;
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 flex-wrap">
+        {response.model !== undefined && response.model.length > 0 && (
+          <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-mono">
+            {response.model}
+          </Badge>
+        )}
+
+        {status !== null && (
+          <Badge
+            variant="outline"
+            className="text-[10px] px-1.5 py-0 h-5 font-mono flex items-center gap-1"
+          >
+            <StopCircle className="size-2.5" />
+            {status}
+          </Badge>
+        )}
+
+        <span className="flex items-center gap-1 text-muted-foreground text-xs">
+          <Zap className="size-3" />
+          <span className="font-mono tabular-nums">
+            {formatTokens(inputTokens)} in / {formatTokens(outputTokens)} out
+          </span>
+        </span>
+      </div>
+
+      <Separator className="opacity-50" />
+
+      <div className="space-y-2">
+        {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} />
+        ))}
+        {text.length === 0 && calls.length === 0 && (
+          <p className="text-xs text-muted-foreground italic">Empty response content</p>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/components/proxy-viewer/log-formats/openai.ts

@@ -1,4 +1,10 @@
-import { OpenAIRequestSchema, parseOpenAIResponse } from "../../../contracts/openai";
+import {
+  OpenAIRequestSchema,
+  OpenAIResponsesRequestSchema,
+  parseOpenAIResponsesResponse,
+  parseOpenAIResponse,
+} from "../../../contracts/openai";
+import { safeGetOwnProperty } from "../../../lib/objectUtils";
 import type { AnatomySegment } from "../anatomy/types";
 import { countCharacters, estimateTokens } from "../anatomy/tokenEstimate";
 import type { LogFormatAdapter } from "./types";
@@ -16,9 +22,12 @@ function contentToText(content: unknown): string {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const b = block as Record<string, unknown>;
     const type = b.type;
-    if (type === "text" && typeof b.text === "string") {
+    if (
+      (type === "text" || type === "input_text" || type === "output_text") &&
+      typeof b.text === "string"
+    ) {
       parts.push(b.text);
-    } else if (type === "image_url") {
+    } else if (type === "image_url" || type === "input_image") {
       parts.push("[image]");
     }
   }
@@ -60,19 +69,61 @@ function toolsToText(tools: unknown): string {
   const parts: string[] = [];
   for (const tool of tools) {
     if (tool === null || typeof tool !== "object") continue;
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const t = tool as {
-      function?: { name?: unknown; description?: unknown; parameters?: unknown };
-    };
-    const fn = t.function;
-    if (fn === undefined) continue;
-    if (typeof fn.name === "string") parts.push(fn.name);
-    if (typeof fn.description === "string") parts.push(fn.description);
-    if (fn.parameters !== undefined) parts.push(JSON.stringify(fn.parameters));
+    const fn = safeGetOwnProperty(tool, "function");
+    const name = safeGetOwnProperty(fn, "name") ?? safeGetOwnProperty(tool, "name");
+    const description =
+      safeGetOwnProperty(fn, "description") ?? safeGetOwnProperty(tool, "description");
+    const parameters =
+      safeGetOwnProperty(fn, "parameters") ?? safeGetOwnProperty(tool, "parameters");
+    if (typeof name === "string") parts.push(name);
+    if (typeof description === "string") parts.push(description);
+    if (parameters !== undefined) parts.push(JSON.stringify(parameters));
   }
   return parts.join("\n");
 }
 
+function countResponsesInput(input: unknown): number | null {
+  if (typeof input === "string") return input.length > 0 ? 1 : 0;
+  if (Array.isArray(input)) return input.length;
+  if (input === undefined || input === null) return null;
+  return 1;
+}
+
+function responsesInputItemToText(input: unknown): string {
+  if (typeof input === "string") return input;
+  const directText = safeGetOwnProperty(input, "text");
+  if (typeof directText === "string") return directText;
+  const contentText = contentToText(safeGetOwnProperty(input, "content"));
+  if (contentText.length > 0) return contentText;
+  const outputText = contentToText(safeGetOwnProperty(input, "output"));
+  if (outputText.length > 0) return outputText;
+  const argumentsText = safeGetOwnProperty(input, "arguments");
+  return typeof argumentsText === "string" ? argumentsText : "";
+}
+
+function responsesInputRole(input: unknown): AnatomySegment["role"] {
+  const role = safeGetOwnProperty(input, "role");
+  if (role === "system" || role === "user" || role === "assistant" || role === "tool") {
+    return role;
+  }
+  const type = safeGetOwnProperty(input, "type");
+  if (type === "function_call_output") return "tool";
+  if (type === "message") return "user";
+  return "user";
+}
+
+function responsesToolNames(response: unknown): string[] {
+  const output = safeGetOwnProperty(response, "output");
+  if (!Array.isArray(output)) return [];
+  const names: string[] = [];
+  for (const item of output) {
+    if (safeGetOwnProperty(item, "type") !== "function_call") continue;
+    const name = safeGetOwnProperty(item, "name");
+    if (typeof name === "string" && name.length > 0) names.push(name);
+  }
+  return names;
+}
+
 function segment(
   role: AnatomySegment["role"],
   label: string,
@@ -96,7 +147,19 @@ export const openAILogFormatAdapter: LogFormatAdapter = {
     if (rawBody === null) return emptyRequestAnalysis(rawBody);
     try {
       const result = OpenAIRequestSchema.safeParse(JSON.parse(rawBody));
-      if (!result.success) return emptyRequestAnalysis(rawBody);
+      if (!result.success) {
+        const responsesResult = OpenAIResponsesRequestSchema.safeParse(JSON.parse(rawBody));
+        if (!responsesResult.success) return emptyRequestAnalysis(rawBody);
+        return {
+          parsed: responsesResult.data,
+          comparisonValue: responsesResult.data,
+          messageCount: countResponsesInput(responsesResult.data.input),
+          toolCount:
+            responsesResult.data.tools !== undefined && responsesResult.data.tools.length > 0
+              ? responsesResult.data.tools.length
+              : null,
+        };
+      }
       return {
         parsed: result.data,
         comparisonValue: result.data,
@@ -114,7 +177,15 @@ export const openAILogFormatAdapter: LogFormatAdapter = {
   analyzeResponse(responseText) {
     if (responseText === null) return EMPTY_RESPONSE_ANALYSIS;
     const parsed = parseOpenAIResponse(responseText);
-    if (parsed === null) return EMPTY_RESPONSE_ANALYSIS;
+    if (parsed === null) {
+      const responsesParsed = parseOpenAIResponsesResponse(responseText);
+      if (responsesParsed === null) return EMPTY_RESPONSE_ANALYSIS;
+      const toolNames = responsesToolNames(responsesParsed);
+      return {
+        parsed: responsesParsed,
+        toolNames: toolNames.length > 0 ? toolNames : null,
+      };
+    }
     const toolNames =
       parsed.choices[0]?.message?.tool_calls
         ?.map((toolCall) => toolCall.function?.name ?? "")
@@ -132,9 +203,18 @@ export const openAILogFormatAdapter: LogFormatAdapter = {
     // render even when the body shape is slightly off-schema. We only
     // need the top-level `messages` and `tools` arrays.
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const body = parsed as { messages?: unknown; tools?: unknown };
+    const body = parsed as {
+      messages?: unknown;
+      input?: unknown;
+      instructions?: unknown;
+      tools?: unknown;
+    };
     const segments: AnatomySegment[] = [];
 
+    if (typeof body.instructions === "string" && body.instructions.length > 0) {
+      segments.push(segment("system", "instructions", body.instructions, "/instructions"));
+    }
+
     // Promote a leading role: "system" message into a "system" segment.
     // Spec: derive system role from a leading role: "system" message, then
     // a segment per remaining message. We still keep the system message in
@@ -157,6 +237,18 @@ export const openAILogFormatAdapter: LogFormatAdapter = {
       });
     }
 
+    if (!Array.isArray(body.messages)) {
+      if (typeof body.input === "string" && body.input.length > 0) {
+        segments.push(segment("user", "input", body.input, "/input"));
+      } else if (Array.isArray(body.input)) {
+        body.input.forEach((item, index) => {
+          const role = responsesInputRole(item);
+          const text = responsesInputItemToText(item);
+          segments.push(segment(role, `[${index}] ${role}`, text, `/input/${index}`));
+        });
+      }
+    }
+
     if (Array.isArray(body.tools) && body.tools.length > 0) {
       const text = toolsToText(body.tools);
       segments.push(segment("tools", "tools", text, "/tools"));

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

@@ -4,9 +4,12 @@ export const LOG_FOCUS_REQUEST_EVENT = "agent-inspector:focus-log";
 
 export type LogFocusTab = "anatomy" | "request";
 
+export type LogFocusSource = "virtualizer";
+
 export type LogFocusRequest = {
   logId: number;
   tab: LogFocusTab;
+  source?: LogFocusSource;
 };
 
 export function dispatchLogFocusRequest(request: LogFocusRequest): void {
@@ -24,9 +27,19 @@ export function readLogFocusRequest(event: Event): LogFocusRequest | null {
   switch (tab) {
     case "anatomy":
     case "request":
-      return { logId, tab };
+      break;
+    case undefined:
+      break;
+    default:
+      return null;
+  }
+
+  const source = safeGetOwnProperty(detail, "source");
+  switch (source) {
+    case "virtualizer":
+      return { logId, tab: tab ?? "request", source };
     case undefined:
-      return { logId, tab: "request" };
+      return { logId, tab: tab ?? "request" };
     default:
       return null;
   }

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

@@ -144,10 +144,14 @@ function parseAnthropicTool(tool: unknown): RequestToolDefinition | null {
 
 function parseOpenAITool(tool: unknown): RequestToolDefinition | null {
   const fn = safeGetOwnProperty(tool, "function");
-  const name = safeGetOwnProperty(fn, "name");
+  const toolType = safeGetOwnProperty(tool, "type");
+  if (fn === undefined && toolType !== "function") return null;
+  const name = safeGetOwnProperty(fn, "name") ?? safeGetOwnProperty(tool, "name");
   if (typeof name !== "string" || name.length === 0) return null;
-  const description = safeGetOwnProperty(fn, "description");
-  const schema = safeGetOwnProperty(fn, "parameters") ?? null;
+  const description =
+    safeGetOwnProperty(fn, "description") ?? safeGetOwnProperty(tool, "description");
+  const schema =
+    safeGetOwnProperty(fn, "parameters") ?? safeGetOwnProperty(tool, "parameters") ?? null;
   const normalizedDescription = typeof description === "string" ? description : null;
   return {
     name,