@tonyclaw/agent-inspector 2.0.17 → 2.0.19

package/src/cli/templates/skill-onboard.ts

@@ -101,8 +101,6 @@ agent_inspector_data_dir() {
     case "$AGENT_INSPECTOR_DATA_DIR" in /*) printf '%s\n' "$AGENT_INSPECTOR_DATA_DIR" ;; *) printf '%s\n' "$base/$AGENT_INSPECTOR_DATA_DIR" ;; esac
   elif [ -n "\${AGENT_INSPECTOR_CONFIG_DIR:-}" ]; then
     case "$AGENT_INSPECTOR_CONFIG_DIR" in /*) printf '%s\n' "$AGENT_INSPECTOR_CONFIG_DIR" ;; *) printf '%s\n' "$base/$AGENT_INSPECTOR_CONFIG_DIR" ;; esac
-  elif { [ ! -e "$base/.agent-inspector/providers.json" ] && [ ! -e "$base/.agent-inspector/config.json" ] && [ ! -e "$base/.agent-inspector/logs" ] && [ ! -e "$base/.agent-inspector/chunks" ]; } && { [ -e "$base/.llm-inspector/providers.json" ] || [ -e "$base/.llm-inspector/config.json" ] || [ -e "$base/.llm-inspector/logs" ] || [ -e "$base/.llm-inspector/chunks" ]; }; then
-    printf '%s\n' "$base/.llm-inspector"
   else
     printf '%s\n' "$base/.agent-inspector"
   fi
@@ -149,14 +147,7 @@ function Resolve-AgentInspectorDataDir {
     if ([System.IO.Path]::IsPathRooted($env:AGENT_INSPECTOR_CONFIG_DIR)) { return $env:AGENT_INSPECTOR_CONFIG_DIR }
     return (Join-Path $base $env:AGENT_INSPECTOR_CONFIG_DIR)
   }
-  $current = Join-Path $base '.agent-inspector'
-  $legacy = Join-Path $base '.llm-inspector'
-  $currentHasState = (Test-Path (Join-Path $current 'providers.json')) -or (Test-Path (Join-Path $current 'config.json')) -or (Test-Path (Join-Path $current 'logs')) -or (Test-Path (Join-Path $current 'chunks'))
-  $legacyHasState = (Test-Path (Join-Path $legacy 'providers.json')) -or (Test-Path (Join-Path $legacy 'config.json')) -or (Test-Path (Join-Path $legacy 'logs')) -or (Test-Path (Join-Path $legacy 'chunks'))
-  if (-not $currentHasState -and $legacyHasState) {
-    return $legacy
-  }
-  return $current
+  return (Join-Path $base '.agent-inspector')
 }
 $dataDir = Resolve-AgentInspectorDataDir
 $providers = Join-Path $dataDir 'providers.json'
@@ -272,8 +263,6 @@ agent_inspector_data_dir() {
     case "$AGENT_INSPECTOR_DATA_DIR" in /*) printf '%s\n' "$AGENT_INSPECTOR_DATA_DIR" ;; *) printf '%s\n' "$base/$AGENT_INSPECTOR_DATA_DIR" ;; esac
   elif [ -n "\${AGENT_INSPECTOR_CONFIG_DIR:-}" ]; then
     case "$AGENT_INSPECTOR_CONFIG_DIR" in /*) printf '%s\n' "$AGENT_INSPECTOR_CONFIG_DIR" ;; *) printf '%s\n' "$base/$AGENT_INSPECTOR_CONFIG_DIR" ;; esac
-  elif { [ ! -e "$base/.agent-inspector/providers.json" ] && [ ! -e "$base/.agent-inspector/config.json" ] && [ ! -e "$base/.agent-inspector/logs" ] && [ ! -e "$base/.agent-inspector/chunks" ]; } && { [ -e "$base/.llm-inspector/providers.json" ] || [ -e "$base/.llm-inspector/config.json" ] || [ -e "$base/.llm-inspector/logs" ] || [ -e "$base/.llm-inspector/chunks" ]; }; then
-    printf '%s\n' "$base/.llm-inspector"
   else
     printf '%s\n' "$base/.agent-inspector"
   fi
@@ -317,14 +306,7 @@ function Resolve-AgentInspectorDataDir {
     if ([System.IO.Path]::IsPathRooted($env:AGENT_INSPECTOR_CONFIG_DIR)) { return $env:AGENT_INSPECTOR_CONFIG_DIR }
     return (Join-Path $base $env:AGENT_INSPECTOR_CONFIG_DIR)
   }
-  $current = Join-Path $base '.agent-inspector'
-  $legacy = Join-Path $base '.llm-inspector'
-  $currentHasState = (Test-Path (Join-Path $current 'providers.json')) -or (Test-Path (Join-Path $current 'config.json')) -or (Test-Path (Join-Path $current 'logs')) -or (Test-Path (Join-Path $current 'chunks'))
-  $legacyHasState = (Test-Path (Join-Path $legacy 'providers.json')) -or (Test-Path (Join-Path $legacy 'config.json')) -or (Test-Path (Join-Path $legacy 'logs')) -or (Test-Path (Join-Path $legacy 'chunks'))
-  if (-not $currentHasState -and $legacyHasState) {
-    return $legacy
-  }
-  return $current
+  return (Join-Path $base '.agent-inspector')
 }
 $dir  = Resolve-AgentInspectorDataDir
 $file = Join-Path $dir 'providers.json'

package/src/components/OnboardingBanner.tsx

@@ -25,41 +25,41 @@ export function OnboardingBanner(): JSX.Element | null {
             ? "Agent Inspector is ready in Full mode"
             : "Agent Inspector is ready in Simple mode"}
         </div>
-        <ul className="space-y-0.5 text-xs leading-relaxed text-muted-foreground">
+        <ol className="space-y-0.5 text-xs leading-relaxed text-muted-foreground">
+          <li>
+            <strong>1. Start in the right mode</strong>: this process is currently running in{" "}
+            <code>{captureMode}</code>. Mode is fixed at startup.
+          </li>
           {isFullMode ? (
             <>
               <li>
-                <strong>Full mode</strong>: raw headers, raw response, and SSE chunks are captured
-                for diagnostics.
+                <strong>2. Full diagnostics</strong>: raw headers, raw response, and SSE chunks are
+                captured for deep investigations.
               </li>
               <li>
-                <strong>Daily work</strong>: restart with <code>agent-inspector --mode simple</code>{" "}
-                to reduce capture overhead.
+                <strong>3. Daily work</strong>: restart with{" "}
+                <code>agent-inspector --mode simple</code> to reduce capture overhead.
               </li>
             </>
           ) : (
             <>
               <li>
-                <strong>Simple mode</strong>: lightweight capture for requests, responses, tools,
-                timing, and token usage.
+                <strong>2. Simple capture</strong>: requests, responses, tools, timing, tokens,
+                replay, and memory candidates are available with lower overhead.
               </li>
               <li>
-                <strong>Need diagnostics?</strong> Restart with{" "}
+                <strong>3. Need raw diagnostics?</strong> Restart with{" "}
                 <code>agent-inspector --mode full</code> for raw headers, raw response, and SSE
                 chunks.
               </li>
             </>
           )}
-          <li>
-            <strong>Replay and Memory</strong>: available in both modes for provider checks and
-            reviewable knowledge candidates.
-          </li>
           <li>
             <strong>Agent setup</strong>: run <code>agent-inspector onboard --status</code>, then
             use <code>/agent-inspector:onboard</code> in Claude Code or ask Codex to use{" "}
             <code>agent-inspector-onboard</code>.
           </li>
-        </ul>
+        </ol>
       </div>
       <button
         type="button"

package/src/components/ProxyViewer.tsx

@@ -2,13 +2,13 @@ import { type JSX, useCallback, useEffect, useMemo, useRef, useState, Suspense }
 import { ArrowDownRight, ArrowLeft, ArrowUpRight, Check, Copy, Download, Plus } from "lucide-react";
 
 import type { CapturedLog } from "../proxy/schemas";
-import { exportLogsAsZip } from "../lib/export-logs";
+import { exportLogsAsZip, type ExportMode } from "../lib/export-logs";
 import type { CaptureMode, TimeDisplayFormat } from "../lib/runtimeConfig";
 import { formatTimestampRange } from "../lib/timeDisplay";
 import { cn, formatContextWindowTokens, formatTokens } from "../lib/utils";
 import { useProviders } from "../lib/useProviders";
 import packageJson from "../../package.json";
-import { ConversationGroup, groupLogsByConversation } from "./proxy-viewer";
+import { groupLogsByConversation } from "./proxy-viewer";
 
 import { CrabLogo } from "./ui/crab-logo";
 import { crabVariants } from "./ui/crab-variants";
@@ -19,6 +19,7 @@ import { SettingsDialog } from "./providers/SettingsDialog";
 import { computeCacheTrends } from "./proxy-viewer/cacheTrend";
 import { LazyCompareDrawer } from "./proxy-viewer/lazy";
 import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
+import { ConversationGroupList } from "./proxy-viewer/ConversationGroupList";
 import { buildValidPredecessors } from "./proxy-viewer/viewerState";
 import { useKeyboardNavigation } from "./proxy-viewer/useKeyboardNavigation";
 import { SegmentBar } from "./proxy-viewer/anatomy/SegmentBar";
@@ -34,7 +35,7 @@ import {
 
 function truncateSessionId(id: string): string {
   if (id.length <= 30) return id;
-  return id.slice(0, 12) + "…" + id.slice(-12);
+  return `${id.slice(0, 12)}...${id.slice(-12)}`;
 }
 
 function computeTokenSummary(logs: CapturedLog[]): { totalIn: number; totalOut: number } {
@@ -635,7 +636,7 @@ export function ProxyViewer({
 }: ProxyViewerProps): JSX.Element {
   const { totalIn, totalOut } = useMemo(() => computeTokenSummary(logs), [logs]);
   const { providers } = useProviders();
-  const [exporting, setExporting] = useState(false);
+  const [exporting, setExporting] = useState<ExportMode | null>(null);
   const [comparePair, setComparePair] = useState<[CapturedLog, CapturedLog] | null>(null);
   const [crabEntrancePhase, setCrabEntrancePhase] = useState<"hidden" | "playing" | "done">(
     "hidden",
@@ -665,14 +666,17 @@ export function ProxyViewer({
     document.title = `${truncateSessionId(pinnedSessionId)} - ${requestLabel} - Agent Inspector`;
   }, [logs.length, pinnedSessionId]);
 
-  const handleExport = useCallback(async () => {
-    setExporting(true);
-    try {
-      await exportLogsAsZip(logs);
-    } finally {
-      setExporting(false);
-    }
-  }, [logs]);
+  const handleExport = useCallback(
+    async (mode: ExportMode) => {
+      setExporting(mode);
+      try {
+        await exportLogsAsZip(logs, mode);
+      } finally {
+        setExporting(null);
+      }
+    },
+    [logs],
+  );
   // Close the compare drawer when the user changes the session or model
   // filter, since the predecessor relationship may no longer be meaningful.
   useEffect(() => {
@@ -710,11 +714,11 @@ export function ProxyViewer({
 
   return (
     <div className="max-w-[1400px] xl:max-w-[1600px] 2xl:max-w-[1800px] mx-auto px-6 pb-6">
-      {/* Sticky chrome — brand row, optional pinned-session context, and the
+      {/* Sticky chrome: brand row, optional pinned-session context, and the
           filter/control bar stay visible while the user scrolls through the
           log list. `z-30` sits above the per-conversation sticky header
           (`z-10`) but below modal-level overlays (dialogs, dropdowns,
-          tooltips — `z-50`). Background is fully opaque so logs don't bleed
+          tooltips: `z-50`). Background is fully opaque so logs don't bleed
           through. */}
       <div className="sticky top-0 z-30 bg-background pt-6">
         {/* Brand row */}
@@ -722,7 +726,7 @@ export function ProxyViewer({
           <div />
           <h1 className="flex min-w-0 flex-col items-center gap-2 text-center">
             <span className="flex max-w-[calc(100vw-7rem)] items-end gap-2 whitespace-nowrap">
-              {/* Crab family — hover to animate together */}
+              {/* Crab family: hover to animate together */}
               <span
                 className="flex shrink-0 items-end gap-1 group cursor-default"
                 aria-hidden="true"
@@ -858,7 +862,7 @@ export function ProxyViewer({
             <span className="text-muted-foreground text-xs font-mono">
               {logs.length} request{logs.length !== 1 ? "s" : ""}
               {totalIn > 0 || totalOut > 0
-                ? ` · ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`
+                ? ` - ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`
                 : ""}
             </span>
           )}
@@ -866,13 +870,13 @@ export function ProxyViewer({
             <button
               type="button"
               onClick={() => {
-                void handleExport();
+                void handleExport("redacted");
               }}
-              disabled={exporting}
+              disabled={exporting !== null}
               className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 rounded-md hover:bg-muted"
-              title="Export all logs as JSON ZIP"
+              title="Export redacted logs as JSON ZIP"
             >
-              {exporting ? (
+              {exporting === "redacted" ? (
                 <span>Exporting...</span>
               ) : (
                 <>
@@ -882,6 +886,19 @@ export function ProxyViewer({
               )}
             </button>
           )}
+          {logs.length > 0 && (
+            <button
+              type="button"
+              onClick={() => {
+                void handleExport("raw");
+              }}
+              disabled={exporting !== null}
+              className="h-8 px-2 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed rounded-md hover:bg-muted"
+              title="Export raw logs without redaction"
+            >
+              {exporting === "raw" ? "Exporting..." : "Raw"}
+            </button>
+          )}
           <button
             type="button"
             onClick={onClearAll}
@@ -923,7 +940,10 @@ export function ProxyViewer({
             <div className="text-center text-muted-foreground py-16 space-y-4">
               <p className="text-sm">No requests captured yet.</p>
               <p className="text-xs">Route AI coding tools through the proxy:</p>
-              <CopyableCommand command="LLM_BASE_URL=http://localhost:25947/proxy <your-tool>" />
+              <div className="flex flex-col items-center gap-2">
+                <CopyableCommand command="ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>" />
+                <CopyableCommand command="OPENAI_BASE_URL=http://localhost:25947/proxy <your-tool>" />
+              </div>
             </div>
           )
         ) : (
@@ -933,28 +953,25 @@ export function ProxyViewer({
             className="flex flex-col gap-2 focus:outline-none"
           >
             <div ref={logListRef}>
-              {groups.map((group) => (
-                <ConversationGroup
-                  key={group.id}
-                  group={group}
-                  viewMode={viewMode}
-                  strip={strip}
-                  slowResponseThresholdSeconds={slowResponseThresholdSeconds}
-                  cacheTrends={cacheTrends}
-                  onCompareWithPrevious={handleCompareWithPrevious}
-                  comparisonPredecessors={comparisonPredecessors}
-                  onClearGroup={onClearGroup}
-                  standalone={groups.length === 1}
-                  hasPinnedSessionContext={hasSessionContext}
-                  timeDisplayFormat={timeDisplayFormat}
-                />
-              ))}
+              <ConversationGroupList
+                groups={groups}
+                viewMode={viewMode}
+                strip={strip}
+                slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+                cacheTrends={cacheTrends}
+                onCompareWithPrevious={handleCompareWithPrevious}
+                comparisonPredecessors={comparisonPredecessors}
+                onClearGroup={onClearGroup}
+                standalone={groups.length === 1}
+                hasPinnedSessionContext={hasSessionContext}
+                timeDisplayFormat={timeDisplayFormat}
+              />
             </div>
           </div>
         )}
       </div>
 
-      {/* Compare drawer — sibling of the log list, not a route change. */}
+      {/* Compare drawer: sibling of the log list, not a route change. */}
       {comparePair !== null && (
         <Suspense fallback={null}>
           <LazyCompareDrawer left={comparePair[0]} right={comparePair[1]} onClose={closeCompare} />

package/src/components/ProxyViewerContainer.tsx

@@ -4,6 +4,7 @@ import { CapturedLogSchema, type CapturedLog } from "../proxy/schemas";
 import { useStripConfig } from "../lib/useStripConfig";
 import { OnboardingBanner } from "./OnboardingBanner";
 import { ProxyViewer } from "./ProxyViewer";
+import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
 
 type SSEUpdate =
   | {
@@ -222,6 +223,10 @@ export function ProxyViewerContainer({
     if (!hash.startsWith("#log-")) return;
     if (handledHashRef.current === hash) return;
     const targetId = hash.slice(1);
+    const logId = Number(targetId.replace(/^log-/, ""));
+    if (Number.isInteger(logId) && logId > 0) {
+      dispatchLogFocusRequest({ logId, tab: "request" });
+    }
     let cancelled = false;
     let attempts = 0;
     let highlightedTarget: HTMLElement | null = null;

package/src/components/providers/SettingsDialog.tsx

@@ -1,5 +1,6 @@
-import { type JSX, useState, useCallback, useMemo } from "react";
+import { type JSX, useState, useCallback, useEffect, useMemo } from "react";
 import { Check, Copy, Settings, Terminal } from "lucide-react";
+import { z } from "zod";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
 import { Button } from "../ui/button";
@@ -72,6 +73,7 @@ export function SettingsDialog(): JSX.Element {
           <TabsList>
             <TabsTrigger value="providers">Providers</TabsTrigger>
             <TabsTrigger value="proxy">Proxy</TabsTrigger>
+            <TabsTrigger value="storage">Storage</TabsTrigger>
             <TabsTrigger value="onboarding">Onboarding</TabsTrigger>
           </TabsList>
 
@@ -94,6 +96,9 @@ export function SettingsDialog(): JSX.Element {
             <TabsContent value="proxy">
               <ProxySettingsTab />
             </TabsContent>
+            <TabsContent value="storage">
+              <StorageSettingsTab />
+            </TabsContent>
             <TabsContent value="onboarding">
               <OnboardingSettingsTab />
             </TabsContent>
@@ -104,6 +109,109 @@ export function SettingsDialog(): JSX.Element {
   );
 }
 
+type LogStorageStats = {
+  memoryCount: number;
+  logDir: string;
+  logFileCount: number;
+  logBytes: number;
+  chunkDir: string;
+  chunkFileCount: number;
+  chunkBytes: number;
+};
+
+const LogStorageStatsSchema = z.object({
+  memoryCount: z.number(),
+  logDir: z.string(),
+  logFileCount: z.number(),
+  logBytes: z.number(),
+  chunkDir: z.string(),
+  chunkFileCount: z.number(),
+  chunkBytes: z.number(),
+});
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MiB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GiB`;
+}
+
+function StorageSettingsTab(): JSX.Element {
+  const [stats, setStats] = useState<LogStorageStats | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/api/logs?stats=1");
+      if (!response.ok) {
+        setError(`Failed to load storage stats: HTTP ${String(response.status)}`);
+        return;
+      }
+      const data: unknown = await response.json();
+      const parsed = LogStorageStatsSchema.safeParse(data);
+      if (!parsed.success) {
+        setError("Storage stats response was not valid.");
+        return;
+      }
+      setStats(parsed.data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h3 className="text-sm font-semibold">Log storage</h3>
+          <p className="text-xs text-muted-foreground">
+            Inspect local log and streaming chunk footprint before exporting or clearing sessions.
+          </p>
+        </div>
+        <Button type="button" variant="outline" size="sm" onClick={() => void refresh()}>
+          {loading ? "Refreshing..." : "Refresh"}
+        </Button>
+      </div>
+
+      {stats !== null && (
+        <div className="grid gap-2 text-xs">
+          <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+            <div className="font-medium">In-memory logs</div>
+            <div className="mt-1 font-mono text-muted-foreground">
+              {stats.memoryCount.toLocaleString()} loaded
+            </div>
+          </div>
+          <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+            <div className="font-medium">Log files</div>
+            <div className="mt-1 break-all font-mono text-muted-foreground">{stats.logDir}</div>
+            <div className="mt-1 font-mono text-muted-foreground">
+              {stats.logFileCount.toLocaleString()} files / {formatBytes(stats.logBytes)}
+            </div>
+          </div>
+          <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+            <div className="font-medium">Streaming chunks</div>
+            <div className="mt-1 break-all font-mono text-muted-foreground">{stats.chunkDir}</div>
+            <div className="mt-1 font-mono text-muted-foreground">
+              {stats.chunkFileCount.toLocaleString()} files / {formatBytes(stats.chunkBytes)}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {error !== null && <p className="text-xs text-destructive">{error}</p>}
+    </div>
+  );
+}
+
 function CopyableSetupValue({
   id,
   label,
@@ -278,6 +386,9 @@ function ProxySettingsTab(): JSX.Element {
         <p className="text-xs text-muted-foreground">
           This process is running in <code>{captureMode}</code> mode. Restart with{" "}
           <code>agent-inspector --mode {alternateCaptureMode}</code> to change it.
+          {captureMode === "simple"
+            ? " Simple mode keeps replay, parsed requests, responses, timing, tools, and token usage while skipping raw headers, raw response retention, and detailed SSE chunk retention."
+            : " Full mode retains raw headers, raw responses, and SSE chunks for diagnostics; use simple mode for everyday lower-overhead capture."}
         </p>
       </div>
 
@@ -305,7 +416,7 @@ function ProxySettingsTab(): JSX.Element {
           className="size-4 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
         />
         <span className="text-sm">
-          {isLoading ? "Loading…" : strip ? "Stripping enabled" : "Stripping disabled"}
+          {isLoading ? "Loading..." : strip ? "Stripping enabled" : "Stripping disabled"}
         </span>
       </label>
 

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

@@ -1,4 +1,4 @@
-import { useState, memo, useEffect, useMemo } from "react";
+import { useState, memo, useCallback, useEffect, useMemo } from "react";
 import type { JSX } from "react";
 import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import type { CapturedLog } from "../../proxy/schemas";
@@ -37,6 +37,10 @@ export type ConversationGroupProps = {
   timeDisplayFormat: TimeDisplayFormat;
   /** Clear all logs that belong to this group. */
   onClearGroup: (ids: number[]) => void;
+  /** Optional controlled expansion state used by virtualized lists. */
+  expanded?: boolean;
+  /** Optional controlled expansion setter used by virtualized lists. */
+  onExpandedChange?: (expanded: boolean) => void;
 };
 
 function computeStats(logs: CapturedLog[]): {
@@ -64,8 +68,21 @@ export const ConversationGroup = memo(function ({
   standalone = false,
   hasPinnedSessionContext = false,
   timeDisplayFormat,
+  expanded: controlledExpanded,
+  onExpandedChange,
 }: ConversationGroupProps): JSX.Element {
-  const [expanded, setExpanded] = useState(false);
+  const [internalExpanded, setInternalExpanded] = useState(false);
+  const expanded = controlledExpanded ?? internalExpanded;
+  const setExpanded = useCallback(
+    (nextExpanded: boolean) => {
+      if (onExpandedChange !== undefined) {
+        onExpandedChange(nextExpanded);
+        return;
+      }
+      setInternalExpanded(nextExpanded);
+    },
+    [onExpandedChange],
+  );
   const stats = useMemo(() => computeStats(group.logs), [group.logs]);
   const startTime = group.logs[0]?.timestamp ?? new Date().toISOString();
   const endTime = group.logs[group.logs.length - 1]?.timestamp ?? new Date().toISOString();
@@ -89,7 +106,7 @@ export const ConversationGroup = memo(function ({
     return () => {
       window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
     };
-  }, [group.logs, standalone]);
+  }, [group.logs, setExpanded, standalone]);
 
   return (
     <div className="mb-2">

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

@@ -0,0 +1,144 @@
+import { type JSX, useCallback, useEffect, useMemo, useState } from "react";
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import type { CapturedLog } from "../../proxy/schemas";
+import { ConversationGroup, type ConversationGroupProps } from "./ConversationGroup";
+import type { ConversationGroupData } from "./ConversationHeader";
+import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest } from "./logFocus";
+
+const VIRTUALIZE_GROUP_THRESHOLD = 30;
+const ESTIMATED_GROUP_HEIGHT = 112;
+const VIRTUAL_OVERSCAN = 6;
+
+type ConversationGroupListProps = Omit<
+  ConversationGroupProps,
+  "group" | "standalone" | "expanded" | "onExpandedChange"
+> & {
+  groups: ConversationGroupData[];
+  standalone: boolean;
+};
+
+export function shouldVirtualizeConversationGroups(groupCount: number): boolean {
+  return groupCount > VIRTUALIZE_GROUP_THRESHOLD;
+}
+
+export function findConversationGroupIndexForLog(
+  groups: readonly ConversationGroupData[],
+  logId: number,
+): number | null {
+  for (let index = 0; index < groups.length; index++) {
+    const group = groups[index];
+    if (group !== undefined && group.logs.some((log: CapturedLog) => log.id === logId)) {
+      return index;
+    }
+  }
+  return null;
+}
+
+export function ConversationGroupList({
+  groups,
+  standalone,
+  ...groupProps
+}: ConversationGroupListProps): JSX.Element {
+  if (!shouldVirtualizeConversationGroups(groups.length)) {
+    return (
+      <>
+        {groups.map((group) => (
+          <ConversationGroup key={group.id} group={group} standalone={standalone} {...groupProps} />
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <VirtualizedConversationGroupList groups={groups} standalone={standalone} {...groupProps} />
+  );
+}
+
+function VirtualizedConversationGroupList({
+  groups,
+  standalone,
+  ...groupProps
+}: ConversationGroupListProps): JSX.Element {
+  const [expandedByGroupId, setExpandedByGroupId] = useState<ReadonlyMap<string, boolean>>(
+    () => new Map(),
+  );
+
+  const virtualizer = useWindowVirtualizer({
+    count: groups.length,
+    estimateSize: () => ESTIMATED_GROUP_HEIGHT,
+    overscan: VIRTUAL_OVERSCAN,
+    getItemKey: (index) => groups[index]?.id ?? index,
+  });
+
+  const setGroupExpanded = useCallback((groupId: string, expanded: boolean) => {
+    setExpandedByGroupId((previous) => {
+      const next = new Map(previous);
+      if (expanded) {
+        next.set(groupId, true);
+      } else {
+        next.delete(groupId);
+      }
+      return next;
+    });
+  }, []);
+
+  const indexByLogId = useMemo(() => {
+    const result = new Map<number, number>();
+    for (let index = 0; index < groups.length; index++) {
+      const group = groups[index];
+      if (group === undefined) continue;
+      for (const log of group.logs) {
+        result.set(log.id, index);
+      }
+    }
+    return result;
+  }, [groups]);
+
+  useEffect(() => {
+    const handleLogFocusRequest = (event: Event): void => {
+      const request = readLogFocusRequest(event);
+      if (request === null) return;
+      const index = indexByLogId.get(request.logId);
+      if (index === undefined) return;
+      const group = groups[index];
+      if (group === undefined) return;
+      setGroupExpanded(group.id, true);
+      virtualizer.scrollToIndex(index, { align: "center" });
+    };
+
+    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    return () => {
+      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    };
+  }, [groups, indexByLogId, setGroupExpanded, virtualizer]);
+
+  return (
+    <div
+      className="relative w-full"
+      style={{ height: `${virtualizer.getTotalSize()}px` }}
+      data-virtualized-conversation-list="true"
+    >
+      {virtualizer.getVirtualItems().map((virtualItem) => {
+        const group = groups[virtualItem.index];
+        if (group === undefined) return null;
+        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)` }}
+          >
+            <ConversationGroup
+              group={group}
+              standalone={standalone}
+              expanded={expandedByGroupId.get(group.id) ?? false}
+              onExpandedChange={(expanded) => setGroupExpanded(group.id, expanded)}
+              {...groupProps}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}