@opengeni/react 1.4.0 → 1.4.4

package/dist/{chunk-HDJWDK7W.js → chunk-2OQA3CPB.js}

@@ -1,3 +1,4 @@
+"use client";
 import {
   InteractionInterventionBanner,
   isInteractionControlUnavailable,
@@ -6,16 +7,16 @@ import {
   useInteractionInterventions,
   useInteractionInvalidation,
   useViewerMenuDismiss
-} from "./chunk-J6DBS4T3.js";
+} from "./chunk-BNKV5ZLF.js";
 import {
   copyTextToClipboard
-} from "./chunk-JVYQRRC4.js";
+} from "./chunk-CVYCLFMH.js";
 import {
   interactionHostPlatform
-} from "./chunk-RHREZ7BO.js";
+} from "./chunk-ZUWF4NF7.js";
 import {
   formatBytes
-} from "./chunk-UTRTG6LH.js";
+} from "./chunk-LVS3MH5T.js";
 import {
   STREAM_CLOSE_REASON_NORMAL,
   STREAM_KIND_BROWSER,
@@ -24,16 +25,16 @@ import {
   decodeStreamOpenAck,
   encodeStreamClose,
   encodeStreamOpen
-} from "./chunk-5J4FOW6Q.js";
+} from "./chunk-TNEZNMSN.js";
 import {
   usePageLiveActivity
-} from "./chunk-YQEAA6LT.js";
+} from "./chunk-QHUE7E4N.js";
 import {
   useEmbeddedBrowserInteraction
-} from "./chunk-TKOTKRWY.js";
+} from "./chunk-XTD7TZHW.js";
 import {
   cn
-} from "./chunk-22KP6LR5.js";
+} from "./chunk-TXS65BB2.js";
 
 // src/components/browser-viewer.tsx
 import { interactionControlFailureFromError } from "@opengeni/sdk/interaction";
@@ -866,6 +867,11 @@ 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;
@@ -875,13 +881,15 @@ function useBrowserSession(options) {
   });
   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
   );
@@ -902,17 +910,23 @@ 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 refreshInventory = useCallback5(
-    async (checkInput = false) => {
-      if (!enabled || !browserSessionId) return;
+    async (checkInput = false, observeSelectedTarget = true) => {
+      if (!enabled || !browserSessionId || !isCurrentSource()) return;
       const checkedInputFailure = inputFailureRef.current;
       const id = requestRef.current.id + 1;
       requestRef.current.controller?.abort();
@@ -927,14 +941,18 @@ function useBrowserSession(options) {
             signal: controller.signal
           })
         ]);
-        if (!mountedRef.current || requestRef.current.id !== id) return;
+        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, observation: retainedObservation };
+        observationRef.current = {
+          browserSessionId,
+          observation: retainedObservation
+        };
         setState(
-          (current) => current.browserSessionId === browserSessionId ? {
+          (current) => isCurrentSource() && current.source === source && current.browserSessionId === browserSessionId ? {
             ...current,
             session,
             targets: targetResponse.targets,
@@ -947,7 +965,7 @@ function useBrowserSession(options) {
             inputFailure: checkInput && session.id === browserSessionId && targetResponse.browserSessionId === browserSessionId && current.inputFailure === checkedInputFailure ? null : current.inputFailure
           } : current
         );
-        if (!selected || !semanticObservationEnabledRef.current) return;
+        if (!selected || !observeSelectedTarget || !semanticObservationEnabledRef.current) return;
         try {
           const observation = await client.observeBrowserTarget(
             workspaceId,
@@ -955,22 +973,29 @@ function useBrowserSession(options) {
             selected.id,
             { signal: controller.signal }
           );
-          if (!mountedRef.current || requestRef.current.id !== id) return;
+          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) => current.browserSessionId === browserSessionId && current.selectedTargetId === observation.target.id ? { ...current, observation } : current
+            (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 || !mountedRef.current || requestRef.current.id !== id)
+          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;
+        if (controller.signal.aborted || !isCurrentSource() || requestRef.current.id !== id) return;
         setState(
-          (current) => current.browserSessionId === browserSessionId ? {
+          (current) => isCurrentSource() && current.source === source && current.browserSessionId === browserSessionId ? {
             ...current,
             loading: false,
             error: cause instanceof Error ? cause : new Error(String(cause))
@@ -982,11 +1007,11 @@ function useBrowserSession(options) {
         }
       }
     },
-    [browserSessionId, client, enabled, workspaceId]
+    [browserSessionId, client, enabled, isCurrentSource, source, workspaceId]
   );
   const refresh = useCallback5(async () => await refreshInventory(true), [refreshInventory]);
   const refreshSemantic = useCallback5(async () => {
-    if (!enabled || !browserSessionId) return;
+    if (!enabled || !browserSessionId || !isCurrentSource()) return;
     const target = selectedTargetRef.current;
     if (!target) return;
     const id = requestRef.current.id + 1;
@@ -1000,34 +1025,34 @@ function useBrowserSession(options) {
         target.id,
         { signal: controller.signal }
       );
-      if (!mountedRef.current || requestRef.current.id !== id) return;
+      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.selectedTargetId === target.id ? { ...current, observation } : 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 };
     }
-  }, [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 refreshInventory();
     return () => {
       mountedRef.current = false;
       invalidateRefresh();
     };
-  }, [browserSessionId, enabled, invalidateRefresh, refreshInventory]);
+  }, [browserSessionId, enabled, invalidateRefresh, isCurrentSource, refreshInventory, source]);
   useEffect5(() => {
     const previous = previousSemanticObservationRef.current;
     previousSemanticObservationRef.current = {
@@ -1041,11 +1066,19 @@ function useBrowserSession(options) {
       }
       observationRef.current = { browserSessionId, observation: null };
       setState(
-        (current) => current.browserSessionId === browserSessionId ? { ...current, observation: null } : current
+        (current) => isCurrentSource() && current.source === source && current.browserSessionId === browserSessionId ? { ...current, observation: null } : current
       );
       void refreshSemantic();
     }
-  }, [browserSessionId, enabled, pollIntervalMs, refreshSemantic, semanticObservationEnabled]);
+  }, [
+    browserSessionId,
+    enabled,
+    isCurrentSource,
+    pollIntervalMs,
+    refreshSemantic,
+    semanticObservationEnabled,
+    source
+  ]);
   useEffect5(() => {
     if (!enabled || !pageLive || visible.mutating || refreshBlocked) return;
     const timer = setInterval(() => {
@@ -1057,6 +1090,7 @@ function useBrowserSession(options) {
     if (!enabled || !browserSessionId || !pageLive || refreshBlocked) return;
     let disposed = false;
     const heartbeat = () => {
+      if (!isCurrentSource()) return;
       void client.heartbeatBrowserSession(workspaceId, browserSessionId).catch(() => {
         if (!disposed) void refreshInventory();
       });
@@ -1066,151 +1100,216 @@ function useBrowserSession(options) {
       disposed = true;
       clearInterval(timer);
     };
-  }, [browserSessionId, client, enabled, pageLive, refreshInventory, 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 };
-        lastObservationAtRef.current = Date.now();
-        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 };
-        lastObservationAtRef.current = Date.now();
-        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 };
-        if (observation) lastObservationAtRef.current = Date.now();
-        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, 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.");
       }
@@ -1220,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,
@@ -1229,6 +1328,21 @@ 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,
@@ -1236,40 +1350,49 @@ function useBrowserSession(options) {
           observationMode,
           action
         });
-        if (receipt.state !== "completed") {
-          const inputFailure = {
-            operationId: receipt.operationId,
-            state: receipt.state,
-            error: receipt.error
-          };
-          setState(
-            (current) => current.browserSessionId === browserSessionId ? { ...current, inputFailure } : current
-          );
-        }
-        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
           };
+          selectedTargetRef.current = receivedObservation.target;
           lastObservationAtRef.current = Date.now();
-          setState(
-            (current) => current.browserSessionId === browserSessionId ? {
-              ...current,
-              observation: receipt.observation,
-              targets: replaceTarget(current.targets, receipt.observation.target)
-            } : current
-          );
         }
+        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),
@@ -1281,13 +1404,16 @@ function useBrowserSession(options) {
   );
   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 (!mountedRef.current || observation.browserSessionId !== browserSessionId || !sameObservationTarget(observation, selectedTargetRef.current)) {
+    if (!isCurrentSource() || observation.browserSessionId !== browserSessionId || !sameObservationTarget(observation, selectedTargetRef.current)) {
       throw new Error("The browser page changed. Open the options again.");
     }
     return observation;
-  }, [browserSessionId, client, workspaceId]);
+  }, [browserSessionId, client, enabled, isCurrentSource, workspaceId]);
   const actFromObservation = useCallback5(
     async (action, observation) => {
       if (!sameObservationTarget(observation, selectedTargetRef.current)) {
@@ -1295,6 +1421,7 @@ function useBrowserSession(options) {
       }
       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,
@@ -1305,6 +1432,9 @@ function useBrowserSession(options) {
   );
   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.");
@@ -1316,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,
@@ -1357,7 +1490,8 @@ function emptyState4(browserSessionId, loading) {
     loading,
     mutating: false,
     error: null,
-    inputFailure: null
+    inputFailure: null,
+    actionResultOrder: 0
   };
 }
 function chooseTarget(targets, preferredId) {
@@ -4546,4 +4680,4 @@ export {
   useBrowserFrameStream,
   BrowserViewer
 };
-//# sourceMappingURL=chunk-HDJWDK7W.js.map
+//# sourceMappingURL=chunk-2OQA3CPB.js.map