@tonyclaw/agent-inspector 3.0.7 → 3.0.9

package/src/components/ProxyViewer.tsx

@@ -52,6 +52,8 @@ import { groupLogsByConversation, type ConversationGroupData } from "./proxy-vie
 import { CrabLogo } from "./ui/crab-logo";
 import { crabVariants } from "./ui/crab-variants";
 import { McpLogo } from "./ui/mcp-logo";
+import { Button } from "./ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import type { TransientToastInput } from "./ui/transient-toast";
@@ -149,6 +151,7 @@ export type SessionMembershipEvidence = {
 
 export type LogPaginationControls = {
   isLoading: boolean;
+  loadProgress?: SessionLoadProgress;
   total: number | null;
   pageSize: number;
   hasOlder: boolean;
@@ -161,6 +164,14 @@ export type LogPaginationControls = {
   onNewest: () => void;
 };
 
+export type SessionLoadProgress = {
+  label: string;
+  elapsedMs: number;
+  timeoutMs: number;
+  loadedLogs: number;
+  loadedPages: number;
+};
+
 function formatTimeRange(logs: CapturedLog[], timeDisplayFormat: TimeDisplayFormat): string | null {
   const first = logs[0];
   const last = logs[logs.length - 1];
@@ -1003,6 +1014,44 @@ function LogPaginationButton({
   );
 }
 
+function formatDurationSeconds(ms: number): string {
+  return `${Math.max(0, Math.ceil(ms / 1000)).toString()}s`;
+}
+
+function SessionLoadProgressBar({ progress }: { progress: SessionLoadProgress }): JSX.Element {
+  const elapsedRatio = Math.min(1, progress.elapsedMs / progress.timeoutMs);
+  const percent = Math.max(4, Math.round(elapsedRatio * 100));
+  const remainingMs = Math.max(0, progress.timeoutMs - progress.elapsedMs);
+  const nearTimeout = elapsedRatio >= 0.75;
+  const details = [
+    progress.loadedLogs > 0 ? `${progress.loadedLogs.toString()} logs` : null,
+    progress.loadedPages > 0
+      ? `${progress.loadedPages.toString()} page${progress.loadedPages === 1 ? "" : "s"}`
+      : null,
+    `${formatDurationSeconds(remainingMs)} before timeout`,
+  ].filter((item): item is string => item !== null);
+
+  return (
+    <div className="min-w-0 space-y-1 px-1 pb-1">
+      <div className="flex min-w-0 items-center justify-between gap-3 font-mono text-[10px] text-muted-foreground">
+        <span className="min-w-0 truncate">{progress.label}</span>
+        <span className={cn("shrink-0 tabular-nums", nearTimeout && "text-amber-300")}>
+          {details.join(" / ")}
+        </span>
+      </div>
+      <div className="h-1.5 overflow-hidden rounded-full bg-white/[0.06]">
+        <div
+          className={cn(
+            "h-full rounded-full transition-all duration-300",
+            nearTimeout ? "bg-amber-300/80" : "bg-cyan-300/70",
+          )}
+          style={{ width: `${percent.toString()}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
 function LogPaginationBar({
   logs,
   pagination,
@@ -1027,6 +1076,9 @@ function LogPaginationBar({
       <div className="w-full min-w-0 px-1 font-mono text-[11px] text-muted-foreground sm:flex-1">
         {formatPaginationStatus({ logs, pagination })}
         {pagination.isLoading && logs.length > 0 && <span className="ml-2">Loading...</span>}
+        {pagination.loadProgress !== undefined && (
+          <SessionLoadProgressBar progress={pagination.loadProgress} />
+        )}
       </div>
       <div className="flex w-full items-center gap-1 overflow-x-auto sm:w-auto">
         <LogPaginationButton
@@ -1167,26 +1219,6 @@ function CopyableCommand({ command }: { command: string }): JSX.Element {
   );
 }
 
-function McpReadyBadge(): JSX.Element {
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span className="bg-cyan-300/[0.055] shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] inline-flex h-7 items-center gap-2 rounded-md px-2.5 font-mono text-[11px] font-medium text-cyan-200">
-            <span className="size-1.5 rounded-full bg-cyan-200 shadow-[0_0_8px_rgba(125,211,252,0.75)]" />
-            MCP Ready
-            <span className="hidden text-cyan-200/70 sm:inline">/api/mcp</span>
-          </span>
-        </TooltipTrigger>
-        <TooltipContent sideOffset={8} className="max-w-[320px] text-left leading-relaxed">
-          Coding agents can inspect logs, replay requests, test providers, and debug sessions
-          through MCP at /api/mcp.
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}
-
 function SidebarPanel({
   label,
   children,
@@ -1249,7 +1281,7 @@ function CrabFamily({
   entrancePhase: "hidden" | "playing" | "done";
 }): JSX.Element {
   if (compact) {
-    return <CrabLogo className="size-7 text-amber-500" />;
+    return <CrabLogo className="size-14 text-amber-500" />;
   }
 
   return (
@@ -1295,7 +1327,7 @@ function BrandHeader({
     return (
       <div className="bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_16px_44px_rgba(0,0,0,0.18)] rounded-[8px] p-3">
         <div className="flex flex-wrap items-start justify-between gap-3">
-          <div className="flex min-w-fit items-start gap-2">
+          <div className="flex min-w-fit items-start gap-3">
             <CrabFamily compact={true} entrancePhase={crabEntrancePhase} />
             <div className="min-w-fit">
               <div className="flex min-w-fit flex-wrap items-baseline gap-x-2 gap-y-0.5">
@@ -1316,9 +1348,6 @@ function BrandHeader({
             <SettingsDialog />
           </div>
         </div>
-        <div className="mt-2 hidden sm:block">
-          <McpReadyBadge />
-        </div>
       </div>
     );
   }
@@ -1341,7 +1370,6 @@ function BrandHeader({
         <span className="max-w-full text-sm font-semibold text-muted-foreground">
           Local First. Evidence First.
         </span>
-        <McpReadyBadge />
       </h1>
       <div className="flex flex-1 justify-end gap-1">
         <AlertsDialog />
@@ -1669,6 +1697,8 @@ export type ProxyViewerProps = {
   onSessionChange: (session: string) => void;
   onModelChange: (model: string) => void;
   onClearAll: () => void;
+  /** Delete visible logs from persisted storage when the user explicitly confirms it. */
+  onDeleteCurrentView?: (ids: number[]) => Promise<void>;
   /** Reload the selected/pinned session from stored logs without requiring a page refresh. */
   onReloadSession?: () => void;
   /** Clear only the logs whose ids are passed. Called by the per-group
@@ -1689,6 +1719,8 @@ export type ProxyViewerProps = {
   isLoading?: boolean;
   /** Cursor controls for history pages. Undefined keeps the live stream UI compact. */
   pagination?: LogPaginationControls;
+  /** Active session log loading progress, shown near load/reload controls. */
+  sessionLoadProgress?: SessionLoadProgress;
   /** Group/run member metadata attached to the pinned session id. */
   sessionMemberships?: SessionMembershipEvidence[];
   /** Hide the session filter dropdown. Used on `/session/$id` routes where
@@ -1708,6 +1740,7 @@ export function ProxyViewer({
   onSessionChange,
   onModelChange,
   onClearAll,
+  onDeleteCurrentView,
   onReloadSession,
   onClearGroup,
   onNotify,
@@ -1719,6 +1752,7 @@ export function ProxyViewer({
   timeDisplayFormat,
   isLoading = false,
   pagination,
+  sessionLoadProgress,
   sessionMemberships = [],
   hideSessionFilter = false,
   pinnedSessionId,
@@ -1730,6 +1764,9 @@ export function ProxyViewer({
   const [importing, setImporting] = useState(false);
   const [importStatus, setImportStatus] = useState<string | null>(null);
   const [importError, setImportError] = useState<string | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteStoredData, setDeleteStoredData] = useState(false);
+  const [deletingCurrentView, setDeletingCurrentView] = useState(false);
   const [comparePair, setComparePair] = useState<[CapturedLog, CapturedLog] | null>(null);
   const [crabEntrancePhase, setCrabEntrancePhase] = useState<"hidden" | "playing" | "done">(
     "hidden",
@@ -1737,8 +1774,27 @@ export function ProxyViewer({
   const logListRef = useRef<HTMLDivElement>(null);
   const logListWrapperRef = useRef<HTMLDivElement>(null);
   const importInputRef = useRef<HTMLInputElement>(null);
+  const exportAbortRef = useRef<AbortController | null>(null);
+  const exportRequestIdRef = useRef(0);
   useKeyboardNavigation(logListRef, logListWrapperRef, { pageWide: true });
 
+  const cancelTransientTasks = useCallback(() => {
+    exportRequestIdRef.current += 1;
+    exportAbortRef.current?.abort();
+    exportAbortRef.current = null;
+    setExporting(null);
+    setExportError(null);
+  }, []);
+
+  useEffect(
+    () => () => {
+      exportRequestIdRef.current += 1;
+      exportAbortRef.current?.abort();
+      exportAbortRef.current = null;
+    },
+    [],
+  );
+
   useEffect(() => {
     const perCrabDuration = 400;
     const startDelay = 50;
@@ -1762,11 +1818,18 @@ export function ProxyViewer({
 
   const handleExport = useCallback(
     async (mode: ExportMode) => {
+      exportAbortRef.current?.abort();
+      const controller = new AbortController();
+      exportAbortRef.current = controller;
+      const requestId = exportRequestIdRef.current + 1;
+      exportRequestIdRef.current = requestId;
       setExporting(mode);
       setExportError(null);
       try {
-        const result = await exportLogsAsZip(logs, mode);
+        const result = await exportLogsAsZip(logs, mode, { signal: controller.signal });
+        if (exportRequestIdRef.current !== requestId) return;
         if (!result.ok) {
+          if (result.canceled === true) return;
           if (onNotify !== undefined) {
             onNotify({ message: result.message, tone: "error" });
           } else {
@@ -1774,7 +1837,10 @@ export function ProxyViewer({
           }
         }
       } finally {
-        setExporting(null);
+        if (exportRequestIdRef.current === requestId) {
+          exportAbortRef.current = null;
+          setExporting(null);
+        }
       }
     },
     [logs, onNotify],
@@ -1819,8 +1885,61 @@ export function ProxyViewer({
   // Close the compare drawer when the user changes the session or model
   // filter, since the predecessor relationship may no longer be meaningful.
   useEffect(() => {
+    cancelTransientTasks();
+    setComparePair(null);
+  }, [cancelTransientTasks, selectedSession, selectedModel]);
+
+  const handleClearCurrentView = useCallback(() => {
+    cancelTransientTasks();
+    setImportStatus(null);
+    setImportError(null);
     setComparePair(null);
-  }, [selectedSession, selectedModel]);
+    onClearAll();
+  }, [cancelTransientTasks, onClearAll]);
+
+  const handleRequestDeleteCurrentView = useCallback(() => {
+    setDeleteStoredData(false);
+    setDeleteDialogOpen(true);
+  }, []);
+
+  const handleConfirmDeleteCurrentView = useCallback(() => {
+    cancelTransientTasks();
+    setImportStatus(null);
+    setImportError(null);
+    setComparePair(null);
+
+    if (!deleteStoredData || onDeleteCurrentView === undefined) {
+      setDeleteDialogOpen(false);
+      onClearAll();
+      return;
+    }
+
+    setDeletingCurrentView(true);
+    void onDeleteCurrentView(logs.map((log) => log.id))
+      .then(() => {
+        setDeleteDialogOpen(false);
+      })
+      .catch((err: unknown) => {
+        const message = err instanceof Error ? err.message : "Failed to delete stored logs";
+        if (onNotify !== undefined) {
+          onNotify({ message, tone: "error" });
+        } else {
+          setImportError(message);
+        }
+      })
+      .finally(() => {
+        setDeletingCurrentView(false);
+      });
+  }, [cancelTransientTasks, deleteStoredData, logs, onClearAll, onDeleteCurrentView, onNotify]);
+
+  const handleReloadCurrentSession = useCallback(() => {
+    if (onReloadSession === undefined) return;
+    cancelTransientTasks();
+    setImportStatus(null);
+    setImportError(null);
+    setComparePair(null);
+    onReloadSession();
+  }, [cancelTransientTasks, onReloadSession]);
 
   const closeCompare = useCallback(() => {
     setComparePair(null);
@@ -1927,7 +2046,7 @@ export function ProxyViewer({
                 {onReloadSession !== undefined && (
                   <button
                     type="button"
-                    onClick={onReloadSession}
+                    onClick={handleReloadCurrentSession}
                     disabled={isLoading}
                     className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 min-w-0 items-center justify-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
                     title="Load stored logs for this session"
@@ -1938,18 +2057,37 @@ export function ProxyViewer({
                 )}
                 <button
                   type="button"
-                  onClick={onClearAll}
+                  onClick={handleClearCurrentView}
                   disabled={!canClearCurrentView}
                   className={cn(
                     "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 min-w-0 items-center justify-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
-                    onReloadSession === undefined && "col-span-2",
+                    onReloadSession === undefined &&
+                      onDeleteCurrentView === undefined &&
+                      "col-span-2",
                   )}
                   title="Clear the current view. Stored logs remain reloadable."
                 >
                   <Trash2 className="size-3.5" />
-                  <span>Clear view</span>
+                  <span>Clear</span>
                 </button>
+                {onDeleteCurrentView !== undefined && (
+                  <button
+                    type="button"
+                    onClick={handleRequestDeleteCurrentView}
+                    disabled={!canClearCurrentView || deletingCurrentView}
+                    className="bg-red-500/[0.07] hover:bg-red-500/[0.12] inline-flex h-8 min-w-0 items-center justify-center gap-1.5 rounded-md px-2 text-xs text-red-200 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.14)] transition-colors hover:text-red-100 disabled:cursor-not-allowed disabled:opacity-50"
+                    title="Choose whether to delete stored data for the current view."
+                  >
+                    <Trash2 className="size-3.5" />
+                    <span>Delete</span>
+                  </button>
+                )}
               </div>
+              {sessionLoadProgress !== undefined && (
+                <div className="mt-2 rounded-md bg-black/20 px-2 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
+                  <SessionLoadProgressBar progress={sessionLoadProgress} />
+                </div>
+              )}
             </SidebarPanel>
 
             <SidebarPanel label="Workspace">
@@ -2128,7 +2266,7 @@ export function ProxyViewer({
               {onReloadSession !== undefined && (
                 <button
                   type="button"
-                  onClick={onReloadSession}
+                  onClick={handleReloadCurrentSession}
                   disabled={isLoading}
                   className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
                   title="Reload this session from stored logs"
@@ -2139,15 +2277,32 @@ export function ProxyViewer({
               )}
               <button
                 type="button"
-                onClick={onClearAll}
+                onClick={handleClearCurrentView}
                 disabled={!canClearCurrentView}
                 className="bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
                 title="Clear the current view. Stored logs remain reloadable."
               >
                 <Trash2 className="size-3.5" />
-                <span>Clear view</span>
+                <span>Clear</span>
               </button>
+              {onDeleteCurrentView !== undefined && (
+                <button
+                  type="button"
+                  onClick={handleRequestDeleteCurrentView}
+                  disabled={!canClearCurrentView || deletingCurrentView}
+                  className="bg-red-500/[0.07] hover:bg-red-500/[0.12] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-red-200 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.14)] transition-colors hover:text-red-100 disabled:cursor-not-allowed disabled:opacity-50"
+                  title="Choose whether to delete stored data for the current view."
+                >
+                  <Trash2 className="size-3.5" />
+                  <span>Delete</span>
+                </button>
+              )}
             </div>
+            {pagination === undefined && sessionLoadProgress !== undefined && (
+              <div className="mt-2 rounded-md bg-black/20 px-2 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
+                <SessionLoadProgressBar progress={sessionLoadProgress} />
+              </div>
+            )}
             <LogPaginationBar logs={logs} pagination={pagination} embedded={true} />
             {onNotify === undefined && exportError !== null && (
               <div className="mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
@@ -2178,6 +2333,11 @@ export function ProxyViewer({
                     <p className="inline-block max-w-full rounded bg-muted px-3 py-1 font-mono text-xs break-all">
                       {truncateSessionId(selectedSession)}
                     </p>
+                    {sessionLoadProgress !== undefined && (
+                      <div className="mx-auto max-w-md rounded-md bg-black/20 px-2 py-2 text-left shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
+                        <SessionLoadProgressBar progress={sessionLoadProgress} />
+                      </div>
+                    )}
                     {sessionMemberships.length > 0 && (
                       <div className="text-left">
                         <SessionMembershipPanel memberships={sessionMemberships} />
@@ -2190,7 +2350,7 @@ export function ProxyViewer({
                           {onReloadSession !== undefined && (
                             <button
                               type="button"
-                              onClick={onReloadSession}
+                              onClick={handleReloadCurrentSession}
                               className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground"
                             >
                               <RefreshCw className="size-3.5" />
@@ -2268,6 +2428,58 @@ export function ProxyViewer({
         </main>
       </div>
 
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent className="border-red-500/20 bg-zinc-950 text-zinc-100 sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Delete current logs?</DialogTitle>
+            <DialogDescription>
+              Choose whether this only clears the UI or also deletes the stored log data for the
+              current view.
+            </DialogDescription>
+          </DialogHeader>
+          <label className="flex items-start gap-3 rounded-md bg-red-500/[0.08] px-3 py-3 text-sm text-red-100 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.16)]">
+            <input
+              type="checkbox"
+              className="mt-0.5 size-4 shrink-0"
+              checked={deleteStoredData}
+              disabled={deletingCurrentView}
+              onChange={(event) => setDeleteStoredData(event.currentTarget.checked)}
+            />
+            <span className="min-w-0">
+              <span className="block font-medium">Also delete stored data</span>
+              <span className="mt-1 block text-xs text-red-200/80">
+                Removes persisted log rows, streaming chunks, and session archive entries for these{" "}
+                {logs.length.toString()} visible request{logs.length === 1 ? "" : "s"}.
+              </span>
+            </span>
+          </label>
+          <div className="flex justify-end gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={deletingCurrentView}
+              onClick={() => setDeleteDialogOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              variant={deleteStoredData ? "destructive" : "secondary"}
+              size="sm"
+              disabled={deletingCurrentView}
+              onClick={handleConfirmDeleteCurrentView}
+            >
+              {deletingCurrentView
+                ? "Deleting..."
+                : deleteStoredData
+                  ? "Delete data"
+                  : "Clear only"}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       {/* Compare drawer: sibling of the log list, not a route change. */}
       {comparePair !== null && (
         <Suspense fallback={null}>