@tonyclaw/agent-inspector 2.1.13 → 2.1.15

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

@@ -1,15 +1,29 @@
-import { type JSX, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type CSSProperties,
+  type JSX,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { AlertTriangle, ChevronRight, Clock, Zap } from "lucide-react";
 import { isTurnBoundary } from "../../lib/stopReason";
 import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../contracts";
 import { getCrabVariant } from "../ui/crab-variants";
-import { ProviderLogo, detectProvider, type Provider } from "../providers/ProviderLogo";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+import { ROW_CHEVRON_SLOT_CLASS } from "./ProviderLogoStack";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LogEntry } from "./LogEntry";
-import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest } from "./logFocus";
+import {
+  dispatchLogFocusRequest,
+  LOG_FOCUS_REQUEST_EVENT,
+  readLogFocusRequest,
+  type LogFocusRequest,
+} from "./logFocus";
 import { ThreadConnector } from "./ThreadConnector";
 import { ToolTraceEvents } from "./ToolTraceEvents";
 import { extractToolTraceEvents, isTurnCollapsible, type TurnEntry } from "./viewerState";
@@ -19,7 +33,11 @@ function formatElapsed(ms: number): string {
   return `${(ms / 1000).toFixed(1)}s`;
 }
 
-type TurnGroupProps = {
+export type PendingTurnFocusRequest = LogFocusRequest & {
+  nonce: number;
+};
+
+export type TurnGroupProps = {
   entries: TurnEntry[];
   viewMode: "simple" | "full";
   strip: boolean;
@@ -29,6 +47,7 @@ type TurnGroupProps = {
   comparisonPredecessors: Map<number, CapturedLog>;
   turnIndex?: number;
   timeDisplayFormat: TimeDisplayFormat;
+  pendingFocusRequest?: PendingTurnFocusRequest;
 };
 
 export const TurnGroup = memo(function TurnGroup({
@@ -41,6 +60,7 @@ export const TurnGroup = memo(function TurnGroup({
   comparisonPredecessors,
   turnIndex = 0,
   timeDisplayFormat,
+  pendingFocusRequest,
 }: TurnGroupProps): JSX.Element {
   const lastIdx = entries.length - 1;
   const lastStop = entries[lastIdx]?.stopReason ?? null;
@@ -75,6 +95,22 @@ export const TurnGroup = memo(function TurnGroup({
     };
   }, [collapsible, entries]);
 
+  useEffect(() => {
+    if (pendingFocusRequest === undefined) return undefined;
+    if (!entries.some((entry) => entry.log.id === pendingFocusRequest.logId)) return undefined;
+    if (collapsible) setCollapsed(false);
+
+    const timer = window.setTimeout(() => {
+      dispatchLogFocusRequest({
+        logId: pendingFocusRequest.logId,
+        tab: pendingFocusRequest.tab,
+        source: "virtualizer",
+      });
+    }, 0);
+
+    return () => window.clearTimeout(timer);
+  }, [collapsible, entries, pendingFocusRequest]);
+
   const toggleCollapse = useCallback(() => {
     if (collapsible) setCollapsed((prev) => !prev);
   }, [collapsible]);
@@ -106,21 +142,11 @@ export const TurnGroup = memo(function TurnGroup({
     };
   }, [entries, lastIdx]);
 
-  // Unique providers across all entries (for collapsed model logos)
-  const uniqueProviders = useMemo(() => {
-    const seen = new Set<Provider>();
-    for (const e of entries) {
-      const p = detectProvider(e.log.model);
-      if (p !== "unknown") seen.add(p);
-    }
-    return [...seen];
-  }, [entries]);
-
   // Crab variant creators for the dual-crab collapsed layout
   const StartCrab = useMemo(() => getCrabVariant(entries[0]?.log.id ?? 0), [entries]);
   const EndCrab = useMemo(() => getCrabVariant(entries[lastIdx]?.log.id ?? 0), [entries, lastIdx]);
 
-  const bgClass = turnIndex % 2 === 0 ? "bg-muted/10" : "bg-muted/25";
+  const bgClass = turnIndex % 2 === 0 ? "bg-[#070a0f]" : "bg-[#090d12]";
   const aggregateIsSlow =
     aggregate.maxElapsed !== null &&
     slowResponseThresholdSeconds > 0 &&
@@ -154,17 +180,27 @@ export const TurnGroup = memo(function TurnGroup({
 
   const firstLogId = entries[0]?.log.id ?? turnIndex;
   const turnLabel = `Turn ${String(turnIndex + 1)}`;
+  const containmentStyle = useMemo<CSSProperties>(
+    () => ({
+      contentVisibility: "auto",
+      containIntrinsicSize: collapsed ? "48px" : "160px",
+    }),
+    [collapsed],
+  );
 
   return (
     <div
       ref={containerRef}
+      style={containmentStyle}
       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",
+        "border rounded-lg transition-[border-color,box-shadow]",
+        isPending
+          ? "border-amber-300/15 shadow-[0_0_0_1px_rgba(252,211,77,0.04)]"
+          : "border-transparent",
         !collapsed &&
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
       )}
@@ -252,13 +288,23 @@ export const TurnGroup = memo(function TurnGroup({
           {entries.length > 1 && (
             <div
               className={cn(
-                "flex-1 min-w-0 mb-0.5 rounded-lg border border-border py-1 px-3 flex items-center gap-3 text-xs",
+                "flex-1 min-w-0 mb-0.5 rounded-lg border border-cyan-300/10 py-1.5 px-3 flex items-center gap-3 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
                 bgClass,
               )}
             >
+              <span className={ROW_CHEVRON_SLOT_CLASS}>
+                <ChevronRight className="size-4 shrink-0" />
+              </span>
+
               {/* ID range */}
-              <span className="text-blue-400/80 font-mono font-semibold tabular-nums shrink-0">
-                #{entries[0]?.log.id ?? "?"} ~ #{entries[lastIdx]?.log.id ?? "?"}
+              <span
+                className="text-blue-400/80 font-mono font-semibold tabular-nums shrink-0"
+                title={`Log IDs ${String(entries[0]?.log.id ?? "?")} ~ ${String(
+                  entries[lastIdx]?.log.id ?? "?",
+                )}`}
+              >
+                #{entries[0]?.sessionLogNumber ?? "?"} ~ #
+                {entries[lastIdx]?.sessionLogNumber ?? "?"}
               </span>
 
               {/* Request count */}
@@ -266,15 +312,6 @@ export const TurnGroup = memo(function TurnGroup({
                 {entries.length} request{entries.length > 1 ? "s" : ""}
               </span>
 
-              {/* Model logos — one per unique provider */}
-              {uniqueProviders.length > 0 && (
-                <span className="flex items-center gap-0.5 shrink-0">
-                  {uniqueProviders.map((p) => (
-                    <ProviderLogo key={p} provider={p} className="size-4" />
-                  ))}
-                </span>
-              )}
-
               {/* Elapsed — slowest single request in the turn (not the sum) */}
               {aggregate.maxElapsed !== null && (
                 <TooltipProvider>
@@ -322,9 +359,6 @@ export const TurnGroup = memo(function TurnGroup({
 
               {/* Spacer */}
               <span className="flex-1 min-w-0" />
-
-              {/* Expand chevron */}
-              <ChevronRight className="size-4 text-muted-foreground shrink-0" />
             </div>
           )}
         </div>
@@ -358,6 +392,7 @@ export const TurnGroup = memo(function TurnGroup({
               <div className={cn("flex-1 min-w-0 mb-0.5 rounded-lg", bgClass)}>
                 <LogEntry
                   log={log}
+                  displayNumber={entry.sessionLogNumber}
                   viewMode={viewMode}
                   strip={strip}
                   slowResponseThresholdSeconds={slowResponseThresholdSeconds}

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

@@ -0,0 +1,153 @@
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import { type JSX, useEffect, useMemo, useState } from "react";
+import type { CapturedLog } from "../../contracts";
+import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
+import type { CacheTrendEntry } from "./cacheTrend";
+import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest } from "./logFocus";
+import { TurnGroup } from "./TurnGroup";
+import type { PendingTurnFocusRequest } from "./TurnGroup";
+import type { TurnGroupData } from "./viewerState";
+
+const VIRTUALIZE_TURN_THRESHOLD = 24;
+const ESTIMATED_TURN_HEIGHT = 132;
+const VIRTUAL_OVERSCAN = 8;
+
+type TurnGroupListProps = {
+  turnGroups: TurnGroupData[];
+  viewMode: "simple" | "full";
+  strip: boolean;
+  slowResponseThresholdSeconds: number;
+  cacheTrends?: Map<number, CacheTrendEntry>;
+  onCompareWithPrevious: (log: CapturedLog) => void;
+  comparisonPredecessors: Map<number, CapturedLog>;
+  timeDisplayFormat: TimeDisplayFormat;
+};
+
+type PendingVirtualFocusRequest = PendingTurnFocusRequest & {
+  turnIndex: number;
+};
+
+export function shouldVirtualizeTurnGroups(turnCount: number): boolean {
+  return turnCount > VIRTUALIZE_TURN_THRESHOLD;
+}
+
+export function findTurnGroupIndexForLog(
+  turnGroups: readonly TurnGroupData[],
+  logId: number,
+): number | null {
+  for (let index = 0; index < turnGroups.length; index++) {
+    const group = turnGroups[index];
+    if (group === undefined) continue;
+    if (group.entries.some((entry) => entry.log.id === logId)) return index;
+  }
+  return null;
+}
+
+function buildLogTurnIndex(turnGroups: readonly TurnGroupData[]): Map<number, number> {
+  const result = new Map<number, number>();
+  for (let index = 0; index < turnGroups.length; index++) {
+    const group = turnGroups[index];
+    if (group === undefined) continue;
+    for (const entry of group.entries) {
+      result.set(entry.log.id, index);
+    }
+  }
+  return result;
+}
+
+function renderTurnGroup(
+  turnGroup: TurnGroupData,
+  props: TurnGroupListProps,
+  pendingFocusRequest?: PendingTurnFocusRequest,
+): JSX.Element {
+  return (
+    <TurnGroup
+      key={turnGroup.turnIndex}
+      entries={turnGroup.entries}
+      viewMode={props.viewMode}
+      strip={props.strip}
+      slowResponseThresholdSeconds={props.slowResponseThresholdSeconds}
+      timeDisplayFormat={props.timeDisplayFormat}
+      cacheTrends={props.cacheTrends}
+      onCompareWithPrevious={props.onCompareWithPrevious}
+      comparisonPredecessors={props.comparisonPredecessors}
+      turnIndex={turnGroup.turnIndex}
+      pendingFocusRequest={pendingFocusRequest}
+    />
+  );
+}
+
+export function TurnGroupList(props: TurnGroupListProps): JSX.Element {
+  if (!shouldVirtualizeTurnGroups(props.turnGroups.length)) {
+    return <>{props.turnGroups.map((turnGroup) => renderTurnGroup(turnGroup, props))}</>;
+  }
+
+  return <VirtualizedTurnGroupList {...props} />;
+}
+
+function VirtualizedTurnGroupList(props: TurnGroupListProps): JSX.Element {
+  const { turnGroups } = props;
+  const [pendingFocusRequest, setPendingFocusRequest] = useState<PendingVirtualFocusRequest | null>(
+    null,
+  );
+
+  const virtualizer = useWindowVirtualizer({
+    count: turnGroups.length,
+    estimateSize: () => ESTIMATED_TURN_HEIGHT,
+    overscan: VIRTUAL_OVERSCAN,
+    getItemKey: (index) => turnGroups[index]?.turnIndex ?? index,
+  });
+
+  const turnIndexByLogId = useMemo(() => buildLogTurnIndex(turnGroups), [turnGroups]);
+
+  useEffect(() => {
+    const handleLogFocusRequest = (event: Event): void => {
+      const request = readLogFocusRequest(event);
+      if (request === null) return;
+      if (request.source === "virtualizer") return;
+
+      const turnIndex = turnIndexByLogId.get(request.logId);
+      if (turnIndex === undefined) return;
+      virtualizer.scrollToIndex(turnIndex, { align: "center" });
+      setPendingFocusRequest((previous) => ({
+        ...request,
+        turnIndex,
+        nonce: previous === null ? 1 : previous.nonce + 1,
+      }));
+    };
+
+    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    return () => {
+      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    };
+  }, [turnIndexByLogId, virtualizer]);
+
+  return (
+    <div
+      className="relative w-full"
+      style={{ height: `${virtualizer.getTotalSize()}px` }}
+      data-virtualized-turn-list="true"
+    >
+      {virtualizer.getVirtualItems().map((virtualItem) => {
+        const turnGroup = turnGroups[virtualItem.index];
+        if (turnGroup === undefined) return null;
+        const itemFocusRequest =
+          pendingFocusRequest !== null && pendingFocusRequest.turnIndex === virtualItem.index
+            ? pendingFocusRequest
+            : undefined;
+
+        return (
+          <div
+            key={virtualItem.key}
+            data-index={virtualItem.index}
+            ref={virtualizer.measureElement}
+            className="absolute left-0 top-0 w-full"
+            style={{ transform: `translateY(${virtualItem.start}px)` }}
+          >
+            {renderTurnGroup(turnGroup, props, itemFocusRequest)}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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