@huaqiu/dsh-auth 0.5.1 → 0.5.3

package/lib/client.js

@@ -107,6 +107,89 @@ window.__ModuleLoader__.load({
 		/**「Go to profile」destination: the eda.cn account page. */
 		const PROFILE_URL = "https://www.eda.cn/account/profile";
 		/**
+		* Subscription landing page — the same page `hq-eda-ai` serves at
+		* `gen.eda.cn/subscription` (token taken from the URL query; see its
+		* `UserInfoContext`). The preferred window size for BOTH surfaces (KiCad
+		* native dialog via DialogService.OpenUrl and the standalone iframe dialog)
+		* is 1400×740.
+		*/
+		const SUBSCRIPTION_ORIGIN = "https://gen.eda.cn";
+		const SUBSCRIPTION_PATH = "/subscription";
+		const SUBSCRIPTION_PREFERRED_SIZE = {
+			width: 1400,
+			height: 740
+		};
+		/**
+		* Build the subscription landing URL. Mirrors `buildProfileUrl`: the token is
+		* always attached — `gen.eda.cn/subscription` consumes it to establish the
+		* session and hides it itself. `encodeURIComponent` is required (tokens are
+		* base64-ish and may contain `+`, `/` or `=`).
+		*/
+		function buildSubscriptionUrl(options) {
+			return `${SUBSCRIPTION_ORIGIN}${SUBSCRIPTION_PATH}?token=${encodeURIComponent(options.token)}`;
+		}
+		const SUB_API_PREFIX = "/sub-api";
+		const SUB_API_SUCCESS_CODES = [200, 2e5];
+		function unwrapSubApiPayload(payload) {
+			if (payload && typeof payload === "object" && "code" in payload) {
+				const p = payload;
+				if (!SUB_API_SUCCESS_CODES.includes(p.code)) return null;
+				if (p.result !== void 0) return p.result;
+				if (p.data !== void 0) return p.data;
+				return;
+			}
+			return payload;
+		}
+		function quotaOf(subscription) {
+			if (!subscription || typeof subscription === "object" && Object.keys(subscription).length === 0) return {
+				hasSubscription: false,
+				packageName: "",
+				currentQuota: 0,
+				totalQuota: 0
+			};
+			const currentQuota = Number(subscription.currentQuota) || 0;
+			return {
+				hasSubscription: currentQuota > 0,
+				packageName: typeof subscription.packageName === "string" ? subscription.packageName : "",
+				currentQuota,
+				totalQuota: Number(subscription.totalQuota) || 0
+			};
+		}
+		/**
+		* Fetch the active subscription quota DIRECTLY from eda.cn
+		* (`GET {baseUrl}/sub-api/subscriptions/active?userId&productCode` with
+		* `x-token` + `X-User-Id` headers) — the same API `hq-eda-ai`'s
+		* `getActiveSubscription` and `hq-edge`'s ERC quota proxy call, so displaying
+		* the available quota never depends on an hq-edge hop.
+		*
+		* Returns null when the fetch/unwrap fails (callers decide fail-open vs
+		* fail-closed); a well-formed response always yields a `SubscriptionQuota`
+		* (possibly with `hasSubscription: false`).
+		*/
+		async function fetchSubscriptionQuota(options) {
+			const { userId, token, productCode, baseUrl = "https://www.eda.cn" } = options;
+			const fetchImpl = options.fetchImpl ?? fetch;
+			const url = `${baseUrl}${SUB_API_PREFIX}/subscriptions/active?${new URLSearchParams({
+				userId: String(userId),
+				productCode
+			}).toString()}`;
+			try {
+				const res = await fetchImpl(url, {
+					method: "GET",
+					headers: {
+						Accept: "application/json, text/plain, */*",
+						"Content-Type": "application/json",
+						"x-token": token,
+						"X-User-Id": String(userId)
+					}
+				});
+				if (!res || !res.ok) return null;
+				return quotaOf(unwrapSubApiPayload(await res.json()));
+			} catch {
+				return null;
+			}
+		}
+		/**
 		* Build the「Go to profile」URL: the eda.cn account page WITH the access token
 		* in the query, mirroring `hq-eda-ai`'s `UserMenu`
 		* (`/account/profile?token=…&phone=…`).
@@ -484,6 +567,22 @@ window.__ModuleLoader__.load({
 			"sidebar.account": "华秋EDA AI · 已登录",
 			"menu.profile": "个人中心",
 			"menu.logout": "退出登录",
+			"subscription.title": "订阅",
+			"subscription.dialogTitle": "华秋 EDA 订阅",
+			"subscription.gen": "系统设计（GEN）",
+			"subscription.erc": "电路检查（ERC）",
+			"subscription.package": "套餐：{name}",
+			"subscription.quota": "可用次数：{count}",
+			"subscription.quotaCount": "{used} / {total}次",
+			"subscription.noQuota": "无可用次数",
+			"subscription.unsubscribed": "未订阅",
+			"subscription.subscribe": "订阅 / 升级",
+			"subscription.subscribing": "正在打开订阅…",
+			"subscription.desc": "当前账号没有可用的 GEN 生成次数，请订阅或升级套餐后重试。",
+			"subscription.hostUnavailable": "无法打开订阅页面（宿主未提供对话框服务）。",
+			"subscription.quotaHeader": "套餐与使用额度",
+			"subscription.upgrade": "订阅 / 升级套餐",
+			"subscription.online": "在线",
 			"card.title": "华秋 EDA AI（eda.cn）登录",
 			"card.desc": "工具「{tool}」需要登录华秋 EDA AI 账号才能继续。请在下方的登录框完成登录（或点击左侧「华秋EDA AI登录」按钮）；登录完成后，回复助手「已登录，请重试」，助手会自动重新调用该工具。",
 			"card.loggedIn": "✓ 已登录{nickname} —— 现在可以回复助手「已登录，请重试」，助手会重新调用工具。",
@@ -502,6 +601,22 @@ window.__ModuleLoader__.load({
 				"sidebar.account": "Huaqiu EDA AI · signed in",
 				"menu.profile": "Go to profile",
 				"menu.logout": "Log out",
+				"subscription.title": "Subscription",
+				"subscription.dialogTitle": "Huaqiu EDA subscription",
+				"subscription.gen": "System design (GEN)",
+				"subscription.erc": "Circuit check (ERC)",
+				"subscription.package": "Plan: {name}",
+				"subscription.quota": "Available: {count}",
+				"subscription.quotaCount": "{used} / {total}",
+				"subscription.noQuota": "No quota left",
+				"subscription.unsubscribed": "Not subscribed",
+				"subscription.subscribe": "Subscribe / Upgrade",
+				"subscription.subscribing": "Opening subscription…",
+				"subscription.desc": "This account has no GEN generation quota left. Subscribe or upgrade to continue.",
+				"subscription.hostUnavailable": "Cannot open the subscription page (the host provides no dialog service).",
+				"subscription.quotaHeader": "Plan & usage quota",
+				"subscription.upgrade": "Subscribe / Upgrade plan",
+				"subscription.online": "Online",
 				"card.title": "Huaqiu EDA AI (eda.cn) login",
 				"card.desc": "Tool \"{tool}\" needs a Huaqiu EDA AI account. Complete the login below (or use the Huaqiu EDA AI button in the sidebar), then reply \"I have logged in, please retry\" so the assistant can retry the tool.",
 				"card.loggedIn": "✓ Logged in{nickname} — reply \"I have logged in, please retry\" and the assistant will retry the tool.",
@@ -583,8 +698,8 @@ window.__ModuleLoader__.load({
 		*/
 		const IFRAME_HEIGHT = 440;
 		const CARD_MAX_WIDTH = 768;
-		let container = null;
-		let unsubscribe$1 = null;
+		let container$1 = null;
+		let unsubscribe$2 = null;
 		let onCloseRequested = null;
 		/**
 		* Open the login dialog. Idempotent: a second call while open is a no-op
@@ -594,7 +709,7 @@ window.__ModuleLoader__.load({
 		* unblock its own `isOpen` state.
 		*/
 		function openLoginDialog(options = {}, onClose) {
-			if (container) return;
+			if (container$1) return;
 			syncUiEnv();
 			const locale = options.lang ?? getCurrentLocale();
 			const root = document.createElement("div");
@@ -672,6 +787,163 @@ window.__ModuleLoader__.load({
 			card.appendChild(iframe);
 			root.appendChild(card);
 			document.body.appendChild(root);
+			root.addEventListener("mousedown", backdropMouseDown$1);
+			card.addEventListener("mousedown", stopPropagation$1);
+			document.addEventListener("keydown", onKeyDown$1);
+			unsubscribe$2 = subscribeUiEnv(() => {
+				if (!container$1) return;
+				applyCardColors();
+				iframe.style.background = getCurrentSurfaceColor();
+				closeButton.title = translate(getCurrentLocale(), "dialog.close");
+				closeButton.setAttribute("aria-label", closeButton.title);
+			});
+			container$1 = root;
+			onCloseRequested = onClose ?? null;
+		}
+		/** Programmatic close (used by the auth client after a successful login). */
+		function closeLoginDialog() {
+			if (!container$1) return;
+			container$1.remove();
+			container$1 = null;
+			document.removeEventListener("keydown", onKeyDown$1);
+			unsubscribe$2?.();
+			unsubscribe$2 = null;
+			const cb = onCloseRequested;
+			onCloseRequested = null;
+			cb?.();
+		}
+		/** True while the dialog is mounted. */
+		function isLoginDialogOpen() {
+			return container$1 !== null;
+		}
+		function backdropMouseDown$1(event) {
+			if (event.target === container$1) closeLoginDialog();
+		}
+		function stopPropagation$1(event) {
+			event.stopPropagation();
+		}
+		function onKeyDown$1(event) {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				closeLoginDialog();
+			}
+		}
+		//#endregion
+		//#region src/client/ui/subscription-dialog.ts
+		/**
+		* The subscription dialog — a real modal (backdrop + centered card + iframe)
+		* for `gen.eda.cn/subscription`, mirroring the login dialog's DOM pattern
+		* (`ui/login-dialog.ts`): a fixed full-viewport semi-transparent backdrop +
+		* centered host-surface card + the subscription iframe.
+		*
+		* WHY A CARD AND NOT A FULL-VIEWPORT IFRAME
+		*
+		* Same reason as the login dialog: the iframe element sits on top of the
+		* host page, and Blink paints a WHITE base canvas behind any transparent
+		* region of the embedded doc. Putting the iframe inside a host-painted card
+		* masks that white in both light and dark themes (the card surface shows
+		* through wherever the embedded doc is transparent).
+		*
+		* SIZING: the subscription page prefers 1400×740 (`SUBSCRIPTION_PREFERRED_SIZE`,
+		* shared with the host-side native dialog via DialogService.OpenUrl). The card
+		* clamps to the viewport (`min(96vw, width)` × `min(92vh, height)`) so it can
+		* never overflow a small host window; the iframe fills the card.
+		*
+		* Close paths: backdrop click, the × button, and Escape. Unlike the login
+		* embed there is no postMessage close contract to honor — the page is
+		* `gen.eda.cn/subscription`, not `auth.eda.cn`.
+		*/
+		/** Aria / data attribute names — stable so tests and CSS can target them. */
+		const SUB_DIALOG_OVERLAY_ATTR = "data-hq-sub-dialog";
+		const SUB_DIALOG_CARD_ATTR = "data-hq-sub-dialog-card";
+		const SUB_DIALOG_IFRAME_ATTR = "data-hq-sub-dialog-iframe";
+		const SUB_DIALOG_CLOSE_ATTR = "data-hq-sub-dialog-close";
+		let container = null;
+		let unsubscribe$1 = null;
+		/**
+		* Open the subscription dialog. Idempotent: a second call while open is a
+		* no-op. `size` overrides the default 1400×740 preferred size (clamped to the
+		* viewport).
+		*/
+		function openSubscriptionDialog(url, options = {}, onClose) {
+			if (container) return;
+			syncUiEnv();
+			const locale = getCurrentLocale();
+			const width = Math.max(320, options.size?.width ?? SUBSCRIPTION_PREFERRED_SIZE.width);
+			const height = Math.max(240, options.size?.height ?? SUBSCRIPTION_PREFERRED_SIZE.height);
+			const root = document.createElement("div");
+			root.setAttribute(SUB_DIALOG_OVERLAY_ATTR, "");
+			root.style.cssText = [
+				"position:fixed",
+				"inset:0",
+				"width:100vw",
+				"height:100vh",
+				"border:0",
+				"z-index:2147483646",
+				"background:rgba(0, 0, 0, 0.55)",
+				"display:flex",
+				"align-items:center",
+				"justify-content:center",
+				"box-sizing:border-box"
+			].join(";");
+			const card = document.createElement("div");
+			card.setAttribute(SUB_DIALOG_CARD_ATTR, "");
+			const applyCardColors = () => {
+				card.style.cssText = [
+					`width:min(96vw, ${width}px)`,
+					`height:min(92vh, ${height}px)`,
+					"border-radius:12px",
+					"box-shadow:0 24px 48px rgba(0, 0, 0, 0.32)",
+					"position:relative",
+					"box-sizing:border-box",
+					`background:${getCurrentSurfaceColor()}`,
+					"display:flex",
+					"flex-direction:column",
+					"overflow:hidden"
+				].join(";");
+			};
+			applyCardColors();
+			const closeButton = document.createElement("button");
+			closeButton.setAttribute(SUB_DIALOG_CLOSE_ATTR, "");
+			closeButton.type = "button";
+			closeButton.setAttribute("aria-label", translate(locale, "dialog.close"));
+			closeButton.title = translate(locale, "dialog.close");
+			closeButton.textContent = "×";
+			closeButton.style.cssText = [
+				"position:absolute",
+				"top:6px",
+				"right:10px",
+				"width:28px",
+				"height:28px",
+				"border:0",
+				"background:transparent",
+				"color:var(--dsw-alias-label-secondary, #5b6472)",
+				"font-size:22px",
+				"line-height:1",
+				"cursor:pointer",
+				"border-radius:6px",
+				"padding:0",
+				"z-index:1"
+			].join(";");
+			closeButton.addEventListener("click", closeSubscriptionDialog);
+			const iframe = document.createElement("iframe");
+			iframe.setAttribute(SUB_DIALOG_IFRAME_ATTR, "");
+			iframe.src = url;
+			iframe.title = translate(locale, "subscription.dialogTitle");
+			iframe.allow = "clipboard-write";
+			iframe.style.cssText = [
+				"width:100%",
+				"height:100%",
+				"border:0",
+				"border-radius:8px",
+				`background:${getCurrentSurfaceColor()}`,
+				"display:block",
+				"flex:1 1 auto"
+			].join(";");
+			card.appendChild(closeButton);
+			card.appendChild(iframe);
+			root.appendChild(card);
+			document.body.appendChild(root);
 			root.addEventListener("mousedown", backdropMouseDown);
 			card.addEventListener("mousedown", stopPropagation);
 			document.addEventListener("keydown", onKeyDown);
@@ -683,26 +955,27 @@ window.__ModuleLoader__.load({
 				closeButton.setAttribute("aria-label", closeButton.title);
 			});
 			container = root;
-			onCloseRequested = onClose ?? null;
+			onCloseCallback = onClose ?? null;
 		}
-		/** Programmatic close (used by the auth client after a successful login). */
-		function closeLoginDialog() {
+		/** Programmatic close (used by the auth client / tests). */
+		function closeSubscriptionDialog() {
 			if (!container) return;
 			container.remove();
 			container = null;
 			document.removeEventListener("keydown", onKeyDown);
 			unsubscribe$1?.();
 			unsubscribe$1 = null;
-			const cb = onCloseRequested;
-			onCloseRequested = null;
+			const cb = onCloseCallback;
+			onCloseCallback = null;
 			cb?.();
 		}
-		/** True while the dialog is mounted. */
-		function isLoginDialogOpen() {
+		/** True while the subscription dialog is mounted. */
+		function isSubscriptionDialogOpen() {
 			return container !== null;
 		}
+		let onCloseCallback = null;
 		function backdropMouseDown(event) {
-			if (event.target === container) closeLoginDialog();
+			if (event.target === container) closeSubscriptionDialog();
 		}
 		function stopPropagation(event) {
 			event.stopPropagation();
@@ -710,7 +983,7 @@ window.__ModuleLoader__.load({
 		function onKeyDown(event) {
 			if (event.key === "Escape") {
 				event.stopPropagation();
-				closeLoginDialog();
+				closeSubscriptionDialog();
 			}
 		}
 		//#endregion
@@ -810,6 +1083,37 @@ window.__ModuleLoader__.load({
 					emit(null);
 					closeIframe();
 				},
+				getSubscriptionQuota: async (productCode) => {
+					if (hostMode && !hostSessionLoaded) await resolveHost();
+					const token = await auth.getAccessToken();
+					const id = hostMode ? hostSession?.id ?? null : hostSession?.id ?? storage.get()?.id ?? null;
+					if (!token || !id) return null;
+					return fetchSubscriptionQuota({
+						userId: id,
+						token,
+						productCode
+					});
+				},
+				openSubscriptionDialog: async () => {
+					if (hostMode && !hostSessionLoaded) await resolveHost();
+					const token = await auth.getAccessToken();
+					if (!token) return;
+					const url = buildSubscriptionUrl({ token });
+					if (hostMode) {
+						if (!deps.openHostDialog) return;
+						await deps.openHostDialog(url, {
+							title: "Huaqiu EDA subscription",
+							size: {
+								width: SUBSCRIPTION_PREFERRED_SIZE.width,
+								height: SUBSCRIPTION_PREFERRED_SIZE.height
+							},
+							key: "hq-subscription-dialog"
+						});
+						return;
+					}
+					if (isSubscriptionDialogOpen()) return;
+					openSubscriptionDialog(url, { size: SUBSCRIPTION_PREFERRED_SIZE });
+				},
 				onAuthStateChanged: (listener) => {
 					listeners.add(listener);
 					return () => listeners.delete(listener);
@@ -892,6 +1196,7 @@ window.__ModuleLoader__.load({
 				dispose() {
 					deps.windowLike.removeEventListener("message", onWindowMessage);
 					closeIframe();
+					if (isSubscriptionDialogOpen()) closeSubscriptionDialog();
 					hostMode = false;
 					hostSession = null;
 					hostSessionLoaded = false;
@@ -1184,18 +1489,40 @@ window.__ModuleLoader__.load({
 			danger: "var(--dsw-alias-state-error-primary, #d4380d)",
 			dangerHover: "rgba(216, 56, 13, 0.08)",
 			avatarBg: "var(--dsw-alias-bg-layer-2, #eef2f7)",
-			shadow: "0 12px 32px rgba(15, 23, 42, 0.16)"
+			shadow: "0 20px 40px -15px rgba(0, 0, 0, 0.12), 0 0 1px 1px rgba(0, 0, 0, 0.05)",
+			card: "#f7f8fa",
+			cardBorder: "#e8ebf0",
+			metric: "#f7f8fa",
+			metricHover: "#eef1f5",
+			primary: "#e62e2d",
+			primaryHover: "#cc2423",
+			primarySoft: "rgba(230, 46, 45, 0.08)",
+			track: "#e4e7ec",
+			genGradient: "linear-gradient(90deg, #3b82f6, #6366f1)",
+			ercGradient: "linear-gradient(90deg, #a855f7, #ec4899)",
+			online: "#10b981"
 		};
 		const DARK_PALETTE = {
-			surface: "var(--dsw-alias-bg-overlay, #20242c)",
-			border: "var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.14))",
+			surface: "var(--dsw-alias-bg-overlay, #1e1b24)",
+			border: "var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.10))",
 			text: "var(--dsw-alias-label-primary, #e6eaf0)",
 			muted: "var(--dsw-alias-label-secondary, #8b95a5)",
 			hover: "var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.08))",
 			danger: "var(--dsw-alias-state-error-primary, #ff7875)",
 			dangerHover: "rgba(255, 120, 117, 0.14)",
 			avatarBg: "var(--dsw-alias-bg-layer-2, rgba(255, 255, 255, 0.10))",
-			shadow: "0 12px 32px rgba(0, 0, 0, 0.46)"
+			shadow: "0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 1px 1px rgba(255, 255, 255, 0.1)",
+			card: "rgba(255, 255, 255, 0.03)",
+			cardBorder: "rgba(255, 255, 255, 0.08)",
+			metric: "rgba(0, 0, 0, 0.20)",
+			metricHover: "rgba(0, 0, 0, 0.30)",
+			primary: "#e62e2d",
+			primaryHover: "#cc2423",
+			primarySoft: "rgba(230, 46, 45, 0.10)",
+			track: "rgba(255, 255, 255, 0.10)",
+			genGradient: "linear-gradient(90deg, #3b82f6, #6366f1)",
+			ercGradient: "linear-gradient(90deg, #a855f7, #ec4899)",
+			online: "#10b981"
 		};
 		const TRIGGER_BASE = {
 			width: "100%",
@@ -1216,11 +1543,11 @@ window.__ModuleLoader__.load({
 		const MENU_BASE = {
 			position: "fixed",
 			zIndex: 2147483e3,
-			minWidth: 184,
-			padding: 6,
+			width: 320,
+			padding: 12,
 			borderWidth: 1,
 			borderStyle: "solid",
-			borderRadius: 12,
+			borderRadius: 16,
 			fontFamily: "inherit",
 			fontSize: 13
 		};
@@ -1247,22 +1574,47 @@ window.__ModuleLoader__.load({
 		};
 		/**
 		* One menu row. Hover is tracked in state: the client bundle ships no CSS
-		* file, so inline styles cannot express `:hover`.
+		* file, so inline styles cannot express `:hover`. `trailing` renders a
+		* chevron on the right (prototype nav rows), `danger` switches to the danger
+		* color scheme (prototype logout).
 		*/
-		function MenuItem({ label, icon, danger, palette, onSelect }) {
+		function MenuItem({ label, icon, trailing, danger, palette, onSelect }) {
 			const [hovered, setHovered] = (0, react.useState)(false);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				type: "button",
 				role: "menuitem",
 				style: {
 					...MENU_ITEM_BASE,
+					justifyContent: "space-between",
 					color: danger ? palette.danger : palette.text,
 					background: hovered ? danger ? palette.dangerHover : palette.hover : "transparent"
 				},
 				onMouseEnter: () => setHovered(true),
 				onMouseLeave: () => setHovered(false),
 				onClick: onSelect,
-				children: [icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 10,
+						minWidth: 0
+					},
+					children: [icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap"
+						},
+						children: label
+					})]
+				}), trailing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: {
+						display: "flex",
+						flex: "0 0 auto",
+						color: hovered ? danger ? palette.danger : palette.text : palette.muted
+					},
+					children: trailing
+				}) : null]
 			});
 		}
 		function UserIcon() {
@@ -1310,6 +1662,286 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/** GEN metric icon (lucide `cpu`, blue like the prototype). */
+		function CpuIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: 13,
+				height: 13,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "#3b82f6",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": true,
+				style: { flex: "0 0 auto" },
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						x: "4",
+						y: "4",
+						width: "16",
+						height: "16",
+						rx: "2"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						x: "9",
+						y: "9",
+						width: "6",
+						height: "6"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2" })
+				]
+			});
+		}
+		/** ERC metric icon (lucide `waves`, purple like the prototype). */
+		function WaveIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: 13,
+				height: 13,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "#a855f7",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": true,
+				style: { flex: "0 0 auto" },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2 12c1.5-3 3-3 4.5 0s3 3 4.5 0 3-3 4.5 0 3 3 4.5 0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2 17c1.5-3 3-3 4.5 0s3 3 4.5 0 3-3 4.5 0 3 3 4.5 0" })]
+			});
+		}
+		/** Upgrade-button crown (solid amber like the prototype). */
+		function CrownIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: 14,
+				height: 14,
+				viewBox: "0 0 24 24",
+				fill: "#fcd34d",
+				"aria-hidden": true,
+				style: { flex: "0 0 auto" },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2 18h20l-1.5-9-5.5 4L12 5.5 9 13l-5.5-4L2 18z" })
+			});
+		}
+		/** Trailing chevron for nav rows (lucide `chevron-right`). */
+		function ChevronRightIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: 12,
+				height: 12,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": true,
+				style: { flex: "0 0 auto" },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "9 18 15 12 9 6" })
+			});
+		}
+		/** Quota metric card: icon + label, mono count and a gradient progress bar. */
+		function QuotaMetric({ label, icon, quota, gradient, palette }) {
+			const t = useT();
+			const [hovered, setHovered] = (0, react.useState)(false);
+			const used = quota?.currentQuota;
+			const total = quota?.totalQuota;
+			const percent = quota?.hasSubscription && typeof total === "number" && total > 0 ? Math.max(0, Math.min(100, Math.round((used ?? 0) / total * 100))) : 0;
+			const value = quota ? quota.hasSubscription ? typeof total === "number" ? t("subscription.quotaCount", {
+				used: used ?? 0,
+				total
+			}) : String(used ?? 0) : t("subscription.unsubscribed") : "—";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "presentation",
+				style: {
+					background: hovered ? palette.metricHover : palette.metric,
+					borderRadius: 12,
+					border: `1px solid ${palette.cardBorder}`,
+					padding: 10,
+					boxSizing: "border-box",
+					transition: "background 0.15s ease"
+				},
+				onMouseEnter: () => setHovered(true),
+				onMouseLeave: () => setHovered(false),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						justifyContent: "space-between",
+						alignItems: "center",
+						gap: 8,
+						fontSize: 12,
+						marginBottom: 6
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 6,
+							fontWeight: 500,
+							color: palette.text,
+							minWidth: 0
+						},
+						children: [icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: label
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							fontWeight: 700,
+							color: quota?.hasSubscription ? palette.text : palette.danger,
+							fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+							fontSize: 12,
+							whiteSpace: "nowrap",
+							flexShrink: 0
+						},
+						title: value,
+						children: value
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: {
+						width: "100%",
+						height: 6,
+						borderRadius: 999,
+						background: palette.track,
+						overflow: "hidden"
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+						width: `${percent}%`,
+						height: "100%",
+						borderRadius: 999,
+						background: gradient
+					} })
+				})]
+			});
+		}
+		/**
+		* Profile header card (prototype): name + plan badge + phone line on the
+		* left, an "online" pill on the right. No redundant avatar — the trigger
+		* already shows it.
+		*/
+		function ProfileHeaderCard({ displayName, packageName, phone, palette }) {
+			const t = useT();
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "presentation",
+				style: {
+					padding: 10,
+					borderRadius: 12,
+					background: palette.card,
+					border: `1px solid ${palette.cardBorder}`,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					gap: 8,
+					marginBottom: 12,
+					boxSizing: "border-box"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						minWidth: 0,
+						flex: "1 1 auto"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 8,
+							minWidth: 0
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								fontSize: 14,
+								fontWeight: 700,
+								color: palette.text,
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: displayName
+						}), packageName ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								fontSize: 10,
+								background: palette.primarySoft,
+								color: palette.primary,
+								padding: "2px 6px",
+								borderRadius: 4,
+								fontWeight: 500,
+								border: `1px solid ${palette.primarySoft}`,
+								whiteSpace: "nowrap",
+								flexShrink: 0
+							},
+							children: packageName
+						}) : null]
+					}), phone ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: {
+							margin: 0,
+							marginTop: 2,
+							fontSize: 12,
+							color: palette.muted,
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap"
+						},
+						children: phone
+					}) : null]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					style: {
+						fontSize: 10,
+						background: "rgba(16, 185, 129, 0.10)",
+						color: palette.online,
+						padding: "2px 8px",
+						borderRadius: 999,
+						fontWeight: 500,
+						border: "1px solid rgba(16, 185, 129, 0.20)",
+						display: "flex",
+						alignItems: "center",
+						gap: 5,
+						flexShrink: 0
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+						width: 6,
+						height: 6,
+						borderRadius: 6,
+						background: palette.online
+					} }), t("subscription.online")]
+				})]
+			});
+		}
+		/** Full-width red-gradient upgrade button (prototype CTA). */
+		function UpgradeButton({ subscribing, palette, onClick }) {
+			const t = useT();
+			const [hovered, setHovered] = (0, react.useState)(false);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				style: {
+					width: "100%",
+					marginTop: 10,
+					padding: "9px 12px",
+					borderRadius: 12,
+					border: "none",
+					background: subscribing ? `linear-gradient(90deg, ${palette.primary}, #e11d48)` : hovered ? `linear-gradient(90deg, ${palette.primaryHover}, #be123c)` : `linear-gradient(90deg, ${palette.primary}, #e11d48)`,
+					color: "#ffffff",
+					fontSize: 12,
+					fontWeight: 600,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					gap: 8,
+					cursor: subscribing ? "default" : "pointer",
+					opacity: subscribing ? .72 : 1,
+					boxShadow: "0 8px 20px rgba(230, 46, 45, 0.22)",
+					transition: "background 0.15s ease, opacity 0.15s ease"
+				},
+				onMouseEnter: () => setHovered(true),
+				onMouseLeave: () => setHovered(false),
+				onClick,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CrownIcon, {}), subscribing ? t("subscription.subscribing") : t("subscription.upgrade")]
+			});
+		}
 		const HuaqiuAuthSidebarAction = (0, react.memo)(function HuaqiuAuthSidebarAction({ wide }) {
 			const authState = (0, react.useSyncExternalStore)(subscribeAuth, getAuthState);
 			const auth = getAuth();
@@ -1320,6 +1952,8 @@ window.__ModuleLoader__.load({
 			const [menuStyle, setMenuStyle] = (0, react.useState)(null);
 			const [avatarBroken, setAvatarBroken] = (0, react.useState)(false);
 			const [hovered, setHovered] = (0, react.useState)(false);
+			const [quota, setQuota] = (0, react.useState)(null);
+			const [subscribing, setSubscribing] = (0, react.useState)(false);
 			const triggerRef = (0, react.useRef)(null);
 			const menuRef = (0, react.useRef)(null);
 			const palette = dark ? DARK_PALETTE : LIGHT_PALETTE;
@@ -1357,6 +1991,22 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				if (!authenticated) setMenuOpen(false);
 			}, [authenticated]);
+			(0, react.useEffect)(() => {
+				if (!menuOpen || !authenticated) {
+					if (!menuOpen) setQuota(null);
+					return;
+				}
+				let cancelled = false;
+				Promise.all([auth?.getSubscriptionQuota?.("auto-design").catch(() => null) ?? Promise.resolve(null), auth?.getSubscriptionQuota?.("erc").catch(() => null) ?? Promise.resolve(null)]).then(([gen, erc]) => {
+					if (!cancelled) setQuota({
+						gen,
+						erc
+					});
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, [menuOpen, authenticated]);
 			(0, react.useLayoutEffect)(() => {
 				if (!menuOpen || !triggerRef.current) return;
 				const rect = triggerRef.current.getBoundingClientRect();
@@ -1367,12 +2017,10 @@ window.__ModuleLoader__.load({
 					color: palette.text,
 					boxShadow: palette.shadow,
 					left: Math.max(8, Math.round(rect.left)),
-					bottom: Math.max(8, Math.round(window.innerHeight - rect.top + 8)),
-					...wide ? { width: Math.round(rect.width) } : {}
+					bottom: Math.max(8, Math.round(window.innerHeight - rect.top + 8))
 				});
 			}, [
 				menuOpen,
-				wide,
 				avatar,
 				palette
 			]);
@@ -1423,6 +2071,16 @@ window.__ModuleLoader__.load({
 			const label = authenticated ? displayName ?? t("sidebar.account") : t("sidebar.login");
 			const title = authenticated ? t("sidebar.accountTitle") : t("sidebar.loginTitle");
 			const triggerBackground = menuOpen || hovered ? palette.hover : "transparent";
+			/**
+			* Open the subscription page. Host mode → the EDA host's native dialog
+			* (DialogService.OpenUrl, preferred size 1400×740); standalone DSH → the
+			* in-app iframe dialog at the same preferred size. No credential → no-op.
+			*/
+			const openSubscription = () => {
+				if (subscribing) return;
+				setSubscribing(true);
+				auth.openSubscriptionDialog().catch(() => {}).finally(() => setSubscribing(false));
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				style: {
 					position: "relative",
@@ -1487,19 +2145,85 @@ window.__ModuleLoader__.load({
 					role: "menu",
 					style: menuStyle,
 					children: [
-						displayName ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileHeaderCard, {
+							displayName: displayName ?? t("sidebar.account"),
+							packageName: quota?.gen?.packageName ?? quota?.erc?.packageName ?? null,
+							phone: authState.phone ?? null,
+							palette
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							role: "presentation",
 							style: {
 								...MENU_HEADER_BASE,
+								paddingTop: 0,
+								paddingBottom: 6,
+								fontSize: 11,
+								fontWeight: 600,
+								letterSpacing: .4,
+								textTransform: "uppercase",
 								color: palette.muted
 							},
-							title: displayName,
-							children: displayName
-						}) : null,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItem, {
-							label: t("menu.profile"),
-							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserIcon, {}),
+							children: t("subscription.quotaHeader")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							role: "presentation",
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 8
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaMetric, {
+								label: t("subscription.gen"),
+								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CpuIcon, {}),
+								quota: quota?.gen ?? null,
+								gradient: palette.genGradient,
+								palette
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaMetric, {
+								label: t("subscription.erc"),
+								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WaveIcon, {}),
+								quota: quota?.erc ?? null,
+								gradient: palette.ercGradient,
+								palette
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UpgradeButton, {
+							subscribing,
 							palette,
-							onSelect: openProfile
+							onClick: () => {
+								if (subscribing) return;
+								openSubscription();
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							role: "presentation",
+							style: {
+								height: 1,
+								margin: "12px 2px",
+								background: palette.border
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							role: "presentation",
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 2
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItem, {
+								label: t("menu.profile"),
+								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserIcon, {}),
+								trailing: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRightIcon, {}),
+								palette,
+								onSelect: openProfile
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							role: "presentation",
+							style: {
+								height: 1,
+								margin: "12px 2px",
+								background: palette.border
+							}
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItem, {
 							label: t("menu.logout"),
@@ -1570,7 +2294,16 @@ window.__ModuleLoader__.load({
 				storage: createAuthStorage(localStorage),
 				transport: createWebServerAuthTransport(),
 				windowLike: window,
-				documentLike: document
+				documentLike: document,
+				openHostDialog: async (url, options) => {
+					const hqEdge = ctx.get?.("hqEdge");
+					if (!hqEdge || typeof hqEdge.openUrl !== "function") return;
+					await hqEdge.openUrl(url, {
+						...options.title ? { title: options.title } : {},
+						...options.size ? { size: options.size } : {},
+						...options.key ? { key: options.key } : {}
+					});
+				}
 			});
 			registerHqEdgeGetter(() => ctx.get?.("hqEdge"));
 			const disposers = [];