@remit/web-client 0.0.213 → 0.0.215

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.213",
+  "version": "0.0.215",
   "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/layout/Drawer.focus.test.ts

@@ -206,6 +206,39 @@ describe("Drawer's ring is what a reader can reach", () => {
 
 		assert.equal(document.activeElement, named("Cancel"));
 	});
+
+	/**
+	 * The pane renders that dialog without moving focus into it, so focus sits
+	 * on the drawer control that opened it — now behind the dialog's backdrop.
+	 * Tab has to enter the dialog's ring rather than walk the controls the
+	 * backdrop covers.
+	 */
+	it("pulls focus behind a nested dialog's backdrop into its ring", () => {
+		const nestedDialog = createElement(
+			"div",
+			{
+				key: "nested",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": "Reclassify sender",
+			},
+			button("automated"),
+			button("Cancel"),
+		);
+
+		open(createElement(Fragment, null, button("trigger"), nestedDialog));
+		named("trigger").focus();
+
+		press("Tab");
+
+		assert.equal(document.activeElement, named("automated"));
+
+		named("trigger").focus();
+
+		press("Tab", true);
+
+		assert.equal(document.activeElement, named("Cancel"));
+	});
 });
 
 describe("Drawer gives focus back on the way out", () => {

package/src/components/layout/Drawer.tsx

@@ -73,25 +73,29 @@ export const Drawer = ({
 				onClose();
 				return;
 			}
-			// Wrap Tab at the ends of the drawer's ring: walking off the last
-			// control cycles back to the first instead of landing on controls a
-			// pointer cannot reach under the scrim (#747). Focus that is already
-			// outside the drawer — an error banner, the fatal-error overlay — is
-			// left alone; the drawer does not pull it back in.
+			// Trap Tab inside the drawer's ring: walking off either end cycles
+			// round, and focus that is in the drawer but outside the ring — a
+			// control behind a nested dialog's backdrop — is pulled in, so Tab
+			// never lands where a pointer cannot reach (#747). The trap only
+			// applies while the drawer already holds focus; an error banner or
+			// the fatal-error overlay above it keeps its own Tab (#970).
 			if (event.key !== "Tab" || !drawerRef.current) return;
+			const active = document.activeElement;
+			if (!(active instanceof HTMLElement)) return;
+			if (!drawerRef.current.contains(active)) return;
 			const ring = tabRing(drawerRef.current);
 			if (ring.length === 0) return;
 			const first = ring[0];
 			const last = ring[ring.length - 1];
-			const active = document.activeElement;
+			const inside = ring.includes(active);
 			if (event.shiftKey) {
-				if (active === first) {
+				if (!inside || active === first) {
 					event.preventDefault();
 					last.focus();
 				}
 				return;
 			}
-			if (active === last) {
+			if (!inside || active === last) {
 				event.preventDefault();
 				first.focus();
 			}

package/src/components/mail/BriefPane.tsx

@@ -234,6 +234,7 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 		// 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,
+		hasOpenThread: threadId !== undefined,
 		onClose: closeThread,
 		handlers: {
 			reply: () => replyToFocusedThread?.("reply"),
@@ -359,6 +360,7 @@ function BriefReading() {
 							selectedMessageId={conversation.messageId}
 							authenticity={conversation.authenticity}
 							onOpenIntelligence={intelligence.open}
+							listOnScreen
 						/>
 					) : (
 						<ReadingPaneEmpty />

package/src/components/mail/ConversationView.tsx

@@ -56,6 +56,14 @@ interface ConversationViewProps {
 	onSwipePrevious?: () => void;
 	/** Whether the intelligence drawer is currently open (drives the ⓘ button pressed state). */
 	mobileIntelligenceOpen?: boolean;
+	/**
+	 * The message list is on screen beside this conversation, so it — not this
+	 * pane — owns j/k, the arrows and Enter (`shortcut-tree`: those sit at
+	 * `detail` only where no list is visible). Both used to act on the same
+	 * press, moving two cursors at once (#723). Answering the conversation is
+	 * unaffected: r, R and f are the open thread's at every width.
+	 */
+	listOnScreen?: boolean;
 }
 
 const LoadingSkeleton = () => (
@@ -87,6 +95,7 @@ export const ConversationView = ({
 	onSwipeNext,
 	onSwipePrevious,
 	mobileIntelligenceOpen,
+	listOnScreen = false,
 }: ConversationViewProps) => {
 	const isDesktop = useIsDesktop();
 	const { handlers: swipeHandlers } = useSwipeNavigation({
@@ -277,12 +286,23 @@ export const ConversationView = ({
 	useKeyboardNavigation({
 		enabled: !isLoading && messages.length > 0 && reply === undefined,
 		bindings: [
-			{ key: "j", handler: focusNext, preventDefault: true },
-			{ key: "ArrowDown", handler: focusNext, preventDefault: true },
-			{ key: "k", handler: focusPrevious, preventDefault: true },
-			{ key: "ArrowUp", handler: focusPrevious, preventDefault: true },
-			{ key: "Enter", handler: toggleFocusedMessage, preventDefault: true },
-			{ key: "o", handler: toggleFocusedMessage, preventDefault: true },
+			// Left unbound rather than bound and guarded: an unbound key is never
+			// preventDefault-ed, so it reaches the list's own window listener
+			// instead of the two racing on one press.
+			...(listOnScreen
+				? []
+				: [
+						{ key: "j", handler: focusNext, preventDefault: true },
+						{ key: "ArrowDown", handler: focusNext, preventDefault: true },
+						{ key: "k", handler: focusPrevious, preventDefault: true },
+						{ key: "ArrowUp", handler: focusPrevious, preventDefault: true },
+						{
+							key: "Enter",
+							handler: toggleFocusedMessage,
+							preventDefault: true,
+						},
+						{ key: "o", handler: toggleFocusedMessage, preventDefault: true },
+					]),
 			{ key: "r", handler: handleReply, preventDefault: true },
 			{
 				key: "R",

package/src/components/mail/FlaggedPane.tsx

@@ -240,6 +240,7 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 		// 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,
+		hasOpenThread: threadId !== undefined,
 		onClose: closeThread,
 		handlers: {
 			reply: () => replyToFocusedThread?.("reply"),
@@ -362,6 +363,7 @@ function FlaggedReading() {
 							selectedMessageId={conversation.messageId}
 							authenticity={conversation.authenticity}
 							onOpenIntelligence={intelligence.open}
+							listOnScreen
 						/>
 					) : (
 						<ReadingPaneEmpty />

package/src/components/mail/MailboxPane.tsx

@@ -726,6 +726,7 @@ function MailboxPaneProvider({
 		// 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,
+		hasOpenThread: threadId !== undefined,
 		onClose: closeThread,
 		handlers: {
 			reply: triageReply,
@@ -1123,6 +1124,7 @@ function MailboxReading() {
 			selectedMessageId={conversation.messageId}
 			authenticity={conversation.authenticity}
 			onOpenIntelligence={intelligence.open}
+			listOnScreen
 		/>
 	) : (
 		<ReadingPaneEmpty />

package/src/components/mail/two-window-listeners-one-key.render.test.ts

@@ -0,0 +1,591 @@
+/**
+ * With a thread open, one press must move one cursor and answer one message
+ * (#723).
+ *
+ * `useTriageLayer` (the pane's list cursor) and `ConversationView` (the open
+ * conversation's own message cursor) each bind their own keydown listener on
+ * `window`. Both used to act on the same press, so opening a thread and
+ * pressing `j` once walked the list underneath it and the conversation on top
+ * of it at the same time.
+ *
+ * Each key is settled where `shortcut-tree` already declares it, rather than
+ * handing the open thread everything: `focusNext`/`focusPrevious` sit at
+ * `detail` only where no list is visible, so a list on screen keeps the cursor
+ * keys and `ConversationView` stands down from them; `reply`/`replyAll`/
+ * `forward` sit at `detail` on `threadOpen` alone, so the open thread answers
+ * at every width and the layer drops all three.
+ *
+ * The first half stands the list in with a stub `MessageListCommands` — the
+ * same seam `MailboxPane` wires the real list through (`listCommandsRef`), so
+ * every key the list would have served is recorded rather than inferred,
+ * without the real list's virtualization along for the ride. The second half
+ * gives up that reading to mount a real pane instead, because what each pane
+ * passes for `hasOpenThread` is the other half of the handover.
+ */
+
+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, useEffect } from "react";
+import { ComposeProvider } from "@/components/compose/ComposeProvider";
+import { useTriageContext, useTriageLayer } from "@/hooks/useTriageLayer";
+import { MailFreshnessProvider } from "@/lib/mail-freshness";
+import { useOpenThreadPath } from "@/routing";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import { makeAccount, makeThreadMessage } from "@/test-support/fixtures";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import { BriefPane } from "./BriefPane";
+import { ConversationView } from "./ConversationView";
+import type { MessageListCommands } from "./MessageList";
+
+const ACCOUNT_ID = "acc-1";
+const THREAD_ID = "thread-1";
+const MAILBOX_ID = "mbx-inbox";
+const MESSAGE_ID = "msg-1";
+const OTHER_MESSAGE_ID = "msg-other";
+
+const account = makeAccount({ accountId: ACCOUNT_ID });
+
+const OPENING_SENT = 1_767_139_200_000;
+const LATEST_SENT = 1_767_225_600_000;
+
+const openingMessage: RemitImapThreadMessageResponse = makeThreadMessage({
+	messageId: "msg-0",
+	threadId: THREAD_ID,
+	mailboxId: MAILBOX_ID,
+	accountId: ACCOUNT_ID,
+	subject: "Lunch Thursday?",
+	fromName: "Grace Hopper",
+	fromEmail: "grace@example.com",
+	sentDate: OPENING_SENT,
+	isRead: true,
+});
+
+const threadMessage: RemitImapThreadMessageResponse = makeThreadMessage({
+	messageId: MESSAGE_ID,
+	threadId: THREAD_ID,
+	mailboxId: MAILBOX_ID,
+	accountId: ACCOUNT_ID,
+	subject: "Lunch Thursday?",
+	fromName: "Ada Lovelace",
+	fromEmail: "ada@example.com",
+	sentDate: LATEST_SENT,
+	isRead: true,
+});
+
+const describeMessage: RemitImapDescribeMessageResponse = {
+	message: {
+		messageId: MESSAGE_ID,
+		mailboxId: MAILBOX_ID,
+		uid: 1,
+		rfc822Size: 512,
+		internalDate: LATEST_SENT,
+	},
+	envelope: {
+		messageId: MESSAGE_ID,
+		date: LATEST_SENT,
+		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-me",
+				normalizedEmail: "alice@example.com",
+				addressRole: "to",
+				addressOrder: 0,
+			},
+		],
+		cc: [],
+		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 LIST_PATH = `/mail/${MAILBOX_ID}`;
+const MESSAGE_PATH = `${LIST_PATH}/${THREAD_ID}/${MESSAGE_ID}`;
+
+const press = async (mounted: DomHarness, key: string): Promise<void> => {
+	mounted.dispatch(
+		mounted.window,
+		new mounted.window.KeyboardEvent("keydown", { key, bubbles: true }),
+	);
+	await mounted.flush();
+	await mounted.wait(20);
+	await mounted.flush();
+};
+
+/**
+ * The two shapes a pane takes with a thread open: `two-pane` is the desktop
+ * reading pane, where the list stays mounted beside the conversation, and
+ * `conversation-only` is the phone view, where opening a thread takes the list
+ * off screen entirely.
+ */
+type Surface = "two-pane" | "conversation-only";
+
+/**
+ * The pane's own wiring, the way `MailboxPane` binds it to the real list: the
+ * layer over a stub list, with the conversation mounted above it exactly while
+ * a thread is open. Every list action and every pane verb the stub is asked for
+ * is recorded, so a press that reaches the list as well as the conversation
+ * shows up here.
+ */
+function PaneShell({
+	hasOpenThread,
+	surface,
+	onListAction,
+}: {
+	hasOpenThread: boolean;
+	surface: Surface;
+	onListAction: (action: string) => void;
+}) {
+	const triage = useTriageContext();
+	const hasList = surface === "two-pane";
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: registered once, the way a mounted list reports itself once — the stub never changes shape across the test.
+	useEffect(() => {
+		const commands: MessageListCommands = {
+			focusNext: () => onListAction("focusNext"),
+			focusPrevious: () => onListAction("focusPrevious"),
+			focusFirst: () => onListAction("focusFirst"),
+			focusLast: () => onListAction("focusLast"),
+			openFocused: () => onListAction("openFocused"),
+			toggleSelect: () => onListAction("toggleSelect"),
+			extendSelectDown: () => onListAction("extendSelectDown"),
+			extendSelectUp: () => onListAction("extendSelectUp"),
+			selectAll: () => onListAction("selectAll"),
+			clearSelection: () => false,
+			requestVerb: () => false,
+			toggleDensity: () => onListAction("toggleDensity"),
+		};
+		triage.listCommandsRef.current = hasList ? commands : null;
+		triage.onTriageContextChange({
+			focusedMessageId: MESSAGE_ID,
+			selectedIds: [],
+			hasList,
+			blocksKeyboard: false,
+			orderedIds: [MESSAGE_ID, OTHER_MESSAGE_ID],
+		});
+	}, []);
+
+	useTriageLayer({
+		context: triage,
+		orderedIds: [MESSAGE_ID, OTHER_MESSAGE_ID],
+		selectedMessageId: MESSAGE_ID,
+		hasOpenThread,
+		onClose: () => undefined,
+		handlers: {
+			reply: () => onListAction("reply"),
+			replyAll: () => onListAction("replyAll"),
+			forward: () => onListAction("forward"),
+		},
+	});
+
+	if (!hasOpenThread) return null;
+
+	return createElement(ConversationView, {
+		threadId: THREAD_ID,
+		mailboxId: MAILBOX_ID,
+		subject: "Lunch Thursday?",
+		selectedMessageId: MESSAGE_ID,
+		listOnScreen: hasList,
+	});
+}
+
+const testRouter = (
+	href: string,
+	surface: Surface,
+	onListAction: (action: string) => void,
+): 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 listRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "/",
+		component: () =>
+			createElement(PaneShell, {
+				hasOpenThread: false,
+				surface: "two-pane",
+				onListAction,
+			}),
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "$threadId",
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: () =>
+			createElement(PaneShell, {
+				hasOpenThread: true,
+				surface,
+				onListAction,
+			}),
+	});
+	const replyRoute = createRoute({
+		getParentRoute: () => messageRoute,
+		path: "$mode/{-$outboxMessageId}",
+	});
+	const routeTree = rootRoute.addChildren([
+		mailboxRoute.addChildren([
+			listRoute,
+			threadRoute.addChildren([messageRoute.addChildren([replyRoute])]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: [href] }),
+	}) as unknown as AnyRouter;
+};
+
+const mount = async (
+	href: string,
+	surface: Surface,
+	onListAction: (action: string) => void,
+): Promise<[DomHarness, AnyRouter]> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) return { accounts: [account] };
+		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
+			return { items: [openingMessage, threadMessage] };
+		}
+		if (call.path.endsWith(`/messages/${MESSAGE_ID}`)) return describeMessage;
+		return { items: [] };
+	});
+
+	const router = testRouter(href, surface, onListAction);
+	await router.load();
+	const mounted = createDomHarness();
+	harness = mounted;
+	mounted.renderApp(createElement(RouterProvider, { router }));
+	await mounted.flush();
+	await mounted.wait(20);
+	await mounted.flush();
+	return [mounted, router];
+};
+
+/** The inset ring `MessageCard` draws on the row the keyboard is sitting on. */
+const FOCUS_RING = /ring-accent\//;
+
+/** The turn the conversation's own cursor has, read off the ring it draws. */
+const focusedTurn = (mounted: DomHarness): string => {
+	const thread = mounted.query('[data-testid="conversation-messages"]');
+	assert.ok(thread, "the thread is on screen");
+	const focused = [...thread.children].filter((card) =>
+		[...card.querySelectorAll("*")].some((node) =>
+			FOCUS_RING.test(node.getAttribute("class") ?? ""),
+		),
+	);
+	assert.equal(focused.length, 1, "one turn carries the conversation cursor");
+	return focused[0]?.textContent ?? "";
+};
+
+describe("one press with a thread open beside the list (#723)", () => {
+	it("j moves the list's cursor and leaves the conversation's alone", async () => {
+		const listActions: string[] = [];
+		const [mounted] = await mount(MESSAGE_PATH, "two-pane", (action) =>
+			listActions.push(action),
+		);
+
+		assert.ok(
+			focusedTurn(mounted).includes("Ada Lovelace"),
+			"the conversation cursor starts on the latest turn",
+		);
+
+		await press(mounted, "j");
+
+		assert.deepEqual(
+			listActions,
+			["focusNext"],
+			"the visible list is the one surface j moves, and it did not move",
+		);
+		assert.ok(
+			focusedTurn(mounted).includes("Ada Lovelace"),
+			"the conversation walked its own turns as well, so one press moved two cursors",
+		);
+	});
+
+	it("Home and End reach the list the reader can see", async () => {
+		const listActions: string[] = [];
+		const [mounted] = await mount(MESSAGE_PATH, "two-pane", (action) =>
+			listActions.push(action),
+		);
+
+		await press(mounted, "Home");
+		await press(mounted, "End");
+
+		assert.deepEqual(
+			listActions,
+			["focusFirst", "focusLast"],
+			"the ends of the visible list stopped answering with a thread open",
+		);
+	});
+
+	it("r answers the open conversation rather than the row the pane is aimed at", async () => {
+		const listActions: string[] = [];
+		const [mounted, router] = await mount(MESSAGE_PATH, "two-pane", (action) =>
+			listActions.push(action),
+		);
+
+		await press(mounted, "r");
+
+		assert.equal(
+			router.state.location.pathname,
+			`${MESSAGE_PATH}/reply`,
+			"r answered something other than the message on screen",
+		);
+		assert.deepEqual(
+			listActions,
+			[],
+			"the pane answered as well, so one press opened two replies",
+		);
+	});
+
+	// `a` is the verb with no binding in the conversation — it answers with `R`
+	// there. Left registered on the pane it would answer the row the list cursor
+	// happens to be on, which is a different message than `r` just answered.
+	it("a goes nowhere rather than answering a different message than r", async () => {
+		const listActions: string[] = [];
+		const [mounted, router] = await mount(MESSAGE_PATH, "two-pane", (action) =>
+			listActions.push(action),
+		);
+
+		await press(mounted, "a");
+
+		assert.deepEqual(
+			listActions,
+			[],
+			"the pane answered a message of its own choosing under the open conversation",
+		);
+		assert.equal(
+			router.state.location.pathname,
+			MESSAGE_PATH,
+			"a press that must be inert moved the address",
+		);
+	});
+});
+
+describe("one press with the conversation alone on screen (#723)", () => {
+	it("j moves the conversation's own cursor once the list is off screen", async () => {
+		const listActions: string[] = [];
+		const [mounted] = await mount(MESSAGE_PATH, "conversation-only", (action) =>
+			listActions.push(action),
+		);
+
+		assert.ok(
+			focusedTurn(mounted).includes("Ada Lovelace"),
+			"the conversation cursor starts on the latest turn",
+		);
+
+		await press(mounted, "j");
+
+		assert.ok(
+			focusedTurn(mounted).includes("Grace Hopper"),
+			"the conversation lost j to a list the reader cannot see",
+		);
+		assert.deepEqual(listActions, [], "an unmounted list still took the press");
+	});
+});
+
+describe("the verbs with no thread open (#723)", () => {
+	it("hands r, a and f back to the pane", async () => {
+		const listActions: string[] = [];
+		const [mounted] = await mount(LIST_PATH, "two-pane", (action) =>
+			listActions.push(action),
+		);
+
+		await press(mounted, "r");
+		await press(mounted, "a");
+		await press(mounted, "f");
+
+		assert.deepEqual(
+			listActions,
+			["reply", "replyAll", "forward"],
+			"the layer kept the verbs dropped after the conversation closed",
+		);
+	});
+});
+
+/**
+ * The other half: what a pane passes for `hasOpenThread`. The brief is mounted
+ * whole — its own list, its own reading pane, and the address as the only thing
+ * that says whether a thread is open. `a` is what reads it, because the
+ * conversation binds `R` for reply-all and never plain `a`: with the thread open
+ * the key must reach nothing at all, and with it closed the same pane must
+ * answer the row its cursor is on.
+ */
+const BRIEF_LIST_PATH = "/mail/brief";
+const BRIEF_MESSAGE_PATH = `${BRIEF_LIST_PATH}/${THREAD_ID}/${MESSAGE_ID}`;
+
+function BriefLayout() {
+	return createElement(BriefPane, {
+		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(BriefPane.List, { key: "list" }),
+			createElement(Outlet, { key: "reading" }),
+		],
+	});
+}
+
+const briefRouter = (href: string): AnyRouter => {
+	const rootRoute = createRootRoute({
+		component: () =>
+			createElement(
+				ComposeProvider,
+				null,
+				createElement(MailFreshnessProvider, {
+					accountIds: [],
+					// biome-ignore lint/correctness/noChildrenProp: no JSX in a `.ts` test, and createElement's variadic children do not satisfy a required prop
+					children: createElement(Outlet),
+				}),
+			),
+	});
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		validateSearch: (search: Record<string, unknown>) => search,
+		component: Outlet,
+	});
+	// 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 briefRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/brief",
+		component: BriefLayout,
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => briefRoute,
+		path: "$threadId",
+		component: Outlet,
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: () => createElement(BriefPane.Reading),
+	});
+	const replyRoute = createRoute({
+		getParentRoute: () => messageRoute,
+		path: "$mode/{-$outboxMessageId}",
+	});
+	const routeTree = rootRoute.addChildren([
+		mailRoute.addChildren([
+			mailboxRoute,
+			briefRoute.addChildren([
+				threadRoute.addChildren([messageRoute.addChildren([replyRoute])]),
+			]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: [href] }),
+	}) as unknown as AnyRouter;
+};
+
+/**
+ * Narrow, where the reading pane does not follow the cursor: on desktop the
+ * first `j` would open the row it lands on, which is the very state the closed
+ * case is here to read.
+ */
+const mountBrief = async (href: string): Promise<[DomHarness, AnyRouter]> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) return { accounts: [account] };
+		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
+			return { items: [threadMessage] };
+		}
+		if (call.path.endsWith(`/messages/${MESSAGE_ID}`)) return describeMessage;
+		if (call.path.includes("/threads")) return { items: [threadMessage] };
+		return { items: [] };
+	});
+
+	const router = briefRouter(href);
+	await router.load();
+	const mounted = createDomHarness({
+		viewportWidth: 420,
+		pointer: "coarse",
+		orientation: "portrait",
+	});
+	harness = mounted;
+	mounted.renderApp(createElement(RouterProvider, { router }));
+	await mounted.flush();
+	await mounted.wait(20);
+	await mounted.flush();
+	return [mounted, router];
+};
+
+describe("a real pane's own answer for hasOpenThread (#723)", () => {
+	it("leaves a with nothing to do while the brief has a thread open", async () => {
+		const [mounted, router] = await mountBrief(BRIEF_MESSAGE_PATH);
+
+		await press(mounted, "a");
+
+		assert.equal(
+			router.state.location.pathname,
+			BRIEF_MESSAGE_PATH,
+			"the brief answered a message of its own choosing under the open conversation",
+		);
+	});
+
+	it("answers the cursor's row with a once the brief has no thread open", async () => {
+		const [mounted, router] = await mountBrief(BRIEF_LIST_PATH);
+
+		await press(mounted, "j");
+		await press(mounted, "a");
+
+		assert.equal(
+			router.state.location.pathname,
+			`${BRIEF_MESSAGE_PATH}/reply-all`,
+			"the brief kept a dropped with no conversation to hand it to",
+		);
+	});
+});

package/src/hooks/useTriageLayer.ts

@@ -13,6 +13,13 @@
  * It is two hooks because a pane's verbs are aimed at the focused row: the
  * context comes first, the pane builds its handlers from it, and the keyboard
  * registration comes last.
+ *
+ * While a thread is open, `ConversationView` binds its own window listener for
+ * the messages inside it, and both used to act on one press (#723). The split
+ * is the one `shortcut-tree` already declares: the cursor keys belong to
+ * whichever surface has a list on screen, and answering a thread belongs to
+ * the open thread — so `hasOpenThread` hands r, a and f over, and the list
+ * keeps j/k, Home/End and Enter for as long as it is mounted.
  */
 import { type TriageHandlers, useTriageKeyboard } from "@remit/ui";
 import { type RefObject, useCallback, useRef, useState } from "react";
@@ -83,6 +90,16 @@ interface UseTriageLayerOptions {
 	onClose: () => void;
 	/** The pane's own verbs — reply, star, delete and the rest. */
 	handlers: TriageHandlers;
+	/**
+	 * A thread is open, so `ConversationView` is mounted and answers for it.
+	 * This layer drops the three verbs aimed at a whole message — `reply`,
+	 * `replyAll` and `forward` — while that is true, so one press opens one
+	 * reply (#723) and `a` can never answer a different message than `r` just
+	 * did. The cursor keys are not in here: a mounted list keeps those at every
+	 * width, and it is the conversation that stands down from them wherever the
+	 * list is on screen beside it (`ConversationView.listOnScreen`).
+	 */
+	hasOpenThread?: boolean;
 }
 
 export interface TriageLayer {
@@ -99,6 +116,7 @@ export const useTriageLayer = ({
 	enabled = true,
 	onClose,
 	handlers,
+	hasOpenThread = false,
 }: UseTriageLayerOptions): TriageLayer => {
 	const { listCommandsRef, hasList, blocksKeyboard } = context;
 
@@ -107,6 +125,12 @@ export const useTriageLayer = ({
 		if (selectedMessageId) onClose();
 	}, [listCommandsRef, selectedMessageId, onClose]);
 
+	// Dropped rather than kept and guarded: an unregistered action is never
+	// preventDefault-ed (see useTriageKeyboard), so the keystroke falls through
+	// to ConversationView's own listener instead of two handlers racing on one
+	// keypress.
+	const { reply, replyAll, forward, ...restHandlers } = handlers;
+
 	useTriageKeyboard({
 		// A modal owns the keyboard outright. Suspending the layer is what keeps a
 		// second Delete press from reaching a delete while the confirmation for the
@@ -131,7 +155,8 @@ export const useTriageLayer = ({
 					}
 				: {}),
 			back: goBack,
-			...handlers,
+			...restHandlers,
+			...(hasOpenThread ? {} : { reply, replyAll, forward }),
 		},
 	});