@opengeni/react 7.4.0 → 7.5.0-canary.36919050519001

package/src/components/browser-viewer.tsx

@@ -208,6 +208,11 @@ export function BrowserViewer({
     () => registry.relevantSessions.filter((session) => isLiveBrowser(session)),
     [registry.relevantSessions],
   );
+  const latestRelevantBrowser = registry.relevantSessions[0];
+  const unavailableBrowser =
+    latestRelevantBrowser?.lifecycle === "lost" || latestRelevantBrowser?.lifecycle === "failed"
+      ? latestRelevantBrowser
+      : undefined;
   const [selection, setSelection] = useState<BrowserSelection>(() =>
     initialBrowserSessionId ? { sessionId: initialBrowserSessionId, pinned: true } : null,
   );
@@ -769,7 +774,8 @@ export function BrowserViewer({
     );
   }
   if (liveSessions.length === 0) {
-    if (renderEmpty) return <>{renderEmpty(() => createBrowser(), creating)}</>;
+    if (renderEmpty && !unavailableBrowser)
+      return <>{renderEmpty(() => createBrowser(), creating)}</>;
     return (
       <div
         className={cn("flex h-full min-h-0 items-center justify-center bg-og-bg p-6", className)}
@@ -778,16 +784,22 @@ 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-fg-muted">
             <Globe2Icon className="size-4.5" />
           </span>
-          <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-fg-muted">
-            {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>
+          {unavailableBrowser && !attachedGenerationLoss ? (
+            <BrowserUnavailableNotice session={unavailableBrowser} />
+          ) : (
+            <>
+              <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-fg-muted">
+                {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}
@@ -855,6 +867,7 @@ export function BrowserViewer({
       />
       {!selectedRegistrySession ? (
         <BrowserUnselectedPanel
+          unavailableBrowser={unavailableBrowser}
           peerCount={liveSessions.length}
           creating={creating}
           onCreate={() => createBrowser()}
@@ -1186,6 +1199,7 @@ function BrowserToolbar(props: {
 }
 
 function BrowserUnselectedPanel(props: {
+  unavailableBrowser: BrowserSession | undefined;
   peerCount: number;
   creating: boolean;
   onCreate: () => void;
@@ -1196,7 +1210,11 @@ function BrowserUnselectedPanel(props: {
         <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">
           <Globe2Icon className="size-4.5" />
         </span>
-        <p className="mt-3 text-og-menu font-medium text-og-fg">No browser for this agent</p>
+        {props.unavailableBrowser ? (
+          <BrowserUnavailableNotice session={props.unavailableBrowser} />
+        ) : (
+          <p className="mt-3 text-og-menu font-medium text-og-fg">No browser for this agent</p>
+        )}
         <p className="mt-1 text-og-control leading-5 text-og-fg-muted">
           {props.peerCount === 1
             ? "One workspace browser is available from the browser menu."
@@ -1216,6 +1234,25 @@ function BrowserUnselectedPanel(props: {
   );
 }
 
+function BrowserUnavailableNotice({ session }: { session: BrowserSession }) {
+  const reason =
+    session.failureCode === "provider_deadline_rotation"
+      ? "The computer running it reached its time limit."
+      : session.failureCode === "source_placement_changed"
+        ? "This chat moved to another computer."
+        : session.lifecycle === "failed"
+          ? "It stopped unexpectedly."
+          : "The connection to it was lost.";
+  return (
+    <div role="status">
+      <p className="mt-3 text-og-menu font-medium text-og-fg">Browser unavailable</p>
+      <p className="mt-1 break-words text-og-control leading-5 text-og-fg-muted">
+        {session.name}. {reason} Open a new browser to continue.
+      </p>
+    </div>
+  );
+}
+
 function BrowserSessionGroup(props: {
   label: string;
   sessions: BrowserSession[];
@@ -1719,7 +1756,8 @@ function BrowserProfileMenu(props: {
         ) : null}
         {canSave ? (
           <p className="mt-2 text-[10px] leading-4 text-og-fg-subtle">
-            Saving briefly restarts this browser. Other open browsers are unchanged.
+            Saving restarts this browser. Save unfinished work on its pages first; unsaved form
+            entries may be lost. Other open browsers are unchanged.
           </p>
         ) : null}
       </div>
@@ -1910,6 +1948,7 @@ function BrowserViewport(props: {
     controllerGeneration: string;
     targetId: string;
     fencedInputBatches?: true | undefined;
+    focusedInputObservations?: true | undefined;
     expiresAt: string;
   } | null;
   activityLabel?: string | undefined;
@@ -1962,6 +2001,7 @@ function BrowserViewport(props: {
   } | null>(null);
   const actionRef = useRef(props.onAction);
   const readClipboardRef = useRef(props.onReadClipboard);
+  const observeInputRef = useRef(props.onObserveForInput);
   const errorRef = useRef(props.onError);
   const actionTailRef = useRef<Promise<void>>(Promise.resolve());
   const actionQueueEpochRef = useRef(0);
@@ -1978,6 +2018,7 @@ function BrowserViewport(props: {
   const mountedRef = useRef(true);
   actionRef.current = props.onAction;
   readClipboardRef.current = props.onReadClipboard;
+  observeInputRef.current = props.onObserveForInput;
   errorRef.current = props.onError;
 
   const clearBufferedInput = useCallback(() => {
@@ -2154,8 +2195,23 @@ function BrowserViewport(props: {
           // frame from that render even when its input fence contains no bytes.
           const receipt = await actionRef.current(dispatchedAction, frame);
           if (!mountedRef.current || epoch !== actionQueueEpochRef.current) return;
-          if (selectAnchor && receipt.observation && inputSequence === inputSequenceRef.current) {
-            setSelectPopup({ observation: receipt.observation, anchor: selectAnchor });
+          // Alt+Down explicitly opens a native dropdown from the keyboard.
+          // Existing controllers return focused-input metadata for clicks only,
+          // so use the ordinary authorized read for this explicit gesture.
+          const keyboardSelect =
+            dispatchedAction.type === "press" && dispatchedAction.key === "Alt+ArrowDown";
+          if ((selectAnchor || keyboardSelect) && inputSequence === inputSequenceRef.current) {
+            const observation = keyboardSelect
+              ? await observeInputRef.current()
+              : receipt.observation;
+            if (
+              mountedRef.current &&
+              epoch === actionQueueEpochRef.current &&
+              inputSequence === inputSequenceRef.current &&
+              observation
+            ) {
+              setSelectPopup({ observation, anchor: selectAnchor ?? null });
+            }
           }
           await after?.(receipt);
         })
@@ -2448,6 +2504,7 @@ function BrowserViewport(props: {
         onPaste={paste}
         className="pointer-events-none absolute left-1/2 top-1/2 size-px resize-none overflow-hidden opacity-0"
         aria-label="Browser keyboard input"
+        aria-keyshortcuts="Alt+ArrowDown"
         autoCapitalize="off"
         autoCorrect="off"
         spellCheck={false}
@@ -2467,6 +2524,7 @@ function BrowserViewport(props: {
       ) : null}
       {showCanvas ? (
         <BrowserSelectControl
+          manualFallback={props.inputBatchAttachment?.focusedInputObservations !== true}
           activation={selectPopup}
           onDismiss={() => inputRef.current?.focus({ preventScroll: true })}
           observe={async () => {
@@ -2740,13 +2798,14 @@ function BrowserDiagnosticsDrawer(props: {
             id="browser-page-title"
             className="text-[10px] font-semibold uppercase tracking-[0.14em] text-og-fg-subtle"
           >
-            Current page
+            Tab diagnostics
           </h3>
+          <p className="mt-1 text-og-xs text-og-fg-subtle">Includes earlier pages in this tab.</p>
           <dl className="mt-2 grid grid-cols-2 gap-2">
-            <DiagnosticCount label="Console errors" value={diagnostics?.consoleErrorCount ?? 0} />
-            <DiagnosticCount label="Page errors" value={diagnostics?.pageErrorCount ?? 0} />
-            <DiagnosticCount label="Failed requests" value={diagnostics?.failedRequestCount ?? 0} />
-            <DiagnosticCount label="Downloads" value={diagnostics?.downloadCount ?? 0} />
+            <DiagnosticCount label="Console errors" value={diagnostics?.consoleErrorCount} />
+            <DiagnosticCount label="Page errors" value={diagnostics?.pageErrorCount} />
+            <DiagnosticCount label="Failed requests" value={diagnostics?.failedRequestCount} />
+            <DiagnosticCount label="Downloads" value={diagnostics?.downloadCount} />
           </dl>
           {session?.failureCode ? (
             <p className="mt-2 rounded-og-sm border border-og-status-error/30 bg-og-status-error/5 px-2.5 py-2 text-og-xs text-og-danger">
@@ -3044,7 +3103,7 @@ function DiagnosticFact(props: { label: string; value: string }) {
   );
 }
 
-function DiagnosticCount(props: { label: string; value: number }) {
+function DiagnosticCount(props: { label: string; value: number | undefined }) {
   return (
     <div className="rounded-og-sm border border-og-border bg-og-bg px-2.5 py-2">
       <dt className="text-[10px] text-og-fg-subtle">{props.label}</dt>
@@ -3054,7 +3113,7 @@ function DiagnosticCount(props: { label: string; value: number }) {
           props.value ? "text-og-fg" : "text-og-fg-muted",
         )}
       >
-        {props.value}
+        {props.value ?? "Unavailable"}
       </dd>
     </div>
   );

package/src/components/code-editor.tsx

@@ -8,8 +8,10 @@ import {
   useMemo,
   useRef,
   useState,
+  useSyncExternalStore,
 } from "react";
 import { cn } from "../lib/cn";
+import { codeEditorPeers, type CodeEditorLanguage } from "../lib/workbench-peers";
 
 // --- Lazy CodeMirror surface ----------------------------------------------
 //
@@ -42,19 +44,8 @@ type EditorBundle = {
   languageExtension: unknown | null;
 };
 
-/** Language grammar loaders, keyed by the extension class we infer from the path. */
-const LANGUAGE_LOADERS: Record<string, () => Promise<unknown>> = {
-  javascript: async () =>
-    (await import("@codemirror/lang-javascript")).javascript({ jsx: true, typescript: true }),
-  json: async () => (await import("@codemirror/lang-json")).json(),
-  python: async () => (await import("@codemirror/lang-python")).python(),
-  markdown: async () => (await import("@codemirror/lang-markdown")).markdown(),
-  css: async () => (await import("@codemirror/lang-css")).css(),
-  html: async () => (await import("@codemirror/lang-html")).html(),
-};
-
 /** Map a filename to a grammar key (or null for plain text — still fully editable). */
-export function languageForPath(path: string): keyof typeof LANGUAGE_LOADERS | null {
+export function languageForPath(path: string): string | null {
   const name = path.split("/").pop() ?? path;
   const ext = name.includes(".") ? (name.split(".").pop() ?? "").toLowerCase() : "";
   switch (ext) {
@@ -182,6 +173,11 @@ export function CodeEditor({
 }: CodeEditorProps) {
   const [failed, setFailed] = useState(false);
   const [bundle, setBundle] = useState<EditorBundle | null>(null);
+  const peerRevision = useSyncExternalStore(
+    codeEditorPeers.subscribe,
+    codeEditorPeers.revision,
+    codeEditorPeers.revision,
+  );
 
   // The live buffer and its compare-and-swap baseline are one state value so a
   // remote refresh cannot update one without the other.
@@ -233,12 +229,13 @@ export function CodeEditor({
 
   // Resolve the lazy bundle (editor + keymap/Prec helpers + language grammar)
   // once, re-resolving the grammar when the file's language class changes.
-  const langKey = useMemo(() => languageForPath(path), [path]);
+  const langKey = useMemo(() => languageForPath(path) as CodeEditorLanguage | null, [path]);
   useEffect(() => {
     let cancelled = false;
     void (async () => {
       try {
-        const cmMod = (await import("@uiw/react-codemirror")) as unknown as {
+        const peers = await codeEditorPeers.load();
+        const cmMod = peers.module as {
           default: ReactCodeMirrorComponent;
           keymap: { of: (binds: unknown[]) => unknown };
           Prec: { highest: (ext: unknown) => unknown };
@@ -248,7 +245,7 @@ export function CodeEditor({
         let languageExtension: unknown | null = null;
         if (langKey) {
           try {
-            languageExtension = (await LANGUAGE_LOADERS[langKey]?.()) ?? null;
+            languageExtension = (await peers.languages?.[langKey]?.()) ?? null;
           } catch {
             languageExtension = null;
           }
@@ -283,7 +280,7 @@ export function CodeEditor({
     return () => {
       cancelled = true;
     };
-  }, [langKey]);
+  }, [langKey, peerRevision]);
 
   // Keep the freshest save closure reachable from the (stable) keymap binding.
   const saveRef = useRef<() => void>(() => {});

package/src/components/computer-viewer.tsx

@@ -289,13 +289,19 @@ export function ComputerViewer({
       : null;
   const rfbStream =
     frames.attachment?.stream.kind === "direct_rfb" ? frames.attachment.stream : null;
+  const machineLocked = selectedRegistrySession?.failureCode === "machine_locked";
+  // RFB has one combined input switch; partial native input stays view-only.
+  const rfbInputEnabled =
+    !machineLocked &&
+    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,
@@ -307,8 +313,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(() => {
@@ -452,7 +457,8 @@ export function ComputerViewer({
 
   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)
@@ -464,12 +470,13 @@ export function ComputerViewer({
         })
         .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
@@ -484,7 +491,7 @@ export function ComputerViewer({
       })().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;
@@ -623,13 +630,18 @@ export function ComputerViewer({
               <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">
+                    View only · direct input unavailable
+                  </div>
+                ) : null}
               </div>
             ) : (
               <ComputerViewport
@@ -648,6 +660,8 @@ export function ComputerViewer({
                 mutating={computer.mutating}
                 backgroundActions={computer.session?.capabilities?.backgroundActions === true}
                 clipboardEnabled={computer.session?.capabilities?.clipboard === true}
+                pointerInput={computer.session?.capabilities?.pointerInput === true}
+                keyboardInput={computer.session?.capabilities?.keyboardInput === true}
                 onAction={perform}
                 onReadClipboard={computer.readClipboard}
                 onReconnect={
@@ -1011,6 +1025,8 @@ function ComputerViewport(props: {
   mutating: boolean;
   backgroundActions: boolean;
   clipboardEnabled: boolean;
+  pointerInput: boolean;
+  keyboardInput: boolean;
   onAction: (action: ComputerAction, frame: ComputerFrame | null) => Promise<void>;
   onReadClipboard: () => Promise<ComputerClipboard>;
   onReconnect: () => void;
@@ -1070,6 +1086,9 @@ function ComputerViewport(props: {
     if (inputRef.current) inputRef.current.value = "";
   }, []);
 
+  const pointerInputEnabled = rawInputEnabled && props.pointerInput;
+  const keyboardInputEnabled = rawInputEnabled && props.keyboardInput;
+
   const paintQueuedFrames = useCallback(() => {
     if (decodingFrameRef.current) return;
     decodingFrameRef.current = true;
@@ -1159,11 +1178,11 @@ function ComputerViewport(props: {
   }, [clearBufferedInput, paintQueuedFrames, props.frame]);
 
   useLayoutEffect(() => {
-    if (!rawInputEnabled) {
+    if (!rawInputEnabled || !props.pointerInput || !props.keyboardInput) {
       actionQueueEpochRef.current += 1;
       clearBufferedInput();
     }
-  }, [clearBufferedInput, rawInputEnabled]);
+  }, [clearBufferedInput, props.keyboardInput, props.pointerInput, rawInputEnabled]);
 
   const enqueue = useCallback(
     (
@@ -1248,6 +1267,8 @@ function ComputerViewport(props: {
     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 = {
@@ -1257,11 +1278,10 @@ function ComputerViewport(props: {
       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;
@@ -1326,7 +1346,7 @@ function ComputerViewport(props: {
 
   const contextMenu = (event: MouseEvent<HTMLCanvasElement>) => {
     event.preventDefault();
-    if (!rawInputEnabled) return;
+    if (!pointerInputEnabled) return;
     const frame = paintedFrameRef.current;
     if (!frame) return;
     flushPendingWheel();
@@ -1349,7 +1369,7 @@ function ComputerViewport(props: {
   };
 
   const wheel = (event: WheelEvent<HTMLCanvasElement>) => {
-    if (!rawInputEnabled) return;
+    if (!pointerInputEnabled) return;
     const frame = paintedFrameRef.current;
     if (!frame) return;
     const at = point(frame, event.clientX, event.clientY);
@@ -1377,7 +1397,7 @@ function ComputerViewport(props: {
   };
 
   const keyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (!rawInputEnabled) return;
+    if (!keyboardInputEnabled) return;
     flushPendingWheel();
     const command = event.metaKey || event.ctrlKey;
     if (
@@ -1398,7 +1418,7 @@ function ComputerViewport(props: {
   };
 
   const copy = (event: ClipboardEvent<HTMLTextAreaElement>) => {
-    if (!props.clipboardEnabled || !rawInputEnabled) return;
+    if (!props.clipboardEnabled || !keyboardInputEnabled) return;
     event.preventDefault();
     flushPendingWheel();
     flushPendingText();
@@ -1415,7 +1435,7 @@ function ComputerViewport(props: {
   };
 
   const paste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
-    if (!props.clipboardEnabled || !rawInputEnabled) return;
+    if (!props.clipboardEnabled || !keyboardInputEnabled) return;
     event.preventDefault();
     flushPendingWheel();
     flushPendingText();
@@ -1432,7 +1452,7 @@ function ComputerViewport(props: {
   };
 
   const input = (value: string) => {
-    if (!value || !rawInputEnabled) return;
+    if (!value || !keyboardInputEnabled) return;
     flushPendingWheel();
     flushPendingClick();
     const pending = pendingTextRef.current;
@@ -1462,7 +1482,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}
@@ -1485,7 +1505,7 @@ function ComputerViewport(props: {
         autoCapitalize="off"
         autoCorrect="off"
         spellCheck={false}
-        disabled={!rawInputEnabled}
+        disabled={!keyboardInputEnabled}
       />
       {!showCanvas ? (
         <ComputerViewportFallback
@@ -1502,10 +1522,18 @@ function ComputerViewport(props: {
           <LoaderCircleIcon className="size-3 animate-spin" /> Acting
         </div>
       ) : null}
-      {showCanvas && !rawInputEnabled ? (
+      {showCanvas && (!rawInputEnabled || !props.pointerInput || !props.keyboardInput) ? (
         <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 ? (
+          <span>
+            {!rawInputEnabled && (props.pointerInput || props.keyboardInput)
+              ? "Background view · use native 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}

package/src/components/desktop-viewer.tsx

@@ -30,7 +30,7 @@ export type DesktopViewerProps = {
   /** Render the built-in Watching ⇄ Take control toggle (default true). */
   showControlToggle?: boolean | undefined;
   scaleViewport?: boolean | undefined;
-  /** Custom RFB factory (tests / a WebRTC swap). Defaults to lazy @novnc/novnc. */
+  /** Custom RFB factory; otherwise enableDesktopViewer() supplies lazy noVNC. */
   rfbFactory?: DesktopRfbFactory | undefined;
   /** Authenticated controller protocols for proxied RFB transports. */
   webSocketProtocols?: string[] | undefined;

package/src/components/markdown-table-layout.ts

@@ -16,6 +16,37 @@ export function markdownTableWidth({
   return Math.max(columnWidth, Math.min(preferredWidth, available));
 }
 
+function measurementCopy(source: Node, document: Document): Node {
+  if (source.nodeType === Node.ELEMENT_NODE) {
+    const element = source as Element;
+    // Inert prevents focus, not custom-element construction, media loading or
+    // embedded browsing contexts. Do not clone those host-rendered surfaces.
+    if (
+      element.localName.includes("-") ||
+      ["iframe", "object", "embed", "video", "audio", "canvas", "script"].includes(
+        element.localName,
+      )
+    ) {
+      const bounds = element.getBoundingClientRect();
+      const placeholder = document.createElement("span");
+      placeholder.style.display = "inline-block";
+      placeholder.style.width = `${bounds.width}px`;
+      placeholder.style.height = `${bounds.height}px`;
+      return placeholder;
+    }
+  }
+  const copy = document.importNode(source, false);
+  if (copy.nodeType === Node.ELEMENT_NODE) {
+    const element = copy as Element;
+    element.removeAttribute("id");
+    for (const attribute of [...element.attributes]) {
+      if (attribute.name.startsWith("on")) element.removeAttribute(attribute.name);
+    }
+  }
+  for (const child of source.childNodes) copy.appendChild(measurementCopy(child, document));
+  return copy;
+}
+
 /** Loaded only for assistant tables. Keep prose and nested scroll owners intact. */
 export function observeMarkdownTableLayout(wrapper: HTMLDivElement, table: HTMLTableElement) {
   const body = wrapper.parentElement;
@@ -24,6 +55,8 @@ export function observeMarkdownTableLayout(wrapper: HTMLDivElement, table: HTMLT
     ?.closest<HTMLElement>("[data-og-timeline-scroller]");
   if (!body?.classList.contains("og-markdown-body") || !scroller) return;
 
+  // Build the static copy without a browsing context before inserting its probe.
+  const measurementDocument = table.ownerDocument.implementation.createHTMLDocument("");
   let width: number | null = null;
   const reset = () => {
     width = null;
@@ -50,14 +83,25 @@ export function observeMarkdownTableLayout(wrapper: HTMLDivElement, table: HTMLT
     const right =
       panel.left + scroller.clientLeft + scroller.clientWidth - parseFloat(panelStyle.paddingRight);
 
-    // Measure the original table, preserving its wrapping and TSV copy DOM.
-    const previousWidth = table.style.width;
+    // Even a temporary max-content width on the live table changes its height
+    // during forced layout. Browser scroll anchoring can retain that displacement
+    // after the width is restored. Measure a copy without touching live geometry.
+    const probe = table.ownerDocument.createElement("div");
+    probe.setAttribute("aria-hidden", "true");
+    probe.inert = true;
+    // A zero-sized, contained box cannot extend the scroller's overflow area,
+    // including inside transformed ancestors. Keep the same inherited styling.
+    probe.style.cssText =
+      "position:absolute;width:0;height:0;overflow:hidden;contain:layout size paint;visibility:hidden;pointer-events:none";
+    const copy = measurementCopy(table, measurementDocument) as HTMLTableElement;
+    copy.style.width = "max-content";
+    probe.append(copy);
     let preferred: number;
     try {
-      table.style.width = "max-content";
-      preferred = table.getBoundingClientRect().width;
+      table.parentElement!.append(probe);
+      preferred = copy.getBoundingClientRect().width;
     } finally {
-      table.style.width = previousWidth;
+      probe.remove();
     }
     const next = markdownTableWidth({
       columnLeft: column.left,

package/src/components/markdown.tsx

@@ -391,12 +391,15 @@ function ActionMarkdownLink({
       type="button"
       className={cn(
         MARKDOWN_LINK_CLASS,
-        "inline-flex min-h-7 cursor-pointer items-center disabled:cursor-wait disabled:opacity-70 pointer-coarse:min-h-11",
+        "inline-flex min-h-7 cursor-pointer items-center aria-disabled:cursor-wait aria-disabled:opacity-70 pointer-coarse:min-h-11",
       )}
-      disabled={state === "loading"}
+      // Not `disabled`: disabling the focused control drops focus to the page,
+      // so a host viewer could not return focus to the link that opened it.
+      aria-disabled={state === "loading" || undefined}
       aria-busy={state === "loading"}
       title={state === "error" ? "Couldn't open this file. Select to retry." : title}
       onClick={() => {
+        if (state === "loading") return;
         setState("loading");
         void Promise.resolve()
           .then(onOpen)