dsh-grok-subscription 1.0.2 → 1.0.3

package/README.en.md

@@ -25,7 +25,7 @@ Models, reasoning effort, and weekly quota all stay inside DSH.
 
 ## Three-step start
 
-1. **Install the plugin.** Run the command below; to select a candidate version, enter the full `package@version`, for example `dsh-grok-subscription@1.0.2`.
+1. **Install the plugin.** Run the command below; to select a candidate version, enter the full `package@version`, for example `dsh-grok-subscription@1.0.3`.
 
    ```sh
    dsh plugin --profile web add BaronCyrus/dsh-grok-subscription
@@ -57,13 +57,13 @@ These capabilities reuse the same local Grok Build sign-in.
   <img src="docs/assets/settings-account.webp" width="820" alt="The Grok Subscription page in DSH Settings: sign-in status, account, login buttons and credential notes">
 </p>
 
-The **Settings → Grok Subscription** screen shows sign-in status and a masked account, offers CLI login, device-code login, pull from the Grok CLI, and logout, and explains how credentials are read. Account and time values in the screenshot are demo data.
+The **Settings → Grok Subscription** screen uses a status chip for the sign-in state, and an account card offering CLI login, device-code login, pull from the Grok CLI, and logout; how credentials are read lives in a collapsible "How signing in works" disclosure. It is styled with DSH's own design tokens, so it follows the light and dark theme. Account and time values in the screenshot are demo data.
 
 <p align="center">
   <img src="docs/assets/settings-usage.webp" width="820" alt="The experimental usage panel in Grok Subscription settings: 6% used, about 94% remaining">
 </p>
 
-The experimental usage panel comes from an undocumented subscription billing endpoint (`/v1/billing?format=credits`). It is informational: the endpoint may change or disappear, a failed read never shows an invented percentage, and chat is unaffected.
+The experimental usage panel comes from an undocumented subscription billing endpoint (`/v1/billing?format=credits`): the remaining share is drawn as a progress bar and per-product rows are listed separately. It is informational: the endpoint may change or disappear, a failed read never shows an invented percentage, and chat is unaffected.
 
 ## Prepare DSH
 
@@ -89,7 +89,7 @@ dsh plugin --profile web add BaronCyrus/dsh-grok-subscription
 You can also install the version published on npm:
 
 ```sh
-dsh plugin --profile web add dsh-grok-subscription@1.0.2
+dsh plugin --profile web add dsh-grok-subscription@1.0.3
 ```
 
 DSH handles target selection, the profile lock, dependency resolution, and bundle activation.

package/README.md

@@ -25,7 +25,7 @@
 
 ## 三步开始
 
-1. **安装插件**：在终端运行下面的命令；指定候选版本时填写完整的 `包名@版本`，例如 `dsh-grok-subscription@1.0.2`。
+1. **安装插件**：在终端运行下面的命令；指定候选版本时填写完整的 `包名@版本`，例如 `dsh-grok-subscription@1.0.3`。
 
    ```sh
    dsh plugin --profile web add BaronCyrus/dsh-grok-subscription
@@ -57,13 +57,13 @@
   <img src="docs/assets/settings-account.webp" width="820" alt="DSH 设置中的 Grok 订阅页面：登录状态、账号、登录按钮与凭据说明">
 </p>
 
-上图为 **设置 → Grok 订阅** 主界面：显示登录状态与脱敏账号，提供 CLI 登录、设备码登录、从 Grok CLI 拉取和登出，并说明凭据的读取方式。截图中的账号与时间均为演示数据。
+上图为 **设置 → Grok 订阅** 主界面：顶部状态胶囊显示登录状态，账户卡片提供 CLI 登录、设备码登录、从 Grok CLI 拉取和登出，凭据读取方式收在可展开的「登录方式说明」里。样式沿用 DSH 自身的设计变量，因此跟随主题明暗切换。截图中的账号与时间均为演示数据。
 
 <p align="center">
   <img src="docs/assets/settings-usage.webp" width="820" alt="Grok 订阅设置页中的实验性用量面板：已用 6%、剩余约 94%">
 </p>
 
-实验性用量面板来自未公开的订阅计费接口（`/v1/billing?format=credits`）。它仅供参考：接口可能随时变化或消失，读取失败时不会显示编造的百分比，也不影响聊天。
+实验性用量面板来自未公开的订阅计费接口（`/v1/billing?format=credits`）：剩余比例以进度条呈现，产品明细逐行列出。它仅供参考：接口可能随时变化或消失，读取失败时不会显示编造的百分比，也不影响聊天。
 
 ## 准备 DSH
 
@@ -89,7 +89,7 @@ dsh plugin --profile web add BaronCyrus/dsh-grok-subscription
 也可以按 npm 上的已发布版本安装：
 
 ```sh
-dsh plugin --profile web add dsh-grok-subscription@1.0.2
+dsh plugin --profile web add dsh-grok-subscription@1.0.3
 ```
 
 目标选择、profile 锁、依赖解析和 bundle 激活均由 DSH 负责。

package/lib/client.js

@@ -34,7 +34,7 @@ var import_react2 = require("react");
 var zh = {
   nav: "Grok \u8BA2\u9605",
   title: "Grok \u8BA2\u9605",
-  subtitle: "\u7528 SuperGrok / X Premium\uFF08Grok Build\uFF09\u4F1A\u8BDD\uFF0C\u800C\u4E0D\u662F XAI_API_KEY\u3002\xB7 1.0.2",
+  subtitle: "\u7528 SuperGrok / X Premium\uFF08Grok Build\uFF09\u4F1A\u8BDD\uFF0C\u800C\u4E0D\u662F XAI_API_KEY\u3002\xB7 1.0.3",
   signedIn: "\u5DF2\u767B\u5F55",
   signedOut: "\u672A\u767B\u5F55",
   account: "\u8D26\u6237",
@@ -52,6 +52,8 @@ var zh = {
   loginHint: "\u4F1A\u5728\u542F\u52A8 DSH \u7684\u7EC8\u7AEF\u4E2D\u8FD0\u884C grok login\u3002\u8BF7\u5728\u7EC8\u7AEF\u6216\u6D4F\u89C8\u5668\u4E2D\u5B8C\u6210\u6388\u6743\uFF0C\u7136\u540E\u7B49\u5F85\u540C\u6B65\u3002",
   deviceHint: "\u8BBE\u5907\u7801\u63D0\u793A\u4F1A\u51FA\u73B0\u5728 DSH \u7EC8\u7AEF\u3002\u4E5F\u53EF\u624B\u52A8\u8FD0\u884C grok login --device-auth\uFF0C\u5B8C\u6210\u540E\u70B9\u201C\u4ECE Grok CLI \u62C9\u53D6\u201D\u3002",
   pullHint: "\u5B89\u5168\u8BFB\u53D6 ~/.grok/auth.json\uFF08\u62D2\u7EDD\u7B26\u53F7\u94FE\u63A5\u4E0E\u7EC4/\u5176\u4ED6\u4EBA\u53EF\u8BFB\uFF09\uFF0C\u53EA\u628A\u77ED\u671F access token \u5199\u5165 DSH\u3002",
+  loginHelp: "\u767B\u5F55\u65B9\u5F0F\u8BF4\u660E",
+  refreshCatalog: "\u5237\u65B0\u6A21\u578B\u76EE\u5F55",
   busy: "\u5904\u7406\u4E2D\u2026",
   busyCatalog: "\u6B63\u5728\u5237\u65B0\u6A21\u578B\u76EE\u5F55\u2026",
   busyUsage: "\u6B63\u5728\u5237\u65B0\u7528\u91CF\u2026",
@@ -81,7 +83,7 @@ var zh = {
 var en = {
   nav: "Grok Subscription",
   title: "Grok Subscription",
-  subtitle: "Use a SuperGrok / X Premium (Grok Build) session, not XAI_API_KEY. \xB7 1.0.2",
+  subtitle: "Use a SuperGrok / X Premium (Grok Build) session, not XAI_API_KEY. \xB7 1.0.3",
   signedIn: "Signed in",
   signedOut: "Signed out",
   account: "Account",
@@ -99,6 +101,8 @@ var en = {
   loginHint: "Runs grok login in the terminal that started DSH. Finish the browser or CLI prompt there, then wait for sync.",
   deviceHint: "The device-code prompt appears in the DSH terminal. You can also run grok login --device-auth yourself, then Pull from Grok CLI.",
   pullHint: "Reads ~/.grok/auth.json securely (refuses symlinks and group/other-readable files) and stores only the short-lived access token in DSH.",
+  loginHelp: "How signing in works",
+  refreshCatalog: "Refresh model catalog",
   busy: "Working\u2026",
   busyCatalog: "Refreshing model catalog\u2026",
   busyUsage: "Refreshing usage\u2026",
@@ -165,6 +169,83 @@ var REQUEST_IMAGE_PIXEL_BUDGET = 2048 * 2048;
 var REQUEST_IMAGE_MAX_BYTES = 1024 * 1024;
 var FALLBACK_MODEL_IDS = Object.freeze(["grok-4.7", "grok-4.6", "grok-4.5"]);
 
+// src/client-settings-style.js
+var SETTINGS_STYLE = `
+.grokSubscription{display:flex;flex-direction:column;gap:10px;max-width:720px;color:var(--dsw-alias-label-primary);container-type:inline-size}
+.grokSubscription h2,.grokSubscription h3,.grokSubscription p{margin:0}
+.grokSubscription h2{font-size:16px;line-height:24px;font-weight:500}
+.grokSubscription h3{font-size:15px;line-height:22px;font-weight:600}
+
+.gsHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.gsLead{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:20px}
+
+.gsCard{border:.5px solid var(--dsw-alias-border-l4);background:var(--dsw-alias-bg-layer-3);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
+.gsCardHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.gsCardHead .gsSpacer{flex:1;min-width:0}
+
+.gsChip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12px;line-height:18px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);white-space:nowrap}
+.gsChip--ok{color:var(--dsw-alias-state-success-primary)}
+.gsChip--off{color:var(--dsw-alias-label-tertiary)}
+.gsChip--warn{color:var(--dsw-alias-state-warn-label)}
+.gsChip--error{color:var(--dsw-alias-label-error)}
+.gsDot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
+
+.gsAccount{font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
+
+.gsActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+.gsBtn{box-sizing:border-box;height:36px;font:inherit;cursor:pointer;border:.5px solid var(--dsw-alias-border-l3);border-radius:18px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;font-size:14px;line-height:22px;color:var(--dsw-alias-label-primary);background:0 0;transition:background .16s,border-color .16s,color .16s}
+.gsBtn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.gsBtn:focus-visible{outline:2px solid var(--dsw-alias-border-l3);outline-offset:2px}
+.gsBtn:disabled{opacity:.45;cursor:not-allowed}
+.gsBtn--primary{background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground);border-color:transparent}
+.gsBtn--primary:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover)}
+.gsBtn--danger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover-danger);color:var(--dsw-alias-label-error);border-color:var(--dsw-alias-label-error)}
+
+.gsStatus{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary)}
+.gsStatus--ok{color:var(--dsw-alias-state-success-primary)}
+.gsStatus--error{color:var(--dsw-alias-label-error)}
+.gsStatus--warn{color:var(--dsw-alias-state-warn-label)}
+.gsStatus--busy{color:var(--dsw-alias-label-tertiary)}
+
+.gsDisclosure{margin:0}
+.gsDisclosure>summary{display:flex;align-items:center;gap:8px;min-height:28px;cursor:pointer;list-style:none;font-size:13px;line-height:20px;color:var(--dsw-alias-label-secondary)}
+.gsDisclosure>summary::-webkit-details-marker{display:none}
+.gsDisclosure>summary:hover{color:var(--dsw-alias-label-primary)}
+.gsDisclosure>summary:focus-visible{outline:2px solid var(--dsw-alias-border-l3);outline-offset:4px;border-radius:4px}
+.gsChevron{flex:none;transition:transform .16s}
+.gsDisclosure[open] .gsChevron{transform:rotate(180deg)}
+.gsDisclosureBody{display:flex;flex-direction:column;gap:6px;padding-top:8px;margin-top:8px;border-top:.5px solid var(--dsw-alias-border-l2)}
+.gsDisclosureBody p{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+
+.gsGauge{display:flex;flex-direction:column;gap:8px}
+.gsGaugeTop{display:flex;align-items:baseline;gap:8px}
+.gsGaugeValue{font-size:24px;line-height:30px;font-weight:600;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums}
+.gsGaugeLabel{font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+.gsBar{height:6px;border-radius:999px;background:color-mix(in srgb, var(--dsw-alias-label-primary) 14%, transparent);overflow:hidden}
+.gsBar>span{display:block;height:100%;border-radius:999px;background:var(--dsw-alias-brand-primary);transition:width .2s}
+.gsGaugeMeta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+.gsGaugeMeta code{font-size:11px;color:var(--dsw-alias-label-tertiary)}
+
+.gsRows{display:flex;flex-direction:column;gap:0}
+.gsRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;font-size:13px;line-height:20px;border-top:.5px solid var(--dsw-alias-border-l2)}
+.gsRow:first-child{border-top:none}
+.gsRowValue{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
+
+.gsModels{display:flex;flex-wrap:wrap;gap:6px}
+.gsModel{display:inline-flex;align-items:baseline;gap:6px;border:.5px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);border-radius:10px;padding:4px 10px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-primary)}
+.gsModel code{font-size:11px;color:var(--dsw-alias-label-tertiary)}
+
+.gsHint,.gsEmpty,.gsCaveat{margin:0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.gsCaveat{font-size:11px;line-height:17px;color:var(--dsw-alias-label-tertiary)}
+.gsLink{color:var(--dsw-alias-link);font-size:13px;line-height:20px;text-decoration:none;align-self:center}
+.gsLink:hover{text-decoration:underline}
+
+@container (max-width: 420px){
+  .grokSubscription .gsGaugeValue{font-size:20px;line-height:26px}
+  .grokSubscription .gsBtn{flex:1 1 auto}
+}
+`;
+
 // src/client-composer-quota.jsx
 var import_react = require("react");
 var import_react_dom = require("react-dom");
@@ -533,60 +614,66 @@ async function callRpc(rpc, endpoint, payload = {}) {
     if (timer) clearTimeout(timer);
   }
 }
+function Chevron() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "gsChevron", width: "12", height: "12", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 6l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Chip({ tone = "off", children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: `gsChip gsChip--${tone}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gsDot" }),
+    children
+  ] });
+}
 function UsagePanel({ usage, t, usageBusy, onRefresh, signedIn }) {
   const ok = usage?.status === "ok";
   const used = ok ? formatPercent(usage.usedPercent) : void 0;
   const remaining = ok ? formatPercent(usage.remainingPercent) : void 0;
   const resetLabel = usage?.periodEndLocal || usage?.periodEnd;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "usageBlock", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: t("usageTitle") }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "muted", children: t("usageSubtitle") }),
-    ok && used !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { children: [
-        t("usageUsed"),
-        ": ",
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { children: [
-          used,
+  const gaugeValue = remaining ?? (used !== void 0 ? formatPercent(100 - Number(used)) : void 0);
+  const gaugeLabel = remaining !== void 0 ? t("usageRemaining") : t("usageUsed");
+  const fill = typeof gaugeValue === "number" && Number.isFinite(gaugeValue) ? Math.min(100, Math.max(0, gaugeValue)) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsCard", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gsCardHead", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { children: t("usageTitle") }) }),
+    ok && (used !== void 0 || remaining !== void 0) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsGauge", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsGaugeTop", children: [
+        gaugeValue !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "gsGaugeValue", children: [
+          gaugeValue,
           "%"
-        ] }),
-        remaining !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-          " \xB7 ",
-          t("usageRemaining"),
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gsGaugeLabel", children: gaugeLabel })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gsBar", role: "img", "aria-label": `${gaugeLabel} ${gaugeValue ?? 0}%`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { width: `${fill}%` } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsGaugeMeta", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+          t("usageUsed"),
           " ",
-          remaining,
+          used ?? "\u2014",
           "%"
-        ] }) : null
-      ] }),
-      resetLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "muted", children: [
-        t("usageReset"),
-        ": ",
-        resetLabel,
-        usage.periodEnd && usage.periodEndLocal ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-          " (",
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { children: usage.periodEnd }),
-          ")"
-        ] }) : null
-      ] }) : null,
-      Array.isArray(usage.productUsage) && usage.productUsage.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "muted", children: t("usageProduct") }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { children: usage.productUsage.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { children: [
-          row.name ?? "\u2014",
-          typeof row.usedPercent === "number" ? ` \xB7 ${formatPercent(row.usedPercent)}%` : ""
-        ] }, `${row.name ?? "row"}-${index}`)) })
-      ] }) : null,
-      usage.fetchedAt ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "muted", children: [
-        t("usageFetchedAt"),
-        ": ",
-        usage.fetchedAt
-      ] }) : null
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { children: [
+        ] }),
+        resetLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+          t("usageReset"),
+          " ",
+          resetLabel
+        ] }) : null,
+        usage.periodEnd && usage.periodEndLocal ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { children: usage.periodEnd }) : null
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "gsEmpty", children: [
       t("usageUnavailable"),
       usage?.reason ? `: ${usage.reason}` : ""
     ] }),
-    usageBusy ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "muted", children: t("busyUsage") }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", disabled: Boolean(usageBusy) || !signedIn, onClick: onRefresh, children: t("usageRefresh") }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: USAGE_PAGE_URL, target: "_blank", rel: "noreferrer", children: t("usageOpenGrok") })
+    Array.isArray(usage.productUsage) && usage.productUsage.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gsRows", children: usage.productUsage.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsRow", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: row.name ?? "\u2014" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gsRowValue", children: typeof row.usedPercent === "number" ? `${formatPercent(row.usedPercent)}%` : "\u2014" })
+    ] }, `${row.name ?? "row"}-${index}`)) }) : null,
+    usage.fetchedAt ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "gsHint", children: [
+      t("usageFetchedAt"),
+      ": ",
+      usage.fetchedAt
+    ] }) : null,
+    usageBusy ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gsStatus gsStatus--busy", children: t("busyUsage") }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gsHint", children: t("usageSubtitle") }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsActions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "gsBtn", type: "button", disabled: Boolean(usageBusy) || !signedIn, onClick: onRefresh, children: t("usageRefresh") }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { className: "gsLink", href: USAGE_PAGE_URL, target: "_blank", rel: "noreferrer", children: t("usageOpenGrok") })
     ] })
   ] });
 }
@@ -660,7 +747,8 @@ function GrokSubscriptionSection({ rpc, t }) {
           "login/cli": "loginOk",
           "login/device": "loginOk",
           logout: "logoutOk",
-          "usage/refresh": "usageRefreshOk"
+          "usage/refresh": "usageRefreshOk",
+          "catalog/refresh": "catalogRefreshOk"
         }[endpoint];
         if (successKey) setNotice(t(successKey));
         if (endpoint === "usage/refresh" && value?.ok !== false && !value?.error) {
@@ -682,47 +770,43 @@ function GrokSubscriptionSection({ rpc, t }) {
   const models = catalog?.models ?? [];
   const signedIn = account?.signedIn === true;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: "grokSubscription", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
-        .grokSubscription { display: grid; gap: 12px; max-width: 42rem; }
-        .grokSubscription h2 { margin: 0 0 4px; font-size: 1.15rem; }
-        .grokSubscription p, .grokSubscription li { line-height: 1.5; }
-        .grokSubscription .muted { opacity: 0.78; font-size: 0.92rem; }
-        .grokSubscription .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
-        .grokSubscription button { cursor: pointer; }
-        .grokSubscription .error { color: #b42318; }
-        .grokSubscription .notice { color: #067647; }
-        .grokSubscription ul { margin: 0; padding-left: 1.2rem; }
-        .grokSubscription .usageBlock { display: grid; gap: 8px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
-        .grokSubscription a { color: inherit; }
-      ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: SETTINGS_STYLE }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsHead", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: t("title") }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "muted", children: t("subtitle") })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Chip, { tone: signedIn ? "ok" : "off", children: signedIn ? t("signedIn") : t("signedOut") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { children: [
-        t("account"),
-        ": "
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gsLead", children: t("subtitle") }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsCard", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsCardHead", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { children: t("account") }),
+        signedIn && account?.maskedAccount ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gsAccount", children: account.maskedAccount }) : null
       ] }),
-      signedIn ? `${t("signedIn")} \xB7 ${account.maskedAccount ?? t("unknownAccount")}` : t("signedOut")
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", disabled: Boolean(busy), onClick: () => void run("login/cli"), children: t("loginCli") }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", disabled: Boolean(busy), onClick: () => void run("login/device"), children: t("loginDevice") }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", disabled: Boolean(busy), onClick: () => void run("pull"), children: t("pull") }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", disabled: Boolean(busy) || !signedIn, onClick: () => void run("logout"), children: t("logout") })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsActions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "gsBtn gsBtn--primary", type: "button", disabled: Boolean(busy), onClick: () => void run("login/cli"), children: t("loginCli") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "gsBtn", type: "button", disabled: Boolean(busy), onClick: () => void run("login/device"), children: t("loginDevice") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "gsBtn", type: "button", disabled: Boolean(busy), onClick: () => void run("pull"), children: t("pull") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "gsBtn gsBtn--danger", type: "button", disabled: Boolean(busy) || !signedIn, onClick: () => void run("logout"), children: t("logout") })
+      ] }),
+      busy ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gsStatus gsStatus--busy", children: t("busy") }) : null,
+      notice ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gsStatus gsStatus--ok", children: notice }) : null,
+      error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "gsStatus gsStatus--error", children: [
+        t("error"),
+        ": ",
+        error
+      ] }) : null,
+      status?.cliAvailable === false ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gsStatus gsStatus--warn", children: t("cliMissing") }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("details", { className: "gsDisclosure", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("summary", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Chevron, {}),
+          t("loginHelp")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsDisclosureBody", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: t("loginHint") }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: t("deviceHint") }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: t("pullHint") })
+        ] })
+      ] })
     ] }),
-    busy ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "muted", children: t("busy") }) : null,
-    notice ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "notice", children: notice }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "error", children: [
-      t("error"),
-      ": ",
-      error
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "muted", children: t("loginHint") }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "muted", children: t("deviceHint") }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "muted", children: t("pullHint") }),
-    status?.cliAvailable === false ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "muted", children: t("cliMissing") }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       UsagePanel,
       {
@@ -733,21 +817,25 @@ function GrokSubscriptionSection({ rpc, t }) {
         onRefresh: () => void run("usage/refresh")
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: t("models") }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "muted", children: sourceLabel(catalog?.source, t) }),
-      models.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: t("noModels") }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { children: models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsCard", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gsCardHead", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { children: t("models") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gsSpacer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Chip, { tone: catalog?.source === "live" ? "ok" : catalog?.source === "fallback" ? "warn" : "off", children: sourceLabel(catalog?.source, t) })
+      ] }),
+      models.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gsEmpty", children: t("noModels") }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gsModels", children: models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "gsModel", children: [
         model.name,
         " ",
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { children: model.id })
       ] }, model.id)) }),
-      catalog?.error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "error", children: [
+      catalog?.error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "gsStatus gsStatus--error", children: [
         t("catalogError"),
         ": ",
         catalog.error
-      ] }) : null
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gsActions", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "gsBtn", type: "button", disabled: !signedIn, onClick: () => void run("catalog/refresh"), children: t("refreshCatalog") }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "muted", children: t("caveats") })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "gsCaveat", children: t("caveats") })
   ] });
 }
 function apply(ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-grok-subscription",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Use a SuperGrok or X Premium Grok Build subscription in DeepSeek Harness",
   "type": "module",
   "main": "./lib/index.js",