@parallelworks/ui 0.40.1 → 0.42.0

package/README.md

@@ -176,6 +176,31 @@ animations) and streamdown's classes next to the theme contract:
 
 The prebuilt `@parallelworks/ui/styles.css` already includes both.
 
+## Form state
+
+`DynamicForm` keeps its values in react-hook-form, a peer dependency, so the
+host and the library share one instance. A host that reads or drives the form
+creates it and passes it in:
+
+```tsx
+const form = useForm()
+const { isDirty } = useFormState({ control: form.control })
+
+<DynamicForm form={form} formJSONs={inputs} initialValues={saved} />
+```
+
+`form.getValues()`, `form.reset()` and `formState.isDirty` then work as
+react-hook-form documents them. Without `form`, the form keeps its own;
+`onValuesChange` reports each change either way. `missingFields` marks fields
+as `required` errors.
+
+Each field subscribes only to what it reads, so typing renders the edited
+field and whatever reads it, not the whole form. A host field component,
+passed through `fields` or `slots.formFields`, binds the same way: its own
+value with `useFieldValue(field.name)` (or `useController`), another input's
+with `useFieldAt(path)` or `useWatch`, and a pick from a list with
+`useChoiceField`, which applies `autoselect` and `secondaryField`.
+
 ## Form layouts
 
 `DynamicForm` accepts an optional `$meta.layout` in `formJSONs`. A layout arranges

package/dist/ai/adapter/memoryStore.js

@@ -1,4 +1,5 @@
 import { ChatAdapterError } from "./types.js";
+import { applyPartDelta, finalizeParts } from "../core/parts.js";
 //#region src/ai/adapter/memoryStore.ts
 function newId() {
 	return crypto.randomUUID();
@@ -103,6 +104,7 @@ function createMemoryConversationStore(options) {
 			return async (req, handlers, signal) => {
 				let partialContent = "";
 				let partialReasoning = "";
+				let parts = [];
 				const wrappedHandlers = {
 					...handlers,
 					onContent: (chunk) => {
@@ -112,6 +114,10 @@ function createMemoryConversationStore(options) {
 					onReasoning: (chunk) => {
 						partialReasoning += chunk;
 						handlers.onReasoning?.(chunk);
+					},
+					onPart: (delta) => {
+						parts = applyPartDelta(parts, delta);
+						handlers.onPart?.(delta);
 					}
 				};
 				recordUser(req);
@@ -126,6 +132,7 @@ function createMemoryConversationStore(options) {
 						...result.reasoning ? { reasoning: result.reasoning } : {},
 						...result.responsesOutput.length ? { responsesOutput: result.responsesOutput } : {},
 						...result.toolCalls.length ? { toolCalls: result.toolCalls } : {},
+						...parts.length ? { parts: finalizeParts(parts) } : {},
 						timestamp: (/* @__PURE__ */ new Date()).toISOString()
 					});
 					return {

package/dist/ai/adapter/mock/mockAdapter.js

@@ -5,6 +5,7 @@ var CANNED_REPLIES = [
 	"Everything you see is generated locally. The mock adapter implements the same `ChatAdapter` interface as the OpenAI-compatible adapter and any backend's own, so the UI can't tell the difference.\n\n```ts\nconst adapter = createMockChatAdapter()\n```\n\nMarkdown, `inline code`, and code blocks render through the same pipeline.",
 	"Branching works too: edit one of your earlier messages or hit regenerate on a reply, then use the arrows to flip between branches."
 ];
+var TOOL_REPLY = "Two clusters are running: **gpu-a** with 4 nodes, and **cpu-batch**, idle and scaled to zero.";
 var THINKING_PREAMBLE = "Thinking about the question, weighing a few canned options, and picking the next reply in the rotation...";
 function sleep(ms, signal) {
 	return new Promise((resolve, reject) => {
@@ -30,21 +31,32 @@ function createMockChatAdapter(options) {
 		conversations: store.conversations,
 		models: { async list() {
 			return {
-				models: [{
-					id: "mock:local/canned-small",
-					object: "model",
-					created: 0,
-					owned_by: "mock",
-					provider: "Mock Provider",
-					tool_calling_mode: "none"
-				}, {
-					id: "mock:local/canned-thinking",
-					object: "model",
-					created: 0,
-					owned_by: "mock",
-					provider: "Mock Provider",
-					tool_calling_mode: "none"
-				}],
+				models: [
+					{
+						id: "mock:local/canned-small",
+						object: "model",
+						created: 0,
+						owned_by: "mock",
+						provider: "Mock Provider",
+						tool_calling_mode: "none"
+					},
+					{
+						id: "mock:local/canned-thinking",
+						object: "model",
+						created: 0,
+						owned_by: "mock",
+						provider: "Mock Provider",
+						tool_calling_mode: "none"
+					},
+					{
+						id: "mock:local/canned-tools",
+						object: "model",
+						created: 0,
+						owned_by: "mock",
+						provider: "Mock Provider",
+						tool_calling_mode: "native"
+					}
+				],
 				unreachableSessions: [],
 				providerIssues: []
 			};
@@ -57,8 +69,31 @@ function createMockChatAdapter(options) {
 				reasoning += word;
 				handlers.onReasoning?.(word);
 			}
-			const reply = CANNED_REPLIES[replyIndex % CANNED_REPLIES.length] ?? "";
-			replyIndex++;
+			const usesTools = req.model.includes("tools");
+			if (usesTools) {
+				const id = `call-${crypto.randomUUID()}`;
+				handlers.onPart?.({
+					type: "tool_start",
+					id,
+					name: "list_clusters",
+					args: "{}"
+				});
+				await sleep(900, signal);
+				handlers.onPart?.({
+					type: "tool_end",
+					id,
+					result: JSON.stringify([{
+						name: "gpu-a",
+						status: "on",
+						nodes: 4
+					}, {
+						name: "cpu-batch",
+						status: "on",
+						nodes: 0
+					}])
+				});
+			}
+			const reply = usesTools ? TOOL_REPLY : CANNED_REPLIES[replyIndex++ % CANNED_REPLIES.length] ?? "";
 			await sleep(250, signal);
 			let content = "";
 			for (const word of reply.split(/(?<= )/)) {

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

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

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

@@ -3,4 +3,4 @@ export { apiErrorMessage, errorMessageFromResponse, statusFallbackMessage, } fro
 export { createOpenAIChatAdapter, type OpenAIChatAdapterOptions, } from './openaiAdapter.js';
 export { buildResponsesRequestBody, parseResponsesSSELine, } from './responses.js';
 export { type ParsedSSELine, parseSSELine, processSSEStream, type SSELineParser, } from './sse.js';
-export type { CompletionChunk, CompletionChunkChoice, CompletionMessage, CompletionRequest, ModelsWireResponse, } from './wire.js';
+export type { CompletionChunk, CompletionChunkChoice, CompletionMessage, CompletionRequest, ModelsWireResponse, ToolResultChunk, } from './wire.js';

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

@@ -1,10 +1,13 @@
 import type { ToolCall, ToolCallDelta } from '../../types.js';
+import type { PartDelta } from '../types.js';
+import type { ToolResultChunk } from './wire.js';
 export type ParsedSSELine = {
     id?: string | undefined;
     messageId?: string | undefined;
     content?: string | undefined;
     reasoningContent?: string | undefined;
     toolCalls?: ToolCallDelta[] | undefined;
+    toolResult?: ToolResultChunk | undefined;
     finishReason?: string | null | undefined;
     model?: string | undefined;
     error?: string | undefined;
@@ -12,8 +15,11 @@ export type ParsedSSELine = {
 } | null;
 export type SSELineParser = (line: string) => ParsedSSELine;
 export declare function parseSSELine(line: string): ParsedSSELine;
-/** Process an SSE stream from a ReadableStream reader */
-export declare function processSSEStream(reader: ReadableStreamDefaultReader<Uint8Array>, onContent: (content: string) => void, onToolCall?: (toolCalls: ToolCall[]) => void, onError?: (error: string) => void, onReasoning?: (reasoning: string) => void, onMessageId?: (messageId: string) => void, parseLine?: SSELineParser): Promise<{
+/** Process an SSE stream from a ReadableStream reader. With `onPart`, tool
+ *  calls stream as parts; a call the gateway answered with a result is left
+ *  off the returned `toolCalls`, which then hold only calls the caller must
+ *  run. */
+export declare function processSSEStream(reader: ReadableStreamDefaultReader<Uint8Array>, onContent: (content: string) => void, onToolCall?: (toolCalls: ToolCall[]) => void, onError?: (error: string) => void, onReasoning?: (reasoning: string) => void, onMessageId?: (messageId: string) => void, parseLine?: SSELineParser, onPart?: (delta: PartDelta) => void): Promise<{
     content: string;
     messageId: string;
     toolCalls: ToolCall[];

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

@@ -14,6 +14,7 @@ function parseSSELine(line) {
 			content: choice?.delta?.content,
 			reasoningContent: choice?.delta?.reasoning_content,
 			toolCalls: choice?.delta?.tool_calls ?? void 0,
+			toolResult: chunk.toolResult,
 			finishReason: choice?.finish_reason,
 			model: chunk.model
 		};
@@ -21,8 +22,11 @@ function parseSSELine(line) {
 		return null;
 	}
 }
-/** Process an SSE stream from a ReadableStream reader */
-async function processSSEStream(reader, onContent, onToolCall, onError, onReasoning, onMessageId, parseLine = parseSSELine) {
+/** Process an SSE stream from a ReadableStream reader. With `onPart`, tool
+*  calls stream as parts; a call the gateway answered with a result is left
+*  off the returned `toolCalls`, which then hold only calls the caller must
+*  run. */
+async function processSSEStream(reader, onContent, onToolCall, onError, onReasoning, onMessageId, parseLine = parseSSELine, onPart) {
 	const decoder = new TextDecoder();
 	let assistantContent = "";
 	let assistantReasoning = "";
@@ -31,6 +35,19 @@ async function processSSEStream(reader, onContent, onToolCall, onError, onReason
 	let resolvedModel = null;
 	let responsesOutput = [];
 	const toolCallsMap = /* @__PURE__ */ new Map();
+	const startedToolCalls = /* @__PURE__ */ new Set();
+	const answeredToolCalls = /* @__PURE__ */ new Set();
+	const startToolCall = (index) => {
+		const tc = toolCallsMap.get(index);
+		if (!onPart || !tc?.id || !tc.name || startedToolCalls.has(index)) return;
+		startedToolCalls.add(index);
+		onPart({
+			type: "tool_start",
+			id: tc.id,
+			name: tc.name,
+			args: tc.arguments
+		});
+	};
 	let lineBuffer = "";
 	while (true) {
 		const result = await reader.read();
@@ -64,13 +81,32 @@ async function processSSEStream(reader, onContent, onToolCall, onError, onReason
 					if (tc.index === void 0) continue;
 					const existing = toolCallsMap.get(tc.index);
 					if (existing) {
-						if (tc.function?.arguments) existing.arguments += tc.function.arguments;
+						existing.id ||= tc.id || "";
+						existing.name ||= tc.function?.name || "";
+						if (tc.function?.arguments) {
+							existing.arguments += tc.function.arguments;
+							if (startedToolCalls.has(tc.index)) onPart?.({
+								type: "tool_update",
+								id: existing.id,
+								args: tc.function.arguments
+							});
+						}
 					} else toolCallsMap.set(tc.index, {
 						id: tc.id || "",
 						type: tc.type || "function",
 						name: tc.function?.name || "",
 						arguments: tc.function?.arguments || ""
 					});
+					startToolCall(tc.index);
+				}
+				if (parsed.toolResult) {
+					answeredToolCalls.add(parsed.toolResult.toolCallId);
+					onPart?.({
+						type: "tool_end",
+						id: parsed.toolResult.toolCallId,
+						result: parsed.toolResult.content,
+						...parsed.toolResult.isError ? { isError: true } : {}
+					});
 				}
 			}
 		}
@@ -89,7 +125,7 @@ async function processSSEStream(reader, onContent, onToolCall, onError, onReason
 			if (parsed.finishReason) finishReason = parsed.finishReason;
 		}
 	}
-	const toolCalls = Array.from(toolCallsMap.values()).map((tc) => ({
+	const toolCalls = Array.from(toolCallsMap.values()).filter((tc) => !answeredToolCalls.has(tc.id)).map((tc) => ({
 		id: tc.id,
 		type: tc.type,
 		function: {

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

@@ -30,9 +30,15 @@ export interface CompletionChunk {
     object?: string;
     created?: number;
     messageId?: string;
+    toolResult?: ToolResultChunk;
     choices?: CompletionChunkChoice[] | null;
     usage?: TokenUsage;
 }
+export interface ToolResultChunk {
+    toolCallId: string;
+    content: string;
+    isError?: boolean;
+}
 export interface ModelsWireResponse {
     object: string;
     data: ChatModel[] | null;

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

@@ -1,4 +1,3 @@
-export default function AllocationSelector({ variant, }?: {
-    /** 'bare' drops the border, for a toolbar that reads as text. */
-    variant?: 'default' | 'bare';
-}): import("react").JSX.Element | null;
+/** Which allocation an organization model bills, with its spend so far. Shows
+ *  only for an organization model, and picks the first allocation for it. */
+export default function AllocationSelector(): import("react").JSX.Element | null;

package/dist/ai/components/AllocationSelector.js

@@ -1,55 +1,59 @@
+import { FaAngleDown } from "../../icons/fa/FaAngleDown.js";
+import { Select } from "../../components/Select.js";
+import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
-import Dropdown from "../ui/Dropdown.js";
+import { chipClassName } from "../ui/chip.js";
 import { isOrgModel } from "../utils.js";
-import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import useSWR from "swr";
 //#region src/ai/components/AllocationSelector.tsx
-function AllocationSelector({ variant = "default" } = {}) {
-	const bare = variant === "bare";
+var money = (amount) => `$${amount.toFixed(2)}`;
+/** Which allocation an organization model bills, with its spend so far. Shows
+*  only for an organization model, and picks the first allocation for it. */
+function AllocationSelector() {
 	const { adapter, selectedProvider, selectedAllocation, setSelectedAllocation } = useChat();
+	const t = useChatConfig().strings.allocationPicker;
 	const isOrgProvider = isOrgModel(selectedProvider);
 	const allocationsAdapter = adapter.allocations;
 	const { data: allocations } = useSWR(isOrgProvider && allocationsAdapter ? ["ai-chat-allocations"] : null, () => allocationsAdapter?.list());
+	const first = allocations?.[0];
 	useEffect(() => {
-		const first = allocations?.[0];
-		if (isOrgProvider && first && !selectedAllocation) setSelectedAllocation(first.name);
-	}, [
-		isOrgProvider,
-		allocations,
-		selectedAllocation,
-		setSelectedAllocation
-	]);
-	useEffect(() => {
-		if (!isOrgProvider && selectedAllocation) setSelectedAllocation(null);
+		if (!isOrgProvider) {
+			if (selectedAllocation) setSelectedAllocation(null);
+		} else if (first && !selectedAllocation) setSelectedAllocation(first.name);
 	}, [
 		isOrgProvider,
+		first,
 		selectedAllocation,
 		setSelectedAllocation
 	]);
 	if (!isOrgProvider || !allocations?.length) return null;
-	const options = allocations.map((alloc) => ({
-		label: alloc.name,
-		value: alloc.name
-	}));
 	const selected = allocations.find((a) => a.name === selectedAllocation);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2",
-		children: [/* @__PURE__ */ jsx(Dropdown, {
-			options,
-			value: selectedAllocation ?? "",
-			onChange: (v) => setSelectedAllocation(v || null),
-			variant,
-			textBoxClassName: bare ? "rounded-full h-8 px-2.5 text-[13px] hover:chat-tint" : "h-8 rounded-lg border theme-border text-xs px-2",
-			placeholder: "Select allocation"
-		}), selected && /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 items-center gap-2",
+		children: [/* @__PURE__ */ jsx(Select, {
+			"aria-label": t.choose,
+			items: allocations.map((a) => ({
+				value: a.name,
+				label: a.name
+			})),
+			value: selectedAllocation,
+			onValueChange: setSelectedAllocation,
+			trigger: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: chipClassName,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selected?.name ?? t.placeholder
+				}), /* @__PURE__ */ jsx(FaAngleDown, {
+					className: "h-3 w-3 shrink-0",
+					"aria-hidden": "true"
+				})]
+			})
+		}), selected && /* @__PURE__ */ jsx("span", {
 			className: "text-xs tabular-nums theme-muted-text whitespace-nowrap",
-			children: [
-				"$",
-				(selected.used ?? 0).toFixed(2),
-				" / $",
-				selected.total.toFixed(2)
-			]
+			children: t.usage(money(selected.used ?? 0), money(selected.total))
 		})]
 	});
 }

package/dist/ai/components/AttachmentManager.js

@@ -1,14 +1,14 @@
-import { safeUrl } from "../../safeUrl.js";
 import { BiSolidTrashAlt } from "../../icons/bi/BiSolidTrashAlt.js";
 import { FiDownload } from "../../icons/fi/FiDownload.js";
 import { FiFile } from "../../icons/fi/FiFile.js";
+import { safeUrl } from "../../safeUrl.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { formatFileSize } from "../utils.js";
 import { attachmentsPageKey } from "./attachmentKeys.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 import useSWRInfinite from "swr/infinite";
 //#region src/ai/components/AttachmentManager.tsx
@@ -74,7 +74,7 @@ function AttachmentManager() {
 					}) : attachments.length === 0 ? /* @__PURE__ */ jsx("p", {
 						className: "text-center theme-muted-text py-12 text-sm",
 						children: t.empty
-					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 						className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",
 						children: attachments.map((att) => {
 							const downloadUrl = attachmentsAdapter.downloadUrl(att.id);
@@ -87,14 +87,14 @@ function AttachmentManager() {
 								style: { cursor: "pointer" }
 							} : {};
 							return /* @__PURE__ */ jsxs("div", {
-								className: cx("rounded-lg border theme-border overflow-hidden", isDeleting && "opacity-50 pointer-events-none"),
+								className: clsx("rounded-lg border theme-border overflow-hidden", isDeleting && "opacity-50 pointer-events-none"),
 								children: [/* @__PURE__ */ jsxs("div", {
 									className: "relative aspect-square bg-(--theme-muted-panel-bg) flex items-center justify-center",
 									...openProps,
 									children: [/* @__PURE__ */ jsx(FiFile, { className: "w-8 h-8 theme-muted-text" }), showThumbnail && /* @__PURE__ */ jsx("img", {
 										src: downloadUrl,
 										alt: att.filename || "Image",
-										className: cx("absolute inset-0 w-full h-full object-cover", thumbnail !== "loaded" && "opacity-0"),
+										className: clsx("absolute inset-0 w-full h-full object-cover", thumbnail !== "loaded" && "opacity-0"),
 										loading: "lazy",
 										onLoad: () => markThumbnail(att.id, "loaded"),
 										onError: () => markThumbnail(att.id, "broken")
@@ -108,7 +108,7 @@ function AttachmentManager() {
 											children: att.filename || "File"
 										}), /* @__PURE__ */ jsxs("p", {
 											className: "truncate theme-muted-text",
-											children: [att.size ? formatFileSize(att.size) : "", att.uploadedAt && /* @__PURE__ */ jsxs(Fragment$1, { children: [att.size ? " · " : "", DateTime.fromISO(att.uploadedAt).toRelative()] })]
+											children: [att.size ? formatFileSize(att.size) : "", att.uploadedAt && /* @__PURE__ */ jsxs(Fragment, { children: [att.size ? " · " : "", DateTime.fromISO(att.uploadedAt).toRelative()] })]
 										})]
 									}), /* @__PURE__ */ jsxs("div", {
 										className: "flex items-center gap-0.5 flex-shrink-0",

package/dist/ai/components/AttachmentUpload.js

@@ -7,9 +7,9 @@ import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { formatFileSize } from "../utils.js";
 import { ATTACHMENTS_INFINITE_KEY } from "./attachmentKeys.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mutate } from "swr";
 //#region src/ai/components/AttachmentUpload.tsx
 var DEFAULT_MAX_FILE_SIZE = 26214400;
@@ -112,7 +112,7 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 	const handleClick = () => {
 		fileInputRef.current?.click();
 	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
 		ref: fileInputRef,
 		type: "file",
 		multiple: true,
@@ -127,7 +127,7 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 			children: attachments.map((attachment, index) => {
 				const Icon = getFileIcon(attachment.mimeType);
 				return /* @__PURE__ */ jsxs("div", {
-					className: cx("flex items-center gap-2 px-2 py-1 rounded border theme-border theme-muted-panel", attachment.error && "border-red-500"),
+					className: clsx("flex items-center gap-2 px-2 py-1 rounded border theme-border theme-muted-panel", attachment.error && "border-red-500"),
 					children: [
 						/* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 theme-muted-text" }),
 						/* @__PURE__ */ jsx("span", {
@@ -163,7 +163,7 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 			onDragOver: handleDragOver,
 			onDragLeave: handleDragLeave,
 			onDrop: handleDrop,
-			className: cx("relative block w-full border-2 border-dashed rounded-lg p-3 text-center transition-colors", isDragging ? "border-blue-500 bg-blue-500/10" : "theme-border hover:theme-border", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+			className: clsx("relative block w-full border-2 border-dashed rounded-lg p-3 text-center transition-colors", isDragging ? "border-blue-500 bg-blue-500/10" : "theme-border hover:theme-border", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
 			onClick: disabled ? void 0 : handleClick,
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "flex items-center justify-center gap-2 text-sm theme-muted-text",

package/dist/ai/components/BranchNavigator.js

@@ -1,8 +1,8 @@
 import { FaAngleLeft } from "../../icons/fa/FaAngleLeft.js";
 import { FaAngleRight } from "../../icons/fa/FaAngleRight.js";
 import { useChatConfig } from "../core/config.js";
-import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 //#region src/ai/components/BranchNavigator.tsx
 function findSiblings(messages, messageId) {
 	const message = messages.find((m) => m.id === messageId);

package/dist/ai/components/ChatEmptyState.js

@@ -12,8 +12,8 @@ import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
 import ChatStage from "./ChatStage.js";
 import ProviderIssueBanner from "./ProviderIssueBanner.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatEmptyState.tsx
 function pickRandom(arr, count) {
 	return [...arr].sort(() => Math.random() - .5).slice(0, count);
@@ -138,7 +138,7 @@ function ChatEmptyState({ targetSession }) {
 								disabled: isLoading || isLoadingModels || models.length === 0,
 								placeholder: isLoadingModels ? tInput.placeholderLoading : hasLoadedModels && models.length === 0 ? tInput.placeholderNoProviders : tInput.placeholder,
 								settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
-								settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
+								settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
 							}),
 							prompts.length > 0 && !(hasLoadedModels && models.length === 0) && /* @__PURE__ */ jsx("ul", {
 								className: "mx-auto max-w-[var(--chat-column,50rem)] px-8",

package/dist/ai/components/ChatInput.js

@@ -11,9 +11,9 @@ import DragOverlay from "./DragOverlay.js";
 import { PasteFileCard } from "./PastedText.js";
 import { SlashMenu, useSlashMenu } from "./SlashMenu.js";
 import { usePasteCards } from "./usePasteCards.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatInput.tsx
 /** An optional box that is still empty should not wear the filled look of
 *  one waiting to send something. */
@@ -35,10 +35,10 @@ function AttachButton({ open, disabled, label, onClick }) {
 		onClick,
 		disabled,
 		"aria-expanded": open,
-		className: cx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors", open ? "theme-text chat-tint-strong" : "theme-muted-text hover:theme-text hover:chat-tint", "disabled:opacity-50 disabled:cursor-not-allowed"),
+		className: clsx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors", open ? "theme-text chat-tint-strong" : "theme-muted-text hover:theme-text hover:chat-tint", "disabled:opacity-50 disabled:cursor-not-allowed"),
 		"aria-label": label,
 		title: label,
-		children: /* @__PURE__ */ jsx(GoPlus, { className: cx("h-5 w-5 transition-transform duration-200", open && "rotate-45") })
+		children: /* @__PURE__ */ jsx(GoPlus, { className: clsx("h-5 w-5 transition-transform duration-200", open && "rotate-45") })
 	});
 }
 function SendButton({ onClick, enabled, emphasised, label, testId }) {
@@ -47,7 +47,7 @@ function SendButton({ onClick, enabled, emphasised, label, testId }) {
 		onClick,
 		disabled: !enabled,
 		"data-testid": testId,
-		className: cx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-[background-color,color,transform] duration-150 active:scale-95", emphasised ? "theme-element hover:opacity-90" : "chat-send-idle", !enabled && "cursor-not-allowed active:scale-100"),
+		className: clsx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-[background-color,color,transform] duration-150 active:scale-95", emphasised ? "theme-element hover:opacity-90" : "chat-send-idle", !enabled && "cursor-not-allowed active:scale-100"),
 		"aria-label": label,
 		title: label,
 		children: /* @__PURE__ */ jsx(FaArrowUp, { className: "h-4 w-4" })
@@ -228,6 +228,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 					className: "relative",
 					children: [slash && slashMenu.open && /* @__PURE__ */ jsx(SlashMenu, {
 						label: slash.label,
+						listId: slashMenu.listId,
 						matches: slashMenu.matches,
 						active: slashMenu.active,
 						onChoose: (name) => {
@@ -248,7 +249,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 								})
 							}),
 							/* @__PURE__ */ jsxs("div", {
-								className: cx(!toolbar && "flex items-end gap-2 pr-2 pb-2"),
+								className: clsx(!toolbar && "flex items-end gap-2 pr-2 pb-2"),
 								children: [/* @__PURE__ */ jsx("div", {
 									className: "max-h-[200px] min-w-0 flex-1 overflow-y-auto",
 									children: /* @__PURE__ */ jsx("textarea", {
@@ -257,11 +258,12 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 										onChange: (e) => setInputAndPersist(e.target.value),
 										onKeyDown: handleKeyDown,
 										onPaste: handlePaste,
+										...slashMenu.inputProps,
 										placeholder: effectivePlaceholder,
 										"aria-label": inputLabel ?? effectivePlaceholder,
 										disabled,
 										rows: 1,
-										className: cx("theme-text block w-full resize-none overflow-hidden", "bg-transparent border-0 px-4", toolbar ? "pt-3.5 pb-1" : "pt-3 pb-1", "placeholder:theme-muted-text", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-[1rem] leading-relaxed")
+										className: clsx("theme-text block w-full resize-none overflow-hidden", "bg-transparent border-0 px-4", toolbar ? "pt-3.5 pb-1" : "pt-3 pb-1", "placeholder:theme-muted-text", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-[1rem] leading-relaxed")
 									})
 								}), !toolbar && action]
 							}),
@@ -286,7 +288,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 						]
 					})]
 				}),
-				(settingsLeft || uploadedCount > 0) && /* @__PURE__ */ jsx(ComposerSettings, { left: /* @__PURE__ */ jsxs(Fragment$1, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
+				(settingsLeft || uploadedCount > 0) && /* @__PURE__ */ jsx(ComposerSettings, { left: /* @__PURE__ */ jsxs(Fragment, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
 					className: "text-[11px] theme-muted-text",
 					children: t.filesAttached(uploadedCount)
 				})] }) }),

package/dist/ai/components/ChatLayout.js

@@ -4,9 +4,9 @@ import { useChat } from "../core/ChatProvider.js";
 import { KeyboardShortcutsProvider } from "../core/KeyboardShortcutsProvider.js";
 import { SidebarToggle } from "../ui/sidebar.js";
 import ChatSidebar from "./ChatSidebar.js";
-import cx from "classnames";
-import { useLayoutEffect, useRef, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
 //#region src/ai/components/ChatLayout.tsx
 /** The list at its default width beside the narrowest thread that still
 *  reads comfortably; narrower than that, 'auto' moves the list to a drawer. */
@@ -51,10 +51,9 @@ function ConversationLayout({ sidebar, children, sidebarMode = "inline", drawerB
 	const { strings } = useChatConfig();
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cx("flex h-full", drawer && "relative overflow-hidden"),
+		className: clsx("flex h-full", drawer && "relative overflow-hidden"),
 		children: [sidebar, /* @__PURE__ */ jsxs("main", {
-			inert: drawer && drawerOpen,
-			className: cx("flex min-w-0 flex-1 flex-col", CHAT_COLUMN_SCOPE),
+			className: clsx("flex min-w-0 flex-1 flex-col", CHAT_COLUMN_SCOPE),
 			children: [drawer && (drawerToggle || drawerBar) && /* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center gap-2 bg-(--theme-panel-bg) px-2 pt-2",
 				children: [drawerToggle && /* @__PURE__ */ jsx(SidebarToggle, {