@tonyclaw/agent-inspector 4.0.1 → 4.0.3

package/src/components/ProxyViewerContainer.tsx

@@ -1,1076 +0,0 @@
-import { useState, useEffect, useCallback, useRef, useMemo, useTransition, type JSX } from "react";
-import { z } from "zod";
-import { CapturedLogSchema, type CapturedLog } from "../contracts";
-import { fetchJson, fetchJsonWithTimeout } from "../lib/apiClient";
-import {
-  DeleteInspectorGroupsResponseSchema,
-  InspectorGroupsListResponseSchema,
-  type InspectorGroup,
-} from "../lib/groupContract";
-import { ImportLogsResponseSchema, type ImportLogsResponse } from "../lib/logImportContract";
-import { useStripConfig } from "../lib/useStripConfig";
-import { OnboardingBanner } from "./OnboardingBanner";
-import {
-  ProxyViewer,
-  type LogPaginationControls,
-  type SessionMembershipEvidence,
-} from "./ProxyViewer";
-import type { SessionLoadProgress } from "./proxy-viewer/SessionLoadProgressBar";
-import { browserPrefersReducedMotion, preferredScrollBehavior } from "./proxy-viewer/accessibility";
-import {
-  buildLogIndexById,
-  filterLogs,
-  mergeLogsIncrementally,
-  mergeLogsById,
-  mergeSessionIds,
-} from "./proxy-viewer/proxyViewerContainerLogic";
-import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
-import {
-  createInitialLiveConnectionState,
-  reduceLiveConnectionState,
-} from "./proxy-viewer/liveConnectionState";
-import { TransientToast, useTransientToast } from "./ui/transient-toast";
-import { openLogsEventSource } from "../ui/logsStreamClient";
-
-type SSEUpdate =
-  | {
-      type: "init";
-      logs: CapturedLog[];
-    }
-  | {
-      type: "update";
-      log: CapturedLog;
-    };
-
-const SSEUpdateSchema = z.union([
-  z.object({
-    type: z.literal("init"),
-    logs: z.array(CapturedLogSchema),
-  }),
-  z.object({
-    type: z.literal("update"),
-    log: CapturedLogSchema,
-  }),
-]);
-
-const LogCursorPageSchema = z.object({
-  logs: z.array(CapturedLogSchema),
-  total: z.number().int().nonnegative(),
-  limit: z.number().int().positive(),
-  hasOlder: z.boolean(),
-  hasNewer: z.boolean(),
-  oldestLogId: z.number().int().positive().nullable(),
-  newestLogId: z.number().int().positive().nullable(),
-});
-
-type LogCursorPage = z.infer<typeof LogCursorPageSchema>;
-
-const SessionsResponseSchema = z.array(z.string());
-
-const DeleteLogsResponseSchema = z.object({
-  success: z.boolean(),
-  cleared: z.number().int().nonnegative(),
-  logFilesRewritten: z.number().int().nonnegative().optional(),
-  chunkFilesDeleted: z.number().int().nonnegative(),
-  sessionArchiveLogsDeleted: z.number().int().nonnegative().optional(),
-});
-
-type GroupCleanupResult = {
-  deleted: number;
-  ok: boolean;
-};
-
-type SessionPageRequest =
-  | { kind: "newest" }
-  | { kind: "oldest" }
-  | { kind: "older"; beforeLogId: number }
-  | { kind: "newer"; afterLogId: number };
-
-function buildSessionMembershipEvidence(
-  groups: readonly InspectorGroup[],
-  sessionId: string,
-): SessionMembershipEvidence[] {
-  const memberships: SessionMembershipEvidence[] = [];
-  for (const group of groups) {
-    for (const member of group.members) {
-      if (member.sessionId !== sessionId) continue;
-      memberships.push({
-        groupId: group.id,
-        groupTitle: group.title,
-        groupKind: group.kind,
-        groupStatus: group.status,
-        groupTask: group.task,
-        groupProject: group.project,
-        groupEvidence: group.evidence,
-        member,
-      });
-    }
-  }
-  return memberships;
-}
-
-function extractSessions(logs: CapturedLog[]): string[] {
-  const set = new Set<string>();
-  for (const l of logs) {
-    if (l.sessionId !== null && l.sessionId !== "") set.add(l.sessionId);
-  }
-  return [...set];
-}
-
-function extractModels(logs: CapturedLog[]): string[] {
-  const set = new Set<string>();
-  for (const l of logs) {
-    if (l.model !== null && l.model !== "") set.add(l.model);
-  }
-  return [...set];
-}
-
-const DEBOUNCE_MS = 100;
-const HASH_SCROLL_ATTEMPTS = 12;
-const HASH_HIGHLIGHT_MS = 1800;
-const SESSION_PAGE_LIMIT = 100;
-const SESSION_RELOAD_PAGE_LIMIT = 500;
-const MAX_SESSION_RELOAD_PAGES = 200;
-const SESSION_LOGS_FETCH_TIMEOUT_MS = 20_000;
-const SESSION_MEMBERSHIP_FETCH_TIMEOUT_MS = 10_000;
-const SSE_RECONNECT_DELAY_MS = 3_000;
-const SSE_STALE_AFTER_MS = 10_000;
-const LIVE_RECENT_LOG_LIMIT = 2_000;
-
-function buildSessionLogsPageUrl(
-  sessionId: string,
-  request: SessionPageRequest,
-  limit = SESSION_PAGE_LIMIT,
-): string {
-  const params = new URLSearchParams({
-    cursor: "1",
-    compact: "1",
-    limit: String(limit),
-    sessionId,
-  });
-
-  switch (request.kind) {
-    case "oldest":
-      params.set("anchor", "oldest");
-      break;
-    case "older":
-      params.set("beforeLogId", String(request.beforeLogId));
-      break;
-    case "newer":
-      params.set("afterLogId", String(request.afterLogId));
-      break;
-    case "newest":
-      break;
-  }
-
-  return `/api/logs?${params.toString()}`;
-}
-
-function fetchSessionLogsPage(
-  sessionId: string,
-  request: SessionPageRequest,
-  limit = SESSION_PAGE_LIMIT,
-): Promise<LogCursorPage> {
-  return fetchJsonWithTimeout(
-    buildSessionLogsPageUrl(sessionId, request, limit),
-    LogCursorPageSchema,
-    SESSION_LOGS_FETCH_TIMEOUT_MS,
-  );
-}
-
-type SessionLogIdCollection = {
-  ids: number[];
-  truncated: boolean;
-};
-
-async function collectSessionLogIds(
-  sessionId: string,
-  onProgress: (logCount: number, pageCount: number) => void,
-): Promise<SessionLogIdCollection> {
-  const ids = new Set<number>();
-  let page = await fetchSessionLogsPage(sessionId, { kind: "oldest" }, SESSION_RELOAD_PAGE_LIMIT);
-  for (const log of page.logs) {
-    ids.add(log.id);
-  }
-  onProgress(ids.size, 1);
-
-  let loadedPages = 1;
-  while (page.hasNewer && page.newestLogId !== null && loadedPages < MAX_SESSION_RELOAD_PAGES) {
-    page = await fetchSessionLogsPage(
-      sessionId,
-      { kind: "newer", afterLogId: page.newestLogId },
-      SESSION_RELOAD_PAGE_LIMIT,
-    );
-    for (const log of page.logs) {
-      ids.add(log.id);
-    }
-    loadedPages += 1;
-    onProgress(ids.size, loadedPages);
-  }
-
-  return { ids: [...ids], truncated: page.hasNewer };
-}
-
-async function deleteAllGroupsForFullHistoryDelete(): Promise<GroupCleanupResult> {
-  try {
-    const result = await fetchJson("/api/groups", DeleteInspectorGroupsResponseSchema, {
-      method: "DELETE",
-    });
-    return { deleted: result.deleted, ok: true };
-  } catch {
-    return { deleted: 0, ok: false };
-  }
-}
-
-export function ProxyViewerContainer({
-  initialSessionId,
-}: {
-  /**
-   * Initial session filter. When the route is `/session/$id`, pass the URL
-   * param here so the page opens already scoped to that session. Default
-   * `__all__` keeps the existing "all sessions" behavior on `/`.
-   *
-   * NOTE: the value is only used as the initial state on mount. To pick up
-   * a new value (e.g. user navigates to a different `/session/$id`), the
-   * caller should also pass a `key` prop matching the session id, which
-   * forces a remount.
-   */
-  initialSessionId?: string;
-} = {}): JSX.Element {
-  // `allLogs` is the unfiltered set populated by the SSE. The single SSE
-  // connection never re-opens on filter change — we always carry the full
-  // set and derive the displayed view with `useMemo` below.
-  const [allLogs, setAllLogs] = useState<CapturedLog[]>([]);
-  const [selectedSession, setSelectedSession] = useState(initialSessionId ?? "__all__");
-  const [selectedModel, setSelectedModel] = useState("__all__");
-  const [knownSessions, setKnownSessions] = useState<string[]>([]);
-  const { notice, showToast, dismissToast } = useTransientToast();
-  const [liveConnection, setLiveConnection] = useState(createInitialLiveConnectionState);
-  const [logPage, setLogPage] = useState<LogCursorPage | null>(null);
-  const [sessionPageLoading, setSessionPageLoading] = useState(initialSessionId !== undefined);
-  const [sessionLoadError, setSessionLoadError] = useState<string | null>(null);
-  const [sessionLoadProgress, setSessionLoadProgress] = useState<SessionLoadProgress | undefined>(
-    undefined,
-  );
-  const [sessionMemberships, setSessionMemberships] = useState<SessionMembershipEvidence[]>([]);
-  const [, startLogTransition] = useTransition();
-  const eventSourceRef = useRef<EventSource | null>(null);
-  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const staleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const automaticRetryEnabledRef = useRef(true);
-  const handledHashRef = useRef<string | null>(null);
-  const sessionPageRequestIdRef = useRef(0);
-  const sessionLoadStartedAtRef = useRef<number | null>(null);
-  const sessionLoadTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  // O(1) log lookup by id
-  const logIndexRef = useRef<Map<number, number>>(new Map());
-
-  // Debounce buffer for SSE updates
-  const pendingUpdatesRef = useRef<CapturedLog[]>([]);
-  const flushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const logMergeOptions = useCallback(
-    () => ({
-      recentLimit: LIVE_RECENT_LOG_LIMIT,
-      retainSessionId:
-        initialSessionId ?? (selectedSession === "__all__" ? undefined : selectedSession),
-    }),
-    [initialSessionId, selectedSession],
-  );
-  const showErrorToast = useCallback(
-    (message: string) => {
-      showToast({ message, tone: "error" });
-    },
-    [showToast],
-  );
-
-  const stopSessionLoadProgress = useCallback(() => {
-    if (sessionLoadTimerRef.current !== null) {
-      clearInterval(sessionLoadTimerRef.current);
-      sessionLoadTimerRef.current = null;
-    }
-    sessionLoadStartedAtRef.current = null;
-    setSessionLoadProgress(undefined);
-  }, []);
-
-  const startSessionLoadProgress = useCallback(
-    (label: string, requestId: number, loadedLogs = 0, loadedPages = 0) => {
-      if (sessionLoadTimerRef.current !== null) {
-        clearInterval(sessionLoadTimerRef.current);
-      }
-      const startedAt = Date.now();
-      sessionLoadStartedAtRef.current = startedAt;
-      const update = (): void => {
-        if (sessionPageRequestIdRef.current !== requestId) return;
-        setSessionLoadProgress({
-          label,
-          elapsedMs: Date.now() - startedAt,
-          timeoutMs: SESSION_LOGS_FETCH_TIMEOUT_MS,
-          loadedLogs,
-          loadedPages,
-        });
-      };
-      update();
-      sessionLoadTimerRef.current = setInterval(update, 250);
-    },
-    [],
-  );
-
-  const updateSessionLoadProgress = useCallback(
-    (label: string, requestId: number, loadedLogs: number, loadedPages: number) => {
-      const startedAt = sessionLoadStartedAtRef.current;
-      if (startedAt === null || sessionPageRequestIdRef.current !== requestId) return;
-      setSessionLoadProgress({
-        label,
-        elapsedMs: Date.now() - startedAt,
-        timeoutMs: SESSION_LOGS_FETCH_TIMEOUT_MS,
-        loadedLogs,
-        loadedPages,
-      });
-    },
-    [],
-  );
-
-  // Derived view: the logs the user actually sees. Recomputed only when the
-  // underlying set or filter changes — never on every SSE message.
-  const logs = useMemo(
-    () => filterLogs(allLogs, selectedSession, selectedModel),
-    [allLogs, selectedSession, selectedModel],
-  );
-  const sessions = useMemo(
-    () => mergeSessionIds(knownSessions, extractSessions(allLogs)),
-    [allLogs, knownSessions],
-  );
-  const models = useMemo(() => extractModels(allLogs), [allLogs]);
-
-  const refreshSessions = useCallback(() => {
-    void fetchJson("/api/sessions", SessionsResponseSchema)
-      .then((sessionIds) => {
-        setKnownSessions((prev) => mergeSessionIds(prev, sessionIds));
-      })
-      .catch(() => {
-        // Session discovery is best-effort. Live SSE and session reloads still populate this list.
-      });
-  }, []);
-
-  const flushUpdates = useCallback(() => {
-    flushTimerRef.current = null;
-    const updates = pendingUpdatesRef.current;
-    pendingUpdatesRef.current = [];
-    if (updates.length === 0) return;
-
-    startLogTransition(() => {
-      setAllLogs((prev) => {
-        const merged = mergeLogsIncrementally(
-          prev,
-          logIndexRef.current,
-          updates,
-          logMergeOptions(),
-        );
-        logIndexRef.current = merged.index;
-        return merged.logs;
-      });
-    });
-  }, [logMergeOptions, startLogTransition]);
-
-  const scheduleUpdate = useCallback(
-    (log: CapturedLog) => {
-      pendingUpdatesRef.current.push(log);
-      if (flushTimerRef.current === null) {
-        flushTimerRef.current = setTimeout(flushUpdates, DEBOUNCE_MS);
-      }
-    },
-    [flushUpdates],
-  );
-
-  const connectSSE = useCallback(() => {
-    // Clean up existing connection
-    if (eventSourceRef.current) {
-      eventSourceRef.current.close();
-    }
-
-    if (reconnectTimeoutRef.current !== null) {
-      clearTimeout(reconnectTimeoutRef.current);
-      reconnectTimeoutRef.current = null;
-    }
-    setLiveConnection((state) => reduceLiveConnectionState(state, { type: "connect-requested" }));
-    const es = openLogsEventSource(initialSessionId);
-    if (es === null) {
-      setLiveConnection((state) =>
-        reduceLiveConnectionState(state, {
-          type: "recoverable-error",
-          message: "The browser runtime does not provide a valid log stream endpoint.",
-        }),
-      );
-      showErrorToast("Failed to resolve the live stream endpoint");
-      return;
-    }
-    eventSourceRef.current = es;
-
-    es.onmessage = (event: MessageEvent) => {
-      try {
-        const rawData = String(event.data);
-        const parsed: unknown = JSON.parse(rawData);
-        const updateResult = SSEUpdateSchema.safeParse(parsed);
-        if (!updateResult.success) {
-          setLiveConnection((state) =>
-            reduceLiveConnectionState(state, {
-              type: "recoverable-error",
-              message: "The live stream returned invalid data.",
-            }),
-          );
-          showErrorToast("Failed to parse SSE data");
-          return;
-        }
-        const update = updateResult.data;
-        if (update.type === "init") {
-          // Flush any pending debounce
-          if (flushTimerRef.current !== null) {
-            clearTimeout(flushTimerRef.current);
-            flushTimerRef.current = null;
-          }
-          pendingUpdatesRef.current = [];
-
-          setAllLogs((prev) => {
-            const merged = mergeLogsIncrementally(
-              prev,
-              logIndexRef.current,
-              update.logs,
-              logMergeOptions(),
-            );
-            logIndexRef.current = merged.index;
-            return merged.logs;
-          });
-          setKnownSessions((prev) => mergeSessionIds(prev, extractSessions(update.logs)));
-          if (staleTimeoutRef.current !== null) {
-            clearTimeout(staleTimeoutRef.current);
-            staleTimeoutRef.current = null;
-          }
-          setLiveConnection((state) =>
-            reduceLiveConnectionState(state, { type: "message-received", at: Date.now() }),
-          );
-          dismissToast();
-        } else if (update.type === "update") {
-          setKnownSessions((prev) => {
-            if (update.log.sessionId === null || update.log.sessionId === "") return prev;
-            return mergeSessionIds(prev, [update.log.sessionId]);
-          });
-          scheduleUpdate(update.log);
-          if (staleTimeoutRef.current !== null) {
-            clearTimeout(staleTimeoutRef.current);
-            staleTimeoutRef.current = null;
-          }
-          setLiveConnection((state) =>
-            reduceLiveConnectionState(state, { type: "message-received", at: Date.now() }),
-          );
-        }
-      } catch {
-        setLiveConnection((state) =>
-          reduceLiveConnectionState(state, {
-            type: "recoverable-error",
-            message: "The live stream returned malformed JSON.",
-          }),
-        );
-        showErrorToast("Failed to parse SSE data");
-      }
-    };
-
-    es.onerror = () => {
-      const online = navigator.onLine;
-      setLiveConnection((state) =>
-        reduceLiveConnectionState(state, {
-          type: "connection-lost",
-          online,
-          message: "The live stream disconnected.",
-        }),
-      );
-      es.close();
-      if (!online || !automaticRetryEnabledRef.current) return;
-      if (staleTimeoutRef.current === null) {
-        staleTimeoutRef.current = setTimeout(() => {
-          staleTimeoutRef.current = null;
-          setLiveConnection((state) => reduceLiveConnectionState(state, { type: "stale-timeout" }));
-        }, SSE_STALE_AFTER_MS);
-      }
-      reconnectTimeoutRef.current = setTimeout(connectSSE, SSE_RECONNECT_DELAY_MS);
-    };
-  }, [dismissToast, initialSessionId, scheduleUpdate, showErrorToast]);
-
-  const retryLiveConnection = useCallback(() => {
-    automaticRetryEnabledRef.current = true;
-    if (reconnectTimeoutRef.current !== null) {
-      clearTimeout(reconnectTimeoutRef.current);
-      reconnectTimeoutRef.current = null;
-    }
-    connectSSE();
-  }, [connectSSE]);
-
-  const stopLiveConnection = useCallback(() => {
-    automaticRetryEnabledRef.current = false;
-    eventSourceRef.current?.close();
-    eventSourceRef.current = null;
-    if (reconnectTimeoutRef.current !== null) {
-      clearTimeout(reconnectTimeoutRef.current);
-      reconnectTimeoutRef.current = null;
-    }
-    if (staleTimeoutRef.current !== null) {
-      clearTimeout(staleTimeoutRef.current);
-      staleTimeoutRef.current = null;
-    }
-    setLiveConnection((state) => reduceLiveConnectionState(state, { type: "stop-retrying" }));
-  }, []);
-
-  const loadSessionPage = useCallback(
-    (request: SessionPageRequest) => {
-      if (initialSessionId === undefined) return;
-
-      const requestId = sessionPageRequestIdRef.current + 1;
-      sessionPageRequestIdRef.current = requestId;
-      setSessionPageLoading(true);
-      setSessionLoadError(null);
-      startSessionLoadProgress("Loading session logs", requestId);
-      dismissToast();
-
-      void fetchSessionLogsPage(initialSessionId, request)
-        .then((page) => {
-          if (sessionPageRequestIdRef.current !== requestId) return;
-          const nextLogs = page.logs;
-          logIndexRef.current = buildLogIndexById(nextLogs);
-          setAllLogs(nextLogs);
-          setLogPage(page);
-          setSelectedSession(initialSessionId);
-          setSessionPageLoading(false);
-          setSessionLoadError(null);
-          stopSessionLoadProgress();
-          dismissToast();
-        })
-        .catch((err: unknown) => {
-          if (sessionPageRequestIdRef.current !== requestId) return;
-          setSessionPageLoading(false);
-          stopSessionLoadProgress();
-          const message = err instanceof Error ? err.message : "Failed to load session logs";
-          setSessionLoadError(message);
-          showErrorToast(message);
-        });
-    },
-    [
-      dismissToast,
-      initialSessionId,
-      showErrorToast,
-      startSessionLoadProgress,
-      stopSessionLoadProgress,
-    ],
-  );
-
-  const reloadSessionLogs = useCallback(
-    (sessionId: string) => {
-      const requestId = sessionPageRequestIdRef.current + 1;
-      sessionPageRequestIdRef.current = requestId;
-      setSessionPageLoading(true);
-      setSessionLoadError(null);
-      startSessionLoadProgress("Reloading full session", requestId);
-      dismissToast();
-
-      void (async () => {
-        const collected: CapturedLog[] = [];
-        let page = await fetchSessionLogsPage(
-          sessionId,
-          { kind: "oldest" },
-          SESSION_RELOAD_PAGE_LIMIT,
-        );
-        collected.push(...page.logs);
-        updateSessionLoadProgress("Reloading full session", requestId, collected.length, 1);
-
-        let loadedPages = 1;
-        while (
-          page.hasNewer &&
-          page.newestLogId !== null &&
-          loadedPages < MAX_SESSION_RELOAD_PAGES
-        ) {
-          page = await fetchSessionLogsPage(
-            sessionId,
-            { kind: "newer", afterLogId: page.newestLogId },
-            SESSION_RELOAD_PAGE_LIMIT,
-          );
-          collected.push(...page.logs);
-          loadedPages += 1;
-          updateSessionLoadProgress(
-            "Reloading full session",
-            requestId,
-            collected.length,
-            loadedPages,
-          );
-        }
-
-        if (sessionPageRequestIdRef.current !== requestId) return;
-        setAllLogs((prev) => {
-          const merged = mergeLogsIncrementally(
-            prev,
-            logIndexRef.current,
-            collected,
-            logMergeOptions(),
-          );
-          logIndexRef.current = merged.index;
-          return merged.logs;
-        });
-        setKnownSessions((prev) => mergeSessionIds(prev, [sessionId]));
-        setSessionPageLoading(false);
-        setSessionLoadError(null);
-        stopSessionLoadProgress();
-        if (page.hasNewer) {
-          showToast({
-            message: `Loaded ${String(collected.length)} logs for this session. More history is available.`,
-            tone: "success",
-          });
-        } else {
-          dismissToast();
-        }
-      })().catch((err: unknown) => {
-        if (sessionPageRequestIdRef.current !== requestId) return;
-        setSessionPageLoading(false);
-        stopSessionLoadProgress();
-        const message = err instanceof Error ? err.message : "Failed to reload session logs";
-        setSessionLoadError(message);
-        showErrorToast(message);
-      });
-    },
-    [
-      dismissToast,
-      showErrorToast,
-      showToast,
-      startSessionLoadProgress,
-      stopSessionLoadProgress,
-      updateSessionLoadProgress,
-    ],
-  );
-
-  useEffect(() => {
-    if (initialSessionId === undefined) {
-      setSessionMemberships([]);
-      return;
-    }
-
-    let cancelled = false;
-    void fetchJsonWithTimeout(
-      "/api/groups",
-      InspectorGroupsListResponseSchema,
-      SESSION_MEMBERSHIP_FETCH_TIMEOUT_MS,
-    )
-      .then((response) => response.groups)
-      .then((groups) => {
-        if (cancelled || groups === null) return;
-        setSessionMemberships(buildSessionMembershipEvidence(groups, initialSessionId));
-      })
-      .catch(() => {
-        if (!cancelled) setSessionMemberships([]);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [initialSessionId]);
-
-  useEffect(() => {
-    refreshSessions();
-  }, [refreshSessions]);
-
-  useEffect(() => {
-    return () => {
-      stopSessionLoadProgress();
-    };
-  }, [stopSessionLoadProgress]);
-
-  useEffect(() => {
-    if (initialSessionId === undefined) return;
-    loadSessionPage({ kind: "newest" });
-  }, [initialSessionId, loadSessionPage]);
-
-  useEffect(() => {
-    if (initialSessionId !== undefined) return;
-    if (selectedSession === "__all__") return;
-    reloadSessionLogs(selectedSession);
-  }, [initialSessionId, reloadSessionLogs, selectedSession]);
-
-  useEffect(() => {
-    if (initialSessionId !== undefined) return undefined;
-    connectSSE();
-    const handleOffline = (): void => {
-      eventSourceRef.current?.close();
-      eventSourceRef.current = null;
-      if (reconnectTimeoutRef.current !== null) {
-        clearTimeout(reconnectTimeoutRef.current);
-        reconnectTimeoutRef.current = null;
-      }
-      if (staleTimeoutRef.current !== null) {
-        clearTimeout(staleTimeoutRef.current);
-        staleTimeoutRef.current = null;
-      }
-      setLiveConnection((state) => reduceLiveConnectionState(state, { type: "browser-offline" }));
-    };
-    const handleOnline = (): void => {
-      if (!automaticRetryEnabledRef.current) return;
-      connectSSE();
-    };
-    window.addEventListener("offline", handleOffline);
-    window.addEventListener("online", handleOnline);
-    return () => {
-      window.removeEventListener("offline", handleOffline);
-      window.removeEventListener("online", handleOnline);
-      if (eventSourceRef.current) {
-        eventSourceRef.current.close();
-        eventSourceRef.current = null;
-      }
-      if (reconnectTimeoutRef.current !== null) {
-        clearTimeout(reconnectTimeoutRef.current);
-        reconnectTimeoutRef.current = null;
-      }
-      if (staleTimeoutRef.current !== null) {
-        clearTimeout(staleTimeoutRef.current);
-        staleTimeoutRef.current = null;
-      }
-      if (flushTimerRef.current !== null) {
-        clearTimeout(flushTimerRef.current);
-        flushTimerRef.current = null;
-      }
-    };
-  }, [connectSSE, initialSessionId]);
-
-  useEffect(() => {
-    const hash = window.location.hash;
-    if (!hash.startsWith("#log-")) return;
-    if (handledHashRef.current === hash) return;
-    const targetId = hash.slice(1);
-    const logId = Number(targetId.replace(/^log-/, ""));
-    if (Number.isInteger(logId) && logId > 0) {
-      dispatchLogFocusRequest({ logId, tab: "request" });
-    }
-    let cancelled = false;
-    let attempts = 0;
-    let highlightedTarget: HTMLElement | null = null;
-    let highlightTimer: number | null = null;
-
-    const tryScrollToLog = (): void => {
-      if (cancelled) return;
-      const target = document.getElementById(targetId);
-      if (target !== null) {
-        handledHashRef.current = hash;
-        target.scrollIntoView({
-          block: "center",
-          behavior: preferredScrollBehavior(browserPrefersReducedMotion()),
-        });
-        if (target instanceof HTMLElement) {
-          highlightedTarget = target;
-          target.setAttribute("data-deep-link-highlight", "true");
-          highlightTimer = window.setTimeout(() => {
-            target.removeAttribute("data-deep-link-highlight");
-          }, HASH_HIGHLIGHT_MS);
-          target.focus({ preventScroll: true });
-          if (target.getAttribute("data-nav-action") === "expand") {
-            target.click();
-          }
-        }
-        return;
-      }
-
-      attempts += 1;
-      if (attempts < HASH_SCROLL_ATTEMPTS) {
-        window.setTimeout(tryScrollToLog, 100);
-      }
-    };
-
-    tryScrollToLog();
-
-    return () => {
-      cancelled = true;
-      if (highlightTimer !== null) {
-        window.clearTimeout(highlightTimer);
-      }
-      if (highlightedTarget !== null) {
-        highlightedTarget.removeAttribute("data-deep-link-highlight");
-      }
-    };
-  }, [logs.length]);
-
-  const handleClearAll = useCallback(() => {
-    const clearedSessions = extractSessions(allLogs);
-    stopSessionLoadProgress();
-    setSessionPageLoading(false);
-    logIndexRef.current.clear();
-    setAllLogs([]);
-    setLogPage(null);
-    setKnownSessions((prev) => mergeSessionIds(prev, clearedSessions));
-    showToast({
-      message: "Cleared the current view. Stored logs are still reloadable.",
-      tone: "success",
-    });
-  }, [allLogs, showToast, stopSessionLoadProgress]);
-
-  const handleClearGroup = useCallback(
-    (ids: number[]) => {
-      if (ids.length === 0) return;
-      const idSet = new Set(ids);
-      setAllLogs((prev) => {
-        const removed = prev.filter((log) => idSet.has(log.id));
-        const remaining = prev.filter((log) => !idSet.has(log.id));
-        setKnownSessions((known) => mergeSessionIds(known, extractSessions(removed)));
-        logIndexRef.current = buildLogIndexById(remaining);
-        return remaining;
-      });
-      showToast({ message: "Cleared this group from the current view.", tone: "success" });
-    },
-    [showToast],
-  );
-
-  const handleDeleteCurrentView = useCallback(async (): Promise<void> => {
-    const deleteRequestId = sessionPageRequestIdRef.current + 1;
-    sessionPageRequestIdRef.current = deleteRequestId;
-    setSessionPageLoading(true);
-    stopSessionLoadProgress();
-    dismissToast();
-
-    try {
-      if (selectedSession === "__all__") {
-        startSessionLoadProgress("Deleting stored history", deleteRequestId);
-        const result = await fetchJson("/api/logs", DeleteLogsResponseSchema, {
-          method: "DELETE",
-        });
-        const groupCleanup = await deleteAllGroupsForFullHistoryDelete();
-        if (sessionPageRequestIdRef.current !== deleteRequestId) return;
-        setAllLogs([]);
-        logIndexRef.current.clear();
-        setLogPage(null);
-        setKnownSessions([]);
-        setSessionMemberships([]);
-        setSessionPageLoading(false);
-        stopSessionLoadProgress();
-        const groupMessage = groupCleanup.ok
-          ? ` Cleared ${groupCleanup.deleted.toString()} group${
-              groupCleanup.deleted === 1 ? "" : "s"
-            }.`
-          : " Group cleanup failed; open Groups to retry Clear.";
-        showToast({
-          message: `Deleted ${result.cleared.toString()} stored log${
-            result.cleared === 1 ? "" : "s"
-          } across all sessions.${groupMessage}`,
-          tone: groupCleanup.ok ? "success" : "error",
-        });
-        return;
-      }
-
-      const sessionId = selectedSession;
-      startSessionLoadProgress("Deleting session history", deleteRequestId);
-      const collected = await collectSessionLogIds(sessionId, (logCount, pageCount) => {
-        updateSessionLoadProgress("Deleting session history", deleteRequestId, logCount, pageCount);
-      });
-      const idSet = new Set(collected.ids);
-      for (const log of allLogs) {
-        if (log.sessionId === sessionId) {
-          idSet.add(log.id);
-        }
-      }
-      const persistedIds = [...idSet].filter((id) => Number.isInteger(id) && id >= 0);
-      if (persistedIds.length === 0) {
-        if (sessionPageRequestIdRef.current !== deleteRequestId) return;
-        setAllLogs((prev) => {
-          const remaining = prev.filter((log) => log.sessionId !== sessionId);
-          logIndexRef.current = buildLogIndexById(remaining);
-          return remaining;
-        });
-        setLogPage((prev) =>
-          prev === null
-            ? null
-            : {
-                ...prev,
-                logs: prev.logs.filter((log) => log.sessionId !== sessionId),
-              },
-        );
-        setKnownSessions((prev) => prev.filter((session) => session !== sessionId));
-        setSessionPageLoading(false);
-        stopSessionLoadProgress();
-        showToast({
-          message: "No stored log records were found for this session.",
-          tone: "success",
-        });
-        return;
-      }
-
-      const result = await fetchJson("/api/logs", DeleteLogsResponseSchema, {
-        method: "DELETE",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ ids: persistedIds }),
-      });
-
-      if (sessionPageRequestIdRef.current !== deleteRequestId) return;
-      setAllLogs((prev) => {
-        const remaining = prev.filter((log) => log.sessionId !== sessionId);
-        logIndexRef.current = buildLogIndexById(remaining);
-        return remaining;
-      });
-      setLogPage((prev) =>
-        prev === null
-          ? null
-          : {
-              ...prev,
-              logs: prev.logs.filter((log) => log.sessionId !== sessionId),
-            },
-      );
-      setKnownSessions((prev) => prev.filter((session) => session !== sessionId));
-      setSessionPageLoading(false);
-      stopSessionLoadProgress();
-      showToast({
-        message: `Deleted ${result.cleared.toString()} stored log${
-          result.cleared === 1 ? "" : "s"
-        } for this session${collected.truncated ? ". More history may remain." : "."}`,
-        tone: collected.truncated ? "error" : "success",
-      });
-    } finally {
-      if (sessionPageRequestIdRef.current === deleteRequestId) {
-        setSessionPageLoading(false);
-        stopSessionLoadProgress();
-      }
-    }
-  }, [
-    allLogs,
-    dismissToast,
-    selectedSession,
-    showToast,
-    startSessionLoadProgress,
-    stopSessionLoadProgress,
-    updateSessionLoadProgress,
-  ]);
-
-  const handleReloadSession = useCallback(() => {
-    if (initialSessionId !== undefined) {
-      loadSessionPage({ kind: "newest" });
-      return;
-    }
-    if (selectedSession === "__all__") {
-      refreshSessions();
-      return;
-    }
-    reloadSessionLogs(selectedSession);
-  }, [initialSessionId, loadSessionPage, refreshSessions, reloadSessionLogs, selectedSession]);
-
-  const handleImportLogs = useCallback(
-    async (file: File): Promise<ImportLogsResponse> => {
-      const formData = new FormData();
-      formData.set("file", file);
-      const result = await fetchJson("/api/logs/import", ImportLogsResponseSchema, {
-        method: "POST",
-        body: formData,
-      });
-
-      setAllLogs((prev) => {
-        const importedIds = new Set(result.logs.map((log) => log.id));
-        const next = mergeLogsById(
-          prev.filter((log) => !importedIds.has(log.id)),
-          result.logs,
-        );
-        logIndexRef.current = buildLogIndexById(next);
-        return next;
-      });
-      setSelectedSession(result.sessionId);
-      setSelectedModel("__all__");
-      setLogPage(null);
-      dismissToast();
-      return result;
-    },
-    [dismissToast],
-  );
-
-  // Read the strip config once at the container so the virtualized list does
-  // not need N independent SWR subscriptions per row.
-  const { strip, captureMode, slowResponseThresholdSeconds, timeDisplayFormat } = useStripConfig();
-  const viewMode = captureMode;
-  const loadOldestPage = useCallback(() => {
-    loadSessionPage({ kind: "oldest" });
-  }, [loadSessionPage]);
-  const loadNewestPage = useCallback(() => {
-    loadSessionPage({ kind: "newest" });
-  }, [loadSessionPage]);
-  const loadOlderPage = useCallback(() => {
-    const firstLog = allLogs[0];
-    const beforeLogId = logPage?.oldestLogId ?? firstLog?.id ?? null;
-    if (beforeLogId === null) return;
-    loadSessionPage({ kind: "older", beforeLogId });
-  }, [allLogs, loadSessionPage, logPage]);
-  const loadNewerPage = useCallback(() => {
-    const lastLog = allLogs[allLogs.length - 1];
-    const afterLogId = logPage?.newestLogId ?? lastLog?.id ?? null;
-    if (afterLogId === null) return;
-    loadSessionPage({ kind: "newer", afterLogId });
-  }, [allLogs, loadSessionPage, logPage]);
-  const pagination = useMemo<LogPaginationControls | undefined>(() => {
-    if (initialSessionId === undefined) return undefined;
-    return {
-      isLoading: sessionPageLoading,
-      loadProgress: sessionLoadProgress,
-      total: logPage?.total ?? null,
-      pageSize: logPage?.limit ?? SESSION_PAGE_LIMIT,
-      hasOlder: logPage?.hasOlder ?? false,
-      hasNewer: logPage?.hasNewer ?? false,
-      oldestLogId: logPage?.oldestLogId ?? null,
-      newestLogId: logPage?.newestLogId ?? null,
-      onOldest: loadOldestPage,
-      onOlder: loadOlderPage,
-      onNewer: loadNewerPage,
-      onNewest: loadNewestPage,
-    };
-  }, [
-    initialSessionId,
-    loadNewestPage,
-    loadNewerPage,
-    loadOlderPage,
-    loadOldestPage,
-    logPage,
-    sessionLoadProgress,
-    sessionPageLoading,
-  ]);
-
-  return (
-    <>
-      <TransientToast notice={notice} onDismiss={dismissToast} />
-      <OnboardingBanner />
-      <ProxyViewer
-        logs={logs}
-        sessions={sessions}
-        models={models}
-        selectedSession={selectedSession}
-        selectedModel={selectedModel}
-        onSessionChange={setSelectedSession}
-        onModelChange={setSelectedModel}
-        onClearAll={handleClearAll}
-        onDeleteCurrentView={handleDeleteCurrentView}
-        onReloadSession={
-          initialSessionId !== undefined || selectedSession !== "__all__"
-            ? handleReloadSession
-            : undefined
-        }
-        onClearGroup={handleClearGroup}
-        onNotify={showToast}
-        onImportLogs={initialSessionId === undefined ? handleImportLogs : undefined}
-        isLoading={
-          initialSessionId === undefined
-            ? (liveConnection.status === "connecting" && liveConnection.lastSuccessAt === null) ||
-              sessionPageLoading
-            : sessionPageLoading
-        }
-        liveConnection={initialSessionId === undefined ? liveConnection : undefined}
-        onRetryLiveConnection={retryLiveConnection}
-        onStopLiveConnection={stopLiveConnection}
-        pagination={pagination}
-        sessionLoadProgress={sessionLoadProgress}
-        sessionLoadError={sessionLoadError ?? undefined}
-        sessionMemberships={sessionMemberships}
-        viewMode={viewMode}
-        captureMode={captureMode}
-        strip={strip}
-        slowResponseThresholdSeconds={slowResponseThresholdSeconds}
-        timeDisplayFormat={timeDisplayFormat}
-        // Session filter is the URL's job when `initialSessionId` was given.
-        hideSessionFilter={initialSessionId !== undefined}
-        pinnedSessionId={initialSessionId}
-      />
-    </>
-  );
-}