@opengeni/react 1.0.1 → 2.2.0-canary.0

package/src/components/browser-viewer.tsx

@@ -1,4 +1,5 @@
 import type {
+  AttachedBrowserBridge,
   AttachedBrowserDevice,
   BrowserAction,
   BrowserActionReceipt,
@@ -15,7 +16,9 @@ import type {
   InteractionPlacement,
   InteractionIntervention,
   InteractionSemanticNode,
+  SiteAuthConnection,
 } from "@opengeni/sdk/interaction";
+import { interactionControlFailureFromError } from "@opengeni/sdk/interaction";
 import {
   BugIcon,
   ArchiveIcon,
@@ -61,9 +64,11 @@ import { useBrowserDownloads } from "../hooks/use-browser-downloads";
 import { useBrowserSession } from "../hooks/use-browser-session";
 import { useBrowserSessions } from "../hooks/use-browser-sessions";
 import { useInteractionInterventions } from "../hooks/use-interaction-interventions";
+import { useSiteAuthConnections } from "../hooks/use-site-auth-connections";
 import { cn } from "../lib/cn";
 import { copyTextToClipboard } from "../lib/clipboard";
 import { formatBytes } from "../lib/format";
+import { isSourcePlacementChangedError } from "../lib/interaction-errors";
 import type { EmbeddedBrowserInteractionClientOverride } from "../session-context";
 import { browserKey, HUMAN_BROWSER_HOME_URL, normalizeBrowserAddress } from "./browser-input";
 import { InteractionInterventionBanner } from "./interaction-intervention-banner";
@@ -93,12 +98,18 @@ export type BrowserViewerProps = EmbeddedBrowserInteractionClientOverride & {
     | undefined;
   /** Navigate to the exact linked ComputerSession; never a lookalike desktop. */
   onOpenComputer?: ((computerSessionId: string) => void) | undefined;
+  /** Restore and report the BrowserSession selected in this task's dock. */
+  initialBrowserSessionId?: string | null | undefined;
+  onBrowserSessionIdChange?: ((browserSessionId: string | null) => void) | undefined;
+  /** Host-owned install/setup surface for attaching an existing Chrome profile.
+   * The machine bridge remains discoverable even when this URL is omitted. */
+  browserExtensionSetupUrl?: string | undefined;
 };
 
 type BrowserSelection = { sessionId: string; pinned: boolean } | null;
 type BrowserLaunchChoice =
   | { kind: "clean" }
-  | { kind: "profile"; identityId: string }
+  | { kind: "profile"; identityId: string; baseRevisionId?: string }
   | { kind: "attached"; device: AttachedBrowserDevice };
 type PointerStart = {
   x: number;
@@ -134,26 +145,72 @@ export function BrowserViewer({
   renderEmpty,
   createLinkedComputer,
   onOpenComputer,
+  initialBrowserSessionId,
+  onBrowserSessionIdChange,
+  browserExtensionSetupUrl,
   ...override
 }: BrowserViewerProps) {
   const registry = useBrowserSessions({ ...override, sessionId, enabled });
   const attached = useAttachedBrowsers({ ...override, enabled });
-  const profiles = useBrowserIdentities({ ...override, enabled, includeArchived: true });
-  const activeProfiles = useMemo(
-    () => profiles.identities.filter((identity) => identity.status === "active"),
-    [profiles.identities],
+  const onlineAttachedBridges = useMemo(
+    () => attached.bridges.filter((bridge) => bridge.state === "online"),
+    [attached.bridges],
   );
+  const profiles = useBrowserIdentities({ ...override, enabled, includeArchived: true });
+  const siteAuth = useSiteAuthConnections({
+    ...override,
+    enabled: enabled && profiles.identities.length > 0,
+  });
   const createRegistryBrowser = registry.create;
+  const refreshRegistry = registry.refresh;
   const loadProfileRevisions = profiles.revisions;
   const liveSessions = useMemo(
     () => registry.sessions.filter((session) => isLiveBrowser(session)),
     [registry.sessions],
   );
+  const attachedGenerationLoss = useMemo(
+    () => attachedChromeGenerationLoss(registry.sessions),
+    [registry.sessions],
+  );
+  const endedGenerationLossRef = useRef(new Set<string>());
+  const endStaleBrowser = registry.end;
+  useEffect(() => {
+    if (!enabled) return;
+    for (const session of registry.sessions) {
+      if (
+        session.lifecycle !== "lost" ||
+        session.failureCode !== "controller_transition_expired" ||
+        session.placement.kind !== "attached_device"
+      ) {
+        continue;
+      }
+      if (endedGenerationLossRef.current.has(session.id)) continue;
+      endedGenerationLossRef.current.add(session.id);
+      void endStaleBrowser(session.id).catch(() => {
+        endedGenerationLossRef.current.delete(session.id);
+      });
+    }
+  }, [enabled, endStaleBrowser, registry.sessions]);
+  const replacementChromeDevice = useMemo(() => {
+    if (!attachedGenerationLoss) return null;
+    return (
+      attached.devices.find((candidate) => candidate.id === attachedGenerationLoss.deviceId) ?? null
+    );
+  }, [attached.devices, attachedGenerationLoss]);
   const relevant = useMemo(
     () => registry.relevantSessions.filter((session) => isLiveBrowser(session)),
     [registry.relevantSessions],
   );
-  const [selection, setSelection] = useState<BrowserSelection>(null);
+  const [selection, setSelection] = useState<BrowserSelection>(() =>
+    initialBrowserSessionId ? { sessionId: initialBrowserSessionId, pinned: true } : null,
+  );
+  const selectBrowserSession = useCallback(
+    (next: BrowserSelection) => {
+      setSelection(next);
+      onBrowserSessionIdChange?.(next?.sessionId ?? null);
+    },
+    [onBrowserSessionIdChange],
+  );
   const interventions = useInteractionInterventions({
     ...override,
     enabled,
@@ -188,11 +245,14 @@ export function BrowserViewer({
   useEffect(() => {
     if (previousSessionIdRef.current !== sessionId) {
       previousSessionIdRef.current = sessionId;
-      setSelection(null);
+      setSelection(
+        initialBrowserSessionId ? { sessionId: initialBrowserSessionId, pinned: true } : null,
+      );
     }
-  }, [sessionId]);
+  }, [initialBrowserSessionId, sessionId]);
 
   useEffect(() => {
+    if (!enabled || registry.loading) return;
     const selectedStillLive = liveSessions.some((session) => session.id === selection?.sessionId);
     // A manually selected workspace browser stays selected, but an unrelated
     // browser must never become the implicit browser for this agent. That made
@@ -200,15 +260,15 @@ export function BrowserViewer({
     if (selection?.pinned && selectedStillLive) return;
     const preferred = relevant[0] ?? null;
     if (!preferred) {
-      if (selection) setSelection(null);
+      if (selection) selectBrowserSession(null);
       return;
     }
     if (!selectedStillLive || !selection?.pinned) {
       if (selection?.sessionId !== preferred.id || selection.pinned) {
-        setSelection({ sessionId: preferred.id, pinned: false });
+        selectBrowserSession({ sessionId: preferred.id, pinned: false });
       }
     }
-  }, [liveSessions, relevant, selection]);
+  }, [enabled, liveSessions, registry.loading, relevant, selectBrowserSession, selection]);
 
   const selectedRegistrySession = useMemo(
     () => liveSessions.find((session) => session.id === selection?.sessionId) ?? null,
@@ -289,6 +349,10 @@ export function BrowserViewer({
     browserSessionId: selection?.sessionId ?? null,
     enabled: enabled && selection !== null && controllerReady,
   });
+  useEffect(() => {
+    if (!isSourcePlacementChangedError(browser.error, "browser_session")) return;
+    void refreshRegistry();
+  }, [browser.error, refreshRegistry]);
   const downloads = useBrowserDownloads({
     ...override,
     browserSessionId: selection?.sessionId ?? null,
@@ -363,6 +427,15 @@ export function BrowserViewer({
       ) ?? null,
     [browser.session?.identityId, profiles.identities, selectedRegistrySession?.identityId],
   );
+  const selectedProfileAuth = useMemo(
+    () =>
+      selectedProfile
+        ? siteAuth.connections.filter(
+            (connection) => connection.preferredIdentityId === selectedProfile.id,
+          )
+        : [],
+    [selectedProfile, siteAuth.connections],
+  );
 
   useEffect(() => {
     diagnosticRequestRef.current += 1;
@@ -469,8 +542,15 @@ export function BrowserViewer({
       if (creating) return;
       const identity =
         choice.kind === "profile"
-          ? activeProfiles.find((candidate) => candidate.id === choice.identityId)
+          ? profiles.identities.find((candidate) => candidate.id === choice.identityId)
           : null;
+      if (choice.kind === "profile" && (!identity || identity.status !== "active")) {
+        onNotify?.({
+          kind: "error",
+          message: "This browser profile is no longer available. Refresh and choose another.",
+        });
+        return;
+      }
       const device = choice.kind === "attached" ? choice.device : null;
       const browserName =
         device?.profileLabel ?? device?.name ?? (identity ? `${identity.name} browser` : "Browser");
@@ -481,7 +561,7 @@ export function BrowserViewer({
         if (createLinkedComputer) {
           try {
             linkedComputer = await createLinkedComputer(
-              `${browserName} computer`,
+              `${browserName} desktop`,
               device ? { kind: "attached_device", deviceId: device.id } : undefined,
             );
           } catch {
@@ -514,13 +594,20 @@ export function BrowserViewer({
                 placement: linkedComputer.placement,
               }
             : {}),
-          ...(identity ? { identityId: identity.id } : {}),
+          ...(identity
+            ? {
+                identityId: identity.id,
+                ...(choice.kind === "profile" && choice.baseRevisionId
+                  ? { baseRevisionId: choice.baseRevisionId }
+                  : {}),
+              }
+            : {}),
         });
-        setSelection({ sessionId: response.session.id, pinned: true });
+        selectBrowserSession({ sessionId: response.session.id, pinned: true });
         if (computerViewUnavailable) {
           onNotify?.({
             kind: "info",
-            message: "Browser opened. Computer view is unavailable on this placement.",
+            message: "Browser opened. Desktop view is unavailable on this placement.",
           });
         }
       })()
@@ -533,7 +620,8 @@ export function BrowserViewer({
       creating,
       notifyError,
       onNotify,
-      activeProfiles,
+      selectBrowserSession,
+      profiles.identities,
       sessionId,
     ],
   );
@@ -656,17 +744,25 @@ export function BrowserViewer({
           <span className="mx-auto grid size-10 place-items-center rounded-og-md border border-og-border bg-og-surface-1 text-og-muted">
             <Globe2Icon className="size-4.5" />
           </span>
-          <p className="mt-3 text-og-menu font-medium text-og-fg">No browser open</p>
+          <p className="mt-3 text-og-menu font-medium text-og-fg">
+            {attachedGenerationLoss
+              ? "Chrome reconnected—open a fresh browser/desktop."
+              : "No browser open"}
+          </p>
           <p className="mt-1 text-og-control leading-5 text-og-muted">
-            A browser appears here when this agent—or another agent in the workspace—opens one.
+            {attachedGenerationLoss
+              ? "This Chrome profile is live again, but the previous browser cannot move to the new connection. Use Browser → New browser → Connected Chrome."
+              : "A browser appears here when this agent—or another agent in the workspace—opens one."}
           </p>
           <BrowserLaunchMenu
+            attachedBridges={onlineAttachedBridges}
             attachedDevices={attached.devices}
             identities={profiles.identities}
             creating={creating}
             mutatingProfile={savingProfile}
             onCreate={createBrowser}
             onRestore={(identity) => updateProfile(identity, { status: "active" })}
+            setupUrl={browserExtensionSetupUrl}
             prominent
           />
           {registry.error ? (
@@ -686,23 +782,31 @@ export function BrowserViewer({
         relevantSessionIds={new Set(relevant.map((session) => session.id))}
         selectedSessionId={selection?.sessionId ?? null}
         identities={profiles.identities}
+        attachedBridges={onlineAttachedBridges}
         attachedDevices={attached.devices}
         selectedProfile={selectedProfile}
         baseRevisionOrdinal={baseRevisionOrdinal}
         profileHistory={profileHistory}
+        authConnections={selectedProfileAuth}
         creating={creating}
         savingProfile={savingProfile}
         refreshing={registry.refreshing || attached.refreshing}
         interventionCounts={interventionCounts}
-        onSelect={(browserSessionId) => setSelection({ sessionId: browserSessionId, pinned: true })}
+        onSelect={(browserSessionId) =>
+          selectBrowserSession({ sessionId: browserSessionId, pinned: true })
+        }
         onFollow={() => {
           const preferred = relevant[0];
-          if (preferred) setSelection({ sessionId: preferred.id, pinned: false });
+          if (preferred) selectBrowserSession({ sessionId: preferred.id, pinned: false });
         }}
         onCreate={createBrowser}
         onSaveProfile={saveProfileVersion}
         onUpdateProfile={updateProfile}
+        onOpenProfileVersion={(identityId, baseRevisionId) =>
+          createBrowser({ kind: "profile", identityId, baseRevisionId })
+        }
         onRefresh={() => void Promise.all([registry.refresh(), attached.refresh()])}
+        setupUrl={browserExtensionSetupUrl}
       />
       <InteractionInterventionBanner
         interventions={selectedInterventions}
@@ -787,7 +891,26 @@ export function BrowserViewer({
               return receipt;
             }}
             onReadClipboard={browser.readClipboard}
-            onReconnect={frames.reconnect}
+            onReconnect={
+              attachedGenerationLoss || isAttachedChromeGenerationLossError(frames.error)
+                ? () => {
+                    if (replacementChromeDevice) {
+                      createBrowser({ kind: "attached", device: replacementChromeDevice });
+                    }
+                  }
+                : frames.reconnect
+            }
+            reconnectLabel={
+              (attachedGenerationLoss || isAttachedChromeGenerationLossError(frames.error)) &&
+              replacementChromeDevice
+                ? "Open a fresh Connected Chrome"
+                : undefined
+            }
+            reconnectMessage={
+              attachedGenerationLoss || isAttachedChromeGenerationLossError(frames.error)
+                ? "Chrome reconnected—open a fresh browser/desktop."
+                : undefined
+            }
             onError={(cause) => notifyError(cause, "Browser input failed.")}
           />
           <BrowserStatusBar
@@ -884,11 +1007,13 @@ function BrowserToolbar(props: {
   sessions: BrowserSession[];
   relevantSessionIds: Set<string>;
   selectedSessionId: string | null;
+  attachedBridges: AttachedBrowserBridge[];
   attachedDevices: AttachedBrowserDevice[];
   identities: BrowserIdentity[];
   selectedProfile: BrowserIdentity | null;
   baseRevisionOrdinal: number | null;
   profileHistory: { identityId: string; loading: boolean; revisions: BrowserRevision[] } | null;
+  authConnections: SiteAuthConnection[];
   creating: boolean;
   savingProfile: boolean;
   refreshing: boolean;
@@ -901,7 +1026,9 @@ function BrowserToolbar(props: {
     identity: BrowserIdentity,
     update: { name?: string; status?: "active" | "archived"; defaultRevisionId?: string },
   ) => Promise<boolean>;
+  onOpenProfileVersion: (identityId: string, baseRevisionId: string) => void;
   onRefresh: () => void;
+  setupUrl?: string | undefined;
 }) {
   const detailsRef = useRef<HTMLDetailsElement | null>(null);
   const selected = props.sessions.find((session) => session.id === props.selectedSessionId);
@@ -957,9 +1084,11 @@ function BrowserToolbar(props: {
         identity={props.selectedProfile}
         baseRevisionOrdinal={props.baseRevisionOrdinal}
         history={props.profileHistory}
+        authConnections={props.authConnections}
         saving={props.savingProfile}
         onSave={props.onSaveProfile}
         onUpdate={props.onUpdateProfile}
+        onOpenVersion={props.onOpenProfileVersion}
       />
       <button
         type="button"
@@ -970,12 +1099,14 @@ function BrowserToolbar(props: {
         <RefreshCwIcon className={cn("size-3.5", props.refreshing && "animate-spin")} />
       </button>
       <BrowserLaunchMenu
+        attachedBridges={props.attachedBridges}
         attachedDevices={props.attachedDevices}
         identities={props.identities}
         creating={props.creating}
         mutatingProfile={props.savingProfile}
         onCreate={props.onCreate}
         onRestore={(identity) => props.onUpdateProfile(identity, { status: "active" })}
+        setupUrl={props.setupUrl}
       />
     </div>
   );
@@ -1065,12 +1196,14 @@ function BrowserSessionGroup(props: {
 }
 
 function BrowserLaunchMenu(props: {
+  attachedBridges: AttachedBrowserBridge[];
   attachedDevices: AttachedBrowserDevice[];
   identities: BrowserIdentity[];
   creating: boolean;
   mutatingProfile: boolean;
   onCreate: (choice?: BrowserLaunchChoice) => void;
   onRestore: (identity: BrowserIdentity) => Promise<boolean>;
+  setupUrl?: string | undefined;
   prominent?: boolean;
 }) {
   const detailsRef = useRef<HTMLDetailsElement | null>(null);
@@ -1113,7 +1246,7 @@ function BrowserLaunchMenu(props: {
           props.prominent ? "left-1/2 top-10 -translate-x-1/2" : "right-0 top-8",
         )}
       >
-        {props.attachedDevices.length > 0 ? (
+        {props.attachedDevices.length > 0 || props.attachedBridges.length > 0 ? (
           <div className="pb-1">
             <p className="px-2 pb-1 pt-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle">
               Connected Chrome
@@ -1138,12 +1271,48 @@ function BrowserLaunchMenu(props: {
                 <span className="size-1.5 shrink-0 rounded-full bg-og-status-running" />
               </button>
             ))}
+            {props.attachedBridges.length > 0 ? (
+              props.setupUrl ? (
+                <a
+                  href={props.setupUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={() => detailsRef.current?.removeAttribute("open")}
+                  className="flex w-full items-center gap-2 rounded-og-sm px-2 py-2 text-left transition hover:bg-og-surface-2"
+                >
+                  <PlusIcon className="size-3.5 shrink-0 text-og-muted" />
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-og-control text-og-fg">
+                      {props.attachedDevices.length > 0
+                        ? "Connect another Chrome profile"
+                        : "Connect this Chrome profile"}
+                    </span>
+                    <span className="block truncate text-og-xs text-og-subtle">
+                      Machine connected · Chrome extension missing
+                    </span>
+                  </span>
+                </a>
+              ) : (
+                <div className="flex w-full items-center gap-2 px-2 py-2 text-left">
+                  <MonitorIcon className="size-3.5 shrink-0 text-og-muted" />
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-og-control text-og-fg">
+                      Chrome connection ready
+                    </span>
+                    <span className="block text-og-xs leading-4 text-og-subtle">
+                      Install the OpenGeni Browser extension in the profile you want to use.
+                    </span>
+                  </span>
+                </div>
+              )
+            ) : null}
           </div>
         ) : null}
         <p
           className={cn(
             "px-2 pb-1 pt-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle",
-            props.attachedDevices.length > 0 && "border-t border-og-border",
+            (props.attachedDevices.length > 0 || props.attachedBridges.length > 0) &&
+              "border-t border-og-border",
           )}
         >
           Open isolated browser
@@ -1213,12 +1382,14 @@ function BrowserProfileMenu(props: {
   identity: BrowserIdentity | null;
   baseRevisionOrdinal: number | null;
   history: { identityId: string; loading: boolean; revisions: BrowserRevision[] } | null;
+  authConnections: SiteAuthConnection[];
   saving: boolean;
   onSave: (newProfileName?: string) => Promise<boolean>;
   onUpdate: (
     identity: BrowserIdentity,
     update: { name?: string; status?: "active" | "archived"; defaultRevisionId?: string },
   ) => Promise<boolean>;
+  onOpenVersion: (identityId: string, baseRevisionId: string) => void;
 }) {
   const detailsRef = useRef<HTMLDetailsElement | null>(null);
   const nameInputId = useId();
@@ -1237,6 +1408,10 @@ function BrowserProfileMenu(props: {
       detailsRef.current?.removeAttribute("open");
     }
   };
+  const openVersion = (identityId: string, baseRevisionId: string) => {
+    detailsRef.current?.removeAttribute("open");
+    props.onOpenVersion(identityId, baseRevisionId);
+  };
   const versionLabel = attached
     ? "live"
     : props.identity
@@ -1299,37 +1474,57 @@ function BrowserProfileMenu(props: {
               {revisions.map((revision) => {
                 const isDefault = revision.id === props.identity?.defaultRevisionId;
                 const isCurrent = revision.ordinal === props.baseRevisionOrdinal;
+                const materialization = revisionMaterializationSummary(revision);
                 return (
-                  <button
+                  <div
                     key={revision.id}
-                    type="button"
-                    disabled={isDefault || props.saving || props.identity?.status === "archived"}
-                    onClick={() =>
-                      void props.onUpdate(props.identity!, { defaultRevisionId: revision.id })
-                    }
-                    className="flex w-full items-center gap-2 rounded-og-sm px-2 py-1.5 text-left transition hover:bg-og-surface-2 disabled:cursor-default disabled:opacity-70"
+                    className="flex w-full items-center gap-1 rounded-og-sm transition hover:bg-og-surface-2"
                   >
-                    <span className="grid size-4 place-items-center text-og-muted">
-                      {isDefault ? <CheckIcon className="size-3.5 text-og-status-running" /> : null}
-                    </span>
-                    <span className="min-w-0 flex-1 text-og-control text-og-fg">
-                      Version {revision.ordinal}
-                    </span>
-                    <span className="text-[10px] text-og-subtle">
-                      {isCurrent && isDefault
-                        ? "current · default"
-                        : isDefault
-                          ? "default"
-                          : isCurrent
-                            ? "current · Use by default"
-                            : "Use by default"}
-                    </span>
-                  </button>
+                    <button
+                      type="button"
+                      disabled={props.saving || props.identity?.status === "archived"}
+                      aria-label={`Open ${props.identity!.name} version ${revision.ordinal}`}
+                      onClick={() => openVersion(props.identity!.id, revision.id)}
+                      className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-left disabled:opacity-50"
+                    >
+                      <span className="grid size-4 place-items-center text-og-muted">
+                        {isCurrent ? <CheckIcon className="size-3.5 text-og-accent" /> : null}
+                      </span>
+                      <span className="min-w-0 flex-1">
+                        <span className="block text-og-control text-og-fg">
+                          Version {revision.ordinal}
+                        </span>
+                        <span className="block truncate text-[10px] text-og-subtle">
+                          {materialization.label}
+                        </span>
+                      </span>
+                      {isCurrent ? (
+                        <span className="text-[10px] text-og-subtle">Current</span>
+                      ) : null}
+                    </button>
+                    <button
+                      type="button"
+                      disabled={isDefault || props.saving || props.identity?.status === "archived"}
+                      aria-label={
+                        isDefault
+                          ? `${props.identity!.name} version ${revision.ordinal} is the default`
+                          : `Use ${props.identity!.name} version ${revision.ordinal} by default`
+                      }
+                      title={isDefault ? "Default version" : "Use by default"}
+                      onClick={() =>
+                        void props.onUpdate(props.identity!, { defaultRevisionId: revision.id })
+                      }
+                      className="mr-1 shrink-0 rounded-og-sm px-2 py-1 text-[10px] text-og-subtle transition hover:bg-og-surface-3 hover:text-og-fg disabled:cursor-default disabled:opacity-70"
+                    >
+                      {isDefault ? "Default" : "Make default"}
+                    </button>
+                  </div>
                 );
               })}
             </div>
             <p className="mt-1 px-2 text-[10px] leading-4 text-og-subtle">
-              Changing the default affects only browsers opened later.
+              Changing the default affects only browsers opened later. Saved browser data can be
+              copied; a website may still expire or re-verify its own session.
             </p>
           </div>
         ) : props.identity &&
@@ -1339,6 +1534,34 @@ function BrowserProfileMenu(props: {
             <LoaderCircleIcon className="size-3 animate-spin" /> Loading saved versions…
           </p>
         ) : null}
+        {props.identity && props.authConnections.length > 0 ? (
+          <div className="mt-3 border-t border-og-border pt-2">
+            <p className="px-1 text-[10px] font-medium uppercase tracking-[0.12em] text-og-subtle">
+              Login health
+            </p>
+            <div className="mt-1 space-y-1">
+              {props.authConnections.map((connection) => {
+                const health = siteAuthHealth(connection);
+                return (
+                  <div
+                    key={connection.id}
+                    className="flex items-start gap-2 rounded-og-sm px-2 py-1.5"
+                  >
+                    <span className={cn("mt-1 size-1.5 shrink-0 rounded-full", health.dotClass)} />
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-og-control text-og-fg">
+                        {connection.name}
+                      </span>
+                      <span className="block truncate text-[10px] text-og-subtle">
+                        {connection.accountLabel} · {health.label}
+                      </span>
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
         {canSave ? (
           props.identity ? (
             <button
@@ -1427,6 +1650,45 @@ function BrowserProfileMenu(props: {
   );
 }
 
+function revisionMaterializationSummary(revision: BrowserRevision): { label: string } {
+  const materializations = revision.components.map((component) => component.materialization);
+  const placementBound = materializations.find(
+    (materialization) => materialization.portability === "placement_bound",
+  );
+  if (placementBound) {
+    return {
+      label: placementBound.reason
+        ? `This machine only · ${placementBound.reason}`
+        : "This machine only",
+    };
+  }
+  const providerBound = materializations.find(
+    (materialization) => materialization.portability === "provider_bound",
+  );
+  if (providerBound) {
+    return {
+      label: providerBound.reason ? `Provider-bound · ${providerBound.reason}` : "Provider-bound",
+    };
+  }
+  return { label: "Portable browser data" };
+}
+
+function siteAuthHealth(connection: SiteAuthConnection): {
+  label: string;
+  dotClass: string;
+} {
+  switch (connection.verificationState) {
+    case "verified":
+      return { label: "Verified", dotClass: "bg-og-status-running" };
+    case "needs_repair":
+      return { label: "Sign-in needs attention", dotClass: "bg-og-status-waiting" };
+    case "failed":
+      return { label: "Verification failed", dotClass: "bg-og-status-error" };
+    case "unknown":
+      return { label: "Not checked yet", dotClass: "bg-og-muted" };
+  }
+}
+
 function MenuButton(props: { children: ReactNode; onClick: () => void; disabled?: boolean }) {
   return (
     <button
@@ -1567,6 +1829,8 @@ function BrowserViewport(props: {
   onAction: (action: BrowserAction, frame: BrowserFrame | null) => Promise<BrowserActionReceipt>;
   onReadClipboard: () => Promise<{ text: string }>;
   onReconnect: () => void;
+  reconnectLabel?: string | undefined;
+  reconnectMessage?: string | undefined;
   onError: (cause: unknown) => void;
 }) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -1596,6 +1860,7 @@ function BrowserViewport(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<BrowserFrame | null>(null);
   const decodingFrameRef = useRef(false);
   const mountedRef = useRef(true);
@@ -1677,13 +1942,19 @@ function BrowserViewport(props: {
       frame: BrowserFrame | null,
       after?: (receipt: BrowserActionReceipt) => Promise<void>,
     ) => {
+      const epoch = actionQueueEpochRef.current;
       actionTailRef.current = actionTailRef.current
         .catch(() => undefined)
         .then(async () => {
+          if (epoch !== actionQueueEpochRef.current) return;
           const receipt = await actionRef.current(action, frame);
           await after?.(receipt);
         })
-        .catch((cause) => errorRef.current(cause));
+        .catch((cause) => {
+          // Do not replay or continue input collected behind a failed request.
+          actionQueueEpochRef.current += 1;
+          errorRef.current(cause);
+        });
     },
     [],
   );
@@ -1930,6 +2201,8 @@ function BrowserViewport(props: {
           error={props.connectionError}
           onAction={(action) => enqueue(action, null)}
           onReconnect={props.onReconnect}
+          reconnectLabel={props.reconnectLabel}
+          reconnectMessage={props.reconnectMessage}
         />
       ) : null}
       {props.mutating ? (
@@ -1948,7 +2221,12 @@ function SemanticBrowserFallback(props: {
   error: Error | null;
   onAction: (action: BrowserAction) => void;
   onReconnect: () => void;
+  reconnectLabel?: string | undefined;
+  reconnectMessage?: string | undefined;
 }) {
+  const controlFailure = interactionControlFailureFromError(props.error);
+  const generationLoss =
+    Boolean(props.reconnectMessage) || isAttachedChromeGenerationLossError(props.error);
   const nodes = semanticNodes(
     props.observation?.semantic?.kind === "snapshot" ? props.observation.semantic.roots : [],
   );
@@ -1965,13 +2243,20 @@ function SemanticBrowserFallback(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"
-              : props.supportsLiveFrames
-                ? browserConnectionLabel(props.connectionState)
-                : "Semantic browser"}
+            {generationLoss
+              ? "Chrome reconnected—open a fresh browser/desktop."
+              : props.error
+                ? "Live view disconnected"
+                : props.supportsLiveFrames
+                  ? browserConnectionLabel(props.connectionState)
+                  : "Semantic browser"}
           </p>
         </div>
+        {props.error || props.reconnectMessage ? (
+          <p className="mt-2 text-og-control leading-5 text-og-muted">
+            {props.reconnectMessage ?? 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">
@@ -1998,13 +2283,14 @@ function SemanticBrowserFallback(props: {
             </div>
           </div>
         ) : null}
-        {props.error && props.supportsLiveFrames ? (
+        {props.error && props.supportsLiveFrames && (!generationLoss || props.reconnectLabel) ? (
           <button
             type="button"
             onClick={props.onReconnect}
             className="mt-3 text-og-control font-medium text-og-accent hover:underline"
           >
-            Reconnect
+            {props.reconnectLabel ??
+              (controlFailure?.retryable === false ? "Try again" : "Reconnect")}
           </button>
         ) : null}
       </div>
@@ -2052,10 +2338,10 @@ function BrowserStatusBar(props: {
           type="button"
           onClick={props.onOpenComputer}
           className="flex items-center gap-1 rounded px-1.5 py-0.5 transition hover:bg-og-surface-2 hover:text-og-fg"
-          aria-label="Open this browser window in Computer"
+          aria-label="Open this browser window in Desktop"
         >
           <MonitorIcon className="size-3" />
-          Computer
+          Desktop
         </button>
       ) : null}
       <button
@@ -2638,6 +2924,23 @@ function isLiveBrowser(session: BrowserSession): boolean {
   return !["ending", "ended", "failed", "lost"].includes(session.lifecycle);
 }
 
+function attachedChromeGenerationLoss(
+  sessions: readonly BrowserSession[],
+): { deviceId: string } | null {
+  const lost = sessions.find(
+    (session) =>
+      session.lifecycle === "lost" &&
+      session.failureCode === "controller_transition_expired" &&
+      session.placement.kind === "attached_device",
+  );
+  return lost?.placement.kind === "attached_device" ? { deviceId: lost.placement.deviceId } : null;
+}
+
+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> {