@remit/web-client 0.0.167 → 0.0.169

package/package.json

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

@@ -140,7 +140,7 @@ const getReplyAddresses = (
 		displayName: a.displayName,
 	}));
 
-	if (mode !== "reply_all") return { to, cc: [] };
+	if (mode !== "reply-all") return { to, cc: [] };
 
 	const myEmailLower = myEmail?.toLowerCase();
 	const toEmails = new Set(to.map((a) => a.email.toLowerCase()));
@@ -353,6 +353,14 @@ export const ComposeForm = ({
 	const [openDocumentId, setOpenDocumentId] = useState(outboxMessageId);
 	const smtpConfigureRef = useRef<HTMLButtonElement>(null);
 	const prevOutboxMessageIdRef = useRef<string | undefined>(outboxMessageId);
+	/**
+	 * Whether the document on screen came from a draft the server already held.
+	 * A reply carries the message it answers whether it is being started or being
+	 * resumed, so this is what separates the two: the source seeds a reply that
+	 * has nothing behind it, and leaves a saved one holding the recipients and
+	 * the subject the reader edited.
+	 */
+	const resumedDraftRef = useRef(outboxMessageId !== undefined);
 
 	// 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
@@ -373,6 +381,7 @@ export const ComposeForm = ({
 		if (previous === outboxMessageId) return;
 		prevOutboxMessageIdRef.current = outboxMessageId;
 		if (previous === undefined) return;
+		resumedDraftRef.current = outboxMessageId !== undefined;
 		// A draft brings its own body along in a moment; a new message opens on
 		// the signature, the same document a fresh mount would have started on.
 		const opening = outboxMessageId
@@ -473,9 +482,10 @@ export const ComposeForm = ({
 	}, [draftData, draftLoaded]);
 
 	useEffect(() => {
+		if (resumedDraftRef.current) return;
 		if (!sourceMessage) return;
 
-		if (mode === "reply" || mode === "reply_all") {
+		if (mode === "reply" || mode === "reply-all") {
 			const { to, cc } = getReplyAddresses(sourceMessage, mode, account?.email);
 			setToAddresses(to);
 			setCcAddresses(cc);
@@ -493,7 +503,7 @@ export const ComposeForm = ({
 	// to an empty quote when nothing renderable exists (the user can still
 	// attribute the reply manually).
 	const isQuoting =
-		mode === "reply" || mode === "reply_all" || mode === "forward";
+		mode === "reply" || mode === "reply-all" || mode === "forward";
 	const { data: sourceBody } = useMessageBodyContent({
 		messageId: sourceMessage?.message.messageId,
 		bodyParts: sourceMessage?.bodyParts,
@@ -679,7 +689,7 @@ export const ComposeForm = ({
 				stopAutoSave();
 
 				const replyData =
-					sourceMessage && (mode === "reply" || mode === "reply_all")
+					sourceMessage && (mode === "reply" || mode === "reply-all")
 						? getReferences(sourceMessage)
 						: {};
 

package/src/components/compose/ComposeProvider.tsx

@@ -12,8 +12,14 @@ import {
 	useRef,
 	useState,
 } from "react";
+import type { ReplyMode } from "@/routing";
 
-export type ComposeMode = "reply" | "reply_all" | "forward" | "new";
+/**
+ * What a composer opened on. The three ways to answer a message are the path
+ * segment `$mode` verbatim, so the address and the form say one word each
+ * rather than translating between two vocabularies.
+ */
+export type ComposeMode = ReplyMode | "new";
 
 /**
  * A message on its way out outlives the composer that wrote it: the surface

package/src/components/compose/ConversationCompose.tsx

@@ -0,0 +1,57 @@
+import {
+	configOperationsGetConfigOptions,
+	messageOperationsDescribeMessageOptions,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useQuery } from "@tanstack/react-query";
+import {
+	type ReplyAddress,
+	useAdoptReplyDraft,
+	useCloseReply,
+} from "@/routing";
+import { ComposeForm } from "./ComposeForm";
+
+/**
+ * The answer to a message, as the top block of the conversation it answers.
+ *
+ * It takes no height of its own: it is as tall as what has been written in it
+ * and pushes the thread down as that grows, so the pane keeps the one scrollbar
+ * it had before the reply opened. A height here would give the pane a second
+ * one, with the caret in the inner track.
+ *
+ * Mode, source and draft are all segments of the address, so the surface is on
+ * screen because the path says so and is writing to what the path names. The
+ * conversation renders it because it belongs inside the thread and because the
+ * phone has no reading `Outlet` for a route to fill.
+ */
+export const ConversationCompose = ({ surface }: { surface: ReplyAddress }) => {
+	const adoptCreatedDraft = useAdoptReplyDraft();
+	const closeReply = useCloseReply();
+
+	const { data: sourceMessage } = useQuery({
+		...messageOperationsDescribeMessageOptions({
+			path: { messageId: surface.sourceMessageId },
+		}),
+	});
+
+	const { data: config } = useQuery({
+		...configOperationsGetConfigOptions(),
+		staleTime: Infinity,
+	});
+
+	return (
+		<div className="border-b border-line bg-canvas">
+			{/* No key on the draft: the first autosave writes the id it created into
+			    the address, and remounting the form on that would take the caret out
+			    of the sentence being typed. */}
+			<ComposeForm
+				layout="flow"
+				mode={surface.mode}
+				account={config?.accounts?.[0]}
+				sourceMessage={sourceMessage}
+				outboxMessageId={surface.outboxMessageId}
+				onDraftCreated={adoptCreatedDraft}
+				onClose={closeReply}
+			/>
+		</div>
+	);
+};

package/src/components/mail/BriefPane.tsx

@@ -44,6 +44,10 @@ import { useMailContext } from "@/lib/mail-context";
 import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
+	type ReplyMode,
+	useIsComposing,
+	useIsReplying,
+	useOpenReply,
 	useRetainOpenPanels,
 } from "@/routing";
 
@@ -70,6 +74,11 @@ interface BriefPaneContextValue {
 	 * account — the brief spans accounts, so there is no route mailbox to key by.
 	 */
 	actions: ThreadActions;
+	/**
+	 * Answer the conversation the address has open. Absent when it names none,
+	 * which is what the toolbar turns into its own explanation.
+	 */
+	onReply: ((mode: ReplyMode) => void) | undefined;
 	/** Keyboard, multi-select and next/previous, shared with the mailbox view. */
 	triage: TriageContext;
 	onDeleteMessages: (messageIds: string[]) => void;
@@ -204,15 +213,47 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 	const triageTarget = focusedThread ?? selectedThread;
 	const triageActions = useThreadActions({ thread: triageTarget });
 
+	// The toolbar answers the conversation on screen; the keyboard answers the
+	// row the cursor is on, which may be one the address has not opened yet.
+	// Both are one navigation, because the mode and the message it answers are
+	// segments of the same address — there is no open-it-first step for the
+	// answering half to be dropped from.
+	const isComposing = useIsComposing();
+	const isReplying = useIsReplying();
+	const openReply = useOpenReply();
+	const replyToOpenThread = useMemo(() => {
+		if (!selectedThread || !selectedMessageId) return undefined;
+		return (mode: ReplyMode) =>
+			openReply({
+				threadId: selectedThread.threadId,
+				messageId: selectedMessageId,
+				mode,
+			});
+	}, [openReply, selectedThread, selectedMessageId]);
+
+	const replyToFocusedThread = useMemo(() => {
+		if (!triageTarget) return undefined;
+		return (mode: ReplyMode) =>
+			openReply({
+				threadId: triageTarget.threadId,
+				messageId: triageTarget.messageId,
+				mode,
+			});
+	}, [openReply, triageTarget]);
+
 	const { nextMessageId, previousMessageId } = useTriageLayer({
 		context: triage,
 		orderedIds: triage.orderedIds,
 		selectedMessageId,
+		// The list stays mounted under both writing surfaces, so the triage keys
+		// would otherwise fire at the message behind whatever is being typed — or
+		// answer a row the cursor moved to while a reply was open.
+		enabled: !isComposing && !isReplying,
 		onClose: handleCloseThread,
 		handlers: {
-			reply: () => actions.requestCompose("reply"),
-			replyAll: () => actions.requestCompose("reply_all"),
-			forward: () => actions.requestCompose("forward"),
+			reply: () => replyToFocusedThread?.("reply"),
+			replyAll: () => replyToFocusedThread?.("reply-all"),
+			forward: () => replyToFocusedThread?.("forward"),
 			// The list takes any verb aimed at its selection and opens the wizard
 			// on it, so a shortcut can never reach a bulk action the bar would have
 			// reviewed. What comes back here is a verb aimed at the bare cursor.
@@ -252,6 +293,7 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 		nextThread: adjacentThread(nextMessageId),
 		previousThread: adjacentThread(previousMessageId),
 		actions,
+		onReply: replyToOpenThread,
 		triage,
 		onDeleteMessages: deleteMessages,
 		handleDeselectIfRemoved,
@@ -289,7 +331,7 @@ function BriefList() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function BriefReading() {
-	const { conversation, actions } = useBriefPane();
+	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
@@ -305,13 +347,9 @@ function BriefReading() {
 				intelligenceOpen={canToggleIntelligence && intelligenceOpen}
 				canToggleIntelligence={canToggleIntelligence}
 				onToggleIntelligence={onToggleIntelligence}
-				onReply={hasThread ? () => actions.requestCompose("reply") : undefined}
-				onReplyAll={
-					hasThread ? () => actions.requestCompose("reply_all") : undefined
-				}
-				onForward={
-					hasThread ? () => actions.requestCompose("forward") : undefined
-				}
+				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}
@@ -333,8 +371,6 @@ function BriefReading() {
 						subject={conversation.subject}
 						selectedMessageId={conversation.messageId}
 						authenticity={conversation.authenticity}
-						composeRequest={actions.composeRequest}
-						onComposeClose={actions.clearComposeRequest}
 					/>
 				) : (
 					<ReadingPaneEmpty />

package/src/components/mail/ConversationView.tsx

@@ -1,14 +1,12 @@
 import {
 	configOperationsGetConfigOptions,
-	messageOperationsDescribeMessageOptions,
 	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";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { ComposeMode } from "@/components/compose/ComposeProvider";
-import { InlineCompose } from "@/components/compose/InlineCompose";
+import { ConversationCompose } from "@/components/compose/ConversationCompose";
 import { EmptyState } from "@/components/ui/EmptyState";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
@@ -17,6 +15,7 @@ import { useMarkAsRead } from "@/hooks/useMarkAsRead";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { useSwipeNavigation } from "@/hooks/useSwipeNavigation";
 import { useToggleStar } from "@/hooks/useToggleStar";
+import { type ReplyMode, useOpenReply, useReplySurface } from "@/routing";
 import { AuthenticityBanner } from "./AuthenticityBanner";
 import { MessageCard } from "./MessageCard";
 
@@ -47,21 +46,6 @@ interface ConversationViewProps {
 	 * list is always visible in the resizable side pane.
 	 */
 	onBack?: () => void;
-	/**
-	 * When set, immediately opens the inline compose in this mode. The
-	 * parent (e.g. the reading-pane toolbar) sets this to wire the
-	 * top-bar reply/reply-all/forward buttons into the inline compose
-	 * that lives inside the conversation. Reset by calling
-	 * `onComposeClose` after the compose opens.
-	 */
-	composeRequest?: ComposeMode | null;
-	/**
-	 * Called once the conversation has acted on `composeRequest` (or
-	 * whenever the inline compose is dismissed). The caller must reset
-	 * `composeRequest` to `null`: a request left standing is read as a fresh
-	 * one on every render.
-	 */
-	onComposeClose?: () => void;
 	/**
 	 * Mobile only: swipe-left handler to open the next message in the list the
 	 * thread was opened from. Omitted at the end of the list so the gesture
@@ -103,8 +87,6 @@ export const ConversationView = ({
 	authenticity,
 	onOpenIntelligence,
 	onBack,
-	composeRequest,
-	onComposeClose,
 	onSwipeNext,
 	onSwipePrevious,
 	mobileIntelligenceOpen,
@@ -240,72 +222,65 @@ export const ConversationView = ({
 		messages,
 	});
 
-	// Compose state for inline reply/forward.
-	// Controlled via the `composeRequest` prop (toolbar wire-up) or
-	// locally via r/a/f keyboard shortcuts.
-	const [composeMode, setComposeMode] = useState<ComposeMode | null>(null);
-
-	// Counts openings rather than tracking the mode: replying from a second
-	// message while compose is already open is the same request again, and the
-	// reader still has to be taken to it.
-	const [composeOpenings, setComposeOpenings] = useState(0);
-	const openCompose = useCallback((mode: ComposeMode) => {
-		setComposeMode(mode);
-		setComposeOpenings((count) => count + 1);
-	}, []);
-
-	// When the toolbar passes a composeRequest, open the inline compose.
-	useEffect(() => {
-		if (composeRequest && composeRequest !== "new") {
-			openCompose(composeRequest);
-			// Notify the parent that the request has been consumed.
-			onComposeClose?.();
-		}
-	}, [composeRequest, onComposeClose, openCompose]);
-
-	// Reply and forward act on the latest turn of the conversation, which is the
-	// last message now that the thread reads oldest first.
-	const { data: latestMessageData } = useQuery({
-		...messageOperationsDescribeMessageOptions({
-			path: { messageId: latestMessage?.messageId ?? "" },
-		}),
-		enabled: !!latestMessage && composeMode !== null,
-	});
+	// The reply is a segment under the message it answers, so what is being
+	// written and which turn it answers are the address's to state. Nothing here
+	// keeps a second opinion about whether a composer is up.
+	const reply = useReplySurface();
+	const openReply = useOpenReply();
+
+	// Which turn a verb aimed at the whole conversation answers: the message the
+	// address names, or the latest turn when it names none. A per-message button
+	// passes its own instead, which the address could not express before this.
+	const answeredMessageId = selectedMessageId ?? latestMessage?.messageId;
+
+	const replyWith = useCallback(
+		(mode: ReplyMode, messageId: string | undefined) => {
+			if (!messageId) return;
+			openReply({ threadId, messageId, mode });
+		},
+		[openReply, threadId],
+	);
 
-	const handleReply = useCallback(() => openCompose("reply"), [openCompose]);
+	const handleReply = useCallback(
+		() => replyWith("reply", answeredMessageId),
+		[replyWith, answeredMessageId],
+	);
 
 	const handleReplyAll = useCallback(
-		() => openCompose("reply_all"),
-		[openCompose],
+		() => replyWith("reply-all", answeredMessageId),
+		[replyWith, answeredMessageId],
 	);
 
 	const handleForward = useCallback(
-		() => openCompose("forward"),
-		[openCompose],
+		() => replyWith("forward", answeredMessageId),
+		[replyWith, answeredMessageId],
 	);
 
-	const handleCloseCompose = useCallback(() => {
-		setComposeMode(null);
-		onComposeClose?.();
-	}, [onComposeClose]);
-
 	// Compose opens at the head of the pane, which from halfway down a long
 	// thread is several screens up: without this, replying looks like nothing
 	// happening. Aligned on its top edge, where the recipients are, and left
 	// alone afterwards — it grows downward as it is written into, so following
 	// its height would pull the rows being typed into off the top.
+	//
+	// Keyed on what is being answered and how, not on the draft under it: the
+	// address gains a draft segment while the reader types, and scrolling there
+	// would move the pane mid-sentence.
 	const composeRef = useRef<HTMLDivElement>(null);
+	const answering =
+		reply?.kind === "reply"
+			? `${reply.mode}:${reply.sourceMessageId}`
+			: undefined;
 	useEffect(() => {
-		if (composeMode === null || composeOpenings === 0) return;
+		if (!answering) return;
 		composeRef.current?.scrollIntoView({
 			behavior: "smooth",
 			block: "start",
 		});
-	}, [composeOpenings, composeMode]);
+	}, [answering]);
 
 	// Register keyboard shortcuts
 	useKeyboardNavigation({
-		enabled: !isLoading && messages.length > 0 && composeMode === null,
+		enabled: !isLoading && messages.length > 0 && reply === undefined,
 		bindings: [
 			{ key: "j", handler: focusNext, preventDefault: true },
 			{ key: "ArrowDown", handler: focusNext, preventDefault: true },
@@ -340,10 +315,22 @@ export const ConversationView = ({
 		);
 	}
 
+	// An address naming a reply over a conversation with nothing in it says so.
+	// The mailbox is shared with other clients, so a thread can empty underneath
+	// the reader between opening it and answering it, and a composer that simply
+	// failed to appear reads as a broken button.
 	if (messages.length === 0) {
 		return (
-			<div className="flex h-full items-center justify-center">
-				<EmptyState message="No messages in this thread" />
+			<div className="flex h-full items-center justify-center p-4">
+				{reply ? (
+					<ErrorState
+						variant="inline"
+						title="There is nothing here to answer"
+						error="This conversation has no messages left. Another mail client may have moved or deleted them."
+					/>
+				) : (
+					<EmptyState message="No messages in this thread" />
+				)}
 			</div>
 		);
 	}
@@ -355,7 +342,8 @@ export const ConversationView = ({
 	// its own px-5 inset (matches the AppShell ReadingPane geometry). On mobile
 	// each expanded card owns a per-message action bar. Its reply verbs are
 	// wired whatever the account's SMTP state: compose is where an account that
-	// cannot send says so.
+	// cannot send says so. A card's verb answers that card's message, which is
+	// the turn the address then names.
 	const renderMessages = (mobile: boolean) => (
 		<div data-testid="conversation-messages">
 			{orderedMessages.map((message, index) => (
@@ -376,9 +364,17 @@ export const ConversationView = ({
 						}
 						accountId={mailboxAccountId}
 						mobile={mobile}
-						onReply={mobile ? handleReply : undefined}
-						onReplyAll={mobile ? handleReplyAll : undefined}
-						onForward={mobile ? handleForward : undefined}
+						onReply={
+							mobile ? () => replyWith("reply", message.messageId) : undefined
+						}
+						onReplyAll={
+							mobile
+								? () => replyWith("reply-all", message.messageId)
+								: undefined
+						}
+						onForward={
+							mobile ? () => replyWith("forward", message.messageId) : undefined
+						}
 					/>
 				</div>
 			))}
@@ -389,14 +385,23 @@ export const ConversationView = ({
 	// is what the reader came back for, and it is not something to go looking
 	// for under a thread. It scrolls with the conversation rather than floating
 	// over it, so the pane has one scrollbar whether or not a reply is open.
-	const compose = composeMode !== null && (
+	//
+	// A segment naming no mode is a hand-typed address, and it says so where the
+	// composer would have been rather than opening nothing: the conversation
+	// behind it is still open and still readable.
+	const compose = reply && (
 		<div ref={composeRef}>
-			<InlineCompose
-				mode={composeMode}
-				account={activeAccount}
-				sourceMessage={latestMessageData}
-				onClose={handleCloseCompose}
-			/>
+			{reply.kind === "reply" ? (
+				<ConversationCompose surface={reply} />
+			) : (
+				<div className="border-b border-line bg-canvas p-4">
+					<ErrorState
+						variant="inline"
+						title="That is not a way to answer a message"
+						error={`"${reply.segment}" is not reply, reply-all or forward.`}
+					/>
+				</div>
+			)}
 		</div>
 	);
 

package/src/components/mail/FlaggedPane.tsx

@@ -55,6 +55,10 @@ import { useMailContext } from "@/lib/mail-context";
 import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
+	type ReplyMode,
+	useIsComposing,
+	useIsReplying,
+	useOpenReply,
 	useRetainOpenPanels,
 } from "@/routing";
 
@@ -81,6 +85,11 @@ interface FlaggedPaneContextValue {
 	 * account — Flagged spans accounts, so there is no route mailbox to key by.
 	 */
 	actions: ThreadActions;
+	/**
+	 * Answer the conversation the address has open. Absent when it names none,
+	 * which is what the toolbar turns into its own explanation.
+	 */
+	onReply: ((mode: ReplyMode) => void) | undefined;
 	/** Keyboard, multi-select and next/previous, shared with the mailbox view. */
 	triage: TriageContext;
 	onDeleteMessages: (messageIds: string[]) => void;
@@ -210,15 +219,47 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 	const triageTarget = focusedThread ?? selectedThread;
 	const triageActions = useThreadActions({ thread: triageTarget });
 
+	// The toolbar answers the conversation on screen; the keyboard answers the
+	// row the cursor is on, which may be one the address has not opened yet.
+	// Both are one navigation, because the mode and the message it answers are
+	// segments of the same address — there is no open-it-first step for the
+	// answering half to be dropped from.
+	const isComposing = useIsComposing();
+	const isReplying = useIsReplying();
+	const openReply = useOpenReply();
+	const replyToOpenThread = useMemo(() => {
+		if (!selectedThread || !selectedMessageId) return undefined;
+		return (mode: ReplyMode) =>
+			openReply({
+				threadId: selectedThread.threadId,
+				messageId: selectedMessageId,
+				mode,
+			});
+	}, [openReply, selectedThread, selectedMessageId]);
+
+	const replyToFocusedThread = useMemo(() => {
+		if (!triageTarget) return undefined;
+		return (mode: ReplyMode) =>
+			openReply({
+				threadId: triageTarget.threadId,
+				messageId: triageTarget.messageId,
+				mode,
+			});
+	}, [openReply, triageTarget]);
+
 	const { nextMessageId, previousMessageId } = useTriageLayer({
 		context: triage,
 		orderedIds: triage.orderedIds,
 		selectedMessageId,
+		// The list stays mounted under both writing surfaces, so the triage keys
+		// would otherwise fire at the message behind whatever is being typed — or
+		// answer a row the cursor moved to while a reply was open.
+		enabled: !isComposing && !isReplying,
 		onClose: handleCloseThread,
 		handlers: {
-			reply: () => actions.requestCompose("reply"),
-			replyAll: () => actions.requestCompose("reply_all"),
-			forward: () => actions.requestCompose("forward"),
+			reply: () => replyToFocusedThread?.("reply"),
+			replyAll: () => replyToFocusedThread?.("reply-all"),
+			forward: () => replyToFocusedThread?.("forward"),
 			// The list takes any verb aimed at its selection and opens the wizard
 			// on it, so a shortcut can never reach a bulk action the bar would have
 			// reviewed. What comes back here is a verb aimed at the bare cursor.
@@ -258,6 +299,7 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 		nextThread: adjacentThread(nextMessageId),
 		previousThread: adjacentThread(previousMessageId),
 		actions,
+		onReply: replyToOpenThread,
 		triage,
 		onDeleteMessages: deleteMessages,
 		handleDeselectIfRemoved,
@@ -292,7 +334,7 @@ function FlaggedListSlot() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function FlaggedReading() {
-	const { conversation, actions } = useFlaggedPane();
+	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
@@ -308,13 +350,9 @@ function FlaggedReading() {
 				intelligenceOpen={canToggleIntelligence && intelligenceOpen}
 				canToggleIntelligence={canToggleIntelligence}
 				onToggleIntelligence={onToggleIntelligence}
-				onReply={hasThread ? () => actions.requestCompose("reply") : undefined}
-				onReplyAll={
-					hasThread ? () => actions.requestCompose("reply_all") : undefined
-				}
-				onForward={
-					hasThread ? () => actions.requestCompose("forward") : undefined
-				}
+				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}
@@ -336,8 +374,6 @@ function FlaggedReading() {
 						subject={conversation.subject}
 						selectedMessageId={conversation.messageId}
 						authenticity={conversation.authenticity}
-						composeRequest={actions.composeRequest}
-						onComposeClose={actions.clearComposeRequest}
 					/>
 				) : (
 					<ReadingPaneEmpty />