@kabmo-labs/kabmo 0.0.1 → 0.2.0

package/src/client/components/common/workspace-options-menu/index.tsx

@@ -13,7 +13,7 @@
  * source of truth.
  */
 
-import { FolderOpen, Pin, PinOff, Trash2 } from 'lucide-preact';
+import { FolderOpen, ListChecks, Pin, PinOff, Trash2 } from 'lucide-preact';
 
 interface WorkspaceOptionsMenuProps {
   variant: 'desktop' | 'mobile';
@@ -21,6 +21,8 @@ interface WorkspaceOptionsMenuProps {
   /** Reveal the workspace directory in the platform file manager. Omitted for
    *  an unbound folder, which has no directory of its own. */
   onOpenFolder?: () => void;
+  /** Enter the session batch-selection mode scoped to this workspace. */
+  onSelectSessions?: () => void;
   confirmDelete: boolean;
   onPin: () => void;
   onDelete: () => void;
@@ -32,6 +34,7 @@ export function WorkspaceOptionsMenu({
   variant,
   isPinned = false,
   onOpenFolder,
+  onSelectSessions,
   confirmDelete,
   onPin,
   onDelete,
@@ -62,6 +65,12 @@ export function WorkspaceOptionsMenu({
           {isPinned ? <PinOff size={13} /> : <Pin size={13} />}
           <span>{isPinned ? 'Unpin Workspace' : 'Pin Workspace'}</span>
         </button>
+        {onSelectSessions && (
+          <button type="button" onClick={onSelectSessions} className="w-full text-left px-3 py-2 hover:bg-ink/5 text-ink/80 flex items-center space-x-2">
+            <ListChecks size={13} />
+            <span>Select sessions</span>
+          </button>
+        )}
         <button type="button" onClick={onRequestDelete} className="w-full text-left px-3 py-2 hover:bg-error/10 text-error flex items-center space-x-2">
           <Trash2 size={13} />
           <span>Delete Workspace</span>
@@ -73,27 +82,32 @@ export function WorkspaceOptionsMenu({
   return confirmDelete ? (
     <>
       <div className="px-3 py-1.5 text-xs text-ink/80 font-medium">Delete workspace?</div>
-      <div className="px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-error" onClick={onDelete}>
+      <button type="button" onClick={onDelete} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-error">
         <Trash2 size={12} /><span>Yes, delete</span>
-      </div>
-      <div className="px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/70" onClick={onCancelDelete}>
+      </button>
+      <button type="button" onClick={onCancelDelete} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/70">
         <span>Cancel</span>
-      </div>
+      </button>
     </>
   ) : (
     <>
       {onOpenFolder && (
-        <div className="px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/80" onClick={onOpenFolder}>
+        <button type="button" onClick={onOpenFolder} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/80">
           <FolderOpen size={12} /><span>Go to Explorer</span>
-        </div>
+        </button>
       )}
-      <div className="px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/80" onClick={onPin}>
+      <button type="button" onClick={onPin} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/80">
         {isPinned ? <PinOff size={12} /> : <Pin size={12} />}
         <span>{isPinned ? 'Unpin Workspace' : 'Pin Workspace'}</span>
-      </div>
-      <div className="px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-error" onClick={onRequestDelete}>
+      </button>
+      {onSelectSessions && (
+        <button type="button" onClick={onSelectSessions} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/80">
+          <ListChecks size={12} /><span>Select sessions</span>
+        </button>
+      )}
+      <button type="button" onClick={onRequestDelete} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-error">
         <Trash2 size={12} /><span>Delete Workspace</span>
-      </div>
+      </button>
     </>
   );
 }

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

@@ -0,0 +1,169 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * A workspace's header row in the desktop sidebar: the disclosure mark, the
+ * folder's name, its two actions, and — while a batch selection is active — the
+ * checkbox that selects it (workspace mode) or all of its rows (session mode).
+ *
+ * Split out of `CategoryItem` because the row now has two modes' worth of
+ * markup and the parent is also the list. The checkbox rules stay in the parent
+ * (they are about the selection, not the drawing) and arrive as `checkbox`
+ * props; this file only decides how the two states look.
+ */
+
+import { ChevronDown, ChevronRight, MoreHorizontal, Pin, Plus } from 'lucide-preact';
+import { SelectionCheckbox } from '@/client/components/common/batch-selection/SelectionCheckbox';
+import { WorkspaceOptionsMenu } from '@/client/components/common/workspace-options-menu';
+import { getProjectIcon } from '@/shared/lib/workspace/project-icon';
+import type { WorkspaceFolderData } from '@/shared/types';
+
+export interface CategoryHeaderCheckbox {
+  checked: boolean;
+  indeterminate: boolean;
+  label: string;
+  onChange: () => void;
+}
+
+export interface CategoryHeaderProps {
+  folder: WorkspaceFolderData;
+  isOpen: boolean;
+  onToggleFolder: () => void;
+  /** Null when this workspace is not part of the active selection. */
+  checkbox: CategoryHeaderCheckbox | null;
+  /** True while a batch selection is active — actions are hidden then. */
+  batchActive: boolean;
+  menuRef: { current: HTMLDivElement | null };
+  showMenu: boolean;
+  onToggleMenu: () => void;
+  onNewSession: () => void;
+  onOpenFolder?: () => void;
+  onSelectSessions?: () => void;
+  confirmDelete: boolean;
+  onPin: () => void;
+  onDelete: () => void;
+  onRequestDelete: () => void;
+  onCancelDelete: () => void;
+}
+
+export function CategoryHeader({
+  folder,
+  isOpen,
+  onToggleFolder,
+  checkbox,
+  batchActive,
+  menuRef,
+  showMenu,
+  onToggleMenu,
+  onNewSession,
+  onOpenFolder,
+  onSelectSessions,
+  confirmDelete,
+  onPin,
+  onDelete,
+  onRequestDelete,
+  onCancelDelete,
+}: CategoryHeaderProps) {
+  const ProjectIcon = getProjectIcon(folder.icon);
+
+  return (
+    <div className="group flex items-center justify-between h-7 text-xs font-semibold text-ink px-2 hover:bg-ink/5 rounded-md transition-colors select-none">
+      <div
+        className="flex-1 h-full flex items-center cursor-pointer min-w-0"
+        onClick={batchActive ? undefined : onToggleFolder}
+      >
+        {checkbox ? (
+          <>
+            <SelectionCheckbox
+              size="md"
+              checked={checkbox.checked}
+              indeterminate={checkbox.indeterminate}
+              label={checkbox.label}
+              onChange={checkbox.onChange}
+            />
+            <span className="w-2 shrink-0" />
+          </>
+        ) : (
+          <>
+            {/* One 16px slot owns both glyphs, exactly like a session row's
+                status/chevron slot: the folder mark sits there at rest and hands
+                the slot to the disclosure chevron on hover, so the icon column
+                reads as one line AND the header says what clicking it does. */}
+            <span className="relative w-4 h-4 flex items-center justify-center shrink-0">
+              <span className="absolute inset-0 flex items-center justify-center transition-opacity group-hover:opacity-0 touch-hidden">
+                {folder.customIconUrl ? (
+                  <img
+                    src={folder.customIconUrl}
+                    alt=""
+                    className="w-[15px] h-[15px] rounded-xs object-contain shrink-0"
+                    referrerPolicy="no-referrer"
+                  />
+                ) : (
+                  <ProjectIcon
+                    size={15}
+                    className="text-ink/75"
+                    style={{ color: folder.accentColor || undefined }}
+                  />
+                )}
+              </span>
+              <span className="absolute inset-0 flex items-center justify-center text-ink/60 opacity-0 transition-opacity group-hover:opacity-100 touch-visible">
+                {isOpen ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
+              </span>
+            </span>
+            <span className="w-2 shrink-0" />
+          </>
+        )}
+        {folder.isPinned && <Pin size={11} className="text-ink/60 shrink-0 mr-1.5" />}
+        <span className="truncate text-[13px] font-semibold tracking-tight">{folder.name}</span>
+      </div>
+
+      {/* Workspace Actions — always drawn, matching the drawer's folder header.
+          They used to appear only on hover, which left the folder's own
+          affordances undiscoverable in a sidebar that has no other cue. In
+          batch mode they are hidden: the row is a choice, and an action beside
+          a checkbox is a second thing the click could mean. */}
+      {!batchActive && (
+        <div className="flex items-center space-x-0.5 pl-1">
+          <button
+            type="button"
+            title="New Session"
+            className="w-5 h-5 flex items-center justify-center text-ink/40 hover:text-ink hover:bg-ink/10 rounded cursor-pointer transition-colors"
+            onClick={(e) => { e.stopPropagation(); onNewSession(); }}
+          >
+            <Plus size={12} />
+          </button>
+
+          <div className="relative flex items-center" ref={menuRef}>
+            <button
+              type="button"
+              title={`Options for ${folder.name}`}
+              aria-label={`Options for ${folder.name}`}
+              className="w-5 h-5 flex items-center justify-center text-ink/40 hover:text-ink hover:bg-ink/10 rounded cursor-pointer transition-colors"
+              onClick={(e) => { e.stopPropagation(); onToggleMenu(); }}
+            >
+              <MoreHorizontal size={12} />
+            </button>
+
+            {showMenu && (
+              <div className="absolute right-0 top-full mt-1 w-44 bg-paper border border-ink/15 rounded-md shadow-lg z-50 py-1 text-xs">
+                <WorkspaceOptionsMenu
+                  variant="desktop"
+                  isPinned={folder.isPinned}
+                  onOpenFolder={onOpenFolder}
+                  onSelectSessions={onSelectSessions}
+                  confirmDelete={confirmDelete}
+                  onPin={onPin}
+                  onDelete={onDelete}
+                  onRequestDelete={onRequestDelete}
+                  onCancelDelete={onCancelDelete}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
-import { ChevronDown, ChevronRight, ChevronUp, MoreHorizontal, Pin, Plus } from 'lucide-preact';
+import { ChevronDown, ChevronUp } from 'lucide-preact';
 import { useSearchParams } from '@/client/lib/router/search-params';
 import { useFetcher } from '@/client/lib/router/fetcher';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
@@ -8,13 +8,14 @@ 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 { SessionItem } from '@/client/components/layout/session-sidebar/SessionItem';
+import { CategoryHeader } from '@/client/components/layout/session-sidebar/CategoryHeader';
 import { SubagentList } from '@/client/components/common/subagent-list';
-import { WorkspaceOptionsMenu } from '@/client/components/common/workspace-options-menu';
 import { useExpandedSessions } from '@/client/hooks/workspace/expanded-sessions';
-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 { useSidebarData } from '@/client/hooks/chat/omp/session-list';
+import type { BatchBinding } from '@/client/components/common/batch-selection/types';
+import { folderBatchState } from '@/client/components/common/batch-selection/folder-state';
+import type { WorkspaceFolderData } from '@/shared/types';
 
 export { SessionItem };
 
@@ -27,8 +28,10 @@ export function Category({
   showArchived = false,
   sessionStatus = {},
   onToast,
+  batch,
+  onStartSessionSelection,
 }: { 
-  folder: any;
+  folder: WorkspaceFolderData;
   activeSessionId: number | string | null;
   onSelectSession: (id: number | string) => void;
   onNewSessionForFolder: (id: number) => void;
@@ -36,6 +39,10 @@ export function Category({
   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;
 }) {
   const [isOpen, setIsOpen] = useState(folder.isExpanded || false);
   const [showMenu, setShowMenu] = useState(false);
@@ -74,7 +81,6 @@ export function Category({
   });
 
   const allSessions = folder.sessions;
-  const ProjectIcon = getProjectIcon(folder.icon);
 
   const toggleFolder = () => {
     const nextState = !isOpen;
@@ -113,101 +119,73 @@ export function Category({
 
   const isActuallyOpen = forceExpanded || isOpen;
 
-  const visibleSessions = (allSessions || []).filter((s: any) =>
+  const visibleSessions = (allSessions || []).filter((s) =>
     showArchived ? s.is_archived === 1 : s.is_archived !== 1
   );
 
-  // The opened session and every live run are exempt from the window, so a
-  // session being watched is never one of the hidden rows.
-  const { rendered: renderedSessions, hiddenCount } = selectVisibleSessions(
-    visibleSessions,
+  // Batch rules live in one shared module — the phone's drawer item reads the
+  // same function, so the two layouts cannot disagree about which rows a
+  // header owns or what its checkbox reports.
+  const {
+    folderCheckbox,
+    sessionCheckboxes,
+    folderSummary,
+    toggleFolderSelection,
+    rendered: renderedSessions,
+    hiddenCount,
+  } = folderBatchState({
+    batch,
+    folder,
+    sessions: visibleSessions,
+    showArchived,
     visibleCount,
-    { activeSessionId, sessionStatus },
-  );
+    activeSessionId,
+    sessionStatus,
+  });
+  // A session selection opens every folder: a checkbox on a collapsed workspace
+  // would let the user select rows they cannot see or unselect. The WORKSPACE
+  // mode leaves the expansion alone — it selects folders, not rows.
+  const listOpen = isActuallyOpen || sessionCheckboxes;
   const hasMore = hiddenCount > 0;
 
   return (
     <div className="space-y-1">
-      {/* Folder Header */}
-      <div 
-        className="group flex items-center justify-between h-7 text-xs font-semibold text-ink px-2 hover:bg-ink/5 rounded-md transition-colors select-none"
-      >
-        <div className="flex-1 h-full flex items-center cursor-pointer min-w-0" onClick={toggleFolder}>
-          {/* One 16px slot owns both glyphs, exactly like a session row's
-              status/chevron slot: the folder mark sits there at rest and hands
-              the slot to the disclosure chevron on hover, so the icon column
-              reads as one line AND the header says what clicking it does. */}
-          <span className="relative w-4 h-4 flex items-center justify-center shrink-0">
-            <span className="absolute inset-0 flex items-center justify-center transition-opacity group-hover:opacity-0 touch-hidden">
-              {folder.customIconUrl ? (
-                <img
-                  src={folder.customIconUrl}
-                  alt=""
-                  className="w-[15px] h-[15px] rounded-xs object-contain shrink-0"
-                  referrerPolicy="no-referrer"
-                />
-              ) : (
-                <ProjectIcon
-                  size={15}
-                  className="text-ink/75"
-                  style={{ color: folder.accentColor || undefined }}
-                />
-              )}
-            </span>
-            <span className="absolute inset-0 flex items-center justify-center text-ink/60 opacity-0 transition-opacity group-hover:opacity-100 touch-visible">
-              {isActuallyOpen ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
-            </span>
-          </span>
-          <span className="w-2 shrink-0" />
-          {folder.isPinned && <Pin size={11} className="text-ink/60 shrink-0 mr-1.5" />}
-          <span className="truncate text-[13px] font-semibold tracking-tight">{folder.name}</span>
-        </div>
-        
-        {/* Workspace Actions — always drawn, matching the drawer's folder
-            header. They used to appear only on hover, which left the folder's
-            own affordances undiscoverable in a sidebar that has no other cue. */}
-        <div className="flex items-center space-x-0.5 pl-1">
-          <button
-            type="button"
-            title="New Session"
-            className="w-5 h-5 flex items-center justify-center text-ink/40 hover:text-ink hover:bg-ink/10 rounded cursor-pointer transition-colors"
-            onClick={(e) => { e.stopPropagation(); onNewSessionForFolder(folder.id); }}
-          >
-            <Plus size={12} />
-          </button>
-          
-          <div className="relative flex items-center" ref={menuRef}>
-            <button
-              type="button"
-              title="Workspace Options"
-              className="w-5 h-5 flex items-center justify-center text-ink/40 hover:text-ink hover:bg-ink/10 rounded cursor-pointer transition-colors"
-              onClick={(e) => { e.stopPropagation(); setShowMenu(!showMenu); }}
-            >
-              <MoreHorizontal size={12} />
-            </button>
-            
-            {showMenu && (
-              <div className="absolute right-0 top-full mt-1 w-44 bg-paper border border-ink/15 rounded-md shadow-lg z-50 py-1 text-xs">
-                <WorkspaceOptionsMenu
-                  variant="desktop"
-                  isPinned={folder.isPinned}
-                  onOpenFolder={onOpenFolder}
-                  confirmDelete={confirmDelete}
-                  onPin={onPin}
-                  onDelete={onDelete}
-                  onRequestDelete={requestDelete}
-                  onCancelDelete={cancelDelete}
-                />
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
+      <CategoryHeader
+        folder={folder}
+        isOpen={isActuallyOpen}
+        onToggleFolder={toggleFolder}
+        checkbox={
+          folderCheckbox && folderSummary
+            ? {
+                checked: folderSummary.all,
+                indeterminate: folderSummary.some,
+                label: `Select ${folder.name}`,
+                onChange: toggleFolderSelection,
+              }
+            : null
+        }
+        batchActive={Boolean(batch)}
+        menuRef={menuRef}
+        showMenu={showMenu}
+        onToggleMenu={() => setShowMenu(!showMenu)}
+        onNewSession={() => onNewSessionForFolder(folder.id)}
+        onOpenFolder={onOpenFolder}
+        onSelectSessions={
+          onStartSessionSelection
+            ? () => { setShowMenu(false); onStartSessionSelection(folder.id); }
+            : undefined
+        }
+        confirmDelete={confirmDelete}
+        onPin={onPin}
+        onDelete={onDelete}
+        onRequestDelete={requestDelete}
+        onCancelDelete={cancelDelete}
+      />
       
       {/* Sessions List */}
-      {isActuallyOpen && (
+      {listOpen && (
         <div className="space-y-0.5">
-          {renderedSessions.map((session: any) => {
+          {renderedSessions.map((session) => {
             const sessionKey = String(session.id);
             const isActive = activeSessionId !== null
               ? String(activeSessionId) === sessionKey
@@ -248,6 +226,9 @@ export function Category({
                   hasSubagents={hasSubagents}
                   isExpanded={isExpanded}
                   onToggleExpand={() => handleToggleSessionExpand(sessionKey)}
+                  selectable={sessionCheckboxes}
+                  selected={Boolean(batch?.selected.includes(sessionKey))}
+                  onToggleSelect={batch ? () => batch.toggle(sessionKey) : undefined}
                 />
                 {hasSubagents && isExpanded && (
                   <SubagentList sessionId={session.id} isActiveSession={canExpandActive} />
@@ -261,7 +242,7 @@ export function Category({
               truncated for height, so after a partial reveal the user needs to
               keep revealing AND to start over, which is what two controls say
               and one alternating control cannot. */}
-          {(hasMore || canShowLess) && !forceExpanded && (
+          {(hasMore || canShowLess) && !forceExpanded && !sessionCheckboxes && (
             <div className="flex items-center gap-1">
               {hasMore && (
                 <button

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>