@fonlan/dsh-model-router 0.3.6 → 0.3.8

package/lib/client.js

@@ -4,9 +4,32 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		//#region \0rolldown/runtime.js
+		var __create = Object.create;
+		var __defProp = Object.defineProperty;
+		var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+		var __getOwnPropNames = Object.getOwnPropertyNames;
+		var __getProtoOf = Object.getPrototypeOf;
+		var __hasOwnProp = Object.prototype.hasOwnProperty;
+		var __copyProps = (to, from, except, desc) => {
+			if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+				key = keys[i];
+				if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+			return to;
+		};
+		var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+			value: mod,
+			enumerable: true
+		}) : target, mod));
+		//#endregion
 		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+		_deepseek_ai_dsh_client_ui_primitives = __toESM(_deepseek_ai_dsh_client_ui_primitives, 1);
 		//#region src/client/locales.ts
 		const LOCALE_NS = "model-router";
 		const zh = {
@@ -172,14 +195,14 @@ window.__ModuleLoader__.load({
 		* page draws its own static header (title plus a one-line summary) over the
 		* router controls: every routed model with its providers, their order and the
 		* provider the model currently routes to. All reads/mutations go through the
-		* plugin's fenced API; the server persists through the `model-router` settings
-		* namespace, so a switch here is live for the next request globally.
+		* plugin's fenced API; the server persists into this plugin's loader-entry
+		* config (dsh >= 0.1.7), so a switch here is live for the next request
+		* globally.
 		*
-		* The bound settings scope (the same `model-router` namespace the host half
-		* registers) supplies the page's dispatch state: while the namespace is merely
-		* loading the page stays mounted, and when it is unavailable (deployment
-		* without the host half) nothing renders. A read-only deployment shows the
-		* banner and disables the mutation controls.
+		* The page needs no settings service: whether the deployment can persist is
+		* reported by the API itself (`state.writable`), so the page registers and
+		* mounts everywhere the host half serves its API. A read-only deployment
+		* shows the banner and disables the mutation controls.
 		*/
 		function arrayMove(list, from, to) {
 			const next = [...list];
@@ -212,9 +235,7 @@ window.__ModuleLoader__.load({
 					return (key) => key;
 				}
 			})();
-			return function ModelRouterSettingsSection(props) {
-				const { scope } = props;
-				const snapshot = (0, react.useSyncExternalStore)((listener) => scope.subscribe(listener), () => scope.getSnapshot());
+			return function ModelRouterSettingsSection() {
 				useLocaleRevision(ctx);
 				const [state, setState] = (0, react.useState)(null);
 				const [error, setError] = (0, react.useState)(null);
@@ -228,7 +249,8 @@ window.__ModuleLoader__.load({
 				const load = (0, react.useCallback)(async () => {
 					setLoading(true);
 					try {
-						setState(await api.state());
+						const next = await api.state();
+						setState(next);
 						setError(null);
 					} catch (cause) {
 						setError(cause instanceof Error ? cause.message : String(cause));
@@ -362,8 +384,7 @@ window.__ModuleLoader__.load({
 						setSortBusy(false);
 					}
 				}, [state, t]);
-				if (snapshot.status === "unavailable") return null;
-				const writable = snapshot.writable;
+				const writable = state?.writable ?? true;
 				const models = (0, react.useMemo)(() => state?.models ?? [], [state]);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "mr-page",
@@ -378,7 +399,7 @@ window.__ModuleLoader__.load({
 						})]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "mr-body",
-						children: [!writable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						children: [!loading && state !== null && !writable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							className: "mr-settings-readonly",
 							role: "status",
 							children: t("readOnly")
@@ -664,6 +685,84 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/icons.tsx
+		/** The runtime export table, read by capability instead of by one hard-coded name. */
+		const table = _deepseek_ai_dsh_client_ui_primitives;
+		/** First name the runtime actually provides (a missing export is `undefined`). */
+		function firstDefined(...names) {
+			for (const name of names) {
+				let candidate;
+				try {
+					candidate = table[name];
+				} catch {
+					continue;
+				}
+				if (typeof candidate === "function") return candidate;
+			}
+		}
+		/** One-path stroked glyph fallback (16×16 viewBox — the 0.1.7 artwork). */
+		function glyph(path, defaultSize) {
+			return function Glyph({ size = defaultSize, className }) {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					width: size,
+					height: size,
+					className,
+					viewBox: "0 0 16 16",
+					fill: "none",
+					xmlns: "http://www.w3.org/2000/svg",
+					"aria-hidden": "true",
+					strokeWidth: 1,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: path,
+						stroke: "currentColor"
+					})
+				});
+			};
+		}
+		/** Warning circle fallback (the 0.1.7 artwork: ring, stem, dot). */
+		function WarningFallback({ size = 16, className }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				width: size,
+				height: size,
+				className,
+				viewBox: "0 0 16 16",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				"aria-hidden": "true",
+				strokeWidth: 1,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: "M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z",
+						stroke: "currentColor"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: "M8 4.29199V9.79199",
+						stroke: "currentColor"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: "M8 10.708V11.708",
+						stroke: "currentColor"
+					})
+				]
+			});
+		}
+		/**
+		* Shell icons used by the model seat.
+		*
+		* DSH 0.1.7 renamed every size-suffixed icon export (`IconCheckOutline16`,
+		* `IconChevronDownOutline14`, …) into stroke-weight variants (`…OutlineRegular`
+		* 1px / `…OutlineMedium` 1.3px). A stale named import resolves to `undefined`
+		* and React then throws "Element type is invalid" while rendering the slot
+		* entry — the whole seat is dropped from the conversation input instead of
+		* degrading (this is exactly what the 0.1.7 upgrade did to this plugin).
+		* Resolve the names at runtime, newest first, so the next rename lands on
+		* another shipped variant or on the inlined artwork below.
+		*/
+		const CheckIcon = firstDefined("IconCheckOutlineRegular", "IconCheckOutlineMedium", "IconCheckOutline16") ?? glyph("M2.25 8.5L5.49732 11.7473C5.90519 12.1552 6.57263 12.1344 6.95426 11.7018L13.75 4", 16);
+		const ChevronDownIcon = firstDefined("IconChevronDownOutlineRegular", "IconChevronDownOutlineMedium", "IconChevronDownOutline14") ?? glyph("M4 6L7.29289 9.29289C7.68342 9.68342 8.31658 9.68342 8.70711 9.29289L12 6", 14);
+		const ChevronRightIcon = firstDefined("IconChevronRightOutlineRegular", "IconChevronRightOutlineMedium", "IconChevronRightOutline14") ?? glyph("M6 12L9.29289 8.70711C9.68342 8.31658 9.68342 7.68342 9.29289 7.29289L6 4", 14);
+		const WarningIcon = firstDefined("IconWarningOutlineRegular", "IconWarningOutlineMedium", "IconWarningOutline16") ?? WarningFallback;
+		//#endregion
 		//#region \0dsh-css:/home/runner/work/dsh-model-router/dsh-model-router/src/client/model-seat.css.mjs
 		const css = "/*\n * Composer model seat (shadows the host ModelSelect). Styles mirror the host\n * ModelSelect.module.css exactly (same tokens, sizes and spacing) so the\n * replacement is visually indistinguishable, plus the provider pane's title\n * and hint rows.\n */\n\n.mr-seat-root {\n  min-width: 0;\n  position: relative;\n}\n\n.mr-seat-trigger {\n  min-width: 0;\n  max-width: 220px;\n  height: 28px;\n  color: var(--dsw-alias-label-secondary);\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  border-radius: 24px;\n  outline: none;\n  align-items: center;\n  gap: 4px;\n  padding: 0 4px 0 8px;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 20px;\n  display: flex;\n}\n\n.mr-seat-trigger:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover);\n}\n\n.mr-seat-trigger:focus-visible {\n  box-shadow: 0 0 0 2px var(--dsw-alias-border-l3);\n}\n\n.mr-seat-trigger:disabled {\n  color: var(--dsw-alias-label-dimmed);\n  cursor: default;\n}\n\n.mr-seat-triggerLabel {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.mr-seat-triggerEffort {\n  color: var(--dsw-alias-label-caption);\n  flex: none;\n}\n\n.mr-seat-chevron {\n  color: var(--dsw-alias-label-caption);\n  flex: none;\n  transition: transform 0.12s;\n}\n\n.mr-seat-chevronOpen {\n  transform: rotate(180deg);\n}\n\n.mr-seat-menu {\n  z-index: 20;\n  border: 1px solid var(--dsw-alias-border-inverted);\n  background: var(--dsw-specific-menu);\n  width: min(240px, 100vw - 32px);\n  max-height: min(360px, 100vh - 96px);\n  box-shadow: var(--dsw-shadow-lv3);\n  color: var(--dsw-alias-label-primary);\n  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);\n  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);\n  border-radius: 12px;\n  flex-direction: column;\n  padding: 4px;\n  display: flex;\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  overflow: hidden;\n}\n\n.mr-seat-status,\n.mr-seat-empty {\n  color: var(--dsw-alias-label-tertiary);\n  padding: 10px;\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.mr-seat-error,\n.mr-seat-warning {\n  background: var(--dsw-alias-interactive-bg-hover-danger);\n  color: var(--dsw-alias-state-error-primary);\n  border-radius: 8px;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 8px;\n  margin-bottom: 4px;\n  padding: 7px 8px;\n  font-size: 12px;\n  line-height: 18px;\n  display: flex;\n}\n\n.mr-seat-warning {\n  background: var(--dsw-alias-bg-module-platform);\n  color: var(--dsw-alias-state-warn-label);\n}\n\n.mr-seat-retry {\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  flex: none;\n  padding: 0;\n  font-weight: 600;\n}\n\n.mr-seat-groups {\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.mr-seat-group + .mr-seat-group {\n  margin-top: 4px;\n}\n\n.mr-seat-groupTitle {\n  z-index: 1;\n  background: var(--dsw-specific-menu);\n  color: var(--dsw-alias-label-tertiary);\n  padding: 5px 8px 3px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 18px;\n  position: sticky;\n  top: 0;\n}\n\n/* Provider pane: non-sticky title row above the provider list. */\n.mr-seat-title {\n  color: var(--dsw-alias-label-tertiary);\n  padding: 5px 8px 3px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 18px;\n}\n\n.mr-seat-option {\n  width: 100%;\n  min-height: 38px;\n  color: inherit;\n  text-align: left;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  border-radius: 10px;\n  outline: none;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  display: flex;\n}\n\n.mr-seat-option:hover:not(:disabled),\n.mr-seat-option:focus-visible {\n  background: var(--dsw-alias-interactive-bg-hover);\n}\n\n.mr-seat-selected {\n  background: transparent;\n}\n\n.mr-seat-option:disabled {\n  color: var(--dsw-alias-label-dimmed);\n  cursor: default;\n}\n\n.mr-seat-optionCopy {\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  display: flex;\n}\n\n.mr-seat-modelName {\n  color: inherit;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  overflow: hidden;\n}\n\n.mr-seat-description {\n  color: var(--dsw-alias-label-tertiary);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 12px;\n  line-height: 18px;\n  overflow: hidden;\n}\n\n.mr-seat-check {\n  color: var(--dsw-alias-label-primary);\n  flex: 0 0 18px;\n  place-items: center;\n  display: grid;\n}\n\n.mr-seat-cell {\n  width: 100%;\n  height: 40px;\n  color: var(--dsw-alias-label-primary);\n  cursor: pointer;\n  text-align: left;\n  background: transparent;\n  border: none;\n  border-radius: 10px;\n  align-items: center;\n  gap: 8px;\n  padding: 0 10px;\n  font-size: 14px;\n  line-height: 22px;\n  display: flex;\n}\n\n.mr-seat-cell:hover {\n  background: var(--dsw-alias-interactive-bg-hover);\n}\n\n.mr-seat-cellLabel {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: auto;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.mr-seat-cellValue {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  color: var(--dsw-alias-label-tertiary);\n  flex: 0 auto;\n  overflow: hidden;\n}\n\n.mr-seat-cellChevron {\n  color: var(--dsw-alias-label-tertiary);\n  flex: none;\n}\n\n/* Global hint footer of the provider pane. */\n.mr-seat-hint {\n  color: var(--dsw-alias-label-tertiary);\n  padding: 5px 8px 3px;\n  font-size: 12px;\n  line-height: 18px;\n  border-top: 1px solid var(--dsw-alias-border-l2);\n  margin-top: 4px;\n}\n\n/*\n * Mobile portrait: the composer row is an inline-size container. With the\n * quick route switcher gone from the right tool row, let the model seat\n * absorb the remaining row width (same rule the old switcher enforced).\n * The breakpoint matches DSH's own narrow-composer rule (<=460px).\n */\n@container (width <= 460px) {\n  [data-slot=\"conversation.input.model\"] > * {\n    flex: 1 1 0;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  [data-slot=\"conversation.input.model\"] [aria-haspopup=\"menu\"] {\n    width: 100%;\n    max-width: 100%;\n  }\n}\n";
 		const tagId = "@fonlan/dsh-model-router/model-seat.css";
@@ -942,7 +1041,7 @@ window.__ModuleLoader__.load({
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: `mr-seat-chevron${open ? " mr-seat-chevronOpen" : ""}`,
 								"aria-hidden": true,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutline14, {})
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, {})
 							})
 						]
 					}),
@@ -972,7 +1071,7 @@ window.__ModuleLoader__.load({
 										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: "mr-seat-cellChevron",
 											"aria-hidden": true,
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutline14, {})
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRightIcon, {})
 										})
 									]
 								}),
@@ -994,7 +1093,7 @@ window.__ModuleLoader__.load({
 										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: "mr-seat-cellChevron",
 											"aria-hidden": true,
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutline14, {})
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRightIcon, {})
 										})
 									]
 								}),
@@ -1016,7 +1115,7 @@ window.__ModuleLoader__.load({
 										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: "mr-seat-cellChevron",
 											"aria-hidden": true,
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutline14, {})
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRightIcon, {})
 										})
 									]
 								})
@@ -1085,7 +1184,7 @@ window.__ModuleLoader__.load({
 													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 														className: "mr-seat-check",
 														"aria-hidden": true,
-														children: selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCheckOutline16, {}) : null
+														children: selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {}) : null
 													})]
 												}, model.id);
 											})]
@@ -1140,7 +1239,7 @@ window.__ModuleLoader__.load({
 											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 												className: "mr-seat-check",
 												"aria-hidden": true,
-												children: selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCheckOutline16, {}) : null
+												children: selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {}) : null
 											})]
 										}, provider.id);
 									})
@@ -1181,26 +1280,33 @@ window.__ModuleLoader__.load({
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "mr-seat-check",
 									"aria-hidden": true,
-									children: effectiveEffort === level.effort ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCheckOutline16, {}) : null
+									children: effectiveEffort === level.effort ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {}) : null
 								})]
 							}, level.key))] })
 						]
 					}),
 					toast !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Toast, {
 						text: toast.text,
-						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconWarningOutline16, {}),
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WarningIcon, {}),
 						anchor: rootRef.current?.closest("[data-composer-card]") ?? null,
 						onDone: () => setToast(null)
 					}, toast.seq)
 				]
 			});
 		}
+		/**
+		* Idle directory snapshot for the inert seat face. Mirrors the shape the
+		* official `ModelDirectory` store starts from, including `pending` (the
+		* selection an in-flight `select` submitted; null when none) — required by
+		* `ModelDirectoryState` and present in both 0.1.x and 0.2.x.
+		*/
 		const EMPTY_DIRECTORY_STATE = {
 			current: null,
 			routable: null,
 			groups: [],
 			failures: [],
 			status: "idle",
+			pending: null,
 			error: null
 		};
 		/**
@@ -1279,8 +1385,6 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/index.tsx
-		/** The settings namespace this page edits (must match the host half). */
-		const ROUTER_NS = "model-router";
 		/** The settings sidebar entry this page owns (must stay stable). */
 		const SECTION_ID = "model-router";
 		/** Services required before mounting (provided by the client runtime).
@@ -1292,7 +1396,6 @@ window.__ModuleLoader__.load({
 			"locale",
 			"modelDirectories",
 			"sessions",
-			"settingsScope",
 			"connection",
 			"remote",
 			"remote.session"
@@ -1308,15 +1411,13 @@ window.__ModuleLoader__.load({
 			}, "model-router: dictionaries");
 			const t = ctx.locale.bind(LOCALE_NS);
 			const SettingsSection = makeSettingsSection(ctx);
-			const services = ctx;
-			const scope = services.settingsScope.bind({ namespace: ROUTER_NS });
-			services.slots.inject("settings.section", () => services.slots.register({
+			const slots = ctx.slots;
+			slots.inject("settings.section", () => slots.register({
 				name: "settings.section",
 				id: SECTION_ID,
 				order: 300,
 				label: () => t("settingsTitle"),
-				locale: LOCALE_NS,
-				inject: () => ({ scope })
+				locale: LOCALE_NS
 			}, SettingsSection));
 			registerModelRouterSeat(ctx);
 		}