diff --git a/.changeset/stock-assistant-parity.md b/.changeset/stock-assistant-parity.md
new file mode 100644
index 00000000000..a34b454b34c
--- /dev/null
+++ b/.changeset/stock-assistant-parity.md
@@ -0,0 +1,5 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Keep the stock AI assistant presentation unchanged by the Brunch conversation UI: chronological messages, stock tool rows, tabs, scrolling and composer. A tool stopped mid-run now shows Cancelled instead of a spinner.
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel.test.tsx
index aea07e14582..b4b6d35ed4c 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel.test.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel.test.tsx
@@ -582,7 +582,7 @@ describe("AiAssistantPanel composer submissions", () => {
       ]),
     );
     const ledgerTab = screen.getByRole("tab", { name: "Ledger" });
-    expect(ledgerTab.querySelector("[data-attention]")).not.toBeNull();
+    expect(ledgerTab.querySelector('[aria-hidden="true"]')).not.toBeNull();
 
     fireEvent.click(ledgerTab);
     await waitFor(() => expect(screen.queryByText("9+")).toBeNull());
@@ -667,14 +667,14 @@ describe("AiAssistantPanel composer submissions", () => {
 
     const chatTab = await screen.findByRole("tab", { name: "Chat" });
     await waitFor(() =>
-      expect(chatTab.querySelector("[data-attention]")).not.toBeNull(),
+      expect(chatTab.querySelector('[aria-hidden="true"]')).not.toBeNull(),
     );
     fireEvent.click(chatTab);
     await waitFor(() =>
       expect(
         screen
           .getByRole("tab", { name: "Chat" })
-          .querySelector("[data-attention]"),
+          .querySelector('[aria-hidden="true"]'),
       ).toBeNull(),
     );
   });
@@ -705,7 +705,7 @@ describe("AiAssistantPanel composer submissions", () => {
 
     const chatTab = await screen.findByRole("tab", { name: "Chat" });
     await waitFor(() =>
-      expect(chatTab.querySelector("[data-attention]")).not.toBeNull(),
+      expect(chatTab.querySelector('[aria-hidden="true"]')).not.toBeNull(),
     );
   });
 
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents.test.tsx
index dfbbb80baee..56a30c1b9ed 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents.test.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents.test.tsx
@@ -25,9 +25,6 @@ import { VoiceSessionContext } from "../../../../../react/voice-session/context"
 import { createVoiceSessionStore } from "../../../../../react/voice-session/store";
 import { definePetrinautAiInteractiveTool } from "../../../../types/ai-interactive-tool";
 import { AiAssistantContents } from "./ai-assistant-contents";
-import { VoiceDock } from "./ai-assistant-contents/voice-dock";
-import { AudioSettings } from "./ai-assistant-contents/voice-dock/audio-popover/settings";
-import { VoiceInputProvenance } from "./ai-assistant-contents/voice-input-provenance";
 
 import type { PetrinautAiMessage } from "./types";
 
@@ -171,873 +168,6 @@ const DockingHarness = ({
   );
 };
 
-test("live-capability dock keeps microphone direct and Realtime controls absent", async () => {
-  const end = vi.fn();
-  const collapse = vi.fn();
-  const setMicrophoneMuted = vi.fn();
-  const setSpeakerMuted = vi.fn();
-  const setSpeakerVolume = vi.fn();
-  render(
-    <VoiceDock
-      actions={{
-        end,
-        pause: noop,
-        setMicrophoneMuted,
-        setSpeakerMuted,
-        setSpeakerVolume,
-      }}
-      assistantBusy={false}
-      canReadFullResponse={false}
-      canRepeatQuestion={false}
-      canTakeTurn={false}
-      collapsed={false}
-      indicator={<span />}
-      microphoneMuted={false}
-      onStop={noop}
-      onCollapsedToggle={collapse}
-      phase="connected"
-      speakerMuted={false}
-      speakerVolume={1}
-    />,
-  );
-  expect(screen.getByText("Connected")).toBeTruthy();
-  const microphone = screen.getByRole("button", { name: "Mute microphone" });
-  expect(microphone).not.toBeNull();
-  expect(screen.queryByRole("button", { name: "Your turn" })).toBeNull();
-  fireEvent.click(screen.getByRole("button", { name: "Hide conversation" }));
-  expect(collapse).toHaveBeenCalledOnce();
-  fireEvent.click(microphone);
-  expect(setMicrophoneMuted).toHaveBeenCalledWith(true);
-
-  fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
-  expect(
-    await screen.findByRole("button", { name: "Mute speaker" }),
-  ).toBeTruthy();
-  expect(
-    screen
-      .getByRole("slider", { name: "Speaker volume" })
-      .getAttribute("aria-valuenow"),
-  ).toBe("100");
-  expect(screen.queryByRole("button", { name: "Repeat question" })).toBeNull();
-  expect(screen.queryByRole("button", { name: "Read full reply" })).toBeNull();
-  expect(
-    screen.queryByRole("checkbox", { name: "Allow interruptions" }),
-  ).toBeNull();
-  expect(
-    microphone.closest('[data-scope="popover"][data-part="content"]'),
-  ).toBeNull();
-
-  fireEvent.click(screen.getByRole("button", { name: "End voice mode" }));
-  expect(end).toHaveBeenCalledOnce();
-});
-
-test("keeps crowded Voice actions fixed while status content can shrink", () => {
-  render(
-    <VoiceDock
-      actions={{
-        audioSettings: {
-          refreshDevices: noop,
-          requestSpeaker: noop,
-          setMicrophoneDevice: noop,
-          setSpeakerDevice: noop,
-          setVoice: noop,
-          stopVoicePreview: noop,
-        },
-        end: noop,
-        pause: noop,
-        retryPlayback: noop,
-        setMicrophoneMuted: noop,
-        setSpeakerMuted: noop,
-        setSpeakerVolume: noop,
-        takeTurn: noop,
-      }}
-      assistantBusy
-      canReadFullResponse={false}
-      canRepeatQuestion={false}
-      canRetryPlayback
-      canTakeTurn
-      collapsed={false}
-      indicator={<span data-testid="waveform" />}
-      microphoneMuted={false}
-      notice="Audio playback is blocked. Select Play voice audio to hear Live."
-      onCollapsedToggle={noop}
-      onStop={noop}
-      phase="speaking"
-      speakerMuted={false}
-      speakerVolume={1}
-    />,
-  );
-
-  const dock = screen.getByTestId("ai-voice-dock");
-  const getPart = (part: string) => {
-    const element = dock.querySelector<HTMLElement>(`[data-part="${part}"]`);
-    if (!element) throw new Error(`Missing Voice dock part: ${part}`);
-    return element;
-  };
-  const leftActions = getPart("left-actions");
-  const center = getPart("shrinkable-status");
-  const indicator = getPart("fixed-indicator");
-  const status = getPart("visible-status");
-  const rightActions = getPart("right-actions");
-  const liveStatus = getPart("live-status");
-
-  expect(dock.className).toContain("d_grid");
-  expect(dock.className).toContain("grid-tc_[auto_minmax(0,_1fr)_auto]");
-  expect(leftActions.className).toContain("flex-sh_0");
-  expect(rightActions.className).toContain("flex-sh_0");
-  expect(center.className).toContain("min-w_[0]");
-  expect(status.className).toContain("min-w_[0]");
-  expect(indicator.className).toContain("flex-sh_1");
-  expect(indicator.className).toContain("min-w_[32px]");
-  expect(status.className).toContain("ov_hidden");
-  expect(status.className).toContain("tov_ellipsis");
-  expect(within(indicator).getByTestId("waveform")).toBeTruthy();
-  expect(liveStatus.textContent).toBe(
-    "Voice status: Audio playback is blocked. Select Play voice audio to hear Live.",
-  );
-});
-
-test("offers a user-gesture retry while session audio is blocked", () => {
-  const retryPlayback = vi.fn();
-  const commonProps = {
-    actions: { end: noop, pause: noop, retryPlayback },
-    assistantBusy: false,
-    canReadFullResponse: false,
-    canRepeatQuestion: false,
-    canTakeTurn: false,
-    collapsed: false,
-    indicator: <span />,
-    microphoneMuted: false,
-    notice: "Audio playback is blocked. Select Play voice audio to hear Live.",
-    onCollapsedToggle: noop,
-    onStop: noop,
-    phase: "connected" as const,
-    speakerMuted: false,
-    speakerVolume: 1,
-  };
-  const rendered = render(
-    <VoiceDock {...commonProps} canRetryPlayback={true} />,
-  );
-
-  fireEvent.click(screen.getByRole("button", { name: "Play voice audio" }));
-  expect(retryPlayback).toHaveBeenCalledOnce();
-
-  rendered.rerender(<VoiceDock {...commonProps} canRetryPlayback={false} />);
-  expect(screen.queryByRole("button", { name: "Play voice audio" })).toBeNull();
-});
-
-test.each([
-  {
-    absentAction: "Resume voice mode",
-    phase: "error" as const,
-    recoveryAction: "Reconnect voice mode",
-  },
-  {
-    absentAction: "Reconnect voice mode",
-    phase: "paused" as const,
-    recoveryAction: "Resume voice mode",
-  },
-])(
-  "keeps direct microphone beside $phase recovery controls",
-  ({ absentAction, phase, recoveryAction }) => {
-    render(
-      <VoiceDock
-        actions={{
-          end: vi.fn(),
-          pause: noop,
-          reconnect: vi.fn(),
-          resume: vi.fn(),
-          setMicrophoneMuted: vi.fn(),
-        }}
-        assistantBusy={false}
-        canReadFullResponse={false}
-        canRepeatQuestion={false}
-        canTakeTurn={false}
-        collapsed={false}
-        indicator={<span />}
-        microphoneMuted={false}
-        onCollapsedToggle={noop}
-        onStop={noop}
-        phase={phase}
-        speakerMuted={false}
-        speakerVolume={1}
-      />,
-    );
-
-    expect(screen.getByRole("button", { name: recoveryAction })).toBeTruthy();
-    expect(
-      screen.getByRole<HTMLButtonElement>("button", {
-        name: "Mute microphone",
-      }).disabled,
-    ).toBe(true);
-    expect(screen.queryByRole("button", { name: absentAction })).toBeNull();
-  },
-);
-
-test.each(["connecting", "error", "paused"] as const)(
-  "disables the direct microphone action while Voice is %s",
-  (phase) => {
-    const setMicrophoneMuted = vi.fn();
-    render(
-      <VoiceDock
-        actions={{
-          end: vi.fn(),
-          pause: noop,
-          setMicrophoneMuted,
-        }}
-        assistantBusy={false}
-        canReadFullResponse={false}
-        canRepeatQuestion={false}
-        canTakeTurn={false}
-        collapsed={false}
-        indicator={<span />}
-        microphoneMuted={false}
-        onCollapsedToggle={noop}
-        onStop={noop}
-        phase={phase}
-        speakerMuted={false}
-        speakerVolume={1}
-      />,
-    );
-
-    const microphone = screen.getByRole<HTMLButtonElement>("button", {
-      name: "Mute microphone",
-    });
-    expect(microphone.disabled).toBe(true);
-    fireEvent.click(microphone);
-    expect(setMicrophoneMuted).not.toHaveBeenCalled();
-  },
-);
-
-test.each(["listening", "thinking", "speaking"] as const)(
-  "keeps the direct microphone action functional while Voice is %s",
-  (phase) => {
-    const setMicrophoneMuted = vi.fn();
-    render(
-      <VoiceDock
-        actions={{
-          end: vi.fn(),
-          pause: noop,
-          setMicrophoneMuted,
-        }}
-        assistantBusy={false}
-        canReadFullResponse={false}
-        canRepeatQuestion={false}
-        canTakeTurn={false}
-        collapsed={false}
-        indicator={<span />}
-        microphoneMuted={false}
-        onCollapsedToggle={noop}
-        onStop={noop}
-        phase={phase}
-        speakerMuted={false}
-        speakerVolume={1}
-      />,
-    );
-
-    const microphone = screen.getByRole<HTMLButtonElement>("button", {
-      name: "Mute microphone",
-    });
-    expect(microphone.disabled).toBe(false);
-    fireEvent.click(microphone);
-    expect(setMicrophoneMuted).toHaveBeenCalledExactlyOnceWith(true);
-  },
-);
-
-test.each(["connecting", "error"] as const)(
-  "disables only speaker controls in Audio options while Voice is %s",
-  async (phase) => {
-    const setInterruptionBySpeaking = vi.fn();
-    const setSpeakerMuted = vi.fn();
-    const setSpeakerVolume = vi.fn();
-    render(
-      <VoiceDock
-        actions={{
-          end: vi.fn(),
-          pause: noop,
-          readFullResponse: vi.fn(),
-          repeatQuestion: vi.fn(),
-          setInterruptionBySpeaking,
-          setSpeakerMuted,
-          setSpeakerVolume,
-        }}
-        assistantBusy={false}
-        canReadFullResponse={false}
-        canRepeatQuestion={false}
-        canTakeTurn={false}
-        collapsed={false}
-        indicator={<span />}
-        interruptionBySpeaking
-        microphoneMuted={false}
-        onCollapsedToggle={noop}
-        onStop={noop}
-        phase={phase}
-        speakerMuted={false}
-        speakerVolume={1}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
-    const speakerMute = await screen.findByRole<HTMLButtonElement>("button", {
-      name: "Mute speaker",
-    });
-    const volume = screen.getByRole("slider", { name: "Speaker volume" });
-    expect(speakerMute.disabled).toBe(true);
-    expect(volume.getAttribute("aria-disabled")).toBe("true");
-    fireEvent.click(speakerMute);
-    volume.focus();
-    fireEvent.keyDown(volume, { key: "ArrowLeft" });
-    expect(setSpeakerMuted).not.toHaveBeenCalled();
-    expect(setSpeakerVolume).not.toHaveBeenCalled();
-
-    const interruption = screen.getByRole<HTMLInputElement>("checkbox", {
-      name: "Allow interruptions",
-    });
-    expect(interruption.disabled).toBe(false);
-    fireEvent.click(interruption);
-    await waitFor(() =>
-      expect(setInterruptionBySpeaking).toHaveBeenCalledExactlyOnceWith(false),
-    );
-    expect(
-      screen.getByRole<HTMLButtonElement>("button", {
-        name: "Repeat question",
-      }).disabled,
-    ).toBe(true);
-    expect(
-      screen.getByRole<HTMLButtonElement>("button", {
-        name: "Read full reply",
-      }).disabled,
-    ).toBe(true);
-  },
-);
-
-test.each(["listening", "thinking", "speaking", "paused"] as const)(
-  "keeps speaker controls callable while Voice is %s",
-  async (phase) => {
-    const setSpeakerMuted = vi.fn();
-    const setSpeakerVolume = vi.fn();
-    render(
-      <VoiceDock
-        actions={{
-          end: vi.fn(),
-          pause: noop,
-          setSpeakerMuted,
-          setSpeakerVolume,
-        }}
-        assistantBusy={false}
-        canReadFullResponse={false}
-        canRepeatQuestion={false}
-        canTakeTurn={false}
-        collapsed={false}
-        indicator={<span />}
-        microphoneMuted={false}
-        onCollapsedToggle={noop}
-        onStop={noop}
-        phase={phase}
-        speakerMuted={false}
-        speakerVolume={1}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
-    const speakerMute = await screen.findByRole<HTMLButtonElement>("button", {
-      name: "Mute speaker",
-    });
-    const volume = screen.getByRole("slider", { name: "Speaker volume" });
-    expect(speakerMute.disabled).toBe(false);
-    expect(volume.getAttribute("aria-disabled")).not.toBe("true");
-    fireEvent.click(speakerMute);
-    volume.focus();
-    fireEvent.keyDown(volume, { key: "ArrowLeft" });
-    expect(setSpeakerMuted).toHaveBeenCalledExactlyOnceWith(true);
-    await waitFor(() =>
-      expect(setSpeakerVolume).toHaveBeenCalledExactlyOnceWith(0.95),
-    );
-  },
-);
-
-test("shows the speed slider immediately with fine keyboard steps", async () => {
-  const setSpeed = vi.fn();
-  render(
-    <VoiceDock
-      actions={{
-        audioSettings: {
-          refreshDevices: vi.fn(),
-          requestSpeaker: vi.fn(),
-          setMicrophoneDevice: vi.fn(),
-          setSpeakerDevice: vi.fn(),
-          setSpeed,
-          setVoice: vi.fn(),
-        },
-        end: vi.fn(),
-        pause: noop,
-      }}
-      audioSettings={{
-        activeVoice: "alloy",
-        voice: "alloy",
-        voices: [{ value: "alloy", text: "Alloy" }],
-        speed: 1,
-        devices: {
-          microphones: [],
-          speakers: [],
-          microphoneId: "",
-          speakerId: "",
-          canSelectSpeaker: false,
-          canRequestSpeaker: false,
-          busy: false,
-          message: null,
-        },
-      }}
-      assistantBusy={false}
-      canReadFullResponse={false}
-      canRepeatQuestion={false}
-      canTakeTurn={false}
-      collapsed={false}
-      indicator={<span />}
-      microphoneMuted={false}
-      onCollapsedToggle={noop}
-      onStop={noop}
-      phase="connected"
-      speakerMuted={false}
-      speakerVolume={1}
-    />,
-  );
-
-  fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
-  const speed = await screen.findByRole("slider", { name: "Speed" });
-  expect(speed.getAttribute("aria-valuemin")).toBe("0.25");
-  expect(speed.getAttribute("aria-valuemax")).toBe("1.5");
-  expect(speed.getAttribute("aria-valuenow")).toBe("1");
-  expect(screen.getByText("1.00×")).not.toBeNull();
-  expect(screen.queryByText("Next reply")).toBeNull();
-
-  speed.focus();
-  fireEvent.keyDown(speed, { key: "ArrowRight" });
-  await waitFor(() => expect(setSpeed).toHaveBeenCalledExactlyOnceWith(1.05));
-});
-
-test("keeps voice visible while toggling devices and refreshes devices when opened", async () => {
-  const refreshDevices = vi.fn();
-  const stopVoicePreview = vi.fn();
-  const setVoice = vi.fn();
-  render(
-    <VoiceDock
-      actions={{
-        audioSettings: {
-          refreshDevices,
-          stopVoicePreview,
-          requestSpeaker: vi.fn(),
-          setMicrophoneDevice: vi.fn(),
-          setSpeakerDevice: vi.fn(),
-          setVoice,
-        },
-        end: vi.fn(),
-        pause: noop,
-        setSpeakerVolume: vi.fn(),
-      }}
-      audioSettings={{
-        activeVoice: "alloy",
-        voice: "verse",
-        voicePreview: "playing",
-        voices: [
-          { value: "alloy", text: "Alloy" },
-          { value: "verse", text: "Verse" },
-        ],
-        devices: {
-          microphones: [],
-          speakers: [],
-          microphoneId: "",
-          speakerId: "",
-          canSelectSpeaker: false,
-          canRequestSpeaker: false,
-          busy: false,
-          message: "Allow microphone access to list devices.",
-        },
-      }}
-      assistantBusy={false}
-      canReadFullResponse={false}
-      canRepeatQuestion={false}
-      canTakeTurn={false}
-      collapsed={false}
-      indicator={<span />}
-      microphoneMuted={true}
-      onCollapsedToggle={noop}
-      onStop={noop}
-      phase="connected"
-      speakerMuted={false}
-      speakerVolume={0.65}
-    />,
-  );
-
-  fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
-  expect(
-    (
-      await screen.findByRole("slider", { name: "Speaker volume" })
-    ).getAttribute("aria-valuenow"),
-  ).toBe("65");
-  expect(screen.getByRole("combobox", { name: "Voice" })).not.toBeNull();
-  expect(screen.getByText("Voice preview playing").getAttribute("role")).toBe(
-    "status",
-  );
-  expect(
-    screen.queryByRole("button", { name: /play preview|pause preview/i }),
-  ).toBeNull();
-  const nativeVoice = document.querySelector("select");
-  if (!nativeVoice) throw new Error("Missing native voice field");
-  fireEvent.change(nativeVoice, { target: { value: "alloy" } });
-  await waitFor(() =>
-    expect(setVoice).toHaveBeenCalledExactlyOnceWith("alloy"),
-  );
-  expect(screen.queryByRole("button", { name: /^Voice/ })).toBeNull();
-  const devicesToggle = screen.getByRole("button", { name: "Devices" });
-  expect(devicesToggle.getAttribute("aria-expanded")).toBe("false");
-  expect(screen.queryByRole("combobox", { name: "Microphone" })).toBeNull();
-  expect(screen.queryByRole("combobox", { name: "Speaker" })).toBeNull();
-  expect(screen.queryByText(/Applies next session/)).toBeNull();
-  expect(
-    screen.getByRole("button", { name: "About voice selection" }),
-  ).toBeTruthy();
-  expect(screen.getByRole("combobox", { name: "Voice" })).not.toBeNull();
-  expect(
-    screen.queryByText(
-      "Speaking speed is not available with this voice provider.",
-    ),
-  ).toBeNull();
-  expect(screen.queryByRole("button", { name: "Real-time" })).toBeNull();
-  expect(screen.queryByRole("slider", { name: "Speed" })).toBeNull();
-
-  expect(refreshDevices).toHaveBeenCalledOnce();
-  fireEvent.click(devicesToggle);
-  expect(devicesToggle.getAttribute("aria-expanded")).toBe("true");
-  expect(screen.getByRole("combobox", { name: "Voice" })).not.toBeNull();
-  expect(screen.getByRole("combobox", { name: "Microphone" }).textContent).toBe(
-    "System default",
-  );
-  expect(screen.getByRole("combobox", { name: "Speaker" }).textContent).toBe(
-    "System default",
-  );
-  expect(
-    screen.getByRole<HTMLButtonElement>("combobox", { name: "Speaker" })
-      .disabled,
-  ).toBe(true);
-  expect(
-    screen.getByText("System default — change output in your system settings."),
-  ).not.toBeNull();
-  expect(
-    screen
-      .getByText("Allow microphone access to list devices.")
-      .getAttribute("role"),
-  ).toBe("status");
-  expect(screen.queryByRole("button", { name: "Refresh devices" })).toBeNull();
-  expect(
-    screen.queryByText("Disconnected devices switch to system default."),
-  ).toBeNull();
-  fireEvent.click(devicesToggle);
-  expect(devicesToggle.getAttribute("aria-expanded")).toBe("false");
-  expect(screen.queryByRole("combobox", { name: "Microphone" })).toBeNull();
-  expect(screen.queryByRole("combobox", { name: "Speaker" })).toBeNull();
-  expect(screen.getByRole("combobox", { name: "Voice" })).not.toBeNull();
-  fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
-  expect(refreshDevices).toHaveBeenCalledOnce();
-  expect(stopVoicePreview).toHaveBeenCalledOnce();
-  fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
-  expect(refreshDevices).toHaveBeenCalledTimes(2);
-});
-
-test("summarizes selected audio devices without exposing device IDs", () => {
-  const actions = {
-    refreshDevices: noop,
-    requestSpeaker: noop,
-    setMicrophoneDevice: noop,
-    setSpeakerDevice: noop,
-    setVoice: noop,
-  };
-  const settings = {
-    activeVoice: "alloy",
-    voice: "alloy",
-    voices: [{ value: "alloy", text: "Alloy" }],
-    devices: {
-      microphones: [{ value: "mic-1", text: "Desk microphone" }],
-      speakers: [{ value: "speaker-1", text: "Headphones" }],
-      microphoneId: "mic-1",
-      speakerId: "speaker-1",
-      canSelectSpeaker: true,
-      canRequestSpeaker: false,
-      busy: false,
-      message: null,
-    },
-  };
-  const { rerender } = render(
-    <AudioSettings
-      actions={actions}
-      disabled={false}
-      previewDisabledReason={null}
-      settings={settings}
-    />,
-  );
-  expect(screen.getByRole("button", { name: "Devices" }).textContent).toContain(
-    "Desk microphone · Headphones",
-  );
-  expect(screen.queryByRole("combobox", { name: "Microphone" })).toBeNull();
-  rerender(
-    <AudioSettings
-      actions={actions}
-      disabled={false}
-      previewDisabledReason={null}
-      settings={{
-        ...settings,
-        devices: {
-          ...settings.devices,
-          microphoneId: "",
-          speakerId: "disconnected-private-id",
-        },
-      }}
-    />,
-  );
-  expect(screen.getByRole("button", { name: "Devices" }).textContent).toContain(
-    "System default · Unavailable speaker",
-  );
-  expect(screen.queryByText(/disconnected-private-id/u)).toBeNull();
-});
-
-test.each<{
-  state: "streaming" | "done";
-  preparationFailed?: boolean;
-  fields: Record<string, string>;
-  label: string;
-  note: string;
-}>([
-  {
-    state: "streaming" as const,
-    fields: {},
-    label: "Preparing for Brunch",
-    note: "Preparing from what you said",
-  },
-  {
-    state: "streaming" as const,
-    fields: { goal: "Compare staffing" },
-    label: "Sending to Brunch",
-    note: "Prepared from what you said",
-  },
-  {
-    state: "done" as const,
-    fields: { goal: "Compare staffing" },
-    label: "Sent to Brunch",
-    note: "Prepared from what you said",
-  },
-  {
-    state: "streaming" as const,
-    preparationFailed: true,
-    fields: {},
-    label: "Sending without preparation",
-    note: "Preparation failed; sending your original words",
-  },
-  {
-    state: "done" as const,
-    preparationFailed: true,
-    fields: {},
-    label: "Sent without preparation",
-    note: "Preparation failed; your original words were sent",
-  },
-])(
-  "labels a brief truthfully: $label",
-  ({ state, fields, preparationFailed, label, note }) => {
-    render(
-      <VoiceInputProvenance brief={{ state, fields, preparationFailed }} />,
-    );
-    const disclosure = screen.getByText(label).closest("details");
-    expect(disclosure?.getAttribute("aria-busy")).toBe(
-      String(state === "streaming"),
-    );
-    expect(screen.getByText(note)).not.toBeNull();
-  },
-);
-
-test("renders absent brief fields as placeholders without confusing verbatim Still open", () => {
-  render(
-    <VoiceInputProvenance
-      brief={{
-        state: "done",
-        fields: { runs: "Still open", stillOpen: "constraints, ask" },
-      }}
-    />,
-  );
-
-  expect(screen.getByText("runs").nextSibling?.textContent).toBe("Still open");
-  expect(screen.getByText("constraints").nextSibling?.textContent).toBe(
-    "Still open",
-  );
-  expect(screen.getByText("ask").nextSibling?.textContent).toBe("Still open");
-  expect(screen.queryByText("still Open")).toBeNull();
-});
-
-test("stops a voice preview only when audio settings unmount", () => {
-  const initialStopVoicePreview = vi.fn();
-  const latestStopVoicePreview = vi.fn();
-  const actions = {
-    refreshDevices: vi.fn(),
-    requestSpeaker: vi.fn(),
-    setMicrophoneDevice: vi.fn(),
-    setSpeakerDevice: vi.fn(),
-    setVoice: vi.fn(),
-  };
-  const settings = {
-    activeVoice: "alloy",
-    voice: "alloy",
-    voices: [{ value: "alloy", text: "Alloy" }],
-    devices: {
-      microphones: [],
-      speakers: [],
-      microphoneId: "",
-      speakerId: "",
-      canSelectSpeaker: false,
-      canRequestSpeaker: false,
-      busy: false,
-      message: null,
-    },
-  };
-  const { rerender, unmount } = render(
-    <AudioSettings
-      actions={{
-        ...actions,
-        stopVoicePreview: initialStopVoicePreview,
-      }}
-      disabled={false}
-      previewDisabledReason={null}
-      settings={settings}
-    />,
-  );
-
-  rerender(
-    <AudioSettings
-      actions={{
-        ...actions,
-        stopVoicePreview: latestStopVoicePreview,
-      }}
-      disabled={false}
-      previewDisabledReason={null}
-      settings={settings}
-    />,
-  );
-
-  expect(initialStopVoicePreview).not.toHaveBeenCalled();
-  expect(latestStopVoicePreview).not.toHaveBeenCalled();
-
-  unmount();
-  expect(initialStopVoicePreview).not.toHaveBeenCalled();
-  expect(latestStopVoicePreview).toHaveBeenCalledOnce();
-});
-
-test("gates voice previews and hides only ordinary status text", async () => {
-  const stopVoicePreview = vi.fn();
-  const setMicrophoneMuted = vi.fn();
-  const setVoice = vi.fn();
-  const dock = (
-    phase: "listening" | "speaking" | "muted" | "connecting",
-    microphoneMuted: boolean,
-  ) => (
-    <VoiceDock
-      actions={{
-        audioSettings: {
-          refreshDevices: vi.fn(),
-          stopVoicePreview,
-          requestSpeaker: vi.fn(),
-          setMicrophoneDevice: vi.fn(),
-          setSpeakerDevice: vi.fn(),
-          setVoice,
-        },
-        end: noop,
-        pause: noop,
-        setSpeakerVolume: noop,
-        setMicrophoneMuted,
-      }}
-      audioSettings={{
-        activeVoice: "alloy",
-        voice: "alloy",
-        voices: [
-          { value: "alloy", text: "Alloy" },
-          { value: "verse", text: "Verse" },
-        ],
-        devices: {
-          microphones: [],
-          speakers: [],
-          microphoneId: "",
-          speakerId: "",
-          canSelectSpeaker: false,
-          canRequestSpeaker: false,
-          busy: false,
-          message: null,
-        },
-      }}
-      assistantBusy={false}
-      canReadFullResponse={false}
-      canRepeatQuestion={false}
-      canTakeTurn={false}
-      collapsed={false}
-      indicator={<span data-testid="waveform" />}
-      microphoneMuted={microphoneMuted}
-      onCollapsedToggle={noop}
-      onStop={noop}
-      phase={phase}
-      speakerMuted={false}
-      speakerVolume={1}
-    />
-  );
-  const { rerender } = render(dock("listening", false));
-  fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
-  const voice = await screen.findByRole<HTMLButtonElement>("combobox", {
-    name: "Voice",
-  });
-  expect(voice.disabled).toBe(false);
-  const nativeVoice = document.querySelector("select");
-  if (!nativeVoice) throw new Error("Missing native voice field");
-  fireEvent.change(nativeVoice, { target: { value: "verse" } });
-  await waitFor(() =>
-    expect(setVoice).toHaveBeenCalledExactlyOnceWith("verse"),
-  );
-  expect(screen.queryByText("Mute your mic to preview.")).toBeNull();
-  expect(voice.getAttribute("aria-description")).toContain(
-    "Mute your mic to preview.",
-  );
-  const toggle = screen.getByRole("checkbox", { name: "Show status text" });
-  expect((toggle as HTMLInputElement).checked).toBe(true);
-  fireEvent.click(screen.getByText("Show status text"));
-  await waitFor(() =>
-    expect(screen.queryByText("Listening", { exact: true })).toBeNull(),
-  );
-  expect(screen.getByRole("status", { name: "Voice status" }).textContent).toBe(
-    "Voice status: Listening",
-  );
-  expect(screen.getByTestId("waveform")).not.toBeNull();
-
-  rerender(dock("speaking", true));
-  expect(voice.disabled).toBe(false);
-  expect(screen.queryByText("Wait for the agent to finish.")).toBeNull();
-  expect(voice.getAttribute("aria-description")).toContain(
-    "Wait for the agent to finish.",
-  );
-  expect(screen.queryByText("Speaking", { exact: true })).toBeNull();
-  rerender(dock("muted", true));
-  expect(voice.disabled).toBe(false);
-  expect(screen.getByText("Muted", { exact: true })).not.toBeNull();
-  stopVoicePreview.mockClear();
-  fireEvent.click(screen.getByRole("button", { name: "Unmute microphone" }));
-  expect(stopVoicePreview).toHaveBeenCalledOnce();
-  expect(setMicrophoneMuted).toHaveBeenCalledExactlyOnceWith(false);
-  expect(stopVoicePreview.mock.invocationCallOrder[0]).toBeLessThan(
-    setMicrophoneMuted.mock.invocationCallOrder[0]!,
-  );
-
-  rerender(dock("connecting", true));
-  expect(voice.disabled).toBe(false);
-  setVoice.mockClear();
-  fireEvent.change(nativeVoice, { target: { value: "verse" } });
-  await waitFor(() =>
-    expect(setVoice).toHaveBeenCalledExactlyOnceWith("verse"),
-  );
-  expect(screen.getByText("Connecting", { exact: true })).not.toBeNull();
-});
-
 describe("AiAssistantContents", () => {
   test("orders optional voice slots around work and produced cards", async () => {
     const card = definePetrinautAiInteractiveTool({
@@ -1521,6 +651,7 @@ describe("AiAssistantContents", () => {
       <AiAssistantContents
         input=""
         inputMode="voice"
+        presentation="brunch"
         onClose={noop}
         onInputChange={noop}
         onStop={noop}
@@ -1692,49 +823,52 @@ describe("AiAssistantContents", () => {
     expect(contentMounted).toHaveBeenCalledOnce();
   });
 
-  test("keeps tab names stable and one tab live region mounted across announcements", () => {
-    const props = {
-      additionalTab: { label: "Ledger", content: <p>Saved account</p> },
-      hostAttentionCount: 2,
-      input: "",
-      messages: [],
-      onClose: noop,
-      onInputChange: noop,
-      onStop: noop,
-      onSubmit: noop,
-      primaryAttention: true,
-      primaryLabel: "Chat",
-      presentation: "brunch" as const,
-      status: "ready" as const,
-    };
-    const { rerender } = render(
-      <AiAssistantContents
-        {...props}
-        attentionAnnouncement="2 unseen Ledger updates"
-      />,
-    );
+  test.each(["stock", "brunch"] as const)(
+    "keeps tab names stable and one tab live region mounted across announcements in the %s presentation",
+    (presentation) => {
+      const props = {
+        additionalTab: { label: "Ledger", content: <p>Saved account</p> },
+        hostAttentionCount: 2,
+        input: "",
+        messages: [],
+        onClose: noop,
+        onInputChange: noop,
+        onStop: noop,
+        onSubmit: noop,
+        primaryAttention: true,
+        primaryLabel: "Chat",
+        presentation,
+        status: "ready" as const,
+      };
+      const { rerender } = render(
+        <AiAssistantContents
+          {...props}
+          attentionAnnouncement="2 unseen Ledger updates"
+        />,
+      );
 
-    expect(screen.getByRole("tab", { name: "Chat" })).not.toBeNull();
-    expect(screen.getByRole("tab", { name: "Ledger" })).not.toBeNull();
-    const tabHeader = within(screen.getByRole("tablist").parentElement!);
-    expect(tabHeader.getAllByRole("status")).toHaveLength(1);
-    expect(tabHeader.getByRole("status").textContent).toBe(
-      "2 unseen Ledger updates",
-    );
+      expect(screen.getByRole("tab", { name: "Chat" })).not.toBeNull();
+      expect(screen.getByRole("tab", { name: "Ledger" })).not.toBeNull();
+      const tabHeader = within(screen.getByRole("tablist").parentElement!);
+      expect(tabHeader.getAllByRole("status")).toHaveLength(1);
+      expect(tabHeader.getByRole("status").textContent).toBe(
+        "2 unseen Ledger updates",
+      );
 
-    rerender(<AiAssistantContents {...props} attentionAnnouncement="" />);
-    expect(tabHeader.getAllByRole("status")).toHaveLength(1);
-    expect(tabHeader.getByRole("status").textContent).toBe("");
-    rerender(
-      <AiAssistantContents
-        {...props}
-        attentionAnnouncement="2 unseen Ledger updates"
-      />,
-    );
-    expect(tabHeader.getByRole("status").textContent).toBe(
-      "2 unseen Ledger updates",
-    );
-  });
+      rerender(<AiAssistantContents {...props} attentionAnnouncement="" />);
+      expect(tabHeader.getAllByRole("status")).toHaveLength(1);
+      expect(tabHeader.getByRole("status").textContent).toBe("");
+      rerender(
+        <AiAssistantContents
+          {...props}
+          attentionAnnouncement="2 unseen Ledger updates"
+        />,
+      );
+      expect(tabHeader.getByRole("status").textContent).toBe(
+        "2 unseen Ledger updates",
+      );
+    },
+  );
 
   test("returns to chat when the host withdraws its additional tab", () => {
     const props = {
@@ -1758,46 +892,9 @@ describe("AiAssistantContents", () => {
     expect(screen.getByTestId("ai-transcript").hidden).toBe(false);
   });
 
-  test.each([
-    {
-      label: "blocked",
-      output: {
-        applied: false,
-        blocked: "readonly",
-        reason: "Read-only document.",
-      },
-    },
-    {
-      label: "declined",
-      output: { applied: false, reason: "User declined auto-layout." },
-    },
-    {
-      label: "no-op",
-      output: {
-        applied: false,
-        reason: "The mutation left the document unchanged.",
-      },
-    },
-    {
-      label: "stale host",
-      output: {
-        applied: false,
-        reason:
-          "The requested base does not match the independently observed document.",
-      },
-    },
-    {
-      label: "contradictory supplied summary",
-      output: {
-        applied: false,
-        reason: "Not applied by the host.",
-        title: "Updated arc weight",
-        detail: "Requested value: 4",
-      },
-    },
-  ])(
-    "renders an explicit $label result as not applied, never requested-value success",
-    async ({ output }) => {
+  test.each(["output-available", "output-error"] as const)(
+    "preserves %s applied/error presentation",
+    async (state) => {
       render(
         <AiAssistantContents
           input=""
@@ -1806,58 +903,9 @@ describe("AiAssistantContents", () => {
           onInputChange={noop}
           onStop={noop}
           onSubmit={noop}
-          presentation="brunch"
           messages={[
             {
-              id: "assistant-unapplied",
-              role: "assistant",
-              parts: [
-                {
-                  type: "dynamic-tool",
-                  toolName: "updateArcWeight",
-                  toolCallId: "unapplied",
-                  state: "output-available",
-                  input: {
-                    transitionId: "transition",
-                    placeId: "place",
-                    arcDirection: "input",
-                    weight: 4,
-                  },
-                  output,
-                },
-              ],
-            },
-          ]}
-        />,
-      );
-      await expandWork();
-      const row = screen.getByRole("button", { name: /Not applied/u });
-      expect(row.getAttribute("data-tone")).toBe("neutral");
-      expect(within(row).getByText(output.reason)).not.toBeNull();
-      expect(
-        within(row).queryByText("Updated arc weight", { exact: true }),
-      ).toBeNull();
-      expect(row.querySelector('[data-tool-status="ok"]')).not.toBeNull();
-      expect(
-        row.querySelector('[data-tool-result-icon="complete"]'),
-      ).toBeNull();
-    },
-  );
-
-  test.each(["output-available", "output-error"] as const)(
-    "preserves %s applied/error presentation",
-    async (state) => {
-      render(
-        <AiAssistantContents
-          input=""
-          status="ready"
-          onClose={noop}
-          onInputChange={noop}
-          onStop={noop}
-          onSubmit={noop}
-          messages={[
-            {
-              id: "assistant-outcome",
+              id: "assistant-outcome",
               role: "assistant",
               parts: [
                 {
@@ -3025,6 +2073,7 @@ describe("AiAssistantContents", () => {
       <AiAssistantContents
         input=""
         inputMode={inputMode}
+        presentation="brunch"
         messages={[
           {
             id: "voice-user",
@@ -3078,6 +2127,7 @@ describe("AiAssistantContents", () => {
       onInputChange: noop,
       onStop: noop,
       onSubmit: noop,
+      presentation: "brunch" as const,
       status: "ready" as const,
     };
     const message = (text: string): PetrinautAiMessage[] => [
@@ -3964,15 +3014,14 @@ describe("AiAssistantContents", () => {
       status: "ready" as const,
     };
     const { rerender } = render(<AiAssistantContents {...props} />);
+    const tablist = () => screen.getByRole("tablist");
 
-    expect(screen.getByRole("tablist").getAttribute("data-style-variant")).toBe(
-      "stock",
-    );
+    expect(tablist().getAttribute("data-style-variant")).toBe("stock");
+    expect(tablist().querySelector("[data-mark]")).toBeNull();
 
     rerender(<AiAssistantContents {...props} presentation="brunch" />);
-    expect(screen.getByRole("tablist").getAttribute("data-style-variant")).toBe(
-      "brunch",
-    );
+    expect(tablist().getAttribute("data-style-variant")).toBe("brunch");
+    expect(tablist().querySelectorAll("[data-mark]")).toHaveLength(2);
   });
 
   test("keeps the stock AI transcript label in both input modes", () => {
@@ -4265,61 +3314,72 @@ describe("AiAssistantContents", () => {
     expect(screen.queryByRole("button", { name: /^Activity/u })).toBeNull();
   });
 
-  test("does not auto-follow new content after the reader scrolls more than 96px from the end", () => {
-    // eslint-disable-next-line @typescript-eslint/unbound-method -- Saved only for restoration.
-    const originalScrollTo = window.HTMLElement.prototype.scrollTo;
-    const originalRequestAnimationFrame = window.requestAnimationFrame;
-    const scrollTo = vi.fn();
-    window.HTMLElement.prototype.scrollTo = scrollTo;
-    window.requestAnimationFrame = (callback) => {
-      callback(0);
-      return 0;
-    };
-    const props = {
-      input: "",
-      messages: [
-        {
-          id: "assistant-1",
-          role: "assistant" as const,
-          parts: [
-            { type: "text" as const, state: "streaming" as const, text: "One" },
-          ],
-        },
-      ],
-      onClose: noop,
-      onInputChange: noop,
-      onStop: noop,
-      onSubmit: noop,
-      status: "streaming" as const,
-    };
-    const view = render(<AiAssistantContents {...props} />);
-    const transcript = screen.getByTestId("ai-transcript");
-    Object.defineProperties(transcript, {
-      clientHeight: { configurable: true, value: 400 },
-      scrollHeight: { configurable: true, value: 1000 },
-      scrollTop: { configurable: true, writable: true, value: 600 },
-    });
-    fireEvent.scroll(transcript);
-    transcript.scrollTop = 400;
-    fireEvent.scroll(transcript);
-    scrollTo.mockClear();
-
-    view.rerender(
-      <AiAssistantContents
-        {...props}
-        messages={[
+  test.each([
+    { presentation: "brunch", follows: false },
+    { presentation: "stock", follows: true },
+  ] as const)(
+    "$presentation presentation follows new content after the reader scrolls more than 96px from the end: $follows",
+    ({ presentation, follows }) => {
+      // eslint-disable-next-line @typescript-eslint/unbound-method -- Saved only for restoration.
+      const originalScrollTo = window.HTMLElement.prototype.scrollTo;
+      const originalRequestAnimationFrame = window.requestAnimationFrame;
+      const scrollTo = vi.fn();
+      window.HTMLElement.prototype.scrollTo = scrollTo;
+      window.requestAnimationFrame = (callback) => {
+        callback(0);
+        return 0;
+      };
+      const props = {
+        input: "",
+        messages: [
           {
-            ...props.messages[0]!,
-            parts: [{ type: "text", state: "streaming", text: "One two" }],
+            id: "assistant-1",
+            role: "assistant" as const,
+            parts: [
+              {
+                type: "text" as const,
+                state: "streaming" as const,
+                text: "One",
+              },
+            ],
           },
-        ]}
-      />,
-    );
+        ],
+        onClose: noop,
+        onInputChange: noop,
+        onStop: noop,
+        onSubmit: noop,
+        presentation,
+        status: "streaming" as const,
+      };
+      const view = render(<AiAssistantContents {...props} />);
+      const transcript = screen.getByTestId("ai-transcript");
+      Object.defineProperties(transcript, {
+        clientHeight: { configurable: true, value: 400 },
+        scrollHeight: { configurable: true, value: 1000 },
+        scrollTop: { configurable: true, writable: true, value: 600 },
+      });
+      fireEvent.scroll(transcript);
+      transcript.scrollTop = 400;
+      fireEvent.scroll(transcript);
+      scrollTo.mockClear();
 
-    expect(scrollTo).not.toHaveBeenCalled();
-    window.HTMLElement.prototype.scrollTo = originalScrollTo;
-    window.requestAnimationFrame = originalRequestAnimationFrame;
-  });
+      view.rerender(
+        <AiAssistantContents
+          {...props}
+          messages={[
+            {
+              ...props.messages[0]!,
+              parts: [{ type: "text", state: "streaming", text: "One two" }],
+            },
+          ]}
+        />,
+      );
+
+      expect(scrollTo.mock.calls.length > 0).toBe(follows);
+      window.HTMLElement.prototype.scrollTo = originalScrollTo;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+    },
+  );
 
   test("keeps following while its smooth scroll trails content that grew mid-animation", () => {
     // eslint-disable-next-line @typescript-eslint/unbound-method -- Saved only for restoration.
@@ -4346,6 +3406,7 @@ describe("AiAssistantContents", () => {
       onInputChange: noop,
       onStop: noop,
       onSubmit: noop,
+      presentation: "brunch" as const,
       status: "streaming" as const,
     };
     const view = render(<AiAssistantContents {...props} />);
@@ -4491,7 +3552,7 @@ describe("AiAssistantContents", () => {
     );
 
     expect(container.textContent).toMatch(
-      /Thought[\s\S]*I found the current places\./u,
+      /Thinking[\s\S]*I found the current places\./u,
     );
   });
 
@@ -4614,88 +3675,6 @@ describe("AiAssistantContents", () => {
     });
   });
 
-  test("shows known noninteractive tool progress and replaces it with the terminal result", async () => {
-    const createMessages = (
-      state: "input-streaming" | "input-available" | "output-available",
-    ) =>
-      [
-        {
-          id: "assistant-1",
-          role: "assistant",
-          parts: [
-            {
-              type: "tool-addPlace",
-              state,
-              toolCallId: "tool-1",
-              input: {
-                id: "place__buffer",
-                name: "Buffer",
-                colorId: null,
-                dynamicsEnabled: false,
-                differentialEquationId: null,
-                x: 0,
-                y: 0,
-              },
-              output:
-                state === "output-available"
-                  ? { applied: true, title: "Added place Buffer" }
-                  : undefined,
-            },
-          ],
-        },
-      ] as PetrinautAiMessage[];
-    const props = {
-      input: "",
-      onClose: noop,
-      onInputChange: noop,
-      onStop: noop,
-      onSubmit: noop,
-      status: "streaming" as const,
-    };
-    const rendered = render(
-      <AiAssistantContents
-        {...props}
-        messages={createMessages("input-streaming")}
-      />,
-    );
-
-    expect(screen.getByText("Preparing…")).not.toBeNull();
-    await expandWork();
-    const pendingRow = screen.getByRole("button", { name: /Preparing/u });
-    expect(within(pendingRow).queryByText(/Buffer/u)).toBeNull();
-    expect(pendingRow.getAttribute("aria-busy")).toBe("true");
-    expect(pendingRow.getAttribute("data-tone")).toBe("success");
-    expect(
-      pendingRow.querySelector('[data-tool-status="pending"]'),
-    ).not.toBeNull();
-
-    rendered.rerender(
-      <AiAssistantContents
-        {...props}
-        messages={createMessages("input-available")}
-      />,
-    );
-
-    expect(screen.queryByText("Preparing…")).toBeNull();
-    expect(screen.getByText("Running…")).not.toBeNull();
-
-    rendered.rerender(
-      <AiAssistantContents
-        {...props}
-        messages={createMessages("output-available")}
-      />,
-    );
-
-    expect(screen.queryByText("Running…")).toBeNull();
-    const completedRow = screen.getByRole("button", {
-      name: /Added place Buffer/u,
-    });
-    expect(completedRow.hasAttribute("aria-busy")).toBe(false);
-    expect(
-      completedRow.querySelector('[data-tool-status="ok"]'),
-    ).not.toBeNull();
-  });
-
   test("renders individual tool rows with tones and no operations control", async () => {
     const messages: PetrinautAiMessage[] = [
       {
@@ -4763,369 +3742,56 @@ describe("AiAssistantContents", () => {
     ).toBe("true");
   });
 
-  test("uses the host presentation resolver at every lifecycle site", async () => {
-    const messages = [
+  test("hides configured tool rows without removing their message parts", () => {
+    const hiddenPart = {
+      type: "dynamic-tool" as const,
+      toolName: "layout_petrinaut_net",
+      toolCallId: "hidden-layout",
+      state: "input-available" as const,
+      input: {},
+    };
+    const messages: PetrinautAiMessage[] = [
       {
-        id: "assistant-labels",
+        id: "assistant-hidden-tool",
         role: "assistant",
         parts: [
+          hiddenPart,
           {
             type: "dynamic-tool",
-            toolName: "one",
-            toolCallId: "one",
-            state: "input-streaming",
-          },
-          {
-            type: "dynamic-tool",
-            toolName: "two",
-            toolCallId: "two",
+            toolName: "read_petrinaut_diagnostics",
+            toolCallId: "visible-diagnostics",
             state: "input-available",
             input: {},
           },
-          {
-            type: "dynamic-tool",
-            toolName: "three",
-            toolCallId: "three",
-            state: "output-available",
-            output: { title: "Stable result title" },
-          },
-          {
-            type: "dynamic-tool",
-            toolName: "four",
-            toolCallId: "four",
-            state: "output-error",
-            errorText: "Host tool failed",
-          },
-          {
-            type: "dynamic-tool",
-            toolName: "unknown-tool",
-            toolCallId: "unknown",
-            state: "output-available",
-            output: { title: "Unknown result title" },
-          },
-          {
-            type: "dynamic-tool",
-            toolName: "five",
-            toolCallId: "not-applied",
-            state: "output-available",
-            output: { applied: false, reason: "Nothing changed" },
-          },
-          {
-            type: "dynamic-tool",
-            toolName: "six",
-            toolCallId: "preserved-detail",
-            state: "output-available",
-            output: {
-              title: "Default result title",
-              detail: "Viewport frame: framed.",
-            },
-          },
         ],
       },
-    ] as PetrinautAiMessage[];
+    ];
+
     render(
       <AiAssistantContents
+        hiddenToolNames={new Set(["layout_petrinaut_net"])}
         input=""
         messages={messages}
         onClose={noop}
         onInputChange={noop}
         onStop={noop}
         onSubmit={noop}
+        resolveToolPresentation={({ toolName }) => ({
+          title: `Rendered ${toolName}`,
+        })}
         status="streaming"
-        resolveToolPresentation={({ error, output, state, toolName }) => {
-          if (toolName === "unknown-tool") return undefined;
-          if (toolName === "five") {
-            return {
-              title: "Correctable five",
-              tone: "neutral",
-              items: ["Nothing changed"],
-            };
-          }
-          if (toolName === "six") return { title: "Completed six" };
-          const verb =
-            state === "pending"
-              ? toolName === "one"
-                ? "Preparing"
-                : "Running"
-              : state === "success"
-                ? "Completed"
-                : "Could not complete";
-          return {
-            title: `${verb} ${toolName}`,
-            detail:
-              error ??
-              (typeof output === "object" &&
-              output !== null &&
-              "title" in output &&
-              typeof output.title === "string"
-                ? output.title
-                : undefined),
-          };
-        }}
       />,
     );
 
-    await expandWork();
-    const preparingOne = screen.getByText("Preparing one").closest("button");
-    const runningTwo = screen.getByText("Running two").closest("button");
-    expect(preparingOne?.getAttribute("aria-busy")).toBe("true");
-    expect(runningTwo?.getAttribute("aria-busy")).toBe("true");
-    expect(screen.queryByText(/operations/u)).toBeNull();
-    expect(screen.getByText("Completed three")).not.toBeNull();
-    expect(screen.getByText("Could not complete four")).not.toBeNull();
-    expect(
-      within(
-        screen.getByText("Completed three").closest("button")!,
-      ).getByTestId("tool-detail").textContent,
-    ).toBe("Stable result title");
-    expect(
-      within(
-        screen.getByText("Could not complete four").closest("button")!,
-      ).getByTestId("tool-detail").textContent,
-    ).toBe("Host tool failed");
-    expect(screen.getByText("Unknown result title")).not.toBeNull();
-    expect(screen.getByText("Correctable five")).not.toBeNull();
-    expect(screen.queryByText("Not applied")).toBeNull();
-    expect(screen.queryByText("Completed five")).toBeNull();
-    expect(
-      screen
-        .getByRole("button", { name: /Correctable five/u })
-        .getAttribute("data-tone"),
-    ).toBe("neutral");
+    expect(screen.queryByText("Rendered layout_petrinaut_net")).toBeNull();
     expect(
-      screen
-        .getByRole("button", { name: /Correctable five/u })
-        .querySelector('[data-tool-status="ok"]'),
+      screen.getByText("Rendered read_petrinaut_diagnostics"),
     ).not.toBeNull();
-    fireEvent.click(screen.getByRole("button", { name: /Correctable five/u }));
-    expect(screen.getByText("Nothing changed")).not.toBeNull();
-    expect(
-      within(screen.getByText("Completed six").closest("button")!).getByTestId(
-        "tool-detail",
-      ).textContent,
-    ).toBe("Viewport frame: framed.");
+    expect(messages[0]?.parts[0]).toBe(hiddenPart);
   });
 
-  test("renders host pending, applied, refused and thrown tool cues", async () => {
-    const resolveToolPresentation = ({
-      output,
-      state,
-      toolName,
-    }: {
-      output: unknown;
-      state: "error" | "pending" | "success";
-      toolName: string;
-    }) => {
-      if (toolName !== "mutate_workpiece") return undefined;
-      if (
-        typeof output === "object" &&
-        output !== null &&
-        "disposition" in output &&
-        output.disposition === "refused" &&
-        "message" in output &&
-        typeof output.message === "string"
-      ) {
-        return {
-          title: "Ledger update needs correction",
-          tone: "neutral" as const,
-          items: [output.message],
-        };
-      }
-      return {
-        title:
-          state === "pending"
-            ? "Updating ledger"
-            : state === "success"
-              ? "Updated ledger"
-              : "Could not update ledger",
-        tone:
-          state === "pending"
-            ? ("pending" as const)
-            : state === "error"
-              ? ("danger" as const)
-              : ("success" as const),
-      };
-    };
-    const renderTools = (messages: PetrinautAiMessage[]) =>
-      render(
-        <AiAssistantContents
-          input=""
-          messages={messages}
-          onClose={noop}
-          onInputChange={noop}
-          onStop={noop}
-          onSubmit={noop}
-          resolveToolPresentation={resolveToolPresentation}
-          status="streaming"
-        />,
-      );
-
-    const pending = renderTools([
-      {
-        id: "assistant-pending",
-        role: "assistant",
-        parts: [
-          {
-            type: "dynamic-tool",
-            toolName: "mutate_workpiece",
-            toolCallId: "pending-call",
-            state: "input-streaming",
-            input: {},
-          },
-        ],
-      },
-    ]);
-    await expandWork();
-    const pendingRow = screen.getByRole("button", { name: /Updating ledger/u });
-    expect(pendingRow.getAttribute("data-tone")).toBe("pending");
-    expect(
-      pendingRow.querySelector('[data-tool-status="pending"]'),
-    ).not.toBeNull();
-    pending.unmount();
-
-    const applied = renderTools([
-      {
-        id: "assistant-applied",
-        role: "assistant",
-        parts: [
-          {
-            type: "dynamic-tool",
-            toolName: "mutate_workpiece",
-            toolCallId: "applied-call",
-            state: "output-available",
-            input: {},
-            output: {
-              disposition: "applied",
-              applied: true,
-              revisionId: "applied-call",
-              sha256: "b".repeat(64),
-              ordinal: 1,
-            },
-          },
-        ],
-      },
-    ]);
-    await expandWork();
-    const appliedRow = screen.getByRole("button", { name: /Updated ledger/u });
-    expect(appliedRow.getAttribute("data-tone")).toBe("success");
-    expect(appliedRow.querySelector('[data-tool-status="ok"]')).not.toBeNull();
-    applied.unmount();
-
-    const refused = renderTools([
-      {
-        id: "assistant-refused",
-        role: "assistant",
-        parts: [
-          {
-            type: "dynamic-tool",
-            toolName: "mutate_workpiece",
-            toolCallId: "refused-call",
-            state: "output-available",
-            input: {},
-            output: {
-              disposition: "refused",
-              applied: false,
-              correctable: true,
-              code: "silent-shrink",
-              message:
-                "Nothing was written; resubmit the complete settled account.",
-              currentRevision: null,
-            },
-          },
-        ],
-      },
-    ]);
-    await expandWork();
-    const refusedRow = screen.getByRole("button", {
-      name: /Ledger update needs correction/u,
-    });
-    expect(refusedRow.getAttribute("data-tone")).toBe("neutral");
-    expect(refusedRow.querySelector('[data-tool-status="ok"]')).not.toBeNull();
-    expect(within(refusedRow).queryByTestId("tool-detail")).toBeNull();
-    fireEvent.click(refusedRow);
-    expect(
-      screen.getByText(
-        "Nothing was written; resubmit the complete settled account.",
-      ),
-    ).not.toBeNull();
-    refused.unmount();
-
-    renderTools([
-      {
-        id: "assistant-thrown",
-        role: "assistant",
-        parts: [
-          {
-            type: "dynamic-tool",
-            toolName: "mutate_workpiece",
-            toolCallId: "thrown-call",
-            state: "output-error",
-            input: {},
-            errorText: "Current state missing",
-          },
-        ],
-      },
-    ]);
-    await expandWork();
-    const thrownRow = screen.getByRole("button", {
-      name: /Could not update ledger/u,
-    });
-    expect(thrownRow.getAttribute("data-tone")).toBe("danger");
-    expect(
-      thrownRow.querySelector('[data-tool-status="error"]'),
-    ).not.toBeNull();
-  });
-
-  test("hides configured tool rows without removing their message parts", () => {
-    const hiddenPart = {
-      type: "dynamic-tool" as const,
-      toolName: "layout_petrinaut_net",
-      toolCallId: "hidden-layout",
-      state: "input-available" as const,
-      input: {},
-    };
-    const messages: PetrinautAiMessage[] = [
-      {
-        id: "assistant-hidden-tool",
-        role: "assistant",
-        parts: [
-          hiddenPart,
-          {
-            type: "dynamic-tool",
-            toolName: "read_petrinaut_diagnostics",
-            toolCallId: "visible-diagnostics",
-            state: "input-available",
-            input: {},
-          },
-        ],
-      },
-    ];
-
-    render(
-      <AiAssistantContents
-        hiddenToolNames={new Set(["layout_petrinaut_net"])}
-        input=""
-        messages={messages}
-        onClose={noop}
-        onInputChange={noop}
-        onStop={noop}
-        onSubmit={noop}
-        resolveToolPresentation={({ toolName }) => ({
-          title: `Rendered ${toolName}`,
-        })}
-        status="streaming"
-      />,
-    );
-
-    expect(screen.queryByText("Rendered layout_petrinaut_net")).toBeNull();
-    expect(
-      screen.getByText("Rendered read_petrinaut_diagnostics"),
-    ).not.toBeNull();
-    expect(messages[0]?.parts[0]).toBe(hiddenPart);
-  });
-
-  test("keeps completed changes as individual rows", async () => {
-    const messages: PetrinautAiMessage[] = [
+  test("keeps completed changes as individual rows", async () => {
+    const messages: PetrinautAiMessage[] = [
       {
         id: "assistant-1",
         role: "assistant",
@@ -5413,3 +4079,747 @@ describe("AiAssistantContents", () => {
     expect(screen.getByText("parameter: old_rate")).not.toBeNull();
   });
 });
+
+const toolRowPresentations = [
+  {
+    presentation: "stock",
+    revealTools: () => Promise.resolve(),
+    markers: {
+      pending: "[data-tool-progress-spinner]",
+      complete: '[data-tool-result-icon="complete"]',
+      notApplied: '[data-tool-result-icon="not-applied"]',
+      error: "svg",
+    },
+  },
+  {
+    presentation: "brunch",
+    revealTools: expandWork,
+    markers: {
+      pending: '[data-tool-status="pending"]',
+      complete: '[data-tool-status="ok"]',
+      notApplied: '[data-tool-status="ok"]',
+      error: '[data-tool-status="error"]',
+    },
+  },
+] as const;
+
+describe.each(toolRowPresentations)(
+  "AiAssistantContents tool rows in the $presentation presentation",
+  ({ presentation, revealTools, markers }) => {
+    test.each([
+      {
+        label: "blocked",
+        output: {
+          applied: false,
+          blocked: "readonly",
+          reason: "Read-only document.",
+        },
+      },
+      {
+        label: "declined",
+        output: { applied: false, reason: "User declined auto-layout." },
+      },
+      {
+        label: "no-op",
+        output: {
+          applied: false,
+          reason: "The mutation left the document unchanged.",
+        },
+      },
+      {
+        label: "stale host",
+        output: {
+          applied: false,
+          reason:
+            "The requested base does not match the independently observed document.",
+        },
+      },
+      {
+        label: "contradictory supplied summary",
+        output: {
+          applied: false,
+          reason: "Not applied by the host.",
+          title: "Updated arc weight",
+          detail: "Requested value: 4",
+        },
+      },
+    ])(
+      "renders an explicit $label result as not applied, never requested-value success",
+      async ({ output }) => {
+        render(
+          <AiAssistantContents
+            input=""
+            status="ready"
+            onClose={noop}
+            onInputChange={noop}
+            onStop={noop}
+            onSubmit={noop}
+            presentation={presentation}
+            messages={[
+              {
+                id: "assistant-unapplied",
+                role: "assistant",
+                parts: [
+                  {
+                    type: "dynamic-tool",
+                    toolName: "updateArcWeight",
+                    toolCallId: "unapplied",
+                    state: "output-available",
+                    input: {
+                      transitionId: "transition",
+                      placeId: "place",
+                      arcDirection: "input",
+                      weight: 4,
+                    },
+                    output,
+                  },
+                ],
+              },
+            ]}
+          />,
+        );
+        await revealTools();
+        const row = screen.getByRole("button", { name: /Not applied/u });
+        expect(row.getAttribute("data-tone")).toBe("neutral");
+        expect(within(row).getByText(output.reason)).not.toBeNull();
+        expect(
+          within(row).queryByText("Updated arc weight", { exact: true }),
+        ).toBeNull();
+        expect(row.querySelector(markers.notApplied)).not.toBeNull();
+        expect(
+          row.querySelector('[data-tool-result-icon="complete"]'),
+        ).toBeNull();
+      },
+    );
+
+    test("shows known noninteractive tool progress and replaces it with the terminal result", async () => {
+      const createMessages = (
+        state: "input-streaming" | "input-available" | "output-available",
+      ) =>
+        [
+          {
+            id: "assistant-1",
+            role: "assistant",
+            parts: [
+              {
+                type: "tool-addPlace",
+                state,
+                toolCallId: "tool-1",
+                input: {
+                  id: "place__buffer",
+                  name: "Buffer",
+                  colorId: null,
+                  dynamicsEnabled: false,
+                  differentialEquationId: null,
+                  x: 0,
+                  y: 0,
+                },
+                output:
+                  state === "output-available"
+                    ? { applied: true, title: "Added place Buffer" }
+                    : undefined,
+              },
+            ],
+          },
+        ] as PetrinautAiMessage[];
+      const props = {
+        input: "",
+        onClose: noop,
+        onInputChange: noop,
+        onStop: noop,
+        onSubmit: noop,
+        presentation,
+        status: "streaming" as const,
+      };
+      const rendered = render(
+        <AiAssistantContents
+          {...props}
+          messages={createMessages("input-streaming")}
+        />,
+      );
+
+      await revealTools();
+      expect(screen.getByText("Preparing…")).not.toBeNull();
+      const pendingRow = screen.getByRole("button", { name: /Preparing/u });
+      expect(within(pendingRow).queryByText(/Buffer/u)).toBeNull();
+      expect(pendingRow.getAttribute("aria-busy")).toBe("true");
+      expect(pendingRow.getAttribute("data-tone")).toBe("success");
+      expect(pendingRow.querySelector(markers.pending)).not.toBeNull();
+
+      rendered.rerender(
+        <AiAssistantContents
+          {...props}
+          messages={createMessages("input-available")}
+        />,
+      );
+
+      expect(screen.queryByText("Preparing…")).toBeNull();
+      expect(screen.getByText("Running…")).not.toBeNull();
+
+      rendered.rerender(
+        <AiAssistantContents
+          {...props}
+          messages={createMessages("output-available")}
+        />,
+      );
+
+      expect(screen.queryByText("Running…")).toBeNull();
+      const completedRow = screen.getByRole("button", {
+        name: /Added place Buffer/u,
+      });
+      expect(completedRow.hasAttribute("aria-busy")).toBe(false);
+      expect(completedRow.querySelector(markers.complete)).not.toBeNull();
+    });
+
+    test("uses the host presentation resolver at every lifecycle site", async () => {
+      const messages = [
+        {
+          id: "assistant-labels",
+          role: "assistant",
+          parts: [
+            {
+              type: "dynamic-tool",
+              toolName: "one",
+              toolCallId: "one",
+              state: "input-streaming",
+            },
+            {
+              type: "dynamic-tool",
+              toolName: "two",
+              toolCallId: "two",
+              state: "input-available",
+              input: {},
+            },
+            {
+              type: "dynamic-tool",
+              toolName: "three",
+              toolCallId: "three",
+              state: "output-available",
+              output: { title: "Stable result title" },
+            },
+            {
+              type: "dynamic-tool",
+              toolName: "four",
+              toolCallId: "four",
+              state: "output-error",
+              errorText: "Host tool failed",
+            },
+            {
+              type: "dynamic-tool",
+              toolName: "unknown-tool",
+              toolCallId: "unknown",
+              state: "output-available",
+              output: { title: "Unknown result title" },
+            },
+            {
+              type: "dynamic-tool",
+              toolName: "five",
+              toolCallId: "not-applied",
+              state: "output-available",
+              output: { applied: false, reason: "Nothing changed" },
+            },
+            {
+              type: "dynamic-tool",
+              toolName: "six",
+              toolCallId: "preserved-detail",
+              state: "output-available",
+              output: {
+                title: "Default result title",
+                detail: "Viewport frame: framed.",
+              },
+            },
+          ],
+        },
+      ] as PetrinautAiMessage[];
+      render(
+        <AiAssistantContents
+          input=""
+          messages={messages}
+          onClose={noop}
+          onInputChange={noop}
+          onStop={noop}
+          onSubmit={noop}
+          presentation={presentation}
+          status="streaming"
+          resolveToolPresentation={({ error, output, state, toolName }) => {
+            if (toolName === "unknown-tool") return undefined;
+            if (toolName === "five") {
+              return {
+                title: "Correctable five",
+                tone: "neutral",
+                items: ["Nothing changed"],
+              };
+            }
+            if (toolName === "six") return { title: "Completed six" };
+            const verb =
+              state === "pending"
+                ? toolName === "one"
+                  ? "Preparing"
+                  : "Running"
+                : state === "success"
+                  ? "Completed"
+                  : "Could not complete";
+            return {
+              title: `${verb} ${toolName}`,
+              detail:
+                error ??
+                (typeof output === "object" &&
+                output !== null &&
+                "title" in output &&
+                typeof output.title === "string"
+                  ? output.title
+                  : undefined),
+            };
+          }}
+        />,
+      );
+
+      await revealTools();
+      const preparingOne = screen.getByText("Preparing one").closest("button");
+      const runningTwo = screen.getByText("Running two").closest("button");
+      expect(preparingOne?.getAttribute("aria-busy")).toBe("true");
+      expect(runningTwo?.getAttribute("aria-busy")).toBe("true");
+      expect(screen.queryByText(/operations/u)).toBeNull();
+      expect(screen.getByText("Completed three")).not.toBeNull();
+      expect(screen.getByText("Could not complete four")).not.toBeNull();
+      expect(
+        within(
+          screen.getByText("Completed three").closest("button")!,
+        ).getByTestId("tool-detail").textContent,
+      ).toBe("Stable result title");
+      expect(
+        within(
+          screen.getByText("Could not complete four").closest("button")!,
+        ).getByTestId("tool-detail").textContent,
+      ).toBe("Host tool failed");
+      expect(screen.getByText("Unknown result title")).not.toBeNull();
+      expect(screen.getByText("Correctable five")).not.toBeNull();
+      expect(screen.queryByText("Not applied")).toBeNull();
+      expect(screen.queryByText("Completed five")).toBeNull();
+      expect(
+        screen
+          .getByRole("button", { name: /Correctable five/u })
+          .getAttribute("data-tone"),
+      ).toBe("neutral");
+      expect(
+        screen
+          .getByRole("button", { name: /Correctable five/u })
+          .querySelector(markers.notApplied),
+      ).not.toBeNull();
+      fireEvent.click(
+        screen.getByRole("button", { name: /Correctable five/u }),
+      );
+      expect(screen.getByText("Nothing changed")).not.toBeNull();
+      expect(
+        within(
+          screen.getByText("Completed six").closest("button")!,
+        ).getByTestId("tool-detail").textContent,
+      ).toBe("Viewport frame: framed.");
+    });
+
+    test("renders host pending, applied, refused and thrown tool cues", async () => {
+      const resolveToolPresentation = ({
+        output,
+        state,
+        toolName,
+      }: {
+        output: unknown;
+        state: "error" | "pending" | "success";
+        toolName: string;
+      }) => {
+        if (toolName !== "mutate_workpiece") return undefined;
+        if (
+          typeof output === "object" &&
+          output !== null &&
+          "disposition" in output &&
+          output.disposition === "refused" &&
+          "message" in output &&
+          typeof output.message === "string"
+        ) {
+          return {
+            title: "Ledger update needs correction",
+            tone: "neutral" as const,
+            items: [output.message],
+          };
+        }
+        return {
+          title:
+            state === "pending"
+              ? "Updating ledger"
+              : state === "success"
+                ? "Updated ledger"
+                : "Could not update ledger",
+          tone:
+            state === "pending"
+              ? ("pending" as const)
+              : state === "error"
+                ? ("danger" as const)
+                : ("success" as const),
+        };
+      };
+      const renderTools = (messages: PetrinautAiMessage[]) =>
+        render(
+          <AiAssistantContents
+            input=""
+            messages={messages}
+            onClose={noop}
+            onInputChange={noop}
+            onStop={noop}
+            onSubmit={noop}
+            presentation={presentation}
+            resolveToolPresentation={resolveToolPresentation}
+            status="streaming"
+          />,
+        );
+
+      const pending = renderTools([
+        {
+          id: "assistant-pending",
+          role: "assistant",
+          parts: [
+            {
+              type: "dynamic-tool",
+              toolName: "mutate_workpiece",
+              toolCallId: "pending-call",
+              state: "input-streaming",
+              input: {},
+            },
+          ],
+        },
+      ]);
+      await revealTools();
+      const pendingRow = screen.getByRole("button", {
+        name: /Updating ledger/u,
+      });
+      expect(pendingRow.getAttribute("data-tone")).toBe("pending");
+      expect(pendingRow.querySelector(markers.pending)).not.toBeNull();
+      pending.unmount();
+
+      const applied = renderTools([
+        {
+          id: "assistant-applied",
+          role: "assistant",
+          parts: [
+            {
+              type: "dynamic-tool",
+              toolName: "mutate_workpiece",
+              toolCallId: "applied-call",
+              state: "output-available",
+              input: {},
+              output: {
+                disposition: "applied",
+                applied: true,
+                revisionId: "applied-call",
+                sha256: "b".repeat(64),
+                ordinal: 1,
+              },
+            },
+          ],
+        },
+      ]);
+      await revealTools();
+      const appliedRow = screen.getByRole("button", {
+        name: /Updated ledger/u,
+      });
+      expect(appliedRow.getAttribute("data-tone")).toBe("success");
+      expect(appliedRow.querySelector(markers.complete)).not.toBeNull();
+      applied.unmount();
+
+      const refused = renderTools([
+        {
+          id: "assistant-refused",
+          role: "assistant",
+          parts: [
+            {
+              type: "dynamic-tool",
+              toolName: "mutate_workpiece",
+              toolCallId: "refused-call",
+              state: "output-available",
+              input: {},
+              output: {
+                disposition: "refused",
+                applied: false,
+                correctable: true,
+                code: "silent-shrink",
+                message:
+                  "Nothing was written; resubmit the complete settled account.",
+                currentRevision: null,
+              },
+            },
+          ],
+        },
+      ]);
+      await revealTools();
+      const refusedRow = screen.getByRole("button", {
+        name: /Ledger update needs correction/u,
+      });
+      expect(refusedRow.getAttribute("data-tone")).toBe("neutral");
+      expect(refusedRow.querySelector(markers.notApplied)).not.toBeNull();
+      expect(within(refusedRow).queryByTestId("tool-detail")).toBeNull();
+      fireEvent.click(refusedRow);
+      expect(
+        screen.getByText(
+          "Nothing was written; resubmit the complete settled account.",
+        ),
+      ).not.toBeNull();
+      refused.unmount();
+
+      renderTools([
+        {
+          id: "assistant-thrown",
+          role: "assistant",
+          parts: [
+            {
+              type: "dynamic-tool",
+              toolName: "mutate_workpiece",
+              toolCallId: "thrown-call",
+              state: "output-error",
+              input: {},
+              errorText: "Current state missing",
+            },
+          ],
+        },
+      ]);
+      await revealTools();
+      const thrownRow = screen.getByRole("button", {
+        name: /Could not update ledger/u,
+      });
+      expect(thrownRow.getAttribute("data-tone")).toBe("danger");
+      expect(thrownRow.querySelector(markers.error)).not.toBeNull();
+    });
+  },
+);
+
+describe("AiAssistantContents in the stock presentation", () => {
+  test.each([
+    { status: "streaming" as const, live: true },
+    { status: "error" as const, live: false },
+  ])(
+    "keeps reasoning live only while its reply streams ($status)",
+    ({ status, live }) => {
+      render(
+        <AiAssistantContents
+          input=""
+          messages={[
+            {
+              id: "assistant-1",
+              role: "assistant",
+              parts: [
+                {
+                  type: "reasoning",
+                  state: "streaming",
+                  text: "**Planning the net**\n\nUnderstanding the request.",
+                },
+              ],
+            },
+          ]}
+          error={status === "error" ? new Error("Network failed") : undefined}
+          onClose={noop}
+          onInputChange={noop}
+          onStop={noop}
+          onSubmit={noop}
+          status={status}
+        />,
+      );
+
+      expect(
+        screen
+          .getByRole("button", { name: /Thinking/u })
+          .getAttribute("aria-expanded"),
+      ).toBe(String(live));
+    },
+  );
+
+  test("renders streamed markdown and collapsed reasoning", () => {
+    const startedAt = Date.parse("2026-05-14T12:00:00Z");
+    const finishedAt = startedAt + 4_500;
+    const messages: PetrinautAiMessage[] = [
+      {
+        id: "assistant-1",
+        role: "assistant",
+        parts: [
+          {
+            type: "reasoning",
+            state: "done",
+            text: "**Planning the net**\n\nUnderstanding the requested model.",
+            providerMetadata: {
+              petrinaut: { startedAt, finishedAt },
+            },
+          },
+          {
+            type: "text",
+            state: "done",
+            text: "**Created** a supply chain model.",
+          },
+        ],
+      },
+    ];
+
+    render(
+      <AiAssistantContents
+        input=""
+        messages={messages}
+        onClose={noop}
+        onInputChange={noop}
+        onStop={noop}
+        onSubmit={noop}
+        status="ready"
+      />,
+    );
+
+    expect(screen.getByText("Created")).not.toBeNull();
+    expect(
+      screen
+        .getByRole("button", { name: /Thinking: Planning the net/u })
+        .getAttribute("aria-expanded"),
+    ).toBe("false");
+    expect(screen.getByText("Thinking: Planning the net")).not.toBeNull();
+    expect(screen.queryByTestId("reasoning-status")).toBeNull();
+    expect(screen.getByLabelText(/Reasoning time/u)).not.toBeNull();
+  });
+
+  test("selects a target from a completed tool summary without a single-item chevron", () => {
+    const onSelectToolTarget = vi.fn();
+    const messages: PetrinautAiMessage[] = [
+      {
+        id: "assistant-1",
+        role: "assistant",
+        parts: [
+          {
+            type: "tool-addPlace",
+            state: "output-available",
+            toolCallId: "tool-1",
+            input: {
+              id: "place__buffer",
+              name: "Buffer",
+              colorId: null,
+              dynamicsEnabled: false,
+              differentialEquationId: null,
+              x: 0,
+              y: 0,
+            },
+            output: {
+              applied: true,
+              title: "Added place Buffer",
+              detail: "Previous name: Queue",
+              target: {
+                kind: "selection",
+                item: { type: "place", id: "place__buffer" },
+              },
+            },
+          },
+        ],
+      },
+    ];
+
+    render(
+      <AiAssistantContents
+        input=""
+        messages={messages}
+        onClose={noop}
+        onInputChange={noop}
+        onSelectToolTarget={onSelectToolTarget}
+        onStop={noop}
+        onSubmit={noop}
+        status="ready"
+      />,
+    );
+
+    const toolButton = screen.getByRole("button", {
+      name: /Added place Buffer/u,
+    });
+
+    fireEvent.click(toolButton);
+
+    expect(screen.queryByTestId("tool-item-chevron")).toBeNull();
+    expect(toolButton.getAttribute("data-tone")).toBe("success");
+    expect(screen.getByTestId("tool-detail").textContent).toBe(
+      "Previous name: Queue",
+    );
+    expect(onSelectToolTarget).toHaveBeenCalledWith({
+      kind: "selection",
+      item: { type: "place", id: "place__buffer" },
+    });
+  });
+
+  test("prioritizes Stop and retains disabled Send without Voice mode", () => {
+    const onStop = vi.fn();
+    const props = {
+      input: "Draft",
+      messages: [] as PetrinautAiMessage[],
+      onClose: noop,
+      onInputChange: noop,
+      onStop,
+      onSubmit: vi.fn(),
+      status: "streaming" as const,
+      voiceModeAvailable: true,
+    };
+    const rendered = render(<AiAssistantContents {...props} />);
+
+    expect(
+      screen.queryByRole("button", { name: "Start voice mode" }),
+    ).toBeNull();
+    expect(screen.queryByRole("button", { name: "Send message" })).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Stop AI response" }));
+    expect(onStop).toHaveBeenCalledOnce();
+
+    rendered.rerender(
+      <AiAssistantContents
+        {...props}
+        input=""
+        status="ready"
+        voiceModeAvailable={false}
+      />,
+    );
+
+    expect(
+      screen.getByRole<HTMLButtonElement>("button", {
+        name: "Send message",
+      }).disabled,
+    ).toBe(true);
+  });
+
+  test("switches the trailing action from Voice mode to Send for trimmed input", () => {
+    const onInputModeChange = vi.fn();
+    const onSubmit = vi.fn();
+    const props = {
+      messages: [] as PetrinautAiMessage[],
+      onClose: noop,
+      onInputChange: noop,
+      onInputModeChange,
+      onStop: noop,
+      onSubmit,
+      status: "ready" as const,
+      voiceModeAvailable: true,
+    };
+    const rendered = render(<AiAssistantContents {...props} input="" />);
+
+    const voiceButton = screen.getByRole("button", {
+      name: "Start voice mode",
+    });
+    expect(voiceButton.querySelector("svg")).not.toBeNull();
+    expect(voiceButton.parentElement?.getAttribute("data-scope")).toBe(
+      "tooltip",
+    );
+    fireEvent.click(voiceButton);
+
+    expect(onInputModeChange).toHaveBeenCalledOnce();
+    expect(onInputModeChange).toHaveBeenCalledWith("voice");
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    rendered.rerender(<AiAssistantContents {...props} input="   " />);
+    expect(
+      screen.getByRole("button", { name: "Start voice mode" }),
+    ).not.toBeNull();
+
+    rendered.rerender(
+      <AiAssistantContents {...props} input="  Create a queue  " />,
+    );
+    expect(
+      screen.queryByRole("button", { name: "Start voice mode" }),
+    ).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Send message" }));
+
+    expect(onSubmit).toHaveBeenCalledOnce();
+  });
+});
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents.tsx
index 35b0ca4c872..0e05290c991 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents.tsx
@@ -1,7 +1,5 @@
 import {
-  memo,
   type ReactNode,
-  type RefObject,
   use,
   useEffect,
   useEffectEvent,
@@ -10,15 +8,11 @@ import {
   useRef,
   useState,
 } from "react";
-import ReactMarkdown from "react-markdown";
 
 import { Button, Icon, LoadingSpinner } from "@hashintel/ds-components";
 import { css, cva } from "@hashintel/ds-helpers/css";
 
-import {
-  NotificationsContext,
-  type AddNotificationInput,
-} from "../../../../../react/notifications/context";
+import { NotificationsContext } from "../../../../../react/notifications/context";
 import { EditorContext } from "../../../../../react/state/editor-context";
 import {
   useVoiceSessionErrorMessage,
@@ -35,34 +29,26 @@ import { ResizeHandle } from "../../../../resize/resize-handle";
 import { AiVoiceModeIcon } from "../../components/ai-voice-mode-button";
 import { FloatingResizeHandles } from "../../shared/floating-resize-handles";
 import { useFloatingPanel } from "../../shared/use-floating-panel";
-import { BrunchWorkFold } from "./ai-assistant-contents/brunch-work-fold";
-import {
-  ExperimentCard,
-  type AiExperimentState,
-} from "./ai-assistant-contents/experiment-card";
+import { BrunchResponseStatus } from "./ai-assistant-contents/brunch-response-status";
+import { BrunchTranscript } from "./ai-assistant-contents/brunch-transcript";
+import { ChatTabMark } from "./ai-assistant-contents/chat-tab-mark";
+import { AiAssistantComposer } from "./ai-assistant-contents/composer";
 import { aiFooterMinHeight } from "./ai-assistant-contents/footer-height";
-import { getMessageRenderItems } from "./ai-assistant-contents/get-message-render-items";
 import {
   PromptChips,
   type PromptChip,
 } from "./ai-assistant-contents/prompt-chips";
-import { AiAssistantReasoning } from "./ai-assistant-contents/reasoning";
-import { markdownStyle } from "./ai-assistant-contents/shared/markdown-style";
-import {
-  AiAssistantToolList,
-  type OnInteractiveToolSubmit,
-} from "./ai-assistant-contents/tool-list";
+import { errorNotification } from "./ai-assistant-contents/shared/error-notification";
+import { StockTranscript } from "./ai-assistant-contents/stock-transcript";
 import { VoiceAlerts } from "./ai-assistant-contents/voice-alerts";
 import { LiveVoiceDock, VoiceDock } from "./ai-assistant-contents/voice-dock";
-import { VoiceInputProvenance } from "./ai-assistant-contents/voice-input-provenance";
 import { getInteractiveTool } from "./interactive-tools/registry";
 
-import type {
-  PetrinautAiAssistant,
-  PetrinautAiToolPresentationResolver,
-} from "../../../../petrinaut";
+import type { PetrinautAiAssistant } from "../../../../petrinaut";
 import type { PetrinautAiInputMode } from "../../../../types/ai-assistant-composer-control";
 import type { PetrinautAiInteractiveTool } from "../../../../types/ai-interactive-tool";
+import type { AiExperimentState } from "./ai-assistant-contents/experiment-card";
+import type { OnInteractiveToolSubmit } from "./ai-assistant-contents/tool-list";
 import type { AiToolTarget } from "./tool-summaries";
 import type { PetrinautAiMessage } from "./types";
 
@@ -70,11 +56,6 @@ type AiAssistantStatus = "submitted" | "streaming" | "ready" | "error";
 
 const EMPTY_INTERACTIVE_TOOLS: readonly PetrinautAiInteractiveTool[] = [];
 
-const errorNotification = (
-  message: string,
-  detail?: string,
-): AddNotificationInput => ({ detail, message, tone: "error" });
-
 export type AiAssistantContentsProps = {
   additionalTab?: PetrinautAiAssistant["additionalTab"];
   attentionAnnouncement?: string;
@@ -325,16 +306,23 @@ const headerButtonStyle = css({
   },
 });
 
-const messagesStyle = css({
-  display: "flex",
-  flexDirection: "column",
-  gap: "3",
-  flex: "[1]",
-  minHeight: "[0]",
-  overflowY: "auto",
-  padding: "3",
-  paddingBottom: "4",
-  overscrollBehavior: "contain",
+const messagesStyle = cva({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "3",
+    flex: "[1]",
+    minHeight: "[0]",
+    overflowY: "auto",
+    padding: "3",
+    overscrollBehavior: "contain",
+  },
+  variants: {
+    presentation: {
+      stock: {},
+      brunch: { paddingBottom: "4" },
+    },
+  },
 });
 
 const emptyStyle = css({
@@ -353,93 +341,6 @@ const emptyStyle = css({
   padding: "[20px]",
 });
 
-const messageStyle = cva({
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "2",
-    padding: "[10px]",
-    fontSize: "sm",
-    fontWeight: "medium",
-    lineHeight: "[1.5]",
-    color: "neutral.s100",
-    userSelect: "text",
-  },
-  variants: {
-    role: {
-      assistant: {
-        alignSelf: "stretch",
-        gap: "1",
-        padding: "[6px 0]",
-        '&[data-input-mode="text"]': {
-          paddingY: "1",
-          '& > [data-answer="brunch"]:not(:first-child)': { marginTop: "1" },
-          "@media (hover: hover) and (pointer: fine)": {
-            "&:not([data-latest-answer]):not(:hover):not(:focus-within) > [data-answer-actions]":
-              {
-                opacity: "0",
-                pointerEvents: "none",
-              },
-          },
-        },
-      },
-      user: {
-        alignSelf: "flex-end",
-        maxWidth: "[92%]",
-        gap: "0.5",
-        padding: "[0]",
-      },
-    },
-  },
-});
-
-// User input isn't Markdown — rendering it as such would mangle stray
-// `*`, `_`, `#`, etc. and collapse the single newlines they typed. Render it
-// verbatim with preserved whitespace instead.
-const userTextStyle = css({
-  display: "flex",
-  alignItems: "flex-start",
-  gap: "1.5",
-  alignSelf: "flex-end",
-  backgroundColor: "neutral.a20",
-  borderRadius: "lg",
-  padding: "[10px]",
-  whiteSpace: "pre-wrap",
-  wordBreak: "break-word",
-});
-
-const answerStyle = cva({
-  base: {
-    overflowWrap: "anywhere",
-  },
-  variants: {
-    presentation: {
-      stock: {},
-      brunch: {
-        alignSelf: "flex-start",
-        maxWidth: "[92%]",
-        backgroundColor: "blue.a20",
-        borderRadius: "lg",
-        padding: "[10px]",
-        color: "neutral.s100",
-        '&[data-streaming="true"]': {
-          animation: "[petrinautComposerActionSwap 180ms ease-out]",
-        },
-        "@media (prefers-reduced-motion: reduce)": {
-          animation: "[none]",
-        },
-        "[data-work-status] &": {
-          alignSelf: "stretch",
-          maxWidth: "full",
-          backgroundColor: "neutral.s00",
-          border: "[1px solid {colors.neutral.a30}]",
-        },
-      },
-    },
-  },
-  defaultVariants: { presentation: "stock" },
-});
-
 const workingStatusStyle = css({
   display: "flex",
   alignItems: "center",
@@ -449,16 +350,6 @@ const workingStatusStyle = css({
   color: "neutral.s80",
   fontSize: "sm",
   fontWeight: "medium",
-  animation: "[petrinautComposerActionSwap 180ms ease-out]",
-  "@media (prefers-reduced-motion: reduce)": { animation: "[none]" },
-});
-
-const stoppedNoteStyle = css({
-  alignSelf: "center",
-  marginTop: "1.5",
-  paddingY: "1",
-  fontSize: "xs",
-  color: "neutral.s80",
 });
 
 const composerWrapStyle = css({
@@ -480,116 +371,6 @@ const composerWrapStyle = css({
   },
 });
 
-const composerActionGlyphStyle = css({
-  display: "inline-flex",
-  animationName: "[petrinautComposerActionSwap]",
-  animationDuration: "[140ms]",
-  animationTimingFunction: "[cubic-bezier(0.2, 0.9, 0.3, 1)]",
-  "@media (prefers-reduced-motion: reduce)": {
-    animationName: "[none]",
-  },
-});
-
-const composerActionButtonStyle = css({
-  flexShrink: 0,
-  width: "[30px]",
-  height: "[30px]",
-  minWidth: "[30px]",
-  borderRadius: "[calc({radii.lg} - {spacing.1})]",
-  "&[data-stop=true]": {
-    width: "[28px]",
-    height: "[28px]",
-    minWidth: "[28px]",
-    borderRadius: "full",
-  },
-});
-
-const composerStyle = css({
-  display: "flex",
-  alignItems: "flex-end",
-  gap: "1",
-  borderRadius: "lg",
-  backgroundColor: "neutral.s10",
-  border: "[1px solid {colors.neutral.bd.subtle}]",
-  padding: "1",
-  transition: "[border-color 150ms ease, box-shadow 150ms ease]",
-  _focusWithin: {
-    borderColor: "blue.s50",
-    boxShadow: "[0 0 0 2px {colors.blue.a10}]",
-  },
-  "@media (prefers-reduced-motion: reduce)": {
-    transition: "[none]",
-  },
-});
-
-// Caps how tall the composer can auto-grow before it starts scrolling
-// internally. Kept in sync with `maxHeight` below — the auto-grow effect
-// reads this constant directly so the two can't drift.
-const composerMaxHeight = 160;
-
-const composerTextareaStyle = css({
-  flex: "[1]",
-  minWidth: "[0]",
-  minHeight: "[30px]",
-  maxHeight: `[${composerMaxHeight}px]`,
-  paddingX: "2",
-  paddingY: "[5px]",
-  border: "none",
-  outline: "none",
-  resize: "none",
-  overflowY: "auto",
-  backgroundColor: "[transparent]",
-  color: "neutral.fg.body",
-  fontFamily: "[inherit]",
-  fontSize: "sm",
-  fontWeight: "medium",
-  lineHeight: "[1.4]",
-  // Animates the height changes driven by the auto-grow effect, so adding a
-  // line (Shift+Enter) or wrapping expands the box smoothly.
-  transition: "[height 120ms ease]",
-  "@media (prefers-reduced-motion: reduce)": {
-    transition: "[none]",
-  },
-  _placeholder: {
-    color: "neutral.s70",
-  },
-  _disabled: {
-    cursor: "not-allowed",
-    color: "neutral.s90",
-  },
-});
-
-const composerHintStyle = css({
-  flex: "1",
-  paddingX: "2",
-  paddingBottom: "1",
-  color: "neutral.s80",
-  fontSize: "xs",
-  textAlign: "left",
-});
-
-const StreamingWords = ({
-  text,
-  streaming,
-}: {
-  text: string;
-  streaming: boolean;
-}) =>
-  streaming
-    ? [...text.matchAll(/\S+\s*|\s+/gu)].map((word) => (
-        <span
-          key={word.index}
-          data-streamed-word
-          className={css({
-            animation: "[petrinautComposerActionSwap 180ms ease-out]",
-            "@media (prefers-reduced-motion: reduce)": { animation: "none" },
-          })}
-        >
-          {word[0]}
-        </span>
-      ))
-    : text;
-
 const getPartScrollSignature = (
   part: PetrinautAiMessage["parts"][number],
 ): string => {
@@ -629,342 +410,6 @@ const getMessagesScrollKey = (messages: PetrinautAiMessage[]): string => {
   return `${messages.length}:${last.id}:${last.parts.length}:${partSignature}:${dataSignature}`;
 };
 
-type MessageHandlersRef = RefObject<{
-  onInteractiveToolSubmit?: OnInteractiveToolSubmit;
-  onSelectToolTarget?: (target: AiToolTarget) => void;
-  onRetryMessage: (messageId: string) => void;
-}>;
-
-/**
- * Per-message renderer wrapped in `React.memo`.
- *
- * The AI SDK rebuilds the `messages` array on every reasoning/text delta but
- * uses `slice` for unchanged messages and only `structuredClone`s the active
- * one. That gives every completed message a stable reference between chunks,
- * so memoising by reference equality lets us skip re-rendering the whole transcript on
- * every chunk — only the message currently being streamed has to re-render.
- *
- * Callbacks are forwarded via a ref so identity churn from the panel's inline
- * arrow functions doesn't bust the memo.
- */
-const AiAssistantMessage = memo(
-  ({
-    handlersRef,
-    hiddenToolNames,
-    interactiveTools,
-    message,
-    experimentStates,
-    onCancelExperiment,
-    resolveToolPresentation,
-    presentation,
-    voice,
-    expandReasoning,
-    active,
-    stopped,
-    canRetry,
-    latestAnswer,
-  }: {
-    handlersRef: MessageHandlersRef;
-    hiddenToolNames?: ReadonlySet<string>;
-    interactiveTools: readonly PetrinautAiInteractiveTool[];
-    message: PetrinautAiMessage;
-    experimentStates?: Record<string, AiExperimentState>;
-    onCancelExperiment?: (toolCallId: string) => void;
-    resolveToolPresentation?: PetrinautAiToolPresentationResolver;
-    presentation: NonNullable<PetrinautAiAssistant["presentation"]>;
-    voice: boolean;
-    expandReasoning: boolean;
-    active: boolean;
-    stopped: boolean;
-    canRetry: boolean;
-    latestAnswer: boolean;
-  }) => {
-    const { addNotification } = use(NotificationsContext);
-    const [copied, setCopied] = useState(false);
-    useEffect(() => {
-      if (!copied) return;
-      const timer = window.setTimeout(() => setCopied(false), 1_200);
-      return () => window.clearTimeout(timer);
-    }, [copied]);
-    const role = message.role === "user" ? "user" : "assistant";
-    const renderItems = getMessageRenderItems(
-      message,
-      interactiveTools,
-      resolveToolPresentation,
-      hiddenToolNames,
-    );
-    const { work, answers, cards, brief, voiceAgentReply, voiceAgentWrapUp } =
-      renderItems;
-    const wasStopped = stopped || message.metadata?.stopped === true;
-    const awaitingApproval = work.tools.some(
-      (tool) => tool.interactive && tool.state === "input-available",
-    );
-    const working =
-      active &&
-      (expandReasoning ||
-        answers.length === 0 ||
-        work.reasoning.some((item) => item.part.state === "streaming") ||
-        work.tools.some(
-          (tool) =>
-            tool.state === "input-streaming" ||
-            tool.state === "input-available",
-        ));
-    const workStatus = wasStopped
-      ? "stopped"
-      : awaitingApproval
-        ? "approval"
-        : working
-          ? "streaming"
-          : "settled";
-    const writtenAnswer =
-      answers.length > 0 ? (
-        <div
-          className={answerStyle({ presentation })}
-          data-answer={presentation === "brunch" ? "brunch" : undefined}
-          data-streaming={active || undefined}
-        >
-          {answers.map((item) => (
-            <div className={markdownStyle} key={item.key}>
-              <ReactMarkdown>{item.part.text}</ReactMarkdown>
-            </div>
-          ))}
-        </div>
-      ) : null;
-    // Voice renders the written answer inside the fold; Chat renders it below.
-    const showWork =
-      role === "assistant" &&
-      (active ||
-        wasStopped ||
-        work.reasoning.length > 0 ||
-        work.tools.length > 0 ||
-        (voice && answers.length > 0));
-
-    return (
-      <div
-        className={messageStyle({ role })}
-        data-role={role}
-        data-input-mode={voice ? "voice" : "text"}
-        data-latest-answer={latestAnswer || undefined}
-        data-voice-origin={message.metadata?.source === "voice" || undefined}
-      >
-        {role === "user" && (
-          <div className={userTextStyle} data-user-bubble>
-            {!voice && message.metadata?.source === "voice" && (
-              <span
-                role="img"
-                aria-label="Sent using voice"
-                title="Sent using voice"
-                className={css({
-                  display: "inline-flex",
-                  flexShrink: 0,
-                  marginTop: "[4px]",
-                  color: "neutral.s80",
-                })}
-              >
-                <AiVoiceModeIcon size={12} />
-              </span>
-            )}
-            <div className={css({ minWidth: "[0]" })}>
-              {answers.map((item) => (
-                <div key={item.key}>
-                  <StreamingWords
-                    text={item.part.text}
-                    streaming={
-                      item.part.state === "streaming" &&
-                      message.metadata?.source === "voice"
-                    }
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-        {brief && <VoiceInputProvenance brief={brief} />}
-        {voiceAgentReply && (
-          <div
-            className={answerStyle({ presentation })}
-            data-answer="voice-reply"
-            aria-busy={voiceAgentReply.state === "streaming"}
-          >
-            <StreamingWords
-              text={voiceAgentReply.text}
-              streaming={voiceAgentReply.state === "streaming"}
-            />
-          </div>
-        )}
-        {showWork && presentation === "brunch" && (
-          <BrunchWorkFold status={workStatus} preserveOpen={expandReasoning}>
-            {work.reasoning.map((item) => (
-              <AiAssistantReasoning
-                key={item.key}
-                isStreaming={active && item.part.state === "streaming"}
-                expandWhileStreaming={expandReasoning && !voice}
-                part={item.part}
-              />
-            ))}
-            <AiAssistantToolList
-              tools={work.tools}
-              active={active}
-              stopped={wasStopped}
-              preserveOpen={expandReasoning}
-              presentation={presentation}
-              onInteractiveToolSubmit={(params) =>
-                handlersRef.current.onInteractiveToolSubmit?.(params)
-              }
-              onSelectToolTarget={(target) =>
-                handlersRef.current.onSelectToolTarget?.(target)
-              }
-            />
-            {voice && writtenAnswer}
-            {voice && working && !writtenAnswer && (
-              <div
-                className={answerStyle({ presentation })}
-                role="status"
-                aria-label="Thinking"
-              >
-                {["92%", "74%", "46%"].map((width) => (
-                  <span
-                    key={width}
-                    style={{ width }}
-                    className={css({
-                      display: "block",
-                      height: "[10px]",
-                      marginY: "2",
-                      borderRadius: "sm",
-                      backgroundColor: "neutral.a30",
-                      animation: "[pulse 1.6s ease-in-out infinite]",
-                      "@media (prefers-reduced-motion: reduce)": {
-                        animation: "none",
-                      },
-                    })}
-                  />
-                ))}
-              </div>
-            )}
-          </BrunchWorkFold>
-        )}
-        {showWork && presentation === "stock" && (
-          <>
-            {work.reasoning.map((item) => (
-              <AiAssistantReasoning
-                key={item.key}
-                isStreaming={active && item.part.state === "streaming"}
-                expandWhileStreaming={active && item.part.state === "streaming"}
-                part={item.part}
-              />
-            ))}
-            <AiAssistantToolList
-              tools={work.tools}
-              active={active}
-              stopped={wasStopped}
-              presentation={presentation}
-              onInteractiveToolSubmit={(params) =>
-                handlersRef.current.onInteractiveToolSubmit?.(params)
-              }
-              onSelectToolTarget={(target) =>
-                handlersRef.current.onSelectToolTarget?.(target)
-              }
-            />
-          </>
-        )}
-        {role === "assistant" &&
-          (!voice || presentation === "stock") &&
-          writtenAnswer}
-        {cards.map((item) =>
-          item.type === "experiment" ? (
-            <ExperimentCard
-              key={item.key}
-              part={item.part}
-              state={experimentStates?.[item.part.toolCallId]}
-              onCancel={onCancelExperiment}
-            />
-          ) : (
-            <AiAssistantToolList
-              key={item.key}
-              tools={[item.tool]}
-              producedCard
-              presentation={presentation}
-              onInteractiveToolSubmit={(params) =>
-                handlersRef.current.onInteractiveToolSubmit?.(params)
-              }
-              onSelectToolTarget={(target) =>
-                handlersRef.current.onSelectToolTarget?.(target)
-              }
-            />
-          ),
-        )}
-        {voiceAgentWrapUp && (
-          <div
-            className={answerStyle({ presentation })}
-            data-answer="voice-wrap-up"
-            aria-busy={voiceAgentWrapUp.state === "streaming"}
-          >
-            <StreamingWords
-              text={voiceAgentWrapUp.text}
-              streaming={voiceAgentWrapUp.state === "streaming"}
-            />
-          </div>
-        )}
-        {role === "assistant" && wasStopped && (
-          <div className={stoppedNoteStyle}>Response stopped</div>
-        )}
-        {presentation === "brunch" &&
-          role === "assistant" &&
-          !voice &&
-          writtenAnswer &&
-          !active && (
-            <div
-              className={css({
-                display: "flex",
-                gap: "1",
-                color: "neutral.s80",
-              })}
-              data-answer-actions
-            >
-              <Button
-                size="xs"
-                variant="ghost"
-                aria-label={copied ? "Answer copied" : "Copy answer"}
-                tooltip={copied ? "Copied" : "Copy"}
-                prefix={
-                  <ExperimentalIcon
-                    name={copied ? "check" : "copy"}
-                    size={14}
-                  />
-                }
-                onClick={() => {
-                  void (async () => {
-                    try {
-                      await navigator.clipboard.writeText(
-                        answers.map((answer) => answer.part.text).join("\n\n"),
-                      );
-                      setCopied(true);
-                    } catch {
-                      addNotification(
-                        errorNotification("Could not copy the answer"),
-                      );
-                    }
-                  })();
-                }}
-              />
-              {canRetry && (
-                <Button
-                  size="xs"
-                  variant="ghost"
-                  aria-label="Retry answer"
-                  tooltip="Retry as a new turn"
-                  prefix={<ExperimentalIcon name="rotate" size={14} />}
-                  onClick={() => handlersRef.current.onRetryMessage(message.id)}
-                />
-              )}
-            </div>
-          )}
-      </div>
-    );
-  },
-);
-AiAssistantMessage.displayName = "AiAssistantMessage";
-
 export const getTranscriptLabel = (
   primaryLabel: string | undefined,
   inputMode: PetrinautAiInputMode,
@@ -1030,22 +475,12 @@ export const AiAssistantContents = ({
   const voiceSessionWarningMessage = useVoiceSessionWarningMessage();
   const isVoiceSessionLive = voiceSessionPhase !== null;
   const isBusy = status === "submitted" || status === "streaming";
-  const hasInput = input.trim().length > 0;
-  const canSubmit = hasInput && !isBusy && !voiceHandoffPending;
   const isBrunchChat = presentation === "brunch";
   const transcriptLabel = getTranscriptLabel(
     primaryLabel,
     inputMode,
     presentation,
   );
-  const pendingLabel =
-    isBrunchChat && isBusy
-      ? showingHostTab
-        ? (workingLabel ?? "Brunch is working")
-        : messages.at(-1)?.role !== "assistant"
-          ? "Waiting for Brunch"
-          : undefined
-      : undefined;
   const awaitingDecision =
     !stopped &&
     messages.some((message) =>
@@ -1069,57 +504,6 @@ export const AiAssistantContents = ({
         : undefined
     : undefined;
 
-  const composerAction: {
-    disabled: boolean;
-    glyph: "arrowUp" | "stopFilled" | "voice";
-    isSubmit: boolean;
-    label: string;
-    onClick?: () => void;
-    tone: "brand" | "neutral";
-    type: "button" | "submit";
-    variant: "solid" | "subtle";
-  } = isBusy
-    ? {
-        disabled: false,
-        glyph: "stopFilled",
-        isSubmit: false,
-        label: "Stop AI response",
-        onClick: onStop,
-        tone: isBrunchChat ? "brand" : "neutral",
-        type: "button",
-        variant: isBrunchChat ? "solid" : "subtle",
-      }
-    : canSubmit
-      ? {
-          disabled: false,
-          glyph: "arrowUp",
-          isSubmit: true,
-          label: "Send message",
-          tone: "brand",
-          type: "submit",
-          variant: "solid",
-        }
-      : !hasInput && voiceModeAvailable && onInputModeChange
-        ? {
-            disabled: false,
-            glyph: "voice",
-            isSubmit: false,
-            label: "Start voice mode",
-            onClick: () => onInputModeChange("voice"),
-            tone: "brand",
-            type: "button",
-            variant: "solid",
-          }
-        : {
-            disabled: true,
-            glyph: "arrowUp",
-            isSubmit: false,
-            label: "Send message",
-            tone: "brand",
-            type: "submit",
-            variant: "solid",
-          };
-
   const isVoiceDockCollapsed =
     voiceDockCollapsed && (isVoiceSessionLive || inputMode === "voice");
 
@@ -1243,6 +627,8 @@ export const AiAssistantContents = ({
     }
     distanceFromEndRef.current =
       node.scrollHeight - node.scrollTop - node.clientHeight;
+    // The stock transcript always follows new output.
+    if (!isBrunchChat) return;
     // The smooth follow scroll only moves down, and can trail an end that
     // grows mid-animation; only the reader moving up stops following.
     if (distanceFromEndRef.current <= 96) {
@@ -1270,22 +656,6 @@ export const AiAssistantContents = ({
   const suppressChips =
     isBrunchChat && (isBusy || experimentRunning || awaitingDecision);
 
-  // Stable container for the per-render callbacks so `AiAssistantMessage`'s
-  // memo comparator doesn't see identity churn from the panel's inline
-  // arrow functions on every render. The ref itself is stable across renders,
-  // so memoised children never re-render due to handler changes — but we
-  // refresh `.current` in an effect so any new closure capture is picked up
-  // by the next event.
-  const firstUserIndex = messages.findIndex(
-    (message) => message.role === "user",
-  );
-  const latestAnswerId = messages.findLast(
-    (message) =>
-      message.role === "assistant" &&
-      message.parts.some(
-        (part) => part.type === "text" && part.text.trim().length > 0,
-      ),
-  )?.id;
   const onRetryMessage = (messageId: string) => {
     if (isBusy || voiceHandoffPending) return;
     const index = messages.findIndex((message) => message.id === messageId);
@@ -1297,6 +667,12 @@ export const AiAssistantContents = ({
       .join("\n\n");
     if (prompt) onRetryPrompt?.(prompt);
   };
+  // Stable container for the per-render callbacks so the memoised transcript
+  // messages don't see identity churn from the panel's inline arrow functions
+  // on every render. The ref itself is stable across renders, so memoised
+  // children never re-render due to handler changes — but we refresh
+  // `.current` in an effect so any new closure capture is picked up by the
+  // next event.
   const handlersRef = useRef({
     onInteractiveToolSubmit,
     onSelectToolTarget,
@@ -1309,6 +685,15 @@ export const AiAssistantContents = ({
       onRetryMessage,
     };
   });
+  const transcriptProps = {
+    experimentStates,
+    handlersRef,
+    hiddenToolNames,
+    interactiveTools,
+    messages,
+    onCancelExperiment,
+    resolveToolPresentation,
+  };
 
   useEffect(() => {
     if (isOpen) {
@@ -1321,26 +706,6 @@ export const AiAssistantContents = ({
     }
   }, [composerFocusRequest, isOpen, isVoiceDockCollapsed, panelRef]);
 
-  // Auto-grow the composer to fit its content (up to `composerMaxHeight`,
-  // after which it scrolls internally). Resetting to `auto` before measuring
-  // `scrollHeight` lets the box shrink again when text is removed; both writes
-  // happen synchronously so the browser only paints the final height and the
-  // CSS `height` transition animates the change. `scrollHeight` is a rounded
-  // integer, so the height it yields can land a fraction of a pixel under the
-  // real content and raise a scrollbar on a box that visibly fits; scrolling
-  // is therefore only allowed once the content genuinely passes the cap.
-  useEffect(() => {
-    const textarea = inputRef.current;
-    if (!textarea) {
-      return;
-    }
-    textarea.style.height = "auto";
-    const contentHeight = textarea.scrollHeight;
-    textarea.style.height = `${Math.min(contentHeight, composerMaxHeight)}px`;
-    textarea.style.overflowY =
-      contentHeight > composerMaxHeight ? "auto" : "hidden";
-  }, [input, isOpen]);
-
   const hasScrolledOnceRef = useRef(false);
 
   useEffect(() => {
@@ -1447,31 +812,21 @@ export const AiAssistantContents = ({
                     {
                       id: aiTabId,
                       title: transcriptLabel,
-                      mark:
+                      mark: isBrunchChat ? (
                         inputMode === "voice" ? (
                           <AiVoiceModeIcon size={12} />
                         ) : (
-                          <svg
-                            width="12"
-                            height="12"
-                            viewBox="0 0 16 16"
-                            fill="none"
-                            aria-hidden="true"
-                          >
-                            <path
-                              d="M3 2.5h10v8H7l-4 3v-11Z"
-                              stroke="currentColor"
-                              strokeWidth="1.4"
-                              strokeLinejoin="round"
-                            />
-                          </svg>
-                        ),
+                          <ChatTabMark />
+                        )
+                      ) : undefined,
                       attention: { marker: primaryAttention },
                     },
                     {
                       id: hostTabId,
                       title: additionalTab.label,
-                      mark: <Icon name="bars" size="xs" />,
+                      mark: isBrunchChat ? (
+                        <Icon name="bars" size="xs" />
+                      ) : undefined,
                       attention: { count: hostAttentionCount },
                     },
                   ]}
@@ -1537,7 +892,7 @@ export const AiAssistantContents = ({
             role={additionalTab ? "tabpanel" : undefined}
             aria-labelledby={additionalTab ? `tab-${aiTabId}` : undefined}
             hidden={showingHostTab}
-            className={`${messagesStyle} ${panelContentStyle({
+            className={`${messagesStyle({ presentation })} ${panelContentStyle({
               visible: !isVoiceDockCollapsed && !showingHostTab,
             })}`}
             data-testid="ai-transcript"
@@ -1553,37 +908,22 @@ export const AiAssistantContents = ({
                 </div>
               </div>
             )}
-            {messages.map((message, index) => (
-              <AiAssistantMessage
-                hiddenToolNames={hiddenToolNames}
-                interactiveTools={interactiveTools}
-                key={message.id}
-                message={message}
-                handlersRef={handlersRef}
-                experimentStates={experimentStates}
-                onCancelExperiment={onCancelExperiment}
-                resolveToolPresentation={resolveToolPresentation}
-                presentation={presentation}
-                voice={inputMode === "voice"}
-                expandReasoning={isBrunchChat}
-                latestAnswer={message.id === latestAnswerId}
+            {isBrunchChat ? (
+              <BrunchTranscript
+                {...transcriptProps}
+                stopped={stopped}
+                busy={isBusy}
                 canRetry={
-                  onRetryPrompt !== undefined &&
-                  !isBusy &&
-                  !voiceHandoffPending &&
-                  firstUserIndex >= 0 &&
-                  index > firstUserIndex
+                  onRetryPrompt !== undefined && !isBusy && !voiceHandoffPending
                 }
-                active={
-                  isBusy &&
-                  index === messages.length - 1 &&
-                  message.role === "assistant"
-                }
-                stopped={stopped && index === messages.length - 1}
+                voice={inputMode === "voice"}
+              />
+            ) : (
+              <StockTranscript
+                {...transcriptProps}
+                stopped={stopped && !error}
+                busy={isBusy}
               />
-            ))}
-            {stopped && messages.at(-1)?.role === "user" && (
-              <div className={stoppedNoteStyle}>Response stopped</div>
             )}
           </div>
 
@@ -1593,49 +933,24 @@ export const AiAssistantContents = ({
               role="tabpanel"
               aria-labelledby={`tab-${hostTabId}`}
               hidden={!showingHostTab}
-              className={`${messagesStyle} ${panelContentStyle({
-                visible: !isVoiceDockCollapsed && showingHostTab,
-              })}`}
+              className={`${messagesStyle({ presentation })} ${panelContentStyle(
+                {
+                  visible: !isVoiceDockCollapsed && showingHostTab,
+                },
+              )}`}
             >
               {additionalTab.content}
             </div>
           )}
 
           {isBrunchChat && (
-            <div
-              className={`${css({
-                display: "flex",
-                alignItems: "center",
-                gap: "2",
-                height: "[28px]",
-                flexShrink: 0,
-                minWidth: "[0]",
-                paddingX: "3",
-                color: "neutral.s90",
-                fontSize: "xs",
-              })} ${panelContentStyle({ visible: !isVoiceDockCollapsed })}`}
-              data-testid="brunch-response-status"
-            >
-              {pendingLabel && (
-                <LoadingSpinner
-                  aria-hidden="true"
-                  size="xs"
-                  className={css({
-                    color: "blue.s90",
-                    flexShrink: 0,
-                    "@media (prefers-reduced-motion: reduce)": {
-                      animation: "[none !important]",
-                    },
-                  })}
-                />
-              )}
-              <span
-                role="status"
-                className={css({ minWidth: "[0]", truncate: true })}
-              >
-                {pendingLabel}
-              </span>
-            </div>
+            <BrunchResponseStatus
+              busy={isBusy}
+              className={panelContentStyle({ visible: !isVoiceDockCollapsed })}
+              hostTabSelected={showingHostTab}
+              replyStarted={messages.at(-1)?.role === "assistant"}
+              workingLabel={workingLabel}
+            />
           )}
 
           {!isBrunchChat && isBusy && workingLabel && (
@@ -1727,112 +1042,28 @@ export const AiAssistantContents = ({
                     <PromptChips
                       chips={promptChips}
                       disabled={isBusy}
-                      presentation={presentation}
                       onDismiss={() => setChipsDismissed(true)}
                       onSelect={(prompt) => onSendPrompt(prompt)}
+                      presentation={presentation}
                     />
                   </div>
                 )}
-                <form
-                  onSubmit={(event) => {
-                    event.preventDefault();
-                    const submitter = (event.nativeEvent as SubmitEvent)
-                      .submitter;
-                    if (
-                      canSubmit &&
-                      submitter?.hasAttribute("data-ai-assistant-submit")
-                    ) {
-                      onSubmit();
-                    }
-                  }}
-                >
-                  <div
-                    className={composerStyle}
-                    data-brunch={isBrunchChat || undefined}
-                  >
-                    <textarea
-                      ref={inputRef}
-                      className={composerTextareaStyle}
-                      rows={1}
-                      value={input}
-                      onChange={(event) =>
-                        onInputChange(event.currentTarget.value)
-                      }
-                      onKeyDown={(event) => {
-                        // Enter sends; Shift+Enter inserts a newline (the textarea's
-                        // native behaviour, so we just let it through). The
-                        // `isComposing` guard stops an IME confirmation keystroke
-                        // from sending a half-finished message.
-                        if (
-                          event.key === "Enter" &&
-                          !event.shiftKey &&
-                          !event.nativeEvent.isComposing
-                        ) {
-                          event.preventDefault();
-                          if (canSubmit) {
-                            onSubmit();
-                          }
-                        }
-                      }}
-                      placeholder={
-                        isBrunchChat || messages.length > 0
-                          ? "Continue iterating..."
-                          : "Describe the process you want to create"
-                      }
-                      aria-label="Message AI assistant"
-                      disabled={voiceHandoffPending}
-                    />
-                    <div
-                      className={css({
-                        display: "contents",
-                        '&[data-brunch="true"]': {
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "1",
-                          "& > :last-child": { marginLeft: "auto" },
-                        },
-                      })}
-                      data-brunch={isBrunchChat || undefined}
-                    >
-                      {composerHint && (
-                        <span className={composerHintStyle} role="status">
-                          {composerHint}
-                        </span>
-                      )}
-                      {composerControl}
-                      <Button
-                        aria-label={composerAction.label}
-                        className={composerActionButtonStyle}
-                        data-stop={(isBrunchChat && isBusy) || undefined}
-                        data-ai-assistant-submit={
-                          composerAction.isSubmit || undefined
-                        }
-                        disabled={composerAction.disabled}
-                        onClick={composerAction.onClick}
-                        prefix={
-                          <span
-                            className={composerActionGlyphStyle}
-                            key={composerAction.glyph}
-                          >
-                            {composerAction.glyph === "voice" ? (
-                              <AiVoiceModeIcon size={16} />
-                            ) : (
-                              <Icon
-                                name={composerAction.glyph}
-                                size={isBrunchChat && isBusy ? "xs" : "sm"}
-                              />
-                            )}
-                          </span>
-                        }
-                        size="sm"
-                        tone={composerAction.tone}
-                        tooltip={composerAction.label}
-                        type={composerAction.type}
-                        variant={composerAction.variant}
-                      />
-                    </div>
-                  </div>
-                </form>
+                <AiAssistantComposer
+                  busy={isBusy}
+                  control={composerControl}
+                  disabled={voiceHandoffPending}
+                  hasHistory={messages.length > 0}
+                  hint={composerHint}
+                  input={input}
+                  inputRef={inputRef}
+                  isOpen={isOpen}
+                  onInputChange={onInputChange}
+                  onInputModeChange={onInputModeChange}
+                  onStop={onStop}
+                  onSubmit={onSubmit}
+                  presentation={presentation}
+                  voiceModeAvailable={voiceModeAvailable}
+                />
               </div>
             </>
           )}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-response-status.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-response-status.tsx
new file mode 100644
index 00000000000..8184d995c0c
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-response-status.tsx
@@ -0,0 +1,66 @@
+import { LoadingSpinner } from "@hashintel/ds-components";
+import { css, cx } from "@hashintel/ds-helpers/css";
+
+/**
+ * A fixed-height row below the transcript that names the wait while the chat
+ * has nothing new to show: before the reply starts, or while the host tab
+ * hides it. It stays mounted so the layout doesn't jump.
+ */
+export const BrunchResponseStatus = ({
+  busy,
+  className,
+  hostTabSelected,
+  replyStarted,
+  workingLabel,
+}: {
+  busy: boolean;
+  className?: string;
+  hostTabSelected: boolean;
+  replyStarted: boolean;
+  workingLabel?: string;
+}) => {
+  const label = !busy
+    ? undefined
+    : hostTabSelected
+      ? (workingLabel ?? "Brunch is working")
+      : replyStarted
+        ? undefined
+        : "Waiting for Brunch";
+
+  return (
+    <div
+      className={cx(
+        css({
+          display: "flex",
+          alignItems: "center",
+          gap: "2",
+          height: "[28px]",
+          flexShrink: 0,
+          minWidth: "[0]",
+          paddingX: "3",
+          color: "neutral.s90",
+          fontSize: "xs",
+        }),
+        className,
+      )}
+      data-testid="brunch-response-status"
+    >
+      {label && (
+        <LoadingSpinner
+          aria-hidden="true"
+          size="xs"
+          className={css({
+            color: "blue.s90",
+            flexShrink: 0,
+            "@media (prefers-reduced-motion: reduce)": {
+              animation: "[none !important]",
+            },
+          })}
+        />
+      )}
+      <span role="status" className={css({ minWidth: "[0]", truncate: true })}>
+        {label}
+      </span>
+    </div>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript.tsx
new file mode 100644
index 00000000000..6a865ec9458
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript.tsx
@@ -0,0 +1,435 @@
+import { memo, use, useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+
+import { Button } from "@hashintel/ds-components";
+import { css, cva } from "@hashintel/ds-helpers/css";
+
+import { NotificationsContext } from "../../../../../../react/notifications/context";
+import { ExperimentalIcon } from "../../../../../experimental-icons";
+import { BrunchWorkFold } from "./brunch-transcript/brunch-work-fold";
+import { VoiceInputProvenance } from "./brunch-transcript/voice-input-provenance";
+import { ExperimentCard } from "./experiment-card";
+import { getMessageRenderItems } from "./get-message-render-items";
+import { AiAssistantReasoning } from "./reasoning";
+import { errorNotification } from "./shared/error-notification";
+import { markdownStyle } from "./shared/markdown-style";
+import { SentUsingVoiceMark } from "./shared/sent-using-voice-mark";
+import { AiAssistantToolList } from "./tool-list";
+
+import type { PetrinautAiMessage } from "../types";
+import type { TranscriptProps } from "./shared/transcript-props";
+
+const messageStyle = cva({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2",
+    padding: "[10px]",
+    fontSize: "sm",
+    fontWeight: "medium",
+    lineHeight: "[1.5]",
+    color: "neutral.s100",
+    userSelect: "text",
+  },
+  variants: {
+    role: {
+      assistant: {
+        alignSelf: "stretch",
+        gap: "1",
+        padding: "[6px 0]",
+        '&[data-input-mode="text"]': {
+          paddingY: "1",
+          '& > [data-answer="brunch"]:not(:first-child)': { marginTop: "1" },
+          "@media (hover: hover) and (pointer: fine)": {
+            "&:not([data-latest-answer]):not(:hover):not(:focus-within) > [data-answer-actions]":
+              {
+                opacity: "0",
+                pointerEvents: "none",
+              },
+          },
+        },
+      },
+      user: {
+        alignSelf: "flex-end",
+        maxWidth: "[92%]",
+        gap: "0.5",
+        padding: "[0]",
+      },
+    },
+  },
+});
+
+// User input isn't Markdown — rendering it as such would mangle stray
+// `*`, `_`, `#`, etc. and collapse the single newlines they typed. Render it
+// verbatim with preserved whitespace instead.
+const userTextStyle = css({
+  display: "flex",
+  alignItems: "flex-start",
+  gap: "1.5",
+  alignSelf: "flex-end",
+  backgroundColor: "neutral.a20",
+  borderRadius: "lg",
+  padding: "[10px]",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+});
+
+const answerStyle = css({
+  alignSelf: "flex-start",
+  maxWidth: "[92%]",
+  backgroundColor: "blue.a20",
+  borderRadius: "lg",
+  padding: "[10px]",
+  color: "neutral.s100",
+  overflowWrap: "anywhere",
+  '&[data-streaming="true"]': {
+    animation: "[petrinautComposerActionSwap 180ms ease-out]",
+  },
+  "@media (prefers-reduced-motion: reduce)": {
+    animation: "[none]",
+  },
+  "[data-work-status] &": {
+    alignSelf: "stretch",
+    maxWidth: "full",
+    backgroundColor: "neutral.s00",
+    border: "[1px solid {colors.neutral.a30}]",
+  },
+});
+
+const stoppedNoteStyle = css({
+  alignSelf: "center",
+  marginTop: "1.5",
+  paddingY: "1",
+  fontSize: "xs",
+  color: "neutral.s80",
+});
+
+const StreamingWords = ({
+  text,
+  streaming,
+}: {
+  text: string;
+  streaming: boolean;
+}) =>
+  streaming
+    ? [...text.matchAll(/\S+\s*|\s+/gu)].map((word) => (
+        <span
+          key={word.index}
+          data-streamed-word
+          className={css({
+            animation: "[petrinautComposerActionSwap 180ms ease-out]",
+            "@media (prefers-reduced-motion: reduce)": { animation: "none" },
+          })}
+        >
+          {word[0]}
+        </span>
+      ))
+    : text;
+
+type BrunchMessageProps = Omit<TranscriptProps, "messages"> & {
+  message: PetrinautAiMessage;
+  voice: boolean;
+  active: boolean;
+  canRetry: boolean;
+  latestAnswer: boolean;
+};
+
+/**
+ * One conversation turn: the user's bubble, the work fold, the written answer
+ * and any produced cards, wrapped in `React.memo`.
+ *
+ * The AI SDK rebuilds the `messages` array on every reasoning/text delta but
+ * uses `slice` for unchanged messages and only `structuredClone`s the active
+ * one. That gives every completed message a stable reference between chunks,
+ * so memoising by reference equality lets us skip re-rendering the whole
+ * transcript on every chunk — only the message currently being streamed has
+ * to re-render.
+ */
+const BrunchMessage = memo(
+  ({
+    handlersRef,
+    hiddenToolNames,
+    interactiveTools,
+    message,
+    experimentStates,
+    onCancelExperiment,
+    resolveToolPresentation,
+    voice,
+    active,
+    stopped,
+    canRetry,
+    latestAnswer,
+  }: BrunchMessageProps) => {
+    const { addNotification } = use(NotificationsContext);
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+      if (!copied) return;
+      const timer = window.setTimeout(() => setCopied(false), 1_200);
+      return () => window.clearTimeout(timer);
+    }, [copied]);
+    const role = message.role === "user" ? "user" : "assistant";
+    const renderItems = getMessageRenderItems(
+      message,
+      interactiveTools,
+      resolveToolPresentation,
+      hiddenToolNames,
+    );
+    const { work, answers, cards, brief, voiceAgentReply, voiceAgentWrapUp } =
+      renderItems;
+    const wasStopped = stopped || message.metadata?.stopped === true;
+    const awaitingApproval = work.tools.some(
+      (tool) => tool.interactive && tool.state === "input-available",
+    );
+    const workStatus = wasStopped
+      ? "stopped"
+      : awaitingApproval
+        ? "approval"
+        : active
+          ? "streaming"
+          : "settled";
+    const writtenAnswer =
+      answers.length > 0 ? (
+        <div
+          className={answerStyle}
+          data-answer="brunch"
+          data-streaming={active || undefined}
+        >
+          {answers.map((item) => (
+            <div className={markdownStyle} key={item.key}>
+              <ReactMarkdown>{item.part.text}</ReactMarkdown>
+            </div>
+          ))}
+        </div>
+      ) : null;
+    // Voice renders the written answer inside the fold; Chat renders it below.
+    const showWork =
+      role === "assistant" &&
+      (active ||
+        wasStopped ||
+        work.reasoning.length > 0 ||
+        work.tools.length > 0 ||
+        (voice && answers.length > 0));
+
+    return (
+      <div
+        className={messageStyle({ role })}
+        data-role={role}
+        data-input-mode={voice ? "voice" : "text"}
+        data-latest-answer={latestAnswer || undefined}
+        data-voice-origin={message.metadata?.source === "voice" || undefined}
+      >
+        {role === "user" && (
+          <div className={userTextStyle} data-user-bubble>
+            {!voice && message.metadata?.source === "voice" && (
+              <SentUsingVoiceMark />
+            )}
+            <div className={css({ minWidth: "[0]" })}>
+              {answers.map((item) => (
+                <div key={item.key}>
+                  <StreamingWords
+                    text={item.part.text}
+                    streaming={
+                      item.part.state === "streaming" &&
+                      message.metadata?.source === "voice"
+                    }
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        {brief && <VoiceInputProvenance brief={brief} />}
+        {voiceAgentReply && (
+          <div
+            className={answerStyle}
+            data-answer="voice-reply"
+            aria-busy={voiceAgentReply.state === "streaming"}
+          >
+            <StreamingWords
+              text={voiceAgentReply.text}
+              streaming={voiceAgentReply.state === "streaming"}
+            />
+          </div>
+        )}
+        {showWork && (
+          <BrunchWorkFold status={workStatus} preserveOpen>
+            {work.reasoning.map((item) => (
+              <AiAssistantReasoning
+                key={item.key}
+                isStreaming={active && item.part.state === "streaming"}
+                expandWhileStreaming={!voice}
+                part={item.part}
+                presentation="brunch"
+              />
+            ))}
+            <AiAssistantToolList
+              tools={work.tools}
+              active={active}
+              stopped={wasStopped}
+              preserveOpen
+              presentation="brunch"
+              onInteractiveToolSubmit={(params) =>
+                handlersRef.current.onInteractiveToolSubmit?.(params)
+              }
+              onSelectToolTarget={(target) =>
+                handlersRef.current.onSelectToolTarget?.(target)
+              }
+            />
+            {voice && writtenAnswer}
+            {voice && active && !writtenAnswer && (
+              <div className={answerStyle} role="status" aria-label="Thinking">
+                {["92%", "74%", "46%"].map((width) => (
+                  <span
+                    key={width}
+                    style={{ width }}
+                    className={css({
+                      display: "block",
+                      height: "[10px]",
+                      marginY: "2",
+                      borderRadius: "sm",
+                      backgroundColor: "neutral.a30",
+                      animation: "[pulse 1.6s ease-in-out infinite]",
+                      "@media (prefers-reduced-motion: reduce)": {
+                        animation: "none",
+                      },
+                    })}
+                  />
+                ))}
+              </div>
+            )}
+          </BrunchWorkFold>
+        )}
+        {role === "assistant" && !voice && writtenAnswer}
+        {cards.map((item) =>
+          item.type === "experiment" ? (
+            <ExperimentCard
+              key={item.key}
+              part={item.part}
+              state={experimentStates?.[item.part.toolCallId]}
+              onCancel={onCancelExperiment}
+            />
+          ) : (
+            <AiAssistantToolList
+              key={item.key}
+              tools={[item.tool]}
+              producedCard
+              presentation="brunch"
+              onInteractiveToolSubmit={(params) =>
+                handlersRef.current.onInteractiveToolSubmit?.(params)
+              }
+              onSelectToolTarget={(target) =>
+                handlersRef.current.onSelectToolTarget?.(target)
+              }
+            />
+          ),
+        )}
+        {voiceAgentWrapUp && (
+          <div
+            className={answerStyle}
+            data-answer="voice-wrap-up"
+            aria-busy={voiceAgentWrapUp.state === "streaming"}
+          >
+            <StreamingWords
+              text={voiceAgentWrapUp.text}
+              streaming={voiceAgentWrapUp.state === "streaming"}
+            />
+          </div>
+        )}
+        {role === "assistant" && wasStopped && (
+          <div className={stoppedNoteStyle}>Response stopped</div>
+        )}
+        {role === "assistant" && !voice && writtenAnswer && !active && (
+          <div
+            className={css({
+              display: "flex",
+              gap: "1",
+              color: "neutral.s80",
+            })}
+            data-answer-actions
+          >
+            <Button
+              size="xs"
+              variant="ghost"
+              aria-label={copied ? "Answer copied" : "Copy answer"}
+              tooltip={copied ? "Copied" : "Copy"}
+              prefix={
+                <ExperimentalIcon name={copied ? "check" : "copy"} size={14} />
+              }
+              onClick={() => {
+                void (async () => {
+                  try {
+                    await navigator.clipboard.writeText(
+                      answers.map((answer) => answer.part.text).join("\n\n"),
+                    );
+                    setCopied(true);
+                  } catch {
+                    addNotification(
+                      errorNotification("Could not copy the answer"),
+                    );
+                  }
+                })();
+              }}
+            />
+            {canRetry && (
+              <Button
+                size="xs"
+                variant="ghost"
+                aria-label="Retry answer"
+                tooltip="Retry as a new turn"
+                prefix={<ExperimentalIcon name="rotate" size={14} />}
+                onClick={() => handlersRef.current.onRetryMessage(message.id)}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+BrunchMessage.displayName = "BrunchMessage";
+
+export const BrunchTranscript = ({
+  messages,
+  stopped,
+  busy,
+  canRetry,
+  voice,
+  ...messageProps
+}: TranscriptProps & {
+  busy: boolean;
+  /** Whether a finished answer may be retried at all right now. */
+  canRetry: boolean;
+  voice: boolean;
+}) => {
+  const firstUserIndex = messages.findIndex(
+    (message) => message.role === "user",
+  );
+  const latestAnswerId = messages.findLast(
+    (message) =>
+      message.role === "assistant" &&
+      message.parts.some(
+        (part) => part.type === "text" && part.text.trim().length > 0,
+      ),
+  )?.id;
+  const lastIndex = messages.length - 1;
+
+  return (
+    <>
+      {messages.map((message, index) => (
+        <BrunchMessage
+          key={message.id}
+          message={message}
+          {...messageProps}
+          voice={voice}
+          latestAnswer={message.id === latestAnswerId}
+          canRetry={canRetry && firstUserIndex >= 0 && index > firstUserIndex}
+          active={busy && index === lastIndex && message.role === "assistant"}
+          stopped={stopped && index === lastIndex}
+        />
+      ))}
+      {stopped && messages.at(-1)?.role === "user" && (
+        <div className={stoppedNoteStyle}>Response stopped</div>
+      )}
+    </>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-work-fold.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript/brunch-work-fold.test.tsx
similarity index 100%
rename from libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-work-fold.test.tsx
rename to libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript/brunch-work-fold.test.tsx
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-work-fold.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript/brunch-work-fold.tsx
similarity index 96%
rename from libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-work-fold.tsx
rename to libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript/brunch-work-fold.tsx
index 15038c45e37..1e43580ec44 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-work-fold.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript/brunch-work-fold.tsx
@@ -4,8 +4,8 @@ import { type ReactNode, useState } from "react";
 import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 
-import { collapsibleContentStyle } from "./shared/collapsible-content-style";
-import { useElapsedTime } from "./shared/use-elapsed-time";
+import { collapsibleContentStyle } from "../shared/collapsible-content-style";
+import { useElapsedTime } from "../shared/use-elapsed-time";
 
 export type BrunchWorkStatus = "streaming" | "settled" | "approval" | "stopped";
 
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript/voice-input-provenance.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript/voice-input-provenance.test.tsx
new file mode 100644
index 00000000000..696e43d37a7
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript/voice-input-provenance.test.tsx
@@ -0,0 +1,80 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, expect, test } from "vitest";
+
+import { VoiceInputProvenance } from "./voice-input-provenance";
+
+afterEach(cleanup);
+
+test.each<{
+  state: "streaming" | "done";
+  preparationFailed?: boolean;
+  fields: Record<string, string>;
+  label: string;
+  note: string;
+}>([
+  {
+    state: "streaming" as const,
+    fields: {},
+    label: "Preparing for Brunch",
+    note: "Preparing from what you said",
+  },
+  {
+    state: "streaming" as const,
+    fields: { goal: "Compare staffing" },
+    label: "Sending to Brunch",
+    note: "Prepared from what you said",
+  },
+  {
+    state: "done" as const,
+    fields: { goal: "Compare staffing" },
+    label: "Sent to Brunch",
+    note: "Prepared from what you said",
+  },
+  {
+    state: "streaming" as const,
+    preparationFailed: true,
+    fields: {},
+    label: "Sending without preparation",
+    note: "Preparation failed; sending your original words",
+  },
+  {
+    state: "done" as const,
+    preparationFailed: true,
+    fields: {},
+    label: "Sent without preparation",
+    note: "Preparation failed; your original words were sent",
+  },
+])(
+  "labels a brief truthfully: $label",
+  ({ state, fields, preparationFailed, label, note }) => {
+    render(
+      <VoiceInputProvenance brief={{ state, fields, preparationFailed }} />,
+    );
+    const disclosure = screen.getByText(label).closest("details");
+    expect(disclosure?.getAttribute("aria-busy")).toBe(
+      String(state === "streaming"),
+    );
+    expect(screen.getByText(note)).not.toBeNull();
+  },
+);
+
+test("renders absent brief fields as placeholders without confusing verbatim Still open", () => {
+  render(
+    <VoiceInputProvenance
+      brief={{
+        state: "done",
+        fields: { runs: "Still open", stillOpen: "constraints, ask" },
+      }}
+    />,
+  );
+
+  expect(screen.getByText("runs").nextSibling?.textContent).toBe("Still open");
+  expect(screen.getByText("constraints").nextSibling?.textContent).toBe(
+    "Still open",
+  );
+  expect(screen.getByText("ask").nextSibling?.textContent).toBe("Still open");
+  expect(screen.queryByText("still Open")).toBeNull();
+});
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/voice-input-provenance.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript/voice-input-provenance.tsx
similarity index 98%
rename from libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/voice-input-provenance.tsx
rename to libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript/voice-input-provenance.tsx
index ed5d0c78f4f..68eb27c1f44 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/voice-input-provenance.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/brunch-transcript/voice-input-provenance.tsx
@@ -1,7 +1,7 @@
 import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 
-import type { VoiceBrief } from "./get-message-render-items";
+import type { VoiceBrief } from "../get-message-render-items";
 
 /** A quiet, right-aligned disclosure beneath the original spoken words. */
 export const VoiceInputProvenance = ({ brief }: { brief: VoiceBrief }) => (
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/chat-tab-mark.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/chat-tab-mark.tsx
new file mode 100644
index 00000000000..e454ddb83da
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/chat-tab-mark.tsx
@@ -0,0 +1,16 @@
+export const ChatTabMark = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 16 16"
+    fill="none"
+    aria-hidden="true"
+  >
+    <path
+      d="M3 2.5h10v8H7l-4 3v-11Z"
+      stroke="currentColor"
+      strokeWidth="1.4"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/composer.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/composer.tsx
new file mode 100644
index 00000000000..fb46c3fadef
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/composer.tsx
@@ -0,0 +1,308 @@
+import { type ReactNode, type RefObject, useEffect } from "react";
+
+import { Button, Icon } from "@hashintel/ds-components";
+import { css } from "@hashintel/ds-helpers/css";
+
+import { AiVoiceModeIcon } from "../../../components/ai-voice-mode-button";
+
+import type { PetrinautAiAssistant } from "../../../../../petrinaut";
+import type { PetrinautAiInputMode } from "../../../../../types/ai-assistant-composer-control";
+
+const composerActionGlyphStyle = css({
+  display: "inline-flex",
+  animationName: "[petrinautComposerActionSwap]",
+  animationDuration: "[140ms]",
+  animationTimingFunction: "[cubic-bezier(0.2, 0.9, 0.3, 1)]",
+  "@media (prefers-reduced-motion: reduce)": {
+    animationName: "[none]",
+  },
+});
+
+const composerActionButtonStyle = css({
+  flexShrink: 0,
+  width: "[30px]",
+  height: "[30px]",
+  minWidth: "[30px]",
+  borderRadius: "[calc({radii.lg} - {spacing.1})]",
+  "&[data-stop=true]": {
+    width: "[28px]",
+    height: "[28px]",
+    minWidth: "[28px]",
+    borderRadius: "full",
+  },
+});
+
+const composerStyle = css({
+  display: "flex",
+  alignItems: "flex-end",
+  gap: "1",
+  borderRadius: "lg",
+  backgroundColor: "neutral.s10",
+  border: "[1px solid {colors.neutral.bd.subtle}]",
+  padding: "1",
+  transition: "[border-color 150ms ease, box-shadow 150ms ease]",
+  _focusWithin: {
+    borderColor: "blue.s50",
+    boxShadow: "[0 0 0 2px {colors.blue.a10}]",
+  },
+  "@media (prefers-reduced-motion: reduce)": {
+    transition: "[none]",
+  },
+});
+
+// Caps how tall the composer can auto-grow before it starts scrolling
+// internally. Kept in sync with `maxHeight` below — the auto-grow effect
+// reads this constant directly so the two can't drift.
+const composerMaxHeight = 160;
+
+const composerTextareaStyle = css({
+  flex: "[1]",
+  minWidth: "[0]",
+  minHeight: "[30px]",
+  maxHeight: `[${composerMaxHeight}px]`,
+  paddingX: "2",
+  paddingY: "[5px]",
+  border: "none",
+  outline: "none",
+  resize: "none",
+  overflowY: "auto",
+  backgroundColor: "[transparent]",
+  color: "neutral.fg.body",
+  fontFamily: "[inherit]",
+  fontSize: "sm",
+  fontWeight: "medium",
+  lineHeight: "[1.4]",
+  // Animates the height changes driven by the auto-grow effect, so adding a
+  // line (Shift+Enter) or wrapping expands the box smoothly.
+  transition: "[height 120ms ease]",
+  "@media (prefers-reduced-motion: reduce)": {
+    transition: "[none]",
+  },
+  _placeholder: {
+    color: "neutral.s70",
+  },
+  _disabled: {
+    cursor: "not-allowed",
+    color: "neutral.s90",
+  },
+});
+
+const composerHintStyle = css({
+  flex: "1",
+  paddingX: "2",
+  paddingBottom: "1",
+  color: "neutral.s80",
+  fontSize: "xs",
+  textAlign: "left",
+});
+
+type ComposerAction = {
+  disabled: boolean;
+  glyph: "arrowUp" | "stopFilled" | "voice";
+  isSubmit: boolean;
+  label: string;
+  onClick?: () => void;
+  tone: "brand" | "neutral";
+  type: "button" | "submit";
+  variant: "solid" | "subtle";
+};
+
+/**
+ * The message form: an auto-growing textarea, an optional host control, and
+ * one trailing action that is Stop while busy, Send once there is text, and
+ * Voice mode otherwise.
+ */
+export const AiAssistantComposer = ({
+  busy,
+  control,
+  disabled,
+  hint,
+  input,
+  inputRef,
+  isOpen,
+  onInputChange,
+  onInputModeChange,
+  onStop,
+  onSubmit,
+  hasHistory,
+  presentation,
+  voiceModeAvailable,
+}: {
+  busy: boolean;
+  control?: ReactNode;
+  disabled: boolean;
+  /** Brunch only; a status shown beside the actions. */
+  hint?: string;
+  input: string;
+  inputRef: RefObject<HTMLTextAreaElement | null>;
+  isOpen: boolean;
+  onInputChange: (value: string) => void;
+  onInputModeChange?: (mode: PetrinautAiInputMode) => void;
+  onStop: () => void;
+  onSubmit: () => void;
+  /** Whether the transcript already has messages to continue from. */
+  hasHistory: boolean;
+  presentation: NonNullable<PetrinautAiAssistant["presentation"]>;
+  voiceModeAvailable: boolean;
+}) => {
+  const isBrunch = presentation === "brunch";
+  const hasInput = input.trim().length > 0;
+  const canSubmit = hasInput && !busy && !disabled;
+
+  const action: ComposerAction = busy
+    ? {
+        disabled: false,
+        glyph: "stopFilled",
+        isSubmit: false,
+        label: "Stop AI response",
+        onClick: onStop,
+        tone: isBrunch ? "brand" : "neutral",
+        type: "button",
+        variant: isBrunch ? "solid" : "subtle",
+      }
+    : canSubmit
+      ? {
+          disabled: false,
+          glyph: "arrowUp",
+          isSubmit: true,
+          label: "Send message",
+          tone: "brand",
+          type: "submit",
+          variant: "solid",
+        }
+      : !hasInput && voiceModeAvailable && onInputModeChange
+        ? {
+            disabled: false,
+            glyph: "voice",
+            isSubmit: false,
+            label: "Start voice mode",
+            onClick: () => onInputModeChange("voice"),
+            tone: "brand",
+            type: "button",
+            variant: "solid",
+          }
+        : {
+            disabled: true,
+            glyph: "arrowUp",
+            isSubmit: false,
+            label: "Send message",
+            tone: "brand",
+            type: "submit",
+            variant: "solid",
+          };
+
+  // Auto-grow the composer to fit its content (up to `composerMaxHeight`,
+  // after which it scrolls internally). Resetting to `auto` before measuring
+  // `scrollHeight` lets the box shrink again when text is removed; both writes
+  // happen synchronously so the browser only paints the final height and the
+  // CSS `height` transition animates the change. `scrollHeight` is a rounded
+  // integer, so the height it yields can land a fraction of a pixel under the
+  // real content and raise a scrollbar on a box that visibly fits; scrolling
+  // is therefore only allowed once the content genuinely passes the cap.
+  useEffect(() => {
+    const textarea = inputRef.current;
+    if (!textarea) {
+      return;
+    }
+    textarea.style.height = "auto";
+    const contentHeight = textarea.scrollHeight;
+    textarea.style.height = `${Math.min(contentHeight, composerMaxHeight)}px`;
+    textarea.style.overflowY =
+      contentHeight > composerMaxHeight ? "auto" : "hidden";
+  }, [input, inputRef, isOpen]);
+
+  const brunchStop = isBrunch && busy;
+  const actionButton = (
+    <Button
+      aria-label={action.label}
+      className={composerActionButtonStyle}
+      data-stop={brunchStop || undefined}
+      data-ai-assistant-submit={action.isSubmit || undefined}
+      disabled={action.disabled}
+      onClick={action.onClick}
+      prefix={
+        <span className={composerActionGlyphStyle} key={action.glyph}>
+          {action.glyph === "voice" ? (
+            <AiVoiceModeIcon size={16} />
+          ) : (
+            <Icon name={action.glyph} size={brunchStop ? "xs" : "sm"} />
+          )}
+        </span>
+      }
+      size="sm"
+      tone={action.tone}
+      tooltip={action.label}
+      type={action.type}
+      variant={action.variant}
+    />
+  );
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        const submitter = (event.nativeEvent as SubmitEvent).submitter;
+        if (canSubmit && submitter?.hasAttribute("data-ai-assistant-submit")) {
+          onSubmit();
+        }
+      }}
+    >
+      <div className={composerStyle} data-brunch={isBrunch || undefined}>
+        <textarea
+          ref={inputRef}
+          className={composerTextareaStyle}
+          rows={1}
+          value={input}
+          onChange={(event) => onInputChange(event.currentTarget.value)}
+          onKeyDown={(event) => {
+            // Enter sends; Shift+Enter inserts a newline (the textarea's
+            // native behaviour, so we just let it through). The
+            // `isComposing` guard stops an IME confirmation keystroke
+            // from sending a half-finished message.
+            if (
+              event.key === "Enter" &&
+              !event.shiftKey &&
+              !event.nativeEvent.isComposing
+            ) {
+              event.preventDefault();
+              if (canSubmit) {
+                onSubmit();
+              }
+            }
+          }}
+          placeholder={
+            isBrunch || hasHistory
+              ? "Continue iterating..."
+              : "Describe the process you want to create"
+          }
+          aria-label="Message AI assistant"
+          disabled={disabled}
+        />
+        {isBrunch ? (
+          <div
+            className={css({
+              display: "flex",
+              alignItems: "center",
+              gap: "1",
+              "& > :last-child": { marginLeft: "auto" },
+            })}
+            data-brunch
+          >
+            {hint && (
+              <span className={composerHintStyle} role="status">
+                {hint}
+              </span>
+            )}
+            {control}
+            {actionButton}
+          </div>
+        ) : (
+          <>
+            {control}
+            {actionButton}
+          </>
+        )}
+      </div>
+    </form>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/get-message-render-items.test.ts b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/get-message-render-items.test.ts
index 4efa10936ae..e2a2ea97569 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/get-message-render-items.test.ts
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/get-message-render-items.test.ts
@@ -1,10 +1,74 @@
 import { describe, expect, test } from "vitest";
 
+import { readPetrinautDocToolName } from "@hashintel/petrinaut-core";
+
 import { definePetrinautAiInteractiveTool } from "../../../../../types/ai-interactive-tool";
-import { getMessageRenderItems } from "./get-message-render-items";
+import {
+  getChronologicalRenderItems,
+  getMessageRenderItems,
+} from "./get-message-render-items";
 
 import type { PetrinautAiMessage } from "../types";
 
+describe("chronological reading", () => {
+  const inspect = (toolCallId: string, toolName = "inspect") =>
+    ({
+      type: "dynamic-tool",
+      toolName,
+      toolCallId,
+      state: "output-available",
+      input: {},
+      output: "ok",
+    }) as const;
+
+  test("keeps parts in streamed order, splitting tool runs at steps, text, reasoning and lookups", () => {
+    const message: PetrinautAiMessage = {
+      id: "turn",
+      role: "assistant",
+      parts: [
+        { type: "text", text: "Checking the model." },
+        inspect("inspect-1"),
+        inspect("inspect-2"),
+        { type: "step-start" },
+        inspect("inspect-3"),
+        {
+          ...inspect("doc-1", readPetrinautDocToolName),
+          input: { doc: "arcs" },
+        },
+        inspect("inspect-4"),
+        inspect("hidden-1", "secret"),
+        { type: "reasoning", text: "Compare the capacities.", state: "done" },
+        { type: "text", text: "Here is the comparison." },
+      ],
+    };
+
+    const items = getChronologicalRenderItems(
+      message,
+      [],
+      undefined,
+      new Set(["secret"]),
+    );
+
+    expect(
+      items.map((item) =>
+        item.type === "tools"
+          ? item.tools.map((tool) => tool.id)
+          : item.type === "experiment"
+            ? item.key
+            : item.part.text,
+      ),
+    ).toEqual([
+      "Checking the model.",
+      ["inspect-1", "inspect-2"],
+      ["inspect-3"],
+      ["doc-1"],
+      ["inspect-4"],
+      "Compare the capacities.",
+      "Here is the comparison.",
+    ]);
+  });
+});
+
 describe("conversation turn structure", () => {
   test("groups work across steps before the answer and produced cards", () => {
     const message: PetrinautAiMessage = {
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/get-message-render-items.ts b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/get-message-render-items.ts
index 888f4b9cdf5..729c409a40e 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/get-message-render-items.ts
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/get-message-render-items.ts
@@ -1,3 +1,9 @@
+import {
+  getLatestNetDefinitionToolName,
+  getNetCompilationErrorsToolName,
+  readPetrinautDocToolName,
+} from "@hashintel/petrinaut-core";
+
 import {
   getPetrinautAiInteractiveToolDefinition,
   type PetrinautAiInteractiveTool,
@@ -42,8 +48,105 @@ export type MessageRenderItems = {
   voiceAgentWrapUp?: VoiceAgentLine;
 };
 
+/** One entry per run of the message, in the order its parts arrived. */
+export type ChronologicalRenderItem =
+  | { type: "reasoning"; key: string; part: ReasoningMessagePart }
+  | { type: "text"; key: string; part: TextPart }
+  | { type: "experiment"; key: string; part: ExperimentToolPart }
+  | { type: "tools"; key: string; tools: ToolRenderItem[] };
+
 const emptyHiddenToolNames: ReadonlySet<string> = new Set();
 
+/**
+ * The stock presentation's reading of a message: text, reasoning, experiments
+ * and runs of consecutive tool calls interleaved exactly as they streamed.
+ */
+export const getChronologicalRenderItems = (
+  message: PetrinautAiMessage,
+  interactiveTools: readonly PetrinautAiInteractiveTool[] = [],
+  resolveToolPresentation?: PetrinautAiToolPresentationResolver,
+  hiddenToolNames: ReadonlySet<string> = emptyHiddenToolNames,
+): ChronologicalRenderItem[] => {
+  const items: ChronologicalRenderItem[] = [];
+  let pendingTools: ToolRenderItem[] = [];
+
+  const flushTools = () => {
+    if (pendingTools.length === 0) {
+      return;
+    }
+
+    items.push({
+      type: "tools",
+      key: `${message.id}-tools-${items.length}`,
+      tools: pendingTools,
+    });
+    pendingTools = [];
+  };
+
+  message.parts.forEach((part, index) => {
+    if (part.type === "step-start") {
+      flushTools();
+      return;
+    }
+
+    if (part.type === "text") {
+      flushTools();
+      items.push({
+        type: "text",
+        key: `${message.id}-text-${index}`,
+        part,
+      });
+      return;
+    }
+
+    if (part.type === "reasoning") {
+      flushTools();
+      items.push({
+        type: "reasoning",
+        key: `${message.id}-reasoning-${index}`,
+        part,
+      });
+      return;
+    }
+
+    if (part.type === "tool-createExperiment") {
+      flushTools();
+      items.push({ type: "experiment", key: part.toolCallId, part });
+      return;
+    }
+
+    if (isToolPart(part)) {
+      if (hiddenToolNames.has(getToolName(part))) {
+        return;
+      }
+      const tool = toToolRenderItem(
+        message,
+        part,
+        interactiveTools,
+        resolveToolPresentation,
+      );
+
+      if (
+        tool.toolName === getLatestNetDefinitionToolName ||
+        tool.toolName === getNetCompilationErrorsToolName ||
+        tool.toolName === readPetrinautDocToolName
+      ) {
+        flushTools();
+        pendingTools.push(tool);
+        flushTools();
+        return;
+      }
+
+      pendingTools.push(tool);
+    }
+  });
+
+  flushTools();
+
+  return items;
+};
+
+/** The Brunch presentation's reading of a message, grouped by role in the turn. */
 export const getMessageRenderItems = (
   message: PetrinautAiMessage,
   interactiveTools: readonly PetrinautAiInteractiveTool[] = [],
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/reasoning.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/reasoning.tsx
index 17928f3b11e..7b1e3b7f760 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/reasoning.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/reasoning.tsx
@@ -12,50 +12,97 @@ import { StreamingEllipsis } from "./shared/streaming-ellipsis";
 import type { PetrinautReasoningMetadata } from "../types";
 import type { ReasoningMessagePart } from "./get-message-render-items";
 
-const reasoningGroupStyle = css({
-  display: "flex",
-  flexDirection: "column",
-  gap: "1",
-});
-
-const reasoningHeaderStyle = css({
-  display: "inline-flex",
-  alignSelf: "flex-start",
-  alignItems: "center",
-  gap: "1",
-  maxWidth: "full",
-  padding: "[2px 6px 2px 2px]",
-  border: "none",
-  borderRadius: "md",
-  backgroundColor: "[transparent]",
-  color: "neutral.s80",
-  cursor: "pointer",
-  fontSize: "xs",
-  fontWeight: "medium",
-  textAlign: "left",
-  _hover: {
-    color: "neutral.s90",
-    backgroundColor: "neutral.a20",
+const reasoningGroupStyle = cva({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1",
   },
-  _focusVisible: { outline: "[2px solid {colors.blue.s90}]" },
-  "& svg[data-chevron]": {
-    transition: "[transform 150ms ease-out]",
+  variants: {
+    presentation: {
+      stock: {
+        borderRadius: "lg",
+        backgroundColor: "neutral.bg.subtle",
+        padding: "1",
+      },
+      brunch: {},
+    },
   },
-  "&[data-state=closed] svg[data-chevron]": {
-    transform: "[rotate(90deg)]",
+});
+
+const reasoningHeaderStyle = cva({
+  base: {
+    alignItems: "center",
+    border: "none",
+    backgroundColor: "[transparent]",
+    cursor: "pointer",
+    fontWeight: "medium",
+    textAlign: "left",
+    "& svg[data-chevron]": {
+      transition: "[transform 150ms ease-out]",
+    },
   },
-  "&[data-state=open] svg[data-chevron]": {
-    transform: "[rotate(180deg)]",
+  variants: {
+    presentation: {
+      stock: {
+        display: "flex",
+        gap: "2",
+        width: "full",
+        height: "8",
+        paddingX: "1",
+        borderRadius: "lg",
+        color: "neutral.s90",
+        fontSize: "sm",
+        _hover: {
+          backgroundColor: "white.a60",
+        },
+        "&[data-state=closed] svg[data-chevron]": {
+          transform: "[rotate(180deg)]",
+        },
+      },
+      brunch: {
+        display: "inline-flex",
+        alignSelf: "flex-start",
+        gap: "1",
+        maxWidth: "full",
+        padding: "[2px 6px 2px 2px]",
+        borderRadius: "md",
+        color: "neutral.s80",
+        fontSize: "xs",
+        _hover: {
+          color: "neutral.s90",
+          backgroundColor: "neutral.a20",
+        },
+        _focusVisible: { outline: "[2px solid {colors.blue.s90}]" },
+        "&[data-state=closed] svg[data-chevron]": {
+          transform: "[rotate(90deg)]",
+        },
+        "&[data-state=open] svg[data-chevron]": {
+          transform: "[rotate(180deg)]",
+        },
+      },
+    },
   },
 });
 
-const reasoningTitleStyle = css({
-  minWidth: "[0]",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
+const reasoningTitleStyle = cva({
+  base: {
+    minWidth: "[0]",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  variants: {
+    presentation: {
+      stock: { flex: "[1]" },
+      brunch: {},
+    },
+  },
 });
 
+// In the stock header the elapsed-time span sits between two flexible
+// siblings; without an explicit `flex-shrink: 0` and `nowrap` it can collapse
+// to zero width once the heading appears and consumes the label's `flex: 1`.
 const reasoningElapsedStyle = css({
   flexShrink: "[0]",
   whiteSpace: "nowrap",
@@ -68,15 +115,27 @@ const reasoningBodyStyle = cva({
   base: {
     position: "relative",
     overflow: "hidden",
-    borderLeft: "[2px solid {colors.neutral.a30}]",
-    marginLeft: "2",
-    paddingLeft: "3",
     color: "neutral.s90",
     fontSize: "sm",
     fontWeight: "medium",
     lineHeight: "[1.5]",
   },
   variants: {
+    presentation: {
+      stock: {
+        borderWidth: "thin",
+        borderStyle: "solid",
+        borderColor: "neutral.a30",
+        borderRadius: "md",
+        backgroundColor: "neutral.s10",
+        padding: "2",
+      },
+      brunch: {
+        borderLeft: "[2px solid {colors.neutral.a30}]",
+        marginLeft: "2",
+        paddingLeft: "3",
+      },
+    },
     streaming: {
       true: {
         // Subtle reflective sweep across the body so the user can see the
@@ -163,8 +222,10 @@ const useReasoningElapsed = ({
  *
  * The current backend ([apps/petrinaut-website/api/chat.ts]) sets
  * `reasoningSummary: "auto"` for the OpenAI provider, which emits each summary
- * item as `**Heading**\n\n<body>`. Keep the heading with the expanded body,
- * leaving the compact disclosure label for status and duration.
+ * item as `**Heading**\n\n<body>`. The stock presentation hoists the heading
+ * into the trigger so it previews what the model is thinking about; the Brunch
+ * presentation keeps it with the expanded body, leaving the compact trigger
+ * for status and duration.
  *
  * If the convention is not matched (different provider, OpenAI changes the
  * format, or the model just produced an unheaded summary), we fall back to
@@ -207,11 +268,15 @@ export const AiAssistantReasoning = ({
   isStreaming,
   expandWhileStreaming = false,
   part,
+  presentation = "stock",
 }: {
   isStreaming: boolean;
+  /** Brunch only; stock reasoning opens while streaming and closes after. */
   expandWhileStreaming?: boolean;
   part: ReasoningMessagePart;
+  presentation?: "stock" | "brunch";
 }) => {
+  const isBrunch = presentation === "brunch";
   const { startedAt, finishedAt } = getReasoningTiming(part);
   const elapsedTime = useReasoningElapsed({
     isStreaming,
@@ -220,9 +285,19 @@ export const AiAssistantReasoning = ({
   });
   const renderedText = part.text.trim();
   const { heading, body } = extractReasoningHeading(renderedText, isStreaming);
-  // Streaming thought should be visible immediately, while remaining a normal
+  // Brunch shows streaming thought immediately, while remaining a normal
   // controlled disclosure so a reader can close it and keep it closed.
-  const [open, setOpen] = useState(expandWhileStreaming && isStreaming);
+  const [open, setOpen] = useState(
+    isBrunch ? expandWhileStreaming && isStreaming : isStreaming,
+  );
+
+  const [syncedStreaming, setSyncedStreaming] = useState(isStreaming);
+  if (syncedStreaming !== isStreaming) {
+    setSyncedStreaming(isStreaming);
+    if (!isBrunch) {
+      setOpen(isStreaming);
+    }
+  }
 
   if (!isStreaming && !renderedText) {
     return null;
@@ -230,20 +305,27 @@ export const AiAssistantReasoning = ({
 
   return (
     <Collapsible.Root
-      className={reasoningGroupStyle}
+      className={reasoningGroupStyle({ presentation })}
       open={open}
       onOpenChange={(details) => setOpen(details.open)}
     >
-      <Collapsible.Trigger className={reasoningHeaderStyle}>
-        <Icon name="lightbulbOn" size="xs" />
-        <span className={reasoningTitleStyle}>
-          {isStreaming
-            ? "Thinking"
-            : elapsedTime === undefined
-              ? "Thought"
-              : `Thought for ${elapsedTime}`}
+      <Collapsible.Trigger className={reasoningHeaderStyle({ presentation })}>
+        <Icon
+          name={isBrunch ? "lightbulbOn" : "list"}
+          size={isBrunch ? "xs" : "sm"}
+        />
+        <span className={reasoningTitleStyle({ presentation })}>
+          {!isBrunch
+            ? heading
+              ? `Thinking: ${heading}`
+              : "Thinking"
+            : isStreaming
+              ? "Thinking"
+              : elapsedTime === undefined
+                ? "Thought"
+                : `Thought for ${elapsedTime}`}
         </span>
-        {isStreaming && elapsedTime !== undefined && (
+        {(!isBrunch || isStreaming) && elapsedTime !== undefined && (
           <span
             className={reasoningElapsedStyle}
             aria-label={`Reasoning time ${elapsedTime}`}
@@ -251,13 +333,18 @@ export const AiAssistantReasoning = ({
             {elapsedTime}
           </span>
         )}
-        <Icon name="chevronUp" data-chevron size="xs" />
+        <Icon name="chevronUp" data-chevron size={isBrunch ? "xs" : "sm"} />
       </Collapsible.Trigger>
       <Collapsible.Content className={collapsibleContentStyle}>
-        <div className={reasoningBodyStyle({ streaming: isStreaming })}>
+        <div
+          className={reasoningBodyStyle({
+            presentation,
+            streaming: isStreaming,
+          })}
+        >
           {body ? (
             <div className={markdownStyle}>
-              {heading && <strong>{heading}</strong>}
+              {isBrunch && heading && <strong>{heading}</strong>}
               <ReactMarkdown>{body}</ReactMarkdown>
             </div>
           ) : isStreaming ? (
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/shared/error-notification.ts b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/shared/error-notification.ts
new file mode 100644
index 00000000000..89ffe624888
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/shared/error-notification.ts
@@ -0,0 +1,6 @@
+import type { AddNotificationInput } from "../../../../../../../react/notifications/context";
+
+export const errorNotification = (
+  message: string,
+  detail?: string,
+): AddNotificationInput => ({ detail, message, tone: "error" });
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/shared/sent-using-voice-mark.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/shared/sent-using-voice-mark.tsx
new file mode 100644
index 00000000000..64e3ffe49f8
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/shared/sent-using-voice-mark.tsx
@@ -0,0 +1,19 @@
+import { css } from "@hashintel/ds-helpers/css";
+
+import { AiVoiceModeIcon } from "../../../../components/ai-voice-mode-button";
+
+export const SentUsingVoiceMark = () => (
+  <span
+    role="img"
+    aria-label="Sent using voice"
+    title="Sent using voice"
+    className={css({
+      display: "inline-flex",
+      flexShrink: 0,
+      marginTop: "[4px]",
+      color: "neutral.s80",
+    })}
+  >
+    <AiVoiceModeIcon size={12} />
+  </span>
+);
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/shared/transcript-props.ts b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/shared/transcript-props.ts
new file mode 100644
index 00000000000..ff42e1d4b57
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/shared/transcript-props.ts
@@ -0,0 +1,29 @@
+import type { PetrinautAiToolPresentationResolver } from "../../../../../../petrinaut";
+import type { PetrinautAiInteractiveTool } from "../../../../../../types/ai-interactive-tool";
+import type { AiToolTarget } from "../../tool-summaries";
+import type { PetrinautAiMessage } from "../../types";
+import type { AiExperimentState } from "../experiment-card";
+import type { OnInteractiveToolSubmit } from "../tool-list";
+import type { RefObject } from "react";
+
+/**
+ * Callbacks read through a ref so identity churn from the panel's inline
+ * arrow functions doesn't bust the per-message memo.
+ */
+export type MessageHandlersRef = RefObject<{
+  onInteractiveToolSubmit?: OnInteractiveToolSubmit;
+  onSelectToolTarget?: (target: AiToolTarget) => void;
+  onRetryMessage: (messageId: string) => void;
+}>;
+
+/** What every transcript presentation needs to render its messages. */
+export type TranscriptProps = {
+  experimentStates?: Record<string, AiExperimentState>;
+  handlersRef: MessageHandlersRef;
+  hiddenToolNames?: ReadonlySet<string>;
+  interactiveTools: readonly PetrinautAiInteractiveTool[];
+  messages: PetrinautAiMessage[];
+  onCancelExperiment?: (toolCallId: string) => void;
+  resolveToolPresentation?: PetrinautAiToolPresentationResolver;
+  stopped: boolean;
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/stock-transcript.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/stock-transcript.tsx
new file mode 100644
index 00000000000..98ce1e8e392
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/stock-transcript.tsx
@@ -0,0 +1,192 @@
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+
+import { css, cva } from "@hashintel/ds-helpers/css";
+
+import { ExperimentCard } from "./experiment-card";
+import { getChronologicalRenderItems } from "./get-message-render-items";
+import { AiAssistantReasoning } from "./reasoning";
+import { markdownStyle } from "./shared/markdown-style";
+import { SentUsingVoiceMark } from "./shared/sent-using-voice-mark";
+import { AiAssistantToolList } from "./tool-list";
+
+import type { PetrinautAiMessage } from "../types";
+import type { TranscriptProps } from "./shared/transcript-props";
+
+const messageStyle = cva({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2",
+    padding: "[10px]",
+    fontSize: "sm",
+    fontWeight: "medium",
+    lineHeight: "[1.5]",
+    color: "neutral.s100",
+    userSelect: "text",
+  },
+  variants: {
+    role: {
+      assistant: {
+        alignSelf: "stretch",
+        paddingX: "[0]",
+      },
+      user: {
+        alignSelf: "flex-end",
+        maxWidth: "[92%]",
+        backgroundColor: "neutral.bg.subtle",
+        borderRadius: "lg",
+      },
+    },
+  },
+});
+
+// User input isn't Markdown — rendering it as such would mangle stray
+// `*`, `_`, `#`, etc. and collapse the single newlines they typed. Render it
+// verbatim with preserved whitespace instead.
+const userTextStyle = css({
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+});
+
+const stoppedNoteStyle = css({
+  alignSelf: "center",
+  paddingY: "1",
+  color: "neutral.s80",
+  fontSize: "xs",
+  fontWeight: "medium",
+});
+
+type StockMessageProps = Omit<TranscriptProps, "messages"> & {
+  message: PetrinautAiMessage;
+  /** Whether this is the reply currently streaming. */
+  active: boolean;
+};
+
+/**
+ * Every part in the order it streamed, wrapped in `React.memo`.
+ *
+ * The AI SDK rebuilds the `messages` array on every reasoning/text delta but
+ * uses `slice` for unchanged messages and only `structuredClone`s the active
+ * one. That gives every completed message a stable reference between chunks,
+ * so memoising by reference equality lets us skip re-rendering the whole
+ * transcript on every chunk — only the message currently being streamed has
+ * to re-render.
+ */
+const StockMessage = memo(
+  ({
+    handlersRef,
+    hiddenToolNames,
+    interactiveTools,
+    message,
+    experimentStates,
+    onCancelExperiment,
+    resolveToolPresentation,
+    stopped,
+    active,
+  }: StockMessageProps) => {
+    const role = message.role === "user" ? "user" : "assistant";
+    const wasStopped = stopped || message.metadata?.stopped === true;
+    const renderItems = getChronologicalRenderItems(
+      message,
+      interactiveTools,
+      resolveToolPresentation,
+      hiddenToolNames,
+    );
+    const hasVoiceOrigin =
+      role === "user" && message.metadata?.source === "voice";
+    const firstTextKey =
+      renderItems.find((item) => item.type === "text")?.key ?? null;
+
+    return (
+      <div
+        className={messageStyle({ role })}
+        data-role={role}
+        data-voice-origin={hasVoiceOrigin || undefined}
+      >
+        {renderItems.map((item) => {
+          switch (item.type) {
+            case "text":
+              return role === "user" ? (
+                <div className={userTextStyle} key={item.key}>
+                  {hasVoiceOrigin && item.key === firstTextKey && (
+                    <SentUsingVoiceMark />
+                  )}
+                  <span>{item.part.text}</span>
+                </div>
+              ) : (
+                <div className={markdownStyle} key={item.key}>
+                  <ReactMarkdown>{item.part.text}</ReactMarkdown>
+                </div>
+              );
+            case "reasoning":
+              return (
+                <AiAssistantReasoning
+                  key={item.key}
+                  isStreaming={active && item.part.state === "streaming"}
+                  part={item.part}
+                />
+              );
+            case "experiment":
+              return (
+                <ExperimentCard
+                  key={item.key}
+                  part={item.part}
+                  state={experimentStates?.[item.part.toolCallId]}
+                  onCancel={onCancelExperiment}
+                />
+              );
+            case "tools":
+              return (
+                <AiAssistantToolList
+                  key={item.key}
+                  tools={item.tools}
+                  stopped={wasStopped}
+                  onInteractiveToolSubmit={(params) =>
+                    handlersRef.current.onInteractiveToolSubmit?.(params)
+                  }
+                  onSelectToolTarget={(target) =>
+                    handlersRef.current.onSelectToolTarget?.(target)
+                  }
+                />
+              );
+            default: {
+              const exhaustiveCheck: never = item;
+              throw new Error(
+                `Unknown message part: ${JSON.stringify(exhaustiveCheck)}`,
+              );
+            }
+          }
+        })}
+        {role === "assistant" && message.metadata?.stopped && (
+          <div className={stoppedNoteStyle}>Response stopped</div>
+        )}
+      </div>
+    );
+  },
+);
+StockMessage.displayName = "StockMessage";
+
+export const StockTranscript = ({
+  messages,
+  stopped,
+  busy,
+  ...messageProps
+}: TranscriptProps & { busy: boolean }) => (
+  <>
+    {messages.map((message, index) => (
+      <StockMessage
+        key={message.id}
+        message={message}
+        {...messageProps}
+        stopped={stopped && index === messages.length - 1}
+        active={
+          busy && index === messages.length - 1 && message.role === "assistant"
+        }
+      />
+    ))}
+    {stopped && !messages.at(-1)?.metadata?.stopped && (
+      <div className={stoppedNoteStyle}>Response stopped</div>
+    )}
+  </>
+);
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list.tsx
index 59acbc78f0a..d77c6515251 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list.tsx
@@ -1,8 +1,3 @@
-import { Collapsible } from "@ark-ui/react/collapsible";
-import { useRef, useState } from "react";
-
-import { Icon, LoadingSpinner } from "@hashintel/ds-components";
-import { css, cva } from "@hashintel/ds-helpers/css";
 import {
   getLatestNetDefinitionToolName,
   getNetCompilationErrorsToolName,
@@ -18,8 +13,8 @@ import {
   type AiToolSummary,
   summarizePetrinautAiToolCall,
 } from "../tool-summaries";
-import { collapsibleContentStyle } from "./shared/collapsible-content-style";
-import { useElapsedTime } from "./shared/use-elapsed-time";
+import { BrunchToolList } from "./tool-list/brunch-tool-list";
+import { StockToolList } from "./tool-list/stock-tool-list";
 
 import type {
   PetrinautAiAssistantPresentation,
@@ -87,141 +82,6 @@ export type OnInteractiveToolSubmit = (params: {
   output: unknown;
 }) => void | PromiseLike<void>;
 
-const toolListStyle = css({
-  display: "flex",
-  flexDirection: "column",
-  gap: "1",
-});
-
-const toolItemCollapsibleStyle = css({
-  "& > button": {
-    borderRadius: "[0]",
-  },
-});
-
-const statusDotStyle = css({
-  width: "[6px]",
-  height: "[6px]",
-  borderRadius: "full",
-  flexShrink: 0,
-  backgroundColor: "yellow.s90",
-  '&[data-tool-status="ok"]': { backgroundColor: "green.s90" },
-  '&[data-tool-status="error"]': { backgroundColor: "red.s90" },
-  '&[data-tool-status="cancelled"]': {
-    backgroundColor: "neutral.s80",
-    height: "[2px]",
-  },
-});
-
-const interactiveToolStyle = css({
-  display: "flex",
-  flexDirection: "column",
-  gap: "1",
-});
-
-const toolItemStyle = cva({
-  base: {
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    width: "full",
-    minHeight: "8",
-    paddingX: "2",
-    paddingY: "[5px]",
-    border: "none",
-    borderRadius: "md",
-    backgroundColor: "[transparent]",
-    color: "neutral.s90",
-    fontSize: "xs",
-    fontWeight: "medium",
-    textAlign: "left",
-    cursor: "default",
-    _enabled: {
-      cursor: "pointer",
-    },
-    _hover: { backgroundColor: "neutral.a20" },
-    "& svg[data-chevron]": {
-      marginLeft: "auto",
-      transition: "[transform 150ms ease-out]",
-    },
-    "&[data-state=closed] svg[data-chevron]": {
-      transform: "[rotate(90deg)]",
-    },
-    "&[data-state=open] svg[data-chevron]": {
-      transform: "[rotate(180deg)]",
-    },
-  },
-  variants: {
-    tone: {
-      danger: {
-        color: "red.s100",
-      },
-      info: {
-        color: "neutral.s100",
-      },
-      neutral: {
-        color: "neutral.s90",
-      },
-      pending: {
-        color: "neutral.s90",
-      },
-      success: {
-        color: "neutral.s90",
-      },
-    },
-    group: {
-      true: {
-        display: "inline-flex",
-        width: "[fit-content]",
-        minHeight: "[0]",
-        padding: "[2px 6px 2px 2px]",
-        gap: "1",
-        color: "neutral.s80",
-        _hover: { color: "neutral.s90" },
-        _focusVisible: { outline: "[2px solid {colors.blue.s90}]" },
-        "& svg[data-chevron]": { marginLeft: "0" },
-      },
-    },
-    link: {
-      true: {
-        cursor: "pointer",
-        textDecoration: "none",
-      },
-    },
-  },
-});
-
-const toolTextStyle = css({
-  display: "flex",
-  flex: "[1]",
-  flexDirection: "column",
-  gap: "[2px]",
-});
-
-const toolDetailStyle = css({
-  display: "block",
-  color: "neutral.s80",
-  fontSize: "xs",
-  lineHeight: "[16px]",
-});
-
-const toolSubItemListStyle = css({
-  display: "flex",
-  flexDirection: "column",
-  gap: "1",
-  padding: "[4px 8px 8px 30px]",
-  color: "neutral.s80",
-  fontSize: "xs",
-  fontWeight: "medium",
-  lineHeight: "[16px]",
-});
-
-const toolSubItemStyle = css({
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
 export const isToolPart = (
   part: PetrinautAiMessage["parts"][number],
 ): part is RenderableToolPart =>
@@ -494,264 +354,6 @@ export const toToolRenderItem = (
   };
 };
 
-const InteractiveToolItem = ({
-  onInteractiveToolSubmit,
-  presentation,
-  tool,
-}: {
-  onInteractiveToolSubmit?: OnInteractiveToolSubmit;
-  presentation: PetrinautAiAssistantPresentation;
-  tool: ToolRenderItem;
-}) => {
-  const interactive = tool.interactive;
-  if (!interactive) {
-    throw new Error(`Missing interactive definition for ${tool.toolName}`);
-  }
-
-  const { definition, input, submittedOutput } = interactive;
-  const submitted = tool.state === "output-available";
-  const submittedOnceRef = useRef(submitted);
-  const Widget = definition.Widget;
-  const typedInput = definition.parseInput(input);
-  const submitAndWait = (output: unknown): Promise<void> => {
-    if (submittedOnceRef.current) {
-      return Promise.resolve();
-    }
-    if (!onInteractiveToolSubmit) {
-      const submissionPromise = Promise.reject(
-        new Error("Interactive tool submission is unavailable."),
-      );
-      void submissionPromise.catch(() => undefined);
-      return submissionPromise;
-    }
-
-    try {
-      const parsedOutput = definition.parseOutput(output);
-      submittedOnceRef.current = true;
-      const submission = onInteractiveToolSubmit({
-        toolCallId: tool.id,
-        toolName: tool.toolName,
-        output: parsedOutput,
-      });
-      const submissionPromise = Promise.resolve(submission);
-      void submissionPromise.catch(() => {
-        submittedOnceRef.current = false;
-      });
-      return submissionPromise;
-    } catch (error) {
-      submittedOnceRef.current = false;
-      const submissionPromise = Promise.reject(error);
-      void submissionPromise.catch(() => undefined);
-      return submissionPromise;
-    }
-  };
-
-  if (submitted) {
-    return (
-      <div className={interactiveToolStyle} data-tool-call-id={tool.id}>
-        <Widget
-          input={typedInput}
-          presentation={presentation}
-          state="submitted"
-          submit={() => {}}
-          submitAndWait={() => Promise.resolve()}
-          submittedOutput={definition.parseOutput(submittedOutput)}
-          toolCallId={tool.id}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className={interactiveToolStyle} data-tool-call-id={tool.id}>
-      <Widget
-        input={typedInput}
-        presentation={presentation}
-        state="awaiting"
-        submit={(output) => {
-          void submitAndWait(output);
-        }}
-        submitAndWait={submitAndWait}
-        toolCallId={tool.id}
-      />
-    </div>
-  );
-};
-
-const ToolItem = ({
-  onInteractiveToolSubmit,
-  onSelectToolTarget,
-  tool,
-  presentation,
-  active = false,
-  stopped = false,
-}: {
-  onInteractiveToolSubmit?: OnInteractiveToolSubmit;
-  onSelectToolTarget?: (target: AiToolTarget) => void;
-  tool: ToolRenderItem;
-  presentation: PetrinautAiAssistantPresentation;
-  active?: boolean;
-  stopped?: boolean;
-}) => {
-  const inProgress =
-    tool.state === "input-streaming" || tool.state === "input-available";
-  const cancelled = stopped && inProgress;
-  const duration = useElapsedTime(active && inProgress && !tool.interactive);
-  if (tool.interactive && !cancelled) {
-    return (
-      <InteractiveToolItem
-        onInteractiveToolSubmit={onInteractiveToolSubmit}
-        presentation={presentation}
-        tool={tool}
-      />
-    );
-  }
-
-  const complete = tool.state === "output-available";
-  const errored = tool.state === "output-error";
-  const stateLabel = cancelled ? "Cancelled" : tool.stateLabel || undefined;
-  const target = tool.summary.target;
-  const href = tool.summary.href;
-  const children = tool.summary.items ?? [];
-  const title =
-    errored && !tool.hasConfiguredTitle
-      ? (tool.errorText ?? "Tool failed")
-      : tool.summary.title;
-
-  const button = (
-    <button
-      type="button"
-      className={toolItemStyle({ tone: tool.tone })}
-      data-tone={tool.tone}
-      aria-busy={inProgress && !cancelled ? true : undefined}
-      onClick={() => {
-        if (target) {
-          onSelectToolTarget?.(target);
-        }
-      }}
-    >
-      <span
-        className={statusDotStyle}
-        data-tool-status={
-          cancelled
-            ? "cancelled"
-            : errored
-              ? "error"
-              : complete
-                ? "ok"
-                : "pending"
-        }
-        aria-label={
-          cancelled
-            ? "Cancelled"
-            : errored
-              ? "Error"
-              : complete
-                ? "Complete"
-                : "Pending"
-        }
-      />
-      <span className={toolTextStyle}>
-        <span>{title}</span>
-        {errored && !tool.hasConfiguredTitle ? (
-          <span className={toolDetailStyle} data-testid="tool-detail">
-            {tool.toolName}
-          </span>
-        ) : tool.summary.detail ? (
-          <span className={toolDetailStyle} data-testid="tool-detail">
-            {tool.summary.detail}
-          </span>
-        ) : null}
-        {stateLabel && <span className={toolDetailStyle}>{stateLabel}</span>}
-      </span>
-      <span
-        className={toolDetailStyle}
-        title={duration === undefined ? "Duration unavailable" : undefined}
-      >
-        {duration === undefined ? "—" : `${(duration / 1_000).toFixed(1)}s`}
-      </span>
-      <Icon name="chevronUp" data-chevron size="sm" />
-    </button>
-  );
-
-  return (
-    <Collapsible.Root className={toolItemCollapsibleStyle} defaultOpen={false}>
-      <Collapsible.Trigger asChild>{button}</Collapsible.Trigger>
-      <Collapsible.Content className={collapsibleContentStyle}>
-        <div className={toolSubItemListStyle}>
-          <strong>{tool.toolName}</strong>
-          {href && !errored && (
-            <a href={href} target="_blank" rel="noopener noreferrer">
-              Open user guide
-            </a>
-          )}
-          <strong>Arguments</strong>
-          <pre
-            className={css({
-              whiteSpace: "pre-wrap",
-              overflowWrap: "anywhere",
-            })}
-          >
-            {tool.input === undefined
-              ? "Not available"
-              : JSON.stringify(tool.input, null, 2)}
-          </pre>
-          <strong>Result</strong>
-          <pre
-            className={css({
-              whiteSpace: "pre-wrap",
-              overflowWrap: "anywhere",
-            })}
-          >
-            {tool.errorText ??
-              (tool.output === undefined
-                ? cancelled
-                  ? "Cancelled before a result was received"
-                  : "Pending"
-                : JSON.stringify(tool.output, null, 2))}
-          </pre>
-          {children.map((item, index) => (
-            // oxlint-disable-next-line react/no-array-index-key
-            <div className={toolSubItemStyle} key={`${tool.id}-${index}`}>
-              {item}
-            </div>
-          ))}
-        </div>
-      </Collapsible.Content>
-    </Collapsible.Root>
-  );
-};
-
-const ToolListContent = ({
-  onInteractiveToolSubmit,
-  onSelectToolTarget,
-  tools,
-  presentation,
-  active,
-  stopped,
-}: {
-  onInteractiveToolSubmit?: OnInteractiveToolSubmit;
-  onSelectToolTarget?: (target: AiToolTarget) => void;
-  tools: ToolRenderItem[];
-  presentation: PetrinautAiAssistantPresentation;
-  active: boolean;
-  stopped: boolean;
-}) => (
-  <>
-    {tools.map((tool) => (
-      <ToolItem
-        key={tool.id}
-        tool={tool}
-        presentation={presentation}
-        active={active && !stopped}
-        stopped={stopped}
-        onInteractiveToolSubmit={onInteractiveToolSubmit}
-        onSelectToolTarget={onSelectToolTarget}
-      />
-    ))}
-  </>
-);
-
 export const AiAssistantToolList = ({
   onInteractiveToolSubmit,
   onSelectToolTarget,
@@ -765,104 +367,28 @@ export const AiAssistantToolList = ({
   onInteractiveToolSubmit?: OnInteractiveToolSubmit;
   onSelectToolTarget?: (target: AiToolTarget) => void;
   tools: ToolRenderItem[];
-  active?: boolean;
   stopped?: boolean;
+  /** Brunch only; the options below shape the fold around the tools. */
+  active?: boolean;
   producedCard?: boolean;
   preserveOpen?: boolean;
   presentation?: PetrinautAiAssistantPresentation;
-}) => {
-  const running =
-    active &&
-    !stopped &&
-    tools.some(
-      (tool) =>
-        !tool.interactive &&
-        (tool.state === "input-streaming" || tool.state === "input-available"),
-    );
-  const [disclosure, setDisclosure] = useState({
-    running,
-    open: preserveOpen ? active : running,
-  });
-  if (disclosure.running !== running)
-    setDisclosure({ running, open: preserveOpen ? disclosure.open : running });
-  if (tools.length === 0) {
-    return null;
-  }
-
-  const content = (
-    <div className={toolListStyle}>
-      <ToolListContent
-        tools={tools}
-        presentation={presentation}
-        active={active}
-        stopped={stopped}
-        onInteractiveToolSubmit={onInteractiveToolSubmit}
-        onSelectToolTarget={onSelectToolTarget}
-      />
-    </div>
-  );
-
-  if (producedCard || presentation === "stock") return content;
-  return (
-    <>
-      <Collapsible.Root
-        open={disclosure.open}
-        onOpenChange={({ open }) => setDisclosure({ running, open })}
-      >
-        <Collapsible.Trigger
-          className={toolItemStyle({ tone: "neutral", group: true })}
-        >
-          {running ? (
-            <LoadingSpinner size="xs" aria-hidden="true" />
-          ) : (
-            <Icon name="lightning" size="xs" />
-          )}
-          {running
-            ? "Running tools"
-            : `${stopped ? "Stopped after" : "Used"} ${tools.length} ${tools.length === 1 ? "tool" : "tools"}`}
-          <Icon name="chevronUp" size="xs" data-chevron />
-        </Collapsible.Trigger>
-        <Collapsible.Content className={collapsibleContentStyle}>
-          <div
-            className={css({
-              display: "flex",
-              flexDirection: "column",
-              gap: "1",
-              margin: "[2px 0 4px 7px]",
-              paddingLeft: "2.5",
-              borderLeft: "[2px solid {colors.neutral.a30}]",
-            })}
-          >
-            {tools
-              .filter(
-                (tool) => !tool.interactive || tool.state !== "input-available",
-              )
-              .map((tool) => (
-                <ToolItem
-                  key={tool.id}
-                  tool={tool}
-                  presentation={presentation}
-                  active={active && !stopped}
-                  stopped={stopped}
-                  onInteractiveToolSubmit={onInteractiveToolSubmit}
-                  onSelectToolTarget={onSelectToolTarget}
-                />
-              ))}
-          </div>
-        </Collapsible.Content>
-      </Collapsible.Root>
-      {tools
-        .filter((tool) => tool.interactive && tool.state === "input-available")
-        .map((tool) => (
-          <ToolItem
-            key={tool.id}
-            tool={tool}
-            presentation={presentation}
-            stopped={stopped}
-            onInteractiveToolSubmit={onInteractiveToolSubmit}
-            onSelectToolTarget={onSelectToolTarget}
-          />
-        ))}
-    </>
+}) =>
+  presentation === "stock" ? (
+    <StockToolList
+      tools={tools}
+      stopped={stopped}
+      onInteractiveToolSubmit={onInteractiveToolSubmit}
+      onSelectToolTarget={onSelectToolTarget}
+    />
+  ) : (
+    <BrunchToolList
+      tools={tools}
+      active={active}
+      stopped={stopped}
+      producedCard={producedCard}
+      preserveOpen={preserveOpen}
+      onInteractiveToolSubmit={onInteractiveToolSubmit}
+      onSelectToolTarget={onSelectToolTarget}
+    />
   );
-};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list/brunch-tool-list.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list/brunch-tool-list.tsx
new file mode 100644
index 00000000000..88b537a0739
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list/brunch-tool-list.tsx
@@ -0,0 +1,354 @@
+import { Collapsible } from "@ark-ui/react/collapsible";
+import { useState } from "react";
+
+import { Icon, LoadingSpinner } from "@hashintel/ds-components";
+import { css, cva } from "@hashintel/ds-helpers/css";
+
+import { collapsibleContentStyle } from "../shared/collapsible-content-style";
+import { useElapsedTime } from "../shared/use-elapsed-time";
+import { InteractiveToolItem } from "./shared/interactive-tool-item";
+import {
+  toolDetailStyle,
+  toolItemCollapsibleStyle,
+  toolListStyle,
+  toolSubItemListStyle,
+  toolSubItemStyle,
+  toolTextStyle,
+} from "./shared/tool-row-styles";
+
+import type { AiToolTarget } from "../../tool-summaries";
+import type { OnInteractiveToolSubmit, ToolRenderItem } from "../tool-list";
+
+const statusDotStyle = css({
+  width: "[6px]",
+  height: "[6px]",
+  borderRadius: "full",
+  flexShrink: 0,
+  backgroundColor: "yellow.s90",
+  '&[data-tool-status="ok"]': { backgroundColor: "green.s90" },
+  '&[data-tool-status="error"]': { backgroundColor: "red.s90" },
+  '&[data-tool-status="cancelled"]': {
+    backgroundColor: "neutral.s80",
+    height: "[2px]",
+  },
+});
+
+const toolItemStyle = cva({
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    width: "full",
+    minHeight: "8",
+    paddingX: "2",
+    paddingY: "[5px]",
+    border: "none",
+    borderRadius: "md",
+    backgroundColor: "[transparent]",
+    color: "neutral.s90",
+    fontSize: "xs",
+    fontWeight: "medium",
+    textAlign: "left",
+    cursor: "default",
+    _enabled: {
+      cursor: "pointer",
+    },
+    _hover: { backgroundColor: "neutral.a20" },
+    "& svg[data-chevron]": {
+      marginLeft: "auto",
+      transition: "[transform 150ms ease-out]",
+    },
+    "&[data-state=closed] svg[data-chevron]": {
+      transform: "[rotate(90deg)]",
+    },
+    "&[data-state=open] svg[data-chevron]": {
+      transform: "[rotate(180deg)]",
+    },
+  },
+  variants: {
+    tone: {
+      danger: {
+        color: "red.s100",
+      },
+      info: {
+        color: "neutral.s100",
+      },
+      neutral: {
+        color: "neutral.s90",
+      },
+      pending: {
+        color: "neutral.s90",
+      },
+      success: {
+        color: "neutral.s90",
+      },
+    },
+    group: {
+      true: {
+        display: "inline-flex",
+        width: "[fit-content]",
+        minHeight: "[0]",
+        padding: "[2px 6px 2px 2px]",
+        gap: "1",
+        color: "neutral.s80",
+        _hover: { color: "neutral.s90" },
+        _focusVisible: { outline: "[2px solid {colors.blue.s90}]" },
+        "& svg[data-chevron]": { marginLeft: "0" },
+      },
+    },
+  },
+});
+
+const toolPayloadStyle = css({
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere",
+});
+
+const ToolItem = ({
+  onInteractiveToolSubmit,
+  onSelectToolTarget,
+  tool,
+  active = false,
+  stopped = false,
+}: {
+  onInteractiveToolSubmit?: OnInteractiveToolSubmit;
+  onSelectToolTarget?: (target: AiToolTarget) => void;
+  tool: ToolRenderItem;
+  active?: boolean;
+  stopped?: boolean;
+}) => {
+  const inProgress =
+    tool.state === "input-streaming" || tool.state === "input-available";
+  const cancelled = stopped && inProgress;
+  const duration = useElapsedTime(active && inProgress && !tool.interactive);
+  if (tool.interactive && !cancelled) {
+    return (
+      <InteractiveToolItem
+        onInteractiveToolSubmit={onInteractiveToolSubmit}
+        presentation="brunch"
+        tool={tool}
+      />
+    );
+  }
+
+  const complete = tool.state === "output-available";
+  const errored = tool.state === "output-error";
+  const stateLabel = cancelled ? "Cancelled" : tool.stateLabel || undefined;
+  const target = tool.summary.target;
+  const href = tool.summary.href;
+  const children = tool.summary.items ?? [];
+  const title =
+    errored && !tool.hasConfiguredTitle
+      ? (tool.errorText ?? "Tool failed")
+      : tool.summary.title;
+
+  const button = (
+    <button
+      type="button"
+      className={toolItemStyle({ tone: tool.tone })}
+      data-tone={tool.tone}
+      aria-busy={inProgress && !cancelled ? true : undefined}
+      onClick={() => {
+        if (target) {
+          onSelectToolTarget?.(target);
+        }
+      }}
+    >
+      <span
+        className={statusDotStyle}
+        data-tool-status={
+          cancelled
+            ? "cancelled"
+            : errored
+              ? "error"
+              : complete
+                ? "ok"
+                : "pending"
+        }
+        aria-label={
+          cancelled
+            ? "Cancelled"
+            : errored
+              ? "Error"
+              : complete
+                ? "Complete"
+                : "Pending"
+        }
+      />
+      <span className={toolTextStyle}>
+        <span>{title}</span>
+        {errored && !tool.hasConfiguredTitle ? (
+          <span className={toolDetailStyle} data-testid="tool-detail">
+            {tool.toolName}
+          </span>
+        ) : tool.summary.detail ? (
+          <span className={toolDetailStyle} data-testid="tool-detail">
+            {tool.summary.detail}
+          </span>
+        ) : null}
+        {stateLabel && <span className={toolDetailStyle}>{stateLabel}</span>}
+      </span>
+      <span
+        className={toolDetailStyle}
+        title={duration === undefined ? "Duration unavailable" : undefined}
+      >
+        {duration === undefined ? "—" : `${(duration / 1_000).toFixed(1)}s`}
+      </span>
+      <Icon name="chevronUp" data-chevron size="sm" />
+    </button>
+  );
+
+  return (
+    <Collapsible.Root className={toolItemCollapsibleStyle} defaultOpen={false}>
+      <Collapsible.Trigger asChild>{button}</Collapsible.Trigger>
+      <Collapsible.Content className={collapsibleContentStyle}>
+        <div className={toolSubItemListStyle}>
+          <strong>{tool.toolName}</strong>
+          {href && !errored && (
+            <a href={href} target="_blank" rel="noopener noreferrer">
+              Open user guide
+            </a>
+          )}
+          <strong>Arguments</strong>
+          <pre className={toolPayloadStyle}>
+            {tool.input === undefined
+              ? "Not available"
+              : JSON.stringify(tool.input, null, 2)}
+          </pre>
+          <strong>Result</strong>
+          <pre className={toolPayloadStyle}>
+            {tool.errorText ??
+              (tool.output === undefined
+                ? cancelled
+                  ? "Cancelled before a result was received"
+                  : "Pending"
+                : JSON.stringify(tool.output, null, 2))}
+          </pre>
+          {children.map((item, index) => (
+            // oxlint-disable-next-line react/no-array-index-key
+            <div className={toolSubItemStyle} key={`${tool.id}-${index}`}>
+              {item}
+            </div>
+          ))}
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
+
+/**
+ * Tools folded behind a "Used N tools" summary, with pending interactive
+ * tools kept outside the fold so their questions stay visible. A produced
+ * card renders its tool directly.
+ */
+export const BrunchToolList = ({
+  onInteractiveToolSubmit,
+  onSelectToolTarget,
+  tools,
+  active,
+  stopped,
+  producedCard,
+  preserveOpen,
+}: {
+  onInteractiveToolSubmit?: OnInteractiveToolSubmit;
+  onSelectToolTarget?: (target: AiToolTarget) => void;
+  tools: ToolRenderItem[];
+  active: boolean;
+  stopped: boolean;
+  producedCard: boolean;
+  preserveOpen: boolean;
+}) => {
+  const running =
+    active &&
+    !stopped &&
+    tools.some(
+      (tool) =>
+        !tool.interactive &&
+        (tool.state === "input-streaming" || tool.state === "input-available"),
+    );
+  const [disclosure, setDisclosure] = useState({
+    running,
+    open: preserveOpen ? active : running,
+  });
+  if (disclosure.running !== running)
+    setDisclosure({ running, open: preserveOpen ? disclosure.open : running });
+  if (tools.length === 0) {
+    return null;
+  }
+
+  if (producedCard) {
+    return (
+      <div className={toolListStyle}>
+        {tools.map((tool) => (
+          <ToolItem
+            key={tool.id}
+            tool={tool}
+            onInteractiveToolSubmit={onInteractiveToolSubmit}
+            onSelectToolTarget={onSelectToolTarget}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Collapsible.Root
+        open={disclosure.open}
+        onOpenChange={({ open }) => setDisclosure({ running, open })}
+      >
+        <Collapsible.Trigger
+          className={toolItemStyle({ tone: "neutral", group: true })}
+        >
+          {running ? (
+            <LoadingSpinner size="xs" aria-hidden="true" />
+          ) : (
+            <Icon name="lightning" size="xs" />
+          )}
+          {running
+            ? "Running tools"
+            : `${stopped ? "Stopped after" : "Used"} ${tools.length} ${tools.length === 1 ? "tool" : "tools"}`}
+          <Icon name="chevronUp" size="xs" data-chevron />
+        </Collapsible.Trigger>
+        <Collapsible.Content className={collapsibleContentStyle}>
+          <div
+            className={css({
+              display: "flex",
+              flexDirection: "column",
+              gap: "1",
+              margin: "[2px 0 4px 7px]",
+              paddingLeft: "2.5",
+              borderLeft: "[2px solid {colors.neutral.a30}]",
+            })}
+          >
+            {tools
+              .filter(
+                (tool) => !tool.interactive || tool.state !== "input-available",
+              )
+              .map((tool) => (
+                <ToolItem
+                  key={tool.id}
+                  tool={tool}
+                  active={active && !stopped}
+                  stopped={stopped}
+                  onInteractiveToolSubmit={onInteractiveToolSubmit}
+                  onSelectToolTarget={onSelectToolTarget}
+                />
+              ))}
+          </div>
+        </Collapsible.Content>
+      </Collapsible.Root>
+      {tools
+        .filter((tool) => tool.interactive && tool.state === "input-available")
+        .map((tool) => (
+          <ToolItem
+            key={tool.id}
+            tool={tool}
+            stopped={stopped}
+            onInteractiveToolSubmit={onInteractiveToolSubmit}
+            onSelectToolTarget={onSelectToolTarget}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list/shared/interactive-tool-item.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list/shared/interactive-tool-item.tsx
new file mode 100644
index 00000000000..cfb5c5b5801
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list/shared/interactive-tool-item.tsx
@@ -0,0 +1,96 @@
+import { useRef } from "react";
+
+import { css } from "@hashintel/ds-helpers/css";
+
+import type { PetrinautAiAssistantPresentation } from "../../../../../../../petrinaut";
+import type { OnInteractiveToolSubmit, ToolRenderItem } from "../../tool-list";
+
+const interactiveToolStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1",
+});
+
+export const InteractiveToolItem = ({
+  onInteractiveToolSubmit,
+  presentation,
+  tool,
+}: {
+  onInteractiveToolSubmit?: OnInteractiveToolSubmit;
+  presentation: PetrinautAiAssistantPresentation;
+  tool: ToolRenderItem;
+}) => {
+  const interactive = tool.interactive;
+  if (!interactive) {
+    throw new Error(`Missing interactive definition for ${tool.toolName}`);
+  }
+
+  const { definition, input, submittedOutput } = interactive;
+  const submitted = tool.state === "output-available";
+  const submittedOnceRef = useRef(submitted);
+  const Widget = definition.Widget;
+  const typedInput = definition.parseInput(input);
+  const submitAndWait = (output: unknown): Promise<void> => {
+    if (submittedOnceRef.current) {
+      return Promise.resolve();
+    }
+    if (!onInteractiveToolSubmit) {
+      const submissionPromise = Promise.reject(
+        new Error("Interactive tool submission is unavailable."),
+      );
+      void submissionPromise.catch(() => undefined);
+      return submissionPromise;
+    }
+
+    try {
+      const parsedOutput = definition.parseOutput(output);
+      submittedOnceRef.current = true;
+      const submission = onInteractiveToolSubmit({
+        toolCallId: tool.id,
+        toolName: tool.toolName,
+        output: parsedOutput,
+      });
+      const submissionPromise = Promise.resolve(submission);
+      void submissionPromise.catch(() => {
+        submittedOnceRef.current = false;
+      });
+      return submissionPromise;
+    } catch (error) {
+      submittedOnceRef.current = false;
+      const submissionPromise = Promise.reject(error);
+      void submissionPromise.catch(() => undefined);
+      return submissionPromise;
+    }
+  };
+
+  if (submitted) {
+    return (
+      <div className={interactiveToolStyle} data-tool-call-id={tool.id}>
+        <Widget
+          input={typedInput}
+          presentation={presentation}
+          state="submitted"
+          submit={() => {}}
+          submitAndWait={() => Promise.resolve()}
+          submittedOutput={definition.parseOutput(submittedOutput)}
+          toolCallId={tool.id}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={interactiveToolStyle} data-tool-call-id={tool.id}>
+      <Widget
+        input={typedInput}
+        presentation={presentation}
+        state="awaiting"
+        submit={(output) => {
+          void submitAndWait(output);
+        }}
+        submitAndWait={submitAndWait}
+        toolCallId={tool.id}
+      />
+    </div>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list/shared/tool-row-styles.ts b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list/shared/tool-row-styles.ts
new file mode 100644
index 00000000000..b582c647d13
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list/shared/tool-row-styles.ts
@@ -0,0 +1,44 @@
+import { css } from "@hashintel/ds-helpers/css";
+
+export const toolListStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1",
+});
+
+export const toolItemCollapsibleStyle = css({
+  "& > button": {
+    borderRadius: "[0]",
+  },
+});
+
+export const toolTextStyle = css({
+  display: "flex",
+  flex: "[1]",
+  flexDirection: "column",
+  gap: "[2px]",
+});
+
+export const toolDetailStyle = css({
+  display: "block",
+  color: "neutral.s80",
+  fontSize: "xs",
+  lineHeight: "[16px]",
+});
+
+export const toolSubItemListStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1",
+  padding: "[4px 8px 8px 30px]",
+  color: "neutral.s80",
+  fontSize: "xs",
+  fontWeight: "medium",
+  lineHeight: "[16px]",
+});
+
+export const toolSubItemStyle = css({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list/stock-tool-list.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list/stock-tool-list.tsx
new file mode 100644
index 00000000000..fec6d149068
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/tool-list/stock-tool-list.tsx
@@ -0,0 +1,312 @@
+import { Collapsible } from "@ark-ui/react/collapsible";
+
+import { Icon, LoadingSpinner } from "@hashintel/ds-components";
+import { css, cva } from "@hashintel/ds-helpers/css";
+
+import { collapsibleContentStyle } from "../shared/collapsible-content-style";
+import { InteractiveToolItem } from "./shared/interactive-tool-item";
+import {
+  toolDetailStyle,
+  toolItemCollapsibleStyle,
+  toolListStyle,
+  toolSubItemListStyle,
+  toolSubItemStyle,
+  toolTextStyle,
+} from "./shared/tool-row-styles";
+
+import type { AiToolTarget } from "../../tool-summaries";
+import type { OnInteractiveToolSubmit, ToolRenderItem } from "../tool-list";
+
+const toolItemStyle = cva({
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    width: "full",
+    minHeight: "8",
+    paddingX: "2",
+    paddingY: "[5px]",
+    borderWidth: "thin",
+    borderStyle: "solid",
+    borderRadius: "lg",
+    color: "neutral.s90",
+    fontSize: "sm",
+    fontWeight: "medium",
+    textAlign: "left",
+    cursor: "default",
+    _enabled: {
+      cursor: "pointer",
+    },
+    "& svg[data-chevron]": {
+      transition: "[transform 150ms ease-out]",
+    },
+    "&[data-state=closed] svg[data-chevron]": {
+      transform: "[rotate(180deg)]",
+    },
+  },
+  variants: {
+    tone: {
+      danger: {
+        backgroundColor: "red.s20",
+        borderColor: "red.a40",
+      },
+      info: {
+        backgroundColor: "[#eff9ff]",
+        borderColor: "[#bee6ff]",
+        color: "[#0666c6]",
+      },
+      neutral: {
+        backgroundColor: "neutral.s10",
+        borderColor: "neutral.a30",
+      },
+      pending: {
+        backgroundColor: "yellow.s20",
+        borderColor: "yellow.a40",
+      },
+      success: {
+        backgroundColor: "green.s20",
+        borderColor: "green.a40",
+      },
+    },
+    link: {
+      true: {
+        cursor: "pointer",
+        textDecoration: "none",
+      },
+    },
+  },
+});
+
+const toolStatusStyle = cva({
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "[14px]",
+    height: "[14px]",
+    borderRadius: "full",
+    flexShrink: 0,
+    boxShadow: "[0px 0px 0px 1px white]",
+    color: "white",
+  },
+  variants: {
+    tone: {
+      danger: {
+        backgroundColor: "red.s90",
+      },
+      info: {
+        backgroundColor: "[#2a80c8]",
+      },
+      neutral: {
+        backgroundColor: "neutral.s90",
+      },
+      pending: {
+        backgroundColor: "yellow.s90",
+      },
+      success: {
+        backgroundColor: "green.s90",
+      },
+    },
+    state: {
+      active: {
+        backgroundColor: "white",
+        borderWidth: "thin",
+        borderStyle: "dashed",
+        borderColor: "blue.s70",
+        color: "blue.s70",
+      },
+      complete: {},
+      error: {
+        backgroundColor: "red.s90",
+      },
+    },
+  },
+});
+
+const toolProgressSpinnerStyle = css({
+  "@media (prefers-reduced-motion: reduce)": {
+    animation: "[none !important]",
+  },
+});
+
+const ToolItem = ({
+  onInteractiveToolSubmit,
+  onSelectToolTarget,
+  tool,
+  stopped,
+}: {
+  onInteractiveToolSubmit?: OnInteractiveToolSubmit;
+  onSelectToolTarget?: (target: AiToolTarget) => void;
+  tool: ToolRenderItem;
+  stopped: boolean;
+}) => {
+  const cancelled =
+    stopped &&
+    (tool.state === "input-streaming" || tool.state === "input-available");
+  if (tool.interactive && !cancelled) {
+    return (
+      <InteractiveToolItem
+        onInteractiveToolSubmit={onInteractiveToolSubmit}
+        presentation="stock"
+        tool={tool}
+      />
+    );
+  }
+
+  const complete = tool.state === "output-available";
+  const errored = tool.state === "output-error";
+  const stateLabel = cancelled ? "Cancelled" : tool.stateLabel || undefined;
+  const inProgress =
+    !cancelled &&
+    (tool.state === "input-streaming" || tool.state === "input-available");
+  const toolStatus = cancelled ? "cancelled" : undefined;
+  const target = tool.summary.target;
+  const href = tool.summary.href;
+  const children = tool.summary.items ?? [];
+  const expandable = children.length > 0;
+  const title =
+    errored && !tool.hasConfiguredTitle
+      ? (tool.errorText ?? "Tool failed")
+      : tool.summary.title;
+
+  if (href && !errored) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={toolItemStyle({ tone: tool.tone, link: true })}
+        data-tone={tool.tone}
+        aria-busy={inProgress ? true : undefined}
+      >
+        <span
+          className={toolStatusStyle({
+            state: complete ? "complete" : "active",
+            tone: tool.tone,
+          })}
+          data-tool-status={toolStatus}
+        >
+          {complete ? (
+            <Icon name="check" size="xs" />
+          ) : inProgress ? (
+            <LoadingSpinner
+              aria-hidden="true"
+              className={toolProgressSpinnerStyle}
+              data-tool-progress-spinner
+              size="xs"
+              variant="bars"
+            />
+          ) : null}
+        </span>
+        <span className={toolTextStyle}>
+          <span>{title}</span>
+          {tool.summary.detail && (
+            <span className={toolDetailStyle} data-testid="tool-detail">
+              {tool.summary.detail}
+            </span>
+          )}
+          {stateLabel && <span className={toolDetailStyle}>{stateLabel}</span>}
+        </span>
+      </a>
+    );
+  }
+
+  const button = (
+    <button
+      type="button"
+      className={toolItemStyle({ tone: tool.tone })}
+      data-tone={tool.tone}
+      disabled={!target && !expandable}
+      aria-busy={inProgress ? true : undefined}
+      onClick={() => {
+        if (target) {
+          onSelectToolTarget?.(target);
+        }
+      }}
+    >
+      <span
+        className={toolStatusStyle({
+          state: errored ? "error" : complete ? "complete" : "active",
+          tone: tool.tone,
+        })}
+        data-tool-status={toolStatus}
+      >
+        {errored ? (
+          <Icon name="close" size="xs" />
+        ) : tool.notApplied ? (
+          <Icon name="dash" size="xs" data-tool-result-icon="not-applied" />
+        ) : complete ? (
+          <Icon name="check" size="xs" data-tool-result-icon="complete" />
+        ) : inProgress ? (
+          <LoadingSpinner
+            aria-hidden="true"
+            className={toolProgressSpinnerStyle}
+            data-tool-progress-spinner
+            size="xs"
+            variant="bars"
+          />
+        ) : null}
+      </span>
+      <span className={toolTextStyle}>
+        <span>{title}</span>
+        {errored && !tool.hasConfiguredTitle ? (
+          <span className={toolDetailStyle} data-testid="tool-detail">
+            {tool.toolName}
+          </span>
+        ) : tool.summary.detail ? (
+          <span className={toolDetailStyle} data-testid="tool-detail">
+            {tool.summary.detail}
+          </span>
+        ) : null}
+        {stateLabel && <span className={toolDetailStyle}>{stateLabel}</span>}
+      </span>
+      {expandable && <Icon name="chevronUp" data-chevron size="sm" />}
+    </button>
+  );
+
+  if (!expandable) {
+    return button;
+  }
+
+  return (
+    <Collapsible.Root className={toolItemCollapsibleStyle} defaultOpen={false}>
+      <Collapsible.Trigger asChild>{button}</Collapsible.Trigger>
+      <Collapsible.Content className={collapsibleContentStyle}>
+        <div className={toolSubItemListStyle}>
+          {children.map((item, index) => (
+            // oxlint-disable-next-line react/no-array-index-key
+            <div className={toolSubItemStyle} key={`${tool.id}-${index}`}>
+              {item}
+            </div>
+          ))}
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
+
+/** Every tool as its own bordered row, in call order. */
+export const StockToolList = ({
+  onInteractiveToolSubmit,
+  onSelectToolTarget,
+  tools,
+  stopped,
+}: {
+  onInteractiveToolSubmit?: OnInteractiveToolSubmit;
+  onSelectToolTarget?: (target: AiToolTarget) => void;
+  tools: ToolRenderItem[];
+  stopped: boolean;
+}) =>
+  tools.length === 0 ? null : (
+    <div className={toolListStyle}>
+      {tools.map((tool) => (
+        <ToolItem
+          key={tool.id}
+          tool={tool}
+          stopped={stopped}
+          onInteractiveToolSubmit={onInteractiveToolSubmit}
+          onSelectToolTarget={onSelectToolTarget}
+        />
+      ))}
+    </div>
+  );
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/voice-dock.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/voice-dock.test.tsx
index 852317bf7a3..e83dac1046f 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/voice-dock.test.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/voice-dock.test.tsx
@@ -1,14 +1,25 @@
 /**
  * @vitest-environment jsdom
  */
-import { cleanup, render, screen } from "@testing-library/react";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import { afterAll, afterEach, beforeAll, expect, test, vi } from "vitest";
 
 import { VoiceDock } from "./voice-dock";
 
 const noop = () => {};
 
+// The voice ribbon asks for a 2D context on mount. jsdom has no canvas, and
+// answering with `null` takes the same branch a browser without one would,
+// instead of letting jsdom log a not-implemented error per render.
 beforeAll(() => {
+  vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
   vi.stubGlobal(
     "ResizeObserver",
     class {
@@ -47,3 +58,686 @@ test("renders an interrupted session as an unlabeled scoped ribbon with recovery
     screen.getByRole("button", { name: "Reconnect voice mode" }),
   ).toBeTruthy();
 });
+
+test("live-capability dock keeps microphone direct and Realtime controls absent", async () => {
+  const end = vi.fn();
+  const collapse = vi.fn();
+  const setMicrophoneMuted = vi.fn();
+  const setSpeakerMuted = vi.fn();
+  const setSpeakerVolume = vi.fn();
+  render(
+    <VoiceDock
+      actions={{
+        end,
+        pause: noop,
+        setMicrophoneMuted,
+        setSpeakerMuted,
+        setSpeakerVolume,
+      }}
+      assistantBusy={false}
+      canReadFullResponse={false}
+      canRepeatQuestion={false}
+      canTakeTurn={false}
+      collapsed={false}
+      indicator={<span />}
+      microphoneMuted={false}
+      onStop={noop}
+      onCollapsedToggle={collapse}
+      phase="connected"
+      speakerMuted={false}
+      speakerVolume={1}
+    />,
+  );
+  expect(screen.getByText("Connected")).toBeTruthy();
+  const microphone = screen.getByRole("button", { name: "Mute microphone" });
+  expect(microphone).not.toBeNull();
+  expect(screen.queryByRole("button", { name: "Your turn" })).toBeNull();
+  fireEvent.click(screen.getByRole("button", { name: "Hide conversation" }));
+  expect(collapse).toHaveBeenCalledOnce();
+  fireEvent.click(microphone);
+  expect(setMicrophoneMuted).toHaveBeenCalledWith(true);
+
+  fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
+  expect(
+    await screen.findByRole("button", { name: "Mute speaker" }),
+  ).toBeTruthy();
+  expect(
+    screen
+      .getByRole("slider", { name: "Speaker volume" })
+      .getAttribute("aria-valuenow"),
+  ).toBe("100");
+  expect(screen.queryByRole("button", { name: "Repeat question" })).toBeNull();
+  expect(screen.queryByRole("button", { name: "Read full reply" })).toBeNull();
+  expect(
+    screen.queryByRole("checkbox", { name: "Allow interruptions" }),
+  ).toBeNull();
+  expect(
+    microphone.closest('[data-scope="popover"][data-part="content"]'),
+  ).toBeNull();
+
+  fireEvent.click(screen.getByRole("button", { name: "End voice mode" }));
+  expect(end).toHaveBeenCalledOnce();
+});
+
+test("keeps crowded Voice actions fixed while status content can shrink", () => {
+  render(
+    <VoiceDock
+      actions={{
+        audioSettings: {
+          refreshDevices: noop,
+          requestSpeaker: noop,
+          setMicrophoneDevice: noop,
+          setSpeakerDevice: noop,
+          setVoice: noop,
+          stopVoicePreview: noop,
+        },
+        end: noop,
+        pause: noop,
+        retryPlayback: noop,
+        setMicrophoneMuted: noop,
+        setSpeakerMuted: noop,
+        setSpeakerVolume: noop,
+        takeTurn: noop,
+      }}
+      assistantBusy
+      canReadFullResponse={false}
+      canRepeatQuestion={false}
+      canRetryPlayback
+      canTakeTurn
+      collapsed={false}
+      indicator={<span data-testid="waveform" />}
+      microphoneMuted={false}
+      notice="Audio playback is blocked. Select Play voice audio to hear Live."
+      onCollapsedToggle={noop}
+      onStop={noop}
+      phase="speaking"
+      speakerMuted={false}
+      speakerVolume={1}
+    />,
+  );
+
+  const dock = screen.getByTestId("ai-voice-dock");
+  const getPart = (part: string) => {
+    const element = dock.querySelector<HTMLElement>(`[data-part="${part}"]`);
+    if (!element) throw new Error(`Missing Voice dock part: ${part}`);
+    return element;
+  };
+  const leftActions = getPart("left-actions");
+  const center = getPart("shrinkable-status");
+  const indicator = getPart("fixed-indicator");
+  const status = getPart("visible-status");
+  const rightActions = getPart("right-actions");
+  const liveStatus = getPart("live-status");
+
+  expect(dock.className).toContain("d_grid");
+  expect(dock.className).toContain("grid-tc_[auto_minmax(0,_1fr)_auto]");
+  expect(leftActions.className).toContain("flex-sh_0");
+  expect(rightActions.className).toContain("flex-sh_0");
+  expect(center.className).toContain("min-w_[0]");
+  expect(status.className).toContain("min-w_[0]");
+  expect(indicator.className).toContain("flex-sh_1");
+  expect(indicator.className).toContain("min-w_[32px]");
+  expect(status.className).toContain("ov_hidden");
+  expect(status.className).toContain("tov_ellipsis");
+  expect(within(indicator).getByTestId("waveform")).toBeTruthy();
+  expect(liveStatus.textContent).toBe(
+    "Voice status: Audio playback is blocked. Select Play voice audio to hear Live.",
+  );
+});
+
+test("offers a user-gesture retry while session audio is blocked", () => {
+  const retryPlayback = vi.fn();
+  const commonProps = {
+    actions: { end: noop, pause: noop, retryPlayback },
+    assistantBusy: false,
+    canReadFullResponse: false,
+    canRepeatQuestion: false,
+    canTakeTurn: false,
+    collapsed: false,
+    indicator: <span />,
+    microphoneMuted: false,
+    notice: "Audio playback is blocked. Select Play voice audio to hear Live.",
+    onCollapsedToggle: noop,
+    onStop: noop,
+    phase: "connected" as const,
+    speakerMuted: false,
+    speakerVolume: 1,
+  };
+  const rendered = render(
+    <VoiceDock {...commonProps} canRetryPlayback={true} />,
+  );
+
+  fireEvent.click(screen.getByRole("button", { name: "Play voice audio" }));
+  expect(retryPlayback).toHaveBeenCalledOnce();
+
+  rendered.rerender(<VoiceDock {...commonProps} canRetryPlayback={false} />);
+  expect(screen.queryByRole("button", { name: "Play voice audio" })).toBeNull();
+});
+
+test.each([
+  {
+    absentAction: "Resume voice mode",
+    phase: "error" as const,
+    recoveryAction: "Reconnect voice mode",
+  },
+  {
+    absentAction: "Reconnect voice mode",
+    phase: "paused" as const,
+    recoveryAction: "Resume voice mode",
+  },
+])(
+  "keeps direct microphone beside $phase recovery controls",
+  ({ absentAction, phase, recoveryAction }) => {
+    render(
+      <VoiceDock
+        actions={{
+          end: vi.fn(),
+          pause: noop,
+          reconnect: vi.fn(),
+          resume: vi.fn(),
+          setMicrophoneMuted: vi.fn(),
+        }}
+        assistantBusy={false}
+        canReadFullResponse={false}
+        canRepeatQuestion={false}
+        canTakeTurn={false}
+        collapsed={false}
+        indicator={<span />}
+        microphoneMuted={false}
+        onCollapsedToggle={noop}
+        onStop={noop}
+        phase={phase}
+        speakerMuted={false}
+        speakerVolume={1}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: recoveryAction })).toBeTruthy();
+    expect(
+      screen.getByRole<HTMLButtonElement>("button", {
+        name: "Mute microphone",
+      }).disabled,
+    ).toBe(true);
+    expect(screen.queryByRole("button", { name: absentAction })).toBeNull();
+  },
+);
+
+test.each(["connecting", "error", "paused"] as const)(
+  "disables the direct microphone action while Voice is %s",
+  (phase) => {
+    const setMicrophoneMuted = vi.fn();
+    render(
+      <VoiceDock
+        actions={{
+          end: vi.fn(),
+          pause: noop,
+          setMicrophoneMuted,
+        }}
+        assistantBusy={false}
+        canReadFullResponse={false}
+        canRepeatQuestion={false}
+        canTakeTurn={false}
+        collapsed={false}
+        indicator={<span />}
+        microphoneMuted={false}
+        onCollapsedToggle={noop}
+        onStop={noop}
+        phase={phase}
+        speakerMuted={false}
+        speakerVolume={1}
+      />,
+    );
+
+    const microphone = screen.getByRole<HTMLButtonElement>("button", {
+      name: "Mute microphone",
+    });
+    expect(microphone.disabled).toBe(true);
+    fireEvent.click(microphone);
+    expect(setMicrophoneMuted).not.toHaveBeenCalled();
+  },
+);
+
+test.each(["listening", "thinking", "speaking"] as const)(
+  "keeps the direct microphone action functional while Voice is %s",
+  (phase) => {
+    const setMicrophoneMuted = vi.fn();
+    render(
+      <VoiceDock
+        actions={{
+          end: vi.fn(),
+          pause: noop,
+          setMicrophoneMuted,
+        }}
+        assistantBusy={false}
+        canReadFullResponse={false}
+        canRepeatQuestion={false}
+        canTakeTurn={false}
+        collapsed={false}
+        indicator={<span />}
+        microphoneMuted={false}
+        onCollapsedToggle={noop}
+        onStop={noop}
+        phase={phase}
+        speakerMuted={false}
+        speakerVolume={1}
+      />,
+    );
+
+    const microphone = screen.getByRole<HTMLButtonElement>("button", {
+      name: "Mute microphone",
+    });
+    expect(microphone.disabled).toBe(false);
+    fireEvent.click(microphone);
+    expect(setMicrophoneMuted).toHaveBeenCalledExactlyOnceWith(true);
+  },
+);
+
+test.each(["connecting", "error"] as const)(
+  "disables only speaker controls in Audio options while Voice is %s",
+  async (phase) => {
+    const setInterruptionBySpeaking = vi.fn();
+    const setSpeakerMuted = vi.fn();
+    const setSpeakerVolume = vi.fn();
+    render(
+      <VoiceDock
+        actions={{
+          end: vi.fn(),
+          pause: noop,
+          readFullResponse: vi.fn(),
+          repeatQuestion: vi.fn(),
+          setInterruptionBySpeaking,
+          setSpeakerMuted,
+          setSpeakerVolume,
+        }}
+        assistantBusy={false}
+        canReadFullResponse={false}
+        canRepeatQuestion={false}
+        canTakeTurn={false}
+        collapsed={false}
+        indicator={<span />}
+        interruptionBySpeaking
+        microphoneMuted={false}
+        onCollapsedToggle={noop}
+        onStop={noop}
+        phase={phase}
+        speakerMuted={false}
+        speakerVolume={1}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
+    const speakerMute = await screen.findByRole<HTMLButtonElement>("button", {
+      name: "Mute speaker",
+    });
+    const volume = screen.getByRole("slider", { name: "Speaker volume" });
+    expect(speakerMute.disabled).toBe(true);
+    expect(volume.getAttribute("aria-disabled")).toBe("true");
+    fireEvent.click(speakerMute);
+    volume.focus();
+    fireEvent.keyDown(volume, { key: "ArrowLeft" });
+    expect(setSpeakerMuted).not.toHaveBeenCalled();
+    expect(setSpeakerVolume).not.toHaveBeenCalled();
+
+    const interruption = screen.getByRole<HTMLInputElement>("checkbox", {
+      name: "Allow interruptions",
+    });
+    expect(interruption.disabled).toBe(false);
+    fireEvent.click(interruption);
+    await waitFor(() =>
+      expect(setInterruptionBySpeaking).toHaveBeenCalledExactlyOnceWith(false),
+    );
+    expect(
+      screen.getByRole<HTMLButtonElement>("button", {
+        name: "Repeat question",
+      }).disabled,
+    ).toBe(true);
+    expect(
+      screen.getByRole<HTMLButtonElement>("button", {
+        name: "Read full reply",
+      }).disabled,
+    ).toBe(true);
+  },
+);
+
+test.each(["listening", "thinking", "speaking", "paused"] as const)(
+  "keeps speaker controls callable while Voice is %s",
+  async (phase) => {
+    const setSpeakerMuted = vi.fn();
+    const setSpeakerVolume = vi.fn();
+    render(
+      <VoiceDock
+        actions={{
+          end: vi.fn(),
+          pause: noop,
+          setSpeakerMuted,
+          setSpeakerVolume,
+        }}
+        assistantBusy={false}
+        canReadFullResponse={false}
+        canRepeatQuestion={false}
+        canTakeTurn={false}
+        collapsed={false}
+        indicator={<span />}
+        microphoneMuted={false}
+        onCollapsedToggle={noop}
+        onStop={noop}
+        phase={phase}
+        speakerMuted={false}
+        speakerVolume={1}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
+    const speakerMute = await screen.findByRole<HTMLButtonElement>("button", {
+      name: "Mute speaker",
+    });
+    const volume = screen.getByRole("slider", { name: "Speaker volume" });
+    expect(speakerMute.disabled).toBe(false);
+    expect(volume.getAttribute("aria-disabled")).not.toBe("true");
+    fireEvent.click(speakerMute);
+    volume.focus();
+    fireEvent.keyDown(volume, { key: "ArrowLeft" });
+    expect(setSpeakerMuted).toHaveBeenCalledExactlyOnceWith(true);
+    await waitFor(() =>
+      expect(setSpeakerVolume).toHaveBeenCalledExactlyOnceWith(0.95),
+    );
+  },
+);
+
+test("shows the speed slider immediately with fine keyboard steps", async () => {
+  const setSpeed = vi.fn();
+  render(
+    <VoiceDock
+      actions={{
+        audioSettings: {
+          refreshDevices: vi.fn(),
+          requestSpeaker: vi.fn(),
+          setMicrophoneDevice: vi.fn(),
+          setSpeakerDevice: vi.fn(),
+          setSpeed,
+          setVoice: vi.fn(),
+        },
+        end: vi.fn(),
+        pause: noop,
+      }}
+      audioSettings={{
+        activeVoice: "alloy",
+        voice: "alloy",
+        voices: [{ value: "alloy", text: "Alloy" }],
+        speed: 1,
+        devices: {
+          microphones: [],
+          speakers: [],
+          microphoneId: "",
+          speakerId: "",
+          canSelectSpeaker: false,
+          canRequestSpeaker: false,
+          busy: false,
+          message: null,
+        },
+      }}
+      assistantBusy={false}
+      canReadFullResponse={false}
+      canRepeatQuestion={false}
+      canTakeTurn={false}
+      collapsed={false}
+      indicator={<span />}
+      microphoneMuted={false}
+      onCollapsedToggle={noop}
+      onStop={noop}
+      phase="connected"
+      speakerMuted={false}
+      speakerVolume={1}
+    />,
+  );
+
+  fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
+  const speed = await screen.findByRole("slider", { name: "Speed" });
+  expect(speed.getAttribute("aria-valuemin")).toBe("0.25");
+  expect(speed.getAttribute("aria-valuemax")).toBe("1.5");
+  expect(speed.getAttribute("aria-valuenow")).toBe("1");
+  expect(screen.getByText("1.00×")).not.toBeNull();
+  expect(screen.queryByText("Next reply")).toBeNull();
+
+  speed.focus();
+  fireEvent.keyDown(speed, { key: "ArrowRight" });
+  await waitFor(() => expect(setSpeed).toHaveBeenCalledExactlyOnceWith(1.05));
+});
+
+test("keeps voice visible while toggling devices and refreshes devices when opened", async () => {
+  const refreshDevices = vi.fn();
+  const stopVoicePreview = vi.fn();
+  const setVoice = vi.fn();
+  render(
+    <VoiceDock
+      actions={{
+        audioSettings: {
+          refreshDevices,
+          stopVoicePreview,
+          requestSpeaker: vi.fn(),
+          setMicrophoneDevice: vi.fn(),
+          setSpeakerDevice: vi.fn(),
+          setVoice,
+        },
+        end: vi.fn(),
+        pause: noop,
+        setSpeakerVolume: vi.fn(),
+      }}
+      audioSettings={{
+        activeVoice: "alloy",
+        voice: "verse",
+        voicePreview: "playing",
+        voices: [
+          { value: "alloy", text: "Alloy" },
+          { value: "verse", text: "Verse" },
+        ],
+        devices: {
+          microphones: [],
+          speakers: [],
+          microphoneId: "",
+          speakerId: "",
+          canSelectSpeaker: false,
+          canRequestSpeaker: false,
+          busy: false,
+          message: "Allow microphone access to list devices.",
+        },
+      }}
+      assistantBusy={false}
+      canReadFullResponse={false}
+      canRepeatQuestion={false}
+      canTakeTurn={false}
+      collapsed={false}
+      indicator={<span />}
+      microphoneMuted={true}
+      onCollapsedToggle={noop}
+      onStop={noop}
+      phase="connected"
+      speakerMuted={false}
+      speakerVolume={0.65}
+    />,
+  );
+
+  fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
+  expect(
+    (
+      await screen.findByRole("slider", { name: "Speaker volume" })
+    ).getAttribute("aria-valuenow"),
+  ).toBe("65");
+  expect(screen.getByRole("combobox", { name: "Voice" })).not.toBeNull();
+  expect(screen.getByText("Voice preview playing").getAttribute("role")).toBe(
+    "status",
+  );
+  expect(
+    screen.queryByRole("button", { name: /play preview|pause preview/i }),
+  ).toBeNull();
+  const nativeVoice = document.querySelector("select");
+  if (!nativeVoice) throw new Error("Missing native voice field");
+  fireEvent.change(nativeVoice, { target: { value: "alloy" } });
+  await waitFor(() =>
+    expect(setVoice).toHaveBeenCalledExactlyOnceWith("alloy"),
+  );
+  expect(screen.queryByRole("button", { name: /^Voice/ })).toBeNull();
+  const devicesToggle = screen.getByRole("button", { name: "Devices" });
+  expect(devicesToggle.getAttribute("aria-expanded")).toBe("false");
+  expect(screen.queryByRole("combobox", { name: "Microphone" })).toBeNull();
+  expect(screen.queryByRole("combobox", { name: "Speaker" })).toBeNull();
+  expect(screen.queryByText(/Applies next session/)).toBeNull();
+  expect(
+    screen.getByRole("button", { name: "About voice selection" }),
+  ).toBeTruthy();
+  expect(screen.getByRole("combobox", { name: "Voice" })).not.toBeNull();
+  expect(
+    screen.queryByText(
+      "Speaking speed is not available with this voice provider.",
+    ),
+  ).toBeNull();
+  expect(screen.queryByRole("button", { name: "Real-time" })).toBeNull();
+  expect(screen.queryByRole("slider", { name: "Speed" })).toBeNull();
+
+  expect(refreshDevices).toHaveBeenCalledOnce();
+  fireEvent.click(devicesToggle);
+  expect(devicesToggle.getAttribute("aria-expanded")).toBe("true");
+  expect(screen.getByRole("combobox", { name: "Voice" })).not.toBeNull();
+  expect(screen.getByRole("combobox", { name: "Microphone" }).textContent).toBe(
+    "System default",
+  );
+  expect(screen.getByRole("combobox", { name: "Speaker" }).textContent).toBe(
+    "System default",
+  );
+  expect(
+    screen.getByRole<HTMLButtonElement>("combobox", { name: "Speaker" })
+      .disabled,
+  ).toBe(true);
+  expect(
+    screen.getByText("System default — change output in your system settings."),
+  ).not.toBeNull();
+  expect(
+    screen
+      .getByText("Allow microphone access to list devices.")
+      .getAttribute("role"),
+  ).toBe("status");
+  expect(screen.queryByRole("button", { name: "Refresh devices" })).toBeNull();
+  expect(
+    screen.queryByText("Disconnected devices switch to system default."),
+  ).toBeNull();
+  fireEvent.click(devicesToggle);
+  expect(devicesToggle.getAttribute("aria-expanded")).toBe("false");
+  expect(screen.queryByRole("combobox", { name: "Microphone" })).toBeNull();
+  expect(screen.queryByRole("combobox", { name: "Speaker" })).toBeNull();
+  expect(screen.getByRole("combobox", { name: "Voice" })).not.toBeNull();
+  fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
+  expect(refreshDevices).toHaveBeenCalledOnce();
+  expect(stopVoicePreview).toHaveBeenCalledOnce();
+  fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
+  expect(refreshDevices).toHaveBeenCalledTimes(2);
+});
+
+test("gates voice previews and hides only ordinary status text", async () => {
+  const stopVoicePreview = vi.fn();
+  const setMicrophoneMuted = vi.fn();
+  const setVoice = vi.fn();
+  const dock = (
+    phase: "listening" | "speaking" | "muted" | "connecting",
+    microphoneMuted: boolean,
+  ) => (
+    <VoiceDock
+      actions={{
+        audioSettings: {
+          refreshDevices: vi.fn(),
+          stopVoicePreview,
+          requestSpeaker: vi.fn(),
+          setMicrophoneDevice: vi.fn(),
+          setSpeakerDevice: vi.fn(),
+          setVoice,
+        },
+        end: noop,
+        pause: noop,
+        setSpeakerVolume: noop,
+        setMicrophoneMuted,
+      }}
+      audioSettings={{
+        activeVoice: "alloy",
+        voice: "alloy",
+        voices: [
+          { value: "alloy", text: "Alloy" },
+          { value: "verse", text: "Verse" },
+        ],
+        devices: {
+          microphones: [],
+          speakers: [],
+          microphoneId: "",
+          speakerId: "",
+          canSelectSpeaker: false,
+          canRequestSpeaker: false,
+          busy: false,
+          message: null,
+        },
+      }}
+      assistantBusy={false}
+      canReadFullResponse={false}
+      canRepeatQuestion={false}
+      canTakeTurn={false}
+      collapsed={false}
+      indicator={<span data-testid="waveform" />}
+      microphoneMuted={microphoneMuted}
+      onCollapsedToggle={noop}
+      onStop={noop}
+      phase={phase}
+      speakerMuted={false}
+      speakerVolume={1}
+    />
+  );
+  const { rerender } = render(dock("listening", false));
+  fireEvent.click(screen.getByRole("button", { name: "Audio options" }));
+  const voice = await screen.findByRole<HTMLButtonElement>("combobox", {
+    name: "Voice",
+  });
+  expect(voice.disabled).toBe(false);
+  const nativeVoice = document.querySelector("select");
+  if (!nativeVoice) throw new Error("Missing native voice field");
+  fireEvent.change(nativeVoice, { target: { value: "verse" } });
+  await waitFor(() =>
+    expect(setVoice).toHaveBeenCalledExactlyOnceWith("verse"),
+  );
+  expect(screen.queryByText("Mute your mic to preview.")).toBeNull();
+  expect(voice.getAttribute("aria-description")).toContain(
+    "Mute your mic to preview.",
+  );
+  const toggle = screen.getByRole("checkbox", { name: "Show status text" });
+  expect((toggle as HTMLInputElement).checked).toBe(true);
+  fireEvent.click(screen.getByText("Show status text"));
+  await waitFor(() =>
+    expect(screen.queryByText("Listening", { exact: true })).toBeNull(),
+  );
+  expect(screen.getByRole("status", { name: "Voice status" }).textContent).toBe(
+    "Voice status: Listening",
+  );
+  expect(screen.getByTestId("waveform")).not.toBeNull();
+
+  rerender(dock("speaking", true));
+  expect(voice.disabled).toBe(false);
+  expect(screen.queryByText("Wait for the agent to finish.")).toBeNull();
+  expect(voice.getAttribute("aria-description")).toContain(
+    "Wait for the agent to finish.",
+  );
+  expect(screen.queryByText("Speaking", { exact: true })).toBeNull();
+  rerender(dock("muted", true));
+  expect(voice.disabled).toBe(false);
+  expect(screen.getByText("Muted", { exact: true })).not.toBeNull();
+  stopVoicePreview.mockClear();
+  fireEvent.click(screen.getByRole("button", { name: "Unmute microphone" }));
+  expect(stopVoicePreview).toHaveBeenCalledOnce();
+  expect(setMicrophoneMuted).toHaveBeenCalledExactlyOnceWith(false);
+  expect(stopVoicePreview.mock.invocationCallOrder[0]).toBeLessThan(
+    setMicrophoneMuted.mock.invocationCallOrder[0]!,
+  );
+
+  rerender(dock("connecting", true));
+  expect(voice.disabled).toBe(false);
+  setVoice.mockClear();
+  fireEvent.change(nativeVoice, { target: { value: "verse" } });
+  await waitFor(() =>
+    expect(setVoice).toHaveBeenCalledExactlyOnceWith("verse"),
+  );
+  expect(screen.getByText("Connecting", { exact: true })).not.toBeNull();
+});
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/voice-dock/audio-popover/settings.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/voice-dock/audio-popover/settings.test.tsx
index 152a6939fab..19760a82082 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/voice-dock/audio-popover/settings.test.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/voice-dock/audio-popover/settings.test.tsx
@@ -115,3 +115,116 @@ test("keeps voice guidance in a dismissible information popover", async () => {
   fireEvent.keyDown(dialog, { key: "Escape" });
   await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
 });
+
+test("summarizes selected audio devices without exposing device IDs", () => {
+  const actions = {
+    refreshDevices: noop,
+    requestSpeaker: noop,
+    setMicrophoneDevice: noop,
+    setSpeakerDevice: noop,
+    setVoice: noop,
+  };
+  const settings = {
+    activeVoice: "alloy",
+    voice: "alloy",
+    voices: [{ value: "alloy", text: "Alloy" }],
+    devices: {
+      microphones: [{ value: "mic-1", text: "Desk microphone" }],
+      speakers: [{ value: "speaker-1", text: "Headphones" }],
+      microphoneId: "mic-1",
+      speakerId: "speaker-1",
+      canSelectSpeaker: true,
+      canRequestSpeaker: false,
+      busy: false,
+      message: null,
+    },
+  };
+  const { rerender } = render(
+    <AudioSettings
+      actions={actions}
+      disabled={false}
+      previewDisabledReason={null}
+      settings={settings}
+    />,
+  );
+  expect(screen.getByRole("button", { name: "Devices" }).textContent).toContain(
+    "Desk microphone · Headphones",
+  );
+  expect(screen.queryByRole("combobox", { name: "Microphone" })).toBeNull();
+  rerender(
+    <AudioSettings
+      actions={actions}
+      disabled={false}
+      previewDisabledReason={null}
+      settings={{
+        ...settings,
+        devices: {
+          ...settings.devices,
+          microphoneId: "",
+          speakerId: "disconnected-private-id",
+        },
+      }}
+    />,
+  );
+  expect(screen.getByRole("button", { name: "Devices" }).textContent).toContain(
+    "System default · Unavailable speaker",
+  );
+  expect(screen.queryByText(/disconnected-private-id/u)).toBeNull();
+});
+
+test("stops a voice preview only when audio settings unmount", () => {
+  const initialStopVoicePreview = vi.fn();
+  const latestStopVoicePreview = vi.fn();
+  const actions = {
+    refreshDevices: vi.fn(),
+    requestSpeaker: vi.fn(),
+    setMicrophoneDevice: vi.fn(),
+    setSpeakerDevice: vi.fn(),
+    setVoice: vi.fn(),
+  };
+  const settings = {
+    activeVoice: "alloy",
+    voice: "alloy",
+    voices: [{ value: "alloy", text: "Alloy" }],
+    devices: {
+      microphones: [],
+      speakers: [],
+      microphoneId: "",
+      speakerId: "",
+      canSelectSpeaker: false,
+      canRequestSpeaker: false,
+      busy: false,
+      message: null,
+    },
+  };
+  const { rerender, unmount } = render(
+    <AudioSettings
+      actions={{
+        ...actions,
+        stopVoicePreview: initialStopVoicePreview,
+      }}
+      disabled={false}
+      previewDisabledReason={null}
+      settings={settings}
+    />,
+  );
+
+  rerender(
+    <AudioSettings
+      actions={{
+        ...actions,
+        stopVoicePreview: latestStopVoicePreview,
+      }}
+      disabled={false}
+      previewDisabledReason={null}
+      settings={settings}
+    />,
+  );
+
+  expect(initialStopVoicePreview).not.toHaveBeenCalled();
+  expect(latestStopVoicePreview).not.toHaveBeenCalled();
+
+  unmount();
+  expect(initialStopVoicePreview).not.toHaveBeenCalled();
+  expect(latestStopVoicePreview).toHaveBeenCalledOnce();
+});