@tonyclaw/agent-inspector 3.0.3 → 3.0.5

package/src/components/ProxyViewerContainer.tsx

@@ -47,6 +47,8 @@ const LogCursorPageSchema = z.object({
 
 type LogCursorPage = z.infer<typeof LogCursorPageSchema>;
 
+const SessionsResponseSchema = z.array(z.string());
+
 type SessionPageRequest =
   | { kind: "newest" }
   | { kind: "oldest" }
@@ -114,6 +116,8 @@ 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;
 
 function buildLogsStreamUrl(sessionId: string | undefined): string {
   const params = new URLSearchParams();
@@ -125,11 +129,15 @@ function buildLogsStreamUrl(sessionId: string | undefined): string {
   return query.length > 0 ? `/api/logs/stream?${query}` : "/api/logs/stream";
 }
 
-function buildSessionLogsPageUrl(sessionId: string, request: SessionPageRequest): string {
+function buildSessionLogsPageUrl(
+  sessionId: string,
+  request: SessionPageRequest,
+  limit = SESSION_PAGE_LIMIT,
+): string {
   const params = new URLSearchParams({
     cursor: "1",
     compact: "1",
-    limit: String(SESSION_PAGE_LIMIT),
+    limit: String(limit),
     sessionId,
   });
 
@@ -174,6 +182,20 @@ export function mergeLogsById(
   return [...byId.values()].sort((left, right) => left.id - right.id);
 }
 
+export function mergeSessionIds(
+  previousSessions: readonly string[],
+  incomingSessions: readonly string[],
+): string[] {
+  const sessions = new Set<string>();
+  for (const session of previousSessions) {
+    if (session !== "") sessions.add(session);
+  }
+  for (const session of incomingSessions) {
+    if (session !== "") sessions.add(session);
+  }
+  return [...sessions].sort();
+}
+
 export function ProxyViewerContainer({
   initialSessionId,
 }: {
@@ -195,6 +217,7 @@ export function ProxyViewerContainer({
   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 [streamInitialized, setStreamInitialized] = useState(initialSessionId === undefined);
   const [logPage, setLogPage] = useState<LogCursorPage | null>(null);
@@ -225,9 +248,22 @@ export function ProxyViewerContainer({
     () => filterLogs(allLogs, selectedSession, selectedModel),
     [allLogs, selectedSession, selectedModel],
   );
-  const sessions = useMemo(() => extractSessions(allLogs), [allLogs]);
+  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;
@@ -286,9 +322,14 @@ export function ProxyViewerContainer({
             logIndexRef.current = buildLogIndex(nextLogs);
             return nextLogs;
           });
+          setKnownSessions((prev) => mergeSessionIds(prev, extractSessions(update.logs)));
           setStreamInitialized(true);
           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);
         }
       } catch {
@@ -338,6 +379,64 @@ export function ProxyViewerContainer({
     [dismissToast, initialSessionId, showErrorToast],
   );
 
+  const reloadSessionLogs = useCallback(
+    (sessionId: string) => {
+      const requestId = sessionPageRequestIdRef.current + 1;
+      sessionPageRequestIdRef.current = requestId;
+      setSessionPageLoading(true);
+      dismissToast();
+
+      void (async () => {
+        const collected: CapturedLog[] = [];
+        let page = await fetchJson(
+          buildSessionLogsPageUrl(sessionId, { kind: "oldest" }, SESSION_RELOAD_PAGE_LIMIT),
+          LogCursorPageSchema,
+        );
+        collected.push(...page.logs);
+
+        let loadedPages = 1;
+        while (
+          page.hasNewer &&
+          page.newestLogId !== null &&
+          loadedPages < MAX_SESSION_RELOAD_PAGES
+        ) {
+          page = await fetchJson(
+            buildSessionLogsPageUrl(
+              sessionId,
+              { kind: "newer", afterLogId: page.newestLogId },
+              SESSION_RELOAD_PAGE_LIMIT,
+            ),
+            LogCursorPageSchema,
+          );
+          collected.push(...page.logs);
+          loadedPages += 1;
+        }
+
+        if (sessionPageRequestIdRef.current !== requestId) return;
+        setAllLogs((prev) => {
+          const next = mergeLogsById(prev, collected);
+          logIndexRef.current = buildLogIndex(next);
+          return next;
+        });
+        setKnownSessions((prev) => mergeSessionIds(prev, [sessionId]));
+        setSessionPageLoading(false);
+        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);
+        showErrorToast(err instanceof Error ? err.message : "Failed to reload session logs");
+      });
+    },
+    [dismissToast, showErrorToast, showToast],
+  );
+
   useEffect(() => {
     if (initialSessionId === undefined) {
       setSessionMemberships([]);
@@ -365,11 +464,21 @@ export function ProxyViewerContainer({
     };
   }, [initialSessionId]);
 
+  useEffect(() => {
+    refreshSessions();
+  }, [refreshSessions]);
+
   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();
@@ -443,64 +552,45 @@ export function ProxyViewerContainer({
   }, [logs.length]);
 
   const handleClearAll = useCallback(() => {
-    if (initialSessionId !== undefined && allLogs.length === 0) return;
-    void (async () => {
-      try {
-        const body =
-          initialSessionId === undefined
-            ? undefined
-            : JSON.stringify({ ids: allLogs.map((log) => log.id) });
-        const res = await fetch("/api/logs", {
-          method: "DELETE",
-          ...(body === undefined
-            ? {}
-            : {
-                headers: { "Content-Type": "application/json" },
-                body,
-              }),
-        });
-        if (!res.ok) {
-          showErrorToast("Failed to clear logs");
-          return;
-        }
-        logIndexRef.current.clear();
-        setAllLogs([]);
-        dismissToast();
-      } catch (err) {
-        showErrorToast(err instanceof Error ? err.message : "Unknown error clearing logs");
-      }
-    })();
-  }, [allLogs, dismissToast, initialSessionId, showErrorToast]);
+    const clearedSessions = extractSessions(allLogs);
+    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]);
 
   const handleClearGroup = useCallback(
     (ids: number[]) => {
       if (ids.length === 0) return;
-      void (async () => {
-        try {
-          const res = await fetch("/api/logs", {
-            method: "DELETE",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ ids }),
-          });
-          if (!res.ok) {
-            showErrorToast("Failed to clear group");
-            return;
-          }
-          const idSet = new Set(ids);
-          setAllLogs((prev) => {
-            const remaining = prev.filter((l) => !idSet.has(l.id));
-            logIndexRef.current = buildLogIndex(remaining);
-            return remaining;
-          });
-          dismissToast();
-        } catch (err) {
-          showErrorToast(err instanceof Error ? err.message : "Unknown error clearing group");
-        }
-      })();
+      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 = buildLogIndex(remaining);
+        return remaining;
+      });
+      showToast({ message: "Cleared this group from the current view.", tone: "success" });
     },
-    [dismissToast, showErrorToast],
+    [showToast],
   );
 
+  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();
@@ -588,10 +678,19 @@ export function ProxyViewerContainer({
         onSessionChange={setSelectedSession}
         onModelChange={setSelectedModel}
         onClearAll={handleClearAll}
+        onReloadSession={
+          initialSessionId !== undefined || selectedSession !== "__all__"
+            ? handleReloadSession
+            : undefined
+        }
         onClearGroup={handleClearGroup}
         onNotify={showToast}
         onImportLogs={initialSessionId === undefined ? handleImportLogs : undefined}
-        isLoading={initialSessionId === undefined ? !streamInitialized : sessionPageLoading}
+        isLoading={
+          initialSessionId === undefined
+            ? !streamInitialized || sessionPageLoading
+            : sessionPageLoading
+        }
         pagination={pagination}
         sessionMemberships={sessionMemberships}
         viewMode={viewMode}