@djangocfg/ui-tools 2.1.431 → 2.1.432

package/src/tools/dev/code/MarkdownMessage/MarkdownMessage.tsx

@@ -18,6 +18,63 @@ import { looksLikePlainProse } from './plainText';
 import { createMarkdownComponents } from './components';
 import { CollapseToggle } from './CollapseToggle';
 import { applyPreprocess, buildLinkRulesComponent, collectProtocols } from './linkRules';
+import { renderableTail, splitStreamingBlocks } from './streamingBlocks';
+
+/**
+ * Shared remark plugin chain. Hoisted to a module constant so its
+ * reference is stable across every block render in streaming mode —
+ * otherwise a fresh array each render would defeat ReactMarkdown's own
+ * internal memoization and force every block to re-process.
+ *
+ * Order is load-bearing:
+ *   1. `remark-gfm` — tables, strikethrough, autolinks, task lists.
+ *   2. `remark-breaks` — chat convention: single `\n` → `<br>`.
+ *   3. `remark-smartypants` — typographic substitutions.
+ *   4. `remark-emoji` — `:smile:` → 😄.
+ */
+const REMARK_PLUGINS = [remarkGfm, remarkBreaks, remarkSmartypants, remarkEmoji] as const;
+
+/** Props for a single rendered markdown block. Kept small so the memo
+ *  comparator is cheap and precise. */
+interface MarkdownBlockProps {
+  source: string;
+  components: Partial<Components>;
+  schema: ReturnType<typeof buildSchema>;
+  urlTransform: ReturnType<typeof buildUrlTransform> | undefined;
+}
+
+/**
+ * One memoized markdown block. In streaming mode the parent block-splits
+ * the document and renders each completed block through this; the memo
+ * comparator skips re-parsing any block whose `source` (and render config)
+ * is unchanged — so as tokens append to the tail, blocks 0..N-1 stay put.
+ */
+const MarkdownBlock = memo(
+  function MarkdownBlockRaw({ source, components, schema, urlTransform }: MarkdownBlockProps) {
+    return (
+      <ReactMarkdown
+        remarkPlugins={REMARK_PLUGINS as unknown as React.ComponentProps<typeof ReactMarkdown>['remarkPlugins']}
+        // rehype-raw parses inline HTML; rehype-sanitize (extended schema)
+        // runs after to keep XSS guards; rehype-external-links tags <a>.
+        // SAME chain as the non-streaming path → identical safety posture.
+        rehypePlugins={[
+          rehypeRaw,
+          [rehypeSanitize, schema],
+          [rehypeExternalLinks, { target: '_blank', rel: ['noopener', 'noreferrer'] }],
+        ]}
+        components={components}
+        urlTransform={urlTransform}
+      >
+        {source}
+      </ReactMarkdown>
+    );
+  },
+  (a, b) =>
+    a.source === b.source &&
+    a.components === b.components &&
+    a.schema === b.schema &&
+    a.urlTransform === b.urlTransform,
+);
 
 /** Body text size class for the plain-text / prose wrapper. */
 const SIZE_TO_TEXT: Record<'xs' | 'sm' | 'base', string> = {
@@ -86,6 +143,7 @@ function MarkdownMessageRaw({
   showLessLabel = 'Show less',
   defaultExpanded = false,
   onCollapseChange,
+  streaming = false,
   codeTheme = 'dark',
 }: MarkdownMessageProps) {
   // Pre-process content through any rules that requested it. Done
@@ -167,6 +225,19 @@ function MarkdownMessageRaw({
     ? plainText
     : !customComponentsBeyondLinks && looksLikePlainProse(displayContent);
 
+  // Streaming mode is only meaningful on the markdown path and when not
+  // collapsing (collapse is a finished-message concern). `plainText` and
+  // `collapsible` both win over it.
+  const isStreamingMarkdown = streaming && !isPlainText && !collapsible;
+
+  // Block-split the in-flight document. Recomputed only when content
+  // changes; cheap (single string pass). Stable blocks feed memoized
+  // <MarkdownBlock>s so blocks 0..N-1 don't re-parse per token.
+  const split = React.useMemo(
+    () => (isStreamingMarkdown ? splitStreamingBlocks(displayContent) : null),
+    [isStreamingMarkdown, displayContent],
+  );
+
   if (isPlainText) {
     // <div> + whitespace-pre-wrap: respects newlines AND collapses
     // double spaces, which is what users mean when they hit Enter
@@ -200,70 +271,91 @@ function MarkdownMessageRaw({
     );
   }
 
+  // Prose wrapper class — shared by the static and streaming branches so
+  // typography is byte-identical whether rendered in one pass or block by
+  // block.
+  const proseWrapperClass = `
+    prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass} font-normal antialiased
+    ${isUser ? 'prose-invert' : 'dark:prose-invert'}
+    [&>*]:leading-relaxed
+    [&>*:first-child]:mt-0 [&>*:last-child]:mb-0
+    [&_p]:my-2
+    [&_ul]:my-2 [&_ol]:my-2 [&_ul]:pl-5 [&_ol]:pl-5
+    [&_li]:my-1 [&_li>p]:my-0
+    [&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-base [&_h1]:font-semibold
+    [&_h2]:mt-3.5 [&_h2]:mb-1.5 [&_h2]:text-[15px] [&_h2]:font-semibold
+    [&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-medium
+    [&_h4]:mt-3 [&_h4]:mb-1 [&_h4]:text-sm [&_h4]:font-medium
+  `;
+  const proseWrapperStyle = {
+    // Inherit colors from parent — fixes issues with external CSS
+    // variables overriding prose tokens.
+    '--tw-prose-body': 'inherit',
+    '--tw-prose-headings': 'inherit',
+    '--tw-prose-bold': 'inherit',
+    '--tw-prose-links': 'inherit',
+    color: 'inherit',
+  } as React.CSSProperties;
+
+  // ── Streaming branch ──────────────────────────────────────────────────
+  // Render completed blocks as memoized markdown; hold the in-flight tail
+  // as raw text (boundary buffering) — or as an in-progress code block if
+  // it's inside an unterminated fence. Same sanitize/components chain, so
+  // identical XSS posture; just invoked per block instead of once.
+  if (isStreamingMarkdown && split) {
+    const tail = renderableTail(split.tail, split.tailInOpenFence);
+    return (
+      <div className={`select-text ${className}`}>
+        <div className={proseWrapperClass} style={proseWrapperStyle}>
+          {split.blocks.map((source, i) => (
+            <MarkdownBlock
+              // Index keys: streaming only appends/edits the tail, so
+              // earlier blocks never reorder — index keys avoid unmount
+              // churn while keeping the memo identity stable.
+              key={i}
+              source={source}
+              components={components}
+              schema={schema}
+              urlTransform={urlTransform}
+            />
+          ))}
+          {tail.source &&
+            (tail.asCode ? (
+              // Unterminated fence → render as an in-progress code block so
+              // it doesn't swallow the rest of the message. The close fence
+              // is virtual (appended to a copy); stored content is untouched.
+              <MarkdownBlock
+                key="tail-code"
+                source={tail.source}
+                components={components}
+                schema={schema}
+                urlTransform={urlTransform}
+              />
+            ) : (
+              // Boundary buffering: the trailing incomplete line/block stays
+              // raw `whitespace-pre-wrap` until a newline promotes it — no
+              // flash of half-written `**bold` / `[link](`.
+              <div className="whitespace-pre-wrap break-words leading-relaxed">
+                {tail.source}
+              </div>
+            ))}
+        </div>
+      </div>
+    );
+  }
+
+  // ── Static branch (finished message / non-streaming) ──────────────────
   return (
     // `select-text` keeps prose + code blocks selectable under native-host
     // `body { user-select: none }` (Wails/Electron); no-op on web.
     <div className={`select-text ${className}`}>
-      <div
-        className={`
-          prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass} font-normal antialiased
-          ${isUser ? 'prose-invert' : 'dark:prose-invert'}
-          [&>*]:leading-relaxed
-          [&>*:first-child]:mt-0 [&>*:last-child]:mb-0
-          [&_p]:my-2
-          [&_ul]:my-2 [&_ol]:my-2 [&_ul]:pl-5 [&_ol]:pl-5
-          [&_li]:my-1 [&_li>p]:my-0
-          [&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-base [&_h1]:font-semibold
-          [&_h2]:mt-3.5 [&_h2]:mb-1.5 [&_h2]:text-[15px] [&_h2]:font-semibold
-          [&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-medium
-          [&_h4]:mt-3 [&_h4]:mb-1 [&_h4]:text-sm [&_h4]:font-medium
-        `}
-        style={{
-          // Inherit colors from parent — fixes issues with external
-          // CSS variables overriding prose tokens.
-          '--tw-prose-body': 'inherit',
-          '--tw-prose-headings': 'inherit',
-          '--tw-prose-bold': 'inherit',
-          '--tw-prose-links': 'inherit',
-          color: 'inherit',
-        } as React.CSSProperties}
-      >
-        <ReactMarkdown
-          // Remark plugin order is load-bearing:
-          //   1. `remark-gfm` — tables, strikethrough, autolinks, task lists.
-          //   2. `remark-breaks` — chat convention: single `\n` → `<br>`
-          //      (ChatGPT / Slack / Discord / Linear). CommonMark's
-          //      default would collapse those into one paragraph and
-          //      LLM punchlines / poems / dialogue would render as a
-          //      run-on line. Goes BEFORE smartypants so quotes that
-          //      land at line breaks still get the curly treatment.
-          //   3. `remark-smartypants` — typographic substitutions:
-          //      "..." → …, -- → —, "x" → "x". Cheap "humanized"
-          //      polish à la Medium / Substack.
-          //   4. `remark-emoji` — `:smile:` → 😄 (GitHub / Linear
-          //      shortcode style). Leaves Unicode emoji untouched.
-          remarkPlugins={[remarkGfm, remarkBreaks, remarkSmartypants, remarkEmoji]}
-          // rehype-raw parses inline HTML in the source; rehype-sanitize
-          // (with our extended schema) runs after to keep XSS guards
-          // (no scripts, no on* handlers, no javascript: urls).
-          // rehype-external-links runs LAST so it tags every <a> that
-          // sanitize let through — externals get target=_blank +
-          // rel=noopener noreferrer in one pass, instead of every
-          // custom `a` renderer reimplementing the rule.
-          rehypePlugins={[
-            rehypeRaw,
-            [rehypeSanitize, schema],
-            [rehypeExternalLinks, { target: '_blank', rel: ['noopener', 'noreferrer'] }],
-          ]}
+      <div className={proseWrapperClass} style={proseWrapperStyle}>
+        <MarkdownBlock
+          source={displayContent}
           components={components}
-          // urlTransform runs in remark-rehype before sanitize. Without
-          // overriding it, react-markdown's default strips `href` for
-          // unknown schemes — making our extended sanitize whitelist
-          // moot. Only set when the caller opted into extra protocols.
+          schema={schema}
           urlTransform={urlTransform}
-        >
-          {displayContent}
-        </ReactMarkdown>
+        />
       </div>
       {collapsible && shouldCollapse && (
         <CollapseToggle

package/src/tools/dev/code/MarkdownMessage/README.md

@@ -21,6 +21,7 @@ import { MarkdownMessage } from '@djangocfg/ui-tools/markdown-message';
 | Syntax-highlighted code fences with copy button | `<PrettyCode>` |
 | Mermaid diagrams (` ```mermaid ` fence) with click-to-fullscreen | `<Mermaid>` |
 | Custom URL schemes via declarative `linkRules` | `./linkRules.ts` |
+| Opt-in URL chips (bare URLs → favicon + middle-ellipsis chip) | `urlChipRule` · `./builtinRules.tsx` |
 | Plain-text fast path — short messages skip the markdown pipeline | `./plainText.ts` |
 | Optional collapsible "Read more" for long replies | `useCollapsibleContent` |
 | Hover-revealed copy action under the bubble (separate `<ActionRow>` export) | `<CopyButton>` (ui-core) |
@@ -84,6 +85,42 @@ The plain `a` renderer keeps its palette and typography; `linkRules` only fires
 when both the `protocols` and the `match` predicate accept the href. See
 `linkRules.ts` for the sanitize-extension logic.
 
+### Built-in `urlChipRule` (URL chips)
+
+`urlChipRule` (exported from `./builtinRules`) is a shipped, **opt-in** `LinkRule`
+that renders a URL as a compact `<UrlChip>` — favicon + domain + middle-ellipsis
+path (`github.com/…/README.md`), the same chip the chat composer shows while you
+type a URL. It is not applied automatically; a host appends it to its own
+`linkRules`:
+
+```tsx
+import { MarkdownMessage, urlChipRule } from '@djangocfg/ui-tools/markdown-message';
+
+<MarkdownMessage content={text} linkRules={[urlChipRule]} />
+```
+
+In the Chat tool this is wired by `ChatConfig.linkChips` (off by default); when
+on, `MessageBubble` passes `linkRules={[urlChipRule]}`.
+
+Behaviour:
+
+- **Bare URLs only.** It chips a link whose rendered label *is* the href (a
+  plain autolink, trailing-slash difference tolerated). A `[labeled](url)` link
+  keeps the author's text and renders as a normal styled link — the rule falls
+  back to an `<a>` using the chat `ANCHOR` tokens so it stays colored +
+  underlined, not stripped to plain text.
+- **Scope is `http(s)` only** (`match: /^https?:\/\//i`). `mailto:` / custom
+  schemes (`cmdop://`, …) are left to other rules, so it needs no `protocols`
+  whitelist.
+- **`www.` host promotion.** Its `preprocess` hook rewrites bare `www.host…`
+  tokens to `https://www.host…` before parsing — GFM only autolinks tokens with
+  a scheme, so without this a bare `www.` host would reach neither the rule nor
+  the default anchor and render as plain text. The promotion is boundary-guarded
+  so it never double-prefixes an already-schemed URL.
+
+`UrlChip` itself is the surface-agnostic chip in `src/common/chips` — see
+[`common/chips/README.md`](../../../../common/chips/README.md).
+
 ## Copy action (`<ChatMessageRow>` + `<ActionRow>`)
 
 Two pieces, two responsibilities:
@@ -160,6 +197,7 @@ so it's already future-proof for richer rows like
 | `components.tsx` | The `Components` map — typography, lists, table, code, blockquote, hr |
 | `CodeBlock.tsx` | Code-fence renderer (`PrettyCode`) + plain `<pre>` fallback |
 | `linkRules.ts` | Declarative custom-URL primitive — schema & helpers |
+| `builtinRules.tsx` | Shipped opt-in rules — `urlChipRule` (bare URL → `<UrlChip>`) |
 | `plainText.ts` | `looksLikePlainProse` heuristic + `extractTextFromChildren` utility |
 | `sanitize.ts` | Extended rehype-sanitize schema + `urlTransform` builder |
 | `CollapseToggle.tsx` | "Read more / Show less" affordance for long replies |

package/src/tools/dev/code/MarkdownMessage/builtinRules.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+/**
+ * Built-in `LinkRule`s shipped with `MarkdownMessage`. These are opt-in —
+ * a host enables them (e.g. via `ChatConfig.linkChips`) by appending them
+ * to its own `linkRules` array; they are NOT applied automatically.
+ *
+ * ── `urlChipRule` ──
+ *
+ * Renders a BARE web URL (a plain `https://…` autolink, where the markdown
+ * link text === the href) as a compact `<UrlChip>` (favicon + domain +
+ * middle-ellipsis path) — the same chip the composer shows while you type a
+ * URL. This makes a URL read identically across the composer and the
+ * rendered bubble (plan22's reuse goal).
+ *
+ * Deliberately CHIPS ONLY bare URLs:
+ *   - `https://github.com/wailsapp/wails`  → chip (children === href)
+ *   - `[the repo](https://github.com/...)` → NOT chipped — the author chose
+ *     custom link text, so we honour it and render a normal styled link
+ *     (fall through to the built-in anchor).
+ *
+ * Scope is `http(s)` only — `mailto:` / custom schemes (`cmdop://`, …) are
+ * left to other rules. Because it only matches `http(s)`, it needs no extra
+ * `protocols` whitelist.
+ */
+
+import type React from 'react';
+
+import { UrlChip } from '../../../../common/chips/UrlChip';
+import { ANCHOR } from '../../../chat/styles/bubbleTokens';
+import { extractTextFromChildren } from './plainText';
+import type { LinkRule } from './types';
+
+/** True when the link's rendered label is just the href itself (a bare
+ *  autolinked URL), i.e. the author did NOT supply custom link text. We
+ *  compare the flattened text label to the href, tolerating a trailing
+ *  slash difference that markdown autolinkers sometimes introduce. */
+function isBareUrlLink(href: string, children: React.ReactNode): boolean {
+  const label = extractTextFromChildren(children).trim();
+  if (!label) return true; // no visible text → treat as bare
+  const strip = (s: string) => s.replace(/\/+$/, '');
+  return strip(label) === strip(href);
+}
+
+/**
+ * Promote bare `www.host…` tokens to `https://www.host…` BEFORE markdown
+ * parsing. remark-gfm only autolinks tokens with a scheme, so a bare `www.`
+ * host would otherwise reach neither this rule nor the default anchor — it
+ * renders as unstyled plain text (the reported bug). Adding the scheme lets
+ * gfm autolink it so the chip rule can claim it, matching the composer
+ * (whose autolink whitelist also chips `www.` hosts).
+ *
+ * Guards against double-prefixing: only matches a `www.` that is preceded by
+ * a whitespace / line-start / `(` boundary AND not already part of a
+ * `://www.` or `](…www.` URL.
+ */
+function promoteWwwHosts(source: string): string {
+  return source.replace(
+    /(^|[\s(])(www\.[^\s)<>]+)/gim,
+    (_m, lead: string, host: string) => `${lead}https://${host}`,
+  );
+}
+
+export const urlChipRule: LinkRule = {
+  name: 'url-chip',
+  // Promote bare `www.` hosts so gfm autolinks them (then we chip them).
+  preprocess: promoteWwwHosts,
+  // Only real web URLs. Leave mailto:/custom schemes to other rules.
+  match: (href) => /^https?:\/\//i.test(href),
+  render: ({ href, children, isUser }) => {
+    // Honour author-chosen link text: a `[label](url)` link with custom
+    // text is NOT chipped — render a normal styled link so the chosen words
+    // stay the link. Use the SAME anchor styling as the built-in renderer
+    // (`ANCHOR`) so it reads as a link (colored + underlined), not plain
+    // text — otherwise claiming the href here strips the default styling.
+    if (!isBareUrlLink(href, children)) {
+      return (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={isUser ? ANCHOR.user : ANCHOR.assistant}
+        >
+          {children}
+        </a>
+      );
+    }
+    return <UrlChip href={href} />;
+  },
+};
+
+export default urlChipRule;

package/src/tools/dev/code/MarkdownMessage/index.ts

@@ -7,6 +7,8 @@
  *   - `LinkRule` — the declarative link-handling primitive.
  *   - `extractTextFromChildren` — utility for callers that build their
  *     own custom `a` renderers and need a string label.
+ *   - `urlChipRule` — opt-in built-in `LinkRule` that renders a bare
+ *     web URL as a compact `<UrlChip>` (favicon + middle-ellipsis).
  *   - `ActionRow` — dumb action row (copy button), takes `visible`
  *     from its owner.
  *   - `ChatMessageRow` — opinionated bubble + action-row wrapper
@@ -15,5 +17,6 @@
 export { MarkdownMessage, default } from './MarkdownMessage';
 export type { MarkdownMessageProps, LinkRule } from './types';
 export { extractTextFromChildren } from './plainText';
+export { urlChipRule } from './builtinRules';
 export { ActionRow } from './ActionRow';
 export { ChatMessageRow } from './ChatMessageRow';

package/src/tools/dev/code/MarkdownMessage/streamingBlocks.ts

@@ -0,0 +1,164 @@
+/**
+ * Streaming-markdown block splitter + boundary buffering.
+ *
+ * Purpose: render markdown LIVE during streaming without (a) re-parsing
+ * the whole document on every token (O(n²)) and (b) flashing raw syntax
+ * for half-written constructs. Approach (per plan105 §3.1 + §3.3):
+ *
+ *   1. Block-split: split accumulating markdown into top-level blocks at
+ *      blank-line boundaries, RESPECTING fenced code blocks (a blank line
+ *      inside ``` does NOT end the block). Each completed block has stable
+ *      `raw` source, so the consumer can memoize blocks 0..N-1 and only
+ *      re-parse the tail → ~O(n).
+ *   2. Boundary buffering: the trailing block — the one still receiving
+ *      tokens — is held back as RAW plain text until it reaches a safe
+ *      boundary (a trailing newline). This kills the "flash of incomplete
+ *      `**bold` / `[link](`" without any fragile syntax repair.
+ *   3. Fence awareness: if the stream ends INSIDE an unclosed ``` fence,
+ *      the tail is rendered as an in-progress code block (we virtually
+ *      close the fence for that render only) instead of as broken markdown
+ *      bleeding into the rest of the message.
+ *
+ * No `marked` / lexer dependency — a blank-line splitter that tracks fence
+ * state is sufficient for the safe-80% path and adds zero deps. The actual
+ * per-block rendering still goes through the full ReactMarkdown pipeline.
+ *
+ * This module is pure (no React) so it is trivially testable.
+ */
+
+/** A fenced-code-block opener: ``` or ~~~, optionally indented up to 3
+ *  spaces, with an optional info string. Per CommonMark the closing fence
+ *  must use the same char and be at least as long; we keep it simple and
+ *  match the char + length, which covers real LLM output. */
+const FENCE_RE = /^( {0,3})(`{3,}|~{3,})(.*)$/;
+
+interface FenceState {
+  open: boolean;
+  /** The exact fence marker that opened the current block (e.g. "```"). */
+  marker: string;
+}
+
+/** Does `line` open/close a fence given the current state? Returns the
+ *  next fence state. A line that closes uses the same char, >= length, and
+ *  no trailing info string. */
+function stepFence(line: string, state: FenceState): FenceState {
+  const m = FENCE_RE.exec(line);
+  if (!m) return state;
+  const marker = m[2];
+  const info = m[3].trim();
+  if (!state.open) {
+    // Any fence line opens a block (info string allowed on open).
+    return { open: true, marker };
+  }
+  // Inside a fence: a bare fence of the same char and >= length closes it.
+  const sameChar = marker[0] === state.marker[0];
+  const longEnough = marker.length >= state.marker.length;
+  if (sameChar && longEnough && info === '') {
+    return { open: false, marker: '' };
+  }
+  return state;
+}
+
+export interface SplitResult {
+  /** Completed, stable top-level blocks (safe to memoize + parse). */
+  blocks: string[];
+  /** The trailing in-flight block, or '' if the content ended on a
+   *  clean boundary. Held back from `blocks` so it can be rendered raw
+   *  (boundary buffering) until it completes. */
+  tail: string;
+  /** True when `tail` is the body of an unterminated fenced code block —
+   *  the consumer should render it as an in-progress code block rather
+   *  than raw prose. */
+  tailInOpenFence: boolean;
+}
+
+/**
+ * Split `content` into stable blocks + a trailing in-flight block.
+ *
+ * Boundary rule: a block is "complete" once a blank line follows it AND
+ * we are not inside an open fence. The text after the last such boundary
+ * is the `tail`. If the whole content ends with a newline and no fence is
+ * open, the tail is empty (everything promoted to stable blocks).
+ *
+ * @param content raw accumulated markdown (never mutated)
+ */
+export function splitStreamingBlocks(content: string): SplitResult {
+  if (content.length === 0) {
+    return { blocks: [], tail: '', tailInOpenFence: false };
+  }
+
+  const lines = content.split('\n');
+  const blocks: string[] = [];
+  let current: string[] = [];
+  let fence: FenceState = { open: false, marker: '' };
+
+  // Track fence state at the START of the current accumulating block so we
+  // know, at the end, whether the tail is inside an open fence.
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const wasOpen = fence.open;
+    fence = stepFence(line, fence);
+
+    const isBlank = line.trim() === '';
+    // A blank line outside any fence is a block boundary. We only cut when
+    // we have accumulated something — leading/again-blank lines collapse.
+    if (isBlank && !fence.open && !wasOpen) {
+      if (current.length > 0) {
+        blocks.push(current.join('\n'));
+        current = [];
+      }
+      // Drop the blank separator itself.
+      continue;
+    }
+    current.push(line);
+  }
+
+  // Whatever remains is the in-flight tail. If the original content ended
+  // with a trailing newline AND we're on a clean boundary (no open fence),
+  // the tail is genuinely complete prose — but we still keep it as `tail`
+  // unless it was already closed by a blank line above. To maximize stable
+  // blocks, promote the tail to a completed block when it ends on a clean
+  // newline boundary and no fence is open.
+  let tail = current.join('\n');
+  let tailInOpenFence = fence.open;
+
+  if (!tailInOpenFence && tail.length > 0 && content.endsWith('\n')) {
+    // Content ended on a newline and the tail isn't inside a fence — treat
+    // it as a finished block so it parses (and memoizes) immediately.
+    blocks.push(tail);
+    tail = '';
+  }
+
+  return { blocks, tail, tailInOpenFence };
+}
+
+/**
+ * Prepare the in-flight tail for rendering.
+ *
+ * - If the tail is inside an open fence, virtually close it so it renders
+ *   as an in-progress code block (not raw text bleeding downward). The
+ *   close is appended to a COPY — stored content is never mutated.
+ * - Otherwise return the tail untouched; the consumer renders it as plain
+ *   `whitespace-pre-wrap` text (boundary buffering — no syntax repair).
+ *
+ * NOTE: we deliberately do NOT auto-close dangling `**` / `[` / inline
+ * backticks here (plan105 §3.2, deferred / flag-gated). The only fence we
+ * close is the block code fence, because an unclosed block fence would
+ * otherwise swallow the rest of the message and the close is unambiguous.
+ */
+export function renderableTail(
+  tail: string,
+  tailInOpenFence: boolean,
+): { source: string; asCode: boolean } {
+  if (!tailInOpenFence) return { source: tail, asCode: false };
+  // Re-derive the opening fence marker so we close with a matching one.
+  const firstLine = tail.split('\n', 1)[0] ?? '';
+  const m = FENCE_RE.exec(firstLine);
+  const marker = m ? m[2] : '```';
+  // Ensure the close sits on its own line.
+  const needsNewline = !tail.endsWith('\n');
+  return {
+    source: `${tail}${needsNewline ? '\n' : ''}${marker}`,
+    asCode: true,
+  };
+}

package/src/tools/dev/code/MarkdownMessage/types.ts

@@ -131,6 +131,26 @@ export interface MarkdownMessageProps {
   defaultExpanded?: boolean;
   /** Callback when collapsed state changes */
   onCollapseChange?: (isCollapsed: boolean) => void;
+  /**
+   * Live-streaming mode. When `true`, the content is treated as a
+   * partial markdown document still receiving tokens:
+   *
+   * - Completed top-level blocks render as memoized markdown (blocks
+   *   0..N-1 don't re-parse as new tokens land → ~O(n), not O(n²)).
+   * - The trailing in-flight block is held back as raw `whitespace-pre-wrap`
+   *   text until it reaches a safe boundary (a newline), so half-written
+   *   `**bold` / `[link](` don't flash formatted-then-broken.
+   * - An unterminated fenced code block renders as an in-progress code
+   *   block instead of swallowing the rest of the message.
+   *
+   * Ignored when `plainText` is `true` (plain wins outright) or when
+   * `collapsible` is set (collapsing is a post-stream concern). Has no
+   * effect on the finished message — pass `false` (the default) once the
+   * stream completes to get a single fully-parsed render.
+   *
+   * @default false
+   */
+  streaming?: boolean;
   /**
    * Code-fence surface palette. @default 'dark' — syntax highlighting
    * ships its own contrast model and reads washed out on a light