@parallelworks/ui 0.83.3 → 0.84.0

package/dist/ai/core/ChatProvider.js

@@ -1,6 +1,6 @@
 import { toast } from "../../components/Toast.js";
 import { usePersistedState } from "../../components/Provider.js";
-import { applyPartDelta, finalizeParts, toolTurnMessages } from "./parts.js";
+import { applyPartDelta, finalizeParts, splitAnswer, toolTurnMessages } from "./parts.js";
 import { chatReducer, initialState } from "./chatReducer.js";
 import { ChatConfigProvider, resolveChatConfig } from "./config.js";
 import { providerIssueFor } from "./providerIssues.js";
@@ -88,7 +88,7 @@ function useChatStream() {
 function ChatProvider({ adapter, currentUser, navigation, activeConversationId = null, config, sidebar: sidebarProp, onSidebarChange, drawerOpen: drawerOpenProp, onDrawerOpenChange, children }) {
 	const [state, dispatch] = useReducer(chatReducer, initialState);
 	const hasLoadedConversationsRef = useRef(false);
-	const { onStreamingChunk, startStreaming, stopAnimationLoop, resetAnimationRefs, targetStreamContentRef, streamActiveRef, streamingConversationIdRef, backgroundStreamsRef, abortControllerRef } = useSSEStream(dispatch);
+	const { onStreamingChunk, startStreaming, stopAnimationLoop, drainReveal, afterReveal, resetAnimationRefs, targetStreamContentRef, streamActiveRef, streamingConversationIdRef, backgroundStreamsRef, abortControllerRef } = useSSEStream(dispatch);
 	const currentConversationIdRef = useRef(null);
 	const [storedModel, storeModel] = usePersistedState("aiChat.model", null);
 	const storedModelRef = useRef(storedModel);
@@ -338,9 +338,15 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 				if (thinkingStart === null) thinkingStart = Date.now();
 			};
 			let liveParts = [];
+			let liveText = "";
 			const { content: assistantContent, messageId: assistantMessageId, toolCalls, model: resolvedModel, reasoning: assistantReasoning, responsesOutput } = await adapter.streamCompletion(request, {
 				onContent: (chunk) => {
 					markStreamStart();
+					liveText += chunk;
+					if (liveParts.length) liveParts = applyPartDelta(liveParts, {
+						type: "text",
+						text: chunk
+					});
 					onStreamingChunk(chunk);
 				},
 				onReasoning: (reasoning) => {
@@ -354,6 +360,13 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 					const bgStream = backgroundStreamsRef.current.get(targetConversationId);
 					if (bgStream) bgStream.reasoning += reasoning;
 				},
+				onUsage: (usage) => {
+					dispatch({
+						type: "SET_STREAMING_USAGE",
+						usage,
+						conversationId: targetConversationId
+					});
+				},
 				onMessageId: (messageId) => {
 					markStreamStart();
 					const bgStream = backgroundStreamsRef.current.get(targetConversationId);
@@ -362,16 +375,20 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 				onPart: (delta) => {
 					markStreamStart();
 					if (routePart?.(delta)) return;
-					liveParts = applyPartDelta(liveParts, delta);
-					dispatch({
+					liveParts = applyPartDelta(liveParts.length || !liveText ? liveParts : [{
+						kind: "text",
+						text: liveText
+					}], delta);
+					afterReveal(() => dispatch({
 						type: "APPLY_STREAMING_PART",
 						delta,
 						conversationId: targetConversationId
-					});
+					}));
 					const bgStream = backgroundStreamsRef.current.get(targetConversationId);
 					if (bgStream) bgStream.parts = liveParts;
 				}
 			}, controller.signal);
+			await drainReveal();
 			const thinkingDuration = assistantReasoning && thinkingStart !== null ? (thinkingEnd ?? Date.now()) - thinkingStart : null;
 			const assistantMessage = {
 				id: assistantMessageId || crypto.randomUUID(),
@@ -385,7 +402,7 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 				reasoning: assistantReasoning || void 0,
 				reasoningDuration: thinkingDuration ?? void 0,
 				responsesOutput: responsesOutput.length ? responsesOutput : void 0,
-				...liveParts.length ? { parts: finalizeParts(liveParts) } : {}
+				...liveParts.length ? splitAnswer(finalizeParts(liveParts)) : {}
 			};
 			dispatch({
 				type: "ADD_MESSAGE",
@@ -426,6 +443,8 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 		state.selectedProvider,
 		onStreamingChunk,
 		stopAnimationLoop,
+		drainReveal,
+		afterReveal,
 		streamingConversationIdRef,
 		backgroundStreamsRef,
 		abortControllerRef
@@ -977,12 +996,14 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 		streamingContent: state.streamingContent,
 		streamingReasoning: state.streamingReasoning,
 		streamingParts: state.streamingParts,
+		streamingUsage: state.streamingUsage,
 		thinkingStartTime: state.thinkingStartTime
 	}), [
 		state.isThinking,
 		state.streamingContent,
 		state.streamingReasoning,
 		state.streamingParts,
+		state.streamingUsage,
 		state.thinkingStartTime
 	]);
 	return /* @__PURE__ */ jsx(ChatConfigProvider, {

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

@@ -1,5 +1,5 @@
 import type { PartDelta } from '../adapter/types.js';
-import type { ChatMessage, ChatModel, Conversation, ConversationSummary, MessagePart, ProviderInfo, ProviderIssue, UnreachableSession } from '../types.js';
+import type { ChatMessage, ChatModel, Conversation, ConversationSummary, MessagePart, ProviderInfo, ProviderIssue, TokenUsage, UnreachableSession } from '../types.js';
 export interface ChatState {
     conversations: ConversationSummary[];
     currentConversation: Conversation | null;
@@ -19,6 +19,7 @@ export interface ChatState {
     streamingContent: string;
     streamingReasoning: string;
     streamingParts: MessagePart[];
+    streamingUsage: TokenUsage | null;
     thinkingStartTime: number | null;
     queuedMessages: ChatMessage[];
 }
@@ -70,6 +71,10 @@ export type ChatAction = {
 } | {
     type: 'CLEAR_STREAMING_CONTENT';
     conversationId?: string;
+} | {
+    type: 'SET_STREAMING_USAGE';
+    usage: TokenUsage;
+    conversationId: string;
 } | {
     type: 'ADD_MESSAGE';
     message: ChatMessage;

package/dist/ai/core/chatReducer.js

@@ -19,6 +19,7 @@ var initialState = {
 	streamingContent: "",
 	streamingReasoning: "",
 	streamingParts: [],
+	streamingUsage: null,
 	thinkingStartTime: null,
 	queuedMessages: []
 };
@@ -53,6 +54,7 @@ function chatReducer(state, action) {
 						streamingContent: "",
 						streamingReasoning: "",
 						streamingParts: [],
+						streamingUsage: null,
 						isStreaming: false,
 						isThinking: false,
 						thinkingStartTime: null,
@@ -67,6 +69,7 @@ function chatReducer(state, action) {
 				streamingContent: "",
 				streamingReasoning: "",
 				streamingParts: [],
+				streamingUsage: null,
 				isStreaming: false,
 				isThinking: false,
 				thinkingStartTime: null,
@@ -116,6 +119,10 @@ function chatReducer(state, action) {
 			return {
 				...state,
 				streamingContent: state.streamingContent + action.content,
+				streamingParts: state.streamingParts.length ? applyPartDelta(state.streamingParts, {
+					type: "text",
+					text: action.content
+				}) : state.streamingParts,
 				isThinking: false
 			};
 		case "APPEND_STREAMING_REASONING":
@@ -130,7 +137,16 @@ function chatReducer(state, action) {
 			if (state.currentConversation?.id !== action.conversationId) return state;
 			return {
 				...state,
-				streamingParts: applyPartDelta(state.streamingParts, action.delta)
+				streamingParts: applyPartDelta(state.streamingParts.length || !state.streamingContent || action.delta.type === "text" ? state.streamingParts : [{
+					kind: "text",
+					text: state.streamingContent
+				}], action.delta)
+			};
+		case "SET_STREAMING_USAGE":
+			if (state.currentConversation?.id !== action.conversationId) return state;
+			return {
+				...state,
+				streamingUsage: action.usage
 			};
 		case "CLEAR_STREAMING_CONTENT":
 			if (action.conversationId && state.currentConversation?.id !== action.conversationId) return state;
@@ -139,6 +155,7 @@ function chatReducer(state, action) {
 				streamingContent: "",
 				streamingReasoning: "",
 				streamingParts: [],
+				streamingUsage: null,
 				isThinking: false,
 				thinkingStartTime: null
 			};

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

@@ -1,7 +1,7 @@
 import { type ComponentType, type MouseEventHandler, type ReactNode } from 'react';
 import type { Components } from 'streamdown';
 import { type ChatStrings } from '../strings.js';
-import type { ApprovalAnswerValue, ApprovalPart, ChatLinkTarget, ChatMessage, CspKind, MessagePart, MessagePartKind, ToolCallPart } from '../types.js';
+import type { ApprovalAnswerValue, ApprovalPart, ChatLinkTarget, ChatMessage, CspKind, MessagePart, MessagePartKind, ToolCallPart, ToolPresentation } from '../types.js';
 export interface PartRendererProps {
     part: MessagePart;
     message: ChatMessage;
@@ -36,6 +36,7 @@ export interface ChatUIConfig {
         providerIcon?: (cspKind: CspKind, className?: string) => ReactNode;
         partRenderers?: Partial<Record<MessagePartKind, ComponentType<PartRendererProps>>>;
         toolRenderers?: Record<string, ComponentType<ToolRendererProps>>;
+        toolPresentation?: (part: ToolCallPart) => ToolPresentation | undefined;
     };
     strings?: {
         [S in keyof ChatStrings]?: Partial<ChatStrings[S]>;

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

@@ -6,12 +6,15 @@ import type { MessagePart } from '../types.js';
  *  and the provider's local accumulation. Unknown target ids are dropped
  *  rather than invented — an end without a start has nothing to render. */
 export declare function applyPartDelta(parts: MessagePart[], delta: PartDelta): MessagePart[];
-/** The wire history for an assistant turn whose tool calls the gateway ran:
- *  each round's calls, with the text that came before them, and each result,
- *  then the answer. A turn with no finished tool calls comes back as the
- *  answer alone. */
 export declare function toolTurnMessages(parts: MessagePart[] | null | undefined, answer: CompletionMessage): CompletionMessage[];
 /** A turn can end (completed or stopped) with tool calls still marked
  *  running — the transport died before their tool_end arrived. A stored
  *  message must not spin forever, so close them out as interrupted. */
 export declare function finalizeParts(parts: MessagePart[]): MessagePart[];
+/** A finished reply whose text was streamed among its parts: the text after
+ *  the last part is the answer, shown below them as the message's content,
+ *  the shape a stored conversation is read back in. */
+export declare function splitAnswer(parts: MessagePart[]): {
+    parts: MessagePart[];
+    content?: string | null;
+};

package/dist/ai/core/parts.js

@@ -102,6 +102,13 @@ function isStreamedText(part) {
 *  each round's calls, with the text that came before them, and each result,
 *  then the answer. A turn with no finished tool calls comes back as the
 *  answer alone. */
+function answerAfterCalls(parts, trailing, answer) {
+	if (parts.at(-1)?.kind === "text") return trailing || null;
+	const texts = parts.flatMap((p) => p.kind === "text" ? [p.text] : []);
+	const content = typeof answer.content === "string" ? answer.content : null;
+	if (!content || content === texts.join("\n\n") || content === texts.join("")) return null;
+	return content;
+}
 function toolTurnMessages(parts, answer) {
 	const rounds = [];
 	let text = "";
@@ -129,7 +136,7 @@ function toolTurnMessages(parts, answer) {
 	if (rounds.length === 0) return answer.content || answer.tool_calls?.length ? [answer] : [];
 	const final = hasText ? {
 		...answer,
-		content: text || null
+		content: answerAfterCalls(parts ?? [], text, answer)
 	} : answer;
 	return [...rounds.flatMap((round) => [{
 		role: "assistant",
@@ -158,5 +165,19 @@ function finalizeParts(parts) {
 		result: p.result ?? "interrupted"
 	} : p);
 }
+/** A finished reply whose text was streamed among its parts: the text after
+*  the last part is the answer, shown below them as the message's content,
+*  the shape a stored conversation is read back in. */
+function splitAnswer(parts) {
+	if (!parts.some((p) => p.kind === "text")) return { parts };
+	const last = parts.at(-1);
+	return last?.kind === "text" ? {
+		parts: parts.slice(0, -1),
+		content: last.text
+	} : {
+		parts,
+		content: null
+	};
+}
 //#endregion
-export { applyPartDelta, finalizeParts, toolTurnMessages };
+export { applyPartDelta, finalizeParts, splitAnswer, toolTurnMessages };

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

@@ -16,6 +16,10 @@ interface UseSSEStreamResult {
     stopAnimationLoop: () => {
         unrevealed: string;
     };
+    /** Resolves once the buffered text has been revealed, or after maxMs */
+    drainReveal: (maxMs?: number) => Promise<void>;
+    /** Runs fn once the text received so far has been revealed */
+    afterReveal: (fn: () => void) => void;
     /** Reset all animation refs (used when navigating away) */
     resetAnimationRefs: () => void;
     /** Ref to the target content buffer */
@@ -29,5 +33,9 @@ interface UseSSEStreamResult {
     /** AbortController ref for canceling fetch requests */
     abortControllerRef: React.MutableRefObject<AbortController | null>;
 }
+/** Moves a reveal boundary to the end of the word it falls in, when that end is near. */
+export declare function toWordEnd(text: string, end: number): number;
+/** Characters to reveal after dt ms with remaining characters buffered. */
+export declare function revealCount(remaining: number, dt: number): number;
 export declare function useSSEStream(dispatch: React.Dispatch<ChatAction>): UseSSEStreamResult;
 export {};

package/dist/ai/core/useSSEStream.js

@@ -1,40 +1,74 @@
 import { useCallback, useEffect, useRef } from "react";
 //#region src/ai/core/useSSEStream.ts
+var MIN_CHARS_PER_MS = .12;
+var CATCH_UP_MS = 300;
+var MIN_DISPATCH_MS = 15;
+var WORD_RUN_ON = 16;
+/** Moves a reveal boundary to the end of the word it falls in, when that end is near. */
+function toWordEnd(text, end) {
+	if (end >= text.length || /\s/.test(text[end - 1] ?? " ")) return end;
+	const limit = Math.min(text.length, end + WORD_RUN_ON);
+	for (let i = end; i < limit; i++) if (/\s/.test(text[i] ?? "")) return i;
+	return end;
+}
+/** Characters to reveal after dt ms with remaining characters buffered. */
+function revealCount(remaining, dt) {
+	if (remaining <= 0) return 0;
+	const rate = Math.max(MIN_CHARS_PER_MS, remaining / CATCH_UP_MS);
+	return Math.min(remaining, Math.max(1, Math.round(rate * dt)));
+}
 function useSSEStream(dispatch) {
 	const targetStreamContentRef = useRef("");
 	const revealedLengthRef = useRef(0);
 	const streamRafRef = useRef(null);
 	const streamActiveRef = useRef(false);
-	const lastFrameTimeRef = useRef(0);
-	const lastDispatchTimeRef = useRef(0);
+	const lastRevealTimeRef = useRef(0);
+	const drainWaitersRef = useRef([]);
+	const pendingRef = useRef([]);
 	const streamingConversationIdRef = useRef(null);
 	const backgroundStreamsRef = useRef(/* @__PURE__ */ new Map());
 	const abortControllerRef = useRef(null);
+	const runPending = useCallback((revealed) => {
+		while (pendingRef.current.length && (pendingRef.current[0]?.at ?? 0) <= revealed) pendingRef.current.shift()?.fn();
+	}, []);
+	const settleDrain = useCallback(() => {
+		const waiters = drainWaitersRef.current;
+		drainWaitersRef.current = [];
+		for (const resolve of waiters) resolve();
+	}, []);
 	const animateStreamContent = useCallback(() => {
 		const now = performance.now();
 		const target = targetStreamContentRef.current;
 		const revealed = revealedLengthRef.current;
 		const remaining = target.length - revealed;
 		const conversationId = streamingConversationIdRef.current;
-		const timeSinceDispatch = now - lastDispatchTimeRef.current;
-		if (remaining > 0 && timeSinceDispatch >= 32 && conversationId) {
-			const dt = lastFrameTimeRef.current ? now - lastFrameTimeRef.current : 32;
-			const newRevealed = revealed + Math.min(remaining, Math.max(1, Math.round((remaining > 360 ? .48 : .24) * dt)));
-			revealedLengthRef.current = newRevealed;
-			dispatch({
-				type: "APPEND_STREAMING_CONTENT",
-				content: target.slice(revealed, newRevealed),
-				conversationId
-			});
-			lastDispatchTimeRef.current = now;
+		if (remaining > 0 && conversationId) {
+			if (!lastRevealTimeRef.current) lastRevealTimeRef.current = now - MIN_DISPATCH_MS;
+			const dt = now - lastRevealTimeRef.current;
+			if (dt >= MIN_DISPATCH_MS) {
+				const newRevealed = toWordEnd(target, revealed + revealCount(remaining, dt));
+				revealedLengthRef.current = newRevealed;
+				dispatch({
+					type: "APPEND_STREAMING_CONTENT",
+					content: target.slice(revealed, newRevealed),
+					conversationId
+				});
+				lastRevealTimeRef.current = now;
+				runPending(newRevealed);
+			}
 		}
-		lastFrameTimeRef.current = now;
-		if (streamActiveRef.current || revealedLengthRef.current < targetStreamContentRef.current.length) streamRafRef.current = requestAnimationFrame(animateStreamContent);
-		else {
-			streamRafRef.current = null;
-			lastFrameTimeRef.current = 0;
+		const caughtUp = revealedLengthRef.current >= targetStreamContentRef.current.length;
+		if (caughtUp) {
+			settleDrain();
+			lastRevealTimeRef.current = 0;
 		}
-	}, [dispatch]);
+		if (streamActiveRef.current || !caughtUp) streamRafRef.current = requestAnimationFrame(animateStreamContent);
+		else streamRafRef.current = null;
+	}, [
+		dispatch,
+		settleDrain,
+		runPending
+	]);
 	const onStreamingChunk = useCallback((chunk) => {
 		const convId = streamingConversationIdRef.current;
 		if (convId) {
@@ -55,10 +89,32 @@ function useSSEStream(dispatch) {
 			cancelAnimationFrame(streamRafRef.current);
 			streamRafRef.current = null;
 		}
+		runPending(Number.POSITIVE_INFINITY);
 		targetStreamContentRef.current = "";
 		revealedLengthRef.current = 0;
-		lastFrameTimeRef.current = 0;
-		lastDispatchTimeRef.current = 0;
+		lastRevealTimeRef.current = 0;
+		settleDrain();
+	}, [settleDrain, runPending]);
+	const drainReveal = useCallback((maxMs = 1500) => {
+		if (streamRafRef.current === null || revealedLengthRef.current >= targetStreamContentRef.current.length) return Promise.resolve();
+		return new Promise((resolve) => {
+			const timer = setTimeout(resolve, maxMs);
+			drainWaitersRef.current.push(() => {
+				clearTimeout(timer);
+				resolve();
+			});
+		});
+	}, []);
+	const afterReveal = useCallback((fn) => {
+		const at = targetStreamContentRef.current.length;
+		if (!streamActiveRef.current || revealedLengthRef.current >= at && pendingRef.current.length === 0) {
+			fn();
+			return;
+		}
+		pendingRef.current.push({
+			at,
+			fn
+		});
 	}, []);
 	const stopAnimationLoop = useCallback(() => {
 		const unrevealed = targetStreamContentRef.current.slice(revealedLengthRef.current);
@@ -74,6 +130,8 @@ function useSSEStream(dispatch) {
 		onStreamingChunk,
 		startStreaming,
 		stopAnimationLoop,
+		drainReveal,
+		afterReveal,
 		resetAnimationRefs,
 		targetStreamContentRef,
 		streamActiveRef,
@@ -83,4 +141,4 @@ function useSSEStream(dispatch) {
 	};
 }
 //#endregion
-export { useSSEStream };
+export { revealCount, toWordEnd, useSSEStream };

package/dist/ai/index.js

@@ -1,7 +1,7 @@
 import { ChatAdapterError } from "./adapter/types.js";
 import { classifyPseudoUserMessage } from "./agent/classifier.js";
 import { defaultToolStrings } from "./agent/toolStrings.js";
-import { AGENT_COLOR_NAMES, agentColorHex, bashExitCode, clip, fullToolArgs, isGroupableTool, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, summarizeToolArgs, toolHeaderFor, toolSummary } from "./agent/toolfmt.js";
+import { AGENT_COLOR_NAMES, agentColorHex, bashExitCode, clip, fullToolArgs, isGroupableTool, resultFailed, rollupClauses, rollupSentence, sanitizeLabel, sanitizePanelText, summarizeToolArgs, toolHeaderFor, toolSummary } from "./agent/toolfmt.js";
 import { MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, computeEditDiff, computeWriteRows, editSummary, isEditDiffTool, lineDelta, parseEditArgs, wordEmphasisRanges } from "./agent/diff.js";
 import { languageForPath, tokenizeDiffLines } from "./agent/diffHighlight.js";
 import { DEFAULT_PERMISSION_MODE, NAMED_PERMISSION_MODES, clampPermissionMode, isNamedPermissionMode, permissionModesUpTo } from "./agent/permissions.js";
@@ -46,4 +46,4 @@ import ChatMessageList from "./components/ChatMessageList.js";
 import SessionView from "./components/SessionView.js";
 import ChatThread from "./components/ChatThread.js";
 import { NoticeBar, NoticeCard, OutputCard } from "./ui/Notice.js";
-export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, CHAT_COLUMN_SCOPE, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatStage, ChatThread, ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, ConversationLayout, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ManageProvidersLink, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, SessionView, ShareButton, ShareDialog, SidebarEmpty, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarRowBody, SidebarRowTitle, SidebarToggle, StageList, StageListRowContent, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, computeEditDiff, computeWriteRows, defaultChatStrings, defaultToolStrings, editSummary, finalizeParts, firstNonEmptyLine, fullToolArgs, getGreeting, getProviderKeyFromModelId, groupConversationsByDate, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, providerIssueFor, replyText, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, sidebarDrawerProps, slashMatches, stageListRowClassName, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useChatStream, useConversationActions, useConversationShortcuts, useDragDrop, useKeyboardShortcuts, useRowDialogs, useSessionMenu, wordEmphasisRanges };
+export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, CHAT_COLUMN_SCOPE, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatStage, ChatThread, ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, ConversationLayout, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ManageProvidersLink, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, SessionView, ShareButton, ShareDialog, SidebarEmpty, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarRowBody, SidebarRowTitle, SidebarToggle, StageList, StageListRowContent, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, computeEditDiff, computeWriteRows, defaultChatStrings, defaultToolStrings, editSummary, finalizeParts, firstNonEmptyLine, fullToolArgs, getGreeting, getProviderKeyFromModelId, groupConversationsByDate, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, providerIssueFor, replyText, resolveChatConfig, resultFailed, rollupClauses, rollupSentence, sanitizeLabel, sanitizePanelText, sidebarDrawerProps, slashMatches, stageListRowClassName, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useChatStream, useConversationActions, useConversationShortcuts, useDragDrop, useKeyboardShortcuts, useRowDialogs, useSessionMenu, wordEmphasisRanges };

package/dist/ai/types.d.ts

@@ -70,6 +70,20 @@ export interface ToolDecision {
     /** The reader changed the call's arguments before allowing it. */
     edited?: boolean;
 }
+/** How a host names one of its own tool calls in a transcript, in place of
+ *  the raw call: words a person reads, with the arguments behind the row. */
+export interface ToolPresentation {
+    /** The row's label, such as "Checked costs for misc-dev". */
+    label: string;
+    /** One line under a finished row, such as "3 resources, $67.50". */
+    summary?: string;
+    /** A run of this tool's calls folded into one row, such as "Checked costs for 12 allocations". */
+    group?: (count: number) => string;
+    /** This tool's clause in a row that folds different tools, such as "checked costs for 12 allocations". */
+    rollup?: (count: number) => string;
+    /** Keeps the host's drawing open under the row, as for a card that asks or shows live progress. Otherwise it opens with the row. */
+    open?: boolean;
+}
 export interface ToolCallPart {
     kind: 'tool_call';
     id: string;

package/dist/components/Avatar.d.ts

@@ -5,7 +5,9 @@ export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
  *  its color, tells it from a person's. */
 export type AvatarKind = 'person' | 'agent';
 export type AvatarShape = 'circle' | 'square';
-export interface AvatarProps {
+/** Any other span attribute and the ref reach the avatar's outer element, so it can be a Tooltip's
+ *  or a popover's direct child. */
+export interface AvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
     /** Image URL. Until it loads, or when it fails, the initials of `name` show. */
     src?: string | null | undefined;
     name?: string | undefined;
@@ -50,7 +52,7 @@ export declare function avatarInitials(name: string | undefined, { twoLetters }?
  *  categorical palette (the default), or by kind, where people share `--avatar-person` (with
  *  `--avatar-person-text`) and agents `--avatar-agent` (with `--avatar-agent-text`, and the
  *  edge `--avatar-agent-ring`). */
-export declare function Avatar({ src, name, kind, shape, colorKey, colorClassName, size: sizeProp, status, decorative, tooltip, className, }: AvatarProps): import("react").JSX.Element;
+export declare function Avatar({ src, name, kind, shape, colorKey, colorClassName, size: sizeProp, status, decorative, tooltip, className, ...rest }: AvatarProps): import("react").JSX.Element;
 /** Any other span attribute and the ref reach the stack's element, so the group can be a
  *  Tooltip's or a popover's direct child. */
 export interface AvatarGroupProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {

package/dist/components/Avatar.js

@@ -70,7 +70,7 @@ var AvatarGroupContext = createContext(null);
 *  categorical palette (the default), or by kind, where people share `--avatar-person` (with
 *  `--avatar-person-text`) and agents `--avatar-agent` (with `--avatar-agent-text`, and the
 *  edge `--avatar-agent-ring`). */
-function Avatar$1({ src, name, kind = "person", shape = kind === "agent" ? "square" : "circle", colorKey, colorClassName, size: sizeProp, status, decorative = false, tooltip = false, className }) {
+function Avatar$1({ src, name, kind = "person", shape = kind === "agent" ? "square" : "circle", colorKey, colorClassName, size: sizeProp, status, decorative = false, tooltip = false, className, ...rest }) {
 	const { common } = useStrings();
 	const byKind = useAvatarColoring() === "kind";
 	const group = use(AvatarGroupContext);
@@ -82,6 +82,7 @@ function Avatar$1({ src, name, kind = "person", shape = kind === "agent" ? "squa
 	const radius = shape === "square" ? SQUARE_CLASSES[size] : "rounded-full";
 	const fill = colorClassName ?? (byKind ? KIND_CLASSES[kind] : colorBy ? categoryClasses(colorBy) : "bg-gradient-to-br from-[var(--gradient-start,var(--theme-accent))] to-[var(--gradient-mid,var(--theme-link))] text-(--theme-accent-text)");
 	const avatar = /* @__PURE__ */ jsxs("span", {
+		...rest,
 		...decorative ? { "aria-hidden": true } : {
 			role: "img",
 			"aria-label": named

package/dist/components/Kbd.d.ts

@@ -1,3 +1,4 @@
+import { type ComponentPropsWithRef } from 'react';
 import { type UIStrings } from './Provider.js';
 type KeyNames = UIStrings['keys'];
 /** Whether the keyboard is an Apple one, whose Command key does what Control does elsewhere. */
@@ -21,7 +22,9 @@ export declare function useShortcutFormat(platform?: KeyPlatform): {
 };
 export type KbdVariant = 'keycap' | 'plain';
 export type KbdSize = 'xs' | 'sm';
-export interface KbdProps {
+/** Any other attribute and the ref reach the outer `<kbd>`, so it can be a Tooltip's or a popover's
+ *  direct child. */
+export interface KbdProps extends Omit<ComponentPropsWithRef<'kbd'>, 'children' | 'className'> {
     /** A combination joined by `+`, such as `Mod+K` (Command on an Apple keyboard, Control
      *  elsewhere) or `Shift+Enter`; or keys side by side, as given: `['↑', '↓']`, `['1–9']`. */
     keys: string | readonly string[];
@@ -36,5 +39,5 @@ export interface KbdProps {
 /** Keys to press, as keycaps: a muted fill, a hairline border and monospace text. Off an
  *  Apple keyboard the keys of a combination are joined with a plus, as the platform writes
  *  them. Renders `<kbd>`, with a `<kbd>` for each key of a combination. */
-export declare function Kbd({ keys, variant, size, platform, className }: KbdProps): import("react").JSX.Element;
+export declare function Kbd({ keys, variant, size, platform, className, ...rest }: KbdProps): import("react").JSX.Element;
 export {};

package/dist/components/Kbd.js

@@ -137,22 +137,25 @@ var keycap = {
 /** Keys to press, as keycaps: a muted fill, a hairline border and monospace text. Off an
 *  Apple keyboard the keys of a combination are joined with a plus, as the platform writes
 *  them. Renders `<kbd>`, with a `<kbd>` for each key of a combination. */
-function Kbd({ keys, variant = "keycap", size = "sm", platform, className }) {
+function Kbd({ keys, variant = "keycap", size = "sm", platform, className, ...rest }) {
 	const { keys: names } = useStrings();
 	const on = platform ?? currentPlatform();
 	const parts = formatShortcut(keys, names, on);
 	const chord = typeof keys === "string";
 	if (variant === "plain") return /* @__PURE__ */ jsx("kbd", {
+		...rest,
 		className: cx("font-sans text-(--theme-muted-text-color) tabular-nums tracking-wide", size === "xs" ? "text-[10px]" : "text-[11px]", className),
 		children: chord ? shortcutText(keys, names, on) : parts.join(" ")
 	});
 	const cap = cx("inline-flex items-center justify-center rounded border border-(--theme-border) bg-(--theme-muted-panel-bg) font-mono leading-none font-normal text-(--theme-app) not-italic", keycap[size]);
 	if (parts.length === 1) return /* @__PURE__ */ jsx("kbd", {
+		...rest,
 		className: cx(cap, className),
 		children: parts[0]
 	});
 	const plus = chord && on !== "apple";
 	return /* @__PURE__ */ jsx("kbd", {
+		...rest,
 		className: cx("inline-flex flex-wrap items-center gap-0.5 align-middle", className),
 		children: parts.map((part, i) => /* @__PURE__ */ jsxs(Fragment, { children: [plus && i > 0 && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",

package/dist/components/LetterBadge.d.ts

@@ -1,6 +1,10 @@
+import type { ComponentPropsWithRef } from 'react';
 /** A compact letter badge ("AI", "PUB", "SSH") used as a type mark in place of
  * an icon. Size the box and text via className (e.g. "h-5 w-5 text-[8px]"). */
-export declare function LetterBadge({ text, className }: {
+/** Any other span attribute and the ref reach its element, so it can be a Tooltip's or a popover's
+ *  direct child. */
+export interface LetterBadgeProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
     text: string;
-    className?: string;
-}): import("react").JSX.Element;
+    className?: string | undefined;
+}
+export declare function LetterBadge({ text, className, ...rest }: LetterBadgeProps): import("react").JSX.Element;

package/dist/components/LetterBadge.js

@@ -1,10 +1,9 @@
 import { cx } from "../cx.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/LetterBadge.tsx
-/** A compact letter badge ("AI", "PUB", "SSH") used as a type mark in place of
-* an icon. Size the box and text via className (e.g. "h-5 w-5 text-[8px]"). */
-function LetterBadge({ text, className }) {
+function LetterBadge({ text, className, ...rest }) {
 	return /* @__PURE__ */ jsx("span", {
+		...rest,
 		className: cx("inline-flex shrink-0 items-center justify-center rounded-[3px] border theme-border font-bold leading-none tracking-tight text-(--theme-app)", className),
 		children: text
 	});

package/dist/components/MarkdownImpl.d.ts

@@ -1,3 +1,6 @@
 import 'katex/dist/katex.min.css';
 import type { MarkdownProps } from './Markdown.js';
+/** While a reply streams, a table's opening rows read as stray pipes until its
+ *  delimiter row arrives; they are held back until then. */
+export declare function withoutUnfinishedTable(text: string): string;
 export default function MarkdownImpl({ children, isStreaming, controls, components, httpsImagesOnly, compact, }: MarkdownProps): import("react").JSX.Element;

package/dist/components/MarkdownImpl.js

@@ -112,6 +112,20 @@ function makeCode(controls, diagrams) {
 		});
 	};
 }
+var TABLE_ROW = /^\s*\|/;
+var TABLE_DELIMITER = /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)*\|?\s*$/;
+/** While a reply streams, a table's opening rows read as stray pipes until its
+*  delimiter row arrives; they are held back until then. */
+function withoutUnfinishedTable(text) {
+	if ((text.match(/^\s*(```|~~~)/gm)?.length ?? 0) % 2 === 1) return text;
+	const lines = text.split("\n");
+	let start = lines.length;
+	while (start > 0 && TABLE_ROW.test(lines[start - 1] ?? "")) start--;
+	if (start === lines.length) return text;
+	const rows = lines.slice(start);
+	if (rows.length >= 2 && TABLE_DELIMITER.test(rows[1] ?? "")) return text;
+	return lines.slice(0, start).join("\n");
+}
 function MarkdownImpl({ children, isStreaming, controls, components, httpsImagesOnly, compact }) {
 	const needsMermaid = !!children && children.includes("```mermaid");
 	const [, setMermaidReady] = useState(() => !!pluginsWithMermaid);
@@ -158,9 +172,9 @@ function MarkdownImpl({ children, isStreaming, controls, components, httpsImages
 				}),
 				...components
 			},
-			children: children || ""
+			children: (isStreaming ? withoutUnfinishedTable(children || "") : children) || ""
 		})
 	});
 }
 //#endregion
-export { MarkdownImpl as default };
+export { MarkdownImpl as default, withoutUnfinishedTable };