@jcy2387/dsh-models-input-modalities 0.1.0 → 0.1.2

package/lib/client.cjs

@@ -24,8 +24,10 @@ window.__ModuleLoader__.load({
 			return Array.isArray(value) ? value.map((entry) => typeof entry === "object" && entry !== null && !Array.isArray(entry) ? entry : {}) : [];
 		}
 		/** Joins the settings Remote's document view and fenced writes for one card. */
-		var ImageInputController = class {
+		var ModelCapabilityController = class {
 			ctx;
+			/** The cards waiting to hear that this namespace's stored section changed. */
+			listeners = /* @__PURE__ */ new Set();
 			/**
 			* @param ctx - the plugin's client context, which declares `remote.settings`
 			* in its own `inject`.
@@ -34,6 +36,29 @@ window.__ModuleLoader__.load({
 				this.ctx = ctx;
 			}
 			/**
+			* Start forwarding this namespace's pushed document invalidations to the
+			* cards. The Host emits one per committed write — including the Models page's
+			* own model-list edits — so a card never has to poll or wait for a remount.
+			* @returns the disposer that withdraws the Remote subscription.
+			*/
+			watch() {
+				return this.ctx.remote.$on("settings/document-updated", (ns, revision) => {
+					if (String(ns) !== NS$1) return;
+					for (const listener of [...this.listeners]) listener(revision);
+				});
+			}
+			/**
+			* Subscribe one card to namespace invalidations.
+			* @param listener - called with the namespace's new revision on each change.
+			* @returns the disposer for this one subscription.
+			*/
+			subscribe(listener) {
+				this.listeners.add(listener);
+				return () => {
+					this.listeners.delete(listener);
+				};
+			}
+			/**
 			* Read one provider's model rows and the revision fence for writing them.
 			* @param entry - the card's directory row (its settings address names the profile).
 			* @returns the view, or undefined when the settings face or namespace is unavailable.
@@ -123,6 +148,8 @@ window.__ModuleLoader__.load({
 		function parseImageInputChoice(value) {
 			return value === "inherit" || value === "text" || value === "image" ? value : void 0;
 		}
+		//#endregion
+		//#region src/model-row.ts
 		/**
 		* The row's model id for labels.
 		* @param row - one stored model row.
@@ -134,8 +161,197 @@ window.__ModuleLoader__.load({
 			return typeof id === "string" && id.length > 0 ? id : `#${String(index + 1)}`;
 		}
 		//#endregion
+		//#region src/reasoning-efforts.ts
+		/** Every level a row may declare, in escalation order — the adapter's own key set. */
+		const THINKING_LEVELS = [
+			"off",
+			"minimal",
+			"low",
+			"medium",
+			"high",
+			"xhigh",
+			"max"
+		];
+		/**
+		* The spelling a newly offered level starts from: its own name, except for
+		* `off`, whose absence is the spelling most providers read as "do not think".
+		* @param level - the level being offered.
+		* @returns its default wire spelling.
+		*/
+		function defaultWire(level) {
+			return level === "off" ? "" : level;
+		}
+		/**
+		* A level set offering exactly `offered`, each at its default spelling.
+		* @param offered - the levels to declare.
+		* @returns the seven level drafts.
+		*/
+		function declaring(offered) {
+			const drafts = {};
+			for (const level of THINKING_LEVELS) {
+				const on = offered.includes(level);
+				drafts[level] = {
+					offered: on,
+					wire: on ? defaultWire(level) : ""
+				};
+			}
+			return drafts;
+		}
+		/**
+		* The levels a row with no dict of its own starts from when it is switched to a
+		* declared set: the three efforts an OpenAI-compatible gateway is most likely
+		* to serve, each spelled as its own name. `off` is deliberately left unticked:
+		* on the plain `reasoning_effort` wire an empty `off` is the very same request
+		* as naming no effort at all, so pre-offering it would promise a "stop
+		* thinking" choice the endpoint may not honour — the author ticks it, and
+		* spells it, once their endpoint says how.
+		*/
+		const DEFAULT_LEVELS = declaring([
+			"low",
+			"medium",
+			"high"
+		]);
+		/**
+		* The choice a row's stored `reasoningEfforts` displays. Anything that is not
+		* `false` and not a plain object states no claim this card understands, and
+		* reads as the inheritance it leaves in place; an empty object reads as a
+		* declared set offering nothing, which the validator then names.
+		* @param row - one stored model row.
+		* @returns the choice the row's select shows.
+		*/
+		function reasoningChoice(row) {
+			const value = row["reasoningEfforts"];
+			if (value === false) return "none";
+			if (typeof value === "object" && value !== null && !Array.isArray(value)) return "custom";
+			return "inherit";
+		}
+		/**
+		* The row's declared levels as editor state. A level the dict omits is not
+		* offered; one it carries is, with its wire spelling — an empty value, which is
+		* what a valueless `off:` stores as, and a value of a type the schema refuses
+		* both read as no spelling yet. A row declaring nothing shows the defaults a
+		* fresh declaration starts from.
+		* @param row - one stored model row.
+		* @returns the seven level drafts.
+		*/
+		function reasoningLevels(row) {
+			const value = row["reasoningEfforts"];
+			if (typeof value !== "object" || value === null || Array.isArray(value)) return DEFAULT_LEVELS;
+			const stored = value;
+			const drafts = {};
+			for (const level of THINKING_LEVELS) {
+				if (!(level in stored)) {
+					drafts[level] = {
+						offered: false,
+						wire: ""
+					};
+					continue;
+				}
+				const wire = stored[level];
+				drafts[level] = {
+					offered: true,
+					wire: typeof wire === "string" ? wire : ""
+				};
+			}
+			return drafts;
+		}
+		/**
+		* The row with one reasoning choice applied: `inherit` removes the field,
+		* `none` stores `false`, and `custom` stores exactly the levels offered — in
+		* escalation order, a valueless `off` as `null`, spellings trimmed so a stray
+		* space cannot reach the wire. Every other field, including ones this card
+		* never shows, survives.
+		* @param row - the row to patch.
+		* @param choice - the selected state.
+		* @param levels - the editor's level drafts; read only for `custom`.
+		* @returns a new row carrying the choice.
+		*/
+		function withReasoning(row, choice, levels) {
+			const next = { ...row };
+			delete next["reasoningEfforts"];
+			if (choice === "none") {
+				next["reasoningEfforts"] = false;
+				return next;
+			}
+			if (choice !== "custom") return next;
+			const declared = {};
+			for (const level of THINKING_LEVELS) {
+				const draft = levels[level];
+				if (!draft.offered) continue;
+				const wire = draft.wire.trim();
+				declared[level] = wire.length === 0 ? null : wire;
+			}
+			next["reasoningEfforts"] = declared;
+			return next;
+		}
+		/**
+		* The level set with one level offered or withdrawn. Offering a level always
+		* starts its spelling from the default, so a tick is never a blank the save
+		* then refuses, and what a withdrawn level carried is not what a reticked one
+		* silently revives; levels left alone keep theirs.
+		* @param levels - the drafts to patch.
+		* @param level - the level toggled.
+		* @param offered - whether the row should declare it.
+		* @returns the patched drafts, or the same object when nothing changes.
+		*/
+		function toggleLevel(levels, level, offered) {
+			if (levels[level].offered === offered) return levels;
+			return {
+				...levels,
+				[level]: {
+					offered,
+					wire: offered ? defaultWire(level) : ""
+				}
+			};
+		}
+		/**
+		* The level set with one level's wire spelling retyped.
+		* @param levels - the drafts to patch.
+		* @param level - the level whose spelling changed.
+		* @param wire - the text the field now carries.
+		* @returns the patched drafts.
+		*/
+		function setWire(levels, level, wire) {
+			return {
+				...levels,
+				[level]: {
+					...levels[level],
+					wire
+				}
+			};
+		}
+		/**
+		* Why a row's declared levels would be refused, checked before the write so the
+		* card can name the row instead of answering a rejected settings mutation. The
+		* rules are the adapter's: every declared level but `off` needs a wire spelling,
+		* and a set offering no level beyond `off` declares nothing worth declaring.
+		* @param row - one stored model row.
+		* @returns the failure, or undefined for a row that can be saved.
+		*/
+		function reasoningFailure(row) {
+			if (reasoningChoice(row) !== "custom") return void 0;
+			const levels = reasoningLevels(row);
+			let thinks = false;
+			for (const level of THINKING_LEVELS) {
+				const draft = levels[level];
+				if (!draft.offered || level === "off") continue;
+				if (draft.wire.trim().length === 0) return "needsWire";
+				thinks = true;
+			}
+			return thinks ? void 0 : "needsLevel";
+		}
+		/**
+		* Read a select's submitted value. The DOM hands over a bare string, so an
+		* unrecognized one is refused rather than cast into the union.
+		* @param value - the submitted option value.
+		* @returns the choice, or undefined for anything else.
+		*/
+		function parseReasoningChoice(value) {
+			return value === "inherit" || value === "none" || value === "custom" ? value : void 0;
+		}
+		//#endregion
 		//#region \0dsh-css:src/client/styles.module.css.mjs
-		const css = ".nU9wWG_fold{border:1px solid var(--dsw-alias-border-l2,#0000001f);background:var(--dsw-alias-bg-layer-3,transparent);border-radius:10px;margin:8px 0 0}.nU9wWG_summary{cursor:pointer;color:var(--dsw-alias-label-primary,inherit);user-select:none;padding:10px 14px;font-size:13px;font-weight:600}.nU9wWG_body{flex-direction:column;gap:10px;padding:2px 14px 14px;display:flex}.nU9wWG_row{align-items:center;gap:10px;display:flex}.nU9wWG_rowId{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--dsw-alias-label-primary,inherit);flex:auto;font-size:13px;overflow:hidden}.nU9wWG_select{min-width:9em;color:var(--dsw-alias-label-primary,inherit);border:1px solid var(--dsw-alias-border-l2,#0000001f);border-radius:8px;flex:none;padding:6px 8px;font-size:13px}.nU9wWG_hint,.nU9wWG_status{color:var(--dsw-alias-label-tertiary,inherit);margin:0;font-size:12px;line-height:1.5}.nU9wWG_error{color:var(--dsw-alias-status-danger,#d64545);margin:0;font-size:12px;line-height:1.5}.nU9wWG_footer{align-items:center;gap:10px;display:flex}";
+		const css = ".q49TuG_fold{border:1px solid var(--dsw-alias-border-l2,#0000001f);background:var(--dsw-alias-bg-layer-3,transparent);border-radius:10px;margin:8px 0 0}.q49TuG_summary{cursor:pointer;color:var(--dsw-alias-label-primary,inherit);user-select:none;padding:10px 14px;font-size:13px;font-weight:600}.q49TuG_body{flex-direction:column;gap:10px;padding:2px 14px 14px;display:flex}.q49TuG_model{flex-direction:column;gap:6px;display:flex}.q49TuG_row{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}.q49TuG_rowId{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--dsw-alias-label-primary,inherit);flex:auto;padding-bottom:6px;font-size:13px;overflow:hidden}.q49TuG_field{flex-direction:column;gap:3px;display:flex}.q49TuG_fieldLabel{color:var(--dsw-alias-label-tertiary,inherit);font-size:11px;line-height:1.2}.q49TuG_select{min-width:9em;color:var(--dsw-alias-label-primary,inherit);border:1px solid var(--dsw-alias-border-l2,#0000001f);border-radius:8px;flex:none;padding:6px 8px;font-size:13px}.q49TuG_levels{border:1px dashed var(--dsw-alias-border-l2,#0000001f);border-radius:8px;flex-direction:column;gap:6px;padding:8px 10px;display:flex}.q49TuG_levelGrid{grid-template-columns:repeat(auto-fill,minmax(15em,1fr));gap:6px 12px;display:grid}.q49TuG_levelRow{align-items:center;gap:8px;min-width:0;display:flex}.q49TuG_levelOffered{color:var(--dsw-alias-label-primary,inherit);cursor:pointer;flex:0 0 6.5em;align-items:center;gap:6px;font-size:12px;display:flex}.q49TuG_wire{min-width:0;color:var(--dsw-alias-label-primary,inherit);border:1px solid var(--dsw-alias-border-l2,#0000001f);background:0 0;border-radius:8px;flex:auto;padding:4px 8px;font-size:12px}.q49TuG_wire:disabled{opacity:.55}.q49TuG_hint,.q49TuG_status{color:var(--dsw-alias-label-tertiary,inherit);margin:0;font-size:12px;line-height:1.5}.q49TuG_error{color:var(--dsw-alias-status-danger,#d64545);margin:0;font-size:12px;line-height:1.5}.q49TuG_footer{align-items:center;gap:10px;display:flex}";
 		const tagId = "@jcy2387/dsh-models-input-modalities/styles.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -145,67 +361,156 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var styles_module_css_default = {
-			"footer": "nU9wWG_footer",
-			"body": "nU9wWG_body",
-			"fold": "nU9wWG_fold",
-			"rowId": "nU9wWG_rowId",
-			"select": "nU9wWG_select",
-			"hint": "nU9wWG_hint",
-			"summary": "nU9wWG_summary",
-			"error": "nU9wWG_error",
-			"status": "nU9wWG_status",
-			"row": "nU9wWG_row"
+			"field": "q49TuG_field",
+			"status": "q49TuG_status",
+			"body": "q49TuG_body",
+			"fold": "q49TuG_fold",
+			"row": "q49TuG_row",
+			"fieldLabel": "q49TuG_fieldLabel",
+			"levels": "q49TuG_levels",
+			"hint": "q49TuG_hint",
+			"levelOffered": "q49TuG_levelOffered",
+			"summary": "q49TuG_summary",
+			"rowId": "q49TuG_rowId",
+			"select": "q49TuG_select",
+			"levelRow": "q49TuG_levelRow",
+			"footer": "q49TuG_footer",
+			"levelGrid": "q49TuG_levelGrid",
+			"error": "q49TuG_error",
+			"wire": "q49TuG_wire",
+			"model": "q49TuG_model"
 		};
 		//#endregion
-		//#region src/client/ImageInputCard.tsx
+		//#region src/client/ModelCapabilityCard.tsx
 		/**
-		* One pi-ai provider card's image-input fold: the per-model modality claim the
-		* Models page's own form does not carry. The fold loads the provider's stored
-		* rows when first opened, edits them locally, and writes the whole `models`
-		* array back under the revision fence the load answered — the same array
-		* semantics the page's own cards use.
+		* One pi-ai provider card's model-capability fold: the per-model claims the
+		* Models page's own form does not carry — which inputs a model accepts, and
+		* which reasoning levels it offers. The fold loads the provider's stored rows
+		* when first opened, edits them locally, and writes the whole `models` array
+		* back under the revision fence the load answered — the same array semantics
+		* the page's own cards use, and the reason both claims live in one fold: two
+		* folds would write the same array and fence each other into conflicts. A
+		* stored change elsewhere on the page (a model added or removed in the catalog
+		* above) reaches the fold through the pushed settings invalidation, so the list
+		* it shows never waits for the section to remount.
 		*/
 		/**
-		* Render the image-input fold of one provider card.
+		* Render the model-capability fold of one provider card.
 		* @param props - the card's directory row plus the bound face and copy.
 		* @returns the fold, or nothing while the provider is still a dormant row.
 		*/
-		function ImageInputCard(props) {
-			const { provider, configured, t, loadModels, saveModels } = props;
+		function ModelCapabilityCard(props) {
+			const { provider, configured, t, loadModels, saveModels, subscribeChanges } = props;
 			const [status, setStatus] = (0, react.useState)("idle");
 			const [view, setView] = (0, react.useState)(void 0);
 			const [rows, setRows] = (0, react.useState)([]);
 			const [failure, setFailure] = (0, react.useState)(void 0);
 			const [saved, setSaved] = (0, react.useState)(false);
-			const reload = (0, react.useCallback)(async () => {
-				setStatus("loading");
-				setFailure(void 0);
-				setSaved(false);
+			const [open, setOpen] = (0, react.useState)(false);
+			const [stale, setStale] = (0, react.useState)(false);
+			/** Latest read wins: an older response never overwrites a newer one. */
+			const generation = (0, react.useRef)(0);
+			/**
+			* The newest revision this fold holds adopted data for. An announcement at
+			* or below it is old news — the card's own committed write's echo included.
+			*/
+			const seen = (0, react.useRef)(0);
+			/**
+			* The newest revision the namespace has announced. A completed read or
+			* write compares against it to tell whether a commit outran it mid-flight.
+			*/
+			const noticed = (0, react.useRef)(0);
+			const dirtyRef = (0, react.useRef)(false);
+			const savingRef = (0, react.useRef)(false);
+			const dirty = view !== void 0 && JSON.stringify(rows) !== JSON.stringify(view.models);
+			(0, react.useEffect)(() => {
+				dirtyRef.current = dirty;
+			}, [dirty]);
+			(0, react.useEffect)(() => {
+				savingRef.current = status === "saving";
+			}, [status]);
+			/**
+			* Re-read the provider's rows.
+			* @param silent - keep the rendered list and copy in place while reading, for
+			* a background refresh the user never asked for.
+			*/
+			const reload = (0, react.useCallback)(async (silent) => {
+				const ticket = ++generation.current;
+				if (!silent) {
+					setStatus("loading");
+					setFailure(void 0);
+					setSaved(false);
+				}
 				const loaded = await loadModels(provider);
+				if (ticket !== generation.current) return;
+				if (silent && (dirtyRef.current || savingRef.current)) {
+					setStale(true);
+					return;
+				}
 				if (loaded === void 0) {
+					if (silent) {
+						setStale(true);
+						return;
+					}
 					setView(void 0);
 					setFailure(t("loadFailed"));
 					setStatus("ready");
 					return;
 				}
+				seen.current = loaded.revision;
 				setView(loaded);
 				setRows(loaded.models.map((row) => ({ ...row })));
+				setFailure(void 0);
+				setStale(loaded.revision < noticed.current);
 				setStatus("ready");
 			}, [
 				loadModels,
 				provider,
 				t
 			]);
+			(0, react.useEffect)(() => {
+				if (configured !== true) return void 0;
+				return subscribeChanges((revision) => {
+					if (revision > noticed.current) noticed.current = revision;
+					if (revision <= seen.current) return;
+					setStale(true);
+				});
+			}, [configured, subscribeChanges]);
+			(0, react.useEffect)(() => {
+				if (stale && open && status === "ready" && !dirty) reload(true);
+			}, [
+				stale,
+				open,
+				status,
+				dirty,
+				view,
+				reload
+			]);
 			if (configured !== true) return null;
-			const dirty = view !== void 0 && JSON.stringify(rows) !== JSON.stringify(view.models);
-			const choose = (index, choice) => {
+			const chooseInput = (index, choice) => {
 				setRows((current) => current.map((row, at) => at === index ? withImageInput(row, choice) : row));
 			};
+			const chooseReasoning = (index, choice) => {
+				setRows((current) => current.map((row, at) => at === index ? withReasoning(row, choice, reasoningLevels(row)) : row));
+			};
+			/**
+			* Patch one row's declared levels. The edit runs inside the state updater and
+			* re-reads the row there, so two controls changed in one batch each see what
+			* the previous one wrote.
+			* @param index - the row to patch.
+			* @param edit - the level-set transformation.
+			*/
+			const patchLevels = (index, edit) => {
+				setRows((current) => current.map((row, at) => at === index ? withReasoning(row, "custom", edit(reasoningLevels(row))) : row));
+			};
+			const unsavable = rows.some((row) => reasoningFailure(row) !== void 0);
+			const locked = view === void 0 || !view.writable || status === "saving";
 			const submit = async () => {
-				if (view === void 0) return;
+				if (view === void 0 || unsavable) return;
 				setStatus("saving");
 				const outcome = await saveModels(provider, rows, view.revision);
 				if (outcome.kind === "written") {
+					seen.current = outcome.revision;
 					setView({
 						...view,
 						revision: outcome.revision,
@@ -213,17 +518,21 @@ window.__ModuleLoader__.load({
 						fromUser: true
 					});
 					setSaved(true);
+					setFailure(void 0);
+					setStale(noticed.current > outcome.revision);
 					setStatus("ready");
 					return;
 				}
 				setFailure(outcome.kind === "conflict" ? t("conflict") : outcome.message);
-				if (outcome.kind === "conflict") await reload();
+				if (outcome.kind === "conflict") await reload(false);
 				else setStatus("ready");
 			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
 				className: styles_module_css_default["fold"],
 				onToggle: (event) => {
-					if (event.currentTarget.open && status === "idle") reload();
+					const opened = event.currentTarget.open;
+					setOpen(opened);
+					if (opened && (status === "idle" || stale && !dirty)) reload(false);
 				},
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", {
 					className: styles_module_css_default["summary"],
@@ -244,7 +553,7 @@ window.__ModuleLoader__.load({
 								variant: "ghost",
 								size: "sm",
 								onClick: () => {
-									reload();
+									reload(false);
 								},
 								children: t("retry")
 							})
@@ -257,36 +566,130 @@ window.__ModuleLoader__.load({
 								className: styles_module_css_default["hint"],
 								children: t("inheritsHint")
 							}),
-							rows.map((row, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-								className: styles_module_css_default["row"],
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: styles_module_css_default["rowId"],
-									children: rowId(row, index)
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-									className: styles_module_css_default["select"],
-									value: imageInputChoice(row),
-									"aria-label": `${t("title")} ${rowId(row, index)}`,
-									disabled: !view.writable || status === "saving",
-									onChange: (event) => {
-										const next = parseImageInputChoice(event.target.value);
-										if (next !== void 0) choose(index, next);
-									},
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-											value: "inherit",
-											children: t("choiceDefault")
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-											value: "text",
-											children: t("choiceText")
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-											value: "image",
-											children: t("choiceImage")
-										})
-									]
-								})]
-							}, index)),
+							rows.map((row, index) => {
+								const id = rowId(row, index);
+								const reasoning = reasoningChoice(row);
+								const levels = reasoningLevels(row);
+								const invalid = reasoningFailure(row);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: styles_module_css_default["model"],
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: styles_module_css_default["row"],
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: styles_module_css_default["rowId"],
+												children: id
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+												className: styles_module_css_default["field"],
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: styles_module_css_default["fieldLabel"],
+													children: t("inputLabel")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+													className: styles_module_css_default["select"],
+													value: imageInputChoice(row),
+													"aria-label": `${t("inputLabel")} ${id}`,
+													disabled: locked,
+													onChange: (event) => {
+														const next = parseImageInputChoice(event.target.value);
+														if (next !== void 0) chooseInput(index, next);
+													},
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+															value: "inherit",
+															children: t("choiceDefault")
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+															value: "text",
+															children: t("choiceText")
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+															value: "image",
+															children: t("choiceImage")
+														})
+													]
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+												className: styles_module_css_default["field"],
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: styles_module_css_default["fieldLabel"],
+													children: t("reasoningLabel")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+													className: styles_module_css_default["select"],
+													value: reasoning,
+													"aria-label": `${t("reasoningLabel")} ${id}`,
+													disabled: locked,
+													onChange: (event) => {
+														const next = parseReasoningChoice(event.target.value);
+														if (next !== void 0) chooseReasoning(index, next);
+													},
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+															value: "inherit",
+															children: t("reasoningInherit")
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+															value: "none",
+															children: t("reasoningNone")
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+															value: "custom",
+															children: t("reasoningCustom")
+														})
+													]
+												})]
+											})
+										]
+									}), reasoning === "custom" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: styles_module_css_default["levels"],
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: styles_module_css_default["levelGrid"],
+												children: THINKING_LEVELS.map((level) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: styles_module_css_default["levelRow"],
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+														className: styles_module_css_default["levelOffered"],
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+															type: "checkbox",
+															checked: levels[level].offered,
+															disabled: locked,
+															onChange: (event) => {
+																const offered = event.target.checked;
+																patchLevels(index, (current) => toggleLevel(current, level, offered));
+															}
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: level })]
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+														className: styles_module_css_default["wire"],
+														type: "text",
+														value: levels[level].wire,
+														placeholder: level === "off" ? t("wireNothing") : level,
+														"aria-label": `${t("wireLabel")} ${level}`,
+														spellCheck: false,
+														disabled: locked || !levels[level].offered,
+														onChange: (event) => {
+															const wire = event.target.value;
+															patchLevels(index, (current) => setWire(current, level, wire));
+														}
+													})]
+												}, level))
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: styles_module_css_default["hint"],
+												children: t("reasoningHint")
+											}),
+											invalid === "needsWire" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: styles_module_css_default["error"],
+												children: `${id}: ${t("needsWire")}`
+											}) : null,
+											invalid === "needsLevel" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: styles_module_css_default["error"],
+												children: `${id}: ${t("needsLevel")}`
+											}) : null
+										]
+									}) : null]
+								}, index);
+							}),
 							failure !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								className: styles_module_css_default["error"],
 								children: failure
@@ -297,7 +700,7 @@ window.__ModuleLoader__.load({
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 										variant: "outline",
 										size: "sm",
-										disabled: !view.writable || status === "saving" || !dirty,
+										disabled: locked || !dirty || unsavable,
 										onClick: () => {
 											submit();
 										},
@@ -308,7 +711,7 @@ window.__ModuleLoader__.load({
 										size: "sm",
 										disabled: status === "saving",
 										onClick: () => {
-											reload();
+											reload(false);
 										},
 										children: t("retry")
 									}) : null,
@@ -329,19 +732,29 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/locales.ts
-		/** Copy dictionaries for the image-input card. */
+		/** Copy dictionaries for the model-capability card. */
 		/** English strings (the key-set source of truth for this pair). */
 		const en = {
-			title: "Input modalities",
+			title: "Model capabilities",
 			loading: "Loading the model list…",
 			loadFailed: "Loading the model configuration failed.",
 			retry: "Retry",
-			empty: "No explicit model list yet — add models in the catalog above, then declare their input modalities here.",
+			empty: "No explicit model list yet — add models in the catalog above, then declare what each one accepts and reasons with here.",
 			inheritsHint: "Showing the inherited model list; saving copies it into your user settings.",
 			readOnly: "The settings document is read-only in this deployment.",
+			inputLabel: "Input modalities",
 			choiceDefault: "Provider default",
 			choiceText: "Text only",
 			choiceImage: "Text and image",
+			reasoningLabel: "Reasoning levels",
+			reasoningInherit: "Catalog default",
+			reasoningNone: "Not a reasoning model",
+			reasoningCustom: "Declare levels",
+			reasoningHint: "A ticked level is one the model picker offers; the value beside it is the spelling sent on the wire, which a gateway may name its own way. Only off may stay empty — offered, and sent as no parameter at all. A level left unticked is not offered.",
+			wireLabel: "Wire value for",
+			wireNothing: "send nothing",
+			needsLevel: "declare at least one level beyond off, or choose “Not a reasoning model”.",
+			needsWire: "every level except off needs the wire value to send.",
 			save: "Save",
 			saving: "Saving…",
 			saved: "Saved. The adapter picks it up on its next request.",
@@ -349,16 +762,26 @@ window.__ModuleLoader__.load({
 		};
 		/** Chinese strings (same keys as {@link en}). */
 		const zh = {
-			title: "输入模态",
+			title: "模型能力",
 			loading: "正在读取模型列表…",
 			loadFailed: "读取模型配置失败。",
 			retry: "重试",
-			empty: "还没有显式模型列表——请先在上方模型目录中添加模型，再回到这里声明输入模态。",
+			empty: "还没有显式模型列表——请先在上方模型目录中添加模型，再回到这里声明每个模型接受的输入与推理等级。",
 			inheritsHint: "当前显示的是继承的模型列表；保存会将其复制到你的用户设置层。",
 			readOnly: "当前部署的设置文档为只读。",
+			inputLabel: "输入模态",
 			choiceDefault: "提供方默认",
 			choiceText: "仅文本",
 			choiceImage: "文本和图片",
+			reasoningLabel: "推理等级",
+			reasoningInherit: "目录默认",
+			reasoningNone: "非推理模型",
+			reasoningCustom: "声明等级",
+			reasoningHint: "勾选的等级就是模型选择器会提供的选项；旁边的值是实际发到网关的拼写，网关可以有自己的叫法。只有 off 可以留空——表示提供该等级但完全不发送参数。未勾选的等级不会提供。",
+			wireLabel: "发送值：",
+			wireNothing: "不发送",
+			needsLevel: "至少声明一个 off 以外的等级，或选择「非推理模型」。",
+			needsWire: "除 off 外，每个勾选的等级都要填写发送值。",
 			save: "保存",
 			saving: "保存中…",
 			saved: "已保存。适配器会在下一次请求时生效。",
@@ -367,7 +790,7 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/index.ts
 		/** Dictionary namespace owned by this plugin. */
-		const NS = "settings.models.imageInput";
+		const NS = "settings.models.modelCapabilities";
 		/** The effect label prefix. */
 		const PKG = "@jcy2387/dsh-models-input-modalities";
 		/** Required browser services. */
@@ -378,7 +801,7 @@ window.__ModuleLoader__.load({
 			"remote.settings"
 		];
 		/**
-		* Register the image-input fold on every llm-pi-ai provider card once the
+		* Register the model-capability fold on every llm-pi-ai provider card once the
 		* Models section has declared the seat.
 		* @param ctx - the plugin's client context.
 		*/
@@ -387,17 +810,19 @@ window.__ModuleLoader__.load({
 				zh,
 				en
 			}), `${PKG}: dictionaries`);
-			const controller = new ImageInputController(ctx);
+			const controller = new ModelCapabilityController(ctx);
+			ctx.effect(() => controller.watch(), `${PKG}: settings invalidations`);
 			const face = {
 				loadModels: (entry) => controller.load(entry),
-				saveModels: (entry, models, revision) => controller.save(entry, models, revision)
+				saveModels: (entry, models, revision) => controller.save(entry, models, revision),
+				subscribeChanges: (listener) => controller.subscribe(listener)
 			};
 			ctx.slots.inject("settings.models.provider-card", () => ctx.slots.register({
 				name: "settings.models.provider-card",
 				key: "llm-pi-ai",
 				locale: NS,
 				inject: () => face
-			}, ImageInputCard));
+			}, ModelCapabilityCard));
 		}
 		//#endregion
 		exports.apply = apply;