@remit/web-client 0.0.93 → 0.0.95

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

@@ -1,260 +0,0 @@
-/**
- * The filter-from-search chip editor (RFC 038 D5) over the live preview/apply
- * endpoints. The contract these tests pin: the converted clauses open pre-filled,
- * the conversion states honestly what the search carried that the filter cannot,
- * and the count on screen is the literal set a commit acts on — the commit is
- * blocked until the count settles and carries exactly the previewed predicate.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import { mailboxOperationsListMailboxesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { createElement } from "react";
-import { convertSearchToRule } from "@/lib/organize/search-to-rule";
-import {
-	parseSearchTokens,
-	type SearchTokenContext,
-} from "@/lib/search-tokens";
-import { createDomHarness, type DomHarness } from "../../../test-support/dom";
-import { makeMailbox } from "../../../test-support/fixtures";
-import {
-	type HttpCall,
-	type HttpMock,
-	mockFetch,
-} from "../../../test-support/http";
-import { SearchFilterEditor } from "./SearchFilterEditor";
-
-let harness: DomHarness | undefined;
-let http: HttpMock | undefined;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-	http?.restore();
-	http = undefined;
-});
-
-const ACCOUNT_ID = "acc-1";
-
-const MAILBOXES = [
-	makeMailbox({ mailboxId: "mbx-inbox", fullPath: "INBOX" }),
-	makeMailbox({ mailboxId: "mbx-archive", fullPath: "Archive" }),
-];
-
-const CONTEXT: SearchTokenContext = {
-	mailboxesByName: new Map([["archive", "mbx-archive"]]),
-	accountsByName: new Map(),
-};
-
-const conversion = (query: string, searchHadSemanticReach = false) =>
-	convertSearchToRule(parseSearchTokens(query, CONTEXT), {
-		searchHadSemanticReach,
-	});
-
-type Responder = (call: HttpCall) => unknown;
-
-const previewCounts = (counts: number[]): Responder => {
-	let index = 0;
-	return (call) => {
-		if (call.path.endsWith("/organize/preview")) {
-			const count = counts[Math.min(index, counts.length - 1)];
-			index += 1;
-			return { matchedCount: count, messageIds: [] };
-		}
-		if (call.path.endsWith("/filters")) {
-			return { filterId: "filter-1", name: "R", scope: "Standing" };
-		}
-		if (call.path.endsWith("/organize") && call.method === "POST") {
-			return { organizeJobId: "job-1", state: "Running" };
-		}
-		if (call.path.endsWith("/organize/job-1")) {
-			return {
-				organizeJobId: "job-1",
-				state: "Complete",
-				matchedCount: 3,
-				appliedCount: 3,
-				failedCount: 0,
-			};
-		}
-		return {};
-	};
-};
-
-const mount = (
-	query: string,
-	responder: Responder = previewCounts([12]),
-	searchHadSemanticReach = false,
-): DomHarness => {
-	http = mockFetch(responder);
-	harness = createDomHarness();
-	harness.queryClient.setQueryData(
-		mailboxOperationsListMailboxesQueryKey({ path: { accountId: ACCOUNT_ID } }),
-		{ items: MAILBOXES },
-	);
-	harness.renderApp(
-		createElement(SearchFilterEditor, {
-			accountId: ACCOUNT_ID,
-			conversion: conversion(query, searchHadSemanticReach),
-			seedCount: 12,
-			onClose: () => undefined,
-		}),
-	);
-	return harness;
-};
-
-async function settlePreview(dom: DomHarness): Promise<void> {
-	await dom.flush();
-	await dom.wait(400);
-	await dom.flush();
-	await dom.flush();
-}
-
-const primaryButton = (dom: DomHarness, label: string): HTMLButtonElement =>
-	dom.byText("button", label) as HTMLButtonElement;
-
-describe("SearchFilterEditor — pre-filled conversion", () => {
-	it("opens on the converted clauses", () => {
-		const dom = mount("from:alerts@github.com pull request");
-		assert.match(dom.text(), /alerts@github\.com/);
-		assert.match(dom.text(), /pull request/);
-	});
-
-	it("seeds the live count from the converted predicate", () => {
-		const dom = mount("from:receipts@stripe.com");
-		assert.match(dom.text(), /12 messages match/);
-	});
-
-	it("never asks the matcher to count a body-text rule it cannot evaluate", async () => {
-		// A free-text search converts to a `HasWords` clause and carries no anchor,
-		// so the vector-free matcher rejects it outright (organize.ts
-		// `assertNoBodyContentClause`). The count is unavailable and says so; the
-		// request is never sent.
-		const dom = mount("receipts");
-		await settlePreview(dom);
-		assert.match(dom.text(), /can't count matches/i);
-		assert.equal((http?.to("/organize/preview") ?? []).length, 0);
-	});
-
-	it("does not offer the semantic widen on a search-derived rule", () => {
-		const dom = mount("receipts");
-		assert.doesNotMatch(dom.text(), /and similar/i);
-	});
-});
-
-describe("SearchFilterEditor — conversion honesty (RFC 038 D5)", () => {
-	it("states a folder-scoped search is kept out of the filter", () => {
-		const dom = mount("in:archive receipts");
-		assert.match(dom.text(), /limited to archive/i);
-		assert.match(dom.text(), /any folder/i);
-	});
-
-	it("names the dropped attribute facets", () => {
-		const dom = mount("invoice has:attachment is:unread");
-		assert.match(dom.text(), /Has attachment/);
-		assert.match(dom.text(), /Unread/);
-		assert.match(dom.text(), /left out/);
-	});
-
-	it("states the dropped semantic reach when the search surfaced similar mail", () => {
-		const dom = mount("things like this", previewCounts([12]), true);
-		assert.match(dom.text(), /matches these words literally/i);
-		assert.match(dom.text(), /similar mail/i);
-		// The widen chip is never offered on a search-derived rule.
-		assert.doesNotMatch(dom.text(), /and anything similar/i);
-	});
-
-	it("says nothing about semantics when the search had no similar mail", () => {
-		const dom = mount("things like this", previewCounts([12]), false);
-		assert.doesNotMatch(dom.text(), /similar mail/i);
-	});
-});
-
-describe("SearchFilterEditor — commit gate", () => {
-	it("blocks the save until a folder and name are set, then commits the previewed predicate", async () => {
-		const dom = mount("from:alerts@github.com receipts");
-
-		// Standing is the default scope: it needs a folder and a name.
-		assert.equal(primaryButton(dom, "Save rule").disabled, true);
-		dom.select(dom.byLabel("Destination folder"), "mbx-archive");
-		await dom.flush();
-		dom.type(dom.byLabel("Rule name"), "GitHub receipts");
-		await dom.flush();
-		assert.equal(primaryButton(dom, "Save rule").disabled, false);
-
-		dom.click(primaryButton(dom, "Save rule"));
-		await dom.flush();
-
-		const filters = http?.to("/filters") ?? [];
-		assert.equal(filters.length, 1);
-		assert.equal(filters[0].body?.scope, "Standing");
-		assert.deepEqual(filters[0].body?.literalClauses, [
-			{ field: "From", value: "alerts@github.com" },
-			{ field: "HasWords", value: "receipts" },
-		]);
-		assert.match(dom.text(), /Filter saved/);
-	});
-
-	it("stales the count on an edit and holds the save until it settles", async () => {
-		// The seed count (12) is passed directly; the first network preview is the
-		// re-count after the edit, so it returns 40.
-		const dom = mount("from:receipts@stripe.com", previewCounts([40]));
-		dom.select(dom.byLabel("Destination folder"), "mbx-archive");
-		await dom.flush();
-		dom.type(dom.byLabel("Rule name"), "Receipts");
-		await dom.flush();
-
-		dom.click(primaryButton(dom, "Add clause"));
-		dom.select(dom.byLabel("Clause field"), "Subject");
-		dom.type(dom.byLabel("Clause value"), "paid");
-		dom.click(primaryButton(dom, "Add"));
-		await dom.flush();
-
-		// The count is stale and the save is blocked until the re-preview lands.
-		assert.match(dom.text(), /recounting/i);
-		assert.equal(primaryButton(dom, "Save rule").disabled, true);
-
-		await settlePreview(dom);
-		assert.match(dom.text(), /40 messages match/);
-		assert.equal(primaryButton(dom, "Save rule").disabled, false);
-	});
-
-	it("runs a one-time apply as a back-apply job when the scope is 'just once'", async () => {
-		const dom = mount("from:receipts@stripe.com");
-		dom.select(dom.byLabel("Destination folder"), "mbx-archive");
-		await dom.flush();
-		const radio = dom.query('input[name="rule-scope"][value="once"]');
-		if (!radio) throw new Error("no once scope option");
-		dom.click(radio);
-		await dom.flush();
-
-		dom.click(primaryButton(dom, "Apply now"));
-		await dom.flush();
-		const jobs = (http?.to("/organize") ?? []).filter(
-			(call) => call.method === "POST",
-		);
-		assert.equal(jobs.length, 1);
-	});
-
-	it("holds the one-time apply for a body-text rule, offering the saved rule instead", async () => {
-		// The one-time apply runs the same vector-free matcher the count does. A
-		// `HasWords` clause has no reader there, so the apply is held with the
-		// reason stated — saved as a standing rule the same clause works, because
-		// the index-time matcher reads the whole body.
-		const dom = mount("receipts");
-		dom.select(dom.byLabel("Destination folder"), "mbx-archive");
-		await dom.flush();
-		const radio = dom.query('input[name="rule-scope"][value="once"]');
-		if (!radio) throw new Error("no once scope option");
-		dom.click(radio);
-		await dom.flush();
-
-		assert.equal(primaryButton(dom, "Apply now").disabled, true);
-		assert.match(dom.text(), /can't read message bodies/i);
-		assert.equal(
-			(http?.calls ?? []).filter(
-				(call) => call.path.endsWith("/organize") && call.method === "POST",
-			).length,
-			0,
-		);
-	});
-});

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

@@ -1,140 +0,0 @@
-import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import {
-	buildSearchRule,
-	type FilterRule,
-	FilterRuleEditor,
-	type FolderOption,
-	type SearchConversion,
-	SearchConversionNoticeView,
-} from "@remit/ui";
-import { useQuery } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
-import { useCreateFilter } from "@/hooks/useFilters";
-import { useOrganizeJob } from "@/hooks/useOrganizeJob";
-import { useRuleEditorState } from "@/hooks/useRuleEditorState";
-import { useRulePreview } from "@/hooks/useRulePreview";
-import { getMailboxDisplayName } from "@/lib/folder-roles";
-import { buildMoveTargets } from "@/lib/move-targets";
-import {
-	rulePredicate,
-	ruleToDraft,
-	SUPPORTED_CLAUSE_FIELDS,
-} from "@/lib/organize/rule-model";
-import {
-	CommitError,
-	FilterSaved,
-	JobProgress,
-	SavingState,
-} from "./rule-editor-states";
-
-interface SearchFilterEditorProps {
-	/** The account the filter is created for (an `account:` facet, else the active account). */
-	accountId: string;
-	/** The converted search — its clauses seed the rule, its drops seed the notice. */
-	conversion: SearchConversion;
-	/**
-	 * The converted literal predicate's live count, seeding the editor without a
-	 * re-fetch. Absent when the predicate is one the vector-free matcher refuses —
-	 * a `HasWords` clause from the search's free text — in which case the count
-	 * region says so and the one-time apply is held; saving it as a standing rule
-	 * still works, since the index-time matcher does read message bodies.
-	 */
-	seedCount?: number;
-	onClose: () => void;
-}
-
-/**
- * The filter-from-search surface as the chip editor (RFC 038 D5). The current
- * search's literal terms and facets arrive already converted to clauses; this
- * opens the shared rule editor pre-filled on them, over the same preview/apply
- * endpoints as Organize. The conversion notice states what the search carried
- * that the filter cannot — a folder scope, non-clause facets, semantic reach.
- *
- * A search-derived rule has no message anchor, so the semantic widen chip is not
- * offered here (its loss, where the deployment could have served it, is the
- * notice's job). The commit gate is the same: the count on screen is the literal
- * set a commit acts on.
- */
-export function SearchFilterEditor({
-	accountId,
-	conversion,
-	seedCount,
-	onClose,
-}: SearchFilterEditorProps) {
-	const [initialRule] = useState<FilterRule>(() => buildSearchRule(conversion));
-	const { rule, handlers } = useRuleEditorState({ initialRule });
-
-	const { data: mailboxesData } = useQuery({
-		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
-		staleTime: Number.POSITIVE_INFINITY,
-	});
-
-	const folders: FolderOption[] = useMemo(
-		() =>
-			buildMoveTargets(mailboxesData?.items ?? []).map((mailbox) => ({
-				id: mailbox.mailboxId,
-				label: getMailboxDisplayName(mailbox.fullPath),
-			})),
-		[mailboxesData?.items],
-	);
-
-	const { count: preview } = useRulePreview(
-		accountId,
-		rulePredicate(rule),
-		seedCount,
-	);
-
-	const organizeJob = useOrganizeJob(accountId);
-	const createFilter = useCreateFilter(accountId);
-
-	const commit = () => {
-		const draft = ruleToDraft(rule);
-		if (rule.scope === "once") {
-			organizeJob.start(draft);
-			return;
-		}
-		createFilter.createFilter(
-			draft,
-			rule.scope === "standing" ? "standing" : "temporary",
-			(rule.name ?? "").trim(),
-		);
-	};
-
-	if (organizeJob.isStarting || organizeJob.isRunning || organizeJob.isDone) {
-		return (
-			<JobProgress
-				progress={organizeJob.progress}
-				isDone={organizeJob.isDone}
-				runningLabel="Organizing your mail…"
-				onClose={onClose}
-			/>
-		);
-	}
-
-	if (createFilter.isPending) return <SavingState />;
-	if (createFilter.isSuccess) return <FilterSaved onClose={onClose} />;
-	if (createFilter.isError)
-		return <CommitError onRetry={createFilter.reset} onClose={onClose} />;
-
-	return (
-		<FilterRuleEditor
-			rule={rule}
-			folders={folders}
-			preview={preview}
-			notice={
-				<SearchConversionNoticeView
-					notice={{
-						scopedOutFolder: conversion.scopedOut?.label,
-						droppedFacets: conversion.droppedFacets.map((facet) => facet.label),
-						droppedSemantic: conversion.droppedSemantic,
-					}}
-				/>
-			}
-			semanticAvailable={false}
-			clauseFields={SUPPORTED_CLAUSE_FIELDS}
-			{...handlers}
-			onCommit={commit}
-			onCancel={onClose}
-		/>
-	);
-}

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

@@ -1,147 +0,0 @@
-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

@@ -1,139 +0,0 @@
-import { Button } from "@remit/ui";
-import { CheckCircle2, Loader2 } from "lucide-react";
-import type { useOrganizeJob } from "@/hooks/useOrganizeJob";
-
-/**
- * The non-editing states a filter-rule editor lands in after commit, shared by
- * the Organize and filter-from-search surfaces so a back-apply job, a saved
- * standing rule, and a commit failure read identically wherever the rule was
- * authored (RFC 038 D1).
- */
-
-export function JobProgress({
-	progress,
-	isDone,
-	runningLabel,
-	onClose,
-}: {
-	progress: ReturnType<typeof useOrganizeJob>["progress"];
-	isDone: boolean;
-	/** In-flight copy — the caller names what it is organizing. */
-	runningLabel: string;
-	onClose: () => void;
-}) {
-	const failed = progress.state === "Failed";
-	return (
-		<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
-			{!isDone ? (
-				<Loader2 className="size-8 animate-spin text-accent-2" />
-			) : failed ? (
-				<span className="text-sm font-semibold text-danger">
-					Organize failed
-				</span>
-			) : (
-				<CheckCircle2 className="size-8 text-positive" />
-			)}
-
-			{!isDone && <p className="text-sm font-medium text-fg">{runningLabel}</p>}
-
-			{isDone && !failed && (
-				<div className="text-sm text-fg">
-					<p className="font-medium">Done</p>
-					<p className="mt-1 text-xs text-fg-muted">
-						{progress.appliedCount} of {progress.matchedCount} moved
-						{progress.failedCount > 0
-							? ` · ${progress.failedCount} failed`
-							: ""}
-						.
-					</p>
-				</div>
-			)}
-
-			{isDone && failed && (
-				<p className="max-w-xs text-xs text-fg-muted">
-					{progress.errorMessage || "Something went wrong. Please try again."}
-				</p>
-			)}
-
-			{isDone && (
-				<Button variant="primary" onClick={onClose} className="mt-2">
-					Done
-				</Button>
-			)}
-		</div>
-	);
-}
-
-export function SavingState() {
-	return (
-		<div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
-			<Loader2 className="size-8 animate-spin text-accent-2" />
-			<p className="text-sm font-medium text-fg">Saving rule…</p>
-		</div>
-	);
-}
-
-export function FilterSaved({ onClose }: { 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">Filter saved</p>
-			<p className="max-w-xs text-xs text-fg-muted">
-				You can see it, and when it expires, under Settings › Filters.
-			</p>
-			<Button variant="primary" onClick={onClose} className="mt-2">
-				Done
-			</Button>
-		</div>
-	);
-}
-
-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,
-}: {
-	onRetry: () => void;
-	onClose: () => void;
-}) {
-	return (
-		<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
-			<p className="text-sm font-medium text-danger">Couldn't save the rule</p>
-			<p className="max-w-xs text-xs text-fg-muted">Please try again.</p>
-			<div className="mt-2 flex gap-2">
-				<Button variant="primary" onClick={onRetry}>
-					Try again
-				</Button>
-				<Button variant="ghost" onClick={onClose}>
-					Not now
-				</Button>
-			</div>
-		</div>
-	);
-}