@opengeni/react 3.1.0 → 3.1.2

package/dist/{chunk-ELIYWBZR.js → chunk-GUUXOISA.js}

@@ -1,13 +1,25 @@
+"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 {
   DesktopViewer
-} from "./chunk-4MDLEHXL.js";
+} from "./chunk-IMSUVYQB.js";
+import {
+  usePageLiveActivity
+} from "./chunk-QHUE7E4N.js";
+import {
+  useEmbeddedComputerInteraction
+} from "./chunk-G76LSA76.js";
 import {
   STREAM_CLOSE_REASON_NORMAL,
   STREAM_KIND_COMPUTER,
@@ -16,19 +28,10 @@ import {
   decodeStreamOpenAck,
   encodeStreamClose,
   encodeStreamOpen
-} from "./chunk-5YK2ZDIG.js";
-import {
-  usePageLiveActivity
-} from "./chunk-KZ73RL76.js";
-import {
-  useEmbeddedComputerInteraction
-} from "./chunk-NEXLLTP4.js";
-import {
-  copyTextToClipboard
-} from "./chunk-JVYQRRC4.js";
+} from "./chunk-TNEZNMSN.js";
 import {
   cn
-} from "./chunk-22KP6LR5.js";
+} from "./chunk-TXS65BB2.js";
 
 // src/components/computer-viewer.tsx
 import { interactionControlFailureFromError } from "@opengeni/sdk/interaction";
@@ -46,11 +49,12 @@ import {
   RotateCcwIcon
 } from "lucide-react";
 import {
-  useCallback as useCallback4,
-  useEffect as useEffect4,
+  useCallback as useCallback5,
+  useEffect as useEffect5,
+  useLayoutEffect,
   useMemo as useMemo2,
-  useRef as useRef4,
-  useState as useState4
+  useRef as useRef5,
+  useState as useState5
 } from "react";
 
 // src/hooks/use-computer-frame-stream.ts
@@ -144,9 +148,18 @@ function useComputerFrameStream(options) {
       socketHandlers = null;
       pendingFrame = null;
     };
+    const clearRecoveryTimers = () => {
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      if (expiryTimer) clearTimeout(expiryTimer);
+      reconnectTimer = null;
+      expiryTimer = null;
+    };
     const scheduleReconnect = () => {
       if (disposed || reconnectTimer) return;
-      if (failures >= MAX_AUTOMATIC_RECONNECTS_WITHOUT_A_FRAME) return;
+      if (failures >= MAX_AUTOMATIC_RECONNECTS_WITHOUT_A_FRAME) {
+        clearRecoveryTimers();
+        return;
+      }
       const delay = Math.min(5e3, 250 * 2 ** Math.min(failures, 5));
       failures += 1;
       setResult((current) => ({ ...current, state: "reconnecting" }));
@@ -161,6 +174,7 @@ function useComputerFrameStream(options) {
       setResult((current) => ({ ...current, state: "error", error }));
       clearSocket();
       if (reconnectAutomatically) scheduleReconnect();
+      else clearRecoveryTimers();
     };
     const onOpen = (source) => {
       if (disposed || source !== socket) return;
@@ -264,8 +278,7 @@ function useComputerFrameStream(options) {
     };
     const onClose = (source) => {
       if (disposed || source !== socket) return;
-      clearSocket();
-      scheduleReconnect();
+      fail(new Error("Desktop view lost connection."));
     };
     const connectSocket = () => {
       if (disposed) return;
@@ -320,13 +333,14 @@ function useComputerFrameStream(options) {
             expiresInSeconds: 120,
             ...streamRef.current ? { stream: streamRef.current } : {}
           },
-          { signal: attachmentAbort.signal }
+          { signal: attachmentAbort.signal, timeoutMs: 15e3 }
         );
         if (disposed) return;
         if (attachment.computerSessionId !== computerSessionId || attachment.targetId !== targetId) {
           throw new Error("desktop attachment does not match the requested resource");
         }
         controllerGeneration = attachment.controllerGeneration;
+        latestRef.current = { key: "", sequence: -1 };
         activeAttachment = attachment;
         activeStream = attachment.stream;
         attachmentExpiresAt = Date.parse(attachment.expiresAt);
@@ -339,6 +353,7 @@ function useComputerFrameStream(options) {
             computerSessionId: attachment.computerSessionId,
             controllerGeneration: attachment.controllerGeneration,
             targetId: attachment.targetId,
+            inputAllowed: attachment.inputAllowed,
             stream: attachment.stream,
             expiresAt: attachment.expiresAt
           },
@@ -364,8 +379,7 @@ function useComputerFrameStream(options) {
       disposed = true;
       pendingFrame = null;
       attachmentAbort.abort();
-      if (reconnectTimer) clearTimeout(reconnectTimer);
-      if (expiryTimer) clearTimeout(expiryTimer);
+      clearRecoveryTimers();
       clearSocket(true);
     };
   }, [client, enabled, nonce, options.computerSessionId, options.targetId, workspaceId]);
@@ -394,27 +408,49 @@ function isPlacementGenerationLossError(cause) {
 
 // src/hooks/use-computer-session.ts
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+var actionResultFences = /* @__PURE__ */ new WeakMap();
+function isStaleComputerActionResult(value) {
+  return typeof value === "object" && value !== null && actionResultFences.get(value)?.() === false;
+}
+function computerActionReceiptError(receipt) {
+  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;
+}
 function useComputerSession(options) {
   const { client, workspaceId } = useEmbeddedComputerInteraction(options);
   const computerSessionId = options.computerSessionId;
   const enabled = (options.enabled ?? true) && computerSessionId !== null;
+  const sourceRef = useRef2({
+    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 ?? 2e3);
-  const [state, setState] = useState2(
-    () => emptyState(computerSessionId, enabled)
-  );
-  const visible = state.computerSessionId === computerSessionId ? state : emptyState(computerSessionId, enabled);
+  const [state, setState] = useState2(() => emptyState(source, enabled));
+  const visible = state.source === source ? state : emptyState(source, enabled);
   const refreshBlocked = isNonRetryableInteractionError(visible.error);
   const selectedTargetIdRef = useRef2(visible.selectedTargetId);
   selectedTargetIdRef.current = visible.selectedTargetId;
+  const selectionRevisionRef = useRef2(0);
+  const actionResultOrderRef = useRef2({ next: 0, settled: 0 });
   const targetsRef = useRef2({
+    source,
     computerSessionId,
     targets: visible.targets
   });
-  const observationRef = useRef2({ computerSessionId, observation: visible.observation });
-  if (targetsRef.current.computerSessionId !== computerSessionId) {
-    targetsRef.current = { computerSessionId, targets: visible.targets };
+  const observationRef = useRef2({ source, computerSessionId, observation: visible.observation });
+  if (targetsRef.current.source !== source) {
+    targetsRef.current = { source, computerSessionId, targets: visible.targets };
     observationRef.current = {
+      source,
       computerSessionId,
       observation: visible.observation
     };
@@ -428,20 +464,26 @@ function useComputerSession(options) {
   });
   const mutationRef = useRef2({
     computerSessionId,
+    source,
     count: 0
   });
   const mountedRef = useRef2(true);
+  const isCurrentSource = useCallback2(
+    () => mountedRef.current && sourceRef.current === source,
+    [source]
+  );
   const invalidateRefresh = useCallback2(() => {
     const id = requestRef.current.id + 1;
     requestRef.current.controller?.abort();
     requestRef.current = { id, controller: null };
   }, []);
   const refresh = useCallback2(async () => {
-    if (!enabled || !computerSessionId) return;
+    if (!enabled || !computerSessionId || !isCurrentSource()) return;
     const id = requestRef.current.id + 1;
     requestRef.current.controller?.abort();
     const controller = new AbortController();
     requestRef.current = { id, controller };
+    let discoveryCompleted = false;
     try {
       const [session, targetResponse] = await Promise.all([
         client.getComputerSession(workspaceId, computerSessionId, {
@@ -451,56 +493,84 @@ function useComputerSession(options) {
           signal: controller.signal
         })
       ]);
-      if (!mountedRef.current || requestRef.current.id !== id) return;
+      discoveryCompleted = true;
+      if (!isCurrentSource() || requestRef.current.id !== id) return;
       const targets = sortComputerTargets(targetResponse.targets);
-      const selected = chooseTarget(targets, selectedTargetIdRef.current, session.platform);
+      const selected = chooseTarget(targets, selectedTargetIdRef.current);
+      const selectedId = selected?.id ?? selectedTargetIdRef.current;
+      const previous = observationRef.current.source === source ? observationRef.current.observation : null;
+      const retainedObservation = selected && previous?.target.id === selected.id && previous.target.controllerGeneration === selected.controllerGeneration && previous.target.targetGeneration === selected.targetGeneration ? previous : null;
+      selectedTargetIdRef.current = selectedId;
+      targetsRef.current = { source, computerSessionId, targets };
+      observationRef.current = { source, computerSessionId, observation: retainedObservation };
+      setState(
+        (current) => isCurrentSource() && current.source === source && current.computerSessionId === computerSessionId ? {
+          ...current,
+          session,
+          targets,
+          selectedTargetId: selectedId,
+          observation: retainedObservation,
+          loading: false,
+          error: null,
+          controlError: null
+        } : current
+      );
       const observation = selected ? await client.observeComputerTarget(workspaceId, computerSessionId, selected.id, {
         signal: controller.signal
       }) : null;
-      if (!mountedRef.current || requestRef.current.id !== id) return;
-      selectedTargetIdRef.current = selected?.id ?? null;
-      targetsRef.current = { computerSessionId, targets };
-      observationRef.current = { computerSessionId, observation };
+      if (!isCurrentSource() || requestRef.current.id !== id) return;
+      selectedTargetIdRef.current = selectedId;
+      targetsRef.current = { source, computerSessionId, targets };
+      observationRef.current = { source, computerSessionId, observation };
       setState(
-        (current) => current.computerSessionId === computerSessionId ? {
+        (current) => isCurrentSource() && current.source === source && current.computerSessionId === computerSessionId ? {
           ...current,
           session,
           targets,
-          selectedTargetId: selected?.id ?? null,
+          selectedTargetId: selectedId,
           observation,
           loading: false,
           error: null
         } : 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) => current.computerSessionId === computerSessionId ? {
+        (current) => isCurrentSource() && current.source === source && current.computerSessionId === computerSessionId ? {
           ...current,
           loading: false,
-          error: cause instanceof Error ? cause : new Error(String(cause))
+          error,
+          controlError: isInteractionControlUnavailable(
+            error,
+            discoveryCompleted ? "observation" : "control"
+          ) ? error : current.controlError
         } : current
       );
     } finally {
       if (requestRef.current.id === id) requestRef.current = { id, controller: null };
     }
-  }, [client, computerSessionId, enabled, workspaceId]);
+  }, [client, computerSessionId, enabled, isCurrentSource, source, workspaceId]);
   useEffect2(() => {
     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) => 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]);
   useEffect2(() => {
     if (!enabled || !pageLive || visible.mutating || refreshBlocked) return;
     const timer = setInterval(() => {
@@ -523,47 +593,48 @@ function useComputerSession(options) {
   }, [client, computerSessionId, enabled, pageLive, refresh, refreshBlocked, workspaceId]);
   const runMutation = useCallback2(
     async (scopeComputerSessionId, operation) => {
+      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) => current.computerSessionId === scopeComputerSessionId ? { ...current, mutating: true, error: null } : current
+        (current) => isCurrentSource() && current.source === source && current.computerSessionId === scopeComputerSessionId ? { ...current, mutating: true, error: null } : current
       );
       try {
         return await operation();
-      } catch (cause) {
-        const error = cause instanceof Error ? cause : new Error(String(cause));
-        setState(
-          (current) => current.computerSessionId === scopeComputerSessionId ? { ...current, error } : current
-        );
-        throw error;
       } 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) => current.computerSessionId === scopeComputerSessionId ? { ...current, mutating } : current
+            (current) => isCurrentSource() && current.source === source && current.computerSessionId === scopeComputerSessionId ? { ...current, mutating } : current
           );
         }
       }
     },
-    [invalidateRefresh]
+    [invalidateRefresh, isCurrentSource, source]
   );
   const selectTarget = useCallback2(
     async (targetId) => {
       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;
+      const isCurrentSelectionRead = () => isCurrentSelection() && requestRef.current.id === readRequestId;
       selectedTargetIdRef.current = target.id;
-      observationRef.current = { computerSessionId, observation: null };
+      observationRef.current = { source, computerSessionId, observation: null };
       setState(
-        (current) => current.computerSessionId === computerSessionId ? {
+        (current) => isCurrentSelection() && current.source === source && current.computerSessionId === computerSessionId ? {
           ...current,
           selectedTargetId: target.id,
           observation: null,
@@ -577,36 +648,50 @@ function useComputerSession(options) {
           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 ? { ...current, observation, loading: false, error: null } : current
+          (current) => 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 } : 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 = useCallback2(
     async (action, operationId, frame) => {
       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.computerSessionId === computerSessionId ? observationRef.current.observation : null;
-      const focusTarget = action.type === "focus" ? 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 target = frameTarget ?? focusTarget ?? currentObservation?.target ?? null;
+      const currentObservation = observationRef.current.source === source && observationRef.current.computerSessionId === computerSessionId ? observationRef.current.observation : null;
+      const focusTarget = action.type === "focus" && targetsRef.current.source === source ? targetsRef.current.targets.find((candidate) => candidate.id === action.targetId) ?? 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
+      ) : null;
+      const target = frameTarget ?? focusTarget ?? currentObservation?.target ?? inputTarget ?? null;
       if (!target) throw new Error("The desktop target is not ready for input.");
       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) {
@@ -616,34 +701,114 @@ function useComputerSession(options) {
       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) => {
+        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 ? {
+        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
+          );
+          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)
-            } : current
+            }));
+          } 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 = useCallback2(
     async (action, operationId = crypto.randomUUID()) => await dispatchAction(action, operationId, null),
@@ -655,8 +820,39 @@ function useComputerSession(options) {
   );
   const readClipboard = useCallback2(async () => {
     if (!computerSessionId) throw new Error("No desktop is selected.");
-    return await client.readComputerClipboard(workspaceId, computerSessionId);
-  }, [client, computerSessionId, workspaceId]);
+    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 {
+      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,
+          error,
+          controlError: isInteractionControlUnavailable(error) ? error : current.controlError
+        } : current
+      );
+      throw error;
+    }
+  }, [client, computerSessionId, isCurrentSource, source, workspaceId]);
   return {
     session: visible.session,
     targets: visible.targets,
@@ -665,6 +861,7 @@ function useComputerSession(options) {
     loading: visible.loading,
     mutating: visible.mutating,
     error: visible.error,
+    controlError: visible.controlError,
     refresh,
     readClipboard,
     selectTarget,
@@ -672,25 +869,24 @@ function useComputerSession(options) {
     actFromFrame
   };
 }
-function emptyState(computerSessionId, loading) {
+function emptyState(source, loading) {
   return {
-    computerSessionId,
+    source,
+    computerSessionId: source.computerSessionId,
     session: null,
     targets: [],
     selectedTargetId: null,
     observation: null,
     loading,
     mutating: false,
-    error: null
+    error: null,
+    controlError: null,
+    actionResultOrder: 0
   };
 }
-function chooseTarget(targets, preferredId, platform) {
-  const preferred = targets.find((target) => target.id === preferredId);
-  if (preferred) return preferred;
-  if (platform === "linux") {
-    return targets.find((target) => target.focused && target.kind === "screen") ?? targets.find((target) => target.kind === "screen") ?? targets.find((target) => target.focused && target.kind === "window") ?? targets.find((target) => target.kind === "window") ?? targets[0] ?? null;
-  }
-  return targets.find((target) => target.focused && target.kind === "window") ?? targets.find((target) => target.kind === "window") ?? targets.find((target) => target.kind === "screen") ?? targets.find((target) => target.focused && target.kind === "app") ?? targets.find((target) => target.kind === "app") ?? targets[0] ?? null;
+function chooseTarget(targets, preferredId) {
+  if (preferredId !== null) return targets.find((target) => target.id === preferredId) ?? null;
+  return targets.find((target) => target.focused && target.kind === "screen") ?? targets.find((target) => target.kind === "screen") ?? targets.find((target) => target.focused && target.kind === "window") ?? targets.find((target) => target.kind === "window") ?? targets.find((target) => target.focused && target.kind === "app") ?? targets.find((target) => target.kind === "app") ?? targets[0] ?? null;
 }
 function sortComputerTargets(targets) {
   const rank = { window: 0, app: 1, screen: 2 };
@@ -704,9 +900,76 @@ function replaceTarget(targets, target) {
     target
   ]);
 }
+function sameTargetFence(left, right) {
+  return left?.id === right?.id && left?.computerSessionId === right?.computerSessionId && left?.controllerGeneration === right?.controllerGeneration && left?.targetGeneration === right?.targetGeneration;
+}
+
+// src/hooks/use-computer-input-posture.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+function useComputerInputPosture(options) {
+  const { client, workspaceId } = useEmbeddedComputerInteraction(options);
+  const { computerSessionId, controllerGeneration, enabled } = options;
+  const [nonce, setNonce] = useState3(0);
+  const [state, setState] = useState3(null);
+  const key = JSON.stringify([workspaceId, computerSessionId, controllerGeneration, enabled]);
+  const sourceRef = useRef3({ client, key });
+  if (sourceRef.current.client !== client || sourceRef.current.key !== key) {
+    sourceRef.current = { client, key };
+  }
+  const source = sourceRef.current;
+  const visible = state?.source === source && state.nonce === nonce ? state : null;
+  const refresh = useCallback3(() => setNonce((value) => value + 1), []);
+  useEffect3(() => {
+    if (!enabled || !computerSessionId || !controllerGeneration) return;
+    const controller = new AbortController();
+    let disposed = false;
+    setState({ source, nonce, inputAllowed: null, pending: true, error: null });
+    void (async () => {
+      try {
+        if (!client.getComputerInputPosture) {
+          throw new Error("Desktop input availability could not be verified.");
+        }
+        const posture = await client.getComputerInputPosture(workspaceId, computerSessionId, {
+          signal: controller.signal,
+          timeoutMs: 15e3
+        });
+        if (disposed || sourceRef.current !== source) return;
+        if (posture.computerSessionId !== computerSessionId || posture.controllerGeneration !== controllerGeneration || typeof posture.inputAllowed !== "boolean") {
+          throw new Error("Desktop input availability belongs to a different controller.");
+        }
+        setState({
+          source,
+          nonce,
+          inputAllowed: posture.inputAllowed,
+          pending: false,
+          error: null
+        });
+      } catch (cause) {
+        if (disposed || controller.signal.aborted || sourceRef.current !== source) return;
+        setState({
+          source,
+          nonce,
+          inputAllowed: null,
+          pending: false,
+          error: cause instanceof Error ? cause : new Error(String(cause))
+        });
+      }
+    })();
+    return () => {
+      disposed = true;
+      controller.abort();
+    };
+  }, [client, computerSessionId, controllerGeneration, enabled, nonce, source, workspaceId]);
+  return {
+    inputAllowed: visible?.inputAllowed ?? null,
+    pending: enabled && (visible?.pending ?? true),
+    error: visible?.error ?? null,
+    refresh
+  };
+}
 
 // src/hooks/use-computer-sessions.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useMemo, useRef as useRef4, useState as useState4 } from "react";
 function useComputerSessions(options = {}) {
   const {
     client,
@@ -716,19 +979,19 @@ function useComputerSessions(options = {}) {
     workspaceInteractionConnectionState
   } = useEmbeddedComputerInteraction(options);
   const enabled = options.enabled ?? true;
-  const [state, setState] = useState3(() => emptyState2(workspaceId, enabled));
-  const requestRef = useRef3({
+  const [state, setState] = useState4(() => emptyState2(workspaceId, enabled));
+  const requestRef = useRef4({
     id: 0,
     controller: null
   });
-  const mountedRef = useRef3(true);
+  const mountedRef = useRef4(true);
   const visible = state.workspaceId === workspaceId ? state : emptyState2(workspaceId, enabled);
-  const cancelLoad = useCallback3(() => {
+  const cancelLoad = useCallback4(() => {
     const id = requestRef.current.id + 1;
     requestRef.current.controller?.abort();
     requestRef.current = { id, controller: null };
   }, []);
-  const load = useCallback3(
+  const load = useCallback4(
     async (foreground) => {
       if (!enabled) return;
       const id = requestRef.current.id + 1;
@@ -771,8 +1034,8 @@ function useComputerSessions(options = {}) {
     },
     [client, enabled, workspaceId]
   );
-  const refresh = useCallback3(async () => await load(false), [load]);
-  useEffect3(() => {
+  const refresh = useCallback4(async () => await load(false), [load]);
+  useEffect4(() => {
     mountedRef.current = true;
     if (!enabled) {
       cancelLoad();
@@ -795,7 +1058,7 @@ function useComputerSessions(options = {}) {
     refresh,
     fallbackPollIntervalMs: options.pollIntervalMs
   });
-  useEffect3(() => {
+  useEffect4(() => {
     if (!enabled || !options.sessionId) return;
     return registerSessionReconciler(
       options.sessionId,
@@ -803,7 +1066,7 @@ function useComputerSessions(options = {}) {
       refresh
     );
   }, [enabled, options.sessionId, refresh, registerSessionReconciler, workspaceId]);
-  const create = useCallback3(
+  const create = useCallback4(
     async (request) => {
       const response = await client.createComputerSession(workspaceId, {
         ...request,
@@ -814,7 +1077,7 @@ function useComputerSessions(options = {}) {
     },
     [client, workspaceId]
   );
-  const end = useCallback3(
+  const end = useCallback4(
     async (computerSessionId, operationId = crypto.randomUUID()) => {
       const response = await client.endComputerSession(workspaceId, computerSessionId, {
         operationId
@@ -918,10 +1181,10 @@ function ComputerViewer({
     () => liveRelevant.length > 0 ? liveRelevant : recentRelevantFailure ? [recentRelevantFailure] : [],
     [liveRelevant, recentRelevantFailure]
   );
-  const [selection, setSelection] = useState4(
+  const [selection, setSelection] = useState5(
     () => initialComputerSessionId ? { sessionId: initialComputerSessionId, pinned: true } : null
   );
-  const selectComputerSession = useCallback4(
+  const selectComputerSession = useCallback5(
     (next) => {
       setSelection(next);
       onComputerSessionIdChange?.(next?.sessionId ?? null);
@@ -933,20 +1196,20 @@ function ComputerViewer({
     enabled,
     resourceKind: "computer_session"
   });
-  const [creating, setCreating] = useState4(false);
-  const [createError, setCreateError] = useState4(null);
-  const [showControls, setShowControls] = useState4(false);
-  const previousSessionIdRef = useRef4(sessionId);
-  const handledRequestRef = useRef4(null);
-  const seenInterventionIdsRef = useRef4(/* @__PURE__ */ new Set());
-  const createInFlightRef = useRef4(false);
-  const autoCreateSessionRef = useRef4(null);
-  const emptyCatalogConfirmationRef = useRef4(null);
-  const endedGenerationLossRef = useRef4(/* @__PURE__ */ new Set());
-  const recreatedPlacementLossRef = useRef4(/* @__PURE__ */ new Set());
-  const [suppressGenericCreate, setSuppressGenericCreate] = useState4(false);
+  const [creating, setCreating] = useState5(false);
+  const [createError, setCreateError] = useState5(null);
+  const [showControls, setShowControls] = useState5(false);
+  const previousSessionIdRef = useRef5(sessionId);
+  const handledRequestRef = useRef5(null);
+  const seenInterventionIdsRef = useRef5(/* @__PURE__ */ new Set());
+  const createInFlightRef = useRef5(false);
+  const autoCreateSessionRef = useRef5(null);
+  const emptyCatalogConfirmationRef = useRef5(null);
+  const endedGenerationLossRef = useRef5(/* @__PURE__ */ new Set());
+  const recreatedPlacementLossRef = useRef5(/* @__PURE__ */ new Set());
+  const [suppressGenericCreate, setSuppressGenericCreate] = useState5(false);
   const endStaleComputer = registry.end;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!enabled) return;
     for (const session of registry.sessions) {
       if (!isAttachedChromeGenerationLoss(session)) continue;
@@ -958,8 +1221,9 @@ function ComputerViewer({
       });
     }
   }, [enabled, endStaleComputer, registry.sessions]);
-  const notifyError = useCallback4(
+  const notifyError = useCallback5(
     (cause, fallback) => {
+      if (isStaleComputerActionResult(cause)) return;
       onNotify?.({
         kind: "error",
         message: cause instanceof Error ? cause.message : fallback
@@ -967,7 +1231,7 @@ function ComputerViewer({
     },
     [onNotify]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (previousSessionIdRef.current === sessionId) return;
     previousSessionIdRef.current = sessionId;
     handledRequestRef.current = null;
@@ -980,7 +1244,7 @@ function ComputerViewer({
       initialComputerSessionId ? { sessionId: initialComputerSessionId, pinned: true } : null
     );
   }, [initialComputerSessionId, sessionId]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!enabled || registry.loading) return;
     const requested = requestedComputerSessionId ? liveSessions.find((session) => session.id === requestedComputerSessionId) ?? null : null;
     const requestKey = requested ? `${requestedComputerRequestId ?? "default"}:${requested.id}` : null;
@@ -1031,7 +1295,10 @@ function ComputerViewer({
     computerSessionId: selection?.sessionId ?? null,
     enabled: enabled && selection !== null && controllerReady
   });
-  useEffect4(() => {
+  useEffect5(() => {
+    setShowControls(computer.selectedTarget?.kind === "app");
+  }, [sessionId, selection?.sessionId, computer.selectedTarget?.id, computer.selectedTarget?.kind]);
+  useEffect5(() => {
     if (!isSourcePlacementChangedError(computer.error, "computer_session")) return;
     void refreshRegistry();
   }, [computer.error, refreshRegistry]);
@@ -1052,15 +1319,46 @@ function ComputerViewer({
     },
     ...webSocketFactory ? { webSocketFactory } : {}
   });
-  const displayedFrame = frames.frame && frames.frame.computerSessionId === selection?.sessionId && frames.frame.targetId === computer.selectedTarget?.id ? frames.frame : null;
+  const displayedFrame = frames.frame && frames.frame.computerSessionId === selection?.sessionId && frames.frame.targetId === computer.selectedTarget?.id && frames.frame.targetGeneration === computer.selectedTarget?.targetGeneration ? frames.frame : null;
   const rfbStream = frames.attachment?.stream.kind === "direct_rfb" ? frames.attachment.stream : null;
+  const appTarget = computer.selectedTarget?.kind === "app";
+  const appInputPosture = useComputerInputPosture({
+    ...override,
+    computerSessionId: selection?.sessionId ?? null,
+    controllerGeneration: computer.session?.controller?.controllerGeneration ?? null,
+    enabled: enabled && controllerReady && appTarget
+  });
+  const inputPostureRef = useRef5({
+    sessionId: selection?.sessionId ?? null,
+    controllerGeneration: computer.session?.controller?.controllerGeneration ?? null,
+    denied: false
+  });
+  const postureSessionId = selection?.sessionId ?? null;
+  const postureController = computer.session?.controller?.controllerGeneration ?? null;
+  if (inputPostureRef.current.sessionId !== postureSessionId || inputPostureRef.current.controllerGeneration !== postureController) {
+    inputPostureRef.current = {
+      sessionId: postureSessionId,
+      controllerGeneration: postureController,
+      denied: false
+    };
+  }
+  if (frames.attachment?.computerSessionId === postureSessionId && frames.attachment.controllerGeneration === postureController) {
+    inputPostureRef.current.denied = frames.attachment.inputAllowed === false;
+  }
+  const inputDenied = appTarget ? appInputPosture.inputAllowed !== true : inputPostureRef.current.denied;
+  const attachmentInputAllowed = frames.attachment !== null && !inputDenied;
+  const inputPosturePending = appTarget ? appInputPosture.pending : inputDenied && (frames.state === "attaching" || frames.state === "reconnecting");
+  const machineLocked = selectedRegistrySession?.failureCode === "machine_locked";
+  const controlUnavailable = computer.controlError !== null;
+  const connectionState = controlUnavailable ? "error" : frames.state;
+  const rfbInputEnabled = rfbStream?.inputAllowed === true && attachmentInputAllowed && !machineLocked && !controlUnavailable && computer.session?.capabilities?.pointerInput === true && computer.session?.capabilities?.keyboardInput === true;
   const rfbCapability = useMemo2(() => {
     if (!rfbStream || !frames.attachment) return null;
     const bounds = computer.selectedTarget?.bounds;
     return {
       transport: "vnc-ws",
       client: "novnc",
-      mode: "interactive",
+      mode: rfbInputEnabled ? "interactive" : "read-only",
       url: rfbStream.url,
       token: null,
       expiresAt: frames.attachment.expiresAt,
@@ -1072,10 +1370,9 @@ function ComputerViewer({
       sharedSessionIds: [],
       reason: null
     };
-  }, [computer.selectedTarget?.bounds, frames.attachment, rfbStream]);
-  const machineLocked = selectedRegistrySession?.failureCode === "machine_locked";
+  }, [computer.selectedTarget?.bounds, frames.attachment, rfbInputEnabled, rfbStream]);
   const currentIds = useMemo2(() => new Set(relevant.map((session) => session.id)), [relevant]);
-  useEffect4(() => {
+  useEffect5(() => {
     for (const intervention of interventions.interventions) {
       if (seenInterventionIdsRef.current.has(intervention.id)) continue;
       seenInterventionIdsRef.current.add(intervention.id);
@@ -1085,7 +1382,7 @@ function ComputerViewer({
       });
     }
   }, [interventions.interventions, onNotify]);
-  const resolveIntervention = useCallback4(
+  const resolveIntervention = useCallback5(
     (intervention, outcome) => {
       void interventions.resolve(intervention.id, {
         expectedVersion: intervention.version,
@@ -1099,7 +1396,7 @@ function ComputerViewer({
     },
     [interventions, notifyError, onNotify]
   );
-  const createComputer = useCallback4(() => {
+  const createComputer = useCallback5(() => {
     if (createInFlightRef.current) return;
     createInFlightRef.current = true;
     setCreateError(null);
@@ -1115,7 +1412,7 @@ function ComputerViewer({
       setCreating(false);
     });
   }, [createSession, notifyError, selectComputerSession, sessionId]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!enabled || registry.loading || registry.refreshing || liveRelevant.length > 0 || !connectedPlacementLoss || recreatedPlacementLossRef.current.has(connectedPlacementLoss.id)) {
       return;
     }
@@ -1132,13 +1429,13 @@ function ComputerViewer({
     registry.refreshing,
     sessionId
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (relevant.length > 0) {
       autoCreateSessionRef.current = sessionId;
       emptyCatalogConfirmationRef.current = null;
     }
   }, [relevant.length, sessionId]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!enabled || registry.loading || registry.refreshing || registry.error || relevant.length > 0 || suppressGenericCreate || autoCreateSessionRef.current === sessionId) {
       return;
     }
@@ -1160,41 +1457,62 @@ function ComputerViewer({
     sessionId,
     suppressGenericCreate
   ]);
-  const perform = useCallback4(
-    async (action, frame) => {
+  const perform = useCallback5(
+    async (action, frame, operationId) => {
+      if (computer.controlError) throw computer.controlError;
+      if (inputDenied) throw new Error("Desktop is view only. Refresh to check desktop controls.");
+      let receipt;
       if (action.type === "pointer") {
         if (!frame) throw new Error("Desktop view is not ready for pointer input.");
-        await actFromFrame(action, frame);
+        receipt = await actFromFrame(action, frame, operationId);
       } else {
-        await act(action);
+        receipt = await act(action, operationId);
       }
+      if (!isStaleComputerActionResult(receipt) && receipt.state !== "completed") {
+        throw computerActionReceiptError(receipt);
+      }
+      return receipt;
     },
-    [act, actFromFrame]
+    [act, actFromFrame, computer.controlError, inputDenied]
   );
-  const copyFromRfb = useCallback4(
+  const reconnect = () => {
+    void refreshComputer();
+    if (appTarget) appInputPosture.refresh();
+    else frames.reconnect();
+  };
+  const copyFromRfb = useCallback5(
     (event) => {
-      if (!rfbStream || computer.session?.capabilities?.clipboard !== true) return;
+      if (!rfbInputEnabled || !rfbStream || computer.session?.capabilities?.clipboard !== true)
+        return;
       event.preventDefault();
       event.stopPropagation();
-      void perform({ type: "clipboard", operation: "copy" }, null).then(() => computer.readClipboard()).then(async (clipboard) => {
+      void (async () => {
+        const receipt = await perform({ type: "clipboard", operation: "copy" }, null);
+        if (isStaleComputerActionResult(receipt)) return;
+        const clipboard = await computer.readClipboard();
+        if (isStaleComputerActionResult(receipt) || isStaleComputerActionResult(clipboard)) return;
         if (clipboard.text && !await copyTextToClipboard(clipboard.text)) {
           throw new Error("Desktop text could not be copied to the local clipboard");
         }
-      }).catch((cause) => notifyError(cause, "Could not copy from the desktop."));
+      })().catch((cause) => notifyError(cause, "Could not copy from the desktop."));
     },
-    [computer, notifyError, perform, rfbStream]
+    [computer, notifyError, perform, rfbInputEnabled, rfbStream]
   );
-  const pasteIntoRfb = useCallback4(
+  const pasteIntoRfb = useCallback5(
     (text) => {
-      if (!rfbStream || computer.session?.capabilities?.clipboard !== true) return false;
+      if (!rfbInputEnabled || !rfbStream || computer.session?.capabilities?.clipboard !== true)
+        return false;
       void (async () => {
-        await perform({ type: "clipboard", operation: "write", text }, null);
-        assertExactComputerClipboard(await computer.readClipboard(), text);
+        const receipt = await perform({ type: "clipboard", operation: "write", text }, null);
+        if (isStaleComputerActionResult(receipt)) return;
+        const clipboard = await computer.readClipboard();
+        if (isStaleComputerActionResult(receipt) || isStaleComputerActionResult(clipboard)) return;
+        assertExactComputerClipboard(clipboard, text);
         await perform({ type: "clipboard", operation: "paste" }, null);
       })().catch((cause) => notifyError(cause, "Could not paste into the desktop."));
       return true;
     },
-    [computer, notifyError, perform, rfbStream]
+    [computer, notifyError, perform, rfbInputEnabled, rfbStream]
   );
   const hideGenericCreate = suppressGenericCreate && liveRelevant.length === 0;
   const generationLossSelected = selectedRegistrySession !== null && isAttachedChromeGenerationLoss(selectedRegistrySession);
@@ -1213,24 +1531,24 @@ function ComputerViewer({
   if (liveSessions.length === 0) {
     if (hideGenericCreate) {
       return /* @__PURE__ */ jsx("div", { className: cn("grid h-full place-items-center bg-og-bg p-6", className), children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm text-center", children: [
-        /* @__PURE__ */ jsx(CircleAlertIcon, { className: "mx-auto size-5 text-og-status-error" }),
+        /* @__PURE__ */ jsx(CircleAlertIcon, { className: "mx-auto size-5 text-og-danger" }),
         /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: "Chrome reconnected\u2014open a fresh browser/desktop." }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: "This Chrome profile is live again, but the previous desktop cannot move to the new connection. Use Browser \u2192 New browser \u2192 Connected Chrome." })
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: "This Chrome profile is live again, but the previous desktop cannot move to the new connection. Use Browser \u2192 New browser \u2192 Connected Chrome." })
       ] }) });
     }
     if (renderEmpty) return renderEmpty(createComputer, creating);
     const error = createError ?? registry.error;
     return /* @__PURE__ */ jsx("div", { className: cn("grid h-full place-items-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-lg border border-og-border bg-og-surface-1 text-og-muted", children: error ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-5 text-og-status-error" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-5 animate-spin" }) }),
+      /* @__PURE__ */ jsx("span", { className: "mx-auto grid size-10 place-items-center rounded-og-lg border border-og-border bg-og-surface-1 text-og-fg-muted", children: error ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-5 text-og-danger" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-5 animate-spin" }) }),
       /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: error ? "Desktop didn\u2019t open" : "Opening desktop\u2026" }),
-      /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: error?.message ?? "Preparing this agent\u2019s desktop. It will appear here when ready." }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: error?.message ?? "Preparing this agent\u2019s desktop. It will appear here when ready." }),
       error ? /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
           onClick: createError ? createComputer : () => void refreshRegistry(),
           disabled: creating || registry.refreshing,
-          className: "mt-4 inline-flex h-8 items-center gap-1.5 rounded-og-sm bg-og-accent-deep px-3 text-og-control font-medium text-og-accent-fg transition hover:brightness-110 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 text-og-primary-fg px-3 text-og-control font-medium transition hover:bg-og-primary-hover disabled:opacity-50",
           children: [
             creating || registry.refreshing ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-3.5" }),
             "Try again"
@@ -1239,122 +1557,167 @@ function ComputerViewer({
       ) : null
     ] }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-og-bg", className), children: [
-    /* @__PURE__ */ jsx(
-      ComputerToolbar,
-      {
-        sessions: liveSessions,
-        relevantSessionIds: currentIds,
-        selectedSessionId: selection?.sessionId ?? null,
-        creating,
-        refreshing: registry.refreshing,
-        interventionCounts,
-        onSelect: (computerSessionId) => selectComputerSession({ sessionId: computerSessionId, pinned: true }),
-        onFollow: () => {
-          if (relevant[0]) selectComputerSession({ sessionId: relevant[0].id, pinned: false });
-        },
-        onCreate: hideGenericCreate ? void 0 : createComputer,
-        onRefresh: () => void Promise.all([refreshRegistry(), refreshComputer()])
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      InteractionInterventionBanner,
-      {
-        interventions: selectedInterventions,
-        activeTargetId: computer.selectedTarget?.id ?? null,
-        mutating: interventions.mutating,
-        onOpen: (intervention) => void computer.selectTarget(intervention.targetId).catch((cause) => notifyError(cause, "Could not open the requested desktop view.")),
-        onResolve: resolveIntervention
-      }
-    ),
-    !selectedRegistrySession ? /* @__PURE__ */ jsx(
-      ComputerUnselectedPanel,
-      {
-        peerCount: liveSessions.length,
-        creating,
-        error: createError,
-        generationLoss: suppressGenericCreate,
-        onCreate: createComputer
-      }
-    ) : !controllerReady ? /* @__PURE__ */ jsx(
-      ComputerLifecyclePanel,
-      {
-        session: selectedRegistrySession,
-        creating,
-        onRefresh: registry.refresh,
-        onRetry: createComputer
-      }
-    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        ComputerTargetRail,
-        {
-          targets: computer.targets,
-          selectedTargetId: computer.selectedTarget?.id ?? null,
-          loading: computer.loading,
-          onSelect: (targetId) => void computer.selectTarget(targetId).catch((cause) => notifyError(cause, "Could not switch desktop views."))
-        }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "@container/computer-viewer relative flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-og-bg",
+        className
       ),
-      /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
-        rfbStream ? /* @__PURE__ */ jsx("div", { className: "relative min-h-0 flex-1 bg-black", onCopyCapture: copyFromRfb, children: /* @__PURE__ */ jsx(
-          DesktopViewer,
+      children: [
+        /* @__PURE__ */ jsx(
+          ComputerToolbar,
           {
-            capability: rfbCapability,
-            interactive: true,
-            showControlToggle: false,
-            webSocketProtocols: rfbStream.protocols,
-            onPasteText: pasteIntoRfb,
-            targetPlatform: computer.session?.platform ?? null,
-            className: "h-full"
+            sessions: liveSessions,
+            relevantSessionIds: currentIds,
+            selectedSessionId: selection?.sessionId ?? null,
+            creating,
+            refreshing: registry.refreshing || inputPosturePending,
+            interventionCounts,
+            targets: controllerReady ? computer.targets : [],
+            selectedTargetId: computer.selectedTarget?.id ?? null,
+            targetsLoading: controllerReady && computer.loading,
+            onSelectTarget: (targetId) => {
+              void computer.selectTarget(targetId).catch((cause) => notifyError(cause, "Could not switch desktop views."));
+            },
+            onSelect: (computerSessionId) => selectComputerSession({ sessionId: computerSessionId, pinned: true }),
+            onFollow: () => {
+              if (relevant[0]) selectComputerSession({ sessionId: relevant[0].id, pinned: false });
+            },
+            onCreate: hideGenericCreate ? void 0 : createComputer,
+            onRefresh: () => {
+              if (appTarget) {
+                appInputPosture.refresh();
+              } else if ((connectionState === "error" || inputDenied) && !generationLossSelected && !generationLossFrames) {
+                frames.reconnect();
+              }
+              void Promise.all([refreshRegistry(), refreshComputer()]);
+            }
           }
-        ) }) : /* @__PURE__ */ jsx(
-          ComputerViewport,
+        ),
+        /* @__PURE__ */ jsx(
+          InteractionInterventionBanner,
           {
-            frame: machineLocked ? null : displayedFrame,
-            observation: computer.observation,
-            target: computer.selectedTarget,
-            machineLocked,
-            connectionState: frames.state,
-            connectionError: frames.error ?? computer.error,
-            mutating: computer.mutating,
-            backgroundActions: computer.session?.capabilities?.backgroundActions === true,
-            clipboardEnabled: computer.session?.capabilities?.clipboard === true,
-            onAction: perform,
-            onReadClipboard: computer.readClipboard,
-            onReconnect: generationLossSelected || generationLossFrames ? () => void 0 : frames.reconnect,
-            onError: (cause) => notifyError(cause, "Desktop input failed.")
+            interventions: selectedInterventions,
+            activeTargetId: computer.selectedTarget?.id ?? null,
+            mutating: interventions.mutating,
+            onOpen: (intervention) => void computer.selectTarget(intervention.targetId).catch((cause) => notifyError(cause, "Could not open the requested desktop view.")),
+            onResolve: resolveIntervention
           }
         ),
-        showControls ? /* @__PURE__ */ jsx(
-          ComputerSemanticPanel,
+        !selectedRegistrySession ? /* @__PURE__ */ jsx(
+          ComputerUnselectedPanel,
           {
-            observation: computer.observation,
-            mutating: computer.mutating,
-            onAction: (action) => void perform(action, null).catch(
-              (cause) => notifyError(cause, "Desktop action failed.")
-            )
+            peerCount: liveSessions.length,
+            creating,
+            error: createError,
+            generationLoss: suppressGenericCreate,
+            onCreate: createComputer
           }
-        ) : null
-      ] }),
-      /* @__PURE__ */ jsx(
-        ComputerStatusBar,
-        {
-          session: computer.session,
-          target: computer.selectedTarget,
-          connectionState: frames.state,
-          refreshing: registry.refreshing,
-          showControls,
-          controlCount: semanticNodes(computer.observation).length,
-          onToggleControls: () => setShowControls((current) => !current)
-        }
-      )
-    ] })
-  ] });
+        ) : !controllerReady ? /* @__PURE__ */ jsx(
+          ComputerLifecyclePanel,
+          {
+            session: selectedRegistrySession,
+            creating,
+            onRefresh: registry.refresh,
+            onRetry: createComputer
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col @xl/computer-viewer:flex-row", children: [
+            rfbStream ? /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1 bg-black", onCopyCapture: copyFromRfb, children: [
+              /* @__PURE__ */ jsx(
+                DesktopViewer,
+                {
+                  capability: rfbCapability,
+                  interactive: rfbInputEnabled,
+                  showControlToggle: false,
+                  webSocketProtocols: rfbStream.protocols,
+                  onPasteText: pasteIntoRfb,
+                  targetPlatform: computer.session?.platform ?? null,
+                  className: "h-full"
+                }
+              ),
+              !rfbInputEnabled ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full border border-white/10 bg-black/70 px-3 py-1 text-[11px] text-white/80 backdrop-blur", children: controlUnavailable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                "Desktop controls unavailable",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: reconnect,
+                    className: "pointer-events-auto ml-2 font-medium underline",
+                    children: "Reconnect"
+                  }
+                )
+              ] }) : "View only \xB7 direct input unavailable" }) : null
+            ] }) : /* @__PURE__ */ jsx(
+              ComputerViewport,
+              {
+                frame: machineLocked ? null : displayedFrame,
+                observation: computer.observation,
+                target: computer.selectedTarget,
+                machineLocked,
+                controlUnavailable,
+                inputAllowed: !inputDenied,
+                connectionState,
+                connectionError: computer.controlError ?? appInputPosture.error ?? frames.error ?? computer.error,
+                mutating: computer.mutating,
+                backgroundActions: computer.session?.capabilities?.backgroundActions === true,
+                backgroundInput: computer.session?.capabilities?.backgroundInput === true,
+                allowForegroundInputWithinOwnedSeat: computer.session?.platform === "linux" && computer.session.adapter === "opengeni.cua.linux.v1" && computer.session.seatId === `linux-virtual:${computer.session.id}` && Boolean(computer.session.displayId),
+                clipboardEnabled: attachmentInputAllowed && computer.session?.capabilities?.clipboard === true,
+                pointerInput: attachmentInputAllowed && computer.session?.capabilities?.pointerInput === true,
+                pointerClickContinuation: attachmentInputAllowed && computer.session?.capabilities?.pointerClickContinuation === true,
+                keyboardInput: attachmentInputAllowed && computer.session?.capabilities?.keyboardInput === true,
+                onAction: perform,
+                onReadClipboard: computer.readClipboard,
+                onReconnect: generationLossSelected || generationLossFrames ? () => void 0 : reconnect,
+                onError: (cause) => notifyError(cause, "Desktop input failed.")
+              },
+              JSON.stringify([
+                selection?.sessionId,
+                computer.selectedTarget?.id,
+                computer.selectedTarget?.targetGeneration,
+                frames.attachment?.controllerGeneration
+              ])
+            ),
+            showControls ? /* @__PURE__ */ jsx(
+              ComputerSemanticPanel,
+              {
+                observation: computer.observation,
+                mutating: computer.mutating || controlUnavailable || inputDenied,
+                controlUnavailable,
+                inputAllowed: !inputDenied,
+                onAction: (action) => void perform(action, null).catch(
+                  (cause) => notifyError(cause, "Desktop action failed.")
+                )
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            ComputerStatusBar,
+            {
+              session: computer.session,
+              target: computer.selectedTarget,
+              connectionState,
+              controlUnavailable,
+              inputAllowed: !inputDenied,
+              refreshing: registry.refreshing,
+              showControls,
+              controlCount: semanticControls(computer.observation).length,
+              onToggleControls: () => setShowControls((current) => !current)
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 function ComputerUnselectedPanel(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: props.error || props.generationLoss ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4.5 text-og-status-error" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4.5 animate-spin" }) }),
+    /* @__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-fg-muted", children: props.error || props.generationLoss ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4.5 text-og-danger" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4.5 animate-spin" }) }),
     /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: props.generationLoss ? "Chrome reconnected\u2014open a fresh browser/desktop." : props.error ? "Desktop didn\u2019t open" : "Opening desktop\u2026" }),
-    /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: props.generationLoss ? "This Chrome profile is live again, but the previous desktop cannot move to the new connection. Use Browser \u2192 New browser \u2192 Connected Chrome." : props.error?.message ?? (props.peerCount === 1 ? "Preparing this agent\u2019s desktop. One peer desktop remains available from the menu." : `Preparing this agent\u2019s desktop. ${props.peerCount} peer desktops remain available from the menu.`) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: props.generationLoss ? "This Chrome profile is live again, but the previous desktop cannot move to the new connection. Use Browser \u2192 New browser \u2192 Connected Chrome." : props.error?.message ?? (props.peerCount === 1 ? "Preparing this agent\u2019s desktop. One peer desktop remains available from the menu." : `Preparing this agent\u2019s desktop. ${props.peerCount} peer desktops remain available from the menu.`) }),
     props.error && !props.generationLoss ? /* @__PURE__ */ jsxs(
       "button",
       {
@@ -1371,59 +1734,95 @@ function ComputerUnselectedPanel(props) {
   ] }) });
 }
 function ComputerToolbar(props) {
-  const detailsRef = useRef4(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));
-  const choose = (id) => {
-    props.onSelect(id);
+  const closeMenu = (restoreFocus) => {
     detailsRef.current?.removeAttribute("open");
+    if (restoreFocus) detailsRef.current?.querySelector("summary")?.focus();
   };
-  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(MonitorIcon, { className: "size-3.5 shrink-0 text-og-muted" }),
+  const choose = (id, restoreFocus) => {
+    props.onSelect(id);
+    closeMenu(restoreFocus);
+  };
+  return /* @__PURE__ */ jsxs("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__ */ jsxs("details", { ref: detailsRef, className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs("summary", { className: "flex h-7 max-w-32 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 @sm/computer-viewer:max-w-52 [&::-webkit-details-marker]:hidden", children: [
+        /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3.5 shrink-0 text-og-fg-muted" }),
         /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: selected?.name === "Computer" ? "Desktop" : selected?.name ?? "Desktop" }),
         (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" })
+        /* @__PURE__ */ jsx(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(
-          ComputerSessionGroup,
-          {
-            label: "Current agent",
-            sessions: current,
-            selectedId: props.selectedSessionId,
-            interventionCounts: props.interventionCounts,
-            onSelect: choose
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ComputerSessionGroup,
-          {
-            label: "Other agents",
-            sessions: others,
-            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,
-          props.onCreate ? /* @__PURE__ */ jsxs(MenuButton, { onClick: props.onCreate, disabled: props.creating, children: [
-            /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" }),
-            " New desktop"
-          ] }) : null
+      /* @__PURE__ */ jsxs("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__ */ jsxs("div", { className: "min-h-0 max-h-96 overflow-y-auto overscroll-contain", children: [
+          /* @__PURE__ */ jsx(
+            ComputerSessionGroup,
+            {
+              label: "Current agent",
+              sessions: current,
+              selectedId: props.selectedSessionId,
+              interventionCounts: props.interventionCounts,
+              onSelect: choose
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ComputerSessionGroup,
+            {
+              label: "Other agents",
+              sessions: others,
+              selectedId: props.selectedSessionId,
+              interventionCounts: props.interventionCounts,
+              onSelect: choose
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 flex shrink-0 gap-1 border-t border-og-border pt-1", children: [
+          current.length > 0 ? /* @__PURE__ */ jsx(
+            MenuButton,
+            {
+              onClick: (event) => {
+                props.onFollow();
+                closeMenu(event.detail === 0);
+              },
+              children: "Follow agent"
+            }
+          ) : null,
+          props.onCreate ? /* @__PURE__ */ jsxs(
+            MenuButton,
+            {
+              onClick: (event) => {
+                props.onCreate?.();
+                closeMenu(event.detail === 0);
+              },
+              disabled: props.creating,
+              children: [
+                /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" }),
+                " New desktop"
+              ]
+            }
+          ) : null
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-og-xs text-og-subtle", children: selected ? `${platformLabel(selected)} \xB7 ${placementLabel(selected)}` : "" }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-og-xs text-og-fg-subtle", children: selected ? `${platformLabel(selected)} \xB7 ${placementLabel(selected)}` : "" }),
+    /* @__PURE__ */ jsx(
+      ComputerTargetPicker,
+      {
+        targets: props.targets,
+        selectedTargetId: props.selectedTargetId,
+        loading: props.targetsLoading,
+        onSelect: props.onSelectTarget
+      }
+    ),
     /* @__PURE__ */ jsx(
       "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",
+        disabled: props.refreshing,
+        "aria-busy": props.refreshing,
+        className: "grid size-7 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg",
         "aria-label": "Refresh desktops",
         children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: cn("size-3.5", props.refreshing && "animate-spin") })
       }
@@ -1434,7 +1833,7 @@ function ComputerToolbar(props) {
         type: "button",
         onClick: props.onCreate,
         disabled: props.creating,
-        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: "hidden size-7 place-items-center rounded-og-sm text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-40 @sm/computer-viewer:grid",
         "aria-label": "Open a new desktop",
         children: props.creating ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
       }
@@ -1444,14 +1843,15 @@ function ComputerToolbar(props) {
 function ComputerSessionGroup(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 }),
+    /* @__PURE__ */ jsx("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 interventionCount = props.interventionCounts.get(session.id) ?? 0;
       return /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
-          onClick: () => props.onSelect(session.id),
+          onClick: (event) => props.onSelect(session.id, event.detail === 0),
+          "aria-pressed": session.id === props.selectedId,
           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"
@@ -1468,7 +1868,7 @@ function ComputerSessionGroup(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__ */ jsxs("span", { className: "block truncate text-og-xs text-og-fg-subtle", children: [
                 platformLabel(session),
                 " \xB7 ",
                 placementLabel(session)
@@ -1489,32 +1889,81 @@ function MenuButton(props) {
       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 ComputerTargetRail(props) {
-  const visualTargets = props.targets.filter(isRenderableComputerView);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "flex h-10 shrink-0 items-center gap-1 overflow-x-auto border-b border-og-border bg-og-surface-0 px-2",
-      "aria-label": "Desktop views",
-      children: [
-        visualTargets.map((target) => /* @__PURE__ */ jsxs(
+function ComputerTargetPicker(props) {
+  const screens = props.targets.filter((target) => target.kind === "screen");
+  const advancedTargets = props.targets.filter(
+    (target) => target.kind === "app" || target.kind === "window" && isRenderableComputerView(target)
+  );
+  const advancedRef = useViewerMenuDismiss(advancedTargets.length > 0);
+  const selected = props.targets.find((target) => target.id === props.selectedTargetId);
+  const choose = (id, restoreFocus = false) => {
+    props.onSelect(id);
+    if (advancedRef.current?.open) {
+      advancedRef.current.removeAttribute("open");
+      if (restoreFocus) advancedRef.current.querySelector("summary")?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    screens.length > 1 ? /* @__PURE__ */ jsxs(
+      "select",
+      {
+        "aria-label": "Screen",
+        value: selected?.kind === "screen" ? selected.id : "",
+        onChange: (event) => choose(event.currentTarget.value),
+        className: "h-7 min-w-0 max-w-28 rounded-og-sm border border-og-border bg-og-surface-1 px-1.5 text-og-control text-og-fg outline-hidden focus:border-og-accent @sm/computer-viewer:max-w-40",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: "Screen" }),
+          screens.map((screen, index) => /* @__PURE__ */ jsx("option", { value: screen.id, children: screen.title || `Screen ${index + 1}` }, screen.id))
+        ]
+      }
+    ) : screens[0] && selected?.kind !== "screen" ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => choose(screens[0].id),
+        className: "flex h-7 shrink-0 items-center gap-1.5 rounded-og-sm px-2 text-og-control text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg",
+        children: [
+          /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3.5" }),
+          " Full desktop"
+        ]
+      }
+    ) : null,
+    advancedTargets.length > 0 ? /* @__PURE__ */ jsxs("details", { ref: advancedRef, className: "shrink-0", children: [
+      /* @__PURE__ */ jsxs(
+        "summary",
+        {
+          "aria-label": "Advanced desktop views",
+          title: "Advanced desktop views",
+          className: "flex h-7 cursor-pointer list-none items-center gap-1.5 rounded-og-sm px-2 text-og-control text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg [&::-webkit-details-marker]:hidden",
+          children: [
+            /* @__PURE__ */ jsx(PanelsTopLeftIcon, { className: "size-3.5" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden @sm/computer-viewer:inline", children: "Advanced" }),
+            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-10 z-30 flex max-h-[calc(100%-3rem)] w-64 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__ */ jsx("p", { className: "shrink-0 px-2 py-1 text-og-xs text-og-fg-subtle", children: "Apps and windows" }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 max-h-80 overflow-y-auto overscroll-contain", children: advancedTargets.map((target) => /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            onClick: () => props.onSelect(target.id),
+            onClick: (event) => choose(target.id, event.detail === 0),
+            "aria-pressed": target.id === props.selectedTargetId,
             className: cn(
-              "flex h-7 max-w-56 shrink-0 items-center gap-1.5 rounded-og-sm border px-2 text-og-control transition",
-              target.id === props.selectedTargetId ? "border-og-border-strong bg-og-surface-2 text-og-fg" : "border-transparent text-og-muted hover:bg-og-surface-1 hover:text-og-fg"
+              "flex w-full min-w-0 items-center gap-2 rounded-og-sm px-2 py-1.5 text-left transition hover:bg-og-surface-2",
+              target.id === props.selectedTargetId && "bg-og-surface-2"
             ),
-            "aria-pressed": target.id === props.selectedTargetId,
             children: [
-              target.kind === "screen" ? /* @__PURE__ */ jsx(MonitorIcon, { className: "size-3.5 shrink-0" }) : /* @__PURE__ */ jsx(PanelsTopLeftIcon, { className: "size-3.5 shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: target.title || target.applicationId || target.kind }),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-og-control text-og-fg", children: target.title || target.applicationId || target.kind }),
+                /* @__PURE__ */ jsx("span", { className: "block text-og-xs text-og-fg-subtle", children: target.kind === "app" ? "App controls" : "Window view" })
+              ] }),
               target.focused ? /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -1525,12 +1974,11 @@ function ComputerTargetRail(props) {
             ]
           },
           target.id
-        )),
-        props.loading ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "ml-1 size-3.5 animate-spin text-og-muted" }) : null,
-        !props.loading && visualTargets.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-og-xs text-og-subtle", children: "Waiting for apps and screens\u2026" }) : null
-      ]
-    }
-  );
+        )) })
+      ] })
+    ] }) : null,
+    props.loading ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3.5 shrink-0 animate-spin text-og-fg-muted" }) : null
+  ] });
 }
 function isRenderableComputerView(target) {
   if (target.kind === "screen") return true;
@@ -1545,9 +1993,9 @@ function ComputerLifecyclePanel(props) {
   const failed = ["failed", "lost", "repair_required"].includes(props.session.lifecycle);
   const retryCreatesSession = ["failed", "lost"].includes(props.session.lifecycle);
   return /* @__PURE__ */ jsx("div", { className: "grid min-h-0 flex-1 place-items-center bg-og-bg p-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm text-center", children: [
-    failed ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "mx-auto size-5 text-og-status-error" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "mx-auto size-5 animate-spin text-og-muted" }),
+    failed ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "mx-auto size-5 text-og-danger" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "mx-auto size-5 animate-spin text-og-fg-muted" }),
     /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: generationLoss ? "Chrome reconnected\u2014open a fresh browser/desktop." : failed ? "Desktop needs attention" : lifecycleLabel(props.session.lifecycle) }),
-    /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: generationLoss ? "This Chrome profile is live again, but the previous desktop cannot move to the new connection. Use Browser \u2192 New browser \u2192 Connected Chrome." : computerFailureMessage(props.session) ?? "The desktop is being prepared on its placement. It will appear here when ready." }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: generationLoss ? "This Chrome profile is live again, but the previous desktop cannot move to the new connection. Use Browser \u2192 New browser \u2192 Connected Chrome." : computerFailureMessage(props.session) ?? "The desktop is being prepared on its placement. It will appear here when ready." }),
     failed && !generationLoss ? /* @__PURE__ */ jsxs(
       "button",
       {
@@ -1564,25 +2012,65 @@ function ComputerLifecyclePanel(props) {
   ] }) });
 }
 function ComputerViewport(props) {
-  const canvasRef = useRef4(null);
-  const inputRef = useRef4(null);
-  const pointerStartRef = useRef4(null);
-  const clickTimerRef = useRef4(null);
-  const lastClickRef = useRef4(null);
-  const wheelRef = useRef4(null);
-  const pendingTextRef = useRef4(null);
-  const actionRef = useRef4(props.onAction);
-  const readClipboardRef = useRef4(props.onReadClipboard);
-  const errorRef = useRef4(props.onError);
-  const actionTailRef = useRef4(Promise.resolve());
-  const queuedFrameRef = useRef4(null);
-  const decodingFrameRef = useRef4(false);
-  const mountedRef = useRef4(true);
+  const canvasRef = useRef5(null);
+  const inputRef = useRef5(null);
+  const composingRef = useRef5(false);
+  const pointerStartRef = useRef5(null);
+  const clickTimerRef = useRef5(null);
+  const lastClickRef = useRef5(null);
+  const wheelRef = useRef5(null);
+  const pendingTextRef = useRef5(null);
+  const actionRef = useRef5(props.onAction);
+  const targetRef = useRef5(props.target);
+  const readClipboardRef = useRef5(props.onReadClipboard);
+  const errorRef = useRef5(props.onError);
+  const actionTailRef = useRef5(Promise.resolve());
+  const actionQueueEpochRef = useRef5(0);
+  const queuedTextRef = useRef5(null);
+  const queuedFrameRef = useRef5(null);
+  const currentFrameRef = useRef5(props.frame);
+  const paintedFrameRef = useRef5(null);
+  const [paintedFrame, setPaintedFrame] = useState5(null);
+  const decodingFrameRef = useRef5(false);
+  const mountedRef = useRef5(true);
   actionRef.current = props.onAction;
+  targetRef.current = props.target;
   readClipboardRef.current = props.onReadClipboard;
   errorRef.current = props.onError;
-  const rawInputEnabled = !props.backgroundActions || props.target?.kind === "screen" || props.target?.focused === true;
-  const paintQueuedFrames = useCallback4(() => {
+  const streamFailed = props.connectionState === "error";
+  const rawInputEnabled = props.target?.kind !== "app" && !streamFailed && !props.controlUnavailable && !props.machineLocked && (props.backgroundInput || // CUA may activate within its allocated Linux desktop. This does not
+  // grant foreground input to an attached physical desktop.
+  props.allowForegroundInputWithinOwnedSeat || !props.backgroundActions || props.target?.kind === "screen" || props.target?.focused === true);
+  const clearBufferedInput = useCallback5(() => {
+    if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+    if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
+    if (pendingTextRef.current?.timer) clearTimeout(pendingTextRef.current.timer);
+    clickTimerRef.current = null;
+    wheelRef.current = null;
+    pendingTextRef.current = null;
+    queuedTextRef.current = null;
+    pointerStartRef.current = null;
+    lastClickRef.current = null;
+    composingRef.current = false;
+    if (inputRef.current) inputRef.current.value = "";
+  }, []);
+  const pointerInputEnabled = rawInputEnabled && props.pointerInput;
+  const keyboardInputEnabled = rawInputEnabled && props.keyboardInput;
+  useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    const viewport = canvas?.parentElement;
+    if (!canvas || !viewport) return;
+    const fit = () => fitComputerCanvas(canvas);
+    fit();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", fit);
+      return () => window.removeEventListener("resize", fit);
+    }
+    const observer = new ResizeObserver(fit);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, []);
+  const paintQueuedFrames = useCallback5(() => {
     if (decodingFrameRef.current) return;
     decodingFrameRef.current = true;
     void (async () => {
@@ -1598,8 +2086,10 @@ function ComputerViewport(props) {
               const bitmap = await createImageBitmap(blob);
               try {
                 const canvas2 = canvasRef.current;
-                if (mountedRef.current && canvas2) {
+                if (mountedRef.current && canvas2 && currentFrameRef.current && sameComputerTarget(frame, currentFrameRef.current)) {
                   paintCanvas(canvas2, bitmap, frame.width, frame.height);
+                  paintedFrameRef.current = frame;
+                  setPaintedFrame(frame);
                 }
               } finally {
                 bitmap.close();
@@ -1609,11 +2099,14 @@ function ComputerViewport(props) {
             objectUrl = URL.createObjectURL(blob);
             const image = await loadImage(objectUrl);
             const canvas = canvasRef.current;
-            if (mountedRef.current && canvas) {
+            if (mountedRef.current && canvas && currentFrameRef.current && sameComputerTarget(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 && sameComputerTarget(frame, currentFrameRef.current))
+              errorRef.current(cause);
           } finally {
             if (objectUrl) URL.revokeObjectURL(objectUrl);
           }
@@ -1624,52 +2117,109 @@ function ComputerViewport(props) {
       }
     })();
   }, []);
-  useEffect4(() => {
+  useLayoutEffect(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
+      actionQueueEpochRef.current += 1;
       queuedFrameRef.current = null;
+      clearBufferedInput();
     };
-  }, []);
-  useEffect4(() => {
-    if (!props.frame) return;
+  }, [clearBufferedInput]);
+  useLayoutEffect(() => {
+    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]);
-  useEffect4(
-    () => () => {
-      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
-      if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
-      if (pendingTextRef.current?.timer) clearTimeout(pendingTextRef.current.timer);
-    },
-    []
-  );
-  const enqueue = useCallback4(
-    (action, frame, after) => {
-      actionTailRef.current = actionTailRef.current.catch(() => void 0).then(async () => {
-        await actionRef.current(action, frame);
-        await after?.();
-      }).catch((cause) => errorRef.current(cause));
+  }, [clearBufferedInput, paintQueuedFrames, props.frame]);
+  useLayoutEffect(() => {
+    if (!rawInputEnabled || !props.pointerInput || !props.keyboardInput) {
+      actionQueueEpochRef.current += 1;
+      clearBufferedInput();
+    }
+  }, [clearBufferedInput, props.keyboardInput, props.pointerInput, rawInputEnabled]);
+  const enqueue = useCallback5(
+    (action, frame, after, continuation) => {
+      const epoch = actionQueueEpochRef.current;
+      const plainText = action.type === "keyboard" && action.action === "type";
+      const queuedText = queuedTextRef.current;
+      if (plainText && !frame && !after && !continuation && queuedText?.epoch === epoch && queuedText.delivery.completion === actionTailRef.current && queuedText.action.value.length + action.value.length <= 1e6) {
+        queuedText.action.value += action.value;
+        return queuedText.delivery;
+      }
+      queuedTextRef.current = null;
+      const dispatch = actionRef.current;
+      const admittedTarget = targetRef.current;
+      const isCurrent = () => mountedRef.current && epoch === actionQueueEpochRef.current;
+      const operationId = crypto.randomUUID();
+      let markStarted;
+      const started = new Promise((resolve) => {
+        markStarted = resolve;
+      });
+      const previous = actionTailRef.current;
+      const ready = continuation && previous === continuation.completion ? continuation.started : previous.then(() => true);
+      const delivery = ready.then(async (firstStarted) => {
+        if (queuedTextRef.current?.action === action) queuedTextRef.current = null;
+        if (!firstStarted || !isCurrent()) {
+          markStarted(false);
+          return;
+        }
+        const pending = dispatch(action, frame, operationId);
+        markStarted(true);
+        const receipt = await pending;
+        const isCurrentResult = () => isCurrent() && !isStaleComputerActionResult(receipt);
+        if (!isCurrentResult()) return;
+        const observedTarget = receipt.observation?.target;
+        if (!admittedTarget || receipt.computerSessionId !== admittedTarget.computerSessionId || receipt.controllerGeneration !== admittedTarget.controllerGeneration || receipt.targetId !== admittedTarget.id || observedTarget && (observedTarget.computerSessionId !== admittedTarget.computerSessionId || observedTarget.controllerGeneration !== admittedTarget.controllerGeneration || observedTarget.id !== admittedTarget.id || observedTarget.targetGeneration !== admittedTarget.targetGeneration)) {
+          actionQueueEpochRef.current += 1;
+          clearBufferedInput();
+          return;
+        }
+        await after?.(isCurrentResult);
+      }).catch((cause) => {
+        markStarted(false);
+        if (!isCurrent() || isStaleComputerActionResult(cause)) return;
+        actionQueueEpochRef.current += 1;
+        clearBufferedInput();
+        errorRef.current(cause);
+      });
+      const completion = continuation ? Promise.all([previous, delivery]).then(() => void 0) : delivery;
+      actionTailRef.current = completion;
+      const queued = { operationId, started, completion };
+      if (plainText && !frame && !after && !continuation) {
+        queuedTextRef.current = { action, epoch, delivery: queued };
+      }
+      return queued;
     },
-    []
+    [clearBufferedInput]
   );
-  const point = useCallback4(
+  const point = useCallback5(
     (frame, clientX, clientY) => computerPoint(canvasRef.current, frame, clientX, clientY),
     []
   );
-  const flushPendingText = useCallback4(() => {
+  const flushPendingText = useCallback5(() => {
     const pending = pendingTextRef.current;
     if (!pending) return;
     clearTimeout(pending.timer);
     pendingTextRef.current = null;
     enqueue({ type: "keyboard", action: "type", value: pending.text }, null);
   }, [enqueue]);
-  const flushPendingClick = useCallback4(() => {
+  const flushPendingClick = useCallback5(() => {
     const pending = lastClickRef.current;
     if (!pending) return;
     if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
     clickTimerRef.current = null;
     lastClickRef.current = null;
+    if (!pending.pending) return;
     enqueue(
       {
         type: "pointer",
@@ -1681,23 +2231,47 @@ function ComputerViewport(props) {
       pending.frame
     );
   }, [enqueue]);
+  const flushPendingWheel = useCallback5(() => {
+    const batch = wheelRef.current;
+    if (!batch) return;
+    if (batch.timer) clearTimeout(batch.timer);
+    wheelRef.current = null;
+    enqueue(
+      {
+        type: "pointer",
+        frameId: batch.frame.frameId,
+        action: "scroll",
+        x: batch.x,
+        y: batch.y,
+        deltaX: batch.deltaX,
+        deltaY: batch.deltaY
+      },
+      batch.frame
+    );
+  }, [enqueue]);
   const pointerDown = (event) => {
-    if (!props.frame || props.mutating || !rawInputEnabled || event.button !== 0) return;
+    const frame = paintedFrameRef.current;
+    if (!frame || !props.pointerClickContinuation && props.mutating || !rawInputEnabled || event.button !== 0)
+      return;
+    event.preventDefault();
+    if (keyboardInputEnabled) inputRef.current?.focus({ preventScroll: true });
+    if (!pointerInputEnabled) return;
+    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 });
   };
   const pointerUp = (event) => {
-    if (!rawInputEnabled) return;
+    if (!pointerInputEnabled) return;
     const start = pointerStartRef.current;
     pointerStartRef.current = null;
     if (!start || start.pointerId !== event.pointerId) return;
+    const canvasRect = event.currentTarget.getBoundingClientRect();
     const from = point(start.frame, start.x, start.y);
     const to = point(start.frame, event.clientX, event.clientY);
     if (!from || !to) return;
@@ -1719,7 +2293,7 @@ function ComputerViewport(props) {
     }
     const now = Date.now();
     const previous = lastClickRef.current;
-    if (previous && now - previous.at < 280 && Math.hypot(previous.x - to.x, previous.y - to.y) < 6 && sameFrameFence(previous.frame, start.frame)) {
+    if (previous && now - previous.at < 280 && previous.pending === !props.pointerClickContinuation && (props.pointerClickContinuation ? Math.hypot(previous.clientX - event.clientX, previous.clientY - event.clientY) < 6 && previous.canvasRect.left === canvasRect.left && previous.canvasRect.top === canvasRect.top && previous.canvasRect.width === canvasRect.width && previous.canvasRect.height === canvasRect.height && sameComputerTarget(previous.frame, start.frame) && previous.frame.width === start.frame.width && previous.frame.height === start.frame.height : Math.hypot(previous.x - to.x, previous.y - to.y) < 6 && sameFrameFence(previous.frame, start.frame))) {
       if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
       clickTimerRef.current = null;
       lastClickRef.current = null;
@@ -1727,15 +2301,45 @@ function ComputerViewport(props) {
         {
           type: "pointer",
           frameId: start.frame.frameId,
-          action: "double_click",
+          action: props.pointerClickContinuation ? "click" : "double_click",
+          ...props.pointerClickContinuation ? { clickCount: 2 } : {},
+          ...previous.delivery ? { continuationOfOperationId: previous.delivery.operationId } : {},
+          x: to.x,
+          y: to.y
+        },
+        start.frame,
+        void 0,
+        previous.delivery ?? void 0
+      );
+      return;
+    }
+    flushPendingClick();
+    lastClickRef.current = {
+      at: now,
+      x: to.x,
+      y: to.y,
+      frame: start.frame,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      canvasRect,
+      pending: !props.pointerClickContinuation,
+      delivery: null
+    };
+    if (props.pointerClickContinuation) {
+      const delivery = enqueue(
+        {
+          type: "pointer",
+          frameId: start.frame.frameId,
+          action: "click",
+          clickCount: 1,
           x: to.x,
           y: to.y
         },
         start.frame
       );
+      if (lastClickRef.current) lastClickRef.current.delivery = delivery;
       return;
     }
-    lastClickRef.current = { at: now, x: to.x, y: to.y, frame: start.frame };
     clickTimerRef.current = setTimeout(() => {
       clickTimerRef.current = null;
       lastClickRef.current = null;
@@ -1753,9 +2357,10 @@ function ComputerViewport(props) {
   };
   const contextMenu = (event) => {
     event.preventDefault();
-    if (!rawInputEnabled) return;
-    const frame = props.frame;
+    if (!pointerInputEnabled) return;
+    const frame = paintedFrameRef.current;
     if (!frame) return;
+    flushPendingWheel();
     flushPendingText();
     flushPendingClick();
     const at = point(frame, event.clientX, event.clientY);
@@ -1774,44 +2379,34 @@ function ComputerViewport(props) {
     }
   };
   const wheel = (event) => {
-    if (!rawInputEnabled) return;
-    const frame = props.frame;
+    if (!pointerInputEnabled) return;
+    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 && (!sameComputerTarget(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",
-              frameId: batch.frame.frameId,
-              action: "scroll",
-              x: batch.x,
-              y: batch.y,
-              deltaX: batch.deltaX,
-              deltaY: batch.deltaY
-            },
-            batch.frame
-          );
-        }
-      }, 45)
+      timer: pending?.timer ?? setTimeout(flushPendingWheel, 45)
     };
   };
   const keyDown = (event) => {
-    if (!rawInputEnabled) return;
+    if (!keyboardInputEnabled) return;
+    if (composingRef.current || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) {
+      return;
+    }
+    flushPendingWheel();
     const command = event.metaKey || event.ctrlKey;
     if (props.clipboardEnabled && command && !event.altKey && ["c", "v"].includes(event.key.toLowerCase())) {
       flushPendingText();
@@ -1825,12 +2420,15 @@ function ComputerViewport(props) {
     enqueue({ type: "keyboard", action: "press", value: key }, null);
   };
   const copy = (event) => {
-    if (!props.clipboardEnabled || !rawInputEnabled) return;
+    if (!props.clipboardEnabled || !keyboardInputEnabled) return;
     event.preventDefault();
+    flushPendingWheel();
     flushPendingText();
     flushPendingClick();
-    enqueue({ type: "clipboard", operation: "copy" }, null, async () => {
-      const clipboard = await readClipboardRef.current();
+    const readClipboard = readClipboardRef.current;
+    enqueue({ type: "clipboard", operation: "copy" }, null, async (isCurrent) => {
+      const clipboard = await readClipboard();
+      if (!isCurrent()) return;
       if (!clipboard.text) return;
       if (!await copyTextToClipboard(clipboard.text)) {
         throw new Error("Desktop text could not be copied to the local clipboard");
@@ -1838,18 +2436,25 @@ function ComputerViewport(props) {
     });
   };
   const paste = (event) => {
-    if (!props.clipboardEnabled || !rawInputEnabled) return;
+    if (!props.clipboardEnabled || !keyboardInputEnabled) return;
     event.preventDefault();
+    flushPendingWheel();
     flushPendingText();
     flushPendingClick();
     const text = event.clipboardData.getData("text/plain");
-    enqueue({ type: "clipboard", operation: "write", text }, null, async () => {
-      assertExactComputerClipboard(await readClipboardRef.current(), text);
-      await actionRef.current({ type: "clipboard", operation: "paste" }, null);
+    const readClipboard = readClipboardRef.current;
+    const dispatch = actionRef.current;
+    enqueue({ type: "clipboard", operation: "write", text }, null, async (isCurrent) => {
+      const clipboard = await readClipboard();
+      if (!isCurrent()) return;
+      assertExactComputerClipboard(clipboard, text);
+      await dispatch({ type: "clipboard", operation: "paste" }, null);
     });
   };
-  const input = (value) => {
-    if (!value || !rawInputEnabled) return;
+  const input = (value, nativeComposing = false) => {
+    if (composingRef.current || nativeComposing) return;
+    if (!value || !keyboardInputEnabled) return;
+    flushPendingWheel();
     flushPendingClick();
     const pending = pendingTextRef.current;
     if (pending) {
@@ -1864,7 +2469,11 @@ function ComputerViewport(props) {
     }
     if (inputRef.current) inputRef.current.value = "";
   };
-  const showCanvas = props.frame !== null && !props.machineLocked;
+  const compositionEnd = (event) => {
+    composingRef.current = false;
+    input(event.currentTarget.value || event.data);
+  };
+  const showCanvas = props.frame !== null && paintedFrame !== null && sameComputerTarget(props.frame, paintedFrame) && !props.machineLocked && !streamFailed;
   return /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-black", children: [
     /* @__PURE__ */ jsx(
       "canvas",
@@ -1873,7 +2482,7 @@ function ComputerViewport(props) {
         className: cn(
           "absolute inset-0 m-auto max-h-full max-w-full touch-none focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent",
           !showCanvas && "invisible",
-          !rawInputEnabled && "cursor-default"
+          !pointerInputEnabled && "cursor-default"
         ),
         onPointerDown: pointerDown,
         onPointerUp: pointerUp,
@@ -1890,7 +2499,11 @@ function ComputerViewport(props) {
       {
         ref: inputRef,
         defaultValue: "",
-        onInput: (event) => input(event.currentTarget.value),
+        onInput: (event) => input(event.currentTarget.value, event.nativeEvent.isComposing),
+        onCompositionStart: () => {
+          composingRef.current = true;
+        },
+        onCompositionEnd: compositionEnd,
         onKeyDown: keyDown,
         onCopy: copy,
         onPaste: paste,
@@ -1899,7 +2512,7 @@ function ComputerViewport(props) {
         autoCapitalize: "off",
         autoCorrect: "off",
         spellCheck: false,
-        disabled: !rawInputEnabled
+        disabled: !keyboardInputEnabled
       }
     ),
     !showCanvas ? /* @__PURE__ */ jsx(
@@ -1907,6 +2520,8 @@ function ComputerViewport(props) {
       {
         observation: props.observation,
         machineLocked: props.machineLocked,
+        controlUnavailable: props.controlUnavailable,
+        inputAllowed: props.inputAllowed,
         connectionState: props.connectionState,
         error: props.connectionError,
         onAction: (action) => enqueue(action, null),
@@ -1917,16 +2532,16 @@ function ComputerViewport(props) {
       /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }),
       " Acting"
     ] }) : null,
-    showCanvas && !rawInputEnabled ? /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-full border border-white/10 bg-black/70 py-1 pl-3 pr-1 text-[11px] text-white/80 backdrop-blur", children: [
-      /* @__PURE__ */ jsx("span", { children: "Background view \xB7 use native controls" }),
-      props.target ? /* @__PURE__ */ jsx(
+    showCanvas && (!rawInputEnabled || !props.pointerInput || !props.keyboardInput) ? /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 left-1/2 flex w-max max-w-[calc(100%-1.5rem)] -translate-x-1/2 items-center gap-2 rounded-full border border-white/10 bg-black/70 py-1 pl-3 pr-1 text-[11px] text-white/80 backdrop-blur", children: [
+      /* @__PURE__ */ jsx("span", { children: !rawInputEnabled && (props.pointerInput || props.keyboardInput) ? "Background view \xB7 use app controls" : !props.pointerInput && !props.keyboardInput ? "View only \xB7 mouse and keyboard unavailable" : props.keyboardInput ? "Keyboard only \xB7 mouse unavailable" : "Mouse only \xB7 keyboard unavailable" }),
+      !rawInputEnabled && props.target && (props.pointerInput || props.keyboardInput) ? /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           disabled: props.mutating,
           onClick: () => enqueue({ type: "focus", targetId: props.target.id }, null),
-          className: "rounded-full bg-white/10 px-2 py-0.5 font-medium text-white transition hover:bg-white/20 disabled:opacity-50",
-          children: "Control directly"
+          className: "shrink-0 whitespace-nowrap rounded-full bg-white/10 px-2 py-0.5 font-medium text-white transition hover:bg-white/20 disabled:opacity-50",
+          children: "Bring to front"
         }
       ) : null
     ] }) : null
@@ -1940,21 +2555,23 @@ function assertExactComputerClipboard(clipboard, expected) {
 function ComputerViewportFallback(props) {
   if (props.machineLocked) {
     return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid place-items-center bg-og-bg p-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-sm text-center", children: [
-      /* @__PURE__ */ jsx(LockKeyholeIcon, { className: "mx-auto size-6 text-og-muted" }),
+      /* @__PURE__ */ jsx(LockKeyholeIcon, { className: "mx-auto size-6 text-og-fg-muted" }),
       /* @__PURE__ */ jsx("p", { className: "mt-3 text-og-menu font-medium text-og-fg", children: "Machine locked" }),
-      /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-muted", children: "Live frames and input stay private until someone unlocks the machine." })
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-og-control leading-5 text-og-fg-muted", children: "Live frames and input stay private until someone unlocks the machine." })
     ] }) });
   }
+  const appControls = props.observation?.target.kind === "app";
   const controlFailure = interactionControlFailureFromError(props.error);
-  const interactive = semanticNodes(props.observation).filter((node) => semanticAction(node) !== null).slice(0, 10);
-  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: [
+  const interactive = semanticControls(props.observation).filter((node) => semanticAction(node) !== null).slice(0, 10);
+  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-1 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" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4 animate-spin text-og-muted" }),
-      /* @__PURE__ */ jsx("p", { className: "text-og-menu font-medium text-og-fg", children: isAttachedChromeGenerationLossError(props.error) ? "Chrome reconnected\u2014open a fresh browser/desktop." : props.error ? "Live view disconnected" : computerConnectionLabel(props.connectionState) })
+      props.error ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4 text-og-danger" }) : appControls ? /* @__PURE__ */ jsx(PanelsTopLeftIcon, { className: "size-4 text-og-fg-muted" }) : /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4 animate-spin text-og-fg-muted" }),
+      /* @__PURE__ */ jsx("p", { className: "text-og-menu font-medium text-og-fg", children: isAttachedChromeGenerationLossError(props.error) ? "Chrome reconnected\u2014open a fresh browser/desktop." : !props.inputAllowed ? "View only" : props.controlUnavailable ? "Desktop controls unavailable" : props.error ? "Live view disconnected" : appControls ? "App controls" : computerConnectionLabel(props.connectionState) })
     ] }),
-    props.error ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-og-control leading-5 text-og-muted", children: isAttachedChromeGenerationLossError(props.error) ? "Chrome reconnected\u2014open a fresh browser/desktop. Use Browser \u2192 New browser \u2192 Connected Chrome." : 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: "Native controls remain available" }),
+    props.error ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-og-control leading-5 text-og-fg-muted", children: isAttachedChromeGenerationLossError(props.error) ? "Chrome reconnected\u2014open a fresh browser/desktop. Use Browser \u2192 New browser \u2192 Connected Chrome." : controlFailure?.message ?? props.error.message }) : null,
+    !props.inputAllowed ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-og-control leading-5 text-og-fg-muted", children: "Refresh to check desktop controls." }) : null,
+    interactive.length > 0 && !props.controlUnavailable && props.inputAllowed ? /* @__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-fg-subtle", children: "App controls remain available" }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: interactive.map((node) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -1974,20 +2591,21 @@ function ComputerViewportFallback(props) {
       {
         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: controlFailure?.retryable === false ? "Try again" : "Reconnect"
       }
     ) : null
   ] }) });
 }
 function ComputerSemanticPanel(props) {
-  const nodes = semanticNodes(props.observation).slice(0, 100);
-  return /* @__PURE__ */ jsxs("aside", { className: "w-64 shrink-0 overflow-y-auto border-l border-og-border bg-og-surface-0 p-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-1.5 px-1 text-og-xs font-medium uppercase tracking-[0.1em] text-og-subtle", children: [
+  const nodes = semanticControls(props.observation).slice(0, 100);
+  return /* @__PURE__ */ jsxs("aside", { className: "box-border max-h-[40%] w-full shrink-0 overflow-y-auto border-t border-og-border bg-og-surface-1 p-2 @xl/computer-viewer:max-h-none @xl/computer-viewer:w-64 @xl/computer-viewer:border-t-0 @xl/computer-viewer:border-l", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-1.5 px-1 text-og-xs font-medium uppercase tracking-[0.1em] text-og-fg-subtle", children: [
       /* @__PURE__ */ jsx(KeyboardIcon, { className: "size-3" }),
-      " Native controls"
+      " App controls"
     ] }),
-    nodes.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-og-control leading-5 text-og-muted", children: "This view has no accessibility controls. Use the live image instead." }) : /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: nodes.map((node) => /* @__PURE__ */ jsx(
+    !props.inputAllowed ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-og-control leading-5 text-og-fg-muted", children: "View only \xB7 refresh to check desktop controls." }) : props.controlUnavailable ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-og-control leading-5 text-og-fg-muted", children: "Reconnect to use app controls." }) : null,
+    nodes.length === 0 ? props.controlUnavailable ? null : /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-og-control leading-5 text-og-fg-muted", children: "This view has no accessibility controls. Use the live image instead." }) : /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: nodes.map((node) => /* @__PURE__ */ jsx(
       ComputerSemanticControl,
       {
         node,
@@ -2003,8 +2621,8 @@ function ComputerSemanticControl(props) {
   const editable = node.actions.includes("set_value");
   const action = semanticAction(node);
   const observedValue = semanticValue(node) ?? "";
-  const [value, setValue] = useState4(() => observedValue);
-  useEffect4(() => {
+  const [value, setValue] = useState5(() => observedValue);
+  useEffect5(() => {
     setValue(observedValue);
   }, [node.ref, observedValue]);
   if (editable) {
@@ -2014,6 +2632,7 @@ function ComputerSemanticControl(props) {
         className: "rounded-og-sm px-2 py-1.5 hover:bg-og-surface-2",
         onSubmit: (event) => {
           event.preventDefault();
+          if (props.mutating) return;
           props.onAction({
             type: "semantic",
             locator: { kind: "ref", ref: node.ref },
@@ -2022,7 +2641,7 @@ function ComputerSemanticControl(props) {
           });
         },
         children: [
-          /* @__PURE__ */ jsx("label", { className: "block truncate text-[10px] uppercase text-og-subtle", children: node.name || node.identifier || node.role }),
+          /* @__PURE__ */ jsx("label", { className: "block truncate text-[10px] uppercase text-og-fg-subtle", children: node.name || node.identifier || node.role }),
           /* @__PURE__ */ jsxs("div", { className: "mt-1 flex gap-1", children: [
             /* @__PURE__ */ jsx(
               "input",
@@ -2058,7 +2677,7 @@ function ComputerSemanticControl(props) {
       },
       className: "flex w-full items-start gap-2 rounded-og-sm px-2 py-1.5 text-left transition hover:bg-og-surface-2 disabled:cursor-default disabled:hover:bg-transparent",
       children: [
-        /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-[10px] uppercase text-og-subtle", children: node.role }),
+        /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-[10px] uppercase text-og-fg-subtle", children: node.role }),
         /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-og-control text-og-fg", children: node.name || semanticValue(node) || node.identifier || "Unnamed control" })
       ]
     }
@@ -2066,7 +2685,7 @@ function ComputerSemanticControl(props) {
 }
 function ComputerStatusBar(props) {
   const screen = props.target?.kind === "screen";
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-8 shrink-0 items-center gap-2 border-t border-og-border bg-og-surface-0 px-2 text-og-xs text-og-subtle", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-8 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__ */ jsx(
       "span",
       {
@@ -2076,11 +2695,11 @@ function ComputerStatusBar(props) {
         )
       }
     ),
-    /* @__PURE__ */ jsx("span", { children: props.connectionState === "live" ? "Live" : computerConnectionLabel(props.connectionState) }),
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: screen ? "Full screen \xB7 input may move pointer and focus" : props.session?.capabilities?.backgroundActions ? "Window \xB7 semantic controls stay in the background" : props.target?.kind ?? "Desktop" }),
+    /* @__PURE__ */ jsx("span", { children: !props.inputAllowed ? "View only" : props.controlUnavailable ? "Controls unavailable" : props.target?.kind === "app" ? "App controls" : props.connectionState === "live" ? "Live" : computerConnectionLabel(props.connectionState) }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: !props.inputAllowed ? "Refresh to check desktop controls" : props.controlUnavailable ? "Reconnect to use desktop input" : screen ? "Full screen \xB7 input may move pointer and focus" : props.target?.kind === "app" ? props.session?.capabilities?.backgroundActions ? "App \xB7 controls work in the background" : "App controls" : props.session?.capabilities?.backgroundInput ? "Window \xB7 clicks and typing stay in the background" : props.session?.capabilities?.backgroundActions ? "Window \xB7 app controls work in the background" : props.target?.kind ?? "Desktop" }),
     screen ? /* @__PURE__ */ jsx(MousePointer2Icon, { className: "size-3", "aria-hidden": true }) : null,
     props.refreshing ? /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }) : null,
-    /* @__PURE__ */ jsxs(
+    props.controlCount > 0 || props.showControls ? /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -2095,7 +2714,7 @@ function ComputerStatusBar(props) {
           props.controlCount
         ]
       }
-    )
+    ) : null
   ] });
 }
 function ComputerNotice(props) {
@@ -2103,7 +2722,7 @@ function ComputerNotice(props) {
     "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: [
@@ -2113,11 +2732,30 @@ function ComputerNotice(props) {
     }
   );
 }
-function semanticNodes(observation) {
+var structuralRoles = /* @__PURE__ */ new Set([
+  "frame",
+  "panel",
+  "section",
+  "document",
+  "document web",
+  "static",
+  "static text",
+  "heading",
+  "paragraph",
+  "notification",
+  "separator",
+  "tool bar",
+  "page tab list"
+]);
+function semanticControls(observation) {
   if (observation?.semantic?.kind !== "snapshot") return [];
   const result = [];
   const visit = (node) => {
-    result.push(node);
+    const role = node.role.trim().toLowerCase();
+    const label = node.name?.trim() || node.identifier?.trim();
+    if (node.actions.includes("set_value") || label && label.toLowerCase() !== role && !structuralRoles.has(role) && semanticAction(node) !== null) {
+      result.push(node);
+    }
     node.children?.forEach(visit);
   };
   observation.semantic.roots.forEach(visit);
@@ -2138,11 +2776,24 @@ function semanticValue(node) {
   return typeof node.value === "string" ? node.value : null;
 }
 function paintCanvas(canvas, image, width, height) {
+  const dimensionsChanged = canvas.width !== width || canvas.height !== height;
   canvas.width = width;
   canvas.height = height;
   const context = canvas.getContext("2d", { alpha: false });
   if (!context) throw new Error("Desktop canvas is unavailable.");
   context.drawImage(image, 0, 0, width, height);
+  if (dimensionsChanged) fitComputerCanvas(canvas);
+}
+function fitComputerCanvas(canvas) {
+  const viewport = canvas.parentElement;
+  if (!viewport || canvas.width <= 0 || canvas.height <= 0) return;
+  const scale = Math.min(
+    viewport.clientWidth / canvas.width,
+    viewport.clientHeight / canvas.height
+  );
+  if (!Number.isFinite(scale) || scale <= 0) return;
+  canvas.style.width = `${canvas.width * scale}px`;
+  canvas.style.height = `${canvas.height * scale}px`;
 }
 function loadImage(url) {
   return new Promise((resolve, reject) => {
@@ -2189,7 +2840,10 @@ function computerKey(event) {
   return parts.join("+");
 }
 function sameFrameFence(left, right) {
-  return left.frameId === right.frameId && left.computerSessionId === right.computerSessionId && left.targetId === right.targetId && left.targetGeneration === right.targetGeneration;
+  return left.frameId === right.frameId && sameComputerTarget(left, right);
+}
+function sameComputerTarget(left, right) {
+  return left.computerSessionId === right.computerSessionId && left.controllerGeneration === right.controllerGeneration && left.targetId === right.targetId && left.targetGeneration === right.targetGeneration;
 }
 function isLiveComputer2(session) {
   return !["ending", "ended", "failed", "lost"].includes(session.lifecycle);
@@ -2202,6 +2856,8 @@ function computerFailureMessage(session) {
       return "The desktop connection was lost. Try opening it again.";
     case "controller_transition_expired":
       return session.placement.kind === "attached_device" ? "Chrome reconnected\u2014open a fresh browser/desktop. Use Browser \u2192 New browser \u2192 Connected Chrome." : "The desktop connection expired. Open a new desktop.";
+    case "idle_released":
+      return "The desktop stopped after it went unused. Open a new desktop.";
     case null:
       return null;
     default:
@@ -2291,10 +2947,10 @@ function computerConnectionLabel(state) {
 }
 
 export {
-  useComputerFrameStream,
-  useComputerSession,
   useComputerSessions,
+  useComputerSession,
+  useComputerFrameStream,
   ComputerViewer,
   computerKey
 };
-//# sourceMappingURL=chunk-ELIYWBZR.js.map
+//# sourceMappingURL=chunk-GUUXOISA.js.map