dsh-grok-subscription 0.1.12 → 0.1.13

package/README.md

@@ -25,7 +25,7 @@ dsh plugin --profile web add BaronCyrus/dsh-grok-subscription
 # 或本地路径
 # dsh plugin --profile web add /absolute/path/to/dsh-grok-subscription
 # 或 npm（发布后）
-# dsh plugin --profile web add dsh-grok-subscription@0.1.12
+# dsh plugin --profile web add dsh-grok-subscription@0.1.13
 ```
 
 然后重启 `dsh web`，打开 **Settings → Grok 订阅**。也可以在设置页点击“CLI 登录”或“设备码登录”；设备码流程会在启动 DSH 的终端中显示提示。登录完成后点击“从 Grok CLI 拉取”可立即同步；Chat 模型列表会随之刷新。
@@ -46,6 +46,10 @@ npm test
 npm run build
 ```
 
+## v0.1.13
+
+Chat 输入区模型选择旁增加 Codex 风格的每周剩余额度徽章（如 `16%`）；悬停/点击显示「每周额度 剩余 N% · 重置于 M/D HH:mm」。仅在当前会话 provider 为 `grok-build` 且用量 `ok` 时显示。Settings 中 Pull/登录成功后会派发刷新事件更新徽章。本地 0.1.13 供复测，**未发 npm**。升级后请用新 token URL 硬刷新。
+
 ## v0.1.12
 
 升级后请用 `dsh web` 新打印的带 token URL 打开，并硬刷新（Ctrl+Shift+R），避免旧 `/plugins` client 缓存。
@@ -115,7 +119,11 @@ dsh plugin --profile web add BaronCyrus/dsh-grok-subscription
 
 Reinstall after upgrades, restart `dsh web`, then open **Settings → Grok Subscription**.
 
-### v0.1.12
+### v0.1.13
+
+Chat 输入区模型选择旁增加 Codex 风格的每周剩余额度徽章（如 `16%`）；悬停/点击显示「每周额度 剩余 N% · 重置于 M/D HH:mm」。仅在当前会话 provider 为 `grok-build` 且用量 `ok` 时显示。Settings 中 Pull/登录成功后会派发刷新事件更新徽章。本地 0.1.13 供复测，**未发 npm**。升级后请用新 token URL 硬刷新。
+
+## v0.1.12
 
 After upgrading, open the fresh token URL from `dsh web` and hard-refresh (Ctrl+Shift+R) so the old immutable `/plugins` client is not reused.
 

package/lib/client.js

@@ -28,13 +28,13 @@ __export(client_exports, {
   pickCopy: () => pickCopy
 });
 module.exports = __toCommonJS(client_exports);
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/locales.js
 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",
+  subtitle: "\u7528 SuperGrok / X Premium\uFF08Grok Build\uFF09\u4F1A\u8BDD\uFF0C\u800C\u4E0D\u662F XAI_API_KEY\u3002\xB7 0.1.13",
   signedIn: "\u5DF2\u767B\u5F55",
   signedOut: "\u672A\u767B\u5F55",
   account: "\u8D26\u6237",
@@ -72,12 +72,16 @@ var zh = {
   usageProduct: "\u4EA7\u54C1\u660E\u7EC6",
   usageFetchedAt: "\u6700\u8FD1\u5237\u65B0",
   usageRefreshOk: "\u7528\u91CF\u5DF2\u5237\u65B0",
-  catalogRefreshOk: "\u6A21\u578B\u76EE\u5F55\u5DF2\u5237\u65B0"
+  catalogRefreshOk: "\u6A21\u578B\u76EE\u5F55\u5DF2\u5237\u65B0",
+  composerQuotaDetails: "\u6BCF\u5468\u989D\u5EA6",
+  composerQuotaRemaining: "\u6BCF\u5468\u989D\u5EA6 \u5269\u4F59 {remaining}%",
+  composerQuotaResets: "\u91CD\u7F6E\u4E8E {reset}",
+  composerQuotaResetUnknown: "\u91CD\u7F6E\u65F6\u95F4\u672A\u77E5"
 };
 var en = {
   nav: "Grok Subscription",
   title: "Grok Subscription",
-  subtitle: "Use a SuperGrok / X Premium (Grok Build) session, not XAI_API_KEY.",
+  subtitle: "Use a SuperGrok / X Premium (Grok Build) session, not XAI_API_KEY. \xB7 0.1.13",
   signedIn: "Signed in",
   signedOut: "Signed out",
   account: "Account",
@@ -115,7 +119,11 @@ var en = {
   usageProduct: "Product breakdown",
   usageFetchedAt: "Last refreshed",
   usageRefreshOk: "Usage refreshed",
-  catalogRefreshOk: "Model catalog refreshed"
+  catalogRefreshOk: "Model catalog refreshed",
+  composerQuotaDetails: "Weekly quota",
+  composerQuotaRemaining: "Weekly quota \xB7 {remaining}% left",
+  composerQuotaResets: "Resets {reset}",
+  composerQuotaResetUnknown: "Reset time unknown"
 };
 
 // src/rpc-contract.js
@@ -146,6 +154,7 @@ function unwrap(response) {
 }
 
 // src/constants.js
+var PROVIDER_ID = "grok-build";
 var LOCALE_NS = "settings.grokSubscription";
 var USAGE_PAGE_URL = "https://grok.com/?_s=usage";
 var SESSION_AUTH_MODES = Object.freeze(["oidc", "external", "web_login", "grok"]);
@@ -156,9 +165,339 @@ 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.jsx
+// src/client-composer-quota.jsx
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+
+// src/client-composer-quota-shared.js
+var QUICK_QUOTA_REFRESH_EVENT = "dsh-grok-subscription:refresh-quick-quota";
+var QUICK_QUOTA_REFRESH_MS = 6e4;
+var COMPOSER_QUOTA_STYLE = `
+.grokComposerQuota:focus-visible{outline:1px solid var(--dsw-alias-border-l3);outline-offset:2px}
+.grokComposerQuota{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;height:28px;box-sizing:border-box;padding:0 5px;border:0;border-radius:6px;background:transparent;cursor:pointer;color:var(--dsw-alias-label-secondary);font-family:inherit;font-size:12px;line-height:20px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
+.grokComposerQuota:hover,.grokComposerQuota[aria-expanded=true]{background:var(--dsw-alias-interactive-bg-hover)}
+.grokQuotaPopover{position:fixed;z-index:1000;width:max-content;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;box-sizing:border-box;padding:8px 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:9px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);box-shadow:0 4px 16px #0002;font-size:12px;line-height:20px;outline:none}
+.grokQuotaDetail>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.grokQuotaDetail strong{font-weight:500}
+.grokQuotaReset{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px}
+`;
+function fillTemplate(text, values) {
+  return Object.entries(values).reduce(
+    (next, [key, value]) => next.replaceAll(`{${key}}`, String(value)),
+    String(text ?? "")
+  );
+}
+function formatRemainingPercent(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
+  const rounded = Math.round(value * 10) / 10;
+  return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
+}
+function formatShortReset(usage) {
+  if (!usage || typeof usage !== "object") return void 0;
+  const iso = typeof usage.periodEnd === "string" ? usage.periodEnd : void 0;
+  if (iso) {
+    const ms = Date.parse(iso);
+    if (Number.isFinite(ms)) {
+      return new Date(ms).toLocaleString(void 0, {
+        month: "numeric",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+    }
+  }
+  const local = typeof usage.periodEndLocal === "string" ? usage.periodEndLocal.trim() : "";
+  if (!local) return void 0;
+  const match = local.match(/(\d{4})[/-](\d{1,2})[/-](\d{1,2})\s+(\d{1,2}):(\d{2})/);
+  if (match) {
+    return `${Number(match[2])}/${Number(match[3])} ${match[4]}:${match[5]}`;
+  }
+  return local;
+}
+function isComposerQuotaEnabled(provider, usage) {
+  if (provider !== PROVIDER_ID) return false;
+  if (!usage || usage.status !== "ok") return false;
+  return typeof usage.remainingPercent === "number" && Number.isFinite(usage.remainingPercent);
+}
+function notifyQuickQuota() {
+  try {
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new Event(QUICK_QUOTA_REFRESH_EVENT));
+    }
+  } catch {
+  }
+}
+
+// src/client-composer-quota.jsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var inject = ["slots", "locale", "connection", "settingsScope"];
+var QUICK_RPC_TIMEOUT_MS = 12e3;
+async function quickCall(rpc, endpoint) {
+  const controller = typeof AbortController !== "undefined" ? new AbortController() : void 0;
+  let timer;
+  try {
+    const call = rpc.call(CHANNEL, endpoint, {}, controller?.signal);
+    const timeout = new Promise((_, reject) => {
+      timer = setTimeout(() => {
+        try {
+          controller?.abort();
+        } catch {
+        }
+        reject(new Error(`Request timed out after ${QUICK_RPC_TIMEOUT_MS}ms`));
+      }, QUICK_RPC_TIMEOUT_MS);
+    });
+    return unwrap(await Promise.race([call, timeout]));
+  } finally {
+    if (timer) clearTimeout(timer);
+  }
+}
+function useAnchoredPositionFallback({ open, anchorRef }) {
+  const [position, setPosition] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!open || !anchorRef?.current) {
+      setPosition(null);
+      return void 0;
+    }
+    const place = () => {
+      const rect = anchorRef.current.getBoundingClientRect();
+      setPosition({
+        position: "fixed",
+        left: Math.max(12, Math.min(rect.left, window.innerWidth - 12)),
+        top: Math.max(12, rect.top - 8),
+        transform: "translateY(-100%)"
+      });
+    };
+    place();
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    return () => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    };
+  }, [open, anchorRef]);
+  return position;
+}
+function useDismissOnOutsidePointerFallback(triggerRef, open, dismiss, panelRef) {
+  (0, import_react.useEffect)(() => {
+    if (!open) return void 0;
+    const onPointer = (event) => {
+      const target = event.target;
+      if (triggerRef.current?.contains?.(target) || panelRef.current?.contains?.(target)) return;
+      dismiss();
+    };
+    document.addEventListener("pointerdown", onPointer, true);
+    return () => document.removeEventListener("pointerdown", onPointer, true);
+  }, [open, triggerRef, panelRef, dismiss]);
+}
+function loadAnchoringHooks() {
+  try {
+    const req = typeof require === "function" ? require : void 0;
+    const mod = req?.("@deepseek-ai/dsh-client-ui-primitives");
+    if (mod?.useAnchoredPosition && mod?.useDismissOnOutsidePointer) {
+      return {
+        useAnchoredPosition: mod.useAnchoredPosition,
+        useDismissOnOutsidePointer: mod.useDismissOnOutsidePointer
+      };
+    }
+  } catch {
+  }
+  return {
+    useAnchoredPosition: useAnchoredPositionFallback,
+    useDismissOnOutsidePointer: useDismissOnOutsidePointerFallback
+  };
+}
+var anchoring = loadAnchoringHooks();
+function useGrokQuickQuota(rpc, enabled) {
+  const [usage, setUsage] = (0, import_react.useState)(void 0);
+  (0, import_react.useEffect)(() => {
+    if (!enabled) {
+      setUsage(void 0);
+      return void 0;
+    }
+    let live = true;
+    let loading = false;
+    const accept = (next) => {
+      if (!live) return;
+      if (next && next.status === "ok" && typeof next.remainingPercent === "number" && Number.isFinite(next.remainingPercent)) {
+        setUsage(next);
+      } else {
+        setUsage(void 0);
+      }
+    };
+    const softRefresh = () => {
+      void quickCall(rpc, "usage/refresh").then((value) => {
+        if (value?.usage) accept(value.usage);
+      }).catch(() => {
+      });
+    };
+    const load = async () => {
+      if (loading) return;
+      loading = true;
+      try {
+        let status;
+        try {
+          status = await quickCall(rpc, "status");
+        } catch {
+          status = void 0;
+        }
+        if (!live) return;
+        if (status?.account?.signedIn !== true) {
+          try {
+            const value = await quickCall(rpc, "usage");
+            accept(value?.usage);
+          } catch {
+            accept(void 0);
+          }
+          return;
+        }
+        let next = status?.usage;
+        if (!next || next.status !== "ok") {
+          try {
+            const value = await quickCall(rpc, "usage");
+            next = value?.usage ?? next;
+          } catch {
+          }
+        }
+        if (!live) return;
+        accept(next);
+        softRefresh();
+      } catch {
+        if (live) setUsage(void 0);
+      } finally {
+        loading = false;
+      }
+    };
+    const refresh = () => {
+      void load();
+    };
+    void load();
+    const timer = window.setInterval(refresh, QUICK_QUOTA_REFRESH_MS);
+    window.addEventListener(QUICK_QUOTA_REFRESH_EVENT, refresh);
+    return () => {
+      live = false;
+      window.clearInterval(timer);
+      window.removeEventListener(QUICK_QUOTA_REFRESH_EVENT, refresh);
+    };
+  }, [rpc, enabled]);
+  return usage;
+}
+function GrokComposerQuota({ rpc, t, directory }) {
+  const modelState = (0, import_react.useSyncExternalStore)(
+    (listener) => directory.subscribe(listener),
+    () => directory.getSnapshot()
+  );
+  const current = modelState?.current;
+  const provider = current?.provider;
+  const providerEnabled = provider === PROVIDER_ID;
+  const usage = useGrokQuickQuota(rpc, providerEnabled);
+  const enabled = isComposerQuotaEnabled(provider, usage);
+  const remaining = enabled ? formatRemainingPercent(usage.remainingPercent) : void 0;
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const trigger = (0, import_react.useRef)(null);
+  const panel = (0, import_react.useRef)(null);
+  const pinned = (0, import_react.useRef)(false);
+  const dismissTimer = (0, import_react.useRef)(null);
+  const enter = () => {
+    clearTimeout(dismissTimer.current);
+    setOpen(true);
+  };
+  const leave = () => {
+    if (!pinned.current) dismissTimer.current = setTimeout(() => setOpen(false), 150);
+  };
+  const dismiss = () => {
+    pinned.current = false;
+    setOpen(false);
+  };
+  (0, import_react.useEffect)(() => () => clearTimeout(dismissTimer.current), []);
+  const id = (0, import_react.useId)();
+  const visible = open && enabled && remaining !== void 0;
+  const position = anchoring.useAnchoredPosition({
+    open: visible,
+    anchorRef: trigger,
+    panelRef: panel,
+    side: "top",
+    gap: 8,
+    margin: 12
+  });
+  anchoring.useDismissOnOutsidePointer(trigger, visible, dismiss, panel);
+  (0, import_react.useEffect)(() => {
+    setOpen(false);
+  }, [current?.model, enabled]);
+  (0, import_react.useEffect)(() => {
+    if (!visible) return void 0;
+    const escape = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      dismiss();
+      trigger.current?.focus?.();
+    };
+    document.addEventListener("keydown", escape);
+    return () => document.removeEventListener("keydown", escape);
+  }, [visible]);
+  if (!enabled || remaining === void 0) return null;
+  const reset = formatShortReset(usage);
+  const remainingLine = fillTemplate(t("composerQuotaRemaining"), { remaining });
+  const resetLine = reset ? fillTemplate(t("composerQuotaResets"), { reset }) : t("composerQuotaResetUnknown");
+  const detailsLabel = `${remainingLine} ${resetLine}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref: trigger,
+        type: "button",
+        className: "grokComposerQuota",
+        title: detailsLabel,
+        "aria-label": `${t("composerQuotaDetails")}: ${detailsLabel}`,
+        "aria-haspopup": "dialog",
+        "aria-expanded": visible,
+        "aria-controls": visible ? id : void 0,
+        onMouseEnter: enter,
+        onMouseLeave: leave,
+        onClick: () => {
+          if (pinned.current) dismiss();
+          else {
+            pinned.current = true;
+            setOpen(true);
+            requestAnimationFrame(() => panel.current?.focus?.());
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: `${remaining}%` })
+      }
+    ),
+    visible ? (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "section",
+        {
+          ref: panel,
+          id,
+          role: "dialog",
+          "aria-label": t("composerQuotaDetails"),
+          className: "grokQuotaPopover",
+          tabIndex: -1,
+          onMouseEnter: enter,
+          onMouseLeave: leave,
+          style: { ...position || {}, visibility: position ? "visible" : "hidden" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grokQuotaDetail", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: remainingLine }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "grokQuotaReset", children: resetLine })
+          ] }) })
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+
+// src/client.jsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var inject = [
+  "slots",
+  "locale",
+  "connection",
+  "settingsScope",
+  "modelDirectories",
+  "sessions",
+  "remote"
+];
 var RPC_CALL_TIMEOUT_MS = 12e3;
 function pickCopy(locale) {
   const language = typeof locale === "string" ? locale : locale?.language ?? locale?.lang;
@@ -199,18 +538,18 @@ function UsagePanel({ usage, t, usageBusy, onRefresh, signedIn }) {
   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_runtime.jsxs)("div", { className: "usageBlock", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: t("usageTitle") }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: t("usageSubtitle") }),
-    ok && used !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+  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_runtime.jsxs)("strong", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { children: [
           used,
           "%"
         ] }),
-        remaining !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        remaining !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
           " \xB7 ",
           t("usageRemaining"),
           " ",
@@ -218,46 +557,46 @@ function UsagePanel({ usage, t, usageBusy, onRefresh, signedIn }) {
           "%"
         ] }) : null
       ] }),
-      resetLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "muted", children: [
+      resetLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "muted", children: [
         t("usageReset"),
         ": ",
         resetLabel,
-        usage.periodEnd && usage.periodEndLocal ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        usage.periodEnd && usage.periodEndLocal ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
           " (",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: usage.periodEnd }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { children: usage.periodEnd }),
           ")"
         ] }) : null
       ] }) : null,
-      Array.isArray(usage.productUsage) && usage.productUsage.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: t("usageProduct") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: usage.productUsage.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+      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_runtime.jsxs)("p", { className: "muted", children: [
+      usage.fetchedAt ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "muted", children: [
         t("usageFetchedAt"),
         ": ",
         usage.fetchedAt
       ] }) : null
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { children: [
       t("usageUnavailable"),
       usage?.reason ? `: ${usage.reason}` : ""
     ] }),
-    usageBusy ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: t("busyUsage") }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled: Boolean(usageBusy) || !signedIn, onClick: onRefresh, children: t("usageRefresh") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: USAGE_PAGE_URL, target: "_blank", rel: "noreferrer", children: t("usageOpenGrok") })
+    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") })
     ] })
   ] });
 }
 function GrokSubscriptionSection({ rpc, t }) {
-  const [busy, setBusy] = (0, import_react.useState)("");
-  const [usageBusy, setUsageBusy] = (0, import_react.useState)(false);
-  const [error, setError] = (0, import_react.useState)("");
-  const [notice, setNotice] = (0, import_react.useState)("");
-  const [status, setStatus] = (0, import_react.useState)(void 0);
-  const initialUsageKick = (0, import_react.useRef)(false);
+  const [busy, setBusy] = (0, import_react2.useState)("");
+  const [usageBusy, setUsageBusy] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)("");
+  const [notice, setNotice] = (0, import_react2.useState)("");
+  const [status, setStatus] = (0, import_react2.useState)(void 0);
+  const initialUsageKick = (0, import_react2.useRef)(false);
   const applyPartial = (value) => {
     if (value?.account || value?.catalog || value?.usage) {
       setStatus((current) => ({ ...current, ...value }));
@@ -269,13 +608,14 @@ function GrokSubscriptionSection({ rpc, t }) {
     setError("");
     return value;
   };
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     void load().then((value) => {
       if (initialUsageKick.current) return;
       if (value?.account?.signedIn !== true) return;
       initialUsageKick.current = true;
       void callRpc(rpc, "usage/refresh", {}).then((partial) => {
         applyPartial(partial);
+        notifyQuickQuota();
       }).catch(() => {
       });
     }).catch((item) => {
@@ -290,6 +630,7 @@ function GrokSubscriptionSection({ rpc, t }) {
     });
     void callRpc(rpc, "usage/refresh", {}).then((partial) => {
       applyPartial(partial);
+      notifyQuickQuota();
     }).catch(() => {
     });
   };
@@ -322,6 +663,9 @@ function GrokSubscriptionSection({ rpc, t }) {
           "usage/refresh": "usageRefreshOk"
         }[endpoint];
         if (successKey) setNotice(t(successKey));
+        if (endpoint === "usage/refresh" && value?.ok !== false && !value?.error) {
+          notifyQuickQuota();
+        }
       }
     } catch (item) {
       setNotice("");
@@ -337,8 +681,8 @@ function GrokSubscriptionSection({ rpc, t }) {
   const catalog = status?.catalog;
   const models = catalog?.models ?? [];
   const signedIn = account?.signedIn === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "grokSubscription", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+  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; }
@@ -351,35 +695,35 @@ function GrokSubscriptionSection({ rpc, t }) {
         .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_runtime.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: t("title") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: t("subtitle") })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { 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_runtime.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { children: [
         t("account"),
         ": "
       ] }),
       signedIn ? `${t("signedIn")} \xB7 ${account.maskedAccount ?? t("unknownAccount")}` : t("signedOut")
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled: Boolean(busy), onClick: () => void run("login/cli"), children: t("loginCli") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled: Boolean(busy), onClick: () => void run("login/device"), children: t("loginDevice") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled: Boolean(busy), onClick: () => void run("pull"), children: t("pull") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled: Boolean(busy) || !signedIn, onClick: () => void run("logout"), children: t("logout") })
+    /* @__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") })
     ] }),
-    busy ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: t("busy") }) : null,
-    notice ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: notice }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "error", children: [
+    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_runtime.jsx)("p", { className: "muted", children: t("loginHint") }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: t("deviceHint") }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: t("pullHint") }),
-    status?.cliAvailable === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: t("cliMissing") }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__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,
       {
         usage: status?.usage,
@@ -389,21 +733,21 @@ function GrokSubscriptionSection({ rpc, t }) {
         onRefresh: () => void run("usage/refresh")
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: t("models") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: sourceLabel(catalog?.source, t) }),
-      models.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: t("noModels") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+    /* @__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: [
         model.name,
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: model.id })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { children: model.id })
       ] }, model.id)) }),
-      catalog?.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "error", children: [
+      catalog?.error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "error", children: [
         t("catalogError"),
         ": ",
         catalog.error
       ] }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: t("caveats") })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "muted", children: t("caveats") })
   ] });
 }
 function apply(ctx) {
@@ -432,6 +776,14 @@ function apply(ctx) {
     }
     return pickCopy(ctx.locale)[key] ?? key;
   };
+  ctx.effect?.(() => {
+    if (typeof document === "undefined") return void 0;
+    const tag = document.createElement("style");
+    tag.dataset.plugin = "dsh-grok-subscription";
+    tag.textContent = COMPOSER_QUOTA_STYLE;
+    document.head.append(tag);
+    return () => tag.remove();
+  }, "grok-subscription: composer-quota-style");
   ctx.slots.inject("settings.section", () => ctx.slots.register({
     name: "settings.section",
     id: "grok-subscription",
@@ -440,5 +792,38 @@ function apply(ctx) {
     locale: LOCALE_NS,
     inject: () => ({ rpc, t })
   }, GrokSubscriptionSection));
+  const installDirectorySlots = (scope) => {
+    let modelDirectories;
+    try {
+      modelDirectories = typeof scope.get === "function" ? scope.get("modelDirectories") : void 0;
+    } catch {
+      modelDirectories = void 0;
+    }
+    if (!modelDirectories?.directoryFor) {
+      try {
+        ctx.logger?.warn?.("Grok composer quota skipped: modelDirectories unavailable");
+      } catch {
+      }
+      return;
+    }
+    scope.slots.inject("conversation.input.right", () => scope.slots.register({
+      name: "conversation.input.right",
+      id: "grok-subscription-quota",
+      order: 16,
+      locale: LOCALE_NS,
+      inject: (sessionId) => ({
+        rpc,
+        t,
+        directory: modelDirectories.directoryFor(sessionId).store
+      })
+    }, GrokComposerQuota));
+  };
+  try {
+    const remoteSession = typeof ctx.get === "function" ? ctx.get("remote.session") : void 0;
+    if (remoteSession === void 0) installDirectorySlots(ctx);
+    else ctx.inject(["remote.session"], installDirectorySlots);
+  } catch {
+    installDirectorySlots(ctx);
+  }
 }
 return module.exports; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-grok-subscription",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Use a SuperGrok or X Premium Grok Build subscription in DeepSeek Harness",
   "type": "module",
   "main": "./lib/index.js",
@@ -23,8 +23,11 @@
     },
     "client": {
       "inject": [
+        "@deepseek-ai/dsh-api-remotes",
         "@deepseek-ai/dsh-client-connection",
         "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-model-selection",
         "@deepseek-ai/dsh-client-ui-settings",
         "@deepseek-ai/dsh-client-ui-slots"
       ],
@@ -60,7 +63,11 @@
     "@deepseek-ai/dsh-web": "^0.1.5-rc.2",
     "@earendil-works/pi-ai": "^0.82.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@deepseek-ai/dsh-api-remotes": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-model-selection": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.5-rc.2"
   },
   "peerDependenciesMeta": {
     "@deepseek-ai/dsh-client-connection": {
@@ -98,6 +105,18 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "@deepseek-ai/dsh-api-remotes": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-ui-conversation": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-ui-model-selection": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-client-ui-primitives": {
+      "optional": true
     }
   },
   "devDependencies": {