@remit/web-client 0.0.267 → 0.0.268

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.267",
+  "version": "0.0.268",
   "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/mail/MailListHeader.chrome-stability.render.test.ts

@@ -0,0 +1,323 @@
+/**
+ * The chrome the list header hands its body is one object, and the body is a
+ * virtualized list that re-renders every row when that object changes (#506).
+ *
+ * What is typed, where the caret is, which suggestion is highlighted and what
+ * the query converts to belong to the field and the wizard, not to the list.
+ * None of it changes anything the header shows, so the body must be handed back
+ * the object it already has.
+ *
+ * Driven through the real field and real keystrokes, in the real header, so
+ * every assertion is about the object the body receives rather than the shape of
+ * any one memo that fed it — `use-suggest-list.test.ts` is what pins the
+ * combobox props the field itself reads.
+ */
+
+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, Profiler, useCallback, useMemo, useState } from "react";
+import {
+	type ListHeaderChrome,
+	useListHeaderChrome,
+} from "@/lib/list-header-chrome";
+import { MailContext, type MailContextValue } from "@/lib/mail-context";
+import { EMPTY_RESULT_FOLDER_INDEX } from "@/lib/result-folder";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import { MailListHeader } from "./MailListHeader";
+
+const MAILBOX_ID = "11111111-1111-4111-8111-111111111111";
+/** Tablet: the tier whose list header owns the field, rather than the top bar. */
+const TABLET_WIDTH = 900;
+/** A bare word, so the offer is token names and needs no lookup. */
+const TYPED = "fro";
+/** Still a bare word, so the query converts to the same clause and copy. */
+const TYPED_NEXT = `${TYPED}g`;
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+let chromes: ListHeaderChrome[] = [];
+/** Commits React made in the header's subtree, so "it held" cannot mean "nothing ran". */
+let commits = 0;
+/** Which body the mounted view has: its own rows, or the read-only results panel. */
+let resultsInBody = true;
+/** The address the view mounts on; a `q` on it is a query already committed. */
+let initialPath = `/mail/${MAILBOX_ID}`;
+/**
+ * The query the shell has committed, as the /mail shell would hand it down: the
+ * field is mirrored to the URL on a debounce, so a view mounted on an address
+ * carrying `q` reads a query the next keystroke does not move. Unset, the typed
+ * text answers for both, which is the mid-debounce case the other tests are in.
+ */
+let committedQuery: string | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	chromes = [];
+	commits = 0;
+	resultsInBody = true;
+	initialPath = `/mail/${MAILBOX_ID}`;
+	committedQuery = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+/** Stands in for the list: it takes the chrome and renders the field slot. */
+function ChromeProbe() {
+	const chrome = useListHeaderChrome();
+	chromes.push(chrome);
+	return createElement("div", null, chrome.searchField);
+}
+
+function Header() {
+	const [query, setQuery] = useState(TYPED);
+	const clear = useCallback(() => setQuery(""), []);
+	const context = useMemo<MailContextValue>(
+		() => ({
+			accounts: [],
+			mailboxNameIndex: new Map(),
+			accountNameIndex: new Map(),
+			resultFolderIndex: EMPTY_RESULT_FOLDER_INDEX,
+			searchQuery: committedQuery ?? query,
+			searchInput: query,
+			searchViewKey: "list",
+			onSearchChange: setQuery,
+			onSearchClear: clear,
+			onSearchClearQuery: clear,
+			intelligenceOpen: false,
+			onToggleIntelligence: () => undefined,
+			onRaiseIntelligence: () => undefined,
+		}),
+		[query, clear],
+	);
+	return createElement(
+		MailContext.Provider,
+		{ value: context },
+		createElement(
+			Profiler,
+			{
+				id: "list-header",
+				onRender: () => {
+					commits += 1;
+				},
+			},
+			createElement(MailListHeader, {
+				title: "Inbox",
+				unreadCount: null,
+				// Set, the body renders the committed search itself and the read-only
+				// results panel stays out of the chrome; unset, the panel rides in the
+				// chrome, which is the other thing a keystroke must not churn.
+				searchResultsInBody: resultsInBody,
+				// biome-ignore lint/correctness/noChildrenProp: no JSX in a `.ts` test, and createElement's variadic children do not satisfy a required prop
+				children: createElement(ChromeProbe),
+			}),
+		),
+	);
+}
+
+const testRouter = (): AnyRouter => {
+	const rootRoute = createRootRoute({ component: Outlet });
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		validateSearch: (search: Record<string, unknown>) => search,
+		component: Outlet,
+	});
+	const mailboxRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/$mailboxId",
+		component: Header,
+	});
+	return createRouter({
+		routeTree: rootRoute.addChildren([mailRoute.addChildren([mailboxRoute])]),
+		history: createMemoryHistory({ initialEntries: [initialPath] }),
+	}) as unknown as AnyRouter;
+};
+
+/** Mount the header with a query typed and the field holding focus. */
+const mount = async (
+	options: { resultsPanelInChrome?: boolean; committedQuery?: string } = {},
+): Promise<{
+	mounted: DomHarness;
+	field: HTMLInputElement;
+}> => {
+	resultsInBody = options.resultsPanelInChrome !== true;
+	committedQuery = options.committedQuery;
+	initialPath = committedQuery
+		? `/mail/${MAILBOX_ID}?q=${committedQuery}`
+		: `/mail/${MAILBOX_ID}`;
+	http = mockFetch(() => ({ items: [] }));
+	const router = testRouter();
+	await router.load();
+	const mounted = createDomHarness({ viewportWidth: TABLET_WIDTH });
+	harness = mounted;
+	mounted.renderApp(createElement(RouterProvider, { router }));
+	await mounted.waitFor(
+		() => mounted.query('[aria-label="Search mail"]') !== null,
+		"the header's search field",
+	);
+	const field = mounted.query<HTMLInputElement>('[aria-label="Search mail"]');
+	assert.ok(field, "the header rendered no search field");
+	mounted.dispatch(field, new Event("focusin", { bubbles: true }));
+	await mounted.waitFor(
+		() => field.getAttribute("aria-expanded") === "true",
+		"the suggestion list to open",
+	);
+	return { mounted, field };
+};
+
+const press = (mounted: DomHarness, field: Element, key: string) => {
+	mounted.dispatch(
+		field,
+		new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),
+	);
+};
+
+describe("the chrome the list header hands its body (#506)", () => {
+	it("is the same object across a keystroke that only moves the field's highlight", async () => {
+		const { mounted, field } = await mount();
+		const before = chromes.at(-1);
+		assert.ok(before, "the body was never handed a chrome");
+		const handedBefore = chromes.length;
+		const commitsBefore = commits;
+
+		press(mounted, field, "ArrowDown");
+		await mounted.flush();
+
+		assert.ok(
+			commits > commitsBefore,
+			"the keystroke committed no render at all, so the memo was never put to the test",
+		);
+		assert.ok(
+			field.getAttribute("aria-activedescendant"),
+			"the keystroke did not move the highlight, so nothing was put to the test",
+		);
+		assert.equal(
+			chromes.length,
+			handedBefore,
+			"a highlight move in the field re-rendered the list below it",
+		);
+		assert.equal(
+			chromes.at(-1),
+			before,
+			"a highlight move in the field pushed a new chrome at the list below it",
+		);
+	});
+
+	// The symptom #506 was filed on: a mailbox on tablet, its query already in the
+	// URL, its own rows in the body — and a character typed into the field
+	// repainting all of them. Everything a keystroke moves here (the parse, the
+	// conversion the wizard opens on, the copy the make-this-a-filter row shows)
+	// is derived from the text, so the chrome holds only if none of it rides on it.
+	//
+	// The typed text lives above the header, so the list is re-rendered either
+	// way — what it must be handed is the chrome it already has, which is what
+	// keeps its own rows off the render path.
+	it("is the same object across a character typed over a committed query", async () => {
+		const { mounted, field } = await mount({ committedQuery: TYPED });
+		const before = chromes.at(-1);
+		assert.ok(before, "the body was never handed a chrome");
+		const handedBefore = chromes.length;
+		const commitsBefore = commits;
+
+		mounted.type(field, TYPED_NEXT);
+		await mounted.flush();
+
+		assert.equal(
+			field.value,
+			TYPED_NEXT,
+			"the character never reached the field",
+		);
+		assert.ok(
+			commits > commitsBefore,
+			"the keystroke committed no render at all, so the memo was never put to the test",
+		);
+		assert.ok(
+			chromes.length > handedBefore,
+			"the list was never re-rendered, so it was never handed a second chrome to compare",
+		);
+		// Identity, not `assert.equal`: a failure there renders a diff of two
+		// chromes full of React elements, and that is what runs the reporter out of
+		// memory rather than reporting the bug.
+		assert.ok(
+			chromes.at(-1) === before,
+			"a character typed over a committed query pushed a new chrome at the list below it",
+		);
+	});
+
+	it("is the same object for a view whose results panel rides in the chrome", async () => {
+		const { mounted, field } = await mount({ resultsPanelInChrome: true });
+		const before = chromes.at(-1);
+		assert.ok(before?.searchResults, "the panel never reached the chrome");
+		const handedBefore = chromes.length;
+		const commitsBefore = commits;
+
+		press(mounted, field, "ArrowDown");
+		await mounted.flush();
+
+		assert.ok(
+			commits > commitsBefore,
+			"the keystroke committed no render at all, so the memo was never put to the test",
+		);
+		assert.equal(
+			chromes.length,
+			handedBefore,
+			"a highlight move in the field re-rendered the list below it",
+		);
+		assert.equal(chromes.at(-1), before);
+	});
+
+	it("is the same object across the field taking and losing focus", async () => {
+		const { mounted, field } = await mount();
+		const before = chromes.at(-1);
+		const handedBefore = chromes.length;
+		const commitsBefore = commits;
+
+		mounted.dispatch(field, new Event("focusout", { bubbles: true }));
+		await mounted.flush();
+		mounted.dispatch(field, new Event("focusin", { bubbles: true }));
+		await mounted.waitFor(
+			() => field.getAttribute("aria-expanded") === "true",
+			"the suggestion list to open again",
+		);
+
+		assert.ok(
+			commits > commitsBefore,
+			"focus moved nothing, so the memo was never put to the test",
+		);
+		assert.equal(
+			chromes.length,
+			handedBefore,
+			"focusing the field re-rendered the list below it",
+		);
+		assert.equal(chromes.at(-1), before);
+	});
+
+	// The key handler is stable now, so it has to read the highlight the field
+	// is showing rather than the one it was bound with.
+	it("still takes the highlighted suggestion on Enter", async () => {
+		const { mounted, field } = await mount();
+
+		press(mounted, field, "ArrowDown");
+		await mounted.flush();
+		press(mounted, field, "Enter");
+		await mounted.flush();
+
+		assert.notEqual(field.value, TYPED, "Enter left the query as it was typed");
+		assert.match(field.value, /^from:/);
+	});
+});

package/src/components/mail/MailListHeader.tsx

@@ -60,8 +60,10 @@ import {
 } from "@remit/ui";
 import { Menu, Search, X } from "lucide-react";
 import {
+	createContext,
 	type ReactNode,
 	useCallback,
+	useContext,
 	useEffect,
 	useMemo,
 	useRef,
@@ -78,6 +80,7 @@ import {
 import { useMailContext } from "@/lib/mail-context";
 import { convertSearchToRule } from "@/lib/organize/search-to-rule";
 import { loadRecentSearches, saveRecentSearch } from "@/lib/recent-searches";
+import { SearchConversionContext } from "@/lib/search-conversion";
 import { resultsScopeForRoute, routeMailboxId } from "@/lib/search-scope";
 import { applySearchSuggestion } from "@/lib/search-suggestions";
 import { showInlineSearchResults } from "@/lib/search-surface";
@@ -157,6 +160,60 @@ export interface MailListHeaderProps {
 	refreshControl?: ReactNode;
 }
 
+interface HeaderSearchState {
+	suggest: SearchFieldSuggest;
+	/** Drop the query and put the field away. */
+	onClose: () => void;
+}
+
+const HeaderSearchContext = createContext<HeaderSearchState | null>(null);
+
+/**
+ * The expanded field, which subscribes to its own state instead of being handed
+ * it (#506).
+ *
+ * What is typed, where the caret is and which suggestion is highlighted change
+ * on every keystroke and belong to the field alone. Building the field into the
+ * chrome object made each of those a new chrome, and the chrome reaches the
+ * virtualized list through context, so the list re-rendered for a character it
+ * does not show. The chrome carries the slot; the slot reads the rest itself.
+ */
+function ListHeaderSearchField() {
+	const search = useContext(HeaderSearchContext);
+	const { searchInput, onSearchChange, onSearchClear } = useMailContext();
+	// Only `MailListHeader` puts this slot on the chrome, and it does so inside
+	// its own provider, so there is no reachable path here without one. Say so
+	// rather than rendering nothing: a search field that silently disappears is
+	// indistinguishable from a view that has no search.
+	if (!search)
+		throw new Error(
+			"ListHeaderSearchField rendered outside MailListHeader's HeaderSearchContext provider",
+		);
+	return (
+		<>
+			<div className="min-w-0 flex-1">
+				<SearchBar
+					value={searchInput}
+					onChange={onSearchChange}
+					onClear={onSearchClear}
+					globalFocusKey={false}
+					showClearButton={false}
+					suggest={search.suggest}
+				/>
+			</div>
+			<Button
+				variant="ghost"
+				size="touch"
+				icon={<X className="size-5" />}
+				onClick={search.onClose}
+				aria-label="Close search"
+				className="shrink-0"
+			/>
+			<FilterToggle />
+		</>
+	);
+}
+
 export function MailListHeader({
 	title,
 	unreadCount,
@@ -241,9 +298,9 @@ export function MailListHeader({
 			if (suggestion) applySuggestion(suggestion);
 		},
 	});
-	// Stable while nothing about the field changes: it reaches the list through
-	// the header chrome, and a fresh object every render would re-render the
-	// virtualized body for nothing.
+	// Stable while nothing about the field changes: it reaches the field through
+	// its own context rather than the chrome, so moving the highlight repaints
+	// the field and leaves the list under it alone.
 	const { comboboxProps, handleKeyDown } = suggest;
 	const searchSuggest = useMemo<SearchFieldSuggest>(
 		() => ({
@@ -255,6 +312,14 @@ export function MailListHeader({
 		}),
 		[comboboxProps, handleKeyDown, caretRequest],
 	);
+	const closeSearch = useCallback(() => {
+		onSearchClear();
+		setSearchOpen(false);
+	}, [onSearchClear]);
+	const headerSearch = useMemo<HeaderSearchState>(
+		() => ({ suggest: searchSuggest, onClose: closeSearch }),
+		[searchSuggest, closeSearch],
+	);
 	// Under the field and in flow, on both tiers: a phone's soft keyboard owns
 	// the lower half of the screen, and a list floating over the field would
 	// cover the query it is completing.
@@ -286,21 +351,29 @@ export function MailListHeader({
 		() => parseSearchTokens(searchInput, { mailboxesByName, accountsByName }),
 		[searchInput, mailboxesByName, accountsByName],
 	);
-	const tokenChips = parsed.tokens.map((token) => ({
-		label: searchTokenLabel(token),
-		onRemove: () => onSearchChange(removeSearchToken(searchInput, token)),
-	}));
-	const topMatches = searchResults ?? [];
-	const related = relatedResults ?? [];
+	const tokenChips = useMemo(
+		() =>
+			parsed.tokens.map((token) => ({
+				label: searchTokenLabel(token),
+				onRemove: () => onSearchChange(removeSearchToken(searchInput, token)),
+			})),
+		[parsed, searchInput, onSearchChange],
+	);
+	const topMatches = useMemo(() => searchResults ?? [], [searchResults]);
+	const related = useMemo(() => relatedResults ?? [], [relatedResults]);
 	// Always offer both sections while a query is present; the kit drops the empty
 	// ones, so a "Related"-only hit still shows and two empties fall to its empty
 	// state. The empty-query case (recent searches) is the kit's job.
-	const sections: SearchResultSection[] = hasQuery
-		? [
-				{ id: "top", label: searchResultsLabel, results: topMatches },
-				{ id: "related", label: relatedResultsLabel, results: related },
-			]
-		: [];
+	const sections = useMemo<SearchResultSection[]>(
+		() =>
+			hasQuery
+				? [
+						{ id: "top", label: searchResultsLabel, results: topMatches },
+						{ id: "related", label: relatedResultsLabel, results: related },
+					]
+				: [],
+		[hasQuery, searchResultsLabel, relatedResultsLabel, topMatches, related],
+	);
 	// Skeleton only while nothing is in yet — once either section has rows, show
 	// them and let the other arrive (or not). Keeps the two sources independent.
 	const hasAnyResult = topMatches.length + related.length > 0;
@@ -312,33 +385,43 @@ export function MailListHeader({
 	const { scope } = useSearchScope(accounts);
 	const browsed = useBrowsedList();
 	const scopedMailboxId = routeMailboxId(browsed);
-	const routeScope = resultsScopeForRoute(
-		browsed,
-		scope,
-		scopedMailboxId ? resultFolderIndex.get(scopedMailboxId)?.role : undefined,
+	const scopedRole = scopedMailboxId
+		? resultFolderIndex.get(scopedMailboxId)?.role
+		: undefined;
+	const routeScope = useMemo(
+		() => resultsScopeForRoute(browsed, scope, scopedRole),
+		[browsed, scope, scopedRole],
 	);
 
 	// The offer counts results for the *committed* query, so that is the query it
 	// carries into Spam. The count the banner states is the results list's own,
 	// over every row it held out; the app supplies only where "Go to Spam" goes.
-	const spamOffer =
-		routeScope.kind === "global"
-			? spamOfferForResults([...topMatches, ...related])
-			: undefined;
-	const resultsScope: SearchScope = spamOffer
-		? {
-				kind: "global",
-				onScopeToSpam: () =>
-					scopeSearchToMailbox(spamOffer.mailboxId, searchQuery),
-			}
-		: routeScope;
+	const spamOffer = useMemo(
+		() =>
+			routeScope.kind === "global"
+				? spamOfferForResults([...topMatches, ...related])
+				: undefined,
+		[routeScope, topMatches, related],
+	);
+	const resultsScope = useMemo<SearchScope>(
+		() =>
+			spamOffer
+				? {
+						kind: "global",
+						onScopeToSpam: () =>
+							scopeSearchToMailbox(spamOffer.mailboxId, searchQuery),
+					}
+				: routeScope,
+		[spamOffer, routeScope, scopeSearchToMailbox, searchQuery],
+	);
 
 	// Make-this-a-filter (#477 clause 1.8): the search is the wizard's second
 	// entry. It opens on the properties step with the clauses `convertSearchToRule`
 	// derives from the query, nothing ticked, and the notice for what the query
-	// could not be turned into. The conversion is computed once, here, and handed
-	// to the wizard through the chrome — the reason the affordance gives and the
-	// clauses the wizard seeds from are the same answer. The literal filter cannot
+	// could not be turned into. The conversion is computed once, here, and reaches
+	// the wizard through its own context — the reason the affordance gives and the
+	// clauses the wizard seeds from are the same answer, without the per-keystroke
+	// object riding on the chrome the list reads. The literal filter cannot
 	// reproduce the search's semantic reach, so the conversion states it whenever
 	// the search surfaced a "Related" section — a direct signal, read here from
 	// the semantic results, never a capability probe.
@@ -358,28 +441,32 @@ export function MailListHeader({
 		[parsed, searchHadSemanticReach],
 	);
 	const searchConversion = hasQuery ? conversion : undefined;
-	const makeFilter = hasQuery
-		? {
-				// The wizard is a full-screen surface, so the phone takeover it was
-				// pressed from stands down rather than sitting under it — and the list
-				// underneath, which hosts the wizard, is mounted again by the time the
-				// step lands.
-				onClick: () => {
-					setSearchOpen(false);
-					openWizard("properties", "search");
-				},
-				blockedReason: isConvertible(conversion)
-					? undefined
-					: makeFilterBlockedCopy(
-							conversion.droppedFacets.map((facet) => facet.label),
-						),
-			}
-		: undefined;
+	// The wizard is a full-screen surface, so the phone takeover it was pressed
+	// from stands down rather than sitting under it — and the list underneath,
+	// which hosts the wizard, is mounted again by the time the step lands.
+	const openFilterWizard = useCallback(() => {
+		setSearchOpen(false);
+		openWizard("properties", "search");
+	}, [openWizard]);
+	// Keyed on the copy the affordance shows, not on the conversion it is derived
+	// from: the conversion is a fresh object for every character typed, while the
+	// reason it yields is the same string for all of them, and this row travels to
+	// the virtualized list on the chrome (#506).
+	const blockedReason = isConvertible(conversion)
+		? undefined
+		: makeFilterBlockedCopy(
+				conversion.droppedFacets.map((facet) => facet.label),
+			);
+	const makeFilter = useMemo(
+		() => (hasQuery ? { onClick: openFilterWizard, blockedReason } : undefined),
+		[hasQuery, blockedReason, openFilterWizard],
+	);
 	// Handed to the bar rather than rendered here: the bar knows whether rows
 	// are ticked, and a selection's own verbs own the surface while they are up.
-	const makeFilterAction = makeFilter ? (
-		<MakeFilterAction {...makeFilter} />
-	) : null;
+	const makeFilterAction = useMemo(
+		() => (makeFilter ? <MakeFilterAction {...makeFilter} /> : null),
+		[makeFilter],
+	);
 
 	// Tablet + desktop keep the inline toolbar search; while a query is being
 	// typed the list-pane body swaps to the same sectioned results the phone
@@ -395,19 +482,32 @@ export function MailListHeader({
 		hasCommittedQuery: searchQuery.trim().length > 0,
 		bodyRendersCommittedResults: searchResultsInBody,
 	});
-	const handleSelectInlineResult = (result: SearchResult) => {
-		setRecentSearches(saveRecentSearch(searchInput));
-		onSelectSearchResult?.(result);
-	};
-	const results = (
-		<SearchResults
-			value={searchInput}
-			sections={sections}
-			loading={resultsLoading}
-			onSelectResult={handleSelectInlineResult}
-			tokens={tokenChips}
-			scope={resultsScope}
-		/>
+	const handleSelectInlineResult = useCallback(
+		(result: SearchResult) => {
+			setRecentSearches(saveRecentSearch(searchInput));
+			onSelectSearchResult?.(result);
+		},
+		[searchInput, onSelectSearchResult],
+	);
+	const results = useMemo(
+		() => (
+			<SearchResults
+				value={searchInput}
+				sections={sections}
+				loading={resultsLoading}
+				onSelectResult={handleSelectInlineResult}
+				tokens={tokenChips}
+				scope={resultsScope}
+			/>
+		),
+		[
+			searchInput,
+			sections,
+			resultsLoading,
+			handleSelectInlineResult,
+			tokenChips,
+			resultsScope,
+		],
 	);
 	// The header lives inside `children` for every view whose selection sits
 	// below this one, so swapping the body out from here would take the header
@@ -416,9 +516,13 @@ export function MailListHeader({
 	// put it where their own rows go; the brief, whose header this component
 	// renders, keeps the plain swap.
 	const bodyOwnsHeader = selectionBar === undefined;
-	const resultsPane = showInlineResults ? (
-		<div className="h-full overflow-y-auto">{results}</div>
-	) : null;
+	const resultsPane = useMemo(
+		() =>
+			showInlineResults ? (
+				<div className="h-full overflow-y-auto">{results}</div>
+			) : null,
+		[showInlineResults, results],
+	);
 	const body = resultsPane && !bodyOwnsHeader ? resultsPane : children;
 	const chromeResults = resultsPane && bodyOwnsHeader ? resultsPane : null;
 
@@ -435,7 +539,6 @@ export function MailListHeader({
 			title,
 			searchResults: chromeResults,
 			makeFilterSlot: makeFilterAction,
-			searchConversion,
 			navSlot: layout && !layout.showNavPane && (
 				<Button
 					variant="ghost"
@@ -467,32 +570,7 @@ export function MailListHeader({
 					className="shrink-0"
 				/>
 			),
-			searchField: searchExpanded && (
-				<>
-					<div className="min-w-0 flex-1">
-						<SearchBar
-							value={searchInput}
-							onChange={onSearchChange}
-							onClear={onSearchClear}
-							globalFocusKey={false}
-							showClearButton={false}
-							suggest={searchSuggest}
-						/>
-					</div>
-					<Button
-						variant="ghost"
-						size="touch"
-						icon={<X className="size-5" />}
-						onClick={() => {
-							onSearchClear();
-							setSearchOpen(false);
-						}}
-						aria-label="Close search"
-						className="shrink-0"
-					/>
-					<FilterToggle />
-				</>
-			),
+			searchField: searchExpanded && <ListHeaderSearchField />,
 		}),
 		[
 			title,
@@ -500,13 +578,8 @@ export function MailListHeader({
 			layout,
 			ownsSearch,
 			searchExpanded,
-			searchInput,
-			onSearchChange,
-			onSearchClear,
-			searchSuggest,
 			chromeResults,
 			makeFilterAction,
-			searchConversion,
 			refreshControl,
 		],
 	);
@@ -518,41 +591,49 @@ export function MailListHeader({
 			onSelectSearchResult?.(result);
 		};
 		return (
-			<ListHeaderChromeContext.Provider value={chrome}>
-				<MobileSearchView
-					value={searchInput}
-					onChange={onSearchChange}
-					onClear={onSearchClear}
-					onCancel={() => {
-						setSearchOpen(false);
-						onSearchClear();
-					}}
-					filter={searchFilter}
-					recentSearches={recentSearches}
-					onPickRecent={onSearchChange}
-					makeFilter={makeFilter}
-					sections={sections}
-					loading={resultsLoading}
-					onSelectResult={handleSelectResult}
-					tokens={tokenChips}
-					scope={resultsScope}
-					suggest={searchSuggest}
-					suggestList={suggestList}
-				/>
-				{paneOverlay}
-			</ListHeaderChromeContext.Provider>
+			<HeaderSearchContext.Provider value={headerSearch}>
+				<SearchConversionContext.Provider value={searchConversion}>
+					<ListHeaderChromeContext.Provider value={chrome}>
+						<MobileSearchView
+							value={searchInput}
+							onChange={onSearchChange}
+							onClear={onSearchClear}
+							onCancel={() => {
+								setSearchOpen(false);
+								onSearchClear();
+							}}
+							filter={searchFilter}
+							recentSearches={recentSearches}
+							onPickRecent={onSearchChange}
+							makeFilter={makeFilter}
+							sections={sections}
+							loading={resultsLoading}
+							onSelectResult={handleSelectResult}
+							tokens={tokenChips}
+							scope={resultsScope}
+							suggest={searchSuggest}
+							suggestList={suggestList}
+						/>
+						{paneOverlay}
+					</ListHeaderChromeContext.Provider>
+				</SearchConversionContext.Provider>
+			</HeaderSearchContext.Provider>
 		);
 	}
 
 	return (
-		<ListHeaderChromeContext.Provider value={chrome}>
-			<section className="relative flex h-full w-full flex-col bg-surface">
-				{selectionBar?.(chrome)}
-				{suggestList}
-				<div className="min-h-0 flex-1">{body}</div>
-				{footer}
-				{paneOverlay}
-			</section>
-		</ListHeaderChromeContext.Provider>
+		<HeaderSearchContext.Provider value={headerSearch}>
+			<SearchConversionContext.Provider value={searchConversion}>
+				<ListHeaderChromeContext.Provider value={chrome}>
+					<section className="relative flex h-full w-full flex-col bg-surface">
+						{selectionBar?.(chrome)}
+						{suggestList}
+						<div className="min-h-0 flex-1">{body}</div>
+						{footer}
+						{paneOverlay}
+					</section>
+				</ListHeaderChromeContext.Provider>
+			</SearchConversionContext.Provider>
+		</HeaderSearchContext.Provider>
 	);
 }

package/src/components/mail/SelectionWizardHost.tsx

@@ -57,7 +57,6 @@ import type {
 	BulkRunOutcome,
 } from "@/lib/bulk-actions";
 import { NO_JUNK_FOLDER_REASON } from "@/lib/junk-destination";
-import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import { useMailContext } from "@/lib/mail-context";
 import { buildMoveOptions, folderDelimiter } from "@/lib/move-options";
 import {
@@ -73,6 +72,7 @@ import {
 } from "@/lib/organize/rule-model";
 import { searchRuleAccountId } from "@/lib/organize/search-to-rule";
 import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
+import { useSearchConversion } from "@/lib/search-conversion";
 import type { WizardSelectionMessage } from "@/lib/wizard-selection";
 import { useWizardEntryValue, useWizardStep } from "@/routing";
 import { organizeRunState } from "./organize-run-state";
@@ -1105,7 +1105,7 @@ function SelectionWizardSession({
  */
 export function SelectionWizardHost(props: SelectionWizardHostProps) {
 	const fromSearch = useWizardEntryValue() === "search";
-	const { searchConversion } = useListHeaderChrome();
+	const searchConversion = useSearchConversion();
 	const { accounts } = useMailContext();
 	const { step, goToStep, goBack, closeWizard } = useWizardStep(
 		fromSearch ? "properties" : "match",

package/src/hooks/useSearchScope.ts

@@ -1,5 +1,5 @@
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { useMailContext } from "@/lib/mail-context";
 import {
 	SEARCH_SCOPE_CHIP_ID,
@@ -26,7 +26,10 @@ export function useSearchScope(accounts: RemitImapAccountResponse[]): {
 	const { searchInput } = useMailContext();
 	const mailboxName = useCurrentMailboxName({ accounts });
 	const browsed = useBrowsedList();
-	const scope = searchScopeForRoute(browsed, mailboxName);
+	const scope = useMemo(
+		() => searchScopeForRoute(browsed, mailboxName),
+		[browsed, mailboxName],
+	);
 
 	// Takes the chip id the field removed rather than assuming which chip that
 	// was. The bar owns one chip today; keying on the id means a second one

package/src/lib/list-header-chrome.ts

@@ -1,4 +1,3 @@
-import type { SearchConversion } from "@remit/ui";
 import { createContext, type ReactNode, useContext } from "react";
 
 /**
@@ -11,6 +10,11 @@ import { createContext, type ReactNode, useContext } from "react";
  * Handing the built nodes down keeps one definition of the chrome and keeps the
  * bar's two states in the same commit: nothing here is derived from a state
  * update that lands after paint.
+ *
+ * The body is a virtualized list, so it re-renders every row when this object
+ * changes. Nothing that moves with a keystroke belongs on it (#506) — what is
+ * typed, where the caret is and what the query converts to reach their readers
+ * through their own contexts.
  */
 export interface ListHeaderChrome {
 	/** The view's name, carried while nothing is ticked. */
@@ -32,15 +36,6 @@ export interface ListHeaderChrome {
 	searchResults: ReactNode;
 	/** The search's make-this-a-filter row, up only while nothing is ticked. */
 	makeFilterSlot: ReactNode;
-	/**
-	 * The active query as clauses, which is what the wizard's search entry opens
-	 * on (#484). It travels with the chrome for the same reason the rest does:
-	 * the query belongs to `MailListHeader` and the wizard is mounted by the body
-	 * below it, and one conversion computed in one place is what keeps the reason
-	 * the affordance gives and the clauses the wizard seeds from disagreeing.
-	 * Absent when no query is up.
-	 */
-	searchConversion?: SearchConversion;
 }
 
 const NO_CHROME: ListHeaderChrome = {

package/src/lib/search-conversion.ts

@@ -0,0 +1,23 @@
+import type { SearchConversion } from "@remit/ui";
+import { createContext, useContext } from "react";
+
+/**
+ * The active query as clauses, which is what the wizard's search entry opens on
+ * (#484). One conversion, computed once in `MailListHeader`, so the reason the
+ * make-this-a-filter affordance gives and the clauses the wizard seeds from
+ * cannot disagree.
+ *
+ * Its own context rather than a field on the list header chrome (#506): the
+ * conversion is derived from the query text, so it is a new object on every
+ * keystroke, and carrying it on the chrome meant the chrome was too — which
+ * re-rendered every row of the virtualized list for a character the list does
+ * not show. The wizard is the only reader, and it is mounted once.
+ *
+ * Absent when no query is up.
+ */
+export const SearchConversionContext = createContext<
+	SearchConversion | undefined
+>(undefined);
+
+export const useSearchConversion = (): SearchConversion | undefined =>
+	useContext(SearchConversionContext);

package/src/routing/browsed-list.ts

@@ -4,7 +4,7 @@ import {
 	useParams,
 	useRouterState,
 } from "@tanstack/react-router";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import {
 	type BrowsedList,
 	locationOpensDetail,
@@ -19,13 +19,16 @@ export type { BrowsedList };
  *
  * Every surface a list can open — compose, a reply, a conversation — reads the
  * same answer, so the four lists cannot disagree about which one is underneath.
+ *
+ * The same object until the address moves, so a caller can memoize on it.
  */
 export function useBrowsedList(): BrowsedList {
 	const list = useRouterState({
 		select: (state) => mailListRoute(state.matches)?.list,
 	});
 	const mailbox = useParams({ from: "/mail/$mailboxId", shouldThrow: false });
-	return { list, mailboxId: mailbox?.mailboxId };
+	const mailboxId = mailbox?.mailboxId;
+	return useMemo(() => ({ list, mailboxId }), [list, mailboxId]);
 }
 
 /**