@remit/web-client 0.0.121 → 0.0.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.121",
+  "version": "0.0.123",
   "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/components/mail/IntelligencePane.test.ts

@@ -61,6 +61,30 @@ describe("resolveSpamAction (#594)", () => {
 		);
 	});
 
+	test("offers nothing once the panel has moved this message", () => {
+		assert.equal(
+			resolveSpamAction({
+				mailboxId: junkId,
+				junkMailboxId: junkId,
+				inboxMailboxId: inboxId,
+				moveApplied: true,
+			}),
+			null,
+		);
+	});
+
+	test("offers Not spam again when the move came back failed", () => {
+		assert.equal(
+			resolveSpamAction({
+				mailboxId: junkId,
+				junkMailboxId: junkId,
+				inboxMailboxId: inboxId,
+				moveApplied: false,
+			}),
+			"notSpam",
+		);
+	});
+
 	test("the two actions are mutually exclusive", () => {
 		const inJunk = resolveSpamAction({
 			mailboxId: junkId,

package/src/components/mail/IntelligencePane.tsx

@@ -25,9 +25,9 @@ export interface IntelligencePaneProps {
 	 * the empty-state placeholder.
 	 */
 	thread?: RemitImapThreadMessageResponse;
-	/** The mailbox the message list is currently showing — the move source. */
+	/** The mailbox the message list is currently showing. */
 	mailboxId?: string;
-	/** Account that owns `mailboxId`; resolves the Junk/Inbox move targets. */
+	/** Account that owns the open message; resolves the Junk/Inbox move targets. */
 	accountId?: string;
 	/**
 	 * Hide the panel's own close (X). Set when hosted inside the mobile Drawer,
@@ -54,12 +54,20 @@ type CategoryOverride = (typeof CATEGORY_OVERRIDES)[number];
 /**
  * Decide which spam quick-action to offer for the current message (issue #594).
  *
+ * `mailboxId` is the mailbox the MESSAGE is in, which is what the move acts on.
  * The two buttons are symmetric and mutually exclusive:
  * - In the Junk mailbox → offer **Not spam** (move out, promote sender), but
  *   only when an Inbox destination is resolved.
  * - Anywhere else → offer **Mark spam** (move in, demote sender), but only when
  *   the Junk destination is resolved.
  *
+ * `moveApplied` says the panel has already moved this message and the row it is
+ * rendering has not caught up. The list drops the row on the move, but the
+ * reading pane keeps the message open from the row it was opened with, whose
+ * mailbox is still the source — so without this the button survives its own
+ * press, and a second press asks the server to move the message to where it now
+ * already is.
+ *
  * Returns `"notSpam"`, `"markSpam"`, or `null` (no actionable button — e.g. the
  * move source isn't known, or the needed target mailbox hasn't loaded). Pure so
  * the wiring decision can be unit-tested without rendering.
@@ -68,8 +76,10 @@ export const resolveSpamAction = (input: {
 	mailboxId?: string;
 	junkMailboxId?: string;
 	inboxMailboxId?: string;
+	moveApplied?: boolean;
 }): "notSpam" | "markSpam" | null => {
-	const { mailboxId, junkMailboxId, inboxMailboxId } = input;
+	const { mailboxId, junkMailboxId, inboxMailboxId, moveApplied } = input;
+	if (moveApplied) return null;
 	if (!mailboxId) return null;
 	const isInJunk = Boolean(junkMailboxId && mailboxId === junkMailboxId);
 	if (isInJunk) return inboxMailboxId ? "notSpam" : null;
@@ -235,27 +245,39 @@ function WiredPanel({
 		senderEmail,
 	});
 
-	// "Not spam" / "Mark spam" move the message across the Junk boundary; the
-	// backend's moveMessage then promotes (out of Junk) or demotes (into Junk)
-	// the sender's trust (issue #594). Only one button is wired at a time,
-	// depending on whether the message is currently sitting in Junk.
+	// "Not spam" / "Mark spam" move the message across the Junk boundary. Only
+	// one is wired at a time, decided by the mailbox the message itself is in —
+	// not by the list the user happens to be looking at, which for a search or a
+	// cross-account view names a different folder (issue #594).
 	const { junkMailboxId } = useJunkMailbox(accountId);
 	const { inboxMailboxId } = useInboxMailbox(accountId);
-	const { moveMessages } = useMoveMessages({
-		mailboxId: mailboxId ?? "",
+	const { moveMessages, isError: moveFailed } = useMoveMessages({
+		mailboxId: thread.mailboxId,
 		threadId: thread.threadId,
 		accountId,
 	});
 	const telemetry = useTelemetry();
+	const [lastMove, setLastMove] = useState<
+		{ messageId: string; mailboxId: string } | undefined
+	>(undefined);
 
+	// Spent while the row this panel is rendering still names the mailbox the
+	// move took the message OUT of. It resolves itself: a row that has caught up
+	// with the move offers the actions again, and a move that comes back failed
+	// is rolled back with a banner, so the retry is against the same button.
 	const spamAction = resolveSpamAction({
-		mailboxId,
+		mailboxId: thread.mailboxId,
 		junkMailboxId,
 		inboxMailboxId,
+		moveApplied:
+			!moveFailed &&
+			lastMove?.messageId === thread.messageId &&
+			lastMove.mailboxId !== thread.mailboxId,
 	});
 
 	const handleNotSpam = useCallback(() => {
 		if (!inboxMailboxId) return;
+		setLastMove({ messageId: thread.messageId, mailboxId: inboxMailboxId });
 		moveMessages([thread.messageId], inboxMailboxId);
 	}, [inboxMailboxId, moveMessages, thread.messageId]);
 
@@ -266,6 +288,7 @@ function WiredPanel({
 			senderTrust: thread.senderTrust,
 			wasRescuable: isRescueCandidate(thread),
 		});
+		setLastMove({ messageId: thread.messageId, mailboxId: junkMailboxId });
 		moveMessages([thread.messageId], junkMailboxId);
 	}, [junkMailboxId, moveMessages, thread, telemetry]);
 

package/src/hooks/useMoveMessages.ts

@@ -71,7 +71,7 @@ export const useMoveMessages = ({
 	const queryClient = useQueryClient();
 	const { pushError } = useErrorBanners();
 
-	const { mutateAsync, isPending } = useMutation({
+	const { mutateAsync, isPending, isError } = useMutation({
 		...messageBulkOperationsMoveMessagesMutation(),
 		onMutate: async (variables): Promise<MoveContext> => {
 			const messageIds = new Set(variables.body.messageIds ?? []);
@@ -189,5 +189,5 @@ export const useMoveMessages = ({
 		[mutateAsync],
 	);
 
-	return { moveMessages, isPending };
+	return { moveMessages, isPending, isError };
 };

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 };
 };