@opengeni/react 0.57.0 → 1.0.2-canary.37191796234001

package/src/components/computer-viewer.tsx

@@ -8,6 +8,7 @@ import type {
   InteractionIntervention,
   InteractionSemanticNode,
 } from "@opengeni/sdk/interaction";
+import { interactionControlFailureFromError } from "@opengeni/sdk/interaction";
 import type { DesktopStreamCapability } from "@opengeni/sdk";
 import {
   ChevronDownIcon,
@@ -24,6 +25,7 @@ import {
 } from "lucide-react";
 import {
   type ClipboardEvent,
+  type CompositionEvent,
   type KeyboardEvent,
   type MouseEvent,
   type PointerEvent,
@@ -31,6 +33,7 @@ import {
   type WheelEvent,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -40,13 +43,16 @@ import {
   useComputerFrameStream,
 } from "../hooks/use-computer-frame-stream";
 import { 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";
 import { copyTextToClipboard } from "../lib/clipboard";
+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 };
 
@@ -62,6 +68,9 @@ export type ComputerViewerProps = EmbeddedComputerInteractionClientOverride & {
   /** Host navigation request for one exact ComputerSession. */
   requestedComputerSessionId?: string | null | undefined;
   requestedComputerRequestId?: string | number | null | undefined;
+  /** Restore and report the Desktop session selected in this task's dock. */
+  initialComputerSessionId?: string | null | undefined;
+  onComputerSessionIdChange?: ((computerSessionId: string | null) => void) | undefined;
 };
 
 type ComputerSelection = { sessionId: string; pinned: boolean } | null;
@@ -78,6 +87,8 @@ export function ComputerViewer({
   renderEmpty,
   requestedComputerSessionId,
   requestedComputerRequestId,
+  initialComputerSessionId,
+  onComputerSessionIdChange,
   ...override
 }: ComputerViewerProps) {
   const registry = useComputerSessions({ ...override, sessionId, enabled });
@@ -87,11 +98,26 @@ export function ComputerViewer({
     () => registry.relevantSessions.filter((session) => isLiveComputer(session)),
     [registry.relevantSessions],
   );
+  const connectedPlacementLoss = useMemo(
+    () =>
+      registry.relevantSessions.find(
+        (session) =>
+          session.lifecycle === "lost" &&
+          session.failureCode === "source_placement_changed" &&
+          session.placement.kind === "connected_machine",
+      ) ?? null,
+    [registry.relevantSessions],
+  );
   const recentRelevantFailure = useMemo(
     () =>
       liveRelevant.length === 0
-        ? (registry.relevantSessions.find((session) =>
-            ["failed", "lost"].includes(session.lifecycle),
+        ? (registry.relevantSessions.find(
+            (session) =>
+              ["failed", "lost"].includes(session.lifecycle) &&
+              !(
+                session.failureCode === "source_placement_changed" &&
+                session.placement.kind === "connected_machine"
+              ),
           ) ?? null)
         : null,
     [liveRelevant.length, registry.relevantSessions],
@@ -105,17 +131,46 @@ export function ComputerViewer({
       liveRelevant.length > 0 ? liveRelevant : recentRelevantFailure ? [recentRelevantFailure] : [],
     [liveRelevant, recentRelevantFailure],
   );
-  const [selection, setSelection] = useState<ComputerSelection>(null);
+  const [selection, setSelection] = useState<ComputerSelection>(() =>
+    initialComputerSessionId ? { sessionId: initialComputerSessionId, pinned: true } : null,
+  );
+  const selectComputerSession = useCallback(
+    (next: ComputerSelection) => {
+      setSelection(next);
+      onComputerSessionIdChange?.(next?.sessionId ?? null);
+    },
+    [onComputerSessionIdChange],
+  );
   const interventions = useInteractionInterventions({
     ...override,
     enabled,
     resourceKind: "computer_session",
   });
   const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState<Error | null>(null);
   const [showControls, setShowControls] = useState(false);
   const previousSessionIdRef = useRef(sessionId);
   const handledRequestRef = useRef<string | null>(null);
   const seenInterventionIdsRef = useRef(new Set<string>());
+  const createInFlightRef = useRef(false);
+  const autoCreateSessionRef = useRef<string | null>(null);
+  const emptyCatalogConfirmationRef = useRef<string | null>(null);
+  const endedGenerationLossRef = useRef(new Set<string>());
+  const recreatedPlacementLossRef = useRef(new Set<string>());
+  const [suppressGenericCreate, setSuppressGenericCreate] = useState(false);
+  const endStaleComputer = registry.end;
+  useEffect(() => {
+    if (!enabled) return;
+    for (const session of registry.sessions) {
+      if (!isAttachedChromeGenerationLoss(session)) continue;
+      setSuppressGenericCreate(true);
+      if (endedGenerationLossRef.current.has(session.id)) continue;
+      endedGenerationLossRef.current.add(session.id);
+      void endStaleComputer(session.id).catch(() => {
+        endedGenerationLossRef.current.delete(session.id);
+      });
+    }
+  }, [enabled, endStaleComputer, registry.sessions]);
 
   const notifyError = useCallback(
     (cause: unknown, fallback: string) => {
@@ -131,10 +186,18 @@ export function ComputerViewer({
     if (previousSessionIdRef.current === sessionId) return;
     previousSessionIdRef.current = sessionId;
     handledRequestRef.current = null;
-    setSelection(null);
-  }, [sessionId]);
+    autoCreateSessionRef.current = null;
+    emptyCatalogConfirmationRef.current = null;
+    recreatedPlacementLossRef.current.clear();
+    setSuppressGenericCreate(false);
+    setCreateError(null);
+    setSelection(
+      initialComputerSessionId ? { sessionId: initialComputerSessionId, pinned: true } : null,
+    );
+  }, [initialComputerSessionId, sessionId]);
 
   useEffect(() => {
+    if (!enabled || registry.loading) return;
     const requested = requestedComputerSessionId
       ? (liveSessions.find((session) => session.id === requestedComputerSessionId) ?? null)
       : null;
@@ -143,7 +206,7 @@ export function ComputerViewer({
       : null;
     if (requested && requestKey && handledRequestRef.current !== requestKey) {
       handledRequestRef.current = requestKey;
-      setSelection({ sessionId: requested.id, pinned: true });
+      selectComputerSession({ sessionId: requested.id, pinned: true });
       return;
     }
 
@@ -154,15 +217,24 @@ export function ComputerViewer({
     if (selection?.pinned && selectedStillLive) return;
     const preferred = relevant[0] ?? null;
     if (!preferred) {
-      if (selection) setSelection(null);
+      if (selection) selectComputerSession(null);
       return;
     }
     if (!selectedStillLive || !selection?.pinned) {
       if (selection?.sessionId !== preferred.id || selection.pinned) {
-        setSelection({ sessionId: preferred.id, pinned: false });
+        selectComputerSession({ sessionId: preferred.id, pinned: false });
       }
     }
-  }, [liveSessions, relevant, requestedComputerRequestId, requestedComputerSessionId, selection]);
+  }, [
+    liveSessions,
+    enabled,
+    registry.loading,
+    relevant,
+    requestedComputerRequestId,
+    requestedComputerSessionId,
+    selectComputerSession,
+    selection,
+  ]);
 
   const selectedRegistrySession = useMemo(
     () => liveSessions.find((session) => session.id === selection?.sessionId) ?? null,
@@ -185,6 +257,13 @@ 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();
+  }, [computer.error, refreshRegistry]);
   const act = computer.act;
   const actFromFrame = computer.actFromFrame;
   const refreshComputer = computer.refresh;
@@ -192,7 +271,12 @@ export function ComputerViewer({
     ...override,
     computerSessionId: selection?.sessionId ?? null,
     targetId: computer.selectedTarget?.id ?? null,
-    enabled: enabled && selection !== null && controllerReady && computer.selectedTarget !== null,
+    enabled:
+      enabled &&
+      selection !== null &&
+      controllerReady &&
+      computer.selectedTarget !== null &&
+      isComputerFrameTarget(computer.selectedTarget),
     stream: {
       format: "jpeg",
       quality: 78,
@@ -205,18 +289,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,
@@ -228,8 +363,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(() => {
@@ -257,54 +391,150 @@ export function ComputerViewer({
               outcome === "completed" ? "Agent notified. Continuing work." : "Request cancelled.",
           });
         })
-        .catch((cause) => notifyError(cause, "Could not update the computer request."));
+        .catch((cause) => notifyError(cause, "Could not update the desktop request."));
     },
     [interventions, notifyError, onNotify],
   );
 
   const createComputer = useCallback(() => {
-    if (creating) return;
+    if (createInFlightRef.current) return;
+    createInFlightRef.current = true;
+    setCreateError(null);
     setCreating(true);
-    void createSession({ sessionId, name: "Computer" })
+    void createSession({ sessionId, name: "Desktop" })
       .then((response) => {
-        setSelection({ sessionId: response.session.id, pinned: false });
+        selectComputerSession({ sessionId: response.session.id, pinned: false });
       })
-      .catch((cause) => notifyError(cause, "Could not open a computer."))
-      .finally(() => setCreating(false));
-  }, [createSession, creating, notifyError, sessionId]);
+      .catch((cause) => {
+        const error = cause instanceof Error ? cause : new Error("Could not open a desktop.");
+        setCreateError(error);
+        notifyError(error, "Could not open a desktop.");
+      })
+      .finally(() => {
+        createInFlightRef.current = false;
+        setCreating(false);
+      });
+  }, [createSession, notifyError, selectComputerSession, sessionId]);
+
+  useEffect(() => {
+    if (
+      !enabled ||
+      registry.loading ||
+      registry.refreshing ||
+      liveRelevant.length > 0 ||
+      !connectedPlacementLoss ||
+      recreatedPlacementLossRef.current.has(connectedPlacementLoss.id)
+    ) {
+      return;
+    }
+    recreatedPlacementLossRef.current.add(connectedPlacementLoss.id);
+    autoCreateSessionRef.current = sessionId;
+    emptyCatalogConfirmationRef.current = null;
+    createComputer();
+  }, [
+    connectedPlacementLoss,
+    createComputer,
+    enabled,
+    liveRelevant.length,
+    registry.loading,
+    registry.refreshing,
+    sessionId,
+  ]);
+
+  useEffect(() => {
+    // Once this task's Desktop has been observed, a later transient empty
+    // registry snapshot must not create a second one. This can happen while the
+    // lazy surface is disabled/re-enabled or while an invalidation refresh
+    // briefly races the association projection. The existing Desktop remains
+    // the task's authority; explicit New desktop is still available.
+    if (relevant.length > 0) {
+      autoCreateSessionRef.current = sessionId;
+      emptyCatalogConfirmationRef.current = null;
+    }
+  }, [relevant.length, sessionId]);
+
+  useEffect(() => {
+    if (
+      !enabled ||
+      registry.loading ||
+      registry.refreshing ||
+      registry.error ||
+      relevant.length > 0 ||
+      suppressGenericCreate ||
+      autoCreateSessionRef.current === sessionId
+    ) {
+      return;
+    }
+    // A lazy surface can momentarily publish an empty settled projection while
+    // its initial catalog and a workspace invalidation cross. Confirm the empty
+    // result with one authoritative refresh before creating anything. A real
+    // empty catalog creates on the following render; an existing association
+    // appears and cancels this path.
+    if (emptyCatalogConfirmationRef.current !== sessionId) {
+      emptyCatalogConfirmationRef.current = sessionId;
+      void refreshRegistry();
+      return;
+    }
+    autoCreateSessionRef.current = sessionId;
+    createComputer();
+  }, [
+    createComputer,
+    enabled,
+    refreshRegistry,
+    registry.error,
+    registry.loading,
+    registry.refreshing,
+    relevant.length,
+    sessionId,
+    suppressGenericCreate,
+  ]);
 
   const perform = useCallback(
     async (action: ComputerAction, frame: ComputerFrame | null): Promise<void> => {
+      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("Computer view is not ready for pointer input.");
-        await actFromFrame(action, frame);
+        if (!frame) throw new Error("Desktop view is not ready for pointer input.");
+        receipt = await actFromFrame(action, frame);
       } else {
-        await act(action);
+        receipt = await act(action);
+      }
+      if (receipt.state !== "completed") {
+        throw new Error(receipt.error?.message ?? "Desktop input did not complete.");
       }
     },
-    [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("Computer text could not be copied to the local clipboard");
+            throw new Error("Desktop text could not be copied to the local clipboard");
           }
         })
-        .catch((cause) => notifyError(cause, "Could not copy from the computer."));
+        .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
@@ -316,49 +546,76 @@ export function ComputerViewer({
         await perform({ type: "clipboard", operation: "write", text }, null);
         assertExactComputerClipboard(await computer.readClipboard(), text);
         await perform({ type: "clipboard", operation: "paste" }, null);
-      })().catch((cause) => notifyError(cause, "Could not paste into the computer."));
+      })().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);
+  const generationLossFrames = isAttachedChromeGenerationLossError(frames.error);
+
   if (!enabled) return null;
   if (registry.loading && liveSessions.length === 0) {
     return (
       <ComputerNotice
         icon={<LoaderCircleIcon className="size-4 animate-spin" />}
-        text="Finding workspace computers…"
+        text="Finding workspace desktops…"
         {...(className ? { className } : {})}
       />
     );
   }
   if (liveSessions.length === 0) {
+    if (hideGenericCreate) {
+      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-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-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>
+          </div>
+        </div>
+      );
+    }
     if (renderEmpty) return renderEmpty(createComputer, creating);
+    const error = createError ?? registry.error;
     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">
-            <MonitorIcon className="size-5" />
-          </span>
-          <p className="mt-3 text-og-menu font-medium text-og-fg">No computer open</p>
-          <p className="mt-1 text-og-control leading-5 text-og-muted">
-            Open this agent&apos;s desktop, or switch to any computer another workspace agent uses.
-          </p>
-          <button
-            type="button"
-            onClick={createComputer}
-            disabled={creating}
-            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"
-          >
-            {creating ? (
-              <LoaderCircleIcon className="size-3.5 animate-spin" />
+          <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-danger" />
             ) : (
-              <PlusIcon className="size-3.5" />
+              <LoaderCircleIcon className="size-5 animate-spin" />
             )}
-            Open computer
-          </button>
-          {registry.error ? (
-            <p className="mt-3 text-og-control text-og-status-error">{registry.error.message}</p>
+          </span>
+          <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-fg-muted">
+            {error?.message ?? "Preparing this agent’s desktop. It will appear here when ready."}
+          </p>
+          {error ? (
+            <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 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" />
+              ) : (
+                <RotateCcwIcon className="size-3.5" />
+              )}
+              Try again
+            </button>
           ) : null}
         </div>
       </div>
@@ -366,22 +623,46 @@ 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) =>
-          setSelection({ sessionId: computerSessionId, pinned: true })
+          selectComputerSession({ sessionId: computerSessionId, pinned: true })
         }
         onFollow={() => {
-          if (relevant[0]) setSelection({ sessionId: relevant[0].id, pinned: false });
+          if (relevant[0]) selectComputerSession({ sessionId: relevant[0].id, pinned: false });
+        }}
+        onCreate={hideGenericCreate ? undefined : createComputer}
+        onRefresh={() => {
+          if (appTarget) {
+            appInputPosture.refresh();
+          } else if (
+            (connectionState === "error" || inputDenied) &&
+            !generationLossSelected &&
+            !generationLossFrames
+          ) {
+            frames.reconnect();
+          }
+          void Promise.all([refreshRegistry(), refreshComputer()]);
         }}
-        onCreate={createComputer}
-        onRefresh={() => void Promise.all([refreshRegistry(), refreshComputer()])}
       />
       <InteractionInterventionBanner
         interventions={selectedInterventions}
@@ -390,7 +671,7 @@ export function ComputerViewer({
         onOpen={(intervention) =>
           void computer
             .selectTarget(intervention.targetId)
-            .catch((cause) => notifyError(cause, "Could not open the requested computer view."))
+            .catch((cause) => notifyError(cause, "Could not open the requested desktop view."))
         }
         onResolve={resolveIntervention}
       />
@@ -398,6 +679,8 @@ export function ComputerViewer({
         <ComputerUnselectedPanel
           peerCount={liveSessions.length}
           creating={creating}
+          error={createError}
+          generationLoss={suppressGenericCreate}
           onCreate={createComputer}
         />
       ) : !controllerReady ? (
@@ -409,53 +692,84 @@ 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 computer 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}
+                clipboardEnabled={
+                  attachmentInputAllowed && computer.session?.capabilities?.clipboard === true
+                }
+                pointerInput={
+                  attachmentInputAllowed && computer.session?.capabilities?.pointerInput === true
+                }
+                keyboardInput={
+                  attachmentInputAllowed && computer.session?.capabilities?.keyboardInput === true
+                }
                 onAction={perform}
                 onReadClipboard={computer.readClipboard}
-                onReconnect={frames.reconnect}
-                onError={(cause) => notifyError(cause, "Computer input failed.")}
+                onReconnect={
+                  generationLossSelected || generationLossFrames ? () => undefined : reconnect
+                }
+                onError={(cause) => notifyError(cause, "Desktop input failed.")}
               />
             )}
             {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, "Computer action failed."),
+                    notifyError(cause, "Desktop action failed."),
                   )
                 }
               />
@@ -464,10 +778,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)}
           />
         </>
@@ -479,33 +795,50 @@ export function ComputerViewer({
 function ComputerUnselectedPanel(props: {
   peerCount: number;
   creating: boolean;
+  error: Error | null;
+  generationLoss: boolean;
   onCreate: () => void;
 }) {
   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">
-          <MonitorIcon className="size-4.5" />
-        </span>
-        <p className="mt-3 text-og-menu font-medium text-og-fg">No computer for this agent</p>
-        <p className="mt-1 text-og-control leading-5 text-og-muted">
-          {props.peerCount === 1
-            ? "One workspace computer is available from the computer menu."
-            : `${props.peerCount} workspace computers are available from the computer menu.`}
-        </p>
-        <button
-          type="button"
-          disabled={props.creating}
-          onClick={props.onCreate}
-          className="mt-4 inline-flex h-8 items-center gap-1.5 rounded-og-sm border border-og-border bg-og-surface-1 px-3 text-og-control font-medium text-og-fg transition hover:bg-og-surface-2 disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          {props.creating ? (
-            <LoaderCircleIcon className="size-3.5 animate-spin" />
+        <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-danger" />
           ) : (
-            <PlusIcon className="size-3.5" />
+            <LoaderCircleIcon className="size-4.5 animate-spin" />
           )}
-          {props.creating ? "Opening…" : "New computer"}
-        </button>
+        </span>
+        <p className="mt-3 text-og-menu font-medium text-og-fg">
+          {props.generationLoss
+            ? "Chrome reconnected—open a fresh browser/desktop."
+            : props.error
+              ? "Desktop didn’t open"
+              : "Opening desktop…"}
+        </p>
+        <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 ??
+              (props.peerCount === 1
+                ? "Preparing this agent’s desktop. One peer desktop remains available from the menu."
+                : `Preparing this agent’s desktop. ${props.peerCount} peer desktops remain available from the menu.`))}
+        </p>
+        {props.error && !props.generationLoss ? (
+          <button
+            type="button"
+            disabled={props.creating}
+            onClick={props.onCreate}
+            className="mt-4 inline-flex h-8 items-center gap-1.5 rounded-og-sm border border-og-border bg-og-surface-1 px-3 text-og-control font-medium text-og-fg transition hover:bg-og-surface-2 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {props.creating ? (
+              <LoaderCircleIcon className="size-3.5 animate-spin" />
+            ) : (
+              <RotateCcwIcon className="size-3.5" />
+            )}
+            Try again
+          </button>
+        ) : null}
       </div>
     </div>
   );
@@ -518,79 +851,116 @@ 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;
+  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" />
-          <span className="truncate font-medium">{selected?.name ?? "Computer"}</span>
+    <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={(event) => {
+                  props.onCreate?.();
+                  closeMenu(event.detail === 0);
+                }}
+                disabled={props.creating}
+              >
+                <PlusIcon className="size-3.5" /> New desktop
+              </MenuButton>
             ) : null}
-            <MenuButton onClick={props.onCreate} disabled={props.creating}>
-              <PlusIcon className="size-3.5" /> New computer
-            </MenuButton>
           </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"
-        aria-label="Refresh computers"
+        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")} />
       </button>
-      <button
-        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"
-        aria-label="Open a new computer"
-      >
-        {props.creating ? (
-          <LoaderCircleIcon className="size-3.5 animate-spin" />
-        ) : (
-          <PlusIcon className="size-3.5" />
-        )}
-      </button>
+      {props.onCreate ? (
+        <button
+          type="button"
+          onClick={props.onCreate}
+          disabled={props.creating}
+          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 ? (
+            <LoaderCircleIcon className="size-3.5 animate-spin" />
+          ) : (
+            <PlusIcon className="size-3.5" />
+          )}
+        </button>
+      ) : null}
     </div>
   );
 }
@@ -600,12 +970,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) => {
@@ -614,7 +984,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",
@@ -628,7 +999,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>
@@ -644,65 +1015,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="Computer 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}
+    </>
   );
 }
 
@@ -715,30 +1140,41 @@ function isRenderableComputerView(target: ComputerTarget): boolean {
   return target.bounds.width >= 160 && target.bounds.height >= 90;
 }
 
+function isComputerFrameTarget(target: ComputerTarget): boolean {
+  return target.kind === "window" || target.kind === "screen";
+}
+
 function ComputerLifecyclePanel(props: {
   session: ComputerSession;
   creating: boolean;
   onRefresh: () => Promise<void>;
   onRetry: () => void;
 }) {
+  const generationLoss = isAttachedChromeGenerationLoss(props.session);
   const failed = ["failed", "lost", "repair_required"].includes(props.session.lifecycle);
   const retryCreatesSession = ["failed", "lost"].includes(props.session.lifecycle);
   return (
     <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">
-          {failed ? "Computer needs attention" : lifecycleLabel(props.session.lifecycle)}
+          {generationLoss
+            ? "Chrome reconnected—open a fresh browser/desktop."
+            : failed
+              ? "Desktop needs attention"
+              : lifecycleLabel(props.session.lifecycle)}
         </p>
-        <p className="mt-1 text-og-control leading-5 text-og-muted">
-          {computerFailureMessage(props.session) ??
-            "The computer is being prepared on its placement. It will appear here when ready."}
+        <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) ??
+              "The desktop is being prepared on its placement. It will appear here when ready.")}
         </p>
-        {failed ? (
+        {failed && !generationLoss ? (
           <button
             type="button"
             onClick={() => (retryCreatesSession ? props.onRetry() : void props.onRefresh())}
@@ -763,11 +1199,16 @@ function ComputerViewport(props: {
   observation: ComputerObservation | null;
   target: ComputerTarget | null;
   machineLocked: boolean;
+  controlUnavailable: boolean;
+  inputAllowed: boolean;
   connectionState: string;
   connectionError: Error | null;
   mutating: boolean;
   backgroundActions: boolean;
+  backgroundInput: boolean;
   clipboardEnabled: boolean;
+  pointerInput: boolean;
+  keyboardInput: boolean;
   onAction: (action: ComputerAction, frame: ComputerFrame | null) => Promise<void>;
   onReadClipboard: () => Promise<ComputerClipboard>;
   onReconnect: () => void;
@@ -775,6 +1216,7 @@ function ComputerViewport(props: {
 }) {
   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<{
@@ -799,14 +1241,58 @@ function ComputerViewport(props: {
   const readClipboardRef = useRef(props.onReadClipboard);
   const errorRef = useRef(props.onError);
   const actionTailRef = useRef<Promise<void>>(Promise.resolve());
+  const actionQueueEpochRef = useRef(0);
   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;
   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 ||
+      !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;
+    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;
@@ -824,8 +1310,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();
@@ -835,11 +1328,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);
           }
@@ -851,40 +1356,64 @@ 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>) => {
+    (
+      action: ComputerAction,
+      frame: ComputerFrame | null,
+      after?: (isCurrent: () => boolean) => Promise<void>,
+    ) => {
+      const epoch = actionQueueEpochRef.current;
+      const dispatch = actionRef.current;
+      const isCurrent = () => mountedRef.current && epoch === actionQueueEpochRef.current;
       actionTailRef.current = actionTailRef.current
         .catch(() => undefined)
         .then(async () => {
-          await actionRef.current(action, frame);
-          await after?.();
+          if (!isCurrent()) return;
+          await dispatch(action, frame);
+          if (!isCurrent()) return;
+          await after?.(isCurrent);
         })
-        .catch((cause) => errorRef.current(cause));
+        .catch((cause) => {
+          if (!isCurrent()) return;
+          actionQueueEpochRef.current += 1;
+          clearBufferedInput();
+          errorRef.current(cause);
+        });
     },
-    [],
+    [clearBufferedInput],
   );
 
   const point = useCallback(
@@ -919,21 +1448,45 @@ 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.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;
@@ -998,9 +1551,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);
@@ -1020,45 +1574,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 &&
@@ -1078,33 +1630,43 @@ 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("Computer text could not be copied to the local clipboard");
+        throw new Error("Desktop text could not be copied to the local clipboard");
       }
     });
   };
 
   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) {
@@ -1120,7 +1682,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
@@ -1128,7 +1700,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}
@@ -1137,26 +1709,34 @@ function ComputerViewport(props: {
         }}
         onContextMenu={contextMenu}
         onWheel={wheel}
-        aria-label={`Interactive ${props.target?.kind ?? "computer"} view`}
+        aria-label={`Interactive ${props.target?.kind ?? "desktop"} view`}
       />
       <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}
         className="pointer-events-none absolute left-1/2 top-1/2 size-px resize-none overflow-hidden opacity-0"
-        aria-label="Computer keyboard input"
+        aria-label="Desktop keyboard input"
         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)}
@@ -1168,17 +1748,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>
@@ -1189,13 +1777,15 @@ function ComputerViewport(props: {
 
 function assertExactComputerClipboard(clipboard: ComputerClipboard, expected: string): void {
   if (clipboard.truncated || clipboard.text !== expected) {
-    throw new Error("Computer clipboard did not accept the exact pasted text");
+    throw new Error("Desktop clipboard did not accept the exact pasted text");
   }
 }
 
 function ComputerViewportFallback(props: {
   observation: ComputerObservation | null;
   machineLocked: boolean;
+  controlUnavailable: boolean;
+  inputAllowed: boolean;
   connectionState: string;
   error: Error | null;
   onAction: (action: ComputerAction) => void;
@@ -1205,36 +1795,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 interactive = semanticNodes(props.observation)
+  const appControls = props.observation?.target.kind === "app";
+  const controlFailure = interactionControlFailureFromError(props.error);
+  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">
-            {props.error
-              ? "Live view disconnected"
-              : computerConnectionLabel(props.connectionState)}
+            {isAttachedChromeGenerationLossError(props.error)
+              ? "Chrome reconnected—open a fresh browser/desktop."
+              : !props.inputAllowed
+                ? "View only"
+                : props.controlUnavailable
+                  ? "Desktop controls unavailable"
+                  : props.error
+                    ? "Live view disconnected"
+                    : appControls
+                      ? "App controls"
+                      : computerConnectionLabel(props.connectionState)}
           </p>
         </div>
-        {interactive.length > 0 ? (
+        {props.error ? (
+          <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}
+        {!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
@@ -1252,13 +1866,13 @@ function ComputerViewportFallback(props: {
             </div>
           </div>
         ) : null}
-        {props.error ? (
+        {props.error && !isAttachedChromeGenerationLossError(props.error) ? (
           <button
             type="button"
             onClick={props.onReconnect}
             className="mt-3 text-og-control font-medium text-og-accent hover:underline"
           >
-            Reconnect
+            {controlFailure?.retryable === false ? "Try again" : "Reconnect"}
           </button>
         ) : null}
       </div>
@@ -1269,18 +1883,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) => (
@@ -1318,6 +1945,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 },
@@ -1326,7 +1954,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">
@@ -1358,7 +1986,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>
@@ -1370,6 +1998,8 @@ function ComputerStatusBar(props: {
   session: ComputerSession | null;
   target: ComputerTarget | null;
   connectionState: string;
+  controlUnavailable: boolean;
+  inputAllowed: boolean;
   refreshing: boolean;
   showControls: boolean;
   controlCount: number;
@@ -1377,7 +2007,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",
@@ -1385,28 +2015,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 ?? "Computer")}
+        {!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>
   );
 }
@@ -1415,7 +2065,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,
       )}
     >
@@ -1427,11 +2077,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);
@@ -1463,18 +2139,33 @@ 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("Computer canvas is unavailable.");
+  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> {
   return new Promise((resolve, reject) => {
     const image = new Image();
     image.onload = () => resolve(image);
-    image.onerror = () => reject(new Error("Computer frame image could not be decoded."));
+    image.onerror = () => reject(new Error("Desktop frame image could not be decoded."));
     image.src = url;
   });
 }
@@ -1528,9 +2219,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
   );
@@ -1545,14 +2240,31 @@ function computerFailureMessage(session: ComputerSession): string | null {
     case "machine_locked":
       return "Unlock the connected Mac, then try again.";
     case "controller_heartbeat_expired":
-      return "The computer connection was lost. Try opening it again.";
+      return "The desktop connection was lost. Try opening it again.";
+    case "controller_transition_expired":
+      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 null:
       return null;
     default:
-      return "The computer could not be opened. Try again.";
+      return "The desktop could not be opened. Try again.";
   }
 }
 
+function isAttachedChromeGenerationLoss(session: ComputerSession): boolean {
+  return (
+    session.lifecycle === "lost" &&
+    session.failureCode === "controller_transition_expired" &&
+    session.placement.kind === "attached_device"
+  );
+}
+
+function isAttachedChromeGenerationLossError(error: Error | null): boolean {
+  if (!error) return false;
+  return /placement instance changed|controller authority changed/i.test(error.message);
+}
+
 function countInterventions(
   interventions: readonly InteractionIntervention[],
 ): Map<string, number> {
@@ -1573,7 +2285,7 @@ function interventionTitle(intervention: InteractionIntervention): string {
     case "confirmation":
       return "Action needed";
     case "other":
-      return "Computer needs your help";
+      return "Desktop needs your help";
   }
 }
 
@@ -1586,7 +2298,7 @@ function platformLabel(session: ComputerSession): string {
     case "windows":
       return "Windows";
     default:
-      return "Computer";
+      return "Desktop";
   }
 }
 
@@ -1599,31 +2311,31 @@ function placementLabel(session: ComputerSession): string {
     case "attached_device":
       return "Your machine";
     case "external_provider":
-      return "Cloud computer";
+      return "Cloud desktop";
   }
 }
 
 function lifecycleLabel(lifecycle: ComputerSession["lifecycle"]): string {
   switch (lifecycle) {
     case "starting":
-      return "Opening computer…";
+      return "Opening desktop…";
     case "suspending":
-      return "Pausing computer…";
+      return "Pausing desktop…";
     case "suspended":
-      return "Computer paused";
+      return "Desktop paused";
     case "restoring":
-      return "Restoring computer…";
+      return "Restoring desktop…";
     case "ending":
-      return "Closing computer…";
+      return "Closing desktop…";
     default:
-      return "Connecting to computer…";
+      return "Connecting to desktop…";
   }
 }
 
 function computerConnectionLabel(state: string): string {
   switch (state) {
     case "attaching":
-      return "Opening computer view…";
+      return "Opening desktop view…";
     case "connecting":
       return "Connecting…";
     case "reconnecting":
@@ -1631,6 +2343,6 @@ function computerConnectionLabel(state: string): string {
     case "error":
       return "Disconnected";
     default:
-      return "Waiting for computer…";
+      return "Waiting for desktop…";
   }
 }