feat(terminal): refactor runtime and add mobile workspace (#2280)

Replace the legacy terminal flow with a shared authenticated WebSocket
runtime used across web, desktop, relay, and mobile surfaces.

- introduce the v3 terminal protocol with scoped attachments, snapshots,
  ordered output, bounded replay history, reconnects, and explicit lifecycle
- harden PTY creation, restart, resize, close, force-kill, idle cleanup,
  shell selection, login mode, environment sanitization, and appearance sync
- add runtime-aware terminal APIs with relay authentication and Electron parity
- add a fullscreen mobile terminal workspace with touch scrolling,
  long-press selection, safe-area controls, quick keys, and Ctrl/Alt input
- add terminal selection attachments, preview detection, project actions,
  shell settings, and localized UI
- harden Ghostty rendering, resize recovery, Unicode handling, block
  characters, line height, and stale-row behavior
- remove the obsolete terminal SSE path and update reverse-proxy guidance
- expand terminal runtime, transport, input, selection, and store coverage
- avoid duplicate web builds when preparing mobile assets in root CI builds

packages/ui/src/apps/MobileApp.tsx

@@ -13,6 +13,7 @@ import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo';
 import { ProviderLogo } from '@/components/ui/ProviderLogo';
 import { ChatView } from '@/components/views/ChatView';
 import { SettingsView } from '@/components/views/SettingsView';
+import { TerminalView } from '@/components/views/TerminalView';
 import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
 import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
 import { RuntimeAPIProvider } from '@/contexts/RuntimeAPIProvider';
@@ -658,7 +659,7 @@ const getProjectLabel = (path: string): string => {
 };
 
 type OverflowItem = {
-  key: 'files' | 'changes' | 'mcp' | 'instances' | 'update' | 'settings';
+  key: 'files' | 'changes' | 'terminal' | 'mcp' | 'instances' | 'update' | 'settings';
   icon?: IconName;
   iconNode?: React.ReactNode;
   label: string;
@@ -2064,6 +2065,7 @@ const MobileShell: React.FC<{ onActiveConnectionDeleted: () => void }> = ({ onAc
   const [sessionsSheetOpen, setSessionsSheetOpen] = React.useState(false);
   const [filesOpen, setFilesOpen] = React.useState(false);
   const [changesOpen, setChangesOpen] = React.useState(false);
+  const [terminalOpen, setTerminalOpen] = React.useState(false);
   const [mcpOpen, setMcpOpen] = React.useState(false);
   const [instancesOpen, setInstancesOpen] = React.useState(false);
   const [isMcpRefreshing, setIsMcpRefreshing] = React.useState(false);
@@ -2340,6 +2342,12 @@ const MobileShell: React.FC<{ onActiveConnectionDeleted: () => void }> = ({ onAc
           },
         );
       }
+      items.push({
+        key: 'terminal',
+        icon: 'terminal',
+        label: t('mobile.menu.terminal'),
+        onSelect: () => setTerminalOpen(true),
+      });
       items.push({
         key: 'mcp',
         iconNode: <McpIcon className="size-5 shrink-0 text-muted-foreground" />,
@@ -2560,6 +2568,21 @@ const MobileShell: React.FC<{ onActiveConnectionDeleted: () => void }> = ({ onAc
           </MobileSurfaceShell>
         ) : null}
 
+        {terminalOpen ? (
+          <MobileSurfaceShell
+            open
+            onClose={() => setTerminalOpen(false)}
+            ariaLabel={t('mobile.menu.terminal')}
+            title={t('mobile.menu.terminal')}
+            disableSwipeDismiss
+            disableEscapeDismiss
+          >
+            <ErrorBoundary>
+              <TerminalView visible />
+            </ErrorBoundary>
+          </MobileSurfaceShell>
+        ) : null}
+
         {mcpOpen ? (
           <MobileOverlayPanel
             open

packages/ui/src/apps/MobileSurfaceShell.tsx

@@ -39,6 +39,8 @@ export type MobileSurfaceShellProps = {
   onBack?: () => void;
   /** If true, disable swipe-down-to-dismiss (e.g. when a nested view should keep gesture for itself). */
   disableSwipeDismiss?: boolean;
+  /** If true, leave Escape available to nested content instead of dismissing the surface. */
+  disableEscapeDismiss?: boolean;
   /** If true, render only the drag handle and let the child render its own header. */
   headerless?: boolean;
   ariaLabel?: string;
@@ -53,6 +55,7 @@ export const MobileSurfaceShell: React.FC<MobileSurfaceShellProps> = ({
   trailing,
   onBack,
   disableSwipeDismiss = false,
+  disableEscapeDismiss = false,
   headerless = false,
   ariaLabel,
   children,
@@ -120,7 +123,7 @@ export const MobileSurfaceShell: React.FC<MobileSurfaceShellProps> = ({
     };
     const focusTimer = window.setTimeout(focusFirstElement, ENTER_DELAY_MS);
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
+      if (event.key === 'Escape' && !disableEscapeDismiss) {
         onCloseRef.current();
         return;
       }
@@ -154,7 +157,7 @@ export const MobileSurfaceShell: React.FC<MobileSurfaceShellProps> = ({
       previousFocusRef.current?.focus?.({ preventScroll: true });
       previousFocusRef.current = null;
     };
-  }, [open]);
+  }, [disableEscapeDismiss, open]);
 
   const handleDragStart = (event: React.TouchEvent<HTMLDivElement>) => {
     if (disableSwipeDismiss) return;
@@ -259,9 +262,13 @@ export const MobileSurfaceShell: React.FC<MobileSurfaceShellProps> = ({
           onTouchEnd={handleDragEnd}
           onTouchCancel={handleDragEnd}
         >
-          <div className="flex items-center justify-center pt-2 pb-1">
-            <span className="h-1 w-10 rounded-full bg-[var(--surface-muted)]" aria-hidden />
-          </div>
+          {disableSwipeDismiss ? (
+            <div className="h-3" />
+          ) : (
+            <div className="flex items-center justify-center pt-2 pb-1">
+              <span className="h-1 w-10 rounded-full bg-[var(--surface-muted)]" aria-hidden />
+            </div>
+          )}
           {!headerless ? (
             <header className="flex h-[var(--oc-header-height,56px)] items-center gap-2 px-3">
               {leading}

packages/ui/src/apps/runtimeEndpointReset.ts

@@ -7,8 +7,10 @@ import { useGlobalSessionsStore } from '@/stores/useGlobalSessionsStore';
 import { useAutoReviewStore } from '@/stores/useAutoReviewStore';
 import { useUIStore } from '@/stores/useUIStore';
 import { usePermissionStore } from '@/stores/permissionStore';
+import { useTerminalStore } from '@/stores/useTerminalStore';
 import { useSessionUIStore } from '@/sync/session-ui-store';
 import { resetStreamingState } from '@/sync/streaming';
+import { syncDesktopSettings } from '@/lib/persistence';
 
 // Same-device transport switch (LAN⇄relay for one paired device): rebind the SDK
 // to the new transport WITHOUT tearing down connection/session state or remounting
@@ -31,6 +33,7 @@ export const resetAppForRuntimeEndpointChange = (detail: RuntimeEndpointChangedD
     useAutoReviewStore.getState().stopRunningRunsForRuntime(detail.previousRuntimeKey);
   }
   disposeTerminalInputTransport();
+  useTerminalStore.getState().clearAll();
   opencodeClient.reconnectToRuntimeBaseUrl();
   useConfigStore.setState({
     providers: [],
@@ -48,4 +51,5 @@ export const resetAppForRuntimeEndpointChange = (detail: RuntimeEndpointChangedD
   useSessionUIStore.getState().restoreForRuntimeSwitch(detail.runtimeKey);
   useUIStore.getState().restoreForRuntimeSwitch(detail.runtimeKey);
   resetStreamingState();
+  queueMicrotask(() => void syncDesktopSettings());
 };