diff --git a/e2e/conversation-thread.spec.ts b/e2e/conversation-thread.spec.ts
new file mode 100644
index 00000000..09a1846f
--- /dev/null
+++ b/e2e/conversation-thread.spec.ts
@@ -0,0 +1,89 @@
+import { expect, test, type Page } from "@playwright/test";
+
+const log = (page: Page) =>
+  page.locator("[data-slot='conversation-thread'] [role='log']");
+
+const reply = (page: Page) => page.getByRole("textbox", { name: "Reply" });
+
+const scrollTop = (page: Page) =>
+  log(page).evaluate((element) => element.scrollTop);
+
+/** How far an item's top sits below the top of the thread's view. */
+const offsetOf = (page: Page, id: string) =>
+  log(page).evaluate((element, itemId) => {
+    const item = element.querySelector(`[data-item-id='${itemId}']`);
+    if (item === null) throw new Error(`no item ${itemId}`);
+    return (
+      item.getBoundingClientRect().top - element.getBoundingClientRect().top
+    );
+  }, id);
+
+/** Waits for the view to stop moving. */
+const settled = async (page: Page) => {
+  let previous = Number.NaN;
+  await expect
+    .poll(
+      async () => {
+        const current = await scrollTop(page);
+        const still = current === previous;
+        previous = current;
+        return still;
+      },
+      { intervals: [100] },
+    )
+    .toBe(true);
+};
+
+const openThread = async (page: Page) => {
+  await page.goto("/conversation-thread");
+  await page.getByRole("button", { name: /12 replies/ }).click();
+  await expect(page.getByRole("tab", { name: "Thread" })).toHaveAttribute(
+    "aria-selected",
+    "true",
+  );
+  await expect(log(page)).toHaveAttribute("aria-label", "Thread");
+  await settled(page);
+};
+
+test("a draft and the scroll position in a thread tab survive switching tabs", async ({
+  page,
+}) => {
+  await openThread(page);
+  // The thread opens at its latest reply.
+  await expect(log(page).locator("[data-item-id='reply-12']")).toBeInViewport();
+  // The thread's log scrolls, not the pane around it.
+  const pane = await log(page).evaluate((element) => {
+    const host = element.closest("[data-slot='panel-pane']");
+    if (host === null) throw new Error("the thread is not in a pane");
+    return { scrollHeight: host.scrollHeight, clientHeight: host.clientHeight };
+  });
+  expect(pane.scrollHeight).toBe(pane.clientHeight);
+  await reply(page).fill("A draft for later");
+  const before = await scrollTop(page);
+  expect(before).toBeGreaterThan(0);
+
+  await page.getByRole("tab", { name: "Notes" }).click();
+  await expect(page.getByText("Notes pane")).toBeVisible();
+  await expect(reply(page)).toBeHidden();
+
+  await page.getByRole("tab", { name: "Thread" }).click();
+  await expect(reply(page)).toBeVisible();
+  await expect(reply(page)).toHaveValue("A draft for later");
+  expect(await scrollTop(page)).toBe(before);
+});
+
+test("sending in the thread settles the sent reply at the top", async ({
+  page,
+}) => {
+  await openThread(page);
+  await reply(page).fill("Add owners to the follow-ups");
+  await reply(page).press("Enter");
+
+  await expect(reply(page)).toHaveValue("");
+  await expect
+    .poll(async () => Math.abs(await offsetOf(page, "sent-1")))
+    .toBeLessThanOrEqual(1);
+  await settled(page);
+  expect(Math.abs(await offsetOf(page, "sent-1"))).toBeLessThanOrEqual(1);
+  await expect(log(page).locator("[data-item-id='answer-1']")).toBeVisible();
+});
diff --git a/e2e/fixtures.tsx b/e2e/fixtures.tsx
index 86d7af7a..7e41c2bd 100644
--- a/e2e/fixtures.tsx
+++ b/e2e/fixtures.tsx
@@ -83,6 +83,10 @@ import {
   useMediaViewer,
   type ConversationImage,
   type PartImage,
+  ConversationThread,
+  MessageReplies,
+  type ConversationMessage,
+  type ConversationParticipant,
 } from "@corbits/react-ui";
 import {
   CommandPalette,
@@ -1536,6 +1540,156 @@ function MediaViewerChatScenario() {
   );
 }
 
+const THREAD_AGENT: ConversationParticipant = {
+  id: "agent",
+  kind: "agent",
+  name: "Agent",
+};
+
+const THREAD_READER: ConversationParticipant = {
+  id: "reader",
+  kind: "person",
+  name: "Reader",
+};
+
+function threadMessage(
+  id: string,
+  author: ConversationParticipant,
+  text: string,
+): ConversationMessage {
+  return {
+    id,
+    author,
+    at: "2026-03-04T11:00:00.000Z",
+    status: "sent",
+    parts: [{ kind: "text", text }],
+  };
+}
+
+const THREAD_PARENT: ConversationMessage = {
+  ...threadMessage("parent", THREAD_AGENT, "The weekly report is ready."),
+  replies: { count: 12, lastAt: "2026-03-04T11:30:00.000Z" },
+};
+
+const THREAD_REPLIES = Array.from({ length: 12 }, (_, index) =>
+  threadMessage(
+    `reply-${index + 1}`,
+    index % 2 === 0 ? THREAD_READER : THREAD_AGENT,
+    `Reply ${index + 1}: a note on the report, long enough to wrap onto a second line in the panel.`,
+  ),
+);
+
+function ThreadMessage({ message }: { message: ConversationMessage }) {
+  const own = message.author.id === THREAD_READER.id;
+  return (
+    <Message
+      from={own ? "own" : "agent"}
+      aria-label={`${message.author.name} ${message.id}`}
+    >
+      <MessageContent
+        text={message.parts
+          .map((part) => (part.kind === "text" ? part.text : ""))
+          .join("")}
+      />
+    </Message>
+  );
+}
+
+const renderThreadMessage = (message: ConversationMessage) => (
+  <ThreadMessage message={message} />
+);
+
+// A thread's tab keeps its draft and replies in its own state, so they last
+// exactly as long as the pane stays mounted.
+function ThreadPaneScenario() {
+  const [replies, setReplies] = useState(THREAD_REPLIES);
+  const [draft, setDraft] = useState("");
+  const [sentId, setSentId] = useState<string>();
+  const [sends, setSends] = useState(0);
+  return (
+    <ConversationThread
+      parent={THREAD_PARENT}
+      replies={replies}
+      renderMessage={renderThreadMessage}
+      sentId={sentId}
+    >
+      <PromptInput
+        value={draft}
+        onValueChange={setDraft}
+        onSubmit={() => {
+          const count = sends + 1;
+          setSends(count);
+          setReplies((current) => [
+            ...current,
+            threadMessage(`sent-${count}`, THREAD_READER, draft),
+            threadMessage(`answer-${count}`, THREAD_AGENT, "Noted."),
+          ]);
+          setSentId(`sent-${count}`);
+          setDraft("");
+        }}
+      >
+        <PromptInputTextarea aria-label="Reply" />
+        <PromptInputSubmit />
+      </PromptInput>
+    </ConversationThread>
+  );
+}
+
+type ThreadScenarioTab = { value: string; title: string };
+
+function ConversationThreadScenario() {
+  const { tabs, value, open, tabsProps, paneProps } =
+    useTabs<ThreadScenarioTab>({
+      defaultTabs: [{ value: "notes", title: "Notes" }],
+    });
+  return (
+    <div
+      style={{
+        position: "relative",
+        display: "flex",
+        height: 600,
+        width: 1200,
+        containerType: "inline-size",
+      }}
+    >
+      <main style={{ flex: 1, minWidth: 0 }}>
+        <ThreadMessage message={THREAD_PARENT} />
+        {THREAD_PARENT.replies === undefined ? null : (
+          <MessageReplies
+            replies={THREAD_PARENT.replies}
+            now={Date.parse("2026-03-04T12:00:00.000Z")}
+            onClick={() => open({ value: "thread", title: "Thread" })}
+          />
+        )}
+      </main>
+      {value === null ? null : (
+        <Panel aria-label="Side panel">
+          <PanelHeader className="items-end bg-muted pt-1.5 pb-0">
+            <PanelTabs label="Open items" {...tabsProps}>
+              {tabs.map((tab) => (
+                <PanelTab key={tab.value} value={tab.value}>
+                  {tab.title}
+                </PanelTab>
+              ))}
+            </PanelTabs>
+          </PanelHeader>
+          <PanelContent value={value} keepMounted>
+            {tabs.map((tab) => (
+              <PanelPane
+                key={tab.value}
+                value={tab.value}
+                {...paneProps(tab.value)}
+              >
+                {tab.value === "thread" ? <ThreadPaneScenario /> : "Notes pane"}
+              </PanelPane>
+            ))}
+          </PanelContent>
+        </Panel>
+      )}
+    </div>
+  );
+}
+
 export const scenarios: Record<string, () => ReactNode> = {
   smoke: () => <Button>Ready</Button>,
   "approval-card": () => <Approval state="idle" />,
@@ -1608,4 +1762,5 @@ export const scenarios: Record<string, () => ReactNode> = {
   attachments: () => <AttachmentsScenario />,
   "media-viewer": () => <MediaViewerScenario />,
   "media-viewer-chat": () => <MediaViewerChatScenario />,
+  "conversation-thread": () => <ConversationThreadScenario />,
 };
diff --git a/src/index.ts b/src/index.ts
index 6d7434b1..e371e27d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -160,3 +160,4 @@ export * from "./ui/attachment-drop-zone.js";
 export * from "./ui/generated-images.js";
 export * from "./ui/sources.js";
 export * from "./ui/media-viewer.js";
+export * from "./ui/conversation-thread.js";
diff --git a/src/ui/conversation-thread.test.tsx b/src/ui/conversation-thread.test.tsx
new file mode 100644
index 00000000..9bc44cd6
--- /dev/null
+++ b/src/ui/conversation-thread.test.tsx
@@ -0,0 +1,247 @@
+import { act, createRef } from "react";
+import type { ReactElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { describe, expect, test } from "bun:test";
+
+import type {
+  ConversationMessage,
+  ConversationParticipant,
+} from "../lib/conversation.js";
+import { ConversationThread } from "./conversation-thread.js";
+
+type Mounted = {
+  container: HTMLElement;
+  rerender: (node: ReactElement) => void;
+  unmount: () => void;
+};
+
+function render(node: ReactElement): Mounted {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  let root!: Root;
+  act(() => {
+    root = createRoot(container);
+    root.render(node);
+  });
+  return {
+    container,
+    rerender: (next) => act(() => root.render(next)),
+    unmount: () => {
+      act(() => root.unmount());
+      container.remove();
+    },
+  };
+}
+
+const agent: ConversationParticipant = {
+  id: "agent",
+  kind: "agent",
+  name: "Agent",
+};
+
+function message(id: string, text: string): ConversationMessage {
+  return {
+    id,
+    author: agent,
+    at: "2026-03-04T12:00:00.000Z",
+    status: "sent",
+    parts: [{ kind: "text", text }],
+  };
+}
+
+const parent = message("parent", "The parent");
+const replies = [message("r1", "First reply"), message("r2", "Second reply")];
+
+const renderMessage = (item: ConversationMessage) => (
+  <p data-testid={item.id}>
+    {item.parts.map((part) => (part.kind === "text" ? part.text : null))}
+  </p>
+);
+
+function items(container: HTMLElement): string[] {
+  return [
+    ...container.querySelectorAll<HTMLElement>(
+      "[data-slot='conversation-item']",
+    ),
+  ].map((element) => element.dataset.itemId ?? "");
+}
+
+describe("ConversationThread", () => {
+  test("heads the thread with its parent, then a count, then the replies in order", () => {
+    const mounted = render(
+      <ConversationThread
+        parent={parent}
+        replies={replies}
+        renderMessage={renderMessage}
+      />,
+    );
+    const log = mounted.container.querySelector("[role='log']");
+    expect(log?.getAttribute("aria-label")).toBe("Thread");
+    expect(items(mounted.container)).toEqual(["parent", "r1", "r2"]);
+    const column = mounted.container.querySelector(
+      "[data-slot='conversation-column']",
+    );
+    const order = [...(column?.children ?? [])].map(
+      (child) => child.getAttribute("data-slot") ?? "",
+    );
+    expect(order).toEqual([
+      "conversation-item",
+      "conversation-divider",
+      "conversation-item",
+      "conversation-item",
+    ]);
+    expect(
+      mounted.container.querySelector("[data-slot='conversation-divider']")
+        ?.textContent,
+    ).toBe("2 replies");
+    expect(
+      mounted.container.querySelector("[data-testid='parent']")?.textContent,
+    ).toBe("The parent");
+    mounted.unmount();
+  });
+
+  test("counts one reply, and says when there are none yet", () => {
+    const divider = (mounted: Mounted) =>
+      mounted.container.querySelector("[data-slot='conversation-divider']")
+        ?.textContent;
+    const mounted = render(
+      <ConversationThread
+        parent={parent}
+        replies={[]}
+        renderMessage={renderMessage}
+      />,
+    );
+    expect(divider(mounted)).toBe("No replies yet");
+    expect(items(mounted.container)).toEqual(["parent"]);
+    mounted.rerender(
+      <ConversationThread
+        parent={parent}
+        replies={replies.slice(0, 1)}
+        renderMessage={renderMessage}
+      />,
+    );
+    expect(divider(mounted)).toBe("1 reply");
+    expect(items(mounted.container)).toEqual(["parent", "r1"]);
+    mounted.unmount();
+  });
+
+  test("puts the input under the conversation, outside the log", () => {
+    const mounted = render(
+      <ConversationThread
+        parent={parent}
+        replies={replies}
+        renderMessage={renderMessage}
+        labels={{ log: "Thread: the parent" }}
+      >
+        <textarea aria-label="Reply" />
+      </ConversationThread>,
+    );
+    const root = mounted.container.querySelector<HTMLElement>(
+      "[data-slot='conversation-thread']",
+    );
+    const input = mounted.container.querySelector(
+      "[data-slot='conversation-thread-input']",
+    );
+    expect(input?.parentElement).toBe(root);
+    expect(input?.previousElementSibling?.getAttribute("data-slot")).toBe(
+      "conversation",
+    );
+    expect(input?.querySelector("textarea")).not.toBeNull();
+    expect(input?.closest("[role='log']")).toBeNull();
+    expect(
+      mounted.container
+        .querySelector("[role='log']")
+        ?.getAttribute("aria-label"),
+    ).toBe("Thread: the parent");
+    mounted.unmount();
+  });
+
+  test("leaves out the input slot without children", () => {
+    const mounted = render(
+      <ConversationThread
+        parent={parent}
+        replies={replies}
+        renderMessage={renderMessage}
+      />,
+    );
+    expect(
+      mounted.container.querySelector(
+        "[data-slot='conversation-thread-input']",
+      ),
+    ).toBeNull();
+    mounted.unmount();
+  });
+
+  test("gives the root its ref, props and classes, and the policy to the conversation", () => {
+    const ref = createRef<HTMLDivElement>();
+    const mounted = render(
+      <ConversationThread
+        ref={ref}
+        id="thread-root"
+        className="bg-background"
+        parent={parent}
+        replies={replies}
+        renderMessage={renderMessage}
+        scrollPolicy="stick"
+      />,
+    );
+    expect(ref.current?.dataset.slot).toBe("conversation-thread");
+    expect(ref.current?.id).toBe("thread-root");
+    expect(ref.current?.className).toContain("bg-background");
+    expect(ref.current?.className).toContain("flex-col");
+    expect(
+      mounted.container
+        .querySelector("[data-slot='conversation']")
+        ?.getAttribute("data-scroll-policy"),
+    ).toBe("stick");
+    mounted.unmount();
+  });
+
+  test("names the log by aria-labelledby, and takes its own labels", () => {
+    const mounted = render(
+      <>
+        <span id="thread-tab">Weekly report</span>
+        <ConversationThread
+          aria-labelledby="thread-tab"
+          parent={parent}
+          replies={replies}
+          renderMessage={renderMessage}
+          labels={{ replies: (count) => `${count} answers` }}
+        />
+      </>,
+    );
+    const log = mounted.container.querySelector("[role='log']");
+    expect(log?.getAttribute("aria-labelledby")).toBe("thread-tab");
+    expect(log?.hasAttribute("aria-label")).toBe(false);
+    expect(
+      mounted.container
+        .querySelector("[data-slot='conversation-thread']")
+        ?.hasAttribute("aria-labelledby"),
+    ).toBe(false);
+    expect(
+      mounted.container.querySelector("[data-thread-divider]")?.textContent,
+    ).toBe("2 answers");
+    mounted.unmount();
+  });
+
+  test("an aria-label names the log, not the root", () => {
+    const mounted = render(
+      <ConversationThread
+        aria-label="Replies to the weekly report"
+        parent={parent}
+        replies={replies}
+        renderMessage={renderMessage}
+      />,
+    );
+    const log = mounted.container.querySelector("[role='log']");
+    expect(log?.getAttribute("aria-label")).toBe(
+      "Replies to the weekly report",
+    );
+    expect(
+      mounted.container
+        .querySelector("[data-slot='conversation-thread']")
+        ?.hasAttribute("aria-label"),
+    ).toBe(false);
+    mounted.unmount();
+  });
+});
diff --git a/src/ui/conversation-thread.tsx b/src/ui/conversation-thread.tsx
new file mode 100644
index 00000000..e09df17e
--- /dev/null
+++ b/src/ui/conversation-thread.tsx
@@ -0,0 +1,127 @@
+import type { ComponentProps, ReactNode } from "react";
+
+import type { ConversationMessage } from "../lib/conversation.js";
+import { cn } from "../lib/utils.js";
+import {
+  Conversation,
+  ConversationContent,
+  ConversationItem,
+  ConversationScrollButton,
+  type ConversationScrollPolicy,
+} from "./conversation.js";
+import { ConversationDivider } from "./conversation-divider.js";
+
+export type ConversationThreadLabels = {
+  /**
+   * The log's accessible name when neither `aria-label` nor
+   * `aria-labelledby` is given.
+   */
+  readonly log: string;
+  /** The rule between the parent and the replies. */
+  readonly replies: (count: number) => string;
+};
+
+const LABELS: ConversationThreadLabels = {
+  log: "Thread",
+  replies: (count) =>
+    count === 0
+      ? "No replies yet"
+      : count === 1
+        ? "1 reply"
+        : `${count} replies`,
+};
+
+export type ConversationThreadProps = Omit<
+  ComponentProps<"div">,
+  "children"
+> & {
+  /** The message the thread hangs off, shown first. */
+  readonly parent: ConversationMessage;
+  /** The replies, oldest first. The rule counts these, not `parent.replies`. */
+  readonly replies: readonly ConversationMessage[];
+  /**
+   * Renders one message, the parent or a reply, from the `Message` parts:
+   * the same renderer the host uses for its main conversation.
+   */
+  readonly renderMessage: (message: ConversationMessage) => ReactNode;
+  /**
+   * The id of the reader's latest reply sent in this thread, as on
+   * `Conversation`: each change is a send, and the value at mount is
+   * history. Keep it per thread: an id that is not one of the thread's
+   * items, one from another conversation say, is ignored.
+   */
+  readonly sentId?: string | undefined;
+  /** Defaults to `settle`. */
+  readonly scrollPolicy?: ConversationScrollPolicy | undefined;
+  readonly labels?: Partial<ConversationThreadLabels> | undefined;
+  /** The input under the replies: the thread's own `PromptInput`. */
+  readonly children?: ReactNode;
+};
+
+/**
+ * A reply conversation, a thread: the parent message, a rule counting the
+ * replies, the replies, and the thread's own input under them. Unlike the
+ * main `Conversation`, it is headed by the message it hangs off.
+ *
+ * It fills its container, a `PanelPane` in a `PanelContent` with
+ * `keepMounted`: a hidden pane stays laid out, so the thread keeps its scroll
+ * position, its settled reply and its draft while another tab is in front.
+ * A thread that is unmounted or given no size while hidden starts over.
+ *
+ * Every message goes through `renderMessage`, so the thread is built from the
+ * same parts as the main conversation. It opens at its latest reply; under
+ * `settle`, a reply the reader sends glides to the top of the view and the
+ * answer writes in below it.
+ *
+ * `aria-labelledby` or `aria-label` names the log (the tab that shows the
+ * thread, say); every other prop goes to the root. For styling, the parent's
+ * item carries `data-thread-parent` and the rule `data-thread-divider`.
+ */
+export function ConversationThread({
+  parent,
+  replies,
+  renderMessage,
+  sentId,
+  scrollPolicy = "settle",
+  labels: labelOverrides,
+  "aria-labelledby": labelledBy,
+  "aria-label": label,
+  className,
+  children,
+  ...props
+}: ConversationThreadProps) {
+  const labels = { ...LABELS, ...labelOverrides };
+  return (
+    <div
+      data-slot="conversation-thread"
+      className={cn("flex h-full min-h-0 flex-col", className)}
+      {...props}
+    >
+      <Conversation scrollPolicy={scrollPolicy} sentId={sentId}>
+        <ConversationContent
+          {...(labelledBy === undefined
+            ? { "aria-label": label ?? labels.log }
+            : { "aria-labelledby": labelledBy })}
+        >
+          <ConversationItem itemId={parent.id} data-thread-parent="">
+            {renderMessage(parent)}
+          </ConversationItem>
+          <ConversationDivider data-thread-divider="">
+            {labels.replies(replies.length)}
+          </ConversationDivider>
+          {replies.map((reply) => (
+            <ConversationItem key={reply.id} itemId={reply.id}>
+              {renderMessage(reply)}
+            </ConversationItem>
+          ))}
+        </ConversationContent>
+        <ConversationScrollButton />
+      </Conversation>
+      {children === undefined || children === null ? null : (
+        <div data-slot="conversation-thread-input" className="px-4 pb-4">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/stories/chat/conversation-thread.stories.tsx b/stories/chat/conversation-thread.stories.tsx
new file mode 100644
index 00000000..495456b5
--- /dev/null
+++ b/stories/chat/conversation-thread.stories.tsx
@@ -0,0 +1,438 @@
+import { FileText, MessageSquare } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+
+import { panelTabIds, useTabs } from "../../src/hooks/use-tabs.js";
+import type { ConversationMessage } from "../../src/lib/conversation.js";
+import {
+  Conversation,
+  ConversationContent,
+  ConversationItem,
+  type ConversationScrollPolicy,
+} from "../../src/ui/conversation.js";
+import { ConversationThread } from "../../src/ui/conversation-thread.js";
+import {
+  Message,
+  MessageAvatar,
+  MessageContent,
+  MessageFooter,
+  MessageHeader,
+  type MessageFrom,
+} from "../../src/ui/message.js";
+import { MessageReplies } from "../../src/ui/message-replies.js";
+import {
+  Panel,
+  PanelActions,
+  PanelClose,
+  PanelContent,
+  PanelHandle,
+  PanelHeader,
+  PanelPane,
+} from "../../src/ui/panel.js";
+import { PanelTab, PanelTabs } from "../../src/ui/panel-tabs.js";
+import {
+  PromptInput,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  type PromptInputStatus,
+} from "../../src/ui/prompt-input.js";
+import {
+  SAMPLE_NOW,
+  assistant,
+  shortChat,
+  withThread,
+  you,
+} from "./samples/conversations.js";
+import { playTurn } from "./samples/play-turn.js";
+
+export default { title: "Chat / Conversation Thread" };
+
+const NOW = Date.parse(SAMPLE_NOW);
+
+function textOf(message: ConversationMessage): string {
+  return message.parts
+    .flatMap((part) => (part.kind === "text" ? [part.text] : []))
+    .join("\n\n");
+}
+
+function fromOf(message: ConversationMessage): MessageFrom {
+  if (message.author.id === you.id) return "own";
+  return message.author.kind;
+}
+
+function find(
+  messages: readonly ConversationMessage[],
+  id: string,
+): ConversationMessage {
+  const message = messages.find((candidate) => candidate.id === id);
+  if (message === undefined) throw new Error(`no sample message ${id}`);
+  return message;
+}
+
+/** One message from the parts, the same in the main conversation and a thread. */
+function SampleMessage({
+  message,
+  footer,
+}: {
+  readonly message: ConversationMessage;
+  readonly footer?: ReactNode;
+}) {
+  const from = fromOf(message);
+  const own = from === "own";
+  return (
+    <Message
+      from={from}
+      status={message.status}
+      error={message.error}
+      aria-label={own ? "You" : undefined}
+    >
+      {own ? null : <MessageAvatar name={message.author.name} />}
+      {own ? null : (
+        <MessageHeader
+          name={message.author.name}
+          role={message.author.role}
+          at={message.at}
+          now={NOW}
+        />
+      )}
+      <MessageContent text={textOf(message)} />
+      {footer === undefined ? null : <MessageFooter>{footer}</MessageFooter>}
+    </Message>
+  );
+}
+
+const renderMessage = (message: ConversationMessage) => (
+  <SampleMessage message={message} />
+);
+
+const ANSWERS = [
+  "Done. The follow-ups section now leads with the missing test, then the two slow steps.",
+  "I added an owner and a due date to each follow-up, and linked the run each one came from.",
+  "The report now shows which follow-ups carried over from last week, so nothing gets lost.",
+];
+
+type RepliesUpdate = (
+  current: readonly ConversationMessage[],
+) => readonly ConversationMessage[];
+
+/**
+ * A thread's tab: the replies and the thread's own input. Sending adds the
+ * reader's reply, which settles at the top, and the answer writes in below.
+ * Kept mounted while another tab is in front, so the draft stays. The
+ * replies live with the chat, so the count under the parent keeps up.
+ */
+function ThreadTab({
+  parent,
+  replies,
+  onRepliesChange,
+  scrollPolicy,
+  labelledBy,
+  focusRequest,
+}: {
+  readonly parent: ConversationMessage;
+  readonly replies: readonly ConversationMessage[];
+  readonly onRepliesChange: (parentId: string, update: RepliesUpdate) => void;
+  /** The tab that shows the thread, which names its log. */
+  readonly labelledBy: string;
+  readonly scrollPolicy?: ConversationScrollPolicy | undefined;
+  /** Bumped each time the reader opens this thread, to move focus to its input. */
+  readonly focusRequest: number;
+}) {
+  const input = useRef<HTMLTextAreaElement>(null);
+  useEffect(() => {
+    if (focusRequest > 0) input.current?.focus();
+  }, [focusRequest]);
+  const [draft, setDraft] = useState("");
+  const [sentId, setSentId] = useState<string>();
+  const [status, setStatus] = useState<PromptInputStatus>("ready");
+  const stop = useRef<(() => void) | null>(null);
+  const streamingId = useRef<string | null>(null);
+  // Stops the answer where it stands, so the kept reply doesn't read as
+  // still streaming once the tab is gone.
+  const stopAnswer = useCallback(() => {
+    stop.current?.();
+    const id = streamingId.current;
+    if (id === null) return;
+    streamingId.current = null;
+    onRepliesChange(parent.id, (current) =>
+      current.map((reply) =>
+        reply.id === id ? { ...reply, status: "sent" } : reply,
+      ),
+    );
+  }, [onRepliesChange, parent.id]);
+  useEffect(() => stopAnswer, [stopAnswer]);
+
+  const send = () => {
+    // The replies outlive the tab, so the count comes from them.
+    const count =
+      replies.filter((reply) => reply.id.startsWith(`${parent.id}-sent-`))
+        .length + 1;
+    const sent: ConversationMessage = {
+      id: `${parent.id}-sent-${count}`,
+      author: you,
+      at: SAMPLE_NOW,
+      status: "sent",
+      parts: [{ kind: "text", text: draft.trim() }],
+    };
+    const answer: ConversationMessage = {
+      id: `${parent.id}-answer-${count}`,
+      author: assistant,
+      at: SAMPLE_NOW,
+      status: "sent",
+      parts: [
+        { kind: "text", text: ANSWERS[(count - 1) % ANSWERS.length] ?? "" },
+      ],
+    };
+    onRepliesChange(parent.id, (current) => [...current, sent]);
+    setSentId(sent.id);
+    setDraft("");
+    setStatus("streaming");
+    streamingId.current = answer.id;
+    stop.current = playTurn(
+      answer,
+      (frame) => {
+        onRepliesChange(parent.id, (current) => [
+          ...current.filter((reply) => reply.id !== frame.id),
+          frame,
+        ]);
+        if (frame === answer) {
+          streamingId.current = null;
+          setStatus("ready");
+        }
+      },
+      { stepMs: 120 },
+    );
+  };
+
+  return (
+    <ConversationThread
+      parent={parent}
+      replies={replies}
+      renderMessage={renderMessage}
+      sentId={sentId}
+      scrollPolicy={scrollPolicy}
+      aria-labelledby={labelledBy}
+    >
+      <PromptInput
+        value={draft}
+        onValueChange={setDraft}
+        onSubmit={send}
+        status={status}
+      >
+        <PromptInputTextarea
+          ref={input}
+          aria-label="Reply"
+          placeholder="Reply…"
+        />
+        <PromptInputSubmit
+          onStop={() => {
+            stopAnswer();
+            setStatus("ready");
+          }}
+        />
+      </PromptInput>
+    </ConversationThread>
+  );
+}
+
+type Tab = {
+  readonly value: string;
+  readonly title: string;
+  readonly kind: "thread" | "notes";
+};
+
+const NOTES: Tab = { value: "notes", title: "Run notes", kind: "notes" };
+
+function threadTab(parent: ConversationMessage): Tab {
+  return {
+    value: `thread:${parent.id}`,
+    title: `Thread: ${textOf(parent).slice(0, 40)}`,
+    kind: "thread",
+  };
+}
+
+function Notes() {
+  return (
+    <div className="flex flex-col gap-3 p-4 text-sm">
+      <h2 className="font-semibold">Run notes</h2>
+      <p className="text-muted-foreground">
+        Fourteen runs this week. The export step paged through every result
+        before filtering, so it finished a little later than usual.
+      </p>
+    </div>
+  );
+}
+
+/**
+ * The main conversation beside a panel of tabs. A message's replies open its
+ * thread as a tab; each thread has its own input, and a reply sent there
+ * updates the count under its parent.
+ */
+function ChatWithThreads({
+  messages,
+  threads,
+  openThread,
+  scrollPolicy,
+}: {
+  readonly messages: readonly ConversationMessage[];
+  /** Each thread's replies at first, by parent id. */
+  readonly threads: Readonly<Record<string, readonly ConversationMessage[]>>;
+  /** A thread open at first, beside the notes tab. */
+  readonly openThread?: string;
+  readonly scrollPolicy?: ConversationScrollPolicy | undefined;
+}) {
+  const opened =
+    openThread === undefined ? undefined : find(messages, openThread);
+  const { tabs, value, open, tabsProps, paneProps } = useTabs<Tab>({
+    defaultTabs: opened === undefined ? [] : [NOTES, threadTab(opened)],
+    defaultValue: opened === undefined ? null : threadTab(opened).value,
+  });
+  const [threadReplies, setThreadReplies] = useState(threads);
+  const updateReplies = useCallback(
+    (parentId: string, update: RepliesUpdate) =>
+      setThreadReplies((current) => ({
+        ...current,
+        [parentId]: update(current[parentId] ?? []),
+      })),
+    [],
+  );
+  const [closed, setClosed] = useState(false);
+  const [focusRequests, setFocusRequests] = useState<
+    Readonly<Record<string, number>>
+  >({});
+  const shown = closed ? null : value;
+  const byValue = new Map(
+    messages.map((message) => [threadTab(message).value, message]),
+  );
+  return (
+    <div className="@container relative flex h-[640px] overflow-hidden rounded-lg border border-border bg-background text-foreground">
+      <main className="flex min-w-0 flex-1 flex-col">
+        <Conversation>
+          <ConversationContent aria-label="Conversation">
+            {messages.map((message) => {
+              const replies = threadReplies[message.id];
+              const tab = threadTab(message);
+              return (
+                <ConversationItem key={message.id} itemId={message.id}>
+                  <SampleMessage
+                    message={message}
+                    footer={
+                      message.replies === undefined ||
+                      replies === undefined ? undefined : (
+                        <MessageReplies
+                          replies={{
+                            count: replies.length,
+                            lastAt:
+                              replies.at(-1)?.at ?? message.replies.lastAt,
+                          }}
+                          now={NOW}
+                          aria-expanded={shown === tab.value}
+                          onClick={() => {
+                            setClosed(false);
+                            open(tab);
+                            setFocusRequests((current) => ({
+                              ...current,
+                              [tab.value]: (current[tab.value] ?? 0) + 1,
+                            }));
+                          }}
+                        />
+                      )
+                    }
+                  />
+                </ConversationItem>
+              );
+            })}
+          </ConversationContent>
+        </Conversation>
+      </main>
+      {shown === null ? null : (
+        <Panel aria-label="Side panel">
+          <PanelHandle />
+          <PanelHeader className="items-end bg-muted pt-1.5 pb-0">
+            <PanelTabs label="Open items" {...tabsProps}>
+              {tabs.map((tab) => (
+                <PanelTab
+                  key={tab.value}
+                  value={tab.value}
+                  icon={
+                    tab.kind === "thread" ? <MessageSquare /> : <FileText />
+                  }
+                  title={tab.title}
+                >
+                  {tab.title}
+                </PanelTab>
+              ))}
+            </PanelTabs>
+            <PanelActions className="mb-0.5 self-end">
+              <PanelClose onClick={() => setClosed(true)} />
+            </PanelActions>
+          </PanelHeader>
+          <PanelContent value={shown} keepMounted>
+            {tabs.map((tab) => {
+              const parent = byValue.get(tab.value);
+              return (
+                <PanelPane
+                  key={tab.value}
+                  value={tab.value}
+                  {...paneProps(tab.value)}
+                >
+                  {parent === undefined ? (
+                    <Notes />
+                  ) : (
+                    <ThreadTab
+                      parent={parent}
+                      replies={threadReplies[parent.id] ?? []}
+                      onRepliesChange={updateReplies}
+                      scrollPolicy={scrollPolicy}
+                      labelledBy={
+                        panelTabIds(tabsProps.idPrefix, tab.value).tab
+                      }
+                      focusRequest={focusRequests[tab.value] ?? 0}
+                    />
+                  )}
+                </PanelPane>
+              );
+            })}
+          </PanelContent>
+        </Panel>
+      )}
+    </div>
+  );
+}
+
+const THREADS = withThread.thread
+  ? { [withThread.thread.parentId]: withThread.thread.replies }
+  : {};
+
+/** A thread open in a tab beside another: send a reply to see it settle. */
+export const InPanelTab = () => (
+  <ChatWithThreads
+    messages={withThread.messages}
+    threads={THREADS}
+    openThread="thread-2"
+  />
+);
+
+/** The panel starts closed; the replies under a message open its thread. */
+export const OpenFromReplies = () => (
+  <ChatWithThreads messages={withThread.messages} threads={THREADS} />
+);
+
+/** A thread just started: the parent and no replies yet. */
+export const NoReplies = () => (
+  <ChatWithThreads
+    messages={shortChat.messages}
+    threads={{ "short-2": [] }}
+    openThread="short-2"
+  />
+);
+
+/** The thread follows its end as answers arrive instead of settling. */
+export const StickPolicy = () => (
+  <ChatWithThreads
+    messages={withThread.messages}
+    threads={THREADS}
+    openThread="thread-2"
+    scrollPolicy="stick"
+  />
+);