@remit/web-client 0.0.1

package/src/components/settings/DangerZone.tsx

@@ -0,0 +1,30 @@
+import { Button, DangerZoneSection } from "@remit/ui";
+import { useState } from "react";
+import { DeleteAccountDialog } from "./DeleteAccountDialog";
+
+export function DangerZone() {
+	const [dialogOpen, setDialogOpen] = useState(false);
+
+	return (
+		<section className="mt-8 border-t border-line pt-6">
+			<DangerZoneSection
+				title="Delete your Remit account"
+				description="Disconnects every account and erases Remit's copy of your mail, insights and preferences. Your mail at the providers is untouched."
+				action={
+					<Button
+						variant="danger"
+						size="sm"
+						onClick={() => setDialogOpen(true)}
+					>
+						Delete your Remit account
+					</Button>
+				}
+			/>
+
+			<DeleteAccountDialog
+				open={dialogOpen}
+				onClose={() => setDialogOpen(false)}
+			/>
+		</section>
+	);
+}

package/src/components/settings/DeleteAccountDialog.render.test.ts

@@ -0,0 +1,47 @@
+/**
+ * React-render smoke test for `DeleteAccountDialog`.
+ *
+ * `DangerZone` mounts this dialog unconditionally on the settings/accounts
+ * route. The previous version called `useAuthenticator` at the top of render,
+ * which throws `USE_AUTHENTICATOR_ERROR` when no `Authenticator.Provider` is
+ * in scope. In local-dev / e2e / the visual harness (`isCognitoConfigured()`
+ * === false) `AuthShell` mounts NO provider, so the whole settings/accounts
+ * route crashed into the fatal-error escalate page (#745 surfaced this, #741).
+ *
+ * The fix gates the hook-using inner component behind `isCognitoConfigured()`.
+ * This test pins that: rendering the dialog without a provider must not throw.
+ *
+ * Uses `react-dom/server`'s `renderToString` so the assertion runs without
+ * pulling in jsdom/happy-dom (no new deps).
+ */
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { DeleteAccountDialog } from "./DeleteAccountDialog";
+
+const renderDialog = (open: boolean): string =>
+	renderToString(
+		createElement(
+			QueryClientProvider,
+			{ client: new QueryClient() },
+			createElement(DeleteAccountDialog, {
+				open,
+				onClose: () => undefined,
+			}),
+		) as never,
+	);
+
+describe("DeleteAccountDialog renders without an Authenticator.Provider in scope (#741)", () => {
+	it("mounts WITHOUT calling `useAuthenticator` outside `Authenticator.Provider` — the hook would throw and crash the settings/accounts route into the fatal-error escalate page", () => {
+		// Default test env: `isCognitoConfigured()` returns false — same shape as
+		// `AuthShell` running without the provider. The dialog's hooks
+		// (`useAuthenticator`, `useState`, `useMutation`) all run on mount,
+		// before the `open` gate, so rendering it closed still exercises the
+		// gated path. Pre-fix, `useAuthenticator` ran unconditionally here and
+		// `renderToString` threw `USE_AUTHENTICATOR_ERROR`.
+		assert.doesNotThrow(() => renderDialog(false));
+	});
+});

package/src/components/settings/DeleteAccountDialog.tsx

@@ -0,0 +1,224 @@
+import {
+	meOperationsCreateExportMutation,
+	meOperationsDeleteMeMutation,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { Button, Dialog, Input } from "@remit/ui";
+import { useMutation } from "@tanstack/react-query";
+import { AlertTriangle, Download, X } from "lucide-react";
+import { useState } from "react";
+import { useAuthProvider } from "@/auth/provider";
+
+interface DeleteAccountDialogProps {
+	open: boolean;
+	onClose: () => void;
+}
+
+interface DeleteAccountDialogViewProps extends DeleteAccountDialogProps {
+	accountEmail: string;
+	signOut: () => void | Promise<void>;
+}
+
+function DeleteAccountDialogView({
+	open,
+	onClose,
+	accountEmail,
+	signOut,
+}: DeleteAccountDialogViewProps) {
+	const [confirmEmail, setConfirmEmail] = useState("");
+	const [mismatch, setMismatch] = useState(false);
+	const [deleted, setDeleted] = useState(false);
+
+	const mutation = useMutation({
+		...meOperationsDeleteMeMutation(),
+		onSuccess: () => {
+			setDeleted(true);
+			setTimeout(() => signOut(), 2000);
+		},
+	});
+
+	const exportMutation = useMutation(meOperationsCreateExportMutation());
+
+	const handleClose = () => {
+		if (mutation.isPending) return;
+		setConfirmEmail("");
+		setMismatch(false);
+		setDeleted(false);
+		mutation.reset();
+		exportMutation.reset();
+		onClose();
+	};
+
+	const handleDelete = () => {
+		if (confirmEmail.trim().toLowerCase() !== accountEmail.toLowerCase()) {
+			setMismatch(true);
+			return;
+		}
+		setMismatch(false);
+		mutation.mutate({ body: { confirmEmail: confirmEmail.trim() } });
+	};
+
+	return (
+		<Dialog open={open} onClose={handleClose} title="Delete your Remit account">
+			<header className="flex items-center gap-2 border-b border-line px-5 py-3">
+				<AlertTriangle className="size-4 shrink-0 text-danger" />
+				<span className="flex-1 text-sm font-semibold text-fg">
+					Delete your Remit account
+				</span>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<X className="size-3.5" />}
+					onClick={handleClose}
+					aria-label="Cancel"
+				/>
+			</header>
+
+			{deleted ? (
+				<div className="px-5 py-6 text-sm text-fg-muted">
+					<p className="font-medium text-fg">Account deletion scheduled.</p>
+					<p className="mt-1">
+						Your data will be erased shortly. Signing you out…
+					</p>
+				</div>
+			) : (
+				<>
+					<div className="space-y-4 px-5 py-4 text-sm text-fg-muted">
+						<p>This permanently erases everything Remit holds for you:</p>
+						<ul className="space-y-1.5 text-xs">
+							<li className="flex gap-2">
+								<span className="text-danger">•</span>
+								All connected accounts disconnected and access tokens revoked.
+							</li>
+							<li className="flex gap-2">
+								<span className="text-danger">•</span>
+								Synced mail cache and search index.
+							</li>
+							<li className="flex gap-2">
+								<span className="text-danger">•</span>
+								AI history and insights.
+							</li>
+							<li className="flex gap-2">
+								<span className="text-danger">•</span>
+								Preferences and rules.
+							</li>
+						</ul>
+
+						<div className="rounded-sm border border-line bg-surface-sunken px-3 py-2 text-xs">
+							<strong className="text-fg">
+								Your mail at Gmail / IMAP is not deleted.
+							</strong>{" "}
+							This only removes Remit's copy and its access — the mail stays in
+							your provider mailboxes.
+						</div>
+
+						<div className="text-xs">
+							<button
+								type="button"
+								onClick={() => exportMutation.mutate({})}
+								aria-busy={exportMutation.isPending}
+								className="inline-flex items-center gap-1.5 font-medium text-accent hover:underline"
+							>
+								<Download className="size-3.5" />
+								{exportMutation.isPending
+									? "Requesting export…"
+									: "Export my data first"}
+							</button>
+							{exportMutation.isSuccess && (
+								// biome-ignore lint/a11y/useSemanticElements: <p> with role="status" preserves block layout; <output> is inline
+								<p className="mt-1.5 text-fg-muted" role="status">
+									Export requested. We'll prepare a ZIP of your mail — find it
+									under your data exports when it's ready.
+								</p>
+							)}
+							{exportMutation.isError && (
+								<p className="mt-1.5 text-danger" role="alert">
+									Couldn't start the export. Please try again.
+								</p>
+							)}
+						</div>
+
+						<div>
+							<label
+								htmlFor="confirm-remit-email"
+								className="mb-1 block text-xs font-medium text-fg"
+							>
+								Type{" "}
+								<span className="font-mono text-fg-muted">{accountEmail}</span>{" "}
+								to confirm
+							</label>
+							<Input
+								id="confirm-remit-email"
+								type="email"
+								placeholder={accountEmail}
+								value={confirmEmail}
+								onChange={(e) => {
+									setConfirmEmail(e.target.value);
+									if (mismatch) setMismatch(false);
+									if (mutation.isError) mutation.reset();
+								}}
+								autoComplete="off"
+							/>
+							{mismatch && (
+								<p className="mt-1.5 text-xs text-danger" role="alert">
+									That doesn't match your account email. Type it exactly to
+									confirm.
+								</p>
+							)}
+							{mutation.isError && (
+								<p className="mt-1.5 text-xs text-danger" role="alert">
+									{mutation.error instanceof Error
+										? mutation.error.message
+										: "Something went wrong. Please try again."}
+								</p>
+							)}
+						</div>
+					</div>
+
+					<footer className="flex items-center justify-end gap-2 border-t border-line px-5 py-3">
+						<Button variant="secondary" size="sm" onClick={handleClose}>
+							Cancel
+						</Button>
+						<Button
+							variant="danger"
+							size="sm"
+							onClick={handleDelete}
+							aria-busy={mutation.isPending}
+						>
+							{mutation.isPending ? "Deleting…" : "Delete everything"}
+						</Button>
+					</footer>
+				</>
+			)}
+		</Dialog>
+	);
+}
+
+/**
+ * Delete-account dialog. Safe to mount anywhere — `DangerZone` renders it
+ * unconditionally on the settings/accounts route. Identity comes from the
+ * composed auth provider's `Account` render-prop; when no session is active
+ * (e2e / visual harness / signed out) it falls back to the view with an empty
+ * identity and a no-op `signOut`.
+ */
+export function DeleteAccountDialog(props: DeleteAccountDialogProps) {
+	const { Account } = useAuthProvider();
+	return (
+		<Account
+			fallback={
+				<DeleteAccountDialogView
+					{...props}
+					accountEmail=""
+					signOut={() => {}}
+				/>
+			}
+		>
+			{({ email, signOut }) => (
+				<DeleteAccountDialogView
+					{...props}
+					accountEmail={email ?? ""}
+					signOut={signOut}
+				/>
+			)}
+		</Account>
+	);
+}

package/src/components/settings/FiltersList.render.test.ts

@@ -0,0 +1,71 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
+import React, { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { FiltersList } from "./FiltersList";
+
+// The node test loader transpiles remit-ui's `.tsx` with the classic JSX
+// runtime, which references a global `React`. Vite uses the automatic runtime,
+// so this shim only exists for the SSR test harness.
+(globalThis as { React?: typeof React }).React = React;
+
+const NOW = Date.parse("2026-07-12T12:00:00Z");
+
+const filter = (
+	overrides: Partial<RemitImapFilterResponse>,
+): RemitImapFilterResponse => ({
+	filterId: "f-1",
+	accountConfigId: "acc-1",
+	name: "Travel",
+	scope: "Standing",
+	state: "Active",
+	hasAnchor: true,
+	ruleChangedAt: 0,
+	matchOperator: "And",
+	literalClauses: [],
+	actionLabelId: "None",
+	actionMailboxId: "mbx-travel",
+	createdAt: 0,
+	updatedAt: 0,
+	...overrides,
+});
+
+const render = (filters: RemitImapFilterResponse[]) =>
+	renderToString(
+		createElement(FiltersList, {
+			filters,
+			mailboxName: (id: string) => (id === "mbx-travel" ? "Travel" : undefined),
+			onDelete: () => undefined,
+			now: NOW,
+		}) as never,
+	);
+
+describe("FiltersList", () => {
+	it("renders the empty state with a pointer to Organize", () => {
+		const html = render([]);
+		assert.match(html, /No filters yet/);
+	});
+
+	it("marks a standing filter Active and shows its move target", () => {
+		const html = render([filter({})]);
+		assert.match(html, /Active/);
+		assert.match(html, /Moves matches to Travel/);
+		assert.match(html, /always/);
+	});
+
+	it("keeps an expired temporary filter visible and marks it Expired (RFC 034 Decision 1.2)", () => {
+		const html = render([
+			filter({
+				filterId: "f-2",
+				name: "Lisbon trip",
+				scope: "Temporary",
+				state: "Active",
+				expiresAt: "2026-07-10T00:00:00Z",
+			}),
+		]);
+		assert.match(html, /Lisbon trip/);
+		assert.match(html, /Expired/);
+		assert.match(html, /expired/);
+	});
+});

package/src/components/settings/FiltersList.tsx

@@ -0,0 +1,93 @@
+import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
+import { Badge, Button } from "@remit/ui";
+import { Trash2 } from "lucide-react";
+import {
+	filterDisplayStatus,
+	formatExpiresAt,
+} from "@/lib/organize/filter-status";
+import { NO_ACTION } from "@/lib/organize/organize-model";
+
+interface FiltersListProps {
+	filters: RemitImapFilterResponse[];
+	/** Resolve a destination mailbox id to a folder name for display. */
+	mailboxName: (mailboxId: string) => string | undefined;
+	onDelete: (filterId: string) => void;
+	deletingFilterId?: string;
+	/** Injected for deterministic status in tests; defaults to now. */
+	now?: number;
+}
+
+/**
+ * The account's standing filters. Expired temporary filters stay listed and
+ * are marked Expired distinctly rather than hidden (RFC 034 Decision 1.2).
+ */
+export function FiltersList({
+	filters,
+	mailboxName,
+	onDelete,
+	deletingFilterId,
+	now = Date.now(),
+}: FiltersListProps) {
+	if (filters.length === 0) {
+		return (
+			<p className="py-6 text-sm text-fg-muted">
+				No filters yet. Select a few messages in the inbox and choose Organize
+				to make one.
+			</p>
+		);
+	}
+
+	return (
+		<ul className="divide-y divide-line rounded-md border border-line">
+			{filters.map((filter) => {
+				const status = filterDisplayStatus(filter, now);
+				const expired = status === "Expired";
+				const folder =
+					filter.actionMailboxId !== NO_ACTION
+						? mailboxName(filter.actionMailboxId)
+						: undefined;
+				const expiresLabel = formatExpiresAt(filter.expiresAt);
+
+				return (
+					<li
+						key={filter.filterId}
+						className="flex items-start gap-3 px-3 py-2.5"
+					>
+						<div className="min-w-0 flex-1">
+							<div className="flex items-center gap-2">
+								<span
+									className={`truncate text-sm font-medium ${
+										expired ? "text-fg-muted" : "text-fg"
+									}`}
+								>
+									{filter.name}
+								</span>
+								<Badge tone={expired ? "neutral" : "positive"} dot>
+									{status}
+								</Badge>
+							</div>
+							<p className="mt-0.5 text-xs text-fg-subtle">
+								{folder ? `Moves matches to ${folder}` : "No move action"}
+								{filter.scope === "Temporary" && expiresLabel
+									? expired
+										? ` · expired ${expiresLabel}`
+										: ` · until ${expiresLabel}`
+									: filter.scope === "Standing"
+										? " · always"
+										: ""}
+							</p>
+						</div>
+						<Button
+							variant="ghost"
+							size="sm"
+							icon={<Trash2 className="size-4 text-danger" />}
+							onClick={() => onDelete(filter.filterId)}
+							disabled={deletingFilterId === filter.filterId}
+							aria-label={`Delete filter ${filter.name}`}
+						/>
+					</li>
+				);
+			})}
+		</ul>
+	);
+}

package/src/components/settings/account-form-helpers.test.ts

@@ -0,0 +1,172 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import {
+	accountIsMissingSmtp,
+	appendAppPasswordHint,
+	computeSmtpAutoFill,
+	deriveSmtpHostFromImap,
+	isAuthError,
+} from "./account-form-helpers.js";
+
+describe("deriveSmtpHostFromImap", () => {
+	test("rewrites imap.* to smtp.*", () => {
+		assert.equal(
+			deriveSmtpHostFromImap("imap.example.com"),
+			"smtp.example.com",
+		);
+	});
+
+	test("matches the imap. prefix case-insensitively", () => {
+		assert.equal(
+			deriveSmtpHostFromImap("IMAP.example.com"),
+			"smtp.example.com",
+		);
+	});
+
+	test("returns the host unchanged when no imap. prefix is present", () => {
+		assert.equal(
+			deriveSmtpHostFromImap("mail.example.com"),
+			"mail.example.com",
+		);
+	});
+
+	test("only rewrites the prefix, not other occurrences of imap", () => {
+		assert.equal(
+			deriveSmtpHostFromImap("imap.imap-server.example.com"),
+			"smtp.imap-server.example.com",
+		);
+	});
+});
+
+describe("computeSmtpAutoFill", () => {
+	test("fills SMTP fields when SMTP host is empty and IMAP host is set", () => {
+		const result = computeSmtpAutoFill({
+			imapHost: "imap.example.com",
+			smtpHost: "",
+		});
+		assert.deepEqual(result, {
+			smtpHost: "smtp.example.com",
+			smtpPort: 587,
+			smtpTls: false,
+			smtpStartTls: true,
+		});
+	});
+
+	test("fills SMTP fields when SMTP host is undefined and IMAP host is set", () => {
+		const result = computeSmtpAutoFill({
+			imapHost: "imap.example.com",
+		});
+		assert.deepEqual(result, {
+			smtpHost: "smtp.example.com",
+			smtpPort: 587,
+			smtpTls: false,
+			smtpStartTls: true,
+		});
+	});
+
+	test("fills SMTP fields when SMTP host is whitespace", () => {
+		const result = computeSmtpAutoFill({
+			imapHost: "imap.example.com",
+			smtpHost: "   ",
+		});
+		assert.notEqual(result, null);
+		assert.equal(result?.smtpHost, "smtp.example.com");
+	});
+
+	test("returns null when SMTP host is already set — never overrides user input", () => {
+		const result = computeSmtpAutoFill({
+			imapHost: "imap.example.com",
+			smtpHost: "smtp.different.com",
+			smtpPort: 465,
+			smtpTls: true,
+			smtpStartTls: false,
+		});
+		assert.equal(result, null);
+	});
+
+	test("returns null when both IMAP host and SMTP host are empty", () => {
+		const result = computeSmtpAutoFill({
+			imapHost: "",
+			smtpHost: "",
+		});
+		assert.equal(result, null);
+	});
+
+	test("returns null when IMAP host is whitespace", () => {
+		const result = computeSmtpAutoFill({
+			imapHost: "   ",
+			smtpHost: "",
+		});
+		assert.equal(result, null);
+	});
+
+	test("trims IMAP host before deriving SMTP host", () => {
+		const result = computeSmtpAutoFill({
+			imapHost: "  imap.example.com  ",
+			smtpHost: "",
+		});
+		assert.equal(result?.smtpHost, "smtp.example.com");
+	});
+});
+
+describe("accountIsMissingSmtp", () => {
+	test("true when smtpEnabled is undefined (legacy row)", () => {
+		assert.equal(accountIsMissingSmtp({}), true);
+	});
+
+	test("true when smtpEnabled is false", () => {
+		assert.equal(accountIsMissingSmtp({ smtpEnabled: false }), true);
+	});
+
+	test("false when smtpEnabled is true", () => {
+		assert.equal(accountIsMissingSmtp({ smtpEnabled: true }), false);
+	});
+});
+
+describe("isAuthError", () => {
+	for (const msg of [
+		"AUTHENTICATIONFAILED",
+		"535 5.7.8 Bad credentials",
+		"Invalid login",
+		"bad credential",
+	]) {
+		test(`true for "${msg}"`, () => {
+			assert.equal(isAuthError(msg), true);
+		});
+	}
+
+	test("false for a network error", () => {
+		assert.equal(isAuthError("connect ETIMEDOUT 1.2.3.4:993"), false);
+	});
+
+	test("false for undefined", () => {
+		assert.equal(isAuthError(undefined), false);
+	});
+});
+
+describe("appendAppPasswordHint", () => {
+	const hint = "iCloud requires an app-specific password.";
+
+	test("appends the hint to an auth error", () => {
+		const result = appendAppPasswordHint("Invalid login", hint);
+		assert.equal(result, `Invalid login — ${hint}`);
+	});
+
+	test("leaves a non-auth error untouched", () => {
+		assert.equal(
+			appendAppPasswordHint("connect ETIMEDOUT", hint),
+			"connect ETIMEDOUT",
+		);
+	});
+
+	test("returns the message unchanged when there is no hint", () => {
+		assert.equal(
+			appendAppPasswordHint("Invalid login", undefined),
+			"Invalid login",
+		);
+	});
+
+	test("returns undefined when there is no message", () => {
+		assert.equal(appendAppPasswordHint(undefined, hint), undefined);
+	});
+});