@opengeni/react 0.52.1 → 0.57.0

package/src/components/desktop-viewer.tsx

@@ -4,8 +4,16 @@ import type {
   DesktopStreamCapability,
 } from "@opengeni/sdk";
 import { LoaderCircleIcon, MonitorIcon, MousePointerClickIcon, WifiOffIcon } from "lucide-react";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import {
+  type ClipboardEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { cn } from "../lib/cn";
+import { interactionHostPlatform, type InteractionHostPlatform } from "../lib/host-platform";
 import { useDesktopStream } from "../hooks/use-desktop-stream";
 import type { DesktopWebSocketFactory } from "../hooks/use-relay-frame-stream";
 
@@ -24,9 +32,22 @@ export type DesktopViewerProps = {
   scaleViewport?: boolean | undefined;
   /** Custom RFB factory (tests / a WebRTC swap). Defaults to lazy @novnc/novnc. */
   rfbFactory?: DesktopRfbFactory | undefined;
+  /** Authenticated controller protocols for proxied RFB transports. */
+  webSocketProtocols?: string[] | undefined;
   /** Custom socket factory for the self-hosted `relay-frames` transport (tests).
    *  Defaults to `new WebSocket(url)`. Mirrors `rfbFactory`. */
   webSocketFactory?: DesktopWebSocketFactory | undefined;
+  /**
+   * Optional host-owned paste path. ComputerSession hosts use their native,
+   * target-scoped clipboard action instead of relying on an RFB server to sync
+   * ClientCutText into the graphical seat. Return true once the host accepted
+   * the text. Without a host authority the viewer leaves paste untouched rather
+   * than claiming success for an unreliable display-server clipboard heuristic.
+   */
+  onPasteText?: ((text: string) => boolean) | undefined;
+  /** OS behind the RFB seat. Used only to translate the host's primary shortcut
+   * (Cmd on macOS, Ctrl elsewhere) to the target's primary modifier. */
+  targetPlatform?: "linux" | "macos" | "windows" | null | undefined;
   /**
    * @deprecated Desktop acknowledgment is automatic. Retained as an ignored
    * compatibility prop so existing embedders keep compiling.
@@ -138,7 +159,10 @@ export function DesktopViewer({
   showControlToggle = true,
   scaleViewport,
   rfbFactory,
+  webSocketProtocols,
   webSocketFactory,
+  onPasteText,
+  targetPlatform,
   onActivate,
   onAcknowledge,
   watching,
@@ -273,6 +297,7 @@ export function DesktopViewer({
     interactive: inControl,
     ...(scaleViewport !== undefined ? { scaleViewport } : {}),
     ...(rfbFactory ? { rfbFactory } : {}),
+    ...(webSocketProtocols ? { webSocketProtocols } : {}),
     ...(webSocketFactory ? { webSocketFactory } : {}),
   });
 
@@ -373,6 +398,45 @@ export function DesktopViewer({
     stream.reconnect();
   };
 
+  const paste = (event: ClipboardEvent<HTMLDivElement>) => {
+    if (!inControl) return;
+    const text = event.clipboardData.getData("text/plain");
+    if (!text && !event.clipboardData.types.includes("text/plain")) return;
+    if (!onPasteText?.(text)) return;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const primaryShortcut = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (!inControl || !targetPlatform) return;
+    const hostPlatform = interactionHostPlatform();
+    // noVNC maps a Mac Command key to remote Alt before the actual chord key
+    // arrives. Suppress that standalone physical modifier; the complete target
+    // chord below owns both its down and up events.
+    if (isHostPrimaryModifier(event, hostPlatform)) {
+      event.stopPropagation();
+      return;
+    }
+    const chord = desktopPrimaryShortcut(event, hostPlatform, targetPlatform);
+    if (!chord) return;
+    // Copy/paste must keep the browser's default clipboard dispatch alive, but
+    // noVNC must not also send the host modifier into the remote seat.
+    if (chord === "clipboard") {
+      event.stopPropagation();
+      return;
+    }
+    const sent = chord.every(({ keysym, code, down }) => stream.sendKey?.(keysym, code, down));
+    if (!sent) return;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const primaryModifierUp = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (inControl && isHostPrimaryModifier(event, interactionHostPlatform())) {
+      event.stopPropagation();
+    }
+  };
+
   // ── Resolve the single UI state (priority order) ────────────────────────────
   let uiState: DesktopUiState;
   if (viewerCapReached) uiState = "viewer_cap";
@@ -448,6 +512,10 @@ export function DesktopViewer({
       data-state={stream.state}
       data-ui-state={uiState}
       data-in-control={inControl ? "true" : undefined}
+      data-target-platform={targetPlatform ?? undefined}
+      onKeyDownCapture={primaryShortcut}
+      onKeyUpCapture={primaryModifierUp}
+      onPasteCapture={paste}
     >
       {/* noVNC mount target. It appends a `width:100%;height:100%` `_screen` div
           and AUTOSCALES the 1280x800 framebuffer to fit THIS box. We pin it to
@@ -524,6 +592,51 @@ export function DesktopViewer({
   );
 }
 
+type RfbKeyEvent = { keysym: number; code: string; down: boolean };
+
+function isHostPrimaryModifier(
+  event: Pick<ReactKeyboardEvent<HTMLDivElement>, "key">,
+  hostPlatform: InteractionHostPlatform,
+): boolean {
+  return event.key === (hostPlatform === "mac" ? "Meta" : "Control");
+}
+
+/** Translate one host-primary chord into deterministic RFB events for the
+ * target OS. noVNC otherwise treats a Mac Command key as remote Alt, which
+ * makes ordinary Cmd+A/Z shortcuts silently wrong on Linux sandboxes. */
+export function desktopPrimaryShortcut(
+  event: Pick<
+    ReactKeyboardEvent<HTMLDivElement>,
+    "altKey" | "ctrlKey" | "key" | "metaKey" | "shiftKey" | "code"
+  >,
+  hostPlatform: InteractionHostPlatform,
+  targetPlatform: "linux" | "macos" | "windows",
+): RfbKeyEvent[] | "clipboard" | null {
+  const primaryHeld = hostPlatform === "mac" ? event.metaKey : event.ctrlKey;
+  if (!primaryHeld || [...event.key].length !== 1) return null;
+  const key = event.key.toLowerCase();
+  if (!event.altKey && (key === "c" || key === "v")) return "clipboard";
+  const primary =
+    targetPlatform === "macos"
+      ? { keysym: 0xffeb, code: "MetaLeft" }
+      : { keysym: 0xffe3, code: "ControlLeft" };
+  const modifiers = [
+    primary,
+    ...(event.altKey ? [{ keysym: 0xffe9, code: "AltLeft" }] : []),
+    ...(event.shiftKey ? [{ keysym: 0xffe1, code: "ShiftLeft" }] : []),
+  ];
+  const keyEvent = {
+    keysym: key.codePointAt(0)!,
+    code: event.code || (/^[a-z]$/u.test(key) ? `Key${key.toUpperCase()}` : key),
+  };
+  return [
+    ...modifiers.map((modifier) => ({ ...modifier, down: true })),
+    { ...keyEvent, down: true },
+    { ...keyEvent, down: false },
+    ...modifiers.reverse().map((modifier) => ({ ...modifier, down: false })),
+  ];
+}
+
 /**
  * The primary WATCHING-state call-to-action: a large, centered pill button
  * overlaid on the desktop inviting the viewer to drive the mouse & keyboard.

package/src/components/interaction-intervention-banner.tsx

@@ -0,0 +1,99 @@
+import type { InteractionIntervention } from "@opengeni/sdk/interaction";
+import { CheckIcon, CircleAlertIcon, LoaderCircleIcon, XIcon } from "lucide-react";
+import { cn } from "../lib/cn";
+
+export type InteractionInterventionBannerProps = {
+  interventions: InteractionIntervention[];
+  activeTargetId?: string | null | undefined;
+  mutating?: boolean | undefined;
+  className?: string | undefined;
+  onOpen?: ((intervention: InteractionIntervention) => void) | undefined;
+  onResolve: (intervention: InteractionIntervention, outcome: "completed" | "dismissed") => void;
+};
+
+/** Compact durable human-action prompt shared by Browser and Computer viewers. */
+export function InteractionInterventionBanner({
+  interventions,
+  activeTargetId,
+  mutating = false,
+  className,
+  onOpen,
+  onResolve,
+}: InteractionInterventionBannerProps) {
+  const intervention = interventions[0];
+  if (!intervention) return null;
+  const targetOpen = activeTargetId === undefined || activeTargetId === intervention.targetId;
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center gap-2 border-b border-og-status-waiting/25 bg-og-status-waiting/[0.07] px-3 py-2",
+        className,
+      )}
+      role="status"
+    >
+      <span className="grid size-7 shrink-0 place-items-center rounded-og-sm bg-og-status-waiting/10 text-og-status-waiting">
+        <CircleAlertIcon className="size-3.5" />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex items-center gap-1.5 text-og-control font-medium text-og-fg">
+          {interventionTitle(intervention.kind)}
+          {interventions.length > 1 ? (
+            <span className="rounded-full bg-og-surface-2 px-1.5 py-0.5 text-[10px] font-normal text-og-muted">
+              +{interventions.length - 1}
+            </span>
+          ) : null}
+        </span>
+        <span className="block truncate text-og-xs text-og-muted">{intervention.reason}</span>
+      </span>
+      {!targetOpen && onOpen ? (
+        <button
+          type="button"
+          onClick={() => onOpen(intervention)}
+          disabled={mutating}
+          className="h-7 shrink-0 rounded-og-sm border border-og-border bg-og-surface-1 px-2.5 text-og-control font-medium text-og-fg transition hover:bg-og-surface-2 disabled:opacity-50"
+        >
+          Open
+        </button>
+      ) : (
+        <button
+          type="button"
+          onClick={() => onResolve(intervention, "completed")}
+          disabled={mutating}
+          className="inline-flex h-7 shrink-0 items-center gap-1 rounded-og-sm bg-og-accent px-2.5 text-og-control font-medium text-og-accent-fg transition hover:brightness-105 disabled:opacity-50"
+        >
+          {mutating ? (
+            <LoaderCircleIcon className="size-3 animate-spin" />
+          ) : (
+            <CheckIcon className="size-3" />
+          )}
+          Done
+        </button>
+      )}
+      <button
+        type="button"
+        onClick={() => onResolve(intervention, "dismissed")}
+        disabled={mutating}
+        className="grid size-7 shrink-0 place-items-center rounded-og-sm text-og-muted transition hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-50"
+        aria-label="Cancel request"
+        title="Cancel request"
+      >
+        <XIcon className="size-3.5" />
+      </button>
+    </div>
+  );
+}
+
+function interventionTitle(kind: InteractionIntervention["kind"]): string {
+  switch (kind) {
+    case "manual_login":
+      return "Sign in needed";
+    case "mfa":
+      return "Verification needed";
+    case "external_action":
+      return "Action needed";
+    case "confirmation":
+      return "Confirmation needed";
+    case "other":
+      return "Agent needs your help";
+  }
+}

package/src/components/machines/machine-detail.tsx

@@ -95,7 +95,7 @@ export function MachineDetail({
               data-remove-machine
               aria-label={`Remove machine ${machine.name}`}
               onClick={() => onRemove(machine)}
-              className="inline-flex min-h-9 items-center gap-1.5 rounded-og-sm border border-og-status-failed/40 px-2.5 py-1 font-medium text-og-xs text-og-status-failed transition-colors hover:bg-og-status-failed/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-status-failed/50 pointer-coarse:min-h-11"
+              className="inline-flex min-h-9 items-center gap-1.5 rounded-og-sm border border-og-status-failed/40 px-2.5 py-1 font-medium text-og-xs text-og-status-failed transition-colors hover:bg-og-status-failed/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-status-failed/50 pointer-coarse:min-h-11"
             >
               <Trash2Icon className="size-3.5" aria-hidden />
               <span className="hidden sm:inline">Remove machine</span>

package/src/components/model-policy-picker.tsx

@@ -65,6 +65,7 @@ export const defaultModelPolicyPickerMessages: ModelPolicyPickerMessages = {
   billingHints: {
     opengeni_credits: "Will use credits",
     codex_subscription: "ChatGPT / Codex plan",
+    supergrok_subscription: "SuperGrok / xAI plan",
     byok: "Billed to your AI Gateway",
   },
 };
@@ -132,6 +133,17 @@ function ChatGptMark(props: SVGProps<SVGSVGElement>) {
   );
 }
 
+function XaiMark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 466.04 516.93" fill="currentColor" aria-hidden="true" {...props}>
+      <polygon points="0.12 182.71 234.14 516.92 338.15 516.92 104.13 182.71 0.12 182.71" />
+      <polygon points="0 516.92 104.08 516.92 156.08 442.67 104.04 368.34 0 516.92" />
+      <polygon points="466.04 0 361.96 0 182.1 256.86 234.15 331.18 466.04 0" />
+      <polygon points="380.78 516.92 466.04 516.92 466.04 37.16 380.78 158.92 380.78 516.92" />
+    </svg>
+  );
+}
+
 export function BillingClassMark(props: {
   billingClass: PickerBillingClass;
   className?: string | undefined;
@@ -140,6 +152,7 @@ export function BillingClassMark(props: {
   const labels: Record<PickerBillingClass, string> = {
     opengeni_credits: "OpenGeni",
     codex_subscription: "Codex",
+    supergrok_subscription: "SuperGrok",
     byok: "Bring your own key",
   };
   const label = props["aria-label"] ?? labels[props.billingClass];
@@ -162,6 +175,8 @@ export function BillingClassMark(props: {
         <OpenGeniMark className={mark} />
       ) : props.billingClass === "codex_subscription" ? (
         <ChatGptMark className={mark} />
+      ) : props.billingClass === "supergrok_subscription" ? (
+        <XaiMark className={mark} />
       ) : (
         <KeyRoundIcon className={mark} aria-hidden />
       )}

package/src/components/sandbox-terminal.tsx

@@ -1,5 +1,5 @@
 import type { TerminalCapability } from "@opengeni/sdk";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
 import { type TerminalStreamStatus, useTerminalStream } from "../hooks/use-terminal-stream";
 import type { UseSandboxTerminalResult } from "../hooks/use-sandbox-terminal";
@@ -87,6 +87,8 @@ export type SandboxTerminalProps = {
    * the firehose-only default).
    */
   onActivate?: (() => void) | undefined;
+  /** Re-negotiate the terminal capability after an unexpected socket failure. */
+  onReconnectNeeded?: (() => void) | undefined;
   className?: string | undefined;
 };
 
@@ -94,6 +96,7 @@ export type SandboxTerminalProps = {
 // drive it without a hard type dep on the lazily-imported lib.
 type XtermLike = {
   open: (el: HTMLElement) => void;
+  focus: () => void;
   write: (data: string) => void;
   clear: () => void;
   onData: (cb: (data: string) => void) => { dispose: () => void };
@@ -223,6 +226,7 @@ export function SandboxTerminal({
   showHeader,
   shell,
   onActivate,
+  onReconnectNeeded,
   className,
 }: SandboxTerminalProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -237,7 +241,8 @@ export function SandboxTerminal({
   const [activated, setActivated] = useState(false);
 
   // ── Interactive transport switch ─────────────────────────────────────────────
-  const ptyDescriptor = terminalCapability?.transport === "pty-ws";
+  const ptyDescriptor =
+    terminalCapability?.transport === "pty-ws" || terminalCapability?.transport === "relay-pty";
   const ptyAttachable = terminalCanAcquirePty(terminalCapability);
   const {
     status: ptyStatus,
@@ -251,7 +256,7 @@ export function SandboxTerminal({
     capability:
       ptyAttachable && ready
         ? {
-            transport: "pty-ws",
+            transport: terminalCapability!.transport,
             url: ptyDescriptor ? terminalCapability!.url : null,
             token: ptyDescriptor ? terminalCapability!.token : null,
             expiresAt: ptyDescriptor ? terminalCapability!.expiresAt : null,
@@ -260,6 +265,7 @@ export function SandboxTerminal({
     onOutput: (data) => {
       termRef.current?.write(data);
     },
+    onReconnectNeeded,
   });
 
   // A pty-ws capability exclusively owns the screen even while connecting or
@@ -304,6 +310,16 @@ export function SandboxTerminal({
   });
 
   function handleActivate() {
+    // Capture-phase activation may synchronously negotiate a fresh terminal
+    // capability and rerender the shell. Focus xterm before that state change so
+    // the user's first keystroke or paste reaches its already-bounded input
+    // queue instead of landing on the surrounding dock.
+    const term = termRef.current;
+    if (term && !readOnly && (ptyAttachable || result.write !== null)) {
+      term.options.disableStdin = false;
+      term.options.cursorBlink = true;
+    }
+    term?.focus();
     if (!activated) setActivated(true);
     onActivate?.();
   }
@@ -451,7 +467,7 @@ export function SandboxTerminal({
 
   // Sync stdin/cursor at runtime (NOT a remount) when interactivity flips, so the
   // projection→PTY handoff keeps the single Terminal instance + its scrollback.
-  useEffect(() => {
+  useLayoutEffect(() => {
     const term = termRef.current;
     if (!ready || !term) return;
     term.options.disableStdin = !interactive;
@@ -509,9 +525,10 @@ export function SandboxTerminal({
     }
   }, [ready, result.chunks, ptyMode]);
 
-  // Wire interactive input when allowed. PTY mode pipes keystrokes to the ttyd
-  // socket; firehose mode uses the legacy ptyWrite-over-HTTP fn.
-  useEffect(() => {
+  // Wire interactive input when allowed. `ptyWrite` is stable across socket
+  // status changes, so this subscription does not tear down while a grant opens
+  // or rotates and cannot create a first-keystroke gap.
+  useLayoutEffect(() => {
     const term = termRef.current;
     if (!ready || !term || !interactive) {
       setInputReady(false);

package/src/components/sandbox-workspace.tsx

@@ -25,6 +25,7 @@ import {
   useState,
 } from "react";
 import type { SessionEvent } from "@opengeni/sdk";
+import type { InteractionPlacement } from "@opengeni/sdk/interaction";
 import {
   CircleCheckIcon,
   CpuIcon,
@@ -245,6 +246,9 @@ export type UseSandboxWorkspaceTabsOptions = ClientOverride & {
   initialTab?: string | null | undefined;
   /** Actually selected dock tab. Inactive data surfaces retain cache but issue no live reads. */
   activeTab?: string | null | undefined;
+  /** Whether the dock is visible. Hidden docks retain UI state but must not keep
+   * expensive browser/computer media streams alive. */
+  workspaceVisible?: boolean | undefined;
   /** Host-routed notifications (mutation errors, desktop-consent failures). The
    *  package never imports a toast library — the host decides how to surface. */
   onNotify?: ((notification: WorkspaceNotification) => void) | undefined;
@@ -301,7 +305,7 @@ function emptyWarmIntents(sessionId: string): SessionWarmIntents {
 export function useSandboxWorkspaceTabs(
   options: UseSandboxWorkspaceTabsOptions,
 ): UseSandboxWorkspaceTabsResult {
-  const { client, workspaceId } = useOpenGeni(options);
+  const { client, workspaceId, workspaceInteractionEvent } = useOpenGeni(options);
   const {
     sessionId,
     events,
@@ -317,6 +321,7 @@ export function useSandboxWorkspaceTabs(
   } = options;
   const initialTab = options.initialTab ?? null;
   const activeTab = options.activeTab ?? initialTab;
+  const workspaceVisible = options.workspaceVisible ?? true;
   const requestedSurfaces = options.surfaces ?? WORKBENCH_SURFACES;
   const surfaceSet = new Set<SandboxWorkspaceSurface>(requestedSurfaces);
   const changesEnabled = surfaceSet.has(WORKBENCH_TAB_CHANGES);
@@ -325,12 +330,16 @@ export function useSandboxWorkspaceTabs(
   const browserEnabled = surfaceSet.has(WORKBENCH_TAB_BROWSER);
   const desktopEnabled = surfaceSet.has(WORKBENCH_TAB_DESKTOP);
   const createLinkedComputer = useCallback(
-    async (name: string) => {
+    async (name: string, placement?: InteractionPlacement) => {
       const response = await client.createComputerSession(workspaceId, {
         operationId: crypto.randomUUID(),
         sessionId,
         name,
+        ...(placement ? { placement } : {}),
       });
+      if (response.operation.state !== "completed" || response.session.lifecycle !== "active") {
+        throw new Error(response.operation.error?.message ?? "The computer could not be opened.");
+      }
       return {
         id: response.session.id,
         placement: response.session.placement,
@@ -444,6 +453,17 @@ export function useSandboxWorkspaceTabs(
     provisioningRef.current = { sessionId, provisioning };
   }, [sessionId, provisioning, renegotiate]);
 
+  // BrowserSession and ComputerSession lifecycles use the same placement lease
+  // as files/terminal/desktop, but are workspace resources rather than session
+  // events. Re-read the capability document on their canonical workspace
+  // invalidation so the one machine chip cannot remain "Offline" beside a live
+  // browser/computer (or remain "Live" after the final interaction holder ends).
+  // This is a read-only negotiation: it never acquires a holder or wakes a box.
+  useEffect(() => {
+    if (workspaceInteractionEvent?.workspaceId !== workspaceId) return;
+    renegotiate();
+  }, [workspaceId, workspaceInteractionEvent, renegotiate]);
+
   // The cold-paint data source: the latest turn-end capture, fetched with a single
   // api round-trip on mount (no machine). Feeds the Files tree + the Changes/Git
   // diff immediately; a warm box reconciles live without discarding the capture
@@ -748,6 +768,7 @@ export function useSandboxWorkspaceTabs(
               result={terminal}
               terminalCapability={capabilities?.Terminal ?? null}
               onActivate={() => requestWarmIntent("warmTerminal")}
+              onReconnectNeeded={caps.renegotiate}
               showHeader
               shell={capabilities?.Terminal.shell ?? undefined}
               liveness={liveness}
@@ -772,6 +793,15 @@ export function useSandboxWorkspaceTabs(
               client={client}
               workspaceId={workspaceId}
               sessionId={sessionId}
+              // WorkspaceDock mounts a heavy surface only after its first visit,
+              // then keeps it mounted behind `hidden` when another tab is
+              // selected. Keep that already-visited surface enabled while the
+              // dock itself remains open: tearing down its controller + media
+              // socket on every Browser↔Computer tab switch turned an ordinary
+              // click into a multi-second cold reconnect. This does not eagerly
+              // start BrowserViewer—the lazy panel is still unmounted until the
+              // user/agent first visits it.
+              enabled={workspaceVisible}
               onNotify={onNotify}
               {...(desktopEnabled ? { createLinkedComputer } : {})}
               {...(onOpenComputerSession ? { onOpenComputer: onOpenComputerSession } : {})}
@@ -796,6 +826,11 @@ export function useSandboxWorkspaceTabs(
               client={client}
               workspaceId={workspaceId}
               sessionId={sessionId}
+              // Same visited-surface lifetime as Browser above. A live noVNC
+              // connection survives tab switches and ResizeObserver re-fits its
+              // canvas when this hidden panel becomes visible again, making the
+              // second and later Computer opens local-machine fast.
+              enabled={workspaceVisible}
               onNotify={onNotify}
               requestedComputerSessionId={requestedComputerSessionId}
               requestedComputerRequestId={requestedComputerRequestId}
@@ -828,6 +863,8 @@ export function useSandboxWorkspaceTabs(
     onNotify,
     browserWebSocketFactory,
     computerWebSocketFactory,
+    workspaceVisible,
+    resolvedActiveTab,
     client,
     workspaceId,
     liveness,
@@ -979,6 +1016,7 @@ export function SandboxWorkspace(props: SandboxWorkspaceProps): ReactNode {
     ...(surfaces ? { surfaces } : {}),
     ...(initialTab ? { initialTab } : {}),
     activeTab: activeTabHint,
+    workspaceVisible: collapsed !== true,
     ...(onNotify ? { onNotify } : {}),
     ...(browserWebSocketFactory ? { browserWebSocketFactory } : {}),
     ...(computerWebSocketFactory ? { computerWebSocketFactory } : {}),
@@ -1057,13 +1095,13 @@ function MachineStateChip({ chip }: { chip: MachineChip }) {
     <div
       role="status"
       aria-label={`Machine: ${chip.label}`}
-      className="inline-flex min-h-7 items-center gap-1.5 px-2 py-1 text-og-xs font-medium text-og-fg-muted max-[1023px]:min-h-11 pointer-coarse:min-h-11"
+      className="inline-flex min-h-7 min-w-0 items-center gap-1.5 px-2 py-1 text-og-xs font-medium text-og-fg-muted max-[1023px]:min-h-11 pointer-coarse:min-h-11"
     >
       <span
         className={cn("size-1.5 shrink-0 rounded-full", chipDotClass(chip.state))}
         aria-hidden
       />
-      <span className="max-w-[11rem] truncate">{chip.label}</span>
+      <span className="min-w-0 max-w-[11rem] truncate">{chip.label}</span>
     </div>
   );
 }

package/src/components/workspace-dock.tsx

@@ -536,6 +536,8 @@ function DockChrome({
   /** Right-aligned chrome controls (maximize / collapse, or the overlay close). */
   controls: ReactNode;
 }) {
+  const chromeRef = useRef<HTMLDivElement | null>(null);
+  const [compact, setCompact] = useState(false);
   const active = tabs.find((t) => t.id === current) ?? tabs[0];
   const tabsetId = useId();
   const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
@@ -544,6 +546,31 @@ function DockChrome({
   const [tabOverflow, setTabOverflow] = useState({ start: false, end: false });
   const activeId = active?.id ?? "";
   const activeTabIndex = tabs.findIndex((tab) => tab.id === activeId);
+
+  // A desktop dock can be much narrower than the viewport after the user drags
+  // its separator. Viewport breakpoints therefore cannot protect the tab strip:
+  // the status + controls used to squeeze it to zero width, leaving visible but
+  // unclickable ARIA tabs. At narrow *dock* widths, give status/controls their
+  // own row and the horizontally scrollable tabs the complete second row.
+  useDockLayoutEffect(() => {
+    const node = chromeRef.current;
+    if (!node) return;
+    const update = () => {
+      const desktop =
+        typeof window.matchMedia !== "function" || window.matchMedia("(min-width: 1024px)").matches;
+      const next = desktop && node.getBoundingClientRect().width < 420;
+      setCompact((previous) => (previous === next ? previous : next));
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", update);
+      return () => window.removeEventListener("resize", update);
+    }
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
   const keepActiveTabVisible = useCallback(() => {
     const selected = activeTabIndex >= 0 ? tabRefs.current[activeTabIndex] : null;
     selected?.scrollIntoView({ block: "nearest", inline: "nearest" });
@@ -631,8 +658,22 @@ function DockChrome({
 
   return (
     <>
-      <div className="grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-2 border-b border-og-border px-1.5 py-1 max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto] max-[1023px]:gap-y-0 max-[1023px]:px-2 max-[1023px]:pb-1 max-[1023px]:pt-0 min-[640px]:max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto_auto]">
-        <div className="flex min-w-0 shrink-0 items-center max-[1023px]:min-h-11 min-[640px]:max-[1023px]:col-start-1 min-[640px]:max-[1023px]:row-start-1">
+      <div
+        ref={chromeRef}
+        data-dock-chrome
+        data-compact={compact ? "true" : undefined}
+        className={cn(
+          "grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-2 border-b border-og-border px-1.5 py-1 max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto] max-[1023px]:gap-y-0 max-[1023px]:px-2 max-[1023px]:pb-1 max-[1023px]:pt-0 min-[640px]:max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto_auto]",
+          compact && "gap-y-1",
+        )}
+        style={compact ? { gridTemplateColumns: "minmax(0, 1fr) auto" } : undefined}
+      >
+        <div
+          className={cn(
+            "flex min-w-0 shrink-0 items-center max-[1023px]:min-h-11 min-[640px]:max-[1023px]:col-start-1 min-[640px]:max-[1023px]:row-start-1",
+            compact && "hidden",
+          )}
+        >
           {leading ?? (
             <span className="hidden truncate px-1 text-og-sm font-semibold text-og-fg max-[1023px]:inline">
               Workspace
@@ -648,7 +689,10 @@ function DockChrome({
             absorbing any unusually long host-injected labels. */}
         <div
           ref={tabListRef}
-          className="flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-[1023px]:col-span-3 max-[1023px]:row-start-2 max-[1023px]:w-full min-[640px]:max-[1023px]:col-span-1 min-[640px]:max-[1023px]:col-start-2 min-[640px]:max-[1023px]:row-start-1"
+          className={cn(
+            "flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-[1023px]:col-span-3 max-[1023px]:row-start-2 max-[1023px]:w-full min-[640px]:max-[1023px]:col-span-1 min-[640px]:max-[1023px]:col-start-2 min-[640px]:max-[1023px]:row-start-1",
+            compact && "col-span-2 col-start-1 row-start-2 w-full",
+          )}
           role="tablist"
           aria-orientation="horizontal"
           style={{
@@ -683,10 +727,20 @@ function DockChrome({
             </button>
           ))}
         </div>
-        <div className="flex min-w-0 shrink-0 items-center justify-self-end min-[640px]:max-[1023px]:col-start-3 min-[640px]:max-[1023px]:row-start-1">
+        <div
+          className={cn(
+            "flex min-w-0 shrink-0 items-center justify-self-end min-[640px]:max-[1023px]:col-start-3 min-[640px]:max-[1023px]:row-start-1",
+            compact && "col-start-1 row-start-1 justify-self-start",
+          )}
+        >
           {accessory}
         </div>
-        <div className="flex shrink-0 items-center gap-0.5 text-og-fg-subtle min-[640px]:max-[1023px]:col-start-4 min-[640px]:max-[1023px]:row-start-1">
+        <div
+          className={cn(
+            "flex shrink-0 items-center gap-0.5 text-og-fg-subtle min-[640px]:max-[1023px]:col-start-4 min-[640px]:max-[1023px]:row-start-1",
+            compact && "col-start-2 row-start-1",
+          )}
+        >
           {controls}
         </div>
       </div>