@remit/ui 0.0.62 → 0.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "type": "module",
   "files": [
     "src"

package/src/components/message-list-pane.tsx

@@ -1,6 +1,6 @@
 import { Menu } from "lucide-react";
 import type { ReactNode } from "react";
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { LIST_ROW_SELECTOR, useRovingFocus } from "../lib/roving-focus.js";
 import type { AppShellProps, TouchSeed } from "./app-shell-types.js";
 import { BriefSections } from "./brief-sections.js";
@@ -125,7 +125,27 @@ export function MessageListPane({
 			? new Set(seededRows.slice(0, 2).map((t) => t.id))
 			: new Set(),
 	);
+	// What the fallback bar's verbs have done to the mock rows. A demo bar whose
+	// Trash only closes the bar is a Trash that deletes nothing, which is the one
+	// thing a selection bar must never be — so these verbs act on the rows the
+	// mock owns, the same way `refresh` below fakes a refresh visibly.
+	const [trashedIds, setTrashedIds] = useState<ReadonlySet<string>>(new Set());
+	const [readIds, setReadIds] = useState<ReadonlySet<string>>(new Set());
 	const [refreshing, setRefreshing] = useState(false);
+	const touchSections = useMemo(
+		() =>
+			trashedIds.size === 0 && readIds.size === 0
+				? sections
+				: sections.map((section) => ({
+						...section,
+						threads: section.threads
+							.filter((thread) => !trashedIds.has(thread.id))
+							.map((thread) =>
+								readIds.has(thread.id) ? { ...thread, isRead: true } : thread,
+							),
+					})),
+		[sections, trashedIds, readIds],
+	);
 	const initialPeek: SwipePeek | undefined =
 		initialTouchState === "peek-trailing"
 			? "trailing"
@@ -150,6 +170,14 @@ export function MessageListPane({
 		setSelectionMode(false);
 		setCheckedIds(new Set());
 	};
+	const trashChecked = () => {
+		setTrashedIds((prev) => new Set([...prev, ...checkedIds]));
+		cancelSelection();
+	};
+	const markCheckedRead = () => {
+		setReadIds((prev) => new Set([...prev, ...checkedIds]));
+		cancelSelection();
+	};
 	const refresh = () => {
 		setRefreshing(true);
 		setTimeout(() => setRefreshing(false), 1400);
@@ -168,8 +196,8 @@ export function MessageListPane({
 						title={listTitle}
 						count={checkedIds.size}
 						onCancel={cancelSelection}
-						onMarkRead={cancelSelection}
-						onDelete={cancelSelection}
+						onMarkRead={markCheckedRead}
+						onDelete={trashChecked}
 					/>
 				) : hideHeader ? null : (
 					<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-row-inset">
@@ -230,7 +258,7 @@ export function MessageListPane({
 				listBody
 			) : touchTriage ? (
 				<TouchListBody
-					sections={sections}
+					sections={touchSections}
 					selectedThreadId={selectedThreadId}
 					selectionMode={selectionMode}
 					checkedIds={checkedIds}

package/src/components/selection-top-bar.stories.tsx

@@ -236,12 +236,10 @@ export const EscalationAvailable: Story = {
  * query's total, not a materialized id count, and the notice offers a way
  * back to the bounded selection.
  *
- * Every verb the bar carries stays available here (#114). An escalated
- * selection is a predicate rather than an id list, so the web-client runs
- * move and mark-read by paging that predicate the same way delete does —
- * from the bar's side nothing changes, which is the point: an escalated
- * selection that could only be deleted forced anyone wanting to file those
- * messages back to the loaded page.
+ * Every verb the bar carries stays available here (#114), and every one of
+ * them opens the wizard, which names the predicate and states its count before
+ * anything runs (#508). From the bar's side nothing changes, which is the
+ * point: an escalated selection is a selection.
  */
 export const Escalated: Story = {
 	args: {
@@ -306,22 +304,6 @@ export const DeletingWithProgress: Story = {
 	},
 };
 
-/**
- * After a bulk delete finishes with some batches failed: the count reflects
- * only what's still selected — the failures — not the original selection,
- * and Retry is a real button naming how many.
- */
-export const PartialFailure: Story = {
-	args: {
-		count: 340,
-		notice: {
-			tone: "danger",
-			text: "3,072 moved to Trash. 340 couldn't be deleted.",
-			action: { label: "Retry 340", onClick: () => undefined },
-		},
-	},
-};
-
 /**
  * A move over an escalated selection: same chunked run as a delete, worded for
  * the action that is running and toned as ordinary progress rather than
@@ -345,18 +327,3 @@ export const MarkingReadWithProgress: Story = {
 		progress: { value: 1200, max: 3412, tone: "info" },
 	},
 };
-
-/**
- * Partial failure of a move rather than a delete: the notice names the action
- * that ran, and Retry resends that same action against what is still selected.
- */
-export const PartialFailureMove: Story = {
-	args: {
-		count: 340,
-		notice: {
-			tone: "danger",
-			text: "3,072 moved. 340 couldn't be moved.",
-			action: { label: "Retry 340", onClick: () => undefined },
-		},
-	},
-};

package/src/components/selection-top-bar.tsx

@@ -45,12 +45,6 @@ export interface SelectionTopBarProps {
 	 * a selection spanning accounts, or a surface with no owning mailbox.
 	 */
 	onMove?: () => void;
-	/**
-	 * The Move verb for a selection the wizard cannot take: an escalated
-	 * predicate, which no bounded list of ids stands in for, so it keeps the
-	 * caller's own folder picker. Rendered only in `onMove`'s place.
-	 */
-	moveSlot?: ReactNode;
 	/** Opens Organize for the selection. Omitted where organize cannot be
 	 *  scoped to one account. */
 	onOrganize?: () => void;
@@ -124,7 +118,7 @@ export interface SelectionTopBarProps {
 	/**
 	 * Toned status line below the action row, sometimes carrying an action
 	 * button — a cross-account move restriction, a "Select all N matching…"
-	 * escalation, a "Stop" during counting, or a partial-failure "Retry N".
+	 * escalation, or a "Stop" during counting.
 	 */
 	notice?: SelectionTopBarNotice;
 }
@@ -172,7 +166,6 @@ export function SelectionTopBar({
 	onCancel,
 	onDelete,
 	onMove,
-	moveSlot,
 	onOrganize,
 	onJunk,
 	onMarkRead,
@@ -278,19 +271,16 @@ export function SelectionTopBar({
 							aria-busy={isBusy || undefined}
 							className="shrink-0"
 						/>
-						{!isBusy &&
-							(onMove ? (
-								<Button
-									variant="ghost"
-									size="touch"
-									icon={<FolderInput className="size-5" />}
-									onClick={onMove}
-									aria-label="Move selected messages"
-									className="shrink-0"
-								/>
-							) : (
-								moveSlot
-							))}
+						{!isBusy && onMove && (
+							<Button
+								variant="ghost"
+								size="touch"
+								icon={<FolderInput className="size-5" />}
+								onClick={onMove}
+								aria-label="Move selected messages"
+								className="shrink-0"
+							/>
+						)}
 						{!isBusy && onOrganize && (
 							<Button
 								variant="ghost"

package/src/components/selection-wizard.render.test.ts

@@ -257,6 +257,36 @@ describe("MatchStepBody", () => {
 		assert.doesNotMatch(html, /disabled=""/);
 		assert.match(html, /matching on the\s+senders instead/);
 	});
+
+	it("names what an escalated predicate covers instead of offering doors", () => {
+		const html = renderToString(
+			createElement(MatchStepBody, {
+				...matchProps,
+				mode: "escalated",
+				escalatedScope: 'matching "npm"',
+				sample: {
+					messages,
+					count: counted(1284),
+					label: "A sample of what matches",
+				},
+			}),
+		);
+		assert.match(html, /Every message matching "npm"/);
+		assert.match(html, /nothing to widen/);
+		// The three doors are gone: a predicate is the match already.
+		assert.doesNotMatch(html, /These 2 messages/);
+		assert.doesNotMatch(html, /Similar to these/);
+		assert.doesNotMatch(html, /Its properties/);
+		// The members of the match still close the screen (#477 2.3).
+		assert.match(html, /Booking confirmation/);
+	});
+
+	it("falls back to naming the list rather than naming nothing", () => {
+		const html = renderToString(
+			createElement(MatchStepBody, { ...matchProps, mode: "escalated" }),
+		);
+		assert.match(html, /Every message the list is showing/);
+	});
 });
 
 describe("PropertiesStepBody", () => {
@@ -439,6 +469,29 @@ describe("ReviewStepBody", () => {
 		assert.match(html, /not known until the run finishes/);
 	});
 
+	it("states an escalated predicate and the count the server gave it", () => {
+		const html = renderToString(
+			createElement(ReviewStepBody, {
+				...reviewProps,
+				verb: "delete",
+				mode: "escalated",
+				escalatedScope: 'matching "npm"',
+				folder: undefined,
+				sample: {
+					messages,
+					count: counted(1284),
+					label: "A sample of what matches",
+				},
+			}),
+		);
+		assert.match(
+			text(html),
+			/Delete<\/span> all 1,284 messages matching &quot;npm&quot;/,
+		);
+		// The count is one reading of a live predicate, and the run takes another.
+		assert.match(html, /anything else matching by the time it runs/);
+	});
+
 	it("names the rule and its stop date once the scope persists", () => {
 		const html = renderToString(
 			createElement(ReviewStepBody, {
@@ -486,6 +539,23 @@ describe("RunStepBody", () => {
 		assert.match(html, /The rule itself is saved/);
 	});
 
+	it("says a stopped run was never sent rather than rejected", () => {
+		const html = renderToString(
+			createElement(RunStepBody, {
+				...runProps,
+				state: "runStopped",
+				scope: "once",
+				matched: 4,
+				applied: 2,
+				failures: messages,
+			}),
+		);
+		assert.match(html, /Stopped after 2/);
+		assert.match(html, /nothing was sent for them/);
+		assert.match(html, /Never sent/);
+		assert.doesNotMatch(html, /Server rejected/);
+	});
+
 	it("ends a one-off run on its own count", () => {
 		const html = renderToString(
 			createElement(RunStepBody, { ...runProps, scope: "once" }),

package/src/components/selection-wizard.tsx

@@ -21,7 +21,12 @@ import { Fragment, type ReactNode, useEffect, useId, useRef } from "react";
 import { cn } from "../lib/cn.js";
 import {
 	backExits,
+	ESCALATED_MATCH_HINT,
+	ESCALATED_REVIEW_WARNING,
+	ESCALATED_SCOPE_FALLBACK,
+	escalatedMatchLabel,
 	type MatchCount,
+	type MatchDoor,
 	type MatchMode,
 	matchDoorHint,
 	matchDoorLabel,
@@ -414,7 +419,12 @@ export function FooterNav({
 export interface MatchStepProps {
 	selectedCount: number;
 	mode: MatchMode;
-	onModeChange: (mode: MatchMode) => void;
+	/**
+	 * Answers the door. Typed to the three doors rather than to every mode, so
+	 * no driver can set `escalated` from a screen — the list escalates a
+	 * selection, the wizard never does.
+	 */
+	onModeChange: (mode: MatchDoor) => void;
 	/**
 	 * Similar-mail matching cannot run right now. A runtime state, not a property
 	 * of the deployment: the door stays pressable and dimmed.
@@ -429,6 +439,12 @@ export interface MatchStepProps {
 	/** The dimmed door was pressed and the senders were filled in instead. */
 	semanticFallbackTaken?: boolean;
 	onSemanticFallback: () => void;
+	/**
+	 * What the escalated predicate covers, in the words the list escalated it
+	 * with. Read only while the mode is `escalated`, where it replaces the three
+	 * doors: the predicate is the match already.
+	 */
+	escalatedScope?: string;
 	sample: SelectionSampleProps;
 }
 
@@ -440,8 +456,24 @@ export function MatchStepBody({
 	semanticErrorDetail,
 	semanticFallbackTaken,
 	onSemanticFallback,
+	escalatedScope,
 	sample,
 }: MatchStepProps) {
+	if (mode === "escalated") {
+		return (
+			<>
+				<div className="rounded-lg border border-accent bg-accent-soft p-3">
+					<p className="text-sm font-medium text-fg">
+						{escalatedMatchLabel(escalatedScope ?? ESCALATED_SCOPE_FALLBACK)}
+					</p>
+					<p className="mt-1 text-xs text-fg-muted">{ESCALATED_MATCH_HINT}</p>
+				</div>
+				<div className="mt-4">
+					<SelectionSample {...sample} />
+				</div>
+			</>
+		);
+	}
 	return (
 		<>
 			<div className="space-y-2">
@@ -821,6 +853,8 @@ export interface ReviewStepProps {
 	until?: string;
 	/** Present when the flow reached the naming step. */
 	ruleName?: string;
+	/** What the escalated predicate covers, in the list's own words. */
+	escalatedScope?: string;
 	sample: SelectionSampleProps;
 }
 
@@ -834,10 +868,21 @@ export function ReviewStepBody({
 	scope,
 	until,
 	ruleName,
+	escalatedScope,
 	sample,
 }: ReviewStepProps) {
 	const { label } = verbCopy(verb);
-	const description = { mode, selectedCount, clauses, matchOperator };
+	const description = {
+		mode,
+		selectedCount,
+		clauses,
+		matchOperator,
+		escalatedScope,
+		// A count still moving is not a number to commit against, and the footer
+		// under the review's Continue already says so.
+		escalatedCount:
+			sample.count.status === "ready" ? sample.count.count : undefined,
+	};
 	const widened = mode !== "selected";
 	const persists = scope === "standing" || scope === "until";
 
@@ -860,7 +905,9 @@ export function ReviewStepBody({
 				{widened && (
 					<p className="mt-2 flex items-start gap-1.5 text-xs text-warning">
 						<AlertTriangle className="mt-px size-3.5 shrink-0" />
-						This covers messages not shown in the list.
+						{mode === "escalated"
+							? ESCALATED_REVIEW_WARNING
+							: "This covers messages not shown in the list."}
 					</p>
 				)}
 			</div>
@@ -950,6 +997,9 @@ export function RunStepBody(props: RunStepProps) {
 	const { matched, applied, failures } = props;
 	const outcome = runOutcomeOf(props);
 	const copy = runCopy(outcome);
+	// A stopped run never sent these, so nothing rejected them.
+	const failureBadge =
+		props.state === "runStopped" ? "Never sent" : "Server rejected";
 
 	return (
 		<div className="space-y-4 pt-2">
@@ -980,7 +1030,7 @@ export function RunStepBody(props: RunStepProps) {
 									{message.subject}
 								</p>
 								<Badge className="mt-1" tone="warning">
-									Server rejected
+									{failureBadge}
 								</Badge>
 							</li>
 						))}
@@ -1148,10 +1198,17 @@ export function SelectionWizard(props: SelectionWizardProps) {
 		return runCopy(runOutcomeOf(stepProps(props.run, step))).screenTitle;
 	};
 
+	// An escalated predicate is offered no doors, so the screen states what it
+	// covers rather than asking a question with one answer.
+	const subtitle =
+		step === "match" && props.match?.mode === "escalated"
+			? "What this applies to"
+			: screen.subtitle;
+
 	return (
 		<WizardScreen
 			title={title()}
-			subtitle={screen.subtitle}
+			subtitle={subtitle}
 			steps={steps}
 			step={step}
 			onBack={onBack}

package/src/index.ts

@@ -669,8 +669,13 @@ export {
 	clauseWords,
 	crossAccountDestinationReason,
 	crossAccountRuleReason,
+	ESCALATED_MATCH_HINT,
+	ESCALATED_REVIEW_WARNING,
+	ESCALATED_SCOPE_FALLBACK,
+	escalatedMatchLabel,
 	type MatchCount,
 	type MatchDescription,
+	type MatchDoor,
 	type MatchMode,
 	matchDoorHint,
 	matchDoorLabel,

package/src/lib/wizard-steps.test.ts

@@ -9,6 +9,9 @@ import {
 	backExits,
 	clauseSentence,
 	clauseWords,
+	ESCALATED_MATCH_HINT,
+	ESCALATED_REVIEW_WARNING,
+	escalatedMatchLabel,
 	type MatchCount,
 	type MatchMode,
 	matchDoorHint,
@@ -30,7 +33,7 @@ import {
 } from "./wizard-steps.js";
 
 const VERBS: Verb[] = ["delete", "move", "junk", "markRead", "organize"];
-const MODES: MatchMode[] = ["selected", "similar", "properties"];
+const MODES: MatchMode[] = ["selected", "similar", "properties", "escalated"];
 const SCOPES: (RuleScope | undefined)[] = [
 	undefined,
 	"once",
@@ -475,6 +478,7 @@ describe("runCopy", () => {
 			"backApplyFailed",
 			"backApplyStartFailed",
 			"filterSaved",
+			"runStopped",
 			"commitFailed",
 		];
 		for (const state of states) {
@@ -499,6 +503,23 @@ describe("runCopy", () => {
 		assert.doesNotMatch(once.detail, /rule/);
 	});
 
+	it("separates a run that stopped from a pass the server rejected", () => {
+		// The bulk endpoints accept every id in a call that returns, so the only
+		// failure the chunked runner can observe is a call that threw — and
+		// everything after it was never sent. Saying the mail server rejected
+		// those states a cause that did not happen.
+		const stopped = outcome("runStopped", "once");
+		assert.equal(stopped.title, "Stopped after 10");
+		assert.match(stopped.detail, /nothing was sent for them/);
+		assert.doesNotMatch(stopped.detail, /rejected/);
+		assert.equal(stopped.retryLabel, "Retry 2");
+		assert.equal(stopped.showProgress, true);
+
+		// The back-apply pass is run by the server, which reports what it could
+		// not apply — a rejection, and worded as one.
+		assert.match(outcome("backApplyFailed", "once").detail, /rejected/);
+	});
+
 	it("ends a one-off run on its own count and a saved rule on the rule", () => {
 		assert.equal(outcome("backApplyComplete", "once").title, "Moved 10");
 		assert.equal(
@@ -585,6 +606,15 @@ describe("sample and door vocabulary", () => {
 		assert.match(sampleEmptyCopy("notIndexed"), /isn't indexed yet/);
 	});
 
+	it("states what an escalated predicate covers instead of a door", () => {
+		assert.equal(
+			escalatedMatchLabel('matching "npm"'),
+			'Every message matching "npm"',
+		);
+		assert.match(ESCALATED_MATCH_HINT, /nothing to widen/);
+		assert.match(ESCALATED_REVIEW_WARNING, /by the time it runs/);
+	});
+
 	it("names each door and what it does", () => {
 		assert.equal(matchDoorLabel("selected", 3), "These 3 messages");
 		assert.equal(matchDoorLabel("similar", 3), "Similar to these 3");
@@ -661,6 +691,55 @@ describe("the match as words", () => {
 		);
 	});
 
+	it("summarises an escalated predicate by what it covers", () => {
+		assert.equal(
+			matchSummary({
+				mode: "escalated",
+				selectedCount: 4,
+				clauses,
+				matchOperator: "all",
+				escalatedScope: 'matching "npm"',
+			}),
+			'Every message matching "npm"',
+		);
+		assert.equal(
+			matchSummary({
+				mode: "escalated",
+				selectedCount: 4,
+				clauses,
+				matchOperator: "all",
+			}),
+			"Every message the list is showing",
+		);
+	});
+
+	it("phrases an escalated predicate with the count the server gave it", () => {
+		assert.equal(
+			matchPhrase({
+				mode: "escalated",
+				selectedCount: 4,
+				clauses,
+				matchOperator: "all",
+				escalatedScope: 'matching "npm"',
+				escalatedCount: 3412,
+			}),
+			'all 3,412 messages matching "npm"',
+		);
+	});
+
+	it("claims no number while the count is still being taken", () => {
+		assert.equal(
+			matchPhrase({
+				mode: "escalated",
+				selectedCount: 4,
+				clauses,
+				matchOperator: "all",
+				escalatedScope: 'matching "npm"',
+			}),
+			'every message matching "npm"',
+		);
+	});
+
 	it("phrases each door for the review sentence", () => {
 		assert.equal(
 			matchPhrase({

package/src/lib/wizard-steps.ts

@@ -70,12 +70,21 @@ const VERB_COPY: Record<Verb, VerbCopy> = {
 export const verbCopy = (verb: Verb): VerbCopy => VERB_COPY[verb];
 
 /**
- * What the action is applied to. The two widened doors are the shipped
- * `RuleMatchMode` values; `selected` is not one of them and is not a match mode
- * at all — it is the bounded list of ticked message ids, which no predicate
- * stands in for.
+ * The three choices the match step offers a ticked selection. The two widened
+ * doors are the shipped `RuleMatchMode` values; `selected` is not one of them
+ * and is not a match mode at all — it is the bounded list of ticked message
+ * ids, which no predicate stands in for.
  */
-export type MatchMode = "selected" | RuleMatchMode;
+export type MatchDoor = "selected" | RuleMatchMode;
+
+/**
+ * What the action is applied to. Beside the three doors sits `escalated`: the
+ * selection the list escalated to a predicate, every message matching the query
+ * it is showing rather than the rows on screen. It is offered no doors, because
+ * the predicate is already the match and there is nothing left to widen; the
+ * step names what it covers instead.
+ */
+export type MatchMode = MatchDoor | "escalated";
 
 export type StepId =
 	| "match"
@@ -279,6 +288,12 @@ export const stepBlockedReason = (
  * Where the run step lands. Three of these never reach a job: a filter saved
  * with nothing to back-apply, a back-apply whose request never started, and a
  * create that failed outright.
+ *
+ * `backApplyFailed` and `runStopped` are two different endings and must not be
+ * confused. A back-apply that failed was run by the server, which reports how
+ * many messages it could not apply the rule to. A run that stopped hit an
+ * infrastructure failure part-way: the batches it never reached were never
+ * sent, so nothing rejected them and nothing happened to them.
  */
 export type RunState =
 	| "saving"
@@ -287,6 +302,7 @@ export type RunState =
 	| "backApplyFailed"
 	| "backApplyStartFailed"
 	| "filterSaved"
+	| "runStopped"
 	| "commitFailed";
 
 /**
@@ -358,7 +374,8 @@ export const runCopy = ({
 		showProgress:
 			state === "backApplyRunning" ||
 			state === "backApplyComplete" ||
-			state === "backApplyFailed",
+			state === "backApplyFailed" ||
+			state === "runStopped",
 		failureListLabel: `Not ${done}`,
 	};
 
@@ -399,7 +416,7 @@ export const runCopy = ({
 			title: standing
 				? "Rule saved — some mail stayed put"
 				: `Not everything was ${done}`,
-			detail: `${applied} of ${matched} ${done} · ${failed} rejected by the mail server.${
+			detail: `${applied} of ${matched} ${done} · the mail server rejected ${failed}.${
 				standing
 					? " The rule itself is saved and keeps working on new mail."
 					: ""
@@ -409,6 +426,16 @@ export const runCopy = ({
 			retryLabel: `Retry ${failed}`,
 		};
 	}
+	if (state === "runStopped") {
+		return {
+			...shared,
+			title: `Stopped after ${applied}`,
+			detail: `${applied} of ${matched} ${done}. The run stopped before it reached the rest, so nothing was sent for them and nothing has happened to them.`,
+			tone: "warning",
+			dismissLabel: "Close",
+			retryLabel: `Retry ${failed}`,
+		};
+	}
 	if (state === "backApplyStartFailed") {
 		return {
 			...shared,
@@ -454,7 +481,7 @@ export const clauseSentence = (
 
 /** What a match door is called, with the ticked count the widen anchors on. */
 export const matchDoorLabel = (
-	mode: MatchMode,
+	mode: MatchDoor,
 	selectedCount: number,
 ): string => {
 	if (mode === "selected") return `These ${selectedCount} messages`;
@@ -463,16 +490,48 @@ export const matchDoorLabel = (
 };
 
 /** One line saying what a match door actually does, so the choice is never a guess. */
-export const matchDoorHint = (mode: MatchMode): string =>
+export const matchDoorHint = (mode: MatchDoor): string =>
 	mode === "selected"
 		? "Only the messages ticked in the list."
 		: matchModeHint(mode);
 
+/**
+ * What an escalated predicate covers, in the words the list already used to
+ * escalate it — `matching "npm"`. Named where the doors would be, because a
+ * predicate that reaches past the loaded rows has nothing left to widen.
+ */
+export const escalatedMatchLabel = (scope: string): string =>
+	`Every message ${scope}`;
+
+/** The fallback when the list hands over no words for its predicate. */
+export const ESCALATED_SCOPE_FALLBACK = "the list is showing";
+
+/** Why the escalated match step states one thing instead of offering three. */
+export const ESCALATED_MATCH_HINT =
+	"This reaches every match on the mail server, including the ones the list has not loaded. The search is already the match, so there is nothing to widen.";
+
+/**
+ * What the count on an escalated review does and does not promise (#109). The
+ * predicate is resolved once for the count and again for the run, so the run
+ * covers whatever matches at the moment it runs — which can be more than the
+ * number beside it.
+ */
+export const ESCALATED_REVIEW_WARNING =
+	"This covers messages not shown in the list, and anything else matching by the time it runs.";
+
 export interface MatchDescription {
 	mode: MatchMode;
 	selectedCount: number;
 	clauses: readonly RuleClause[];
 	matchOperator: MatchOperator;
+	/** What an escalated predicate covers, in the list's own words. */
+	escalatedScope?: string;
+	/**
+	 * The server's count of that predicate. Stated with the match rather than
+	 * left to the sample's footer: an escalated selection is the one match whose
+	 * size is the whole reason to look before it runs.
+	 */
+	escalatedCount?: number;
 }
 
 /** The match on the review screen's labelled list — short enough for one row. */
@@ -481,10 +540,15 @@ export const matchSummary = ({
 	selectedCount,
 	clauses,
 	matchOperator,
-}: MatchDescription): string =>
-	mode === "properties"
+	escalatedScope,
+}: MatchDescription): string => {
+	if (mode === "escalated") {
+		return escalatedMatchLabel(escalatedScope ?? ESCALATED_SCOPE_FALLBACK);
+	}
+	return mode === "properties"
 		? clauseSentence(clauses, matchOperator)
 		: matchDoorLabel(mode, selectedCount);
+};
 
 /** The match inside the review screen's one sentence, in the object position. */
 export const matchPhrase = ({
@@ -492,8 +556,16 @@ export const matchPhrase = ({
 	selectedCount,
 	clauses,
 	matchOperator,
+	escalatedScope,
+	escalatedCount,
 }: MatchDescription): string => {
 	if (mode === "selected") return `${selectedCount} messages`;
+	if (mode === "escalated") {
+		const scope = escalatedScope ?? ESCALATED_SCOPE_FALLBACK;
+		return escalatedCount === undefined
+			? `every message ${scope}`
+			: `all ${escalatedCount.toLocaleString()} messages ${scope}`;
+	}
 	if (mode === "similar") {
 		return `mail ${widenChipLabel({ anchorCount: selectedCount }).toLowerCase()}`;
 	}