feat(mobile): tablet layout pass and foldable-ready size class (#2569)

The tablet ran the phone layout with a half-finished iPad draft on top: two
custom sidebars, a leftover overflow menu, split Files/Changes header buttons,
and phone-width sheets stretched across a 13" screen. This brings it onto the
phone's navigation model and keeps only the differences a large screen earns.

- Sessions are a persistent resizable left sidebar; the overflow menu is gone
  and its destinations moved into that sidebar's footer (connected instance,
  settings, pending web update) and into the workspace drawer.
- The workspace (Changes / Files / Terminal / Notes / MCP) is the phone's
  drawer everywhere: a resizable right sidebar where the screen can host one
  (up to 900px) and the full-cover drawer otherwise, with its mounted panes —
  an open diff, an edited file, an attached terminal — surviving rotation.
- Header dropdowns are anchored popovers: the recents switcher mirrors the
  usage overlay on the left, and its trigger is sized to the title rather than
  to the free width.
- App-level pages (settings, instances, update, an opened plan) render as
  centered dialogs instead of covering the screen.
- Overlays center on the chat column through published insets, so the model
  and directory pickers no longer sit off-centre; the directory picker also
  stops overriding the shared width clamp.
- Wide chat layout applies to mobile surfaces, where a tablet chat column is
  finally wide enough for the setting to mean anything.

The layout gate is a live size class rather than a device check, so Android
tablets and foldables are covered by the same code:

- `enabled` when the shortest viewport side is at le
  sw600dp). The short side is what makes this a size question instead of a
  device question — a phone reports ~360-430 whichev
  unfolded book foldable ~600+, and folding shut drops back under it. iPads
  also answer on identity, since iPadOS hands out od
- `roomyForPanels` when landscape and at least 1000px wide, which is what it
  takes to host the sidebar, the panel and a readabl
  foldables miss it in BOTH orientations — their long side is barely wider
  than a tablet's short one — so they keep the portr

Every consumer re-decides instead of remembering wha
open sidebar closes if the device folds shut under it. iPad behaviour is
unchanged: its landscape widths all clear the panel
ones do not, exactly as the previous orientation check did.

Hardware keyboards are read natively. iOS reports them through GCKeyboard,
published to the web layer at document start and kep
disconnect and foregrounding; the layer stops inferring once that answers. A
single early publish was not enough — the connect no
already-attached keyboard fires before the page exists, and GameController can
populate late — so the state is re-published across
resume. With a keyboard attached the draft screen keeps its starter chips and
the composer never collapses; tablets skip the colla
Runtimes with no native answer fall back to inferring it from the keyboard
bridge, and only ever conclude "hardware" from silen

Also: sidebar rows no longer sit on a differently ti
footer is no longer clipped by an over-tall content box, the resize handles
moved above the panes' own overlays so they can actu
now-unreachable overflow menu, fullscreen terminal/MCP/notes surfaces and their
locale key are deleted.

Device behaviour is unverified — the tablet layout,
keyboard bridge and the foldable size class have not been exercised on
hardware, and the 600/1000 thresholds are derived fr
rather than measured on a foldable.

packages/ui/src/components/chat/ChatInput.tsx

@@ -52,6 +52,8 @@ import { useCurrentSessionActivity } from '@/hooks/useSessionActivity';
 import { toast } from '@/components/ui';
 // useMessageStore removed — messages now come from sync system
 import { isVSCodeRuntime } from '@/lib/desktop';
+import { useTabletLayout } from '@/lib/device';
+import { useHardwareKeyboard } from '@/lib/hardwareKeyboard';
 import { isIMECompositionEvent } from '@/lib/ime';
 import { getCycledPrimaryAgentName, type MobileControlsPanel } from './mobileControlsUtils';
 import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
@@ -349,6 +351,8 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
     const getVisibleAgents = useConfigStore((state) => state.getVisibleAgents);
     const agents = getVisibleAgents();
     const isMobile = useUIStore((state) => state.isMobile);
+    const hasHardwareKeyboard = useHardwareKeyboard();
+    const { enabled: isTabletLayout } = useTabletLayout();
     const setImagePreviewOpen = useUIStore((state) => state.setImagePreviewOpen);
     const inputBarOffset = useUIStore((state) => state.inputBarOffset);
     const persistChatDraft = useUIStore((state) => state.persistChatDraft);
@@ -2233,6 +2237,10 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
         editorRef: composerRef,
         formRef: composerFormRef,
         setExpandedInput,
+        // The pill exists to buy screen back from the soft keyboard. A tablet
+        // has the room regardless, and with a hardware keyboard there is no
+        // soft keyboard to buy it back from — keep the real composer up.
+        alwaysExpanded: hasHardwareKeyboard || isTabletLayout,
         holders: {
             controlsPanelOpen: Boolean(mobileControlsPanel),
             attachMenuOpen: mobileAttachMenuOpen,

packages/ui/src/components/chat/composer/state/useMobileComposerShell.ts

@@ -18,6 +18,7 @@
 import React from 'react';
 import { flushSync } from 'react-dom';
 
+import { observeEditorFocus } from '@/lib/hardwareKeyboard';
 import { isCapacitorApp } from '@/lib/platform';
 import type { ComposerEditorHandle } from '../editor/ComposerEditor';
 
@@ -41,6 +42,13 @@ export interface MobileComposerShellOptions {
     formRef: React.RefObject<HTMLFormElement | null>;
     setExpandedInput: (expanded: boolean) => void;
     holders: MobileComposerHolders;
+    /**
+     * Keep the full composer up permanently and never fall back to the pill.
+     * The pill exists to buy screen back from the soft keyboard; with a
+     * hardware keyboard on a tablet there is no soft keyboard to hide from,
+     * and collapsing between keystrokes would only cost the user a tap.
+     */
+    alwaysExpanded?: boolean;
 }
 
 export interface MobileComposerShell {
@@ -65,9 +73,9 @@ export interface MobileComposerShell {
 export function useMobileComposerShell(
     options: MobileComposerShellOptions,
 ): MobileComposerShell {
-    const { isMobile, editorRef, formRef, setExpandedInput, holders } = options;
+    const { isMobile, editorRef, formRef, setExpandedInput, holders, alwaysExpanded = false } = options;
 
-    const [expanded, setExpanded] = React.useState(false);
+    const [expanded, setExpanded] = React.useState(alwaysExpanded && isMobile);
     const [focused, setFocused] = React.useState(false);
     const [overlayHostBusy, setOverlayHostBusy] = React.useState(false);
     const [dictationActive, setDictationActive] = React.useState(false);
@@ -88,6 +96,16 @@ export function useMobileComposerShell(
         expandedRef.current = expanded;
     });
 
+    // A hardware keyboard can be attached (or detached) at any moment, so this
+    // is a live condition rather than a mount-time one. Detaching does NOT
+    // force a collapse — the normal idle/keyboard-hide paths take over again.
+    const alwaysExpandedRef = React.useRef(alwaysExpanded);
+    alwaysExpandedRef.current = alwaysExpanded;
+    React.useEffect(() => {
+        if (!isMobile || !alwaysExpanded) return;
+        setExpanded(true);
+    }, [alwaysExpanded, isMobile]);
+
     // The draft screen restructures itself around the composer: its starter
     // chips leave once the full composer is up, and its centered title
     // re-centers over whatever room remains. Announced as a root class from a
@@ -95,12 +113,16 @@ export function useMobileComposerShell(
     // swap — keyed on the keyboard instead (oc-keyboard-open arrives with the
     // keyboardWillShow bridge event, ~100ms later), the chips vanished
     // mid-rise as a second visible jump.
+    //
+    // Not announced while `alwaysExpanded`: there the full composer is the
+    // resting state, not a keyboard takeover, so claiming otherwise would hide
+    // the starters permanently. The keyboard classes still cover that case.
     React.useLayoutEffect(() => {
         if (!isMobile || typeof document === 'undefined') return;
         const root = document.documentElement;
-        root.classList.toggle('oc-composer-expanded', expanded);
+        root.classList.toggle('oc-composer-expanded', expanded && !alwaysExpanded);
         return () => root.classList.remove('oc-composer-expanded');
-    }, [expanded, isMobile]);
+    }, [alwaysExpanded, expanded, isMobile]);
 
     const expand = React.useCallback(() => {
         expandIntentRef.current = 'focus';
@@ -151,7 +173,7 @@ export function useMobileComposerShell(
         // insert-and-send) collapse straight back to the pill rather than
         // parking on the normal composer for the usual grace period.
         window.setTimeout(() => {
-            if (!expandedRef.current) return;
+            if (!expandedRef.current || alwaysExpandedRef.current) return;
             if (editorRef.current?.isFocused()) return;
             setExpanded(false);
             setExpandedInput(false);
@@ -288,7 +310,7 @@ export function useMobileComposerShell(
         || holders.isDragging;
 
     React.useEffect(() => {
-        if (!isMobile || !expanded || busy) return;
+        if (!isMobile || !expanded || busy || alwaysExpanded) return;
         const timer = window.setTimeout(() => {
             // Authoritative DOM check: the React focus state can lag a
             // programmatic refocus (the overlay-close restore above).
@@ -299,7 +321,7 @@ export function useMobileComposerShell(
             setExpandedInput(false);
         }, 250);
         return () => window.clearTimeout(timer);
-    }, [busy, editorRef, expanded, isMobile, setExpandedInput]);
+    }, [alwaysExpanded, busy, editorRef, expanded, isMobile, setExpandedInput]);
 
     const busyRef = React.useRef(false);
     busyRef.current = busy;
@@ -344,7 +366,7 @@ export function useMobileComposerShell(
         const handleIntent = (event: Event) => {
             const detail = (event as CustomEvent<{ open?: boolean }>).detail;
             if (!detail || detail.open !== false) return;
-            if (!expandedRef.current) return;
+            if (!expandedRef.current || alwaysExpandedRef.current) return;
             // Something still holds the composer open (dictation, an overlay
             // that closed the keyboard, a drag) — the fallback path handles it.
             if (busyRef.current) return;
@@ -360,6 +382,9 @@ export function useMobileComposerShell(
 
     const onEditorFocus = React.useCallback(() => {
         if (!isMobile) return;
+        // Focus is the only moment a soft keyboard would be presented, so it is
+        // also the only moment its ABSENCE tells us a hardware one is attached.
+        if (isCapacitorApp()) observeEditorFocus();
         if (blurTimerRef.current !== null) {
             window.clearTimeout(blurTimerRef.current);
             blurTimerRef.current = null;

packages/ui/src/components/session/DirectoryExplorerDialog.tsx

@@ -711,7 +711,9 @@ export const DirectoryExplorerDialog: React.FC<DirectoryExplorerDialogProps> = (
         open={open}
         onClose={handleClose}
         title={t('directoryExplorerDialog.title')}
-        className="h-[88dvh] max-h-[720px] max-w-full"
+        // Height only — the width stays on MobileOverlayPanel's shared max-w-lg
+        // so this sheet matches every other mobile overlay on wide screens.
+        className="h-[88dvh] max-h-[720px]"
         contentMaxHeightClassName="flex-1"
         footer={<div className="flex flex-col gap-2">{renderFooter()}</div>}
       >

packages/ui/src/components/ui/MobileOverlayPanel.tsx

@@ -119,6 +119,15 @@ export const MobileOverlayPanel: React.FC<MobileOverlayPanelProps> = ({
       role="dialog"
       aria-modal="true"
       onClick={onClose}
+      // The panel centers over the CHAT column, not the whole app: on a tablet
+      // the shell keeps a persistent sessions sidebar, and a sheet centered on
+      // the window reads as belonging to nothing. The shell publishes the
+      // column's insets; on phones they are 0 and this is a no-op. The scrim
+      // deliberately still covers everything.
+      style={{
+        paddingLeft: 'var(--oc-chat-inset-left, 0px)',
+        paddingRight: 'var(--oc-chat-inset-right, 0px)',
+      }}
     >
         <div
           className={cn(