@remit/web-client 0.0.146 → 0.0.147

package/package.json

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

@@ -2,6 +2,7 @@ import { useLocation } from "@tanstack/react-router";
 import { Pencil } from "lucide-react";
 import { useCallback } from "react";
 import { useCompose } from "@/components/compose/ComposeProvider";
+import { locationOpensDetail } from "@/lib/mail-route";
 
 /**
  * Floating Action Button for composing a new message. Mobile-only.
@@ -12,8 +13,9 @@ import { useCompose } from "@/components/compose/ComposeProvider";
  *     `/mail` shell also stops mounting the FAB above that width; the
  *     `lg:hidden` class covers the pre-hydration frame.
  *   - The compose surface is already open.
- *   - The user is reading a thread (`?selectedMessageId=…`) — the single
- *     pane is the conversation, and its reply bar is under this corner.
+ *   - The user is reading a thread — the single pane is the conversation, and
+ *     its reply bar is under this corner. The brief says so in its path; the
+ *     lists still to move say so in `?selectedMessageId=…`.
  *   - The user is off `/mail`, which is every route with no mail in it.
  */
 export const ComposeFab = () => {
@@ -24,7 +26,9 @@ export const ComposeFab = () => {
 	}, [openCompose]);
 
 	const search = location.search as Record<string, unknown> | undefined;
-	const isReadingThread = Boolean(search?.selectedMessageId);
+	const isReadingThread =
+		Boolean(search?.selectedMessageId) ||
+		locationOpensDetail(location.pathname);
 
 	if (!location.pathname.startsWith("/mail") || state.isOpen || isReadingThread)
 		return null;

package/src/components/mail/BriefPane.tsx

@@ -1,12 +1,12 @@
 /**
- * BriefPane — compound component for the daily-brief view (/mail route).
+ * BriefPane — compound component for the daily brief.
  *
- * Usage in mail.tsx:
+ * Usage in the list layout route:
  *
- *   <BriefPane selectedMessageId={...}>
- *     <AppShellSlotted
+ *   <BriefPane thread={useBriefThreadPath()}>
+ *     <MailShell
  *       list={<BriefPane.List />}
- *       reading={<BriefPane.Reading />}
+ *       reading={<Outlet />}
  *     />
  *   </BriefPane>
  *
@@ -14,13 +14,9 @@
  */
 import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import {
-	ReadingPaneEmpty,
-	type SearchResult,
-	useAppShellLayout,
-} from "@remit/ui";
+import { ReadingPaneEmpty, useAppShellLayout } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import {
 	createContext,
 	type ReactNode,
@@ -37,32 +33,34 @@ import type { OpenMessageOptions } from "@/components/mail/ThreadListInteraction
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
+import { useThreadRow } from "@/hooks/useThreadRow";
 import {
 	type TriageContext,
 	useTriageContext,
 	useTriageLayer,
 } from "@/hooks/useTriageLayer";
-import {
-	buildConversationTarget,
-	type ConversationTarget,
-} from "@/lib/conversation-target";
+import type { ConversationTarget } from "@/lib/conversation-target";
 import { useMailContext } from "@/lib/mail-context";
+import type { BriefThreadPath, BriefThreadTarget } from "@/routing";
 
 /* ------------------------------------------------------------------ */
 /* Context                                                              */
 /* ------------------------------------------------------------------ */
 
 interface BriefPaneContextValue {
+	/** The row the reader pointed at, which is the one the list highlights. */
 	selectedMessageId: string | undefined;
 	selectedThread: RemitImapThreadMessageResponse | undefined;
-	/** The conversation to open — the loaded thread, or a tapped "Related" hit. */
+	/** The conversation the pane shows, or none when the address names no thread. */
 	conversation: ConversationTarget | undefined;
-	onSelectMessage: (id: string, options?: OpenMessageOptions) => void;
-	onSelectSearchResult: (
-		result: SearchResult,
+	onOpenThread: (
+		target: BriefThreadTarget,
 		options?: OpenMessageOptions,
 	) => void;
 	onCloseThread: () => void;
+	/** The rows either side of the open one — the phone's swipe gestures. */
+	nextThread: BriefThreadTarget | undefined;
+	previousThread: BriefThreadTarget | undefined;
 	/**
 	 * Toolbar verbs for the open thread, keyed by the thread's own mailbox and
 	 * account — the brief spans accounts, so there is no route mailbox to key by.
@@ -71,8 +69,6 @@ interface BriefPaneContextValue {
 	/** 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
@@ -95,93 +91,79 @@ function useBriefPane(): BriefPaneContextValue {
 /* ------------------------------------------------------------------ */
 
 interface BriefPaneProps {
-	selectedMessageId: string | undefined;
+	/** The open conversation, as the address states it. */
+	thread: BriefThreadPath | undefined;
 	children: ReactNode;
 }
 
-function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
+function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 	const navigate = useNavigate();
 	const { searchInput } = useMailContext();
-	const { selectedThreadId, selectedMailboxId } = useSearch({
-		strict: false,
-	}) as { selectedThreadId?: string; selectedMailboxId?: string };
+	const threadId = thread?.threadId;
+	const pointedAtMessageId = thread?.messageId;
 
 	const { data: threadsData } = useQuery({
 		...unifiedThreadOperationsListAllThreadsOptions(),
 		staleTime: 60_000,
 	});
+	const briefThreads = useMemo(() => threadsData?.items ?? [], [threadsData]);
 
-	const selectedThread = useMemo(() => {
-		if (!selectedMessageId) return undefined;
-		return threadsData?.items.find((t) => t.messageId === selectedMessageId);
-	}, [threadsData, selectedMessageId]);
-
-	// A literal hit resolves to a loaded thread; a semantic "Related" hit may not
-	// be in the capped brief list, so fall back to the thread + mailbox the hit
-	// carried through the URL.
-	const conversation = useMemo(
-		() =>
-			buildConversationTarget(selectedThread, {
-				messageId: selectedMessageId,
-				threadId: selectedThreadId,
-				mailboxId: selectedMailboxId,
-			}),
-		[selectedThread, selectedMessageId, selectedThreadId, selectedMailboxId],
-	);
-
-	const handleSelectMessage = useCallback(
-		(id: string, options?: OpenMessageOptions) => {
-			navigate({
-				to: "/mail/brief",
-				search: (prev) => ({
-					...prev,
-					selectedMessageId: id,
-					selectedThreadId: undefined,
-					selectedMailboxId: undefined,
-				}),
-				replace: options?.replace,
-			});
-		},
-		[navigate],
-	);
-
-	const handleSelectSearchResult = useCallback(
-		(result: SearchResult, options?: OpenMessageOptions) => {
+	// The row the brief itself lists, preferred because a mutation patches it in
+	// place. A thread reached from a cross-folder search hit or a cold address is
+	// in no listing here, and answers for itself — which is where
+	// `selectedMailboxId` used to come in: the folder a thread is filed in is the
+	// thread's own data, so the brief spanning folders costs the URL nothing.
+	const listedThread = useMemo(() => {
+		if (!threadId) return undefined;
+		return (
+			briefThreads.find((t) => t.messageId === pointedAtMessageId) ??
+			briefThreads.find((t) => t.threadId === threadId)
+		);
+	}, [briefThreads, threadId, pointedAtMessageId]);
+	const ownRow = useThreadRow(threadId, pointedAtMessageId);
+	const selectedThread = listedThread ?? ownRow;
+
+	const selectedMessageId = pointedAtMessageId ?? selectedThread?.messageId;
+
+	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: BriefThreadTarget, options?: OpenMessageOptions) => {
 			navigate({
-				to: "/mail/brief",
+				to: "/mail/brief/$threadId/$messageId",
+				params: target,
 				replace: options?.replace,
-				search: (prev) => ({
-					...prev,
-					// Commit the active query with the selection so the debounced
-					// q-mirror (`useSearchMirror`) — which strips the selection when the query
-					// goes active — is already satisfied and leaves the opened result
-					// alone. Use the *live* `searchInput`: the row can be tapped before
-					// the debounce settles, when the committed query is still empty.
-					q: searchInput || undefined,
-					selectedMessageId: result.id,
-					selectedThreadId: result.threadId,
-					selectedMailboxId: result.mailboxId,
-				}),
+				// 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, searchInput],
 	);
 
+	const handleCloseThread = useCallback(() => {
+		navigate({ to: "/mail/brief", search: (prev) => prev });
+	}, [navigate]);
+
 	const handleDeselectIfRemoved = useCallback(
 		(removedIds: string[]) => {
 			if (!selectedMessageId) return;
 			if (!removedIds.includes(selectedMessageId)) return;
-			navigate({
-				to: "/mail/brief",
-				search: (prev) => ({
-					...prev,
-					selectedMessageId: undefined,
-					selectedThreadId: undefined,
-					selectedMailboxId: undefined,
-				}),
-			});
+			handleCloseThread();
 		},
-		[selectedMessageId, navigate],
+		[selectedMessageId, handleCloseThread],
 	);
 
 	const actions = useThreadActions({
@@ -189,24 +171,11 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 		onAfterOptimisticRemove: handleDeselectIfRemoved,
 	});
 
-	const handleCloseThread = useCallback(() => {
-		navigate({
-			to: "/mail/brief",
-			search: (prev) => ({
-				...prev,
-				selectedMessageId: undefined,
-				selectedThreadId: undefined,
-				selectedMailboxId: undefined,
-			}),
-		});
-	}, [navigate]);
-
 	const triage = useTriageContext();
 
 	// A brief selection spans accounts and mailboxes, so the listings these
 	// patch are resolved from each message's own mailbox — the open thread's is
 	// only the fallback.
-	const briefThreads = useMemo(() => threadsData?.items ?? [], [threadsData]);
 	const { deleteMessages } = useDeleteMessages({
 		mailboxId: selectedThread?.mailboxId ?? "",
 		messages: briefThreads,
@@ -219,8 +188,8 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 
 	const focusedThreadId = triage.focusedMessageId;
 	const focusedThread = useMemo(
-		() => threadsData?.items.find((t) => t.messageId === focusedThreadId),
-		[threadsData, focusedThreadId],
+		() => briefThreads.find((t) => t.messageId === focusedThreadId),
+		[briefThreads, focusedThreadId],
 	);
 	const triageTarget = focusedThread ?? selectedThread;
 	const triageActions = useThreadActions({ thread: triageTarget });
@@ -252,18 +221,29 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 		},
 	});
 
+	// The swipe gestures open a whole conversation, so the adjacent row has to
+	// name its thread. The brief's own 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): BriefThreadTarget | undefined => {
+			if (!messageId) return undefined;
+			const row = briefThreads.find((t) => t.messageId === messageId);
+			return row ? { threadId: row.threadId, messageId } : undefined;
+		},
+		[briefThreads],
+	);
+
 	const ctx: BriefPaneContextValue = {
 		selectedMessageId,
 		selectedThread,
 		conversation,
-		onSelectMessage: handleSelectMessage,
-		onSelectSearchResult: handleSelectSearchResult,
+		onOpenThread: handleOpenThread,
 		onCloseThread: handleCloseThread,
+		nextThread: adjacentThread(nextMessageId),
+		previousThread: adjacentThread(previousMessageId),
 		actions,
 		triage,
 		onDeleteMessages: deleteMessages,
-		nextMessageId,
-		previousMessageId,
 		handleDeselectIfRemoved,
 	};
 
@@ -278,21 +258,15 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
  * Daily brief list. Mount in the `list` slot of `AppShellSlotted`.
  */
 function BriefList() {
-	const {
-		selectedMessageId,
-		onSelectMessage,
-		onSelectSearchResult,
-		triage,
-		onDeleteMessages,
-	} = useBriefPane();
+	const { selectedMessageId, onOpenThread, triage, onDeleteMessages } =
+		useBriefPane();
 	const { accounts } = useMailContext();
 
 	return (
 		<DailyBrief
 			accounts={accounts}
 			selectedMessageId={selectedMessageId}
-			onSelectMessage={onSelectMessage}
-			onSelectSearchResult={onSelectSearchResult}
+			onOpenThread={onOpenThread}
 			commandsRef={triage.listCommandsRef}
 			onTriageContextChange={triage.onTriageContextChange}
 			onDeleteMessages={onDeleteMessages}
@@ -386,10 +360,10 @@ function BriefPhone() {
 	const {
 		selectedThread,
 		conversation,
-		onSelectMessage,
+		onOpenThread,
 		onCloseThread,
-		nextMessageId,
-		previousMessageId,
+		nextThread,
+		previousThread,
 		handleDeselectIfRemoved,
 	} = useBriefPane();
 	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
@@ -405,13 +379,9 @@ function BriefPhone() {
 					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/DailyBrief.tsx

@@ -105,6 +105,7 @@ import {
 	type SelectionWizardControl,
 	useSelectionWizard,
 } from "@/lib/wizard-history";
+import type { BriefThreadTarget } from "@/routing";
 import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import { MailListHeader, type MailListHeaderProps } from "./MailListHeader";
 import type { MessageListCommands } from "./MessageList";
@@ -378,14 +379,13 @@ function BriefSelectionChrome({
 interface DailyBriefProps {
 	accounts: RemitImapAccountResponse[];
 	selectedMessageId?: string;
-	/** Opens an in-list brief row (resolved by messageId against the loaded list). */
-	onSelectMessage?: (id: string, options?: OpenMessageOptions) => void;
 	/**
-	 * Opens a search result. A semantic "Related" hit carries its thread + mailbox
-	 * so it opens even when its message isn't in the loaded brief list.
+	 * Opens a row. Every row the brief renders names its thread, so the row the
+	 * search widened in from another folder opens by exactly the same route as one
+	 * from the unified inbox.
 	 */
-	onSelectSearchResult?: (
-		result: SearchResult,
+	onOpenThread?: (
+		target: BriefThreadTarget,
 		options?: OpenMessageOptions,
 	) => void;
 	/** Where the list publishes the commands the keyboard layer drives. */
@@ -398,8 +398,7 @@ interface DailyBriefProps {
 export function DailyBrief({
 	accounts,
 	selectedMessageId,
-	onSelectMessage,
-	onSelectSearchResult,
+	onOpenThread,
 	commandsRef,
 	onTriageContextChange,
 	onDeleteMessages,
@@ -618,26 +617,29 @@ export function DailyBrief({
 	);
 
 	// A committed query puts rows the widened cross-folder search found into the
-	// body, and those messages are in folders the brief itself never loads. The
-	// reading pane resolves a bare `selectedMessageId` against the brief's own
-	// thread list, so such a row opens nothing; it goes through the search path
-	// instead, which carries the thread and mailbox the conversation is fetched
-	// by (#635).
+	// body, and those messages are in folders the brief itself never loads. They
+	// open like any other row: what the address carries is the thread, which
+	// every row names, and the conversation is fetched by it (#635).
 	const openRow = useCallback(
 		(id: string, options?: OpenMessageOptions) => {
-			const row = sq
-				? bodyRows.find((candidate) => candidate.id === id)
-				: undefined;
-			if (row?.threadId && row.mailboxId && onSelectSearchResult) {
-				onSelectSearchResult(
-					rowToSearchResult(row, resultFolderIndex),
-					options,
-				);
-				return;
-			}
-			onSelectMessage?.(id, options);
+			const threadId = filteredRows.find((row) => row.id === id)?.threadId;
+			if (!threadId) return;
+			onOpenThread?.({ threadId, messageId: id }, options);
+		},
+		[filteredRows, 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 ??
+				filteredRows.find((row) => row.id === result.id)?.threadId;
+			if (!threadId) return;
+			onOpenThread?.({ threadId, messageId: result.id });
 		},
-		[sq, bodyRows, resultFolderIndex, onSelectSearchResult, onSelectMessage],
+		[filteredRows, onOpenThread],
 	);
 
 	const accountSources = useMemo<FilterSheetSource[]>(() => {
@@ -903,7 +905,7 @@ export function DailyBrief({
 						searchLoading: isLoading || searchFetching,
 						relatedResults,
 						relatedLoading,
-						onSelectSearchResult,
+						onSelectSearchResult: openResult,
 						// The body already narrows to the committed query
 						// (`matchesBriefSearch` + `matchesSearchTokens` + the server `query`,
 						// above), so a committed search is a selectable list here exactly as

package/src/components/mail/MailSidebarAdapter.tsx

@@ -229,7 +229,7 @@ export function MailSidebarAdapter({
 			return (
 				<NavLink
 					to="/mail/brief"
-					search={{ q: undefined, selectedMessageId: undefined }}
+					search={{ q: undefined }}
 					activeOptions={{ includeSearch: false }}
 					onClick={() => onClick?.()}
 					className={className}
@@ -340,10 +340,7 @@ export function MailSidebarAdapter({
 	const handleSelectSavedSearch = useCallback(
 		(query: string) => {
 			onSearchChange(query);
-			navigate({
-				to: "/mail/brief",
-				search: { q: query, selectedMessageId: undefined },
-			});
+			navigate({ to: "/mail/brief", search: { q: query } });
 			onMailboxSelect?.();
 		},
 		[onSearchChange, navigate, onMailboxSelect],

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

@@ -0,0 +1,205 @@
+/**
+ * Where the search mirror writes, now that the brief's open thread is a path
+ * segment (#718).
+ *
+ * Mirroring `q` used to be one navigation with one destination, because the
+ * thread travelled in the query and `...prev` carried it along. It is now two:
+ * a query going active closes the reading pane, and that close is the address
+ * 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
+ * whole question is what the router resolves a destination to from a thread
+ * route. Reasoning about `to: "."` is not evidence.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { MailContext, type MailContextValue } from "@/lib/mail-context";
+import { mailViewKey } from "@/lib/mail-route";
+import { EMPTY_RESULT_FOLDER_INDEX } from "@/lib/result-folder";
+import { createDomHarness, type DomHarness } from "../test-support/dom";
+import { useSearchMirror } from "./useSearchMirror";
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const THREAD_ID = "th-1";
+const MESSAGE_ID = "msg-1";
+
+const mailContext = (input: string, committed: string): MailContextValue => ({
+	accounts: [],
+	mailboxNameIndex: new Map(),
+	accountNameIndex: new Map(),
+	resultFolderIndex: EMPTY_RESULT_FOLDER_INDEX,
+	searchQuery: committed,
+	searchInput: input,
+	searchViewKey: "/mail/brief",
+	onSearchChange: () => {},
+	onSearchClear: () => {},
+	onSearchClearQuery: () => {},
+	intelligenceOpen: false,
+	onToggleIntelligence: () => {},
+	onSetIntelligenceOpen: () => {},
+});
+
+/**
+ * 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.
+ */
+const routerAt = (href: string): AnyRouter => {
+	const rootRoute = createRootRoute({ component: Outlet });
+	const passthrough = (search: Record<string, unknown>) => search;
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		validateSearch: passthrough,
+		component: Outlet,
+	});
+	const briefRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/brief",
+		validateSearch: passthrough,
+		component: () => {
+			useSearchMirror({ to: "/mail/brief" });
+			return createElement(Outlet);
+		},
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => briefRoute,
+		path: "/$threadId",
+		component: Outlet,
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "/$messageId",
+		component: () => null,
+	});
+	const routeTree = rootRoute.addChildren([
+		mailRoute.addChildren([
+			briefRoute.addChildren([threadRoute.addChildren([messageRoute])]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: [href] }),
+	}) as unknown as AnyRouter;
+};
+
+const mount = async (
+	router: AnyRouter,
+	input: string,
+	committed: string,
+): Promise<DomHarness> => {
+	const created = createDomHarness();
+	harness = created;
+	await router.load();
+	created.renderApp(
+		createElement(
+			MailContext.Provider,
+			{ value: mailContext(input, committed) },
+			createElement(RouterProvider, { router }),
+		),
+	);
+	await created.flush();
+	await created.wait(20);
+	return created;
+};
+
+const threadHref = `/mail/brief/${THREAD_ID}/${MESSAGE_ID}`;
+
+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");
+
+		assert.equal(router.history.location.pathname, "/mail/brief");
+		assert.match(router.history.location.search, /q=invoice/);
+	});
+
+	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, "/mail/brief");
+	});
+
+	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");
+
+		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, "", "");
+
+		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");
+
+		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", "");
+
+		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
+ * re-seeds on a view change, so the view key of the list and of the thread route
+ * under it must be equal.
+ *
+ * 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);
+		await router.load();
+		return mailViewKey(
+			router.state.matches.map((match: { routeId: string }) => ({
+				routeId: match.routeId,
+			})),
+		);
+	};
+
+	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);
+	});
+});

package/src/hooks/useSearchMirror.ts

@@ -28,14 +28,19 @@ export type SearchMirrorTarget =
  * flight and replacing the entry the reader had just pushed. They would click
  * Inbox and land back on the brief.
  *
- * When a query *goes* active it also strips the selection so the reading pane
- * closes (#539): an open message from the pre-search list is not meaningful in
- * the search result set. Only on that transition though — tapping a search
- * result commits the same `q` with the selection, so when `prev.q` already
- * equals the query the result was opened under it (not a pre-search leftover)
- * and must survive. The strip otherwise raced the tap: the row shows before the
- * debounce settles, so this mirror can land just after the open and close it
- * again.
+ * 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.
+ *
+ * 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
+ * was opened under it (not a pre-search leftover) and must survive. The close
+ * otherwise raced the tap: the row shows before the debounce settles, so this
+ * mirror can land just after the open and undo it.
  */
 export function useSearchMirror(target: SearchMirrorTarget): void {
 	const navigate = useNavigate();
@@ -61,20 +66,23 @@ export function useSearchMirror(target: SearchMirrorTarget): void {
 			listPath,
 		});
 		if (!mayWrite) return;
-		const search = (prev: Record<string, unknown>) => {
-			const queryAlreadyActive = prev.q === committedQuery;
-			return {
-				...prev,
-				q: committedQuery || undefined,
-				...(committedQuery && !queryAlreadyActive
-					? {
-							selectedMessageId: undefined,
-							selectedThreadId: undefined,
-							selectedMailboxId: undefined,
-						}
-					: {}),
-			};
-		};
+		const queryGoesActive =
+			Boolean(committedQuery) && urlQueryRef.current !== committedQuery;
+		const search = (prev: Record<string, unknown>) => ({
+			...prev,
+			q: committedQuery || undefined,
+			...(queryGoesActive
+				? {
+						selectedMessageId: undefined,
+						selectedThreadId: undefined,
+						selectedMailboxId: undefined,
+					}
+				: {}),
+		});
+		if (!queryGoesActive) {
+			navigate({ to: ".", search, replace: true });
+			return;
+		}
 		if (to === "/mail/$mailboxId") {
 			if (!mailboxId) return;
 			navigate({ to, params: { mailboxId }, search, replace: true });

package/src/hooks/useSearchScope.ts

@@ -39,7 +39,7 @@ export function useSearchScope(accounts: RemitImapAccountResponse[]): {
 			if (chipId !== SEARCH_SCOPE_CHIP_ID) return;
 			navigate({
 				to: "/mail/brief",
-				search: { q: searchInput || undefined, selectedMessageId: undefined },
+				search: { q: searchInput || undefined },
 			});
 		},
 		[navigate, searchInput],

package/src/hooks/useThreadRow.ts

@@ -0,0 +1,35 @@
+import { threadDetailOperationsListThreadMessagesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { useQuery } from "@tanstack/react-query";
+
+/**
+ * A thread's own row for the message the reader pointed at.
+ *
+ * This is how a conversation answers for itself when no list holds it — a
+ * cross-folder search hit, or an address pasted into a fresh tab.
+ * `GET /threads/{threadId}/messages` returns the same row shape a listing does,
+ * `mailboxId` included, so the thread id is the whole address even though the
+ * mail is filed in some folder. The reading pane already makes that request, so
+ * this resolves off the same cache entry rather than a round trip of its own.
+ *
+ * A thread spans folders — the reader's own reply sits in Sent — so `messageId`
+ * picks the row they pointed at. With none, the newest message answers.
+ */
+export const useThreadRow = (
+	threadId: string | undefined,
+	messageId: string | undefined,
+): RemitImapThreadMessageResponse | undefined => {
+	const { data } = useQuery({
+		...threadDetailOperationsListThreadMessagesOptions({
+			path: { threadId: threadId ?? "" },
+		}),
+		enabled: Boolean(threadId),
+	});
+
+	const items = data?.items ?? [];
+	const pointedAt = messageId
+		? items.find((item) => item.messageId === messageId)
+		: undefined;
+	const newest = items.length > 0 ? items[items.length - 1] : undefined;
+	return pointedAt ?? newest;
+};

package/src/lib/mail-route.test.ts

@@ -20,6 +20,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import {
 	locationIsOnList,
+	locationOpensDetail,
 	MAIL_BRIEF_ROUTE_ID,
 	MAIL_FLAGGED_ROUTE_ID,
 	MAIL_MAILBOX_ROUTE_ID,
@@ -178,3 +179,28 @@ describe("locationIsOnList", () => {
 		assert.equal(locationIsOnList("/mail/outbox-2024", "/mail/outbox"), false);
 	});
 });
+
+/**
+ * What "a thread is open" used to be asked of the query. Everything sharing the
+ * single pane with the conversation reads it from the address instead.
+ */
+describe("locationOpensDetail", () => {
+	it("is true for a thread and for the message inside it", () => {
+		assert.equal(locationOpensDetail("/mail/brief/thread-1"), true);
+		assert.equal(locationOpensDetail("/mail/brief/thread-1/message-1"), true);
+		assert.equal(locationOpensDetail("/mail/inbox-1/thread-1"), true);
+	});
+
+	it("is false on a bare list, trailing slash and query included", () => {
+		assert.equal(locationOpensDetail("/mail/brief"), false);
+		assert.equal(locationOpensDetail("/mail/brief/"), false);
+		assert.equal(locationOpensDetail("/mail/brief?q=invoice"), false);
+		assert.equal(locationOpensDetail("/mail/inbox-1"), false);
+		assert.equal(locationOpensDetail("/mail"), false);
+	});
+
+	it("is false outside the mail shell", () => {
+		assert.equal(locationOpensDetail("/settings/accounts"), false);
+		assert.equal(locationOpensDetail("/onboarding"), false);
+	});
+});

package/src/lib/mail-route.ts

@@ -92,3 +92,16 @@ export function locationIsOnList(pathname: string, listPath: string): boolean {
 	if (pathname === listPath) return true;
 	return pathname.startsWith(`${listPath}/`);
 }
+
+/**
+ * Whether the address names something the list has open below it — a thread, a
+ * message. A list on its own, and its bare reading pane, do not.
+ *
+ * Answers what an open thread used to be asked of the query. Anything sharing
+ * the single pane with the conversation reads it from here rather than keeping a
+ * second opinion about what is on screen.
+ */
+export function locationOpensDetail(pathname: string): boolean {
+	const segments = pathname.split(/[?#]/)[0].split("/").filter(Boolean);
+	return segments[0] === "mail" && segments.length > 2;
+}

package/src/lib/mail-search.ts

@@ -12,13 +12,13 @@ import { z } from "zod";
 /** What every list carries, whatever else it carries. */
 const listSearch = z.object({ q: z.string().optional() });
 
-export const briefSearchSchema = listSearch.extend({
-	selectedMessageId: z.string().optional(),
-	// A tapped semantic "Related" hit can point at a message outside the loaded
-	// brief list; carrying its thread + mailbox lets the brief open it directly.
-	selectedThreadId: z.string().optional(),
-	selectedMailboxId: 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 other three lists follow.
+ */
+export const briefSearchSchema = listSearch.extend({});
 
 export const flaggedSearchSchema = listSearch.extend({
 	selectedMessageId: z.string().optional(),

package/src/routeTree.gen.ts

@@ -29,8 +29,11 @@ import { Route as SettingsSendersRouteImport } from './routes/settings/senders'
 import { Route as SettingsSuggestedVipsRouteImport } from './routes/settings/suggested-vips'
 import { Route as MailMailboxIdIndexRouteImport } from './routes/mail/$mailboxId/index'
 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 MailOutboxIndexRouteImport } from './routes/mail/outbox/index'
+import { Route as MailBriefThreadIdIndexRouteImport } from './routes/mail/brief/$threadId/index'
+import { Route as MailBriefThreadIdMessageIdRouteImport } from './routes/mail/brief/$threadId/$messageId'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
@@ -132,6 +135,11 @@ const MailBriefIndexRoute = MailBriefIndexRouteImport.update({
   path: '/',
   getParentRoute: () => MailBriefRoute,
 } as any)
+const MailBriefThreadIdRoute = MailBriefThreadIdRouteImport.update({
+  id: '/$threadId',
+  path: '/$threadId',
+  getParentRoute: () => MailBriefRoute,
+} as any)
 const MailFlaggedIndexRoute = MailFlaggedIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -142,6 +150,17 @@ const MailOutboxIndexRoute = MailOutboxIndexRouteImport.update({
   path: '/',
   getParentRoute: () => MailOutboxRoute,
 } as any)
+const MailBriefThreadIdIndexRoute = MailBriefThreadIdIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => MailBriefThreadIdRoute,
+} as any)
+const MailBriefThreadIdMessageIdRoute =
+  MailBriefThreadIdMessageIdRouteImport.update({
+    id: '/$messageId',
+    path: '/$messageId',
+    getParentRoute: () => MailBriefThreadIdRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -162,10 +181,13 @@ export interface FileRoutesByFullPath {
   '/settings/suggested-vips': typeof SettingsSuggestedVipsRoute
   '/mail/': typeof MailIndexRoute
   '/settings/': typeof SettingsIndexRoute
+  '/mail/brief/$threadId': typeof MailBriefThreadIdRouteWithChildren
   '/mail/$mailboxId/': typeof MailMailboxIdIndexRoute
   '/mail/brief/': typeof MailBriefIndexRoute
   '/mail/flagged/': typeof MailFlaggedIndexRoute
   '/mail/outbox/': typeof MailOutboxIndexRoute
+  '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -184,6 +206,8 @@ export interface FileRoutesByTo {
   '/mail/brief': typeof MailBriefIndexRoute
   '/mail/flagged': typeof MailFlaggedIndexRoute
   '/mail/outbox': typeof MailOutboxIndexRoute
+  '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/brief/$threadId': typeof MailBriefThreadIdIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -205,10 +229,13 @@ export interface FileRoutesById {
   '/settings/suggested-vips': typeof SettingsSuggestedVipsRoute
   '/mail/': typeof MailIndexRoute
   '/settings/': typeof SettingsIndexRoute
+  '/mail/brief/$threadId': typeof MailBriefThreadIdRouteWithChildren
   '/mail/$mailboxId/': typeof MailMailboxIdIndexRoute
   '/mail/brief/': typeof MailBriefIndexRoute
   '/mail/flagged/': typeof MailFlaggedIndexRoute
   '/mail/outbox/': typeof MailOutboxIndexRoute
+  '/mail/brief/$threadId/$messageId': typeof MailBriefThreadIdMessageIdRoute
+  '/mail/brief/$threadId/': typeof MailBriefThreadIdIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -231,10 +258,13 @@ export interface FileRouteTypes {
     | '/settings/suggested-vips'
     | '/mail/'
     | '/settings/'
+    | '/mail/brief/$threadId'
     | '/mail/$mailboxId/'
     | '/mail/brief/'
     | '/mail/flagged/'
     | '/mail/outbox/'
+    | '/mail/brief/$threadId/$messageId'
+    | '/mail/brief/$threadId/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -253,6 +283,8 @@ export interface FileRouteTypes {
     | '/mail/brief'
     | '/mail/flagged'
     | '/mail/outbox'
+    | '/mail/brief/$threadId/$messageId'
+    | '/mail/brief/$threadId'
   id:
     | '__root__'
     | '/'
@@ -273,10 +305,13 @@ export interface FileRouteTypes {
     | '/settings/suggested-vips'
     | '/mail/'
     | '/settings/'
+    | '/mail/brief/$threadId'
     | '/mail/$mailboxId/'
     | '/mail/brief/'
     | '/mail/flagged/'
     | '/mail/outbox/'
+    | '/mail/brief/$threadId/$messageId'
+    | '/mail/brief/$threadId/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -428,6 +463,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailBriefIndexRouteImport
       parentRoute: typeof MailBriefRoute
     }
+    '/mail/brief/$threadId': {
+      id: '/mail/brief/$threadId'
+      path: '/$threadId'
+      fullPath: '/mail/brief/$threadId'
+      preLoaderRoute: typeof MailBriefThreadIdRouteImport
+      parentRoute: typeof MailBriefRoute
+    }
     '/mail/flagged/': {
       id: '/mail/flagged/'
       path: '/'
@@ -442,6 +484,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MailOutboxIndexRouteImport
       parentRoute: typeof MailOutboxRoute
     }
+    '/mail/brief/$threadId/': {
+      id: '/mail/brief/$threadId/'
+      path: '/'
+      fullPath: '/mail/brief/$threadId/'
+      preLoaderRoute: typeof MailBriefThreadIdIndexRouteImport
+      parentRoute: typeof MailBriefThreadIdRoute
+    }
+    '/mail/brief/$threadId/$messageId': {
+      id: '/mail/brief/$threadId/$messageId'
+      path: '/$messageId'
+      fullPath: '/mail/brief/$threadId/$messageId'
+      preLoaderRoute: typeof MailBriefThreadIdMessageIdRouteImport
+      parentRoute: typeof MailBriefThreadIdRoute
+    }
   }
 }
 
@@ -457,11 +513,26 @@ const MailMailboxIdRouteWithChildren = MailMailboxIdRoute._addFileChildren(
   MailMailboxIdRouteChildren,
 )
 
+interface MailBriefThreadIdRouteChildren {
+  MailBriefThreadIdMessageIdRoute: typeof MailBriefThreadIdMessageIdRoute
+  MailBriefThreadIdIndexRoute: typeof MailBriefThreadIdIndexRoute
+}
+
+const MailBriefThreadIdRouteChildren: MailBriefThreadIdRouteChildren = {
+  MailBriefThreadIdMessageIdRoute: MailBriefThreadIdMessageIdRoute,
+  MailBriefThreadIdIndexRoute: MailBriefThreadIdIndexRoute,
+}
+
+const MailBriefThreadIdRouteWithChildren =
+  MailBriefThreadIdRoute._addFileChildren(MailBriefThreadIdRouteChildren)
+
 interface MailBriefRouteChildren {
+  MailBriefThreadIdRoute: typeof MailBriefThreadIdRouteWithChildren
   MailBriefIndexRoute: typeof MailBriefIndexRoute
 }
 
 const MailBriefRouteChildren: MailBriefRouteChildren = {
+  MailBriefThreadIdRoute: MailBriefThreadIdRouteWithChildren,
   MailBriefIndexRoute: MailBriefIndexRoute,
 }
 

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

@@ -0,0 +1,19 @@
+/**
+ * /mail/brief/$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 { BriefPane } from "@/components/mail/BriefPane";
+
+function BriefMessagePane() {
+	return <BriefPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/brief/$threadId/$messageId")({
+	component: BriefMessagePane,
+});

package/src/routes/mail/brief/$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 { BriefPane } from "@/components/mail/BriefPane";
+
+function BriefThreadPane() {
+	return <BriefPane.Reading />;
+}
+
+export const Route = createFileRoute("/mail/brief/$threadId/")({
+	component: BriefThreadPane,
+});

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

@@ -0,0 +1,16 @@
+/**
+ * /mail/brief/$threadId — a conversation open in the brief's reading pane.
+ *
+ * The brief is cross-mailbox, 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 segment for the folder would be a second owner of a fact the
+ * thread already carries.
+ *
+ * A layout, because the message segment nests under it.
+ */
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/mail/brief/$threadId")({
+	component: Outlet,
+});

package/src/routes/mail/brief.tsx

@@ -3,7 +3,9 @@
  *
  * The route mounts the list and the shell around it, and the reading pane is
  * the `Outlet`, so what the pane shows is whatever route is matched under this
- * one rather than a decision made somewhere above.
+ * one rather than a decision made somewhere above. The open thread and the
+ * message inside it are the segments below, which is why nothing here reads a
+ * selection out of the query.
  */
 import {
 	createFileRoute,
@@ -15,6 +17,7 @@ import { BriefPane } from "@/components/mail/BriefPane";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { useSearchMirror } from "@/hooks/useSearchMirror";
 import { briefSearchSchema } from "@/lib/mail-search";
+import { useBriefThreadPath } from "@/routing";
 
 const BriefError = ({ error, reset }: ErrorComponentProps) => (
 	<div className="flex h-full items-center justify-center bg-canvas p-4">
@@ -27,17 +30,17 @@ const BriefError = ({ error, reset }: ErrorComponentProps) => (
 );
 
 function BriefLayout() {
-	const { selectedMessageId } = Route.useSearch();
+	const thread = useBriefThreadPath();
 	useSearchMirror({ to: "/mail/brief" });
 
 	return (
-		<BriefPane selectedMessageId={selectedMessageId}>
+		<BriefPane thread={thread}>
 			<MailShell
 				phone={<BriefPane.Phone />}
 				list={<BriefPane.List />}
 				reading={<Outlet />}
 				intelligence={<BriefPane.Intelligence />}
-				hasThread={Boolean(selectedMessageId)}
+				hasThread={Boolean(thread)}
 			/>
 		</BriefPane>
 	);

package/src/routing/brief-thread.ts

@@ -0,0 +1,47 @@
+import { useParams } from "@tanstack/react-router";
+import { useMemo } from "react";
+
+/** The conversation the brief has open, as the address states it. */
+export interface BriefThreadPath {
+	threadId: string;
+	/**
+	 * Which message inside the thread is expanded and scrolled to. Absent on a
+	 * bare thread address, where the newest message answers for the conversation.
+	 */
+	messageId: string | undefined;
+}
+
+/**
+ * A conversation to open. The thread is what the pane fetches by; the message is
+ * the row the reader pointed at, so a list always knows both.
+ */
+export interface BriefThreadTarget {
+	threadId: string;
+	messageId: string;
+}
+
+/**
+ * The thread the brief has open, read off the path.
+ *
+ * The thread is a child route of the list, and the list layout mounts the pane
+ * above the `Outlet` — so it asks the router which of its children matched
+ * rather than reading a param it does not own. Each `from` names a real route,
+ * so a segment that does not exist fails to compile.
+ */
+export function useBriefThreadPath(): BriefThreadPath | undefined {
+	const thread = useParams({
+		from: "/mail/brief/$threadId",
+		shouldThrow: false,
+	});
+	const message = useParams({
+		from: "/mail/brief/$threadId/$messageId",
+		shouldThrow: false,
+	});
+	const threadId = thread?.threadId;
+	const messageId = message?.messageId;
+
+	return useMemo(
+		() => (threadId ? { threadId, messageId } : undefined),
+		[threadId, messageId],
+	);
+}

package/src/routing/index.ts

@@ -1,3 +1,8 @@
+export {
+	type BriefThreadPath,
+	type BriefThreadTarget,
+	useBriefThreadPath,
+} from "./brief-thread";
 export {
 	type PanelFragment,
 	panelFragments,