@tonyclaw/agent-inspector 4.0.1 → 4.0.2

package/src/components/ProxyViewer.tsx

@@ -1,2259 +0,0 @@
-import {
-  type ChangeEvent,
-  type JSX,
-  type PointerEvent as ReactPointerEvent,
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  Suspense,
-} from "react";
-import {
-  ALargeSmall,
-  ArrowDownRight,
-  ArrowLeft,
-  ArrowUpRight,
-  Clapperboard,
-  Check,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
-  ChevronsLeft,
-  ChevronsRight,
-  Copy,
-  Download,
-  Eye,
-  FileJson,
-  Gauge,
-  Flag,
-  PanelRightClose,
-  PanelRightOpen,
-  RefreshCw,
-  Siren,
-  Moon,
-  Sun,
-  Timer,
-  Trash2,
-  Upload,
-  X,
-} from "lucide-react";
-
-import type { CapturedLog } from "../contracts";
-import { withBasePath } from "../lib/basePath";
-import { exportLogsAsZip, type ExportMode } from "../lib/export-logs";
-import {
-  subscribeCodingAgentEndpoints,
-  type CodingAgentEndpoints,
-} from "../lib/codingAgentEndpoints";
-import type { ImportLogsResponse } from "../lib/logImportContract";
-import { copyTextToClipboard } from "../lib/clipboard";
-import type { InspectorGroupEvidence, InspectorGroupMember } from "../lib/groupContract";
-import type { CaptureMode, TimeDisplayFormat } from "../lib/runtimeConfig";
-import { formatTimestampRange } from "../lib/timeDisplay";
-import { cn, formatContextWindowTokens, formatTokens } from "../lib/utils";
-import { useThemeMode } from "../lib/useThemeMode";
-import { formatUiScale, normalizeUiScalePreference, type UiScalePreference } from "../lib/uiScale";
-import { useUiScale } from "../lib/useUiScale";
-import { useProviders } from "../lib/useProviders";
-import { groupLogsByConversation, type ConversationGroupData } from "./proxy-viewer";
-import {
-  buildSessionSlateStats,
-  buildHomeConnectionCommands,
-  COPYABLE_COMMAND_CONTAINER_CLASS_NAME,
-  COPYABLE_COMMAND_TEXT_CLASS_NAME,
-  exportRequiresConfirmation,
-  formatPaginationStatus,
-  getExportActionVisibility,
-  resolveSessionContextScope,
-  type SessionContextScope,
-  type SessionSlateMetricTone,
-  type SessionSlateStats,
-  type SessionSlateStatus,
-} from "./proxy-viewer/proxyViewerLogic";
-
-import { CrabLogo } from "./ui/crab-logo";
-import { Button } from "./ui/button";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
-import type { TransientToastInput } from "./ui/transient-toast";
-import { AlertsDialog } from "./alerts/AlertsDialog";
-import { GroupsDialog } from "./groups/GroupsDialog";
-import { SettingsDialog } from "./providers/SettingsDialog";
-import { AgentLabDialog } from "./ecosystem/AgentLabDialog";
-import { PiAgentPanel, type PiAgentSearchResult } from "./pi-agent/PiAgentPanel";
-import { LazyFeatureBoundary } from "./errors/SafeErrorBoundary";
-import { computeCacheTrends } from "./proxy-viewer/cacheTrend";
-import { LazyCompareDrawer, LazyInspectorPet } from "./proxy-viewer/lazy";
-import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
-import { ApplicationBar } from "./proxy-viewer/ApplicationBar";
-import {
-  SessionLoadProgressBar,
-  type SessionLoadProgress,
-} from "./proxy-viewer/SessionLoadProgressBar";
-import { browserPrefersReducedMotion, preferredScrollBehavior } from "./proxy-viewer/accessibility";
-import { LiveConnectionStatus } from "./proxy-viewer/LiveConnectionStatus";
-import {
-  getLiveEmptyStateCopy,
-  resolveLiveEmptyState,
-  type LiveConnectionState,
-} from "./proxy-viewer/liveConnectionState";
-import { ConversationGroupList } from "./proxy-viewer/ConversationGroupList";
-import { RAW_EXPORT_DIALOG_CLASS_NAME, RawExportWarning } from "./proxy-viewer/RawExportWarning";
-import { buildValidPredecessors } from "./proxy-viewer/viewerState";
-import { useKeyboardNavigation } from "./proxy-viewer/useKeyboardNavigation";
-import { SegmentBar } from "./proxy-viewer/anatomy/SegmentBar";
-import type {
-  ContextHealthLevel,
-  ContextRiskLevel,
-} from "./proxy-viewer/anatomy/contextIntelligence";
-import {
-  buildSessionContextSummary,
-  type SessionContextSummary,
-  type SessionModelContextSummary,
-} from "./proxy-viewer/anatomy/sessionContextSummary";
-
-function truncateSessionId(id: string): string {
-  if (id.length <= 30) return id;
-  return `${id.slice(0, 12)}...${id.slice(-12)}`;
-}
-
-function buildDisplayNumberByLogId(groups: readonly ConversationGroupData[]): Map<number, number> {
-  const result = new Map<number, number>();
-  for (const group of groups) {
-    for (let index = 0; index < group.logs.length; index += 1) {
-      const log = group.logs[index];
-      if (log === undefined) continue;
-      result.set(log.id, index + 1);
-    }
-  }
-  return result;
-}
-
-function displayNumberForLog(
-  log: CapturedLog,
-  displayNumberByLogId: ReadonlyMap<number, number>,
-): number {
-  return displayNumberByLogId.get(log.id) ?? log.id;
-}
-
-function computeTokenSummary(logs: CapturedLog[]): { totalIn: number; totalOut: number } {
-  let totalIn = 0;
-  let totalOut = 0;
-  for (const log of logs) {
-    if (log.inputTokens !== null) totalIn += log.inputTokens;
-    if (log.outputTokens !== null) totalOut += log.outputTokens;
-  }
-  return { totalIn, totalOut };
-}
-
-export type SessionMembershipEvidence = {
-  groupId: string;
-  groupTitle: string;
-  groupKind: string;
-  groupStatus: string;
-  groupTask: string | null;
-  groupProject: string | null;
-  groupEvidence: InspectorGroupEvidence | null;
-  member: InspectorGroupMember;
-};
-
-export type LogPaginationControls = {
-  isLoading: boolean;
-  loadProgress?: SessionLoadProgress;
-  total: number | null;
-  pageSize: number;
-  hasOlder: boolean;
-  hasNewer: boolean;
-  oldestLogId: number | null;
-  newestLogId: number | null;
-  onOldest: () => void;
-  onOlder: () => void;
-  onNewer: () => void;
-  onNewest: () => void;
-};
-
-function getFirstUserAgent(logs: CapturedLog[]): string | null {
-  for (const log of logs) {
-    if (log.userAgent !== null && log.userAgent !== undefined && log.userAgent !== "") {
-      return log.userAgent;
-    }
-  }
-  return null;
-}
-
-function formatTimeRange(logs: CapturedLog[], timeDisplayFormat: TimeDisplayFormat): string | null {
-  const first = logs[0];
-  const last = logs[logs.length - 1];
-  if (first === undefined || last === undefined) return null;
-  return formatTimestampRange(first.timestamp, last.timestamp, timeDisplayFormat);
-}
-
-function slateMetricToneClass(tone: SessionSlateMetricTone): string {
-  switch (tone) {
-    case "cool":
-      return "text-status-cool";
-    case "danger":
-      return "text-status-danger";
-    case "watch":
-      return "text-status-watch";
-    case "neutral":
-      return "text-foreground";
-  }
-}
-
-function statusMetricIcon(status: SessionSlateStatus): ReactNode {
-  switch (status) {
-    case "rolling":
-      return <RefreshCw className="size-3 text-status-cool" />;
-    case "failed":
-      return <Siren className="size-3 text-status-danger" />;
-    case "watch":
-      return <Timer className="size-3 text-status-watch" />;
-    case "clear":
-      return <Check className="size-3 text-status-success" />;
-  }
-}
-
-function statusMetricTone(status: SessionSlateStatus): SessionSlateMetricTone {
-  switch (status) {
-    case "rolling":
-      return "cool";
-    case "failed":
-      return "danger";
-    case "watch":
-      return "watch";
-    case "clear":
-      return "neutral";
-  }
-}
-
-function requestHealthDetail(stats: SessionSlateStats): string {
-  if (stats.pending > 0) return `${stats.pending} pending / ${stats.failures} failed`;
-  if (stats.lengthStops > 0) return `${stats.lengthStops} output limit / ${stats.failures} failed`;
-  return `${stats.failures} failed / ${stats.slow} slow`;
-}
-
-function SessionSlateMetric({
-  label,
-  value,
-  detail,
-  icon,
-  tone = "neutral",
-}: {
-  label: string;
-  value: string;
-  detail: string;
-  icon?: ReactNode;
-  tone?: SessionSlateMetricTone;
-}): JSX.Element {
-  return (
-    <div className="min-w-0 border-t border-border/60 px-4 py-3">
-      <div className="flex items-center gap-1 text-[10px] uppercase text-muted-foreground">
-        {icon}
-        {label}
-      </div>
-      <div className={cn("mt-2 font-mono text-sm font-semibold", slateMetricToneClass(tone))}>
-        {value}
-      </div>
-      <div className="mt-1 font-mono text-[11px] leading-snug text-muted-foreground">{detail}</div>
-    </div>
-  );
-}
-
-function SessionOpeningSlate({ stats }: { stats: SessionSlateStats }): JSX.Element | null {
-  if (stats.requests === 0) return null;
-
-  return (
-    <div className="mb-4 overflow-hidden rounded-[8px] border border-border bg-card">
-      <div className="px-4 py-3">
-        <div className="flex flex-wrap items-end justify-between gap-3">
-          <div className="min-w-0">
-            <div className="flex items-center gap-2 text-[10px] font-semibold uppercase text-muted-foreground">
-              <Clapperboard className="size-3.5 text-slate-300" />
-              Flight Recorder
-            </div>
-            <div className="mt-2 min-w-0 font-mono text-sm font-semibold text-foreground">
-              {stats.modelLabel}
-            </div>
-          </div>
-          <div className="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-muted-foreground">
-            <span className="min-w-0 font-mono">{stats.providerLabel}</span>
-            <span className="min-w-0 font-mono">{stats.timeRange ?? "Timeline pending"}</span>
-          </div>
-        </div>
-      </div>
-      <div className="grid grid-cols-2 border-t border-border/60 md:grid-cols-3 2xl:grid-cols-6">
-        <SessionSlateMetric
-          label="Status"
-          value={stats.statusLabel}
-          detail={requestHealthDetail(stats)}
-          icon={statusMetricIcon(stats.status)}
-          tone={statusMetricTone(stats.status)}
-        />
-        <SessionSlateMetric
-          label="Turns"
-          value={String(stats.turns)}
-          detail={stats.finishLabel}
-          icon={<Flag className="size-3 text-muted-foreground" />}
-          tone={stats.finishTone}
-        />
-        <SessionSlateMetric
-          label="Requests"
-          value={String(stats.requests)}
-          detail={`${stats.failures} failed / ${stats.slow} slow`}
-          icon={<Siren className="size-3 text-muted-foreground" />}
-          tone={stats.failures > 0 ? "danger" : "neutral"}
-        />
-        <SessionSlateMetric
-          label="Peak"
-          value={stats.slowestLabel}
-          detail={stats.slowestDetail}
-          icon={<Timer className="size-3 text-muted-foreground" />}
-          tone={stats.slow > 0 ? "watch" : "neutral"}
-        />
-        <SessionSlateMetric
-          label="Tokens"
-          value={stats.tokenLabel}
-          detail={stats.heaviestDetail}
-          icon={<Gauge className="size-3 text-muted-foreground" />}
-        />
-        <SessionSlateMetric
-          label="Outcome"
-          value={stats.outcomeLabel}
-          detail={stats.outcomeDetail}
-          tone={stats.outcomeTone}
-        />
-      </div>
-    </div>
-  );
-}
-
-function formatPercent(value: number | null): string {
-  if (value === null) return "Unknown";
-  const percent = value * 100;
-  if (percent >= 10) return `${percent.toFixed(0)}%`;
-  if (percent >= 1) return `${percent.toFixed(1)}%`;
-  if (percent > 0) return "<1%";
-  return "0%";
-}
-
-function formatTrend(value: number | null): string {
-  if (value === null) return "n/a";
-  if (Math.abs(value) < 0.1) return "0%";
-  const sign = value > 0 ? "+" : "";
-  return `${sign}${value.toFixed(1)}%`;
-}
-
-function progressPercent(value: number | null): number {
-  if (value === null || !Number.isFinite(value)) return 0;
-  return Math.min(Math.max(value * 100, 0), 100);
-}
-
-function peakMarkerPercent(
-  latestPercent: number | null,
-  peakPercent: number | null,
-): number | null {
-  if (peakPercent === null) return null;
-  const latest = progressPercent(latestPercent);
-  const peak = progressPercent(peakPercent);
-  if (peak <= 0) return null;
-  if (Math.abs(peak - latest) < 0.5) return null;
-  return peak;
-}
-
-function sessionRiskBarClass(risk: ContextRiskLevel): string {
-  switch (risk) {
-    case "danger":
-      return "bg-red-400";
-    case "watch":
-      return "bg-amber-300";
-    case "unknown":
-      return "bg-muted-foreground/50";
-    case "ok":
-      return "bg-cyan-300";
-  }
-}
-
-function formatContextWindow(summary: SessionModelContextSummary): string {
-  const tokens = summary.latest.contextWindow.tokens;
-  if (tokens === null) return "Context window unknown";
-  return `Context window ${formatContextWindowTokens(tokens)}`;
-}
-
-const MEMBER_METADATA_KEYS: string[] = [
-  "score",
-  "decision",
-  "final_status",
-  "validation_pass_ratio",
-  "semantic_memory_score",
-  "opencode_exit",
-  "actual_model",
-  "run_dir",
-  "workspace",
-  "project_dir",
-  "work_dir",
-];
-
-function formatMetadataValue(value: InspectorGroupMember["metadata"][string]): string | null {
-  if (typeof value === "string") return value.length > 0 ? value : null;
-  if (typeof value === "number" || typeof value === "boolean") return String(value);
-  if (value === null) return null;
-  return JSON.stringify(value);
-}
-
-function formatMemberMetadata(member: InspectorGroupMember | null, key: string): string | null {
-  if (member === null) return null;
-  const value = member.metadata[key];
-  if (value === undefined) return null;
-  return formatMetadataValue(value);
-}
-
-function evidenceChipClass(value: string): string {
-  const normalized = value.toLowerCase();
-  if (
-    normalized.includes("reject") ||
-    normalized.includes("fail") ||
-    normalized.includes("error")
-  ) {
-    return "border-red-400/35 bg-red-500/10 text-red-100";
-  }
-  if (
-    normalized.includes("partial") ||
-    normalized.includes("pending") ||
-    normalized.includes("slow")
-  ) {
-    return "border-amber-300/35 bg-amber-400/10 text-amber-100";
-  }
-  if (
-    normalized.includes("pass") ||
-    normalized.includes("complete") ||
-    normalized.includes("accept")
-  ) {
-    return "border-cyan-300/25 bg-cyan-400/10 text-cyan-100";
-  }
-  return "border-border/70 bg-background/70 text-muted-foreground";
-}
-
-function getMemberMetadataRows(member: InspectorGroupMember): { key: string; value: string }[] {
-  const rows: { key: string; value: string }[] = [];
-  for (const key of MEMBER_METADATA_KEYS) {
-    const value = member.metadata[key];
-    if (value === undefined) continue;
-    const formatted = formatMetadataValue(value);
-    if (formatted !== null) rows.push({ key, value: formatted });
-  }
-  return rows;
-}
-
-function SessionMembershipPanel({
-  memberships,
-  defaultOpen = false,
-}: {
-  memberships: SessionMembershipEvidence[];
-  defaultOpen?: boolean;
-}): JSX.Element | null {
-  const [open, setOpen] = useState(defaultOpen);
-  if (memberships.length === 0) return null;
-  const primary = memberships[0];
-  const primaryMember = primary?.member ?? null;
-  const score = formatMemberMetadata(primaryMember, "score");
-  const decision = formatMemberMetadata(primaryMember, "decision");
-  const finalStatus = formatMemberMetadata(primaryMember, "final_status");
-  const summaryChips = [
-    score === null ? null : { label: `score ${score}`, value: score },
-    decision === null ? null : { label: decision, value: decision },
-    finalStatus === null ? null : { label: finalStatus, value: finalStatus },
-    primaryMember?.model === null || primaryMember?.model === undefined
-      ? null
-      : { label: primaryMember.model, value: primaryMember.model },
-  ].filter(
-    (value): value is { label: string; value: string } =>
-      value !== null && value.label.length > 0 && value.value.length > 0,
-  );
-
-  return (
-    <div className="border border-border bg-card shadow-sm mb-3 rounded-[8px] text-xs">
-      <button
-        type="button"
-        onClick={() => setOpen((value) => !value)}
-        className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-white/[0.04]"
-        aria-expanded={open}
-      >
-        <div className="min-w-0 flex-1">
-          <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-            <span className="font-semibold text-foreground">Case File</span>
-            {primary !== undefined && (
-              <span className="truncate text-muted-foreground" title={primary.groupTitle}>
-                {primary.groupTitle}
-              </span>
-            )}
-            <span className="font-mono text-[10px] uppercase text-muted-foreground">
-              {memberships.length} group{memberships.length === 1 ? "" : "s"}
-            </span>
-          </div>
-          {summaryChips.length > 0 && (
-            <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-              {summaryChips.slice(0, 4).map((chip) => (
-                <span
-                  key={chip.label}
-                  className={cn(
-                    "rounded border px-1.5 py-0.5 font-mono text-[10px]",
-                    evidenceChipClass(chip.value),
-                  )}
-                >
-                  {chip.label}
-                </span>
-              ))}
-            </div>
-          )}
-        </div>
-        {open ? (
-          <ChevronUp className="size-4 shrink-0 text-muted-foreground" />
-        ) : (
-          <ChevronDown className="size-4 shrink-0 text-muted-foreground" />
-        )}
-      </button>
-      {open && (
-        <div className="space-y-2 border-t border-white/10 px-3 py-2">
-          {memberships.map((membership) => {
-            const member = membership.member;
-            const metadataRows = getMemberMetadataRows(member);
-            return (
-              <div key={`${membership.groupId}:${member.id}`} className="min-w-0">
-                <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-                  <span
-                    className="truncate font-medium text-foreground"
-                    title={membership.groupTitle}
-                  >
-                    {membership.groupTitle}
-                  </span>
-                  <span className="font-mono text-[10px] uppercase text-muted-foreground">
-                    {membership.groupStatus}
-                  </span>
-                  {member.status !== null && (
-                    <span className="font-mono text-[10px] text-muted-foreground">
-                      member {member.status}
-                    </span>
-                  )}
-                </div>
-                <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground">
-                  <span className="font-mono" title={member.sessionId}>
-                    {truncateSessionId(member.sessionId)}
-                  </span>
-                  {member.label !== null && <span>{member.label}</span>}
-                  {member.provider !== null && <span>{member.provider}</span>}
-                  {member.model !== null && <span className="font-mono">{member.model}</span>}
-                  {member.runId !== null && (
-                    <span className="font-mono" title={member.runId}>
-                      run {truncateSessionId(member.runId)}
-                    </span>
-                  )}
-                </div>
-                {metadataRows.length > 0 && (
-                  <div className="mt-2 grid gap-1 sm:grid-cols-2 xl:grid-cols-3">
-                    {metadataRows.map((row) => (
-                      <div
-                        key={row.key}
-                        className="border border-border bg-muted/40 min-w-0 rounded-md px-2 py-1"
-                      >
-                        <div className="font-mono text-[10px] text-muted-foreground">{row.key}</div>
-                        <div
-                          className="truncate font-mono text-[11px] text-foreground"
-                          title={row.value}
-                        >
-                          {row.value}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function LogPaginationButton({
-  label,
-  title,
-  icon,
-  disabled,
-  onClick,
-}: {
-  label: string;
-  title: string;
-  icon: JSX.Element;
-  disabled: boolean;
-  onClick: () => void;
-}): JSX.Element {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-45"
-      title={title}
-    >
-      {icon}
-      <span>{label}</span>
-    </button>
-  );
-}
-
-function LogPaginationBar({
-  logs,
-  pagination,
-  embedded = false,
-}: {
-  logs: readonly CapturedLog[];
-  pagination: LogPaginationControls | undefined;
-  embedded?: boolean;
-}): JSX.Element | null {
-  if (pagination === undefined) return null;
-  const disabled = pagination.isLoading;
-
-  return (
-    <nav
-      aria-label="Session log pagination"
-      className={cn(
-        "flex min-h-9 flex-col gap-2 px-1 py-1 sm:flex-row sm:items-center",
-        embedded
-          ? "border-t border-white/10 pt-2"
-          : "border border-border bg-card shadow-sm mb-3 rounded-[8px] px-2",
-      )}
-    >
-      <div className="w-full min-w-0 px-1 font-mono text-[11px] text-muted-foreground sm:flex-1">
-        <div role="status" aria-live="polite" aria-atomic="true">
-          {formatPaginationStatus({ logs, pagination })}
-          {pagination.isLoading && logs.length > 0 && <span className="ml-2">Loading...</span>}
-        </div>
-        {pagination.loadProgress !== undefined && (
-          <SessionLoadProgressBar progress={pagination.loadProgress} />
-        )}
-      </div>
-      <div className="flex w-full items-center gap-1 overflow-x-auto sm:w-auto">
-        <LogPaginationButton
-          label="Oldest"
-          title="Load the oldest logs in this session"
-          icon={<ChevronsLeft className="size-3.5" />}
-          disabled={disabled || !pagination.hasOlder}
-          onClick={pagination.onOldest}
-        />
-        <LogPaginationButton
-          label="Older"
-          title="Load older logs"
-          icon={<ChevronLeft className="size-3.5" />}
-          disabled={disabled || !pagination.hasOlder}
-          onClick={pagination.onOlder}
-        />
-        <LogPaginationButton
-          label="Newer"
-          title="Load newer logs"
-          icon={<ChevronRight className="size-3.5" />}
-          disabled={disabled || !pagination.hasNewer}
-          onClick={pagination.onNewer}
-        />
-        <LogPaginationButton
-          label="Newest"
-          title="Load the newest logs in this session"
-          icon={<ChevronsRight className="size-3.5" />}
-          disabled={disabled || !pagination.hasNewer}
-          onClick={pagination.onNewest}
-        />
-      </div>
-    </nav>
-  );
-}
-
-function formatRequestCount(count: number): string {
-  return `${count} ${count === 1 ? "request" : "requests"}`;
-}
-
-function formatLogReference(logId: number): string {
-  return `#${String(logId)}`;
-}
-
-function sessionRiskClass(risk: ContextRiskLevel): string {
-  switch (risk) {
-    case "danger":
-      return "text-red-300";
-    case "watch":
-      return "text-amber-200";
-    case "unknown":
-      return "text-muted-foreground";
-    case "ok":
-      return "text-cyan-200";
-  }
-}
-
-function sessionHealthClass(level: ContextHealthLevel): string {
-  switch (level) {
-    case "risk":
-      return "border-red-400/30 bg-red-500/10 text-red-100";
-    case "optimizable":
-      return "border-amber-400/25 bg-amber-400/8 text-amber-100";
-    case "ok":
-      return "border-cyan-300/25 bg-cyan-400/8 text-cyan-100";
-  }
-}
-
-function sessionHealthLabel(level: ContextHealthLevel): string {
-  switch (level) {
-    case "risk":
-      return "Risk";
-    case "optimizable":
-      return "Optimizable";
-    case "ok":
-      return "OK";
-  }
-}
-
-const LOG_FOCUS_RETRY_LIMIT = 10;
-const LOG_FOCUS_RETRY_DELAY_MS = 80;
-
-function highlightLogTarget(target: HTMLElement): void {
-  target.setAttribute("data-deep-link-highlight", "true");
-  window.setTimeout(() => {
-    target.removeAttribute("data-deep-link-highlight");
-  }, 1800);
-}
-
-function focusLogTarget(logId: number): boolean {
-  const target = document.getElementById(`log-${String(logId)}`);
-  if (!(target instanceof HTMLElement)) return false;
-  target.scrollIntoView({
-    block: "center",
-    behavior: preferredScrollBehavior(browserPrefersReducedMotion()),
-  });
-  target.focus({ preventScroll: true });
-  highlightLogTarget(target);
-  return true;
-}
-
-function openLogContext(logId: number): void {
-  dispatchLogFocusRequest({ logId, tab: "anatomy" });
-
-  let attempts = 0;
-  const tryFocus = (): void => {
-    dispatchLogFocusRequest({ logId, tab: "anatomy" });
-    if (focusLogTarget(logId)) return;
-
-    attempts += 1;
-    if (attempts < LOG_FOCUS_RETRY_LIMIT) {
-      window.setTimeout(tryFocus, LOG_FOCUS_RETRY_DELAY_MS);
-    }
-  };
-
-  window.setTimeout(tryFocus, 0);
-}
-
-function CopyableCommand({ command }: { command: string }): JSX.Element {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(() => {
-    void copyTextToClipboard(command).then((success) => {
-      if (!success) return;
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  }, [command]);
-
-  return (
-    <div data-command-example="true" className={COPYABLE_COMMAND_CONTAINER_CLASS_NAME}>
-      <pre className={COPYABLE_COMMAND_TEXT_CLASS_NAME}>{command}</pre>
-      <button
-        type="button"
-        onClick={handleCopy}
-        className="shrink-0 cursor-pointer rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
-        aria-label="Copy command"
-      >
-        {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
-      </button>
-    </div>
-  );
-}
-
-function SidebarPanel({
-  label,
-  children,
-  className,
-}: {
-  label: string;
-  children: ReactNode;
-  className?: string;
-}): JSX.Element {
-  return (
-    <section className={cn("rounded-[8px] border border-border/60 bg-card/55", className)}>
-      <div className="px-3 pt-3">
-        <div className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-text-subtle">
-          {label}
-        </div>
-      </div>
-      <div className="p-3 pt-2">{children}</div>
-    </section>
-  );
-}
-
-function SidebarMetric({ label, value }: { label: string; value: string | number }): JSX.Element {
-  return (
-    <div className="min-w-0 rounded-md border border-border/50 bg-muted/30 px-2 py-2">
-      <div className="truncate font-mono text-lg font-semibold leading-6 text-text-strong">
-        {value}
-      </div>
-      <div className="mt-0.5 truncate font-mono text-[10px] uppercase tracking-[0.12em] text-text-subtle">
-        {label}
-      </div>
-    </div>
-  );
-}
-
-function ThemeModeToggle(): JSX.Element {
-  const { themeMode, setThemeMode } = useThemeMode();
-
-  return (
-    <div
-      className="inline-flex h-9 items-center rounded-md border border-border/70 bg-muted/70 p-0.5"
-      aria-label="Theme mode"
-      role="group"
-    >
-      <button
-        type="button"
-        onClick={() => setThemeMode("light")}
-        className={cn(
-          "inline-flex size-8 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none max-lg:size-11",
-          themeMode === "light" && "bg-background text-foreground shadow-sm",
-        )}
-        aria-label="Use light mode"
-        aria-pressed={themeMode === "light"}
-        title="Light mode"
-      >
-        <Sun className="size-3.5" />
-      </button>
-      <button
-        type="button"
-        onClick={() => setThemeMode("eye-care")}
-        className={cn(
-          "inline-flex size-8 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none max-lg:size-11",
-          themeMode === "eye-care" && "bg-background text-foreground shadow-sm",
-        )}
-        aria-label="Use eye care mode"
-        aria-pressed={themeMode === "eye-care"}
-        title="Eye care mode"
-      >
-        <Eye className="size-3.5" />
-      </button>
-      <button
-        type="button"
-        onClick={() => setThemeMode("dark")}
-        className={cn(
-          "inline-flex size-8 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none max-lg:size-11",
-          themeMode === "dark" && "bg-background text-foreground shadow-sm",
-        )}
-        aria-label="Use dark mode"
-        aria-pressed={themeMode === "dark"}
-        title="Dark mode"
-      >
-        <Moon className="size-3.5" />
-      </button>
-    </div>
-  );
-}
-
-function PetVisibilityToggle({
-  visible,
-  onToggle,
-}: {
-  visible: boolean;
-  onToggle: () => void;
-}): JSX.Element {
-  const label = visible ? "Hide Inspector pet" : "Summon Inspector pet";
-
-  return (
-    <button
-      type="button"
-      onClick={onToggle}
-      className={cn(
-        "border-border/70 bg-muted/70 inline-flex size-8 shrink-0 items-center justify-center rounded-md border text-muted-foreground shadow-sm transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
-        visible && "bg-background text-amber-500 shadow-sm",
-      )}
-      aria-label={label}
-      aria-pressed={visible}
-      title={label}
-    >
-      <CrabLogo className={cn("size-4 transition-opacity", !visible && "opacity-45")} />
-    </button>
-  );
-}
-
-function UiScaleControl({
-  preference,
-  resolvedScale,
-  onChange,
-}: {
-  preference: UiScalePreference;
-  resolvedScale: number;
-  onChange: (preference: UiScalePreference) => void;
-}): JSX.Element {
-  const resolvedLabel = formatUiScale(resolvedScale);
-  const currentLabel = preference === "auto" ? `Auto (${resolvedLabel})` : `${preference}%`;
-
-  return (
-    <Select
-      value={preference}
-      onValueChange={(value) => onChange(normalizeUiScalePreference(value))}
-    >
-      <SelectTrigger
-        size="sm"
-        className="h-9 min-w-[4.5rem] justify-center gap-1 border-border/70 bg-muted/70 px-2 py-0 text-muted-foreground hover:bg-muted max-lg:h-11 [&>svg:last-child]:hidden"
-        aria-label={`Interface size: ${currentLabel}`}
-      >
-        <ALargeSmall className="size-3.5" />
-        <span className="font-mono text-[10px] font-semibold tabular-nums">{resolvedLabel}</span>
-      </SelectTrigger>
-      <SelectContent align="end">
-        <SelectItem value="auto">Auto</SelectItem>
-        <SelectItem value="100">100%</SelectItem>
-        <SelectItem value="125">125%</SelectItem>
-        <SelectItem value="150">150%</SelectItem>
-      </SelectContent>
-    </Select>
-  );
-}
-
-const DETAILS_PANEL_COLLAPSED_STORAGE_KEY = "agent-inspector.detailsPanelCollapsed";
-const DETAILS_PANEL_WIDTH_STORAGE_KEY = "agent-inspector.detailsPanelWidth";
-const INSPECTOR_PET_VISIBLE_STORAGE_KEY = "agent-inspector.pet.visible";
-const DETAILS_PANEL_DEFAULT_WIDTH = 360;
-const DETAILS_PANEL_MIN_WIDTH = 288;
-const DETAILS_PANEL_MAX_WIDTH = 520;
-
-type DetailsPanelResizeState = {
-  startX: number;
-  startWidth: number;
-  pointerId: number;
-};
-
-function clampDetailsPanelWidth(width: number): number {
-  return Math.min(Math.max(width, DETAILS_PANEL_MIN_WIDTH), DETAILS_PANEL_MAX_WIDTH);
-}
-
-function readStoredDetailsPanelCollapsed(): boolean {
-  if (typeof window === "undefined") return true;
-  try {
-    const stored = window.localStorage.getItem(DETAILS_PANEL_COLLAPSED_STORAGE_KEY);
-    return stored === null || stored === "1";
-  } catch {
-    return true;
-  }
-}
-
-function readStoredDetailsPanelWidth(): number {
-  if (typeof window === "undefined") return DETAILS_PANEL_DEFAULT_WIDTH;
-  try {
-    const stored = window.localStorage.getItem(DETAILS_PANEL_WIDTH_STORAGE_KEY);
-    if (stored === null) return DETAILS_PANEL_DEFAULT_WIDTH;
-    const parsed = Number.parseInt(stored, 10);
-    return Number.isFinite(parsed) ? clampDetailsPanelWidth(parsed) : DETAILS_PANEL_DEFAULT_WIDTH;
-  } catch {
-    return DETAILS_PANEL_DEFAULT_WIDTH;
-  }
-}
-
-function readStoredInspectorPetVisible(): boolean {
-  if (typeof window === "undefined") return true;
-  try {
-    return window.localStorage.getItem(INSPECTOR_PET_VISIBLE_STORAGE_KEY) !== "0";
-  } catch {
-    return true;
-  }
-}
-
-function SessionContextLogButton({ label, logId }: { label: string; logId: number }): JSX.Element {
-  return (
-    <button
-      type="button"
-      onClick={() => openLogContext(logId)}
-      className="inline-flex h-5 items-center rounded px-1 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground"
-      title={`Open Context for ${formatLogReference(logId)}`}
-    >
-      {label} {formatLogReference(logId)}
-    </button>
-  );
-}
-
-function SessionContextProgressBar({
-  latestPercent,
-  peakPercent,
-  risk,
-  onOpenContext,
-}: {
-  latestPercent: number | null;
-  peakPercent: number | null;
-  risk: ContextRiskLevel;
-  onOpenContext: () => void;
-}): JSX.Element {
-  const latest = progressPercent(latestPercent);
-  const peakMarker = peakMarkerPercent(latestPercent, peakPercent);
-  const ariaLabel =
-    peakPercent === null
-      ? `Latest context window usage ${formatPercent(latestPercent)}`
-      : `Latest context window usage ${formatPercent(latestPercent)}, peak ${formatPercent(
-          peakPercent,
-        )}`;
-
-  return (
-    <button
-      type="button"
-      onClick={onOpenContext}
-      className="group block w-full rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
-      aria-label={`${ariaLabel}. Open latest Context details`}
-      title="Open latest Context details"
-    >
-      <span
-        className="relative block h-2.5 overflow-hidden rounded-full border border-white/10 bg-black/25 transition-colors group-hover:border-cyan-200/35"
-        role="meter"
-        aria-label={ariaLabel}
-        aria-valuemin={0}
-        aria-valuemax={100}
-        aria-valuenow={Math.round(latest)}
-      >
-        <span
-          className={cn("block h-full rounded-full transition-[width]", sessionRiskBarClass(risk))}
-          style={{ width: `${latest}%` }}
-        />
-        {peakMarker !== null && (
-          <span
-            className="absolute top-0 h-full w-0.5 rounded-full bg-amber-100/75 shadow-[0_0_0_1px_rgba(0,0,0,0.25)]"
-            style={{ left: `calc(${peakMarker}% - 0.5px)` }}
-            aria-hidden="true"
-          />
-        )}
-      </span>
-    </button>
-  );
-}
-
-function SessionModelContextRow({ summary }: { summary: SessionModelContextSummary }): JSX.Element {
-  const trend = summary.trendPercent;
-  const TrendIcon =
-    trend === null || Math.abs(trend) < 0.1 ? null : trend > 0 ? ArrowUpRight : ArrowDownRight;
-  const diagnosticLabel = summary.latest.diagnostics[0] ?? null;
-  const latestUsage = formatPercent(summary.latest.usagePercent);
-  const peakUsage = formatPercent(summary.peak.usagePercent);
-  const openLatestContext = (): void => {
-    openLogContext(summary.latest.logId);
-  };
-
-  return (
-    <div className="grid gap-x-4 gap-y-2 border-t border-white/10 py-2 first:border-t-0 lg:grid-cols-[minmax(180px,1fr)_minmax(260px,1fr)_minmax(260px,1.4fr)]">
-      <div className="min-w-0">
-        <div className="flex min-w-0 items-center gap-2">
-          <button
-            type="button"
-            onClick={openLatestContext}
-            className="min-w-0 truncate rounded-sm text-left font-mono font-semibold text-foreground transition-colors hover:text-text-link focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
-            title={`Open latest Context for ${summary.model}`}
-          >
-            {summary.model}
-          </button>
-          <span
-            className={cn(
-              "inline-flex h-5 shrink-0 items-center rounded border px-1.5 font-mono text-[10px]",
-              sessionHealthClass(summary.latest.health.level),
-            )}
-          >
-            {sessionHealthLabel(summary.latest.health.level)}
-          </span>
-        </div>
-        <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground">
-          <span>{formatRequestCount(summary.requestCount)}</span>
-          <span>{formatContextWindow(summary)}</span>
-        </div>
-      </div>
-
-      <div className="min-w-0 space-y-2 text-xs">
-        <SessionContextProgressBar
-          latestPercent={summary.latest.usagePercent}
-          peakPercent={summary.peak.usagePercent}
-          risk={summary.latest.riskLevel}
-          onOpenContext={openLatestContext}
-        />
-        <div className="grid grid-cols-3 gap-2">
-          <div className="min-w-0">
-            <div className="text-[10px] uppercase text-muted-foreground">Latest</div>
-            <div className={cn("mt-0.5 font-mono", sessionRiskClass(summary.latest.riskLevel))}>
-              {latestUsage}
-            </div>
-            <SessionContextLogButton label="Log" logId={summary.latest.logId} />
-          </div>
-          <div className="min-w-0">
-            <div className="text-[10px] uppercase text-muted-foreground">Peak</div>
-            <div className={cn("mt-0.5 font-mono", sessionRiskClass(summary.peak.riskLevel))}>
-              {peakUsage}
-            </div>
-            <SessionContextLogButton label="Log" logId={summary.peak.logId} />
-          </div>
-          <div className="min-w-0">
-            <div className="text-[10px] uppercase text-muted-foreground">Trend</div>
-            <div className="mt-0.5 flex items-center gap-1 font-mono text-foreground">
-              {TrendIcon !== null && (
-                <TrendIcon
-                  className={cn(
-                    "size-3",
-                    trend !== null && trend > 0 ? "text-amber-300" : "text-cyan-300",
-                  )}
-                />
-              )}
-              {formatTrend(trend)}
-            </div>
-            <div className="h-5" aria-hidden="true" />
-          </div>
-        </div>
-      </div>
-
-      <div className="min-w-0 space-y-1.5">
-        <SegmentBar
-          segments={summary.latest.roleSegments}
-          totalTokens={summary.latest.roleTotalTokens}
-          showLabels={false}
-        />
-        <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground">
-          <span className="font-mono">
-            ~{formatTokens(summary.latest.estimatedInputTokens)} input
-          </span>
-          {summary.latest.windowUsedTokens !== null && (
-            <span className="font-mono">~{formatTokens(summary.latest.windowUsedTokens)} used</span>
-          )}
-          {diagnosticLabel !== null && <span className="truncate">{diagnosticLabel}</span>}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function SessionContextSummaryPanel({
-  summary,
-}: {
-  summary: SessionContextSummary;
-}): JSX.Element | null {
-  if (summary.models.length === 0) return null;
-  return (
-    <div className="mt-3 border-t border-white/10 pt-2">
-      <div className="mb-1 flex items-center justify-between gap-2">
-        <div className="text-[11px] font-semibold uppercase tracking-normal text-muted-foreground">
-          Session Context
-        </div>
-        <div className="font-mono text-[10px] text-muted-foreground">
-          {summary.models.length} model{summary.models.length === 1 ? "" : "s"}
-        </div>
-      </div>
-      <div className="max-h-52 overflow-y-auto pr-1">
-        {summary.models.map((modelSummary) => (
-          <SessionModelContextRow key={modelSummary.model} summary={modelSummary} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function formatSessionContextOverview(summary: SessionContextSummary): string {
-  const riskCount = summary.models.filter((model) => model.latest.health.level === "risk").length;
-  if (riskCount > 0) return `${riskCount} risk`;
-
-  const optimizableCount = summary.models.filter(
-    (model) => model.latest.health.level === "optimizable",
-  ).length;
-  if (optimizableCount > 0) return `${optimizableCount} optimizable`;
-
-  return `${summary.models.length} model${summary.models.length === 1 ? "" : "s"}`;
-}
-
-function SessionContextBar({
-  label,
-  logs,
-  totalIn,
-  totalOut,
-  timeDisplayFormat,
-  contextSummary,
-  showBackLink,
-}: {
-  label: string;
-  logs: CapturedLog[];
-  totalIn: number;
-  totalOut: number;
-  timeDisplayFormat: TimeDisplayFormat;
-  contextSummary: SessionContextSummary;
-  showBackLink: boolean;
-}): JSX.Element {
-  const [copied, setCopied] = useState(false);
-  const [detailsOpen, setDetailsOpen] = useState(false);
-  const timeRange = useMemo(
-    () => formatTimeRange(logs, timeDisplayFormat),
-    [logs, timeDisplayFormat],
-  );
-  const userAgent = useMemo(() => getFirstUserAgent(logs), [logs]);
-  const contextOverview = useMemo(
-    () => formatSessionContextOverview(contextSummary),
-    [contextSummary],
-  );
-
-  const handleCopyLink = useCallback(() => {
-    void copyTextToClipboard(window.location.href).then((success) => {
-      if (!success) return;
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  }, []);
-
-  return (
-    <div className="border border-border bg-card shadow-sm mb-3 rounded-[8px] px-3 py-2 text-xs">
-      <div className="flex flex-wrap items-center gap-2">
-        {showBackLink && (
-          <a
-            href={withBasePath("/")}
-            className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground"
-            aria-label="Back to all sessions"
-            title="Back to all sessions"
-          >
-            <ArrowLeft className="size-3.5" />
-          </a>
-        )}
-        <div className="min-w-[180px] flex-1">
-          <div className="flex min-w-0 items-center gap-2">
-            <span className="font-mono font-semibold text-purple-400/90 truncate" title={label}>
-              {truncateSessionId(label)}
-            </span>
-            {userAgent !== null && (
-              <span
-                className="font-mono text-muted-foreground truncate max-w-[220px]"
-                title={userAgent}
-              >
-                {userAgent}
-              </span>
-            )}
-          </div>
-          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground">
-            <span>
-              {logs.length} request{logs.length !== 1 ? "s" : ""}
-            </span>
-            {timeRange !== null && <span>{timeRange}</span>}
-            {(totalIn > 0 || totalOut > 0) && (
-              <span className="font-mono">
-                {formatTokens(totalIn)} in / {formatTokens(totalOut)} out
-              </span>
-            )}
-          </div>
-        </div>
-        {contextSummary.models.length > 0 && (
-          <button
-            type="button"
-            onClick={() => setDetailsOpen((value) => !value)}
-            className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md px-2.5 font-mono text-[11px] text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground"
-            aria-expanded={detailsOpen}
-            title={detailsOpen ? "Hide context details" : "Show context details"}
-          >
-            <span>{contextOverview}</span>
-            {detailsOpen ? (
-              <ChevronUp className="size-3.5" />
-            ) : (
-              <ChevronDown className="size-3.5" />
-            )}
-          </button>
-        )}
-        <button
-          type="button"
-          onClick={handleCopyLink}
-          className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground"
-          aria-label={copied ? "Copied session link" : "Copy session link"}
-          title={copied ? "Copied session link" : "Copy session link"}
-        >
-          {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
-        </button>
-      </div>
-      {detailsOpen && <SessionContextSummaryPanel summary={contextSummary} />}
-    </div>
-  );
-}
-
-export type ProxyViewerProps = {
-  logs: CapturedLog[];
-  sessions: string[];
-  models: string[];
-  selectedSession: string;
-  selectedModel: string;
-  onSessionChange: (session: string) => void;
-  onModelChange: (model: string) => void;
-  onClearAll: () => void;
-  /** Delete persisted storage for the selected session, or all storage from the all-sessions view. */
-  onDeleteCurrentView?: () => Promise<void>;
-  /** Reload the selected/pinned session from stored logs without requiring a page refresh. */
-  onReloadSession?: () => void;
-  /** Clear only the logs whose ids are passed. Called by the per-group
-   *  Clear button on each conversation header. */
-  onClearGroup: (ids: number[]) => void;
-  /** Surface short-lived action feedback without adding sticky page chrome. */
-  onNotify?: (notice: TransientToastInput) => void;
-  onImportLogs?: (file: File) => Promise<ImportLogsResponse>;
-  viewMode: "simple" | "full";
-  captureMode: CaptureMode;
-  /** Live strip-Claude-Code-billing-header flag, sourced once at the container. */
-  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;
-  /** True while a pinned session page is waiting for its initial log scan. */
-  isLoading?: boolean;
-  /** Current truth for the all-sessions live stream. Omitted on stored session pages. */
-  liveConnection?: LiveConnectionState;
-  /** Retry the live stream immediately without discarding displayed logs. */
-  onRetryLiveConnection?: () => void;
-  /** Stop automatic live-stream retries while keeping displayed logs available. */
-  onStopLiveConnection?: () => void;
-  /** Cursor controls for history pages. Undefined keeps the live stream UI compact. */
-  pagination?: LogPaginationControls;
-  /** Active session log loading progress, shown near load/reload controls. */
-  sessionLoadProgress?: SessionLoadProgress;
-  /** Recoverable session history load failure; existing logs remain visible. */
-  sessionLoadError?: string;
-  /** Group/run member metadata attached to the pinned session id. */
-  sessionMemberships?: SessionMembershipEvidence[];
-  /** Hide the session filter dropdown. Used on `/session/$id` routes where
-   *  the session is already pinned by the URL and the dropdown would just
-   *  fight the URL state. */
-  hideSessionFilter?: boolean;
-  /** Session id pinned by a `/session/$id` route. Enables session-page chrome. */
-  pinnedSessionId?: string;
-};
-
-export function ProxyViewer({
-  logs,
-  sessions,
-  selectedSession,
-  selectedModel,
-  onSessionChange,
-  onClearAll,
-  onDeleteCurrentView,
-  onReloadSession,
-  onClearGroup,
-  onNotify,
-  onImportLogs,
-  viewMode,
-  captureMode,
-  strip,
-  slowResponseThresholdSeconds,
-  timeDisplayFormat,
-  isLoading = false,
-  liveConnection,
-  onRetryLiveConnection,
-  onStopLiveConnection,
-  pagination,
-  sessionLoadProgress,
-  sessionLoadError,
-  sessionMemberships = [],
-  hideSessionFilter = false,
-  pinnedSessionId,
-}: ProxyViewerProps): JSX.Element {
-  const { totalIn, totalOut } = useMemo(() => computeTokenSummary(logs), [logs]);
-  const { providers } = useProviders();
-  const { uiScalePreference, resolvedUiScale, setUiScalePreference } = useUiScale();
-  const [exporting, setExporting] = useState<ExportMode | null>(null);
-  const [exportError, setExportError] = useState<string | null>(null);
-  const [rawExportDialogOpen, setRawExportDialogOpen] = useState(false);
-  const [importing, setImporting] = useState(false);
-  const [importStatus, setImportStatus] = useState<string | null>(null);
-  const [importError, setImportError] = useState<string | null>(null);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [deletingCurrentView, setDeletingCurrentView] = useState(false);
-  const [detailsPanelCollapsed, setDetailsPanelCollapsed] = useState(true);
-  const [detailsPanelWidth, setDetailsPanelWidth] = useState(DETAILS_PANEL_DEFAULT_WIDTH);
-  const [detailsPanelResizing, setDetailsPanelResizing] = useState(false);
-  const [detailsPanelStorageLoaded, setDetailsPanelStorageLoaded] = useState(false);
-  const [petVisible, setPetVisible] = useState(true);
-  const [petVisibilityStorageLoaded, setPetVisibilityStorageLoaded] = useState(false);
-  const [assistantSearchResult, setAssistantSearchResult] = useState<PiAgentSearchResult | null>(
-    null,
-  );
-  const [comparePair, setComparePair] = useState<[CapturedLog, CapturedLog] | null>(null);
-  const logListRef = useRef<HTMLDivElement>(null);
-  const logListWrapperRef = useRef<HTMLDivElement>(null);
-  const importInputRef = useRef<HTMLInputElement>(null);
-  const exportAbortRef = useRef<AbortController | null>(null);
-  const exportRequestIdRef = useRef(0);
-  const detailsPanelResizeRef = useRef<DetailsPanelResizeState | null>(null);
-  useKeyboardNavigation(logListRef, logListWrapperRef, { pageWide: true });
-  const [connectionEndpoints, setConnectionEndpoints] = useState<CodingAgentEndpoints | null>(null);
-
-  useEffect(() => subscribeCodingAgentEndpoints(setConnectionEndpoints), []);
-
-  const cancelTransientTasks = useCallback(() => {
-    exportRequestIdRef.current += 1;
-    exportAbortRef.current?.abort();
-    exportAbortRef.current = null;
-    setExporting(null);
-    setExportError(null);
-  }, []);
-
-  useEffect(
-    () => () => {
-      exportRequestIdRef.current += 1;
-      exportAbortRef.current?.abort();
-      exportAbortRef.current = null;
-    },
-    [],
-  );
-
-  useEffect(() => {
-    setDetailsPanelCollapsed(readStoredDetailsPanelCollapsed());
-    setDetailsPanelWidth(readStoredDetailsPanelWidth());
-    setDetailsPanelStorageLoaded(true);
-  }, []);
-
-  useEffect(() => {
-    if (!detailsPanelStorageLoaded) return;
-    window.localStorage.setItem(
-      DETAILS_PANEL_COLLAPSED_STORAGE_KEY,
-      detailsPanelCollapsed ? "1" : "0",
-    );
-  }, [detailsPanelCollapsed, detailsPanelStorageLoaded]);
-
-  useEffect(() => {
-    if (!detailsPanelStorageLoaded) return;
-    try {
-      window.localStorage.setItem(DETAILS_PANEL_WIDTH_STORAGE_KEY, String(detailsPanelWidth));
-    } catch {
-      // Local storage can be unavailable in hardened browser profiles.
-    }
-  }, [detailsPanelStorageLoaded, detailsPanelWidth]);
-
-  useEffect(() => {
-    setPetVisible(readStoredInspectorPetVisible());
-    setPetVisibilityStorageLoaded(true);
-  }, []);
-
-  useEffect(() => {
-    if (!petVisibilityStorageLoaded) return;
-    try {
-      window.localStorage.setItem(INSPECTOR_PET_VISIBLE_STORAGE_KEY, petVisible ? "1" : "0");
-    } catch {
-      // Local storage can be unavailable in hardened browser profiles.
-    }
-  }, [petVisibilityStorageLoaded, petVisible]);
-
-  useEffect(() => {
-    if (pinnedSessionId === undefined) {
-      document.title = "Agent Inspector";
-      return;
-    }
-    const requestLabel = logs.length === 1 ? "1 req" : `${logs.length} req`;
-    document.title = `${truncateSessionId(pinnedSessionId)} - ${requestLabel} - Agent Inspector`;
-  }, [logs.length, pinnedSessionId]);
-
-  const handleExport = useCallback(
-    async (mode: ExportMode) => {
-      exportAbortRef.current?.abort();
-      const controller = new AbortController();
-      exportAbortRef.current = controller;
-      const requestId = exportRequestIdRef.current + 1;
-      exportRequestIdRef.current = requestId;
-      setExporting(mode);
-      setExportError(null);
-      try {
-        const result = await exportLogsAsZip(logs, mode, { signal: controller.signal });
-        if (exportRequestIdRef.current !== requestId) return;
-        if (!result.ok) {
-          if (result.canceled === true) return;
-          if (onNotify !== undefined) {
-            onNotify({ message: result.message, tone: "error" });
-          } else {
-            setExportError(result.message);
-          }
-        }
-      } finally {
-        if (exportRequestIdRef.current === requestId) {
-          exportAbortRef.current = null;
-          setExporting(null);
-        }
-      }
-    },
-    [logs, onNotify],
-  );
-  const handleExportRequest = useCallback(
-    (mode: ExportMode) => {
-      if (exportRequiresConfirmation(mode)) {
-        setRawExportDialogOpen(true);
-        return;
-      }
-      void handleExport(mode);
-    },
-    [handleExport],
-  );
-  const handleExportRedactedInstead = useCallback(() => {
-    setRawExportDialogOpen(false);
-    void handleExport("redacted");
-  }, [handleExport]);
-  const handleConfirmRawExport = useCallback(() => {
-    setRawExportDialogOpen(false);
-    void handleExport("raw");
-  }, [handleExport]);
-  const handleImportClick = useCallback(() => {
-    importInputRef.current?.click();
-  }, []);
-
-  const handleImportFileChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      const file = event.currentTarget.files?.[0];
-      event.currentTarget.value = "";
-      if (file === undefined || onImportLogs === undefined) return;
-
-      setImporting(true);
-      setImportError(null);
-      setImportStatus(null);
-      void onImportLogs(file)
-        .then((result) => {
-          const skipped = result.skipped > 0 ? `, skipped ${String(result.skipped)}` : "";
-          const message = `Imported ${String(result.imported)} logs as ${result.sessionId}${skipped}.`;
-          if (onNotify !== undefined) {
-            onNotify({ message, tone: "success" });
-          } else {
-            setImportStatus(message);
-          }
-        })
-        .catch((err: unknown) => {
-          const message = err instanceof Error ? err.message : "Failed to import logs";
-          if (onNotify !== undefined) {
-            onNotify({ message, tone: "error" });
-          } else {
-            setImportError(message);
-          }
-        })
-        .finally(() => {
-          setImporting(false);
-        });
-    },
-    [onImportLogs, onNotify],
-  );
-  // Close the compare drawer when the user changes the session or model
-  // filter, since the predecessor relationship may no longer be meaningful.
-  useEffect(() => {
-    cancelTransientTasks();
-    setComparePair(null);
-    setAssistantSearchResult(null);
-  }, [cancelTransientTasks, selectedSession, selectedModel]);
-
-  const handleClearCurrentView = useCallback(() => {
-    cancelTransientTasks();
-    setImportStatus(null);
-    setImportError(null);
-    setComparePair(null);
-    onClearAll();
-  }, [cancelTransientTasks, onClearAll]);
-
-  const handleRequestDeleteCurrentView = useCallback(() => {
-    setDeleteDialogOpen(true);
-  }, []);
-
-  const handleConfirmDeleteCurrentView = useCallback(() => {
-    cancelTransientTasks();
-    setImportStatus(null);
-    setImportError(null);
-    setComparePair(null);
-
-    if (onDeleteCurrentView === undefined) return;
-
-    setDeletingCurrentView(true);
-    void onDeleteCurrentView()
-      .then(() => {
-        setDeleteDialogOpen(false);
-      })
-      .catch((err: unknown) => {
-        const message = err instanceof Error ? err.message : "Failed to delete stored logs";
-        if (onNotify !== undefined) {
-          onNotify({ message, tone: "error" });
-        } else {
-          setImportError(message);
-        }
-      })
-      .finally(() => {
-        setDeletingCurrentView(false);
-      });
-  }, [cancelTransientTasks, onDeleteCurrentView, onNotify]);
-
-  const handleReloadCurrentSession = useCallback(() => {
-    if (onReloadSession === undefined) return;
-    cancelTransientTasks();
-    setImportStatus(null);
-    setImportError(null);
-    setComparePair(null);
-    onReloadSession();
-  }, [cancelTransientTasks, onReloadSession]);
-
-  const closeCompare = useCallback(() => {
-    setComparePair(null);
-  }, []);
-
-  const toggleDetailsPanelCollapsed = useCallback(() => {
-    setDetailsPanelCollapsed((value) => !value);
-  }, []);
-  const handleDetailsPanelResizeStart = useCallback(
-    (event: ReactPointerEvent<HTMLButtonElement>) => {
-      detailsPanelResizeRef.current = {
-        startX: event.clientX,
-        startWidth: detailsPanelWidth,
-        pointerId: event.pointerId,
-      };
-      event.currentTarget.setPointerCapture(event.pointerId);
-      setDetailsPanelResizing(true);
-    },
-    [detailsPanelWidth],
-  );
-  const handleDetailsPanelResizeMove = useCallback(
-    (event: ReactPointerEvent<HTMLButtonElement>) => {
-      const resize = detailsPanelResizeRef.current;
-      if (resize === null || resize.pointerId !== event.pointerId) return;
-      setDetailsPanelWidth(
-        clampDetailsPanelWidth(resize.startWidth + resize.startX - event.clientX),
-      );
-    },
-    [],
-  );
-  const handleDetailsPanelResizeEnd = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
-    const resize = detailsPanelResizeRef.current;
-    if (resize === null || resize.pointerId !== event.pointerId) return;
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-    detailsPanelResizeRef.current = null;
-    setDetailsPanelResizing(false);
-  }, []);
-  const resetDetailsPanelWidth = useCallback(() => {
-    setDetailsPanelWidth(DETAILS_PANEL_DEFAULT_WIDTH);
-  }, []);
-  const togglePetVisibility = useCallback(() => {
-    setPetVisible((value) => !value);
-  }, []);
-
-  const assistantResultLogIds = useMemo(
-    () => (assistantSearchResult === null ? null : new Set<number>(assistantSearchResult.logIds)),
-    [assistantSearchResult],
-  );
-  const displayedLogs = useMemo(
-    () =>
-      assistantResultLogIds === null
-        ? logs
-        : logs.filter((log) => assistantResultLogIds.has(log.id)),
-    [assistantResultLogIds, logs],
-  );
-  const groups = useMemo(() => groupLogsByConversation(displayedLogs), [displayedLogs]);
-  const displayNumberByLogId = useMemo(() => buildDisplayNumberByLogId(groups), [groups]);
-  const sessionContextScope = useMemo(
-    () => resolveSessionContextScope({ pinnedSessionId, selectedSession, sessions, logs }),
-    [logs, pinnedSessionId, selectedSession, sessions],
-  );
-  const sessionContextLogs = sessionContextScope?.logs ?? [];
-  const hasSessionContext = sessionContextScope !== null && sessionContextLogs.length > 0;
-  const { totalIn: sessionContextTotalIn, totalOut: sessionContextTotalOut } = useMemo(
-    () => computeTokenSummary(sessionContextLogs),
-    [sessionContextLogs],
-  );
-  const sessionContextSummary = useMemo(
-    () => buildSessionContextSummary(sessionContextLogs, providers),
-    [sessionContextLogs, providers],
-  );
-  const cacheTrends = useMemo(() => computeCacheTrends(groups), [groups]);
-  const comparisonPredecessors = useMemo(() => buildValidPredecessors(groups), [groups]);
-  const exportActionVisibility = getExportActionVisibility(captureMode, logs.length);
-  const isPinnedSessionPage = pinnedSessionId !== undefined;
-  const canClearCurrentView = logs.length > 0;
-  const canDeleteCurrentView =
-    onDeleteCurrentView !== undefined && (logs.length > 0 || selectedSession !== "__all__");
-  const deleteTargetLabel = selectedSession === "__all__" ? "all sessions" : "this session";
-  const deleteTargetDescription =
-    selectedSession === "__all__"
-      ? "Deletes every stored log, streaming chunk, and session archive entry across all sessions."
-      : "Deletes every stored log, streaming chunk, and session archive entry for this session, including history that is not currently loaded.";
-  const reloadSessionLabel = logs.length === 0 ? "Load" : "Reload";
-  const activeScopeLabel =
-    hasSessionContext && sessionContextScope !== null
-      ? truncateSessionId(sessionContextScope.label)
-      : selectedSession === "__all__"
-        ? "All sessions"
-        : truncateSessionId(selectedSession);
-  const liveEmptyState = resolveLiveEmptyState(liveConnection);
-  const liveEmptyStateCopy = getLiveEmptyStateCopy(liveEmptyState);
-  const slateStats = useMemo(
-    () =>
-      buildSessionSlateStats({
-        logs: displayedLogs,
-        conversationGroups: groups,
-        isLoading,
-        timeDisplayFormat,
-        slowResponseThresholdSeconds,
-      }),
-    [displayedLogs, groups, isLoading, slowResponseThresholdSeconds, timeDisplayFormat],
-  );
-  const handleCompareWithPrevious = useCallback(
-    (log: CapturedLog) => {
-      const predecessor = comparisonPredecessors.get(log.id);
-      if (predecessor !== undefined) setComparePair([predecessor, log]);
-    },
-    [comparisonPredecessors],
-  );
-  const labSessionId =
-    pinnedSessionId !== undefined
-      ? pinnedSessionId
-      : selectedSession === "__all__"
-        ? null
-        : selectedSession;
-
-  return (
-    <div className="bg-background min-h-screen w-full overflow-x-clip text-foreground lg:h-screen lg:flex lg:flex-col lg:overflow-hidden">
-      <ApplicationBar
-        liveConnection={liveConnection}
-        alertsAction={<AlertsDialog />}
-        settingsAction={<SettingsDialog />}
-      />
-      <button
-        type="button"
-        onClick={toggleDetailsPanelCollapsed}
-        className={cn(
-          "group fixed top-1/2 right-3 z-50 inline-flex h-14 w-8 -translate-y-1/2 items-center justify-center rounded-l-md border border-border/70 bg-background/90 text-muted-foreground shadow-lg backdrop-blur transition-colors motion-reduce:transition-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
-        )}
-        aria-label={detailsPanelCollapsed ? "Show details panel" : "Hide details panel"}
-        title={detailsPanelCollapsed ? "Show details panel" : "Hide details panel"}
-      >
-        <span className="absolute bottom-2 left-1 top-2 w-px rounded-full bg-border transition-colors group-hover:bg-foreground/35" />
-        {detailsPanelCollapsed ? (
-          <PanelRightOpen className="size-3.5" />
-        ) : (
-          <PanelRightClose className="size-3.5" />
-        )}
-      </button>
-      {petVisibilityStorageLoaded && petVisible && (
-        <LazyFeatureBoundary feature="Inspector Pet">
-          <Suspense fallback={null}>
-            <LazyInspectorPet logs={logs} />
-          </Suspense>
-        </LazyFeatureBoundary>
-      )}
-      <div
-        className={cn(
-          "flex w-full min-w-0 flex-col lg:min-h-0 lg:flex-1 lg:flex-row lg:overflow-hidden",
-          detailsPanelResizing && "cursor-col-resize select-none",
-        )}
-      >
-        {!detailsPanelCollapsed && (
-          <>
-            <button
-              type="button"
-              className="fixed inset-0 z-30 bg-background/70 backdrop-blur-sm lg:hidden"
-              onClick={toggleDetailsPanelCollapsed}
-              aria-label="Close details panel"
-            />
-            <aside
-              className="inspector-scrollbar fixed inset-x-3 bottom-3 top-24 z-40 order-1 overflow-y-auto rounded-lg border border-border bg-background/98 shadow-2xl max-lg:!w-auto lg:relative lg:inset-auto lg:order-2 lg:h-full lg:shrink-0 lg:rounded-none lg:border-y-0 lg:border-r-0 lg:shadow-none"
-              style={{ width: detailsPanelWidth }}
-            >
-              <button
-                type="button"
-                className="absolute bottom-0 left-0 top-0 z-30 hidden w-2 -translate-x-1/2 cursor-col-resize touch-none items-center justify-center lg:flex"
-                onPointerDown={handleDetailsPanelResizeStart}
-                onPointerMove={handleDetailsPanelResizeMove}
-                onPointerUp={handleDetailsPanelResizeEnd}
-                onPointerCancel={handleDetailsPanelResizeEnd}
-                onDoubleClick={resetDetailsPanelWidth}
-                aria-label="Resize details panel"
-                title="Drag to resize; double-click to reset"
-              >
-                <span className="h-12 w-1 rounded-full bg-border transition-colors hover:bg-primary" />
-              </button>
-              <div className="flex min-h-full flex-col gap-4 p-4">
-                <div className="sticky top-0 z-20 -mx-4 -mt-4 grid gap-2 border-b border-border/60 bg-background/95 px-4 pb-3 pt-4 backdrop-blur">
-                  <SidebarPanel label="View">
-                    <div className="flex flex-wrap items-center gap-1.5">
-                      <ThemeModeToggle />
-                      <UiScaleControl
-                        preference={uiScalePreference}
-                        resolvedScale={resolvedUiScale}
-                        onChange={setUiScalePreference}
-                      />
-                    </div>
-                  </SidebarPanel>
-                  <SidebarPanel label="Workspace">
-                    <div className="flex flex-wrap items-center gap-2">
-                      <GroupsDialog labelledTrigger />
-                      <AgentLabDialog
-                        currentSessionId={labSessionId}
-                        logCount={logs.length}
-                        labelledTrigger
-                      />
-                    </div>
-                  </SidebarPanel>
-                </div>
-
-                <SidebarPanel label="Current scope">
-                  <div className="mb-2 rounded-md border border-border/50 bg-muted/25 px-3 py-2">
-                    <div
-                      className="truncate font-mono text-xs font-semibold text-text-link"
-                      title={activeScopeLabel}
-                    >
-                      {activeScopeLabel}
-                    </div>
-                    <div className="mt-1 text-[11px] text-muted-foreground">
-                      {isPinnedSessionPage ? "Pinned session" : "Live Inspector data"}
-                    </div>
-                  </div>
-                  <div className="grid grid-cols-2 gap-2">
-                    <SidebarMetric
-                      label={assistantSearchResult === null ? "Requests" : "Results"}
-                      value={displayedLogs.length}
-                    />
-                    <SidebarMetric label="Sessions" value={sessions.length} />
-                    <SidebarMetric
-                      label="Input"
-                      value={formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)}
-                    />
-                    <SidebarMetric
-                      label="Output"
-                      value={formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)}
-                    />
-                  </div>
-                  {sessionLoadProgress !== undefined && (
-                    <div className="mt-2 rounded-md border border-border/50 bg-muted/25 px-2 py-2">
-                      <SessionLoadProgressBar progress={sessionLoadProgress} />
-                    </div>
-                  )}
-                </SidebarPanel>
-
-                {hasSessionContext && sessionContextScope !== null && (
-                  <SessionContextBar
-                    label={sessionContextScope.label}
-                    logs={sessionContextLogs}
-                    totalIn={sessionContextTotalIn}
-                    totalOut={sessionContextTotalOut}
-                    timeDisplayFormat={timeDisplayFormat}
-                    contextSummary={sessionContextSummary}
-                    showBackLink={sessionContextScope.showBackLink}
-                  />
-                )}
-
-                {hasSessionContext &&
-                  pinnedSessionId !== undefined &&
-                  sessionMemberships.length > 0 && (
-                    <SessionMembershipPanel memberships={sessionMemberships} />
-                  )}
-
-                <div className="flex-1" />
-
-                <PiAgentPanel
-                  currentSessionId={labSessionId}
-                  logCount={logs.length}
-                  onResultChange={setAssistantSearchResult}
-                />
-              </div>
-            </aside>
-          </>
-        )}
-
-        <main className="inspector-scrollbar order-2 min-w-0 lg:order-1 lg:h-full lg:flex-1 lg:overflow-y-auto">
-          <div className="bg-background/95 shadow-[0_12px_36px_rgba(0,0,0,0.18),inset_0_-1px_0_rgba(255,255,255,0.045)] sticky top-0 z-30 px-4 py-3 lg:px-5">
-            <div className="flex flex-wrap items-center gap-2">
-              <div className="min-w-[180px] flex-1">
-                <div className="text-sm font-semibold text-foreground">Logs</div>
-                <div className="mt-0.5 font-mono text-[11px] text-muted-foreground">
-                  {activeScopeLabel}
-                </div>
-              </div>
-              <PetVisibilityToggle visible={petVisible} onToggle={togglePetVisibility} />
-              {onImportLogs !== undefined && (
-                <>
-                  <input
-                    ref={importInputRef}
-                    type="file"
-                    accept=".zip,.json,.jsonl,application/zip,application/json"
-                    className="hidden"
-                    onChange={handleImportFileChange}
-                  />
-                  <button
-                    type="button"
-                    onClick={handleImportClick}
-                    disabled={importing}
-                    className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                    title="Import Agent Inspector export"
-                  >
-                    {importing ? (
-                      <span>Importing...</span>
-                    ) : (
-                      <>
-                        <Upload className="size-3.5" />
-                        <span>Import</span>
-                      </>
-                    )}
-                  </button>
-                </>
-              )}
-              {exportActionVisibility.redacted && (
-                <button
-                  type="button"
-                  onClick={() => {
-                    handleExportRequest("redacted");
-                  }}
-                  disabled={exporting !== null}
-                  className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                  title="Export redacted logs as JSON ZIP"
-                >
-                  {exporting === "redacted" ? (
-                    <span>Exporting...</span>
-                  ) : (
-                    <>
-                      <Download className="size-3.5" />
-                      <span>Export</span>
-                    </>
-                  )}
-                </button>
-              )}
-              {exportActionVisibility.raw && (
-                <button
-                  type="button"
-                  onClick={() => {
-                    handleExportRequest("raw");
-                  }}
-                  disabled={exporting !== null}
-                  className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                  title="Export raw logs without redaction"
-                >
-                  {exporting === "raw" ? (
-                    <span>Exporting...</span>
-                  ) : (
-                    <>
-                      <FileJson className="size-3.5" />
-                      <span>Raw</span>
-                    </>
-                  )}
-                </button>
-              )}
-              {onReloadSession !== undefined && (
-                <button
-                  type="button"
-                  onClick={handleReloadCurrentSession}
-                  disabled={isLoading}
-                  className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                  title="Reload this session from stored logs"
-                >
-                  <RefreshCw
-                    className={cn(
-                      "size-3.5",
-                      isLoading && "animate-spin motion-reduce:animate-none",
-                    )}
-                  />
-                  <span>{reloadSessionLabel}</span>
-                </button>
-              )}
-              <button
-                type="button"
-                onClick={handleClearCurrentView}
-                disabled={!canClearCurrentView}
-                className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                title="Clear the current view. Stored logs remain reloadable."
-              >
-                <Trash2 className="size-3.5" />
-                <span>Clear</span>
-              </button>
-              {onDeleteCurrentView !== undefined && (
-                <button
-                  type="button"
-                  onClick={handleRequestDeleteCurrentView}
-                  disabled={!canDeleteCurrentView || deletingCurrentView}
-                  className="bg-red-500/[0.07] hover:bg-red-500/[0.12] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-red-200 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.14)] transition-colors hover:text-red-100 focus-visible:ring-1 focus-visible:ring-red-300 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                  title="Delete persisted history for the selected session."
-                >
-                  <Trash2 className="size-3.5" />
-                  <span>Delete</span>
-                </button>
-              )}
-            </div>
-            {pagination === undefined && sessionLoadProgress !== undefined && (
-              <div className="mt-2 rounded-md bg-black/20 px-2 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
-                <SessionLoadProgressBar progress={sessionLoadProgress} />
-              </div>
-            )}
-            {sessionLoadError !== undefined && (
-              <div
-                role="alert"
-                className="mt-2 flex flex-wrap items-center gap-2 rounded-md border border-red-400/25 bg-red-500/10 px-3 py-2 text-xs text-red-100"
-              >
-                <span className="min-w-0 flex-1">
-                  Session logs could not be loaded. {sessionLoadError} Existing logs remain visible.
-                </span>
-                {onReloadSession !== undefined && (
-                  <button
-                    type="button"
-                    onClick={handleReloadCurrentSession}
-                    className="inline-flex h-7 items-center gap-1 rounded-md bg-black/15 px-2 font-medium transition-colors hover:bg-black/25 focus-visible:ring-1 focus-visible:ring-current focus-visible:outline-none"
-                  >
-                    <RefreshCw className="size-3" />
-                    Retry
-                  </button>
-                )}
-              </div>
-            )}
-            {assistantSearchResult !== null && (
-              <div className="mt-2 flex items-center gap-3 rounded-md bg-cyan-400/[0.07] px-3 py-2 shadow-[inset_2px_0_0_rgba(103,232,249,0.35),inset_0_0_0_1px_rgba(103,232,249,0.08)]">
-                <div className="min-w-0 flex-1">
-                  <div className="truncate text-xs font-medium text-cyan-50">
-                    {assistantSearchResult.question}
-                  </div>
-                  <div className="mt-0.5 text-[10px] text-muted-foreground">
-                    Showing {String(displayedLogs.length)} loaded logs from{" "}
-                    {String(assistantSearchResult.logIds.length)} linked results
-                  </div>
-                </div>
-                <button
-                  type="button"
-                  onClick={() => setAssistantSearchResult(null)}
-                  className="inline-flex h-7 shrink-0 items-center gap-1 rounded-md bg-black/20 px-2 text-[11px] text-muted-foreground transition-colors hover:bg-black/30 hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
-                >
-                  <X className="size-3" />
-                  All logs
-                </button>
-              </div>
-            )}
-            {assistantSearchResult === null && (
-              <LogPaginationBar logs={logs} pagination={pagination} embedded={true} />
-            )}
-            {onNotify === undefined && exportError !== null && (
-              <div className="mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
-                {exportError}
-              </div>
-            )}
-            {onNotify === undefined && importError !== null && (
-              <div className="mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
-                {importError}
-              </div>
-            )}
-            {onNotify === undefined && importStatus !== null && importError === null && (
-              <div className="mt-2 rounded-md border border-cyan-400/25 bg-cyan-500/10 px-3 py-2 text-xs text-cyan-100">
-                {importStatus}
-              </div>
-            )}
-            {liveConnection !== undefined &&
-              liveConnection.status !== "live" &&
-              onRetryLiveConnection !== undefined &&
-              onStopLiveConnection !== undefined && (
-                <LiveConnectionStatus
-                  state={liveConnection}
-                  hasLogs={logs.length > 0}
-                  onRetry={onRetryLiveConnection}
-                  onStop={onStopLiveConnection}
-                />
-              )}
-          </div>
-
-          <div className="px-4 py-4 lg:px-5">
-            <SessionOpeningSlate stats={slateStats} />
-            {assistantSearchResult !== null && displayedLogs.length === 0 ? (
-              <div className="py-16 text-center text-muted-foreground">
-                <div className="mx-auto max-w-xl rounded-[8px] bg-white/[0.035] px-5 py-8 shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_18px_52px_rgba(0,0,0,0.18)]">
-                  <p className="text-sm font-medium text-foreground">No linked logs are loaded</p>
-                  <p className="mt-2 text-xs leading-5 text-muted-foreground">
-                    Assistant found evidence, but none of its linked log IDs are in the current
-                    loaded window. Open an evidence card in Assistant or restore the full log view.
-                  </p>
-                  <button
-                    type="button"
-                    onClick={() => setAssistantSearchResult(null)}
-                    className="mt-4 inline-flex h-8 items-center rounded-md bg-cyan-400/10 px-3 text-xs text-cyan-100 transition-colors hover:bg-cyan-400/16"
-                  >
-                    Show all logs
-                  </button>
-                </div>
-              </div>
-            ) : logs.length === 0 ? (
-              selectedSession !== "__all__" ? (
-                <div className="py-16 text-center text-muted-foreground">
-                  <div className="bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_18px_52px_rgba(0,0,0,0.18)] mx-auto max-w-xl space-y-4 rounded-[8px] px-4 py-8">
-                    <p className="text-sm font-medium">
-                      {isLoading
-                        ? "Loading session data..."
-                        : sessionLoadError === undefined
-                          ? "No logs loaded for this session"
-                          : "Session logs could not be loaded"}
-                    </p>
-                    <p className="inline-block max-w-full rounded bg-muted px-3 py-1 font-mono text-xs break-all">
-                      {truncateSessionId(selectedSession)}
-                    </p>
-                    {sessionLoadProgress !== undefined && (
-                      <div className="mx-auto max-w-md rounded-md bg-black/20 px-2 py-2 text-left shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
-                        <SessionLoadProgressBar progress={sessionLoadProgress} />
-                      </div>
-                    )}
-                    {sessionMemberships.length > 0 && (
-                      <div className="text-left">
-                        <SessionMembershipPanel memberships={sessionMemberships} />
-                      </div>
-                    )}
-                    {!isLoading && (
-                      <div className="flex flex-col items-center gap-3 text-xs">
-                        <p>Stored logs may still be available.</p>
-                        <div className="flex flex-wrap items-center justify-center gap-2">
-                          {onReloadSession !== undefined && (
-                            <button
-                              type="button"
-                              onClick={handleReloadCurrentSession}
-                              className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
-                            >
-                              <RefreshCw className="size-3.5" />
-                              <span>Load session</span>
-                            </button>
-                          )}
-                          {hideSessionFilter ? (
-                            <a
-                              href={withBasePath("/")}
-                              className="inline-flex h-8 items-center rounded-md px-3 text-xs text-muted-foreground underline transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
-                            >
-                              Back to all sessions
-                            </a>
-                          ) : (
-                            <button
-                              type="button"
-                              onClick={() => onSessionChange("__all__")}
-                              className="inline-flex h-8 items-center rounded-md px-3 text-xs text-muted-foreground underline transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
-                            >
-                              Show all sessions
-                            </button>
-                          )}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              ) : (
-                <div className="py-16 text-center text-muted-foreground">
-                  <div className="bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_18px_52px_rgba(0,0,0,0.18)] mx-auto max-w-2xl space-y-4 rounded-[8px] px-4 py-8">
-                    <p className="text-sm font-medium">{liveEmptyStateCopy.title}</p>
-                    <p className="mx-auto max-w-xl text-xs leading-relaxed text-muted-foreground">
-                      {liveEmptyStateCopy.description}
-                    </p>
-                    {liveEmptyState === "empty" && sessions.length > 0 && (
-                      <p className="mx-auto max-w-xl text-xs leading-relaxed text-muted-foreground">
-                        Pick a session from the filter panel to load stored logs on demand.
-                      </p>
-                    )}
-                    {liveEmptyStateCopy.showConnectionCommands && connectionEndpoints !== null && (
-                      <>
-                        <div className="flex flex-col items-center gap-2">
-                          {buildHomeConnectionCommands(connectionEndpoints).map((command) => (
-                            <CopyableCommand key={command} command={command} />
-                          ))}
-                        </div>
-                        <p className="mx-auto max-w-xl text-xs leading-relaxed text-muted-foreground">
-                          Container note: if your AI tool runs in a different container or host than
-                          Agent Inspector, replace localhost with an address reachable from that
-                          tool and verify the network/firewall path.
-                        </p>
-                      </>
-                    )}
-                  </div>
-                </div>
-              )
-            ) : (
-              <div
-                ref={logListWrapperRef}
-                tabIndex={0}
-                aria-label="Captured logs"
-                className="flex flex-col gap-2 rounded-md focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
-              >
-                <div ref={logListRef}>
-                  <ConversationGroupList
-                    groups={groups}
-                    viewMode={viewMode}
-                    strip={strip}
-                    slowResponseThresholdSeconds={slowResponseThresholdSeconds}
-                    cacheTrends={cacheTrends}
-                    onCompareWithPrevious={handleCompareWithPrevious}
-                    comparisonPredecessors={comparisonPredecessors}
-                    onClearGroup={onClearGroup}
-                    defaultExpanded={groups.length === 1}
-                    timeDisplayFormat={timeDisplayFormat}
-                  />
-                </div>
-                {assistantSearchResult === null && (
-                  <div className="mt-3">
-                    <LogPaginationBar logs={logs} pagination={pagination} />
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </main>
-      </div>
-
-      <Dialog open={rawExportDialogOpen} onOpenChange={setRawExportDialogOpen}>
-        <DialogContent className={RAW_EXPORT_DIALOG_CLASS_NAME}>
-          <RawExportWarning
-            onCancel={() => setRawExportDialogOpen(false)}
-            onExportRedacted={handleExportRedactedInstead}
-            onConfirmRaw={handleConfirmRawExport}
-          />
-        </DialogContent>
-      </Dialog>
-
-      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <DialogContent className="border-red-500/20 bg-zinc-950 text-zinc-100 sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Delete {deleteTargetLabel} history?</DialogTitle>
-            <DialogDescription>
-              Clear only hides logs from the UI. Delete removes stored history from disk.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="rounded-md bg-red-500/[0.08] px-3 py-3 text-sm text-red-100 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.16)]">
-            <span className="block font-medium">This is a full history delete.</span>
-            <span className="mt-1 block text-xs text-red-200/80">{deleteTargetDescription}</span>
-          </div>
-          <div className="flex justify-end gap-2">
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              disabled={deletingCurrentView}
-              onClick={() => setDeleteDialogOpen(false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              type="button"
-              variant="destructive"
-              size="sm"
-              disabled={deletingCurrentView}
-              onClick={handleConfirmDeleteCurrentView}
-            >
-              {deletingCurrentView ? "Deleting..." : "Delete history"}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* Compare drawer: sibling of the log list, not a route change. */}
-      {comparePair !== null && (
-        <LazyFeatureBoundary feature="Compare">
-          <Suspense fallback={null}>
-            <LazyCompareDrawer
-              left={comparePair[0]}
-              right={comparePair[1]}
-              leftDisplayNumber={displayNumberForLog(comparePair[0], displayNumberByLogId)}
-              rightDisplayNumber={displayNumberForLog(comparePair[1], displayNumberByLogId)}
-              onClose={closeCompare}
-            />
-          </Suspense>
-        </LazyFeatureBoundary>
-      )}
-    </div>
-  );
-}