@tonyclaw/agent-inspector 3.0.29 → 3.0.30

package/src/components/ProxyViewerContainer.tsx

@@ -13,15 +13,20 @@ import { OnboardingBanner } from "./OnboardingBanner";
 import {
   ProxyViewer,
   type LogPaginationControls,
-  type SessionLoadProgress,
   type SessionMembershipEvidence,
 } from "./ProxyViewer";
+import type { SessionLoadProgress } from "./proxy-viewer/SessionLoadProgressBar";
+import { browserPrefersReducedMotion, preferredScrollBehavior } from "./proxy-viewer/accessibility";
 import {
   filterLogs,
   mergeLogsById,
   mergeSessionIds,
 } from "./proxy-viewer/proxyViewerContainerLogic";
 import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
+import {
+  createInitialLiveConnectionState,
+  reduceLiveConnectionState,
+} from "./proxy-viewer/liveConnectionState";
 import { TransientToast, useTransientToast } from "./ui/transient-toast";
 
 type SSEUpdate =
@@ -125,12 +130,13 @@ 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;
+const SSE_RECONNECT_DELAY_MS = 3_000;
+const SSE_STALE_AFTER_MS = 10_000;
 
 function buildLogsStreamUrl(sessionId: string | undefined): string {
-  const params = new URLSearchParams();
+  const params = new URLSearchParams({ compact: "1" });
   if (sessionId !== undefined) {
     params.set("sessionId", sessionId);
-    params.set("compact", "1");
   }
   const query = params.toString();
   return query.length > 0 ? `/api/logs/stream?${query}` : "/api/logs/stream";
@@ -253,9 +259,10 @@ export function ProxyViewerContainer({
   const [selectedModel, setSelectedModel] = useState("__all__");
   const [knownSessions, setKnownSessions] = useState<string[]>([]);
   const { notice, showToast, dismissToast } = useTransientToast();
-  const [streamInitialized, setStreamInitialized] = useState(initialSessionId === undefined);
+  const [liveConnection, setLiveConnection] = useState(createInitialLiveConnectionState);
   const [logPage, setLogPage] = useState<LogCursorPage | null>(null);
   const [sessionPageLoading, setSessionPageLoading] = useState(initialSessionId !== undefined);
+  const [sessionLoadError, setSessionLoadError] = useState<string | null>(null);
   const [sessionLoadProgress, setSessionLoadProgress] = useState<SessionLoadProgress | undefined>(
     undefined,
   );
@@ -263,6 +270,8 @@ export function ProxyViewerContainer({
   const [, startLogTransition] = useTransition();
   const eventSourceRef = useRef<EventSource | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const staleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const automaticRetryEnabledRef = useRef(true);
   const handledHashRef = useRef<string | null>(null);
   const sessionPageRequestIdRef = useRef(0);
   const sessionLoadStartedAtRef = useRef<number | null>(null);
@@ -381,7 +390,11 @@ export function ProxyViewerContainer({
       eventSourceRef.current.close();
     }
 
-    setStreamInitialized(false);
+    if (reconnectTimeoutRef.current !== null) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    setLiveConnection((state) => reduceLiveConnectionState(state, { type: "connect-requested" }));
     const es = new EventSource(buildLogsStreamUrl(initialSessionId));
     eventSourceRef.current = es;
 
@@ -391,6 +404,12 @@ export function ProxyViewerContainer({
         const parsed: unknown = JSON.parse(rawData);
         const updateResult = SSEUpdateSchema.safeParse(parsed);
         if (!updateResult.success) {
+          setLiveConnection((state) =>
+            reduceLiveConnectionState(state, {
+              type: "recoverable-error",
+              message: "The live stream returned invalid data.",
+            }),
+          );
           showErrorToast("Failed to parse SSE data");
           return;
         }
@@ -409,7 +428,13 @@ export function ProxyViewerContainer({
             return nextLogs;
           });
           setKnownSessions((prev) => mergeSessionIds(prev, extractSessions(update.logs)));
-          setStreamInitialized(true);
+          if (staleTimeoutRef.current !== null) {
+            clearTimeout(staleTimeoutRef.current);
+            staleTimeoutRef.current = null;
+          }
+          setLiveConnection((state) =>
+            reduceLiveConnectionState(state, { type: "message-received", at: Date.now() }),
+          );
           dismissToast();
         } else if (update.type === "update") {
           setKnownSessions((prev) => {
@@ -417,23 +442,70 @@ export function ProxyViewerContainer({
             return mergeSessionIds(prev, [update.log.sessionId]);
           });
           scheduleUpdate(update.log);
+          if (staleTimeoutRef.current !== null) {
+            clearTimeout(staleTimeoutRef.current);
+            staleTimeoutRef.current = null;
+          }
+          setLiveConnection((state) =>
+            reduceLiveConnectionState(state, { type: "message-received", at: Date.now() }),
+          );
         }
       } catch {
+        setLiveConnection((state) =>
+          reduceLiveConnectionState(state, {
+            type: "recoverable-error",
+            message: "The live stream returned malformed JSON.",
+          }),
+        );
         showErrorToast("Failed to parse SSE data");
       }
     };
 
     es.onerror = () => {
-      showErrorToast("SSE connection lost, reconnecting...");
-      setStreamInitialized(true);
+      const online = navigator.onLine;
+      setLiveConnection((state) =>
+        reduceLiveConnectionState(state, {
+          type: "connection-lost",
+          online,
+          message: "The live stream disconnected.",
+        }),
+      );
       es.close();
-      if (reconnectTimeoutRef.current !== null) {
-        clearTimeout(reconnectTimeoutRef.current);
+      if (!online || !automaticRetryEnabledRef.current) return;
+      if (staleTimeoutRef.current === null) {
+        staleTimeoutRef.current = setTimeout(() => {
+          staleTimeoutRef.current = null;
+          setLiveConnection((state) => reduceLiveConnectionState(state, { type: "stale-timeout" }));
+        }, SSE_STALE_AFTER_MS);
       }
-      reconnectTimeoutRef.current = setTimeout(connectSSE, 3000);
+      reconnectTimeoutRef.current = setTimeout(connectSSE, SSE_RECONNECT_DELAY_MS);
     };
   }, [dismissToast, initialSessionId, scheduleUpdate, showErrorToast]);
 
+  const retryLiveConnection = useCallback(() => {
+    automaticRetryEnabledRef.current = true;
+    if (reconnectTimeoutRef.current !== null) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    connectSSE();
+  }, [connectSSE]);
+
+  const stopLiveConnection = useCallback(() => {
+    automaticRetryEnabledRef.current = false;
+    eventSourceRef.current?.close();
+    eventSourceRef.current = null;
+    if (reconnectTimeoutRef.current !== null) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    if (staleTimeoutRef.current !== null) {
+      clearTimeout(staleTimeoutRef.current);
+      staleTimeoutRef.current = null;
+    }
+    setLiveConnection((state) => reduceLiveConnectionState(state, { type: "stop-retrying" }));
+  }, []);
+
   const loadSessionPage = useCallback(
     (request: SessionPageRequest) => {
       if (initialSessionId === undefined) return;
@@ -441,6 +513,7 @@ export function ProxyViewerContainer({
       const requestId = sessionPageRequestIdRef.current + 1;
       sessionPageRequestIdRef.current = requestId;
       setSessionPageLoading(true);
+      setSessionLoadError(null);
       startSessionLoadProgress("Loading session logs", requestId);
       dismissToast();
 
@@ -453,16 +526,17 @@ export function ProxyViewerContainer({
           setLogPage(page);
           setSelectedSession(initialSessionId);
           setSessionPageLoading(false);
+          setSessionLoadError(null);
           stopSessionLoadProgress();
           dismissToast();
         })
         .catch((err: unknown) => {
           if (sessionPageRequestIdRef.current !== requestId) return;
-          setAllLogs([]);
-          setLogPage(null);
           setSessionPageLoading(false);
           stopSessionLoadProgress();
-          showErrorToast(err instanceof Error ? err.message : "Failed to load session logs");
+          const message = err instanceof Error ? err.message : "Failed to load session logs";
+          setSessionLoadError(message);
+          showErrorToast(message);
         });
     },
     [
@@ -479,6 +553,7 @@ export function ProxyViewerContainer({
       const requestId = sessionPageRequestIdRef.current + 1;
       sessionPageRequestIdRef.current = requestId;
       setSessionPageLoading(true);
+      setSessionLoadError(null);
       startSessionLoadProgress("Reloading full session", requestId);
       dismissToast();
 
@@ -521,6 +596,7 @@ export function ProxyViewerContainer({
         });
         setKnownSessions((prev) => mergeSessionIds(prev, [sessionId]));
         setSessionPageLoading(false);
+        setSessionLoadError(null);
         stopSessionLoadProgress();
         if (page.hasNewer) {
           showToast({
@@ -534,7 +610,9 @@ export function ProxyViewerContainer({
         if (sessionPageRequestIdRef.current !== requestId) return;
         setSessionPageLoading(false);
         stopSessionLoadProgress();
-        showErrorToast(err instanceof Error ? err.message : "Failed to reload session logs");
+        const message = err instanceof Error ? err.message : "Failed to reload session logs";
+        setSessionLoadError(message);
+        showErrorToast(message);
       });
     },
     [
@@ -597,7 +675,28 @@ export function ProxyViewerContainer({
   useEffect(() => {
     if (initialSessionId !== undefined) return undefined;
     connectSSE();
+    const handleOffline = (): void => {
+      eventSourceRef.current?.close();
+      eventSourceRef.current = null;
+      if (reconnectTimeoutRef.current !== null) {
+        clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
+      }
+      if (staleTimeoutRef.current !== null) {
+        clearTimeout(staleTimeoutRef.current);
+        staleTimeoutRef.current = null;
+      }
+      setLiveConnection((state) => reduceLiveConnectionState(state, { type: "browser-offline" }));
+    };
+    const handleOnline = (): void => {
+      if (!automaticRetryEnabledRef.current) return;
+      connectSSE();
+    };
+    window.addEventListener("offline", handleOffline);
+    window.addEventListener("online", handleOnline);
     return () => {
+      window.removeEventListener("offline", handleOffline);
+      window.removeEventListener("online", handleOnline);
       if (eventSourceRef.current) {
         eventSourceRef.current.close();
         eventSourceRef.current = null;
@@ -606,6 +705,10 @@ export function ProxyViewerContainer({
         clearTimeout(reconnectTimeoutRef.current);
         reconnectTimeoutRef.current = null;
       }
+      if (staleTimeoutRef.current !== null) {
+        clearTimeout(staleTimeoutRef.current);
+        staleTimeoutRef.current = null;
+      }
       if (flushTimerRef.current !== null) {
         clearTimeout(flushTimerRef.current);
         flushTimerRef.current = null;
@@ -632,7 +735,10 @@ export function ProxyViewerContainer({
       const target = document.getElementById(targetId);
       if (target !== null) {
         handledHashRef.current = hash;
-        target.scrollIntoView({ block: "center", behavior: "smooth" });
+        target.scrollIntoView({
+          block: "center",
+          behavior: preferredScrollBehavior(browserPrefersReducedMotion()),
+        });
         if (target instanceof HTMLElement) {
           highlightedTarget = target;
           target.setAttribute("data-deep-link-highlight", "true");
@@ -926,11 +1032,16 @@ export function ProxyViewerContainer({
         onImportLogs={initialSessionId === undefined ? handleImportLogs : undefined}
         isLoading={
           initialSessionId === undefined
-            ? !streamInitialized || sessionPageLoading
+            ? (liveConnection.status === "connecting" && liveConnection.lastSuccessAt === null) ||
+              sessionPageLoading
             : sessionPageLoading
         }
+        liveConnection={initialSessionId === undefined ? liveConnection : undefined}
+        onRetryLiveConnection={retryLiveConnection}
+        onStopLiveConnection={stopLiveConnection}
         pagination={pagination}
         sessionLoadProgress={sessionLoadProgress}
+        sessionLoadError={sessionLoadError ?? undefined}
         sessionMemberships={sessionMemberships}
         viewMode={viewMode}
         captureMode={captureMode}

package/src/components/ecosystem/AgentLabDialog.tsx

@@ -17,12 +17,14 @@ import {
 } from "lucide-react";
 import useSWR from "swr";
 import {
+  EcosystemExecutionConfirmationResponseSchema,
   EcosystemPackagesResponseSchema,
   EcosystemTaskResponseSchema,
   EcosystemTasksResponseSchema,
   type EcosystemPackage,
   type EcosystemPackageState,
   type EcosystemRecipe,
+  type EcosystemExecutionConfirmation,
   type EcosystemRunnerPreset,
   type EcosystemTask,
   type EcosystemTaskAction,
@@ -32,7 +34,14 @@ import { copyTextToClipboard } from "../../lib/clipboard";
 import { cn } from "../../lib/utils";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
 import { INSPECTOR_ICON_TRIGGER_CLASS } from "../ui/icon-trigger";
 
 type AgentLabDialogProps = {
@@ -49,6 +58,11 @@ type WorkflowCard = {
   icon: typeof Activity;
 };
 
+type PendingEcosystemExecution = {
+  endpoint: string;
+  confirmation: EcosystemExecutionConfirmation;
+};
+
 const WORKFLOWS: WorkflowCard[] = [
   {
     id: "observe",
@@ -113,25 +127,55 @@ async function fetchEcosystemTasks(url: string) {
   );
 }
 
-async function startEcosystemTask(
+async function prepareEcosystemTask(
   packageId: string,
   action: EcosystemTaskAction,
-): Promise<EcosystemTask> {
+): Promise<PendingEcosystemExecution> {
+  const endpoint = `/api/ecosystem/packages/${encodeURIComponent(packageId)}/${action}`;
   const response = await fetchJson(
-    `/api/ecosystem/packages/${encodeURIComponent(packageId)}/${action}`,
-    EcosystemTaskResponseSchema,
-    { method: "POST" },
-    (result) => `Failed to start ecosystem task: ${String(result.status)}`,
+    endpoint,
+    EcosystemExecutionConfirmationResponseSchema,
+    {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ intent: "prepare" }),
+    },
+    (result) => `Failed to prepare ecosystem task: ${String(result.status)}`,
   );
-  return response.task;
+  return { endpoint, confirmation: response.confirmation };
+}
+
+async function prepareEcosystemRecipe(recipeId: string): Promise<PendingEcosystemExecution> {
+  const endpoint = `/api/ecosystem/recipes/${encodeURIComponent(recipeId)}/run`;
+  const response = await fetchJson(
+    endpoint,
+    EcosystemExecutionConfirmationResponseSchema,
+    {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ intent: "prepare" }),
+    },
+    (result) => `Failed to prepare ecosystem recipe: ${String(result.status)}`,
+  );
+  return { endpoint, confirmation: response.confirmation };
 }
 
-async function startEcosystemRecipe(recipeId: string): Promise<EcosystemTask> {
+async function confirmEcosystemExecution(
+  pending: PendingEcosystemExecution,
+): Promise<EcosystemTask> {
   const response = await fetchJson(
-    `/api/ecosystem/recipes/${encodeURIComponent(recipeId)}/run`,
+    pending.endpoint,
     EcosystemTaskResponseSchema,
-    { method: "POST" },
-    (result) => `Failed to start ecosystem recipe: ${String(result.status)}`,
+    {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        intent: "confirm",
+        nonce: pending.confirmation.nonce,
+        confirmation: pending.confirmation.phrase,
+      }),
+    },
+    (result) => `Failed to start ecosystem task: ${String(result.status)}`,
   );
   return response.task;
 }
@@ -499,6 +543,84 @@ function RecentTaskRow({
   );
 }
 
+function ExecutionConfirmationDialog({
+  pending,
+  busy,
+  onOpenChange,
+  onConfirm,
+}: {
+  pending: PendingEcosystemExecution | null;
+  busy: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+}): JSX.Element {
+  const plan = pending?.confirmation.plan ?? null;
+  return (
+    <Dialog open={pending !== null} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Confirm local command</DialogTitle>
+          <DialogDescription>
+            Review the exact allowlisted action Agent Inspector will run on this machine.
+          </DialogDescription>
+        </DialogHeader>
+        {plan !== null && (
+          <div className="space-y-3">
+            <div className="grid gap-2 text-xs sm:grid-cols-2">
+              <div className="rounded-md border bg-muted/30 p-3">
+                <div className="text-muted-foreground">Source</div>
+                <div className="mt-1 break-words font-medium">{plan.source}</div>
+              </div>
+              <div className="rounded-md border bg-muted/30 p-3">
+                <div className="text-muted-foreground">Timeout</div>
+                <div className="mt-1 font-medium">{String(plan.timeoutMs / 1000)} seconds</div>
+              </div>
+              <div className="rounded-md border bg-muted/30 p-3 sm:col-span-2">
+                <div className="text-muted-foreground">Affected scope</div>
+                <div className="mt-1 font-medium">{plan.scope}</div>
+              </div>
+            </div>
+            <div>
+              <div className="mb-1 text-xs font-medium">Resolved command</div>
+              <pre className="max-h-32 overflow-auto whitespace-pre-wrap break-all rounded-md bg-black/80 p-3 font-mono text-xs leading-5 text-white/80">
+                {plan.command}
+              </pre>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Confirmation phrase: <code>{pending?.confirmation.phrase}</code>. The one-time
+              confirmation expires at{" "}
+              {new Date(pending?.confirmation.expiresAt ?? "").toLocaleTimeString()}.
+            </p>
+          </div>
+        )}
+        <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+          <Button
+            type="button"
+            variant="outline"
+            disabled={busy}
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            disabled={busy || plan === null}
+            onClick={onConfirm}
+          >
+            {busy ? (
+              <Loader2 className="size-3.5 animate-spin" />
+            ) : (
+              <Terminal className="size-3.5" />
+            )}
+            {busy ? "Starting" : "Confirm & Run"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogProps): JSX.Element {
   const [open, setOpen] = useState(false);
   const [copied, setCopied] = useState(false);
@@ -506,6 +628,8 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
   const [copiedRecipeId, setCopiedRecipeId] = useState<string | null>(null);
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
   const [taskError, setTaskError] = useState<string | null>(null);
+  const [pendingExecution, setPendingExecution] = useState<PendingEcosystemExecution | null>(null);
+  const [confirmationBusy, setConfirmationBusy] = useState(false);
   const response = useSWR("/api/ecosystem/packages", fetchEcosystemPackages, {
     revalidateOnFocus: false,
     revalidateIfStale: false,
@@ -560,14 +684,12 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
   };
   const runRecipe = (recipe: EcosystemRecipe): void => {
     setTaskError(null);
-    void startEcosystemRecipe(recipe.id)
-      .then((task) => {
-        setActiveTaskId(task.id);
-        void activeTaskResponse.mutate({ task }, { revalidate: true });
-        void tasksResponse.mutate();
+    void prepareEcosystemRecipe(recipe.id)
+      .then((pending) => {
+        setPendingExecution(pending);
       })
       .catch((error: unknown) => {
-        setTaskError(error instanceof Error ? error.message : "Failed to start ecosystem recipe");
+        setTaskError(error instanceof Error ? error.message : "Failed to prepare ecosystem recipe");
       });
   };
 
@@ -582,14 +704,31 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
 
   const handleStartTask = (packageId: string, action: EcosystemTaskAction): void => {
     setTaskError(null);
-    void startEcosystemTask(packageId, action)
+    void prepareEcosystemTask(packageId, action)
+      .then((pending) => {
+        setPendingExecution(pending);
+      })
+      .catch((error: unknown) => {
+        setTaskError(error instanceof Error ? error.message : "Failed to prepare ecosystem task");
+      });
+  };
+
+  const confirmPendingExecution = (): void => {
+    if (pendingExecution === null) return;
+    setTaskError(null);
+    setConfirmationBusy(true);
+    void confirmEcosystemExecution(pendingExecution)
       .then((task) => {
         setActiveTaskId(task.id);
+        setPendingExecution(null);
         void activeTaskResponse.mutate({ task }, { revalidate: true });
         void tasksResponse.mutate();
       })
       .catch((error: unknown) => {
         setTaskError(error instanceof Error ? error.message : "Failed to start ecosystem task");
+      })
+      .finally(() => {
+        setConfirmationBusy(false);
       });
   };
 
@@ -788,6 +927,14 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
           <TaskConsole task={activeTask} />
         </div>
       </DialogContent>
+      <ExecutionConfirmationDialog
+        pending={pendingExecution}
+        busy={confirmationBusy}
+        onOpenChange={(confirmationOpen) => {
+          if (!confirmationOpen && !confirmationBusy) setPendingExecution(null);
+        }}
+        onConfirm={confirmPendingExecution}
+      />
     </Dialog>
   );
 }