@parallelworks/ui 0.64.0 → 0.65.0

package/README.md

@@ -845,6 +845,20 @@ optional capability groups (`providers`, `attachments`, `sharing`,
 `ChatAdapterError` with a user-facing `message`. Model entries and wire
 messages keep OpenAI-compatible snake_case field names.
 
+An adapter with `tools` lists the tools its backend runs itself while it
+answers, each a `ChatToolOption` (`id`, and a `label` and optional
+`description` in the reader's language). The composer's + button then opens a
+menu of Add files (when the adapter stores attachments) and Tools, whose
+submenu has a switch for each tool and the `extraLinks.connectTools` link,
+which leaves the row under the composer. Past six tools (`TOOLS_IN_MENU`),
+Tools opens a modal that searches them and turns a match on or off together. Every tool starts on, a dot on the + shows that some are off, and the
+choice is remembered per user in the browser. A turn the provider doesn't run,
+such as an agent's, offers no tools. Each request carries the enabled ids as
+`StreamRequest.tools` once the list has loaded, possibly empty, and the
+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.
+
 Tailwind v4 consumers add the chat rules (markdown rendering, streaming
 animations) and streamdown's classes next to the theme contract:
 

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

@@ -6,6 +6,24 @@ var CANNED_REPLIES = [
 	"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 TOOLS_OFF_REPLY = "Listing clusters is turned off in the tools menu, so I can't check which clusters are running. Turn it back on and ask again.";
+var LIST_CLUSTERS = "list_clusters";
+var MOCK_TOOLS = [
+	{
+		id: LIST_CLUSTERS,
+		label: "List clusters",
+		description: "Names your clusters and their state"
+	},
+	{
+		id: "list_storage",
+		label: "List storage",
+		description: "Names your buckets and disks"
+	},
+	{
+		id: "read_docs",
+		label: "Read the docs"
+	}
+];
 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) => {
@@ -29,6 +47,9 @@ function createMockChatAdapter(options) {
 	let replyIndex = 0;
 	return {
 		conversations: store.conversations,
+		tools: { async list() {
+			return MOCK_TOOLS;
+		} },
 		models: { async list() {
 			return {
 				models: [
@@ -69,7 +90,8 @@ function createMockChatAdapter(options) {
 				reasoning += word;
 				handlers.onReasoning?.(word);
 			}
-			const usesTools = req.model.includes("tools");
+			const toolsModel = req.model.includes("tools");
+			const usesTools = toolsModel && (req.tools === void 0 || req.tools.includes(LIST_CLUSTERS));
 			if (usesTools) {
 				const id = `call-${crypto.randomUUID()}`;
 				handlers.onPart?.({
@@ -93,7 +115,7 @@ function createMockChatAdapter(options) {
 					}])
 				});
 			}
-			const reply = usesTools ? TOOL_REPLY : CANNED_REPLIES[replyIndex++ % CANNED_REPLIES.length] ?? "";
+			const reply = usesTools ? TOOL_REPLY : toolsModel ? TOOLS_OFF_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.d.ts

@@ -1,4 +1,5 @@
 import { type StreamCompletion, type StreamRequest } from '../types.js';
+export declare const TOOLS_HEADER = "X-Platform-Tools";
 export interface OpenAIStreamConfig {
     completionsUrl: string;
     responsesUrl?: string;

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

@@ -3,6 +3,17 @@ import { errorMessageFromResponse } from "./errors.js";
 import { buildResponsesRequestBody, parseResponsesSSELine } from "./responses.js";
 import { processSSEStream } from "./sse.js";
 //#region src/ai/adapter/openai/createOpenAIStream.ts
+var TOOLS_HEADER = "X-Platform-Tools";
+function requestHeaders(hostHeaders, tools) {
+	const headers = {
+		"Content-Type": "application/json",
+		Accept: "text/event-stream"
+	};
+	const toolsKey = TOOLS_HEADER.toLowerCase();
+	for (const [name, value] of Object.entries(hostHeaders ?? {})) if (tools === void 0 || name.toLowerCase() !== toolsKey) headers[name] = value;
+	if (tools !== void 0) headers[TOOLS_HEADER] = tools.join(",");
+	return headers;
+}
 function createOpenAICompatibleStream(config) {
 	return async (req, handlers, signal) => {
 		const responsesUrl = req.useResponses === true ? config.responsesUrl : void 0;
@@ -15,11 +26,7 @@ function createOpenAICompatibleStream(config) {
 		};
 		const res = await (config.fetch ?? globalThis.fetch.bind(globalThis))(url, {
 			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-				Accept: "text/event-stream",
-				...config.buildHeaders?.(req)
-			},
+			headers: requestHeaders(config.buildHeaders?.(req), req.tools),
 			...config.credentials ? { credentials: config.credentials } : {},
 			body: JSON.stringify(body),
 			...signal ? { signal } : {}
@@ -31,4 +38,4 @@ function createOpenAICompatibleStream(config) {
 	};
 }
 //#endregion
-export { createOpenAICompatibleStream };
+export { TOOLS_HEADER, createOpenAICompatibleStream };

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

@@ -1,4 +1,4 @@
-export { createOpenAICompatibleStream, type OpenAIStreamConfig, } from './createOpenAIStream.js';
+export { createOpenAICompatibleStream, type OpenAIStreamConfig, TOOLS_HEADER, } from './createOpenAIStream.js';
 export { apiErrorMessage, errorMessageFromResponse, statusFallbackMessage, } from './errors.js';
 export { createOpenAIChatAdapter, type OpenAIChatAdapterOptions, } from './openaiAdapter.js';
 export { buildResponsesRequestBody, parseResponsesSSELine, } from './responses.js';

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

@@ -1,6 +1,6 @@
 import { apiErrorMessage, errorMessageFromResponse, statusFallbackMessage } from "./errors.js";
 import { buildResponsesRequestBody, parseResponsesSSELine } from "./responses.js";
 import { parseSSELine, processSSEStream } from "./sse.js";
-import { createOpenAICompatibleStream } from "./createOpenAIStream.js";
+import { TOOLS_HEADER, createOpenAICompatibleStream } from "./createOpenAIStream.js";
 import { createOpenAIChatAdapter } from "./openaiAdapter.js";
-export { apiErrorMessage, buildResponsesRequestBody, createOpenAIChatAdapter, createOpenAICompatibleStream, errorMessageFromResponse, parseResponsesSSELine, parseSSELine, processSSEStream, statusFallbackMessage };
+export { TOOLS_HEADER, apiErrorMessage, buildResponsesRequestBody, createOpenAIChatAdapter, createOpenAICompatibleStream, errorMessageFromResponse, parseResponsesSSELine, parseSSELine, processSSEStream, statusFallbackMessage };

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

@@ -20,6 +20,7 @@ export interface StreamRequest {
     userMessageId: string;
     allocation?: string | null;
     useResponses?: boolean;
+    tools?: string[];
 }
 export interface StreamHandlers {
     onContent: (content: string) => void;
@@ -124,6 +125,14 @@ export interface SharingAdapter {
 export interface AllocationsAdapter {
     list(): Promise<Allocation[]>;
 }
+export interface ChatToolOption {
+    id: string;
+    label: string;
+    description?: string;
+}
+export interface ChatToolsAdapter {
+    list(): Promise<ChatToolOption[]>;
+}
 export interface ChatAdapter {
     conversations: ConversationsAdapter;
     models: {
@@ -134,4 +143,5 @@ export interface ChatAdapter {
     attachments?: AttachmentsAdapter;
     sharing?: SharingAdapter;
     allocations?: AllocationsAdapter;
+    tools?: ChatToolsAdapter;
 }

package/dist/ai/components/ChatInput.js

@@ -1,9 +1,10 @@
 import { cx } from "../../cx.js";
-import { AddIcon, ArrowUpIcon, StopIcon } from "../../icons.js";
+import { ArrowUpIcon, StopIcon } from "../../icons.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import AttachmentUpload from "./AttachmentUpload.js";
 import useDragDrop from "../core/useDragDrop.js";
+import ComposerAddMenu from "./ComposerAddMenu.js";
 import { ComposerContext, ComposerControls, ComposerSettings } from "./ComposerChrome.js";
 import { clearDraft, readDraft, storeDraft, sweepDrafts } from "./chatDraft.js";
 import DragOverlay from "./DragOverlay.js";
@@ -27,18 +28,6 @@ function keyAction(e, empty, canEditLast) {
 	if (e.key === "ArrowUp" && empty && canEditLast) return "editLast";
 	return null;
 }
-function AttachButton({ open, disabled, label, onClick }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		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"),
-		"aria-label": label,
-		title: label,
-		children: /* @__PURE__ */ jsx(AddIcon, { className: cx("h-5 w-5 transition-transform duration-200", open && "rotate-45") })
-	});
-}
 function SendButton({ onClick, enabled, emphasized, label, testId }) {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -86,7 +75,7 @@ function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEd
 	const textareaRef = useRef(null);
 	const attachmentUploadRef = useRef(null);
 	const chat = useChat();
-	const { adapter, flushQueuedMessages, isSelectedModelAvailable } = chat;
+	const { adapter, flushQueuedMessages, isSelectedModelAvailable, tools } = chat;
 	const { isStreaming, stopStreaming, queuedCount } = streamControls(chat, turn);
 	const t = useChatConfig().strings.input;
 	const effectivePlaceholder = placeholder ?? t.placeholder;
@@ -197,7 +186,8 @@ function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEd
 		if (pastes && handleTextPaste(e.clipboardData.getData("text/plain"))) e.preventDefault();
 	};
 	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped: handleFilesDropped });
-	const toolbar = attachmentsAvailable || !!settingsRight;
+	const toolsAvailable = !turn && tools.length > 0;
+	const toolbar = attachmentsAvailable || toolsAvailable || !!settingsRight;
 	const action = isStreaming && !input.trim() ? /* @__PURE__ */ jsx("button", {
 		type: "button",
 		onClick: stopStreaming,
@@ -281,11 +271,11 @@ function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEd
 							}),
 							toolbar && /* @__PURE__ */ jsxs("div", {
 								className: "flex items-center gap-1 px-2 pb-2",
-								children: [attachmentsAvailable && /* @__PURE__ */ jsx(AttachButton, {
-									open: showAttachments,
+								children: [/* @__PURE__ */ jsx(ComposerAddMenu, {
+									attachmentsOpen: showAttachments && attachmentsAvailable,
+									onToggleAttachments: attachmentsAvailable ? () => setShowAttachments(!showAttachments) : void 0,
 									disabled,
-									label: t.attachFiles,
-									onClick: () => setShowAttachments(!showAttachments)
+									withTools: !turn
 								}), /* @__PURE__ */ jsxs("div", {
 									className: "ml-auto flex min-w-0 items-center gap-1",
 									children: [/* @__PURE__ */ jsx("div", {

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

@@ -0,0 +1,14 @@
+/** More tools than this leave the menu for a modal, where they can be searched. */
+export declare const TOOLS_IN_MENU = 6;
+/** The composer's + button. With only attachments it opens their panel, as it
+ *  always has; once the adapter lists tools it opens a menu of Add files and
+ *  Tools, whose submenu toggles each one. Past TOOLS_IN_MENU, Tools opens a
+ *  modal instead. A dot on the + says some tools are off. */
+export default function ComposerAddMenu({ attachmentsOpen, onToggleAttachments, disabled, withTools, }: {
+    attachmentsOpen: boolean;
+    /** Absent when the composer takes no files. */
+    onToggleAttachments?: (() => void) | undefined;
+    disabled: boolean;
+    /** Offer the provider's tools, for a turn the provider runs. */
+    withTools: boolean;
+}): import("react").JSX.Element | null;

package/dist/ai/components/ComposerAddMenu.js

@@ -0,0 +1,274 @@
+import { cx } from "../../cx.js";
+import { AddIcon, AttachmentIcon, ConnectIcon, ToolsIcon } from "../../icons.js";
+import { panelItemClassName } from "../../components/floating.js";
+import { MenuItem, MenuLinkItem, MenuPopup, MenuSeparator, MenuSubmenuTrigger } from "../../components/Menu.js";
+import { useQueryMatch } from "../../components/search.js";
+import { Button } from "../../components/Button.js";
+import { Modal } from "../../components/Modal.js";
+import { Switch } from "../../components/Switch.js";
+import { SearchInput } from "../../components/SearchInput.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import { Menu } from "@base-ui/react/menu";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState, useSyncExternalStore } from "react";
+var NARROW = "(max-width: 639px)";
+function subscribeNarrow(onChange) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+	const media = window.matchMedia(NARROW);
+	media.addEventListener("change", onChange);
+	return () => media.removeEventListener("change", onChange);
+}
+var isNarrow = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(NARROW).matches;
+/** A phone has no room beside the menu for a submenu, and no hover to open one. */
+function useNarrow() {
+	return useSyncExternalStore(subscribeNarrow, isNarrow, () => false);
+}
+function PlusButton({ open, label, hint, className, ...props }) {
+	const name = hint ? `${label} · ${hint}` : label;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		...props,
+		"aria-label": name,
+		title: name,
+		className: cx("relative 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 data-popup-open:theme-text data-popup-open:chat-tint", "disabled:opacity-50 disabled:cursor-not-allowed", className),
+		children: [/* @__PURE__ */ jsx(AddIcon, { className: cx("h-5 w-5 transition-transform duration-200", open && "rotate-45") }), hint && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute top-1 right-1 size-1.5 rounded-full bg-(--theme-accent)"
+		})]
+	});
+}
+/** A switch drawn for a menu row, which is itself the checkbox the reader toggles. */
+function RowSwitch() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "ml-auto inline-flex h-4 w-7 shrink-0 items-center rounded-full bg-(--theme-border-strong) p-0.5 transition-colors duration-150 group-data-checked:bg-(--theme-focus) motion-reduce:transition-none",
+		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 ToolText({ tool, descriptionId }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "block truncate",
+			children: tool.label
+		}), tool.description && /* @__PURE__ */ jsx("span", {
+			id: descriptionId,
+			className: "block truncate text-xs theme-muted-text",
+			children: tool.description
+		})]
+	});
+}
+function ToolMenuRow({ tool, enabled, onChange }) {
+	const descriptionId = useId();
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		checked: enabled,
+		onCheckedChange: onChange,
+		closeOnClick: false,
+		className: cx(panelItemClassName, "group gap-3"),
+		...tool.description ? { "aria-describedby": descriptionId } : {},
+		children: [/* @__PURE__ */ jsx(ToolText, {
+			tool,
+			descriptionId
+		}), /* @__PURE__ */ jsx(RowSwitch, {})]
+	});
+}
+function ToolsList({ listed }) {
+	const { enabledToolIds, setToolEnabled } = useChat();
+	return listed.map((tool) => /* @__PURE__ */ jsx(ToolMenuRow, {
+		tool,
+		enabled: enabledToolIds.includes(tool.id),
+		onChange: (enabled) => setToolEnabled(tool.id, enabled)
+	}, tool.id));
+}
+function ConnectToolsRow({ href }) {
+	const { strings } = useChatConfig();
+	return /* @__PURE__ */ jsxs(MenuLinkItem, {
+		render: /* @__PURE__ */ jsx("a", {
+			href,
+			target: "_blank",
+			rel: "noreferrer"
+		}),
+		className: "text-xs theme-muted-text data-highlighted:theme-text",
+		children: [/* @__PURE__ */ jsx(ConnectIcon, { className: "h-3.5 w-3.5 shrink-0" }), strings.sidebar.connectTools]
+	});
+}
+function OnCount({ enabled, total }) {
+	const { strings } = useChatConfig();
+	return /* @__PURE__ */ jsx("span", {
+		className: "ml-auto pl-3 text-xs tabular-nums theme-muted-text",
+		children: strings.composerMenu.toolsOn(enabled, total)
+	});
+}
+function ToolsModalRow({ tool, enabled, onChange }) {
+	const descriptionId = useId();
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", {
+		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
+			}), tool.description && /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				className: "block text-xs theme-muted-text",
+				children: tool.description
+			})]
+		}), /* @__PURE__ */ jsx(Switch, {
+			size: "sm",
+			checked: enabled,
+			onCheckedChange: onChange,
+			...tool.description ? { "aria-describedby": descriptionId } : {}
+		})]
+	}) });
+}
+/** Every tool, searchable, for a host with more than the menu holds. */
+function ToolsModal({ open, onClose, listed }) {
+	const { enabledToolIds, setToolEnabled } = useChat();
+	const { LinkComponent, extraLinks, strings } = useChatConfig();
+	const t = strings.composerMenu;
+	const matches = useQueryMatch();
+	const [query, setQuery] = useState("");
+	const needle = query.trim();
+	const shown = needle ? listed.filter((tool) => matches(needle, tool.label, tool.description, tool.id)) : listed;
+	const allOn = shown.every((tool) => enabledToolIds.includes(tool.id));
+	const close = () => {
+		onClose();
+		setQuery("");
+	};
+	let footerStart = /* @__PURE__ */ jsx("span", {});
+	if (extraLinks.connectTools) footerStart = /* @__PURE__ */ jsxs(LinkComponent, {
+		target: {
+			kind: "external",
+			href: extraLinks.connectTools
+		},
+		className: "mr-auto inline-flex items-center gap-1.5 text-xs theme-muted-text hover:theme-text",
+		children: [/* @__PURE__ */ jsx(ConnectIcon, { className: "h-3.5 w-3.5 shrink-0" }), strings.sidebar.connectTools]
+	});
+	return /* @__PURE__ */ jsxs(Modal, {
+		open,
+		onClose: close,
+		size: "md",
+		title: t.tools,
+		description: t.toolsDescription,
+		footer: /* @__PURE__ */ jsxs(Fragment, { children: [footerStart, /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			onClick: close,
+			children: t.done
+		})] }),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(SearchInput, {
+				value: query,
+				onValueChange: setQuery,
+				placeholder: t.searchTools,
+				label: t.searchTools,
+				className: "flex-1"
+			}), shown.length > 0 && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: () => {
+					for (const tool of shown) setToolEnabled(tool.id, !allOn);
+				},
+				children: allOn ? t.turnAllOff : t.turnAllOn
+			})]
+		}), shown.length > 0 ? /* @__PURE__ */ jsx("ul", {
+			className: "-mx-2 mt-3 flex flex-col",
+			children: shown.map((tool) => /* @__PURE__ */ jsx(ToolsModalRow, {
+				tool,
+				enabled: enabledToolIds.includes(tool.id),
+				onChange: (enabled) => setToolEnabled(tool.id, enabled)
+			}, tool.id))
+		}) : /* @__PURE__ */ jsx("p", {
+			className: "m-0 py-8 text-center text-sm theme-muted-text",
+			children: t.noToolsMatch
+		})]
+	});
+}
+/** The composer's + button. With only attachments it opens their panel, as it
+*  always has; once the adapter lists tools it opens a menu of Add files and
+*  Tools, whose submenu toggles each one. Past TOOLS_IN_MENU, Tools opens a
+*  modal instead. A dot on the + says some tools are off. */
+function ComposerAddMenu({ attachmentsOpen, onToggleAttachments, disabled, withTools }) {
+	const { tools, enabledToolIds } = useChat();
+	const { extraLinks, strings } = useChatConfig();
+	const [modalOpen, setModalOpen] = useState(false);
+	const narrow = useNarrow();
+	const t = strings.composerMenu;
+	const listed = withTools ? tools : [];
+	if (listed.length === 0) {
+		if (!onToggleAttachments) return null;
+		return /* @__PURE__ */ jsx(PlusButton, {
+			open: attachmentsOpen,
+			"aria-expanded": attachmentsOpen,
+			disabled,
+			label: strings.input.attachFiles,
+			onClick: onToggleAttachments
+		});
+	}
+	const enabled = listed.filter((tool) => enabledToolIds.includes(tool.id)).length;
+	const someOff = enabled < listed.length;
+	const many = listed.length > 6;
+	const connect = extraLinks.connectTools;
+	const label = onToggleAttachments ? t.label : t.tools;
+	if (many && !onToggleAttachments) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PlusButton, {
+		open: false,
+		"aria-haspopup": "dialog",
+		disabled,
+		label,
+		hint: someOff ? t.someToolsOff : void 0,
+		onClick: () => setModalOpen(true)
+	}), /* @__PURE__ */ jsx(ToolsModal, {
+		open: modalOpen,
+		onClose: () => setModalOpen(false),
+		listed
+	})] });
+	const toolsEntry = many ? /* @__PURE__ */ jsxs(MenuItem, {
+		onClick: () => setModalOpen(true),
+		children: [
+			/* @__PURE__ */ jsx(ToolsIcon, { className: "h-4 w-4 shrink-0 theme-muted-text" }),
+			t.tools,
+			/* @__PURE__ */ jsx(OnCount, {
+				enabled,
+				total: listed.length
+			})
+		]
+	}) : onToggleAttachments && !narrow ? /* @__PURE__ */ jsxs(Menu.SubmenuRoot, { children: [/* @__PURE__ */ jsxs(MenuSubmenuTrigger, { children: [
+		/* @__PURE__ */ jsx(ToolsIcon, { className: "h-4 w-4 shrink-0 theme-muted-text" }),
+		t.tools,
+		someOff && /* @__PURE__ */ jsx(OnCount, {
+			enabled,
+			total: listed.length
+		})
+	] }), /* @__PURE__ */ jsxs(MenuPopup, {
+		side: "inline-end",
+		className: "w-72",
+		children: [/* @__PURE__ */ jsx(ToolsList, { listed }), connect && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(ConnectToolsRow, { href: connect })] })]
+	})] }) : null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+		disabled,
+		render: /* @__PURE__ */ jsx(PlusButton, {
+			open: attachmentsOpen,
+			label,
+			hint: someOff ? t.someToolsOff : void 0
+		})
+	}), /* @__PURE__ */ jsxs(MenuPopup, {
+		side: "top",
+		align: "start",
+		className: toolsEntry ? "w-56" : "w-72",
+		children: [onToggleAttachments && /* @__PURE__ */ jsxs(MenuItem, {
+			onClick: onToggleAttachments,
+			children: [/* @__PURE__ */ jsx(AttachmentIcon, { className: "h-4 w-4 shrink-0 theme-muted-text" }), t.addFiles]
+		}), toolsEntry ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			onToggleAttachments && /* @__PURE__ */ jsx(MenuSeparator, {}),
+			/* @__PURE__ */ jsx(ToolsList, { listed }),
+			connect && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(ConnectToolsRow, { href: connect })] })
+		] })]
+	})] }), many && /* @__PURE__ */ jsx(ToolsModal, {
+		open: modalOpen,
+		onClose: () => setModalOpen(false),
+		listed
+	})] });
+}
+//#endregion
+export { ComposerAddMenu as default };

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

@@ -25,4 +25,6 @@ export declare function ComposerControls({ targetSession }: {
 /** Where the reader manages the providers behind the model picker, at the
  *  foot of a conversation list. */
 export declare function ManageProvidersLink(): import("react").JSX.Element | null;
+/** Where the reader connects more tools, under the composer. While the
+ *  adapter lists tools it sits at the foot of the composer's + menu instead. */
 export declare function ConnectToolsLink(): import("react").JSX.Element | null;

package/dist/ai/components/ComposerChrome.js

@@ -1,5 +1,6 @@
 import { ConnectIcon, SettingsIcon } from "../../icons.js";
 import { useChatConfig } from "../core/config.js";
+import { useHasChatTools } from "../core/ChatProvider.js";
 import AllocationSelector from "./AllocationSelector.js";
 import ModelSelector from "./ModelSelector.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -60,9 +61,12 @@ function ManageProvidersLink() {
 		})]
 	});
 }
+/** Where the reader connects more tools, under the composer. While the
+*  adapter lists tools it sits at the foot of the composer's + menu instead. */
 function ConnectToolsLink() {
 	const { extraLinks, LinkComponent, strings } = useChatConfig();
-	if (!extraLinks.connectTools) return null;
+	const inMenu = useHasChatTools();
+	if (!extraLinks.connectTools || inMenu) return null;
 	return /* @__PURE__ */ jsxs(LinkComponent, {
 		target: {
 			kind: "external",

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { ChatAdapter } from '../adapter/types.js';
+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 ChatUIConfig } from './config.js';
 import { type SidebarPresentation, type SidebarState } from './sidebarState.js';
@@ -17,6 +17,9 @@ interface ChatContextValue {
     selectedProvider: string | null;
     isSelectedModelAvailable: boolean;
     selectedAllocation: string | null;
+    /** The host's tools the reader may turn on or off; empty when it lists none. */
+    tools: ChatToolOption[];
+    enabledToolIds: string[];
     isLoading: boolean;
     isLoadingConversation: boolean;
     isLoadingModels: boolean;
@@ -40,6 +43,7 @@ interface ChatContextValue {
     retryMessage: (messageId: string) => Promise<boolean>;
     setSelectedProvider: (providerId: string | null) => void;
     setSelectedAllocation: (allocation: string | null) => void;
+    setToolEnabled: (id: string, enabled: boolean) => void;
     stopStreaming: () => void;
     removeQueuedMessage: (id: string) => void;
     flushQueuedMessages: () => void;
@@ -64,6 +68,9 @@ export interface ChatStream {
     thinkingStartTime: number | null;
 }
 export declare function useChat(): ChatContextValue;
+/** True while the adapter lists tools of its own, which the composer's +
+ *  menu offers; false outside a ChatProvider. */
+export declare function useHasChatTools(): boolean;
 /** The reply being streamed. A component that reads it re-renders on every
  *  token, so read it only where the reply is drawn. */
 export declare function useChatStream(): ChatStream;