@klarkxy/dsh-current-title 0.2.4 → 0.2.5

package/lib/client.js

@@ -7,6 +7,7 @@ window.__ModuleLoader__.load({
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react = require("react");
 let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+let react_dom = require("react-dom");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region ../dsh-plugin-kit/src/client-utils.ts
 /** Fixed pause for failing background reads; manual work is never replayed. */
@@ -483,6 +484,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%; }
@@ -650,6 +674,965 @@ function createModelSettingsSubscriber(ctx, namespace) {
 	} });
 }
 //#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;
+	if (!id) return void 0;
+	return {
+		id,
+		name: row ? asText(row.name) ?? id : id
+	};
+}
+/** Parse the host session catalog into flat choices, keeping a saved route selectable. */
+function parseModelMenuChoices(value, bound) {
+	const envelope = asRecord(value);
+	const root = (envelope && envelope.ok === true ? asRecord(envelope.value) : void 0) ?? envelope ?? {};
+	const groups = Array.isArray(root.groups) ? root.groups : [];
+	const choices = [];
+	for (const group of groups) {
+		const groupRow = asRecord(group);
+		const provider = groupRow ? asText(groupRow.id) : void 0;
+		if (!provider || !groupRow || !Array.isArray(groupRow.models)) continue;
+		const providerName = asText(groupRow.name) ?? provider;
+		for (const entry of groupRow.models) {
+			const modelRow = asRecord(entry);
+			const model = modelRow ? asText(modelRow.id) : void 0;
+			if (!model || !modelRow) continue;
+			const name = asText(modelRow.name) ?? model;
+			const reasoning = asRecord(modelRow.reasoning);
+			const efforts = reasoning && Array.isArray(reasoning.efforts) ? reasoning.efforts.flatMap((effort) => {
+				const parsed = parseEffort(effort);
+				return parsed ? [parsed] : [];
+			}) : [];
+			choices.push({
+				provider,
+				model,
+				label: `${providerName} / ${name}`,
+				efforts
+			});
+		}
+	}
+	if (bound?.provider && bound.model && !choices.some((item) => item.provider === bound.provider && item.model === bound.model)) choices.push({
+		provider: bound.provider,
+		model: bound.model,
+		label: `${bound.provider} / ${bound.model}`,
+		efforts: []
+	});
+	return choices;
+}
+/** Reasoning-effort options for one choice; the saved value stays selectable. */
+function modelMenuEffortOptions(choice, current) {
+	const listed = (choice?.efforts ?? []).map((item) => ({ ...item }));
+	if (current && !listed.some((item) => item.id === current)) listed.push({
+		id: current,
+		name: 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; }
+`;
+//#endregion
 //#region src/contracts.ts
 const RPC_CHANNEL = "/dsh-current-title";
 const TITLE_CLIENT_SERVICE = "dshCurrentTitleClient";
@@ -658,6 +1641,8 @@ const TITLE_CLIENT_SERVICE = "dshCurrentTitleClient";
 const titleCopy = {
 	zh: {
 		label: "自动标题",
+		session: "当前会话",
+		noSession: "没有打开的会话。打开一个会话后，可以在这里查看并重新生成标题。",
 		pinned: "已手动命名",
 		generating: "正在生成标题…",
 		regenerate: "重新生成",
@@ -677,10 +1662,13 @@ const titleCopy = {
 		retry: "重试",
 		externalChange: "设置已在别处修改。提示词草稿已保留，请重新加载后确认。",
 		syncUnavailable: "自动刷新不可用，请手动重新加载设置。",
-		reload: "重新加载（丢弃草稿）"
+		reload: "重新加载（丢弃草稿）",
+		defaults: "默认设置"
 	},
 	en: {
 		label: "Auto Title",
+		session: "Current session",
+		noSession: "No session is open. Open one to see its title and regenerate it here.",
 		pinned: "Renamed manually",
 		generating: "Generating title…",
 		regenerate: "Regenerate",
@@ -700,7 +1688,8 @@ const titleCopy = {
 		retry: "Retry",
 		externalChange: "Settings changed elsewhere. Prompt draft preserved; reload and review.",
 		syncUnavailable: "Automatic refresh unavailable; reload settings manually.",
-		reload: "Reload (discard draft)"
+		reload: "Reload (discard draft)",
+		defaults: "Default settings"
 	}
 };
 /** Only plugin-owned defaults are translated; model output and remote diagnostics stay intact. */
@@ -847,44 +1836,12 @@ const name = "dsh-current-title-client";
 const inject = [
 	"slots",
 	"connection",
-	"remote",
-	"remote.session",
+	...MODEL_CATALOG_INJECT,
 	"sessions",
 	"locale",
 	"uiWorkspace",
 	"uiSession"
 ];
-function catalogChoices(value, selected) {
-	const envelope = value && typeof value === "object" && !Array.isArray(value) ? value : void 0;
-	const root = (envelope?.ok === true && envelope.value && typeof envelope.value === "object" && !Array.isArray(envelope.value) ? envelope.value : void 0) ?? envelope ?? {};
-	const groups = Array.isArray(root.groups) ? root.groups : [];
-	const choices = [];
-	for (const group of groups) {
-		if (!group || typeof group !== "object") continue;
-		const row = group;
-		const provider = typeof row.id === "string" ? row.id : "";
-		const providerName = typeof row.name === "string" && row.name ? row.name : provider;
-		if (!provider || !Array.isArray(row.models)) continue;
-		for (const model of row.models) {
-			if (!model || typeof model !== "object") continue;
-			const item = model;
-			const id = typeof item.id === "string" ? item.id : "";
-			if (!id) continue;
-			const name = typeof item.name === "string" && item.name ? item.name : id;
-			choices.push({
-				provider,
-				model: id,
-				label: `${providerName} / ${name}`
-			});
-		}
-	}
-	if (selected.provider && selected.model && !choices.some((item) => item.provider === selected.provider && item.model === selected.model)) choices.push({
-		provider: selected.provider,
-		model: selected.model,
-		label: `${selected.provider} / ${selected.model}`
-	});
-	return choices;
-}
 function TitleSettings(props) {
 	const seat = useNativeSeat(props.client);
 	const sessionId = seat.sessionId;
@@ -895,7 +1852,10 @@ function TitleSettings(props) {
 	const [note, setNote] = (0, react.useState)("");
 	const [error, setError] = (0, react.useState)("");
 	const [prompt, setPrompt] = (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, status?.settings?.model);
+	const [menuOpen, setMenuOpen] = (0, react.useState)(false);
 	const [externalChange, setExternalChange] = (0, react.useState)(false);
 	const [syncError, setSyncError] = (0, react.useState)("");
 	const [loadingSettings, setLoadingSettings] = (0, react.useState)(true);
@@ -938,26 +1898,6 @@ function TitleSettings(props) {
 		work,
 		readGate
 	]);
-	(0, react.useEffect)(() => {
-		const catalog = props.client.remote?.session?.modelCatalog;
-		if (!catalog) return void 0;
-		let live = true;
-		catalog().then((value) => {
-			if (live) setChoices(catalogChoices(value, status?.settings.model ?? {
-				provider: "",
-				model: ""
-			}));
-		}).catch(() => {
-			if (live) setChoices([]);
-		});
-		return () => {
-			live = false;
-		};
-	}, [
-		props.client,
-		status?.settings.model.provider,
-		status?.settings.model.model
-	]);
 	(0, react.useEffect)(() => {
 		const generation = work.beginLoad();
 		reading.current = true;
@@ -1059,6 +1999,7 @@ function TitleSettings(props) {
 		const stop = props.subscribeSettings?.(() => {
 			if (!live) return;
 			setSyncError("");
+			refreshCatalog();
 			if (dirty.current && !busyRef.current) {
 				external.current = true;
 				setExternalChange(true);
@@ -1071,17 +2012,25 @@ function TitleSettings(props) {
 			live = false;
 			stop?.();
 		};
-	}, [props.subscribeSettings, props.client]);
-	const savedPrompt = status?.settings.prompt ?? "";
-	const savedModel = status?.settings.model ?? {
+	}, [
+		props.subscribeSettings,
+		props.client,
+		refreshCatalog
+	]);
+	const savedPrompt = status?.settings?.prompt ?? "";
+	const savedModel = status?.settings?.model ?? {
 		provider: "",
 		model: ""
 	};
-	const selectableChoices = choices.some((choice) => choice.provider === savedModel.provider && choice.model === savedModel.model) ? choices : [...choices, ...catalogChoices({}, savedModel)];
-	const modelKey = savedModel.provider && savedModel.model ? `${savedModel.provider}\u001f${savedModel.model}` : "";
+	const follow = !savedModel.provider || !savedModel.model;
+	const selectedModel = follow ? void 0 : choices.find((choice) => choice.provider === savedModel.provider && choice.model === savedModel.model);
+	const efforts = follow ? [] : modelMenuEffortOptions(selectedModel, savedModel.reasoningEffort);
+	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 title = status?.session?.title;
 	const pinned = status?.session?.pinned === true;
-	const weOwn = status?.support.weOwn === true;
+	const weOwn = status?.support?.weOwn === true;
 	const canRegenerate = Boolean(sessionId) && weOwn && !busy && !loadingSettings;
 	function saveSettings(patch) {
 		if (!status || busyRef.current || reading.current || external.current) return;
@@ -1115,221 +2064,266 @@ function TitleSettings(props) {
 				className: "dsh-ui-hint",
 				children: text.loading
 			}) : null,
-			title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				translate: "no",
-				className: "dsh-ui-title dsh-ui-wrap",
-				children: title
-			}) : null,
-			pinned ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "dsh-ui-meta",
-				children: text.pinned
-			}) : null,
-			status?.session?.generating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				role: "status",
-				className: "dsh-ui-hint",
-				children: text.generating
-			}) : null,
-			status && !weOwn ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-				role: "status",
-				className: "dsh-ui-hint",
-				children: [text.inactive, status.support.limitation ? ` ${titleMessage(status.support.limitation, seat.locale)}` : ""]
-			}) : null,
-			error ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				role: "alert",
-				className: "dsh-ui-error dsh-ui-wrap",
-				children: titleMessage(error, seat.locale)
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-				variant: "outline",
-				size: "sm",
-				disabled: busy,
-				onClick: () => {
-					readGate.reset();
-					refreshStatus();
-				},
-				children: text.retry
-			})] }) : null,
-			note ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				role: "status",
-				className: "dsh-ui-notice",
-				children: titleMessage(note, seat.locale)
-			}) : null,
-			externalChange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				role: "alert",
-				className: "dsh-ui-error",
-				children: text.externalChange
-			}) : null,
-			syncError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				role: "status",
-				className: "dsh-ui-hint",
-				children: text.syncUnavailable
-			}) : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "dsh-ui-actions",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-					variant: "ghost",
-					size: "sm",
-					disabled: busy || loadingSettings,
-					onClick: () => {
-						setPrompt(void 0);
-						dirty.current = false;
-						external.current = false;
-						setExternalChange(false);
-						readGate.reset();
-						syncRef.current();
-					},
-					children: text.reload
-				}), sessionId ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-					variant: "outline",
-					size: "md",
-					disabled: !canRegenerate,
-					onClick: () => {
-						if (!sessionId) return;
-						readGate.reset();
-						const token = work.beginRequest();
-						setError("");
-						setNote("");
-						runTitleRegenerateFlow({
-							call,
-							sessionId,
-							isCurrent: () => work.isRequest(token),
-							failedMessage: messages.failed,
-							onBusy: changeBusy,
-							onStatus: setStatus,
-							onError: setError,
-							onMarker: commitMarker
-						});
-					},
-					children: text.regenerate
-				}) : null]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "dsh-ui-field",
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+				className: "dsh-ui-card",
+				"data-testid": "current-title-session",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-ui-label",
-						children: text.prompt
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "dsh-ui-heading",
+						children: text.session
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-						className: "ct-prompt",
-						value: status ? promptFieldValue(prompt, savedPrompt) : "",
-						maxLength: 4e3,
-						rows: 5,
-						disabled: busy || loadingSettings || !status,
-						onChange: (event) => {
-							dirty.current = true;
-							setPrompt(event.target.value);
-							setNote("");
+					title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						translate: "no",
+						className: "dsh-ui-title dsh-ui-wrap",
+						children: title
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-ui-hint",
+						children: text.noSession
+					}),
+					pinned ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-ui-meta",
+						children: text.pinned
+					}) : null,
+					status?.session?.generating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						role: "status",
+						className: "dsh-ui-hint",
+						children: text.generating
+					}) : null,
+					status && !weOwn ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						role: "status",
+						className: "dsh-ui-hint",
+						children: [text.inactive, status.support?.limitation ? ` ${titleMessage(status.support.limitation, seat.locale)}` : ""]
+					}) : null,
+					error ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						role: "alert",
+						className: "dsh-ui-error dsh-ui-wrap",
+						children: titleMessage(error, seat.locale)
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "outline",
+						size: "sm",
+						disabled: busy,
+						onClick: () => {
+							readGate.reset();
+							refreshStatus();
 						},
-						onBlur: () => {
-							if (!status || busyRef.current || reading.current || external.current) return;
-							const next = promptToSave(prompt, savedPrompt);
-							if (next === void 0) {
-								dirty.current = false;
+						children: text.retry
+					})] }) : null,
+					note ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						role: "status",
+						className: "dsh-ui-notice",
+						children: titleMessage(note, seat.locale)
+					}) : null,
+					externalChange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						role: "alert",
+						className: "dsh-ui-error",
+						children: text.externalChange
+					}) : null,
+					syncError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						role: "status",
+						className: "dsh-ui-hint",
+						children: text.syncUnavailable
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-ui-actions",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "ghost",
+							size: "sm",
+							disabled: busy || loadingSettings,
+							onClick: () => {
 								setPrompt(void 0);
-								return;
-							}
-							readGate.reset();
-							const token = work.beginRequest();
-							setError("");
-							runTitleSettingsSave({
-								call,
-								prompt: next,
-								expectedRevision: status.settings.revision,
-								isCurrent: () => work.isRequest(token),
-								savedMessage: messages.saved,
-								failedMessage: messages.failed,
-								onBusy: changeBusy,
-								onSettings: (settings) => {
-									setStatus((current) => current ? {
-										...current,
-										settings
-									} : current);
-									dirty.current = false;
-									setPrompt(void 0);
+								dirty.current = false;
+								external.current = false;
+								setExternalChange(false);
+								readGate.reset();
+								syncRef.current();
+							},
+							children: text.reload
+						}), sessionId ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "outline",
+							size: "md",
+							disabled: !canRegenerate,
+							onClick: () => {
+								if (!sessionId) return;
+								readGate.reset();
+								const token = work.beginRequest();
+								setError("");
+								setNote("");
+								runTitleRegenerateFlow({
+									call,
+									sessionId,
+									isCurrent: () => work.isRequest(token),
+									failedMessage: messages.failed,
+									onBusy: changeBusy,
+									onStatus: setStatus,
+									onError: setError,
+									onMarker: commitMarker
+								});
+							},
+							children: text.regenerate
+						}) : null]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "dsh-ui-section",
+				"data-testid": "current-title-defaults",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "dsh-ui-heading",
+						children: text.defaults
+					}),
+					/* @__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.prompt
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+								className: "dsh-ui-textarea ct-prompt",
+								value: status ? promptFieldValue(prompt, savedPrompt) : "",
+								maxLength: 4e3,
+								rows: 5,
+								disabled: busy || loadingSettings || !status,
+								onChange: (event) => {
+									dirty.current = true;
+									setPrompt(event.target.value);
+									setNote("");
 								},
-								onNote: setNote,
-								onError: setError
-							});
-						}
+								onBlur: () => {
+									if (!status || busyRef.current || reading.current || external.current) return;
+									const next = promptToSave(prompt, savedPrompt);
+									if (next === void 0) {
+										dirty.current = false;
+										setPrompt(void 0);
+										return;
+									}
+									readGate.reset();
+									const token = work.beginRequest();
+									setError("");
+									runTitleSettingsSave({
+										call,
+										prompt: next,
+										expectedRevision: status.settings.revision,
+										isCurrent: () => work.isRequest(token),
+										savedMessage: messages.saved,
+										failedMessage: messages.failed,
+										onBusy: changeBusy,
+										onSettings: (settings) => {
+											setStatus((current) => current ? {
+												...current,
+												settings
+											} : current);
+											dirty.current = false;
+											setPrompt(void 0);
+										},
+										onNote: setNote,
+										onError: setError
+									});
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-ui-help",
+								children: text.promptHint
+							})
+						]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-ui-help",
-						children: text.promptHint
+					/* @__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.model
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelCatalogStatus, {
+								state: catalogState,
+								locale: seat.locale
+							}),
+							/* @__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.jsxs)("label", {
+						className: "dsh-ui-field",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-ui-label",
+							children: text.cadence
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+							className: "dsh-ui-select",
+							value: status?.settings?.cadence ?? "all-prompts",
+							disabled: busy || loadingSettings || !status,
+							onChange: (event) => {
+								saveSettings({ cadence: event.target.value === "first-prompt" ? "first-prompt" : "all-prompts" });
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								value: "all-prompts",
+								children: text.cadenceAll
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								value: "first-prompt",
+								children: text.cadenceFirst
+							})]
+						})]
 					})
 				]
-			}),
-			/* @__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: modelKey,
-					disabled: busy || loadingSettings || !status,
-					onChange: (event) => {
-						const value = event.target.value;
-						const choice = selectableChoices.find((item) => `${item.provider}\u001f${item.model}` === value);
-						saveSettings({ model: choice ? {
-							provider: choice.provider,
-							model: choice.model
-						} : {
-							provider: "",
-							model: ""
-						} });
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: "",
-						children: text.modelDefault
-					}), selectableChoices.map((choice) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: `${choice.provider}\u001f${choice.model}`,
-						children: choice.label
-					}, `${choice.provider}\u001f${choice.model}`))]
-				})]
-			}),
-			/* @__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.cadence
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-					className: "dsh-ui-select",
-					value: status?.settings.cadence ?? "all-prompts",
-					disabled: busy || loadingSettings || !status,
-					onChange: (event) => {
-						saveSettings({ cadence: event.target.value === "first-prompt" ? "first-prompt" : "all-prompts" });
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: "all-prompts",
-						children: text.cadenceAll
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: "first-prompt",
-						children: text.cadenceFirst
-					})]
-				})]
 			})
 		]
 	});
 }
-const styles = `${officialUiCss("ct-root")}
+const styles = `${officialUiCss("ct-root")}${modelMenuCss}
 .ct-root { max-width: 760px; }
-.ct-prompt {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  min-height: 96px;
-  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);
-}
-.ct-prompt:disabled { color: var(--dsw-alias-label-tertiary); cursor: default; }
-.ct-prompt::placeholder { color: var(--dsw-alias-label-dimmed); }
+.ct-prompt { min-height: 96px; }
 `;
 function apply(ctx) {
 	const client = ctx;