@drscrewdriver/dsh-better-display 0.3.3-fork.1

package/src/client/live-turn.ts

@@ -0,0 +1,198 @@
+import type { AssistantChatData, ChatConversationViewNode } from '@deepseek-ai/dsh-client-ui-chat/client';
+import type { AssistantBlock } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import { assistantSegments, hasVisibleBody } from './projection.js';
+import type { TurnBoundary } from './projection.js';
+import { activitySummary, stringValue } from './tool-activity.js';
+import type { ReaderFlowEntry, ToolActivityEntry } from './tool-activity.js';
+
+export type LiveStep =
+  | { kind: 'reasoning'; key: string; nodeKey: string; start: number; blocks: AssistantBlock[]; step: number }
+  | { kind: 'body'; key: string; nodeKey: string; start: number; blocks: AssistantBlock[]; step: number }
+  | { kind: 'tool'; key: string; entry: ToolActivityEntry }
+  | { kind: 'user'; key: string; nodeKey: string }
+  | { kind: 'other'; key: string; nodeKey: string };
+
+export type LiveTurnItem =
+  | { kind: 'user'; key: string; step: Extract<LiveStep, { kind: 'user' }> }
+  | { kind: 'fold'; key: string; steps: readonly LiveStep[]; summary: string }
+  | { kind: 'open'; key: string; step: LiveStep };
+
+export function liveFoldEnabled(boundary: TurnBoundary): boolean {
+  return boundary.status === 'open';
+}
+
+export function foldSummary(steps: readonly LiveStep[]): string {
+  let reasoning = 0;
+  let body = 0;
+  let tool = 0;
+  let extra = 0;
+  for (const step of steps) {
+    if (step.kind === 'reasoning') reasoning += 1;
+    else if (step.kind === 'body') body += 1;
+    else if (step.kind === 'tool') tool += 1;
+    else if (step.kind !== 'user') extra += 1;
+  }
+  const parts: string[] = [];
+  if (reasoning) parts.push(`思考×${reasoning}`);
+  if (body) parts.push(`输出×${body}`);
+  if (tool) parts.push(`工具×${tool}`);
+  if (extra) parts.push(`记录×${extra}`);
+  return parts.join(' · ') || '此前步骤';
+}
+
+/** One chain: fold only when a new reasoning step has prior body/tool/reasoning. */
+export function splitChain(chain: readonly LiveStep[]): { fold: readonly LiveStep[] | null; open: readonly LiveStep[] } {
+  const lastReasoning = chain.findLastIndex(step => step.kind === 'reasoning');
+  if (lastReasoning < 0) return { fold: null, open: chain };
+  const prior = chain.slice(0, lastReasoning);
+  if (!prior.length) return { fold: null, open: chain };
+  const trigger = prior.some(step => step.kind === 'reasoning' || step.kind === 'body' || step.kind === 'tool');
+  if (!trigger) return { fold: null, open: chain };
+  return { fold: prior, open: chain.slice(lastReasoning) };
+}
+
+function skipReasoning(part: { kind: string; blocks: AssistantBlock[] }): boolean {
+  return part.kind === 'reasoning' && !part.blocks.some(block => block.kind === 'reasoning' && block.text.trim() !== '');
+}
+
+function skipBody(part: { kind: string; blocks: AssistantBlock[] }): boolean {
+  return part.kind === 'body' && !hasVisibleBody(part.blocks);
+}
+
+function stepsFromAssistant(
+  nodeKey: string,
+  data: AssistantChatData,
+  toolsByCallId: Map<string, ToolActivityEntry>,
+  consumed: Set<string>,
+): LiveStep[] {
+  const marks: { at: number; step: LiveStep }[] = [];
+  for (const part of assistantSegments(data.blocks)) {
+    if (skipReasoning(part) || skipBody(part)) continue;
+    marks.push({
+      at: part.start,
+      step: {
+        kind: part.kind,
+        key: `${nodeKey}:${part.kind}:${part.start}`,
+        nodeKey,
+        start: part.start,
+        blocks: part.blocks,
+        step: data.step,
+      },
+    });
+  }
+  data.blocks.forEach((block, index) => {
+    if (block.kind !== 'tool-call' || !block.callId) return;
+    const tool = toolsByCallId.get(block.callId);
+    if (!tool || consumed.has(tool.callId)) return;
+    consumed.add(tool.callId);
+    marks.push({ at: index, step: { kind: 'tool', key: tool.key, entry: tool } });
+  });
+  marks.sort((left, right) => left.at - right.at || left.step.key.localeCompare(right.step.key));
+  return marks.map(mark => mark.step);
+}
+
+/** Expand readerFlow into source-ordered live steps using existing block boundaries. */
+export function segmentLiveTurn(
+  flow: readonly ReaderFlowEntry[],
+  get: (key: string) => ChatConversationViewNode | undefined,
+): LiveStep[] {
+  const steps: LiveStep[] = [];
+  const consumed = new Set<string>();
+  const toolsByCallId = new Map<string, ToolActivityEntry>();
+  for (const entry of flow) {
+    if (entry.kind === 'tool') toolsByCallId.set(entry.callId, entry);
+  }
+  for (const entry of flow) {
+    if (entry.kind === 'tool') {
+      if (!consumed.has(entry.callId)) {
+        steps.push({ kind: 'tool', key: entry.key, entry });
+        consumed.add(entry.callId);
+      }
+      continue;
+    }
+    const node = get(entry.nodeKey);
+    if (!node || node.visibility === 'hidden' || node.kind === 'turn-tail') continue;
+    if (node.kind === 'user' || node.kind === 'steering') {
+      steps.push({ kind: 'user', key: entry.key, nodeKey: entry.nodeKey });
+      continue;
+    }
+    if (node.kind === 'assistant-step') {
+      steps.push(...stepsFromAssistant(entry.nodeKey, node.data as AssistantChatData, toolsByCallId, consumed));
+      continue;
+    }
+    steps.push({ kind: 'other', key: entry.key, nodeKey: entry.nodeKey });
+  }
+  return steps;
+}
+
+/** One finished tool call, described by what it actually did. */
+function toolSummary(entry: ToolActivityEntry): string {
+  const info = activitySummary(entry);
+  const clip = (value: string | undefined, max = 38): string | undefined => {
+    if (!value) return undefined;
+    const flat = value.replace(/\s+/gu, ' ').trim();
+    if (!flat) return undefined;
+    return flat.length > max ? flat.slice(0, max - 1) + '\u2026' : flat;
+  };
+  const base = info.target ? clip(info.target.split(/[/\\]/u).at(-1), 28) : undefined;
+  const said = clip(stringValue(info.args, 'description'), 40);
+  switch (info.category) {
+    case 'read': return '读取 ' + (base ?? '文件');
+    case 'write': return clip(info.title, 40) ?? '写入文件';
+    case 'terminal': {
+      const cmd = clip(info.command, 32);
+      return said ?? (cmd ? '运行 ' + cmd : '运行命令');
+    }
+    case 'search': {
+      const needle = clip(stringValue(info.args, 'pattern', 'query'), 26);
+      return info.name === 'glob' ? '查找 ' + (needle ?? '文件') : '搜索 ' + (needle ?? '内容');
+    }
+    case 'web': {
+      const query = clip(info.target, 30);
+      return (info.name === 'web_search' ? '搜索网页' : '读取网页') + (query ? ' ' + query : '');
+    }
+    default: {
+      // Schema-less tools (run_code and friends) describe themselves in an
+      // argument rather than a known field: prefer the model's own
+      // description, then the first meaningful line of the code it ran.
+      if (said) return said;
+      const code = stringValue(info.args, 'code', 'source', 'script');
+      if (code) {
+        const line = code.split('\n').map(part => part.trim())
+          .find(part => part && !/^[)\]}]/.test(part) && !/^(\/\/|\*|\/\*|#)/.test(part));
+        if (line) return clip(line.replace(/\s+/gu, ' '), 44) ?? '运行代码';
+      }
+      return clip(info.title ?? info.name, 32) ?? '工具调用';
+    }
+  }
+}
+
+export function presentLiveTurn(steps: readonly LiveStep[], boundary: TurnBoundary, autoFold = true): LiveTurnItem[] {
+  const live = autoFold && liveFoldEnabled(boundary);
+  const items: LiveTurnItem[] = [];
+  let chain: LiveStep[] = [];
+  const flush = () => {
+    if (!chain.length) return;
+    if (!live) {
+      for (const step of chain) items.push({ kind: 'open', key: step.key, step });
+      chain = [];
+      return;
+    }
+    const { fold, open } = splitChain(chain);
+    if (fold?.length) {
+      items.push({ kind: 'fold', key: `live-fold:${chain[0]!.key}`, steps: fold, summary: foldSummary(fold) });
+    }
+    for (const step of open) items.push({ kind: 'open', key: step.key, step });
+    chain = [];
+  };
+  for (const step of steps) {
+    if (step.kind === 'user') {
+      flush();
+      items.push({ kind: 'user', key: step.key, step });
+    } else {
+      chain.push(step);
+    }
+  }
+  flush();
+  return items;
+}

package/src/client/markdown/MarkdownText.module.css

@@ -0,0 +1,304 @@
+/* Visual baseline: deepsuite `@deepseek/md` markdown.css, adapted to CSS
+   Modules. Cite pills, header anchors, and thinking-small variants are
+   intentionally absent (no matching DOM). Token names match that sheet. */
+
+.markdown {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font: var(--dsw-font-markdown-base);
+  color: var(--dsw-alias-label-primary);
+}
+
+.markdown strong {
+  font-weight: 600;
+}
+
+.markdown h1 {
+  font: var(--dsw-font-markdown-h1);
+  margin: 32px 0 16px;
+}
+
+.markdown h2 {
+  font: var(--dsw-font-markdown-h2);
+  margin: 32px 0 16px;
+}
+
+.markdown h3 {
+  font: var(--dsw-font-markdown-h3);
+  margin: 32px 0 16px;
+}
+
+.markdown h4 {
+  font: var(--dsw-font-markdown-h4);
+  margin: 16px 0;
+}
+
+.markdown :where(h5, h6) {
+  font: var(--dsw-font-markdown-base-strong);
+  margin: 16px 0;
+}
+
+.markdown :where(h1, h2, h3, h4, h5, h6) strong {
+  font-weight: inherit;
+}
+
+.markdown p {
+  margin: 16px 0;
+}
+
+/* Tighten h4–h6 against a following list (design: 8px gap). */
+.markdown :where(h4, h5, h6) + :where(ul, ol) {
+  margin-top: 8px;
+}
+
+.markdown :where(h4, h5, h6):has(+ :where(ul, ol)) {
+  margin-bottom: 8px;
+}
+
+.markdown a {
+  /* deepsuite markdown.css uses brand-text (blue in newDesign); this sheet
+     keeps design-platform brand-text as near-black, so links use the blue
+     business-primary alias instead. */
+  color: var(--dsw-alias-state-business-primary);
+  transition: box-shadow var(--ds-transition-duration) var(--ds-ease-in-out);
+  position: relative;
+  text-decoration: none;
+  /* Transparent hit-area padding; literal zero-alpha only (no painted color). */
+  border-left: 3px solid rgb(255 255 255 / 0);
+  border-right: 3px solid rgb(255 255 255 / 0);
+  border-top: 2px solid rgb(255 255 255 / 0);
+  border-bottom: 2px solid rgb(255 255 255 / 0);
+  margin-left: -3px;
+  margin-right: -3px;
+}
+
+.markdown a:hover,
+.markdown a:focus {
+  outline: none;
+  text-decoration: underline var(--dsw-alias-state-business-primary);
+}
+
+.markdown a:focus-visible {
+  box-shadow: 0 0 0 2px var(--dsw-alias-state-business-primary);
+}
+
+.markdown :where(ul, ol) {
+  margin: 16px 0;
+  padding-left: 18px;
+}
+
+.markdown li:not(:first-child) {
+  margin-top: 6px;
+}
+
+.markdown li > :where(ul, ol) {
+  margin-top: 4px;
+}
+
+.markdown li::marker {
+  line-height: 28px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* Nested ol under ul/ol: markers inside (models sometimes emit this shape). */
+.markdown :where(ul, ol) ol {
+  list-style-position: inside;
+  padding-left: 0;
+}
+
+.markdown :where(ul, ol) ol li p {
+  display: inline;
+}
+
+.markdown li > p {
+  margin: 8px 0;
+}
+
+.markdown li > *:first-child {
+  margin-top: 0;
+}
+
+/* Keep list-nested code-block vertical margins (design: +4px vs other last children). */
+.markdown li > *:last-child:not(:global(.md-code-block)) {
+  margin-bottom: 0;
+}
+
+.markdown hr {
+  display: block;
+  border: none;
+  height: 1px;
+  margin: 32px 0;
+  background: var(--dsw-alias-border-l2);
+}
+
+.markdown blockquote {
+  border-left: 2px solid var(--dsw-alias-label-caption);
+  margin: 16px 0 0;
+  padding-left: 14px;
+}
+
+.markdown pre {
+  margin: 16px 0;
+  font-family: var(--ds-font-family-code);
+  overflow: auto;
+}
+
+.markdown :not(pre) > code {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  font: var(--dsw-font-markdown-code);
+  font-family: var(--ds-font-family-code);
+  font-size: 0.875em !important;
+  background-color: var(--dsw-alias-markdown-inline-code);
+  border-radius: 6px;
+  padding: 0 5px;
+}
+
+.markdown :where(h1, h2, h3, h4, h5, h6) code {
+  font: inherit;
+  font-family: var(--ds-font-family-code);
+}
+
+.markdown :global(.katex-display) {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.markdown input[type='checkbox'] {
+  margin: 0 8px 0 0;
+  accent-color: var(--dsw-alias-label-secondary);
+}
+
+.tableScroll {
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+
+/* Wide tables reveal their horizontal bar on hover (or keyboard focus)
+   instead of keeping it painted. Chromium never repaints state-conditioned
+   scrollbar STYLES (neither hover-conditioned `::-webkit-scrollbar*` rules
+   nor a :hover `scrollbar-color` change reaches the painted bar), so the
+   toggle is `overflow-x` itself — a layout change repaints reliably. The
+   resting padding matches the themed bar's height, so on an overflowing
+   table the appearing bar exactly replaces it and nothing below shifts.
+   Wheel and trackpad scrolling need the pointer over the table, which is
+   already the hover that re-enables `auto`. */
+.tableScroll:global(.md-table-wide) {
+  overflow-x: hidden;
+  padding-bottom: var(--dsh-scrollbar-width, 8px);
+}
+
+.tableScroll:global(.md-table-wide):hover,
+.tableScroll:global(.md-table-wide):focus-visible {
+  overflow-x: auto;
+  padding-bottom: 0;
+}
+
+/* Chromium keyboard-focuses scrollable containers by default; the ring uses
+   the sheet's link focus color. */
+.tableScroll:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--dsw-alias-state-business-primary);
+}
+
+/* Many-column tables (the renderer's `md-table-wide` hook) keep their
+   natural width and scroll inside the wrapper; a hosting layout may widen
+   the wrapper through the hook (deepsuite chat TableWrapper parity). */
+.tableScroll table {
+  border-collapse: collapse;
+  width: max-content;
+  max-width: max-content;
+}
+
+/* Tables under four columns, and any table inside a blockquote, fill the
+   column instead: cells wrap down to their minimum readable width, and the
+   wrapper's scroll only remains for the below-floor case (deepsuite chat
+   parity: `.wrapper:not(:has(th:nth-child(4), td:nth-child(4)))`). */
+.tableFill table {
+  width: 100%;
+  max-width: none;
+}
+
+.tableScroll th {
+  text-align: start;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--dsw-alias-border-l3);
+  border-top: none;
+  font: var(--dsw-font-markdown-table-head);
+  max-width: 320px;
+  max-width: min(30vw, 320px);
+  min-width: 100px;
+}
+
+.tableScroll td {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+  font: var(--dsw-font-markdown-table);
+  max-width: 320px;
+  max-width: min(30vw, 320px);
+  min-width: 100px;
+}
+
+.tableScroll th:first-child,
+.tableScroll td:first-child {
+  padding-left: 0;
+}
+
+.tableScroll td:last-child {
+  padding-right: 0;
+}
+
+.tableScroll table code {
+  font-size: 13px;
+}
+
+.markdown > *:first-child,
+.markdown p:first-child {
+  margin-top: 0 !important;
+}
+
+.markdown > *:last-child,
+.markdown p:last-child {
+  margin-bottom: 0 !important;
+}
+
+.imageAlt {
+  color: var(--dsw-alias-label-tertiary);
+  font-style: italic;
+}
+
+.image {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  margin: 0;
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-base);
+  object-fit: contain;
+}
+
+/* Inline file mention: the same link language this sheet gives anchors (and
+   thereby URL-promoted inline code) — link-blue at rest, underline only on
+   hover/focus. An underline at rest reads badly inside the code chip, where
+   it collides with monospace descenders and the pill background. */
+.fileMention {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  color: var(--dsw-alias-state-business-primary);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.fileMention:hover,
+.fileMention:focus {
+  outline: none;
+  text-decoration: underline var(--dsw-alias-state-business-primary);
+  text-underline-offset: 3px;
+}

package/src/client/markdown/MarkdownText.tsx

@@ -0,0 +1,195 @@
+// Adapted from DeepSeek Harness b150a551b8d465e31e418e1b2eaf5e79bbb7d28e (MIT). See THIRD_PARTY_NOTICES.md.
+/**
+ * Untrusted assistant-Markdown renderer over the direct mdast pipeline:
+ * `parse.ts` grammars, the incremental streaming parser, and `render.tsx`.
+ * While a message streams, all but the trailing two blocks freeze as cached
+ * React elements and only the source tail behind them re-parses per chunk,
+ * so per-chunk work tracks the tail size instead of the whole reply. Frozen
+ * blocks keep their source-offset keys when they cross the freeze boundary,
+ * so React reconciles instead of remounting. Known deviation while
+ * streaming: a reference-style link or footnote whose definition sits on the
+ * other side of the freeze boundary renders literally until the settled
+ * full parse self-heals it.
+ */
+
+import { memo, useMemo, useRef } from 'react'
+import type { ReactNode } from 'react'
+import type { MarkdownPathImages } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IncrementalMarkdownParser } from './incremental.js'
+import { parseGfm, parseGfmWithMath } from './parse.js'
+import {
+  collectReferenceTargets, createReferenceTargets, renderBlocks, renderFootnoteSection,
+  wrapBlockChildren,
+} from './render.js'
+import type { MarkdownCodeLabels, MarkdownFileMentions, MarkdownRenderContext, ReferenceTargets } from './render.js'
+// KaTeX CSS is supplied once by the shared DSH UI-primitives client bundle.
+import css from './MarkdownText.module.css'
+
+export type { MarkdownCodeLabels, MarkdownFileMentions } from './render.js'
+
+/** One settled full render: parse with math, resolve references, append the footnote section. */
+function renderSettled(
+  text: string,
+  codeLabels: MarkdownCodeLabels | undefined,
+  fileMentions: MarkdownFileMentions | undefined,
+  pathImages: MarkdownPathImages | undefined,
+  renderText: MarkdownRenderContext['renderText'],
+  renderAtom: MarkdownRenderContext['renderAtom'],
+): ReactNode[] {
+  const root = parseGfmWithMath(text)
+  const targets = createReferenceTargets()
+  collectReferenceTargets(root.children, targets)
+  const context: MarkdownRenderContext = {
+    renderText,
+    renderAtom,
+    streaming: false,
+    codeLabels,
+    fileMentions,
+    pathImages,
+    targets,
+    footnoteOrder: [],
+    footnoteCounts: new Map(),
+  }
+  const blocks = wrapBlockChildren(
+    renderBlocks(root.children.map((node, index) => ({ node, key: node.position?.start.offset ?? -(index + 1) })), context),
+    false,
+  )
+  const section = renderFootnoteSection(context)
+  return section === null ? blocks : [...blocks, '\n', section]
+}
+
+/**
+ * Streaming render state for one growing message: the incremental parser,
+ * the frozen blocks' cached elements, and the reference/footnote state their
+ * rendering consumed (footnote numbering assigned to frozen references is
+ * final, so the tail continues from a copy of it each frame).
+ */
+class StreamingRenderer {
+  private readonly parser = new IncrementalMarkdownParser(parseGfm)
+  private generation = -1
+  private frozenCount = 0
+  private frozenElements: ReactNode[] = []
+  private frozenTargets: ReferenceTargets = createReferenceTargets()
+  private frozenFootnoteOrder: string[] = []
+  private frozenFootnoteCounts = new Map<string, number>()
+  private lastText: string | null = null
+  private lastRendered: ReactNode[] = []
+
+  /** @param codeLabels - Fence copy labels baked into cached elements; the owner replaces the renderer when they change. */
+  constructor(private readonly codeLabels: MarkdownCodeLabels | undefined, private readonly renderText: MarkdownRenderContext['renderText'], private readonly renderAtom: MarkdownRenderContext['renderAtom'], private readonly pathImages: MarkdownPathImages | undefined) {}
+
+  /**
+   * Render the current accumulated text. Idempotent per text value, so React
+   * may re-execute the calling render freely.
+   * @param text - The full accumulated markdown source.
+   * @returns Frozen elements, re-rendered tail, and the footnote section.
+   */
+  render(text: string): ReactNode[] {
+    if (text === this.lastText) return this.lastRendered
+    const { frozen, tail, generation } = this.parser.update(text)
+    if (generation !== this.generation) {
+      this.generation = generation
+      this.frozenCount = 0
+      this.frozenElements = []
+      this.frozenTargets = createReferenceTargets()
+      this.frozenFootnoteOrder = []
+      this.frozenFootnoteCounts = new Map()
+    }
+    const newlyFrozen = frozen.slice(this.frozenCount)
+    collectReferenceTargets(newlyFrozen.map(block => block.node), this.frozenTargets)
+    // Targets visible this frame: everything frozen so far plus the current
+    // tail parse — a newly frozen block's references resolved against the
+    // same parse tree its definitions came from.
+    const frameTargets: ReferenceTargets = {
+      definitions: new Map(this.frozenTargets.definitions),
+      footnotes: new Map(this.frozenTargets.footnotes),
+    }
+    collectReferenceTargets(tail.map(block => block.node), frameTargets)
+    if (newlyFrozen.length > 0) {
+      const frozenContext: MarkdownRenderContext = {
+        renderText: this.renderText,
+        renderAtom: this.renderAtom,
+        streaming: true,
+        codeLabels: this.codeLabels,
+        fileMentions: undefined,
+        pathImages: this.pathImages,
+        targets: frameTargets,
+        footnoteOrder: this.frozenFootnoteOrder,
+        footnoteCounts: this.frozenFootnoteCounts,
+      }
+      // Separator newlines are cached alongside the elements so the
+      // assembled children match the settled pipeline's block wrapping.
+      const batch = [...this.frozenElements]
+      for (const element of renderBlocks(newlyFrozen, frozenContext)) {
+        if (batch.length > 0) batch.push('\n')
+        batch.push(element)
+      }
+      this.frozenElements = batch
+      this.frozenCount = frozen.length
+    }
+    const tailContext: MarkdownRenderContext = {
+      renderText: this.renderText,
+      renderAtom: this.renderAtom,
+      streaming: true,
+      codeLabels: this.codeLabels,
+      fileMentions: undefined,
+        pathImages: this.pathImages,
+      targets: frameTargets,
+      footnoteOrder: [...this.frozenFootnoteOrder],
+      footnoteCounts: new Map(this.frozenFootnoteCounts),
+    }
+    const children = [...this.frozenElements]
+    for (const element of renderBlocks(tail, tailContext)) {
+      if (children.length > 0) children.push('\n')
+      children.push(element)
+    }
+    const section = renderFootnoteSection(tailContext)
+    if (section !== null) children.push('\n', section)
+    this.lastText = text
+    this.lastRendered = children
+    return this.lastRendered
+  }
+}
+
+/**
+ * Render untrusted assistant-authored Markdown as semantic React elements.
+ * @param props - Markdown source text preserved by the session projection;
+ * `streaming` renders fences and TeX plain (highlighting and KaTeX land on
+ * the finalize swap) and parses incrementally across chunks; `codeLabels`
+ * forwards localized copy-button labels to fence CodeBlocks — pass a
+ * reference-stable object (memoized per locale revision), because a new
+ * identity discards the streaming render cache mid-message. `fileMentions`
+ * links inline-code tokens its resolver recognizes as real files; this is
+ * the single streaming gate — it applies to settled renders only, because a
+ * streaming message's vocabulary is not final and frozen cached elements
+ * must not bake in handlers that could go stale.
+ * @returns A GFM document with TeX math rendered through KaTeX; raw HTML,
+ * relative links, and unsafe protocols are disabled, while absolute HTTP(S)
+ * images render directly.
+ */
+export const MarkdownText = memo(function MarkdownText({ text, streaming = false, codeLabels, fileMentions, pathImages, renderText, renderAtom }: {
+  text: string
+  streaming?: boolean
+  codeLabels?: MarkdownCodeLabels | undefined
+  fileMentions?: MarkdownFileMentions | undefined
+  pathImages?: MarkdownPathImages | undefined
+  renderText?: MarkdownRenderContext['renderText']
+  renderAtom?: MarkdownRenderContext['renderAtom']
+}) {
+  const streamRef = useRef<StreamingRenderer | null>(null)
+  const streamImagesRef = useRef(pathImages)
+  const streamLabelsRef = useRef<MarkdownCodeLabels | undefined>(codeLabels)
+  const children = useMemo(() => {
+    if (!streaming) {
+      streamRef.current = null
+      return renderSettled(text, codeLabels, fileMentions, pathImages, renderText, renderAtom)
+    }
+    if (streamRef.current === null || streamLabelsRef.current !== codeLabels || streamImagesRef.current !== pathImages) {
+      streamRef.current = new StreamingRenderer(codeLabels, renderText, renderAtom, pathImages)
+      streamLabelsRef.current = codeLabels
+      streamImagesRef.current = pathImages
+    }
+    return streamRef.current.render(text)
+  }, [text, streaming, codeLabels, fileMentions, pathImages, renderText, renderAtom])
+  return <div className={css.markdown}>{children}</div>
+})