@jini-ai/chat 0.5.0 → 0.5.2

package/dist/react/components/MessageList.js

@@ -1,80 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @module MessageList
- *
- * Renders a conversation's messages via `<MessageRow>`, and — matching
- * `useConversation`'s `scrollIntent` flag (see
- * `ADS-memory/reports/jini-port/recon/r4b-webui-design.md` §4: "message array, optimistic
- * user message, scroll-intent flag") — auto-scrolls to the newest content
- * whenever `scrollIntent` is true, calling `onScrolled` once it has. Pure
- * DOM scroll-anchoring via a ref lives here (a presentational component),
- * not in the headless `useConversation` hook, per that hook's own
- * "transport-agnostic hooks never touch DOM" contract.
- */
-import { useEffect, useRef } from 'react';
 import { isTerminalRunStatus } from '../../core/index.js';
 import { useT } from '../hooks/context.js';
+import { useMessageListAutoScroll } from './MessageList.hooks.js';
 import { MessageRow } from './MessageRow.js';
-/** Slack, in px, for treating "close enough to the bottom" as "at the bottom" — a fractional
- * scrollHeight/clientHeight rounding difference should not by itself stop the sticky-follow below. */
-const AT_BOTTOM_THRESHOLD_PX = 4;
-function isScrolledToBottom(el) {
-    return el.scrollHeight - el.scrollTop - el.clientHeight <= AT_BOTTOM_THRESHOLD_PX;
-}
 export function MessageList({ messages, isStreaming = false, scrollIntent = false, onScrolled, activeQuestionFormMessageId = null, questionFormSubmittedAnswersByMessageId, onQuestionFormSubmit, projectFileNames, onRequestOpenFile, renderAttachment, pendingPrompt = null, }) {
     const t = useT();
-    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
-    // resize already happened and so cannot recompute "was this at the bottom" from current values.
-    // Starts true: a freshly mounted pane opens on the latest turn, same as scrollIntent's own default.
-    const stickToBottomRef = useRef(true);
-    useEffect(() => {
-        if (!scrollIntent)
-            return;
-        const el = containerRef.current;
-        // Gated on `stickToBottomRef`, same as the ResizeObserver effect below: `scrollIntent` turns
-        // true on EVERY streamed event (tool-call chatter included, not just a finished reply — see
-        // `useConversation.applyRunToAssistantMessage`), so scrolling unconditionally here yanked a user
-        // who had deliberately scrolled up to read history back to the bottom on the very next chunk
-        // (owner-reported, 2026-08-30). `stickToBottomRef` already reflects the user's own last scroll
-        // gesture via the `onScroll` handler below, captured BEFORE this content change, so it is safe
-        // to trust here.
-        if (el && stickToBottomRef.current) {
-            el.scrollTop = el.scrollHeight;
-        }
-        onScrolled?.();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [scrollIntent, messages]);
-    // Re-sticks to the bottom when a message ROW grows after mount with no accompanying `messages`
-    // change — the exact case an embedded MCP-UI/A2UI surface hits: it mounts at an initial guessed
-    // height (`preferredFrameSize` or `DEFAULT_INITIAL_HEIGHT`), then reports its real, often much
-    // taller content height asynchronously via `ui/notifications/size-changed`, entirely inside that
-    // surface's own React state (`McpUiHost`). The effect above never re-runs for that, so without this
-    // a surface which grows after the one-shot scroll leaves its own action buttons — or, once it
-    // resolves, the assistant's next reply — below the stale "bottom" with nothing to bring them back
-    // into view. Observes each direct child (one per message row) rather than the scroll container
-    // itself: the container's own box is held fixed by its flex/overflow layout, so only its CONTENT
-    // grows, which `ResizeObserver` only reports for the element whose box is actually changing.
-    // Re-created per `messages` change so a newly mounted row is observed too. Gated on
-    // `stickToBottomRef` so a human who scrolled up to read history is never yanked back down by an
-    // unrelated row resizing elsewhere in the transcript.
-    useEffect(() => {
-        const el = containerRef.current;
-        if (!el || typeof ResizeObserver !== 'function')
-            return;
-        const observer = new ResizeObserver(() => {
-            if (!stickToBottomRef.current)
-                return;
-            el.scrollTop = el.scrollHeight;
-        });
-        for (const child of Array.from(el.children))
-            observer.observe(child);
-        return () => observer.disconnect();
-    }, [messages]);
-    return (_jsxs("div", { className: "jini-message-list", ref: containerRef, onScroll: (event) => {
-            stickToBottomRef.current = isScrolledToBottom(event.currentTarget);
-        }, "data-agent-element": "chat-transcript", "data-agent-role": "list", "data-agent-label": "The conversation transcript, oldest message first", children: [messages.map((message) => {
+    const { containerRef, onScroll } = 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) => {
                 const isLast = message.id === messages[messages.length - 1]?.id;
                 const runStreaming = isLast && isStreaming && !isTerminalRunStatus({ status: message.runStatus });
                 return (_jsx(MessageRow, { message: message, 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) } : {}), ...(projectFileNames !== undefined ? { projectFileNames } : {}), ...(onRequestOpenFile !== undefined ? { onRequestOpenFile } : {}), ...(renderAttachment !== undefined ? { renderAttachment } : {}) }, message.id));

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

@@ -0,0 +1,25 @@
+/**
+ * @file Pure scroll rules for `MessageList` (no DOM, no React), split out so the component file
+ * holds no logic.
+ */
+import type { ChatMessage } from '../../core/index.js';
+/** Slack, in px, for treating "close enough to the bottom" as "at the bottom" — a fractional
+ * scrollHeight/clientHeight rounding difference should not by itself stop the sticky-follow. */
+export declare const AT_BOTTOM_THRESHOLD_PX = 4;
+export declare function isScrolledToBottom(el: {
+    scrollHeight: number;
+    scrollTop: number;
+    clientHeight: number;
+}): boolean;
+/**
+ * Whether `next` starts a turn the user themself asked for, relative to `previous`: a user message
+ * that was not there before (a send — `useConversation.sendMessage` appends it optimistically), or
+ * an assistant message that newly entered `runStatus: 'queued'` (a retry, which resets the existing
+ * assistant message in place rather than appending one). Streamed chatter on an already-running
+ * turn is neither, so it never counts.
+ */
+export declare function startsNewTurn({ previous, next }: {
+    previous: readonly ChatMessage[];
+    next: readonly ChatMessage[];
+}): boolean;
+//# sourceMappingURL=MessageList.rules.d.ts.map

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

@@ -0,0 +1,23 @@
+/** Slack, in px, for treating "close enough to the bottom" as "at the bottom" — a fractional
+ * scrollHeight/clientHeight rounding difference should not by itself stop the sticky-follow. */
+export const AT_BOTTOM_THRESHOLD_PX = 4;
+export function isScrolledToBottom(el) {
+    return el.scrollHeight - el.scrollTop - el.clientHeight <= AT_BOTTOM_THRESHOLD_PX;
+}
+/**
+ * Whether `next` starts a turn the user themself asked for, relative to `previous`: a user message
+ * that was not there before (a send — `useConversation.sendMessage` appends it optimistically), or
+ * an assistant message that newly entered `runStatus: 'queued'` (a retry, which resets the existing
+ * assistant message in place rather than appending one). Streamed chatter on an already-running
+ * turn is neither, so it never counts.
+ */
+export function startsNewTurn({ previous, next }) {
+    const previousById = new Map(previous.map((message) => [message.id, message]));
+    return next.some((message) => {
+        const before = previousById.get(message.id);
+        if (message.role === 'user')
+            return before === undefined;
+        return message.runStatus === 'queued' && before?.runStatus !== 'queued';
+    });
+}
+//# sourceMappingURL=MessageList.rules.js.map

package/dist/react/components/mcp-ui-surface-state.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @module components/mcp-ui-surface-state
+ *
+ * Whether an MCP-UI card in a chat transcript is closed, and with which label. Kept out of
+ * `McpUiSurfaceCard.tsx` so the component only renders; moved here from that file 2026-10-04 when
+ * the card's own deadline (`useSurfaceExpiry`) became a second reason to close it.
+ */
+import type { ExtEventCall } from '../ext-event-renderer-registry.js';
+import type { useT } from '../hooks/context.js';
+type Translate = ReturnType<typeof useT>;
+/**
+ * Why a card can no longer be answered, or `undefined` while it still can: {@link settledLabel}'s
+ * answer first, so a card answered in time still reads "Answered", then the card's own deadline
+ * (`useSurfaceExpiry`). The deadline closes the card the moment it passes rather than when the
+ * server's expired result arrives, so a person never clicks a card nobody is waiting on.
+ *
+ * @complexity O(r) in the call result's length (one regex test).
+ */
+export declare function closedSurfaceLabel({ t, call, runStreaming, documentsForUri, expired }: {
+    t: Translate;
+    call: ExtEventCall | undefined;
+    runStreaming: boolean;
+    documentsForUri: number;
+    expired: boolean;
+}): string | undefined;
+export {};
+//# sourceMappingURL=mcp-ui-surface-state.d.ts.map

package/dist/react/components/mcp-ui-surface-state.js

@@ -0,0 +1,33 @@
+/** Words in a finished call's result that mean nobody answered in time. */
+const UNANSWERED_RESULT = /\b(expired|abandoned|did not respond|run ended)\b/i;
+/**
+ * Why a card can no longer be answered, or `undefined` while it still can.
+ *
+ * A held-open question (the tool shows the card and waits) is over once its tool call returns, and
+ * dead once its run ends without that return. Its first document stays on screen either way, so
+ * without this an expired, answered or orphaned question still looked answerable (host stuck-chat
+ * investigation, 2026-09-27). Only a card still showing that FIRST document closes: a tool that sent
+ * a follow-up document for the same `ui://` URI (an outcome after the answer) keeps showing it.
+ *
+ * The labels are read from the call's result text, so they are a best guess for a producer this
+ * package has not seen; the card is closed either way, which is the property that matters.
+ */
+function settledLabel(t, call, runStreaming, documentsForUri) {
+    if (call === undefined || documentsForUri > 1)
+        return undefined;
+    if (call.result === undefined)
+        return runStreaming ? undefined : t('This question expired');
+    return UNANSWERED_RESULT.test(call.result.content) ? t('This question expired') : t('Answered');
+}
+/**
+ * Why a card can no longer be answered, or `undefined` while it still can: {@link settledLabel}'s
+ * answer first, so a card answered in time still reads "Answered", then the card's own deadline
+ * (`useSurfaceExpiry`). The deadline closes the card the moment it passes rather than when the
+ * server's expired result arrives, so a person never clicks a card nobody is waiting on.
+ *
+ * @complexity O(r) in the call result's length (one regex test).
+ */
+export function closedSurfaceLabel({ t, call, runStreaming, documentsForUri, expired }) {
+    return settledLabel(t, call, runStreaming, documentsForUri) ?? (expired ? t('This question expired') : undefined);
+}
+//# sourceMappingURL=mcp-ui-surface-state.js.map

package/dist/react/features/chat-pane/components/ChatPane.d.ts

@@ -6,5 +6,5 @@ import type { ChatPaneProps } from '../types.js';
  * @complexity Time/space: O(n) in rendered messages, agents, and suggestions.
  * @overallScore 100/100
  */
-export declare function ChatPane({ transport, agents: injectedAgents, runtimeAccess, runtimeStatusPollMs, title, variant, initialMessages, conversationId, initialSelection, selection: controlledSelection, onSelectionChange, runContext, agentControl, onActivityChange, onMessagesChange, onRescanAgents, scanningAgents, daemonOnline, executionMode, apiModeAvailable, onExecutionModeChange, byokRuntime, onByokModelChange, initialDraft, validateAttachments, composerHandle, placeholder, placeholders, suggestions, workingDirectory, initialWorkingDirectory, onChangeWorkingDirectory, workingDirectoryAccess, workingDirectoryControlPlacement, projectFileNames, uploadAttachments, attachmentAccept, disabled, runtimePickerPlacement, composerSlots, header, leadingAccessory, footer, className, style, }: ChatPaneProps): import("react").JSX.Element;
+export declare function ChatPane({ transport, agents: injectedAgents, runtimeAccess, runtimeStatusPollMs, title, variant, initialMessages, conversationId, initialSelection, selection: controlledSelection, onSelectionChange, runContext, agentControl, onActivityChange, onMessagesChange, onRescanAgents, scanningAgents, daemonOnline, executionMode, apiModeAvailable, onExecutionModeChange, byokRuntime, onByokModelChange, initialDraft, validateAttachments, deliverTypedAnswer, composerHandle, placeholder, placeholders, suggestions, workingDirectory, initialWorkingDirectory, onChangeWorkingDirectory, workingDirectoryAccess, workingDirectoryControlPlacement, projectFileNames, uploadAttachments, attachmentAccept, disabled, runtimePickerPlacement, composerSlots, header, leadingAccessory, footer, className, style, }: ChatPaneProps): import("react").JSX.Element;
 //# sourceMappingURL=ChatPane.d.ts.map

package/dist/react/features/chat-pane/components/ChatPane.js

@@ -6,7 +6,7 @@ import { appendComposerDiscovery } from '../../../components/composer-discovery.
 import { MessageList } from '../../../components/MessageList.js';
 import { useT } from '../../../hooks/context.js';
 import { definedProps } from '../../../util/defined-props.js';
-import { isChatPaneApiModeConfigured } from '../rules.js';
+import { describeTypedAnswerNotice, isChatPaneApiModeConfigured } from '../rules.js';
 import { useChatPane } from '../hooks/useChatPane.hooks.js';
 import { useChatPaneAgentControl } from '../hooks/useChatPaneAgentControl.hooks.js';
 import { useChatPaneComposerPlaceholder } from '../hooks/useChatPaneComposerPlaceholder.hooks.js';
@@ -73,8 +73,8 @@ function ChatPaneNoUsableCliMessage({ executionMode, apiModeAvailable, onExecuti
 }
 /** The pane's stack of mutually-independent error/status banners — each condition is its own
  * source of truth, so they are rendered as siblings rather than folded into one derived state. */
-function ChatPaneStatusMessages({ unavailable, scanningAgents, connectingAgents, executionMode, apiModeAvailable, onExecutionModeChange, conversationError, attachmentError, dropReadError, workingDirectoryError, workingDirectoryPending, workingDirectoryInvalid, runtimeInventoryError, t, }) {
-    return (_jsxs(_Fragment, { children: [unavailable && connectingAgents ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Connecting to the assistant…') })) : unavailable && scanningAgents ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Loading available CLIs') })) : unavailable ? (_jsx(ChatPaneNoUsableCliMessage, { executionMode: executionMode, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, t: t })) : null, conversationError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: conversationError.message })) : null, attachmentError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: attachmentError.message })) : null, dropReadError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: dropReadError })) : null, workingDirectoryError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: workingDirectoryError.message })) : null, workingDirectoryPending ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Checking working directory…') })) : workingDirectoryInvalid ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: t('Working directory is unavailable.') })) : null, runtimeInventoryError && !connectingAgents ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: runtimeInventoryError.message })) : null] }));
+function ChatPaneStatusMessages({ unavailable, scanningAgents, connectingAgents, executionMode, apiModeAvailable, onExecutionModeChange, conversationError, attachmentError, dropReadError, workingDirectoryError, workingDirectoryPending, workingDirectoryInvalid, runtimeInventoryError, typedAnswerNotice, onSendAsNewMessage, t, }) {
+    return (_jsxs(_Fragment, { children: [unavailable && connectingAgents ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Connecting to the assistant…') })) : unavailable && scanningAgents ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Loading available CLIs') })) : unavailable ? (_jsx(ChatPaneNoUsableCliMessage, { executionMode: executionMode, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, t: t })) : null, conversationError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: conversationError.message })) : null, attachmentError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: attachmentError.message })) : null, dropReadError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: dropReadError })) : null, workingDirectoryError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: workingDirectoryError.message })) : null, workingDirectoryPending ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Checking working directory…') })) : workingDirectoryInvalid ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: t('Working directory is unavailable.') })) : null, runtimeInventoryError && !connectingAgents ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: runtimeInventoryError.message })) : null, typedAnswerNotice ? (_jsxs("div", { className: "jini-chat-pane__error", role: "alert", children: [t(describeTypedAnswerNotice({ notice: typedAnswerNotice })), typedAnswerNotice === 'not-pending' ? (_jsxs(_Fragment, { children: [' ', _jsx("button", { type: "button", className: "jini-chat-pane__error-action", onClick: onSendAsNewMessage, children: t('Send as a new message') })] })) : null] })) : null] }));
 }
 function ChatPaneWorkingDirectoryBlock({ workingDirectoryAccess, workingDirectoryControlPlacement, pane, t, }) {
     if (workingDirectoryAccess && workingDirectoryControlPlacement === 'below') {
@@ -178,7 +178,7 @@ function ChatPaneComposerArea({ fileDrop, uploadAttachments, pane, disabled, una
  * @complexity Time/space: O(n) in rendered messages, agents, and suggestions.
  * @overallScore 100/100
  */
-export function ChatPane({ transport, agents: injectedAgents = EMPTY_AGENTS, runtimeAccess, runtimeStatusPollMs = 5_000, title, variant = 'workspace', initialMessages, conversationId, initialSelection, selection: controlledSelection, onSelectionChange, runContext, agentControl, onActivityChange, onMessagesChange, onRescanAgents, scanningAgents = false, daemonOnline = true, executionMode = 'local', apiModeAvailable = false, onExecutionModeChange, byokRuntime, onByokModelChange, initialDraft, validateAttachments, composerHandle, placeholder, placeholders, suggestions = [], workingDirectory, initialWorkingDirectory, onChangeWorkingDirectory, workingDirectoryAccess, workingDirectoryControlPlacement = 'below', projectFileNames, uploadAttachments, attachmentAccept, disabled = false, runtimePickerPlacement = 'up', composerSlots, header, leadingAccessory, footer, className, style, }) {
+export function ChatPane({ transport, agents: injectedAgents = EMPTY_AGENTS, runtimeAccess, runtimeStatusPollMs = 5_000, title, variant = 'workspace', initialMessages, conversationId, initialSelection, selection: controlledSelection, onSelectionChange, runContext, agentControl, onActivityChange, onMessagesChange, onRescanAgents, scanningAgents = false, daemonOnline = true, executionMode = 'local', apiModeAvailable = false, onExecutionModeChange, byokRuntime, onByokModelChange, initialDraft, validateAttachments, deliverTypedAnswer, composerHandle, placeholder, placeholders, suggestions = [], workingDirectory, initialWorkingDirectory, onChangeWorkingDirectory, workingDirectoryAccess, workingDirectoryControlPlacement = 'below', projectFileNames, uploadAttachments, attachmentAccept, disabled = false, runtimePickerPlacement = 'up', composerSlots, header, leadingAccessory, footer, className, style, }) {
     const t = useT();
     const composerPlaceholder = useChatPaneComposerPlaceholder({ placeholder: placeholder, placeholders: placeholders });
     const inventory = useChatPaneRuntimeInventory(definedProps({ source: {
@@ -210,6 +210,7 @@ export function ChatPane({ transport, agents: injectedAgents = EMPTY_AGENTS, run
             onChangeWorkingDirectory,
             workingDirectoryAccess,
             apiModeConfigured,
+            deliverTypedAnswer,
         } }));
     // Mirrors `Composer.tsx`'s own `draftRef`: `composerHandle.insertText` (below) is called from
     // OUTSIDE any render, so it cannot close over `pane.composer.draft` directly — that would freeze
@@ -262,6 +263,6 @@ export function ChatPane({ transport, agents: injectedAgents = EMPTY_AGENTS, run
             footerAccessories: (_jsx(AgentRuntimePicker, { agents: runtimeView.agents, value: pane.selection, onChange: pane.setSelection, ...definedProps({ source: { onRescan: runtimeView.rescanAgents } }), scanning: runtimeView.scanningAgents, daemonOnline: runtimeView.daemonOnline, placement: runtimePickerPlacement, executionMode: executionMode, apiModeAvailable: apiModeAvailable, ...definedProps({ source: { onExecutionModeChange, byokRuntime, onByokModelChange } }) })),
         } });
     const { rootRef, controlsRef } = useChatPaneControlsHeight();
-    return (_jsxs("section", { className: chatPaneClassName(variant, className), style: style, "data-activity": pane.activity, ref: rootRef, children: [_jsx("style", { "data-jini-chat-pane-styles": "true", children: CHAT_PANE_STYLES }), resolveChatPaneHeader(header, title, pane.reset, t), _jsxs("div", { className: "jini-chat-pane__body", children: [_jsx(MessageList, { messages: pane.conversation.messages, isStreaming: pane.conversation.isStreaming, scrollIntent: pane.conversation.scrollIntent, onScrolled: pane.conversation.acknowledgeScroll, pendingPrompt: pane.queuedPrompt === null ? null : { text: pane.queuedPrompt, onCancel: pane.cancelQueued }, ...(projectFileNames === undefined ? {} : { projectFileNames: new Set(projectFileNames) }) }), _jsxs("div", { className: "jini-chat-pane__controls", ref: controlsRef, children: [_jsx(ChatPaneSuggestionsRow, { suggestions: suggestions, onSelect: pane.composer.setDraft, t: t }), _jsx(ChatPaneStatusMessages, { unavailable: unavailable, scanningAgents: runtimeView.scanningAgents, connectingAgents: runtimeView.connectingAgents, executionMode: executionMode, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, conversationError: pane.conversation.error, attachmentError: pane.attachmentError, dropReadError: fileDrop.dropReadError, workingDirectoryError: pane.workingDirectoryError, workingDirectoryPending: pane.workingDirectoryPending, workingDirectoryInvalid: pane.workingDirectoryInvalid, runtimeInventoryError: inventory.runtimeInventoryError, t: t }), _jsx(ChatPaneComposerArea, { fileDrop: fileDrop, uploadAttachments: uploadAttachments, pane: pane, disabled: disabled, unavailable: unavailable, placeholder: composerPlaceholder, slots: slots, attachmentAccept: attachmentAccept, workingDirectoryAccess: workingDirectoryAccess, workingDirectoryControlPlacement: workingDirectoryControlPlacement, t: t })] })] }), footer] }));
+    return (_jsxs("section", { className: chatPaneClassName(variant, className), style: style, "data-activity": pane.activity, ref: rootRef, children: [_jsx("style", { "data-jini-chat-pane-styles": "true", children: CHAT_PANE_STYLES }), resolveChatPaneHeader(header, title, pane.reset, t), _jsxs("div", { className: "jini-chat-pane__body", children: [_jsx(MessageList, { messages: pane.conversation.messages, isStreaming: pane.conversation.isStreaming, scrollIntent: pane.conversation.scrollIntent, onScrolled: pane.conversation.acknowledgeScroll, pendingPrompt: pane.queuedPrompt === null ? null : { text: pane.queuedPrompt, onCancel: pane.cancelQueued }, ...(projectFileNames === undefined ? {} : { projectFileNames: new Set(projectFileNames) }) }), _jsxs("div", { className: "jini-chat-pane__controls", ref: controlsRef, children: [_jsx(ChatPaneSuggestionsRow, { suggestions: suggestions, onSelect: pane.composer.setDraft, t: t }), _jsx(ChatPaneStatusMessages, { unavailable: unavailable, scanningAgents: runtimeView.scanningAgents, connectingAgents: runtimeView.connectingAgents, executionMode: executionMode, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, conversationError: pane.conversation.error, attachmentError: pane.attachmentError, dropReadError: fileDrop.dropReadError, workingDirectoryError: pane.workingDirectoryError, workingDirectoryPending: pane.workingDirectoryPending, workingDirectoryInvalid: pane.workingDirectoryInvalid, runtimeInventoryError: inventory.runtimeInventoryError, typedAnswerNotice: pane.typedAnswerNotice, onSendAsNewMessage: () => void pane.sendAsNewMessage(), t: t }), _jsx(ChatPaneComposerArea, { fileDrop: fileDrop, uploadAttachments: uploadAttachments, pane: pane, disabled: disabled, unavailable: unavailable, placeholder: composerPlaceholder, slots: slots, attachmentAccept: attachmentAccept, workingDirectoryAccess: workingDirectoryAccess, workingDirectoryControlPlacement: workingDirectoryControlPlacement, t: t })] })] }), footer] }));
 }
 //# sourceMappingURL=ChatPane.js.map

package/dist/react/features/chat-pane/create-typed-answer-poster.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @module create-typed-answer-poster
+ *
+ * The client half of a typed answer: a ready-made {@link DeliverTypedAnswer} that posts text the
+ * human typed into the composer to the MCP-UI tool-call route, for the question a running agent is
+ * holding open. Pass it as `ChatPane`'s `deliverTypedAnswer`.
+ *
+ * ```tsx
+ * <ChatPane deliverTypedAnswer={createTypedAnswerPoster({ baseUrl: '', fetch, toolName: 'ask_choice' })} />
+ * ```
+ *
+ * Sibling of `create-mcp-ui-tool-caller.ts`, and the same wire shape: `{toolName, params}` to the
+ * same route. The difference is what the params carry and what the caller needs back.
+ *
+ * ## Why the body names no exchange
+ *
+ * A human typing into the composer has never seen an exchange id; the only client-side copy lives
+ * inside the surface's own (model-influenced, sandboxed) HTML. So the body carries only the tool and
+ * the text under {@link TYPED_ANSWER_PARAM}, and the server resolves which open exchange — for that
+ * tool and the request's own authenticated principal — the answer is for (`@jini-ai/daemon`'s
+ * `findTypedAnswerTarget`).
+ *
+ * ## Why it resolves an outcome instead of throwing
+ *
+ * The pane must tell three cases apart and act differently on each, never by queueing the text as a
+ * new run: 202 delivered it; 409 means nothing is waiting any more (answered, expired, or never
+ * open); anything else is a failure the human can retry. A rejection would collapse the last two.
+ */
+import type { DeliverTypedAnswer } from './types.js';
+export interface CreateTypedAnswerPosterOptions {
+    /** Path appended to `baseUrl`. Defaults to `/api/mcp-ui/tool-calls`, as for `createMcpUiToolCaller`. */
+    readonly path?: string;
+    /** Abandon a post after this many ms (reported as `'failed'`). Defaults to 30s. */
+    readonly timeoutMs?: number;
+    /** Extra headers per request (e.g. a CSRF token). `content-type` is always set and cannot be overridden. */
+    readonly headers?: Readonly<Record<string, string>>;
+}
+/**
+ * Builds a {@link DeliverTypedAnswer} that POSTs `{toolName, params: {__typedAnswer: text}}`.
+ *
+ * @param deps.baseUrl - Origin to call; `''` for same-origin.
+ * @param deps.fetch - The fetch to use (the browser's, in production).
+ * @param deps.toolName - The host's question tool id — the server only routes typed answers to a
+ *   tool that opted in, so this package cannot pick it.
+ * @returns Resolves to the outcome; never rejects. Carries `toolName`, which also tells the pane
+ *   which tool's open card is a question awaiting typed text.
+ * @complexity O(1) — one request per call.
+ */
+export declare function createTypedAnswerPoster({ baseUrl, fetch, toolName }: {
+    baseUrl: string;
+    fetch: typeof globalThis.fetch;
+    toolName: string;
+}, options?: CreateTypedAnswerPosterOptions): DeliverTypedAnswer;
+//# sourceMappingURL=create-typed-answer-poster.d.ts.map

package/dist/react/features/chat-pane/create-typed-answer-poster.js

@@ -0,0 +1,46 @@
+/**
+ * The params key a typed answer travels under. Spelled here rather than imported because this
+ * browser package cannot depend on `@jini-ai/daemon`, which owns the canonical
+ * `SURFACE_TYPED_ANSWER_PARAM`; `@jini-ai/mcp`'s ask-choice tool keeps its own copy for the same
+ * reason. All three must agree.
+ */
+const TYPED_ANSWER_PARAM = '__typedAnswer';
+const DEFAULT_PATH = '/api/mcp-ui/tool-calls';
+const DEFAULT_TIMEOUT_MS = 30_000;
+/** Maps the route's status onto an outcome. Only 202 is a delivery; a 200 would be a fresh execution. */
+function deliveryFor(status) {
+    if (status === 202)
+        return 'delivered';
+    return status === 409 ? 'not-pending' : 'failed';
+}
+/**
+ * Builds a {@link DeliverTypedAnswer} that POSTs `{toolName, params: {__typedAnswer: text}}`.
+ *
+ * @param deps.baseUrl - Origin to call; `''` for same-origin.
+ * @param deps.fetch - The fetch to use (the browser's, in production).
+ * @param deps.toolName - The host's question tool id — the server only routes typed answers to a
+ *   tool that opted in, so this package cannot pick it.
+ * @returns Resolves to the outcome; never rejects. Carries `toolName`, which also tells the pane
+ *   which tool's open card is a question awaiting typed text.
+ * @complexity O(1) — one request per call.
+ */
+export function createTypedAnswerPoster({ baseUrl, fetch, toolName }, options = {}) {
+    const endpoint = `${baseUrl.replace(/\/$/u, '')}${options.path ?? DEFAULT_PATH}`;
+    const timeoutMs = options.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+    const deliver = async ({ text }) => {
+        const controller = new AbortController();
+        const timer = setTimeout(() => controller.abort(), timeoutMs);
+        const outcome = await fetch(endpoint, {
+            method: 'POST',
+            // Same-origin cookie session: the human's own credentials authorize the answer.
+            credentials: 'same-origin',
+            headers: { ...options.headers, 'content-type': 'application/json' },
+            body: JSON.stringify({ toolName, params: { [TYPED_ANSWER_PARAM]: text } }),
+            signal: controller.signal,
+        }).then((response) => deliveryFor(response.status), () => 'failed');
+        clearTimeout(timer);
+        return outcome;
+    };
+    return Object.assign(deliver, { toolName });
+}
+//# sourceMappingURL=create-typed-answer-poster.js.map

package/dist/react/features/chat-pane/hooks/useChatPane.hooks.d.ts

@@ -1,5 +1,5 @@
 import { type ChatPaneSendBlocker } from '../rules.js';
-import type { ChatPaneActivity, ChatPaneAgent, ChatPaneAttachmentUploadOptions, ChatPaneAgentSelection, ChatPaneRunContext, ChatPaneWorkingDirectoryAccess } from '../types.js';
+import type { ChatPaneActivity, ChatPaneAgent, ChatPaneAttachmentUploadOptions, ChatPaneAgentSelection, ChatPaneRunContext, ChatPaneWorkingDirectoryAccess, DeliverTypedAnswer, TypedAnswerNotice } from '../types.js';
 import type { ChatAttachment, ChatMessage } from '@jini-ai/chat';
 import type { ChatTransport } from '@jini-ai/chat';
 import { type UseComposerResult } from '../../../hooks/useComposer.js';
@@ -30,6 +30,8 @@ export interface UseChatPaneOptions {
      * behavior: no selected agent always blocks sending.
      */
     apiModeConfigured?: boolean;
+    /** See `ChatPaneProps.deliverTypedAnswer`. Omitted keeps today's queue-while-streaming behavior. */
+    deliverTypedAnswer?: DeliverTypedAnswer;
 }
 export interface UseChatPaneResult extends UseChatPaneWorkingDirectoryResult {
     conversation: UseConversationResult;
@@ -76,6 +78,20 @@ export interface UseChatPaneResult extends UseChatPaneWorkingDirectoryResult {
     queuedPrompt: string | null;
     /** Drops the queued prompt without ever sending it. */
     cancelQueued: () => void;
+    /**
+     * Why the last typed answer was NOT sent, or `null`. Set when `deliverTypedAnswer` reports the
+     * question no longer waiting or could not be reached, and when {@link send} holds back an answer
+     * whose question has since closed; the draft stays in the composer. Cleared by the next send and
+     * by `reset()`.
+     */
+    typedAnswerNotice: TypedAnswerNotice | null;
+    /**
+     * Sends the composer draft as an ordinary next turn (queued behind a running run, as {@link send}
+     * does) even though it was typed as an answer to a question that has since closed. The one way
+     * past {@link send}'s hold on such a draft other than clearing it: the human chose a new, possibly
+     * paid, run on purpose.
+     */
+    sendAsNewMessage: () => Promise<void>;
     /**
      * Cancels the run in flight and sends the composer draft as soon as it stops — the modifier-key
      * counterpart to {@link send}, which queues behind the run instead of ending it. Implemented as

package/dist/react/features/chat-pane/hooks/useChatPane.hooks.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { describeChatPaneSendBlocker, findChatPaneSendBlocker, isChatPaneQueueableBlocker, resolveChatPaneSelection, } from '../rules.js';
+import { describeChatPaneSendBlocker, findAwaitedTypedAnswerId, findChatPaneSendBlocker, isChatPaneQueueableBlocker, isTypedAnswerTurn, resolveChatPaneSelection, } from '../rules.js';
 import { definedProps } from '../../../util/defined-props.js';
 import { cacheAttachmentPreviewSource } from '../../../hooks/attachment-preview-cache.js';
 import { useComposer } from '../../../hooks/useComposer.js';
@@ -18,6 +18,20 @@ function createAttachmentBatchId() {
     return globalThis.crypto?.randomUUID?.()
         ?? `chat-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
 }
+/**
+ * Hands one typed answer to the host. A throw counts as `'failed'`: the host could not say whether
+ * anything was waiting, and the one outcome that must never follow is queueing the text as a new run.
+ *
+ * @complexity O(1) plus the host's own request.
+ */
+async function deliverTypedAnswerSafely({ deliver, text }) {
+    try {
+        return await deliver({ text });
+    }
+    catch {
+        return 'failed';
+    }
+}
 /** Module scope so each branch costs 1 cognitive point instead of 2 (nested one level inside
  * `useChatPane` where it used to live as a ternary chain). */
 function resolveChatPaneActivity(selectedAgent, conversation) {
@@ -61,6 +75,21 @@ export function useChatPane(options) {
     const [activeUploadCount, setActiveUploadCount] = useState(0);
     const [attachmentError, setAttachmentError] = useState(null);
     const [queuedPrompt, setQueuedPrompt] = useState(null);
+    const [typedAnswerNotice, setTypedAnswerNotice] = useState(null);
+    // Set across the await of one typed-answer delivery so a second Enter cannot post the same text
+    // twice — the second post would find the question already answered and wrongly report it closed.
+    const deliveringTypedAnswerRef = useRef(false);
+    // The question (tool-use id) the current draft was typed for, or null. Set while a non-empty draft
+    // sits in the composer as a question waits, and kept after that question closes (answered
+    // elsewhere, expired, 409), so `send` cannot slip the draft into the queue as a new paid run.
+    // Released only by an empty draft, a delivery, `reset()`, or `sendAsNewMessage`.
+    const heldAnswerQuestionIdRef = useRef(null);
+    // The question the last delivery answered: typing more while its card is still drawn open (its
+    // tool_result has not streamed in yet) is a follow-up, not another answer to hold.
+    const answeredQuestionIdRef = useRef(null);
+    // Bumped by `reset()` and a conversation switch; a delivery that settles under a different value
+    // belongs to a composer that no longer exists and must neither clear the draft nor set a notice.
+    const typedAnswerGenerationRef = useRef(0);
     // The conversation `queuedPrompt` was queued against. Compared with `options.conversationId` at
     // flush time so a prompt queued behind a streaming run in one conversation can never be posted
     // into a different one the caller switched to before that run finished.
@@ -150,6 +179,26 @@ export function useChatPane(options) {
         ...(options.apiModeConfigured === undefined ? {} : { apiModeConfigured: options.apiModeConfigured }),
     });
     const canSend = sendBlocker === null && composer.canSubmit;
+    // Read after `await` in `answerWaitingQuestion`, where the render-time `composer.draft` is stale.
+    const latestDraftRef = useRef(composer.draft);
+    latestDraftRef.current = composer.draft;
+    const awaitedQuestionId = options.deliverTypedAnswer === undefined
+        ? null
+        : findAwaitedTypedAnswerId({ messages: conversation.messages, toolName: options.deliverTypedAnswer.toolName });
+    const hasDraft = composer.draft.trim() !== '';
+    useEffect(() => {
+        if (!hasDraft) {
+            heldAnswerQuestionIdRef.current = null;
+            return;
+        }
+        if (awaitedQuestionId !== null && awaitedQuestionId !== answeredQuestionIdRef.current) {
+            heldAnswerQuestionIdRef.current = awaitedQuestionId;
+        }
+    }, [awaitedQuestionId, hasDraft]);
+    useEffect(() => {
+        typedAnswerGenerationRef.current += 1;
+        heldAnswerQuestionIdRef.current = null;
+    }, [options.conversationId]);
     const addAttachments = useCallback(async (files) => {
         if (files.length === 0 || options.uploadAttachments === undefined)
             return;
@@ -220,10 +269,30 @@ export function useChatPane(options) {
         sendBlocker,
         workingDirectoryState.workingDirectory,
     ]);
-    const send = useCallback(async () => {
-        const prompt = composerPrompt(composer);
-        if (!prompt)
+    const answerWaitingQuestion = useCallback(async ({ deliver, text }) => {
+        const generation = typedAnswerGenerationRef.current;
+        const submittedDraft = latestDraftRef.current;
+        const questionId = awaitedQuestionId;
+        deliveringTypedAnswerRef.current = true;
+        const outcome = await deliverTypedAnswerSafely({ deliver, text });
+        deliveringTypedAnswerRef.current = false;
+        if (!mountedRef.current || generation !== typedAnswerGenerationRef.current)
             return;
+        // Anything but a delivery keeps the draft and says why — never the queue below, whose flush
+        // would post the answer as a brand-new (paid) run once this one ends.
+        if (outcome !== 'delivered') {
+            setTypedAnswerNotice(outcome);
+            return;
+        }
+        answeredQuestionIdRef.current = questionId;
+        heldAnswerQuestionIdRef.current = null;
+        // The textarea stays editable during delivery: clear only the text that went out, never a
+        // correction or next message typed while the host answered.
+        if (latestDraftRef.current === submittedDraft)
+            composer.setDraft('');
+    }, [awaitedQuestionId, composer]);
+    // The ordinary next-turn path: queue behind a running run, else send now.
+    const sendOrdinaryTurn = useCallback(async (prompt) => {
         // Queue instead of no-op'ing. `setDraft('')` and NOT `composer.reset()`: reset also discards
         // staged attachments, which this turn still needs when it finally goes out.
         if (isChatPaneQueueableBlocker({ blocker: sendBlocker })) {
@@ -236,6 +305,48 @@ export function useChatPane(options) {
             return;
         await sendPrompt(prompt);
     }, [canSend, composer, options.conversationId, sendBlocker, sendPrompt]);
+    const send = useCallback(async () => {
+        const prompt = composerPrompt(composer);
+        if (!prompt || deliveringTypedAnswerRef.current)
+            return;
+        setTypedAnswerNotice(null);
+        const deliver = options.deliverTypedAnswer;
+        if (deliver !== undefined && isTypedAnswerTurn({
+            blocker: sendBlocker,
+            attachmentCount: composer.attachments.length,
+            messages: conversation.messages,
+            toolName: deliver.toolName,
+        })) {
+            await answerWaitingQuestion({ deliver, text: prompt });
+            return;
+        }
+        // Typed for a question that has since closed: the human meant an answer, so going on to the
+        // queue would start a paid run they never asked for. Attachments mark a new turn (a typed answer
+        // carries text only), the same rule `isTypedAnswerTurn` applies.
+        if (heldAnswerQuestionIdRef.current !== null && composer.attachments.length === 0) {
+            setTypedAnswerNotice('not-pending');
+            return;
+        }
+        await sendOrdinaryTurn(prompt);
+    }, [
+        answerWaitingQuestion,
+        composer,
+        conversation.messages,
+        options.deliverTypedAnswer,
+        sendBlocker,
+        sendOrdinaryTurn,
+    ]);
+    const sendAsNewMessage = useCallback(async () => {
+        const prompt = composerPrompt(composer);
+        if (!prompt || deliveringTypedAnswerRef.current)
+            return;
+        setTypedAnswerNotice(null);
+        // Mark the question answered too, so the still-non-empty draft is not re-held by the effect
+        // while that question's card is drawn open.
+        answeredQuestionIdRef.current = heldAnswerQuestionIdRef.current ?? answeredQuestionIdRef.current;
+        heldAnswerQuestionIdRef.current = null;
+        await sendOrdinaryTurn(prompt);
+    }, [composer, sendOrdinaryTurn]);
     const interruptSend = useCallback(() => {
         const prompt = composerPrompt(composer);
         if (!prompt)
@@ -277,6 +388,9 @@ export function useChatPane(options) {
         conversation.setMessages(options.initialMessages ?? []);
         composer.reset();
         setAttachmentError(null);
+        setTypedAnswerNotice(null);
+        typedAnswerGenerationRef.current += 1;
+        heldAnswerQuestionIdRef.current = null;
         // Without this, a prompt queued behind a streaming run survives `reset()` and — once
         // `conversation.cancel()` above clears the streaming blocker — the flush effect fires it into
         // the just-reset conversation instead of discarding it like the rest of this turn's state.
@@ -301,6 +415,8 @@ export function useChatPane(options) {
         sendPrompt,
         queuedPrompt,
         cancelQueued,
+        typedAnswerNotice,
+        sendAsNewMessage,
         interruptSend,
         reset,
     };

package/dist/react/features/chat-pane/index.d.ts

@@ -1,8 +1,9 @@
-export type { AgentRuntimePickerProps, ByokRuntimeSummary, ChatPaneActivity, ChatPaneAgent, ChatPaneAgentBridgeAccess, ChatPaneAgentControlOptions, ChatPaneAgentOption, ChatPaneAgentSelection, ChatPaneAgentToolAction, ChatPaneAttachmentUploadOptions, ChatPaneComposerHandle, ChatPaneProps, ChatPaneRunContext, ChatPaneRunContextInput, ChatPaneRuntimeAccess, ChatPaneVariant, ChatPaneWorkingDirectoryAccess, RuntimePickerPlacement, } from './types.js';
+export type { AgentRuntimePickerProps, ByokRuntimeSummary, ChatPaneActivity, ChatPaneAgent, ChatPaneAgentBridgeAccess, ChatPaneAgentControlOptions, ChatPaneAgentOption, ChatPaneAgentSelection, ChatPaneAgentToolAction, ChatPaneAttachmentUploadOptions, ChatPaneComposerHandle, ChatPaneProps, ChatPaneRunContext, ChatPaneRunContextInput, ChatPaneRuntimeAccess, ChatPaneVariant, ChatPaneWorkingDirectoryAccess, DeliverTypedAnswer, RuntimePickerPlacement, TypedAnswerDelivery, TypedAnswerNotice, } from './types.js';
 export { CHAT_PANE_AGENT_TOOLS, type ChatPaneAgentToolDef, type ChatPaneAgentToolInputSchema, type ChatPaneAgentToolRisk, } from './agent-tools.js';
 export { defaultChatPaneSelection, orderChatPaneAgents, resolveChatPaneSelection, } from './rules.js';
 export { createDaemonAttachmentUploader, type CreateDaemonAttachmentUploaderOptions, } from './create-daemon-attachment-uploader.js';
 export { createMcpUiToolCaller, type CreateMcpUiToolCallerOptions, type McpUiToolCallRequest, } from './create-mcp-ui-tool-caller.js';
+export { createTypedAnswerPoster, type CreateTypedAnswerPosterOptions, } from './create-typed-answer-poster.js';
 export { useChatPane, type UseChatPaneOptions, type UseChatPaneResult, } from './hooks/useChatPane.hooks.js';
 export { useChatPaneAgentControl, type UseChatPaneAgentControlOptions, } from './hooks/useChatPaneAgentControl.hooks.js';
 export { useChatPaneWorkingDirectory, type UseChatPaneWorkingDirectoryOptions, type UseChatPaneWorkingDirectoryResult, } from './hooks/useChatPaneWorkingDirectory.hooks.js';

package/dist/react/features/chat-pane/index.js

@@ -2,6 +2,7 @@ export { CHAT_PANE_AGENT_TOOLS, } from './agent-tools.js';
 export { defaultChatPaneSelection, orderChatPaneAgents, resolveChatPaneSelection, } from './rules.js';
 export { createDaemonAttachmentUploader, } from './create-daemon-attachment-uploader.js';
 export { createMcpUiToolCaller, } from './create-mcp-ui-tool-caller.js';
+export { createTypedAnswerPoster, } from './create-typed-answer-poster.js';
 export { useChatPane, } from './hooks/useChatPane.hooks.js';
 export { useChatPaneAgentControl, } from './hooks/useChatPaneAgentControl.hooks.js';
 export { useChatPaneWorkingDirectory, } from './hooks/useChatPaneWorkingDirectory.hooks.js';