@remit/ui 0.0.1

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

@@ -0,0 +1,192 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
+import { IsolatedEmailFrame } from "./isolated-email-frame.js";
+
+/**
+ * `IsolatedEmailFrame` renders sanitized email HTML in a sandboxed iframe that
+ * fits the viewport width on mobile and isolates the email's CSS from the app.
+ *
+ * The component receives HTML that already carries the sanitizer's layout-clamp
+ * `<style>` block, so these stories prepend the same clamp CSS to each fixture
+ * to reproduce the real pipeline. The fixtures are the real failing emails from
+ * the #727 patch chain — fixed-width `<table width="600">` newsletters that
+ * overflowed a phone — rendered at a phone width and at a desktop
+ * reading-column width.
+ *
+ * On a phone (window ≤640px) a fixed-width email whose inline `min-width` beats
+ * the clamp can't reflow; the frame renders it at its natural width and
+ * CSS-scales the whole iframe down so it fits the container WHOLE rather than
+ * being clipped (#727). To see the scale in this Storybook, narrow the browser
+ * window to a phone width — the fit-to-width decision reads the window media
+ * query, not the fixed-width decorator. The `computeFitScale` unit test pins the
+ * scaling policy independently of the viewport.
+ */
+
+// Mirror of the sanitizer's `generateLayoutClampCSS` — clamps wide author
+// markup (fixed-width tables/cells, oversized media) to the frame width and
+// wraps long unbroken tokens. In the app this is prepended by the sanitizer;
+// here we prepend it so the fixtures exercise the same reflow.
+const LAYOUT_CLAMP_CSS = `<style>
+html, body { margin: 0; padding: 0; max-width: 100%; }
+body { overflow-wrap: anywhere; word-break: break-word; }
+img, video, iframe, svg, canvas { max-width: 100% !important; height: auto; }
+table { max-width: 100% !important; table-layout: auto; }
+td, th { max-width: 100% !important; }
+* { min-width: 0; }
+pre, code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
+</style>`;
+
+const HERO = `data:image/svg+xml;utf8,${encodeURIComponent(
+	`<svg xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200">
+		<rect width="600" height="200" fill="#1d1d2b"/>
+		<circle cx="300" cy="100" r="60" fill="#e23a78"/>
+	</svg>`,
+)}`;
+
+// Node-Weekly-style FIXED-WIDTH newsletter: a `<table width="600">` whose
+// `<td width="600">` carries the width — the exact markup that overflowed a
+// ~390px phone (#727). The clamp CSS collapses table + cell to the frame, and
+// the long unbroken URL must wrap rather than widen the page.
+const NODE_WEEKLY = `${LAYOUT_CLAMP_CSS}
+<table width="600" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse;">
+	<tr>
+		<td width="600" style="width:600px;min-width:600px;background:#83cd29;padding:24px;font-family:Helvetica,Arial,sans-serif;color:#ffffff;">
+			<h1 style="margin:0;font-size:26px;">Node Weekly</h1>
+			<p style="margin:4px 0 0;font-size:14px;">Issue 540 — June 18, 2026</p>
+		</td>
+	</tr>
+	<tr>
+		<td width="600" style="width:600px;padding:24px;font-family:Georgia,serif;color:#1a1a1a;">
+			<h2 style="font-size:18px;color:#111;">Node.js 24 hits LTS</h2>
+			<p>The release line is now Active LTS. The permission model graduated
+			from experimental, and the built-in test runner picked up snapshot
+			testing — all without a single dependency.</p>
+			<p>https://nodejs.example/blog/release/v24.0.0-this-is-a-deliberately-very-long-unbroken-url-to-prove-wrapping</p>
+			<p><a href="https://example.com/issue/540" style="color:#43853d;">Read the full issue &rarr;</a></p>
+		</td>
+	</tr>
+</table>
+`;
+
+// Gaslicht.com-style fixed-width marketing mail: a 600px hero image edge-to-edge
+// plus a pink CTA button, no author body padding. The hero must clamp to the
+// frame width and the whole layout must fit a phone.
+const GASLICHT = `${LAYOUT_CLAMP_CSS}
+<div style="font-family: Helvetica, Arial, sans-serif; color: #1a1a1a; width: 600px; max-width: 600px;">
+	<img src="${HERO}" alt="Hero" width="600" style="display:block;width:100%;height:auto;" />
+	<div style="padding: 20px;">
+		<h1 style="font-size: 22px; margin: 0 0 8px;">Bespaar op je energierekening</h1>
+		<p style="margin: 0 0 16px; line-height: 1.5;">Vergelijk vandaag nog alle
+		energieleveranciers en stap eenvoudig over. Onze klanten besparen gemiddeld
+		honderden euro's per jaar.</p>
+		<a href="https://example.com" style="display:inline-block;background:#e23a78;color:#fff;text-decoration:none;padding:12px 28px;border-radius:6px;font-weight:bold;">Vergelijk nu</a>
+	</div>
+</div>
+`;
+
+// Substack-style FLUID newsletter: a 640px max-width body that should fill the
+// reading column on desktop and reflow on a phone — the framed treatment's
+// `max(100%, content)` path.
+const SUBSTACK = `${LAYOUT_CLAMP_CSS}
+<div style="font-family: Georgia, serif; max-width: 640px; margin: 0 auto; padding: 24px; color: #1a1a1a;">
+	<h1 style="font-size: 24px; margin: 0 0 4px;">The Weekly Dispatch</h1>
+	<p style="color: #666; margin: 0 0 24px;">June 2026</p>
+	<p>This is a fluid newsletter with a 640px max-width body. On desktop it fills
+	the reading column; on a phone it reflows to the viewport with no horizontal
+	scroll.</p>
+	<p><a href="https://example.com" style="color: #268bd2;">Read online &rarr;</a></p>
+</div>
+`;
+
+// Plain personal email: weak markup, only a font color — must pick up the UI
+// font-stack + theme-aware colors so it is readable in dark mode.
+const PLAIN = `${LAYOUT_CLAMP_CSS}
+<div style="color:#000">
+	<p>Hi there,</p>
+	<p>Just confirming our call for tomorrow at 10am. Let me know if that still
+	works for you.</p>
+	<p>Thanks,<br>Alex</p>
+</div>
+`;
+
+const PHONE: Decorator = (Story) => (
+	<div className="overflow-x-auto" style={{ width: 390 }}>
+		<Story />
+	</div>
+);
+
+const COLUMN: Decorator = (Story) => (
+	<div className="overflow-x-auto" style={{ width: 720 }}>
+		<Story />
+	</div>
+);
+
+const meta: Meta<typeof IsolatedEmailFrame> = {
+	title: "Components/IsolatedEmailFrame",
+	component: IsolatedEmailFrame,
+	parameters: { layout: "fullscreen" },
+	argTypes: {
+		variant: { control: "inline-radio", options: ["plain", "framed"] },
+		isDark: { control: "boolean" },
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof IsolatedEmailFrame>;
+
+/** #727: a 600px fixed-width Node Weekly table at a 390px phone width. The inline
+ *  `min-width:600px` on the `<td>` beats the clamp so the table can't collapse;
+ *  the frame scales the whole email down to fit the box WHOLE, with no clipping
+ *  and no horizontal page scroll. */
+export const NodeWeeklyMobile: Story = {
+	args: { html: NODE_WEEKLY, variant: "framed", isDark: false },
+	decorators: [PHONE],
+};
+
+/** The same Node Weekly newsletter on a desktop reading column. */
+export const NodeWeeklyDesktop: Story = {
+	args: { html: NODE_WEEKLY, variant: "framed", isDark: false },
+	decorators: [COLUMN],
+};
+
+/** Gaslicht.com-style 600px fixed-width marketing mail at phone width: the hero
+ *  image and CTA scale down with the frame to fit the phone whole. */
+export const GaslichtMobile: Story = {
+	args: { html: GASLICHT, variant: "framed", isDark: false },
+	decorators: [PHONE],
+};
+
+/** Substack-style fluid newsletter on a desktop column: fills the reading
+ *  width via the framed `max(100%, content)` path. */
+export const SubstackDesktop: Story = {
+	args: { html: SUBSTACK, variant: "framed", isDark: false },
+	decorators: [COLUMN],
+};
+
+/** Substack fluid newsletter reflowed to a phone width. */
+export const SubstackMobile: Story = {
+	args: { html: SUBSTACK, variant: "framed", isDark: false },
+	decorators: [PHONE],
+};
+
+/** Framed newsletter on the DARK reading pane: smart-inverted to charcoal with
+ *  the hero re-inverted back to natural color. */
+export const NewsletterDarkPane: Story = {
+	args: { html: GASLICHT, variant: "framed", isDark: true },
+	parameters: { theme: "dark" },
+	decorators: [COLUMN],
+};
+
+/** Plain personal email: UI font-stack + theme-aware colors injected so the
+ *  black-on-white author text stays readable in either theme. */
+export const PlainEmail: Story = {
+	args: { html: PLAIN, variant: "plain", isDark: false },
+	decorators: [COLUMN],
+};
+
+/** Plain email in dark mode: must be light text on the dark surface, never
+ *  black-on-dark. */
+export const PlainEmailDark: Story = {
+	args: { html: PLAIN, variant: "plain", isDark: true },
+	parameters: { theme: "dark" },
+	decorators: [COLUMN],
+};

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

@@ -0,0 +1,265 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { buildEmailSrcDoc, type EmailFrameVariant } from "./email-frame-css.js";
+
+export interface IsolatedEmailFrameProps {
+	/**
+	 * Sanitized email HTML. Must already be DOMPurify'd and carry the
+	 * sanitizer's layout-clamp `<style>` block; this component only adds the
+	 * colour / font / dark-mode canvas and isolates the result in a sandboxed
+	 * iframe. Never pass raw, untrusted HTML here.
+	 */
+	html: string;
+	/**
+	 * Render treatment:
+	 *
+	 * - `"plain"` — weakly-marked / personal mail. UI sans-serif + theme-aware
+	 *   colours are injected so black-text-on-dark is readable.
+	 * - `"framed"` — designed mail (newsletter / marketing / author background).
+	 *   The author's colours are preserved; in dark mode the email is darkened
+	 *   via a smart-invert unless it opts into its own dark design.
+	 */
+	variant?: EmailFrameVariant;
+	/**
+	 * Whether the app is in dark mode. The plain branch picks theme-aware
+	 * colours; the framed branch decides whether to render as-authored on white
+	 * or apply the smart-invert.
+	 */
+	isDark?: boolean;
+	className?: string;
+}
+
+// Cap matches the worst real-world email we've encountered (a long
+// daily-digest newsletter, ~30k px). Beyond this, an internal scrollbar is
+// preferable to letting a hostile sender allocate unbounded layout.
+const MAX_HEIGHT_PX = 50_000;
+
+// Same spirit as MAX_HEIGHT_PX for the horizontal axis. Fixed-width newsletters
+// top out around 900px; well past that a hostile sender is the likely cause.
+const MAX_WIDTH_PX = 10_000;
+
+// Below this we are on a phone: a wide fixed-layout email that cannot reflow is
+// scaled down to fit the container instead of being clipped (#727). Wider
+// viewports keep the content-width pin so multi-column newsletters render at
+// their native width and the pane scrolls horizontally.
+const NARROW_QUERY = "(max-width: 640px)";
+
+// Don't scale below this — a heavily fixed-width newsletter on a tiny phone
+// would otherwise shrink to unreadable. At the floor we accept that the email
+// is downscaled as far as we'll go and the wrapper still clips the remainder
+// (text stays larger and legible, edge content is sacrificed over a 3x shrink).
+const MIN_SCALE = 0.4;
+
+// sandbox flags: scripts blocked (DOMPurify already strips them; defence in
+// depth), forms blocked, top navigation blocked. `allow-popups` +
+// `allow-popups-to-escape-sandbox` lets `target="_blank"` links open in a new
+// tab. `allow-same-origin` is required so the parent can read
+// `contentDocument.body` to size the iframe to its content — safe without
+// `allow-scripts` since there is no JS in the frame to exploit it.
+const SANDBOX = "allow-same-origin allow-popups allow-popups-to-escape-sandbox";
+
+/**
+ * Pin an iframe axis to its content's scroll size: take the larger of the body
+ * and documentElement scroll sizes, round UP so a fractional content size never
+ * leaves a 1px phantom overflow, and cap at `max` so a hostile sender can't
+ * allocate unbounded layout. Returned value is the explicit px the iframe is
+ * sized to on that axis.
+ */
+export const measureContentAxis = (
+	bodyScroll: number,
+	rootScroll: number,
+	max: number,
+): number => Math.min(Math.ceil(Math.max(bodyScroll, rootScroll)), max);
+
+/**
+ * The fit-to-width scale for a phone: downscale-only, so content already inside
+ * the container renders 1:1 and only genuinely-wider content shrinks. Floored at
+ * `MIN_SCALE` so a pathologically wide email doesn't shrink to unreadable. A
+ * non-positive or unknown width yields `1` (no scale) so we never divide by zero
+ * or upscale before the first measurement lands.
+ */
+export const computeFitScale = (
+	contentWidth: number,
+	containerWidth: number,
+): number => {
+	if (contentWidth <= 0 || containerWidth <= 0) return 1;
+	if (contentWidth <= containerWidth) return 1;
+	return Math.max(MIN_SCALE, containerWidth / contentWidth);
+};
+
+const useMatchMedia = (query: string): boolean => {
+	const [matches, setMatches] = useState(() => {
+		if (typeof window === "undefined" || !window.matchMedia) return false;
+		return window.matchMedia(query).matches;
+	});
+
+	useEffect(() => {
+		if (typeof window === "undefined" || !window.matchMedia) return;
+		const mql = window.matchMedia(query);
+		setMatches(mql.matches);
+		const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
+		mql.addEventListener("change", handler);
+		return () => mql.removeEventListener("change", handler);
+	}, [query]);
+
+	return matches;
+};
+
+/**
+ * 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.
+ *
+ * Presentational: HTML + treatment + theme come in via props; the component
+ * owns the srcDoc assembly, the content-sizing, and the fit-to-viewport
+ * decision in one place. The frame sizes itself to its content via a
+ * ResizeObserver so it grows no internal scrollbars — vertical scrolling and
+ * (on desktop) horizontal scrolling of genuinely wide email are delegated to
+ * the surrounding pane.
+ *
+ * On a phone a fixed-layout email that *can't* reflow (an inline
+ * `min-width:600px` on a `<td>` beats the sanitizer's clamp) is rendered at its
+ * natural width and the whole iframe is CSS-scaled down to fit the container —
+ * the email stays whole and readable instead of being clipped (#727).
+ */
+export const IsolatedEmailFrame = ({
+	html,
+	variant = "framed",
+	isDark = false,
+	className,
+}: IsolatedEmailFrameProps) => {
+	const hostRef = useRef<HTMLDivElement>(null);
+	const ref = useRef<HTMLIFrameElement>(null);
+	const [height, setHeight] = useState(0);
+	const [width, setWidth] = useState(0);
+	const [containerWidth, setContainerWidth] = useState(0);
+
+	const isNarrow = useMatchMedia(NARROW_QUERY);
+
+	const srcDoc = useMemo(
+		() => buildEmailSrcDoc(html, variant, isDark),
+		[html, variant, isDark],
+	);
+
+	useEffect(() => {
+		const host = hostRef.current;
+		if (!host) return;
+		const measure = () =>
+			setContainerWidth((prev) =>
+				prev === host.clientWidth ? prev : host.clientWidth,
+			);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(host);
+		return () => observer.disconnect();
+	}, []);
+
+	useEffect(() => {
+		const iframe = ref.current;
+		if (!iframe) return;
+
+		const measure = () => {
+			const doc = iframe.contentDocument;
+			if (!doc?.body) return;
+			const root = doc.documentElement;
+			const nextHeight = measureContentAxis(
+				doc.body.scrollHeight,
+				root?.scrollHeight ?? 0,
+				MAX_HEIGHT_PX,
+			);
+			setHeight((prev) => (prev === nextHeight ? prev : nextHeight));
+			const nextWidth = measureContentAxis(
+				doc.body.scrollWidth,
+				root?.scrollWidth ?? 0,
+				MAX_WIDTH_PX,
+			);
+			setWidth((prev) => (prev === nextWidth ? prev : nextWidth));
+		};
+
+		let observer: ResizeObserver | undefined;
+		const handleLoad = () => {
+			measure();
+			const doc = iframe.contentDocument;
+			if (!doc?.body) return;
+			observer = new ResizeObserver(measure);
+			observer.observe(doc.body);
+			if (doc.documentElement) observer.observe(doc.documentElement);
+		};
+
+		iframe.addEventListener("load", handleLoad);
+		return () => {
+			iframe.removeEventListener("load", handleLoad);
+			observer?.disconnect();
+		};
+	}, []);
+
+	// The fit-to-viewport decision, owned in one place:
+	// - Phone (`isNarrow`): render the iframe at its natural content width and
+	//   CSS-scale the whole frame down to the container, so a fixed-width
+	//   newsletter that can't reflow fits the phone whole instead of being
+	//   clipped (#727). Content already within the container renders 1:1.
+	// - Desktop framed: `max(100%, content)` so a narrow-max-width newsletter
+	//   (Substack's 640px body) fills the reading column while a genuinely wide
+	//   fixed-layout email grows past the pane and lets the pane scroll.
+	// - Plain / pre-measurement: pin to measured content width, 100% until known.
+	const scale = isNarrow ? computeFitScale(width, containerWidth) : 1;
+	const scaled = scale < 1;
+
+	const frameWidth = scaled
+		? `${width}px`
+		: isNarrow
+			? "100%"
+			: variant === "framed" && width > 0
+				? `max(100%, ${width}px)`
+				: width === 0
+					? "100%"
+					: `${width}px`;
+
+	const frameHeight = height === 0 ? "1px" : `${height}px`;
+
+	const iframe = (
+		<iframe
+			ref={ref}
+			title="Email content"
+			sandbox={SANDBOX}
+			srcDoc={srcDoc}
+			className={scaled ? undefined : className}
+			scrolling="no"
+			style={{
+				width: frameWidth,
+				maxWidth: scaled ? "none" : undefined,
+				border: "none",
+				display: "block",
+				height: frameHeight,
+				overflow: "hidden",
+				transform: scaled ? `scale(${scale})` : undefined,
+				transformOrigin: scaled ? "top left" : undefined,
+				// Both branches carry their own color-scheme (and, for the framed
+				// dark-invert case, the darkening filter) in the injected base CSS,
+				// so the iframe element stays "normal" rather than pinning a scheme
+				// that would fight a dark opt-in or the invert.
+				colorScheme: "normal",
+			}}
+		/>
+	);
+
+	// When scaled, the iframe's layout box stays its natural (un-transformed)
+	// size, so it must sit in a wrapper sized to the SCALED footprint and clip
+	// the overflow — otherwise the surrounding pane sees the natural width and
+	// grows a scrollbar.
+	return (
+		<div ref={hostRef} className={scaled ? className : undefined}>
+			{scaled ? (
+				<div
+					style={{
+						width: "100%",
+						height: `${Math.ceil(height * scale)}px`,
+						overflow: "hidden",
+					}}
+				>
+					{iframe}
+				</div>
+			) : (
+				iframe
+			)}
+		</div>
+	);
+};

package/src/components/kbd.tsx

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../lib/cn.js";
+
+export type KbdProps = HTMLAttributes<HTMLElement>;
+
+/** Inline keyboard-key hint — keyboard-first UI surfaces these everywhere. */
+export function Kbd({ className, ...props }: KbdProps) {
+	return (
+		<kbd
+			className={cn(
+				"inline-flex h-4 min-w-4 items-center justify-center rounded-xs border border-line bg-surface-sunken px-1 font-sans text-2xs text-fg-muted",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}

package/src/components/keyboard-hint-bar.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+import { Kbd } from "./kbd.js";
+
+export interface KeyboardHint {
+	/** One or more keys shown as `Kbd` chips. */
+	keys: string[];
+	/** What the keys do. */
+	label: string;
+}
+
+export interface KeyboardHintBarProps {
+	/** Override the default hint set. */
+	hints?: KeyboardHint[];
+	className?: string;
+}
+
+/** The persistent message-list footer hint set (desktop). */
+export const defaultKeyboardHints: KeyboardHint[] = [
+	{ keys: ["j", "k"], label: "navigate" },
+	{ keys: ["m"], label: "mute" },
+	{ keys: ["?"], label: "all shortcuts" },
+];
+
+/**
+ * The keyboard-shortcut hint footer under the message list. Keyboard-first
+ * discoverability — the shortcuts aren't hidden behind the `?` modal. The host
+ * renders it on desktop only (gating by layout tier, not a CSS breakpoint),
+ * since a key-hint footer on a touch device is noise.
+ */
+export function KeyboardHintBar({
+	hints = defaultKeyboardHints,
+	className,
+}: KeyboardHintBarProps) {
+	return (
+		<footer
+			className={cn(
+				"flex items-center gap-2 border-t border-line px-row-inset py-1 text-2xs text-fg-subtle",
+				className,
+			)}
+		>
+			{hints.map((hint) => (
+				<HintGroup key={hint.label} hint={hint} />
+			))}
+		</footer>
+	);
+}
+
+function HintGroup({ hint }: { hint: KeyboardHint }): ReactNode {
+	return (
+		<span className="flex items-center gap-1">
+			{hint.keys.map((key) => (
+				<Kbd key={key}>{key}</Kbd>
+			))}
+			<span>{hint.label}</span>
+		</span>
+	);
+}

package/src/components/list-item.tsx

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
+	leading?: ReactNode;
+	trailing?: ReactNode;
+	active?: boolean;
+	unread?: boolean;
+}
+
+export function ListItem({
+	leading,
+	trailing,
+	active,
+	unread,
+	className,
+	children,
+	...props
+}: ListItemProps) {
+	return (
+		<div
+			className={cn(
+				"group relative flex cursor-pointer items-start gap-3 px-4 py-3 transition-colors",
+				active ? "bg-accent-2-soft" : "hover:bg-surface-sunken",
+				className,
+			)}
+			{...props}
+		>
+			{unread && (
+				<span className="absolute left-1.5 top-1/2 size-1.5 -translate-y-1/2 rounded-full bg-accent" />
+			)}
+			{leading && <div className="shrink-0 pt-0.5">{leading}</div>}
+			<div className="min-w-0 flex-1">{children}</div>
+			{trailing && (
+				<div className="shrink-0 text-2xs text-fg-subtle">{trailing}</div>
+			)}
+		</div>
+	);
+}

package/src/components/mail-action-toolbar.render.test.ts

@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { MailActionToolbar } from "./mail-action-toolbar.js";
+
+describe("MailActionToolbar", () => {
+	it("renders the triage cluster by default (desktop reading-pane behavior)", () => {
+		const html = renderToString(
+			createElement(MailActionToolbar, { hasThread: true }),
+		);
+		assert.match(html, /aria-label="Reply"/);
+		assert.match(html, /aria-label="Move to Trash"/);
+		assert.match(html, /aria-label="Flag"/);
+		assert.match(html, /aria-label="Move to mailbox"/);
+		// No archive verb — Remit is IMAP-backed (move-to-folder is the equivalent).
+		assert.doesNotMatch(html, /aria-label="Archive"/);
+	});
+
+	it("hides the triage cluster when showTriage is false (mobile footer)", () => {
+		const html = renderToString(
+			createElement(MailActionToolbar, { hasThread: true, showTriage: false }),
+		);
+		// Reply verbs stay; triage is gone.
+		assert.match(html, /aria-label="Reply"/);
+		assert.match(html, /aria-label="Reply all"/);
+		assert.match(html, /aria-label="Forward"/);
+		assert.doesNotMatch(html, /aria-label="Archive"/);
+		assert.doesNotMatch(html, /aria-label="Move to Trash"/);
+		assert.doesNotMatch(html, /aria-label="Flag"/);
+		assert.doesNotMatch(html, /aria-label="Move to mailbox"/);
+	});
+
+	it("surfaces the unavailable hint when no thread is open", () => {
+		const html = renderToString(
+			createElement(MailActionToolbar, {
+				hasThread: false,
+				unavailableHint: "Open a message first",
+			}),
+		);
+		assert.match(html, /Open a message first/);
+	});
+});