@remit/ui 0.0.60 → 0.0.61

package/package.json

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

package/src/components/selection-top-bar.render.test.ts

@@ -109,16 +109,18 @@ describe("SelectionTopBar", () => {
 		);
 	});
 
-	it("offers Something else as an overflow verb, never a glyph", () => {
+	it("keeps Junk and Mark read in the overflow menu, never as glyphs", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, {
 				...handlers,
 				count: 2,
-				onSomethingElse: () => undefined,
+				onJunk: () => undefined,
+				onMarkRead: () => undefined,
 			}),
 		);
 		assert.match(html, /aria-label="More actions"/);
-		assert.doesNotMatch(row(html, "actions"), /aria-label="Something else"/);
+		assert.doesNotMatch(row(html, "actions"), /aria-label="Junk"/);
+		assert.doesNotMatch(row(html, "actions"), /aria-label="Mark read"/);
 	});
 
 	it("replaces the title with the count from the first ticked row", () => {
@@ -150,11 +152,7 @@ describe("SelectionTopBar", () => {
 				count: 3,
 				selectAll,
 				onOrganize: () => undefined,
-				moveSlot: createElement(
-					"button",
-					{ type: "button", "aria-label": "Move selected messages" },
-					"Move",
-				),
+				onMove: () => undefined,
 			}),
 		);
 

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { FolderInput, Menu, Search, Tag } from "lucide-react";
+import { Menu, Search, Tag } from "lucide-react";
 import { Button } from "./button.js";
 import { PopoverMenu } from "./popover-menu.js";
 import { SearchBar } from "./search-bar.js";
@@ -14,8 +14,8 @@ const meta: Meta<typeof SelectionTopBar> = {
 		onCancel: () => undefined,
 		onMarkRead: () => undefined,
 		onJunk: () => undefined,
+		onMove: () => undefined,
 		onOrganize: () => undefined,
-		onSomethingElse: () => undefined,
 		onDelete: () => undefined,
 	},
 	// Full viewport width — a fixed w-[390px] wrapper inside a 390px Storybook
@@ -30,18 +30,6 @@ export default meta;
 
 type Story = StoryObj<typeof SelectionTopBar>;
 
-/** Stand-in for the caller's move-to-folder trigger, which owns its own
- *  folder-picker data. The bar only reserves the slot. */
-const MoveSlot = () => (
-	<button
-		type="button"
-		aria-label="Move selected messages"
-		className="inline-flex size-11 shrink-0 items-center justify-center rounded text-fg-muted hover:bg-surface-raised"
-	>
-		<FolderInput className="size-5" />
-	</button>
-);
-
 /** Stand-in for the caller's apply-label picker, whose list belongs to the
  *  account. A worded row, so it reads as one of the menu's actions. */
 const LabelSlot = () => (
@@ -147,16 +135,17 @@ export const IdleSearching: Story = {
 /**
  * One ticked row. The count takes the title's place and the header's own
  * chrome stands down; the verbs arrive with it: Delete, Move and Organize
- * carry a glyph, Junk, Mark read and Something else live under the kebab.
- * Below 768px select-all takes a second row, so row one stays a count and a
+ * carry a glyph, Junk and Mark read live under the kebab. Every one of them
+ * opens the wizard. Below 768px select-all takes a second row, so row one
+ * stays a count and a
  * row of verbs with a back arrow out of selection.
  */
 export const One: Story = {
-	args: { ...chrome, count: 1, selectAll, moveSlot: <MoveSlot /> },
+	args: { ...chrome, count: 1, selectAll },
 };
 
 export const Many: Story = {
-	args: { count: 3, selectAll, moveSlot: <MoveSlot /> },
+	args: { count: 3, selectAll },
 };
 
 /**
@@ -167,7 +156,6 @@ export const WithLabelPicker: Story = {
 	args: {
 		count: 3,
 		selectAll,
-		moveSlot: <MoveSlot />,
 		overflowSlot: <LabelSlot />,
 	},
 };
@@ -175,13 +163,13 @@ export const WithLabelPicker: Story = {
 /** A selection spanning folders or accounts has no move target and no
  *  account to file a rule under: the bar carries Delete and the overflow. */
 export const WithoutMoveOrOrganize: Story = {
-	args: { count: 2, onOrganize: undefined, selectAll },
+	args: { count: 2, onMove: undefined, onOrganize: undefined, selectAll },
 };
 
 /** A mutation in flight: Delete carries the spinner and every other verb
  *  stands down, because nothing else can act until it lands. */
 export const Busy: Story = {
-	args: { count: 2, isBusy: true, moveSlot: <MoveSlot />, selectAll },
+	args: { count: 2, isBusy: true, selectAll },
 };
 
 export const CrossAccountHint: Story = {
@@ -204,7 +192,6 @@ export const CrossAccountHint: Story = {
 export const AllSelected: Story = {
 	args: {
 		count: 47,
-		moveSlot: <MoveSlot />,
 		selectAll: {
 			checked: true,
 			indeterminate: false,
@@ -260,7 +247,6 @@ export const Escalated: Story = {
 	args: {
 		count: 3412,
 		statusLabel: 'All 3,412 matching "npm" selected',
-		moveSlot: <MoveSlot />,
 		notice: {
 			tone: "info",
 			text: "",
@@ -367,7 +353,6 @@ export const MarkingReadWithProgress: Story = {
 export const PartialFailureMove: Story = {
 	args: {
 		count: 340,
-		moveSlot: <MoveSlot />,
 		notice: {
 			tone: "danger",
 			text: "3,072 moved. 340 couldn't be moved.",

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

@@ -1,11 +1,11 @@
 import {
 	ArrowLeft,
+	FolderInput,
 	Loader2,
 	MailOpen,
 	ShieldAlert,
 	Sparkles,
 	Trash2,
-	Wand2,
 } from "lucide-react";
 import type { ReactNode } from "react";
 import { Banner, type BannerTone } from "./banner.js";
@@ -40,6 +40,17 @@ export interface SelectionTopBarProps {
 	/** Leaves selection, from the back arrow at the head of the bar. */
 	onCancel: () => void;
 	onDelete: () => void;
+	/**
+	 * Opens the wizard on Move. Omitted where a destination cannot be resolved —
+	 * 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;
@@ -48,12 +59,6 @@ export interface SelectionTopBarProps {
 	onJunk?: () => void;
 	/** Optional — dropped from the overflow menu while `isBusy`. */
 	onMarkRead?: () => void;
-	/**
-	 * Opens the free-text organize panel. An overflow verb rather than a glyph:
-	 * it collapses a verb, a destination and a scope into one tap, which is the
-	 * opposite of what the bar's own verbs do.
-	 */
-	onSomethingElse?: () => void;
 	/**
 	 * The list header's own chrome, rendered only while nothing is ticked: the
 	 * nav button, the unread count beside the title, and the search affordance.
@@ -74,11 +79,6 @@ export interface SelectionTopBarProps {
 	 * bar over, so the second way into the same wizard stands down.
 	 */
 	idleSlot?: ReactNode;
-	/**
-	 * The Move verb. A render prop because the trigger owns the folder picker
-	 * and its API dependencies; the bar only gives it a place in the verb row.
-	 */
-	moveSlot?: ReactNode;
 	/**
 	 * Extra rows at the foot of the overflow menu — the apply-label picker,
 	 * whose list belongs to the account rather than to the bar. Withdrawn while
@@ -171,16 +171,16 @@ export function SelectionTopBar({
 	count,
 	onCancel,
 	onDelete,
+	onMove,
+	moveSlot,
 	onOrganize,
 	onJunk,
 	onMarkRead,
-	onSomethingElse,
 	navSlot,
 	titleMeta,
 	searchSlot,
 	searchField,
 	idleSlot,
-	moveSlot,
 	overflowSlot,
 	isBusy = false,
 	isCounting = false,
@@ -211,15 +211,6 @@ export function SelectionTopBar({
 			onSelect: onMarkRead,
 		});
 	}
-	if (onSomethingElse && !isBusy && !isCounting) {
-		overflowItems.push({
-			key: "something-else",
-			label: "Something else",
-			icon: <Wand2 className="size-4" />,
-			onSelect: onSomethingElse,
-		});
-	}
-
 	return (
 		<header
 			data-selection-bar=""
@@ -287,7 +278,19 @@ export function SelectionTopBar({
 							aria-busy={isBusy || undefined}
 							className="shrink-0"
 						/>
-						{!isBusy && moveSlot}
+						{!isBusy &&
+							(onMove ? (
+								<Button
+									variant="ghost"
+									size="touch"
+									icon={<FolderInput className="size-5" />}
+									onClick={onMove}
+									aria-label="Move selected messages"
+									className="shrink-0"
+								/>
+							) : (
+								moveSlot
+							))}
 						{!isBusy && onOrganize && (
 							<Button
 								variant="ghost"

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

@@ -581,7 +581,7 @@ describe("SelectionWizard", () => {
 				wizardProps({ verb: "organize", steps, step: "properties" }),
 			),
 		);
-		assert.match(text(html), /Step 1 of 4 · Apply to/);
+		assert.match(text(html), /Step 1 of 5 · Apply to/);
 		assert.match(html, /What should this apply to\?/);
 		assert.match(html, /These 2 messages/);
 		assert.doesNotMatch(html, /Match properties/);
@@ -657,23 +657,41 @@ describe("SelectionWizard", () => {
 				}),
 			),
 		);
-		assert.match(html, /Add a property to match on\./);
-		assert.match(html, /aria-disabled="true"/);
+		assert.match(text(html), /Add a property to match on\./);
+		assert.match(html, /opacity-55/);
+		// Nothing disables (#477 1.7), and `aria-disabled` disables it for
+		// everyone driving the page by anything other than a mouse.
+		assert.doesNotMatch(html, /aria-disabled/);
 		assert.doesNotMatch(html, /<button[^>]*disabled=""/);
 	});
 
-	it("holds the blocked reason back until Continue is pressed", () => {
-		const html = renderToString(
+	it("carries the blocked reason on the control before it is pressed, and shows it after", () => {
+		const quiet = renderToString(
+			createElement(
+				SelectionWizard,
+				wizardProps({
+					step: "properties",
+					blockedReason: "Add a property to match on.",
+				}),
+			),
+		);
+		// Described, so it is heard on the control; not on screen until pressed.
+		assert.match(quiet, /aria-describedby="/);
+		assert.match(quiet, /sr-only/);
+		assert.doesNotMatch(quiet, /role="status"/);
+
+		const nudged = renderToString(
 			createElement(
 				SelectionWizard,
 				wizardProps({
 					step: "properties",
 					blockedReason: "Add a property to match on.",
+					nudged: true,
 				}),
 			),
 		);
-		assert.doesNotMatch(html, /Add a property to match on\./);
-		assert.match(html, /aria-disabled="true"/);
+		assert.match(nudged, /role="status"/);
+		assert.doesNotMatch(nudged, /sr-only/);
 	});
 
 	it("commits under the scope's own label, in the verb's own tone", () => {

package/src/components/selection-wizard.tsx

@@ -28,6 +28,7 @@ import {
 	matchPhrase,
 	matchSummary,
 	type RunCopy,
+	type RunOutcome,
 	type RunState,
 	runCopy,
 	type SampleEmptyReason,
@@ -133,7 +134,16 @@ export function WizardScreen({
 }: WizardScreenProps) {
 	const active = stepIndex(steps, step);
 	return (
-		<div className="fixed inset-0 z-50 flex flex-col font-sans text-fg md:items-center md:justify-center md:bg-black/40 md:p-6">
+		// A modal at every width: full-bleed below 768px it covers the list rather
+		// than sitting beside it, so the list behind must leave the accessibility
+		// tree with it — otherwise the verbs that opened the wizard are still
+		// reachable underneath the screen that replaced them.
+		<div
+			role="dialog"
+			aria-modal="true"
+			aria-label={title}
+			className="fixed inset-0 z-50 flex flex-col font-sans text-fg md:items-center md:justify-center md:bg-black/40 md:p-6"
+		>
 			<div className="flex min-h-0 w-full flex-1 flex-col bg-canvas md:h-[45rem] md:max-h-[calc(100dvh-3rem)] md:w-[35rem] md:max-w-[calc(100vw-3rem)] md:flex-none md:overflow-hidden md:rounded-xl md:border md:border-line md:shadow-lg">
 				<header className="shrink-0 border-b border-line px-3 pb-2 pt-3">
 					<div className="flex items-center gap-1">
@@ -190,6 +200,12 @@ export interface ChoiceCardProps {
 	children?: ReactNode;
 }
 
+/**
+ * Nothing disables (#477 1.7). An unavailable choice is dimmed and stays
+ * pressable, because pressing it is what takes the user somewhere that works —
+ * `aria-disabled` would announce it as a control that does nothing and take that
+ * away. What makes it unavailable is announced with it instead.
+ */
 export function ChoiceCard({
 	selected,
 	title,
@@ -198,13 +214,14 @@ export function ChoiceCard({
 	onSelect,
 	children,
 }: ChoiceCardProps) {
+	const hintId = useId();
 	return (
 		<div className="space-y-1.5">
 			<button
 				type="button"
 				onClick={onSelect}
 				aria-pressed={selected}
-				aria-disabled={unavailable || undefined}
+				aria-describedby={unavailable && children ? hintId : undefined}
 				className={cn(
 					"flex w-full items-start gap-3 rounded-lg border p-3 text-left transition-colors",
 					selected
@@ -228,7 +245,7 @@ export function ChoiceCard({
 					</span>
 				</span>
 			</button>
-			{children}
+			{children && <div id={hintId}>{children}</div>}
 		</div>
 	);
 }
@@ -244,6 +261,12 @@ export interface SelectionSampleProps {
 	label: string;
 	/** Why there are no rows. Defaults to nothing matching, never to a bare empty state. */
 	emptyReason?: SampleEmptyReason;
+	/**
+	 * The rows are still being fetched. No rows yet is not the same answer as no
+	 * rows at all, and "nothing matches" beside a server count that says otherwise
+	 * is the wrong conclusion (#477 3.5).
+	 */
+	loading?: boolean;
 }
 
 const sampleFooter = (count: MatchCount, shown: number): string => {
@@ -266,6 +289,7 @@ export function SelectionSample({
 	count,
 	label,
 	emptyReason,
+	loading,
 }: SelectionSampleProps) {
 	return (
 		<section className="flex flex-col rounded-lg border border-line bg-surface">
@@ -274,7 +298,9 @@ export function SelectionSample({
 			</h2>
 			{messages.length === 0 ? (
 				<p className="px-3 py-4 text-xs text-fg-muted">
-					{sampleEmptyCopy(emptyReason ?? "noMatch")}
+					{loading
+						? "Fetching the messages this covers…"
+						: sampleEmptyCopy(emptyReason ?? "noMatch")}
 				</p>
 			) : (
 				<>
@@ -316,6 +342,13 @@ export interface FooterNavProps {
 	nudged?: boolean;
 }
 
+/**
+ * Nothing disables (#477 1.7). A Continue with an answer still missing is dimmed
+ * and stays pressable — and stays pressable to assistive technology too, which
+ * `aria-disabled` would have taken away along with the reason. The reason is on
+ * the control the whole time it applies, through `aria-describedby`; pressing it
+ * is what brings the reason on screen.
+ */
 export function FooterNav({
 	backLabel = "Back",
 	onBack,
@@ -325,10 +358,15 @@ export function FooterNav({
 	blockedReason,
 	nudged,
 }: FooterNavProps) {
+	const reasonId = useId();
 	return (
 		<div className="space-y-2">
-			{nudged && blockedReason && (
-				<p role="status" className="px-1 text-2xs text-warning">
+			{blockedReason && (
+				<p
+					id={reasonId}
+					role={nudged ? "status" : undefined}
+					className={cn("px-1 text-2xs text-warning", !nudged && "sr-only")}
+				>
 					{blockedReason}
 				</p>
 			)}
@@ -346,7 +384,7 @@ export function FooterNav({
 					variant={nextVariant}
 					size="touch"
 					onClick={onNext}
-					aria-disabled={blockedReason ? true : undefined}
+					aria-describedby={blockedReason ? reasonId : undefined}
 					className={cn("flex-1", blockedReason && "opacity-55")}
 				>
 					{nextLabel}
@@ -366,6 +404,12 @@ export interface MatchStepProps {
 	 * of the deployment: the door stays pressable and dimmed.
 	 */
 	semanticUnavailable?: boolean;
+	/**
+	 * What the mail server said when the widen was asked to run and failed. A
+	 * failure is a reason the door cannot run, so it dims the door like any other
+	 * — with the server's own words under it rather than a generic line.
+	 */
+	semanticErrorDetail?: string;
 	/** The dimmed door was pressed and the senders were filled in instead. */
 	semanticFallbackTaken?: boolean;
 	onSemanticFallback: () => void;
@@ -377,6 +421,7 @@ export function MatchStepBody({
 	mode,
 	onModeChange,
 	semanticUnavailable,
+	semanticErrorDetail,
 	semanticFallbackTaken,
 	onSemanticFallback,
 	sample,
@@ -401,6 +446,11 @@ export function MatchStepBody({
 					title={matchDoorLabel("similar", selectedCount)}
 					description={matchDoorHint("similar")}
 				>
+					{semanticErrorDetail && (
+						<p role="status" className="px-1 text-2xs text-danger">
+							Couldn't find similar messages: {semanticErrorDetail}
+						</p>
+					)}
 					{semanticFallbackTaken && (
 						<p role="status" className="px-1 text-2xs text-fg-subtle">
 							Similar-mail matching is unavailable right now — matching on the
@@ -568,6 +618,12 @@ export interface FolderStepProps {
 		name: string,
 		signal?: AbortSignal,
 	) => Promise<MoveMailboxOption>;
+	/**
+	 * Why there is no folder list to choose from — a selection spanning accounts
+	 * has no single account whose folders these could be (#477 5.5). Said here
+	 * rather than left as an empty picker.
+	 */
+	restriction?: string;
 }
 
 export function FolderStepBody({
@@ -575,14 +631,21 @@ export function FolderStepBody({
 	mailboxId,
 	onSelect,
 	onCreateFolder,
+	restriction,
 }: FolderStepProps) {
 	const chosen = mailboxes.find((mailbox) => mailbox.id === mailboxId);
 	return (
 		<div className="flex min-h-0 flex-col gap-3">
-			<p className="px-1 text-xs text-fg-muted">
-				{chosen
-					? `Moving to ${chosen.label}.`
-					: "Search for a folder, or type a name that doesn't exist yet to make one."}
+			<p
+				className={cn(
+					"px-1 text-xs",
+					restriction ? "text-warning" : "text-fg-muted",
+				)}
+			>
+				{restriction ??
+					(chosen
+						? `Moving to ${chosen.label}.`
+						: "Search for a folder, or type a name that doesn't exist yet to make one.")}
 			</p>
 			<div className="overflow-hidden rounded-lg border border-line bg-surface">
 				<MoveMailboxPicker
@@ -611,16 +674,26 @@ export interface RuleStepProps {
 	draft: WizardDraft;
 	onScopeChange: (scope: RuleScope) => void;
 	onUntilChange: (until: string) => void;
+	/**
+	 * Why the two persisting scopes cannot be reached from here — a selection
+	 * spanning accounts has no single account to create the rule for (#477 5.5).
+	 * They stay pressable and say this; the one-off scope is unaffected.
+	 */
+	restriction?: string;
 }
 
 export function RuleStepBody({
 	draft,
 	onScopeChange,
 	onUntilChange,
+	restriction,
 }: RuleStepProps) {
 	const untilId = useId();
 	const { scope, until = "" } = draft;
 	const unreadable = unreadableDraftClauses(draft).length > 0;
+	const restricted = restriction && (
+		<p className="px-1 text-2xs text-warning">{restriction}</p>
+	);
 
 	return (
 		<div className="space-y-2">
@@ -638,16 +711,21 @@ export function RuleStepBody({
 			</ChoiceCard>
 			<ChoiceCard
 				selected={scope === "standing"}
+				unavailable={Boolean(restriction)}
 				onSelect={() => onScopeChange("standing")}
 				title={scopeLabel("standing")}
 				description="Saves a rule and applies it to new mail as it arrives, and to the mail already in your mailbox. You'll name it next."
-			/>
+			>
+				{restricted}
+			</ChoiceCard>
 			<ChoiceCard
 				selected={scope === "until"}
+				unavailable={Boolean(restriction)}
 				onSelect={() => onScopeChange("until")}
 				title={scopeLabel("until")}
 				description="The same rule, and it stops on a day you pick."
 			>
+				{restricted}
 				{scope === "until" && (
 					<div className="rounded-lg border border-line bg-surface p-2">
 						<FieldLabel htmlFor={untilId}>Stops on</FieldLabel>
@@ -753,7 +831,7 @@ export function ReviewStepBody({
 				<p className="text-sm text-fg">
 					<span className="font-semibold">{label}</span>{" "}
 					{matchPhrase(description)}
-					{verb === "move" && folder ? ` to ${folder}` : ""}
+					{folder ? ` to ${folder}` : ""}
 					{persists && (
 						<>
 							{" "}
@@ -818,10 +896,25 @@ export interface RunStepProps {
 	applied: number;
 	/** The messages the mail server rejected, named one by one. */
 	failures: readonly WizardMessage[];
+	/**
+	 * How many the mail server rejected, when that is more than can be named. A
+	 * server-side pass reports its own failure count without handing back the
+	 * messages behind it; defaults to the ones named here.
+	 */
+	failedCount?: number;
 	onRetry: () => void;
 	onDismiss: () => void;
 }
 
+const runOutcomeOf = (props: RunStepProps): RunOutcome => ({
+	state: props.state,
+	verb: props.verb,
+	scope: props.scope,
+	matched: props.matched,
+	applied: props.applied,
+	failed: props.failedCount ?? props.failures.length,
+});
+
 const runIcon = (tone: RunCopy["tone"]): ReactNode => {
 	if (tone === "progress") {
 		return <Loader2 className="size-10 animate-spin text-accent" />;
@@ -837,22 +930,10 @@ const runIcon = (tone: RunCopy["tone"]): ReactNode => {
 	);
 };
 
-export function RunStepBody({
-	state,
-	verb,
-	scope,
-	matched,
-	applied,
-	failures,
-}: RunStepProps) {
-	const copy = runCopy({
-		state,
-		verb,
-		scope,
-		matched,
-		applied,
-		failed: failures.length,
-	});
+export function RunStepBody(props: RunStepProps) {
+	const { matched, applied, failures } = props;
+	const outcome = runOutcomeOf(props);
+	const copy = runCopy(outcome);
 
 	return (
 		<div className="space-y-4 pt-2">
@@ -866,7 +947,7 @@ export function RunStepBody({
 				<ProgressBar
 					value={applied}
 					max={matched}
-					tone={failures.length > 0 ? "warning" : "success"}
+					tone={outcome.failed > 0 ? "warning" : "success"}
 				/>
 			)}
 
@@ -894,24 +975,9 @@ export function RunStepBody({
 	);
 }
 
-export function RunFooter({
-	state,
-	verb,
-	scope,
-	matched,
-	applied,
-	failures,
-	onRetry,
-	onDismiss,
-}: RunStepProps) {
-	const copy = runCopy({
-		state,
-		verb,
-		scope,
-		matched,
-		applied,
-		failed: failures.length,
-	});
+export function RunFooter(props: RunStepProps) {
+	const { onRetry, onDismiss } = props;
+	const copy = runCopy(runOutcomeOf(props));
 
 	if (copy.retryLabel === undefined) {
 		return (
@@ -1036,12 +1102,17 @@ export function SelectionWizard(props: SelectionWizardProps) {
 		if (step === "run") return <RunFooter {...stepProps(props.run, step)} />;
 		if (step === "review") {
 			const review = stepProps(props.review, step);
+			// The commit is a Continue like any other: a match that reaches nothing,
+			// or a count still moving, dims it and says so rather than committing a
+			// bulk action over nothing and reporting it as done.
 			return (
 				<FooterNav
 					onBack={onBack}
 					nextLabel={review.scope ? commitLabel(review.scope) : label}
 					nextVariant={destructive ? "danger" : "primary"}
 					onNext={onCommit}
+					blockedReason={props.blockedReason}
+					nudged={props.nudged}
 				/>
 			);
 		}
@@ -1058,8 +1129,7 @@ export function SelectionWizard(props: SelectionWizardProps) {
 
 	const title = (): string => {
 		if (step !== "run") return screen.title ?? label;
-		const run = stepProps(props.run, step);
-		return runCopy({ ...run, failed: run.failures.length }).screenTitle;
+		return runCopy(runOutcomeOf(stepProps(props.run, step))).screenTitle;
 	};
 
 	return (