@remit/web-client 0.0.180 → 0.0.182

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.180",
+  "version": "0.0.182",
   "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);

package/src/components/mail/conversation-reply-identity.render.test.ts

@@ -0,0 +1,304 @@
+/**
+ * Which identity answers a message, on an instance holding more than one.
+ *
+ * The account a message reached is the mailbox it was delivered to, so the
+ * reply leaves from that identity, the Reply All keeps that identity out of
+ * its own Cc, and reading the message refreshes that account's folder list.
+ * All three read the first configured account before (#819), which answered
+ * every account's mail as the first one.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapDescribeMessageResponse,
+	RemitImapThreadMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { ComposeProvider } from "@/components/compose/ComposeProvider";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import {
+	makeAccount,
+	makeMailbox,
+	makeThreadMessage,
+} from "@/test-support/fixtures";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import { MARK_READ_DELAY_MS } from "../../hooks/useMarkAsRead";
+import { ConversationView } from "./ConversationView";
+
+const FIRST_ACCOUNT_ID = "acc-first";
+const REACHED_ACCOUNT_ID = "acc-reached";
+const FIRST_MAILBOX_ID = "mbx-first-inbox";
+const REACHED_MAILBOX_ID = "mbx-reached-inbox";
+const THREAD_ID = "thread-1";
+const MESSAGE_ID = "msg-1";
+
+const REACHED_EMAIL = "bob@example.com";
+
+// Two identities, in the order the config hands them over. The message below
+// reached the second one, so nothing about it can be answered off the head of
+// this list.
+const firstAccount = makeAccount({
+	accountId: FIRST_ACCOUNT_ID,
+	email: "alice@example.com",
+	username: "alice@example.com",
+	smtpUsername: "alice@example.com",
+});
+
+const reachedAccount = makeAccount({
+	accountId: REACHED_ACCOUNT_ID,
+	email: REACHED_EMAIL,
+	username: REACHED_EMAIL,
+	smtpUsername: REACHED_EMAIL,
+});
+
+const firstMailbox = makeMailbox({
+	mailboxId: FIRST_MAILBOX_ID,
+	accountId: FIRST_ACCOUNT_ID,
+	fullPath: "INBOX",
+});
+
+const reachedMailbox = makeMailbox({
+	mailboxId: REACHED_MAILBOX_ID,
+	accountId: REACHED_ACCOUNT_ID,
+	fullPath: "INBOX",
+});
+
+const threadMessage = (isRead: boolean): RemitImapThreadMessageResponse =>
+	makeThreadMessage({
+		messageId: MESSAGE_ID,
+		threadId: THREAD_ID,
+		mailboxId: REACHED_MAILBOX_ID,
+		accountId: REACHED_ACCOUNT_ID,
+		subject: "Lunch Thursday?",
+		fromName: "Ada Lovelace",
+		fromEmail: "ada@example.com",
+		isRead,
+	});
+
+// Sent to the second identity, with a third party alongside it. A Reply All
+// answers Ada and keeps Carol; the reader's own address is the one address that
+// must not come back in the Cc.
+const describeMessage: RemitImapDescribeMessageResponse = {
+	message: {
+		messageId: MESSAGE_ID,
+		mailboxId: REACHED_MAILBOX_ID,
+		uid: 1,
+		rfc822Size: 512,
+		internalDate: 1_767_225_600_000,
+	},
+	envelope: {
+		messageId: MESSAGE_ID,
+		date: 1_767_225_600_000,
+		subject: "Lunch Thursday?",
+		messageIdValue: "<ada-1@example.com>",
+		from: [
+			{
+				addressId: "addr-ada",
+				displayName: "Ada Lovelace",
+				normalizedEmail: "ada@example.com",
+				addressRole: "from",
+				addressOrder: 0,
+			},
+		],
+		to: [
+			{
+				addressId: "addr-reached",
+				normalizedEmail: REACHED_EMAIL,
+				addressRole: "to",
+				addressOrder: 0,
+			},
+		],
+		cc: [
+			{
+				addressId: "addr-carol",
+				normalizedEmail: "carol@example.com",
+				addressRole: "cc",
+				addressOrder: 0,
+			},
+		],
+		bcc: [],
+		replyTo: [],
+		category: "uncategorized",
+		senderTrust: "unknown",
+	},
+	flags: ["\\Seen"],
+	bodyParts: [],
+	references: [],
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const MESSAGE_PATH = `/mail/${REACHED_MAILBOX_ID}/${THREAD_ID}/${MESSAGE_ID}`;
+
+const testRouter = (href: string): AnyRouter => {
+	const rootRoute = createRootRoute({
+		component: () =>
+			createElement(ComposeProvider, null, createElement(Outlet)),
+	});
+	const mailboxRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail/$mailboxId",
+		validateSearch: (search: Record<string, unknown>) => search,
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "$threadId",
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: () =>
+			createElement(ConversationView, {
+				threadId: THREAD_ID,
+				mailboxId: REACHED_MAILBOX_ID,
+				subject: "Lunch Thursday?",
+				selectedMessageId: MESSAGE_ID,
+			}),
+	});
+	const replyRoute = createRoute({
+		getParentRoute: () => messageRoute,
+		path: "$mode/{-$outboxMessageId}",
+	});
+	const routeTree = rootRoute.addChildren([
+		mailboxRoute.addChildren([
+			threadRoute.addChildren([messageRoute.addChildren([replyRoute])]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: [href] }),
+	}) as unknown as AnyRouter;
+};
+
+const mountAt = async (
+	href: string,
+	{ isRead = true }: { isRead?: boolean } = {},
+): Promise<DomHarness> => {
+	const messages = [threadMessage(isRead)];
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) {
+			return { accounts: [firstAccount, reachedAccount] };
+		}
+		if (call.path.endsWith(`/accounts/${FIRST_ACCOUNT_ID}/mailboxes`)) {
+			return { items: [firstMailbox] };
+		}
+		if (call.path.endsWith(`/accounts/${REACHED_ACCOUNT_ID}/mailboxes`)) {
+			return { items: [reachedMailbox] };
+		}
+		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
+			return { items: messages };
+		}
+		if (call.path.endsWith(`/messages/${MESSAGE_ID}`)) return describeMessage;
+		return { items: [] };
+	});
+
+	const router = testRouter(href);
+	await router.load();
+	harness = createDomHarness();
+	harness.renderApp(createElement(RouterProvider, { router }));
+	await harness.flush();
+	await harness.wait(20);
+	await harness.flush();
+	return harness;
+};
+
+/** The identity the From row is standing on. */
+const chosenIdentity = (mounted: DomHarness): string => {
+	const selector = mounted.query<HTMLSelectElement>("#from-account-selector");
+	assert.ok(selector, "the From row offers the configured identities");
+	return selector.value;
+};
+
+/** The addresses held as chips in one of the composer's recipient fields. */
+const recipients = (mounted: DomHarness, label: string): string[] => {
+	const input = mounted.query(`#address-field-${label}`);
+	assert.ok(input, `the ${label} field is on screen`);
+	const field = input.parentElement;
+	assert.ok(field, `the ${label} field holds its chips`);
+	return [...field.querySelectorAll("[aria-label^='Remove ']")].map((button) =>
+		(button.getAttribute("aria-label") ?? "").replace("Remove ", ""),
+	);
+};
+
+const mailboxListReads = (accountId: string): number =>
+	(http?.calls ?? []).filter(
+		(call) =>
+			call.method === "GET" &&
+			call.path.endsWith(`/accounts/${accountId}/mailboxes`),
+	).length;
+
+describe("answering from the identity the message reached", () => {
+	it("opens the reply on the account the message was delivered to", async () => {
+		const mounted = await mountAt(`${MESSAGE_PATH}/reply`);
+
+		assert.equal(
+			chosenIdentity(mounted),
+			REACHED_ACCOUNT_ID,
+			"the reply leaves from the identity the message reached, not the first one configured",
+		);
+	});
+
+	it("keeps the reached identity out of its own Reply All", async () => {
+		const mounted = await mountAt(`${MESSAGE_PATH}/reply-all`);
+
+		assert.deepEqual(
+			recipients(mounted, "To"),
+			["ada@example.com"],
+			"the answer goes back to the sender",
+		);
+		assert.deepEqual(
+			recipients(mounted, "Cc"),
+			["carol@example.com"],
+			"everyone else on the message is kept, and the reader's own address is not copied back to itself",
+		);
+	});
+
+	it("refreshes the folder list of the account the message was read in", async () => {
+		const mounted = await mountAt(MESSAGE_PATH, { isRead: false });
+
+		const readsBefore = {
+			first: mailboxListReads(FIRST_ACCOUNT_ID),
+			reached: mailboxListReads(REACHED_ACCOUNT_ID),
+		};
+
+		await mounted.wait(MARK_READ_DELAY_MS + 100);
+		await mounted.flush();
+
+		assert.equal(
+			(http?.to("/messages/flags") ?? []).length,
+			1,
+			"the message the reader dwelled on was marked read",
+		);
+		assert.ok(
+			mailboxListReads(REACHED_ACCOUNT_ID) > readsBefore.reached,
+			"the unread badge of the account the message was read in is refreshed",
+		);
+		assert.equal(
+			mailboxListReads(FIRST_ACCOUNT_ID),
+			readsBefore.first,
+			"no other account's folder list is disturbed",
+		);
+	});
+});

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

@@ -0,0 +1,243 @@
+/**
+ * Every list pane reaches intelligence at every width its reading pane mounts
+ * (#817).
+ *
+ * The shell mounts the reading pane from 1024px and the intelligence rail only
+ * from 1280px. The brief and Flagged read the rail's gate as the answer for
+ * both, so between the two the toolbar's control rendered greyed out with no
+ * drawer behind it, and the authenticity banner's "Why?" was never wired at
+ * all — the DKIM explanation was unreachable on the brief at every desktop
+ * width. Only the mailbox was ever fixed (#744), which is what left three
+ * copies of one rule to drift apart.
+ *
+ * Mounted in the real `AppShellSlotted`, seeded at 1100px: which panes this
+ * width has is the shell's own answer here, not a stub's.
+ */
+
+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 { type ComponentType, createElement, type ReactNode } from "react";
+import { ComposeProvider } from "@/components/compose/ComposeProvider";
+import { type OpenThreadPath, 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 { BriefPane } from "./BriefPane";
+import { FlaggedPane } from "./FlaggedPane";
+
+/** Below the rail's 1280px gate, above the reading pane's 1024px one. */
+const TWO_PANE_WIDTH = 1100;
+
+const THREAD_ID = "thread-1";
+const MESSAGE_ID = "msg-1";
+
+const SHOW_INTELLIGENCE = "Show intelligence sidebar";
+const HIDE_INTELLIGENCE = "Hide intelligence sidebar";
+
+/** The one row shape that carries a warning: DKIM signed by another domain. */
+const row = makeThreadMessage({
+	messageId: MESSAGE_ID,
+	threadId: THREAD_ID,
+	subject: "Your parcel could not be delivered",
+	fromName: "Mondial Relay",
+	fromEmail: "delivery.notice@gmail.example",
+	hasStars: true,
+	star: "yellow",
+	authenticity: {
+		dkimMismatch: true,
+		fromDomain: "mondialrelay.fr",
+		dkimDomain: "gmail.example",
+	},
+});
+
+/** What the reading pane reads each message's own headers and body from. */
+const describedMessage = {
+	messageId: MESSAGE_ID,
+	envelope: {
+		from: [
+			{
+				addressId: "addr-1",
+				name: "Mondial Relay",
+				email: "delivery.notice@gmail.example",
+			},
+		],
+		to: [],
+		cc: [],
+		bcc: [],
+	},
+	bodyParts: [],
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+interface PaneUnderTest {
+	name: string;
+	/** The list's own segment under `/mail`, which is its whole route. */
+	segment: string;
+	Provider: ComponentType<{
+		thread: OpenThreadPath | undefined;
+		children: ReactNode;
+	}>;
+	Reading: ComponentType;
+}
+
+const panes: PaneUnderTest[] = [
+	{
+		name: "the brief",
+		segment: "brief",
+		Provider: BriefPane,
+		Reading: BriefPane.Reading,
+	},
+	{
+		name: "Flagged",
+		segment: "flagged",
+		Provider: FlaggedPane,
+		Reading: FlaggedPane.Reading,
+	},
+];
+
+const testRouter = (pane: PaneUnderTest): AnyRouter => {
+	const rootRoute = createRootRoute({
+		component: () =>
+			createElement(ComposeProvider, null, createElement(Outlet)),
+	});
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		validateSearch: (search: Record<string, unknown>) => search,
+		component: Outlet,
+	});
+	// Present so `useBrowsedList` has the route its `from` names, the way the
+	// generated tree does.
+	const mailboxRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/$mailboxId",
+		component: Outlet,
+	});
+	const listRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: `/${pane.segment}`,
+		component: () =>
+			createElement(pane.Provider, {
+				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: () => listRoute,
+		path: "$threadId",
+		component: Outlet,
+	});
+	// The shell the route mounts, seeded at a width with no room for the rail.
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: () =>
+			createElement(AppShellSlotted, {
+				initialWidth: TWO_PANE_WIDTH,
+				nav: null,
+				list: null,
+				reading: createElement(pane.Reading),
+			}),
+	});
+	const routeTree = rootRoute.addChildren([
+		mailRoute.addChildren([
+			mailboxRoute,
+			listRoute.addChildren([threadRoute.addChildren([messageRoute])]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({
+			initialEntries: [`/mail/${pane.segment}/${THREAD_ID}/${MESSAGE_ID}`],
+		}),
+	}) as unknown as AnyRouter;
+};
+
+const mount = async (pane: PaneUnderTest): Promise<DomHarness> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) return { accounts: [] };
+		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
+			return { items: [row] };
+		}
+		if (call.path.includes("/messages/")) return describedMessage;
+		if (call.path.includes("/threads")) return { items: [row] };
+		return { items: [] };
+	});
+
+	const router = testRouter(pane);
+	await router.load();
+	const mounted = createDomHarness({ viewportWidth: TWO_PANE_WIDTH });
+	harness = mounted;
+	mounted.renderApp(createElement(RouterProvider, { router }));
+	await settle(mounted);
+	return mounted;
+};
+
+const settle = async (mounted: DomHarness): Promise<void> => {
+	await mounted.flush();
+	await mounted.wait(20);
+	await mounted.flush();
+};
+
+const drawer = (mounted: DomHarness): HTMLElement | null =>
+	mounted.query('[role="dialog"][aria-label="Message details"]');
+
+describe("intelligence is reachable wherever the reading pane mounts (#817)", () => {
+	for (const pane of panes) {
+		it(`${pane.name} offers a live toolbar control below the rail's width`, async () => {
+			const mounted = await mount(pane);
+
+			const toggle = mounted.byLabel(SHOW_INTELLIGENCE) as HTMLButtonElement;
+			assert.equal(
+				toggle.disabled,
+				false,
+				"the control was greyed out at a width where the drawer is the surface",
+			);
+
+			mounted.click(toggle);
+			await settle(mounted);
+
+			assert.ok(drawer(mounted), "pressing it opened nothing");
+			assert.ok(
+				mounted.query(`[aria-label="${HIDE_INTELLIGENCE}"]`),
+				"the toolbar still reports the surface as closed",
+			);
+		});
+
+		it(`${pane.name} reaches the DKIM explanation from the banner`, async () => {
+			const mounted = await mount(pane);
+
+			mounted.click(mounted.byText("button", "Why?"));
+			await settle(mounted);
+
+			assert.ok(
+				drawer(mounted),
+				"the banner's Why? reached no intelligence surface",
+			);
+		});
+	}
+});

package/src/hooks/useIntelligenceData.test.ts

@@ -344,6 +344,26 @@ describe("buildAuthenticityIntel", () => {
 			assert.match(result.summary, /only looks like/);
 		});
 
+		test("a display name spelling a foreign address names the domain it cannot come from", () => {
+			const result = buildAuthenticityIntel(
+				makeThread({
+					fromEmail: "aramirez@secresaludguaviare.gov.co",
+					fromName: "matthijs@ischen.nl",
+					authenticity: {
+						fromDomain: "secresaludguaviare.gov.co",
+						dkimDomain: "secresaludguaviare.gov.co",
+						dkimMismatch: false,
+						displayNameCorrespondence: "ForeignAddress",
+						offDomainLinkDomains: [],
+					},
+				} as Partial<RemitImapThreadMessageResponse>),
+				0,
+			);
+			assert.equal(result.verdict, "caution");
+			assert.match(result.summary, /"matthijs@ischen\.nl"/);
+			assert.match(result.summary, /secresaludguaviare\.gov\.co/);
+		});
+
 		test("stays verified when the comparisons agreed", () => {
 			const result = buildAuthenticityIntel(
 				makeThread({

package/src/hooks/useIntelligenceData.ts

@@ -167,6 +167,10 @@ function describeSenderMismatch(
 			clauses.push(
 				`The name it shows, "${claimedBrand}", only looks like ${auth.fromDomain}.`,
 			);
+		} else if (correspondence === DisplayNameCorrespondence.ForeignAddress) {
+			clauses.push(
+				`The name it shows, "${claimedBrand}", is an address ${auth.fromDomain} cannot send from.`,
+			);
 		}
 	}
 

package/src/hooks/useIntelligenceSurface.ts

@@ -0,0 +1,64 @@
+import { useAppShellLayout } from "@remit/ui";
+import { useCallback } from "react";
+import { useIntelligenceDrawer } from "@/hooks/useIntelligenceDrawer";
+import { useMailContext } from "@/lib/mail-context";
+
+/**
+ * Which surface intelligence has for the open thread: the rail from 1280 up,
+ * the drawer below that, where the reading pane is mounted and the rail has no
+ * room. Every list pane asks this the same way — the brief and Flagged read the
+ * rail's own gate as the answer for both tiers and offered a disabled control
+ * with nothing behind it between 1024 and 1280 (#817).
+ */
+export interface IntelligenceSurface {
+	/** There is a thread to say anything about, so the toolbar's control acts. */
+	canToggle: boolean;
+	/** What the toolbar reports: the rail above 1280, the drawer below it. */
+	isShowing: boolean;
+	/** The toolbar's control, over whichever surface this width has. */
+	toggle: () => void;
+	/** The banner's "Why?" — an open, never a close. */
+	open: () => void;
+	drawerOpen: boolean;
+	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. */
+	openRail: () => void;
+}
+
+export const useIntelligenceSurface = (
+	openThreadId: string | undefined,
+): IntelligenceSurface => {
+	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
+	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
+	const threadId = openThreadId ?? null;
+	const drawer = useIntelligenceDrawer(threadId);
+	// The rail wins wherever it fits, so the drawer stays down there even if it
+	// was asked for at a narrower width the reader has since grown out of.
+	const drawerOpen = !railFits && drawer.isOpen;
+
+	const { open: openDrawer, toggle: toggleDrawer } = drawer;
+	const toggle = useCallback(() => {
+		if (railFits) {
+			onToggleIntelligence();
+			return;
+		}
+		toggleDrawer();
+	}, [railFits, onToggleIntelligence, toggleDrawer]);
+	const openRail = useCallback(() => {
+		if (!railFits || intelligenceOpen) return;
+		onToggleIntelligence();
+	}, [railFits, intelligenceOpen, onToggleIntelligence]);
+
+	return {
+		canToggle: threadId !== null,
+		isShowing: threadId !== null && (railFits ? intelligenceOpen : drawerOpen),
+		toggle,
+		open: railFits ? onToggleIntelligence : openDrawer,
+		drawerOpen,
+		closeDrawer: drawer.close,
+		railFits,
+		openRail,
+	};
+};