dsh-plugin-subscription-oauth 0.0.0-stage → 0.2.0

package/lib/client.js

@@ -0,0 +1,2078 @@
+window.__ModuleLoader__.load({ id: "dsh-plugin-subscription-oauth", factory: (require) => {
+var module = { exports: {} }; var exports = module.exports;
+//#region rolldown:runtime
+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 ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = __toESM(react_jsx_runtime);
+
+//#region src/client/locales.ts
+/**
+* Copy dictionaries for the Subscriptions settings page.
+*
+* English is the key-set source of truth; the Chinese dictionary is typed
+* against it, so a key added to one and forgotten in the other is a compile
+* error rather than a silent fallback.
+*/
+/** English strings. */
+const en = {
+	nav: "Subscriptions",
+	intro: "Sign in with a subscription account — Kimi Code, Grok (X Premium) or Google Antigravity. DeepSeek Harness keeps the tokens on this machine and streams every request through the provider's own API.",
+	loading: "Checking subscriptions…",
+	unavailable: "The subscriptions page needs the web connection service, which this composition does not provide.",
+	statusConnected: "Connected · {count} account(s)",
+	statusSignedOut: "Not signed in",
+	statusBusy: "Waiting for browser approval",
+	statusSignIn: "Sign in to add this provider's models to the model picker.",
+	statusAuto: "Follows {count} enabled model(s) from every provider",
+	connect: "Connect",
+	edit: "Edit",
+	collapse: "Collapse",
+	addAccount: "Add account",
+	manage: "Manage",
+	cancel: "Cancel",
+	close: "Close",
+	logout: "Sign out",
+	makeDefault: "Use by default",
+	defaultBadge: "Default",
+	accountNeedsLogin: "Sign in again",
+	accountNeedsLoginHint: "The provider refused this account's grant, so its token cannot be renewed",
+	accountExpired: "token expired",
+	accountExpires: "expires {time}",
+	deviceTitle: "Approve this device",
+	devicePrompt: "Open the verification page and confirm the code below. This page updates by itself once the provider approves.",
+	deviceOpen: "Open verification page",
+	deviceCopy: "Copy code",
+	deviceCopied: "Copied",
+	deviceExpires: "The code expires at {time}.",
+	openLogin: "Open sign-in page",
+	openLoginHint: "Finish signing in in the browser tab that opened. This page updates by itself once the provider redirects back.",
+	modelsTitle: "Models",
+	modelsCount: "{count} available",
+	modelsLive: "live",
+	modelsBuiltIn: "built-in",
+	modelsShow: "Show in picker",
+	modelsHiddenCount: "· {count} hidden",
+	modelsHidden: "Hidden from the model picker",
+	modelsEmpty: "No models reported yet.",
+	modelsAdd: "Add model",
+	modelsAddHint: "Publish a model id this build does not know yet",
+	modelsAddPlaceholder: "model id, e.g. k3-next",
+	modelsAddConfirm: "Add",
+	modelsRemove: "Remove this hand-added model",
+	modelsContext: "{tokens} context",
+	modelsAuto: "Auto",
+	modelsAutoHint: "Pinned first: moves to the next model when one is unavailable",
+	modelsAutoOff: "Off — the picker offers the models directly instead",
+	modelsAutoChain: "Auto tries these, in this order — drag to re-order",
+	modelsDrag: "Drag to re-order (or press ↑ / ↓ here)",
+	modelsAutoChainOff: "Take out of Auto",
+	modelsAutoChainEmpty: "No model is enabled, so Auto has nothing to try.",
+	modelsPinned: "pinned",
+	usageTitle: "Plan and usage",
+	usagePlan: "Plan: {plan}",
+	usageRenews: "renews {time}",
+	usageReset: "resets {time}",
+	usageRefresh: "Refresh usage",
+	usageFetched: "read {time}",
+	usageNone: "This provider reports no plan quota.",
+	usageError: "Could not read usage: {message}",
+	usage_5h: "5-hour window",
+	usage_weekly: "Weekly window",
+	usage_credits: "Included credit",
+	usage_gemini: "Gemini allowance (rolling)",
+	usage_gemini_weekly: "Gemini allowance (weekly)",
+	usage_claude: "Claude allowance (rolling)",
+	usage_claude_weekly: "Claude allowance (weekly)",
+	usage_other: "Allowance",
+	refresh: "Refresh",
+	refreshing: "Refreshing…",
+	modelsRefreshed: "Model list refreshed.",
+	refreshToken: "Refresh token",
+	tokenRefreshed: "Token refreshed; valid until {time}.",
+	hint: "Authorization follows the account the browser is signed in with. To add a different account, switch accounts there first, or use a private window.",
+	manageTitle: "Manage {provider}",
+	manageAccounts: "Accounts",
+	reload: "Reload credentials",
+	reloadHint: "Use this after signing in from another DeepSeek Harness window.",
+	detail_oauthHost: "Authorization server",
+	detail_apiBase: "API base",
+	detail_credentialFile: "Credential file",
+	detail_project: "Cloud project",
+	lastError: "Last login attempt failed: {message}",
+	loginFailed: "Could not start the sign-in: {message}",
+	actionFailed: "Action failed: {message}"
+};
+/** Chinese strings. */
+const zh = {
+	nav: "订阅",
+	intro: "使用订阅账号登录 —— Kimi Code、Grok (X Premium) 或 Google Antigravity。DeepSeek Harness 将令牌保存在本机，并通过各服务自己的 API 发起请求。",
+	loading: "正在检查订阅…",
+	unavailable: "订阅页面需要 Web 连接服务，当前组合未提供该服务。",
+	statusConnected: "已连接 {count} 个账号",
+	statusSignedOut: "未登录",
+	statusBusy: "等待浏览器确认",
+	statusSignIn: "登录后即可在模型选择器中使用该服务的模型。",
+	statusAuto: "依次使用来自各服务的 {count} 个已启用模型",
+	connect: "连接",
+	edit: "编辑",
+	collapse: "收起",
+	addAccount: "添加账号",
+	manage: "管理",
+	cancel: "取消",
+	close: "关闭",
+	logout: "退出登录",
+	makeDefault: "设为默认",
+	defaultBadge: "默认",
+	accountNeedsLogin: "需重新登录",
+	accountNeedsLoginHint: "服务方已拒绝该账号的授权，令牌无法自动续期",
+	accountExpired: "令牌已过期",
+	accountExpires: "过期时间 {time}",
+	deviceTitle: "确认此设备",
+	devicePrompt: "打开验证页面并确认下方代码，服务确认后本页面会自动更新。",
+	deviceOpen: "打开验证页面",
+	deviceCopy: "复制代码",
+	deviceCopied: "已复制",
+	deviceExpires: "代码将于 {time} 过期。",
+	openLogin: "打开登录页面",
+	openLoginHint: "请在打开的浏览器标签页中完成登录；服务回调后本页面会自动更新。",
+	modelsTitle: "模型",
+	modelsCount: "共 {count} 个",
+	modelsLive: "实时",
+	modelsBuiltIn: "内置",
+	modelsShow: "在选择器中显示",
+	modelsHiddenCount: "· 已隐藏 {count} 个",
+	modelsHidden: "已从模型选择器隐藏",
+	modelsEmpty: "暂未获取到模型。",
+	modelsAdd: "添加模型",
+	modelsAddHint: "手动添加一个本版本还不认识的模型 ID",
+	modelsAddPlaceholder: "模型 ID，例如 k3-next",
+	modelsAddConfirm: "添加",
+	modelsRemove: "移除这个手动添加的模型",
+	modelsContext: "{tokens} 上下文",
+	modelsAuto: "自动",
+	modelsAutoHint: "固定在首位：某个模型不可用时自动改用下一个",
+	modelsAutoOff: "已关闭 —— 选择器将直接列出各个模型",
+	modelsAutoChain: "自动会按这个顺序依次尝试（拖动可调整）",
+	modelsDrag: "拖动调整顺序（也可在此按 ↑ / ↓）",
+	modelsAutoChainOff: "从自动中移除",
+	modelsAutoChainEmpty: "没有启用任何模型，自动没有可尝试的模型。",
+	modelsPinned: "固定",
+	usageTitle: "套餐与额度",
+	usagePlan: "套餐：{plan}",
+	usageRenews: "续费时间 {time}",
+	usageReset: "重置时间 {time}",
+	usageRefresh: "刷新额度",
+	usageFetched: "读取于 {time}",
+	usageNone: "该服务未提供套餐额度信息。",
+	usageError: "额度读取失败：{message}",
+	usage_5h: "5 小时窗口",
+	usage_weekly: "每周窗口",
+	usage_credits: "包含额度",
+	usage_gemini: "Gemini 模型额度（滚动）",
+	usage_gemini_weekly: "Gemini 模型额度（每周）",
+	usage_claude: "Claude 模型额度（滚动）",
+	usage_claude_weekly: "Claude 模型额度（每周）",
+	usage_other: "额度",
+	refresh: "刷新",
+	refreshing: "正在刷新…",
+	modelsRefreshed: "模型列表已刷新。",
+	refreshToken: "刷新令牌",
+	tokenRefreshed: "令牌已刷新，有效至 {time}。",
+	hint: "授权以浏览器当前登录的账号为准；要添加不同账号，请先在浏览器里切换账号，或使用无痕窗口。",
+	manageTitle: "管理 {provider}",
+	manageAccounts: "账号",
+	reload: "重新读取凭据",
+	reloadHint: "在另一个 DeepSeek Harness 窗口中登录后，请使用此操作。",
+	detail_oauthHost: "授权服务器",
+	detail_apiBase: "API 地址",
+	detail_credentialFile: "凭据文件",
+	detail_project: "云项目",
+	lastError: "上次登录失败：{message}",
+	loginFailed: "无法开始登录：{message}",
+	actionFailed: "操作失败：{message}"
+};
+
+//#endregion
+//#region src/client/styles.ts
+/**
+* Scoped stylesheet for the Subscriptions page and its manage dialog.
+*
+* The host loads plugin markup without its own control classes, and a bare
+* `<button>` therefore renders with the browser's default raised chrome — which
+* reads as a stray highlight in a dark theme. Rather than invent a look, this
+* follows the control vocabulary of the sibling `dsh-plugin-subscriptions`
+* plugin (same author-facing design as the shell's settings forms): a 6 px
+* radius small control, a transparent fill, a hairline border from the theme's
+* alias tokens, and the theme's hover/active/focus tokens for state.
+*
+* The tokens all carry fallbacks, so the page still renders correctly on a host
+* build that does not define them.
+*
+* @module dsh-plugin-subscription-oauth/client/styles
+*/
+/**
+* Everything is scoped to this plugin's own roots, so no other surface in the
+* shell can be affected by a rule here.
+*/
+const scope = ":is(.dsh-subscriptions-settings, .dsh-subscription-manager)";
+/** The page's and dialog's stylesheet. */
+const subscriptionsCss = `
+.dsh-subscriptions-settings,
+.dsh-subscription-manager {
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  /* Native controls (checkbox, dialog) follow the host theme, not the OS. */
+  color-scheme: light;
+}
+body[data-ds-dark-theme] ${scope} {
+  color-scheme: dark;
+}
+.dsh-subscription-manager {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  border-radius: var(--dsw-radius-panel, 16px);
+  background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-1));
+  color: var(--dsw-alias-label-primary);
+  box-shadow: var(--dsw-elevation-prominent, 0 20px 70px #0004);
+}
+.dsh-subscription-manager::backdrop {
+  background: var(--dsw-alias-bg-mask-1, #0006);
+  backdrop-filter: var(--dsw-mask-blur, none);
+}
+${scope} h2 {
+  margin: 0;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+}
+${scope} strong,
+${scope} .dsh-subscription-label {
+  font-size: 13px;
+  line-height: 1.5;
+  font-weight: 500;
+}
+${scope} small,
+${scope} .dsh-subscription-hint,
+${scope} [role="status"] {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+${scope} .dsh-subscription-error {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-state-error-primary, #b42318);
+}
+${scope} .dsh-subscription-success {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-state-success-primary, #067647);
+}
+${scope} label:has(> input[type="checkbox"]) {
+  cursor: pointer;
+}
+${scope} input[type="checkbox"] {
+  accent-color: var(--dsw-alias-brand-primary);
+}
+/*
+ * A model's on/off control is a switch, not a checkbox: it takes effect
+ * immediately and its state is what matters, not a tick. Drawn from the theme
+ * tokens with appearance: none, so it follows the host palette in both themes
+ * instead of the platform's checkbox chrome.
+ */
+${scope} input[type="checkbox"].dsh-subscription-switch {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 34px;
+  height: 20px;
+  margin: 0;
+  border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-2));
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+${scope} input[type="checkbox"].dsh-subscription-switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--dsw-alias-label-primary-foreground, #fff);
+  box-shadow: 0 1px 2px #0003;
+  transition: transform 120ms ease;
+}
+${scope} input[type="checkbox"].dsh-subscription-switch:checked {
+  border-color: transparent;
+  background: var(--dsw-alias-state-success-primary, var(--dsw-alias-brand-primary, #067647));
+}
+${scope} input[type="checkbox"].dsh-subscription-switch:checked::after {
+  transform: translateX(14px);
+}
+${scope} input[type="checkbox"].dsh-subscription-switch:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+${scope} button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-height: 28px;
+  padding: 0 10px;
+  border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));
+  border-radius: var(--dsw-radius-sm, 6px);
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
+}
+${scope} button:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-3));
+}
+${scope} button:active:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-active, var(--dsw-alias-bg-layer-3));
+}
+${scope} button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+/* A control that is present but should not read as a bordered button. */
+${scope} button.dsh-subscription-quiet {
+  min-height: 22px;
+  padding: 0 4px;
+  border-color: transparent;
+  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary));
+}
+/* The free-text field for a hand-added model id. */
+${scope} input.dsh-subscription-input {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 28px;
+  padding: 0 10px;
+  border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));
+  border-radius: var(--dsw-radius-sm, 6px);
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+}
+${scope} input.dsh-subscription-input::placeholder {
+  color: var(--dsw-alias-label-tertiary);
+}
+${scope} input.dsh-subscription-input:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+/* A drag handle: no border or fill, so it reads as a grip rather than a button. */
+${scope} button.dsh-subscription-handle {
+  min-height: 18px;
+  height: 18px;
+  padding: 0 2px;
+  border-color: transparent;
+  border-radius: var(--dsw-radius-sm, 6px);
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary));
+  font-size: 12px;
+  line-height: 18px;
+  cursor: grab;
+}
+${scope} button.dsh-subscription-handle:hover:not(:disabled) {
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+}
+${scope} button.dsh-subscription-handle:active:not(:disabled) { cursor: grabbing; }
+/* Controls inside the manage dialog are one step larger, like a form footer. */
+${scope} .dsh-subscription-dialog-actions button {
+  min-height: 34px;
+  padding: 0 14px;
+  border-radius: var(--dsw-radius-md, 8px);
+  font-size: 13px;
+  line-height: 1.5;
+}
+${scope} button.dsh-subscription-primary {
+  border-color: transparent;
+  background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-label-primary));
+  color: var(--dsw-alias-label-primary-foreground, var(--dsw-alias-bg-layer-1));
+  font-weight: 500;
+}
+${scope} button.dsh-subscription-primary:hover:not(:disabled) {
+  background: var(--dsw-alias-button-primary-hover, var(--dsw-alias-label-secondary));
+}
+${scope} button:focus-visible,
+${scope} input[type="checkbox"]:focus-visible,
+${scope} .dsh-subscription-disclosure:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+/* The catalog heading is a summary-style disclosure, not a bordered button. */
+${scope} .dsh-subscription-disclosure {
+  border-color: transparent;
+  border-radius: var(--dsw-radius-sm, 6px);
+  background: transparent;
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary));
+}
+${scope} .dsh-subscription-disclosure:hover:not(:disabled) {
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+}
+/* A usage meter: the track, with the fill sized by the caller. */
+${scope} .dsh-subscription-meter {
+  height: 6px;
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-2));
+  overflow: hidden;
+}
+${scope} .dsh-subscription-meter > span {
+  display: block;
+  height: 100%;
+  background: var(--dsw-alias-state-success-primary, #067647);
+}
+${scope} .dsh-subscription-meter > span[data-exhausted="true"] {
+  background: var(--dsw-alias-state-error-primary, #b42318);
+}
+`;
+
+//#endregion
+//#region src/protocol.ts
+/**
+* Wire contract shared by the plugin's node half (the RPC routes) and its
+* browser half (the Settings page).
+*
+* Only this module crosses the boundary: the client bundle imports the types
+* and the channel name, and every call travels as one JSON envelope over a
+* `POST /api/<prefix><endpoint>` route. One status document describes every
+* provider route the plugin serves, so the page renders one card per entry.
+*
+* @module dsh-plugin-subscription-oauth/protocol
+*/
+/** Prefix of every RPC method this plugin serves. */
+const RPC_PREFIX = "subscription-oauth.";
+
+//#endregion
+//#region src/client/subscriptions-rpc.ts
+/** The shared channel the node half's routes are mounted on. */
+const CHANNEL = "/api";
+/** A failed call: either the transport rejected or the endpoint answered `ok: false`. */
+var SubscriptionsRpcError = class extends Error {
+	constructor(message, code) {
+		super(message);
+		this.code = code;
+		this.name = "SubscriptionsRpcError";
+	}
+};
+/** Human-readable message for any thrown value. */
+function messageOf$1(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+/**
+* Bind a caller to one connection's RPC transport.
+* @param rpc - the browser connection's RPC caller.
+* @returns a typed caller for this plugin's endpoints.
+*/
+function createSubscriptionsCall(rpc) {
+	return async function call(endpoint, payload) {
+		let result;
+		try {
+			result = await rpc.call(CHANNEL, `${RPC_PREFIX}${endpoint}`, payload);
+		} catch (error) {
+			throw new SubscriptionsRpcError(messageOf$1(error), "RPC_TRANSPORT");
+		}
+		if (!result.ok) throw new SubscriptionsRpcError(result.error.message, result.error.code);
+		return result.value;
+	};
+}
+
+//#endregion
+//#region src/client/SubscriptionsSection.tsx
+/** Poll cadence while a login attempt is pending. */
+const POLL_INTERVAL_MS = 2e3;
+/**
+* How often an open page re-reads every signed-in route's allowance.
+*
+* Slow on purpose: it is fast enough that a figure shown on screen is current, and
+* slow enough that leaving the page open costs one small request a minute per
+* signed-in provider.
+*/
+const USAGE_POLL_INTERVAL_MS = 6e4;
+/**
+* Disclosures start folded, every time the page is opened.
+*
+* Nothing is remembered between visits on purpose: the section is a list of
+* providers first, and a card left open last time should not decide what this
+* visit looks like. A fold is a gesture within one visit, not a stored setting.
+*/
+/** Horizontal room the page takes inside the settings panel. */
+const SECTION_WIDTH = 560;
+/** Minimal translator used when the locale seat is absent (standalone render). */
+function fallbackTranslate(key, params) {
+	const template = en[key];
+	if (params === void 0) return template;
+	return template.replace(/\{(\w+)\}/g, (match, name) => name in params ? String(params[name]) : match);
+}
+/** Human-readable message for any thrown value. */
+function messageOf(error) {
+	if (error instanceof SubscriptionsRpcError) return error.message;
+	return error instanceof Error ? error.message : String(error);
+}
+/** Local time for one epoch-millisecond instant. */
+function formatTime(at) {
+	try {
+		return new Date(at).toLocaleString();
+	} catch {
+		return String(at);
+	}
+}
+/** Compact token count for a context window. */
+function formatTokens(tokens) {
+	if (tokens >= 1e6) return `${String(Math.round(tokens / 1e5) / 10)}M`;
+	if (tokens >= 1e3) return `${String(Math.round(tokens / 1e3))}K`;
+	return String(tokens);
+}
+/**
+* Routes worth asking for allowances.
+*
+* A route with no account of its own — `auto` — reports itself as signed in so its
+* card reads as usable, but it holds no allowance to read: asking it every minute
+* spends a request to be told nothing. The routes it stands in for are each read
+* on their own.
+*
+* @param providers - the routes in the current status.
+* @returns the route keys to read usage for.
+*/
+function usageTargets(providers) {
+	return providers.filter((provider) => provider.loggedIn && provider.connectable !== false).map((provider) => provider.provider);
+}
+const styles = {
+	section: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 12,
+		maxWidth: SECTION_WIDTH,
+		color: "var(--dsw-alias-label-primary)"
+	},
+	intro: {
+		margin: 0,
+		color: "var(--dsw-alias-label-tertiary)",
+		fontSize: 14,
+		lineHeight: "22px"
+	},
+	card: {
+		border: "0.5px solid var(--dsw-alias-settings-card-stroke, var(--dsw-alias-border-l4))",
+		borderRadius: "var(--dsw-radius-xl, 20px)",
+		background: "var(--dsw-alias-settings-card-fill, var(--dsw-alias-bg-layer-2))",
+		padding: "12px 14px",
+		display: "flex",
+		flexDirection: "column",
+		gap: 6
+	},
+	cardHeader: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8
+	},
+	cardBody: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 6
+	},
+	cardSummary: {
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-label-tertiary)"
+	},
+	dot: {
+		width: 8,
+		height: 8,
+		borderRadius: "50%",
+		flexShrink: 0
+	},
+	name: {
+		fontWeight: 500,
+		fontSize: 14,
+		lineHeight: "22px",
+		color: "var(--dsw-alias-label-primary)"
+	},
+	providerId: {
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-label-dimmed)"
+	},
+	statusLine: {
+		margin: 0,
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-label-tertiary)"
+	},
+	errorLine: {
+		margin: 0,
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-state-error-primary)"
+	},
+	successLine: {
+		margin: 0,
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-state-success-primary)"
+	},
+	actions: {
+		display: "flex",
+		gap: 8,
+		marginTop: 4,
+		alignItems: "center",
+		flexWrap: "wrap"
+	},
+	accountRow: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 6,
+		border: "0.5px solid var(--dsw-alias-border-l2)",
+		borderRadius: "var(--dsw-radius-lg, 16px)",
+		padding: "8px 10px",
+		marginTop: 4
+	},
+	accountHeader: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		flexWrap: "wrap"
+	},
+	starButton: {
+		border: "none",
+		padding: 0,
+		width: 20,
+		background: "transparent",
+		font: "inherit",
+		fontSize: 14,
+		lineHeight: "20px",
+		cursor: "pointer",
+		color: "var(--dsw-alias-state-warn-label)"
+	},
+	accountName: {
+		fontSize: 13,
+		lineHeight: "20px",
+		color: "var(--dsw-alias-label-primary)",
+		userSelect: "all"
+	},
+	badge: {
+		fontSize: 11,
+		lineHeight: "16px",
+		padding: "0 6px",
+		borderRadius: 8,
+		background: "var(--dsw-alias-bg-layer-1)",
+		border: "0.5px solid var(--dsw-alias-border-l2)",
+		color: "var(--dsw-alias-label-secondary)"
+	},
+	pushRight: {
+		marginLeft: "auto",
+		flexShrink: 0
+	},
+	catalog: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 6,
+		marginTop: 4,
+		borderTop: "0.5px solid var(--dsw-alias-border-l2)",
+		paddingTop: 8
+	},
+	catalogHeader: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		flexWrap: "wrap"
+	},
+	catalogTitle: {
+		fontSize: 12,
+		lineHeight: "18px",
+		fontWeight: 500,
+		color: "var(--dsw-alias-label-secondary)"
+	},
+	catalogMeta: {
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-label-tertiary)"
+	},
+	pill: {},
+	pillSmall: {},
+	disclosure: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 4,
+		margin: 0
+	},
+	chevron: {
+		fontSize: 10,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-label-tertiary)"
+	},
+	modelList: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 6,
+		marginTop: 2
+	},
+	modelRowGrow: {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: 8,
+		flex: "1 1 auto",
+		minWidth: 0
+	},
+	autoRow: {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: 8,
+		cursor: "pointer",
+		fontSize: 13,
+		lineHeight: "20px",
+		color: "var(--dsw-alias-label-primary)"
+	},
+	chain: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 3,
+		margin: "2px 0 4px 26px",
+		paddingLeft: 8,
+		borderLeft: "0.5px solid var(--dsw-alias-border-l2)"
+	},
+	chainTitle: {
+		fontSize: 11,
+		lineHeight: "16px",
+		color: "var(--dsw-alias-label-tertiary)"
+	},
+	addRow: {
+		display: "flex",
+		alignItems: "center",
+		gap: 6,
+		marginTop: 2
+	},
+	addInput: {},
+	removeButton: {
+		flexShrink: 0,
+		alignSelf: "center",
+		padding: "0 6px"
+	},
+	chainRowWrap: {
+		display: "flex",
+		alignItems: "center",
+		gap: 4
+	},
+	chainRow: {
+		display: "flex",
+		alignItems: "center",
+		gap: 6,
+		cursor: "pointer",
+		flex: "1 1 auto",
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-label-secondary)"
+	},
+	usage: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 6,
+		marginTop: 4,
+		borderTop: "0.5px solid var(--dsw-alias-border-l2)",
+		paddingTop: 8
+	},
+	usageHeader: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		flexWrap: "wrap"
+	},
+	usageRow: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 3
+	},
+	usageLine: {
+		display: "flex",
+		alignItems: "baseline",
+		gap: 8,
+		justifyContent: "space-between"
+	},
+	usageMeter: {
+		height: 6,
+		borderRadius: 999,
+		background: "var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-2))",
+		overflow: "hidden"
+	},
+	modelRow: {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: 8,
+		cursor: "pointer",
+		fontSize: 13,
+		lineHeight: "20px",
+		color: "var(--dsw-alias-label-primary)"
+	},
+	modelRowHidden: {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: 8,
+		cursor: "pointer",
+		fontSize: 13,
+		lineHeight: "20px",
+		color: "var(--dsw-alias-label-dimmed)"
+	},
+	modelBody: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 1,
+		minWidth: 0
+	},
+	modelName: {
+		fontSize: 13,
+		lineHeight: "20px"
+	},
+	modelMeta: {
+		fontSize: 11,
+		lineHeight: "16px",
+		color: "var(--dsw-alias-label-tertiary)",
+		userSelect: "all"
+	},
+	device: {
+		marginTop: 4,
+		display: "flex",
+		flexDirection: "column",
+		gap: 6,
+		border: "0.5px solid var(--dsw-alias-border-l2)",
+		borderRadius: "var(--dsw-radius-lg, 16px)",
+		padding: "10px 12px",
+		background: "var(--dsw-alias-bg-layer-1)"
+	},
+	deviceTitle: {
+		fontWeight: 500,
+		fontSize: 13,
+		lineHeight: "20px",
+		color: "var(--dsw-alias-label-primary)"
+	},
+	deviceCode: {
+		fontFamily: "monospace",
+		fontSize: 18,
+		lineHeight: "24px",
+		letterSpacing: 2,
+		color: "var(--dsw-alias-label-primary)",
+		userSelect: "all"
+	},
+	details: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 4,
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-label-tertiary)"
+	},
+	detailRow: {
+		display: "flex",
+		gap: 8,
+		justifyContent: "space-between",
+		alignItems: "baseline"
+	},
+	detailValue: {
+		userSelect: "all",
+		overflowWrap: "anywhere",
+		textAlign: "right"
+	},
+	modal: {
+		width: 440,
+		maxWidth: "100%",
+		maxHeight: "85vh",
+		overflowY: "auto",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		gap: 10,
+		padding: "16px 18px",
+		margin: "auto"
+	},
+	modalHeader: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8
+	},
+	modalTitle: {
+		fontWeight: 500,
+		fontSize: 16,
+		lineHeight: "24px",
+		color: "var(--dsw-alias-label-primary)"
+	},
+	modalActions: {
+		display: "flex",
+		gap: 8,
+		justifyContent: "flex-end",
+		marginTop: 2
+	},
+	divider: { borderTop: "0.5px solid var(--dsw-alias-border-l2)" }
+};
+/** Status dot color for one provider's connection state. */
+function dotColor(status) {
+	if (status.busy) return "var(--dsw-alias-state-warn-label)";
+	if (status.loggedIn) return "var(--dsw-alias-state-success-primary)";
+	return "var(--dsw-alias-label-dimmed)";
+}
+/** Localized label for one provider-owned detail row. */
+function detailLabel(t, row) {
+	const key = `detail_${row.key}`;
+	return key in en ? t(key) : row.key;
+}
+/** Localized label for one metered window the provider states. */
+function windowLabel(t, window$1) {
+	const key = `usage_${window$1.label}`;
+	return key in en ? t(key) : window$1.label;
+}
+/** How much of one window is spent, as a display string. */
+function windowAmount(window$1) {
+	if (window$1.usedPercent !== void 0) return `${String(Math.round(window$1.usedPercent))}%`;
+	if (window$1.used !== void 0 && window$1.limit !== void 0) return `${String(window$1.used)}/${String(window$1.limit)}`;
+	return "—";
+}
+/** One account's plan and metered allowances. */
+function UsageBlock(props) {
+	const { usage, error, t, busyAction, onRefresh } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: styles.usage,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: styles.usageHeader,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: styles.catalogTitle,
+					children: t("usageTitle")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "dsh-subscription-quiet",
+					style: styles.pushRight,
+					disabled: busyAction,
+					onClick: onRefresh,
+					children: busyAction ? t("refreshing") : t("usageRefresh")
+				})]
+			}),
+			error !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-subscription-error",
+				children: t("usageError", { message: error })
+			}),
+			usage.length === 0 && error === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: styles.statusLine,
+				children: t("usageNone")
+			}),
+			usage.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: styles.usageRow,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: styles.usageLine,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						style: styles.modelMeta,
+						children: [entry.plan === void 0 ? entry.account : t("usagePlan", { plan: entry.plan }), entry.renewsAt === void 0 ? "" : ` · ${t("usageRenews", { time: formatTime(entry.renewsAt) })}`]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: styles.modelMeta,
+						children: t("usageFetched", { time: formatTime(entry.fetchedAt) })
+					})]
+				}), entry.windows.map((window$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: styles.usageRow,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: styles.usageLine,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							style: styles.modelName,
+							children: [
+								windowLabel(t, window$1),
+								" · ",
+								windowAmount(window$1)
+							]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: styles.modelMeta,
+							children: window$1.resetsAt === void 0 ? "" : t("usageReset", { time: formatTime(window$1.resetsAt) })
+						})]
+					}), window$1.usedPercent !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-subscription-meter",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: { width: `${String(Math.min(100, Math.max(0, window$1.usedPercent)))}%` },
+							"data-exhausted": window$1.usedPercent >= 90 ? "true" : "false"
+						})
+					})]
+				}, `${entry.account}-${window$1.label}`))]
+			}, entry.account))
+		]
+	});
+}
+/** The pending-login block: a device code, or a link to the sign-in page. */
+function PendingLogin(props) {
+	const { prompt, t, copied, onCopy } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: styles.device,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: styles.deviceTitle,
+				children: prompt.mode === "device-code" ? t("deviceTitle") : t("openLogin")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: styles.statusLine,
+				children: prompt.mode === "device-code" ? t("devicePrompt") : t("openLoginHint")
+			}),
+			prompt.userCode !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: styles.deviceCode,
+				children: prompt.userCode
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: styles.statusLine,
+				children: t("deviceExpires", { time: formatTime(prompt.expiresAt) })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: styles.actions,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => {
+						window.open(prompt.url, "_blank", "noopener");
+					},
+					children: prompt.mode === "device-code" ? t("deviceOpen") : t("openLogin")
+				}), prompt.userCode !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => {
+						onCopy(prompt.userCode);
+					},
+					children: copied ? t("deviceCopied") : t("deviceCopy")
+				})]
+			})
+		]
+	});
+}
+/** One provider's card. */
+function ProviderCard(props) {
+	const { status, t, busyAction, message } = props;
+	const [copied, setCopied] = (0, react.useState)(false);
+	const [modelsOpen, setModelsOpen] = (0, react.useState)(false);
+	/** Whether this provider's whole card is unfolded. */
+	const [cardOpen, setCardOpen] = (0, react.useState)(false);
+	const [manageOpen, setManageOpen] = (0, react.useState)(false);
+	const mounted = (0, react.useRef)(true);
+	const dialog = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		const element = dialog.current;
+		if (element === null || typeof element.showModal !== "function") return;
+		if (manageOpen && !element.open) element.showModal();
+		if (!manageOpen && element.open) element.close();
+	}, [manageOpen]);
+	const copyCode = (0, react.useCallback)(async (code) => {
+		try {
+			await navigator.clipboard.writeText(code);
+			if (mounted.current) {
+				setCopied(true);
+				setTimeout(() => {
+					if (mounted.current) setCopied(false);
+				}, 2e3);
+			}
+		} catch {}
+	}, []);
+	const toggleModelsOpen = (0, react.useCallback)(() => {
+		setModelsOpen((open) => !open);
+	}, []);
+	/** Fold or unfold this provider's card. */
+	const toggleCardOpen = (0, react.useCallback)(() => {
+		setCardOpen((open) => !open);
+	}, []);
+	const accounts = status.accounts;
+	const models = status.models;
+	/** Whether this route signs in at all; the auto provider does not. */
+	const connectable = status.connectable !== false;
+	const hiddenCount = models.filter((model) => !model.visible).length;
+	/** Whether the add-a-model-id field is open, and what has been typed. */
+	const [adding, setAdding] = (0, react.useState)(false);
+	const [draft, setDraft] = (0, react.useState)("");
+	/** The row being dragged, so it can be dimmed while it moves. */
+	const [dragFrom, setDragFrom] = (0, react.useState)(void 0);
+	/**
+	* The dragged row, mirrored in a ref.
+	*
+	* The drop is handled by an ancestor whose handler was attached in an earlier
+	* render, so it must not depend on state that was set during the drag.
+	*/
+	const dragFromRef = (0, react.useRef)(void 0);
+	/** The row the pointer is currently over, so a drop lands where the user aims. */
+	const dropTargetRef = (0, react.useRef)(void 0);
+	/** The same row in state, purely so it can be highlighted while dragging. */
+	const [dropTarget, setDropTarget] = (0, react.useState)(void 0);
+	/**
+	* Commit one dropped arrangement.
+	*
+	* The node half takes the full chain in its new order and appends whatever the
+	* page left out, so sending just these ids is enough — and a model hidden in
+	* another window is never dropped from the stored rank by a stale page.
+	*/
+	const commitOrder = (0, react.useCallback)((ids) => {
+		props.onSetModelOrder(ids);
+	}, [props]);
+	/** Drag-and-drop plus its keyboard equivalent on the drag handle. */
+	const drag = {
+		start: (event, index) => {
+			setDragFrom(index);
+			dragFromRef.current = index;
+			event.dataTransfer.effectAllowed = "move";
+			event.dataTransfer.setData("text/plain", String(index));
+		},
+		over: (event, _index) => {
+			event.preventDefault();
+			event.dataTransfer.dropEffect = "move";
+			const container = event.currentTarget;
+			const to = indexAt(container, event.clientY);
+			dropTargetRef.current = to;
+			if (to !== void 0 && to !== dropTarget) setDropTarget(to);
+		},
+		drop: (event, index) => {
+			event.preventDefault();
+			const to = dropTargetRef.current ?? indexAt(event.currentTarget, event.clientY) ?? index;
+			move(dragFromRef.current, to);
+			dragFromRef.current = void 0;
+			dropTargetRef.current = void 0;
+			setDropTarget(void 0);
+			setDragFrom(void 0);
+		},
+		dropAt: (event) => {
+			event.preventDefault();
+			const container = event.currentTarget;
+			const to = dropTargetRef.current ?? indexAt(container, event.clientY);
+			if (to !== void 0) move(dragFromRef.current, to);
+			dragFromRef.current = void 0;
+			dropTargetRef.current = void 0;
+			setDropTarget(void 0);
+			setDragFrom(void 0);
+		},
+		end: () => {
+			dragFromRef.current = void 0;
+			dropTargetRef.current = void 0;
+			setDropTarget(void 0);
+			setDragFrom(void 0);
+		},
+		key: (event, index) => {
+			if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+			event.preventDefault();
+			move(index, index + (event.key === "ArrowUp" ? -1 : 1));
+		}
+	};
+	/** Move one model row to another position and persist the result. */
+	function move(from, to) {
+		if (from === void 0 || from === to) return;
+		if (from < 0 || to < 0 || from >= models.length || to >= models.length) return;
+		const ids = models.map((model) => model.id);
+		const [moved] = ids.splice(from, 1);
+		if (moved === void 0) return;
+		ids.splice(to, 0, moved);
+		commitOrder(ids);
+	}
+	/**
+	* The row index a drop at this pointer position lands on.
+	*
+	* The drop is handled on the whole list rather than per row: rows are tall and
+	* separated by gaps, so a drop between two of them hits no target at all and
+	* silently does nothing. Comparing the pointer against each row's midpoint also
+	* makes the gesture match what the user sees.
+	*/
+	function indexAt(container, clientY) {
+		const rows = Array.from(container.querySelectorAll("[data-model-index]"));
+		if (rows.length === 0) return void 0;
+		let closest = 0;
+		let best = Number.POSITIVE_INFINITY;
+		for (const row of rows) {
+			const box = row.getBoundingClientRect();
+			const distance = Math.abs(clientY - (box.top + box.height / 2));
+			if (distance >= best) continue;
+			best = distance;
+			closest = Number(row.dataset.modelIndex);
+		}
+		return closest;
+	}
+	const busy = status.busy;
+	const liveCatalog = (status.discovered?.length ?? 0) > 0;
+	/**
+	* What a folded card says about itself.
+	*
+	* The connection is the reason to open a card, so the folded row carries it;
+	* `auto` has no account and counts the models it will actually try instead.
+	*/
+	const summaryLine = !connectable ? t("statusAuto", { count: models.filter((model) => model.visible).length }) : busy ? t("statusBusy") : status.loggedIn ? t("statusConnected", { count: accounts.length }) : t("statusSignedOut");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: styles.card,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: styles.cardHeader,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							...styles.dot,
+							background: dotColor(status)
+						},
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: styles.name,
+						children: status.displayName
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: styles.providerId,
+						children: status.provider
+					}),
+					!cardOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: styles.cardSummary,
+						children: summaryLine
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dsh-subscription-quiet",
+						style: styles.pushRight,
+						"aria-expanded": cardOpen,
+						"aria-controls": `dsh-subscription-card-${status.provider}`,
+						onClick: toggleCardOpen,
+						children: cardOpen ? t("collapse") : t("edit")
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				id: `dsh-subscription-card-${status.provider}`,
+				style: cardOpen ? styles.cardBody : {
+					...styles.cardBody,
+					display: "none"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles.statusLine,
+						children: !connectable ? t("statusAuto", { count: models.filter((model) => model.visible).length }) : busy ? t("statusBusy") : status.loggedIn ? t("statusConnected", { count: accounts.length }) : t("statusSignedOut")
+					}),
+					connectable && !status.loggedIn && !busy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles.statusLine,
+						children: t("statusSignIn")
+					}),
+					status.lastError !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-subscription-error",
+						children: t("lastError", { message: status.lastError })
+					}),
+					message?.tone === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-subscription-error",
+						children: message.text
+					}),
+					message?.tone === "success" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-subscription-success",
+						children: message.text
+					}),
+					accounts.map((account) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: styles.accountRow,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: styles.accountHeader,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									style: styles.starButton,
+									title: account.isDefault ? t("defaultBadge") : t("makeDefault"),
+									"aria-label": account.isDefault ? t("defaultBadge") : t("makeDefault"),
+									disabled: busyAction || account.isDefault,
+									onClick: () => {
+										props.onSetDefault(account.account);
+									},
+									children: account.isDefault ? "★" : "☆"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: styles.accountName,
+									children: account.label
+								}),
+								account.isDefault && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: styles.badge,
+									children: t("defaultBadge")
+								}),
+								account.needsLogin === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: styles.badge,
+									title: t("accountNeedsLoginHint"),
+									children: t("accountNeedsLogin")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: styles.statusLine,
+									children: account.expired ? t("accountExpired") : t("accountExpires", { time: formatTime(account.expiresAt) })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dsh-subscription-quiet",
+									style: styles.pushRight,
+									disabled: busyAction,
+									onClick: () => {
+										props.onLogout(account.account);
+									},
+									children: t("logout")
+								})
+							]
+						})
+					}, account.account)),
+					status.loggedIn && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: styles.catalog,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: styles.catalogHeader,
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										className: "dsh-subscription-disclosure",
+										style: styles.disclosure,
+										"aria-expanded": modelsOpen,
+										"aria-controls": `dsh-subscription-models-${status.provider}`,
+										onClick: toggleModelsOpen,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: styles.chevron,
+											"aria-hidden": "true",
+											children: modelsOpen ? "▾" : "▸"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: styles.catalogTitle,
+											children: t("modelsTitle")
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										style: styles.catalogMeta,
+										children: [
+											t("modelsCount", { count: models.length }),
+											" · ",
+											liveCatalog ? t("modelsLive") : t("modelsBuiltIn"),
+											hiddenCount === 0 ? "" : ` ${t("modelsHiddenCount", { count: hiddenCount })}`
+										]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dsh-subscription-quiet",
+										style: styles.pushRight,
+										disabled: busyAction,
+										onClick: props.onRefreshModels,
+										children: busyAction ? t("refreshing") : t("refresh")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dsh-subscription-quiet",
+										disabled: busyAction || !connectable,
+										title: t("modelsAddHint"),
+										onClick: () => {
+											setAdding((open) => !open);
+										},
+										children: t("modelsAdd")
+									})
+								]
+							}),
+							adding && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+								style: styles.addRow,
+								onSubmit: (event) => {
+									event.preventDefault();
+									const id = draft.trim();
+									if (id.length === 0) return;
+									props.onAddModel(id);
+									setDraft("");
+									setAdding(false);
+								},
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "text",
+										className: "dsh-subscription-input",
+										style: styles.addInput,
+										value: draft,
+										autoFocus: true,
+										spellCheck: false,
+										placeholder: t("modelsAddPlaceholder"),
+										"aria-label": t("modelsAdd"),
+										disabled: busyAction,
+										onChange: (event) => {
+											setDraft(event.target.value);
+										}
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "submit",
+										disabled: busyAction || draft.trim().length === 0,
+										children: t("modelsAddConfirm")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dsh-subscription-quiet",
+										onClick: () => {
+											setAdding(false);
+											setDraft("");
+										},
+										children: t("cancel")
+									})
+								]
+							}),
+							modelsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								id: `dsh-subscription-models-${status.provider}`,
+								style: styles.modelList,
+								onDragOver: (event) => {
+									drag.over(event, 0);
+								},
+								onDrop: drag.dropAt,
+								children: [
+									status.provider === "auto" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: styles.chainTitle,
+										children: t("modelsAutoChain")
+									}),
+									models.map((model, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										"data-model-index": index,
+										draggable: !busyAction,
+										style: {
+											...styles.modelRowWrap,
+											...dragFrom === index ? { opacity: .5 } : {},
+											...dropTarget === index && dragFrom !== void 0 && dragFrom !== index ? { boxShadow: "inset 0 2px 0 0 var(--dsw-alias-brand-primary)" } : {}
+										},
+										onDragStart: (event) => {
+											drag.start(event, index);
+										},
+										onDragEnd: drag.end,
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												className: "dsh-subscription-handle",
+												disabled: busyAction,
+												title: t("modelsDrag"),
+												"aria-label": `${t("modelsDrag")} · ${model.name}`,
+												onKeyDown: (event) => {
+													drag.key(event, index);
+												},
+												children: "⠿"
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+												style: model.visible ? {
+													...styles.modelRowGrow,
+													cursor: "pointer"
+												} : {
+													...styles.modelRowGrow,
+													cursor: "pointer",
+													color: "var(--dsw-alias-label-dimmed)"
+												},
+												title: model.visible ? t("modelsHidden") : t("modelsShow"),
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+													type: "checkbox",
+													className: "dsh-subscription-switch",
+													role: "switch",
+													checked: model.visible,
+													disabled: busyAction,
+													"aria-label": `${t("modelsShow")} · ${model.name}`,
+													onChange: (event) => {
+														props.onSetModelVisible(model.id, event.target.checked);
+													}
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+													style: styles.modelBody,
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+														style: styles.modelName,
+														children: [model.name, model.source === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															style: styles.badge,
+															children: model.source
+														})]
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+														style: styles.modelMeta,
+														children: [
+															model.id,
+															" · ",
+															t("modelsContext", { tokens: formatTokens(model.contextWindow) }),
+															model.defaultEffort === void 0 ? "" : ` · ${model.defaultEffort}`,
+															model.inputModalities === void 0 || model.inputModalities.length === 0 ? "" : ` · ${model.inputModalities.join("/")}`
+														]
+													})]
+												})]
+											}),
+											model.userAdded === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												className: "dsh-subscription-quiet",
+												style: styles.removeButton,
+												disabled: busyAction,
+												title: t("modelsRemove"),
+												"aria-label": `${t("modelsRemove")} · ${model.name}`,
+												onClick: () => {
+													props.onRemoveModel(model.id);
+												},
+												children: "×"
+											})
+										]
+									}, model.id)),
+									models.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										style: styles.statusLine,
+										children: status.provider === "auto" ? t("modelsAutoChainEmpty") : t("modelsEmpty")
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageBlock, {
+						usage: status.usage ?? [],
+						...status.usageError === void 0 ? {} : { error: status.usageError },
+						t,
+						busyAction,
+						onRefresh: props.onRefreshUsage
+					}),
+					connectable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: styles.actions,
+						children: [
+							!busy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								disabled: busyAction,
+								onClick: props.onLogin,
+								children: accounts.length === 0 ? t("connect") : t("addAccount")
+							}),
+							!busy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								disabled: busyAction,
+								onClick: () => {
+									setManageOpen(true);
+								},
+								children: t("manage")
+							}),
+							busy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								disabled: busyAction,
+								onClick: props.onCancel,
+								children: t("cancel")
+							})
+						]
+					}),
+					connectable && accounts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles.statusLine,
+						children: t("hint")
+					}),
+					busy && status.pending !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PendingLogin, {
+						prompt: status.pending,
+						t,
+						copied,
+						onCopy: (code) => {
+							copyCode(code);
+						}
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dialog", {
+				ref: dialog,
+				className: "dsh-subscription-manager",
+				"aria-labelledby": `dsh-subscription-manage-${status.provider}`,
+				style: manageOpen ? styles.modal : {
+					...styles.modal,
+					display: "none"
+				},
+				onClose: () => {
+					setManageOpen(false);
+				},
+				onCancel: () => {
+					setManageOpen(false);
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: styles.modalHeader,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: styles.modalTitle,
+							id: `dsh-subscription-manage-${status.provider}`,
+							children: t("manageTitle", { provider: status.displayName })
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: styles.statusLine,
+						children: t("manageAccounts")
+					}),
+					accounts.map((account) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: styles.accountRow,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: styles.accountHeader,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: styles.accountName,
+								children: account.label
+							}), account.isDefault && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: styles.badge,
+								children: t("defaultBadge")
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: styles.actions,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									disabled: busyAction,
+									onClick: () => {
+										props.onRefreshToken(account.account);
+									},
+									children: t("refreshToken")
+								}),
+								!account.isDefault && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									disabled: busyAction,
+									onClick: () => {
+										props.onSetDefault(account.account);
+									},
+									children: t("makeDefault")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									disabled: busyAction,
+									onClick: () => {
+										props.onLogout(account.account);
+									},
+									children: t("logout")
+								})
+							]
+						})]
+					}, account.account)),
+					accounts.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles.statusLine,
+						children: t("statusSignedOut")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: styles.divider }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: styles.actions,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							disabled: busyAction,
+							onClick: props.onReload,
+							children: t("reload")
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles.statusLine,
+						children: t("reloadHint")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: styles.divider }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: styles.details,
+						children: [status.details.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: styles.detailRow,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: detailLabel(t, row) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: styles.detailValue,
+								children: row.value
+							})]
+						}, row.key)), status.discovered !== void 0 && status.discovered.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: styles.detailRow,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("modelsLive") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: styles.detailValue,
+								children: status.discovered.join(", ")
+							})]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-subscription-dialog-actions",
+						style: styles.modalActions,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => {
+								setManageOpen(false);
+							},
+							children: t("close")
+						})
+					})
+				]
+			})
+		]
+	});
+}
+/**
+* The Subscriptions settings section.
+* @param props - section props (inject face plus the shell's `close`).
+* @returns the section content.
+*/
+function SubscriptionsSection(props) {
+	const { call } = props;
+	const t = props.t ?? fallbackTranslate;
+	const [status, setStatus] = (0, react.useState)(void 0);
+	const [error, setError] = (0, react.useState)(void 0);
+	const [messages, setMessages] = (0, react.useState)({});
+	const [busyAction, setBusyAction] = (0, react.useState)(false);
+	const mounted = (0, react.useRef)(true);
+	const timer = (0, react.useRef)(void 0);
+	/** Fetch the current state; a failure is shown rather than swallowed. */
+	const refresh = (0, react.useCallback)(async () => {
+		if (call === void 0) return;
+		try {
+			const next = await call("status", void 0);
+			if (!mounted.current) return;
+			setStatus(next);
+			setError(void 0);
+		} catch (caught) {
+			if (mounted.current) setError(t("actionFailed", { message: messageOf(caught) }));
+		}
+	}, [call, t]);
+	const stopPolling = (0, react.useCallback)(() => {
+		if (timer.current !== void 0) {
+			clearInterval(timer.current);
+			timer.current = void 0;
+		}
+	}, []);
+	const startPolling = (0, react.useCallback)(() => {
+		if (timer.current !== void 0) return;
+		timer.current = setInterval(() => {
+			refresh();
+		}, POLL_INTERVAL_MS);
+	}, [refresh]);
+	(0, react.useEffect)(() => {
+		mounted.current = true;
+		refresh();
+		return () => {
+			mounted.current = false;
+			stopPolling();
+		};
+	}, [refresh, stopPolling]);
+	/** Every route worth reading, as of the latest render, for the usage poll. */
+	const signedInRef = (0, react.useRef)([]);
+	(0, react.useEffect)(() => {
+		signedInRef.current = usageTargets(status?.providers ?? []);
+	});
+	/**
+	* Read each named route's plan and allowance, applying every answer.
+	*
+	* A read is not forced: the node half reuses a figure only for a few seconds and
+	* never reuses a substitute, so a steady interval refreshes the figures while
+	* collapsing bursts into one request per route.
+	*/
+	const readUsage = (0, react.useCallback)(async (providers) => {
+		if (call === void 0) return;
+		for (const provider of providers) try {
+			const result = await call("usage", { provider });
+			if (!mounted.current) return;
+			setStatus(result.status);
+		} catch {}
+	}, [call]);
+	const usageRequested = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (call === void 0 || status === void 0 || usageRequested.current) return;
+		const signedIn = usageTargets(status.providers);
+		if (signedIn.length === 0) return;
+		usageRequested.current = true;
+		readUsage(signedIn);
+	}, [
+		call,
+		status,
+		readUsage
+	]);
+	(0, react.useEffect)(() => {
+		if (call === void 0) return;
+		const tick = () => {
+			if (globalThis.document?.visibilityState === "hidden") return;
+			readUsage(signedInRef.current);
+		};
+		const interval = setInterval(tick, USAGE_POLL_INTERVAL_MS);
+		return () => {
+			clearInterval(interval);
+		};
+	}, [call, readUsage]);
+	const anyBusy = status?.providers.some((provider) => provider.busy) === true;
+	(0, react.useEffect)(() => {
+		if (anyBusy) startPolling();
+		else stopPolling();
+	}, [
+		anyBusy,
+		startPolling,
+		stopPolling
+	]);
+	/** Run one action for one provider, reporting its own failure. */
+	const act = (0, react.useCallback)(async (provider, run) => {
+		setBusyAction(true);
+		setMessages((current) => {
+			const next = { ...current };
+			delete next[provider];
+			return next;
+		});
+		try {
+			await run();
+		} catch (caught) {
+			if (mounted.current) setMessages((current) => ({
+				...current,
+				[provider]: {
+					tone: "error",
+					text: t("actionFailed", { message: messageOf(caught) })
+				}
+			}));
+		} finally {
+			if (mounted.current) setBusyAction(false);
+		}
+	}, [t]);
+	const login = (0, react.useCallback)((provider) => {
+		if (call === void 0) return;
+		act(provider, async () => {
+			const started = await call("login", { provider });
+			if (!mounted.current) return;
+			setStatus(started.status);
+			if (started.prompt.mode === "open-url") window.open(started.prompt.url, "_blank", "noopener");
+		});
+	}, [act, call]);
+	const cancel = (0, react.useCallback)((provider) => {
+		if (call === void 0) return;
+		act(provider, async () => {
+			const next = await call("cancel", { provider });
+			if (mounted.current) setStatus(next);
+		});
+	}, [act, call]);
+	const logout = (0, react.useCallback)((provider, account) => {
+		if (call === void 0) return;
+		act(provider, async () => {
+			const next = await call("logout", {
+				provider,
+				account
+			});
+			if (mounted.current) setStatus(next);
+		});
+	}, [act, call]);
+	const setDefault = (0, react.useCallback)((provider, account) => {
+		if (call === void 0) return;
+		act(provider, async () => {
+			const next = await call("setDefault", {
+				provider,
+				account
+			});
+			if (mounted.current) setStatus(next);
+		});
+	}, [act, call]);
+	const refreshToken = (0, react.useCallback)((provider, account) => {
+		if (call === void 0) return;
+		act(provider, async () => {
+			const result = await call("refresh", {
+				provider,
+				account
+			});
+			if (!mounted.current) return;
+			setStatus(result.status);
+			setMessages((current) => ({
+				...current,
+				[provider]: {
+					tone: "success",
+					text: t("tokenRefreshed", { time: formatTime(result.expiresAt) })
+				}
+			}));
+		});
+	}, [
+		act,
+		call,
+		t
+	]);
+	const refreshModels = (0, react.useCallback)((provider) => {
+		if (call === void 0) return;
+		act(provider, async () => {
+			const next = await call("discover", {
+				provider,
+				force: true
+			});
+			if (!mounted.current) return;
+			setStatus(next);
+			setMessages((current) => ({
+				...current,
+				[provider]: {
+					tone: "success",
+					text: t("modelsRefreshed")
+				}
+			}));
+		});
+	}, [
+		act,
+		call,
+		t
+	]);
+	const setModelVisible = (0, react.useCallback)((provider, id, visible) => {
+		if (call === void 0) return;
+		act(provider, async () => {
+			const next = await call("setModelVisible", {
+				provider,
+				id,
+				visible
+			});
+			if (mounted.current) setStatus(next);
+		});
+	}, [act, call]);
+	const refreshUsage = (0, react.useCallback)((provider) => {
+		if (call === void 0) return;
+		act(provider, async () => {
+			const result = await call("usage", {
+				provider,
+				force: true
+			});
+			if (mounted.current) setStatus(result.status);
+		});
+	}, [act, call]);
+	const setModelOrder = (0, react.useCallback)((provider, ids) => {
+		if (call === void 0) return;
+		act(provider, async () => {
+			const next = await call("setModelOrder", {
+				provider,
+				ids: [...ids]
+			});
+			if (mounted.current) setStatus(next);
+		});
+	}, [act, call]);
+	const addModel = (0, react.useCallback)((provider, id) => {
+		if (call === void 0) return;
+		act(provider, async () => {
+			const next = await call("addModel", {
+				provider,
+				id
+			});
+			if (mounted.current) setStatus(next);
+		});
+	}, [act, call]);
+	const removeModel = (0, react.useCallback)((provider, id) => {
+		if (call === void 0) return;
+		act(provider, async () => {
+			const next = await call("removeModel", {
+				provider,
+				id
+			});
+			if (mounted.current) setStatus(next);
+		});
+	}, [act, call]);
+	const reload = (0, react.useCallback)((provider) => {
+		if (call === void 0) return;
+		act(provider, async () => {
+			const next = await call("reload", void 0);
+			if (mounted.current) setStatus(next);
+		});
+	}, [act, call]);
+	if (call === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		style: styles.intro,
+		children: t("unavailable")
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "dsh-subscriptions-settings",
+		style: styles.section,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: subscriptionsCss }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: styles.intro,
+				children: t("intro")
+			}),
+			error !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-subscription-error",
+				children: error
+			}),
+			status === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: styles.statusLine,
+				children: t("loading")
+			}),
+			status?.providers.map((provider) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProviderCard, {
+				status: provider,
+				t,
+				busyAction,
+				...messages[provider.provider] === void 0 ? {} : { message: messages[provider.provider] },
+				onLogin: () => {
+					login(provider.provider);
+				},
+				onCancel: () => {
+					cancel(provider.provider);
+				},
+				onLogout: (account) => {
+					logout(provider.provider, account);
+				},
+				onSetDefault: (account) => {
+					setDefault(provider.provider, account);
+				},
+				onRefreshToken: (account) => {
+					refreshToken(provider.provider, account);
+				},
+				onRefreshModels: () => {
+					refreshModels(provider.provider);
+				},
+				onSetModelVisible: (id, visible) => {
+					setModelVisible(provider.provider, id, visible);
+				},
+				onSetModelOrder: (ids) => {
+					setModelOrder(provider.provider, ids);
+				},
+				onAddModel: (id) => {
+					addModel(provider.provider, id);
+				},
+				onRemoveModel: (id) => {
+					removeModel(provider.provider, id);
+				},
+				onRefreshUsage: () => {
+					refreshUsage(provider.provider);
+				},
+				onReload: () => {
+					reload(provider.provider);
+				}
+			}, provider.provider))
+		]
+	});
+}
+
+//#endregion
+//#region src/client/index.ts
+/** Dictionary namespace owned by this plugin. */
+const NS = "settings.subscriptions";
+/** Settings nav position: after the shipped sections, before plugin tooling. */
+const SECTION_ORDER = 92;
+/**
+* Required services: `slots` carries the registration seat, `connection` the
+* RPC caller, and `locale` the copy dictionaries.
+*/
+const inject = [
+	"slots",
+	"connection",
+	"locale"
+];
+/**
+* Register the Subscriptions settings section.
+*
+* Registration goes through `slots.inject`, so the shell's own apply order
+* relative to this one is unconstrained.
+*
+* @param ctx - client root context.
+*/
+function apply(ctx) {
+	ctx.effect(() => ctx.locale.register(NS, {
+		zh,
+		en
+	}), "dsh-plugin-subscription-oauth: copy dictionaries");
+	const connection = ctx.get("connection");
+	const t = ctx.locale.bind(NS);
+	const call = createSubscriptionsCall(connection.rpc);
+	ctx.slots.inject("settings.section", () => ctx.slots.register({
+		name: "settings.section",
+		id: "subscriptions",
+		order: SECTION_ORDER,
+		label: () => t("nav"),
+		inject: () => ({
+			call,
+			t
+		})
+	}, SubscriptionsSection));
+}
+
+//#endregion
+exports.SubscriptionsRpcError = SubscriptionsRpcError;
+exports.apply = apply;
+exports.createSubscriptionsCall = createSubscriptionsCall;
+exports.inject = inject;
+return module.exports; } });
+//# sourceMappingURL=client.js.map