dsh-model-input-toggle 0.0.0-stage → 1.0.0

package/lib/client.js

@@ -0,0 +1,731 @@
+// dsh-model-input-toggle — browser half (client plugin bundle).
+//
+// Loaded by dsh-client-modules and executed through the vendored cordis Loader's
+// lazy-CJS module table (window.__ModuleLoader__.load). The factory body is plain
+// CJS: require() resolves against the shell's module table, so React comes from
+// the host page rather than a bundled copy.
+//
+// WHAT THIS RENDERS
+// -----------------
+// The official Models page exposes only id/name/contextWindow/maxTokens. The
+// adapter's modality declaration (`input` for llm-pi-ai, `inputModalities` for
+// llm-deepseek) has no UI, so a model added by a third-party provider is treated
+// as text-only and DSH intercepts image messages before they leave the machine.
+//
+// This half adds that missing control. It mounts into the
+// `settings.models.provider-card` keyed slot — one cell per settings namespace,
+// dispatched on every provider card — and renders one image-input checkbox per
+// model of the card's own provider.
+//
+// SLOT KEY SEMANTICS (why one cell serves many cards)
+// ---------------------------------------------------
+// The slot is keyed by `settingsNs`, and llm-pi-ai dispatches the SAME key for
+// every route it serves. A keyed cell therefore cannot be registered per model
+// or per route: a single registration for "llm-pi-ai" is invoked once on each
+// pi-ai card, and the card's own route arrives as `props.provider.provider`.
+// That is what makes every card independent without colliding.
+//
+// THE ONE THING THIS UI MUST NOT LET A USER BELIEVE
+// -------------------------------------------------
+// `input: ["text","image"]` declares an intent; it does not create a capability.
+// Ticking the box moves the failure from "DSH blocked it" to "the endpoint
+// returned 400". Every row therefore carries a 验证端点 action that sends a real
+// image-bearing request, and the first-time confirmation says so plainly.
+
+window.__ModuleLoader__.load({
+	id: "dsh-model-input-toggle",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		var React = require("react");
+
+		exports.inject = ["slots"];
+		exports.apply = function apply(ctx) {
+			// ── constants ────────────────────────────────────────────────────
+			var API_URL = "/dsh-model-input-toggle/api";
+			/** Host reply budget; past this the page reports a connection failure. */
+			var REQUEST_TIMEOUT_MS = 10000;
+			/** How long a success/error marker stays beside the checkbox. */
+			var FEEDBACK_MS = 2600;
+			/** Namespaces this plugin can extend, and the slot cell key each needs. */
+			var SUPPORTED = {
+				"llm-pi-ai": true,
+				"llm-deepseek": true
+			};
+			/** Confirmation is per browser, not per model: it explains the risk once. */
+			var CONFIRM_KEY = "dsh-model-input-toggle:acknowledged";
+			/** Exact warning shown before the first enable. */
+			var CONFIRM_TEXT = "开启图片输入声明后，DSH 将不再拦截发往该模型的图片消息。"
+				+ "如果该模型的 API 端点实际不支持图片，请求会返回 400 错误。"
+				+ "请确认该模型确实支持视觉输入。";
+			/** Hover explanation for every checkbox. */
+			var TOOLTIP = "勾选后该模型可接收图片消息，取消勾选则仅支持文本。"
+				+ "修改后建议用带图片的请求验证端点实际能力。";
+
+			// ── styles ───────────────────────────────────────────────────────
+			// React inline styles cannot express :hover or keyframes, so the few
+			// rules that need them live in one owned stylesheet. It is registered
+			// as an effect, so stopping the plugin removes it with the UI.
+			var CSS = [
+				// The panel is COLLAPSED BY DEFAULT: the slot renders on every saved
+				// provider card unconditionally, so an always-open block would add a
+				// wall of rows to a page the user is usually just scanning. Collapsed,
+				// it costs one line and still answers "is image input on for anything
+				// here?" through the count in the summary.
+				".dsh-imit-panel{display:flex;flex-direction:column;gap:8px;margin:6px 0 2px;}",
+				".dsh-imit-panel[data-expanded='1']{gap:8px;padding:10px 12px;border-radius:8px;",
+				"border:1px solid var(--dsw-alias-border-l1,rgba(128,128,128,0.28));",
+				"background:var(--dsw-alias-bg-layer-2,rgba(128,128,128,0.06));}",
+				".dsh-imit-toggle{display:flex;align-items:center;gap:7px;width:100%;margin:0;padding:2px 0;",
+				"border:0;background:transparent;cursor:pointer;font:inherit;text-align:left;",
+				"color:var(--dsw-alias-label-primary,inherit);}",
+				".dsh-imit-toggle:hover .dsh-imit-title{color:var(--dsw-alias-brand-primary,#4a7dff);}",
+				".dsh-imit-toggle:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#4a7dff);",
+				"outline-offset:2px;border-radius:4px;}",
+				".dsh-imit-chevron{display:inline-block;flex:none;width:9px;font-size:9px;line-height:1;",
+				"color:var(--dsw-alias-label-secondary,rgba(128,128,128,0.9));transition:transform 0.15s ease;}",
+				".dsh-imit-chevron[data-open='1']{transform:rotate(90deg);}",
+				".dsh-imit-count{font-size:11px;color:var(--dsw-alias-label-secondary,rgba(128,128,128,0.9));}",
+				".dsh-imit-title{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary,inherit);}",
+				".dsh-imit-hint{font-size:11px;color:var(--dsw-alias-label-secondary,rgba(128,128,128,0.9));line-height:1.45;}",
+				".dsh-imit-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:24px;}",
+				".dsh-imit-label{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:13px;",
+				"color:var(--dsw-alias-label-primary,inherit);}",
+				".dsh-imit-label[data-disabled='1']{cursor:not-allowed;opacity:0.75;}",
+				".dsh-imit-id{font-size:11px;color:var(--dsw-alias-label-secondary,rgba(128,128,128,0.9));",
+				"font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;}",
+				".dsh-imit-cb{width:15px;height:15px;margin:0;accent-color:var(--dsw-alias-brand-primary,#4a7dff);cursor:inherit;}",
+				".dsh-imit-cb:disabled{cursor:not-allowed;}",
+				".dsh-imit-btn{font:inherit;font-size:11px;padding:3px 8px;border-radius:6px;cursor:pointer;",
+				"border:1px solid var(--dsw-alias-border-l1,rgba(128,128,128,0.3));",
+				"background:var(--dsw-alias-bg-layer-1,transparent);color:var(--dsw-alias-label-secondary,inherit);}",
+				".dsh-imit-btn:hover:not(:disabled){border-color:var(--dsw-alias-border-l2,rgba(128,128,128,0.5));}",
+				".dsh-imit-btn:disabled{opacity:0.55;cursor:not-allowed;}",
+				".dsh-imit-ok{font-size:11px;color:var(--dsw-alias-state-success-primary,#2f9e44);}",
+				".dsh-imit-err{font-size:11px;color:var(--dsw-alias-state-error-primary,#e03131);overflow-wrap:anywhere;}",
+				".dsh-imit-warn{font-size:11px;color:var(--dsw-alias-state-warn-primary,#e8590c);overflow-wrap:anywhere;}",
+				".dsh-imit-locked{font-size:11px;color:var(--dsw-alias-label-secondary,rgba(128,128,128,0.9));}",
+				".dsh-imit-spin{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;",
+				"border:2px solid var(--dsw-alias-border-l2,rgba(128,128,128,0.45));border-top-color:transparent;",
+				"animation:dsh-imit-spin 0.7s linear infinite;}",
+				"@keyframes dsh-imit-spin{to{transform:rotate(360deg);}}",
+				".dsh-imit-overlay{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;",
+				"justify-content:center;padding:24px;background:rgba(0,0,0,0.42);}",
+				".dsh-imit-dialog{width:min(460px,100%);padding:18px 20px;border-radius:10px;display:flex;",
+				"flex-direction:column;gap:12px;background:var(--dsw-alias-bg-overlay,#fff);",
+				"border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,0.35));",
+				"box-shadow:0 12px 32px rgba(0,0,0,0.28);}",
+				".dsh-imit-dialog h3{margin:0;font-size:14px;color:var(--dsw-alias-label-primary,inherit);}",
+				".dsh-imit-dialog p{margin:0;font-size:12.5px;line-height:1.6;",
+				"color:var(--dsw-alias-label-secondary,rgba(90,90,90,0.95));}",
+				".dsh-imit-actions{display:flex;justify-content:flex-end;gap:8px;}",
+				".dsh-imit-actions button{font:inherit;font-size:12.5px;padding:5px 14px;border-radius:6px;cursor:pointer;}",
+				".dsh-imit-cancel{border:1px solid var(--dsw-alias-border-l1,rgba(128,128,128,0.3));",
+				"background:transparent;color:var(--dsw-alias-label-primary,inherit);}",
+				".dsh-imit-confirm{border:1px solid transparent;color:#fff;",
+				"background:var(--dsw-alias-brand-primary,#4a7dff);}"
+			].join("");
+
+			ctx.effect(function() {
+				var style = document.createElement("style");
+				style.setAttribute("data-plugin", "dsh-model-input-toggle");
+				style.textContent = CSS;
+				document.head.appendChild(style);
+				return function() {
+					if (style.parentNode) style.parentNode.removeChild(style);
+				};
+			}, "dsh-model-input-toggle: stylesheet");
+
+			// ── host bridge ──────────────────────────────────────────────────
+			/**
+			 * POST one JSON request to the host half, bounded by a hard timeout.
+			 *
+			 * The timeout is not cosmetic: a host that never answers would leave
+			 * a checkbox spinning forever, which reads as "still working" rather
+			 * than "nothing is listening".
+			 */
+			function callHost(payload) {
+				return new Promise(function(resolve) {
+					var controller = typeof AbortController === "function" ? new AbortController() : undefined;
+					var settled = false;
+					var timer = setTimeout(function() {
+						if (settled) return;
+						settled = true;
+						if (controller) controller.abort();
+						resolve({ ok: false, code: "timeout", message: "连接超时，请检查 DSH 是否正常运行。" });
+					}, REQUEST_TIMEOUT_MS);
+					var finish = function(value) {
+						if (settled) return;
+						settled = true;
+						clearTimeout(timer);
+						resolve(value);
+					};
+					try {
+						fetch(API_URL, {
+							method: "POST",
+							headers: { "content-type": "application/json" },
+							body: JSON.stringify(payload),
+							...(controller === undefined ? {} : { signal: controller.signal })
+						}).then(function(response) {
+							return response.json().then(function(body) {
+								return { status: response.status, body: body };
+							}, function() {
+								return { status: response.status, body: undefined };
+							});
+						}).then(function(result) {
+							var body = result.body;
+							if (body !== null && typeof body === "object" && typeof body.ok === "boolean") {
+								finish(body);
+								return;
+							}
+							finish({
+								ok: false,
+								code: "bad-reply",
+								message: "DSH 返回了无法解析的响应（HTTP " + result.status + "）。"
+							});
+						}, function(error) {
+							if (error && error.name === "AbortError") return; // the timeout settles it
+							finish({
+								ok: false,
+								code: "network",
+								message: "无法连接 DSH 主机：" + String((error && error.message) || error)
+							});
+						});
+					} catch (error) {
+						finish({
+							ok: false,
+							code: "network",
+							message: "无法连接 DSH 主机：" + String((error && error.message) || error)
+						});
+					}
+				});
+			}
+
+			// ── shared inventory store ───────────────────────────────────────
+			// Every provider card renders its own cell, so a naive per-cell fetch
+			// would issue one full inventory request per card. One shared store
+			// keeps that to a single request and lets a write refresh every card.
+			var store = {
+				providers: null,
+				error: null,
+				loading: false,
+				inflight: null,
+				listeners: new Set()
+			};
+
+			function notify() {
+				store.listeners.forEach(function(listener) {
+					try {
+						listener();
+					} catch (error) {
+						console.error("[dsh-model-input-toggle] listener failed", error);
+					}
+				});
+			}
+
+			/** Fetch the inventory once; concurrent callers share one request. */
+			function loadInventory(force) {
+				if (store.inflight !== null && !force) return store.inflight;
+				store.loading = true;
+				notify();
+				var request = callHost({ method: "list" }).then(function(reply) {
+					store.loading = false;
+					if (store.inflight === request) store.inflight = null;
+					if (reply.ok === true) {
+						store.providers = Array.isArray(reply.providers) ? reply.providers : [];
+						store.error = null;
+					} else {
+						store.error = reply.message || "无法读取模型配置。";
+					}
+					notify();
+					return reply;
+				});
+				store.inflight = request;
+				return request;
+			}
+
+			function useInventory() {
+				var state = React.useState(0);
+				var bump = state[1];
+				React.useEffect(function() {
+					var listener = function() {
+						bump(function(n) {
+							return n + 1;
+						});
+					};
+					store.listeners.add(listener);
+					if (store.providers === null && store.inflight === null) loadInventory(false);
+					return function() {
+						store.listeners.delete(listener);
+					};
+				}, []);
+				return { providers: store.providers, error: store.error, loading: store.loading };
+			}
+
+			// ── confirmation dialog ──────────────────────────────────────────
+			/** Whether the one-time risk acknowledgement has been given. */
+			function isAcknowledged() {
+				try {
+					return window.localStorage.getItem(CONFIRM_KEY) === "1";
+				} catch {
+					return false;
+				}
+			}
+
+			/** Remember the acknowledgement; a blocked store simply re-prompts. */
+			function acknowledge() {
+				try {
+					window.localStorage.setItem(CONFIRM_KEY, "1");
+				} catch {
+					// storage unavailable (private mode): the dialog reappears, which
+					// is the safe direction for a warning.
+				}
+			}
+
+			/**
+			 * The first-enable warning. Reused for every model, because the risk it
+			 * describes is a property of the declaration itself, not of one model.
+			 */
+			function ConfirmDialog(props) {
+				React.useEffect(function() {
+					var onKey = function(event) {
+						if (event.key === "Escape") props.onCancel();
+					};
+					document.addEventListener("keydown", onKey);
+					return function() {
+						document.removeEventListener("keydown", onKey);
+					};
+				}, []);
+				return React.createElement(
+					"div",
+					{
+						className: "dsh-imit-overlay",
+						role: "presentation",
+						onClick: function(event) {
+							if (event.target === event.currentTarget) props.onCancel();
+						}
+					},
+					React.createElement(
+						"div",
+						{
+							className: "dsh-imit-dialog",
+							role: "alertdialog",
+							"aria-modal": "true",
+							"aria-label": "开启图片输入确认"
+						},
+						React.createElement("h3", null, "开启图片输入声明"),
+						React.createElement("p", null, CONFIRM_TEXT),
+						React.createElement(
+							"div",
+							{ className: "dsh-imit-actions" },
+							React.createElement(
+								"button",
+								{ type: "button", className: "dsh-imit-cancel", onClick: props.onCancel },
+								"取消"
+							),
+							React.createElement(
+								"button",
+								{ type: "button", className: "dsh-imit-confirm", onClick: props.onConfirm },
+								"确认开启"
+							)
+						)
+					)
+				);
+			}
+
+			// ── one model row ────────────────────────────────────────────────
+			/**
+			 * One model's image-input control.
+			 *
+			 * The checkbox is optimistic: it flips immediately, then rolls back if
+			 * the host refuses. That keeps a fast local write from feeling laggy
+			 * while guaranteeing the displayed state matches what was persisted.
+			 */
+			function ModelRow(props) {
+				var model = props.model;
+				var provider = props.provider;
+				var namespace = props.namespace;
+				var disabledByLock = model.locked === true;
+				var fromModel = Array.isArray(model.effective) && model.effective.indexOf("image") >= 0;
+
+				// `override` is the row's optimistic local truth: while it is set it
+				// wins over the inventory, which is what prevents the freshly written
+				// value from flickering back to the stale inventory value between the
+				// write landing and the inventory refresh arriving. It is cleared the
+				// moment the inventory agrees, so the adapter stays the authority.
+				var overrideState = React.useState(null);
+				var override = overrideState[0];
+				var setOverride = overrideState[1];
+				var checked = override === null ? fromModel : override;
+				var phaseState = React.useState("idle");
+				var phase = phaseState[0];
+				var setPhase = phaseState[1];
+				var noteState = React.useState("");
+				var note = noteState[0];
+				var setNote = noteState[1];
+				var verifyState = React.useState(null);
+				var verify = verifyState[0];
+				var setVerify = verifyState[1];
+				var confirmState = React.useState(false);
+				var confirming = confirmState[0];
+				var setConfirming = confirmState[1];
+
+				// Hand authority back to the inventory once it reflects the write.
+				React.useEffect(function() {
+					if (override !== null && fromModel === override) setOverride(null);
+				}, [fromModel, override]);
+
+				// Retire transient markers so the row returns to a resting state.
+				React.useEffect(function() {
+					if (phase !== "ok" && phase !== "error") return;
+					var timer = setTimeout(function() {
+						setPhase("idle");
+						setNote("");
+					}, FEEDBACK_MS);
+					return function() {
+						clearTimeout(timer);
+					};
+				}, [phase]);
+
+				function commit(next) {
+					var previous = checked;
+					setOverride(next);
+					setPhase("saving");
+					setNote("");
+					setVerify(null);
+					callHost({
+						method: "set",
+						namespace: namespace,
+						provider: provider,
+						modelId: model.id,
+						supportsImage: next
+					}).then(function(reply) {
+						if (reply.ok === true) {
+							setPhase("ok");
+							// The adapter is the authority: report what it resolved to,
+							// and correct the box if it disagrees with the request.
+							var declared = Array.isArray(reply.declared) ? reply.declared : null;
+							if (declared !== null) {
+								var effective = declared.indexOf("image") >= 0;
+								setOverride(effective);
+								if (effective !== next) {
+									setPhase("error");
+									setNote(
+										"配置已写入，但适配器回报该模型的可输入模态为 ["
+										+ declared.join(", ") + "]，与请求不一致。"
+									);
+									loadInventory(true);
+									return;
+								}
+							}
+							setNote(reply.verified === false && reply.verifiedReason
+								? "已保存。" + reply.verifiedReason
+								: "已保存");
+							loadInventory(true);
+						} else {
+							// Rollback is the whole point of tracking `previous`.
+							setOverride(previous);
+							setPhase("error");
+							setNote(reply.message || "写入失败。");
+						}
+					});
+				}
+
+				function onToggle(event) {
+					var next = event.target.checked;
+					// Forgetting the acknowledgement is not a state this UI invents:
+					// enabling always warns once, disabling never needs to.
+					if (next && !isAcknowledged()) {
+						setConfirming(true);
+						return;
+					}
+					commit(next);
+				}
+
+				function onVerify() {
+					setVerify({ phase: "running" });
+					callHost({
+						method: "verify",
+						namespace: namespace,
+						provider: provider,
+						modelId: model.id
+					}).then(function(reply) {
+						if (reply.ok === true && reply.verdict === "supported") {
+							setVerify({ phase: "supported", message: reply.message });
+						} else if (reply.ok === true && reply.verdict === "rejected") {
+							setVerify({ phase: "rejected", message: reply.message });
+						} else if (reply.verdict === "inconclusive") {
+							// The endpoint refused the request itself, so the image was
+							// never actually judged. Saying "does not support images"
+							// here would be a false accusation.
+							setVerify({ phase: "inconclusive", message: reply.message });
+						} else {
+							setVerify({ phase: "failed", message: reply.message || "验证失败。" });
+						}
+					});
+				}
+
+				var busy = phase === "saving";
+				var rowDisabled = busy || disabledByLock;
+				var feedback;
+				if (busy) {
+					feedback = React.createElement(
+						"span",
+						{ className: "dsh-imit-hint", role: "status" },
+						React.createElement("span", { className: "dsh-imit-spin", "aria-hidden": "true" }),
+						" 正在写入…"
+					);
+				} else if (phase === "ok") {
+					feedback = React.createElement("span", { className: "dsh-imit-ok", role: "status" }, "✓ ", note);
+				} else if (phase === "error") {
+					feedback = React.createElement("span", { className: "dsh-imit-err", role: "alert" }, "✕ ", note);
+				} else if (disabledByLock) {
+					feedback = React.createElement("span", { className: "dsh-imit-locked" }, "该模型由官方目录声明");
+				} else {
+					feedback = null;
+				}
+
+				var verifyNode = null;
+				if (verify !== null) {
+					if (verify.phase === "running") {
+						verifyNode = React.createElement(
+							"span",
+							{ className: "dsh-imit-hint", role: "status" },
+							React.createElement("span", { className: "dsh-imit-spin", "aria-hidden": "true" }),
+							" 正在向端点发送测试图片…"
+						);
+					} else if (verify.phase === "supported") {
+						verifyNode = React.createElement("span", { className: "dsh-imit-ok", role: "status" }, "✓ ", verify.message);
+					} else if (verify.phase === "rejected") {
+						verifyNode = React.createElement("span", { className: "dsh-imit-err", role: "alert" }, "✕ ", verify.message);
+					} else if (verify.phase === "inconclusive") {
+						// Amber, not red: this is "could not tell", not "does not work".
+						verifyNode = React.createElement("span", { className: "dsh-imit-warn", role: "status" }, "? ", verify.message);
+					} else {
+						verifyNode = React.createElement("span", { className: "dsh-imit-warn", role: "alert" }, "! ", verify.message);
+					}
+				}
+
+				return React.createElement(
+					"div",
+					{ style: { display: "flex", flexDirection: "column", gap: "4px" } },
+					React.createElement(
+						"div",
+						{ className: "dsh-imit-row" },
+						React.createElement(
+							"label",
+							{
+								className: "dsh-imit-label",
+								title: disabledByLock
+									? "该模型的可输入模态由官方目录声明，无需也无法在此修改。"
+									: TOOLTIP,
+								"data-disabled": rowDisabled ? "1" : "0"
+							},
+							React.createElement("input", {
+								type: "checkbox",
+								className: "dsh-imit-cb",
+								checked: checked,
+								disabled: rowDisabled,
+								"aria-label": model.id + " 支持图片输入",
+								onChange: onToggle
+							}),
+							React.createElement("span", null, model.name || model.id),
+							model.name && model.name !== model.id
+								? React.createElement("span", { className: "dsh-imit-id" }, model.id)
+								: null
+						),
+						React.createElement(
+							"button",
+							{
+								type: "button",
+								className: "dsh-imit-btn",
+								title: "向该端点发送一条带 image_url 的测试请求，验证它是否真的接受图片。",
+								disabled: verify !== null && verify.phase === "running",
+								onClick: onVerify
+							},
+							"验证端点"
+						),
+						feedback
+					),
+					verifyNode === null ? null : React.createElement("div", { className: "dsh-imit-row" }, verifyNode),
+					confirming
+						? React.createElement(ConfirmDialog, {
+							onCancel: function() {
+								setConfirming(false);
+							},
+							onConfirm: function() {
+								setConfirming(false);
+								acknowledge();
+								commit(true);
+							}
+						})
+						: null
+				);
+			}
+
+			// ── provider panel ───────────────────────────────────────────────
+			/**
+			 * The panel rendered in one provider card.
+			 *
+			 * Two independent gates decide whether anything appears:
+			 *  - the card must carry a settings namespace this plugin supports
+			 *    (a route with no namespace has no configuration to extend), and
+			 *  - the provider must actually be configured (a not-yet-saved draft
+			 *    card has no persisted route to write to).
+			 */
+			function ProviderPanel(props) {
+				var entry = props.provider || {};
+				var namespace = typeof entry.settingsNs === "string" ? entry.settingsNs : "";
+				var route = typeof entry.provider === "string" ? entry.provider : "";
+				var inventory = useInventory();
+				// Collapsed unless the user opens it. Not persisted on purpose: a
+				// fresh page load should present the quiet view again.
+				var expandedState = React.useState(false);
+				var expanded = expandedState[0];
+				var setExpanded = expandedState[1];
+
+				if (SUPPORTED[namespace] !== true || route.length === 0) return null;
+				if (props.configured === false) return null;
+
+				/**
+				 * The one-line header. Always rendered, so the section is
+				 * discoverable without occupying space. `summary` carries the count
+				 * so a collapsed card still reports whether anything is enabled.
+				 * Any further arguments are rendered beneath the header line.
+				 */
+				function header(summary) {
+					var body = Array.prototype.slice.call(arguments, 1);
+					return React.createElement(
+						"div",
+						{ className: "dsh-imit-panel", "data-expanded": expanded ? "1" : "0" },
+						React.createElement(
+							"button",
+							{
+								type: "button",
+								className: "dsh-imit-toggle",
+								"aria-expanded": expanded ? "true" : "false",
+								onClick: function() {
+									setExpanded(!expanded);
+								}
+							},
+							React.createElement(
+								"span",
+								{ className: "dsh-imit-chevron", "data-open": expanded ? "1" : "0", "aria-hidden": "true" },
+								"▶"
+							),
+							React.createElement("span", { className: "dsh-imit-title" }, "图片输入"),
+							summary === null ? null : React.createElement("span", { className: "dsh-imit-count" }, summary)
+						),
+						body
+					);
+				}
+
+				if (inventory.error !== null) {
+					return header(
+						null,
+						React.createElement(
+							"div",
+							{ className: "dsh-imit-row" },
+							React.createElement("span", { className: "dsh-imit-err", role: "alert" }, inventory.error),
+							React.createElement(
+								"button",
+								{
+									type: "button",
+									className: "dsh-imit-btn",
+									onClick: function() {
+										loadInventory(true);
+									}
+								},
+								"重试"
+							)
+						)
+					);
+				}
+
+				var provider = null;
+				var list = inventory.providers || [];
+				for (var i = 0; i < list.length; i++) {
+					// Match on namespace AND route: the same route id can exist under
+					// different adapters, and each has its own config entry.
+					if (list[i].namespace === namespace && list[i].provider === route) {
+						provider = list[i];
+						break;
+					}
+				}
+
+				if (provider === null) {
+					if (inventory.loading || inventory.providers === null) {
+						return header(
+							null,
+							React.createElement(
+								"div",
+								{ className: "dsh-imit-hint", role: "status" },
+								React.createElement("span", { className: "dsh-imit-spin", "aria-hidden": "true" }),
+								" 正在读取模型配置…"
+							)
+						);
+					}
+					// No models resolved for this route: nothing meaningful to toggle.
+					return null;
+				}
+
+				if (provider.models.length === 0) return null;
+
+				// The collapsed summary: how many of this route's models accept
+				// images, and how many are locked to the installed catalog.
+				var enabled = 0;
+				var locked = 0;
+				provider.models.forEach(function(model) {
+					if (Array.isArray(model.effective) && model.effective.indexOf("image") >= 0) enabled += 1;
+					if (model.locked === true) locked += 1;
+				});
+				var summary = enabled === 0
+					? "全部仅文本"
+					: enabled + "/" + provider.models.length + " 已开启";
+				if (locked > 0) summary += " · " + locked + " 项由官方目录声明";
+
+				if (!expanded) return header(summary, null);
+
+				return header(
+					summary,
+					React.createElement(
+						"div",
+						{ className: "dsh-imit-hint" },
+						"勾选即刻写入配置，无需保存。注意：这里只是声明模型可接收图片，"
+						+ "DSH 因此不再拦截图片消息；若端点实际不支持图片，请求会返回 400。"
+						+ "请用「验证端点」确认实际能力。"
+					),
+					React.createElement(
+						"div",
+						{ style: { display: "flex", flexDirection: "column", gap: "6px" } },
+						provider.models.map(function(model) {
+							return React.createElement(ModelRow, {
+								key: model.id,
+								model: model,
+								provider: provider.provider,
+								namespace: namespace
+							});
+						})
+					)
+				);
+			}
+
+			// ── registration ─────────────────────────────────────────────────
+			// One cell per supported namespace. The key is the settings namespace
+			// because that is exactly what the owner dispatches, so a pi-ai route
+			// and the DeepSeek route are served by different cells and can never
+			// collide on a single card.
+			Object.keys(SUPPORTED).forEach(function(namespace) {
+				ctx.slots.inject("settings.models.provider-card", function() {
+					return ctx.slots.register(
+						{ name: "settings.models.provider-card", key: namespace },
+						ProviderPanel
+					);
+				});
+			});
+		};
+
+		return module.exports;
+	}
+});