@opengeni/react 3.3.2 → 3.4.1-canary.38960406141001

package/dist/{chunk-ZPBTI3TE.js → chunk-KZC6QRNR.js}

@@ -1,41 +1,48 @@
+"use client";
 import {
   InteractionInterventionBanner,
+  isInteractionControlUnavailable,
   isNonRetryableInteractionError,
   isSourcePlacementChangedError,
   useInteractionInterventions,
-  useInteractionInvalidation
-} from "./chunk-H5YGYNXS.js";
+  useInteractionInvalidation,
+  useViewerMenuDismiss
+} from "./chunk-P4BNUO57.js";
+import {
+  copyTextToClipboard
+} from "./chunk-PEHTX3V7.js";
 import {
-  STREAM_CLOSE_REASON_NORMAL,
-  STREAM_KIND_BROWSER,
-  STREAM_ROLE_CLIENT,
-  decodeStreamFrame,
-  decodeStreamOpenAck,
-  encodeStreamClose,
-  encodeStreamOpen,
   interactionHostPlatform
-} from "./chunk-5YK2ZDIG.js";
+} from "./chunk-ZUWF4NF7.js";
 import {
   usePageLiveActivity
-} from "./chunk-KZ73RL76.js";
+} from "./chunk-QHUE7E4N.js";
 import {
   useEmbeddedBrowserInteraction
-} from "./chunk-NEXLLTP4.js";
-import {
-  copyTextToClipboard
-} from "./chunk-JVYQRRC4.js";
+} from "./chunk-G76LSA76.js";
 import {
   formatBytes
-} from "./chunk-VTOREEXF.js";
+} from "./chunk-BLL56F7R.js";
+import {
+  STREAM_CLOSE_REASON_NORMAL,
+  STREAM_KIND_BROWSER,
+  STREAM_ROLE_CLIENT,
+  decodeStreamFrame,
+  decodeStreamOpenAck,
+  encodeStreamClose,
+  encodeStreamOpen
+} from "./chunk-TNEZNMSN.js";
 import {
   cn
-} from "./chunk-22KP6LR5.js";
+} from "./chunk-TXS65BB2.js";
 
 // src/components/browser-viewer.tsx
 import { interactionControlFailureFromError } from "@opengeni/sdk/interaction";
 import {
   BugIcon,
   ArchiveIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
   CheckIcon,
   ChevronDownIcon,
   CircleAlertIcon,
@@ -54,11 +61,12 @@ import {
 } from "lucide-react";
 import {
   useCallback as useCallback8,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useId,
+  useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo2,
-  useRef as useRef8,
-  useState as useState8
+  useRef as useRef9,
+  useState as useState9
 } from "react";
 
 // src/hooks/use-browser-frame-stream.ts
@@ -74,7 +82,8 @@ var RELAY_TAG_CLOSE = 4;
 var MAX_AUTOMATIC_RECONNECTS_WITHOUT_A_FRAME = 2;
 function useBrowserFrameStream(options) {
   const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
-  const enabled = options.enabled ?? true;
+  const pageLive = usePageLiveActivity();
+  const enabled = (options.enabled ?? true) && pageLive;
   const [nonce, setNonce] = useState(0);
   const [result, setResult] = useState({
     state: "idle",
@@ -296,6 +305,7 @@ function useBrowserFrameStream(options) {
         activeStream.kind === "relay" ? activeStream.url : browserFrameSocketUrl(activeAttachment, streamRef.current),
         activeStream.kind === "direct_websocket" ? [...activeStream.protocols] : []
       );
+      latestRef.current = { key: "", sequence: -1 };
       socket = openedSocket;
       socketHandlers = {
         open: () => onOpen(openedSocket),
@@ -346,7 +356,9 @@ function useBrowserFrameStream(options) {
             browserSessionId: attachment.browserSessionId,
             controllerGeneration: attachment.controllerGeneration,
             targetId: attachment.targetId,
-            expiresAt: attachment.expiresAt
+            expiresAt: attachment.expiresAt,
+            ...attachment.fencedInputBatches === true ? { fencedInputBatches: true } : {},
+            ...attachment.focusedInputObservations === true ? { focusedInputObservations: true } : {}
           },
           error: null
         }));
@@ -855,14 +867,35 @@ function useBrowserSession(options) {
   const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
   const browserSessionId = options.browserSessionId;
   const enabled = (options.enabled ?? true) && browserSessionId !== null;
+  const sourceRef = useRef5({ client, workspaceId, browserSessionId, enabled });
+  if (sourceRef.current.client !== client || sourceRef.current.workspaceId !== workspaceId || sourceRef.current.browserSessionId !== browserSessionId || sourceRef.current.enabled !== enabled) {
+    sourceRef.current = { client, workspaceId, browserSessionId, enabled };
+  }
+  const source = sourceRef.current;
+  const semanticObservationEnabled = options.semanticObservationEnabled ?? true;
+  const semanticObservationEnabledRef = useRef5(semanticObservationEnabled);
+  semanticObservationEnabledRef.current = semanticObservationEnabled;
+  const previousSemanticObservationRef = useRef5({
+    browserSessionId,
+    enabled: semanticObservationEnabled
+  });
   const pageLive = usePageLiveActivity();
   const pollIntervalMs = Math.max(750, options.pollIntervalMs ?? 2e3);
-  const [state, setState] = useState5(() => emptyState4(browserSessionId, enabled));
-  const visible = state.browserSessionId === browserSessionId ? state : emptyState4(browserSessionId, enabled);
+  const [state, setState] = useState5(() => ({ ...emptyState4(browserSessionId, enabled), source }));
+  const visible = state.source === source && state.browserSessionId === browserSessionId ? state : { ...emptyState4(browserSessionId, enabled), source };
   const refreshBlocked = isNonRetryableInteractionError(visible.error);
+  const inputFailureRef = useRef5(visible.inputFailure);
+  inputFailureRef.current = visible.inputFailure;
   const selectedTargetIdRef = useRef5(visible.selectedTargetId);
   selectedTargetIdRef.current = visible.selectedTargetId;
+  const selectionRevisionRef = useRef5(0);
+  const actionResultOrderRef = useRef5({ next: 0, settled: 0 });
+  const selectedTargetRef = useRef5(
+    visible.targets.find((target) => target.id === visible.selectedTargetId) ?? null
+  );
+  selectedTargetRef.current = visible.targets.find((target) => target.id === visible.selectedTargetId) ?? null;
   const observationRef = useRef5({ browserSessionId, observation: visible.observation });
+  const lastObservationAtRef = useRef5(0);
   if (observationRef.current.browserSessionId !== browserSessionId) {
     observationRef.current = {
       browserSessionId,
@@ -877,106 +910,189 @@ function useBrowserSession(options) {
   });
   const mutationRef = useRef5({
     browserSessionId,
-    count: 0
+    source,
+    count: 0,
+    needsInventoryReconcile: false
   });
   const mountedRef = useRef5(true);
+  const isCurrentSource = useCallback5(
+    () => mountedRef.current && sourceRef.current === source,
+    [source]
+  );
   const invalidateRefresh = useCallback5(() => {
     const id = requestRef.current.id + 1;
     requestRef.current.controller?.abort();
     requestRef.current = { id, controller: null };
   }, []);
-  const refresh = useCallback5(async () => {
-    if (!enabled || !browserSessionId) return;
-    const id = requestRef.current.id + 1;
-    requestRef.current.controller?.abort();
-    const controller = new AbortController();
-    requestRef.current = { id, controller };
-    try {
-      const [session, targetResponse] = await Promise.all([
-        client.getBrowserSession(workspaceId, browserSessionId, {
-          signal: controller.signal
-        }),
-        client.listBrowserTargets(workspaceId, browserSessionId, {
-          signal: controller.signal
-        })
-      ]);
-      if (!mountedRef.current || requestRef.current.id !== id) return;
-      const selected = chooseTarget(targetResponse.targets, selectedTargetIdRef.current);
-      selectedTargetIdRef.current = selected?.id ?? null;
-      observationRef.current = { browserSessionId, observation: null };
-      setState(
-        (current) => current.browserSessionId === browserSessionId ? {
-          ...current,
-          session,
-          targets: targetResponse.targets,
-          selectedTargetId: selected?.id ?? null,
-          observation: null,
-          loading: false,
-          error: null
-        } : current
-      );
-      if (!selected) return;
+  const refreshInventory = useCallback5(
+    async (checkInput = false, observeSelectedTarget = true) => {
+      if (!enabled || !browserSessionId || !isCurrentSource()) return;
+      const checkedInputFailure = inputFailureRef.current;
+      const id = requestRef.current.id + 1;
+      requestRef.current.controller?.abort();
+      const controller = new AbortController();
+      requestRef.current = { id, controller };
       try {
-        const observation = await client.observeBrowserTarget(
-          workspaceId,
+        const [session, targetResponse] = await Promise.all([
+          client.getBrowserSession(workspaceId, browserSessionId, {
+            signal: controller.signal
+          }),
+          client.listBrowserTargets(workspaceId, browserSessionId, {
+            signal: controller.signal
+          })
+        ]);
+        if (!isCurrentSource() || requestRef.current.id !== id) return;
+        const selected = chooseTarget(targetResponse.targets, selectedTargetIdRef.current);
+        selectedTargetIdRef.current = selected?.id ?? null;
+        selectedTargetRef.current = selected;
+        const previousObservation = observationRef.current.browserSessionId === browserSessionId ? observationRef.current.observation : null;
+        const retainedObservation = selected && previousObservation && sameObservationTarget(previousObservation, selected) ? previousObservation : null;
+        observationRef.current = {
           browserSessionId,
-          selected.id,
-          { signal: controller.signal }
-        );
-        if (!mountedRef.current || requestRef.current.id !== id) return;
-        observationRef.current = { browserSessionId, observation };
+          observation: retainedObservation
+        };
         setState(
-          (current) => current.browserSessionId === browserSessionId && current.selectedTargetId === observation.target.id ? { ...current, observation } : current
+          (current) => isCurrentSource() && current.source === source && current.browserSessionId === browserSessionId ? {
+            ...current,
+            session,
+            targets: targetResponse.targets,
+            selectedTargetId: selected?.id ?? null,
+            observation: retainedObservation,
+            loading: false,
+            error: null,
+            // Media and background polling cannot confirm an input outcome.
+            // Only an explicit fresh check clears the notice it began with.
+            inputFailure: checkInput && session.id === browserSessionId && targetResponse.browserSessionId === browserSessionId && current.inputFailure === checkedInputFailure ? null : current.inputFailure
+          } : current
         );
+        if (!selected || !observeSelectedTarget || !semanticObservationEnabledRef.current) return;
+        try {
+          const observation = await client.observeBrowserTarget(
+            workspaceId,
+            browserSessionId,
+            selected.id,
+            { signal: controller.signal }
+          );
+          if (!isCurrentSource() || requestRef.current.id !== id) return;
+          const currentSelected = selectedTargetRef.current;
+          if (observationRef.current.browserSessionId !== browserSessionId || currentSelected?.id !== selected.id || observation.browserSessionId !== browserSessionId || observation.target.id !== selected.id || observation.target.controllerGeneration !== currentSelected.controllerGeneration || observation.target.targetGeneration !== currentSelected.targetGeneration)
+            return;
+          selectedTargetRef.current = observation.target;
+          observationRef.current = { browserSessionId, observation };
+          lastObservationAtRef.current = Date.now();
+          setState(
+            (current) => isCurrentSource() && current.source === source && current.browserSessionId === browserSessionId && current.selectedTargetId === observation.target.id ? {
+              ...current,
+              observation,
+              targets: replaceTarget(current.targets, observation.target)
+            } : current
+          );
+        } catch (cause) {
+          if (controller.signal.aborted || !isCurrentSource() || requestRef.current.id !== id)
+            return;
+          void cause;
+        }
       } catch (cause) {
-        if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id)
-          return;
-        void cause;
+        if (controller.signal.aborted || !isCurrentSource() || requestRef.current.id !== id) return;
+        setState(
+          (current) => isCurrentSource() && current.source === source && current.browserSessionId === browserSessionId ? {
+            ...current,
+            loading: false,
+            error: cause instanceof Error ? cause : new Error(String(cause))
+          } : current
+        );
+      } finally {
+        if (requestRef.current.id === id) {
+          requestRef.current = { id, controller: null };
+        }
       }
-    } catch (cause) {
-      if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id) return;
+    },
+    [browserSessionId, client, enabled, isCurrentSource, source, workspaceId]
+  );
+  const refresh = useCallback5(async () => await refreshInventory(true), [refreshInventory]);
+  const refreshSemantic = useCallback5(async () => {
+    if (!enabled || !browserSessionId || !isCurrentSource()) return;
+    const target = selectedTargetRef.current;
+    if (!target) return;
+    const id = requestRef.current.id + 1;
+    requestRef.current.controller?.abort();
+    const controller = new AbortController();
+    requestRef.current = { id, controller };
+    try {
+      const observation = await client.observeBrowserTarget(
+        workspaceId,
+        browserSessionId,
+        target.id,
+        { signal: controller.signal }
+      );
+      if (!isCurrentSource() || requestRef.current.id !== id) return;
+      if (!sameObservationTarget(observation, selectedTargetRef.current)) return;
+      observationRef.current = { browserSessionId, observation };
+      lastObservationAtRef.current = Date.now();
       setState(
-        (current) => current.browserSessionId === browserSessionId ? {
-          ...current,
-          loading: false,
-          error: cause instanceof Error ? cause : new Error(String(cause))
-        } : current
+        (current) => isCurrentSource() && current.source === source && current.browserSessionId === browserSessionId && current.selectedTargetId === target.id ? { ...current, observation } : current
       );
+    } catch {
     } finally {
-      if (requestRef.current.id === id) {
-        requestRef.current = { id, controller: null };
-      }
+      if (requestRef.current.id === id) requestRef.current = { id, controller: null };
     }
-  }, [browserSessionId, client, enabled, workspaceId]);
+  }, [browserSessionId, client, enabled, isCurrentSource, source, workspaceId]);
   useEffect5(() => {
     mountedRef.current = true;
     if (!enabled) {
       invalidateRefresh();
-      setState(emptyState4(browserSessionId, false));
+      setState({ ...emptyState4(browserSessionId, false), source });
       return;
     }
     setState(
-      (current) => current.browserSessionId === browserSessionId ? { ...current, loading: true } : emptyState4(browserSessionId, true)
+      (current) => isCurrentSource() && current.source === source && current.browserSessionId === browserSessionId ? { ...current, loading: true } : { ...emptyState4(browserSessionId, true), source }
     );
-    void refresh();
+    void refreshInventory();
     return () => {
       mountedRef.current = false;
       invalidateRefresh();
     };
-  }, [browserSessionId, enabled, invalidateRefresh, refresh]);
+  }, [browserSessionId, enabled, invalidateRefresh, isCurrentSource, refreshInventory, source]);
+  useEffect5(() => {
+    const previous = previousSemanticObservationRef.current;
+    previousSemanticObservationRef.current = {
+      browserSessionId,
+      enabled: semanticObservationEnabled
+    };
+    if (enabled && semanticObservationEnabled && previous.browserSessionId === browserSessionId && !previous.enabled) {
+      const currentObservation = observationRef.current.observation;
+      if (currentObservation && sameObservationTarget(currentObservation, selectedTargetRef.current) && Date.now() - lastObservationAtRef.current < pollIntervalMs) {
+        return;
+      }
+      observationRef.current = { browserSessionId, observation: null };
+      setState(
+        (current) => isCurrentSource() && current.source === source && current.browserSessionId === browserSessionId ? { ...current, observation: null } : current
+      );
+      void refreshSemantic();
+    }
+  }, [
+    browserSessionId,
+    enabled,
+    isCurrentSource,
+    pollIntervalMs,
+    refreshSemantic,
+    semanticObservationEnabled,
+    source
+  ]);
   useEffect5(() => {
     if (!enabled || !pageLive || visible.mutating || refreshBlocked) return;
     const timer = setInterval(() => {
-      if (!requestRef.current.controller) void refresh();
+      if (!requestRef.current.controller) void refreshInventory();
     }, pollIntervalMs);
     return () => clearInterval(timer);
-  }, [enabled, pageLive, pollIntervalMs, refresh, refreshBlocked, visible.mutating]);
+  }, [enabled, pageLive, pollIntervalMs, refreshInventory, refreshBlocked, visible.mutating]);
   useEffect5(() => {
     if (!enabled || !browserSessionId || !pageLive || refreshBlocked) return;
     let disposed = false;
     const heartbeat = () => {
+      if (!isCurrentSource()) return;
       void client.heartbeatBrowserSession(workspaceId, browserSessionId).catch(() => {
-        if (!disposed) void refresh();
+        if (!disposed) void refreshInventory();
       });
     };
     const timer = setInterval(heartbeat, 3e4);
@@ -984,148 +1100,216 @@ function useBrowserSession(options) {
       disposed = true;
       clearInterval(timer);
     };
-  }, [browserSessionId, client, enabled, pageLive, refresh, refreshBlocked, workspaceId]);
+  }, [
+    browserSessionId,
+    client,
+    enabled,
+    isCurrentSource,
+    pageLive,
+    refreshInventory,
+    refreshBlocked,
+    workspaceId
+  ]);
   const runMutation = useCallback5(
-    async (scopeBrowserSessionId, operation) => {
+    async (scopeBrowserSessionId, operation, selectionRead = false, changesInventory = false) => {
+      if (!enabled || !isCurrentSource()) {
+        throw new Error("The browser source is no longer selected.");
+      }
+      const selectionRevision = ++selectionRevisionRef.current;
       invalidateRefresh();
-      if (mutationRef.current.browserSessionId !== scopeBrowserSessionId) {
+      const readRequestId = requestRef.current.id;
+      if (mutationRef.current.browserSessionId !== scopeBrowserSessionId || mutationRef.current.source !== source) {
         mutationRef.current = {
           browserSessionId: scopeBrowserSessionId,
-          count: 0
+          source,
+          count: 0,
+          needsInventoryReconcile: false
         };
       }
       mutationRef.current.count += 1;
       setState(
-        (current) => current.browserSessionId === scopeBrowserSessionId ? { ...current, mutating: true, error: null } : current
+        (current) => isCurrentSource() && current.source === source && current.browserSessionId === scopeBrowserSessionId ? { ...current, mutating: true, error: null } : current
       );
       try {
-        return await operation();
+        return await operation(selectionRevision, readRequestId);
       } catch (cause) {
         const error = cause instanceof Error ? cause : new Error(String(cause));
-        setState(
-          (current) => current.browserSessionId === scopeBrowserSessionId ? { ...current, error } : current
-        );
+        if (!selectionRead || requestRef.current.id === readRequestId) {
+          setState(
+            (current) => isCurrentSource() && selectionRevisionRef.current === selectionRevision && current.source === source && current.browserSessionId === scopeBrowserSessionId ? { ...current, error } : current
+          );
+        }
         throw error;
       } finally {
-        if (mutationRef.current.browserSessionId === scopeBrowserSessionId) {
+        if (mutationRef.current.browserSessionId === scopeBrowserSessionId && mutationRef.current.source === source) {
+          if (changesInventory && (selectionRevisionRef.current !== selectionRevision || requestRef.current.id !== readRequestId)) {
+            mutationRef.current.needsInventoryReconcile = true;
+          }
           mutationRef.current.count = Math.max(0, mutationRef.current.count - 1);
           const mutating = mutationRef.current.count > 0;
           setState(
-            (current) => current.browserSessionId === scopeBrowserSessionId ? { ...current, mutating } : current
+            (current) => isCurrentSource() && current.source === source && current.browserSessionId === scopeBrowserSessionId ? { ...current, mutating } : current
           );
+          if (!mutating && mutationRef.current.needsInventoryReconcile && isCurrentSource()) {
+            mutationRef.current.needsInventoryReconcile = false;
+            void refreshInventory(false, false);
+          }
         }
       }
     },
-    [invalidateRefresh]
+    [enabled, invalidateRefresh, isCurrentSource, refreshInventory, source]
   );
   const selectTarget = useCallback5(
     async (targetId) => {
       if (!browserSessionId) throw new Error("No BrowserSession is selected.");
-      return await runMutation(browserSessionId, async () => {
-        let targets = visible.targets;
-        let target;
-        let observation;
-        try {
-          observation = await client.selectBrowserTarget(workspaceId, browserSessionId, targetId);
-          target = observation.target;
-        } catch (cause) {
-          if (!isMissingBrowserTarget(cause)) throw cause;
-          const response = await client.listBrowserTargets(workspaceId, browserSessionId);
-          targets = response.targets;
-          const fallback = chooseTarget(targets, null);
-          if (!fallback) {
-            selectedTargetIdRef.current = null;
-            observationRef.current = { browserSessionId, observation: null };
-            setState(
-              (current) => current.browserSessionId === browserSessionId ? {
-                ...current,
-                targets,
-                selectedTargetId: null,
-                observation: null
-              } : current
+      return await runMutation(
+        browserSessionId,
+        async (selectionRevision, readRequestId) => {
+          const isCurrentSelection = () => isCurrentSource() && selectionRevisionRef.current === selectionRevision;
+          const isCurrentSelectionRead = () => isCurrentSelection() && requestRef.current.id === readRequestId;
+          let targets = visible.targets;
+          let target;
+          let observation;
+          try {
+            observation = await client.selectBrowserTarget(workspaceId, browserSessionId, targetId);
+            target = observation.target;
+          } catch (cause) {
+            if (!isCurrentSelectionRead() || !isMissingBrowserTarget(cause)) throw cause;
+            const response = await client.listBrowserTargets(workspaceId, browserSessionId);
+            if (!isCurrentSelectionRead()) throw cause;
+            targets = response.targets;
+            const fallback = chooseTarget(targets, null);
+            if (!fallback) {
+              selectedTargetIdRef.current = null;
+              selectedTargetRef.current = null;
+              observationRef.current = { browserSessionId, observation: null };
+              setState(
+                (current) => isCurrentSelection() && current.source === source && current.browserSessionId === browserSessionId ? {
+                  ...current,
+                  targets,
+                  selectedTargetId: null,
+                  observation: null
+                } : current
+              );
+              throw cause;
+            }
+            observation = await client.selectBrowserTarget(
+              workspaceId,
+              browserSessionId,
+              fallback.id
             );
-            throw cause;
+            target = observation.target;
           }
-          observation = await client.selectBrowserTarget(
-            workspaceId,
-            browserSessionId,
-            fallback.id
+          if (!isCurrentSelectionRead()) return target;
+          selectedTargetIdRef.current = target.id;
+          selectedTargetRef.current = target;
+          observationRef.current = { browserSessionId, observation };
+          lastObservationAtRef.current = Date.now();
+          setState(
+            (current) => isCurrentSelection() && current.source === source && current.browserSessionId === browserSessionId ? {
+              ...current,
+              targets: replaceTarget(targets, target).map((candidate) => ({
+                ...candidate,
+                selected: candidate.id === target.id
+              })),
+              selectedTargetId: target.id,
+              observation
+            } : current
           );
-          target = observation.target;
-        }
-        selectedTargetIdRef.current = target.id;
-        observationRef.current = { browserSessionId, observation };
-        setState(
-          (current) => current.browserSessionId === browserSessionId ? {
-            ...current,
-            targets: targets.map((candidate) => ({
-              ...candidate,
-              selected: candidate.id === target.id
-            })),
-            selectedTargetId: target.id,
-            observation
-          } : current
-        );
-        return target;
-      });
+          return target;
+        },
+        true
+      );
     },
-    [browserSessionId, client, runMutation, visible.targets, workspaceId]
+    [browserSessionId, client, isCurrentSource, runMutation, source, visible.targets, workspaceId]
   );
   const openTarget = useCallback5(
     async (url) => {
       if (!browserSessionId) throw new Error("No BrowserSession is selected.");
-      return await runMutation(browserSessionId, async () => {
-        const observation = await client.openBrowserTarget(
-          workspaceId,
-          browserSessionId,
-          url === void 0 ? {} : { url }
-        );
-        const target = observation.target;
-        selectedTargetIdRef.current = target.id;
-        observationRef.current = { browserSessionId, observation };
-        setState(
-          (current) => current.browserSessionId === browserSessionId ? {
-            ...current,
-            targets: [
-              ...current.targets.map((candidate) => ({
-                ...candidate,
-                selected: false
-              })),
-              target
-            ],
-            selectedTargetId: target.id,
-            observation
-          } : current
-        );
-        return target;
-      });
+      return await runMutation(
+        browserSessionId,
+        async (selectionRevision, readRequestId) => {
+          const isCurrentSelection = () => isCurrentSource() && selectionRevisionRef.current === selectionRevision;
+          const isCurrentSelectionRead = () => isCurrentSelection() && requestRef.current.id === readRequestId;
+          const observation = await client.openBrowserTarget(
+            workspaceId,
+            browserSessionId,
+            url === void 0 ? {} : { url }
+          );
+          const target = observation.target;
+          if (!isCurrentSource()) return target;
+          if (!isCurrentSelectionRead()) return target;
+          selectedTargetIdRef.current = target.id;
+          selectedTargetRef.current = target;
+          observationRef.current = { browserSessionId, observation };
+          lastObservationAtRef.current = Date.now();
+          setState(
+            (current) => isCurrentSelection() && current.source === source && current.browserSessionId === browserSessionId ? {
+              ...current,
+              targets: [
+                ...current.targets.map((candidate) => ({
+                  ...candidate,
+                  selected: false
+                })),
+                target
+              ],
+              selectedTargetId: target.id,
+              observation
+            } : current
+          );
+          return target;
+        },
+        false,
+        true
+      );
     },
-    [browserSessionId, client, runMutation, workspaceId]
+    [browserSessionId, client, isCurrentSource, runMutation, source, workspaceId]
   );
   const closeTarget = useCallback5(
     async (targetId) => {
       if (!browserSessionId) throw new Error("No BrowserSession is selected.");
-      await runMutation(browserSessionId, async () => {
-        const response = await client.closeBrowserTarget(workspaceId, browserSessionId, targetId);
-        const selected = chooseTarget(response.targets, null);
-        const observation = selected ? await client.observeBrowserTarget(workspaceId, browserSessionId, selected.id) : null;
-        selectedTargetIdRef.current = selected?.id ?? null;
-        observationRef.current = { browserSessionId, observation };
-        setState(
-          (current) => current.browserSessionId === browserSessionId ? {
-            ...current,
-            targets: response.targets,
-            selectedTargetId: selected?.id ?? null,
-            observation
-          } : current
-        );
-      });
+      await runMutation(
+        browserSessionId,
+        async (selectionRevision, readRequestId) => {
+          const isCurrentSelection = () => isCurrentSource() && selectionRevisionRef.current === selectionRevision;
+          const isCurrentSelectionRead = () => isCurrentSelection() && requestRef.current.id === readRequestId;
+          const response = await client.closeBrowserTarget(workspaceId, browserSessionId, targetId);
+          if (!isCurrentSource()) return;
+          if (!isCurrentSelectionRead()) return;
+          const selected = chooseTarget(response.targets, selectedTargetIdRef.current);
+          const observed = selected ? await client.observeBrowserTarget(workspaceId, browserSessionId, selected.id) : null;
+          if (!isCurrentSource()) return;
+          if (!isCurrentSelectionRead()) return;
+          const observation = observed && selected && observed.browserSessionId === browserSessionId && observed.target.id === selected.id && observed.target.controllerGeneration === selected.controllerGeneration && observed.target.targetGeneration === selected.targetGeneration ? observed : null;
+          const currentTarget = observation?.target ?? selected;
+          selectedTargetIdRef.current = currentTarget?.id ?? null;
+          selectedTargetRef.current = currentTarget;
+          observationRef.current = { browserSessionId, observation };
+          if (observation) lastObservationAtRef.current = Date.now();
+          setState(
+            (current) => isCurrentSelection() && current.source === source && current.browserSessionId === browserSessionId ? {
+              ...current,
+              targets: currentTarget ? replaceTarget(response.targets, currentTarget) : response.targets,
+              selectedTargetId: currentTarget?.id ?? null,
+              observation
+            } : current
+          );
+        },
+        false,
+        true
+      );
     },
-    [browserSessionId, client, runMutation, workspaceId]
+    [browserSessionId, client, isCurrentSource, runMutation, source, workspaceId]
   );
   const dispatchAction = useCallback5(
-    async (action, operationId, frame) => {
+    async (action, operationId, frame, observationMode = "none") => {
       if (!browserSessionId) throw new Error("No BrowserSession is selected.");
+      if (!enabled || !isCurrentSource()) {
+        throw new Error("The browser source is no longer selected.");
+      }
+      if (!selectedTargetRef.current) {
+        throw new Error("The browser page is not ready for input.");
+      }
       if (frame && frame.browserSessionId !== browserSessionId) {
         throw new Error("The displayed browser frame belongs to another BrowserSession.");
       }
@@ -1135,7 +1319,7 @@ function useBrowserSession(options) {
         expectedTargetGeneration: frame.targetGeneration,
         expectedDocumentGeneration: frame.documentGeneration,
         expectedFrameId: frame.frameId
-      } : currentObservation ? {
+      } : currentObservation && sameObservationTarget(currentObservation, selectedTargetRef.current) ? {
         targetId: currentObservation.target.id,
         expectedTargetGeneration: currentObservation.target.targetGeneration,
         expectedDocumentGeneration: currentObservation.target.documentGeneration,
@@ -1144,47 +1328,113 @@ function useBrowserSession(options) {
       if (!fence) {
         throw new Error("The browser page is not ready for input.");
       }
+      const expectedControllerGeneration = frame?.controllerGeneration ?? currentObservation.target.controllerGeneration;
+      const selectionRevision = selectionRevisionRef.current;
+      const resultOrder = ++actionResultOrderRef.current.next;
+      let resultDocumentGeneration = fence.expectedDocumentGeneration;
+      const isCurrentResultView = () => {
+        const selected = selectedTargetRef.current;
+        return isCurrentSource() && selectionRevisionRef.current === selectionRevision && selected?.browserSessionId === browserSessionId && selected.id === fence.targetId && selected.controllerGeneration === expectedControllerGeneration && selected.targetGeneration === fence.expectedTargetGeneration && (selected.documentGeneration === fence.expectedDocumentGeneration || selected.documentGeneration === resultDocumentGeneration);
+      };
+      const canProjectResult = () => isCurrentResultView() && resultOrder >= actionResultOrderRef.current.settled;
+      const settleResult = () => {
+        if (!canProjectResult()) return false;
+        actionResultOrderRef.current.settled = resultOrder;
+        invalidateRefresh();
+        return true;
+      };
       try {
         const receipt = await client.actInBrowser(workspaceId, browserSessionId, {
           operationId,
           ...fence,
-          observationMode: "none",
+          observationMode,
           action
         });
-        if (receipt.observation) {
+        resultDocumentGeneration = receipt.observation?.target.documentGeneration ?? fence.expectedDocumentGeneration;
+        const settled = receipt.state === "completed" || receipt.state === "failed" || receipt.state === "outcome_unknown";
+        if (!canProjectResult() || settled && !settleResult()) return receipt;
+        const receivedObservation = receipt.observation;
+        const selectedTarget = selectedTargetRef.current;
+        let projectedObservation = null;
+        if (settled && receivedObservation && canProjectResult() && receipt.browserSessionId === browserSessionId && receipt.controllerGeneration === expectedControllerGeneration && receipt.targetId === fence.targetId && observationRef.current.browserSessionId === browserSessionId && receivedObservation.browserSessionId === browserSessionId && selectedTarget?.browserSessionId === browserSessionId && selectedTarget.id === fence.targetId && receivedObservation.target.id === fence.targetId && selectedTarget.controllerGeneration === expectedControllerGeneration && receivedObservation.target.controllerGeneration === expectedControllerGeneration && selectedTarget.targetGeneration === fence.expectedTargetGeneration && receivedObservation.target.targetGeneration === fence.expectedTargetGeneration && (selectedTarget.documentGeneration === fence.expectedDocumentGeneration || selectedTarget.documentGeneration === receivedObservation.target.documentGeneration)) {
+          projectedObservation = receivedObservation;
           observationRef.current = {
             browserSessionId,
-            observation: receipt.observation
+            observation: receivedObservation
           };
-          setState(
-            (current) => current.browserSessionId === browserSessionId ? {
-              ...current,
-              observation: receipt.observation,
-              targets: replaceTarget(current.targets, receipt.observation.target)
-            } : current
-          );
+          selectedTargetRef.current = receivedObservation.target;
+          lastObservationAtRef.current = Date.now();
         }
+        setState(
+          (current) => isCurrentResultView() && current.source === source && current.browserSessionId === browserSessionId && current.actionResultOrder <= resultOrder ? {
+            ...current,
+            actionResultOrder: settled ? resultOrder : current.actionResultOrder,
+            error: receipt.state === "completed" ? null : current.error,
+            inputFailure: receipt.state === "completed" ? current.inputFailure : {
+              operationId: receipt.operationId,
+              state: receipt.state,
+              error: receipt.error
+            },
+            ...projectedObservation ? {
+              observation: projectedObservation,
+              targets: replaceTarget(current.targets, projectedObservation.target)
+            } : {}
+          } : current
+        );
         return receipt;
       } catch (cause) {
         const error = cause instanceof Error ? cause : new Error(String(cause));
-        setState(
-          (current) => current.browserSessionId === browserSessionId ? { ...current, error } : current
-        );
+        if (settleResult()) {
+          setState(
+            (current) => isCurrentResultView() && current.source === source && current.browserSessionId === browserSessionId && current.actionResultOrder <= resultOrder ? { ...current, error, actionResultOrder: resultOrder } : current
+          );
+        }
         throw error;
       }
     },
-    [browserSessionId, client, workspaceId]
+    [browserSessionId, client, enabled, invalidateRefresh, isCurrentSource, source, workspaceId]
   );
   const act = useCallback5(
     async (action, operationId = crypto.randomUUID()) => await dispatchAction(action, operationId, null),
     [dispatchAction]
   );
   const actFromFrame = useCallback5(
-    async (action, frame, operationId = crypto.randomUUID()) => await dispatchAction(action, operationId, frame),
+    async (action, frame, operationId = crypto.randomUUID(), observationMode = "none") => await dispatchAction(action, operationId, frame, observationMode),
+    [dispatchAction]
+  );
+  const observeForInput = useCallback5(async () => {
+    const target = selectedTargetRef.current;
+    if (!enabled || !isCurrentSource()) {
+      throw new Error("The browser source is no longer selected.");
+    }
+    if (!browserSessionId || !target) throw new Error("No browser tab is selected.");
+    const observation = await client.observeBrowserTarget(workspaceId, browserSessionId, target.id);
+    if (!isCurrentSource() || observation.browserSessionId !== browserSessionId || !sameObservationTarget(observation, selectedTargetRef.current)) {
+      throw new Error("The browser page changed. Open the options again.");
+    }
+    return observation;
+  }, [browserSessionId, client, enabled, isCurrentSource, workspaceId]);
+  const actFromObservation = useCallback5(
+    async (action, observation) => {
+      if (!sameObservationTarget(observation, selectedTargetRef.current)) {
+        throw new Error("The browser page changed. Open the options again.");
+      }
+      return await dispatchAction(action, crypto.randomUUID(), {
+        browserSessionId: observation.browserSessionId,
+        controllerGeneration: observation.target.controllerGeneration,
+        targetId: observation.target.id,
+        targetGeneration: observation.target.targetGeneration,
+        documentGeneration: observation.target.documentGeneration,
+        frameId: observation.frameId
+      });
+    },
     [dispatchAction]
   );
   const diagnostics = useCallback5(
     async (diagnosticOptions = {}) => {
+      if (!enabled || !isCurrentSource()) {
+        throw new Error("The browser source is no longer selected.");
+      }
       const targetId = selectedTargetIdRef.current;
       if (!browserSessionId || !targetId) {
         throw new Error("No browser tab is selected.");
@@ -1196,16 +1446,19 @@ function useBrowserSession(options) {
         diagnosticOptions
       );
     },
-    [browserSessionId, client, workspaceId]
+    [browserSessionId, client, enabled, isCurrentSource, workspaceId]
   );
   const readClipboard = useCallback5(async () => {
+    if (!enabled || !isCurrentSource()) {
+      throw new Error("The browser source is no longer selected.");
+    }
     if (!browserSessionId) throw new Error("No BrowserSession is selected.");
     const clipboard = await client.readBrowserClipboard(workspaceId, browserSessionId);
-    if (clipboard.browserSessionId !== browserSessionId) {
+    if (!isCurrentSource() || clipboard.browserSessionId !== browserSessionId) {
       throw new Error("Browser clipboard belongs to another BrowserSession.");
     }
     return clipboard;
-  }, [browserSessionId, client, workspaceId]);
+  }, [browserSessionId, client, enabled, isCurrentSource, workspaceId]);
   return {
     session: visible.session,
     targets: visible.targets,
@@ -1214,7 +1467,10 @@ function useBrowserSession(options) {
     loading: visible.loading,
     mutating: visible.mutating,
     error: visible.error,
+    inputFailure: visible.inputFailure,
     refresh,
+    observeForInput,
+    actFromObservation,
     selectTarget,
     openTarget,
     closeTarget,
@@ -1233,7 +1489,9 @@ function emptyState4(browserSessionId, loading) {
     observation: null,
     loading,
     mutating: false,
-    error: null
+    error: null,
+    inputFailure: null,
+    actionResultOrder: 0
   };
 }
 function chooseTarget(targets, preferredId) {
@@ -1244,6 +1502,9 @@ function replaceTarget(targets, target) {
   next.push(target);
   return next.sort((left, right) => left.createdAt.localeCompare(right.createdAt));
 }
+function sameObservationTarget(observation, target) {
+  return target !== null && observation.browserSessionId === target.browserSessionId && observation.target.id === target.id && observation.target.controllerGeneration === target.controllerGeneration && observation.target.targetGeneration === target.targetGeneration && observation.target.documentGeneration === target.documentGeneration;
+}
 function isMissingBrowserTarget(error) {
   return error instanceof OpenGeniApiError && error.code === "target_not_found";
 }
@@ -1264,14 +1525,16 @@ function useBrowserSessions(options = {}) {
     id: 0,
     controller: null
   });
+  const loadQueueRef = useRef6(null);
   const mountedRef = useRef6(true);
   const visibleState = state.workspaceId === workspaceId ? state : emptyState5(workspaceId, enabled);
   const cancelLoad = useCallback6(() => {
+    loadQueueRef.current = null;
     const id = requestRef.current.id + 1;
     requestRef.current.controller?.abort();
     requestRef.current = { id, controller: null };
   }, []);
-  const load = useCallback6(
+  const loadOnce = useCallback6(
     async (foreground) => {
       if (!enabled) return;
       const id = requestRef.current.id + 1;
@@ -1317,6 +1580,30 @@ function useBrowserSessions(options = {}) {
     },
     [client, enabled, workspaceId]
   );
+  const load = useCallback6(
+    (foreground) => {
+      const current = loadQueueRef.current;
+      if (current) {
+        current.pending = true;
+        return current.promise;
+      }
+      const queue = { pending: false, promise: Promise.resolve() };
+      loadQueueRef.current = queue;
+      queue.promise = Promise.resolve().then(async () => {
+        while (loadQueueRef.current === queue) {
+          queue.pending = false;
+          await loadOnce(foreground);
+          foreground = false;
+          if (!queue.pending) break;
+        }
+        if (loadQueueRef.current === queue) loadQueueRef.current = null;
+      }).finally(() => {
+        if (loadQueueRef.current === queue) loadQueueRef.current = null;
+      });
+      return queue.promise;
+    },
+    [loadOnce]
+  );
   const refresh = useCallback6(async () => await load(false), [load]);
   useEffect6(() => {
     mountedRef.current = true;
@@ -1644,11 +1931,270 @@ function browserKey(event, hostPlatform = interactionHostPlatform()) {
   return parts.join("+");
 }
 
-// src/components/browser-viewer.tsx
+// src/components/browser-select-control.tsx
+import { useEffect as useEffect8, useLayoutEffect, useRef as useRef8, useState as useState8 } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function focusedSelect(observation) {
+  if (observation.semantic?.kind !== "snapshot") return null;
+  const pending = [...observation.semantic.roots];
+  while (pending.length) {
+    const node = pending.pop();
+    if (node.children) pending.push(...node.children);
+    if (node.ref !== observation.focusedRef || !node.actions.includes("select") || node.native?.platform !== "dom")
+      continue;
+    const data = node.native.data;
+    if (!data || data.kind !== "native-select" || typeof data.multiple !== "boolean" || typeof data.disabled !== "boolean" || !Array.isArray(data.options) || data.options.length > 200)
+      return null;
+    if (data.options.some(
+      (option) => !option || typeof option.value !== "string" || typeof option.label !== "string" || typeof option.selected !== "boolean" || typeof option.disabled !== "boolean"
+    ))
+      return null;
+    return { node, control: data };
+  }
+  return null;
+}
+function BrowserSelectControl(props) {
+  const [snapshot, setSnapshot] = useState8(null);
+  const [open, setOpen] = useState8(false);
+  const [busy, setBusy] = useState8(false);
+  const [error, setError] = useState8(null);
+  const [values, setValues] = useState8([]);
+  const [anchor, setAnchor] = useState8(null);
+  const popupRef = useRef8(null);
+  const [position, setPosition] = useState8(null);
+  const panelRef = useRef8(null);
+  const request = useRef8(0);
+  const optionKeys = useRef8(/* @__PURE__ */ new WeakMap());
+  const nextOptionKey = useRef8(0);
+  const optionKey = (option) => {
+    let key = optionKeys.current.get(option);
+    if (key === void 0) {
+      key = ++nextOptionKey.current;
+      optionKeys.current.set(option, key);
+    }
+    return key;
+  };
+  useEffect8(
+    () => () => {
+      request.current += 1;
+    },
+    []
+  );
+  useEffect8(() => {
+    if (props.activation === void 0) return;
+    ++request.current;
+    const observation = props.activation?.observation;
+    const selected2 = observation ? focusedSelect(observation) : null;
+    setSnapshot(selected2 && observation ? observation : null);
+    setAnchor(selected2 ? props.activation.anchor : null);
+    setOpen(Boolean(selected2));
+    setBusy(false);
+    setError(null);
+    setValues(
+      selected2?.control.options.filter((option) => option.selected).map((option) => option.value) ?? []
+    );
+  }, [props.activation]);
+  useEffect8(() => {
+    if (open && !busy) panelRef.current?.focus({ preventScroll: true });
+  }, [open, busy]);
+  useLayoutEffect(() => {
+    if (!anchor || !open) {
+      setPosition(null);
+      return;
+    }
+    const place = () => {
+      const popup = popupRef.current;
+      const parent = popup?.parentElement;
+      if (!popup || !parent) return;
+      setPosition({
+        x: Math.max(12, Math.min(anchor.x, parent.clientWidth - popup.offsetWidth - 12)),
+        y: Math.max(12, Math.min(anchor.y, parent.clientHeight - popup.offsetHeight - 12)),
+        height: Math.max(48, parent.clientHeight - 60)
+      });
+    };
+    place();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(place);
+    if (popupRef.current?.parentElement) observer?.observe(popupRef.current.parentElement);
+    if (popupRef.current) observer?.observe(popupRef.current);
+    return () => observer?.disconnect();
+  }, [anchor, open, busy, snapshot, error]);
+  const selected = snapshot ? focusedSelect(snapshot) : null;
+  const ambiguousValue = (value) => (selected?.control.options.filter((option) => option.value === value || option.label === value).length ?? 0) !== 1;
+  const load = async () => {
+    const current = ++request.current;
+    setOpen(true);
+    setBusy(true);
+    setSnapshot(null);
+    setError(null);
+    setAnchor(null);
+    try {
+      const observation = await props.observe();
+      if (current !== request.current) return;
+      setSnapshot(observation);
+      setValues(
+        focusedSelect(observation)?.control.options.filter((option) => option.selected).map((option) => option.value) ?? []
+      );
+    } catch (cause) {
+      if (current === request.current)
+        setError(cause instanceof Error ? cause.message : "Could not read options.");
+    } finally {
+      if (current === request.current) setBusy(false);
+    }
+  };
+  const apply = async (next) => {
+    if (!snapshot || !selected || busy) return;
+    const current = ++request.current;
+    setBusy(true);
+    setError(null);
+    try {
+      const receipt = await props.act(
+        { type: "select", locator: { kind: "ref", ref: selected.node.ref }, values: next },
+        snapshot
+      );
+      if (receipt.state !== "completed")
+        throw new Error(receipt.error?.message ?? "Selection did not complete.");
+      if (current === request.current) {
+        setOpen(false);
+        setSnapshot(null);
+        props.onDismiss?.();
+      }
+    } catch (cause) {
+      if (current === request.current) {
+        setError(
+          cause instanceof Error ? cause.message : "Selection failed. Read the options again."
+        );
+        setSnapshot(null);
+      }
+    } finally {
+      if (current === request.current) setBusy(false);
+    }
+  };
+  if (props.manualFallback === false && !open) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: popupRef,
+      className: "absolute z-10 max-w-[calc(100%-1.5rem)] text-og-control",
+      style: anchor && open ? {
+        left: position?.x ?? anchor.x,
+        top: position?.y ?? anchor.y
+      } : { bottom: 12, left: 12 },
+      children: [
+        props.manualFallback !== false && (!anchor || !open) || error ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rounded-og-sm border border-og-border bg-og-bg px-2 py-1 text-og-fg",
+            disabled: busy,
+            onClick: () => void load(),
+            "aria-expanded": open,
+            children: "Choose option"
+          }
+        ) : null,
+        open ? /* @__PURE__ */ jsxs(
+          "section",
+          {
+            ref: panelRef,
+            tabIndex: -1,
+            "aria-label": "Page selection options",
+            style: position ? { maxHeight: Math.min(288, position.height) } : void 0,
+            onKeyDown: (event) => {
+              if (event.key !== "Escape") return;
+              event.preventDefault();
+              event.stopPropagation();
+              ++request.current;
+              setOpen(false);
+              setSnapshot(null);
+              setBusy(false);
+              props.onDismiss?.();
+            },
+            className: "mt-1 max-h-72 w-72 max-w-full overflow-auto rounded-og-sm border border-og-border bg-og-bg p-3 text-og-fg shadow-lg",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx("strong", { children: selected?.node.name || "Page options" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: busy,
+                    onClick: () => {
+                      ++request.current;
+                      setOpen(false);
+                      setSnapshot(null);
+                      props.onDismiss?.();
+                    },
+                    "aria-label": "Close page options",
+                    children: "Close"
+                  }
+                )
+              ] }),
+              busy ? /* @__PURE__ */ jsx("p", { role: "status", children: "Loading\u2026" }) : error ? /* @__PURE__ */ jsx("p", { role: "alert", children: error }) : !selected ? /* @__PURE__ */ jsx("p", { children: "Click a dropdown in the page, then choose \u201CChoose option\u201D." }) : selected.control.disabled ? /* @__PURE__ */ jsx("p", { children: "This control is disabled." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                selected.control.options.map((option) => {
+                  const ambiguous = ambiguousValue(option.value);
+                  const disabled = busy || option.disabled || ambiguous;
+                  return selected.control.multiple ? /* @__PURE__ */ jsxs("label", { className: "my-1 flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        disabled,
+                        checked: values.includes(option.value),
+                        onChange: (event) => setValues(
+                          event.target.checked ? [...values, option.value] : values.filter((value) => value !== option.value)
+                        )
+                      }
+                    ),
+                    option.label || "(empty)",
+                    ambiguous ? " (ambiguous value)" : ""
+                  ] }, optionKey(option)) : /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      disabled,
+                      "aria-pressed": option.selected,
+                      className: "my-1 block w-full rounded-og-sm border border-og-border px-2 py-1 text-left disabled:opacity-50",
+                      onClick: () => void apply([option.value]),
+                      children: [
+                        option.label || "(empty)",
+                        option.selected ? " \u2713" : "",
+                        ambiguous ? " (ambiguous value)" : ""
+                      ]
+                    },
+                    optionKey(option)
+                  );
+                }),
+                selected.control.multiple ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: busy || values.some(ambiguousValue),
+                    onClick: () => void apply(values),
+                    children: "Apply selection"
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/browser-viewer.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var STALE_BROWSER_END_MAX_ATTEMPTS = 3;
+var STALE_BROWSER_END_RETRY_BASE_MS = 5e3;
+function staleBrowserEndRetryDelayMs(cause, failedAttempts) {
+  const status = cause?.status;
+  if (typeof status === "number" && status >= 400 && status < 500) return null;
+  if (failedAttempts >= STALE_BROWSER_END_MAX_ATTEMPTS) return null;
+  return STALE_BROWSER_END_RETRY_BASE_MS * 2 ** (failedAttempts - 1);
+}
 function BrowserViewer({
   sessionId,
   enabled = true,
+  active = true,
   className,
   onNotify,
   webSocketFactory,
@@ -1682,9 +2228,10 @@ function BrowserViewer({
     () => attachedChromeGenerationLoss(registry.sessions),
     [registry.sessions]
   );
-  const endedGenerationLossRef = useRef8(/* @__PURE__ */ new Set());
+  const endedGenerationLossRef = useRef9(/* @__PURE__ */ new Set());
+  const endStaleBrowserAttemptsRef = useRef9(/* @__PURE__ */ new Map());
   const endStaleBrowser = registry.end;
-  useEffect8(() => {
+  useEffect9(() => {
     if (!enabled) return;
     for (const session of registry.sessions) {
       if (session.lifecycle !== "lost" || session.failureCode !== "controller_transition_expired" || session.placement.kind !== "attached_device") {
@@ -1692,20 +2239,22 @@ function BrowserViewer({
       }
       if (endedGenerationLossRef.current.has(session.id)) continue;
       endedGenerationLossRef.current.add(session.id);
-      void endStaleBrowser(session.id).catch(() => {
-        endedGenerationLossRef.current.delete(session.id);
+      void endStaleBrowser(session.id).catch((cause) => {
+        const attempts = (endStaleBrowserAttemptsRef.current.get(session.id) ?? 0) + 1;
+        endStaleBrowserAttemptsRef.current.set(session.id, attempts);
+        const delay = staleBrowserEndRetryDelayMs(cause, attempts);
+        if (delay === null) return;
+        setTimeout(() => endedGenerationLossRef.current.delete(session.id), delay);
       });
     }
   }, [enabled, endStaleBrowser, registry.sessions]);
-  const replacementChromeDevice = useMemo2(() => {
-    if (!attachedGenerationLoss) return null;
-    return attached.devices.find((candidate) => candidate.id === attachedGenerationLoss.deviceId) ?? null;
-  }, [attached.devices, attachedGenerationLoss]);
   const relevant = useMemo2(
     () => registry.relevantSessions.filter((session) => isLiveBrowser2(session)),
     [registry.relevantSessions]
   );
-  const [selection, setSelection] = useState8(
+  const latestRelevantBrowser = registry.relevantSessions[0];
+  const unavailableBrowser = latestRelevantBrowser?.lifecycle === "lost" || latestRelevantBrowser?.lifecycle === "failed" ? latestRelevantBrowser : void 0;
+  const [selection, setSelection] = useState9(
     () => initialBrowserSessionId ? { sessionId: initialBrowserSessionId, pinned: true } : null
   );
   const selectBrowserSession = useCallback8(
@@ -1720,16 +2269,17 @@ function BrowserViewer({
     enabled,
     resourceKind: "browser_session"
   });
-  const [creating, setCreating] = useState8(false);
-  const [savingProfile, setSavingProfile] = useState8(false);
-  const [baseRevisionOrdinal, setBaseRevisionOrdinal] = useState8(null);
-  const [profileHistory, setProfileHistory] = useState8(null);
-  const [resumeAttempt, setResumeAttempt] = useState8(null);
-  const resumeAttemptsRef = useRef8(/* @__PURE__ */ new Map());
-  const previousSessionIdRef = useRef8(sessionId);
-  const seenInterventionIdsRef = useRef8(/* @__PURE__ */ new Set());
-  const diagnosticRequestRef = useRef8(0);
-  const [diagnosticsView, setDiagnosticsView] = useState8(null);
+  const [creating, setCreating] = useState9(false);
+  const [savingProfile, setSavingProfile] = useState9(false);
+  const [baseRevisionOrdinal, setBaseRevisionOrdinal] = useState9(null);
+  const [profileHistory, setProfileHistory] = useState9(null);
+  const [resumeAttempt, setResumeAttempt] = useState9(null);
+  const resumeAttemptsRef = useRef9(/* @__PURE__ */ new Map());
+  const previousSessionIdRef = useRef9(sessionId);
+  const seenInterventionIdsRef = useRef9(/* @__PURE__ */ new Set());
+  const diagnosticRequestRef = useRef9(0);
+  const viewportFocusHandoffRef = useRef9(null);
+  const [diagnosticsView, setDiagnosticsView] = useState9(null);
   const notifyError = useCallback8(
     (cause, fallback) => {
       const message = cause instanceof Error ? cause.message : fallback;
@@ -1737,7 +2287,7 @@ function BrowserViewer({
     },
     [onNotify]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (previousSessionIdRef.current !== sessionId) {
       previousSessionIdRef.current = sessionId;
       setSelection(
@@ -1745,7 +2295,7 @@ function BrowserViewer({
       );
     }
   }, [initialBrowserSessionId, sessionId]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!enabled || registry.loading) return;
     const selectedStillLive = liveSessions.some((session) => session.id === selection?.sessionId);
     if (selection?.pinned && selectedStillLive) return;
@@ -1776,6 +2326,7 @@ function BrowserViewer({
   );
   const controllerReady = selectedRegistrySession?.lifecycle === "active";
   const resumeSession = registry.resume;
+  const [hasLiveFrame, setHasLiveFrame] = useState9(false);
   const wakeBrowser = useCallback8(
     async (session, retry = false) => {
       const current = resumeAttemptsRef.current.get(session.id);
@@ -1814,25 +2365,22 @@ function BrowserViewer({
     },
     [notifyError, resumeSession]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (!selectedRegistrySession) return;
     if (selectedRegistrySession.lifecycle === "active") {
       resumeAttemptsRef.current.delete(selectedRegistrySession.id);
       setResumeAttempt(
         (visible) => visible?.sessionId === selectedRegistrySession.id ? null : visible
       );
-      return;
     }
-    if (selectedRegistrySession.lifecycle === "suspended") {
-      void wakeBrowser(selectedRegistrySession);
-    }
-  }, [selectedRegistrySession, wakeBrowser]);
+  }, [selectedRegistrySession]);
   const browser = useBrowserSession({
     ...override,
     browserSessionId: selection?.sessionId ?? null,
-    enabled: enabled && selection !== null && controllerReady
+    enabled: enabled && selection !== null && controllerReady,
+    semanticObservationEnabled: active && !hasLiveFrame
   });
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isSourcePlacementChangedError(browser.error, "browser_session")) return;
     void refreshRegistry();
   }, [browser.error, refreshRegistry]);
@@ -1842,7 +2390,7 @@ function BrowserViewer({
     enabled: enabled && diagnosticsView !== null && controllerReady && browser.session?.capabilities.downloads === true
   });
   const loadBrowserDiagnostics = browser.diagnostics;
-  useEffect8(() => {
+  useEffect9(() => {
     for (const intervention of interventions.interventions) {
       if (seenInterventionIdsRef.current.has(intervention.id)) continue;
       seenInterventionIdsRef.current.add(intervention.id);
@@ -1874,13 +2422,26 @@ function BrowserViewer({
     stream: { format: "jpeg", quality: 76, maxWidth: 1920, maxHeight: 1200 },
     ...webSocketFactory ? { webSocketFactory } : {}
   });
-  const displayedFrame = frameMatchesSelectedTarget(
+  const receivedFrame = frameMatchesSelectedTarget(
     frames.frame,
     browser.session,
     browser.selectedTarget
   ) ? frames.frame : null;
-  const supportsLiveFrames = browser.session?.capabilities.liveFrames === true;
-  const displayConnectionState = supportsLiveFrames ? frames.state === "live" && !displayedFrame ? "connecting" : frames.state : "semantic";
+  const displayedFrame = useMemo2(
+    () => receivedFrame ? { ...receivedFrame, data: receivedFrame.data.slice().buffer } : null,
+    [receivedFrame]
+  );
+  const frameIsLive = frames.state === "live" && displayedFrame !== null;
+  useEffect9(() => {
+    setHasLiveFrame(frameIsLive);
+  }, [frameIsLive]);
+  const supportsLiveFrames = (browser.session ?? selectedRegistrySession)?.capabilities.liveFrames === true;
+  const controlUnavailable = isInteractionControlUnavailable(browser.error);
+  const connectionError = controlUnavailable ? browser.error : frames.error ?? browser.error;
+  const selectedPlacement = (browser.session ?? selectedRegistrySession)?.placement;
+  const selectedChromeGenerationLoss = selectedPlacement?.kind === "attached_device" && isAttachedChromeGenerationLossError(connectionError);
+  const replacementChromeDevice = selectedChromeGenerationLoss && selectedPlacement.kind === "attached_device" ? attached.devices.find((candidate) => candidate.id === selectedPlacement.deviceId) : null;
+  const displayConnectionState = connectionError && (!frameIsLive || controlUnavailable) ? "error" : !browser.session ? "connecting" : supportsLiveFrames ? frames.state === "live" && !displayedFrame ? "connecting" : frames.state : "semantic";
   const selectedProfile = useMemo2(
     () => profiles.identities.find(
       (identity) => identity.id === (browser.session?.identityId ?? selectedRegistrySession?.identityId)
@@ -1893,7 +2454,7 @@ function BrowserViewer({
     ) : [],
     [selectedProfile, siteAuth.connections]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     diagnosticRequestRef.current += 1;
     setDiagnosticsView(null);
   }, [browser.session?.id, browser.selectedTarget?.id]);
@@ -1943,7 +2504,7 @@ function BrowserViewer({
     },
     [downloads, onNotify]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     const identityId = browser.session?.identityId ?? selectedRegistrySession?.identityId;
     const revisionId = browser.session?.baseRevisionId ?? selectedRegistrySession?.baseRevisionId;
     if (!identityId) {
@@ -2126,26 +2687,29 @@ function BrowserViewer({
   );
   if (!enabled) return null;
   if (registry.loading && liveSessions.length === 0) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       BrowserNotice,
       {
-        icon: /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "animate-spin" }),
+        icon: /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "animate-spin" }),
         text: "Finding browsers\u2026",
         ...className ? { className } : {}
       }
     );
   }
   if (liveSessions.length === 0) {
-    if (renderEmpty) return /* @__PURE__ */ jsx(Fragment, { children: renderEmpty(() => createBrowser(), creating) });
-    return /* @__PURE__ */ jsx(
+    if (renderEmpty && !unavailableBrowser)
+      return /* @__PURE__ */ jsx2(Fragment2, { children: renderEmpty(() => createBrowser(), creating) });
+    return /* @__PURE__ */ jsx2(
       "div",
       {
         className: cn("flex h-full min-h-0 items-center justify-center bg-og-bg p-6", className),
-        children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm text-center", children: [
-          /* @__PURE__ */ jsx("span", { className: "mx-auto grid size-10 place-items-center rounded-og-md border border-og-border bg-og-surface-1 text-og-muted", children: /* @__PURE__ */ jsx(Globe2Icon, { className: "size-4.5" }) }),
-          /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: attachedGenerationLoss ? "Chrome reconnected\u2014open a fresh browser/desktop." : "No browser open" }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: attachedGenerationLoss ? "This Chrome profile is live again, but the previous browser cannot move to the new connection. Use Browser \u2192 New browser \u2192 Connected Chrome." : "A browser appears here when this agent\u2014or another agent in the workspace\u2014opens one." }),
-          /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs2("div", { className: "max-w-sm text-center", children: [
+          /* @__PURE__ */ jsx2("span", { className: "mx-auto grid size-10 place-items-center rounded-og-md border border-og-border bg-og-surface-1 text-og-fg-muted", children: /* @__PURE__ */ jsx2(Globe2Icon, { className: "size-4.5" }) }),
+          unavailableBrowser && !attachedGenerationLoss ? /* @__PURE__ */ jsx2(BrowserUnavailableNotice, { session: unavailableBrowser }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            /* @__PURE__ */ jsx2("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: attachedGenerationLoss ? "Chrome reconnected\u2014open a fresh browser/desktop." : "No browser open" }),
+            /* @__PURE__ */ jsx2("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: attachedGenerationLoss ? "This Chrome profile is live again, but the previous browser cannot move to the new connection. Use Browser \u2192 New browser \u2192 Connected Chrome." : "A browser appears here when this agent\u2014or another agent in the workspace\u2014opens one." })
+          ] }),
+          /* @__PURE__ */ jsx2(
             BrowserLaunchMenu,
             {
               attachedBridges: onlineAttachedBridges,
@@ -2159,17 +2723,17 @@ function BrowserViewer({
               prominent: true
             }
           ),
-          registry.error ? /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-control text-og-status-error", children: registry.error.message }) : null
+          registry.error ? /* @__PURE__ */ jsx2("p", { className: "mt-3 text-og-control text-og-danger", children: registry.error.message }) : null
         ] })
       }
     );
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cn("relative flex h-full min-h-0 flex-col overflow-hidden bg-og-bg", className),
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           BrowserToolbar,
           {
             sessions: liveSessions,
@@ -2199,7 +2763,7 @@ function BrowserViewer({
             setupUrl: browserExtensionSetupUrl
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           InteractionInterventionBanner,
           {
             interventions: selectedInterventions,
@@ -2209,22 +2773,23 @@ function BrowserViewer({
             onResolve: resolveIntervention
           }
         ),
-        !selectedRegistrySession ? /* @__PURE__ */ jsx(
+        !selectedRegistrySession ? /* @__PURE__ */ jsx2(
           BrowserUnselectedPanel,
           {
+            unavailableBrowser,
             peerCount: liveSessions.length,
             creating,
             onCreate: () => createBrowser()
           }
-        ) : !controllerReady ? /* @__PURE__ */ jsx(
+        ) : !controllerReady ? /* @__PURE__ */ jsx2(
           BrowserLifecyclePanel,
           {
             session: selectedRegistrySession,
             attempt: resumeAttempt?.sessionId === selectedRegistrySession.id ? resumeAttempt.attempt : null,
             onResume: () => void wakeBrowser(selectedRegistrySession, true)
           }
-        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(
             BrowserTabs,
             {
               targets: browser.targets,
@@ -2236,12 +2801,28 @@ function BrowserViewer({
               onOpen: () => void browser.openTarget(HUMAN_BROWSER_HOME_URL).catch((cause) => notifyError(cause, "Could not open a tab."))
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             BrowserAddressBar,
             {
               target: browser.selectedTarget,
               loading: browser.loading || browser.mutating || savingProfile,
               onNavigate: (url) => void browser.act({ type: "navigate", url }).catch((cause) => notifyError(cause, "Could not navigate.")),
+              onHistory: async (direction) => {
+                try {
+                  const action = { type: "history", direction };
+                  if (receivedFrame) await browser.actFromFrame(action, receivedFrame);
+                  else {
+                    if (!browser.observation)
+                      throw new Error("The browser page is not ready for input.");
+                    await browser.actFromObservation(action, browser.observation);
+                  }
+                } catch (cause) {
+                  notifyError(
+                    cause,
+                    direction === "back" ? "Could not go back." : "Could not go forward."
+                  );
+                }
+              },
               onReload: () => {
                 const url = browser.selectedTarget?.url;
                 if (url)
@@ -2249,42 +2830,116 @@ function BrowserViewer({
               }
             }
           ),
-          /* @__PURE__ */ jsx(
-            BrowserViewport,
+          browser.inputFailure ? /* @__PURE__ */ jsxs2(
+            "div",
             {
-              frame: displayedFrame,
-              connectionState: displayConnectionState,
-              supportsLiveFrames,
-              connectionError: frames.error,
-              observation: browser.observation,
-              mutating: browser.mutating || savingProfile,
-              activityLabel: savingProfile ? "Saving browser version\u2026" : void 0,
-              clipboardEnabled: browser.session?.capabilities.clipboard === true,
-              onAction: async (action, frame) => {
-                const receipt = frame ? await browser.actFromFrame(action, frame) : await browser.act(action);
-                if (receipt.state !== "completed") {
-                  throw new Error(receipt.error?.message ?? "Browser input did not complete.");
-                }
-                return receipt;
-              },
-              onReadClipboard: browser.readClipboard,
-              onReconnect: attachedGenerationLoss || isAttachedChromeGenerationLossError(frames.error) ? () => {
-                if (replacementChromeDevice) {
-                  createBrowser({ kind: "attached", device: replacementChromeDevice });
-                }
-              } : frames.reconnect,
-              reconnectLabel: (attachedGenerationLoss || isAttachedChromeGenerationLossError(frames.error)) && replacementChromeDevice ? "Open a fresh Connected Chrome" : void 0,
-              reconnectMessage: attachedGenerationLoss || isAttachedChromeGenerationLossError(frames.error) ? "Chrome reconnected\u2014open a fresh browser/desktop." : void 0,
-              onError: (cause) => notifyError(cause, "Browser input failed.")
+              role: "alert",
+              "aria-label": "Browser input status",
+              className: "flex shrink-0 items-center gap-2 border-t border-og-border bg-og-surface-1 px-3 py-2 text-og-xs",
+              children: [
+                /* @__PURE__ */ jsx2(CircleAlertIcon, { className: "size-4 shrink-0 text-og-status-failed" }),
+                /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "font-medium", children: browser.inputFailure.state === "failed" ? "Browser input failed" : "Input result unknown" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-og-fg-subtle", children: browser.inputFailure.error?.message ?? "Inspect the page before continuing." })
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => void browser.refresh(),
+                    className: "shrink-0 rounded border border-og-border px-2 py-1 transition hover:bg-og-surface-2",
+                    children: "Check browser"
+                  }
+                )
+              ]
             }
-          ),
-          /* @__PURE__ */ jsx(
+          ) : null,
+          /* @__PURE__ */ jsxs2("div", { className: "relative flex min-h-0 min-w-0 flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsx2(
+              BrowserViewport,
+              {
+                focusHandoffRef: viewportFocusHandoffRef,
+                focusScope: JSON.stringify([
+                  selection?.sessionId,
+                  browser.selectedTarget?.id,
+                  browser.selectedTarget?.targetGeneration
+                ]),
+                frame: displayedFrame,
+                connectionState: displayConnectionState,
+                supportsLiveFrames,
+                connectionError,
+                controlUnavailable,
+                observation: browser.observation,
+                mutating: browser.mutating || savingProfile,
+                activityLabel: savingProfile ? "Saving browser version\u2026" : void 0,
+                clipboardEnabled: browser.session?.capabilities.clipboard === true,
+                inputBatchAttachment: frames.attachment,
+                onAction: async (action, frame) => {
+                  const focusedInput = frame && action.type === "pointer" && action.action === "click" && (action.button === void 0 || action.button === "left") && frames.attachment?.focusedInputObservations === true && frames.attachment.browserSessionId === frame.browserSessionId && frames.attachment.controllerGeneration === frame.controllerGeneration && frames.attachment.targetId === frame.targetId && Date.parse(frames.attachment.expiresAt) > Date.now();
+                  const receipt = frame ? await browser.actFromFrame(
+                    action,
+                    frame,
+                    void 0,
+                    focusedInput ? "input" : "none"
+                  ) : await browser.act(action);
+                  if (receipt.state !== "completed") {
+                    throw new Error(receipt.error?.message ?? "Browser input did not complete.");
+                  }
+                  return receipt;
+                },
+                onReadClipboard: browser.readClipboard,
+                onObserveForInput: browser.observeForInput,
+                onSelectFromObservation: browser.actFromObservation,
+                onReconnect: selectedChromeGenerationLoss ? () => {
+                  if (replacementChromeDevice) {
+                    createBrowser({ kind: "attached", device: replacementChromeDevice });
+                  }
+                } : () => {
+                  void browser.refresh();
+                  frames.reconnect();
+                },
+                reconnectLabel: selectedChromeGenerationLoss && replacementChromeDevice ? "Open a fresh Connected Chrome" : void 0,
+                reconnectMessage: selectedChromeGenerationLoss ? "Chrome reconnected\u2014open a fresh browser/desktop." : void 0,
+                onError: (cause) => notifyError(cause, "Browser input failed.")
+              },
+              JSON.stringify([
+                selection?.sessionId,
+                browser.selectedTarget?.id,
+                browser.selectedTarget?.targetGeneration,
+                browser.selectedTarget?.documentGeneration,
+                frames.attachment?.controllerGeneration
+              ])
+            ),
+            diagnosticsView ? /* @__PURE__ */ jsx2(
+              BrowserDiagnosticsDrawer,
+              {
+                session: browser.session,
+                profile: selectedProfile,
+                target: browser.selectedTarget,
+                observation: browser.observation,
+                baseRevisionOrdinal,
+                state: diagnosticsView,
+                downloads: downloads.downloads,
+                downloadsEnabled: browser.session?.capabilities.downloads === true,
+                downloadsLoading: downloads.loading,
+                downloadsRefreshing: downloads.refreshing,
+                downloadsError: downloads.error,
+                savingDownloadIds: downloads.savingDownloadIds,
+                onSaveDownload: saveDownload,
+                onRefreshDownloads: () => void downloads.refresh(),
+                onRefresh: refreshDiagnostics,
+                onClose: closeDiagnostics
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx2(
             BrowserStatusBar,
             {
               session: browser.session,
               profile: selectedProfile,
               target: browser.selectedTarget,
               observation: browser.observation,
+              inputFailure: browser.inputFailure,
               connectionState: displayConnectionState,
               refreshing: registry.refreshing,
               diagnosticsOpen: diagnosticsView !== null,
@@ -2295,28 +2950,7 @@ function BrowserViewer({
               onDiagnostics: diagnosticsView ? closeDiagnostics : loadDiagnostics
             }
           )
-        ] }),
-        diagnosticsView ? /* @__PURE__ */ jsx(
-          BrowserDiagnosticsDrawer,
-          {
-            session: browser.session,
-            profile: selectedProfile,
-            target: browser.selectedTarget,
-            observation: browser.observation,
-            baseRevisionOrdinal,
-            state: diagnosticsView,
-            downloads: downloads.downloads,
-            downloadsEnabled: browser.session?.capabilities.downloads === true,
-            downloadsLoading: downloads.loading,
-            downloadsRefreshing: downloads.refreshing,
-            downloadsError: downloads.error,
-            savingDownloadIds: downloads.savingDownloadIds,
-            onSaveDownload: saveDownload,
-            onRefreshDownloads: () => void downloads.refresh(),
-            onRefresh: refreshDiagnostics,
-            onClose: closeDiagnostics
-          }
-        ) : null
+        ] })
       ]
     }
   );
@@ -2325,23 +2959,23 @@ function BrowserLifecyclePanel(props) {
   const failed = props.attempt?.error ?? null;
   const label = failed ? "Browser could not reopen" : props.session.lifecycle === "suspending" ? "Saving browser state\u2026" : props.session.lifecycle === "restoring" || props.attempt?.running ? "Opening browser\u2026" : props.session.lifecycle === "starting" ? "Starting browser\u2026" : "Browser is sleeping";
   const detail = failed ? failed.message : props.session.lifecycle === "suspended" ? "Its private state is saved. Opening it creates a fresh, isolated browser process." : "The browser will reconnect here when it is ready.";
-  return /* @__PURE__ */ jsx("div", { className: "grid min-h-0 flex-1 place-items-center bg-og-bg p-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm", children: [
-    /* @__PURE__ */ jsx("span", { className: "mx-auto grid size-10 place-items-center rounded-og-md border border-og-border bg-og-surface-1 text-og-muted", children: failed ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4.5 text-og-status-error" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4.5 animate-spin" }) }),
-    /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: label }),
-    /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: detail }),
-    failed || props.session.lifecycle === "suspended" && !props.attempt?.running ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2("div", { className: "grid min-h-0 flex-1 place-items-center bg-og-bg p-6 text-center", children: /* @__PURE__ */ jsxs2("div", { className: "max-w-sm", children: [
+    /* @__PURE__ */ jsx2("span", { className: "mx-auto grid size-10 place-items-center rounded-og-md border border-og-border bg-og-surface-1 text-og-fg-muted", children: failed ? /* @__PURE__ */ jsx2(CircleAlertIcon, { className: "size-4.5 text-og-danger" }) : /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-4.5 animate-spin" }) }),
+    /* @__PURE__ */ jsx2("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: label }),
+    /* @__PURE__ */ jsx2("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: detail }),
+    failed || props.session.lifecycle === "suspended" && !props.attempt?.running ? /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
         onClick: props.onResume,
-        className: "mt-4 inline-flex h-8 items-center rounded-og-sm border border-og-border bg-og-surface-1 px-3 text-og-control font-medium text-og-fg transition hover:bg-og-surface-2",
+        className: "mt-4 inline-flex h-8 items-center rounded-og-sm border border-og-primary-border bg-og-primary px-3 text-og-control font-medium text-og-primary-fg transition hover:bg-og-primary-hover",
         children: "Open browser"
       }
     ) : null
   ] }) });
 }
 function BrowserToolbar(props) {
-  const detailsRef = useRef8(null);
+  const detailsRef = useViewerMenuDismiss();
   const selected = props.sessions.find((session) => session.id === props.selectedSessionId);
   const current = props.sessions.filter((session) => props.relevantSessionIds.has(session.id));
   const others = props.sessions.filter((session) => !props.relevantSessionIds.has(session.id));
@@ -2349,48 +2983,50 @@ function BrowserToolbar(props) {
     props.onSelect(id);
     detailsRef.current?.removeAttribute("open");
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-10 shrink-0 items-center gap-1.5 border-b border-og-border bg-og-surface-0 px-2", children: [
-    /* @__PURE__ */ jsxs("details", { ref: detailsRef, className: "relative min-w-0", children: [
-      /* @__PURE__ */ jsxs("summary", { className: "flex h-7 max-w-52 cursor-pointer list-none items-center gap-2 rounded-og-sm px-2 text-og-control text-og-fg transition hover:bg-og-surface-2 [&::-webkit-details-marker]:hidden", children: [
-        /* @__PURE__ */ jsx(Globe2Icon, { className: "size-3.5 shrink-0 text-og-muted" }),
-        /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: selected?.name ?? "Browser" }),
-        (props.interventionCounts.get(selected?.id ?? "") ?? 0) > 0 ? /* @__PURE__ */ jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-og-status-waiting" }) : null,
-        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 shrink-0 text-og-subtle" })
+  return /* @__PURE__ */ jsxs2("div", { className: "flex h-10 shrink-0 items-center gap-1.5 border-b border-og-border bg-og-surface-1 px-2", children: [
+    /* @__PURE__ */ jsxs2("details", { ref: detailsRef, className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs2("summary", { className: "flex h-7 max-w-52 cursor-pointer list-none items-center gap-2 rounded-og-sm px-2 text-og-control text-og-fg transition hover:bg-og-surface-2 [&::-webkit-details-marker]:hidden", children: [
+        /* @__PURE__ */ jsx2(Globe2Icon, { className: "size-3.5 shrink-0 text-og-fg-muted" }),
+        /* @__PURE__ */ jsx2("span", { className: "truncate font-medium", children: selected?.name ?? "Browser" }),
+        (props.interventionCounts.get(selected?.id ?? "") ?? 0) > 0 ? /* @__PURE__ */ jsx2("span", { className: "size-1.5 shrink-0 rounded-full bg-og-status-waiting" }) : null,
+        /* @__PURE__ */ jsx2(ChevronDownIcon, { className: "size-3 shrink-0 text-og-fg-subtle" })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "absolute left-0 top-8 z-30 w-72 overflow-hidden rounded-og-md border border-og-border bg-og-surface-1 p-1 shadow-xl", children: [
-        /* @__PURE__ */ jsx(
-          BrowserSessionGroup,
-          {
-            label: "Current agent",
-            sessions: current,
-            identities: props.identities,
-            selectedId: props.selectedSessionId,
-            interventionCounts: props.interventionCounts,
-            onSelect: choose
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          BrowserSessionGroup,
-          {
-            label: "Workspace browsers",
-            sessions: others,
-            identities: props.identities,
-            selectedId: props.selectedSessionId,
-            interventionCounts: props.interventionCounts,
-            onSelect: choose
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "mt-1 flex gap-1 border-t border-og-border pt-1", children: [
-          current.length > 0 ? /* @__PURE__ */ jsx(MenuButton, { onClick: props.onFollow, children: "Follow agent" }) : null,
-          /* @__PURE__ */ jsxs(MenuButton, { onClick: () => props.onCreate(), disabled: props.creating, children: [
-            /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" }),
+      /* @__PURE__ */ jsxs2("div", { className: "absolute left-2 top-10 z-30 flex max-h-[calc(100%-3rem)] w-72 max-w-[calc(100%-1rem)] flex-col overflow-hidden rounded-og-md border border-og-border bg-og-surface-1 p-1 shadow-xl", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "min-h-0 max-h-96 overflow-y-auto overscroll-contain", children: [
+          /* @__PURE__ */ jsx2(
+            BrowserSessionGroup,
+            {
+              label: "Current agent",
+              sessions: current,
+              identities: props.identities,
+              selectedId: props.selectedSessionId,
+              interventionCounts: props.interventionCounts,
+              onSelect: choose
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            BrowserSessionGroup,
+            {
+              label: "Workspace browsers",
+              sessions: others,
+              identities: props.identities,
+              selectedId: props.selectedSessionId,
+              interventionCounts: props.interventionCounts,
+              onSelect: choose
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "mt-1 flex shrink-0 gap-1 border-t border-og-border pt-1", children: [
+          current.length > 0 ? /* @__PURE__ */ jsx2(MenuButton, { onClick: props.onFollow, children: "Follow agent" }) : null,
+          /* @__PURE__ */ jsxs2(MenuButton, { onClick: () => props.onCreate(), disabled: props.creating, children: [
+            /* @__PURE__ */ jsx2(PlusIcon, { className: "size-3.5" }),
             " New browser"
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-og-xs text-og-subtle", children: placementLabel(selected) }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate text-og-xs text-og-fg-subtle", children: placementLabel(selected) }),
+    /* @__PURE__ */ jsx2(
       BrowserProfileMenu,
       {
         session: selected ?? null,
@@ -2404,17 +3040,17 @@ function BrowserToolbar(props) {
         onOpenVersion: props.onOpenProfileVersion
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
         onClick: props.onRefresh,
-        className: "grid size-7 place-items-center rounded-og-sm text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg",
+        className: "grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg",
         "aria-label": "Refresh browsers",
-        children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: cn("size-3.5", props.refreshing && "animate-spin") })
+        children: /* @__PURE__ */ jsx2(RefreshCwIcon, { className: cn("size-3.5", props.refreshing && "animate-spin") })
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       BrowserLaunchMenu,
       {
         attachedBridges: props.attachedBridges,
@@ -2430,43 +3066,57 @@ function BrowserToolbar(props) {
   ] });
 }
 function BrowserUnselectedPanel(props) {
-  return /* @__PURE__ */ jsx("div", { className: "grid min-h-0 flex-1 place-items-center bg-og-bg p-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm", children: [
-    /* @__PURE__ */ jsx("span", { className: "mx-auto grid size-10 place-items-center rounded-og-md border border-og-border bg-og-surface-1 text-og-muted", children: /* @__PURE__ */ jsx(Globe2Icon, { className: "size-4.5" }) }),
-    /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: "No browser for this agent" }),
-    /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: props.peerCount === 1 ? "One workspace browser is available from the browser menu." : `${props.peerCount} workspace browsers are available from the browser menu.` }),
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx2("div", { className: "grid min-h-0 flex-1 place-items-center bg-og-bg p-6 text-center", children: /* @__PURE__ */ jsxs2("div", { className: "max-w-sm", children: [
+    /* @__PURE__ */ jsx2("span", { className: "mx-auto grid size-10 place-items-center rounded-og-md border border-og-border bg-og-surface-1 text-og-fg-muted", children: /* @__PURE__ */ jsx2(Globe2Icon, { className: "size-4.5" }) }),
+    props.unavailableBrowser ? /* @__PURE__ */ jsx2(BrowserUnavailableNotice, { session: props.unavailableBrowser }) : /* @__PURE__ */ jsx2("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: "No browser for this agent" }),
+    /* @__PURE__ */ jsx2("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: props.peerCount === 1 ? "One workspace browser is available from the browser menu." : `${props.peerCount} workspace browsers are available from the browser menu.` }),
+    /* @__PURE__ */ jsxs2(
       "button",
       {
         type: "button",
         disabled: props.creating,
         onClick: props.onCreate,
-        className: "mt-4 inline-flex h-8 items-center gap-1.5 rounded-og-sm border border-og-border bg-og-surface-1 px-3 text-og-control font-medium text-og-fg transition hover:bg-og-surface-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className: "mt-4 inline-flex h-8 items-center gap-1.5 rounded-og-sm border border-og-primary-border bg-og-primary px-3 text-og-control font-medium text-og-primary-fg transition hover:bg-og-primary-hover disabled:cursor-not-allowed disabled:opacity-50",
         children: [
-          /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" }),
+          /* @__PURE__ */ jsx2(PlusIcon, { className: "size-3.5" }),
           props.creating ? "Opening\u2026" : "New browser"
         ]
       }
     )
   ] }) });
 }
+function BrowserUnavailableNotice({ session }) {
+  const reason = session.failureCode === "provider_deadline_rotation" ? "The computer running it reached its time limit." : session.failureCode === "source_placement_changed" ? "This chat moved to another computer." : session.failureCode === "idle_released" ? "It stopped after it went unused." : session.lifecycle === "failed" ? "It stopped unexpectedly." : "The connection to it was lost.";
+  return /* @__PURE__ */ jsxs2("div", { role: "status", children: [
+    /* @__PURE__ */ jsx2("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: "Browser unavailable" }),
+    /* @__PURE__ */ jsxs2("p", { className: "mt-1 break-words text-og-control leading-5 text-og-fg-muted", children: [
+      session.name,
+      ". ",
+      reason,
+      " Open a new browser to continue."
+    ] })
+  ] });
+}
 function BrowserSessionGroup(props) {
   if (props.sessions.length === 0) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
-    /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle", children: props.label }),
+  return /* @__PURE__ */ jsxs2("div", { className: "py-1", children: [
+    /* @__PURE__ */ jsx2("p", { className: "px-2 pb-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-fg-subtle", children: props.label }),
     props.sessions.map((session) => {
       const identity = props.identities.find((candidate) => candidate.id === session.identityId);
       const interventionCount = props.interventionCounts.get(session.id) ?? 0;
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs2(
         "button",
         {
           type: "button",
+          "aria-label": `${session.name}${identity ? ` \xB7 ${identity.name}` : ""} \xB7 ${placementLabel(session)}`,
+          "aria-pressed": session.id === props.selectedId,
           onClick: () => props.onSelect(session.id),
           className: cn(
             "flex w-full items-center gap-2 rounded-og-sm px-2 py-1.5 text-left transition hover:bg-og-surface-2",
             session.id === props.selectedId && "bg-og-surface-2"
           ),
           children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "span",
               {
                 className: cn(
@@ -2475,14 +3125,14 @@ function BrowserSessionGroup(props) {
                 )
               }
             ),
-            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: session.name }),
-              /* @__PURE__ */ jsxs("span", { className: "block truncate text-og-xs text-og-subtle", children: [
+            /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx2("span", { className: "block truncate text-og-control text-og-fg", children: session.name }),
+              /* @__PURE__ */ jsxs2("span", { className: "block truncate text-og-xs text-og-fg-subtle", children: [
                 identity ? `${identity.name} \xB7 ` : "",
                 placementLabel(session)
               ] })
             ] }),
-            interventionCount > 0 ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-og-status-waiting/12 px-1.5 py-0.5 text-[10px] font-medium text-og-status-waiting", children: interventionCount }) : null
+            interventionCount > 0 ? /* @__PURE__ */ jsx2("span", { className: "rounded-full bg-og-status-waiting/12 px-1.5 py-0.5 text-[10px] font-medium text-og-status-waiting", children: interventionCount }) : null
           ]
         },
         session.id
@@ -2491,7 +3141,7 @@ function BrowserSessionGroup(props) {
   ] });
 }
 function BrowserLaunchMenu(props) {
-  const detailsRef = useRef8(null);
+  const detailsRef = useViewerMenuDismiss();
   const choose = (choice) => {
     detailsRef.current?.removeAttribute("open");
     props.onCreate(choice);
@@ -2502,47 +3152,47 @@ function BrowserLaunchMenu(props) {
   const busy = props.creating || props.mutatingProfile;
   const activeIdentities = props.identities.filter((identity) => identity.status === "active");
   const archivedIdentities = props.identities.filter((identity) => identity.status === "archived");
-  return /* @__PURE__ */ jsxs("details", { ref: detailsRef, className: cn("relative", props.prominent && "mt-4 inline-block"), children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("details", { ref: detailsRef, className: cn(props.prominent && "mt-4 inline-block"), children: [
+    /* @__PURE__ */ jsxs2(
       "summary",
       {
         onClick: (event) => {
           if (busy) event.preventDefault();
         },
         className: cn(
-          "cursor-pointer list-none items-center justify-center gap-1.5 text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden",
+          "cursor-pointer list-none items-center justify-center gap-1.5 text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden",
           props.prominent ? "inline-flex h-8 rounded-og-sm border border-og-border bg-og-surface-1 px-3 text-og-control font-medium text-og-fg" : "grid size-7 place-items-center rounded-og-sm",
           busy && "pointer-events-none opacity-50"
         ),
         "aria-label": "New browser",
         children: [
-          busy ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" }),
+          busy ? /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx2(PlusIcon, { className: "size-3.5" }),
           props.prominent ? "New browser" : null,
-          props.prominent ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" }) : null
+          props.prominent ? /* @__PURE__ */ jsx2(ChevronDownIcon, { className: "size-3" }) : null
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs2(
       "div",
       {
         className: cn(
-          "absolute z-40 w-72 overflow-hidden rounded-og-md border border-og-border bg-og-surface-1 p-1 text-left shadow-xl",
-          props.prominent ? "left-1/2 top-10 -translate-x-1/2" : "right-0 top-8"
+          "absolute z-40 max-h-[calc(100%-3rem)] w-72 max-w-[calc(100%-1rem)] overflow-y-auto rounded-og-md border border-og-border bg-og-surface-1 p-1 text-left shadow-xl",
+          props.prominent ? "left-1/2 top-2 -translate-x-1/2" : "right-2 top-10"
         ),
         children: [
-          props.attachedDevices.length > 0 || props.attachedBridges.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "pb-1", children: [
-            /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 pt-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle", children: "Connected Chrome" }),
-            props.attachedDevices.map((device) => /* @__PURE__ */ jsxs(
+          props.attachedDevices.length > 0 || props.attachedBridges.length > 0 ? /* @__PURE__ */ jsxs2("div", { className: "pb-1", children: [
+            /* @__PURE__ */ jsx2("p", { className: "px-2 pb-1 pt-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-fg-subtle", children: "Connected Chrome" }),
+            props.attachedDevices.map((device) => /* @__PURE__ */ jsxs2(
               "button",
               {
                 type: "button",
                 onClick: () => choose({ kind: "attached", device }),
                 className: "flex w-full items-center gap-2 rounded-og-sm px-2 py-2 text-left transition hover:bg-og-surface-2",
                 children: [
-                  /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3.5 shrink-0 text-og-muted" }),
-                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: device.profileLabel ?? device.name }),
-                    /* @__PURE__ */ jsxs("span", { className: "block truncate text-og-xs text-og-subtle", children: [
+                  /* @__PURE__ */ jsx2(MonitorIcon, { className: "size-3.5 shrink-0 text-og-fg-muted" }),
+                  /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "block truncate text-og-control text-og-fg", children: device.profileLabel ?? device.name }),
+                    /* @__PURE__ */ jsxs2("span", { className: "block truncate text-og-xs text-og-fg-subtle", children: [
                       device.browserName,
                       " \xB7 ",
                       device.tabCount,
@@ -2551,12 +3201,12 @@ function BrowserLaunchMenu(props) {
                       device.tabCount === 1 ? "tab" : "tabs"
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-og-status-running" })
+                  /* @__PURE__ */ jsx2("span", { className: "size-1.5 shrink-0 rounded-full bg-og-status-running" })
                 ]
               },
               device.id
             )),
-            props.attachedBridges.length > 0 ? props.setupUrl ? /* @__PURE__ */ jsxs(
+            props.attachedBridges.length > 0 ? props.setupUrl ? /* @__PURE__ */ jsxs2(
               "a",
               {
                 href: props.setupUrl,
@@ -2565,70 +3215,70 @@ function BrowserLaunchMenu(props) {
                 onClick: () => detailsRef.current?.removeAttribute("open"),
                 className: "flex w-full items-center gap-2 rounded-og-sm px-2 py-2 text-left transition hover:bg-og-surface-2",
                 children: [
-                  /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5 shrink-0 text-og-muted" }),
-                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: props.attachedDevices.length > 0 ? "Connect another Chrome profile" : "Connect this Chrome profile" }),
-                    /* @__PURE__ */ jsx("span", { className: "block truncate text-og-xs text-og-subtle", children: "Machine connected \xB7 Chrome extension missing" })
+                  /* @__PURE__ */ jsx2(PlusIcon, { className: "size-3.5 shrink-0 text-og-fg-muted" }),
+                  /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "block truncate text-og-control text-og-fg", children: props.attachedDevices.length > 0 ? "Connect another Chrome profile" : "Connect this Chrome profile" }),
+                    /* @__PURE__ */ jsx2("span", { className: "block truncate text-og-xs text-og-fg-subtle", children: "Machine connected \xB7 Chrome extension missing" })
                   ] })
                 ]
               }
-            ) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2 px-2 py-2 text-left", children: [
-              /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3.5 shrink-0 text-og-muted" }),
-              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: "Chrome connection ready" }),
-                /* @__PURE__ */ jsx("span", { className: "block text-og-xs leading-4 text-og-subtle", children: "Install the OpenGeni Browser extension in the profile you want to use." })
+            ) : /* @__PURE__ */ jsxs2("div", { className: "flex w-full items-center gap-2 px-2 py-2 text-left", children: [
+              /* @__PURE__ */ jsx2(MonitorIcon, { className: "size-3.5 shrink-0 text-og-fg-muted" }),
+              /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx2("span", { className: "block truncate text-og-control text-og-fg", children: "Chrome connection ready" }),
+                /* @__PURE__ */ jsx2("span", { className: "block text-og-xs leading-4 text-og-fg-subtle", children: "Install the Opengeni Browser extension in the profile you want to use." })
               ] })
             ] }) : null
           ] }) : null,
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "p",
             {
               className: cn(
-                "px-2 pb-1 pt-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle",
+                "px-2 pb-1 pt-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-fg-subtle",
                 (props.attachedDevices.length > 0 || props.attachedBridges.length > 0) && "border-t border-og-border"
               ),
               children: "Open isolated browser"
             }
           ),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
               onClick: () => choose({ kind: "clean" }),
               className: "flex w-full items-center gap-2 rounded-og-sm px-2 py-2 text-left transition hover:bg-og-surface-2",
               children: [
-                /* @__PURE__ */ jsx(Globe2Icon, { className: "size-3.5 text-og-muted" }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  /* @__PURE__ */ jsx("span", { className: "block text-og-control text-og-fg", children: "Fresh browser" }),
-                  /* @__PURE__ */ jsx("span", { className: "block text-og-xs text-og-subtle", children: "Visual browser \xB7 no saved state" })
+                /* @__PURE__ */ jsx2(Globe2Icon, { className: "size-3.5 text-og-fg-muted" }),
+                /* @__PURE__ */ jsxs2("span", { children: [
+                  /* @__PURE__ */ jsx2("span", { className: "block text-og-control text-og-fg", children: "Fresh browser" }),
+                  /* @__PURE__ */ jsx2("span", { className: "block text-og-xs text-og-fg-subtle", children: "Visual browser \xB7 no saved state" })
                 ] })
               ]
             }
           ),
-          activeIdentities.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-1 border-t border-og-border pt-1", children: activeIdentities.map((identity) => /* @__PURE__ */ jsxs(
+          activeIdentities.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "mt-1 border-t border-og-border pt-1", children: activeIdentities.map((identity) => /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
               onClick: () => choose({ kind: "profile", identityId: identity.id }),
               className: "flex w-full items-center gap-2 rounded-og-sm px-2 py-2 text-left transition hover:bg-og-surface-2",
               children: [
-                /* @__PURE__ */ jsx(UserRoundIcon, { className: "size-3.5 text-og-muted" }),
-                /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: identity.name }),
-                  /* @__PURE__ */ jsx("span", { className: "block text-og-xs text-og-subtle", children: identity.defaultRevisionId ? `${identity.revisionCount} saved version${identity.revisionCount === 1 ? "" : "s"}` : "Ready for first sign-in" })
+                /* @__PURE__ */ jsx2(UserRoundIcon, { className: "size-3.5 text-og-fg-muted" }),
+                /* @__PURE__ */ jsxs2("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "block truncate text-og-control text-og-fg", children: identity.name }),
+                  /* @__PURE__ */ jsx2("span", { className: "block text-og-xs text-og-fg-subtle", children: identity.defaultRevisionId ? `${identity.revisionCount} saved version${identity.revisionCount === 1 ? "" : "s"}` : "Ready for first sign-in" })
                 ] })
               ]
             },
             identity.id
           )) }) : null,
-          archivedIdentities.length > 0 ? /* @__PURE__ */ jsxs("details", { className: "mt-1 border-t border-og-border pt-1", children: [
-            /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer list-none items-center gap-1.5 rounded-og-sm px-2 py-1.5 text-og-xs text-og-subtle transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden", children: [
-              /* @__PURE__ */ jsx(ArchiveIcon, { className: "size-3" }),
+          archivedIdentities.length > 0 ? /* @__PURE__ */ jsxs2("details", { className: "mt-1 border-t border-og-border pt-1", children: [
+            /* @__PURE__ */ jsxs2("summary", { className: "flex cursor-pointer list-none items-center gap-1.5 rounded-og-sm px-2 py-1.5 text-og-xs text-og-fg-subtle transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden", children: [
+              /* @__PURE__ */ jsx2(ArchiveIcon, { className: "size-3" }),
               " Hidden profiles \xB7 ",
               archivedIdentities.length,
-              /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ml-auto size-3" })
+              /* @__PURE__ */ jsx2(ChevronDownIcon, { className: "ml-auto size-3" })
             ] }),
-            archivedIdentities.map((identity) => /* @__PURE__ */ jsxs(
+            archivedIdentities.map((identity) => /* @__PURE__ */ jsxs2(
               "button",
               {
                 type: "button",
@@ -2636,8 +3286,8 @@ function BrowserLaunchMenu(props) {
                 onClick: () => void restore(identity),
                 className: "flex w-full items-center gap-2 rounded-og-sm px-2 py-2 text-left transition hover:bg-og-surface-2 disabled:opacity-50",
                 children: [
-                  /* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-3.5 text-og-muted" }),
-                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate text-og-control text-og-fg", children: [
+                  /* @__PURE__ */ jsx2(RotateCcwIcon, { className: "size-3.5 text-og-fg-muted" }),
+                  /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1 truncate text-og-control text-og-fg", children: [
                     "Restore ",
                     identity.name
                   ] })
@@ -2652,9 +3302,9 @@ function BrowserLaunchMenu(props) {
   ] });
 }
 function BrowserProfileMenu(props) {
-  const detailsRef = useRef8(null);
+  const detailsRef = useViewerMenuDismiss();
   const nameInputId = useId();
-  const [name, setName] = useState8("");
+  const [name, setName] = useState9("");
   const attached = props.session?.placement.kind === "attached_device";
   const canSave = (props.session?.capabilities.identityPublication ?? false) && props.identity?.status !== "archived";
   const revisions = props.identity && props.history?.identityId === props.identity.id ? [...props.history.revisions].sort((left, right) => right.ordinal - left.ordinal) : [];
@@ -2669,36 +3319,36 @@ function BrowserProfileMenu(props) {
     props.onOpenVersion(identityId, baseRevisionId);
   };
   const versionLabel = attached ? "live" : props.identity ? props.baseRevisionOrdinal ? `v${props.baseRevisionOrdinal}` : props.session?.baseRevisionId ? "saved" : "unsaved" : "temporary";
-  return /* @__PURE__ */ jsxs("details", { ref: detailsRef, className: "relative min-w-0", children: [
-    /* @__PURE__ */ jsxs("summary", { className: "flex h-7 max-w-40 cursor-pointer list-none items-center gap-1.5 rounded-og-sm px-2 text-og-xs text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden", children: [
-      props.saving ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }) : attached ? /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3" }) : /* @__PURE__ */ jsx(UserRoundIcon, { className: "size-3" }),
-      /* @__PURE__ */ jsx("span", { className: "truncate", children: attached ? props.session?.name : props.identity?.name ?? "Temporary" }),
-      attached || props.identity ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-og-subtle", children: [
+  return /* @__PURE__ */ jsxs2("details", { ref: detailsRef, className: "min-w-0", children: [
+    /* @__PURE__ */ jsxs2("summary", { className: "flex h-7 max-w-40 cursor-pointer list-none items-center gap-1.5 rounded-og-sm px-2 text-og-xs text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden", children: [
+      props.saving ? /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-3 animate-spin" }) : attached ? /* @__PURE__ */ jsx2(MonitorIcon, { className: "size-3" }) : /* @__PURE__ */ jsx2(UserRoundIcon, { className: "size-3" }),
+      /* @__PURE__ */ jsx2("span", { className: "truncate", children: attached ? props.session?.name : props.identity?.name ?? "Temporary" }),
+      attached || props.identity ? /* @__PURE__ */ jsxs2("span", { className: "shrink-0 text-og-fg-subtle", children: [
         "\xB7 ",
         versionLabel
       ] }) : null,
-      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 shrink-0 text-og-subtle" })
+      /* @__PURE__ */ jsx2(ChevronDownIcon, { className: "size-3 shrink-0 text-og-fg-subtle" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-8 z-40 w-72 rounded-og-md border border-og-border bg-og-surface-1 p-3 shadow-xl", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "grid size-7 shrink-0 place-items-center rounded-og-sm bg-og-surface-2 text-og-muted", children: attached ? /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(UserRoundIcon, { className: "size-3.5" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "truncate text-og-control font-medium text-og-fg", children: attached ? props.session?.name : props.identity?.name ?? "Temporary browser" }),
-          /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-og-xs leading-4 text-og-subtle", children: attached ? "This session drives the existing Chrome profile and its current login state." : props.identity?.status === "archived" ? "Hidden from new browsers. This already-open browser is unchanged." : props.identity ? props.baseRevisionOrdinal ? `Started from version ${props.baseRevisionOrdinal}.` : "Not saved yet." : "This browser is not reusable yet." })
+    /* @__PURE__ */ jsxs2("div", { className: "absolute right-2 top-10 z-40 max-h-[calc(100%-3rem)] w-72 max-w-[calc(100%-1rem)] overflow-y-auto rounded-og-md border border-og-border bg-og-surface-1 p-3 shadow-xl", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx2("span", { className: "grid size-7 shrink-0 place-items-center rounded-og-sm bg-og-surface-2 text-og-fg-muted", children: attached ? /* @__PURE__ */ jsx2(MonitorIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx2(UserRoundIcon, { className: "size-3.5" }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx2("p", { className: "truncate text-og-control font-medium text-og-fg", children: attached ? props.session?.name : props.identity?.name ?? "Temporary browser" }),
+          /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-og-xs leading-4 text-og-fg-subtle", children: attached ? "This session drives the existing Chrome profile and its current login state." : props.identity?.status === "archived" ? "Hidden from new browsers. This already-open browser is unchanged." : props.identity ? props.baseRevisionOrdinal ? `Started from version ${props.baseRevisionOrdinal}.` : "Not saved yet." : "This browser is not reusable yet." })
         ] })
       ] }),
-      props.identity && revisions.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-og-border pt-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "px-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle", children: "Saved versions" }),
-        /* @__PURE__ */ jsx("div", { className: "mt-1 max-h-40 overflow-y-auto", children: revisions.map((revision) => {
+      props.identity && revisions.length > 0 ? /* @__PURE__ */ jsxs2("div", { className: "mt-3 border-t border-og-border pt-2", children: [
+        /* @__PURE__ */ jsx2("p", { className: "px-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-fg-subtle", children: "Saved versions" }),
+        /* @__PURE__ */ jsx2("div", { className: "mt-1 max-h-40 overflow-y-auto", children: revisions.map((revision) => {
           const isDefault = revision.id === props.identity?.defaultRevisionId;
           const isCurrent = revision.ordinal === props.baseRevisionOrdinal;
           const materialization = revisionMaterializationSummary(revision);
-          return /* @__PURE__ */ jsxs(
+          return /* @__PURE__ */ jsxs2(
             "div",
             {
               className: "flex w-full items-center gap-1 rounded-og-sm transition hover:bg-og-surface-2",
               children: [
-                /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsxs2(
                   "button",
                   {
                     type: "button",
@@ -2707,19 +3357,19 @@ function BrowserProfileMenu(props) {
                     onClick: () => openVersion(props.identity.id, revision.id),
                     className: "flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-left disabled:opacity-50",
                     children: [
-                      /* @__PURE__ */ jsx("span", { className: "grid size-4 place-items-center text-og-muted", children: isCurrent ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-og-accent" }) : null }),
-                      /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                        /* @__PURE__ */ jsxs("span", { className: "block text-og-control text-og-fg", children: [
+                      /* @__PURE__ */ jsx2("span", { className: "grid size-4 place-items-center text-og-fg-muted", children: isCurrent ? /* @__PURE__ */ jsx2(CheckIcon, { className: "size-3.5 text-og-accent" }) : null }),
+                      /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs2("span", { className: "block text-og-control text-og-fg", children: [
                           "Version ",
                           revision.ordinal
                         ] }),
-                        /* @__PURE__ */ jsx("span", { className: "block truncate text-[10px] text-og-subtle", children: materialization.label })
+                        /* @__PURE__ */ jsx2("span", { className: "block truncate text-[10px] text-og-fg-subtle", children: materialization.label })
                       ] }),
-                      isCurrent ? /* @__PURE__ */ jsx("span", { className: "text-[10px] text-og-subtle", children: "Current" }) : null
+                      isCurrent ? /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-og-fg-subtle", children: "Current" }) : null
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx2(
                   "button",
                   {
                     type: "button",
@@ -2727,7 +3377,7 @@ function BrowserProfileMenu(props) {
                     "aria-label": isDefault ? `${props.identity.name} version ${revision.ordinal} is the default` : `Use ${props.identity.name} version ${revision.ordinal} by default`,
                     title: isDefault ? "Default version" : "Use by default",
                     onClick: () => void props.onUpdate(props.identity, { defaultRevisionId: revision.id }),
-                    className: "mr-1 shrink-0 rounded-og-sm px-2 py-1 text-[10px] text-og-subtle transition hover:bg-og-surface-3 hover:text-og-fg disabled:cursor-default disabled:opacity-70",
+                    className: "mr-1 shrink-0 rounded-og-sm px-2 py-1 text-[10px] text-og-fg-subtle transition hover:bg-og-surface-3 hover:text-og-fg disabled:cursor-default disabled:opacity-70",
                     children: isDefault ? "Default" : "Make default"
                   }
                 )
@@ -2736,24 +3386,24 @@ function BrowserProfileMenu(props) {
             revision.id
           );
         }) }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 px-2 text-[10px] leading-4 text-og-subtle", children: "Changing the default affects only browsers opened later. Saved browser data can be copied; a website may still expire or re-verify its own session." })
-      ] }) : props.identity && props.history?.identityId === props.identity.id && props.history.loading ? /* @__PURE__ */ jsxs("p", { className: "mt-3 flex items-center gap-1.5 border-t border-og-border px-2 pt-2 text-og-xs text-og-subtle", children: [
-        /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }),
+        /* @__PURE__ */ jsx2("p", { className: "mt-1 px-2 text-[10px] leading-4 text-og-fg-subtle", children: "Changing the default affects only browsers opened later. Saved browser data can be copied; a website may still expire or re-verify its own session." })
+      ] }) : props.identity && props.history?.identityId === props.identity.id && props.history.loading ? /* @__PURE__ */ jsxs2("p", { className: "mt-3 flex items-center gap-1.5 border-t border-og-border px-2 pt-2 text-og-xs text-og-fg-subtle", children: [
+        /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-3 animate-spin" }),
         " Loading saved versions\u2026"
       ] }) : null,
-      props.identity && props.authConnections.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-og-border pt-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "px-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle", children: "Login health" }),
-        /* @__PURE__ */ jsx("div", { className: "mt-1 space-y-1", children: props.authConnections.map((connection) => {
+      props.identity && props.authConnections.length > 0 ? /* @__PURE__ */ jsxs2("div", { className: "mt-3 border-t border-og-border pt-2", children: [
+        /* @__PURE__ */ jsx2("p", { className: "px-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-fg-subtle", children: "Login health" }),
+        /* @__PURE__ */ jsx2("div", { className: "mt-1 space-y-1", children: props.authConnections.map((connection) => {
           const health = siteAuthHealth(connection);
-          return /* @__PURE__ */ jsxs(
+          return /* @__PURE__ */ jsxs2(
             "div",
             {
               className: "flex items-start gap-2 rounded-og-sm px-2 py-1.5",
               children: [
-                /* @__PURE__ */ jsx("span", { className: cn("mt-1 size-1.5 shrink-0 rounded-full", health.dotClass) }),
-                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: connection.name }),
-                  /* @__PURE__ */ jsxs("span", { className: "block truncate text-[10px] text-og-subtle", children: [
+                /* @__PURE__ */ jsx2("span", { className: cn("mt-1 size-1.5 shrink-0 rounded-full", health.dotClass) }),
+                /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "block truncate text-og-control text-og-fg", children: connection.name }),
+                  /* @__PURE__ */ jsxs2("span", { className: "block truncate text-[10px] text-og-fg-subtle", children: [
                     connection.accountLabel,
                     " \xB7 ",
                     health.label
@@ -2765,7 +3415,7 @@ function BrowserProfileMenu(props) {
           );
         }) })
       ] }) : null,
-      canSave ? props.identity ? /* @__PURE__ */ jsxs(
+      canSave ? props.identity ? /* @__PURE__ */ jsxs2(
         "button",
         {
           type: "button",
@@ -2773,11 +3423,11 @@ function BrowserProfileMenu(props) {
           disabled: props.saving,
           className: "mt-3 flex h-8 w-full items-center justify-center gap-1.5 rounded-og-sm border border-og-border bg-og-surface-2 px-3 text-og-control font-medium text-og-fg transition hover:bg-og-surface-3 disabled:opacity-50",
           children: [
-            props.saving ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(SaveIcon, { className: "size-3.5" }),
+            props.saving ? /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx2(SaveIcon, { className: "size-3.5" }),
             props.saving ? "Saving browser version\u2026" : "Save new version"
           ]
         }
-      ) : /* @__PURE__ */ jsxs(
+      ) : /* @__PURE__ */ jsxs2(
         "form",
         {
           className: "mt-3",
@@ -2786,9 +3436,9 @@ function BrowserProfileMenu(props) {
             if (name.trim()) void save(name);
           },
           children: [
-            /* @__PURE__ */ jsx("label", { className: "text-og-xs font-medium text-og-muted", htmlFor: nameInputId, children: "Profile name" }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-1 flex gap-1.5", children: [
-              /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2("label", { className: "text-og-xs font-medium text-og-fg-muted", htmlFor: nameInputId, children: "Profile name" }),
+            /* @__PURE__ */ jsxs2("div", { className: "mt-1 flex gap-1.5", children: [
+              /* @__PURE__ */ jsx2(
                 "input",
                 {
                   id: nameInputId,
@@ -2796,17 +3446,17 @@ function BrowserProfileMenu(props) {
                   onInput: (event) => setName(event.currentTarget.value),
                   maxLength: 200,
                   placeholder: "Work",
-                  className: "h-8 min-w-0 flex-1 rounded-og-sm border border-og-border bg-og-bg px-2 text-og-control text-og-fg placeholder:text-og-subtle focus:border-og-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent"
+                  className: "h-8 min-w-0 flex-1 rounded-og-sm border border-og-border bg-og-bg px-2 text-og-control text-og-fg placeholder:text-og-fg-subtle focus:border-og-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent"
                 }
               ),
-              /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsxs2(
                 "button",
                 {
                   type: "submit",
                   disabled: !name.trim() || props.saving,
-                  className: "inline-flex h-8 items-center gap-1 rounded-og-sm bg-og-accent px-2.5 text-og-control font-medium text-white transition hover:opacity-90 disabled:opacity-40",
+                  className: "inline-flex h-8 items-center gap-1 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-2.5 text-og-control font-medium transition hover:bg-og-primary-hover disabled:opacity-50",
                   children: [
-                    props.saving ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(SaveIcon, { className: "size-3.5" }),
+                    props.saving ? /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx2(SaveIcon, { className: "size-3.5" }),
                     "Save"
                   ]
                 }
@@ -2814,8 +3464,8 @@ function BrowserProfileMenu(props) {
             ] })
           ]
         }
-      ) : /* @__PURE__ */ jsx("p", { className: "mt-3 rounded-og-sm bg-og-surface-2 px-2.5 py-2 text-og-xs text-og-subtle", children: attached ? "Chrome keeps this profile's state directly; OpenGeni does not copy it automatically." : props.identity?.status === "archived" ? "Restore this profile before saving another version." : "This browser cannot save reusable profile state." }),
-      !attached && props.identity ? /* @__PURE__ */ jsxs(
+      ) : /* @__PURE__ */ jsx2("p", { className: "mt-3 rounded-og-sm bg-og-surface-2 px-2.5 py-2 text-og-xs text-og-fg-subtle", children: attached ? "Chrome keeps this profile's state directly; Opengeni does not copy it automatically." : props.identity?.status === "archived" ? "Restore this profile before saving another version." : "This browser cannot save reusable profile state." }),
+      !attached && props.identity ? /* @__PURE__ */ jsxs2(
         "button",
         {
           type: "button",
@@ -2823,14 +3473,14 @@ function BrowserProfileMenu(props) {
           onClick: () => void props.onUpdate(props.identity, {
             status: props.identity.status === "active" ? "archived" : "active"
           }),
-          className: "mt-2 flex h-8 w-full items-center justify-center gap-1.5 rounded-og-sm px-3 text-og-control text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-50",
+          className: "mt-2 flex h-8 w-full items-center justify-center gap-1.5 rounded-og-sm px-3 text-og-control text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-50",
           children: [
-            props.identity.status === "active" ? /* @__PURE__ */ jsx(ArchiveIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-3.5" }),
+            props.identity.status === "active" ? /* @__PURE__ */ jsx2(ArchiveIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx2(RotateCcwIcon, { className: "size-3.5" }),
             props.identity.status === "active" ? "Hide from new browsers" : "Restore profile"
           ]
         }
       ) : null,
-      canSave ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-[10px] leading-4 text-og-subtle", children: "Saving briefly restarts this browser. Other open browsers are unchanged." }) : null
+      canSave ? /* @__PURE__ */ jsx2("p", { className: "mt-2 text-[10px] leading-4 text-og-fg-subtle", children: "Saving restarts this browser. Save unfinished work on its pages first; unsaved form entries may be lost. Other open browsers are unchanged." }) : null
     ] })
   ] });
 }
@@ -2867,29 +3517,29 @@ function siteAuthHealth(connection) {
   }
 }
 function MenuButton(props) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       type: "button",
       onClick: props.onClick,
       disabled: props.disabled,
-      className: "flex h-7 flex-1 items-center justify-center gap-1 rounded-og-sm px-2 text-og-control text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-50",
+      className: "flex h-7 flex-1 items-center justify-center gap-1 rounded-og-sm px-2 text-og-control text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-50",
       children: props.children
     }
   );
 }
 function BrowserTabs(props) {
   const pages = props.targets.filter((target) => target.kind === "page" || target.kind === "popup");
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-9 shrink-0 items-end gap-px overflow-x-auto border-b border-og-border bg-og-surface-0 px-1 pt-1", children: [
-    pages.map((target) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("div", { className: "flex h-9 shrink-0 items-end gap-px overflow-x-auto border-b border-og-border bg-og-surface-1 px-1 pt-1", children: [
+    pages.map((target) => /* @__PURE__ */ jsxs2(
       "div",
       {
         className: cn(
           "group flex h-8 min-w-24 max-w-48 items-center rounded-t-og-sm border border-b-0 border-transparent px-2",
-          target.id === props.selectedTargetId ? "border-og-border bg-og-bg text-og-fg" : "text-og-muted hover:bg-og-surface-1"
+          target.id === props.selectedTargetId ? "border-og-border bg-og-bg text-og-fg" : "text-og-fg-muted hover:bg-og-surface-1"
         ),
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -2898,7 +3548,7 @@ function BrowserTabs(props) {
               children: target.title || shortUrl(target.url)
             }
           ),
-          props.tabControl ? /* @__PURE__ */ jsx(
+          props.tabControl ? /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -2906,57 +3556,94 @@ function BrowserTabs(props) {
               disabled: props.mutating,
               className: "ml-1 grid size-4 shrink-0 place-items-center rounded opacity-0 transition hover:bg-og-surface-3 group-hover:opacity-100 focus:opacity-100 disabled:opacity-30",
               "aria-label": `Close ${target.title || "tab"}`,
-              children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+              children: /* @__PURE__ */ jsx2(XIcon, { className: "size-3" })
             }
           ) : null
         ]
       },
       target.id
     )),
-    props.tabControl ? /* @__PURE__ */ jsx(
+    props.tabControl ? /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
         onClick: props.onOpen,
         disabled: props.mutating,
-        className: "mb-1 grid size-6 shrink-0 place-items-center rounded-og-sm text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-40",
+        className: "mb-1 grid size-6 shrink-0 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-40",
         "aria-label": "New tab",
-        children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
+        children: /* @__PURE__ */ jsx2(PlusIcon, { className: "size-3.5" })
       }
     ) : null
   ] });
 }
 function BrowserAddressBar(props) {
-  const [draft, setDraft] = useState8(props.target?.url ?? "");
-  const focusedRef = useRef8(false);
-  useEffect8(() => {
+  const [draft, setDraft] = useState9(props.target?.url ?? "");
+  const focusedRef = useRef9(false);
+  const historyPendingRef = useRef9(false);
+  const [historyPending, setHistoryPending] = useState9(false);
+  useEffect9(() => {
     if (!focusedRef.current) setDraft(props.target?.url ?? "");
   }, [props.target?.id, props.target?.url]);
   const submit = (event) => {
     event.preventDefault();
+    if (historyPendingRef.current) return;
     const normalized = normalizeBrowserAddress(draft);
     if (normalized) props.onNavigate(normalized);
   };
-  return /* @__PURE__ */ jsxs(
+  const navigateHistory = async (direction) => {
+    if (!props.target || props.loading || historyPendingRef.current) return;
+    historyPendingRef.current = true;
+    setHistoryPending(true);
+    try {
+      await props.onHistory(direction);
+    } finally {
+      historyPendingRef.current = false;
+      setHistoryPending(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
     "form",
     {
       onSubmit: submit,
+      "aria-busy": historyPending || void 0,
       className: "flex h-10 shrink-0 items-center gap-1.5 border-b border-og-border bg-og-bg px-2",
       children: [
-        /* @__PURE__ */ jsx(
+        ["back", "forward"].map((direction) => /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
-            onClick: props.onReload,
+            onClick: () => void navigateHistory(direction),
             disabled: !props.target || props.loading,
-            className: "grid size-7 place-items-center rounded-og-sm text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-35",
+            "aria-disabled": historyPending || void 0,
+            className: cn(
+              "grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-35",
+              historyPending && "opacity-50"
+            ),
+            "aria-label": direction === "back" ? "Back" : "Forward",
+            title: direction === "back" ? "Back" : "Forward",
+            children: direction === "back" ? /* @__PURE__ */ jsx2(ArrowLeftIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx2(ArrowRightIcon, { className: "size-3.5" })
+          },
+          direction
+        )),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: props.onReload,
+            disabled: !props.target || props.loading || historyPending,
+            className: "grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-35",
             "aria-label": "Reload",
-            children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: cn("size-3.5", props.loading && "animate-spin") })
+            children: /* @__PURE__ */ jsx2(
+              RefreshCwIcon,
+              {
+                className: cn("size-3.5", (props.loading || historyPending) && "animate-spin")
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex h-7 min-w-0 flex-1 items-center gap-2 rounded-og-sm border border-og-border bg-og-surface-0 px-2 focus-within:border-og-accent/60", children: [
-          /* @__PURE__ */ jsx(Globe2Icon, { className: "size-3 shrink-0 text-og-subtle" }),
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs2("div", { className: "flex h-7 min-w-0 flex-1 items-center gap-2 rounded-og-sm border border-og-border bg-og-surface-1 px-2 focus-within:border-og-accent/60", children: [
+          /* @__PURE__ */ jsx2(Globe2Icon, { className: "size-3 shrink-0 text-og-fg-subtle" }),
+          /* @__PURE__ */ jsx2(
             "input",
             {
               value: draft,
@@ -2970,11 +3657,12 @@ function BrowserAddressBar(props) {
               onKeyDown: (event) => {
                 if (event.key !== "Enter") return;
                 event.preventDefault();
+                if (historyPendingRef.current) return;
                 const normalized = normalizeBrowserAddress(draft);
                 if (normalized) props.onNavigate(normalized);
               },
               disabled: !props.target,
-              className: "min-w-0 flex-1 bg-transparent text-og-control text-og-fg placeholder:text-og-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50",
+              className: "min-w-0 flex-1 bg-transparent text-og-control text-og-fg placeholder:text-og-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50",
               "aria-label": "Address",
               spellCheck: false,
               placeholder: "Search or enter address"
@@ -2986,24 +3674,48 @@ function BrowserAddressBar(props) {
   );
 }
 function BrowserViewport(props) {
-  const canvasRef = useRef8(null);
-  const inputRef = useRef8(null);
-  const composingRef = useRef8(false);
-  const pointerStartRef = useRef8(null);
-  const lastClickRef = useRef8(null);
-  const wheelRef = useRef8(null);
-  const pendingTextRef = useRef8(null);
-  const actionRef = useRef8(props.onAction);
-  const readClipboardRef = useRef8(props.onReadClipboard);
-  const errorRef = useRef8(props.onError);
-  const actionTailRef = useRef8(Promise.resolve());
-  const actionQueueEpochRef = useRef8(0);
-  const queuedFrameRef = useRef8(null);
-  const decodingFrameRef = useRef8(false);
-  const mountedRef = useRef8(true);
+  const canvasRef = useRef9(null);
+  const inputRef = useRef9(null);
+  const [selectPopup, setSelectPopup] = useState9(null);
+  const inputSequenceRef = useRef9(0);
+  const dismissSelectPopup = useCallback8(() => {
+    inputSequenceRef.current += 1;
+    setSelectPopup({ observation: null, anchor: null });
+  }, []);
+  const composingRef = useRef9(false);
+  const pointerStartRef = useRef9(null);
+  const lastClickRef = useRef9(null);
+  const wheelRef = useRef9(null);
+  const pendingTextRef = useRef9(null);
+  const actionRef = useRef9(props.onAction);
+  const readClipboardRef = useRef9(props.onReadClipboard);
+  const observeInputRef = useRef9(props.onObserveForInput);
+  const errorRef = useRef9(props.onError);
+  const actionTailRef = useRef9(Promise.resolve());
+  const actionQueueEpochRef = useRef9(0);
+  const queuedTypingRef = useRef9(null);
+  const queuedFrameRef = useRef9(null);
+  const currentFrameRef = useRef9(props.frame);
+  const paintedFrameRef = useRef9(null);
+  const [paintedFrame, setPaintedFrame] = useState9(null);
+  const decodingFrameRef = useRef9(false);
+  const mountedRef = useRef9(true);
   actionRef.current = props.onAction;
   readClipboardRef.current = props.onReadClipboard;
+  observeInputRef.current = props.onObserveForInput;
   errorRef.current = props.onError;
+  const clearBufferedInput = useCallback8(() => {
+    dismissSelectPopup();
+    if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
+    if (pendingTextRef.current?.timer) clearTimeout(pendingTextRef.current.timer);
+    wheelRef.current = null;
+    pendingTextRef.current = null;
+    queuedTypingRef.current = null;
+    pointerStartRef.current = null;
+    lastClickRef.current = null;
+    composingRef.current = false;
+    if (inputRef.current) inputRef.current.value = "";
+  }, [dismissSelectPopup]);
   const paintQueuedFrames = useCallback8(() => {
     if (decodingFrameRef.current) return;
     decodingFrameRef.current = true;
@@ -3015,15 +3727,17 @@ function BrowserViewport(props) {
           if (!frame) break;
           let objectUrl = null;
           try {
-            const blob = new Blob([frame.data.slice().buffer], {
+            const blob = new Blob([frame.data], {
               type: frame.mediaType
             });
             if (typeof createImageBitmap === "function") {
               const bitmap = await createImageBitmap(blob);
               try {
                 const canvas2 = canvasRef.current;
-                if (mountedRef.current && canvas2) {
+                if (mountedRef.current && canvas2 && currentFrameRef.current && sameBrowserDocument(frame, currentFrameRef.current)) {
                   paintCanvas(canvas2, bitmap, frame.width, frame.height);
+                  paintedFrameRef.current = frame;
+                  setPaintedFrame(frame);
                 }
               } finally {
                 bitmap.close();
@@ -3033,11 +3747,14 @@ function BrowserViewport(props) {
             objectUrl = URL.createObjectURL(blob);
             const image = await loadImage(objectUrl);
             const canvas = canvasRef.current;
-            if (mountedRef.current && canvas) {
+            if (mountedRef.current && canvas && currentFrameRef.current && sameBrowserDocument(frame, currentFrameRef.current)) {
               paintCanvas(canvas, image, frame.width, frame.height);
+              paintedFrameRef.current = frame;
+              setPaintedFrame(frame);
             }
           } catch (cause) {
-            if (mountedRef.current) errorRef.current(cause);
+            if (mountedRef.current && currentFrameRef.current && sameBrowserDocument(frame, currentFrameRef.current))
+              errorRef.current(cause);
           } finally {
             if (objectUrl) URL.revokeObjectURL(objectUrl);
           }
@@ -3048,38 +3765,83 @@ function BrowserViewport(props) {
       }
     })();
   }, []);
-  useEffect8(() => {
+  useLayoutEffect2(() => {
+    const keyboardInput = inputRef.current;
+    const focusHandoff = props.focusHandoffRef;
     mountedRef.current = true;
+    if (focusHandoff.current === props.focusScope) {
+      keyboardInput?.focus({ preventScroll: true });
+    }
+    focusHandoff.current = null;
     return () => {
+      if (document.activeElement === keyboardInput) {
+        focusHandoff.current = props.focusScope;
+      }
       mountedRef.current = false;
+      actionQueueEpochRef.current += 1;
       queuedFrameRef.current = null;
+      clearBufferedInput();
     };
-  }, []);
-  useEffect8(() => {
-    if (!props.frame) return;
+  }, [clearBufferedInput, props.focusHandoffRef, props.focusScope]);
+  useLayoutEffect2(() => {
+    if (currentFrameRef.current && !props.frame) {
+      actionQueueEpochRef.current += 1;
+      clearBufferedInput();
+    }
+    currentFrameRef.current = props.frame;
+    if (!props.frame) {
+      queuedFrameRef.current = null;
+      paintedFrameRef.current = null;
+      setPaintedFrame(null);
+      return;
+    }
     queuedFrameRef.current = props.frame;
     paintQueuedFrames();
-  }, [paintQueuedFrames, props.frame]);
-  useEffect8(
-    () => () => {
-      if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
-      if (pendingTextRef.current?.timer) clearTimeout(pendingTextRef.current.timer);
-    },
-    []
-  );
+  }, [clearBufferedInput, paintQueuedFrames, props.frame]);
   const enqueue = useCallback8(
-    (action, frame, after) => {
+    (action, frame, after, selectAnchor) => {
+      const inputSequence = ++inputSequenceRef.current;
+      setSelectPopup({ observation: null, anchor: null });
+      frame = frame ? {
+        browserSessionId: frame.browserSessionId,
+        controllerGeneration: frame.controllerGeneration,
+        targetId: frame.targetId,
+        targetGeneration: frame.targetGeneration,
+        documentGeneration: frame.documentGeneration,
+        frameId: frame.frameId
+      } : null;
       const epoch = actionQueueEpochRef.current;
+      const attachment = props.inputBatchAttachment;
+      const canBatchTyping = action.type === "type" && !after && frame && attachment?.fencedInputBatches === true && attachment.browserSessionId === frame.browserSessionId && attachment.controllerGeneration === frame.controllerGeneration && attachment.targetId === frame.targetId && Date.parse(attachment.expiresAt) > Date.now();
+      const previous = queuedTypingRef.current;
+      if (canBatchTyping && frame && previous && previous.epoch === epoch && sameFrameFence(previous.frame, frame) && previous.actions.length < 16) {
+        previous.actions.push(action);
+        return;
+      }
+      const typing = canBatchTyping && frame ? { actions: [action], frame, epoch } : null;
+      queuedTypingRef.current = typing;
       actionTailRef.current = actionTailRef.current.catch(() => void 0).then(async () => {
-        if (epoch !== actionQueueEpochRef.current) return;
-        const receipt = await actionRef.current(action, frame);
+        if (!mountedRef.current || epoch !== actionQueueEpochRef.current) return;
+        if (queuedTypingRef.current === typing) queuedTypingRef.current = null;
+        const dispatchedAction = typing && typing.actions.length > 1 ? { type: "batch", actions: typing.actions, fenceEachAction: true } : action;
+        const receipt = await actionRef.current(dispatchedAction, frame);
+        if (!mountedRef.current || epoch !== actionQueueEpochRef.current) return;
+        const keyboardSelect = dispatchedAction.type === "press" && dispatchedAction.key === "Alt+ArrowDown";
+        if ((selectAnchor || keyboardSelect) && inputSequence === inputSequenceRef.current) {
+          const observation = keyboardSelect ? await observeInputRef.current() : receipt.observation;
+          if (mountedRef.current && epoch === actionQueueEpochRef.current && inputSequence === inputSequenceRef.current && observation) {
+            setSelectPopup({ observation, anchor: selectAnchor ?? null });
+          }
+        }
         await after?.(receipt);
       }).catch((cause) => {
+        if (!mountedRef.current || epoch !== actionQueueEpochRef.current) return;
         actionQueueEpochRef.current += 1;
+        clearBufferedInput();
         errorRef.current(cause);
       });
     },
-    []
+    [clearBufferedInput, props.inputBatchAttachment]
   );
   const point = useCallback8(
     (frame, clientX, clientY) => browserPoint(canvasRef.current, frame, clientX, clientY),
@@ -3095,15 +3857,35 @@ function BrowserViewport(props) {
   const flushPendingClick = useCallback8(() => {
     lastClickRef.current = null;
   }, []);
+  const flushPendingWheel = useCallback8(() => {
+    const batch = wheelRef.current;
+    if (!batch) return;
+    if (batch.timer) clearTimeout(batch.timer);
+    wheelRef.current = null;
+    enqueue(
+      {
+        type: "pointer",
+        action: "scroll",
+        x: batch.x,
+        y: batch.y,
+        deltaX: batch.deltaX,
+        deltaY: batch.deltaY
+      },
+      batch.frame
+    );
+  }, [enqueue]);
   const pointerDown = (event) => {
-    if (!props.frame || event.button !== 0) return;
+    const frame = paintedFrameRef.current;
+    if (!frame || event.button !== 0) return;
     event.preventDefault();
+    dismissSelectPopup();
+    flushPendingWheel();
     flushPendingText();
     pointerStartRef.current = {
       x: event.clientX,
       y: event.clientY,
       pointerId: event.pointerId,
-      frame: props.frame
+      frame
     };
     event.currentTarget.setPointerCapture?.(event.pointerId);
     inputRef.current?.focus({ preventScroll: true });
@@ -3138,52 +3920,54 @@ function BrowserViewport(props) {
       return;
     }
     lastClickRef.current = { at: now, x: to.x, y: to.y, frame: start.frame };
-    enqueue({ type: "pointer", action: "click", x: to.x, y: to.y }, start.frame);
+    const viewportBounds = canvasRef.current?.parentElement?.getBoundingClientRect();
+    enqueue(
+      { type: "pointer", action: "click", x: to.x, y: to.y },
+      start.frame,
+      void 0,
+      viewportBounds ? { x: event.clientX - viewportBounds.left, y: event.clientY - viewportBounds.top + 8 } : void 0
+    );
   };
   const contextMenu = (event) => {
     event.preventDefault();
-    const frame = props.frame;
+    const frame = paintedFrameRef.current;
     if (!frame) return;
+    flushPendingWheel();
     flushPendingText();
     flushPendingClick();
     const at = point(frame, event.clientX, event.clientY);
     if (at) enqueue({ type: "pointer", action: "click", x: at.x, y: at.y, button: "right" }, frame);
   };
   const wheel = (event) => {
-    const frame = props.frame;
+    dismissSelectPopup();
+    const frame = paintedFrameRef.current;
     if (!frame) return;
     const at = point(frame, event.clientX, event.clientY);
     if (!at) return;
     flushPendingText();
     flushPendingClick();
     event.preventDefault();
-    const pending = wheelRef.current;
-    if (pending?.timer) clearTimeout(pending.timer);
+    let pending = wheelRef.current;
+    if (pending && (!sameBrowserDocument(pending.frame, frame) || Math.hypot(pending.x - at.x, pending.y - at.y) > 6)) {
+      flushPendingWheel();
+      pending = null;
+    }
     wheelRef.current = {
       x: at.x,
       y: at.y,
-      deltaX: (pending && sameFrameFence(pending.frame, frame) ? pending.deltaX : 0) + event.deltaX,
-      deltaY: (pending && sameFrameFence(pending.frame, frame) ? pending.deltaY : 0) + event.deltaY,
+      deltaX: (pending?.deltaX ?? 0) + event.deltaX,
+      deltaY: (pending?.deltaY ?? 0) + event.deltaY,
       frame,
-      timer: setTimeout(() => {
-        const batch = wheelRef.current;
-        wheelRef.current = null;
-        if (batch)
-          enqueue(
-            {
-              type: "pointer",
-              action: "scroll",
-              x: batch.x,
-              y: batch.y,
-              deltaX: batch.deltaX,
-              deltaY: batch.deltaY
-            },
-            batch.frame
-          );
-      }, 45)
+      // Retain the first event's deadline so a continuous gesture keeps moving.
+      timer: pending?.timer ?? setTimeout(flushPendingWheel, 45)
     };
   };
   const keyDown = (event) => {
+    if (composingRef.current || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) {
+      return;
+    }
+    dismissSelectPopup();
+    flushPendingWheel();
     const command = event.metaKey || event.ctrlKey;
     if (props.clipboardEnabled && command && !event.altKey && ["c", "v"].includes(event.key.toLowerCase())) {
       flushPendingText();
@@ -3194,24 +3978,28 @@ function BrowserViewport(props) {
     event.preventDefault();
     flushPendingText();
     flushPendingClick();
-    enqueue({ type: "press", key }, props.frame);
+    enqueue({ type: "press", key }, paintedFrameRef.current);
   };
+  const finishCopy = useCallback8(async () => {
+    const clipboard = await readClipboardRef.current();
+    if (!mountedRef.current) return;
+    if (clipboard.text.length === 0) return;
+    if (!await copyTextToClipboard(clipboard.text)) {
+      throw new Error("Browser text could not be copied to the local clipboard");
+    }
+  }, []);
   const copy = (event) => {
     if (!props.clipboardEnabled) return;
     event.preventDefault();
+    flushPendingWheel();
     flushPendingText();
     flushPendingClick();
-    enqueue({ type: "clipboard", operation: "copy" }, props.frame, async () => {
-      const clipboard = await readClipboardRef.current();
-      if (clipboard.text.length === 0) return;
-      if (!await copyTextToClipboard(clipboard.text)) {
-        throw new Error("Browser text could not be copied to the local clipboard");
-      }
-    });
+    enqueue({ type: "clipboard", operation: "copy" }, paintedFrameRef.current, finishCopy);
   };
   const paste = (event) => {
     if (!props.clipboardEnabled) return;
     event.preventDefault();
+    flushPendingWheel();
     flushPendingText();
     flushPendingClick();
     enqueue(
@@ -3220,15 +4008,17 @@ function BrowserViewport(props) {
         operation: "paste",
         text: event.clipboardData.getData("text/plain")
       },
-      props.frame
+      paintedFrameRef.current
     );
   };
   const input = (value, nativeComposing = false) => {
+    dismissSelectPopup();
     if (composingRef.current || nativeComposing) return;
     if (!value) return;
+    flushPendingWheel();
     flushPendingClick();
     const pending = pendingTextRef.current;
-    if (pending && sameOptionalBrowserFrame(pending.frame, props.frame)) {
+    if (pending && sameOptionalBrowserFrame(pending.frame, paintedFrameRef.current)) {
       clearTimeout(pending.timer);
       pending.text += value;
       pending.timer = setTimeout(flushPendingText, 16);
@@ -3236,7 +4026,7 @@ function BrowserViewport(props) {
       flushPendingText();
       pendingTextRef.current = {
         text: value,
-        frame: props.frame,
+        frame: paintedFrameRef.current,
         timer: setTimeout(flushPendingText, 16)
       };
     }
@@ -3249,9 +4039,9 @@ function BrowserViewport(props) {
     composingRef.current = false;
     input(event.currentTarget.value || event.data);
   };
-  const showCanvas = props.frame !== null;
-  return /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-black", children: [
-    /* @__PURE__ */ jsx(
+  const showCanvas = !props.controlUnavailable && props.frame !== null && paintedFrame !== null && sameBrowserDocument(props.frame, paintedFrame);
+  return /* @__PURE__ */ jsxs2("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-black", children: [
+    /* @__PURE__ */ jsx2(
       "canvas",
       {
         ref: canvasRef,
@@ -3269,10 +4059,11 @@ function BrowserViewport(props) {
         "aria-label": "Interactive browser page"
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       "textarea",
       {
         ref: inputRef,
+        disabled: props.controlUnavailable,
         defaultValue: "",
         onInput: (event) => input(event.currentTarget.value, event.nativeEvent.isComposing),
         onCompositionStart: compositionStart,
@@ -3282,26 +4073,44 @@ function BrowserViewport(props) {
         onPaste: paste,
         className: "pointer-events-none absolute left-1/2 top-1/2 size-px resize-none overflow-hidden opacity-0",
         "aria-label": "Browser keyboard input",
+        "aria-keyshortcuts": "Alt+ArrowDown",
         autoCapitalize: "off",
         autoCorrect: "off",
         spellCheck: false
       }
     ),
-    !showCanvas ? /* @__PURE__ */ jsx(
+    !showCanvas ? /* @__PURE__ */ jsx2(
       SemanticBrowserFallback,
       {
         observation: props.observation,
         connectionState: props.connectionState,
         supportsLiveFrames: props.supportsLiveFrames,
         error: props.connectionError,
+        controlUnavailable: props.controlUnavailable,
         onAction: (action) => enqueue(action, null),
         onReconnect: props.onReconnect,
         reconnectLabel: props.reconnectLabel,
         reconnectMessage: props.reconnectMessage
       }
     ) : null,
-    props.mutating ? /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute right-3 top-3 flex items-center gap-1.5 rounded-full border border-white/10 bg-black/65 px-2.5 py-1 text-[11px] text-white/80 backdrop-blur", children: [
-      /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }),
+    showCanvas ? /* @__PURE__ */ jsx2(
+      BrowserSelectControl,
+      {
+        manualFallback: props.inputBatchAttachment?.focusedInputObservations !== true,
+        activation: selectPopup,
+        onDismiss: () => inputRef.current?.focus({ preventScroll: true }),
+        observe: async () => {
+          flushPendingText();
+          flushPendingWheel();
+          await actionTailRef.current;
+          if (!mountedRef.current) throw new Error("The browser page changed.");
+          return await props.onObserveForInput();
+        },
+        act: props.onSelectFromObservation
+      }
+    ) : null,
+    props.mutating ? /* @__PURE__ */ jsxs2("div", { className: "pointer-events-none absolute right-3 top-3 flex items-center gap-1.5 rounded-full border border-white/10 bg-black/65 px-2.5 py-1 text-[11px] text-white/80 backdrop-blur", children: [
+      /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-3 animate-spin" }),
       " ",
       props.activityLabel ?? "Acting"
     ] }) : null
@@ -3309,20 +4118,21 @@ function BrowserViewport(props) {
 }
 function SemanticBrowserFallback(props) {
   const controlFailure = interactionControlFailureFromError(props.error);
-  const generationLoss = Boolean(props.reconnectMessage) || isAttachedChromeGenerationLossError(props.error);
+  const { controlUnavailable } = props;
+  const generationLoss = Boolean(props.reconnectMessage);
   const nodes = semanticNodes(
     props.observation?.semantic?.kind === "snapshot" ? props.observation.semantic.roots : []
   );
   const interactive = nodes.filter((node) => node.actions.includes("click")).slice(0, 8);
-  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid place-items-center bg-og-bg p-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md rounded-og-lg border border-og-border bg-og-surface-0 p-4 shadow-lg", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      props.error ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4 text-og-status-error" }) : !props.supportsLiveFrames ? /* @__PURE__ */ jsx(ZapIcon, { className: "size-4 text-og-muted" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4 animate-spin text-og-muted" }),
-      /* @__PURE__ */ jsx("p", { className: "text-og-menu font-medium text-og-fg", children: generationLoss ? "Chrome reconnected\u2014open a fresh browser/desktop." : props.error ? "Live view disconnected" : props.supportsLiveFrames ? browserConnectionLabel(props.connectionState) : "Semantic browser" })
+  return /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 grid place-items-center bg-og-bg p-6", children: /* @__PURE__ */ jsxs2("div", { className: "w-full max-w-md rounded-og-lg border border-og-border bg-og-surface-1 p-4 shadow-lg", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+      props.error ? /* @__PURE__ */ jsx2(CircleAlertIcon, { className: "size-4 text-og-danger" }) : props.connectionState === "semantic" ? /* @__PURE__ */ jsx2(ZapIcon, { className: "size-4 text-og-fg-muted" }) : /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-4 animate-spin text-og-fg-muted" }),
+      /* @__PURE__ */ jsx2("p", { className: "text-og-menu font-medium text-og-fg", children: generationLoss ? "Chrome reconnected\u2014open a fresh browser/desktop." : controlUnavailable ? "Browser controls unavailable" : props.error ? props.supportsLiveFrames ? "Live view disconnected" : "Browser unavailable" : props.connectionState === "semantic" ? "Semantic browser" : browserConnectionLabel(props.connectionState) })
     ] }),
-    props.error || props.reconnectMessage ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-og-control leading-5 text-og-muted", children: props.reconnectMessage ?? controlFailure?.message ?? props.error?.message }) : null,
-    interactive.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-og-border pt-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-2 text-og-xs text-og-subtle", children: props.supportsLiveFrames ? "Page controls remain available" : "Available page controls" }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: interactive.map((node) => /* @__PURE__ */ jsx(
+    props.error || props.reconnectMessage ? /* @__PURE__ */ jsx2("p", { className: "mt-2 text-og-control leading-5 text-og-fg-muted", children: props.reconnectMessage ?? controlFailure?.message ?? props.error?.message }) : null,
+    interactive.length > 0 && !controlUnavailable ? /* @__PURE__ */ jsxs2("div", { className: "mt-3 border-t border-og-border pt-3", children: [
+      /* @__PURE__ */ jsx2("p", { className: "mb-2 text-og-xs text-og-fg-subtle", children: props.supportsLiveFrames ? "Page controls remain available" : "Available page controls" }),
+      /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-1.5", children: interactive.map((node) => /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
@@ -3336,12 +4146,12 @@ function SemanticBrowserFallback(props) {
         node.ref
       )) })
     ] }) : null,
-    props.error && props.supportsLiveFrames && (!generationLoss || props.reconnectLabel) ? /* @__PURE__ */ jsx(
+    props.error && (!generationLoss || props.reconnectLabel) ? /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
         onClick: props.onReconnect,
-        className: "mt-3 text-og-control font-medium text-og-accent hover:underline",
+        className: "mt-3 text-og-control font-medium og-link",
         children: props.reconnectLabel ?? (controlFailure?.retryable === false ? "Try again" : "Reconnect")
       }
     ) : null
@@ -3350,8 +4160,8 @@ function SemanticBrowserFallback(props) {
 function BrowserStatusBar(props) {
   const errors = (props.observation?.diagnostics.consoleErrorCount ?? 0) + (props.observation?.diagnostics.pageErrorCount ?? 0);
   const failed = props.observation?.diagnostics.failedRequestCount ?? 0;
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-7 shrink-0 items-center gap-2 border-t border-og-border bg-og-surface-0 px-2 text-og-xs text-og-subtle", children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("div", { className: "flex h-7 shrink-0 items-center gap-2 border-t border-og-border bg-og-surface-1 px-2 text-og-xs text-og-fg-subtle", children: [
+    /* @__PURE__ */ jsx2(
       "span",
       {
         className: cn(
@@ -3360,11 +4170,12 @@ function BrowserStatusBar(props) {
         )
       }
     ),
-    /* @__PURE__ */ jsx("span", { children: props.connectionState === "live" ? "Live" : props.connectionState === "semantic" ? "Semantic" : browserConnectionLabel(props.connectionState) }),
-    /* @__PURE__ */ jsx("span", { children: props.profile?.name ?? "Temporary browser" }),
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: props.target?.title }),
-    props.refreshing ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }) : null,
-    props.onOpenComputer ? /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx2("span", { children: props.connectionState === "live" ? "Live" : props.connectionState === "semantic" ? "Semantic" : browserConnectionLabel(props.connectionState) }),
+    props.inputFailure ? /* @__PURE__ */ jsx2("span", { className: "text-og-status-failed", children: props.inputFailure.state === "failed" ? "Input failed" : "Input result unknown" }) : null,
+    /* @__PURE__ */ jsx2("span", { children: props.profile?.name ?? "Temporary browser" }),
+    /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate", children: props.target?.title }),
+    props.refreshing ? /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-3 animate-spin" }) : null,
+    props.onOpenComputer ? /* @__PURE__ */ jsxs2(
       "button",
       {
         type: "button",
@@ -3372,12 +4183,12 @@ function BrowserStatusBar(props) {
         className: "flex items-center gap-1 rounded px-1.5 py-0.5 transition hover:bg-og-surface-2 hover:text-og-fg",
         "aria-label": "Open this browser window in Desktop",
         children: [
-          /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3" }),
+          /* @__PURE__ */ jsx2(MonitorIcon, { className: "size-3" }),
           "Desktop"
         ]
       }
     ) : null,
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs2(
       "button",
       {
         type: "button",
@@ -3389,7 +4200,7 @@ function BrowserStatusBar(props) {
           props.diagnosticsOpen && "bg-og-surface-2 text-og-fg"
         ),
         children: [
-          /* @__PURE__ */ jsx(BugIcon, { className: "size-3" }),
+          /* @__PURE__ */ jsx2(BugIcon, { className: "size-3" }),
           errors + failed > 0 ? errors + failed : "Debug"
         ]
       }
@@ -3400,101 +4211,102 @@ function BrowserDiagnosticsDrawer(props) {
   const session = props.session;
   const diagnostics = props.observation?.diagnostics;
   const semanticMode = props.observation?.semantic ? "Semantic page structure available" : props.observation?.screenshot ? "Visual fallback in use" : "Waiting for page observation";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "aside",
     {
       id: "browser-diagnostics-drawer",
       role: "region",
       "aria-label": "Browser diagnostics",
-      className: "absolute bottom-7 right-0 top-10 z-40 flex w-full max-w-md flex-col border-l border-og-border bg-og-surface-0 shadow-2xl",
+      className: "absolute inset-y-0 right-0 z-40 flex min-h-0 w-full max-w-md flex-col border-l border-og-border bg-og-surface-1 shadow-2xl",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex h-11 shrink-0 items-center gap-2 border-b border-og-border px-3", children: [
-          /* @__PURE__ */ jsx(BugIcon, { className: "size-4 text-og-muted" }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-og-control font-semibold text-og-fg", children: "Browser diagnostics" }),
-            /* @__PURE__ */ jsx("p", { className: "truncate text-og-xs text-og-subtle", children: props.target?.title || shortUrl(props.target?.url ?? "") || "Current tab" })
+        /* @__PURE__ */ jsxs2("div", { className: "flex min-h-11 shrink-0 items-center gap-2 border-b border-og-border px-3 py-2", children: [
+          /* @__PURE__ */ jsx2(BugIcon, { className: "size-4 shrink-0 text-og-fg-muted" }),
+          /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx2("p", { className: "text-og-control font-semibold text-og-fg", children: "Browser diagnostics" }),
+            /* @__PURE__ */ jsx2("p", { className: "truncate text-og-xs text-og-fg-subtle", children: props.target?.title || shortUrl(props.target?.url ?? "") || "Current tab" })
           ] }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
               onClick: props.onRefresh,
               disabled: props.state.loading,
-              className: "grid size-7 place-items-center rounded-og-sm text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-40",
+              className: "grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-40",
               "aria-label": "Refresh browser diagnostics",
-              children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: cn("size-3.5", props.state.loading && "animate-spin") })
+              children: /* @__PURE__ */ jsx2(RefreshCwIcon, { className: cn("size-3.5", props.state.loading && "animate-spin") })
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
               onClick: props.onClose,
-              className: "grid size-7 place-items-center rounded-og-sm text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg",
+              className: "grid size-7 shrink-0 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg",
               "aria-label": "Close browser diagnostics",
-              children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+              children: /* @__PURE__ */ jsx2(XIcon, { className: "size-3.5" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
-          /* @__PURE__ */ jsxs("section", { className: "border-b border-og-border p-3", "aria-labelledby": "browser-runtime-title", children: [
-            /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs2("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+          /* @__PURE__ */ jsxs2("section", { className: "border-b border-og-border p-3", "aria-labelledby": "browser-runtime-title", children: [
+            /* @__PURE__ */ jsx2(
               "h3",
               {
                 id: "browser-runtime-title",
-                className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-og-subtle",
+                className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-og-fg-subtle",
                 children: "Runtime"
               }
             ),
-            /* @__PURE__ */ jsxs("dl", { className: "mt-2 grid grid-cols-[7rem_minmax(0,1fr)] gap-x-3 gap-y-1.5 text-og-xs", children: [
-              /* @__PURE__ */ jsx(DiagnosticFact, { label: "Engine", value: browserEngineLabel(session) }),
-              /* @__PURE__ */ jsx(DiagnosticFact, { label: "Driver", value: session?.driverId ?? "Unavailable" }),
-              /* @__PURE__ */ jsx(DiagnosticFact, { label: "Placement", value: placementLabel(session ?? void 0) }),
-              /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs2("dl", { className: "mt-2 grid grid-cols-[7rem_minmax(0,1fr)] gap-x-3 gap-y-1.5 text-og-xs", children: [
+              /* @__PURE__ */ jsx2(DiagnosticFact, { label: "Engine", value: browserEngineLabel(session) }),
+              /* @__PURE__ */ jsx2(DiagnosticFact, { label: "Driver", value: session?.driverId ?? "Unavailable" }),
+              /* @__PURE__ */ jsx2(DiagnosticFact, { label: "Placement", value: placementLabel(session ?? void 0) }),
+              /* @__PURE__ */ jsx2(
                 DiagnosticFact,
                 {
                   label: "Profile",
                   value: props.profile ? `${props.profile.name}${props.baseRevisionOrdinal ? ` \xB7 v${props.baseRevisionOrdinal}` : ""}` : "Temporary"
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 DiagnosticFact,
                 {
                   label: "Controller",
                   value: shortGeneration(session?.controller?.controllerGeneration)
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 DiagnosticFact,
                 {
                   label: "Network",
                   value: session?.networkRouteId ? "Custom route" : "Placement default"
                 }
               ),
-              /* @__PURE__ */ jsx(DiagnosticFact, { label: "Observation", value: semanticMode })
+              /* @__PURE__ */ jsx2(DiagnosticFact, { label: "Observation", value: semanticMode })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("section", { className: "border-b border-og-border p-3", "aria-labelledby": "browser-page-title", children: [
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs2("section", { className: "border-b border-og-border p-3", "aria-labelledby": "browser-page-title", children: [
+            /* @__PURE__ */ jsx2(
               "h3",
               {
                 id: "browser-page-title",
-                className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-og-subtle",
-                children: "Current page"
+                className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-og-fg-subtle",
+                children: "Tab diagnostics"
               }
             ),
-            /* @__PURE__ */ jsxs("dl", { className: "mt-2 grid grid-cols-2 gap-2", children: [
-              /* @__PURE__ */ jsx(DiagnosticCount, { label: "Console errors", value: diagnostics?.consoleErrorCount ?? 0 }),
-              /* @__PURE__ */ jsx(DiagnosticCount, { label: "Page errors", value: diagnostics?.pageErrorCount ?? 0 }),
-              /* @__PURE__ */ jsx(DiagnosticCount, { label: "Failed requests", value: diagnostics?.failedRequestCount ?? 0 }),
-              /* @__PURE__ */ jsx(DiagnosticCount, { label: "Downloads", value: diagnostics?.downloadCount ?? 0 })
+            /* @__PURE__ */ jsx2("p", { className: "mt-1 text-og-xs text-og-fg-subtle", children: "Includes earlier pages in this tab." }),
+            /* @__PURE__ */ jsxs2("dl", { className: "mt-2 grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ jsx2(DiagnosticCount, { label: "Console errors", value: diagnostics?.consoleErrorCount }),
+              /* @__PURE__ */ jsx2(DiagnosticCount, { label: "Page errors", value: diagnostics?.pageErrorCount }),
+              /* @__PURE__ */ jsx2(DiagnosticCount, { label: "Failed requests", value: diagnostics?.failedRequestCount }),
+              /* @__PURE__ */ jsx2(DiagnosticCount, { label: "Downloads", value: diagnostics?.downloadCount })
             ] }),
-            session?.failureCode ? /* @__PURE__ */ jsxs("p", { className: "mt-2 rounded-og-sm border border-og-status-error/30 bg-og-status-error/5 px-2.5 py-2 text-og-xs text-og-status-error", children: [
+            session?.failureCode ? /* @__PURE__ */ jsxs2("p", { className: "mt-2 rounded-og-sm border border-og-status-error/30 bg-og-status-error/5 px-2.5 py-2 text-og-xs text-og-danger", children: [
               "Browser state: ",
               session.failureCode
             ] }) : null
           ] }),
-          props.downloadsEnabled ? /* @__PURE__ */ jsx(
+          props.downloadsEnabled ? /* @__PURE__ */ jsx2(
             BrowserDownloadsPanel,
             {
               downloads: props.downloads,
@@ -3506,39 +4318,39 @@ function BrowserDiagnosticsDrawer(props) {
               onRefresh: props.onRefreshDownloads
             }
           ) : null,
-          /* @__PURE__ */ jsxs("section", { className: "p-3", "aria-labelledby": "browser-events-title", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-              /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs2("section", { className: "p-3", "aria-labelledby": "browser-events-title", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx2(
                 "h3",
                 {
                   id: "browser-events-title",
-                  className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-og-subtle",
+                  className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-og-fg-subtle",
                   children: "Recent events"
                 }
               ),
-              props.state.batch?.truncated ? /* @__PURE__ */ jsx("span", { className: "text-[10px] text-og-subtle", children: "Newest 100" }) : null
+              props.state.batch?.truncated ? /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-og-fg-subtle", children: "Newest 100" }) : null
             ] }),
-            props.state.loading && !props.state.batch ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-6 text-og-control text-og-muted", children: [
-              /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }),
+            props.state.loading && !props.state.batch ? /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 py-6 text-og-control text-og-fg-muted", children: [
+              /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-3.5 animate-spin" }),
               " Loading diagnostics\u2026"
-            ] }) : props.state.error ? /* @__PURE__ */ jsxs("div", { className: "py-5", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-og-control text-og-status-error", children: props.state.error.message }),
-              /* @__PURE__ */ jsx(
+            ] }) : props.state.error ? /* @__PURE__ */ jsxs2("div", { className: "py-5", children: [
+              /* @__PURE__ */ jsx2("p", { className: "text-og-control text-og-danger", children: props.state.error.message }),
+              /* @__PURE__ */ jsx2(
                 "button",
                 {
                   type: "button",
                   onClick: props.onRefresh,
-                  className: "mt-2 text-og-control font-medium text-og-accent hover:underline",
+                  className: "mt-2 text-og-control font-medium og-link",
                   children: "Try again"
                 }
               )
-            ] }) : props.state.batch?.entries.length ? /* @__PURE__ */ jsx("ol", { className: "mt-2 space-y-2", children: props.state.batch.entries.map((entry) => /* @__PURE__ */ jsxs(
+            ] }) : props.state.batch?.entries.length ? /* @__PURE__ */ jsx2("ol", { className: "mt-2 space-y-2", children: props.state.batch.entries.map((entry) => /* @__PURE__ */ jsxs2(
               "li",
               {
                 className: "rounded-og-sm border border-og-border bg-og-bg p-2.5",
                 children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[10px] text-og-subtle", children: [
-                    /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-[10px] text-og-fg-subtle", children: [
+                    /* @__PURE__ */ jsx2(
                       "span",
                       {
                         className: cn(
@@ -3548,14 +4360,14 @@ function BrowserDiagnosticsDrawer(props) {
                         children: diagnosticKindLabel(entry.kind)
                       }
                     ),
-                    /* @__PURE__ */ jsx("span", { className: "ml-auto", children: formatDiagnosticTime(entry.occurredAt) })
+                    /* @__PURE__ */ jsx2("span", { className: "ml-auto", children: formatDiagnosticTime(entry.occurredAt) })
                   ] }),
-                  /* @__PURE__ */ jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-og-xs leading-5 text-og-fg", children: entry.message }),
-                  entry.url || entry.filename || entry.method || entry.status ? /* @__PURE__ */ jsx("p", { className: "mt-1 truncate font-og-mono text-[10px] text-og-subtle", children: [entry.method, entry.status, entry.filename, entry.url].filter((value) => value !== null).join(" \xB7 ") }) : null
+                  /* @__PURE__ */ jsx2("p", { className: "mt-1 whitespace-pre-wrap break-words text-og-xs leading-5 text-og-fg", children: entry.message }),
+                  entry.url || entry.filename || entry.method || entry.status ? /* @__PURE__ */ jsx2("p", { className: "mt-1 truncate font-og-mono text-[10px] text-og-fg-subtle", children: [entry.method, entry.status, entry.filename, entry.url].filter((value) => value !== null).join(" \xB7 ") }) : null
                 ]
               },
               entry.sequence
-            )) }) : /* @__PURE__ */ jsx("p", { className: "py-6 text-og-control text-og-muted", children: "No diagnostics for this tab." })
+            )) }) : /* @__PURE__ */ jsx2("p", { className: "py-6 text-og-control text-og-fg-muted", children: "No diagnostics for this tab." })
           ] })
         ] })
       ]
@@ -3563,10 +4375,10 @@ function BrowserDiagnosticsDrawer(props) {
   );
 }
 function BrowserDownloadsPanel(props) {
-  const [paths, setPaths] = useState8({});
-  const [overwrite, setOverwrite] = useState8({});
-  const [savedPaths, setSavedPaths] = useState8({});
-  const [errors, setErrors] = useState8({});
+  const [paths, setPaths] = useState9({});
+  const [overwrite, setOverwrite] = useState9({});
+  const [savedPaths, setSavedPaths] = useState9({});
+  const [errors, setErrors] = useState9({});
   const saving = useMemo2(() => new Set(props.savingDownloadIds), [props.savingDownloadIds]);
   const save = (download) => {
     const destinationPath = (paths[download.id] ?? defaultDownloadDestination(download)).trim();
@@ -3581,46 +4393,46 @@ function BrowserDownloadsPanel(props) {
       }));
     });
   };
-  return /* @__PURE__ */ jsxs("section", { className: "border-b border-og-border p-3", "aria-labelledby": "browser-downloads-title", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(DownloadIcon, { className: "size-3.5 text-og-muted" }),
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("section", { className: "border-b border-og-border p-3", "aria-labelledby": "browser-downloads-title", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx2(DownloadIcon, { className: "size-3.5 text-og-fg-muted" }),
+      /* @__PURE__ */ jsx2(
         "h3",
         {
           id: "browser-downloads-title",
-          className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-og-subtle",
+          className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-og-fg-subtle",
           children: "Downloads"
         }
       ),
-      props.refreshing ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "ml-auto size-3 animate-spin text-og-muted" }) : null
+      props.refreshing ? /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "ml-auto size-3 animate-spin text-og-fg-muted" }) : null
     ] }),
-    props.loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-5 text-og-control text-og-muted", children: [
-      /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }),
+    props.loading ? /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 py-5 text-og-control text-og-fg-muted", children: [
+      /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-3.5 animate-spin" }),
       " Loading downloads\u2026"
-    ] }) : props.error ? /* @__PURE__ */ jsxs("div", { className: "py-4", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-og-control text-og-status-error", children: props.error.message }),
-      /* @__PURE__ */ jsx(
+    ] }) : props.error ? /* @__PURE__ */ jsxs2("div", { className: "py-4", children: [
+      /* @__PURE__ */ jsx2("p", { className: "text-og-control text-og-danger", children: props.error.message }),
+      /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
           onClick: props.onRefresh,
-          className: "mt-2 text-og-control font-medium text-og-accent hover:underline",
+          className: "mt-2 text-og-control font-medium og-link",
           children: "Try again"
         }
       )
-    ] }) : props.downloads.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-4 text-og-control text-og-muted", children: "No files downloaded yet." }) : /* @__PURE__ */ jsx("ol", { className: "mt-2 space-y-2", children: props.downloads.map((download) => {
+    ] }) : props.downloads.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "py-4 text-og-control text-og-fg-muted", children: "No files downloaded yet." }) : /* @__PURE__ */ jsx2("ol", { className: "mt-2 space-y-2", children: props.downloads.map((download) => {
       const destinationPath = paths[download.id] ?? defaultDownloadDestination(download);
       const isSaving = saving.has(download.id);
       const isSaved = savedPaths[download.id] === destinationPath;
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs2(
         "li",
         {
           className: "rounded-og-sm border border-og-border bg-og-bg p-2.5",
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "mt-0.5 grid size-6 shrink-0 place-items-center rounded bg-og-surface-2 text-og-muted", children: isSaved ? /* @__PURE__ */ jsx(FileCheck2Icon, { className: "size-3.5 text-og-status-success" }) : /* @__PURE__ */ jsx(DownloadIcon, { className: "size-3.5" }) }),
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 items-start gap-2", children: [
+              /* @__PURE__ */ jsx2("span", { className: "mt-0.5 grid size-6 shrink-0 place-items-center rounded bg-og-surface-2 text-og-fg-muted", children: isSaved ? /* @__PURE__ */ jsx2(FileCheck2Icon, { className: "size-3.5 text-og-status-idle" }) : /* @__PURE__ */ jsx2(DownloadIcon, { className: "size-3.5" }) }),
+              /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx2(
                   "p",
                   {
                     className: "truncate text-og-xs font-medium text-og-fg",
@@ -3628,12 +4440,12 @@ function BrowserDownloadsPanel(props) {
                     children: download.filename
                   }
                 ),
-                /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[10px] text-og-subtle", children: downloadStatusLabel(download) })
+                /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-[10px] text-og-fg-subtle", children: downloadStatusLabel(download) })
               ] })
             ] }),
-            download.status === "completed" ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
-                /* @__PURE__ */ jsx(
+            download.status === "completed" ? /* @__PURE__ */ jsxs2("div", { className: "mt-2", children: [
+              /* @__PURE__ */ jsxs2("div", { className: "flex gap-1.5", children: [
+                /* @__PURE__ */ jsx2(
                   "input",
                   {
                     type: "text",
@@ -3648,10 +4460,10 @@ function BrowserDownloadsPanel(props) {
                     },
                     disabled: isSaving,
                     "aria-label": `Workspace path for ${download.filename}`,
-                    className: "h-7 min-w-0 flex-1 rounded-og-sm border border-og-border bg-og-surface-0 px-2 font-og-mono text-[10px] text-og-fg transition focus:border-og-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50"
+                    className: "h-7 min-w-0 flex-1 rounded-og-sm border border-og-border bg-og-surface-1 px-2 font-og-mono text-[10px] text-og-fg transition focus:border-og-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent disabled:opacity-50"
                   }
                 ),
-                /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsxs2(
                   "button",
                   {
                     type: "button",
@@ -3659,14 +4471,14 @@ function BrowserDownloadsPanel(props) {
                     disabled: isSaving || !destinationPath.trim() || isSaved && !overwrite[download.id],
                     className: "inline-flex h-7 shrink-0 items-center gap-1 rounded-og-sm border border-og-border bg-og-surface-1 px-2 text-[10px] font-medium text-og-fg transition hover:bg-og-surface-2 disabled:opacity-40",
                     children: [
-                      isSaving ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsx(SaveIcon, { className: "size-3" }),
+                      isSaving ? /* @__PURE__ */ jsx2(LoaderCircleIcon, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsx2(SaveIcon, { className: "size-3" }),
                       isSaving ? "Saving" : isSaved ? "Saved" : overwrite[download.id] ? "Replace" : "Save"
                     ]
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("label", { className: "mt-1.5 flex w-fit items-center gap-1.5 text-[10px] text-og-subtle", children: [
-                /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs2("label", { className: "mt-1.5 flex w-fit items-center gap-1.5 text-[10px] text-og-fg-subtle", children: [
+                /* @__PURE__ */ jsx2(
                   "input",
                   {
                     type: "checkbox",
@@ -3684,7 +4496,7 @@ function BrowserDownloadsPanel(props) {
                 ),
                 "Replace an existing workspace file"
               ] }),
-              errors[download.id] ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 break-words text-[10px] text-og-status-error", children: errors[download.id] }) : null
+              errors[download.id] ? /* @__PURE__ */ jsx2("p", { className: "mt-1.5 break-words text-[10px] text-og-danger", children: errors[download.id] }) : null
             ] }) : null
           ]
         },
@@ -3712,22 +4524,22 @@ function defaultDownloadDestination(download) {
   return portable;
 }
 function DiagnosticFact(props) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("dt", { className: "text-og-subtle", children: props.label }),
-    /* @__PURE__ */ jsx("dd", { className: "min-w-0 truncate text-og-fg", title: props.value, children: props.value })
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("dt", { className: "text-og-fg-subtle", children: props.label }),
+    /* @__PURE__ */ jsx2("dd", { className: "min-w-0 truncate text-og-fg", title: props.value, children: props.value })
   ] });
 }
 function DiagnosticCount(props) {
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-og-sm border border-og-border bg-og-bg px-2.5 py-2", children: [
-    /* @__PURE__ */ jsx("dt", { className: "text-[10px] text-og-subtle", children: props.label }),
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("div", { className: "rounded-og-sm border border-og-border bg-og-bg px-2.5 py-2", children: [
+    /* @__PURE__ */ jsx2("dt", { className: "text-[10px] text-og-fg-subtle", children: props.label }),
+    /* @__PURE__ */ jsx2(
       "dd",
       {
         className: cn(
           "mt-0.5 text-og-sm font-semibold",
-          props.value ? "text-og-fg" : "text-og-muted"
+          props.value ? "text-og-fg" : "text-og-fg-muted"
         ),
-        children: props.value
+        children: props.value ?? "Unavailable"
       }
     )
   ] });
@@ -3754,23 +4566,23 @@ function diagnosticKindLabel(kind) {
   }
 }
 function diagnosticTone(level) {
-  if (level === "error") return "text-og-status-error";
+  if (level === "error") return "text-og-danger";
   if (level === "warning") return "text-og-status-waiting";
-  return "text-og-muted";
+  return "text-og-fg-muted";
 }
 function formatDiagnosticTime(value) {
   const date = new Date(value);
   return Number.isNaN(date.getTime()) ? "" : date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
 }
 function BrowserNotice(props) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       className: cn(
-        "grid h-full place-items-center bg-og-bg text-og-control text-og-muted",
+        "grid h-full place-items-center bg-og-bg text-og-control text-og-fg-muted",
         props.className
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
         props.icon,
         props.text
       ] })
@@ -3819,7 +4631,10 @@ function frameMatchesSelectedTarget(frame, session, target) {
   );
 }
 function sameFrameFence(left, right) {
-  return left.browserSessionId === right.browserSessionId && left.controllerGeneration === right.controllerGeneration && left.targetId === right.targetId && left.targetGeneration === right.targetGeneration && left.documentGeneration === right.documentGeneration && left.frameId === right.frameId;
+  return sameBrowserDocument(left, right) && left.frameId === right.frameId;
+}
+function sameBrowserDocument(left, right) {
+  return left.browserSessionId === right.browserSessionId && left.controllerGeneration === right.controllerGeneration && left.targetId === right.targetId && left.targetGeneration === right.targetGeneration && left.documentGeneration === right.documentGeneration;
 }
 function sameOptionalBrowserFrame(left, right) {
   return left === null || right === null ? left === right : sameFrameFence(left, right);
@@ -3895,13 +4710,14 @@ function shortUrl(value) {
 }
 
 export {
-  useBrowserFrameStream,
+  useSiteAuthConnections,
   useAttachedBrowsers,
+  useBrowserSessions,
   useBrowserIdentities,
-  useBrowserDownloads,
   useBrowserSession,
-  useBrowserSessions,
-  useSiteAuthConnections,
+  useBrowserDownloads,
+  useBrowserFrameStream,
+  staleBrowserEndRetryDelayMs,
   BrowserViewer
 };
-//# sourceMappingURL=chunk-ZPBTI3TE.js.map
+//# sourceMappingURL=chunk-KZC6QRNR.js.map