@parallelworks/ui 0.75.1 → 0.77.0

package/README.md

@@ -924,6 +924,19 @@ OpenAI-compatible transport sends them as the `X-Platform-Tools` header
 (`TOOLS_HEADER`), comma-separated and empty when every tool is off. A request
 without a tool choice sends no header.
 
+A tool that changes something sets `asksFirst`, which the menu shows, and its
+calls wait for the reader. The gateway streams the call, then a `toolApproval`
+chunk (`toolCallId`, optional `expiresAt`) in place of a result, and ends the
+reply there. Chat shows a confirm under the call with Allow, Deny and Deny
+with feedback, which expires at `expiresAt`. The answer goes back through
+`useChat().answerToolApproval` as a request with no new user turn:
+`StreamRequest.resume` (`messageId`, `toolCallId`, `allowed`, optional
+`feedback`), sent as `resume` in the body. The gateway's `toolResult` for the
+call lands on the reply that paused, and the model's answer streams as a new
+reply under it. In a shared conversation only the person whose message
+started the turn may answer; others see whom it waits on, and a turn someone
+else started says whose access its tools ran with.
+
 Tailwind v4 consumers add the chat rules (markdown rendering, streaming
 animations) and streamdown's classes next to the theme contract:
 

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

@@ -24,6 +24,7 @@ function createOpenAICompatibleStream(config) {
 			messages: req.messages,
 			stream: true
 		};
+		if (req.resume && !useResponses) body["resume"] = req.resume;
 		const res = await (config.fetch ?? globalThis.fetch.bind(globalThis))(url, {
 			method: "POST",
 			headers: requestHeaders(config.buildHeaders?.(req), req.tools),

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

@@ -1,6 +1,6 @@
 import type { ToolCall, ToolCallDelta } from '../../types.js';
 import type { PartDelta } from '../types.js';
-import type { ToolResultChunk } from './wire.js';
+import type { ToolApprovalChunk, ToolResultChunk } from './wire.js';
 export type ParsedSSELine = {
     id?: string | undefined;
     messageId?: string | undefined;
@@ -8,6 +8,7 @@ export type ParsedSSELine = {
     reasoningContent?: string | undefined;
     toolCalls?: ToolCallDelta[] | undefined;
     toolResult?: ToolResultChunk | undefined;
+    toolApproval?: ToolApprovalChunk | undefined;
     finishReason?: string | null | undefined;
     model?: string | undefined;
     error?: string | undefined;

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

@@ -15,6 +15,7 @@ function parseSSELine(line) {
 			reasoningContent: choice?.delta?.reasoning_content,
 			toolCalls: choice?.delta?.tool_calls ?? void 0,
 			toolResult: chunk.toolResult,
+			toolApproval: chunk.toolApproval,
 			finishReason: choice?.finish_reason,
 			model: chunk.model
 		};
@@ -108,6 +109,25 @@ async function processSSEStream(reader, onContent, onToolCall, onError, onReason
 						...parsed.toolResult.isError ? { isError: true } : {}
 					});
 				}
+				if (parsed.toolApproval) {
+					const { toolCallId, expiresAt } = parsed.toolApproval;
+					answeredToolCalls.add(toolCallId);
+					onPart?.({
+						type: "tool_wait",
+						id: toolCallId
+					});
+					onPart?.({
+						type: "approval_request",
+						approval: {
+							kind: "approval",
+							id: toolCallId,
+							approvalKind: "confirm",
+							subject: "call",
+							canAllowDirectory: false,
+							...expiresAt ? { expiresAt } : {}
+						}
+					});
+				}
 			}
 		}
 	}

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

@@ -31,9 +31,14 @@ export interface CompletionChunk {
     created?: number;
     messageId?: string;
     toolResult?: ToolResultChunk;
+    toolApproval?: ToolApprovalChunk;
     choices?: CompletionChunkChoice[] | null;
     usage?: TokenUsage;
 }
+export interface ToolApprovalChunk {
+    toolCallId: string;
+    expiresAt?: string;
+}
 export interface ToolResultChunk {
     toolCallId: string;
     content: string;

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

@@ -21,6 +21,14 @@ export interface StreamRequest {
     allocation?: string | null;
     useResponses?: boolean;
     tools?: string[];
+    resume?: ToolApprovalAnswer;
+}
+export interface ToolApprovalAnswer {
+    messageId: string;
+    toolCallId: string;
+    allowed: boolean;
+    feedback?: string;
+    tool?: string;
 }
 export interface StreamHandlers {
     onContent: (content: string) => void;
@@ -43,6 +51,9 @@ export type PartDelta = {
     type: 'tool_update';
     id: string;
     args: string;
+} | {
+    type: 'tool_wait';
+    id: string;
 } | {
     type: 'tool_end';
     id: string;
@@ -133,6 +144,7 @@ export interface ChatToolOption {
     id: string;
     label: string;
     description?: string;
+    asksFirst?: boolean;
 }
 export interface ChatToolsAdapter {
     list(): Promise<ChatToolOption[]>;

package/dist/ai/components/ChatActivity.d.ts

@@ -0,0 +1,2 @@
+/** An agent session's working line for the provider's reply, naming its current step. */
+export default function ChatActivity(): import("react").JSX.Element | null;

package/dist/ai/components/ChatActivity.js

@@ -0,0 +1,31 @@
+import { toolHeaderFor } from "../agent/toolfmt.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat, useChatStream } from "../core/ChatProvider.js";
+import ActivityLine from "./agent/ActivityLine.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { DateTime } from "luxon";
+//#region src/ai/components/ChatActivity.tsx
+/** 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 [startedAt, setStartedAt] = useState(null);
+	useEffect(() => {
+		setStartedAt(isStreaming ? DateTime.now().toUTC().toISO() : null);
+	}, [isStreaming]);
+	if (!isStreaming) return null;
+	const waiting = streamingParts.some((p) => p.kind === "approval" && !p.resolved);
+	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;
+	return /* @__PURE__ */ jsx(ActivityLine, {
+		testId: "chat-activity",
+		startedAt,
+		word
+	});
+}
+//#endregion
+export { ChatActivity as default };

package/dist/ai/components/ChatMessage.js

@@ -34,6 +34,11 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	const isTool = message.role === "tool";
 	const otherAuthor = isUser && showAuthor && message.author && currentUsername && message.author.username !== currentUsername ? message.author : void 0;
 	const isOtherUser = !!otherAuthor;
+	const asker = !isUser && showAuthor && currentUsername ? turnAuthor(message, allMessages) : void 0;
+	const otherAsker = asker && asker.username !== currentUsername ? asker : void 0;
+	const askerName = otherAsker ? otherAsker.name || otherAsker.username : void 0;
+	const partsMessage = askerName ? waitingOn(message, askerName) : message;
+	const approvalAnswer = askerName ? void 0 : onApprovalAnswer;
 	const isRightAligned = isUser && !isOtherUser;
 	const hasError = !!message.error;
 	const hasPastes = !!message.pastes?.length;
@@ -105,9 +110,9 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 		return /* @__PURE__ */ jsxs("div", {
 			className: cx("group py-3 w-full", !flush && "px-4"),
 			children: [/* @__PURE__ */ jsx(AgentMessageParts, {
-				message,
+				message: partsMessage,
 				isStreaming,
-				onApprovalAnswer
+				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: [
@@ -185,15 +190,15 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 						className: "mb-2",
 						children: /* @__PURE__ */ jsx("div", {
 							className: "flex items-center gap-x-1.5 text-sm theme-muted-text",
-							children: /* @__PURE__ */ jsx("span", { children: message.reasoningDuration ? tThinking.thoughtFor(formatDuration(message.reasoningDuration)) : tThinking.ranToolCalls(toolCallCount) })
+							children: /* @__PURE__ */ jsx("span", { children: message.reasoningDuration ? tThinking.thoughtFor(formatDuration(message.reasoningDuration)) : askerName ? tThinking.ranToolCallsAs(toolCallCount, askerName) : tThinking.ranToolCalls(toolCallCount) })
 						})
 					}),
 					!isUser && hasParts && /* @__PURE__ */ jsx("div", {
 						className: "mb-1",
 						children: /* @__PURE__ */ jsx(AgentMessageParts, {
-							message,
+							message: partsMessage,
 							isStreaming,
-							onApprovalAnswer
+							onApprovalAnswer: approvalAnswer
 						})
 					}),
 					otherAuthor && /* @__PURE__ */ jsx("span", {
@@ -294,5 +299,25 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	});
 }
 var ChatMessage_default = memo(ChatMessage);
+/** The author of the user message that started the turn a reply belongs to.
+*  A reply that resumes after an approval hangs under the reply it resumes. */
+function turnAuthor(message, allMessages) {
+	let parentId = message.parentId;
+	for (let hops = 0; parentId && hops < allMessages.length; hops++) {
+		const parent = allMessages.find((m) => m.id === parentId);
+		if (parent?.role !== "assistant") return parent?.role === "user" ? parent.author : void 0;
+		parentId = parent.parentId;
+	}
+}
+function waitingOn(message, name) {
+	if (!message.parts?.some((p) => p.kind === "approval")) return message;
+	return {
+		...message,
+		parts: message.parts.map((p) => p.kind === "approval" ? {
+			...p,
+			waitingOn: name
+		} : p)
+	};
+}
 //#endregion
 export { ChatMessage_default as default };

package/dist/ai/components/ChatThread.js

@@ -3,13 +3,13 @@ import { useChat } from "../core/ChatProvider.js";
 import BlockedGroupBanner from "./BlockedGroupBanner.js";
 import { ComposerControls, ComposerUsage, ConnectToolsLink } from "./ComposerChrome.js";
 import ProviderIssueBanner from "./ProviderIssueBanner.js";
-import { ShareButton } from "./ShareDialog.js";
+import { ShareButton, ToolResultsSharedNote } from "./ShareDialog.js";
 import SessionView from "./SessionView.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 //#region src/ai/components/ChatThread.tsx
 function ChatThread({ conversationId }) {
-	const { adapter, currentUser, currentConversation, loadConversation, loadProviders, sendMessage, retryMessage, isLoadingConversation, navigateToBranch, queuedMessages, removeQueuedMessage } = useChat();
+	const { adapter, currentUser, currentConversation, loadConversation, loadProviders, sendMessage, retryMessage, answerToolApproval, tools, isLoadingConversation, navigateToBranch, queuedMessages, removeQueuedMessage } = useChat();
 	const { slots, strings } = useChatConfig();
 	const requestedConversationIdRef = useRef(null);
 	useEffect(() => {
@@ -52,6 +52,7 @@ function ChatThread({ conversationId }) {
 			onRetry: (id) => void retryMessage(id)
 		} : {},
 		onNavigateBranch: navigateToBranch,
+		...canWrite ? { onApprovalAnswer: answerToolApproval } : {},
 		showAuthor,
 		currentUsername: currentUser.username,
 		loading: isLoadingConversation && !currentConversation,
@@ -60,7 +61,7 @@ function ChatThread({ conversationId }) {
 		composer: {
 			disabled: isLoadingConversation || !canWrite,
 			...canWrite ? {} : { placeholder: strings.thread.viewOnly },
-			settingsLeft: /* @__PURE__ */ jsxs(Fragment, { children: [currentConversation && currentConversation.isOwner !== false && /* @__PURE__ */ jsx(ShareButton, { conversationId }), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
+			settingsLeft: /* @__PURE__ */ jsxs(Fragment, { children: [currentConversation && currentConversation.isOwner !== false ? /* @__PURE__ */ jsx(ShareButton, { conversationId }) : tools.length > 0 && /* @__PURE__ */ jsx(ToolResultsSharedNote, {}), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
 			settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
 		}
 	});

package/dist/ai/components/ComposerAddMenu.js

@@ -46,12 +46,23 @@ function RowSwitch() {
 		children: /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full bg-white shadow-sm transition-transform duration-150 group-data-checked:translate-x-3 rtl:group-data-checked:-translate-x-3 motion-reduce:transition-none" })
 	});
 }
+function AsksFirst({ tool }) {
+	const t = useChatConfig().strings.composerMenu;
+	if (!tool.asksFirst) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "ml-1.5 shrink-0 text-xs theme-muted-text",
+		children: t.asksFirst
+	});
+}
 function ToolText({ tool, descriptionId }) {
 	return /* @__PURE__ */ jsxs("span", {
 		className: "min-w-0 flex-1",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "block truncate",
-			children: tool.label
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-baseline",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: tool.label
+			}), /* @__PURE__ */ jsx(AsksFirst, { tool })]
 		}), tool.description && /* @__PURE__ */ jsx("span", {
 			id: descriptionId,
 			className: "block truncate text-xs theme-muted-text",
@@ -106,9 +117,9 @@ function ToolsModalRow({ tool, enabled, onChange }) {
 		className: "flex cursor-pointer items-center gap-3 rounded-md px-2 py-2 hover:bg-(--theme-hover)",
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "block text-sm",
-				children: tool.label
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex items-baseline text-sm",
+				children: [tool.label, /* @__PURE__ */ jsx(AsksFirst, { tool })]
 			}), tool.description && /* @__PURE__ */ jsx("span", {
 				id: descriptionId,
 				className: "block text-xs theme-muted-text",

package/dist/ai/components/SessionView.js

@@ -4,6 +4,7 @@ import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
 import { escapeClosesLayer } from "../core/useKeyboardShortcuts.js";
 import ChatMessageList from "./ChatMessageList.js";
+import ChatActivity from "./ChatActivity.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/ai/components/SessionView.tsx
@@ -36,9 +37,11 @@ function SessionView({ sessionKey, messages, allMessages, streamingMessage, queu
 		inputRef.current?.addFiles(files);
 	}, []);
 	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped });
+	const activity = composer?.activity ?? (!turn && running ? /* @__PURE__ */ jsx(ChatActivity, {}) : void 0);
 	const input = /* @__PURE__ */ jsx(ChatInput, {
 		ref: inputRef,
 		...composer,
+		activity,
 		onSend,
 		conversationId: sessionKey,
 		disabled: loading || !!composer?.disabled,
@@ -87,7 +90,7 @@ function SessionView({ sessionKey, messages, allMessages, streamingMessage, queu
 					...footer ? { footer } : {},
 					...label ? { label } : {},
 					...flush ? { flush } : {},
-					...workingIndicator !== void 0 ? { workingIndicator } : {},
+					workingIndicator: workingIndicator ?? !activity,
 					inputElement: input
 				}),
 				error && input

package/dist/ai/components/ShareDialog.d.ts

@@ -8,4 +8,7 @@ export declare function ShareButton({ conversationId, disabled, }: {
     conversationId: string;
     disabled?: boolean;
 }): import("react").JSX.Element | null;
+/** Says that tool results in a shared conversation are visible to the
+ *  people it is shared with. */
+export declare function ToolResultsSharedNote(): import("react").JSX.Element;
 export {};

package/dist/ai/components/ShareDialog.js

@@ -249,21 +249,57 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 }
 function ShareButton({ conversationId, disabled = false }) {
 	const { strings } = useChatConfig();
-	const { adapter } = useChat();
+	const { adapter, tools } = useChat();
 	const [isOpen, setIsOpen] = useState(false);
+	const shared = useShared(conversationId, tools.length > 0 && !isOpen);
 	if (!adapter.sharing) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
-		type: "button",
-		onClick: () => setIsOpen(true),
-		disabled,
-		className: "flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] theme-muted-text transition-colors hover:theme-muted-panel hover:theme-text disabled:opacity-50",
-		title: strings.shareConversation.shareButton,
-		children: [/* @__PURE__ */ jsx(ShareIcon, { className: "h-3 w-3" }), strings.shareConversation.shareButton]
-	}), /* @__PURE__ */ jsx(ShareDialog, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setIsOpen(true),
+			disabled,
+			className: "flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] theme-muted-text transition-colors hover:theme-muted-panel hover:theme-text disabled:opacity-50",
+			title: strings.shareConversation.shareButton,
+			children: [/* @__PURE__ */ jsx(ShareIcon, { className: "h-3 w-3" }), strings.shareConversation.shareButton]
+		}),
+		shared && /* @__PURE__ */ jsx(ToolResultsSharedNote, {}),
+		/* @__PURE__ */ jsx(ShareDialog, {
+			conversationId,
+			isOpen,
+			onClose: () => setIsOpen(false)
+		})
+	] });
+}
+/** Says that tool results in a shared conversation are visible to the
+*  people it is shared with. */
+function ToolResultsSharedNote() {
+	const { strings } = useChatConfig();
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-[11px] theme-muted-text",
+		children: strings.shareConversation.toolResultsShared
+	});
+}
+/** Whether anyone else can read the conversation, checked while `check` is
+*  true: tool results in it are visible to them. */
+function useShared(conversationId, check) {
+	const { adapter } = useChat();
+	const sharing = adapter.sharing;
+	const [shared, setShared] = useState(false);
+	useEffect(() => {
+		if (!check || !sharing) return;
+		let current = true;
+		sharing.listPermissions(conversationId).then((permissions) => {
+			if (current) setShared(permissions.length > 0);
+		}, () => {});
+		return () => {
+			current = false;
+		};
+	}, [
 		conversationId,
-		isOpen,
-		onClose: () => setIsOpen(false)
-	})] });
+		check,
+		sharing
+	]);
+	return shared;
 }
 //#endregion
-export { ShareButton, ShareDialog as default };
+export { ShareButton, ToolResultsSharedNote, ShareDialog as default };

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

@@ -20,7 +20,7 @@ type RenderItem = {
     kind: 'rollup';
     members: RunMember[];
 };
-export declare function buildRenderItems(parts: MessagePart[]): RenderItem[];
+export declare function buildRenderItems(parts: MessagePart[], hostDrawn?: (toolName: string) => boolean): RenderItem[];
 export default function AgentMessageParts({ message, isStreaming, onApprovalAnswer, }: {
     message: PartRendererProps['message'];
     isStreaming?: boolean;

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

@@ -19,6 +19,7 @@ import { chatProseClasses } from "../../ui/prose.js";
 import { Reasoning, ReasoningBody } from "../Reasoning.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useId, useMemo, useState } from "react";
+import { DateTime } from "luxon";
 //#region src/ai/components/agent/AgentMessageParts.tsx
 var COLLAPSED_RESULT_LINES = 12;
 function LineSpans({ text, tokens, emphasis }) {
@@ -207,6 +208,13 @@ function ToolStatusDot({ part }) {
 			color: "var(--theme-muted-text-color)"
 		})
 	});
+	if (part.status === "waiting") return /* @__PURE__ */ jsx(StatusMark, {
+		status: t.approvalLabel,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "leading-none text-(--theme-accent)",
+			children: "●"
+		})
+	});
 	if (part.status === "error") return /* @__PURE__ */ jsx(StatusMark, {
 		status: t.failed,
 		children: /* @__PURE__ */ jsx("span", {
@@ -224,7 +232,10 @@ 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";
-function ToolCallBlock({ part }) {
+/** 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 ToolCallBlock({ part, children }) {
 	const { strings } = useChatConfig();
 	const t = strings.agentTranscript;
 	const [expanded, setExpanded] = useState(false);
@@ -271,7 +282,11 @@ function ToolCallBlock({ part }) {
 					children: fullToolArgs(header.arg, part.args)
 				}), /* @__PURE__ */ jsx(ResultBody, { part })]
 			}),
-			!isDiff && !expanded && /* @__PURE__ */ jsx("div", {
+			children && /* @__PURE__ */ jsx("div", {
+				className: "ml-5 mt-1.5 min-w-0",
+				children
+			}),
+			!children && !isDiff && !expanded && part.status !== "waiting" && /* @__PURE__ */ jsx("div", {
 				className: cx("ml-5 mt-0.5 truncate text-[13px]", part.status === "error" ? "text-(--theme-error-text)" : "theme-muted-text"),
 				children: summary
 			}),
@@ -390,11 +405,31 @@ function SubagentCard({ part }) {
 		})]
 	});
 }
+/** Whether the ISO time has passed, turning true when it does. */
+function useExpired(expiresAt) {
+	const [expired, setExpired] = useState(() => !!expiresAt && DateTime.fromISO(expiresAt) <= DateTime.now());
+	useEffect(() => {
+		if (!expiresAt || expired) return;
+		let timer;
+		const arm = () => {
+			const left = DateTime.fromISO(expiresAt).diffNow().toMillis();
+			if (left <= 0) {
+				setExpired(true);
+				return;
+			}
+			timer = setTimeout(arm, Math.min(left, 864e5));
+		};
+		arm();
+		return () => clearTimeout(timer);
+	}, [expiresAt, expired]);
+	return expired;
+}
 function ConfirmApproval({ part, onAnswer }) {
 	const { strings } = useChatConfig();
 	const { common } = useStrings();
 	const t = strings.agentTranscript;
 	const [feedback, setFeedback] = useState(null);
+	const expired = useExpired(part.expiresAt);
 	const answer = (a) => onAnswer?.(part.id, a);
 	const [allowLabel, denyLabel] = {
 		command: [t.allowOnce, t.deny],
@@ -411,9 +446,12 @@ function ConfirmApproval({ part, onAnswer }) {
 			className: "text-xs theme-muted-text",
 			children: part.reason
 		}),
-		!onAnswer ? /* @__PURE__ */ jsx("div", {
+		expired ? /* @__PURE__ */ jsx("div", {
 			className: "text-xs theme-muted-text",
-			children: t.approvalPending
+			children: t.approvalRequestExpired
+		}) : !onAnswer ? /* @__PURE__ */ jsx("div", {
+			className: "text-xs theme-muted-text",
+			children: part.waitingOn ? t.approvalWaitingOn(part.waitingOn) : t.approvalPending
 		}) : feedback === null ? /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap gap-2",
 			children: [
@@ -704,6 +742,21 @@ function TextBlock({ part, isStreaming }) {
 }
 function PartDispatch(props) {
 	const { slots } = useChatConfig();
+	const part = props.part;
+	const Tool = part.kind === "tool_call" ? slots.toolRenderers?.[part.name] : void 0;
+	if (Tool && part.kind === "tool_call") {
+		const approval = props.message.parts?.find((p) => p.kind === "approval" && p.id === part.id);
+		return /* @__PURE__ */ jsx(ToolCallBlock, {
+			part,
+			children: /* @__PURE__ */ jsx(Tool, {
+				part,
+				message: props.message,
+				...approval ? { approval } : {},
+				...props.isStreaming !== void 0 ? { isStreaming: props.isStreaming } : {},
+				...props.onApprovalAnswer ? { onApprovalAnswer: props.onApprovalAnswer } : {}
+			})
+		});
+	}
 	const Override = slots.partRenderers?.[props.part.kind];
 	if (Override) return /* @__PURE__ */ jsx(Override, { ...props });
 	return /* @__PURE__ */ jsx(BuiltinPart, {
@@ -752,7 +805,7 @@ function mergeReasoning(parts) {
 		...durationMs > 0 ? { durationMs } : {}
 	};
 }
-function buildRenderItems(parts) {
+function buildRenderItems(parts, hostDrawn = () => false) {
 	const items = [];
 	let run = [];
 	const emitThoughts = (members) => {
@@ -793,8 +846,12 @@ function buildRenderItems(parts) {
 		emitThoughts(run.slice(end));
 		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] : []));
 	parts.forEach((part, index) => {
-		if (part.kind === "reasoning" || part.kind === "tool_call" && part.status === "ok" && !part.decision && isGroupableTool(part.name)) {
+		if (part.kind === "approval" && part.resolved && decided.has(part.id)) return;
+		if (part.kind === "approval" && drawnByHost.has(part.id)) return;
+		if (part.kind === "reasoning" || part.kind === "tool_call" && part.status === "ok" && !part.decision && !drawnByHost.has(part.id) && isGroupableTool(part.name)) {
 			run.push({
 				part,
 				index
@@ -838,7 +895,9 @@ function RollupGroup({ members, message }) {
 }
 function AgentMessageParts({ message, isStreaming, onApprovalAnswer }) {
 	const parts = message.parts ?? [];
-	const items = useMemo(() => buildRenderItems(parts), [parts]);
+	const { slots } = useChatConfig();
+	const toolRenderers = slots.toolRenderers;
+	const items = useMemo(() => buildRenderItems(parts, (name) => !!toolRenderers?.[name]), [parts, toolRenderers]);
 	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 { 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, UnreachableSession } from '../types.js';
 import { type ChatUIConfig } from './config.js';
 import { type SidebarPresentation, type SidebarState } from './sidebarState.js';
 interface ChatContextValue {
@@ -41,6 +41,8 @@ interface ChatContextValue {
     deleteConversation: (id: string) => Promise<boolean>;
     sendMessage: (content: string, attachmentIds?: string[], parentId?: string, attachmentMeta?: AttachmentMeta) => Promise<boolean>;
     retryMessage: (messageId: string) => Promise<boolean>;
+    /** Answers a tool call waiting for approval, resuming the reply it paused. */
+    answerToolApproval: (approvalId: string, answer: ApprovalAnswerValue) => Promise<void>;
     setSelectedProvider: (providerId: string | null) => void;
     setSelectedAllocation: (allocation: string | null) => void;
     setToolEnabled: (id: string, enabled: boolean) => void;

package/dist/ai/core/ChatProvider.js

@@ -44,6 +44,20 @@ function heldSendArgs(held) {
 		preceding.length > 0 ? preceding : void 0
 	];
 }
+/** The wire history for the messages shown, oldest first. */
+function historyMessages(messages, selectedProvider) {
+	return messages.filter((m) => m.content || m.toolCalls?.length || m.parts?.length).flatMap((m) => {
+		const msg = {
+			role: m.role,
+			content: m.content || null
+		};
+		if (m.role === "assistant" && m.reasoning) msg.reasoning_content = m.reasoning;
+		if (m.role === "assistant" && m.toolCalls?.length) msg.tool_calls = m.toolCalls;
+		if (m.role === "assistant" && m.responsesOutput?.length && m.model === selectedProvider) msg.responses_output = m.responsesOutput;
+		if (m.role === "tool" && m.toolCallId) msg.tool_call_id = m.toolCallId;
+		return m.role === "assistant" ? toolTurnMessages(m.parts, msg) : [msg];
+	});
+}
 var NO_TOOLS = [];
 var ChatContext = createContext(void 0);
 var ChatStreamContext = createContext(void 0);
@@ -291,6 +305,124 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 		state.currentConversation,
 		navigation
 	]);
+	const streamReply = useCallback(async (targetConversationId, request, parentId, onFailure, routePart) => {
+		backgroundStreamsRef.current.set(targetConversationId, {
+			content: "",
+			reasoning: "",
+			parts: [],
+			messageId: null,
+			isActive: true
+		});
+		dispatch({
+			type: "SET_STREAMING",
+			isStreaming: true,
+			conversationId: targetConversationId
+		});
+		dispatch({
+			type: "CLEAR_STREAMING_CONTENT",
+			conversationId: targetConversationId
+		});
+		const controller = new AbortController();
+		abortControllerRef.current = controller;
+		try {
+			let thinkingStart = null;
+			let thinkingEnd = null;
+			const markStreamStart = () => {
+				if (thinkingStart === null) thinkingStart = Date.now();
+			};
+			let liveParts = [];
+			const { content: assistantContent, messageId: assistantMessageId, toolCalls, model: resolvedModel, reasoning: assistantReasoning, responsesOutput } = await adapter.streamCompletion(request, {
+				onContent: (chunk) => {
+					markStreamStart();
+					onStreamingChunk(chunk);
+				},
+				onReasoning: (reasoning) => {
+					markStreamStart();
+					thinkingEnd = Date.now();
+					dispatch({
+						type: "APPEND_STREAMING_REASONING",
+						reasoning,
+						conversationId: targetConversationId
+					});
+					const bgStream = backgroundStreamsRef.current.get(targetConversationId);
+					if (bgStream) bgStream.reasoning += reasoning;
+				},
+				onMessageId: (messageId) => {
+					markStreamStart();
+					const bgStream = backgroundStreamsRef.current.get(targetConversationId);
+					if (bgStream) bgStream.messageId = messageId;
+				},
+				onPart: (delta) => {
+					markStreamStart();
+					if (routePart?.(delta)) return;
+					liveParts = applyPartDelta(liveParts, delta);
+					dispatch({
+						type: "APPLY_STREAMING_PART",
+						delta,
+						conversationId: targetConversationId
+					});
+					const bgStream = backgroundStreamsRef.current.get(targetConversationId);
+					if (bgStream) bgStream.parts = liveParts;
+				}
+			}, controller.signal);
+			const thinkingDuration = assistantReasoning && thinkingStart !== null ? (thinkingEnd ?? Date.now()) - thinkingStart : null;
+			const assistantMessage = {
+				id: assistantMessageId || crypto.randomUUID(),
+				parentId,
+				role: "assistant",
+				content: assistantContent || (toolCalls.length > 0 ? null : ""),
+				toolCalls: toolCalls.length > 0 ? toolCalls : void 0,
+				model: request.useResponses ? request.model : resolvedModel || request.model,
+				providerId: state.selectedProvider,
+				timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+				reasoning: assistantReasoning || void 0,
+				reasoningDuration: thinkingDuration ?? void 0,
+				responsesOutput: responsesOutput.length ? responsesOutput : void 0,
+				...liveParts.length ? { parts: finalizeParts(liveParts) } : {}
+			};
+			dispatch({
+				type: "ADD_MESSAGE",
+				message: assistantMessage,
+				conversationId: targetConversationId
+			});
+			return "sent";
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") return "aborted";
+			console.error("Failed to send message:", error);
+			onFailure(errorText(error));
+			return "failed";
+		} finally {
+			abortControllerRef.current = null;
+			const { unrevealed } = stopAnimationLoop();
+			if (unrevealed) dispatch({
+				type: "APPEND_STREAMING_CONTENT",
+				content: unrevealed,
+				conversationId: targetConversationId
+			});
+			streamingConversationIdRef.current = null;
+			backgroundStreamsRef.current.delete(targetConversationId);
+			setTimeout(() => {
+				streamingToConversationRef.current = null;
+			}, 500);
+			dispatch({
+				type: "SET_STREAMING",
+				isStreaming: false,
+				conversationId: targetConversationId
+			});
+			dispatch({
+				type: "CLEAR_STREAMING_CONTENT",
+				conversationId: targetConversationId
+			});
+		}
+	}, [
+		adapter,
+		state.selectedProvider,
+		onStreamingChunk,
+		stopAnimationLoop,
+		streamingConversationIdRef,
+		backgroundStreamsRef,
+		abortControllerRef
+	]);
 	const sendMessage = useCallback(async (content, attachmentIds, parentId, attachmentMeta, precedingMessages) => {
 		if (isSendingRef.current) {
 			const convId = currentConversationIdRef.current;
@@ -405,13 +537,6 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 			message: userMessage,
 			conversationId: targetConversationId
 		});
-		backgroundStreamsRef.current.set(targetConversationId, {
-			content: "",
-			reasoning: "",
-			parts: [],
-			messageId: null,
-			isActive: true
-		});
 		const setMessageError = (errorMsg) => {
 			dispatch({
 				type: "UPDATE_MESSAGE",
@@ -421,17 +546,7 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 			});
 		};
 		const apiMessages = [
-			...(isNewConversation ? [] : state.currentConversation?.messages || []).filter((m) => m.content || m.toolCalls?.length || m.parts?.length).flatMap((m) => {
-				const msg = {
-					role: m.role,
-					content: m.content || null
-				};
-				if (m.role === "assistant" && m.reasoning) msg.reasoning_content = m.reasoning;
-				if (m.role === "assistant" && m.toolCalls?.length) msg.tool_calls = m.toolCalls;
-				if (m.role === "assistant" && m.responsesOutput?.length && m.model === state.selectedProvider) msg.responses_output = m.responsesOutput;
-				if (m.role === "tool" && m.toolCallId) msg.tool_call_id = m.toolCallId;
-				return m.role === "assistant" ? toolTurnMessages(m.parts, msg) : [msg];
-			}),
+			...historyMessages(isNewConversation ? [] : state.currentConversation?.messages || [], state.selectedProvider),
 			...precedingApiMessages,
 			{
 				role: "user",
@@ -439,28 +554,10 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 				attachment_ids: attachmentIds?.length ? attachmentIds : void 0
 			}
 		];
-		dispatch({
-			type: "SET_STREAMING",
-			isStreaming: true,
-			conversationId: targetConversationId
-		});
-		dispatch({
-			type: "CLEAR_STREAMING_CONTENT",
-			conversationId: targetConversationId
-		});
-		const controller = new AbortController();
-		abortControllerRef.current = controller;
-		let sendSucceeded = false;
-		let wasAborted = false;
+		const useResponses = state.models.find((m) => m.id === modelString)?.supports_responses === true;
+		let outcome = "failed";
 		try {
-			const useResponses = state.models.find((m) => m.id === modelString)?.supports_responses === true;
-			let thinkingStart = null;
-			let thinkingEnd = null;
-			const markStreamStart = () => {
-				if (thinkingStart === null) thinkingStart = Date.now();
-			};
-			let liveParts = [];
-			const { content: assistantContent, messageId: assistantMessageId, toolCalls, model: resolvedModel, reasoning: assistantReasoning, responsesOutput } = await adapter.streamCompletion({
+			outcome = await streamReply(targetConversationId, {
 				model: modelString,
 				messages: apiMessages,
 				conversationId,
@@ -469,94 +566,11 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 				allocation: state.selectedAllocation,
 				useResponses,
 				...tools ? { tools: enabledToolIds } : {}
-			}, {
-				onContent: (chunk) => {
-					markStreamStart();
-					onStreamingChunk(chunk);
-				},
-				onReasoning: (reasoning) => {
-					markStreamStart();
-					thinkingEnd = Date.now();
-					dispatch({
-						type: "APPEND_STREAMING_REASONING",
-						reasoning,
-						conversationId: targetConversationId
-					});
-					const bgStream = backgroundStreamsRef.current.get(targetConversationId);
-					if (bgStream) bgStream.reasoning += reasoning;
-				},
-				onMessageId: (messageId) => {
-					markStreamStart();
-					const bgStream = backgroundStreamsRef.current.get(targetConversationId);
-					if (bgStream) bgStream.messageId = messageId;
-				},
-				onPart: (delta) => {
-					markStreamStart();
-					liveParts = applyPartDelta(liveParts, delta);
-					dispatch({
-						type: "APPLY_STREAMING_PART",
-						delta,
-						conversationId: targetConversationId
-					});
-					const bgStream = backgroundStreamsRef.current.get(targetConversationId);
-					if (bgStream) bgStream.parts = liveParts;
-				}
-			}, controller.signal);
-			const thinkingDuration = assistantReasoning && thinkingStart !== null ? (thinkingEnd ?? Date.now()) - thinkingStart : null;
-			const assistantMessage = {
-				id: assistantMessageId || crypto.randomUUID(),
-				parentId: userMessageId,
-				role: "assistant",
-				content: assistantContent || (toolCalls.length > 0 ? null : ""),
-				toolCalls: toolCalls.length > 0 ? toolCalls : void 0,
-				model: useResponses ? modelString : resolvedModel || modelString,
-				providerId: state.selectedProvider,
-				timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-				reasoning: assistantReasoning || void 0,
-				reasoningDuration: thinkingDuration ?? void 0,
-				responsesOutput: responsesOutput.length ? responsesOutput : void 0,
-				...liveParts.length ? { parts: finalizeParts(liveParts) } : {}
-			};
-			dispatch({
-				type: "ADD_MESSAGE",
-				message: assistantMessage,
-				conversationId: targetConversationId
-			});
-			if (isNewConversation) loadConversations();
-			sendSucceeded = true;
-			return true;
-		} catch (error) {
-			if (error instanceof DOMException && error.name === "AbortError") {
-				wasAborted = true;
-				return false;
-			}
-			console.error("Failed to send message:", error);
-			setMessageError(errorText(error));
-			return false;
+			}, userMessageId, setMessageError);
+			if (outcome === "sent" && isNewConversation) loadConversations();
+			return outcome === "sent";
 		} finally {
-			abortControllerRef.current = null;
-			const { unrevealed } = stopAnimationLoop();
-			if (unrevealed) dispatch({
-				type: "APPEND_STREAMING_CONTENT",
-				content: unrevealed,
-				conversationId: targetConversationId
-			});
-			streamingConversationIdRef.current = null;
-			backgroundStreamsRef.current.delete(targetConversationId);
-			setTimeout(() => {
-				streamingToConversationRef.current = null;
-			}, 500);
-			dispatch({
-				type: "SET_STREAMING",
-				isStreaming: false,
-				conversationId: targetConversationId
-			});
-			dispatch({
-				type: "CLEAR_STREAMING_CONTENT",
-				conversationId: targetConversationId
-			});
-			if (wasAborted) isSendingRef.current = false;
-			else if (sendSucceeded) {
+			if (outcome === "sent") {
 				const next = heldSendArgs(pendingQueueRef.current);
 				pendingQueueRef.current = [];
 				dispatch({ type: "CLEAR_QUEUED_MESSAGES" });
@@ -581,16 +595,93 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 		createConversation,
 		loadConversations,
 		navigation,
-		onStreamingChunk,
 		startStreaming,
-		stopAnimationLoop,
-		streamingConversationIdRef,
-		backgroundStreamsRef,
-		abortControllerRef
+		streamReply
 	]);
 	useEffect(() => {
 		sendMessageRef.current = sendMessage;
 	}, [sendMessage]);
+	const answerToolApproval = useCallback(async (approvalId, answer) => {
+		const conversation = state.currentConversation;
+		const modelString = state.selectedProvider;
+		if (answer.kind !== "confirm" || !conversation || !modelString || isSendingRef.current) return;
+		const pausedAt = conversation.messages.findIndex((m) => m.role === "assistant" && m.parts?.some((p) => p.kind === "approval" && p.id === approvalId && !p.resolved));
+		const paused = conversation.messages[pausedAt];
+		if (!paused) return;
+		isSendingRef.current = true;
+		const targetConversationId = conversation.id;
+		const t = resolvedConfig.strings.agentTranscript;
+		let pausedParts = paused.parts ?? [];
+		const updatePaused = (updates) => dispatch({
+			type: "UPDATE_MESSAGE",
+			messageId: paused.id,
+			updates,
+			conversationId: targetConversationId
+		});
+		const applyToPaused = (delta) => {
+			pausedParts = applyPartDelta(pausedParts, delta);
+			updatePaused({ parts: pausedParts });
+		};
+		applyToPaused({
+			type: "approval_resolved",
+			id: approvalId,
+			answer: answer.allowed ? t.approvalAllowed : t.approvalDenied
+		});
+		applyToPaused({
+			type: "tool_decision",
+			id: approvalId,
+			decision: {
+				status: answer.allowed ? "approved" : "denied",
+				by: "user",
+				name: currentUser.name || currentUser.username,
+				at: DateTime.now().toUTC().toISO()
+			}
+		});
+		const instead = answer.allowed ? answer.instead : void 0;
+		if (instead) {
+			pausedParts = pausedParts.map((p) => p.kind === "tool_call" && p.id === approvalId ? {
+				...p,
+				name: instead
+			} : p);
+			updatePaused({ parts: pausedParts });
+		}
+		streamingToConversationRef.current = targetConversationId;
+		startStreaming(targetConversationId);
+		try {
+			await streamReply(targetConversationId, {
+				model: modelString,
+				messages: historyMessages(conversation.messages.slice(0, pausedAt + 1), state.selectedProvider),
+				conversationId: targetConversationId,
+				parentMessageId: paused.id,
+				userMessageId: crypto.randomUUID(),
+				allocation: state.selectedAllocation,
+				...tools ? { tools: enabledToolIds } : {},
+				resume: {
+					messageId: paused.id,
+					toolCallId: approvalId,
+					allowed: answer.allowed,
+					...answer.denyMessage ? { feedback: answer.denyMessage } : {},
+					...instead ? { tool: instead } : {}
+				}
+			}, paused.id, (message) => updatePaused({ error: message }), (delta) => {
+				if (delta.type !== "tool_end" || delta.id !== approvalId) return false;
+				applyToPaused(delta);
+				return true;
+			});
+		} finally {
+			isSendingRef.current = false;
+		}
+	}, [
+		resolvedConfig,
+		state.currentConversation,
+		state.selectedProvider,
+		state.selectedAllocation,
+		tools,
+		enabledToolIds,
+		startStreaming,
+		streamReply,
+		currentUser
+	]);
 	const updateConversationTitle = useCallback(async (id, title) => {
 		try {
 			await adapter.conversations.rename(id, title);
@@ -807,6 +898,7 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 		deleteConversation,
 		sendMessage,
 		retryMessage,
+		answerToolApproval,
 		setSelectedProvider,
 		setSelectedAllocation,
 		setToolEnabled,
@@ -854,6 +946,7 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 		deleteConversation,
 		sendMessage,
 		retryMessage,
+		answerToolApproval,
 		setSelectedProvider,
 		setSelectedAllocation,
 		setToolEnabled,

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

@@ -1,13 +1,21 @@
 import { type ComponentType, type MouseEventHandler, type ReactNode } from 'react';
 import type { Components } from 'streamdown';
 import { type ChatStrings } from '../strings.js';
-import type { ApprovalAnswerValue, ChatLinkTarget, ChatMessage, CspKind, MessagePart, MessagePartKind } from '../types.js';
+import type { ApprovalAnswerValue, ApprovalPart, ChatLinkTarget, ChatMessage, CspKind, MessagePart, MessagePartKind, ToolCallPart } from '../types.js';
 export interface PartRendererProps {
     part: MessagePart;
     message: ChatMessage;
     isStreaming?: boolean;
     onApprovalAnswer?: (id: string, answer: ApprovalAnswerValue) => void;
 }
+export interface ToolRendererProps {
+    part: ToolCallPart;
+    approval?: ApprovalPart;
+    message: ChatMessage;
+    isStreaming?: boolean;
+    /** Absent when the reader may not answer, such as a call someone else asked for. */
+    onApprovalAnswer?: (id: string, answer: ApprovalAnswerValue) => void;
+}
 export interface ChatLinkProps {
     target: ChatLinkTarget;
     className?: string;
@@ -27,6 +35,7 @@ export interface ChatUIConfig {
         composerUsage?: ReactNode;
         providerIcon?: (cspKind: CspKind, className?: string) => ReactNode;
         partRenderers?: Partial<Record<MessagePartKind, ComponentType<PartRendererProps>>>;
+        toolRenderers?: Record<string, ComponentType<ToolRendererProps>>;
     };
     strings?: {
         [S in keyof ChatStrings]?: Partial<ChatStrings[S]>;

package/dist/ai/core/parts.js

@@ -34,6 +34,10 @@ function applyPartDelta(parts, delta) {
 			...p,
 			args: p.args + delta.args
 		} : p);
+		case "tool_wait": return parts.map((p) => p.kind === "tool_call" && p.id === delta.id ? {
+			...p,
+			status: "waiting"
+		} : p);
 		case "tool_end": return parts.map((p) => p.kind === "tool_call" && p.id === delta.id ? {
 			...p,
 			status: delta.isError ? "error" : "ok",
@@ -99,7 +103,7 @@ function isStreamedText(part) {
 *  calls comes back as the answer alone. */
 function toolTurnMessages(parts, answer) {
 	const calls = (parts ?? []).filter((p) => p.kind === "tool_call" && p.status !== "running" && p.result !== void 0);
-	if (calls.length === 0) return [answer];
+	if (calls.length === 0) return answer.content || answer.tool_calls?.length ? [answer] : [];
 	return [
 		{
 			role: "assistant",

package/dist/ai/index.d.ts

@@ -27,7 +27,7 @@ export { type SlashCommandOption, type SlashMenuConfig, slashMatches, } from './
 export type { ComposerPastes, PasteUploadResult, } from './components/usePasteCards.js';
 export { ChatProvider, type ChatProviderProps, type ChatStream, useChat, useChatStream, } from './core/ChatProvider.js';
 export { type ChatAction, type ChatState, chatReducer, initialState, } from './core/chatReducer.js';
-export type { PartRendererProps } from './core/config.js';
+export type { PartRendererProps, ToolRendererProps } from './core/config.js';
 export { type ChatLinkProps, type ChatUIConfig, resolveChatConfig, useChatConfig, } from './core/config.js';
 export { FOCUS_SIDEBAR_SEARCH_EVENT } from './core/events.js';
 export { getGreeting } from './core/greeting.js';

package/dist/ai/strings.d.ts

@@ -15,6 +15,8 @@ export interface ChatStrings {
         addGroups: string;
         info: ReactNode;
         shareButton: string;
+        /** Beside the share button in a shared conversation that can use tools. */
+        toolResultsShared: string;
     };
     blockedGroup: {
         title: (group: string) => string;
@@ -67,6 +69,8 @@ export interface ChatStrings {
         turnAllOff: string;
         /** Closes the tools modal; each switch takes effect as it is flipped. */
         done: string;
+        /** Marks a tool whose calls wait for the reader's approval. */
+        asksFirst: string;
     };
     allocationPicker: {
         choose: string;
@@ -87,6 +91,8 @@ export interface ChatStrings {
         stop: string;
         /** The status words an agent's working line picks from, one per turn. */
         words: readonly string[];
+        /** The working line while a call waits for the reader to allow it. */
+        waitingForAnswer: string;
     };
     emptyState: {
         greeting: string | null;
@@ -121,6 +127,9 @@ export interface ChatStrings {
         activity: string;
         /** A finished turn's label when it ran tools without reasoning. */
         ranToolCalls: (count: number) => string;
+        /** The same, in a shared conversation, for a turn someone else started:
+         *  its tools ran with that person's access. */
+        ranToolCallsAs: (count: number, name: string) => string;
     };
     thread: {
         viewOnly: string;
@@ -253,6 +262,13 @@ export interface ChatStrings {
         approvalOptions: string;
         /** Names a question the agent waits on that has no heading of its own. */
         approvalLabel: string;
+        /** A call the reader approved or declined. */
+        approvalAllowed: string;
+        approvalDenied: string;
+        /** A call nobody answered in time. */
+        approvalRequestExpired: string;
+        /** A call only the person who asked for it may answer. */
+        approvalWaitingOn: (name: string) => string;
         /** Names the field for the reason a request is denied. */
         feedbackLabel: string;
         /** Names the field for an answer of the reader's own. */

package/dist/ai/strings.js

@@ -20,7 +20,8 @@ var defaultChatStrings = {
 			/* @__PURE__ */ jsx("strong", { children: "Collaborate" }),
 			" permission allows adding messages."
 		] }),
-		shareButton: "Share conversation"
+		shareButton: "Share conversation",
+		toolResultsShared: "Tool results here are visible to the people it's shared with"
 	},
 	blockedGroup: {
 		title: (group) => `Billing group \u201c${group}\u201d is over its allocation`,
@@ -59,12 +60,13 @@ var defaultChatStrings = {
 		tools: "Tools",
 		someToolsOff: "Some tools are off",
 		toolsOn: (enabled, total) => `${enabled.toLocaleString()}/${total.toLocaleString()}`,
-		toolsDescription: "What the assistant may look up for you.",
+		toolsDescription: "What the assistant may look up or do for you.",
 		searchTools: "Search tools",
 		noToolsMatch: "No tools match",
 		turnAllOn: "Turn all on",
 		turnAllOff: "Turn all off",
-		done: "Done"
+		done: "Done",
+		asksFirst: "Asks first"
 	},
 	allocationPicker: {
 		choose: "Allocation",
@@ -114,7 +116,8 @@ var defaultChatStrings = {
 			"Crunching",
 			"Forging",
 			"Cooking"
-		]
+		],
+		waitingForAnswer: "Waiting for your answer"
 	},
 	emptyState: {
 		greeting: null,
@@ -150,7 +153,8 @@ var defaultChatStrings = {
 		thoughtFor: (duration) => `Thought for ${duration}`,
 		thoughtProcess: "Thought process",
 		activity: "Activity",
-		ranToolCalls: (count) => `Ran ${countOf(count, "tool call", "tool calls")}`
+		ranToolCalls: (count) => `Ran ${countOf(count, "tool call", "tool calls")}`,
+		ranToolCallsAs: (count, name) => `Ran ${countOf(count, "tool call", "tool calls")} as ${name}`
 	},
 	thread: {
 		viewOnly: "You have view only access",
@@ -270,6 +274,10 @@ var defaultChatStrings = {
 		approvalPending: "Waiting for an answer in the terminal",
 		approvalOptions: "Offered choices",
 		approvalLabel: "Waiting for your answer",
+		approvalAllowed: "Allowed",
+		approvalDenied: "Declined",
+		approvalRequestExpired: "This request expired. Ask again to run it.",
+		approvalWaitingOn: (name) => `Waiting for ${name} to answer`,
 		feedbackLabel: "Feedback for the agent",
 		ownAnswerLabel: "Your answer",
 		todoPending: "To do",

package/dist/ai/types.d.ts

@@ -45,7 +45,7 @@ export interface TokenUsage {
     completion_tokens?: number;
     total_tokens?: number;
 }
-export type ToolCallStatus = 'running' | 'ok' | 'error';
+export type ToolCallStatus = 'running' | 'waiting' | 'ok' | 'error';
 export interface TextPart {
     kind: 'text';
     text: string;
@@ -100,6 +100,9 @@ export type ApprovalAnswerValue = {
     allowed: boolean;
     allowDir?: boolean;
     denyMessage?: string;
+    /** A sibling tool to run in place of the one asked for, with the same
+     *  arguments, such as destroying a cluster the model asked to stop. */
+    instead?: string;
 } | {
     kind: 'ask';
     text: string;
@@ -122,6 +125,8 @@ export interface ApprovalPart {
     options?: ApprovalOption[];
     plan?: string;
     canAllowDirectory?: boolean;
+    expiresAt?: string;
+    waitingOn?: string;
     resolved?: boolean;
     answer?: string;
 }

package/dist/components/relativeTime.js

@@ -65,7 +65,7 @@ function useRelativeTime(value, format = "long") {
 		const unit = unitOf(age);
 		const key = `${format}:${at}:${unit}:${Math.trunc(age / unit)}`;
 		if (last.current?.key !== key) {
-			const label = format === "compact" ? compactLabel(age, t) : DateTime.fromMillis(at).toRelative({ base: DateTime.fromMillis(current) }) ?? "";
+			const label = format === "compact" ? compactLabel(age, t) : Math.abs(age) < SECOND ? t.now : DateTime.fromMillis(at).toRelative({ base: DateTime.fromMillis(current) }) ?? "";
 			last.current = {
 				key,
 				label

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.75.1",
+  "version": "0.77.0",
   "description": "React UI components: a theme contract, icons, brand logos, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {