@remit/web-client 0.0.57 → 0.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/MailListHeader.tsx

@@ -46,6 +46,7 @@ import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
 import { useMailContext } from "@/lib/mail-context";
 import { loadRecentSearches, saveRecentSearch } from "@/lib/recent-searches";
 import { resultsScopeForRoute, routeMailboxId } from "@/lib/search-scope";
+import { showInlineSearchResults } from "@/lib/search-surface";
 import {
 	parseSearchTokens,
 	removeSearchToken,
@@ -76,6 +77,17 @@ interface MailListHeaderProps {
 	 */
 	searchResultsLabel?: string;
 	relatedResultsLabel?: string;
+	/**
+	 * The body renders the committed search itself as a selectable list — the
+	 * mailbox route's `MessageList` filters to the search results and hosts the
+	 * multi-select toolbar and the "Select all N matching" escalation (#212).
+	 * When set, a committed query keeps the body on tablet/desktop instead of
+	 * swapping in the read-only two-engine `SearchResults` panel; the panel still
+	 * shows while the query is being typed (uncommitted). Views whose body is not
+	 * a search-result list (the brief, flagged, global search) leave this unset
+	 * and keep the panel for every query.
+	 */
+	searchResultsInBody?: boolean;
 }
 
 export function MailListHeader({
@@ -91,6 +103,7 @@ export function MailListHeader({
 	onSelectSearchResult,
 	searchResultsLabel = "Top matches",
 	relatedResultsLabel = "Related",
+	searchResultsInBody = false,
 }: MailListHeaderProps) {
 	const {
 		accounts,
@@ -209,10 +222,19 @@ export function MailListHeader({
 		);
 	}
 
-	// Tablet + desktop keep the inline toolbar search; once a query is present the
-	// list-pane body swaps to the same sectioned results the phone takeover shows,
-	// under the same FilterSheet. Clearing the query restores the normal list.
-	const showInlineResults = tier !== "phone" && hasQuery;
+	// Tablet + desktop keep the inline toolbar search; while a query is being
+	// typed the list-pane body swaps to the same sectioned results the phone
+	// takeover shows, under the same FilterSheet. A view whose own body renders
+	// the committed search as a selectable list (`searchResultsInBody`, the
+	// mailbox route) keeps the panel only until the query commits to the URL,
+	// then hands back to its `MessageList` so the multi-select toolbar and the
+	// escalation are reachable (#212). Clearing the query restores the normal list.
+	const showInlineResults = showInlineSearchResults({
+		tier,
+		hasLiveInput: hasQuery,
+		hasCommittedQuery: searchQuery.trim().length > 0,
+		bodyRendersCommittedResults: searchResultsInBody,
+	});
 	const handleSelectInlineResult = (result: SearchResult) => {
 		setRecentSearches(saveRecentSearch(searchInput));
 		onSelectSearchResult?.(result);

package/src/components/mail/MailViewChrome.tsx

@@ -44,6 +44,12 @@ interface MailViewChromeProps {
 	/** Section headings; see `MailListHeader`. */
 	searchResultsLabel?: string;
 	relatedResultsLabel?: string;
+	/**
+	 * The body renders the committed search as a selectable list itself; see
+	 * `MailListHeader`. The mailbox route sets this so a committed search yields
+	 * its multi-select `MessageList` (#212); flagged leaves it unset.
+	 */
+	searchResultsInBody?: boolean;
 }
 
 export function MailViewChrome({
@@ -65,6 +71,7 @@ export function MailViewChrome({
 	onSelectSearchResult,
 	searchResultsLabel,
 	relatedResultsLabel,
+	searchResultsInBody,
 }: MailViewChromeProps) {
 	const [expanded, setExpanded] = useState(false);
 
@@ -95,6 +102,7 @@ export function MailViewChrome({
 			onSelectSearchResult={onSelectSearchResult}
 			searchResultsLabel={searchResultsLabel}
 			relatedResultsLabel={relatedResultsLabel}
+			searchResultsInBody={searchResultsInBody}
 		>
 			<FilterSheet {...filterConfig}>{children}</FilterSheet>
 		</MailListHeader>

package/src/components/mail/MailboxPane.tsx

@@ -985,6 +985,11 @@ function MailboxList() {
 			relatedResults={relatedResults}
 			relatedLoading={relatedLoading}
 			onSelectSearchResult={handleSelectSearchResult}
+			// A committed mailbox search renders in the body's own `MessageList`
+			// (its threads filter to the results), so the multi-select toolbar and
+			// the "Select all N matching" escalation are reachable on desktop (#212).
+			// The typing/uncommitted state still shows the two-engine panel.
+			searchResultsInBody
 		>
 			{body}
 		</MailViewChrome>

package/src/components/mail/MessageList.selection.test.ts

@@ -93,6 +93,60 @@ describe("MessageList escalated actions", () => {
 	});
 });
 
+/**
+ * Advanced selection is no longer mobile-only (#212): the escalation engine is
+ * opened to desktop, and the desktop `SelectionToolbar` renders the same
+ * offer → counting → escalated → progress → notice states the mobile sheet
+ * carries, from one shared set of derivations so the two surfaces never drift.
+ */
+describe("MessageList escalation reaches desktop (#212)", () => {
+	it("no longer gates the escalation engine on the mobile viewport", () => {
+		assert.match(
+			source,
+			/const escalationEnabled = isSearching && !!searchPredicate;/,
+		);
+		assert.doesNotMatch(
+			source,
+			/!isDesktop && isSearching && !!searchPredicate/,
+		);
+	});
+
+	it("feeds the desktop toolbar the shared escalation state", () => {
+		const toolbar = source.match(/<SelectionToolbar[\s\S]*?\/>/)?.[0] ?? "";
+		assert.match(toolbar, /statusLabel=\{selectionStatusLabel\}/);
+		assert.match(toolbar, /notice=\{escalationNotice\}/);
+		assert.match(toolbar, /progress=\{selectionProgress\}/);
+		// Desktop wires select-all only while searching — the mobile sheet carries
+		// it for any bounded selection.
+		assert.match(
+			toolbar,
+			/selectAll=\{escalationEnabled \? selectionSelectAll : undefined\}/,
+		);
+		assert.match(
+			toolbar,
+			/isCounting=\{escalation\.phase\.kind === "counting"\}/,
+		);
+	});
+
+	it("drives both surfaces from the same derivations", () => {
+		// The sheet and the toolbar read the same status label, select-all control
+		// and progress — a second copy for desktop is exactly the drift this
+		// guards against.
+		for (const shared of [
+			"selectionStatusLabel",
+			"selectionSelectAll",
+			"selectionProgress",
+			"selectionCount",
+		]) {
+			const uses = source.match(new RegExp(`\\b${shared}\\b`, "g")) ?? [];
+			assert.ok(
+				uses.length >= 3,
+				`${shared} should be defined once and read by both surfaces`,
+			);
+		}
+	});
+});
+
 /**
  * A bounded confirm-delete used to open the surviving neighbour by writing
  * `selectedMessageId` into the URL. On desktop that fills the reading pane

package/src/components/mail/MessageList.tsx

@@ -302,12 +302,12 @@ export const MessageList = ({
 		null,
 	);
 
-	// Search-scoped escalated selection + chunked bulk delete (issue #92):
-	// mobile only, and only while search has more matches than are loaded.
-	// `orderedIds` below feeds `allLoadedSelected`; declared after this hook so
-	// its callback deps stay simple — see the `orderedIds`/`handleRowSelect`
-	// block.
-	const escalationEnabled = !isDesktop && isSearching && !!searchPredicate;
+	// Search-scoped escalated selection + chunked bulk actions (issues #92, #212):
+	// available on both surfaces, and only while search has more matches than
+	// are loaded. `orderedIds` below feeds `allLoadedSelected`; declared after
+	// this hook so its callback deps stay simple — see the
+	// `orderedIds`/`handleRowSelect` block.
+	const escalationEnabled = isSearching && !!searchPredicate;
 	const predicateKey = `${mailboxId}|${JSON.stringify(searchPredicate ?? {})}`;
 	const escalation = useEscalatedActions({
 		mailboxId,
@@ -517,9 +517,9 @@ export const MessageList = ({
 		[onDeleteMessages, focusedMessageId],
 	);
 
-	// Mobile-only: open the delete confirmation for the escalated predicate.
-	// `escalation.phase` must already be "escalated" — the caller (the mobile
-	// bar's onDelete) only wires this up in that state.
+	// Open the delete confirmation for the escalated predicate. `escalation.phase`
+	// must already be "escalated" — the selection bar's onDelete (both surfaces)
+	// only wires this up in that state.
 	const requestEscalatedDelete = useCallback(() => {
 		if (escalation.phase.kind !== "escalated") return;
 		focusBeforeConfirmRef.current = focusedMessageId ?? null;
@@ -824,9 +824,10 @@ export const MessageList = ({
 		[isDesktop, select],
 	);
 
-	// Mobile bar's Trash tap: an escalated selection has no materialized ids to
-	// hand `requestDelete`, so it opens the predicate confirmation instead.
-	const handleMobileDelete = useCallback(() => {
+	// The selection bar's Trash tap (both surfaces): an escalated selection has
+	// no materialized ids to hand `requestDelete`, so it opens the predicate
+	// confirmation instead.
+	const handleSelectionDelete = useCallback(() => {
 		if (escalation.phase.kind === "escalated") {
 			requestEscalatedDelete();
 			return;
@@ -834,12 +835,12 @@ export const MessageList = ({
 		handleDelete();
 	}, [escalation.phase, requestEscalatedDelete, handleDelete]);
 
-	// Mobile bar's X: means "stop what's happening" throughout, not just
-	// "cancel selection" (issue #92 — the review flagged the X reading as
-	// ambiguous once a delete is running). Counting and deleting both stop at
-	// the next page boundary; an escalated-but-idle selection drops back to
-	// bounded on the way out, same as tapping "Clear selection" first.
-	const handleMobileCancel = useCallback(() => {
+	// The selection bar's X (both surfaces): means "stop what's happening"
+	// throughout, not just "cancel selection" (issue #92 — the review flagged
+	// the X reading as ambiguous once a run is going). Counting and a chunked
+	// run both stop at the next page boundary; an escalated-but-idle selection
+	// drops back to bounded on the way out, same as tapping "Clear selection".
+	const handleSelectionCancel = useCallback(() => {
 		if (escalation.isRunning || escalation.phase.kind === "counting") {
 			escalation.stop();
 			return;
@@ -1094,24 +1095,6 @@ export const MessageList = ({
 	// Single flat section — the mailbox view doesn't group by date.
 	const sections = [{ id: "inbox", threads: [] }];
 
-	// Desktop selection toolbar replaces the pane header when any rows are selected.
-	const desktopSelectionBar =
-		hasSelection && isDesktop ? (
-			<SelectionToolbar
-				selectedCount={selectedCount}
-				onDelete={handleDelete}
-				onClearSelection={exitSelection}
-				onMarkAsRead={handleMarkAsRead}
-				onMove={onMoveMessages ? handleMoveSelected : undefined}
-				onOrganize={() => setOrganizeOpen(true)}
-				isDeleting={isDeleting}
-				isMoving={isMoving}
-				accountId={accountId}
-				currentMailboxId={mailboxId}
-				moveDisabledHint={moveDisabledHint}
-			/>
-		) : undefined;
-
 	// Tier one of the two-tier select-all (issue #92, following Gmail web):
 	// every loaded row is checked. Computed against actual membership, not a
 	// count comparison, so a transient mismatch (mid-render, before the
@@ -1131,13 +1114,15 @@ export const MessageList = ({
 		escalation.phase.kind === "idle" &&
 		!escalation.isRunning;
 
-	const mobileIsBusy = isDeleting || isMoving || escalation.isRunning;
-	const mobileCount =
+	// The escalation-derived surface state — viewport-independent, fed to both
+	// the mobile sheet and the desktop toolbar so the two never diverge (#212).
+	const selectionIsBusy = isDeleting || isMoving || escalation.isRunning;
+	const selectionCount =
 		escalation.phase.kind === "escalated"
 			? escalation.phase.total
 			: selectedCount;
 
-	const mobileStatusLabel = escalation.runningAction
+	const selectionStatusLabel = escalation.runningAction
 		? bulkActionProgressLabel(
 				escalation.runningAction.kind,
 				escalation.progress?.done ?? 0,
@@ -1151,7 +1136,10 @@ export const MessageList = ({
 				? escalatedStatusLabel(searchPredicate ?? {}, escalation.phase.total)
 				: undefined;
 
-	const mobileSelectAll =
+	// The select-all-loaded control. The mobile sheet carries it for any bounded
+	// selection; the desktop toolbar only wires it while searching (below), where
+	// escalating past the loaded page is possible.
+	const selectionSelectAll =
 		escalation.phase.kind !== "escalated" && orderedIds.length > 0
 			? {
 					checked: allLoadedSelected,
@@ -1160,11 +1148,22 @@ export const MessageList = ({
 				}
 			: undefined;
 
-	// At most one notice at a time, ranked by how actionable it is: an
-	// in-progress counting/escalated state and its own action always wins;
+	const selectionProgress =
+		escalation.runningAction && escalation.progress
+			? {
+					value: escalation.progress.done,
+					max: escalation.progress.total,
+					tone: bulkActionProgressTone(escalation.runningAction.kind),
+				}
+			: undefined;
+
+	// At most one escalation notice at a time, ranked by how actionable it is:
+	// an in-progress counting/escalated state and its own action always wins;
 	// otherwise a fresh escalation offer; otherwise a just-finished partial
-	// failure's Retry; otherwise the (rare) cross-account move hint.
-	const mobileNotice =
+	// failure's Retry. The (rare) cross-account move hint is layered on per
+	// surface below — the desktop toolbar shows it inline, the mobile sheet
+	// folds it in as the lowest-priority notice.
+	const escalationNotice =
 		escalation.phase.kind === "counting"
 			? {
 					tone: "info" as const,
@@ -1202,9 +1201,15 @@ export const MessageList = ({
 									onClick: handleRetryFailed,
 								},
 							}
-						: moveDisabledHint
-							? { tone: "warning" as const, text: moveDisabledHint }
-							: undefined;
+						: undefined;
+
+	// The mobile sheet has no inline hint slot, so the cross-account move
+	// restriction rides in as the lowest-priority notice.
+	const mobileNotice =
+		escalationNotice ??
+		(moveDisabledHint
+			? { tone: "warning" as const, text: moveDisabledHint }
+			: undefined);
 
 	// Mobile: which content the peeking sheet routes to, from the escalation
 	// machinery. `running` (a chunked delete/move/mark-read) and `counting` (a
@@ -1223,7 +1228,7 @@ export const MessageList = ({
 		!isDesktop &&
 		isMultiSelectMode &&
 		shouldShowSelectionSheet(
-			mobileCount,
+			selectionCount,
 			mobileMode,
 			mobileNotice !== undefined,
 		);
@@ -1261,10 +1266,10 @@ export const MessageList = ({
 
 	const mobileSelectionSheet = showMobileSheet ? (
 		<SelectionSheet
-			count={mobileCount}
+			count={selectionCount}
 			mode={mobileMode}
-			onCancel={handleMobileCancel}
-			onDelete={handleMobileDelete}
+			onCancel={handleSelectionCancel}
+			onDelete={handleSelectionDelete}
 			onJunk={
 				junkMailboxId && junkMailboxId !== mailboxId && !moveDisabledHint
 					? handleJunk
@@ -1278,18 +1283,10 @@ export const MessageList = ({
 				accountId ? () => setMobileOrganizeEntry("something-else") : undefined
 			}
 			moveSlot={mobileMoveSlot}
-			isBusy={mobileIsBusy}
-			selectAll={mobileSelectAll}
-			statusLabel={mobileStatusLabel}
-			progress={
-				escalation.runningAction && escalation.progress
-					? {
-							value: escalation.progress.done,
-							max: escalation.progress.total,
-							tone: bulkActionProgressTone(escalation.runningAction.kind),
-						}
-					: undefined
-			}
+			isBusy={selectionIsBusy}
+			selectAll={selectionSelectAll}
+			statusLabel={selectionStatusLabel}
+			progress={selectionProgress}
 			notice={mobileNotice}
 		/>
 	) : undefined;
@@ -1304,6 +1301,33 @@ export const MessageList = ({
 			</>
 		) : undefined;
 
+	// Desktop selection toolbar replaces the pane header when any rows are
+	// selected. It gains the same search-escalation states the mobile sheet
+	// carries (issue #212) — the offer, counting, the escalated predicate and a
+	// chunked run's progress — from the shared derivations above; the
+	// cross-account move hint stays inline (the toolbar has a slot for it).
+	const desktopSelectionBar =
+		hasSelection && isDesktop ? (
+			<SelectionToolbar
+				selectedCount={selectionCount}
+				onDelete={handleSelectionDelete}
+				onClearSelection={handleSelectionCancel}
+				onMarkAsRead={handleMarkAsRead}
+				onMove={onMoveMessages ? handleMoveSelected : undefined}
+				onOrganize={() => setOrganizeOpen(true)}
+				isDeleting={isDeleting}
+				isMoving={isMoving}
+				accountId={accountId}
+				currentMailboxId={mailboxId}
+				moveDisabledHint={moveDisabledHint}
+				selectAll={escalationEnabled ? selectionSelectAll : undefined}
+				statusLabel={selectionStatusLabel}
+				isCounting={escalation.phase.kind === "counting"}
+				progress={selectionProgress}
+				notice={escalationNotice}
+			/>
+		) : undefined;
+
 	const activeSelectionBar = desktopSelectionBar;
 
 	// Roving tabindex: exactly one row is in the tab order, so Tab moves focus

package/src/components/mail/SelectionToolbar.render.test.ts

@@ -143,3 +143,132 @@ describe("SelectionToolbar", () => {
 		assert.equal(organized, 1);
 	});
 });
+
+/**
+ * The search-escalation states desktop gains in #212: the same offer →
+ * counting → escalated → chunked-run flow the mobile sheet carries, driven by
+ * the shared derivations in `MessageList`. These assert the toolbar routes each
+ * state, never that it re-implements the engine.
+ */
+describe("SelectionToolbar — search escalation", () => {
+	it("renders the select-all-loaded checkbox only when the control is wired", () => {
+		assert.equal(mount().query('[aria-label="Select all"]'), null);
+		harness?.close();
+		harness = undefined;
+		const dom = mount({
+			selectAll: {
+				checked: false,
+				indeterminate: true,
+				onChange: () => undefined,
+			},
+		});
+		assert.ok(dom.query('[aria-label="Select all"]'));
+	});
+
+	it("names the escalated scope through statusLabel instead of a bare count", () => {
+		const dom = mount({
+			selectedCount: 3412,
+			statusLabel: 'All 3,412 matching "npm" selected',
+		});
+		assert.match(dom.text(), /All 3,412 matching "npm" selected/);
+		assert.doesNotMatch(dom.text(), /messages selected/);
+	});
+
+	it("hides Delete while the total is still counting, and offers Stop", () => {
+		let stopped = 0;
+		const dom = mount({
+			isCounting: true,
+			statusLabel: "Counting… 1,900 so far",
+			notice: {
+				tone: "info",
+				text: "",
+				action: {
+					label: "Stop",
+					onClick: () => {
+						stopped += 1;
+					},
+				},
+			},
+		});
+		assert.equal(dom.query('[aria-label="Delete selected messages"]'), null);
+		dom.click(dom.byText("button", "Stop"));
+		assert.equal(stopped, 1);
+	});
+
+	it("offers the escalation control naming the scope, and escalating fires it", () => {
+		let escalated = 0;
+		const dom = mount({
+			selectAll: { checked: true, onChange: () => undefined },
+			notice: {
+				tone: "info",
+				text: "",
+				action: {
+					label: 'Select all matching "npm"',
+					onClick: () => {
+						escalated += 1;
+					},
+				},
+			},
+		});
+		dom.click(dom.byText("button", 'Select all matching "npm"'));
+		assert.equal(escalated, 1);
+	});
+
+	it("keeps every verb over an escalated selection — not delete-only (#114)", () => {
+		const dom = mount({
+			selectedCount: 3412,
+			statusLabel: 'All 3,412 matching "npm" selected',
+			onMarkAsRead: () => undefined,
+			onMove: () => undefined,
+			onOrganize: () => undefined,
+			accountId: "acc-1",
+			currentMailboxId: "mbx-inbox",
+			notice: {
+				tone: "info",
+				text: "",
+				action: { label: "Clear selection", onClick: () => undefined },
+			},
+		});
+		assert.ok(dom.query('[aria-label="Mark as read"]'));
+		assert.ok(dom.query('[aria-label="Move selected messages"]'));
+		assert.ok(dom.query('[aria-label="Delete selected messages"]'));
+		// Organize has no escalated-predicate path, so it withdraws once the
+		// selection names a scope through statusLabel.
+		assert.equal(dom.query('[aria-label="Organize similar messages"]'), null);
+	});
+
+	it("shows a progress bar mid-run and takes the verbs off screen", () => {
+		const dom = mount({
+			selectedCount: 3412,
+			statusLabel: "Moving 1,200 of 3,412…",
+			onMarkAsRead: () => undefined,
+			progress: { value: 1200, max: 3412, tone: "info" },
+		});
+		assert.ok(dom.query('[role="progressbar"]'));
+		assert.equal(dom.query('[aria-label="Delete selected messages"]'), null);
+		assert.equal(dom.query('[aria-label="Mark as read"]'), null);
+	});
+
+	it("names the succeeded count and retries exactly what is left over", () => {
+		let retried = 0;
+		const dom = mount({
+			selectedCount: 340,
+			notice: {
+				tone: "danger",
+				text: "3,072 moved to Trash. 340 couldn't be deleted.",
+				action: {
+					label: "Retry 340",
+					onClick: () => {
+						retried += 1;
+					},
+				},
+			},
+		});
+		assert.match(
+			dom.text(),
+			/3,072 moved to Trash\. 340 couldn't be deleted\./,
+		);
+		dom.click(dom.byText("button", "Retry 340"));
+		assert.equal(retried, 1);
+	});
+});

package/src/components/mail/SelectionToolbar.stories.tsx

@@ -0,0 +1,194 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SelectionToolbar } from "./SelectionToolbar";
+
+/**
+ * The desktop bulk-action bar. It keeps its bounded verbs (mark-read, move,
+ * delete, organize) and, from issue #212, gains the search-escalation states
+ * the mobile `SelectionSheet` already carries: the "Select all N matching…"
+ * offer, a running count, the escalated predicate, a chunked run's progress,
+ * and a partial-failure Retry. Both surfaces read the same derivations in
+ * `MessageList`, so these stories and the kit `SelectionTopBar` stories track
+ * the one state matrix.
+ *
+ * The Move verb needs the account-scoped `MoveToTrigger` (its own query and
+ * folder data), so it is left out here to keep these stories provider-free —
+ * its visual is covered by the kit `SelectionTopBar` stories' move slot. The
+ * escalated stories below still assert verb parity through the mark-read and
+ * delete verbs remaining available over the predicate.
+ */
+const meta: Meta<typeof SelectionToolbar> = {
+	title: "Screens/WebClient/SelectionToolbar",
+	component: SelectionToolbar,
+	parameters: { layout: "padded" },
+	args: {
+		selectedCount: 3,
+		onDelete: () => undefined,
+		onClearSelection: () => undefined,
+		onMarkAsRead: () => undefined,
+	},
+	render: (args) => (
+		<div className="w-full rounded-md border border-line">
+			<SelectionToolbar {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof SelectionToolbar>;
+
+/** A plain bounded selection: the count in words, mark-read and delete. */
+export const Bounded: Story = {};
+
+export const OneSelected: Story = { args: { selectedCount: 1 } };
+
+/**
+ * Some but not all loaded rows checked while searching: the select-all control
+ * renders the tri-state dash.
+ */
+export const SelectAllIndeterminate: Story = {
+	args: {
+		selectAll: {
+			checked: false,
+			indeterminate: true,
+			onChange: () => undefined,
+		},
+	},
+};
+
+/**
+ * Every loaded row checked. The label names the loaded scope — "All 47 loaded
+ * selected" — rather than a bare count next to a fully ticked box.
+ */
+export const AllLoadedSelected: Story = {
+	args: {
+		selectedCount: 47,
+		selectAll: { checked: true, onChange: () => undefined },
+	},
+};
+
+/**
+ * Search has more matches than are loaded: an escalation offer naming the
+ * scope (a real button, not prose). Tapping it pays for the real count.
+ */
+export const EscalationAvailable: Story = {
+	args: {
+		selectedCount: 47,
+		selectAll: { checked: true, onChange: () => undefined },
+		notice: {
+			tone: "info",
+			text: "",
+			action: {
+				label: 'Select all matching "npm"',
+				onClick: () => undefined,
+			},
+		},
+	},
+};
+
+/**
+ * The result set is still paging to its total: a running count, Delete hidden
+ * (the count it would act on isn't known yet), and an explicit Stop.
+ */
+export const Counting: Story = {
+	args: {
+		selectedCount: 47,
+		isCounting: true,
+		statusLabel: "Counting… 1,900 so far",
+		selectAll: { checked: true, onChange: () => undefined },
+		notice: {
+			tone: "info",
+			text: "",
+			action: { label: "Stop", onClick: () => undefined },
+		},
+	},
+};
+
+/** Past ~10s the counting state says so rather than looking stuck. */
+export const CountingLargeResultSet: Story = {
+	args: {
+		selectedCount: 0,
+		isCounting: true,
+		statusLabel: "Counting… 12,400 so far. This is a big result set.",
+		notice: {
+			tone: "info",
+			text: "",
+			action: { label: "Stop", onClick: () => undefined },
+		},
+	},
+};
+
+/**
+ * The selection is now the search predicate: the count names the query's total,
+ * every verb stays available over it (#114 — not delete-only), and the notice
+ * offers a way back to the bounded selection.
+ */
+export const Escalated: Story = {
+	args: {
+		selectedCount: 3412,
+		statusLabel: 'All 3,412 matching "npm" selected',
+		notice: {
+			tone: "info",
+			text: "",
+			action: { label: "Clear selection", onClick: () => undefined },
+		},
+	},
+};
+
+/**
+ * A chunked delete over the predicate: a running total and a determinate
+ * progress bar, the verbs off screen (the bar is the only thing that can act
+ * mid-run), toned as destructive.
+ */
+export const DeletingWithProgress: Story = {
+	args: {
+		selectedCount: 3412,
+		statusLabel: "Deleting 1,200 of 3,412…",
+		progress: { value: 1200, max: 3412, tone: "danger" },
+	},
+};
+
+/** A move over the escalated selection: the same run, toned as ordinary
+ *  progress and worded for the action that is running. */
+export const MovingWithProgress: Story = {
+	args: {
+		selectedCount: 3412,
+		statusLabel: "Moving 1,200 of 3,412…",
+		progress: { value: 1200, max: 3412, tone: "info" },
+	},
+};
+
+/** Mark-read over the escalated selection. */
+export const MarkingReadWithProgress: Story = {
+	args: {
+		selectedCount: 3412,
+		statusLabel: "Marking 1,200 of 3,412 as read…",
+		progress: { value: 1200, max: 3412, tone: "info" },
+	},
+};
+
+/**
+ * A run left some messages unreached: the notice names how many landed, the
+ * count reflects only what is still selected (the failures), and Retry targets
+ * exactly that.
+ */
+export const PartialFailure: Story = {
+	args: {
+		selectedCount: 340,
+		notice: {
+			tone: "danger",
+			text: "3,072 moved to Trash. 340 couldn't be deleted.",
+			action: { label: "Retry 340", onClick: () => undefined },
+		},
+	},
+};
+
+/**
+ * A selection spanning accounts: Move is withdrawn (it only works within one
+ * account) and the reason is stated inline.
+ */
+export const CrossAccountHint: Story = {
+	args: {
+		moveDisabledHint:
+			"Move only works within one account — clear selection or pick messages from a single account",
+	},
+};

package/src/components/mail/SelectionToolbar.tsx

@@ -1,7 +1,14 @@
+import { Banner, type BannerTone, Checkbox, ProgressBar } from "@remit/ui";
 import { Loader2, MailOpen, Sparkles, Trash2, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MoveToTrigger } from "./MoveToTrigger";
 
+export interface SelectionToolbarNotice {
+	tone: BannerTone;
+	text: string;
+	action?: { label: string; onClick: () => void };
+}
+
 interface SelectionToolbarProps {
 	selectedCount: number;
 	onDelete: () => void;
@@ -33,6 +40,42 @@ interface SelectionToolbarProps {
 	 * Move only works within one account.
 	 */
 	moveDisabledHint?: string;
+	/**
+	 * Select-all-loaded control, rendered between the clear button and the
+	 * count. Presence renders the checkbox; `indeterminate` is the some-selected
+	 * tri-state. Wired only while searching, where escalating past the loaded
+	 * page is possible (issue #212).
+	 */
+	selectAll?: {
+		checked: boolean;
+		indeterminate?: boolean;
+		onChange: () => void;
+	};
+	/**
+	 * Overrides the "{count} messages selected" text. Names the scope once it is
+	 * anything other than a materialized selection — an escalated predicate
+	 * ("All 3,412 matching \"npm\" selected"), a running count ("Counting… 1,900
+	 * so far"), or bulk-run progress ("Deleting 1,200 of 3,412…").
+	 */
+	statusLabel?: string;
+	/**
+	 * True while a search result set is still paging to its total. Hides Delete
+	 * (and Move) — the count they would act on isn't known yet.
+	 */
+	isCounting?: boolean;
+	/**
+	 * Determinate progress for a chunked/escalated run in flight. Renders a
+	 * `ProgressBar` below the action row and takes the verbs off screen — the
+	 * bar is the only thing that can act mid-run.
+	 */
+	progress?: { value: number; max: number; tone?: BannerTone };
+	/**
+	 * At-most-one toned status line below the action row, optionally carrying an
+	 * action button — the "Select all N matching…" escalation offer, a "Stop"
+	 * during counting, a "Clear selection" once escalated, or a partial-failure
+	 * "Retry N" (issue #212).
+	 */
+	notice?: SelectionToolbarNotice;
 }
 
 export const SelectionToolbar = ({
@@ -47,93 +90,164 @@ export const SelectionToolbar = ({
 	accountId,
 	currentMailboxId,
 	moveDisabledHint,
+	selectAll,
+	statusLabel,
+	isCounting = false,
+	progress,
+	notice,
 }: SelectionToolbarProps) => {
-	const isBusy = isDeleting || isMoving;
 	if (selectedCount === 0) return null;
 
+	// A chunked/escalated run owns the bar: the progress bar is the only signal
+	// that can act, so the verbs come off screen until it ends (issue #212).
+	const isRunning = progress !== undefined;
+	const isBusy = isDeleting || isMoving || isRunning;
+	// The verbs are suppressed while a run is in flight or a count is still
+	// paging; an escalated-but-idle selection keeps every verb (verb parity).
+	const showVerbs = !isRunning && !isCounting;
+
 	const canShowMove = !!onMove && !!accountId && !!currentMailboxId;
+	// Organize has no escalated-predicate path — it acts on the materialized
+	// selection — so it's withdrawn the moment the selection escalates or a run
+	// takes over (any state that names itself through `statusLabel`).
 	const canShowOrganize =
-		!!onOrganize && !!accountId && !!currentMailboxId && !moveDisabledHint;
+		!!onOrganize &&
+		!!accountId &&
+		!!currentMailboxId &&
+		!moveDisabledHint &&
+		!statusLabel;
+
+	const defaultLabel = selectAll?.checked
+		? `All ${selectedCount} loaded selected`
+		: `${selectedCount} ${selectedCount === 1 ? "message" : "messages"} selected`;
 
 	return (
-		<div className="sticky top-0 z-10 flex items-center justify-between px-3 py-2 bg-surface-sunken border-b border-line">
-			<div className="flex items-center gap-3">
-				<button
-					type="button"
-					onClick={onClearSelection}
-					className="min-h-11 min-w-11 inline-flex items-center justify-center rounded hover:bg-surface-raised transition-colors"
-					aria-label="Clear selection"
-				>
-					<X className="size-4 text-fg-muted" />
-				</button>
-				<span className="text-sm font-medium">
-					{selectedCount} {selectedCount === 1 ? "message" : "messages"}{" "}
-					selected
-				</span>
-				{moveDisabledHint && (
-					// biome-ignore lint/a11y/useSemanticElements: <span> with role="status" keeps inline layout; <output> would shift flow
-					<span
-						className="text-xs text-fg-muted"
-						role="status"
-						aria-live="polite"
-					>
-						{moveDisabledHint}
-					</span>
-				)}
-			</div>
-			<div className="flex items-center gap-1">
-				{canShowOrganize && onOrganize && (
-					<button
-						type="button"
-						onClick={isBusy ? undefined : onOrganize}
-						className="min-h-11 inline-flex items-center justify-center gap-1.5 px-3 rounded text-sm font-medium transition-colors hover:bg-surface-raised"
-						aria-label="Organize similar messages"
-					>
-						<Sparkles className="size-4" />
-						<span className="hidden sm:inline">Organize</span>
-					</button>
-				)}
-				{onMarkAsRead && (
+		<div className="sticky top-0 z-10 flex flex-col bg-surface-sunken border-b border-line">
+			<div className="flex items-center justify-between px-3 py-2">
+				<div className="flex items-center gap-3">
 					<button
 						type="button"
-						onClick={isBusy ? undefined : onMarkAsRead}
-						className="min-h-11 min-w-11 inline-flex items-center justify-center rounded text-sm font-medium transition-colors hover:bg-surface-raised"
-						aria-label="Mark as read"
-						aria-busy={isBusy}
+						onClick={onClearSelection}
+						className="min-h-11 min-w-11 inline-flex items-center justify-center rounded hover:bg-surface-raised transition-colors"
+						aria-label="Clear selection"
 					>
-						<MailOpen className="size-4" />
+						<X className="size-4 text-fg-muted" />
 					</button>
-				)}
-				{canShowMove && onMove && accountId && currentMailboxId && (
-					<MoveToTrigger
-						accountId={accountId}
-						currentMailboxId={currentMailboxId}
-						onMove={isBusy ? () => {} : onMove}
-						disabledHint={moveDisabledHint}
-						variant="icon-only"
-						label="Move selected messages"
-					/>
-				)}
-				<button
-					type="button"
-					onClick={isBusy ? undefined : onDelete}
-					className={cn(
-						"min-h-11 min-w-11 inline-flex items-center justify-center gap-1.5 px-3 rounded text-sm font-medium transition-colors",
-						"bg-danger text-canvas hover:bg-danger/90",
+					{selectAll && (
+						// biome-ignore lint/a11y/noLabelWithoutControl: the label wraps Checkbox's own input, giving the 20px control a 44px hit area
+						<label className="flex size-11 shrink-0 cursor-pointer items-center justify-center">
+							<Checkbox
+								aria-label="Select all"
+								checked={selectAll.checked}
+								indeterminate={selectAll.indeterminate}
+								onChange={selectAll.onChange}
+							/>
+						</label>
 					)}
-					aria-label="Delete selected messages"
-					aria-busy={isDeleting}
-				>
-					{isDeleting ? (
-						<Loader2 className="size-4 animate-spin" />
-					) : (
-						<Trash2 className="size-4" />
-					)}
-					<span className="hidden sm:inline">
-						{isDeleting ? "Deleting..." : "Delete"}
+					<span className="text-sm font-medium">
+						{statusLabel ?? defaultLabel}
 					</span>
-				</button>
+					{moveDisabledHint && !notice && (
+						<span
+							className="text-xs text-fg-muted"
+							role="status"
+							aria-live="polite"
+						>
+							{moveDisabledHint}
+						</span>
+					)}
+				</div>
+				<div className="flex items-center gap-1">
+					{canShowOrganize && onOrganize && (
+						<button
+							type="button"
+							onClick={isBusy ? undefined : onOrganize}
+							className="min-h-11 inline-flex items-center justify-center gap-1.5 px-3 rounded text-sm font-medium transition-colors hover:bg-surface-raised"
+							aria-label="Organize similar messages"
+						>
+							<Sparkles className="size-4" />
+							<span className="hidden sm:inline">Organize</span>
+						</button>
+					)}
+					{showVerbs && onMarkAsRead && (
+						<button
+							type="button"
+							onClick={isBusy ? undefined : onMarkAsRead}
+							className="min-h-11 min-w-11 inline-flex items-center justify-center rounded text-sm font-medium transition-colors hover:bg-surface-raised"
+							aria-label="Mark as read"
+							aria-busy={isBusy}
+						>
+							<MailOpen className="size-4" />
+						</button>
+					)}
+					{showVerbs &&
+						canShowMove &&
+						onMove &&
+						accountId &&
+						currentMailboxId && (
+							<MoveToTrigger
+								accountId={accountId}
+								currentMailboxId={currentMailboxId}
+								onMove={isBusy ? () => {} : onMove}
+								disabledHint={moveDisabledHint}
+								variant="icon-only"
+								label="Move selected messages"
+							/>
+						)}
+					{showVerbs && (
+						<button
+							type="button"
+							onClick={isBusy ? undefined : onDelete}
+							className={cn(
+								"min-h-11 min-w-11 inline-flex items-center justify-center gap-1.5 px-3 rounded text-sm font-medium transition-colors",
+								"bg-danger text-canvas hover:bg-danger/90",
+							)}
+							aria-label="Delete selected messages"
+							aria-busy={isDeleting}
+						>
+							{isDeleting ? (
+								<Loader2 className="size-4 animate-spin" />
+							) : (
+								<Trash2 className="size-4" />
+							)}
+							<span className="hidden sm:inline">
+								{isDeleting ? "Deleting..." : "Delete"}
+							</span>
+						</button>
+					)}
+				</div>
 			</div>
+			{progress && (
+				<div className="px-3 pb-2">
+					<ProgressBar
+						value={progress.value}
+						max={progress.max}
+						tone={progress.tone}
+					/>
+				</div>
+			)}
+			{notice && (
+				<Banner
+					tone={notice.tone}
+					variant="soft"
+					role="status"
+					aria-live="polite"
+					className="mx-3 mb-2"
+				>
+					<div className="flex items-center justify-between gap-2">
+						{notice.text && <span>{notice.text}</span>}
+						{notice.action && (
+							<button
+								type="button"
+								onClick={notice.action.onClick}
+								className="-my-1 min-h-11 shrink-0 inline-flex items-center px-3 rounded text-sm font-medium transition-colors hover:bg-surface-raised"
+							>
+								{notice.action.label}
+							</button>
+						)}
+					</div>
+				</Banner>
+			)}
 		</div>
 	);
 };

package/src/hooks/useEscalatedActions.ts

@@ -62,8 +62,8 @@ interface UseEscalatedActionsOptions {
 	mailboxId: string;
 	/** Owning account, forwarded to the unseen-count invalidation on completion. */
 	accountId?: string;
-	/** Disables escalation entirely (e.g. not searching, or desktop — this is a
-	 *  mobile-only affordance). Resets any in-flight phase back to idle. */
+	/** Disables escalation entirely (e.g. not searching). Resets any in-flight
+	 *  phase back to idle. */
 	enabled: boolean;
 	/** Identifies the active predicate; escalation resets to idle whenever this
 	 *  changes (a different search is a different question). */

package/src/lib/search-surface.test.ts

@@ -0,0 +1,74 @@
+import assert from "node:assert/strict";
+import { describe, test } from "node:test";
+import { showInlineSearchResults } from "./search-surface.js";
+
+describe("showInlineSearchResults", () => {
+	test("phone never swaps in the inline panel — it keeps its takeover", () => {
+		assert.equal(
+			showInlineSearchResults({
+				tier: "phone",
+				hasLiveInput: true,
+				hasCommittedQuery: true,
+				bodyRendersCommittedResults: false,
+			}),
+			false,
+		);
+	});
+
+	test("no query means the normal list, on every tier", () => {
+		assert.equal(
+			showInlineSearchResults({
+				tier: "desktop",
+				hasLiveInput: false,
+				hasCommittedQuery: false,
+				bodyRendersCommittedResults: true,
+			}),
+			false,
+		);
+	});
+
+	test("a view without its own results body keeps the panel for any query", () => {
+		for (const hasCommittedQuery of [true, false]) {
+			for (const tier of ["tablet", "desktop"] as const) {
+				assert.equal(
+					showInlineSearchResults({
+						tier,
+						hasLiveInput: true,
+						hasCommittedQuery,
+						bodyRendersCommittedResults: false,
+					}),
+					true,
+					`${tier} committed=${hasCommittedQuery} should keep the panel`,
+				);
+			}
+		}
+	});
+
+	test("the mailbox route shows the panel while typing an uncommitted query", () => {
+		for (const tier of ["tablet", "desktop"] as const) {
+			assert.equal(
+				showInlineSearchResults({
+					tier,
+					hasLiveInput: true,
+					hasCommittedQuery: false,
+					bodyRendersCommittedResults: true,
+				}),
+				true,
+			);
+		}
+	});
+
+	test("the mailbox route hands back to its selectable body once the query commits", () => {
+		for (const tier of ["tablet", "desktop"] as const) {
+			assert.equal(
+				showInlineSearchResults({
+					tier,
+					hasLiveInput: true,
+					hasCommittedQuery: true,
+					bodyRendersCommittedResults: true,
+				}),
+				false,
+			);
+		}
+	});
+});

package/src/lib/search-surface.ts

@@ -0,0 +1,34 @@
+import type { LayoutTier } from "@/hooks/useLayoutTier";
+
+/**
+ * Which surface a list view shows its search on. Two surfaces exist:
+ *
+ * - the read-only two-engine `SearchResults` panel (literal "Top matches" +
+ *   semantic "Related", cross-folder, spam offer), swapped into the list-pane
+ *   body on tablet/desktop while searching; and
+ * - the view's own body — for the mailbox route a selectable `MessageList` whose
+ *   threads filter to the committed search — which hosts multi-select and the
+ *   "Select all N matching" escalation (#212).
+ *
+ * Phone never swaps: it shows the body and keeps the panel in its full-screen
+ * takeover instead, so this only decides tablet/desktop.
+ *
+ * A view whose body renders committed results itself (`bodyRendersCommittedResults`,
+ * the mailbox route) keeps the panel only while the query is still being typed —
+ * uncommitted, not yet mirrored to the URL — and hands back to the body the moment
+ * the query commits, so the committed search is a selectable list. Every other view
+ * (the brief, flagged, global search) leaves the flag off and keeps the panel for
+ * any query, committed or not.
+ */
+export const showInlineSearchResults = (input: {
+	tier: LayoutTier;
+	/** The live field value is non-empty (something is being searched). */
+	hasLiveInput: boolean;
+	/** The query has settled into the URL (`?q=`), i.e. it is committed. */
+	hasCommittedQuery: boolean;
+	/** This view's body renders the committed search as a selectable list. */
+	bodyRendersCommittedResults: boolean;
+}): boolean =>
+	input.tier !== "phone" &&
+	input.hasLiveInput &&
+	!(input.bodyRendersCommittedResults && input.hasCommittedQuery);