@tonyclaw/agent-inspector 3.0.7 → 3.0.9

package/src/components/ProxyViewerContainer.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useRef, useMemo, useTransition, type JSX } from "react";
 import { z } from "zod";
 import { CapturedLogSchema, type CapturedLog } from "../contracts";
-import { fetchJson } from "../lib/apiClient";
+import { fetchJson, fetchJsonWithTimeout } from "../lib/apiClient";
 import { InspectorGroupsListResponseSchema, type InspectorGroup } from "../lib/groupContract";
 import { ImportLogsResponseSchema, type ImportLogsResponse } from "../lib/logImportContract";
 import { useStripConfig } from "../lib/useStripConfig";
@@ -9,6 +9,7 @@ import { OnboardingBanner } from "./OnboardingBanner";
 import {
   ProxyViewer,
   type LogPaginationControls,
+  type SessionLoadProgress,
   type SessionMembershipEvidence,
 } from "./ProxyViewer";
 import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
@@ -49,6 +50,14 @@ 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 SessionPageRequest =
   | { kind: "newest" }
   | { kind: "oldest" }
@@ -118,6 +127,8 @@ 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;
 
 function buildLogsStreamUrl(sessionId: string | undefined): string {
   const params = new URLSearchParams();
@@ -167,6 +178,18 @@ function buildLogIndex(logs: readonly CapturedLog[]): Map<number, number> {
   return idx;
 }
 
+function fetchSessionLogsPage(
+  sessionId: string,
+  request: SessionPageRequest,
+  limit = SESSION_PAGE_LIMIT,
+): Promise<LogCursorPage> {
+  return fetchJsonWithTimeout(
+    buildSessionLogsPageUrl(sessionId, request, limit),
+    LogCursorPageSchema,
+    SESSION_LOGS_FETCH_TIMEOUT_MS,
+  );
+}
+
 export function mergeLogsById(
   previousLogs: readonly CapturedLog[],
   incomingLogs: readonly CapturedLog[],
@@ -222,12 +245,17 @@ export function ProxyViewerContainer({
   const [streamInitialized, setStreamInitialized] = useState(initialSessionId === undefined);
   const [logPage, setLogPage] = useState<LogCursorPage | null>(null);
   const [sessionPageLoading, setSessionPageLoading] = useState(initialSessionId !== undefined);
+  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 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());
@@ -242,6 +270,53 @@ export function ProxyViewerContainer({
     [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(
@@ -355,9 +430,10 @@ export function ProxyViewerContainer({
       const requestId = sessionPageRequestIdRef.current + 1;
       sessionPageRequestIdRef.current = requestId;
       setSessionPageLoading(true);
+      startSessionLoadProgress("Loading session logs", requestId);
       dismissToast();
 
-      void fetchJson(buildSessionLogsPageUrl(initialSessionId, request), LogCursorPageSchema)
+      void fetchSessionLogsPage(initialSessionId, request)
         .then((page) => {
           if (sessionPageRequestIdRef.current !== requestId) return;
           const nextLogs = page.logs;
@@ -366,6 +442,7 @@ export function ProxyViewerContainer({
           setLogPage(page);
           setSelectedSession(initialSessionId);
           setSessionPageLoading(false);
+          stopSessionLoadProgress();
           dismissToast();
         })
         .catch((err: unknown) => {
@@ -373,10 +450,17 @@ export function ProxyViewerContainer({
           setAllLogs([]);
           setLogPage(null);
           setSessionPageLoading(false);
+          stopSessionLoadProgress();
           showErrorToast(err instanceof Error ? err.message : "Failed to load session logs");
         });
     },
-    [dismissToast, initialSessionId, showErrorToast],
+    [
+      dismissToast,
+      initialSessionId,
+      showErrorToast,
+      startSessionLoadProgress,
+      stopSessionLoadProgress,
+    ],
   );
 
   const reloadSessionLogs = useCallback(
@@ -384,15 +468,18 @@ export function ProxyViewerContainer({
       const requestId = sessionPageRequestIdRef.current + 1;
       sessionPageRequestIdRef.current = requestId;
       setSessionPageLoading(true);
+      startSessionLoadProgress("Reloading full session", requestId);
       dismissToast();
 
       void (async () => {
         const collected: CapturedLog[] = [];
-        let page = await fetchJson(
-          buildSessionLogsPageUrl(sessionId, { kind: "oldest" }, SESSION_RELOAD_PAGE_LIMIT),
-          LogCursorPageSchema,
+        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 (
@@ -400,16 +487,19 @@ export function ProxyViewerContainer({
           page.newestLogId !== null &&
           loadedPages < MAX_SESSION_RELOAD_PAGES
         ) {
-          page = await fetchJson(
-            buildSessionLogsPageUrl(
-              sessionId,
-              { kind: "newer", afterLogId: page.newestLogId },
-              SESSION_RELOAD_PAGE_LIMIT,
-            ),
-            LogCursorPageSchema,
+          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;
@@ -420,6 +510,7 @@ export function ProxyViewerContainer({
         });
         setKnownSessions((prev) => mergeSessionIds(prev, [sessionId]));
         setSessionPageLoading(false);
+        stopSessionLoadProgress();
         if (page.hasNewer) {
           showToast({
             message: `Loaded ${String(collected.length)} logs for this session. More history is available.`,
@@ -431,10 +522,18 @@ export function ProxyViewerContainer({
       })().catch((err: unknown) => {
         if (sessionPageRequestIdRef.current !== requestId) return;
         setSessionPageLoading(false);
+        stopSessionLoadProgress();
         showErrorToast(err instanceof Error ? err.message : "Failed to reload session logs");
       });
     },
-    [dismissToast, showErrorToast, showToast],
+    [
+      dismissToast,
+      showErrorToast,
+      showToast,
+      startSessionLoadProgress,
+      stopSessionLoadProgress,
+      updateSessionLoadProgress,
+    ],
   );
 
   useEffect(() => {
@@ -444,13 +543,12 @@ export function ProxyViewerContainer({
     }
 
     let cancelled = false;
-    void fetch("/api/groups")
-      .then(async (response) => {
-        if (!response.ok) return null;
-        const raw: unknown = await response.json();
-        const parsed = InspectorGroupsListResponseSchema.safeParse(raw);
-        return parsed.success ? parsed.data.groups : null;
-      })
+    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));
@@ -468,6 +566,12 @@ export function ProxyViewerContainer({
     refreshSessions();
   }, [refreshSessions]);
 
+  useEffect(() => {
+    return () => {
+      stopSessionLoadProgress();
+    };
+  }, [stopSessionLoadProgress]);
+
   useEffect(() => {
     if (initialSessionId === undefined) return;
     loadSessionPage({ kind: "newest" });
@@ -553,6 +657,8 @@ export function ProxyViewerContainer({
 
   const handleClearAll = useCallback(() => {
     const clearedSessions = extractSessions(allLogs);
+    stopSessionLoadProgress();
+    setSessionPageLoading(false);
     logIndexRef.current.clear();
     setAllLogs([]);
     setLogPage(null);
@@ -561,7 +667,7 @@ export function ProxyViewerContainer({
       message: "Cleared the current view. Stored logs are still reloadable.",
       tone: "success",
     });
-  }, [allLogs, showToast]);
+  }, [allLogs, showToast, stopSessionLoadProgress]);
 
   const handleClearGroup = useCallback(
     (ids: number[]) => {
@@ -579,6 +685,41 @@ export function ProxyViewerContainer({
     [showToast],
   );
 
+  const handleDeleteCurrentView = useCallback(
+    async (ids: number[]): Promise<void> => {
+      if (ids.length === 0) return;
+      const idSet = new Set(ids);
+      const removed = allLogs.filter((log) => idSet.has(log.id));
+      const result = await fetchJson("/api/logs", DeleteLogsResponseSchema, {
+        method: "DELETE",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ ids }),
+      });
+
+      setAllLogs((prev) => {
+        const remaining = prev.filter((log) => !idSet.has(log.id));
+        logIndexRef.current = buildLogIndex(remaining);
+        return remaining;
+      });
+      setLogPage((prev) =>
+        prev === null
+          ? null
+          : {
+              ...prev,
+              logs: prev.logs.filter((log) => !idSet.has(log.id)),
+            },
+      );
+      setKnownSessions((prev) => mergeSessionIds(prev, extractSessions(removed)));
+      showToast({
+        message: `Deleted ${result.cleared.toString()} stored log${
+          result.cleared === 1 ? "" : "s"
+        } from the current view.`,
+        tone: "success",
+      });
+    },
+    [allLogs, showToast],
+  );
+
   const handleReloadSession = useCallback(() => {
     if (initialSessionId !== undefined) {
       loadSessionPage({ kind: "newest" });
@@ -644,6 +785,7 @@ export function ProxyViewerContainer({
     if (initialSessionId === undefined) return undefined;
     return {
       isLoading: sessionPageLoading,
+      loadProgress: sessionLoadProgress,
       total: logPage?.total ?? null,
       pageSize: logPage?.limit ?? SESSION_PAGE_LIMIT,
       hasOlder: logPage?.hasOlder ?? false,
@@ -662,6 +804,7 @@ export function ProxyViewerContainer({
     loadOlderPage,
     loadOldestPage,
     logPage,
+    sessionLoadProgress,
     sessionPageLoading,
   ]);
 
@@ -678,6 +821,7 @@ export function ProxyViewerContainer({
         onSessionChange={setSelectedSession}
         onModelChange={setSelectedModel}
         onClearAll={handleClearAll}
+        onDeleteCurrentView={handleDeleteCurrentView}
         onReloadSession={
           initialSessionId !== undefined || selectedSession !== "__all__"
             ? handleReloadSession
@@ -692,6 +836,7 @@ export function ProxyViewerContainer({
             : sessionPageLoading
         }
         pagination={pagination}
+        sessionLoadProgress={sessionLoadProgress}
         sessionMemberships={sessionMemberships}
         viewMode={viewMode}
         captureMode={captureMode}

package/src/components/clients/ClientLogo.tsx

@@ -4,8 +4,15 @@ import ClaudeCodeLogoSvg from "../../assets/IDE/claudecode-color.svg";
 import CodexLogoSvg from "../../assets/IDE/codex-color.svg";
 import OpenCodeLogoSvg from "../../assets/IDE/opencode.svg";
 import MiMoCodeLogoSvg from "../../assets/IDE/xiaomimimo.svg";
+import AgentInspectorLogo from "../../assets/agent-inspector.ico";
 
-export type ClientApp = "codex" | "opencode" | "mimo-code" | "claude-code" | "unknown";
+export type ClientApp =
+  | "agent-inspector"
+  | "codex"
+  | "opencode"
+  | "mimo-code"
+  | "claude-code"
+  | "unknown";
 
 export type ClientAppDetectionInput = {
   userAgent?: string | null;
@@ -14,6 +21,7 @@ export type ClientAppDetectionInput = {
 };
 
 const CLIENT_LABELS: Record<Exclude<ClientApp, "unknown">, string> = {
+  "agent-inspector": "Inspector",
   codex: "Codex",
   opencode: "OpenCode",
   "mimo-code": "MiMo Code",
@@ -38,6 +46,9 @@ export function detectClientApp(input: ClientAppDetectionInput): ClientApp {
     normalize(input.clientProjectFolder),
   ].join(" ");
 
+  if (matchesAny(haystack, ["agent-inspector", "agent inspector", "provider-test"])) {
+    return "agent-inspector";
+  }
   if (matchesAny(haystack, ["mimocode", "mimo-code", "mimo code"])) return "mimo-code";
   if (matchesAny(haystack, ["opencode", "open-code", "open code"])) return "opencode";
   if (matchesAny(haystack, ["claude-code", "claude code", "claudecode"])) return "claude-code";
@@ -50,6 +61,7 @@ export function detectClientApp(input: ClientAppDetectionInput): ClientApp {
 
 export function clientAppLabel(client: ClientApp): string | null {
   switch (client) {
+    case "agent-inspector":
     case "codex":
     case "opencode":
     case "mimo-code":
@@ -61,12 +73,29 @@ export function clientAppLabel(client: ClientApp): string | null {
 }
 
 const CLIENT_LOGOS: Record<Exclude<ClientApp, "unknown">, string> = {
+  "agent-inspector": AgentInspectorLogo,
   codex: CodexLogoSvg,
   opencode: OpenCodeLogoSvg,
   "mimo-code": MiMoCodeLogoSvg,
   "claude-code": ClaudeCodeLogoSvg,
 };
 
+const CLIENT_LOGO_FRAMES: Record<Exclude<ClientApp, "unknown">, string> = {
+  "agent-inspector": "border-orange-200/25 bg-orange-300/[0.12]",
+  codex: "border-cyan-200/20 bg-cyan-300/[0.08]",
+  opencode: "border-sky-200/25 bg-sky-300/[0.12]",
+  "mimo-code": "border-orange-200/25 bg-orange-400/[0.12]",
+  "claude-code": "border-amber-100/20 bg-amber-300/[0.09]",
+};
+
+const CLIENT_LOGO_IMAGES: Record<Exclude<ClientApp, "unknown">, string> = {
+  "agent-inspector": "p-0.5 drop-shadow-[0_0_8px_rgba(251,146,60,0.35)]",
+  codex: "p-0.5",
+  opencode: "p-1 drop-shadow-[0_0_8px_rgba(125,211,252,0.35)]",
+  "mimo-code": "p-0.5 drop-shadow-[0_0_8px_rgba(255,105,0,0.35)]",
+  "claude-code": "p-0.5",
+};
+
 export function ClientLogo({
   client,
   className,
@@ -82,13 +111,19 @@ export function ClientLogo({
   return (
     <span
       className={cn(
-        "border border-border bg-muted/40 inline-flex size-6 shrink-0 items-center justify-center rounded-md p-0.5",
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-md border p-0 shadow-sm",
+        CLIENT_LOGO_FRAMES[client],
         className,
       )}
       aria-label={label}
       title={label}
     >
-      <img src={logoSrc} alt="" className="size-full object-contain" aria-hidden="true" />
+      <img
+        src={logoSrc}
+        alt=""
+        className={cn("size-full object-contain", CLIENT_LOGO_IMAGES[client])}
+        aria-hidden="true"
+      />
     </span>
   );
 }