@remit/web-client 0.0.173 → 0.0.175

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.173",
+  "version": "0.0.175",
   "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/compose/ComposeForm.tsx

@@ -40,6 +40,7 @@ import {
 import { useMessageBodyContent } from "../../hooks/useMessageBodyContent";
 import { useSaveDraft } from "../../hooks/useSaveDraft";
 import { useSignature } from "../../hooks/useSignature.js";
+import { softErrorMeta } from "../../lib/error-classifier";
 import { accountIsMissingSmtp } from "../settings/account-form-helpers.js";
 import { useErrorBanners } from "../ui/ErrorBannerProvider.js";
 import {
@@ -212,6 +213,17 @@ type SendReadiness =
 	| { status: "blocked"; reason: string }
 	| { status: "ready"; accountId: string };
 
+/**
+ * Naming To, not "a recipient". Sending goes through the draft, and a draft is
+ * created against `CreateOutboxMessageInput`, whose `@minItems(1)` is on
+ * `toAddresses` alone — so a message addressed only in Cc has a recipient and
+ * still cannot be sent from here, and being told to add one it can already see
+ * leaves it with nothing to do. The server's own send guard counts Cc and Bcc,
+ * because a Bcc-only envelope is real mail; it is answering whether the message
+ * has anywhere to go, which is not the question this one asks.
+ */
+const NO_TO_ADDRESS_MESSAGE = "Add a To address before sending.";
+
 const isFormEmpty = (
 	toAddresses: AddressEntry[],
 	ccAddresses: AddressEntry[],
@@ -536,7 +548,7 @@ export const ComposeForm = ({
 		[onDraftCreated],
 	);
 
-	const { saveStatus, saveError, saveDraft, saveImmediately, stopAutoSave } =
+	const { saveState, saveError, saveDraft, saveImmediately, stopAutoSave } =
 		useSaveDraft({
 			outboxMessageId,
 			onDraftCreated: adoptCreatedDraft,
@@ -555,12 +567,17 @@ export const ComposeForm = ({
 		});
 	}, [saveError, pushError]);
 
-	const sendMutation = useMutation(
-		outboxDetailOperationsSendOutboxMessageMutation(),
-	);
+	// A refused send is reported below, next to the message it did not send, and
+	// the composer stays up so the user can fix the address and press it again.
+	// A 5xx still escalates.
+	const sendMutation = useMutation({
+		...outboxDetailOperationsSendOutboxMessageMutation(),
+		meta: softErrorMeta,
+	});
 
 	const deleteMutation = useMutation({
 		...outboxDetailOperationsDeleteOutboxMessageMutation(),
+		meta: softErrorMeta,
 		onError: (error) => {
 			// Discard closes the dialog optimistically. A soft 4xx (409/404 the
 			// draft is already gone) must not pass silently as success — surface a
@@ -621,7 +638,7 @@ export const ComposeForm = ({
 			return { status: "blocked", reason: SMTP_MISSING_MESSAGE };
 		}
 		if (toAddresses.length === 0) {
-			return { status: "blocked", reason: "Add at least one recipient." };
+			return { status: "blocked", reason: NO_TO_ADDRESS_MESSAGE };
 		}
 		return { status: "ready", accountId: selectedAccountId };
 	}, [
@@ -864,7 +881,7 @@ export const ComposeForm = ({
 					onSend={attemptSend}
 					onBlocked={reportBlocked}
 					onDiscard={handleDiscard}
-					saveStatus={saveStatus}
+					save={saveState}
 				/>
 			}
 		>

package/src/components/compose/forward-autosave-is-not-fatal.render.test.ts

@@ -0,0 +1,357 @@
+/**
+ * Forward opens with a subject and a quote and deliberately no recipient. The
+ * autosave gate only skips a form that is blank everywhere, so the seeded
+ * subject used to fire a create — and a create carries `@minItems(1)` on
+ * `toAddresses`, so the server refused it 400. That refusal then went to the
+ * full-screen fatal page, which unmounts the composer and takes the message
+ * with it: the one failure mode a composer must never have.
+ *
+ * Both halves are held here. The invalid request is not made at all while the
+ * draft has no recipient to create it with — and the composer says so, because
+ * a message being held unsaved in silence is the same loss with the noise taken
+ * out. A write that does fail lands in a banner beside the message rather than
+ * over it. A 5xx and a 401 keep their own rules.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapAccountResponse,
+	RemitImapDescribeMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	RouterContextProvider,
+} from "@tanstack/react-router";
+import { createElement, Fragment, useState } from "react";
+import { __resetFatalError } from "../../lib/fatal-error";
+import {
+	handleMutationCacheError,
+	handleQueryCacheError,
+} from "../../lib/query-error-handler";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, httpError, mockFetch } from "../../test-support/http";
+import { FatalErrorOverlay } from "../ui/FatalErrorOverlay";
+import { ComposeForm } from "./ComposeForm";
+import { ComposeProvider } from "./ComposeProvider";
+
+const ACCOUNT_ID = "acc-1";
+const OUTBOX_MESSAGE_ID = "ob-fwd";
+const AUTOSAVE_DEBOUNCE_MS = 2000;
+
+const account = {
+	accountId: ACCOUNT_ID,
+	email: "me@example.com",
+	smtpEnabled: true,
+} as unknown as RemitImapAccountResponse;
+
+const sourceMessage = {
+	message: { messageId: "msg-1" },
+	envelope: {
+		subject: "Lunch",
+		messageIdValue: "<m1@example.com>",
+		from: [{ normalizedEmail: "them@example.com", displayName: "Them" }],
+		replyTo: [],
+		to: [],
+		cc: [],
+	},
+	references: [],
+	bodyParts: [],
+} as unknown as RemitImapDescribeMessageResponse;
+
+const outboxEntry = () => ({
+	outboxMessageId: OUTBOX_MESSAGE_ID,
+	accountId: ACCOUNT_ID,
+	fromAddress: account.email,
+	toAddresses: ["them@example.com"],
+	ccAddresses: [],
+	bccAddresses: [],
+	references: [],
+	subject: "Fwd: Lunch",
+	textBody: "here you go",
+	status: "draft",
+});
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	__resetFatalError();
+});
+
+const creates = () =>
+	(http?.calls ?? []).filter(
+		(call) => call.method === "POST" && call.path.endsWith("/outbox"),
+	);
+
+const patches = () =>
+	(http?.calls ?? []).filter((call) => call.method === "PATCH");
+
+const sends = () =>
+	(http?.calls ?? []).filter((call) => call.path.endsWith("/send"));
+
+const fatalOverlay = () =>
+	harness?.query('[data-testid="fatal-error-overlay"]') ?? null;
+
+const bannerAlerts = () =>
+	harness?.queryAll('[aria-label="Notifications"] [role="alert"]') ?? [];
+
+// The draft the composer is on is its owner's to hand it — here, the test's.
+const Opened = ({ outboxMessageId }: { outboxMessageId?: string }) => {
+	const [draftId, setDraftId] = useState(outboxMessageId);
+
+	return createElement(ComposeForm, {
+		mode: "forward",
+		account,
+		sourceMessage,
+		outboxMessageId: draftId,
+		onDraftCreated: setDraftId,
+		onClose: () => {},
+	});
+};
+
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const rootRoute = createRootRoute();
+const mailboxRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: "/mail/$mailboxId",
+	validateSearch: (search: Record<string, unknown>) => search,
+});
+
+const testRouter = (): AnyRouter =>
+	createRouter({
+		routeTree: rootRoute.addChildren([mailboxRoute]),
+		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
+	}) as unknown as AnyRouter;
+
+interface MountOptions {
+	/** The draft compose opens on, when the user is resuming one. */
+	outboxMessageId?: string;
+	/** The status every PATCH answers with, when it is to fail. */
+	patchStatus?: number;
+}
+
+/**
+ * The stub holds the constraint the API holds: a create with no recipient is
+ * refused, in the words the backend's schema validation uses.
+ */
+const mount = async (options: MountOptions = {}): Promise<void> => {
+	http = mockFetch(async (call) => {
+		if (call.path.endsWith("/config")) return { accounts: [account] };
+
+		if (call.method === "POST" && call.path.endsWith("/outbox")) {
+			const to = call.body?.toAddresses;
+			if (!Array.isArray(to) || to.length === 0) {
+				return httpError(
+					400,
+					"body/requestBody/toAddresses must NOT have fewer than 1 items",
+				);
+			}
+			return outboxEntry();
+		}
+
+		if (call.method === "PATCH") {
+			if (options.patchStatus) {
+				return httpError(options.patchStatus, "the draft moved on");
+			}
+			return outboxEntry();
+		}
+
+		return outboxEntry();
+	});
+
+	const queryClient = new QueryClient({
+		queryCache: new QueryCache({ onError: handleQueryCacheError }),
+		mutationCache: new MutationCache({ onError: handleMutationCacheError }),
+		defaultOptions: {
+			queries: { retry: false },
+			mutations: { retry: false },
+		},
+	});
+
+	harness = createDomHarness({ queryClient });
+	harness.renderApp(
+		createElement(
+			Fragment,
+			null,
+			createElement(FatalErrorOverlay),
+			createElement(RouterContextProvider, {
+				router: testRouter(),
+				// biome-ignore lint/correctness/noChildrenProp: RouterContextProvider types `children` as a required prop, which createElement's rest-argument form does not satisfy
+				children: createElement(
+					ComposeProvider,
+					null,
+					createElement(Opened, { outboxMessageId: options.outboxMessageId }),
+				),
+			}),
+		),
+	);
+	await harness.flush();
+	await harness.wait(50);
+};
+
+const subjectField = (): HTMLInputElement => {
+	const field = harness?.query<HTMLInputElement>("[data-subject-field]");
+	if (!field) throw new Error("the compose subject field is not mounted");
+	return field;
+};
+
+const recipientField = (): HTMLInputElement => {
+	const field = harness?.query<HTMLInputElement>("#address-field-To");
+	if (!field) throw new Error("the compose recipient field is not mounted");
+	return field;
+};
+
+const addRecipient = async (email: string): Promise<void> => {
+	harness?.type(recipientField(), email);
+	harness?.dispatch(
+		recipientField(),
+		new (
+			harness.window as unknown as { KeyboardEvent: typeof KeyboardEvent }
+		).KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+	);
+	await harness?.flush();
+};
+
+describe("a forwarded message and the draft it cannot create yet", () => {
+	it("attempts no create while the forward has no recipient", async () => {
+		await mount();
+
+		assert.equal(
+			subjectField().value,
+			"Fwd: Lunch",
+			"the forward seeded its subject, so the form is not blank",
+		);
+
+		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 300);
+
+		assert.equal(creates().length, 0, "no create was attempted");
+		assert.equal(fatalOverlay(), null, "the composer stayed on screen");
+		assert.equal(bannerAlerts().length, 0, "nothing was raised as a failure");
+	});
+
+	it("says the draft is not being saved, and what would make it save", async () => {
+		await mount();
+
+		harness?.type(subjectField(), "Fwd: Lunch and the three paragraphs after");
+		await harness?.flush();
+
+		const indicator = harness?.byText("output", "Not saved");
+		assert.match(
+			indicator?.textContent ?? "",
+			/add a To address/i,
+			"the composer names the field the create schema actually requires",
+		);
+
+		await addRecipient("them@example.com");
+		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 300);
+
+		assert.equal(creates().length, 1, "the held content was written");
+		assert.equal(
+			creates()[0]?.body?.subject,
+			"Fwd: Lunch and the three paragraphs after",
+			"including everything typed while it was held",
+		);
+		assert.match(harness?.text() ?? "", /Draft saved/);
+	});
+
+	it("creates the draft, with everything the forward seeded, once a recipient is there", async () => {
+		await mount();
+		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 300);
+
+		await addRecipient("them@example.com");
+		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 300);
+
+		const created = creates();
+		assert.equal(created.length, 1, "the draft was created once");
+		assert.deepEqual(created[0]?.body?.toAddresses, ["them@example.com"]);
+		assert.equal(created[0]?.body?.subject, "Fwd: Lunch");
+		assert.equal(fatalOverlay(), null, "the composer stayed on screen");
+	});
+
+	it("refuses to send a forward that has no recipient, and says why", async () => {
+		await mount();
+
+		const send = harness?.byText("button", "Send");
+		if (!send) throw new Error("the send button is not mounted");
+		harness?.click(send);
+		await harness?.flush();
+		await harness?.wait(100);
+
+		assert.match(harness?.text() ?? "", /Add a To address before sending/);
+		assert.equal(creates().length, 0, "nothing was created");
+		assert.equal(sends().length, 0, "nothing was sent");
+	});
+
+	it("drops the held sentence the moment the To address arrives", async () => {
+		await mount();
+
+		harness?.type(subjectField(), "Fwd: Lunch and the three paragraphs after");
+		await harness?.flush();
+		assert.match(harness?.text() ?? "", /Not saved/);
+
+		await addRecipient("them@example.com");
+
+		// Before the debounce, not after it: the sentence stopped being true the
+		// moment the address landed, and standing for another two seconds tells
+		// the user their draft is being dropped when it is on its way.
+		assert.doesNotMatch(
+			harness?.text() ?? "",
+			/Not saved/,
+			"a reason that no longer holds is off screen at once",
+		);
+	});
+});
+
+describe("a failed autosave and the message it is holding", () => {
+	it("banners a refused write and leaves the composer and its text alone", async () => {
+		await mount({ outboxMessageId: OUTBOX_MESSAGE_ID, patchStatus: 409 });
+
+		harness?.type(subjectField(), "Fwd: Lunch on Thursday");
+		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 300);
+
+		assert.ok(patches().length > 0, "the write was attempted");
+		assert.equal(
+			fatalOverlay(),
+			null,
+			"a refused autosave must not take the composer down",
+		);
+		assert.match(harness?.text() ?? "", /Couldn't save draft/);
+		assert.equal(
+			subjectField().value,
+			"Fwd: Lunch on Thursday",
+			"what was written is still on screen",
+		);
+	});
+
+	it("escalates a 401 — a dismissible banner is no way back in", async () => {
+		await mount({ outboxMessageId: OUTBOX_MESSAGE_ID, patchStatus: 401 });
+
+		harness?.type(subjectField(), "Fwd: Lunch on Thursday");
+		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 300);
+
+		assert.ok(
+			fatalOverlay(),
+			"a signed-out session must reach the page that signs back in",
+		);
+	});
+
+	it("still escalates a 5xx from the same write", async () => {
+		await mount({ outboxMessageId: OUTBOX_MESSAGE_ID, patchStatus: 500 });
+
+		harness?.type(subjectField(), "Fwd: Lunch on Thursday");
+		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 300);
+
+		assert.ok(fatalOverlay(), "our API answering 'I'm broken' is never soft");
+	});
+});

package/src/components/mail/BriefPane.tsx

@@ -31,6 +31,7 @@ import { IntelligencePane } from "@/components/mail/IntelligencePane";
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
 import type { OpenMessageOptions } from "@/components/mail/ThreadListInteraction";
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
+import { useIntelligenceDrawer } from "@/hooks/useIntelligenceDrawer";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
 import { useThreadRow } from "@/hooks/useThreadRow";
@@ -408,7 +409,7 @@ function BriefPhone() {
 		previousThread,
 		handleDeselectIfRemoved,
 	} = useBriefPane();
-	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
+	const drawer = useIntelligenceDrawer(conversation?.threadId ?? null);
 
 	if (conversation) {
 		return (
@@ -420,21 +421,21 @@ function BriefPhone() {
 					selectedMessageId={conversation.messageId}
 					authenticity={conversation.authenticity}
 					onBack={onCloseThread}
-					onOpenIntelligence={onToggleIntelligence}
+					onOpenIntelligence={drawer.toggle}
 					onSwipeNext={nextThread ? () => onOpenThread(nextThread) : undefined}
 					onSwipePrevious={
 						previousThread ? () => onOpenThread(previousThread) : undefined
 					}
-					mobileIntelligenceOpen={intelligenceOpen}
+					mobileIntelligenceOpen={drawer.isOpen}
 				/>
 				<Drawer
-					isOpen={intelligenceOpen}
-					onClose={onToggleIntelligence}
+					isOpen={drawer.isOpen}
+					onClose={drawer.close}
 					ariaLabel="Message details"
 					side="right"
 				>
 					<IntelligencePane
-						onClose={onToggleIntelligence}
+						onClose={drawer.close}
 						thread={selectedThread}
 						mailboxId={selectedThread?.mailboxId}
 						accountId={selectedThread?.accountId}

package/src/components/mail/FlaggedPane.tsx

@@ -41,6 +41,7 @@ import { IntelligencePane } from "@/components/mail/IntelligencePane";
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
 import type { OpenMessageOptions } from "@/components/mail/ThreadListInteraction";
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
+import { useIntelligenceDrawer } from "@/hooks/useIntelligenceDrawer";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { useStarredThreads } from "@/hooks/useStarredThreads";
 import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
@@ -409,7 +410,7 @@ function FlaggedPhone() {
 		previousThread,
 		handleDeselectIfRemoved,
 	} = useFlaggedPane();
-	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
+	const drawer = useIntelligenceDrawer(conversation?.threadId ?? null);
 
 	if (conversation) {
 		return (
@@ -421,21 +422,21 @@ function FlaggedPhone() {
 					selectedMessageId={conversation.messageId}
 					authenticity={conversation.authenticity}
 					onBack={onCloseThread}
-					onOpenIntelligence={onToggleIntelligence}
+					onOpenIntelligence={drawer.toggle}
 					onSwipeNext={nextThread ? () => onOpenThread(nextThread) : undefined}
 					onSwipePrevious={
 						previousThread ? () => onOpenThread(previousThread) : undefined
 					}
-					mobileIntelligenceOpen={intelligenceOpen}
+					mobileIntelligenceOpen={drawer.isOpen}
 				/>
 				<Drawer
-					isOpen={intelligenceOpen}
-					onClose={onToggleIntelligence}
+					isOpen={drawer.isOpen}
+					onClose={drawer.close}
 					ariaLabel="Message details"
 					side="right"
 				>
 					<IntelligencePane
-						onClose={onToggleIntelligence}
+						onClose={drawer.close}
 						thread={selectedThread}
 						mailboxId={selectedThread?.mailboxId}
 						accountId={selectedThread?.accountId}

package/src/components/mail/MailboxPane.tsx

@@ -72,6 +72,7 @@ import {
 } from "@/hooks/useDeleteMessages";
 import type { EscalationSearchQuery } from "@/hooks/useEscalatedActions";
 import { useIntelligenceData } from "@/hooks/useIntelligenceData";
+import { useIntelligenceDrawer } from "@/hooks/useIntelligenceDrawer";
 import { useLayoutTier } from "@/hooks/useLayoutTier";
 import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
@@ -507,23 +508,6 @@ function MailboxPaneProvider({
 	const focusedThread =
 		threads.find((t) => t.messageId === triageFocusedId) ?? selectedThread;
 
-	// Auto-open intelligence pane on DKIM mismatch.
-	const autoOpenedForRef = useRef<string | null>(null);
-	useEffect(() => {
-		const id = selectedThread?.messageId ?? null;
-		if (!id) return;
-		if (autoOpenedForRef.current === id) return;
-		if (selectedThread?.authenticity?.dkimMismatch) {
-			autoOpenedForRef.current = id;
-			if (!intelligenceOpen) onToggleIntelligence();
-		}
-	}, [
-		selectedThread?.messageId,
-		selectedThread?.authenticity?.dkimMismatch,
-		intelligenceOpen,
-		onToggleIntelligence,
-	]);
-
 	// The mailbox's own unseen total. A count over the loaded pages undercounts
 	// every mailbox larger than one page and creeps upward as the user scrolls,
 	// so there is no fallback: until the mailbox resolves there is no number.
@@ -1085,41 +1069,41 @@ function MailboxReading() {
 	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
 	const hasThread = Boolean(conversation);
 
-	// 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 rail opens itself on a DKIM mismatch. It lives here, behind the rail's
+	// own width gate, because raising it writes `#intelligence` into the address
+	// — and a panel the address names with no renderer behind it is a panel that
+	// opens nothing (`docs/architecture/url-state.md`, R6). Below this width the
+	// banner is the announcement and its "Why?" is the way in.
+	const autoOpenedForRef = useRef<string | null>(null);
+	useEffect(() => {
+		if (!railFits) return;
+		const id = selectedThread?.messageId ?? null;
+		if (!id) return;
+		if (autoOpenedForRef.current === id) return;
+		if (!selectedThread?.authenticity?.dkimMismatch) return;
+		autoOpenedForRef.current = id;
+		if (!intelligenceOpen) onToggleIntelligence();
+	}, [
+		railFits,
+		selectedThread?.messageId,
+		selectedThread?.authenticity?.dkimMismatch,
+		intelligenceOpen,
+		onToggleIntelligence,
+	]);
+
+	const drawer = useIntelligenceDrawer(conversation?.threadId ?? null);
+	const drawerOpen = !railFits && drawer.isOpen;
+	const closeIntelligenceDrawer = drawer.close;
+	const openIntelligence = railFits ? onToggleIntelligence : drawer.open;
 	// The toolbar's control, which toggles whichever surface this width has.
+	const { toggle: toggleDrawer } = drawer;
 	const toggleIntelligence = useCallback(() => {
 		if (railFits) {
 			onToggleIntelligence();
 			return;
 		}
-		setDrawerThreadId(drawerOpen ? null : openThreadId);
-	}, [railFits, onToggleIntelligence, drawerOpen, openThreadId]);
+		toggleDrawer();
+	}, [railFits, onToggleIntelligence, toggleDrawer]);
 	const intelligenceShowing =
 		hasThread && (railFits ? intelligenceOpen : drawerOpen);
 
@@ -1219,13 +1203,12 @@ function MailboxPhone() {
 		selectedThread,
 		conversation,
 		onOpenThread,
-		intelligenceOpen,
-		onToggleIntelligence,
 		onBack,
 		nextThread,
 		previousThread,
 		handleDeselectIfRemoved,
 	} = useMailboxPane();
+	const drawer = useIntelligenceDrawer(conversation?.threadId ?? null);
 
 	if (conversation) {
 		return (
@@ -1237,21 +1220,21 @@ function MailboxPhone() {
 					selectedMessageId={conversation.messageId}
 					authenticity={conversation.authenticity}
 					onBack={onBack}
-					onOpenIntelligence={onToggleIntelligence}
+					onOpenIntelligence={drawer.toggle}
 					onSwipeNext={nextThread ? () => onOpenThread(nextThread) : undefined}
 					onSwipePrevious={
 						previousThread ? () => onOpenThread(previousThread) : undefined
 					}
-					mobileIntelligenceOpen={intelligenceOpen}
+					mobileIntelligenceOpen={drawer.isOpen}
 				/>
 				<Drawer
-					isOpen={intelligenceOpen}
-					onClose={onToggleIntelligence}
+					isOpen={drawer.isOpen}
+					onClose={drawer.close}
 					ariaLabel="Message details"
 					side="right"
 				>
 					<IntelligencePane
-						onClose={onToggleIntelligence}
+						onClose={drawer.close}
 						thread={selectedThread}
 						mailboxId={mailboxId}
 						accountId={mailboxAccountId}