@remit/web-client 0.0.93 → 0.0.94

package/package.json

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

@@ -415,20 +415,28 @@ function BriefSelectionChrome({
 		/>
 	);
 
+	// Mounted as the pane's overlay rather than beside the header: the brief hands
+	// its body over to the search results panel while a query is being typed, and
+	// the wizard is not part of the body it hands over. The overlay slot also puts
+	// it inside the list header's chrome, which is where the converted query it
+	// opens on comes from.
 	return (
-		<>
-			<MailListHeader {...header} selectionBar={selectionBar}>
-				{children}
-			</MailListHeader>
-			<SelectionWizardHost
-				verb={wizardVerb}
-				accountId={scope.accountId}
-				mailboxId={scope.mailboxId}
-				selection={wizardSelection}
-				crossAccount={scope.moveDisabledHint !== undefined}
-				onFinished={exitSelection}
-			/>
-		</>
+		<MailListHeader
+			{...header}
+			selectionBar={selectionBar}
+			paneOverlay={
+				<SelectionWizardHost
+					verb={wizardVerb}
+					accountId={scope.accountId}
+					mailboxId={scope.mailboxId}
+					selection={wizardSelection}
+					crossAccount={scope.moveDisabledHint !== undefined}
+					onFinished={exitSelection}
+				/>
+			}
+		>
+			{children}
+		</MailListHeader>
 	);
 }
 

package/src/components/mail/FlaggedList.tsx

@@ -38,10 +38,15 @@ import { dedupeByThread } from "@/lib/starred-rows";
 import { MailViewChrome } from "./MailViewChrome";
 import type { MessageListCommands } from "./MessageList";
 import { MessageRow } from "./MessageRow";
+import {
+	SelectionWizardHost,
+	type WizardSelectionMessage,
+} from "./SelectionWizardHost";
 import {
 	type OpenMessageOptions,
 	ThreadListInteraction,
 	ThreadListSelectionBar,
+	useThreadListSelection,
 } from "./ThreadListInteraction";
 
 const FILTER_PREDICATES: Record<string, (t: ThreadRowData) => boolean> = {
@@ -49,6 +54,42 @@ const FILTER_PREDICATES: Record<string, (t: ThreadRowData) => boolean> = {
 	attachment: (t) => t.hasAttachment === true,
 };
 
+/**
+ * The wizard, on the one surface whose bar borrows it rather than raising it.
+ *
+ * The list header offers "make this a filter" wherever a search is active, and
+ * the step that affordance pushes has to be answered on the view that offered
+ * it — an affordance whose press lands on nothing is the dead button clause 1.7
+ * exists to prevent. Starred spans accounts and mailboxes, so a rule made from
+ * the ticked rows has no single account to belong to; a rule made from the
+ * query belongs to the account the query names, which the host reads for
+ * itself.
+ */
+function StarredWizardHost({ rows }: { rows: readonly ThreadRowData[] }) {
+	const { selectedIds, exitSelection } = useThreadListSelection();
+	const selection = useMemo<WizardSelectionMessage[]>(
+		() =>
+			rows
+				.filter((row) => selectedIds.has(row.id))
+				.map((row) => ({
+					id: row.id,
+					sender: row.fromName,
+					email: row.fromEmail,
+					subject: row.subject,
+					date: row.timeLabel,
+				})),
+		[rows, selectedIds],
+	);
+	return (
+		<SelectionWizardHost
+			verb="organize"
+			selection={selection}
+			crossAccount
+			onFinished={exitSelection}
+		/>
+	);
+}
+
 interface FlaggedListProps {
 	selectedMessageId?: string;
 	onSelectMessage?: (id: string, options?: OpenMessageOptions) => void;
@@ -221,6 +262,7 @@ export function FlaggedList({
 						(listState === "ready" ? listBody : undefined)
 					}
 				/>
+				<StarredWizardHost rows={rows} />
 			</ThreadListInteraction>
 		</MailViewChrome>
 	);

package/src/components/mail/MailListHeader.tsx

@@ -86,7 +86,7 @@ import {
 	searchTokenLabel,
 } from "@/lib/search-tokens";
 import { spamOfferForResults } from "@/lib/spam-offer";
-import { SearchFilterDialog } from "./organize/SearchFilterDialog";
+import { useOpenWizard } from "@/lib/wizard-history";
 
 export interface MailListHeaderProps {
 	title: string;
@@ -102,8 +102,11 @@ export interface MailListHeaderProps {
 	 */
 	selectionBar?: (chrome: ListHeaderChrome) => ReactNode;
 	/**
-	 * An overlay covering the pane, above the list (the guided organize flow).
-	 * The pane is the positioned ancestor it measures against.
+	 * An overlay covering the pane, above the list (the selection wizard). Kept
+	 * out of the body and rendered on both the ordinary layout and the phone
+	 * search takeover, so a surface that covers the screen is not taken down by
+	 * whatever the body swapped to underneath it. Inside the chrome provider, so
+	 * an overlay a view mounts from above still reads the search state.
 	 */
 	paneOverlay?: ReactNode;
 	/** Pinned below the scrollable list (e.g. the keyboard hint bar). */
@@ -169,7 +172,7 @@ export function MailListHeader({
 	const tier = useLayoutTier();
 	const [searchOpen, setSearchOpen] = useState(false);
 	const [recentSearches, setRecentSearches] = useState(loadRecentSearches);
-	const [filterOpen, setFilterOpen] = useState(false);
+	const openWizard = useOpenWizard();
 
 	// Leaving the view ends the search: the shell drops the query, and the chrome
 	// it opened — the phone takeover, the expanded tablet field — closes with it
@@ -320,14 +323,15 @@ export function MailListHeader({
 			}
 		: routeScope;
 
-	// Make-this-a-filter (RFC 038 D5): convert the current search to a pre-filled
-	// rule and open the shared chip editor. The filter is created for the account
-	// an `account:` facet names, else the primary account. 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. Disabled with a
-	// reason when the search has no clause to filter on (only non-clause facets,
-	// or a bare folder scope).
+	// 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
+	// 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.
 	//
 	// It belongs to the search, not to any one way of showing it. The affordance
 	// therefore sits in the pane, above whichever body is up — the read-only
@@ -338,35 +342,32 @@ export function MailListHeader({
 	// the URL, taking the affordance down with it a few hundred milliseconds after
 	// it appeared, and leaving the brief (which keeps the panel for any query) as
 	// the only place it survived.
-	const accountToken = parsed.tokens.find((token) => token.type === "account");
-	const targetAccountId = accountToken?.accountId ?? accounts[0]?.accountId;
 	const searchHadSemanticReach = related.length > 0;
-	const makeFilter =
-		hasQuery && targetAccountId
-			? {
-					onClick: () => setFilterOpen(true),
-					disabledReason: isConvertible(
-						convertSearchToRule(parsed, { searchHadSemanticReach }),
-					)
-						? undefined
-						: "Add a sender or words to filter on",
-				}
-			: undefined;
+	const conversion = useMemo(
+		() => convertSearchToRule(parsed, { searchHadSemanticReach }),
+		[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
+					: "Add a sender or words to filter on",
+			}
+		: undefined;
 	// 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 filterDialog =
-		filterOpen && targetAccountId ? (
-			<SearchFilterDialog
-				open={filterOpen}
-				accountId={targetAccountId}
-				parsed={parsed}
-				searchHadSemanticReach={searchHadSemanticReach}
-				onClose={() => setFilterOpen(false)}
-			/>
-		) : null;
 
 	// 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
@@ -421,6 +422,7 @@ export function MailListHeader({
 			title,
 			searchResults: chromeResults,
 			makeFilterSlot: makeFilterAction,
+			searchConversion,
 			navSlot: layout && !layout.showNavPane && (
 				<Button
 					variant="ghost"
@@ -484,6 +486,7 @@ export function MailListHeader({
 			searchSuggest,
 			chromeResults,
 			makeFilterAction,
+			searchConversion,
 		],
 	);
 
@@ -494,7 +497,7 @@ export function MailListHeader({
 			onSelectSearchResult?.(result);
 		};
 		return (
-			<>
+			<ListHeaderChromeContext.Provider value={chrome}>
 				<MobileSearchView
 					value={searchInput}
 					onChange={onSearchChange}
@@ -515,8 +518,8 @@ export function MailListHeader({
 					suggest={searchSuggest}
 					suggestList={suggestList}
 				/>
-				{filterDialog}
-			</>
+				{paneOverlay}
+			</ListHeaderChromeContext.Provider>
 		);
 	}
 
@@ -527,7 +530,6 @@ export function MailListHeader({
 				{suggestList}
 				<div className="min-h-0 flex-1">{body}</div>
 				{footer}
-				{filterDialog}
 				{paneOverlay}
 			</section>
 		</ListHeaderChromeContext.Provider>

package/src/components/mail/SelectionWizardHost.tsx

@@ -12,8 +12,10 @@ import {
 	type MoveMailboxOption,
 	type RuleClause,
 	type RunState,
+	type SearchConversion,
 	SelectionWizard,
 	type StepId,
+	searchConversionNotice,
 	senderLabel,
 	stepBlockedReason,
 	stepIndex,
@@ -44,6 +46,8 @@ import { useRulePreview } from "@/hooks/useRulePreview";
 import { useSelectedSubjects } from "@/hooks/useSelectedSubjects";
 import type { BulkRunOutcome } from "@/lib/bulk-actions";
 import { getMailboxDisplayName } from "@/lib/folder-roles";
+import { useListHeaderChrome } from "@/lib/list-header-chrome";
+import { useMailContext } from "@/lib/mail-context";
 import { buildMoveTargets } from "@/lib/move-targets";
 import {
 	buildWizardDraft,
@@ -57,9 +61,8 @@ import {
 	SUPPORTED_CLAUSE_FIELDS,
 } from "@/lib/organize/rule-model";
 import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
-import { useWizardStep } from "@/lib/wizard-history";
+import { useWizardEntryValue, useWizardStep } from "@/lib/wizard-history";
 
-const OPENING_STEP: StepId = "match";
 const EMPTY_DRAFT: WizardDraft = { clauses: [], matchOperator: "any" };
 
 /** A ticked row, as the wizard's samples and its clause prefill read it. */
@@ -74,6 +77,14 @@ interface SelectionWizardSessionProps extends SelectionWizardHostProps {
 	goToStep: (step: StepId) => void;
 	goBack: () => void;
 	closeWizard: (steps: readonly StepId[], step: StepId) => void;
+	/**
+	 * The wizard was entered by converting a search rather than by ticking rows
+	 * (#477 1.8). The conversion seeds the clauses on the properties step and the
+	 * notice above them, and nothing else: every step after that is the one a
+	 * selection from the inbox walks (#477 3.4). Absent for the selection bar's
+	 * entry.
+	 */
+	searchConversion?: SearchConversion;
 }
 
 export interface SelectionWizardHostProps {
@@ -90,6 +101,22 @@ export interface SelectionWizardHostProps {
 	onFinished: () => void;
 }
 
+/**
+ * A search entry with no query behind it — a link typed by hand, or one whose
+ * query is gone. It opens the same properties step with nothing seeded, which
+ * the step already states, rather than a wizard that renders nothing.
+ */
+const NO_CONVERSION: SearchConversion = {
+	clauses: [],
+	matchOperator: "all",
+	droppedFacets: [],
+	keptTerms: false,
+	droppedSemantic: false,
+};
+
+/** A search entry has nothing ticked; its match is the query's clauses (#477 3.2). */
+const EMPTY_SELECTION: readonly WizardSelectionMessage[] = [];
+
 /** How far a commit has got, whichever of the three ways it took. */
 interface RunSnapshot {
 	state: RunState;
@@ -163,14 +190,29 @@ function SelectionWizardSession({
 	mailboxId,
 	selection,
 	crossAccount = false,
+	searchConversion,
 	onFinished,
 	step,
 	goToStep,
 	goBack,
 	closeWizard,
 }: SelectionWizardSessionProps) {
-	const [mode, setMode] = useState<MatchMode>("selected");
-	const [draft, setDraft] = useState<WizardDraft>(EMPTY_DRAFT);
+	// The query as it read when the wizard opened. Held for the walk, so a search
+	// still settling underneath cannot rewrite the notice a user is reading while
+	// the clauses beside it stay as they were seeded.
+	const [conversion] = useState(() => searchConversion);
+	const fromSearch = conversion !== undefined;
+	const [mode, setMode] = useState<MatchMode>(
+		fromSearch ? "properties" : "selected",
+	);
+	const [draft, setDraft] = useState<WizardDraft>(() =>
+		conversion
+			? {
+					clauses: withIds(conversion.clauses, "search"),
+					matchOperator: conversion.matchOperator,
+				}
+			: EMPTY_DRAFT,
+	);
 	const [clauseEdit, setClauseEdit] = useState<ClauseEditState | undefined>(
 		undefined,
 	);
@@ -299,7 +341,7 @@ function SelectionWizardSession({
 	});
 	const { runAction } = bulk;
 
-	const steps = stepsFor({ verb, mode, scope: draft.scope });
+	const steps = stepsFor({ verb, mode, scope: draft.scope, fromSearch });
 	// The step the screens are on, which is the held one only while the answers
 	// still hold it. Reading the URL's step here and the resolved one on screen
 	// is how a footer comes to name a screen nobody is looking at.
@@ -709,6 +751,9 @@ function SelectionWizardSession({
 				onCancelClause: () => setClauseEdit(undefined),
 				clauseFields: SUPPORTED_CLAUSE_FIELDS,
 				clauseSuggestions,
+				conversionNotice: conversion
+					? searchConversionNotice(conversion)
+					: undefined,
 				semanticFallbackTaken,
 				sample: { ...sample, label: "What this matches" },
 			}}
@@ -759,17 +804,41 @@ function SelectionWizardSession({
 }
 
 /**
- * The wizard's mount point, beside the list that opens it. It owns the step in
- * the URL and the history entries the wizard walks; the walk itself is a
- * separate component, mounted only while a step is held, so every answer it
- * collects is gone by the time the next one starts.
+ * The wizard's mount point, and the only one: both entries walk this host, so
+ * there is one owner of the step in the URL and of the history entries the
+ * wizard pushes. The walk itself is a separate component, mounted only while a
+ * step is held, so every answer it collects is gone by the time the next one
+ * starts.
+ *
+ * The URL says which affordance opened the wizard, and that decides two things
+ * and no more: which step it opens on, and whether the query seeds the clauses.
+ * A search entry ticks nothing and its rule belongs to the account the query
+ * names, so the selection the bar would have handed over is not the one it
+ * walks.
  */
 export function SelectionWizardHost(props: SelectionWizardHostProps) {
-	const { step, goToStep, goBack, closeWizard } = useWizardStep(OPENING_STEP);
+	const fromSearch = useWizardEntryValue() === "search";
+	const { searchConversion } = useListHeaderChrome();
+	const { accounts } = useMailContext();
+	const { step, goToStep, goBack, closeWizard } = useWizardStep(
+		fromSearch ? "properties" : "match",
+	);
 	if (!step) return null;
+	const conversion = fromSearch
+		? (searchConversion ?? NO_CONVERSION)
+		: undefined;
 	return (
 		<SelectionWizardSession
 			{...props}
+			{...(conversion
+				? {
+						verb: "organize" as const,
+						accountId: conversion.targetAccountId ?? accounts[0]?.accountId,
+						selection: EMPTY_SELECTION,
+						crossAccount: false,
+						searchConversion: conversion,
+					}
+				: {})}
 			step={step}
 			goToStep={goToStep}
 			goBack={goBack}

package/src/components/mail/make-filter-entry.test.ts

@@ -0,0 +1,63 @@
+import assert from "node:assert/strict";
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { describe, it } from "node:test";
+import { fileURLToPath } from "node:url";
+
+/**
+ * "Make this a filter" is the wizard's second entry (#477 clause 1.8), and the
+ * step it pushes has to be answered on the view that offered it.
+ *
+ * The affordance is built once by `MailListHeader` and handed down as
+ * `makeFilterSlot`, so any surface can put it on screen — but the wizard is
+ * mounted per surface, and a surface that renders the row without one leaves
+ * the press on a URL nothing answers. That is the dead button clause 1.7 exists
+ * to prevent, and it is invisible in review: the row and the host are two files
+ * apart, and the affordance keeps working everywhere else.
+ *
+ * So the pairing is the assertion. A surface that renders the row names where
+ * its step is answered, and that file is checked to mount a host. A fourth
+ * surface fails here until it does the same.
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+/** How the chrome's slot is read — `MailListHeader` writes it, everyone else reads it. */
+const RENDERS_SLOT = /\.makeFilterSlot/;
+const MOUNTS_HOST = /<SelectionWizardHost/;
+
+/** Surface that renders the affordance → the file whose composition answers the step. */
+const ANSWERED_BY: Record<string, string> = {
+	"DailyBrief.tsx": "DailyBrief.tsx",
+	"MessageList.tsx": "MessageList.tsx",
+	// The starred list's bar is shared with the brief's, so its host is mounted
+	// by the view rather than beside the bar.
+	"ThreadListInteraction.tsx": "FlaggedList.tsx",
+};
+
+const read = (file: string): string =>
+	readFileSync(resolve(here, file), "utf8");
+
+const surfacesRenderingTheAffordance = (): string[] =>
+	readdirSync(here)
+		.filter((file) => file.endsWith(".tsx"))
+		.filter((file) => RENDERS_SLOT.test(read(file)));
+
+describe("the make-filter entry", () => {
+	it("is rendered only by surfaces that say where its step is answered", () => {
+		assert.deepEqual(
+			surfacesRenderingTheAffordance().sort(),
+			Object.keys(ANSWERED_BY).sort(),
+		);
+	});
+
+	it("is answered by a mounted wizard on every one of them", () => {
+		for (const [surface, host] of Object.entries(ANSWERED_BY)) {
+			assert.match(
+				read(host),
+				MOUNTS_HOST,
+				`${surface} is answered by ${host}`,
+			);
+		}
+	});
+});

package/src/hooks/useRulePreview.ts

@@ -1,5 +1,5 @@
 import { organizeOperationsPreviewOrganizeMutation } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { PreviewCount } from "@remit/ui";
+import { type PreviewCount, UNCOUNTABLE_PREDICATE_REASON } from "@remit/ui";
 import { useMutation } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import { buildOrganizeInput } from "@/lib/organize/organize-model";
@@ -9,7 +9,6 @@ import {
 	PREVIEW_DEBOUNCE_MS,
 	type PreviewState,
 	predicateSignature,
-	UNCOUNTABLE_PREDICATE_REASON,
 } from "@/lib/organize/rule-model";
 import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
 

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

@@ -1,3 +1,4 @@
+import type { SearchConversion } from "@remit/ui";
 import { createContext, type ReactNode, useContext } from "react";
 
 /**
@@ -31,6 +32,15 @@ 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/organize/rule-model.ts

@@ -207,10 +207,6 @@ export const isEvaluablePredicate = (
 	predicate.anchorMessageId !== undefined ||
 	!predicate.literalClauses.some((clause) => clause.field === "HasWords");
 
-/** What the count says when the predicate cannot be counted at all. */
-export const UNCOUNTABLE_PREDICATE_REASON =
-	"Can't count matches — “has the words” reads message bodies, which only a saved rule does.";
-
 /**
  * A stable key for a predicate's match set. Two predicates with the same key
  * match the same messages; a change to the key is what marks the live count

package/src/lib/wizard-history.test.ts

@@ -15,6 +15,8 @@ import {
 } from "@remit/ui";
 import {
 	ownedHistoryEntries,
+	wizardEntryFromParam,
+	wizardEntryValue,
 	wizardStepFromParam,
 	wizardStepValue,
 } from "./wizard-history.js";
@@ -72,6 +74,17 @@ describe("re-rooting a wizard that was loaded into", () => {
 		);
 	});
 
+	// The root is the wizard-closed state, so it carries neither the step nor
+	// the affordance that opened it; otherwise closing the wizard leaves the
+	// entry marker behind in the address bar (#484).
+	it("puts the wizard back on a root that names no entry", () => {
+		assert.match(source, /wizard: undefined,\s*\n\s*wizardFrom: undefined,/);
+		assert.match(
+			source,
+			/wizard: openingStep,\s*\n\s*wizardFrom: openingEntry,/,
+		);
+	});
+
 	it("is never armed by a step the app pushed", () => {
 		const goToStep = source.slice(source.indexOf("const goToStep"));
 		assert.doesNotMatch(goToStep, /loadedHoldingStep/);
@@ -107,6 +120,24 @@ describe("the wizard step in the URL", () => {
 	});
 });
 
+describe("which affordance opened the wizard", () => {
+	it("reads the search entry, and everything else as the selection bar", () => {
+		assert.equal(wizardEntryFromParam("search"), "search");
+		for (const value of [undefined, "", "Search", "bar", 1, null, {}]) {
+			assert.equal(wizardEntryFromParam(value), undefined);
+		}
+	});
+
+	it("never fails validation, so a mistyped link still lands on the mail", () => {
+		for (const value of ["nope", "SEARCH", 7, [], null, undefined]) {
+			const parsed = wizardEntryValue.safeParse(value);
+			assert.ok(parsed.success);
+			assert.equal(parsed.data, undefined);
+		}
+		assert.equal(wizardEntryValue.parse("search"), "search");
+	});
+});
+
 describe("the history entries the wizard owns", () => {
 	it("is one per step reached, on every shape of the list", () => {
 		for (const answers of answerSets()) {