@remit/web-client 0.0.321 → 0.0.323

package/src/components/mail/SelectionWizardHost.tsx

@@ -46,10 +46,8 @@ import { useCreateFilter } from "@/hooks/useFilters";
 import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
 import { useMatchSample, useSearchMatchSample } from "@/hooks/useMatchSample";
 import { useOrganizeJob } from "@/hooks/useOrganizeJob";
-import { useOrganizeWiden } from "@/hooks/useOrganizeWiden";
 import { useRulePreview } from "@/hooks/useRulePreview";
 import { useSelectedSubjects } from "@/hooks/useSelectedSubjects";
-import { useSemanticSearchEnabled } from "@/hooks/useSemanticSearchEnabled";
 import type {
 	BulkActionProgress,
 	BulkActionTarget,
@@ -62,6 +60,7 @@ import { useMailContext } from "@/lib/mail-context";
 import { buildMoveOptions, folderDelimiter } from "@/lib/move-options";
 import {
 	buildWizardDraft,
+	type OrganizeMatchPredicate,
 	type OrganizeScope,
 	organizeScopeFor,
 } from "@/lib/organize/organize-model";
@@ -70,7 +69,6 @@ import {
 	SUPPORTED_CLAUSE_FIELDS,
 } from "@/lib/organize/rule-model";
 import { searchRuleAccountId } from "@/lib/organize/search-to-rule";
-import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
 import { useSearchConversion } from "@/lib/search-conversion";
 import type { WizardSelectionMessage } from "@/lib/wizard-selection";
 import { useWizardEntryValue, useWizardStep } from "@/routing";
@@ -186,7 +184,6 @@ const NO_CONVERSION: SearchConversion = {
 	matchOperator: "all",
 	droppedFacets: [],
 	keptTerms: false,
-	droppedSemantic: false,
 };
 
 /** A search entry has nothing ticked; its match is the query's clauses (#477 3.2). */
@@ -269,7 +266,7 @@ const bulkActionFor = (
 };
 
 /**
- * Whether a widened match is applied by the server's own pass rather than over
+ * Whether the properties match is applied by the server's own pass rather than over
  * the ids it matched. The back-apply job carries a move and nothing else, so
  * Move, Junk and Organize hand it the whole match; Delete and Mark read have no
  * server-side pass and act on the ids the preview matched.
@@ -290,8 +287,7 @@ const noDestinationReason = (verb: Verb): string =>
 
 /**
  * Where the wizard meets the app (#483). The steps and their bodies belong to
- * `@remit/ui`; everything that talks to a server is here: the widen, the live
- * count, the folder create, the bulk call, the back-apply job and the filter.
+ * `@remit/ui`; everything that talks to a server is here: the live count, the folder create, the bulk call, the back-apply job and the filter.
  *
  * Every commit routes through `organize-model.ts`, so the four `OrganizeScope`
  * values are reconstructed in one place from the two answers the wizard asks
@@ -351,7 +347,6 @@ function SelectionWizardSession({
 		undefined,
 	);
 	const [nudgedStep, setNudgedStep] = useState<StepId | undefined>(undefined);
-	const [semanticFallbackTaken, setSemanticFallbackTaken] = useState(false);
 	const [committedScope, setCommittedScope] = useState<
 		OrganizeScope | undefined
 	>(undefined);
@@ -386,7 +381,6 @@ function SelectionWizardSession({
 		() => selection.map((message) => message.email).filter(Boolean),
 		[selection],
 	);
-	const anchorMessageId = messageIds[0];
 	const subjects = useSelectedSubjects(messageIds);
 	const { junkMailboxId } = useJunkMailbox(accountId);
 	const { inboxMailboxId } = useInboxMailbox(accountId);
@@ -410,26 +404,11 @@ function SelectionWizardSession({
 		[selection, inboxMailboxId],
 	);
 
-	// No door is offered over an escalated predicate, so nothing here has a widen
-	// to probe for.
-	const widen = useOrganizeWiden(
-		escalated ? undefined : accountId,
-		anchorMessageId,
-		senders,
-		subjects,
-	);
-	const { preview: probeWiden } = widen;
-	// The similar door has to know before it is pressed whether it can run, so
-	// the probe fires with the wizard rather than with the door (#477 3.6).
-	useEffect(() => {
-		probeWiden();
-	}, [probeWiden]);
-
 	// A door the wizard resolves itself, through the preview endpoint. The
 	// escalated predicate is resolved by the list before the wizard opens, and
 	// the ticked list is its own answer, so neither is previewed.
-	const previewed = mode === "similar" || mode === "properties";
-	const literalPredicate: OrganizeMatchPredicate = useMemo(
+	const previewed = mode === "properties";
+	const predicate: OrganizeMatchPredicate = useMemo(
 		() => ({
 			matchOperator: draft.matchOperator === "all" ? "And" : "Or",
 			literalClauses: draft.clauses.map((clause) => ({
@@ -439,8 +418,6 @@ function SelectionWizardSession({
 		}),
 		[draft.clauses, draft.matchOperator],
 	);
-	const predicate =
-		mode === "similar" ? widen.matchPredicate : literalPredicate;
 	// The count and the ids both come from the server, never from paging the list
 	// in the browser (#477 5.3). The ticked list is its own count, so no request
 	// is made for it.
@@ -552,11 +529,11 @@ function SelectionWizardSession({
 	// is how a footer comes to name a screen nobody is looking at.
 	const current = steps[stepIndex(steps, step)];
 
-	// A filter, a folder, and the preview that counts a widened door all belong to
-	// one account, so a selection spanning accounts reaches none of them and is
-	// told so on the step that asks (#477 5.5, #523). A selection spanning folders
-	// of one account is told about folders instead, and keeps its account: the
-	// preview behind a widened door has something to count against. The one-off
+	// A filter, a folder, and the preview that counts the properties door all
+	// belong to one account, so a selection spanning accounts reaches none of them
+	// and is told so on the step that asks (#477 5.5, #523). A selection spanning
+	// folders of one account is told about folders instead, and keeps its account:
+	// the preview behind the properties door has something to count against. The one-off
 	// scope and the ticked rows act on the messages themselves and are unaffected.
 	const wizardScope = wizardScopeFor(accountId, selectionRestriction);
 	// An escalated match is restricted on the same step for its own reason: the
@@ -581,65 +558,15 @@ function SelectionWizardSession({
 	const changeMode = useCallback(
 		(next: MatchDoor) => {
 			setDoor(next);
-			setDraft((held) => ({
-				...held,
-				widen:
-					next === "similar" && anchorMessageId
-						? { anchorCount: Math.max(selection.length, 1) }
-						: undefined,
-				...(next === "properties" && held.clauses.length === 0
-					? { clauses: seedPropertyClauses() }
-					: {}),
-			}));
+			setDraft((held) =>
+				next === "properties" && held.clauses.length === 0
+					? { ...held, clauses: seedPropertyClauses() }
+					: held,
+			);
 		},
-		[anchorMessageId, selection.length, seedPropertyClauses],
+		[seedPropertyClauses],
 	);
 
-	// The dimmed similar door, pressed. What the widen would have fallen back to
-	// is filled in on the property step instead of standing in for the semantic
-	// match without saying so (#477 3.6) — the same agreement the property step
-	// itself seeds from (#458), not senders alone: a selection with nothing in
-	// common on sender still shares a subject worth matching on.
-	const takeSemanticFallback = useCallback(() => {
-		setSemanticFallbackTaken(true);
-		setDoor("properties");
-		setDraft((held) => ({
-			...held,
-			widen: undefined,
-			clauses: seedPropertyClauses(),
-			matchOperator: "any",
-		}));
-		goToStep("properties");
-	}, [seedPropertyClauses, goToStep]);
-
-	// The probe lands after the door is on screen, so it can report the widen
-	// unavailable while the user is already holding it. The fallback is taken then
-	// rather than left as a door that counts nothing: the property step says, in
-	// so many words, that these are the senders it substituted (#477 3.6).
-	// Off is a deployment setting, not a probe result, and it reaches the door the
-	// same way the runtime failure does: dimmed, pressable, and falling back to
-	// the senders. Only the copy differs (#1068).
-	const semanticOff = useSemanticSearchEnabled() === false;
-	const semanticUnavailable =
-		semanticOff || widen.semanticUnavailable || widen.isError;
-	// Only while the door is the screen: the probe re-fires when the anchor
-	// changes under a background refetch, and a late answer that moved the step
-	// from Review would push an entry the wizard does not own and leave the count
-	// it rewinds by wrong.
-	useEffect(() => {
-		if (current !== "match") return;
-		if (mode !== "similar" || !semanticUnavailable || semanticFallbackTaken) {
-			return;
-		}
-		takeSemanticFallback();
-	}, [
-		current,
-		mode,
-		semanticUnavailable,
-		semanticFallbackTaken,
-		takeSemanticFallback,
-	]);
-
 	const startAddClause = useCallback(() => {
 		setClauseEdit({ mode: "add", draft: { field: "From", value: "" } });
 	}, []);
@@ -757,7 +684,6 @@ function SelectionWizardSession({
 		const organizeDraft = buildWizardDraft({
 			mode: door,
 			ruleScope: named.scope,
-			anchorMessageId,
 			clauses: named.clauses,
 			matchOperator: named.matchOperator,
 			moveMailboxId: named.moveMailboxId,
@@ -797,7 +723,6 @@ function SelectionWizardSession({
 		runEscalated,
 		door,
 		named,
-		anchorMessageId,
 		verb,
 		accountId,
 		bulkTargets,
@@ -1016,10 +941,6 @@ function SelectionWizardSession({
 		messages: sampleMessages,
 		count,
 		label: mode === "selected" ? "Your selection" : "A sample of what matches",
-		emptyReason:
-			mode === "similar" && semanticUnavailable
-				? ("notIndexed" as const)
-				: ("noMatch" as const),
 		loading: escalated
 			? escalatedSample.isPending
 			: previewed && (count.status === "loading" || matchSample.isPending),
@@ -1044,12 +965,6 @@ function SelectionWizardSession({
 				mode,
 				accountId: wizardScope.accountId,
 				onModeChange: changeMode,
-				semanticUnavailable,
-				semanticOff,
-				semanticErrorDetail:
-					widen.error instanceof Error ? widen.error.message : undefined,
-				semanticFallbackTaken,
-				onSemanticFallback: takeSemanticFallback,
 				escalatedScope: escalated?.scope,
 				sample,
 			}}
@@ -1070,7 +985,6 @@ function SelectionWizardSession({
 				conversionNotice: conversion
 					? searchConversionNotice(conversion)
 					: undefined,
-				semanticFallbackTaken,
 				sample: { ...sample, label: "What this matches" },
 			}}
 			folder={{

package/src/components/mail/authenticity-warning.stories.tsx

@@ -48,30 +48,9 @@ const intelligence: IntelligenceData = {
 		claimedBrand: "Mondial Relay",
 		summary:
 			"The display name claims “Mondial Relay”, but the message was sent and signed by a personal gmail.example mailbox — not mondialrelay.fr. Real carriers send from their own domain.",
-		similarCount: 15,
 	},
 	category: { value: "automated" },
 	flags: {},
-	similar: [
-		{
-			id: "sim_dhl",
-			mailboxId: "mbx_personal_junk",
-			threadId: "thr_sim_dhl",
-			fromName: "DHL Express",
-			subject: "Action required: customs fee outstanding",
-			timeLabel: "Thu",
-			matched: "body",
-		},
-		{
-			id: "sim_postnl",
-			mailboxId: "mbx_personal_junk",
-			threadId: "thr_sim_postnl",
-			fromName: "PostNL",
-			subject: "Uw pakket kon niet worden bezorgd",
-			timeLabel: "28 May",
-			matched: "body",
-		},
-	],
 };
 
 /**

package/src/components/mail/daily-brief.stories.tsx

@@ -7,6 +7,8 @@ import { longPress } from "@/mocks/story-frame/touch";
 
 const world = mailWorld();
 
+const routeLoad = { timeout: 5000 };
+
 const meta = {
 	title: "Playground/Shipped/Mail/Daily brief",
 	component: AppStory,
@@ -50,7 +52,9 @@ const pick = async (
 export const Default: Story = {
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
+		await expect(
+			await canvas.findByText("Q3 planning", {}, routeLoad),
+		).toBeVisible();
 		await expect(canvas.getByText("Autumn sale starts now")).toBeVisible();
 	},
 };
@@ -59,7 +63,9 @@ export const Phone: Story = {
 	globals: phone,
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
+		await expect(
+			await canvas.findByText("Q3 planning", {}, routeLoad),
+		).toBeVisible();
 	},
 };
 
@@ -69,14 +75,16 @@ export const CaughtUp: Story = {
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await expect(await canvas.findByText("You're caught up")).toBeVisible();
+		await expect(
+			await canvas.findByText("You're caught up", {}, routeLoad),
+		).toBeVisible();
 	},
 };
 
 export const FilteredToCategory: Story = {
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await canvas.findByText("Q3 planning");
+		await canvas.findByText("Q3 planning", {}, routeLoad);
 		await openFilters(canvasElement);
 		await pick(canvasElement, "Categories", "Newsletter");
 		await waitFor(() =>
@@ -91,13 +99,15 @@ export const FilteredToCategory: Story = {
 export const WorkOnly: Story = {
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await canvas.findByText("Dinner on Saturday?");
+		await canvas.findByText("Dinner on Saturday?", {}, routeLoad);
 		await openFilters(canvasElement);
 		await pick(canvasElement, "Accounts", "alice.tan");
 		await waitFor(() =>
 			expect(canvas.queryByText("Dinner on Saturday?")).not.toBeInTheDocument(),
 		);
-		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
+		await expect(
+			await canvas.findByText("Q3 planning", {}, routeLoad),
+		).toBeVisible();
 	},
 };
 
@@ -113,7 +123,7 @@ export const SelectAllThenNarrow: Story = {
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await canvas.findByText("Q3 planning");
+		await canvas.findByText("Q3 planning", {}, routeLoad);
 		await expect(
 			await canvas.findByRole("button", { name: /^Show (all|\d+ more)/ }),
 		).toBeVisible();
@@ -146,7 +156,7 @@ export const SelectAllThenNarrow: Story = {
 export const ShiftArrowRange: Story = {
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await canvas.findByText("Q3 planning");
+		await canvas.findByText("Q3 planning", {}, routeLoad);
 		rows(canvasElement)[0]?.focus();
 		await userEvent.keyboard("j");
 		await userEvent.keyboard("{Shift>}{ArrowDown}{ArrowDown}{/Shift}");
@@ -159,7 +169,7 @@ export const ShiftArrowRange: Story = {
 export const OpenWithJ: Story = {
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await canvas.findByText("Q3 planning");
+		await canvas.findByText("Q3 planning", {}, routeLoad);
 		rows(canvasElement)[0]?.focus();
 		await userEvent.keyboard("j");
 		await waitFor(() =>
@@ -173,7 +183,7 @@ export const OpenWithJ: Story = {
 export const MultiSelect: Story = {
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await canvas.findByText("Q3 planning");
+		await canvas.findByText("Q3 planning", {}, routeLoad);
 		const [first, , third] = rows(canvasElement);
 		for (const row of [first, third]) {
 			const toggle = row?.querySelector<HTMLElement>(
@@ -189,7 +199,7 @@ export const MultiSelectPhone: Story = {
 	globals: phone,
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await canvas.findByText("Q3 planning");
+		await canvas.findByText("Q3 planning", {}, routeLoad);
 		const first = rows(canvasElement)[0];
 		if (first) await longPress(first);
 		await expect(await canvas.findByText("1 message selected")).toBeVisible();
@@ -201,7 +211,7 @@ export const Search: Story = {
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 		await expect(
-			await canvas.findByText("Signed lease attached"),
+			await canvas.findByText("Signed lease attached", {}, routeLoad),
 		).toBeVisible();
 		await expect(canvas.queryByText("Dinner on Saturday?")).toBeNull();
 	},
@@ -211,7 +221,7 @@ export const SearchWithChips: Story = {
 	args: { url: "/mail/brief?q=your" },
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await canvas.findByText("Signed lease attached");
+		await canvas.findByText("Signed lease attached", {}, routeLoad);
 		await openFilters(canvasElement);
 		await pick(canvasElement, "Attributes", "Unread");
 		await waitFor(() =>
@@ -226,9 +236,11 @@ export const SearchOfChipsOnly: Story = {
 	args: { url: "/mail/brief?q=is:unread" },
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		const offer = await canvas.findByRole("button", {
-			name: "Make this a filter",
-		});
+		const offer = await canvas.findByRole(
+			"button",
+			{ name: "Make this a filter" },
+			routeLoad,
+		);
 		await userEvent.click(offer);
 		await expect(
 			await canvas.findByText(/isn't a filter condition/, { selector: "p" }),
@@ -240,7 +252,9 @@ export const SearchHitOutsideTheBrief: Story = {
 	args: { url: "/mail/brief?q=outline" },
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await userEvent.click(await canvas.findByText("Conference talk outline"));
+		await userEvent.click(
+			await canvas.findByText("Conference talk outline", {}, routeLoad),
+		);
 		await waitFor(() =>
 			expect(
 				canvas.getAllByText("Here is the rough structure for the keynote."),

package/src/components/mail/enter-cursor-late-open.render.test.ts

@@ -0,0 +1,197 @@
+/**
+ * Enter opens the row the keyboard cursor is on, even while the reading pane is
+ * still catching up to an earlier cursor move.
+ *
+ * On desktop the pane follows the cursor: a `j` opens its row a beat later. That
+ * open is a navigation, and the list only learns of it when the route hands the
+ * opened row back as `selectedMessageId`. If the user pressed `j` again in
+ * between, the late arrival used to drag the cursor back to the row it opened,
+ * so Enter opened the earlier row instead of the one under the cursor.
+ *
+ * The host below holds `selectedMessageId` back on purpose, which is what makes
+ * that window as wide as the test needs: the URL moves at once, the list hears
+ * about it only when the test releases it.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { act, createElement, createRef, useState } from "react";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import { makeAccount, makeThreadMessage } from "@/test-support/fixtures";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import { MessageList, type MessageListCommands } from "./MessageList";
+
+const MAILBOX_ID = "mbx-inbox";
+const LIST_PATH = `/mail/${MAILBOX_ID}`;
+
+const threads = ["msg-a", "msg-b", "msg-c"].map((messageId) =>
+	makeThreadMessage({
+		messageId,
+		threadId: `thread-${messageId}`,
+		mailboxId: MAILBOX_ID,
+	}),
+);
+const [FIRST, SECOND] = threads;
+
+const openPath = (messageId: string): string =>
+	`${LIST_PATH}/thread-${messageId}/${messageId}`;
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+interface Mounted {
+	mounted: DomHarness;
+	router: AnyRouter;
+	commands: () => MessageListCommands;
+	cursor: () => string | undefined;
+	releaseOpen: (messageId: string) => void;
+}
+
+const mount = async (): Promise<Mounted> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) {
+			return { accounts: [makeAccount({ accountId: "acc-1" })] };
+		}
+		return { items: [] };
+	});
+
+	const commandsRef = createRef<MessageListCommands | null>();
+	let cursor: string | undefined;
+	let setSelected: ((messageId: string | undefined) => void) | undefined;
+
+	const Host = () => {
+		const [selected, set] = useState<string | undefined>(undefined);
+		setSelected = set;
+		return createElement(
+			"div",
+			null,
+			createElement(MessageList, {
+				mailboxId: MAILBOX_ID,
+				accountId: "acc-1",
+				threads,
+				selectedMessageId: selected,
+				isLoading: false,
+				listTitle: "Inbox",
+				commandsRef,
+				onTriageContextChange: (context) => {
+					cursor = context.focusedMessageId;
+				},
+			}),
+			createElement(Outlet),
+		);
+	};
+
+	const rootRoute = createRootRoute({ component: Outlet });
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		validateSearch: (search: Record<string, unknown>) => search,
+		component: Outlet,
+	});
+	const mailboxRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "$mailboxId",
+		component: Host,
+	});
+	const listRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "/",
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "$threadId",
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+	});
+	const router = createRouter({
+		routeTree: rootRoute.addChildren([
+			mailRoute.addChildren([
+				mailboxRoute.addChildren([
+					listRoute,
+					threadRoute.addChildren([messageRoute]),
+				]),
+			]),
+		]),
+		history: createMemoryHistory({ initialEntries: [LIST_PATH] }),
+	}) as unknown as AnyRouter;
+	await router.load();
+
+	const mounted = createDomHarness({ viewportWidth: 1440 });
+	harness = mounted;
+	mounted.renderApp(createElement(RouterProvider, { router }));
+	await mounted.waitFor(
+		() => commandsRef.current !== null,
+		"the list published its commands",
+	);
+
+	return {
+		mounted,
+		router,
+		commands: () => {
+			const commands = commandsRef.current;
+			assert.ok(commands, "the list is mounted");
+			return commands;
+		},
+		cursor: () => cursor,
+		releaseOpen: (messageId) => act(() => setSelected?.(messageId)),
+	};
+};
+
+describe("Enter after a cursor move the reading pane has not caught up to", () => {
+	it("keeps the cursor on the newer row and opens that row", async () => {
+		const { mounted, router, commands, cursor, releaseOpen } = await mount();
+
+		act(() => commands().focusNext());
+		await mounted.waitFor(
+			() => router.state.location.pathname === openPath(FIRST.messageId),
+			"the pane followed the cursor onto the first row",
+		);
+
+		act(() => commands().focusNext());
+		await mounted.flush();
+		assert.equal(cursor(), SECOND.messageId, "j moved the cursor on");
+
+		releaseOpen(FIRST.messageId);
+		await mounted.flush();
+
+		assert.equal(
+			cursor(),
+			SECOND.messageId,
+			"the late open dragged the cursor back to the row it opened",
+		);
+
+		const pushesBefore = router.history.length;
+		act(() => commands().openFocused());
+		await mounted.waitFor(
+			() => router.history.length > pushesBefore,
+			"Enter opened a row",
+		);
+		assert.equal(
+			router.state.location.pathname,
+			openPath(SECOND.messageId),
+			"Enter opened a row other than the one under the cursor",
+		);
+	});
+});

package/src/components/mail/intelligence-drawer.stories.tsx

@@ -56,10 +56,8 @@ const intelligence: IntelligenceData = {
 		claimedBrand: "Mondial Relay",
 		summary:
 			"The display name claims “Mondial Relay”, but the message was sent and signed by a personal gmail.example mailbox — not mondialrelay.fr.",
-		similarCount: 15,
 	},
 	category: { value: "automated" },
-	similar: [],
 };
 
 interface Message {

package/src/components/mail/message-gone.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HttpResponse, http } from "msw";
+import { expect, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { composeWorld, messageUrl } from "@/mocks/story-frame/compose-world";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+
+const world = composeWorld();
+
+const goneFromServer = http.get("/api/messages/msg-q3-planning", () =>
+	HttpResponse.json(
+		{
+			code: "message_gone_from_server",
+			message: "This message is no longer on the mail server.",
+			details: { messageId: "msg-q3-planning" },
+		},
+		{ status: 404 },
+	),
+);
+
+const meta = {
+	title: "Playground/Shipped/Mail/Message gone from server",
+	component: AppStory,
+	args: { url: messageUrl("q3-planning") },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: [goneFromServer, ...mailHandlers(world)] },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const MovedOrDeletedElsewhere: Story = {
+	play: async () => {
+		const page = within(document.body);
+		await page.findAllByText("Q3 planning");
+		await expect(
+			await page.findByText(
+				"This message is no longer on the mail server. It was moved or deleted in another mail app.",
+			),
+		).toBeVisible();
+	},
+};