@kabmo-labs/kabmo 0.0.1 → 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';
@@ -16,6 +17,12 @@ import { useSessionSidebarController } from '@/client/hooks/chat/omp/session-sid
 import { useScheduledTaskCount } from '@/client/hooks/workspace/scheduled-tasks';
 import { cloneWorkspaceFolder, createWorkspaceFolder } from '@/client/hooks/workspace/new-workspace';
 import { MobileSessionListSkeleton } from '@/client/components/mobile/mobile-session-sidebar/Skeleton';
+import { useBatchSelection } from '@/client/hooks/workspace/batch-selection';
+import { useBatchDeleteRun } from '@/client/hooks/workspace/batch-delete-run';
+import { BatchActionBar } from '@/client/components/common/batch-selection/BatchActionBar';
+import { BatchDeleteModal } from '@/client/components/common/batch-selection/BatchDeleteModal';
+import type { BatchBinding } from '@/client/components/common/batch-selection/types';
+import { liveSelection, selectableSessionIds } from '@/shared/lib/workspace/batch-select';
 
 interface MobileSessionSidebarProps {
   activeSessionId: number | string | null;
@@ -66,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 —
@@ -139,6 +149,40 @@ export function MobileSessionSidebar({
     setShowArchived(!showArchived);
   };
 
+  // Batch selection — same two modes and the same rules as the desktop sidebar
+  // (the state machine and the confirmation are shared hooks/components).
+  const batch = useBatchSelection();
+  const batchDelete = useBatchDeleteRun(refreshNow);
+
+  const scopeFolder = batch.scopeFolderId === null
+    ? null
+    : processedFolders.find((folder) => folder.id === batch.scopeFolderId) ?? null;
+  const batchAvailable = batch.mode === 'workspace'
+    ? processedFolders.map((folder) => String(folder.id))
+    : batch.mode === 'session'
+      ? selectableSessionIds(scopeFolder?.sessions ?? [], showArchived)
+      : [];
+  // Same rule as the desktop sidebar: the count and the payload are the LIVE
+  // selection, so a row removed elsewhere cannot be counted or sent.
+  const batchSelected = liveSelection(batch.selected, batchAvailable);
+
+  const batchBinding: BatchBinding | undefined = batch.mode
+    ? {
+        mode: batch.mode,
+        scopeFolderId: batch.scopeFolderId,
+        selected: batch.selected,
+        toggle: batch.toggle,
+        selectAllOf: batch.selectAllOf,
+        unselectAllOf: batch.unselectAllOf,
+        summaryOf: batch.summaryOf,
+      }
+    : undefined;
+
+  const startWorkspaceSelection = () => {
+    if (batch.mode === 'workspace') batch.end();
+    else batch.begin('workspace');
+  };
+
   return (
     <div className="flex flex-col h-full w-full bg-canvas text-ink relative select-none">
       
@@ -163,6 +207,8 @@ export function MobileSessionSidebar({
         onHideArchived={() => setShowArchived(false)}
         onSearchChange={setSearchQuery}
         onClearSearch={() => setSearchQuery('')}
+        onSelectWorkspaces={startWorkspaceSelection}
+        selecting={batch.mode !== null}
       />
 
       {initializing ? (
@@ -178,12 +224,29 @@ export function MobileSessionSidebar({
           onNewSessionForFolder={handleNewSessionForFolderAndClose}
           onToggleFolder={toggleFolder}
           onToast={pushToast}
+          batch={batchBinding}
+          onStartSessionSelection={(folderId) => batch.begin('session', folderId)}
+        />
+      )}
+
+      {batch.mode && (
+        <BatchActionBar
+          mode={batch.mode}
+          count={batchSelected.length}
+          total={batchAvailable.length}
+          busy={batchDelete.isDeleting}
+          scopeLabel={scopeFolder?.name}
+          onSelectAll={() => batch.selectAllOf(batchAvailable)}
+          onUnselectAll={() => batch.unselectAllOf(batchAvailable)}
+          onDelete={() => batchDelete.request(batchSelected)}
+          onCancel={batch.end}
         />
       )}
 
       <MobileSessionFooter
         onSettings={() => window.dispatchEvent(new CustomEvent('omp:open-settings', { detail: {} }))}
         onAbout={() => setAboutOpen(true)}
+        androidDownload={androidDownload}
         onDesktopToggle={onDesktopToggle}
         updateAvailable={updates.hasUpdate}
         onUpdateClick={() => {
@@ -216,6 +279,26 @@ export function MobileSessionSidebar({
           Its "Update now" hands the run to the About modal below. */}
       <UpdatePopup updates={updates} />
 
+      {/* Batch delete confirmation — same dialog the desktop draws. */}
+      <BatchDeleteModal
+        mode={batch.mode ?? 'session'}
+        count={batchDelete.pending.length}
+        scopeLabel={scopeFolder?.name}
+        isDeleting={batchDelete.isDeleting}
+        outcome={batchDelete.outcome}
+        onClose={() => {
+          const refusedCount = batchDelete.outcome?.refused.length ?? 0;
+          batchDelete.cancel();
+          if (batchDelete.outcome && refusedCount === 0) batch.end();
+        }}
+        onConfirm={() => {
+          const mode = batch.mode ?? 'session';
+          void batchDelete.confirm(mode).then((result) => {
+            if (result && result.refused.length === 0) batch.end();
+          });
+        }}
+      />
+
       <ToastStack toasts={toasts} onDismiss={dismissToast} />
 
     </div>

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/Item.tsx

@@ -10,11 +10,13 @@ import { useWorkspaceFolderActions } from '@/client/hooks/workspace/workspace-fo
 import { useSessionDelete } from '@/client/hooks/workspace/session-delete';
 import { SessionDeleteModal } from '@/client/components/common/session-delete-modal';
 import { getProjectIcon } from '@/shared/lib/workspace/project-icon';
-import { selectVisibleSessions } from '@/shared/lib/workspace/session-visibility';
 import { relativeTimeAgo } from '@/shared/lib/workspace/relative-time';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
 import type { WorkspaceFolderData } from '@/shared/types';
+import type { BatchBinding } from '@/client/components/common/batch-selection/types';
+import { folderBatchState } from '@/client/components/common/batch-selection/folder-state';
+import { SelectionCheckbox } from '@/client/components/common/batch-selection/SelectionCheckbox';
 
 interface MobileSessionCategoryProps {
   folder: WorkspaceFolderData;
@@ -26,6 +28,10 @@ interface MobileSessionCategoryProps {
   showArchived?: boolean;
   sessionStatus?: Record<string, 'stream' | 'finish' | 'abort'>;
   onToast?: (message: string, type?: 'success' | 'error') => void;
+  /** Present only while a batch selection is active; absent is the normal list. */
+  batch?: BatchBinding;
+  /** Start a session selection scoped to this workspace, from its `⋯` menu. */
+  onStartSessionSelection?: (folderId: number) => void;
 }
 
 export function MobileSessionCategory({
@@ -38,6 +44,8 @@ export function MobileSessionCategory({
   showArchived = false,
   sessionStatus = {},
   onToast,
+  batch,
+  onStartSessionSelection,
 }: MobileSessionCategoryProps) {
   const { visibleCount, showMore, showLess, canShowLess } = useShowMore();
   const { refresh } = useSidebarData();
@@ -91,23 +99,45 @@ export function MobileSessionCategory({
   const filteredSessions = (folder.sessions || []).filter((s) =>
     showArchived ? s.is_archived === 1 : s.is_archived !== 1
   );
-  // Same window as the desktop sidebar: the opened session and every live run
-  // stay on screen past the boundary, so nothing being watched is paginated
-  // away on the phone either.
-  const { rendered: visibleSessions, hiddenCount } = selectVisibleSessions(
-    filteredSessions,
-    visibleCount,
-    { activeSessionId, sessionStatus },
-  );
   const ProjectIcon = getProjectIcon(folder.icon);
 
+  // Batch rules are shared with the desktop category (`folderBatchState`), so
+  // the phone cannot offer a different scope, summary or pagination rule.
+  const {
+    folderCheckbox,
+    sessionCheckboxes,
+    folderSummary,
+    toggleFolderSelection,
+    rendered: visibleSessions,
+    hiddenCount,
+  } = folderBatchState({
+    batch,
+    folder,
+    sessions: filteredSessions,
+    showArchived,
+    visibleCount,
+    activeSessionId,
+    sessionStatus,
+  });
+  const listOpen = isExpanded || sessionCheckboxes;
+
   return (
     <div className="mb-4">
       <div
-        onClick={onToggleExpand}
+        onClick={batch ? undefined : onToggleExpand}
         className="flex items-center justify-between pl-4 pr-3 py-2 cursor-pointer hover:bg-ink/5 rounded-lg select-none transition-colors"
       >
         <div className="flex items-center space-x-2 min-w-0">
+          {folderCheckbox && folderSummary ? (
+            <SelectionCheckbox
+              size="md"
+              checked={folderSummary.all}
+              indeterminate={folderSummary.some}
+              label={`Select ${folder.name}`}
+              onChange={toggleFolderSelection}
+            />
+          ) : (
+          <>
           {/* The folder glyph occupies the same 16px left slot the session rows
               give their roster toggle, so the two columns line up down the
               drawer — the icon, the chevron and every row's status glyph share
@@ -131,6 +161,8 @@ export function MobileSessionCategory({
               />
             )}
           </span>
+          </>
+          )}
 
           <span className="text-sm font-semibold text-ink truncate">
             {folder.name}
@@ -146,6 +178,8 @@ export function MobileSessionCategory({
             <GitBranch size={13} className="text-ink/50 ml-1" />
           )}
 
+          {!batch && (
+          <>
           <button
             type="button"
             onClick={(event) => {
@@ -178,6 +212,11 @@ export function MobileSessionCategory({
                   variant="mobile"
                   isPinned={folder.isPinned}
                   onOpenFolder={onOpenFolder}
+                  onSelectSessions={
+                    onStartSessionSelection
+                      ? () => { setShowMenu(false); onStartSessionSelection(folder.id); }
+                      : undefined
+                  }
                   confirmDelete={confirmDelete}
                   onPin={onPin}
                   onDelete={onDelete}
@@ -189,10 +228,12 @@ export function MobileSessionCategory({
           </div>
 
           {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+          </>
+          )}
         </div>
       </div>
 
-      {isExpanded && (
+      {listOpen && (
         <div className="mt-0.5 space-y-0.5 pl-2">
           {visibleSessions.map((session) => {
             const sessionKey = String(session.id);
@@ -231,6 +272,9 @@ export function MobileSessionCategory({
                   onRenameWithAi={
                     sessionKey.startsWith('new-') ? undefined : () => void handleRenameWithAi(session)
                   }
+                  selectable={sessionCheckboxes}
+                  selected={Boolean(batch?.selected.includes(sessionKey))}
+                  onToggleSelect={batch ? () => batch.toggle(sessionKey) : undefined}
                 />
                 {isRosterOpen && (
                   <SubagentList sessionId={session.id} isActiveSession={isSessionActive} />
@@ -242,7 +286,7 @@ export function MobileSessionCategory({
           {/* Reveal / collapse controls, one row — parity with the desktop
               category. Same window, so the phone cannot offer a different
               boundary than the sidebar. */}
-          {(hiddenCount > 0 || canShowLess) && (
+          {(hiddenCount > 0 || canShowLess) && !sessionCheckboxes && (
             <div className="flex items-center gap-1">
               {hiddenCount > 0 && (
                 <button

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

@@ -1,4 +1,5 @@
 import { MobileSessionCategory } from '@/client/components/mobile/mobile-session-sidebar/Item';
+import type { BatchBinding } from '@/client/components/common/batch-selection/types';
 import type { WorkspaceFolderData } from '@/shared/types';
 
 interface MobileSessionListProps {
@@ -12,6 +13,9 @@ interface MobileSessionListProps {
   onToggleFolder: (folderId: number) => void;
   /** Surfaces a refused folder action (the reveal endpoint's own reason). */
   onToast?: (message: string, type?: 'success' | 'error') => void;
+  /** Present only while a batch selection is active. */
+  batch?: BatchBinding;
+  onStartSessionSelection?: (folderId: number) => void;
 }
 
 export function MobileSessionList({
@@ -24,6 +28,8 @@ export function MobileSessionList({
   onNewSessionForFolder,
   onToggleFolder,
   onToast,
+  batch,
+  onStartSessionSelection,
 }: MobileSessionListProps) {
   // No fade wiring here: the app-wide scrollbar rule reveals this list's bar
   // from the document's own capture-phase listener (`lib/scrollbar-activity`),
@@ -47,6 +53,8 @@ export function MobileSessionList({
             showArchived={showArchived}
             sessionStatus={sessionStatus}
             onToast={onToast}
+            batch={batch}
+            onStartSessionSelection={onStartSessionSelection}
           />
         ))
       )}

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

@@ -3,6 +3,7 @@ import type { SessionItemData } from '@/shared/types';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 import { useSessionRenaming } from '@/client/hooks/workspace/renaming-sessions';
 import { SessionActionsMenu, useRowMenu } from '@/client/components/common/session-actions-menu';
+import { SelectionCheckbox } from '@/client/components/common/batch-selection/SelectionCheckbox';
 
 export interface MobileSessionRowProps {
   session: SessionItemData;
@@ -25,6 +26,11 @@ export interface MobileSessionRowProps {
   /** Ask omp to name this session from its transcript. Omitted for a pending
    *  `new-…` chat, which has no transcript to derive a title from. */
   onRenameWithAi?: () => void;
+  /** Draw a checkbox and let the row's tap toggle the selection instead of
+   *  opening the session (batch mode). */
+  selectable?: boolean;
+  selected?: boolean;
+  onToggleSelect?: () => void;
 }
 
 export function MobileSessionRow({
@@ -41,6 +47,9 @@ export function MobileSessionRow({
   onDelete,
   onRename,
   onRenameWithAi,
+  selectable = false,
+  selected = false,
+  onToggleSelect,
 }: MobileSessionRowProps) {
   const {
     isEditing,
@@ -91,14 +100,16 @@ export function MobileSessionRow({
       <div
         data-testid="session-item"
         data-session-id={String(session.id)}
-        onContextMenu={hasActions ? menu.openAtCursor : undefined}
+        onContextMenu={hasActions && !selectable ? menu.openAtCursor : undefined}
         className={`w-full rounded-lg flex items-center transition-colors ${
-          isActive ? 'bg-ink/10 font-medium text-ink' : 'hover:bg-ink/5 text-ink/85'
+          selectable && selected
+            ? 'bg-ink/10 ring-1 ring-inset ring-ink/20 text-ink'
+            : isActive ? 'bg-ink/10 font-medium text-ink' : 'hover:bg-ink/5 text-ink/85'
         }`}
       >
         <button
           type="button"
-          onClick={onSelect}
+          onClick={selectable ? onToggleSelect : onSelect}
           className="flex-1 text-left pl-2 pr-3 py-2 flex items-center justify-between min-w-0"
         >
           <div className="flex items-center min-w-0 pr-2">
@@ -107,7 +118,16 @@ export function MobileSessionRow({
                 outranks the run spinner — the spinner says work is happening,
                 the question mark says it is YOUR turn (desktop parity). An
                 in-flight rename outranks both, for the same reason it does
-                there: it answers a click that is still pending. */}
+                there: it answers a click that is still pending.
+                In batch mode the slot carries the checkbox instead: a row that
+                is a choice should not also report a run. */}
+            {selectable ? (
+              <SelectionCheckbox
+                checked={selected}
+                label={`Select ${session.title}`}
+                onChange={() => onToggleSelect?.()}
+              />
+            ) : (
             <span className="w-4 flex-shrink-0 flex items-center justify-center">
               {renaming ? (
                 <span role="status" aria-label="Generating a name…">
@@ -121,6 +141,7 @@ export function MobileSessionRow({
                 <Check size={13} className="text-ink/50" />
               ) : null}
             </span>
+            )}
             <span className="text-xs truncate leading-snug ml-2">{title}</span>
           </div>
 
@@ -134,7 +155,7 @@ export function MobileSessionRow({
             column so the trailing glyph's centre stays 19px from the row's right
             edge whether the last element is this trigger or the chevron. Without
             it the glyphs step in and out from row to row. */}
-        {hasActions && (
+        {hasActions && !selectable && (
           <button
             type="button"
             onClick={menu.openBelow}
@@ -151,7 +172,7 @@ export function MobileSessionRow({
         {/* Last element, so its glyph sits in the folder header's chevron column.
             `p-1.5 mr-1.5` centres a 14px glyph on that column while keeping a
             touch-sized tap target. */}
-        {showChevron && (
+        {showChevron && !selectable && (
           <button
             type="button"
             onClick={onToggleExpand}

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

@@ -72,6 +72,8 @@ async function mount(overrides: Partial<MobileSessionToolbarProps> = {}) {
       onHideArchived: () => { calls.hidden += 1; },
       onSearchChange: () => {},
       onClearSearch: () => {},
+      onSelectWorkspaces: () => {},
+      selecting: false,
       ...overrides,
     }), container);
   });
@@ -131,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;
+    }
+  });
+});