@tonyclaw/agent-inspector 2.0.43 → 2.1.1

package/src/components/ProxyViewerContainer.tsx

@@ -1,10 +1,15 @@
 import { useState, useEffect, useCallback, useRef, useMemo, type JSX } from "react";
 import { z } from "zod";
 import { CapturedLogSchema, type CapturedLog } from "../contracts";
+import { fetchJson } from "../lib/apiClient";
 import { InspectorGroupsListResponseSchema, type InspectorGroup } from "../lib/groupContract";
 import { useStripConfig } from "../lib/useStripConfig";
 import { OnboardingBanner } from "./OnboardingBanner";
-import { ProxyViewer, type SessionMembershipEvidence } from "./ProxyViewer";
+import {
+  ProxyViewer,
+  type LogPaginationControls,
+  type SessionMembershipEvidence,
+} from "./ProxyViewer";
 import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
 
 type SSEUpdate =
@@ -28,6 +33,24 @@ const SSEUpdateSchema = z.union([
   }),
 ]);
 
+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>;
+
+type SessionPageRequest =
+  | { kind: "newest" }
+  | { kind: "oldest" }
+  | { kind: "older"; beforeLogId: number }
+  | { kind: "newer"; afterLogId: number };
+
 function buildSessionMembershipEvidence(
   groups: readonly InspectorGroup[],
   sessionId: string,
@@ -89,6 +112,7 @@ const DEBOUNCE_MS = 50;
 const HASH_SCROLL_ATTEMPTS = 12;
 const HASH_HIGHLIGHT_MS = 1800;
 const MAX_CLIENT_LOGS = 500;
+const SESSION_PAGE_LIMIT = 100;
 
 function buildLogsStreamUrl(sessionId: string | undefined): string {
   const params = new URLSearchParams();
@@ -100,6 +124,31 @@ function buildLogsStreamUrl(sessionId: string | undefined): string {
   return query.length > 0 ? `/api/logs/stream?${query}` : "/api/logs/stream";
 }
 
+function buildSessionLogsPageUrl(sessionId: string, request: SessionPageRequest): string {
+  const params = new URLSearchParams({
+    cursor: "1",
+    compact: "1",
+    limit: String(SESSION_PAGE_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 buildLogIndex(logs: readonly CapturedLog[]): Map<number, number> {
   const idx = new Map<number, number>();
   for (let i = 0; i < logs.length; i++) {
@@ -135,13 +184,15 @@ export function ProxyViewerContainer({
   const [allLogs, setAllLogs] = useState<CapturedLog[]>([]);
   const [selectedSession, setSelectedSession] = useState(initialSessionId ?? "__all__");
   const [selectedModel, setSelectedModel] = useState("__all__");
-  const [viewMode, setViewMode] = useState<"simple" | "full">("simple");
   const [error, setError] = useState<string | null>(null);
   const [streamInitialized, setStreamInitialized] = useState(initialSessionId === undefined);
+  const [logPage, setLogPage] = useState<LogCursorPage | null>(null);
+  const [sessionPageLoading, setSessionPageLoading] = useState(initialSessionId !== undefined);
   const [sessionMemberships, setSessionMemberships] = useState<SessionMembershipEvidence[]>([]);
   const eventSourceRef = useRef<EventSource | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const handledHashRef = useRef<string | null>(null);
+  const sessionPageRequestIdRef = useRef(0);
 
   // O(1) log lookup by id
   const logIndexRef = useRef<Map<number, number>>(new Map());
@@ -245,6 +296,37 @@ export function ProxyViewerContainer({
     };
   }, [initialSessionId, scheduleUpdate]);
 
+  const loadSessionPage = useCallback(
+    (request: SessionPageRequest) => {
+      if (initialSessionId === undefined) return;
+
+      const requestId = sessionPageRequestIdRef.current + 1;
+      sessionPageRequestIdRef.current = requestId;
+      setSessionPageLoading(true);
+      setError(null);
+
+      void fetchJson(buildSessionLogsPageUrl(initialSessionId, request), LogCursorPageSchema)
+        .then((page) => {
+          if (sessionPageRequestIdRef.current !== requestId) return;
+          const nextLogs = page.logs;
+          logIndexRef.current = buildLogIndex(nextLogs);
+          setAllLogs(nextLogs);
+          setLogPage(page);
+          setSelectedSession(initialSessionId);
+          setSessionPageLoading(false);
+          setError(null);
+        })
+        .catch((err: unknown) => {
+          if (sessionPageRequestIdRef.current !== requestId) return;
+          setAllLogs([]);
+          setLogPage(null);
+          setSessionPageLoading(false);
+          setError(err instanceof Error ? err.message : "Failed to load session logs");
+        });
+    },
+    [initialSessionId],
+  );
+
   useEffect(() => {
     if (initialSessionId === undefined) {
       setSessionMemberships([]);
@@ -273,6 +355,12 @@ export function ProxyViewerContainer({
   }, [initialSessionId]);
 
   useEffect(() => {
+    if (initialSessionId === undefined) return;
+    loadSessionPage({ kind: "newest" });
+  }, [initialSessionId, loadSessionPage]);
+
+  useEffect(() => {
+    if (initialSessionId !== undefined) return undefined;
     connectSSE();
     return () => {
       if (eventSourceRef.current) {
@@ -288,7 +376,7 @@ export function ProxyViewerContainer({
         flushTimerRef.current = null;
       }
     };
-  }, [connectSSE]);
+  }, [connectSSE, initialSessionId]);
 
   useEffect(() => {
     const hash = window.location.hash;
@@ -402,6 +490,49 @@ export function ProxyViewerContainer({
   // 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,
+      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,
+    sessionPageLoading,
+  ]);
 
   return (
     <>
@@ -421,10 +552,10 @@ export function ProxyViewerContainer({
         onModelChange={setSelectedModel}
         onClearAll={handleClearAll}
         onClearGroup={handleClearGroup}
-        isLoading={initialSessionId !== undefined && !streamInitialized}
+        isLoading={initialSessionId === undefined ? !streamInitialized : sessionPageLoading}
+        pagination={pagination}
         sessionMemberships={sessionMemberships}
         viewMode={viewMode}
-        onViewModeChange={setViewMode}
         captureMode={captureMode}
         strip={strip}
         slowResponseThresholdSeconds={slowResponseThresholdSeconds}

package/src/components/providers/SettingsDialog.tsx

@@ -530,7 +530,6 @@ function McpSettingsTab(): JSX.Element {
 function ProxySettingsTab(): JSX.Element {
   const {
     strip,
-    captureMode,
     slowResponseThresholdSeconds,
     providerTestTimeoutSeconds,
     timeDisplayFormat,
@@ -542,7 +541,6 @@ function ProxySettingsTab(): JSX.Element {
   } = useStripConfig();
   const [error, setError] = useState<string | null>(null);
   const [pending, setPending] = useState(false);
-  const alternateCaptureMode = captureMode === "full" ? "simple" : "full";
 
   const handleToggle = useCallback(
     async (next: boolean) => {
@@ -606,17 +604,6 @@ function ProxySettingsTab(): JSX.Element {
 
   return (
     <div className="space-y-4">
-      <div className="space-y-1">
-        <h3 className="text-sm font-semibold">Capture mode</h3>
-        <p className="text-xs text-muted-foreground">
-          This process is running in <code>{captureMode}</code> mode. Restart with{" "}
-          <code>agent-inspector --mode {alternateCaptureMode}</code> to change it.
-          {captureMode === "simple"
-            ? " Simple mode keeps replay, parsed requests, responses, timing, tools, and token usage while skipping raw headers, raw response retention, and detailed SSE chunk retention."
-            : " Full mode retains raw headers, raw responses, and SSE chunks for diagnostics; use simple mode for everyday lower-overhead capture."}
-        </p>
-      </div>
-
       <div className="space-y-1">
         <h3 className="text-sm font-semibold">Claude Code billing header</h3>
         <p className="text-xs text-muted-foreground">