dsh-plugin-subscriptions 0.1.0

package/lib/client/index.js

@@ -0,0 +1,35 @@
+// `.js` extension: this package's tsconfig lacks the reference repo's
+// allowImportingTsExtensions/rewriteRelativeImportExtensions pair; under
+// nodenext the .js specifier resolves to the .tsx source (see README note).
+import { SubscriptionsSection } from './SubscriptionsSection.js';
+import { en, zh } from './locales.js';
+/** Dictionary namespace owned by this plugin. */
+const NS = 'settings.subscriptions';
+/**
+ * Required services (cordis fiber inject): `slots` carries the registration
+ * seat, `connection` the `/subscriptions-auth` RPC caller, and `locale` the copy
+ * dictionaries.
+ */
+export const inject = ['slots', 'connection', 'locale'];
+/**
+ * Register the Subscriptions section once the `settings.section` declaration
+ * is on the ledger (the shell's apply order relative to this one is NOT
+ * constrained; registration depends on the slot through `slots.inject()`).
+ * @param ctx - client root context.
+ */
+export function apply(ctx) {
+    ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-plugin-subscriptions: copy dictionaries');
+    // The client-runtime Context merge types `connection` as the host handle;
+    // in the browser shell the same key holds the full client ConnectionHandle.
+    const connection = ctx.get('connection');
+    const t = ctx.locale.bind(NS);
+    const injected = () => ({ rpc: connection.rpc, t });
+    ctx.slots.inject('settings.section', () => ctx.slots.register({
+        name: 'settings.section',
+        id: 'subscriptions',
+        order: 90,
+        // A thunk re-evaluated per read, so the nav label follows the active locale.
+        label: () => t('nav'),
+        inject: injected,
+    }, SubscriptionsSection));
+}

package/lib/client/locales.d.ts

@@ -0,0 +1,45 @@
+/** Copy dictionaries for the Subscriptions settings section. */
+/** English strings (the key-set source of truth for this pair). */
+export declare const en: {
+    nav: string;
+    intro: string;
+    unavailable: string;
+    checking: string;
+    loginInProgress: string;
+    loggedIn: string;
+    loggedInAccount: string;
+    loggedInExpires: string;
+    loggedInAccountExpires: string;
+    notLoggedIn: string;
+    login: string;
+    cancel: string;
+    logout: string;
+    logoutConfirm: string;
+    manualSummary: string;
+    manualPlaceholder: string;
+    submit: string;
+    loginMissingUrl: string;
+};
+/** zh strings, one per {@link en} key. */
+export declare const zh: {
+    nav: string;
+    intro: string;
+    unavailable: string;
+    checking: string;
+    loginInProgress: string;
+    loggedIn: string;
+    loggedInAccount: string;
+    loggedInExpires: string;
+    loggedInAccountExpires: string;
+    notLoggedIn: string;
+    login: string;
+    cancel: string;
+    logout: string;
+    logoutConfirm: string;
+    manualSummary: string;
+    manualPlaceholder: string;
+    submit: string;
+    loginMissingUrl: string;
+};
+/** The Subscriptions namespace key union (en is the key-set source of truth). */
+export type SubscriptionsKey = keyof typeof en;

package/lib/client/locales.js

@@ -0,0 +1,43 @@
+/** Copy dictionaries for the Subscriptions settings section. */
+/** English strings (the key-set source of truth for this pair). */
+export const en = {
+    nav: 'Subscriptions',
+    intro: 'Log a subscription provider in or out. Login opens the provider’s authorization page in a new tab; headless setups can paste the callback URL or code instead.',
+    unavailable: 'Connection unavailable; subscription status cannot be loaded.',
+    checking: 'Checking…',
+    loginInProgress: 'Login in progress…',
+    loggedIn: 'Logged in',
+    loggedInAccount: 'Logged in as {account}',
+    loggedInExpires: 'Logged in · expires {date}',
+    loggedInAccountExpires: 'Logged in as {account} · expires {date}',
+    notLoggedIn: 'Not logged in',
+    login: 'Log in',
+    cancel: 'Cancel',
+    logout: 'Log out',
+    logoutConfirm: 'Log out of {provider}?',
+    manualSummary: 'Browser flow not working? Paste the callback URL or code',
+    manualPlaceholder: 'Paste the callback URL or code',
+    submit: 'Submit',
+    loginMissingUrl: 'login answered without an authorizeUrl',
+};
+/** zh strings, one per {@link en} key. */
+export const zh = {
+    nav: '订阅',
+    intro: '在此登录或退出订阅服务商。点击登录会在新标签页打开服务商的授权页面；无浏览器环境可改为粘贴回调 URL 或授权码。',
+    unavailable: '连接不可用，无法加载订阅状态。',
+    checking: '查询中…',
+    loginInProgress: '登录中…',
+    loggedIn: '已登录',
+    loggedInAccount: '已登录：{account}',
+    loggedInExpires: '已登录 · 过期时间 {date}',
+    loggedInAccountExpires: '已登录：{account} · 过期时间 {date}',
+    notLoggedIn: '未登录',
+    login: '登录',
+    cancel: '取消',
+    logout: '退出登录',
+    logoutConfirm: '确定退出 {provider} 的登录吗？',
+    manualSummary: '浏览器流程无法完成？粘贴回调 URL 或授权码',
+    manualPlaceholder: '粘贴回调 URL 或授权码',
+    submit: '提交',
+    loginMissingUrl: 'login 响应缺少 authorizeUrl',
+};

package/lib/client.js

@@ -0,0 +1,546 @@
+window.__ModuleLoader__.load({ id: "dsh-plugin-subscriptions", 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 section. */
+/** English strings (the key-set source of truth for this pair). */
+const en = {
+	nav: "Subscriptions",
+	intro: "Log a subscription provider in or out. Login opens the provider’s authorization page in a new tab; headless setups can paste the callback URL or code instead.",
+	unavailable: "Connection unavailable; subscription status cannot be loaded.",
+	checking: "Checking…",
+	loginInProgress: "Login in progress…",
+	loggedIn: "Logged in",
+	loggedInAccount: "Logged in as {account}",
+	loggedInExpires: "Logged in · expires {date}",
+	loggedInAccountExpires: "Logged in as {account} · expires {date}",
+	notLoggedIn: "Not logged in",
+	login: "Log in",
+	cancel: "Cancel",
+	logout: "Log out",
+	logoutConfirm: "Log out of {provider}?",
+	manualSummary: "Browser flow not working? Paste the callback URL or code",
+	manualPlaceholder: "Paste the callback URL or code",
+	submit: "Submit",
+	loginMissingUrl: "login answered without an authorizeUrl"
+};
+/** zh strings, one per {@link en} key. */
+const zh = {
+	nav: "订阅",
+	intro: "在此登录或退出订阅服务商。点击登录会在新标签页打开服务商的授权页面；无浏览器环境可改为粘贴回调 URL 或授权码。",
+	unavailable: "连接不可用，无法加载订阅状态。",
+	checking: "查询中…",
+	loginInProgress: "登录中…",
+	loggedIn: "已登录",
+	loggedInAccount: "已登录：{account}",
+	loggedInExpires: "已登录 · 过期时间 {date}",
+	loggedInAccountExpires: "已登录：{account} · 过期时间 {date}",
+	notLoggedIn: "未登录",
+	login: "登录",
+	cancel: "取消",
+	logout: "退出登录",
+	logoutConfirm: "确定退出 {provider} 的登录吗？",
+	manualSummary: "浏览器流程无法完成？粘贴回调 URL 或授权码",
+	manualPlaceholder: "粘贴回调 URL 或授权码",
+	submit: "提交",
+	loginMissingUrl: "login 响应缺少 authorizeUrl"
+};
+
+//#endregion
+//#region src/client/SubscriptionsSection.tsx
+/** Logical RPC channel served by the node half of this plugin. */
+const SUBSCRIPTIONS_AUTH_CHANNEL = "/subscriptions-auth";
+/** Poll cadence while a provider login attempt is busy. */
+const POLL_INTERVAL_MS = 2e3;
+/** Card display metadata, in page order (names are brand names, not translated). */
+const PROVIDERS = [
+	{
+		id: "codex",
+		name: "Codex (ChatGPT)"
+	},
+	{
+		id: "claude",
+		name: "Claude"
+	},
+	{
+		id: "grok",
+		name: "Grok (X Premium)"
+	}
+];
+/** Business error returned by the `/subscriptions-auth` channel (error branch message). */
+var SubscriptionsAuthError = class extends Error {};
+/**
+* Call one `/subscriptions-auth` endpoint and unwrap the business result.
+* @param rpc - Connection RPC caller.
+* @param endpoint - channel-relative endpoint.
+* @param payload - channel-owned request payload.
+* @returns the success value, cast by the caller to the endpoint's shape.
+*/
+async function callSubscriptionsAuth(rpc, endpoint, payload) {
+	let result;
+	try {
+		result = await rpc.call(SUBSCRIPTIONS_AUTH_CHANNEL, endpoint, payload);
+	} catch (error) {
+		throw new SubscriptionsAuthError(error instanceof Error ? error.message : String(error));
+	}
+	if (!result.ok) throw new SubscriptionsAuthError(result.error.message);
+	return result.value;
+}
+/** Human text of an action failure, SubscriptionsAuthError or not. */
+function messageOf(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+/**
+* English-dictionary fallback for a missing inject `t` (standalone renders);
+* the slot inject always supplies the locale-bound one.
+* @param key - dictionary key.
+* @param params - `{name}` template params.
+* @returns the template with params substituted.
+*/
+function fallbackTranslate(key, params) {
+	let text = en[key];
+	for (const [name, value] of Object.entries(params ?? {})) text = text.replaceAll(`{${name}}`, String(value));
+	return text;
+}
+const styles = {
+	section: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 12,
+		maxWidth: 560,
+		color: "var(--dsw-alias-label-primary)"
+	},
+	intro: {
+		margin: 0,
+		color: "var(--dsw-alias-label-tertiary)",
+		fontSize: 14,
+		lineHeight: "22px"
+	},
+	card: {
+		border: "1px solid var(--dsw-alias-border-l2)",
+		borderRadius: 12,
+		padding: "12px 14px",
+		display: "flex",
+		flexDirection: "column",
+		gap: 6
+	},
+	cardHeader: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8
+	},
+	dot: {
+		width: 8,
+		height: 8,
+		borderRadius: "50%",
+		flexShrink: 0
+	},
+	name: {
+		fontWeight: 500,
+		fontSize: 14,
+		lineHeight: "22px",
+		color: "var(--dsw-alias-label-primary)"
+	},
+	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)"
+	},
+	actions: {
+		display: "flex",
+		gap: 8,
+		marginTop: 4,
+		alignItems: "center",
+		flexWrap: "wrap"
+	},
+	button: {
+		boxSizing: "border-box",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: 28,
+		padding: "0 10px",
+		borderRadius: 14,
+		border: "1px solid var(--dsw-alias-border-l2)",
+		background: "transparent",
+		color: "var(--dsw-alias-label-primary)",
+		font: "inherit",
+		fontSize: 12,
+		lineHeight: "18px",
+		cursor: "pointer"
+	},
+	manual: {
+		marginTop: 4,
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-label-secondary)"
+	},
+	manualRow: {
+		display: "flex",
+		gap: 8,
+		marginTop: 6
+	},
+	manualInput: {
+		flex: 1,
+		height: 32,
+		boxSizing: "border-box",
+		border: "1px solid var(--dsw-alias-border-l2)",
+		borderRadius: 8,
+		padding: "0 10px",
+		font: "inherit",
+		fontSize: 14,
+		lineHeight: "22px",
+		background: "var(--dsw-alias-bg-layer-1)",
+		color: "var(--dsw-alias-label-primary)"
+	}
+};
+/** Status dot color for one provider state. */
+function dotColor(status) {
+	if (status?.busy === true) return "var(--dsw-alias-state-warn-label)";
+	if (status?.loggedIn === true) return "var(--dsw-alias-state-success-primary)";
+	return "var(--dsw-alias-label-dimmed)";
+}
+/**
+* One-line status text for one provider state.
+* @param t - section translate.
+* @param status - the provider's last reported state.
+* @returns the localized status line.
+*/
+function statusText(t, status) {
+	if (status === void 0) return t("checking");
+	if (status.busy) return t("loginInProgress");
+	if (status.loggedIn) {
+		const params = {};
+		if (status.account !== void 0) params.account = status.account;
+		if (status.expiresAt !== void 0) params.date = new Date(status.expiresAt).toLocaleString();
+		if (params.account !== void 0 && params.date !== void 0) return t("loggedInAccountExpires", params);
+		if (params.account !== void 0) return t("loggedInAccount", params);
+		if (params.date !== void 0) return t("loggedInExpires", params);
+		return t("loggedIn");
+	}
+	return t("notLoggedIn");
+}
+/**
+* The Subscriptions settings page component.
+* @param props - the slot inject face ({@link SubscriptionsSectionInjected}).
+* @returns the section body, or a notice while the RPC face is absent.
+*/
+function SubscriptionsSection(props) {
+	const { rpc } = props;
+	const t = props.t ?? fallbackTranslate;
+	const [statuses, setStatuses] = (0, react.useState)({});
+	const [errors, setErrors] = (0, react.useState)({});
+	const [manualDrafts, setManualDrafts] = (0, react.useState)({
+		codex: "",
+		claude: "",
+		grok: ""
+	});
+	const mountedRef = (0, react.useRef)(true);
+	const pollersRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const setProviderError = (0, react.useCallback)((provider, message) => {
+		if (!mountedRef.current) return;
+		setErrors((prev) => {
+			const next = { ...prev };
+			if (message === void 0) delete next[provider];
+			else next[provider] = message;
+			return next;
+		});
+	}, []);
+	const stopPolling = (0, react.useCallback)((provider) => {
+		const poller = pollersRef.current.get(provider);
+		if (poller !== void 0) {
+			clearInterval(poller);
+			pollersRef.current.delete(provider);
+		}
+	}, []);
+	/** Refetch every provider's status; stop a provider's poller once its attempt settles. */
+	const refresh = (0, react.useCallback)(async () => {
+		if (rpc === void 0) return;
+		let response;
+		try {
+			response = await callSubscriptionsAuth(rpc, "status", {});
+		} catch {
+			return;
+		}
+		if (!mountedRef.current) return;
+		setStatuses(response.providers);
+		for (const { id } of PROVIDERS) {
+			const status = response.providers[id];
+			if (status.loggedIn || !status.busy) stopPolling(id);
+		}
+	}, [rpc, stopPolling]);
+	const startPolling = (0, react.useCallback)((provider) => {
+		if (pollersRef.current.has(provider)) return;
+		pollersRef.current.set(provider, setInterval(() => {
+			refresh();
+		}, POLL_INTERVAL_MS));
+	}, [refresh]);
+	(0, react.useEffect)(() => {
+		mountedRef.current = true;
+		refresh().then(() => {
+			if (!mountedRef.current) return;
+			setStatuses((current) => {
+				for (const { id } of PROVIDERS) if (current[id]?.busy === true) startPolling(id);
+				return current;
+			});
+		});
+		return () => {
+			mountedRef.current = false;
+			for (const poller of pollersRef.current.values()) clearInterval(poller);
+			pollersRef.current.clear();
+		};
+	}, [refresh, startPolling]);
+	const login = (0, react.useCallback)(async (provider) => {
+		if (rpc === void 0) return;
+		setProviderError(provider, void 0);
+		try {
+			const response = await callSubscriptionsAuth(rpc, "login", { provider });
+			if (typeof response.authorizeUrl !== "string" || response.authorizeUrl === "") throw new SubscriptionsAuthError(t("loginMissingUrl"));
+			window.open(response.authorizeUrl, "_blank", "noopener");
+			if (!mountedRef.current) return;
+			setStatuses((prev) => ({
+				...prev,
+				[provider]: {
+					...prev[provider],
+					busy: true,
+					loggedIn: false
+				}
+			}));
+			startPolling(provider);
+		} catch (error) {
+			setProviderError(provider, messageOf(error));
+		}
+	}, [
+		rpc,
+		t,
+		setProviderError,
+		startPolling
+	]);
+	const cancel = (0, react.useCallback)(async (provider) => {
+		if (rpc === void 0) return;
+		stopPolling(provider);
+		try {
+			await callSubscriptionsAuth(rpc, "cancel", { provider });
+		} catch (error) {
+			setProviderError(provider, messageOf(error));
+		}
+		await refresh();
+	}, [
+		rpc,
+		stopPolling,
+		setProviderError,
+		refresh
+	]);
+	const submitManual = (0, react.useCallback)(async (provider) => {
+		if (rpc === void 0) return;
+		const input = manualDrafts[provider].trim();
+		if (input === "") return;
+		setProviderError(provider, void 0);
+		try {
+			await callSubscriptionsAuth(rpc, "manual", {
+				provider,
+				input
+			});
+			if (mountedRef.current) setManualDrafts((prev) => ({
+				...prev,
+				[provider]: ""
+			}));
+		} catch (error) {
+			setProviderError(provider, messageOf(error));
+		}
+		await refresh();
+	}, [
+		rpc,
+		manualDrafts,
+		setProviderError,
+		refresh
+	]);
+	const logout = (0, react.useCallback)(async (provider, name) => {
+		if (rpc === void 0) return;
+		if (!window.confirm(t("logoutConfirm", { provider: name }))) return;
+		setProviderError(provider, void 0);
+		try {
+			await callSubscriptionsAuth(rpc, "logout", { provider });
+		} catch (error) {
+			setProviderError(provider, messageOf(error));
+		}
+		await refresh();
+	}, [
+		rpc,
+		t,
+		setProviderError,
+		refresh
+	]);
+	if (rpc === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		style: styles.intro,
+		children: t("unavailable")
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: styles.section,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			style: styles.intro,
+			children: t("intro")
+		}), PROVIDERS.map(({ id, name }) => {
+			const status = statuses[id];
+			const busy = status?.busy === true;
+			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)
+						} }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: styles.name,
+							children: name
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles.statusLine,
+						children: statusText(t, status)
+					}),
+					status?.detail !== void 0 && status.detail !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles.statusLine,
+						children: status.detail
+					}),
+					errors[id] !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles.errorLine,
+						children: errors[id]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: styles.actions,
+						children: [
+							!busy && status?.loggedIn !== true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								style: styles.button,
+								onClick: () => {
+									login(id);
+								},
+								children: t("login")
+							}),
+							busy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								style: styles.button,
+								onClick: () => {
+									cancel(id);
+								},
+								children: t("cancel")
+							}),
+							status?.loggedIn === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								style: styles.button,
+								onClick: () => {
+									logout(id, name);
+								},
+								children: t("logout")
+							})
+						]
+					}),
+					busy && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+						style: styles.manual,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("manualSummary") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: styles.manualRow,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								style: styles.manualInput,
+								value: manualDrafts[id],
+								placeholder: t("manualPlaceholder"),
+								onChange: (event) => setManualDrafts((prev) => ({
+									...prev,
+									[id]: event.target.value
+								}))
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								style: styles.button,
+								onClick: () => {
+									submitManual(id);
+								},
+								children: t("submit")
+							})]
+						})]
+					})
+				]
+			}, id);
+		})]
+	});
+}
+
+//#endregion
+//#region src/client/index.ts
+/** Dictionary namespace owned by this plugin. */
+const NS = "settings.subscriptions";
+/**
+* Required services (cordis fiber inject): `slots` carries the registration
+* seat, `connection` the `/subscriptions-auth` RPC caller, and `locale` the copy
+* dictionaries.
+*/
+const inject = [
+	"slots",
+	"connection",
+	"locale"
+];
+/**
+* Register the Subscriptions section once the `settings.section` declaration
+* is on the ledger (the shell's apply order relative to this one is NOT
+* constrained; registration depends on the slot through `slots.inject()`).
+* @param ctx - client root context.
+*/
+function apply(ctx) {
+	ctx.effect(() => ctx.locale.register(NS, {
+		zh,
+		en
+	}), "dsh-plugin-subscriptions: copy dictionaries");
+	const connection = ctx.get("connection");
+	const t = ctx.locale.bind(NS);
+	const injected = () => ({
+		rpc: connection.rpc,
+		t
+	});
+	ctx.slots.inject("settings.section", () => ctx.slots.register({
+		name: "settings.section",
+		id: "subscriptions",
+		order: 90,
+		label: () => t("nav"),
+		inject: injected
+	}, SubscriptionsSection));
+}
+
+//#endregion
+exports.apply = apply;
+exports.inject = inject;
+return module.exports; } });
+//# sourceMappingURL=client.js.map