@opengeni/react 0.57.0 → 2.2.0-canary.0

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,
@@ -44,6 +45,7 @@ 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";
@@ -62,6 +64,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 +83,8 @@ export function ComputerViewer({
   renderEmpty,
   requestedComputerSessionId,
   requestedComputerRequestId,
+  initialComputerSessionId,
+  onComputerSessionIdChange,
   ...override
 }: ComputerViewerProps) {
   const registry = useComputerSessions({ ...override, sessionId, enabled });
@@ -87,11 +94,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 +127,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 +182,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 +202,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 +213,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 +253,10 @@ export function ComputerViewer({
     computerSessionId: selection?.sessionId ?? null,
     enabled: enabled && selection !== null && controllerReady,
   });
+  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 +264,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,
@@ -257,26 +334,108 @@ 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) => {
+        const error = cause instanceof Error ? cause : new Error("Could not open a desktop.");
+        setCreateError(error);
+        notifyError(error, "Could not open a desktop.");
       })
-      .catch((cause) => notifyError(cause, "Could not open a computer."))
-      .finally(() => setCreating(false));
-  }, [createSession, creating, notifyError, sessionId]);
+      .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 (action.type === "pointer") {
-        if (!frame) throw new Error("Computer view is not ready for pointer input.");
+        if (!frame) throw new Error("Desktop view is not ready for pointer input.");
         await actFromFrame(action, frame);
       } else {
         await act(action);
@@ -294,10 +453,10 @@ export function ComputerViewer({
         .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],
   );
@@ -316,49 +475,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],
   );
 
+  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-status-error" />
+            <p className="mt-3 text-og-menu font-medium text-og-fg">
+              Chrome reconnected—open a fresh browser/desktop.
+            </p>
+            <p className="mt-1 text-og-control leading-5 text-og-muted">
+              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" />
+            {error ? (
+              <CircleAlertIcon className="size-5 text-og-status-error" />
+            ) : (
+              <LoaderCircleIcon className="size-5 animate-spin" />
+            )}
           </span>
-          <p className="mt-3 text-og-menu font-medium text-og-fg">No computer open</p>
+          <p className="mt-3 text-og-menu font-medium text-og-fg">
+            {error ? "Desktop didn’t open" : "Opening desktop…"}
+          </p>
           <p className="mt-1 text-og-control leading-5 text-og-muted">
-            Open this agent&apos;s desktop, or switch to any computer another workspace agent uses.
+            {error?.message ?? "Preparing this agent’s desktop. It will appear here when ready."}
           </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" />
-            ) : (
-              <PlusIcon className="size-3.5" />
-            )}
-            Open computer
-          </button>
-          {registry.error ? (
-            <p className="mt-3 text-og-control text-og-status-error">{registry.error.message}</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 bg-og-accent-deep px-3 text-og-control font-medium text-og-accent-fg transition hover:brightness-110 disabled:opacity-50"
+            >
+              {creating || registry.refreshing ? (
+                <LoaderCircleIcon className="size-3.5 animate-spin" />
+              ) : (
+                <RotateCcwIcon className="size-3.5" />
+              )}
+              Try again
+            </button>
           ) : null}
         </div>
       </div>
@@ -375,12 +561,12 @@ export function ComputerViewer({
         refreshing={registry.refreshing}
         interventionCounts={interventionCounts}
         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={createComputer}
+        onCreate={hideGenericCreate ? undefined : createComputer}
         onRefresh={() => void Promise.all([refreshRegistry(), refreshComputer()])}
       />
       <InteractionInterventionBanner
@@ -390,7 +576,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 +584,8 @@ export function ComputerViewer({
         <ComputerUnselectedPanel
           peerCount={liveSessions.length}
           creating={creating}
+          error={createError}
+          generationLoss={suppressGenericCreate}
           onCreate={createComputer}
         />
       ) : !controllerReady ? (
@@ -416,7 +604,7 @@ export function ComputerViewer({
             onSelect={(targetId) =>
               void computer
                 .selectTarget(targetId)
-                .catch((cause) => notifyError(cause, "Could not switch computer views."))
+                .catch((cause) => notifyError(cause, "Could not switch desktop views."))
             }
           />
           <div className="flex min-h-0 flex-1">
@@ -445,8 +633,12 @@ export function ComputerViewer({
                 clipboardEnabled={computer.session?.capabilities?.clipboard === true}
                 onAction={perform}
                 onReadClipboard={computer.readClipboard}
-                onReconnect={frames.reconnect}
-                onError={(cause) => notifyError(cause, "Computer input failed.")}
+                onReconnect={
+                  generationLossSelected || generationLossFrames
+                    ? () => undefined
+                    : frames.reconnect
+                }
+                onError={(cause) => notifyError(cause, "Desktop input failed.")}
               />
             )}
             {showControls ? (
@@ -455,7 +647,7 @@ export function ComputerViewer({
                 mutating={computer.mutating}
                 onAction={(action) =>
                   void perform(action, null).catch((cause) =>
-                    notifyError(cause, "Computer action failed."),
+                    notifyError(cause, "Desktop action failed."),
                   )
                 }
               />
@@ -479,33 +671,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" />
+          {props.error || props.generationLoss ? (
+            <CircleAlertIcon className="size-4.5 text-og-status-error" />
+          ) : (
+            <LoaderCircleIcon className="size-4.5 animate-spin" />
+          )}
         </span>
-        <p className="mt-3 text-og-menu font-medium text-og-fg">No computer for this agent</p>
+        <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-muted">
-          {props.peerCount === 1
-            ? "One workspace computer is available from the computer menu."
-            : `${props.peerCount} workspace computers are available from the computer menu.`}
+          {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>
-        <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" />
-          ) : (
-            <PlusIcon className="size-3.5" />
-          )}
-          {props.creating ? "Opening…" : "New computer"}
-        </button>
+        {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>
   );
@@ -520,7 +729,7 @@ function ComputerToolbar(props: {
   interventionCounts: Map<string, number>;
   onSelect: (id: string) => void;
   onFollow: () => void;
-  onCreate: () => void;
+  onCreate?: (() => void) | undefined;
   onRefresh: () => void;
 }) {
   const detailsRef = useRef<HTMLDetailsElement | null>(null);
@@ -536,7 +745,9 @@ function ComputerToolbar(props: {
       <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>
+          <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}
@@ -561,9 +772,11 @@ function ComputerToolbar(props: {
             {current.length > 0 ? (
               <MenuButton onClick={props.onFollow}>Follow agent</MenuButton>
             ) : null}
-            <MenuButton onClick={props.onCreate} disabled={props.creating}>
-              <PlusIcon className="size-3.5" /> New computer
-            </MenuButton>
+            {props.onCreate ? (
+              <MenuButton onClick={props.onCreate} disabled={props.creating}>
+                <PlusIcon className="size-3.5" /> New desktop
+              </MenuButton>
+            ) : null}
           </div>
         </div>
       </details>
@@ -574,23 +787,25 @@ function ComputerToolbar(props: {
         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"
+        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="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 desktop"
+        >
+          {props.creating ? (
+            <LoaderCircleIcon className="size-3.5 animate-spin" />
+          ) : (
+            <PlusIcon className="size-3.5" />
+          )}
+        </button>
+      ) : null}
     </div>
   );
 }
@@ -667,7 +882,7 @@ function ComputerTargetRail(props: {
   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"
+      aria-label="Desktop views"
     >
       {visualTargets.map((target) => (
         <button
@@ -715,12 +930,17 @@ 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 (
@@ -732,13 +952,19 @@ function ComputerLifecyclePanel(props: {
           <LoaderCircleIcon className="mx-auto size-5 animate-spin text-og-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."}
+          {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())}
@@ -1086,7 +1312,7 @@ function ComputerViewport(props: {
       const clipboard = await readClipboardRef.current();
       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");
       }
     });
   };
@@ -1137,7 +1363,7 @@ 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}
@@ -1147,7 +1373,7 @@ function ComputerViewport(props: {
         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}
@@ -1189,7 +1415,7 @@ 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");
   }
 }
 
@@ -1214,6 +1440,7 @@ function ComputerViewportFallback(props: {
       </div>
     );
   }
+  const controlFailure = interactionControlFailureFromError(props.error);
   const interactive = semanticNodes(props.observation)
     .filter((node) => semanticAction(node) !== null)
     .slice(0, 10);
@@ -1227,11 +1454,20 @@ function ComputerViewportFallback(props: {
             <LoaderCircleIcon className="size-4 animate-spin text-og-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.error
+                ? "Live view disconnected"
+                : computerConnectionLabel(props.connectionState)}
           </p>
         </div>
+        {props.error ? (
+          <p className="mt-2 text-og-control leading-5 text-og-muted">
+            {isAttachedChromeGenerationLossError(props.error)
+              ? "Chrome reconnected—open a fresh browser/desktop. Use Browser → New browser → Connected Chrome."
+              : (controlFailure?.message ?? props.error.message)}
+          </p>
+        ) : null}
         {interactive.length > 0 ? (
           <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>
@@ -1252,13 +1488,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>
@@ -1392,7 +1628,7 @@ function ComputerStatusBar(props: {
           ? "Full screen · input may move pointer and focus"
           : props.session?.capabilities?.backgroundActions
             ? "Window · semantic controls stay in the background"
-            : (props.target?.kind ?? "Computer")}
+            : (props.target?.kind ?? "Desktop")}
       </span>
       {screen ? <MousePointer2Icon className="size-3" aria-hidden /> : null}
       {props.refreshing ? <LoaderCircleIcon className="size-3 animate-spin" /> : null}
@@ -1466,7 +1702,7 @@ function paintCanvas(
   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);
 }
 
@@ -1474,7 +1710,7 @@ 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;
   });
 }
@@ -1545,14 +1781,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 +1826,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 +1839,7 @@ function platformLabel(session: ComputerSession): string {
     case "windows":
       return "Windows";
     default:
-      return "Computer";
+      return "Desktop";
   }
 }
 
@@ -1599,31 +1852,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 +1884,6 @@ function computerConnectionLabel(state: string): string {
     case "error":
       return "Disconnected";
     default:
-      return "Waiting for computer…";
+      return "Waiting for desktop…";
   }
 }