@jini-ai/chat 0.6.12 → 0.6.15-rc.1

package/dist/core/run-activity.js

@@ -20,6 +20,8 @@
 import { a2uiSurfaceIdOf, displayOnlySurfaceIdOf } from '@jini-ai/agentic/a2ui';
 import { isDelegatedWrapperToolName } from './tool-events.js';
 import { MID_RUN_USER_MESSAGE_EVENT_NAME } from './turn-usage.js';
+import { SURFACE_QUESTION_META_KEY } from './question-answer.js';
+import { recordedSurfaceAnswers } from './accepted-input.js';
 /** Tool names whose only job is finding the right tool (MCP tool search / schema lookup). */
 const DISCOVERY_TOOL_NAMES = new Set([
     'ToolSearch',
@@ -68,6 +70,8 @@ function isVisible(event) {
 function isAnswerCard(scan, name, data) {
     if (!CARD_EXT_NAMES.has(name))
         return false;
+    if (name === 'mcp-ui' && scan.answeredSurfaces.has(data))
+        return false;
     if (scan.isAnsweredCard?.({ name, data }) === true)
         return false;
     if (name !== A2UI_EXT_NAME)
@@ -92,25 +96,48 @@ function scanEvent(scan, event, index) {
     // Queue acceptance/consumption is user input, not new agent activity. Neither restarts its clock.
     if (event.kind === 'ext' && event.name === MID_RUN_USER_MESSAGE_EVENT_NAME)
         return;
+    if (WORK_EVENT_KINDS.has(event.kind))
+        scan.lastWorkIndex = index;
     if (isVisible(event)) {
         scan.lastVisible = { index, kind: event.kind };
         scan.visibleCount += 1;
     }
+    // Starting tool work after an explicit question proves the run moved past it (expired, skipped or aborted
+    // without a receipt); otherwise its waiting line would outlive the question for the whole run.
     if (event.kind === 'tool_use') {
+        scan.pendingQuestionIndex = -1;
         scan.open = scan.open.filter((tool) => tool.id !== event.id);
         scan.open.push({ id: event.id, name: event.name, input: event.input, index });
     }
     else if (event.kind === 'tool_result') {
+        // Completion may be unrelated background work or the ask tool returning before human input.
         scan.open = scan.open.filter((tool) => tool.id !== event.toolUseId);
     }
     else if (event.kind === 'ext') {
-        if (isAnswerCard(scan, event.name, event.data))
-            scan.lastCardIndex = index;
+        scanCard({ scan, event, index });
     }
     else if (event.kind === 'status') {
         scanStatus({ scan, event, index });
     }
 }
+/** Work after a standalone form proves the run has moved past that form. */
+const WORK_EVENT_KINDS = new Set(['text', 'tool_use', 'tool_result']);
+/** Standalone approval forms have no open tool call. Require interactive markup so outcome
+ * documents do not acquire a waiting status. Inspect text only; this never executes a document. */
+function scanCard({ scan, event, index }, _options = {}) {
+    if (!isAnswerCard(scan, event.name, event.data))
+        return;
+    scan.lastCardIndex = index;
+    const resource = isRecord(event.data) ? event.data.resource : undefined;
+    const html = isRecord(resource) ? resource.text : undefined;
+    const meta = isRecord(resource) ? resource._meta : undefined;
+    // A producer can retain its question before flattening it into a document (including custom forms).
+    const question = isRecord(meta) ? meta[SURFACE_QUESTION_META_KEY] : undefined;
+    if (isRecord(question))
+        scan.pendingQuestionIndex = index;
+    if (typeof html === 'string' && /<form\b|data-mcpui-action\s*=/i.test(html))
+        scan.standaloneCardIndex = index;
+}
 /** `{ a: 1, b: undefined }` → `{ a: 1 }`, so optional activity fields are absent rather than undefined. */
 function definedFields({ fields }, _optional = {}) {
     return Object.fromEntries(Object.entries(fields).filter(([, value]) => value !== undefined));
@@ -146,6 +173,11 @@ function openToolSignal({ scan, newestOpen }, _optional = {}) {
     };
 }
 function latestSignal({ scan }, _optional = {}) {
+    // Explicit standalone questions wait for their receipt; unrelated startup/model activity cannot
+    // establish that a person answered. Markup-only legacy cards retain their existing work heuristic.
+    if (scan.pendingQuestionIndex >= 0) {
+        return { activity: { kind: 'awaiting-answer' }, key: `card:${scan.pendingQuestionIndex}` };
+    }
     const lastVisibleIndex = scan.lastVisible?.index ?? -1;
     if (scan.retry && scan.retry.index > lastVisibleIndex) {
         return { activity: retryingActivity({ data: scan.retry.data }), key: `retry:${lastVisibleIndex}` };
@@ -153,6 +185,14 @@ function latestSignal({ scan }, _optional = {}) {
     const newestOpen = scan.open[scan.open.length - 1];
     if (newestOpen)
         return openToolSignal({ scan, newestOpen });
+    return idleSignal({ scan });
+}
+/** The no-open-tool fallback; legacy markup alone stops waiting when work follows it. O(1). */
+function idleSignal({ scan }, _options = {}) {
+    const lastVisibleIndex = scan.lastVisible?.index ?? -1;
+    if (scan.standaloneCardIndex > scan.lastWorkIndex) {
+        return { activity: { kind: 'awaiting-answer' }, key: `card:${scan.standaloneCardIndex}` };
+    }
     if (scan.lastVisible?.kind === 'text') {
         return { activity: { kind: 'writing' }, key: `writing:${lastVisibleIndex}` };
     }
@@ -166,10 +206,12 @@ function latestSignal({ scan }, _optional = {}) {
  * card); the newest open tool call; else
  * writing (last visible event is text) or thinking.
  *
- * @complexity O(n) in events, O(open tool calls) extra space.
+ * @complexity O(n) time in events, O(open tool calls + answered surfaces) extra space.
  */
 export function deriveRunActivity({ events }, { isAnsweredCard } = {}) {
-    const scan = { open: [], lastVisible: null, lastCardIndex: -1, retry: null, progress: null, visibleCount: 0, displayOnlySurfaces: new Set(), isAnsweredCard };
+    // A replayed standalone receipt closes only the document it followed, not every use of its URI.
+    const answeredSurfaces = recordedSurfaceAnswers({ events: events ?? [] });
+    const scan = { open: [], lastVisible: null, lastCardIndex: -1, standaloneCardIndex: -1, pendingQuestionIndex: -1, lastWorkIndex: -1, retry: null, progress: null, visibleCount: 0, displayOnlySurfaces: new Set(), isAnsweredCard, answeredSurfaces };
     (events ?? []).forEach((event, index) => scanEvent(scan, event, index));
     return { ...latestSignal({ scan }), visibleCount: scan.visibleCount };
 }

package/dist/core/run-events/entry.js

@@ -107,6 +107,8 @@ function toolResultEvent(payload) {
         // is a rendering concern (`ToolCard`'s own `ToolResultMedia` already ignores anything that
         // isn't a recognized block), not a transport one.
         ...(Array.isArray(payload.media) ? { media: payload.media } : {}),
+        // Saved into events_json so a recovered run still blocks a repeat of this call.
+        ...(payload.outcome === "unknown" ? { outcome: "unknown" } : {}),
     };
 }
 /** The payload types with no chat-core event of their own: UI envelopes, dropped types, and `ext`. */
@@ -559,8 +561,9 @@ function agentFrameEvents(raw) {
 // host's start refusals reach the user.
 function errorFrameOutcome(raw) {
     const frame = parseWire(raw);
-    const message = wireString(frame?.payload?.message) || "agent run failed";
-    return { events: [{ kind: "status", label: message }], error: new Error(message) };
+    const payload = frame?.payload;
+    const message = wireString(payload?.message) || "agent run failed";
+    return { events: [{ kind: "status", label: message, ...(typeof payload?.error?.code === "string" ? { code: payload.error.code } : {}) }], error: new Error(message) };
 }
 function isRecord(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);

package/dist/embed-widget/vanilla/style.css

@@ -1,4 +1,4 @@
-.jini-chat-bubble{position:fixed;right:var(--jini-embed-right,24px);bottom:24px;width:56px;height:56px;border:0;border-radius:50%;background:var(--jini-chat-accent,var(--color-primary,#2563eb));color:var(--jini-chat-accent-text,#fff);box-shadow:0 4px 16px #0003;cursor:pointer;z-index:var(--jini-embed-z-index,1000);display:grid;place-items:center}
+.jini-chat-vanilla{display:var(--jini-floating-ui-display,block)}.jini-chat-bubble{position:fixed;right:var(--jini-embed-right,24px);bottom:24px;width:56px;height:56px;border:0;border-radius:50%;background:var(--jini-chat-accent,var(--color-primary,#2563eb));color:var(--jini-chat-accent-text,#fff);box-shadow:0 4px 16px #0003;cursor:pointer;z-index:var(--jini-embed-z-index,1000);display:var(--jini-floating-ui-display,grid);place-items:center}
 .jini-chat-bubble[hidden]{display:none!important}
 .jini-chat-bubble svg{width:24px;height:24px}
 .jini-chat-bubble:focus-visible{outline:3px solid var(--jini-chat-accent,#2563eb);outline-offset:3px}

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

@@ -0,0 +1,18 @@
+interface CopyMessageButtonProps {
+    /** The raw markdown source to place on the clipboard — never rendered/flattened text. */
+    text: string;
+    /** Accessible name while idle; swaps to a "Copied" label once the copy lands. */
+    label: string;
+}
+/**
+ * Quiet, icon-only copy affordance shared by the user- and assistant-message
+ * action rows. Delegates the actual clipboard write (and its
+ * secure-context fallback) to `useCopyToClipboard`; this component only owns
+ * the icon swap and the accessible announcement of the transient state.
+ * @param props.text - Exact string to copy, verbatim.
+ * @param props.label - Idle accessible name (already translated by the caller).
+ * @complexity O(1) — one child hook call, no branching beyond the copied-state read.
+ */
+export declare function CopyMessageButton({ text, label }: CopyMessageButtonProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CopyMessageButton.d.ts.map

package/dist/react/components/CopyMessageButton.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Shared message-copy affordance for ordinary messages and mid-run user receipts. */
+import { useT } from '../hooks/context.js';
+import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js';
+import { Icon } from './Icon.js';
+/**
+ * Quiet, icon-only copy affordance shared by the user- and assistant-message
+ * action rows. Delegates the actual clipboard write (and its
+ * secure-context fallback) to `useCopyToClipboard`; this component only owns
+ * the icon swap and the accessible announcement of the transient state.
+ * @param props.text - Exact string to copy, verbatim.
+ * @param props.label - Idle accessible name (already translated by the caller).
+ * @complexity O(1) — one child hook call, no branching beyond the copied-state read.
+ */
+export function CopyMessageButton({ text, label }) {
+    const t = useT();
+    const { copied, copy } = useCopyToClipboard();
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "jini-message-action-btn", "aria-label": copied ? t('Copied') : label, onClick: () => {
+                    void copy(text);
+                }, children: _jsx(Icon, { name: copied ? 'check' : 'copy' }) }), _jsx("span", { className: "jini-message-copy-status", "aria-live": "polite", children: copied ? t('Copied to clipboard') : '' })] }));
+}
+//# sourceMappingURL=CopyMessageButton.js.map

package/dist/react/components/Markdown.js

@@ -149,7 +149,7 @@ 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.
+// marker stripped — the shape of blockquotes.
 function collectMarked(lines, start, marker) {
     const items = [];
     let i = start;
@@ -165,11 +165,29 @@ function parseQuote(lines, i) {
     const { items, next } = collectMarked(lines, i, QUOTE_LINE);
     return { block: { kind: 'bq', text: items.join('\n') }, next };
 }
+// A list item runs on over the following lines until a blank line or another block starts
+// (CommonMark's lazy continuation). Without it, a wrapped item such as "- **Grafana Cloud (instance
+// ID +\n  token)**" split into an item and a paragraph, and both halves showed raw `**`.
+function collectItem(lines, i, marker) {
+    let item = lines[i].replace(marker, '');
+    let j = i + 1;
+    while (j < lines.length && lines[j].trim() !== '' && !isBlockStart(lines, j)) {
+        item += `\n${lines[j].trim()}`;
+        j += 1;
+    }
+    return { item, next: j };
+}
 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 };
+    const items = [];
+    let j = i;
+    while (j < lines.length && BULLET_ITEM.test(lines[j])) {
+        const { item, next } = collectItem(lines, j, BULLET_ITEM);
+        items.push(item);
+        j = next;
+    }
+    return { block: { kind: 'ul', items }, next: j };
 }
 function parseTable(lines, i) {
     if (!isTableStartAt(lines, i))
@@ -187,8 +205,9 @@ function parseOrderedList(lines, i) {
     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);
+        const { item, next } = collectItem(lines, j, ORDERED_ITEM);
+        items.push(item);
+        j = nextLooseListLine(lines, next);
     }
     return { block: { kind: 'ol', start, items }, next: j };
 }

package/dist/react/components/McpUiSurfaceCard.js

@@ -61,7 +61,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * `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 { questionAnswerFromResult, questionAnswerLabel } 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';
@@ -69,6 +69,7 @@ import { defaultExtEventRendererRegistry } from '../ext-event-renderer-registry.
 import { useT } from '../hooks/context.js';
 import { useSurfaceExpiry } from '../hooks/useSurfaceExpiry.js';
 import { closedSurfaceLabel, reportDeliveredAnswer } from './mcp-ui-surface-state.js';
+import { surfaceQuestionInput } from './mcp-ui-question-input.js';
 /** The `kind: 'ext'` event name this renderer claims. */
 export const MCP_UI_EXT_EVENT_NAME = 'mcp-ui';
 /** Collapses the event stream to the newest resource per `ui://` URI, in first-appearance order. */
@@ -118,12 +119,20 @@ function pendingMirrorLabel(t, plan) {
 function PendingSurfaceMirror({ uri, plan, t }) {
     return (_jsx("div", { "aria-hidden": "true", style: { display: 'none' }, "data-agent-element": pendingMirrorHandle(uri), "data-agent-role": "status", "data-agent-label": pendingMirrorLabel(t, plan) }));
 }
+/** Keep one title/answer format for the collapsed card and standalone form's user bubble. */
+function surfaceAnswerLabel({ call, label }, _options = {}) {
+    return questionAnswerLabel({ input: call?.input, text: label });
+}
+/** Prefer the question as the frame title; untitled resources retain their URI fallback.
+ * @complexity O(h + c) for fallback markup and controls; metadata needs O(1), no effects.
+ */
+function surfaceQuestionTitle({ resource }, _options = {}) {
+    const input = surfaceQuestionInput({ resource, input: undefined });
+    return typeof input?.title === 'string' ? input.title : resource.resource.uri;
+}
 /** A closed card: the question's title, when the call gave one, and why it is closed. */
 function ClosedSurface({ call, label }) {
-    const input = call?.input;
-    const title = [input?.title, input?.question, input?.prompt]
-        .find(value => typeof value === 'string' && value.trim() !== '');
-    return (_jsx("div", { className: "mcpui-surface-card mcpui-surface-card-closed", role: "status", children: typeof title === 'string' ? `${title}: ${label}` : label }));
+    return (_jsx("div", { className: "mcpui-surface-card mcpui-surface-card-closed", role: "status", children: surfaceAnswerLabel({ call, 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 = {}) {
@@ -141,23 +150,47 @@ export function McpUiSurfaceCard({ events, sandboxProxyUrl, onToolCall, onOpenLi
     // 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;
-    const { expiresAtMs, toolCall } = surfaceInteraction({ resource: single, answered, onToolCall, onAnswered, onAnswerText, call });
+    const { displayCall, input, standalone } = useSurfaceQuestionCall({ events, call });
+    const { expiresAtMs, toolCall } = surfaceInteraction({ resource: single, answered, onToolCall, onAnswered, onAnswerText, call: displayCall });
     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 = questionAnswerFromResult({ result: call?.result, input: call?.input }) ?? answerText;
-    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 });
+    // A completed call answered the original document; a replacement outcome or retry owns its view.
+    const answer = (events.length === 1 ? questionAnswerFromResult({ result: call?.result, input }) : undefined) ?? answerText;
+    return _jsx(SurfaceCardContent, { resources: resources, single: single, answerRecorded: answerRecorded, answer: answer, closed: closed, call: displayCall, standalone: standalone, 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 }) {
+/** A standalone form's call may lack the question; its current document supplies the title and
+ * option labels, so retry answers read as labels rather than raw values from the replaced question.
+ * Receipt recovery retains the original document separately in useSurfaceAnswerContexts. */
+function useSurfaceQuestionCall({ events, call }, _options = {}) {
+    const resource = parseUIResource(events.at(-1));
+    const input = useMemo(() => surfaceQuestionInput({ resource, input: call?.input }), [resource?.resource.text, resource?.resource._meta, call?.input]);
+    const displayCall = call === undefined ? { name: '', input } : { ...call, input };
+    return { displayCall, input, standalone: input !== call?.input };
+}
+/** A recorded receipt closes the card even while its readable answer is still arriving. */
+function recordedAnswerLabel({ answer, closed, t }, _options = {}) {
+    return answer ?? closed ?? t('Answered');
+}
+/** A single answered card: closed with its label, plus the optimistic bubble until a receipt owns it.
+ * @complexity O(1), no effects.
+ */
+function answeredSurface({ answerRecorded, answer, closed, call, standalone, t }, _options = {}) {
     // MOVE: The accepted-input receipt owns its bubble; the closed card retains the question's context.
-    if (single !== undefined && answerRecorded)
-        return _jsx(ClosedSurface, { call: call, label: answer ?? closed ?? t('Answered') });
-    if (single !== undefined && answer !== undefined) {
-        const label = answer === 'Declined' ? t('Declined') : answer;
-        return _jsxs(_Fragment, { children: [_jsx(ClosedSurface, { call: call, label: label }), _jsx(MidRunUserMessage, { events: [{ text: label }] })] });
-    }
+    if (answerRecorded)
+        return _jsx(ClosedSurface, { call: call, label: recordedAnswerLabel({ answer, closed, t }) });
+    if (answer === undefined)
+        return undefined;
+    const label = answer === 'Declined' ? t('Declined') : answer;
+    return _jsxs(_Fragment, { children: [_jsx(ClosedSurface, { call: call, label: label }), _jsx(MidRunUserMessage, { events: [{ text: standalone ? surfaceAnswerLabel({ call, label }) : label }] })] });
+}
+/** Rendering priority stays receipt, answer, closure, then the live documents. */
+function SurfaceCardContent({ resources, single, answerRecorded, answer, closed, call, standalone, t, sandboxProxyUrl, toolCall, onOpenLink, maxHeight, expiry }) {
+    const frameTitle = useMemo(() => single === undefined ? undefined : surfaceQuestionTitle({ resource: single }), [single?.resource.uri, single?.resource.text, single?.resource._meta]);
+    const answered = single === undefined ? undefined : answeredSurface({ answerRecorded, answer, closed, call, standalone, t });
+    if (answered !== undefined)
+        return answered;
     if (closed !== undefined)
         return _jsx(ClosedSurface, { call: call, label: closed });
     if (resources.length === 0) {
@@ -170,7 +203,7 @@ function SurfaceCardContent({ resources, single, answerRecorded, answer, closed,
                 const preferred = readPreferredFrameSize(resource);
                 const height = preferred === undefined ? undefined : Number.parseInt(preferred[1], 10);
                 const plan = readActionPlan(resource);
-                return (_jsxs(Fragment, { children: [_jsx(McpUiHost, { title: resource.resource.uri, html: resource.resource.text, sandboxProxyUrl: sandboxProxyUrl, toolName: resource.resource.uri, 
+                return (_jsxs(Fragment, { children: [_jsx(McpUiHost, { title: frameTitle ?? surfaceQuestionTitle({ resource }), html: resource.resource.text, sandboxProxyUrl: sandboxProxyUrl, toolName: resource.resource.uri, 
                             // The whole document, not its LENGTH. `useMcpUiHost` already defaults `sessionKey` to
                             // `html` — exact by construction — and this override replaced that with a digest so
                             // coarse that any two documents of equal size under one URI collided: a genuine update

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

@@ -5,6 +5,7 @@
  * "transport-agnostic hooks never touch DOM" contract.
  */
 import { type RefObject, type UIEvent } from 'react';
+import { type ChatUsageSummary } from '../../core/turn-usage.js';
 import type { ChatMessage } from '../../core/index.js';
 export interface MessageListAutoScroll {
     containerRef: RefObject<HTMLDivElement | null>;
@@ -17,7 +18,7 @@ export interface MessageListAutoScroll {
 /** Recompute costs once per immutable transcript snapshot, including saved history on reload. */
 export declare function useConversationUsage({ messages }: {
     messages: readonly ChatMessage[];
-}, _optional?: {}): Map<string, import("../../core/turn-usage.js").ChatUsageSummary>;
+}, _optional?: {}): Map<string, ChatUsageSummary>;
 export declare function useMessageListAutoScroll({ messages, scrollIntent }: {
     messages: ChatMessage[];
     scrollIntent: boolean;

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

@@ -11,10 +11,20 @@ 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 = {}) {
-    // Usage and rendering must see the same answer boundaries, including receipts rebuilt on reload.
-    return useMemo(() => conversationUsage({ messages: messages.map(message => message.events === undefined ? message : {
-            ...message, events: projectAcceptedInputEvents({ events: message.events }),
-        }) }), [messages]);
+    const previous = useRef(new Map());
+    return useMemo(() => {
+        // Usage and rendering must see the same answer boundaries, including receipts rebuilt on reload.
+        const next = conversationUsage({ messages: messages.map(message => message.events === undefined ? message : {
+                ...message, events: projectAcceptedInputEvents({ events: message.events }),
+            }) });
+        // Keep an unchanged summary's identity so memoized rows skip re-rendering while a run streams.
+        for (const [id, summary] of next) {
+            const old = previous.current.get(id);
+            if (old && JSON.stringify(old) === JSON.stringify(summary))
+                next.set(id, old);
+        }
+        return previous.current = next;
+    }, [messages]);
 }
 export function useMessageListAutoScroll({ messages, scrollIntent }, { onScrolled, reducedMotion = prefersReducedMotion } = {}) {
     const containerRef = useRef(null);

package/dist/react/components/MessageList.js

@@ -19,9 +19,9 @@ import { MessageRow } from './MessageRow.js';
 import { SentAttachmentButton } from './SentAttachment.js';
 import { AttachmentPreviewModal } from './AttachmentPreviewModal.js';
 import { useAttachmentGallery } from './AttachmentGallery.hooks.js';
-function renderMessageRow({ message, isLast, isStreaming, usageSummary }, { activeQuestionFormMessageId, questionFormSubmittedAnswersByMessageId, onQuestionFormSubmit, ...rowProps } = {}) {
+function renderMessageRow({ message, isLast, isStreaming, usageSummary, sending }, { activeQuestionFormMessageId, questionFormSubmittedAnswersByMessageId, onQuestionFormSubmit, ...rowProps } = {}) {
     const runStreaming = isLast && isStreaming && !isTerminalRunStatus({ status: message.runStatus });
-    return (_jsx(MessageRow, { message: message, ...rowProps, ...(usageSummary === undefined ? {} : { usageSummary }), runStreaming: runStreaming, runSucceeded: message.runStatus === 'succeeded', questionFormInteractive: message.id === activeQuestionFormMessageId, ...(questionFormSubmittedAnswersByMessageId?.[message.id] !== undefined ? { questionFormSubmittedAnswers: questionFormSubmittedAnswersByMessageId[message.id] } : {}), ...(onQuestionFormSubmit !== undefined ? { onQuestionFormSubmit: (text, answers) => onQuestionFormSubmit(message.id, text, answers) } : {}) }, message.id));
+    return (_jsx(MessageRow, { message: message, ...rowProps, ...(usageSummary === undefined ? {} : { usageSummary }), runStreaming: runStreaming, runSending: sending, runSucceeded: message.runStatus === 'succeeded', questionFormInteractive: message.id === activeQuestionFormMessageId, ...(questionFormSubmittedAnswersByMessageId?.[message.id] !== undefined ? { questionFormSubmittedAnswers: questionFormSubmittedAnswersByMessageId[message.id] } : {}), ...(onQuestionFormSubmit !== undefined ? { onQuestionFormSubmit: (text, answers) => onQuestionFormSubmit(message.id, text, answers) } : {}) }, message.id));
 }
 /**
  * Memoized: the pane re-renders on every composer keystroke, and re-rendering a long transcript
@@ -33,9 +33,11 @@ export const MessageList = memo(function MessageList({ messages: sourceMessages,
     const messages = useMemo(() => projectAcceptedInputMessages({ messages: sourceMessages }), [sourceMessages]);
     const usageByMessage = useConversationUsage({ messages });
     const { containerRef, onScroll, awayFromLatest, jumpToLatest } = useMessageListAutoScroll({ messages, scrollIntent }, onScrolled !== undefined ? { onScrolled } : {});
-    return (_jsxs("div", { className: "jini-message-list", ref: containerRef, onScroll: onScroll, "data-agent-element": "chat-transcript", "data-agent-role": "list", "data-agent-label": "The conversation transcript, oldest message first", children: [messages.map((message) => renderMessageRow({
+    return (_jsxs("div", { className: "jini-message-list", ref: containerRef, onScroll: onScroll, "data-agent-element": "chat-transcript", "data-agent-role": "list", "data-agent-label": "The conversation transcript, oldest message first", children: [messages.map((message, index) => renderMessageRow({
                 message,
                 isLast: message.id === messages[messages.length - 1]?.id,
+                // A reply's start is accepted together with its user turn (`inputPending` clears then).
+                sending: messages[index - 1]?.inputPending === true,
                 isStreaming,
                 usageSummary: usageByMessage.get(message.id),
             }, rowProps)), (pendingPrompts ?? (pendingPrompt ? [pendingPrompt] : [])).map((prompt, index) => (_jsx(QueuedMessage, { prompt: prompt, renderAttachment: rowProps.renderAttachment }, prompt.id ?? index))), awayFromLatest && _jsx(JumpToLatest, { onJump: jumpToLatest })] }));

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

@@ -32,7 +32,7 @@ import type { ChatUsageSummary } from '../../core/turn-usage.js';
  * see that module's header for the conditions.
  *
  * Both message roles also carry a per-message copy affordance
- * (`CopyMessageButton` below), rendered inside a `.jini-message-actions` row.
+ * (`CopyMessageButton`), rendered inside a `.jini-message-actions` row.
  * Assistant rows render that row as an extension seam: `branch`/thumbs-up/
  * thumbs-down are meant to join `copy` there later, as siblings in the same
  * row, once their backends (conversation branching, feedback storage) exist
@@ -71,6 +71,8 @@ export interface MessageRowProps {
     showThinking?: boolean;
     /** Whether this message's own run is still streaming. */
     runStreaming?: boolean;
+    /** Whether the server has yet to accept this reply's run (its user turn is still pending). */
+    runSending?: boolean;
     runSucceeded?: boolean;
     /** Whether this message's question-form (if any) is still the active/answerable one. */
     questionFormInteractive?: boolean;