@remit/ui 0.0.121 → 0.0.123

package/src/components/message-body-view.tsx

@@ -55,6 +55,35 @@ const EmptyBody = () => (
 	</p>
 );
 
+/**
+ * The message-body region of a reading pane. The sandboxed email frame — and
+ * only it — leaves the message's gutter, so mail renders on its own ground with
+ * its own margins and no app canvas shows down either side of it (#763).
+ * Everything else in the region is app chrome (the blocked-images notice, a
+ * plain-text body, an error, the attachment list) and keeps the inset the
+ * header has.
+ *
+ * The rule lives here, next to the `message-body-frame` marker it moves, so the
+ * pane and Storybook cannot drift apart on it. The negative margins mirror the
+ * message block's own `px-2 lg:px-4`.
+ */
+export const MessageBodyRegion = ({
+	className,
+	children,
+}: {
+	className?: string;
+	children: ReactNode;
+}) => (
+	<div
+		className={cn(
+			"[&_.message-body-frame]:-mx-2 lg:[&_.message-body-frame]:-mx-4",
+			className,
+		)}
+	>
+		{children}
+	</div>
+);
+
 /**
  * Render an email body the way the app does: sanitize the raw HTML
  * (DOMPurify + privacy/XSS scrubbing), classify it as framed (designed mail —
@@ -92,6 +121,16 @@ export const MessageBodyView = ({
 		sanitized?.hasAuthorBackground ?? false,
 	);
 
+	// Stable across renders: the frame rebuilds its srcDoc — and so reloads the
+	// iframe — whenever this changes identity.
+	const declares = useMemo(
+		() => ({
+			background: sanitized?.hasAuthorBackground ?? false,
+			spacing: sanitized?.hasAuthorSpacing ?? false,
+		}),
+		[sanitized?.hasAuthorBackground, sanitized?.hasAuthorSpacing],
+	);
+
 	const blockedImageCount = useMemo(() => {
 		if (!sanitizedHtml || allowImages) return 0;
 		return (sanitizedHtml.match(/data-blocked-src/g) || []).length;
@@ -107,46 +146,56 @@ export const MessageBodyView = ({
 
 	return (
 		<div className={cn("message-body", className)}>
-			{/* `message-body-notice` is a styling hook, not a style: a container
-			    that drops the body's horizontal inset (the mobile reading pane)
-			    uses it to give the gutter back to this notice, which is app
-			    chrome rather than part of the email. */}
+			{/* The notice keeps the container's gutter: it is app chrome, not part
+			    of the email, and only `message-body-frame` below leaves the
+			    gutter. */}
 			{blockedImageCount > 0 && (
-				<div className="message-body-notice">
-					{renderBlockedNotice?.(blockedImageCount)}
-				</div>
+				<div>{renderBlockedNotice?.(blockedImageCount)}</div>
 			)}
 
 			{sanitizedHtml ? (
 				// Email HTML renders inside a sandboxed iframe so its own CSS and any
 				// (already-DOMPurify'd) markup cannot bleed into the app chrome. The
-				// frame sizes itself to its content; its sandbox omits `allow-scripts`
-				// so even a hypothetical sanitizer escape can't execute.
-				framed ? (
-					// Full-width wrapper so a fluid newsletter fills the reading column;
-					// max-w-full + overflow-x-auto trap any residual wide content inside
-					// this box rather than dragging the page on mobile. No border,
-					// padding or background — the email renders flush (#727).
-					<div className="w-full max-w-full overflow-x-auto">
-						<IsolatedEmailFrame
-							html={sanitizedHtml}
-							variant="framed"
-							isDark={isDark}
-						/>
-					</div>
-				) : (
-					// `lg:max-w-2xl` caps the reading column on desktop; `max-w-full`
-					// keeps the box within the viewport on mobile. `overflow-x-auto`
-					// traps residual wide content INSIDE this box on a phone (#727).
-					<div className="max-w-full overflow-x-auto lg:max-w-2xl">
-						<IsolatedEmailFrame
-							html={sanitizedHtml}
-							variant={isPlain ? "plain" : "framed"}
-							isDark={isDark}
-						/>
-					</div>
-				)
+				// frame is the width of this box and never the width of the mail —
+				// content that cannot wrap scrolls inside the frame's own document —
+				// and its sandbox omits `allow-scripts` so even a hypothetical
+				// sanitizer escape can't execute.
+				//
+				// `message-body-frame` marks the box the gutter cancel moves, and it
+				// carries no width of its own: a block with both a width and a margin
+				// is over-constrained, and the browser resolves that by dropping the
+				// right margin — which left a strip of app canvas down one side of
+				// every email. The width lives on the child instead.
+				<div className="message-body-frame">
+					{framed ? (
+						// Full-width wrapper so a fluid newsletter fills the reading
+						// column. No border, padding or background — the email renders
+						// flush (#727).
+						<div className="w-full max-w-full">
+							<IsolatedEmailFrame
+								html={sanitizedHtml}
+								variant="framed"
+								isDark={isDark}
+								declares={declares}
+							/>
+						</div>
+					) : (
+						// `lg:max-w-2xl` caps the reading column on desktop; `max-w-full`
+						// keeps the box within the viewport on mobile.
+						<div className="max-w-full lg:max-w-2xl">
+							<IsolatedEmailFrame
+								html={sanitizedHtml}
+								variant={isPlain ? "plain" : "framed"}
+								isDark={isDark}
+								declares={declares}
+							/>
+						</div>
+					)}
+				</div>
 			) : text ? (
+				// Plain text is not an email document: it has no ground of its own and
+				// no layout to respect, so it keeps the message's gutter rather than
+				// running to the pane edge like the sandboxed frame does.
 				<pre className="email-text whitespace-pre-wrap text-sm leading-relaxed">
 					{text}
 				</pre>

package/src/components/mobile-reading-pane.tsx

@@ -134,8 +134,9 @@ export function MobileReadingPane({
 				style={touchHandlers ? { touchAction: "pan-y" } : undefined}
 				{...touchHandlers}
 			>
+				{/* Newest first, as on the wide pane. */}
 				{children ??
-					thread.messages.map((message) => {
+					[...thread.messages].reverse().map((message) => {
 						const bind = (handler?: (id: string) => void) =>
 							handler ? () => handler(message.id) : undefined;
 

package/src/components/reading-pane.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Paperclip, Star } from "lucide-react";
 import { useState } from "react";
+import { expect } from "storybook/test";
 import type { ThreadData, ThreadMessageData } from "./app-shell-types.js";
 import {
 	type AttachmentDownloadState,
@@ -42,7 +43,7 @@ const thread: ThreadData = {
 };
 
 // A designed (framed) newsletter so the Screens story exercises the REAL
-// renderer — sanitized + sandboxed iframe, flush layout, #727 scale-to-fit —
+// renderer — sanitized + sandboxed iframe, flush layout, in-document overflow —
 // rather than a plain inline paragraph (#940). The fixed 600px table is the
 // kind of markup that overflowed a phone before #727.
 const newsletterThread: ThreadData = {
@@ -72,6 +73,40 @@ const newsletterThread: ThreadData = {
 	],
 };
 
+// Formatted HTML mail that declares no background, no padding and no width —
+// the ordinary case. The app supplies the ground and the breathing room, so the
+// email must read as one surface with the pane rather than a card inside it: no
+// border, no accent line down the side, no gutter of app canvas beside it.
+const bareThread: ThreadData = {
+	subject: "Repetitie donderdag",
+	messages: [
+		{
+			id: "bare-1",
+			fromName: "Ingrid Bakker",
+			fromEmail: "ingrid@koor.example",
+			toLabel: "you",
+			dateLabel: "Today, 11:24",
+			snippet: "De repetitie van donderdag gaat door…",
+			expanded: true,
+			bodyHtml: `<div>
+	<p>Hoi allemaal,</p>
+	<p>De repetitie van donderdag gaat door. We beginnen met het nieuwe stuk en
+	repeteren om 20.00 uur verder aan het programma voor het najaarsconcert.</p>
+	<p><b>Neem je eigen partituur mee</b> — er zijn geen reservekopie&euml;n.</p>
+	<p>Groeten,<br>Ingrid</p>
+</div>`,
+		},
+	],
+};
+
+const PLAIN_TEXT_BODY = `Hoi allemaal,
+
+De repetitie van donderdag gaat door. We beginnen met het nieuwe stuk en
+repeteren om 20.00 uur verder aan het programma voor het najaarsconcert.
+
+Groeten,
+Ingrid`;
+
 const meta: Meta<typeof ReadingPane> = {
 	title: "Screens/Kit/ReadingPane",
 	component: ReadingPane,
@@ -89,9 +124,29 @@ type Story = StoryObj<typeof ReadingPane>;
 export const WithThread: Story = { args: { thread } };
 
 /** A designed newsletter rendered through the real sanitize → sandboxed-iframe
- *  pipeline — the same rendering the live app shows (#940). */
+ *  pipeline — the same rendering the live app shows (#940). It brings its own
+ *  background and its own 24px padding and keeps both, undoubled. */
 export const Newsletter: Story = { args: { thread: newsletterThread } };
 
+/** The same newsletter on the dark pane: darkened as authored, not repainted. */
+export const NewsletterDark: Story = {
+	args: { thread: newsletterThread },
+	parameters: { theme: "dark" },
+};
+
+/** Ordinary formatted mail that declares nothing of its own. The sender header
+ *  keeps its inset; below it the email is one surface with the pane — no card
+ *  edge, no accent line, no app gutter beside it — with the breathing room
+ *  inside the email's own ground. */
+export const BareHtmlMail: Story = { args: { thread: bareThread } };
+
+/** The same on the dark pane, where a lighter app-supplied ground used to show
+ *  as a rectangle seamed into the pane. */
+export const BareHtmlMailDark: Story = {
+	args: { thread: bareThread },
+	parameters: { theme: "dark" },
+};
+
 export const Empty: Story = { args: { thread: undefined } };
 
 export const WithIntelligenceToggle: Story = {
@@ -252,7 +307,7 @@ const ThreadAttachments = () => {
 
 	return (
 		<AttachmentList
-			className="mt-4 px-2 lg:px-0"
+			className="mt-4"
 			attachments={rows}
 			onDownload={(attachmentId) => {
 				setStatus(attachmentId, { status: "downloading" });
@@ -293,3 +348,83 @@ export const ExpandedRowWithAttachments: StoryObj<typeof ExpandedMessage> = {
 		</div>
 	),
 };
+
+/**
+ * The email sits square in the pane: the frame leaves the message gutter on
+ * both sides, not just the left.
+ *
+ * A block box cannot have both a width and two margins — the browser resolves
+ * the over-constraint by throwing the right margin away — so a gutter cancel on
+ * a `w-full` box moved the mail left and left a strip of app canvas down its
+ * right-hand side. Bare mail hides that (it paints the pane's own colour); a
+ * newsletter with a ground of its own shows it plainly, which is why this
+ * measures a framed message.
+ */
+const framedRow: ThreadMessageData = {
+	...newsletterThread.messages[0],
+	id: "symmetry-1",
+};
+
+const paneGutters = (canvasElement: HTMLElement) => {
+	const pane = canvasElement.querySelector<HTMLElement>("[data-pane]");
+	const frame = pane?.querySelector<HTMLElement>(".message-body-frame");
+	if (!pane || !frame) throw new Error("no framed message body in the pane");
+	const paneBox = pane.getBoundingClientRect();
+	const frameBox = frame.getBoundingClientRect();
+	return {
+		left: frameBox.left - paneBox.left,
+		right: paneBox.right - frameBox.right,
+	};
+};
+
+const assertSymmetric = async (canvasElement: HTMLElement) => {
+	const { left, right } = paneGutters(canvasElement);
+	await expect(Math.abs(left - right)).toBeLessThan(1);
+	await expect(Math.abs(left)).toBeLessThan(1);
+};
+
+/** A designed newsletter on a desktop reading column. */
+export const FramedBodySitsSquareInThePane: StoryObj<typeof ExpandedMessage> = {
+	render: () => (
+		<div data-pane className="w-[900px] bg-canvas">
+			<ExpandedMessage message={framedRow} />
+		</div>
+	),
+	play: async ({ canvasElement }) => {
+		await assertSymmetric(canvasElement);
+	},
+};
+
+/** The same at a phone width, where the gutter is half as wide and a lost
+ *  right margin is half the pane's breathing room. */
+export const FramedBodySitsSquareOnAPhone: StoryObj<typeof ExpandedMessage> = {
+	render: () => (
+		<div data-pane className="w-[390px] bg-canvas">
+			<ExpandedMessage message={framedRow} />
+		</div>
+	),
+	play: async ({ canvasElement }) => {
+		await assertSymmetric(canvasElement);
+	},
+};
+
+/**
+ * A message with no HTML part. The two body paths side by side: an email
+ * document runs flush on its own ground, while plain text — which has neither —
+ * keeps the message gutter and stays off the pane edge.
+ */
+export const PlainTextMessage: StoryObj<typeof ExpandedMessage> = {
+	render: () => (
+		<div className="max-w-3xl bg-canvas">
+			<ExpandedMessage
+				message={{ ...row, fromName: "Ingrid Bakker" }}
+				to={<>to the choir list</>}
+				body={
+					<div className="mt-3">
+						<MessageBodyView text={PLAIN_TEXT_BODY} />
+					</div>
+				}
+			/>
+		</div>
+	),
+};

package/src/components/reading-pane.tsx

@@ -6,7 +6,7 @@ import type { ThreadData, ThreadMessageData } from "./app-shell-types.js";
 import { Avatar } from "./avatar.js";
 import { IntelligenceToggle } from "./intelligence-toggle.js";
 import { MailActionToolbar } from "./mail-action-toolbar.js";
-import { MessageBodyView } from "./message-body-view.js";
+import { MessageBodyRegion, MessageBodyView } from "./message-body-view.js";
 import { ReadingPaneEmpty } from "./reading-pane-empty.js";
 
 /* ------------------------------------------------------------------ */
@@ -133,6 +133,11 @@ export function ExpandedMessage({
 	warning?: string;
 	/** Collapse handler on the sender block. Omit for a static row. */
 	onHeaderClick?: () => void;
+	/**
+	 * Keyboard cursor. Rings the sender row, the way it rings a collapsed row —
+	 * never the message, which would draw an accent line down both sides of the
+	 * email and read as a card edge around mail that carries its own.
+	 */
 	isFocused?: boolean;
 	/** Rendered after the sender name (e.g. a trusted-sender badge). */
 	senderBadge?: ReactNode;
@@ -177,13 +182,17 @@ export function ExpandedMessage({
 	);
 
 	return (
-		<div
-			className={cn(
-				"px-2 py-3 lg:px-4",
-				isFocused && "ring-1 ring-inset ring-accent/30",
-			)}
-		>
-			<div className="flex items-start gap-3">
+		<div className="px-2 py-3 lg:px-4">
+			{/* The cursor rings the sender row, not the message. Around the message
+			    it drew an accent line down both sides of every open email, which
+			    reads as a card edge on mail that brings its own. The negative
+			    margins hold the row exactly where it sits unringed. */}
+			<div
+				className={cn(
+					"-mx-2 -my-1 flex items-start gap-3 rounded-sm px-2 py-1",
+					isFocused && "ring-1 ring-inset ring-accent/30",
+				)}
+			>
 				{/* The chevron is the disclosure control, not a picture of one: it is
 				    what a reader aims at to put a message away, so it carries the
 				    collapse itself rather than sitting beside the sender block that
@@ -240,12 +249,7 @@ export function ExpandedMessage({
 			    exactly what the app renders, not a divergent inline-HTML mock
 			    (#940). `framed` fixtures map to the newsletter treatment (author
 			    colors preserved); the rest render plain. */}
-			{/* On a phone the email runs edge to edge: the negative margin cancels
-			    this block's `px-2` so no app canvas shows beside the body and the
-			    email doesn't read as sitting in a tinted frame (#763). The header
-			    keeps its inset. The blocked-images notice is app chrome, not part
-			    of the email, so it takes the gutter back. Desktop is unchanged. */}
-			<div className="-mx-2 [&_.message-body-notice]:px-2 lg:mx-0 lg:[&_.message-body-notice]:px-0">
+			<MessageBodyRegion>
 				{body ?? (
 					<MessageBodyView
 						className="mt-3"
@@ -254,7 +258,7 @@ export function ExpandedMessage({
 						allowImages
 					/>
 				)}
-			</div>
+			</MessageBodyRegion>
 		</div>
 	);
 }
@@ -332,17 +336,22 @@ export function ReadingPane({
 						</p>
 					</div>
 
-					{thread.messages.map((message) =>
-						message.expanded ? (
-							<ExpandedMessage
-								key={message.id}
-								message={message}
-								warning={thread.warning}
-							/>
-						) : (
-							<CollapsedMessage key={message.id} message={message} />
-						),
-					)}
+					{/* Newest first. A thread arrives in the order it happened; the
+					    turn a reader opened it for is the last one, and reading it
+					    should not cost a scroll past everything that led there. */}
+					{[...thread.messages]
+						.reverse()
+						.map((message) =>
+							message.expanded ? (
+								<ExpandedMessage
+									key={message.id}
+									message={message}
+									warning={thread.warning}
+								/>
+							) : (
+								<CollapsedMessage key={message.id} message={message} />
+							),
+						)}
 				</div>
 			)}
 		</article>

package/src/components/resizable.tsx

@@ -1,3 +1,4 @@
+import { type ReactNode, useEffect, useRef, useState } from "react";
 import {
 	Panel,
 	PanelGroup,
@@ -52,4 +53,45 @@ export function ResizableHandle({
 	);
 }
 
+/**
+ * Gives everything inside it a whole-pixel box. `react-resizable-panels` sizes a
+ * pane with a fractional `flexGrow`, so a pane lands on 712.5px and every box
+ * under it inherits the fraction — and a fraction is where the DOM's whole-pixel
+ * measurements start disagreeing with each other. Floor rather than round, so
+ * the box is never a hair wider than the pane holding it.
+ */
+export function WholePixelWidth({
+	className,
+	children,
+}: {
+	className?: string;
+	children: ReactNode;
+}) {
+	const ref = useRef<HTMLDivElement>(null);
+	const [width, setWidth] = useState<number | null>(null);
+
+	useEffect(() => {
+		const pane = ref.current?.parentElement;
+		if (!pane || typeof ResizeObserver === "undefined") return;
+		const measure = () => {
+			const next = Math.floor(pane.getBoundingClientRect().width);
+			setWidth((prev) => (prev === next ? prev : next));
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(pane);
+		return () => observer.disconnect();
+	}, []);
+
+	return (
+		<div
+			ref={ref}
+			className={className}
+			style={width === null ? undefined : { width: `${width}px` }}
+		>
+			{children}
+		</div>
+	);
+}
+
 export type { PanelGroupProps, PanelProps, PanelResizeHandleProps };

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

@@ -3,7 +3,11 @@ import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
 import type { MatchCount, StepId, WizardDraft } from "../lib/wizard-steps.js";
-import { stepsFor } from "../lib/wizard-steps.js";
+import {
+	matchDoorsFor,
+	stepBlockedReason,
+	stepsFor,
+} from "../lib/wizard-steps.js";
 import {
 	type RuleClause,
 	UNCOUNTABLE_PREDICATE_REASON,
@@ -57,6 +61,7 @@ const sample = { messages, count: counted(2), label: "Your selection" };
 const matchProps = {
 	selectedCount: 2,
 	mode: "selected" as const,
+	accountId: "acc-personal",
 	onModeChange: noop,
 	onSemanticFallback: noop,
 	sample,
@@ -291,6 +296,42 @@ describe("MatchStepBody", () => {
 	});
 });
 
+/**
+ * Starred, and any other surface whose rows span accounts (#523). Both widened
+ * doors are counted through a preview one account answers, so offering them
+ * walks the user to a review waiting on a count nobody can take, with Back the
+ * only way on. They are withheld, and the step says why.
+ */
+describe("MatchStepBody with no single account", () => {
+	const spanning = { ...matchProps, accountId: undefined };
+
+	it("offers the ticked rows alone, and states the restriction", () => {
+		const html = text(renderToString(createElement(MatchStepBody, spanning)));
+		assert.match(html, /These 2 messages/);
+		assert.doesNotMatch(html, /Similar to these/);
+		assert.doesNotMatch(html, /Its properties/);
+		assert.match(html, /only works within one account/);
+	});
+
+	it("leaves a review that commits rather than one pinned on the count", () => {
+		assert.deepEqual([...matchDoorsFor(undefined)], ["selected"]);
+		// The only door left is its own count, so nothing about the match is still
+		// settling by the time the review is reached.
+		const blockedReason = stepBlockedReason("review", draft(), counted(2));
+		assert.equal(blockedReason, undefined);
+		const html = text(
+			renderToString(
+				createElement(
+					SelectionWizard,
+					wizardProps({ step: "review", match: spanning, blockedReason }),
+				),
+			),
+		);
+		assert.doesNotMatch(html, /Counting matches/);
+		assert.match(html, /2 messages/);
+	});
+});
+
 describe("PropertiesStepBody", () => {
 	it("renders the rule as the shipped chips, with the join between them", () => {
 		const html = renderToString(

package/src/components/selection-wizard.tsx

@@ -21,6 +21,7 @@ import { Fragment, type ReactNode, useEffect, useId, useRef } from "react";
 import { cn } from "../lib/cn.js";
 import {
 	backExits,
+	crossAccountMatchReason,
 	ESCALATED_MATCH_HINT,
 	ESCALATED_REVIEW_WARNING,
 	ESCALATED_SCOPE_FALLBACK,
@@ -30,6 +31,7 @@ import {
 	type MatchMode,
 	matchDoorHint,
 	matchDoorLabel,
+	matchDoorsFor,
 	matchPhrase,
 	matchSummary,
 	type RunCopy,
@@ -364,6 +366,13 @@ export function FooterNav({
 export interface MatchStepProps {
 	selectedCount: number;
 	mode: MatchMode;
+	/**
+	 * The one account this selection belongs to, absent when it spans several
+	 * (#523). Both widened doors are counted through a preview that account
+	 * answers, so without one they are withheld and the step states the
+	 * restriction — the ticked rows are their own match and stay on offer.
+	 */
+	accountId?: string;
 	/**
 	 * 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
@@ -396,6 +405,7 @@ export interface MatchStepProps {
 export function MatchStepBody({
 	selectedCount,
 	mode,
+	accountId,
 	onModeChange,
 	semanticUnavailable,
 	semanticErrorDetail,
@@ -419,44 +429,55 @@ export function MatchStepBody({
 			</>
 		);
 	}
+	const doors = matchDoorsFor(accountId);
+	const widened = doors.length > 1;
 	return (
 		<>
 			<div className="space-y-2">
+				{!widened && (
+					<p className="px-1 text-2xs text-warning">
+						{crossAccountMatchReason}
+					</p>
+				)}
 				<ChoiceCard
 					selected={mode === "selected"}
 					onSelect={() => onModeChange("selected")}
 					title={matchDoorLabel("selected", selectedCount)}
 					description={matchDoorHint("selected")}
 				/>
-				<ChoiceCard
-					selected={mode === "similar"}
-					unavailable={semanticUnavailable}
-					onSelect={
-						semanticUnavailable
-							? onSemanticFallback
-							: () => onModeChange("similar")
-					}
-					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
-							senders instead.
-						</p>
-					)}
-				</ChoiceCard>
-				<ChoiceCard
-					selected={mode === "properties"}
-					onSelect={() => onModeChange("properties")}
-					title={matchDoorLabel("properties", selectedCount)}
-					description={matchDoorHint("properties")}
-				/>
+				{widened && (
+					<ChoiceCard
+						selected={mode === "similar"}
+						unavailable={semanticUnavailable}
+						onSelect={
+							semanticUnavailable
+								? onSemanticFallback
+								: () => onModeChange("similar")
+						}
+						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
+								senders instead.
+							</p>
+						)}
+					</ChoiceCard>
+				)}
+				{widened && (
+					<ChoiceCard
+						selected={mode === "properties"}
+						onSelect={() => onModeChange("properties")}
+						title={matchDoorLabel("properties", selectedCount)}
+						description={matchDoorHint("properties")}
+					/>
+				)}
 			</div>
 			<div className="mt-4">
 				<SelectionSample {...sample} />