@opengeni/react 0.11.0 → 0.13.0

package/src/components/chat-composer.tsx

@@ -1,14 +1,41 @@
 import type { ClientModel, SessionStatus } from "@opengeni/sdk";
-import { ArrowUpIcon, FileIcon, ImageIcon, LoaderCircleIcon, PaperclipIcon, RotateCwIcon, SquareIcon, XIcon } from "lucide-react";
+import {
+  ArrowUpIcon,
+  FileIcon,
+  ImageIcon,
+  LoaderCircleIcon,
+  PaperclipIcon,
+  PlayIcon,
+  RotateCwIcon,
+  SquareIcon,
+  XIcon,
+} from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useEffect, useId, useMemo, useRef, useState, type ChangeEvent, type ClipboardEvent, type DragEvent, type KeyboardEvent, type ReactNode, type RefObject } from "react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ClipboardEvent,
+  type DragEvent,
+  type KeyboardEvent,
+  type ReactNode,
+  type RefObject,
+} from "react";
 import { argHint } from "../commands/registry";
 import type { Notice, SlashCommand } from "../commands/types";
 import type { ComposerState } from "../hooks/use-composer";
-import { shouldSubmitOnKey } from "../hooks/use-composer";
+import { composerModeForKey, shouldSubmitOnKey } from "../hooks/use-composer";
 import type { UseFileAttachmentsResult } from "../hooks/use-file-attachments";
 import { defaultCommands } from "../commands/registry";
-import { useSlashCommands, type ConfirmState, type SlashCommandContext } from "../hooks/use-slash-commands";
+import {
+  useSlashCommands,
+  type ConfirmState,
+  type SlashCommandContext,
+} from "../hooks/use-slash-commands";
 import { cn } from "../lib/cn";
 import { formatBytes } from "../lib/format";
 import { CommandPalette } from "./command-palette";
@@ -68,7 +95,13 @@ export type ChatComposerProps = {
   onClearView?: (() => void) | undefined;
 };
 
-const ACTIVE_STATUSES: ReadonlySet<SessionStatus> = new Set(["queued", "running"]);
+const ACTIVE_STATUSES: ReadonlySet<SessionStatus> = new Set([
+  "queued",
+  "running",
+  "requires_action",
+  "recovering",
+  "waiting_capacity",
+]);
 
 /**
  * The chat composer — the only human-to-agent input surface. Plain chat in,
@@ -255,7 +288,11 @@ export function ChatComposer({
       if (commandDraftBlocked) {
         // Dismissed palette + a "/command" draft: don't send it as chat. Nudge
         // the operator to re-open the palette (any edit re-opens it) or clear it.
-        setNotice({ tone: "error", message: "That's a slash command — press Enter in the command list to run it, or edit the line to send a message." });
+        setNotice({
+          tone: "error",
+          message:
+            "That's a slash command — press Enter in the command list to run it, or edit the line to send a message.",
+        });
         return;
       }
       if (blockedByUpload) {
@@ -263,7 +300,7 @@ export function ChatComposer({
         // depart without them. The send button is disabled in the same state.
         return;
       }
-      void composer.send();
+      void composer.send(undefined, composerModeForKey(event));
     }
   };
 
@@ -300,12 +337,23 @@ export function ChatComposer({
     [commands, commandContext],
   );
 
-  const activeNotice = notice ?? (composer.error ? { tone: "error" as const, message: composer.error.message || "Sending failed — your draft is still here. Try again." } : null);
+  const activeNotice =
+    notice ??
+    (composer.error
+      ? {
+          tone: "error" as const,
+          message:
+            composer.error.message || "Sending failed — your draft is still here. Try again.",
+        }
+      : null);
 
   return (
     // Respect the iOS home-indicator inset so the sticky composer never sits
     // under it (0 on non-notch devices and desktop, so it's inert there).
-    <div className={cn("og-root", className)} style={{ paddingBottom: "env(safe-area-inset-bottom)" }}>
+    <div
+      className={cn("og-root", className)}
+      style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
+    >
       <div className="relative">
         {paletteEnabled ? (
           <CommandPalette
@@ -374,10 +422,18 @@ export function ChatComposer({
             disabled={disabled}
             autoFocus={autoFocus}
             aria-label="Message the agent"
-            role={paletteEnabled && palette.open ? "combobox" : undefined}
-            aria-expanded={paletteEnabled ? palette.open : undefined}
+            aria-keyshortcuts="Enter Meta+Enter Control+Enter Shift+Enter"
+            // A multiline textarea cannot legally take the combobox role or
+            // aria-expanded. It remains a native textbox and advertises the
+            // popup as list autocomplete; controls/active-descendant exist
+            // only while the suggestion list itself exists.
+            aria-autocomplete={paletteEnabled ? "list" : undefined}
             aria-controls={paletteEnabled && palette.open ? listboxId : undefined}
-            aria-activedescendant={paletteEnabled && palette.open ? `${listboxId}-option-${palette.highlight}` : undefined}
+            aria-activedescendant={
+              paletteEnabled && palette.open
+                ? `${listboxId}-option-${palette.highlight}`
+                : undefined
+            }
             className={cn(
               // Font size steps up to 16px below `md` so iOS never zooms the
               // viewport on focus; desktop keeps the 15px og-md rhythm.
@@ -426,7 +482,7 @@ export function ChatComposer({
                         className={cn(
                           "inline-flex size-8 items-center justify-center rounded-og-md",
                           "text-og-fg-muted transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
-                          "disabled:cursor-not-allowed disabled:opacity-50",
+                          "disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:size-11",
                         )}
                       >
                         <PaperclipIcon className="size-4" />
@@ -445,12 +501,12 @@ export function ChatComposer({
                 </span>
               ) : (
                 <span className="min-w-0 flex-1 px-1.5 text-og-xs text-og-fg-subtle max-sm:hidden">
-                  {hint ?? "Enter to send · Shift+Enter for a new line · / for commands"}
+                  {hint ?? "Enter to queue · Cmd/Ctrl+Enter to steer · Shift+Enter for a new line"}
                 </span>
               )}
               <span className="ml-auto flex shrink-0 items-center gap-1.5">
                 <AnimatePresence initial={false}>
-                  {active ? (
+                  {active || status === "paused" ? (
                     <motion.button
                       key="stop"
                       type="button"
@@ -458,10 +514,16 @@ export function ChatComposer({
                       animate={{ opacity: 1, scale: 1 }}
                       exit={{ opacity: 0, scale: 0.8 }}
                       transition={{ duration: 0.15, ease: "easeOut" }}
-                      onClick={() => void composer.interrupt()}
-                      disabled={composer.interrupting}
-                      aria-label="Stop the current turn"
-                      title="Stop the current turn"
+                      onClick={() =>
+                        void (status === "paused" ? composer.resume() : composer.pause())
+                      }
+                      disabled={composer.pausing || composer.resuming}
+                      aria-label={status === "paused" ? "Resume the session" : "Pause the session"}
+                      title={
+                        status === "paused"
+                          ? "Resume the current inference before queued prompts"
+                          : "Pause the session; queued prompts are preserved"
+                      }
                       className={cn(
                         "inline-flex size-8 items-center justify-center rounded-og-md border border-og-border pointer-coarse:size-11",
                         "bg-og-surface-2 text-og-fg-muted transition-colors duration-150",
@@ -469,8 +531,10 @@ export function ChatComposer({
                         "disabled:opacity-50",
                       )}
                     >
-                      {composer.interrupting ? (
+                      {composer.pausing || composer.resuming ? (
                         <LoaderCircleIcon className="size-3.5 animate-og-spin" />
+                      ) : status === "paused" ? (
+                        <PlayIcon className="size-3.5 fill-current" />
                       ) : (
                         <SquareIcon className="size-3 fill-current" />
                       )}
@@ -487,6 +551,7 @@ export function ChatComposer({
                   }}
                   disabled={!canSend || disabled === true || commandDraftBlocked}
                   aria-label="Send message"
+                  title="Queue message (Enter); steer with Cmd/Ctrl+Enter"
                   className={cn(
                     "inline-flex size-8 items-center justify-center rounded-og-md pointer-coarse:size-11",
                     "bg-og-accent text-og-accent-fg shadow-og-sm",
@@ -495,7 +560,11 @@ export function ChatComposer({
                     "disabled:cursor-not-allowed disabled:bg-og-surface-3 disabled:text-og-fg-subtle disabled:shadow-none",
                   )}
                 >
-                  {composer.sending ? <LoaderCircleIcon className="size-4 animate-og-spin" /> : <ArrowUpIcon className="size-4" />}
+                  {composer.sending ? (
+                    <LoaderCircleIcon className="size-4 animate-og-spin" />
+                  ) : (
+                    <ArrowUpIcon className="size-4" />
+                  )}
                 </button>
               </span>
             </div>
@@ -503,9 +572,7 @@ export function ChatComposer({
         </div>
       </div>
       <AnimatePresence>
-        {helpOpen ? (
-          <HelpPanel commands={helpCommands} onClose={() => setHelpOpen(false)} />
-        ) : null}
+        {helpOpen ? <HelpPanel commands={helpCommands} onClose={() => setHelpOpen(false)} /> : null}
       </AnimatePresence>
       <AnimatePresence>
         {activeNotice ? (
@@ -521,7 +588,10 @@ export function ChatComposer({
             onAnimationComplete={() => {
               if (activeNotice.tone === "ok") {
                 // Auto-dismiss success notices after a beat.
-                window.setTimeout(() => setNotice((current) => (current === activeNotice ? null : current)), 2400);
+                window.setTimeout(
+                  () => setNotice((current) => (current === activeNotice ? null : current)),
+                  2400,
+                );
               }
             }}
           >
@@ -608,7 +678,11 @@ function ConfirmBar({
  * in-progress upload does), and removing it clears the way. Styled with the
  * package's og-* tokens so it themes in any consumer.
  */
-function AttachmentChips({ attachments, onRemove, onRetry }: {
+function AttachmentChips({
+  attachments,
+  onRemove,
+  onRetry,
+}: {
   attachments: UseFileAttachmentsResult["attachments"];
   onRemove: (id: string) => void;
   onRetry?: ((id: string) => void) | undefined;
@@ -617,21 +691,28 @@ function AttachmentChips({ attachments, onRemove, onRetry }: {
     <div className="flex flex-wrap gap-2 border-b border-og-border px-3 py-2">
       {attachments.map((attachment) => {
         const failed = attachment.status === "failed";
-        const statusText = attachment.status === "uploading"
-          ? "Uploading"
-          : failed
-            ? attachment.error || "Upload failed"
-            : formatBytes(attachment.sizeBytes);
+        const statusText =
+          attachment.status === "uploading"
+            ? "Uploading"
+            : failed
+              ? attachment.error || "Upload failed"
+              : formatBytes(attachment.sizeBytes);
         return (
           <div
             key={attachment.id}
             className={cn(
               "flex min-w-0 max-w-[240px] items-center gap-2 rounded-og-md border px-2 py-1.5 text-og-sm",
-              failed ? "border-og-status-failed/40 bg-og-status-failed/10" : "border-og-border bg-og-surface-2",
+              failed
+                ? "border-og-status-failed/40 bg-og-status-failed/10"
+                : "border-og-border bg-og-surface-2",
             )}
           >
             {attachment.previewUrl ? (
-              <img src={attachment.previewUrl} alt="" className="size-8 shrink-0 rounded object-cover" />
+              <img
+                src={attachment.previewUrl}
+                alt=""
+                className="size-8 shrink-0 rounded object-cover"
+              />
             ) : attachment.contentType.startsWith("image/") ? (
               <ImageIcon className="size-4 shrink-0 text-og-fg-muted" />
             ) : (
@@ -640,18 +721,23 @@ function AttachmentChips({ attachments, onRemove, onRetry }: {
             <div className="min-w-0 flex-1">
               <div className="truncate font-medium text-og-fg">{attachment.name}</div>
               <div
-                className={cn("truncate text-og-xs", failed ? "text-og-status-failed" : "text-og-fg-subtle")}
+                className={cn(
+                  "truncate text-og-xs",
+                  failed ? "text-og-status-failed" : "text-og-fg-subtle",
+                )}
                 title={failed ? statusText : undefined}
               >
                 {statusText}
               </div>
             </div>
-            {attachment.status === "uploading" ? <LoaderCircleIcon className="size-3.5 shrink-0 animate-og-spin" /> : null}
+            {attachment.status === "uploading" ? (
+              <LoaderCircleIcon className="size-3.5 shrink-0 animate-og-spin" />
+            ) : null}
             {failed && onRetry ? (
               <button
                 type="button"
                 onClick={() => onRetry(attachment.id)}
-                className="shrink-0 rounded-og-xs p-1 text-og-fg-muted hover:bg-og-surface-1 hover:text-og-fg pointer-coarse:size-8"
+                className="shrink-0 rounded-og-xs p-1 text-og-fg-muted hover:bg-og-surface-1 hover:text-og-fg pointer-coarse:size-10"
                 aria-label={`Retry ${attachment.name}`}
                 title="Retry upload"
               >
@@ -661,7 +747,7 @@ function AttachmentChips({ attachments, onRemove, onRetry }: {
             <button
               type="button"
               onClick={() => onRemove(attachment.id)}
-              className="shrink-0 rounded-og-xs p-1 text-og-fg-muted hover:bg-og-surface-1 hover:text-og-fg pointer-coarse:size-8"
+              className="shrink-0 rounded-og-xs p-1 text-og-fg-muted hover:bg-og-surface-1 hover:text-og-fg pointer-coarse:size-10"
               aria-label={`Remove ${attachment.name}`}
             >
               <XIcon className="size-3.5" />
@@ -674,7 +760,13 @@ function AttachmentChips({ attachments, onRemove, onRetry }: {
 }
 
 /** The in-composer /help panel, rendered entirely from the registry. */
-function HelpPanel({ commands, onClose }: { commands: readonly SlashCommand[]; onClose: () => void }) {
+function HelpPanel({
+  commands,
+  onClose,
+}: {
+  commands: readonly SlashCommand[];
+  onClose: () => void;
+}) {
   return (
     <motion.div
       initial={{ opacity: 0, height: 0 }}
@@ -684,7 +776,11 @@ function HelpPanel({ commands, onClose }: { commands: readonly SlashCommand[]; o
     >
       <div className="flex items-center justify-between border-b border-og-border px-3 py-1.5">
         <span className="text-og-sm font-medium text-og-fg">Commands</span>
-        <button type="button" onClick={onClose} className="text-og-xs text-og-fg-subtle hover:text-og-fg">
+        <button
+          type="button"
+          onClick={onClose}
+          className="text-og-xs text-og-fg-subtle hover:text-og-fg"
+        >
           Close
         </button>
       </div>

package/src/components/code-editor.tsx

@@ -106,6 +106,10 @@ export type CodeEditorProps = {
   initialContents: string;
   /** Persist the current buffer. Resolves when the write lands; rejects to surface an error. */
   onSave: (contents: string) => Promise<unknown>;
+  /** Fired once when the buffer FIRST diverges from its baseline (the first real
+   *  keystroke) — the wake-on-edit intent. The host warms the box on this so the
+   *  eventual save lands fast; merely opening the file for reading never fires it. */
+  onEditIntent?: (() => void) | undefined;
   /** Read-only mode (e.g. a truncated/too-large file shown for reference only). */
   readOnly?: boolean | undefined;
   themeType?: "dark" | "light" | undefined;
@@ -132,6 +136,7 @@ export function CodeEditor({
   path,
   initialContents,
   onSave,
+  onEditIntent,
   readOnly = false,
   themeType = "dark",
   loading,
@@ -155,18 +160,35 @@ export function CodeEditor({
   // Reload the buffer when the file identity changes. Guard on initialContents
   // too so an external refresh of the SAME path (e.g. fs.changed re-read) reseeds
   // a clean buffer — but only when the user hasn't got unsaved edits in flight.
+  // Fire the wake-on-edit intent at most once per opened file — reset on re-seed.
+  const editIntentFiredRef = useRef(false);
   const lastSeed = useRef<{ path: string; contents: string }>({ path, contents: initialContents });
   useEffect(() => {
     const seedChanged =
       lastSeed.current.path !== path || lastSeed.current.contents !== initialContents;
     if (!seedChanged) return;
     lastSeed.current = { path, contents: initialContents };
+    editIntentFiredRef.current = false;
     setValue(initialContents);
     setBaseline(initialContents);
     setSaveError(null);
     setSavedTick(false);
   }, [path, initialContents]);
 
+  // Record a buffer change: the FIRST divergence from the baseline is the edit
+  // intent that warms the box (idempotent — latched per opened file).
+  const noteEdit = useCallback(
+    (next: string) => {
+      setValue(next);
+      setSavedTick(false);
+      if (!editIntentFiredRef.current && next !== baseline) {
+        editIntentFiredRef.current = true;
+        onEditIntent?.();
+      }
+    },
+    [baseline, onEditIntent],
+  );
+
   // 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]);
@@ -257,16 +279,7 @@ export function CodeEditor({
   if (failed) {
     return (
       <div className={cn("flex h-full min-h-0 flex-col", className)}>
-        {fallback ?? (
-          <PlainTextarea
-            value={value}
-            readOnly={readOnly}
-            onChange={(next) => {
-              setValue(next);
-              setSavedTick(false);
-            }}
-          />
-        )}
+        {fallback ?? <PlainTextarea value={value} readOnly={readOnly} onChange={noteEdit} />}
       </div>
     );
   }
@@ -282,11 +295,7 @@ export function CodeEditor({
         <span
           className={cn(
             "size-1.5 shrink-0 rounded-full transition-colors",
-            readOnly
-              ? "bg-transparent"
-              : dirty
-                ? "bg-og-status-running"
-                : "bg-og-status-idle",
+            readOnly ? "bg-transparent" : dirty ? "bg-og-status-running" : "bg-og-status-idle",
           )}
           title={readOnly ? "read-only" : dirty ? "unsaved changes" : "saved"}
         />
@@ -303,15 +312,9 @@ export function CodeEditor({
               {saveError.message}
             </span>
           )}
-          {!saveError && savedTick && (
-            <span className="text-og-xs text-og-status-idle">
-              Saved
-            </span>
-          )}
+          {!saveError && savedTick && <span className="text-og-xs text-og-status-idle">Saved</span>}
           {readOnly ? (
-            <span className="text-og-xs uppercase tracking-wide text-og-fg-subtle">
-              Read-only
-            </span>
+            <span className="text-og-xs uppercase tracking-wide text-og-fg-subtle">Read-only</span>
           ) : (
             <button
               type="button"
@@ -348,14 +351,7 @@ export function CodeEditor({
             extensions={cmExtensions}
             height="100%"
             className="og-cm-editor min-h-full text-og-sm"
-            onChange={
-              readOnly
-                ? undefined
-                : (next: string) => {
-                    setValue(next);
-                    setSavedTick(false);
-                  }
-            }
+            onChange={readOnly ? undefined : noteEdit}
           />
         </Suspense>
       </div>
@@ -390,9 +386,5 @@ function PlainTextarea({
 }
 
 function EditorSkeleton() {
-  return (
-    <div className="p-3 text-og-sm text-og-fg-subtle">
-      Loading editor…
-    </div>
-  );
+  return <div className="p-3 text-og-sm text-og-fg-subtle">Loading editor…</div>;
 }

package/src/components/command-palette.tsx

@@ -23,7 +23,15 @@ export type CommandPaletteProps = {
  * the opengeni#46 design tokens. Full keyboard nav lives in useSlashCommands;
  * this component is presentational + aria.
  */
-export function CommandPalette({ open, items, highlight, onHighlight, onRun, argHintText, listboxId }: CommandPaletteProps) {
+export function CommandPalette({
+  open,
+  items,
+  highlight,
+  onHighlight,
+  onRun,
+  argHintText,
+  listboxId,
+}: CommandPaletteProps) {
   return (
     <AnimatePresence>
       {open ? (
@@ -61,14 +69,25 @@ export function CommandPalette({ open, items, highlight, onHighlight, onRun, arg
                   className={cn(
                     "mx-1 flex cursor-pointer items-center gap-2 rounded-og-md px-2.5 py-1.5",
                     "transition-colors duration-100",
-                    selected ? "bg-og-accent/15 text-og-fg" : "text-og-fg-muted hover:bg-og-surface-3",
+                    selected
+                      ? "bg-og-accent/15 text-og-fg"
+                      : "text-og-fg-muted hover:bg-og-surface-3",
                   )}
                 >
                   <span className="flex min-w-0 items-baseline gap-1.5">
-                    <span className={cn("font-mono text-[13px]", selected ? "text-og-accent" : "text-og-fg")}>
+                    <span
+                      className={cn(
+                        "font-mono text-[13px]",
+                        selected ? "text-og-accent" : "text-og-fg",
+                      )}
+                    >
                       /{command.name}
                     </span>
-                    {hint ? <span className="truncate font-mono text-[11px] text-og-fg-subtle">{hint}</span> : null}
+                    {hint ? (
+                      <span className="truncate font-mono text-[11px] text-og-fg-subtle">
+                        {hint}
+                      </span>
+                    ) : null}
                   </span>
                   <span className="ml-auto flex items-center gap-1.5">
                     {command.danger ? (
@@ -76,7 +95,9 @@ export function CommandPalette({ open, items, highlight, onHighlight, onRun, arg
                         danger
                       </span>
                     ) : null}
-                    <span className="truncate text-[12px] text-og-fg-subtle max-sm:hidden">{command.description}</span>
+                    <span className="truncate text-[12px] text-og-fg-subtle max-sm:hidden">
+                      {command.description}
+                    </span>
                   </span>
                 </li>
               );

package/src/components/desktop-viewer.tsx

@@ -1,4 +1,8 @@
-import type { CapabilityUnavailableReason, DesktopRfbFactory, DesktopStreamCapability } from "@opengeni/sdk";
+import type {
+  CapabilityUnavailableReason,
+  DesktopRfbFactory,
+  DesktopStreamCapability,
+} from "@opengeni/sdk";
 import { LoaderCircleIcon, MonitorIcon, MousePointerClickIcon, WifiOffIcon } from "lucide-react";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
@@ -214,8 +218,7 @@ export function DesktopViewer({
   // Do NOT open a socket while the viewer-cap (429) notice is showing — the slot
   // is already exhausted, so connecting would only burn a doomed attempt (and in
   // tests leak an unhandled ws error from the never-resolving tunnel URL).
-  const connectCapability =
-    !transportNull && !needsAck && !viewerCapReached ? capability : null;
+  const connectCapability = !transportNull && !needsAck && !viewerCapReached ? capability : null;
   const stream = useDesktopStream({
     capability: connectCapability,
     containerRef,
@@ -309,7 +312,14 @@ export function DesktopViewer({
     if (!hasLiveUrl || connected || stream.error || connectTimeoutMs <= 0) return;
     const timer = setTimeout(() => setConnectTimedOut(true), connectTimeoutMs);
     return () => clearTimeout(timer);
-  }, [hasLiveUrl, connected, connectTimeoutMs, connectCapability?.url, stream.error, reconnectNonce]);
+  }, [
+    hasLiveUrl,
+    connected,
+    connectTimeoutMs,
+    connectCapability?.url,
+    stream.error,
+    reconnectNonce,
+  ]);
 
   const reconnect = () => {
     setConnectTimedOut(false);
@@ -338,11 +348,15 @@ export function DesktopViewer({
     case "viewer_cap":
       overlay =
         renderViewerCap?.() ??
-        defaultNotice("Too many viewers", "This session has reached its live-viewer limit. Try again shortly.");
+        defaultNotice(
+          "Too many viewers",
+          "This session has reached its live-viewer limit. Try again shortly.",
+        );
       break;
     case "unavailable":
       overlay =
-        renderUnavailable?.(reason) ?? defaultNotice("Desktop unavailable", unavailableCopy(reason));
+        renderUnavailable?.(reason) ??
+        defaultNotice("Desktop unavailable", unavailableCopy(reason));
       break;
     case "consent":
       overlay = renderConsentGate ? (
@@ -362,7 +376,11 @@ export function DesktopViewer({
       );
       break;
     case "error":
-      overlay = defaultNotice("Desktop disconnected", stream.error?.message ?? "The stream dropped.", reconnect);
+      overlay = defaultNotice(
+        "Desktop disconnected",
+        stream.error?.message ?? "The stream dropped.",
+        reconnect,
+      );
       break;
     case "connecting":
     case "connected":
@@ -511,9 +529,7 @@ function TakeControlCallToAction({
           <MousePointerClickIcon className="size-5" strokeWidth={2} />
         </span>
         <span className="flex flex-col items-start leading-tight">
-          <span className="text-og-base font-semibold text-og-fg">
-            Take control
-          </span>
+          <span className="text-og-base font-semibold text-og-fg">Take control</span>
           <span className="text-og-xs text-og-fg-subtle">
             {disabled && disabledReason ? disabledReason : "Drive the mouse & keyboard"}
           </span>
@@ -594,10 +610,7 @@ function unavailableCopy(reason: CapabilityUnavailableReason | null): string {
 function WarmingNotice({ onRetry }: { onRetry?: (() => void) | undefined }) {
   return (
     <div className="flex max-w-sm flex-col items-center gap-3 rounded-og-lg border border-og-border bg-og-bg/90 p-5 text-center text-og-base text-og-fg backdrop-blur-sm">
-      <LoaderCircleIcon
-        className="size-7 animate-og-spin text-og-accent"
-        strokeWidth={1.5}
-      />
+      <LoaderCircleIcon className="size-7 animate-og-spin text-og-accent" strokeWidth={1.5} />
       <div className="space-y-1">
         <div className="font-medium">Warming the sandbox…</div>
         <p className="text-og-sm text-og-fg-subtle">
@@ -622,8 +635,8 @@ function DefaultConsentGate({ shared, onAccept }: { shared: boolean; onAccept: (
     <div className="max-w-sm rounded-og-lg border border-og-border bg-og-bg p-4 text-center text-og-base text-og-fg">
       <div className="mb-1 font-medium">Watch the live desktop?</div>
       <p className="mb-3 text-og-sm text-og-fg-subtle">
-        The desktop pixel stream is <strong>un-redacted</strong> — it can show secrets the agent prints
-        on screen.
+        The desktop pixel stream is <strong>un-redacted</strong> — it can show secrets the agent
+        prints on screen.
         {shared
           ? " This sandbox is shared: you'll also see other sessions' agents on the same screen."
           : ""}