@tonyclaw/agent-inspector 3.0.2 → 3.0.4

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}

package/src/components/clients/ClientLogo.tsx

@@ -1,5 +1,9 @@
 import type { JSX } from "react";
 import { cn } from "../../lib/utils";
+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";
 
 export type ClientApp = "codex" | "opencode" | "mimo-code" | "claude-code" | "unknown";
 
@@ -56,53 +60,12 @@ export function clientAppLabel(client: ClientApp): string | null {
   }
 }
 
-function CodexMark(): JSX.Element {
-  return (
-    <svg viewBox="0 0 24 24" className="size-full" aria-hidden="true">
-      <circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" strokeWidth="2.2" />
-      <path
-        d="M14.8 8.6a4.8 4.8 0 1 0 0 6.8"
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeWidth="2.2"
-      />
-    </svg>
-  );
-}
-
-function OpenCodeMark(): JSX.Element {
-  return (
-    <svg viewBox="0 0 24 24" className="size-full" aria-hidden="true">
-      <path d="M7 4h10v16H7z" fill="none" stroke="currentColor" strokeWidth="2.2" />
-      <path d="M10 8h4M10 12h4M10 16h2" stroke="currentColor" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-function MiMoCodeMark(): JSX.Element {
-  return (
-    <svg viewBox="0 0 24 24" className="size-full" aria-hidden="true">
-      <path
-        d="M5 18V6h3.2l3.8 6.1L15.8 6H19v12h-3V11.3l-3.1 5h-1.8L8 11.3V18z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
-function ClaudeCodeMark(): JSX.Element {
-  return (
-    <svg viewBox="0 0 24 24" className="size-full" aria-hidden="true">
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M21 10.95h3v3.1h-3v3.03h-1.49V20H18v-2.92h-1.49V20H15v-2.92H9V20H7.49v-2.92H6V20H4.49v-2.92H3v-3.03H0v-3.1h3V5h18v5.95zM6 10.95h1.49V8.1H6v2.85zm10.51 0H18V8.1h-1.49v2.85z"
-      />
-    </svg>
-  );
-}
+const CLIENT_LOGOS: Record<Exclude<ClientApp, "unknown">, string> = {
+  codex: CodexLogoSvg,
+  opencode: OpenCodeLogoSvg,
+  "mimo-code": MiMoCodeLogoSvg,
+  "claude-code": ClaudeCodeLogoSvg,
+};
 
 export function ClientLogo({
   client,
@@ -111,22 +74,21 @@ export function ClientLogo({
   client: ClientApp;
   className?: string;
 }): JSX.Element | null {
+  if (client === "unknown") return null;
   const label = clientAppLabel(client);
   if (label === null) return null;
+  const logoSrc = CLIENT_LOGOS[client];
 
   return (
     <span
       className={cn(
-        "border border-border bg-muted/40 inline-flex size-6 shrink-0 items-center justify-center rounded-md p-1 text-cyan-100",
+        "border border-border bg-muted/40 inline-flex size-6 shrink-0 items-center justify-center rounded-md p-0.5",
         className,
       )}
       aria-label={label}
       title={label}
     >
-      {client === "codex" && <CodexMark />}
-      {client === "opencode" && <OpenCodeMark />}
-      {client === "mimo-code" && <MiMoCodeMark />}
-      {client === "claude-code" && <ClaudeCodeMark />}
+      <img src={logoSrc} alt="" className="size-full object-contain" aria-hidden="true" />
     </span>
   );
 }

package/src/components/providers/ProviderCard.tsx

@@ -275,6 +275,50 @@ function ProviderEndpointSummary({
   );
 }
 
+function providerHasEndpoint(value: string | undefined): value is string {
+  return value !== undefined && value !== "";
+}
+
+function providerTestTargets(provider: ProviderConfig): string[] {
+  const targets: string[] = [];
+  if (providerHasEndpoint(provider.anthropicBaseUrl)) {
+    targets.push("Anthropic");
+  }
+  if (providerHasEndpoint(provider.openaiBaseUrl)) {
+    targets.push("Chat");
+  }
+  if (providerHasEndpoint(provider.openaiResponsesBaseUrl)) {
+    targets.push("Responses");
+  }
+  return targets;
+}
+
+function ProviderTestCoverage({ provider }: { provider: ProviderConfig }): JSX.Element {
+  const targets = providerTestTargets(provider);
+  if (targets.length === 0) {
+    return (
+      <div className="text-xs text-muted-foreground">
+        Test requires at least one configured endpoint.
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-w-0 flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+      <span>Test covers</span>
+      {targets.map((target) => (
+        <span
+          key={target}
+          className="rounded border border-border/70 bg-muted/25 px-1.5 py-0.5 text-foreground/80"
+        >
+          {target}
+        </span>
+      ))}
+      <span>non-stream + stream</span>
+    </div>
+  );
+}
+
 function getErrorIcon(type: ErrorType): JSX.Element {
   const iconProps = { className: "size-3", strokeWidth: 2 };
   switch (type) {
@@ -660,9 +704,9 @@ export function ProviderCard({
         </button>
       </div>
 
-      {provider.anthropicBaseUrl !== undefined && provider.anthropicBaseUrl !== "" && (
+      {providerHasEndpoint(provider.anthropicBaseUrl) && (
         <ProviderEndpointSummary
-          label="Anthropic"
+          label="Test: Anthropic"
           baseUrl={provider.anthropicBaseUrl}
           endpoint={PATH_V1_MESSAGES}
           providerName={provider.name}
@@ -673,9 +717,9 @@ export function ProviderCard({
         </ProviderEndpointSummary>
       )}
 
-      {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
+      {providerHasEndpoint(provider.openaiBaseUrl) && (
         <ProviderEndpointSummary
-          label="OpenAI Chat"
+          label="Test: Chat"
           baseUrl={provider.openaiBaseUrl}
           endpoint={PATH_V1_CHAT_COMPLETIONS}
           providerName={provider.name}
@@ -686,9 +730,9 @@ export function ProviderCard({
         </ProviderEndpointSummary>
       )}
 
-      {provider.openaiResponsesBaseUrl !== undefined && provider.openaiResponsesBaseUrl !== "" && (
+      {providerHasEndpoint(provider.openaiResponsesBaseUrl) && (
         <ProviderEndpointSummary
-          label="OpenAI Responses"
+          label="Test: Responses"
           baseUrl={provider.openaiResponsesBaseUrl}
           endpoint={PATH_V1_RESPONSES}
           providerName={provider.name}
@@ -774,43 +818,46 @@ export function ProviderCard({
         </div>
       )}
 
-      <div className="flex gap-2 pt-1 border-t">
-        {onTest !== undefined && (
+      <div className="flex flex-col gap-2 pt-1 border-t sm:flex-row sm:items-center sm:justify-between">
+        <ProviderTestCoverage provider={provider} />
+        <div className="flex gap-2">
+          {onTest !== undefined && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onTest(provider.id)}
+              className="text-xs h-7 gap-1"
+              disabled={isTesting ?? false}
+            >
+              <RotateCw className={`size-3 ${(isTesting ?? false) ? "animate-spin" : ""}`} />
+              {(isTesting ?? false)
+                ? testingTimeLeft !== undefined
+                  ? `Testing (${testingTimeLeft}s)`
+                  : "Testing..."
+                : "Test"}
+            </Button>
+          )}
           <Button
             variant="outline"
             size="sm"
-            onClick={() => onTest(provider.id)}
+            onClick={() => onEdit(provider)}
             className="text-xs h-7 gap-1"
             disabled={isTesting ?? false}
           >
-            <RotateCw className={`size-3 ${(isTesting ?? false) ? "animate-spin" : ""}`} />
-            {(isTesting ?? false)
-              ? testingTimeLeft !== undefined
-                ? `Testing (${testingTimeLeft}s)`
-                : "Testing..."
-              : "Test"}
+            <Pencil className="size-3" />
+            Edit
           </Button>
-        )}
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => onEdit(provider)}
-          className="text-xs h-7 gap-1"
-          disabled={isTesting ?? false}
-        >
-          <Pencil className="size-3" />
-          Edit
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => onDelete(provider.id)}
-          className="text-xs h-7 gap-1 text-destructive hover:text-destructive"
-          disabled={isTesting ?? false}
-        >
-          <Trash2 className="size-3" />
-          Delete
-        </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onDelete(provider.id)}
+            className="text-xs h-7 gap-1 text-destructive hover:text-destructive"
+            disabled={isTesting ?? false}
+          >
+            <Trash2 className="size-3" />
+            Delete
+          </Button>
+        </div>
       </div>
     </div>
   );

package/src/components/proxy-viewer/ConversationGroup.tsx

@@ -29,7 +29,7 @@ export type ConversationGroupProps = {
   defaultExpanded?: boolean;
   /** Controls whether timestamps render as compact local time or full ISO strings. */
   timeDisplayFormat: TimeDisplayFormat;
-  /** Clear all logs that belong to this group. */
+  /** Clear all logs that belong to this group from the current view. */
   onClearGroup: (ids: number[]) => void;
   /** Show IDE identity in the session header. */
   showClientIdentity?: boolean;

package/src/components/proxy-viewer/ConversationHeader.tsx

@@ -96,8 +96,7 @@ export type ConversationHeaderProps = {
   showProcessMetadata?: boolean;
   /** Controls whether timestamps render as compact local time or full ISO strings. */
   timeDisplayFormat: TimeDisplayFormat;
-  /** Clear all logs in this group. After confirmation the parent removes them
-   *  from the in-memory store; this header is then unmounted. */
+  /** Clear all logs in this group from the current view; this header is then unmounted. */
   onClear?: () => void;
 };
 
@@ -287,7 +286,7 @@ export function ConversationHeader({
             type="button"
             onClick={handleClearClick}
             aria-label={`Clear group (${totalCalls} request${totalCalls !== 1 ? "s" : ""})`}
-            title="Clear this group"
+            title="Clear this group from the current view"
             className={HEADER_ACTION_BUTTON_CLASS}
           >
             <Trash2 className="size-3.5" />
@@ -321,8 +320,8 @@ export function ConversationHeader({
       <ConfirmDialog
         open={confirmOpen}
         onOpenChange={setConfirmOpen}
-        title="Clear this group?"
-        description={`This will remove ${totalCalls} request${totalCalls !== 1 ? "s" : ""} from this conversation. This action cannot be undone.`}
+        title="Clear this group from the current view?"
+        description={`This will hide ${totalCalls} request${totalCalls !== 1 ? "s" : ""} from the current view. Stored logs remain reloadable.`}
         confirmLabel="Clear"
         variant="destructive"
         onConfirm={() => {

package/src/components/proxy-viewer/LogEntryHeader.tsx

@@ -44,24 +44,19 @@ const STATUS_CUE_CLASSES: Record<
   StatusCategory,
   {
     frame: string;
-    dot: string;
   }
 > = {
   success: {
     frame: "border-cyan-200/15 bg-white/[0.04] text-slate-100",
-    dot: "bg-cyan-200/80 shadow-[0_0_14px_rgba(125,211,252,0.65)]",
   },
   client_error: {
     frame: "border-amber-300/25 bg-amber-300/[0.08] text-amber-100",
-    dot: "bg-amber-200 shadow-[0_0_14px_rgba(252,211,77,0.8)]",
   },
   server_error: {
     frame: "border-rose-300/25 bg-rose-300/[0.08] text-rose-100",
-    dot: "bg-rose-300 shadow-[0_0_14px_rgba(253,164,175,0.8)]",
   },
   pending: {
     frame: "border-cyan-300/25 bg-cyan-300/[0.08] text-cyan-100",
-    dot: "bg-cyan-200 shadow-[0_0_14px_rgba(103,232,249,0.8)]",
   },
 };
 
@@ -247,11 +242,10 @@ export const LogEntryHeader = memo(function ({
           {/* Request ID */}
           <span
             className={cn(
-              "inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2 font-mono",
+              "inline-flex h-8 shrink-0 items-center rounded-md px-2 font-mono",
               statusCue.frame,
             )}
           >
-            <span className={cn("size-1.5 rounded-full", statusCue.dot)} aria-hidden="true" />
             <span className="text-xs font-semibold tabular-nums" title={`Log ID ${String(log.id)}`}>
               #{displayNumber}
             </span>