@opengeni/react 1.4.2 → 1.4.5-canary.37458084490001

package/src/hooks/use-computer-session.ts

@@ -18,6 +18,19 @@ import {
 } from "../session-context";
 import { usePageLiveActivity } from "./internal";
 
+// Keep caller promises intact while fencing their later viewer side effects.
+// These local fences never become part of an operation receipt on the wire.
+const actionResultFences = new WeakMap<object, () => boolean>();
+export function isStaleComputerActionResult(value: unknown): boolean {
+  return typeof value === "object" && value !== null && actionResultFences.get(value)?.() === false;
+}
+export function computerActionReceiptError(receipt: ComputerActionReceipt): Error {
+  const error = new Error(receipt.error?.message ?? "Desktop input did not complete.");
+  const fence = actionResultFences.get(receipt);
+  if (fence) actionResultFences.set(error, fence);
+  return error;
+}
+
 export type UseComputerSessionOptions = EmbeddedComputerInteractionClientOverride & {
   computerSessionId: string | null;
   enabled?: boolean | undefined;
@@ -54,30 +67,48 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
   const { client, workspaceId } = useEmbeddedComputerInteraction(options);
   const computerSessionId = options.computerSessionId;
   const enabled = (options.enabled ?? true) && computerSessionId !== null;
+  const sourceRef = useRef<ComputerControlSource>({
+    client,
+    workspaceId,
+    computerSessionId,
+    enabled,
+  });
+  if (
+    sourceRef.current.client !== client ||
+    sourceRef.current.workspaceId !== workspaceId ||
+    sourceRef.current.computerSessionId !== computerSessionId ||
+    sourceRef.current.enabled !== enabled
+  ) {
+    sourceRef.current = { client, workspaceId, computerSessionId, enabled };
+  }
+  const source = sourceRef.current;
   const pageLive = usePageLiveActivity();
   const pollIntervalMs = Math.max(750, options.pollIntervalMs ?? 2_000);
-  const [state, setState] = useState<ComputerControlState>(() =>
-    emptyState(computerSessionId, enabled),
-  );
-  const visible =
-    state.computerSessionId === computerSessionId ? state : emptyState(computerSessionId, enabled);
+  const [state, setState] = useState<ComputerControlState>(() => emptyState(source, enabled));
+  const visible = state.source === source ? state : emptyState(source, enabled);
   const refreshBlocked = isNonRetryableInteractionError(visible.error);
   const selectedTargetIdRef = useRef<string | null>(visible.selectedTargetId);
   selectedTargetIdRef.current = visible.selectedTargetId;
+  const selectionRevisionRef = useRef(0);
+  const actionResultOrderRef = useRef({ next: 0, settled: 0 });
   const targetsRef = useRef<{
+    source: ComputerControlSource;
     computerSessionId: string | null;
     targets: ComputerTarget[];
   }>({
+    source,
     computerSessionId,
     targets: visible.targets,
   });
   const observationRef = useRef<{
+    source: ComputerControlSource;
     computerSessionId: string | null;
     observation: ComputerObservation | null;
-  }>({ computerSessionId, observation: visible.observation });
-  if (targetsRef.current.computerSessionId !== computerSessionId) {
-    targetsRef.current = { computerSessionId, targets: visible.targets };
+  }>({ source, computerSessionId, observation: visible.observation });
+  if (targetsRef.current.source !== source) {
+    targetsRef.current = { source, computerSessionId, targets: visible.targets };
     observationRef.current = {
+      source,
       computerSessionId,
       observation: visible.observation,
     };
@@ -91,12 +122,18 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
   });
   const mutationRef = useRef<{
     computerSessionId: string | null;
+    source: typeof source;
     count: number;
   }>({
     computerSessionId,
+    source,
     count: 0,
   });
   const mountedRef = useRef(true);
+  const isCurrentSource = useCallback(
+    () => mountedRef.current && sourceRef.current === source,
+    [source],
+  );
 
   const invalidateRefresh = useCallback(() => {
     const id = requestRef.current.id + 1;
@@ -105,7 +142,7 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
   }, []);
 
   const refresh = useCallback(async (): Promise<void> => {
-    if (!enabled || !computerSessionId) return;
+    if (!enabled || !computerSessionId || !isCurrentSource()) return;
     const id = requestRef.current.id + 1;
     requestRef.current.controller?.abort();
     const controller = new AbortController();
@@ -121,13 +158,14 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
         }),
       ]);
       discoveryCompleted = true;
-      if (!mountedRef.current || requestRef.current.id !== id) return;
+      if (!isCurrentSource() || requestRef.current.id !== id) return;
       const targets = sortComputerTargets(targetResponse.targets);
       const selected = chooseTarget(targets, selectedTargetIdRef.current);
       // Discovery is useful independently of semantic observation. Publish it
       // now so a slow/unresponsive application cannot block the frame stream
       // or prevent the person from choosing a different window or screen.
-      const previous = observationRef.current.observation;
+      const previous =
+        observationRef.current.source === source ? observationRef.current.observation : null;
       const retainedObservation =
         selected &&
         previous?.target.id === selected.id &&
@@ -136,9 +174,11 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
           ? previous
           : null;
       selectedTargetIdRef.current = selected?.id ?? null;
-      targetsRef.current = { computerSessionId, targets };
-      observationRef.current = { computerSessionId, observation: retainedObservation };
+      targetsRef.current = { source, computerSessionId, targets };
+      observationRef.current = { source, computerSessionId, observation: retainedObservation };
       setState((current) =>
+        isCurrentSource() &&
+        current.source === source &&
         current.computerSessionId === computerSessionId
           ? {
               ...current,
@@ -157,11 +197,13 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
             signal: controller.signal,
           })
         : null;
-      if (!mountedRef.current || requestRef.current.id !== id) return;
+      if (!isCurrentSource() || requestRef.current.id !== id) return;
       selectedTargetIdRef.current = selected?.id ?? null;
-      targetsRef.current = { computerSessionId, targets };
-      observationRef.current = { computerSessionId, observation };
+      targetsRef.current = { source, computerSessionId, targets };
+      observationRef.current = { source, computerSessionId, observation };
       setState((current) =>
+        isCurrentSource() &&
+        current.source === source &&
         current.computerSessionId === computerSessionId
           ? {
               ...current,
@@ -175,9 +217,11 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
           : current,
       );
     } catch (cause) {
-      if (controller.signal.aborted || !mountedRef.current || requestRef.current.id !== id) return;
+      if (controller.signal.aborted || !isCurrentSource() || requestRef.current.id !== id) return;
       const error = cause instanceof Error ? cause : new Error(String(cause));
       setState((current) =>
+        isCurrentSource() &&
+        current.source === source &&
         current.computerSessionId === computerSessionId
           ? {
               ...current,
@@ -195,26 +239,30 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
     } finally {
       if (requestRef.current.id === id) requestRef.current = { id, controller: null };
     }
-  }, [client, computerSessionId, enabled, workspaceId]);
+  }, [client, computerSessionId, enabled, isCurrentSource, source, workspaceId]);
 
   useEffect(() => {
     mountedRef.current = true;
     if (!enabled) {
       invalidateRefresh();
-      setState(emptyState(computerSessionId, false));
+      setState(emptyState(source, false));
       return;
     }
     setState((current) =>
-      current.computerSessionId === computerSessionId
-        ? { ...current, loading: true }
-        : emptyState(computerSessionId, true),
+      current.source === source
+        ? {
+            ...current,
+            loading: true,
+            mutating: mutationRef.current.source === source && mutationRef.current.count > 0,
+          }
+        : emptyState(source, true),
     );
     void refresh();
     return () => {
       mountedRef.current = false;
       invalidateRefresh();
     };
-  }, [computerSessionId, enabled, invalidateRefresh, refresh]);
+  }, [computerSessionId, enabled, invalidateRefresh, refresh, source]);
 
   useEffect(() => {
     if (!enabled || !pageLive || visible.mutating || refreshBlocked) return;
@@ -240,44 +288,38 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
 
   const runMutation = useCallback(
     async <T>(scopeComputerSessionId: string, operation: () => Promise<T>): Promise<T> => {
+      if (!isCurrentSource()) throw new Error("The desktop source is no longer selected.");
       invalidateRefresh();
-      if (mutationRef.current.computerSessionId !== scopeComputerSessionId) {
+      if (
+        mutationRef.current.computerSessionId !== scopeComputerSessionId ||
+        mutationRef.current.source !== source
+      ) {
         mutationRef.current = {
           computerSessionId: scopeComputerSessionId,
+          source,
           count: 0,
         };
       }
       mutationRef.current.count += 1;
       setState((current) =>
+        isCurrentSource() &&
+        current.source === source &&
         current.computerSessionId === scopeComputerSessionId
           ? { ...current, mutating: true, error: null }
           : current,
       );
       try {
-        const result = await operation();
-        setState((current) =>
-          current.computerSessionId === scopeComputerSessionId
-            ? { ...current, controlError: null }
-            : current,
-        );
-        return result;
-      } catch (cause) {
-        const error = cause instanceof Error ? cause : new Error(String(cause));
-        setState((current) =>
-          current.computerSessionId === scopeComputerSessionId
-            ? {
-                ...current,
-                error,
-                controlError: isInteractionControlUnavailable(error) ? error : current.controlError,
-              }
-            : current,
-        );
-        throw error;
+        return await operation();
       } finally {
-        if (mutationRef.current.computerSessionId === scopeComputerSessionId) {
+        if (
+          mutationRef.current.computerSessionId === scopeComputerSessionId &&
+          mutationRef.current.source === source
+        ) {
           mutationRef.current.count = Math.max(0, mutationRef.current.count - 1);
           const mutating = mutationRef.current.count > 0;
           setState((current) =>
+            isCurrentSource() &&
+            current.source === source &&
             current.computerSessionId === scopeComputerSessionId
               ? { ...current, mutating }
               : current,
@@ -285,18 +327,31 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
         }
       }
     },
-    [invalidateRefresh],
+    [invalidateRefresh, isCurrentSource, source],
   );
 
   const selectTarget = useCallback(
     async (targetId: string): Promise<ComputerTarget> => {
       if (!computerSessionId) throw new Error("No desktop is selected.");
-      const target = targetsRef.current.targets.find((candidate) => candidate.id === targetId);
+      if (!isCurrentSource()) throw new Error("The desktop source is no longer selected.");
+      const target =
+        targetsRef.current.source === source
+          ? targetsRef.current.targets.find((candidate) => candidate.id === targetId)
+          : null;
       if (!target) throw new Error("The selected desktop target is no longer available.");
       invalidateRefresh();
+      const readRequestId = requestRef.current.id;
+      const selectionRevision = ++selectionRevisionRef.current;
+      const isCurrentSelection = () =>
+        isCurrentSource() && selectionRevisionRef.current === selectionRevision;
+      // Once admitted, a queued observation survives immediate input.
+      const isCurrentSelectionRead = () =>
+        isCurrentSelection() && requestRef.current.id === readRequestId;
       selectedTargetIdRef.current = target.id;
-      observationRef.current = { computerSessionId, observation: null };
+      observationRef.current = { source, computerSessionId, observation: null };
       setState((current) =>
+        isCurrentSelection() &&
+        current.source === source &&
         current.computerSessionId === computerSessionId
           ? {
               ...current,
@@ -313,32 +368,40 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
           computerSessionId,
           target.id,
         );
-        if (selectedTargetIdRef.current !== target.id) return target;
-        observationRef.current = { computerSessionId, observation };
+        if (!isCurrentSelectionRead() || selectedTargetIdRef.current !== target.id) return target;
+        observationRef.current = { source, computerSessionId, observation };
         setState((current) =>
-          current.computerSessionId === computerSessionId && current.selectedTargetId === target.id
+          isCurrentSelection() &&
+          current.source === source &&
+          current.computerSessionId === computerSessionId &&
+          current.selectedTargetId === target.id
             ? { ...current, observation, loading: false, error: null }
             : current,
         );
         return observation.target;
       } catch (cause) {
         const error = cause instanceof Error ? cause : new Error(String(cause));
-        setState((current) =>
-          current.computerSessionId === computerSessionId && current.selectedTargetId === target.id
-            ? {
-                ...current,
-                loading: false,
-                error,
-                controlError: isInteractionControlUnavailable(error, "observation")
-                  ? error
-                  : current.controlError,
-              }
-            : current,
-        );
+        if (isCurrentSelectionRead()) {
+          setState((current) =>
+            isCurrentSelection() &&
+            current.source === source &&
+            current.computerSessionId === computerSessionId &&
+            current.selectedTargetId === target.id
+              ? {
+                  ...current,
+                  loading: false,
+                  error,
+                  controlError: isInteractionControlUnavailable(error, "observation")
+                    ? error
+                    : current.controlError,
+                }
+              : current,
+          );
+        }
         throw error;
       }
     },
-    [client, computerSessionId, invalidateRefresh, workspaceId],
+    [client, computerSessionId, invalidateRefresh, isCurrentSource, source, workspaceId],
   );
 
   const dispatchAction = useCallback(
@@ -348,24 +411,30 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
       frame: ComputerFrame | null,
     ): Promise<ComputerActionReceipt> => {
       if (!computerSessionId) throw new Error("No desktop is selected.");
+      if (!isCurrentSource()) throw new Error("The desktop source is no longer selected.");
       if (frame && frame.computerSessionId !== computerSessionId) {
         throw new Error("The displayed desktop frame belongs to another desktop session.");
       }
       const currentObservation =
+        observationRef.current.source === source &&
         observationRef.current.computerSessionId === computerSessionId
           ? observationRef.current.observation
           : null;
       const focusTarget =
-        action.type === "focus"
+        action.type === "focus" && targetsRef.current.source === source
           ? (targetsRef.current.targets.find((candidate) => candidate.id === action.targetId) ??
             null)
           : null;
-      const frameTarget = frame
-        ? (targetsRef.current.targets.find((candidate) => candidate.id === frame.targetId) ??
-          (currentObservation?.target.id === frame.targetId ? currentObservation.target : null))
-        : null;
+      const frameTarget =
+        frame && targetsRef.current.source === source
+          ? currentObservation?.target.id === frame.targetId
+            ? currentObservation.target
+            : (targetsRef.current.targets.find((candidate) => candidate.id === frame.targetId) ??
+              null)
+          : null;
       const inputTarget =
         (action.type === "keyboard" || action.type === "clipboard") &&
+        targetsRef.current.source === source &&
         targetsRef.current.computerSessionId === computerSessionId
           ? targetsRef.current.targets.find(
               (candidate) => candidate.id === selectedTargetIdRef.current,
@@ -377,6 +446,13 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
       if (frame && frame.targetId !== selectedTargetIdRef.current) {
         throw new Error("The displayed desktop frame is no longer selected.");
       }
+      if (
+        frame &&
+        (frame.controllerGeneration !== target.controllerGeneration ||
+          frame.targetGeneration !== target.targetGeneration)
+      ) {
+        throw new Error("The displayed desktop frame belongs to an earlier target generation.");
+      }
       if (action.type === "pointer") {
         const expectedFrameId = frame?.frameId ?? currentObservation?.frameId ?? null;
         if (!expectedFrameId || action.frameId !== expectedFrameId) {
@@ -386,38 +462,142 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
       if (action.type === "semantic" && !currentObservation) {
         throw new Error("The desktop accessibility tree is not ready for input.");
       }
+      const selectedTargetId = selectedTargetIdRef.current;
+      const selectedTarget = targetsRef.current.targets.find(
+        (candidate) => candidate.id === selectedTargetId,
+      );
+      const selectedFence = selectedTarget && {
+        id: selectedTarget.id,
+        computerSessionId: selectedTarget.computerSessionId,
+        controllerGeneration: selectedTarget.controllerGeneration,
+        targetGeneration: selectedTarget.targetGeneration,
+      };
+      const selectionRevision = selectionRevisionRef.current;
+      const isCurrentView = () =>
+        isCurrentSource() &&
+        selectionRevisionRef.current === selectionRevision &&
+        selectedTargetIdRef.current === selectedTargetId &&
+        targetsRef.current.source === source &&
+        targetsRef.current.computerSessionId === computerSessionId &&
+        sameTargetFence(
+          selectedFence,
+          targetsRef.current.targets.find((candidate) => candidate.id === selectedTargetId),
+        );
+      const resultOrder = ++actionResultOrderRef.current.next;
+      let admitted = false;
+      let resultTargetId = selectedTargetId;
+      let resultFence = selectedFence;
+      const isCurrentResultView = () =>
+        isCurrentSource() &&
+        selectionRevisionRef.current === selectionRevision &&
+        selectedTargetIdRef.current === resultTargetId &&
+        targetsRef.current.source === source &&
+        sameTargetFence(
+          resultFence,
+          targetsRef.current.targets.find((candidate) => candidate.id === resultTargetId),
+        );
+      const canProjectResult = () => {
+        if (!admitted) {
+          if (!isCurrentView() || resultOrder < actionResultOrderRef.current.settled) return false;
+          actionResultOrderRef.current.settled = resultOrder;
+          admitted = true;
+          invalidateRefresh();
+        }
+        return isCurrentResultView() && resultOrder === actionResultOrderRef.current.settled;
+      };
+      const projectState = (update: (current: ComputerControlState) => ComputerControlState) => {
+        setState((current) =>
+          admitted &&
+          isCurrentResultView() &&
+          current.source === source &&
+          current.computerSessionId === computerSessionId &&
+          current.actionResultOrder <= resultOrder
+            ? { ...update(current), actionResultOrder: resultOrder }
+            : current,
+        );
+      };
 
       return await runMutation(computerSessionId, async () => {
-        const receipt = await client.actInComputer(workspaceId, computerSessionId, {
-          operationId,
-          targetId: target.id,
-          expectedTargetGeneration: frame?.targetGeneration ?? target.targetGeneration,
-          expectedObservationId:
-            action.type === "pointer" ? null : (currentObservation?.observationId ?? null),
-          expectedFrameId: action.type === "pointer" ? action.frameId : null,
-          action,
-        });
-        if (receipt.observation) {
-          const observation = receipt.observation;
-          observationRef.current = { computerSessionId, observation };
-          selectedTargetIdRef.current = observation.target.id;
-          setState((current) =>
-            current.computerSessionId === computerSessionId
-              ? {
-                  ...current,
-                  observation,
-                  selectedTargetId: observation.target.id,
-                  targets: replaceTarget(current.targets, observation.target),
-                }
-              : current,
+        try {
+          const receipt = await client.actInComputer(workspaceId, computerSessionId, {
+            operationId,
+            targetId: target.id,
+            expectedTargetGeneration: frame?.targetGeneration ?? target.targetGeneration,
+            expectedObservationId:
+              action.type === "pointer" ? null : (currentObservation?.observationId ?? null),
+            expectedFrameId: action.type === "pointer" ? action.frameId : null,
+            action,
+          });
+          const receiptSettled =
+            receipt.state === "completed" ||
+            receipt.state === "failed" ||
+            receipt.state === "outcome_unknown";
+          actionResultFences.set(receipt, () =>
+            admitted
+              ? isCurrentResultView() && resultOrder === actionResultOrderRef.current.settled
+              : isCurrentView() && resultOrder >= actionResultOrderRef.current.settled,
+          );
+          // A settled result may project only until a later dispatched action
+          // settles for this view. Pending later input does not hide this result.
+          if (!receiptSettled || !canProjectResult()) return receipt;
+          if (receipt.observation) {
+            const observation = receipt.observation;
+            observationRef.current = { source, computerSessionId, observation };
+            selectedTargetIdRef.current = observation.target.id;
+            targetsRef.current.targets = replaceTarget(
+              targetsRef.current.targets,
+              observation.target,
+            );
+            resultTargetId = observation.target.id;
+            resultFence = {
+              id: observation.target.id,
+              computerSessionId: observation.target.computerSessionId,
+              controllerGeneration: observation.target.controllerGeneration,
+              targetGeneration: observation.target.targetGeneration,
+            };
+            projectState((current) => ({
+              ...current,
+              error: null,
+              controlError: null,
+              observation,
+              selectedTargetId: observation.target.id,
+              targets: replaceTarget(current.targets, observation.target),
+            }));
+          } else {
+            projectState((current) => ({ ...current, error: null, controlError: null }));
+            void refresh();
+          }
+          return receipt;
+        } catch (cause) {
+          const error = cause instanceof Error ? cause : new Error(String(cause));
+          actionResultFences.set(
+            error,
+            () =>
+              admitted &&
+              isCurrentResultView() &&
+              resultOrder === actionResultOrderRef.current.settled,
           );
-        } else {
-          void refresh();
+          if (canProjectResult()) {
+            projectState((current) => ({
+              ...current,
+              error,
+              controlError: isInteractionControlUnavailable(error) ? error : current.controlError,
+            }));
+          }
+          throw error;
         }
-        return receipt;
       });
     },
-    [client, computerSessionId, refresh, runMutation, workspaceId],
+    [
+      client,
+      computerSessionId,
+      invalidateRefresh,
+      isCurrentSource,
+      refresh,
+      runMutation,
+      source,
+      workspaceId,
+    ],
   );
 
   const act = useCallback(
@@ -439,11 +619,38 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
 
   const readClipboard = useCallback(async (): Promise<ComputerClipboard> => {
     if (!computerSessionId) throw new Error("No desktop is selected.");
+    const selectionRevision = selectionRevisionRef.current;
+    const settledOrder = actionResultOrderRef.current.settled;
+    const selectedTargetId = selectedTargetIdRef.current;
+    const selectedTarget = targetsRef.current.targets.find(
+      (candidate) => candidate.id === selectedTargetId,
+    );
+    const selectedFence = selectedTarget && {
+      id: selectedTarget.id,
+      computerSessionId: selectedTarget.computerSessionId,
+      controllerGeneration: selectedTarget.controllerGeneration,
+      targetGeneration: selectedTarget.targetGeneration,
+    };
+    const isCurrentRead = () =>
+      isCurrentSource() &&
+      selectionRevisionRef.current === selectionRevision &&
+      actionResultOrderRef.current.settled === settledOrder &&
+      selectedTargetIdRef.current === selectedTargetId &&
+      targetsRef.current.source === source &&
+      sameTargetFence(
+        selectedFence,
+        targetsRef.current.targets.find((candidate) => candidate.id === selectedTargetId),
+      );
     try {
-      return await client.readComputerClipboard(workspaceId, computerSessionId);
+      const clipboard = await client.readComputerClipboard(workspaceId, computerSessionId);
+      actionResultFences.set(clipboard, isCurrentRead);
+      return clipboard;
     } catch (cause) {
       const error = cause instanceof Error ? cause : new Error(String(cause));
+      actionResultFences.set(error, isCurrentRead);
       setState((current) =>
+        isCurrentRead() &&
+        current.source === source &&
         current.computerSessionId === computerSessionId
           ? {
               ...current,
@@ -454,7 +661,7 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
       );
       throw error;
     }
-  }, [client, computerSessionId, workspaceId]);
+  }, [client, computerSessionId, isCurrentSource, source, workspaceId]);
 
   return {
     session: visible.session,
@@ -474,7 +681,16 @@ export function useComputerSession(options: UseComputerSessionOptions): UseCompu
   };
 }
 
+type ComputerControlSource = Pick<
+  ReturnType<typeof useEmbeddedComputerInteraction>,
+  "client" | "workspaceId"
+> & {
+  computerSessionId: string | null;
+  enabled: boolean;
+};
+
 type ComputerControlState = {
+  source: ComputerControlSource;
   computerSessionId: string | null;
   session: ComputerSession | null;
   targets: ComputerTarget[];
@@ -484,11 +700,13 @@ type ComputerControlState = {
   mutating: boolean;
   error: Error | null;
   controlError: Error | null;
+  actionResultOrder: number;
 };
 
-function emptyState(computerSessionId: string | null, loading: boolean): ComputerControlState {
+function emptyState(source: ComputerControlSource, loading: boolean): ComputerControlState {
   return {
-    computerSessionId,
+    source,
+    computerSessionId: source.computerSessionId,
     session: null,
     targets: [],
     selectedTargetId: null,
@@ -497,6 +715,7 @@ function emptyState(computerSessionId: string | null, loading: boolean): Compute
     mutating: false,
     error: null,
     controlError: null,
+    actionResultOrder: 0,
   };
 }
 
@@ -538,3 +757,20 @@ function replaceTarget(
     target,
   ]);
 }
+
+type ComputerTargetFence = Pick<
+  ComputerTarget,
+  "id" | "computerSessionId" | "controllerGeneration" | "targetGeneration"
+>;
+
+function sameTargetFence(
+  left: ComputerTargetFence | undefined,
+  right: ComputerTargetFence | undefined,
+): boolean {
+  return (
+    left?.id === right?.id &&
+    left?.computerSessionId === right?.computerSessionId &&
+    left?.controllerGeneration === right?.controllerGeneration &&
+    left?.targetGeneration === right?.targetGeneration
+  );
+}