@tonyclaw/agent-inspector 2.1.13 → 2.1.14

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

@@ -34,15 +34,48 @@ import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/
 import type { CacheTrend } from "./cacheTrend";
 
 const STATUS_BADGE_CLASSES: Record<StatusCategory, string> = {
-  success: "bg-emerald-500/15 text-emerald-400 border-emerald-500/25",
-  client_error: "bg-amber-500/15 text-amber-400 border-amber-500/25",
-  server_error: "bg-rose-500/15 text-rose-400 border-rose-500/25",
-  pending: "bg-muted text-muted-foreground border-border",
+  success: "bg-emerald-400/[0.08] text-emerald-200 border-emerald-300/25",
+  client_error: "bg-amber-300/[0.10] text-amber-100 border-amber-300/30",
+  server_error: "bg-rose-400/[0.10] text-rose-100 border-rose-300/30",
+  pending: "bg-cyan-300/[0.08] text-cyan-100 border-cyan-300/25",
+};
+
+const STATUS_CUE_CLASSES: Record<
+  StatusCategory,
+  {
+    frame: string;
+    dot: string;
+    rail: string;
+  }
+> = {
+  success: {
+    frame: "border-emerald-300/20 bg-emerald-300/[0.06] text-emerald-100",
+    dot: "bg-emerald-300 shadow-[0_0_14px_rgba(110,231,183,0.8)]",
+    rail: "bg-emerald-300/45 shadow-[0_0_22px_rgba(110,231,183,0.28)]",
+  },
+  client_error: {
+    frame: "border-amber-300/25 bg-amber-300/[0.08] text-amber-100",
+    dot: "bg-amber-200 shadow-[0_0_14px_rgba(252,211,77,0.8)]",
+    rail: "bg-amber-300/50 shadow-[0_0_22px_rgba(252,211,77,0.28)]",
+  },
+  server_error: {
+    frame: "border-rose-300/25 bg-rose-300/[0.08] text-rose-100",
+    dot: "bg-rose-300 shadow-[0_0_14px_rgba(253,164,175,0.8)]",
+    rail: "bg-rose-300/50 shadow-[0_0_22px_rgba(253,164,175,0.28)]",
+  },
+  pending: {
+    frame: "border-cyan-300/25 bg-cyan-300/[0.08] text-cyan-100",
+    dot: "bg-cyan-200 shadow-[0_0_14px_rgba(103,232,249,0.8)]",
+    rail: "bg-cyan-300/50 shadow-[0_0_22px_rgba(103,232,249,0.28)]",
+  },
 };
 
 const HEADER_ACTION_BUTTON_CLASS =
   "size-8 border-white/10 bg-[#0a0d11] text-muted-foreground shadow-none hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100";
 
+const TELEMETRY_CHIP_CLASS =
+  "flex h-7 items-center gap-1 rounded-md border border-white/10 bg-black/20 px-2 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]";
+
 function formatElapsed(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
   return `${(ms / 1000).toFixed(1)}s`;
@@ -53,6 +86,19 @@ function formatTokenRate(tokensPerSecond: number): string {
   return `${tokensPerSecond.toFixed(1)}/s`;
 }
 
+function statusCueLabel(category: StatusCategory, status: number | null): string {
+  switch (category) {
+    case "success":
+      return status === null ? "OK" : String(status);
+    case "client_error":
+      return status === null ? "WARN" : String(status);
+    case "server_error":
+      return status === null ? "FAIL" : String(status);
+    case "pending":
+      return "ROLL";
+  }
+}
+
 /**
  * Inline trend indicator: small arrow (green up / red down) plus the absolute
  * delta in compact form. Returns `null` when there is no trend to display.
@@ -169,6 +215,8 @@ export const LogEntryHeader = memo(function ({
     log.clientProjectFolder !== "";
   const hasClientCwd =
     log.clientCwd !== null && log.clientCwd !== undefined && log.clientCwd !== "";
+  const statusCue = STATUS_CUE_CLASSES[statusCategory];
+  const statusLabel = statusCueLabel(statusCategory, log.responseStatus);
 
   return (
     <TooltipProvider>
@@ -179,9 +227,11 @@ export const LogEntryHeader = memo(function ({
         data-nav-id={`log-${log.id}`}
         data-nav-action={expanded ? "collapse" : "expand"}
         className={cn(
-          "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 px-3 py-1.5 cursor-pointer transition-colors",
-          expanded ? "bg-[#0c1015]" : "hover:bg-muted/30",
-          "select-none",
+          "group/header relative isolate flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 overflow-hidden px-3 py-2 cursor-pointer transition-[background-color,border-color,box-shadow]",
+          expanded
+            ? "bg-[linear-gradient(90deg,#0f1720_0%,#090d12_50%,#07090d_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]"
+            : "bg-[#080b10] hover:bg-[#0b1016]",
+          "select-none before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-white/10",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
         )}
         onClick={onToggle}
@@ -192,13 +242,29 @@ export const LogEntryHeader = memo(function ({
           }
         }}
       >
+        <span
+          className={cn(
+            "absolute left-0 top-2 bottom-2 w-0.5 rounded-r-full transition-colors",
+            statusCue.rail,
+          )}
+          aria-hidden="true"
+        />
         {/* Request ID */}
-        <span className="text-blue-400/80 font-mono text-xs font-semibold tabular-nums shrink-0">
-          #{log.id}
+        <span
+          className={cn(
+            "inline-flex h-8 shrink-0 items-center gap-2 rounded-md border px-2 font-mono shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+            statusCue.frame,
+          )}
+        >
+          <span className={cn("size-1.5 rounded-full", statusCue.dot)} aria-hidden="true" />
+          <span className="text-[9px] font-semibold uppercase tracking-normal text-current/65">
+            Shot
+          </span>
+          <span className="text-xs font-semibold tabular-nums">#{log.id}</span>
         </span>
 
         {/* Request start time */}
-        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+        <span className="flex h-7 items-center gap-1 rounded-md border border-white/10 bg-black/20 px-2 text-muted-foreground text-xs shrink-0">
           <Clock className="size-3" />
           <span className="font-mono tabular-nums" title={log.timestamp}>
             {formatTimestamp(log.timestamp, timeDisplayFormat)}
@@ -212,31 +278,31 @@ export const LogEntryHeader = memo(function ({
         {/* Response Status — only shown for non-200 or pending. Each category
             carries a distinct icon in addition to color so the meaning is
             legible without color perception. */}
-        {statusCategory !== "success" && (
-          <Badge
-            variant="outline"
-            className={cn(
-              "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums gap-1",
-              STATUS_BADGE_CLASSES[statusCategory],
-            )}
-          >
-            {statusCategory === "server_error" ? (
-              <OctagonAlert className="size-3" aria-label="Server error" />
-            ) : statusCategory === "client_error" ? (
-              <AlertTriangle className="size-3" aria-label="Client error" />
-            ) : statusCategory === "pending" ? (
-              <Loader2 className="size-3 animate-spin" aria-label="Pending" />
-            ) : null}
-            {log.responseStatus}
-          </Badge>
-        )}
+        <Badge
+          variant="outline"
+          className={cn(
+            "h-6 gap-1 rounded-md px-2 py-0 font-mono text-[10px] font-semibold uppercase tabular-nums shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+            STATUS_BADGE_CLASSES[statusCategory],
+          )}
+        >
+          {statusCategory === "success" ? (
+            <Check className="size-3" aria-label="Success" />
+          ) : statusCategory === "server_error" ? (
+            <OctagonAlert className="size-3" aria-label="Server error" />
+          ) : statusCategory === "client_error" ? (
+            <AlertTriangle className="size-3" aria-label="Client error" />
+          ) : (
+            <Loader2 className="size-3 animate-spin" aria-label="Pending" />
+          )}
+          {statusLabel}
+        </Badge>
 
         {warningCount > 0 && (
           <Tooltip>
             <TooltipTrigger asChild>
               <Badge
                 variant="outline"
-                className="text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums gap-1 bg-amber-500/15 text-amber-400 border-amber-500/25"
+                className="h-6 gap-1 rounded-md border-amber-300/30 bg-amber-300/[0.10] px-2 py-0 font-mono text-[10px] tabular-nums text-amber-100"
               >
                 <AlertTriangle className="size-3" aria-label="Tool schema warnings" />
                 {warningCount}
@@ -258,7 +324,12 @@ export const LogEntryHeader = memo(function ({
           (isSlowResponse ? (
             <Tooltip>
               <TooltipTrigger asChild>
-                <span className="flex items-center gap-1 text-xs text-amber-400 shrink-0">
+                <span
+                  className={cn(
+                    TELEMETRY_CHIP_CLASS,
+                    "shrink-0 border-amber-300/25 text-amber-200",
+                  )}
+                >
                   <Clock className="size-3" />
                   <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
                   <AlertTriangle className="size-3" aria-label="Slow response" />
@@ -270,7 +341,7 @@ export const LogEntryHeader = memo(function ({
               </TooltipContent>
             </Tooltip>
           ) : (
-            <span className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
               <Clock className="size-3" />
               <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
             </span>
@@ -280,7 +351,7 @@ export const LogEntryHeader = memo(function ({
         {log.streaming && firstChunkLabel !== null && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className="flex items-center gap-1 text-xs text-cyan-400 shrink-0">
+              <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
                 <Radio className="size-3" />
                 <span className="font-mono tabular-nums">first {firstChunkLabel}</span>
               </span>
@@ -291,7 +362,7 @@ export const LogEntryHeader = memo(function ({
         {log.streaming && tokenRateLabel !== null && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className="flex items-center gap-1 text-xs text-emerald-400 shrink-0">
+              <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-emerald-300")}>
                 <Gauge className="size-3" />
                 <span className="font-mono tabular-nums">{tokenRateLabel}</span>
               </span>
@@ -302,7 +373,7 @@ export const LogEntryHeader = memo(function ({
 
         {/* Token counts */}
         {hasTokens && (
-          <span className="flex min-w-0 items-center gap-1 text-xs sm:shrink-0">
+          <span className={cn(TELEMETRY_CHIP_CLASS, "min-w-0 sm:shrink-0")}>
             <Zap className="size-3 text-muted-foreground" />
             <span className="flex min-w-0 flex-wrap items-center gap-x-1 font-mono tabular-nums">
               <span
@@ -327,7 +398,7 @@ export const LogEntryHeader = memo(function ({
         )}
         {/* Cache tokens */}
         {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
-          <span className="flex items-center gap-1 text-xs shrink-0">
+          <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0")}>
             <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
             <span className="font-mono tabular-nums text-emerald-400">
               KV Cache +{formatTokens(log.cacheCreationInputTokens)}
@@ -335,7 +406,7 @@ export const LogEntryHeader = memo(function ({
           </span>
         )}
         {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
-          <span className="flex items-center gap-1 text-xs shrink-0">
+          <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0")}>
             <CacheTrendIndicator trend={cacheTrend?.read ?? null} />
             <span className="font-mono tabular-nums text-purple-400">
               KV Cache ~{formatTokens(log.cacheReadInputTokens)}
@@ -345,7 +416,7 @@ export const LogEntryHeader = memo(function ({
 
         {/* Message count */}
         {messageCount !== null && (
-          <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+          <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
             <MessageSquare className="size-3" />
             <span className="font-mono tabular-nums">{messageCount}</span>
           </span>
@@ -353,7 +424,7 @@ export const LogEntryHeader = memo(function ({
 
         {/* Tool count */}
         {toolCount !== null && (
-          <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+          <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
             <Wrench className="size-3" />
             <span className="font-mono tabular-nums">{toolCount}</span>
           </span>
@@ -362,7 +433,7 @@ export const LogEntryHeader = memo(function ({
         {/* Origin */}
         {log.origin !== null && (
           <span
-            className="hidden xl:flex items-center gap-1 text-muted-foreground text-xs shrink-0"
+            className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-muted-foreground xl:flex")}
             title={`Origin: ${log.origin}`}
           >
             <Globe className="size-3" />
@@ -376,7 +447,7 @@ export const LogEntryHeader = memo(function ({
         {(hasClientPid || hasClientProjectFolder) && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className="hidden xl:flex items-center gap-1 text-purple-400/80 text-xs shrink-0">
+              <span className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-purple-300 xl:flex")}>
                 <FileTerminal className="size-3" />
                 {hasClientProjectFolder ? (
                   <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>

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

@@ -13,12 +13,11 @@ import {
   Terminal,
   Wrench,
 } from "lucide-react";
-import { memo, useMemo, useState, type JSX } from "react";
+import { memo, Suspense, useMemo, useState, type JSX } from "react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { Collapsible, CollapsibleContent } from "../ui/collapsible";
-import { JsonViewer } from "../ui/json-viewer";
 import { safeJsonValue } from "../ui/json-viewer-bulk";
 import { ScrollArea } from "../ui/scroll-area";
 import type {
@@ -26,6 +25,7 @@ import type {
   RequestToolDefinition,
   RequestToolsSummary,
 } from "./requestTools";
+import { LazyJsonViewer } from "./lazy";
 import { useCopyFeedback } from "./useCopyFeedback";
 
 type RequestToolsProps = {
@@ -152,17 +152,23 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
           </button>
         </div>
         <CollapsibleContent>
-          <div className="space-y-2 border-t border-white/10 bg-white/[0.02] px-2.5 py-2">
-            {tool.description !== null && (
-              <p className="text-xs leading-relaxed text-muted-foreground">{tool.description}</p>
-            )}
-            <RequiredParameters names={tool.requiredParameters} />
-            {tool.schema !== null && (
-              <ScrollArea className="max-h-64 rounded-md border border-white/10 bg-[#06080b] p-2">
-                <JsonViewer data={safeJsonValue(tool.schema)} defaultExpandDepth={0} />
-              </ScrollArea>
-            )}
-          </div>
+          {open && (
+            <div className="space-y-2 border-t border-white/10 bg-white/[0.02] px-2.5 py-2">
+              {tool.description !== null && (
+                <p className="text-xs leading-relaxed text-muted-foreground">{tool.description}</p>
+              )}
+              <RequiredParameters names={tool.requiredParameters} />
+              {tool.schema !== null && (
+                <ScrollArea className="max-h-64 rounded-md border border-white/10 bg-[#06080b] p-2">
+                  <Suspense
+                    fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}
+                  >
+                    <LazyJsonViewer data={safeJsonValue(tool.schema)} defaultExpandDepth={0} />
+                  </Suspense>
+                </ScrollArea>
+              )}
+            </div>
+          )}
         </CollapsibleContent>
       </div>
     </Collapsible>

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

@@ -1,9 +1,9 @@
-import { memo, useState, useEffect, useMemo, type JSX } from "react";
+import { memo, Suspense, useState, useEffect, useMemo, type JSX } from "react";
 import { ChevronDown, ChevronRight, Loader2 } from "lucide-react";
 import { Badge } from "../ui/badge";
-import { JsonViewer } from "../ui/json-viewer";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import type { StreamingChunk } from "../../contracts";
+import { LazyJsonViewer } from "./lazy";
 
 export type StreamingChunkSequenceProps = {
   logId: number;
@@ -140,7 +140,13 @@ export const StreamingChunkSequence = memo(function StreamingChunkSequence({
                           {chunk.type}
                         </span>
                       </div>
-                      <JsonViewer data={chunk} defaultExpandDepth={0} showCopy />
+                      <Suspense
+                        fallback={
+                          <div className="text-xs text-muted-foreground">Loading JSON...</div>
+                        }
+                      >
+                        <LazyJsonViewer data={chunk} defaultExpandDepth={0} showCopy />
+                      </Suspense>
                     </div>
                   ))}
                 </div>

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

@@ -1,4 +1,13 @@
-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";
@@ -9,7 +18,12 @@ import { ProviderLogo, detectProvider, type Provider } from "../providers/Provid
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 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]);
@@ -120,7 +156,7 @@ export const TurnGroup = memo(function TurnGroup({
   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 +190,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,7 +298,7 @@ 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,
               )}
             >

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>
+  );
+}