@remit/web-client 0.0.312 → 0.0.313

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.312",
+  "version": "0.0.313",
   "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

@@ -31,7 +31,7 @@ import {
 	unwrapLanguage,
 } from "@remit/ui";
 import type { ComposeBodyMode, ComposeInsertion } from "@remit/ui/rich-text";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { RefObject } from "react";
 import {
 	lazy,
@@ -46,6 +46,7 @@ import {
 	type DraftForAttachment,
 	useComposeAttachments,
 } from "../../hooks/useComposeAttachments";
+import { useInlineImages } from "../../hooks/useInlineImages";
 import { useMessageBodyContent } from "../../hooks/useMessageBodyContent";
 import { useSaveDraft } from "../../hooks/useSaveDraft";
 import { useSignature } from "../../hooks/useSignature.js";
@@ -462,9 +463,7 @@ export const ComposeForm = ({
 	 * failure to `draft` (#933), so opening a Failed message and pressing Escape
 	 * would take it out of the Outbox with the reader having changed nothing. The
 	 * first run after a load records what was loaded; only a payload that differs
-	 * from it is an edit. Nothing updates it afterwards — once the reader has
-	 * touched the document, every later run saves as it always did, retries of a
-	 * failed write included.
+	 * from it is an edit.
 	 */
 	const loadedPayloadRef = useRef<string | undefined>(undefined);
 	const captureLoadedPayloadRef = useRef(false);
@@ -877,11 +876,41 @@ export const ComposeForm = ({
 		remove: removeAttachment,
 		load: loadAttachments,
 		reset: resetAttachments,
+		owns: ownsAttachment,
+		isLoaded: attachmentsLoaded,
+		refreshLinks: refreshAttachmentLinks,
+		storedContent,
+		onRemoved: onAttachmentRemoved,
 		blockingReason: attachmentBlockingReason,
 	} = useComposeAttachments({
 		ensureDraft: ensureDraftForAttachment,
 	});
 
+	const queryClient = useQueryClient();
+	const inlineImages = useInlineImages({
+		attach,
+		owns: ownsAttachment,
+		isLoaded: attachmentsLoaded,
+		storedContent,
+		refreshLinks: () => {
+			if (!outboxMessageId) return Promise.resolve();
+			return queryClient
+				.fetchQuery({
+					...outboxDetailOperationsGetOutboxMessageOptions({
+						path: { outboxMessageId },
+					}),
+					staleTime: 0,
+				})
+				.then((draft) => refreshAttachmentLinks(draft.attachments));
+		},
+		onRemoved: onAttachmentRemoved,
+		draftAttachments:
+			draftData && draftData.outboxMessageId === outboxMessageId
+				? draftData.attachments
+				: [],
+		pushError,
+	});
+
 	const attachmentDocumentRef = useRef(outboxMessageId);
 	useEffect(() => {
 		const previous = attachmentDocumentRef.current;
@@ -1086,6 +1115,7 @@ export const ComposeForm = ({
 			return;
 		}
 		if (loadedPayloadRef.current === fingerprint) return;
+		loadedPayloadRef.current = undefined;
 
 		saveDraft(payload);
 	}, [
@@ -1283,6 +1313,9 @@ export const ComposeForm = ({
 	return (
 		<ComposeFormShell
 			layout={layout}
+			onDropFiles={(files) => {
+				void attach(files);
+			}}
 			banner={
 				<>
 					{selectedAccount && selectedAccountMissingSmtp ? (
@@ -1381,6 +1414,7 @@ export const ComposeForm = ({
 					spellcheck={spellcheck}
 					insertion={pendingInsertion}
 					onInserted={setInsertedVersion}
+					inlineImages={inlineImages}
 				/>
 			</Suspense>
 		</ComposeFormShell>

package/src/components/compose/compose-inline-image.render.test.ts

@@ -0,0 +1,542 @@
+import assert from "node:assert/strict";
+import { afterEach, before, describe, it, mock } from "node:test";
+import type {
+	RemitImapAccountResponse,
+	RemitImapDescribeMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	RouterContextProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import {
+	type HttpCall,
+	type HttpMock,
+	mockFetch,
+} from "../../test-support/http";
+import { ComposeForm } from "./ComposeForm";
+import { ComposeProvider } from "./ComposeProvider";
+
+const ACCOUNT_ID = "acc-1";
+const OUTBOX_MESSAGE_ID = "ob-1307";
+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: "The chart",
+		messageIdValue: "<m1@example.com>",
+		from: [{ normalizedEmail: "them@example.com", displayName: "Them" }],
+		replyTo: [],
+		to: [],
+		cc: [],
+	},
+	references: [],
+	bodyParts: [],
+} as unknown as RemitImapDescribeMessageResponse;
+
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+class JsdomClipboardEvent extends Event {
+	readonly clipboardData: DataTransfer;
+
+	constructor(type: string, clipboardData: DataTransfer) {
+		super(type, { bubbles: true, cancelable: true });
+		this.clipboardData = clipboardData;
+	}
+}
+
+const clipboardGlobal = globalThis as { ClipboardEvent?: unknown };
+clipboardGlobal.ClipboardEvent ??= JsdomClipboardEvent;
+const ClipboardEventClass = clipboardGlobal.ClipboardEvent as new (
+	type: string,
+	clipboardData: DataTransfer,
+) => Event;
+
+const transferOf = (files: File[], text = ""): DataTransfer =>
+	({
+		types: ["Files"],
+		files,
+		getData: (type: string) => (type === "text/plain" ? text : ""),
+	}) as unknown as DataTransfer;
+
+before(() => {
+	Object.defineProperty(Range.prototype, "getBoundingClientRect", {
+		value: () => ({
+			top: 0,
+			bottom: 0,
+			left: 0,
+			right: 0,
+			width: 0,
+			height: 0,
+			x: 0,
+			y: 0,
+		}),
+		configurable: true,
+	});
+});
+
+const rootRoute = createRootRoute();
+const mailboxRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: "/mail/$mailboxId",
+	validateSearch: (search: Record<string, unknown>) => search,
+});
+
+const testRouter = (): AnyRouter =>
+	createRouter({
+		routeTree: rootRoute.addChildren([mailboxRoute]),
+		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
+	}) as unknown as AnyRouter;
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+interface ServerAttachment {
+	outboxAttachmentId: string;
+	filename: string;
+	contentType: string;
+	sizeBytes: number;
+	state: "Pending" | "Stored";
+}
+
+interface Server {
+	htmlBody: string;
+	attachments: ServerAttachment[];
+	refuseMints: boolean;
+	minted: number;
+	failPuts: number;
+	linkGeneration: number;
+	expireBefore: number;
+	contentStatus: number;
+}
+
+let server: Server;
+
+const freshServer = (): Server => ({
+	htmlBody: "<p>Here it is</p>",
+	attachments: [],
+	refuseMints: false,
+	minted: 0,
+	failPuts: 0,
+	linkGeneration: 0,
+	expireBefore: 0,
+	contentStatus: 200,
+});
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	mock.restoreAll();
+});
+
+const CONTENT_HOST = "https://content.test";
+
+const toResponse = (attachment: ServerAttachment) => ({
+	...attachment,
+	outboxMessageId: OUTBOX_MESSAGE_ID,
+	contentId: `${attachment.outboxAttachmentId}@remit`,
+	contentUrl: `${CONTENT_HOST}/${attachment.outboxAttachmentId}?g=${server.linkGeneration}`,
+});
+
+const outboxEntry = () => ({
+	outboxMessageId: OUTBOX_MESSAGE_ID,
+	accountId: ACCOUNT_ID,
+	fromAddress: account.email,
+	toAddresses: ["them@example.com"],
+	attachments: server.attachments.map(toResponse),
+	ccAddresses: [],
+	bccAddresses: [],
+	references: [],
+	subject: "Re: The chart",
+	textBody: "Here it is",
+	htmlBody: server.htmlBody,
+	status: "draft",
+});
+
+const refusal = (filename: string): Response =>
+	new Response(
+		JSON.stringify({
+			code: "attachment_rejected",
+			reason: "FileTooLarge",
+			message: `"${filename}" is 30.0 MB, over the 25.0 MB a message can carry.`,
+			limitBytes: 26_214_400,
+			usedBytes: 0,
+		}),
+		{ status: 413, headers: { "content-type": "application/json" } },
+	);
+
+const answer = (call: HttpCall): unknown => {
+	if (call.url.startsWith(CONTENT_HOST)) {
+		const generation = Number(new URL(call.url).searchParams.get("g"));
+		if (generation < server.expireBefore) {
+			return new Response("", {
+				status: 403,
+				headers: { "x-remit-403-reason": "expired" },
+			});
+		}
+		if (server.contentStatus !== 200) {
+			return new Response("", { status: server.contentStatus });
+		}
+		return new Response(new Uint8Array([0x89, 0x50, 0x4e, 0x47]), {
+			status: 200,
+		});
+	}
+	if (call.url.startsWith("https://upload.test")) {
+		if (server.failPuts === 0) return {};
+		server.failPuts -= 1;
+		return new Response("", { status: 500 });
+	}
+	if (call.path.endsWith("/config")) return { accounts: [account] };
+	if (call.method === "POST" && call.path.endsWith("/attachments")) {
+		const filename = String(call.body?.filename);
+		if (server.refuseMints) return refusal(filename);
+		server.minted += 1;
+		const attachment: ServerAttachment = {
+			outboxAttachmentId: `att-${server.minted}`,
+			filename,
+			contentType: String(call.body?.contentType),
+			sizeBytes: Number(call.body?.sizeBytes),
+			state: "Pending",
+		};
+		server.attachments.push(attachment);
+		return {
+			...toResponse(attachment),
+			uploadUrl: `https://upload.test/${attachment.outboxAttachmentId}`,
+			uploadExpiresAt: 4_000_000_000,
+		};
+	}
+	if (call.path.endsWith("/complete")) {
+		const outboxAttachmentId = call.path.split("/").at(-2);
+		const attachment = server.attachments.find(
+			(candidate) => candidate.outboxAttachmentId === outboxAttachmentId,
+		);
+		if (!attachment)
+			throw new Error(`completed ${outboxAttachmentId} unminted`);
+		attachment.state = "Stored";
+		return toResponse(attachment);
+	}
+	if (
+		call.method === "GET" &&
+		call.path.endsWith(`/outbox/${OUTBOX_MESSAGE_ID}`)
+	) {
+		server.linkGeneration += 1;
+	}
+	if (call.method === "PATCH") {
+		if (typeof call.body?.htmlBody === "string") {
+			server.htmlBody = call.body.htmlBody;
+		}
+		const kept = call.body?.attachmentIds;
+		if (Array.isArray(kept)) {
+			server.attachments = server.attachments.filter((attachment) =>
+				kept.includes(attachment.outboxAttachmentId),
+			);
+		}
+	}
+	return outboxEntry();
+};
+
+let objectUrls = 0;
+
+const mount = async (): Promise<DomHarness> => {
+	if (!http) {
+		server = freshServer();
+		objectUrls = 0;
+		mock.method(URL, "createObjectURL", () => {
+			objectUrls += 1;
+			return `blob:object-${objectUrls}`;
+		});
+		mock.method(URL, "revokeObjectURL", () => {});
+		http = mockFetch(answer);
+	}
+	const dom = createDomHarness();
+	harness = dom;
+	dom.renderApp(
+		createElement(RouterContextProvider, {
+			router: testRouter(),
+			// biome-ignore lint/correctness/noChildrenProp: RouterContextProvider types `children` as a required prop, which createElement's rest-argument form does not satisfy
+			children: createElement(
+				ComposeProvider,
+				null,
+				createElement(ComposeForm, {
+					mode: "reply",
+					account,
+					sourceMessage,
+					outboxMessageId: OUTBOX_MESSAGE_ID,
+					onDraftCreated: () => {},
+					onClose: () => {},
+				}),
+			),
+		}),
+	);
+	await dom.flush();
+	await dom.waitFor(
+		() =>
+			dom
+				.query("[data-testid=compose-body]")
+				?.textContent?.includes("Here it is") === true,
+		"the draft to load into the writing surface",
+		30_000,
+	);
+	return dom;
+};
+
+const bodyOf = (dom: DomHarness): HTMLElement => {
+	const body = dom.query("[data-testid=compose-body]");
+	if (!body) throw new Error("the compose body is not mounted");
+	return body;
+};
+
+const attachedRows = (dom: DomHarness): [string, string | null][] =>
+	dom
+		.queryAll("[data-testid=compose-attachment]")
+		.map((row) => [
+			row.querySelector("bdi")?.textContent ?? "",
+			row.getAttribute("data-state"),
+		]);
+
+const rowIn = (dom: DomHarness, state: string): boolean =>
+	attachedRows(dom).some(([, seen]) => seen === state);
+
+const png = (name: string): File =>
+	new File(["\u0089PNG"], name, { type: "image/png" });
+
+const paste = (dom: DomHarness, files: File[]): void => {
+	dom.dispatch(
+		bodyOf(dom),
+		new ClipboardEventClass("paste", transferOf(files)),
+	);
+};
+
+const pasteAndStore = async (dom: DomHarness): Promise<void> => {
+	paste(dom, [png("chart.png")]);
+	await dom.waitFor(() => rowIn(dom, "attached"), "the pasted image to store");
+	await dom.wait(AUTOSAVE_DEBOUNCE_MS + 200);
+};
+
+describe("a file pasted or dropped into the composer (#1307)", () => {
+	it("puts a pasted image in the body, referred to by the content-id it was stored under", async () => {
+		const dom = await mount();
+
+		await pasteAndStore(dom);
+
+		assert.deepEqual(attachedRows(dom), [["chart.png", "attached"]]);
+		assert.equal(
+			bodyOf(dom).querySelector("img")?.getAttribute("src"),
+			"blob:object-1",
+			"the composer does not show the picture it was handed",
+		);
+		assert.ok(
+			server.htmlBody.includes('src="cid:att-1@remit"'),
+			`the saved body does not refer to the stored image: ${server.htmlBody}`,
+		);
+	});
+
+	it("shows the stored picture again when the draft is reopened", async () => {
+		await pasteAndStore(await mount());
+		harness?.close();
+
+		const reopened = await mount();
+		await reopened.waitFor(
+			() =>
+				bodyOf(reopened).querySelector("img")?.getAttribute("src") ===
+				"blob:object-2",
+			"the reopened draft to resolve its picture",
+		);
+
+		assert.ok(
+			http?.calls.some((call) => call.url.startsWith(`${CONTENT_HOST}/att-1?`)),
+			"the picture was not read back from where the file is stored",
+		);
+		assert.deepEqual(attachedRows(reopened), [["chart.png", "attached"]]);
+	});
+
+	it("never saves a picture whose file was removed, even after an undo", async () => {
+		await pasteAndStore(await mount());
+		harness?.close();
+
+		const reopened = await mount();
+		await reopened.waitFor(
+			() =>
+				bodyOf(reopened).querySelector("img")?.getAttribute("src") ===
+				"blob:object-2",
+			"the reopened draft to resolve its picture",
+		);
+		reopened.click(reopened.byLabel("Remove chart.png"));
+		await reopened.waitFor(
+			() => bodyOf(reopened).querySelector("img") === null,
+			"the removed file's picture to leave the body",
+		);
+		reopened.dispatch(
+			bodyOf(reopened),
+			new reopened.window.KeyboardEvent("keydown", {
+				key: "z",
+				code: "KeyZ",
+				ctrlKey: true,
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+		await reopened.wait(AUTOSAVE_DEBOUNCE_MS + 200);
+
+		assert.equal(
+			server.htmlBody.includes("cid:att-1@remit"),
+			false,
+			server.htmlBody,
+		);
+		assert.equal(
+			bodyOf(reopened).querySelector("img"),
+			null,
+			"a picture is on screen for a file the draft no longer carries",
+		);
+	});
+
+	it("renews an expired picture link and shows the picture", async () => {
+		await pasteAndStore(await mount());
+		harness?.close();
+		server.expireBefore = server.linkGeneration + 2;
+
+		const reopened = await mount();
+		await reopened.waitFor(
+			() =>
+				bodyOf(reopened).querySelector("img")?.getAttribute("src") ===
+				"blob:object-2",
+			"the renewed link to resolve the picture",
+		);
+
+		const reads = (http?.calls ?? []).filter((call) =>
+			call.url.startsWith(`${CONTENT_HOST}/att-1?`),
+		);
+		assert.equal(
+			reads.length,
+			2,
+			"the expired link was not read, then renewed",
+		);
+	});
+
+	it("says the session ended when the picture is refused for authentication", async () => {
+		await pasteAndStore(await mount());
+		harness?.close();
+		server.contentStatus = 401;
+
+		const reopened = await mount();
+		await reopened.waitFor(
+			() => reopened.text().includes("Your session expired"),
+			"the signed-out notice",
+		);
+
+		assert.match(reopened.text(), /Sign in again/);
+	});
+
+	it("keeps a retried pasted image inline once its upload goes through", async () => {
+		const dom = await mount();
+		server.failPuts = 1;
+
+		paste(dom, [png("chart.png")]);
+		await dom.waitFor(() => rowIn(dom, "failed"), "the upload to fail");
+		await dom.waitFor(
+			() => bodyOf(dom).querySelector("img") === null,
+			"the failed picture to leave the body",
+		);
+		dom.click(dom.byText("button", "Try again"));
+		await dom.waitFor(() => rowIn(dom, "attached"), "the retry to store");
+		await dom.wait(AUTOSAVE_DEBOUNCE_MS + 200);
+
+		assert.ok(
+			bodyOf(dom).querySelector("img"),
+			"the retried picture is not in the body",
+		);
+		assert.ok(
+			server.htmlBody.includes('src="cid:att-2@remit"'),
+			`the saved body does not refer to the retried image: ${server.htmlBody}`,
+		);
+	});
+
+	it("takes a refused image back out of the body and says why on its row", async () => {
+		const dom = await mount();
+		server.refuseMints = true;
+
+		paste(dom, [png("huge.png")]);
+		await dom.waitFor(() => rowIn(dom, "failed"), "the refusal to land");
+		await dom.waitFor(
+			() => bodyOf(dom).querySelector("img") === null,
+			"the refused picture to leave the body",
+		);
+		await dom.wait(AUTOSAVE_DEBOUNCE_MS + 200);
+
+		assert.match(
+			dom.query("[data-testid=compose-attachment-error]")?.textContent ?? "",
+			/huge\.png/,
+		);
+		assert.equal(server.htmlBody.includes("<img"), false, server.htmlBody);
+	});
+
+	it("takes the picture out of the body when its file is removed", async () => {
+		const dom = await mount();
+		await pasteAndStore(dom);
+
+		dom.click(dom.byLabel("Remove chart.png"));
+		await dom.waitFor(
+			() => bodyOf(dom).querySelector("img") === null,
+			"the removed file's picture to leave the body",
+		);
+		await dom.wait(AUTOSAVE_DEBOUNCE_MS + 200);
+
+		assert.deepEqual(attachedRows(dom), []);
+		assert.equal(server.htmlBody.includes("cid:"), false, server.htmlBody);
+	});
+
+	it("attaches a pasted file that is not a picture, leaving the body alone", async () => {
+		const dom = await mount();
+
+		paste(dom, [
+			new File(["%PDF"], "minutes.pdf", { type: "application/pdf" }),
+		]);
+		await dom.waitFor(
+			() => rowIn(dom, "attached"),
+			"the pasted file to attach",
+		);
+
+		assert.deepEqual(attachedRows(dom), [["minutes.pdf", "attached"]]);
+		assert.equal(bodyOf(dom).querySelector("img"), null);
+	});
+
+	it("attaches a dropped file the way the picker does, leaving the body alone", async () => {
+		const dom = await mount();
+		const area = dom.query("[data-testid=compose-body-area]");
+		if (!area) throw new Error("the compose body area is not mounted");
+
+		const drop = new Event("drop", { bubbles: true, cancelable: true });
+		Object.defineProperty(drop, "dataTransfer", {
+			value: transferOf([
+				new File(["%PDF"], "minutes.pdf", { type: "application/pdf" }),
+			]),
+		});
+		dom.dispatch(area, drop);
+		await dom.waitFor(
+			() => rowIn(dom, "attached"),
+			"the dropped file to attach",
+		);
+
+		assert.deepEqual(attachedRows(dom), [["minutes.pdf", "attached"]]);
+		assert.equal(drop.defaultPrevented, true, "the browser opened the file");
+		assert.equal(
+			bodyOf(dom).querySelector("img"),
+			null,
+			"a dropped file went into the body",
+		);
+	});
+});

package/src/hooks/useComposeAttachments.ts

@@ -61,7 +61,7 @@ export const useComposeAttachments = ({
 		complete: (outboxMessageId, outboxAttachmentId) =>
 			completeMutation
 				.mutateAsync({ path: { outboxMessageId, outboxAttachmentId } })
-				.then(() => undefined),
+				.then((attachment) => ({ contentUrl: attachment.contentUrl })),
 		keep: (outboxMessageId, attachmentIds) =>
 			updateMutation
 				.mutateAsync({
@@ -98,6 +98,11 @@ export const useComposeAttachments = ({
 		remove: controller.remove,
 		load: controller.load,
 		reset: controller.reset,
+		owns: controller.owns,
+		isLoaded: controller.isLoaded,
+		refreshLinks: controller.refreshLinks,
+		storedContent: controller.storedContent,
+		onRemoved: controller.onRemoved,
 		blockingReason: controller.blockingReason(),
 	};
 };

package/src/hooks/useInlineImages.ts

@@ -0,0 +1,93 @@
+import type { RemitImapOutboxAttachmentResponse } from "@remit/api-http-client/types.gen.ts";
+import type { InlineImagePlacement, InlineImages } from "@remit/ui/rich-text";
+import { useMemo, useRef } from "react";
+import { useAuthProvider } from "@/auth/provider";
+import {
+	attachmentFailureContent,
+	extractAttachmentFailureDetail,
+	extractAttachmentFailureReason,
+	fetchAttachment,
+} from "@/lib/attachment-download";
+import type { PushErrorInput } from "../components/ui/error-banners";
+import type { StoredContent } from "../lib/compose-attachment-controller";
+
+interface UseInlineImagesOptions {
+	attach: (files: File[], placement?: InlineImagePlacement) => Promise<void>;
+	owns: (contentId: string) => boolean;
+	isLoaded: () => boolean;
+	storedContent: (contentId: string) => StoredContent | null;
+	refreshLinks: () => Promise<void>;
+	onRemoved: (listener: (contentId: string) => void) => () => void;
+	draftAttachments: readonly RemitImapOutboxAttachmentResponse[];
+	pushError: (input: PushErrorInput) => string;
+}
+
+export const useInlineImages = (
+	options: UseInlineImagesOptions,
+): InlineImages => {
+	const { getToken } = useAuthProvider();
+	const latest = useRef({ ...options, getToken });
+	latest.current = { ...options, getToken };
+
+	return useMemo<InlineImages>(() => {
+		const beforeLoad = (contentId: string): StoredContent | null => {
+			const current = latest.current;
+			if (current.isLoaded()) return null;
+			return (
+				current.draftAttachments.find(
+					(attachment) => attachment.contentId === contentId,
+				) ?? null
+			);
+		};
+
+		const stored = (contentId: string): StoredContent | null =>
+			latest.current.storedContent(contentId) ?? beforeLoad(contentId);
+
+		const fetchStored = (content: StoredContent): Promise<string> =>
+			fetchAttachment(content.contentUrl, latest.current.getToken).then(
+				(blob) =>
+					URL.createObjectURL(new Blob([blob], { type: content.contentType })),
+			);
+
+		const fetchRenewed = (contentId: string): Promise<string> =>
+			latest.current.refreshLinks().then(() => {
+				const renewed = stored(contentId);
+				if (!renewed) {
+					throw new Error("the file is no longer on this draft");
+				}
+				return fetchStored(renewed);
+			});
+
+		return {
+			attach: (files, placement) => {
+				void latest.current.attach(files, placement);
+			},
+			owns: (contentId) =>
+				latest.current.owns(contentId) || beforeLoad(contentId) !== null,
+			onRemoved: (listener) => latest.current.onRemoved(listener),
+			resolve: (contentId) => {
+				const content = stored(contentId);
+				if (!content) return Promise.resolve(null);
+				return fetchStored(content)
+					.catch((error: unknown) => {
+						if (extractAttachmentFailureReason(error) !== "link-expired") {
+							throw error;
+						}
+						return fetchRenewed(contentId);
+					})
+					.catch((error: unknown) => {
+						const reason = extractAttachmentFailureReason(error);
+						latest.current.pushError({
+							...attachmentFailureContent(
+								reason,
+								content.filename,
+								extractAttachmentFailureDetail(error),
+							),
+							error: reason === "generic" ? error : undefined,
+						});
+						return null;
+					});
+			},
+		};
+	}, []);
+};

package/src/lib/compose-attachment-controller.test.ts

@@ -55,6 +55,7 @@ const createServer = () => {
 		},
 		complete: async (_draft, outboxAttachmentId) => {
 			completed.push(outboxAttachmentId);
+			return { contentUrl: `https://content.test/${outboxAttachmentId}` };
 		},
 		keep: async (_draft, attachmentIds) => {
 			keeps.push(attachmentIds);
@@ -66,12 +67,20 @@ const createServer = () => {
 		},
 	};
 
+	const refuseMint = (filename: string, error: unknown) => {
+		const answer = mints.get(filename);
+		if (!answer) throw new Error(`no reservation asked for ${filename}`);
+		answer.reject(error);
+	};
+
 	const answerMint = (filename: string, outboxAttachmentId: string) => {
 		const answer = mints.get(filename);
 		if (!answer) throw new Error(`no reservation asked for ${filename}`);
 		answer.resolve({
 			outboxAttachmentId,
 			filename,
+			contentType: "application/octet-stream",
+			contentId: `${outboxAttachmentId}@test`,
 			uploadUrl: `https://upload.test/${outboxAttachmentId}`,
 		});
 	};
@@ -79,6 +88,7 @@ const createServer = () => {
 	return {
 		transport,
 		answerMint,
+		refuseMint,
 		onDraft,
 		put,
 		completed,
@@ -128,6 +138,106 @@ describe("ComposeAttachmentController", () => {
 		assert.equal(controller.blockingReason(), undefined);
 	});
 
+	it("hands the content-id to whoever attached the file once it is stored", async () => {
+		const { server, controller } = setup();
+		const stored: [string, string][] = [];
+		const shot = file("shot.png");
+
+		const attaching = controller.attach([shot], {
+			stored: (attached, contentId) => {
+				stored.push([attached.name, contentId]);
+			},
+			failed: () => {
+				throw new Error("a stored file was reported failed");
+			},
+		});
+		await settle();
+		assert.deepEqual(stored, [], "named before the bytes were stored");
+		server.answerMint("shot.png", "att-shot");
+		await attaching;
+
+		assert.deepEqual(stored, [["shot.png", "att-shot@test"]]);
+		assert.deepEqual(controller.storedContent("att-shot@test"), {
+			filename: "shot.png",
+			contentType: "application/octet-stream",
+			contentUrl: "https://content.test/att-shot",
+		});
+	});
+
+	it("tells whoever attached a refused file that it did not land, and keeps the refusal on its row", async () => {
+		const { server, controller } = setup();
+		const failed: string[] = [];
+
+		const attaching = controller.attach([file("huge.png")], {
+			stored: () => {
+				throw new Error("a refused file was reported stored");
+			},
+			failed: (attached) => {
+				failed.push(attached.name);
+			},
+		});
+		await settle();
+		server.refuseMint("huge.png", {
+			code: "attachment_rejected",
+			reason: "FileTooLarge",
+			message: '"huge.png" is 30.0 MB, over the 25.0 MB a message can carry.',
+		});
+		await attaching;
+
+		assert.deepEqual(failed, ["huge.png"]);
+		assert.deepEqual(rowFor(controller, "huge.png")?.state, {
+			status: "failed",
+			reason: '"huge.png" is 30.0 MB, over the 25.0 MB a message can carry.',
+			retryable: false,
+		});
+	});
+
+	it("names the content-id of a file once the server has dropped it", async () => {
+		const { server, controller } = setup();
+		const removed: string[] = [];
+		controller.onRemoved((contentId) => removed.push(contentId));
+
+		const attaching = controller.attach([file("shot.png")]);
+		await settle();
+		server.answerMint("shot.png", "att-shot");
+		await attaching;
+		await controller.remove(controller.getSnapshot()[0].key);
+
+		assert.deepEqual(removed, ["att-shot@test"]);
+		assert.equal(controller.owns("att-shot@test"), false);
+	});
+
+	it("keeps a file attached while the draft it joins was still loading", async () => {
+		const { server, controller } = setup();
+
+		const attaching = controller.attach([file("minutes.pdf")]);
+		await settle();
+		controller.load(DRAFT, [
+			{
+				outboxAttachmentId: "att-earlier",
+				outboxMessageId: DRAFT,
+				filename: "agenda.pdf",
+				contentType: "application/pdf",
+				sizeBytes: 5,
+				state: "Stored",
+				contentId: "att-earlier@remit",
+				contentUrl: "https://content.test/att-earlier",
+			},
+		]);
+		server.answerMint("minutes.pdf", "att-minutes");
+		await attaching;
+
+		assert.deepEqual(
+			controller
+				.getSnapshot()
+				.map((item) => [item.filename, item.state.status]),
+			[
+				["agenda.pdf", "attached"],
+				["minutes.pdf", "attached"],
+			],
+		);
+	});
+
 	it("takes a file removed while its reservation is out off the draft, and never uploads it", async () => {
 		const { server, controller } = setup();
 

package/src/lib/compose-attachment-controller.ts

@@ -12,9 +12,26 @@ export type DraftForAttachment =
 export interface MintedAttachment {
 	outboxAttachmentId: string;
 	filename: string;
+	contentType: string;
+	contentId: string;
 	uploadUrl: string;
 }
 
+export interface CompletedAttachment {
+	contentUrl: string;
+}
+
+export interface AttachmentPlacement {
+	stored: (file: File, contentId: string) => void;
+	failed: (file: File) => void;
+}
+
+export interface StoredContent {
+	filename: string;
+	contentType: string;
+	contentUrl: string;
+}
+
 /** The four requests a file on a draft is made of. Each throws on failure. */
 export interface AttachmentTransport {
 	mint: (outboxMessageId: string, file: File) => Promise<MintedAttachment>;
@@ -22,7 +39,7 @@ export interface AttachmentTransport {
 	complete: (
 		outboxMessageId: string,
 		outboxAttachmentId: string,
-	) => Promise<void>;
+	) => Promise<CompletedAttachment>;
 	keep: (outboxMessageId: string, attachmentIds: string[]) => Promise<void>;
 }
 
@@ -34,6 +51,10 @@ export interface ComposeAttachmentControllerDeps {
 interface Entry extends ComposeAttachmentItem {
 	serverId: string | null;
 	file: File | null;
+	placement: AttachmentPlacement | null;
+	contentId: string | null;
+	contentType: string;
+	contentUrl: string | null;
 }
 
 interface AttachmentRejection {
@@ -91,6 +112,10 @@ const fromServer = (attachment: RemitImapOutboxAttachmentResponse): Entry => ({
 	key: attachment.outboxAttachmentId,
 	serverId: attachment.outboxAttachmentId,
 	file: null,
+	placement: null,
+	contentId: attachment.contentId,
+	contentType: attachment.contentType,
+	contentUrl: attachment.contentUrl,
 	filename: attachment.filename,
 	sizeBytes: attachment.sizeBytes,
 	state:
@@ -124,6 +149,8 @@ export class ComposeAttachmentController {
 	private readonly inFlight = new Map<string, AbortController>();
 	private readonly mintedAfterRemoval = new Map<string, string>();
 	private readonly removing = new Map<string, string>();
+	private readonly removedListeners = new Set<(contentId: string) => void>();
+	private loaded = false;
 
 	constructor(private readonly deps: ComposeAttachmentControllerDeps) {}
 
@@ -134,6 +161,47 @@ export class ComposeAttachmentController {
 
 	getSnapshot = (): ComposeAttachmentItem[] => this.snapshot;
 
+	owns = (contentId: string): boolean =>
+		this.entries.some((entry) => entry.contentId === contentId);
+
+	storedContent = (contentId: string): StoredContent | null => {
+		const entry = this.entries.find(
+			(candidate) =>
+				candidate.contentId === contentId && candidate.contentUrl !== null,
+		);
+		if (!entry?.contentUrl) return null;
+		return {
+			filename: entry.filename,
+			contentType: entry.contentType,
+			contentUrl: entry.contentUrl,
+		};
+	};
+
+	isLoaded = (): boolean => this.loaded;
+
+	refreshLinks = (
+		attachments: readonly RemitImapOutboxAttachmentResponse[],
+	): void => {
+		const links = new Map(
+			attachments.map((attachment) => [
+				attachment.outboxAttachmentId,
+				attachment.contentUrl,
+			]),
+		);
+		this.set(
+			this.entries.map((entry) => {
+				const contentUrl =
+					entry.serverId === null ? undefined : links.get(entry.serverId);
+				return contentUrl === undefined ? entry : { ...entry, contentUrl };
+			}),
+		);
+	};
+
+	onRemoved = (listener: (contentId: string) => void): (() => void) => {
+		this.removedListeners.add(listener);
+		return () => this.removedListeners.delete(listener);
+	};
+
 	blockingReason = (): string | undefined => {
 		const [removing] = this.removing.values();
 		if (removing !== undefined) return `Removing "${removing}"…`;
@@ -210,6 +278,8 @@ export class ComposeAttachmentController {
 			this.patch(generation, key, {
 				serverId: minted.outboxAttachmentId,
 				filename: minted.filename,
+				contentId: minted.contentId,
+				contentType: minted.contentType,
 			});
 		}
 		settle();
@@ -232,19 +302,29 @@ export class ComposeAttachmentController {
 
 		const completed = await transport
 			.complete(outboxMessageId, minted.outboxAttachmentId)
-			.then(
-				() => true,
-				(error: unknown) => {
-					this.patch(generation, key, {
-						state: refusalOf(minted.filename, error),
-					});
-					return false;
-				},
-			);
-		if (!completed || signal.aborted) return;
-		this.patch(generation, key, { state: ATTACHED });
+			.catch((error: unknown) => {
+				this.patch(generation, key, {
+					state: refusalOf(minted.filename, error),
+				});
+				return null;
+			});
+		if (completed === null || signal.aborted) return;
+		this.patch(generation, key, {
+			state: ATTACHED,
+			contentUrl: completed.contentUrl,
+		});
+		if (generation !== this.generation) return;
+		this.entries
+			.find((entry) => entry.key === key)
+			?.placement?.stored(file, minted.contentId);
 	};
 
+	private settleFailure(generation: number, key: string, file: File): void {
+		if (generation !== this.generation) return;
+		const entry = this.entries.find((candidate) => candidate.key === key);
+		if (entry?.state.status === "failed") entry.placement?.failed(file);
+	}
+
 	private run = async (
 		generation: number,
 		key: string,
@@ -254,6 +334,7 @@ export class ComposeAttachmentController {
 	): Promise<void> => {
 		await this.upload(generation, key, file, outboxMessageId, signal);
 		if (this.inFlight.get(key)?.signal === signal) this.inFlight.delete(key);
+		this.settleFailure(generation, key, file);
 	};
 
 	/**
@@ -282,7 +363,10 @@ export class ComposeAttachmentController {
 			);
 	};
 
-	attach = async (files: File[]): Promise<void> => {
+	attach = async (
+		files: File[],
+		placement?: AttachmentPlacement,
+	): Promise<void> => {
 		const generation = this.generation;
 		const added = files.map((file) => {
 			this.nextKey += 1;
@@ -290,6 +374,10 @@ export class ComposeAttachmentController {
 				key: `local-${this.nextKey}`,
 				serverId: null,
 				file,
+				placement: placement ?? null,
+				contentId: null,
+				contentType: file.type || "application/octet-stream",
+				contentUrl: null,
 				filename: file.name,
 				sizeBytes: file.size,
 				state: UPLOADING,
@@ -302,11 +390,12 @@ export class ComposeAttachmentController {
 
 		const draft = await this.deps.ensureDraft();
 		if (draft.outcome === "refused") {
-			for (const { entry } of added) {
+			for (const { entry, file } of added) {
 				this.inFlight.delete(entry.key);
 				this.patch(generation, entry.key, {
 					state: failed(draft.reason, true),
 				});
+				this.settleFailure(generation, entry.key, file);
 			}
 			return;
 		}
@@ -379,7 +468,12 @@ export class ComposeAttachmentController {
 		this.set(this.entries);
 		const serverId = entry.serverId ?? this.mintedAfterRemoval.get(key) ?? null;
 		this.mintedAfterRemoval.delete(key);
-		if (failure === null || generation !== this.generation) return;
+		if (generation !== this.generation) return;
+		if (failure === null) {
+			if (entry.contentId === null) return;
+			for (const listener of this.removedListeners) listener(entry.contentId);
+			return;
+		}
 		if (serverId === null) return;
 		this.set([
 			...this.entries,
@@ -400,7 +494,16 @@ export class ComposeAttachmentController {
 		attachments: readonly RemitImapOutboxAttachmentResponse[],
 	): void => {
 		this.draftId = outboxMessageId;
-		this.set(attachments.map(fromServer));
+		this.loaded = true;
+		const listed = new Set(
+			attachments.map((attachment) => attachment.outboxAttachmentId),
+		);
+		const attachedHere = this.entries.filter(
+			(entry) =>
+				entry.file !== null &&
+				(entry.serverId === null || !listed.has(entry.serverId)),
+		);
+		this.set([...attachments.map(fromServer), ...attachedHere]);
 	};
 
 	reset = (outboxMessageId: string | undefined): void => {
@@ -410,6 +513,7 @@ export class ComposeAttachmentController {
 		this.mintedAfterRemoval.clear();
 		this.removing.clear();
 		this.draftId = outboxMessageId;
+		this.loaded = false;
 		this.set([]);
 	};
 }