From 4483ee11ac4585c9cf24b91e41b9154a728661d2 Mon Sep 17 00:00:00 2001
From: Roomote <roomote@roomote.dev>
Date: Thu, 29 Oct 2026 17:33:20 +0000
Subject: [PATCH] fix(web): restore sessions multi-selection and retain
 overview after deletion

---
 apps/docs/fast-sessions.mdx                   |   9 +
 .../(authenticated)/sessions/SessionBoard.tsx |  19 +-
 .../(authenticated)/sessions/SessionCard.tsx  |  78 +++--
 .../sessions/page.client.test.tsx             | 275 +++++++++++++++-
 .../src/app/(authenticated)/sessions/page.tsx | 190 +++++------
 .../SessionDeleteAction.client.test.tsx       |  18 ++
 .../[sessionId]/SessionDeleteAction.tsx       |   3 +-
 .../components/sessions/SessionSelection.tsx  | 296 ++++++++++++++++++
 8 files changed, 746 insertions(+), 142 deletions(-)
 create mode 100644 apps/web/src/components/sessions/SessionSelection.tsx

diff --git a/apps/docs/fast-sessions.mdx b/apps/docs/fast-sessions.mdx
index 247da4a234..0c4d65cbfd 100644
--- a/apps/docs/fast-sessions.mdx
+++ b/apps/docs/fast-sessions.mdx
@@ -158,6 +158,15 @@ reversible and hides the session and its linked tasks from ordinary lists and
 search until it is unarchived. Deleting a session uses the existing confirmation
 and cleanup safeguards.
 
+In the Sessions list or board, choose **Select sessions** to show checkboxes.
+Select sessions individually, or choose **All** to select every session you can
+manage on the current page. **Delete (n)** confirms and deletes the selection
+using the same cleanup safeguards as individual deletion. If some deletions
+fail, those sessions stay selected for retry. Exit selection mode to resume
+opening sessions normally; changing views, filters, or pages clears selection.
+Deleting one or several sessions from either overview keeps you on that view
+with its current filters and page.
+
 On desktop, you can keep several task workspaces open beside the session,
 resize them, and switch between the conversation and task panels without losing
 your place. On smaller screens, Roomote shows one workspace at a time so the
diff --git a/apps/web/src/app/(authenticated)/sessions/SessionBoard.tsx b/apps/web/src/app/(authenticated)/sessions/SessionBoard.tsx
index ee42e25c4b..89711bb09a 100644
--- a/apps/web/src/app/(authenticated)/sessions/SessionBoard.tsx
+++ b/apps/web/src/app/(authenticated)/sessions/SessionBoard.tsx
@@ -41,6 +41,7 @@ import {
 
 import { BasicTooltip, Button, Funnel } from '@/components/system';
 import { useSessionStatusMutation } from '@/components/sessions/use-session-status-mutation';
+import { useSessionSelectionActive } from '@/components/sessions/SessionSelection';
 import {
   canDropSessionBoardCard,
   getSessionBoardDropStatus,
@@ -454,6 +455,8 @@ export function SessionBoardCard({
 }) {
   const reducedMotion = useReducedMotion() ?? false;
   const registry = useContext(SessionBoardCardRegistryContext);
+  const selecting = useSessionSelectionActive();
+  const canDrag = canManage && !selecting;
   const dnd = useContext(SessionBoardDndContext);
   const [isFlying, setIsFlying] = useState(false);
   const dragData = useRef<SessionBoardDragData>({
@@ -470,7 +473,7 @@ export function SessionBoardCard({
   const draggable = useDraggable({
     id: sessionId,
     data: dragData.current,
-    disabled: !canManage || dnd?.statusMutationPending === true,
+    disabled: !canDrag || dnd?.statusMutationPending === true,
   });
 
   useLayoutEffect(() => {
@@ -529,14 +532,14 @@ export function SessionBoardCard({
         <div
           ref={setDragNodeRef}
           style={{ transform: dragTransform }}
-          className={`relative w-full ${canManage ? 'cursor-grab active:cursor-grabbing' : ''}`}
-          {...(canManage ? draggable.attributes : {})}
-          {...(canManage ? dragListeners : {})}
-          role={canManage ? 'group' : undefined}
-          aria-label={canManage ? `Move ${title} to another status` : undefined}
+          className={`relative w-full ${canDrag ? 'cursor-grab active:cursor-grabbing' : ''}`}
+          {...(canDrag ? draggable.attributes : {})}
+          {...(canDrag ? dragListeners : {})}
+          role={canDrag ? 'group' : undefined}
+          aria-label={canDrag ? `Move ${title} to another status` : undefined}
           aria-pressed={undefined}
-          title={canManage ? 'Drag to change session status' : undefined}
-          data-session-board-drag-activator={canManage ? true : undefined}
+          title={canDrag ? 'Drag to change session status' : undefined}
+          data-session-board-drag-activator={canDrag ? true : undefined}
         >
           {children}
         </div>
diff --git a/apps/web/src/app/(authenticated)/sessions/SessionCard.tsx b/apps/web/src/app/(authenticated)/sessions/SessionCard.tsx
index 86fc568a15..56be723041 100644
--- a/apps/web/src/app/(authenticated)/sessions/SessionCard.tsx
+++ b/apps/web/src/app/(authenticated)/sessions/SessionCard.tsx
@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import { format, formatDistanceToNow, isSameDay, isSameYear } from 'date-fns';
 import type { SessionManualStatus } from '@roomote/types';
 
@@ -21,6 +20,11 @@ import { SessionInferenceCostBreakdown } from '@/components/sessions/SessionInfe
 import { PrivateSessionIcon } from '@/components/sessions/PrivateSessionIcon';
 import { getSessionSurfaceLabel } from '@/components/sessions/session-surfaces';
 import { TaskAutomationIcon } from '@/components/tasks/TaskAutomationIcon';
+import {
+  SessionSelectionControl,
+  SessionSelectionLink,
+  SessionSelectionRow,
+} from '@/components/sessions/SessionSelection';
 import { SessionActions } from '../../(sandbox)/sessions/[sessionId]/SessionDeleteAction';
 
 type SessionCardData = {
@@ -108,41 +112,53 @@ export function SessionCard({
   const accessibleActivityTimestamp = activityDate.toLocaleString();
 
   return (
-    <div className="ph-no-capture group/card relative flex w-full @container items-start gap-3 p-4 transition-colors hover:bg-accent-foreground/10 group-data-[dragging=true]/board:hover:bg-transparent">
-      <Link
+    <SessionSelectionRow
+      sessionId={session.id}
+      className="ph-no-capture group/card relative flex w-full @container items-start gap-3 p-4 transition-colors hover:bg-accent-foreground/10 group-data-[dragging=true]/board:hover:bg-transparent"
+    >
+      <SessionSelectionLink
+        sessionId={session.id}
+        title={session.title}
+        canManage={session.canManage ?? false}
         href={`/sessions/${session.id}`}
         className="absolute inset-0 z-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       >
         <span className="sr-only">{session.title}</span>
-      </Link>
+      </SessionSelectionLink>
       <div className="pointer-events-none relative z-10 mt-1 shrink-0">
-        {session.ownerKind === 'automation' ? (
-          <span
-            className="flex size-8 items-center justify-center overflow-clip rounded-full border border-border bg-white dark:bg-muted"
-            aria-hidden="true"
-          >
-            <TaskAutomationIcon
-              automationKey={session.ownerAutomation}
-              className="size-7"
+        <SessionSelectionControl
+          sessionId={session.id}
+          title={session.title}
+          canManage={session.canManage ?? false}
+        >
+          {session.ownerKind === 'automation' ? (
+            <span
+              className="flex size-8 items-center justify-center overflow-clip rounded-full border border-border bg-white dark:bg-muted"
+              aria-hidden="true"
+            >
+              <TaskAutomationIcon
+                automationKey={session.ownerAutomation}
+                className="size-7"
+              />
+            </span>
+          ) : (
+            <Avatar
+              imageUrl={session.ownerImageUrl}
+              name={ownerDisplayName}
+              email={session.ownerEmail ?? undefined}
+              size="md"
+              alt=""
+              loading="eager"
+              decoding="sync"
             />
-          </span>
-        ) : (
-          <Avatar
-            imageUrl={session.ownerImageUrl}
-            name={ownerDisplayName}
-            email={session.ownerEmail ?? undefined}
-            size="md"
-            alt=""
-            loading="eager"
-            decoding="sync"
-          />
-        )}
-        {session.unread && session.ownerUserId === viewerUserId ? (
-          <span
-            aria-label="Unread activity"
-            className="absolute top-0 right-0 size-2 rounded-full bg-accent-foreground ring-2 ring-background"
-          />
-        ) : null}
+          )}
+          {session.unread && session.ownerUserId === viewerUserId ? (
+            <span
+              aria-label="Unread activity"
+              className="absolute top-0 right-0 size-2 rounded-full bg-accent-foreground ring-2 ring-background"
+            />
+          ) : null}
+        </SessionSelectionControl>
       </div>
       <div className="pointer-events-none relative z-10 min-w-0 flex-1">
         <div className="flex items-start justify-between gap-2 text-xs text-muted-foreground/75 md:items-center">
@@ -230,6 +246,6 @@ export function SessionCard({
           />
         </div>
       ) : null}
-    </div>
+    </SessionSelectionRow>
   );
 }
diff --git a/apps/web/src/app/(authenticated)/sessions/page.client.test.tsx b/apps/web/src/app/(authenticated)/sessions/page.client.test.tsx
index fde8fdb283..b774137df3 100644
--- a/apps/web/src/app/(authenticated)/sessions/page.client.test.tsx
+++ b/apps/web/src/app/(authenticated)/sessions/page.client.test.tsx
@@ -1,20 +1,47 @@
-import { render, screen, waitFor, within } from '@testing-library/react';
-
-const { getSessionsMock, sessionStatusState } = vi.hoisted(() => ({
-  getSessionsMock: vi.fn(),
-  sessionStatusState: {
-    current: ['active', 'needs_input', 'blocked', 'ready', 'done'] as Array<
-      'active' | 'needs_input' | 'blocked' | 'ready' | 'done'
-    >,
-  },
-}));
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+
+const { getSessionsMock, sessionStatusState, remove, refresh, push } =
+  vi.hoisted(() => ({
+    remove: vi.fn(),
+    refresh: vi.fn(),
+    push: vi.fn(),
+    getSessionsMock: vi.fn(),
+    sessionStatusState: {
+      current: ['active', 'needs_input', 'blocked', 'ready', 'done'] as Array<
+        'active' | 'needs_input' | 'blocked' | 'ready' | 'done'
+      >,
+    },
+  }));
 
 vi.mock('next/navigation', () => ({
   usePathname: () => '/sessions',
-  useRouter: () => ({ replace: vi.fn() }),
+  useRouter: () => ({ replace: vi.fn(), refresh, push }),
   useSearchParams: () => new URLSearchParams(),
 }));
 
+vi.mock('@/trpc/client', () => ({
+  useTRPC: () => ({ sessions: { delete: { mutationOptions: () => ({}) } } }),
+}));
+vi.mock('@tanstack/react-query', () => ({
+  useMutation: () => ({ mutateAsync: remove }),
+}));
+vi.mock(
+  '../../(sandbox)/sessions/[sessionId]/SessionDeleteAction',
+  async (importOriginal) => ({
+    ...(await importOriginal<object>()),
+    SessionActions: () => (
+      <button type="button" aria-label="More session actions" />
+    ),
+  }),
+);
+
 vi.mock('@/components/sessions/use-session-status-mutation', () => ({
   useSessionStatusMutation: () => ({ isPending: false, mutate: vi.fn() }),
 }));
@@ -37,6 +64,7 @@ vi.mock('@/lib/server/sessions', () => ({
       ownerEmail: 'test@example.com',
       ownerImageUrl: null,
       ownerUserId: 'user-1',
+      canManage: status !== 'blocked',
       privacy: 'shared',
       sourceSurface: 'web',
       activityAt: 1_788_000_000,
@@ -62,6 +90,7 @@ vi.mock('@/lib/server/sessions', () => ({
 describe('Sessions list', () => {
   beforeEach(() => {
     getSessionsMock.mockClear();
+    remove.mockReset().mockResolvedValue({ deleted: true });
     sessionStatusState.current = [
       'active',
       'needs_input',
@@ -71,6 +100,230 @@ describe('Sessions list', () => {
     ];
   });
 
+  it.each(['list', 'board'])(
+    'supports individual and page-wide selection without navigation or dragging in %s view',
+    async (view) => {
+      const { container } = render(
+        await SessionsPage({ searchParams: Promise.resolve({ view }) }),
+      );
+      const sessionLink = screen.getByRole('link', { name: /^Review active/ });
+      expect(sessionLink).toHaveAttribute('href', '/sessions/active');
+      fireEvent.click(screen.getByRole('button', { name: 'Select sessions' }));
+      expect(
+        screen.queryByRole('link', { name: /^Review active/ }),
+      ).not.toBeInTheDocument();
+      expect(
+        container.querySelector('[data-session-board-drag-activator]'),
+      ).toBeNull();
+      fireEvent.click(
+        screen.getByRole('button', { name: /^Select session: Review active/ }),
+      );
+      expect(
+        screen.getByRole('checkbox', { name: /^Select Review active/ }),
+      ).toBeChecked();
+      expect(
+        screen.getByRole('checkbox', {
+          name: 'Select all sessions on this page',
+        }),
+      ).toBePartiallyChecked();
+      expect(
+        screen.getByRole('checkbox', { name: /^Select Review blocked/ }),
+      ).toBeDisabled();
+      fireEvent.click(
+        screen.getByRole('checkbox', {
+          name: 'Select all sessions on this page',
+        }),
+      );
+      expect(screen.getByRole('button', { name: 'Delete (4)' })).toBeEnabled();
+      expect(
+        screen.getByRole('checkbox', {
+          name: 'Select all sessions on this page',
+        }),
+      ).toBeChecked();
+      fireEvent.click(
+        screen.getByRole('checkbox', { name: /^Select Review ready/ }),
+      );
+      expect(screen.getByRole('button', { name: 'Delete (3)' })).toBeEnabled();
+      expect(push).not.toHaveBeenCalled();
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Exit selection mode' }),
+      );
+      expect(
+        screen.getByRole('link', { name: /^Review active/ }),
+      ).toHaveAttribute('href', '/sessions/active');
+      fireEvent.click(screen.getByRole('button', { name: 'Select sessions' }));
+      expect(screen.getByRole('button', { name: 'Delete (0)' })).toBeDisabled();
+    },
+  );
+
+  it.each(['list', 'board'])(
+    'confirms bulk deletion and refreshes the current %s view without redirecting',
+    async (view) => {
+      render(
+        await SessionsPage({
+          searchParams: Promise.resolve({
+            view,
+            user: 'user-1',
+            before: 'cursor',
+          }),
+        }),
+      );
+      fireEvent.click(screen.getByRole('button', { name: 'Select sessions' }));
+      fireEvent.click(
+        screen.getByRole('checkbox', {
+          name: 'Select all sessions on this page',
+        }),
+      );
+      fireEvent.click(screen.getByRole('button', { name: 'Delete (4)' }));
+      expect(remove).not.toHaveBeenCalled();
+      fireEvent.click(
+        within(screen.getByRole('dialog')).getByRole('button', {
+          name: 'Cancel',
+        }),
+      );
+      expect(screen.getByRole('button', { name: 'Delete (4)' })).toBeEnabled();
+      fireEvent.click(screen.getByRole('button', { name: 'Delete (4)' }));
+      fireEvent.click(
+        within(screen.getByRole('dialog')).getByRole('button', {
+          name: 'Delete (4)',
+        }),
+      );
+      await waitFor(() => expect(refresh).toHaveBeenCalledOnce());
+      expect(remove.mock.calls.map(([input]) => input.sessionId)).toEqual([
+        'active',
+        'needs_input',
+        'ready',
+        'done',
+      ]);
+      expect(push).not.toHaveBeenCalled();
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Select sessions' }),
+      ).toBeEnabled();
+    },
+  );
+
+  it('keeps only failed deletions selected, including rejected requests, and permits retry', async () => {
+    remove
+      .mockResolvedValueOnce({ deleted: true })
+      .mockResolvedValueOnce({ deleted: false, reason: 'session_busy' })
+      .mockRejectedValueOnce(new Error('network'))
+      .mockResolvedValueOnce({ deleted: true });
+    render(await SessionsPage({ searchParams: Promise.resolve({}) }));
+    fireEvent.click(screen.getByRole('button', { name: 'Select sessions' }));
+    fireEvent.click(
+      screen.getByRole('checkbox', {
+        name: 'Select all sessions on this page',
+      }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Delete (4)' }));
+    fireEvent.click(
+      within(screen.getByRole('dialog')).getByRole('button', {
+        name: 'Delete (4)',
+      }),
+    );
+    await waitFor(() => expect(refresh).toHaveBeenCalledOnce());
+    expect(
+      screen.getByRole('checkbox', { name: /^Select Review needs_input/ }),
+    ).toBeChecked();
+    expect(
+      screen.getByRole('checkbox', { name: /^Select Review ready/ }),
+    ).toBeChecked();
+    expect(
+      screen.getByRole('checkbox', { name: /^Select Review active/ }),
+    ).not.toBeChecked();
+    expect(screen.getByRole('button', { name: 'Delete (2)' })).toBeEnabled();
+    fireEvent.click(screen.getByRole('button', { name: 'Delete (2)' }));
+    fireEvent.click(
+      within(screen.getByRole('dialog')).getByRole('button', {
+        name: 'Delete (2)',
+      }),
+    );
+    await waitFor(() => expect(refresh).toHaveBeenCalledTimes(2));
+    expect(
+      remove.mock.calls.slice(4).map(([input]) => input.sessionId),
+    ).toEqual(['needs_input', 'ready']);
+  });
+
+  it.each(['list', 'board'])(
+    'locks selection while deleting a single selected session in %s view',
+    async (view) => {
+      let finish!: (result: { deleted: boolean }) => void;
+      remove.mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            finish = resolve;
+          }),
+      );
+      render(await SessionsPage({ searchParams: Promise.resolve({ view }) }));
+      fireEvent.click(screen.getByRole('button', { name: 'Select sessions' }));
+      fireEvent.click(
+        screen.getByRole('checkbox', { name: /^Select Review active/ }),
+      );
+      fireEvent.click(screen.getByRole('button', { name: 'Delete (1)' }));
+      fireEvent.click(
+        within(screen.getByRole('dialog')).getByRole('button', {
+          name: 'Delete (1)',
+        }),
+      );
+      expect(
+        screen.getByRole('button', { name: 'Deleting...' }),
+      ).toBeDisabled();
+      expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled();
+      expect(
+        screen.getByRole('checkbox', {
+          name: 'Select all sessions on this page',
+          hidden: true,
+        }),
+      ).toBeDisabled();
+      expect(remove).toHaveBeenCalledOnce();
+      await act(async () => finish({ deleted: true }));
+      expect(refresh).toHaveBeenCalledOnce();
+      expect(push).not.toHaveBeenCalled();
+      expect(
+        screen.getByRole('button', { name: 'Select sessions' }),
+      ).toBeEnabled();
+    },
+  );
+
+  it('prunes selections on refresh, including an empty result, and resets on view/filter/page changes', async () => {
+    const { rerender } = render(
+      await SessionsPage({ searchParams: Promise.resolve({}) }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Select sessions' }));
+    fireEvent.click(
+      screen.getByRole('checkbox', {
+        name: 'Select all sessions on this page',
+      }),
+    );
+    sessionStatusState.current = ['active'];
+    rerender(await SessionsPage({ searchParams: Promise.resolve({}) }));
+    expect(screen.getByRole('button', { name: 'Delete (1)' })).toBeEnabled();
+    sessionStatusState.current = [];
+    rerender(await SessionsPage({ searchParams: Promise.resolve({}) }));
+    expect(screen.getByRole('button', { name: 'Delete (0)' })).toBeDisabled();
+    sessionStatusState.current = ['active', 'ready'];
+    rerender(await SessionsPage({ searchParams: Promise.resolve({}) }));
+    expect(screen.getByRole('button', { name: 'Delete (0)' })).toBeDisabled();
+    for (const params of [
+      { view: 'board' },
+      { view: 'board', status: 'active' },
+      { view: 'board', before: 'older' },
+    ]) {
+      fireEvent.click(
+        screen.getByRole('checkbox', {
+          name: 'Select all sessions on this page',
+        }),
+      );
+      rerender(await SessionsPage({ searchParams: Promise.resolve(params) }));
+      expect(
+        screen.getByRole('button', { name: 'Select sessions' }),
+      ).toBeEnabled();
+      fireEvent.click(screen.getByRole('button', { name: 'Select sessions' }));
+      expect(screen.getByRole('button', { name: 'Delete (0)' })).toBeDisabled();
+    }
+  });
+
   it('keeps every session and long-content link accessible, including older sessions', async () => {
     const { container } = render(
       await SessionsPage({ searchParams: Promise.resolve({}) }),
diff --git a/apps/web/src/app/(authenticated)/sessions/page.tsx b/apps/web/src/app/(authenticated)/sessions/page.tsx
index 9ad9eab1ce..0398ac20e7 100644
--- a/apps/web/src/app/(authenticated)/sessions/page.tsx
+++ b/apps/web/src/app/(authenticated)/sessions/page.tsx
@@ -19,6 +19,7 @@ import {
   type SessionScope,
 } from '@/lib/server/sessions';
 import { Empty, EmptyDescription, EmptyHeader } from '@/components/system';
+import { SessionSelection } from '@/components/sessions/SessionSelection';
 
 import { SessionsFilters } from './SessionsFilters';
 import { SessionCard } from './SessionCard';
@@ -130,100 +131,107 @@ export default async function SessionsPage({
 
   return (
     <div className="flex h-full min-h-0 min-w-0 w-full flex-col bg-card">
-      <div className="border-b-4 border-b-card bg-background p-4">
-        <SessionsFilters
-          userId={user ?? null}
-          timePeriod={timePeriod}
-          scope={scope}
-          status={status ?? 'all'}
-          view={view}
-          query={q ?? ''}
-          repository={params.repository ?? null}
-          pullRequest={params.pullRequest ?? null}
-          source={params.source ?? 'all'}
-          sourceOptions={sources}
-          model={params.model ?? null}
-          archive={archive}
-        />
-      </div>
-      <main
-        className={`min-h-0 flex-1 overflow-y-auto bg-background ${view === 'board' ? 'md:flex md:flex-col md:overflow-hidden' : ''}`}
+      <SessionSelection
+        key={JSON.stringify(params)}
+        sessionIds={result.sessions
+          .filter((session) => session.canManage)
+          .map((session) => session.id)}
+        toolbar={
+          <SessionsFilters
+            userId={user ?? null}
+            timePeriod={timePeriod}
+            scope={scope}
+            status={status ?? 'all'}
+            view={view}
+            query={q ?? ''}
+            repository={params.repository ?? null}
+            pullRequest={params.pullRequest ?? null}
+            source={params.source ?? 'all'}
+            sourceOptions={sources}
+            model={params.model ?? null}
+            archive={archive}
+          />
+        }
       >
-        {result.sessions.length === 0 ? (
-          <Empty>
-            <EmptyHeader>
-              {hasAppliedFilters ? (
-                <>
-                  <EmptyDescription>
-                    No sessions match your filters.
-                  </EmptyDescription>
-                  <EmptyDescription>
-                    <Link
-                      href={clearFiltersHref}
-                      className="font-semibold hover:underline"
+        <main
+          className={`min-h-0 flex-1 overflow-y-auto bg-background ${view === 'board' ? 'md:flex md:flex-col md:overflow-hidden' : ''}`}
+        >
+          {result.sessions.length === 0 ? (
+            <Empty>
+              <EmptyHeader>
+                {hasAppliedFilters ? (
+                  <>
+                    <EmptyDescription>
+                      No sessions match your filters.
+                    </EmptyDescription>
+                    <EmptyDescription>
+                      <Link
+                        href={clearFiltersHref}
+                        className="font-semibold hover:underline"
+                      >
+                        Clear filters
+                      </Link>{' '}
+                      to show all sessions.
+                    </EmptyDescription>
+                  </>
+                ) : (
+                  <EmptyDescription>No sessions found.</EmptyDescription>
+                )}
+              </EmptyHeader>
+            </Empty>
+          ) : view === 'board' ? (
+            <SessionBoard>
+              {boardColumns.map(({ column, sessions: columnSessions }) => (
+                <SessionBoardColumn
+                  key={column}
+                  column={column}
+                  label={getSessionStatusLabel(column)}
+                  count={columnSessions.length}
+                  statusFilter={status}
+                >
+                  {columnSessions.map((session) => (
+                    <SessionBoardCard
+                      key={session.id}
+                      sessionId={session.id}
+                      column={column}
+                      canManage={session.canManage ?? false}
+                      title={session.title}
                     >
-                      Clear filters
-                    </Link>{' '}
-                    to show all sessions.
-                  </EmptyDescription>
-                </>
-              ) : (
-                <EmptyDescription>No sessions found.</EmptyDescription>
-              )}
-            </EmptyHeader>
-          </Empty>
-        ) : view === 'board' ? (
-          <SessionBoard>
-            {boardColumns.map(({ column, sessions: columnSessions }) => (
-              <SessionBoardColumn
-                key={column}
-                column={column}
-                label={getSessionStatusLabel(column)}
-                count={columnSessions.length}
-                statusFilter={status}
+                      <SessionCard
+                        session={session}
+                        viewerUserId={authorizedUser.userId}
+                        query={q}
+                        hideAttentionBadges
+                      />
+                    </SessionBoardCard>
+                  ))}
+                </SessionBoardColumn>
+              ))}
+            </SessionBoard>
+          ) : (
+            <div className="divide-y divide-card">
+              {result.sessions.map((session) => (
+                <SessionCard
+                  key={session.id}
+                  session={session}
+                  viewerUserId={authorizedUser.userId}
+                  query={q}
+                />
+              ))}
+            </div>
+          )}
+          {result.nextCursor ? (
+            <div className="flex justify-center p-4">
+              <Link
+                href={`/sessions?${olderParams.toString()}`}
+                className="text-sm underline-offset-4 hover:underline"
               >
-                {columnSessions.map((session) => (
-                  <SessionBoardCard
-                    key={session.id}
-                    sessionId={session.id}
-                    column={column}
-                    canManage={session.canManage ?? false}
-                    title={session.title}
-                  >
-                    <SessionCard
-                      session={session}
-                      viewerUserId={authorizedUser.userId}
-                      query={q}
-                      hideAttentionBadges
-                    />
-                  </SessionBoardCard>
-                ))}
-              </SessionBoardColumn>
-            ))}
-          </SessionBoard>
-        ) : (
-          <div className="divide-y divide-card">
-            {result.sessions.map((session) => (
-              <SessionCard
-                key={session.id}
-                session={session}
-                viewerUserId={authorizedUser.userId}
-                query={q}
-              />
-            ))}
-          </div>
-        )}
-        {result.nextCursor ? (
-          <div className="flex justify-center p-4">
-            <Link
-              href={`/sessions?${olderParams.toString()}`}
-              className="text-sm underline-offset-4 hover:underline"
-            >
-              Show older sessions
-            </Link>
-          </div>
-        ) : null}
-      </main>
+                Show older sessions
+              </Link>
+            </div>
+          ) : null}
+        </main>
+      </SessionSelection>
     </div>
   );
 }
diff --git a/apps/web/src/app/(sandbox)/sessions/[sessionId]/SessionDeleteAction.client.test.tsx b/apps/web/src/app/(sandbox)/sessions/[sessionId]/SessionDeleteAction.client.test.tsx
index cf08f7d6df..437a3039d4 100644
--- a/apps/web/src/app/(sandbox)/sessions/[sessionId]/SessionDeleteAction.client.test.tsx
+++ b/apps/web/src/app/(sandbox)/sessions/[sessionId]/SessionDeleteAction.client.test.tsx
@@ -296,4 +296,22 @@ describe('SessionActions', () => {
     });
     expect(mocks.refresh).toHaveBeenCalled();
   });
+
+  it.each([true, false])(
+    'refreshes deletion in place only for overview actions (listRow=%s)',
+    (listRow) => {
+      render(<SessionActions sessionId="session-1" listRow={listRow} />);
+      fireEvent.click(screen.getByText('Delete session'));
+      fireEvent.click(
+        screen.getAllByRole('button', { name: 'Delete session' }).at(-1)!,
+      );
+      expect(mocks.remove).toHaveBeenCalledWith({ sessionId: 'session-1' });
+      expect(mocks.refresh).toHaveBeenCalledOnce();
+      if (listRow) expect(mocks.push).not.toHaveBeenCalled();
+      else expect(mocks.push).toHaveBeenCalledWith('/');
+      expect(
+        screen.queryByRole('heading', { name: 'Delete this session?' }),
+      ).not.toBeInTheDocument();
+    },
+  );
 });
diff --git a/apps/web/src/app/(sandbox)/sessions/[sessionId]/SessionDeleteAction.tsx b/apps/web/src/app/(sandbox)/sessions/[sessionId]/SessionDeleteAction.tsx
index 3ece4c6ab7..be1fc529bd 100644
--- a/apps/web/src/app/(sandbox)/sessions/[sessionId]/SessionDeleteAction.tsx
+++ b/apps/web/src/app/(sandbox)/sessions/[sessionId]/SessionDeleteAction.tsx
@@ -93,7 +93,8 @@ export function SessionActions({
       onSuccess: (result) => {
         if (result.deleted) {
           toast.success('Session deleted.');
-          router.push('/');
+          setOpen(false);
+          if (!listRow) router.push('/');
           router.refresh();
           return;
         }
diff --git a/apps/web/src/components/sessions/SessionSelection.tsx b/apps/web/src/components/sessions/SessionSelection.tsx
new file mode 100644
index 0000000000..8401ad72d8
--- /dev/null
+++ b/apps/web/src/components/sessions/SessionSelection.tsx
@@ -0,0 +1,296 @@
+'use client';
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
+
+import { useTRPC } from '@/trpc/client';
+import { cn } from '@/lib/utils';
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  ListChecks,
+  Trash2,
+  X,
+} from '@/components/system';
+import { SESSION_DELETION_DESCRIPTION } from '@/app/(sandbox)/sessions/[sessionId]/SessionDeleteAction';
+
+type Selection = {
+  active: boolean;
+  pending: boolean;
+  selected: Set<string>;
+  toggle: (id: string) => void;
+};
+
+const SessionSelectionContext = createContext<Selection | null>(null);
+
+export function useSessionSelectionActive() {
+  return useContext(SessionSelectionContext)?.active ?? false;
+}
+
+export function SessionSelection({
+  sessionIds,
+  toolbar,
+  children,
+}: {
+  sessionIds: string[];
+  toolbar: ReactNode;
+  children: ReactNode;
+}) {
+  const router = useRouter();
+  const trpc = useTRPC();
+  const deleteSession = useMutation(trpc.sessions.delete.mutationOptions());
+  const [active, setActive] = useState(false);
+  const [selectedIds, setSelectedIds] = useState(new Set<string>());
+  const [confirming, setConfirming] = useState(false);
+  const [pending, setPending] = useState(false);
+  // Refreshes can remove sessions or management permissions without changing URL.
+  const selected = new Set(sessionIds.filter((id) => selectedIds.has(id)));
+  useEffect(() => {
+    setSelectedIds((previous) => {
+      const next = new Set(sessionIds.filter((id) => previous.has(id)));
+      return next.size === previous.size ? previous : next;
+    });
+  }, [sessionIds]);
+
+  const exit = () => {
+    setActive(false);
+    setSelectedIds(new Set());
+    setConfirming(false);
+  };
+  const toggle = (id: string) => {
+    if (pending || !sessionIds.includes(id)) return;
+    setSelectedIds((previous) => {
+      const next = new Set(previous);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const removeSelected = async () => {
+    if (pending || selected.size === 0) return;
+    setPending(true);
+    const deleted = new Set<string>();
+    // Reuse each session's authorization, stop, artifact, and memory safeguards.
+    // Keep failures selected so a partial deletion can be retried safely.
+    for (const sessionId of selected) {
+      try {
+        const result = await deleteSession.mutateAsync({ sessionId });
+        if (result.deleted) deleted.add(sessionId);
+      } catch {
+        // Continue processing the other selected sessions.
+      }
+    }
+    const failedCount = selected.size - deleted.size;
+    if (deleted.size > 0) {
+      toast.success(
+        `Deleted ${deleted.size} session${deleted.size === 1 ? '' : 's'}.`,
+      );
+    }
+    if (failedCount > 0) {
+      toast.error(
+        `${failedCount} session${failedCount === 1 ? '' : 's'} could not be deleted. Try again shortly.`,
+      );
+      setSelectedIds(new Set([...selected].filter((id) => !deleted.has(id))));
+    } else {
+      exit();
+    }
+    setConfirming(false);
+    setPending(false);
+    router.refresh();
+  };
+
+  return (
+    <SessionSelectionContext.Provider
+      value={{ active, pending, selected, toggle }}
+    >
+      <div className="flex flex-wrap items-center gap-3 border-b-4 border-b-card bg-background p-4">
+        <div className="min-w-0 flex-1">{toolbar}</div>
+        {active ? (
+          <div
+            className="flex items-center gap-2"
+            role="group"
+            aria-label="Session selection"
+          >
+            <label className="flex items-center gap-2 text-sm">
+              <Checkbox
+                aria-label="Select all sessions on this page"
+                checked={
+                  selected.size === 0
+                    ? false
+                    : selected.size === sessionIds.length
+                      ? true
+                      : 'indeterminate'
+                }
+                disabled={pending || sessionIds.length === 0}
+                onCheckedChange={(checked) =>
+                  setSelectedIds(
+                    checked === true ? new Set(sessionIds) : new Set(),
+                  )
+                }
+              />
+              All
+            </label>
+            <Button
+              variant="destructive"
+              size="sm"
+              disabled={pending || selected.size === 0}
+              onClick={() => setConfirming(true)}
+            >
+              <Trash2 /> Delete ({selected.size})
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label="Exit selection mode"
+              disabled={pending}
+              onClick={exit}
+            >
+              <X />
+            </Button>
+          </div>
+        ) : (
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label="Select sessions"
+            title="Select sessions"
+            disabled={sessionIds.length === 0}
+            onClick={() => setActive(true)}
+          >
+            <ListChecks />
+          </Button>
+        )}
+      </div>
+      {children}
+      <Dialog
+        open={confirming}
+        onOpenChange={(open) => {
+          if (!pending) setConfirming(open);
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              Delete {selected.size} session{selected.size === 1 ? '' : 's'}?
+            </DialogTitle>
+            <DialogDescription>
+              {SESSION_DELETION_DESCRIPTION}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              disabled={pending}
+              onClick={() => setConfirming(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              disabled={pending || selected.size === 0}
+              onClick={() => void removeSelected()}
+            >
+              {pending ? 'Deleting...' : `Delete (${selected.size})`}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </SessionSelectionContext.Provider>
+  );
+}
+
+export function SessionSelectionRow({
+  sessionId,
+  className,
+  children,
+}: {
+  sessionId: string;
+  className: string;
+  children: ReactNode;
+}) {
+  const selection = useContext(SessionSelectionContext);
+  return (
+    <div
+      className={cn(
+        className,
+        selection?.selected.has(sessionId) && 'bg-accent-foreground/10',
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SessionSelectionLink({
+  sessionId,
+  title,
+  canManage,
+  href,
+  className,
+  children,
+}: {
+  sessionId: string;
+  title: string;
+  canManage: boolean;
+  href: string;
+  className: string;
+  children: ReactNode;
+}) {
+  const selection = useContext(SessionSelectionContext);
+  if (selection?.active) {
+    return (
+      <button
+        type="button"
+        className={className}
+        aria-label={`Select session: ${title}`}
+        aria-pressed={selection.selected.has(sessionId)}
+        disabled={!canManage || selection.pending}
+        onClick={() => selection.toggle(sessionId)}
+      />
+    );
+  }
+  return (
+    <Link href={href} className={className}>
+      {children}
+    </Link>
+  );
+}
+
+export function SessionSelectionControl({
+  sessionId,
+  title,
+  canManage,
+  children,
+}: {
+  sessionId: string;
+  title: string;
+  canManage: boolean;
+  children: ReactNode;
+}) {
+  const selection = useContext(SessionSelectionContext);
+  if (!selection?.active) return children;
+  return (
+    <Checkbox
+      className="pointer-events-auto"
+      aria-label={`Select ${title}`}
+      checked={selection.selected.has(sessionId)}
+      disabled={!canManage || selection.pending}
+      onCheckedChange={() => selection.toggle(sessionId)}
+    />
+  );
+}