@tonyclaw/agent-inspector 3.1.7 → 3.1.9

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

@@ -1,6 +1,6 @@
 import { AlertTriangle, Zap } from "lucide-react";
 import type { JSX } from "react";
-import { memo } from "react";
+import { memo, useEffect, useState } from "react";
 import { useMemo } from "react";
 import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
 import type { ApiFormat } from "../../contracts";
@@ -66,6 +66,8 @@ function MarkdownFallbackView({ text }: { text: string }): JSX.Element {
   return <AnswerMarkdown text={text} />;
 }
 
+const RESPONSE_AUTO_PARSE_MAX_CHARS = 1024 * 1024;
+
 // eslint-disable-next-line @typescript-eslint/no-shadow -- named function gives React DevTools a readable displayName
 export const ResponseView = memo(function ResponseView({
   responseText,
@@ -81,11 +83,23 @@ export const ResponseView = memo(function ResponseView({
   toolFocusNonce = 0,
 }: ResponseViewProps): JSX.Element {
   const resolvedFormat = apiFormat ?? "unknown";
+  const [parseLargeResponse, setParseLargeResponse] = useState(false);
+  const shouldDeferStructuredParse =
+    responseText !== null && responseText.length > RESPONSE_AUTO_PARSE_MAX_CHARS;
+  const responseTextForStructuredParse =
+    responseText === null || (shouldDeferStructuredParse && !parseLargeResponse)
+      ? null
+      : responseText;
   const parsed = useMemo(
-    () => getLogFormatAdapter(resolvedFormat).analyzeResponse(responseText).parsed,
-    [resolvedFormat, responseText],
+    () =>
+      getLogFormatAdapter(resolvedFormat).analyzeResponse(responseTextForStructuredParse).parsed,
+    [resolvedFormat, responseTextForStructuredParse],
   );
 
+  useEffect(() => {
+    setParseLargeResponse(false);
+  }, [responseText]);
+
   if (responseText === null && error === undefined) {
     return (
       <div className="flex items-center gap-2 py-3">
@@ -166,6 +180,22 @@ export const ResponseView = memo(function ResponseView({
           </span>
         )}
       </div>
+      {shouldDeferStructuredParse && !parseLargeResponse && (
+        <div className="rounded-md border border-amber-300/20 bg-amber-300/[0.06] px-3 py-2 text-xs text-muted-foreground">
+          <div className="mb-2">
+            This response is {responseText.length.toLocaleString()} characters, so structured
+            parsing is deferred to keep the UI responsive. Response and SSE remain separate; open
+            SSE for the event stream.
+          </div>
+          <button
+            type="button"
+            className="rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            onClick={() => setParseLargeResponse(true)}
+          >
+            Parse full structured response
+          </button>
+        </div>
+      )}
       <MarkdownFallbackView text={responseText ?? ""} />
     </div>
   );

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

@@ -29,6 +29,10 @@ const StreamingChunksResponseSchema = z.object({
 });
 
 const CHUNK_FETCH_TIMEOUT_MS = 10_000;
+const INITIAL_VISIBLE_GROUPS = 80;
+const GROUP_PAGE_SIZE = 80;
+const INITIAL_VISIBLE_CHUNKS_PER_GROUP = 40;
+const CHUNK_PAGE_SIZE = 40;
 
 // eslint-disable-next-line @typescript-eslint/no-shadow -- named function gives React DevTools a readable displayName
 export const StreamingChunkSequence = memo(function StreamingChunkSequence({
@@ -38,8 +42,18 @@ export const StreamingChunkSequence = memo(function StreamingChunkSequence({
   const [containerExpanded, setContainerExpanded] = useState(false);
   const [chunkState, setChunkState] = useState<ChunkState>({ status: "idle" });
   const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set());
+  const [visibleGroupCount, setVisibleGroupCount] = useState(INITIAL_VISIBLE_GROUPS);
+  const [visibleChunksByGroup, setVisibleChunksByGroup] = useState<Map<number, number>>(new Map());
   const loadedLogIdRef = useRef<number | null>(null);
 
+  useEffect(() => {
+    setExpandedIndices(new Set());
+    setVisibleGroupCount(INITIAL_VISIBLE_GROUPS);
+    setVisibleChunksByGroup(new Map());
+    setChunkState({ status: "idle" });
+    loadedLogIdRef.current = null;
+  }, [logId]);
+
   useEffect(() => {
     if (!containerExpanded) return;
     if (loadedLogIdRef.current === logId) return;
@@ -90,6 +104,9 @@ export const StreamingChunkSequence = memo(function StreamingChunkSequence({
       .sort((a, b) => a.index - b.index);
   }, [chunkState]);
 
+  const visibleGroups = groups.slice(0, visibleGroupCount);
+  const hiddenGroupCount = Math.max(groups.length - visibleGroups.length, 0);
+
   const toggleIndex = (index: number) => {
     setExpandedIndices((prev) => {
       const next = new Set(prev);
@@ -102,6 +119,19 @@ export const StreamingChunkSequence = memo(function StreamingChunkSequence({
     });
   };
 
+  const showMoreGroups = () => {
+    setVisibleGroupCount((count) => Math.min(count + GROUP_PAGE_SIZE, groups.length));
+  };
+
+  const showMoreChunks = (group: ChunkGroup) => {
+    setVisibleChunksByGroup((prev) => {
+      const next = new Map(prev);
+      const current = next.get(group.index) ?? INITIAL_VISIBLE_CHUNKS_PER_GROUP;
+      next.set(group.index, Math.min(current + CHUNK_PAGE_SIZE, group.chunks.length));
+      return next;
+    });
+  };
+
   function renderBody(): JSX.Element {
     if (chunkState.status === "idle" || chunkState.status === "loading") {
       return (
@@ -121,8 +151,12 @@ export const StreamingChunkSequence = memo(function StreamingChunkSequence({
         <div className="text-[10px] text-muted-foreground font-mono mb-2">
           {groups.length} index group{groups.length !== 1 ? "s" : ""} available
         </div>
-        {groups.map((group) => {
+        {visibleGroups.map((group) => {
           const isExpanded = expandedIndices.has(group.index);
+          const visibleChunkCount =
+            visibleChunksByGroup.get(group.index) ?? INITIAL_VISIBLE_CHUNKS_PER_GROUP;
+          const visibleChunks = group.chunks.slice(0, visibleChunkCount);
+          const hiddenChunkCount = Math.max(group.chunks.length - visibleChunks.length, 0);
           return (
             <div key={group.index} className="rounded border border-border bg-background">
               <button
@@ -144,8 +178,11 @@ export const StreamingChunkSequence = memo(function StreamingChunkSequence({
               </button>
               {isExpanded && (
                 <div className="px-2 pb-2 space-y-1">
-                  {group.chunks.map((chunk) => (
-                    <div key={chunk.index} className="rounded border border-border bg-muted/20 p-2">
+                  {visibleChunks.map((chunk, chunkOrdinal) => (
+                    <div
+                      key={`${chunk.index}:${chunk.timestamp}:${chunk.type}:${chunkOrdinal}`}
+                      className="rounded border border-border bg-muted/20 p-2"
+                    >
                       <div className="flex items-center gap-2 mb-1">
                         <span className="text-[10px] text-muted-foreground font-mono">
                           +{chunk.timestamp}ms
@@ -163,11 +200,31 @@ export const StreamingChunkSequence = memo(function StreamingChunkSequence({
                       </Suspense>
                     </div>
                   ))}
+                  {hiddenChunkCount > 0 && (
+                    <button
+                      type="button"
+                      className="mt-1 rounded-md border border-border bg-background px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                      onClick={() => showMoreChunks(group)}
+                    >
+                      Show {Math.min(CHUNK_PAGE_SIZE, hiddenChunkCount)} more chunk
+                      {Math.min(CHUNK_PAGE_SIZE, hiddenChunkCount) !== 1 ? "s" : ""}
+                    </button>
+                  )}
                 </div>
               )}
             </div>
           );
         })}
+        {hiddenGroupCount > 0 && (
+          <button
+            type="button"
+            className="rounded-md border border-border bg-background px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            onClick={showMoreGroups}
+          >
+            Show {Math.min(GROUP_PAGE_SIZE, hiddenGroupCount)} more SSE group
+            {Math.min(GROUP_PAGE_SIZE, hiddenGroupCount) !== 1 ? "s" : ""}
+          </button>
+        )}
       </div>
     );
   }

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

@@ -1,8 +1,13 @@
 import { extractStopReason, isTurnBoundary, type StopReason } from "../../lib/stopReason";
-import { safeGetOwnProperty } from "../../lib/objectUtils";
 import type { CapturedLog } from "../../contracts";
+import {
+  extractToolTraceEvents as extractSharedToolTraceEvents,
+  type ToolTraceEvent,
+} from "../../lib/toolTrace";
 import { resolveLogFormat } from "./log-formats";
 
+export type { ToolTraceEvent };
+
 export type TurnEntry = {
   log: CapturedLog;
   stopReason: StopReason;
@@ -35,39 +40,14 @@ export type TraceSummary = {
   knowledgeCandidateCount: number;
 };
 
-export type ToolTraceEvent = {
-  id: string;
-  logId: number;
-  index: number;
-  provider: "anthropic" | "openai";
-  name: string;
-  argumentsText: string | null;
-  argumentsPreview: string | null;
-};
-
 type ToolTraceCacheEntry = {
   apiFormat: CapturedLog["apiFormat"];
   responseText: string | null;
+  toolTraceEvents: CapturedLog["toolTraceEvents"];
   events: ToolTraceEvent[];
 };
 
-const PREVIEW_LIMIT = 180;
 const toolTraceCache = new WeakMap<CapturedLog, ToolTraceCacheEntry>();
-type ResolvedLogFormat = ReturnType<typeof resolveLogFormat>;
-
-function responseMayContainToolTrace(log: CapturedLog, format: ResolvedLogFormat): boolean {
-  const responseText = log.responseText;
-  if (responseText === null) return false;
-
-  switch (format) {
-    case "anthropic":
-      return responseText.includes("tool_use");
-    case "openai":
-      return responseText.includes("tool_calls") || responseText.includes("function_call");
-    case "unknown":
-      return false;
-  }
-}
 
 export function isTurnCollapsible(entryCount: number): boolean {
   return entryCount > 1;
@@ -112,160 +92,22 @@ export function buildValidPredecessors(groups: ConversationLike[]): Map<number,
   return predecessors;
 }
 
-function parseJsonResponse(responseText: string | null): unknown {
-  if (responseText === null) return null;
-  try {
-    const parsed: unknown = JSON.parse(responseText);
-    if (typeof parsed === "string") {
-      return JSON.parse(parsed);
-    }
-    return parsed;
-  } catch {
-    return null;
-  }
-}
-
-function previewValue(value: unknown): string | null {
-  if (value === undefined || value === null) return null;
-  const raw = typeof value === "string" ? value : JSON.stringify(value);
-  if (raw === undefined) return null;
-  const normalized = raw.replace(/\s+/g, " ").trim();
-  if (normalized.length === 0) return null;
-  return normalized.length > PREVIEW_LIMIT
-    ? `${normalized.slice(0, PREVIEW_LIMIT - 1)}...`
-    : normalized;
-}
-
-function copyValue(value: unknown): string | null {
-  if (value === undefined || value === null) return null;
-  if (typeof value === "string") return value.length > 0 ? value : null;
-  const raw = JSON.stringify(value, null, 2);
-  return raw === undefined || raw.length === 0 ? null : raw;
-}
-
-function extractAnthropicToolTraceEvents(log: CapturedLog): ToolTraceEvent[] {
-  const parsed = parseJsonResponse(log.responseText);
-  const content = safeGetOwnProperty(parsed, "content");
-  if (!Array.isArray(content)) return [];
-
-  const events: ToolTraceEvent[] = [];
-  for (const block of content) {
-    const type = safeGetOwnProperty(block, "type");
-    if (type !== "tool_use") continue;
-    const name = safeGetOwnProperty(block, "name");
-    if (typeof name !== "string" || name.length === 0) continue;
-    const input = safeGetOwnProperty(block, "input");
-    events.push({
-      id: `${String(log.id)}-anthropic-tool-${String(events.length)}`,
-      logId: log.id,
-      index: events.length,
-      provider: "anthropic",
-      name,
-      argumentsText: copyValue(input),
-      argumentsPreview: previewValue(input),
-    });
-  }
-  return events;
-}
-
-function extractOpenAIToolTraceEvents(log: CapturedLog): ToolTraceEvent[] {
-  const parsed = parseJsonResponse(log.responseText);
-  const choices = safeGetOwnProperty(parsed, "choices");
-  if (!Array.isArray(choices)) return [];
-
-  const events: ToolTraceEvent[] = [];
-  for (const choice of choices) {
-    const message = safeGetOwnProperty(choice, "message");
-    const toolCalls = safeGetOwnProperty(message, "tool_calls");
-    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: functionCallName,
-        argumentsText: copyValue(args),
-        argumentsPreview: previewValue(args),
-      });
-    }
-  }
-  const output = safeGetOwnProperty(parsed, "output");
-  if (Array.isArray(output)) {
-    for (const item of output) {
-      if (safeGetOwnProperty(item, "type") !== "function_call") continue;
-      const name = safeGetOwnProperty(item, "name");
-      if (typeof name !== "string" || name.length === 0) continue;
-      const args = safeGetOwnProperty(item, "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),
-      });
-    }
-  }
-  return events;
-}
-
 export function extractToolTraceEvents(log: CapturedLog): ToolTraceEvent[] {
   const cached = toolTraceCache.get(log);
   if (
     cached !== undefined &&
     cached.apiFormat === log.apiFormat &&
-    cached.responseText === log.responseText
+    cached.responseText === log.responseText &&
+    cached.toolTraceEvents === log.toolTraceEvents
   ) {
     return cached.events;
   }
 
-  const format = resolveLogFormat(log);
-  if (!responseMayContainToolTrace(log, format)) {
-    const events: ToolTraceEvent[] = [];
-    toolTraceCache.set(log, {
-      apiFormat: log.apiFormat,
-      responseText: log.responseText,
-      events,
-    });
-    return events;
-  }
-
-  let events: ToolTraceEvent[];
-  switch (format) {
-    case "anthropic":
-      events = extractAnthropicToolTraceEvents(log);
-      break;
-    case "openai":
-      events = extractOpenAIToolTraceEvents(log);
-      break;
-    case "unknown":
-      events = [];
-      break;
-  }
+  const events = extractSharedToolTraceEvents(log);
   toolTraceCache.set(log, {
     apiFormat: log.apiFormat,
     responseText: log.responseText,
+    toolTraceEvents: log.toolTraceEvents,
     events,
   });
   return events;

package/src/contracts/index.ts

@@ -9,6 +9,7 @@ export {
   LogBodyPartSchema,
   parseLogId,
   StreamingChunkSchema,
+  ToolTraceEventSchema,
 } from "./log";
 export type {
   ApiFormat,
@@ -18,6 +19,7 @@ export type {
   LogId,
   LogBodyPart,
   StreamingChunk,
+  ToolTraceEvent,
   TokenUsage,
 } from "./log";
 

package/src/contracts/log.ts

@@ -42,6 +42,18 @@ export const StreamingChunkSchema = z.object({
 
 export type StreamingChunk = z.infer<typeof StreamingChunkSchema>;
 
+export const ToolTraceEventSchema = z.object({
+  id: z.string(),
+  logId: LogIdSchema,
+  index: z.number().int().nonnegative(),
+  provider: z.enum(["anthropic", "openai"]),
+  name: z.string(),
+  argumentsText: z.string().nullable(),
+  argumentsPreview: z.string().nullable(),
+});
+
+export type ToolTraceEvent = z.infer<typeof ToolTraceEventSchema>;
+
 const StreamingChunksArraySchema = z.object({
   chunks: z.array(StreamingChunkSchema),
   truncated: z.boolean().optional().default(false),
@@ -107,6 +119,7 @@ export const CapturedLogSchema = z.object({
   droppedBytes: z.number().int().nonnegative().optional(),
   captureIncompleteReason: CaptureIncompleteReasonSchema.nullable().optional(),
   warnings: z.array(z.string()).optional(),
+  toolTraceEvents: z.array(ToolTraceEventSchema).optional(),
   /** Error message from streaming response (e.g., SSE error event) */
   error: z.string().nullable().optional(),
 });