@remit/ui 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "files": [
     "src"

package/src/components/intelligence-panel.tsx

@@ -320,16 +320,22 @@ function QuickAction({
 	danger?: boolean;
 	onClick?: () => void;
 }) {
+	// No handler means the action cannot be serviced yet (the sender's address
+	// record has not resolved). Render it visibly unavailable rather than as a
+	// live button that swallows the click.
+	const disabled = onClick === undefined;
 	return (
 		<button
 			type="button"
 			onClick={onClick}
+			disabled={disabled}
 			className={cn(
 				"flex items-center gap-2 rounded-md border px-2 py-1 text-xs transition-colors",
 				active
 					? "border-accent-2 bg-accent-2-soft text-accent-2"
 					: "border-line text-fg-muted hover:border-line-strong hover:text-fg",
 				danger && !active && "text-danger hover:bg-danger-soft",
+				disabled && "cursor-not-allowed opacity-50 hover:border-line",
 			)}
 		>
 			{icon}
@@ -401,7 +407,12 @@ export function IntelligencePanel({
 					)}
 					<button
 						type="button"
-						className="ml-auto text-2xs text-accent hover:underline"
+						className={cn(
+							"ml-auto text-2xs text-accent hover:underline",
+							!actions?.onReclassify &&
+								"cursor-not-allowed opacity-50 hover:no-underline",
+						)}
+						disabled={!actions?.onReclassify}
 						onClick={actions?.onReclassify}
 					>
 						reclassify

package/src/components/isolated-email-frame.keys.test.ts

@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { isForwardableKey } from "./isolated-email-frame.js";
+
+describe("isForwardableKey", () => {
+	it("forwards the keys that move around the app", () => {
+		for (const key of [
+			"j",
+			"k",
+			"g",
+			"x",
+			"r",
+			"#",
+			"Enter",
+			"Escape",
+			"ArrowUp",
+			"ArrowDown",
+			"Home",
+			"End",
+		]) {
+			assert.equal(isForwardableKey(key), true, key);
+		}
+	});
+
+	it("keeps destructive keys inside the message body", () => {
+		// The replayed event carries no focused control, so the app routes what it
+		// recognises straight at the message list. Backspace while reading must not
+		// become a delete of the row behind the reader.
+		assert.equal(isForwardableKey("Backspace"), false);
+		assert.equal(isForwardableKey("Delete"), false);
+	});
+
+	it("keeps Space inside the message body", () => {
+		// Space belongs to reading the email, not to selecting rows behind it.
+		assert.equal(isForwardableKey(" "), false);
+	});
+
+	it("does not forward unknown named keys", () => {
+		assert.equal(isForwardableKey("F5"), false);
+		assert.equal(isForwardableKey("Tab"), false);
+		assert.equal(isForwardableKey("PageDown"), false);
+	});
+});

package/src/components/isolated-email-frame.tsx

@@ -104,6 +104,61 @@ const useMatchMedia = (query: string): boolean => {
 	return matches;
 };
 
+/** Named (non-character) keys worth replaying: moving around and closing. */
+const FORWARDED_NAMED_KEYS = new Set([
+	"Enter",
+	"Escape",
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End",
+]);
+
+/**
+ * Which keystrokes leave the frame. An allowlist rather than a denylist: the
+ * replayed event's target is the host window, so the app's keyboard layer sees
+ * no focused control and routes everything it recognises to the message list.
+ * Forwarding indiscriminately would therefore let Backspace pressed while
+ * reading delete the message under the cursor, and Space select it.
+ *
+ * Single characters (letters, digits, punctuation) carry the app's navigation
+ * and verb bindings and are safe to replay. Space is excluded: it belongs to
+ * reading the email, not to selecting rows behind it.
+ */
+export const isForwardableKey = (key: string): boolean => {
+	if (key === " ") return false;
+	if (key.length === 1) return true;
+	return FORWARDED_NAMED_KEYS.has(key);
+};
+
+/**
+ * Keydown events raised inside an iframe never reach the embedding window, so
+ * once the reader clicks into the message body every app shortcut goes dead —
+ * j/k, arrows, Esc, the lot (#43). Replay the allowlisted keystrokes on the host
+ * window so the app's one keyboard layer keeps hearing them. The replay is a
+ * copy: the original event is untouched, so selecting and scrolling inside the
+ * email still behave normally. Modifier combos stay with the frame and the
+ * browser.
+ */
+const forwardKeyDown = (event: KeyboardEvent) => {
+	if (event.metaKey || event.ctrlKey || event.altKey) return;
+	if (!isForwardableKey(event.key)) return;
+	const doc = (event.currentTarget ?? event.target) as Document | null;
+	const host = doc?.defaultView?.parent;
+	if (!host || host === doc?.defaultView) return;
+	host.dispatchEvent(
+		new KeyboardEvent("keydown", {
+			key: event.key,
+			code: event.code,
+			shiftKey: event.shiftKey,
+			bubbles: true,
+			cancelable: true,
+		}),
+	);
+};
+
 /**
  * Render untrusted (sanitized) email HTML in a sandboxed iframe that fits the
  * viewport width on mobile and isolates the email's CSS from the app chrome.
@@ -175,6 +230,7 @@ export const IsolatedEmailFrame = ({
 		};
 
 		let observer: ResizeObserver | undefined;
+		let keyDoc: Document | undefined;
 		const handleLoad = () => {
 			measure();
 			const doc = iframe.contentDocument;
@@ -182,11 +238,14 @@ export const IsolatedEmailFrame = ({
 			observer = new ResizeObserver(measure);
 			observer.observe(doc.body);
 			if (doc.documentElement) observer.observe(doc.documentElement);
+			doc.addEventListener("keydown", forwardKeyDown);
+			keyDoc = doc;
 		};
 
 		iframe.addEventListener("load", handleLoad);
 		return () => {
 			iframe.removeEventListener("load", handleLoad);
+			keyDoc?.removeEventListener("keydown", forwardKeyDown);
 			observer?.disconnect();
 		};
 	}, []);

package/src/components/rescue-candidate-row.tsx

@@ -25,6 +25,12 @@ export interface RescueCandidateRowProps {
 	candidate: RescueCandidate;
 	selected: boolean;
 	onToggle: () => void;
+	/**
+	 * Drop the sender identity and trust chip from the row. Set when the row sits
+	 * under a sender group that already states both — repeating them per message
+	 * is the noise the grouping exists to remove.
+	 */
+	hideSender?: boolean;
 }
 
 /**
@@ -37,6 +43,7 @@ export function RescueCandidateRow({
 	candidate,
 	selected,
 	onToggle,
+	hideSender = false,
 }: RescueCandidateRowProps) {
 	const {
 		senderName,
@@ -53,6 +60,7 @@ export function RescueCandidateRow({
 		<label
 			className={cn(
 				"flex w-full cursor-pointer items-start gap-3 px-3 py-2.5 text-left transition-colors",
+				hideSender && "pl-11",
 				selected ? "bg-positive/10" : "bg-surface hover:bg-surface-sunken",
 			)}
 		>
@@ -60,34 +68,40 @@ export function RescueCandidateRow({
 				className="mt-0.5"
 				checked={selected}
 				onChange={onToggle}
-				aria-label={`${selected ? "Deselect" : "Select"} message from ${senderName}`}
+				aria-label={`${selected ? "Deselect" : "Select"} ${hideSender ? subject : `message from ${senderName}`}`}
 			/>
 
-			<Avatar name={senderName} email={senderAddress} size="sm" />
+			{!hideSender && (
+				<Avatar name={senderName} email={senderAddress} size="sm" />
+			)}
 
 			<span className="min-w-0 flex-1">
-				<span className="flex items-center gap-1.5">
-					<span className="truncate text-sm font-medium text-fg">
-						{senderName}
-					</span>
-					{senderTrust && (
-						<SenderTrustIndicator senderTrust={senderTrust} size="sm" />
-					)}
-					<span className="truncate text-2xs text-fg-subtle">
-						{senderAddress}
+				{!hideSender && (
+					<span className="flex items-center gap-1.5">
+						<span className="truncate text-sm font-medium text-fg">
+							{senderName}
+						</span>
+						{senderTrust && (
+							<SenderTrustIndicator senderTrust={senderTrust} size="sm" />
+						)}
+						<span className="truncate text-2xs text-fg-subtle">
+							{senderAddress}
+						</span>
 					</span>
-				</span>
+				)}
 				<span className="block truncate text-sm text-fg-muted">{subject}</span>
 				<span className="block line-clamp-1 text-xs text-fg-subtle">
 					{snippet}
 				</span>
-				<span className="mt-1.5 flex flex-wrap items-center gap-1.5">
-					<Badge tone="positive">
-						<ShieldCheck className="size-3" aria-hidden />
-						{trustReason}
-					</Badge>
-					<span className="text-2xs text-fg-subtle">{trustSubReason}</span>
-				</span>
+				{!hideSender && (
+					<span className="mt-1.5 flex flex-wrap items-center gap-1.5">
+						<Badge tone="positive">
+							<ShieldCheck className="size-3" aria-hidden />
+							{trustReason}
+						</Badge>
+						<span className="text-2xs text-fg-subtle">{trustSubReason}</span>
+					</span>
+				)}
 			</span>
 		</label>
 	);

package/src/components/rescue-from-spam-flow.tsx

@@ -1,5 +1,5 @@
 import { CheckCircle2, HelpCircle, ShieldCheck } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Banner } from "./banner.js";
 import { BottomSheet } from "./bottom-sheet.js";
 import { Button } from "./button.js";
@@ -7,10 +7,12 @@ import {
 	type MoveMailboxOption,
 	MoveMailboxPicker,
 } from "./move-mailbox-picker.js";
+import type { RescueCandidate } from "./rescue-candidate-row.js";
 import {
-	type RescueCandidate,
-	RescueCandidateRow,
-} from "./rescue-candidate-row.js";
+	groupRescueCandidatesBySender,
+	type RescueSenderGroup,
+	RescueSenderGroupRow,
+} from "./rescue-sender-group.js";
 
 type Step = "review" | "destination" | "done";
 
@@ -60,6 +62,7 @@ function ReviewStep({
 	candidates,
 	selected,
 	onToggle,
+	onToggleGroup,
 	onSelectAll,
 	onSelectNone,
 	onContinue,
@@ -68,6 +71,7 @@ function ReviewStep({
 	candidates: RescueCandidate[];
 	selected: Set<string>;
 	onToggle: (id: string) => void;
+	onToggleGroup: (group: RescueSenderGroup, nextSelected: boolean) => void;
 	onSelectAll: () => void;
 	onSelectNone: () => void;
 	onContinue: () => void;
@@ -75,6 +79,10 @@ function ReviewStep({
 }) {
 	const [showWhy, setShowWhy] = useState(false);
 	const count = selected.size;
+	const groups = useMemo(
+		() => groupRescueCandidatesBySender(candidates),
+		[candidates],
+	);
 	return (
 		<div className="flex min-h-0 flex-col">
 			<div className="px-row-inset pb-2 pt-1">
@@ -94,8 +102,8 @@ function ReviewStep({
 					</Button>
 				</div>
 				<p className="mt-1 text-2xs text-fg-subtle">
-					These look safe — from senders we can verify. Uncheck anything that
-					belongs in Spam.
+					These look safe — from senders we can verify. Uncheck any sender that
+					belongs in Spam, or open a sender to pick individual messages.
 				</p>
 				{showWhy && (
 					<div className="mt-2">
@@ -106,7 +114,7 @@ function ReviewStep({
 
 			<div className="flex items-center justify-between px-row-inset pb-1.5">
 				<span className="text-2xs font-medium text-fg-muted">
-					{`${count} of ${candidates.length} selected`}
+					{`${count} of ${candidates.length} selected · ${groups.length} ${groups.length === 1 ? "sender" : "senders"}`}
 				</span>
 				<span className="flex gap-1">
 					<Button variant="ghost" size="sm" onClick={onSelectAll}>
@@ -119,12 +127,13 @@ function ReviewStep({
 			</div>
 
 			<div className="min-h-0 flex-1 divide-y divide-line overflow-y-auto border-y border-line">
-				{candidates.map((candidate) => (
-					<RescueCandidateRow
-						key={candidate.id}
-						candidate={candidate}
-						selected={selected.has(candidate.id)}
-						onToggle={() => onToggle(candidate.id)}
+				{groups.map((group) => (
+					<RescueSenderGroupRow
+						key={group.key}
+						group={group}
+						selected={selected}
+						onToggleGroup={onToggleGroup}
+						onToggleMessage={onToggle}
 					/>
 				))}
 			</div>
@@ -300,6 +309,17 @@ export function RescueFromSpamFlow({
 		});
 	};
 
+	const toggleGroup = (group: RescueSenderGroup, nextSelected: boolean) => {
+		setSelected((prev) => {
+			const next = new Set(prev);
+			for (const message of group.messages) {
+				if (nextSelected) next.add(message.id);
+				else next.delete(message.id);
+			}
+			return next;
+		});
+	};
+
 	const move = () => {
 		const ids = Array.from(selected);
 		setMovedCount(ids.length);
@@ -314,6 +334,7 @@ export function RescueFromSpamFlow({
 					candidates={candidates}
 					selected={selected}
 					onToggle={toggle}
+					onToggleGroup={toggleGroup}
 					onSelectAll={() => setSelected(new Set(candidates.map((c) => c.id)))}
 					onSelectNone={() => setSelected(new Set())}
 					onContinue={() => setStep("destination")}

package/src/components/rescue-sender-group.render.test.ts

@@ -0,0 +1,67 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { RescueCandidate } from "./rescue-candidate-row.js";
+import {
+	groupRescueCandidatesBySender,
+	RescueSenderGroupRow,
+} from "./rescue-sender-group.js";
+
+const noop = () => {};
+
+const candidate = (id: string, subject: string): RescueCandidate => ({
+	id,
+	senderName: "Shop News",
+	senderAddress: "news@shop.com",
+	subject,
+	snippet: "",
+	trustReason: "We can verify this sender",
+	trustSubReason: "You've emailed them before",
+	senderTrust: "wellknown",
+});
+
+const [group] = groupRescueCandidatesBySender([
+	candidate("a", "Autumn sale"),
+	candidate("b", "Winter sale"),
+]);
+
+const render = (selected: Set<string>): string =>
+	renderToString(
+		createElement(RescueSenderGroupRow, {
+			group,
+			selected,
+			onToggleGroup: noop,
+			onToggleMessage: noop,
+		}),
+	);
+
+describe("RescueSenderGroupRow", () => {
+	it("states the sender once and the message count instead of repeating rows", () => {
+		const html = render(new Set(["a", "b"]));
+		assert.match(html, /Shop News/);
+		assert.match(html, /2 messages/);
+		assert.equal(
+			html.split("news@shop.com").length - 1,
+			1,
+			"the address appears once per sender, not once per message",
+		);
+	});
+
+	it("keeps the individual messages collapsed until asked for", () => {
+		const html = render(new Set(["a", "b"]));
+		assert.doesNotMatch(html, /Autumn sale/);
+		assert.match(html, /aria-expanded="false"/);
+	});
+
+	it("offers one checkbox covering every message from the sender", () => {
+		const html = render(new Set(["a", "b"]));
+		assert.match(html, /Deselect all 2 messages from Shop News/);
+	});
+
+	it("shows a partial selection as indeterminate, not as unselected", () => {
+		const html = render(new Set(["a"]));
+		assert.doesNotMatch(html, /checked=""/);
+		assert.match(html, /Select all 2 messages from Shop News/);
+	});
+});

package/src/components/rescue-sender-group.test.ts

@@ -0,0 +1,91 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { RescueCandidate } from "./rescue-candidate-row.js";
+import {
+	groupRescueCandidatesBySender,
+	senderGroupSelectionState,
+} from "./rescue-sender-group.js";
+
+const candidate = (
+	id: string,
+	senderAddress: string,
+	senderName = senderAddress,
+): RescueCandidate => ({
+	id,
+	senderName,
+	senderAddress,
+	subject: `subject ${id}`,
+	snippet: "",
+	trustReason: "We can verify this sender",
+	trustSubReason: "You've emailed them before",
+	senderTrust: "wellknown",
+});
+
+describe("groupRescueCandidatesBySender", () => {
+	it("collapses a queue into one entry per sender", () => {
+		const groups = groupRescueCandidatesBySender([
+			candidate("a", "news@shop.com"),
+			candidate("b", "mum@gmail.com"),
+			candidate("c", "news@shop.com"),
+			candidate("d", "news@shop.com"),
+		]);
+
+		assert.deepEqual(
+			groups.map((g) => [g.senderAddress, g.messages.length]),
+			[
+				["news@shop.com", 3],
+				["mum@gmail.com", 1],
+			],
+			"biggest sender first — that is where the review time goes",
+		);
+	});
+
+	it("treats a sender as one sender regardless of address casing", () => {
+		const groups = groupRescueCandidatesBySender([
+			candidate("a", "News@Shop.com"),
+			candidate("b", "news@shop.com"),
+		]);
+		assert.equal(groups.length, 1);
+		assert.equal(groups[0].messages.length, 2);
+	});
+
+	it("keeps arrival order between senders with the same message count", () => {
+		const groups = groupRescueCandidatesBySender([
+			candidate("a", "first@x.com"),
+			candidate("b", "second@x.com"),
+		]);
+		assert.deepEqual(
+			groups.map((g) => g.senderAddress),
+			["first@x.com", "second@x.com"],
+		);
+	});
+
+	it("falls back to the sender name when there is no address", () => {
+		const groups = groupRescueCandidatesBySender([
+			candidate("a", "", "Unknown sender"),
+			candidate("b", "", "Unknown sender"),
+		]);
+		assert.equal(groups.length, 1);
+	});
+
+	it("returns nothing for an empty queue", () => {
+		assert.deepEqual(groupRescueCandidatesBySender([]), []);
+	});
+});
+
+describe("senderGroupSelectionState", () => {
+	const [group] = groupRescueCandidatesBySender([
+		candidate("a", "news@shop.com"),
+		candidate("b", "news@shop.com"),
+	]);
+
+	it("reports all, some and none so the group checkbox can be tri-state", () => {
+		assert.equal(senderGroupSelectionState(group, new Set(["a", "b"])), "all");
+		assert.equal(senderGroupSelectionState(group, new Set(["a"])), "some");
+		assert.equal(senderGroupSelectionState(group, new Set()), "none");
+	});
+
+	it("ignores selections belonging to other senders", () => {
+		assert.equal(senderGroupSelectionState(group, new Set(["zz"])), "none");
+	});
+});

package/src/components/rescue-sender-group.tsx

@@ -0,0 +1,173 @@
+import { ChevronDown, ChevronRight, ShieldCheck } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Avatar } from "./avatar.js";
+import { Badge } from "./badge.js";
+import { Checkbox } from "./checkbox.js";
+import {
+	type RescueCandidate,
+	RescueCandidateRow,
+} from "./rescue-candidate-row.js";
+import { SenderTrustIndicator } from "./sender-trust-indicator.js";
+
+/** Every suspected-safe message from one sender, as one reviewable unit. */
+export interface RescueSenderGroup {
+	/**
+	 * Stable identity for the group: the lowercased sender address, falling back
+	 * to the lowercased sender name when a message carries no address. Treat it
+	 * as an opaque key — it is not guaranteed to be an email address.
+	 */
+	key: string;
+	senderName: string;
+	senderAddress: string;
+	trustReason: string;
+	trustSubReason: string;
+	senderTrust?: RescueCandidate["senderTrust"];
+	messages: RescueCandidate[];
+}
+
+/**
+ * Collapse the candidate list into one entry per sender.
+ *
+ * Trust is a property of the sender, not of the individual message, so a flat
+ * list makes the user answer the same question once per message — 342 messages
+ * from a few dozen senders is a few dozen real decisions padded out into
+ * hundreds of identical ones. Grouping restores the decision to its actual
+ * granularity.
+ *
+ * Groups are ordered by message count descending, so the senders that account
+ * for most of the queue are settled first; ties keep the order the messages
+ * arrived in.
+ */
+export const groupRescueCandidatesBySender = (
+	candidates: RescueCandidate[],
+): RescueSenderGroup[] => {
+	const groups = new Map<string, RescueSenderGroup>();
+	const order: string[] = [];
+
+	for (const candidate of candidates) {
+		const key = (candidate.senderAddress || candidate.senderName).toLowerCase();
+		const existing = groups.get(key);
+		if (existing) {
+			existing.messages.push(candidate);
+			continue;
+		}
+		groups.set(key, {
+			key,
+			senderName: candidate.senderName,
+			senderAddress: candidate.senderAddress,
+			trustReason: candidate.trustReason,
+			trustSubReason: candidate.trustSubReason,
+			senderTrust: candidate.senderTrust,
+			messages: [candidate],
+		});
+		order.push(key);
+	}
+
+	return order
+		.map((key) => groups.get(key) as RescueSenderGroup)
+		.sort((a, b) => b.messages.length - a.messages.length);
+};
+
+export type GroupSelectionState = "none" | "some" | "all";
+
+export const senderGroupSelectionState = (
+	group: RescueSenderGroup,
+	selected: Set<string>,
+): GroupSelectionState => {
+	const count = group.messages.filter((m) => selected.has(m.id)).length;
+	if (count === 0) return "none";
+	if (count === group.messages.length) return "all";
+	return "some";
+};
+
+export interface RescueSenderGroupRowProps {
+	group: RescueSenderGroup;
+	selected: Set<string>;
+	/** Select or deselect every message from this sender at once. */
+	onToggleGroup: (group: RescueSenderGroup, nextSelected: boolean) => void;
+	onToggleMessage: (id: string) => void;
+}
+
+const plural = (n: number): string => (n === 1 ? "message" : "messages");
+
+/**
+ * One sender in the Rescue-from-Spam review list: a single decision covering
+ * every message that sender has sitting in Spam. The individual messages stay
+ * available behind a disclosure for the cases where a sender is trusted but one
+ * particular message is not.
+ */
+export function RescueSenderGroupRow({
+	group,
+	selected,
+	onToggleGroup,
+	onToggleMessage,
+}: RescueSenderGroupRowProps) {
+	const [expanded, setExpanded] = useState(false);
+	const state = senderGroupSelectionState(group, selected);
+	const count = group.messages.length;
+	const Chevron = expanded ? ChevronDown : ChevronRight;
+
+	return (
+		<div className={cn(state !== "none" ? "bg-positive/10" : "bg-surface")}>
+			<div className="flex w-full items-start gap-3 px-3 py-2.5">
+				<Checkbox
+					className="mt-0.5"
+					checked={state === "all"}
+					indeterminate={state === "some"}
+					onChange={() => onToggleGroup(group, state !== "all")}
+					aria-label={`${state === "all" ? "Deselect" : "Select"} all ${count} ${plural(count)} from ${group.senderName}`}
+				/>
+
+				<Avatar name={group.senderName} email={group.senderAddress} size="sm" />
+
+				<div className="min-w-0 flex-1">
+					<div className="flex items-center gap-1.5">
+						<span className="truncate text-sm font-medium text-fg">
+							{group.senderName}
+						</span>
+						{group.senderTrust && (
+							<SenderTrustIndicator senderTrust={group.senderTrust} size="sm" />
+						)}
+						<span className="truncate text-2xs text-fg-subtle">
+							{group.senderAddress}
+						</span>
+					</div>
+					<div className="mt-1.5 flex flex-wrap items-center gap-1.5">
+						<Badge tone="positive">
+							<ShieldCheck className="size-3" aria-hidden />
+							{group.trustReason}
+						</Badge>
+						<span className="text-2xs text-fg-subtle">
+							{group.trustSubReason}
+						</span>
+					</div>
+				</div>
+
+				<button
+					type="button"
+					onClick={() => setExpanded((v) => !v)}
+					aria-expanded={expanded}
+					className="flex shrink-0 items-center gap-1 rounded-md px-1.5 py-1 text-2xs text-fg-muted transition-colors hover:bg-surface-sunken hover:text-fg"
+				>
+					{`${count} ${plural(count)}`}
+					<Chevron className="size-3.5" aria-hidden />
+				</button>
+			</div>
+
+			{expanded && (
+				<div className="divide-y divide-line border-t border-line">
+					{group.messages.map((candidate) => (
+						<RescueCandidateRow
+							key={candidate.id}
+							candidate={candidate}
+							selected={selected.has(candidate.id)}
+							onToggle={() => onToggleMessage(candidate.id)}
+							hideSender
+						/>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}

package/src/index.ts

@@ -259,6 +259,14 @@ export {
 	type RescueFromSpamFlowProps,
 	rescueMoveConsequence,
 } from "./components/rescue-from-spam-flow.js";
+export {
+	type GroupSelectionState,
+	groupRescueCandidatesBySender,
+	type RescueSenderGroup,
+	RescueSenderGroupRow,
+	type RescueSenderGroupRowProps,
+	senderGroupSelectionState,
+} from "./components/rescue-sender-group.js";
 export {
 	type PanelGroupProps,
 	type PanelProps,

package/src/tokens.css

@@ -51,6 +51,7 @@
 	/* status */
 	--color-positive: var(--positive);
 	--color-warning: var(--warning);
+	--color-warning-soft: var(--warning-soft);
 	--color-danger: var(--danger);
 	--color-danger-soft: var(--danger-soft);
 
@@ -141,6 +142,7 @@
 	--positive: oklch(0.55 0.12 155);
 	/* muted amber, used sparingly */
 	--warning: oklch(0.65 0.13 80);
+	--warning-soft: oklch(0.94 0.04 80);
 	/* muted coral — the only warm color in the UI */
 	--danger: oklch(0.56 0.16 25);
 	--danger-soft: oklch(0.93 0.04 25);
@@ -175,6 +177,7 @@
 
 	--positive: oklch(0.74 0.13 155);
 	--warning: oklch(0.75 0.12 80);
+	--warning-soft: oklch(0.32 0.06 80);
 	--danger: oklch(0.68 0.15 25);
 	--danger-soft: oklch(0.32 0.07 25);