@kabmo-labs/kabmo 0.1.0 → 0.2.0

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,9 @@ export function MobileSessionSidebar({
   const scheduledCount = useScheduledTaskCount();
   const [aboutOpen, setAboutOpen] = useState(false);
   const updates = useUpdates();
+  // Null in a browser, and null when this APK is already current — see
+  // `useAndroidDownload`.
+  const androidDownload = useAndroidDownload(window.__OMP_BOOTSTRAP__?.shellVersion);
   const { toasts, pushToast, dismissToast } = useToasts();
 
   // The popup's "Update now" hands the run over rather than starting its own —
@@ -242,6 +246,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,4 +1,4 @@
-import { Info, Monitor, Settings } from 'lucide-preact';
+import { Download, Info, Monitor, Settings } from 'lucide-preact';
 import packageJson from '@/../package.json';
 
 interface MobileSessionFooterProps {
@@ -6,6 +6,8 @@ interface MobileSessionFooterProps {
   onAbout: () => 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;
   /** 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 +19,7 @@ export function MobileSessionFooter({
   updateAvailable,
   onUpdateClick,
   onDesktopToggle,
+  androidDownload,
 }: MobileSessionFooterProps) {
   return (
     <div
@@ -40,6 +43,23 @@ 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.
+          <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="flex items-center space-x-1 hover:text-ink transition-colors"
+          >
+            <Download size={14} />
+            <span>APK</span>
+          </a>
+        )}
         {onDesktopToggle && (
           <button
             type="button"

package/src/client/components/mobile/mobile-session-sidebar/Toolbar.test.ts

@@ -133,3 +133,107 @@ describe('mobile toolbar archive button', () => {
     expect(sortTrigger?.className).not.toContain('bg-ink/10');
   });
 });
+
+/**
+ * The row's overflow rule, which is what the reported missing `+` came down to.
+ *
+ * happy-dom reports `clientWidth` as 0, so the toolbar renders the unmeasured
+ * state — every control on the row — and these cases pin the two halves that
+ * are decidable without layout: the primary pill's icon and label are BOTH in
+ * the markup at every width, and the `⋯` menu exists as the destination the
+ * measured rule moves a control into.
+ */
+describe('mobile toolbar overflow', () => {
+  test('the primary pill always draws its icon and its label', async () => {
+    const { el } = await mount();
+    const pill = Array.from(el.querySelectorAll('button')).find((b) => b.getAttribute('aria-label') === 'New Session');
+    expect(pill).not.toBeUndefined();
+    const icon = pill?.querySelector('svg');
+    expect(icon?.getAttribute('class')).toContain('lucide-plus');
+    // `shrink-0` is the fix: without it the icon is the flex item that gives up
+    // width, and the label's `whitespace-nowrap` min-content refuses to.
+    expect(icon?.getAttribute('class')).toContain('shrink-0');
+    const label = pill?.querySelector('span');
+    expect(label?.textContent).toBe('New Session');
+    // Not hidden at any width — the budget drops a CONTROL instead.
+    expect(label?.className).not.toContain('hidden');
+  });
+
+  test('every control is on the row until a width says otherwise', async () => {
+    // An unmeasured row reports 0, and `mobileToolbarCapacity(0)` keeps the
+    // full set: the menu must not appear before anything has been measured.
+    const { el } = await mount();
+    for (const name of [
+      'New Workspace',
+      'Scheduled tasks',
+      'Show archived sessions',
+      'Select workspaces',
+      'Refresh sessions',
+      'Sort workspaces',
+    ]) {
+      const button = Array.from(el.querySelectorAll('button')).find((b) => b.getAttribute('aria-label') === name);
+      expect(button).not.toBeUndefined();
+    }
+    expect(el.querySelector('button[aria-label="More sidebar actions"]')).toBeNull();
+  });
+
+  test('the overflow menu opens and carries the controls it took', async () => {
+    // The row is stubbed to a phone's 366px (a 390px drawer minus its `p-3`),
+    // which is the width the reported bug was seen at. happy-dom computes no
+    // layout, so the measurement the hook reads is supplied here — the rule
+    // itself is pinned by `sidebar-toolbar.test.ts`.
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth');
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      get() {
+        return (this as HTMLElement).className === 'flex items-center space-x-2' ? 366 : 0;
+      },
+    });
+    try {
+      const { el } = await mount();
+      const onRow = (name: string) =>
+        Array.from(el.querySelectorAll('button')).find((b) => b.getAttribute('aria-label') === name);
+      // The tail moves out — scheduler and selection — while the head stays,
+      // including the two view controls a phone actually uses.
+      expect(onRow('Scheduled tasks')).toBeUndefined();
+      expect(onRow('Select workspaces')).toBeUndefined();
+      expect(onRow('New Workspace')).not.toBeUndefined();
+      expect(onRow('Sort workspaces')).not.toBeUndefined();
+
+      const trigger = el.querySelector('button[aria-label="More sidebar actions"]') as HTMLButtonElement;
+      expect(trigger).not.toBeNull();
+      await act(async () => { trigger.click(); });
+
+      // Named in words, not as glyphs — and each one still runs.
+      const menuItems = Array.from(el.querySelectorAll('[role="menuitem"]')).map((b) => b.textContent ?? '');
+      expect(menuItems).toContain('Scheduled tasks');
+      expect(menuItems).toContain('Select workspaces');
+      // The sort did NOT overflow here, so its options are not duplicated in
+      // the menu — the sort list arrives only when the sort control itself is
+      // one of the ones that left the row.
+      expect(el.textContent).not.toContain('Sort Workspaces');
+    } finally {
+      if (descriptor) Object.defineProperty(HTMLElement.prototype, 'clientWidth', descriptor);
+      else delete (HTMLElement.prototype as unknown as Record<string, unknown>).clientWidth;
+    }
+  });
+
+  test('a wide drawer keeps every control on the row', async () => {
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth');
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      get() {
+        return (this as HTMLElement).className === 'flex items-center space-x-2' ? 600 : 0;
+      },
+    });
+    try {
+      const { el } = await mount();
+      expect(el.querySelector('button[aria-label="More sidebar actions"]')).toBeNull();
+      expect(Array.from(el.querySelectorAll('button')).find((b) => b.getAttribute('aria-label') === 'Sort workspaces'))
+        .not.toBeUndefined();
+    } finally {
+      if (descriptor) Object.defineProperty(HTMLElement.prototype, 'clientWidth', descriptor);
+      else delete (HTMLElement.prototype as unknown as Record<string, unknown>).clientWidth;
+    }
+  });
+});

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

@@ -2,6 +2,13 @@ import type { RefObject } from 'preact/compat';
 import { Archive, ArrowUpDown, Calendar, FolderPlus, ListChecks, Plus, RefreshCw, Search, X } from 'lucide-preact';
 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 {
+  MOBILE_TOOLBAR_PRIORITY,
+  mobileToolbarCapacity,
+} from '@/shared/lib/workspace/sidebar-toolbar';
 
 export interface MobileSessionToolbarProps {
   searchQuery: string;
@@ -30,6 +37,12 @@ export interface MobileSessionToolbarProps {
   selecting: boolean;
 }
 
+/** One phone control's box — `w-9.5 h-9.5` with the toolbar's own border/shadow. */
+const CONTROL_CLASS =
+  'w-9.5 h-9.5 rounded-xl border active:scale-95 flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs';
+const CONTROL_IDLE = 'border-ink/15 bg-paper hover:bg-ink/5 text-ink/80 hover:text-ink';
+const CONTROL_ACTIVE = 'bg-ink/10 text-ink border-ink/30';
+
 export function MobileSessionToolbar({
   searchQuery,
   sortOption,
@@ -52,21 +65,59 @@ export function MobileSessionToolbar({
   onSelectWorkspaces,
   selecting,
 }: MobileSessionToolbarProps) {
+  // The row is measured, not breakpointed. The drawer is the device's width, and
+  // the primary pill plus six 38px controls need 316px of row — more than a
+  // 390px phone offers once the drawer's 24px of padding is gone. A
+  // `@container` query could not fix that: it would keep hiding controls after
+  // a tablet widened the drawer.
+  const { ref: rowRef, width } = useToolbarRowWidth(0);
+  const capacity = mobileToolbarCapacity(width);
+  const visible: Record<string, true> = {};
+  for (const control of MOBILE_TOOLBAR_PRIORITY.slice(0, capacity)) visible[control] = true;
+  const hidden = MOBILE_TOOLBAR_PRIORITY.slice(capacity);
+
+  const archiveLabel = showArchived ? 'Hide archived sessions' : 'Show archived sessions';
+  const schedulerLabel = scheduledCount > 0 ? `Scheduled tasks (${scheduledCount} armed)` : 'Scheduled tasks';
+
+  /** What the `⋯` menu offers, in priority order. */
+  const overflowActions: OverflowAction[] = [];
+  if (hidden.includes('new-workspace')) {
+    overflowActions.push({ id: 'new-workspace', label: 'New Workspace', icon: FolderPlus, onSelect: onNewWorkspace });
+  }
+  if (hidden.includes('refresh')) {
+    overflowActions.push({ id: 'refresh', label: 'Refresh sessions', icon: RefreshCw, onSelect: onRefresh });
+  }
+  if (hidden.includes('scheduler')) {
+    overflowActions.push({ id: 'scheduler', label: schedulerLabel, icon: Calendar, onSelect: onScheduler });
+  }
+  if (hidden.includes('archive')) {
+    overflowActions.push({ id: 'archive', label: archiveLabel, icon: Archive, onSelect: onToggleArchived, active: showArchived });
+  }
+  if (hidden.includes('select')) {
+    overflowActions.push({
+      id: 'select',
+      label: selecting ? 'Cancel selection' : 'Select workspaces',
+      icon: ListChecks,
+      onSelect: onSelectWorkspaces,
+      active: selecting,
+    });
+  }
+
   return (
-    <div className="@container p-3 border-b border-ink/10 flex flex-col space-y-2.5 flex-shrink-0 bg-canvas">
+    <div className="p-3 border-b border-ink/10 flex flex-col space-y-2.5 flex-shrink-0 bg-canvas">
       {/* Row 1: Primary + New Session Button & Quick Utility Buttons */}
-      <div className="flex items-center space-x-2">
-        {/* Large Ergonomic New Session Button. Its label drops below a narrow
-            drawer (@container, not the viewport) so the five fixed-size utility
-            buttons beside it can never squeeze it past the row's own width.
-            Measured: the row needs 356px of CONTAINER for the label to fit
-            (190px of buttons + 40px of gaps + 51px of icon/padding + the 75px
-            label), and the container is the viewport minus the toolbar's 12px
-            of padding each side — so 360px of container (a 384px viewport)
-            is the point the label stops fitting. The `aria-label` is not
-            optional: hiding the visible text would otherwise leave the button
-            with no accessible name at all, which is what a phone-width
-            screen reader reads first. */}
+      <div ref={rowRef} className="flex items-center space-x-2">
+        {/* Large Ergonomic New Session Button. Its label is budgeted for in
+            FULL by `mobileToolbarCapacity` (126px, the desktop row's rule), so
+            it never ellipsises and never leaves the row: what gives way on a
+            narrow drawer is a utility control, which moves into the `⋯` menu.
+            `shrink-0` on the icon is the belt to that braces — measured with
+            both as ordinary flex items, the label's `whitespace-nowrap`
+            min-content refused to shrink and the `Plus` absorbed the whole
+            shortfall (15px at 430, 1px at 412, 0px at 390/375/360), so the
+            phone's primary action was a blank pill exactly where the drawer
+            first dropped the label. The `aria-label` still carries the name
+            for a screen reader. */}
         <button
           type="button"
           onClick={onNewSession}
@@ -74,119 +125,128 @@ export function MobileSessionToolbar({
           title="New Session"
           className="flex-1 min-w-0 h-9.5 flex items-center justify-center space-x-2 px-3.5 rounded-xl bg-ink text-canvas hover:bg-ink/90 active:scale-[0.98] text-xs font-semibold transition-all shadow-xs"
         >
-          <Plus size={15} strokeWidth={2.4} />
-          <span className="hidden @[360px]:inline whitespace-nowrap">New Session</span>
+          <Plus size={15} strokeWidth={2.4} className="shrink-0" />
+          <span className="min-w-0 truncate">New Session</span>
         </button>
 
-        {/* New Workspace / Folder button */}
-        <button
-          type="button"
-          onClick={onNewWorkspace}
-          className="w-9.5 h-9.5 rounded-xl border border-ink/15 bg-paper hover:bg-ink/5 active:scale-95 text-ink/80 hover:text-ink flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs"
-          title="New Workspace"
-          aria-label="New Workspace"
-        >
-          <FolderPlus size={16} strokeWidth={1.8} />
-        </button>
+        {visible['new-workspace'] && (
+          <button
+            type="button"
+            onClick={onNewWorkspace}
+            className={`${CONTROL_CLASS} ${CONTROL_IDLE}`}
+            title="New Workspace"
+            aria-label="New Workspace"
+          >
+            <FolderPlus size={16} strokeWidth={1.8} />
+          </button>
+        )}
 
         {/* Scheduler button. The badge is the whole point of the count: a
             button that opens a list you cannot see the state of reads as
             decorative, which is exactly what this control used to be. */}
-        <button
-          type="button"
-          onClick={onScheduler}
-          className="relative w-9.5 h-9.5 rounded-xl border border-ink/15 bg-paper hover:bg-ink/5 active:scale-95 text-ink/80 hover:text-ink flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs"
-          title={scheduledCount > 0 ? `Scheduled tasks (${scheduledCount} armed)` : 'Scheduled tasks'}
-          aria-label={scheduledCount > 0 ? `Scheduled tasks, ${scheduledCount} armed` : 'Scheduled tasks'}
-        >
-          <Calendar size={16} strokeWidth={1.8} />
-          {scheduledCount > 0 && (
-            <span className="absolute -top-0.5 -right-0.5 min-w-[13px] h-[13px] px-[3px] rounded-full bg-ink text-canvas text-[8px] leading-[13px] text-center font-semibold">
-              {scheduledCount > 9 ? '9+' : scheduledCount}
-            </span>
-          )}
-        </button>
+        {visible['scheduler'] && (
+          <button
+            type="button"
+            onClick={onScheduler}
+            className={`relative ${CONTROL_CLASS} ${CONTROL_IDLE}`}
+            title={schedulerLabel}
+            aria-label={scheduledCount > 0 ? `Scheduled tasks, ${scheduledCount} armed` : 'Scheduled tasks'}
+          >
+            <Calendar size={16} strokeWidth={1.8} />
+            {scheduledCount > 0 && (
+              <span className="absolute -top-0.5 -right-0.5 min-w-[13px] h-[13px] px-[3px] rounded-full bg-ink text-canvas text-[8px] leading-[13px] text-center font-semibold">
+                {scheduledCount > 9 ? '9+' : scheduledCount}
+              </span>
+            )}
+          </button>
+        )}
 
         {/* Archive toggle — its own button, the same shape as Scheduler's.
             It used to live inside the sort dropdown under a "Filter" heading,
             which made a view filter look like a sort mode: the control that
             decides whether archived rows are on screen was hidden one tap
-            deeper than the control that reorders them. The pressed state is
-            carried by the button itself (and by the pill in row 3), so the
-            dropdown no longer needs to report it. */}
-        <button
-          type="button"
-          onClick={onToggleArchived}
-          aria-pressed={showArchived}
-          className={`w-9.5 h-9.5 rounded-xl border active:scale-95 flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs ${
-            showArchived
-              ? 'bg-amber-500/15 border-amber-500/40 text-amber-900'
-              : 'border-ink/15 bg-paper hover:bg-ink/5 text-ink/80 hover:text-ink'
-          }`}
-          title={showArchived ? 'Hide archived sessions' : 'Show archived sessions'}
-          aria-label={showArchived ? 'Hide archived sessions' : 'Show archived sessions'}
-        >
-          <Archive size={16} strokeWidth={1.8} />
-        </button>
+            deeper than the control that reorders them. */}
+        {visible['archive'] && (
+          <button
+            type="button"
+            onClick={onToggleArchived}
+            aria-pressed={showArchived}
+            className={`${CONTROL_CLASS} ${showArchived ? 'bg-amber-500/15 border-amber-500/40 text-amber-900' : CONTROL_IDLE}`}
+            title={archiveLabel}
+            aria-label={archiveLabel}
+          >
+            <Archive size={16} strokeWidth={1.8} />
+          </button>
+        )}
 
         {/* Batch selection over the WORKSPACES. A mode, like search, so it
             sits with the view controls and reports its pressed state — and it
             is the only way into the workspace batch, because a workspace has
             no row of its own to long-press. */}
-        <button
-          type="button"
-          onClick={onSelectWorkspaces}
-          aria-pressed={selecting}
-          className={`w-9.5 h-9.5 rounded-xl border active:scale-95 flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs ${
-            selecting
-              ? 'bg-ink/10 text-ink border-ink/30'
-              : 'border-ink/15 bg-paper hover:bg-ink/5 text-ink/80 hover:text-ink'
-          }`}
-          title={selecting ? 'Cancel selection' : 'Select workspaces'}
-          aria-label={selecting ? 'Cancel selection' : 'Select workspaces'}
-        >
-          <ListChecks size={16} strokeWidth={1.8} />
-        </button>
+        {visible['select'] && (
+          <button
+            type="button"
+            onClick={onSelectWorkspaces}
+            aria-pressed={selecting}
+            className={`${CONTROL_CLASS} ${selecting ? CONTROL_ACTIVE : CONTROL_IDLE}`}
+            title={selecting ? 'Cancel selection' : 'Select workspaces'}
+            aria-label={selecting ? 'Cancel selection' : 'Select workspaces'}
+          >
+            <ListChecks size={16} strokeWidth={1.8} />
+          </button>
+        )}
 
         {/* Refresh sessions button — same action the desktop toolbar's
             RefreshCw performs: refetch the session list from the server.
             The icon spins for the duration of that fetch, so the click has a
             visible end; `refreshing` is raised only by this button's own load. */}
-        <button
-          type="button"
-          onClick={onRefresh}
-          className="w-9.5 h-9.5 rounded-xl border border-ink/15 bg-paper hover:bg-ink/5 active:scale-95 text-ink/80 hover:text-ink flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs"
-          title="Refresh sessions"
-          aria-label="Refresh sessions"
-          aria-busy={refreshing}
-        >
-          <RefreshCw size={15} strokeWidth={1.8} className={refreshing ? 'animate-spin' : undefined} />
-        </button>
-
-        {/* Sort Dropdown. Archive is NOT in here any more — it has its own
-            button in this row, so this control means one thing (the order of
-            the list) and its pressed state reads the sort alone. */}
-        <div className="relative flex-shrink-0" ref={optionsRef}>
+        {visible['refresh'] && (
           <button
             type="button"
-            onClick={onToggleOptions}
-            className={`w-9.5 h-9.5 rounded-xl border active:scale-95 flex items-center justify-center transition-all cursor-pointer shadow-xs ${
-              optionsOpen || sortOption !== 'A-Z'
-                ? 'bg-ink/10 text-ink border-ink/30' 
-                : 'border-ink/15 bg-paper hover:bg-ink/5 text-ink/80 hover:text-ink'
-            }`}
-            title="Sort workspaces"
-            aria-label="Sort workspaces"
+            onClick={onRefresh}
+            className={`${CONTROL_CLASS} ${CONTROL_IDLE}`}
+            title="Refresh sessions"
+            aria-label="Refresh sessions"
+            aria-busy={refreshing}
           >
-            <ArrowUpDown size={15} strokeWidth={1.8} />
+            <RefreshCw size={15} strokeWidth={1.8} className={refreshing ? 'animate-spin' : undefined} />
           </button>
+        )}
 
-          {optionsOpen && (
-            <div className="absolute right-0 top-full mt-2 w-52 bg-paper border border-ink/15 rounded-xl shadow-xl z-50 p-2 text-xs">
-              <SortMenu variant="mobile" sortOption={sortOption} onSortChange={onSortChange} />
-            </div>
-          )}
-        </div>
+        {/* Sort Dropdown. Archive is NOT in here any more — it has its own
+            button in this row, so this control means one thing (the order of
+            the list) and its pressed state reads the sort alone. */}
+        {visible['sort'] && (
+          <div className="relative flex-shrink-0" ref={optionsRef}>
+            <button
+              type="button"
+              onClick={onToggleOptions}
+              className={`${CONTROL_CLASS} ${optionsOpen || sortOption !== 'A-Z' ? CONTROL_ACTIVE : CONTROL_IDLE}`}
+              title="Sort workspaces"
+              aria-label="Sort workspaces"
+            >
+              <ArrowUpDown size={15} strokeWidth={1.8} />
+            </button>
+
+            {optionsOpen && (
+              <div className="absolute right-0 top-full mt-2 w-52 bg-paper border border-ink/15 rounded-xl shadow-xl z-50 p-2 text-xs">
+                <SortMenu variant="mobile" sortOption={sortOption} onSortChange={onSortChange} />
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Whatever the row could not hold. The sort control's own options
+            travel with it, so a narrow drawer can still reorder the list. */}
+        {hidden.length > 0 && (
+          <ToolbarOverflowMenu
+            actions={overflowActions}
+            sortHidden={hidden.includes('sort')}
+            sortOption={sortOption}
+            onSortChange={onSortChange}
+            layout="mobile"
+          />
+        )}
       </div>
 
       {/* Row 2: Search Input Bar */}
@@ -217,9 +277,9 @@ export function MobileSessionToolbar({
           {sortOption !== 'A-Z' && (
             <span className="inline-flex items-center space-x-1 bg-ink/5 border border-ink/10 text-ink/80 rounded-lg px-2 py-0.5 text-[10px] font-mono">
               <span>Sort: {sortOption.replace('_', ' ')}</span>
-              <button 
-                type="button" 
-                onClick={onResetSort} 
+              <button
+                type="button"
+                onClick={onResetSort}
                 className="hover:text-ink ml-0.5"
                 title="Reset sort"
               >
@@ -231,9 +291,9 @@ export function MobileSessionToolbar({
             <span className="inline-flex items-center space-x-1 bg-amber-500/15 border border-amber-500/25 text-amber-900 rounded-lg px-2 py-0.5 text-[10px] font-mono">
               <Archive size={10} />
               <span>Archived</span>
-              <button 
-                type="button" 
-                onClick={onHideArchived} 
+              <button
+                type="button"
+                onClick={onHideArchived}
                 className="hover:text-amber-950 ml-0.5"
                 title="Hide archived"
               >

package/src/client/components/workspace/chat-timeline/ComposerDock.tsx

@@ -52,6 +52,13 @@ interface ComposerDockProps {
   sessionModel: { provider: string; modelId: string } | null;
   sessionThinkingLevel?: string | null;
   variant: 'desktop' | 'mobile';
+  /**
+   * The phone reader is scrolled back through the transcript, so the composer
+   * may give its height back (`ChatInput.shrinkWhileReading`). Derived from the
+   * timeline's own scroll geometry — the same signal that draws the
+   * scroll-to-bottom affordance.
+   */
+  shrinkWhileReading?: boolean;
 }
 
 /**
@@ -91,6 +98,7 @@ export function ComposerDock({
   sessionModel,
   sessionThinkingLevel,
   variant,
+  shrinkWhileReading = false,
 }: ComposerDockProps) {
   // Side questions take over the composer entirely: the chat's own input is
   // hidden while the form is open, so a stray Enter cannot send to the wrong
@@ -159,6 +167,7 @@ export function ComposerDock({
             sessionThinkingLevel={sessionThinkingLevel}
             variant={variant}
             expandable
+            shrinkWhileReading={shrinkWhileReading}
           />
         )}
       </div>

package/src/client/components/workspace/chat-timeline/TimelineBody.tsx

@@ -4,6 +4,7 @@ import { MessageList } from '@/client/components/workspace/chat-timeline/Message
 import { MinimapShortcuts } from '@/client/components/workspace/chat-timeline/MinimapShortcuts';
 import { MobileTurnJump } from '@/client/components/workspace/chat-timeline/MobileTurnJump';
 import { LoadingOlderIndicator } from '@/client/components/workspace/chat-timeline/SessionSkeleton';
+import { OrphanAsks } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-panel/OrphanAsks';
 import type { Attachment, ChatMessageData, UserTurnRef } from '@/shared/types';
 
 interface TimelineBodyProps {
@@ -115,6 +116,11 @@ export function TimelineBody({
             onNewChat={onNewChat}
             isMobile={isMobile}
           />
+          {/* An ask whose tool card this client cannot see (a subagent's, an
+              extension's own dialog, a call outside the loaded window) still
+              blocks the agent. It renders HERE, as the last row of the
+              conversation, never as a modal over it. */}
+          <OrphanAsks />
         </div>
       </div>