@remit/ui 0.0.1

package/src/components/reading-pane.render.test.ts

@@ -0,0 +1,148 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { ThreadData, ThreadMessageData } from "./app-shell-types.js";
+import {
+	CollapsedMessage,
+	ExpandedMessage,
+	ReadingPane,
+} from "./reading-pane.js";
+
+const message: ThreadMessageData = {
+	id: "m-1",
+	fromName: "Jamie Chen",
+	fromEmail: "jamie@example.com",
+	toLabel: "Alex Rivera, you",
+	dateLabel: "Today, 09:11",
+	snippet: "Circulating the deck this afternoon.",
+	bodyHtml: "<p>body</p>",
+};
+
+const thread: ThreadData = {
+	subject: "Q3 planning notes",
+	messages: [
+		{
+			id: "msg-1",
+			fromName: "Alex Rivera",
+			fromEmail: "alex@example.com",
+			toLabel: "you",
+			dateLabel: "Today, 09:11",
+			snippet: "Here's where we landed after the call.",
+			bodyHtml: "<p>The roadmap stands and the budget is locked.</p>",
+			expanded: true,
+		},
+	],
+};
+
+describe("ReadingPane", () => {
+	it("renders the subject and the expanded message header with a thread", () => {
+		const html = renderToString(createElement(ReadingPane, { thread }));
+		assert.match(html, /Q3 planning notes/);
+		// The email body now renders through the kit's sanitize → sandboxed
+		// IsolatedEmailFrame pipeline (#940), which needs a DOM and so emits no
+		// body text under SSR. Assert the expanded message's sender header
+		// instead; body rendering is covered by the sanitizer + MessageBodyView
+		// tests.
+		assert.match(html, /Alex Rivera/);
+	});
+
+	it("renders the empty state with no thread", () => {
+		const html = renderToString(createElement(ReadingPane, {}));
+		assert.doesNotMatch(html, /Q3 planning notes/);
+		assert.match(html, /Select a thread to read/);
+	});
+
+	it("renders the toolbar with the search input", () => {
+		const html = renderToString(createElement(ReadingPane, { thread }));
+		assert.match(html, /Search mail/);
+	});
+});
+
+describe("CollapsedMessage row slots (#945)", () => {
+	it("renders the fixture date label when no trailing slot is given", () => {
+		const html = renderToString(createElement(CollapsedMessage, { message }));
+		assert.match(html, /Today, 09:11/);
+		assert.match(html, /Jamie Chen/);
+	});
+
+	it("renders the app's trailing cluster instead of the date label", () => {
+		const html = renderToString(
+			createElement(CollapsedMessage, {
+				message,
+				trailing: createElement("span", null, "STAR-DATE-SLOT"),
+			}),
+		);
+		assert.match(html, /STAR-DATE-SLOT/);
+		assert.doesNotMatch(html, /Today, 09:11/);
+	});
+
+	it("shows the unread dot and bolds the sender when isUnread", () => {
+		const html = renderToString(
+			createElement(CollapsedMessage, { message, isUnread: true }),
+		);
+		assert.match(html, /font-semibold/);
+	});
+});
+
+describe("CollapsedMessage nested-button fix (#1232)", () => {
+	it("renders the clickable row as a role=button div so a trailing button doesn't nest inside a button", () => {
+		const html = renderToString(
+			createElement(CollapsedMessage, {
+				message,
+				onClick: () => {},
+				trailing: createElement(
+					"button",
+					{ type: "button", "aria-label": "Add star" },
+					"star",
+				),
+			}),
+		);
+		// The row itself is a div, keyboard-operable via role/tabindex — not a
+		// native <button>. The only <button> in the output is the trailing star.
+		assert.match(html, /^<div/);
+		assert.match(html, /role="button"/);
+		assert.match(html, /tabindex="0"/);
+		assert.match(html, /aria-expanded="false"/);
+		assert.equal(html.match(/<button/g)?.length ?? 0, 1);
+	});
+
+	it("renders a static row (no onClick) with no button role and no tabindex", () => {
+		const html = renderToString(createElement(CollapsedMessage, { message }));
+		assert.doesNotMatch(html, /role="button"/);
+		assert.doesNotMatch(html, /tabindex=/);
+	});
+});
+
+describe("ExpandedMessage row slots (#945)", () => {
+	it("injects the app body slot instead of the fixture MessageBodyView", () => {
+		const html = renderToString(
+			createElement(ExpandedMessage, {
+				message,
+				body: createElement("div", null, "REAL-MESSAGE-BODY"),
+			}),
+		);
+		assert.match(html, /REAL-MESSAGE-BODY/);
+	});
+
+	it("renders the sender badge, action menu and recipient slots", () => {
+		const html = renderToString(
+			createElement(ExpandedMessage, {
+				message,
+				senderBadge: createElement("span", null, "BADGE"),
+				actionMenu: createElement("span", null, "ACTION-MENU"),
+				to: createElement("span", null, "TO-LINE"),
+			}),
+		);
+		assert.match(html, /BADGE/);
+		assert.match(html, /ACTION-MENU/);
+		assert.match(html, /TO-LINE/);
+	});
+
+	it("hides the recipient line when `to` is null", () => {
+		const html = renderToString(
+			createElement(ExpandedMessage, { message, to: null }),
+		);
+		assert.doesNotMatch(html, /to Alex Rivera/);
+	});
+});

package/src/components/reading-pane.stories.tsx

@@ -0,0 +1,194 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Paperclip, Star } from "lucide-react";
+import type { ThreadData, ThreadMessageData } from "./app-shell-types.js";
+import {
+	CollapsedMessage,
+	ExpandedMessage,
+	ReadingPane,
+} from "./reading-pane.js";
+
+const thread: ThreadData = {
+	subject: "Q3 planning notes",
+	messages: [
+		{
+			id: "msg-1",
+			fromName: "Alex Rivera",
+			fromEmail: "alex@example.com",
+			toLabel: "you",
+			dateLabel: "Yesterday, 14:02",
+			snippet: "Here's where we landed after the call…",
+			bodyHtml:
+				"<p>Here's where we landed after the call. The roadmap stands.</p>",
+		},
+		{
+			id: "msg-2",
+			fromName: "Jamie Chen",
+			fromEmail: "jamie@example.com",
+			toLabel: "Alex Rivera, you",
+			dateLabel: "Today, 09:11",
+			snippet: "Thanks — I'll circulate the deck this afternoon.",
+			bodyHtml:
+				"<p>Thanks for the summary. I'll circulate the deck this afternoon and follow up with finance.</p><ul><li>Confirm headcount</li><li>Lock the budget</li></ul>",
+			expanded: true,
+		},
+	],
+};
+
+// A designed (framed) newsletter so the Screens story exercises the REAL
+// renderer — sanitized + sandboxed iframe, flush layout, #727 scale-to-fit —
+// rather than a plain inline paragraph (#940). The fixed 600px table is the
+// kind of markup that overflowed a phone before #727.
+const newsletterThread: ThreadData = {
+	subject: "Node Weekly — Issue 540",
+	messages: [
+		{
+			id: "nl-1",
+			fromName: "Node Weekly",
+			fromEmail: "news@nodeweekly.example",
+			toLabel: "you",
+			dateLabel: "Today, 08:00",
+			snippet: "Node.js 24 hits LTS, and more…",
+			framed: true,
+			expanded: true,
+			bodyHtml: `<table width="600" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse;">
+	<tr><td width="600" style="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</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 permission model graduated from experimental and the test runner picked up snapshot testing.</p>
+		<p><a href="https://example.com/issue/540" style="color:#43853d;">Read the full issue &rarr;</a></p>
+	</td></tr>
+</table>`,
+		},
+	],
+};
+
+const meta: Meta<typeof ReadingPane> = {
+	title: "Screens/Kit/ReadingPane",
+	component: ReadingPane,
+	parameters: { layout: "fullscreen" },
+	render: (args) => (
+		<div className="h-screen border border-line">
+			<ReadingPane {...args} />
+		</div>
+	),
+};
+export default meta;
+
+type Story = StoryObj<typeof ReadingPane>;
+
+export const WithThread: Story = { args: { thread } };
+
+/** A designed newsletter rendered through the real sanitize → sandboxed-iframe
+ *  pipeline — the same rendering the live app shows (#940). */
+export const Newsletter: Story = { args: { thread: newsletterThread } };
+
+export const Empty: Story = { args: { thread: undefined } };
+
+export const WithIntelligenceToggle: Story = {
+	args: { thread, showIntelligenceToggle: true, intelligenceOpen: false },
+};
+
+/* ------------------------------------------------------------------ */
+/* Row primitives — exercise the app-injection slots directly so the   */
+/* kit stays the verified source of truth for the thread-row rhythm.   */
+/* ------------------------------------------------------------------ */
+
+const row: ThreadMessageData = {
+	id: "row-1",
+	fromName: "Jamie Chen",
+	fromEmail: "jamie@example.com",
+	toLabel: "Alex Rivera, you",
+	dateLabel: "Today, 09:11",
+	snippet: "Thanks — I'll circulate the deck this afternoon.",
+	bodyHtml:
+		"<p>Thanks for the summary. I'll circulate the deck this afternoon.</p>",
+};
+
+/** The collapsed row with the app's real trailing cluster (star + paperclip +
+ *  date), an unread dot and a keyboard-focus ring — the slots the live
+ *  MessageCard injects. The row is a `role="button"` div, so the interactive
+ *  star in the trailing slot is a valid sibling control and not a `<button>`
+ *  nested inside a `<button>` (#1232). Click the row to expand; the star stops
+ *  propagation so it toggles without expanding. */
+export const CollapsedRowComposed: StoryObj<typeof CollapsedMessage> = {
+	render: () => (
+		<div className="max-w-3xl border border-line">
+			<CollapsedMessage
+				message={row}
+				isUnread
+				onClick={() => alert("expand row-1")}
+				trailing={
+					<div className="flex shrink-0 items-center gap-1">
+						<button
+							type="button"
+							onClick={(e) => {
+								e.stopPropagation();
+								alert("toggle star");
+							}}
+							aria-label="Add star"
+							className="rounded p-0.5 text-fg-subtle hover:text-warning"
+						>
+							<Star className="size-3" />
+						</button>
+						<span className="text-2xs text-fg-subtle tabular-nums">
+							Today, 09:11
+						</span>
+					</div>
+				}
+			/>
+			<CollapsedMessage
+				message={{ ...row, id: "row-2", fromName: "Alex Rivera" }}
+				isFocused
+				onClick={() => alert("expand row-2")}
+				trailing={
+					<div className="flex shrink-0 items-center gap-1">
+						<button
+							type="button"
+							onClick={(e) => {
+								e.stopPropagation();
+								alert("toggle star");
+							}}
+							aria-label="Remove star"
+							className="rounded p-0.5 text-warning"
+						>
+							<Star className="size-3 fill-current" />
+						</button>
+						<Paperclip className="size-3 text-fg-subtle" />
+						<span className="text-2xs text-fg-subtle tabular-nums">
+							Today, 08:42
+						</span>
+					</div>
+				}
+			/>
+		</div>
+	),
+};
+
+/** The expanded row with the app's injected slots: a sender badge, an
+ *  indicators row, an action-menu placeholder and a custom recipient line —
+ *  proving the kit composes app interactivity without importing app code. */
+export const ExpandedRowComposed: StoryObj<typeof ExpandedMessage> = {
+	render: () => (
+		<div className="max-w-3xl border border-line">
+			<ExpandedMessage
+				message={row}
+				senderBadge={<span className="ml-1 text-positive text-xs">✓</span>}
+				to={<>to Alex Rivera and 2 others</>}
+				indicators={
+					<div className="mt-0.5 flex items-center gap-1">
+						<Star className="size-3.5 fill-current text-warning" />
+						<Paperclip className="size-3.5 text-fg-subtle" />
+					</div>
+				}
+				actionMenu={
+					<button type="button" className="rounded p-1 text-fg-subtle">
+						⋯
+					</button>
+				}
+			/>
+		</div>
+	),
+};

package/src/components/reading-pane.tsx

@@ -0,0 +1,351 @@
+import {
+	ChevronDown,
+	ChevronRight,
+	Info,
+	Search,
+	ShieldAlert,
+	SquarePen,
+} from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { isSelfRowActivation } from "../lib/row-keyboard.js";
+import type { ThreadData, ThreadMessageData } from "./app-shell-types.js";
+import { Avatar } from "./avatar.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { MailActionToolbar } from "./mail-action-toolbar.js";
+import { MessageBodyView } from "./message-body-view.js";
+import { ReadingPaneEmpty } from "./reading-pane-empty.js";
+
+/* ------------------------------------------------------------------ */
+/* Pane 3: threaded reading pane                                      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * One collapsed thread row. Presentational and prop-driven: the kit owns the
+ * row rhythm (shared `px-2`/`lg:px-4` gutter, leading chevron, `md` avatar,
+ * fixed-width sender, snippet) and the app injects its interactivity via slots
+ * — `onClick` to expand, `isFocused`/`isUnread` for the keyboard ring and
+ * unread dot, and a `trailing` slot for the star/attachment/date cluster. With
+ * no slots it renders the fixture date label so the kit stories stand alone.
+ *
+ * The row is a `role="button"` div rather than a native `<button>` so the
+ * `trailing` slot can hold its own interactive controls (the star toggle) —
+ * `<button>` inside `<button>` is invalid HTML and throws a hydration error
+ * (#1232). Keyboard operation (Enter/Space) is wired by hand to keep the whole
+ * row expandable, guarded so a keypress bubbling up from the star doesn't also
+ * expand the row (`isSelfRowActivation`); the star stops click propagation so it
+ * toggles on its own.
+ */
+export function CollapsedMessage({
+	message,
+	onClick,
+	isFocused,
+	isUnread,
+	trailing,
+}: {
+	message: ThreadMessageData;
+	/** Expand handler. Omit for a static (story / SSR) row. */
+	onClick?: () => void;
+	/** Keyboard-focus indicator (inset ring), independent of hover. */
+	isFocused?: boolean;
+	/** Bolds the sender and overlays the unread dot on the avatar. */
+	isUnread?: boolean;
+	/**
+	 * Trailing cluster (star button, attachment icon, date). Replaces the kit's
+	 * default fixture date label so the app can inject its real interactive
+	 * controls without the kit importing app/data code.
+	 */
+	trailing?: ReactNode;
+}) {
+	const content = (
+		<>
+			<ChevronRight className="size-3.5 shrink-0 text-fg-subtle" />
+			<div className="relative shrink-0">
+				<Avatar name={message.fromName} email={message.fromEmail} size="md" />
+				{isUnread && (
+					<span className="absolute -top-0.5 -right-0.5 size-2 rounded-full border border-canvas bg-accent" />
+				)}
+			</div>
+			<span
+				className={cn(
+					"w-36 shrink-0 truncate text-sm",
+					isUnread ? "font-semibold text-fg" : "font-medium text-fg-muted",
+				)}
+			>
+				{message.fromName}
+			</span>
+			<span className="min-w-0 flex-1 truncate text-xs text-fg-subtle">
+				{message.snippet}
+			</span>
+			{trailing ?? (
+				<span className="shrink-0 text-2xs text-fg-subtle tabular-nums">
+					{message.dateLabel}
+				</span>
+			)}
+		</>
+	);
+
+	const className = cn(
+		"group flex h-section-row w-full items-center gap-3 border-b border-line px-2 text-left transition-colors hover:bg-surface-sunken lg:px-4",
+		isFocused && "bg-surface-sunken ring-1 ring-inset ring-accent/30",
+	);
+
+	if (!onClick) {
+		return <div className={className}>{content}</div>;
+	}
+
+	return (
+		// biome-ignore lint/a11y/useSemanticElements: a nested <button> (the star in the trailing slot) inside a native <button> is invalid HTML and throws a hydration error (#1232); a role="button" div keeps the whole row keyboard-expandable while letting the star be its own control
+		<div
+			role="button"
+			tabIndex={0}
+			aria-expanded={false}
+			onClick={onClick}
+			onKeyDown={(e) => {
+				if (!isSelfRowActivation(e)) return;
+				e.preventDefault();
+				onClick();
+			}}
+			className={cn(className, "cursor-pointer")}
+		>
+			{content}
+		</div>
+	);
+}
+
+/**
+ * One expanded thread message. Presentational and prop-driven: the kit owns the
+ * header rhythm (leading chevron, `md` avatar, sender block) and the body
+ * spacing; the app injects its interactivity and real data via slots —
+ * `onHeaderClick` to collapse, `isFocused`/`isUnread`, a `senderBadge` after the
+ * name, `trailing` for the date, `to` for the recipient line, `indicators` for
+ * the star/attachment row, `actionMenu` for the kebab, and `body` for the real
+ * message body (loading/error/raw). With no `body` it renders the fixture
+ * `MessageBodyView` so the kit stories stand alone.
+ */
+export function ExpandedMessage({
+	message,
+	warning,
+	onHeaderClick,
+	isFocused,
+	senderBadge,
+	trailing,
+	to,
+	indicators,
+	actionMenu,
+	actionBar,
+	body,
+}: {
+	message: ThreadMessageData;
+	warning?: string;
+	/** Collapse handler on the sender block. Omit for a static row. */
+	onHeaderClick?: () => void;
+	isFocused?: boolean;
+	/** Rendered after the sender name (e.g. a trusted-sender badge). */
+	senderBadge?: ReactNode;
+	/** Trailing header content (date). Defaults to the fixture date label. */
+	trailing?: ReactNode;
+	/** Recipient line. `undefined` → "to {message.toLabel}"; `null` → hidden. */
+	to?: ReactNode;
+	/** Row under the header (star / attachment / unread dot). */
+	indicators?: ReactNode;
+	/** Per-message action menu (kebab), right-aligned in the header. */
+	actionMenu?: ReactNode;
+	/**
+	 * Per-message action bar (reply / triage), rendered between the header and the
+	 * body. The narrow-width reading view puts the message's verbs here so they
+	 * belong to this message; collapsed rows pass none.
+	 */
+	actionBar?: ReactNode;
+	/**
+	 * The message body. Replaces the kit's fixture `MessageBodyView` so the app
+	 * can inject its real data-driven body (loading / error / raw toggle).
+	 */
+	body?: ReactNode;
+}) {
+	const sender = (
+		<>
+			<div className="flex items-baseline justify-between gap-2">
+				<span className="text-sm font-semibold text-fg">
+					{message.fromName}
+					{senderBadge}
+				</span>
+				{trailing ?? (
+					<span className="text-2xs text-fg-subtle">{message.dateLabel}</span>
+				)}
+			</div>
+			<div className="text-xs text-fg-subtle">{message.fromEmail}</div>
+			{to !== null && (
+				<div className="text-xs text-fg-subtle">
+					{to ?? <>to {message.toLabel}</>}
+				</div>
+			)}
+		</>
+	);
+
+	return (
+		<div
+			className={cn(
+				"px-2 py-3 lg:px-4",
+				isFocused && "ring-1 ring-inset ring-accent/30",
+			)}
+		>
+			<div className="flex items-start gap-3">
+				<ChevronDown className="mt-1 size-3.5 shrink-0 text-fg-subtle" />
+				<Avatar name={message.fromName} email={message.fromEmail} size="md" />
+				<div className="min-w-0 flex-1">
+					{onHeaderClick ? (
+						<button
+							type="button"
+							onClick={onHeaderClick}
+							className="w-full text-left"
+						>
+							{sender}
+						</button>
+					) : (
+						sender
+					)}
+					{indicators}
+				</div>
+				{actionMenu && <div className="shrink-0">{actionMenu}</div>}
+			</div>
+
+			{warning && (
+				<div className="mt-3 flex items-start gap-3 rounded-md bg-danger-soft p-3">
+					<ShieldAlert className="mt-0.5 size-4 shrink-0 text-danger" />
+					<div className="text-sm text-fg">
+						<span className="font-semibold text-danger">Caution: </span>
+						{warning}{" "}
+						<button type="button" className="text-accent underline">
+							Why?
+						</button>
+					</div>
+				</div>
+			)}
+
+			{actionBar && <div className="mt-3 -mx-2 lg:-mx-4">{actionBar}</div>}
+
+			{/* The body is injected by the app (real sanitize → classify →
+			    sandboxed-iframe pipeline via its MessageBody). With no `body`
+			    slot the kit renders MessageBodyView directly so Storybook shows
+			    exactly what the app renders, not a divergent inline-HTML mock
+			    (#940). `framed` fixtures map to the newsletter treatment (author
+			    colors preserved); the rest render plain. */}
+			{body ?? (
+				<MessageBodyView
+					className="mt-3"
+					html={message.bodyHtml}
+					category={message.framed ? "newsletter" : "personal"}
+					allowImages
+				/>
+			)}
+		</div>
+	);
+}
+
+/**
+ * Message action toolbar on the pane-header datum: the reading pane's
+ * verbs (reply/reply-all/forward, delete/move/flag) plus search and
+ * compose, Apple Mail-style above the message area. Built on the shared
+ * `MailActionToolbar` so the buttons stay pressable with no thread open and
+ * explain inline rather than greying out (the never-disable tenet).
+ */
+function MessageToolbar({
+	hasThread,
+	intelligenceOpen,
+	onToggleIntelligence,
+	showIntelligenceToggle,
+}: {
+	hasThread: boolean;
+	intelligenceOpen?: boolean;
+	onToggleIntelligence?: () => void;
+	showIntelligenceToggle?: boolean;
+}) {
+	const [hint, setHint] = useState<string | null>(null);
+	return (
+		<MailActionToolbar
+			hasThread={hasThread}
+			onUnavailable={() => setHint("Open a message first")}
+			unavailableHint={hint}
+		>
+			{/* Apple Mail geometry: search sits top-right over the message
+			    area but still filters the current list / brief */}
+			<Input
+				icon={<Search className="size-4" />}
+				placeholder="Search mail"
+				className="h-8 w-64 min-w-40 shrink"
+			/>
+			<span className="mx-1 h-4 w-px bg-line" aria-hidden />
+			<Button
+				variant="ghost"
+				size="sm"
+				icon={<SquarePen className="size-4" />}
+				title="Compose (⌘N)"
+				aria-label="Compose"
+			/>
+			{showIntelligenceToggle && !intelligenceOpen && (
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<Info className="size-4" />}
+					onClick={onToggleIntelligence}
+					aria-label="Show intelligence sidebar"
+				/>
+			)}
+		</MailActionToolbar>
+	);
+}
+
+export function ReadingPane({
+	thread,
+	intelligenceOpen,
+	onToggleIntelligence,
+	showIntelligenceToggle,
+}: {
+	thread?: ThreadData;
+	intelligenceOpen?: boolean;
+	onToggleIntelligence?: () => void;
+	showIntelligenceToggle?: boolean;
+}) {
+	return (
+		<article className="flex h-full w-full min-w-0 flex-col bg-canvas">
+			<MessageToolbar
+				hasThread={Boolean(thread)}
+				intelligenceOpen={intelligenceOpen}
+				onToggleIntelligence={onToggleIntelligence}
+				showIntelligenceToggle={showIntelligenceToggle}
+			/>
+
+			{!thread ? (
+				<ReadingPaneEmpty />
+			) : (
+				<div className="flex-1 overflow-y-auto">
+					{/* subject lives with the content, Apple Mail-style: once per
+					    thread, scrolls with the message */}
+					<div className="border-b border-line px-5 pt-5 pb-3">
+						<h2 className="max-w-2xl text-lg font-semibold leading-snug text-fg">
+							{thread.subject}
+						</h2>
+						<p className="mt-1 text-2xs text-fg-subtle">
+							{thread.messages.length}{" "}
+							{thread.messages.length === 1 ? "message" : "messages"}
+						</p>
+					</div>
+
+					{thread.messages.map((message) =>
+						message.expanded ? (
+							<ExpandedMessage
+								key={message.id}
+								message={message}
+								warning={thread.warning}
+							/>
+						) : (
+							<CollapsedMessage key={message.id} message={message} />
+						),
+					)}
+				</div>
+			)}
+		</article>
+	);
+}