@remit/web-client 0.0.56 → 0.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.56",
+  "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

@@ -53,6 +53,7 @@ import {
 } from "@/lib/selection-sheet-mode";
 import { cn } from "@/lib/utils";
 import { MoveToTrigger } from "./MoveToTrigger";
+import { MobileOrganizeFlow } from "./organize/MobileOrganizeFlow";
 import { OrganizeDialog } from "./organize/OrganizeDialog";
 import { SelectionToolbar } from "./SelectionToolbar";
 import { SwipeableMessageRow } from "./SwipeableMessageRow";
@@ -221,6 +222,12 @@ export const MessageList = ({
 	const navigate = useNavigate();
 	const isDesktop = useIsDesktop();
 	const [organizeOpen, setOrganizeOpen] = useState(false);
+	// Mobile only: which selection-sheet entry opened the guided organize flow
+	// (`null` when closed). Desktop uses `organizeOpen` + `OrganizeDialog`
+	// instead — a sheet is a touch pattern (issue #211).
+	const [mobileOrganizeEntry, setMobileOrganizeEntry] = useState<
+		"select-similar" | "something-else" | null
+	>(null);
 	const isSearching = !!searchQuery?.trim();
 
 	// Roving focus cursor (#429): the keyboard "where am I" pointer, distinct
@@ -275,6 +282,13 @@ export const MessageList = ({
 	// it back to the count, and across that render the two disagree.
 	const isMultiSelectMode = deriveIsMultiSelectMode(selectedCount, isDesktop);
 
+	// When the selection empties — cancel, a completed action, a mailbox switch —
+	// the guided organize entry must reset too, so a later re-selection doesn't
+	// reopen the flow on a stale entry (issue #211).
+	useEffect(() => {
+		if (selectedCount === 0) setMobileOrganizeEntry(null);
+	}, [selectedCount]);
+
 	// Pending delete, awaiting confirmation. `null` means the dialog is closed.
 	// `source: "ids"` snapshots the concrete ids at request time so a selection
 	// change behind the dialog can't retarget the delete — every keyboard/desktop
@@ -288,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,
@@ -503,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;
@@ -810,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;
@@ -820,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;
@@ -1080,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
@@ -1117,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,
@@ -1137,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,
@@ -1146,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,
@@ -1188,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
@@ -1209,7 +1228,7 @@ export const MessageList = ({
 		!isDesktop &&
 		isMultiSelectMode &&
 		shouldShowSelectionSheet(
-			mobileCount,
+			selectionCount,
 			mobileMode,
 			mobileNotice !== undefined,
 		);
@@ -1227,37 +1246,88 @@ export const MessageList = ({
 			/>
 		) : undefined;
 
+	// The guided organize flow (issue #211) overlays the same positioned pane
+	// ancestor as the sheet, so it is rendered from the sheet slot. The sheet
+	// stays mounted underneath as the flow's dimmed backdrop.
+	const mobileOrganizeFlow =
+		mobileOrganizeEntry && accountId && !isDesktop && selectedCount > 0 ? (
+			<MobileOrganizeFlow
+				entry={mobileOrganizeEntry}
+				accountId={accountId}
+				mailboxId={mailboxId}
+				selectedMessageIds={Array.from(selectedIds)}
+				junkMailboxId={junkMailboxId}
+				onClose={() => {
+					setMobileOrganizeEntry(null);
+					exitSelection();
+				}}
+			/>
+		) : undefined;
+
 	const mobileSelectionSheet = showMobileSheet ? (
 		<SelectionSheet
-			count={mobileCount}
+			count={selectionCount}
 			mode={mobileMode}
-			onCancel={handleMobileCancel}
-			onDelete={handleMobileDelete}
+			onCancel={handleSelectionCancel}
+			onDelete={handleSelectionDelete}
 			onJunk={
 				junkMailboxId && junkMailboxId !== mailboxId && !moveDisabledHint
 					? handleJunk
 					: undefined
 			}
 			onMarkRead={handleMarkAsRead}
-			onSelectSimilar={accountId ? () => setOrganizeOpen(true) : undefined}
-			onSomethingElse={accountId ? () => setOrganizeOpen(true) : 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
+			onSelectSimilar={
+				accountId ? () => setMobileOrganizeEntry("select-similar") : undefined
 			}
+			onSomethingElse={
+				accountId ? () => setMobileOrganizeEntry("something-else") : undefined
+			}
+			moveSlot={mobileMoveSlot}
+			isBusy={selectionIsBusy}
+			selectAll={selectionSelectAll}
+			statusLabel={selectionStatusLabel}
+			progress={selectionProgress}
 			notice={mobileNotice}
 		/>
 	) : undefined;
 
+	// Both mobile overlays share the pane's positioned ancestor via the sheet
+	// slot: the peeking sheet, and the guided organize flow above it.
+	const mobileSelectionSurface =
+		mobileSelectionSheet || mobileOrganizeFlow ? (
+			<>
+				{mobileSelectionSheet}
+				{mobileOrganizeFlow}
+			</>
+		) : 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
@@ -1401,7 +1471,7 @@ export const MessageList = ({
 				isDesktop={isDesktop}
 				hideHeader={hideHeader}
 				selectionBar={activeSelectionBar}
-				selectionSheet={mobileSelectionSheet}
+				selectionSheet={mobileSelectionSurface}
 				listBody={listState === "ready" ? virtualBody : undefined}
 			/>
 			<ConfirmDialog

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);
+	});
+});