@remit/web-client 0.0.196 → 0.0.197

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.196",
+  "version": "0.0.197",
   "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": {

package/src/components/mail/intelligence-auto-open-pref.render.test.ts

@@ -0,0 +1,412 @@
+/**
+ * A DKIM mismatch raises the rail for the message it fired on, and for nothing
+ * else (#778).
+ *
+ * The auto-open reached for the reader's own toggle, so one message signed by
+ * the wrong domain wrote `remit:intelligence-open` to `open` and kept the rail
+ * up for every later thread and every later session, including for a reader who
+ * had collapsed the rail on purpose. The rail's two verbs are bound here through
+ * the real `useRailPanels`, and the layout carries a render button so a
+ * navigation is followed by the render the router does not force here.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { AppShellSlotted } from "@remit/ui";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement, type ReactNode, useState } from "react";
+import { ComposeProvider } from "@/components/compose/ComposeProvider";
+import { useRailPanels } from "@/hooks/useRailPanels";
+import { INTELLIGENCE_PREF_KEY } from "@/lib/intelligence-pref";
+import {
+	MailContext,
+	type MailContextValue,
+	useMailContext,
+} from "@/lib/mail-context";
+import { MailFreshnessProvider } from "@/lib/mail-freshness";
+import { EMPTY_RESULT_FOLDER_INDEX } from "@/lib/result-folder";
+import { retainOpenPanelsAtTier, useOpenThreadPath } from "@/routing";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import { makeThreadMessage } from "@/test-support/fixtures";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import {
+	describedMessage,
+	MESSAGE_ID,
+	settle,
+	THREAD_ID,
+} from "@/test-support/intelligence-surface";
+import { MailboxPane } from "./MailboxPane";
+
+/** Wide enough for the rail, which is the surface the auto-open acts on. */
+const RAIL_WIDTH = 1400;
+
+const MAILBOX_ID = "mailbox-1";
+const MESSAGE_PATH = `/mail/${MAILBOX_ID}/${THREAD_ID}/${MESSAGE_ID}`;
+
+const NEXT_THREAD_ID = "thread-2";
+const NEXT_MESSAGE_ID = "msg-2";
+
+const SHOW_INTELLIGENCE = "Show intelligence sidebar";
+const HIDE_INTELLIGENCE = "Hide intelligence sidebar";
+const RENDER_AGAIN = "render again";
+
+/** Signed by another domain: what the reading pane's auto-open fires on. */
+const row = makeThreadMessage({
+	messageId: MESSAGE_ID,
+	threadId: THREAD_ID,
+	subject: "Your parcel could not be delivered",
+	fromName: "Mondial Relay",
+	fromEmail: "delivery.notice@gmail.example",
+	authenticity: {
+		dkimMismatch: true,
+		fromDomain: "mondialrelay.fr",
+		dkimDomain: "gmail.example",
+	},
+});
+
+/** The next thread the reader opens, which raised nothing of its own. */
+const nextRow = makeThreadMessage({
+	messageId: NEXT_MESSAGE_ID,
+	threadId: NEXT_THREAD_ID,
+	subject: "Lunch on Thursday",
+	fromName: "Ada",
+	fromEmail: "ada@mondialrelay.fr",
+});
+
+/** jsdom's own storage is not on `globalThis`, which is where the pref reads. */
+const installStorage = (seed?: string): Map<string, string> => {
+	const store = new Map<string, string>();
+	if (seed !== undefined) store.set(INTELLIGENCE_PREF_KEY, seed);
+	(globalThis as { localStorage?: Storage }).localStorage = {
+		getItem: (key: string) => store.get(key) ?? null,
+		setItem: (key: string, value: string) => {
+			store.set(key, value);
+		},
+		removeItem: (key: string) => {
+			store.delete(key);
+		},
+		clear: () => {
+			store.clear();
+		},
+		key: (index: number) => Array.from(store.keys())[index] ?? null,
+		get length() {
+			return store.size;
+		},
+	} as Storage;
+	return store;
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	(globalThis as { localStorage?: Storage }).localStorage = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+/**
+ * The `/mail` layout's own binding, from the hook the layout uses, plus the
+ * button every router-driven spec here needs: this environment does not re-run
+ * a mounted component when the router's own state moves, so a navigation is
+ * followed by a press that renders the layout again
+ * (`hooks/search-mirror-convergence.render.test.ts`).
+ */
+function MailLayout({ children }: { children: ReactNode }) {
+	const [renders, setRenders] = useState(0);
+	const { intelligenceOpen, toggleIntelligence, raiseIntelligence } =
+		useRailPanels();
+	const value: MailContextValue = {
+		accounts: [],
+		mailboxNameIndex: new Map(),
+		accountNameIndex: new Map(),
+		resultFolderIndex: EMPTY_RESULT_FOLDER_INDEX,
+		searchQuery: "",
+		searchInput: "",
+		searchViewKey: "",
+		onSearchChange: () => {},
+		onSearchClear: () => {},
+		onSearchClearQuery: () => {},
+		intelligenceOpen,
+		onToggleIntelligence: toggleIntelligence,
+		onRaiseIntelligence: raiseIntelligence,
+	};
+	return createElement(
+		MailContext.Provider,
+		{ value },
+		createElement(
+			"button",
+			{
+				type: "button",
+				"aria-label": RENDER_AGAIN,
+				onClick: () => setRenders(renders + 1),
+			},
+			String(renders),
+		),
+		createElement(MailFreshnessProvider, { accountIds: [], children }),
+	);
+}
+
+function Shell() {
+	const { intelligenceOpen } = useMailContext();
+	return createElement(AppShellSlotted, {
+		initialWidth: RAIL_WIDTH,
+		nav: null,
+		list: null,
+		reading: createElement(MailboxPane.Reading),
+		intelligence: createElement(MailboxPane.Intelligence),
+		intelligenceOpen,
+	});
+}
+
+const testRouter = (hash: string): AnyRouter => {
+	const rootRoute = createRootRoute({
+		component: () =>
+			createElement(
+				ComposeProvider,
+				null,
+				createElement(MailLayout, {
+					// biome-ignore lint/correctness/noChildrenProp: no JSX in a `.ts` test, and createElement's variadic children do not satisfy a required prop
+					children: createElement(Outlet),
+				}),
+			),
+	});
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		validateSearch: (search: Record<string, unknown>) => search,
+		component: Outlet,
+	});
+	const mailboxRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/$mailboxId",
+		component: () =>
+			createElement(MailboxPane, {
+				mailboxId: MAILBOX_ID,
+				thread: useOpenThreadPath(),
+				// biome-ignore lint/correctness/noChildrenProp: no JSX in a `.ts` test, and createElement's variadic children do not satisfy a required prop
+				children: createElement(Outlet),
+			}),
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "$threadId",
+		component: Outlet,
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: () => createElement(Shell),
+	});
+	const routeTree = rootRoute.addChildren([
+		mailRoute.addChildren([
+			mailboxRoute.addChildren([threadRoute.addChildren([messageRoute])]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({
+			initialEntries: [`${MESSAGE_PATH}${hash}`],
+		}),
+	}) as unknown as AnyRouter;
+};
+
+const mount = async (hash = ""): Promise<[DomHarness, AnyRouter]> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) return { accounts: [] };
+		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
+			return { items: [row] };
+		}
+		if (call.path.endsWith(`/threads/${NEXT_THREAD_ID}/messages`)) {
+			return { items: [nextRow] };
+		}
+		if (call.path.includes("/messages/")) return describedMessage;
+		if (call.path.includes("/threads")) return { items: [row, nextRow] };
+		return { items: [] };
+	});
+
+	const router = testRouter(hash);
+	await router.load();
+	const mounted = createDomHarness({ viewportWidth: RAIL_WIDTH });
+	harness = mounted;
+	mounted.renderApp(createElement(RouterProvider, { router }));
+	// Twice: the auto-open acts from an effect the first settle runs.
+	await settle(mounted);
+	await settle(mounted);
+	return [mounted, router];
+};
+
+/**
+ * Opening the next thread, as every list opens one: the message route, with the
+ * fragment run through the real retain updater the rows pass as `hash`
+ * (`MessageList.openRow`). The rows are virtualized, so there is no row in jsdom
+ * to click; the press that follows is the layout's render, which the router does
+ * not force here.
+ */
+const openNextThread = async (
+	mounted: DomHarness,
+	router: AnyRouter,
+): Promise<void> => {
+	await router.navigate({
+		to: "/mail/$mailboxId/$threadId/$messageId",
+		params: {
+			mailboxId: MAILBOX_ID,
+			threadId: NEXT_THREAD_ID,
+			messageId: NEXT_MESSAGE_ID,
+		},
+		hash: retainOpenPanelsAtTier(true),
+	});
+	await settle(mounted);
+	mounted.click(mounted.byLabel(RENDER_AGAIN));
+	await settle(mounted);
+};
+
+const railIsUp = (mounted: DomHarness): boolean =>
+	mounted.query(`[aria-label="${HIDE_INTELLIGENCE}"]`) !== null;
+
+describe("the DKIM auto-open and the stored rail preference (#778)", () => {
+	it("raises the rail for the message it fired on", async () => {
+		const store = installStorage("closed");
+
+		const [mounted, router] = await mount();
+
+		assert.equal(railIsUp(mounted), true, "the mismatch left the rail down");
+		assert.equal(
+			store.get(INTELLIGENCE_PREF_KEY),
+			"closed",
+			"one mismatch rewrote the preference the reader chose",
+		);
+		assert.equal(
+			router.state.location.hash,
+			"",
+			"a raise for one message was written into the address",
+		);
+	});
+
+	it("leaves the raised rail behind when the reader opens the next thread", async () => {
+		const store = installStorage("closed");
+
+		const [mounted, router] = await mount();
+		assert.equal(railIsUp(mounted), true, "the mismatch left the rail down");
+
+		await openNextThread(mounted, router);
+
+		assert.equal(
+			railIsUp(mounted),
+			false,
+			"the raise travelled to a thread that never asked for it",
+		);
+		assert.equal(
+			store.get(INTELLIGENCE_PREF_KEY),
+			"closed",
+			"the reader's collapse did not survive the mismatch",
+		);
+	});
+
+	it("carries a rail the reader put up themselves to the next thread", async () => {
+		installStorage("closed");
+
+		const [mounted, router] = await mount();
+		// Down from the raise, then up as the reader's own answer.
+		mounted.click(mounted.byLabel(HIDE_INTELLIGENCE));
+		await settle(mounted);
+		mounted.click(mounted.byLabel(SHOW_INTELLIGENCE));
+		await settle(mounted);
+
+		await openNextThread(mounted, router);
+
+		assert.equal(railIsUp(mounted), true, "the rail came down on its own");
+		assert.equal(
+			router.state.location.hash,
+			"intelligence",
+			"the reader's own rail stayed out of the address",
+		);
+	});
+
+	it("still stores the rail the reader put away themselves", async () => {
+		const store = installStorage();
+
+		const [mounted] = await mount();
+		mounted.click(mounted.byLabel(HIDE_INTELLIGENCE));
+		await settle(mounted);
+
+		assert.equal(railIsUp(mounted), false, "the toggle left the rail up");
+		assert.equal(
+			store.get(INTELLIGENCE_PREF_KEY),
+			"closed",
+			"the reader's own toggle stopped storing what they chose",
+		);
+	});
+
+	it("still stores the rail the reader put up themselves", async () => {
+		const store = installStorage();
+
+		const [mounted] = await mount();
+		mounted.click(mounted.byLabel(HIDE_INTELLIGENCE));
+		await settle(mounted);
+		mounted.click(mounted.byLabel(SHOW_INTELLIGENCE));
+		await settle(mounted);
+
+		assert.equal(railIsUp(mounted), true, "the toggle left the rail down");
+		assert.equal(
+			store.get(INTELLIGENCE_PREF_KEY),
+			"open",
+			"the reader's own toggle stopped storing what they chose",
+		);
+	});
+
+	// A link naming the shortcuts sheet arrives with the rail down, because the
+	// address has spoken; the mismatch raises it anyway. Putting that rail away
+	// is an answer to the surfacing, not the reader revising a preference they
+	// still hold — and reading it as one flipped `open` to `closed` unasked.
+	it("puts a raised rail away without storing a collapse", async () => {
+		const store = installStorage("open");
+
+		const [mounted] = await mount("#shortcuts");
+		assert.equal(railIsUp(mounted), true, "the mismatch left the rail down");
+
+		mounted.click(mounted.byLabel(HIDE_INTELLIGENCE));
+		await settle(mounted);
+
+		assert.equal(railIsUp(mounted), false, "the rail would not go away");
+		assert.equal(
+			store.get(INTELLIGENCE_PREF_KEY),
+			"open",
+			"putting one message's rail away collapsed the rail everywhere",
+		);
+	});
+
+	// "Why?" asks about the message on screen. It is the same raise the mismatch
+	// makes, not a statement about where the reader wants the rail.
+	it("the banner's Why opens the rail without storing a preference", async () => {
+		const store = installStorage();
+
+		const [mounted] = await mount();
+		mounted.click(mounted.byLabel(HIDE_INTELLIGENCE));
+		await settle(mounted);
+
+		mounted.click(mounted.byText("button", "Why?"));
+		await settle(mounted);
+
+		assert.equal(railIsUp(mounted), true, "the banner's Why reached no rail");
+		assert.equal(
+			store.get(INTELLIGENCE_PREF_KEY),
+			"closed",
+			"a question about one message rewrote the stored preference",
+		);
+	});
+});

package/src/components/mail/intelligence-shortcut-surface.render.test.ts

@@ -25,11 +25,20 @@ import {
 	Outlet,
 	RouterProvider,
 } from "@tanstack/react-router";
-import { createElement, type ReactNode, useCallback } from "react";
+import { createElement, type ReactNode, useCallback, useState } from "react";
 import { ComposeProvider } from "@/components/compose/ComposeProvider";
-import { MailContext, type MailContextValue } from "@/lib/mail-context";
+import {
+	MailContext,
+	type MailContextValue,
+	useMailContext,
+} from "@/lib/mail-context";
 import { EMPTY_RESULT_FOLDER_INDEX } from "@/lib/result-folder";
-import { useOpenPanels, useOpenThreadPath, useSetOpenPanels } from "@/routing";
+import {
+	isOverlayPanel,
+	useOpenPanels,
+	useOpenThreadPath,
+	useSetOpenPanels,
+} from "@/routing";
 import {
 	createDomHarness,
 	type DomHarness,
@@ -91,10 +100,22 @@ afterEach(() => {
 function MailLayout({ children }: { children: ReactNode }) {
 	const openPanels = useOpenPanels();
 	const setOpenPanels = useSetOpenPanels();
-	const intelligenceOpen = openPanels.includes("intelligence");
+	// A raise is held in memory against the open message, the way the layout
+	// holds it; the address carries the reader's own answer alone.
+	const [raised, setRaised] = useState(false);
+	const intelligenceOpen = openPanels.includes("intelligence") || raised;
+	// The overlays travel through the write, the way the layout composes the
+	// whole set: a sheet up over the rail is not closed by the rail moving.
+	const overlays = openPanels.filter(isOverlayPanel);
 	const onToggleIntelligence = useCallback(() => {
-		setOpenPanels(intelligenceOpen ? [] : ["intelligence"]);
-	}, [intelligenceOpen, setOpenPanels]);
+		setRaised(false);
+		setOpenPanels(
+			intelligenceOpen ? overlays : ["intelligence" as const, ...overlays],
+		);
+	}, [intelligenceOpen, overlays, setOpenPanels]);
+	const onRaiseIntelligence = useCallback(() => {
+		setRaised(true);
+	}, []);
 
 	const value: MailContextValue = {
 		accounts: [],
@@ -109,6 +130,7 @@ function MailLayout({ children }: { children: ReactNode }) {
 		onSearchClearQuery: () => {},
 		intelligenceOpen,
 		onToggleIntelligence,
+		onRaiseIntelligence,
 	};
 	return createElement(MailContext.Provider, { value }, children);
 }
@@ -116,10 +138,10 @@ function MailLayout({ children }: { children: ReactNode }) {
 /**
  * The shell as `MailShell` mounts it: one pane carrying the phone view below
  * the reading boundary, the slots above it, and the rail's visibility taken
- * from the address the same way the layout takes it.
+ * from the layout's own answer, which is the shell's only source for it.
  */
 function Shell({ width }: { width: number }) {
-	const intelligenceOpen = useOpenPanels().includes("intelligence");
+	const { intelligenceOpen } = useMailContext();
 	if (width < 1024) {
 		return createElement(AppShellSlotted, {
 			initialWidth: width,
@@ -296,17 +318,25 @@ describe("the intelligence keys reach the surface the width has (#840)", () => {
 		);
 	});
 
-	it("writes the fragment for block sender where the rail is the surface", async () => {
+	// Block sender asks about the message on screen, so it raises the rail for
+	// that message and leaves the address alone (#778) — the surface it must
+	// reach is still the rail, which is what this width has.
+	it("raises the rail for block sender where the rail is the surface", async () => {
 		const [mounted, router] = await mountAt(RAIL_WIDTH);
 
 		await press(mounted, "b");
 
-		assert.equal(router.state.location.hash, "intelligence");
+		assert.ok(rail(mounted), "block sender reached no rail");
 		assert.equal(
 			intelligenceDrawer(mounted),
 			null,
 			"the drawer came up where the rail is the surface",
 		);
+		assert.equal(
+			router.state.location.hash,
+			"",
+			"a raise for one message was written into the address",
+		);
 	});
 });
 

package/src/hooks/search-mirror-convergence.render.test.ts

@@ -63,6 +63,7 @@ const mailContext = (input: string, committed: string): MailContextValue => ({
 	onSearchClearQuery: () => {},
 	intelligenceOpen: false,
 	onToggleIntelligence: () => {},
+	onRaiseIntelligence: () => {},
 });
 
 /**

package/src/hooks/search-mirror-detail.render.test.ts

@@ -65,6 +65,7 @@ const mailContext = (
 	onSearchClearQuery: () => {},
 	intelligenceOpen: false,
 	onToggleIntelligence: () => {},
+	onRaiseIntelligence: () => {},
 });
 
 type ListPath = "/mail/brief" | "/mail/flagged";

package/src/hooks/useIntelligenceSurface.ts

@@ -19,7 +19,11 @@ export interface IntelligenceSurface extends IntelligenceCommands {
 	closeDrawer: () => void;
 	/** Whether this width has room for the rail, so the rail is the surface. */
 	railFits: boolean;
-	/** Raise the rail if it fits and is down. The DKIM auto-open's way in. */
+	/**
+	 * Raise the rail if it fits and is down, for this thread only. The DKIM
+	 * auto-open's way in, so it never stores a preference the reader never gave
+	 * (#778).
+	 */
 	openRail: () => void;
 }
 
@@ -39,7 +43,8 @@ export interface IntelligenceCommands {
 export const useIntelligenceSurface = (
 	openThreadId: string | undefined,
 ): IntelligenceSurface => {
-	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
+	const { intelligenceOpen, onToggleIntelligence, onRaiseIntelligence } =
+		useMailContext();
 	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
 	const threadId = openThreadId ?? null;
 	const drawer = useIntelligenceDrawer(threadId);
@@ -57,8 +62,8 @@ export const useIntelligenceSurface = (
 	}, [railFits, onToggleIntelligence, toggleDrawer]);
 	const openRail = useCallback(() => {
 		if (!railFits || intelligenceOpen) return;
-		onToggleIntelligence();
-	}, [railFits, intelligenceOpen, onToggleIntelligence]);
+		onRaiseIntelligence();
+	}, [railFits, intelligenceOpen, onRaiseIntelligence]);
 	const open = useCallback(() => {
 		if (!railFits) {
 			openDrawer();

package/src/hooks/useRailPanels.ts

@@ -0,0 +1,128 @@
+/**
+ * The binding between the address, this device's stored preference and what the
+ * `/mail` shell has up: pane 4 and the one overlay that may cover it.
+ *
+ * The rail goes up two ways and they are not the same fact. The reader's own
+ * control states where they want the rail from now on, so it writes both the
+ * preference and the address. A raise — the DKIM auto-open, the authenticity
+ * banner's "Why?" — surfaces the rail for the message in front of them and is
+ * held here, in memory, against that message: it never writes the preference,
+ * and opening anything else ends it. One message signed by the wrong domain used
+ * to mean the rail was up for every later thread and every later session (#778).
+ *
+ * The raise stays out of the address because its whole copy is computed from the
+ * open message — reload the URL and the mismatch raises it again on its own, so
+ * putting it in the fragment would be a second owner of a fact the message
+ * already holds (`docs/architecture/url-state.md`, R6).
+ */
+import { useCallback, useState } from "react";
+import { useLayoutTier } from "@/hooks/useLayoutTier";
+import {
+	readIntelligencePref,
+	resolveRailOpen,
+	writeIntelligencePref,
+} from "@/lib/intelligence-pref";
+import {
+	isOverlayPanel,
+	type OverlayPanel,
+	useOpenPanels,
+	useOpenThreadPath,
+	useSetOpenPanels,
+} from "@/routing";
+
+export interface RailPanels {
+	/** The overlay the address holds: the nav slide-over or the shortcuts sheet. */
+	openOverlay: OverlayPanel | undefined;
+	/** Whether pane 4 is up, by the reader's standing answer or a raise. */
+	intelligenceOpen: boolean;
+	showOverlay: (overlay: OverlayPanel | undefined) => void;
+	/**
+	 * The reader's own control, which is what a stored preference is made of —
+	 * except over a rail only a raise has up, where it ends the raise and stores
+	 * nothing.
+	 */
+	toggleIntelligence: () => void;
+	/** Puts the rail up for the message in front of the reader, and no further. */
+	raiseIntelligence: () => void;
+}
+
+export const useRailPanels = (): RailPanels => {
+	const tier = useLayoutTier();
+	// The panels the address carries (#722): the intelligence rail, the nav
+	// slide-over and the shortcuts sheet. The rail is a pane and the other two
+	// cover it, so the address holds a pane and an overlay at once — a sheet
+	// opening never takes the rail down — while two overlays cannot both be up.
+	const openPanels = useOpenPanels();
+	const setOpenPanels = useSetOpenPanels();
+	const openOverlay = openPanels.find(isOverlayPanel);
+	// Pane 4 on desktop, the details drawer below it. `resolveRailOpen` is the
+	// one place the address and the stored preference meet: the address decides
+	// whenever it says anything at all, and the preference opens the rail with
+	// the thread where it is silent (#782).
+	const openThread = useOpenThreadPath();
+	// Held in state, not read back from storage each render: closing the rail
+	// where the address is silent changes nothing about the address, and the
+	// answer has to move anyway.
+	const [prefersRail, setPrefersRail] = useState(readIntelligencePref);
+	// The message a raise belongs to. Naming it by address is what ends the raise
+	// when the reader opens anything else, without a teardown that has to run.
+	const openMessage = openThread
+		? `${openThread.threadId}/${openThread.messageId ?? ""}`
+		: null;
+	const [raisedFor, setRaisedFor] = useState<string | null>(null);
+	const visibility = {
+		panels: openPanels,
+		prefersOpen: prefersRail,
+		isDesktop: tier === "desktop",
+		hasThread: openThread !== undefined,
+		openMessage,
+	};
+	const intelligenceOpen = resolveRailOpen({ ...visibility, raisedFor });
+	// What the reader themselves have the rail at, which is what an address write
+	// states. A raise is left out of it on purpose: a sheet opening over a
+	// surfaced rail must not write that rail into the address as a choice.
+	const chosenOpen = resolveRailOpen({ ...visibility, raisedFor: null });
+	// Every write states the whole set, because it is composed from what is
+	// showing rather than from what the address happens to spell: the rail open
+	// by preference alone is still open, and an overlay must not close it.
+	const showPanels = useCallback(
+		(rail: boolean, overlay: OverlayPanel | undefined) => {
+			setOpenPanels([
+				...(rail ? (["intelligence"] as const) : []),
+				...(overlay ? [overlay] : []),
+			]);
+		},
+		[setOpenPanels],
+	);
+	const showOverlay = useCallback(
+		(overlay: OverlayPanel | undefined) => {
+			showPanels(chosenOpen, overlay);
+		},
+		[chosenOpen, showPanels],
+	);
+	const toggleIntelligence = useCallback(() => {
+		// Putting away a rail that only a raise has up answers the surfacing, not
+		// the question of where the reader wants the rail — the answer they gave
+		// last stands, and the address never carried this rail to rewrite.
+		if (intelligenceOpen && !chosenOpen) {
+			setRaisedFor(null);
+			return;
+		}
+		const open = !intelligenceOpen;
+		writeIntelligencePref(open);
+		setPrefersRail(open);
+		setRaisedFor(null);
+		showPanels(open, openOverlay);
+	}, [chosenOpen, intelligenceOpen, openOverlay, showPanels]);
+	const raiseIntelligence = useCallback(() => {
+		setRaisedFor(openMessage);
+	}, [openMessage]);
+
+	return {
+		openOverlay,
+		intelligenceOpen,
+		showOverlay,
+		toggleIntelligence,
+		raiseIntelligence,
+	};
+};

package/src/lib/intelligence-pref.test.ts

@@ -58,7 +58,10 @@ describe("intelligence-pref (#782)", () => {
 });
 
 describe("resolveRailOpen (#722)", () => {
-	const withThread = { hasThread: true, isDesktop: true };
+	const OPEN_MESSAGE = "thread-1/msg-1";
+	// No raise live, and a message on screen for one to be measured against.
+	const unraised = { raisedFor: null, openMessage: OPEN_MESSAGE };
+	const withThread = { hasThread: true, isDesktop: true, ...unraised };
 
 	it("opens the rail with the thread where the address says nothing", () => {
 		assert.equal(
@@ -81,6 +84,7 @@ describe("resolveRailOpen (#722)", () => {
 				prefersOpen: true,
 				isDesktop: false,
 				hasThread: true,
+				...unraised,
 			}),
 			false,
 		);
@@ -94,6 +98,7 @@ describe("resolveRailOpen (#722)", () => {
 				prefersOpen: true,
 				isDesktop: true,
 				hasThread: false,
+				...unraised,
 			}),
 			false,
 		);
@@ -127,6 +132,68 @@ describe("resolveRailOpen (#722)", () => {
 				prefersOpen: false,
 				isDesktop: false,
 				hasThread: true,
+				...unraised,
+			}),
+			true,
+		);
+	});
+});
+
+/**
+ * A DKIM mismatch, or the banner's "Why?", puts the rail up for the message the
+ * reader is looking at. It is measured against that message rather than stored,
+ * so it reaches neither the address nor the preference, and the next thread the
+ * reader opens is not carrying it (#778).
+ */
+describe("a raised rail belongs to its message (#778)", () => {
+	const OPEN_MESSAGE = "thread-1/msg-1";
+	const collapsed = {
+		hasThread: true,
+		isDesktop: true,
+		panels: [] as const,
+		prefersOpen: false,
+	};
+
+	it("puts the rail up over a collapse for the message it was raised for", () => {
+		assert.equal(
+			resolveRailOpen({
+				...collapsed,
+				raisedFor: OPEN_MESSAGE,
+				openMessage: OPEN_MESSAGE,
+			}),
+			true,
+		);
+	});
+
+	it("ends with the message, so the next thread opens as the reader left it", () => {
+		assert.equal(
+			resolveRailOpen({
+				...collapsed,
+				raisedFor: OPEN_MESSAGE,
+				openMessage: "thread-2/msg-2",
+			}),
+			false,
+		);
+		assert.equal(
+			resolveRailOpen({
+				...collapsed,
+				hasThread: false,
+				raisedFor: OPEN_MESSAGE,
+				openMessage: null,
+			}),
+			false,
+		);
+	});
+
+	// The reader is being shown something about the message in front of them, so
+	// a link that named other panels does not get to suppress it.
+	it("surfaces over an address that named another panel", () => {
+		assert.equal(
+			resolveRailOpen({
+				...collapsed,
+				panels: ["shortcuts"],
+				raisedFor: OPEN_MESSAGE,
+				openMessage: OPEN_MESSAGE,
 			}),
 			true,
 		);

package/src/lib/intelligence-pref.ts

@@ -34,24 +34,38 @@ export interface RailVisibility {
 	isDesktop: boolean;
 	/** The rail reads a conversation, so with none open there is nothing to be up. */
 	hasThread: boolean;
+	/** The message a transient raise was made for, if one is live. */
+	raisedFor: string | null;
+	/** The message on screen, which is what a raise is measured against. */
+	openMessage: string | null;
 }
 
 /**
  * Whether the rail is up.
  *
- * An address that names any panel is the only owner of what is open, so a
- * shared link showing the shortcuts sheet is not overwritten by the recipient's
- * own preference. The preference speaks only where the address is silent, and
- * only with a conversation open on the tier that has a rail — it opens with the
- * thread there (#782), while a phone would get a full-screen drawer over a
- * message nobody asked to cover.
+ * A raise answers first, and only for the message it was made for: a DKIM
+ * mismatch or the banner's "Why?" surfaces the rail over a collapse, because
+ * the reader is being shown something about what is in front of them — and
+ * opening anything else ends it, so one mismatched signature is not the chrome
+ * of the whole session (#778). It is measured rather than stored, which is why
+ * it never reaches the address or the preference.
+ *
+ * Otherwise an address that names any panel is the only owner of what is open,
+ * so a shared link showing the shortcuts sheet is not overwritten by the
+ * recipient's own preference. The preference speaks only where the address is
+ * silent, and only with a conversation open on the tier that has a rail — it
+ * opens with the thread there (#782), while a phone would get a full-screen
+ * drawer over a message nobody asked to cover.
  */
 export function resolveRailOpen({
 	panels,
 	prefersOpen,
 	isDesktop,
 	hasThread,
+	raisedFor,
+	openMessage,
 }: RailVisibility): boolean {
+	if (raisedFor !== null && raisedFor === openMessage) return true;
 	if (panels.length > 0) return panels.includes("intelligence");
 	return isDesktop && hasThread && prefersOpen;
 }

package/src/lib/mail-context.ts

@@ -54,7 +54,14 @@ export interface MailContextValue {
 	 * alone would lose the preference and disagree with the shell.
 	 */
 	intelligenceOpen: boolean;
+	/** The reader's own control over pane 4, which stores what they chose. */
 	onToggleIntelligence: () => void;
+	/**
+	 * Puts pane 4 up for the thread in hand without touching the stored
+	 * preference: a DKIM mismatch surfacing the rail is about this message, not
+	 * about where the reader wants the rail from now on (#778).
+	 */
+	onRaiseIntelligence: () => void;
 }
 
 export const MailContext = createContext<MailContextValue | null>(null);
@@ -78,6 +85,7 @@ export const useMailContext = (): MailContextValue => {
 			onSearchClearQuery: () => {},
 			intelligenceOpen: false,
 			onToggleIntelligence: () => {},
+			onRaiseIntelligence: () => {},
 		}
 	);
 };

package/src/routes/mail.tsx

@@ -10,7 +10,7 @@ import {
 	useNavigate,
 	useRouterState,
 } from "@tanstack/react-router";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { z } from "zod";
 import { ComposeFab } from "@/components/layout/ComposeFab";
 import { MailShellProvider } from "@/components/layout/MailShell";
@@ -21,28 +21,16 @@ import { KeyboardShortcutsModal } from "@/components/ui/KeyboardShortcutsModal";
 import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
 import { isSinglePaneTier, useLayoutTier } from "@/hooks/useLayoutTier";
 import { useMailboxNameIndex } from "@/hooks/useMailboxNameIndex";
+import { useRailPanels } from "@/hooks/useRailPanels";
 import { useResultFolderIndex } from "@/hooks/useResultFolderIndex";
 import { useSearchField } from "@/hooks/useSearchField";
 import { useStaleAccountSync } from "@/hooks/useStaleAccountSync";
-import {
-	readIntelligencePref,
-	resolveRailOpen,
-	writeIntelligencePref,
-} from "@/lib/intelligence-pref";
 import { MailContext } from "@/lib/mail-context";
 import { MailFreshnessProvider } from "@/lib/mail-freshness";
 import { mailListRoute } from "@/lib/mail-route";
 import { buildAccountNameIndex } from "@/lib/search-token-index";
 import { wizardEntryValue, wizardStepValue } from "@/lib/wizard-history";
-import {
-	isOverlayPanel,
-	type OverlayPanel,
-	useIsComposing,
-	useOpenCompose,
-	useOpenPanels,
-	useOpenThreadPath,
-	useSetOpenPanels,
-} from "@/routing";
+import { useIsComposing, useOpenCompose } from "@/routing";
 import "@/lib/client";
 
 // `MailContext` / `useMailContext` live in `@/lib/mail-context` so the provider
@@ -87,56 +75,18 @@ function MailLayout() {
 	// tablet with no compose surface (compose lives in the reading pane, which
 	// tablet doesn't mount) — the "c" shortcut / FAB opened nothing.
 	const isSinglePane = isSinglePaneTier(tier);
-	// The panels the address carries (#722): the intelligence rail, the nav
-	// slide-over and the shortcuts sheet. The rail is a pane and the other two
-	// cover it, so the address holds a pane and an overlay at once — a sheet
-	// opening never takes the rail down — while two overlays cannot both be up.
-	const openPanels = useOpenPanels();
-	const setOpenPanels = useSetOpenPanels();
-	const openOverlay = openPanels.find(isOverlayPanel);
+	// What the address, the stored preference and the two rail verbs come to
+	// (`hooks/useRailPanels`): a raise surfaces the rail for the thread in hand,
+	// the reader's own toggle is the one that stores where they want it (#778).
+	const {
+		openOverlay,
+		intelligenceOpen,
+		showOverlay,
+		toggleIntelligence,
+		raiseIntelligence,
+	} = useRailPanels();
 	const showShortcuts = openOverlay === "shortcuts";
 	const drawerOpen = openOverlay === "nav";
-	// Pane 4 on desktop, the details drawer below it. `resolveRailOpen` is the
-	// one place the address and the stored preference meet: the address decides
-	// whenever it says anything at all, and the preference opens the rail with
-	// the thread where it is silent (#782).
-	const openThread = useOpenThreadPath();
-	// Held in state, not read back from storage each render: closing the rail
-	// where the address is silent changes nothing about the address, and the
-	// answer has to move anyway.
-	const [prefersRail, setPrefersRail] = useState(readIntelligencePref);
-	const intelligenceOpen = resolveRailOpen({
-		panels: openPanels,
-		prefersOpen: prefersRail,
-		isDesktop: tier === "desktop",
-		hasThread: openThread !== undefined,
-	});
-	// Every write states the whole set, because it is composed from what is
-	// showing rather than from what the address happens to spell: the rail open
-	// by preference alone is still open, and an overlay must not close it.
-	const showPanels = useCallback(
-		(rail: boolean, overlay: OverlayPanel | undefined) => {
-			setOpenPanels([
-				...(rail ? (["intelligence"] as const) : []),
-				...(overlay ? [overlay] : []),
-			]);
-		},
-		[setOpenPanels],
-	);
-	const handleSetIntelligenceOpen = useCallback(
-		(open: boolean) => {
-			writeIntelligencePref(open);
-			setPrefersRail(open);
-			showPanels(open, openOverlay);
-		},
-		[openOverlay, showPanels],
-	);
-	const showOverlay = useCallback(
-		(overlay: OverlayPanel | undefined) => {
-			showPanels(intelligenceOpen, overlay);
-		},
-		[intelligenceOpen, showPanels],
-	);
 
 	// The one search field and the query it commits (`useSearchField`): seeded
 	// from the URL, mirrored back by each list route's own `useSearchMirror`,
@@ -210,10 +160,6 @@ function MailLayout() {
 		setSearchInput("");
 	}, [setSearchInput]);
 
-	const handleToggleIntelligence = useCallback(() => {
-		handleSetIntelligenceOpen(!intelligenceOpen);
-	}, [handleSetIntelligenceOpen, intelligenceOpen]);
-
 	const accounts = config?.accounts ?? [];
 	const accountIds = useMemo(
 		() => accounts.map((account) => account.accountId),
@@ -253,7 +199,8 @@ function MailLayout() {
 		onSearchClear: handleSearchClear,
 		onSearchClearQuery: handleSearchClearQuery,
 		intelligenceOpen,
-		onToggleIntelligence: handleToggleIntelligence,
+		onToggleIntelligence: toggleIntelligence,
+		onRaiseIntelligence: raiseIntelligence,
 	};
 
 	// Single nav node: the kit renders it as a pane (≥1024px) or inside its