@cellgit/markdown-render 0.1.0 → 1.0.0

package/dist/scripts/chat-renderer.js

@@ -0,0 +1,2770 @@
+(function (global) {
+  'use strict';
+
+  const documentRef = global.document;
+  const bridge = global.MarkdownBridge;
+  const renderLib = global.MarkdownRender;
+
+  const MESSAGE_ROLES = new Set(['user', 'assistant', 'system']);
+  const MESSAGE_STATUSES = new Set(['pending', 'streaming', 'completed', 'failed', 'cancelled']);
+  /// Constructs a blank line does *not* end, because they are allowed to
+  /// contain one: a loose list keeps going across the gap between its items,
+  /// so cutting the document there would split one list into two. A table and
+  /// a blockquote are not in that company — a blank line ends both, and
+  /// treating a table row as unfinished business kept every table welded to
+  /// whatever followed it, in one block that could never be shown until the
+  /// paragraph after the paragraph after it had also arrived.
+  const LIST_LIKE = /^(?:[-*+]\s|\d+\.\s)/;
+  const graphemeSegmenter = global.Intl && typeof global.Intl.Segmenter === 'function'
+    ? new global.Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
+
+  const defaultConfig = {
+    markdown: {},
+    extensions: null,
+    streaming: {
+      incremental: true,
+      // How to stream a block that never reaches a safe boundary. `lastSafe`
+      // only advances on a blank line, and a markdown table has none between
+      // its rows, so a long table stays in the unstable tail and is reparsed
+      // and repainted from scratch on every frame — cost grows with the square
+      // of the block length and shows up as heavy flicker.
+      //   'throttled' — keep revealing, but re-render less often as it grows.
+      //   'deferred'  — hold the block back and render it once it completes.
+      longBlockMode: 'throttled',
+      longBlockThreshold: 512
+    },
+    chat: {
+      autoScroll: 'nearBottom',
+      preserveUserScroll: true,
+      bottomThreshold: 96,
+      streamingPresentation: 'smooth',
+      messageSpacing: '14px',
+      maxMessageWidth: '100%',
+      userMessageMaxWidth: '82%',
+      messageActions: {
+        enabled: false,
+        assistant: ['copy', 'retry'],
+        user: ['copy', 'edit'],
+        labels: {
+          copy: 'Copy response',
+          copied: 'Copied',
+          retry: 'Try again',
+          edit: 'Edit message'
+        }
+      },
+      // How a model's chain of thought is presented. Reasoning is context for
+      // the answer, never the answer itself: it streams into its own panel
+      // above the message and folds away the moment the answer starts.
+      reasoning: {
+        enabled: true,
+        // Route `<think>` … `</think>` out of the content stream. Turn this off
+        // when the host feeds reasoning through `appendReasoningChunk` only.
+        inlineTags: true,
+        tags: null,
+        autoCollapse: true,
+        defaultExpanded: false,
+        labels: {
+          thinking: 'Thinking…',
+          done: 'Thought process',
+          duration: 'Thought for {seconds}s'
+        }
+      }
+    }
+  };
+  const runtimeConfig = Object.assign({}, defaultConfig, global.MarkdownWebViewConfig || {});
+  runtimeConfig.chat = Object.assign({}, defaultConfig.chat, runtimeConfig.chat || {});
+  runtimeConfig.chat.messageActions = Object.assign(
+    {},
+    defaultConfig.chat.messageActions,
+    runtimeConfig.chat.messageActions || {}
+  );
+  runtimeConfig.chat.messageActions.labels = Object.assign(
+    {},
+    defaultConfig.chat.messageActions.labels,
+    runtimeConfig.chat.messageActions.labels || {}
+  );
+  runtimeConfig.chat.reasoning = Object.assign(
+    {},
+    defaultConfig.chat.reasoning,
+    runtimeConfig.chat.reasoning || {}
+  );
+  runtimeConfig.chat.reasoning.labels = Object.assign(
+    {},
+    defaultConfig.chat.reasoning.labels,
+    runtimeConfig.chat.reasoning.labels || {}
+  );
+
+  const state = {
+    mounted: false,
+    container: null,
+    messages: new Map(),
+    order: [],
+    heightFrame: null,
+    scrollFrame: null,
+    viewportFrame: null,
+    viewportListenersInstalled: false,
+    shouldStickToBottom: true,
+    // The message currently held at the top of the view, and the empty element
+    // that gives it the room to get there — see `ensureTailRoom`.
+    anchorId: null,
+    tailRoom: null
+  };
+
+  function notifyError(error, reason) {
+    if (bridge && typeof bridge.notifyError === 'function') {
+      bridge.notifyError(error, reason || 'chat');
+    }
+  }
+
+  function raf(callback) {
+    if (typeof global.requestAnimationFrame === 'function') {
+      return global.requestAnimationFrame(callback);
+    }
+    return setTimeout(callback, 16);
+  }
+
+  function cancelFrame(handle) {
+    if (!handle) return;
+    if (typeof global.cancelAnimationFrame === 'function') {
+      global.cancelAnimationFrame(handle);
+    } else {
+      clearTimeout(handle);
+    }
+  }
+
+  /// Elapsed milliseconds, for pacing work rather than telling the time.
+  /// `performance.now()` is monotonic; `Date.now()` is the fallback for hosts
+  /// without it and can jump if the clock is adjusted mid-response.
+  function nowMs() {
+    if (global.performance && typeof global.performance.now === 'function') {
+      return global.performance.now();
+    }
+    return Date.now();
+  }
+
+  /// Write an attribute only when it actually changes. An unconditional
+  /// setAttribute still counts as a mutation: it invalidates style for every
+  /// selector that reads the attribute, and the chat stylesheet keys its
+  /// first-child/last-child margin rules off exactly these flags. Rewriting
+  /// them on every streamed frame re-resolved those margins hundreds of times
+  /// a second, which is felt as the message breathing while it types.
+  function setAttr(node, name, value) {
+    if (node.getAttribute(name) !== value) {
+      node.setAttribute(name, value);
+    }
+  }
+
+  /// Accept either an HTML string or a pre-parsed fragment from the renderer.
+  function asFragment(content) {
+    if (content && typeof content === 'object' && content.nodeType === 11) {
+      return content;
+    }
+    const template = documentRef.createElement('template');
+    template.innerHTML = String(content == null ? '' : content);
+    return template.content;
+  }
+
+  function newScanState() {
+    return {
+      cursor: 0,
+      lineStart: 0,
+      inFence: false,
+      fenceMark: '',
+      fenceAtMargin: false,
+      inMath: false,
+      lastSafe: 0,
+      prevNonBlankLine: null,
+      // Every offset at which one top-level block ends and the next begins.
+      // The reveal engine works a block at a time, so it needs all of them and
+      // not only the most recent one.
+      boundaries: [],
+      boundariesTaken: 0
+    };
+  }
+
+  /// One top-level markdown block: a paragraph, a list, a fenced code block, a
+  /// table, a display formula.
+  ///
+  /// Blocks are the unit everything downstream works in. Each is revealed,
+  /// rendered, faded and finally frozen on its own, and a block that has
+  /// finished all four is never rendered again for the rest of the
+  /// conversation — which is what keeps the cost of a streamed frame
+  /// proportional to the block being written rather than to the answer so far.
+  function newBlock(start) {
+    return {
+      start,
+      source: '',
+      complete: false,
+      // Whole or nothing. A table's column widths are decided by its widest
+      // cell and a formula is not a formula until its closing delimiter
+      // arrives; revealed a piece at a time, both re-lay-out everything already
+      // on screen on every frame. An atomic block is held back until it is
+      // complete and then appears as the one thing it is.
+      atomic: false,
+      // ...with one exception: a table past its delimiter row is released a
+      // whole row at a time rather than held to the end. See `classifyBlock`.
+      rowwise: false,
+      revealed: 0,
+      // Fence and math state of the *revealed* prefix, which is what decides
+      // whether the next line may be shown a character at a time.
+      revealScan: null,
+      container: null,
+      renderedLength: 0,
+      // Something changed that the DOM has not been told about yet.
+      dirty: false,
+      // Frozen: complete, fully revealed, done animating. Never touched again.
+      settled: false,
+      // The whole-block fade an atomic block gets in place of a typewriter.
+      entering: false,
+      enteredAt: 0,
+      enterApplied: false,
+      // Runs of freshly revealed text still fading in — see `paintBlockFade`.
+      fadeRuns: [],
+      fadeBreak: false,
+      // Fade wrappers are currently in the DOM, so the next paint has to take
+      // them back out even if nothing else about the block changed.
+      decorated: false,
+      lastRenderCost: 0,
+      lastRenderAt: 0
+    };
+  }
+
+  function newStreamState(markdown) {
+    return {
+      scanState: newScanState(),
+      // Everything the host has handed over, whether or not it is on screen.
+      received: typeof markdown === 'string' ? markdown : '',
+      blocks: [],
+      // The block the typewriter is working on. Prose is revealed strictly in
+      // order; atomic blocks are not, which is why this is not simply the last
+      // block with anything on screen.
+      laneCursor: 0,
+      // The host has said that no more text is coming.
+      ended: false,
+      // Show everything at once on the next flush, rather than pacing it.
+      instant: false,
+      pendingFrame: null,
+      pendingReason: 'render',
+      // Playout pacing — see `revealBudget`.
+      startedAt: 0,
+      originLength: 0,
+      drainRate: 0,
+      lastRevealAt: 0,
+      revealDebt: 0,
+      renderingInProgress: false,
+      finalRequested: false
+    };
+  }
+
+  /// One independently streamed region of a message.
+  ///
+  /// A message always has an answer channel, and grows a second one the moment
+  /// the model reveals any reasoning. Both run the identical incremental
+  /// pipeline over their own buffer and their own list of blocks — the
+  /// reasoning fold is not a special case of rendering, only of placement.
+  function newChannel(kind, container, markdown) {
+    container.setAttribute('data-empty', 'true');
+
+    return {
+      kind,
+      content: container,
+      // The block containers currently carrying the first and last margin
+      // reset, so the flags only move when the edges actually move.
+      firstEdge: null,
+      lastEdge: null,
+      stream: newStreamState(markdown)
+    };
+  }
+
+  function reasoningConfig() {
+    return runtimeConfig.chat.reasoning;
+  }
+
+  /// Inline extraction needs both the feature switch and a render core that
+  /// actually ships the splitter — an older bundle simply keeps the markers in
+  /// the answer, where the markdown-level fold still catches them.
+  function inlineReasoningEnabled() {
+    const config = reasoningConfig();
+    return Boolean(config.enabled && config.inlineTags)
+      && Boolean(renderLib)
+      && typeof renderLib.createReasoningSplitter === 'function';
+  }
+
+  function usesSmoothStreaming() {
+    return runtimeConfig.chat.streamingPresentation !== 'immediate';
+  }
+
+  /// How many grapheme clusters may be revealed in a single frame. The reveal
+  /// rate is otherwise proportional to the backlog, so this only bounds the
+  /// worst case — a model that dumps a whole answer at once.
+  const MAX_UNITS_PER_FRAME = 96;
+  const MAX_UNITS_PER_FINAL_FRAME = 384;
+
+  /// Number of characters covering at most `maxUnits` grapheme clusters.
+  ///
+  /// Segmenting the entire backlog on every frame is quadratic over a long
+  /// answer — and pointless, since at most `maxUnits` clusters are consumed.
+  /// Only a bounded window at the head is ever examined.
+  function graphemeSafeCut(text, maxUnits) {
+    if (maxUnits >= text.length) return text.length;
+
+    if (!graphemeSegmenter) {
+      // Iterate code points so a surrogate pair is never split in half.
+      let chars = 0;
+      let units = 0;
+      for (const codePoint of text) {
+        if (units >= maxUnits) break;
+        chars += codePoint.length;
+        units += 1;
+      }
+      return chars;
+    }
+
+    const windowSize = Math.min(text.length, maxUnits * 8 + 32);
+    const window = text.slice(0, windowSize);
+    let chars = 0;
+    let units = 0;
+    for (const item of graphemeSegmenter.segment(window)) {
+      if (units >= maxUnits) break;
+      chars += item.segment.length;
+      units += 1;
+    }
+    // The window may have cut a cluster in half; if we stopped because the
+    // window ran out rather than because the budget did, hold that cluster
+    // back for the next frame.
+    if (units < maxUnits && chars === windowSize && windowSize < text.length) {
+      return Math.max(1, chars - 1);
+    }
+    return Math.max(1, chars);
+  }
+
+  function openingFenceMark(line) {
+    const match = String(line || '').match(/^ {0,3}(`{3,}|~{3,})(.*)$/);
+    if (!match) return '';
+    if (match[1][0] === '`' && match[2].includes('`')) return '';
+    return match[1];
+  }
+
+  function isClosingFenceLine(line, fenceMark) {
+    if (!fenceMark) return false;
+    const match = String(line || '').match(/^ {0,3}(`+|~+)([ \t]*)$/);
+    return Boolean(
+      match
+      && match[1][0] === fenceMark[0]
+      && match[1].length >= fenceMark.length
+    );
+  }
+
+  function fencePrefixKind(line, scanState) {
+    const match = String(line || '').match(/^ {0,3}(`+|~+)(.*)$/);
+    if (!match) return 'none';
+
+    const mark = match[1];
+    const suffix = match[2];
+    if (scanState.inFence) {
+      if (!scanState.fenceMark || mark[0] !== scanState.fenceMark[0]) return 'none';
+      if (suffix !== '' && !/^[ \t]*$/.test(suffix)) return 'none';
+      return mark.length >= scanState.fenceMark.length ? 'fence' : 'possible';
+    }
+
+    if (mark.length < 3) {
+      return suffix === '' ? 'possible' : 'none';
+    }
+    if (mark[0] === '`' && suffix.includes('`')) return 'none';
+    return 'fence';
+  }
+
+  function currentLinePrefix(text) {
+    const source = String(text || '');
+    const newline = source.lastIndexOf('\n');
+    return newline < 0 ? source : source.slice(newline + 1);
+  }
+
+  /// Lines whose shape only exists once the line is whole.
+  ///
+  /// A table row is the clearest case: column widths are decided by the widest
+  /// cell in each column, so a row revealed a character at a time widens a
+  /// column on one frame and widens it again on the next, dragging every row
+  /// above it sideways — the table appears to vibrate rather than grow. A
+  /// display-math delimiter is the same story: half of `$$` is a stray dollar
+  /// sign in a paragraph. Both are revealed a whole line at a time, so a table
+  /// advances by rows rather than by characters — on a slow model that is a
+  /// visible pause between rows, which is the price of the table never moving
+  /// sideways while it fills in.
+  ///
+  /// Ordinary prose is deliberately not in this set: it reflows as it grows by
+  /// design, and holding a paragraph back until its newline would replace the
+  /// typewriter with a block that appears all at once.
+  const STRUCTURED_LINE = /^ {0,3}(?:\||\$\$)/;
+
+  function isStructuredLine(line, scanState) {
+    // Inside a fence every line is literal text in a canvas that never
+    // reflows, so there is nothing to protect and holding lines back would
+    // only stall the typing.
+    if (scanState.inFence) return false;
+    return STRUCTURED_LINE.test(line);
+  }
+
+  /// A line that opens a table row, and a line that could still turn into the
+  /// delimiter row proving the first one was a header rather than a paragraph
+  /// that happens to start with a pipe.
+  ///
+  /// Deliberately generous: a line made only of pipes, dashes, colons and
+  /// spaces either is a delimiter row or is a keystroke away from being one,
+  /// and while the model is still typing it there is no way to tell. Guessing
+  /// "not a table" and being wrong shows the reader a header row as a
+  /// paragraph and then replaces it with a table; guessing "table" and being
+  /// wrong costs one line's delay.
+  const TABLE_ROW_LINE = /^ {0,3}\|/;
+  const TABLE_DELIMITER_LINE = /^ {0,3}[\s:|-]*$/;
+  const DISPLAY_MATH_LINE = /^ {0,3}\$\$/;
+
+  /// The lines of `source` that have certainly ended.
+  ///
+  /// A line still being typed is not one of them, and the difference matters:
+  /// half a delimiter row is indistinguishable from a paragraph that happens
+  /// to open with a pipe.
+  function settledLines(source, limit) {
+    const lastNewline = source.lastIndexOf('\n');
+    if (lastNewline < 0) return [];
+    return firstMeaningfulLines(source.slice(0, lastNewline + 1), limit);
+  }
+
+  function firstMeaningfulLines(source, limit) {
+    const lines = [];
+    let cursor = 0;
+    while (cursor < source.length && lines.length < limit) {
+      let end = source.indexOf('\n', cursor);
+      if (end < 0) end = source.length;
+      const line = source.slice(cursor, end);
+      if (line.trim() !== '') lines.push(line);
+      cursor = end + 1;
+    }
+    return lines;
+  }
+
+  /// Decide whether a block is one that only makes sense whole.
+  ///
+  /// Called on every ingest while the block is still growing, which is why it
+  /// may only ever *lower* the bar: a block that has already begun to be
+  /// revealed cannot be taken back and shown atomically. That is why a block
+  /// opening with a pipe is assumed to be a table until its second line proves
+  /// otherwise — holding a paragraph back for one line costs a frame, while
+  /// revealing half a table costs the reader every column width in it.
+  function classifyBlock(block) {
+    const lines = firstMeaningfulLines(block.source, 2);
+    const first = lines[0] || '';
+
+    if (DISPLAY_MATH_LINE.test(first)) {
+      block.atomic = true;
+      return;
+    }
+    if (TABLE_ROW_LINE.test(first)) {
+      block.atomic = lines.length < 2 || TABLE_DELIMITER_LINE.test(lines[1]);
+      // A table is atomic in the sense that matters — it is never typed into,
+      // and a header row is never shown as a paragraph of pipes — but it does
+      // not have to be held back until its last row. Once the delimiter row
+      // has arrived whole, every further row is a complete unit that can go on
+      // screen the moment it lands. Twenty rows' worth of nothing followed by
+      // the whole table at once is not a table being written; past a couple of
+      // seconds it reads as an app that has hung.
+      block.rowwise = block.atomic && settledLines(block.source, 2).length >= 2;
+      return;
+    }
+    block.atomic = false;
+  }
+
+  /// How much text the reveal deliberately holds back, in milliseconds.
+  ///
+  /// A model does not produce text at a steady rate. Tokens arrive in bursts
+  /// separated by gaps of tens or hundreds of milliseconds, and a reveal that
+  /// simply shows whatever has arrived reproduces every one of those bursts as
+  /// a jump. Keeping a fifth of a second of text in hand and paying it out at
+  /// the rate it is arriving turns the bursts back into a stream — the same
+  /// trick a media player uses against a jittery network, and the reason the
+  /// answer reads as being typed rather than as being pasted in pieces.
+  ///
+  /// The lag is also what makes the reveal *concurrent*: a table or a formula
+  /// further down the response is routinely complete while the paragraph above
+  /// it is still being typed, and holding it back until the typewriter reached
+  /// it would be inventing a delay the reader has no use for.
+  const PLAYOUT_LAG_MS = 220;
+  /// How quickly a backlog that is off target is brought back to it. Long
+  /// enough that correcting for a burst does not become a burst of its own.
+  const PLAYOUT_CORRECTION_MS = 700;
+  /// The window the arrival rate is measured over before it is trusted. The
+  /// first chunk of a response arrives milliseconds after the request, and
+  /// dividing by that would report a model typing at tens of thousands of
+  /// characters a second.
+  const PLAYOUT_WARMUP_MS = 200;
+  /// Rate bounds, in characters per millisecond.
+  const MIN_PLAYOUT_RATE = 0.012;
+  const MAX_PLAYOUT_RATE = 1.5;
+  /// Once the response is finished there is no arrival rate left to smooth
+  /// against, so whatever is still held back is paid out over a fixed window.
+  /// Long enough to stay a reveal, short enough that a reader is never left
+  /// watching a finished answer type itself out.
+  const FINAL_DRAIN_MS = 520;
+  /// Floor under the drain rate, in characters per millisecond. A window alone
+  /// does not end: dividing what is *left* by a fixed window every frame is
+  /// exponential decay, which halves the backlog forever and never spends it.
+  const MIN_DRAIN_RATE = 0.06;
+  /// How much of a message may appear on the frame it first has anything to
+  /// show. The playout buffer is about keeping a stream *continuous*, and there
+  /// is no continuity to protect before the first character: holding one back
+  /// would only leave the reader watching an empty bubble for a fifth of a
+  /// second while the model was already answering.
+  const FIRST_REVEAL_UNITS = 24;
+
+  function playoutLagMs() {
+    const configured = (runtimeConfig.streaming || {}).playoutLagMs;
+    if (typeof configured !== 'number' || !isFinite(configured) || configured < 0) {
+      return PLAYOUT_LAG_MS;
+    }
+    return configured;
+  }
+
+  /// Characters the typewriter still owes the reader. Atomic blocks are not
+  /// counted: they never pass through the typewriter, so pacing against them
+  /// would make the prose sprint every time a table arrived.
+  function laneBacklog(stream) {
+    let total = 0;
+    for (let index = 0; index < stream.blocks.length; index += 1) {
+      const block = stream.blocks[index];
+      if (block.atomic) continue;
+      total += block.source.length - block.revealed;
+    }
+    return total;
+  }
+
+  /// How many grapheme clusters the typewriter may reveal this frame.
+  function revealBudget(stream, now) {
+    const backlog = laneBacklog(stream);
+    if (backlog <= 0) {
+      stream.lastRevealAt = now;
+      stream.revealDebt = 0;
+      return 0;
+    }
+
+    // Clamped, because a frame the host spent elsewhere is not a frame's worth
+    // of text the reader missed.
+    const elapsed = stream.lastRevealAt > 0 ? Math.min(96, now - stream.lastRevealAt) : 16;
+    stream.lastRevealAt = now;
+
+    if (revealedTotal(stream) === 0) return Math.min(backlog, FIRST_REVEAL_UNITS);
+
+    let perMs;
+    let ceiling;
+    if (stream.ended) {
+      // Fixed the moment the response ended, from the backlog as it stood
+      // then. Recomputing it every frame from what is left would make the
+      // reveal slow down exactly as it approached the end.
+      if (!stream.drainRate) {
+        stream.drainRate = Math.max(MIN_DRAIN_RATE, backlog / FINAL_DRAIN_MS);
+      }
+      perMs = stream.drainRate;
+      ceiling = MAX_UNITS_PER_FINAL_FRAME;
+    } else {
+      const age = Math.max(PLAYOUT_WARMUP_MS, now - stream.startedAt);
+      const arrived = Math.max(0, stream.received.length - stream.originLength);
+      const rate = Math.min(MAX_PLAYOUT_RATE, Math.max(MIN_PLAYOUT_RATE, arrived / age));
+      // Pay out at the rate text is arriving, plus whatever it takes to bring
+      // the amount held back to the target lag. Rate alone would preserve
+      // whatever lag the first burst happened to create, for the whole answer.
+      perMs = rate + (backlog - rate * playoutLagMs()) / PLAYOUT_CORRECTION_MS;
+      ceiling = MAX_UNITS_PER_FRAME;
+    }
+
+    // A rate of a few characters per frame does not survive being rounded down
+    // every frame, so the remainder is carried rather than discarded.
+    const want = Math.max(0, perMs) * elapsed + stream.revealDebt;
+    const units = Math.max(0, Math.min(ceiling, Math.floor(want)));
+    stream.revealDebt = Math.min(want, ceiling) - units;
+    return units;
+  }
+
+  /// Reveal up to `maxUnits` more of one block, returning how many characters
+  /// that turned out to be.
+  ///
+  /// Returns 0 when the block cannot advance without showing something that is
+  /// only meaningful whole: half a fence delimiter opens a code block for one
+  /// frame and closes it on the next, and half a table row widens a column that
+  /// the following frame widens again.
+  function revealFromBlock(block, maxUnits) {
+    const pending = block.source.slice(block.revealed);
+    if (pending.length === 0 || maxUnits <= 0) return 0;
+
+    const scan = block.revealScan || (block.revealScan = newScanState());
+    // Level with what is already revealed. Normally it is — the scan is
+    // advanced as text is revealed — but a block that was shown whole and then
+    // grew starts again from a scan that has seen none of it.
+    advanceScanTo(scan, block.source, block.revealed);
+    const firstNewline = pending.indexOf('\n');
+    const firstLineEnd = firstNewline < 0 ? pending.length : firstNewline;
+    const revealedText = block.source.slice(0, block.revealed);
+    const firstLine = currentLinePrefix(revealedText) + pending.slice(0, firstLineEnd);
+
+    let count;
+    if (
+      fencePrefixKind(firstLine, scan) !== 'none'
+      || isStructuredLine(firstLine, scan)
+    ) {
+      if (firstNewline < 0) {
+        // Still arriving. Hold it back — unless nothing more is coming, in
+        // which case a partial line is all this line will ever be.
+        if (!block.complete) return 0;
+        count = pending.length;
+      } else {
+        // The first whole line always goes, however small the frame's budget:
+        // holding it back for a budget that a single line already exceeds would
+        // stall the reveal outright. Further whole lines follow if the budget
+        // covers them, so a burst still catches up.
+        count = firstNewline + 1;
+        const budgetEnd = graphemeSafeCut(pending, maxUnits);
+        if (budgetEnd > count) {
+          const lastNewline = pending.lastIndexOf('\n', budgetEnd - 1);
+          if (lastNewline + 1 > count) count = lastNewline + 1;
+        }
+      }
+    } else {
+      count = graphemeSafeCut(pending, maxUnits);
+
+      // Do not cross into a line that has to arrive whole — a fence delimiter,
+      // a table row, the opening of a formula. Stopping at the newline before
+      // it lets the next frame reveal that line atomically.
+      let searchFrom = 0;
+      while (searchFrom < count - 1) {
+        const newlineAt = pending.indexOf('\n', searchFrom);
+        if (newlineAt < 0 || newlineAt >= count - 1) break;
+        const nextNewline = pending.indexOf('\n', newlineAt + 1);
+        const nextLineEnd = nextNewline < 0 ? pending.length : nextNewline;
+        const nextLine = pending.slice(newlineAt + 1, nextLineEnd);
+        if (
+          fencePrefixKind(nextLine, scan) !== 'none'
+          || isStructuredLine(nextLine, scan)
+        ) {
+          count = newlineAt + 1;
+          break;
+        }
+        searchFrom = newlineAt + 1;
+      }
+    }
+
+    if (count <= 0) return 0;
+    // A line that ended is a unit that ended: the next run of fading text
+    // starts fresh rather than blending into the item above it.
+    if (pending.lastIndexOf('\n', count - 1) >= 0) block.fadeBreak = true;
+    block.revealed += count;
+    advanceScanTo(scan, block.source, block.revealed);
+    block.dirty = true;
+    return count;
+  }
+
+  /// Spend the frame's budget on the typewriter, in document order.
+  ///
+  /// Atomic blocks are stepped over rather than typed: they appear whole, on
+  /// their own clock, and the prose after one does not queue behind it.
+  function advanceLane(stream, units) {
+    let remaining = units;
+    const blocks = stream.blocks;
+    let index = stream.laneCursor;
+
+    while (index < blocks.length) {
+      const block = blocks[index];
+      if (block.atomic) {
+        // An unfinished atomic block is the last thing in the stream by
+        // definition, so there is nothing past it to type.
+        if (!block.complete) break;
+        index += 1;
+        continue;
+      }
+      if (block.revealed >= block.source.length) {
+        if (!block.complete) break;
+        index += 1;
+        continue;
+      }
+      if (remaining <= 0) break;
+      const taken = revealFromBlock(block, remaining);
+      if (taken <= 0) break;
+      remaining -= taken;
+    }
+
+    stream.laneCursor = index;
+    return units - remaining;
+  }
+
+  /// How much of an atomic block may go on screen now.
+  ///
+  /// Whole, once it is whole. Before that, a table past its delimiter row may
+  /// show the rows that have certainly ended: a row is a complete unit, and the
+  /// alternative is an empty space where the table will be for as long as the
+  /// model takes to write it. Anything else atomic — a display formula, half of
+  /// which is a stray dollar sign — shows nothing until it is done.
+  function releasableLength(block) {
+    if (block.complete) return block.source.length;
+    if (!block.rowwise) return 0;
+    return block.source.lastIndexOf('\n') + 1;
+  }
+
+  /// Show every atomic block that has arrived, whole or by the row.
+  ///
+  /// This is the half of the reveal that does not wait for the typewriter, and
+  /// it is what produces the effect of a formula or a table landing while the
+  /// paragraph introducing it is still being written.
+  function releaseAtomicBlocks(stream, now) {
+    let released = false;
+    const blocks = stream.blocks;
+
+    for (let index = 0; index < blocks.length; index += 1) {
+      const block = blocks[index];
+      if (!block.atomic) continue;
+      const releasable = releasableLength(block);
+      if (releasable <= block.revealed) continue;
+      // Never ahead of the block before it. A table that appeared before the
+      // sentence introducing it had even started would read as arriving out of
+      // order; once that sentence is under way, the table does not wait for it
+      // to finish.
+      if (index > 0 && blocks[index - 1].revealed <= 0) continue;
+
+      // The fade belongs to the block arriving, not to it growing: running it
+      // again for every row would flash the rows already on screen.
+      if (block.revealed <= 0) {
+        block.entering = true;
+        block.enteredAt = now;
+      }
+      block.revealed = releasable;
+      block.dirty = true;
+      released = true;
+    }
+
+    return released;
+  }
+
+  /// Put everything on screen at once, for the paths that have no reveal to
+  /// pace: a finished message being re-rendered, or a host that asked for
+  /// immediate presentation.
+  function revealEverything(stream) {
+    for (let index = 0; index < stream.blocks.length; index += 1) {
+      const block = stream.blocks[index];
+      if (block.revealed >= block.source.length) continue;
+      block.revealed = block.source.length;
+      block.revealScan = null;
+      block.dirty = true;
+      block.fadeRuns.length = 0;
+      block.entering = false;
+    }
+    // The last block may still grow, and the cursor names the first block the
+    // typewriter has not finished — not the first block with nothing left on
+    // screen. Parking it past an open block would leave the text that block
+    // grows by permanently unreachable.
+    const last = stream.blocks.length - 1;
+    stream.laneCursor = last >= 0 && !stream.blocks[last].complete
+      ? last
+      : stream.blocks.length;
+    stream.instant = false;
+  }
+
+  function revealedTotal(stream) {
+    let total = 0;
+    for (let index = 0; index < stream.blocks.length; index += 1) {
+      total += stream.blocks[index].revealed;
+    }
+    return total;
+  }
+
+  /// Text the host has handed over that the reader has not seen yet. Measured
+  /// against `received` rather than against the blocks, because text that
+  /// arrived since the last flush has not been split into blocks yet and is
+  /// every bit as unrevealed.
+  function hasUnrevealed(stream) {
+    return revealedTotal(stream) < stream.received.length;
+  }
+
+  function injectChatStyles() {
+    if (!documentRef || documentRef.getElementById('md-chat-runtime-style')) return;
+    const style = documentRef.createElement('style');
+    style.id = 'md-chat-runtime-style';
+    style.textContent = `
+#markdown-content.md-chat-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--md-chat-message-spacing, ${runtimeConfig.chat.messageSpacing});
+  max-width: 100%;
+  overflow-x: hidden;
+}
+#markdown-content.md-chat-list,
+#markdown-content.md-chat-list * {
+  box-sizing: border-box;
+}
+.md-chat-message {
+  max-width: var(--md-chat-message-max-width, ${runtimeConfig.chat.maxMessageWidth});
+  color: var(--chat-text-color);
+}
+/* Empty on purpose: it is the room the newest question needs in order to reach
+   the top of the view. See ensureTailRoom in this file. */
+.md-chat-tail-room {
+  flex: 0 0 auto;
+  pointer-events: none;
+}
+.md-chat-message-content {
+  max-width: 100%;
+  overflow-x: hidden;
+  word-wrap: break-word;
+}
+/* One top-level markdown block. Transparent to layout, so a message made of
+   a dozen of them lays out exactly as the same markdown rendered in one go —
+   the split exists so that each block can be revealed, repainted and frozen on
+   its own, and it must not cost a box to do it. */
+.md-chat-block {
+  display: contents;
+}
+/* Which block carries the bubble's outer margins moves as the message grows,
+   and a block with no layout box of its own cannot carry them. The runtime
+   marks the two ends instead; see syncChannelEdges in this file. */
+.md-chat-block[data-md-first] > :first-child {
+  margin-top: 0;
+}
+.md-chat-block[data-md-last] > :last-child {
+  margin-bottom: 0;
+}
+/* Text that has just been revealed comes up from transparent rather than
+   snapping in. It hides the sub-pixel reflow of a line growing a character at
+   a time, and it gives the reveal a leading edge to follow — the difference
+   between text being typed and text being pasted. The wrapper is rebuilt every
+   frame with a negative delay, so the animation resumes rather than restarts;
+   see paintFadeRun in this file. */
+[data-md-fade] {
+  animation: md-chat-fade-in ${FADE_MS}ms linear both;
+}
+@keyframes md-chat-fade-in {
+  /* Not from zero: the newest run would be invisible for a tenth of a second,
+     which reads as the answer lagging rather than as it appearing. */
+  from { opacity: 0.15; }
+  to { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-md-fade] { animation: none; }
+}
+/* A whole block arriving at once: a table, a display formula — anything whose
+   shape only exists complete. It comes up from transparent for the same reason
+   the typed text does, except that here the unit is the block rather than the
+   run: there is no leading edge to follow, because every part of it appeared
+   at the same moment. */
+[data-md-runtime-enter] {
+  animation: md-chat-block-in ${BLOCK_ENTER_MS}ms ease-out both;
+}
+@keyframes md-chat-block-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-md-runtime-enter] { animation: none; }
+}
+/* Tables stream row by row, and the columns are left to automatic layout while
+   they do. Freezing them instead — a fixed table layout, which is what stood
+   here — ignores the minimum column width, so the table was written in one
+   shape and snapped into another the moment it finished. Settling as the rows
+   arrive is the smaller movement of the two, and it ends where the table was
+   already going. */
+.md-chat-reasoning {
+  margin: 0 0 10px 0;
+  max-width: 100%;
+}
+.md-chat-reasoning + .md-chat-message-content[data-empty="true"] {
+  min-height: 0;
+}
+.md-chat-message-assistant {
+  align-self: center;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+.md-chat-message-user {
+  align-self: flex-end;
+  max-width: var(--md-chat-user-message-max-width, ${runtimeConfig.chat.userMessageMaxWidth});
+  margin-left: auto;
+  margin-right: max(0px, calc((100% - var(--md-chat-message-max-width, ${runtimeConfig.chat.maxMessageWidth})) / 2));
+  padding: 10px 12px;
+  border-radius: 16px;
+  background: var(--chat-fill);
+}
+.md-chat-message-system {
+  align-self: center;
+  max-width: min(92%, 620px);
+  padding: 8px 10px;
+  border-radius: 12px;
+  color: var(--chat-secondary-text-color);
+  background: var(--chat-inline-code-bg);
+  font-size: 0.92em;
+}
+.md-chat-message-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-height: 40px;
+  margin-top: 4px;
+  color: var(--chat-secondary-text-color);
+}
+.md-chat-message-user .md-chat-message-actions {
+  justify-content: flex-end;
+}
+.md-chat-message[data-status="pending"] .md-chat-message-actions,
+.md-chat-message[data-status="streaming"] .md-chat-message-actions,
+.md-chat-message-actions:empty {
+  display: none;
+}
+.md-chat-message-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.md-chat-message-action:hover,
+.md-chat-message-action:focus-visible {
+  color: var(--chat-text-color);
+  background: var(--chat-inline-code-bg);
+  outline: none;
+}
+.md-chat-message-action:active {
+  transform: scale(0.94);
+}
+.md-chat-message-action svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.md-chat-message-action .md-chat-icon-check {
+  display: none;
+}
+.md-chat-message-action.is-complete .md-chat-icon-default {
+  display: none;
+}
+.md-chat-message-action.is-complete .md-chat-icon-check {
+  display: block;
+  color: var(--chat-success);
+}
+.md-chat-message[data-status="pending"] .md-chat-message-content[data-empty="true"]::before,
+.md-chat-message[data-status="streaming"] .md-chat-message-content[data-empty="true"]::before {
+  content: '';
+  display: inline-block;
+  width: 36px;
+  height: 12px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--chat-fill), var(--chat-inline-code-bg), var(--chat-fill));
+}
+/* The thinking fold is itself the "working on it" signal, so the placeholder
+   pill under it would be a second one saying the same thing. Declared after the
+   pill so it wins on equal specificity. */
+.md-chat-message[data-reasoning="thinking"] .md-chat-message-content[data-empty="true"]::before {
+  content: none;
+}
+.md-chat-message[data-status="failed"] {
+  color: var(--md-error-color);
+}
+`;
+    (documentRef.head || documentRef.documentElement).appendChild(style);
+  }
+
+  function ensureMounted() {
+    if (state.mounted && state.container) return true;
+    if (!documentRef) {
+      notifyError(new Error('Document is not available'), 'chat');
+      return false;
+    }
+    if (!renderLib || typeof renderLib.renderMarkdown !== 'function') {
+      notifyError(new Error('MarkdownRender library missing'), 'chat');
+      return false;
+    }
+
+    const container = documentRef.getElementById('markdown-content');
+    if (!container) {
+      notifyError(new Error('Markdown container not found'), 'chat');
+      return false;
+    }
+
+    injectChatStyles();
+    container.innerHTML = '';
+    container.classList.add('md-chat-list');
+    container.setAttribute('data-md-runtime', 'chat');
+    container.setAttribute('role', 'log');
+    container.setAttribute('aria-live', 'polite');
+
+    state.container = container;
+    state.mounted = true;
+    state.messages.clear();
+    state.order = [];
+    installViewportListeners();
+    return true;
+  }
+
+  function normalizeRole(role) {
+    return MESSAGE_ROLES.has(role) ? role : 'assistant';
+  }
+
+  function normalizeStatus(status) {
+    return MESSAGE_STATUSES.has(status) ? status : 'completed';
+  }
+
+  function normalizeMessage(message) {
+    const source = message || {};
+    const id = source.id === undefined || source.id === null
+      ? `message-${Date.now()}-${Math.random().toString(36).slice(2)}`
+      : String(source.id);
+    const markdown = typeof source.markdown === 'string'
+      ? source.markdown
+      : (typeof source.content === 'string' ? source.content : '');
+    const reasoning = typeof source.reasoning === 'string'
+      ? source.reasoning
+      : (typeof source.reasoningContent === 'string' ? source.reasoningContent : '');
+
+    return {
+      id,
+      role: normalizeRole(source.role),
+      markdown,
+      reasoning,
+      status: normalizeStatus(source.status)
+    };
+  }
+
+  function dispatchChatEvent(name, detail) {
+    if (!documentRef || typeof global.CustomEvent !== 'function') return;
+    documentRef.dispatchEvent(new global.CustomEvent(name, { detail: detail || {} }));
+  }
+
+  function svgElement(className) {
+    const node = documentRef.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    node.setAttribute('class', className || '');
+    node.setAttribute('viewBox', '0 0 24 24');
+    node.setAttribute('aria-hidden', 'true');
+    return node;
+  }
+
+  function svgChild(name, attributes) {
+    const node = documentRef.createElementNS('http://www.w3.org/2000/svg', name);
+    Object.keys(attributes).forEach((key) => node.setAttribute(key, attributes[key]));
+    return node;
+  }
+
+  function actionIcon(action) {
+    const icon = svgElement('md-chat-icon-default');
+    if (action === 'copy') {
+      icon.appendChild(svgChild('rect', { x: '9', y: '9', width: '13', height: '13', rx: '2', ry: '2' }));
+      icon.appendChild(svgChild('path', { d: 'M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1' }));
+    } else if (action === 'retry') {
+      icon.appendChild(svgChild('path', { d: 'M3 12a9 9 0 1 0 3-6.7L3 8' }));
+      icon.appendChild(svgChild('path', { d: 'M3 3v5h5' }));
+    } else if (action === 'edit') {
+      icon.appendChild(svgChild('path', { d: 'M12 20h9' }));
+      icon.appendChild(svgChild('path', { d: 'M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z' }));
+    }
+    return icon;
+  }
+
+  function checkIcon() {
+    const icon = svgElement('md-chat-icon-check');
+    icon.appendChild(svgChild('path', { d: 'm5 12 4 4L19 6' }));
+    return icon;
+  }
+
+  function fallbackCopy(text) {
+    return new Promise((resolve, reject) => {
+      try {
+        const textarea = documentRef.createElement('textarea');
+        textarea.value = text;
+        textarea.setAttribute('readonly', '');
+        textarea.style.position = 'fixed';
+        textarea.style.top = '-9999px';
+        textarea.style.opacity = '0';
+        documentRef.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        const succeeded = documentRef.execCommand('copy');
+        textarea.remove();
+        succeeded ? resolve() : reject(new Error('Copy failed'));
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  function copyMessageText(text) {
+    if (!text) return Promise.reject(new Error('Nothing to copy'));
+    const clipboard = global.navigator && global.navigator.clipboard;
+    if (clipboard && typeof clipboard.writeText === 'function') {
+      return clipboard.writeText(text).catch(() => fallbackCopy(text));
+    }
+    return fallbackCopy(text);
+  }
+
+  function configuredActions(role) {
+    const config = runtimeConfig.chat.messageActions;
+    if (!config.enabled || role === 'system') return [];
+    const source = role === 'user' ? config.user : config.assistant;
+    return (Array.isArray(source) ? source : [])
+      .map(String)
+      .filter((action) => action === 'copy' || action === 'retry' || action === 'edit');
+  }
+
+  function emitMessageAction(entry, action, succeeded, error) {
+    dispatchChatEvent('markdown-chat-action', {
+      messageId: entry.message.id,
+      action,
+      succeeded: succeeded !== false,
+      error: error ? String(error.message || error) : ''
+    });
+  }
+
+  function runMessageAction(entry, action, button) {
+    if (action !== 'copy') {
+      emitMessageAction(entry, action, true, null);
+      return;
+    }
+
+    copyMessageText(answerText(entry))
+      .then(() => {
+        const labels = runtimeConfig.chat.messageActions.labels;
+        button.classList.add('is-complete');
+        button.setAttribute('aria-label', labels.copied);
+        button.setAttribute('title', labels.copied);
+        emitMessageAction(entry, action, true, null);
+        global.setTimeout(() => {
+          button.classList.remove('is-complete');
+          button.setAttribute('aria-label', labels.copy);
+          button.setAttribute('title', labels.copy);
+        }, 1600);
+      })
+      .catch((error) => emitMessageAction(entry, action, false, error));
+  }
+
+  function createActionButton(entry, action) {
+    const labels = runtimeConfig.chat.messageActions.labels;
+    const button = documentRef.createElement('button');
+    button.type = 'button';
+    button.className = 'md-chat-message-action';
+    button.setAttribute('data-chat-action', action);
+    button.setAttribute('aria-label', labels[action] || action);
+    button.setAttribute('title', labels[action] || action);
+    button.appendChild(actionIcon(action));
+    if (action === 'copy') button.appendChild(checkIcon());
+    button.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      runMessageAction(entry, action, button);
+    });
+    return button;
+  }
+
+  function syncActionBar(entry) {
+    if (!entry.actions) return;
+    const actions = configuredActions(entry.message.role);
+    const signature = actions.join(',');
+    if (entry.actionSignature === signature) return;
+    entry.actionSignature = signature;
+    entry.actions.innerHTML = '';
+    actions.forEach((action) => entry.actions.appendChild(createActionButton(entry, action)));
+  }
+
+  /// Label and tag settings for the markdown-level `<think>` fold. Inline
+  /// extraction normally strips the markers long before the renderer sees them,
+  /// but with extraction off — or for a nested block inside reasoning — the
+  /// fold markdown-it produces should still read the same as the streamed one.
+  const markdownReasoningConfig = {
+    enabled: runtimeConfig.chat.reasoning.enabled !== false,
+    tags: runtimeConfig.chat.reasoning.tags,
+    labels: runtimeConfig.chat.reasoning.labels,
+    open: Boolean(runtimeConfig.chat.reasoning.defaultExpanded)
+  };
+
+  function markdownOptions(deferCodeHighlight, deferMathErrors) {
+    const options = Object.assign({}, runtimeConfig.markdown || {});
+    if (runtimeConfig.extensions) {
+      options.extensions = runtimeConfig.extensions;
+    }
+    // Code blocks inside a message get their copy button from the same render
+    // pipeline as a standalone document, so it needs the same strings.
+    options.i18n = runtimeConfig.i18n || {};
+    if (!options.reasoning) {
+      options.reasoning = markdownReasoningConfig;
+    }
+    if (deferCodeHighlight) {
+      options.deferCodeHighlight = true;
+    }
+    // A formula still arriving is not a broken formula. Suppress KaTeX's error
+    // red until the message completes, so an expression does not flash red and
+    // then quietly turn correct once its closing brace shows up.
+    if (deferMathErrors) {
+      options.deferMathErrors = true;
+    }
+    return options;
+  }
+
+  function renderSegment(text, options) {
+    if (!text) return '';
+    try {
+      // Rendering straight to DOM nodes skips serializing the message to HTML
+      // and parsing it back again on every frame — the largest avoidable cost
+      // in the streaming loop.
+      if (typeof renderLib.renderMarkdownFragment === 'function') {
+        return renderLib.renderMarkdownFragment(text, options);
+      }
+      return renderLib.renderMarkdown(text, options);
+    } catch (err) {
+      console.error('Markdown chat segment render error:', err);
+      notifyError(err, 'chat-render');
+      return '';
+    }
+  }
+
+  function commit(target, content, preserveCodeBlockScroll) {
+    if (!target) return;
+    if (typeof renderLib.applyStreamingHtml === 'function') {
+      renderLib.applyStreamingHtml(target, content, {
+        preserveCodeBlockScroll: preserveCodeBlockScroll !== false
+      });
+      return;
+    }
+    if (typeof content === 'string') {
+      target.innerHTML = content;
+      return;
+    }
+    target.replaceChildren();
+    target.appendChild(asFragment(content));
+  }
+
+  function updateElementMetadata(entry) {
+    const { element, message } = entry;
+    const className = `md-chat-message md-chat-message-${message.role}`;
+    if (element.className !== className) {
+      element.className = className;
+    }
+    setAttr(element, 'data-message-id', message.id);
+    setAttr(element, 'data-role', message.role);
+    setAttr(element, 'data-status', message.status);
+    syncActionBar(entry);
+  }
+
+  function createEntry(message) {
+    const element = documentRef.createElement('article');
+    const content = documentRef.createElement('div');
+    const actions = documentRef.createElement('div');
+    content.className = 'md-chat-message-content';
+    actions.className = 'md-chat-message-actions';
+    actions.setAttribute('role', 'toolbar');
+    actions.setAttribute('aria-label', 'Message actions');
+    element.appendChild(content);
+    element.appendChild(actions);
+
+    const entry = {
+      message,
+      element,
+      content,
+      actions,
+      actionSignature: null,
+      answer: newChannel('answer', content, ''),
+      // Both created on first sight of reasoning: most messages never have any,
+      // and an empty fold in every bubble is a node per message for nothing.
+      reasoning: null,
+      reasoningView: null,
+      splitter: null,
+      finalRequested: false
+    };
+    updateElementMetadata(entry);
+    return entry;
+  }
+
+  /// Text the reader would expect a copy to produce: the answer, without the
+  /// chain of thought that was folded away above it.
+  function answerText(entry) {
+    return entry.answer.stream.received;
+  }
+
+  function hasPendingText(entry) {
+    if (hasUnrevealed(entry.answer.stream)) return true;
+    return Boolean(entry.reasoning) && hasUnrevealed(entry.reasoning.stream);
+  }
+
+  // -------------------------------------------------------------------------
+  // Reasoning fold
+  // -------------------------------------------------------------------------
+
+  function reasoningChevron() {
+    const icon = documentRef.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    icon.setAttribute('class', 'md-reasoning-chevron');
+    icon.setAttribute('viewBox', '0 0 24 24');
+    icon.setAttribute('aria-hidden', 'true');
+    icon.appendChild(svgChild('path', {
+      d: 'm9 6 6 6-6 6',
+      fill: 'none',
+      stroke: 'currentColor',
+      'stroke-width': '2',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round'
+    }));
+    return icon;
+  }
+
+  function formatReasoningLabel(view) {
+    const labels = reasoningConfig().labels;
+    if (view.state === 'thinking') return labels.thinking;
+
+    const elapsed = view.startedAt && view.endedAt ? view.endedAt - view.startedAt : 0;
+    const seconds = Math.round(elapsed / 1000);
+    // Under a second there is no duration worth reporting, and "Thought for 0s"
+    // reads as a failure rather than as speed.
+    if (seconds < 1 || !labels.duration) return labels.done;
+    return String(labels.duration).replace('{seconds}', String(seconds));
+  }
+
+  function syncReasoningHeader(entry) {
+    const view = entry.reasoningView;
+    if (!view) return;
+    const text = formatReasoningLabel(view);
+    if (view.labelText !== text) {
+      view.labelText = text;
+      view.label.textContent = text;
+    }
+    setAttr(view.panel, 'data-state', view.state);
+    setAttr(entry.element, 'data-reasoning', view.state);
+  }
+
+  function setReasoningExpanded(entry, expanded) {
+    const view = entry.reasoningView;
+    if (!view || view.expanded === expanded) return;
+    view.expanded = expanded;
+    setAttr(view.panel, 'data-expanded', expanded ? 'true' : 'false');
+    view.header.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+  }
+
+  /// Move the fold between its two states.
+  ///
+  /// `thinking` keeps it open — the reasoning is the only thing on screen while
+  /// the answer has not started, so collapsing it would leave the reader
+  /// watching an empty bubble. `done` folds it away as soon as the answer takes
+  /// over, unless the reader has already made that choice themselves.
+  function setReasoningState(entry, next) {
+    const view = entry.reasoningView;
+    if (!view || view.state === next) return;
+    const now = Date.now();
+
+    if (next === 'thinking') {
+      view.state = 'thinking';
+      if (!view.startedAt) view.startedAt = now;
+      view.endedAt = 0;
+      if (!view.userToggled) setReasoningExpanded(entry, true);
+    } else {
+      view.state = 'done';
+      view.endedAt = now;
+      if (!view.userToggled && reasoningConfig().autoCollapse !== false) {
+        setReasoningExpanded(entry, false);
+      }
+    }
+    syncReasoningHeader(entry);
+  }
+
+  function markReasoningDone(entry) {
+    if (entry.reasoningView && entry.reasoningView.state === 'thinking') {
+      setReasoningState(entry, 'done');
+    }
+  }
+
+  function ensureReasoningView(entry) {
+    if (entry.reasoningView) return entry.reasoningView;
+
+    const panel = documentRef.createElement('div');
+    panel.className = 'md-reasoning md-chat-reasoning';
+    panel.setAttribute('data-md-reasoning', 'chat');
+    panel.setAttribute('data-expanded', 'false');
+
+    const header = documentRef.createElement('button');
+    header.type = 'button';
+    header.className = 'md-reasoning-header';
+    header.setAttribute('aria-expanded', 'false');
+    const label = documentRef.createElement('span');
+    label.className = 'md-reasoning-label';
+    header.appendChild(reasoningChevron());
+    header.appendChild(label);
+
+    const collapsible = documentRef.createElement('div');
+    collapsible.className = 'md-reasoning-collapsible';
+    const body = documentRef.createElement('div');
+    body.className = 'md-reasoning-body';
+    collapsible.appendChild(body);
+
+    panel.appendChild(header);
+    panel.appendChild(collapsible);
+    entry.element.insertBefore(panel, entry.content);
+
+    const view = {
+      panel,
+      header,
+      label,
+      collapsible,
+      body,
+      state: 'idle',
+      expanded: false,
+      // A reader who opened or closed the fold has said what they want; auto
+      // collapse must not overrule that for the rest of the message.
+      userToggled: false,
+      startedAt: 0,
+      endedAt: 0,
+      labelText: ''
+    };
+    entry.reasoningView = view;
+    entry.reasoning = newChannel('reasoning', body, '');
+
+    header.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      view.userToggled = true;
+      setReasoningExpanded(entry, !view.expanded);
+      // No auto-scroll here. The reader asked for this, and yanking the view to
+      // the bottom would carry them away from the fold they just opened.
+      scheduleHeight('chat-reasoning-toggle', false);
+      dispatchChatEvent('markdown-chat-reasoning', {
+        messageId: entry.message.id,
+        expanded: view.expanded
+      });
+    });
+
+    return view;
+  }
+
+  function removeReasoningView(entry) {
+    if (!entry.reasoningView) return;
+    if (entry.reasoning) cancelFrame(entry.reasoning.stream.pendingFrame);
+    entry.reasoningView.panel.remove();
+    entry.reasoningView = null;
+    entry.reasoning = null;
+    entry.element.removeAttribute('data-reasoning');
+  }
+
+  function consumeLine(scanState, line, newlineOffset) {
+    const trimmed = line.trim();
+    let closedBlock = false;
+
+    if (!scanState.inMath) {
+      if (!scanState.inFence) {
+        const fenceMark = openingFenceMark(line);
+        if (fenceMark) {
+          scanState.inFence = true;
+          scanState.fenceMark = fenceMark;
+          // Only a fence that opens at the left margin is a top-level block.
+          // An indented one belongs to a list item, and cutting the document
+          // after it would restart the list.
+          scanState.fenceAtMargin = line === line.trimStart();
+        }
+      } else if (isClosingFenceLine(line, scanState.fenceMark)) {
+        scanState.inFence = false;
+        scanState.fenceMark = '';
+        closedBlock = scanState.fenceAtMargin && line === line.trimStart();
+        scanState.fenceAtMargin = false;
+      }
+    }
+
+    if (!scanState.inFence && trimmed === '$$') {
+      scanState.inMath = !scanState.inMath;
+      if (!scanState.inMath && line === '$$') {
+        closedBlock = true;
+      }
+    }
+
+    if (!scanState.inFence && !scanState.inMath) {
+      // A blank line ends the block above it — and so does the closing
+      // delimiter of a fenced code block or a display formula. Nothing that
+      // arrives later can change how the text before such a delimiter parses,
+      // so each is a point at which the document can be cut into two pieces
+      // that render exactly as the whole would have. Those cuts are the blocks
+      // the reveal engine works in.
+      const endsBlock = closedBlock
+        || (trimmed === ''
+          && scanState.prevNonBlankLine !== null
+          && !LIST_LIKE.test(scanState.prevNonBlankLine));
+      if (endsBlock) {
+        scanState.lastSafe = newlineOffset + 1;
+        scanState.boundaries.push(scanState.lastSafe);
+      }
+    }
+
+    if (trimmed !== '') {
+      scanState.prevNonBlankLine = trimmed;
+    }
+  }
+
+  /// Advance a scan over `text` up to `end`, consuming whole lines only.
+  function advanceScanTo(scanState, text, end) {
+    let i = scanState.cursor;
+    while (i < end) {
+      if (text.charCodeAt(i) === 0x0a) {
+        consumeLine(scanState, text.slice(scanState.lineStart, i), i);
+        scanState.lineStart = i + 1;
+      }
+      i += 1;
+    }
+    scanState.cursor = i;
+  }
+
+  /// Split everything received so far into blocks.
+  ///
+  /// The open block at the end is rewritten on every call, because it is still
+  /// growing; every block before it was closed at a boundary and is never
+  /// touched again.
+  function ingest(stream) {
+    const scan = stream.scanState;
+    advanceScanTo(scan, stream.received, stream.received.length);
+
+    const blocks = stream.blocks;
+    if (blocks.length === 0) blocks.push(newBlock(0));
+
+    while (scan.boundariesTaken < scan.boundaries.length) {
+      const end = scan.boundaries[scan.boundariesTaken];
+      scan.boundariesTaken += 1;
+      const open = blocks[blocks.length - 1];
+      if (end <= open.start) continue;
+      open.source = stream.received.slice(open.start, end);
+      open.complete = true;
+      classifyBlock(open);
+      blocks.push(newBlock(end));
+    }
+
+    const open = blocks[blocks.length - 1];
+    const source = stream.received.slice(open.start);
+    if (source !== open.source) {
+      open.source = source;
+      classifyBlock(open);
+    }
+    // Nothing more is coming, so whatever the last block has is all of it.
+    if (stream.ended && !open.complete) {
+      open.complete = true;
+      classifyBlock(open);
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Painting
+  // -------------------------------------------------------------------------
+
+  /// The longest a streaming block may sit unchanged on screen. Past roughly
+  /// a sixth of a second the typewriter stops reading as motion and starts
+  /// reading as a freeze followed by a jump.
+  const TAIL_REPAINT_MAX_GAP_MS = 150;
+  /// Share of the wall clock a long block may spend repainting itself,
+  /// expressed as a divisor: one repaint every four times its own cost is a
+  /// 25% duty cycle, which leaves the frame budget room for everything else.
+  const TAIL_REPAINT_DUTY = 4;
+  /// The gap cap wins over the duty cycle, but only so far: a repaint that
+  /// costs more than the cap would otherwise be allowed to run back to back.
+  const TAIL_REPAINT_FLOOR_DUTY = 2;
+
+  /// How long a freshly revealed run of text takes to reach full opacity.
+  ///
+  /// Deliberately much longer than the interval at which new runs start, so
+  /// that several are always in flight at once. That overlap is the whole
+  /// effect: the newest text sits at the bottom of a gradient a dozen or more
+  /// characters deep, each step a little more solid than the one below it,
+  /// and the answer reads as developing rather than as arriving in hard
+  /// increments. One run at a time — the obvious implementation — leaves
+  /// everything but the last few characters fully opaque, which is a fade
+  /// nobody can see.
+  const FADE_MS = 600;
+  /// How often a new run starts. FADE_MS / FADE_STEP_MS is the number of steps
+  /// the gradient has.
+  const FADE_STEP_MS = 90;
+  /// A burst can reveal far more than a frame's worth of text. Past this much
+  /// the fade stops being a leading edge and becomes a whole paragraph
+  /// pulsing, so only the newest characters get it.
+  const MAX_FADE_CHARS = 240;
+  const FADE_ATTRIBUTE = 'data-md-fade';
+  /// How long an atomic block takes to materialise. Shorter than the character
+  /// fade: a whole table appearing is a large change, and drawing it out reads
+  /// as the page being slow rather than as the block arriving.
+  const BLOCK_ENTER_MS = 260;
+  /// Written onto the block's own top-level elements rather than a wrapper.
+  /// The `data-md-runtime-` prefix is what stops the next diff from stripping
+  /// it: the tree the diff compares against is rendered from markdown and knows
+  /// nothing about animations.
+  const BLOCK_ENTER_ATTRIBUTE = 'data-md-runtime-enter';
+  const SHOW_TEXT = 4;
+
+  /// Take the fade wrappers back out, restoring the exact node shape the diff
+  /// expects to find.
+  ///
+  /// They are the runtime's own decoration: the tree the diff compares against
+  /// is rendered from markdown and knows nothing about them, so a wrapper left
+  /// in place would put a span where a text node belongs and rebuild the
+  /// paragraph around it on every frame.
+  function clearFadeRuns(root) {
+    if (!root) return;
+    const wrappers = root.querySelectorAll(`[${FADE_ATTRIBUTE}]`);
+    if (wrappers.length === 0) return;
+
+    const parents = new Set();
+    wrappers.forEach((wrapper) => {
+      const parent = wrapper.parentNode;
+      if (!parent) return;
+      while (wrapper.firstChild) {
+        parent.insertBefore(wrapper.firstChild, wrapper);
+      }
+      parent.removeChild(wrapper);
+      parents.add(parent);
+    });
+    // Splitting a text node to wrap its tail leaves two where the render
+    // produced one, and the diff matches children by position: without merging
+    // them back, every later sibling would line up against the wrong node.
+    parents.forEach((parent) => parent.normalize());
+  }
+
+  /// True when the node sits inside a subtree the renderer declared final. A
+  /// settled KaTeX formula is hundreds of spans that exist purely as a
+  /// function of their source, and the diff walks straight past it — a wrapper
+  /// smuggled inside would never be compared, and never taken out again.
+  function isInsideSettledSubtree(node, root) {
+    let current = node.parentNode;
+    while (current && current !== root) {
+      if (current.nodeType === 1 && current.hasAttribute('data-md-sig')) return true;
+      current = current.parentNode;
+    }
+    return false;
+  }
+
+  /// Parents whose children may not be phrasing content. The whitespace
+  /// between two rows of a table is still a text node, and a span smuggled in
+  /// there is invalid markup that the browser is free to move somewhere else.
+  const NON_PHRASING_PARENTS = new Set([
+    'TABLE', 'THEAD', 'TBODY', 'TFOOT', 'TR', 'UL', 'OL', 'DL', 'COLGROUP', 'SELECT'
+  ]);
+
+  /// Whether this text node is worth wrapping. The newlines markdown leaves
+  /// between block elements are text nodes too, and fading one in fades
+  /// nothing at all while costing a wrapper — and, between table rows, an
+  /// invalid one.
+  function canFadeTextNode(node) {
+    if (node.length === 0) return false;
+    if (!/\S/.test(node.data)) return false;
+    const parent = node.parentNode;
+    if (!parent || parent.nodeType !== 1) return false;
+    return !NON_PHRASING_PARENTS.has(parent.nodeName);
+  }
+
+  function wrapInFade(doc, textNode, elapsed) {
+    const parent = textNode.parentNode;
+    if (!parent) return;
+    const span = doc.createElement('span');
+    span.setAttribute(FADE_ATTRIBUTE, '');
+    // The wrapper is rebuilt on every frame, so its animation would restart on
+    // every frame and never get past its first instant. A negative delay makes
+    // it resume instead: the run picks up where the previous frame left it and
+    // still finishes one duration after the text first appeared.
+    if (elapsed > 0) {
+      span.style.animationDelay = `-${Math.round(Math.min(elapsed, FADE_MS))}ms`;
+    }
+    parent.insertBefore(span, textNode);
+    span.appendChild(textNode);
+  }
+
+  /// Wrap each run in its own span, newest last, so every run carries the
+  /// opacity its own age has earned.
+  ///
+  /// The runs sit end to end at the tail of the block's rendered text, so the
+  /// walk goes backwards from its last character: the newest run first, then
+  /// the one before it, and so on until a run has finished fading. A run may
+  /// span several text nodes — a list item ends in one and starts in another —
+  /// and a text node may span two runs, in which case it is split between them.
+  ///
+  /// Bounded to the one block being typed rather than to the whole message:
+  /// with atomic blocks landing out of order, the newest text on screen is
+  /// routinely *not* the text the typewriter last revealed.
+  function applyFadeRuns(root, runs, now) {
+    if (!root) return;
+    const doc = root.ownerDocument || documentRef;
+    if (runs.length === 0 || typeof doc.createTreeWalker !== 'function') return;
+
+    // Walked from the end rather than collected: the runs only ever cover the
+    // last couple of hundred characters.
+    const walker = doc.createTreeWalker(root, SHOW_TEXT);
+    let node = walker.lastChild();
+
+    for (let position = runs.length - 1; position >= 0 && node; position -= 1) {
+      const run = runs[position];
+      const elapsed = now - run.startedAt;
+      // This run has finished, and every run before it is older still.
+      if (elapsed >= FADE_MS) break;
+
+      let remaining = run.length;
+      while (remaining > 0 && node) {
+        if (isInsideSettledSubtree(node, root)) {
+          node = null;
+          break;
+        }
+        if (!canFadeTextNode(node)) {
+          // Still text the run paid for — the newlines between blocks are
+          // counted in what was rendered — but nothing a fade would show.
+          remaining -= node.length;
+          node = walker.previousNode();
+          continue;
+        }
+
+        const take = Math.min(node.length, remaining);
+        if (take === node.length) {
+          const previous = walker.previousNode();
+          wrapInFade(doc, node, elapsed);
+          node = previous;
+        } else {
+          // The head of this node belongs to an older run, so leave the walk
+          // standing on it rather than moving past.
+          wrapInFade(doc, node.splitText(node.length - take), elapsed);
+        }
+        remaining -= take;
+      }
+    }
+  }
+
+  /// Fade in whatever this frame added to one block.
+  ///
+  /// Runs are measured in rendered characters rather than in markdown, because
+  /// markdown lies about length: `| 名称 | 数值 |` is thirteen characters of
+  /// source and four of text, and fading thirteen would reach back into the row
+  /// above and make settled text flash a second time.
+  function paintBlockFade(block, added, now) {
+    const runs = block.fadeRuns;
+
+    if (added > 0) {
+      const newest = runs[runs.length - 1];
+      // A line boundary always starts a new run, so that a list item or a table
+      // row fades as the one thing it is instead of being blended across the
+      // one before it.
+      const startNew = !newest || block.fadeBreak || now - newest.startedAt >= FADE_STEP_MS;
+      if (startNew) {
+        runs.push({ length: added, startedAt: now });
+      } else {
+        newest.length += added;
+      }
+      block.fadeBreak = false;
+    }
+
+    // Keep the fading region to the end of the text: a burst can reveal far
+    // more in one frame than the gradient should ever cover.
+    let budget = Math.min(MAX_FADE_CHARS, block.renderedLength);
+    for (let index = runs.length - 1; index >= 0; index -= 1) {
+      if (budget <= 0) {
+        runs.splice(0, index + 1);
+        break;
+      }
+      if (runs[index].length > budget) runs[index].length = budget;
+      budget -= runs[index].length;
+    }
+
+    applyFadeRuns(block.container, runs, now);
+  }
+
+  /// Retire the decoration that has run its course.
+  ///
+  /// Done before the paint rather than after it, because the paint asks which
+  /// blocks are still animating in order to decide which ones may be frozen —
+  /// ageing them afterwards would hold every freeze back by a frame, and the
+  /// last one back forever, since a settled channel schedules no more frames.
+  function retireBlockAnimations(entry, stream, now) {
+    const animated = entry.message.status === 'streaming' && usesSmoothStreaming();
+
+    for (let index = 0; index < stream.blocks.length; index += 1) {
+      const block = stream.blocks[index];
+      if (block.settled) continue;
+
+      if (block.entering && (!animated || now - block.enteredAt >= BLOCK_ENTER_MS)) {
+        block.entering = false;
+      }
+      if (!animated) {
+        block.fadeRuns.length = 0;
+        continue;
+      }
+      while (block.fadeRuns.length > 0 && now - block.fadeRuns[0].startedAt >= FADE_MS) {
+        block.fadeRuns.shift();
+      }
+    }
+  }
+
+  /// Decide whether this frame should repaint a block that has grown.
+  ///
+  /// Short blocks always repaint — that is the normal typewriter path and it is
+  /// cheap. Once a block grows past the threshold, re-rendering it on every
+  /// frame is quadratic in its length, so the configured mode takes over.
+  function shouldRenderBlock(block, streaming) {
+    if (!streaming) return true;
+
+    const streamingCfg = runtimeConfig.streaming || {};
+    const threshold = typeof streamingCfg.longBlockThreshold === 'number'
+      ? streamingCfg.longBlockThreshold
+      : 512;
+    if (block.revealed <= threshold) return true;
+    if (block.complete && block.revealed >= block.source.length) return true;
+    if (streamingCfg.longBlockMode === 'deferred') return false;
+
+    // Throttled: pace repaints against how long one actually takes, not against
+    // how much text has arrived. Counting characters instead tied the wait to
+    // the model's speed — 256 characters is a fifth of a second from a fast
+    // model and the better part of ten seconds from a slow one, which is the
+    // difference between a typewriter and a block that freezes mid-word and
+    // then jumps a paragraph. Time keeps the motion continuous at either speed,
+    // and scaling the interval with the measured cost keeps the total work
+    // linear on the slowest device just as the character step did.
+    const cost = block.lastRenderCost;
+    const interval = Math.max(
+      Math.min(cost * TAIL_REPAINT_DUTY, TAIL_REPAINT_MAX_GAP_MS),
+      cost * TAIL_REPAINT_FLOOR_DUTY
+    );
+    return nowMs() - block.lastRenderAt >= interval;
+  }
+
+  function ensureBlockContainer(channel, block) {
+    if (block.container) return block.container;
+    const container = documentRef.createElement('div');
+    container.className = 'md-chat-block';
+    block.container = container;
+    // Blocks first render in document order — the typewriter runs forwards and
+    // an atomic block is only released once the block before it has begun — so
+    // appending is enough to keep the message in order.
+    channel.content.appendChild(container);
+    return container;
+  }
+
+  /// What a block should be rendered with.
+  ///
+  /// A block that is finished is rendered as the document it will stay: real
+  /// syntax highlighting, real KaTeX errors.
+  ///
+  /// A block still being typed defers the errors — red on a formula whose
+  /// closing brace has not arrived is a lie that corrects itself a frame later
+  /// — and defers *guessing* at code, which is not the same as defering the
+  /// highlighting. A fence that names its language is highlighted from its
+  /// first line: the language does not change as the body arrives, so nothing
+  /// recolours. Only a fence that names nothing has to wait, because the only
+  /// way to colour it is to re-guess the language on every frame. The library
+  /// makes that call, since it is the side that knows which languages are
+  /// actually registered — a name it does not recognise falls back to the same
+  /// guess and so has to wait too.
+  function blockOptions(block, streaming) {
+    if (block.complete && block.revealed >= block.source.length) {
+      return markdownOptions();
+    }
+    const inFence = Boolean(block.revealScan && block.revealScan.inFence);
+    return markdownOptions(streaming && inFence, streaming);
+  }
+
+  function paintBlock(entry, channel, block, streaming, now) {
+    ensureBlockContainer(channel, block);
+
+    if (block.decorated) {
+      clearFadeRuns(block.container);
+      block.decorated = false;
+    }
+
+    let added = 0;
+    if (block.dirty) {
+      const startedAt = nowMs();
+      const before = block.renderedLength;
+      commit(
+        block.container,
+        renderSegment(block.source.slice(0, block.revealed), blockOptions(block, streaming))
+      );
+      // Measured from the start of the render, so the interval a long block
+      // waits covers its own cost rather than being added to it.
+      block.lastRenderCost = nowMs() - startedAt;
+      block.lastRenderAt = startedAt;
+      block.renderedLength = block.container.textContent.length;
+      added = Math.max(0, block.renderedLength - before);
+      block.dirty = false;
+    }
+
+    syncBlockEnter(block);
+
+    if (streaming && usesSmoothStreaming() && !block.atomic) {
+      paintBlockFade(block, added, now);
+      block.decorated = block.fadeRuns.length > 0;
+    } else {
+      block.fadeRuns.length = 0;
+    }
+  }
+
+  /// Put the enter animation on — or take it off — the block's own top-level
+  /// elements. A wrapper would need a layout box of its own, and a block
+  /// container that is `display: contents` deliberately has none.
+  function syncBlockEnter(block) {
+    if (block.entering === block.enterApplied) return;
+    const container = block.container;
+    if (!container) return;
+
+    let node = container.firstChild;
+    while (node) {
+      if (node.nodeType === 1) {
+        if (block.entering) node.setAttribute(BLOCK_ENTER_ATTRIBUTE, '');
+        else node.removeAttribute(BLOCK_ENTER_ATTRIBUTE);
+      }
+      node = node.nextSibling;
+    }
+    block.enterApplied = block.entering;
+  }
+
+  /// True when nothing will ever change this block again.
+  function isBlockFinished(block) {
+    return block.complete
+      && block.revealed >= block.source.length
+      && !block.dirty
+      && !block.entering
+      && !block.enterApplied
+      && !block.decorated
+      && block.fadeRuns.length === 0;
+  }
+
+  /// Freeze the finished blocks at the front of the message.
+  ///
+  /// Only a prefix, and only a contiguous one: a block is frozen once it and
+  /// everything before it is done, which is what keeps an atomic block that
+  /// landed early from being frozen while the paragraph above it is still
+  /// being typed and could yet reflow around it.
+  function freezeFinishedBlocks(stream) {
+    for (let index = 0; index < stream.blocks.length; index += 1) {
+      const block = stream.blocks[index];
+      if (block.settled) continue;
+      if (!isBlockFinished(block)) break;
+      block.settled = true;
+      // Nothing will ask about the block's internal state again.
+      block.revealScan = null;
+    }
+  }
+
+  /// Mark the first and last blocks that actually rendered something, and
+  /// report whether the channel has any content at all.
+  ///
+  /// The margin above the first paragraph and below the last one belongs to the
+  /// bubble, not to the block, and which block carries those edges changes as
+  /// the message grows. CSS has no way to say "the first child that is not
+  /// empty", so the answer is written down instead of being asked for.
+  function syncChannelEdges(channel) {
+    let first = null;
+    let last = null;
+    const blocks = channel.stream.blocks;
+
+    for (let index = 0; index < blocks.length; index += 1) {
+      const container = blocks[index].container;
+      if (!container || !container.firstChild) continue;
+      if (!first) first = container;
+      last = container;
+    }
+
+    if (channel.firstEdge !== first) {
+      if (channel.firstEdge) channel.firstEdge.removeAttribute('data-md-first');
+      if (first) first.setAttribute('data-md-first', '');
+      channel.firstEdge = first;
+    }
+    if (channel.lastEdge !== last) {
+      if (channel.lastEdge) channel.lastEdge.removeAttribute('data-md-last');
+      if (last) last.setAttribute('data-md-last', '');
+      channel.lastEdge = last;
+    }
+
+    setAttr(channel.content, 'data-empty', first ? 'false' : 'true');
+  }
+
+  function resetChannel(channel) {
+    if (typeof channel.content.replaceChildren === 'function') {
+      channel.content.replaceChildren();
+    } else {
+      channel.content.innerHTML = '';
+    }
+    channel.firstEdge = null;
+    channel.lastEdge = null;
+  }
+
+  /// Rebuild a channel from scratch, for the paths where the text was replaced
+  /// rather than extended and nothing already on screen can be reused.
+  function fullRenderChannel(entry, channel) {
+    const stream = channel.stream;
+    resetChannel(channel);
+    stream.blocks.length = 0;
+    stream.scanState = newScanState();
+    if (entry.message.status !== 'streaming' && entry.message.status !== 'pending') {
+      stream.ended = true;
+    }
+    ingest(stream);
+    revealEverything(stream);
+
+    const streaming = entry.message.status === 'streaming';
+    const now = nowMs();
+    for (let index = 0; index < stream.blocks.length; index += 1) {
+      const block = stream.blocks[index];
+      if (!block.dirty) continue;
+      paintBlock(entry, channel, block, streaming, now);
+    }
+
+    syncChannelEdges(channel);
+    freezeFinishedBlocks(stream);
+  }
+
+  /// Complete the message if this flush drained the last of its text.
+  ///
+  /// A response is finished only once *both* channels have shown everything
+  /// they were handed: reasoning still typing itself out is as much part of the
+  /// answer as the answer is, and flipping the status early ends the stream
+  /// while text is still on its way to the screen.
+  function completeIfDrained(entry, channel) {
+    if (!entry.finalRequested || hasPendingText(entry)) return false;
+
+    entry.finalRequested = false;
+    entry.answer.stream.finalRequested = false;
+    if (entry.reasoning) entry.reasoning.stream.finalRequested = false;
+    entry.message.status = 'completed';
+    markReasoningDone(entry);
+    updateElementMetadata(entry);
+
+    // The other channel last painted while the message was still streaming, so
+    // whatever decoration it is carrying has to be taken back off.
+    if (channel !== entry.answer) {
+      scheduleChannelFlush(entry, entry.answer, 'chat-final', false);
+    } else if (entry.reasoning) {
+      scheduleChannelFlush(entry, entry.reasoning, 'chat-final', false);
+    }
+    return true;
+  }
+
+  function flushChannel(entry, channel) {
+    const stream = channel.stream;
+    stream.pendingFrame = null;
+    if (stream.renderingInProgress) {
+      stream.pendingFrame = raf(() => flushChannel(entry, channel));
+      return;
+    }
+
+    stream.renderingInProgress = true;
+    try {
+      const now = nowMs();
+      ingest(stream);
+
+      // `fullRerender` asks for exactly what it says: nothing is ever frozen,
+      // and every block is rebuilt on every frame. It exists as an escape
+      // hatch for hosts that hit a diffing bug, and costs what it sounds like.
+      const incremental = !runtimeConfig.streaming
+        || runtimeConfig.streaming.incremental !== false;
+      if (!incremental) {
+        for (let index = 0; index < stream.blocks.length; index += 1) {
+          stream.blocks[index].settled = false;
+          stream.blocks[index].dirty = true;
+        }
+      }
+
+      const paced = usesSmoothStreaming()
+        && !stream.instant
+        && entry.message.status === 'streaming';
+      // True when nothing this frame can do will change the screen, and only
+      // more text will: the typewriter is holding a line back until it is
+      // whole, or everything it could show is already shown and what is left
+      // belongs to an atomic block that has not finished arriving.
+      let waitingOnText = false;
+      if (paced) {
+        const budget = revealBudget(stream, now);
+        const revealed = advanceLane(stream, budget);
+        const released = releaseAtomicBlocks(stream, now);
+        waitingOnText = !released
+          && (laneBacklog(stream) === 0 || (budget > 0 && revealed === 0));
+      } else {
+        revealEverything(stream);
+      }
+
+      const isFinalFlush = completeIfDrained(entry, channel);
+      const streaming = entry.message.status === 'streaming';
+      retireBlockAnimations(entry, stream, now);
+
+      let painted = false;
+      for (let index = 0; index < stream.blocks.length; index += 1) {
+        const block = stream.blocks[index];
+        if (block.settled) continue;
+        // `enterApplied` matters as much as `entering`: a block whose enter
+        // animation has just finished still has the attribute on it, and one
+        // more visit is what takes it back off.
+        const decorating = block.entering
+          || block.enterApplied
+          || block.decorated
+          || block.fadeRuns.length > 0;
+        if (!block.dirty && !decorating) continue;
+        if (block.dirty && !shouldRenderBlock(block, streaming)) continue;
+        paintBlock(entry, channel, block, streaming, now);
+        painted = true;
+      }
+
+      if (painted) syncChannelEdges(channel);
+      if (incremental) freezeFinishedBlocks(stream);
+
+      // Keep the loop alive while anything is still moving, not just while text
+      // is still waiting: a block has to be visited by a later frame for its
+      // decoration to come off and for it to be frozen. A model that stops
+      // mid-answer would otherwise leave both hanging until it started again.
+      const stillMoving = channelIsAnimating(stream)
+        || (hasUnrevealed(stream) && !waitingOnText);
+      if (usesSmoothStreaming() && stillMoving && stream.pendingFrame === null) {
+        stream.pendingFrame = raf(() => flushChannel(entry, channel));
+      }
+
+      // Nothing changed on screen when no block painted, so measuring the
+      // height and re-pinning the scroll would only force needless layout.
+      if (painted) {
+        scheduleHeight(isFinalFlush ? 'chat-final' : stream.pendingReason, isFinalFlush);
+        maybeAutoScroll();
+      }
+    } finally {
+      stream.renderingInProgress = false;
+    }
+  }
+
+  function channelIsAnimating(stream) {
+    for (let index = 0; index < stream.blocks.length; index += 1) {
+      const block = stream.blocks[index];
+      if (block.settled) continue;
+      if (
+        block.dirty
+        || block.entering
+        || block.enterApplied
+        || block.decorated
+        || block.fadeRuns.length > 0
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function scheduleChannelFlush(entry, channel, reason, isFinal) {
+    const stream = channel.stream;
+    stream.pendingReason = reason || stream.pendingReason;
+    if (isFinal) {
+      entry.finalRequested = true;
+      // No more text is coming, so the last block is closed and the playout
+      // has nothing left to smooth against — both change how the next flush
+      // paces itself.
+      stream.ended = true;
+    }
+
+    if (usesSmoothStreaming()) {
+      if (isFinal) stream.finalRequested = true;
+      if (stream.pendingFrame !== null) return;
+      stream.pendingFrame = raf(() => flushChannel(entry, channel));
+      return;
+    }
+    if (isFinal) {
+      stream.finalRequested = true;
+      cancelFrame(stream.pendingFrame);
+      stream.pendingFrame = null;
+      flushChannel(entry, channel);
+      return;
+    }
+    if (stream.pendingFrame !== null) return;
+    stream.pendingFrame = raf(() => flushChannel(entry, channel));
+  }
+
+  // -------------------------------------------------------------------------
+  // Feeding the channels
+  // -------------------------------------------------------------------------
+
+  /// Split newly arrived answer text into its reasoning and answer halves.
+  ///
+  /// The splitter is stateful because a `<think>` marker routinely straddles
+  /// two chunks; it lives on the entry so its "currently inside a think block"
+  /// state survives across the whole response.
+  function routeIncoming(entry, text, final) {
+    if (entry.message.role !== 'assistant' || !inlineReasoningEnabled()) {
+      return { reasoning: '', answer: text || '' };
+    }
+    if (!entry.splitter) {
+      entry.splitter = renderLib.createReasoningSplitter({ tags: reasoningConfig().tags });
+    }
+
+    const routed = entry.splitter.push(text || '');
+    if (!final) return routed;
+
+    // Nothing more is coming, so a tail held back in case it grew into a
+    // marker is just text.
+    const tail = entry.splitter.flush();
+    return {
+      reasoning: routed.reasoning + tail.reasoning,
+      answer: routed.answer + tail.answer
+    };
+  }
+
+  function pushChannelText(channel, text, smooth) {
+    const stream = channel.stream;
+    if (!stream.startedAt) {
+      stream.startedAt = nowMs();
+      // Text the channel was seeded with was never streamed, and counting it
+      // against the time since would report a model typing at thousands of
+      // characters a second.
+      stream.originLength = stream.received.length;
+    }
+    stream.received += text;
+    // A host that asked for the text to appear at once has said the reveal is
+    // not wanted; the playout buffer would only delay it.
+    if (!smooth) stream.instant = true;
+  }
+
+  function feedReasoning(entry, text, smooth, isFinal) {
+    if (!text && !isFinal) return;
+    if (!reasoningConfig().enabled) return;
+
+    ensureReasoningView(entry);
+    setReasoningState(entry, 'thinking');
+    if (text) pushChannelText(entry.reasoning, text, smooth);
+    scheduleChannelFlush(entry, entry.reasoning, 'chat-reasoning', Boolean(isFinal));
+  }
+
+  function feedAnswer(entry, text, smooth, isFinal) {
+    const routed = routeIncoming(entry, text, Boolean(isFinal));
+    if (routed.reasoning) {
+      feedReasoning(entry, routed.reasoning, smooth, false);
+    }
+    if (routed.answer) {
+      pushChannelText(entry.answer, routed.answer, smooth);
+      // The first real answer text is what ends the wait, so that is when the
+      // fold collapses — not when the closing marker arrived, which is often a
+      // beat earlier and leaves the reader looking at nothing.
+      if (routed.answer.trim()) markReasoningDone(entry);
+    }
+    scheduleChannelFlush(entry, entry.answer, 'chat-append', Boolean(isFinal));
+  }
+
+  /// Re-render a message from scratch: the text was replaced rather than
+  /// extended, so nothing already on screen can be reused.
+  function renderEntryNow(entry) {
+    cancelFrame(entry.answer.stream.pendingFrame);
+    if (entry.reasoning) cancelFrame(entry.reasoning.stream.pendingFrame);
+    entry.finalRequested = false;
+    entry.splitter = null;
+
+    const settled = entry.message.status !== 'streaming' && entry.message.status !== 'pending';
+    const routed = routeIncoming(entry, entry.message.markdown, settled);
+    const reasoningText = [entry.message.reasoning, routed.reasoning]
+      .filter((part) => typeof part === 'string' && part.length > 0)
+      .join('');
+
+    entry.answer.stream = newStreamState(routed.answer);
+    fullRenderChannel(entry, entry.answer);
+
+    if (reasoningText && reasoningConfig().enabled) {
+      const view = ensureReasoningView(entry);
+      entry.reasoning.stream = newStreamState(reasoningText);
+      fullRenderChannel(entry, entry.reasoning);
+      // A finished message shows a fold the reader can open; one still being
+      // produced keeps it open, because the reasoning is all there is to read.
+      const stillThinking = !settled
+        && (entry.splitter ? entry.splitter.isReasoning() : false);
+      view.state = 'idle';
+      setReasoningState(entry, stillThinking ? 'thinking' : 'done');
+      if (settled && !view.userToggled) {
+        setReasoningExpanded(entry, Boolean(reasoningConfig().defaultExpanded));
+      }
+      syncReasoningHeader(entry);
+    } else {
+      removeReasoningView(entry);
+    }
+  }
+
+  function scrollingElement() {
+    return documentRef.scrollingElement || documentRef.documentElement || documentRef.body;
+  }
+
+  function isNearBottom() {
+    const scroller = scrollingElement();
+    if (!scroller) return true;
+    const threshold = Number(runtimeConfig.chat.bottomThreshold) || 96;
+    return scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop <= threshold;
+  }
+
+  function viewportState() {
+    const scroller = scrollingElement();
+    if (!scroller) {
+      return {
+        isNearBottom: true,
+        scrollTop: 0,
+        contentHeight: 0,
+        viewportHeight: 0
+      };
+    }
+    return {
+      isNearBottom: isNearBottom(),
+      scrollTop: Math.max(0, Number(scroller.scrollTop) || 0),
+      contentHeight: Math.max(0, Number(scroller.scrollHeight) || 0),
+      viewportHeight: Math.max(0, Number(scroller.clientHeight) || 0)
+    };
+  }
+
+  function notifyViewport() {
+    state.viewportFrame = null;
+    dispatchChatEvent('markdown-chat-viewport', viewportState());
+  }
+
+  function scheduleViewport() {
+    if (state.viewportFrame !== null) return;
+    state.viewportFrame = raf(notifyViewport);
+  }
+
+  function installViewportListeners() {
+    if (state.viewportListenersInstalled || !documentRef) return;
+    state.viewportListenersInstalled = true;
+    documentRef.addEventListener('scroll', scheduleViewport, true);
+    global.addEventListener('resize', scheduleViewport);
+    scheduleViewport();
+  }
+
+  function captureScrollIntent() {
+    const mode = runtimeConfig.chat.autoScroll || 'nearBottom';
+    state.shouldStickToBottom = mode === 'always' || (mode === 'nearBottom' && isNearBottom());
+  }
+
+  function scrollToBottom(animated) {
+    const scroller = scrollingElement();
+    if (!scroller) return false;
+    const top = scroller.scrollHeight;
+    if (animated && typeof scroller.scrollTo === 'function') {
+      scroller.scrollTo({ top, behavior: 'smooth' });
+    } else if (typeof scroller.scrollTo === 'function') {
+      scroller.scrollTo(0, top);
+    } else {
+      scroller.scrollTop = top;
+    }
+    scheduleViewport();
+    return true;
+  }
+
+  /// Room under the newest question, so that it can be scrolled to the top of
+  /// the view and stay there while the answer is written.
+  ///
+  /// A conversation is only as tall as its content, so a question asked at the
+  /// bottom of a short thread cannot rise more than a line or two. Without
+  /// somewhere for it to go, keeping it in sight would mean moving the view
+  /// down as the answer grew — which is the chasing this whole arrangement
+  /// exists to stop. The room shrinks to nothing on its own once the answer is
+  /// long enough to fill the screen by itself.
+  function ensureTailRoom() {
+    if (!state.container) return;
+    const entry = state.anchorId ? state.messages.get(state.anchorId) : null;
+    if (!entry) {
+      releaseTailRoom();
+      return;
+    }
+
+    let spacer = state.tailRoom;
+    if (!spacer) {
+      spacer = documentRef.createElement('div');
+      spacer.className = 'md-chat-tail-room';
+      spacer.setAttribute('aria-hidden', 'true');
+      state.tailRoom = spacer;
+    }
+    // Always last, and always in place before the measurement: the gap the
+    // list puts between its children counts towards the height too, and a
+    // spacer that is not there yet is a gap that is not there yet.
+    if (spacer.parentNode !== state.container || spacer.nextSibling) {
+      state.container.appendChild(spacer);
+    }
+    spacer.style.height = '0px';
+
+    const scroller = scrollingElement();
+    if (!scroller) return;
+    const anchorTop = entry.element.getBoundingClientRect().top + scroller.scrollTop;
+    const needed = Math.round(anchorTop + scroller.clientHeight - scroller.scrollHeight);
+    if (needed <= 0) {
+      releaseTailRoom();
+      return;
+    }
+    spacer.style.height = `${needed}px`;
+  }
+
+  function releaseTailRoom() {
+    if (state.tailRoom && state.tailRoom.parentNode) {
+      state.tailRoom.parentNode.removeChild(state.tailRoom);
+    }
+  }
+
+  function clearScrollAnchor() {
+    state.anchorId = null;
+    releaseTailRoom();
+  }
+
+  /// Put a message at the top of the view and leave it there.
+  ///
+  /// This is the other half of turning auto-scroll off. A reader who has just
+  /// asked a question wants to see the question and the answer growing under
+  /// it; what they do not want is the view moving on its own while they read.
+  /// Moving once, on their own action, and then holding still is the whole of
+  /// it — every scroll after this one is theirs to make.
+  function scrollToMessage(id, options) {
+    if (!ensureMounted()) return false;
+    const messageId = String(id);
+    const entry = state.messages.get(messageId);
+    if (!entry) return false;
+
+    const opts = options || {};
+    state.anchorId = messageId;
+    ensureTailRoom();
+
+    const scroller = scrollingElement();
+    if (!scroller) return false;
+    const offset = Number(opts.offset) || 0;
+    const anchorTop = entry.element.getBoundingClientRect().top + scroller.scrollTop;
+    const top = Math.max(0, Math.round(anchorTop - offset));
+
+    // The reader was taken somewhere deliberately, so nothing that arrives
+    // afterwards may take them somewhere else.
+    state.shouldStickToBottom = false;
+    if (opts.animated !== false && typeof scroller.scrollTo === 'function') {
+      scroller.scrollTo({ top, behavior: 'smooth' });
+    } else if (typeof scroller.scrollTo === 'function') {
+      scroller.scrollTo(0, top);
+    } else {
+      scroller.scrollTop = top;
+    }
+    scheduleViewport();
+    return true;
+  }
+
+  function maybeAutoScroll() {
+    const mode = runtimeConfig.chat.autoScroll || 'nearBottom';
+    if (mode === 'never') return;
+    if (runtimeConfig.chat.preserveUserScroll !== false && !state.shouldStickToBottom) return;
+
+    // Scroll in the same task as the mutation that grew the content, so the
+    // browser lays both out for the same paint. Deferring to the next animation
+    // frame published one frame with taller content but a stale scroll offset,
+    // which read as the whole block dropping a line and snapping back on every
+    // streamed line — roughly ten visible jumps per second.
+    //
+    // Every caller runs straight after a DOM write, so reading scrollHeight
+    // here forces the layout that was due before paint anyway.
+    if (state.scrollFrame !== null) {
+      cancelFrame(state.scrollFrame);
+      state.scrollFrame = null;
+    }
+    scrollToBottom(false);
+  }
+
+  function measureHeight() {
+    if (!documentRef) return 0;
+    const bodyHeight = documentRef.body ? documentRef.body.scrollHeight : 0;
+    const containerHeight = state.container ? state.container.scrollHeight : 0;
+    return Math.max(bodyHeight, containerHeight);
+  }
+
+  function scheduleHeight(reason, initial) {
+    cancelFrame(state.heightFrame);
+    state.heightFrame = raf(() => {
+      state.heightFrame = null;
+      // Before the measurement, so the height the host is told about is the
+      // one the reader can actually scroll through.
+      ensureTailRoom();
+      const height = measureHeight();
+      if (initial && bridge && typeof bridge.notifyRenderComplete === 'function') {
+        bridge.notifyRenderComplete({ success: true, height, reason: reason || 'chat-render' });
+      } else if (bridge && typeof bridge.notifyContentHeight === 'function') {
+        bridge.notifyContentHeight(height, reason || 'chat-change');
+      }
+      scheduleViewport();
+    });
+  }
+
+  function forEachChannel(entry, visit) {
+    visit(entry.answer);
+    if (entry.reasoning) visit(entry.reasoning);
+  }
+
+  function setMessages(messages) {
+    if (!ensureMounted()) return false;
+    captureScrollIntent();
+    clearScrollAnchor();
+    cancelFrame(state.heightFrame);
+    state.messages.forEach((entry) => {
+      forEachChannel(entry, (channel) => cancelFrame(channel.stream.pendingFrame));
+    });
+    state.messages.clear();
+    state.order = [];
+    state.container.innerHTML = '';
+
+    (Array.isArray(messages) ? messages : []).forEach((rawMessage) => {
+      const message = normalizeMessage(rawMessage);
+      const entry = createEntry(message);
+      state.messages.set(message.id, entry);
+      state.order.push(message.id);
+      state.container.appendChild(entry.element);
+      renderEntryNow(entry);
+    });
+
+    scheduleHeight('chat-set-messages', true);
+    maybeAutoScroll();
+    return true;
+  }
+
+  function appendMessage(rawMessage) {
+    if (!ensureMounted()) return false;
+    captureScrollIntent();
+    const message = normalizeMessage(rawMessage);
+    const existing = state.messages.get(message.id);
+    if (existing) {
+      return updateMessage(message.id, message);
+    }
+
+    const entry = createEntry(message);
+    state.messages.set(message.id, entry);
+    state.order.push(message.id);
+    state.container.appendChild(entry.element);
+    renderEntryNow(entry);
+    scheduleHeight('chat-append-message', true);
+    maybeAutoScroll();
+    return true;
+  }
+
+  /// True when `next` merely continues `previous`, which is the shape every
+  /// streamed update has: the host resends the whole message with more text on
+  /// the end. Anything else is a rewrite and has to be re-rendered.
+  function grewFrom(previous, next) {
+    return next.length > previous.length && next.startsWith(previous);
+  }
+
+  function updateMessage(id, patch) {
+    if (!ensureMounted()) return false;
+    captureScrollIntent();
+    const messageId = String(id);
+    const entry = state.messages.get(messageId);
+    if (!entry) {
+      const next = Object.assign({}, patch || {}, { id: messageId });
+      return appendMessage(next);
+    }
+
+    const previous = entry.message;
+    const normalized = normalizeMessage(Object.assign({}, previous, patch || {}, { id: messageId }));
+    entry.message = normalized;
+    updateElementMetadata(entry);
+
+    const markdownChanged = normalized.markdown !== previous.markdown;
+    const reasoningChanged = normalized.reasoning !== previous.reasoning;
+    const markdownGrew = markdownChanged && Boolean(previous.markdown)
+      && grewFrom(previous.markdown, normalized.markdown);
+    const reasoningGrew = reasoningChanged
+      && grewFrom(previous.reasoning || '', normalized.reasoning);
+
+    if ((markdownChanged && !markdownGrew) || (reasoningChanged && !reasoningGrew)) {
+      renderEntryNow(entry);
+      scheduleHeight('chat-update-message', true);
+      maybeAutoScroll();
+      return true;
+    }
+
+    if (!markdownChanged && !reasoningChanged) {
+      // A status-only change (pending → streaming, streaming → completed)
+      // leaves every character exactly where it was. Re-rendering it tore the
+      // message off the screen and rebuilt it, and because that update lands
+      // the moment an answer finishes, it was the most visible flash in the
+      // whole runtime.
+      if (normalized.status !== 'streaming' && hasPendingText(entry)) {
+        entry.finalRequested = true;
+        forEachChannel(entry, (channel) => {
+          scheduleChannelFlush(entry, channel, 'chat-update-message', true);
+        });
+      } else if (normalized.status !== 'streaming') {
+        markReasoningDone(entry);
+      }
+      scheduleHeight('chat-update-message', true);
+      maybeAutoScroll();
+      return true;
+    }
+
+    // The message only grew. Feed the delta through the streaming path so the
+    // new text is appended to what is already on screen.
+    const isFinal = normalized.status !== 'streaming';
+    const smooth = usesSmoothStreaming() && !isFinal;
+
+    if (reasoningGrew) {
+      feedReasoning(
+        entry,
+        normalized.reasoning.slice((previous.reasoning || '').length),
+        smooth,
+        isFinal && !markdownGrew
+      );
+    }
+    if (markdownGrew) {
+      feedAnswer(
+        entry,
+        normalized.markdown.slice(previous.markdown.length),
+        smooth,
+        isFinal
+      );
+    } else if (isFinal) {
+      entry.finalRequested = true;
+      scheduleChannelFlush(entry, entry.answer, 'chat-update-message', true);
+    }
+    return true;
+  }
+
+  function ensureStreamingEntry(id, role) {
+    let entry = state.messages.get(id);
+    if (entry) return entry;
+    appendMessage({ id, role: role || 'assistant', markdown: '', status: 'streaming' });
+    return state.messages.get(id) || null;
+  }
+
+  function appendChunk(id, chunk, opts) {
+    if (!ensureMounted()) return false;
+    captureScrollIntent();
+    const options = opts || {};
+    const messageId = String(id);
+    const entry = ensureStreamingEntry(messageId, options.role);
+    if (!entry) return false;
+
+    const text = typeof chunk === 'string' ? chunk : '';
+    entry.message.markdown += text;
+    entry.message.status = usesSmoothStreaming()
+      ? 'streaming'
+      : (options.isLast ? 'completed' : 'streaming');
+    updateElementMetadata(entry);
+    feedAnswer(entry, text, usesSmoothStreaming(), Boolean(options.isLast));
+    return true;
+  }
+
+  /// Append to the reasoning channel directly.
+  ///
+  /// This is the path for providers that stream the chain of thought in its own
+  /// SSE field (`reasoning_content`, `reasoning`) rather than inline in the
+  /// content — there are no markers to find, the host already knows which field
+  /// it read.
+  function appendReasoningChunk(id, chunk, opts) {
+    if (!ensureMounted()) return false;
+    if (!reasoningConfig().enabled) return false;
+    captureScrollIntent();
+    const options = opts || {};
+    const messageId = String(id);
+    const entry = ensureStreamingEntry(messageId, options.role);
+    if (!entry) return false;
+
+    const text = typeof chunk === 'string' ? chunk : '';
+    entry.message.reasoning += text;
+    if (entry.message.status === 'pending') {
+      entry.message.status = 'streaming';
+      updateElementMetadata(entry);
+    }
+    feedReasoning(entry, text, usesSmoothStreaming(), Boolean(options.isLast));
+    return true;
+  }
+
+  /// Close the fold without ending the message: the model has stopped thinking
+  /// and the answer is about to start.
+  function finishReasoning(id) {
+    if (!ensureMounted()) return false;
+    const entry = state.messages.get(String(id));
+    if (!entry || !entry.reasoningView) return false;
+    markReasoningDone(entry);
+    scheduleHeight('chat-reasoning-final', false);
+    return true;
+  }
+
+  /// Open or close a message's fold from the host, as if the reader had tapped
+  /// it — the choice sticks for the rest of the message.
+  function setReasoningVisible(id, expanded) {
+    if (!ensureMounted()) return false;
+    const entry = state.messages.get(String(id));
+    if (!entry || !entry.reasoningView) return false;
+    entry.reasoningView.userToggled = true;
+    setReasoningExpanded(entry, Boolean(expanded));
+    scheduleHeight('chat-reasoning-toggle', false);
+    return true;
+  }
+
+  function finishMessage(id) {
+    if (!ensureMounted()) return false;
+    const entry = state.messages.get(String(id));
+    if (!entry) return false;
+
+    entry.finalRequested = true;
+    entry.message.status = usesSmoothStreaming() && hasPendingText(entry)
+      ? 'streaming'
+      : 'completed';
+    updateElementMetadata(entry);
+    if (entry.reasoning) {
+      scheduleChannelFlush(entry, entry.reasoning, 'chat-final', true);
+    }
+    scheduleChannelFlush(entry, entry.answer, 'chat-final', true);
+    return true;
+  }
+
+  function removeMessage(id) {
+    if (!ensureMounted()) return false;
+    captureScrollIntent();
+    const messageId = String(id);
+    const entry = state.messages.get(messageId);
+    if (!entry) return false;
+    if (state.anchorId === messageId) clearScrollAnchor();
+    forEachChannel(entry, (channel) => cancelFrame(channel.stream.pendingFrame));
+    entry.element.remove();
+    state.messages.delete(messageId);
+    state.order = state.order.filter((item) => item !== messageId);
+    scheduleHeight('chat-remove-message', true);
+    maybeAutoScroll();
+    return true;
+  }
+
+  function clearMessages() {
+    if (!ensureMounted()) return false;
+    cancelFrame(state.scrollFrame);
+    state.scrollFrame = null;
+    clearScrollAnchor();
+    state.messages.forEach((entry) => {
+      forEachChannel(entry, (channel) => cancelFrame(channel.stream.pendingFrame));
+    });
+    state.messages.clear();
+    state.order = [];
+    state.container.innerHTML = '';
+    scheduleHeight('chat-clear', true);
+    return true;
+  }
+
+  global.MarkdownChatRenderer = {
+    mount: ensureMounted,
+    setMessages,
+    appendMessage,
+    updateMessage,
+    appendChunk,
+    appendReasoningChunk,
+    finishReasoning,
+    setReasoningVisible,
+    finishMessage,
+    removeMessage,
+    clearMessages,
+    scrollToBottom,
+    scrollToMessage,
+    getContentHeight: measureHeight,
+    getViewportState: viewportState,
+    debugState() {
+      const reasoning = {};
+      state.messages.forEach((entry, id) => {
+        if (!entry.reasoningView) return;
+        reasoning[id] = {
+          state: entry.reasoningView.state,
+          expanded: entry.reasoningView.expanded,
+          label: entry.reasoningView.labelText,
+          text: entry.reasoning.stream.received
+        };
+      });
+      return {
+        mounted: state.mounted,
+        count: state.order.length,
+        order: state.order.slice(),
+        reasoning
+      };
+    }
+  };
+})(window);