@tonyclaw/agent-inspector 3.0.8 → 3.0.10

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",
@@ -1860,6 +1897,41 @@ export function ProxyViewer({
     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();
@@ -1989,14 +2061,33 @@ export function ProxyViewer({
                   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">
@@ -2192,9 +2283,26 @@ export function ProxyViewer({
                 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">
@@ -2225,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} />
@@ -2315,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}>

package/src/components/ProxyViewerContainer.tsx

@@ -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" }
@@ -236,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());
@@ -256,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(
@@ -369,6 +430,7 @@ export function ProxyViewerContainer({
       const requestId = sessionPageRequestIdRef.current + 1;
       sessionPageRequestIdRef.current = requestId;
       setSessionPageLoading(true);
+      startSessionLoadProgress("Loading session logs", requestId);
       dismissToast();
 
       void fetchSessionLogsPage(initialSessionId, request)
@@ -380,6 +442,7 @@ export function ProxyViewerContainer({
           setLogPage(page);
           setSelectedSession(initialSessionId);
           setSessionPageLoading(false);
+          stopSessionLoadProgress();
           dismissToast();
         })
         .catch((err: unknown) => {
@@ -387,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(
@@ -398,6 +468,7 @@ export function ProxyViewerContainer({
       const requestId = sessionPageRequestIdRef.current + 1;
       sessionPageRequestIdRef.current = requestId;
       setSessionPageLoading(true);
+      startSessionLoadProgress("Reloading full session", requestId);
       dismissToast();
 
       void (async () => {
@@ -408,6 +479,7 @@ export function ProxyViewerContainer({
           SESSION_RELOAD_PAGE_LIMIT,
         );
         collected.push(...page.logs);
+        updateSessionLoadProgress("Reloading full session", requestId, collected.length, 1);
 
         let loadedPages = 1;
         while (
@@ -422,6 +494,12 @@ export function ProxyViewerContainer({
           );
           collected.push(...page.logs);
           loadedPages += 1;
+          updateSessionLoadProgress(
+            "Reloading full session",
+            requestId,
+            collected.length,
+            loadedPages,
+          );
         }
 
         if (sessionPageRequestIdRef.current !== requestId) return;
@@ -432,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.`,
@@ -443,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(() => {
@@ -479,6 +566,12 @@ export function ProxyViewerContainer({
     refreshSessions();
   }, [refreshSessions]);
 
+  useEffect(() => {
+    return () => {
+      stopSessionLoadProgress();
+    };
+  }, [stopSessionLoadProgress]);
+
   useEffect(() => {
     if (initialSessionId === undefined) return;
     loadSessionPage({ kind: "newest" });
@@ -564,6 +657,8 @@ export function ProxyViewerContainer({
 
   const handleClearAll = useCallback(() => {
     const clearedSessions = extractSessions(allLogs);
+    stopSessionLoadProgress();
+    setSessionPageLoading(false);
     logIndexRef.current.clear();
     setAllLogs([]);
     setLogPage(null);
@@ -572,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[]) => {
@@ -590,6 +685,49 @@ export function ProxyViewerContainer({
     [showToast],
   );
 
+  const handleDeleteCurrentView = useCallback(
+    async (ids: number[]): Promise<void> => {
+      if (ids.length === 0) return;
+      const persistedIds = ids.filter((id) => Number.isInteger(id) && id >= 0);
+      if (persistedIds.length === 0) {
+        showToast({
+          message: "No persisted log records were found for this view.",
+          tone: "error",
+        });
+        return;
+      }
+      const idSet = new Set(persistedIds);
+      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: persistedIds }),
+      });
+
+      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" });
@@ -655,6 +793,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,
@@ -673,6 +812,7 @@ export function ProxyViewerContainer({
     loadOlderPage,
     loadOldestPage,
     logPage,
+    sessionLoadProgress,
     sessionPageLoading,
   ]);
 
@@ -689,6 +829,7 @@ export function ProxyViewerContainer({
         onSessionChange={setSelectedSession}
         onModelChange={setSelectedModel}
         onClearAll={handleClearAll}
+        onDeleteCurrentView={handleDeleteCurrentView}
         onReloadSession={
           initialSessionId !== undefined || selectedSession !== "__all__"
             ? handleReloadSession
@@ -703,6 +844,7 @@ export function ProxyViewerContainer({
             : sessionPageLoading
         }
         pagination={pagination}
+        sessionLoadProgress={sessionLoadProgress}
         sessionMemberships={sessionMemberships}
         viewMode={viewMode}
         captureMode={captureMode}