@kabmo-labs/kabmo 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kabmo-labs/kabmo",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Web console and diagnostic workbench for AI coding agents — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",

package/src/client/bootstrap.d.ts

@@ -22,6 +22,14 @@ export interface KabmoBootstrap {
    * while this fact was missing, and the only way to ask was a second request.
    */
   authEnabled?: boolean;
+  /**
+   * The Android shell's version, when this page was requested by the APK
+   * (`KabmoAndroid/<version>` in the User-Agent). Null in every browser.
+   *
+   * The sidebar uses it to decide whether a download button applies at all, and
+   * whether this install is behind the published APK.
+   */
+  shellVersion?: string | null;
 }
 
 declare global {

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

@@ -0,0 +1,136 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone header's `⋯` menu: the two controls that do not need a slot.
+ *
+ * Reload and sign-out are rare actions, and each costs 36px of a header that is
+ * already sharing 320–412px between the wordmark, the session title and the
+ * four controls that ARE used mid-conversation (context, panel, and whatever a
+ * plugin contributes). Behind `⋯` they still cost 36px — but 36px ONCE, for
+ * both, against 72px standing in the row.
+ *
+ * This is the same answer the sidebar toolbar reached when its row ran out of
+ * room (`ToolbarOverflowMenu`): hiding a control outright makes it unreachable
+ * at one width, and letting the row overflow hides it behind a scroll with
+ * nothing on screen to say so. A menu keeps it one click away and names it in
+ * words rather than as a glyph.
+ *
+ * ## Sign-out confirms HERE, not in the row it came from
+ *
+ * `SignOutButton` is a two-press control because it sits a pixel from reload.
+ * A menu already costs an open and a click, so the confirmation is the first
+ * row press: the row turns into `Click again to sign out` and the second press
+ * ends the session. The safety property is unchanged — one stray click still
+ * cannot sign the user out — and focus never leaves the menu.
+ */
+
+import { Ellipsis, Lock, LockOpen, RefreshCw } from 'lucide-preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { logout, useAuthEnabled, useAuthState } from '@/client/hooks/ui/auth';
+
+const ROW_CLASS =
+  'w-full text-left px-3 py-2 flex items-center gap-2 transition-colors text-ink/75 hover:bg-ink/5 hover:text-ink cursor-pointer';
+
+export function HeaderMoreMenu() {
+  const authEnabled = useAuthEnabled();
+  const authState = useAuthState();
+  const [open, setOpen] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(rootRef, () => setOpen(false));
+
+  const canSignOut = authEnabled && authState !== 'required';
+  // The open flag is mirrored into a ref so the Escape listener can be bound
+  // ONCE, at mount. Binding it from an effect keyed on `open` lost the first
+  // keypress after the click that opened the menu — the effect had not run yet
+  // — and a menu that swallows Escape intermittently is worse than one that
+  // never does, because the user cannot tell which they are looking at.
+  const openRef = useRef(open);
+  openRef.current = open;
+
+  // A menu left open while the session ends elsewhere would offer an action for
+  // a session that no longer exists — the same rule `SignOutButton` applies.
+  useEffect(() => {
+    if (!canSignOut) setConfirming(false);
+  }, [canSignOut]);
+
+  useEffect(() => {
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key !== 'Escape' || !openRef.current) return;
+      setOpen(false);
+      setConfirming(false);
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, []);
+
+  const signOut = async () => {
+    if (busy) return;
+    if (!confirming) {
+      setConfirming(true);
+      return;
+    }
+    setBusy(true);
+    // `logout` reloads into the login screen; a failure still leaves no usable
+    // session, so there is nothing to recover here.
+    await logout();
+  };
+
+  return (
+    <div className="relative" ref={rootRef}>
+      <button
+        type="button"
+        onClick={() => setOpen((current) => !current)}
+        className={`w-8 h-8 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
+          open ? 'bg-ink/10 text-ink' : 'text-ink hover:bg-ink/5 active:bg-ink/10'
+        }`}
+        title="More actions"
+        aria-label="More actions"
+        aria-haspopup="menu"
+        aria-expanded={open}
+      >
+        <Ellipsis size={18} />
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 top-full mt-1 w-44 bg-paper border border-ink/15 rounded-xl shadow-lg z-50 py-1 text-xs"
+        >
+          <button
+            type="button"
+            role="menuitem"
+            onClick={() => {
+              setOpen(false);
+              window.location.reload();
+            }}
+            className={ROW_CLASS}
+          >
+            <RefreshCw size={14} />
+            <span>Reload page</span>
+          </button>
+
+          {canSignOut && (
+            <button
+              type="button"
+              role="menuitem"
+              onClick={signOut}
+              disabled={busy}
+              className={ROW_CLASS}
+              aria-expanded={confirming}
+              data-confirming={confirming ? 'true' : undefined}
+            >
+              {confirming ? <LockOpen size={14} /> : <Lock size={14} />}
+              <span>{confirming ? 'Click again to sign out' : 'Sign out'}</span>
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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,12 @@
-import { Info, Settings } from 'lucide-preact';
+import { Download, Info, Settings } from 'lucide-preact';
 
 interface SessionSidebarFooterProps {
   onSettings: () => void;
   onInfo: () => void;
   updateAvailable?: boolean;
   onUpdateClick?: () => void;
+  /** The newer APK to offer, or null. Only ever set inside the Android app. */
+  androidDownload?: { url: string; latest: string; releaseUrl: string | null } | null;
 }
 
 /**
@@ -17,7 +19,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 +41,22 @@ export function SessionSidebarFooter({ onSettings, onInfo, updateAvailable, onUp
         >
           <Info size={16} />
         </button>
+        {androidDownload && (
+          // Next to About, and only when BOTH facts hold: this page is inside
+          // the Android app, and a newer APK is published. An up-to-date app
+          // shows nothing here, and a browser never does — see
+          // `useAndroidDownload`.
+          <a
+            href={androidDownload.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={`Download Kabmo ${androidDownload.latest} for Android`}
+            aria-label={`Download Kabmo ${androidDownload.latest} for Android`}
+            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,9 @@ export function SessionSidebar({ className = '', onClose, appSettings = {}, stre
   const [schedulerOpen, setSchedulerOpen] = useState(false);
   const scheduledCount = useScheduledTaskCount();
   const updates = useUpdates();
+  // The Android download offer: null in a browser and null when this APK is
+  // already the newest published one, so the footer draws nothing.
+  const androidDownload = useAndroidDownload(window.__OMP_BOOTSTRAP__?.shellVersion);
   const { toasts, pushToast, dismissToast } = useToasts();
 
   // Sidebar inline states
@@ -212,6 +216,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;