dsh-connect-qoder 0.1.0

package/lib/client.js

@@ -0,0 +1,992 @@
+window.__ModuleLoader__.load({
+	id: "dsh-connect-qoder",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react = require("react");
+		let react_jsx_runtime = require("react/jsx-runtime");
+
+		//#region src/client/paths.ts
+		/** Plugin-owned read-only model route the card renders its rows from. */
+		const QODER_MODELS_PATH = "/plugins/dsh-connect-qoder/models";
+		/** Plugin-owned read-only usage route the panel renders its quotas from. */
+		const QODER_USAGE_PATH = "/plugins/dsh-connect-qoder/usage";
+		//#endregion
+
+		//#region src/client/styles.ts
+		/**
+		 * Card styles, injected once into the page head.
+		 *
+		 * The card reuses the host's own card classes (`dsm-plugin-card` and its
+		 * header/body parts) so it sits in the settings list exactly like the
+		 * cards the desktop ships, and adds only the model rows it owns. Every
+		 * colour is a theme token with a literal fallback, so the card follows
+		 * the active theme instead of pinning one.
+		 */
+		const QODER_CARD_CSS = [
+			".dsm-qoder-body{padding:12px 14px;display:flex;flex-direction:column;gap:12px}",
+			".dsm-qoder-hint{margin:0;color:var(--dsw-alias-label-primary,#1a1a1a);font-size:12px;line-height:1.6}",
+			".dsm-qoder-switch{display:flex;align-items:center;gap:8px;font-size:13px}",
+			".dsm-qoder-models{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto}",
+			".dsm-qoder-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border:1px solid var(--dsw-alias-border-l2,#36373b);border-radius:8px}",
+			".dsm-qoder-row-main{display:flex;align-items:center;gap:8px;min-width:0}",
+			".dsm-qoder-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+			".dsm-qoder-badge{font-size:10px;padding:1px 6px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2,#36373b);color:var(--dsw-alias-label-primary,#1a1a1a);white-space:nowrap}",
+			".dsm-qoder-select{font-size:12px;padding:3px 6px;border-radius:6px;background:var(--dsw-alias-bg-layer-3,#202126);color:inherit;border:1px solid var(--dsw-alias-border-l2,#36373b)}",
+			".dsm-qoder-state{margin:0;font-size:12px;color:var(--dsw-alias-label-primary,#1a1a1a)}",
+			".dsm-qoder-error{margin:0;font-size:12px;color:var(--dsw-alias-state-error-primary,#d92d20)}",
+			".dsm-qoder-tabs{display:flex;gap:6px}",
+			".dsm-qoder-tab{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2,#36373b);background:transparent;color:inherit;cursor:pointer}",
+			".dsm-qoder-tab-active{background:var(--dsw-alias-bg-layer-3,#202126)}",
+			".dsm-qoder-actions{display:flex;gap:8px}",
+			".dsm-qoder-button{font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2,#36373b);background:transparent;color:inherit;cursor:pointer}",
+			".dsm-qoder-button:disabled{opacity:.5;cursor:default}",
+			// Usage panel. Mirrors the Qoder IDE's own "我的用量" card: a titled
+			// block per quota, each with a filled bar and a used/total line.
+			".dsm-qoder-usage{border:1px solid var(--dsw-alias-border-l2,#36373b);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:12px}",
+			".dsm-qoder-usage-head{display:flex;align-items:center;justify-content:space-between;gap:8px}",
+			".dsm-qoder-usage-title{margin:0;font-size:13px;font-weight:600}",
+			".dsm-qoder-usage-region{font-size:11px;color:var(--dsw-alias-label-primary,#1a1a1a)}",
+			".dsm-qoder-usage-block{display:flex;flex-direction:column;gap:6px}",
+			".dsm-qoder-usage-label{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}",
+			".dsm-qoder-usage-when{margin-left:auto;font-size:11px;color:var(--dsw-alias-label-primary,#1a1a1a);white-space:nowrap}",
+			".dsm-qoder-bar{height:6px;border-radius:999px;background:var(--dsw-alias-bg-layer-3,#202126);overflow:hidden}",
+			".dsm-qoder-bar-fill{height:100%;border-radius:999px;background:var(--dsw-alias-label-primary,#e8eaed);transition:width .3s ease}",
+			".dsm-qoder-bar-warn{background:var(--dsw-alias-state-warning-primary,#f79009)}",
+			".dsm-qoder-bar-full{background:var(--dsw-alias-state-error-primary,#d92d20)}",
+			".dsm-qoder-usage-figures{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;color:var(--dsw-alias-label-primary,#1a1a1a)}",
+			".dsm-qoder-usage-figures strong{color:inherit;font-weight:500}",
+			".dsm-qoder-usage-badge{font-size:10px;padding:1px 6px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2,#36373b);color:var(--dsw-alias-label-primary,#1a1a1a);white-space:nowrap}",
+			".dsm-qoder-usage-badge-offer{border-color:var(--dsw-alias-state-success-primary,#12b76a);color:var(--dsw-alias-state-success-primary,#12b76a)}",
+			".dsm-qoder-usage-promo{margin:0;font-size:11px;line-height:1.6;color:var(--dsw-alias-label-primary,#1a1a1a)}",
+			".dsm-qoder-usage-promo a{color:inherit}",
+			".dsm-qoder-usage-sep{height:1px;background:var(--dsw-alias-border-l2,#36373b);margin:0}",
+			".dsm-qoder-usage-spacer{flex:1}",
+			// Model row: a picker-visibility checkbox on the left, the name and its
+			// rate in the middle, the image choice on the right.
+			".dsm-qoder-pick{display:flex;align-items:center;gap:6px;flex:0 0 auto}",
+			".dsm-qoder-rate{font-size:11px;padding:1px 6px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2,#36373b);color:var(--dsw-alias-label-primary,#1a1a1a);white-space:nowrap;font-variant-numeric:tabular-nums}",
+			".dsm-qoder-rate-free{border-color:var(--dsw-alias-state-success-primary,#12b76a);color:var(--dsw-alias-state-success-primary,#12b76a)}",
+			".dsm-qoder-row-off .dsm-qoder-name{opacity:.55}",
+			".dsm-qoder-models-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}",
+			".dsm-qoder-models-head .dsm-qoder-state{margin-left:auto}",
+		].join("");
+		/** Inject the card stylesheet once per page. */
+		function installStyles() {
+			const cssId = "dsh-connect-qoder/client.css";
+			if (document.querySelector(`style[data-plugin-css="${cssId}"]`) !== null) return;
+			const styleTag = document.createElement("style");
+			styleTag.dataset.plugin = "dsh-connect-qoder";
+			styleTag.dataset.pluginCss = cssId;
+			styleTag.textContent = QODER_CARD_CSS;
+			document.head.appendChild(styleTag);
+		}
+		//#endregion
+
+		//#region src/client/copy.ts
+		/** Simplified Chinese copy. */
+		const zh = {
+			"row.title": "接入使用 Qoder 积分与模型 (dsh-connect-qoder)",
+			"row.desc": "使用本机已登录的 Qoder（国内版 / 国际版）模型；图像输入可由你逐个模型决定。",
+			"row.expand": "展开",
+			"row.collapse": "收起",
+			"row.loading": "正在读取模型目录…",
+			"row.signedOut": "该区域未检测到已登录的 Qoder 应用，因此没有模型。",
+			"row.emptyModels": "该区域暂无可用的模型。",
+			"row.imageTitle": "图像输入",
+			"row.imageHint": "「跟随目录」使用 Qoder 自己声明的视觉能力；「开启」/「关闭」强制覆盖。开启后该模型可接收图片。",
+			"row.maxWindow": "使用模型声明的最大上下文窗口",
+			"row.maxWindowHint": "关闭时使用 Qoder 客户端默认的窗口。",
+			"row.maxWindowOn": "已启用：每个模型按目录声明的最大窗口使用。",
+			"row.maxWindowOff": "已关闭：使用 Qoder 客户端默认窗口（多数模型 200K）。",
+			"row.save": "保存",
+			"row.saving": "保存中…",
+			"row.saved": "已保存",
+			"row.discard": "撤销更改",
+			"row.unsaved": "有未保存的更改",
+			"row.failed": "保存失败",
+			"row.requestFailed": "读取模型目录失败",
+			"row.imageAuto": "跟随目录",
+			"row.imageOn": "开启",
+			"row.imageOff": "关闭",
+			"row.vision": "视觉",
+			"row.textOnly": "纯文本",
+			"row.region.qoder-cn": "国内版",
+			"row.region.qoder": "国际版",
+			"usage.title": "我的用量",
+			"usage.refresh": "刷新",
+			"usage.loading": "正在读取用量…",
+			"usage.empty": "当前账户暂无可展示的用量。",
+			"usage.unavailable": "该区域暂时无法读取用量。",
+			"usage.error": "读取用量失败",
+			"usage.planCredits": "套餐内 Credits",
+			"usage.resourcePackage": "个人资源包",
+			"usage.dedicatedPackage": "专属资源包",
+			"usage.renewsOn": "将于 {date} 续订",
+			"usage.expiresOn": "将于 {date} 结束",
+			"usage.remaining": "剩余",
+			"usage.used": "已使用",
+			"usage.exceeded": "额度已用尽",
+			"usage.promotion": "限时特惠",
+			"usage.viewDetails": "查看详情",
+			"usage.credits": "Credits",
+			"row.showInPicker": "在下拉框中显示",
+			"row.showHint": "取消勾选的模型不会出现在模型选择器里。",
+			"row.enableAll": "全部显示",
+			"row.enabledCount": "已选 {count} / {total}",
+			"row.rateFree": "免费",
+			"row.rateLabel": "倍率",
+			"row.refreshModels": "刷新模型与费率",
+			"row.refreshing": "正在刷新…",
+			"row.refreshed": "已更新（{time}）",
+			"row.offPeakOn": "错峰价",
+			"row.offPeakOff": "标准价",
+			"row.offPeakUntil": "{time} 后切换",
+			"row.offPeakHint": "错峰时段 {window}（{zone}）享受折扣；倍率按当前时段显示，到点会自动变化。"
+		};
+		/** English copy. */
+		const en = {
+			"row.title": "Connect Qoder credits and models (dsh-connect-qoder)",
+			"row.desc": "Use the Qoder models already signed in on this machine (Qoder CN / Qoder); image input is decided per model.",
+			"row.expand": "Expand",
+			"row.collapse": "Collapse",
+			"row.loading": "Reading the model catalog…",
+			"row.signedOut": "No signed-in Qoder app was found for this region, so it lists no models.",
+			"row.emptyModels": "This region currently offers no models.",
+			"row.imageTitle": "Image input",
+			"row.imageHint": "\"Follow catalog\" uses Qoder's own vision flag; On/Off forces it. An enabled model accepts images.",
+			"row.maxWindow": "Use each model's largest declared context window",
+			"row.maxWindowHint": "When off, the window the Qoder client itself starts on is used.",
+			"row.maxWindowOn": "On: each model uses the largest window its catalog entry declares.",
+			"row.maxWindowOff": "Off: the Qoder client's own default window is used (200K for most models).",
+			"row.save": "Save",
+			"row.saving": "Saving…",
+			"row.saved": "Saved",
+			"row.discard": "Discard changes",
+			"row.unsaved": "Unsaved changes",
+			"row.failed": "Save failed",
+			"row.requestFailed": "Could not read the model catalog",
+			"row.imageAuto": "Follow catalog",
+			"row.imageOn": "On",
+			"row.imageOff": "Off",
+			"row.vision": "Vision",
+			"row.textOnly": "Text",
+			"row.region.qoder-cn": "Qoder CN",
+			"row.region.qoder": "Qoder",
+			"usage.title": "My usage",
+			"usage.refresh": "Refresh",
+			"usage.loading": "Reading usage…",
+			"usage.empty": "This account has no usage to show right now.",
+			"usage.unavailable": "Usage is unavailable for this region right now.",
+			"usage.error": "Could not read usage",
+			"usage.planCredits": "Plan Credits",
+			"usage.resourcePackage": "Personal resource package",
+			"usage.dedicatedPackage": "Dedicated package",
+			"usage.renewsOn": "Renews on {date}",
+			"usage.expiresOn": "Ends on {date}",
+			"usage.remaining": "remaining",
+			"usage.used": "used",
+			"usage.exceeded": "Quota exhausted",
+			"usage.promotion": "Limited offer",
+			"usage.viewDetails": "View details",
+			"usage.credits": "Credits",
+			"row.showInPicker": "Show in the model picker",
+			"row.showHint": "An unchecked model is hidden from the model picker.",
+			"row.enableAll": "Show all",
+			"row.enabledCount": "{count} of {total} selected",
+			"row.rateFree": "free",
+			"row.rateLabel": "Rate",
+			"row.refreshModels": "Refresh models and rates",
+			"row.refreshing": "Refreshing…",
+			"row.refreshed": "Updated ({time})",
+			"row.offPeakOn": "off-peak",
+			"row.offPeakOff": "standard",
+			"row.offPeakUntil": "switches in {time}",
+			"row.offPeakHint": "The off-peak discount applies {window} ({zone}); the rate shown follows the current window and changes on its own at the boundary."
+		};
+		//#endregion
+
+		/** The three per-model image choices this card writes. */
+		const IMAGE_MODES = ["auto", "on", "off"];
+
+		/** Normalise whatever the saved map holds into one of {@link IMAGE_MODES}. */
+		function imageModeOf(overrides, modelId) {
+			const saved = overrides === null || typeof overrides !== "object" ? undefined : overrides[modelId];
+			return IMAGE_MODES.includes(saved) ? saved : "auto";
+		}
+
+		/** Fill a `{date}` placeholder in a translated string. */
+		function withDate(template, at) {
+			if (typeof at !== "number" || !Number.isFinite(at) || at <= 0) return "";
+			const date = new Date(at).toLocaleDateString(undefined, { year: "numeric", month: "numeric", day: "numeric" });
+			return template.replace("{date}", date);
+		}
+
+		/**
+		 * The credit multiplier as a short label.
+		 *
+		 * A zero multiplier is a free model, which is worth naming rather than
+		 * rendering as "x0.00"; a model whose catalog entry carries no multiplier
+		 * shows nothing at all. This mirrors how the host decorates the picker
+		 * name, so the card and the picker never disagree.
+		 */
+		function rateLabelOf(t, factor) {
+			const value = Number(factor);
+			if (!Number.isFinite(value)) return undefined;
+			return value <= 0 ? t("row.rateFree") : `x${value.toFixed(2)}`;
+		}
+
+		/** Seconds past local midnight in `timezone`, or undefined when unusable. */
+		function localSecondsOf(date, timezone) {
+			try {
+				const parts = new Intl.DateTimeFormat("en-US", {
+					timeZone: timezone,
+					hour12: false,
+					hour: "2-digit",
+					minute: "2-digit",
+					second: "2-digit"
+				}).formatToParts(date);
+				const read = (type) => Number(parts.find((part) => part.type === type)?.value ?? Number.NaN);
+				const hour = read("hour") % 24;
+				const minute = read("minute");
+				const second = read("second");
+				if (![hour, minute, second].every(Number.isFinite)) return undefined;
+				return hour * 3600 + minute * 60 + second;
+			} catch {
+				return undefined;
+			}
+		}
+
+		/** Parse `HH:MM` into seconds past midnight, or undefined. */
+		function parseClock(text) {
+			const match = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(String(text ?? "").trim());
+			if (match === null) return undefined;
+			const hour = Number(match[1]);
+			const minute = Number(match[2]);
+			const second = Number(match[3] ?? 0);
+			if (hour > 23 || minute > 59 || second > 59) return undefined;
+			return hour * 3600 + minute * 60 + second;
+		}
+
+		/**
+		 * The off-peak window state for one model at a given instant.
+		 *
+		 * The window is evaluated in the browser rather than taken from the
+		 * server's answer so the card can flip the rate and tick the countdown on
+		 * its own — a rate that silently changed at 22:00 only after a manual
+		 * refresh would look broken. `end` not after `start` means the window
+		 * crosses midnight (`22:00`-`08:00` is the case Qoder uses), so the test
+		 * is a disjunction.
+		 *
+		 * @returns `{ active, remainingSeconds }`, or undefined when the model
+		 *   carries no usable window.
+		 */
+		function offPeakState(model, now) {
+			const promo = model.promotion;
+			if (promo === null || typeof promo !== "object") return undefined;
+			const start = parseClock(promo.windowStart);
+			const end = parseClock(promo.windowEnd);
+			if (start === undefined || end === undefined || start === end) return undefined;
+			const seconds = localSecondsOf(now, promo.timezone ?? "Asia/Shanghai");
+			if (seconds === undefined) return undefined;
+			const active = start < end ? seconds >= start && seconds < end : seconds >= start || seconds < end;
+			const target = active ? end : start;
+			const remainingSeconds = target >= seconds ? target - seconds : 86400 - seconds + target;
+			return { active, remainingSeconds };
+		}
+
+		/** `HH:MM:SS` from a second count, matching the Qoder client's countdown. */
+		function formatCountdown(seconds) {
+			const total = Math.max(0, Math.floor(Number(seconds) || 0));
+			const pad = (value) => String(value).padStart(2, "0");
+			return [Math.floor(total / 3600), Math.floor((total % 3600) / 60), total % 60].map(pad).join(":");
+		}
+
+		/**
+		 * The multiplier that applies at `now`.
+		 *
+		 * Mirrors the host's resolution: `priceFactor` is Qoder's *discounted*
+		 * price, and `beforePromotionPriceFactor` is what applies outside the
+		 * window — the two are related by exactly `before x discount`. Reading
+		 * `priceFactor` alone understates the cost for most of the day.
+		 */
+		function rateAt(model, now) {
+			const base = Number(model.priceFactor);
+			const promo = model.promotion;
+			if (promo === null || typeof promo !== "object") return Number.isFinite(base) ? base : undefined;
+			const before = Number(promo.beforePromotionPriceFactor);
+			const discount = Number(promo.discountFactor);
+			const state = offPeakState(model, now);
+			if (state?.active === true) {
+				if (Number.isFinite(before) && Number.isFinite(discount)) return before * discount;
+				return Number.isFinite(base) ? base : undefined;
+			}
+			if (Number.isFinite(before)) return before;
+			return Number.isFinite(base) ? base : undefined;
+		}
+
+		/**
+		 * The set of model ids currently ticked, given what the host reported.
+		 *
+		 * The host stores an empty list as "no filter" (every model shows), so the
+		 * card presents that same state as "everything ticked" — otherwise a fresh
+		 * install would render every box empty while every model was visible.
+		 */
+		function enabledIdsFor(models, saved) {
+			const list = Array.isArray(saved) ? saved.filter((id) => typeof id === "string") : [];
+			if (list.length === 0) return new Set(models.map((model) => model.id));
+			return new Set(list);
+		}
+
+		/**
+		 * One quota row: label, optional badges, an optional date, a bar, and the
+		 * used/total figures. Shared by the plan quota, the add-on package and the
+		 * per-model dedicated packages, which differ only in their wording.
+		 */
+		function QuotaBlock({ t, label, quota, when, badge }) {
+			const percentage = Math.min(1, Math.max(0, Number(quota.percentage) || 0));
+			// Round before formatting: a ratio like 268/2000 is 0.14 in binary
+			// floating point, and rendering the raw product would emit
+			// "14.000000000000002%" into the style attribute.
+			const percent = Math.round(percentage * 1000) / 10;
+			// The IDE paints the bar neutral, amber past 80%, red once exhausted;
+			// matching that keeps a nearly-spent quota legible at a glance.
+			const tone = quota.remaining <= 0 ? " dsm-qoder-bar-full" : percentage >= 0.8 ? " dsm-qoder-bar-warn" : "";
+			const unit = quota.unit === "credits" ? t("usage.credits") : quota.unit ?? "";
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsm-qoder-usage-block",
+				children: [
+					(0, react_jsx_runtime.jsxs)("div", {
+						className: "dsm-qoder-usage-label",
+						children: [
+							(0, react_jsx_runtime.jsx)("span", { children: label }),
+							badge !== undefined ? (0, react_jsx_runtime.jsx)("span", {
+								className: "dsm-qoder-usage-badge dsm-qoder-usage-badge-offer",
+								children: badge
+							}) : null,
+							quota.remaining <= 0 ? (0, react_jsx_runtime.jsx)("span", {
+								className: "dsm-qoder-usage-badge",
+								children: t("usage.exceeded")
+							}) : null,
+							when ? (0, react_jsx_runtime.jsx)("span", {
+								className: "dsm-qoder-usage-when",
+								children: when
+							}) : null
+						]
+					}),
+					(0, react_jsx_runtime.jsx)("div", {
+						className: "dsm-qoder-bar",
+						role: "progressbar",
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": Math.round(percentage * 100),
+						"aria-label": label,
+						children: (0, react_jsx_runtime.jsx)("div", {
+							className: `dsm-qoder-bar-fill${tone}`,
+							style: { width: `${percent}%` }
+						})
+					}),
+					(0, react_jsx_runtime.jsxs)("div", {
+						className: "dsm-qoder-usage-figures",
+						children: [
+							(0, react_jsx_runtime.jsxs)("span", {
+								children: [
+									(0, react_jsx_runtime.jsx)("strong", { children: `${quota.used} / ${quota.total}` }),
+									` (${Math.round(percent)}%)`
+								]
+							}),
+							(0, react_jsx_runtime.jsx)("span", {
+								children: `${t("usage.remaining")} ${quota.remaining}${unit ? ` ${unit}` : ""}`
+							})
+						]
+					})
+				]
+			});
+		}
+
+		/** One region's usage block, as returned by the host usage route. */
+		function RegionUsage({ t, entry }) {
+			if (entry.available !== true) {
+				return (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsm-qoder-usage-block",
+					children: [
+						(0, react_jsx_runtime.jsx)("p", {
+							className: "dsm-qoder-state",
+							children: `${entry.regionName}: ${t("usage.unavailable")}`
+						})
+					]
+				});
+			}
+			const packages = Array.isArray(entry.dedicatedPackages) ? entry.dedicatedPackages : [];
+			const campaigns = Array.isArray(entry.campaigns) ? entry.campaigns : [];
+			const hasAny = entry.userQuota !== undefined || entry.addOnQuota !== undefined || packages.length > 0;
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsm-qoder-usage-block",
+				children: [
+					(0, react_jsx_runtime.jsxs)("div", {
+						className: "dsm-qoder-usage-head",
+						children: [
+							(0, react_jsx_runtime.jsx)("h4", {
+								className: "dsm-qoder-usage-title",
+								children: t("usage.title")
+							}),
+							(0, react_jsx_runtime.jsx)("span", {
+								className: "dsm-qoder-usage-region",
+								children: entry.regionName
+							})
+						]
+					}),
+					!hasAny ? (0, react_jsx_runtime.jsx)("p", {
+						className: "dsm-qoder-state",
+						children: t("usage.empty")
+					}) : null,
+					entry.userQuota !== undefined ? (0, react_jsx_runtime.jsx)(QuotaBlock, {
+						t,
+						label: t("usage.planCredits"),
+						quota: entry.userQuota,
+						when: withDate(t("usage.renewsOn"), entry.expiresAt)
+					}) : null,
+					entry.addOnQuota !== undefined ? (0, react_jsx_runtime.jsx)(QuotaBlock, {
+						t,
+						label: t("usage.resourcePackage"),
+						quota: entry.addOnQuota
+					}) : null,
+					// Dedicated packages are per-model allowances. They appear only
+					// when the account actually holds one, so the panel stays honest
+					// for accounts that have none.
+					packages.map((pack, index) => (0, react_jsx_runtime.jsxs)(react.Fragment, {
+						children: [
+							(0, react_jsx_runtime.jsx)("div", { className: "dsm-qoder-usage-sep" }),
+							(0, react_jsx_runtime.jsx)(QuotaBlock, {
+								t,
+								label: pack.name || t("usage.dedicatedPackage"),
+								quota: pack,
+								when: withDate(t("usage.expiresOn"), pack.expiresAt)
+							})
+						]
+					}, `pack:${pack.id}:${index}`)),
+					campaigns.length > 0 ? (0, react_jsx_runtime.jsx)("div", { className: "dsm-qoder-usage-sep" }) : null,
+					campaigns.map((camp) => (0, react_jsx_runtime.jsxs)("p", {
+						className: "dsm-qoder-usage-promo",
+						children: [
+							(0, react_jsx_runtime.jsx)("span", {
+								className: "dsm-qoder-usage-badge dsm-qoder-usage-badge-offer",
+								children: t("usage.promotion")
+							}),
+							" ",
+							camp.title,
+							camp.endsAt !== undefined ? ` · ${withDate(t("usage.expiresOn"), camp.endsAt)}` : "",
+							camp.detailUrl ? (0, react_jsx_runtime.jsxs)(react.Fragment, {
+								children: [
+									" ",
+									(0, react_jsx_runtime.jsx)("a", {
+										href: camp.detailUrl,
+										target: "_blank",
+										rel: "noreferrer",
+										children: t("usage.viewDetails")
+									})
+								]
+							}) : null
+						]
+					}, `camp:${camp.key}`))
+				]
+			});
+		}
+
+		/**
+		 * The usage section: a refresh control plus one block per region.
+		 *
+		 * The panel owns its own fetch rather than riding the model read, because
+		 * quota changes with every turn and must be refreshable on demand.
+		 */
+		function QoderUsagePanel({ t }) {
+			const [regions, setRegions] = (0, react.useState)([]);
+			const [status, setStatus] = (0, react.useState)("loading");
+			const [notice, setNotice] = (0, react.useState)(undefined);
+			const [busy, setBusy] = (0, react.useState)(false);
+			const mounted = (0, react.useRef)(true);
+			(0, react.useEffect)(() => {
+				mounted.current = true;
+				return () => {
+					mounted.current = false;
+				};
+			}, []);
+			const load = (0, react.useCallback)(async (refresh) => {
+				setBusy(true);
+				try {
+					const response = await fetch(`${QODER_USAGE_PATH}${refresh ? "?refresh=1" : ""}`, {
+						headers: { accept: "application/json" },
+						credentials: "same-origin"
+					});
+					const value = await response.json().catch(() => void 0);
+					if (!response.ok || value === void 0) throw new Error(`HTTP ${response.status}`);
+					if (!mounted.current) return;
+					setRegions(Array.isArray(value.regions) ? value.regions : []);
+					setStatus("ready");
+					setNotice(undefined);
+				} catch (error) {
+					if (!mounted.current) return;
+					setStatus("error");
+					setNotice(error instanceof Error ? error.message : String(error));
+				} finally {
+					if (mounted.current) setBusy(false);
+				}
+			}, []);
+			(0, react.useEffect)(() => {
+				void load(false);
+			}, [load]);
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsm-qoder-usage",
+				children: [
+					(0, react_jsx_runtime.jsxs)("div", {
+						className: "dsm-qoder-usage-head",
+						children: [
+							// The status line renders only when it has something to say; the
+							// spacer keeps the refresh button pinned right either way.
+							status === "loading" ? (0, react_jsx_runtime.jsx)("p", {
+								className: "dsm-qoder-hint",
+								children: t("usage.loading")
+							}) : status === "error" ? (0, react_jsx_runtime.jsx)("p", {
+								className: "dsm-qoder-error",
+								children: `${t("usage.error")}: ${notice ?? ""}`
+							}) : (0, react_jsx_runtime.jsx)("span", { className: "dsm-qoder-usage-spacer" }),
+							(0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dsm-qoder-button",
+								disabled: busy,
+								onClick: () => {
+									void load(true);
+								},
+								children: t("usage.refresh")
+							})
+						]
+					}),
+					regions.map((entry, index) => (0, react_jsx_runtime.jsxs)(react.Fragment, {
+						children: [
+							index > 0 ? (0, react_jsx_runtime.jsx)("div", { className: "dsm-qoder-usage-sep" }) : null,
+							(0, react_jsx_runtime.jsx)(RegionUsage, { t, entry })
+						]
+					}, `region:${entry.region ?? index}`))
+				]
+			});
+		}
+
+		/** Render the Qoder model and image-input card. */
+		function QoderPluginCard({ t, settingsScope }) {
+			if (t === void 0) throw new Error("Qoder settings card requires its translation function");
+			const [open, setOpen] = (0, react.useState)(false);
+			const [models, setModels] = (0, react.useState)([]);
+			const [imageOverrides, setImageOverrides] = (0, react.useState)({});
+			const [savedOverrides, setSavedOverrides] = (0, react.useState)({});
+			const [maxWindow, setMaxWindow] = (0, react.useState)(false);
+			const [savedMaxWindow, setSavedMaxWindow] = (0, react.useState)(false);
+			// Picker visibility, per region. The host stores an empty list as "no
+			// filter", so the card keeps the same shape and renders that state as
+			// "everything ticked".
+			const [enabledIds, setEnabledIds] = (0, react.useState)({});
+			const [savedEnabledIds, setSavedEnabledIds] = (0, react.useState)({});
+			const [status, setStatus] = (0, react.useState)("loading");
+			const [saving, setSaving] = (0, react.useState)(false);
+			const [notice, setNotice] = (0, react.useState)(undefined);
+			const [refreshing, setRefreshing] = (0, react.useState)(false);
+			const [refreshedAt, setRefreshedAt] = (0, react.useState)(undefined);
+			// A ticking clock, so the off-peak rate and its countdown flip on their
+			// own at the window boundary instead of waiting for a manual refresh.
+			const [clock, setClock] = (0, react.useState)(() => new Date());
+			const mounted = (0, react.useRef)(true);
+			(0, react.useEffect)(() => {
+				mounted.current = true;
+				return () => {
+					mounted.current = false;
+				};
+			}, []);
+			(0, react.useEffect)(() => {
+				const timer = window.setInterval(() => {
+					if (mounted.current) setClock(new Date());
+				}, 1000);
+				return () => {
+					window.clearInterval(timer);
+				};
+			}, []);
+			/**
+			 * Read the model roster from the host route.
+			 *
+			 * The card reads its rows from the host rather than the settings
+			 * document: the roster and the rates are live catalog state, not
+			 * configuration, so they are never persisted.
+			 *
+			 * `refresh` asks the host to re-read the catalog from upstream, which is
+			 * how a newly published model or a changed multiplier reaches the
+			 * picker without restarting DSH. The settings fields are only seeded on
+			 * the first load: a refresh must not clobber edits the user has staged
+			 * but not yet saved.
+			 */
+			const load = (0, react.useCallback)(async (refresh, signal) => {
+				if (refresh) setRefreshing(true);
+				try {
+					const response = await fetch(`${QODER_MODELS_PATH}${refresh ? "?refresh=1" : ""}`, {
+						headers: { accept: "application/json" },
+						credentials: "same-origin",
+						signal
+					});
+					const value = await response.json().catch(() => void 0);
+					if (!response.ok || value === void 0) throw new Error(`HTTP ${response.status}`);
+					if (!mounted.current) return;
+					setModels(Array.isArray(value.models) ? value.models : []);
+					if (!refresh) {
+						const overrides = value.imageOverrides !== null && typeof value.imageOverrides === "object" ? value.imageOverrides : {};
+						const savedEnabled = value.enabledModelIds !== null && typeof value.enabledModelIds === "object" ? value.enabledModelIds : {};
+						setImageOverrides(overrides);
+						setSavedOverrides(overrides);
+						setMaxWindow(value.useMaximumContextWindow === true);
+						setSavedMaxWindow(value.useMaximumContextWindow === true);
+						setEnabledIds(savedEnabled);
+						setSavedEnabledIds(savedEnabled);
+					}
+					setRefreshedAt(typeof value.refreshedAt === "number" ? value.refreshedAt : Date.now());
+					setStatus("ready");
+				} catch (error) {
+					if (!mounted.current || signal?.aborted === true) return;
+					setStatus("error");
+					setNotice(error instanceof Error ? error.message : String(error));
+				} finally {
+					if (mounted.current) setRefreshing(false);
+				}
+			}, []);
+			(0, react.useEffect)(() => {
+				const controller = new AbortController();
+				void load(false, controller.signal);
+				return () => {
+					controller.abort();
+				};
+			}, [load]);
+			// Every editable field participates in "has unsaved changes": the
+			// per-model image modes, the picker roster, and the context-window switch.
+			const dirty = (0, react.useMemo)(() => JSON.stringify(imageOverrides) !== JSON.stringify(savedOverrides) || JSON.stringify(enabledIds) !== JSON.stringify(savedEnabledIds) || maxWindow !== savedMaxWindow, [imageOverrides, savedOverrides, enabledIds, savedEnabledIds, maxWindow, savedMaxWindow]);
+			const setMode = (0, react.useCallback)((modelId, mode) => {
+				setImageOverrides((current) => {
+					const next = { ...current };
+					// "auto" is the absence of an override, so an auto row never
+					// writes a key — the saved document stays minimal and a future
+					// catalog change is picked up again.
+					if (mode === "auto") delete next[modelId];
+					else next[modelId] = mode;
+					return next;
+				});
+				setNotice(undefined);
+			}, []);
+			/**
+			 * Tick or untick one model for the picker.
+			 *
+			 * Ticking is recorded against the region's **full** roster, not against
+			 * whatever happens to be ticked now, so the saved list is a complete
+			 * allow-list rather than a diff. That is what lets a partially curated
+			 * region stay curated when the catalog later grows.
+			 */
+			const toggleModel = (0, react.useCallback)((regionId, modelId) => {
+				setEnabledIds((current) => {
+					const roster = models.filter((m) => m.region === regionId).map((m) => m.id);
+					const active = enabledIdsFor(models, current[regionId]);
+					const next = new Set(active);
+					if (!next.delete(modelId)) next.add(modelId);
+					// A full selection is stored as the empty list, which is the
+					// "no filter" state — so re-ticking everything returns the region
+					// to following the catalog automatically.
+					const list = roster.filter((id) => next.has(id));
+					return { ...current, [regionId]: list.length === roster.length ? [] : list };
+				});
+				setNotice(undefined);
+			}, [models]);
+			/**
+			 * Return one region to "follow the catalog" — every model shown.
+			 *
+			 * There is deliberately no "select none": an empty list *is* the
+			 * no-filter state, so hiding every model is not expressible, and a
+			 * button that silently showed everything instead would be a lie. A user
+			 * who wants a narrow roster ticks the few they want and leaves the rest
+			 * unticked.
+			 */
+			const resetRegion = (0, react.useCallback)((regionId) => {
+				setEnabledIds((current) => ({ ...current, [regionId]: [] }));
+				setNotice(undefined);
+			}, []);
+			const save = (0, react.useCallback)(async () => {
+				if (settingsScope === undefined) return;
+				setSaving(true);
+				try {
+					await settingsScope.set("imageOverrides", imageOverrides);
+					// The other fields are siblings of the same namespace, so they are
+					// written in the same save action.
+					await settingsScope.set("useMaximumContextWindow", maxWindow);
+					await settingsScope.set("enabledModelIds", enabledIds);
+					setSavedOverrides(imageOverrides);
+					setSavedMaxWindow(maxWindow);
+					setSavedEnabledIds(enabledIds);
+					setNotice(t("row.saved"));
+				} catch (error) {
+					setNotice(`${t("row.failed")}: ${error instanceof Error ? error.message : String(error)}`);
+				} finally {
+					if (mounted.current) setSaving(false);
+				}
+			}, [settingsScope, imageOverrides, maxWindow, enabledIds, t]);
+			const discard = (0, react.useCallback)(() => {
+				setImageOverrides(savedOverrides);
+				setMaxWindow(savedMaxWindow);
+				setEnabledIds(savedEnabledIds);
+				setNotice(undefined);
+			}, [savedOverrides, savedMaxWindow, savedEnabledIds]);
+			// `t()` echoes the key when a lookup misses, so the host-provided
+			// region name is the fallback rather than a raw "row.region.x" string.
+			const regionLabel = (model) => {
+				const key = `row.region.${model.region}`;
+				const translated = t(key);
+				return translated === key ? model.regionName ?? model.region : translated;
+			};
+			return (0, react_jsx_runtime.jsxs)("li", {
+				className: `dsm-plugin-card${open ? " dsm-plugin-card-open" : ""}`,
+				children: [(0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "dsm-plugin-card-header",
+					"aria-expanded": open,
+					"aria-label": `${t(open ? "row.collapse" : "row.expand")}: ${t("row.title")}`,
+					onClick: () => {
+						setOpen(!open);
+					},
+					children: [(0, react_jsx_runtime.jsxs)("span", {
+						className: "dsm-plugin-card-head",
+						children: [(0, react_jsx_runtime.jsx)("span", {
+							className: "dsm-plugin-card-title",
+							children: t("row.title")
+						}), (0, react_jsx_runtime.jsx)("span", {
+							className: "dsm-plugin-card-description",
+							children: t("row.desc")
+						})]
+					}), (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": "true",
+						className: `dsm-plugin-card-chevron${open ? " dsm-plugin-card-chevron-open" : ""}`,
+						children: open ? "▾" : "▸"
+					})]
+				}), (0, react_jsx_runtime.jsx)("div", {
+					className: "dsm-plugin-card-body",
+					hidden: !open,
+					children: open ? (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsm-qoder-body",
+						children: [
+							(0, react_jsx_runtime.jsx)(QoderUsagePanel, { t }),
+							(0, react_jsx_runtime.jsx)("p", {
+								className: "dsm-qoder-hint",
+								children: t("row.imageHint")
+							}),
+							status === "loading" ? (0, react_jsx_runtime.jsx)("p", {
+								className: "dsm-qoder-state",
+								children: t("row.loading")
+							}) : null,
+							status === "error" ? (0, react_jsx_runtime.jsx)("p", {
+								className: "dsm-qoder-error",
+								children: `${t("row.requestFailed")}: ${notice ?? ""}`
+							}) : null,
+							status === "ready" && models.length === 0 ? (0, react_jsx_runtime.jsx)("p", {
+								className: "dsm-qoder-state",
+								children: t("row.signedOut")
+							}) : null,
+							models.length > 0 ? (0, react_jsx_runtime.jsxs)("div", {
+								className: "dsm-qoder-models-head",
+								children: [(0, react_jsx_runtime.jsx)("span", {
+									className: "dsm-qoder-hint",
+									children: t("row.showHint")
+								}), (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsm-qoder-button",
+									disabled: refreshing,
+									onClick: () => {
+										void load(true);
+									},
+									children: refreshing ? t("row.refreshing") : t("row.refreshModels")
+								}), (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsm-qoder-button",
+									disabled: saving,
+									onClick: () => {
+										// One button per region: each region's roster is
+										// curated independently, so "show all" has to name
+										// which region it applies to.
+										const regionId = models[0]?.region;
+										if (regionId !== undefined) resetRegion(regionId);
+									},
+									children: t("row.enableAll")
+								}), refreshedAt !== undefined && !refreshing ? (0, react_jsx_runtime.jsx)("span", {
+									className: "dsm-qoder-state",
+									children: t("row.refreshed", { time: new Date(refreshedAt).toLocaleTimeString() })
+								}) : null]
+							}) : null,
+							// The off-peak rule is stated once for the roster rather than
+							// repeated on every row that carries it.
+							models.some((model) => model.promotion !== undefined) ? (0, react_jsx_runtime.jsx)("p", {
+								className: "dsm-qoder-hint",
+								children: t("row.offPeakHint", {
+									window: `${models.find((model) => model.promotion !== undefined)?.promotion?.windowStart}–${models.find((model) => model.promotion !== undefined)?.promotion?.windowEnd}`,
+									zone: models.find((model) => model.promotion !== undefined)?.promotion?.timezone ?? "Asia/Shanghai"
+								})
+							}) : null,
+							models.length > 0 ? (0, react_jsx_runtime.jsx)("ul", {
+								className: "dsm-qoder-models",
+								children: models.map((model) => {
+									const active = enabledIdsFor(models, enabledIds[model.region]).has(model.id);
+									// The rate is resolved against the ticking clock, not the
+									// server's snapshot, so it flips at the window boundary.
+									const offPeak = offPeakState(model, clock);
+									const rate = rateLabelOf(t, rateAt(model, clock));
+									const offPeakTitle = model.promotion === undefined ? t("row.rateLabel") : offPeak?.active === true ? `${t("row.offPeakOn")} · ${formatCountdown(offPeak.remainingSeconds)}` : t("row.offPeakOff");
+									return (0, react_jsx_runtime.jsxs)("li", {
+										className: `dsm-qoder-row${active ? "" : " dsm-qoder-row-off"}`,
+										children: [(0, react_jsx_runtime.jsxs)("span", {
+											className: "dsm-qoder-row-main",
+											children: [(0, react_jsx_runtime.jsx)("label", {
+												className: "dsm-qoder-pick",
+												title: t("row.showInPicker"),
+												children: (0, react_jsx_runtime.jsx)("input", {
+													type: "checkbox",
+													checked: active,
+													disabled: saving,
+													"aria-label": `${t("row.showInPicker")}: ${model.name ?? model.id}`,
+													onChange: () => {
+														toggleModel(model.region, model.id);
+													}
+												})
+											}), (0, react_jsx_runtime.jsx)("span", {
+												className: "dsm-qoder-name",
+												title: model.id,
+												children: model.name ?? model.id
+											}), rate !== undefined ? (0, react_jsx_runtime.jsx)("span", {
+												className: `dsm-qoder-rate${Number(rateAt(model, clock)) <= 0 ? " dsm-qoder-rate-free" : ""}`,
+												title: offPeakTitle,
+												children: rate
+											}) : null, offPeak !== undefined ? (0, react_jsx_runtime.jsx)("span", {
+												className: `dsm-qoder-badge${offPeak.active ? " dsm-qoder-badge-offer" : ""}`,
+												title: model.promotion?.description ?? "",
+												children: `${offPeak.active ? t("row.offPeakOn") : t("row.offPeakOff")} ${formatCountdown(offPeak.remainingSeconds)}`
+											}) : null, (0, react_jsx_runtime.jsx)("span", {
+												className: "dsm-qoder-badge",
+												children: regionLabel(model)
+											}), (0, react_jsx_runtime.jsx)("span", {
+												className: "dsm-qoder-badge",
+												children: model.isVL === true ? t("row.vision") : t("row.textOnly")
+											})]
+										}), (0, react_jsx_runtime.jsxs)("label", {
+											className: "dsm-qoder-switch",
+											children: [(0, react_jsx_runtime.jsx)("span", {
+												children: t("row.imageTitle")
+											}), (0, react_jsx_runtime.jsx)("select", {
+												className: "dsm-qoder-select",
+												value: imageModeOf(imageOverrides, model.id),
+												disabled: saving,
+												"aria-label": `${t("row.imageTitle")}: ${model.name ?? model.id}`,
+												onChange: (event) => {
+													setMode(model.id, event.target.value);
+												},
+												children: IMAGE_MODES.map((mode) => (0, react_jsx_runtime.jsx)("option", {
+													value: mode,
+													children: t(mode === "auto" ? "row.imageAuto" : mode === "on" ? "row.imageOn" : "row.imageOff")
+												}, mode))
+											})]
+										})]
+									}, `${model.region}:${model.id}`);
+								})
+							}) : null,
+							(0, react_jsx_runtime.jsxs)("label", {
+								className: "dsm-qoder-switch",
+								children: [(0, react_jsx_runtime.jsx)("input", {
+									type: "checkbox",
+									checked: maxWindow,
+									disabled: saving,
+									"aria-label": t("row.maxWindow"),
+									onChange: (event) => {
+										setMaxWindow(event.target.checked);
+										setNotice(undefined);
+									}
+								}), (0, react_jsx_runtime.jsx)("span", {
+									children: t("row.maxWindow")
+								})]
+							}),
+							(0, react_jsx_runtime.jsx)("p", {
+								className: "dsm-qoder-hint",
+								children: maxWindow ? t("row.maxWindowOn") : t("row.maxWindowOff")
+							}),
+							(0, react_jsx_runtime.jsxs)("div", {
+								className: "dsm-qoder-actions",
+								children: [(0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsm-qoder-button",
+									disabled: saving || !dirty || settingsScope === undefined,
+									onClick: save,
+									children: saving ? t("row.saving") : t("row.save")
+								}), (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsm-qoder-button",
+									disabled: saving || !dirty,
+									onClick: discard,
+									children: t("row.discard")
+								}), dirty ? (0, react_jsx_runtime.jsx)("span", {
+									className: "dsm-qoder-state",
+									children: t("row.unsaved")
+								}) : notice !== undefined ? (0, react_jsx_runtime.jsx)("span", {
+									className: "dsm-qoder-state",
+									children: notice
+								}) : null]
+							})
+						]
+					}) : null
+				})]
+			});
+		}
+
+		//#region src/client/index.ts
+		/** Stable browser-plugin name. */
+		const name = "dsh-connect-qoder-client";
+		/** Client services this card reads. */
+		const inject = ["slots", "locale", "settingsScope"];
+		/**
+		 * Register the Qoder card under Plugin configuration.
+		 *
+		 * The whole body is wrapped so that a future DSH slot-API change degrades
+		 * to a `console.error` instead of throwing into the loader and raising the
+		 * red "Failed to load plugins" banner — the host provider keeps working
+		 * either way, and the model channel is unaffected.
+		 *
+		 * `key` names the settings namespace the HOST serves. A card whose key
+		 * names no served namespace is registered into the slot but never
+		 * rendered, because the card list is built from the Host's installed
+		 * sections.
+		 */
+		function apply(ctx) {
+			try {
+				installStyles();
+				const namespace = "settings.qoder";
+				ctx.effect(() => ctx.locale.register(namespace, {
+					zh,
+					en
+				}), "dsh-connect-qoder: settings copy");
+				const t = ctx.locale.bind(namespace);
+				const settingsScope = ctx.settingsScope.bind({ namespace: "dsh-connect-qoder" });
+				ctx.slots.inject("settings.plugin.item", () => ctx.slots.register({
+					name: "settings.plugin.item",
+					key: "dsh-connect-qoder",
+					priority: 30,
+					inject: () => ({
+						t,
+						settingsScope
+					})
+				}, QoderPluginCard));
+			} catch (error) {
+				console.error("[dsh-connect-qoder] client card failed to load (host provider unaffected):", error);
+			}
+		}
+		//#endregion
+
+		exports.apply = apply;
+		exports.inject = inject;
+		exports.name = name;
+		return module.exports;
+	}
+});