From ef15b14e463c29e03151ce6a4fb83e205dba2dad Mon Sep 17 00:00:00 2001
From: BenGSchulz <ben.schulz@uipath.com>
Date: Thu, 15 Oct 2026 11:58:46 -0700
Subject: [PATCH] feat(apollo-react): add the Wind chat markdown renderer

Render message bodies in the Wind chat with the apollo-wind Markdown
primitive: citations as Citation pills with hover preview, cited-range
highlighting and the citation-click pre-hook, resource tokens as inline
chips, a Sources list under replies, and code blocks with expand and an
opt-in sandboxed HTML preview.

Hoist the renderer-agnostic markdown logic into src/chat/headless and
switch Material to it: streamed content with chunk scheduling,
incomplete-token buffering and fake streams, the cited-range
highlighter, citation opening and the group sources.

MST-16564

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/apollo-react/src/chat/README.md      |   2 +-
 .../headless/hooks/use-citations.test.tsx     | 155 +++++++++
 .../src/chat/headless/hooks/use-citations.ts  |  82 +++++
 .../use-streamed-message-content.test.tsx     | 111 ++++++
 .../hooks/use-streamed-message-content.ts     | 151 ++++++++
 .../markdown/citation-highlight.test.ts       |  33 ++
 .../headless/markdown/citation-highlight.ts   |  99 ++++++
 .../chat/headless/markdown/citations.test.ts  |  85 +++++
 .../src/chat/headless/markdown/citations.ts   |  70 ++++
 .../headless/markdown/html-preview.test.ts    |  21 ++
 .../chat/headless/markdown/html-preview.ts    |  21 ++
 .../markdown/incomplete-tokens.test.ts        |  19 +
 .../headless/markdown/incomplete-tokens.ts    |  43 +++
 .../apollo-react/src/chat/locales/en.json     |   7 +-
 .../chat/stories/chat-playground.stories.tsx  |   8 +
 .../src/chat/stories/chat-playground.test.tsx |  45 ++-
 .../src/chat/stories/chat-playground.tsx      |  58 ++-
 .../src/chat/stories/chat-story-fixtures.ts   | 108 ++++++
 .../src/chat/stories/chat-story-scenarios.ts  |  31 +-
 .../src/chat/wind/WindChatRenderer.test.tsx   |  54 +++
 .../src/chat/wind/WindChatRenderer.tsx        |  33 +-
 .../src/chat/wind/common/dialog-container.ts  |  10 +
 .../src/chat/wind/messages/chat-message.tsx   |   2 +
 .../messages/message-list-scroll.test.tsx     |   8 +-
 .../chat/wind/messages/message-sources.tsx    |  55 +++
 .../wind/renderers/citation-highlights.ts     |  48 +++
 .../wind/renderers/code-block-actions.tsx     | 140 ++++++++
 .../src/chat/wind/renderers/index.ts          |   6 +-
 .../chat/wind/renderers/markdown-citation.tsx |  68 ++++
 .../wind/renderers/markdown-renderer.test.tsx | 329 ++++++++++++++++++
 .../chat/wind/renderers/markdown-renderer.tsx |  80 +++++
 .../wind/renderers/markdown-resource-chip.tsx |  16 +
 .../src/chat/wind/renderers/text-renderer.tsx |  30 --
 .../message/chat-message-content.tsx          |   4 +-
 .../components/message/markdown/citation.tsx  | 174 ++-------
 .../components/message/markdown/code.tsx      |   7 +-
 .../components/message/markdown/markdown.tsx  | 178 +---------
 .../message/sources/chat-sources.tsx          |  99 +-----
 38 files changed, 2013 insertions(+), 477 deletions(-)
 create mode 100644 packages/apollo-react/src/chat/headless/hooks/use-citations.test.tsx
 create mode 100644 packages/apollo-react/src/chat/headless/hooks/use-citations.ts
 create mode 100644 packages/apollo-react/src/chat/headless/hooks/use-streamed-message-content.test.tsx
 create mode 100644 packages/apollo-react/src/chat/headless/hooks/use-streamed-message-content.ts
 create mode 100644 packages/apollo-react/src/chat/headless/markdown/citation-highlight.test.ts
 create mode 100644 packages/apollo-react/src/chat/headless/markdown/citation-highlight.ts
 create mode 100644 packages/apollo-react/src/chat/headless/markdown/citations.test.ts
 create mode 100644 packages/apollo-react/src/chat/headless/markdown/citations.ts
 create mode 100644 packages/apollo-react/src/chat/headless/markdown/html-preview.test.ts
 create mode 100644 packages/apollo-react/src/chat/headless/markdown/html-preview.ts
 create mode 100644 packages/apollo-react/src/chat/headless/markdown/incomplete-tokens.test.ts
 create mode 100644 packages/apollo-react/src/chat/headless/markdown/incomplete-tokens.ts
 create mode 100644 packages/apollo-react/src/chat/wind/common/dialog-container.ts
 create mode 100644 packages/apollo-react/src/chat/wind/messages/message-sources.tsx
 create mode 100644 packages/apollo-react/src/chat/wind/renderers/citation-highlights.ts
 create mode 100644 packages/apollo-react/src/chat/wind/renderers/code-block-actions.tsx
 create mode 100644 packages/apollo-react/src/chat/wind/renderers/markdown-citation.tsx
 create mode 100644 packages/apollo-react/src/chat/wind/renderers/markdown-renderer.test.tsx
 create mode 100644 packages/apollo-react/src/chat/wind/renderers/markdown-renderer.tsx
 create mode 100644 packages/apollo-react/src/chat/wind/renderers/markdown-resource-chip.tsx
 delete mode 100644 packages/apollo-react/src/chat/wind/renderers/text-renderer.tsx

diff --git a/packages/apollo-react/src/chat/README.md b/packages/apollo-react/src/chat/README.md
index 0e53708e2b..6a47cb39b3 100644
--- a/packages/apollo-react/src/chat/README.md
+++ b/packages/apollo-react/src/chat/README.md
@@ -31,7 +31,7 @@ The Material renderer depends on this folder, never the other way round.
 
 ## Wind renderer notes
 
-- The root element carries the chat theme as a class (`light`, `dark`, `light-hc`, `dark-hc`), so it themes itself regardless of the host's body class. Menus and tooltips portal inside that root, or into a themed node inside `portalContainer` when the host passes one.
+- The root element carries the chat theme as a class (`light`, `dark`, `light-hc`, `dark-hc`, `future-light`, `future-dark`), so it themes itself regardless of the host's body class. Menus, tooltips and hover cards portal inside that root, or into a themed node inside `portalContainer` when the host passes one. Modal dialogs (code block expand and HTML preview) always portal to that themed node, placed in `portalContainer` or else `document.body` at z-index 1300 (Material's modal level), so they cover the page rather than the chat panel.
 - `spacing.compactMode` sets `data-density="compact"` on the root.
 - `icon` values on custom header actions and message actions are renderer-specific: Material takes Material Icons names, Wind takes lucide names (kebab-case such as `file-text`, or the PascalCase export name `FileText`). Wind loads each icon lazily through `lucide-react/dynamic` and shows a neutral box for names it cannot resolve.
 
diff --git a/packages/apollo-react/src/chat/headless/hooks/use-citations.test.tsx b/packages/apollo-react/src/chat/headless/hooks/use-citations.test.tsx
new file mode 100644
index 0000000000..118c730e06
--- /dev/null
+++ b/packages/apollo-react/src/chat/headless/hooks/use-citations.test.tsx
@@ -0,0 +1,155 @@
+import { act, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  type AutopilotChatMessage,
+  AutopilotChatPreHookAction,
+  AutopilotChatService,
+} from '../../service';
+import { AutopilotChatServiceProvider } from '../providers/chat-service.provider';
+import { useMessageSources, useOpenCitation } from './use-citations';
+
+let instanceCounter = 0;
+
+const createService = () =>
+  AutopilotChatService.Instantiate({ instanceName: `citations-${++instanceCounter}` });
+
+const wrap = (service: AutopilotChatService, children: React.ReactNode) => (
+  <AutopilotChatServiceProvider chatServiceInstance={service}>
+    {children}
+  </AutopilotChatServiceProvider>
+);
+
+describe('useOpenCitation', () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it('asks the citation-click pre-hook, then opens the citation unless it declines', async () => {
+    const service = createService();
+    const open = vi.spyOn(window, 'open').mockReturnValue(null);
+    const hook = vi.fn().mockResolvedValueOnce(true).mockResolvedValueOnce(false);
+    service.setPreHook(AutopilotChatPreHookAction.CitationClick, hook);
+    let openCitation: ReturnType<typeof useOpenCitation> | undefined;
+    const Probe = () => {
+      openCitation = useOpenCitation();
+      return null;
+    };
+    render(wrap(service, <Probe />));
+    const pdf = { id: 2, title: 'Guide', download_url: 'https://a.test/g.pdf', page_number: 3 };
+
+    await act(async () => openCitation?.(pdf));
+    await act(async () => openCitation?.(pdf));
+
+    expect(hook).toHaveBeenCalledWith({ citation: pdf });
+    expect(open).toHaveBeenCalledTimes(1);
+    expect(open).toHaveBeenCalledWith(
+      'https://a.test/g.pdf#page=3',
+      '_blank',
+      'noopener,noreferrer'
+    );
+  });
+});
+
+describe('useOpenCitation with unsafe URLs', () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it('still asks the pre-hook with the unchanged citation but never opens a javascript: URL', async () => {
+    const service = createService();
+    const open = vi.spyOn(window, 'open').mockReturnValue(null);
+    const hook = vi.fn().mockResolvedValue(true);
+    service.setPreHook(AutopilotChatPreHookAction.CitationClick, hook);
+    let openCitation: ReturnType<typeof useOpenCitation> | undefined;
+    const Probe = () => {
+      openCitation = useOpenCitation();
+      return null;
+    };
+    render(wrap(service, <Probe />));
+    const unsafe = { id: 1, title: 'Bad', url: 'javascript:alert(document.domain)' };
+
+    await act(async () => openCitation?.(unsafe));
+
+    expect(hook).toHaveBeenCalledWith({ citation: unsafe });
+    expect(open).not.toHaveBeenCalled();
+  });
+
+  it('opens an http URL and a relative PDF at its page', async () => {
+    const service = createService();
+    const open = vi.spyOn(window, 'open').mockReturnValue(null);
+    let openCitation: ReturnType<typeof useOpenCitation> | undefined;
+    const Probe = () => {
+      openCitation = useOpenCitation();
+      return null;
+    };
+    render(wrap(service, <Probe />));
+
+    await act(async () => openCitation?.({ id: 1, title: 'Web', url: 'http://a.test/page' }));
+    await act(async () =>
+      openCitation?.({ id: 2, title: 'Guide', download_url: '/files/g.pdf', page_number: 4 })
+    );
+
+    expect(open.mock.calls).toEqual([
+      ['http://a.test/page', '_blank', 'noopener,noreferrer'],
+      ['/files/g.pdf#page=4', '_blank', 'noopener,noreferrer'],
+    ]);
+  });
+});
+
+describe('useMessageSources', () => {
+  it('follows the group as streamed content parts add citations', () => {
+    const service = createService();
+    service.sendRequest({ content: 'q' });
+    service.sendResponse({
+      id: 's1',
+      stream: true,
+      widget: 'apollo-markdown-renderer',
+      created_at: '',
+      contentPartChunk: { index: 0, text: 'A' },
+    });
+    const message = service.getConversation().at(-1) as AutopilotChatMessage;
+    let sources: ReturnType<typeof useMessageSources> | undefined;
+    const Probe = () => {
+      sources = useMessageSources(message);
+      return null;
+    };
+    render(wrap(service, <Probe />));
+    expect(sources?.sources).toEqual([]);
+
+    act(() =>
+      service.sendResponse({
+        id: 's1',
+        stream: true,
+        done: true,
+        widget: 'apollo-markdown-renderer',
+        created_at: '',
+        contentPartChunk: {
+          index: 0,
+          text: '',
+          citation: { id: 1, title: 'Web', url: 'https://a.test' },
+        },
+      })
+    );
+
+    expect(sources?.sources).toEqual([{ id: 1, title: 'Web', url: 'https://a.test' }]);
+  });
+
+  it('waits for the rest of the group when the reply itself says more is coming', () => {
+    const service = createService();
+    service.sendRequest({ content: 'q' });
+    const cited = {
+      widget: 'apollo-markdown-renderer',
+      created_at: '',
+      contentParts: [{ text: 'A', citations: [{ id: 1, title: 'Web', url: 'https://a.test' }] }],
+    };
+    service.sendResponse({ ...cited, id: 'w1', shouldWaitForMoreMessages: true });
+    const message = service.getConversation().at(-1) as AutopilotChatMessage;
+    let sources: ReturnType<typeof useMessageSources> | undefined;
+    const Probe = () => {
+      sources = useMessageSources(message);
+      return null;
+    };
+    render(wrap(service, <Probe />));
+    expect(sources?.isWaitingForMoreMessages).toBe(true);
+
+    act(() => service.sendResponse({ ...cited, id: 'w2' }));
+    expect(sources?.isWaitingForMoreMessages).toBe(false);
+  });
+});
diff --git a/packages/apollo-react/src/chat/headless/hooks/use-citations.ts b/packages/apollo-react/src/chat/headless/hooks/use-citations.ts
new file mode 100644
index 0000000000..b581320088
--- /dev/null
+++ b/packages/apollo-react/src/chat/headless/hooks/use-citations.ts
@@ -0,0 +1,82 @@
+import React from 'react';
+
+import {
+  AutopilotChatEvent,
+  type AutopilotChatMessage,
+  AutopilotChatPreHookAction,
+  type PdfCitation,
+  type UrlCitation,
+} from '../../service';
+import { getCitationUrl, getGroupCitations } from '../markdown/citations';
+import { useChatService } from '../providers/chat-service.provider';
+
+/**
+ * Opens a citation as both renderers do: the `citation-click` pre-hook gets `{ citation }` and, if
+ * it allows, the citation's URL opens in a new tab. A URL that is not http(s) or relative is never
+ * opened, but the hook still runs with the unchanged citation so a host can handle it.
+ */
+export function useOpenCitation() {
+  const chatService = useChatService();
+
+  return React.useCallback(
+    (citation: UrlCitation | PdfCitation) => {
+      if (!chatService) {
+        return;
+      }
+
+      chatService
+        .getPreHook(AutopilotChatPreHookAction.CitationClick)({ citation })
+        .then((proceed) => {
+          const url = getCitationUrl(citation);
+          if (proceed && url) {
+            window.open(url, '_blank', 'noopener,noreferrer');
+          }
+        });
+    },
+    [chatService]
+  );
+}
+
+/**
+ * The sources of a message's group, read from the service so streamed content parts count, and
+ * whether the host said more messages of the group are coming (the list waits for them).
+ */
+export function useMessageSources(message: AutopilotChatMessage) {
+  const chatService = useChatService();
+  const groupId = message.groupId ?? '';
+  const [sources, setSources] = React.useState<Array<UrlCitation | PdfCitation>>(() =>
+    getGroupCitations(chatService?.getMessagesInGroup(groupId) ?? [])
+  );
+  // From the message too: it can mount from the very Response that carries the flag.
+  const [isWaitingForMoreMessages, setIsWaitingForMoreMessages] = React.useState(
+    !!message.shouldWaitForMoreMessages
+  );
+
+  React.useEffect(() => {
+    if (!chatService) {
+      return;
+    }
+
+    const refresh = () => setSources(getGroupCitations(chatService.getMessagesInGroup(groupId)));
+    const unsubscribes = [
+      chatService.on(AutopilotChatEvent.Response, (response: AutopilotChatMessage) => {
+        if (response.groupId === groupId || response.id === message.id) {
+          refresh();
+          setIsWaitingForMoreMessages(!!response.shouldWaitForMoreMessages);
+        }
+      }),
+      chatService.on(AutopilotChatEvent.SendChunk, (chunk: AutopilotChatMessage) => {
+        if (chunk.groupId === groupId || chunk.id === message.id) {
+          refresh();
+        }
+      }),
+      chatService.on(AutopilotChatEvent.StopResponse, refresh),
+    ];
+
+    return () => {
+      for (const unsubscribe of unsubscribes) unsubscribe();
+    };
+  }, [chatService, message.id, groupId]);
+
+  return { sources, isWaitingForMoreMessages };
+}
diff --git a/packages/apollo-react/src/chat/headless/hooks/use-streamed-message-content.test.tsx b/packages/apollo-react/src/chat/headless/hooks/use-streamed-message-content.test.tsx
new file mode 100644
index 0000000000..cab0cdf2d9
--- /dev/null
+++ b/packages/apollo-react/src/chat/headless/hooks/use-streamed-message-content.test.tsx
@@ -0,0 +1,111 @@
+import { act, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { type AutopilotChatMessage, AutopilotChatService } from '../../service';
+import { AutopilotChatServiceProvider } from '../providers/chat-service.provider';
+import { AutopilotStreamingProvider } from '../providers/streaming-provider';
+import { useStreamedMessageContent } from './use-streamed-message-content';
+
+let instanceCounter = 0;
+let latest: ReturnType<typeof useStreamedMessageContent> | undefined;
+
+function Probe({ message }: { message: AutopilotChatMessage }) {
+  latest = useStreamedMessageContent(message);
+  return null;
+}
+
+const reply = (extra: Partial<AutopilotChatMessage> = {}) => ({
+  widget: 'apollo-markdown-renderer',
+  created_at: '',
+  ...extra,
+});
+
+function setup(first: Partial<AutopilotChatMessage>) {
+  const service = AutopilotChatService.Instantiate({
+    instanceName: `streamed-content-${++instanceCounter}`,
+  });
+  service.sendResponse(reply(first));
+  const message = service.getConversation()[0] as AutopilotChatMessage;
+  render(
+    <AutopilotChatServiceProvider chatServiceInstance={service}>
+      <AutopilotStreamingProvider>
+        <Probe message={message} />
+      </AutopilotStreamingProvider>
+    </AutopilotChatServiceProvider>
+  );
+  return service;
+}
+
+describe('useStreamedMessageContent', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it('renders content parts as citation markup', () => {
+    setup({
+      id: 'p1',
+      content: 'Sky',
+      contentParts: [{ text: 'Sky', citations: [{ id: 1, title: 'Web', url: 'https://a.test' }] }],
+    });
+
+    expect(latest?.content).toMatch(/^\[\[cite-start:.+\]\]Sky\[\[cite-end\]\]$/);
+  });
+
+  it('holds back a resource token until it closes, and flushes on done', () => {
+    const now = vi.spyOn(Date, 'now');
+    const service = setup({ id: 's1', content: 'Use ', stream: true });
+
+    now.mockReturnValue(1_000);
+    act(() =>
+      service.sendResponse(
+        reply({ id: 's1', content: 'the [[resource-token:{"id":', stream: true })
+      )
+    );
+    expect(latest?.content).toBe('Use the ');
+
+    now.mockReturnValue(2_000);
+    act(() =>
+      service.sendResponse(
+        reply({ id: 's1', content: '"a","type":"v","displayName":"A"}]] now', stream: true })
+      )
+    );
+    expect(latest?.content).toBe(
+      'Use the [[resource-token:{"id":"a","type":"v","displayName":"A"}]] now'
+    );
+
+    // Within 50ms of the last update a chunk waits; the closing chunk flushes it.
+    act(() => service.sendResponse(reply({ id: 's1', content: ' and', stream: true })));
+    expect(latest?.content).toMatch(/now$/);
+    act(() =>
+      service.sendResponse(reply({ id: 's1', content: ' done', stream: true, done: true }))
+    );
+    expect(latest?.content).toMatch(/now and done$/);
+  });
+
+  it('reveals a fake stream a few characters at a time', () => {
+    vi.useFakeTimers();
+    setup({ id: 'f1', content: 'A fake streamed reply', fakeStream: true });
+
+    expect(latest).toEqual({ content: '', fakeStreaming: true });
+    act(() => vi.advanceTimersByTime(50));
+    expect(latest?.content).toBe('A fake str');
+    act(() => vi.advanceTimersByTime(200));
+    expect(latest).toEqual({ content: 'A fake streamed reply', fakeStreaming: false });
+  });
+
+  it('shows the whole reply and stops revealing when the response is stopped', () => {
+    vi.useFakeTimers();
+    const clearInterval = vi.spyOn(globalThis, 'clearInterval');
+    const service = setup({ id: 'f2', content: 'A fake streamed reply', fakeStream: true });
+    act(() => vi.advanceTimersByTime(50));
+    expect(latest?.content).toBe('A fake str');
+
+    act(() => service.stopResponse());
+
+    expect(latest).toEqual({ content: 'A fake streamed reply', fakeStreaming: false });
+    expect(clearInterval).toHaveBeenCalled();
+    act(() => vi.advanceTimersByTime(500));
+    expect(latest?.content).toBe('A fake streamed reply');
+  });
+});
diff --git a/packages/apollo-react/src/chat/headless/hooks/use-streamed-message-content.ts b/packages/apollo-react/src/chat/headless/hooks/use-streamed-message-content.ts
new file mode 100644
index 0000000000..de8d161b98
--- /dev/null
+++ b/packages/apollo-react/src/chat/headless/hooks/use-streamed-message-content.ts
@@ -0,0 +1,151 @@
+import React from 'react';
+
+import { AutopilotChatEvent, type AutopilotChatMessage } from '../../service';
+import { contentPartsToMarkdown } from '../markdown/citation-parser';
+import { extractRenderableContent } from '../markdown/incomplete-tokens';
+import { useChatService } from '../providers/chat-service.provider';
+import { useStreaming } from '../providers/streaming-provider';
+
+const FAKE_STREAM_CHARS_COUNT = 10;
+const FAKE_STREAM_INTERVAL = 50;
+const CHUNK_QUEUE_PROCESS_INTERVAL = 50;
+
+/**
+ * The markdown source of a message as it streams: `contentParts` become citation markup, streamed
+ * chunks are applied at most every 50ms with incomplete tokens held back, and a `fakeStream`
+ * message is revealed a few characters at a time. Only the calling component re-renders on
+ * chunks, so a transcript is not re-rendered per chunk.
+ *
+ * @returns the source to render, and whether a fake stream is still revealing it
+ */
+export function useStreamedMessageContent(message: AutopilotChatMessage) {
+  // Only store message ID and content separately to minimize re-renders
+  const messageId = React.useRef(message.id);
+
+  // Generate initial content from contentParts if available, otherwise use message.content
+  const getInitialContent = React.useCallback(() => {
+    if (message.contentParts && message.contentParts.length > 0) {
+      return contentPartsToMarkdown(messageId.current, message.contentParts);
+    }
+    return message.content || '';
+  }, [message.contentParts, message.content]);
+
+  const [content, setContent] = React.useState(message.fakeStream ? '' : getInitialContent());
+  const [fakeStreaming, setFakeStreaming] = React.useState(!!message.fakeStream);
+  const chatService = useChatService();
+  const { setStreaming } = useStreaming();
+  const chunkQueue = React.useRef<string[]>([]);
+  const lastChunkQueueProcessedTime = React.useRef<number>(0);
+  const incompleteTokenBuffer = React.useRef<string>('');
+
+  // Update the message ID ref if a new message is passed
+  React.useEffect(() => {
+    let unsubscribeStopResponse: (() => void) | undefined;
+    let fakeStreamInterval: ReturnType<typeof setInterval> | undefined;
+
+    if (message.id !== messageId.current || !message.stream) {
+      messageId.current = message.id;
+      setContent(message.fakeStream ? '' : getInitialContent());
+    }
+
+    if (message.fakeStream) {
+      unsubscribeStopResponse = chatService.on(AutopilotChatEvent.StopResponse, () => {
+        clearInterval(fakeStreamInterval);
+        setStreaming(false);
+        setFakeStreaming(false);
+        setContent(getInitialContent());
+        chunkQueue.current = [];
+        incompleteTokenBuffer.current = '';
+        lastChunkQueueProcessedTime.current = 0;
+      });
+
+      const characters = getInitialContent().split('');
+      let charIndex = 0;
+
+      setStreaming(true);
+      setFakeStreaming(true);
+
+      fakeStreamInterval = setInterval(() => {
+        if (charIndex < characters.length) {
+          const chunkSize = FAKE_STREAM_CHARS_COUNT;
+          const endIndex = Math.min(charIndex + chunkSize, characters.length);
+          const chunk = characters.slice(charIndex, endIndex).join('');
+
+          setContent((prevContent) => `${prevContent}${chunk}`);
+
+          charIndex = endIndex;
+        } else {
+          clearInterval(fakeStreamInterval);
+          setStreaming(false);
+          setFakeStreaming(false);
+        }
+      }, FAKE_STREAM_INTERVAL);
+    }
+
+    return () => {
+      unsubscribeStopResponse?.();
+
+      if (fakeStreamInterval) {
+        clearInterval(fakeStreamInterval);
+        setFakeStreaming(false);
+      }
+    };
+  }, [message, chatService, setStreaming, getInitialContent]);
+
+  const handleSendChunk = React.useCallback((msg: AutopilotChatMessage) => {
+    if (msg.id !== messageId.current) {
+      return;
+    }
+
+    chunkQueue.current.push(msg.content);
+
+    if (Date.now() - lastChunkQueueProcessedTime.current > CHUNK_QUEUE_PROCESS_INTERVAL) {
+      lastChunkQueueProcessedTime.current = Date.now();
+
+      if (msg.contentParts) {
+        const fullContent = contentPartsToMarkdown(messageId.current, msg.contentParts);
+        const { renderable } = extractRenderableContent(fullContent);
+        setContent(renderable);
+        return;
+      }
+
+      // Combine buffered incomplete token with new chunks
+      const accumulated = incompleteTokenBuffer.current + chunkQueue.current.join('');
+      const { renderable, buffered } = extractRenderableContent(accumulated);
+
+      incompleteTokenBuffer.current = buffered;
+      chunkQueue.current = [];
+
+      if (renderable) {
+        setContent((prevContent) => `${prevContent}${renderable}`);
+      }
+    } else if (msg.done) {
+      lastChunkQueueProcessedTime.current = 0;
+
+      if (msg.contentParts) {
+        setContent(contentPartsToMarkdown(messageId.current, msg.contentParts));
+        return;
+      }
+
+      // Stream complete - flush everything including any incomplete tokens
+      const remaining = incompleteTokenBuffer.current + chunkQueue.current.join('');
+      incompleteTokenBuffer.current = '';
+      chunkQueue.current = [];
+      setContent((prevContent) => `${prevContent}${remaining}`);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (!chatService) {
+      return;
+    }
+
+    const unsubscribe = chatService.on(AutopilotChatEvent.SendChunk, handleSendChunk);
+
+    return () => {
+      unsubscribe();
+    };
+  }, [chatService, handleSendChunk]);
+
+  return { content, fakeStreaming };
+}
diff --git a/packages/apollo-react/src/chat/headless/markdown/citation-highlight.test.ts b/packages/apollo-react/src/chat/headless/markdown/citation-highlight.test.ts
new file mode 100644
index 0000000000..9a968d414a
--- /dev/null
+++ b/packages/apollo-react/src/chat/headless/markdown/citation-highlight.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+
+import { CHAT_CITATION_START } from '../../service';
+import { highlightCitedRange } from './citation-highlight';
+
+describe('highlightCitedRange', () => {
+  it('paints the cited text up to the citation and restores it after', () => {
+    const container = document.createElement('div');
+    container.innerHTML = `<p>Before <span class="${CHAT_CITATION_START}" data-citation-ids="1"></span>cited <strong>text</strong><sup data-citation-sup="true" id="c1">1</sup> after</p>`;
+    const original = container.innerHTML;
+    const citation = container.querySelector('#c1') as HTMLElement;
+
+    const clear = highlightCitedRange(1, citation, container, 'yellow');
+
+    const painted = [...container.querySelectorAll<HTMLElement>('[style*="yellow"]')].map(
+      (element) => element.textContent
+    );
+    expect(painted).toEqual(['cited ', 'text', 'text']);
+    expect(citation.style.backgroundColor).toBe('');
+
+    clear?.();
+    expect(container.innerHTML).toBe(original);
+  });
+
+  it('does nothing without a start marker for the id', () => {
+    const container = document.createElement('div');
+    container.innerHTML = '<p>text<sup id="c2">2</sup></p>';
+
+    expect(
+      highlightCitedRange(2, container.querySelector('#c2') as HTMLElement, container, 'yellow')
+    ).toBeUndefined();
+  });
+});
diff --git a/packages/apollo-react/src/chat/headless/markdown/citation-highlight.ts b/packages/apollo-react/src/chat/headless/markdown/citation-highlight.ts
new file mode 100644
index 0000000000..574bb3a86a
--- /dev/null
+++ b/packages/apollo-react/src/chat/headless/markdown/citation-highlight.ts
@@ -0,0 +1,99 @@
+import { CHAT_CITATION_START } from '../../service';
+
+// `citationPlugin` leaves a hidden start marker where each cited range begins; the citation
+// element ends it. Several ranges can cite the same id, so take the last start before this one.
+const getNearestStartMarker = (
+  id: number,
+  container: Element,
+  endEl: Element
+): HTMLElement | null => {
+  const candidates = Array.from(
+    container.querySelectorAll(`.${CHAT_CITATION_START}[data-citation-ids~="${id}"]`)
+  ) as HTMLElement[];
+  let nearest: HTMLElement | null = null;
+  for (const marker of candidates) {
+    const rel = marker.compareDocumentPosition(endEl);
+    const isBefore =
+      !!(rel & Node.DOCUMENT_POSITION_FOLLOWING) || !!(rel & Node.DOCUMENT_POSITION_CONTAINS);
+    if (isBefore) {
+      nearest = marker;
+    }
+  }
+  return nearest;
+};
+
+/**
+ * Paints the text a citation supports, from its start marker up to the citation element, inside
+ * `container` (the message). Elements in between get a background and bare text nodes are
+ * wrapped in spans; anything inside a `[data-citation-sup="true"]` element is left alone.
+ *
+ * @returns a function that removes the highlight, or `undefined` when there is no start marker
+ */
+export function highlightCitedRange(
+  id: number,
+  citation: HTMLElement,
+  container: Element,
+  color: string
+): (() => void) | undefined {
+  const startMarker = getNearestStartMarker(id, container, citation);
+  if (!startMarker) {
+    return undefined;
+  }
+
+  const highlightedElements: HTMLElement[] = [];
+  const wrappedTextSpans: HTMLElement[] = [];
+  const walker = document.createTreeWalker(
+    container,
+    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
+  );
+
+  while (walker.nextNode()) {
+    if (walker.currentNode === startMarker) {
+      break;
+    }
+  }
+
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+    if (node === citation) {
+      break;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node as HTMLElement;
+      if (el === startMarker || el.closest('[data-citation-sup="true"]')) {
+        continue;
+      }
+      el.style.transition = 'background-color 0.2s';
+      el.style.backgroundColor = color;
+      highlightedElements.push(el);
+    } else if (node.nodeType === Node.TEXT_NODE) {
+      const text = node as Text;
+      if (
+        text.textContent &&
+        text.textContent.trim().length > 0 &&
+        text.parentElement &&
+        !text.parentElement.closest('[data-citation-sup="true"]')
+      ) {
+        const span = document.createElement('span');
+        span.style.backgroundColor = color;
+        text.parentElement.insertBefore(span, text);
+        span.appendChild(text);
+        wrappedTextSpans.push(span);
+      }
+    }
+  }
+
+  return () => {
+    for (const el of highlightedElements) {
+      el.style.backgroundColor = '';
+      el.style.transition = '';
+    }
+    for (const span of wrappedTextSpans) {
+      const parent = span.parentNode;
+      while (span.firstChild) {
+        parent?.insertBefore(span.firstChild, span);
+      }
+      parent?.removeChild(span);
+    }
+  };
+}
diff --git a/packages/apollo-react/src/chat/headless/markdown/citations.test.ts b/packages/apollo-react/src/chat/headless/markdown/citations.test.ts
new file mode 100644
index 0000000000..4074c805eb
--- /dev/null
+++ b/packages/apollo-react/src/chat/headless/markdown/citations.test.ts
@@ -0,0 +1,85 @@
+import { describe, expect, it } from 'vitest';
+
+import { type AutopilotChatMessage, AutopilotChatRole } from '../../service';
+import { citationFromMarker, getCitationUrl, getGroupCitations } from './citations';
+
+describe('citation helpers', () => {
+  it('builds the pre-hook citation from a marker as Material does', () => {
+    expect(
+      citationFromMarker({ id: 1, title: 'Web', url: 'https://a.test', messageId: 'm' })
+    ).toEqual({ id: 1, title: 'Web', url: 'https://a.test' });
+    expect(
+      citationFromMarker({
+        id: 2,
+        title: 'Guide',
+        download_url: 'https://a.test/g.pdf',
+        page_number: 3,
+        messageId: 'm',
+      })
+    ).toEqual({ id: 2, title: 'Guide', download_url: 'https://a.test/g.pdf', page_number: 3 });
+  });
+
+  it('opens http(s) and relative URLs, and PDFs at the cited page', () => {
+    expect(getCitationUrl({ id: 1, title: 'Web', url: 'https://a.test' })).toBe('https://a.test');
+    expect(getCitationUrl({ id: 1, title: 'Web', url: 'http://a.test/page' })).toBe(
+      'http://a.test/page'
+    );
+    expect(
+      getCitationUrl({ id: 3, title: 'Local', download_url: '/files/guide.pdf', page_number: 7 })
+    ).toBe('/files/guide.pdf#page=7');
+    expect(
+      getCitationUrl({
+        id: 2,
+        title: 'Guide',
+        download_url: 'https://a.test/g.pdf',
+        page_number: 3,
+      })
+    ).toBe('https://a.test/g.pdf#page=3');
+  });
+
+  it('refuses URLs that are not http(s) or relative', () => {
+    for (const url of [
+      'javascript:alert(1)',
+      ' JavaScript:alert(1)',
+      'java\tscript:alert(1)',
+      'data:text/html,<script>alert(1)</script>',
+      'blob:https://a.test/1',
+      'vbscript:msgbox(1)',
+      'file:///etc/passwd',
+    ]) {
+      expect(getCitationUrl({ id: 1, title: 'Bad', url })).toBeUndefined();
+    }
+    expect(
+      getCitationUrl({ id: 2, title: 'Bad', download_url: 'javascript:alert(1)', page_number: 1 })
+    ).toBeUndefined();
+  });
+
+  it('pins how protocol-relative, backslash and look-alike URLs resolve', () => {
+    // Protocol-relative and backslash hosts resolve to the page's scheme; an entity-encoded colon
+    // is a relative path. All stay on http(s), so they may open.
+    for (const url of ['//host.test/a', '\\\\host.test\\a', 'javascript&#58;alert(1)']) {
+      expect(getCitationUrl({ id: 1, title: 'Edge', url })).toBe(url);
+    }
+    // `https:` with no slashes takes "javascript" as the host and "alert(1)" as the port, which
+    // does not parse, so it is refused.
+    expect(
+      getCitationUrl({ id: 1, title: 'Edge', url: 'https:javascript:alert(1)' })
+    ).toBeUndefined();
+  });
+
+  it('lists the citations of a group once each, in order', () => {
+    const message = (citations: Array<{ id: number; title: string; url: string }>) =>
+      ({
+        id: crypto.randomUUID(),
+        role: AutopilotChatRole.Assistant,
+        content: '',
+        created_at: '',
+        widget: 'apollo-markdown-renderer',
+        contentParts: [{ text: 'x', citations }],
+      }) as AutopilotChatMessage;
+    const a = { id: 1, title: 'A', url: 'https://a.test' };
+    const b = { id: 2, title: 'B', url: 'https://b.test' };
+
+    expect(getGroupCitations([message([a, b]), message([a])])).toEqual([a, b]);
+  });
+});
diff --git a/packages/apollo-react/src/chat/headless/markdown/citations.ts b/packages/apollo-react/src/chat/headless/markdown/citations.ts
new file mode 100644
index 0000000000..8c12dc6831
--- /dev/null
+++ b/packages/apollo-react/src/chat/headless/markdown/citations.ts
@@ -0,0 +1,70 @@
+import type { AutopilotChatMessage, PdfCitation, UrlCitation } from '../../service';
+
+/** The props `citationPlugin` gives each `citation` node. */
+export interface CitationMarker {
+  id: number;
+  title: string;
+  url?: string;
+  page_number?: number;
+  download_url?: string;
+  messageId: string;
+}
+
+/** The `citation-click` pre-hook's citation for a marker in the text. */
+export function citationFromMarker({
+  id,
+  title,
+  url,
+  download_url,
+  page_number,
+}: CitationMarker): UrlCitation | PdfCitation {
+  return url
+    ? { id, title, url }
+    : { id, title, download_url: download_url as string, page_number: page_number as number };
+}
+
+const OPENABLE_PROTOCOLS = new Set(['http:', 'https:']);
+
+/**
+ * Whether a citation URL may be opened. Citations come from the model or the host's backend, so
+ * a `javascript:`, `data:`, `blob:` or `vbscript:` URL must not reach `window.open`. The parser
+ * lowercases the scheme and drops the whitespace and control characters that defeat a substring
+ * check; relative URLs resolve against the page.
+ */
+export function isOpenableCitationUrl(href: string): boolean {
+  try {
+    return OPENABLE_PROTOCOLS.has(new URL(href, window.location.href).protocol);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Where a citation opens: its URL, or its PDF at the cited page. `undefined` when there is none
+ * or it is not an http(s) or relative URL.
+ */
+export function getCitationUrl(citation: UrlCitation | PdfCitation): string | undefined {
+  let href: string | undefined;
+  if ('url' in citation && citation.url) {
+    href = citation.url;
+  } else if ('download_url' in citation && citation.download_url) {
+    href = `${citation.download_url}${citation.page_number ? `#page=${citation.page_number}` : ''}`;
+  }
+  return href && isOpenableCitationUrl(href) ? href : undefined;
+}
+
+/** Every citation in a group's content parts, first occurrence of each id only. */
+export function getGroupCitations(group: readonly AutopilotChatMessage[]) {
+  const allCitations = group
+    .flatMap((message) => message.contentParts?.flatMap((part) => part.citations) ?? [])
+    .filter((citation): citation is UrlCitation | PdfCitation => citation !== undefined);
+
+  const seenIds = new Set<number>();
+  return allCitations.filter((citation) => {
+    if (seenIds.has(citation.id)) {
+      return false;
+    }
+    seenIds.add(citation.id);
+    return true;
+  });
+}
diff --git a/packages/apollo-react/src/chat/headless/markdown/html-preview.test.ts b/packages/apollo-react/src/chat/headless/markdown/html-preview.test.ts
new file mode 100644
index 0000000000..d7196f3081
--- /dev/null
+++ b/packages/apollo-react/src/chat/headless/markdown/html-preview.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+
+import { buildHtmlPreviewDocument } from './html-preview';
+
+describe('buildHtmlPreviewDocument', () => {
+  it('adds a no-referrer policy before the snippet', () => {
+    expect(buildHtmlPreviewDocument('<h1>Hi</h1>')).toBe(
+      '<meta name="referrer" content="no-referrer"><h1>Hi</h1>'
+    );
+  });
+
+  it('keeps a doctype first and adds the CSP when given', () => {
+    expect(
+      buildHtmlPreviewDocument('<!DOCTYPE html>\n<html></html>', {
+        contentSecurityPolicy: "default-src 'none'",
+      })
+    ).toBe(
+      `<!DOCTYPE html><meta name="referrer" content="no-referrer"><meta http-equiv="Content-Security-Policy" content="default-src 'none'">\n<html></html>`
+    );
+  });
+});
diff --git a/packages/apollo-react/src/chat/headless/markdown/html-preview.ts b/packages/apollo-react/src/chat/headless/markdown/html-preview.ts
new file mode 100644
index 0000000000..7da392d473
--- /dev/null
+++ b/packages/apollo-react/src/chat/headless/markdown/html-preview.ts
@@ -0,0 +1,21 @@
+const DOCTYPE = /^\s*<!doctype[^>]*>/i;
+
+/**
+ * The document an HTML code block previews in a sandboxed iframe. An `about:srcdoc` frame takes
+ * the host page as its referrer, so a `no-referrer` policy keeps the host URL from leaking to
+ * anything the snippet loads; an optional Content-Security-Policy narrows what it may load. The
+ * tags go after a doctype, if any, so the snippet keeps its rendering mode.
+ */
+export function buildHtmlPreviewDocument(
+  html: string,
+  { contentSecurityPolicy }: { contentSecurityPolicy?: string } = {}
+) {
+  const head = `<meta name="referrer" content="no-referrer">${
+    contentSecurityPolicy
+      ? `<meta http-equiv="Content-Security-Policy" content="${contentSecurityPolicy}">`
+      : ''
+  }`;
+  const doctype = html.match(DOCTYPE)?.[0] ?? '';
+
+  return `${doctype}${head}${html.slice(doctype.length)}`;
+}
diff --git a/packages/apollo-react/src/chat/headless/markdown/incomplete-tokens.test.ts b/packages/apollo-react/src/chat/headless/markdown/incomplete-tokens.test.ts
new file mode 100644
index 0000000000..976c121125
--- /dev/null
+++ b/packages/apollo-react/src/chat/headless/markdown/incomplete-tokens.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+
+import { extractRenderableContent } from './incomplete-tokens';
+
+describe('extractRenderableContent', () => {
+  it('renders everything when no token is open', () => {
+    expect(extractRenderableContent('Use [[resource-token:{"id":"a"}]] now')).toEqual({
+      renderable: 'Use [[resource-token:{"id":"a"}]] now',
+      buffered: '',
+    });
+  });
+
+  it('holds back an unclosed resource token', () => {
+    expect(extractRenderableContent('Use the [[resource-token:{"id":"va')).toEqual({
+      renderable: 'Use the ',
+      buffered: '[[resource-token:{"id":"va',
+    });
+  });
+});
diff --git a/packages/apollo-react/src/chat/headless/markdown/incomplete-tokens.ts b/packages/apollo-react/src/chat/headless/markdown/incomplete-tokens.ts
new file mode 100644
index 0000000000..cdc5bce922
--- /dev/null
+++ b/packages/apollo-react/src/chat/headless/markdown/incomplete-tokens.ts
@@ -0,0 +1,43 @@
+/**
+ * Patterns for tokens that should be buffered when incomplete during streaming.
+ * Each pattern should match the START of an incomplete token (opened but not yet closed).
+ * Add new patterns here as needed.
+ *
+ * Pattern format: Match the opening sequence with a negative lookahead for the closing sequence.
+ * Example: /\[\[my-token:(?![^\]]*\]\])/ matches `[[my-token:` not followed by `]]`
+ */
+export const INCOMPLETE_TOKEN_PATTERNS: RegExp[] = [
+  /\[\[resource-token:(?!.*\]\])/, // [[resource-token:{...}]]
+];
+
+/**
+ * Extracts content that is safe to render, buffering any incomplete tokens.
+ * This prevents flickering during streaming when tokens arrive in chunks.
+ *
+ * @param content - The accumulated content string
+ * @returns An object with `renderable` (safe to display) and `buffered` (held back for next chunk)
+ */
+export function extractRenderableContent(content: string): {
+  renderable: string;
+  buffered: string;
+} {
+  let earliestIndex = -1;
+
+  for (const pattern of INCOMPLETE_TOKEN_PATTERNS) {
+    const match = content.match(pattern);
+    if (match?.index !== undefined) {
+      if (earliestIndex === -1 || match.index < earliestIndex) {
+        earliestIndex = match.index;
+      }
+    }
+  }
+
+  if (earliestIndex === -1) {
+    return { renderable: content, buffered: '' };
+  }
+
+  return {
+    renderable: content.slice(0, earliestIndex),
+    buffered: content.slice(earliestIndex),
+  };
+}
diff --git a/packages/apollo-react/src/chat/locales/en.json b/packages/apollo-react/src/chat/locales/en.json
index 2cd98b61ae..600c13a4ec 100644
--- a/packages/apollo-react/src/chat/locales/en.json
+++ b/packages/apollo-react/src/chat/locales/en.json
@@ -86,5 +86,10 @@
   "autopilot-chat.message.response-received": "New response",
   "autopilot-chat.message.actions.copied": "Copied",
   "autopilot-chat.message.actions.feedback": "Rate this response",
-  "autopilot-chat.message.loading-older": "Loading older messages"
+  "autopilot-chat.message.loading-older": "Loading older messages",
+  "autopilot-chat.message.html-preview": "HTML preview",
+  "autopilot-chat.message.dialog-close": "Close",
+  "autopilot-chat.message.footnote-back": "Back to content",
+  "autopilot-chat.message.task-done": "Done",
+  "autopilot-chat.message.task-open": "Not done"
 }
diff --git a/packages/apollo-react/src/chat/stories/chat-playground.stories.tsx b/packages/apollo-react/src/chat/stories/chat-playground.stories.tsx
index 57220ab57d..ec9331f0c4 100644
--- a/packages/apollo-react/src/chat/stories/chat-playground.stories.tsx
+++ b/packages/apollo-react/src/chat/stories/chat-playground.stories.tsx
@@ -51,6 +51,8 @@ Controls apply to the running chat through the service setters, without a new ch
 
 Closing a chat leaves an **Open chat** button where the host would put its launcher; it reopens in the selected \`mode\`.
 
+**Clear chat** is a host-side button beside the panels (in the host bar in FullScreen). It stops the running scenario (what it still has scheduled, and its cleanup: listeners, loading message, error, config it changed) and calls \`newChat()\` on every chat in the story, without a remount. It is a button because args cannot trigger an action.
+
 Icons on custom header actions and message actions come from the consumer: the Material renderer takes Material Icons names (\`picture_as_pdf\`), the Wind renderer takes lucide names, kebab-case (\`file-text\`) or the PascalCase export name (\`FileText\`). Names Wind cannot resolve show a neutral box. The playground gives each renderer its own action set for that reason.
 
 With both renderers, every control applies to both chats, scenarios replay into both on the same timers, and a message sent from either composer is mirrored to the other. Service events from each chat appear in the Actions panel, prefixed with the renderer.
@@ -198,3 +200,9 @@ export const CompareRenderers: Story = {
   name: 'Compare renderers',
   args: { renderer: 'both' },
 };
+
+/** Code blocks with HTML preview turned on, compared across both renderers. */
+export const HtmlPreview: Story = {
+  name: 'HTML preview',
+  args: { renderer: 'both', scenario: 'code', disableHtmlPreview: false },
+};
diff --git a/packages/apollo-react/src/chat/stories/chat-playground.test.tsx b/packages/apollo-react/src/chat/stories/chat-playground.test.tsx
index 704eabbceb..a3f2014ab7 100644
--- a/packages/apollo-react/src/chat/stories/chat-playground.test.tsx
+++ b/packages/apollo-react/src/chat/stories/chat-playground.test.tsx
@@ -1,7 +1,8 @@
 import { act, render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { AutopilotChatMode, AutopilotChatService } from '../index';
+import { publishChatEvent } from '../headless/utils/publish-chat-event';
+import { AutopilotChatEvent, AutopilotChatMode, AutopilotChatService } from '../index';
 import {
   ChatPlayground,
   type ChatPlaygroundProps,
@@ -98,6 +99,48 @@ describe('ChatPlayground', () => {
     }
   });
 
+  it('clears every chat and stops the running scenario without a remount', async () => {
+    render(
+      <ChatPlayground {...baseProps()} renderer="both" scenario="streaming" streamDelayMs={30} />
+    );
+    await flush();
+    const wind = slotService('primary');
+    const material = slotService('compare');
+    const root = document.querySelector('[data-slot="wind-chat"]');
+    expect(wind?.getConversation().length).toBeGreaterThan(0);
+
+    act(() => screen.getByRole('button', { name: 'Clear chat' }).click());
+    await act(() => new Promise((resolve) => setTimeout(resolve, 300)));
+
+    expect(wind?.getConversation()).toHaveLength(0);
+    expect(material?.getConversation()).toHaveLength(0);
+    expect(document.querySelector('[data-slot="wind-chat"]')).toBe(root);
+  });
+
+  it('runs the scenario cleanups on Clear chat', async () => {
+    const props = baseProps();
+    const { rerender } = render(<ChatPlayground {...props} scenario="loading" />);
+    await flush();
+    const service = slotService('primary');
+    expect(service?.getLoadingMessage()).toBe('Searching the knowledge base...');
+
+    act(() => screen.getByRole('button', { name: 'Clear chat' }).click());
+    expect(service?.getLoadingMessage()).toBe('');
+
+    rerender(<ChatPlayground {...props} scenario="long-history" />);
+    await flush();
+    expect(service?.getConfig().paginatedMessages).toBe(true);
+    act(() => screen.getByRole('button', { name: 'Clear chat' }).click());
+    expect(service?.getConfig().paginatedMessages).toBe(false);
+
+    // The history scenario's load-more listener is gone, so no older page arrives.
+    act(() => {
+      if (service) publishChatEvent(service, AutopilotChatEvent.ConversationLoadMore);
+    });
+    await act(() => new Promise((resolve) => setTimeout(resolve, 700)));
+    expect(service?.getConversation()).toHaveLength(0);
+  });
+
   it('appends a scenario to the current transcript', async () => {
     const props = baseProps();
     const { rerender } = render(<ChatPlayground {...props} scenario="conversation" />);
diff --git a/packages/apollo-react/src/chat/stories/chat-playground.tsx b/packages/apollo-react/src/chat/stories/chat-playground.tsx
index 59c08beecb..60709dec87 100644
--- a/packages/apollo-react/src/chat/stories/chat-playground.tsx
+++ b/packages/apollo-react/src/chat/stories/chat-playground.tsx
@@ -180,6 +180,11 @@ interface SlotHandle {
   quietIds: Set<string>;
   /** Turns mirrored from the other chat: auto reply, no mirroring back. */
   mirroredIds: Set<string>;
+  /**
+   * Stops what is still running for this chat: scenario steps, streams and auto replies, and the
+   * scenario's own cleanup (listeners, loading message, error, config it changed).
+   */
+  cancelScheduled: Set<() => void>;
 }
 
 type SlotRegistry = Map<string, SlotHandle>;
@@ -315,9 +320,14 @@ function ChatSlot({
 
   // Registration, event logging, mirroring, auto reply and header action replies.
   React.useEffect(() => {
-    const handle: SlotHandle = { service, quietIds: new Set(), mirroredIds: new Set() };
-    registry.set(id, handle);
     const timers = createTimers();
+    const handle: SlotHandle = {
+      service,
+      quietIds: new Set(),
+      mirroredIds: new Set(),
+      cancelScheduled: new Set([timers.clear]),
+    };
+    registry.set(id, handle);
 
     const unsubscribes = Object.values(AutopilotChatEvent).map((event) =>
       service.on(event, (data) => log(event, data))
@@ -435,6 +445,15 @@ function ChatSlot({
     const scenario: ChatStoryScenario = CHAT_STORY_SCENARIOS[args.scenario];
     const timers = createTimers();
     const cleanups: Array<() => void> = [];
+    // Stops the scenario once, whether Clear chat or a scenario change comes first.
+    let stopped = false;
+    const stop = () => {
+      if (stopped) return;
+      stopped = true;
+      timers.clear();
+      for (const cleanup of cleanups) cleanup();
+    };
+    handle?.cancelScheduled.add(stop);
     const context: ScenarioContext = {
       service,
       renderer: rendererRef.current,
@@ -455,8 +474,8 @@ function ChatSlot({
     scenario.run(context);
 
     return () => {
-      timers.clear();
-      for (const cleanup of cleanups) cleanup();
+      handle?.cancelScheduled.delete(stop);
+      stop();
     };
   }, [args.scenario, id, registry, service, log]);
 
@@ -531,6 +550,25 @@ export function ChatPlayground({ theme, instanceKey, ...args }: ChatPlaygroundPr
   const primaryRenderer: AutopilotChatRenderer = args.renderer === 'both' ? 'wind' : args.renderer;
   const fullScreen = args.mode === AutopilotChatMode.FullScreen;
 
+  // An action, which args cannot express: stop the scenario and start every chat over, in place.
+  const clearChats = () => {
+    for (const handle of registry.values()) {
+      for (const cancel of handle.cancelScheduled) cancel();
+      handle.service.newChat();
+    }
+  };
+  const clearButton = (
+    <button
+      type="button"
+      title="Host control, since Storybook args cannot trigger an action: stops the running scenario and starts a new chat in every chat here, without a remount."
+      style={fullScreen ? undefined : embeddedLauncherStyle(both ? 2 : 1)}
+      className="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-foreground shadow-lg"
+      onClick={clearChats}
+    >
+      Clear chat
+    </button>
+  );
+
   return (
     <div
       className={
@@ -539,7 +577,17 @@ export function ChatPlayground({ theme, instanceKey, ...args }: ChatPlaygroundPr
           : 'flex min-h-screen w-full items-center justify-center bg-muted text-sm text-muted-foreground'
       }
     >
-      {!fullScreen && <span>Host application</span>}
+      {fullScreen ? (
+        <div className="flex h-12 shrink-0 items-center justify-between border-b border-border-de-emp bg-background px-4 text-sm text-muted-foreground">
+          Host application
+          {clearButton}
+        </div>
+      ) : (
+        <>
+          <span>Host application</span>
+          {clearButton}
+        </>
+      )}
       <ChatSlot
         id="primary"
         instanceKey={instanceKey}
diff --git a/packages/apollo-react/src/chat/stories/chat-story-fixtures.ts b/packages/apollo-react/src/chat/stories/chat-story-fixtures.ts
index 7bf43ad8db..9263dbf147 100644
--- a/packages/apollo-react/src/chat/stories/chat-story-fixtures.ts
+++ b/packages/apollo-react/src/chat/stories/chat-story-fixtures.ts
@@ -399,10 +399,54 @@ $$
 
 ---
 
+- [x] A finished task
+- [ ] An open task
+
+| Step | Owner | Notes |
+| --- | --- | --- |
+| Extract | Robot | Reads the invoice<br>and the vendor record |
+| Approve | Finance | Over $5,000 needs a manager, and a single dollar sign stays literal |
+
+> A quote with a nested list:
+> - first
+> - second
+
 Footnote reference[^1].
 
 [^1]: The footnote text.`;
 
+/** Replies the markdown scenario streams, so incomplete markdown is seen mid-stream. */
+export const STREAMED_MARKDOWN = `### Streamed summary
+
+1. **Open** the queue and check the _oldest_ item.
+2. Retry it with \`Invoke Workflow\`.
+
+| Queue | Pending |
+| --- | --- |
+| Invoices | 12 |
+
+\`\`\`json
+{ "queue": "Invoices", "retry": true }
+\`\`\`
+
+Done.`;
+
+/** Several languages, inline code and a plain block, for code block chrome. */
+export const CODE_LANGUAGES_MESSAGE = `Inline \`code\` sits in the sentence. A few blocks:
+
+\`\`\`python
+def retry(item, attempts=3):
+    return any(run(item) for _ in range(attempts))
+\`\`\`
+
+\`\`\`bash
+uip robot start --queue Invoices
+\`\`\`
+
+\`\`\`
+A block with no language.
+\`\`\``;
+
 export const RESPONSE_ACTIONS: AutopilotChatMessageAction[] = [
   {
     name: 'copy-action',
@@ -453,6 +497,45 @@ export const CITATION_RESPONSE = {
   ],
 } satisfies Partial<AutopilotChatMessage>;
 
+/** PDF and URL sources, more than fit the collapsed list, and a range spanning formatting. */
+export const PDF_CITATION_RESPONSE = {
+  widget: 'default',
+  contentParts: [
+    { text: 'Invoices over $5,000 need ' },
+    {
+      text: 'a **finance manager** to approve them',
+      citations: [
+        {
+          id: 1,
+          title: 'Approval Policy',
+          download_url: 'https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf',
+          page_number: 4,
+        },
+      ],
+    },
+    { text: ', and ' },
+    {
+      text: 'every approval is logged with a reason',
+      citations: [
+        { id: 2, title: 'Audit Requirements', url: 'https://example.com/audit' },
+        { id: 3, title: 'Finance Handbook', url: 'https://example.com/handbook' },
+      ],
+    },
+    { text: '. ' },
+    {
+      text: 'Rejected invoices go back to the vendor.',
+      citations: [
+        {
+          id: 4,
+          title: 'Vendor Guide',
+          download_url: 'https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf',
+          page_number: 9,
+        },
+      ],
+    },
+  ],
+} satisfies Partial<AutopilotChatMessage>;
+
 /** Streamed with `contentPartChunk`, one entry per chunk. */
 export const STREAMED_CITATION_CHUNKS: ContentPartChunk[] = [
   { index: 0, text: 'Based on the search results' },
@@ -547,6 +630,31 @@ export const STREAMED_CITATION_CHUNKS: ContentPartChunk[] = [
 
 export const RESOURCE_TOKEN_MESSAGE = `I will update [[resource-token:{"id":"var-email","type":"variable","icon":"mail","displayName":"email"}]] and [[resource-token:{"id":"var-long","type":"variable","icon":"data_object","displayName":"this_is_a_very_long_variable_name_that_should_test_truncation"}]] in the system, then notify [[resource-token:{"id":"var-username","type":"variable","icon":"person","displayName":"username"}]] when complete.`;
 
+/** Tokens inside a list, for chips in block content. */
+export const RESOURCE_TOKEN_LIST_MESSAGE = `Inputs for the run:
+
+- [[resource-token:{"id":"q-invoices","type":"queue","icon":"inbox","displayName":"Invoices"}]] queue
+- [[resource-token:{"id":"b-archive","type":"bucket","icon":"folder","displayName":"Archive"}]] bucket`;
+
+// Resource icons are Material Icons names; the Wind renderer takes lucide names.
+const WIND_RESOURCE_ICONS: Record<string, string> = {
+  data_object: 'braces',
+  description: 'file-text',
+  folder: 'folder',
+  inbox: 'inbox',
+  mail: 'mail',
+  person: 'user',
+};
+
+/** `text` with its resource token icons named for `renderer`. */
+export function withResourceIcons(text: string, renderer: 'wind' | 'material') {
+  return renderer === 'wind'
+    ? text.replace(/"icon":"(\w+)"/g, (match, icon: string) =>
+        WIND_RESOURCE_ICONS[icon] ? `"icon":"${WIND_RESOURCE_ICONS[icon]}"` : match
+      )
+    : text;
+}
+
 /** Streamed with `content` chunks; tokens split across chunks exercise incomplete-token buffering. */
 export const RESOURCE_TOKEN_CHUNKS = [
   'I will update the ',
diff --git a/packages/apollo-react/src/chat/stories/chat-story-scenarios.ts b/packages/apollo-react/src/chat/stories/chat-story-scenarios.ts
index 0a9fc36166..b9a93d4e3d 100644
--- a/packages/apollo-react/src/chat/stories/chat-story-scenarios.ts
+++ b/packages/apollo-react/src/chat/stories/chat-story-scenarios.ts
@@ -20,20 +20,25 @@ import {
 import {
   CITATION_RESPONSE,
   CODE_BLOCK_MESSAGE,
+  CODE_LANGUAGES_MESSAGE,
   HTML_PREVIEW_MESSAGE,
   MARKDOWN_CORPUS,
   overflowResponseAction,
+  PDF_CITATION_RESPONSE,
   RESOURCE_TOKEN_CHUNKS,
+  RESOURCE_TOKEN_LIST_MESSAGE,
   RESOURCE_TOKEN_MESSAGE,
   RESPONSE_ACTIONS,
   SAMPLE_CONVERSATION,
   STREAMED_CITATION_CHUNKS,
+  STREAMED_MARKDOWN,
   STREAMING_REPLY,
   type StoryToolCallDisplayMode,
   storyHistoryPage,
   storyToolCallMeta,
   storyTraceSpan,
   WIND_RESPONSE_ACTIONS,
+  withResourceIcons,
 } from './chat-story-fixtures';
 
 export interface ScenarioContext {
@@ -199,28 +204,31 @@ export const CHAT_STORY_SCENARIOS = {
   citations: {
     label: 'Citations',
     description:
-      'Appends a reply with content-part citations, then a streamed reply with citations.',
+      'Appends a reply with URL citations, a reply with PDF citations (page numbers, a range spanning bold text, more sources than the collapsed list shows), then a streamed reply with citations. Hover a citation to highlight what it supports; clicking runs the citation-click pre-hook.',
     run: (context) => {
       context.sendScriptedRequest({ content: 'Why is the sky blue? And tell me about UiPath.' });
       context.schedule(() => respond(context.service, CITATION_RESPONSE), context.delayMs);
-      streamChunks(context, STREAMED_CITATION_CHUNKS, context.delayMs * 3);
+      context.schedule(() => respond(context.service, PDF_CITATION_RESPONSE), context.delayMs * 2);
+      streamChunks(context, STREAMED_CITATION_CHUNKS, context.delayMs * 4);
     },
   },
   markdown: {
     label: 'Markdown corpus',
     description:
-      'Appends a reply covering headings, lists, tables, quotes, math, images and footnotes.',
+      'Appends a reply covering headings, lists, task lists, tables with line breaks, quotes, math, images (shown as links) and footnotes, then streams a shorter reply so partial markdown is seen mid-stream.',
     run: (context) => {
       context.sendScriptedRequest({ content: 'Show me every markdown feature.' });
       context.schedule(
         () => respond(context.service, { content: MARKDOWN_CORPUS }),
         context.delayMs
       );
+      streamChunks(context, splitWords(STREAMED_MARKDOWN), context.delayMs * 3);
     },
   },
   code: {
     label: 'Code and HTML preview',
-    description: 'Appends a long TypeScript block and an HTML block with preview.',
+    description:
+      'Appends a long TypeScript block, blocks in other languages with inline code, then streams an HTML block. HTML preview is off by default (disabledFeatures.htmlPreview); turn off the disableHtmlPreview control, or use the HTML preview story, to get the preview action. It stays disabled while the block streams.',
     run: (context) => {
       context.sendScriptedRequest({ content: 'Show me some code.' });
       context.schedule(
@@ -228,21 +236,28 @@ export const CHAT_STORY_SCENARIOS = {
         context.delayMs
       );
       context.schedule(
-        () => respond(context.service, { content: HTML_PREVIEW_MESSAGE }),
+        () => respond(context.service, { content: CODE_LANGUAGES_MESSAGE }),
         context.delayMs * 2
       );
+      streamChunks(context, HTML_PREVIEW_MESSAGE.split(/(?<=\n)/), context.delayMs * 3);
     },
   },
   'resource-tokens': {
     label: 'Resource tokens',
-    description: 'Appends a reply with resource tokens, then streams tokens split across chunks.',
+    description:
+      'Appends a reply with resource tokens and one with tokens in a list, then streams tokens split across chunks, which are held back until complete.',
     run: (context) => {
+      const icons = (text: string) => withResourceIcons(text, context.renderer);
       context.sendScriptedRequest({ content: 'Which variables will you touch?' });
       context.schedule(
-        () => respond(context.service, { content: RESOURCE_TOKEN_MESSAGE }),
+        () => respond(context.service, { content: icons(RESOURCE_TOKEN_MESSAGE) }),
         context.delayMs
       );
-      streamChunks(context, RESOURCE_TOKEN_CHUNKS, context.delayMs * 3);
+      context.schedule(
+        () => respond(context.service, { content: icons(RESOURCE_TOKEN_LIST_MESSAGE) }),
+        context.delayMs * 2
+      );
+      streamChunks(context, RESOURCE_TOKEN_CHUNKS.map(icons), context.delayMs * 4);
     },
   },
   'tool-call': {
diff --git a/packages/apollo-react/src/chat/wind/WindChatRenderer.test.tsx b/packages/apollo-react/src/chat/wind/WindChatRenderer.test.tsx
index a22cdc87e2..c1bca42f6f 100644
--- a/packages/apollo-react/src/chat/wind/WindChatRenderer.test.tsx
+++ b/packages/apollo-react/src/chat/wind/WindChatRenderer.test.tsx
@@ -205,3 +205,57 @@ describe('WindChatRenderer', () => {
     expect(screen.queryByText('Be kind')).toBeNull();
   });
 });
+
+describe('Wind overlay placement', () => {
+  const codeReply = {
+    id: 'code',
+    content: '```ts\nconst a = 1;\n```',
+    widget: 'apollo-markdown-renderer',
+    created_at: '',
+  };
+
+  it('portals modal dialogs to a themed node on the body, and keeps menus in the root', async () => {
+    const service = createService();
+    service.setCustomHeaderActions([{ id: 'share', name: 'Share' }]);
+    const { unmount } = render(<ApChat chatServiceInstance={service} theme="dark" />);
+    act(() => service.sendResponse(codeReply));
+
+    await userEvent.click(screen.getByRole('button', { name: 'More actions' }));
+    expect(getRoot()?.contains(await screen.findByRole('menu'))).toBe(true);
+    await userEvent.keyboard('{Escape}');
+
+    const expand = screen.getByRole('button', { name: 'Expand' });
+    await userEvent.click(expand);
+    const dialog = await screen.findByRole('dialog');
+    const overlays = dialog.closest('[data-slot="wind-chat-overlays"]');
+    expect(overlays?.parentElement).toBe(document.body);
+    expect(overlays).toHaveClass('dark');
+    expect(getRoot()?.contains(dialog)).toBe(false);
+    // Focus moves into the dialog and stays trapped there.
+    await waitFor(() => expect(dialog.contains(document.activeElement)).toBe(true));
+    await userEvent.tab();
+    expect(dialog.contains(document.activeElement)).toBe(true);
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => expect(document.activeElement).toBe(expand));
+
+    unmount();
+    expect(document.querySelector('[data-slot="wind-chat-overlays"]')).toBeNull();
+  });
+
+  it('puts every overlay in the host portal container when one is given', async () => {
+    const portalContainer = document.createElement('div');
+    document.body.appendChild(portalContainer);
+    const service = createService();
+    service.setCustomHeaderActions([{ id: 'share', name: 'Share' }]);
+    render(<ApChat chatServiceInstance={service} portalContainer={portalContainer} />);
+    act(() => service.sendResponse(codeReply));
+
+    await userEvent.click(screen.getByRole('button', { name: 'More actions' }));
+    expect(portalContainer.contains(await screen.findByRole('menu'))).toBe(true);
+    await userEvent.keyboard('{Escape}');
+
+    await userEvent.click(screen.getByRole('button', { name: 'Expand' }));
+    expect(portalContainer.contains(await screen.findByRole('dialog'))).toBe(true);
+    portalContainer.remove();
+  });
+});
diff --git a/packages/apollo-react/src/chat/wind/WindChatRenderer.tsx b/packages/apollo-react/src/chat/wind/WindChatRenderer.tsx
index 02227fcb8b..cd24a91964 100644
--- a/packages/apollo-react/src/chat/wind/WindChatRenderer.tsx
+++ b/packages/apollo-react/src/chat/wind/WindChatRenderer.tsx
@@ -7,6 +7,7 @@ import { useChatState } from '../headless/providers/chat-state-provider';
 import { useChatWidth } from '../headless/providers/chat-width-provider';
 import { useTheme } from '../headless/providers/theme-provider';
 import { AutopilotChatMode, CHAT_CONTAINER_ANIMATION_DURATION } from '../service';
+import { DialogContainerContext } from './common/dialog-container';
 import { useOpenTransition } from './hooks/use-open-transition';
 import { EmbeddedLayout } from './layout/embedded-layout';
 import { FullScreenLayout } from './layout/full-screen-layout';
@@ -65,9 +66,13 @@ export function WindChatRenderer() {
   React.useLayoutEffect(() => {
     rootRef.current?.toggleAttribute('inert', state === 'closed');
   }, [state]);
-  // A host-provided portal target (e.g. inside a shadow root) is not under the themed root, so
-  // overlays go into a themed node placed there instead.
-  const [hostPortalNode, setHostPortalNode] = React.useState<HTMLElement | null>(null);
+  // A themed node outside the root, in the host's portal target (e.g. inside a shadow root) or
+  // the body. With a host target every overlay goes there, as before; otherwise only modal
+  // dialogs do, and menus and tooltips keep the in-root boundary.
+  const [overlayNode, setOverlayNode] = React.useState<HTMLElement | null>(null);
+  // `document` is read after mount, so a server render never touches it.
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
 
   if (!present) {
     return null;
@@ -89,15 +94,23 @@ export function WindChatRenderer() {
       }
       className={`${themeClass} ${ROOT_SIZE[renderedMode]} flex flex-col overflow-hidden bg-background text-foreground transition-[opacity,translate] duration-(--chat-transition-duration) ease-out data-[state=closed]:translate-y-2 data-[state=closed]:opacity-0 motion-reduce:transition-none`}
     >
-      <PortalContainerProvider container={portalContainer ? hostPortalNode : undefined}>
-        <TooltipProvider delayDuration={300}>
-          <LayoutForMode layout={layout} />
-        </TooltipProvider>
+      <PortalContainerProvider container={portalContainer ? overlayNode : undefined}>
+        <DialogContainerContext.Provider value={overlayNode}>
+          <TooltipProvider delayDuration={300}>
+            <LayoutForMode layout={layout} />
+          </TooltipProvider>
+        </DialogContainerContext.Provider>
       </PortalContainerProvider>
-      {portalContainer &&
+      {mounted &&
         createPortal(
-          <div ref={setHostPortalNode} className={themeClass} data-density={density} />,
-          portalContainer
+          <div
+            ref={setOverlayNode}
+            data-slot="wind-chat-overlays"
+            // Above the host's chat panel, at the z-index Material's modals use.
+            className={`${themeClass} relative z-[1300]`}
+            data-density={density}
+          />,
+          portalContainer ?? document.body
         )}
     </div>
   );
diff --git a/packages/apollo-react/src/chat/wind/common/dialog-container.ts b/packages/apollo-react/src/chat/wind/common/dialog-container.ts
new file mode 100644
index 0000000000..b461277598
--- /dev/null
+++ b/packages/apollo-react/src/chat/wind/common/dialog-container.ts
@@ -0,0 +1,10 @@
+import React from 'react';
+
+/**
+ * Where Wind's modal dialogs portal: a node carrying the chat's theme class, in the host's
+ * `portalContainer` or else `document.body`, so a modal covers the page like Material's instead of
+ * sitting in the chat root's stacking context. Menus, tooltips and hover cards stay in the root.
+ */
+export const DialogContainerContext = React.createContext<HTMLElement | null>(null);
+
+export const useDialogContainer = () => React.useContext(DialogContainerContext);
diff --git a/packages/apollo-react/src/chat/wind/messages/chat-message.tsx b/packages/apollo-react/src/chat/wind/messages/chat-message.tsx
index fffcfd75ab..afdfc60800 100644
--- a/packages/apollo-react/src/chat/wind/messages/chat-message.tsx
+++ b/packages/apollo-react/src/chat/wind/messages/chat-message.tsx
@@ -8,6 +8,7 @@ import { WIND_MESSAGE_RENDERERS } from '../renderers';
 import { InjectedMessage } from './injected-message';
 import { MessageActionBar } from './message-action-bar';
 import { MessageAttachments } from './message-attachments';
+import { MessageSources } from './message-sources';
 
 // Material's user bubble colour (with the host override it honours) and the leading inset it keeps
 // from the panel edge; the padding stays the Bubble primitive's.
@@ -85,6 +86,7 @@ function ChatMessageComponent({
             </div>
           ))
         )}
+        {isLastInGroup && !isUser && <MessageSources message={message} />}
         {showActions && (
           <MessageActionBar message={message} isLatestReply={isLatestReply} copyText={copyText} />
         )}
diff --git a/packages/apollo-react/src/chat/wind/messages/message-list-scroll.test.tsx b/packages/apollo-react/src/chat/wind/messages/message-list-scroll.test.tsx
index 971edf4801..97c6ec88b5 100644
--- a/packages/apollo-react/src/chat/wind/messages/message-list-scroll.test.tsx
+++ b/packages/apollo-react/src/chat/wind/messages/message-list-scroll.test.tsx
@@ -111,12 +111,16 @@ afterEach(() => {
   resizeCallbacks.clear();
 });
 
+const nextFrame = () => new Promise((resolve) => requestAnimationFrame(resolve));
+
 // Lets the primitive's observers and frames run: mutation callbacks are microtasks, resize
-// handling is coalesced into a frame.
+// handling is coalesced into a frame. Waits on frames, not wall time, so a busy runner cannot
+// cut the chain short.
 async function settle() {
   await act(async () => {
     for (const callback of resizeCallbacks) callback([], {} as ResizeObserver);
-    await new Promise((resolve) => setTimeout(resolve, 40));
+    for (let frame = 0; frame < 4; frame++) await nextFrame();
+    await new Promise((resolve) => setTimeout(resolve, 20));
   });
 }
 
diff --git a/packages/apollo-react/src/chat/wind/messages/message-sources.tsx b/packages/apollo-react/src/chat/wind/messages/message-sources.tsx
new file mode 100644
index 0000000000..5d687e2489
--- /dev/null
+++ b/packages/apollo-react/src/chat/wind/messages/message-sources.tsx
@@ -0,0 +1,55 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { SourceItem, Sources, SourcesList } from '@uipath/apollo-wind';
+import { FileText, Globe } from 'lucide-react';
+
+import { useMessageSources, useOpenCitation } from '../../headless/hooks/use-citations';
+import { useIsStreamingMessage } from '../../headless/hooks/use-is-streaming-message';
+import type { AutopilotChatMessage } from '../../service';
+
+/**
+ * The cited sources of a reply's group, collapsed under the reply. Hidden while it streams or
+ * while the host says more of the group is coming, as in Material.
+ */
+export function MessageSources({ message }: { message: AutopilotChatMessage }) {
+  const { _ } = useLingui();
+  const { sources, isWaitingForMoreMessages } = useMessageSources(message);
+  const { isStreaming } = useIsStreamingMessage(message);
+  const openCitation = useOpenCitation();
+
+  if (isWaitingForMoreMessages || isStreaming || sources.length === 0) {
+    return null;
+  }
+
+  const label = _(msg({ id: 'autopilot-chat.message.sources', message: `Sources` }));
+
+  return (
+    <Sources
+      data-slot="wind-chat-sources"
+      count={sources.length}
+      // Material labels the list "Sources" without a count; kept so both read the same.
+      strings={{ sourceCount: () => label }}
+      className="mt-2"
+    >
+      <SourcesList>
+        {sources.map((source) => {
+          const page_number = 'page_number' in source ? source.page_number : undefined;
+          const page = page_number
+            ? _(msg({ id: 'autopilot-chat.message.page-number', message: `Page ${page_number}` }))
+            : undefined;
+
+          return (
+            <SourceItem
+              key={source.id}
+              index={source.id}
+              title={source.title}
+              source={page}
+              icon={'url' in source ? <Globe /> : <FileText />}
+              onSelect={() => openCitation(source)}
+            />
+          );
+        })}
+      </SourcesList>
+    </Sources>
+  );
+}
diff --git a/packages/apollo-react/src/chat/wind/renderers/citation-highlights.ts b/packages/apollo-react/src/chat/wind/renderers/citation-highlights.ts
new file mode 100644
index 0000000000..51d9f6463a
--- /dev/null
+++ b/packages/apollo-react/src/chat/wind/renderers/citation-highlights.ts
@@ -0,0 +1,48 @@
+import React from 'react';
+
+/**
+ * Cited-range highlights of one markdown message. The highlighter moves React-owned text nodes
+ * into spans, so a highlight must never be on screen while React re-renders that text: none start
+ * while the message streams, and any active one is removed before new content renders.
+ * Post-parity, the CSS Custom Highlight API (see apollo-wind's citation stories) would paint the
+ * range without touching the DOM and make this unnecessary.
+ */
+export interface CitationHighlights {
+  streaming: boolean;
+  /** Tracks an active highlight's cleanup; returns a function that forgets it. */
+  track: (clear: () => void) => () => void;
+}
+
+export const CitationHighlightsContext = React.createContext<CitationHighlights>({
+  streaming: false,
+  track: () => () => {},
+});
+
+/** Owns the highlights of a message whose markdown source is `content`. */
+export function useCitationHighlights(content: string, streaming: boolean): CitationHighlights {
+  const active = React.useRef(new Set<() => void>());
+  const clearAll = React.useCallback(() => {
+    for (const clear of active.current) clear();
+    active.current.clear();
+  }, []);
+
+  // During render, so the DOM is restored before React commits the new content against it.
+  const renderedContent = React.useRef(content);
+  if (renderedContent.current !== content) {
+    renderedContent.current = content;
+    clearAll();
+  }
+
+  React.useEffect(() => clearAll, [clearAll]);
+
+  return React.useMemo(
+    () => ({
+      streaming,
+      track: (clear) => {
+        active.current.add(clear);
+        return () => active.current.delete(clear);
+      },
+    }),
+    [streaming]
+  );
+}
diff --git a/packages/apollo-react/src/chat/wind/renderers/code-block-actions.tsx b/packages/apollo-react/src/chat/wind/renderers/code-block-actions.tsx
new file mode 100644
index 0000000000..579dc3d6c0
--- /dev/null
+++ b/packages/apollo-react/src/chat/wind/renderers/code-block-actions.tsx
@@ -0,0 +1,140 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import {
+  Button,
+  CodeBlock,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+  type MarkdownCodeBlock,
+} from '@uipath/apollo-wind';
+import { Code, Eye, Maximize2, X } from 'lucide-react';
+import React from 'react';
+
+import { buildHtmlPreviewDocument } from '../../headless/markdown/html-preview';
+import { useDialogContainer } from '../common/dialog-container';
+
+type View = 'code' | 'preview';
+
+// Inline styles and scripts, and images and fonts from data: or https:, cover ordinary snippets;
+// nothing else loads (no fetch, no external scripts or stylesheets, no nested frames).
+const PREVIEW_CSP =
+  "default-src 'none'; img-src data: https:; font-src data: https:; style-src 'unsafe-inline'; script-src 'unsafe-inline'";
+
+interface CodeBlockActionsProps {
+  block: MarkdownCodeBlock;
+  /** `disabledFeatures.htmlPreview` is off, so HTML blocks offer a preview. */
+  htmlPreview: boolean;
+  /** The message is still streaming: the block may be incomplete, so it is not previewed yet. */
+  streaming: boolean;
+}
+
+/**
+ * Header actions for a fenced code block, as in Material: expand to a large view and, for HTML
+ * when enabled, a preview. The preview is a sandboxed iframe that may run scripts but never shares
+ * the host's origin.
+ */
+export function CodeBlockActions({ block, htmlPreview, streaming }: CodeBlockActionsProps) {
+  const { _ } = useLingui();
+  const [view, setView] = React.useState<View | null>(null);
+  const dialogContainer = useDialogContainer();
+  // Two buttons open the dialog and neither is a DialogTrigger, so focus returns by hand.
+  const opener = React.useRef<HTMLButtonElement | null>(null);
+  const openAs = (next: View) => (event: React.MouseEvent<HTMLButtonElement>) => {
+    opener.current = event.currentTarget;
+    setView(next);
+  };
+  const previewable = htmlPreview && block.language?.trim().toLowerCase() === 'html';
+  // Falls back to the code if the flag is turned off or the block streams again while open.
+  const showPreview = view === 'preview' && previewable && !streaming;
+  const codeLabel = _(msg({ id: 'autopilot-chat.message.code-block-code', message: `Show code` }));
+  const previewLabel = _(
+    msg({ id: 'autopilot-chat.message.code-block-preview', message: `Preview` })
+  );
+  const previewTitle = _(
+    msg({ id: 'autopilot-chat.message.html-preview', message: `HTML preview` })
+  );
+  const expandLabel = _(msg({ id: 'autopilot-chat.message.expand', message: `Expand` }));
+  const closeLabel = _(msg({ id: 'autopilot-chat.message.dialog-close', message: `Close` }));
+
+  return (
+    <>
+      {previewable && (
+        <Button
+          variant="ghost"
+          size="2xs"
+          icon
+          aria-label={previewLabel}
+          title={previewLabel}
+          disabled={streaming}
+          onClick={openAs('preview')}
+        >
+          <Eye aria-hidden />
+        </Button>
+      )}
+      <Button
+        variant="ghost"
+        size="2xs"
+        icon
+        aria-label={expandLabel}
+        title={expandLabel}
+        onClick={openAs('code')}
+      >
+        <Maximize2 aria-hidden />
+      </Button>
+      <Dialog open={view !== null} onOpenChange={(open) => !open && setView(null)}>
+        <DialogContent
+          container={dialogContainer}
+          onCloseAutoFocus={(event) => {
+            event.preventDefault();
+            opener.current?.focus();
+          }}
+          showCloseButton={false}
+          aria-describedby={undefined}
+          className="flex h-[90vh] max-h-[900px] w-[95vw] max-w-[1400px] flex-col gap-3 p-4 sm:max-w-[1400px]"
+        >
+          <div className="flex items-center gap-2">
+            <DialogTitle className="min-w-0 flex-1 truncate text-sm">
+              {showPreview ? previewTitle : block.language?.trim() || codeLabel}
+            </DialogTitle>
+            {previewable && (
+              <Button
+                variant="ghost"
+                size="2xs"
+                icon
+                aria-label={showPreview ? codeLabel : previewLabel}
+                title={showPreview ? codeLabel : previewLabel}
+                disabled={streaming}
+                onClick={() => setView(showPreview ? 'code' : 'preview')}
+              >
+                {showPreview ? <Code aria-hidden /> : <Eye aria-hidden />}
+              </Button>
+            )}
+            <DialogClose asChild>
+              <Button variant="ghost" size="2xs" icon aria-label={closeLabel} title={closeLabel}>
+                <X aria-hidden />
+              </Button>
+            </DialogClose>
+          </div>
+          <div className="min-h-0 flex-1 overflow-auto">
+            {showPreview ? (
+              <iframe
+                data-slot="wind-chat-html-preview"
+                // Scripts may run, but without allow-same-origin the page cannot reach the host.
+                sandbox="allow-scripts"
+                srcDoc={buildHtmlPreviewDocument(block.code, {
+                  contentSecurityPolicy: PREVIEW_CSP,
+                })}
+                title={previewTitle}
+                className="size-full rounded-lg border border-border-subtle bg-white"
+              />
+            ) : (
+              <CodeBlock code={block.code} language={block.language} wrap hideHeader />
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/packages/apollo-react/src/chat/wind/renderers/index.ts b/packages/apollo-react/src/chat/wind/renderers/index.ts
index ca803cf6f7..d918cf4cc9 100644
--- a/packages/apollo-react/src/chat/wind/renderers/index.ts
+++ b/packages/apollo-react/src/chat/wind/renderers/index.ts
@@ -1,11 +1,11 @@
 import type { ChatBuiltInMessageRenderer } from '../../headless/message-renderers';
 import { DEFAULT_MESSAGE_RENDERER } from '../../service';
-import { TextMessageRenderer } from './text-renderer';
+import { MarkdownMessageRenderer } from './markdown-renderer';
 
 /**
  * The message renderers the Wind renderer ships with. At module scope: components are element
- * types, so a new list per render would remount every message.
+ * types, so a new list per render remounts every message.
  */
 export const WIND_MESSAGE_RENDERERS: readonly ChatBuiltInMessageRenderer[] = [
-  { name: DEFAULT_MESSAGE_RENDERER, component: TextMessageRenderer },
+  { name: DEFAULT_MESSAGE_RENDERER, component: MarkdownMessageRenderer },
 ];
diff --git a/packages/apollo-react/src/chat/wind/renderers/markdown-citation.tsx b/packages/apollo-react/src/chat/wind/renderers/markdown-citation.tsx
new file mode 100644
index 0000000000..e611e48954
--- /dev/null
+++ b/packages/apollo-react/src/chat/wind/renderers/markdown-citation.tsx
@@ -0,0 +1,68 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Citation } from '@uipath/apollo-wind';
+import React from 'react';
+
+import { useOpenCitation } from '../../headless/hooks/use-citations';
+import { highlightCitedRange } from '../../headless/markdown/citation-highlight';
+import { type CitationMarker, citationFromMarker } from '../../headless/markdown/citations';
+import { CitationHighlightsContext } from './citation-highlights';
+
+/** A `citation` node from `citationPlugin`: a pill that previews, highlights and opens its source. */
+export function MarkdownCitation(marker: CitationMarker) {
+  const { _ } = useLingui();
+  const openCitation = useOpenCitation();
+  const ref = React.useRef<HTMLButtonElement>(null);
+  const highlights = React.useContext(CitationHighlightsContext);
+  const clearHighlight = React.useRef<(() => void) | undefined>(undefined);
+  const { id, title, page_number } = marker;
+  const page = page_number
+    ? _(msg({ id: 'autopilot-chat.message.page-number', message: `Page ${page_number}` }))
+    : undefined;
+  const pageText = page ? ` (${page})` : '';
+
+  const setActive = (active: boolean) => {
+    clearHighlight.current?.();
+    clearHighlight.current = undefined;
+    const container = ref.current?.closest('[data-chat-message-id]');
+    // The preview still shows while streaming; only the range waits for the text to settle.
+    if (!active || highlights.streaming || !ref.current || !container) {
+      return;
+    }
+    const clear = highlightCitedRange(
+      Number(id),
+      ref.current,
+      container,
+      'var(--color-background-highlight)'
+    );
+    if (clear) {
+      let untrack = () => {};
+      const clearOnce = () => {
+        untrack();
+        clear();
+        if (clearHighlight.current === clearOnce) clearHighlight.current = undefined;
+      };
+      untrack = highlights.track(clearOnce);
+      clearHighlight.current = clearOnce;
+    }
+  };
+
+  return (
+    <Citation
+      ref={ref}
+      // The highlighter skips its own markers by this attribute, as in Material.
+      data-citation-sup="true"
+      index={id}
+      title={title}
+      source={page}
+      aria-label={_(
+        msg({
+          id: 'autopilot-chat.message.citation-aria-label',
+          message: `Citation ${id}: ${title}${pageText}`,
+        })
+      )}
+      onActiveChange={setActive}
+      onSelect={() => openCitation(citationFromMarker(marker))}
+    />
+  );
+}
diff --git a/packages/apollo-react/src/chat/wind/renderers/markdown-renderer.test.tsx b/packages/apollo-react/src/chat/wind/renderers/markdown-renderer.test.tsx
new file mode 100644
index 0000000000..df60e64d3c
--- /dev/null
+++ b/packages/apollo-react/src/chat/wind/renderers/markdown-renderer.test.tsx
@@ -0,0 +1,329 @@
+import { act, render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  ApChat,
+  type AutopilotChatMessage,
+  AutopilotChatMode,
+  AutopilotChatPreHookAction,
+  type AutopilotChatRenderer,
+  AutopilotChatService,
+} from '../../index';
+
+let instanceCounter = 0;
+const createService = (renderer: AutopilotChatRenderer = 'wind') =>
+  AutopilotChatService.Instantiate({
+    instanceName: `wind-markdown-${++instanceCounter}`,
+    config: { mode: AutopilotChatMode.FullScreen, renderer },
+  });
+
+const reply = (extra: Partial<AutopilotChatMessage> & { id?: string } = {}) => ({
+  widget: 'apollo-markdown-renderer',
+  created_at: '',
+  ...extra,
+});
+
+const CITED = reply({
+  id: 'c1',
+  groupId: 'g1',
+  content: 'The sky is blue.',
+  contentParts: [
+    { text: 'The sky ' },
+    {
+      text: 'is blue',
+      citations: [
+        { id: 1, title: 'Web', url: 'https://a.test/sky' },
+        { id: 2, title: 'Guide', download_url: 'https://a.test/g.pdf', page_number: 3 },
+      ],
+    },
+    { text: '.' },
+  ],
+});
+
+const messageElement = (id: string) =>
+  document.querySelector(`[data-chat-message-id="${id}"]`) as HTMLElement;
+
+afterEach(() => vi.restoreAllMocks());
+
+describe('Wind markdown renderer', () => {
+  it('renders markdown through the Markdown primitive, with images as links', () => {
+    const service = createService();
+    render(<ApChat chatServiceInstance={service} />);
+
+    act(() =>
+      service.sendResponse(
+        reply({
+          id: 'm1',
+          content:
+            '## Title\n\n- one\n- two\n\n| A | B |\n| - | - |\n| 1 | 2 |\n\n```ts\nconst a = 1;\n```\n\n![logo](https://a.test/logo.png)',
+        })
+      )
+    );
+
+    const message = messageElement('m1');
+    expect(within(message).getByRole('heading', { level: 2 })).toHaveTextContent('Title');
+    expect(within(message).getAllByRole('listitem')).toHaveLength(2);
+    expect(within(message).getByRole('table')).toBeInTheDocument();
+    expect(message.querySelector('[data-slot="code-block"]')).toHaveTextContent('const a = 1;');
+    expect(message.querySelector('img')).toBeNull();
+    expect(within(message).getByRole('link', { name: 'logo' })).toHaveAttribute(
+      'href',
+      'https://a.test/logo.png'
+    );
+  });
+
+  it('maps resource tokens to chips, buffering one split across chunks', () => {
+    const service = createService();
+    render(<ApChat chatServiceInstance={service} />);
+    const now = vi.spyOn(Date, 'now');
+
+    act(() => service.sendResponse(reply({ id: 'r1', content: 'Update ', stream: true })));
+    now.mockReturnValue(1_000);
+    act(() =>
+      service.sendResponse(
+        reply({ id: 'r1', content: '[[resource-token:{"id":"v",', stream: true })
+      )
+    );
+    expect(messageElement('r1')).not.toHaveTextContent('resource-token');
+
+    now.mockReturnValue(2_000);
+    act(() =>
+      service.sendResponse(
+        reply({
+          id: 'r1',
+          content: '"type":"variable","icon":"mail","displayName":"email"}]] now.',
+          stream: true,
+          done: true,
+        })
+      )
+    );
+
+    const chip = messageElement('r1').querySelector('[data-slot="wind-chat-resource-chip"]');
+    expect(chip).toHaveTextContent('email');
+    expect(messageElement('r1')).toHaveTextContent('Update email now.');
+  });
+
+  it('shows the caret and marks the body busy only while the reply streams', () => {
+    const service = createService();
+    render(<ApChat chatServiceInstance={service} />);
+
+    act(() => service.sendResponse(reply({ id: 's1', content: 'Hello', stream: true })));
+    const body = messageElement('s1').querySelector('[data-slot="markdown"]') as HTMLElement;
+    expect(body).toHaveAttribute('aria-busy', 'true');
+    expect(body.querySelector('[data-slot="markdown-cursor"]')).not.toBeNull();
+
+    act(() => service.sendResponse(reply({ id: 's1', content: '!', stream: true, done: true })));
+    expect(body).not.toHaveAttribute('aria-busy');
+    expect(body.querySelector('[data-slot="markdown-cursor"]')).toBeNull();
+  });
+
+  it('offers an HTML preview only when htmlPreview is enabled, sandboxed, and not mid-stream', async () => {
+    const service = createService();
+    render(<ApChat chatServiceInstance={service} />);
+    const html = '```html\n<h1>Hi</h1>\n```';
+
+    act(() => service.sendResponse(reply({ id: 'h1', content: html })));
+    // The service disables htmlPreview by default.
+    expect(within(messageElement('h1')).queryByRole('button', { name: 'Preview' })).toBeNull();
+    expect(
+      within(messageElement('h1')).getByRole('button', { name: 'Expand' })
+    ).toBeInTheDocument();
+
+    act(() => service.setDisabledFeatures({ htmlPreview: false }));
+    act(() => service.sendResponse(reply({ id: 'h2', content: html, stream: true })));
+    expect(within(messageElement('h2')).getByRole('button', { name: 'Preview' })).toBeDisabled();
+
+    await userEvent.click(within(messageElement('h1')).getByRole('button', { name: 'Preview' }));
+    const frame = (await screen.findByRole('dialog')).querySelector('iframe') as HTMLIFrameElement;
+    expect(frame).toHaveAttribute('sandbox', 'allow-scripts');
+    expect(frame.getAttribute('srcdoc')).toMatch(/<h1>Hi<\/h1>$/);
+  });
+
+  it('highlights the cited text while a citation is hovered', async () => {
+    const service = createService();
+    render(<ApChat chatServiceInstance={service} />);
+    act(() => service.sendResponse(CITED));
+    const message = messageElement('c1');
+    const highlighted = () =>
+      [...message.querySelectorAll<HTMLElement>('span')]
+        .filter((span) => span.style.backgroundColor.includes('--color-background-highlight'))
+        .map((span) => span.textContent);
+
+    const citation = within(message).getByRole('button', { name: /^Citation 1: Web/ });
+    await userEvent.hover(citation);
+    expect(highlighted()).toEqual(['is blue']);
+
+    await userEvent.unhover(citation);
+    await waitFor(() => expect(highlighted()).toEqual([]));
+  });
+
+  it('keeps a citation with an unsafe URL a button and never opens it', async () => {
+    const service = createService();
+    const open = vi.spyOn(window, 'open').mockReturnValue(null);
+    const hook = vi.fn().mockResolvedValue(true);
+    service.setPreHook(AutopilotChatPreHookAction.CitationClick, hook);
+    render(<ApChat chatServiceInstance={service} />);
+    const unsafe = { id: 1, title: 'Bad', url: 'javascript:alert(1)' };
+
+    act(() =>
+      service.sendResponse(
+        reply({ id: 'u1', groupId: 'g2', contentParts: [{ text: 'Claim', citations: [unsafe] }] })
+      )
+    );
+    const message = messageElement('u1');
+    expect(message.querySelector('a[href^="javascript"]')).toBeNull();
+    await userEvent.click(within(message).getByRole('button', { name: /^Citation 1: Bad/ }));
+    const sources = message.querySelector('[data-slot="wind-chat-sources"]') as HTMLElement;
+    await userEvent.click(within(sources).getByRole('button', { name: /Sources/ }));
+    await userEvent.click(await within(sources).findByRole('button', { name: /Bad/ }));
+
+    await waitFor(() => expect(hook).toHaveBeenCalledTimes(2));
+    expect(hook).toHaveBeenCalledWith({ citation: unsafe });
+    expect(message.querySelector('a[href^="javascript"]')).toBeNull();
+    expect(open).not.toHaveBeenCalled();
+  });
+
+  it('does not highlight while the reply streams, and survives chunks with a pill active', async () => {
+    const service = createService();
+    render(<ApChat chatServiceInstance={service} />);
+    const now = vi.spyOn(Date, 'now');
+    const chunk = (text: string, extra: object = {}) =>
+      service.sendResponse(
+        reply({ id: 'sc', stream: true, contentPartChunk: { index: 0, text, ...extra } })
+      );
+
+    act(() => chunk('The sky', { citation: { id: 1, title: 'Web', url: 'https://a.test' } }));
+    const message = messageElement('sc');
+    const citation = within(message).getByRole('button', { name: /^Citation 1: Web/ });
+    await userEvent.hover(citation);
+    expect(message.querySelector('span[style*="--color-background-highlight"]')).toBeNull();
+
+    now.mockReturnValue(1_000);
+    act(() => chunk(' is blue'));
+    now.mockReturnValue(2_000);
+    act(() =>
+      service.sendResponse(
+        reply({ id: 'sc', stream: true, done: true, contentPartChunk: { index: 1, text: '.' } })
+      )
+    );
+    expect(message).toHaveTextContent('The sky');
+  });
+
+  it('removes an active highlight before the reply re-renders with new content', async () => {
+    const service = createService();
+    render(<ApChat chatServiceInstance={service} />);
+    act(() => service.sendResponse(CITED));
+    const message = messageElement('c1');
+    await userEvent.hover(within(message).getByRole('button', { name: /^Citation 1: Web/ }));
+    expect(message.querySelector('span[style*="--color-background-highlight"]')).not.toBeNull();
+
+    act(() =>
+      service.sendResponse({
+        ...CITED,
+        contentParts: [
+          { text: 'The sea ' },
+          { text: 'is blue too', citations: [{ id: 1, title: 'Web', url: 'https://a.test/sea' }] },
+        ],
+      })
+    );
+
+    expect(message).toHaveTextContent('The sea is blue too');
+    expect(message.querySelector('span[style*="--color-background-highlight"]')).toBeNull();
+  });
+
+  it('drops an open preview for the code when htmlPreview is turned off', async () => {
+    const service = createService();
+    service.setDisabledFeatures({ htmlPreview: false });
+    render(<ApChat chatServiceInstance={service} />);
+    act(() => service.sendResponse(reply({ id: 'h3', content: '```html\n<h1>Hi</h1>\n```' })));
+
+    await userEvent.click(within(messageElement('h3')).getByRole('button', { name: 'Preview' }));
+    const dialog = await screen.findByRole('dialog');
+    const frame = dialog.querySelector('iframe') as HTMLIFrameElement;
+    expect(frame.getAttribute('srcdoc')).toMatch(
+      /^<meta name="referrer" content="no-referrer"><meta http-equiv="Content-Security-Policy" content="default-src 'none';[^"]*"><h1>Hi<\/h1>$/
+    );
+
+    act(() => service.setDisabledFeatures({ htmlPreview: true }));
+
+    expect(dialog.querySelector('iframe')).toBeNull();
+    expect(dialog.querySelector('[data-slot="code-block"]')).toHaveTextContent('<h1>Hi</h1>');
+  });
+
+  it('lists the sources under the reply and opens one through the pre-hook', async () => {
+    const service = createService();
+    const hook = vi.fn().mockResolvedValue(false);
+    service.setPreHook(AutopilotChatPreHookAction.CitationClick, hook);
+    render(<ApChat chatServiceInstance={service} />);
+
+    act(() => service.sendResponse(CITED));
+    const sources = messageElement('c1').querySelector(
+      '[data-slot="wind-chat-sources"]'
+    ) as HTMLElement;
+    await userEvent.click(within(sources).getByRole('button', { name: /Sources/ }));
+    await userEvent.click(await within(sources).findByRole('button', { name: /Guide/ }));
+
+    await waitFor(() =>
+      expect(hook).toHaveBeenCalledWith({
+        citation: { id: 2, title: 'Guide', download_url: 'https://a.test/g.pdf', page_number: 3 },
+      })
+    );
+  });
+});
+
+describe('citation parity', () => {
+  async function clickCitation(renderer: AutopilotChatRenderer) {
+    const service = createService(renderer);
+    const hook = vi.fn().mockResolvedValue(false);
+    service.setPreHook(AutopilotChatPreHookAction.CitationClick, hook);
+    const { unmount } = render(<ApChat chatServiceInstance={service} />);
+    act(() => service.sendResponse(CITED));
+
+    const citation = await screen.findByRole(
+      'button',
+      { name: /^Citation 2: Guide/ },
+      { timeout: 25_000 }
+    );
+    await userEvent.click(citation);
+    await waitFor(() => expect(hook).toHaveBeenCalledTimes(1));
+    unmount();
+
+    return hook.mock.calls[0]?.[0];
+  }
+
+  it('gives the citation-click pre-hook the same payload from Wind and Material', async () => {
+    const material = await clickCitation('material');
+    const wind = await clickCitation('wind');
+
+    expect(wind).toEqual(material);
+    expect(wind).toEqual({
+      citation: { id: 2, title: 'Guide', download_url: 'https://a.test/g.pdf', page_number: 3 },
+    });
+  }, 40_000);
+
+  it('never opens an unsafe citation URL from Material either, but still asks the pre-hook', async () => {
+    const service = createService('material');
+    const open = vi.spyOn(window, 'open').mockReturnValue(null);
+    const hook = vi.fn().mockResolvedValue(true);
+    service.setPreHook(AutopilotChatPreHookAction.CitationClick, hook);
+    render(<ApChat chatServiceInstance={service} />);
+    const unsafe = { id: 1, title: 'Bad', url: 'javascript:alert(1)' };
+    act(() =>
+      service.sendResponse(
+        reply({ id: 'mu', groupId: 'g3', contentParts: [{ text: 'Claim', citations: [unsafe] }] })
+      )
+    );
+
+    await userEvent.click(
+      await screen.findByRole('button', { name: /^Citation 1: Bad/ }, { timeout: 25_000 })
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Sources' }));
+    await userEvent.click(await screen.findByText('[1] Bad'));
+
+    await waitFor(() => expect(hook).toHaveBeenCalledTimes(2));
+    expect(hook).toHaveBeenNthCalledWith(1, { citation: unsafe });
+    expect(hook).toHaveBeenNthCalledWith(2, { citation: unsafe });
+    expect(open).not.toHaveBeenCalled();
+  }, 40_000);
+});
diff --git a/packages/apollo-react/src/chat/wind/renderers/markdown-renderer.tsx b/packages/apollo-react/src/chat/wind/renderers/markdown-renderer.tsx
new file mode 100644
index 0000000000..2b09ac29a2
--- /dev/null
+++ b/packages/apollo-react/src/chat/wind/renderers/markdown-renderer.tsx
@@ -0,0 +1,80 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Markdown, type MarkdownCodeBlock, type MarkdownProps } from '@uipath/apollo-wind';
+import React from 'react';
+
+import { useIsStreamingMessage } from '../../headless/hooks/use-is-streaming-message';
+import { useStreamedMessageContent } from '../../headless/hooks/use-streamed-message-content';
+import { citationPlugin } from '../../headless/markdown/citation-parser';
+import { resourceTokenPlugin } from '../../headless/markdown/resource-token-parser';
+import { useChatState } from '../../headless/providers/chat-state-provider';
+import type { AutopilotChatMessage } from '../../service';
+import { CitationHighlightsContext, useCitationHighlights } from './citation-highlights';
+import { CodeBlockActions } from './code-block-actions';
+import { MarkdownCitation } from './markdown-citation';
+import { MarkdownResourceChip } from './markdown-resource-chip';
+
+const REMARK_PLUGINS: MarkdownProps['remarkPlugins'] = [citationPlugin, resourceTokenPlugin];
+
+// The plugins' custom nodes; react-markdown's types only list HTML elements.
+const COMPONENTS = {
+  citation: MarkdownCitation,
+  'resource-chip': MarkdownResourceChip,
+} as unknown as MarkdownProps['components'];
+
+function useMarkdownStrings(): MarkdownProps['strings'] {
+  const { _ } = useLingui();
+
+  return React.useMemo(
+    () => ({
+      copy: _(msg({ id: 'autopilot-chat.message.code-block-copy', message: `Copy code` })),
+      copied: _(msg({ id: 'autopilot-chat.message.actions.copied', message: `Copied` })),
+      plainText: _(msg({ id: 'autopilot-chat.message.code-block-language', message: `Code` })),
+      footnotes: _(msg({ id: 'autopilot-chat.message.footnote-label', message: `Footnotes` })),
+      footnoteBack: _(
+        msg({ id: 'autopilot-chat.message.footnote-back', message: `Back to content` })
+      ),
+      taskDone: _(msg({ id: 'autopilot-chat.message.task-done', message: `Done` })),
+      taskOpen: _(msg({ id: 'autopilot-chat.message.task-open', message: `Not done` })),
+    }),
+    [_]
+  );
+}
+
+/**
+ * The Wind default message body: markdown with citations and resource chips, following streamed
+ * chunks as Material does. Only this component re-renders per chunk.
+ */
+function MarkdownMessageRendererComponent({ message }: { message: AutopilotChatMessage }) {
+  const { content, fakeStreaming } = useStreamedMessageContent(message);
+  const { isStreaming } = useIsStreamingMessage(message);
+  const { disabledFeatures } = useChatState();
+  const strings = useMarkdownStrings();
+  const streaming = !!isStreaming || fakeStreaming;
+  const htmlPreview = !disabledFeatures.htmlPreview;
+  const highlights = useCitationHighlights(content, streaming);
+
+  const renderCodeActions = React.useCallback(
+    (block: MarkdownCodeBlock) => (
+      <CodeBlockActions block={block} htmlPreview={htmlPreview} streaming={streaming} />
+    ),
+    [htmlPreview, streaming]
+  );
+
+  return (
+    <CitationHighlightsContext.Provider value={highlights}>
+      <Markdown
+        streaming={streaming}
+        codeWrap
+        remarkPlugins={REMARK_PLUGINS}
+        components={COMPONENTS}
+        renderCodeActions={renderCodeActions}
+        strings={strings}
+      >
+        {content}
+      </Markdown>
+    </CitationHighlightsContext.Provider>
+  );
+}
+
+export const MarkdownMessageRenderer = React.memo(MarkdownMessageRendererComponent);
diff --git a/packages/apollo-react/src/chat/wind/renderers/markdown-resource-chip.tsx b/packages/apollo-react/src/chat/wind/renderers/markdown-resource-chip.tsx
new file mode 100644
index 0000000000..cae511353f
--- /dev/null
+++ b/packages/apollo-react/src/chat/wind/renderers/markdown-resource-chip.tsx
@@ -0,0 +1,16 @@
+import type { AutopilotChatResourceItem } from '../../service';
+import { ServiceIcon } from '../common/service-icon';
+
+/** A `resource-chip` node from `resourceTokenPlugin`: the resource's icon and name, inline. */
+export function MarkdownResourceChip({ icon, displayName }: AutopilotChatResourceItem) {
+  return (
+    <span
+      data-slot="wind-chat-resource-chip"
+      title={displayName}
+      className="mx-0.5 inline-flex max-w-60 items-center gap-1 rounded-md bg-surface-overlay px-1.5 align-bottom text-[0.875em] font-medium [&_svg]:size-3.5 [&_svg]:shrink-0"
+    >
+      <ServiceIcon icon={icon} />
+      <span className="truncate">{displayName}</span>
+    </span>
+  );
+}
diff --git a/packages/apollo-react/src/chat/wind/renderers/text-renderer.tsx b/packages/apollo-react/src/chat/wind/renderers/text-renderer.tsx
deleted file mode 100644
index 67858ee1f0..0000000000
--- a/packages/apollo-react/src/chat/wind/renderers/text-renderer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-
-import { stripResourceTokens } from '../../headless/markdown/resource-token-parser';
-import { useChatService } from '../../headless/providers/chat-service.provider';
-import { AutopilotChatEvent, type AutopilotChatMessage } from '../../service';
-
-/**
- * Plain-text message body that follows streamed chunks. A stand-in for the markdown renderer.
- */
-export function TextMessageRenderer({ message }: { message: AutopilotChatMessage }) {
-  const chatService = useChatService();
-  const [content, setContent] = React.useState(message.content);
-
-  React.useEffect(() => setContent(message.content), [message.content]);
-
-  React.useEffect(
-    () =>
-      chatService.on(AutopilotChatEvent.SendChunk, (chunk: AutopilotChatMessage) => {
-        if (chunk.id !== message.id) {
-          return;
-        }
-        // The service accumulates chunks on the stored message; read it rather than re-joining.
-        const stored = chatService.getConversation().find((entry) => entry.id === message.id);
-        setContent(stored?.content ?? '');
-      }),
-    [chatService, message.id]
-  );
-
-  return <p className="whitespace-pre-wrap break-words">{stripResourceTokens(content)}</p>;
-}
diff --git a/packages/apollo-react/src/material/components/ap-chat/components/message/chat-message-content.tsx b/packages/apollo-react/src/material/components/ap-chat/components/message/chat-message-content.tsx
index e8efd5822a..8dfdcf02b6 100644
--- a/packages/apollo-react/src/material/components/ap-chat/components/message/chat-message-content.tsx
+++ b/packages/apollo-react/src/material/components/ap-chat/components/message/chat-message-content.tsx
@@ -124,7 +124,7 @@ const WidgetContainer = React.memo(
         {isLastInGroup && (
           <>
             {message.role === AutopilotChatRole.Assistant && (
-              <AutopilotChatSources groupId={message.groupId ?? ''} message={message} />
+              <AutopilotChatSources message={message} />
             )}
             <AutopilotChatMessageActions message={message} containerElement={containerRef} />
           </>
@@ -169,7 +169,7 @@ function AutopilotChatMessageContentComponent({
         {isLastInGroup && (
           <>
             {message.role === AutopilotChatRole.Assistant && (
-              <AutopilotChatSources groupId={message.groupId ?? ''} message={message} />
+              <AutopilotChatSources message={message} />
             )}
             {!disableActions && (
               <AutopilotChatMessageActions message={message} containerElement={containerRef} />
diff --git a/packages/apollo-react/src/material/components/ap-chat/components/message/markdown/citation.tsx b/packages/apollo-react/src/material/components/ap-chat/components/message/markdown/citation.tsx
index 6e468636e4..6fe3876b13 100644
--- a/packages/apollo-react/src/material/components/ap-chat/components/message/markdown/citation.tsx
+++ b/packages/apollo-react/src/material/components/ap-chat/components/message/markdown/citation.tsx
@@ -2,45 +2,18 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Box } from '@mui/material';
 import token, { FontVariantToken } from '@uipath/apollo-core';
-import { useChatService } from '@uipath/apollo-react/chat/headless/providers/chat-service.provider';
-import { useChatState } from '@uipath/apollo-react/chat/headless/providers/chat-state-provider';
+import { useOpenCitation } from '@uipath/apollo-react/chat/headless/hooks/use-citations';
+import { highlightCitedRange } from '@uipath/apollo-react/chat/headless/markdown/citation-highlight';
 import {
-  AutopilotChatPreHookAction,
-  CHAT_CITATION_START,
-  type PdfCitation,
-  type UrlCitation,
-} from '@uipath/apollo-react/chat/service';
+  citationFromMarker,
+  getCitationUrl,
+} from '@uipath/apollo-react/chat/headless/markdown/citations';
+import { useChatState } from '@uipath/apollo-react/chat/headless/providers/chat-state-provider';
 import { ApIcon } from '@uipath/apollo-react/material/components/ap-icon';
 import { ApTypography } from '@uipath/apollo-react/material/components/ap-typography';
 import React from 'react';
 import { AutopilotChatTooltip } from '../../common/tooltip';
 
-// Helpers for additive range highlighting
-const getNearestStartMarker = (
-  id: number,
-  container: Element,
-  endEl: Element
-): HTMLElement | null => {
-  const candidates = Array.from(
-    container.querySelectorAll(`.${CHAT_CITATION_START}[data-citation-ids~="${id}"]`)
-  ) as HTMLElement[];
-  if (candidates.length === 0) {
-    return null;
-  }
-  let nearest: HTMLElement | null = null;
-  for (const marker of candidates) {
-    const rel = marker.compareDocumentPosition(endEl);
-    const isBefore =
-      !!(rel & Node.DOCUMENT_POSITION_FOLLOWING) || !!(rel & Node.DOCUMENT_POSITION_CONTAINS);
-    if (isBefore) {
-      nearest = marker;
-    }
-  }
-  return nearest;
-};
-
-type HighlightState = { highlightedElements: HTMLElement[]; wrappedTextSpans: HTMLElement[] };
-
 interface CitationProps {
   id: number;
   title: string;
@@ -50,144 +23,47 @@ interface CitationProps {
   messageId: string;
 }
 
-const highlightRange = (
-  startMarker: HTMLElement,
-  endEl: HTMLElement,
-  container: Element,
-  color: string
-): HighlightState => {
-  const highlightedElements: HTMLElement[] = [];
-  const wrappedTextSpans: HTMLElement[] = [];
-
-  const walker = document.createTreeWalker(
-    container,
-    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
-  );
-  // Position walker just before start marker: iterate until startMarker found
-  while (walker.nextNode()) {
-    if (walker.currentNode === startMarker) {
-      break;
-    }
-  }
-
-  // Now advance and highlight until we reach endEl
-  while (walker.nextNode()) {
-    const node = walker.currentNode;
-    if (node === endEl) {
-      break;
-    }
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      const el = node as HTMLElement;
-      if (el === startMarker) {
-        continue;
-      }
-      // Do not highlight our citation superscripts or anything inside them
-      if (el.closest('[data-citation-sup="true"]')) {
-        continue;
-      }
-      el.style.transition = 'background-color 0.2s';
-      el.style.backgroundColor = color;
-      highlightedElements.push(el);
-    } else if (node.nodeType === Node.TEXT_NODE) {
-      const text = node as Text;
-      if (
-        text.textContent &&
-        text.textContent.trim().length > 0 &&
-        text.parentElement &&
-        // Skip text that lives inside citation superscripts
-        !text.parentElement.closest('[data-citation-sup="true"]')
-      ) {
-        const span = document.createElement('span');
-        span.style.backgroundColor = color;
-        text.parentElement.insertBefore(span, text);
-        span.appendChild(text);
-        wrappedTextSpans.push(span);
-      }
-    }
-  }
-
-  return {
-    highlightedElements,
-    wrappedTextSpans,
-  };
-};
-
-const clearHighlightRange = (state?: HighlightState) => {
-  if (!state) {
-    return;
-  }
-  state.highlightedElements.forEach((el) => {
-    el.style.backgroundColor = '';
-    el.style.transition = '';
-  });
-  state.wrappedTextSpans.forEach((span) => {
-    const parent = span.parentNode;
-    while (span.firstChild) {
-      parent?.insertBefore(span.firstChild, span);
-    }
-    parent?.removeChild(span);
-  });
-};
-
 export const Citation = React.memo(
   ({ id, title, url, page_number, download_url, messageId }: CitationProps) => {
     const { _ } = useLingui();
     const pageText = page_number
       ? ` (${_(msg({ id: 'autopilot-chat.message.page-number', message: `Page ${page_number}` }))})`
       : '';
-    const chatService = useChatService();
     const { spacing } = useChatState();
+    const openCitation = useOpenCitation();
     const ref = React.useRef<HTMLDivElement>(null);
     const [open, setOpen] = React.useState(false);
-    const highlightStateRef = React.useRef<HighlightState | undefined>(undefined);
-    const finalUrl = url || `${download_url}${page_number ? `#page=${page_number}` : ''}`;
+    const clearHighlightRef = React.useRef<(() => void) | undefined>(undefined);
+    // What a click will open, so the cursor only promises what happens.
+    const finalUrl = getCitationUrl(
+      citationFromMarker({ id, title, url, download_url, page_number, messageId })
+    );
 
     const handleOpen = React.useCallback(() => {
       setOpen(true);
 
       if (id && ref.current) {
         const container = ref.current.closest(`[id="${messageId}"]`)!;
-        const startMarker = getNearestStartMarker(id, container, ref.current);
-        if (startMarker) {
-          highlightStateRef.current = highlightRange(
-            startMarker,
-            ref.current,
-            container,
-            'var(--color-background-highlight)'
-          );
-        }
+        clearHighlightRef.current = highlightCitedRange(
+          id,
+          ref.current,
+          container,
+          'var(--color-background-highlight)'
+        );
       }
     }, [id, messageId]);
 
     const handleClose = React.useCallback(() => {
       setOpen(false);
-      clearHighlightRange(highlightStateRef.current);
-      highlightStateRef.current = undefined;
+      clearHighlightRef.current?.();
+      clearHighlightRef.current = undefined;
     }, []);
 
-    const handleClick = React.useCallback(() => {
-      if (!chatService) {
-        return;
-      }
-
-      const source: UrlCitation | PdfCitation = url
-        ? { id, title, url }
-        : {
-            id,
-            title,
-            download_url: download_url!,
-            page_number: page_number!,
-          };
-
-      chatService
-        .getPreHook(AutopilotChatPreHookAction.CitationClick)({ citation: source })
-        .then((proceed) => {
-          if (!proceed || !finalUrl) {
-            return;
-          }
-          window.open(finalUrl, '_blank', 'noopener,noreferrer');
-        });
-    }, [chatService, id, title, url, download_url, page_number, finalUrl]);
+    const handleClick = React.useCallback(
+      () =>
+        openCitation(citationFromMarker({ id, title, url, download_url, page_number, messageId })),
+      [openCitation, id, title, url, download_url, page_number, messageId]
+    );
 
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent) => {
diff --git a/packages/apollo-react/src/material/components/ap-chat/components/message/markdown/code.tsx b/packages/apollo-react/src/material/components/ap-chat/components/message/markdown/code.tsx
index 0269466e2c..c8406e6e7e 100644
--- a/packages/apollo-react/src/material/components/ap-chat/components/message/markdown/code.tsx
+++ b/packages/apollo-react/src/material/components/ap-chat/components/message/markdown/code.tsx
@@ -3,6 +3,7 @@ import { useLingui } from '@lingui/react';
 import CloseIcon from '@mui/icons-material/Close';
 import { Box, IconButton, Modal, styled } from '@mui/material';
 import token from '@uipath/apollo-core';
+import { buildHtmlPreviewDocument } from '@uipath/apollo-react/chat/headless/markdown/html-preview';
 import { useChatState } from '@uipath/apollo-react/chat/headless/providers/chat-state-provider';
 import { useTheme } from '@uipath/apollo-react/chat/headless/providers/theme-provider';
 import { ApChip } from '@uipath/apollo-react/material/components/ap-chip';
@@ -219,7 +220,11 @@ export const Code = React.memo(({ inline, className, children, isStreaming, ...p
   }
 
   const previewContent = (
-    <PreviewIframe sandbox="allow-scripts" srcDoc={codeContent} title="HTML Preview" />
+    <PreviewIframe
+      sandbox="allow-scripts"
+      srcDoc={buildHtmlPreviewDocument(codeContent)}
+      title="HTML Preview"
+    />
   );
 
   const markdownContent = language ? (
diff --git a/packages/apollo-react/src/material/components/ap-chat/components/message/markdown/markdown.tsx b/packages/apollo-react/src/material/components/ap-chat/components/message/markdown/markdown.tsx
index 900f929b8d..7c3cafc86e 100644
--- a/packages/apollo-react/src/material/components/ap-chat/components/message/markdown/markdown.tsx
+++ b/packages/apollo-react/src/material/components/ap-chat/components/message/markdown/markdown.tsx
@@ -6,15 +6,11 @@ import { useLingui } from '@lingui/react';
 import { styled } from '@mui/material';
 import token from '@uipath/apollo-core';
 import { useIsStreamingMessage } from '@uipath/apollo-react/chat/headless/hooks/use-is-streaming-message';
-import {
-  citationPlugin,
-  contentPartsToMarkdown,
-} from '@uipath/apollo-react/chat/headless/markdown/citation-parser';
+import { useStreamedMessageContent } from '@uipath/apollo-react/chat/headless/hooks/use-streamed-message-content';
+import { citationPlugin } from '@uipath/apollo-react/chat/headless/markdown/citation-parser';
 import { resourceTokenPlugin } from '@uipath/apollo-react/chat/headless/markdown/resource-token-parser';
-import { useChatService } from '@uipath/apollo-react/chat/headless/providers/chat-service.provider';
 import { useChatState } from '@uipath/apollo-react/chat/headless/providers/chat-state-provider';
-import { useStreaming } from '@uipath/apollo-react/chat/headless/providers/streaming-provider';
-import { AutopilotChatEvent, type AutopilotChatMessage } from '@uipath/apollo-react/chat/service';
+import type { AutopilotChatMessage } from '@uipath/apollo-react/chat/service';
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
@@ -44,177 +40,11 @@ const MarkdownContainer = styled('div')(() => ({
   gap: token.Spacing.SpacingL,
 }));
 
-const FAKE_STREAM_CHARS_COUNT = 10;
-const FAKE_STREAM_INTERVAL = 50;
-const CHUNK_QUEUE_PROCESS_INTERVAL = 50;
-
-/**
- * Patterns for tokens that should be buffered when incomplete during streaming.
- * Each pattern should match the START of an incomplete token (opened but not yet closed).
- * Add new patterns here as needed.
- *
- * Pattern format: Match the opening sequence with a negative lookahead for the closing sequence.
- * Example: /\[\[my-token:(?![^\]]*\]\])/ matches `[[my-token:` not followed by `]]`
- */
-const INCOMPLETE_TOKEN_PATTERNS: RegExp[] = [
-  /\[\[resource-token:(?!.*\]\])/, // [[resource-token:{...}]]
-];
-
-/**
- * Extracts content that is safe to render, buffering any incomplete tokens.
- * This prevents flickering during streaming when tokens arrive in chunks.
- *
- * @param content - The accumulated content string
- * @returns An object with `renderable` (safe to display) and `buffered` (held back for next chunk)
- */
-function extractRenderableContent(content: string): { renderable: string; buffered: string } {
-  let earliestIndex = -1;
-
-  for (const pattern of INCOMPLETE_TOKEN_PATTERNS) {
-    const match = content.match(pattern);
-    if (match?.index !== undefined) {
-      if (earliestIndex === -1 || match.index < earliestIndex) {
-        earliestIndex = match.index;
-      }
-    }
-  }
-
-  if (earliestIndex === -1) {
-    return { renderable: content, buffered: '' };
-  }
-
-  return {
-    renderable: content.slice(0, earliestIndex),
-    buffered: content.slice(earliestIndex),
-  };
-}
-
 function AutopilotChatMarkdownRendererComponent({ message }: { message: AutopilotChatMessage }) {
   const { _ } = useLingui();
-  // Only store message ID and content separately to minimize re-renders
-  const messageId = React.useRef(message.id);
-
-  // Generate initial content from contentParts if available, otherwise use message.content
-  const getInitialContent = React.useCallback(() => {
-    if (message.contentParts && message.contentParts.length > 0) {
-      return contentPartsToMarkdown(messageId.current, message.contentParts);
-    }
-    return message.content || '';
-  }, [message.contentParts, message.content]);
-
-  const [content, setContent] = React.useState(message.fakeStream ? '' : getInitialContent());
-  const chatService = useChatService();
+  const { content } = useStreamedMessageContent(message);
   const { spacing } = useChatState();
-  const { setStreaming } = useStreaming();
   const { isStreaming } = useIsStreamingMessage(message);
-  const chunkQueue = React.useRef<string[]>([]);
-  const lastChunkQueueProcessedTime = React.useRef<number>(0);
-  const incompleteTokenBuffer = React.useRef<string>('');
-
-  // Update the message ID ref if a new message is passed
-  React.useEffect(() => {
-    let unsubscribeStopResponse: (() => void) | undefined;
-    let fakeStreamInterval: ReturnType<typeof setInterval> | undefined;
-
-    if (message.id !== messageId.current || !message.stream) {
-      messageId.current = message.id;
-      setContent(message.fakeStream ? '' : getInitialContent());
-    }
-
-    if (message.fakeStream) {
-      unsubscribeStopResponse = chatService.on(AutopilotChatEvent.StopResponse, () => {
-        clearInterval(fakeStreamInterval);
-        setStreaming(false);
-        setContent(getInitialContent());
-        chunkQueue.current = [];
-        incompleteTokenBuffer.current = '';
-        lastChunkQueueProcessedTime.current = 0;
-      });
-
-      const characters = getInitialContent().split('');
-      let charIndex = 0;
-
-      setStreaming(true);
-
-      fakeStreamInterval = setInterval(() => {
-        if (charIndex < characters.length) {
-          const chunkSize = FAKE_STREAM_CHARS_COUNT;
-          const endIndex = Math.min(charIndex + chunkSize, characters.length);
-          const chunk = characters.slice(charIndex, endIndex).join('');
-
-          setContent((prevContent) => `${prevContent}${chunk}`);
-
-          charIndex = endIndex;
-        } else {
-          clearInterval(fakeStreamInterval);
-          setStreaming(false);
-        }
-      }, FAKE_STREAM_INTERVAL);
-    }
-
-    return () => {
-      unsubscribeStopResponse?.();
-
-      if (fakeStreamInterval) {
-        clearInterval(fakeStreamInterval);
-      }
-    };
-  }, [message, chatService, setStreaming, getInitialContent]);
-
-  const handleSendChunk = React.useCallback((msg: AutopilotChatMessage) => {
-    if (msg.id !== messageId.current) {
-      return;
-    }
-
-    chunkQueue.current.push(msg.content);
-
-    if (Date.now() - lastChunkQueueProcessedTime.current > CHUNK_QUEUE_PROCESS_INTERVAL) {
-      lastChunkQueueProcessedTime.current = Date.now();
-
-      if (msg.contentParts) {
-        const fullContent = contentPartsToMarkdown(messageId.current, msg.contentParts);
-        const { renderable } = extractRenderableContent(fullContent);
-        setContent(renderable);
-        return;
-      }
-
-      // Combine buffered incomplete token with new chunks
-      const accumulated = incompleteTokenBuffer.current + chunkQueue.current.join('');
-      const { renderable, buffered } = extractRenderableContent(accumulated);
-
-      incompleteTokenBuffer.current = buffered;
-      chunkQueue.current = [];
-
-      if (renderable) {
-        setContent((prevContent) => `${prevContent}${renderable}`);
-      }
-    } else if (msg.done) {
-      lastChunkQueueProcessedTime.current = 0;
-
-      if (msg.contentParts) {
-        setContent(contentPartsToMarkdown(messageId.current, msg.contentParts));
-        return;
-      }
-
-      // Stream complete - flush everything including any incomplete tokens
-      const remaining = incompleteTokenBuffer.current + chunkQueue.current.join('');
-      incompleteTokenBuffer.current = '';
-      chunkQueue.current = [];
-      setContent((prevContent) => `${prevContent}${remaining}`);
-    }
-  }, []);
-
-  React.useEffect(() => {
-    if (!chatService) {
-      return;
-    }
-
-    const unsubscribe = chatService.on(AutopilotChatEvent.SendChunk, handleSendChunk);
-
-    return () => {
-      unsubscribe();
-    };
-  }, [chatService, handleSendChunk]);
 
   const components = React.useMemo(
     () => ({
diff --git a/packages/apollo-react/src/material/components/ap-chat/components/message/sources/chat-sources.tsx b/packages/apollo-react/src/material/components/ap-chat/components/message/sources/chat-sources.tsx
index 4d1fc3f938..5fe21ba09e 100644
--- a/packages/apollo-react/src/material/components/ap-chat/components/message/sources/chat-sources.tsx
+++ b/packages/apollo-react/src/material/components/ap-chat/components/message/sources/chat-sources.tsx
@@ -2,42 +2,22 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Box, Collapse, styled } from '@mui/material';
 import token from '@uipath/apollo-core';
+import {
+  useMessageSources,
+  useOpenCitation,
+} from '@uipath/apollo-react/chat/headless/hooks/use-citations';
 import { useIsStreamingMessage } from '@uipath/apollo-react/chat/headless/hooks/use-is-streaming-message';
-import { useChatService } from '@uipath/apollo-react/chat/headless/providers/chat-service.provider';
 import { useChatState } from '@uipath/apollo-react/chat/headless/providers/chat-state-provider';
-import {
-  AutopilotChatEvent,
-  type AutopilotChatMessage,
-  AutopilotChatPreHookAction,
-  type PdfCitation,
-  type UrlCitation,
-} from '@uipath/apollo-react/chat/service';
+import type { AutopilotChatMessage } from '@uipath/apollo-react/chat/service';
 import { ApIcon } from '@uipath/apollo-react/material/components/ap-icon';
 import { ApTypography } from '@uipath/apollo-react/material/components/ap-typography';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { AutopilotChatTooltip } from '../../common/tooltip';
 
 interface AutopilotChatSourcesProps {
-  groupId: string;
   message: AutopilotChatMessage;
 }
 
-const getSources = (group: AutopilotChatMessage[]) => {
-  const allCitations = group
-    .flatMap((message) => message.contentParts?.flatMap((part) => part.citations) ?? [])
-    .filter((citation): citation is UrlCitation | PdfCitation => citation !== undefined);
-
-  // Deduplicate citations by ID, keeping the first occurrence
-  const seenIds = new Set<number>();
-  return allCitations.filter((citation) => {
-    if (seenIds.has(citation.id)) {
-      return false;
-    }
-    seenIds.add(citation.id);
-    return true;
-  });
-};
-
 const COLLAPSED_ITEMS_COUNT = 2;
 
 const StyledContainer = styled(Box)(() => ({
@@ -147,51 +127,15 @@ const StyledActionButton = styled(Box)(() => ({
   '&:focus, &:active': { outlineColor: 'var(--color-focus-indicator)' },
 }));
 
-function AutopilotChatSourcesComponent({ groupId, message }: AutopilotChatSourcesProps) {
+function AutopilotChatSourcesComponent({ message }: AutopilotChatSourcesProps) {
   const { _ } = useLingui();
-  const chatService = useChatService();
   const { spacing } = useChatState();
-
-  const [sources, setSources] = useState<Array<UrlCitation | PdfCitation>>(
-    getSources(chatService?.getMessagesInGroup(groupId) ?? [])
-  );
+  const { sources, isWaitingForMoreMessages } = useMessageSources(message);
+  const handleSourceClick = useOpenCitation();
   const { isStreaming } = useIsStreamingMessage(message);
-  const [isWaitingForMoreMessages, setIsWaitingForMoreMessages] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
   const [showFullList, setShowFullList] = useState(false);
 
-  useEffect(() => {
-    if (!chatService) {
-      return;
-    }
-
-    const unsubscribeResponse = chatService.on(
-      AutopilotChatEvent.Response,
-      (response: AutopilotChatMessage) => {
-        if (response.groupId === groupId || response.id === message.id) {
-          setSources(getSources(chatService.getMessagesInGroup(groupId)));
-          setIsWaitingForMoreMessages(!!response.shouldWaitForMoreMessages);
-        }
-      }
-    );
-
-    const unsubscribeChunk = chatService.on(AutopilotChatEvent.SendChunk, (chunk) => {
-      if (chunk.groupId === groupId || chunk.id === message.id) {
-        setSources(getSources(chatService.getMessagesInGroup(groupId)));
-      }
-    });
-
-    const unsubscribeStopResponse = chatService.on(AutopilotChatEvent.StopResponse, () => {
-      setSources(getSources(chatService.getMessagesInGroup(groupId)));
-    });
-
-    return () => {
-      unsubscribeResponse();
-      unsubscribeChunk();
-      unsubscribeStopResponse();
-    };
-  }, [chatService, message.id, groupId]);
-
   const handleToggleExpand = useCallback(() => {
     setIsExpanded(!isExpanded);
   }, [isExpanded]);
@@ -204,31 +148,6 @@ function AutopilotChatSourcesComponent({ groupId, message }: AutopilotChatSource
     setShowFullList(false);
   }, []);
 
-  const handleSourceClick = useCallback(
-    (source: UrlCitation | PdfCitation) => {
-      if (!chatService) {
-        return;
-      }
-
-      chatService
-        ?.getPreHook(AutopilotChatPreHookAction.CitationClick)({ citation: source })
-        .then((proceed) => {
-          if (!proceed) {
-            return;
-          }
-
-          const url =
-            'url' in source
-              ? source.url
-              : `${source.download_url}${source.page_number ? `#page=${source.page_number}` : ''}`;
-          if (url) {
-            window.open(url, '_blank', 'noopener,noreferrer');
-          }
-        });
-    },
-    [chatService]
-  );
-
   if (isWaitingForMoreMessages || isStreaming || sources.length === 0) {
     return null;
   }