@tonyclaw/agent-inspector 2.0.42 → 2.1.0

package/src/components/ProxyViewerContainer.tsx

@@ -1,9 +1,15 @@
 import { useState, useEffect, useCallback, useRef, useMemo, type JSX } from "react";
 import { z } from "zod";
 import { CapturedLogSchema, type CapturedLog } from "../contracts";
+import { fetchJson } from "../lib/apiClient";
+import { InspectorGroupsListResponseSchema, type InspectorGroup } from "../lib/groupContract";
 import { useStripConfig } from "../lib/useStripConfig";
 import { OnboardingBanner } from "./OnboardingBanner";
-import { ProxyViewer } from "./ProxyViewer";
+import {
+  ProxyViewer,
+  type LogPaginationControls,
+  type SessionMembershipEvidence,
+} from "./ProxyViewer";
 import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
 
 type SSEUpdate =
@@ -27,6 +33,47 @@ const SSEUpdateSchema = z.union([
   }),
 ]);
 
+const LogCursorPageSchema = z.object({
+  logs: z.array(CapturedLogSchema),
+  total: z.number().int().nonnegative(),
+  limit: z.number().int().positive(),
+  hasOlder: z.boolean(),
+  hasNewer: z.boolean(),
+  oldestLogId: z.number().int().positive().nullable(),
+  newestLogId: z.number().int().positive().nullable(),
+});
+
+type LogCursorPage = z.infer<typeof LogCursorPageSchema>;
+
+type SessionPageRequest =
+  | { kind: "newest" }
+  | { kind: "oldest" }
+  | { kind: "older"; beforeLogId: number }
+  | { kind: "newer"; afterLogId: number };
+
+function buildSessionMembershipEvidence(
+  groups: readonly InspectorGroup[],
+  sessionId: string,
+): SessionMembershipEvidence[] {
+  const memberships: SessionMembershipEvidence[] = [];
+  for (const group of groups) {
+    for (const member of group.members) {
+      if (member.sessionId !== sessionId) continue;
+      memberships.push({
+        groupId: group.id,
+        groupTitle: group.title,
+        groupKind: group.kind,
+        groupStatus: group.status,
+        groupTask: group.task,
+        groupProject: group.project,
+        groupEvidence: group.evidence,
+        member,
+      });
+    }
+  }
+  return memberships;
+}
+
 function extractSessions(logs: CapturedLog[]): string[] {
   const set = new Set<string>();
   for (const l of logs) {
@@ -65,11 +112,41 @@ const DEBOUNCE_MS = 50;
 const HASH_SCROLL_ATTEMPTS = 12;
 const HASH_HIGHLIGHT_MS = 1800;
 const MAX_CLIENT_LOGS = 500;
+const SESSION_PAGE_LIMIT = 100;
 
 function buildLogsStreamUrl(sessionId: string | undefined): string {
-  if (sessionId === undefined) return "/api/logs/stream";
-  const params = new URLSearchParams({ sessionId });
-  return `/api/logs/stream?${params.toString()}`;
+  const params = new URLSearchParams();
+  if (sessionId !== undefined) {
+    params.set("sessionId", sessionId);
+    params.set("compact", "1");
+  }
+  const query = params.toString();
+  return query.length > 0 ? `/api/logs/stream?${query}` : "/api/logs/stream";
+}
+
+function buildSessionLogsPageUrl(sessionId: string, request: SessionPageRequest): string {
+  const params = new URLSearchParams({
+    cursor: "1",
+    compact: "1",
+    limit: String(SESSION_PAGE_LIMIT),
+    sessionId,
+  });
+
+  switch (request.kind) {
+    case "oldest":
+      params.set("anchor", "oldest");
+      break;
+    case "older":
+      params.set("beforeLogId", String(request.beforeLogId));
+      break;
+    case "newer":
+      params.set("afterLogId", String(request.afterLogId));
+      break;
+    case "newest":
+      break;
+  }
+
+  return `/api/logs?${params.toString()}`;
 }
 
 function buildLogIndex(logs: readonly CapturedLog[]): Map<number, number> {
@@ -109,9 +186,14 @@ export function ProxyViewerContainer({
   const [selectedModel, setSelectedModel] = useState("__all__");
   const [viewMode, setViewMode] = useState<"simple" | "full">("simple");
   const [error, setError] = useState<string | null>(null);
+  const [streamInitialized, setStreamInitialized] = useState(initialSessionId === undefined);
+  const [logPage, setLogPage] = useState<LogCursorPage | null>(null);
+  const [sessionPageLoading, setSessionPageLoading] = useState(initialSessionId !== undefined);
+  const [sessionMemberships, setSessionMemberships] = useState<SessionMembershipEvidence[]>([]);
   const eventSourceRef = useRef<EventSource | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const handledHashRef = useRef<string | null>(null);
+  const sessionPageRequestIdRef = useRef(0);
 
   // O(1) log lookup by id
   const logIndexRef = useRef<Map<number, number>>(new Map());
@@ -169,6 +251,7 @@ export function ProxyViewerContainer({
       eventSourceRef.current.close();
     }
 
+    setStreamInitialized(false);
     const es = new EventSource(buildLogsStreamUrl(initialSessionId));
     eventSourceRef.current = es;
 
@@ -193,6 +276,7 @@ export function ProxyViewerContainer({
           const nextLogs = trimClientLogs(update.logs);
           logIndexRef.current = buildLogIndex(nextLogs);
           setAllLogs(nextLogs);
+          setStreamInitialized(true);
           setError(null);
         } else if (update.type === "update") {
           scheduleUpdate(update.log);
@@ -204,6 +288,7 @@ export function ProxyViewerContainer({
 
     es.onerror = () => {
       setError("SSE connection lost, reconnecting...");
+      setStreamInitialized(true);
       es.close();
       if (reconnectTimeoutRef.current !== null) {
         clearTimeout(reconnectTimeoutRef.current);
@@ -212,7 +297,71 @@ export function ProxyViewerContainer({
     };
   }, [initialSessionId, scheduleUpdate]);
 
+  const loadSessionPage = useCallback(
+    (request: SessionPageRequest) => {
+      if (initialSessionId === undefined) return;
+
+      const requestId = sessionPageRequestIdRef.current + 1;
+      sessionPageRequestIdRef.current = requestId;
+      setSessionPageLoading(true);
+      setError(null);
+
+      void fetchJson(buildSessionLogsPageUrl(initialSessionId, request), LogCursorPageSchema)
+        .then((page) => {
+          if (sessionPageRequestIdRef.current !== requestId) return;
+          const nextLogs = page.logs;
+          logIndexRef.current = buildLogIndex(nextLogs);
+          setAllLogs(nextLogs);
+          setLogPage(page);
+          setSelectedSession(initialSessionId);
+          setSessionPageLoading(false);
+          setError(null);
+        })
+        .catch((err: unknown) => {
+          if (sessionPageRequestIdRef.current !== requestId) return;
+          setAllLogs([]);
+          setLogPage(null);
+          setSessionPageLoading(false);
+          setError(err instanceof Error ? err.message : "Failed to load session logs");
+        });
+    },
+    [initialSessionId],
+  );
+
   useEffect(() => {
+    if (initialSessionId === undefined) {
+      setSessionMemberships([]);
+      return;
+    }
+
+    let cancelled = false;
+    void fetch("/api/groups")
+      .then(async (response) => {
+        if (!response.ok) return null;
+        const raw: unknown = await response.json();
+        const parsed = InspectorGroupsListResponseSchema.safeParse(raw);
+        return parsed.success ? parsed.data.groups : null;
+      })
+      .then((groups) => {
+        if (cancelled || groups === null) return;
+        setSessionMemberships(buildSessionMembershipEvidence(groups, initialSessionId));
+      })
+      .catch(() => {
+        if (!cancelled) setSessionMemberships([]);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [initialSessionId]);
+
+  useEffect(() => {
+    if (initialSessionId === undefined) return;
+    loadSessionPage({ kind: "newest" });
+  }, [initialSessionId, loadSessionPage]);
+
+  useEffect(() => {
+    if (initialSessionId !== undefined) return undefined;
     connectSSE();
     return () => {
       if (eventSourceRef.current) {
@@ -228,7 +377,7 @@ export function ProxyViewerContainer({
         flushTimerRef.current = null;
       }
     };
-  }, [connectSSE]);
+  }, [connectSSE, initialSessionId]);
 
   useEffect(() => {
     const hash = window.location.hash;
@@ -342,6 +491,48 @@ export function ProxyViewerContainer({
   // Read the strip config once at the container so the virtualized list does
   // not need N independent SWR subscriptions per row.
   const { strip, captureMode, slowResponseThresholdSeconds, timeDisplayFormat } = useStripConfig();
+  const loadOldestPage = useCallback(() => {
+    loadSessionPage({ kind: "oldest" });
+  }, [loadSessionPage]);
+  const loadNewestPage = useCallback(() => {
+    loadSessionPage({ kind: "newest" });
+  }, [loadSessionPage]);
+  const loadOlderPage = useCallback(() => {
+    const firstLog = allLogs[0];
+    const beforeLogId = logPage?.oldestLogId ?? firstLog?.id ?? null;
+    if (beforeLogId === null) return;
+    loadSessionPage({ kind: "older", beforeLogId });
+  }, [allLogs, loadSessionPage, logPage]);
+  const loadNewerPage = useCallback(() => {
+    const lastLog = allLogs[allLogs.length - 1];
+    const afterLogId = logPage?.newestLogId ?? lastLog?.id ?? null;
+    if (afterLogId === null) return;
+    loadSessionPage({ kind: "newer", afterLogId });
+  }, [allLogs, loadSessionPage, logPage]);
+  const pagination = useMemo<LogPaginationControls | undefined>(() => {
+    if (initialSessionId === undefined) return undefined;
+    return {
+      isLoading: sessionPageLoading,
+      total: logPage?.total ?? null,
+      pageSize: logPage?.limit ?? SESSION_PAGE_LIMIT,
+      hasOlder: logPage?.hasOlder ?? false,
+      hasNewer: logPage?.hasNewer ?? false,
+      oldestLogId: logPage?.oldestLogId ?? null,
+      newestLogId: logPage?.newestLogId ?? null,
+      onOldest: loadOldestPage,
+      onOlder: loadOlderPage,
+      onNewer: loadNewerPage,
+      onNewest: loadNewestPage,
+    };
+  }, [
+    initialSessionId,
+    loadNewestPage,
+    loadNewerPage,
+    loadOlderPage,
+    loadOldestPage,
+    logPage,
+    sessionPageLoading,
+  ]);
 
   return (
     <>
@@ -361,6 +552,9 @@ export function ProxyViewerContainer({
         onModelChange={setSelectedModel}
         onClearAll={handleClearAll}
         onClearGroup={handleClearGroup}
+        isLoading={initialSessionId === undefined ? !streamInitialized : sessionPageLoading}
+        pagination={pagination}
+        sessionMemberships={sessionMemberships}
         viewMode={viewMode}
         onViewModeChange={setViewMode}
         captureMode={captureMode}

package/src/components/groups/GroupsDialog.tsx

@@ -920,21 +920,22 @@ function MemberRow({ row }: { row: GroupMemberRow }): JSX.Element {
   const errors = session?.errorCount ?? null;
   const tokens = session?.tokenUsage.total ?? null;
   const firstChunkMs = log?.firstChunkMs ?? null;
+  const sessionLabel = firstNonEmpty(member.label, member.sessionId);
 
   return (
     <tr className="border-b border-border last:border-0">
       <td className="max-w-56 px-3 py-2">
-        <div className="flex min-w-0 items-center gap-2">
-          <a
-            href={sessionPath}
-            target="_blank"
-            rel="noreferrer"
-            className="min-w-0 truncate font-mono text-xs text-primary hover:underline"
-          >
-            {firstNonEmpty(member.label, member.sessionId)}
-          </a>
+        <a
+          href={sessionPath}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex max-w-full min-w-0 items-center gap-2 rounded-sm font-mono text-xs text-primary outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          aria-label={`Open session ${sessionLabel}`}
+          title={`Open session ${sessionLabel}`}
+        >
+          <span className="min-w-0 truncate">{sessionLabel}</span>
           <ExternalLink className="size-3 shrink-0 text-muted-foreground" />
-        </div>
+        </a>
         <div className="mt-0.5 truncate text-[11px] text-muted-foreground">
           {displayText(member.agent)}
         </div>

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

@@ -1,7 +1,8 @@
 import { AlertTriangle, GitCompareArrows } from "lucide-react";
 import { Suspense, type JSX } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
-import type { CapturedLog } from "../../contracts";
+import { CapturedLogSchema, type CapturedLog } from "../../contracts";
+import { fetchJson } from "../../lib/apiClient";
 import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { stripClaudeCodeBillingHeader } from "../../proxy/claudeCodeStrip";
 import { Button } from "../ui/button";
@@ -50,6 +51,12 @@ function resolveFocusedTab(tab: LogFocusTab, anatomySegments: AnatomySegment[] |
   }
 }
 
+type BodyHydrationState = "idle" | "loading" | "failed";
+
+function shouldHydrateLogBody(log: CapturedLog): boolean {
+  return log.bodyContentMode === "compact" || log.bodyContentMode === "truncated";
+}
+
 export type LogEntryProps = {
   log: CapturedLog;
   viewMode?: "simple" | "full";
@@ -144,53 +151,56 @@ export const LogEntry = memo(function ({
   const [requestDiff, setRequestDiff] = useState<boolean>(false);
   const [activeTab, setActiveTab] = useState("request");
   const [expandToPath, setExpandToPath] = useState<string | null>(null);
+  const [hydratedLog, setHydratedLog] = useState<CapturedLog | null>(null);
+  const [bodyHydrationState, setBodyHydrationState] = useState<BodyHydrationState>("idle");
   const requestJsonRef = useRef<HTMLDivElement | null>(null);
-  const resolvedFormat = resolveLogFormat(log);
+  const displayLog = hydratedLog ?? log;
+  const resolvedFormat = resolveLogFormat(displayLog);
   const adapter = getLogFormatAdapter(resolvedFormat);
   const requestAnalysis = useMemo(
-    () => adapter.analyzeRequest(log.rawRequestBody),
-    [adapter, log.rawRequestBody],
+    () => adapter.analyzeRequest(displayLog.rawRequestBody),
+    [adapter, displayLog.rawRequestBody],
   );
   const responseAnalysis = useMemo(
-    () => adapter.analyzeResponse(log.responseText),
-    [adapter, log.responseText],
+    () => adapter.analyzeResponse(displayLog.responseText),
+    [adapter, displayLog.responseText],
   );
   const strippedRequestBody = useMemo(() => {
-    if (!strip || resolvedFormat !== "anthropic" || log.rawRequestBody === null) {
+    if (!strip || resolvedFormat !== "anthropic" || displayLog.rawRequestBody === null) {
       return null;
     }
-    return stripClaudeCodeBillingHeader(log.rawRequestBody).body;
-  }, [log.rawRequestBody, resolvedFormat, strip]);
-  const displayedRequestBody = strippedRequestBody ?? log.rawRequestBody;
+    return stripClaudeCodeBillingHeader(displayLog.rawRequestBody).body;
+  }, [displayLog.rawRequestBody, resolvedFormat, strip]);
+  const displayedRequestBody = strippedRequestBody ?? displayLog.rawRequestBody;
   const requestExpansion = useJsonBulkExpansion(displayedRequestBody);
-  const rawRequestExpansion = useJsonBulkExpansion(log.rawRequestBody);
-  const responseExpansion = useJsonBulkExpansion(log.responseText);
+  const rawRequestExpansion = useJsonBulkExpansion(displayLog.rawRequestBody);
+  const responseExpansion = useJsonBulkExpansion(displayLog.responseText);
 
   // Headers are rendered as a flat list, so we copy them as pretty-printed JSON.
   // Only build the string when there's at least one entry — empty headers would
   // otherwise copy "{}", which is misleading.
   const headersText = useMemo(
     () =>
-      log.headers && Object.keys(log.headers).length > 0
-        ? JSON.stringify(log.headers, null, 2)
+      displayLog.headers && Object.keys(displayLog.headers).length > 0
+        ? JSON.stringify(displayLog.headers, null, 2)
         : null,
-    [log.headers],
+    [displayLog.headers],
   );
   const rawHeadersText = useMemo(
     () =>
-      log.rawHeaders && Object.keys(log.rawHeaders).length > 0
-        ? JSON.stringify(log.rawHeaders, null, 2)
+      displayLog.rawHeaders && Object.keys(displayLog.rawHeaders).length > 0
+        ? JSON.stringify(displayLog.rawHeaders, null, 2)
         : null,
-    [log.rawHeaders],
+    [displayLog.rawHeaders],
   );
 
   // One copy-feedback hook per JSON-bearing tab, so each tab can surface its
   // own Copy button in the header with independent "Copied!" feedback.
   const requestCopy = useCopyFeedback(displayedRequestBody);
-  const rawRequestCopy = useCopyFeedback(log.rawRequestBody);
+  const rawRequestCopy = useCopyFeedback(displayLog.rawRequestBody);
   const headersCopy = useCopyFeedback(headersText);
   const rawHeadersCopy = useCopyFeedback(rawHeadersText);
-  const responseCopy = useCopyFeedback(log.responseText);
+  const responseCopy = useCopyFeedback(displayLog.responseText);
 
   // Per-tab action bundles consumed by the header. The header renders the
   // entry whose key matches `activeTab`. Tabs without an entry (Context,
@@ -214,7 +224,7 @@ export const LogEntry = memo(function ({
           resolvedFormat,
           viewMode,
           strip,
-          log.rawRequestBody !== null,
+          displayLog.rawRequestBody !== null,
         )
           ? { active: requestDiff, onToggle: () => setRequestDiff(!requestDiff) }
           : undefined,
@@ -222,12 +232,12 @@ export const LogEntry = memo(function ({
           onCompareWithPrevious === undefined
             ? undefined
             : () => {
-                onCompareWithPrevious(log);
+                onCompareWithPrevious(displayLog);
               },
       },
       "raw-request": {
         copyLabel: "Copy raw request",
-        copyText: log.rawRequestBody,
+        copyText: displayLog.rawRequestBody,
         copyCopied: rawRequestCopy.copied,
         onCopy: rawRequestCopy.copy,
         expansion: {
@@ -253,7 +263,7 @@ export const LogEntry = memo(function ({
       },
       raw: {
         copyLabel: "Copy response",
-        copyText: log.responseText,
+        copyText: displayLog.responseText,
         copyCopied: responseCopy.copied,
         onCopy: responseCopy.copy,
         expansion: {
@@ -268,14 +278,15 @@ export const LogEntry = memo(function ({
       requestCopy,
       requestExpansion,
       requestDiff,
-      log.rawRequestBody,
+      displayLog,
+      displayLog.rawRequestBody,
       rawRequestCopy,
       rawRequestExpansion,
       headersText,
       headersCopy,
       rawHeadersText,
       rawHeadersCopy,
-      log.responseText,
+      displayLog.responseText,
       responseCopy,
       responseExpansion,
       resolvedFormat,
@@ -295,7 +306,7 @@ export const LogEntry = memo(function ({
     () => parseRequestTools(requestExpansion.parsedData),
     [requestExpansion.parsedData],
   );
-  const warnings = log.warnings ?? [];
+  const warnings = displayLog.warnings ?? [];
   const anatomyPaths = useMemo(() => {
     if (anatomySegments === null) return undefined;
     return new Set(anatomySegments.map((s) => s.path));
@@ -316,6 +327,34 @@ export const LogEntry = memo(function ({
     setExpanded(nextExpanded);
   }, [anatomySegments, expanded]);
 
+  useEffect(() => {
+    setHydratedLog(null);
+    setBodyHydrationState("idle");
+  }, [log.id]);
+
+  useEffect(() => {
+    if (!expanded) return;
+    if (!shouldHydrateLogBody(log)) return;
+    if (hydratedLog !== null || bodyHydrationState !== "idle") return;
+
+    let cancelled = false;
+    setBodyHydrationState("loading");
+    void fetchJson(`/api/logs/${String(log.id)}`, CapturedLogSchema)
+      .then((fullLog) => {
+        if (cancelled) return;
+        setHydratedLog(fullLog);
+        setBodyHydrationState("idle");
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setBodyHydrationState("failed");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [bodyHydrationState, expanded, hydratedLog, log.bodyContentMode, log.id]);
+
   useEffect(() => {
     const handleLogFocusRequest = (event: Event): void => {
       const request = readLogFocusRequest(event);
@@ -335,7 +374,7 @@ export const LogEntry = memo(function ({
     <TooltipProvider>
       <div className="border border-border rounded-lg mb-1 overflow-hidden">
         <LogEntryHeader
-          log={log}
+          log={displayLog}
           messageCount={requestAnalysis.messageCount}
           toolCount={requestAnalysis.toolCount}
           expanded={expanded}
@@ -373,7 +412,7 @@ export const LogEntry = memo(function ({
                 <TabsContent value="raw-request">
                   {activeTab === "raw-request" && (
                     <div className="px-4 pt-1 pb-3">
-                      {log.rawRequestBody === null ? (
+                      {displayLog.rawRequestBody === null ? (
                         <p className="text-xs text-muted-foreground italic">No request body</p>
                       ) : rawRequestExpansion.parsedData !== null ? (
                         <Suspense fallback={<TabFallback />}>
@@ -385,7 +424,7 @@ export const LogEntry = memo(function ({
                         </Suspense>
                       ) : (
                         <pre className="font-mono text-xs whitespace-pre-wrap break-words">
-                          {log.rawRequestBody}
+                          {displayLog.rawRequestBody}
                         </pre>
                       )}
                     </div>
@@ -396,6 +435,17 @@ export const LogEntry = memo(function ({
               <TabsContent value="request">
                 {activeTab === "request" && (
                   <div className="px-4 pt-1 pb-3">
+                    {bodyHydrationState === "loading" && (
+                      <div className="mb-3 rounded border border-border bg-muted/30 p-3 text-xs text-muted-foreground">
+                        Loading full request and response bodies...
+                      </div>
+                    )}
+                    {bodyHydrationState === "failed" && (
+                      <div className="mb-3 rounded border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-200">
+                        Full request and response bodies could not be loaded. Compact metadata is
+                        still available.
+                      </div>
+                    )}
                     {warnings.length > 0 && (
                       <div className="mb-3 rounded border border-amber-500/30 bg-amber-500/10 p-3 text-xs">
                         <div className="flex items-center gap-2 font-semibold text-amber-300">
@@ -418,7 +468,7 @@ export const LogEntry = memo(function ({
                         the diff or JSON view, depending on toggle state. */}
                     {requestDiff ? (
                       <RequestDiffContent
-                        rawBody={log.rawRequestBody}
+                        rawBody={displayLog.rawRequestBody}
                         displayedBody={displayedRequestBody}
                         emptyLabel="No transformation applied; raw and sent request bodies are identical."
                       />
@@ -453,8 +503,8 @@ export const LogEntry = memo(function ({
                     <Suspense fallback={<TabFallback />}>
                       <LazyRequestAnatomy
                         parsed={requestExpansion.parsedData}
-                        inputTokens={log.inputTokens ?? null}
-                        model={log.model}
+                        inputTokens={displayLog.inputTokens ?? null}
+                        model={displayLog.model}
                         segments={anatomySegments}
                         onSegmentActivate={jumpToAnatomySegment}
                       />
@@ -471,7 +521,8 @@ export const LogEntry = memo(function ({
                       <div className="flex justify-end gap-2 mb-2">
                         {shouldShowHeadersDiffButton(
                           viewMode,
-                          log.rawHeaders !== undefined && Object.keys(log.rawHeaders).length > 0,
+                          displayLog.rawHeaders !== undefined &&
+                            Object.keys(displayLog.rawHeaders).length > 0,
                         ) && (
                           <DiffToggleButton
                             active={headersDiff}
@@ -484,13 +535,13 @@ export const LogEntry = memo(function ({
                       </div>
                       {headersDiff ? (
                         <HeadersDiffContent
-                          rawHeaders={log.rawHeaders}
-                          headers={log.headers}
+                          rawHeaders={displayLog.rawHeaders}
+                          headers={displayLog.headers}
                           emptyLabel="No transformation applied; raw and processed headers are identical."
                         />
-                      ) : log.headers && Object.keys(log.headers).length > 0 ? (
+                      ) : displayLog.headers && Object.keys(displayLog.headers).length > 0 ? (
                         <div className="space-y-1 font-mono text-xs">
-                          {Object.entries(log.headers)
+                          {Object.entries(displayLog.headers)
                             .sort(([a], [b]) => a.localeCompare(b))
                             .map(([key, value]) => (
                               <div key={key} className="flex gap-2">
@@ -516,9 +567,9 @@ export const LogEntry = memo(function ({
                   {activeTab === "raw-headers" && (
                     <div className="px-4 pt-1 pb-3">
                       {/* Copy lives in the log header. */}
-                      {log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? (
+                      {displayLog.rawHeaders && Object.keys(displayLog.rawHeaders).length > 0 ? (
                         <div className="space-y-1 font-mono text-xs">
-                          {Object.entries(log.rawHeaders)
+                          {Object.entries(displayLog.rawHeaders)
                             .sort(([a], [b]) => a.localeCompare(b))
                             .map(([key, value]) => (
                               <div key={key} className="flex gap-2">
@@ -544,16 +595,16 @@ export const LogEntry = memo(function ({
               <TabsContent value="raw">
                 {activeTab === "raw" && (
                   <div className="px-4 pt-1 pb-3 space-y-3">
-                    {log.error !== undefined && log.error !== null && (
+                    {displayLog.error !== undefined && displayLog.error !== null && (
                       <div className="rounded border border-destructive/50 bg-destructive/10 p-3 text-xs">
                         <div className="font-semibold text-destructive mb-1">SSE Error</div>
-                        <div className="text-muted-foreground font-mono">{log.error}</div>
+                        <div className="text-muted-foreground font-mono">{displayLog.error}</div>
                       </div>
                     )}
-                    {log.responseText !== null ? (
+                    {displayLog.responseText !== null ? (
                       <Suspense fallback={<TabFallback />}>
                         <LazyJsonViewerFromString
-                          text={log.responseText}
+                          text={displayLog.responseText}
                           defaultExpandDepth={0}
                           bulkDepth={responseExpansion.bulkDepth}
                           bulkRevision={responseExpansion.bulkRevision}
@@ -562,11 +613,11 @@ export const LogEntry = memo(function ({
                     ) : (
                       <p className="text-xs text-muted-foreground italic">No response</p>
                     )}
-                    {log.streaming === true && (
+                    {displayLog.streaming === true && (
                       <Suspense fallback={<TabFallback />}>
                         <LazyStreamingChunkSequence
-                          logId={log.id}
-                          truncated={log.streamingChunksPath !== null}
+                          logId={displayLog.id}
+                          truncated={displayLog.streamingChunksPath !== null}
                         />
                       </Suspense>
                     )}
@@ -579,15 +630,15 @@ export const LogEntry = memo(function ({
                   <div className="px-4 pt-1 pb-3">
                     <Suspense fallback={<TabFallback />}>
                       <LazyResponseView
-                        responseText={log.responseText}
-                        responseStatus={log.responseStatus}
-                        streaming={log.streaming}
-                        inputTokens={log.inputTokens}
-                        outputTokens={log.outputTokens}
-                        cacheCreationInputTokens={log.cacheCreationInputTokens}
-                        cacheReadInputTokens={log.cacheReadInputTokens}
+                        responseText={displayLog.responseText}
+                        responseStatus={displayLog.responseStatus}
+                        streaming={displayLog.streaming}
+                        inputTokens={displayLog.inputTokens}
+                        outputTokens={displayLog.outputTokens}
+                        cacheCreationInputTokens={displayLog.cacheCreationInputTokens}
+                        cacheReadInputTokens={displayLog.cacheReadInputTokens}
                         apiFormat={resolvedFormat}
-                        error={log.error}
+                        error={displayLog.error}
                       />
                     </Suspense>
                   </div>
@@ -598,7 +649,7 @@ export const LogEntry = memo(function ({
         )}
       </div>
       <Suspense fallback={null}>
-        <LazyReplayDialog log={log} open={replayOpen} onOpenChange={setReplayOpen} />
+        <LazyReplayDialog log={displayLog} open={replayOpen} onOpenChange={setReplayOpen} />
       </Suspense>
     </TooltipProvider>
   );