@klarkxy/dsh-model-hub 0.2.1 → 0.2.3

package/lib/client.js

@@ -98,7 +98,9 @@ Object.values({
 		"--dsh-scrollbar-thumb-hover",
 		"--dsh-content-font-size-secondary",
 		"--dsh-content-font-delta",
-		"--dsh-frame-top-clearance"
+		"--dsh-frame-top-clearance",
+		"--dsh-composer-model-icon-display",
+		"--dsh-composer-model-text-display"
 	]
 }).flat();
 /**
@@ -546,6 +548,7 @@ function parseModelMenuChoices(value, bound) {
 				provider,
 				model,
 				label: `${providerName} / ${name}`,
+				providerLabel: providerName,
 				efforts
 			});
 		}
@@ -592,11 +595,11 @@ function modelMenuShortName(choice) {
 /** Group catalog choices by provider and filter them by a case-insensitive query. */
 function groupModelMenuChoices(choices, query) {
 	const needle = query.trim().toLowerCase();
-	const matched = needle ? choices.filter((choice) => choice.label.toLowerCase().includes(needle) || choice.model.toLowerCase().includes(needle) || choice.provider.toLowerCase().includes(needle)) : choices;
+	const matched = needle ? choices.filter((choice) => choice.label.toLowerCase().includes(needle) || choice.model.toLowerCase().includes(needle) || choice.provider.toLowerCase().includes(needle) || (choice.providerLabel?.toLowerCase().includes(needle) ?? false)) : choices;
 	const groups = [];
 	for (const choice of matched) {
 		const sep = choice.label.indexOf(" / ");
-		const name = sep > 0 ? choice.label.slice(0, sep) : choice.provider;
+		const name = choice.providerLabel ?? (sep > 0 ? choice.label.slice(0, sep) : choice.provider);
 		const last = groups.at(-1);
 		if (last && last.provider === choice.provider) last.items.push(choice);
 		else groups.push({
@@ -982,7 +985,7 @@ function ModelMenu(props) {
 		empty: "No matching models",
 		clear: "Clear search"
 	};
-	const { open, onOpenChange, anchor, choices, selected, onPick, leading = [], onPickLeading, efforts = [], selectedEffort, onPickEffort, modelLabel = copy.model, modelValue = "—", effortLabel = copy.effort, effortValue, defaultEffortLabel = copy.default, searchPlaceholder = copy.search, emptyLabel = copy.empty, clearSearchLabel = copy.clear, className, listClassName } = props;
+	const { open, onOpenChange, anchor, choices, selected, onPick, leading = [], onPickLeading, efforts = [], selectedEffort, onPickEffort, modelLabel = copy.model, modelValue = "—", effortLabel = copy.effort, effortValue, defaultEffortLabel = copy.default, searchPlaceholder = copy.search, emptyLabel = copy.empty, clearSearchLabel = copy.clear, initialPane = "root", alwaysShowSearch = false, reasoningSlider = false, menuHeader, disabled = false, busy = false, closeOnPick = true, closeOnDisable = true, className, listClassName } = props;
 	const rootRef = (0, react.useRef)(null);
 	const openRef = (0, react.useRef)(open);
 	openRef.current = open;
@@ -997,9 +1000,10 @@ function ModelMenu(props) {
 	const [pane, setPane] = (0, react.useState)("root");
 	const [query, setQuery] = (0, react.useState)("");
 	const [highlightedIndex, setHighlightedIndex] = (0, react.useState)(null);
+	const [keyNav, setKeyNav] = (0, react.useState)(0);
 	const [menuPos, setMenuPos] = (0, react.useState)(null);
 	const id = (0, react.useId)();
-	const showSearch = choices.length > 4;
+	const showSearch = alwaysShowSearch || choices.length > 4;
 	const effortRows = (0, react.useMemo)(() => [{
 		id: "",
 		name: defaultEffortLabel
@@ -1016,7 +1020,12 @@ function ModelMenu(props) {
 		items: (0, _deepseek_ai_dsh_client_ui_primitives.rankByName)(group.items.map((choice) => ({
 			choice,
 			name: modelMenuShortName(choice),
-			label: choice.model
+			label: [
+				choice.provider,
+				choice.providerLabel,
+				choice.model,
+				choice.label
+			].filter(Boolean).join(" ")
 		})), showSearch ? query.trim() : "")
 	})).filter((group) => group.items.length > 0), [
 		choices,
@@ -1048,10 +1057,12 @@ function ModelMenu(props) {
 		paneFocus.current = "drill";
 		setPane(next);
 	};
-	/** Leave a drilled pane for the root one, handing the keyboard back to its cell. */
+	/** Leave a drilled pane for the entry pane, handing the keyboard back to it.
+	*  A root entry refocuses the cell that opened the pane; a search-first
+	*  (model) entry refocuses that pane's own intent. */
 	const back = (from) => {
-		paneFocus.current = from;
-		setPane("root");
+		paneFocus.current = initialPane === "root" ? from : "drill";
+		setPane(initialPane);
 	};
 	const moveFocus = (offset) => {
 		const items = itemRefs.current.filter((item) => item !== null && !item.disabled);
@@ -1091,10 +1102,18 @@ function ModelMenu(props) {
 	}, [requestedOpen, open]);
 	(0, react.useEffect)(() => {
 		if (!open) return;
-		setPane("root");
+		setPane(initialPane);
+		if (initialPane === "model") paneFocus.current = "drill";
 		setQuery("");
 		setHighlightedIndex(null);
-	}, [open]);
+	}, [open, initialPane]);
+	(0, react.useEffect)(() => {
+		if (disabled && open && closeOnDisable) changeOpen(false);
+	}, [
+		disabled,
+		open,
+		closeOnDisable
+	]);
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const closeOutside = (event) => {
@@ -1102,9 +1121,25 @@ function ModelMenu(props) {
 			if (rootRef.current?.contains(target) || menuRef.current?.contains(target)) return;
 			changeOpen(false);
 		};
+		const escapeOutside = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+			if (!openRef.current) return;
+			event.preventDefault();
+			if (pane !== initialPane) back(pane);
+			else close(true);
+		};
 		document.addEventListener("mousedown", closeOutside);
-		return () => document.removeEventListener("mousedown", closeOutside);
-	}, [open, onOpenChange]);
+		document.addEventListener("keydown", escapeOutside);
+		return () => {
+			document.removeEventListener("mousedown", closeOutside);
+			document.removeEventListener("keydown", escapeOutside);
+		};
+	}, [
+		open,
+		onOpenChange,
+		pane,
+		initialPane
+	]);
 	(0, react.useEffect)(() => {
 		const intent = paneFocus.current;
 		if (!open || menuPos === null || intent === null) return;
@@ -1134,13 +1169,21 @@ function ModelMenu(props) {
 		pane,
 		filteredGroups
 	]);
+	const modelPaneOpen = open && pane === "model";
+	const scrollSignal = !modelPaneOpen ? "closed" : keyNav === 0 ? "open" : `key:${keyNav}`;
+	const scrollSignalRef = (0, react.useRef)(null);
 	(0, react.useLayoutEffect)(() => {
-		if (open && pane === "model" && activeModelIndex >= 0) itemRefs.current[leading.length + activeModelIndex]?.scrollIntoView({ block: "nearest" });
+		if (!modelPaneOpen || activeModelIndex < 0) {
+			if (!modelPaneOpen) scrollSignalRef.current = null;
+			return;
+		}
+		if (scrollSignalRef.current === scrollSignal) return;
+		scrollSignalRef.current = scrollSignal;
+		itemRefs.current[leading.length + activeModelIndex]?.scrollIntoView({ block: "nearest" });
 	}, [
-		open,
-		pane,
+		modelPaneOpen,
+		scrollSignal,
 		activeModelIndex,
-		visibleModels,
 		leading.length
 	]);
 	(0, react.useLayoutEffect)(() => {
@@ -1155,7 +1198,7 @@ function ModelMenu(props) {
 			let x = rect.right - lw, y = rect.top - 8 - lh;
 			if (lw > 0) x = Math.min(Math.max(x, margin), window.innerWidth - lw - margin);
 			if (lh > 0) y = Math.min(Math.max(y, margin), window.innerHeight - lh - margin);
-			setMenuPos({
+			setMenuPos((prev) => prev && prev.left === x && prev.top === y ? prev : {
 				left: x,
 				top: y
 			});
@@ -1175,6 +1218,13 @@ function ModelMenu(props) {
 	]);
 	function onKeyDown(event) {
 		if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			if (pane !== initialPane) back(pane);
+			else close(true);
+			return;
+		}
+		if (disabled) return;
 		if (!open && [
 			"Enter",
 			" ",
@@ -1188,17 +1238,12 @@ function ModelMenu(props) {
 			requestOpen();
 			return;
 		}
-		if (event.key === "Escape" && open) {
-			event.preventDefault();
-			if (pane !== "root") back(pane);
-			else close(true);
-			return;
-		}
 		if (!open) return;
 		if (pane === "model" && showSearch && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
 			event.preventDefault();
 			if (visibleModels.length > 0) {
 				setHighlightedIndex((activeModelIndex + (event.key === "ArrowDown" ? 1 : -1) + visibleModels.length) % visibleModels.length);
+				setKeyNav((n) => n + 1);
 				searchRef.current?.focus();
 			}
 			return;
@@ -1207,19 +1252,19 @@ function ModelMenu(props) {
 			if (event.key === "Tab" && visibleModels.length === 0) return;
 			event.preventDefault();
 			const highlighted = visibleModels[activeModelIndex];
-			if (highlighted) {
+			if (highlighted && !busy) {
 				onPick({
 					provider: highlighted.provider,
 					model: highlighted.model
 				});
-				close(true);
+				if (closeOnPick) close(true);
 			}
 			return;
 		}
 		if (event.key === "Tab") {
 			if (event.shiftKey) {
 				event.preventDefault();
-				if (pane !== "root") back(pane);
+				if (pane !== initialPane) back(pane);
 				else close(true);
 				return;
 			}
@@ -1243,7 +1288,10 @@ function ModelMenu(props) {
 		}
 	}
 	function onBlur(event) {
-		if (event.relatedTarget instanceof Node && (rootRef.current?.contains(event.relatedTarget) || menuRef.current?.contains(event.relatedTarget))) return;
+		const related = event.relatedTarget;
+		if (related instanceof Node && (rootRef.current?.contains(related) || menuRef.current?.contains(related) || !related.isConnected)) return;
+		if (!closeOnPick && !(related instanceof Node)) return;
+		if (busy && related == null) return;
 		if (open) changeOpen(false);
 	}
 	itemRefs.current = [];
@@ -1264,11 +1312,16 @@ function ModelMenu(props) {
 		"aria-label": modelLabel,
 		lang: language,
 		children: [
+			menuHeader ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dsh-model-menu-header",
+				children: menuHeader
+			}) : null,
 			pane === "root" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				ref: itemRef(),
 				type: "button",
 				role: "menuitem",
 				className: "dsh-model-menu-cell",
+				disabled,
 				onClick: () => drill("model"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1281,11 +1334,12 @@ function ModelMenu(props) {
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutlineRegular, { className: "dsh-model-menu-cellChevron" })
 				]
-			}), efforts.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			}), efforts.length > 0 && !reasoningSlider ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				ref: itemRef(),
 				type: "button",
 				role: "menuitem",
 				className: "dsh-model-menu-cell",
+				disabled,
 				onClick: () => drill("effort"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1304,6 +1358,7 @@ function ModelMenu(props) {
 					className: "dsh-model-menu-searchRow",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
 						ref: searchRef,
+						disabled,
 						className: `dsh-model-menu-search${query !== "" ? " dsh-model-menu-searchWithQuery" : ""}`,
 						type: "text",
 						role: "searchbox",
@@ -1320,6 +1375,7 @@ function ModelMenu(props) {
 						type: "button",
 						className: "dsh-model-menu-searchClear",
 						"aria-label": clearSearchLabel,
+						disabled,
 						onClick: () => {
 							setQuery("");
 							setHighlightedIndex(null);
@@ -1342,10 +1398,12 @@ function ModelMenu(props) {
 							type: "button",
 							role: "menuitemradio",
 							"aria-checked": item.selected === true,
+							disabled: disabled || busy,
 							className: `dsh-model-menu-option${item.selected === true ? " dsh-model-menu-selected" : ""}`,
 							onClick: () => {
+								if (disabled || busy) return;
 								onPickLeading?.(item.id);
-								close(true);
+								if (closeOnPick) close(true);
 							},
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "dsh-model-menu-optionCopy",
@@ -1371,6 +1429,7 @@ function ModelMenu(props) {
 								"aria-checked": checked,
 								id: `${id}-model-${index}`,
 								tabIndex: showSearch ? -1 : 0,
+								disabled: disabled || busy,
 								onFocus: () => setHighlightedIndex(index),
 								"data-highlighted": index === activeModelIndex ? "" : void 0,
 								className: `dsh-model-menu-option dsh-model-menu-modelOption${checked ? " dsh-model-menu-selected" : ""}${index === activeModelIndex ? " dsh-model-menu-optionActive" : ""}`,
@@ -1380,11 +1439,12 @@ function ModelMenu(props) {
 								},
 								title: choice.label,
 								onClick: () => {
+									if (disabled || busy) return;
 									onPick({
 										provider: choice.provider,
 										model: choice.model
 									});
-									close(true);
+									if (closeOnPick) close(true);
 								},
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-model-menu-optionCopy",
@@ -1400,6 +1460,14 @@ function ModelMenu(props) {
 						})
 					}, group.provider))]
 				}),
+				reasoningSlider && efforts.length > 0 && filteredGroups.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EffortSlider, {
+					label: effortLabel,
+					rows: effortRows,
+					selected: selectedEffort ?? "",
+					disabled,
+					busy,
+					onPick: (value) => onPickEffort?.(value)
+				}) : null,
 				filteredGroups.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "dsh-model-menu-empty",
 					role: "status",
@@ -1413,10 +1481,12 @@ function ModelMenu(props) {
 					type: "button",
 					role: "menuitemradio",
 					"aria-checked": checked,
+					disabled: disabled || busy,
 					className: `dsh-model-menu-option${checked ? " dsh-model-menu-selected" : ""}`,
 					onClick: () => {
+						if (disabled || busy) return;
 						onPickEffort?.(row.id || void 0);
-						close(true);
+						if (closeOnPick) close(true);
 					},
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "dsh-model-menu-optionCopy",
@@ -1435,7 +1505,8 @@ function ModelMenu(props) {
 	const trigger = (0, react.isValidElement)(anchor) ? (0, react.cloneElement)(anchor, {
 		"aria-haspopup": "menu",
 		"aria-expanded": open,
-		"aria-controls": open ? `${id}-menu` : void 0
+		"aria-controls": open ? `${id}-menu` : void 0,
+		"aria-disabled": disabled || void 0
 	}) : anchor;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		ref: rootRef,
@@ -1443,7 +1514,7 @@ function ModelMenu(props) {
 		onKeyDown,
 		onBlur,
 		onClick: (event) => {
-			if (event.defaultPrevented) return;
+			if (disabled || event.defaultPrevented) return;
 			const button = event.target instanceof Element ? event.target.closest("button") : null;
 			if (!(button instanceof HTMLButtonElement) || button.disabled || !rootRef.current?.contains(button)) return;
 			requestOpen();
@@ -1455,6 +1526,102 @@ function ModelMenu(props) {
 	});
 }
 /**
+* Discrete reasoning-effort slider shown under the model list in enhanced mode.
+*
+* A native range input (`step=1`) over exactly the rows the caller supplies —
+* the default row plus each effort the selected model advertises — so it can
+* never invent a level. It previews locally while dragging or arrowing and
+* commits only when the gesture ends (pointer up, key up, or blur), so a drag
+* does not write on every step. The menu stays open, so adjusting the effort
+* never loses the model selection or the search query.
+*
+* The input itself stays the entire interaction and accessibility surface —
+* keyboard, ARIA, disabled and the native step snapping all come from it —
+* while the track, gradient fill and thumb below are decorative layers painted
+* from the `--_p` percentage the preview position sets on the rail. Value
+* changes only update that custom property, so the CSS transitions animate
+* between levels without remounting nodes or restarting an animation.
+*/
+function EffortSlider(props) {
+	const { label, rows, selected, disabled = false, busy = false, onPick } = props;
+	const active = Math.max(0, rows.findIndex((row) => row.id === selected));
+	const [position, setPosition] = (0, react.useState)(active);
+	const positionRef = (0, react.useRef)(position);
+	(0, react.useEffect)(() => {
+		positionRef.current = active;
+		setPosition(active);
+	}, [active]);
+	const preview = (next) => {
+		positionRef.current = next;
+		setPosition(next);
+	};
+	const commit = () => {
+		if (disabled || busy) return;
+		const row = rows[positionRef.current];
+		if (row !== void 0) onPick(row.id === "" ? void 0 : row.id);
+	};
+	const max = Math.max(0, rows.length - 1);
+	const percent = max > 0 ? Math.round(position / max * 100) : 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "dsh-model-menu-sliderGroup",
+		role: "group",
+		"aria-label": label,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "dsh-model-menu-sliderHead",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsh-model-menu-sliderTitle",
+				children: label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsh-model-menu-sliderValue",
+				children: rows[position]?.name
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "dsh-model-menu-sliderRail",
+			style: { "--_p": percent },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "range",
+					className: "dsh-model-menu-sliderInput",
+					min: 0,
+					max,
+					step: 1,
+					value: position,
+					disabled,
+					"aria-label": label,
+					"aria-disabled": disabled || busy || void 0,
+					"aria-valuetext": rows[position]?.name,
+					onChange: (event) => {
+						const value = Number(event.target.value);
+						if (Number.isFinite(value)) preview(value);
+					},
+					onPointerUp: commit,
+					onKeyUp: commit,
+					onBlur: commit
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "dsh-model-menu-sliderTrack",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-model-menu-sliderFill",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dsh-model-menu-sliderFillBar" })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-model-menu-sliderNodes",
+						children: rows.map((row, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"data-covered": index <= position ? "" : void 0,
+							className: "dsh-model-menu-sliderNode",
+							style: { "--_n": max > 0 ? Math.round(index / max * 100) : 0 }
+						}, row.id || "__default"))
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-model-menu-sliderThumb",
+					"aria-hidden": "true"
+				})
+			]
+		})]
+	});
+}
+/**
 * ModelMenu styles, transcribed from the official ModelSelect.module.css (the
 * published dsh-client-ui-model-selection bundle): card capped at
 * min(360px, 100vh - 96px), 34px option cells at 13/18 with 5px 7px padding,
@@ -1513,6 +1680,7 @@ const modelMenuCss = `
   overflow: hidden;
 }
 .dsh-model-menu-status, .dsh-model-menu-empty { color: var(--dsw-alias-label-tertiary); padding: 8px; font-size: 12px; line-height: 18px; }
+.dsh-model-menu-header { flex: none; padding: 2px 2px 4px; }
 .dsh-model-menu-searchRow { flex-shrink: 0; margin: 2px 0 3px; position: relative; }
 .dsh-model-menu-searchRow .dsh-model-menu-search { border-radius: var(--dsw-radius-md); background: none; border: 0 solid transparent; height: auto; padding: 5px 7px; display: flex; }
 .dsh-model-menu-searchRow .dsh-model-menu-search:focus-within { border-color: transparent; }
@@ -1591,6 +1759,145 @@ const modelMenuCss = `
 .dsh-model-menu-cellLabel { white-space: nowrap; flex: none; }
 .dsh-model-menu-cellValue { text-overflow: ellipsis; white-space: nowrap; text-align: right; min-width: 0; color: var(--dsw-alias-label-tertiary); flex: auto; overflow: hidden; }
 .dsh-model-menu-cellChevron { width: 12px; height: 12px; color: var(--dsw-alias-menu-icon); flex: none; }
+/* Discrete reasoning-effort slider under the model list (enhanced mode).
+ * The painted control is layered over a fully functional native range input:
+ * the input stays on top, transparent, and owns pointer/keyboard/ARIA, while
+ * the decorative track, fill and thumb render beneath it at pointer-events:
+ * none. Position lives in one custom property (--_p, 0–100) on the rail, so
+ * the only animated work a level change triggers is a clip-path/left
+ * transition — no keyframes, no element churn. */
+.dsh-model-menu-sliderGroup { border-top: 0.5px solid var(--dsw-alias-border-l2); flex: none; margin-top: 4px; padding: 6px 8px 8px; }
+.dsh-model-menu-sliderHead { align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 4px; display: flex; }
+.dsh-model-menu-sliderTitle { color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 18px; }
+.dsh-model-menu-sliderValue { color: var(--dsw-alias-label-primary); font-size: 13px; font-weight: 600; line-height: 20px; transition: color var(--ds-transition-duration) var(--ds-ease-in-out); }
+.dsh-model-menu-sliderRail { position: relative; direction: ltr; height: 38px; margin-top: 2px; }
+.dsh-model-menu-sliderRail:has(:disabled) { opacity: 0.45; }
+.dsh-model-menu-sliderInput {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  border: 0;
+  cursor: pointer;
+  direction: ltr;
+  opacity: 0;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  touch-action: pan-y;
+}
+.dsh-model-menu-sliderInput:disabled { cursor: default; }
+/* The transparent input must keep the painted thumb's geometry: an
+ * appearance:none webkit thumb defaults to 16px, which would shift the
+ * end-point positions 7px off the decorative 30px disc and misplace the
+ * native drag hit target. Track gets the full rail height so the whole band
+ * maps to values identically. */
+.dsh-model-menu-sliderInput::-webkit-slider-runnable-track { width: 100%; height: 100%; }
+.dsh-model-menu-sliderInput::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; margin: 0; }
+.dsh-model-menu-sliderInput::-moz-range-track { width: 100%; height: 100%; }
+.dsh-model-menu-sliderInput::-moz-range-thumb { width: 30px; height: 30px; margin: 0; border: 0; }
+.dsh-model-menu-sliderTrack {
+  pointer-events: none;
+  border-radius: 999px;
+  width: 100%;
+  height: 26px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  box-shadow: inset 0 0 0 0.5px var(--dsw-alias-border-l2);
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  /* No overflow:hidden — it would clip the fill's drop-shadow glow; the bar's
+   * own clip-path already supplies the rounded reveal shape. */
+}
+/* The accent ramp paints the full track width once and is revealed by an
+ * animated clip-path, so raising the effort unwraps more of the spectrum
+ * instead of squashing the same gradient into a narrower bar. The glow lives
+ * on the un-clipped parent: a filter on the clipped element itself would be
+ * clipped away with it. */
+.dsh-model-menu-sliderFill {
+  display: block;
+  height: 100%;
+  filter: drop-shadow(0 0 5px var(--dsw-alias-state-business-primary));
+  transition: filter var(--ds-transition-duration) var(--ds-ease-in-out);
+}
+.dsh-model-menu-sliderInput:hover:not(:disabled) ~ .dsh-model-menu-sliderTrack .dsh-model-menu-sliderFill,
+.dsh-model-menu-sliderInput:active:not(:disabled) ~ .dsh-model-menu-sliderTrack .dsh-model-menu-sliderFill {
+  filter: drop-shadow(0 0 9px var(--dsw-alias-state-business-primary));
+}
+/* The fill stops at the thumb's center, not at the track edge — at a 30px
+ * thumb the end stops sit 15px in from each side, matching the node dots. */
+.dsh-model-menu-sliderFillBar {
+  display: block;
+  height: 100%;
+  background: linear-gradient(90deg,
+    var(--dsw-alias-state-business-primary),
+    var(--dsw-alias-state-success-primary),
+    var(--dsw-alias-state-warn-primary),
+    var(--dsw-alias-state-error-primary));
+  clip-path: inset(0 calc(100% - 15px - (100% - 30px) * var(--_p, 0) / 100) 0 0 round 999px);
+  transition: clip-path var(--ds-transition-duration) var(--ds-ease-in-out);
+}
+/* Stop dots: one per declared row (default + every advertised effort), evenly
+ * spread across the band between the two thumb-center extremes (inset 15px,
+ * i.e. half the 30px thumb). --_n is 0-100 along that band. A covered dot
+ * reads as a pale pin through the gradient; an uncovered one stays a neutral
+ * notch on the empty track. */
+.dsh-model-menu-sliderNodes {
+  pointer-events: none;
+  display: block;
+  position: absolute;
+  inset-inline: 15px;
+  inset-block: 0;
+}
+.dsh-model-menu-sliderNode {
+  pointer-events: none;
+  box-sizing: border-box;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--dsw-alias-label-secondary) 35%, transparent);
+  position: absolute;
+  left: calc(var(--_n, 0) * 1%);
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: background-color var(--ds-transition-duration) var(--ds-ease-in-out),
+    transform var(--ds-transition-duration) var(--ds-ease-in-out);
+}
+.dsh-model-menu-sliderNode[data-covered] { background: color-mix(in srgb, var(--dsw-alias-label-primary) 60%, transparent); }
+.dsh-model-menu-sliderThumb {
+  pointer-events: none;
+  box-sizing: border-box;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  background: var(--dsw-alias-button-primary-fill);
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  box-shadow: 0 0 0 3px var(--dsw-alias-interactive-bg-hover), var(--dsw-elevation-soft);
+  position: absolute;
+  left: calc((100% - 30px) * var(--_p, 0) / 100);
+  top: 50%;
+  transform: translateY(-50%) scale(0.92);
+  transition: left var(--ds-transition-duration) var(--ds-ease-in-out),
+    transform var(--ds-transition-duration) var(--ds-ease-in-out),
+    box-shadow var(--ds-transition-duration) var(--ds-ease-in-out);
+}
+.dsh-model-menu-sliderInput:hover:not(:disabled) ~ .dsh-model-menu-sliderThumb { transform: translateY(-50%) scale(1); }
+.dsh-model-menu-sliderInput:active:not(:disabled) ~ .dsh-model-menu-sliderThumb {
+  transform: translateY(-50%) scale(1.1);
+  box-shadow: 0 0 0 4px var(--dsw-alias-interactive-bg-hover), 0 0 12px var(--dsw-alias-state-business-primary);
+}
+.dsh-model-menu-sliderInput:focus-visible ~ .dsh-model-menu-sliderThumb {
+  box-shadow: 0 0 0 3px var(--dsw-alias-interactive-bg-hover),
+    0 0 0 calc(3px + var(--dsw-focus-ring-width)) var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+}
+@media (prefers-reduced-motion: reduce) {
+  .dsh-model-menu-sliderFill, .dsh-model-menu-sliderFillBar, .dsh-model-menu-sliderThumb,
+  .dsh-model-menu-sliderNode, .dsh-model-menu-sliderValue { transition: none; }
+}
 `;
 //#endregion
 //#region src/client-copy.ts
@@ -1676,6 +1983,95 @@ function hubMessage(message, language) {
 	return hubMessages.find((pair) => pair.includes(message))?.[language === "zh" ? 0 : 1] ?? message;
 }
 //#endregion
+//#region ../dsh-plugin-kit/src/model-picker.tsx
+/**
+* Optional shared model picker (`klarkxy.model-picker` Factory).
+*
+* `@klarkxy/dsh-model-picker`, when installed, registers one root-scoped
+* Component Factory under `MODEL_PICKER_FACTORY`: an enhanced model menu with
+* a searchable provider-grouped list and a reasoning-effort slider, built on
+* the same ModelMenu recipe. Consumers keep their own ModelMenu as the
+* `fallback`; when no definition is registered the renderer resolves that
+* fallback verbatim, so the shared picker is strictly opt-in and every saved
+* value keeps its existing write path.
+*
+* `renderFactorySlot` is a framework-composed prop, never a context: the
+* component a plugin registers into any slot receives it automatically, but
+* the plugin must pass it down to whichever child renders the menu (or to the
+* render callback handed to registerSessionSettingsItem).
+*
+* The Factory manages its own open state; a consumer's `open`/`onOpenChange`
+* pair belongs to the fallback menu only and must not be fed to both.
+*/
+/**
+* The trigger every consumer used to hand its own ModelMenu, rebuilt as the
+* factory's `anchor` local component: identical classes and chevron, the menu
+* state coming from the occurrence's props instead of local open state.
+*
+* `ariaLabel` and `title` are the whole accessible name and tooltip (the
+* caller formats "field: current route" itself because the factory's resolved
+* caption may intentionally be a short name). The component identity stays
+* put across label changes — a new function would unmount the trigger, and
+* its cleanup would close a menu that `closeOnPick={false}` is keeping open.
+* The latest label, title, and `onClose` are read from refs.
+*/
+function useModelMenuAnchor(ariaLabel, title, onClose) {
+	const closeRef = (0, react.useRef)(onClose);
+	const labelRef = (0, react.useRef)(ariaLabel);
+	const titleRef = (0, react.useRef)(title);
+	closeRef.current = onClose;
+	labelRef.current = ariaLabel;
+	titleRef.current = title;
+	return (0, react.useMemo)(() => {
+		const ModelPickerTrigger = (props) => {
+			(0, react.useEffect)(() => () => closeRef.current?.(), []);
+			const record = props;
+			const injected = {};
+			for (const [key, value] of Object.entries(record)) if (key.startsWith("aria-")) injected[key] = value;
+			const extraClass = typeof record.className === "string" ? ` ${record.className}` : "";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: `dsh-model-menu-trigger${extraClass}`,
+				disabled: props.disabled,
+				"aria-haspopup": "menu",
+				"aria-expanded": props.open,
+				...injected,
+				"aria-label": labelRef.current,
+				title: titleRef.current,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-model-menu-triggerLabel",
+						children: props.label
+					}),
+					props.effortLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-model-menu-triggerEffort",
+						children: props.effortLabel
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: `dsh-model-menu-chevron${props.open ? " dsh-model-menu-chevronOpen" : ""}` })
+				]
+			});
+		};
+		return ModelPickerTrigger;
+	}, []);
+}
+/**
+* Render the shared model picker while it is registered; `options.fallback`
+* whenever it is not (plugin absent, disabled, or unloaded).
+*
+* `options.anchor` is optional: the factory ships a default trigger, so only
+* consumers that need their own chrome (custom aria-label, tooltip, class)
+* pass one built with {@link useModelMenuAnchor}. The returned node is never
+* assumed to be the factory's own output — a defensive `?? fallback` covers a
+* renderer that yields null for an unregistered definition.
+*/
+function renderModelPicker(renderFactorySlot, props, options) {
+	if (typeof renderFactorySlot !== "function") return options.fallback;
+	return renderFactorySlot("klarkxy.model-picker", props, {
+		...options.anchor ? { slots: { ["anchor"]: options.anchor } } : {},
+		fallback: options.fallback
+	}) ?? options.fallback;
+}
+//#endregion
 //#region src/client-model-menu.tsx
 /**
 * One detected field's standard editor: the same ModelMenu every marked field gets.
@@ -1686,7 +2082,7 @@ function hubMessage(message, language) {
 * the current reasoning effort when the new model advertises it, so switching a
 * route does not silently reset the user's choice.
 */
-function FieldMenu({ t, catalog, current, disabled, label, allowFollow = true, followLabel, reasoningEffort = true, display = "full", onSet }) {
+function FieldMenu({ t, catalog, current, disabled, label, allowFollow = true, followLabel, reasoningEffort = true, display = "full", onSet, renderFactorySlot }) {
 	const [open, setOpen] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
 		if (disabled) setOpen(false);
@@ -1707,46 +2103,28 @@ function FieldMenu({ t, catalog, current, disabled, label, allowFollow = true, f
 	const currentLabel = display === "short" && !follow ? selected ? modelMenuShortName(selected) : route.model : menuLabel;
 	const selectedEffort = efforts.find((item) => item.id === (route.reasoningEffort || ""));
 	const effortName = selectedEffort ? modelMenuEffortLabel(selectedEffort, t.language) : void 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMenu, {
+	const anchor = useModelMenuAnchor(accessible, routeLabel, () => setOpen(false));
+	const pick = (picked) => {
+		const choice = choices.find((item) => item.provider === picked.provider && item.model === picked.model);
+		const effort = route.reasoningEffort;
+		const supported = Boolean(effort) && Boolean(choice?.efforts.some((item) => item.id === effort));
+		onSet({
+			provider: picked.provider,
+			model: picked.model,
+			...supported ? { reasoningEffort: effort } : {}
+		});
+	};
+	return renderModelPicker(renderFactorySlot, {
 		locale: t.language,
-		open: open && !disabled,
+		disabled,
 		onOpenChange: (next) => setOpen(next && !disabled),
 		listClassName: "dsh-model-hub",
-		anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			type: "button",
-			className: "dsh-model-menu-trigger",
-			disabled,
-			"aria-label": accessible,
-			title: routeLabel,
-			"aria-haspopup": "menu",
-			"aria-expanded": open && !disabled,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "dsh-model-menu-triggerLabel",
-					children: currentLabel
-				}),
-				!follow && efforts.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "dsh-model-menu-triggerEffort",
-					children: ` · ${effortName ?? t("effortDefault")}`
-				}) : null,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: `dsh-model-menu-chevron${open ? " dsh-model-menu-chevronOpen" : ""}` })
-			]
-		}),
 		choices,
 		selected: follow ? void 0 : {
 			provider: route.provider,
 			model: route.model
 		},
-		onPick: (picked) => {
-			const choice = choices.find((item) => item.provider === picked.provider && item.model === picked.model);
-			const effort = route.reasoningEffort;
-			const supported = Boolean(effort) && Boolean(choice?.efforts.some((item) => item.id === effort));
-			onSet({
-				provider: picked.provider,
-				model: picked.model,
-				...supported ? { reasoningEffort: effort } : {}
-			});
-		},
+		onPick: pick,
 		leading: allowFollow ? [{
 			id: "follow",
 			label: followLabel || t("follow"),
@@ -1766,6 +2144,8 @@ function FieldMenu({ t, catalog, current, disabled, label, allowFollow = true, f
 			model: route.model,
 			...effort ? { reasoningEffort: effort } : {}
 		}),
+		triggerLabel: currentLabel,
+		triggerEffortLabel: !follow && efforts.length ? ` · ${effortName ?? t("effortDefault")}` : void 0,
 		modelLabel: t("model"),
 		modelValue: currentLabel,
 		effortLabel: t("effort"),
@@ -1773,6 +2153,66 @@ function FieldMenu({ t, catalog, current, disabled, label, allowFollow = true, f
 		searchPlaceholder: t("searchModels"),
 		emptyLabel: t("noModels"),
 		clearSearchLabel: t("clearSearch")
+	}, {
+		anchor,
+		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMenu, {
+			locale: t.language,
+			open: open && !disabled,
+			onOpenChange: (next) => setOpen(next && !disabled),
+			listClassName: "dsh-model-hub",
+			anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: "dsh-model-menu-trigger",
+				disabled,
+				"aria-label": accessible,
+				title: routeLabel,
+				"aria-haspopup": "menu",
+				"aria-expanded": open && !disabled,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-model-menu-triggerLabel",
+						children: currentLabel
+					}),
+					!follow && efforts.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-model-menu-triggerEffort",
+						children: ` · ${effortName ?? t("effortDefault")}`
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: `dsh-model-menu-chevron${open ? " dsh-model-menu-chevronOpen" : ""}` })
+				]
+			}),
+			choices,
+			selected: follow ? void 0 : {
+				provider: route.provider,
+				model: route.model
+			},
+			onPick: pick,
+			leading: allowFollow ? [{
+				id: "follow",
+				label: followLabel || t("follow"),
+				selected: follow
+			}] : [],
+			onPickLeading: () => onSet({
+				provider: "",
+				model: ""
+			}),
+			efforts,
+			selectedEffort: route.reasoningEffort || "",
+			onPickEffort: (effort) => onSet(follow ? {
+				provider: "",
+				model: ""
+			} : {
+				provider: route.provider,
+				model: route.model,
+				...effort ? { reasoningEffort: effort } : {}
+			}),
+			modelLabel: t("model"),
+			modelValue: currentLabel,
+			effortLabel: t("effort"),
+			defaultEffortLabel: t("effortDefault"),
+			searchPlaceholder: t("searchModels"),
+			emptyLabel: t("noModels"),
+			clearSearchLabel: t("clearSearch")
+		})
 	});
 }
 function messageOf(error) {
@@ -1908,7 +2348,7 @@ function routeInput(route) {
 	};
 }
 /** One cast entry: model picker, tendency input saved on blur, remove button. */
-function CastRow({ t, catalog, route, tendencyRevision, draftReview, disabled, tendencyDisabled, menuDisabled, onSetRoute, onSetTendency, onRemove }) {
+function CastRow({ t, catalog, route, tendencyRevision, draftReview, disabled, tendencyDisabled, menuDisabled, renderFactorySlot, onSetRoute, onSetTendency, onRemove }) {
 	const label = `${route.provider} / ${route.model}`;
 	const saved = route.tendency ?? "";
 	const [draft, setDraft] = (0, react.useState)({
@@ -1951,6 +2391,7 @@ function CastRow({ t, catalog, route, tendencyRevision, draftReview, disabled, t
 					reasoningEffort: true,
 					display: "short",
 					disabled: menuDisabled,
+					renderFactorySlot,
 					onSet: onSetRoute
 				})
 			}),
@@ -1987,7 +2428,7 @@ function CastRow({ t, catalog, route, tendencyRevision, draftReview, disabled, t
 		]
 	});
 }
-function CastPage({ api, locale }) {
+function CastPage({ api, locale, renderFactorySlot }) {
 	const t = useText$1(locale);
 	const [cast, setCast] = (0, react.useState)(null);
 	const [catalog, setCatalog] = (0, react.useState)(null);
@@ -2223,6 +2664,7 @@ function CastPage({ api, locale }) {
 					t,
 					catalog,
 					route,
+					renderFactorySlot,
 					tendencyRevision: cast.tendencyRevision,
 					draftReview,
 					tendencyDisabled: disabled || !!cast.tendencyError || cast.tendencyRevision === void 0,
@@ -2253,6 +2695,7 @@ function CastPage({ api, locale }) {
 					reasoningEffort: true,
 					display: "short",
 					disabled: disabled || catalog === null,
+					renderFactorySlot,
 					onSet: (picked) => {
 						if (!picked.provider || !picked.model) {
 							setPending(void 0);
@@ -3152,13 +3595,14 @@ function localeActive(locale) {
 	return String(typeof locale === "string" ? locale : locale?.getSnapshot?.()?.active ?? "en");
 }
 const css = `${officialUiCss("dsh-model-hub")}${modelMenuCss}`;
-function SubagentModelsPage({ api, locale }) {
+function SubagentModelsPage({ api, locale, renderFactorySlot }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		className: "dsh-model-hub dsh-ui-page",
 		"aria-label": localeActive(locale).toLowerCase().startsWith("zh") ? "子代理" : "Subagents",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: css }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CastPage, {
 			api,
-			locale
+			locale,
+			renderFactorySlot
 		})]
 	});
 }