@tonyclaw/agent-inspector 4.0.1 → 4.0.3

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

@@ -1,1419 +0,0 @@
-import { AlertTriangle, GitCompareArrows, Loader2, RefreshCw } from "lucide-react";
-import { Suspense, type JSX, type ReactNode } from "react";
-import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
-import {
-  CapturedLogSchema,
-  LogBodyChunkSchema,
-  type CapturedLog,
-  type LogBodyPart,
-} from "../../contracts";
-import { ApiTimeoutError, fetchJsonWithTimeout } from "../../lib/apiClient";
-import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
-import { cn } from "../../lib/utils";
-import { LazyFeatureBoundary } from "../errors/SafeErrorBoundary";
-import { stripClaudeCodeBillingHeader } from "../../lib/claudeCodeStrip";
-import { Button } from "../ui/button";
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
-import { useJsonBulkExpansion } from "../ui/json-viewer-bulk";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
-import { useCopyFeedback } from "./useCopyFeedback";
-import type { HeaderTabActions } from "./LogEntryHeader";
-import {
-  LazyJsonViewer,
-  LazyJsonViewerFromString,
-  LazyReplayDialog,
-  LazyRequestAnatomy,
-  LazyResponseView,
-  LazyStreamingChunkSequence,
-} from "./lazy";
-import type { AnatomySegment } from "./anatomy/types";
-import { useAnatomyJump } from "./anatomy/useAnatomyJump";
-import {
-  deleteHydratedLogFromCache,
-  describeFullBodyHydrationError,
-  formatBodyHydrationFootprint,
-  formatBytes,
-  getOrFetchHydratedLog,
-  readHydratedLogFromCache,
-  type FullBodyHydrationError,
-} from "./bodyHydration";
-import { computeHeadersDiff, computeRequestDiff, DiffView } from "./diff";
-import { LogEntryHeader } from "./LogEntryHeader";
-import { RequestTools } from "./RequestToolsPanel";
-import type { CacheTrendEntry } from "./cacheTrend";
-import { getLogFormatAdapter, resolveLogFormat } from "./log-formats";
-import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest, type LogFocusTab } from "./logFocus";
-import type { ToolTraceEvent } from "./viewerState";
-import {
-  shouldShowHeadersDiffButton,
-  shouldShowHeadersTab,
-  shouldShowRawHeadersTab,
-  shouldShowRawRequestTab,
-  shouldShowRequestDiffButton,
-  shouldShowSseTab,
-} from "./logEntryVisibility";
-import { parseRequestTools } from "./requestTools";
-
-/**
- * Lightweight fallback for lazy-loaded tabs. Renders an empty 1px-tall row so
- * the layout doesn't jump while the chunk is fetching.
- */
-function TabFallback(): JSX.Element {
-  return <div className="h-1" aria-hidden="true" />;
-}
-
-function resolveFocusedTab(tab: LogFocusTab, anatomySegments: AnatomySegment[] | null): string {
-  switch (tab) {
-    case "anatomy":
-      return anatomySegments === null ? "request" : "anatomy";
-    case "request":
-      return "request";
-    case "response":
-      return "parsed";
-  }
-}
-
-type BodyHydrationStatus = "idle" | "loading" | "failed";
-type BodyChunkState = "idle" | "loading" | "success" | "failed";
-
-type BodyPreviewState = {
-  status: BodyChunkState;
-  text: string;
-  offset: number;
-  totalBytes: number | null;
-  hasMore: boolean;
-  error: string | null;
-};
-
-const FULL_LOG_HYDRATION_TIMEOUT_MS = 15_000;
-const BODY_CHUNK_TIMEOUT_MS = 15_000;
-const BODY_CHUNK_BYTES = 256 * 1024;
-const CHUNKED_BODY_THRESHOLD_BYTES = 1024 * 1024;
-const COLLAPSED_BODY_ANALYSIS_THRESHOLD_BYTES = 256 * 1024;
-const RAW_TEXT_FAST_PREVIEW_CHARS = 512 * 1024;
-
-const TAB_TRIGGER_CLASS =
-  "h-9 flex-none rounded-md border border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:bg-white/[0.045] hover:text-foreground data-[state=active]:bg-cyan-300/[0.08] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
-
-function createEmptyBodyPreviewState(totalBytes: number | null = null): BodyPreviewState {
-  return {
-    status: "idle",
-    text: "",
-    offset: 0,
-    totalBytes,
-    hasMore: totalBytes !== null && totalBytes > 0,
-    error: null,
-  };
-}
-
-function bodyByteCount(value: number | null | undefined): number {
-  return value ?? 0;
-}
-
-function bodySizeForAnalysis(body: string | null, byteCount: number | null | undefined): number {
-  return byteCount ?? body?.length ?? 0;
-}
-
-function isCompactBody(log: CapturedLog): boolean {
-  return log.bodyContentMode === "compact" || log.bodyContentMode === "truncated";
-}
-
-function shouldUseChunkedBodyLoading(log: CapturedLog): boolean {
-  if (!isCompactBody(log)) return false;
-  return (
-    bodyByteCount(log.rawRequestBodyBytes) > CHUNKED_BODY_THRESHOLD_BYTES ||
-    bodyByteCount(log.responseTextBytes) > CHUNKED_BODY_THRESHOLD_BYTES
-  );
-}
-
-function shouldHydrateLogBody(log: CapturedLog): boolean {
-  return isCompactBody(log) && !shouldUseChunkedBodyLoading(log);
-}
-
-function shouldAnalyzeLogBodies(log: CapturedLog, expanded: boolean): boolean {
-  if (isCompactBody(log)) return false;
-  if (expanded) {
-    return (
-      bodySizeForAnalysis(log.rawRequestBody, log.rawRequestBodyBytes) <=
-        CHUNKED_BODY_THRESHOLD_BYTES &&
-      bodySizeForAnalysis(log.responseText, log.responseTextBytes) <= CHUNKED_BODY_THRESHOLD_BYTES
-    );
-  }
-  return (
-    bodySizeForAnalysis(log.rawRequestBody, log.rawRequestBodyBytes) <=
-      COLLAPSED_BODY_ANALYSIS_THRESHOLD_BYTES &&
-    bodySizeForAnalysis(log.responseText, log.responseTextBytes) <=
-      COLLAPSED_BODY_ANALYSIS_THRESHOLD_BYTES
-  );
-}
-
-function tabNeedsBodyHydration(tab: string): boolean {
-  switch (tab) {
-    case "request":
-    case "raw-request":
-    case "anatomy":
-    case "raw":
-    case "parsed":
-      return true;
-    case "headers":
-    case "raw-headers":
-    case "sse":
-      return false;
-    default:
-      return false;
-  }
-}
-
-function tabNeedsParsedRequest(tab: string): boolean {
-  switch (tab) {
-    case "request":
-    case "anatomy":
-      return true;
-    case "headers":
-    case "raw-headers":
-    case "raw-request":
-    case "raw":
-    case "parsed":
-    case "sse":
-      return false;
-    default:
-      return false;
-  }
-}
-
-function bodyPreviewErrorMessage(error: unknown): string {
-  if (error instanceof ApiTimeoutError) {
-    return "Body preview timed out. The log is still available on disk; try loading again.";
-  }
-  if (error instanceof Error) return error.message;
-  return "Body preview could not be loaded.";
-}
-
-function FullBodyHydrationNotice({
-  status,
-  error,
-  footprint,
-  onRetry,
-}: {
-  status: BodyHydrationStatus;
-  error: FullBodyHydrationError | null;
-  footprint: string | null;
-  onRetry: () => void;
-}): JSX.Element | null {
-  switch (status) {
-    case "idle":
-      return null;
-    case "loading":
-      return (
-        <NoticeBlock tone="loading" title="Loading full bodies">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <span className="flex min-w-0 items-center gap-2">
-              <Loader2 className="size-3.5 shrink-0 animate-spin text-cyan-200" />
-              <span>Loading full request and response bodies from the log store.</span>
-            </span>
-            {footprint !== null && (
-              <span className="rounded border border-cyan-300/15 bg-cyan-300/[0.06] px-2 py-0.5 font-mono text-[11px] text-cyan-100">
-                {footprint}
-              </span>
-            )}
-          </div>
-        </NoticeBlock>
-      );
-    case "failed":
-      return (
-        <NoticeBlock tone="warning" title={error?.title ?? "Full bodies could not be loaded"}>
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <span>{error?.detail ?? "Compact metadata is still available."}</span>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 gap-1.5 text-xs text-amber-100"
-              onClick={onRetry}
-            >
-              <RefreshCw className="size-3" />
-              Retry
-            </Button>
-          </div>
-        </NoticeBlock>
-      );
-  }
-}
-
-function bodyPreviewTextForView(enabled: boolean, state: BodyPreviewState): string | null {
-  if (!enabled) return null;
-  if (state.text !== "") return state.text;
-  if (state.status === "success") return "";
-  return null;
-}
-
-function ExpandedPanel({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: string;
-}): JSX.Element {
-  return (
-    <div
-      className={cn(
-        "bg-black/[0.14] inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-[8px] p-3",
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-}
-
-function EmptyState({ children }: { children: ReactNode }): JSX.Element {
-  return (
-    <div className="bg-white/[0.035] rounded-md px-3 py-5 text-center text-xs italic text-muted-foreground">
-      {children}
-    </div>
-  );
-}
-
-function RawTextBlock({ children }: { children: ReactNode }): JSX.Element {
-  const [showFullText, setShowFullText] = useState(false);
-  const text = typeof children === "string" ? children : null;
-  const shouldPreview = text !== null && text.length > RAW_TEXT_FAST_PREVIEW_CHARS;
-  const visibleChildren =
-    text !== null && shouldPreview && !showFullText
-      ? text.slice(0, RAW_TEXT_FAST_PREVIEW_CHARS)
-      : children;
-
-  useEffect(() => {
-    setShowFullText(false);
-  }, [text]);
-
-  return (
-    <div className="space-y-2">
-      {shouldPreview && !showFullText && (
-        <div className="rounded-md border border-cyan-300/20 bg-cyan-300/[0.06] px-3 py-2 text-xs text-muted-foreground">
-          Showing the first {RAW_TEXT_FAST_PREVIEW_CHARS.toLocaleString()} characters for fast
-          rendering. The full body is preserved and can still be copied from the tab action.
-        </div>
-      )}
-      <pre className="bg-black/[0.18] inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-[8px] p-3 font-mono text-xs leading-relaxed text-muted-foreground">
-        {visibleChildren}
-      </pre>
-      {shouldPreview && (
-        <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={() => setShowFullText((value) => !value)}
-        >
-          {showFullText
-            ? "Collapse fast preview"
-            : `Render full body (${text.length.toLocaleString()} chars)`}
-        </button>
-      )}
-    </div>
-  );
-}
-
-type NoticeTone = "loading" | "warning" | "danger";
-
-const NOTICE_TONE_CLASSES: Record<NoticeTone, string> = {
-  loading: "border-transparent bg-cyan-400/[0.06] text-cyan-100",
-  warning: "border-transparent bg-amber-400/[0.08] text-amber-100",
-  danger: "border-transparent bg-rose-400/[0.08] text-rose-100",
-};
-
-function NoticeBlock({
-  tone,
-  title,
-  children,
-}: {
-  tone: NoticeTone;
-  title?: string;
-  children: ReactNode;
-}): JSX.Element {
-  return (
-    <div
-      className={cn(
-        "mb-3 rounded-md border px-3 py-2 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
-        NOTICE_TONE_CLASSES[tone],
-      )}
-    >
-      {title !== undefined && <div className="mb-1 font-semibold">{title}</div>}
-      <div className="leading-relaxed text-muted-foreground">{children}</div>
-    </div>
-  );
-}
-
-function BodyPreviewNotice({
-  label,
-  state,
-  expectedBytes,
-  onLoadMore,
-}: {
-  label: string;
-  state: BodyPreviewState;
-  expectedBytes: number | null;
-  onLoadMore: () => void;
-}): JSX.Element {
-  const totalBytes = state.totalBytes ?? expectedBytes;
-  const loadedLabel =
-    totalBytes === null
-      ? formatBytes(state.offset)
-      : `${formatBytes(state.offset)} / ${formatBytes(totalBytes)}`;
-  const showLoadMore = state.status !== "loading" && state.hasMore;
-  const actionLabel = state.status === "failed" ? "Retry" : "Load more";
-
-  return (
-    <NoticeBlock
-      tone={state.status === "failed" ? "warning" : "loading"}
-      title={`${label} body preview`}
-    >
-      <div className="flex flex-wrap items-center justify-between gap-2">
-        <span>
-          {state.status === "idle" && totalBytes !== null
-            ? `${label} body is ${formatBytes(totalBytes)}. Loading the first preview chunk.`
-            : `Loaded ${loadedLabel}.`}
-          {state.status === "failed" && state.error !== null && ` ${state.error}`}
-        </span>
-        {showLoadMore && (
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 text-xs text-cyan-100"
-            onClick={onLoadMore}
-          >
-            {actionLabel}
-          </Button>
-        )}
-      </div>
-    </NoticeBlock>
-  );
-}
-
-function SseInlineNotice({
-  error,
-  onOpenSse,
-}: {
-  error: string | null | undefined;
-  onOpenSse?: () => void;
-}): JSX.Element | null {
-  if (error === undefined || error === null) return null;
-  return (
-    <NoticeBlock tone="danger" title="SSE Error">
-      <div className="flex flex-wrap items-center justify-between gap-2">
-        <span className="font-mono">{error}</span>
-        {onOpenSse !== undefined && (
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 text-xs text-rose-100"
-            onClick={onOpenSse}
-          >
-            View SSE
-          </Button>
-        )}
-      </div>
-    </NoticeBlock>
-  );
-}
-
-function SseChunksNotice({ onOpenSse }: { onOpenSse: () => void }): JSX.Element {
-  return (
-    <NoticeBlock tone="loading" title="SSE chunks">
-      <div className="flex flex-wrap items-center justify-between gap-2">
-        <span>Streaming chunks are available in the SSE tab.</span>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 text-xs text-cyan-100"
-          onClick={onOpenSse}
-        >
-          View SSE
-        </Button>
-      </div>
-    </NoticeBlock>
-  );
-}
-
-function HeaderRows({
-  headers,
-  emptyLabel,
-}: {
-  headers: Record<string, string> | undefined;
-  emptyLabel: string;
-}): JSX.Element {
-  const entries =
-    headers === undefined
-      ? []
-      : Object.entries(headers).sort(([left], [right]) => left.localeCompare(right));
-
-  if (entries.length === 0) return <EmptyState>{emptyLabel}</EmptyState>;
-
-  return (
-    <div className="bg-black/[0.14] overflow-hidden rounded-[8px] font-mono text-xs">
-      {entries.map(([key, value]) => (
-        <div
-          key={key}
-          className="grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/[0.055] last:border-b-0"
-        >
-          <div className="min-w-0 truncate bg-white/[0.035] px-2.5 py-2 font-semibold text-cyan-200">
-            {key}
-          </div>
-          <div className="min-w-0 truncate px-2.5 py-2 text-muted-foreground" title={value}>
-            {value}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export type LogEntryProps = {
-  log: CapturedLog;
-  /** Human-facing ordinal inside the current session. Internal lookups still use `log.id`. */
-  displayNumber: number;
-  viewMode?: "simple" | "full";
-  /** Live "strip Claude Code billing header" flag, sourced once at the viewer
-   * container. Hoisted out of `LogEntry` so a single SWR subscription serves
-   * the whole virtualized list (N logs == N subscriptions is the previous
-   * cost).
-   */
-  strip: boolean;
-  /** Slow-response threshold in seconds. `0` disables the warning indicator. */
-  slowResponseThresholdSeconds: number;
-  /** Controls whether timestamps render as compact local time or full ISO strings. */
-  timeDisplayFormat: TimeDisplayFormat;
-  /**
-   * Per-log cache token trend, looked up in the viewer-level trend map.
-   * `null` (or absent) means the header should render with no arrows.
-   */
-  cacheTrend?: CacheTrendEntry | null;
-  /** Callback to open CompareDrawer with this log and its immediate predecessor. */
-  onCompareWithPrevious?: (log: CapturedLog) => void;
-  /** Show client PID/project metadata on the log header row. */
-  showClientMetadata?: boolean;
-  /** Tools called by the response, rendered in the compact log header. */
-  toolEvents?: ToolTraceEvent[];
-};
-
-function DiffToggleButton({
-  active,
-  onClick,
-}: {
-  active: boolean;
-  onClick: (e: React.MouseEvent) => void;
-}): JSX.Element {
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant={active ? "default" : "outline"}
-          size="sm"
-          className={cn(
-            "h-8 border-white/10 text-xs shadow-none",
-            active
-              ? "bg-cyan-300 text-black hover:bg-cyan-200"
-              : "border border-input bg-background hover:bg-accent hover:text-accent-foreground text-muted-foreground hover:text-cyan-100",
-          )}
-          onClick={onClick}
-          aria-pressed={active}
-        >
-          <GitCompareArrows className="size-3.5 mr-1" />
-          {active ? "Showing diff" : "Diff with Raw"}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        {active ? "Hide diff view" : "Compare proxy output against the original raw version"}
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
-const RequestDiffContent = memo(function ({
-  rawBody,
-  displayedBody,
-  emptyLabel,
-}: {
-  rawBody: string | null;
-  displayedBody: string | null;
-  emptyLabel: string;
-}): JSX.Element {
-  const result = useMemo(
-    () => computeRequestDiff(rawBody, displayedBody),
-    [rawBody, displayedBody],
-  );
-  return <DiffView result={result} emptyLabel={emptyLabel} />;
-});
-
-const HeadersDiffContent = memo(function ({
-  rawHeaders,
-  headers,
-  emptyLabel,
-}: {
-  rawHeaders: Record<string, string> | undefined;
-  headers: Record<string, string> | undefined;
-  emptyLabel: string;
-}): JSX.Element {
-  const result = useMemo(() => computeHeadersDiff(rawHeaders, headers), [rawHeaders, headers]);
-  return <DiffView result={result} emptyLabel={emptyLabel} />;
-});
-
-export const LogEntry = memo(function ({
-  log,
-  displayNumber,
-  viewMode = "simple",
-  strip,
-  slowResponseThresholdSeconds,
-  timeDisplayFormat,
-  cacheTrend = null,
-  onCompareWithPrevious,
-  showClientMetadata = true,
-  toolEvents = [],
-}: LogEntryProps): JSX.Element {
-  const [expanded, setExpanded] = useState<boolean>(false);
-  const [replayOpen, setReplayOpen] = useState<boolean>(false);
-  const [headersDiff, setHeadersDiff] = useState<boolean>(false);
-  const [requestDiff, setRequestDiff] = useState<boolean>(false);
-  const [activeTab, setActiveTab] = useState("request");
-  const [focusedToolIndex, setFocusedToolIndex] = useState<number | null>(null);
-  const [toolFocusNonce, setToolFocusNonce] = useState(0);
-  const [expandToPath, setExpandToPath] = useState<string | null>(null);
-  const [hydratedLog, setHydratedLog] = useState<CapturedLog | null>(null);
-  const [bodyHydrationStatus, setBodyHydrationStatus] = useState<BodyHydrationStatus>("idle");
-  const [bodyHydrationError, setBodyHydrationError] = useState<FullBodyHydrationError | null>(null);
-  const [bodyHydrationRetryNonce, setBodyHydrationRetryNonce] = useState(0);
-  const [requestPreview, setRequestPreview] = useState<BodyPreviewState>(() =>
-    createEmptyBodyPreviewState(log.rawRequestBodyBytes ?? null),
-  );
-  const [responsePreview, setResponsePreview] = useState<BodyPreviewState>(() =>
-    createEmptyBodyPreviewState(log.responseTextBytes ?? null),
-  );
-  const requestJsonRef = useRef<HTMLDivElement | null>(null);
-  const logIdRef = useRef(log.id);
-  const bodyHydrationInFlightRef = useRef(false);
-  const userSelectedTabRef = useRef(false);
-  const displayLog = hydratedLog ?? log;
-  const useChunkedBody = hydratedLog === null && shouldUseChunkedBodyLoading(log);
-  const fullBodyHydrationFootprint = useMemo(
-    () => formatBodyHydrationFootprint(log.rawRequestBodyBytes, log.responseTextBytes),
-    [log.rawRequestBodyBytes, log.responseTextBytes],
-  );
-  const requestPreviewBody = bodyPreviewTextForView(useChunkedBody, requestPreview);
-  const responsePreviewBody = bodyPreviewTextForView(useChunkedBody, responsePreview);
-  const rawRequestBodyForView = displayLog.rawRequestBody ?? requestPreviewBody;
-  const responseTextForView = displayLog.responseText ?? responsePreviewBody;
-  const requestPreviewIsActive = displayLog.rawRequestBody === null && requestPreviewBody !== null;
-  const responsePreviewIsActive = displayLog.responseText === null && responsePreviewBody !== null;
-  const requestBodyForViewCanParse =
-    bodySizeForAnalysis(rawRequestBodyForView, log.rawRequestBodyBytes) <=
-    CHUNKED_BODY_THRESHOLD_BYTES;
-  const responseBodyForViewCanParse =
-    bodySizeForAnalysis(responseTextForView, log.responseTextBytes) <= CHUNKED_BODY_THRESHOLD_BYTES;
-  const requestPreviewShouldParse =
-    requestBodyForViewCanParse &&
-    (!requestPreviewIsActive ||
-      (requestPreview.hasMore === false &&
-        bodyByteCount(requestPreview.totalBytes) <= CHUNKED_BODY_THRESHOLD_BYTES));
-  const responsePreviewShouldParse =
-    responseBodyForViewCanParse &&
-    (!responsePreviewIsActive ||
-      (responsePreview.hasMore === false &&
-        bodyByteCount(responsePreview.totalBytes) <= CHUNKED_BODY_THRESHOLD_BYTES));
-  const resolvedFormat = resolveLogFormat(displayLog);
-  const adapter = getLogFormatAdapter(resolvedFormat);
-  const analyzeBodies = shouldAnalyzeLogBodies(displayLog, expanded);
-  const requestAnalysis = useMemo(
-    () => adapter.analyzeRequest(analyzeBodies ? displayLog.rawRequestBody : null),
-    [adapter, analyzeBodies, displayLog.rawRequestBody],
-  );
-  const responseAnalysis = useMemo(
-    () => adapter.analyzeResponse(analyzeBodies ? displayLog.responseText : null),
-    [adapter, analyzeBodies, displayLog.responseText],
-  );
-  const strippedRequestBody = useMemo(() => {
-    if (!strip || resolvedFormat !== "anthropic" || displayLog.rawRequestBody === null) {
-      return null;
-    }
-    return stripClaudeCodeBillingHeader(displayLog.rawRequestBody).body;
-  }, [displayLog.rawRequestBody, resolvedFormat, strip]);
-  const displayedRequestBody = strippedRequestBody ?? rawRequestBodyForView;
-  const requestExpansion = useJsonBulkExpansion(
-    expanded && tabNeedsParsedRequest(activeTab) && requestPreviewShouldParse
-      ? displayedRequestBody
-      : null,
-  );
-  const rawRequestExpansion = useJsonBulkExpansion(
-    activeTab === "raw-request" && requestPreviewShouldParse ? rawRequestBodyForView : null,
-  );
-  const responseExpansion = useJsonBulkExpansion(
-    activeTab === "raw" && responsePreviewShouldParse ? responseTextForView : null,
-  );
-  const showSseTab = shouldShowSseTab(viewMode, displayLog.streaming);
-  const parsedRequestForSummary = requestExpansion.parsedData ?? requestAnalysis.parsed;
-  const calledToolNamesForView = useMemo(() => {
-    const analyzedToolNames = responseAnalysis.toolNames;
-    if (analyzedToolNames !== null) return analyzedToolNames;
-    return toolEvents.map((event) => event.name);
-  }, [responseAnalysis.toolNames, toolEvents]);
-
-  // 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(
-    () =>
-      displayLog.headers && Object.keys(displayLog.headers).length > 0
-        ? JSON.stringify(displayLog.headers, null, 2)
-        : null,
-    [displayLog.headers],
-  );
-  const rawHeadersText = useMemo(
-    () =>
-      displayLog.rawHeaders && Object.keys(displayLog.rawHeaders).length > 0
-        ? JSON.stringify(displayLog.rawHeaders, null, 2)
-        : null,
-    [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(rawRequestBodyForView);
-  const headersCopy = useCopyFeedback(headersText);
-  const rawHeadersCopy = useCopyFeedback(rawHeadersText);
-  const responseCopy = useCopyFeedback(responseTextForView);
-
-  // Per-tab action bundles consumed by the header. The header renders the
-  // entry whose key matches `activeTab`. Tabs without an entry (Context,
-  // Parsed Response) render no header buttons.
-  const tabActions: HeaderTabActions = useMemo(
-    () => ({
-      request: {
-        copyLabel: requestPreviewIsActive ? "Copy loaded request preview" : "Copy request body",
-        copyText: displayedRequestBody,
-        copyCopied: requestCopy.copied,
-        onCopy: requestCopy.copy,
-        expansion: requestPreviewShouldParse
-          ? {
-              isExpanded: requestExpansion.isExpanded,
-              isPending: requestExpansion.isPending,
-              onToggle: requestExpansion.toggle,
-            }
-          : null,
-        // "Diff with Raw" only makes sense when there's a raw body to compare
-        // against (Anthropic + strip pipeline produces one). "Diff with
-        // Previous" only exists when the parent wired up the compare drawer.
-        diffWithRaw: shouldShowRequestDiffButton(
-          resolvedFormat,
-          viewMode,
-          strip,
-          displayLog.rawRequestBody !== null,
-        )
-          ? { active: requestDiff, onToggle: () => setRequestDiff(!requestDiff) }
-          : undefined,
-        diffWithPrevious:
-          onCompareWithPrevious === undefined
-            ? undefined
-            : () => {
-                onCompareWithPrevious(displayLog);
-              },
-      },
-      "raw-request": {
-        copyLabel: requestPreviewIsActive ? "Copy loaded raw request preview" : "Copy raw request",
-        copyText: rawRequestBodyForView,
-        copyCopied: rawRequestCopy.copied,
-        onCopy: rawRequestCopy.copy,
-        expansion: requestPreviewShouldParse
-          ? {
-              isExpanded: rawRequestExpansion.isExpanded,
-              isPending: rawRequestExpansion.isPending,
-              onToggle: rawRequestExpansion.toggle,
-            }
-          : null,
-      },
-      // Tab-level actions mirror the visibility rules in logEntryVisibility:
-      // when the corresponding tab is hidden because the log has no captured
-      // headers, the header bar must not surface a Copy button either. We
-      // therefore omit the key entirely (header renders no actions) instead
-      // of returning a bundle with `copyText: null`.
-      ...(shouldShowHeadersTab(
-        viewMode,
-        displayLog.headers !== undefined && Object.keys(displayLog.headers).length > 0,
-      )
-        ? {
-            headers: {
-              copyLabel: "Copy headers",
-              copyText: headersText,
-              copyCopied: headersCopy.copied,
-              onCopy: headersCopy.copy,
-              // Headers are a flat dict, no JSON tree to expand.
-              expansion: null,
-            },
-          }
-        : {}),
-      ...(shouldShowRawHeadersTab(
-        viewMode,
-        displayLog.rawHeaders !== undefined && Object.keys(displayLog.rawHeaders).length > 0,
-      )
-        ? {
-            "raw-headers": {
-              copyLabel: "Copy raw headers",
-              copyText: rawHeadersText,
-              copyCopied: rawHeadersCopy.copied,
-              onCopy: rawHeadersCopy.copy,
-              expansion: null,
-            },
-          }
-        : {}),
-      raw: {
-        copyLabel: responsePreviewIsActive ? "Copy loaded response preview" : "Copy response",
-        copyText: responseTextForView,
-        copyCopied: responseCopy.copied,
-        onCopy: responseCopy.copy,
-        expansion: responsePreviewShouldParse
-          ? {
-              isExpanded: responseExpansion.isExpanded,
-              isPending: responseExpansion.isPending,
-              onToggle: responseExpansion.toggle,
-            }
-          : null,
-      },
-    }),
-    [
-      displayedRequestBody,
-      requestPreviewIsActive,
-      requestPreviewShouldParse,
-      requestCopy,
-      requestExpansion,
-      requestDiff,
-      displayLog,
-      displayLog.rawRequestBody,
-      rawRequestBodyForView,
-      rawRequestCopy,
-      rawRequestExpansion,
-      headersText,
-      headersCopy,
-      rawHeadersText,
-      rawHeadersCopy,
-      displayLog.responseText,
-      responsePreviewIsActive,
-      responsePreviewShouldParse,
-      responseTextForView,
-      responseCopy,
-      responseExpansion,
-      resolvedFormat,
-      viewMode,
-      strip,
-      onCompareWithPrevious,
-    ],
-  );
-  const anatomySegments = useMemo(
-    () =>
-      parsedRequestForSummary !== null ? adapter.anatomySegments(parsedRequestForSummary) : null,
-    [adapter, parsedRequestForSummary],
-  );
-  const requestTools = useMemo(
-    () => parseRequestTools(parsedRequestForSummary),
-    [parsedRequestForSummary],
-  );
-  const warnings = displayLog.warnings ?? [];
-  const anatomyPaths = useMemo(() => {
-    if (anatomySegments === null) return undefined;
-    return new Set(anatomySegments.map((s) => s.path));
-  }, [anatomySegments]);
-  const jumpToAnatomySegment = useAnatomyJump({
-    containerRef: requestJsonRef,
-    setExpandToPath,
-    ensureTabActive: () => {
-      if (activeTab !== "request") {
-        userSelectedTabRef.current = true;
-        setActiveTab("request");
-      }
-    },
-  });
-  const loadBodyChunk = useCallback(
-    (part: LogBodyPart, offset: number) => {
-      const setPreview = part === "request" ? setRequestPreview : setResponsePreview;
-      setPreview((current) => ({
-        ...current,
-        status: "loading",
-        error: null,
-      }));
-
-      const params = new URLSearchParams({
-        part,
-        offset: String(offset),
-        limit: String(BODY_CHUNK_BYTES),
-      });
-
-      void fetchJsonWithTimeout(
-        `/api/logs/${String(log.id)}/body?${params.toString()}`,
-        LogBodyChunkSchema,
-        BODY_CHUNK_TIMEOUT_MS,
-      )
-        .then((chunk) => {
-          if (logIdRef.current !== log.id) return;
-          setPreview((current) => ({
-            status: "success",
-            text: chunk.offset === 0 ? chunk.text : `${current.text}${chunk.text}`,
-            offset: chunk.nextOffset ?? chunk.totalBytes,
-            totalBytes: chunk.totalBytes,
-            hasMore: chunk.hasMore,
-            error: null,
-          }));
-        })
-        .catch((error: unknown) => {
-          if (logIdRef.current !== log.id) return;
-          setPreview((current) => ({
-            ...current,
-            status: "failed",
-            error: bodyPreviewErrorMessage(error),
-          }));
-        });
-    },
-    [log.id],
-  );
-
-  const retryFullBodyHydration = useCallback(() => {
-    if (bodyHydrationInFlightRef.current) return;
-    deleteHydratedLogFromCache(log.id);
-    setHydratedLog(null);
-    setBodyHydrationStatus("idle");
-    setBodyHydrationError(null);
-    setBodyHydrationRetryNonce((current) => current + 1);
-  }, [log.id]);
-
-  const handleToggleExpanded = useCallback(() => {
-    const nextExpanded = !expanded;
-    if (nextExpanded) {
-      userSelectedTabRef.current = false;
-      setActiveTab(anatomySegments !== null ? "anatomy" : "request");
-    }
-    setExpanded(nextExpanded);
-  }, [anatomySegments, expanded]);
-
-  const openSseTab = useCallback(() => {
-    if (!showSseTab) return;
-    userSelectedTabRef.current = true;
-    setActiveTab("sse");
-  }, [showSseTab]);
-
-  const handleTabChange = useCallback((value: string) => {
-    userSelectedTabRef.current = true;
-    setActiveTab(value);
-  }, []);
-
-  useEffect(() => {
-    logIdRef.current = log.id;
-    bodyHydrationInFlightRef.current = false;
-    setHydratedLog(null);
-    setBodyHydrationStatus("idle");
-    setBodyHydrationError(null);
-    setBodyHydrationRetryNonce(0);
-    userSelectedTabRef.current = false;
-    setRequestPreview(createEmptyBodyPreviewState(log.rawRequestBodyBytes ?? null));
-    setResponsePreview(createEmptyBodyPreviewState(log.responseTextBytes ?? null));
-  }, [log.id, log.rawRequestBodyBytes, log.responseTextBytes]);
-
-  useEffect(() => {
-    if (!expanded) return;
-    if (userSelectedTabRef.current) return;
-    if (activeTab !== "request") return;
-    if (anatomySegments === null) return;
-    setActiveTab("anatomy");
-  }, [activeTab, anatomySegments, expanded]);
-
-  useEffect(() => {
-    if (activeTab !== "sse" || showSseTab) return;
-    setActiveTab("parsed");
-  }, [activeTab, showSseTab]);
-
-  useEffect(() => {
-    if (!expanded) return;
-    if (!tabNeedsBodyHydration(activeTab)) return;
-    if (!shouldHydrateLogBody(log)) return;
-    if (hydratedLog !== null || bodyHydrationInFlightRef.current) return;
-
-    const cached = readHydratedLogFromCache(log.id);
-    if (cached !== null) {
-      setHydratedLog(cached);
-      setBodyHydrationStatus("idle");
-      setBodyHydrationError(null);
-      return;
-    }
-
-    let cancelled = false;
-    bodyHydrationInFlightRef.current = true;
-    setBodyHydrationStatus("loading");
-    setBodyHydrationError(null);
-    void getOrFetchHydratedLog(log.id, () =>
-      fetchJsonWithTimeout(
-        `/api/logs/${String(log.id)}`,
-        CapturedLogSchema,
-        FULL_LOG_HYDRATION_TIMEOUT_MS,
-      ),
-    )
-      .then((fullLog) => {
-        if (cancelled) return;
-        bodyHydrationInFlightRef.current = false;
-        setHydratedLog(fullLog);
-        setBodyHydrationStatus("idle");
-        setBodyHydrationError(null);
-      })
-      .catch((error: unknown) => {
-        if (cancelled) return;
-        bodyHydrationInFlightRef.current = false;
-        setBodyHydrationStatus("failed");
-        setBodyHydrationError(describeFullBodyHydrationError(error));
-      });
-
-    return () => {
-      cancelled = true;
-      bodyHydrationInFlightRef.current = false;
-    };
-  }, [
-    activeTab,
-    expanded,
-    hydratedLog,
-    log.bodyContentMode,
-    log.id,
-    log.rawRequestBodyBytes,
-    log.responseTextBytes,
-    bodyHydrationRetryNonce,
-  ]);
-
-  useEffect(() => {
-    if (!expanded) return;
-    if (!useChunkedBody) return;
-    if (requestPreview.status !== "idle") return;
-    if (activeTab !== "request" && activeTab !== "raw-request" && activeTab !== "anatomy") return;
-    loadBodyChunk("request", 0);
-  }, [activeTab, expanded, loadBodyChunk, requestPreview.status, useChunkedBody]);
-
-  useEffect(() => {
-    if (!expanded) return;
-    if (!useChunkedBody) return;
-    if (responsePreview.status !== "idle") return;
-    if (activeTab !== "parsed" && activeTab !== "raw") return;
-    loadBodyChunk("response", 0);
-  }, [activeTab, expanded, loadBodyChunk, responsePreview.status, useChunkedBody]);
-
-  useEffect(() => {
-    const handleLogFocusRequest = (event: Event): void => {
-      const request = readLogFocusRequest(event);
-      if (request === null) return;
-      if (request.logId !== log.id) return;
-      setExpanded(true);
-      userSelectedTabRef.current = true;
-      setActiveTab(resolveFocusedTab(request.tab, anatomySegments));
-      if (request.tab === "response" && request.toolCallIndex !== undefined) {
-        setFocusedToolIndex(request.toolCallIndex);
-        setToolFocusNonce((current) => current + 1);
-      }
-    };
-
-    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    return () => {
-      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    };
-  }, [anatomySegments, log.id]);
-
-  return (
-    <TooltipProvider>
-      <div
-        className={cn(
-          "bg-card/80 relative mb-1.5 overflow-hidden rounded-[8px] transition-[background-color,box-shadow]",
-          expanded
-            ? "bg-card shadow-[0_18px_60px_rgba(0,0,0,0.30),0_0_0_1px_rgba(103,232,249,0.08)]"
-            : "hover:bg-card",
-        )}
-      >
-        <LogEntryHeader
-          log={displayLog}
-          displayNumber={displayNumber}
-          messageCount={requestAnalysis.messageCount}
-          toolCount={requestAnalysis.toolCount}
-          toolEvents={toolEvents}
-          expanded={expanded}
-          onToggle={handleToggleExpanded}
-          cacheTrend={cacheTrend}
-          slowResponseThresholdSeconds={slowResponseThresholdSeconds}
-          showClientMetadata={showClientMetadata}
-          timeDisplayFormat={timeDisplayFormat}
-          activeTab={activeTab}
-          tabActions={tabActions}
-          onReplay={
-            onCompareWithPrevious === undefined
-              ? undefined
-              : () => {
-                  setReplayOpen(true);
-                }
-          }
-        />
-
-        {expanded && (
-          <div
-            className="relative bg-black/[0.14] pt-2"
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => e.stopPropagation()}
-          >
-            <div
-              className="pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-white/[0.05] to-transparent"
-              aria-hidden="true"
-            />
-            <LazyFeatureBoundary feature="Log details">
-              <Tabs value={activeTab} onValueChange={handleTabChange} className="gap-2">
-                <TabsList
-                  variant="line"
-                  className="bg-white/[0.04] inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-[8px] p-1"
-                >
-                  {shouldShowRawHeadersTab(
-                    viewMode,
-                    displayLog.rawHeaders !== undefined &&
-                      Object.keys(displayLog.rawHeaders).length > 0,
-                  ) && (
-                    <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-headers">
-                      Raw Headers
-                    </TabsTrigger>
-                  )}
-                  {shouldShowHeadersTab(
-                    viewMode,
-                    displayLog.headers !== undefined && Object.keys(displayLog.headers).length > 0,
-                  ) && (
-                    <TabsTrigger className={TAB_TRIGGER_CLASS} value="headers">
-                      Headers
-                    </TabsTrigger>
-                  )}
-                  {anatomySegments !== null && (
-                    <TabsTrigger className={TAB_TRIGGER_CLASS} value="anatomy">
-                      Context
-                    </TabsTrigger>
-                  )}
-                  {shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && (
-                    <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-request">
-                      Raw Request
-                    </TabsTrigger>
-                  )}
-                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="request">
-                    Request
-                  </TabsTrigger>
-                  {viewMode === "full" && (
-                    <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw">
-                      Raw Response
-                    </TabsTrigger>
-                  )}
-                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="parsed">
-                    Response
-                  </TabsTrigger>
-                  {showSseTab && (
-                    <TabsTrigger className={TAB_TRIGGER_CLASS} value="sse">
-                      SSE
-                    </TabsTrigger>
-                  )}
-                </TabsList>
-
-                {shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && (
-                  <TabsContent value="raw-request">
-                    {activeTab === "raw-request" && (
-                      <ExpandedPanel>
-                        <FullBodyHydrationNotice
-                          status={bodyHydrationStatus}
-                          error={bodyHydrationError}
-                          footprint={fullBodyHydrationFootprint}
-                          onRetry={retryFullBodyHydration}
-                        />
-                        {useChunkedBody && (
-                          <BodyPreviewNotice
-                            label="Request"
-                            state={requestPreview}
-                            expectedBytes={log.rawRequestBodyBytes ?? null}
-                            onLoadMore={() => loadBodyChunk("request", requestPreview.offset)}
-                          />
-                        )}
-                        {rawRequestBodyForView === null ? (
-                          <EmptyState>
-                            {useChunkedBody ? "Request preview is loading" : "No request body"}
-                          </EmptyState>
-                        ) : rawRequestExpansion.parsedData !== null ? (
-                          <Suspense fallback={<TabFallback />}>
-                            <LazyJsonViewer
-                              data={rawRequestExpansion.parsedData}
-                              bulkDepth={rawRequestExpansion.bulkDepth}
-                              bulkRevision={rawRequestExpansion.bulkRevision}
-                            />
-                          </Suspense>
-                        ) : (
-                          <RawTextBlock>{rawRequestBodyForView}</RawTextBlock>
-                        )}
-                      </ExpandedPanel>
-                    )}
-                  </TabsContent>
-                )}
-
-                <TabsContent value="request">
-                  {activeTab === "request" && (
-                    <ExpandedPanel>
-                      <FullBodyHydrationNotice
-                        status={bodyHydrationStatus}
-                        error={bodyHydrationError}
-                        footprint={fullBodyHydrationFootprint}
-                        onRetry={retryFullBodyHydration}
-                      />
-                      {useChunkedBody && (
-                        <BodyPreviewNotice
-                          label="Request"
-                          state={requestPreview}
-                          expectedBytes={log.rawRequestBodyBytes ?? null}
-                          onLoadMore={() => loadBodyChunk("request", requestPreview.offset)}
-                        />
-                      )}
-                      {warnings.length > 0 && (
-                        <NoticeBlock tone="warning">
-                          <div className="flex items-center gap-2 font-semibold text-amber-300">
-                            <AlertTriangle className="size-3.5" />
-                            Tool schema warnings
-                          </div>
-                          <ul className="mt-2 space-y-1 text-muted-foreground">
-                            {warnings.map((warning) => (
-                              <li key={warning}>{warning}</li>
-                            ))}
-                          </ul>
-                        </NoticeBlock>
-                      )}
-                      <RequestTools
-                        summary={requestTools}
-                        calledToolNames={calledToolNamesForView}
-                      />
-                      {/* All tab actions (Copy, Expand, Diff with Raw, Diff with
-                        Previous) live in the log header. The body is just
-                        the diff or JSON view, depending on toggle state. */}
-                      {requestDiff ? (
-                        <RequestDiffContent
-                          rawBody={displayLog.rawRequestBody}
-                          displayedBody={displayedRequestBody}
-                          emptyLabel="No transformation applied; raw and sent request bodies are identical."
-                        />
-                      ) : (
-                        <div ref={requestJsonRef}>
-                          {displayedRequestBody === null ? (
-                            <EmptyState>
-                              {useChunkedBody ? "Request preview is loading" : "No request body"}
-                            </EmptyState>
-                          ) : requestExpansion.parsedData !== null ? (
-                            <Suspense fallback={<TabFallback />}>
-                              <LazyJsonViewer
-                                data={requestExpansion.parsedData}
-                                bulkDepth={requestExpansion.bulkDepth}
-                                bulkRevision={requestExpansion.bulkRevision}
-                                anatomyPaths={anatomyPaths}
-                                expandToPath={expandToPath}
-                              />
-                            </Suspense>
-                          ) : (
-                            <RawTextBlock>{displayedRequestBody}</RawTextBlock>
-                          )}
-                        </div>
-                      )}
-                    </ExpandedPanel>
-                  )}
-                </TabsContent>
-
-                {anatomySegments !== null && (
-                  <TabsContent value="anatomy">
-                    {activeTab === "anatomy" && (
-                      <ExpandedPanel className="p-0">
-                        <Suspense fallback={<TabFallback />}>
-                          <LazyRequestAnatomy
-                            parsed={requestExpansion.parsedData}
-                            inputTokens={displayLog.inputTokens ?? null}
-                            model={displayLog.model}
-                            segments={anatomySegments}
-                            onSegmentActivate={jumpToAnatomySegment}
-                          />
-                        </Suspense>
-                      </ExpandedPanel>
-                    )}
-                  </TabsContent>
-                )}
-
-                {shouldShowHeadersTab(
-                  viewMode,
-                  displayLog.headers !== undefined && Object.keys(displayLog.headers).length > 0,
-                ) && (
-                  <TabsContent value="headers">
-                    {activeTab === "headers" && (
-                      <ExpandedPanel>
-                        {/* Copy lives in the log header. */}
-                        <div className="flex justify-end gap-2 mb-2">
-                          {shouldShowHeadersDiffButton(
-                            viewMode,
-                            displayLog.rawHeaders !== undefined &&
-                              Object.keys(displayLog.rawHeaders).length > 0,
-                          ) && (
-                            <DiffToggleButton
-                              active={headersDiff}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                setHeadersDiff(!headersDiff);
-                              }}
-                            />
-                          )}
-                        </div>
-                        {headersDiff ? (
-                          <HeadersDiffContent
-                            rawHeaders={displayLog.rawHeaders}
-                            headers={displayLog.headers}
-                            emptyLabel="No transformation applied; raw and processed headers are identical."
-                          />
-                        ) : (
-                          <HeaderRows
-                            headers={displayLog.headers}
-                            emptyLabel="No headers captured"
-                          />
-                        )}
-                      </ExpandedPanel>
-                    )}
-                  </TabsContent>
-                )}
-
-                {shouldShowRawHeadersTab(
-                  viewMode,
-                  displayLog.rawHeaders !== undefined &&
-                    Object.keys(displayLog.rawHeaders).length > 0,
-                ) && (
-                  <TabsContent value="raw-headers">
-                    {activeTab === "raw-headers" && (
-                      <ExpandedPanel>
-                        {/* Copy lives in the log header. */}
-                        <HeaderRows
-                          headers={displayLog.rawHeaders}
-                          emptyLabel="No raw headers captured"
-                        />
-                      </ExpandedPanel>
-                    )}
-                  </TabsContent>
-                )}
-
-                <TabsContent value="raw">
-                  {activeTab === "raw" && (
-                    <ExpandedPanel className="space-y-3">
-                      <FullBodyHydrationNotice
-                        status={bodyHydrationStatus}
-                        error={bodyHydrationError}
-                        footprint={fullBodyHydrationFootprint}
-                        onRetry={retryFullBodyHydration}
-                      />
-                      {useChunkedBody && (
-                        <BodyPreviewNotice
-                          label="Response"
-                          state={responsePreview}
-                          expectedBytes={log.responseTextBytes ?? null}
-                          onLoadMore={() => loadBodyChunk("response", responsePreview.offset)}
-                        />
-                      )}
-                      <SseInlineNotice
-                        error={displayLog.error}
-                        onOpenSse={showSseTab ? openSseTab : undefined}
-                      />
-                      {responseTextForView !== null && responsePreviewShouldParse ? (
-                        <Suspense fallback={<TabFallback />}>
-                          <LazyJsonViewerFromString
-                            text={responseTextForView}
-                            defaultExpandDepth={0}
-                            bulkDepth={responseExpansion.bulkDepth}
-                            bulkRevision={responseExpansion.bulkRevision}
-                          />
-                        </Suspense>
-                      ) : responseTextForView !== null ? (
-                        <RawTextBlock>{responseTextForView}</RawTextBlock>
-                      ) : (
-                        <EmptyState>
-                          {useChunkedBody ? "Response preview is loading" : "No response"}
-                        </EmptyState>
-                      )}
-                      {showSseTab && <SseChunksNotice onOpenSse={openSseTab} />}
-                    </ExpandedPanel>
-                  )}
-                </TabsContent>
-
-                {showSseTab && (
-                  <TabsContent value="sse">
-                    {activeTab === "sse" && (
-                      <ExpandedPanel className="space-y-3">
-                        {displayLog.error !== undefined && displayLog.error !== null && (
-                          <NoticeBlock tone="danger" title="SSE Error">
-                            <span className="font-mono">{displayLog.error}</span>
-                          </NoticeBlock>
-                        )}
-                        <Suspense fallback={<TabFallback />}>
-                          <LazyStreamingChunkSequence
-                            logId={displayLog.id}
-                            truncated={displayLog.streamingChunksPath !== null}
-                          />
-                        </Suspense>
-                      </ExpandedPanel>
-                    )}
-                  </TabsContent>
-                )}
-
-                <TabsContent value="parsed">
-                  {activeTab === "parsed" && (
-                    <ExpandedPanel>
-                      <FullBodyHydrationNotice
-                        status={bodyHydrationStatus}
-                        error={bodyHydrationError}
-                        footprint={fullBodyHydrationFootprint}
-                        onRetry={retryFullBodyHydration}
-                      />
-                      {useChunkedBody && (
-                        <BodyPreviewNotice
-                          label="Response"
-                          state={responsePreview}
-                          expectedBytes={log.responseTextBytes ?? null}
-                          onLoadMore={() => loadBodyChunk("response", responsePreview.offset)}
-                        />
-                      )}
-                      <SseInlineNotice
-                        error={displayLog.error}
-                        onOpenSse={showSseTab ? openSseTab : undefined}
-                      />
-                      {responsePreviewIsActive && !responsePreviewShouldParse ? (
-                        <RawTextBlock>{responseTextForView}</RawTextBlock>
-                      ) : (
-                        <Suspense fallback={<TabFallback />}>
-                          <LazyResponseView
-                            responseText={responseTextForView}
-                            responseStatus={displayLog.responseStatus}
-                            streaming={displayLog.streaming}
-                            inputTokens={displayLog.inputTokens}
-                            outputTokens={displayLog.outputTokens}
-                            cacheCreationInputTokens={displayLog.cacheCreationInputTokens}
-                            cacheReadInputTokens={displayLog.cacheReadInputTokens}
-                            apiFormat={resolvedFormat}
-                            focusedToolIndex={focusedToolIndex}
-                            toolFocusNonce={toolFocusNonce}
-                          />
-                        </Suspense>
-                      )}
-                    </ExpandedPanel>
-                  )}
-                </TabsContent>
-              </Tabs>
-            </LazyFeatureBoundary>
-          </div>
-        )}
-      </div>
-      <LazyFeatureBoundary feature="Replay">
-        <Suspense fallback={null}>
-          <LazyReplayDialog
-            log={displayLog}
-            displayNumber={displayNumber}
-            open={replayOpen}
-            onOpenChange={setReplayOpen}
-          />
-        </Suspense>
-      </LazyFeatureBoundary>
-    </TooltipProvider>
-  );
-});