@kabmo-labs/kabmo 0.1.0 → 0.3.0

package/src/client/components/common/header-controls/index.test.tsx

@@ -157,7 +157,26 @@ function controlNames(): string[] {
   return names;
 }
 
-async function mount(layout: 'desktop' | 'mobile', props: { editor?: boolean; switch?: boolean } = {}): Promise<void> {
+/**
+ * Mount the cluster at a chosen viewport width.
+ *
+ * The width is load-bearing since the phone folds two controls into `⋯` only
+ * while the row cannot hold them (`MOBILE_FULL_ROW_PX`), so a case that does
+ * not say where it is mounted is asserting a layout nobody chose. happy-dom
+ * resolves `matchMedia` against `innerWidth`, so setting it is the same signal
+ * a real resize raises.
+ */
+async function mount(
+  layout: 'desktop' | 'mobile',
+  props: { editor?: boolean; switch?: boolean; width?: number } = {},
+): Promise<void> {
+  // happy-dom resolves `matchMedia` against `innerWidth`, so writing it is the
+  // same signal a real resize raises.
+  Object.defineProperty(window, 'innerWidth', {
+    value: props.width ?? 1024,
+    configurable: true,
+    writable: true,
+  });
   container = document.createElement('div');
   document.body.appendChild(container);
   await act(async () => {
@@ -205,12 +224,42 @@ describe('HeaderControls', () => {
     ]);
   });
 
-  test('mobile draws the same controls in the same order, minus the desktop-only pair', async () => {
-    await mount('mobile');
+  test('a narrow phone draws the row, minus the desktop-only pair', async () => {
+    await mount('mobile', { width: 390 });
 
     // Install is desktop-only by decision: a phone's browser never fires the
     // prompt (iOS has its own guide), so the control is not part of the phone's
     // row. The editor column does not exist on the phone at all.
+    //
+    // At 390px reload and sign-out are rows of the `⋯` menu rather than
+    // standing in the row: that is what pays for the wordmark and the session
+    // title (see `HeaderControls`' own doc).
+    expect(controlNames()).toEqual([
+      'Demo Stats',
+      'Context usage',
+      'Open Right Panel',
+      'More actions',
+    ]);
+  });
+
+  test('a narrow phone folds reload and sign-out into the ⋯ menu', async () => {
+    await mount('mobile', { width: 360 });
+
+    // Below `MOBILE_FULL_ROW_PX` the row cannot hold them beside a full-width
+    // picker, so they are rows of the `⋯` menu instead.
+    expect(controlNames()).toEqual([
+      'Demo Stats',
+      'Context usage',
+      'Open Right Panel',
+      'More actions',
+    ]);
+  });
+
+  test('a phone wide enough for the whole row draws every control, no menu', async () => {
+    // 500px is past both thresholds (400 open, 436 with the lock), so nothing
+    // is folded: the fold is a width, not a device class.
+    await mount('mobile', { width: 500 });
+
     expect(controlNames()).toEqual([
       'Demo Stats',
       'Reload page',
@@ -226,15 +275,32 @@ describe('HeaderControls', () => {
     render(null, container);
     container.remove();
 
-    await mount('mobile');
+    await mount('mobile', { width: 500 });
     const mobile = controlNames();
 
-    const shared = ['Reload page', 'Context usage', 'Sign out'];
-    const positions = (names: string[]) => shared.map((name) => names.indexOf(name));
-    expect(positions(desktop)).toEqual([2, 3, 4]);
-    expect(positions(mobile)).toEqual([1, 2, 3]);
-    // Each list is ordered, which is the property that was wrong.
-    expect(positions(desktop)).toEqual([...positions(desktop)].sort((a, b) => a - b));
-    expect(positions(mobile)).toEqual([...positions(mobile)].sort((a, b) => a - b));
+    // Context before the panel on both — the two controls a user presses while
+    // reading a run.
+    expect(desktop.indexOf('Context usage')).toBeLessThan(desktop.indexOf('Toggle Right Panel'));
+    expect(mobile.indexOf('Context usage')).toBeLessThan(mobile.indexOf('Open Right Panel'));
+  });
+
+  test('the folded controls stay one click away, not absent', async () => {
+    await mount('mobile', { width: 360 });
+
+    expect(controlNames()).not.toContain('Reload page');
+    expect(controlNames()).not.toContain('Sign out');
+
+    const trigger = container.querySelector('button[aria-label="More actions"]') as HTMLElement;
+    expect(trigger).toBeTruthy();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    await act(async () => {
+      trigger.click();
+    });
+
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toBeTruthy();
+    expect(menu!.textContent).toContain('Reload page');
+    expect(menu!.textContent).toContain('Sign out');
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
   });
 });

package/src/client/components/common/header-controls/index.tsx

@@ -4,10 +4,29 @@ import { ReloadPageButton } from '@/client/components/common/ReloadPageButton';
 import { SignOutButton } from '@/client/components/common/SignOutButton';
 import { ContextUsageButton } from '@/client/components/common/context-usage-button';
 import { HeaderPanelButtons } from '@/client/components/common/header-panel-buttons';
+import { HeaderMoreMenu } from '@/client/components/common/header-controls/MoreMenu';
+import { useAuthEnabled, useAuthState } from '@/client/hooks/ui/auth';
+import { useViewportAtLeast } from '@/client/hooks/ui/media-query';
 import { withChord } from '@/client/lib/ui/with-chord';
 
 export type HeaderLayout = 'desktop' | 'mobile';
 
+/**
+ * The narrowest phone header that still holds every control in the row.
+ *
+ * Measured against the real header, with a long session title so the picker is
+ * at its 150px cap and cannot absorb the difference:
+ *
+ * - open instance, reload in the row: the picker reaches 150px at **400px**;
+ * - with a UI password, reload + lock: at **436px**.
+ *
+ * Below those the picker would start truncating the session title to pay for a
+ * control that is pressed once a session, so those two move into `⋯` instead.
+ * A wider phone or a rotated one gets them back — the fold is not a device
+ * class, it is the width at which the row stops fitting.
+ */
+const MOBILE_FULL_ROW_PX = { without: 400, withSignOut: 436 } as const;
+
 interface HeaderControlsProps {
   layout: HeaderLayout;
   sessionId: string | null;
@@ -40,14 +59,30 @@ const ICON_SIZE: Record<HeaderLayout, number> = { desktop: 16, mobile: 18 };
  *
  *   1. Install (PWA)            — desktop only
  *   2. Plugin header slots
- *   3. Reload page
+ *   3. Reload page              — desktop; behind `⋯` on a phone
  *   4. Context usage
- *   5. Sign out (the lock)
+ *   5. Sign out (the lock)      — desktop; behind `⋯` on a phone
  *   6. Editor toggle            — desktop only
  *   7. Right panel
+ *   8. More actions (`⋯`)       — phone only, in the slot the two moved controls
+ *                                  left behind
  *
  * The dev-only layout switch sits AFTER that list: it is not part of the
  * product's navbar and must not push a listed control out of the agreed order.
+ *
+ * ## Why a narrow phone folds two of them into a menu
+ *
+ * The row is 320–412px wide and already shares it with the wordmark, the slash
+ * and the session title — the only functional thing in the left group. Reload
+ * and sign-out are rare (a reload is Cmd/Ctrl+R; a sign-out happens once a
+ * session), while context and the right panel are read and pressed mid-turn.
+ * Measured with a UI password set and all four standing in the row, the title
+ * got 89px at 390 and 19px at 320 — one letter and an ellipsis.
+ *
+ * The fold is therefore a WIDTH, not a layout: `MOBILE_FULL_ROW_PX` is the
+ * narrowest header that still fits every control beside a full 150px picker,
+ * and above it the phone draws the same row the desktop does. Nothing is
+ * permanently unreachable, and nothing is hidden at a width that can hold it.
  */
 export function HeaderControls({
   layout,
@@ -60,14 +95,27 @@ export function HeaderControls({
 }: HeaderControlsProps) {
   const iconClass = ICON_BUTTON_CLASS[layout];
   const size = ICON_SIZE[layout];
+  const authEnabled = useAuthEnabled();
+  const authState = useAuthState();
+  const signOutShown = authEnabled && authState !== 'required';
+  // Called unconditionally: a hook inside the ternary below would run in a
+  // different order on the two layouts.
+  const wideRow = useViewportAtLeast(signOutShown ? MOBILE_FULL_ROW_PX.withSignOut : MOBILE_FULL_ROW_PX.without);
+  const wideEnoughForAll = layout === 'desktop' || wideRow;
+  // A phone folds the two rare controls only while the row cannot hold them.
+  const folded = layout === 'mobile' && !wideEnoughForAll;
 
   return (
     <div className="flex items-center space-x-1">
       {layout === 'desktop' && <PWAInstallButton />}
       <HeaderPanelButtons layout={layout} />
-      <ReloadPageButton size={size} className={iconClass} />
+      {/* The cluster's ORDER is fixed; what changes on a narrow phone is that
+          reload and sign-out move behind `⋯`, which sits in the slot they
+          left. Nothing is hidden at a width that can hold it: measured, the
+          row fits every control at 400px open and 436px with the lock. */}
+      {(layout === 'desktop' || !folded) && <ReloadPageButton size={size} className={iconClass} />}
       <ContextUsageButton sessionId={sessionId} layout={layout} />
-      <SignOutButton size={size} className={iconClass} />
+      {(layout === 'desktop' || !folded) && <SignOutButton size={size} className={iconClass} />}
       {layout === 'desktop' && onToggleEditor && (
         <button
           type="button"
@@ -102,6 +150,7 @@ export function HeaderControls({
           {showRightPanel ? <PanelRightClose size={size} /> : <PanelRight size={size} />}
         </button>
       )}
+      {folded && <HeaderMoreMenu />}
       {layout === 'desktop' && onSwitchToMobile && (
         <button
           type="button"

package/src/client/components/common/session-state-provider/index.test.ts

@@ -25,7 +25,8 @@ import { h, render } from 'preact';
 import { act } from 'preact/test-utils';
 import { SessionStateProvider } from '@/client/components/common/session-state-provider/index';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
-import { flushSession } from '@/shared/lib/workspace/session-state/store';
+import { adoptPendingSession } from '@/client/hooks/chat/omp/pending-sessions';
+import { flushSession, forgetSession } from '@/shared/lib/workspace/session-state/store';
 
 const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
 /** The runner's own globals, restored on teardown — deleting them would strip natives (Event/CustomEvent) every later file needs. */const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
@@ -139,4 +140,24 @@ describe('SessionStateProvider on a pending session', () => {
     expect(calls.some((c) => c.url === '/api/sessions/real-9/state' && c.method === 'GET')).toBe(true);
     expect(calls.some((c) => c.method === 'POST')).toBe(false);
   });
+
+  test('a spawn adoption carries the panels the user opened onto the real id', async () => {
+    // The reported bug: open a new chat, open some right-panel views, send the
+    // first prompt — the spawn renames the session and everything the user had
+    // opened closed again. The provider migrates the pending slot in its OWN
+    // effect, which Preact runs AFTER its children's: each `useSessionState`
+    // copy had already re-read the (still empty) adopted slot, landed on its
+    // fallback, and never re-read because `ready` does not move across an
+    // adoption.
+    const pending = 'new-test-adopt';
+    const el = await mountPending(pending);
+    (el.querySelector('button') as HTMLButtonElement).click();
+    await act(async () => {});
+
+    adoptPendingSession(pending, 'omp-adopted', 1);
+    await switchTo(el, 'omp-adopted');
+
+    expect(el.textContent).toContain('git');
+    forgetSession('omp-adopted');
+  });
 });

package/src/client/components/layout/session-sidebar/Footer.tsx

@@ -1,10 +1,16 @@
-import { Info, Settings } from 'lucide-preact';
+import { Download, Info, Settings } from 'lucide-preact';
+import {
+  androidDownloadLabel,
+  type AndroidDownload,
+} from '@/client/hooks/ui/updates/android-download';
 
 interface SessionSidebarFooterProps {
   onSettings: () => void;
   onInfo: () => void;
   updateAvailable?: boolean;
   onUpdateClick?: () => void;
+  /** The APK to offer, or null. Set inside the app (an update) or on an Android browser (an install). */
+  androidDownload?: AndroidDownload | null;
 }
 
 /**
@@ -17,7 +23,7 @@ interface SessionSidebarFooterProps {
  * is unreachable by keyboard"). It is also what lets a browser spec address
  * these controls by role and name instead of by their position in the DOM.
  */
-export function SessionSidebarFooter({ onSettings, onInfo, updateAvailable, onUpdateClick }: SessionSidebarFooterProps) {
+export function SessionSidebarFooter({ onSettings, onInfo, updateAvailable, onUpdateClick, androidDownload }: SessionSidebarFooterProps) {
   return (
     <div className="h-10 px-3 border-t border-ink/10 flex items-center justify-between text-ink/60 shrink-0">
       <div className="flex space-x-1">
@@ -39,6 +45,22 @@ export function SessionSidebarFooter({ onSettings, onInfo, updateAvailable, onUp
         >
           <Info size={16} />
         </button>
+        {androidDownload && (
+          // Next to About. Two reasons to be here, and the label says which:
+          // an installed APK that is behind (an update), or an Android browser
+          // whose reader may not know the shell exists (an install). A desktop
+          // browser gets neither — see `useAndroidDownload`.
+          <a
+            href={androidDownload.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={androidDownloadLabel(androidDownload)}
+            aria-label={androidDownloadLabel(androidDownload)}
+            className="p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors"
+          >
+            <Download size={16} />
+          </a>
+        )}
       </div>
       {updateAvailable && (
         <button

package/src/client/components/layout/session-sidebar/OverflowMenu.tsx

@@ -39,6 +39,14 @@ interface ToolbarOverflowMenuProps {
   sortHidden: boolean;
   sortOption: SessionSortOption;
   onSortChange: (option: SessionSortOption) => void;
+  /**
+   * The row this menu sits in. Both layouts share the RULE and the menu, but
+   * their controls are different sizes — the desktop row is `w-7` in a 34px
+   * step, the phone's drawer is `w-9.5` in a 46px one — so the trigger and the
+   * sort rows have to match the controls beside them. A `⋯` drawn at desktop
+   * metrics in a drawer of 38px buttons reads as a control from another screen.
+   */
+  layout?: 'desktop' | 'mobile';
 }
 
 export function ToolbarOverflowMenu({
@@ -46,7 +54,9 @@ export function ToolbarOverflowMenu({
   sortHidden,
   sortOption,
   onSortChange,
+  layout = 'desktop',
 }: ToolbarOverflowMenuProps) {
+  const mobile = layout === 'mobile';
   const [open, setOpen] = useState(false);
   const rootRef = useRef<HTMLDivElement>(null);
   useOnClickOutside(rootRef, () => setOpen(false));
@@ -75,19 +85,25 @@ export function ToolbarOverflowMenu({
         aria-haspopup="menu"
         aria-expanded={open}
         onClick={() => setOpen(!open)}
-        className={`w-7 h-7 inline-flex items-center justify-center rounded border transition-colors cursor-pointer ${
+        className={`inline-flex items-center justify-center transition-colors cursor-pointer ${
+          mobile
+            ? 'w-9.5 h-9.5 rounded-xl border active:scale-95 shadow-xs'
+            : 'w-7 h-7 rounded border'
+        } ${
           open
             ? 'border-ink/30 bg-ink/10 text-ink'
             : 'border-ink/15 bg-paper text-ink/70 hover:bg-ink/5 hover:text-ink'
         }`}
       >
-        <Ellipsis size={14} />
+        <Ellipsis size={mobile ? 16 : 14} />
       </button>
 
       {open && (
         <div
           role="menu"
-          className="absolute right-0 top-full mt-2 w-52 bg-paper border border-ink/15 rounded-lg shadow-lg z-50 py-1 text-xs"
+          className={`absolute right-0 top-full mt-2 w-52 bg-paper border border-ink/15 shadow-lg z-50 py-1 text-xs ${
+            mobile ? 'rounded-xl p-2' : 'rounded-lg'
+          }`}
         >
           {actions.map((action) => (
             <button
@@ -96,7 +112,9 @@ export function ToolbarOverflowMenu({
               role="menuitem"
               onClick={() => run(action)}
               aria-pressed={action.active}
-              className={`w-full text-left px-3 py-1.5 flex items-center gap-2 transition-colors ${
+              className={`w-full text-left flex items-center gap-2 transition-colors ${
+                mobile ? 'px-2.5 py-1.5 rounded-lg' : 'px-3 py-1.5'
+              } ${
                 action.active ? 'bg-ink/5 text-ink font-medium' : 'text-ink/75 hover:bg-ink/5 hover:text-ink'
               }`}
             >
@@ -107,7 +125,7 @@ export function ToolbarOverflowMenu({
 
           {sortHidden && (
             <div className="mt-1 border-t border-ink/10 pt-1">
-              <SortMenu variant="desktop" sortOption={sortOption} onSortChange={onSortChange} />
+              <SortMenu variant={layout} sortOption={sortOption} onSortChange={onSortChange} />
             </div>
           )}
         </div>

package/src/client/components/layout/session-sidebar/Toolbar.tsx

@@ -1,9 +1,9 @@
 import { Archive, ArrowUpDown, Calendar, FolderPlus, ListChecks, Plus, RefreshCw, Search, X } from 'lucide-preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
 import type { SessionSortOption } from '@/shared/types';
 import { SortMenu } from '@/client/components/common/sort-menu';
 import { ToolbarOverflowMenu } from '@/client/components/layout/session-sidebar/OverflowMenu';
 import type { OverflowAction } from '@/client/components/layout/session-sidebar/OverflowMenu';
+import { useToolbarRowWidth } from '@/client/hooks/workspace/toolbar-row-width';
 import {
   SIDEBAR_TOOLBAR_PRIORITY,
   TOOLBAR_ROW_PADDING_PX,
@@ -38,37 +38,6 @@ interface SessionSidebarToolbarProps {
   selecting: boolean;
 }
 
-/**
- * The row's content width, kept current as the sidebar is dragged.
- *
- * The capacity decision needs the width the row actually has, and the sidebar
- * is resizable — a `ResizeObserver` is what makes the set of visible controls
- * follow a drag instead of being decided once at mount.
- */
-function useRowWidth() {
-  const ref = useRef<HTMLDivElement>(null);
-  const [width, setWidth] = useState(0);
-  // A layout effect, so the first measure lands BEFORE paint: with a passive
-  // effect the row drew every control and then dropped the ones that did not
-  // fit on the next frame.
-  useLayoutEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-    // `clientWidth` includes the row's own `px-1`, and the capacity budget is
-    // a CONTENT width — leaving the padding in made the row 8px optimistic,
-    // which is exactly the margin an extra icon needs.
-    const measure = () => setWidth(Math.max(0, element.clientWidth - TOOLBAR_ROW_PADDING_PX));
-    measure();
-    if (typeof ResizeObserver === 'undefined') return;
-    // The sidebar is resizable, so the visible set has to follow a drag
-    // instead of being decided once at mount.
-    const observer = new ResizeObserver(measure);
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, []);
-  return { ref, width };
-}
-
 const ICON_CLASS = 'shrink-0 w-7 h-7 inline-flex items-center justify-center rounded border transition-colors cursor-pointer';
 const ICON_IDLE = 'border-ink/15 bg-paper text-ink/70 hover:bg-ink/5 hover:text-ink';
 const ICON_ACTIVE = 'border-ink/30 bg-ink/10 text-ink';
@@ -95,7 +64,7 @@ export function SessionSidebarToolbar({
   onSelectWorkspaces,
   selecting,
 }: SessionSidebarToolbarProps) {
-  const { ref: rowRef, width } = useRowWidth();
+  const { ref: rowRef, width } = useToolbarRowWidth(TOOLBAR_ROW_PADDING_PX);
   const capacity = sidebarToolbarCapacity(width);
   const visible = new Set(SIDEBAR_TOOLBAR_PRIORITY.slice(0, capacity));
   const hidden = SIDEBAR_TOOLBAR_PRIORITY.slice(capacity);

package/src/client/components/layout/session-sidebar/index.tsx

@@ -6,6 +6,7 @@ import { UpdatePopup } from '@/client/components/layout/update-popup';
 import { SessionSidebarHeader } from '@/client/components/layout/session-sidebar/Header';
 import { SessionSidebarToolbar } from '@/client/components/layout/session-sidebar/Toolbar';
 import { SessionSidebarFooter } from '@/client/components/layout/session-sidebar/Footer';
+import { useAndroidDownload } from '@/client/hooks/ui/updates/android-download';
 import { SessionSidebarSessionList } from '@/client/components/layout/session-sidebar/SessionList';
 import { SessionListSkeleton } from '@/client/components/layout/session-sidebar/Skeleton';
 import { ToastStack } from '@/client/components/common/ToastStack';
@@ -56,6 +57,12 @@ export function SessionSidebar({ className = '', onClose, appSettings = {}, stre
   const [schedulerOpen, setSchedulerOpen] = useState(false);
   const scheduledCount = useScheduledTaskCount();
   const updates = useUpdates();
+  // The Android offer: an UPDATE inside the APK, an INSTALL on an Android
+  // browser, and nothing anywhere else — see `useAndroidDownload`.
+  const androidDownload = useAndroidDownload(
+    window.__OMP_BOOTSTRAP__?.shellVersion,
+    window.__OMP_BOOTSTRAP__?.isAndroid,
+  );
   const { toasts, pushToast, dismissToast } = useToasts();
 
   // Sidebar inline states
@@ -212,6 +219,7 @@ export function SessionSidebar({ className = '', onClose, appSettings = {}, stre
         <SessionSidebarFooter
           onSettings={() => setSettingsOpen(true)}
           onInfo={() => setInfoOpen(true)}
+          androidDownload={androidDownload}
           updateAvailable={updates.hasUpdate}
           onUpdateClick={() => {
             setInfoOpen(true);

package/src/client/components/mobile/LayoutWrapper.tsx

@@ -1,6 +1,7 @@
-import { useCallback, useState } from 'preact/hooks';
+import { useCallback, useEffect, useState } from 'preact/hooks';
 import { useSearchParams } from '@/client/lib/router/search-params';
 import { useKabmoEvent } from '@/client/hooks/ui/window-event';
+import { registerBackHandler } from '@/client/lib/native/back';
 import type { SettingsCategoryId } from '@/shared/types';
 import { MobileMainView } from '@/client/components/mobile/MainView';
 import { MobileSessionSidebar } from '@/client/components/mobile/SessionSidebar';
@@ -64,6 +65,36 @@ export function MobileLayoutWrapper({ onDesktopToggle, appSettings = {} }: Mobil
   );
   const mobileEditorMissing = mobileEditorMissingIds.size > 0;
 
+  // The Android shell's back button asks this layout first.
+  //
+  // Order is what the user sees, innermost first: the full-screen editor and
+  // diff cover everything, then the settings modal, then the drawer screens,
+  // and only then does the shell walk WebView history. Without this, back
+  // reopened the previous session while leaving the drawer that opened it on
+  // screen — the screens live in React state, not in the URL.
+  useEffect(() => {
+    return registerBackHandler(() => {
+      if (mobileEditorFile) {
+        setMobileEditorFile(null);
+        return true;
+      }
+      if (mobileDiff) {
+        setMobileDiff(null);
+        return true;
+      }
+      if (settingsOpen) {
+        setSettingsOpen(false);
+        setAutoOpenAddProvider(false);
+        return true;
+      }
+      if (currentScreen !== 'main') {
+        setCurrentScreen('main');
+        return true;
+      }
+      return false;
+    });
+  }, [mobileEditorFile, mobileDiff, settingsOpen, currentScreen]);
+
   const { folder: sessionFolder } = activeProjectForSession(folders, sessionId);
   const contextFolder = sessionFolder ?? (folderId ? folders.find(f => String(f.id) === String(folderId)) ?? null : null);
   const activeProjectPath = contextFolder?.project_path ?? null;

package/src/client/components/mobile/SessionSidebar.tsx

@@ -5,6 +5,7 @@ import { MobileSessionList } from '@/client/components/mobile/mobile-session-sid
 import { MobileSessionFooter } from '@/client/components/mobile/mobile-session-sidebar/Footer';
 import { ToastStack } from '@/client/components/common/ToastStack';
 import { AboutModal, NewWorkspaceModal } from '@/client/components/layout/session-sidebar/Modals';
+import { useAndroidDownload } from '@/client/hooks/ui/updates/android-download';
 import { SchedulerModal } from '@/client/components/layout/session-sidebar/scheduler-modal';
 import { UpdatePopup } from '@/client/components/layout/update-popup';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
@@ -72,6 +73,12 @@ export function MobileSessionSidebar({
   const scheduledCount = useScheduledTaskCount();
   const [aboutOpen, setAboutOpen] = useState(false);
   const updates = useUpdates();
+  // An update inside the APK, an install on an Android browser, nothing
+  // elsewhere — see `useAndroidDownload`.
+  const androidDownload = useAndroidDownload(
+    window.__OMP_BOOTSTRAP__?.shellVersion,
+    window.__OMP_BOOTSTRAP__?.isAndroid,
+  );
   const { toasts, pushToast, dismissToast } = useToasts();
 
   // The popup's "Update now" hands the run over rather than starting its own —
@@ -242,6 +249,7 @@ export function MobileSessionSidebar({
       <MobileSessionFooter
         onSettings={() => window.dispatchEvent(new CustomEvent('omp:open-settings', { detail: {} }))}
         onAbout={() => setAboutOpen(true)}
+        androidDownload={androidDownload}
         onDesktopToggle={onDesktopToggle}
         updateAvailable={updates.hasUpdate}
         onUpdateClick={() => {

package/src/client/components/mobile/mobile-main-view/Header.tsx

@@ -88,7 +88,7 @@ export function MobileHeader({
 
   return (
     <header
-      className="flex-shrink-0 bg-canvas border-b border-ink/10 flex items-center justify-between px-3 z-20 titlebar-drag-region select-none"
+      className="flex-shrink-0 bg-canvas border-b border-ink/10 flex items-center justify-between gap-2 px-3 z-20 titlebar-drag-region select-none"
       style={{
         height: 'calc(3.5rem + env(safe-area-inset-top, 0px))',
         paddingLeft: 'max(0.75rem, env(safe-area-inset-left, 0px), env(titlebar-area-x, 0px))',
@@ -96,8 +96,22 @@ export function MobileHeader({
         paddingTop: 'env(safe-area-inset-top, 0px)',
       }}
     >
-      {/* Left: hamburger, app title & session dropdown */}
-      <div className="flex items-center space-x-2 min-w-0 titlebar-no-drag">
+      {/* Left: hamburger, app title & session dropdown.
+          `flex-1 min-w-0` is what makes the title the ONLY part that gives up
+          width: the hamburger, wordmark and slash are `flex-shrink-0`, so the
+          row shrinks to the control cluster's width and the picker truncates
+          inside it. Without `flex-1` the row kept its max-content width and
+          the picker's 150px button spilled over the reload control.
+
+          The wordmark and its slash are DROPPED below 420px. They are fixed
+          chrome (53px + 4px + 16px of gaps = 73px, 19% of a 390px header) that
+          competes with the one functional thing in the row: the session title.
+          With a password set the cluster is 140px wide (reload, context, lock,
+          panel), which leaves the title `vw − 285px` — measured 89px at 390,
+          59px at 360 and 19px at 320. The brand is not lost: the drawer header
+          draws it, as does the desktop navbar. Same decision, same reason, as
+          the desktop navbar's `hidden sm:flex` on its own wordmark. */}
+      <div className="flex items-center space-x-2 flex-1 min-w-0 titlebar-no-drag">
         <button
           type="button"
           onClick={onOpenSessionSidebar}
@@ -108,6 +122,10 @@ export function MobileHeader({
           <Menu size={20} strokeWidth={2} />
         </button>
 
+        {/* The wordmark is drawn at EVERY width. The width it needs was bought
+            back from the control cluster instead: reload and sign out moved
+            into the `⋯` menu (`HeaderControls`), which is what pays for the
+            wordmark plus the slash beside it. */}
         <span className="relative font-bold text-sm tracking-tight flex items-center flex-shrink-0">
           <BrandWordmark />
           <span className="absolute -top-0.5 -right-1.5 flex">
@@ -117,11 +135,15 @@ export function MobileHeader({
 
         <span className="text-ink/25 font-light text-xs flex-shrink-0 select-none">/</span>
 
-        <div className="relative min-w-0" ref={sessionPickerRef}>
+        <div
+          className="relative min-w-0 flex-1 max-w-[150px]"
+          ref={sessionPickerRef}
+          data-testid="session-picker"
+        >
           <button
             type="button"
             onClick={() => setShowSessionPicker(!showSessionPicker)}
-            className="flex items-center space-x-1 text-xs font-semibold text-ink hover:text-ink/80 transition-colors py-1 max-w-[150px] min-w-0"
+            className="flex w-full items-center space-x-1 text-xs font-semibold text-ink hover:text-ink/80 transition-colors py-1 min-w-0"
             title={displayTitle}
           >
             <span className="truncate">{displayTitle}</span>

package/src/client/components/mobile/mobile-session-sidebar/Footer.tsx

@@ -1,11 +1,17 @@
-import { Info, Monitor, Settings } from 'lucide-preact';
+import { Download, Info, Monitor, Settings } from 'lucide-preact';
 import packageJson from '@/../package.json';
+import {
+  androidDownloadLabel,
+  type AndroidDownload,
+} from '@/client/hooks/ui/updates/android-download';
 
 interface MobileSessionFooterProps {
   onSettings: () => void;
   onAbout: () => void;
   updateAvailable?: boolean;
   onUpdateClick?: () => void;
+  /** The APK to offer, or null. Set inside the app (an update) or on an Android browser (an install). */
+  androidDownload?: AndroidDownload | null;
   /** Switch the app to the desktop layout for this page session only. The
    *  choice is not persisted, so the next load re-detects the device. */
   onDesktopToggle?: () => void;
@@ -17,6 +23,7 @@ export function MobileSessionFooter({
   updateAvailable,
   onUpdateClick,
   onDesktopToggle,
+  androidDownload,
 }: MobileSessionFooterProps) {
   return (
     <div
@@ -40,6 +47,27 @@ export function MobileSessionFooter({
           <Info size={14} />
           <span>About</span>
         </button>
+        {androidDownload && (
+          // Directly after About, matching the desktop footer. An `<a>`, not a
+          // button: the download is the browser's (or the WebView's) job, and
+          // `target="_blank"` hands it to the system browser so the console is
+          // not replaced by a file download.
+          //
+          // The visible word is the OFFER, not the file type: `APK` told a
+          // reader what the bytes are but not what the control does, and on a
+          // browser it is the only place the native shell is ever mentioned.
+          <a
+            href={androidDownload.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={androidDownloadLabel(androidDownload)}
+            aria-label={androidDownloadLabel(androidDownload)}
+            className="flex items-center space-x-1 hover:text-ink transition-colors"
+          >
+            <Download size={14} />
+            <span>{androidDownload.kind === 'update' ? 'Update APK' : 'Get APK'}</span>
+          </a>
+        )}
         {onDesktopToggle && (
           <button
             type="button"