@remit/web-client 0.0.86 → 0.0.88

package/src/components/mail/MessageList.tsx

@@ -21,6 +21,7 @@ import {
 	type EscalationSearchQuery,
 	useEscalatedActions,
 } from "@/hooks/useEscalatedActions";
+import { useFollowFocusOpen } from "@/hooks/useFollowFocusOpen";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import {
@@ -245,13 +246,33 @@ export const MessageList = ({
 
 	// Roving focus cursor (#429): the keyboard "where am I" pointer, distinct
 	// from the open thread (`selectedMessageId` in the URL). j/k move this
-	// cursor without opening; Enter opens the focused row → sets selected. It
-	// seeds from the open thread so opening a message also focuses its row, and
-	// click-to-open keeps working unchanged (the route still navigates).
-	const [focusedMessageId, setFocusedMessageId] = useState<string | undefined>(
+	// cursor; Enter opens the focused row → sets selected, and on desktop the
+	// reading pane follows the cursor of its own accord (see the follow-focus
+	// wiring below). It seeds from the open thread so opening a message also
+	// focuses its row, and click-to-open keeps working unchanged (the route
+	// still navigates).
+	const [focusedMessageId, setFocusedId] = useState<string | undefined>(
 		selectedMessageId,
 	);
 
+	// Which of those moves came from a keyboard command, so the reading pane can
+	// follow the cursor without following a click that already opened its own row.
+	const [keyboardFocusedMessageId, setKeyboardFocusedMessageId] = useState<
+		string | undefined
+	>();
+
+	// Every non-keyboard move — a click, Tab, a thread opening, a refetch snapping
+	// the cursor to a survivor — drops the keyboard mark, so nothing follows it.
+	// A row taking DOM focus as the *consequence* of a keyboard move arrives here
+	// with the id that move just set; keeping the mark in that case is what stops
+	// the browser's own focus event from cancelling the load the move started.
+	const setFocusedMessageId = useCallback((id: string | undefined) => {
+		setKeyboardFocusedMessageId((current) =>
+			current === id ? current : undefined,
+		);
+		setFocusedId(id);
+	}, []);
+
 	// Density toggle: comfortable (default) or compact (mutt mode).
 	// Persisted to localStorage so the choice survives reloads.
 	const [density, setDensity] = useState<Density>(readStoredDensity);
@@ -448,7 +469,8 @@ export const MessageList = ({
 			}
 			pendingDomFocusRef.current = thread.messageId;
 			cursorMovedByPointerRef.current = false;
-			setFocusedMessageId(thread.messageId);
+			setKeyboardFocusedMessageId(thread.messageId);
+			setFocusedId(thread.messageId);
 		},
 		[threads, isMultiSelectMode, toggleCheck],
 	);
@@ -564,10 +586,12 @@ export const MessageList = ({
 			selectRange(orderedIds, target);
 			// Shift+arrow moves the focus cursor (not the open thread) and grows
 			// the selection from the anchor — the keyboard equivalent of
-			// shift-click.
+			// shift-click. It is building a range, not reading, so the reading pane
+			// stays on whatever is open rather than chasing the range's edge.
 			pendingDomFocusRef.current = target;
 			cursorMovedByPointerRef.current = false;
-			setFocusedMessageId(target);
+			setKeyboardFocusedMessageId(undefined);
+			setFocusedId(target);
 		},
 		[orderedIds, focusedMessageId, selectRange],
 	);
@@ -621,6 +645,34 @@ export const MessageList = ({
 		});
 	}, [focusedMessageId, navigate, mailboxId]);
 
+	// The reading pane follows the cursor on desktop: j/k load the row they land
+	// on, without the user having to press Enter for every message. It replaces
+	// the history entry rather than pushing one — a preview the cursor produced
+	// is not a navigation the user asked for, and Back should still leave the
+	// mailbox instead of walking the cursor's path back up the list.
+	//
+	// Suspended while rows are selected: the cursor is then picking out a set,
+	// and the selection toolbar — not a message — is what the user is looking at.
+	// Suspended off desktop too, where the reading pane replaces the list
+	// entirely, so following the cursor would throw the user off the list.
+	const followFocusOpen = useCallback(
+		(messageId: string) => {
+			navigate({
+				to: "/mail/$mailboxId",
+				params: { mailboxId },
+				search: (prev) => ({ ...prev, selectedMessageId: messageId }),
+				replace: true,
+			});
+		},
+		[navigate, mailboxId],
+	);
+	useFollowFocusOpen({
+		keyboardFocusedMessageId,
+		openMessageId: selectedMessageId,
+		enabled: isDesktop && selectedCount === 0,
+		open: followFocusOpen,
+	});
+
 	// Toolbar Trash2: confirm-delete the current selection.
 	const handleDelete = useCallback(() => {
 		if (selectedCount > 0) {
@@ -742,6 +794,7 @@ export const MessageList = ({
 		mailboxId,
 		isDesktop,
 		runChunkedConfirmDelete,
+		setFocusedMessageId,
 	]);
 
 	// Every way out of the confirmation that isn't the delete — Escape, Cancel,
@@ -756,7 +809,7 @@ export const MessageList = ({
 		pendingDomFocusRef.current = restoreTo;
 		cursorMovedByPointerRef.current = false;
 		setFocusedMessageId(restoreTo);
-	}, []);
+	}, [setFocusedMessageId]);
 
 	// Mark read, bounded and escalated alike (#114). Both go through the same
 	// chunked run: the bulk flags call caps at 100 ids, so a selection past
@@ -925,7 +978,7 @@ export const MessageList = ({
 			cursorMovedByPointerRef.current = false;
 			setFocusedMessageId(selectedMessageId);
 		}
-	}, [selectedMessageId]);
+	}, [selectedMessageId, setFocusedMessageId]);
 
 	// Keep the focus cursor valid as the thread list changes (after delete /
 	// move / refetch). If the focused row vanished, snap to the nearest
@@ -934,7 +987,7 @@ export const MessageList = ({
 		if (!focusedMessageId) return;
 		if (threads.some((t) => t.messageId === focusedMessageId)) return;
 		setFocusedMessageId(threads[0]?.messageId);
-	}, [threads, focusedMessageId]);
+	}, [threads, focusedMessageId, setFocusedMessageId]);
 
 	// Bridge the roving cursor + selection up to the route's global keyboard
 	// dispatcher (#429) so the action verbs can target the focused row, or the
@@ -1364,10 +1417,13 @@ export const MessageList = ({
 
 	// A row focused by Tab or click becomes the cursor, so the keys act on what
 	// the browser says is focused.
-	const handleRowFocus = useCallback((messageId: string) => {
-		cursorMovedByPointerRef.current = true;
-		setFocusedMessageId(messageId);
-	}, []);
+	const handleRowFocus = useCallback(
+		(messageId: string) => {
+			cursorMovedByPointerRef.current = true;
+			setFocusedMessageId(messageId);
+		},
+		[setFocusedMessageId],
+	);
 
 	// The virtualized list body: rows + search header + load-more indicator.
 	// Passed to MessageListPane as `listBody` so the kit provides the chrome
@@ -1421,7 +1477,6 @@ export const MessageList = ({
 								<SwipeableMessageRow
 									thread={thread}
 									mailboxId={mailboxId}
-									accountId={accountId}
 									isSelected={selectedMessageId === thread.messageId}
 									isFocused={focusedMessageId === thread.messageId}
 									isTabStop={tabStopMessageId === thread.messageId}

package/src/components/mail/MessageListItem.tsx

@@ -1,10 +1,9 @@
 /**
  * MessageListItem — the mailbox list's adapter onto the shared `MessageRow`.
  *
- * It maps an API thread to the row's `ThreadRowData` shape and supplies the two
- * things only the mailbox list has: route-linking rows and the auto-moved
- * badge. Everything visual and interactive lives in `MessageRow`, which the
- * brief and Flagged render too.
+ * It maps an API thread to the row's `ThreadRowData` shape and supplies the one
+ * thing only the mailbox list has: route-linking rows. Everything visual and
+ * interactive lives in `MessageRow`, which the brief and Flagged render too.
  */
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import type { Density, SenderTrustLevel, ThreadRowData } from "@remit/ui";
@@ -12,14 +11,11 @@ import { memo } from "react";
 import type { SelectionModifiers } from "@/hooks/useSelection";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
-import { AutoMovedIndicator } from "./AutoMovedIndicator";
 import { MessageRow } from "./MessageRow";
 
 interface MessageListItemProps {
 	thread: RemitImapThreadMessageResponse;
 	mailboxId: string;
-	/** Owning account, used to resolve the Inbox/Junk mailboxes for the auto-moved badge's undo action. */
-	accountId?: string;
 	isSelected: boolean;
 	isFocused?: boolean;
 	isTabStop?: boolean;
@@ -43,7 +39,7 @@ export const threadToRowData = (
 	messageCount?: number,
 ): ThreadRowData => ({
 	id: thread.messageId,
-	accountId: thread.accountConfigId,
+	accountId: thread.accountId,
 	mailboxId: thread.mailboxId,
 	fromName: thread.fromName ?? thread.fromEmail ?? "Unknown",
 	fromEmail: thread.fromEmail ?? "",
@@ -66,7 +62,6 @@ export const threadToRowData = (
 const MessageListItemComponent = ({
 	thread,
 	mailboxId,
-	accountId,
 	isSelected,
 	isFocused,
 	isTabStop,
@@ -97,18 +92,6 @@ const MessageListItemComponent = ({
 			isMultiSelectMode,
 			onLongPress,
 		}}
-		badge={
-			thread.autoMoved ? (
-				<AutoMovedIndicator
-					accountId={accountId}
-					messageId={thread.messageId}
-					threadId={thread.threadId}
-					mailboxId={thread.mailboxId}
-					autoMoved={thread.autoMoved}
-					size="sm"
-				/>
-			) : undefined
-		}
 	/>
 );
 

package/src/components/mail/MessageRow.tsx

@@ -28,6 +28,7 @@ import { type MouseEvent, memo, type ReactNode, useCallback } from "react";
 import type { SelectionModifiers } from "@/hooks/useSelection";
 import { cn } from "@/lib/utils";
 import { useThreadRowInteraction } from "./ThreadListInteraction";
+import { modifiersOf, useModifierSelect } from "./useModifierSelect";
 
 interface MailboxLinkSearch {
 	selectedMessageId?: string;
@@ -125,21 +126,18 @@ const MessageRowComponent = ({
 		[onToggleCheck, messageId],
 	);
 
-	// Desktop mouse selection semantics. Plain click falls through to the Link's
-	// navigation (or `onClick` on a non-linking row); shift / cmd / ctrl click is
-	// routed to selection and the navigation is suppressed.
-	//
-	// A modified click must preventDefault: the router skips navigation for any
-	// modified click and leaves the anchor's own default in place, which in a
-	// browser means shift-click opens a new window and cmd-click a new tab.
-	// Shift-click also drags a native text selection across the rows it spans,
-	// so drop it — the row highlight is the selection the user asked for.
+	const modifierSelect = useModifierSelect(messageId, onRowSelect);
+
+	// A plain click falls through to the Link's navigation (or `onClick` on a
+	// non-linking row). A modified click belongs to selection and is consumed by
+	// `claimClick`, whichever of the press or the click the engine delivered.
 	//
 	// On mobile, once selection mode is active (#92) a plain tap toggles the row
 	// instead of opening it — the same tap-to-toggle contract every reference
 	// mail client uses once you're mid-selection.
 	const handleRowClick = useCallback(
 		(e: MouseEvent) => {
+			if (modifierSelect.claimClick(e)) return;
 			if (!isDesktop) {
 				if (isMultiSelectMode) {
 					e.preventDefault();
@@ -150,20 +148,13 @@ const MessageRowComponent = ({
 				onClick?.();
 				return;
 			}
-			const modifiers = {
-				shiftKey: e.shiftKey,
-				metaKey: e.metaKey,
-				ctrlKey: e.ctrlKey,
-			};
-			if (onRowSelect?.(messageId, modifiers)) {
-				e.preventDefault();
-				e.stopPropagation();
-				if (modifiers.shiftKey) window.getSelection()?.removeAllRanges();
-				return;
-			}
+			// A plain desktop click collapses any multi-selection and re-anchors it
+			// before the row opens.
+			onRowSelect?.(messageId, modifiersOf(e));
 			onClick?.();
 		},
 		[
+			modifierSelect,
 			isDesktop,
 			isMultiSelectMode,
 			onToggleCheck,
@@ -173,16 +164,6 @@ const MessageRowComponent = ({
 		],
 	);
 
-	// Shift-click starts a native text selection on mousedown; suppressing it
-	// there keeps the drag from painting a text range over the rows.
-	const handleRowMouseDown = useCallback(
-		(e: MouseEvent) => {
-			if (!isDesktop) return;
-			if (e.shiftKey) e.preventDefault();
-		},
-		[isDesktop],
-	);
-
 	const handleLongPress = useCallback(() => {
 		onLongPress?.(messageId);
 	}, [onLongPress, messageId]);
@@ -222,7 +203,8 @@ const MessageRowComponent = ({
 				: {}),
 			tabIndex: isTabStop ? 0 : -1,
 			onClick: handleRowClick,
-			onMouseDown: handleRowMouseDown,
+			onMouseDown: modifierSelect.onMouseDown,
+			onContextMenu: modifierSelect.onContextMenu,
 			onMouseEnter: prefetchMessage,
 			onFocus: handleRowFocus,
 		},

package/src/components/mail/SwipeableMessageRow.tsx

@@ -11,6 +11,7 @@ import type { SelectionModifiers } from "@/hooks/useSelection";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
 import { MessageListItem } from "./MessageListItem";
+import { useModifierSelect } from "./useModifierSelect";
 
 interface MailboxLinkSearch {
 	selectedMessageId?: string;
@@ -20,8 +21,6 @@ interface MailboxLinkSearch {
 interface SwipeableMessageRowProps {
 	thread: RemitImapThreadMessageResponse;
 	mailboxId: string;
-	/** Owning account, forwarded to `MessageListItem` for the auto-moved badge's undo action. */
-	accountId?: string;
 	isSelected: boolean;
 	/** Roving keyboard focus cursor — renders the left accent rail (#429). */
 	isFocused?: boolean;
@@ -46,7 +45,7 @@ const toThreadRowData = (
 	const suspicious = thread.authenticity?.dkimMismatch === true;
 	return {
 		id: thread.messageId,
-		accountId: thread.accountConfigId,
+		accountId: thread.accountId,
 		fromName: thread.fromName ?? thread.fromEmail ?? "Unknown",
 		fromEmail: thread.fromEmail ?? "",
 		subject: thread.subject ?? "(No subject)",
@@ -64,7 +63,6 @@ const toThreadRowData = (
 export const SwipeableMessageRow = ({
 	thread,
 	mailboxId,
-	accountId,
 	isSelected,
 	isFocused,
 	isTabStop,
@@ -102,12 +100,16 @@ export const SwipeableMessageRow = ({
 		onToggleCheck(thread.messageId);
 	}, [onToggleCheck, thread.messageId]);
 
+	// The swipe row is the layout tier's row, not the input device's: a mouse at
+	// a narrow width still gets it, and a shift or cmd click on it belongs to
+	// selection rather than to the anchor's own new-window/new-tab gesture.
+	const modifierSelect = useModifierSelect(thread.messageId, onRowSelect);
+
 	if (isDesktop || isMultiSelectMode) {
 		return (
 			<MessageListItem
 				thread={thread}
 				mailboxId={mailboxId}
-				accountId={accountId}
 				isSelected={isSelected}
 				isFocused={isFocused}
 				isTabStop={isTabStop}
@@ -145,7 +147,12 @@ export const SwipeableMessageRow = ({
 						selectedMessageId: thread.messageId,
 					})}
 					data-message-row
-					onClick={onOpenClick}
+					onMouseDown={modifierSelect.onMouseDown}
+					onContextMenu={modifierSelect.onContextMenu}
+					onClick={(e) => {
+						if (modifierSelect.claimClick(e)) return;
+						onOpenClick(e);
+					}}
 				>
 					{children}
 				</Link>

package/src/components/mail/ThreadListInteraction.tsx

@@ -28,6 +28,7 @@ import {
 	useState,
 } from "react";
 import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
+import { useFollowFocusOpen } from "@/hooks/useFollowFocusOpen";
 import { useListCursor } from "@/hooks/useListCursor";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
@@ -52,6 +53,12 @@ interface ThreadListInteractionValue {
 	exitSelection: () => void;
 	/** Opens the move-to-Trash confirmation for the current selection. */
 	requestDeleteSelection: () => void;
+	/** Rendered rows in display order — the same order a shift-range spans. */
+	orderedIds: string[];
+	/** Whether every rendered row is selected, for a select-all control. */
+	allSelected: boolean;
+	/** Select every rendered row, or clear when they already all are. */
+	toggleAllLoaded: () => void;
 }
 
 const ThreadListInteractionCtx =
@@ -121,10 +128,19 @@ const useRenderedRowIds = (
 	return rowIds;
 };
 
+/**
+ * How a row was opened. `replace: true` marks a reading-pane preview the cursor
+ * produced rather than a navigation the user asked for, so Back still leaves the
+ * list instead of walking the cursor's path back up it.
+ */
+export interface OpenMessageOptions {
+	replace?: boolean;
+}
+
 interface ThreadListInteractionProps {
 	selectedMessageId: string | undefined;
 	/** Opens a row — the same navigation a click performs. */
-	onOpen: (messageId: string) => void;
+	onOpen: (messageId: string, options?: OpenMessageOptions) => void;
 	/** Deletes a set of messages. Absent disables the delete key for this list. */
 	onDeleteMessages?: (messageIds: string[]) => void;
 	isDeleting?: boolean;
@@ -160,7 +176,14 @@ export function ThreadListInteraction({
 		exitSelection,
 		handleRowSelect,
 	} = cursor;
-	const { selectedIds, selectedCount, isSelected, toggle, select } = selection;
+	const { selectedIds, selectedCount, isSelected, toggle, select, toggleAll } =
+		selection;
+
+	const allSelected =
+		orderedIds.length > 0 && orderedIds.every((id) => selectedIds.has(id));
+	const toggleAllLoaded = useCallback(() => {
+		if (orderedIds.length > 0) toggleAll(orderedIds);
+	}, [orderedIds, toggleAll]);
 
 	// A row that leaves the list — a chip filter, a collapsed section, a
 	// completed delete — cannot stay selected. Survivors keep their selection.
@@ -199,6 +222,20 @@ export function ThreadListInteraction({
 		if (focusedMessageId) onOpen(focusedMessageId);
 	}, [focusedMessageId, onOpen]);
 
+	// The reading pane follows the cursor on desktop. Suspended while rows are
+	// selected: the cursor is then picking out a set, and the selection bar — not
+	// a message — is what the user is looking at.
+	const followOpen = useCallback(
+		(messageId: string) => onOpen(messageId, { replace: true }),
+		[onOpen],
+	);
+	useFollowFocusOpen({
+		keyboardFocusedMessageId: cursor.keyboardFocusedMessageId,
+		openMessageId: selectedMessageId,
+		enabled: isDesktop && selectedCount === 0,
+		open: followOpen,
+	});
+
 	// Pending move-to-Trash, awaiting confirmation. The ids are snapshotted at
 	// request time so a selection change behind the dialog cannot retarget it —
 	// the same contract the mailbox list's delete has.
@@ -320,6 +357,9 @@ export function ThreadListInteraction({
 			selectedCount,
 			exitSelection,
 			requestDeleteSelection,
+			orderedIds,
+			allSelected,
+			toggleAllLoaded,
 			rowInteraction: (messageId: string) => ({
 				focused: messageId === focusedMessageId,
 				isTabStop: messageId === tabStop,
@@ -339,6 +379,9 @@ export function ThreadListInteraction({
 			selectedCount,
 			exitSelection,
 			requestDeleteSelection,
+			orderedIds,
+			allSelected,
+			toggleAllLoaded,
 			focusedMessageId,
 			tabStop,
 			isDesktop,
@@ -378,11 +421,13 @@ interface ThreadListSelectionBarProps {
 }
 
 /**
- * Selection bar for a list inside `ThreadListInteraction`.
+ * Reduced selection bar for Flagged, mounted inside `ThreadListInteraction`.
  *
- * Move is not offered here: the brief and Flagged span accounts and mailboxes,
- * and a move picker needs one account and one source folder to be honest about
- * where the messages go. Delete and mark-read carry no such scope.
+ * Move is not offered here: Flagged spans accounts and mailboxes, and a move
+ * picker needs one account and one source folder to be honest about where the
+ * messages go. Delete and mark-read carry no such scope. The brief resolves
+ * that scope from the selection instead and mounts the mailbox list's full
+ * `SelectionToolbar` — see `DailyBrief`.
  */
 export function ThreadListSelectionBar({
 	onMarkAsRead,

package/src/components/mail/organize/OrganizeRuleEditor.tsx

@@ -4,16 +4,19 @@ import {
 	FilterRuleEditor,
 	type FolderOption,
 	type LabelOption,
+	type RuleMatchMode,
 	type RuleScope,
 } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { useClauseSuggestions } from "@/hooks/useClauseSuggestions";
 import { useCreateMailbox } from "@/hooks/useCreateMailbox";
 import { useCreateFilter } from "@/hooks/useFilters";
 import { useCreateLabel, useLabelList } from "@/hooks/useLabels";
 import { useOrganizeJob } from "@/hooks/useOrganizeJob";
 import { useRuleEditorState } from "@/hooks/useRuleEditorState";
 import { useRulePreview } from "@/hooks/useRulePreview";
+import { useSelectedSubjects } from "@/hooks/useSelectedSubjects";
 import { getMailboxDisplayName } from "@/lib/folder-roles";
 import { buildMoveTargets } from "@/lib/move-targets";
 import {
@@ -22,6 +25,8 @@ import {
 } from "@/lib/organize/organize-model";
 import {
 	buildInitialRule,
+	defaultMatchMode,
+	matchersForMode,
 	rulePredicate,
 	ruleToDraft,
 	SUPPORTED_CLAUSE_FIELDS,
@@ -46,6 +51,12 @@ interface OrganizeRuleEditorProps {
 	semanticUnavailable?: boolean;
 	/** Distinct sender addresses, for the fallback clauses and the progress copy. */
 	senders?: string[];
+	/**
+	 * The mode the editor opens on. Omitted, it opens on the semantic widen
+	 * wherever the deployment can run it — a caller passes `properties` only to
+	 * enter the flow on a rule built from the selection's own properties.
+	 */
+	seedMatchMode?: RuleMatchMode;
 	/** A folder a "Something else" shortcut pre-picked. */
 	seedMailboxId?: string;
 	/** A scope a "Something else" shortcut pre-picked. */
@@ -70,28 +81,65 @@ export function OrganizeRuleEditor({
 	seedCount,
 	semanticUnavailable = false,
 	senders = [],
+	seedMatchMode,
 	seedMailboxId,
 	seedScope,
 	onClose,
 }: OrganizeRuleEditorProps) {
 	const anchorMessageId = selectedMessageIds[0];
 	const senderFallback = semanticUnavailable && senders.length > 0;
+	const subjects = useSelectedSubjects(selectedMessageIds);
+
+	// Semantic stays the default wherever the deployment can serve it; the
+	// properties mode is the third way in, not a replacement (RFC 038 D2).
+	const [matchMode, setMatchMode] = useState<RuleMatchMode>(
+		() => seedMatchMode ?? defaultMatchMode(semanticUnavailable),
+	);
 
 	const [initialRule] = useState<FilterRule>(() =>
 		buildInitialRule({
 			anchorMessageId,
 			semanticUnavailable,
+			matchMode,
 			senders,
+			subjects,
 			selectionCount: selectedMessageIds.length,
 			seedMailboxId,
 			seedScope,
 		}),
 	);
-	const { rule, handlers } = useRuleEditorState({
+	const { rule, setRule, handlers } = useRuleEditorState({
 		initialRule,
 		widenAnchorCount: selectedMessageIds.length,
 	});
 
+	// Switching mode rebuilds only what the rule matches on — the derived chips
+	// and the widen. The destination, label, scope, name, and any clause the user
+	// typed themselves survive, so the choice stays reversible.
+	const changeMatchMode = (next: RuleMatchMode) => {
+		if (next === matchMode) return;
+		setMatchMode(next);
+		setRule((current) => ({
+			...current,
+			...matchersForMode(next, {
+				anchorMessageId,
+				senders,
+				subjects,
+				selectionCount: selectedMessageIds.length,
+				keepClauses: current.clauses.filter((clause) => !clause.derived),
+				currentOperator: current.matchOperator,
+			}),
+		}));
+	};
+
+	// The selection's own senders are the likeliest values for an address clause
+	// and are already in hand, so they lead the list before anything is typed.
+	const clauseSuggestions = useClauseSuggestions(
+		handlers.clauseEdit?.draft.field,
+		handlers.clauseEdit?.draft.value ?? "",
+		senders,
+	);
+
 	const { data: mailboxesData } = useQuery({
 		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
 		staleTime: Number.POSITIVE_INFINITY,
@@ -178,7 +226,9 @@ export function OrganizeRuleEditor({
 				runningLabel={
 					senderFallback
 						? "Organizing mail from these senders…"
-						: "Organizing similar mail…"
+						: matchMode === "properties"
+							? "Organizing matching mail…"
+							: "Organizing similar mail…"
 				}
 				onClose={onClose}
 			/>
@@ -219,7 +269,12 @@ export function OrganizeRuleEditor({
 			labels={labels}
 			preview={preview}
 			semanticAvailable={!semanticUnavailable}
+			// A deployment without the vector pipeline has only one mode to be in,
+			// so it gets no choice to make — the rule already matches on properties.
+			matchMode={semanticUnavailable ? undefined : matchMode}
+			onChangeMatchMode={changeMatchMode}
 			clauseFields={SUPPORTED_CLAUSE_FIELDS}
+			clauseSuggestions={clauseSuggestions}
 			{...handlers}
 			onCreateFolder={createFolder}
 			onCreateLabel={onCreateLabel}

package/src/components/mail/organize/SearchFilterDialog.render.test.ts

@@ -10,7 +10,7 @@ import { SearchFilterDialog } from "./SearchFilterDialog";
 // runtime, which references a global `React`.
 (globalThis as { React?: typeof React }).React = React;
 
-const render = (open: boolean) =>
+const render = (open: boolean, query = "from:receipts@stripe.com") =>
 	renderToString(
 		createElement(
 			QueryClientProvider,
@@ -18,7 +18,7 @@ const render = (open: boolean) =>
 			createElement(SearchFilterDialog, {
 				open,
 				accountId: "acc-1",
-				parsed: parseSearchTokens("receipts", {}),
+				parsed: parseSearchTokens(query, {}),
 				searchHadSemanticReach: true,
 				onClose: () => undefined,
 			}),
@@ -33,4 +33,15 @@ describe("SearchFilterDialog", () => {
 	it("shows the conversion step while the seed preview is in flight", () => {
 		assert.match(render(true), /Turning your search into a filter/);
 	});
+
+	it("opens the editor for a free-text search instead of failing to count it", () => {
+		// The free text converts to a `HasWords` clause, which the vector-free
+		// matcher refuses outright. Asking for a count is a 500, so nothing is
+		// asked: the editor opens and the count region carries the reason.
+		const html = render(true, "receipts");
+		assert.doesNotMatch(html, /Turning your search into a filter/);
+		assert.doesNotMatch(html, /Couldn't build the filter/);
+		assert.match(html, /These chips are the whole rule/);
+		assert.match(html, /reads message bodies/);
+	});
 });