@parallelworks/ui 0.41.0 → 0.42.0

package/dist/ai/components/ProviderIssueBanner.js

@@ -1,29 +1,47 @@
 import { FaExclamationTriangle } from "../../icons/fa/FaExclamationTriangle.js";
+import { IoSettingsOutline } from "../../icons/io5/IoSettingsOutline.js";
 import { useChatConfig } from "../core/config.js";
-import { providerIssueFor } from "../core/providerIssues.js";
+import { issueDetail, providerIssueFor } from "../core/providerIssues.js";
 import { useChat } from "../core/ChatProvider.js";
+import { getProviderKeyFromModelId } from "./ModelSelector.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ProviderIssueBanner.tsx
+/** Why the selected model can't answer, with a way to fix it for the
+*  provider's owner, who alone can change its key or endpoint. */
 function ProviderIssueBanner() {
-	const { strings } = useChatConfig();
-	const { models, providerIssues, selectedProvider } = useChat();
+	const { strings, extraLinks, LinkComponent } = useChatConfig();
+	const { models, providers, providerIssues, selectedProvider, currentUser } = useChat();
 	const selectedModel = models.find((m) => m.id === selectedProvider);
 	const issue = providerIssueFor(providerIssues, selectedModel);
-	if (!issue) return null;
-	const title = issue.status === "unauthorized" ? strings.providerIssue.bannerKeyRejected(issue.provider) : strings.providerIssue.bannerUnreachable(issue.provider);
-	const detail = issue.message || (issue.status === "unauthorized" ? strings.providerIssue.keyRejectedHint : strings.providerIssue.unreachableHint);
+	if (!selectedModel || !issue) return null;
+	const t = strings.providerIssue;
+	const title = issue.status === "unauthorized" ? t.bannerKeyRejected(issue.provider) : t.bannerUnreachable(issue.provider);
+	const providerKey = getProviderKeyFromModelId(selectedModel.id);
+	const provider = providers.find((p) => `${p.user}:${p.name}` === providerKey);
+	const settingsHref = provider?.user === currentUser.username ? extraLinks.providerSettings?.(provider.user, provider.name) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mx-4 mt-2 flex items-start gap-3 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20",
-		children: [/* @__PURE__ */ jsx(FaExclamationTriangle, { className: "w-4 h-4 text-amber-500 shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {
-			className: "flex-1 min-w-0",
-			children: [/* @__PURE__ */ jsx("p", {
-				className: "text-sm font-medium text-amber-700",
-				children: title
-			}), /* @__PURE__ */ jsx("p", {
-				className: "text-xs text-amber-600/80 mt-0.5",
-				children: detail
-			})]
-		})]
+		children: [
+			/* @__PURE__ */ jsx(FaExclamationTriangle, { className: "w-4 h-4 text-amber-500 shrink-0 mt-0.5" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-medium text-amber-700",
+					children: title
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-amber-600/80 mt-0.5",
+					children: issueDetail(t, issue)
+				})]
+			}),
+			settingsHref && /* @__PURE__ */ jsxs(LinkComponent, {
+				target: {
+					kind: "external",
+					href: settingsHref
+				},
+				className: "flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-amber-700 transition-colors hover:bg-amber-500/10",
+				children: [/* @__PURE__ */ jsx(IoSettingsOutline, { className: "h-3.5 w-3.5" }), strings.modelPicker.manageProvider]
+			})
+		]
 	});
 }
 //#endregion

package/dist/ai/components/Reasoning.js

@@ -1,5 +1,5 @@
 import { LuChevronRight } from "../../icons/lu/LuChevronRight.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/Reasoning.tsx
 /** The line a turn's reasoning folds under. It opens the reasoning in place,
@@ -12,16 +12,16 @@ function ReasoningToggle({ open, onToggle, shimmer = false, children }) {
 		"aria-expanded": open,
 		className: "group/reasoning -ml-1 flex items-center gap-x-1 rounded-md px-1 py-0.5 text-sm theme-muted-text transition-colors hover:theme-text",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: cx(shimmer && "animate-shimmer text-shimmer"),
+			className: clsx(shimmer && "animate-shimmer text-shimmer"),
 			children
-		}), /* @__PURE__ */ jsx(LuChevronRight, { className: cx("h-3.5 w-3.5 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-90") })]
+		}), /* @__PURE__ */ jsx(LuChevronRight, { className: clsx("h-3.5 w-3.5 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-90") })]
 	});
 }
 /** The reasoning itself: smaller and quieter than the answer, hung off a
 *  hairline of the accent so it reads as the assistant's aside. */
 function ReasoningBody({ className, children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("chat-reasoning-body ml-1 mt-1.5 mb-3 pl-4 text-sm leading-relaxed theme-muted-text", className),
+		className: clsx("chat-reasoning-body ml-1 mt-1.5 mb-3 pl-4 text-sm leading-relaxed theme-muted-text", className),
 		children
 	});
 }

package/dist/ai/components/ShareDialog.js

@@ -1,12 +1,14 @@
 import { BiSolidTrashAlt } from "../../icons/bi/BiSolidTrashAlt.js";
 import { PiShareBold } from "../../icons/pi/PiShareBold.js";
+import { Tooltip } from "../../components/Tooltip.js";
+import { Combobox } from "../../components/Combobox.js";
 import { ConfirmModal } from "../../components/ConfirmModal.js";
 import Loader from "../../components/Loader.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 { 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;
@@ -122,6 +124,13 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 	}, []);
 	if (!sharing) return null;
 	const teamPermissions = permissions.filter(isTeamPermission);
+	const permissionItems = [{
+		label: t.viewOnly,
+		value: "view"
+	}, {
+		label: t.canCollaborate,
+		value: "collaborate"
+	}];
 	const availableTeams = teams.filter((team) => !permissions.some((p) => p.team === team.id));
 	return /* @__PURE__ */ jsx(ConfirmModal, {
 		open: isOpen,
@@ -140,7 +149,7 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 					size: 24,
 					text: strings.modal.loading
 				})
-			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "border theme-border rounded-lg p-3",
 					children: [/* @__PURE__ */ jsx("h3", {
@@ -193,24 +202,25 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 									children: perm.teamName || perm.team
 								}), /* @__PURE__ */ jsxs("div", {
 									className: "flex items-center gap-2",
-									children: [/* @__PURE__ */ jsx(Dropdown, {
-										options: [{
-											label: t.viewOnly,
-											value: "view"
-										}, {
-											label: t.canCollaborate,
-											value: "collaborate"
-										}],
-										value: perm.permission,
-										onChange: (val) => handleTeamPermissionChange(perm.team, val),
-										wrapperClassName: "w-40",
-										textBoxClassName: "text-xs border theme-border rounded px-2 py-1"
-									}), /* @__PURE__ */ jsx("button", {
-										type: "button",
-										onClick: () => handleRemoveTeam(perm.team),
-										className: "p-1 rounded hover:bg-red-500/10",
-										title: t.remove,
-										children: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "w-3 h-3 text-red-500" })
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "w-40",
+										children: /* @__PURE__ */ jsx(Select, {
+											items: permissionItems,
+											value: perm.permission,
+											onValueChange: (level) => {
+												if (level !== null) handleTeamPermissionChange(perm.team, level);
+											},
+											"aria-label": perm.teamName || perm.team
+										})
+									}), /* @__PURE__ */ jsx(Tooltip, {
+										content: t.remove,
+										children: /* @__PURE__ */ jsx("button", {
+											type: "button",
+											onClick: () => handleRemoveTeam(perm.team),
+											className: "p-1 rounded hover:bg-red-500/10",
+											"aria-label": `${t.remove} ${perm.teamName || perm.team}`,
+											children: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "w-3 h-3 text-red-500" })
+										})
 									})]
 								})]
 							}, perm.team))
@@ -218,19 +228,17 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 							className: "text-sm theme-muted-text mb-3",
 							children: t.noGroups
 						}),
-						availableTeams.length > 0 && /* @__PURE__ */ jsx("div", {
-							className: "flex items-center gap-2",
-							children: /* @__PURE__ */ jsx(Dropdown, {
-								options: availableTeams.map((team) => ({
-									label: team.name,
-									value: team.id
-								})),
-								value: "",
-								onChange: (val) => handleAddTeam(val),
-								placeholder: t.addGroups,
-								wrapperClassName: "flex-1",
-								textBoxClassName: "text-sm border theme-border rounded px-2 py-1.5 w-full"
-							})
+						availableTeams.length > 0 && /* @__PURE__ */ jsx(Combobox, {
+							items: availableTeams.map((team) => ({
+								label: team.name,
+								value: team.id
+							})),
+							value: null,
+							onValueChange: (teamId) => {
+								if (teamId !== null) handleAddTeam(teamId);
+							},
+							placeholder: t.addGroups,
+							"aria-label": t.addGroups
 						})
 					]
 				}),
@@ -247,7 +255,7 @@ function ShareButton({ conversationId, disabled = false }) {
 	const { adapter } = useChat();
 	const [isOpen, setIsOpen] = useState(false);
 	if (!adapter.sharing) return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
 		type: "button",
 		onClick: () => setIsOpen(true),
 		disabled,

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

@@ -11,16 +11,26 @@ export interface SlashMenuConfig {
     onOpen?: (() => void) | undefined;
 }
 export declare function slashMatches(input: string, commands: SlashCommandOption[]): SlashCommandOption[];
-/** The palette's open state and keys; the caller owns the input. */
+/** The palette's open state and keys; the caller owns the input.
+ *  Base UI's Autocomplete drives a single-line input, and its arrow keys would take the caret
+ *  from a multi-line composer, so the textarea stays a textbox that points at the list:
+ *  spread `inputProps` on it. */
 export declare function useSlashMenu(input: string, config: SlashMenuConfig | undefined, setInput: (value: string) => void): {
     open: boolean;
     matches: SlashCommandOption[];
     active: number;
     choose: (name: string) => void;
     handleKey: (e: KeyboardEvent<HTMLTextAreaElement>) => boolean;
+    listId: string;
+    inputProps: {
+        'aria-autocomplete': 'list';
+        'aria-controls': string | undefined;
+        'aria-activedescendant': string | undefined;
+    };
 };
-export declare function SlashMenu({ label, matches, active, onChoose, }: {
+export declare function SlashMenu({ label, listId, matches, active, onChoose, }: {
     label: string;
+    listId: string;
     matches: SlashCommandOption[];
     active: number;
     onChoose: (name: string) => void;

package/dist/ai/components/SlashMenu.js

@@ -1,6 +1,7 @@
-import cx from "classnames";
-import { useEffect, useState } from "react";
+import { panelClassName, panelItemClassName } from "../../components/floating.js";
+import { clsx } from "clsx";
 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:-]*)$/;
@@ -10,8 +11,12 @@ function slashMatches(input, commands) {
 	const query = (typed[1] ?? "").toLowerCase();
 	return commands.filter((c) => c.name.toLowerCase().startsWith(query)).slice(0, MAX_SHOWN);
 }
-/** The palette's open state and keys; the caller owns the input. */
+/** The palette's open state and keys; the caller owns the input.
+*  Base UI's Autocomplete drives a single-line input, and its arrow keys would take the caret
+*  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) : [];
@@ -30,6 +35,7 @@ function useSlashMenu(input, config, setInput) {
 		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;
@@ -43,7 +49,7 @@ function useSlashMenu(input, config, setInput) {
 			case "Tab":
 			case "Enter": {
 				if (e.shiftKey) return false;
-				const pick = matches[Math.min(active, matches.length - 1)];
+				const pick = matches[shown];
 				if (!pick) return false;
 				choose(pick.name);
 				break;
@@ -59,29 +65,39 @@ function useSlashMenu(input, config, setInput) {
 	return {
 		open,
 		matches,
-		active,
+		active: shown,
 		choose,
-		handleKey
+		handleKey,
+		listId,
+		inputProps: {
+			"aria-autocomplete": "list",
+			"aria-controls": open ? listId : void 0,
+			"aria-activedescendant": open ? optionId(listId, shown) : void 0
+		}
 	};
 }
-function SlashMenu({ label, matches, active, onChoose }) {
+var optionId = (listId, index) => `${listId}-${index}`;
+function SlashMenu({ label, listId, matches, active, onChoose }) {
 	return /* @__PURE__ */ jsx("div", {
+		id: listId,
 		role: "listbox",
 		"aria-label": label,
 		"data-testid": "slash-menu",
-		className: "absolute bottom-full left-0 right-0 mb-2 z-20 overflow-hidden rounded-xl border theme-border bg-(--theme-panel-bg) shadow-lg",
-		children: matches.map((c, i) => /* @__PURE__ */ jsxs("button", {
-			type: "button",
+		className: clsx("absolute bottom-full left-0 right-0 z-20 mb-2 overflow-hidden py-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("flex w-full items-baseline gap-3 px-3 py-1.5 text-left text-sm", i === active ? "theme-hover" : "hover:theme-hover"),
+			className: clsx("items-baseline gap-3", panelItemClassName),
 			children: [/* @__PURE__ */ jsxs("span", {
-				className: "font-mono theme-text",
+				className: "font-mono",
 				children: ["/", c.name]
 			}), c.description && /* @__PURE__ */ jsx("span", {
-				className: "truncate text-xs theme-muted-text",
+				className: "truncate text-xs text-(--theme-muted-text-color)",
 				children: c.description
 			})]
 		}, c.name))

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

@@ -1,9 +1,9 @@
 import { FaStop } from "../../../icons/fa/FaStop.js";
 import { LoaderIcon } from "../../../components/StatusIcons.js";
 import { useChatConfig } from "../../core/config.js";
-import cx from "classnames";
-import { useEffect, useRef, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import { DateTime } from "luxon";
 //#region src/ai/components/agent/ActivityLine.tsx
 /** The agent status words: one is picked per turn and held until it ends. */
@@ -142,7 +142,7 @@ function ActivityLine({ startedAt, inputTokens, outputTokens, onStop, stopping =
 				disabled: stopping,
 				"aria-label": strings.input.stopGenerating,
 				title: strings.input.stopGenerating,
-				className: cx("ml-auto inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-xs theme-muted-text transition-colors", "hover:theme-hover hover:theme-text disabled:cursor-not-allowed disabled:opacity-50"),
+				className: clsx("ml-auto inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-xs theme-muted-text transition-colors", "hover:theme-hover hover:theme-text disabled:cursor-not-allowed disabled:opacity-50"),
 				children: [/* @__PURE__ */ jsx(FaStop, { className: "h-3 w-3" }), strings.activity.stop]
 			})
 		]

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

@@ -11,14 +11,14 @@ import { useChatConfig } from "../../core/config.js";
 import Markdown from "../../ui/Markdown.js";
 import { chatProseClasses } from "../../ui/prose.js";
 import { ReasoningBody, ReasoningToggle } from "../Reasoning.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#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$1, { children: pieces.map((t, i) => /* @__PURE__ */ jsx("span", {
+	if (!emphasis || emphasis.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: pieces.map((t, i) => /* @__PURE__ */ jsx("span", {
 		style: t.color ? { color: t.color } : void 0,
 		children: t.content
 	}, i)) });
@@ -41,7 +41,7 @@ function LineSpans({ text, tokens, emphasis }) {
 		}
 		offset += t.content.length;
 	}
-	return /* @__PURE__ */ jsx(Fragment$1, { children: out });
+	return /* @__PURE__ */ jsx(Fragment, { children: out });
 }
 function DiffRows({ rows, lang }) {
 	const isDark = useCssIsDark();
@@ -68,7 +68,7 @@ function DiffRows({ rows, lang }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "overflow-x-auto rounded-md border theme-border font-mono text-xs leading-5",
 		children: rows.map((row, i) => /* @__PURE__ */ jsxs("div", {
-			className: cx("flex whitespace-pre", row.kind === "add" && "bg-green-500/15", row.kind === "del" && "bg-red-500/15", row.kind === "gap" && "theme-muted-text"),
+			className: clsx("flex whitespace-pre", row.kind === "add" && "bg-green-500/15", row.kind === "del" && "bg-red-500/15", row.kind === "gap" && "theme-muted-text"),
 			children: [
 				numbered && /* @__PURE__ */ jsx("span", {
 					className: "w-10 shrink-0 select-none text-right pr-2 theme-muted-text",
@@ -207,11 +207,11 @@ function ToolCallBlock({ part }) {
 							]
 						})]
 					}),
-					/* @__PURE__ */ jsx(LuChevronRight, { className: cx("w-3.5 h-3.5 mt-1 shrink-0 theme-muted-text transition-transform", expanded && "rotate-90") })
+					/* @__PURE__ */ jsx(LuChevronRight, { className: clsx("w-3.5 h-3.5 mt-1 shrink-0 theme-muted-text transition-transform", expanded && "rotate-90") })
 				]
 			}),
 			!isDiff && /* @__PURE__ */ jsx("div", {
-				className: cx("ml-5 mt-0.5 text-[13px]", part.status === "error" ? "text-red-600" : "theme-muted-text"),
+				className: clsx("ml-5 mt-0.5 text-[13px]", part.status === "error" ? "text-red-600" : "theme-muted-text"),
 				children: expanded ? null : summary
 			}),
 			expanded && !isDiff && /* @__PURE__ */ jsxs("div", {
@@ -251,7 +251,7 @@ function SubagentCard({ part }) {
 			className: "flex min-h-6 items-start gap-2 w-full text-left",
 			children: [
 				part.status === "running" ? /* @__PURE__ */ jsx(LoaderIcon, { className: "w-3.5 h-3.5 mt-[3px] animate-spin theme-muted-text" }) : /* @__PURE__ */ jsx("span", {
-					className: cx("leading-none", part.status === "failed" ? "text-red-500" : "text-green-600"),
+					className: clsx("leading-none", part.status === "failed" ? "text-red-500" : "text-green-600"),
 					style: color && part.status !== "failed" ? { color } : void 0,
 					children: "●"
 				}),
@@ -269,10 +269,10 @@ function SubagentCard({ part }) {
 						]
 					})]
 				}),
-				canExpand && /* @__PURE__ */ jsx(LuChevronRight, { className: cx("w-3.5 h-3.5 mt-1 shrink-0 theme-muted-text transition-transform", expanded && "rotate-90") })
+				canExpand && /* @__PURE__ */ jsx(LuChevronRight, { className: clsx("w-3.5 h-3.5 mt-1 shrink-0 theme-muted-text transition-transform", expanded && "rotate-90") })
 			]
 		}), /* @__PURE__ */ jsx("div", {
-			className: cx("ml-5 mt-0.5 text-[13px]", part.status === "failed" ? "text-red-600" : "theme-muted-text"),
+			className: clsx("ml-5 mt-0.5 text-[13px]", part.status === "failed" ? "text-red-600" : "theme-muted-text"),
 			children: expanded ? /* @__PURE__ */ jsxs("div", {
 				className: "space-y-1",
 				children: [actions.length > 0 && /* @__PURE__ */ jsxs("ul", {
@@ -297,7 +297,7 @@ function ConfirmApproval({ part, onAnswer }) {
 		path: [t.allowPath, t.denyPath],
 		call: [t.allowCall, t.denyCall]
 	}[part.subject ?? "command"];
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	return /* @__PURE__ */ jsxs(Fragment, { 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
@@ -376,7 +376,7 @@ function AskApproval({ part, onAnswer }) {
 		kind: "ask",
 		text
 	});
-	if (!onAnswer) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	if (!onAnswer) return /* @__PURE__ */ jsxs(Fragment, { children: [
 		part.question && /* @__PURE__ */ jsx("div", {
 			className: "text-sm",
 			children: part.question
@@ -393,7 +393,7 @@ function AskApproval({ part, onAnswer }) {
 			children: t.approvalPending
 		})
 	] });
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [part.question && /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [part.question && /* @__PURE__ */ jsx("div", {
 		className: "text-sm",
 		children: part.question
 	}), own === null ? /* @__PURE__ */ jsxs("div", {
@@ -457,7 +457,7 @@ function ApprovalBlock({ part, onApprovalAnswer }) {
 function PlanApproval({ part }) {
 	const { strings } = useChatConfig();
 	const t = strings.agentTranscript;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		className: "text-xs theme-muted-text",
 		children: t.planPending
 	}), part.plan && /* @__PURE__ */ jsx("div", {
@@ -480,7 +480,7 @@ function TodoSnapshotBlock({ part }) {
 		}), /* @__PURE__ */ jsx("ul", {
 			className: "space-y-0.5 text-sm",
 			children: part.todos.map((todo) => /* @__PURE__ */ jsxs("li", {
-				className: cx("flex items-start gap-2", todo.status === "completed" && "line-through theme-muted-text", todo.status === "in_progress" && "font-semibold"),
+				className: clsx("flex items-start gap-2", todo.status === "completed" && "line-through theme-muted-text", todo.status === "in_progress" && "font-semibold"),
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "select-none font-mono",
 					children: todo.status === "completed" ? "✔" : todo.status === "in_progress" ? "■" : "□"
@@ -508,7 +508,7 @@ function NoticeBlock({ part }) {
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "min-w-0 flex-1 whitespace-pre-wrap",
 					children: part.text
-				}), /* @__PURE__ */ jsx(LuChevronRight, { className: cx("mt-0.5 h-3.5 w-3.5 shrink-0 transition-transform", expanded && "rotate-90") })]
+				}), /* @__PURE__ */ jsx(LuChevronRight, { className: clsx("mt-0.5 h-3.5 w-3.5 shrink-0 transition-transform", expanded && "rotate-90") })]
 			}), expanded && /* @__PURE__ */ jsx("div", {
 				className: "ml-4 mt-1 border-l-2 theme-border pl-3 text-sm theme-muted-text",
 				children: /* @__PURE__ */ jsx(Markdown, { children: part.detail })
@@ -516,7 +516,7 @@ function NoticeBlock({ part }) {
 		});
 	}
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("my-1 text-xs rounded-md px-2.5 py-1.5", part.kind === "error" ? "bg-red-500/10 text-red-700" : "bg-yellow-500/10 text-yellow-700"),
+		className: clsx("my-1 text-xs rounded-md px-2.5 py-1.5", part.kind === "error" ? "bg-red-500/10 text-red-700" : "bg-yellow-500/10 text-yellow-700"),
 		"data-testid": `${part.kind}-part`,
 		children: part.text
 	});
@@ -575,7 +575,7 @@ function ReasoningBlock({ part, isStreaming }) {
 }
 function TextBlock({ part, isStreaming }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(chatProseClasses, "[&:not(:first-child)]:mt-4"),
+		className: clsx(chatProseClasses, "[&:not(:first-child)]:mt-4"),
 		children: /* @__PURE__ */ jsx(Markdown, {
 			isStreaming: isStreaming ?? false,
 			children: part.text
@@ -702,10 +702,10 @@ function RollupGroup({ members, message }) {
 					className: "font-mono text-[13px] theme-muted-text min-w-0 truncate",
 					children: sentence
 				}),
-				/* @__PURE__ */ jsx(LuChevronRight, { className: cx("w-3.5 h-3.5 shrink-0 theme-muted-text transition-transform", expanded && "rotate-90") })
+				/* @__PURE__ */ jsx(LuChevronRight, { className: clsx("w-3.5 h-3.5 shrink-0 theme-muted-text transition-transform", expanded && "rotate-90") })
 			]
 		}), /* @__PURE__ */ jsx("div", {
-			className: cx("ml-1.5 mt-0.5 rounded-md", expanded ? "bg-(--theme-muted-panel-bg)/40 px-2" : "hidden"),
+			className: clsx("ml-1.5 mt-0.5 rounded-md", expanded ? "bg-(--theme-muted-panel-bg)/40 px-2" : "hidden"),
 			children: members.map((m) => /* @__PURE__ */ jsx(PartDispatch, {
 				part: m.part,
 				message

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

@@ -1,6 +1,7 @@
+import { Select } from "../../../components/Select.js";
 import { isNamedPermissionMode, permissionModesUpTo } from "../../agent/permissions.js";
 import { useChatConfig } from "../../core/config.js";
-import Dropdown from "../../ui/Dropdown.js";
+import { smallChipClassName } from "../../ui/chip.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/ai/components/agent/PermissionPicker.tsx
 var LABEL_KEY = {
@@ -17,22 +18,23 @@ function PermissionPicker({ mode, onPick, ceiling, accepted, disabled = false })
 	const t = useChatConfig().strings.permissions;
 	const current = mode ?? "accept-edits";
 	const named = isNamedPermissionMode(current) ? current : void 0;
-	const options = permissionModesUpTo(ceiling, accepted).map((m) => ({
+	const items = permissionModesUpTo(ceiling, accepted).map((m) => ({
 		value: m,
 		label: t[LABEL_KEY[m]],
 		description: t[`${LABEL_KEY[m]}Hint`]
 	}));
-	return /* @__PURE__ */ jsx(Dropdown, {
-		options,
+	return /* @__PURE__ */ jsx(Select, {
+		"aria-label": t.choose,
+		items,
 		value: current,
-		onChange: (value) => onPick(value),
+		onValueChange: (value) => value && onPick(value),
 		disabled,
-		variant: "bare",
-		ariaLabel: t.choose,
-		...named ? { hint: t[`${LABEL_KEY[named]}Hint`] } : {},
-		...options.some((o) => o.value === current) ? {} : { valueLabel: named ? t[LABEL_KEY[named]] : current },
-		textBoxClassName: "rounded-md px-1.5 py-0.5 text-[11px] theme-muted-text transition-colors hover:theme-muted-panel hover:theme-text",
-		listClassName: "w-64"
+		triggerTooltip: named ? t[`${LABEL_KEY[named]}Hint`] : void 0,
+		trigger: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: smallChipClassName,
+			children: named ? t[LABEL_KEY[named]] : current
+		})
 	});
 }
 //#endregion

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
-import { type OpenMenu, type RowMenuItem } from '../../list/index.js';
+import { type OpenMenu } from '../../components/ContextMenu.js';
+import type { MenuEntry } from '../../components/MenuEntries.js';
 import type { ConversationSummary } from '../types.js';
 export type ConversationGroupKey = 'groupToday' | 'groupYesterday' | 'groupThisWeek' | 'groupThisMonth' | 'groupOlder';
 /** Conversations by how long ago they started, newest group first, leaving
@@ -13,11 +14,8 @@ export declare function groupConversationsByDate<T extends {
 /** What a conversation row offers behind its menu (rename, share, download,
  *  delete) and the menu and dialogs that carry them out, for any list of
  *  conversations. Render `overlays` once beside the list. */
-export declare function useConversationActions({ menuZClassName, }?: {
-    /** The menu's stacking class, for a list inside a layer above the page. */
-    menuZClassName?: string;
-}): {
-    menuItems: (conv: ConversationSummary) => RowMenuItem[];
+export declare function useConversationActions(): {
+    menuItems: (conv: ConversationSummary) => MenuEntry[];
     openMenu: OpenMenu;
     overlays: ReactNode;
 };