@klarkxy/dsh-git-commit 0.2.4 → 0.2.5

package/lib/client.inner.cjs

@@ -3,32 +3,65 @@ let react = require("react");
 let react_dom = require("react-dom");
 let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region ../dsh-model-route/src/route.ts
-const KEY_SEPARATOR = "";
-/** Stable key for one route, safe to use as a select-option value. */
-function modelRouteKey(provider, model) {
-	return provider && model ? `${provider}${KEY_SEPARATOR}${model}` : "";
-}
-/** Inverse of modelRouteKey; undefined for malformed keys. */
-function parseModelRouteKey(value) {
-	const index = value.indexOf(KEY_SEPARATOR);
-	if (index <= 0) return void 0;
-	const provider = value.slice(0, index);
-	const model = value.slice(index + 1);
-	if (!provider || !model) return void 0;
-	return {
-		provider,
-		model
-	};
-}
-//#endregion
 //#region ../dsh-model-route/src/catalog.ts
+/** Both services are required: Cordis checks the nested namespace separately. */
+const MODEL_CATALOG_INJECT = ["remote", "remote.session"];
 function asRecord(value) {
 	return value && typeof value === "object" && !Array.isArray(value) ? value : void 0;
 }
 function asText(value) {
 	return typeof value === "string" && value.trim() ? value.trim() : void 0;
 }
+/** A useful diagnostic even when a transport rejects with a plain object. */
+function modelCatalogErrorMessage(value) {
+	if (value instanceof Error && value.message) return value.message;
+	return asText(asRecord(value)?.message) ?? asText(value) ?? "Unable to load the model catalog.";
+}
+/**
+* Validate and unwrap a successful catalog without discarding provider failures
+* or newer host metadata. Names and metadata remain optional for older hosts.
+* A broken response is never presented as a successfully loaded empty menu.
+*/
+function checkedModelCatalog(value) {
+	const envelope = asRecord(value);
+	if (envelope?.ok === false) throw new Error(modelCatalogErrorMessage(envelope.error ?? envelope));
+	const root = envelope?.ok === true ? asRecord(envelope.value) : envelope;
+	const malformed = (field) => {
+		throw new Error(`Invalid model catalog: ${field}.`);
+	};
+	if (!root || !Array.isArray(root.groups)) return malformed("groups must be an array");
+	for (const value of root.groups) {
+		const group = asRecord(value);
+		if (!group || !asText(group.id) || !Array.isArray(group.models)) return malformed("each group needs an id and models array");
+		for (const value of group.models) {
+			const model = asRecord(value);
+			if (!model || !asText(model.id)) return malformed("each model needs an id");
+			if (model.reasoning !== void 0) {
+				const reasoning = asRecord(model.reasoning);
+				if (!reasoning || !Array.isArray(reasoning.efforts) || reasoning.efforts.some((value) => !parseEffort(value))) return malformed("reasoning efforts must be an array of identified efforts");
+			}
+		}
+	}
+	if (root.failures !== void 0 && (!Array.isArray(root.failures) || root.failures.some((value) => {
+		const failure = asRecord(value);
+		return !failure || !asText(failure.id) || typeof failure.name !== "string" || typeof failure.message !== "string";
+	}))) return malformed("failures must be an array of provider failures");
+	return root;
+}
+/** Read through the injected session namespace; absence and rejection are errors. */
+async function readModelCatalog(client) {
+	const session = client.remote?.session;
+	if (typeof session?.modelCatalog !== "function") throw new Error("Model catalog unavailable: inject both remote and remote.session.");
+	return checkedModelCatalog(await session.modelCatalog());
+}
+/** Provider failures are partial results, not a transport failure. */
+function modelCatalogFailures(value) {
+	try {
+		return checkedModelCatalog(value).failures ?? [];
+	} catch {
+		return [];
+	}
+}
 function parseEffort(value) {
 	const row = asRecord(value);
 	const id = row ? asText(row.id) : void 0;
@@ -84,6 +117,850 @@ function modelMenuEffortOptions(choice, current) {
 	});
 	return listed;
 }
+//#endregion
+//#region ../dsh-model-route/src/menu.ts
+/** Localize standard effort ids only when the provider has not supplied a display name. */
+function modelMenuEffortLabel(effort, locale) {
+	if (effort.name !== effort.id) return effort.name;
+	return {
+		off: ["关闭", "Off"],
+		none: ["无", "None"],
+		minimal: ["最低", "Minimal"],
+		low: ["低", "Low"],
+		medium: ["中", "Medium"],
+		high: ["高", "High"],
+		xhigh: ["极高", "Extra high"],
+		max: ["最高", "Maximum"],
+		ultra: ["超高", "Ultra"]
+	}[effort.id]?.[locale?.toLowerCase().startsWith("zh") ? 0 : 1] ?? effort.name;
+}
+/** The short model label shown inside a provider group. */
+function modelMenuShortName(choice) {
+	const sep = choice.label.indexOf(" / ");
+	return sep > 0 ? choice.label.slice(sep + 3) : choice.model;
+}
+/** 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 groups = [];
+	for (const choice of matched) {
+		const sep = choice.label.indexOf(" / ");
+		const name = 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({
+			provider: choice.provider,
+			name,
+			items: [choice]
+		});
+	}
+	return groups;
+}
+//#endregion
+//#region ../dsh-model-route/src/catalog-ui.tsx
+/**
+* Latest refresh wins, including retries while a previous request is pending.
+* Keep load stable (for example with useCallback); changing it invalidates the
+* previous source and fetches again, so switching clients cannot publish stale data.
+*/
+function useModelCatalog(load, options = {}) {
+	const enabled = options.enabled !== false;
+	const enabledRef = (0, react.useRef)(enabled);
+	enabledRef.current = enabled;
+	const live = (0, react.useRef)(false);
+	const source = (0, react.useRef)(load);
+	const revision = (0, react.useRef)(0);
+	const [state, setState] = (0, react.useState)(() => {
+		try {
+			return {
+				catalog: options.initialCatalog === void 0 ? void 0 : checkedModelCatalog(options.initialCatalog),
+				loading: enabled,
+				error: ""
+			};
+		} catch (error) {
+			return {
+				catalog: void 0,
+				loading: enabled,
+				error: modelCatalogErrorMessage(error)
+			};
+		}
+	});
+	const refresh = (0, react.useCallback)(async () => {
+		if (!live.current || !enabledRef.current) return;
+		const request = ++revision.current;
+		setState((previous) => ({
+			...previous,
+			loading: true,
+			error: ""
+		}));
+		try {
+			const catalog = checkedModelCatalog(await load());
+			if (live.current && request === revision.current) setState({
+				catalog,
+				loading: false,
+				error: ""
+			});
+		} catch (error) {
+			if (live.current && request === revision.current) setState((previous) => ({
+				...previous,
+				loading: false,
+				error: modelCatalogErrorMessage(error)
+			}));
+		}
+	}, [load, enabled]);
+	(0, react.useEffect)(() => {
+		live.current = true;
+		if (source.current !== load) {
+			source.current = load;
+			setState({
+				catalog: void 0,
+				loading: enabled,
+				error: ""
+			});
+		}
+		if (enabled) refresh();
+		else setState((previous) => ({
+			...previous,
+			loading: false
+		}));
+		return () => {
+			live.current = false;
+			++revision.current;
+		};
+	}, [enabled, refresh]);
+	(0, react.useEffect)(() => {
+		if (!enabled) return;
+		const reload = () => {
+			refresh();
+		};
+		if (typeof window !== "undefined") window.addEventListener("focus", reload);
+		let unsubscribe;
+		try {
+			unsubscribe = options.subscribe?.(reload);
+		} catch (error) {
+			setState((previous) => ({
+				...previous,
+				error: modelCatalogErrorMessage(error)
+			}));
+		}
+		return () => {
+			if (typeof window !== "undefined") window.removeEventListener("focus", reload);
+			unsubscribe?.();
+		};
+	}, [
+		enabled,
+		refresh,
+		options.subscribe
+	]);
+	const choices = (0, react.useMemo)(() => parseModelMenuChoices(state.catalog), [state.catalog]);
+	const failures = (0, react.useMemo)(() => state.catalog === void 0 ? [] : modelCatalogFailures(state.catalog), [state.catalog]);
+	return {
+		...state,
+		choices,
+		failures,
+		refresh
+	};
+}
+/** Also accepts a mapped state from a caller that owns broader async orchestration. */
+function ModelCatalogStatus({ state, locale }) {
+	const zh = locale?.toLowerCase().startsWith("zh") === true;
+	const copy = zh ? {
+		loading: "正在加载模型…",
+		error: "模型列表加载失败",
+		partial: "部分提供商的模型未能加载",
+		retry: "重试"
+	} : {
+		loading: "Loading models…",
+		error: "Unable to load models",
+		partial: "Some providers could not load their models",
+		retry: "Retry"
+	};
+	if (!state.loading && !state.error && state.failures.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "dsh-model-catalog-status",
+		lang: zh ? "zh" : "en",
+		children: [
+			state.loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				role: "status",
+				children: copy.loading
+			}) : null,
+			state.error ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				role: "alert",
+				children: [
+					copy.error,
+					": ",
+					state.error
+				]
+			}) : null,
+			state.failures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "status",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: copy.partial }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: state.failures.map((failure, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+					failure.name || failure.id,
+					": ",
+					failure.message
+				] }, `${failure.id}:${index}`)) })]
+			}) : null,
+			state.error || state.failures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+				type: "button",
+				size: "sm",
+				disabled: state.loading,
+				onClick: () => {
+					state.refresh();
+				},
+				children: copy.retry
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region ../dsh-model-route/src/ui.tsx
+/**
+* ModelMenu: the standard editor of one model-route field — the visible half
+* of the x-model-route contract. A feature plugin's settings page renders it
+* for its own marked field; the model hub renders one per detected field.
+*
+* It is a plugin-side copy of the host's composer model picker
+* (dsh-client-ui-model-selection's ModelSelect), rebuilt from the official
+* primitives and the published bundle's behavior: one card that opens on the
+* root pane (Model / Effort cells), drills into the provider-grouped,
+* searchable model list or the effort list, and Escapes back before closing.
+* Sticky group headings, subsequence ranking, highlight walking and focus
+* hand-back all match the host. SYNC POINT: when the host's ModelSelect or
+* ModelSelect.module.css changes, this copy must be re-transcribed; styles
+* below may only reference --dsw-* theme tokens, never literal colors.
+*
+* It statically imports the primitives, so only browser clients should load
+* this entry; host code and node tests use the core entry (`./index.ts`).
+*/
+/** Unplaced portal card: hidden but laid out at a fixed origin so measurements are real. */
+const MEASURE_STYLE = {
+	visibility: "hidden",
+	left: 0,
+	top: 0
+};
+function ModelMenu(props) {
+	const language = props.locale?.toLowerCase().startsWith("zh") ? "zh" : "en";
+	const copy = language === "zh" ? {
+		model: "模型",
+		effort: "思考强度",
+		default: "默认",
+		search: "搜索模型…",
+		empty: "没有匹配的模型",
+		clear: "清除搜索"
+	} : {
+		model: "Model",
+		effort: "Reasoning",
+		default: "Default",
+		search: "Search models…",
+		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 rootRef = (0, react.useRef)(null);
+	const openRef = (0, react.useRef)(open);
+	openRef.current = open;
+	const pendingOpenRef = (0, react.useRef)(false);
+	const pendingRestoreFocus = (0, react.useRef)(false);
+	const [requestedOpen, setRequestedOpen] = (0, react.useState)(false);
+	const menuRef = (0, react.useRef)(null);
+	const groupsRef = (0, react.useRef)(null);
+	const searchRef = (0, react.useRef)(null);
+	const itemRefs = (0, react.useRef)([]);
+	const paneFocus = (0, react.useRef)(null);
+	const [pane, setPane] = (0, react.useState)("root");
+	const [query, setQuery] = (0, react.useState)("");
+	const [highlightedIndex, setHighlightedIndex] = (0, react.useState)(null);
+	const [menuPos, setMenuPos] = (0, react.useState)(null);
+	const id = (0, react.useId)();
+	const showSearch = choices.length > 4;
+	const effortRows = (0, react.useMemo)(() => [{
+		id: "",
+		name: defaultEffortLabel
+	}, ...efforts.map((effort) => ({
+		...effort,
+		name: modelMenuEffortLabel(effort, language)
+	}))], [
+		defaultEffortLabel,
+		efforts,
+		language
+	]);
+	const filteredGroups = (0, react.useMemo)(() => groupModelMenuChoices(choices, "").map((group) => ({
+		...group,
+		items: (0, _deepseek_ai_dsh_client_ui_primitives.rankByName)(group.items.map((choice) => ({
+			choice,
+			name: modelMenuShortName(choice),
+			label: choice.model
+		})), showSearch ? query.trim() : "")
+	})).filter((group) => group.items.length > 0), [
+		choices,
+		query,
+		showSearch
+	]);
+	const visibleModels = (0, react.useMemo)(() => filteredGroups.flatMap((group) => group.items.map((item) => item.choice)), [filteredGroups]);
+	const currentVisibleIndex = visibleModels.findIndex((choice) => choice.provider === selected?.provider && choice.model === selected.model);
+	const activeModelIndex = Math.min(highlightedIndex ?? Math.max(0, currentVisibleIndex), visibleModels.length - 1);
+	const changeOpen = (next) => {
+		if (openRef.current === next) return;
+		openRef.current = next;
+		onOpenChange(next);
+	};
+	const requestOpen = () => {
+		if (open || pendingOpenRef.current) return;
+		pendingOpenRef.current = true;
+		pendingRestoreFocus.current = false;
+		setRequestedOpen(true);
+	};
+	const close = (restoreFocus = false) => {
+		const active = document.activeElement;
+		pendingRestoreFocus.current = restoreFocus && (active === document.body || rootRef.current?.contains(active) === true || menuRef.current?.contains(active) === true);
+		changeOpen(false);
+	};
+	const drill = (next) => {
+		setQuery("");
+		setHighlightedIndex(null);
+		paneFocus.current = "drill";
+		setPane(next);
+	};
+	/** Leave a drilled pane for the root one, handing the keyboard back to its cell. */
+	const back = (from) => {
+		paneFocus.current = from;
+		setPane("root");
+	};
+	const moveFocus = (offset) => {
+		const items = itemRefs.current.filter((item) => item !== null && !item.disabled);
+		if (!items.length) return;
+		const active = items.findIndex((item) => item === document.activeElement);
+		items[active === -1 ? offset > 0 ? 0 : items.length - 1 : (active + offset + items.length) % items.length]?.focus();
+	};
+	(0, react.useLayoutEffect)(() => {
+		if (open || !pendingRestoreFocus.current) return;
+		const active = document.activeElement;
+		if (active !== document.body && !rootRef.current?.contains(active)) {
+			pendingRestoreFocus.current = false;
+			return;
+		}
+		const trigger = rootRef.current?.querySelector("button");
+		if (!trigger || trigger.disabled) return;
+		trigger.focus();
+		if (document.activeElement === trigger) pendingRestoreFocus.current = false;
+	});
+	(0, react.useEffect)(() => {
+		if (open || !pendingRestoreFocus.current) return;
+		const cancelOutside = (event) => {
+			if (event.target instanceof Node && !rootRef.current?.contains(event.target)) pendingRestoreFocus.current = false;
+		};
+		document.addEventListener("focusin", cancelOutside);
+		document.addEventListener("pointerdown", cancelOutside);
+		return () => {
+			document.removeEventListener("focusin", cancelOutside);
+			document.removeEventListener("pointerdown", cancelOutside);
+		};
+	});
+	(0, react.useEffect)(() => {
+		if (!requestedOpen) return;
+		pendingOpenRef.current = false;
+		setRequestedOpen(false);
+		if (!open) changeOpen(true);
+	}, [requestedOpen, open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		setPane("root");
+		setQuery("");
+		setHighlightedIndex(null);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const closeOutside = (event) => {
+			const target = event.target;
+			if (rootRef.current?.contains(target) || menuRef.current?.contains(target)) return;
+			changeOpen(false);
+		};
+		document.addEventListener("mousedown", closeOutside);
+		return () => document.removeEventListener("mousedown", closeOutside);
+	}, [open, onOpenChange]);
+	(0, react.useEffect)(() => {
+		const intent = paneFocus.current;
+		if (!open || menuPos === null || intent === null) return;
+		if (intent !== "drill" && pane !== "root") return;
+		paneFocus.current = null;
+		if (intent === "drill") {
+			if (pane === "model" && showSearch) {
+				searchRef.current?.focus();
+				return;
+			}
+			(menuRef.current?.querySelector("[role=\"menuitemradio\"][aria-checked=\"true\"]:not([disabled])") ?? itemRefs.current.find((item) => item !== null && !item.disabled))?.focus();
+			return;
+		}
+		itemRefs.current[intent === "effort" ? 1 : 0]?.focus();
+	}, [
+		open,
+		pane,
+		showSearch,
+		menuPos
+	]);
+	(0, react.useEffect)(() => {
+		const viewport = groupsRef.current;
+		if (viewport === null) return;
+		return (0, _deepseek_ai_dsh_client_ui_primitives.observeStickyMenuGroups)(viewport);
+	}, [
+		open,
+		pane,
+		filteredGroups
+	]);
+	(0, react.useLayoutEffect)(() => {
+		if (open && pane === "model" && activeModelIndex >= 0) itemRefs.current[leading.length + activeModelIndex]?.scrollIntoView({ block: "nearest" });
+	}, [
+		open,
+		pane,
+		activeModelIndex,
+		visibleModels,
+		leading.length
+	]);
+	(0, react.useLayoutEffect)(() => {
+		if (!open) {
+			setMenuPos(null);
+			return;
+		}
+		const place = () => {
+			const rect = rootRef.current?.getBoundingClientRect();
+			if (!rect) return;
+			const margin = 12, lw = menuRef.current?.offsetWidth ?? 0, lh = menuRef.current?.offsetHeight ?? 0;
+			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({
+				left: x,
+				top: y
+			});
+		};
+		place();
+		window.addEventListener("scroll", place, true);
+		window.addEventListener("resize", place);
+		return () => {
+			window.removeEventListener("scroll", place, true);
+			window.removeEventListener("resize", place);
+		};
+	}, [
+		open,
+		pane,
+		choices,
+		query
+	]);
+	function onKeyDown(event) {
+		if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+		if (!open && [
+			"Enter",
+			" ",
+			"ArrowDown",
+			"ArrowUp"
+		].includes(event.key)) {
+			const button = event.target instanceof Element ? event.target.closest("button") : null;
+			if (!(button instanceof HTMLButtonElement) || button.disabled || !rootRef.current?.contains(button)) return;
+			event.preventDefault();
+			paneFocus.current = "model";
+			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);
+				searchRef.current?.focus();
+			}
+			return;
+		}
+		if (pane === "model" && showSearch && event.target instanceof HTMLInputElement && (event.key === "Enter" || event.key === "Tab" && !event.shiftKey)) {
+			if (event.key === "Tab" && visibleModels.length === 0) return;
+			event.preventDefault();
+			const highlighted = visibleModels[activeModelIndex];
+			if (highlighted) {
+				onPick({
+					provider: highlighted.provider,
+					model: highlighted.model
+				});
+				close(true);
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			if (event.shiftKey) {
+				event.preventDefault();
+				if (pane !== "root") back(pane);
+				else close(true);
+				return;
+			}
+			const focused = document.activeElement;
+			const rows = itemRefs.current.filter((item) => item !== null);
+			if (focused instanceof HTMLButtonElement && rows.includes(focused)) {
+				event.preventDefault();
+				focused.click();
+				return;
+			}
+			if (pane === "model" && showSearch) {
+				event.preventDefault();
+				setHighlightedIndex(null);
+				searchRef.current?.focus();
+			}
+			return;
+		}
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			moveFocus(event.key === "ArrowDown" ? 1 : -1);
+		}
+	}
+	function onBlur(event) {
+		if (event.relatedTarget instanceof Node && (rootRef.current?.contains(event.relatedTarget) || menuRef.current?.contains(event.relatedTarget))) return;
+		if (open) changeOpen(false);
+	}
+	itemRefs.current = [];
+	let itemIndex = 0;
+	let modelIndex = 0;
+	const itemRef = () => {
+		const at = itemIndex++;
+		return (node) => {
+			itemRefs.current[at] = node;
+		};
+	};
+	const menu = open && typeof document !== "undefined" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
+		ref: menuRef,
+		id: `${id}-menu`,
+		className: `dsh-model-menu-menu${listClassName ? ` ${listClassName}` : ""}`,
+		style: menuPos ?? MEASURE_STYLE,
+		role: pane === "model" ? "group" : "menu",
+		"aria-label": modelLabel,
+		lang: language,
+		children: [
+			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",
+				onClick: () => drill("model"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-model-menu-cellLabel",
+						children: modelLabel
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-model-menu-cellValue",
+						children: modelValue
+					}),
+					/* @__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", {
+				ref: itemRef(),
+				type: "button",
+				role: "menuitem",
+				className: "dsh-model-menu-cell",
+				onClick: () => drill("effort"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-model-menu-cellLabel",
+						children: effortLabel
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-model-menu-cellValue",
+						children: effortValue ?? effortRows.find((row) => row.id === (selectedEffort ?? ""))?.name ?? defaultEffortLabel
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutlineRegular, { className: "dsh-model-menu-cellChevron" })
+				]
+			}) : null] }) : null,
+			pane === "model" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				showSearch ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-model-menu-searchRow",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+						ref: searchRef,
+						className: `dsh-model-menu-search${query !== "" ? " dsh-model-menu-searchWithQuery" : ""}`,
+						type: "text",
+						role: "searchbox",
+						"aria-label": searchPlaceholder,
+						"aria-controls": `${id}-models`,
+						"aria-activedescendant": activeModelIndex < 0 ? void 0 : `${id}-model-${activeModelIndex}`,
+						placeholder: searchPlaceholder,
+						value: query,
+						onChange: (event) => {
+							setQuery(event.target.value);
+							setHighlightedIndex(0);
+						}
+					}), query !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dsh-model-menu-searchClear",
+						"aria-label": clearSearchLabel,
+						onClick: () => {
+							setQuery("");
+							setHighlightedIndex(null);
+							searchRef.current?.focus();
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCloseFillRegular, {})
+					}) : null]
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: groupsRef,
+					id: `${id}-models`,
+					className: "dsh-model-menu-groups scrollable",
+					role: "menu",
+					"aria-label": modelLabel,
+					hidden: filteredGroups.length === 0,
+					children: [leading.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-model-menu-leading",
+						children: leading.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							ref: itemRef(),
+							type: "button",
+							role: "menuitemradio",
+							"aria-checked": item.selected === true,
+							className: `dsh-model-menu-option${item.selected === true ? " dsh-model-menu-selected" : ""}`,
+							onClick: () => {
+								onPickLeading?.(item.id);
+								close(true);
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-model-menu-optionCopy",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-model-menu-modelName",
+									children: item.label
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-model-menu-check",
+								children: item.selected === true ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCheckOutlineRegular, {}) : null
+							})]
+						}, item.id))
+					}) : null, filteredGroups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.MenuGroup, {
+						label: group.name,
+						children: group.items.map((item) => {
+							const index = modelIndex++;
+							const choice = item.choice;
+							const checked = selected?.provider === choice.provider && selected.model === choice.model;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								ref: itemRef(),
+								type: "button",
+								role: "menuitemradio",
+								"aria-checked": checked,
+								id: `${id}-model-${index}`,
+								tabIndex: showSearch ? -1 : 0,
+								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" : ""}`,
+								onMouseMove: index === activeModelIndex ? void 0 : () => {
+									if (showSearch) setHighlightedIndex(index);
+									else itemRefs.current[leading.length + index]?.focus();
+								},
+								title: choice.label,
+								onClick: () => {
+									onPick({
+										provider: choice.provider,
+										model: choice.model
+									});
+									close(true);
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-model-menu-optionCopy",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-model-menu-modelName",
+										children: modelMenuShortName(choice)
+									})
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-model-menu-check",
+									children: checked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCheckOutlineRegular, {}) : null
+								})]
+							}, `${choice.provider}/${choice.model}`);
+						})
+					}, group.provider))]
+				}),
+				filteredGroups.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "dsh-model-menu-empty",
+					role: "status",
+					children: emptyLabel
+				}) : null
+			] }) : null,
+			pane === "effort" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: effortRows.map((row) => {
+				const checked = (selectedEffort ?? "") === row.id;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					ref: itemRef(),
+					type: "button",
+					role: "menuitemradio",
+					"aria-checked": checked,
+					className: `dsh-model-menu-option${checked ? " dsh-model-menu-selected" : ""}`,
+					onClick: () => {
+						onPickEffort?.(row.id || void 0);
+						close(true);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-model-menu-optionCopy",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-model-menu-modelName",
+							children: row.name
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-model-menu-check",
+						children: checked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCheckOutlineRegular, {}) : null
+					})]
+				}, row.id || "__default");
+			}) }) : null
+		]
+	}), document.body) : null;
+	const trigger = (0, react.isValidElement)(anchor) ? (0, react.cloneElement)(anchor, {
+		"aria-haspopup": "menu",
+		"aria-expanded": open,
+		"aria-controls": open ? `${id}-menu` : void 0
+	}) : anchor;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		ref: rootRef,
+		className: `dsh-model-menu-root${className ? ` ${className}` : ""}`,
+		onKeyDown,
+		onBlur,
+		onClick: (event) => {
+			if (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();
+		},
+		onMouseDown: (event) => {
+			if (event.target instanceof Element && menuRef.current?.contains(event.target) && event.target.closest("button") !== null) event.preventDefault();
+		},
+		children: [trigger, menu]
+	});
+}
+/**
+* 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,
+* 34px root cells at 13/20, a borderless 12px search row with a clear button,
+* sticky group headings (MenuGroup's own CSS), and the l1-stroke prominent
+* elevation at portal z-index 1100. The trigger mirrors the composer's 28px
+* model pill, chevron rotating open. MenuSurface paints fill and backdrop.
+* Only --dsw-* theme tokens may appear here — a literal color is a bug.
+*/
+const modelMenuCss = `
+.dsh-model-menu-root { min-width: 0; position: relative; display: inline-flex; }
+.dsh-model-menu-trigger {
+  border-radius: var(--dsw-radius-sm);
+  min-width: 0;
+  max-width: min(360px, 45cqw);
+  height: 28px;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+  align-items: center;
+  gap: 4px;
+  padding: 0 4px 0 8px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+  display: flex;
+}
+.dsh-model-menu-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
+.dsh-model-menu-trigger:focus-visible:not([data-selection-focus]) { box-shadow: 0 0 0 2px var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); }
+.dsh-model-menu-trigger:disabled { color: var(--dsw-alias-label-dimmed); cursor: default; }
+.dsh-model-menu-triggerLabel { text-overflow: ellipsis; white-space: nowrap; min-width: 0; overflow: hidden; }
+.dsh-model-menu-triggerEffort { text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--dsw-alias-label-caption); flex-shrink: 1000; overflow: hidden; }
+.dsh-model-menu-chevron { color: var(--dsw-alias-label-caption); flex: none; transition: transform 0.12s; }
+.dsh-model-menu-chevronOpen { transform: rotate(180deg); }
+.dsh-model-menu-menu {
+  z-index: 1100;
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
+  width: max-content;
+  min-width: min(240px, 100vw - 32px);
+  max-width: min(420px, 100vw - 32px);
+  max-height: min(360px, 100vh - 96px);
+  box-shadow: var(--dsw-elevation-prominent);
+  color: var(--dsw-alias-label-primary);
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
+  border: 0;
+  flex-direction: column;
+  padding: 4px;
+  display: flex;
+  position: fixed;
+  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-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; }
+.dsh-model-menu-searchWithQuery { padding-right: 34px; }
+.dsh-model-menu-searchRow .dsh-model-menu-search input { padding: 0; font-size: 12px; line-height: normal; }
+.dsh-model-menu-searchRow .dsh-model-menu-search input::placeholder { color: var(--dsw-alias-label-caption); }
+.dsh-model-menu-searchClear {
+  width: 24px;
+  height: 24px;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  transform: translateY(-50%);
+}
+.dsh-model-menu-searchClear:hover, .dsh-model-menu-searchClear:focus-visible { background: var(--dsw-alias-interactive-bg-hover); outline: none; }
+.dsh-model-menu-groups { min-height: 0; overflow-y: auto; }
+.dsh-model-menu-leading { border-bottom: 0.5px solid var(--dsw-alias-border-l2); margin-bottom: 3px; padding-bottom: 3px; }
+.dsh-model-menu-option {
+  box-sizing: border-box;
+  border-radius: var(--dsw-radius-md);
+  width: auto;
+  min-width: 100%;
+  min-height: 34px;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 7px;
+  display: flex;
+}
+.dsh-model-menu-option:not(.dsh-model-menu-modelOption):hover:not(:disabled),
+.dsh-model-menu-option:focus-visible,
+.dsh-model-menu-optionActive:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
+.dsh-model-menu-modelOption:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
+.dsh-model-menu-selected { background: none; }
+.dsh-model-menu-option:disabled { color: var(--dsw-alias-label-dimmed); cursor: default; }
+.dsh-model-menu-optionCopy { flex-direction: column; flex: 1; min-width: 0; display: flex; }
+.dsh-model-menu-modelName { color: inherit; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 400; line-height: 18px; overflow: hidden; }
+.dsh-model-menu-check { color: var(--dsw-alias-label-primary); flex: 0 0 14px; place-items: center; display: grid; }
+.dsh-model-menu-check svg { width: 14px; height: 14px; }
+.dsh-model-menu-cell {
+  box-sizing: border-box;
+  border-radius: var(--dsw-radius-md);
+  width: auto;
+  min-width: 100%;
+  height: 34px;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  text-align: left;
+  background: none;
+  border: none;
+  outline: none;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  font-size: 13px;
+  line-height: 20px;
+  display: flex;
+}
+.dsh-model-menu-cell:hover, .dsh-model-menu-cell:focus-visible { background: var(--dsw-alias-interactive-bg-hover); }
+.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; }
+`;
 Object.values({
 	/** Surfaces, from the page up to the topmost nested card. */
 	surface: [
@@ -446,6 +1323,29 @@ ${scope} {
 & .dsh-ui-select:disabled { color: var(--dsw-alias-label-tertiary); cursor: default; }
 & .dsh-ui-select[aria-invalid='true'] { border-color: var(--dsw-alias-state-error-primary); }
 
+/* --- Native textarea. The primitives ship no textarea either, so a settings
+ * prompt keeps the platform element and the same field shell as the select:
+ * 0.5px l4, radius-md, layer-3, 13/1.5 type. It grows vertically instead of
+ * locking to the select's 34px row. --- */
+& .dsh-ui-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  resize: vertical;
+  padding: 8px 12px;
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-3);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+& .dsh-ui-textarea:focus-visible { outline: none; border-color: var(--dsw-alias-state-business-primary); }
+& .dsh-ui-textarea:disabled { color: var(--dsw-alias-label-tertiary); cursor: default; }
+& .dsh-ui-textarea::placeholder { color: var(--dsw-alias-label-dimmed); }
+& .dsh-ui-textarea[aria-invalid='true'] { border-color: var(--dsw-alias-state-error-primary); }
+
 /* Long panels scroll inside themselves instead of growing the host page. */
 & .dsh-ui-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
 & .dsh-ui-panel-wide { max-width: 100%; }
@@ -623,8 +1523,7 @@ const name = "dsh-git-commit-client";
 const inject = [
 	"slots",
 	"connection",
-	"remote",
-	"remote.session",
+	...MODEL_CATALOG_INJECT,
 	"locale"
 ];
 const NS = "dsh-git-commit.action";
@@ -1101,7 +2000,7 @@ function GitCommitAction({ sessionId, useSession, call, t }) {
 		}), document.body)]
 	});
 }
-const clientCss = `${officialUiCss("gcm-root")}
+const clientCss = `${officialUiCss("gcm-root")}${modelMenuCss}
 /* Only the floating panel's geometry is this plugin's own: the material, the
  * rounded edge and the scrollbar tokens all come from the shared contract.
  *
@@ -1130,7 +2029,6 @@ const settingsZh = {
 	pageTitle: "Git 提交",
 	model: "提交规划模型",
 	modelDefault: "默认模型",
-	modelEffort: "思考强度",
 	modelHint: "留空则使用当前会话模型，再回落到宿主默认对话模型。",
 	fallback: "模型不可用时仍然提交",
 	fallbackHint: "默认关闭：模型规划失败会取消本次提交，工作区不变。开启后全部改动会合并成一个提交，由插件代写提交信息。",
@@ -1146,7 +2044,6 @@ const settingsEn = {
 	pageTitle: "Git Commit",
 	model: "Commit planning model",
 	modelDefault: "Default model",
-	modelEffort: "Reasoning effort",
 	modelHint: "Leave empty to use the current session model, then the host default chat model.",
 	fallback: "Commit even without a model plan",
 	fallbackHint: "Off by default: a failed plan cancels the run and leaves the workspace untouched. When on, every change lands in one commit with a plugin-written message.",
@@ -1165,8 +2062,12 @@ function settingsCopy(locale) {
 function GitCommitSettingsPanel(props) {
 	const hostLocale = useHostLocale(props.client);
 	const text = settingsCopy(props.locale ?? hostLocale);
+	const language = String(props.locale ?? hostLocale).toLowerCase().startsWith("zh") ? "zh" : "en";
 	const [settings, setSettings] = (0, react.useState)(void 0);
-	const [choices, setChoices] = (0, react.useState)([]);
+	const catalogState = useModelCatalog((0, react.useCallback)(() => readModelCatalog(props.client), [props.client]), { subscribe: (0, react.useCallback)((change) => props.client.connection.generation?.subscribe(change), [props.client]) });
+	const { refresh: refreshCatalog } = catalogState;
+	const choices = parseModelMenuChoices(catalogState.catalog, settings?.model);
+	const [menuOpen, setMenuOpen] = (0, react.useState)(false);
 	const [error, setError] = (0, react.useState)("");
 	const [note, setNote] = (0, react.useState)(false);
 	const [busy, setBusy] = (0, react.useState)(false);
@@ -1229,6 +2130,7 @@ function GitCommitSettingsPanel(props) {
 		const stop = props.subscribeSettings?.(() => {
 			if (live) {
 				setSyncError("");
+				refreshCatalog();
 				refreshRef.current();
 			}
 		}, (message) => {
@@ -1238,27 +2140,10 @@ function GitCommitSettingsPanel(props) {
 			live = false;
 			stop?.();
 		};
-	}, [props.subscribeSettings, props.client]);
-	const boundProvider = settings?.model.provider ?? "";
-	const boundModel = settings?.model.model ?? "";
-	(0, react.useEffect)(() => {
-		let live = true;
-		const bound = boundProvider && boundModel ? {
-			provider: boundProvider,
-			model: boundModel
-		} : void 0;
-		props.client.remote?.session?.modelCatalog?.()?.then((value) => {
-			if (live) setChoices(parseModelMenuChoices(value, bound));
-		}).catch(() => {
-			if (live) setChoices([]);
-		});
-		return () => {
-			live = false;
-		};
 	}, [
+		props.subscribeSettings,
 		props.client,
-		boundProvider,
-		boundModel
+		refreshCatalog
 	]);
 	const save = (0, react.useCallback)((patch) => {
 		const state = operation.current;
@@ -1320,8 +2205,12 @@ function GitCommitSettingsPanel(props) {
 		]
 	});
 	const current = settings.model;
-	const selected = choices.find((item) => item.provider === current.provider && item.model === current.model);
-	const efforts = modelMenuEffortOptions(selected, current.reasoningEffort);
+	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: "gcm-root gcm-settings",
 		"data-testid": "git-commit-settings",
@@ -1353,57 +2242,72 @@ function GitCommitSettingsPanel(props) {
 					})
 				]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "dsh-ui-field",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "dsh-ui-label",
-					children: text.model
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-					className: "dsh-ui-select",
-					value: modelRouteKey(current.provider, current.model),
-					disabled: busy,
-					onChange: (event) => {
-						const key = event.target.value;
-						if (!key) {
-							save({ model: {
-								provider: "",
-								model: ""
-							} });
-							return;
-						}
-						const parsed = parseModelRouteKey(key);
-						if (parsed) save({ model: parsed });
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: "",
-						children: text.modelDefault
-					}), choices.map((choice) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: modelRouteKey(choice.provider, choice.model),
-						children: choice.label
-					}, modelRouteKey(choice.provider, choice.model)))]
-				})]
-			}),
-			selected && efforts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dsh-ui-field",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "dsh-ui-label",
-					children: text.modelEffort
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-					className: "dsh-ui-select",
-					value: current.reasoningEffort ?? "",
-					disabled: busy,
-					onChange: (event) => save({ model: {
-						...current,
-						reasoningEffort: event.target.value || void 0
-					} }),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: "",
-						children: text.modelDefault
-					}), efforts.map((effort) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: effort.id,
-						children: effort.name
-					}, effort.id))]
-				})]
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-ui-label",
+						children: text.model
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelCatalogStatus, {
+						state: catalogState,
+						locale: language
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMenu, {
+						locale: language,
+						open: menuOpen && !busy,
+						onOpenChange: (next) => setMenuOpen(next && !busy),
+						listClassName: "gcm-root",
+						anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: "dsh-model-menu-trigger",
+							disabled: busy,
+							"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 && !busy ? " dsh-model-menu-chevronOpen" : ""}` })
+							]
+						}),
+						choices,
+						selected: follow ? void 0 : {
+							provider: current.provider,
+							model: current.model
+						},
+						onPick: (picked) => save({ model: {
+							provider: picked.provider,
+							model: picked.model
+						} }),
+						leading: [{
+							id: "default",
+							label: text.modelDefault,
+							selected: follow
+						}],
+						onPickLeading: () => save({ model: {
+							provider: "",
+							model: ""
+						} }),
+						efforts,
+						selectedEffort: current.reasoningEffort || "",
+						onPickEffort: (effort) => save({ model: follow ? {
+							provider: "",
+							model: ""
+						} : {
+							provider: current.provider,
+							model: current.model,
+							...effort ? { reasoningEffort: effort } : {}
+						} }),
+						modelLabel: text.model,
+						modelValue: currentLabel,
+						defaultEffortLabel: text.modelDefault
+					})
+				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "dsh-ui-meta",