@remit/web-client 0.0.153 → 0.0.154

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.153",
+  "version": "0.0.154",
   "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/ComposeProvider.tsx

@@ -115,15 +115,11 @@ export const ComposeProvider = ({
 	// mounts `FullCompose`, and only with no thread in the pane it takes over.
 	const openCompose = useCallback(
 		(params: Omit<ComposeState, "isOpen">) => {
-			const search = location.search as Record<string, unknown>;
-			// A folder names its open conversation in the path, so leaving it is a
-			// navigation up to the list; the lists still to move name it in the query.
+			// Every list names its open conversation in the path, so leaving one is a
+			// navigation up to the list.
 			const threadMailboxId = locationOpensDetail(location.pathname)
 				? routeParams?.mailboxId
 				: undefined;
-			const showsThread =
-				Boolean(threadMailboxId) ||
-				Boolean(search.selectedMessageId ?? search.selectedThreadId);
 			if (!hostsComposeSurface(location.pathname)) {
 				if (target.status === "loading") {
 					pushError({
@@ -150,33 +146,15 @@ export const ComposeProvider = ({
 				return;
 			}
 			setState({ ...params, isOpen: true });
-			if (!showsThread) return;
+			if (!threadMailboxId) return;
 			// A push, so Back reopens the message.
-			if (threadMailboxId) {
-				navigate({
-					to: "/mail/$mailboxId",
-					params: { mailboxId: threadMailboxId },
-					search: (prev) => prev,
-				});
-				return;
-			}
 			navigate({
-				to: ".",
-				search: (prev: Record<string, unknown>) => ({
-					...prev,
-					selectedMessageId: undefined,
-					selectedThreadId: undefined,
-				}),
+				to: "/mail/$mailboxId",
+				params: { mailboxId: threadMailboxId },
+				search: (prev) => prev,
 			});
 		},
-		[
-			navigate,
-			location.pathname,
-			location.search,
-			routeParams?.mailboxId,
-			target,
-			pushError,
-		],
+		[navigate, location.pathname, routeParams?.mailboxId, target, pushError],
 	);
 
 	const closeCompose = useCallback(() => {

package/src/components/compose/compose-clears-open-thread.render.test.ts

@@ -62,8 +62,29 @@ const RootLayout = () =>
 		createElement(Outlet),
 	);
 
+/**
+ * The folder's real shape: the thread and the message are segments under the
+ * list, so an open conversation is something the address holds and compose has
+ * to navigate out of.
+ */
 const routerAt = (href: string, layout = RootLayout): AnyRouter => {
 	const rootRoute = createRootRoute({ component: layout });
+	const mailboxRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail/$mailboxId",
+		validateSearch: (search: Record<string, unknown>) => search,
+		component: Outlet,
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "/$threadId",
+		component: Outlet,
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "/$messageId",
+		component: () => null,
+	});
 	const routeTree = rootRoute.addChildren([
 		createRoute({
 			getParentRoute: () => rootRoute,
@@ -71,12 +92,7 @@ const routerAt = (href: string, layout = RootLayout): AnyRouter => {
 			validateSearch: (search: Record<string, unknown>) => search,
 			component: () => null,
 		}),
-		createRoute({
-			getParentRoute: () => rootRoute,
-			path: "/mail/$mailboxId",
-			validateSearch: (search: Record<string, unknown>) => search,
-			component: () => null,
-		}),
+		mailboxRoute.addChildren([threadRoute.addChildren([messageRoute])]),
 		createRoute({
 			getParentRoute: () => rootRoute,
 			path: "/settings",
@@ -145,11 +161,11 @@ const press = async (mounted: DomHarness): Promise<HTMLElement> => {
 	return button;
 };
 
+const THREAD_HREF = `/mail/${INBOX_ID}/th-1/msg-1`;
+
 describe("opening compose over an open message (#703)", () => {
-	it("drops the selected message so the pane can render the surface", async () => {
-		const router = routerAt(
-			`/mail/${INBOX_ID}?selectedMessageId=msg-1&selectedThreadId=th-1`,
-		);
+	it("walks up to the list so the pane can render the surface", async () => {
+		const router = routerAt(THREAD_HREF);
 		const mounted = await mount(router);
 
 		const button = mounted.byText("button", "Compose");
@@ -159,33 +175,27 @@ describe("opening compose over an open message (#703)", () => {
 
 		assert.equal(button.getAttribute("data-open"), "true");
 		assert.equal(router.history.location.pathname, `/mail/${INBOX_ID}`);
-		const search = router.history.location.search;
-		assert.equal(search.includes("selectedMessageId"), false);
-		assert.equal(search.includes("selectedThreadId"), false);
 	});
 
-	it("keeps the rest of the query, so the search the user typed survives", async () => {
-		const router = routerAt(
-			`/mail/${INBOX_ID}?q=invoice&selectedMessageId=msg-1`,
-		);
+	it("keeps the query, so the search the user typed survives", async () => {
+		const router = routerAt(`${THREAD_HREF}?q=invoice`);
 		const mounted = await mount(router);
 
 		await press(mounted);
 
-		const search = router.history.location.search;
-		assert.equal(search.includes("selectedMessageId"), false);
-		assert.match(search, /q=invoice/);
+		assert.equal(router.history.location.pathname, `/mail/${INBOX_ID}`);
+		assert.match(router.history.location.search, /q=invoice/);
 	});
 
 	it("leaves the message one Back away rather than erasing it", async () => {
-		const router = routerAt(`/mail/${INBOX_ID}?selectedMessageId=msg-1`);
+		const router = routerAt(THREAD_HREF);
 		const mounted = await mount(router);
 
 		await press(mounted);
 		router.history.back();
 		await mounted.flush();
 
-		assert.match(router.history.location.search, /selectedMessageId=msg-1/);
+		assert.equal(router.history.location.pathname, THREAD_HREF);
 	});
 
 	it("adds no history entry when the pane had nothing open", async () => {

package/src/components/layout/ComposeFab.tsx

@@ -14,9 +14,7 @@ import { locationOpensDetail } from "@/lib/mail-route";
  *     `lg:hidden` class covers the pre-hydration frame.
  *   - The compose surface is already open.
  *   - The user is reading a thread — the single pane is the conversation, and
- *     its reply bar is under this corner. The brief and a folder say so in
- *     their path; the flagged list, still to move, says so in
- *     `?selectedMessageId=…`.
+ *     its reply bar is under this corner. Every list says so in its path.
  *   - The user is off `/mail`, which is every route with no mail in it.
  */
 export const ComposeFab = () => {
@@ -26,10 +24,7 @@ export const ComposeFab = () => {
 		openCompose({ mode: "new" });
 	}, [openCompose]);
 
-	const search = location.search as Record<string, unknown> | undefined;
-	const isReadingThread =
-		Boolean(search?.selectedMessageId) ||
-		locationOpensDetail(location.pathname);
+	const isReadingThread = locationOpensDetail(location.pathname);
 
 	if (!location.pathname.startsWith("/mail") || state.isOpen || isReadingThread)
 		return null;

package/src/components/mail/FlaggedList.tsx

@@ -3,19 +3,20 @@
  *
  * Reads the starred listing through `useStarredThreads` — GET /threads with
  * `starred=true`, served by the `byStarred` index — which returns every starred
- * thread in the config across all non-muted mailboxes, paged. `FlaggedPane`
- * resolves the open thread from that same hook, so every row rendered here can
- * be opened. Starredness is decided server-side from `hasStars`; the client
- * neither re-filters nor caps the set, so a starred thread outside the newest
- * inbox page still appears. Rendered as one continuous list (no category
- * sections). The shared `MailViewChrome` owns the `MailHeader` + filter
- * expando; the kit `MessageListPane` (flat, no `briefFilters`) owns the loading
- * / empty / error chrome and keyboard hints, with a consumer-supplied
- * `listBody` so the real rows render at every width.
+ * thread in the config across all non-muted mailboxes, paged. Every row names
+ * its thread, which is the whole address a conversation opens by, so a starred
+ * message filed outside the inbox opens like any other. Starredness is decided
+ * server-side from `hasStars`; the client neither re-filters nor caps the set,
+ * so a starred thread outside the newest inbox page still appears. Rendered as
+ * one continuous list (no category sections). The shared `MailViewChrome` owns
+ * the `MailHeader` + filter expando; the kit `MessageListPane` (flat, no
+ * `briefFilters`) owns the loading / empty / error chrome and keyboard hints,
+ * with a consumer-supplied `listBody` so the real rows render at every width.
  */
 import {
 	flaggedFilterConfig,
 	MessageListPane,
+	type SearchResult,
 	type ThreadRowData,
 	type Verb,
 } from "@remit/ui";
@@ -37,6 +38,7 @@ import { rowToSearchResult } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
 import { dedupeByThread } from "@/lib/starred-rows";
 import { useSelectionWizard } from "@/lib/wizard-history";
+import type { OpenThreadTarget } from "@/routing";
 import { MailViewChrome } from "./MailViewChrome";
 import type { MessageListCommands } from "./MessageList";
 import { MessageRow } from "./MessageRow";
@@ -101,7 +103,14 @@ function StarredWizardHost({
 
 interface FlaggedListProps {
 	selectedMessageId?: string;
-	onSelectMessage?: (id: string, options?: OpenMessageOptions) => void;
+	/**
+	 * Opens a row. Every starred row names its thread, so a message filed outside
+	 * the inbox opens by exactly the same route as one inside it.
+	 */
+	onOpenThread?: (
+		target: OpenThreadTarget,
+		options?: OpenMessageOptions,
+	) => void;
 	/** Where the list publishes the commands the keyboard layer drives. */
 	commandsRef?: RefObject<MessageListCommands | null>;
 	/** Cursor / selection / display order, reported up to the triage layer. */
@@ -111,7 +120,7 @@ interface FlaggedListProps {
 
 export function FlaggedList({
 	selectedMessageId,
-	onSelectMessage,
+	onOpenThread,
 	commandsRef,
 	onTriageContextChange,
 	onDeleteMessages,
@@ -171,6 +180,27 @@ export function FlaggedList({
 			);
 	}, [threads, selectedCategory, activeFilters, sq, queryTokens]);
 
+	const openRow = useCallback(
+		(id: string, options?: OpenMessageOptions) => {
+			const threadId = rows.find((row) => row.id === id)?.threadId;
+			if (!threadId) return;
+			onOpenThread?.({ threadId, messageId: id }, options);
+		},
+		[rows, onOpenThread],
+	);
+
+	// The two-engine results panel, whose semantic hits are in no list at all —
+	// each one carries the thread it belongs to.
+	const openResult = useCallback(
+		(result: SearchResult) => {
+			const threadId =
+				result.threadId ?? rows.find((row) => row.id === result.id)?.threadId;
+			if (!threadId) return;
+			onOpenThread?.({ threadId, messageId: result.id });
+		},
+		[rows, onOpenThread],
+	);
+
 	const preset = useMemo(() => flaggedFilterConfig(), []);
 
 	const searchResults = useMemo(
@@ -206,7 +236,7 @@ export function FlaggedList({
 							key={thread.id}
 							thread={thread}
 							active={thread.id === selectedMessageId}
-							onClick={() => onSelectMessage?.(thread.id)}
+							onClick={() => openRow(thread.id)}
 						/>
 					))}
 				</div>
@@ -236,7 +266,7 @@ export function FlaggedList({
 			onClearFilters={clearFilters}
 			searchResults={searchResults}
 			searchLoading={isLoading}
-			onSelectSearchResult={(result) => onSelectMessage?.(result.id)}
+			onSelectSearchResult={openResult}
 			// A committed search renders in this view's own rows (`rows` already
 			// narrows to the query above), so the multi-select toolbar stays
 			// reachable exactly as it does on the mailbox route (#212). The
@@ -245,7 +275,7 @@ export function FlaggedList({
 		>
 			<ThreadListInteraction
 				selectedMessageId={selectedMessageId}
-				onOpen={(id, options) => onSelectMessage?.(id, options)}
+				onOpen={openRow}
 				onDeleteMessages={onDeleteMessages}
 				onSelectionVerb={wizard.start}
 				wizardOpen={wizard.isOpen}
@@ -263,7 +293,7 @@ export function FlaggedList({
 					onRetry={() => refetch()}
 					onReportError={handleReportError}
 					selectedThreadId={selectedMessageId}
-					onSelectThread={onSelectMessage}
+					onSelectThread={openRow}
 					isDesktop={isDesktop}
 					selectionBar={<ThreadListSelectionBar title="Starred" />}
 					listBody={

package/src/components/mail/FlaggedPane.tsx

@@ -6,15 +6,19 @@
  * reading / phone slots. The list itself is a FLAT inbox of starred mail (see
  * `FlaggedList`), not the sectioned brief.
  *
- * The selection resolves from the starred listing, the same query that produced
- * the rows. The unified listing is INBOX-scoped, so resolving against it left
- * every starred thread filed elsewhere — Sent, an archive folder, anything past
- * the inbox window — visible in the list but impossible to open (issue #70).
+ * The row prefers the starred listing, the same query that produced the rows,
+ * and falls back to resolving the thread on its own when the address names
+ * one the listing doesn't hold. The unified listing is INBOX-scoped, so
+ * resolving against it left every starred thread filed elsewhere — Sent, an
+ * archive folder, anything past the inbox window — visible in the list but
+ * impossible to open (issue #70).
  *
- *   <FlaggedPane selectedMessageId={...}>
- *     <AppShellSlotted
+ * Usage in the list layout route:
+ *
+ *   <FlaggedPane thread={useOpenThreadPath()}>
+ *     <MailShell
  *       list={<FlaggedPane.List />}
- *       reading={<FlaggedPane.Reading />}
+ *       reading={<Outlet />}
  *     />
  *   </FlaggedPane>
  *
@@ -40,22 +44,34 @@ import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { useStarredThreads } from "@/hooks/useStarredThreads";
 import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
+import { useThreadRow } from "@/hooks/useThreadRow";
 import {
 	type TriageContext,
 	useTriageContext,
 	useTriageLayer,
 } from "@/hooks/useTriageLayer";
+import type { ConversationTarget } from "@/lib/conversation-target";
 import { useMailContext } from "@/lib/mail-context";
+import type { OpenThreadPath, OpenThreadTarget } from "@/routing";
 
 /* ------------------------------------------------------------------ */
 /* Context                                                              */
 /* ------------------------------------------------------------------ */
 
 interface FlaggedPaneContextValue {
+	/** The row the reader pointed at, which is the one the list highlights. */
 	selectedMessageId: string | undefined;
 	selectedThread: RemitImapThreadMessageResponse | undefined;
-	onSelectMessage: (id: string, options?: OpenMessageOptions) => void;
+	/** The conversation the pane shows, or none when the address names no thread. */
+	conversation: ConversationTarget | undefined;
+	onOpenThread: (
+		target: OpenThreadTarget,
+		options?: OpenMessageOptions,
+	) => void;
 	onCloseThread: () => void;
+	/** The rows either side of the open one — the phone's swipe gestures. */
+	nextThread: OpenThreadTarget | undefined;
+	previousThread: OpenThreadTarget | undefined;
 	/**
 	 * Toolbar verbs for the open thread, keyed by the thread's own mailbox and
 	 * account — Flagged spans accounts, so there is no route mailbox to key by.
@@ -64,8 +80,6 @@ interface FlaggedPaneContextValue {
 	/** Keyboard, multi-select and next/previous, shared with the mailbox view. */
 	triage: TriageContext;
 	onDeleteMessages: (messageIds: string[]) => void;
-	nextMessageId: string | undefined;
-	previousMessageId: string | undefined;
 	/**
 	 * Deselects the open message when it's the one a mutation just removed
 	 * from view — wired into every mutation that can take the open message out
@@ -88,39 +102,65 @@ function useFlaggedPane(): FlaggedPaneContextValue {
 /* ------------------------------------------------------------------ */
 
 interface FlaggedPaneProps {
-	selectedMessageId: string | undefined;
+	/** The open conversation, as the address states it. */
+	thread: OpenThreadPath | undefined;
 	children: ReactNode;
 }
 
-function FlaggedPaneProvider({
-	selectedMessageId,
-	children,
-}: FlaggedPaneProps) {
+function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 	const navigate = useNavigate();
+	const { searchInput } = useMailContext();
+	const threadId = thread?.threadId;
+	const pointedAtMessageId = thread?.messageId;
 
 	const { threads } = useStarredThreads();
 
-	const selectedThread = useMemo(() => {
-		if (!selectedMessageId) return undefined;
-		return threads.find((t) => t.messageId === selectedMessageId);
-	}, [threads, selectedMessageId]);
+	// The row the starred listing itself holds, preferred because a mutation
+	// patches it in place. A thread reached from a cold address is in no listing
+	// here and answers for itself — the folder it is filed in is the thread's own
+	// data, so Starred spanning folders costs the URL nothing.
+	const listedThread = useMemo(() => {
+		if (!threadId) return undefined;
+		return (
+			threads.find((t) => t.messageId === pointedAtMessageId) ??
+			threads.find((t) => t.threadId === threadId)
+		);
+	}, [threads, threadId, pointedAtMessageId]);
+	const ownRow = useThreadRow(threadId, pointedAtMessageId);
+	const selectedThread = listedThread ?? ownRow;
+
+	const selectedMessageId = pointedAtMessageId ?? selectedThread?.messageId;
 
-	const handleSelectMessage = useCallback(
-		(id: string, options?: OpenMessageOptions) => {
+	const conversation = useMemo<ConversationTarget | undefined>(() => {
+		if (!threadId) return undefined;
+		return {
+			threadId,
+			mailboxId: selectedThread?.mailboxId ?? "",
+			subject: selectedThread?.subject,
+			messageId: selectedMessageId,
+			authenticity: selectedThread?.authenticity,
+		};
+	}, [threadId, selectedThread, selectedMessageId]);
+
+	const handleOpenThread = useCallback(
+		(target: OpenThreadTarget, options?: OpenMessageOptions) => {
 			navigate({
-				to: "/mail/flagged",
-				search: (prev) => ({ ...prev, selectedMessageId: id }),
+				to: "/mail/flagged/$threadId/$messageId",
+				params: target,
 				replace: options?.replace,
+				// Commit the active query with the open so the debounced q-mirror —
+				// which walks back up to the list when the query goes active — is
+				// already satisfied and leaves the conversation alone. The *live*
+				// `searchInput`: a row can be tapped before the debounce settles, when
+				// the committed query is still empty.
+				search: (prev) => ({ ...prev, q: searchInput || undefined }),
 			});
 		},
-		[navigate],
+		[navigate, searchInput],
 	);
 
 	const handleCloseThread = useCallback(() => {
-		navigate({
-			to: "/mail/flagged",
-			search: (prev) => ({ ...prev, selectedMessageId: undefined }),
-		});
+		navigate({ to: "/mail/flagged", search: (prev) => prev });
 	}, [navigate]);
 
 	const handleDeselectIfRemoved = useCallback(
@@ -187,16 +227,29 @@ function FlaggedPaneProvider({
 		},
 	});
 
+	// The swipe gestures open a whole conversation, so the adjacent row has to
+	// name its thread. The starred listing is where that is looked up, so a row
+	// it does not hold offers no gesture rather than a tap that goes nowhere.
+	const adjacentThread = useCallback(
+		(messageId: string | undefined): OpenThreadTarget | undefined => {
+			if (!messageId) return undefined;
+			const row = threads.find((t) => t.messageId === messageId);
+			return row ? { threadId: row.threadId, messageId } : undefined;
+		},
+		[threads],
+	);
+
 	const ctx: FlaggedPaneContextValue = {
 		selectedMessageId,
 		selectedThread,
-		onSelectMessage: handleSelectMessage,
+		conversation,
+		onOpenThread: handleOpenThread,
 		onCloseThread: handleCloseThread,
+		nextThread: adjacentThread(nextMessageId),
+		previousThread: adjacentThread(previousMessageId),
 		actions,
 		triage,
 		onDeleteMessages: deleteMessages,
-		nextMessageId,
-		previousMessageId,
 		handleDeselectIfRemoved,
 	};
 
@@ -211,12 +264,12 @@ function FlaggedPaneProvider({
 
 /** Flat starred list. Mount in the `list` slot of `AppShellSlotted`. */
 function FlaggedListSlot() {
-	const { selectedMessageId, onSelectMessage, triage, onDeleteMessages } =
+	const { selectedMessageId, onOpenThread, triage, onDeleteMessages } =
 		useFlaggedPane();
 	return (
 		<FlaggedList
 			selectedMessageId={selectedMessageId}
-			onSelectMessage={onSelectMessage}
+			onOpenThread={onOpenThread}
 			commandsRef={triage.listCommandsRef}
 			onTriageContextChange={triage.onTriageContextChange}
 			onDeleteMessages={onDeleteMessages}
@@ -229,13 +282,13 @@ function FlaggedListSlot() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function FlaggedReading() {
-	const { selectedThread, actions } = useFlaggedPane();
+	const { conversation, actions } = 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 hasThread = Boolean(selectedThread);
+	const hasThread = Boolean(conversation);
 	const canToggleIntelligence = railFits && hasThread;
 
 	return (
@@ -266,12 +319,13 @@ function FlaggedReading() {
 				}
 			/>
 			<div className="min-h-0 flex-1 overflow-hidden">
-				{selectedThread ? (
+				{conversation ? (
 					<ConversationView
-						threadId={selectedThread.threadId}
-						mailboxId={selectedThread.mailboxId}
-						subject={selectedThread.subject}
-						authenticity={selectedThread.authenticity}
+						threadId={conversation.threadId}
+						mailboxId={conversation.mailboxId}
+						subject={conversation.subject}
+						selectedMessageId={conversation.messageId}
+						authenticity={conversation.authenticity}
 						composeRequest={actions.composeRequest}
 						onComposeClose={actions.clearComposeRequest}
 					/>
@@ -306,31 +360,29 @@ function FlaggedIntelligence() {
 function FlaggedPhone() {
 	const {
 		selectedThread,
+		conversation,
 		onCloseThread,
-		onSelectMessage,
-		nextMessageId,
-		previousMessageId,
+		onOpenThread,
+		nextThread,
+		previousThread,
 		handleDeselectIfRemoved,
 	} = useFlaggedPane();
 	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
 
-	if (selectedThread) {
+	if (conversation) {
 		return (
 			<>
 				<ConversationView
-					threadId={selectedThread.threadId}
-					mailboxId={selectedThread.mailboxId}
-					subject={selectedThread.subject}
-					authenticity={selectedThread.authenticity}
+					threadId={conversation.threadId}
+					mailboxId={conversation.mailboxId}
+					subject={conversation.subject}
+					selectedMessageId={conversation.messageId}
+					authenticity={conversation.authenticity}
 					onBack={onCloseThread}
 					onOpenIntelligence={onToggleIntelligence}
-					onSwipeNext={
-						nextMessageId ? () => onSelectMessage(nextMessageId) : undefined
-					}
+					onSwipeNext={nextThread ? () => onOpenThread(nextThread) : undefined}
 					onSwipePrevious={
-						previousMessageId
-							? () => onSelectMessage(previousMessageId)
-							: undefined
+						previousThread ? () => onOpenThread(previousThread) : undefined
 					}
 					mobileIntelligenceOpen={intelligenceOpen}
 				/>

package/src/components/mail/MailSidebarAdapter.tsx

@@ -258,7 +258,7 @@ export function MailSidebarAdapter({
 			return (
 				<NavLink
 					to="/mail/flagged"
-					search={{ q: undefined, selectedMessageId: undefined }}
+					search={{ q: undefined }}
 					onClick={() => onClick?.()}
 					className={className}
 					aria-label={ariaLabel}

package/src/components/mail/MessageActionMenu.tsx

@@ -4,7 +4,7 @@ import {
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import {
 	BadgeCheck,
 	Check,
@@ -104,15 +104,7 @@ export const MessageActionMenu = ({
 	const queryClient = useQueryClient();
 	const navigate = useNavigate();
 	const { pushError } = useErrorBanners();
-	// Which message the address has open. The brief and a folder say so in their
-	// path; the flagged list, still to move, says so in `?selectedMessageId=`.
-	const openThread = useOpenThreadPath();
-	const { selectedMessageId: selectedFromQuery } = useSearch({
-		strict: false,
-	}) as {
-		selectedMessageId?: string;
-	};
-	const selectedMessageId = openThread?.messageId ?? selectedFromQuery;
+	const selectedMessageId = useOpenThreadPath()?.messageId;
 
 	const { mutate: updateFlags, isPending: isUpdatingFlags } = useMutation({
 		...messageBulkOperationsUpdateFlagsMutation(),

package/src/components/mail/MessageList.tsx

@@ -243,7 +243,7 @@ export const MessageList = ({
 	const { pushError } = useErrorBanners();
 
 	// Roving focus cursor (#429): the keyboard "where am I" pointer, distinct
-	// from the open thread (`selectedMessageId` in the URL). j/k move this
+	// from the open thread (the message segment in the path). j/k move this
 	// cursor; Enter opens the focused row → sets selected, and on desktop the
 	// reading pane follows the cursor of its own accord (see the follow-focus
 	// wiring below). It seeds from the open thread so opening a message also

package/src/hooks/search-mirror-detail.render.test.ts

@@ -1,5 +1,5 @@
 /**
- * Where the search mirror writes, now that the brief's open thread is a path
+ * Where the search mirror writes, now that a list's open thread is a path
  * segment (#718).
  *
  * Mirroring `q` used to be one navigation with one destination, because the
@@ -8,9 +8,12 @@
  * walking up to the list — while every other write has to keep the address it
  * found, or clearing the search would shut the conversation being read.
  *
- * Driven through a real router over the brief's real route shape, because the
+ * Driven through a real router over each list's real route shape, because the
  * whole question is what the router resolves a destination to from a thread
- * route. Reasoning about `to: "."` is not evidence.
+ * route under it. Reasoning about `to: "."` is not evidence. The brief and the
+ * flagged list share this exact shape — a flat/sectioned list with a
+ * `$threadId/$messageId` pair below it — so the two are driven through the
+ * same cases rather than one covering for the other.
  */
 
 import assert from "node:assert/strict";
@@ -45,14 +48,18 @@ afterEach(() => {
 const THREAD_ID = "th-1";
 const MESSAGE_ID = "msg-1";
 
-const mailContext = (input: string, committed: string): MailContextValue => ({
+const mailContext = (
+	input: string,
+	committed: string,
+	searchViewKey: string,
+): MailContextValue => ({
 	accounts: [],
 	mailboxNameIndex: new Map(),
 	accountNameIndex: new Map(),
 	resultFolderIndex: EMPTY_RESULT_FOLDER_INDEX,
 	searchQuery: committed,
 	searchInput: input,
-	searchViewKey: "/mail/brief",
+	searchViewKey,
 	onSearchChange: () => {},
 	onSearchClear: () => {},
 	onSearchClearQuery: () => {},
@@ -61,11 +68,15 @@ const mailContext = (input: string, committed: string): MailContextValue => ({
 	onSetIntelligenceOpen: () => {},
 });
 
+type ListPath = "/mail/brief" | "/mail/flagged";
+
 /**
- * The brief's shape: the list is a layout route and the thread and message are
- * segments under it, so a write from the list has a matched child to lose.
+ * Both lists' shape: the list is a layout route and the thread and message
+ * are segments under it, so a write from the list has a matched child to
+ * lose.
  */
-const routerAt = (href: string): AnyRouter => {
+const routerAt = (listPath: ListPath, href: string): AnyRouter => {
+	const listSegment = listPath.slice("/mail".length);
 	const rootRoute = createRootRoute({ component: Outlet });
 	const passthrough = (search: Record<string, unknown>) => search;
 	const mailRoute = createRoute({
@@ -74,17 +85,17 @@ const routerAt = (href: string): AnyRouter => {
 		validateSearch: passthrough,
 		component: Outlet,
 	});
-	const briefRoute = createRoute({
+	const listRoute = createRoute({
 		getParentRoute: () => mailRoute,
-		path: "/brief",
+		path: listSegment,
 		validateSearch: passthrough,
 		component: () => {
-			useSearchMirror({ to: "/mail/brief" });
+			useSearchMirror({ to: listPath });
 			return createElement(Outlet);
 		},
 	});
 	const threadRoute = createRoute({
-		getParentRoute: () => briefRoute,
+		getParentRoute: () => listRoute,
 		path: "/$threadId",
 		component: Outlet,
 	});
@@ -95,7 +106,7 @@ const routerAt = (href: string): AnyRouter => {
 	});
 	const routeTree = rootRoute.addChildren([
 		mailRoute.addChildren([
-			briefRoute.addChildren([threadRoute.addChildren([messageRoute])]),
+			listRoute.addChildren([threadRoute.addChildren([messageRoute])]),
 		]),
 	]);
 	return createRouter({
@@ -108,6 +119,7 @@ const mount = async (
 	router: AnyRouter,
 	input: string,
 	committed: string,
+	searchViewKey: string,
 ): Promise<DomHarness> => {
 	const created = createDomHarness();
 	harness = created;
@@ -115,7 +127,7 @@ const mount = async (
 	created.renderApp(
 		createElement(
 			MailContext.Provider,
-			{ value: mailContext(input, committed) },
+			{ value: mailContext(input, committed, searchViewKey) },
 			createElement(RouterProvider, { router }),
 		),
 	);
@@ -124,58 +136,62 @@ const mount = async (
 	return created;
 };
 
-const threadHref = `/mail/brief/${THREAD_ID}/${MESSAGE_ID}`;
+const LIST_PATHS: ListPath[] = ["/mail/brief", "/mail/flagged"];
 
-describe("mirroring a query that goes active", () => {
-	it("walks up to the list, so no thread stays matched behind the results", async () => {
-		const router = routerAt(threadHref);
-		await mount(router, "invoice", "invoice");
+for (const listPath of LIST_PATHS) {
+	const threadHref = `${listPath}/${THREAD_ID}/${MESSAGE_ID}`;
 
-		assert.equal(router.history.location.pathname, "/mail/brief");
-		assert.match(router.history.location.search, /q=invoice/);
-	});
+	describe(`mirroring a query that goes active (${listPath})`, () => {
+		it("walks up to the list, so no thread stays matched behind the results", async () => {
+			const router = routerAt(listPath, threadHref);
+			await mount(router, "invoice", "invoice", listPath);
 
-	it("closes the pane from a bare thread address too", async () => {
-		const router = routerAt(`/mail/brief/${THREAD_ID}`);
-		await mount(router, "invoice", "invoice");
+			assert.equal(router.history.location.pathname, listPath);
+			assert.match(router.history.location.search, /q=invoice/);
+		});
 
-		assert.equal(router.history.location.pathname, "/mail/brief");
-	});
+		it("closes the pane from a bare thread address too", async () => {
+			const router = routerAt(listPath, `${listPath}/${THREAD_ID}`);
+			await mount(router, "invoice", "invoice", listPath);
+
+			assert.equal(router.history.location.pathname, listPath);
+		});
 
-	it("replaces rather than pushes, so Back is not a search step", async () => {
-		const router = routerAt(threadHref);
-		const before = router.history.length;
-		await mount(router, "invoice", "invoice");
+		it("replaces rather than pushes, so Back is not a search step", async () => {
+			const router = routerAt(listPath, threadHref);
+			const before = router.history.length;
+			await mount(router, "invoice", "invoice", listPath);
 
-		assert.equal(router.history.length, before);
+			assert.equal(router.history.length, before);
+		});
 	});
-});
 
-describe("mirroring a cleared query", () => {
-	it("keeps the conversation open — dropping the search is not closing it", async () => {
-		const router = routerAt(`${threadHref}?q=invoice`);
-		await mount(router, "", "");
+	describe(`mirroring a cleared query (${listPath})`, () => {
+		it("keeps the conversation open — dropping the search is not closing it", async () => {
+			const router = routerAt(listPath, `${threadHref}?q=invoice`);
+			await mount(router, "", "", listPath);
 
-		assert.equal(router.history.location.pathname, threadHref);
-		assert.equal(router.history.location.search.includes("q="), false);
-	});
+			assert.equal(router.history.location.pathname, threadHref);
+			assert.equal(router.history.location.search.includes("q="), false);
+		});
 
-	it("leaves the address alone when there is nothing to write", async () => {
-		const router = routerAt(`${threadHref}?q=invoice`);
-		await mount(router, "invoice", "invoice");
+		it("leaves the address alone when there is nothing to write", async () => {
+			const router = routerAt(listPath, `${threadHref}?q=invoice`);
+			await mount(router, "invoice", "invoice", listPath);
 
-		assert.equal(router.history.location.pathname, threadHref);
-		assert.match(router.history.location.search, /q=invoice/);
-	});
+			assert.equal(router.history.location.pathname, threadHref);
+			assert.match(router.history.location.search, /q=invoice/);
+		});
 
-	it("waits for the debounce rather than writing the previous query", async () => {
-		const router = routerAt(threadHref);
-		await mount(router, "invo", "");
+		it("waits for the debounce rather than writing the previous query", async () => {
+			const router = routerAt(listPath, threadHref);
+			await mount(router, "invo", "", listPath);
 
-		assert.equal(router.history.location.pathname, threadHref);
-		assert.equal(router.history.location.search.includes("q="), false);
+			assert.equal(router.history.location.pathname, threadHref);
+			assert.equal(router.history.location.search.includes("q="), false);
+		});
 	});
-});
+}
 
 /**
  * The other half of why a typed query survives an opened thread: the field
@@ -185,9 +201,12 @@ describe("mirroring a cleared query", () => {
  * Read off the matches the router resolved for a real address, so the ids under
  * test are the ones path segments produce rather than ids written out here.
  */
-describe("the view key of an open brief thread", () => {
-	const viewKeyAt = async (href: string): Promise<string> => {
-		const router = routerAt(href);
+describe("the view key of an open thread", () => {
+	const viewKeyAt = async (
+		listPath: ListPath,
+		href: string,
+	): Promise<string> => {
+		const router = routerAt(listPath, href);
 		await router.load();
 		return mailViewKey(
 			router.state.matches.map((match: { routeId: string }) => ({
@@ -196,10 +215,15 @@ describe("the view key of an open brief thread", () => {
 		);
 	};
 
-	it("is the brief's own, thread and message segments alike", async () => {
-		const list = await viewKeyAt("/mail/brief");
-		assert.notEqual(list, "", "the brief resolves to a view key at all");
-		assert.equal(await viewKeyAt(`/mail/brief/${THREAD_ID}`), list);
-		assert.equal(await viewKeyAt(threadHref), list);
-	});
+	for (const listPath of LIST_PATHS) {
+		it(`is the list's own, thread and message segments alike (${listPath})`, async () => {
+			const list = await viewKeyAt(listPath, listPath);
+			assert.notEqual(list, "", "the list resolves to a view key at all");
+			assert.equal(await viewKeyAt(listPath, `${listPath}/${THREAD_ID}`), list);
+			assert.equal(
+				await viewKeyAt(listPath, `${listPath}/${THREAD_ID}/${MESSAGE_ID}`),
+				list,
+			);
+		});
+	}
 });

package/src/hooks/useSearchMirror.ts

@@ -31,10 +31,9 @@ export type SearchMirrorTarget =
  * When a query *goes* active it also closes the reading pane (#539): an open
  * message from the pre-search list is not meaningful in the search result set.
  * The close is a navigation to the list route, which unmatches the thread that
- * was open under it — plus, until the remaining lists move their selection into
- * the path, dropping the params they still read it from. Any other write keeps
- * the address it found: mirroring a query the reader is editing, or clearing
- * one, must not shut the conversation they are reading.
+ * was open under it. Any other write keeps the address it found: mirroring a
+ * query the reader is editing, or clearing one, must not shut the conversation
+ * they are reading.
  *
  * Only on that transition, though — tapping a search result commits the same `q`
  * with the open thread, so when the URL already says the query the conversation
@@ -71,13 +70,6 @@ export function useSearchMirror(target: SearchMirrorTarget): void {
 		const search = (prev: Record<string, unknown>) => ({
 			...prev,
 			q: committedQuery || undefined,
-			...(queryGoesActive
-				? {
-						selectedMessageId: undefined,
-						selectedThreadId: undefined,
-						selectedMailboxId: undefined,
-					}
-				: {}),
 		});
 		if (!queryGoesActive) {
 			navigate({ to: ".", search, replace: true });

package/src/lib/mail-search.ts

@@ -16,13 +16,12 @@ const listSearch = z.object({ q: z.string().optional() });
  * The brief's open thread and the message inside it are path segments
  * (`/mail/brief/<thread>/<message>`), so the query carries nothing but the
  * search. An old link's selection params are dropped here, which is what
- * "tolerated and ignored" means until the remaining lists follow.
+ * "tolerated and ignored" means.
  */
 export const briefSearchSchema = listSearch.extend({});
 
-export const flaggedSearchSchema = listSearch.extend({
-	selectedMessageId: z.string().optional(),
-});
+/** The same, for `/mail/flagged/<thread>/<message>`. */
+export const flaggedSearchSchema = listSearch.extend({});
 
 /**
  * The outbox's open message is a path segment

package/src/routeTree.gen.ts

@@ -32,11 +32,14 @@ import { Route as MailMailboxIdThreadIdRouteImport } from './routes/mail/$mailbo
 import { Route as MailBriefIndexRouteImport } from './routes/mail/brief/index'
 import { Route as MailBriefThreadIdRouteImport } from './routes/mail/brief/$threadId'
 import { Route as MailFlaggedIndexRouteImport } from './routes/mail/flagged/index'
+import { Route as MailFlaggedThreadIdRouteImport } from './routes/mail/flagged/$threadId'
 import { Route as MailOutboxIndexRouteImport } from './routes/mail/outbox/index'
 import { Route as MailMailboxIdThreadIdIndexRouteImport } from './routes/mail/$mailboxId/$threadId/index'
 import { Route as MailMailboxIdThreadIdMessageIdRouteImport } from './routes/mail/$mailboxId/$threadId/$messageId'
 import { Route as MailBriefThreadIdIndexRouteImport } from './routes/mail/brief/$threadId/index'
 import { Route as MailBriefThreadIdMessageIdRouteImport } from './routes/mail/brief/$threadId/$messageId'
+import { Route as MailFlaggedThreadIdIndexRouteImport } from './routes/mail/flagged/$threadId/index'
+import { Route as MailFlaggedThreadIdMessageIdRouteImport } from './routes/mail/flagged/$threadId/$messageId'
 import { Route as MailOutboxDraftOutboxMessageIdRouteImport } from './routes/mail/outbox/draft/$outboxMessageId'
 
 const IndexRoute = IndexRouteImport.update({
@@ -154,6 +157,11 @@ const MailFlaggedIndexRoute = MailFlaggedIndexRouteImport.update({
   path: '/',
   getParentRoute: () => MailFlaggedRoute,
 } as any)
+const MailFlaggedThreadIdRoute = MailFlaggedThreadIdRouteImport.update({
+  id: '/$threadId',
+  path: '/$threadId',
+  getParentRoute: () => MailFlaggedRoute,
+} as any)
 const MailOutboxIndexRoute = MailOutboxIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -182,6 +190,18 @@ const MailBriefThreadIdMessageIdRoute =
     path: '/$messageId',
     getParentRoute: () => MailBriefThreadIdRoute,
   } as any)
+const MailFlaggedThreadIdIndexRoute =
+  MailFlaggedThreadIdIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => MailFlaggedThreadIdRoute,
+  } as any)
+const MailFlaggedThreadIdMessageIdRoute =
+  MailFlaggedThreadIdMessageIdRouteImport.update({
+    id: '/$messageId',
+    path: '/$messageId',
+    getParentRoute: () => MailFlaggedThreadIdRoute,
+  } as any)
 const MailOutboxDraftOutboxMessageIdRoute =
   MailOutboxDraftOutboxMessageIdRouteImport.update({
     id: '/draft/$outboxMessageId',
@@ -210,15 +230,18 @@ export interface FileRoutesByFullPath {
   '/settings/': typeof SettingsIndexRoute
   '/mail/$mailboxId/$threadId': typeof MailMailboxIdThreadIdRouteWithChildren
   '/mail/brief/$threadId': typeof MailBriefThreadIdRouteWithChildren
+  '/mail/flagged/$threadId': typeof MailFlaggedThreadIdRouteWithChildren
   '/mail/$mailboxId/': typeof MailMailboxIdIndexRoute
   '/mail/brief/': typeof MailBriefIndexRoute
   '/mail/flagged/': typeof MailFlaggedIndexRoute
   '/mail/outbox/': typeof MailOutboxIndexRoute
   '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRoute
   '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRoute
   '/mail/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
   '/mail/$mailboxId/$threadId/': typeof MailMailboxIdThreadIdIndexRoute
   '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
+  '/mail/flagged/$threadId/': typeof MailFlaggedThreadIdIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -239,9 +262,11 @@ export interface FileRoutesByTo {
   '/mail/outbox': typeof MailOutboxIndexRoute
   '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRoute
   '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRoute
   '/mail/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
   '/mail/$mailboxId/$threadId': typeof MailMailboxIdThreadIdIndexRoute
   '/mail/brief/$threadId': typeof MailBriefThreadIdIndexRoute
+  '/mail/flagged/$threadId': typeof MailFlaggedThreadIdIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -265,15 +290,18 @@ export interface FileRoutesById {
   '/settings/': typeof SettingsIndexRoute
   '/mail/$mailboxId/$threadId': typeof MailMailboxIdThreadIdRouteWithChildren
   '/mail/brief/$threadId': typeof MailBriefThreadIdRouteWithChildren
+  '/mail/flagged/$threadId': typeof MailFlaggedThreadIdRouteWithChildren
   '/mail/$mailboxId/': typeof MailMailboxIdIndexRoute
   '/mail/brief/': typeof MailBriefIndexRoute
   '/mail/flagged/': typeof MailFlaggedIndexRoute
   '/mail/outbox/': typeof MailOutboxIndexRoute
   '/mail/$mailboxId/$threadId/$messageId': typeof MailMailboxIdThreadIdMessageIdRoute
   '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/flagged/$threadId/$messageId': typeof MailFlaggedThreadIdMessageIdRoute
   '/mail/outbox/draft/$outboxMessageId': typeof MailOutboxDraftOutboxMessageIdRoute
   '/mail/$mailboxId/$threadId/': typeof MailMailboxIdThreadIdIndexRoute
   '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
+  '/mail/flagged/$threadId/': typeof MailFlaggedThreadIdIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -298,15 +326,18 @@ export interface FileRouteTypes {
     | '/settings/'
     | '/mail/$mailboxId/$threadId'
     | '/mail/brief/$threadId'
+    | '/mail/flagged/$threadId'
     | '/mail/$mailboxId/'
     | '/mail/brief/'
     | '/mail/flagged/'
     | '/mail/outbox/'
     | '/mail/$mailboxId/$threadId/$messageId'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/flagged/$threadId/$messageId'
     | '/mail/outbox/draft/$outboxMessageId'
     | '/mail/$mailboxId/$threadId/'
     | '/mail/brief/$threadId/'
+    | '/mail/flagged/$threadId/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -327,9 +358,11 @@ export interface FileRouteTypes {
     | '/mail/outbox'
     | '/mail/$mailboxId/$threadId/$messageId'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/flagged/$threadId/$messageId'
     | '/mail/outbox/draft/$outboxMessageId'
     | '/mail/$mailboxId/$threadId'
     | '/mail/brief/$threadId'
+    | '/mail/flagged/$threadId'
   id:
     | '__root__'
     | '/'
@@ -352,15 +385,18 @@ export interface FileRouteTypes {
     | '/settings/'
     | '/mail/$mailboxId/$threadId'
     | '/mail/brief/$threadId'
+    | '/mail/flagged/$threadId'
     | '/mail/$mailboxId/'
     | '/mail/brief/'
     | '/mail/flagged/'
     | '/mail/outbox/'
     | '/mail/$mailboxId/$threadId/$messageId'
     | '/mail/brief/$threadId/$messageId'
+    | '/mail/flagged/$threadId/$messageId'
     | '/mail/outbox/draft/$outboxMessageId'
     | '/mail/$mailboxId/$threadId/'
     | '/mail/brief/$threadId/'
+    | '/mail/flagged/$threadId/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -533,6 +569,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailFlaggedIndexRouteImport
       parentRoute: typeof MailFlaggedRoute
     }
+    '/mail/flagged/$threadId': {
+      id: '/mail/flagged/$threadId'
+      path: '/$threadId'
+      fullPath: '/mail/flagged/$threadId'
+      preLoaderRoute: typeof MailFlaggedThreadIdRouteImport
+      parentRoute: typeof MailFlaggedRoute
+    }
     '/mail/outbox/': {
       id: '/mail/outbox/'
       path: '/'
@@ -568,6 +611,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailBriefThreadIdMessageIdRouteImport
       parentRoute: typeof MailBriefThreadIdRoute
     }
+    '/mail/flagged/$threadId/': {
+      id: '/mail/flagged/$threadId/'
+      path: '/'
+      fullPath: '/mail/flagged/$threadId/'
+      preLoaderRoute: typeof MailFlaggedThreadIdIndexRouteImport
+      parentRoute: typeof MailFlaggedThreadIdRoute
+    }
+    '/mail/flagged/$threadId/$messageId': {
+      id: '/mail/flagged/$threadId/$messageId'
+      path: '/$messageId'
+      fullPath: '/mail/flagged/$threadId/$messageId'
+      preLoaderRoute: typeof MailFlaggedThreadIdMessageIdRouteImport
+      parentRoute: typeof MailFlaggedThreadIdRoute
+    }
     '/mail/outbox/draft/$outboxMessageId': {
       id: '/mail/outbox/draft/$outboxMessageId'
       path: '/draft/$outboxMessageId'
@@ -634,11 +691,26 @@ const MailBriefRouteWithChildren = MailBriefRoute._addFileChildren(
   MailBriefRouteChildren,
 )
 
+interface MailFlaggedThreadIdRouteChildren {
+  MailFlaggedThreadIdMessageIdRoute: typeof MailFlaggedThreadIdMessageIdRoute
+  MailFlaggedThreadIdIndexRoute: typeof MailFlaggedThreadIdIndexRoute
+}
+
+const MailFlaggedThreadIdRouteChildren: MailFlaggedThreadIdRouteChildren = {
+  MailFlaggedThreadIdMessageIdRoute: MailFlaggedThreadIdMessageIdRoute,
+  MailFlaggedThreadIdIndexRoute: MailFlaggedThreadIdIndexRoute,
+}
+
+const MailFlaggedThreadIdRouteWithChildren =
+  MailFlaggedThreadIdRoute._addFileChildren(MailFlaggedThreadIdRouteChildren)
+
 interface MailFlaggedRouteChildren {
+  MailFlaggedThreadIdRoute: typeof MailFlaggedThreadIdRouteWithChildren
   MailFlaggedIndexRoute: typeof MailFlaggedIndexRoute
 }
 
 const MailFlaggedRouteChildren: MailFlaggedRouteChildren = {
+  MailFlaggedThreadIdRoute: MailFlaggedThreadIdRouteWithChildren,
   MailFlaggedIndexRoute: MailFlaggedIndexRoute,
 }
 

package/src/routes/mail/flagged/$threadId/$messageId.tsx

@@ -0,0 +1,19 @@
+/**
+ * /mail/flagged/$threadId/$messageId — the same conversation, with one of its
+ * messages expanded and scrolled to.
+ *
+ * A message is not addressable on its own: `GET /messages/{messageId}` answers
+ * with no thread, so the pane has nothing to fetch by. The segment names which
+ * message inside the thread the reader pointed at, and the surface it renders is
+ * the thread's.
+ */
+import { createFileRoute } from "@tanstack/react-router";
+import { FlaggedPane } from "@/components/mail/FlaggedPane";
+
+function FlaggedMessagePane() {
+	return <FlaggedPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/flagged/$threadId/$messageId")({
+	component: FlaggedMessagePane,
+});

package/src/routes/mail/flagged/$threadId/index.tsx

@@ -0,0 +1,14 @@
+/**
+ * The thread with no message named. The pane opens on the newest message, the
+ * same as for a thread whose row the reader never pointed at.
+ */
+import { createFileRoute } from "@tanstack/react-router";
+import { FlaggedPane } from "@/components/mail/FlaggedPane";
+
+function FlaggedThreadPane() {
+	return <FlaggedPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/flagged/$threadId/")({
+	component: FlaggedThreadPane,
+});

package/src/routes/mail/flagged/$threadId.tsx

@@ -0,0 +1,16 @@
+/**
+ * /mail/flagged/$threadId — a conversation open in the flagged list's reading
+ * pane.
+ *
+ * Starred mail spans accounts and folders, and the thread is still the whole
+ * address: the folder its mail is filed in comes from the thread's own data,
+ * since `GET /threads/{threadId}/messages` answers with rows that each name
+ * their mailbox.
+ *
+ * A layout, because the message segment nests under it.
+ */
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/mail/flagged/$threadId")({
+	component: Outlet,
+});

package/src/routes/mail/flagged.tsx

@@ -2,7 +2,9 @@
  * /mail/flagged — the Flagged virtual mailbox, one of the four list layouts.
  *
  * A flat starred list across accounts; same slots as the brief, intelligence
- * rail included.
+ * rail included. The reading pane is the `Outlet`, so what it shows is whatever
+ * route matched below this one, and the open thread and the message inside it
+ * are the segments there rather than a selection read out of the query.
  */
 import {
 	createFileRoute,
@@ -14,6 +16,7 @@ import { FlaggedPane } from "@/components/mail/FlaggedPane";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { useSearchMirror } from "@/hooks/useSearchMirror";
 import { flaggedSearchSchema } from "@/lib/mail-search";
+import { useOpenThreadPath } from "@/routing";
 
 const FlaggedError = ({ error, reset }: ErrorComponentProps) => (
 	<div className="flex h-full items-center justify-center bg-canvas p-4">
@@ -26,17 +29,17 @@ const FlaggedError = ({ error, reset }: ErrorComponentProps) => (
 );
 
 function FlaggedLayout() {
-	const { selectedMessageId } = Route.useSearch();
+	const thread = useOpenThreadPath();
 	useSearchMirror({ to: "/mail/flagged" });
 
 	return (
-		<FlaggedPane selectedMessageId={selectedMessageId}>
+		<FlaggedPane thread={thread}>
 			<MailShell
 				phone={<FlaggedPane.Phone />}
 				list={<FlaggedPane.List />}
 				reading={<Outlet />}
 				intelligence={<FlaggedPane.Intelligence />}
-				hasThread={Boolean(selectedMessageId)}
+				hasThread={Boolean(thread)}
 			/>
 		</FlaggedPane>
 	);

package/src/routing/open-thread.ts

@@ -39,6 +39,14 @@ export function useOpenThreadPath(): OpenThreadPath | undefined {
 		from: "/mail/brief/$threadId/$messageId",
 		shouldThrow: false,
 	});
+	const flaggedThread = useParams({
+		from: "/mail/flagged/$threadId",
+		shouldThrow: false,
+	});
+	const flaggedMessage = useParams({
+		from: "/mail/flagged/$threadId/$messageId",
+		shouldThrow: false,
+	});
 	const mailboxThread = useParams({
 		from: "/mail/$mailboxId/$threadId",
 		shouldThrow: false,
@@ -48,8 +56,12 @@ export function useOpenThreadPath(): OpenThreadPath | undefined {
 		shouldThrow: false,
 	});
 
-	const threadId = briefThread?.threadId ?? mailboxThread?.threadId;
-	const messageId = briefMessage?.messageId ?? mailboxMessage?.messageId;
+	const threadId =
+		briefThread?.threadId ?? flaggedThread?.threadId ?? mailboxThread?.threadId;
+	const messageId =
+		briefMessage?.messageId ??
+		flaggedMessage?.messageId ??
+		mailboxMessage?.messageId;
 
 	return useMemo(
 		() => (threadId ? { threadId, messageId } : undefined),