@remit/web-client 0.0.272 → 0.0.274

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.272",
+  "version": "0.0.274",
   "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/mail/BlockedImagesNotice.render.test.ts

@@ -1,10 +1,17 @@
 /**
  * React-render smoke test for `BlockedImagesNotice` — the privacy "images
- * blocked" bar extracted from `MessageBody`. Pins the never-disable-buttons
- * rule (#943): the "Always trust" button stays active while the trust toggle
- * is in flight. It must NOT render `disabled`; the in-flight state is reflected
- * via `aria-busy` and a pending label instead, so the control stays focusable
- * and clickable (the handler no-ops the second click on the consumer side).
+ * blocked" bar extracted from `MessageBody`. Pins two rules.
+ *
+ * The never-disable-buttons rule (#943): the "Always trust" button stays active
+ * while the trust toggle is in flight. It must NOT render `disabled`; the
+ * in-flight state is reflected via `aria-busy` and a pending label instead, so
+ * the control stays focusable and clickable (the handler no-ops the second
+ * click on the consumer side).
+ *
+ * The blocked-sender rule (#352): `BlockedFlag` says images never load "even on
+ * explicit click", so for a blocked sender the load affordances are absent
+ * rather than disabled, and the bar states the reason so an image-free message
+ * is never silent about why.
  *
  * Uses `react-dom/server`'s `renderToString` so the assertion runs without
  * jsdom/happy-dom (no new deps), matching `MessageBodyErrorBanner.render.test`.
@@ -26,6 +33,7 @@ const render = (
 			blockedImageCount: 3,
 			canAlwaysTrust: true,
 			isTrustPending: false,
+			isSenderBlocked: false,
 			onLoadOnce: noop,
 			onAlwaysTrust: noop,
 			...overrides,
@@ -63,3 +71,44 @@ describe("BlockedImagesNotice — never-disable the Always trust button (#943)",
 		assert.match(html, /<button\b[^>]*>Load once<\/button>/);
 	});
 });
+
+describe("BlockedImagesNotice — a blocked sender gets no way in (#352)", () => {
+	it("renders no load affordance at all for a blocked sender", () => {
+		const html = render({ isSenderBlocked: true });
+		assert.doesNotMatch(
+			html,
+			/<button/,
+			"blocked means never load, even on explicit click — the buttons are absent",
+		);
+	});
+
+	it("states that the sender is blocked, so an image-free message is not silent", () => {
+		const html = render({ isSenderBlocked: true });
+		assert.match(html, /you blocked this sender/);
+		assert.match(html, /3 images hidden/);
+	});
+
+	it("offers nothing to disable — absence, not a dead control", () => {
+		const html = render({ isSenderBlocked: true });
+		assert.doesNotMatch(
+			html,
+			/<(?:button|a|input|select|textarea)\b|\brole="button"|\btabindex=/,
+			"a greyed-out control still reads as 'try again'; the bar carries no interactive element at all",
+		);
+		assert.doesNotMatch(html, /Load once/);
+		assert.doesNotMatch(html, /Always trust/);
+	});
+
+	it("stays blocked when the sender is somehow trusted as well", () => {
+		const html = render({ isSenderBlocked: true, canAlwaysTrust: true });
+		assert.doesNotMatch(html, /<button/);
+		assert.match(html, /you blocked this sender/);
+	});
+
+	it("singularizes the count", () => {
+		assert.match(
+			render({ isSenderBlocked: true, blockedImageCount: 1 }),
+			/1 image hidden/,
+		);
+	});
+});

package/src/components/mail/BlockedImagesNotice.tsx

@@ -2,40 +2,62 @@ interface BlockedImagesNoticeProps {
 	blockedImageCount: number;
 	canAlwaysTrust: boolean;
 	isTrustPending: boolean;
+	/**
+	 * The From-address carries the `blocked` flag. Blocking is a stronger
+	 * instruction than "not trusted": images never load, "even on explicit
+	 * click", so the bar states why the message is image-free instead of
+	 * offering a way past it. The affordances are absent, never disabled — a
+	 * dead button reads as broken (#943).
+	 */
+	isSenderBlocked: boolean;
 	onLoadOnce: () => void;
 	onAlwaysTrust: () => void;
 }
 
+const noticeCopy = (
+	blockedImageCount: number,
+	isSenderBlocked: boolean,
+): string => {
+	const images = `${blockedImageCount} image${blockedImageCount > 1 ? "s" : ""}`;
+	if (isSenderBlocked) return `${images} hidden — you blocked this sender`;
+	return `${images} blocked for privacy`;
+};
+
 export const BlockedImagesNotice = ({
 	blockedImageCount,
 	canAlwaysTrust,
 	isTrustPending,
+	isSenderBlocked,
 	onLoadOnce,
 	onAlwaysTrust,
 }: BlockedImagesNoticeProps) => (
-	<div className="mb-3 flex items-center justify-between rounded-md bg-surface-sunken/50 px-3 py-2 text-sm">
+	<div
+		data-testid="blocked-images-notice"
+		className="mb-3 flex items-center justify-between rounded-md bg-surface-sunken/50 px-3 py-2 text-sm"
+	>
 		<span className="text-fg-muted">
-			{blockedImageCount} image{blockedImageCount > 1 ? "s" : ""} blocked for
-			privacy
+			{noticeCopy(blockedImageCount, isSenderBlocked)}
 		</span>
-		<div className="flex items-center gap-3">
-			<button
-				type="button"
-				onClick={onLoadOnce}
-				className="text-accent hover:underline"
-			>
-				Load once
-			</button>
-			{canAlwaysTrust && (
+		{!isSenderBlocked && (
+			<div className="flex items-center gap-3">
 				<button
 					type="button"
-					onClick={onAlwaysTrust}
-					aria-busy={isTrustPending}
-					className="text-accent hover:underline aria-busy:opacity-50"
+					onClick={onLoadOnce}
+					className="text-accent hover:underline"
 				>
-					{isTrustPending ? "Trusting…" : "Always trust"}
+					Load once
 				</button>
-			)}
-		</div>
+				{canAlwaysTrust && (
+					<button
+						type="button"
+						onClick={onAlwaysTrust}
+						aria-busy={isTrustPending}
+						className="text-accent hover:underline aria-busy:opacity-50"
+					>
+						{isTrustPending ? "Trusting…" : "Always trust"}
+					</button>
+				)}
+			</div>
+		)}
 	</div>
 );

package/src/components/mail/BulkRunProvider.tsx

@@ -149,7 +149,7 @@ export const BulkRunProvider = ({ children }: { children: ReactNode }) => {
 	// itself that does not make `start` its own dependency.
 	const startRef = useRef<BulkRunContextValue["start"]>(async () => ({
 		kind: "ran",
-		outcome: { done: 0, failedIds: [], cancelled: false },
+		outcome: { done: 0, failedIds: [], refused: 0, cancelled: false },
 	}));
 
 	/**
@@ -282,6 +282,19 @@ export const BulkRunProvider = ({ children }: { children: ReactNode }) => {
 						outcome.error,
 					),
 				);
+			} else if (outcome.refused > 0) {
+				// One banner for the run, not one per chunk: a select-all is walked a
+				// hundred ids at a time, and a refusal in each would stack banners
+				// until the surface caps them. The count is the run's own total.
+				pushError({
+					severity: "warning",
+					title:
+						outcome.refused > 1
+							? `Couldn't delete ${outcome.refused} of ${request.matched} messages yet`
+							: "Couldn't delete this message yet",
+					detail:
+						"Something else moved them while the delete was being prepared. They are back where they now sit — try again.",
+				});
 			}
 			// Nobody is left showing this run, so the ending is said where the user
 			// now is. A screen still reporting on it says it in place instead.

package/src/components/mail/MessageBody.blocked-sender.test.ts

@@ -0,0 +1,193 @@
+/**
+ * Image gating at the `MessageBody` seam (#352). `BlockedFlag` declares that a
+ * blocked sender's images never load "even on explicit click", and Settings >
+ * Senders promises the same. Blocked therefore suppresses auto-load AND removes
+ * the manual load affordances, and outranks `trusted` when both are set.
+ *
+ * Renders through the real pipeline — sanitizer, blocked-image count, notice —
+ * against the jsdom harness, so the assertions read the DOM the user gets.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { MessageBody } from "./MessageBody";
+
+let harness: DomHarness | undefined;
+
+// The sandboxed frame measures itself once the iframe loads. jsdom fires that
+// load but has no ResizeObserver, and the resulting ReferenceError is raised
+// inside a listener where no assertion can see it.
+(globalThis as { ResizeObserver?: unknown }).ResizeObserver = class {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+};
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+const MARKETING_HTML = `
+<div>
+	<img src="https://tracker.example/hero.png" alt="Hero" />
+	<p>Up to 40% off everything this weekend.</p>
+	<img src="https://tracker.example/pixel.gif" alt="" />
+</div>
+`;
+
+// Every remote-image vector an email can reach for, not just `img src`.
+const MULTI_VECTOR_HTML = `
+<div>
+	<img src="https://tracker.example/hero.png" srcset="https://tracker.example/hero@2x.png 2x" alt="Hero" />
+	<picture>
+		<source srcset="https://tracker.example/wide.png" type="image/png" />
+		<img src="https://tracker.example/narrow.png" alt="Deal" />
+	</picture>
+	<video poster="https://tracker.example/poster.jpg"><source src="https://tracker.example/clip.mp4" type="video/mp4" /></video>
+</div>
+`;
+
+const mount = (
+	flags: { isTrusted?: boolean; isBlocked?: boolean },
+	overrides: { html?: string; messageId?: string } = {},
+) => {
+	harness = createDomHarness();
+	harness.renderApp(
+		createElement(MessageBody, {
+			html: MARKETING_HTML,
+			messageId: "msg-1",
+			fromAddressId: "addr-1",
+			category: "marketing",
+			...flags,
+			...overrides,
+		}),
+	);
+	return harness;
+};
+
+const rerender = (
+	dom: DomHarness,
+	flags: { isTrusted?: boolean; isBlocked?: boolean },
+	overrides: { html?: string; messageId?: string } = {},
+) => {
+	dom.renderApp(
+		createElement(MessageBody, {
+			html: MARKETING_HTML,
+			messageId: "msg-1",
+			fromAddressId: "addr-1",
+			category: "marketing",
+			...flags,
+			...overrides,
+		}),
+	);
+};
+
+const frameHtml = (dom: DomHarness): string =>
+	dom.query<HTMLIFrameElement>("iframe")?.getAttribute("srcdoc") ?? "";
+
+// A blocked image keeps its original URL in `data-blocked-src` — only a live
+// `src=` means the browser will fetch it.
+const REMOTE_SRC = /\ssrc="https:\/\/tracker\.example\/hero\.png"/;
+
+describe("MessageBody image gating — blocked senders (#352)", () => {
+	it("never auto-loads images for a blocked sender", () => {
+		const dom = mount({ isBlocked: true });
+		assert.match(
+			frameHtml(dom),
+			/data-blocked-src/,
+			"a blocked sender's remote images must stay placeholders",
+		);
+		assert.doesNotMatch(frameHtml(dom), REMOTE_SRC);
+	});
+
+	it("offers no manual load affordance for a blocked sender", () => {
+		const dom = mount({ isBlocked: true });
+		assert.equal(
+			dom.queryAll("button").length,
+			0,
+			"never load, even on explicit click — the controls are absent, not disabled",
+		);
+		assert.doesNotMatch(dom.html(), /\bdisabled\b/);
+	});
+
+	it("says why the message has no images instead of going quiet", () => {
+		const dom = mount({ isBlocked: true });
+		assert.match(dom.text(), /2 images hidden/);
+		assert.match(dom.text(), /you blocked this sender/);
+	});
+
+	it("keeps images blocked when the sender is both blocked and trusted", () => {
+		const dom = mount({ isBlocked: true, isTrusted: true });
+		assert.match(frameHtml(dom), /data-blocked-src/);
+		assert.equal(dom.queryAll("button").length, 0);
+		assert.match(dom.text(), /you blocked this sender/);
+	});
+
+	it("emits no fetchable tracker URL through srcset, picture or poster either", () => {
+		const dom = mount({ isBlocked: true }, { html: MULTI_VECTOR_HTML });
+		// The placeholder swap parks the original `img src` in
+		// `data-blocked-src` for "load once"; anywhere else in the srcdoc, a
+		// tracker URL is a request the frame will make.
+		const live = frameHtml(dom).replace(/data-blocked-src="[^"]*"/g, "");
+		assert.doesNotMatch(
+			live,
+			/tracker\.example/,
+			"blocked means no remote image request, whichever attribute names it",
+		);
+		assert.match(
+			frameHtml(dom),
+			/data-blocked-src="https:\/\/tracker\.example/,
+		);
+	});
+});
+
+describe("MessageBody load-once is scoped to one message (#352)", () => {
+	it("drops the grant when the same instance is handed a different message", () => {
+		const dom = mount({});
+		dom.click(dom.byText("button", "Load once"));
+		assert.match(frameHtml(dom), REMOTE_SRC);
+
+		rerender(dom, {}, { messageId: "msg-2" });
+
+		assert.doesNotMatch(
+			frameHtml(dom),
+			REMOTE_SRC,
+			"a load-once decision belongs to the message it was taken on",
+		);
+		assert.match(frameHtml(dom), /data-blocked-src/);
+		assert.ok(dom.byText("button", "Load once"));
+	});
+
+	it("keeps the grant while the message stays the same", () => {
+		const dom = mount({});
+		dom.click(dom.byText("button", "Load once"));
+		rerender(dom, { isTrusted: false });
+		assert.match(frameHtml(dom), REMOTE_SRC);
+	});
+});
+
+describe("MessageBody image gating — the states blocking must not change", () => {
+	it("auto-loads a trusted sender's images and shows no notice", () => {
+		const dom = mount({ isTrusted: true });
+		assert.match(frameHtml(dom), REMOTE_SRC);
+		assert.doesNotMatch(frameHtml(dom), /data-blocked-src/);
+		assert.doesNotMatch(dom.text(), /hidden|blocked for privacy/);
+	});
+
+	it("still offers Load once and Always trust to a merely untrusted sender", () => {
+		const dom = mount({});
+		assert.match(frameHtml(dom), /data-blocked-src/);
+		assert.match(dom.text(), /2 images blocked for privacy/);
+		assert.ok(dom.byText("button", "Load once"));
+		assert.ok(dom.byText("button", "Always trust"));
+	});
+
+	it("loads the images once the untrusted sender's Load once is taken", () => {
+		const dom = mount({});
+		dom.click(dom.byText("button", "Load once"));
+		assert.match(frameHtml(dom), REMOTE_SRC);
+	});
+});

package/src/components/mail/MessageBody.tsx

@@ -47,9 +47,17 @@ interface MessageBodyProps {
 	/**
 	 * Whether the From-address has the `trusted` flag set. Trusted senders
 	 * auto-load images. The "Load images" bar is suppressed entirely for
-	 * trusted senders.
+	 * trusted senders. Ignored when `isBlocked` is set.
 	 */
 	isTrusted?: boolean;
+	/**
+	 * Whether the From-address has the `blocked` flag set. A blocked sender
+	 * never loads images, "even on explicit click" (`BlockedFlag`), so this
+	 * suppresses auto-load and removes the manual load affordances rather than
+	 * greying them out. Blocked outranks trusted: it is the more restrictive
+	 * instruction, and a sender carrying both is still blocked.
+	 */
+	isBlocked?: boolean;
 	/**
 	 * The current message id. Required for the body-content query cache key
 	 * and by `useToggleTrusted` for the optimistic cache patch.
@@ -99,13 +107,23 @@ export const MessageBody = ({
 	html,
 	text,
 	isTrusted = false,
+	isBlocked = false,
 	messageId,
 	fromAddressId,
 	category,
 	className,
 }: MessageBodyProps) => {
+	// "Load once" is a decision about one message. Reset it when the instance is
+	// handed a different message so the grant can't ride along — today every
+	// caller keys this component by message, which makes the leak unreachable,
+	// but the guarantee should hold structurally rather than by a caller's key.
 	const [allowImagesOnce, setAllowImagesOnce] = useState(false);
-	const allowImages = isTrusted || allowImagesOnce;
+	const [grantedFor, setGrantedFor] = useState(messageId);
+	if (grantedFor !== messageId) {
+		setGrantedFor(messageId);
+		setAllowImagesOnce(false);
+	}
+	const allowImages = !isBlocked && (isTrusted || allowImagesOnce);
 	const isDark = useIsDark();
 	// `useToggleTrusted` surfaces its own failure (banner + rollback) and a fatal
 	// 5xx escalates globally — no consumer-side error effect needed here.
@@ -197,6 +215,7 @@ export const MessageBody = ({
 					blockedImageCount={blockedImageCount}
 					canAlwaysTrust={canAlwaysTrust}
 					isTrustPending={isTrustPending}
+					isSenderBlocked={isBlocked}
 					onLoadOnce={() => setAllowImagesOnce(true)}
 					onAlwaysTrust={handleAlwaysTrust}
 				/>

package/src/components/mail/MessageCard.blocked-sender.test.ts

@@ -0,0 +1,246 @@
+/**
+ * Image gating at the `MessageCard` seam (#352). The expanded card resolves the
+ * From-address flags and hands them to the body: `blocked` is read there
+ * alongside `trusted`, and wins when both are set. Without that read the promise
+ * Settings > Senders makes — a blocked sender never loads images — has no reach
+ * into the one surface that renders mail.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapAddressFlags,
+	RemitImapDescribeMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import { makeThreadMessage } from "@/test-support/fixtures";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import { MessageCard } from "./MessageCard";
+
+const MAILBOX_ID = "mbx-inbox";
+const THREAD_ID = "thread-1";
+const MESSAGE_ID = "msg-1";
+const CONTENT_PATH = "/content/parts/1";
+
+const MARKETING_HTML = `<div><img src="https://tracker.example/hero.png" alt="Hero"><p>Sale ends Sunday.</p></div>`;
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+// The sandboxed frame measures itself once the iframe loads. jsdom fires that
+// load but has no ResizeObserver, and the resulting ReferenceError is raised
+// inside a listener where no assertion can see it.
+(globalThis as { ResizeObserver?: unknown }).ResizeObserver = class {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+};
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+const threadMessage = makeThreadMessage({
+	messageId: MESSAGE_ID,
+	threadId: THREAD_ID,
+	mailboxId: MAILBOX_ID,
+	subject: "Sale ends Sunday",
+	fromName: "Deals",
+	fromEmail: "deals@shop.example",
+	category: "marketing",
+	isRead: true,
+});
+
+const describeMessage = (
+	flags: RemitImapAddressFlags,
+): RemitImapDescribeMessageResponse =>
+	({
+		message: {
+			messageId: MESSAGE_ID,
+			mailboxId: MAILBOX_ID,
+			uid: 1,
+			rfc822Size: 512,
+			internalDate: 1_767_225_600_000,
+			status: "active",
+			syncStatus: "pending",
+		},
+		envelope: {
+			messageId: MESSAGE_ID,
+			date: 1_767_225_600_000,
+			subject: "Sale ends Sunday",
+			messageIdValue: "<deals-1@shop.example>",
+			from: [
+				{
+					addressId: "addr-deals",
+					displayName: "Deals",
+					normalizedEmail: "deals@shop.example",
+					addressRole: "from",
+					addressOrder: 0,
+					flags,
+				},
+			],
+			to: [],
+			cc: [],
+			bcc: [],
+			replyTo: [],
+			category: "marketing",
+			senderTrust: "unknown",
+		},
+		flags: ["\\Seen"],
+		bodyParts: [
+			{
+				bodyPartId: "part-1",
+				mediaType: "TEXT",
+				mediaSubtype: "HTML",
+				contentUrl: `http://localhost${CONTENT_PATH}`,
+				isMultipart: false,
+			},
+		],
+		references: [],
+	}) as unknown as RemitImapDescribeMessageResponse;
+
+const testRouter = (): AnyRouter => {
+	const rootRoute = createRootRoute({ component: () => createElement(Outlet) });
+	const mailboxRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail/$mailboxId",
+		validateSearch: (search: Record<string, unknown>) => search,
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "$threadId",
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: () =>
+			createElement(MessageCard, {
+				threadMessage,
+				isExpanded: true,
+				onToggle: () => undefined,
+				onToggleStar: () => undefined,
+			}),
+	});
+	const routeTree = rootRoute.addChildren([
+		mailboxRoute.addChildren([threadRoute.addChildren([messageRoute])]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({
+			initialEntries: [`/mail/${MAILBOX_ID}/${THREAD_ID}/${MESSAGE_ID}`],
+		}),
+	}) as unknown as AnyRouter;
+};
+
+const mount = async (flags: RemitImapAddressFlags): Promise<DomHarness> => {
+	http = mockFetch((call) => {
+		if (call.path === CONTENT_PATH) {
+			return new Response(MARKETING_HTML, {
+				status: 200,
+				headers: { "content-type": "text/html" },
+			});
+		}
+		if (call.path.endsWith(`/messages/${MESSAGE_ID}`)) {
+			return describeMessage(flags);
+		}
+		// `/config` answers its own shape. `accounts` is required by the contract,
+		// so a mock that hands back `{items: []}` for it is a body the API cannot
+		// produce, and anything reading it faithfully throws on a fixture rather
+		// than on a fault.
+		if (call.path.endsWith("/config")) {
+			return { accountConfig: {}, accounts: [] };
+		}
+		return { items: [] };
+	});
+
+	const router = testRouter();
+	await router.load();
+	const dom = createDomHarness();
+	harness = dom;
+	dom.renderApp(createElement(RouterProvider, { router }));
+	await dom.waitFor(
+		() => dom.query("iframe") !== null,
+		"the message body to render",
+	);
+	return dom;
+};
+
+const frameHtml = (dom: DomHarness): string =>
+	dom.query<HTMLIFrameElement>("iframe")?.getAttribute("srcdoc") ?? "";
+
+// A blocked image keeps its original URL in `data-blocked-src`; only a live
+// `src=` means the browser will fetch it.
+const REMOTE_SRC = /\ssrc="https:\/\/tracker\.example\/hero\.png"/;
+
+const notice = (dom: DomHarness) =>
+	dom.query('[data-testid="blocked-images-notice"]');
+
+// A boolean, not the node: an assertion that fails on a jsdom element makes the
+// runner serialize the whole tree and the process dies on memory, not on a diff.
+const hasTrustedBadge = (dom: DomHarness): boolean =>
+	dom.query('[data-testid="trusted-sender-badge"]') !== null;
+
+describe("MessageCard reads flags.blocked on the render path (#352)", () => {
+	it("keeps a blocked sender's images out and offers no way to load them", async () => {
+		const dom = await mount({ blocked: { value: true, setAt: 1 } });
+
+		assert.doesNotMatch(frameHtml(dom), REMOTE_SRC);
+		assert.match(frameHtml(dom), /data-blocked-src/);
+		assert.match(notice(dom)?.textContent ?? "", /you blocked this sender/);
+		assert.equal(
+			dom.queryAll('[data-testid="blocked-images-notice"] button').length,
+			0,
+			"never load, even on explicit click",
+		);
+	});
+
+	it("stays blocked when the sender carries both blocked and trusted", async () => {
+		const dom = await mount({
+			blocked: { value: true, setAt: 1 },
+			trusted: { value: true, setAt: 1 },
+		});
+
+		assert.doesNotMatch(frameHtml(dom), REMOTE_SRC);
+		assert.match(notice(dom)?.textContent ?? "", /you blocked this sender/);
+		assert.equal(
+			hasTrustedBadge(dom),
+			false,
+			"a trusted badge beside 'you blocked this sender' tells the user two opposite things",
+		);
+	});
+
+	it("still auto-loads a trusted sender's images", async () => {
+		const dom = await mount({ trusted: { value: true, setAt: 1 } });
+
+		assert.match(frameHtml(dom), REMOTE_SRC);
+		assert.equal(notice(dom), null);
+		assert.equal(hasTrustedBadge(dom), true);
+	});
+
+	it("still offers the load affordances to a merely untrusted sender", async () => {
+		const dom = await mount({});
+
+		assert.doesNotMatch(frameHtml(dom), REMOTE_SRC);
+		assert.match(notice(dom)?.textContent ?? "", /blocked for privacy/);
+		assert.ok(
+			dom.queryAll('[data-testid="blocked-images-notice"] button').length > 0,
+		);
+	});
+});