@jini-ai/chat 0.5.6 → 0.5.8

package/dist/react/components/MessageRow.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { terminalMessageNotice, continuingRunNotice } from '../../core/durable-projection.js';
+import { usageLayout, usageLineMeetsActions, useMessageUsage, useUsageSummary } from './MessageRow.usage.js';
 /**
  * @module MessageRow
  *
@@ -50,27 +51,25 @@ import { terminalMessageNotice, continuingRunNotice } from '../../core/durable-p
  * not appear until the whole message is done, not merely until its current
  * chunk stopped arriving.
  */
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 import { isAwaitingAnswer, isTerminalRunStatus, splitOnQuestionForms, stripArtifact } from '../../core/index.js';
 import { useToolTimeline } from '../hooks/useToolTimeline.js';
 import { useExtEventGroups } from '../hooks/useExtEventGroups.js';
 import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js';
 import { useRunActivity } from '../hooks/useRunActivity.js';
+import { useAnsweredCards } from '../hooks/useAnsweredCards.js';
 import { interleaveMessageBlocks } from '../message-blocks.js';
 import { useT } from '../hooks/context.js';
 import { extEventSlot, getExtEventRenderer } from '../ext-event-renderer-registry.js';
 import { ExtEventErrorBoundary } from './ExtEventErrorBoundary.js';
 import { AttachmentPreviewModal } from './AttachmentPreviewModal.js';
+import { SentAttachmentButton } from './SentAttachment.js';
 import { Icon } from './Icon.js';
 import { Markdown } from './Markdown.js';
 import { ToolCard } from './ToolCard.js';
 import { QuestionForm } from './QuestionForm.js';
-function formatDuration(ms) {
-    const totalSeconds = Math.round(ms / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-    return minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
-}
+import { ToolCallGroup } from './ToolCallGroup.js';
+import { applyToolCallDisplay, toolRowsForDisplay } from '../tool-call-display.js';
 /**
  * True while an assistant message is still fully pending — no visible text
  * and no tool rows have arrived yet. Shared by the "Thinking…" placeholder
@@ -107,21 +106,17 @@ function isPendingWithNoContent(message, visibleContent, toolRowCount) {
 function isRunInProgress(runStatus) {
     return runStatus !== undefined && !isTerminalRunStatus({ status: runStatus });
 }
-/** One "Done · 6m 29s · 2612 out · $0.4028" summary line, from the run's own `kind:'usage'` event — never estimated client-side. Renders only the fields the event actually carries, so a transport that supplies partial usage data degrades gracefully instead of showing fabricated zeros. */
-function UsageSummary({ usage }) {
+/** One "Done · 6m 29s · $0.41 · total $2.50" line from reported usage, never estimated (the total is
+ * left off when `showTotal` is false). Partial usage stays partial; output tokens are available to
+ * assistive technology and in the tooltip. */
+function UsageSummary({ usage, showTotal }) {
     const t = useT();
-    const parts = [];
-    if (usage.durationMs !== undefined)
-        parts.push(formatDuration(usage.durationMs));
-    if (usage.outputTokens !== undefined)
-        parts.push(t('{n} out', { n: usage.outputTokens }));
-    if (usage.costUsd !== undefined)
-        parts.push(`$${usage.costUsd.toFixed(4)}`);
-    if (parts.length === 0)
+    const { text, title, ariaLabel } = useUsageSummary({ usage }, { showTotal });
+    if (!text)
         return null;
-    return (_jsxs("div", { className: "jini-message-usage", children: [_jsx("span", { className: "jini-message-usage-dot", "aria-hidden": true, children: "\u25CF" }), t('Done'), " \u00B7 ", parts.join(' · ')] }));
+    return (_jsxs("div", { className: "jini-message-usage", title: title, role: "note", "aria-label": ariaLabel, children: [_jsx("span", { className: "jini-message-usage-dot", "aria-hidden": true, children: "\u25CF" }), t('Done'), " \u00B7 ", text] }));
 }
-function messageBlocks({ visibleContent, message, rows }, _optional = {}) {
+function messageBlocks({ visibleContent, message, rows }, { toolCallDisplay = 'show', includeThinking = false } = {}) {
     // Interleaving is skipped outright when an artifact was stripped. `stripArtifact` operates on the
     // whole string and trims, so the surviving text no longer lines up with the per-run offsets the
     // event walk produces, and an artifact block could legitimately span a tool call. Rather than
@@ -129,14 +124,22 @@ function messageBlocks({ visibleContent, message, rows }, _optional = {}) {
     // messages are dominated by the artifact panel anyway, so the ordering matters least there.
     if (visibleContent !== message.content)
         return null;
-    return interleaveMessageBlocks({ events: message.events, content: message.content, rows }, { slotOf: (ev) => extEventSlot({ name: ev.name, data: ev.data }) });
+    const blocks = interleaveMessageBlocks({ events: message.events, content: message.content, rows }, { slotOf: (ev) => extEventSlot({ name: ev.name, data: ev.data }), includeThinking });
+    return blocks ? applyToolCallDisplay({ blocks, mode: toolCallDisplay }) : null;
+}
+/** The model's reasoning, folded under a "Thinking" summary so it never crowds the answer. */
+function ThinkingBlock({ text }) {
+    const t = useT();
+    if (!text.trim())
+        return null;
+    return (_jsxs("details", { className: "jini-message-thinking", children: [_jsx("summary", { children: t('Thinking') }), _jsx("div", { className: "jini-message-thinking__text", children: text })] }));
 }
-function messageAwaitingAnswer({ runStreaming, runInProgress, events }, _optional = {}) {
-    return runStreaming === true && runInProgress && isAwaitingAnswer({ events });
+function messageAwaitingAnswer({ runStreaming, runInProgress, events }, { isAnsweredCard } = {}) {
+    return runStreaming === true && runInProgress && isAwaitingAnswer({ events }, { isAnsweredCard });
 }
-function AssistantMessageFooter({ message, usageEvent, terminalNotice, pending, runInProgress, runStreaming, visibleContent }, _optional = {}) {
+function AssistantMessageFooter({ message, usageEvent, showUsageTotal, terminalNotice, pending, runInProgress, runStreaming, visibleContent, isAnsweredCard }, _optional = {}) {
     const t = useT();
-    return _jsxs(_Fragment, { children: [usageEvent ? _jsx(UsageSummary, { usage: usageEvent }) : null, terminalNotice ? _jsx("div", { className: "jini-message-error", role: "status", children: t(terminalNotice) }) : null, !pending && !runInProgress ? (_jsx("div", { className: "jini-message-actions jini-message-actions--assistant", children: _jsx(CopyMessageButton, { text: visibleContent, label: t('Copy message') }) })) : null, runInProgress ? _jsx(RunActivityLine, { events: message.events, active: pending || (runStreaming === true && runInProgress) }) : null] });
+    return _jsxs(_Fragment, { children: [usageEvent ? _jsx(UsageSummary, { usage: usageEvent, showTotal: showUsageTotal }) : null, terminalNotice ? _jsx("div", { className: "jini-message-error", role: "status", children: t(terminalNotice) }) : null, !pending && !runInProgress ? (_jsx("div", { className: "jini-message-actions jini-message-actions--assistant", children: _jsx(CopyMessageButton, { text: visibleContent, label: t('Copy message') }) })) : null, runInProgress ? _jsx(RunActivityLine, { events: message.events, active: pending || (runStreaming === true && runInProgress), isAnsweredCard: isAnsweredCard }) : null] });
 }
 /**
  * Quiet, icon-only copy affordance shared by the user- and assistant-message
@@ -154,26 +157,39 @@ function CopyMessageButton({ text, label }) {
                     void copy(text);
                 }, children: _jsx(Icon, { name: copied ? 'check' : 'copy' }) }), _jsx("span", { className: "jini-message-copy-status", "aria-live": "polite", children: copied ? t('Copied to clipboard') : '' })] }));
 }
-export function MessageRow({ message, runStreaming = false, runSucceeded = false, questionFormInteractive = false, questionFormSubmittedAnswers, onQuestionFormSubmit, projectFileNames, onRequestOpenFile, renderAttachment, }) {
+/**
+ * Memoized so a transcript re-render (a streaming update to the newest message, or a parent that
+ * re-renders per composer keystroke) only re-renders rows whose props actually changed. Messages
+ * are replaced, never mutated, so identity is a sound change signal.
+ */
+export const MessageRow = memo(function MessageRow({ message, usageSummary, showUsageTotal = true, showUsageLine = true, toolCallDisplay = 'show', showThinking = false, runStreaming = false, runSucceeded = false, questionFormInteractive = false, questionFormSubmittedAnswers, onQuestionFormSubmit, projectFileNames, onRequestOpenFile, renderAttachment, }) {
     const t = useT();
+    const messageUsage = useMessageUsage({ message, ...(usageSummary === undefined ? {} : { summary: usageSummary }) });
     const timeline = useToolTimeline({ events: message.events }, { runStreaming, runSucceeded });
     const extGroups = useExtEventGroups({ events: message.events }, { slotOf: (name, data) => extEventSlot({ name, data }) });
+    const answeredCards = useAnsweredCards({ slotOf: extEventSlot });
     // Which attachment chip (if any) this row's preview modal is open for. Row-local, not
     // module-level: two attachments in the same message can never be "open" at once, but two
     // different messages opening their own attachments independently is fine and expected.
     const [openAttachment, setOpenAttachment] = useState(null);
     if (message.role === 'user') {
-        return (_jsxs("div", { className: "jini-message jini-message-user", "data-message-id": message.id, "data-agent-element": `chat-message-${message.id}`, "data-agent-role": "region", "data-agent-label": "A message from the user", children: [message.attachments && message.attachments.length > 0 ? (_jsx("div", { className: "jini-message-attachments", children: message.attachments.map((a) => (_jsx("button", { type: "button", className: "jini-message-attachment-chip", onClick: () => setOpenAttachment(a), title: t('Open {name}', { name: a.name }), "aria-label": t('Open {name}', { name: a.name }), children: renderAttachment ? renderAttachment(a) : a.name }, a.path))) })) : null, _jsx("div", { className: "jini-message-content", children: message.content }), _jsx("div", { className: "jini-message-actions jini-message-actions--user", children: _jsx(CopyMessageButton, { text: message.content, label: t('Copy message') }) }), openAttachment ? (_jsx(AttachmentPreviewModal, { attachment: openAttachment, onClose: () => setOpenAttachment(null) })) : null] }));
+        return (_jsxs("div", { className: "jini-message jini-message-user", "data-message-id": message.id, "data-agent-element": `chat-message-${message.id}`, "data-agent-role": "region", "data-agent-label": "A message from the user", children: [message.attachments && message.attachments.length > 0 ? (_jsx("div", { className: "jini-message-attachments", children: message.attachments.map((a) => (_jsx(SentAttachmentButton, { attachment: a, onOpen: setOpenAttachment, renderAttachment: renderAttachment }, a.path))) })) : null, _jsx("div", { className: "jini-message-content", children: message.content }), _jsx("div", { className: "jini-message-actions jini-message-actions--user", children: _jsx(CopyMessageButton, { text: message.content, label: t('Copy message') }) }), openAttachment ? (_jsx(AttachmentPreviewModal, { attachment: openAttachment, onClose: () => setOpenAttachment(null) })) : null] }));
     }
     const terminalNotice = terminalMessageNotice({ message }, {});
     const visibleContent = stripArtifact({ content: message.content });
     const segments = splitOnQuestionForms({ input: visibleContent });
-    const usageEvent = message.events?.filter((ev) => ev.kind === 'usage').pop();
-    const blocks = messageBlocks({ visibleContent, message, rows: timeline.rows }, {});
+    const blocks = messageBlocks({ visibleContent, message, rows: timeline.rows }, { toolCallDisplay, includeThinking: showThinking });
     const pending = isPendingWithNoContent(message, visibleContent, timeline.rows.length);
     const runInProgress = isRunInProgress(message.runStatus);
-    const awaitingAnswer = messageAwaitingAnswer({ runStreaming, runInProgress, events: message.events }, {});
+    const awaitingAnswer = messageAwaitingAnswer({ runStreaming, runInProgress, events: message.events }, { isAnsweredCard: answeredCards.isAnsweredCard });
+    const usage = usageLayout({ usage: messageUsage, interleaved: blocks !== null, runInProgress }, { runStreaming });
+    const footerUsage = showUsageLine ? usage.footer : undefined;
     const renderToolCard = (row) => (_jsx(ToolCard, { use: row.use, result: row.result, runStreaming: runStreaming, runSucceeded: runSucceeded, ...(projectFileNames !== undefined ? { projectFileNames } : {}), ...(onRequestOpenFile !== undefined ? { onRequestOpenFile } : {}) }, row.id));
+    // One turn's cards: a fold-up line when collapsed, the plain card list otherwise.
+    const renderTools = (rows, key) => (toolCallDisplay === 'collapsed'
+        ? _jsx(ToolCallGroup, { rows: rows, renderRow: renderToolCard }, key)
+        : _jsx("div", { className: "jini-message-tools", children: rows.map(renderToolCard) }, key));
+    const flatToolRows = toolRowsForDisplay({ rows: timeline.rows, mode: toolCallDisplay });
     const renderExtGroup = (group) => {
         const renderer = getExtEventRenderer({ name: group.name });
         if (!renderer)
@@ -186,6 +202,8 @@ export function MessageRow({ message, runStreaming = false, runSucceeded = false
             awaitingAnswer,
             runId: message.runId,
             ...(group.call === undefined ? {} : { call: group.call }),
+            answered: answeredCards.isAnswered(group.slot),
+            onAnswered: () => answeredCards.markAnswered(group.slot),
         });
         if (!node)
             return null;
@@ -196,28 +214,35 @@ export function MessageRow({ message, runStreaming = false, runSucceeded = false
         _jsx(ExtEventErrorBoundary, { name: group.name, children: _jsx("div", { children: node }) }, `${group.slot}:${group.events.length}`));
     };
     const renderTextSegments = (text, keyPrefix) => splitOnQuestionForms({ input: text }).map((segment, i) => segment.kind === 'text' ? (segment.text.trim() ? (_jsx("div", { className: "jini-message-content", children: _jsx(Markdown, { children: segment.text }) }, `${keyPrefix}-${i}`)) : null) : (_jsx(QuestionForm, { form: segment.form, interactive: questionFormInteractive, ...(questionFormSubmittedAnswers !== undefined ? { submittedAnswers: questionFormSubmittedAnswers } : {}), ...(onQuestionFormSubmit !== undefined ? { onSubmit: onQuestionFormSubmit } : {}) }, `${keyPrefix}-${i}`)));
-    return (_jsxs("div", { className: "jini-message jini-message-assistant", "data-message-id": message.id, "data-run-status": message.runStatus, "data-agent-element": `chat-message-${message.id}`, "data-agent-role": "region", "data-agent-label": "A reply from the assistant", children: [message.agentName ? _jsx("div", { className: "jini-message-agent", children: message.agentName }) : null, blocks
+    return (_jsxs("div", { className: usageLineMeetsActions({ footer: footerUsage, terminalNotice, pending, runInProgress })
+            ? 'jini-message jini-message-assistant jini-message-assistant--usage-actions'
+            : 'jini-message jini-message-assistant', "data-message-id": message.id, "data-run-status": message.runStatus, "data-agent-element": `chat-message-${message.id}`, "data-agent-role": "region", "data-agent-label": "A reply from the assistant", children: [message.agentName ? _jsx("div", { className: "jini-message-agent", children: message.agentName }) : null, blocks
                 ? blocks.map((block) => {
                     if (block.kind === 'text') {
                         return _jsx(React.Fragment, { children: renderTextSegments(block.text, block.key) }, block.key);
                     }
-                    if (block.kind === 'tools') {
-                        return (_jsx("div", { className: "jini-message-tools", children: block.rows.map(renderToolCard) }, block.key));
+                    if (block.kind === 'reply-end') {
+                        const reply = usage.replies[block.index];
+                        return reply && showUsageLine ? _jsx(UsageSummary, { usage: reply, showTotal: showUsageTotal }, block.key) : null;
                     }
+                    if (block.kind === 'tools')
+                        return renderTools(block.rows, block.key);
+                    if (block.kind === 'thinking')
+                        return _jsx(ThinkingBlock, { text: block.text }, block.key);
                     const group = extGroups.find((g) => g.slot === block.slot);
                     if (!group)
                         return null;
                     return (_jsx("div", { className: "jini-message-ext-events", children: renderExtGroup(group) }, block.key));
                 })
-                : (_jsxs(_Fragment, { children: [segments.map((segment, i) => segment.kind === 'text' ? (segment.text.trim() ? (_jsx("div", { className: "jini-message-content", children: _jsx(Markdown, { children: segment.text }) }, i)) : null) : (_jsx(QuestionForm, { form: segment.form, interactive: questionFormInteractive, ...(questionFormSubmittedAnswers !== undefined ? { submittedAnswers: questionFormSubmittedAnswers } : {}), ...(onQuestionFormSubmit !== undefined ? { onSubmit: onQuestionFormSubmit } : {}) }, i))), timeline.rows.length > 0 ? (_jsx("div", { className: "jini-message-tools", children: timeline.rows.map(renderToolCard) })) : null, extGroups.length > 0 ? _jsx("div", { className: "jini-message-ext-events", children: extGroups.map(renderExtGroup) }) : null] })), _jsx(AssistantMessageFooter, { message, usageEvent, terminalNotice, pending, runInProgress, runStreaming, visibleContent })] }));
-}
+                : (_jsxs(_Fragment, { children: [segments.map((segment, i) => segment.kind === 'text' ? (segment.text.trim() ? (_jsx("div", { className: "jini-message-content", children: _jsx(Markdown, { children: segment.text }) }, i)) : null) : (_jsx(QuestionForm, { form: segment.form, interactive: questionFormInteractive, ...(questionFormSubmittedAnswers !== undefined ? { submittedAnswers: questionFormSubmittedAnswers } : {}), ...(onQuestionFormSubmit !== undefined ? { onSubmit: onQuestionFormSubmit } : {}) }, i))), flatToolRows.length > 0 ? renderTools(flatToolRows) : null, extGroups.length > 0 ? _jsx("div", { className: "jini-message-ext-events", children: extGroups.map(renderExtGroup) }) : null] })), _jsx(AssistantMessageFooter, { message, usageEvent: footerUsage, showUsageTotal, terminalNotice, pending, runInProgress, runStreaming, visibleContent, isAnsweredCard: answeredCards.isAnsweredCard })] }));
+});
 /**
  * The live "what is it doing" line under a running reply (see `core/run-activity.ts`). Replaces the
  * old "Thinking…" placeholder, which vanished for good as soon as the first tool row appeared.
  * Kept a separate component so its one-second tick re-renders only this line, not the whole row.
  */
-function RunActivityLine({ events, active }) {
-    const activityLabel = useRunActivity({ events: events, active: active });
+function RunActivityLine({ events, active, isAnsweredCard }) {
+    const activityLabel = useRunActivity({ events: events, active: active }, { isAnsweredCard });
     const label = continuingRunNotice({ events, active }, {}) ?? activityLabel;
     if (label === null)
         return null;

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

@@ -0,0 +1,48 @@
+import type { ChatMessage } from '../../core/messages.js';
+import { type ChatUsageSummary } from '../../core/turn-usage.js';
+/** A standalone row has one turn; MessageList supplies the full conversation projection. */
+export declare function useMessageUsage({ message, summary }: {
+    message: ChatMessage;
+    summary?: ChatUsageSummary;
+}, _optional?: {}): ChatUsageSummary | undefined;
+/** 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 declare function usageLayout({ usage, interleaved, runInProgress }: {
+    usage: ChatUsageSummary | undefined;
+    interleaved: boolean;
+    runInProgress: boolean;
+}, { runStreaming }?: {
+    runStreaming?: boolean;
+}): {
+    footer: ChatUsageSummary | undefined;
+    replies: readonly (ChatUsageSummary | undefined)[];
+};
+/** 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 declare function usageLineMeetsActions({ footer, terminalNotice, pending, runInProgress }: {
+    footer: ChatUsageSummary | undefined;
+    terminalNotice: string | null;
+    pending: boolean;
+    runInProgress: boolean;
+}, _optional?: {}): boolean;
+/** 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 declare function useUsageSummary({ usage }: {
+    usage: ChatUsageSummary;
+}, { showTotal }?: {
+    showTotal?: boolean;
+}): {
+    text: string;
+    title: string | undefined;
+    ariaLabel: string | undefined;
+};
+//# sourceMappingURL=MessageRow.usage.d.ts.map

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

@@ -0,0 +1,17 @@
+import { type ExtEventRenderProps } from '../ext-event-renderer-registry.js';
+/** 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 }: {
+    data: unknown;
+}): string | undefined;
+/** The bubble for one mid-run message — the same classes as a sent user message, so it reads as one. */
+export declare function MidRunUserMessage({ events }: Pick<ExtEventRenderProps, 'events'>): import("react").JSX.Element | null;
+/**
+ * Registers {@link MidRunUserMessage} against the ext-event registry.
+ *
+ * @returns An unregister handle, so a test or a hot reload can dispose cleanly.
+ */
+export declare function registerMidRunUserMessageRenderer(): () => void;
+//# sourceMappingURL=MidRunUserMessage.d.ts.map

package/dist/react/components/MidRunUserMessage.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @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 { 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. 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;
+}
+/** One slot per message id, so each mid-run message renders where it arrived rather than folding into the first. */
+export function midRunUserMessageSlotKey({ data }) {
+    return field(data, 'id');
+}
+/** The bubble for one mid-run message — the same classes as a sent user message, so it reads as one. */
+export function MidRunUserMessage({ events }) {
+    const text = field(events.at(-1), 'text');
+    if (text === undefined)
+        return null;
+    return (_jsx("div", { className: "jini-message jini-message-user jini-message-user--mid-run", "data-agent-role": "region", "data-agent-label": "A message from the user, sent while the agent was working", children: _jsx("div", { className: "jini-message-content", children: text }) }));
+}
+/**
+ * Registers {@link MidRunUserMessage} against the ext-event registry.
+ *
+ * @returns An unregister handle, so a test or a hot reload can dispose cleanly.
+ */
+export function registerMidRunUserMessageRenderer() {
+    return registerExtEventRenderer({ name: MID_RUN_USER_MESSAGE_EXT_EVENT_NAME, renderer: (props) => _jsx(MidRunUserMessage, { events: props.events }) }, { slotKey: midRunUserMessageSlotKey });
+}
+//# sourceMappingURL=MidRunUserMessage.js.map

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