dsh-plugin-subscription-oauth 0.10.2 → 0.12.0

package/lib/client.js

@@ -39,7 +39,7 @@ react_jsx_runtime = __toESM(react_jsx_runtime);
 /** 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.",
+	intro: "Sign in with the AI subscriptions you already pay for — no API key. Pick a provider below, connect once, and its models join the model picker with live plan usage. Tokens stay on this machine.",
 	loading: "Checking subscriptions…",
 	unavailable: "The subscriptions page needs the web connection service, which this composition does not provide.",
 	statusConnected: "Connected · {count} account(s)",
@@ -57,6 +57,7 @@ const en = {
 	logout: "Sign out",
 	makeDefault: "Use by default",
 	defaultBadge: "Default",
+	badgeLive: "Live",
 	accountNeedsLogin: "Sign in again",
 	accountNeedsLoginHint: "The provider refused this account's grant, so its token cannot be renewed",
 	accountExpired: "token expired",
@@ -133,7 +134,7 @@ const en = {
 /** Chinese strings. */
 const zh = {
 	nav: "订阅",
-	intro: "使用订阅账号登录 —— Kimi Code、Grok (X Premium) 或 Google Antigravity。DeepSeek Harness 将令牌保存在本机，并通过各服务自己的 API 发起请求。",
+	intro: "使用你已付费的 AI 订阅 —— 无需 API Key。在下方选择服务，连接一次，其模型即进入模型选择器并显示实时额度。令牌仅保存在本机。",
 	loading: "正在检查订阅…",
 	unavailable: "订阅页面需要 Web 连接服务，当前组合未提供该服务。",
 	statusConnected: "已连接 {count} 个账号",
@@ -151,6 +152,7 @@ const zh = {
 	logout: "退出登录",
 	makeDefault: "设为默认",
 	defaultBadge: "默认",
+	badgeLive: "已连接",
 	accountNeedsLogin: "需重新登录",
 	accountNeedsLoginHint: "服务方已拒绝该账号的授权，令牌无法自动续期",
 	accountExpired: "令牌已过期",
@@ -877,30 +879,52 @@ const styles = {
 		maxWidth: SECTION_WIDTH,
 		color: "var(--dsw-alias-label-primary)"
 	},
+	sectionHeader: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 4,
+		marginBottom: 2
+	},
+	heading: {
+		margin: 0,
+		fontSize: 18,
+		lineHeight: "26px",
+		fontWeight: 600,
+		color: "var(--dsw-alias-label-primary)"
+	},
 	intro: {
 		margin: 0,
 		color: "var(--dsw-alias-label-tertiary)",
-		fontSize: 14,
-		lineHeight: "22px"
+		fontSize: 13,
+		lineHeight: "20px",
+		maxWidth: 560
 	},
 	card: {
 		border: "0.5px solid var(--dsw-alias-settings-card-stroke, var(--dsw-alias-border-l4))",
-		borderRadius: "var(--dsw-radius-xl, 20px)",
+		borderRadius: "var(--dsw-radius-xl, 16px)",
 		background: "var(--dsw-alias-settings-card-fill, var(--dsw-alias-bg-layer-2))",
-		padding: "12px 14px",
+		padding: "14px 16px",
 		display: "flex",
 		flexDirection: "column",
-		gap: 6
+		gap: 8,
+		transition: "border-color 120ms ease, background 120ms ease"
+	},
+	cardOpen: {
+		borderColor: "var(--dsw-alias-border-l2, var(--dsw-alias-border-l3))",
+		background: "var(--dsw-alias-settings-card-fill-hover, var(--dsw-alias-settings-card-fill, var(--dsw-alias-bg-layer-2)))"
 	},
 	cardHeader: {
 		display: "flex",
 		alignItems: "center",
-		gap: 8
+		gap: 10,
+		cursor: "pointer",
+		userSelect: "none"
 	},
 	cardBody: {
 		display: "flex",
 		flexDirection: "column",
-		gap: 6
+		gap: 10,
+		marginTop: 2
 	},
 	cardSummary: {
 		fontSize: 12,
@@ -911,19 +935,24 @@ const styles = {
 		width: 8,
 		height: 8,
 		borderRadius: "50%",
-		flexShrink: 0
+		flexShrink: 0,
+		border: "1.5px solid var(--dsw-alias-label-dimmed)",
+		background: "transparent"
+	},
+	dotLive: {
+		borderColor: "var(--dsw-alias-state-success-primary, #067647)",
+		background: "var(--dsw-alias-state-success-primary, #067647)"
+	},
+	dotBusy: {
+		borderColor: "var(--dsw-alias-state-warn-primary, #f5a524)",
+		background: "var(--dsw-alias-state-warn-primary, #f5a524)"
 	},
 	name: {
-		fontWeight: 500,
+		fontWeight: 600,
 		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,
@@ -954,9 +983,9 @@ const styles = {
 		flexDirection: "column",
 		gap: 6,
 		border: "0.5px solid var(--dsw-alias-border-l2)",
-		borderRadius: "var(--dsw-radius-lg, 16px)",
-		padding: "8px 10px",
-		marginTop: 4
+		borderRadius: "var(--dsw-radius-lg, 12px)",
+		padding: "10px 12px",
+		background: "var(--dsw-alias-bg-layer-1)"
 	},
 	accountHeader: {
 		display: "flex",
@@ -982,14 +1011,33 @@ const styles = {
 		userSelect: "all"
 	},
 	badge: {
-		fontSize: 11,
-		lineHeight: "16px",
-		padding: "0 6px",
-		borderRadius: 8,
-		background: "var(--dsw-alias-bg-layer-1)",
+		fontSize: 10,
+		lineHeight: "14px",
+		padding: "1px 7px",
+		borderRadius: 999,
+		fontWeight: 500,
+		background: "var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-1))",
 		border: "0.5px solid var(--dsw-alias-border-l2)",
 		color: "var(--dsw-alias-label-secondary)"
 	},
+	badgeDefault: {
+		fontSize: 10,
+		lineHeight: "14px",
+		padding: "1px 7px",
+		borderRadius: 999,
+		fontWeight: 500,
+		background: "var(--dsw-alias-state-success-primary, #067647)",
+		color: "var(--dsw-alias-label-primary-foreground, #fff)"
+	},
+	badgeWarn: {
+		fontSize: 10,
+		lineHeight: "14px",
+		padding: "1px 7px",
+		borderRadius: 999,
+		fontWeight: 500,
+		background: "var(--dsw-alias-state-warn-primary, #f5a524)",
+		color: "var(--dsw-alias-label-primary-foreground, #fff)"
+	},
 	pushRight: {
 		marginLeft: "auto",
 		flexShrink: 0
@@ -1097,10 +1145,10 @@ const styles = {
 	usage: {
 		display: "flex",
 		flexDirection: "column",
-		gap: 6,
-		marginTop: 4,
+		gap: 8,
+		marginTop: 2,
 		borderTop: "0.5px solid var(--dsw-alias-border-l2)",
-		paddingTop: 8
+		paddingTop: 10
 	},
 	usageHeader: {
 		display: "flex",
@@ -1111,7 +1159,7 @@ const styles = {
 	usageRow: {
 		display: "flex",
 		flexDirection: "column",
-		gap: 3
+		gap: 4
 	},
 	usageLine: {
 		display: "flex",
@@ -1123,7 +1171,23 @@ const styles = {
 		height: 6,
 		borderRadius: 999,
 		background: "var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-2))",
-		overflow: "hidden"
+		overflow: "hidden",
+		boxShadow: "inset 0 0 0 1px #8a8f9833"
+	},
+	usageAccount: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 6,
+		padding: "8px 10px",
+		borderRadius: "var(--dsw-radius-md, 10px)",
+		background: "var(--dsw-alias-bg-layer-1)",
+		border: "0.5px solid var(--dsw-alias-border-l2)"
+	},
+	usageInline: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 6,
+		marginTop: 4
 	},
 	modelRow: {
 		display: "flex",
@@ -1233,11 +1297,11 @@ const styles = {
 	},
 	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)";
+/** Status dot style for one provider's connection state. */
+function dotStyle(status) {
+	if (status.busy) return styles.dotBusy;
+	if (status.loggedIn) return styles.dotLive;
+	return {};
 }
 /** Localized label for one provider-owned detail row. */
 function detailLabel(t, row) {
@@ -1255,70 +1319,38 @@ function windowAmount(window$1) {
 	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;
+/** One account's metered windows, rendered under its account row. */
+function AccountUsage(props) {
+	const { entry, t } = props;
+	if (entry === void 0) return null;
 	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")
+		style: styles.usageInline,
+		children: [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 ? "" : formatReset$1(window$1.resetsAt, t)
 				})]
-			}),
-			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 ? "" : formatReset$1(window$1.resetsAt, t)
-						})]
-					}), 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))
-		]
+			}), 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.windows.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			style: styles.statusLine,
+			children: t("usageNone")
+		})]
 	});
 }
 /** The pending-login block: a device code, or a link to the sign-in page. */
@@ -1522,15 +1554,28 @@ function ProviderCard(props) {
 	*/
 	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,
+		style: cardOpen ? {
+			...styles.card,
+			...styles.cardOpen
+		} : styles.card,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				style: styles.cardHeader,
+				role: "button",
+				tabIndex: 0,
+				"aria-expanded": cardOpen,
+				onClick: toggleCardOpen,
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						toggleCardOpen();
+					}
+				},
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						style: {
 							...styles.dot,
-							background: dotColor(status)
+							...dotStyle(status)
 						},
 						"aria-hidden": "true"
 					}),
@@ -1538,9 +1583,9 @@ function ProviderCard(props) {
 						style: styles.name,
 						children: status.displayName
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						style: styles.providerId,
-						children: status.provider
+					status.loggedIn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: styles.badgeDefault,
+						children: t("badgeLive")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						style: styles.cardSummary,
@@ -1552,7 +1597,10 @@ function ProviderCard(props) {
 						style: styles.pushRight,
 						"aria-expanded": cardOpen,
 						"aria-controls": `dsh-subscription-card-${status.provider}`,
-						onClick: toggleCardOpen,
+						onClick: (event) => {
+							event.stopPropagation();
+							toggleCardOpen();
+						},
 						children: cardOpen ? t("collapse") : t("edit")
 					})
 				]
@@ -1580,52 +1628,62 @@ function ProviderCard(props) {
 						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)),
+					accounts.map((account) => {
+						const usageEntry = (status.usage ?? []).find((entry) => entry.account === account.account);
+						return /* @__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)("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.badgeDefault,
+										children: t("defaultBadge")
+									}),
+									account.needsLogin === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: styles.badgeWarn,
+										title: t("accountNeedsLoginHint"),
+										children: t("accountNeedsLogin")
+									}),
+									usageEntry?.plan !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: styles.badge,
+										children: t("usagePlan", { plan: usageEntry.plan })
+									}),
+									/* @__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")
+									})
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountUsage, {
+								entry: usageEntry,
+								t
+							})]
+						}, account.account);
+					}),
 					status.loggedIn && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						style: styles.catalog,
 						children: [
@@ -1816,13 +1874,6 @@ function ProviderCard(props) {
 							})
 						]
 					}),
-					/* @__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: [
@@ -2079,6 +2130,20 @@ function SubscriptionsSection(props) {
 		startPolling,
 		stopPolling
 	]);
+	/**
+	* Signed-in providers read first: a route with a live account is the one a
+	* reader most likely wants, and `auto` (which owns no account) leads the rest.
+	* The sort is stable, so equal ranks keep the host's configured order.
+	*/
+	const orderedProviders = (0, react.useMemo)(() => {
+		const providers = status?.providers ?? [];
+		const rank = (provider) => {
+			if (provider.provider === "auto") return 0;
+			if (provider.loggedIn) return 1;
+			return 2;
+		};
+		return [...providers].sort((left, right) => rank(left) - rank(right));
+	}, [status?.providers]);
 	/** Run one action for one provider, reporting its own failure. */
 	const act = (0, react.useCallback)(async (provider, run) => {
 		setBusyAction(true);
@@ -2248,9 +2313,15 @@ function SubscriptionsSection(props) {
 		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")
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: styles.sectionHeader,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					style: styles.heading,
+					children: t("nav")
+				}), /* @__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",
@@ -2260,7 +2331,7 @@ function SubscriptionsSection(props) {
 				style: styles.statusLine,
 				children: t("loading")
 			}),
-			status?.providers.map((provider) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProviderCard, {
+			orderedProviders.map((provider) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProviderCard, {
 				status: provider,
 				t,
 				busyAction,