@parallelworks/ui 0.76.0 → 0.78.0

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

@@ -17,14 +17,14 @@ import { useChatConfig } from "../../core/config.js";
 import Markdown from "../../ui/Markdown.js";
 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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 //#region src/ai/components/agent/AgentMessageParts.tsx
 var COLLAPSED_RESULT_LINES = 12;
 function LineSpans({ text, tokens, emphasis }) {
 	const pieces = tokens ?? [{ content: text }];
-	if (!emphasis || emphasis.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: pieces.map((t, i) => /* @__PURE__ */ jsx("span", {
+	if (!emphasis || emphasis.length === 0) return /* @__PURE__ */ jsx(Fragment$1, { children: pieces.map((t, i) => /* @__PURE__ */ jsx("span", {
 		style: t.color ? { color: t.color } : void 0,
 		children: t.content
 	}, i)) });
@@ -47,7 +47,7 @@ function LineSpans({ text, tokens, emphasis }) {
 		}
 		offset += t.content.length;
 	}
-	return /* @__PURE__ */ jsx(Fragment, { children: out });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: out });
 }
 function DiffRows({ rows, lang }) {
 	const [tokens, setTokens] = useState(null);
@@ -188,7 +188,7 @@ function ResultBody({ part }) {
 /** A status mark, which color alone tells apart, with its status in words for
 *  a screen reader. */
 function StatusMark({ status, children }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		className: "contents",
 		children
@@ -232,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);
@@ -259,7 +262,7 @@ function ToolCallBlock({ part }) {
 				onOpenChange: setExpanded,
 				disabled: isDiff,
 				summaryClassName: rowSummaryClasses,
-				summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ToolStatusDot, { part }), /* @__PURE__ */ jsxs("span", {
+				summary: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ToolStatusDot, { part }), /* @__PURE__ */ jsxs("span", {
 					className: "font-mono text-[13px] leading-5 min-w-0 truncate",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "font-semibold",
@@ -279,7 +282,11 @@ function ToolCallBlock({ part }) {
 					children: fullToolArgs(header.arg, part.args)
 				}), /* @__PURE__ */ jsx(ResultBody, { part })]
 			}),
-			!isDiff && !expanded && part.status !== "waiting" && /* @__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
 			}),
@@ -313,14 +320,14 @@ function DecisionLine({ decision }) {
 			className: "flex min-w-0 flex-wrap items-baseline gap-x-1",
 			children: [
 				/* @__PURE__ */ jsx("span", { children: decisionLabel(decision, strings.agentTranscript) }),
-				decision.at && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				decision.at && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					children: "·"
 				}), /* @__PURE__ */ jsx(RelativeTime, {
 					value: decision.at,
 					className: "shrink-0"
 				})] }),
-				decision.note && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				decision.note && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					children: "·"
 				}), /* @__PURE__ */ jsx("span", {
@@ -355,7 +362,7 @@ function SubagentCard({ part }) {
 			onOpenChange: setExpanded,
 			disabled: !canExpand,
 			summaryClassName: rowSummaryClasses,
-			summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StatusMark, {
+			summary: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StatusMark, {
 				status: part.status === "running" ? t.running : part.status === "failed" ? t.failed : t.done,
 				children: part.status === "running" ? /* @__PURE__ */ jsx("span", {
 					className: "mt-[3px]",
@@ -430,7 +437,7 @@ function ConfirmApproval({ part, onAnswer }) {
 		path: [t.allowPath, t.denyPath],
 		call: [t.allowCall, t.denyCall]
 	}[part.subject ?? "command"];
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		part.command && /* @__PURE__ */ jsx("pre", {
 			className: "overflow-x-auto rounded-md bg-(--theme-muted-panel-bg) p-2 font-mono text-xs whitespace-pre-wrap",
 			children: part.command
@@ -518,7 +525,7 @@ function AskApproval({ part, onAnswer }) {
 		kind: "ask",
 		text
 	});
-	if (!onAnswer) return /* @__PURE__ */ jsxs(Fragment, { children: [
+	if (!onAnswer) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		part.question && /* @__PURE__ */ jsx("div", {
 			className: "text-sm",
 			children: part.question
@@ -535,7 +542,7 @@ function AskApproval({ part, onAnswer }) {
 			children: t.approvalPending
 		})
 	] });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [part.question && /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [part.question && /* @__PURE__ */ jsx("div", {
 		className: "text-sm",
 		children: part.question
 	}), own === null ? /* @__PURE__ */ jsxs("div", {
@@ -610,7 +617,7 @@ function ApprovalBlock({ part, onApprovalAnswer }) {
 function PlanApproval({ part }) {
 	const { strings } = useChatConfig();
 	const t = strings.agentTranscript;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		className: "text-xs theme-muted-text",
 		children: t.planPending
 	}), part.plan && /* @__PURE__ */ jsx("div", {
@@ -735,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, {
@@ -783,7 +805,7 @@ function mergeReasoning(parts) {
 		...durationMs > 0 ? { durationMs } : {}
 	};
 }
-function buildRenderItems(parts) {
+function buildRenderItems(parts, hostDrawn = () => false) {
 	const items = [];
 	let run = [];
 	const emitThoughts = (members) => {
@@ -825,9 +847,11 @@ function buildRenderItems(parts) {
 		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 === "approval" && part.resolved && decided.has(part.id)) return;
-		if (part.kind === "reasoning" || part.kind === "tool_call" && part.status === "ok" && !part.decision && isGroupableTool(part.name)) {
+		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
@@ -853,7 +877,7 @@ function RollupGroup({ members, message }) {
 		children: /* @__PURE__ */ jsx(Disclosure, {
 			keepMounted: true,
 			summaryClassName: rowSummaryClasses,
-			summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			summary: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				className: "text-(--theme-success) leading-none",
 				"aria-hidden": "true",
 				children: "●"
@@ -871,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/components/conversationActions.js

@@ -1,13 +1,13 @@
+import { useContextMenu } from "../../components/ContextMenu.js";
 import { toast } from "../../components/Toast.js";
 import { useStrings } from "../../components/Provider.js";
-import { useContextMenu } from "../../components/ContextMenu.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { useRowDialogs, useSessionMenu } from "../ui/sidebar.js";
 import { conversationToMarkdown, downloadText, exportFilename } from "../core/exportConversation.js";
 import ShareDialog from "./ShareDialog.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 //#region src/ai/components/conversationActions.tsx
 /** Conversations by how long ago they last changed, the time each row shows,
@@ -73,7 +73,7 @@ function useConversationActions() {
 	return {
 		menuItems,
 		openMenu,
-		overlays: /* @__PURE__ */ jsxs(Fragment, { children: [
+		overlays: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			contextMenu,
 			dialogs,
 			sharing && /* @__PURE__ */ jsx(ShareDialog, {

package/dist/ai/core/ChatProvider.js

@@ -6,8 +6,8 @@ import { ChatConfigProvider, resolveChatConfig } from "./config.js";
 import { providerIssueFor } from "./providerIssues.js";
 import { ReportSidebarPresentationContext, useControllable, useOwnSidebar } from "./sidebarState.js";
 import { useSSEStream } from "./useSSEStream.js";
-import { jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 //#region src/ai/core/ChatProvider.tsx
 function generateTitleFromMessage(content) {
@@ -637,6 +637,14 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 				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 {
@@ -652,7 +660,8 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 					messageId: paused.id,
 					toolCallId: approvalId,
 					allowed: answer.allowed,
-					...answer.denyMessage ? { feedback: answer.denyMessage } : {}
+					...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;

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/config.js

@@ -1,7 +1,7 @@
 import { AppLink } from "../../components/AppLink.js";
 import { defaultChatStrings } from "../strings.js";
-import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/ai/core/config.tsx
 function hrefFor(target) {
 	switch (target.kind) {

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

@@ -91,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;

package/dist/ai/strings.js

@@ -116,7 +116,8 @@ var defaultChatStrings = {
 			"Crunching",
 			"Forging",
 			"Cooking"
-		]
+		],
+		waitingForAnswer: "Waiting for your answer"
 	},
 	emptyState: {
 		greeting: null,

package/dist/ai/types.d.ts

@@ -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;

package/dist/ai/ui/ConversationSidebar.js

@@ -1,12 +1,12 @@
 import { cx } from "../../cx.js";
-import { positionKeys } from "../../components/keys.js";
 import { usePersistedState } from "../../components/Provider.js";
+import { positionKeys } from "../../components/keys.js";
 import { LoadingRegion, Skeleton } from "../../components/Skeleton.js";
 import { useSplitter } from "../../components/splitter.js";
 import { Drawer } from "../../components/Drawer.js";
 import { SidebarGroupHeading, SidebarPanel, SidebarToggle } from "./sidebar.js";
+import { Fragment, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, useEffect, useRef } from "react";
 /** A conversation list's drawer on a layout too narrow to keep it beside the
 *  content: it covers the chat's own positioned container, not the window, and
 *  stays mounted so the list keeps its scroll and search between openings. */
@@ -101,7 +101,7 @@ function ConversationSidebar({ label, collapsed: collapsedProp, onToggle, toggle
 						children: group.label
 					}), /* @__PURE__ */ jsx("ul", {
 						className: "space-y-0.5",
-						children: group.items.map((item) => /* @__PURE__ */ jsx(Fragment$1, { children: renderRow(item) }, getKey(item)))
+						children: group.items.map((item) => /* @__PURE__ */ jsx(Fragment, { children: renderRow(item) }, getKey(item)))
 					})]
 				}, group.key))
 			}),

package/dist/ai/ui/sidebar.js

@@ -1,17 +1,17 @@
 import { cx } from "../../cx.js";
+import { EmptyState } from "../../components/EmptyState.js";
 import { DownloadIcon, RenameIcon, ShareIcon, SidebarIcon, TrashIcon } from "../../icons.js";
 import { Tooltip } from "../../components/Tooltip.js";
 import { useStrings } from "../../components/Provider.js";
 import { AppLink, isPlainClick } from "../../components/AppLink.js";
-import { EmptyState } from "../../components/EmptyState.js";
 import { menuDivider } from "../../components/MenuEntries.js";
 import { IconButton } from "../../components/IconButton.js";
 import { fieldBox } from "../../components/fieldBox.js";
 import { focusOnMount } from "../../components/focus.js";
 import { ConfirmModal } from "../../components/ConfirmModal.js";
 import { MoreButton, rowContextMenuProps, useRowMenuActive } from "../../list/rowMenu.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/ui/sidebar.tsx
 var SIDEBAR_RAIL_WIDTH_PX = 48;
 var HIGHLIGHT_SELECTED = "bg-[color-mix(in_oklab,var(--theme-accent)_12%,transparent)]";
@@ -214,7 +214,7 @@ function useRowDialogs({ strings, nameOf, onDelete, onRename }) {
 			setName(nameOf(item));
 			setToRename(item);
 		},
-		dialogs: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ConfirmModal, {
+		dialogs: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ConfirmModal, {
 			open: toDelete !== null,
 			onClose: () => setToDelete(null),
 			align: "center",