@klarkxy/dsh-current-title 0.3.2 → 0.3.4

package/lib/client.js

@@ -102,6 +102,7 @@ function parseModelMenuChoices(value, bound) {
 				provider,
 				model,
 				label: `${providerName} / ${name}`,
+				providerLabel: providerName,
 				efforts
 			});
 		}
@@ -148,11 +149,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({
@@ -525,7 +526,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();
 /**
@@ -1229,7 +1232,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;
@@ -1244,9 +1247,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
@@ -1263,7 +1267,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,
@@ -1295,10 +1304,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);
@@ -1338,10 +1349,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) => {
@@ -1349,9 +1368,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;
@@ -1381,13 +1416,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)(() => {
@@ -1402,7 +1445,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
 			});
@@ -1422,6 +1465,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",
 			" ",
@@ -1435,17 +1485,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;
@@ -1454,19 +1499,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;
 			}
@@ -1490,7 +1535,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 = [];
@@ -1511,11 +1559,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", {
@@ -1528,11 +1581,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", {
@@ -1551,6 +1605,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",
@@ -1567,6 +1622,7 @@ function ModelMenu(props) {
 						type: "button",
 						className: "dsh-model-menu-searchClear",
 						"aria-label": clearSearchLabel,
+						disabled,
 						onClick: () => {
 							setQuery("");
 							setHighlightedIndex(null);
@@ -1589,10 +1645,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",
@@ -1618,6 +1676,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" : ""}`,
@@ -1627,11 +1686,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",
@@ -1647,6 +1707,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",
@@ -1660,10 +1728,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",
@@ -1682,7 +1752,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,
@@ -1690,7 +1761,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();
@@ -1702,6 +1773,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,
@@ -1760,6 +1927,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; }
@@ -1838,8 +2006,236 @@ 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 ../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 ../dsh-plugin-kit/src/auxiliary-model-client.tsx
 const AUXILIARY_MODEL_PACKAGE = "@klarkxy/dsh-plugin-kit";
 const AUXILIARY_MODEL_SEAT_ID = "auxiliary-model";
@@ -1917,7 +2313,7 @@ async function callAuxiliaryRpc(client, endpoint, payload = {}) {
 * The shared card. All state comes from the shared host service over the
 * plugin-kit RPC channel; the card only renders the stored row.
 */
-function AuxiliaryModelCard({ client, subscribe }) {
+function AuxiliaryModelCard({ client, subscribe, renderFactorySlot }) {
 	const language = useAuxiliaryLocale(client);
 	const text = auxiliaryCopy[language];
 	const [settings, setSettings] = (0, react.useState)();
@@ -2038,6 +2434,17 @@ function AuxiliaryModelCard({ client, subscribe }) {
 		refreshCatalog
 	]);
 	const locked = busy;
+	const current = settings?.model ?? {
+		provider: "",
+		model: ""
+	};
+	const follow = !current.provider || !current.model;
+	const selected = follow ? void 0 : choices.find((item) => item.provider === current.provider && item.model === current.model);
+	const efforts = follow ? [] : modelMenuEffortOptions(selected, current.reasoningEffort);
+	const currentLabel = follow ? text.modelDefault : selected?.label ?? `${current.provider} / ${current.model}`;
+	const selectedEffort = efforts.find((item) => item.id === (current.reasoningEffort || ""));
+	const effortName = selectedEffort ? modelMenuEffortLabel(selectedEffort, language) : void 0;
+	const anchor = useModelMenuAnchor(`${text.model}: ${settings ? currentLabel : ""}`, void 0, () => setMenuOpen(false));
 	if (!settings) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		className: "ams-root dsh-ui-card",
 		"data-testid": "auxiliary-model-settings",
@@ -2076,16 +2483,6 @@ function AuxiliaryModelCard({ client, subscribe }) {
 			})
 		]
 	});
-	const current = settings.model ?? {
-		provider: "",
-		model: ""
-	};
-	const follow = !current.provider || !current.model;
-	const selected = follow ? void 0 : choices.find((item) => item.provider === current.provider && item.model === current.model);
-	const efforts = follow ? [] : modelMenuEffortOptions(selected, current.reasoningEffort);
-	const currentLabel = follow ? text.modelDefault : selected?.label ?? `${current.provider} / ${current.model}`;
-	const selectedEffort = efforts.find((item) => item.id === (current.reasoningEffort || ""));
-	const effortName = selectedEffort ? modelMenuEffortLabel(selectedEffort, language) : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		className: "ams-root dsh-ui-card",
 		"data-testid": "auxiliary-model-settings",
@@ -2109,28 +2506,12 @@ function AuxiliaryModelCard({ client, subscribe }) {
 						state: catalogState,
 						locale: language
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMenu, {
+					renderModelPicker(renderFactorySlot, {
 						locale: language,
-						open: menuOpen && !locked,
+						disabled: locked,
+						busy: locked,
 						onOpenChange: (next) => setMenuOpen(next && !locked),
 						listClassName: "ams-root ams-menu-portal",
-						anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							className: "dsh-model-menu-trigger",
-							disabled: locked,
-							"aria-label": `${text.model}: ${currentLabel}`,
-							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 ?? text.effortDefault
-								}) : null,
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: `dsh-model-menu-chevron${menuOpen && !locked ? " dsh-model-menu-chevronOpen" : ""}` })
-							]
-						}),
 						choices,
 						selected: follow ? void 0 : {
 							provider: current.provider,
@@ -2153,9 +2534,61 @@ function AuxiliaryModelCard({ client, subscribe }) {
 							model: current.model,
 							...effort ? { reasoningEffort: effort } : {}
 						}),
+						triggerLabel: currentLabel,
+						triggerEffortLabel: !follow && efforts.length ? effortName ?? text.effortDefault : void 0,
 						modelLabel: text.model,
 						modelValue: currentLabel,
 						defaultEffortLabel: text.effortDefault
+					}, {
+						anchor,
+						fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMenu, {
+							locale: language,
+							open: menuOpen && !locked,
+							onOpenChange: (next) => setMenuOpen(next && !locked),
+							listClassName: "ams-root ams-menu-portal",
+							anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: "dsh-model-menu-trigger",
+								disabled: locked,
+								"aria-label": `${text.model}: ${currentLabel}`,
+								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 ?? text.effortDefault
+									}) : null,
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: `dsh-model-menu-chevron${menuOpen && !locked ? " dsh-model-menu-chevronOpen" : ""}` })
+								]
+							}),
+							choices,
+							selected: follow ? void 0 : {
+								provider: current.provider,
+								model: current.model
+							},
+							onPick: (picked) => save({
+								provider: picked.provider,
+								model: picked.model
+							}),
+							leading: [{
+								id: "default",
+								label: text.modelDefault,
+								selected: follow
+							}],
+							onPickLeading: () => save(null),
+							efforts,
+							selectedEffort: current.reasoningEffort || "",
+							onPickEffort: (effort) => save(follow ? null : {
+								provider: current.provider,
+								model: current.model,
+								...effort ? { reasoningEffort: effort } : {}
+							}),
+							modelLabel: text.model,
+							modelValue: currentLabel,
+							defaultEffortLabel: text.effortDefault
+						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "dsh-ui-hint",
@@ -2257,9 +2690,10 @@ function acquireAuxiliaryModelCard(root, ctx) {
 	let unprovide;
 	const watchLease = acquireWatchCoordinator(root).mount();
 	const subscriber = createModelSettingsSubscriber(ctx.root, AUXILIARY_MODEL_PACKAGE, AUXILIARY_MODEL_CHANGES_IDENTITY, (ns) => ns === AUXILIARY_MODEL_NS);
-	const render = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AuxiliaryModelCard, {
+	const render = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AuxiliaryModelCard, {
 		client: root,
-		subscribe: subscriber.subscribe
+		subscribe: subscriber.subscribe,
+		renderFactorySlot: props.renderFactorySlot
 	});
 	const service = {
 		retain() {
@@ -2721,6 +3155,7 @@ function TitleSettings(props) {
 	const currentLabel = follow ? text.modelDefault : selectedModel?.label ?? `${savedModel.provider} / ${savedModel.model}`;
 	const selectedEffort = efforts.find((item) => item.id === (savedModel.reasoningEffort || ""));
 	const effortName = selectedEffort ? modelMenuEffortLabel(selectedEffort, seat.locale) : void 0;
+	const anchor = useModelMenuAnchor(`${text.model}: ${currentLabel}`, void 0, () => setMenuOpen(false));
 	const title = status?.session?.title;
 	const pinned = status?.session?.pinned === true;
 	const weOwn = status?.support?.weOwn === true;
@@ -2932,28 +3367,12 @@ function TitleSettings(props) {
 								state: catalogState,
 								locale: seat.locale
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMenu, {
+							renderModelPicker(props.renderFactorySlot, {
 								locale: seat.locale,
-								open: menuOpen && Boolean(status) && !busy && !loadingSettings,
+								disabled: busy || loadingSettings || !status,
+								busy: busy || loadingSettings,
 								onOpenChange: (next) => setMenuOpen(next && Boolean(status) && !busy && !loadingSettings),
 								listClassName: "ct-root",
-								anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-									type: "button",
-									className: "dsh-model-menu-trigger",
-									disabled: busy || loadingSettings || !status,
-									"aria-label": `${text.model}: ${currentLabel}`,
-									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 ?? text.modelDefault
-										}) : null,
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: `dsh-model-menu-chevron${menuOpen ? " dsh-model-menu-chevronOpen" : ""}` })
-									]
-								}),
 								choices,
 								selected: follow ? void 0 : {
 									provider: savedModel.provider,
@@ -2982,9 +3401,67 @@ function TitleSettings(props) {
 									model: savedModel.model,
 									...effort ? { reasoningEffort: effort } : {}
 								} }),
+								triggerLabel: currentLabel,
+								triggerEffortLabel: !follow && efforts.length ? effortName ?? text.modelDefault : void 0,
 								modelLabel: text.model,
 								modelValue: currentLabel,
 								defaultEffortLabel: text.modelDefault
+							}, {
+								anchor,
+								fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMenu, {
+									locale: seat.locale,
+									open: menuOpen && Boolean(status) && !busy && !loadingSettings,
+									onOpenChange: (next) => setMenuOpen(next && Boolean(status) && !busy && !loadingSettings),
+									listClassName: "ct-root",
+									anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										className: "dsh-model-menu-trigger",
+										disabled: busy || loadingSettings || !status,
+										"aria-label": `${text.model}: ${currentLabel}`,
+										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 ?? text.modelDefault
+											}) : null,
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: `dsh-model-menu-chevron${menuOpen ? " dsh-model-menu-chevronOpen" : ""}` })
+										]
+									}),
+									choices,
+									selected: follow ? void 0 : {
+										provider: savedModel.provider,
+										model: savedModel.model
+									},
+									onPick: (picked) => saveSettings({ model: {
+										provider: picked.provider,
+										model: picked.model
+									} }),
+									leading: [{
+										id: "default",
+										label: text.modelDefault,
+										selected: follow
+									}],
+									onPickLeading: () => saveSettings({ model: {
+										provider: "",
+										model: ""
+									} }),
+									efforts,
+									selectedEffort: savedModel.reasoningEffort || "",
+									onPickEffort: (effort) => saveSettings({ model: follow ? {
+										provider: "",
+										model: ""
+									} : {
+										provider: savedModel.provider,
+										model: savedModel.model,
+										...effort ? { reasoningEffort: effort } : {}
+									} }),
+									modelLabel: text.model,
+									modelValue: currentLabel,
+									defaultEffortLabel: text.modelDefault
+								})
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								className: "dsh-ui-meta",
@@ -3052,7 +3529,8 @@ function TitleSettingsItem(props) {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TitleSettings, {
 				client: props.client,
 				marker: props.marker,
-				subscribeSettings: props.subscribeSettings
+				subscribeSettings: props.subscribeSettings,
+				renderFactorySlot: props.renderFactorySlot
 			})
 		}) : null]
 	});
@@ -3090,10 +3568,11 @@ function apply(ctx) {
 	ctx.effect(() => registerSessionSettingsItem(ctx, {
 		id: "current-title",
 		order: 70
-	}, () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TitleSettingsItem, {
+	}, (slotProps) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TitleSettingsItem, {
 		client,
 		marker,
-		subscribeSettings
+		subscribeSettings,
+		renderFactorySlot: slotProps?.renderFactorySlot
 	})), "current-title.settings");
 	ctx.effect(() => registerAuxiliaryModelSettings(ctx), "current-title.auxiliary-model");
 	ctx.effect(() => {