@jini-ai/chat 0.6.6 → 0.6.7

package/dist/react/components/Icon.js

@@ -1,48 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const CROSS = _jsxs(_Fragment, { children: [_jsx("path", { d: "M20 4 4 20" }), _jsx("path", { d: "m4 4 16 16" })] });
+// Each glyph's SVG children; `Icon` wraps them in the shared `<svg>` shell.
+const ICON_GLYPHS = {
+    spinner: _jsx("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }),
+    check: _jsx("path", { d: "M20 6 9 17l-5-5" }),
+    close: CROSS,
+    x: CROSS,
+    'chevron-down': _jsx("path", { d: "m6 9 6 6 6-6" }),
+    /** Conversation-switcher trigger — a speech bubble reads as "chat history" without a label. */
+    comment: (_jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" })),
+    search: _jsxs(_Fragment, { children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("path", { d: "m20 20-3.5-3.5" })] }),
+    plus: _jsxs(_Fragment, { children: [_jsx("path", { d: "M12 5v14" }), _jsx("path", { d: "M5 12h14" })] }),
+    'chevron-left': _jsx("path", { d: "m15 18-6-6 6-6" }),
+    'chevron-right': _jsx("path", { d: "m9 18 6-6-6-6" }),
+    attach: _jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }),
+    file: _jsxs(_Fragment, { children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }), _jsx("path", { d: "M14 2v6h6" }), _jsx("path", { d: "M8 13h8M8 17h6" })] }),
+    image: _jsxs(_Fragment, { children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }), _jsx("circle", { cx: "9", cy: "9", r: "2" }), _jsx("path", { d: "m21 15-5-5L5 21" })] }),
+    pencil: _jsxs(_Fragment, { children: [_jsx("path", { d: "m16 3 5 5L8 21H3v-5L16 3Z" }), _jsx("path", { d: "m14 5 5 5" })] }),
+    /** Per-message copy affordance (MessageRow.tsx). Two overlapping squares -- the conventional copy glyph. */
+    copy: _jsxs(_Fragment, { children: [_jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }), _jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })] }),
+};
 export function Icon({ name, size = 14, strokeWidth = 1.6, ...rest }) {
-    const common = {
-        width: size,
-        height: size,
-        viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-        'aria-hidden': true,
-        focusable: 'false',
-        ...rest,
-    };
-    switch (name) {
-        case 'spinner':
-            return (_jsx("svg", { ...common, className: `jini-icon-spin ${rest.className ?? ''}`.trim(), children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }) }));
-        case 'check':
-            return (_jsx("svg", { ...common, children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }));
-        case 'close':
-        case 'x':
-            return (_jsxs("svg", { ...common, children: [_jsx("path", { d: "M20 4 4 20" }), _jsx("path", { d: "m4 4 16 16" })] }));
-        case 'chevron-down':
-            return (_jsx("svg", { ...common, children: _jsx("path", { d: "m6 9 6 6 6-6" }) }));
-        /** Conversation-switcher trigger — a speech bubble reads as "chat history" without a label. */
-        case 'comment':
-            return (_jsx("svg", { ...common, children: _jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }) }));
-        case 'search':
-            return (_jsxs("svg", { ...common, children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("path", { d: "m20 20-3.5-3.5" })] }));
-        case 'plus':
-            return (_jsxs("svg", { ...common, children: [_jsx("path", { d: "M12 5v14" }), _jsx("path", { d: "M5 12h14" })] }));
-        case 'chevron-left':
-            return (_jsx("svg", { ...common, children: _jsx("path", { d: "m15 18-6-6 6-6" }) }));
-        case 'chevron-right':
-            return (_jsx("svg", { ...common, children: _jsx("path", { d: "m9 18 6-6-6-6" }) }));
-        case 'attach':
-            return (_jsx("svg", { ...common, children: _jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }));
-        case 'file':
-            return (_jsxs("svg", { ...common, children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }), _jsx("path", { d: "M14 2v6h6" }), _jsx("path", { d: "M8 13h8M8 17h6" })] }));
-        case 'image':
-            return (_jsxs("svg", { ...common, children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }), _jsx("circle", { cx: "9", cy: "9", r: "2" }), _jsx("path", { d: "m21 15-5-5L5 21" })] }));
-        /** Per-message copy affordance (MessageRow.tsx). Two overlapping squares -- the conventional copy glyph. */
-        case 'copy':
-            return (_jsxs("svg", { ...common, children: [_jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }), _jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })] }));
-    }
+    // The spinner alone puts its spin class in front of any caller-supplied one.
+    const className = name === 'spinner' ? `jini-icon-spin ${rest.className ?? ''}`.trim() : rest.className;
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, focusable: "false", ...rest, className: className, children: ICON_GLYPHS[name] }));
 }
 //# sourceMappingURL=Icon.js.map

package/dist/react/components/Markdown.js

@@ -46,45 +46,38 @@ export function Markdown({ children }) {
     const blocks = parseBlocks(children);
     return (_jsx(_Fragment, { children: blocks.map((block, i) => (_jsx(Fragment, { children: renderBlock(block) }, i))) }));
 }
-// GFM pipe-table cell split, ported verbatim (logic-for-logic) from OD's
-// `runtime/markdown.tsx`. Walks char-by-char rather than a naive `split('|')`
+// GFM pipe-table cell split, ported logic-for-logic from OD's
+// `runtime/markdown.tsx`. Tokenizes rather than a naive `split('|')`
 // so it can honor three cell-content rules without placeholder substitution:
 // `\|` is a literal pipe inside a cell, a `|` inside a backtick code span is
 // cell content rather than a column boundary, and a single optional leading
 // `|` plus an unescaped trailing `|` are row terminators, not empty cells.
+// Always returns at least one cell (an empty row yields `['']`).
+const TABLE_ROW_LEAD = /^ *\|?/;
+const TABLE_CELL_TOKEN = /\\\||`|\||[^`|\\]+|\\/g;
 function splitTableCells(line) {
     const cells = [];
     let cur = '';
     let inCode = false;
-    let i = 0;
-    while (i < line.length && line[i] === ' ')
-        i++;
-    if (line[i] === '|')
-        i++;
-    for (; i < line.length; i++) {
-        const ch = line[i];
-        if (ch === '\\' && line[i + 1] === '|') {
-            cur += '|';
-            i++;
-            continue;
-        }
-        if (ch === '`') {
-            inCode = !inCode;
-            cur += ch;
-            continue;
-        }
-        if (ch === '|' && !inCode) {
+    for (const token of line.replace(TABLE_ROW_LEAD, '').match(TABLE_CELL_TOKEN) ?? []) {
+        if (token === '|' && !inCode) {
             cells.push(cur.trim());
             cur = '';
             continue;
         }
-        cur += ch;
+        if (token === '`')
+            inCode = !inCode;
+        cur += token === '\\|' ? '|' : token;
     }
     const tail = cur.trim();
     if (cells.length === 0 || tail !== '')
         cells.push(tail);
     return cells;
 }
+const TABLE_ALIGN_CELL = /^:?-{1,}:?$/;
+// Every cell `TABLE_ALIGN_CELL` accepts starts and ends with `:` or `-`, so its
+// first + last character is always exactly one of these four keys.
+const COLUMN_ALIGN = { '::': 'center', '-:': 'right', ':-': 'left', '--': null };
 // Recognizes a GFM alignment row (`| --- | :---: | ---: |`) and returns the
 // per-column alignment, or `null` if `line` isn't one — used both to detect
 // where a table starts and to read its column alignment.
@@ -92,26 +85,17 @@ function parseTableAlignRow(line) {
     if (!line.includes('|'))
         return null;
     const cells = splitTableCells(line);
-    if (cells.length === 0)
+    if (!cells.every((cell) => TABLE_ALIGN_CELL.test(cell)))
         return null;
-    const aligns = [];
-    for (const cell of cells) {
-        if (!/^:?-{1,}:?$/.test(cell))
-            return null;
-        const left = cell.startsWith(':');
-        const right = cell.endsWith(':');
-        aligns.push(left && right ? 'center' : right ? 'right' : left ? 'left' : null);
-    }
-    return aligns;
+    return cells.map((cell) => COLUMN_ALIGN[`${cell[0]}${cell.at(-1)}`]);
 }
 // A table starts at `i` when `lines[i]` is a pipe-bearing header row
 // immediately followed by a valid alignment row at `lines[i + 1]`.
 function isTableStartAt(lines, i) {
-    const header = lines[i];
     const sep = lines[i + 1];
-    if (header === undefined || sep === undefined)
+    if (sep === undefined)
         return false;
-    if (!header.includes('|'))
+    if (!lines[i].includes('|'))
         return false;
     return parseTableAlignRow(sep) !== null;
 }
@@ -124,7 +108,7 @@ function collectTableRows(lines, start) {
     let i = start;
     while (i < lines.length) {
         const row = lines[i];
-        if (row === undefined || row.trim() === '' || !row.includes('|'))
+        if (row.trim() === '' || !row.includes('|'))
             break;
         rows.push(splitTableCells(row));
         i++;
@@ -132,95 +116,122 @@ function collectTableRows(lines, start) {
     return { rows, next: i };
 }
 const ORDERED_ITEM = /^\s*\d+[.)]\s+/;
+const FENCE = /^```/;
+const HEADING = /^(#{1,3})\s+(.*)$/;
+const RULE = /^(-{3,}|\*{3,}|_{3,})\s*$/;
+const QUOTE_LINE = /^>\s?/;
+const BULLET_ITEM = /^\s*[-*]\s+/;
+function parseFence(lines, i) {
+    const line = lines[i];
+    if (!FENCE.test(line))
+        return null;
+    const lang = line.slice(3).trim() || null;
+    const body = [];
+    let j = i + 1;
+    while (j < lines.length && !FENCE.test(lines[j])) {
+        body.push(lines[j]);
+        j += 1;
+    }
+    // `j + 1` skips the closing fence (or end of input if unterminated).
+    return { block: { kind: 'code', lang, body: body.join('\n') }, next: j + 1 };
+}
+function parseHeading(lines, i) {
+    const heading = HEADING.exec(lines[i]);
+    if (!heading)
+        return null;
+    // Both capture groups are mandatory (non-optional) in this pattern, so
+    // whenever `heading` itself is truthy, `heading[1]`/`heading[2]` are
+    // always matched strings (never `undefined`) — same dead-fallback
+    // reasoning as the `lines[i]` accesses above.
+    return { block: { kind: 'h', level: heading[1].length, text: heading[2] }, next: i + 1 };
+}
+function parseRule(lines, i) {
+    return RULE.test(lines[i]) ? { block: { kind: 'hr' }, next: i + 1 } : null;
+}
+// Collects the run of consecutive lines matching `marker`, each with that
+// marker stripped — the shared shape of blockquotes and bullet lists.
+function collectMarked(lines, start, marker) {
+    const items = [];
+    let i = start;
+    while (i < lines.length && marker.test(lines[i])) {
+        items.push(lines[i].replace(marker, ''));
+        i += 1;
+    }
+    return { items, next: i };
+}
+function parseQuote(lines, i) {
+    if (!QUOTE_LINE.test(lines[i]))
+        return null;
+    const { items, next } = collectMarked(lines, i, QUOTE_LINE);
+    return { block: { kind: 'bq', text: items.join('\n') }, next };
+}
+function parseBulletList(lines, i) {
+    if (!BULLET_ITEM.test(lines[i]))
+        return null;
+    const { items, next } = collectMarked(lines, i, BULLET_ITEM);
+    return { block: { kind: 'ul', items }, next };
+}
+function parseTable(lines, i) {
+    if (!isTableStartAt(lines, i))
+        return null;
+    const aligns = parseTableAlignRow(lines[i + 1]);
+    const headers = splitTableCells(lines[i]);
+    const { rows, next } = collectTableRows(lines, i + 2);
+    return { block: { kind: 'table', aligns, headers, rows }, next };
+}
+function parseOrderedList(lines, i) {
+    const line = lines[i];
+    if (!ORDERED_ITEM.test(line))
+        return null;
+    const start = Number(/\d+/.exec(line)[0]);
+    const items = [];
+    let j = i;
+    while (j < lines.length && ORDERED_ITEM.test(lines[j])) {
+        items.push(lines[j].replace(ORDERED_ITEM, ''));
+        j = nextLooseListLine(lines, j + 1);
+    }
+    return { block: { kind: 'ol', start, items }, next: j };
+}
+// Tried in this order at each non-blank line; the first match wins, and a
+// line none of them claims starts a paragraph.
+const BLOCK_PARSERS = [
+    parseFence,
+    parseHeading,
+    parseRule,
+    parseQuote,
+    parseBulletList,
+    parseTable,
+    parseOrderedList,
+];
+function parseParagraph(lines, i) {
+    const paragraph = [];
+    let j = i;
+    while (j < lines.length && lines[j].trim() !== '' && !isBlockStart(lines, j)) {
+        paragraph.push(lines[j]);
+        j += 1;
+    }
+    return { block: { kind: 'p', text: paragraph.join('\n') }, next: j };
+}
+function parseBlockAt(lines, i) {
+    for (const parse of BLOCK_PARSERS) {
+        const parsed = parse(lines, i);
+        if (parsed)
+            return parsed;
+    }
+    return parseParagraph(lines, i);
+}
 function parseBlocks(input) {
     const lines = input.split(/\r?\n/);
     const blocks = [];
     let i = 0;
-    // Every `lines[i]` access below is guarded by an `i < lines.length` check
-    // (either this loop's own condition or an inner `while`'s left-hand
-    // operand, short-circuited before the index is read) — `lines` is a
-    // `string[]` from `String.prototype.split`, which never contains
-    // `undefined` entries, so the index is always in range and always a
-    // string. The `?? ''`/non-null-assertion sites below are TS-only
-    // fallbacks for `noUncheckedIndexedAccess`-style indexing with no real
-    // runtime path; using `!` documents that instead of instrumenting an
-    // unreachable branch (same convention as `ToolCard.tsx`'s `baseName`
-    // comment).
     while (i < lines.length) {
-        const line = lines[i];
-        if (line.trim() === '') {
-            i += 1;
-            continue;
-        }
-        if (/^```/.test(line)) {
-            const lang = line.slice(3).trim() || null;
-            const body = [];
-            i += 1;
-            while (i < lines.length && !/^```/.test(lines[i])) {
-                body.push(lines[i]);
-                i += 1;
-            }
-            i += 1; // skip closing fence (or end of input if unterminated)
-            blocks.push({ kind: 'code', lang, body: body.join('\n') });
-            continue;
-        }
-        const heading = /^(#{1,3})\s+(.*)$/.exec(line);
-        if (heading) {
-            // Both capture groups are mandatory (non-optional) in this pattern, so
-            // whenever `heading` itself is truthy, `heading[1]`/`heading[2]` are
-            // always matched strings (never `undefined`) — same dead-fallback
-            // reasoning as the `lines[i]` accesses above.
-            blocks.push({ kind: 'h', level: heading[1].length, text: heading[2] });
+        if (lines[i].trim() === '') {
             i += 1;
             continue;
         }
-        if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
-            blocks.push({ kind: 'hr' });
-            i += 1;
-            continue;
-        }
-        if (/^>\s?/.test(line)) {
-            const quoted = [];
-            while (i < lines.length && /^>\s?/.test(lines[i])) {
-                quoted.push(lines[i].replace(/^>\s?/, ''));
-                i += 1;
-            }
-            blocks.push({ kind: 'bq', text: quoted.join('\n') });
-            continue;
-        }
-        if (/^\s*[-*]\s+/.test(line)) {
-            const items = [];
-            while (i < lines.length && /^\s*[-*]\s+/.test(lines[i])) {
-                items.push(lines[i].replace(/^\s*[-*]\s+/, ''));
-                i += 1;
-            }
-            blocks.push({ kind: 'ul', items });
-            continue;
-        }
-        if (isTableStartAt(lines, i)) {
-            const aligns = parseTableAlignRow(lines[i + 1]);
-            const headers = splitTableCells(line);
-            const { rows, next } = collectTableRows(lines, i + 2);
-            blocks.push({ kind: 'table', aligns, headers, rows });
-            i = next;
-            continue;
-        }
-        if (ORDERED_ITEM.test(line)) {
-            const start = Number(/\d+/.exec(line)[0]);
-            const items = [];
-            while (i < lines.length && ORDERED_ITEM.test(lines[i])) {
-                items.push(lines[i].replace(ORDERED_ITEM, ''));
-                i = nextLooseListLine(lines, i + 1);
-            }
-            blocks.push({ kind: 'ol', start, items });
-            continue;
-        }
-        const paragraph = [];
-        while (i < lines.length && lines[i].trim() !== '' && !isBlockStart(lines, i)) {
-            paragraph.push(lines[i]);
-            i += 1;
-        }
-        blocks.push({ kind: 'p', text: paragraph.join('\n') });
+        const { block, next } = parseBlockAt(lines, i);
+        blocks.push(block);
+        i = next;
     }
     return blocks;
 }
@@ -238,11 +249,11 @@ function nextLooseListLine(lines, i) {
 }
 function isBlockStart(lines, i) {
     const line = lines[i];
-    return (/^```/.test(line)
+    return (FENCE.test(line)
         || /^(#{1,3})\s+/.test(line)
-        || /^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)
-        || /^>\s?/.test(line)
-        || /^\s*[-*]\s+/.test(line)
+        || RULE.test(line)
+        || QUOTE_LINE.test(line)
+        || BULLET_ITEM.test(line)
         || ORDERED_ITEM.test(line)
         || isTableStartAt(lines, i));
 }
@@ -310,8 +321,9 @@ function useTableOverflow() {
     const wrapRef = useRef(null);
     const [isOverflowing, setIsOverflowing] = useState(false);
     useEffect(() => {
+        // The wrap div renders unconditionally, so its ref is attached by the time this effect runs.
         const el = wrapRef.current;
-        if (!el || typeof ResizeObserver !== 'function')
+        if (typeof ResizeObserver !== 'function')
             return;
         const check = () => setIsOverflowing(el.scrollWidth > el.clientWidth + TABLE_OVERFLOW_SLACK_PX);
         const observer = new ResizeObserver(check);
@@ -354,9 +366,8 @@ function TableBlock(props) {
     const [expanded, setExpanded] = useState(false);
     const dialogRef = useRef(null);
     useEffect(() => {
+        // The `<dialog>` renders unconditionally, so its ref is attached by the time this effect runs.
         const dialog = dialogRef.current;
-        if (!dialog)
-            return;
         if (expanded)
             openTableDialog(dialog);
         else

package/dist/react/components/McpUiSurfaceCard.d.ts

@@ -22,7 +22,7 @@ export interface McpUiSurfaceCardProps extends ExtEventRenderProps {
      * scrolling for content taller than its `preferredFrameSize` guess. A host embedding this card in
      * a fixed-width sidebar should pass a cap sized to its own viewport.
      */
-    maxHeight?: number;
+    maxHeight?: number | undefined;
     /**
      * Time source for a card's answer deadline (`MCP_UI_EXPIRES_AT_META_KEY`). Omit for the wall clock;
      * a test injects a fake one to step through the countdown.
@@ -30,7 +30,7 @@ export interface McpUiSurfaceCardProps extends ExtEventRenderProps {
     expiryClock?: SurfaceExpiryClock;
 }
 /** Registered against `ext-event-renderer-registry.ts`'s `'mcp-ui'` name — see module doc. */
-export declare function McpUiSurfaceCard({ events, sandboxProxyUrl, onToolCall, onOpenLink, maxHeight, call, runStreaming, expiryClock, answered, onAnswered }: McpUiSurfaceCardProps): import("react").JSX.Element;
+export declare function McpUiSurfaceCard({ events, sandboxProxyUrl, onToolCall, onOpenLink, maxHeight, call, runStreaming, expiryClock, answered, onAnswered, onAnswerText, answerText, answerRecorded }: McpUiSurfaceCardProps): import("react").JSX.Element;
 /**
  * The ext-event slot key for MCP-UI: one slot per `ui://` URI. Each resource is its own card, so a
  * run's second card renders where it arrived instead of inside the first card's slot, while a

package/dist/react/components/McpUiSurfaceCard.js

@@ -61,6 +61,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * `visible` field in per-element STATE when a caller opts into it — see the regression tests added
  * against the real driver in `@jini-ai/agentic`.
  */
+import { questionAnswerFromResult } from '../../core/question-answer.js';
+import { MidRunUserMessage } from './MidRunUserMessage.js';
 import { Fragment, useMemo } from 'react';
 import { McpUiHost, parseUIResource, readActionPlan, readExpiresAt, readPreferredFrameSize, } from '@jini-ai/ui/mcp-ui';
 import { defaultExtEventRendererRegistry } from '../ext-event-renderer-registry.js';
@@ -93,8 +95,10 @@ function latestResourcesByUri(events) {
  * has teeth for a producer whose id scheme this package has never seen.
  */
 function pendingMirrorHandle(uri) {
+    // Never empty: only resources whose URI starts with `ui://` reach a card (`@jini-ai/ui/mcp-ui`'s
+    // resource parser rejects every other scheme), so the sanitized handle always keeps at least `ui`.
     const sanitized = uri.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
-    return `mcp-ui-pending-${sanitized === '' ? 'surface' : sanitized}`;
+    return `mcp-ui-pending-${sanitized}`;
 }
 /** The one label a mirror region carries — what is pending, and what an agent could report or wait on. */
 function pendingMirrorLabel(t, plan) {
@@ -119,23 +123,40 @@ function ClosedSurface({ call, label }) {
     const title = call?.input?.title;
     return (_jsx("div", { className: "mcpui-surface-card mcpui-surface-card-closed", role: "status", children: typeof title === 'string' && title.trim() !== '' ? `${title}: ${label}` : label }));
 }
+/** The live card's answer lifecycle: its deadline and delivery notification, using their existing owners. */
+function surfaceInteraction({ resource, answered, onToolCall, onAnswered, onAnswerText, call }, _options = {}) {
+    // An answered card has no deadline left: its countdown goes, and the deadline passing while the
+    // answer's work still runs must not relabel it "This question expired".
+    const expiresAtMs = resource === undefined || answered === true ? undefined : readExpiresAt(resource);
+    // Reports the person's delivered answer to the row, which stops the "Waiting for your answer" line.
+    const toolCall = onToolCall === undefined || onAnswered === undefined ? onToolCall : reportDeliveredAnswer({ onToolCall, onAnswered, onAnswerText, input: call?.input });
+    return { expiresAtMs, toolCall };
+}
 /** Registered against `ext-event-renderer-registry.ts`'s `'mcp-ui'` name — see module doc. */
-export function McpUiSurfaceCard({ events, sandboxProxyUrl, onToolCall, onOpenLink, maxHeight, call, runStreaming, expiryClock, answered, onAnswered }) {
+export function McpUiSurfaceCard({ events, sandboxProxyUrl, onToolCall, onOpenLink, maxHeight, call, runStreaming, expiryClock, answered, onAnswered, onAnswerText, answerText, answerRecorded }) {
     const t = useT();
     const resources = useMemo(() => latestResourcesByUri(events), [events]);
     // One card per slot is the registered shape (`mcpUiSurfaceSlotKey`), so `call` belongs to exactly
     // that card. A group holding several URIs has no single call to judge them by, and stays live.
     const single = resources.length === 1 ? resources[0] : undefined;
-    // An answered card has no deadline left: its countdown goes, and the deadline passing while the
-    // answer's work still runs must not relabel it "This question expired".
-    const expiry = useSurfaceExpiry({ expiresAtMs: single === undefined || answered === true ? undefined : readExpiresAt(single) }, expiryClock === undefined ? {} : { clock: expiryClock });
+    const { expiresAtMs, toolCall } = surfaceInteraction({ resource: single, answered, onToolCall, onAnswered, onAnswerText, call });
+    const expiry = useSurfaceExpiry({ expiresAtMs }, expiryClock === undefined ? {} : { clock: expiryClock });
     const closed = single === undefined
         ? undefined
         : closedSurfaceLabel({ t, call, runStreaming, documentsForUri: events.length, expired: expiry?.expired === true });
+    const answer = answerText ?? questionAnswerFromResult({ result: call?.result, input: call?.input });
+    return _jsx(SurfaceCardContent, { resources: resources, single: single, answerRecorded: answerRecorded, answer: answer, closed: closed, call: call, t: t, sandboxProxyUrl: sandboxProxyUrl, toolCall: toolCall, onOpenLink: onOpenLink, maxHeight: maxHeight, expiry: expiry });
+}
+/** Rendering priority stays receipt, answer, closure, then the live documents. */
+function SurfaceCardContent({ resources, single, answerRecorded, answer, closed, call, t, sandboxProxyUrl, toolCall, onOpenLink, maxHeight, expiry }) {
+    // MOVE: The accepted-input receipt owns its bubble; rendering the closed card too duplicates typed answers.
+    if (single !== undefined && answerRecorded)
+        return null;
+    if (single !== undefined && answer !== undefined) {
+        return _jsx(MidRunUserMessage, { events: [{ text: answer === 'Declined' ? t('Declined') : answer }] });
+    }
     if (closed !== undefined)
         return _jsx(ClosedSurface, { call: call, label: closed });
-    // Reports the person's delivered answer to the row, which stops the "Waiting for your answer" line.
-    const toolCall = onToolCall === undefined || onAnswered === undefined ? onToolCall : reportDeliveredAnswer({ onToolCall, onAnswered });
     if (resources.length === 0) {
         // Visible rather than silent: an `ext` event named `mcp-ui` that carries no parseable resource
         // is a producer bug, and a transcript that renders nothing for it hides the bug behind what
@@ -154,7 +175,7 @@ export function McpUiSurfaceCard({ events, sandboxProxyUrl, onToolCall, onOpenLi
                             // the previous iframe session, so the handshake never re-ran and the frame kept serving
                             // the OLD document's state. The URI stays in the key because it is real identity; the
                             // length was never a substitute for content.
-                            sessionKey: `${resource.resource.uri}:${resource.resource.text}`, ...(toolCall === undefined ? {} : { onToolCall: toolCall }), ...(onOpenLink === undefined ? {} : { onOpenLink }), ...(height === undefined || Number.isNaN(height) ? {} : { initialHeight: height }), ...(maxHeight === undefined ? {} : { maxHeight }) }), plan !== undefined && _jsx(PendingSurfaceMirror, { uri: resource.resource.uri, plan: plan, t: t })] }, resource.resource.uri));
+                            sessionKey: `${resource.resource.uri}:${resource.resource.text}`, ...(toolCall === undefined ? {} : { onToolCall: toolCall }), ...(onOpenLink === undefined ? {} : { onOpenLink }), ...(height === undefined || Number.isNaN(height) ? {} : { initialHeight: height }), maxHeight: maxHeight }), plan !== undefined && _jsx(PendingSurfaceMirror, { uri: resource.resource.uri, plan: plan, t: t })] }, resource.resource.uri));
             }), expiry?.expired === false && (_jsx("p", { className: "mcpui-surface-expiry", role: "timer", children: t('Expires in {time}', { time: expiry.remaining }) }))] }));
 }
 /**
@@ -185,6 +206,6 @@ export function mcpUiSurfaceSlotKey({ data }) {
  * @returns An unregister handle, so a test or a hot reload can dispose cleanly.
  */
 export function registerMcpUiSurfaceRenderer(options) {
-    return (options.registry ?? defaultExtEventRendererRegistry).register({ name: options.name ?? MCP_UI_EXT_EVENT_NAME, renderer: (props) => (_jsx(McpUiSurfaceCard, { ...props, sandboxProxyUrl: options.sandboxProxyUrl, ...(options.onToolCall === undefined ? {} : { onToolCall: options.onToolCall }), ...(options.onOpenLink === undefined ? {} : { onOpenLink: options.onOpenLink }), ...(options.maxHeight === undefined ? {} : { maxHeight: options.maxHeight }) })) }, { slotKey: mcpUiSurfaceSlotKey });
+    return (options.registry ?? defaultExtEventRendererRegistry).register({ name: options.name ?? MCP_UI_EXT_EVENT_NAME, renderer: (props) => (_jsx(McpUiSurfaceCard, { ...props, sandboxProxyUrl: options.sandboxProxyUrl, ...(options.onToolCall === undefined ? {} : { onToolCall: options.onToolCall }), ...(options.onOpenLink === undefined ? {} : { onOpenLink: options.onOpenLink }), maxHeight: options.maxHeight })) }, { slotKey: mcpUiSurfaceSlotKey });
 }
 //# sourceMappingURL=McpUiSurfaceCard.js.map

package/dist/react/components/MessageList.d.ts

@@ -1,5 +1,11 @@
-import type { ChatMessage } from '../../core/index.js';
+import type { ChatAttachment, ChatMessage } from '../../core/index.js';
 import { type MessageRowProps } from './MessageRow.js';
+interface PendingPrompt {
+    id?: string;
+    text: string;
+    attachments?: ChatAttachment[];
+    onCancel: () => void;
+}
 export interface MessageListProps extends Pick<MessageRowProps, 'projectFileNames' | 'onRequestOpenFile' | 'renderAttachment' | 'showUsageTotal' | 'showUsageLine' | 'toolCallDisplay' | 'showThinking'> {
     messages: ChatMessage[];
     isStreaming?: boolean;
@@ -11,24 +17,18 @@ export interface MessageListProps extends Pick<MessageRowProps, 'projectFileName
     questionFormSubmittedAnswersByMessageId?: Record<string, Record<string, string | string[]>>;
     onQuestionFormSubmit?: (messageId: string, text: string, answers: Record<string, string | string[]>) => void;
     /**
-     * A composer-driven turn typed while a run is in flight, mirroring `useChatPane().queuedPrompt` —
-     * rendered as the newest transcript entry (like Claude Code/ChatGPT's own pending-turn UI)
-     * instead of a banner bolted above the composer. Deliberately NOT a `ChatMessage`: it has no
-     * persisted id (nothing here could mint one without risking collision with a real message once
-     * this prompt is actually sent) and is never written to `messages`/storage — purely a rendering
-     * of `useChatPane`'s own in-memory queue slot. `null`/omitted renders nothing, matching the old
-     * strip's "shown only once something is actually queued" behavior.
+     * MOVE: Pending inputs render as the newest transcript entries, never persisted ChatMessages.
+     * Their accepted ids identify cancellations; the singular prop remains a host compatibility seam.
      */
-    pendingPrompt?: {
-        text: string;
-        onCancel: () => void;
-    } | null;
+    pendingPrompt?: PendingPrompt | null;
+    pendingPrompts?: readonly PendingPrompt[];
 }
 /**
  * Memoized: the pane re-renders on every composer keystroke, and re-rendering a long transcript
  * (hundreds of tool rows, MCP-UI cards, markdown) per key made typing lag (owner report
- * 2026-10-08). Callers must pass stable props — `ChatPane` memoizes `pendingPrompt` and
+ * 2026-10-08). Callers must pass stable props — `ChatPane` memoizes `pendingPrompts` and
  * `projectFileNames` for exactly this.
  */
 export declare const MessageList: import("react").NamedExoticComponent<MessageListProps>;
+export {};
 //# sourceMappingURL=MessageList.d.ts.map

package/dist/react/components/MessageList.hooks.d.ts

@@ -9,6 +9,10 @@ import type { ChatMessage } from '../../core/index.js';
 export interface MessageListAutoScroll {
     containerRef: RefObject<HTMLDivElement | null>;
     onScroll: (event: UIEvent<HTMLElement>) => void;
+    /** True while the user has scrolled up away from the newest messages. */
+    awayFromLatest: boolean;
+    /** Scrolls to the newest message and resumes following new output. */
+    jumpToLatest: () => void;
 }
 /** Recompute costs once per immutable transcript snapshot, including saved history on reload. */
 export declare function useConversationUsage({ messages }: {
@@ -17,7 +21,8 @@ export declare function useConversationUsage({ messages }: {
 export declare function useMessageListAutoScroll({ messages, scrollIntent }: {
     messages: ChatMessage[];
     scrollIntent: boolean;
-}, { onScrolled }?: {
+}, { onScrolled, reducedMotion }?: {
     onScrolled?: () => void;
+    reducedMotion?: () => boolean;
 }): MessageListAutoScroll;
 //# sourceMappingURL=MessageList.hooks.d.ts.map

package/dist/react/components/MessageList.hooks.js

@@ -4,14 +4,15 @@
  * lives here (presentational), not in the headless `useConversation` hook, per that hook's own
  * "transport-agnostic hooks never touch DOM" contract.
  */
-import { useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { conversationUsage } from '../../core/turn-usage.js';
 import { nextStickToBottom, startsNewTurn } from './MessageList.rules.js';
+const prefersReducedMotion = () => typeof window !== 'undefined' && (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false);
 /** Recompute costs once per immutable transcript snapshot, including saved history on reload. */
 export function useConversationUsage({ messages }, _optional = {}) {
     return useMemo(() => conversationUsage({ messages }), [messages]);
 }
-export function useMessageListAutoScroll({ messages, scrollIntent }, { onScrolled } = {}) {
+export function useMessageListAutoScroll({ messages, scrollIntent }, { onScrolled, reducedMotion = prefersReducedMotion } = {}) {
     const containerRef = useRef(null);
     // Whether the transcript was scrolled to its bottom as of the last user scroll or programmatic
     // scroll-to-bottom — read by the ResizeObserver effect below, which only ever sees the DOM AFTER a
@@ -23,6 +24,9 @@ export function useMessageListAutoScroll({ messages, scrollIntent }, { onScrolle
     // Only scroll events write it (a browser fires one for programmatic scrolls too). Starts at
     // Infinity, "no position seen yet", so a first event away from the bottom unsticks as it always did.
     const lastScrollTopRef = useRef(Number.POSITIVE_INFINITY);
+    // State mirror of `!stickToBottomRef.current` for the "Jump to latest" button; the ref stays the
+    // source of truth for the scroll effects, which must not wait for a render.
+    const [awayFromLatest, setAwayFromLatest] = useState(false);
     // Runs BEFORE the scroll effect below (effects run in declaration order), so a send re-sticks in
     // time for that same commit's scroll. The user's own send (or retry) is an explicit "take me to
     // the latest turn": without this, a user who had scrolled up to read history and then sent stayed
@@ -31,6 +35,7 @@ export function useMessageListAutoScroll({ messages, scrollIntent }, { onScrolle
     useEffect(() => {
         if (startsNewTurn({ previous: previousMessagesRef.current, next: messages })) {
             stickToBottomRef.current = true;
+            setAwayFromLatest(false);
         }
         previousMessagesRef.current = messages;
     }, [messages]);
@@ -81,7 +86,18 @@ export function useMessageListAutoScroll({ messages, scrollIntent }, { onScrolle
         const el = event.currentTarget;
         stickToBottomRef.current = nextStickToBottom(el, { wasSticking: stickToBottomRef.current, previousScrollTop: lastScrollTopRef.current });
         lastScrollTopRef.current = el.scrollTop;
+        setAwayFromLatest(!stickToBottomRef.current);
     };
-    return { containerRef, onScroll };
+    const jumpToLatest = useCallback(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        // Re-stick first: a smooth scroll's own events move DOWN, which never unsticks, so output that
+        // streams in during the animation is followed too.
+        stickToBottomRef.current = true;
+        setAwayFromLatest(false);
+        el.scrollTo({ top: el.scrollHeight, behavior: reducedMotion() ? 'auto' : 'smooth' });
+    }, [reducedMotion]);
+    return { containerRef, onScroll, awayFromLatest, jumpToLatest };
 }
 //# sourceMappingURL=MessageList.hooks.js.map