@kabmo-labs/kabmo 0.0.1 → 0.1.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/SessionItem.batch.test.ts

@@ -0,0 +1,162 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The row's batch-mode switch, on both layouts.
+ *
+ * Two properties decide whether the feature is usable at all: in select mode a
+ * click must TOGGLE the selection rather than open the session (otherwise the
+ * checkbox is decorative and every tap navigates away), and the row's own
+ * actions must be gone (an action beside a checkbox is a second thing the click
+ * could mean). The rows draw these from one prop set, so both layouts are
+ * asserted here rather than trusted to match.
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+
+import { SessionItem } from '@/client/components/layout/session-sidebar/SessionItem';
+import type { SessionItemProps } from '@/client/components/layout/session-sidebar/SessionItem';
+import { MobileSessionRow } from '@/client/components/mobile/mobile-session-sidebar/SessionRow';
+import type { MobileSessionRowProps } from '@/client/components/mobile/mobile-session-sidebar/SessionRow';
+import type { SessionItemData } from '@/shared/types';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (!(key in nativeGlobals)) nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+});
+
+afterEach(() => {
+  container?.remove();
+});
+
+async function mountDesktop(overrides: Partial<SessionItemProps> = {}) {
+  const calls = { click: 0, toggle: 0, actions: 0 };
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(SessionItem, {
+      sessionId: 's1',
+      title: 'hello world',
+      onClick: () => { calls.click += 1; },
+      onRename: () => {},
+      onDelete: () => {},
+      ...overrides,
+      ...(overrides.selectable ? { onToggleSelect: () => { calls.toggle += 1; } } : {}),
+    }), container);
+  });
+  return { el: container, calls };
+}
+
+const session: SessionItemData = { id: 's1', folder_id: 1, title: 'hello world' };
+
+async function mountMobile(overrides: Partial<MobileSessionRowProps> = {}) {
+  const calls = { select: 0, toggle: 0 };
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(MobileSessionRow, {
+      session,
+      isActive: false,
+      timeAgo: null,
+      onSelect: () => { calls.select += 1; },
+      onArchive: () => {},
+      onDelete: () => {},
+      onRename: () => {},
+      ...overrides,
+      ...(overrides.selectable ? { onToggleSelect: () => { calls.toggle += 1; } } : {}),
+    }), container);
+  });
+  return { el: container, calls };
+}
+
+function checkbox(el: HTMLElement): HTMLInputElement | null {
+  return el.querySelector('input[type="checkbox"]') as HTMLInputElement | null;
+}
+
+describe('desktop row batch mode', () => {
+  test('no checkbox while the sidebar is not selecting', async () => {
+    const { el } = await mountDesktop();
+    expect(checkbox(el)).toBeNull();
+    expect(el.querySelector('[data-selected]')).toBeNull();
+  });
+
+  test('draws a checkbox named after the row', async () => {
+    const { el } = await mountDesktop({ selectable: true });
+    expect(checkbox(el)?.getAttribute('aria-label')).toBe('Select hello world');
+  });
+
+  test('a click toggles the selection instead of opening the session', async () => {
+    const { el, calls } = await mountDesktop({ selectable: true });
+    const row = el.querySelector('[data-testid="session-item"]') as HTMLElement;
+    await act(async () => { row.click(); });
+    expect(calls.toggle).toBe(1);
+    expect(calls.click).toBe(0);
+  });
+
+  test('the checkbox click does not also fire the row', async () => {
+    const { el, calls } = await mountDesktop({ selectable: true });
+    await act(async () => { checkbox(el)?.click(); });
+    expect(calls.toggle).toBe(1);
+    expect(calls.click).toBe(0);
+  });
+
+  test('marks the selected row for styling and hides its actions', async () => {
+    const { el } = await mountDesktop({ selectable: true, selected: true });
+    const row = el.querySelector('[data-testid="session-item"]') as HTMLElement;
+    expect(row.getAttribute('data-selected')).toBe('true');
+    expect(checkbox(el)?.checked).toBe(true);
+    expect(el.querySelector('button[aria-label="Session actions"]')).toBeNull();
+  });
+
+  test('the normal row still opens the session and keeps its actions', async () => {
+    const { el, calls } = await mountDesktop();
+    const row = el.querySelector('[data-testid="session-item"]') as HTMLElement;
+    await act(async () => { row.click(); });
+    expect(calls.click).toBe(1);
+    expect(el.querySelector('button[aria-label="Session actions"]')).not.toBeNull();
+  });
+});
+
+describe('mobile row batch mode', () => {
+  test('no checkbox while the drawer is not selecting', async () => {
+    const { el } = await mountMobile();
+    expect(checkbox(el)).toBeNull();
+  });
+
+  test('a tap toggles the selection instead of opening the session', async () => {
+    const { el, calls } = await mountMobile({ selectable: true });
+    const row = el.querySelector('[data-testid="session-item"]') as HTMLElement;
+    await act(async () => { row.querySelector('button')?.click(); });
+    expect(calls.toggle).toBe(1);
+    expect(calls.select).toBe(0);
+  });
+
+  test('hides the row actions and the roster toggle in select mode', async () => {
+    const { el } = await mountMobile({ selectable: true, hasSubagents: true, onToggleExpand: () => {} });
+    expect(el.querySelector('button[aria-label="Session actions"]')).toBeNull();
+    expect(el.querySelector('button[aria-label*="subagents"]')).toBeNull();
+    expect(checkbox(el)?.getAttribute('aria-label')).toBe('Select hello world');
+  });
+});