@remit/web-client 0.0.156 → 0.0.158

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.156",
+  "version": "0.0.158",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {
@@ -17,6 +17,7 @@
   "files": [
     "src",
     "harness",
+    "spellcheck",
     "vite.base.ts",
     "public",
     "index.html"
@@ -33,6 +34,9 @@
     "test": "npm run test:typecheck && npm run test:run"
   },
   "peerDependencies": {
+    "dictionary-en": "^4",
+    "dictionary-en-gb": "^3",
+    "dictionary-nl": "^2",
     "react": "^19",
     "react-dom": "^19",
     "vite": "^7",
@@ -43,6 +47,15 @@
     "@types/react-dom": "^19"
   },
   "peerDependenciesMeta": {
+    "dictionary-en": {
+      "optional": true
+    },
+    "dictionary-en-gb": {
+      "optional": true
+    },
+    "dictionary-nl": {
+      "optional": true
+    },
     "vite": {
       "optional": true
     },
@@ -101,6 +114,9 @@
     "@types/nodemailer": "*",
     "@types/pngjs": "^6.0.5",
     "@vitejs/plugin-react": "^4",
+    "dictionary-en": "4.0.0",
+    "dictionary-en-gb": "3.0.0",
+    "dictionary-nl": "2.0.0",
     "electrodb": "*",
     "esbuild": "*",
     "expect-env": "*",

package/spellcheck/languages.ts

@@ -0,0 +1,86 @@
+/**
+ * Every dictionary this repo knows how to ship, and everything the image owes
+ * for carrying one. Adding a language is a row here, its `dictionary-*` package
+ * in `devDependencies`, and its tag in `REMIT_SPELLCHECK_LANGUAGES` — no code.
+ *
+ * A `.aff` and a `.dic` are data an engine reads at runtime, so carrying one is
+ * aggregation and reader's own licence is untouched. What each licence does
+ * oblige is that its text travels with the file and that the served bytes are
+ * the upstream source; both are build outputs, generated from this table.
+ */
+
+export interface DictionarySource {
+	/** BCP 47, and the directory name the browser fetches under. */
+	readonly tag: string;
+	readonly package: string;
+	readonly project: string;
+	readonly authors: string;
+	readonly source: string;
+	/** SPDX, with the option taken where upstream offers a choice. */
+	readonly licence: string;
+}
+
+export const DICTIONARY_SOURCES: readonly DictionarySource[] = [
+	{
+		tag: "en",
+		package: "dictionary-en",
+		project: "SCOWL",
+		authors: "Kevin Atkinson and contributors",
+		source: "https://github.com/wooorm/dictionaries/tree/main/dictionaries/en",
+		licence: "MIT AND BSD-3-Clause",
+	},
+	{
+		tag: "en-GB",
+		package: "dictionary-en-gb",
+		project: "SCOWL",
+		authors: "Kevin Atkinson and contributors",
+		source:
+			"https://github.com/wooorm/dictionaries/tree/main/dictionaries/en-GB",
+		licence: "MIT AND BSD-3-Clause",
+	},
+	{
+		tag: "nl",
+		package: "dictionary-nl",
+		project: "OpenTaal",
+		authors: "Stichting OpenTaal",
+		source: "https://github.com/wooorm/dictionaries/tree/main/dictionaries/nl",
+		licence: "CC-BY-3.0",
+	},
+];
+
+/**
+ * What the published image carries. Everything else in the table above is a
+ * language this repo can build and does not; the list is the switch.
+ */
+export const DEFAULT_SPELLCHECK_LANGUAGES = "en,en-GB,nl";
+
+/**
+ * `defaultComposeLanguages` appends `en` to every account's candidate set, so a
+ * build without it would leave the one language every account is guaranteed to
+ * offer as the one with no dictionary. The switch normalises rather than
+ * validates.
+ */
+export const resolveLanguages = (
+	requested: string | undefined,
+): readonly DictionarySource[] => {
+	const asked = (requested ?? DEFAULT_SPELLCHECK_LANGUAGES)
+		.split(",")
+		.map((tag) => tag.trim())
+		.filter((tag) => tag !== "");
+	if (asked.length === 0) return [];
+
+	const known = new Map(
+		DICTIONARY_SOURCES.map((source) => [source.tag.toLowerCase(), source]),
+	);
+	const wanted: DictionarySource[] = [];
+	for (const tag of ["en", ...asked]) {
+		const source = known.get(tag.toLowerCase());
+		if (!source) {
+			throw new Error(
+				`REMIT_SPELLCHECK_LANGUAGES names "${tag}", which no dictionary in packages/web-client/spellcheck/languages.ts covers. Known tags: ${DICTIONARY_SOURCES.map((entry) => entry.tag).join(", ")}.`,
+			);
+		}
+		if (!wanted.includes(source)) wanted.push(source);
+	}
+	return wanted;
+};

package/spellcheck/vite-plugin.ts

@@ -0,0 +1,385 @@
+/**
+ * Turns `REMIT_SPELLCHECK_LANGUAGES` into what the browser fetches: the engine,
+ * one directory per language holding the upstream `.aff`, `.dic` and licence
+ * text byte for byte, a manifest, and the notice generated from it.
+ *
+ * Nothing here is bundled and nothing is fetched at page load. The build's own
+ * job is that the notice describes the image exactly — which is the reason the
+ * language set is fixed at build time at all — so a tag nobody can ship, or a
+ * dictionary whose licence file is missing, fails the build by name.
+ *
+ * Two audiences build this package: this repo, where `npm run build:hunspell`
+ * leaves an engine in `build/hunspell/`, and a distributor building from the
+ * published tarball, which carries neither an engine nor a dictionary. Every
+ * failure below therefore names the file it wanted and both ways past it —
+ * `REMIT_SPELLCHECK_ENGINE_DIR` for an engine built elsewhere, and an empty
+ * `REMIT_SPELLCHECK_LANGUAGES` for a build with no spellchecker at all.
+ */
+
+import { createHash } from "node:crypto";
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import type { Plugin } from "vite";
+import type { DictionarySource } from "./languages.ts";
+import { resolveLanguages } from "./languages.ts";
+
+const require = createRequire(import.meta.url);
+const here = dirname(fileURLToPath(import.meta.url));
+// The repo root when this file is a checkout, and `node_modules` when it is an
+// installed package — which holds neither the engine nor the pins. Nothing is
+// read from here without a fallback and an error that names the alternative.
+const repoRoot = join(here, "..", "..", "..");
+// Where `npm run build:hunspell` leaves the engine. A distributor building the
+// web client from the published package has no such tree, so the location is
+// theirs to name.
+const engineDir =
+	process.env.REMIT_SPELLCHECK_ENGINE_DIR ??
+	join(repoRoot, "build", "hunspell");
+
+const WAYS_OUT = [
+	"Set REMIT_SPELLCHECK_ENGINE_DIR to a directory holding hunspell.wasm, hunspell.mjs, LICENSE, license.hunspell and pin.env — in this repo `npm run build:hunspell` writes one into build/hunspell/.",
+	"Or set REMIT_SPELLCHECK_LANGUAGES= (empty) to build a web client with no spellchecker at all; the browser's own checker stays on either way.",
+].join("\n");
+
+const LICENCE_NAMES = ["LICENSE", "license", "LICENCE", "licence"];
+
+/** The engine's own files, in the order the browser needs them explained. */
+const ENGINE_FILES = [
+	"hunspell.wasm",
+	"hunspell.mjs",
+	"LICENSE",
+	"license.hunspell",
+];
+
+interface StagedFile {
+	readonly path: string;
+	readonly source: Buffer;
+}
+
+interface StagedLanguage extends DictionarySource {
+	readonly version: string;
+	readonly bytes: number;
+	readonly files: readonly StagedFile[];
+}
+
+/**
+ * The pins describe the engine, so they are read from beside it: an engine dir
+ * a distributor points at carries the `pin.env` its own build used, and the
+ * checksum in NOTICE.txt is then the checksum of the bytes being served rather
+ * than of whatever this checkout happens to pin.
+ */
+const pinFile = (): string => {
+	const beside = join(engineDir, "pin.env");
+	if (existsSync(beside)) return beside;
+	const inRepo = join(repoRoot, "docker", "hunspell", "pin.env");
+	if (existsSync(inRepo)) return inRepo;
+	throw new Error(
+		`The engine at ${engineDir} carries no pin.env, and neither does ${inRepo}, so nothing here can say which Hunspell release is being served and NOTICE.txt would have to guess.\n${WAYS_OUT}`,
+	);
+};
+
+let pins: Record<string, string> | null = null;
+
+const readPin = (name: string): string => {
+	const path = pinFile();
+	pins ??= Object.fromEntries(
+		readFileSync(path, "utf8")
+			.split("\n")
+			.flatMap((line) => {
+				const match = /^([A-Z0-9_]+)=(.*)$/.exec(line.trim());
+				return match ? [[match[1], match[2]] as const] : [];
+			}),
+	);
+	const found = pins[name];
+	if (found === undefined) throw new Error(`${path} has no ${name}`);
+	return found;
+};
+
+const licenceIn = (directory: string): string => {
+	const named = LICENCE_NAMES.find((name) => existsSync(join(directory, name)));
+	if (named) return named;
+	const found = readdirSync(directory).find((entry) =>
+		/^licen[cs]e/i.test(entry),
+	);
+	if (found) return found;
+	throw new Error(
+		`${directory} ships no licence file. A dictionary whose licence text cannot travel with it cannot ship, so the build stops here rather than producing a NOTICE.txt that claims one exists.`,
+	);
+};
+
+const stageEngine = (): StagedFile[] =>
+	ENGINE_FILES.map((name) => {
+		const path = join(engineDir, name);
+		if (!existsSync(path)) {
+			throw new Error(
+				`${path} is missing, so this build has no spellchecking engine to serve.\n${WAYS_OUT}`,
+			);
+		}
+		return { path: name, source: readFileSync(path) };
+	});
+
+/**
+ * A `dictionary-*` package is a devDependency of @remit/web-client, which a
+ * consumer of the published tarball never receives — so a missing one is the
+ * ordinary case out here, not a broken install.
+ */
+const dictionaryDir = (source: DictionarySource): string => {
+	try {
+		// Resolved through the package's own entry point: `dictionary-*` declares an
+		// `exports` map, so its package.json is not a resolvable subpath.
+		return dirname(require.resolve(source.package));
+	} catch {
+		throw new Error(
+			`${source.package} is not installed, so the ${source.tag} dictionary cannot be staged. It is a devDependency of @remit/web-client and a consumer of the published package never gets it.\nInstall ${source.package} alongside @remit/web-client, or drop "${source.tag}" from REMIT_SPELLCHECK_LANGUAGES — set it empty to build with no spellchecker at all.`,
+		);
+	}
+};
+
+const stageLanguage = (source: DictionarySource): StagedLanguage => {
+	const directory = dictionaryDir(source);
+	const version = JSON.parse(
+		readFileSync(join(directory, "package.json"), "utf8"),
+	).version;
+	const licence = licenceIn(directory);
+	const at = (name: string) => `dictionaries/${source.tag}/${name}`;
+	const aff = readFileSync(join(directory, "index.aff"));
+	const dic = readFileSync(join(directory, "index.dic"));
+	return {
+		...source,
+		version,
+		bytes: aff.byteLength + dic.byteLength,
+		files: [
+			{ path: at("index.aff"), source: aff },
+			{ path: at("index.dic"), source: dic },
+			{ path: at("LICENSE"), source: readFileSync(join(directory, licence)) },
+		],
+	};
+};
+
+/** A licence that says the served form must be the source says it out loud. */
+const correspondence = (licence: string): boolean =>
+	/GPL|MPL/.test(licence.toUpperCase());
+
+const noticeFor = (
+	engineVersion: string,
+	languages: readonly StagedLanguage[],
+): string => {
+	const blocks = languages.map((language) =>
+		[
+			`${language.tag} — ${language.project}`,
+			`  Authors: ${language.authors}`,
+			`  Source: ${language.source}`,
+			`  Package: ${language.package}@${language.version}`,
+			`  Licence: ${language.licence}`,
+			`  Licence text: dictionaries/${language.tag}/LICENSE, beside this file`,
+			...(correspondence(language.licence)
+				? [
+						`  The served index.aff and index.dic are the unmodified upstream source.`,
+					]
+				: []),
+		].join("\n"),
+	);
+	return [
+		"This build of Remit Reader carries the spelling dictionaries listed below.",
+		"Each stays under its own licence; the licence text travels with the files,",
+		"and nothing in this image modifies a dictionary. Reader itself is MIT.",
+		"",
+		"Engine",
+		"",
+		`  Hunspell ${engineVersion}`,
+		"  Source: https://github.com/hunspell/hunspell",
+		`  Tarball: https://github.com/hunspell/hunspell/releases/download/v${engineVersion}/hunspell-${engineVersion}.tar.gz`,
+		`  sha256: ${readPin("HUNSPELL_SHA256")}`,
+		"  Licence: MPL-1.1 (the option taken from Hunspell's MPL-1.1/GPL-2.0/LGPL-2.1 triple)",
+		"  Licence text: LICENSE, beside this file",
+		"  Build recipe: docker/hunspell/build.sh",
+		"",
+		"Dictionaries",
+		"",
+		...blocks.map((block) => `${block}\n`),
+	].join("\n");
+};
+
+export interface SpellcheckBuild {
+	readonly languages: readonly StagedLanguage[];
+	/** Paths relative to `directory`, which is where all of them are emitted. */
+	readonly files: readonly StagedFile[];
+	/** `spellcheck/<digest>/`, relative to the build's output root. */
+	readonly directory: string;
+	/** What the browser resolves against the document to reach `directory`. */
+	readonly base: string;
+	/** Where the dev server answers for `directory`, always document-rooted. */
+	readonly servePath: string;
+	/** Tag → the bytes opening that language downloads, engine included. */
+	readonly bytes: Readonly<Record<string, number>>;
+}
+
+const EMPTY_BUILD: SpellcheckBuild = {
+	languages: [],
+	files: [],
+	directory: "",
+	base: "",
+	servePath: "",
+	bytes: {},
+};
+
+/**
+ * One digest over everything served, folded into the directory name. Nothing
+ * the browser fetches is versioned otherwise — `hunspell.wasm` and `index.dic`
+ * are the same two paths in every build — and an unversioned path cannot be
+ * cached, which is what left every composer open re-downloading its dictionary.
+ */
+const digestOf = (files: readonly StagedFile[]): string => {
+	const hash = createHash("sha256");
+	for (const file of [...files].sort((left, right) =>
+		left.path.localeCompare(right.path),
+	)) {
+		hash.update(file.path);
+		hash.update("\0");
+		hash.update(file.source);
+	}
+	return hash.digest("hex").slice(0, 16);
+};
+
+const documentRooted = (viteBase: string | undefined): boolean =>
+	viteBase === undefined || viteBase.startsWith("/");
+
+/**
+ * An absolute base names where the app is mounted, and the staged directory
+ * hangs off it. A relative one — Storybook's, always `./` — belongs to a build
+ * published under a path it cannot know here (`/reader/pr/<n>/<sha>/`), so it
+ * gets the directory alone and the document resolves it at run time. An unset
+ * base is vite's own default of `/`, not a relative one.
+ */
+const browserBase = (
+	viteBase: string | undefined,
+	directory: string,
+): string =>
+	documentRooted(viteBase)
+		? `${(viteBase ?? "/").replace(/\/$/, "")}/${directory}`
+		: directory;
+
+export const stageSpellcheck = (
+	requested: string | undefined,
+	viteBase: string | undefined,
+): SpellcheckBuild => {
+	const wanted = resolveLanguages(requested);
+	if (wanted.length === 0) return EMPTY_BUILD;
+
+	// The engine first: it is the file a build outside this repo is most likely
+	// to be missing, and its error is the one that names both ways out.
+	const engine = stageEngine();
+	const engineVersion = readPin("HUNSPELL_VERSION");
+	const languages = wanted.map(stageLanguage);
+	const wasmBytes =
+		engine.find((file) => file.path === "hunspell.wasm")?.source.byteLength ??
+		0;
+
+	const payload = [
+		...engine,
+		...languages.flatMap((language) => language.files),
+	];
+	const directory = `spellcheck/${digestOf(payload)}/`;
+
+	const manifest = {
+		engine: {
+			project: "Hunspell",
+			version: engineVersion,
+			licence: "MPL-1.1",
+			source: "https://github.com/hunspell/hunspell",
+			recipe: "docker/hunspell/build.sh",
+			bytes: wasmBytes,
+		},
+		languages: languages.map((language) => ({
+			tag: language.tag,
+			project: language.project,
+			authors: language.authors,
+			source: language.source,
+			package: `${language.package}@${language.version}`,
+			licence: language.licence,
+			licenceFile: `dictionaries/${language.tag}/LICENSE`,
+			bytes: language.bytes,
+		})),
+	};
+
+	return {
+		languages,
+		directory,
+		base: browserBase(viteBase, directory),
+		servePath: `${(documentRooted(viteBase) ? (viteBase ?? "/") : "/").replace(/\/$/, "")}/${directory}`,
+		bytes: Object.fromEntries(
+			languages.map((language) => [language.tag, wasmBytes + language.bytes]),
+		),
+		files: [
+			...payload,
+			{
+				path: "manifest.json",
+				source: Buffer.from(`${JSON.stringify(manifest, null, "\t")}\n`),
+			},
+			{
+				path: "NOTICE.txt",
+				source: Buffer.from(noticeFor(engineVersion, languages)),
+			},
+		],
+	};
+};
+
+export const spellcheckPlugin = (): Plugin => {
+	let staged: SpellcheckBuild | null = null;
+
+	return {
+		name: "remit-spellcheck",
+		enforce: "pre",
+		config(userConfig) {
+			staged = stageSpellcheck(
+				process.env.REMIT_SPELLCHECK_LANGUAGES,
+				userConfig.base,
+			);
+			return {
+				define: {
+					__REMIT_SPELLCHECK_LANGUAGES__: JSON.stringify(
+						staged.languages.map((language) => language.tag),
+					),
+					__REMIT_SPELLCHECK_BASE__: JSON.stringify(staged.base),
+					__REMIT_SPELLCHECK_BYTES__: JSON.stringify(staged.bytes),
+				},
+			};
+		},
+		configureServer(server) {
+			server.middlewares.use((request, response, next) => {
+				const held = staged;
+				const url = (request.url ?? "").split("?")[0];
+				if (!held || held.servePath === "" || !url.startsWith(held.servePath))
+					return next();
+				const wanted = decodeURIComponent(url.slice(held.servePath.length));
+				const file = held.files.find((entry) => entry.path === wanted);
+				if (!file) return next();
+				response.setHeader("Content-Length", file.source.byteLength);
+				response.setHeader(
+					"Content-Type",
+					wanted.endsWith(".mjs")
+						? "text/javascript; charset=utf-8"
+						: wanted.endsWith(".wasm")
+							? "application/wasm"
+							: wanted.endsWith(".json")
+								? "application/json; charset=utf-8"
+								: "text/plain; charset=utf-8",
+				);
+				response.end(file.source);
+			});
+		},
+		generateBundle() {
+			const held = staged;
+			if (!held) return;
+			for (const file of held.files) {
+				this.emitFile({
+					type: "asset",
+					fileName: `${held.directory}${file.path}`,
+					source: file.source,
+				});
+			}
+		},
+	};
+};

package/src/components/compose/compose-spellcheck.test.ts

@@ -16,10 +16,22 @@ import { composeSpellcheck, spellcheckFailure } from "./compose-spellcheck.js";
 interface WorkerMessage {
 	readonly type: string;
 	readonly language?: string;
+	readonly base?: string;
 }
 
 const opened: { url: string; messages: WorkerMessage[] }[] = [];
 
+/**
+ * What `REMIT_SPELLCHECK_LANGUAGES` writes into the bundle. Nothing defines it
+ * outside a Vite build, so a test that wants a build carrying English says so.
+ */
+const built = (...tags: string[]): void => {
+	Object.defineProperty(globalThis, "__REMIT_SPELLCHECK_LANGUAGES__", {
+		value: tags,
+		configurable: true,
+	});
+};
+
 class FakeWorker {
 	readonly messages: WorkerMessage[] = [];
 	constructor(url: URL) {
@@ -42,24 +54,42 @@ const withWorker = <T>(run: () => Promise<T>): Promise<T> => {
 
 afterEach(() => {
 	opened.length = 0;
+	built();
 });
 
 describe("the checker the composer opens", () => {
 	it("asks the worker for the language the message is in", async () => {
+		built("en", "en-GB", "nl");
 		const provider = await withWorker(() =>
 			composeSpellcheck(() => undefined).provider("en"),
 		);
 
-		assert.equal(provider?.language, "en");
+		assert.equal(
+			provider?.language,
+			"en",
+			"plain English is checked against English, not a region's",
+		);
 		assert.equal(opened.length, 1);
 		assert.match(opened[0].url, /rich-text-spellcheck-worker/);
-		assert.deepEqual(opened[0].messages, [{ type: "open", language: "en" }]);
+		assert.deepEqual(
+			opened[0].messages,
+			[
+				{
+					type: "open",
+					language: "en",
+					base: "http://localhost/spellcheck/",
+					bytesExpected: 0,
+				},
+			],
+			"the worker is told an absolute place to fetch from, resolved against the page",
+		);
 		provider?.close();
 	});
 
 	it("starts no worker for a language the build carries no words for", async () => {
+		built("en", "en-GB", "nl");
 		const provider = await withWorker(() =>
-			composeSpellcheck(() => undefined).provider("nl"),
+			composeSpellcheck(() => undefined).provider("de"),
 		);
 
 		assert.equal(provider, null);
@@ -70,9 +100,14 @@ describe("the checker the composer opens", () => {
 		const reported: PushErrorInput[] = [];
 		const { onStatus } = composeSpellcheck((input) => reported.push(input));
 
-		onStatus?.({ state: "opening", language: "en" });
+		onStatus?.({
+			state: "opening",
+			language: "en",
+			bytesLoaded: 65_536,
+			bytesTotal: 167_936,
+		});
 		onStatus?.({ state: "ready", language: "en" });
-		onStatus?.({ state: "unavailable", language: "nl" });
+		onStatus?.({ state: "unavailable", language: "de" });
 
 		assert.deepEqual(reported, []);
 	});

package/src/components/layout/Drawer.tsx

@@ -15,6 +15,10 @@ interface DrawerProps {
  * Modal navigation drawer. Slides in from the side with a scrim behind.
  * Dismissed by scrim tap, escape key, or the close button. Focus moves into
  * the drawer on open and returns to the previously focused element on close.
+ *
+ * Visibility is `isOpen` alone, at every width: the drawer is the intelligence
+ * surface wherever the rail has no room, which includes the two-pane desktop
+ * band between 1024 and 1280px.
  */
 export const Drawer = ({
 	isOpen,
@@ -67,7 +71,7 @@ export const Drawer = ({
 
 	return (
 		<div
-			className="fixed inset-0 z-50 lg:hidden"
+			className="fixed inset-0 z-50"
 			role="dialog"
 			aria-modal="true"
 			aria-label={ariaLabel}

package/src/components/mail/AuthenticityBanner.tsx

@@ -0,0 +1,45 @@
+import type { RemitImapMessageAuthenticity } from "@remit/api-http-client/types.gen.ts";
+import { ShieldAlert } from "lucide-react";
+
+/**
+ * Danger banner rendered above the thread body when DKIM mismatch is detected.
+ * Design spec (03-reading-and-intelligence.md): "a danger banner renders above
+ * the body: 'This message claims to be a company but was sent from a personal
+ * mailbox.' with a 'Why?' link that opens/highlights this section."
+ *
+ * The link sits in the sentence at the sentence's own size. Set apart as
+ * smaller, right-floated chrome it read as a label rather than the way in.
+ */
+export function AuthenticityBanner({
+	authenticity,
+	onOpenIntelligence,
+}: {
+	authenticity: RemitImapMessageAuthenticity;
+	onOpenIntelligence?: () => void;
+}) {
+	if (!authenticity.dkimMismatch) return null;
+
+	return (
+		<div className="flex items-start gap-2 rounded-none border-b border-danger/20 bg-danger-soft px-5 py-2.5 text-sm">
+			<ShieldAlert className="mt-0.5 size-4 shrink-0 text-danger" />
+			<p className="flex-1 leading-snug text-fg">
+				This message claims to be from{" "}
+				<span className="font-semibold">{authenticity.fromDomain}</span> but was
+				sent
+				{authenticity.dkimDomain
+					? ` via ${authenticity.dkimDomain}`
+					: " from a different domain"}
+				.{" "}
+				{onOpenIntelligence && (
+					<button
+						type="button"
+						onClick={onOpenIntelligence}
+						className="font-medium text-danger hover:underline"
+					>
+						Why?
+					</button>
+				)}
+			</p>
+		</div>
+	);
+}

package/src/components/mail/ConversationView.tsx

@@ -6,7 +6,6 @@ import {
 import type { RemitImapMessageAuthenticity } from "@remit/api-http-client/types.gen.ts";
 import { MobileReadingPane } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
-import { ShieldAlert } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ComposeMode } from "@/components/compose/ComposeProvider";
 import { InlineCompose } from "@/components/compose/InlineCompose";
@@ -18,6 +17,7 @@ import { useMarkAsRead } from "@/hooks/useMarkAsRead";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { useSwipeNavigation } from "@/hooks/useSwipeNavigation";
 import { useToggleStar } from "@/hooks/useToggleStar";
+import { AuthenticityBanner } from "./AuthenticityBanner";
 import { MessageCard } from "./MessageCard";
 
 interface ConversationViewProps {
@@ -95,46 +95,6 @@ const LoadingSkeleton = () => (
 	</div>
 );
 
-/**
- * Danger banner rendered above the thread body when DKIM mismatch is detected.
- * Design spec (03-reading-and-intelligence.md): "a danger banner renders above
- * the body: 'This message claims to be a company but was sent from a personal
- * mailbox.' with a 'Why?' link that opens/highlights this section."
- */
-function AuthenticityBanner({
-	authenticity,
-	onOpenIntelligence,
-}: {
-	authenticity: RemitImapMessageAuthenticity;
-	onOpenIntelligence?: () => void;
-}) {
-	if (!authenticity.dkimMismatch) return null;
-
-	return (
-		<div className="flex items-start gap-2 rounded-none border-b border-danger/20 bg-danger-soft px-5 py-2.5 text-sm">
-			<ShieldAlert className="mt-0.5 size-4 shrink-0 text-danger" />
-			<p className="flex-1 leading-snug text-fg">
-				This message claims to be from{" "}
-				<span className="font-semibold">{authenticity.fromDomain}</span> but was
-				sent
-				{authenticity.dkimDomain
-					? ` via ${authenticity.dkimDomain}`
-					: " from a different domain"}
-				.
-			</p>
-			{onOpenIntelligence && (
-				<button
-					type="button"
-					onClick={onOpenIntelligence}
-					className="shrink-0 text-2xs font-medium text-danger hover:underline"
-				>
-					Why?
-				</button>
-			)}
-		</div>
-	);
-}
-
 export const ConversationView = ({
 	threadId,
 	mailboxId,

package/src/components/mail/MailboxPane.tsx

@@ -1167,13 +1167,51 @@ function MailboxReading() {
 		onToolbarDiscardDraft,
 		onToolbarMove,
 		composeState,
+		handleDeselectIfRemoved,
 	} = useMailboxPane();
-	// The rail's own width gate, not the shell tier: between 1024 and 1280 the
-	// reading pane is mounted but the rail is not, so "enabled" would promise an
-	// open that cannot happen.
+	// Which surface intelligence has here: the rail between 1280 and up, the
+	// mobile drawer below that, where the reading pane is mounted and the rail
+	// has no room.
 	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
 	const hasThread = Boolean(conversation);
-	const canToggleIntelligence = railFits && hasThread;
+
+	// The drawer is modal, so it opens only when it is asked for — and only for
+	// the thread it was asked for. `intelligenceOpen` is the rail's persisted
+	// preference and the DKIM auto-open sets it on every tier, so driving the
+	// drawer from it would throw a scrim over a message the moment one was
+	// selected. Naming the thread is also what closes it again when the reader
+	// moves on: a bare flag would still be set when they came back.
+	const [drawerThreadId, setDrawerThreadId] = useState<string | null>(null);
+	const openThreadId = conversation?.threadId ?? null;
+	// Derived rather than stored: the drawer is up only while the thread it was
+	// opened for is still the one on screen, so moving to another one closes it
+	// with no effect to run. Closing it from an effect would paint one frame of
+	// an open drawer over the newly opened thread first.
+	const drawerOpen =
+		!railFits && openThreadId !== null && drawerThreadId === openThreadId;
+
+	const closeIntelligenceDrawer = useCallback(
+		() => setDrawerThreadId(null),
+		[],
+	);
+	const openIntelligenceDrawer = useCallback(
+		() => setDrawerThreadId(openThreadId),
+		[openThreadId],
+	);
+	// The banner's "Why?" — always an open, never a close.
+	const openIntelligence = railFits
+		? onToggleIntelligence
+		: openIntelligenceDrawer;
+	// The toolbar's control, which toggles whichever surface this width has.
+	const toggleIntelligence = useCallback(() => {
+		if (railFits) {
+			onToggleIntelligence();
+			return;
+		}
+		setDrawerThreadId(drawerOpen ? null : openThreadId);
+	}, [railFits, onToggleIntelligence, drawerOpen, openThreadId]);
+	const intelligenceShowing =
+		hasThread && (railFits ? intelligenceOpen : drawerOpen);
 
 	const detailPane =
 		composeState.isOpen && !conversation ? (
@@ -1186,9 +1224,7 @@ function MailboxReading() {
 				selectedMessageId={conversation.messageId}
 				authenticity={conversation.authenticity}
 				onOpenIntelligence={
-					conversation.authenticity?.dkimMismatch
-						? onToggleIntelligence
-						: undefined
+					conversation.authenticity?.dkimMismatch ? openIntelligence : undefined
 				}
 				composeRequest={toolbarComposeRequest}
 				onComposeClose={onClearComposeRequest}
@@ -1198,37 +1234,54 @@ function MailboxReading() {
 		);
 
 	return (
-		<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
-			<MessageToolbar
-				hasThread={hasThread}
-				intelligenceOpen={canToggleIntelligence && intelligenceOpen}
-				canToggleIntelligence={canToggleIntelligence}
-				onToggleIntelligence={onToggleIntelligence}
-				onReply={hasThread ? onToolbarReply : undefined}
-				onReplyAll={hasThread ? onToolbarReplyAll : undefined}
-				onForward={hasThread ? onToolbarForward : undefined}
-				canDelete={hasThread || hasRemitDraftOpen}
-				onDelete={
-					hasThread
-						? onToolbarDelete
-						: hasRemitDraftOpen
-							? onToolbarDiscardDraft
+		<>
+			<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
+				<MessageToolbar
+					hasThread={hasThread}
+					intelligenceOpen={intelligenceShowing}
+					canToggleIntelligence={hasThread}
+					onToggleIntelligence={toggleIntelligence}
+					onReply={hasThread ? onToolbarReply : undefined}
+					onReplyAll={hasThread ? onToolbarReplyAll : undefined}
+					onForward={hasThread ? onToolbarForward : undefined}
+					canDelete={hasThread || hasRemitDraftOpen}
+					onDelete={
+						hasThread
+							? onToolbarDelete
+							: hasRemitDraftOpen
+								? onToolbarDiscardDraft
+								: undefined
+					}
+					onToggleStar={hasThread ? onToolbarStar : undefined}
+					isStarred={selectedThread?.hasStars}
+					moveContext={
+						hasThread && mailboxAccountId
+							? {
+									accountId: mailboxAccountId,
+									currentMailboxId: mailboxId,
+									onMove: onToolbarMove,
+								}
 							: undefined
-				}
-				onToggleStar={hasThread ? onToolbarStar : undefined}
-				isStarred={selectedThread?.hasStars}
-				moveContext={
-					hasThread && mailboxAccountId
-						? {
-								accountId: mailboxAccountId,
-								currentMailboxId: mailboxId,
-								onMove: onToolbarMove,
-							}
-						: undefined
-				}
-			/>
-			<div className="min-h-0 flex-1 overflow-hidden">{detailPane}</div>
-		</section>
+					}
+				/>
+				<div className="min-h-0 flex-1 overflow-hidden">{detailPane}</div>
+			</section>
+			<Drawer
+				isOpen={drawerOpen}
+				onClose={closeIntelligenceDrawer}
+				ariaLabel="Message details"
+				side="right"
+			>
+				<IntelligencePane
+					onClose={closeIntelligenceDrawer}
+					thread={selectedThread}
+					mailboxId={mailboxId}
+					accountId={mailboxAccountId}
+					hideCloseButton
+					onAfterOptimisticRemove={handleDeselectIfRemoved}
+				/>
+			</Drawer>
+		</>
 	);
 }
 

package/src/components/mail/MessageToolbar.tsx

@@ -26,9 +26,10 @@ export interface MessageToolbarProps {
 	hasThread: boolean;
 	intelligenceOpen: boolean;
 	/**
-	 * Whether pressing the intelligence toggle would open a rail: the view has
-	 * one, the width allows it, and a thread is selected. The button renders
-	 * either way — disabled when false, never absent (#52).
+	 * Whether pressing the intelligence toggle would open anything: the view has
+	 * an intelligence surface at this width — the rail, or the drawer where the
+	 * rail does not fit — and a thread is selected. The button renders either
+	 * way, disabled when false, never absent (#52).
 	 */
 	canToggleIntelligence: boolean;
 	onToggleIntelligence: () => void;

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

@@ -0,0 +1,131 @@
+import { type IntelligenceData, IntelligencePanel } from "@remit/ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Drawer } from "@/components/layout/Drawer";
+import { AuthenticityBanner } from "@/components/mail/AuthenticityBanner";
+
+/**
+ * The authenticity warning over the reading pane, and where its "Why?" goes.
+ *
+ * Between 1024 and 1280px the shell has room for the reading pane but not the
+ * intelligence rail, so the link opens the same right-anchored drawer the phone
+ * uses — `MailboxPane.Reading` mounts it whenever the rail does not fit. The
+ * warning itself reads as one sentence: the link sits in the text flow at the
+ * body's own size rather than floating off to the right as chrome.
+ */
+const meta: Meta<typeof AuthenticityBanner> = {
+	title: "Flows/Reading/Authenticity Warning",
+	component: AuthenticityBanner,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof AuthenticityBanner>;
+
+const TWO_PANE_WIDTH = 1100;
+
+const authenticity = {
+	fromDomain: "mondialrelay.fr",
+	dkimDomain: "gmail.example",
+	dkimMismatch: true,
+};
+
+const intelligence: IntelligenceData = {
+	sender: {
+		name: "Mondial Relay",
+		email: "delivery.notice.4421@gmail.example",
+		trust: "unknown",
+		firstSeenLabel: "today",
+		inboundCount: 1,
+		replyCount: 0,
+	},
+	authenticity: {
+		verdict: "mismatch",
+		fromDomain: "mondialrelay.fr",
+		dkimDomain: "gmail.example",
+		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",
+		},
+	],
+};
+
+/**
+ * The reading pane as `MailboxPane.Reading` composes it at this width: the
+ * banner above the thread body, and the drawer it opens over the panes.
+ */
+const TwoPaneReading = () => {
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	return (
+		<div
+			className="flex overflow-hidden rounded-lg border border-line bg-canvas"
+			// The transform makes the frame a containing block, so the drawer's
+			// `position: fixed` resolves against these 1100px instead of the
+			// Storybook canvas. `relative` does not do this for fixed children.
+			style={{ width: TWO_PANE_WIDTH, height: 700, transform: "translateZ(0)" }}
+		>
+			<div className="w-[38%] shrink-0 border-r border-line bg-surface-sunken" />
+			<section className="flex min-w-0 flex-1 flex-col">
+				<header className="border-b border-line px-5 pt-5 pb-3">
+					<h1 className="max-w-2xl text-lg font-semibold leading-snug text-fg">
+						Your parcel could not be delivered
+					</h1>
+					<p className="mt-1 text-2xs text-fg-subtle">1 message</p>
+				</header>
+				<AuthenticityBanner
+					authenticity={authenticity}
+					onOpenIntelligence={() => setDrawerOpen(true)}
+				/>
+				<div className="min-h-0 flex-1 overflow-y-auto px-5 py-4 text-sm text-fg">
+					<p>
+						We attempted to deliver your parcel today and nobody was home. Pay
+						the outstanding €2.40 redelivery fee within 24 hours to schedule a
+						new attempt.
+					</p>
+				</div>
+			</section>
+			<Drawer
+				isOpen={drawerOpen}
+				onClose={() => setDrawerOpen(false)}
+				ariaLabel="Message details"
+				side="right"
+			>
+				<IntelligencePanel data={intelligence} hideCloseButton />
+			</Drawer>
+		</div>
+	);
+};
+
+/** Two panes, no rail: press "Why?" and the drawer carries the panel. */
+export const TwoPaneDesktop: Story = {
+	render: () => <TwoPaneReading />,
+};
+
+/** The same surface on the dark theme. */
+export const TwoPaneDesktopDark: Story = {
+	name: "Two Pane Desktop (dark)",
+	parameters: { theme: "dark" },
+	render: () => <TwoPaneReading />,
+};

package/src/hooks/useMediaQuery.ts

@@ -6,7 +6,7 @@ import { DESKTOP_MEDIA_QUERY, useMatchMedia } from "@remit/ui";
  * layout — phones, narrow tablets, and a large tablet in portrait, which is
  * 1024px wide but has no room for the three-pane desktop grid (#682).
  *
- * The CSS-gated mobile chrome (Drawer, ComposeFab) uses `lg:hidden`, and the
+ * The CSS-gated mobile chrome (ComposeFab) uses `lg:hidden`, and the
  * `lg` variant is redefined in `@remit/ui`'s token sheet with the same
  * condition — change `DESKTOP_MEDIA_QUERY` and both move together.
  */

package/vite.base.ts

@@ -4,6 +4,7 @@ import tailwindcss from "@tailwindcss/vite";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react";
 import type { AliasOptions, BuildOptions, PluginOption } from "vite";
+import { spellcheckPlugin } from "./spellcheck/vite-plugin.ts";
 
 /**
  * The one place the web-client build toolchain is described. Both the dev
@@ -54,4 +55,5 @@ export const webClientPlugins = (routes: RouterPaths = {}): PluginOption[] => [
 	tanstackRouter({ target: "react", autoCodeSplitting: true, ...routes }),
 	react(),
 	tailwindcss(),
+	spellcheckPlugin(),
 ];