@tonyclaw/agent-inspector 3.0.29 → 3.0.31

package/src/components/ProxyViewer.tsx

@@ -30,7 +30,6 @@ import {
   Flag,
   PanelRightClose,
   PanelRightOpen,
-  Plus,
   RefreshCw,
   Search,
   Siren,
@@ -54,10 +53,12 @@ import { useThemeMode } from "../lib/useThemeMode";
 import { formatUiScale, normalizeUiScalePreference, type UiScalePreference } from "../lib/uiScale";
 import { useUiScale } from "../lib/useUiScale";
 import { useProviders } from "../lib/useProviders";
-import packageJson from "../../package.json";
 import { groupLogsByConversation, type ConversationGroupData } from "./proxy-viewer";
 import {
   buildSessionSlateStats,
+  COPYABLE_COMMAND_CONTAINER_CLASS_NAME,
+  COPYABLE_COMMAND_TEXT_CLASS_NAME,
+  exportRequiresConfirmation,
   formatPaginationStatus,
   getExportActionVisibility,
   resolveSessionContextScope,
@@ -68,8 +69,6 @@ import {
 } from "./proxy-viewer/proxyViewerLogic";
 
 import { CrabLogo } from "./ui/crab-logo";
-import { crabVariants } from "./ui/crab-variants";
-import { McpLogo } from "./ui/mcp-logo";
 import { Button } from "./ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
@@ -79,12 +78,25 @@ import { AlertsDialog } from "./alerts/AlertsDialog";
 import { GroupsDialog } from "./groups/GroupsDialog";
 import { SettingsDialog } from "./providers/SettingsDialog";
 import { AgentLabDialog } from "./ecosystem/AgentLabDialog";
-import { InspectorPet } from "./inspector-pet/InspectorPet";
 import { PiAgentPanel } from "./pi-agent/PiAgentPanel";
+import { LazyFeatureBoundary } from "./errors/SafeErrorBoundary";
 import { computeCacheTrends } from "./proxy-viewer/cacheTrend";
-import { LazyCompareDrawer } from "./proxy-viewer/lazy";
+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";
@@ -158,14 +170,6 @@ export type LogPaginationControls = {
   onNewest: () => void;
 };
 
-export type SessionLoadProgress = {
-  label: string;
-  elapsedMs: number;
-  timeoutMs: number;
-  loadedLogs: number;
-  loadedPages: number;
-};
-
 function getFirstUserAgent(logs: CapturedLog[]): string | null {
   for (const log of logs) {
     if (log.userAgent !== null && log.userAgent !== undefined && log.userAgent !== "") {
@@ -574,7 +578,7 @@ function LogPaginationButton({
       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 disabled:cursor-not-allowed disabled:opacity-45"
+      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}
@@ -583,44 +587,6 @@ function LogPaginationButton({
   );
 }
 
-function formatDurationSeconds(ms: number): string {
-  return `${Math.max(0, Math.ceil(ms / 1000)).toString()}s`;
-}
-
-function SessionLoadProgressBar({ progress }: { progress: SessionLoadProgress }): JSX.Element {
-  const elapsedRatio = Math.min(1, progress.elapsedMs / progress.timeoutMs);
-  const percent = Math.max(4, Math.round(elapsedRatio * 100));
-  const remainingMs = Math.max(0, progress.timeoutMs - progress.elapsedMs);
-  const nearTimeout = elapsedRatio >= 0.75;
-  const details = [
-    progress.loadedLogs > 0 ? `${progress.loadedLogs.toString()} logs` : null,
-    progress.loadedPages > 0
-      ? `${progress.loadedPages.toString()} page${progress.loadedPages === 1 ? "" : "s"}`
-      : null,
-    `${formatDurationSeconds(remainingMs)} before timeout`,
-  ].filter((item): item is string => item !== null);
-
-  return (
-    <div className="min-w-0 space-y-1 px-1 pb-1">
-      <div className="flex min-w-0 items-center justify-between gap-3 font-mono text-[10px] text-muted-foreground">
-        <span className="min-w-0 truncate">{progress.label}</span>
-        <span className={cn("shrink-0 tabular-nums", nearTimeout && "text-amber-300")}>
-          {details.join(" / ")}
-        </span>
-      </div>
-      <div className="h-1.5 overflow-hidden rounded-full bg-white/[0.06]">
-        <div
-          className={cn(
-            "h-full rounded-full transition-all duration-300",
-            nearTimeout ? "bg-amber-300/80" : "bg-cyan-300/70",
-          )}
-          style={{ width: `${percent.toString()}%` }}
-        />
-      </div>
-    </div>
-  );
-}
-
 function LogPaginationBar({
   logs,
   pagination,
@@ -634,7 +600,8 @@ function LogPaginationBar({
   const disabled = pagination.isLoading;
 
   return (
-    <div
+    <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
@@ -643,8 +610,10 @@ function LogPaginationBar({
       )}
     >
       <div className="w-full min-w-0 px-1 font-mono text-[11px] text-muted-foreground sm:flex-1">
-        {formatPaginationStatus({ logs, pagination })}
-        {pagination.isLoading && logs.length > 0 && <span className="ml-2">Loading...</span>}
+        <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} />
         )}
@@ -679,7 +648,7 @@ function LogPaginationBar({
           onClick={pagination.onNewest}
         />
       </div>
-    </div>
+    </nav>
   );
 }
 
@@ -739,7 +708,10 @@ function highlightLogTarget(target: HTMLElement): void {
 function focusLogTarget(logId: number): boolean {
   const target = document.getElementById(`log-${String(logId)}`);
   if (!(target instanceof HTMLElement)) return false;
-  target.scrollIntoView({ block: "center", behavior: "smooth" });
+  target.scrollIntoView({
+    block: "center",
+    behavior: preferredScrollBehavior(browserPrefersReducedMotion()),
+  });
   target.focus({ preventScroll: true });
   highlightLogTarget(target);
   return true;
@@ -774,12 +746,12 @@ function CopyableCommand({ command }: { command: string }): JSX.Element {
   }, [command]);
 
   return (
-    <div className="bg-black/20 inline-flex max-w-full items-center gap-2 rounded-md px-3 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
-      <pre className="m-0 overflow-x-auto font-mono text-sm text-cyan-200">{command}</pre>
+    <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 text-muted-foreground transition-colors hover:text-foreground"
+        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" />}
@@ -827,60 +799,6 @@ function SidebarMetric({ label, value }: { label: string; value: string | number
   );
 }
 
-const CRAB_VARIANT_COLORS = [
-  "text-amber-500",
-  "text-rose-500",
-  "text-sky-500",
-  "text-emerald-500",
-  "text-violet-500",
-  "text-orange-500",
-  "text-cyan-500",
-  "text-pink-500",
-  "text-lime-500",
-  "text-blue-500",
-  "text-yellow-500",
-  "text-fuchsia-500",
-] as const;
-
-function CrabFamily({
-  compact,
-  entrancePhase,
-}: {
-  compact: boolean;
-  entrancePhase: "hidden" | "playing" | "done";
-}): JSX.Element {
-  if (compact) {
-    return <CrabLogo className="size-14 text-amber-500" />;
-  }
-
-  return (
-    <span className="flex shrink-0 items-end gap-1 group cursor-default" aria-hidden="true">
-      <CrabLogo className="size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" />
-      <span className="hidden items-end gap-0.5 sm:flex">
-        {crabVariants.map((Crab, i) => {
-          const color = CRAB_VARIANT_COLORS[i] ?? "text-amber-500";
-          const entranceClass =
-            entrancePhase === "hidden"
-              ? "opacity-0 scale-0"
-              : entrancePhase === "playing"
-                ? "animate-crab-piano-pop"
-                : "";
-          return (
-            <Crab
-              key={i}
-              className={`size-5 ${color} transition-all duration-300 ease-out group-hover:scale-125 group-hover:-translate-y-1 ${entranceClass}`}
-              style={{
-                transitionDelay: `${i * 50}ms`,
-                ...(entrancePhase === "playing" ? { animationDelay: `${i * 400}ms` } : {}),
-              }}
-            />
-          );
-        })}
-      </span>
-    </span>
-  );
-}
-
 function ThemeModeToggle(): JSX.Element {
   const { themeMode, setThemeMode } = useThemeMode();
 
@@ -894,7 +812,7 @@ function ThemeModeToggle(): JSX.Element {
         type="button"
         onClick={() => setThemeMode("light")}
         className={cn(
-          "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground",
+          "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
           themeMode === "light" && "bg-background text-foreground shadow-sm",
         )}
         aria-label="Use light mode"
@@ -907,7 +825,7 @@ function ThemeModeToggle(): JSX.Element {
         type="button"
         onClick={() => setThemeMode("eye-care")}
         className={cn(
-          "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground",
+          "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
           themeMode === "eye-care" && "bg-background text-foreground shadow-sm",
         )}
         aria-label="Use eye care mode"
@@ -920,7 +838,7 @@ function ThemeModeToggle(): JSX.Element {
         type="button"
         onClick={() => setThemeMode("dark")}
         className={cn(
-          "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground",
+          "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
           themeMode === "dark" && "bg-background text-foreground shadow-sm",
         )}
         aria-label="Use dark mode"
@@ -994,93 +912,6 @@ function UiScaleControl({
   );
 }
 
-function BrandHeader({
-  compact,
-  crabEntrancePhase,
-  currentSessionId,
-  logCount,
-  uiScalePreference,
-  resolvedUiScale,
-  onUiScaleChange,
-}: {
-  compact: boolean;
-  crabEntrancePhase: "hidden" | "playing" | "done";
-  currentSessionId: string | null;
-  logCount: number;
-  uiScalePreference: UiScalePreference;
-  resolvedUiScale: number;
-  onUiScaleChange: (preference: UiScalePreference) => void;
-}): JSX.Element {
-  if (compact) {
-    return (
-      <div className="bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_16px_44px_rgba(0,0,0,0.18)] rounded-[8px] p-3">
-        <div className="flex flex-wrap items-start justify-between gap-3">
-          <div className="flex min-w-fit items-start gap-3">
-            <CrabFamily compact={true} entrancePhase={crabEntrancePhase} />
-            <div className="min-w-fit">
-              <div className="flex min-w-fit flex-wrap items-baseline gap-x-2 gap-y-0.5">
-                <span className="whitespace-nowrap text-base font-bold">Agent Inspector</span>
-                <span className="hidden shrink-0 font-mono text-[11px] font-semibold text-muted-foreground sm:inline">
-                  v{packageJson.version}
-                </span>
-              </div>
-              <div className="hidden text-[11px] font-semibold text-muted-foreground sm:block">
-                Local First. Evidence First.
-              </div>
-            </div>
-          </div>
-          <div className="flex shrink-0 items-center gap-1">
-            <ThemeModeToggle />
-            <UiScaleControl
-              preference={uiScalePreference}
-              resolvedScale={resolvedUiScale}
-              onChange={onUiScaleChange}
-            />
-            <AlertsDialog />
-            <GroupsDialog />
-            <AgentLabDialog currentSessionId={currentSessionId} logCount={logCount} />
-            <SettingsDialog />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-3 pb-6">
-      <div className="min-w-10 flex-1" aria-hidden="true" />
-      <h1 className="flex min-w-fit flex-col items-center gap-2 text-center">
-        <span className="flex max-w-full flex-wrap items-end justify-center gap-x-2 gap-y-1">
-          <CrabFamily compact={false} entrancePhase={crabEntrancePhase} />
-          <span className="flex min-w-fit flex-wrap items-baseline justify-center gap-x-2 gap-y-0.5 pl-1">
-            <span className="whitespace-nowrap text-lg font-bold">Agent Inspector</span>
-            <span className="shrink-0 font-mono text-xs font-semibold text-muted-foreground">
-              v{packageJson.version}
-            </span>
-          </span>
-          <Plus className="size-4 shrink-0 text-muted-foreground/70" aria-hidden="true" />
-          <McpLogo className="size-10 shrink-0" />
-        </span>
-        <span className="max-w-full text-sm font-semibold text-muted-foreground">
-          Local First. Evidence First.
-        </span>
-      </h1>
-      <div className="flex flex-1 justify-end gap-1">
-        <ThemeModeToggle />
-        <UiScaleControl
-          preference={uiScalePreference}
-          resolvedScale={resolvedUiScale}
-          onChange={onUiScaleChange}
-        />
-        <AlertsDialog />
-        <GroupsDialog />
-        <AgentLabDialog currentSessionId={currentSessionId} logCount={logCount} />
-        <SettingsDialog />
-      </div>
-    </div>
-  );
-}
-
 const DETAILS_PANEL_COLLAPSED_STORAGE_KEY = "agent-inspector.detailsPanelCollapsed";
 const INSPECTOR_PET_VISIBLE_STORAGE_KEY = "agent-inspector.pet.visible";
 
@@ -1435,10 +1266,18 @@ export type ProxyViewerProps = {
   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
@@ -1469,8 +1308,12 @@ export function ProxyViewer({
   slowResponseThresholdSeconds,
   timeDisplayFormat,
   isLoading = false,
+  liveConnection,
+  onRetryLiveConnection,
+  onStopLiveConnection,
   pagination,
   sessionLoadProgress,
+  sessionLoadError,
   sessionMemberships = [],
   hideSessionFilter = false,
   pinnedSessionId,
@@ -1480,6 +1323,7 @@ export function ProxyViewer({
   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);
@@ -1490,9 +1334,6 @@ export function ProxyViewer({
   const [petVisible, setPetVisible] = useState(true);
   const [petVisibilityStorageLoaded, setPetVisibilityStorageLoaded] = useState(false);
   const [comparePair, setComparePair] = useState<[CapturedLog, CapturedLog] | null>(null);
-  const [crabEntrancePhase, setCrabEntrancePhase] = useState<"hidden" | "playing" | "done">(
-    "hidden",
-  );
   const logListRef = useRef<HTMLDivElement>(null);
   const logListWrapperRef = useRef<HTMLDivElement>(null);
   const importInputRef = useRef<HTMLInputElement>(null);
@@ -1517,18 +1358,6 @@ export function ProxyViewer({
     [],
   );
 
-  useEffect(() => {
-    const perCrabDuration = 400;
-    const startDelay = 50;
-    const playingDone = startDelay + crabVariants.length * perCrabDuration;
-    const t1 = setTimeout(() => setCrabEntrancePhase("playing"), startDelay);
-    const t2 = setTimeout(() => setCrabEntrancePhase("done"), playingDone);
-    return () => {
-      clearTimeout(t1);
-      clearTimeout(t2);
-    };
-  }, []);
-
   useEffect(() => {
     setDetailsPanelCollapsed(readStoredDetailsPanelCollapsed());
     setDetailsPanelStorageLoaded(true);
@@ -1594,6 +1423,24 @@ export function ProxyViewer({
     },
     [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();
   }, []);
@@ -1736,6 +1583,8 @@ export function ProxyViewer({
       : selectedSession === "__all__"
         ? "All sessions"
         : truncateSessionId(selectedSession);
+  const liveEmptyState = resolveLiveEmptyState(liveConnection);
+  const liveEmptyStateCopy = getLiveEmptyStateCopy(liveEmptyState);
   const slateStats = useMemo(
     () =>
       buildSessionSlateStats({
@@ -1776,12 +1625,17 @@ export function ProxyViewer({
         : selectedSession;
 
   return (
-    <div className="bg-background min-h-screen w-full text-foreground lg:h-screen lg:flex lg:flex-col lg:overflow-hidden">
+    <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-40 inline-flex h-14 w-7 -translate-y-1/2 items-center justify-center rounded-l-md border border-white/[0.08] bg-background/90 text-muted-foreground shadow-[0_12px_34px_rgba(0,0,0,0.26),inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur transition-[right,background-color,color,border-color] duration-200 hover:border-white/[0.16] hover:bg-white/[0.07] hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+          "group fixed top-1/2 right-3 z-40 inline-flex h-14 w-7 -translate-y-1/2 items-center justify-center rounded-l-md border border-white/[0.08] bg-background/90 text-muted-foreground shadow-[0_12px_34px_rgba(0,0,0,0.26),inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur transition-[right,background-color,color,border-color] duration-200 motion-reduce:transition-none hover:border-white/[0.16] hover:bg-white/[0.07] hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
           detailsPanelCollapsed
             ? "right-3"
             : "lg:right-[calc(21.25rem-0.875rem)] xl:right-[calc(22.5rem-0.875rem)]",
@@ -1796,7 +1650,13 @@ export function ProxyViewer({
           <PanelRightClose className="size-3.5" />
         )}
       </button>
-      {petVisibilityStorageLoaded && petVisible && <InspectorPet logs={logs} />}
+      {petVisibilityStorageLoaded && petVisible && (
+        <LazyFeatureBoundary feature="Inspector Pet">
+          <Suspense fallback={null}>
+            <LazyInspectorPet logs={logs} />
+          </Suspense>
+        </LazyFeatureBoundary>
+      )}
       <div
         className={cn(
           "grid w-full min-w-0 grid-cols-1 lg:min-h-0 lg:flex-1 lg:overflow-hidden",
@@ -1808,15 +1668,18 @@ export function ProxyViewer({
         {!detailsPanelCollapsed && (
           <aside className="bg-background/95 order-1 border-b border-white/[0.045] lg:order-2 lg:h-full lg:overflow-y-auto lg:border-b-0 lg:border-l lg:border-white/[0.055] inspector-scrollbar">
             <div className="space-y-4 p-4">
-              <BrandHeader
-                compact={true}
-                crabEntrancePhase={crabEntrancePhase}
-                currentSessionId={labSessionId}
-                logCount={logs.length}
-                uiScalePreference={uiScalePreference}
-                resolvedUiScale={resolvedUiScale}
-                onUiScaleChange={setUiScalePreference}
-              />
+              <SidebarPanel label="Tools">
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <ThemeModeToggle />
+                  <UiScaleControl
+                    preference={uiScalePreference}
+                    resolvedScale={resolvedUiScale}
+                    onChange={setUiScalePreference}
+                  />
+                  <GroupsDialog />
+                  <AgentLabDialog currentSessionId={labSessionId} logCount={logs.length} />
+                </div>
+              </SidebarPanel>
 
               <SidebarPanel label="Session">
                 <div className="grid grid-cols-2 gap-2">
@@ -1891,7 +1754,7 @@ export function ProxyViewer({
                           <button
                             type="button"
                             onClick={() => onSessionChange("__all__")}
-                            className="absolute right-1.5 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground"
+                            className="absolute right-1.5 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
                             aria-label="Clear session filter"
                             title="Clear session filter"
                           >
@@ -1900,7 +1763,10 @@ export function ProxyViewer({
                         )}
                       </div>
                       <Select value={sessionSelectValue} onValueChange={handleSessionSelectChange}>
-                        <SelectTrigger className="bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
+                        <SelectTrigger
+                          aria-label="Select a session"
+                          className="bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]"
+                        >
                           <SelectValue placeholder="All sessions" />
                         </SelectTrigger>
                         <SelectContent>
@@ -1920,7 +1786,10 @@ export function ProxyViewer({
                     </>
                   )}
                   <Select value={selectedModel} onValueChange={onModelChange}>
-                    <SelectTrigger className="bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
+                    <SelectTrigger
+                      aria-label="Select a model"
+                      className="bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]"
+                    >
                       <SelectValue placeholder="All models" />
                     </SelectTrigger>
                     <SelectContent>
@@ -1961,7 +1830,7 @@ export function ProxyViewer({
                     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 disabled:cursor-not-allowed disabled:opacity-50"
+                    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 ? (
@@ -1979,10 +1848,10 @@ export function ProxyViewer({
                 <button
                   type="button"
                   onClick={() => {
-                    void handleExport("redacted");
+                    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 disabled:cursor-not-allowed disabled:opacity-50"
+                  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" ? (
@@ -1999,10 +1868,10 @@ export function ProxyViewer({
                 <button
                   type="button"
                   onClick={() => {
-                    void handleExport("raw");
+                    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 disabled:cursor-not-allowed disabled:opacity-50"
+                  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" ? (
@@ -2020,10 +1889,15 @@ export function ProxyViewer({
                   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 disabled:cursor-not-allowed disabled:opacity-50"
+                  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")} />
+                  <RefreshCw
+                    className={cn(
+                      "size-3.5",
+                      isLoading && "animate-spin motion-reduce:animate-none",
+                    )}
+                  />
                   <span>{reloadSessionLabel}</span>
                 </button>
               )}
@@ -2031,7 +1905,7 @@ export function ProxyViewer({
                 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 disabled:cursor-not-allowed disabled:opacity-50"
+                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" />
@@ -2042,7 +1916,7 @@ export function ProxyViewer({
                   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 disabled:cursor-not-allowed disabled:opacity-50"
+                  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" />
@@ -2055,6 +1929,26 @@ export function ProxyViewer({
                 <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>
+            )}
             <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">
@@ -2071,6 +1965,17 @@ export function ProxyViewer({
                 {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">
@@ -2080,7 +1985,11 @@ export function ProxyViewer({
                 <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..." : "No logs loaded for this session"}
+                      {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)}
@@ -2103,7 +2012,7 @@ export function ProxyViewer({
                             <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"
+                              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>
@@ -2112,7 +2021,7 @@ export function ProxyViewer({
                           {hideSessionFilter ? (
                             <a
                               href="/"
-                              className="inline-flex h-8 items-center rounded-md px-3 text-xs text-muted-foreground underline transition-colors hover:text-foreground"
+                              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>
@@ -2120,7 +2029,7 @@ export function ProxyViewer({
                             <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"
+                              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>
@@ -2133,21 +2042,28 @@ export function ProxyViewer({
               ) : (
                 <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">No logs loaded in the current view.</p>
-                    {sessions.length > 0 && (
+                    <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>
                     )}
-                    <div className="flex flex-col items-center gap-2">
-                      <CopyableCommand command="ANTHROPIC_BASE_URL=http://localhost:9527/proxy <your-tool>" />
-                      <CopyableCommand command="OPENAI_BASE_URL=http://localhost:9527/proxy <your-tool>" />
-                    </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>
+                    {liveEmptyStateCopy.showConnectionCommands && (
+                      <>
+                        <div className="flex flex-col items-center gap-2">
+                          <CopyableCommand command="ANTHROPIC_BASE_URL=http://localhost:9527/proxy <your-tool>" />
+                          <CopyableCommand command="OPENAI_BASE_URL=http://localhost:9527/proxy <your-tool>" />
+                        </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>
               )
@@ -2155,7 +2071,8 @@ export function ProxyViewer({
               <div
                 ref={logListWrapperRef}
                 tabIndex={0}
-                className="flex flex-col gap-2 focus:outline-none"
+                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
@@ -2180,6 +2097,16 @@ export function ProxyViewer({
         </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>
@@ -2217,15 +2144,17 @@ export function ProxyViewer({
 
       {/* Compare drawer: sibling of the log list, not a route change. */}
       {comparePair !== null && (
-        <Suspense fallback={null}>
-          <LazyCompareDrawer
-            left={comparePair[0]}
-            right={comparePair[1]}
-            leftDisplayNumber={displayNumberForLog(comparePair[0], displayNumberByLogId)}
-            rightDisplayNumber={displayNumberForLog(comparePair[1], displayNumberByLogId)}
-            onClose={closeCompare}
-          />
-        </Suspense>
+        <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>
   );