@remit/web-client 0.0.179 → 0.0.181

package/package.json

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

@@ -373,6 +373,24 @@ export const ComposeForm = ({
 	 * the subject the reader edited.
 	 */
 	const resumedDraftRef = useRef(outboxMessageId !== undefined);
+	/**
+	 * The identity this form has already taken from the surface that mounted it.
+	 * A reply learns which account the message reached only once the mailbox it
+	 * was delivered to resolves, which lands after the first render — so From
+	 * follows the prop instead of only its initial value. Applied once per
+	 * identity, so a reader who then picks another one keeps it.
+	 */
+	const appliedAccountIdRef = useRef(account?.accountId);
+
+	useEffect(() => {
+		const accountId = account?.accountId;
+		if (!accountId || appliedAccountIdRef.current === accountId) return;
+		appliedAccountIdRef.current = accountId;
+		// A saved draft carries the account it was written from; that is the one
+		// it reopens on.
+		if (resumedDraftRef.current) return;
+		setSelectedAccountId(accountId);
+	}, [account?.accountId]);
 
 	// The document this form is on changed under it, so it starts again: another
 	// draft, or no draft at all. Without this the previous one's fields stay on

package/src/components/compose/ConversationCompose.tsx

@@ -3,6 +3,7 @@ import {
 	messageOperationsDescribeMessageOptions,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import { useQuery } from "@tanstack/react-query";
+import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import {
 	type ReplyAddress,
 	useAdoptReplyDraft,
@@ -38,6 +39,17 @@ export const ConversationCompose = ({ surface }: { surface: ReplyAddress }) => {
 		staleTime: Infinity,
 	});
 
+	// The answer leaves from the identity the message reached, so the account is
+	// the one owning the mailbox it was delivered to. Taking the head of the
+	// configured list answered every account's mail from the first identity, and
+	// left the reader's own address in the Cc of a Reply All (#819).
+	const { accountId: deliveredToAccountId } = useMailboxAccount(
+		sourceMessage?.message.mailboxId,
+	);
+	const account = config?.accounts?.find(
+		(candidate) => candidate.accountId === deliveredToAccountId,
+	);
+
 	return (
 		<div className="border-b border-line bg-canvas">
 			{/* No key on the draft: the first autosave writes the id it created into
@@ -46,7 +58,7 @@ export const ConversationCompose = ({ surface }: { surface: ReplyAddress }) => {
 			<ComposeForm
 				layout="flow"
 				mode={surface.mode}
-				account={config?.accounts?.[0]}
+				account={account}
 				sourceMessage={sourceMessage}
 				outboxMessageId={surface.outboxMessageId}
 				onDraftCreated={adoptCreatedDraft}

package/src/components/mail/BriefPane.tsx

@@ -14,7 +14,7 @@
  */
 import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { ReadingPaneEmpty, useAppShellLayout } from "@remit/ui";
+import { ReadingPaneEmpty } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import {
@@ -24,14 +24,15 @@ import {
 	useContext,
 	useMemo,
 } from "react";
-import { Drawer } from "@/components/layout/Drawer";
 import { ConversationView } from "@/components/mail/ConversationView";
 import { DailyBrief } from "@/components/mail/DailyBrief";
+import { IntelligenceDrawer } from "@/components/mail/IntelligenceDrawer";
 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 { useIntelligenceSurface } from "@/hooks/useIntelligenceSurface";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
 import { useThreadRow } from "@/hooks/useThreadRow";
@@ -328,52 +329,64 @@ function BriefList() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function BriefReading() {
-	const { conversation, actions, onReply } = useBriefPane();
-	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
-	// 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.
-	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
+	const {
+		conversation,
+		selectedThread,
+		actions,
+		onReply,
+		handleDeselectIfRemoved,
+	} = useBriefPane();
 	const hasThread = Boolean(conversation);
-	const canToggleIntelligence = railFits && hasThread;
+	const intelligence = useIntelligenceSurface(conversation?.threadId);
 
 	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={onReply ? () => onReply("reply") : undefined}
-				onReplyAll={onReply ? () => onReply("reply-all") : undefined}
-				onForward={onReply ? () => onReply("forward") : undefined}
-				onDelete={hasThread ? actions.deleteThread : undefined}
-				onToggleStar={hasThread ? actions.toggleStar : undefined}
-				isStarred={actions.isStarred}
-				moveContext={
-					hasThread && actions.accountId && actions.mailboxId
-						? {
-								accountId: actions.accountId,
-								currentMailboxId: actions.mailboxId,
-								onMove: actions.moveThread,
-							}
-						: undefined
-				}
+		<>
+			<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
+				<MessageToolbar
+					hasThread={hasThread}
+					intelligenceOpen={intelligence.isShowing}
+					canToggleIntelligence={intelligence.canToggle}
+					onToggleIntelligence={intelligence.toggle}
+					onReply={onReply ? () => onReply("reply") : undefined}
+					onReplyAll={onReply ? () => onReply("reply-all") : undefined}
+					onForward={onReply ? () => onReply("forward") : undefined}
+					onDelete={hasThread ? actions.deleteThread : undefined}
+					onToggleStar={hasThread ? actions.toggleStar : undefined}
+					isStarred={actions.isStarred}
+					moveContext={
+						hasThread && actions.accountId && actions.mailboxId
+							? {
+									accountId: actions.accountId,
+									currentMailboxId: actions.mailboxId,
+									onMove: actions.moveThread,
+								}
+							: undefined
+					}
+				/>
+				<div className="min-h-0 flex-1 overflow-hidden">
+					{conversation ? (
+						<ConversationView
+							threadId={conversation.threadId}
+							mailboxId={conversation.mailboxId}
+							subject={conversation.subject}
+							selectedMessageId={conversation.messageId}
+							authenticity={conversation.authenticity}
+							onOpenIntelligence={intelligence.open}
+						/>
+					) : (
+						<ReadingPaneEmpty />
+					)}
+				</div>
+			</section>
+			<IntelligenceDrawer
+				isOpen={intelligence.drawerOpen}
+				onClose={intelligence.closeDrawer}
+				thread={selectedThread}
+				mailboxId={selectedThread?.mailboxId}
+				accountId={selectedThread?.accountId}
+				onAfterOptimisticRemove={handleDeselectIfRemoved}
 			/>
-			<div className="min-h-0 flex-1 overflow-hidden">
-				{conversation ? (
-					<ConversationView
-						threadId={conversation.threadId}
-						mailboxId={conversation.mailboxId}
-						subject={conversation.subject}
-						selectedMessageId={conversation.messageId}
-						authenticity={conversation.authenticity}
-					/>
-				) : (
-					<ReadingPaneEmpty />
-				)}
-			</div>
-		</section>
+		</>
 	);
 }
 
@@ -428,21 +441,14 @@ function BriefPhone() {
 					}
 					mobileIntelligenceOpen={drawer.isOpen}
 				/>
-				<Drawer
+				<IntelligenceDrawer
 					isOpen={drawer.isOpen}
 					onClose={drawer.close}
-					ariaLabel="Message details"
-					side="right"
-				>
-					<IntelligencePane
-						onClose={drawer.close}
-						thread={selectedThread}
-						mailboxId={selectedThread?.mailboxId}
-						accountId={selectedThread?.accountId}
-						hideCloseButton
-						onAfterOptimisticRemove={handleDeselectIfRemoved}
-					/>
-				</Drawer>
+					thread={selectedThread}
+					mailboxId={selectedThread?.mailboxId}
+					accountId={selectedThread?.accountId}
+					onAfterOptimisticRemove={handleDeselectIfRemoved}
+				/>
 			</>
 		);
 	}

package/src/components/mail/ConversationView.tsx

@@ -1,7 +1,4 @@
-import {
-	configOperationsGetConfigOptions,
-	threadDetailOperationsListThreadMessagesOptions,
-} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { threadDetailOperationsListThreadMessagesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapMessageAuthenticity } from "@remit/api-http-client/types.gen.ts";
 import { MobileReadingPane } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
@@ -196,19 +193,17 @@ export const ConversationView = ({
 		}
 	}, [orderedMessages, focusedIndex, toggleExpanded]);
 
-	const { data: config } = useQuery({
-		...configOperationsGetConfigOptions(),
-		staleTime: Infinity,
-	});
-	const activeAccount = config?.accounts?.[0];
-
-	// Mark messages as read immediately when expanded.
+	// Mark messages as read immediately when expanded. The unread badge that has
+	// to be refreshed belongs to the account this mailbox is in, so the
+	// invalidation is scoped to that one rather than to the first configured
+	// account, whose list was being refetched while the right one went stale
+	// (#819).
 	useMarkAsRead({
 		messages,
 		expandedIds,
 		threadId,
 		mailboxId,
-		accountId: activeAccount?.accountId,
+		accountId: mailboxAccountId,
 	});
 
 	// Star toggle functionality

package/src/components/mail/FlaggedPane.tsx

@@ -25,7 +25,7 @@
  * On phone, use `<FlaggedPane.Phone />` instead.
  */
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { ReadingPaneEmpty, useAppShellLayout } from "@remit/ui";
+import { ReadingPaneEmpty } from "@remit/ui";
 import { useNavigate } from "@tanstack/react-router";
 import {
 	createContext,
@@ -34,14 +34,15 @@ import {
 	useContext,
 	useMemo,
 } from "react";
-import { Drawer } from "@/components/layout/Drawer";
 import { ConversationView } from "@/components/mail/ConversationView";
 import { FlaggedList } from "@/components/mail/FlaggedList";
+import { IntelligenceDrawer } from "@/components/mail/IntelligenceDrawer";
 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 { useIntelligenceSurface } from "@/hooks/useIntelligenceSurface";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { useStarredThreads } from "@/hooks/useStarredThreads";
 import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
@@ -331,52 +332,64 @@ function FlaggedListSlot() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function FlaggedReading() {
-	const { conversation, actions, onReply } = useFlaggedPane();
-	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
-	// 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.
-	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
+	const {
+		conversation,
+		selectedThread,
+		actions,
+		onReply,
+		handleDeselectIfRemoved,
+	} = useFlaggedPane();
 	const hasThread = Boolean(conversation);
-	const canToggleIntelligence = railFits && hasThread;
+	const intelligence = useIntelligenceSurface(conversation?.threadId);
 
 	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={onReply ? () => onReply("reply") : undefined}
-				onReplyAll={onReply ? () => onReply("reply-all") : undefined}
-				onForward={onReply ? () => onReply("forward") : undefined}
-				onDelete={hasThread ? actions.deleteThread : undefined}
-				onToggleStar={hasThread ? actions.toggleStar : undefined}
-				isStarred={actions.isStarred}
-				moveContext={
-					hasThread && actions.accountId && actions.mailboxId
-						? {
-								accountId: actions.accountId,
-								currentMailboxId: actions.mailboxId,
-								onMove: actions.moveThread,
-							}
-						: undefined
-				}
+		<>
+			<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
+				<MessageToolbar
+					hasThread={hasThread}
+					intelligenceOpen={intelligence.isShowing}
+					canToggleIntelligence={intelligence.canToggle}
+					onToggleIntelligence={intelligence.toggle}
+					onReply={onReply ? () => onReply("reply") : undefined}
+					onReplyAll={onReply ? () => onReply("reply-all") : undefined}
+					onForward={onReply ? () => onReply("forward") : undefined}
+					onDelete={hasThread ? actions.deleteThread : undefined}
+					onToggleStar={hasThread ? actions.toggleStar : undefined}
+					isStarred={actions.isStarred}
+					moveContext={
+						hasThread && actions.accountId && actions.mailboxId
+							? {
+									accountId: actions.accountId,
+									currentMailboxId: actions.mailboxId,
+									onMove: actions.moveThread,
+								}
+							: undefined
+					}
+				/>
+				<div className="min-h-0 flex-1 overflow-hidden">
+					{conversation ? (
+						<ConversationView
+							threadId={conversation.threadId}
+							mailboxId={conversation.mailboxId}
+							subject={conversation.subject}
+							selectedMessageId={conversation.messageId}
+							authenticity={conversation.authenticity}
+							onOpenIntelligence={intelligence.open}
+						/>
+					) : (
+						<ReadingPaneEmpty />
+					)}
+				</div>
+			</section>
+			<IntelligenceDrawer
+				isOpen={intelligence.drawerOpen}
+				onClose={intelligence.closeDrawer}
+				thread={selectedThread}
+				mailboxId={selectedThread?.mailboxId}
+				accountId={selectedThread?.accountId}
+				onAfterOptimisticRemove={handleDeselectIfRemoved}
 			/>
-			<div className="min-h-0 flex-1 overflow-hidden">
-				{conversation ? (
-					<ConversationView
-						threadId={conversation.threadId}
-						mailboxId={conversation.mailboxId}
-						subject={conversation.subject}
-						selectedMessageId={conversation.messageId}
-						authenticity={conversation.authenticity}
-					/>
-				) : (
-					<ReadingPaneEmpty />
-				)}
-			</div>
-		</section>
+		</>
 	);
 }
 
@@ -429,21 +442,14 @@ function FlaggedPhone() {
 					}
 					mobileIntelligenceOpen={drawer.isOpen}
 				/>
-				<Drawer
+				<IntelligenceDrawer
 					isOpen={drawer.isOpen}
 					onClose={drawer.close}
-					ariaLabel="Message details"
-					side="right"
-				>
-					<IntelligencePane
-						onClose={drawer.close}
-						thread={selectedThread}
-						mailboxId={selectedThread?.mailboxId}
-						accountId={selectedThread?.accountId}
-						hideCloseButton
-						onAfterOptimisticRemove={handleDeselectIfRemoved}
-					/>
-				</Drawer>
+					thread={selectedThread}
+					mailboxId={selectedThread?.mailboxId}
+					accountId={selectedThread?.accountId}
+					onAfterOptimisticRemove={handleDeselectIfRemoved}
+				/>
 			</>
 		);
 	}

package/src/components/mail/IntelligenceDrawer.tsx

@@ -0,0 +1,44 @@
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { Drawer } from "@/components/layout/Drawer";
+import { IntelligencePane } from "@/components/mail/IntelligencePane";
+
+/**
+ * The intelligence pane as a modal drawer — the surface every list pane uses
+ * wherever the rail has no room, which is the phone and the two-pane desktop
+ * band between 1024 and 1280px. Its open state is the caller's
+ * (`useIntelligenceSurface`); what is inside it is the same panel the rail
+ * mounts, minus its own close, because the drawer's header already carries one.
+ */
+export function IntelligenceDrawer({
+	isOpen,
+	onClose,
+	thread,
+	mailboxId,
+	accountId,
+	onAfterOptimisticRemove,
+}: {
+	isOpen: boolean;
+	onClose: () => void;
+	thread?: RemitImapThreadMessageResponse;
+	mailboxId?: string;
+	accountId?: string;
+	onAfterOptimisticRemove?: (messageIds: string[]) => void;
+}) {
+	return (
+		<Drawer
+			isOpen={isOpen}
+			onClose={onClose}
+			ariaLabel="Message details"
+			side="right"
+		>
+			<IntelligencePane
+				onClose={onClose}
+				thread={thread}
+				mailboxId={mailboxId}
+				accountId={accountId}
+				hideCloseButton
+				onAfterOptimisticRemove={onAfterOptimisticRemove}
+			/>
+		</Drawer>
+	);
+}

package/src/components/mail/MailboxPane.tsx

@@ -31,7 +31,6 @@ import {
 	RefreshButton,
 	type RescueCandidate,
 	type SearchResult,
-	useAppShellLayout,
 } from "@remit/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
@@ -46,9 +45,9 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { Drawer } from "@/components/layout/Drawer";
 import { ConversationView } from "@/components/mail/ConversationView";
 import { DraftsView } from "@/components/mail/DraftsView";
+import { IntelligenceDrawer } from "@/components/mail/IntelligenceDrawer";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
 import {
 	MessageList,
@@ -73,6 +72,7 @@ import {
 import type { EscalationSearchQuery } from "@/hooks/useEscalatedActions";
 import { useIntelligenceData } from "@/hooks/useIntelligenceData";
 import { useIntelligenceDrawer } from "@/hooks/useIntelligenceDrawer";
+import { useIntelligenceSurface } from "@/hooks/useIntelligenceSurface";
 import { useLayoutTier } from "@/hooks/useLayoutTier";
 import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
@@ -1059,19 +1059,14 @@ function MailboxReading() {
 		mailboxAccountLoading,
 		selectedThread,
 		conversation,
-		intelligenceOpen,
-		onToggleIntelligence,
 		onReply,
 		onToolbarDelete,
 		onToolbarStar,
 		onToolbarMove,
 		handleDeselectIfRemoved,
 	} = useMailboxPane();
-	// 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 intelligence = useIntelligenceSurface(conversation?.threadId);
 
 	// 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
@@ -1079,6 +1074,7 @@ function MailboxReading() {
 	// 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);
+	const { railFits, openRail } = intelligence;
 	useEffect(() => {
 		if (!railFits) return;
 		const id = selectedThread?.messageId ?? null;
@@ -1086,31 +1082,14 @@ function MailboxReading() {
 		if (autoOpenedForRef.current === id) return;
 		if (!selectedThread?.authenticity?.dkimMismatch) return;
 		autoOpenedForRef.current = id;
-		if (!intelligenceOpen) onToggleIntelligence();
+		openRail();
 	}, [
 		railFits,
+		openRail,
 		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;
-		}
-		toggleDrawer();
-	}, [railFits, onToggleIntelligence, toggleDrawer]);
-	const intelligenceShowing =
-		hasThread && (railFits ? intelligenceOpen : drawerOpen);
-
 	const detailPane = conversation ? (
 		<ConversationView
 			threadId={conversation.threadId}
@@ -1118,9 +1097,7 @@ function MailboxReading() {
 			subject={conversation.subject}
 			selectedMessageId={conversation.messageId}
 			authenticity={conversation.authenticity}
-			onOpenIntelligence={
-				conversation.authenticity?.dkimMismatch ? openIntelligence : undefined
-			}
+			onOpenIntelligence={intelligence.open}
 		/>
 	) : (
 		<ReadingPaneEmpty />
@@ -1132,9 +1109,9 @@ function MailboxReading() {
 				<MessageToolbar
 					hasThread={hasThread}
 					messageId={conversation?.messageId}
-					intelligenceOpen={intelligenceShowing}
-					canToggleIntelligence={hasThread}
-					onToggleIntelligence={toggleIntelligence}
+					intelligenceOpen={intelligence.isShowing}
+					canToggleIntelligence={intelligence.canToggle}
+					onToggleIntelligence={intelligence.toggle}
 					onReply={onReply ? () => onReply("reply") : undefined}
 					onReplyAll={onReply ? () => onReply("reply-all") : undefined}
 					onForward={onReply ? () => onReply("forward") : undefined}
@@ -1154,21 +1131,14 @@ function MailboxReading() {
 				/>
 				<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>
+			<IntelligenceDrawer
+				isOpen={intelligence.drawerOpen}
+				onClose={intelligence.closeDrawer}
+				thread={selectedThread}
+				mailboxId={mailboxId}
+				accountId={mailboxAccountId}
+				onAfterOptimisticRemove={handleDeselectIfRemoved}
+			/>
 		</>
 	);
 }
@@ -1232,21 +1202,14 @@ function MailboxPhone() {
 					}
 					mobileIntelligenceOpen={drawer.isOpen}
 				/>
-				<Drawer
+				<IntelligenceDrawer
 					isOpen={drawer.isOpen}
 					onClose={drawer.close}
-					ariaLabel="Message details"
-					side="right"
-				>
-					<IntelligencePane
-						onClose={drawer.close}
-						thread={selectedThread}
-						mailboxId={mailboxId}
-						accountId={mailboxAccountId}
-						hideCloseButton
-						onAfterOptimisticRemove={handleDeselectIfRemoved}
-					/>
-				</Drawer>
+					thread={selectedThread}
+					mailboxId={mailboxId}
+					accountId={mailboxAccountId}
+					onAfterOptimisticRemove={handleDeselectIfRemoved}
+				/>
 			</>
 		);
 	}

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

@@ -9,7 +9,8 @@ import { AuthenticityBanner } from "@/components/mail/AuthenticityBanner";
  *
  * 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
+ * uses. Every list pane mounts it wherever the rail does not fit — the mailbox,
+ * the brief and Flagged all read that from `useIntelligenceSurface` (#817). 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.
  */
@@ -73,8 +74,8 @@ const intelligence: IntelligenceData = {
 };
 
 /**
- * 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.
+ * The reading pane as every list pane 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);