@parallelworks/ui 0.83.3 → 0.84.1

package/dist/ai/adapter/openai/createOpenAIStream.js

@@ -35,7 +35,7 @@ function createOpenAICompatibleStream(config) {
 		if (!res.ok) throw new ChatAdapterError(await errorMessageFromResponse(res), { status: res.status });
 		const reader = res.body?.getReader();
 		if (!reader) throw new ChatAdapterError("No response body");
-		return processSSEStream(reader, handlers.onContent, void 0, void 0, handlers.onReasoning, handlers.onMessageId, useResponses ? parseResponsesSSELine : void 0, handlers.onPart);
+		return processSSEStream(reader, handlers.onContent, void 0, void 0, handlers.onReasoning, handlers.onMessageId, useResponses ? parseResponsesSSELine : void 0, handlers.onPart, handlers.onUsage);
 	};
 }
 //#endregion

package/dist/ai/adapter/openai/sse.d.ts

@@ -1,4 +1,4 @@
-import type { ToolCall, ToolCallDelta } from '../../types.js';
+import type { TokenUsage, ToolCall, ToolCallDelta } from '../../types.js';
 import type { PartDelta } from '../types.js';
 import type { ToolApprovalChunk, ToolResultChunk } from './wire.js';
 export type ParsedSSELine = {
@@ -13,6 +13,7 @@ export type ParsedSSELine = {
     model?: string | undefined;
     error?: string | undefined;
     responsesOutput?: unknown[] | undefined;
+    usage?: TokenUsage | undefined;
 } | null;
 export type SSELineParser = (line: string) => ParsedSSELine;
 export declare function parseSSELine(line: string): ParsedSSELine;
@@ -20,7 +21,7 @@ export declare function parseSSELine(line: string): ParsedSSELine;
  *  calls stream as parts; a call the gateway answered with a result is left
  *  off the returned `toolCalls`, which then hold only calls the caller must
  *  run. */
-export declare function processSSEStream(reader: ReadableStreamDefaultReader<Uint8Array>, onContent: (content: string) => void, onToolCall?: (toolCalls: ToolCall[]) => void, onError?: (error: string) => void, onReasoning?: (reasoning: string) => void, onMessageId?: (messageId: string) => void, parseLine?: SSELineParser, onPart?: (delta: PartDelta) => void): Promise<{
+export declare function processSSEStream(reader: ReadableStreamDefaultReader<Uint8Array>, onContent: (content: string) => void, onToolCall?: (toolCalls: ToolCall[]) => void, onError?: (error: string) => void, onReasoning?: (reasoning: string) => void, onMessageId?: (messageId: string) => void, parseLine?: SSELineParser, onPart?: (delta: PartDelta) => void, onUsage?: (usage: TokenUsage) => void): Promise<{
     content: string;
     messageId: string;
     toolCalls: ToolCall[];

package/dist/ai/adapter/openai/sse.js

@@ -17,7 +17,8 @@ function parseSSELine(line) {
 			toolResult: chunk.toolResult,
 			toolApproval: chunk.toolApproval,
 			finishReason: choice?.finish_reason,
-			model: chunk.model
+			model: chunk.model,
+			usage: chunk.usage
 		};
 	} catch {
 		return null;
@@ -27,7 +28,7 @@ function parseSSELine(line) {
 *  calls stream as parts; a call the gateway answered with a result is left
 *  off the returned `toolCalls`, which then hold only calls the caller must
 *  run. */
-async function processSSEStream(reader, onContent, onToolCall, onError, onReasoning, onMessageId, parseLine = parseSSELine, onPart) {
+async function processSSEStream(reader, onContent, onToolCall, onError, onReasoning, onMessageId, parseLine = parseSSELine, onPart, onUsage) {
 	const decoder = new TextDecoder();
 	let assistantContent = "";
 	let assistantReasoning = "";
@@ -77,6 +78,7 @@ async function processSSEStream(reader, onContent, onToolCall, onError, onReason
 					onReasoning?.(parsed.reasoningContent);
 				}
 				if (parsed.finishReason) finishReason = parsed.finishReason;
+				if (parsed.usage) onUsage?.(parsed.usage);
 				if (parsed.responsesOutput?.length) responsesOutput = parsed.responsesOutput;
 				if (parsed.toolCalls) for (const tc of parsed.toolCalls) {
 					if (tc.index === void 0) continue;

package/dist/ai/adapter/types.d.ts

@@ -1,4 +1,4 @@
-import type { Allocation, ApprovalPart, AttachmentRef, ChatModel, Conversation, ConversationSummary, ProviderInfo, ProviderIssue, ShareGroup, SharePermission, SharePermissionLevel, TodoItem, ToolCall, ToolDecision, UnreachableSession } from '../types.js';
+import type { Allocation, ApprovalPart, AttachmentRef, ChatModel, Conversation, ConversationSummary, ProviderInfo, ProviderIssue, ShareGroup, SharePermission, SharePermissionLevel, TodoItem, TokenUsage, ToolCall, ToolDecision, UnreachableSession } from '../types.js';
 import type { CompletionMessage } from './openai/wire.js';
 export declare class ChatAdapterError extends Error {
     status?: number | undefined;
@@ -36,6 +36,7 @@ export interface StreamHandlers {
     onReasoning?: (reasoning: string) => void;
     onMessageId?: (messageId: string) => void;
     onPart?: (delta: PartDelta) => void;
+    onUsage?: (usage: TokenUsage) => void;
 }
 export type PartDelta = {
     type: 'text' | 'reasoning';

package/dist/ai/agent/index.d.ts

@@ -2,6 +2,6 @@ export { classifyPseudoUserMessage } from './classifier.js';
 export { computeEditDiff, computeWriteRows, type DiffRow, type EditDiffModel, type EditToolArgs, editSummary, isEditDiffTool, lineDelta, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, parseEditArgs, type WriteModel, wordEmphasisRanges, } from './diff.js';
 export { type DiffToken, languageForPath, tokenizeDiffLines, } from './diffHighlight.js';
 export { clampPermissionMode, DEFAULT_PERMISSION_MODE, isNamedPermissionMode, NAMED_PERMISSION_MODES, type NamedPermissionMode, type PermissionMode, permissionModesUpTo, } from './permissions.js';
-export { AGENT_COLOR_NAMES, agentColorHex, bashExitCode, clip, fullToolArgs, isGroupableTool, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, summarizeToolArgs, type ToolHeader, type ToolSummaryOptions, toolHeaderFor, toolSummary, } from './toolfmt.js';
+export { AGENT_COLOR_NAMES, agentColorHex, bashExitCode, clip, fullToolArgs, isGroupableTool, resultFailed, rollupClauses, rollupSentence, sanitizeLabel, sanitizePanelText, summarizeToolArgs, type ToolHeader, type ToolSummaryOptions, toolHeaderFor, toolSummary, } from './toolfmt.js';
 export { defaultToolStrings, type ToolStrings } from './toolStrings.js';
 export { agentTypeLabel, askQuestionFromArgs, firstNonEmptyLine, hiddenTranscriptTool, INTERRUPTED_NOTICE, interruptionNotice, parseSubagentNotice, planFromArgs, type SubagentNotice, subagentDeliveryLine, taskCallFromArgs, thinkingHeading, } from './transcript.js';

package/dist/ai/agent/toolfmt.d.ts

@@ -19,5 +19,6 @@ export interface ToolSummaryOptions {
 export declare function toolSummary(name: string, args: string, result: string, isError: boolean, { editSummary, strings: t }?: ToolSummaryOptions): string;
 export declare function isGroupableTool(name: string): boolean;
 export declare function rollupSentence(names: string[], t?: ToolStrings): string;
+export declare function rollupClauses(names: string[], t?: ToolStrings): string[];
 export declare const AGENT_COLOR_NAMES: readonly ['blue', 'green', 'yellow', 'purple', 'cyan', 'orange', 'pink', 'red'];
 export declare function agentColorHex(name: string | undefined): string | null;

package/dist/ai/agent/toolfmt.js

@@ -325,6 +325,10 @@ function isGroupableTool(name) {
 	return !NON_GROUPABLE_TOOLS.has(name);
 }
 function rollupSentence(names, t = defaultToolStrings) {
+	const parts = rollupClauses(names, t);
+	return parts.length === 0 ? "" : t.rollup.sentence(parts);
+}
+function rollupClauses(names, t = defaultToolStrings) {
 	const counts = ROLLUP_CATEGORIES.map(() => 0);
 	for (const name of names) for (let i = 0; i < ROLLUP_CATEGORIES.length; i++) if (ROLLUP_CATEGORIES[i]?.[0](name)) {
 		counts[i] = (counts[i] ?? 0) + 1;
@@ -338,7 +342,7 @@ function rollupSentence(names, t = defaultToolStrings) {
 			if (cat) parts.push(t.rollup[cat[1]](n));
 		}
 	}
-	return parts.length === 0 ? "" : t.rollup.sentence(parts);
+	return parts;
 }
 var AGENT_COLOR_NAMES = [
 	"blue",
@@ -364,4 +368,4 @@ function agentColorHex(name) {
 	return name ? AGENT_COLOR_HEX[name] ?? null : null;
 }
 //#endregion
-export { AGENT_COLOR_NAMES, agentColorHex, bashExitCode, clip, fullToolArgs, isGroupableTool, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, summarizeToolArgs, toolHeaderFor, toolSummary };
+export { AGENT_COLOR_NAMES, agentColorHex, bashExitCode, clip, fullToolArgs, isGroupableTool, resultFailed, rollupClauses, rollupSentence, sanitizeLabel, sanitizePanelText, summarizeToolArgs, toolHeaderFor, toolSummary };

package/dist/ai/ai.css

@@ -444,6 +444,20 @@
   color: var(--chat-accent);
 }
 
+/* A list's caret follows its last item's text rather than sitting on a line
+   of its own under the list. */
+.markdown-streaming > :is(ul, ol):last-child:not([data-sd-caret-hidden])::after {
+  content: none;
+}
+.markdown-streaming > :is(ul, ol):last-child > li:last-child::after {
+  display: inline;
+  vertical-align: baseline;
+  content: var(--streamdown-caret);
+}
+.chat-thread .markdown-streaming > :is(ul, ol):last-child > li:last-child::after {
+  color: var(--chat-accent);
+}
+
 /* Selected text inside the chat takes the accent too. */
 .chat-thread ::selection,
 .chat-composer ::selection {

package/dist/ai/components/ChatActivity.js

@@ -9,8 +9,8 @@ import { DateTime } from "luxon";
 /** An agent session's working line for the provider's reply, naming its current step. */
 function ChatActivity() {
 	const { isStreaming, tools } = useChat();
-	const { streamingParts } = useChatStream();
-	const { strings } = useChatConfig();
+	const { streamingParts, streamingUsage } = useChatStream();
+	const { strings, slots } = useChatConfig();
 	const [startedAt, setStartedAt] = useState(null);
 	useEffect(() => {
 		setStartedAt(isStreaming ? DateTime.now().toUTC().toISO() : null);
@@ -20,11 +20,13 @@ function ChatActivity() {
 	const running = streamingParts.findLast((p) => p.kind === "tool_call" && p.status === "running");
 	let word;
 	if (waiting) word = strings.activity.waitingForAnswer;
-	else if (running?.kind === "tool_call") word = tools.find((t) => t.id === running.name)?.label ?? toolHeaderFor(running.name).label;
+	else if (running?.kind === "tool_call") word = slots.toolPresentation?.(running)?.label ?? tools.find((t) => t.id === running.name)?.label ?? toolHeaderFor(running.name).label;
 	return /* @__PURE__ */ jsx(ActivityLine, {
 		testId: "chat-activity",
 		startedAt,
-		word
+		word,
+		inputTokens: streamingUsage?.prompt_tokens,
+		outputTokens: streamingUsage?.completion_tokens
 	});
 }
 //#endregion

package/dist/ai/components/ChatMessage.js

@@ -46,7 +46,8 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	const hasReasoning = !!message.reasoning;
 	const toolCallCount = message.parts?.filter((p) => p.kind === "tool_call").length ?? 0;
 	const showReasoningButton = !isUser && !isStreaming && hasReasoning;
-	const showTurnDurationLabel = !isUser && !isStreaming && !hasReasoning && (!!message.reasoningDuration || toolCallCount > 0);
+	const narrated = !!message.parts?.some((p) => p.kind === "text");
+	const showTurnDurationLabel = !isUser && !isStreaming && !hasReasoning && (!!message.reasoningDuration || toolCallCount > 0 && (!narrated || !!askerName));
 	const { messageMeta: t, thinking: tThinking } = useChatConfig().strings;
 	const { common } = useStrings();
 	const [editContent, setEditContent] = useState(message.content || "");
@@ -114,35 +115,42 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 		const said = replyText(message);
 		return /* @__PURE__ */ jsxs("div", {
 			className: cx("group py-3 w-full", !flush && "sm:px-4"),
-			children: [/* @__PURE__ */ jsx(AgentMessageParts, {
-				message: partsMessage,
-				isStreaming,
-				onApprovalAnswer: approvalAnswer
-			}), !isUser && !isStreaming && (said || onRegenerate || meta) && /* @__PURE__ */ jsxs("div", {
-				className: "chat-actions -ml-1.5 mt-2 flex items-center gap-0.5",
-				children: [
-					said && /* @__PURE__ */ jsx(CopyButton, {
-						text: said,
-						label: t.copyLabel,
-						quiet: true,
-						size: "md",
-						className: actionClasses
-					}),
-					onRegenerate && /* @__PURE__ */ jsx(IconButton, {
-						label: t.regenerate,
-						onClick: () => onRegenerate(message.id),
-						size: "md",
-						className: actionClasses,
-						icon: /* @__PURE__ */ jsx(RetryIcon, {})
-					}),
-					onNavigateBranch && /* @__PURE__ */ jsx(BranchNavigator, {
-						messages: allMessages,
-						currentMessageId: message.id,
-						onNavigate: onNavigateBranch
-					}),
-					meta
-				]
-			})]
+			children: [
+				/* @__PURE__ */ jsx(AgentMessageParts, {
+					message: partsMessage,
+					isStreaming,
+					onApprovalAnswer: approvalAnswer
+				}),
+				isStreaming && !isUser && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					className: "mt-2 h-7"
+				}),
+				!isUser && !isStreaming && (said || onRegenerate || meta) && /* @__PURE__ */ jsxs("div", {
+					className: "chat-actions -ml-1.5 mt-2 flex items-center gap-0.5",
+					children: [
+						said && /* @__PURE__ */ jsx(CopyButton, {
+							text: said,
+							label: t.copyLabel,
+							quiet: true,
+							size: "md",
+							className: actionClasses
+						}),
+						onRegenerate && /* @__PURE__ */ jsx(IconButton, {
+							label: t.regenerate,
+							onClick: () => onRegenerate(message.id),
+							size: "md",
+							className: actionClasses,
+							icon: /* @__PURE__ */ jsx(RetryIcon, {})
+						}),
+						onNavigateBranch && /* @__PURE__ */ jsx(BranchNavigator, {
+							messages: allMessages,
+							currentMessageId: message.id,
+							onNavigate: onNavigateBranch
+						}),
+						meta
+					]
+				})
+			]
 		});
 	}
 	if (isTool) return null;
@@ -266,6 +274,10 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 						onOpen: onOpenAttachment,
 						className: isRightAligned ? "justify-end" : void 0
 					}),
+					isStreaming && !isUser && /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						className: "mt-2 h-7"
+					}),
 					!isStreaming && !isEditing && /* @__PURE__ */ jsxs("div", {
 						className: cx("chat-actions flex items-center gap-0.5 transition-opacity duration-150", isRightAligned ? "absolute right-0 top-full -mr-1.5 mt-0.5" : "-ml-1.5 mt-2", isRightAligned && "pointer-events-none opacity-0 group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100"),
 						children: [

package/dist/ai/components/ChatMessageList.js

@@ -19,7 +19,8 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 	const { isThinking, streamingContent, streamingReasoning, streamingParts, thinkingStartTime } = useChatStream();
 	const isStreaming = isStreamingProp ?? providerStreaming;
 	const conversationId = messages[0]?.conversationId;
-	const providerStreamingMessage = useMemo(() => providerStreaming && streamingContent ? {
+	const textInParts = streamingParts.some((part) => part.kind === "text");
+	const providerStreamingMessage = useMemo(() => providerStreaming && streamingContent && !textInParts ? {
 		id: "streaming",
 		role: "assistant",
 		content: streamingContent,
@@ -28,6 +29,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 	} : null, [
 		providerStreaming,
 		streamingContent,
+		textInParts,
 		conversationId
 	]);
 	const streamingMessage = streamingMessageProp === void 0 ? providerStreamingMessage : streamingMessageProp;
@@ -99,7 +101,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 	}, []);
 	const hasContent = messages.length > 0 || !!streamingMessage;
 	const awaitingApproval = streamingParts.some((part) => part.kind === "approval" && !part.resolved);
-	const showWorkingIndicator = workingIndicator && isStreaming && !streamingReasoning && !streamingMessage && !awaitingApproval;
+	const showWorkingIndicator = workingIndicator && isStreaming && !streamingReasoning && !streamingMessage && !textInParts && !awaitingApproval;
 	useEffect(() => {
 		const container = containerRef.current;
 		if (!container) return;
@@ -145,8 +147,11 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 		isStreaming,
 		hasQueuedMessages
 	]);
+	const wasStreamingRef = useRef(isStreaming);
 	useEffect(() => {
-		if (!containerRef.current || !isNearBottomRef.current || isStreaming || !hadMessagesRef.current) return;
+		const streamFinished = wasStreamingRef.current && !isStreaming;
+		wasStreamingRef.current = isStreaming;
+		if (!containerRef.current || !isNearBottomRef.current || isStreaming || streamFinished || !hadMessagesRef.current) return;
 		const el = containerRef.current;
 		el.scrollTo({
 			top: el.scrollHeight,
@@ -224,7 +229,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 					isStreaming && streamingReasoning && /* @__PURE__ */ jsx("div", {
 						className: "animate-chat-enter",
 						children: /* @__PURE__ */ jsx("div", {
-							className: cx("pt-3", !flush && "px-4"),
+							className: cx("pt-3", !flush && "sm:px-4"),
 							children: /* @__PURE__ */ jsx(Reasoning, {
 								label: /* @__PURE__ */ jsx(ThinkingLabel, {
 									startedAt: isThinking ? thinkingStartTime : void 0,
@@ -253,7 +258,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 						})
 					}, "thinking"),
 					isStreaming && streamingParts.length > 0 && /* @__PURE__ */ jsx("div", {
-						className: cx("animate-chat-enter py-1", !flush && "px-4"),
+						className: cx("animate-chat-enter py-1", !flush && "sm:px-4"),
 						children: /* @__PURE__ */ jsx(AgentMessageParts, {
 							message: streamingPartsMessage,
 							isStreaming
@@ -262,7 +267,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 					showWorkingIndicator && /* @__PURE__ */ jsx("div", {
 						className: "animate-chat-enter",
 						children: /* @__PURE__ */ jsx("div", {
-							className: cx("py-3", !flush && "px-4"),
+							className: cx("py-3", !flush && "sm:px-4"),
 							children: /* @__PURE__ */ jsx("div", {
 								className: "animate-shimmer text-shimmer text-sm",
 								children: tThinking.ellipsis
@@ -294,7 +299,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 								onOpenAttachment
 							}), /* @__PURE__ */ jsxs("div", {
 								"data-testid": "queued-status",
-								className: cx("-mt-4 mb-2 flex items-center justify-end gap-2 text-xs theme-muted-text", !flush && "px-4"),
+								className: cx("-mt-4 mb-2 flex items-center justify-end gap-2 text-xs theme-muted-text", !flush && "sm:px-4"),
 								children: [
 									removable ? /* @__PURE__ */ jsx(ClockIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" }),
 									/* @__PURE__ */ jsx("span", { children: status }),
@@ -355,15 +360,18 @@ function ThinkingLabel({ startedAt, finalDuration }) {
 *  for every streamed token, so a long conversation is not walked per token. */
 var MessageRows = memo(function MessageRows({ messages, allMessages, streaming, flush, editingMessageId, showAuthor, currentUsername, attachmentDownloadUrl, onOpenAttachment, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer }) {
 	const shownRef = useRef(/* @__PURE__ */ new Set());
+	const wasStreamingRef = useRef(streaming);
 	const shown = shownRef.current;
 	const appended = shown.size > 0 && messages.some((m) => shown.has(m.id));
+	const streamFinished = wasStreamingRef.current && !streaming;
 	useLayoutEffect(() => {
 		shownRef.current = new Set(messages.map((m) => m.id));
-	}, [messages]);
+		wasStreamingRef.current = streaming;
+	}, [messages, streaming]);
 	const lastIndex = messages.findLastIndex((m) => !m.pseudo);
 	return messages.map((message, i) => {
 		if (message.pseudo) return null;
-		const isNew = appended && !shown.has(message.id);
+		const isNew = appended && !shown.has(message.id) && !(streamFinished && message.role === "assistant");
 		return /* @__PURE__ */ jsx("div", {
 			className: isNew ? "animate-chat-enter" : void 0,
 			children: /* @__PURE__ */ jsx(ChatMessage_default, {

package/dist/ai/components/agent/AgentMessageParts.d.ts

@@ -26,7 +26,7 @@ type RenderItem = {
         index: number;
     }[];
 };
-export declare function buildRenderItems(parts: MessagePart[], hostDrawn?: (toolName: string) => boolean): RenderItem[];
+export declare function buildRenderItems(parts: MessagePart[], hostDrawn?: (toolName: string) => boolean, joinsRollup?: (part: ToolCallPart) => boolean): RenderItem[];
 export default function AgentMessageParts({ message, isStreaming, onApprovalAnswer, }: {
     message: PartRendererProps['message'];
     isStreaming?: boolean;

package/dist/ai/components/agent/AgentMessageParts.js

@@ -9,7 +9,7 @@ import { Disclosure } from "../../../components/Disclosure.js";
 import { formatDuration } from "../../../format.js";
 import { RelativeTime } from "../../../components/relativeTime.js";
 import { LogViewer } from "../../../logviewer/LogViewer.js";
-import { agentColorHex, bashExitCode, fullToolArgs, isGroupableTool, rollupSentence, summarizeToolArgs, toolHeaderFor, toolSummary } from "../../agent/toolfmt.js";
+import { agentColorHex, bashExitCode, fullToolArgs, isGroupableTool, rollupClauses, summarizeToolArgs, toolHeaderFor, toolSummary } from "../../agent/toolfmt.js";
 import { computeEditDiff, computeWriteRows, editSummary, isEditDiffTool, parseEditArgs } from "../../agent/diff.js";
 import { languageForPath, tokenizeDiffLines } from "../../agent/diffHighlight.js";
 import { thinkingHeading } from "../../agent/transcript.js";
@@ -232,13 +232,22 @@ function ToolStatusDot({ part }) {
 }
 /** A part's toggle row: its status mark and name, across the transcript's width. */
 var rowSummaryClasses = "min-h-6 w-full";
-/** A call's row: its status and signature, opening to its full arguments and
-*  result. `children` is a host's drawing of the call, in place of the
-*  one-line summary. */
+function RowSummary({ text }) {
+	return text ? /* @__PURE__ */ jsx("div", {
+		className: "ml-5 mt-0.5 truncate text-[13px] theme-muted-text",
+		children: text
+	}) : null;
+}
+/** A call's row: its status and signature, or the host's words for it, opening
+*  to its full arguments and result. `children` is a host's drawing of the
+*  call, shown under the row in place of the one-line summary, or inside it
+*  when the host names the call. */
 function ToolCallBlock({ part, children }) {
-	const { strings } = useChatConfig();
+	const { strings, slots } = useChatConfig();
 	const t = strings.agentTranscript;
 	const [expanded, setExpanded] = useState(false);
+	const presentation = slots.toolPresentation?.(part);
+	const drawingInPanel = !!children && !!presentation && !presentation.open && part.status !== "waiting";
 	const header = toolHeaderFor(part.name);
 	const argSummary = summarizeToolArgs(header.arg, part.args);
 	const isDiff = isEditDiffTool(part.name);
@@ -262,7 +271,10 @@ function ToolCallBlock({ part, children }) {
 				onOpenChange: setExpanded,
 				disabled: isDiff,
 				summaryClassName: rowSummaryClasses,
-				summary: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ToolStatusDot, { part }), /* @__PURE__ */ jsxs("span", {
+				summary: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ToolStatusDot, { part }), presentation ? /* @__PURE__ */ jsx("span", {
+					className: "text-[13px] leading-5 min-w-0 truncate theme-text",
+					children: presentation.label
+				}) : /* @__PURE__ */ jsxs("span", {
 					className: "font-mono text-[13px] leading-5 min-w-0 truncate",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "font-semibold",
@@ -277,23 +289,26 @@ function ToolCallBlock({ part, children }) {
 					})]
 				})] }),
 				panelClassName: "ml-5 mt-1 space-y-1.5",
-				children: [fullToolArgs(header.arg, part.args) && /* @__PURE__ */ jsx("pre", {
+				children: [fullToolArgs(header.arg, part.args) && /* @__PURE__ */ jsxs("pre", {
 					className: "overflow-x-auto rounded-md bg-(--theme-muted-panel-bg) p-2 font-mono text-xs whitespace-pre-wrap",
-					children: fullToolArgs(header.arg, part.args)
-				}), /* @__PURE__ */ jsx(ResultBody, { part })]
+					children: [presentation && /* @__PURE__ */ jsxs("span", {
+						className: "font-semibold",
+						children: [header.label, " "]
+					}), fullToolArgs(header.arg, part.args)]
+				}), drawingInPanel ? /* @__PURE__ */ jsx("div", {
+					className: "min-w-0",
+					children
+				}) : /* @__PURE__ */ jsx(ResultBody, { part })]
 			}),
 			part.status === "error" && !expanded && /* @__PURE__ */ jsx("div", {
 				className: "ml-5 mt-0.5 truncate text-[13px] text-(--theme-error-text)",
 				children: t.failedWith(summary)
 			}),
-			children && /* @__PURE__ */ jsx("div", {
+			children && !drawingInPanel && /* @__PURE__ */ jsx("div", {
 				className: "mt-1.5 min-w-0 sm:ml-5",
 				children
 			}),
-			!children && !isDiff && !expanded && part.status !== "waiting" && part.status !== "error" && /* @__PURE__ */ jsx("div", {
-				className: "ml-5 mt-0.5 truncate text-[13px] theme-muted-text",
-				children: summary
-			}),
+			!isDiff && !expanded && part.status !== "waiting" && part.status !== "error" && (!children || drawingInPanel) && /* @__PURE__ */ jsx(RowSummary, { text: part.status === "running" ? summary : presentation?.summary ?? (drawingInPanel ? void 0 : summary) }),
 			isDiff && /* @__PURE__ */ jsx("div", {
 				className: "ml-5",
 				children: /* @__PURE__ */ jsx(EditDiffBlock, { part })
@@ -810,7 +825,7 @@ function mergeReasoning(parts) {
 		...durationMs > 0 ? { durationMs } : {}
 	};
 }
-function buildRenderItems(parts, hostDrawn = () => false) {
+function buildRenderItems(parts, hostDrawn = () => false, joinsRollup = () => false) {
 	const items = [];
 	let run = [];
 	const emitThoughts = (members) => {
@@ -852,7 +867,7 @@ function buildRenderItems(parts, hostDrawn = () => false) {
 		run = [];
 	};
 	const decided = new Set(parts.flatMap((p) => p.kind === "tool_call" && p.decision ? [p.id] : []));
-	const drawnByHost = new Set(parts.flatMap((p) => p.kind === "tool_call" && hostDrawn(p.name) ? [p.id] : []));
+	const drawnByHost = new Set(parts.flatMap((p) => p.kind === "tool_call" && hostDrawn(p.name) && !joinsRollup(p) ? [p.id] : []));
 	parts.forEach((part, index) => {
 		if (part.kind === "approval" && part.resolved && decided.has(part.id)) return;
 		if (part.kind === "approval" && drawnByHost.has(part.id)) return;
@@ -903,8 +918,36 @@ function groupRepeatedCalls(items) {
 	return out;
 }
 function RollupGroup({ members, message }) {
-	const { strings } = useChatConfig();
-	const sentence = rollupSentence(members.flatMap((m) => m.part.kind === "tool_call" ? [m.part.name] : []), strings.tools);
+	const { strings, slots } = useChatConfig();
+	const { sentence, allNamed } = useMemo(() => {
+		const builtin = [];
+		const named = /* @__PURE__ */ new Map();
+		for (const m of members) {
+			if (m.part.kind !== "tool_call") continue;
+			const rollup = slots.toolPresentation?.(m.part)?.rollup;
+			if (!rollup) {
+				builtin.push(m.part.name);
+				continue;
+			}
+			const entry = named.get(m.part.name) ?? {
+				count: 0,
+				rollup
+			};
+			named.set(m.part.name, {
+				...entry,
+				count: entry.count + 1
+			});
+		}
+		const clauses = [...[...named.values()].map((n) => n.rollup(n.count)), ...rollupClauses(builtin, strings.tools)];
+		return {
+			sentence: clauses.length ? strings.tools.rollup.sentence(clauses) : "",
+			allNamed: named.size > 0 && builtin.length === 0
+		};
+	}, [
+		members,
+		slots.toolPresentation,
+		strings.tools
+	]);
 	return /* @__PURE__ */ jsx("div", {
 		className: "py-1.5 text-sm",
 		"data-testid": "tool-rollup",
@@ -916,7 +959,7 @@ function RollupGroup({ members, message }) {
 				"aria-hidden": "true",
 				children: "●"
 			}), /* @__PURE__ */ jsx("span", {
-				className: "font-mono text-[13px] theme-muted-text min-w-0 truncate",
+				className: cx("text-[13px] min-w-0 truncate", allNamed ? "theme-text" : "font-mono theme-muted-text"),
 				children: sentence
 			})] }),
 			panelClassName: "ml-1.5 mt-0.5 rounded-md bg-(--theme-muted-panel-bg)/40 px-2",
@@ -937,6 +980,9 @@ function CallGroup({ members, message }) {
 	const name = members[0]?.part.name ?? "";
 	const Tool = slots.toolRenderers?.[name];
 	const header = toolHeaderFor(name);
+	const first = members[0]?.part;
+	const presentation = first ? slots.toolPresentation?.(first) : void 0;
+	const drawFolded = Tool && !(presentation && !presentation.open);
 	const failed = members.filter((m) => m.part.status === "error").length;
 	const status = failed === members.length ? "error" : "ok";
 	return /* @__PURE__ */ jsxs("div", {
@@ -951,8 +997,8 @@ function CallGroup({ members, message }) {
 				...members[0]?.part,
 				status
 			} }), /* @__PURE__ */ jsxs("span", {
-				className: "font-mono text-[13px] leading-5 min-w-0 truncate",
-				children: [t.callGroup(header.label, members.length), failed > 0 && /* @__PURE__ */ jsxs("span", {
+				className: cx("text-[13px] leading-5 min-w-0 truncate", presentation?.group ? "theme-text" : "font-mono"),
+				children: [presentation?.group?.(members.length) ?? t.callGroup(header.label, members.length), failed > 0 && /* @__PURE__ */ jsxs("span", {
 					className: "text-(--theme-error-text)",
 					children: [" · ", t.failedCount(failed)]
 				})]
@@ -962,7 +1008,7 @@ function CallGroup({ members, message }) {
 				part: m.part,
 				message
 			}, m.index))
-		}), !open && Tool && members.map(({ part, index }) => {
+		}), !open && drawFolded && members.map(({ part, index }) => {
 			const args = summarizeToolArgs(header.arg, part.args);
 			return /* @__PURE__ */ jsxs("div", {
 				className: "mt-1.5 min-w-0 sm:ml-5 has-[>[data-drawing]:empty]:hidden",
@@ -985,7 +1031,15 @@ function AgentMessageParts({ message, isStreaming, onApprovalAnswer }) {
 	const parts = message.parts ?? [];
 	const { slots } = useChatConfig();
 	const toolRenderers = slots.toolRenderers;
-	const items = useMemo(() => buildRenderItems(parts, (name) => !!toolRenderers?.[name]), [parts, toolRenderers]);
+	const toolPresentation = slots.toolPresentation;
+	const items = useMemo(() => buildRenderItems(parts, (name) => !!toolRenderers?.[name], (part) => {
+		const p = toolPresentation?.(part);
+		return !!p?.rollup && !p.open;
+	}), [
+		parts,
+		toolRenderers,
+		toolPresentation
+	]);
 	const lastIndex = parts.length - 1;
 	return /* @__PURE__ */ jsx("div", {
 		className: "w-full",

package/dist/ai/core/ChatProvider.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import type { ChatAdapter, ChatToolOption } from '../adapter/types.js';
-import type { ApprovalAnswerValue, AttachmentMeta, ChatModel, ChatNavigation, ChatUser, Conversation, ConversationSummary, ChatMessage as Message, MessagePart, ProviderInfo, ProviderIssue, UnreachableSession } from '../types.js';
+import type { ApprovalAnswerValue, AttachmentMeta, ChatModel, ChatNavigation, ChatUser, Conversation, ConversationSummary, ChatMessage as Message, MessagePart, ProviderInfo, ProviderIssue, TokenUsage, UnreachableSession } from '../types.js';
 import { type ChatUIConfig } from './config.js';
 import { type SidebarPresentation, type SidebarState } from './sidebarState.js';
 interface ChatContextValue {
@@ -67,6 +67,8 @@ export interface ChatStream {
     streamingContent: string;
     streamingReasoning: string;
     streamingParts: MessagePart[];
+    /** Tokens the streaming reply has used so far, when the stream reports them. */
+    streamingUsage: TokenUsage | null;
     thinkingStartTime: number | null;
 }
 /** A model's display name by its id, when the adapter listed one; undefined