@opengeni/react 3.3.2 → 3.4.1-canary.38960406141001

package/src/components/computer-viewer.tsx

@@ -1,5 +1,6 @@
 import type {
   ComputerAction,
+  ComputerActionReceipt,
   ComputerClipboard,
   ComputerFrame,
   ComputerObservation,
@@ -25,6 +26,7 @@ import {
 } from "lucide-react";
 import {
   type ClipboardEvent,
+  type CompositionEvent,
   type KeyboardEvent,
   type MouseEvent,
   type PointerEvent,
@@ -32,6 +34,7 @@ import {
   type WheelEvent,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -40,7 +43,12 @@ import {
   type ComputerFrameWebSocketFactory,
   useComputerFrameStream,
 } from "../hooks/use-computer-frame-stream";
-import { useComputerSession } from "../hooks/use-computer-session";
+import {
+  computerActionReceiptError,
+  isStaleComputerActionResult,
+  useComputerSession,
+} from "../hooks/use-computer-session";
+import { useComputerInputPosture } from "../hooks/use-computer-input-posture";
 import { useComputerSessions } from "../hooks/use-computer-sessions";
 import { useInteractionInterventions } from "../hooks/use-interaction-interventions";
 import { cn } from "../lib/cn";
@@ -49,11 +57,12 @@ import { isSourcePlacementChangedError } from "../lib/interaction-errors";
 import type { EmbeddedComputerInteractionClientOverride } from "../session-context";
 import { InteractionInterventionBanner } from "./interaction-intervention-banner";
 import { DesktopViewer } from "./desktop-viewer";
+import { useViewerMenuDismiss } from "./use-viewer-menu-dismiss";
 
 export type ComputerViewerNotification = { kind: "error" | "info"; message: string };
 
 export type ComputerViewerProps = EmbeddedComputerInteractionClientOverride & {
-  /** Selected OpenGeni agent/session. Peer ComputerSessions remain visible. */
+  /** Selected Opengeni agent/session. Peer ComputerSessions remain visible. */
   sessionId: string;
   enabled?: boolean | undefined;
   className?: string | undefined;
@@ -170,6 +179,7 @@ export function ComputerViewer({
 
   const notifyError = useCallback(
     (cause: unknown, fallback: string) => {
+      if (isStaleComputerActionResult(cause)) return;
       onNotify?.({
         kind: "error",
         message: cause instanceof Error ? cause.message : fallback,
@@ -253,6 +263,9 @@ export function ComputerViewer({
     computerSessionId: selection?.sessionId ?? null,
     enabled: enabled && selection !== null && controllerReady,
   });
+  useEffect(() => {
+    setShowControls(computer.selectedTarget?.kind === "app");
+  }, [sessionId, selection?.sessionId, computer.selectedTarget?.id, computer.selectedTarget?.kind]);
   useEffect(() => {
     if (!isSourcePlacementChangedError(computer.error, "computer_session")) return;
     void refreshRegistry();
@@ -282,18 +295,69 @@ export function ComputerViewer({
   const displayedFrame =
     frames.frame &&
     frames.frame.computerSessionId === selection?.sessionId &&
-    frames.frame.targetId === computer.selectedTarget?.id
+    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 = useRef({
+    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;
+  }
+  // Keep a known denial while a fresh attachment is pending or a semantic-only
+  // target has no stream. Only a fresh posture for this controller clears it.
+  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;
+  // RFB has one combined input switch; partial native input stays view-only.
+  const rfbInputEnabled =
+    rfbStream?.inputAllowed === true &&
+    attachmentInputAllowed &&
+    !machineLocked &&
+    !controlUnavailable &&
+    computer.session?.capabilities?.pointerInput === true &&
+    computer.session?.capabilities?.keyboardInput === true;
   const rfbCapability = useMemo<DesktopStreamCapability | null>(() => {
     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,
@@ -305,8 +369,7 @@ export 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 = useMemo(() => new Set(relevant.map((session) => session.id)), [relevant]);
 
   useEffect(() => {
@@ -433,37 +496,57 @@ export function ComputerViewer({
   ]);
 
   const perform = useCallback(
-    async (action: ComputerAction, frame: ComputerFrame | null): Promise<void> => {
+    async (
+      action: ComputerAction,
+      frame: ComputerFrame | null,
+      operationId?: string,
+    ): Promise<ComputerActionReceipt> => {
+      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 reconnect = () => {
+    void refreshComputer();
+    if (appTarget) appInputPosture.refresh();
+    else frames.reconnect();
+  };
+
   const copyFromRfb = useCallback(
     (event: ClipboardEvent<HTMLDivElement>) => {
-      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) => {
-          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."));
+      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."));
     },
-    [computer, notifyError, perform, rfbStream],
+    [computer, notifyError, perform, rfbInputEnabled, rfbStream],
   );
 
   const pasteIntoRfb = useCallback(
     (text: string): boolean => {
-      if (!rfbStream || computer.session?.capabilities?.clipboard !== true) return false;
+      if (!rfbInputEnabled || !rfbStream || computer.session?.capabilities?.clipboard !== true)
+        return false;
       // Keep paste on the canonical ComputerSession action path. RFB
       // ClientCutText synchronization varies by server and can acknowledge a
       // local paste without ever updating the remote graphical seat. These two
@@ -472,13 +555,16 @@ export function ComputerViewer({
       // ownership is asynchronous, so a successful write response alone does
       // not prove that the graphical seat can already serve the selection.
       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;
@@ -501,11 +587,11 @@ export function ComputerViewer({
       return (
         <div className={cn("grid h-full place-items-center bg-og-bg p-6", className)}>
           <div className="max-w-sm text-center">
-            <CircleAlertIcon className="mx-auto size-5 text-og-status-error" />
+            <CircleAlertIcon className="mx-auto size-5 text-og-danger" />
             <p className="mt-3 text-og-menu font-medium text-og-fg">
               Chrome reconnected—open a fresh browser/desktop.
             </p>
-            <p className="mt-1 text-og-control leading-5 text-og-muted">
+            <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
               This Chrome profile is live again, but the previous desktop cannot move to the new
               connection. Use Browser → New browser → Connected Chrome.
             </p>
@@ -518,9 +604,9 @@ export function ComputerViewer({
     return (
       <div className={cn("grid h-full place-items-center bg-og-bg p-6", className)}>
         <div className="max-w-sm text-center">
-          <span className="mx-auto grid size-10 place-items-center rounded-og-lg border border-og-border bg-og-surface-1 text-og-muted">
+          <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">
             {error ? (
-              <CircleAlertIcon className="size-5 text-og-status-error" />
+              <CircleAlertIcon className="size-5 text-og-danger" />
             ) : (
               <LoaderCircleIcon className="size-5 animate-spin" />
             )}
@@ -528,7 +614,7 @@ export function ComputerViewer({
           <p className="mt-3 text-og-menu font-medium text-og-fg">
             {error ? "Desktop didn’t open" : "Opening desktop…"}
           </p>
-          <p className="mt-1 text-og-control leading-5 text-og-muted">
+          <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
             {error?.message ?? "Preparing this agent’s desktop. It will appear here when ready."}
           </p>
           {error ? (
@@ -536,7 +622,7 @@ export function ComputerViewer({
               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"
             >
               {creating || registry.refreshing ? (
                 <LoaderCircleIcon className="size-3.5 animate-spin" />
@@ -552,14 +638,27 @@ export function ComputerViewer({
   }
 
   return (
-    <div className={cn("flex h-full min-h-0 flex-col overflow-hidden bg-og-bg", className)}>
+    <div
+      className={cn(
+        "@container/computer-viewer relative flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-og-bg",
+        className,
+      )}
+    >
       <ComputerToolbar
         sessions={liveSessions}
         relevantSessionIds={currentIds}
         selectedSessionId={selection?.sessionId ?? null}
         creating={creating}
-        refreshing={registry.refreshing}
+        refreshing={registry.refreshing || inputPosturePending}
         interventionCounts={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 })
         }
@@ -567,7 +666,18 @@ export function ComputerViewer({
           if (relevant[0]) selectComputerSession({ sessionId: relevant[0].id, pinned: false });
         }}
         onCreate={hideGenericCreate ? undefined : createComputer}
-        onRefresh={() => void Promise.all([refreshRegistry(), refreshComputer()])}
+        onRefresh={() => {
+          if (appTarget) {
+            appInputPosture.refresh();
+          } else if (
+            (connectionState === "error" || inputDenied) &&
+            !generationLossSelected &&
+            !generationLossFrames
+          ) {
+            frames.reconnect();
+          }
+          void Promise.all([refreshRegistry(), refreshComputer()]);
+        }}
       />
       <InteractionInterventionBanner
         interventions={selectedInterventions}
@@ -597,46 +707,81 @@ export function ComputerViewer({
         />
       ) : (
         <>
-          <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."))
-            }
-          />
-          <div className="flex min-h-0 flex-1">
+          <div className="flex min-h-0 flex-1 flex-col @xl/computer-viewer:flex-row">
             {rfbStream ? (
               <div className="relative min-h-0 flex-1 bg-black" onCopyCapture={copyFromRfb}>
                 <DesktopViewer
                   capability={rfbCapability}
-                  interactive
+                  interactive={rfbInputEnabled}
                   showControlToggle={false}
                   webSocketProtocols={rfbStream.protocols}
                   onPasteText={pasteIntoRfb}
                   targetPlatform={computer.session?.platform ?? null}
                   className="h-full"
                 />
+                {!rfbInputEnabled ? (
+                  <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">
+                    {controlUnavailable ? (
+                      <>
+                        Desktop controls unavailable{" "}
+                        <button
+                          type="button"
+                          onClick={reconnect}
+                          className="pointer-events-auto ml-2 font-medium underline"
+                        >
+                          Reconnect
+                        </button>
+                      </>
+                    ) : (
+                      "View only · direct input unavailable"
+                    )}
+                  </div>
+                ) : null}
               </div>
             ) : (
               <ComputerViewport
+                key={JSON.stringify([
+                  selection?.sessionId,
+                  computer.selectedTarget?.id,
+                  computer.selectedTarget?.targetGeneration,
+                  frames.attachment?.controllerGeneration,
+                ])}
                 frame={machineLocked ? null : displayedFrame}
                 observation={computer.observation}
                 target={computer.selectedTarget}
                 machineLocked={machineLocked}
-                connectionState={frames.state}
-                connectionError={frames.error ?? computer.error}
+                controlUnavailable={controlUnavailable}
+                inputAllowed={!inputDenied}
+                connectionState={connectionState}
+                connectionError={
+                  computer.controlError ?? appInputPosture.error ?? frames.error ?? computer.error
+                }
                 mutating={computer.mutating}
                 backgroundActions={computer.session?.capabilities?.backgroundActions === true}
-                clipboardEnabled={computer.session?.capabilities?.clipboard === 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
-                    ? () => undefined
-                    : frames.reconnect
+                  generationLossSelected || generationLossFrames ? () => undefined : reconnect
                 }
                 onError={(cause) => notifyError(cause, "Desktop input failed.")}
               />
@@ -644,7 +789,9 @@ export function ComputerViewer({
             {showControls ? (
               <ComputerSemanticPanel
                 observation={computer.observation}
-                mutating={computer.mutating}
+                mutating={computer.mutating || controlUnavailable || inputDenied}
+                controlUnavailable={controlUnavailable}
+                inputAllowed={!inputDenied}
                 onAction={(action) =>
                   void perform(action, null).catch((cause) =>
                     notifyError(cause, "Desktop action failed."),
@@ -656,10 +803,12 @@ export function ComputerViewer({
           <ComputerStatusBar
             session={computer.session}
             target={computer.selectedTarget}
-            connectionState={frames.state}
+            connectionState={connectionState}
+            controlUnavailable={controlUnavailable}
+            inputAllowed={!inputDenied}
             refreshing={registry.refreshing}
             showControls={showControls}
-            controlCount={semanticNodes(computer.observation).length}
+            controlCount={semanticControls(computer.observation).length}
             onToggleControls={() => setShowControls((current) => !current)}
           />
         </>
@@ -678,9 +827,9 @@ function ComputerUnselectedPanel(props: {
   return (
     <div className="grid min-h-0 flex-1 place-items-center bg-og-bg p-6 text-center">
       <div className="max-w-sm">
-        <span className="mx-auto grid size-10 place-items-center rounded-og-md border border-og-border bg-og-surface-1 text-og-muted">
+        <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">
           {props.error || props.generationLoss ? (
-            <CircleAlertIcon className="size-4.5 text-og-status-error" />
+            <CircleAlertIcon className="size-4.5 text-og-danger" />
           ) : (
             <LoaderCircleIcon className="size-4.5 animate-spin" />
           )}
@@ -692,7 +841,7 @@ function ComputerUnselectedPanel(props: {
               ? "Desktop didn’t open"
               : "Opening desktop…"}
         </p>
-        <p className="mt-1 text-og-control leading-5 text-og-muted">
+        <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
           {props.generationLoss
             ? "This Chrome profile is live again, but the previous desktop cannot move to the new connection. Use Browser → New browser → Connected Chrome."
             : (props.error?.message ??
@@ -727,66 +876,97 @@ function ComputerToolbar(props: {
   creating: boolean;
   refreshing: boolean;
   interventionCounts: Map<string, number>;
+  targets: ComputerTarget[];
+  selectedTargetId: string | null;
+  targetsLoading: boolean;
+  onSelectTarget: (id: string) => void;
   onSelect: (id: string) => void;
   onFollow: () => void;
   onCreate?: (() => void) | undefined;
   onRefresh: () => void;
 }) {
-  const detailsRef = useRef<HTMLDetailsElement | null>(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: string) => {
-    props.onSelect(id);
+  const closeMenu = (restoreFocus: boolean) => {
     detailsRef.current?.removeAttribute("open");
+    if (restoreFocus) detailsRef.current?.querySelector("summary")?.focus();
+  };
+  const choose = (id: string, restoreFocus: boolean) => {
+    props.onSelect(id);
+    closeMenu(restoreFocus);
   };
   return (
-    <div className="flex h-10 shrink-0 items-center gap-1.5 border-b border-og-border bg-og-surface-0 px-2">
-      <details ref={detailsRef} className="relative min-w-0">
-        <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">
-          <MonitorIcon className="size-3.5 shrink-0 text-og-muted" />
+    <div className="flex h-10 shrink-0 items-center gap-1.5 border-b border-og-border bg-og-surface-1 px-2">
+      <details ref={detailsRef} className="min-w-0">
+        <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">
+          <MonitorIcon className="size-3.5 shrink-0 text-og-fg-muted" />
           <span className="truncate font-medium">
             {selected?.name === "Computer" ? "Desktop" : (selected?.name ?? "Desktop")}
           </span>
           {(props.interventionCounts.get(selected?.id ?? "") ?? 0) > 0 ? (
             <span className="size-1.5 shrink-0 rounded-full bg-og-status-waiting" />
           ) : null}
-          <ChevronDownIcon className="size-3 shrink-0 text-og-subtle" />
+          <ChevronDownIcon className="size-3 shrink-0 text-og-fg-subtle" />
         </summary>
-        <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">
-          <ComputerSessionGroup
-            label="Current agent"
-            sessions={current}
-            selectedId={props.selectedSessionId}
-            interventionCounts={props.interventionCounts}
-            onSelect={choose}
-          />
-          <ComputerSessionGroup
-            label="Other agents"
-            sessions={others}
-            selectedId={props.selectedSessionId}
-            interventionCounts={props.interventionCounts}
-            onSelect={choose}
-          />
-          <div className="mt-1 flex gap-1 border-t border-og-border pt-1">
+        <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">
+          <div className="min-h-0 max-h-96 overflow-y-auto overscroll-contain">
+            <ComputerSessionGroup
+              label="Current agent"
+              sessions={current}
+              selectedId={props.selectedSessionId}
+              interventionCounts={props.interventionCounts}
+              onSelect={choose}
+            />
+            <ComputerSessionGroup
+              label="Other agents"
+              sessions={others}
+              selectedId={props.selectedSessionId}
+              interventionCounts={props.interventionCounts}
+              onSelect={choose}
+            />
+          </div>
+          <div className="mt-1 flex shrink-0 gap-1 border-t border-og-border pt-1">
             {current.length > 0 ? (
-              <MenuButton onClick={props.onFollow}>Follow agent</MenuButton>
+              <MenuButton
+                onClick={(event) => {
+                  props.onFollow();
+                  closeMenu(event.detail === 0);
+                }}
+              >
+                Follow agent
+              </MenuButton>
             ) : null}
             {props.onCreate ? (
-              <MenuButton onClick={props.onCreate} disabled={props.creating}>
+              <MenuButton
+                onClick={(event) => {
+                  props.onCreate?.();
+                  closeMenu(event.detail === 0);
+                }}
+                disabled={props.creating}
+              >
                 <PlusIcon className="size-3.5" /> New desktop
               </MenuButton>
             ) : null}
           </div>
         </div>
       </details>
-      <span className="min-w-0 flex-1 truncate text-og-xs text-og-subtle">
+      <span className="min-w-0 flex-1 truncate text-og-xs text-og-fg-subtle">
         {selected ? `${platformLabel(selected)} · ${placementLabel(selected)}` : ""}
       </span>
+      <ComputerTargetPicker
+        targets={props.targets}
+        selectedTargetId={props.selectedTargetId}
+        loading={props.targetsLoading}
+        onSelect={props.onSelectTarget}
+      />
       <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"
       >
         <RefreshCwIcon className={cn("size-3.5", props.refreshing && "animate-spin")} />
@@ -796,7 +976,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"
         >
           {props.creating ? (
@@ -815,12 +995,12 @@ function ComputerSessionGroup(props: {
   sessions: ComputerSession[];
   selectedId: string | null;
   interventionCounts: Map<string, number>;
-  onSelect: (id: string) => void;
+  onSelect: (id: string, restoreFocus: boolean) => void;
 }) {
   if (props.sessions.length === 0) return null;
   return (
     <div className="py-1">
-      <p className="px-2 pb-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle">
+      <p className="px-2 pb-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-fg-subtle">
         {props.label}
       </p>
       {props.sessions.map((session) => {
@@ -829,7 +1009,8 @@ function ComputerSessionGroup(props: {
           <button
             key={session.id}
             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",
@@ -843,7 +1024,7 @@ function ComputerSessionGroup(props: {
             />
             <span className="min-w-0 flex-1">
               <span className="block truncate text-og-control text-og-fg">{session.name}</span>
-              <span className="block truncate text-og-xs text-og-subtle">
+              <span className="block truncate text-og-xs text-og-fg-subtle">
                 {platformLabel(session)} · {placementLabel(session)}
               </span>
             </span>
@@ -859,65 +1040,119 @@ function ComputerSessionGroup(props: {
   );
 }
 
-function MenuButton(props: { children: ReactNode; onClick: () => void; disabled?: boolean }) {
+function MenuButton(props: {
+  children: ReactNode;
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+}) {
   return (
     <button
       type="button"
       onClick={props.onClick}
       disabled={props.disabled}
-      className="flex h-7 flex-1 items-center justify-center gap-1 rounded-og-sm px-2 text-og-control text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-50"
+      className="flex h-7 flex-1 items-center justify-center gap-1 rounded-og-sm px-2 text-og-control text-og-fg-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-50"
     >
       {props.children}
     </button>
   );
 }
 
-function ComputerTargetRail(props: {
+function ComputerTargetPicker(props: {
   targets: ComputerTarget[];
   selectedTargetId: string | null;
   loading: boolean;
   onSelect: (id: string) => void;
 }) {
-  const visualTargets = props.targets.filter(isRenderableComputerView);
+  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: string, restoreFocus = false) => {
+    props.onSelect(id);
+    if (advancedRef.current?.open) {
+      advancedRef.current.removeAttribute("open");
+      if (restoreFocus) advancedRef.current.querySelector("summary")?.focus();
+    }
+  };
   return (
-    <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"
-    >
-      {visualTargets.map((target) => (
+    <>
+      {screens.length > 1 ? (
+        <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"
+        >
+          <option value="" disabled hidden>
+            Screen
+          </option>
+          {screens.map((screen, index) => (
+            <option key={screen.id} value={screen.id}>
+              {screen.title || `Screen ${index + 1}`}
+            </option>
+          ))}
+        </select>
+      ) : screens[0] && selected?.kind !== "screen" ? (
         <button
-          key={target.id}
           type="button"
-          onClick={() => props.onSelect(target.id)}
-          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",
-          )}
-          aria-pressed={target.id === props.selectedTargetId}
+          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"
         >
-          {target.kind === "screen" ? (
-            <MonitorIcon className="size-3.5 shrink-0" />
-          ) : (
-            <PanelsTopLeftIcon className="size-3.5 shrink-0" />
-          )}
-          <span className="truncate">{target.title || target.applicationId || target.kind}</span>
-          {target.focused ? (
-            <span
-              className="size-1.5 shrink-0 rounded-full bg-og-status-running"
-              aria-label="Focused"
-            />
-          ) : null}
+          <MonitorIcon className="size-3.5" /> Full desktop
         </button>
-      ))}
-      {props.loading ? (
-        <LoaderCircleIcon className="ml-1 size-3.5 animate-spin text-og-muted" />
       ) : null}
-      {!props.loading && visualTargets.length === 0 ? (
-        <span className="text-og-xs text-og-subtle">Waiting for apps and screens…</span>
+      {advancedTargets.length > 0 ? (
+        <details ref={advancedRef} className="shrink-0">
+          <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"
+          >
+            <PanelsTopLeftIcon className="size-3.5" />
+            <span className="hidden @sm/computer-viewer:inline">Advanced</span>
+            <ChevronDownIcon className="size-3" />
+          </summary>
+          <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">
+            <p className="shrink-0 px-2 py-1 text-og-xs text-og-fg-subtle">Apps and windows</p>
+            <div className="min-h-0 max-h-80 overflow-y-auto overscroll-contain">
+              {advancedTargets.map((target) => (
+                <button
+                  key={target.id}
+                  type="button"
+                  onClick={(event) => choose(target.id, event.detail === 0)}
+                  aria-pressed={target.id === props.selectedTargetId}
+                  className={cn(
+                    "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",
+                  )}
+                >
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-og-control text-og-fg">
+                      {target.title || target.applicationId || target.kind}
+                    </span>
+                    <span className="block text-og-xs text-og-fg-subtle">
+                      {target.kind === "app" ? "App controls" : "Window view"}
+                    </span>
+                  </span>
+                  {target.focused ? (
+                    <span
+                      className="size-1.5 shrink-0 rounded-full bg-og-status-running"
+                      aria-label="Focused"
+                    />
+                  ) : null}
+                </button>
+              ))}
+            </div>
+          </div>
+        </details>
       ) : null}
-    </div>
+      {props.loading ? (
+        <LoaderCircleIcon className="size-3.5 shrink-0 animate-spin text-og-fg-muted" />
+      ) : null}
+    </>
   );
 }
 
@@ -947,9 +1182,9 @@ function ComputerLifecyclePanel(props: {
     <div className="grid min-h-0 flex-1 place-items-center bg-og-bg p-6">
       <div className="max-w-sm text-center">
         {failed ? (
-          <CircleAlertIcon className="mx-auto size-5 text-og-status-error" />
+          <CircleAlertIcon className="mx-auto size-5 text-og-danger" />
         ) : (
-          <LoaderCircleIcon className="mx-auto size-5 animate-spin text-og-muted" />
+          <LoaderCircleIcon className="mx-auto size-5 animate-spin text-og-fg-muted" />
         )}
         <p className="mt-3 text-og-menu font-medium text-og-fg">
           {generationLoss
@@ -958,7 +1193,7 @@ function ComputerLifecyclePanel(props: {
               ? "Desktop needs attention"
               : lifecycleLabel(props.session.lifecycle)}
         </p>
-        <p className="mt-1 text-og-control leading-5 text-og-muted">
+        <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
           {generationLoss
             ? "This Chrome profile is live again, but the previous desktop cannot move to the new connection. Use Browser → New browser → Connected Chrome."
             : (computerFailureMessage(props.session) ??
@@ -984,23 +1219,41 @@ function ComputerLifecyclePanel(props: {
   );
 }
 
+type ComputerQueuedAction = {
+  operationId: string;
+  started: Promise<boolean>;
+  completion: Promise<void>;
+};
+
 function ComputerViewport(props: {
   frame: ComputerFrame | null;
   observation: ComputerObservation | null;
   target: ComputerTarget | null;
   machineLocked: boolean;
+  controlUnavailable: boolean;
+  inputAllowed: boolean;
   connectionState: string;
   connectionError: Error | null;
   mutating: boolean;
   backgroundActions: boolean;
+  backgroundInput: boolean;
+  allowForegroundInputWithinOwnedSeat: boolean;
   clipboardEnabled: boolean;
-  onAction: (action: ComputerAction, frame: ComputerFrame | null) => Promise<void>;
+  pointerInput: boolean;
+  pointerClickContinuation: boolean;
+  keyboardInput: boolean;
+  onAction: (
+    action: ComputerAction,
+    frame: ComputerFrame | null,
+    operationId?: string,
+  ) => Promise<ComputerActionReceipt>;
   onReadClipboard: () => Promise<ComputerClipboard>;
   onReconnect: () => void;
   onError: (cause: unknown) => void;
 }) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const composingRef = useRef(false);
   const pointerStartRef = useRef<PointerStart | null>(null);
   const clickTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const lastClickRef = useRef<{
@@ -1008,6 +1261,11 @@ function ComputerViewport(props: {
     x: number;
     y: number;
     frame: ComputerFrame;
+    clientX: number;
+    clientY: number;
+    canvasRect: Pick<DOMRect, "left" | "top" | "width" | "height">;
+    pending: boolean;
+    delivery: ComputerQueuedAction | null;
   } | null>(null);
   const wheelRef = useRef<{
     x: number;
@@ -1022,17 +1280,72 @@ function ComputerViewport(props: {
     timer: ReturnType<typeof setTimeout>;
   } | null>(null);
   const actionRef = useRef(props.onAction);
+  const targetRef = useRef(props.target);
   const readClipboardRef = useRef(props.onReadClipboard);
   const errorRef = useRef(props.onError);
   const actionTailRef = useRef<Promise<void>>(Promise.resolve());
+  const actionQueueEpochRef = useRef(0);
+  const queuedTextRef = useRef<{
+    action: Extract<ComputerAction, { type: "keyboard" }>;
+    epoch: number;
+    delivery: ComputerQueuedAction;
+  } | null>(null);
   const queuedFrameRef = useRef<ComputerFrame | null>(null);
+  const currentFrameRef = useRef<ComputerFrame | null>(props.frame);
+  const paintedFrameRef = useRef<ComputerFrame | null>(null);
+  const [paintedFrame, setPaintedFrame] = useState<ComputerFrame | null>(null);
   const decodingFrameRef = useRef(false);
   const mountedRef = useRef(true);
   actionRef.current = props.onAction;
+  targetRef.current = props.target;
   readClipboardRef.current = props.onReadClipboard;
   errorRef.current = props.onError;
+  const streamFailed = props.connectionState === "error";
   const rawInputEnabled =
-    !props.backgroundActions || props.target?.kind === "screen" || props.target?.focused === true;
+    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 = useCallback(() => {
+    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);
+    }
+    // The canvas is absolute, so fitting it cannot resize the observed dock.
+    const observer = new ResizeObserver(fit);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, []);
 
   const paintQueuedFrames = useCallback(() => {
     if (decodingFrameRef.current) return;
@@ -1050,8 +1363,15 @@ function ComputerViewport(props: {
               const bitmap = await createImageBitmap(blob);
               try {
                 const canvas = canvasRef.current;
-                if (mountedRef.current && canvas) {
+                if (
+                  mountedRef.current &&
+                  canvas &&
+                  currentFrameRef.current &&
+                  sameComputerTarget(frame, currentFrameRef.current)
+                ) {
                   paintCanvas(canvas, bitmap, frame.width, frame.height);
+                  paintedFrameRef.current = frame;
+                  setPaintedFrame(frame);
                 }
               } finally {
                 bitmap.close();
@@ -1061,11 +1381,23 @@ 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);
           }
@@ -1077,40 +1409,127 @@ function ComputerViewport(props: {
     })();
   }, []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
+      actionQueueEpochRef.current += 1;
       queuedFrameRef.current = null;
+      clearBufferedInput();
     };
-  }, []);
+  }, [clearBufferedInput]);
 
-  useEffect(() => {
-    if (!props.frame) return;
+  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]);
+  }, [clearBufferedInput, paintQueuedFrames, props.frame]);
 
-  useEffect(
-    () => () => {
-      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
-      if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
-      if (pendingTextRef.current?.timer) clearTimeout(pendingTextRef.current.timer);
-    },
-    [],
-  );
+  useLayoutEffect(() => {
+    if (!rawInputEnabled || !props.pointerInput || !props.keyboardInput) {
+      actionQueueEpochRef.current += 1;
+      clearBufferedInput();
+    }
+  }, [clearBufferedInput, props.keyboardInput, props.pointerInput, rawInputEnabled]);
 
   const enqueue = useCallback(
-    (action: ComputerAction, frame: ComputerFrame | null, after?: () => Promise<void>) => {
-      actionTailRef.current = actionTailRef.current
-        .catch(() => undefined)
-        .then(async () => {
-          await actionRef.current(action, frame);
-          await after?.();
+    (
+      action: ComputerAction,
+      frame: ComputerFrame | null,
+      after?: (isCurrent: () => boolean) => Promise<void>,
+      continuation?: ComputerQueuedAction,
+    ) => {
+      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 <= 1_000_000
+      ) {
+        // Only combine adjacent text that has not crossed the dispatch boundary.
+        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!: (value: boolean) => void;
+      const started = new Promise<boolean>((resolve) => {
+        markStarted = resolve;
+      });
+      const previous = actionTailRef.current;
+      // Only the real second click may start before its first HTTP receipt.
+      // The controller queue and native causal proof still serialize delivery.
+      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))
+          ) {
+            // Receipt projection can replace the target before React remounts us.
+            actionQueueEpochRef.current += 1;
+            clearBufferedInput();
+            return;
+          }
+          await after?.(isCurrentResult);
         })
-        .catch((cause) => errorRef.current(cause));
+        .catch((cause) => {
+          markStarted(false);
+          if (!isCurrent() || isStaleComputerActionResult(cause)) return;
+          actionQueueEpochRef.current += 1;
+          clearBufferedInput();
+          errorRef.current(cause);
+        });
+      const completion = continuation
+        ? Promise.all([previous, delivery]).then(() => undefined)
+        : 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 = useCallback(
@@ -1133,6 +1552,7 @@ function ComputerViewport(props: {
     if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
     clickTimerRef.current = null;
     lastClickRef.current = null;
+    if (!pending.pending) return;
     enqueue(
       {
         type: "pointer",
@@ -1145,24 +1565,55 @@ function ComputerViewport(props: {
     );
   }, [enqueue]);
 
+  const flushPendingWheel = useCallback(() => {
+    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: PointerEvent<HTMLCanvasElement>) => {
-    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;
+    // Preserve the keyboard sink's focus through the canvas pointer default action.
+    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: PointerEvent<HTMLCanvasElement>) => {
-    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;
@@ -1187,8 +1638,18 @@ function ComputerViewport(props: {
     if (
       previous &&
       now - previous.at < 280 &&
-      Math.hypot(previous.x - to.x, previous.y - to.y) < 6 &&
-      sameFrameFence(previous.frame, start.frame)
+      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;
@@ -1197,15 +1658,47 @@ function ComputerViewport(props: {
         {
           type: "pointer",
           frameId: start.frame.frameId,
-          action: "double_click",
+          action: props.pointerClickContinuation ? "click" : "double_click",
+          ...(props.pointerClickContinuation ? { clickCount: 2 as const } : {}),
+          ...(previous.delivery
+            ? { continuationOfOperationId: previous.delivery.operationId }
+            : {}),
+          x: to.x,
+          y: to.y,
+        },
+        start.frame,
+        undefined,
+        previous.delivery ?? undefined,
+      );
+      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;
@@ -1224,9 +1717,10 @@ function ComputerViewport(props: {
 
   const contextMenu = (event: MouseEvent<HTMLCanvasElement>) => {
     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);
@@ -1246,45 +1740,43 @@ function ComputerViewport(props: {
   };
 
   const wheel = (event: WheelEvent<HTMLCanvasElement>) => {
-    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: KeyboardEvent<HTMLTextAreaElement>) => {
-    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 &&
@@ -1304,12 +1796,15 @@ function ComputerViewport(props: {
   };
 
   const copy = (event: ClipboardEvent<HTMLTextAreaElement>) => {
-    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");
@@ -1318,19 +1813,26 @@ function ComputerViewport(props: {
   };
 
   const paste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
-    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: string) => {
-    if (!value || !rawInputEnabled) return;
+  const input = (value: string, nativeComposing = false) => {
+    if (composingRef.current || nativeComposing) return;
+    if (!value || !keyboardInputEnabled) return;
+    flushPendingWheel();
     flushPendingClick();
     const pending = pendingTextRef.current;
     if (pending) {
@@ -1346,7 +1848,17 @@ function ComputerViewport(props: {
     if (inputRef.current) inputRef.current.value = "";
   };
 
-  const showCanvas = props.frame !== null && !props.machineLocked;
+  const compositionEnd = (event: CompositionEvent<HTMLTextAreaElement>) => {
+    composingRef.current = false;
+    input(event.currentTarget.value || event.data);
+  };
+
+  const showCanvas =
+    props.frame !== null &&
+    paintedFrame !== null &&
+    sameComputerTarget(props.frame, paintedFrame) &&
+    !props.machineLocked &&
+    !streamFailed;
   return (
     <div className="relative min-h-0 flex-1 overflow-hidden bg-black">
       <canvas
@@ -1354,7 +1866,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}
@@ -1368,7 +1880,13 @@ function ComputerViewport(props: {
       <textarea
         ref={inputRef}
         defaultValue=""
-        onInput={(event) => input(event.currentTarget.value)}
+        onInput={(event) =>
+          input(event.currentTarget.value, (event.nativeEvent as InputEvent).isComposing)
+        }
+        onCompositionStart={() => {
+          composingRef.current = true;
+        }}
+        onCompositionEnd={compositionEnd}
         onKeyDown={keyDown}
         onCopy={copy}
         onPaste={paste}
@@ -1377,12 +1895,14 @@ function ComputerViewport(props: {
         autoCapitalize="off"
         autoCorrect="off"
         spellCheck={false}
-        disabled={!rawInputEnabled}
+        disabled={!keyboardInputEnabled}
       />
       {!showCanvas ? (
         <ComputerViewportFallback
           observation={props.observation}
           machineLocked={props.machineLocked}
+          controlUnavailable={props.controlUnavailable}
+          inputAllowed={props.inputAllowed}
           connectionState={props.connectionState}
           error={props.connectionError}
           onAction={(action) => enqueue(action, null)}
@@ -1394,17 +1914,25 @@ function ComputerViewport(props: {
           <LoaderCircleIcon className="size-3 animate-spin" /> Acting
         </div>
       ) : null}
-      {showCanvas && !rawInputEnabled ? (
-        <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">
-          <span>Background view · use native controls</span>
-          {props.target ? (
+      {showCanvas && (!rawInputEnabled || !props.pointerInput || !props.keyboardInput) ? (
+        <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">
+          <span>
+            {!rawInputEnabled && (props.pointerInput || props.keyboardInput)
+              ? "Background view · use app controls"
+              : !props.pointerInput && !props.keyboardInput
+                ? "View only · mouse and keyboard unavailable"
+                : props.keyboardInput
+                  ? "Keyboard only · mouse unavailable"
+                  : "Mouse only · keyboard unavailable"}
+          </span>
+          {!rawInputEnabled && props.target && (props.pointerInput || props.keyboardInput) ? (
             <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"
+              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"
             >
-              Control directly
+              Bring to front
             </button>
           ) : null}
         </div>
@@ -1422,6 +1950,8 @@ function assertExactComputerClipboard(clipboard: ComputerClipboard, expected: st
 function ComputerViewportFallback(props: {
   observation: ComputerObservation | null;
   machineLocked: boolean;
+  controlUnavailable: boolean;
+  inputAllowed: boolean;
   connectionState: string;
   error: Error | null;
   onAction: (action: ComputerAction) => void;
@@ -1431,46 +1961,60 @@ function ComputerViewportFallback(props: {
     return (
       <div className="absolute inset-0 grid place-items-center bg-og-bg p-6">
         <div className="max-w-sm text-center">
-          <LockKeyholeIcon className="mx-auto size-6 text-og-muted" />
+          <LockKeyholeIcon className="mx-auto size-6 text-og-fg-muted" />
           <p className="mt-3 text-og-menu font-medium text-og-fg">Machine locked</p>
-          <p className="mt-1 text-og-control leading-5 text-og-muted">
+          <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
             Live frames and input stay private until someone unlocks the machine.
           </p>
         </div>
       </div>
     );
   }
+  const appControls = props.observation?.target.kind === "app";
   const controlFailure = interactionControlFailureFromError(props.error);
-  const interactive = semanticNodes(props.observation)
+  const interactive = semanticControls(props.observation)
     .filter((node) => semanticAction(node) !== null)
     .slice(0, 10);
   return (
     <div className="absolute inset-0 grid place-items-center bg-og-bg p-6">
-      <div className="w-full max-w-md rounded-og-lg border border-og-border bg-og-surface-0 p-4 shadow-lg">
+      <div className="w-full max-w-md rounded-og-lg border border-og-border bg-og-surface-1 p-4 shadow-lg">
         <div className="flex items-center gap-2">
           {props.error ? (
-            <CircleAlertIcon className="size-4 text-og-status-error" />
+            <CircleAlertIcon className="size-4 text-og-danger" />
+          ) : appControls ? (
+            <PanelsTopLeftIcon className="size-4 text-og-fg-muted" />
           ) : (
-            <LoaderCircleIcon className="size-4 animate-spin text-og-muted" />
+            <LoaderCircleIcon className="size-4 animate-spin text-og-fg-muted" />
           )}
           <p className="text-og-menu font-medium text-og-fg">
             {isAttachedChromeGenerationLossError(props.error)
               ? "Chrome reconnected—open a fresh browser/desktop."
-              : props.error
-                ? "Live view disconnected"
-                : computerConnectionLabel(props.connectionState)}
+              : !props.inputAllowed
+                ? "View only"
+                : props.controlUnavailable
+                  ? "Desktop controls unavailable"
+                  : props.error
+                    ? "Live view disconnected"
+                    : appControls
+                      ? "App controls"
+                      : computerConnectionLabel(props.connectionState)}
           </p>
         </div>
         {props.error ? (
-          <p className="mt-2 text-og-control leading-5 text-og-muted">
+          <p className="mt-2 text-og-control leading-5 text-og-fg-muted">
             {isAttachedChromeGenerationLossError(props.error)
               ? "Chrome reconnected—open a fresh browser/desktop. Use Browser → New browser → Connected Chrome."
               : (controlFailure?.message ?? props.error.message)}
           </p>
         ) : null}
-        {interactive.length > 0 ? (
+        {!props.inputAllowed ? (
+          <p className="mt-2 text-og-control leading-5 text-og-fg-muted">
+            Refresh to check desktop controls.
+          </p>
+        ) : null}
+        {interactive.length > 0 && !props.controlUnavailable && props.inputAllowed ? (
           <div className="mt-3 border-t border-og-border pt-3">
-            <p className="mb-2 text-og-xs text-og-subtle">Native controls remain available</p>
+            <p className="mb-2 text-og-xs text-og-fg-subtle">App controls remain available</p>
             <div className="flex flex-wrap gap-1.5">
               {interactive.map((node) => (
                 <button
@@ -1492,7 +2036,7 @@ function ComputerViewportFallback(props: {
           <button
             type="button"
             onClick={props.onReconnect}
-            className="mt-3 text-og-control font-medium text-og-accent hover:underline"
+            className="mt-3 text-og-control font-medium og-link"
           >
             {controlFailure?.retryable === false ? "Try again" : "Reconnect"}
           </button>
@@ -1505,18 +2049,31 @@ function ComputerViewportFallback(props: {
 function ComputerSemanticPanel(props: {
   observation: ComputerObservation | null;
   mutating: boolean;
+  controlUnavailable: boolean;
+  inputAllowed: boolean;
   onAction: (action: ComputerAction) => void;
 }) {
-  const nodes = semanticNodes(props.observation).slice(0, 100);
+  const nodes = semanticControls(props.observation).slice(0, 100);
   return (
-    <aside className="w-64 shrink-0 overflow-y-auto border-l border-og-border bg-og-surface-0 p-2">
-      <div className="mb-2 flex items-center gap-1.5 px-1 text-og-xs font-medium uppercase tracking-[0.1em] text-og-subtle">
-        <KeyboardIcon className="size-3" /> Native controls
+    <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">
+      <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">
+        <KeyboardIcon className="size-3" /> App controls
       </div>
-      {nodes.length === 0 ? (
-        <p className="px-1 py-2 text-og-control leading-5 text-og-muted">
-          This view has no accessibility controls. Use the live image instead.
+      {!props.inputAllowed ? (
+        <p className="px-1 py-2 text-og-control leading-5 text-og-fg-muted">
+          View only · refresh to check desktop controls.
         </p>
+      ) : props.controlUnavailable ? (
+        <p className="px-1 py-2 text-og-control leading-5 text-og-fg-muted">
+          Reconnect to use app controls.
+        </p>
+      ) : null}
+      {nodes.length === 0 ? (
+        props.controlUnavailable ? null : (
+          <p className="px-1 py-2 text-og-control leading-5 text-og-fg-muted">
+            This view has no accessibility controls. Use the live image instead.
+          </p>
+        )
       ) : (
         <div className="space-y-0.5">
           {nodes.map((node) => (
@@ -1554,6 +2111,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 },
@@ -1562,7 +2120,7 @@ function ComputerSemanticControl(props: {
           });
         }}
       >
-        <label className="block truncate text-[10px] uppercase text-og-subtle">
+        <label className="block truncate text-[10px] uppercase text-og-fg-subtle">
           {node.name || node.identifier || node.role}
         </label>
         <div className="mt-1 flex gap-1">
@@ -1594,7 +2152,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"
     >
-      <span className="mt-0.5 text-[10px] uppercase text-og-subtle">{node.role}</span>
+      <span className="mt-0.5 text-[10px] uppercase text-og-fg-subtle">{node.role}</span>
       <span className="min-w-0 flex-1 truncate text-og-control text-og-fg">
         {node.name || semanticValue(node) || node.identifier || "Unnamed control"}
       </span>
@@ -1606,6 +2164,8 @@ function ComputerStatusBar(props: {
   session: ComputerSession | null;
   target: ComputerTarget | null;
   connectionState: string;
+  controlUnavailable: boolean;
+  inputAllowed: boolean;
   refreshing: boolean;
   showControls: boolean;
   controlCount: number;
@@ -1613,7 +2173,7 @@ function ComputerStatusBar(props: {
 }) {
   const screen = props.target?.kind === "screen";
   return (
-    <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">
+    <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">
       <span
         className={cn(
           "size-1.5 rounded-full",
@@ -1621,28 +2181,48 @@ function ComputerStatusBar(props: {
         )}
       />
       <span>
-        {props.connectionState === "live" ? "Live" : computerConnectionLabel(props.connectionState)}
+        {!props.inputAllowed
+          ? "View only"
+          : props.controlUnavailable
+            ? "Controls unavailable"
+            : props.target?.kind === "app"
+              ? "App controls"
+              : props.connectionState === "live"
+                ? "Live"
+                : computerConnectionLabel(props.connectionState)}
       </span>
       <span className="min-w-0 flex-1 truncate">
-        {screen
-          ? "Full screen · input may move pointer and focus"
-          : props.session?.capabilities?.backgroundActions
-            ? "Window · semantic controls stay in the background"
-            : (props.target?.kind ?? "Desktop")}
+        {!props.inputAllowed
+          ? "Refresh to check desktop controls"
+          : props.controlUnavailable
+            ? "Reconnect to use desktop input"
+            : screen
+              ? "Full screen · input may move pointer and focus"
+              : props.target?.kind === "app"
+                ? props.session?.capabilities?.backgroundActions
+                  ? "App · controls work in the background"
+                  : "App controls"
+                : props.session?.capabilities?.backgroundInput
+                  ? "Window · clicks and typing stay in the background"
+                  : props.session?.capabilities?.backgroundActions
+                    ? "Window · app controls work in the background"
+                    : (props.target?.kind ?? "Desktop")}
       </span>
       {screen ? <MousePointer2Icon className="size-3" aria-hidden /> : null}
       {props.refreshing ? <LoaderCircleIcon className="size-3 animate-spin" /> : null}
-      <button
-        type="button"
-        onClick={props.onToggleControls}
-        aria-pressed={props.showControls}
-        className={cn(
-          "rounded px-1.5 py-0.5 transition hover:bg-og-surface-2 hover:text-og-fg",
-          props.showControls && "bg-og-surface-2 text-og-fg",
-        )}
-      >
-        Controls {props.controlCount}
-      </button>
+      {props.controlCount > 0 || props.showControls ? (
+        <button
+          type="button"
+          onClick={props.onToggleControls}
+          aria-pressed={props.showControls}
+          className={cn(
+            "rounded px-1.5 py-0.5 transition hover:bg-og-surface-2 hover:text-og-fg",
+            props.showControls && "bg-og-surface-2 text-og-fg",
+          )}
+        >
+          Controls {props.controlCount}
+        </button>
+      ) : null}
     </div>
   );
 }
@@ -1651,7 +2231,7 @@ function ComputerNotice(props: { icon: ReactNode; text: string; className?: stri
   return (
     <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,
       )}
     >
@@ -1663,11 +2243,37 @@ function ComputerNotice(props: { icon: ReactNode; text: string; className?: stri
   );
 }
 
-function semanticNodes(observation: ComputerObservation | null): InteractionSemanticNode[] {
+const structuralRoles = new Set([
+  "frame",
+  "panel",
+  "section",
+  "document",
+  "document web",
+  "static",
+  "static text",
+  "heading",
+  "paragraph",
+  "notification",
+  "separator",
+  "tool bar",
+  "page tab list",
+]);
+
+function semanticControls(observation: ComputerObservation | null): InteractionSemanticNode[] {
   if (observation?.semantic?.kind !== "snapshot") return [];
   const result: InteractionSemanticNode[] = [];
   const visit = (node: InteractionSemanticNode) => {
-    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);
@@ -1699,11 +2305,26 @@ function paintCanvas(
   width: number,
   height: number,
 ): void {
+  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: HTMLCanvasElement): void {
+  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,
+  );
+  // Hidden docks retain their previous fit until their content box is visible.
+  if (!Number.isFinite(scale) || scale <= 0) return;
+  canvas.style.width = `${canvas.width * scale}px`;
+  canvas.style.height = `${canvas.height * scale}px`;
 }
 
 function loadImage(url: string): Promise<HTMLImageElement> {
@@ -1764,9 +2385,13 @@ export function computerKey(
 }
 
 function sameFrameFence(left: ComputerFrame, right: ComputerFrame): boolean {
+  return left.frameId === right.frameId && sameComputerTarget(left, right);
+}
+
+function sameComputerTarget(left: ComputerFrame, right: ComputerFrame): boolean {
   return (
-    left.frameId === right.frameId &&
     left.computerSessionId === right.computerSessionId &&
+    left.controllerGeneration === right.controllerGeneration &&
     left.targetId === right.targetId &&
     left.targetGeneration === right.targetGeneration
   );
@@ -1786,6 +2411,8 @@ function computerFailureMessage(session: ComputerSession): string | null {
       return session.placement.kind === "attached_device"
         ? "Chrome reconnected—open a fresh browser/desktop. Use Browser → New browser → 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: