@remit/web-client 0.0.72 → 0.0.74

package/package.json

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

@@ -236,9 +236,9 @@ const MessageRowComponent = ({
 		isChecked && "bg-accent-soft",
 		// Long-press enters selection mode; without these, Android Chrome opens
 		// the link context menu / starts text selection and iOS Safari fires the
-		// callout, racing the app's handler. react-aria suppresses
-		// contextmenu/text-selection but not iOS's callout — it fires no
-		// cancelable event, so CSS is the only lever.
+		// callout, racing the app's handler. useLongPress suppresses the
+		// touch-fired contextmenu; the callout fires no cancelable event, so
+		// `select-none` / `-webkit-touch-callout: none` are the only lever left.
 		!isDesktop && "min-h-11 select-none [-webkit-touch-callout:none]",
 	);
 

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

@@ -18,6 +18,7 @@ import { makeMailbox } from "../../../test-support/fixtures";
 import {
 	type HttpCall,
 	type HttpMock,
+	httpError,
 	mockFetch,
 } from "../../../test-support/http";
 import { OrganizeRuleEditor } from "./OrganizeRuleEditor";
@@ -276,7 +277,7 @@ describe("OrganizeRuleEditor — the previewed set equals the applied set", () =
 });
 
 describe("OrganizeRuleEditor — scope mapping", () => {
-	it("saves a standing filter carrying the sender fallback clauses", async () => {
+	it("saves a standing filter, then back-applies it over the existing mail", async () => {
 		const dom = mount({
 			semanticUnavailable: true,
 			senders: ["npm@github.com"],
@@ -288,7 +289,14 @@ describe("OrganizeRuleEditor — scope mapping", () => {
 
 		dom.type(dom.byLabel("Rule name"), "GitHub");
 		dom.click(primaryButton(dom, "Save rule"));
-		await dom.flush();
+
+		// The filter is created, then the same predicate is back-applied over the
+		// mail already in the mailbox — not only the mail that arrives next.
+		for (let attempt = 0; attempt < 40; attempt += 1) {
+			await dom.flush();
+			if (/moved/.test(dom.text())) break;
+			await dom.wait(5);
+		}
 
 		const created = (http?.calls ?? []).filter((call) =>
 			call.path.endsWith("/filters"),
@@ -300,7 +308,25 @@ describe("OrganizeRuleEditor — scope mapping", () => {
 		assert.deepEqual(created[0].body?.literalClauses, [
 			{ field: "From", value: "npm@github.com" },
 		]);
-		assert.match(dom.text(), /Filter saved/);
+
+		// The back-apply carries exactly the filter's predicate and runs after it.
+		const backApply = (http?.calls ?? []).filter(
+			(call) => call.path.endsWith("/organize") && call.method === "POST",
+		);
+		assert.equal(backApply.length, 1);
+		assert.equal(backApply[0].body?.matchOperator, "Or");
+		assert.deepEqual(backApply[0].body?.literalClauses, [
+			{ field: "From", value: "npm@github.com" },
+		]);
+		assert.ok(
+			(http?.calls ?? []).indexOf(created[0]) <
+				(http?.calls ?? []).indexOf(backApply[0]),
+			"the filter is created before the back-apply runs",
+		);
+
+		// The flow lands on the back-apply's done summary, not a bare saved screen.
+		assert.match(dom.text(), /Done/);
+		assert.doesNotMatch(dom.text(), /Filter saved/);
 	});
 
 	it("saves an until-a-date filter with the derived expiry", async () => {
@@ -323,6 +349,120 @@ describe("OrganizeRuleEditor — scope mapping", () => {
 	});
 });
 
+describe("OrganizeRuleEditor — back-apply gating and failure", () => {
+	async function flushUntil(
+		dom: DomHarness,
+		holds: () => boolean,
+	): Promise<void> {
+		for (let attempt = 0; attempt < 40; attempt += 1) {
+			await dom.flush();
+			if (holds()) return;
+			await dom.wait(5);
+		}
+	}
+
+	it("skips the back-apply for a HasWords rule, saving it for incoming mail only", async () => {
+		const dom = mount(
+			{
+				semanticUnavailable: true,
+				senders: [],
+				seedScope: "standing",
+				seedMailboxId: "mbx-archive",
+			},
+			previewCounts([5]),
+		);
+		await dom.flush();
+
+		// A body-content clause: the vector-free back-apply can't evaluate it.
+		dom.click(primaryButton(dom, "Add clause"));
+		dom.select(dom.byLabel("Clause field"), "HasWords");
+		dom.type(dom.byLabel("Clause value"), "invoice");
+		dom.click(primaryButton(dom, "Add"));
+		await settlePreview(dom);
+
+		dom.type(dom.byLabel("Rule name"), "Invoices");
+		dom.click(primaryButton(dom, "Save rule"));
+		await dom.flush();
+		await dom.flush();
+
+		// The filter is created and carries the clause.
+		const created = (http?.calls ?? []).filter((call) =>
+			call.path.endsWith("/filters"),
+		);
+		assert.equal(created.length, 1);
+		assert.deepEqual(created[0].body?.literalClauses, [
+			{ field: "HasWords", value: "invoice" },
+		]);
+
+		// No back-apply is attempted — the guard is never reached.
+		const backApply = (http?.calls ?? []).filter(
+			(call) => call.path.endsWith("/organize") && call.method === "POST",
+		);
+		assert.equal(backApply.length, 0);
+		assert.match(dom.text(), /Filter saved/);
+	});
+
+	it("surfaces a failed back-apply start distinctly, and retries it", async () => {
+		const failStart: Responder = (call) => {
+			if (call.path.endsWith("/organize/preview")) {
+				return { matchedCount: 2, messageIds: [] };
+			}
+			if (call.path.endsWith("/filters")) {
+				return { filterId: "filter-1", name: "R", scope: "Standing" };
+			}
+			if (call.path.endsWith("/organize") && call.method === "POST") {
+				return httpError(500);
+			}
+			return {};
+		};
+		const dom = mount(
+			{
+				semanticUnavailable: true,
+				senders: ["npm@github.com"],
+				seedScope: "standing",
+				seedMailboxId: "mbx-archive",
+				seedCount: 128,
+			},
+			failStart,
+		);
+		await dom.flush();
+
+		dom.type(dom.byLabel("Rule name"), "GitHub");
+		dom.click(primaryButton(dom, "Save rule"));
+
+		await flushUntil(dom, () => /Move existing mail/.test(dom.text()));
+
+		// The filter saved and the start was attempted once, then failed.
+		const created = (http?.calls ?? []).filter((call) =>
+			call.path.endsWith("/filters"),
+		);
+		assert.equal(created.length, 1);
+		const firstStart = (http?.calls ?? []).filter(
+			(call) => call.path.endsWith("/organize") && call.method === "POST",
+		);
+		assert.equal(firstStart.length, 1);
+
+		// The failure is honest: the rule saved, the move is what to retry — never
+		// a bare "Filter saved" that hides it.
+		assert.match(dom.text(), /Rule saved/);
+		assert.doesNotMatch(dom.text(), /Filter saved/);
+
+		// Retrying re-issues the back-apply start.
+		dom.click(primaryButton(dom, "Move existing mail"));
+		await flushUntil(
+			dom,
+			() =>
+				(http?.calls ?? []).filter(
+					(call) => call.path.endsWith("/organize") && call.method === "POST",
+				).length >= 2,
+		);
+		const afterRetry = (http?.calls ?? []).filter(
+			(call) => call.path.endsWith("/organize") && call.method === "POST",
+		);
+		assert.ok(afterRetry.length >= 2);
+	});
+});
+
 describe("OrganizeRuleEditor — back-apply progress copy (#250 honesty)", () => {
 	async function startJob(dom: DomHarness): Promise<void> {
 		dom.select(dom.byLabel("Destination folder"), "mbx-archive");

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

@@ -6,7 +6,7 @@ import {
 	type RuleScope,
 } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useCreateMailbox } from "@/hooks/useCreateMailbox";
 import { useCreateFilter } from "@/hooks/useFilters";
 import { useOrganizeJob } from "@/hooks/useOrganizeJob";
@@ -14,6 +14,10 @@ import { useRuleEditorState } from "@/hooks/useRuleEditorState";
 import { useRulePreview } from "@/hooks/useRulePreview";
 import { getMailboxDisplayName } from "@/lib/folder-roles";
 import { buildMoveTargets } from "@/lib/move-targets";
+import {
+	canBackApplyDraft,
+	type OrganizeDraft,
+} from "@/lib/organize/organize-model";
 import {
 	buildInitialRule,
 	rulePredicate,
@@ -21,6 +25,7 @@ import {
 	SUPPORTED_CLAUSE_FIELDS,
 } from "@/lib/organize/rule-model";
 import {
+	BackApplyError,
 	CommitError,
 	FilterSaved,
 	JobProgress,
@@ -50,7 +55,9 @@ interface OrganizeRuleEditorProps {
  * The Organize surface as the chip editor (RFC 038 D1). The rule is rendered and
  * edited over the existing preview/apply endpoints: clause chips, a
  * match-operator toggle, a move action, and a scope that maps one-time apply to
- * a back-apply job and standing/until to a `Filter`. The count is live and the
+ * a back-apply job and standing/until to a `Filter`. Creating a filter also runs
+ * the back-apply once, so the rule reaches the mail already in the mailbox and
+ * not only the mail that arrives next. The count is live and the
  * commit gate holds apply until it settles, so the set the editor shows is the
  * set a commit acts on. Rendered inside the desktop dialog and the mobile sheet
  * alike, so the two cannot drift.
@@ -107,12 +114,26 @@ export function OrganizeRuleEditor({
 	const createFilter = useCreateFilter(accountId);
 	const { createFolder } = useCreateMailbox(accountId);
 
+	// Creating a filter also moves the mail that already matches, not only the
+	// mail that arrives next: the same retroactive back-apply the one-time scope
+	// runs. The filter is created first so the rule is live before the pass, then
+	// the pass runs over the existing corpus. `backApplyDraft` is the predicate
+	// to run once the create succeeds, and is undefined when the rule cannot be
+	// back-applied (a `HasWords` clause the vector-free pass can't evaluate — the
+	// filter still saves and applies to incoming mail). It is kept, not cleared,
+	// so a failed start can be retried; `backApplyStarted` guards the one-shot
+	// auto-start against re-firing on re-render.
+	const [backApplyDraft, setBackApplyDraft] = useState<OrganizeDraft>();
+	const backApplyStarted = useRef(false);
+
 	const commit = () => {
 		const draft = ruleToDraft(rule, anchorMessageId);
 		if (rule.scope === "once") {
 			organizeJob.start(draft);
 			return;
 		}
+		backApplyStarted.current = false;
+		setBackApplyDraft(canBackApplyDraft(draft) ? draft : undefined);
 		createFilter.createFilter(
 			draft,
 			rule.scope === "standing" ? "standing" : "temporary",
@@ -120,6 +141,17 @@ export function OrganizeRuleEditor({
 		);
 	};
 
+	useEffect(() => {
+		if (!backApplyDraft || backApplyStarted.current || !createFilter.isSuccess)
+			return;
+		backApplyStarted.current = true;
+		organizeJob.start(backApplyDraft);
+	}, [backApplyDraft, createFilter.isSuccess, organizeJob.start]);
+
+	const retryBackApply = () => {
+		if (backApplyDraft) organizeJob.start(backApplyDraft);
+	};
+
 	if (organizeJob.isStarting || organizeJob.isRunning || organizeJob.isDone) {
 		return (
 			<JobProgress
@@ -135,11 +167,26 @@ export function OrganizeRuleEditor({
 		);
 	}
 
+	// The filter saved, but the back-apply's own request failed (a 5xx or dropped
+	// connection on start, or a failed retry) — no job id was ever assigned, so no
+	// JobProgress state holds. Surface it distinctly instead of falling through to
+	// "Filter saved" and swallowing it: the rule is live, the move is what to
+	// retry.
+	if (createFilter.isSuccess && organizeJob.isError) {
+		return <BackApplyError onRetry={retryBackApply} onClose={onClose} />;
+	}
+
 	if (createFilter.isPending) {
 		return <SavingState />;
 	}
 
 	if (createFilter.isSuccess) {
+		// The filter is saved; the back-apply is about to start (the effect hands
+		// off to the job on the next tick). Keep the saving state until it takes
+		// over so the success screen never flashes between them. When the rule
+		// can't be back-applied, `backApplyDraft` is undefined and this is the
+		// terminal state — saved, applying to incoming mail only.
+		if (backApplyDraft) return <SavingState />;
 		return <FilterSaved onClose={onClose} />;
 	}
 

package/src/components/mail/organize/rule-editor-states.stories.tsx

@@ -0,0 +1,147 @@
+import { BottomSheet } from "@remit/ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { ReactNode } from "react";
+import {
+	BackApplyError,
+	CommitError,
+	FilterSaved,
+	JobProgress,
+	SavingState,
+} from "./rule-editor-states";
+
+/**
+ * `Flows/Smart Organize/Rule editor states` — the non-editing states the rule
+ * editor lands in after a commit, rendered from the real components the Organize
+ * surface mounts. Creating a standing filter now runs the retroactive back-apply,
+ * so a standing save flows Saving → back-apply in flight → done, the same job
+ * states the one-time apply reaches. Every state here is what ships, so the flow
+ * cannot drift from the story.
+ */
+
+function SheetStage({ children }: { children: ReactNode }) {
+	return (
+		<div className="relative mx-auto h-dvh w-full shrink-0 overflow-hidden bg-surface sm:my-6 sm:h-[520px] sm:w-[390px] sm:rounded-[2rem] sm:border sm:border-line sm:shadow-sm">
+			<BottomSheet open onClose={() => undefined}>
+				{children}
+			</BottomSheet>
+		</div>
+	);
+}
+
+const meta: Meta = {
+	title: "Flows/Smart Organize/Rule editor states",
+	parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+/** Saving the filter — held while the create request is in flight. */
+export const Saving: Story = {
+	render: () => (
+		<SheetStage>
+			<SavingState />
+		</SheetStage>
+	),
+};
+
+/**
+ * The back-apply running after a standing filter is created — the pass that
+ * reaches the mail already in the mailbox, not only the mail that arrives next.
+ */
+export const BackApplyInFlight: Story = {
+	name: "Back-apply in flight",
+	render: () => (
+		<SheetStage>
+			<JobProgress
+				progress={{
+					state: "Running",
+					matchedCount: 24,
+					appliedCount: 0,
+					failedCount: 0,
+					errorMessage: "",
+				}}
+				isDone={false}
+				runningLabel="Organizing mail from these senders…"
+				onClose={() => undefined}
+			/>
+		</SheetStage>
+	),
+};
+
+/** The back-apply finished — the count moved is stated plainly. */
+export const BackApplyDone: Story = {
+	name: "Back-apply done",
+	render: () => (
+		<SheetStage>
+			<JobProgress
+				progress={{
+					state: "Complete",
+					matchedCount: 24,
+					appliedCount: 24,
+					failedCount: 0,
+					errorMessage: "",
+				}}
+				isDone
+				runningLabel="Organizing mail from these senders…"
+				onClose={() => undefined}
+			/>
+		</SheetStage>
+	),
+};
+
+/** The back-apply failed — the rule is still saved, the move is what did not run. */
+export const BackApplyFailed: Story = {
+	name: "Back-apply failed",
+	render: () => (
+		<SheetStage>
+			<JobProgress
+				progress={{
+					state: "Failed",
+					matchedCount: 24,
+					appliedCount: 6,
+					failedCount: 18,
+					errorMessage: "Could not reach the mail server. Please try again.",
+				}}
+				isDone
+				runningLabel="Organizing mail from these senders…"
+				onClose={() => undefined}
+			/>
+		</SheetStage>
+	),
+};
+
+/**
+ * The filter saved, but the back-apply's own request never got off the ground
+ * (a 5xx or dropped connection on start). The rule is live for new mail; moving
+ * the existing mail is what failed, and it is offered again — never swallowed
+ * behind a plain "saved".
+ */
+export const BackApplyStartFailed: Story = {
+	name: "Back-apply start failed",
+	render: () => (
+		<SheetStage>
+			<BackApplyError onRetry={() => undefined} onClose={() => undefined} />
+		</SheetStage>
+	),
+};
+
+/** The filter saved with nothing to back-apply — the plain confirmation. */
+export const FilterSavedState: Story = {
+	name: "Filter saved",
+	render: () => (
+		<SheetStage>
+			<FilterSaved onClose={() => undefined} />
+		</SheetStage>
+	),
+};
+
+/** The create failed — retry or dismiss. */
+export const CommitFailed: Story = {
+	name: "Commit failed",
+	render: () => (
+		<SheetStage>
+			<CommitError onRetry={() => undefined} onClose={() => undefined} />
+		</SheetStage>
+	),
+};

package/src/components/mail/organize/rule-editor-states.tsx

@@ -88,6 +88,33 @@ export function FilterSaved({ onClose }: { onClose: () => void }) {
 	);
 }
 
+export function BackApplyError({
+	onRetry,
+	onClose,
+}: {
+	onRetry: () => void;
+	onClose: () => void;
+}) {
+	return (
+		<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
+			<CheckCircle2 className="size-8 text-positive" />
+			<p className="text-sm font-medium text-fg">Rule saved</p>
+			<p className="max-w-xs text-xs text-fg-muted">
+				New mail follows it automatically. Moving the mail already in your
+				mailbox didn't run — try again?
+			</p>
+			<div className="mt-2 flex gap-2">
+				<Button variant="primary" onClick={onRetry}>
+					Move existing mail
+				</Button>
+				<Button variant="ghost" onClick={onClose}>
+					Not now
+				</Button>
+			</div>
+		</div>
+	);
+}
+
 export function CommitError({
 	onRetry,
 	onClose,

package/src/lib/organize/organize-model.ts

@@ -60,6 +60,17 @@ export interface OrganizeDraft {
 export const hasCommittableAction = (draft: OrganizeDraft): boolean =>
 	draft.moveMailboxId !== undefined && draft.moveMailboxId !== NO_ACTION;
 
+/**
+ * Whether the draft's predicate can be back-applied over the existing corpus. A
+ * `HasWords` clause matches the full message body, which only the live
+ * index-time filter and the vector widen evaluate — the vector-free back-apply
+ * projection carries no body and rejects it (`assertNoBodyContentClause`,
+ * organize.ts). A rule that carries one is still a valid standing filter for
+ * incoming mail, so the back-apply is skipped, not run into that guard.
+ */
+export const canBackApplyDraft = (draft: OrganizeDraft): boolean =>
+	!draft.literalClauses.some((clause) => clause.field === "HasWords");
+
 /**
  * Build the read-only preview / back-apply matcher input. The action fields do
  * not affect which messages match — the preview returns exactly the set a job