@parallelworks/ui 0.76.0 → 0.78.0

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 { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+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/ChatEmptyState.js

@@ -1,6 +1,6 @@
 import { AddIcon, CloudIcon } from "../../icons.js";
-import { keyedByContent } from "../../components/keys.js";
 import { useStrings } from "../../components/Provider.js";
+import { keyedByContent } from "../../components/keys.js";
 import { Button } from "../../components/Button.js";
 import { Callout } from "../../components/Callout.js";
 import { useChatConfig } from "../core/config.js";
@@ -13,8 +13,8 @@ import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
 import ChatStage, { StageList } 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);
@@ -132,7 +132,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, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
+								settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
 							}),
 							prompts.length > 0 && !(hasLoadedModels && models.length === 0) && /* @__PURE__ */ jsx(StageList, { children: keyedByContent(prompts, (p) => p).map(({ key, item: prompt }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
 								type: "button",

package/dist/ai/components/ChatInput.js

@@ -11,8 +11,8 @@ import DragOverlay from "./DragOverlay.js";
 import { PasteFileCard } from "./PastedText.js";
 import { SlashMenu, useSlashMenu } from "./SlashMenu.js";
 import { usePasteCards } from "./usePasteCards.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, 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. */
@@ -230,9 +230,7 @@ function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEd
 					className: "relative",
 					children: [slash && slashMenu.open && /* @__PURE__ */ jsx(SlashMenu, {
 						label: slash.label,
-						listId: slashMenu.listId,
-						matches: slashMenu.matches,
-						active: slashMenu.active,
+						menu: slashMenu,
 						onChoose: (name) => {
 							slashMenu.choose(name);
 							textareaRef.current?.focus();
@@ -290,7 +288,7 @@ function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEd
 						]
 					})]
 				}),
-				(settingsLeft || uploadedCount > 0) && /* @__PURE__ */ jsx(ComposerSettings, { left: /* @__PURE__ */ jsxs(Fragment, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
+				(settingsLeft || uploadedCount > 0) && /* @__PURE__ */ jsx(ComposerSettings, { left: /* @__PURE__ */ jsxs(Fragment$1, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
 					className: "text-[11px] theme-muted-text",
 					children: t.filesAttached(uploadedCount)
 				})] }) }),

package/dist/ai/components/ChatLayout.js

@@ -5,8 +5,8 @@ import { useChat } from "../core/ChatProvider.js";
 import { KeyboardShortcutsProvider } from "../core/KeyboardShortcutsProvider.js";
 import { SidebarToggle } from "../ui/sidebar.js";
 import ChatSidebar from "./ChatSidebar.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#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. */

package/dist/ai/components/ChatMessage.js

@@ -17,8 +17,8 @@ import BranchNavigator from "./BranchNavigator.js";
 import { UserMessageText } from "./PastedText.js";
 import { replyText } from "../core/useKeyboardShortcuts.js";
 import MessageAttachments from "./MessageAttachments.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 //#region src/ai/components/ChatMessage.tsx
 /** A message action: the chat's square, tinted from the ink on hover. */

package/dist/ai/components/ChatMessageList.js

@@ -9,8 +9,8 @@ import Markdown from "../ui/Markdown.js";
 import { Reasoning, ReasoningBody } from "./Reasoning.js";
 import AgentMessageParts from "./agent/AgentMessageParts.js";
 import ChatMessage_default from "./ChatMessage.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatMessageList.tsx
 function ChatMessageList({ messages, allMessages, streamingMessage: streamingMessageProp, queuedMessages, onRemoveQueued, canRemoveQueued, queueDelivery = "afterReply", editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator = true }) {
 	const { adapter, isStreaming: providerStreaming } = useChat();
@@ -268,7 +268,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 								children: [
 									removable ? /* @__PURE__ */ jsx(ClockIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" }),
 									/* @__PURE__ */ jsx("span", { children: status }),
-									onRemoveQueued && removable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+									onRemoveQueued && removable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 										"aria-hidden": "true",
 										children: "·"
 									}), /* @__PURE__ */ jsx("button", {

package/dist/ai/components/ChatSidebar.js

@@ -10,8 +10,8 @@ import { FOCUS_SIDEBAR_SEARCH_EVENT } from "../core/events.js";
 import { SidebarEmpty, SidebarRow, SidebarRowBody } from "../ui/sidebar.js";
 import { ConversationSidebar } from "../ui/ConversationSidebar.js";
 import { groupConversationsByDate, useConversationActions } from "./conversationActions.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatSidebar.tsx
 function ConversationRow({ conv, isCurrent, menuItems, openMenu, onOpen }) {
 	const { LinkComponent, strings } = useChatConfig();
@@ -122,7 +122,7 @@ function ChatSidebar({ actions = true, top }) {
 			current: filteredConversations.find((conv) => conv.id === activeConversationId),
 			onSelect: (conv) => navigation.toConversation(conv.id)
 		},
-		top: (top || actions) && /* @__PURE__ */ jsxs(Fragment, { children: [top?.({ collapsed: sidebarCollapsed }), actions && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		top: (top || actions) && /* @__PURE__ */ jsxs(Fragment$1, { children: [top?.({ collapsed: sidebarCollapsed }), actions && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-0.5 px-2 pt-2 pb-1",
 			children: [/* @__PURE__ */ jsxs(LinkComponent, {
 				target: { kind: "newChat" },
@@ -155,7 +155,7 @@ function ChatSidebar({ actions = true, top }) {
 		})] })] }),
 		footer: /* @__PURE__ */ jsx(ManageProvidersLink, {})
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [(drawer || sidebar !== "hidden") && list, overlays] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [(drawer || sidebar !== "hidden") && list, overlays] });
 }
 //#endregion
 export { ChatSidebar as default };

package/dist/ai/components/ChatThread.js

@@ -5,8 +5,8 @@ import { ComposerControls, ComposerUsage, ConnectToolsLink } from "./ComposerChr
 import ProviderIssueBanner from "./ProviderIssueBanner.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";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatThread.tsx
 function ChatThread({ conversationId }) {
 	const { adapter, currentUser, currentConversation, loadConversation, loadProviders, sendMessage, retryMessage, answerToolApproval, tools, isLoadingConversation, navigateToBranch, queuedMessages, removeQueuedMessage } = useChat();
@@ -57,12 +57,12 @@ function ChatThread({ conversationId }) {
 		currentUsername: currentUser.username,
 		loading: isLoadingConversation && !currentConversation,
 		dropFiles: !!adapter.attachments,
-		banners: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BlockedGroupBanner, {}), /* @__PURE__ */ jsx(ProviderIssueBanner, {})] }),
+		banners: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BlockedGroupBanner, {}), /* @__PURE__ */ jsx(ProviderIssueBanner, {})] }),
 		composer: {
 			disabled: isLoadingConversation || !canWrite,
 			...canWrite ? {} : { placeholder: strings.thread.viewOnly },
-			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, {})] })
+			settingsLeft: /* @__PURE__ */ jsxs(Fragment$1, { children: [currentConversation && currentConversation.isOwner !== false ? /* @__PURE__ */ jsx(ShareButton, { conversationId }) : tools.length > 0 && /* @__PURE__ */ jsx(ToolResultsSharedNote, {}), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
+			settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
 		}
 	});
 }

package/dist/ai/components/ComposerAddMenu.js

@@ -3,6 +3,7 @@ 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 { useNarrow } from "../../components/useNarrow.js";
 import { Button } from "../../components/Button.js";
 import { Modal } from "../../components/Modal.js";
 import { Switch } from "../../components/Switch.js";
@@ -10,20 +11,8 @@ 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);
-}
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 function PlusButton({ open, label, hint, className, ...props }) {
 	const name = hint ? `${label} · ${hint}` : label;
 	return /* @__PURE__ */ jsxs("button", {
@@ -162,7 +151,7 @@ function ToolsModal({ open, onClose, listed }) {
 		size: "md",
 		title: t.tools,
 		description: t.toolsDescription,
-		footer: /* @__PURE__ */ jsxs(Fragment, { children: [footerStart, /* @__PURE__ */ jsx(Button, {
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [footerStart, /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			onClick: close,
 			children: t.done
@@ -222,7 +211,7 @@ function ComposerAddMenu({ attachmentsOpen, onToggleAttachments, disabled, withT
 	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, {
+	if (many && !onToggleAttachments) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PlusButton, {
 		open: false,
 		"aria-haspopup": "dialog",
 		disabled,
@@ -254,9 +243,9 @@ function ComposerAddMenu({ attachmentsOpen, onToggleAttachments, disabled, withT
 	] }), /* @__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 })] })]
+		children: [/* @__PURE__ */ jsx(ToolsList, { listed }), connect && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(ConnectToolsRow, { href: connect })] })]
 	})] }) : null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Menu.Trigger, {
 		disabled,
 		render: /* @__PURE__ */ jsx(PlusButton, {
 			open: attachmentsOpen,
@@ -270,10 +259,10 @@ function ComposerAddMenu({ attachmentsOpen, onToggleAttachments, disabled, withT
 		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: [
+		}), toolsEntry ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			onToggleAttachments && /* @__PURE__ */ jsx(MenuSeparator, {}),
 			/* @__PURE__ */ jsx(ToolsList, { listed }),
-			connect && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(ConnectToolsRow, { href: connect })] })
+			connect && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(ConnectToolsRow, { href: connect })] })
 		] })]
 	})] }), many && /* @__PURE__ */ jsx(ToolsModal, {
 		open: modalOpen,

package/dist/ai/components/ModelSelector.js

@@ -6,8 +6,8 @@ import { useChatConfig } from "../core/config.js";
 import { issueDetail, issueLabel, providerIssueFor } from "../core/providerIssues.js";
 import { useChat } from "../core/ChatProvider.js";
 import { chipClassName } from "../ui/chip.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ModelSelector.tsx
 var ORG_OWNER = "org";
 /** Who registered a provider: the provider list's owner when the adapter
@@ -20,7 +20,7 @@ function providerOwner(info, model) {
 function CspIcon({ cspKind, className }) {
 	const { slots } = useChatConfig();
 	const custom = slots.providerIcon?.(cspKind, className);
-	if (custom) return /* @__PURE__ */ jsx(Fragment, { children: custom });
+	if (custom) return /* @__PURE__ */ jsx(Fragment$1, { children: custom });
 	return /* @__PURE__ */ jsx(CloudIcon, { className: cx("theme-muted-text", className) });
 }
 function getProviderKeyFromModelId(modelId) {
@@ -135,7 +135,7 @@ function ModelSelector({ targetSession, model }) {
 		trigger: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: chipClassName,
-			children: [selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: [selected ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("span", {
 					className: "truncate font-medium theme-text",
 					children: getModelLabel(selected)

package/dist/ai/components/PastedText.js

@@ -6,8 +6,8 @@ import { useChatConfig } from "../core/config.js";
 import Markdown from "../ui/Markdown.js";
 import { fencePaste } from "../core/pasteLanguage.js";
 import { splitPastes } from "../core/pastes.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/PastedText.tsx
 /** A paste sent, or about to be sent, as its saved file. */
 function PasteFileCard({ id, lines, bytes, saving = false, error, onRemove }) {
@@ -49,16 +49,16 @@ function PasteFileCard({ id, lines, bytes, saving = false, error, onRemove }) {
 *  it reads as, one sent as its file as a card. The blank lines the composer puts around a
 *  paste would stack on the block's own spacing, so they are dropped. */
 function UserMessageText({ content, pastes }) {
-	if (!pastes?.length) return /* @__PURE__ */ jsx(Fragment, { children: content });
+	if (!pastes?.length) return /* @__PURE__ */ jsx(Fragment$1, { children: content });
 	const segments = splitPastes(content, pastes);
 	const shows = (seg) => typeof seg !== "string" || seg.trim() !== "";
 	const blockSpacing = (i) => cx(segments.slice(0, i).some(shows) ? "mt-2.5" : "mt-0", segments.slice(i + 1).some(shows) ? "mb-2.5" : "mb-0");
-	return /* @__PURE__ */ jsx(Fragment, { children: segments.map((segment, i) => {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: segments.map((segment, i) => {
 		if (typeof segment === "string") {
 			let text = segment;
 			if (i > 0) text = text.replace(/^\n+/, "");
 			if (i < segments.length - 1) text = text.replace(/\n+$/, "");
-			return text ? /* @__PURE__ */ jsx(Fragment$1, { children: text }, i) : null;
+			return text ? /* @__PURE__ */ jsx(Fragment, { children: text }, i) : null;
 		}
 		if (segment.inline && segment.text !== void 0) return /* @__PURE__ */ jsx("span", {
 			className: cx("chat-paste-code block", blockSpacing(i)),

package/dist/ai/components/SessionView.js

@@ -4,8 +4,9 @@ import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
 import { escapeClosesLayer } from "../core/useKeyboardShortcuts.js";
 import ChatMessageList from "./ChatMessageList.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import ChatActivity from "./ChatActivity.js";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/SessionView.tsx
 /** One conversation or agent session: its transcript, with the composer at
 *  the foot of the scrolling column. The host binds its own data and actions;
@@ -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.js

@@ -9,8 +9,8 @@ import { ConfirmModal } from "../../components/ConfirmModal.js";
 import { Select } from "../../components/Select.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState, useTransition } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ShareDialog.tsx
 function isTeamPermission(p) {
 	return !!p.team && !p.entireOrganization;
@@ -150,7 +150,7 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 					size: 24,
 					label: common.loading
 				})
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "border theme-border rounded-lg p-3",
 					children: [/* @__PURE__ */ jsx("h3", {
@@ -253,7 +253,7 @@ function ShareButton({ conversationId, disabled = false }) {
 	const [isOpen, setIsOpen] = useState(false);
 	const shared = useShared(conversationId, tools.length > 0 && !isOpen);
 	if (!adapter.sharing) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => setIsOpen(true),

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

@@ -27,11 +27,38 @@ export declare function useSlashMenu(input: string, config: SlashMenuConfig | un
         'aria-controls': string | undefined;
         'aria-activedescendant': string | undefined;
     };
+    list: {
+        active: number;
+        setActive: import("react").Dispatch<import("react").SetStateAction<number>>;
+        handleKey: (event: globalThis.KeyboardEvent | KeyboardEvent<Element>) => boolean;
+        listId: string;
+        hostProps: {
+            'aria-autocomplete': 'list';
+            'aria-controls': string | undefined;
+            'aria-activedescendant': string | undefined;
+        };
+        listProps: {
+            id: string;
+            role: 'listbox';
+        };
+        optionProps: (index: number) => {
+            id: string;
+            role: 'option';
+            tabIndex: number;
+            'aria-selected': boolean;
+            'aria-disabled': true | undefined;
+            'data-highlighted': true | undefined;
+            'data-disabled': true | undefined;
+            onMouseDown: (event: {
+                preventDefault: () => void;
+            }) => void;
+            onMouseMove: () => void;
+            onClick: () => void;
+        };
+    };
 };
-export declare function SlashMenu({ label, listId, matches, active, onChoose, }: {
+export declare function SlashMenu({ label, menu, onChoose, }: {
     label: string;
-    listId: string;
-    matches: SlashCommandOption[];
-    active: number;
+    menu: ReturnType<typeof useSlashMenu>;
     onChoose: (name: string) => void;
 }): import("react").JSX.Element;

package/dist/ai/components/SlashMenu.js

@@ -1,7 +1,6 @@
-import { cx } from "../../cx.js";
-import { panelClassName, panelItemClassName } from "../../components/floating.js";
+import { ListboxOption, ListboxPanel, useListboxNavigation } from "../../components/Listbox.js";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useState } from "react";
 //#region src/ai/components/SlashMenu.tsx
 var MAX_SHOWN = 8;
 var TYPING_NAME = /^\/([\w:-]*)$/;
@@ -16,8 +15,6 @@ function slashMatches(input, commands) {
 *  from a multi-line composer, so the textarea stays a textbox that points at the list:
 *  spread `inputProps` on it. */
 function useSlashMenu(input, config, setInput) {
-	const listId = useId();
-	const [active, setActive] = useState(0);
 	const [dismissed, setDismissed] = useState(false);
 	const matches = config ? slashMatches(input, config.commands) : [];
 	const exact = matches.length === 1 && `/${matches[0]?.name}` === input;
@@ -27,80 +24,56 @@ function useSlashMenu(input, config, setInput) {
 	useEffect(() => {
 		if (startsCommand) onOpen?.();
 	}, [startsCommand, onOpen]);
+	const choose = (name) => setInput(`/${name} `);
+	const list = useListboxNavigation({
+		items: matches,
+		open,
+		onChoose: (command) => choose(command.name),
+		onDismiss: () => setDismissed(true)
+	});
 	const query = TYPING_NAME.exec(input)?.[1] ?? null;
 	const [shownQuery, setShownQuery] = useState(query);
 	if (query !== shownQuery) {
 		setShownQuery(query);
-		setActive(0);
+		list.setActive(0);
 		setDismissed(false);
 	}
-	const choose = (name) => setInput(`/${name} `);
-	const shown = Math.min(active, matches.length - 1);
 	/** True when the key belonged to the menu. */
-	const handleKey = (e) => {
-		if (!open) return false;
-		switch (e.key) {
-			case "ArrowDown":
-				setActive((i) => (i + 1) % matches.length);
-				break;
-			case "ArrowUp":
-				setActive((i) => (i - 1 + matches.length) % matches.length);
-				break;
-			case "Tab":
-			case "Enter": {
-				if (e.shiftKey) return false;
-				const pick = matches[shown];
-				if (!pick) return false;
-				choose(pick.name);
-				break;
-			}
-			case "Escape":
-				setDismissed(true);
-				break;
-			default: return false;
-		}
-		e.preventDefault();
-		return true;
-	};
+	const handleKey = (e) => list.handleKey(e);
 	return {
 		open,
 		matches,
-		active: shown,
+		active: list.active,
 		choose,
 		handleKey,
-		listId,
-		inputProps: {
-			"aria-autocomplete": "list",
-			"aria-controls": open ? listId : void 0,
-			"aria-activedescendant": open ? optionId(listId, shown) : void 0
-		}
+		listId: list.listId,
+		inputProps: list.hostProps,
+		list
 	};
 }
-var optionId = (listId, index) => `${listId}-${index}`;
-function SlashMenu({ label, listId, matches, active, onChoose }) {
+function SlashMenu({ label, menu, onChoose }) {
 	return /* @__PURE__ */ jsx("div", {
-		id: listId,
-		role: "listbox",
-		"aria-label": label,
 		"data-testid": "slash-menu",
-		className: cx("absolute bottom-full left-0 right-0 z-20 mb-2 overflow-hidden", "p-1", panelClassName),
-		children: matches.map((c, i) => /* @__PURE__ */ jsxs("div", {
-			id: optionId(listId, i),
-			role: "option",
-			tabIndex: -1,
-			"aria-selected": i === active,
-			"data-highlighted": i === active || void 0,
-			onMouseDown: (e) => e.preventDefault(),
-			onClick: () => onChoose(c.name),
-			className: cx("items-baseline gap-3", panelItemClassName),
-			children: [/* @__PURE__ */ jsxs("span", {
-				className: "font-mono",
-				children: ["/", c.name]
-			}), c.description && /* @__PURE__ */ jsx("span", {
-				className: "truncate text-xs text-(--theme-muted-text-color)",
-				children: c.description
-			})]
-		}, c.name))
+		className: "absolute bottom-full left-0 right-0 z-20 mb-2",
+		children: /* @__PURE__ */ jsx(ListboxPanel, {
+			listProps: menu.list.listProps,
+			"aria-label": label,
+			children: menu.matches.map((c, i) => {
+				const option = menu.list.optionProps(i);
+				return /* @__PURE__ */ jsx(ListboxOption, {
+					option: {
+						...option,
+						onClick: () => onChoose(c.name)
+					},
+					inline: true,
+					label: /* @__PURE__ */ jsxs("span", {
+						className: "font-mono",
+						children: ["/", c.name]
+					}),
+					description: c.description
+				}, c.name);
+			})
+		})
 	});
 }
 //#endregion

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

@@ -4,8 +4,8 @@ import { Loader } from "../../../components/Loader.js";
 import { formatCount, formatDuration } from "../../../format.js";
 import { useElapsed } from "../../../components/relativeTime.js";
 import { useChatConfig } from "../../core/config.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/agent/ActivityLine.tsx
 function randomIndex() {
 	return Math.floor(Math.random() * 1e6);

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;