@parallelworks/ui 0.40.1 → 0.42.0

package/dist/ai/components/ModelSelector.js

@@ -1,17 +1,15 @@
-import { FaCheck } from "../../icons/fa/FaCheck.js";
 import { FaChevronDown } from "../../icons/fa/FaChevronDown.js";
 import { FaCloud } from "../../icons/fa/FaCloud.js";
-import { FaCog } from "../../icons/fa/FaCog.js";
 import { FaExclamationTriangle } from "../../icons/fa/FaExclamationTriangle.js";
-import { FaRobot } from "../../icons/fa/FaRobot.js";
 import { FaUndoAlt } from "../../icons/fa/FaUndoAlt.js";
+import { Combobox } from "../../components/Combobox.js";
 import { useChatConfig } from "../core/config.js";
-import { providerIssueFor } from "../core/providerIssues.js";
+import { issueDetail, issueLabel, providerIssueFor } from "../core/providerIssues.js";
 import { useChat } from "../core/ChatProvider.js";
-import cx from "classnames";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
+import { chipClassName } from "../ui/chip.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 //#region src/ai/components/ModelSelector.tsx
 var ORG_OWNER = "org";
 /** Who registered a provider: the provider list's owner when the adapter
@@ -21,14 +19,11 @@ function providerOwner(info, model) {
 	if (info) return info.user === ORG_OWNER ? "" : info.user;
 	return model?.provider_owner ?? "";
 }
-/** The search field plus the list's max-h-80, so the flip decision matches
-*  what renders. */
-var MAX_PANEL_HEIGHT_PX = 380;
 function CspIcon({ cspKind, className }) {
 	const { slots } = useChatConfig();
 	const custom = slots.providerIcon?.(cspKind, className);
-	if (custom) return /* @__PURE__ */ jsx(Fragment$1, { children: custom });
-	return /* @__PURE__ */ jsx(FaCloud, { className: cx("text-purple-500", className) });
+	if (custom) return /* @__PURE__ */ jsx(Fragment, { children: custom });
+	return /* @__PURE__ */ jsx(FaCloud, { className: clsx("text-purple-500", className) });
 }
 function getProviderKeyFromModelId(modelId) {
 	const idx = modelId.indexOf("/");
@@ -54,339 +49,107 @@ function groupModelsByProvider(models) {
 	}
 	return groups;
 }
-function ModelSelector({ targetSession, variant = "default" }) {
-	const bare = variant === "bare";
+/** Picks the model a conversation runs on, grouped by provider. Sessions that
+*  are still connecting or not responding show as headings with their status,
+*  so the reader sees why their models are missing. */
+function ModelSelector({ targetSession }) {
 	const { providers, models, unreachableSessions, providerIssues, selectedProvider, setSelectedProvider, isLoadingModels, hasLoadedModels, modelsError, refreshModels, currentUser } = useChat();
-	const { extraLinks, LinkComponent, strings } = useChatConfig();
-	const [isOpen, setIsOpen] = useState(false);
-	const [searchQuery, setSearchQuery] = useState("");
-	const [dropdownPosition, setDropdownPosition] = useState({
-		top: 0,
-		bottom: 0,
-		left: 0,
-		width: 0,
-		flipped: false
-	});
-	const containerRef = useRef(null);
-	const dropdownRef = useRef(null);
-	const buttonRef = useRef(null);
-	const inputRef = useRef(null);
-	const [mounted, setMounted] = useState(false);
-	useEffect(() => {
-		setMounted(true);
-	}, []);
-	const updateDropdownPosition = useCallback(() => {
-		if (!buttonRef.current) return;
-		const rect = buttonRef.current.getBoundingClientRect();
-		const below = window.innerHeight - rect.bottom;
-		setDropdownPosition({
-			top: rect.bottom + 4,
-			bottom: window.innerHeight - rect.top + 4,
-			left: rect.left,
-			width: Math.max(rect.width, 320),
-			flipped: below < MAX_PANEL_HEIGHT_PX && rect.top > below
+	const { strings } = useChatConfig();
+	const t = strings.modelPicker;
+	const targetSessionFound = !!targetSession && models.some((m) => m.id.startsWith(`session:${targetSession}/`));
+	const targetSessionStatus = !targetSession ? null : isLoadingModels ? "connecting" : hasLoadedModels && !targetSessionFound ? "offline" : null;
+	const groups = useMemo(() => {
+		const status = (label, description) => ({
+			label,
+			icon: /* @__PURE__ */ jsx(FaCloud, { className: "h-3 w-3 text-amber-500" }),
+			description,
+			items: []
 		});
-	}, []);
-	useEffect(() => {
-		if (!isOpen) return;
-		function handleClickOutside(event) {
-			const target = event.target;
-			const clickedInsideButton = containerRef.current?.contains(target);
-			const clickedInsideDropdown = dropdownRef.current?.contains(target);
-			if (!clickedInsideButton && !clickedInsideDropdown) setIsOpen(false);
-		}
-		const timeoutId = setTimeout(() => {
-			document.addEventListener("mousedown", handleClickOutside);
-		}, 0);
-		return () => {
-			clearTimeout(timeoutId);
-			document.removeEventListener("mousedown", handleClickOutside);
-		};
-	}, [isOpen]);
-	useEffect(() => {
-		if (!isOpen) return;
-		updateDropdownPosition();
-		window.addEventListener("scroll", updateDropdownPosition, true);
-		window.addEventListener("resize", updateDropdownPosition);
-		return () => {
-			window.removeEventListener("scroll", updateDropdownPosition, true);
-			window.removeEventListener("resize", updateDropdownPosition);
-		};
-	}, [isOpen, updateDropdownPosition]);
-	useEffect(() => {
-		if (isOpen && inputRef.current) inputRef.current.focus();
-	}, [isOpen]);
-	const filteredModels = useMemo(() => {
-		if (!searchQuery.trim()) return models;
-		const query = searchQuery.toLowerCase();
-		return models.filter((model) => getModelNameFromId(model.id).toLowerCase().includes(query) || (model.provider || "").toLowerCase().includes(query) || (model.name || "").toLowerCase().includes(query));
-	}, [models, searchQuery]);
-	const groupedModels = useMemo(() => groupModelsByProvider(filteredModels), [filteredModels]);
-	const selectedModelInfo = models.find((m) => m.id === selectedProvider);
-	const selectedModelName = selectedModelInfo ? getModelLabel(selectedModelInfo) : null;
-	const selectedProviderName = selectedModelInfo?.provider || null;
-	const issueLabel = (issue) => issue.status === "unauthorized" ? strings.providerIssue.keyRejected : strings.providerIssue.unreachable;
-	const issueDetail = (issue) => issue.message || (issue.status === "unauthorized" ? strings.providerIssue.keyRejectedHint : strings.providerIssue.unreachableHint);
-	const issueSummary = (issue) => `${issueLabel(issue)} \u2014 ${issueDetail(issue)}`;
-	const selectedModelIssue = providerIssueFor(providerIssues, selectedModelInfo);
-	const handleSelect = (modelId) => {
-		setSelectedProvider(modelId);
-		setIsOpen(false);
-		setSearchQuery("");
-	};
-	const targetSessionDisplayName = targetSession?.split(":").pop();
-	const targetSessionFound = targetSession && models.length > 0 ? models.some((m) => m.id.startsWith(`session:${targetSession}/`)) : false;
-	const targetSessionStatus = targetSession ? isLoadingModels ? "connecting" : hasLoadedModels && !targetSessionFound ? "offline" : null : null;
-	const boxClass = bare ? "flex items-center gap-1.5 rounded-full h-8 px-2.5 min-w-0 max-w-[280px]" : "flex items-center gap-2 px-3 h-8 rounded-lg min-w-[180px] max-w-[280px]";
-	const textClass = bare ? "text-[13px]" : "text-sm";
-	if (isLoadingModels && models.length === 0 && !targetSession) return /* @__PURE__ */ jsx("div", {
-		ref: containerRef,
-		className: "relative min-w-0",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: boxClass,
-			children: [!bare && /* @__PURE__ */ jsx(FaRobot, { className: "h-4 w-4 text-purple-500 flex-shrink-0 animate-pulse" }), /* @__PURE__ */ jsx("span", {
-				className: cx(textClass, "theme-muted-text"),
-				children: "Loading models..."
-			})]
-		})
-	});
-	if (modelsError && models.length === 0) return /* @__PURE__ */ jsx("div", {
-		ref: containerRef,
-		className: "relative min-w-0",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: boxClass,
-			children: [
-				!bare && /* @__PURE__ */ jsx(FaRobot, { className: "h-4 w-4 text-red-500 flex-shrink-0" }),
-				/* @__PURE__ */ jsx("span", {
-					className: cx(textClass, "text-red-600"),
-					children: "Failed to load models"
+		const sessions = unreachableSessions.filter((s) => `${s.owner}:${s.name}` !== targetSession).map((s) => status(s.name, t.notResponding));
+		if (targetSession && targetSessionStatus) sessions.unshift(status(targetSession.split(":").pop() ?? targetSession, targetSessionStatus === "connecting" ? t.connecting : t.notResponding));
+		const byProvider = [...groupModelsByProvider(models)].map(([providerKey, providerModels]) => {
+			const info = providers.find((p) => `${p.user}:${p.name}` === providerKey);
+			const first = providerModels[0];
+			const name = first?.provider || info?.name || providerKey;
+			const platform = info?.platformLabel;
+			const owner = providerOwner(info, first);
+			const issue = providerIssueFor(providerIssues, first);
+			const description = [
+				platform && platform.toLowerCase() !== name.toLowerCase() ? platform : null,
+				owner && owner !== currentUser.username ? t.sharedBy(owner) : null,
+				issue ? issueLabel(strings.providerIssue, issue) : null
+			].filter(Boolean).join(" · ");
+			return {
+				label: name,
+				icon: /* @__PURE__ */ jsx(CspIcon, {
+					cspKind: info?.cspKind ?? "other",
+					className: "h-3 w-3"
 				}),
-				/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: () => refreshModels(),
-					className: "flex items-center gap-1 text-xs text-blue-600 hover:underline ml-1",
-					children: [/* @__PURE__ */ jsx(FaUndoAlt, { className: "h-2.5 w-2.5" }), "Retry"]
-				})
-			]
-		})
+				description: description || void 0,
+				items: providerModels.map((model) => ({
+					label: getModelLabel(model),
+					value: model.id,
+					disabled: !!issue
+				}))
+			};
+		});
+		return [...sessions, ...byProvider];
+	}, [
+		models,
+		providers,
+		providerIssues,
+		unreachableSessions,
+		targetSession,
+		targetSessionStatus,
+		currentUser.username,
+		strings.providerIssue,
+		t
+	]);
+	if (isLoadingModels && models.length === 0 && !targetSession) return /* @__PURE__ */ jsx("span", {
+		className: clsx(chipClassName, "cursor-default animate-pulse"),
+		children: t.loading
 	});
-	if (hasLoadedModels && models.length === 0 && !targetSessionStatus && unreachableSessions.length === 0) return /* @__PURE__ */ jsx("div", {
-		ref: containerRef,
-		className: "relative min-w-0",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: boxClass,
-			children: [!bare && /* @__PURE__ */ jsx(FaRobot, { className: "h-4 w-4 theme-muted-text flex-shrink-0" }), /* @__PURE__ */ jsx("span", {
-				className: cx(textClass, "theme-muted-text"),
-				children: "No models available"
-			})]
-		})
+	if (modelsError && models.length === 0) return /* @__PURE__ */ jsxs("span", {
+		className: clsx(chipClassName, "cursor-default text-(--theme-error)"),
+		children: [t.failed, /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => refreshModels(),
+			className: "flex items-center gap-1 text-xs text-(--theme-element) hover:underline",
+			children: [/* @__PURE__ */ jsx(FaUndoAlt, { className: "h-2.5 w-2.5" }), t.retry]
+		})]
+	});
+	if (groups.length === 0 && hasLoadedModels) return /* @__PURE__ */ jsx("span", {
+		className: clsx(chipClassName, "cursor-default"),
+		children: t.none
 	});
-	const triggerText = selectedModelName ? null : targetSessionStatus === "connecting" ? "Connecting..." : models.length === 0 && isLoadingModels ? "Loading models..." : "Select a model";
-	return /* @__PURE__ */ jsxs("div", {
-		ref: containerRef,
-		className: "relative min-w-0",
-		children: [/* @__PURE__ */ jsxs("button", {
-			ref: buttonRef,
+	const selected = models.find((m) => m.id === selectedProvider);
+	const issue = providerIssueFor(providerIssues, selected);
+	return /* @__PURE__ */ jsx(Combobox, {
+		"aria-label": t.choose,
+		placeholder: t.search,
+		items: groups,
+		value: selectedProvider,
+		onValueChange: (id) => id && setSelectedProvider(id),
+		disabled: groups.length === 0,
+		triggerTooltip: issue ? `${issueLabel(strings.providerIssue, issue)} \u2014 ${issueDetail(strings.providerIssue, issue)}` : void 0,
+		trigger: /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			onClick: () => setIsOpen(!isOpen),
-			"aria-haspopup": "dialog",
-			"aria-expanded": isOpen,
-			disabled: models.length === 0 && !targetSessionStatus && unreachableSessions.length === 0,
-			className: cx(boxClass, "transition-all cursor-pointer bg-transparent", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed", bare ? "hover:chat-tint" : "border theme-border hover:theme-hover"),
-			children: [
-				!bare && /* @__PURE__ */ jsx(FaRobot, { className: cx("h-4 w-4 flex-shrink-0", targetSessionStatus === "connecting" ? "text-amber-500 animate-pulse" : "text-purple-500") }),
-				/* @__PURE__ */ jsx("div", {
-					className: "flex-1 min-w-0 text-left",
-					children: selectedModelName ? /* @__PURE__ */ jsxs("div", {
-						className: "flex items-baseline gap-1.5 min-w-0",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								title: selectedModelName,
-								className: cx("truncate", bare ? "text-[13px] font-medium theme-text" : "text-sm font-medium text-(--theme-panel)"),
-								children: selectedModelName
-							}),
-							selectedProviderName && /* @__PURE__ */ jsx("span", {
-								title: selectedProviderName,
-								className: "theme-muted-text truncate flex-shrink-0 max-w-[45%] text-xs",
-								children: selectedProviderName
-							}),
-							selectedModelIssue && /* @__PURE__ */ jsx(FaExclamationTriangle, {
-								title: issueSummary(selectedModelIssue),
-								className: "h-3.5 w-3.5 text-amber-500 flex-shrink-0 self-center"
-							})
-						]
-					}) : /* @__PURE__ */ jsx("span", {
-						className: cx(textClass, targetSessionStatus === "connecting" ? "text-amber-600" : "theme-muted-text"),
-						children: triggerText
-					})
+			className: chipClassName,
+			children: [selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium theme-text",
+					children: getModelLabel(selected)
+				}),
+				selected.provider && /* @__PURE__ */ jsx("span", {
+					className: "max-w-[45%] shrink-0 truncate text-xs",
+					children: selected.provider
 				}),
-				/* @__PURE__ */ jsx(FaChevronDown, { className: cx("h-3 w-3 theme-muted-text transition-transform flex-shrink-0", !bare && "ml-auto", isOpen && "rotate-180") })
-			]
-		}), isOpen && mounted && createPortal(/* @__PURE__ */ jsxs("div", {
-			ref: dropdownRef,
-			role: "none",
-			onClick: (e) => e.stopPropagation(),
-			onKeyDown: (e) => {
-				if (e.key === "Escape") {
-					e.preventDefault();
-					setIsOpen(false);
-					buttonRef.current?.focus();
-				}
-			},
-			style: {
-				position: "fixed",
-				...dropdownPosition.flipped ? { bottom: dropdownPosition.bottom } : { top: dropdownPosition.top },
-				left: dropdownPosition.left,
-				width: dropdownPosition.width,
-				zIndex: 9999
-			},
-			className: cx("theme-panel rounded-lg shadow-lg", "border theme-border", "overflow-hidden"),
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "p-2 border-b theme-border",
-				children: /* @__PURE__ */ jsx("input", {
-					ref: inputRef,
-					type: "text",
-					value: searchQuery,
-					onChange: (e) => setSearchQuery(e.target.value),
-					placeholder: "Search models...",
-					className: cx("w-full px-3 py-2 text-sm rounded-md", "theme-muted-panel", "border theme-border", "focus:outline-none focus:ring-2 focus:ring-blue-500", "placeholder:theme-muted-text")
-				})
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "max-h-80 overflow-y-auto",
-				children: [
-					targetSessionStatus && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-						className: "px-3 py-1.5 bg-amber-500/5 sticky top-0",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2",
-							children: [
-								/* @__PURE__ */ jsx(FaCloud, { className: "h-3 w-3 text-amber-500" }),
-								/* @__PURE__ */ jsx("span", {
-									className: "text-xs font-semibold text-amber-600 uppercase tracking-wide flex-1",
-									children: targetSessionDisplayName
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: cx("text-[10px] px-1.5 py-0.5 rounded-full", targetSessionStatus === "connecting" ? "text-amber-600 bg-amber-500/10 animate-pulse" : "text-amber-500 bg-amber-500/10"),
-									children: targetSessionStatus === "connecting" ? "Connecting..." : "Not responding"
-								})
-							]
-						})
-					}), /* @__PURE__ */ jsx("div", {
-						className: "px-4 py-2 flex items-center gap-2",
-						children: /* @__PURE__ */ jsx("span", {
-							className: "text-sm theme-muted-text italic",
-							children: targetSessionStatus === "connecting" ? "Loading session models..." : "Service not responding — ensure it is running on the remote host"
-						})
-					})] }),
-					unreachableSessions.filter((s) => !targetSession || `${s.owner}:${s.name}` !== targetSession).map((s) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-						className: "px-3 py-1.5 bg-amber-500/5 sticky top-0",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2",
-							children: [
-								/* @__PURE__ */ jsx(FaCloud, { className: "h-3 w-3 text-amber-500" }),
-								/* @__PURE__ */ jsx("span", {
-									className: "text-xs font-semibold text-amber-600 uppercase tracking-wide flex-1",
-									children: s.name
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "text-[10px] text-amber-500 bg-amber-500/10 px-1.5 py-0.5 rounded-full",
-									children: "Not responding"
-								})
-							]
-						})
-					}), /* @__PURE__ */ jsx("div", {
-						className: "px-4 py-2 flex items-center gap-2",
-						children: /* @__PURE__ */ jsx("span", {
-							className: "text-sm theme-muted-text italic",
-							children: "Service not responding — ensure it is running on the remote host"
-						})
-					})] }, `${s.owner}:${s.name}`)),
-					groupedModels.size === 0 && !targetSessionStatus && unreachableSessions.length === 0 ? /* @__PURE__ */ jsx("div", {
-						className: "p-4 text-center theme-muted-text text-sm",
-						children: "No models found"
-					}) : Array.from(groupedModels.entries()).map(([providerKey, providerModels]) => {
-						const providerInfo = providers.find((p) => `${p.user}:${p.name}` === providerKey);
-						const providerName = providerModels[0]?.provider || providerInfo?.name || "Unknown Provider";
-						const platform = providerInfo?.platformLabel;
-						const platformSuffix = providerInfo && platform && platform.toLowerCase() !== providerName.toLowerCase() ? platform : null;
-						const isOwner = providerInfo?.user === currentUser.username;
-						const owner = providerOwner(providerInfo, providerModels[0]);
-						const headerSuffix = [platformSuffix, owner && owner !== currentUser.username ? strings.modelPicker.sharedBy(owner) : null].filter(Boolean).join(" · ");
-						const settingsHref = providerInfo && extraLinks.providerSettings ? extraLinks.providerSettings(providerInfo.user, providerInfo.name) : null;
-						const issue = providerIssueFor(providerIssues, providerModels[0]);
-						return /* @__PURE__ */ jsxs("div", { children: [
-							/* @__PURE__ */ jsx("div", {
-								className: "px-3 py-1.5 theme-muted-panel sticky top-0",
-								children: /* @__PURE__ */ jsxs("div", {
-									className: "flex items-center gap-2",
-									children: [
-										/* @__PURE__ */ jsx(CspIcon, {
-											cspKind: providerInfo?.cspKind ?? "other",
-											className: "h-3 w-3"
-										}),
-										/* @__PURE__ */ jsx("span", {
-											className: "text-xs font-semibold theme-muted-text uppercase tracking-wide",
-											children: providerName
-										}),
-										/* @__PURE__ */ jsx("span", {
-											className: "min-w-0 flex-1 truncate text-xs theme-muted-text",
-											children: headerSuffix ? `· ${headerSuffix}` : ""
-										}),
-										/* @__PURE__ */ jsxs("span", {
-											className: "text-xs theme-muted-text",
-											children: [
-												"(",
-												providerModels.length,
-												")"
-											]
-										}),
-										issue && /* @__PURE__ */ jsx("span", {
-											className: "text-[10px] text-amber-600 bg-amber-500/10 px-1.5 py-0.5 rounded-full flex-shrink-0",
-											children: issueLabel(issue)
-										}),
-										isOwner && settingsHref && /* @__PURE__ */ jsx(LinkComponent, {
-											target: {
-												kind: "external",
-												href: settingsHref
-											},
-											onClick: (e) => e.stopPropagation(),
-											className: "p-0.5 rounded hover:theme-hover theme-muted-text hover:text-blue-600 transition-colors",
-											title: "Manage provider",
-											children: /* @__PURE__ */ jsx(FaCog, { className: "h-3 w-3" })
-										})
-									]
-								})
-							}),
-							issue && /* @__PURE__ */ jsxs("div", {
-								className: "flex items-start gap-2 px-4 py-1.5 bg-amber-500/5",
-								children: [/* @__PURE__ */ jsx(FaExclamationTriangle, { className: "h-3 w-3 text-amber-500 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ jsx("span", {
-									className: "text-xs text-amber-600 line-clamp-2",
-									children: issueDetail(issue)
-								})]
-							}),
-							providerModels.map((model) => {
-								const modelName = getModelLabel(model);
-								const isSelected = model.id === selectedProvider;
-								return /* @__PURE__ */ jsxs("button", {
-									type: "button",
-									"aria-disabled": !!issue,
-									title: issue ? issueSummary(issue) : void 0,
-									onClick: () => {
-										if (!issue) handleSelect(model.id);
-									},
-									className: cx("w-full flex items-center gap-3 px-4 py-2 text-left", issue ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-blue-500/5 transition-colors", isSelected && "bg-blue-500/10"),
-									children: [/* @__PURE__ */ jsx("span", {
-										title: modelName,
-										className: cx("flex-1 min-w-0 text-sm truncate", isSelected ? "text-blue-600 font-medium" : ""),
-										style: !isSelected ? { color: "var(--theme-panel, #1f2937)" } : void 0,
-										children: modelName
-									}), isSelected && /* @__PURE__ */ jsx(FaCheck, { className: "h-3.5 w-3.5 text-blue-600 flex-shrink-0" })]
-								}, model.id);
-							})
-						] }, providerKey);
-					})
-				]
-			})]
-		}), document.body)]
+				issue && /* @__PURE__ */ jsx(FaExclamationTriangle, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" })
+			] }) : /* @__PURE__ */ jsx("span", {
+				className: clsx("truncate", targetSessionStatus === "connecting" && "animate-pulse"),
+				children: targetSessionStatus === "connecting" ? t.connecting : t.select
+			}), /* @__PURE__ */ jsx(FaChevronDown, { className: "h-3 w-3 shrink-0" })]
+		})
 	});
 }
 //#endregion

package/dist/ai/components/PastedText.js

@@ -6,9 +6,9 @@ import { formatFileSize } from "../utils.js";
 import Markdown from "../ui/Markdown.js";
 import { fencePaste } from "../core/pasteLanguage.js";
 import { splitPastes } from "../core/pastes.js";
-import cx from "classnames";
-import { Fragment } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
 //#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 }) {
@@ -16,7 +16,7 @@ function PasteFileCard({ id, lines, bytes, saving = false, error, onRemove }) {
 	const detail = error ?? (saving ? t.saving : `${t.lines(lines)} · ${formatFileSize(bytes)}`);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": "paste-file-card",
-		className: cx("inline-flex max-w-full items-center gap-2.5 rounded-xl px-3 py-2 align-top whitespace-normal", "bg-(--theme-panel-bg)", error ? "border border-red-500" : "chat-hairline"),
+		className: clsx("inline-flex max-w-full items-center gap-2.5 rounded-xl px-3 py-2 align-top whitespace-normal", "bg-(--theme-panel-bg)", error ? "border border-red-500" : "chat-hairline"),
 		children: [
 			/* @__PURE__ */ jsx(FiFile, { className: "h-5 w-5 flex-shrink-0 theme-muted-text" }),
 			/* @__PURE__ */ jsxs("div", {
@@ -25,7 +25,7 @@ function PasteFileCard({ id, lines, bytes, saving = false, error, onRemove }) {
 					className: "truncate text-sm font-medium theme-text",
 					children: id ? `paste-${id}.txt` : t.title
 				}), /* @__PURE__ */ jsx("div", {
-					className: cx("truncate text-xs", error ? "text-red-500" : "theme-muted-text"),
+					className: clsx("truncate text-xs", error ? "text-red-500" : "theme-muted-text"),
 					children: detail
 				})]
 			}),
@@ -45,23 +45,23 @@ 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$1, { children: content });
+	if (!pastes?.length) return /* @__PURE__ */ jsx(Fragment, { 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$1, { children: segments.map((segment, i) => {
+	const blockSpacing = (i) => clsx(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) => {
 		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, { children: text }, i) : null;
+			return text ? /* @__PURE__ */ jsx(Fragment$1, { children: text }, i) : null;
 		}
 		if (segment.inline && segment.text !== void 0) return /* @__PURE__ */ jsx("span", {
-			className: cx("chat-paste-code block", blockSpacing(i)),
+			className: clsx("chat-paste-code block", blockSpacing(i)),
 			children: /* @__PURE__ */ jsx(Markdown, { children: fencePaste(segment.text) })
 		}, i);
 		return /* @__PURE__ */ jsx("span", {
-			className: cx("flex [&>*]:flex-1", blockSpacing(i)),
+			className: clsx("flex [&>*]:flex-1", blockSpacing(i)),
 			children: /* @__PURE__ */ jsx(PasteFileCard, {
 				id: segment.id,
 				lines: segment.lines,

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

@@ -1 +1,3 @@
+/** 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. */
 export default function ProviderIssueBanner(): import("react").JSX.Element | null;

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
 	});
 }