@remit/web-client 0.0.120 → 0.0.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.120",
+  "version": "0.0.122",
   "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/compose/ComposeForm.tsx

@@ -405,7 +405,7 @@ export const ComposeForm = ({
 		sourceMessage?.envelope.from[0]?.displayName ??
 		sourceMessage?.envelope.from[0]?.normalizedEmail;
 
-	const { saveStatus, saveError, saveDraft, cancelAutoSave } = useSaveDraft({
+	const { saveStatus, saveError, saveDraft, stopAutoSave } = useSaveDraft({
 		outboxMessageId,
 		onDraftCreated: setOutboxMessageId,
 	});
@@ -504,7 +504,7 @@ export const ComposeForm = ({
 	const handleSend = useCallback(async () => {
 		if (!selectedAccountId || toAddresses.length === 0) return;
 
-		cancelAutoSave();
+		stopAutoSave();
 
 		const replyData =
 			sourceMessage && (mode === "reply" || mode === "reply_all")
@@ -534,7 +534,7 @@ export const ComposeForm = ({
 						subject: subject || undefined,
 						textBody: textBody || undefined,
 						htmlBody: htmlBody || undefined,
-						sendImmediately: true,
+						sendImmediately: false,
 						...replyData,
 					},
 				})
@@ -570,6 +570,7 @@ export const ComposeForm = ({
 			});
 		if (sent === null) return;
 
+		stopAutoSave(messageId);
 		startSendPolling(messageId);
 		onClose();
 	}, [
@@ -584,7 +585,7 @@ export const ComposeForm = ({
 		outboxMessageId,
 		createMutation,
 		sendMutation,
-		cancelAutoSave,
+		stopAutoSave,
 		startSendPolling,
 		setOutboxMessageId,
 		pushError,
@@ -592,14 +593,14 @@ export const ComposeForm = ({
 	]);
 
 	const handleDiscard = useCallback(() => {
-		cancelAutoSave();
+		stopAutoSave(outboxMessageId);
 		if (outboxMessageId) {
 			deleteMutation.mutate({
 				path: { outboxMessageId },
 			});
 		}
 		onClose();
-	}, [cancelAutoSave, outboxMessageId, deleteMutation, onClose]);
+	}, [stopAutoSave, outboxMessageId, deleteMutation, onClose]);
 
 	const handleAccountChange = useCallback(
 		(acct: RemitImapAccountResponse) => {

package/src/components/compose/compose-send-stops-autosave.render.test.ts

@@ -0,0 +1,212 @@
+/**
+ * Issue #604: two seconds after a reply was sent, the draft editor fired one
+ * more autosave PATCH at the outbox entry the send had just moved out of draft,
+ * and the fatal-error overlay went up over a message that had gone out fine.
+ *
+ * `handleSend` already dropped the pending autosave timer, but the autosave
+ * effect reschedules whenever the save mutation settles — and the last PATCH of
+ * a typing burst settles after the send request has left. So the guarantee
+ * asserted here is about the entry, not the timer: once it has been sent,
+ * nothing writes to it again.
+ *
+ * The second case is the same rule met from the other side. Send pressed before
+ * the first autosave has run has no draft to send, so compose creates one and
+ * then sends it — and creating it as already-queued makes that send a second
+ * dispatch, which the server refuses.
+ *
+ * The stub holds the outbox rule the API holds: only a draft accepts a send.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapAccountResponse,
+	RemitImapDescribeMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { createElement, useEffect } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, httpError, mockFetch } from "../../test-support/http";
+import { ComposeForm } from "./ComposeForm";
+import { ComposeProvider, useCompose } from "./ComposeProvider";
+
+const ACCOUNT_ID = "acc-1";
+const OUTBOX_MESSAGE_ID = "ob-604";
+const AUTOSAVE_DEBOUNCE_MS = 2000;
+
+const account = {
+	accountId: ACCOUNT_ID,
+	email: "me@example.com",
+	smtpEnabled: true,
+} as unknown as RemitImapAccountResponse;
+
+const sourceMessage = {
+	message: { messageId: "msg-1" },
+	envelope: {
+		subject: "Lunch",
+		messageIdValue: "<m1@example.com>",
+		from: [{ normalizedEmail: "them@example.com", displayName: "Them" }],
+		replyTo: [],
+		to: [],
+		cc: [],
+	},
+	references: [],
+	bodyParts: [],
+} as unknown as RemitImapDescribeMessageResponse;
+
+const outboxEntry = (status: string) => ({
+	outboxMessageId: OUTBOX_MESSAGE_ID,
+	accountId: ACCOUNT_ID,
+	fromAddress: account.email,
+	toAddresses: ["them@example.com"],
+	ccAddresses: [],
+	bccAddresses: [],
+	references: [],
+	subject: "Re: Lunch",
+	textBody: "yes",
+	status,
+});
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+let closed = 0;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	closed = 0;
+});
+
+const callsTo = (suffix: string) =>
+	(http?.calls ?? []).filter((call) => call.path.endsWith(suffix));
+
+const patchCount = (): number =>
+	(http?.calls ?? []).filter((call) => call.method === "PATCH").length;
+
+const Opened = ({ outboxMessageId }: { outboxMessageId?: string }) => {
+	const { state, openCompose } = useCompose();
+
+	useEffect(() => {
+		openCompose({ mode: "reply", account, sourceMessage, outboxMessageId });
+	}, [openCompose, outboxMessageId]);
+
+	if (!state.isOpen) return null;
+
+	return createElement(ComposeForm, {
+		mode: "reply",
+		account,
+		sourceMessage,
+		onClose: () => {
+			closed += 1;
+		},
+	});
+};
+
+interface MountOptions {
+	/** The draft compose opens on, when the user is resuming one. */
+	outboxMessageId?: string;
+	/** Hold the PATCH response open so a save is still in flight at send time. */
+	gatePatch?: boolean;
+}
+
+const mount = async (
+	options: MountOptions = {},
+): Promise<{ releasePatch: () => void }> => {
+	let release = (): void => {};
+	const patchGate = options.gatePatch
+		? new Promise<void>((resolve) => {
+				release = resolve;
+			})
+		: Promise.resolve();
+
+	let status = options.outboxMessageId ? "draft" : "absent";
+
+	http = mockFetch(async (call) => {
+		if (call.path.endsWith("/config")) return { accounts: [account] };
+
+		if (call.method === "POST" && call.path.endsWith("/outbox")) {
+			status = call.body?.sendImmediately === true ? "queued" : "draft";
+			return outboxEntry(status);
+		}
+
+		if (call.path.endsWith("/send")) {
+			if (status !== "draft") {
+				return httpError(409, `This message is already ${status}.`);
+			}
+			status = "queued";
+			return outboxEntry(status);
+		}
+
+		if (call.method === "PATCH") {
+			await patchGate;
+			return outboxEntry(status);
+		}
+
+		return outboxEntry(status);
+	});
+
+	harness = createDomHarness();
+	harness.renderApp(
+		createElement(
+			ComposeProvider,
+			null,
+			createElement(Opened, { outboxMessageId: options.outboxMessageId }),
+		),
+	);
+	await harness.flush();
+	await harness.wait(50);
+
+	return { releasePatch: release };
+};
+
+const subjectField = (): HTMLElement => {
+	const field = harness?.query("[data-subject-field]");
+	if (!field) throw new Error("the compose subject field is not mounted");
+	return field;
+};
+
+const sendButton = (): HTMLElement => {
+	const button = harness?.byText("button", "Send");
+	if (!button) throw new Error("the compose send button is not mounted");
+	return button;
+};
+
+describe("compose and the outbox entry it is sending (#604)", () => {
+	it("writes no further PATCH to an entry once it has been sent", async () => {
+		const { releasePatch } = await mount({
+			outboxMessageId: OUTBOX_MESSAGE_ID,
+			gatePatch: true,
+		});
+
+		harness?.type(subjectField(), "Re: Lunch tomorrow");
+		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 100);
+		assert.equal(patchCount(), 1, "the typing burst autosaves once");
+
+		harness?.click(sendButton());
+		await harness?.flush();
+
+		// The autosave that was still in flight settles after the send, which is
+		// what used to re-arm the debounce.
+		releasePatch();
+		await harness?.flush();
+		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 200);
+
+		assert.equal(callsTo("/send").length, 1, "the send went out");
+		assert.equal(patchCount(), 1, "no autosave PATCH followed the send");
+	});
+
+	it("sends a reply pressed before the first autosave, in one dispatch", async () => {
+		await mount();
+
+		harness?.click(sendButton());
+		await harness?.flush();
+		await harness?.wait(100);
+
+		const created = callsTo("/outbox").filter((call) => call.method === "POST");
+		assert.equal(created.length, 1, "the message was created once");
+		assert.equal(created[0]?.body?.sendImmediately, false);
+		assert.equal(callsTo("/send").length, 1, "the send went out");
+		assert.equal(closed, 1, "compose closed on a successful send");
+	});
+});

package/src/hooks/useIntelligenceData.test.ts

@@ -243,6 +243,108 @@ describe("buildAuthenticityIntel", () => {
 		}
 	});
 
+	describe("a passing signature over a claim that does not hold", () => {
+		// The InfoMedics invoice phish: an attacker's own free Atlassian tenant,
+		// so SPF/DKIM/DMARC genuinely pass for a domain nobody recognises, and the
+		// provider's own filter already called it spam.
+		const infoMedics = makeThread({
+			fromEmail: "jira@serviceupdatebank.atlassian.net",
+			fromName: "InfoMedics",
+			subject: "Vordering",
+			authenticity: {
+				fromDomain: "serviceupdatebank.atlassian.net",
+				dkimDomain: "custmx.one.com",
+				dkimMismatch: false,
+				displayNameCorrespondence: "Unrelated",
+				offDomainLinkDomains: ["betaal-vordering.example"],
+			},
+		} as Partial<RemitImapThreadMessageResponse>);
+
+		test("is never presented as verified", () => {
+			const result = buildAuthenticityIntel(infoMedics, 0);
+			assert.notEqual(result.verdict, "aligned");
+			assert.doesNotMatch(result.summary, /We verified/i);
+		});
+
+		test("names the display name and the link destination", () => {
+			const result = buildAuthenticityIntel(infoMedics, 0);
+			assert.equal(result.verdict, "caution");
+			assert.match(result.summary, /really was sent by/);
+			assert.match(result.summary, /"InfoMedics"/);
+			assert.match(result.summary, /betaal-vordering\.example/);
+			assert.doesNotMatch(result.summary, /DKIM|SPF|DMARC/i);
+		});
+
+		test("a lookalike display name reads as an imitation", () => {
+			const result = buildAuthenticityIntel(
+				makeThread({
+					fromEmail: "billing@1nfomedics.nl",
+					fromName: "InfoMedics",
+					authenticity: {
+						fromDomain: "1nfomedics.nl",
+						dkimDomain: "1nfomedics.nl",
+						dkimMismatch: false,
+						displayNameCorrespondence: "Lookalike",
+						offDomainLinkDomains: [],
+					},
+				} as Partial<RemitImapThreadMessageResponse>),
+				0,
+			);
+			assert.equal(result.verdict, "caution");
+			assert.match(result.summary, /only looks like/);
+		});
+
+		test("stays verified when the comparisons agreed", () => {
+			const result = buildAuthenticityIntel(
+				makeThread({
+					fromEmail: "notifications@notifications.github.com",
+					fromName: "GitHub",
+					authenticity: {
+						fromDomain: "notifications.github.com",
+						dkimDomain: "github.com",
+						dkimMismatch: false,
+						displayNameCorrespondence: "Corresponds",
+						offDomainLinkDomains: [],
+					},
+				} as Partial<RemitImapThreadMessageResponse>),
+				0,
+			);
+			assert.equal(result.verdict, "aligned");
+		});
+
+		test("stays verified when nothing was compared", () => {
+			const result = buildAuthenticityIntel(
+				makeThread({
+					fromEmail: "alice@example.com",
+					authenticity: {
+						fromDomain: "example.com",
+						dkimDomain: "example.com",
+						dkimMismatch: false,
+					},
+				} as Partial<RemitImapThreadMessageResponse>),
+				0,
+			);
+			assert.equal(result.verdict, "aligned");
+		});
+
+		test("a drifted link list carries no destination to name", () => {
+			const result = buildAuthenticityIntel(
+				makeThread({
+					fromEmail: "alice@example.com",
+					authenticity: {
+						fromDomain: "example.com",
+						dkimDomain: "example.com",
+						dkimMismatch: false,
+						displayNameCorrespondence: "Corresponds",
+						offDomainLinkDomains: "elsewhere.example",
+					},
+				} as unknown as Partial<RemitImapThreadMessageResponse>),
+				0,
+			);
+			assert.equal(result.verdict, "aligned");
+		});
+	});
+
 	describe("unparseable sender drives the red tier", () => {
 		test("mismatch + addressUnreadable when the domain has no dot", () => {
 			const thread = makeThread({

package/src/hooks/useIntelligenceData.ts

@@ -6,6 +6,7 @@ import type {
 	RemitImapAddressResponse,
 	RemitImapThreadMessageResponse,
 } from "@remit/api-http-client/types.gen.ts";
+import { DisplayNameCorrespondence } from "@remit/domain-enums";
 import type {
 	AuthenticityIntel,
 	IntelligenceData,
@@ -97,6 +98,65 @@ function buildSenderFlags(
 	};
 }
 
+/** The brand the display name asserts, or `undefined` when it asserts none. */
+function claimedBrandOf(
+	thread: RemitImapThreadMessageResponse,
+): string | undefined {
+	if (!thread.fromName) return undefined;
+	if (thread.fromName === thread.fromEmail) return undefined;
+	return thread.fromName;
+}
+
+function joinDomains(domains: readonly string[]): string {
+	if (domains.length === 1) return domains[0];
+	return `${domains.slice(0, -1).join(", ")} and ${domains[domains.length - 1]}`;
+}
+
+/**
+ * The clauses naming what does not line up on a message whose signature checks
+ * out. Empty when everything the backend compared agreed — including when it
+ * compared nothing, which is every message the provider's filter did not
+ * already call spam.
+ */
+function describeSenderMismatch(
+	auth: NonNullable<RemitImapThreadMessageResponse["authenticity"]>,
+	claimedBrand: string | undefined,
+): string[] {
+	const clauses: string[] = [];
+	const correspondence = auth.displayNameCorrespondence;
+
+	if (claimedBrand) {
+		if (correspondence === DisplayNameCorrespondence.Unrelated) {
+			clauses.push(
+				`The name it shows, "${claimedBrand}", has nothing to do with that domain.`,
+			);
+		} else if (correspondence === DisplayNameCorrespondence.Lookalike) {
+			clauses.push(
+				`The name it shows, "${claimedBrand}", only looks like that domain.`,
+			);
+		}
+	}
+
+	const linkDomains = readDomainList(auth.offDomainLinkDomains);
+	if (linkDomains.length > 0) {
+		clauses.push(`Its links go to ${joinDomains(linkDomains.slice(0, 3))}.`);
+	}
+
+	return clauses;
+}
+
+/**
+ * The field is a JSON blob on the message row, so a value written by an older
+ * or drifted writer reaches here as whatever it happens to be. Anything that is
+ * not a list of non-empty strings carries no destination to name.
+ */
+function readDomainList(value: unknown): string[] {
+	if (!Array.isArray(value)) return [];
+	return value.filter(
+		(entry): entry is string => typeof entry === "string" && entry.length > 0,
+	);
+}
+
 /**
  * Build authenticity intel from the thread message's authenticity field.
  *
@@ -130,6 +190,20 @@ export function buildAuthenticityIntel(
 		};
 	}
 	if (!auth.dkimMismatch) {
+		const claimed = claimedBrandOf(thread);
+		const unlike = describeSenderMismatch(auth, claimed);
+		if (unlike.length > 0) {
+			return {
+				verdict: "caution",
+				fromDomain: auth.fromDomain,
+				dkimDomain: auth.dkimDomain,
+				claimedBrand: claimed,
+				summary: [
+					`This message really was sent by ${auth.fromDomain}.`,
+					...unlike,
+				].join(" "),
+			};
+		}
 		return {
 			verdict: "aligned",
 			fromDomain: auth.fromDomain,
@@ -142,10 +216,7 @@ export function buildAuthenticityIntel(
 
 	const fromDomain = auth.fromDomain;
 	const dkimDomain = auth.dkimDomain;
-	const claimedBrand =
-		thread.fromName && thread.fromName !== thread.fromEmail
-			? thread.fromName
-			: undefined;
+	const claimedBrand = claimedBrandOf(thread);
 	const summary = claimedBrand
 		? `The display name claims "${claimedBrand}", but this message was actually sent from ${dkimDomain ?? "another sender"} — not ${fromDomain}. Real senders use their own address.`
 		: `This message claims to be from ${fromDomain}, but it was actually sent from ${dkimDomain ?? "a different sender"}.`;

package/src/hooks/useSaveDraft.ts

@@ -32,6 +32,7 @@ export const useSaveDraft = ({
 	const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle");
 	const [saveError, setSaveError] = useState<unknown>(null);
 	const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+	const closedIdsRef = useRef<Set<string>>(new Set());
 	const queryClient = useQueryClient();
 
 	const createMutation = useMutation(
@@ -88,6 +89,7 @@ export const useSaveDraft = ({
 
 	const saveDraft = useCallback(
 		(data: DraftData) => {
+			if (outboxMessageId && closedIdsRef.current.has(outboxMessageId)) return;
 			if (timerRef.current) clearTimeout(timerRef.current);
 			timerRef.current = setTimeout(() => {
 				// Keep the real error, not just a vague "error" status — the caller
@@ -99,7 +101,7 @@ export const useSaveDraft = ({
 				});
 			}, 2000);
 		},
-		[executeSave],
+		[executeSave, outboxMessageId],
 	);
 
 	const saveImmediately = useCallback(
@@ -110,9 +112,15 @@ export const useSaveDraft = ({
 		[executeSave],
 	);
 
-	const cancelAutoSave = useCallback(() => {
+	// Called with an id, the entry is closed to autosave for good. Sending and
+	// discarding both take the entry out of draft, and the compose effect that
+	// schedules autosaves re-runs on every mutation settling — so dropping the
+	// pending timer alone leaves the next render free to schedule another write
+	// against an entry the server will refuse (#604).
+	const stopAutoSave = useCallback((closedOutboxMessageId?: string) => {
 		if (timerRef.current) clearTimeout(timerRef.current);
+		if (closedOutboxMessageId) closedIdsRef.current.add(closedOutboxMessageId);
 	}, []);
 
-	return { saveStatus, saveError, saveDraft, saveImmediately, cancelAutoSave };
+	return { saveStatus, saveError, saveDraft, saveImmediately, stopAutoSave };
 };