@jini-ai/chat 0.5.7 → 0.6.0

package/dist/react/components/MessageRow.usage.js

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { conversationUsage } from '../../core/turn-usage.js';
+import { formatUsageCost } from '../../core/usage-format.js';
+import { useT } from '../hooks/context.js';
+/** A standalone row has one turn; MessageList supplies the full conversation projection. */
+export function useMessageUsage({ message, summary }, _optional = {}) {
+    return useMemo(() => summary ?? conversationUsage({ messages: [message] }).get(message.id), [message, summary]);
+}
+/** Which "Done" lines a message shows. Each finished reply gets its own line where it ends; the reply
+ * still running gets none, so a stale line never sits above live work (owner, 2026-10-10). Per-reply
+ * lines need the ordered block layout to know where a reply ends; the flat fallback keeps one
+ * whole-message line under the message once the run is over. A row still streaming counts as running
+ * even when its `runStatus` was never set, so the previous reply's line cannot slide down under the
+ * live tool rows above "Running …" (owner bug, 2026-10-10). O(r) for r replies.
+ * @example usageLayout({ usage, interleaved: true, runInProgress: true }).footer // undefined */
+export function usageLayout({ usage, interleaved, runInProgress }, { runStreaming = false } = {}) {
+    const segments = interleaved ? usage?.segments : undefined;
+    const last = segments ? segments.at(-1) : usage;
+    return { footer: runInProgress || runStreaming ? undefined : last, replies: segments ? segments.slice(0, -1) : [] };
+}
+/** Whether the footer's "Done" line renders directly above the copy row: a finished turn with a
+ * non-empty usage line and no notice between them. Rows get a modifier class from this so a host can
+ * lay the two out on one line with a plain class selector — a `:has(> usage + actions)` selector made
+ * every keystroke restyle the whole page in long chats (2026-10-11). O(1).
+ * @example usageLineMeetsActions({ footer: { kind: 'usage', costUsd: 0.1 }, terminalNotice: null, pending: false, runInProgress: false }) // true */
+export function usageLineMeetsActions({ footer, terminalNotice, pending, runInProgress }, _optional = {}) {
+    const hasText = footer !== undefined && (footer.durationMs !== undefined || footer.costUsd !== undefined);
+    return hasText && !terminalNotice && !pending && !runInProgress;
+}
+/** Build footer display values outside JSX; token counts remain available in the tooltip and accessible footer label.
+ * Each line carries the chat's running total as of that reply, "Done · 16s · $0.39 · total $3.95" (owner,
+ * 2026-10-10: keep the total, always shown, even on the first turn). `showTotal: false` turns it off. */
+export function useUsageSummary({ usage }, { showTotal = true } = {}) {
+    const t = useT();
+    const parts = [];
+    if (usage.durationMs !== undefined) {
+        const seconds = Math.round(usage.durationMs / 1000);
+        parts.push(seconds >= 60 ? `${Math.floor(seconds / 60)}m ${seconds % 60}s` : `${seconds}s`);
+    }
+    if (usage.costUsd !== undefined) {
+        parts.push(formatUsageCost({ costUsd: usage.costUsd, ...(showTotal ? { totalCostUsd: usage.totalCostUsd ?? usage.costUsd } : {}) }));
+    }
+    const text = parts.join(' · ');
+    const title = usage.outputTokens === undefined ? undefined : t('{n} out', { n: usage.outputTokens });
+    return { text, title, ariaLabel: title === undefined ? undefined : `${t('Done')} · ${text} · ${title}` };
+}
+//# sourceMappingURL=MessageRow.usage.js.map

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

@@ -1,16 +1,6 @@
-/**
- * @module MidRunUserMessage
- *
- * Renders a message the human sent while a run was going (`ChatPane`'s `deliverMidRunMessage`) as a
- * user bubble inside the running turn, at the point in the stream where the live agent received it.
- * The daemon records each one as a `user_message` run event (`AgentExecutor.sendUserMessage`), which
- * the run-event translator surfaces as `kind: 'ext'` with that name; this claims it.
- *
- * It is an event of the assistant turn, not a `ChatMessage` of its own, because the agent folded it
- * into the turn it was already running — there is no separate reply to hang off it.
- */
 import { type ExtEventRenderProps } from '../ext-event-renderer-registry.js';
-/** The ext-event name the daemon's mid-run `user_message` run event arrives under. */
+/** The ext-event name the daemon's mid-run `user_message` run event arrives under. One source with
+ * the core reply split (`replySegments`), which ends a reply's usage at this same event. */
 export declare const MID_RUN_USER_MESSAGE_EXT_EVENT_NAME = "user_message";
 /** One slot per message id, so each mid-run message renders where it arrived rather than folding into the first. */
 export declare function midRunUserMessageSlotKey({ data }: {

package/dist/react/components/MidRunUserMessage.js

@@ -10,9 +10,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * It is an event of the assistant turn, not a `ChatMessage` of its own, because the agent folded it
  * into the turn it was already running — there is no separate reply to hang off it.
  */
+import { MID_RUN_USER_MESSAGE_EVENT_NAME } from '../../core/turn-usage.js';
 import { registerExtEventRenderer } from '../ext-event-renderer-registry.js';
-/** The ext-event name the daemon's mid-run `user_message` run event arrives under. */
-export const MID_RUN_USER_MESSAGE_EXT_EVENT_NAME = 'user_message';
+/** The ext-event name the daemon's mid-run `user_message` run event arrives under. One source with
+ * the core reply split (`replySegments`), which ends a reply's usage at this same event. */
+export const MID_RUN_USER_MESSAGE_EXT_EVENT_NAME = MID_RUN_USER_MESSAGE_EVENT_NAME;
 function field(data, key) {
     const value = typeof data === 'object' && data !== null ? data[key] : undefined;
     return typeof value === 'string' && value !== '' ? value : undefined;

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { ChatAttachment } from '../../core/index.js';
+import { type ObjectUrlPort } from './SentAttachment.hooks.js';
+export interface SentAttachmentButtonProps {
+    attachment: ChatAttachment;
+    /** Opens the row's preview modal for this attachment. */
+    onOpen: (attachment: ChatAttachment) => void;
+    /** Host-supplied chip content; when given it wins over the built-in thumbnail/filename. */
+    renderAttachment?: ((attachment: ChatAttachment) => ReactNode) | undefined;
+    /** Blob-URL port for the thumbnail; defaults to the platform's (see `SentAttachment.hooks.ts`). */
+    objectUrls?: ObjectUrlPort | undefined;
+}
+/**
+ * One attachment on a sent user message: a small image thumbnail when this browser still holds the
+ * image's bytes, otherwise the filename chip. Either way a click opens the preview modal, and the
+ * accessible name stays "Open {name}".
+ */
+export declare function SentAttachmentButton({ attachment, onOpen, renderAttachment, objectUrls }: SentAttachmentButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=SentAttachment.d.ts.map

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

@@ -0,0 +1,44 @@
+import type { ChatAttachment } from '../../core/index.js';
+/** Blob-URL port, so a test (jsdom has no `URL.createObjectURL`) can supply a fake. */
+export interface ObjectUrlPort {
+    create: (file: File) => string;
+    revoke: (url: string) => void;
+}
+/** The platform's Blob URLs, or `undefined` where they do not exist (jsdom, non-browser hosts). */
+export declare function platformObjectUrls(): ObjectUrlPort | undefined;
+/**
+ * The cached file to draw as a thumbnail, or `undefined` when the attachment should stay a chip:
+ * not an image (same `looksLikeImageAttachment` rule the preview modal uses), or no bytes cached.
+ * @complexity O(1).
+ */
+export declare function sentAttachmentThumbnailSource({ attachment }: {
+    attachment: Pick<ChatAttachment, 'kind' | 'name' | 'path'>;
+}, { getSource }?: {
+    getSource?: (required: {
+        path: string;
+    }) => File | undefined;
+}): File | undefined;
+export interface SentAttachmentThumbnail {
+    /** Object URL to put in the `<img>`, or `undefined` to render the filename chip. */
+    thumbnailUrl: string | undefined;
+    /** The `<img>`'s `onError`: an undecodable file falls back to the chip instead of a broken image. */
+    onThumbnailError: () => void;
+}
+/**
+ * Creates the thumbnail's object URL on mount and revokes it on unmount (an effect, not `useMemo`,
+ * so a Strict Mode double render cannot leak a URL - same reasoning as the preview modal's hook).
+ * @param input.hostRendered - True when a host `renderAttachment` draws this chip.
+ * @param options.objectUrls - Blob-URL port; defaults to the platform's, `undefined` where absent.
+ * @param options.getSource - Preview-cache lookup; defaults to the shared cache.
+ * @complexity O(1) per attachment.
+ */
+export declare function useSentAttachmentThumbnail({ attachment, hostRendered }: {
+    attachment: ChatAttachment;
+    hostRendered?: boolean;
+}, { objectUrls, getSource }?: {
+    objectUrls?: ObjectUrlPort | undefined;
+    getSource?: (required: {
+        path: string;
+    }) => File | undefined;
+}): SentAttachmentThumbnail;
+//# sourceMappingURL=SentAttachment.hooks.d.ts.map

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

@@ -0,0 +1,56 @@
+/**
+ * @file Thumbnail state for one attachment on a SENT user message (`SentAttachment.tsx`).
+ *
+ * A sent image shows as a small thumbnail instead of a filename chip, so the operator can see at a
+ * glance which screenshots went with the turn. The bytes come from the same
+ * `attachment-preview-cache.ts` the preview modal reads: only files this browser staged for upload in
+ * this page session are there (the server cannot hand them back - see that module's doc). Anything
+ * else - a non-image, a reload, the cache's eviction cap, a browser that cannot decode the format -
+ * stays the filename chip, which still opens the preview modal's honest fallback.
+ */
+import { useEffect, useState } from 'react';
+import { getAttachmentPreviewSource } from '../hooks/attachment-preview-cache.js';
+import { canCreateObjectUrl, looksLikeImageAttachment } from './AttachmentPreviewModal.hooks.js';
+/** The platform's Blob URLs, or `undefined` where they do not exist (jsdom, non-browser hosts). */
+export function platformObjectUrls() {
+    if (!canCreateObjectUrl())
+        return undefined;
+    return { create: (file) => URL.createObjectURL(file), revoke: (url) => URL.revokeObjectURL(url) };
+}
+/**
+ * The cached file to draw as a thumbnail, or `undefined` when the attachment should stay a chip:
+ * not an image (same `looksLikeImageAttachment` rule the preview modal uses), or no bytes cached.
+ * @complexity O(1).
+ */
+export function sentAttachmentThumbnailSource({ attachment }, { getSource = getAttachmentPreviewSource } = {}) {
+    if (!looksLikeImageAttachment({ attachment }))
+        return undefined;
+    return getSource({ path: attachment.path });
+}
+/**
+ * Creates the thumbnail's object URL on mount and revokes it on unmount (an effect, not `useMemo`,
+ * so a Strict Mode double render cannot leak a URL - same reasoning as the preview modal's hook).
+ * @param input.hostRendered - True when a host `renderAttachment` draws this chip.
+ * @param options.objectUrls - Blob-URL port; defaults to the platform's, `undefined` where absent.
+ * @param options.getSource - Preview-cache lookup; defaults to the shared cache.
+ * @complexity O(1) per attachment.
+ */
+export function useSentAttachmentThumbnail({ attachment, hostRendered = false }, { objectUrls = platformObjectUrls(), getSource = getAttachmentPreviewSource } = {}) {
+    const [failed, setFailed] = useState(false);
+    const [thumbnailUrl, setThumbnailUrl] = useState(undefined);
+    // A host `renderAttachment` owns the chip's content, so no thumbnail URL is made for it.
+    const source = failed || hostRendered || !objectUrls ? undefined : sentAttachmentThumbnailSource({ attachment }, { getSource });
+    useEffect(() => {
+        if (!source || !objectUrls) {
+            setThumbnailUrl(undefined);
+            return undefined;
+        }
+        const url = objectUrls.create(source);
+        setThumbnailUrl(url);
+        return () => objectUrls.revoke(url);
+        // `objectUrls` is a fresh object per render by default; the file is what the URL is made from.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [source]);
+    return { thumbnailUrl, onThumbnailError: () => setFailed(true) };
+}
+//# sourceMappingURL=SentAttachment.hooks.js.map

package/dist/react/components/SentAttachment.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useT } from '../hooks/context.js';
+import { useSentAttachmentThumbnail } from './SentAttachment.hooks.js';
+/**
+ * One attachment on a sent user message: a small image thumbnail when this browser still holds the
+ * image's bytes, otherwise the filename chip. Either way a click opens the preview modal, and the
+ * accessible name stays "Open {name}".
+ */
+export function SentAttachmentButton({ attachment, onOpen, renderAttachment, objectUrls }) {
+    const t = useT();
+    const { thumbnailUrl, onThumbnailError } = useSentAttachmentThumbnail({ attachment, hostRendered: renderAttachment !== undefined }, objectUrls === undefined ? {} : { objectUrls });
+    return (_jsx("button", { type: "button", className: `jini-message-attachment-chip${thumbnailUrl ? ' is-thumbnail' : ''}`, onClick: () => onOpen(attachment), title: t('Open {name}', { name: attachment.name }), "aria-label": t('Open {name}', { name: attachment.name }), children: renderAttachment ? (renderAttachment(attachment)) : thumbnailUrl ? (_jsx("img", { className: "jini-message-attachment-thumb", src: thumbnailUrl, alt: "", onError: onThumbnailError })) : (attachment.name) }));
+}
+//# sourceMappingURL=SentAttachment.js.map

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { ToolDisplayRow } from '../tool-call-display.js';
+/**
+ * One turn's tool cards folded into a single line ("Used 3 tools ▸") that opens on click — the
+ * `toolCallDisplay: 'collapsed'` layout. Props in, JSX out; state and copy are in
+ * `useToolCallGroup`.
+ */
+export declare function ToolCallGroup<Row extends ToolDisplayRow>({ rows, renderRow }: {
+    rows: readonly Row[];
+    renderRow: (row: Row) => ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ToolCallGroup.d.ts.map

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

@@ -0,0 +1,20 @@
+import { type ToolDisplayRow } from '../tool-call-display.js';
+export interface ToolCallGroupState {
+    /** Whether the turn's tool cards are showing under the line. Starts closed. */
+    open: boolean;
+    toggle: () => void;
+    /** "Used 3 tools", "Used 3 tools · 1 failed", or "Running Bash…" while a tool runs. */
+    label: string;
+    running: boolean;
+    failed: boolean;
+}
+/**
+ * State and copy for one collapsed tool line (`toolCallDisplay: 'collapsed'`). The open flag lives
+ * in the line's own component, so it lasts as long as the message stays in the transcript — the
+ * whole time its conversation is open — and resets when the pane remounts.
+ * @complexity O(n) in rows, for the summary.
+ */
+export declare function useToolCallGroup({ rows }: {
+    rows: readonly ToolDisplayRow[];
+}, _optional?: {}): ToolCallGroupState;
+//# sourceMappingURL=ToolCallGroup.hooks.d.ts.map

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

@@ -0,0 +1,23 @@
+import { useCallback, useState } from 'react';
+import { useT } from '../hooks/context.js';
+import { summarizeToolGroup, toolGroupLabel } from '../tool-call-display.js';
+/**
+ * State and copy for one collapsed tool line (`toolCallDisplay: 'collapsed'`). The open flag lives
+ * in the line's own component, so it lasts as long as the message stays in the transcript — the
+ * whole time its conversation is open — and resets when the pane remounts.
+ * @complexity O(n) in rows, for the summary.
+ */
+export function useToolCallGroup({ rows }, _optional = {}) {
+    const t = useT();
+    const [open, setOpen] = useState(false);
+    const toggle = useCallback(() => setOpen((value) => !value), []);
+    const summary = summarizeToolGroup({ rows });
+    return {
+        open,
+        toggle,
+        label: toolGroupLabel({ summary, t }),
+        running: summary.kind === 'running',
+        failed: summary.kind === 'done' && summary.failed > 0,
+    };
+}
+//# sourceMappingURL=ToolCallGroup.hooks.js.map

package/dist/react/components/ToolCallGroup.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useToolCallGroup } from './ToolCallGroup.hooks.js';
+import { Icon } from './Icon.js';
+/**
+ * One turn's tool cards folded into a single line ("Used 3 tools ▸") that opens on click — the
+ * `toolCallDisplay: 'collapsed'` layout. Props in, JSX out; state and copy are in
+ * `useToolCallGroup`.
+ */
+export function ToolCallGroup({ rows, renderRow }) {
+    const group = useToolCallGroup({ rows });
+    return (_jsxs("div", { className: "jini-tool-group", "data-failed": group.failed ? 'true' : undefined, children: [_jsxs("button", { type: "button", className: "jini-tool-group__toggle", "aria-expanded": group.open, onClick: group.toggle, children: [_jsx("span", { className: `jini-tool-group__label${group.running ? ' shimmer-text' : ''}`, children: group.label }), _jsx(Icon, { name: group.open ? 'chevron-down' : 'chevron-right', size: 12 })] }), group.open ? _jsx("div", { className: "jini-message-tools", children: rows.map(renderRow) }) : null] }));
+}
+//# sourceMappingURL=ToolCallGroup.js.map

package/dist/react/components/ToolCard.js

@@ -21,7 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * generic rendering for it.
  */
 import { useId, useState } from 'react';
-import { describeToolCallDetail, formatToolOutputForDisplay, isDelegatedWrapperToolName, isTodoWriteToolName, parseTodoWriteInput, toRenderProps } from '../../core/index.js';
+import { describeCollapsedToolCall, describeToolCallDetail, formatToolOutputForDisplay, isDelegatedWrapperToolName, isTodoWriteToolName, parseTodoWriteInput, toRenderProps } from '../../core/index.js';
 import { useT } from '../hooks/context.js';
 import { getToolRenderer } from '../tool-renderer-registry.js';
 import { Icon } from './Icon.js';
@@ -139,19 +139,19 @@ function DelegatedToolCard({ name, input, result, runStreaming, runSucceeded })
     const args = isDelegatedWrapperToolName({ name: name }) ? wrapper.input : input;
     const target = primaryTarget(args);
     const isRunning = runStreaming && !result;
-    return (_jsx(ExpandableCard, { className: "op-jini-tool", head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsxs("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: [t('Tool call'), " \u00B7 ", humanizeToolId(toolId)] }), target ? _jsx("span", { className: "op-meta", children: target }) : null] }), after: _jsx(FileErrorDetail, { result: result }), children: _jsx(ToolCallDetail, { input: args ?? {}, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded, children: _jsx(ToolResultMedia, { result: result }) }) }));
+    return (_jsx(ExpandableCard, { className: "op-jini-tool", call: { input: args ?? {}, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }, head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsxs("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: [t('Tool call'), " \u00B7 ", humanizeToolId(toolId)] }), target ? _jsx("span", { className: "op-meta", children: target }) : null] }), after: _jsx(FileErrorDetail, { result: result }), children: _jsx(ToolCallDetail, { input: args ?? {}, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded, children: _jsx(ToolResultMedia, { result: result }) }) }));
 }
 function SearchToolsCard({ input, result, runStreaming, runSucceeded }) {
     const t = useT();
     const obj = (input ?? {});
     const isRunning = runStreaming && !result;
-    return (_jsx(ExpandableCard, { className: "op-jini-tool", head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Search tools') }), obj.query ? _jsx("span", { className: "op-meta", children: obj.query }) : null] }), after: _jsx(FileErrorDetail, { result: result }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
+    return (_jsx(ExpandableCard, { className: "op-jini-tool", call: { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }, head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Search tools') }), obj.query ? _jsx("span", { className: "op-meta", children: obj.query }) : null] }), after: _jsx(FileErrorDetail, { result: result }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
 }
 function DescribeToolCard({ input, result, runStreaming, runSucceeded }) {
     const t = useT();
     const obj = (input ?? {});
     const isRunning = runStreaming && !result;
-    return (_jsx(ExpandableCard, { className: "op-jini-tool", head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Describe tool') }), obj.id ? _jsx("span", { className: "op-meta", children: obj.id }) : null] }), after: _jsx(FileErrorDetail, { result: result }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
+    return (_jsx(ExpandableCard, { className: "op-jini-tool", call: { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }, head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Describe tool') }), obj.id ? _jsx("span", { className: "op-meta", children: obj.id }) : null] }), after: _jsx(FileErrorDetail, { result: result }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
 }
 function OpenInTabButton({ filePath, ctx }) {
     const t = useT();
@@ -177,7 +177,7 @@ function FileWriteCard({ input, result, runStreaming, runSucceeded, ctx }) {
     const baseName = file.split('/').pop();
     const lines = typeof obj.content === 'string' ? obj.content.split('\n').length : null;
     const isRunning = runStreaming && !result;
-    return (_jsxs(ExpandableCard, { className: "op-file", head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Write') }), _jsxs("span", { className: "op-meta", children: [baseName, lines !== null ? ` · ${t('{n} lines', { n: lines })}` : ''] })] }), after: _jsx(FileErrorDetail, { result: result }), children: [_jsxs("div", { className: "op-card-detail op-card-file-detail", children: [_jsx("code", { className: "op-path", children: file }), _jsx(OpenInTabButton, { filePath: file, ctx: ctx })] }), _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded })] }));
+    return (_jsxs(ExpandableCard, { className: "op-file", call: { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }, head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Write') }), _jsxs("span", { className: "op-meta", children: [baseName, lines !== null ? ` · ${t('{n} lines', { n: lines })}` : ''] })] }), after: _jsx(FileErrorDetail, { result: result }), children: [_jsxs("div", { className: "op-card-detail op-card-file-detail", children: [_jsx("code", { className: "op-path", children: file }), _jsx(OpenInTabButton, { filePath: file, ctx: ctx })] }), _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded })] }));
 }
 function FileEditCard({ input, result, runStreaming, runSucceeded, ctx }) {
     const t = useT();
@@ -187,7 +187,7 @@ function FileEditCard({ input, result, runStreaming, runSucceeded, ctx }) {
     const baseName = file.split('/').pop();
     const editCount = Array.isArray(obj.edits) ? obj.edits.length : 1;
     const isRunning = runStreaming && !result;
-    return (_jsxs(ExpandableCard, { className: "op-file", head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Edit') }), _jsxs("span", { className: "op-meta", children: [baseName, " \u00B7 ", editCount, " ", editCount === 1 ? t('change') : t('changes')] })] }), after: _jsx(FileErrorDetail, { result: result }), children: [_jsxs("div", { className: "op-card-detail op-card-file-detail", children: [_jsx("code", { className: "op-path", children: file }), _jsx(OpenInTabButton, { filePath: file, ctx: ctx })] }), _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded })] }));
+    return (_jsxs(ExpandableCard, { className: "op-file", call: { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }, head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Edit') }), _jsxs("span", { className: "op-meta", children: [baseName, " \u00B7 ", editCount, " ", editCount === 1 ? t('change') : t('changes')] })] }), after: _jsx(FileErrorDetail, { result: result }), children: [_jsxs("div", { className: "op-card-detail op-card-file-detail", children: [_jsx("code", { className: "op-path", children: file }), _jsx(OpenInTabButton, { filePath: file, ctx: ctx })] }), _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded })] }));
 }
 function FileReadCard({ input, result, runStreaming, runSucceeded, ctx }) {
     const t = useT();
@@ -196,7 +196,7 @@ function FileReadCard({ input, result, runStreaming, runSucceeded, ctx }) {
     // See OpenInTabButton's baseName comment: `.split('/').pop()` is never undefined.
     const baseName = file.split('/').pop();
     const isRunning = runStreaming && !result;
-    return (_jsxs(ExpandableCard, { className: "op-file", head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Read') }), _jsx("span", { className: "op-meta", children: baseName })] }), after: _jsx(FileErrorDetail, { result: result }), children: [_jsxs("div", { className: "op-card-detail op-card-file-detail", children: [_jsx("code", { className: "op-path", children: file }), _jsx(OpenInTabButton, { filePath: file, ctx: ctx })] }), _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded })] }));
+    return (_jsxs(ExpandableCard, { className: "op-file", call: { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }, head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Read') }), _jsx("span", { className: "op-meta", children: baseName })] }), after: _jsx(FileErrorDetail, { result: result }), children: [_jsxs("div", { className: "op-card-detail op-card-file-detail", children: [_jsx("code", { className: "op-path", children: file }), _jsx(OpenInTabButton, { filePath: file, ctx: ctx })] }), _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded })] }));
 }
 function BashCard({ input, result, runStreaming, runSucceeded }) {
     const t = useT();
@@ -204,43 +204,51 @@ function BashCard({ input, result, runStreaming, runSucceeded }) {
     const command = obj.command ?? '';
     const desc = obj.description;
     const isRunning = runStreaming && !result;
-    return (_jsx(ExpandableCard, { className: "op-bash", head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Bash') }), desc ? _jsx("span", { className: "op-meta op-desc", children: desc }) : null] }), children: _jsxs("div", { className: "op-card-detail", children: [_jsx("pre", { className: "op-command", children: truncate(command, 400) }), result?.content ? _jsx("pre", { className: "op-output", children: truncate(formatToolOutputForDisplay({ text: result.content }), 4000) }) : null] }) }));
+    return (_jsx(ExpandableCard, { className: "op-bash", call: { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }, head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: `op-title${isRunning ? ' shimmer-text' : ''}`, children: t('Bash') }), desc ? _jsx("span", { className: "op-meta op-desc", children: desc }) : null] }), children: _jsxs("div", { className: "op-card-detail", children: [_jsx("pre", { className: "op-command", children: truncate(command, 400) }), result?.content ? _jsx("pre", { className: "op-output", children: truncate(formatToolOutputForDisplay({ text: result.content }), 4000) }) : null] }) }));
 }
 function GlobCard({ input, result, runStreaming, runSucceeded }) {
     const t = useT();
     const obj = (input ?? {});
-    return (_jsx(ExpandableCard, { className: "op-search", head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: "op-title", children: t('Search files') }), _jsxs("span", { className: "op-meta", children: [obj.pattern ?? '*', obj.path ? ` in ${obj.path}` : ''] })] }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
+    return (_jsx(ExpandableCard, { className: "op-search", call: { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }, head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: "op-title", children: t('Search files') }), _jsxs("span", { className: "op-meta", children: [obj.pattern ?? '*', obj.path ? ` in ${obj.path}` : ''] })] }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
 }
 function GrepCard({ input, result, runStreaming, runSucceeded }) {
     const t = useT();
     const obj = (input ?? {});
-    return (_jsx(ExpandableCard, { className: "op-search", head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: "op-title", children: t('Search content') }), _jsxs("span", { className: "op-meta", children: [obj.pattern ?? '', obj.path ? ` in ${obj.path}` : ''] })] }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
+    return (_jsx(ExpandableCard, { className: "op-search", call: { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }, head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: "op-title", children: t('Search content') }), _jsxs("span", { className: "op-meta", children: [obj.pattern ?? '', obj.path ? ` in ${obj.path}` : ''] })] }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
 }
 function WebFetchCard({ input, result, runStreaming, runSucceeded }) {
     const t = useT();
     const obj = (input ?? {});
-    return (_jsx(ExpandableCard, { className: "op-web", head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: "op-title", children: t('Fetch') }), _jsx("span", { className: "op-meta", children: obj.url ?? '' })] }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
+    return (_jsx(ExpandableCard, { className: "op-web", call: { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }, head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: "op-title", children: t('Fetch') }), _jsx("span", { className: "op-meta", children: obj.url ?? '' })] }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
 }
 function WebSearchCard({ input, result, runStreaming, runSucceeded }) {
     const t = useT();
     const obj = (input ?? {});
-    return (_jsx(ExpandableCard, { className: "op-web", head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: "op-title", children: t('Search') }), _jsx("span", { className: "op-meta", children: obj.query ?? '' })] }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
+    return (_jsx(ExpandableCard, { className: "op-web", call: { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }, head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: "op-title", children: t('Search') }), _jsx("span", { className: "op-meta", children: obj.query ?? '' })] }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
 }
 /** Any tool this package has no family card for — an MCP tool, or a card tool such as `assistant_ask_choice` whose form renders elsewhere in the turn. The row still opens to the full call. */
 function GenericCard({ name, input, result, runStreaming, runSucceeded }) {
     const summary = describeInput(input);
-    return (_jsx(ExpandableCard, { className: "op-generic", head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: "op-title", children: name }), summary ? _jsx("span", { className: "op-meta", children: truncate(summary, 200) }) : null] }), after: _jsx(ToolResultMedia, { result: result }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
+    return (_jsx(ExpandableCard, { className: "op-generic", call: { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }, head: _jsxs(_Fragment, { children: [_jsx(ResultBadge, { result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }), _jsx("span", { className: "op-title", children: name }), summary ? _jsx("span", { className: "op-meta", children: truncate(summary, 200) }) : null] }), after: _jsx(ToolResultMedia, { result: result }), children: _jsx(ToolCallDetail, { input: input, result: result, runStreaming: runStreaming, runSucceeded: runSucceeded }) }));
 }
 /**
  * The one row shell every card shares: a real `<button>` head (Enter/Space toggle it) that reports
- * `aria-expanded` and points `aria-controls` at its panel, and a panel that stays mounted while
- * collapsed — a `page.*` DOM reader sees the detail through `textContent` without anyone clicking.
+ * `aria-expanded` and points `aria-controls` at its panel. The panel's `children` mount only while
+ * open: a long chat mounts hundreds of collapsed rows, and keeping every full detail mounted made a
+ * 38-message chat carry ~13k DOM nodes and 3.45 MB of hidden text. Collapsed, the panel holds one
+ * hidden node with the call's capped gist instead, so a `page.*` DOM reader still sees what was
+ * called and what came back through `textContent` without anyone clicking.
  * `after` renders outside the panel, for content that must stay visible collapsed (an error, media).
  */
-function ExpandableCard({ className, head, after, children }) {
+function ExpandableCard({ className, head, after, call, children }) {
     const [open, setOpen] = useState(false);
     const panelId = useId();
-    return (_jsxs("div", { className: `op-card ${className}`, children: [_jsxs("button", { type: "button", className: "op-card-head", "aria-expanded": open, "aria-controls": panelId, onClick: () => setOpen((o) => !o), children: [head, _jsx("span", { className: "op-expand-chev", "aria-hidden": true, children: _jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right', size: 11 }) })] }), _jsx("div", { id: panelId, className: `accordion-collapsible${open ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: children }) }), after] }));
+    return (_jsxs("div", { className: `op-card ${className}`, children: [_jsxs("button", { type: "button", className: "op-card-head", "aria-expanded": open, "aria-controls": panelId, onClick: () => setOpen((o) => !o), children: [head, _jsx("span", { className: "op-expand-chev", "aria-hidden": true, children: _jsx(Icon, { name: open ? 'chevron-down' : 'chevron-right', size: 11 }) })] }), _jsx("div", { id: panelId, className: `accordion-collapsible${open ? ' open' : ''}`, children: open ? _jsx("div", { className: "accordion-collapsible-inner", children: children }) : _jsx(CollapsedReaderText, { call: call }) }), after] }));
+}
+/** The collapsed row's stand-in for its panel — see {@link ExpandableCard} and `describeCollapsedToolCall`. */
+function CollapsedReaderText({ call }) {
+    const text = describeCollapsedToolCall({ input: call.input, result: call.result }, { runStreaming: call.runStreaming, runSucceeded: call.runSucceeded });
+    return _jsx("span", { className: "op-card-reader-text", hidden: true, children: text });
 }
 /** The call's input, its result (or why there is none), and any extra `children` — see `describeToolCallDetail` for the redaction and formatting rules. */
 function ToolCallDetail({ input, result, runStreaming, runSucceeded, children }) {

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

@@ -5,6 +5,7 @@
  * `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 { McpUiToolCallHandler } from '@jini-ai/ui/mcp-ui';
 import type { ExtEventCall } from '../ext-event-renderer-registry.js';
 import type { useT } from '../hooks/context.js';
 type Translate = ReturnType<typeof useT>;
@@ -23,5 +24,25 @@ export declare function closedSurfaceLabel({ t, call, runStreaming, documentsFor
     documentsForUri: number;
     expired: boolean;
 }): string | undefined;
+/**
+ * Whether a View's `tools/call` result is a held-open question's delivery receipt: the host route
+ * answers `{delivered: true}` (HTTP 202) the moment the click reaches the parked tool call. That
+ * call then keeps running the work the answer started, so this receipt — not its later result — is
+ * when the card stops waiting on the person.
+ *
+ * @complexity O(1).
+ */
+export declare function isDeliveredAnswer(result: unknown): boolean;
+/**
+ * Wraps a card's tool executor so a delivered answer is reported once it resolves. The result is
+ * passed through unchanged, and a rejected call reports nothing (the dialog shows its error and can
+ * be answered again).
+ *
+ * @complexity O(1) per call, plus `onToolCall`'s own cost.
+ */
+export declare function reportDeliveredAnswer({ onToolCall, onAnswered }: {
+    onToolCall: McpUiToolCallHandler;
+    onAnswered: () => void;
+}): McpUiToolCallHandler;
 export {};
 //# sourceMappingURL=mcp-ui-surface-state.d.ts.map

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

@@ -30,4 +30,30 @@ function settledLabel(t, call, runStreaming, documentsForUri) {
 export function closedSurfaceLabel({ t, call, runStreaming, documentsForUri, expired }) {
     return settledLabel(t, call, runStreaming, documentsForUri) ?? (expired ? t('This question expired') : undefined);
 }
+/**
+ * Whether a View's `tools/call` result is a held-open question's delivery receipt: the host route
+ * answers `{delivered: true}` (HTTP 202) the moment the click reaches the parked tool call. That
+ * call then keeps running the work the answer started, so this receipt — not its later result — is
+ * when the card stops waiting on the person.
+ *
+ * @complexity O(1).
+ */
+export function isDeliveredAnswer(result) {
+    return typeof result === 'object' && result !== null && result.delivered === true;
+}
+/**
+ * Wraps a card's tool executor so a delivered answer is reported once it resolves. The result is
+ * passed through unchanged, and a rejected call reports nothing (the dialog shows its error and can
+ * be answered again).
+ *
+ * @complexity O(1) per call, plus `onToolCall`'s own cost.
+ */
+export function reportDeliveredAnswer({ onToolCall, onAnswered }) {
+    return async (call) => {
+        const result = await onToolCall(call);
+        if (isDeliveredAnswer(result))
+            onAnswered();
+        return result;
+    };
+}
 //# sourceMappingURL=mcp-ui-surface-state.js.map

package/dist/react/ext-event-renderer-registry.d.ts

@@ -51,6 +51,13 @@ export interface ExtEventRenderProps {
     runId: string | undefined;
     /** See {@link ExtEventCall}. Absent when the group's first event arrived outside any tool call. */
     call?: ExtEventCall;
+    /** Whether this card already reported its answer delivered (see {@link onAnswered}). */
+    answered?: boolean;
+    /**
+     * A card calls this once the person's answer reached the server. Its tool call may stay open for
+     * the work the answer started, and the run must stop reading as "waiting for your answer".
+     */
+    onAnswered?: () => void;
 }
 /**
  * Ext-event render callback. Runs inline during `MessageRow`'s render — hook-free, like

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, redactUserText, onSecretRedacted, onRescanAgents, scanningAgents, daemonOnline, executionMode, apiModeAvailable, onExecutionModeChange, byokRuntime, onByokModelChange, initialDraft, composerHistoryScope, composerHistoryStorage, validateAttachments, deliverTypedAnswer, deliverMidRunMessage, 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, refreshSignal, conversationId, initialSelection, selection: controlledSelection, onSelectionChange, runContext, agentControl, onActivityChange, onMessagesChange, redactUserText, onSecretRedacted, onRescanAgents, scanningAgents, daemonOnline, executionMode, apiModeAvailable, onExecutionModeChange, byokRuntime, onByokModelChange, initialDraft, composerHistoryScope, composerHistoryStorage, validateAttachments, deliverTypedAnswer, deliverMidRunMessage, composerHandle, placeholder, placeholders, suggestions, emptyState, workingDirectory, initialWorkingDirectory, onChangeWorkingDirectory, workingDirectoryAccess, workingDirectoryControlPlacement, projectFileNames, toolCallDisplay, showUsageLine, showThinking, 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

@@ -13,6 +13,8 @@ import { useChatPaneAgentControl } from '../hooks/useChatPaneAgentControl.hooks.
 import { useChatPaneComposerPlaceholder } from '../hooks/useChatPaneComposerPlaceholder.hooks.js';
 import { useChatPaneControlsHeight } from '../hooks/useChatPaneControlsHeight.hooks.js';
 import { useChatPaneNewTabLinks } from '../hooks/useChatPaneNewTabLinks.hooks.js';
+import { useChatPaneSurface } from '../hooks/useChatPaneSurface.hooks.js';
+import { useChatPaneSuggestion } from '../hooks/useChatPaneSuggestion.hooks.js';
 import { useChatPaneFileDrop, } from '../hooks/useChatPaneFileDrop.hooks.js';
 import { useChatPaneRuntimeInventory, } from '../hooks/useChatPaneRuntimeInventory.hooks.js';
 import { CHAT_PANE_STYLES } from '../styles.js';
@@ -180,8 +182,9 @@ 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, redactUserText, onSecretRedacted, onRescanAgents, scanningAgents = false, daemonOnline = true, executionMode = 'local', apiModeAvailable = false, onExecutionModeChange, byokRuntime, onByokModelChange, initialDraft, composerHistoryScope, composerHistoryStorage, validateAttachments, deliverTypedAnswer, deliverMidRunMessage, 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, refreshSignal, conversationId, initialSelection, selection: controlledSelection, onSelectionChange, runContext, agentControl, onActivityChange, onMessagesChange, redactUserText, onSecretRedacted, onRescanAgents, scanningAgents = false, daemonOnline = true, executionMode = 'local', apiModeAvailable = false, onExecutionModeChange, byokRuntime, onByokModelChange, initialDraft, composerHistoryScope, composerHistoryStorage, validateAttachments, deliverTypedAnswer, deliverMidRunMessage, composerHandle, placeholder, placeholders, suggestions = [], emptyState, workingDirectory, initialWorkingDirectory, onChangeWorkingDirectory, workingDirectoryAccess, workingDirectoryControlPlacement = 'below', projectFileNames, toolCallDisplay = 'show', showUsageLine = true, showThinking = false, uploadAttachments, attachmentAccept, disabled = false, runtimePickerPlacement = 'up', composerSlots, header, leadingAccessory, footer, className, style, }) {
     const t = useT();
+    const surface = useChatPaneSurface({ variant, composerSlots, workingDirectoryControlPlacement, uploadAttachments });
     const composerPlaceholder = useChatPaneComposerPlaceholder({ placeholder: placeholder, placeholders: placeholders });
     const inventory = useChatPaneRuntimeInventory(definedProps({ source: {
             access: runtimeAccess,
@@ -197,6 +200,7 @@ export function ChatPane({ transport, agents: injectedAgents = EMPTY_AGENTS, run
             transport,
             agents: runtimeView.agents,
             initialMessages,
+            refreshSignal,
             conversationId,
             initialSelection,
             selection: controlledSelection,
@@ -254,7 +258,7 @@ export function ChatPane({ transport, agents: injectedAgents = EMPTY_AGENTS, run
     // the provider directly over HTTP and never touches the CLI inventory.
     const unavailable = pane.selectedAgent === undefined && !apiModeConfigured;
     const fileDrop = useChatPaneFileDrop({
-        enabled: uploadAttachments !== undefined
+        enabled: surface.uploadAttachments !== undefined
             && !disabled
             && !unavailable
             && !pane.conversation.isStreaming
@@ -265,17 +269,18 @@ export function ChatPane({ transport, agents: injectedAgents = EMPTY_AGENTS, run
     // `ChatPaneProps.composerSlots`'s doc), so the two explicit keys below are never overwriting a
     // caller-supplied value — they are the ONLY source for both.
     const slots = definedProps({ source: {
-            ...composerSlots,
-            leadingAccessories: leadingAccessory,
-            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 } }) })),
+            ...surface.composerSlots,
+            leadingAccessories: surface.embed ? undefined : leadingAccessory,
+            footerAccessories: surface.embed ? undefined : (_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();
+    const selectSuggestion = useChatPaneSuggestion({ rootRef, setDraft: pane.composer.setDraft });
     const openLinkInNewTab = useChatPaneNewTabLinks();
     // `MessageList` is memoized so a composer keystroke does not re-render the transcript; these two
     // props would otherwise be fresh objects on every render and defeat it.
     const { queuedPrompt, cancelQueued } = pane;
     const pendingPrompt = useMemo(() => (queuedPrompt === null ? null : { text: queuedPrompt, onCancel: cancelQueued }), [queuedPrompt, cancelQueued]);
     const projectFileNameSet = useMemo(() => (projectFileNames === undefined ? undefined : new Set(projectFileNames)), [projectFileNames]);
-    return (_jsxs("section", { className: chatPaneClassName(variant, className), style: style, "data-activity": pane.activity, ref: rootRef, onClickCapture: openLinkInNewTab, 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: pendingPrompt, ...(projectFileNameSet === undefined ? {} : { projectFileNames: projectFileNameSet }) }), _jsxs("div", { className: "jini-chat-pane__controls", ref: controlsRef, children: [_jsx(ChatPaneSuggestionsRow, { suggestions: suggestions, onSelect: pane.composer.setDraft, t: t }), pane.secretRedacted ? _jsx("div", { className: "jini-chat-pane__notice", role: "status", children: t(SECRET_REDACTED_NOTICE) }) : null, _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] }));
+    return (_jsxs("section", { className: chatPaneClassName(variant, className), style: style, "data-activity": pane.activity, ref: rootRef, onClickCapture: openLinkInNewTab, 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: [pane.conversation.messages.length === 0 && emptyState ? (_jsxs("div", { className: "jini-message-list jini-message-list--empty", children: [emptyState, surface.embed && _jsx(ChatPaneSuggestionsRow, { suggestions: suggestions, onSelect: selectSuggestion, t: t })] })) : (_jsx(MessageList, { messages: pane.conversation.messages, isStreaming: pane.conversation.isStreaming, scrollIntent: pane.conversation.scrollIntent, onScrolled: pane.conversation.acknowledgeScroll, pendingPrompt: pendingPrompt, toolCallDisplay: toolCallDisplay, showUsageLine: showUsageLine, showThinking: showThinking, ...(projectFileNameSet === undefined ? {} : { projectFileNames: projectFileNameSet }) })), _jsxs("div", { className: "jini-chat-pane__controls", ref: controlsRef, children: [(!surface.embed || (pane.conversation.messages.length === 0 && !emptyState)) && (_jsx(ChatPaneSuggestionsRow, { suggestions: suggestions, onSelect: selectSuggestion, t: t })), pane.secretRedacted ? _jsx("div", { className: "jini-chat-pane__notice", role: "status", children: t(SECRET_REDACTED_NOTICE) }) : null, _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: surface.uploadAttachments, pane: pane, disabled: disabled, unavailable: unavailable, placeholder: composerPlaceholder, slots: slots, attachmentAccept: attachmentAccept, workingDirectoryAccess: workingDirectoryAccess, workingDirectoryControlPlacement: surface.workingDirectoryControlPlacement, t: t })] })] }), footer] }));
 }
 //# sourceMappingURL=ChatPane.js.map