@remit/web-client 0.0.145 → 0.0.147

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);
+	});
+});