('[data-md-menu]') ?? null;
+ const willOpen = menu?.classList.contains('hidden') ?? false;
+ closeAllMenus(container);
+ if (menu && willOpen) menu.classList.remove('hidden');
+ return;
+ }
+
+ // Table copy formats
+ if (action.startsWith('table-copy-')) {
+ const format = action.replace('table-copy-', '');
+ const table = actionEl.closest('[data-markdown="table-wrapper"]')?.querySelector('table');
+ if (table instanceof HTMLTableElement) {
+ const data = extractTableData(table);
+ const content = format === 'csv' ? tableToCSV(data) : format === 'tsv' ? tableToTSV(data) : tableToMarkdown(data);
+ void copyTextToClipboard(content);
+ }
+ closeAllMenus(container);
+ return;
+ }
+
+ // Table download formats
+ if (action.startsWith('table-download-')) {
+ const format = action.replace('table-download-', '');
+ const table = actionEl.closest('[data-markdown="table-wrapper"]')?.querySelector('table');
+ if (table instanceof HTMLTableElement) {
+ const data = extractTableData(table);
+ const content = format === 'csv' ? tableToCSV(data) : tableToMarkdown(data);
+ downloadBlob(format === 'csv' ? 'table.csv' : 'table.md', content, format === 'csv' ? 'text/csv' : 'text/markdown');
+ }
+ closeAllMenus(container);
+ return;
+ }
+
+ // Mermaid copy source / ascii
+ if (action === 'mermaid-copy') {
+ const source = actionEl.getAttribute('data-md-source') ?? '';
+ if (source) void copyTextToClipboard(source).then(() => flashCopied(actionEl as HTMLButtonElement, ctx.labels.copied, 'copy', ctx.labels.copyDiagram));
+ return;
+ }
+
+ // Mermaid download svg
+ if (action === 'mermaid-download') {
+ const svgHost = actionEl.closest('[data-markdown="mermaid-block"]')?.querySelector('[data-markdown="mermaid"]');
+ const svg = svgHost?.innerHTML ?? '';
+ if (svg) downloadBlob('diagram.svg', svg, 'image/svg+xml;charset=utf-8');
+ return;
+ }
+
+ // Loopback preview
+ if (action === 'preview-loopback') {
+ event.preventDefault();
+ const url = actionEl.getAttribute('data-md-url') ?? '';
+ if (url) ctx.onPreviewLoopback?.(url);
+ return;
+ }
+ };
+
+ container.addEventListener('click', handleClick);
+ return () => container.removeEventListener('click', handleClick);
+};
diff --git a/packages/ui/src/components/chat/markdown/markdownCore.ts b/packages/ui/src/components/chat/markdown/markdownCore.ts
new file mode 100644
index 00000000..502a9abd
--- /dev/null
+++ b/packages/ui/src/components/chat/markdown/markdownCore.ts
@@ -0,0 +1,362 @@
+import { marked, type Tokens } from 'marked';
+import remend from 'remend';
+import katex from 'katex';
+import DOMPurify from 'dompurify';
+import {
+ getSharedHighlighter,
+ type DiffsThemeNames,
+ type SupportedLanguages,
+} from '@pierre/diffs';
+import { buildAgentMentionUrl, parseAgentHref, parseSkillHref } from '@/lib/messages/inlineMessageLinks';
+import { isVSCodeRuntime } from '@/lib/desktop';
+import { ensureMarkdownShikiTheme, MARKDOWN_SHIKI_THEME } from './markdownTheme';
+
+const escapeAttr = (value: string): string =>
+ value.replace(/&/g, '&').replace(/"/g, '"').replace(//g, '>');
+
+// ---------------------------------------------------------------------------
+// Streaming block segmentation (port of OpenCode's markdown-stream)
+// ---------------------------------------------------------------------------
+
+export type MarkdownBlock = {
+ raw: string;
+ src: string;
+ mode: 'full' | 'live';
+ // When false, skip syntax highlighting for this block. Set for the actively
+ // streaming open code fence so we don't re-tokenize a growing block ~40x/sec
+ // (O(n^2)); it highlights once the fence closes and becomes a stable block.
+ highlight: boolean;
+};
+
+const hasReferenceDefinitions = (text: string): boolean =>
+ /^\[[^\]]+\]:\s+\S+/m.test(text) || /^\[\^[^\]]+\]:\s+/m.test(text);
+
+// Returns true when `raw` opens a fenced code block whose closing fence has not
+// arrived yet — meaning the block is still streaming and must be rendered as
+// raw text, not parsed.
+const hasOpenFence = (raw: string): boolean => {
+ const match = raw.match(/^[ \t]{0,3}(`{3,}|~{3,})/);
+ if (!match) return false;
+ const mark = match[1];
+ if (!mark) return false;
+ const char = mark[0];
+ const size = mark.length;
+ const last = raw.trimEnd().split('\n').at(-1)?.trim() ?? '';
+ return !new RegExp(`^[\\t ]{0,3}${char}{${size},}[\\t ]*$`).test(last);
+};
+
+const heal = (text: string): string => {
+ try {
+ return remend(text, { linkMode: 'text-only' });
+ } catch {
+ return text;
+ }
+};
+
+/**
+ * Split markdown into render blocks. When not streaming, returns a single
+ * `full` block. While streaming, heals incomplete syntax and isolates an
+ * unclosed trailing code fence into its own `live` block so a partial fence
+ * does not corrupt the parse of stable content above it.
+ */
+export const streamBlocks = (text: string, live: boolean): MarkdownBlock[] => {
+ if (!live) return [{ raw: text, src: text, mode: 'full', highlight: true }];
+ // Reference-style links/footnotes span multiple tokens (definition elsewhere);
+ // keep them as a single block so per-block parsing doesn't break the refs.
+ if (hasReferenceDefinitions(text)) {
+ return [{ raw: text, src: heal(text), mode: 'live', highlight: true }];
+ }
+
+ let tokens: Tokens.Generic[];
+ try {
+ tokens = marked.lexer(text) as Tokens.Generic[];
+ } catch {
+ return [{ raw: text, src: heal(text), mode: 'live', highlight: true }];
+ }
+
+ let tail = -1;
+ for (let i = tokens.length - 1; i >= 0; i -= 1) {
+ if (tokens[i]?.type !== 'space') {
+ tail = i;
+ break;
+ }
+ }
+ if (tail < 0) return [{ raw: text, src: heal(text), mode: 'live', highlight: true }];
+
+ // Split into per-token blocks. Stable leading blocks become `full` (complete,
+ // cache-stable, not re-healed); only the trailing block is `live` and gets
+ // re-parsed as content streams in. This keeps per-step work proportional to
+ // the last block rather than the whole message.
+ const blocks: MarkdownBlock[] = [];
+ for (let i = 0; i < tokens.length; i += 1) {
+ const token = tokens[i];
+ if (!token || token.type === 'space') continue;
+ const raw = token.raw ?? '';
+ const isLast = i === tail;
+ const openFence = token.type === 'code' && hasOpenFence(raw);
+ blocks.push({
+ raw,
+ src: openFence ? raw : heal(raw),
+ mode: isLast ? 'live' : 'full',
+ highlight: !openFence,
+ });
+ }
+
+ if (blocks.length === 0) {
+ return [{ raw: text, src: heal(text), mode: 'live', highlight: true }];
+ }
+ return blocks;
+};
+
+// ---------------------------------------------------------------------------
+// marked parser (HTML string output) with safe external links
+// ---------------------------------------------------------------------------
+
+const parser = marked.use({
+ gfm: true,
+ breaks: false,
+ renderer: {
+ link({ href, title, text }) {
+ const target = href ?? '';
+ const agentName = parseAgentHref(target);
+ if (agentName) {
+ return `${text}`;
+ }
+ const skillName = parseSkillHref(target);
+ if (skillName) {
+ return `${text}`;
+ }
+ const titleAttr = title ? ` title="${escapeAttr(title)}"` : '';
+ return `${text}`;
+ },
+ },
+});
+
+// ---------------------------------------------------------------------------
+// Math (KaTeX) — post-process the parsed HTML, skipping code/pre/kbd content
+// ---------------------------------------------------------------------------
+
+const renderMathInText = (text: string): string => {
+ let result = text.replace(/\$\$([\s\S]*?)\$\$/g, (_match, math: string) => {
+ try {
+ return katex.renderToString(math, { displayMode: true, throwOnError: false });
+ } catch {
+ return `$$${math}$$`;
+ }
+ });
+
+ result = result.replace(/(? {
+ try {
+ return katex.renderToString(math, { displayMode: false, throwOnError: false });
+ } catch {
+ return `$${math}$`;
+ }
+ });
+
+ return result;
+};
+
+const renderMathExpressions = (html: string): string => {
+ const codeBlockPattern = /(<(?:pre|code|kbd)[^>]*>[\s\S]*?<\/(?:pre|code|kbd)>)/gi;
+ return html
+ .split(codeBlockPattern)
+ .map((part, index) => (index % 2 === 1 ? part : renderMathInText(part)))
+ .join('');
+};
+
+// ---------------------------------------------------------------------------
+// Syntax highlighting (Shiki via @pierre/diffs shared highlighter)
+// ---------------------------------------------------------------------------
+
+const CODE_BLOCK_RE = /([\s\S]*?)<\/code><\/pre>/g;
+
+// Skip syntax highlighting for very large blocks — tokenizing thousands of
+// lines blocks the main thread. Plain (escaped) code is shown instead.
+const CODE_HIGHLIGHT_LINE_LIMIT = 1200;
+const VSCODE_CODE_HIGHLIGHT_LINE_LIMIT = 200;
+
+const exceedsLineLimit = (value: string, limit: number): boolean => {
+ let lines = 1;
+ for (let i = 0; i < value.length; i += 1) {
+ if (value.charCodeAt(i) === 10 && ++lines > limit) return true;
+ }
+ return false;
+};
+
+const unescapeHtml = (value: string): string =>
+ value
+ .replace(/</g, '<')
+ .replace(/>/g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, "'")
+ .replace(/&/g, '&');
+
+const highlightCodeBlocks = async (html: string): Promise => {
+ const matches = [...html.matchAll(CODE_BLOCK_RE)];
+ if (matches.length === 0) return html;
+
+ ensureMarkdownShikiTheme();
+ const highlighter = await getSharedHighlighter({
+ themes: [MARKDOWN_SHIKI_THEME as DiffsThemeNames],
+ langs: [],
+ preferredHighlighter: 'shiki-wasm',
+ });
+
+ const lineLimit = isVSCodeRuntime() ? VSCODE_CODE_HIGHLIGHT_LINE_LIMIT : CODE_HIGHLIGHT_LINE_LIMIT;
+
+ let result = html;
+ for (const match of matches) {
+ const [full, rawLang, escapedCode] = match;
+ const requested = (rawLang || 'text').toLowerCase();
+ // Leave mermaid fences untouched so the decorate pass can render them as
+ // diagrams (highlighting would strip the `language-mermaid` class).
+ if (requested === 'mermaid') continue;
+
+ const code = unescapeHtml(escapedCode ?? '');
+
+ // Oversized block: skip highlight, keep plain code but stamp the language.
+ if (exceedsLineLimit(code, lineLimit)) {
+ result = result.replace(full, () => full.replace(' highlighted);
+ } catch {
+ // Leave the original (escaped, sanitized) in place.
+ }
+ }
+
+ return result;
+};
+
+// ---------------------------------------------------------------------------
+// Sanitization (DOMPurify) — allow Shiki/KaTeX/SVG output
+// ---------------------------------------------------------------------------
+
+const SANITIZE_CONFIG = {
+ USE_PROFILES: { html: true, mathMl: true, svg: true },
+ ADD_TAGS: ['svg', 'path', 'g', 'rect', 'line', 'polygon', 'polyline', 'circle', 'ellipse', 'text', 'tspan', 'defs', 'marker'],
+ ADD_ATTR: ['d', 'viewBox', 'preserveAspectRatio', 'xmlns', 'target', 'fill', 'stroke', 'stroke-width', 'transform', 'points', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'r', 'rx', 'ry', 'style'],
+ FORBID_TAGS: ['script'],
+ FORBID_CONTENTS: ['script'],
+};
+
+let sanitizeHookInstalled = false;
+
+const ensureSanitizeHook = (): void => {
+ if (sanitizeHookInstalled) return;
+ if (typeof window === 'undefined' || !DOMPurify.isSupported) return;
+ sanitizeHookInstalled = true;
+ DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+ if (!(node instanceof HTMLAnchorElement)) return;
+ if (node.target !== '_blank') return;
+ node.setAttribute('rel', 'noopener noreferrer');
+ });
+};
+
+const sanitize = (html: string): string => {
+ if (!DOMPurify.isSupported) return '';
+ ensureSanitizeHook();
+ return DOMPurify.sanitize(html, SANITIZE_CONFIG) as unknown as string;
+};
+
+const escapeHtml = (text: string): string =>
+ text
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+
+export const fallbackHtml = (markdown: string): string =>
+ escapeHtml(markdown).replace(/\r\n?/g, '\n').replace(/\n/g, '
');
+
+// ---------------------------------------------------------------------------
+// Per-block HTML cache (LRU, mirrors OpenCode's checksum cache)
+// ---------------------------------------------------------------------------
+
+const CACHE_MAX = 240;
+const htmlCache = new Map();
+
+// FNV-1a 32-bit hash of the block content.
+const hash = (value: string): string => {
+ let h = 0x811c9dc5;
+ for (let i = 0; i < value.length; i += 1) {
+ h ^= value.charCodeAt(i);
+ h = Math.imul(h, 0x01000193);
+ }
+ return (h >>> 0).toString(36);
+};
+
+const touch = (key: string, entry: { hash: string; html: string }): void => {
+ htmlCache.delete(key);
+ htmlCache.set(key, entry);
+ if (htmlCache.size <= CACHE_MAX) return;
+ const oldest = htmlCache.keys().next().value;
+ if (oldest) htmlCache.delete(oldest);
+};
+
+const parseBlock = async (block: MarkdownBlock): Promise => {
+ const parsed = await Promise.resolve(parser.parse(block.src));
+ const withMath = renderMathExpressions(parsed);
+ const highlighted = block.highlight ? await highlightCodeBlocks(withMath) : withMath;
+ return sanitize(highlighted);
+};
+
+export type RenderedBlock = {
+ // Stable identity across renders for per-block DOM reconciliation. Encodes
+ // content + mode + highlight so any change forces that block (and only that
+ // block) to re-morph; unchanged leading blocks are skipped entirely.
+ id: string;
+ html: string;
+};
+
+/**
+ * Render markdown into an array of per-block sanitized HTML. Streaming-aware:
+ * splits into blocks, caches per-block, heals incomplete syntax. Returning
+ * blocks (instead of one joined string) lets the renderer re-morph only the
+ * block that changed, keeping per-step streaming cost ~O(last block).
+ */
+export const renderMarkdownBlocks = async (
+ text: string,
+ streaming: boolean,
+ cacheKey: string,
+): Promise => {
+ if (!text) return [];
+
+ const blocks = streamBlocks(text, streaming);
+ return Promise.all(
+ blocks.map(async (block, index) => {
+ const contentHash = hash(block.raw);
+ const id = `${contentHash}:${block.mode}:${block.highlight ? 1 : 0}`;
+ const key = `${cacheKey}:${index}:${block.mode}`;
+ const cached = htmlCache.get(key);
+ if (cached && cached.hash === contentHash) {
+ touch(key, cached);
+ return { id, html: cached.html };
+ }
+ const html = await parseBlock(block);
+ touch(key, { hash: contentHash, html });
+ return { id, html };
+ }),
+ );
+};
diff --git a/packages/ui/src/components/chat/markdown/markdownTheme.ts b/packages/ui/src/components/chat/markdown/markdownTheme.ts
new file mode 100644
index 00000000..fbdd370a
--- /dev/null
+++ b/packages/ui/src/components/chat/markdown/markdownTheme.ts
@@ -0,0 +1,133 @@
+import { registerCustomTheme, type ThemeRegistrationResolved } from '@pierre/diffs';
+import type { Theme } from '@/types/theme';
+
+// Name of the static Shiki theme we register once. Its token colors reference
+// CSS custom properties (`--md-syntax-*`) instead of concrete colors, so a
+// highlighted code block does NOT need to be re-tokenized when the app theme
+// changes — only the CSS variables on the markdown container update, and the
+// browser repaints. This mirrors OpenCode's `var(--syntax-*)` theme approach
+// and keeps highlighting results cacheable across theme switches.
+export const MARKDOWN_SHIKI_THEME = 'openchamber-md';
+
+let registered = false;
+
+/**
+ * Register the static, CSS-variable-driven Shiki theme. Safe to call multiple
+ * times; only the first call registers.
+ */
+export const ensureMarkdownShikiTheme = (): void => {
+ if (registered) return;
+ registered = true;
+
+ registerCustomTheme(MARKDOWN_SHIKI_THEME, () =>
+ Promise.resolve({
+ name: MARKDOWN_SHIKI_THEME,
+ colors: {
+ 'editor.background': 'transparent',
+ 'editor.foreground': 'var(--md-syntax-foreground)',
+ },
+ tokenColors: [
+ {
+ scope: ['comment', 'punctuation.definition.comment', 'string.comment'],
+ settings: { foreground: 'var(--md-syntax-comment)', fontStyle: 'italic' },
+ },
+ {
+ scope: ['string', 'punctuation.definition.string', 'string.template'],
+ settings: { foreground: 'var(--md-syntax-string)' },
+ },
+ {
+ scope: ['constant.numeric', 'constant.language', 'constant.character', 'constant'],
+ settings: { foreground: 'var(--md-syntax-number)' },
+ },
+ {
+ scope: ['keyword', 'storage', 'storage.type', 'storage.modifier', 'keyword.control'],
+ settings: { foreground: 'var(--md-syntax-keyword)' },
+ },
+ {
+ scope: ['keyword.operator', 'punctuation.separator', 'punctuation.terminator'],
+ settings: { foreground: 'var(--md-syntax-operator)' },
+ },
+ {
+ scope: ['entity.name.function', 'support.function', 'meta.function-call'],
+ settings: { foreground: 'var(--md-syntax-function)' },
+ },
+ {
+ scope: [
+ 'entity.name.type',
+ 'entity.name.class',
+ 'support.type',
+ 'support.class',
+ 'entity.other.inherited-class',
+ ],
+ settings: { foreground: 'var(--md-syntax-type)' },
+ },
+ {
+ scope: ['variable', 'variable.other', 'variable.parameter', 'meta.definition.variable'],
+ settings: { foreground: 'var(--md-syntax-variable)' },
+ },
+ {
+ scope: ['variable.other.property', 'meta.property-name', 'support.type.property-name'],
+ settings: { foreground: 'var(--md-syntax-property)' },
+ },
+ {
+ scope: ['entity.name.tag', 'punctuation.definition.tag'],
+ settings: { foreground: 'var(--md-syntax-keyword)' },
+ },
+ {
+ scope: ['entity.other.attribute-name'],
+ settings: { foreground: 'var(--md-syntax-property)' },
+ },
+ {
+ scope: ['markup.bold', 'punctuation.definition.bold'],
+ settings: { fontStyle: 'bold' },
+ },
+ {
+ scope: ['markup.italic', 'punctuation.definition.italic'],
+ settings: { fontStyle: 'italic' },
+ },
+ {
+ scope: ['markup.heading', 'markup.heading entity.name'],
+ settings: { foreground: 'var(--md-syntax-keyword)', fontStyle: 'bold' },
+ },
+ {
+ scope: ['markup.inserted', 'punctuation.definition.inserted'],
+ settings: { foreground: 'var(--md-syntax-inserted)' },
+ },
+ {
+ scope: ['markup.deleted', 'punctuation.definition.deleted'],
+ settings: { foreground: 'var(--md-syntax-deleted)' },
+ },
+ {
+ scope: ['invalid', 'invalid.illegal'],
+ settings: { foreground: 'var(--md-syntax-deleted)' },
+ },
+ ],
+ } as unknown as ThemeRegistrationResolved),
+ );
+};
+
+/**
+ * Build the `--md-syntax-*` CSS custom properties for the given app theme.
+ * Apply the result as inline styles on the markdown container so the static
+ * Shiki theme resolves to the active palette.
+ */
+export const getMarkdownSyntaxVars = (theme: Theme): Record => {
+ const base = theme.colors.syntax.base;
+ const tokens = theme.colors.syntax.tokens ?? {};
+ const status = theme.colors.status;
+
+ return {
+ '--md-syntax-foreground': base.foreground,
+ '--md-syntax-comment': base.comment,
+ '--md-syntax-string': base.string,
+ '--md-syntax-number': base.number,
+ '--md-syntax-keyword': base.keyword,
+ '--md-syntax-operator': base.operator,
+ '--md-syntax-function': base.function,
+ '--md-syntax-type': base.type,
+ '--md-syntax-variable': base.variable,
+ '--md-syntax-property': tokens.variableProperty ?? base.variable,
+ '--md-syntax-inserted': status.success,
+ '--md-syntax-deleted': status.error,
+ };
+};