dsh-plugin-billing 0.0.0-stage → 0.1.0

package/src/client-body.js

@@ -0,0 +1,642 @@
+/**
+ * 余额与金额行的浏览器侧实现 —— 会被构建脚本拼进 `lib/client.js` 的 factory 闭包
+ * （见 `scripts/build-client.mjs`）。同样是**纯声明**，没有 import/export。
+ *
+ * 放在 conversation composer 的 dock 里，紧跟 ui-conversation 自己的 StatsLine
+ * （`id: "stats"`，`order: 0`），所以它显示在统计行下方、输入框上方。
+ *
+ * 金额口径：
+ * - **本轮**：取已加载记录里最后一个轮次的 assistant 节点用量，按该轮发生时刻的
+ *   单价计价，因此高峰/空闲切换会自动跟随。
+ * - **本会话**：把每个轮次各自按各自时刻的单价计价后求和。
+ *
+ * 会话语料来自会话窗口内的节点（与 StatsLine 的统计行同源）；被压缩或分页移出
+ * 窗口的历史不在其中，因此会话金额是“已加载记录”的口径。
+ */
+
+/** 余额路由（由本插件 Host 侧注册）。 */
+const SUMMARY_URL = '/plugins/billing/summary';
+
+/** 价格表路由：`GET` 读当前表，`POST .../refresh` 从官方页更新（写本机覆盖文件）。 */
+const PRICES_URL = '/plugins/billing/prices';
+const PRICES_REFRESH_URL = PRICES_URL + '/refresh';
+
+/** 余额刷新间隔（毫秒）。每个轮次结束也会立即刷新一次。 */
+const REFRESH_MS = 60 * 1000;
+
+/**
+ * 价格表版本号：设置里点完「立即更新」后 +1，金额行据此**立刻**重算，
+ * 不用等它自己那一分钟一次的轮询。
+ */
+let pricesEpoch = 0;
+const pricesListeners = new Set();
+
+/** 通知所有金额行：价格变了。 */
+function bumpPricesEpoch() {
+  pricesEpoch += 1;
+  for (const listener of pricesListeners) listener();
+}
+
+/** 订阅价格版本号（放在 effect 依赖里就会跟着重跑）。 */
+function usePricesEpoch() {
+  const [value, setValue] = react.useState(pricesEpoch);
+  react.useEffect(function () {
+    const listener = function () {
+      setValue(pricesEpoch);
+    };
+    pricesListeners.add(listener);
+    return function () {
+      pricesListeners.delete(listener);
+    };
+  }, []);
+  return value;
+}
+
+
+/** 本插件的 locale 命名空间。 */
+const NS = 'billing';
+
+/** 文案字典：zh / en 双份，由 ctx.locale.register 注册。 */
+const zh = {
+  'balance': '余额 {amount}',
+  'balance.unavailable': '余额 —',
+  'turn': '本轮 {amount}',
+  'session': '本会话 {amount}',
+  'turn.unpriced': '未配置单价',
+  'detail.balance': '余额 {total}（赠送 {granted} · 充值 {toppedUp}）',
+  'detail.balanceUnavailable': '余额不可用：{reason}',
+  'detail.modelSession': '按 {model} 计价（该会话实际路由）',
+  'detail.modelDefault': '按 {model} 计价（部署默认路由，未取到会话路由）',
+  'detail.ratePeak': '高峰价',
+  'detail.rateOffPeak': '空闲价',
+  'detail.rate': '{period} {currency}/百万 tokens：命中 {hit} · 未命中 {miss} · 输出 {out}',
+  'detail.turnTokens': '本轮 tokens 入 {miss}（命中 {hit}）· 出 {out}',
+  'detail.sessionTokens': '本会话 tokens 入 {miss}（命中 {hit}）· 出 {out}',
+  'detail.scope': '会话金额按已加载记录折算',
+  'detail.source': '单价来源：{source}',
+  'prices.title': '用量价格表',
+  'prices.description': '当前：{source}',
+  'prices.updatedAt': '上次更新于 {date}',
+  'prices.action': '立即更新',
+  'prices.busy': '更新中…',
+  'prices.ok': '已更新：{models}',
+  'prices.none': '已是最新',
+  'prices.failed': '更新失败：{reason}',
+};
+
+const en = {
+  'balance': 'Balance {amount}',
+  'balance.unavailable': 'Balance —',
+  'turn': 'This turn {amount}',
+  'session': 'This session {amount}',
+  'turn.unpriced': 'no price configured',
+  'detail.balance': 'Balance {total} (granted {granted} · topped up {toppedUp})',
+  'detail.balanceUnavailable': 'Balance unavailable: {reason}',
+  'detail.modelSession': 'priced as {model} (this session\'s actual route)',
+  'detail.modelDefault': 'priced as {model} (deployment default; session route unavailable)',
+  'detail.ratePeak': 'peak rate',
+  'detail.rateOffPeak': 'off-peak rate',
+  'detail.rate': '{period} {currency}/1M tokens: hit {hit} · miss {miss} · out {out}',
+  'detail.turnTokens': 'this turn input {miss} (hit {hit}) · output {out}',
+  'detail.sessionTokens': 'this session input {miss} (hit {hit}) · output {out}',
+  'detail.scope': 'session amount covers loaded records only',
+  'detail.source': 'prices: {source}',
+  'prices.title': 'Usage price list',
+  'prices.description': 'Current: {source}',
+  'prices.updatedAt': 'Last updated {date}',
+  'prices.action': 'Update now',
+  'prices.busy': 'Updating…',
+  'prices.ok': 'Updated: {models}',
+  'prices.none': 'Already up to date',
+  'prices.failed': 'Update failed: {reason}',
+};
+
+/** 插件自有样式的标记 id：既用于去重，也让 HMR/卸载能按插件归属清理。 */
+const CSS_TAG_ID = 'dsh-plugin-billing/BillingLine.module.css';
+
+/**
+ * 排版照抄 0.2.0 原生用量行（`dsh-client-ui-chat` 的 `StatsPills.module.css`）：
+ *
+ * - **必须显式写 `font-size`**：dock 在输入卡片**外面**，不写会继承 body 的 14px，
+ *   而原生这一行是 `--dsh-content-font-size-secondary - 1px`（默认 12px）——这是
+ *   之前和原生"不像一排"的最大原因。
+ * - **不要写 `width:100%` / `text-align` / `margin:auto` / `opacity`**：外层
+ *   `.yhfFVG_dock` 已经是 `display:flex; justify-content:center; align-items:center; gap:12px`，
+ *   条目自己要做的只是"别乱抢宽度"，否则会把原生那两枚胶囊挤开。
+ * - **分隔符用中点 `·`**（原生 `span.sep` 就是它），不是竖线。
+ * - 胶囊 `padding:1px 8px` + 20px 行高 = 22px 高，与原生胶囊、上下文圆环完全等高。
+ */
+const CSS =
+  '.dshbilling_root{box-sizing:border-box;min-width:0;max-width:100%;display:flex;justify-content:center;align-items:center;gap:12px;' +
+  'font-size:calc(var(--dsh-content-font-size-secondary,13px) - 1px);' +
+  'line-height:calc(20px + var(--dsh-content-font-delta-secondary,0px));}' +
+  '.dshbilling_pill{box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;padding:1px 8px;border-radius:999px;' +
+  'background:0 0;border:none;color:var(--dsw-alias-label-tertiary);font:inherit;line-height:inherit;' +
+  'font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%;}' +
+  '.dshbilling_group{min-width:0;overflow:hidden;text-overflow:ellipsis}' +
+  '.dshbilling_sep{color:var(--dsw-alias-separator-primary);margin:0 6px}' +
+  // 设置行的排版照抄原生设置行（`DeveloperToolsRow`），混在原生的行里看不出差别。
+  '.dshbilling_row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:.5px solid var(--dsw-alias-border-l2)}' +
+  '.dshbilling_rowText{min-width:0}' +
+  '.dshbilling_rowTitle{color:var(--dsw-alias-label-primary);font-size:14px;line-height:20px}' +
+  '.dshbilling_rowDesc{color:var(--dsw-alias-label-secondary);margin-top:4px;font-size:12px;line-height:18px}' +
+  '.dshbilling_rowError{color:var(--dsw-alias-state-error-primary);margin-top:4px;font-size:12px;line-height:18px}';
+
+const ROOT_CLASS = 'dshbilling_root';
+const PILL_CLASS = 'dshbilling_pill';
+const GROUP_CLASS = 'dshbilling_group';
+const SEP_CLASS = 'dshbilling_sep';
+const ROW_CLASS = 'dshbilling_row';
+const ROW_TEXT_CLASS = 'dshbilling_rowText';
+const ROW_TITLE_CLASS = 'dshbilling_rowTitle';
+const ROW_DESC_CLASS = 'dshbilling_rowDesc';
+const ROW_ERROR_CLASS = 'dshbilling_rowError';
+
+/** 把插件自有样式注入为全局样式（factory 物化时执行一次）。 */
+function injectStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.querySelector('style[data-plugin-css=' + JSON.stringify(CSS_TAG_ID) + ']') !== null) return;
+  const tag = document.createElement('style');
+  tag.dataset.plugin = 'dsh-plugin-billing';
+  tag.dataset.pluginCss = CSS_TAG_ID;
+  tag.textContent = CSS;
+  document.head.appendChild(tag);
+}
+
+/**
+ * 每个轮次的第一个 assistant 节点时间即该轮发生时刻；缺失时退化为“现在”。
+ * @param node - assistant 节点。
+ * @returns epoch 毫秒。
+ */
+function nodeTime(node) {
+  if (typeof node.time === 'number' && Number.isFinite(node.time)) return node.time;
+  const timing = node.timing;
+  if (timing !== undefined && typeof timing.completedTime === 'number') return timing.completedTime;
+  return Date.now();
+}
+
+/** 稳定的空数组：选择器返回它以避免每次产生新引用导致的重渲染循环。 */
+const EMPTY_NODES = [];
+
+/**
+ * 从会话 store 里取聊天节点，跨 dsh 版本：
+ * - **0.1.1**：座位是 `useSession`，store 形状是 `s.chat.legacy.nodes`
+ * - **0.1.5+**：统计行移到 ui-chat，座位改名 `useChat`，形状变成 `s.legacy.nodes`
+ * 返回的必须是稳定引用（真实数组或 EMPTY_NODES），否则会触发无休止重渲染。
+ * @param state - 会话 store 快照。
+ * @returns 节点数组。
+ */
+function selectNodes(state) {
+  if (state === null || typeof state !== 'object') return EMPTY_NODES;
+  let legacy = state.legacy;
+  if (legacy === undefined) {
+    const chat = state.chat;
+    legacy = chat !== null && typeof chat === 'object' ? chat.legacy : undefined;
+  }
+  if (legacy === null || typeof legacy !== 'object') return EMPTY_NODES;
+  return Array.isArray(legacy.nodes) ? legacy.nodes : EMPTY_NODES;
+}
+
+/**
+ * 把已加载节点按轮次折叠成用量桶。
+ * @param nodes - `chat.legacy.nodes`。
+ * @returns `{ perTurn: Map<number, {at, buckets}>, lastTurn: number|null, sessionBuckets }`。
+ */
+function foldTurns(nodes) {
+  const perTurn = new Map();
+  if (!Array.isArray(nodes)) nodes = [];
+  let lastTurn = null;
+  let sessionBuckets = { cacheMiss: 0, cacheRead: 0, cacheWrite: 0, output: 0 };
+  for (const node of nodes) {
+    if (node === null || typeof node !== 'object' || node.kind !== 'assistant') continue;
+    const turn = node.turn;
+    if (typeof turn !== 'number' || !Number.isFinite(turn)) continue;
+    const buckets = bucketsOf(node.usage);
+    sessionBuckets = addBuckets(sessionBuckets, buckets);
+    let entry = perTurn.get(turn);
+    if (entry === undefined) {
+      entry = { at: nodeTime(node), buckets: buckets };
+      perTurn.set(turn, entry);
+    } else {
+      entry.at = Math.max(entry.at, nodeTime(node));
+      entry.buckets = addBuckets(entry.buckets, buckets);
+    }
+    if (lastTurn === null || turn > lastTurn) lastTurn = turn;
+  }
+  return { perTurn: perTurn, lastTurn: lastTurn, sessionBuckets: sessionBuckets };
+}
+
+/**
+ * 金额显示：小额保留足够有效位，避免“本轮 ¥0.00”这种无信息输出。
+ * @param value - 非负金额。
+ * @returns 形如 `¥0.0321`。
+ */
+function formatMoney(value) {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) return '¥0';
+  if (value < 0.01) return '¥' + value.toFixed(4);
+  if (value < 1) return '¥' + value.toFixed(3);
+  return '¥' + value.toFixed(2);
+}
+
+/** token 数紧凑显示：1234 → 1.2K。 */
+function formatTokens(value) {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) return '0';
+  if (value < 1000) return String(Math.round(value));
+  if (value < 1e6) {
+    const k = value / 1000;
+    return (k < 100 ? Math.round(k * 10) / 10 : Math.round(k)) + 'K';
+  }
+  const m = value / 1e6;
+  return (m < 100 ? Math.round(m * 10) / 10 : Math.round(m)) + 'M';
+}
+
+/** 单价显示保留 3 位，避免 0.05 被写成 0.1。 */
+function formatRate(value) {
+  return String(Math.round(value * 1000) / 1000);
+}
+
+/**
+ * 拉取余额摘要；轮次变化时立即重拉，另外按 `REFRESH_MS` 轮询。
+ *
+ * 带上 `session=<会话 id>`，让 Host 侧能按**该会话的真实路由**计价，而不是部署默认路由
+ * ——本机上默认路由是 v4-pro、本会话跑的是 v4-flash，单价差 3 倍。
+ * @param sessionId - 当前会话 id（来自 slot 的 inject 回调）；缺省时不带该参数。
+ * @param turnKey - 轮次指纹，变化即触发重拉。
+ * @returns `{ phase, data|message }`。
+ */
+function useSummary(sessionId, turnKey) {
+  const [state, setState] = react.useState({ phase: 'loading' });
+  // 价格表被更新后立刻重算，而不是等下一轮 60 秒轮询。
+  const epoch = usePricesEpoch();
+  react.useEffect(
+    function () {
+      let alive = true;
+      const url =
+        typeof sessionId === 'string' && sessionId !== ''
+          ? SUMMARY_URL + '?session=' + encodeURIComponent(sessionId)
+          : SUMMARY_URL;
+      const load = function () {
+        fetch(url, { headers: { accept: 'application/json' }, cache: 'no-store' })
+          .then(function (response) {
+            return response.json();
+          })
+          .then(function (data) {
+            if (alive) setState({ phase: 'ready', data: data });
+          })
+          .catch(function (error) {
+            if (alive) setState({ phase: 'error', message: String((error && error.message) || error) });
+          });
+      };
+      load();
+      const timer = setInterval(load, REFRESH_MS);
+      return function () {
+        alive = false;
+        clearInterval(timer);
+      };
+    },
+    [sessionId, turnKey, epoch],
+  );
+  return state;
+}
+
+/**
+ * 视图装配（纯函数，便于自检覆盖）：把折叠后的用量与余额摘要转成
+ * 「一行分组 + hover 明细」。
+ * @param folded - `foldTurns()` 的结果。
+ * @param summary - `useSummary()` 的状态：`{ phase, data?, message? }`。
+ * @param t - 绑定到本插件命名空间的翻译函数。
+ * @returns `{ groups, detail }`；两者为空表示整行不渲染。
+ */
+function composeView(folded, summary, t) {
+  // Host 侧报告的当前路由模型，用它查单价表。
+  const data = summary.phase === 'ready' && summary.data && summary.data.ok === true ? summary.data : null;
+  const model =
+    data !== null && data.model !== null && typeof data.model === 'object' ? data.model.model : null;
+
+  const turnEntry = folded.lastTurn === null ? null : folded.perTurn.get(folded.lastTurn) || null;
+  // 价格表：优先用 Host 下发的（可热更新），缺失时用 bundle 内联的兜底表。
+  const table = priceTable(data);
+  const turnRates = turnEntry === null || model === null ? undefined : ratesFor(model, turnEntry.at, table);
+  const turnCost = turnEntry === null || turnRates === undefined ? null : costOf(turnEntry.buckets, turnRates);
+
+  // 会话总额：逐轮按各自时刻的单价计价，跨高低峰也准确。
+  let sessionCost = null;
+  let sessionRates;
+  if (model !== null && folded.perTurn.size > 0) {
+    let total = 0;
+    let priced = true;
+    folded.perTurn.forEach(function (entry) {
+      const rates = ratesFor(model, entry.at, table);
+      if (rates === undefined) {
+        priced = false;
+        return;
+      }
+      sessionRates = rates;
+      total += costOf(entry.buckets, rates);
+    });
+    sessionCost = priced ? total : null;
+  }
+
+  const groups = [];
+
+  // 余额组：接口不可用时保留占位，让「配置没生效」看得见，而不是静默消失。
+  if (data !== null && data.balance && data.balance.state === 'ok') {
+    groups.push(t('balance', { amount: formatMoney(Number(data.balance.total)) }));
+  } else {
+    groups.push(t('balance.unavailable'));
+  }
+
+  if (turnCost !== null) groups.push(t('turn', { amount: formatMoney(turnCost) }));
+  else if (turnEntry !== null && model !== null) groups.push(t('turn', { amount: t('turn.unpriced') }));
+
+  if (sessionCost !== null && folded.perTurn.size > 1) {
+    groups.push(t('session', { amount: formatMoney(sessionCost) }));
+  }
+
+  const detail = [];
+  if (data !== null && data.balance && data.balance.state === 'ok') {
+    detail.push(
+      t('detail.balance', {
+        total: data.balance.total,
+        granted: data.balance.granted,
+        toppedUp: data.balance.toppedUp,
+      }),
+    );
+  } else if (summary.phase === 'ready' && data === null && summary.data && summary.data.error) {
+    detail.push(t('detail.balanceUnavailable', { reason: summary.data.error.message }));
+  } else if (summary.phase === 'error') {
+    detail.push(t('detail.balanceUnavailable', { reason: summary.message }));
+  } else if (summary.phase === 'loading') {
+    detail.push(t('balance.unavailable'));
+  }
+
+  if (model !== null) {
+    // 标明计价依据：会话路由是精确值，部署默认路由只是兜底。
+    const fromSession = data !== null && data.model && data.model.source === 'session';
+    detail.push(t(fromSession ? 'detail.modelSession' : 'detail.modelDefault', { model: model }));
+  }
+  // 注意用 `!= null`：未登记单价的模型会让两个 rates 都是 undefined/null，
+  // 只判 `!== undefined` 会在 null 上取属性而抛错，从而整行渲染失败。
+  const rateFor = turnRates !== undefined && turnRates !== null ? turnRates : sessionRates;
+  if (rateFor != null && data !== null) {
+    detail.push(
+      t('detail.rate', {
+        period: rateFor.peak ? t('detail.ratePeak') : t('detail.rateOffPeak'),
+        currency: data.currency || CURRENCY,
+        hit: formatRate(rateFor.cacheHit),
+        miss: formatRate(rateFor.cacheMiss),
+        out: formatRate(rateFor.output),
+      }),
+    );
+  }
+  if (turnEntry !== null) {
+    detail.push(
+      t('detail.turnTokens', {
+        miss: formatTokens(turnEntry.buckets.cacheMiss + turnEntry.buckets.cacheWrite),
+        hit: formatTokens(turnEntry.buckets.cacheRead),
+        out: formatTokens(turnEntry.buckets.output),
+      }),
+    );
+  }
+  if (folded.perTurn.size > 1) {
+    detail.push(
+      t('detail.sessionTokens', {
+        miss: formatTokens(folded.sessionBuckets.cacheMiss + folded.sessionBuckets.cacheWrite),
+        hit: formatTokens(folded.sessionBuckets.cacheRead),
+        out: formatTokens(folded.sessionBuckets.output),
+      }),
+    );
+    detail.push(t('detail.scope'));
+  }
+  detail.push(
+    t('detail.source', {
+      source: (data !== null && typeof data.priceSource === 'string' && data.priceSource !== '' ? data.priceSource : PRICE_SOURCE),
+    }),
+  );
+
+  return { groups: groups, detail: detail };
+}
+
+/**
+ * 席位没给 `t` 时的兜底翻译：直接用 zh 字典。
+ * 宁可这一行显示中文，也不要因为少一个席位就整行不渲染。
+ * @param key - 字典键。
+ * @param params - 插值参数。
+ * @returns 文案；键不存在时原样返回键名。
+ */
+function fallbackTranslate(key, params) {
+  const template = Object.prototype.hasOwnProperty.call(zh, key) ? zh[key] : key;
+  if (params === undefined) return template;
+  return String(template).replace(/\{(\w+)\}/g, function (match, name) {
+    return Object.prototype.hasOwnProperty.call(params, name) ? String(params[name]) : match;
+  });
+}
+
+/**
+ * 余额与金额行。
+ * @param props - slot 标准席位：`useChat`（0.1.5+）或 `useSession`（0.1.1）、`t`，以及注册时
+ *   `inject` 回调注入的 `sessionId`。
+ * @returns 单行金额条；无任何可显示内容时为 null。
+ */
+function BillingLine(props) {
+  // 座位名跨版本不同：0.1.1 是 useSession，0.1.5+ 是 useChat（同一次会话数据）。
+  const useChat = typeof props.useChat === 'function' ? props.useChat : props.useSession;
+  const t = typeof props.t === 'function' ? props.t : fallbackTranslate;
+  // 两个座位都没有时静默不渲染，而不是抛错把这一行变成红色错误边界。
+  if (typeof useChat !== 'function') return null;
+  // 订阅节点数组，轮次与用量变化都会重渲染（与 StatsLine 同源）。
+  const nodes = useChat(selectNodes);
+  const folded = react.useMemo(
+    function () {
+      return foldTurns(nodes);
+    },
+    [nodes],
+  );
+  const summary = useSummary(props.sessionId, folded.lastTurn);
+  const view = composeView(folded, summary, t);
+
+  if (view.groups.length === 0) return null;
+
+  const children = [];
+  view.groups.forEach(function (group, index) {
+    if (index > 0) {
+      // 原生胶囊内部字段之间就是这个中点，间距也照抄 `margin:0 6px`。
+      children.push(
+        jsxRuntime.jsx('span', { className: SEP_CLASS, 'aria-hidden': true, children: '·' }, 'sep-' + index),
+      );
+    }
+    children.push(jsxRuntime.jsx('span', { className: GROUP_CLASS, children: group }, 'group-' + index));
+  });
+
+  return jsxRuntime.jsx(primitives.Tooltip, {
+    label: view.detail.join(' · '),
+    side: 'top',
+    delayMs: 400,
+    children: jsxRuntime.jsx('div', {
+      className: ROOT_CLASS,
+      children: jsxRuntime.jsx('span', { className: PILL_CLASS, children: children }, 'pill'),
+    }),
+  });
+}
+
+/**
+ * 设置行：显示当前单价来源，并提供**一键更新**。
+ *
+ * 为什么把 CLI 的能力搬到这里：价格是"会过期"的东西，而"开终端、进目录、跑脚本、
+ * 看差异、再决定"对日常来说太重了。按钮点一下，Host 侧做同一套抓取与四条结构自校验，
+ * 成功就写本机覆盖文件（不动仓库），失败就把原因原样显示在这一行上。
+ * @param props - 座位提供的 props；`t` 由 `locale` 席位给出。
+ * @returns 设置行元素。
+ */
+function PricesRow(props) {
+  const t = typeof props.t === 'function' ? props.t : fallbackTranslate;
+  const [state, setState] = react.useState({ phase: 'loading', info: null, result: null });
+
+  react.useEffect(function () {
+    let alive = true;
+    fetch(PRICES_URL, { headers: { accept: 'application/json' }, cache: 'no-store' })
+      .then(function (response) {
+        return response.json();
+      })
+      .then(function (data) {
+        if (alive) setState({ phase: 'ready', info: data, result: null });
+      })
+      .catch(function (error) {
+        if (alive) {
+          setState({ phase: 'ready', info: null, result: { ok: false, message: String(error.message || error) } });
+        }
+      });
+    return function () {
+      alive = false;
+    };
+  }, []);
+
+  const refresh = react.useCallback(function () {
+    setState(function (prev) {
+      return { phase: 'busy', info: prev.info, result: null };
+    });
+    // 返回 promise：调用方（测试、上层按钮包装）能等到真正完成。
+    return fetch(PRICES_REFRESH_URL, { method: 'POST', headers: { accept: 'application/json' } })
+      .then(function (response) {
+        return response.json().then(function (data) {
+          return { status: response.status, data: data };
+        });
+      })
+      .then(function (outcome) {
+        const data = outcome.data || {};
+        if (data.ok === true) {
+          setState({
+            phase: 'ready',
+            info: data,
+            result: { ok: true, changed: Array.isArray(data.changed) ? data.changed : [] },
+          });
+          // 让金额行立刻用新单价重算，不必等它自己那一分钟一次的轮询。
+          bumpPricesEpoch();
+        } else {
+          setState({
+            phase: 'ready',
+            info: data,
+            result: { ok: false, message: String(data.message || 'HTTP ' + outcome.status) },
+          });
+        }
+      })
+      .catch(function (error) {
+        setState({
+          phase: 'ready',
+          info: null,
+          result: { ok: false, message: String(error.message || error) },
+        });
+      });
+  }, []);
+
+  const info = state.info;
+  const busy = state.phase === 'busy';
+  const lines = [];
+  if (info !== null && typeof info.source === 'string' && info.source !== '') {
+    lines.push(
+      jsxRuntime.jsx(
+        'div',
+        { className: ROW_DESC_CLASS, children: t('prices.description', { source: info.source }) },
+        'source',
+      ),
+    );
+  }
+  if (info !== null && typeof info.updatedAt === 'string' && info.updatedAt !== '') {
+    lines.push(
+      jsxRuntime.jsx('div', { className: ROW_DESC_CLASS, children: t('prices.updatedAt', { date: info.updatedAt }) }, 'date'),
+    );
+  }
+  if (state.result !== null) {
+    const result = state.result;
+    const text =
+      result.ok === true
+        ? result.changed.length > 0
+          ? t('prices.ok', { models: result.changed.join('、') })
+          : t('prices.none')
+        : t('prices.failed', { reason: result.message });
+    lines.push(
+      jsxRuntime.jsx(
+        'div',
+        { className: result.ok === true ? ROW_DESC_CLASS : ROW_ERROR_CLASS, role: 'status', children: text },
+        'result',
+      ),
+    );
+  }
+
+  return jsxRuntime.jsxs('div', {
+    className: ROW_CLASS,
+    children: [
+      jsxRuntime.jsxs('div', {
+        className: ROW_TEXT_CLASS,
+        children: [jsxRuntime.jsx('div', { className: ROW_TITLE_CLASS, children: t('prices.title') }, 'title'), ...lines],
+      }),
+      jsxRuntime.jsx(
+        primitives.Button,
+        {
+          variant: 'outline',
+          disabled: busy,
+          onClick: refresh,
+          children: busy ? t('prices.busy') : t('prices.action'),
+        },
+        'button',
+      ),
+    ],
+  });
+}
+
+/** 必需服务：slot 注册表与 locale（文案席位）。 */
+const inject = ['slots', 'locale'];
+
+/**
+ * 注册文案字典、金额行席位与价格表设置行。
+ * @param ctx - 浏览器侧 cordis 上下文。
+ */
+function apply(ctx) {
+  injectStyles();
+  ctx.effect(function () {
+    return ctx.locale.register(NS, { zh: zh, en: en });
+  }, 'billing: dictionaries');
+  ctx.slots.inject('conversation.composer.dock', function () {
+    return ctx.slots.register(
+      {
+        name: 'conversation.composer.dock',
+        id: 'billing',
+        order: 20,
+        locale: NS,
+        // slot 把当前会话 id 传给 inject 回调；转成 props 交给组件，
+        // 用于向 Host 索要「该会话真实路由」而不是部署默认路由。
+        inject: function (sessionId) {
+          return { sessionId: typeof sessionId === 'string' ? sessionId : undefined };
+        },
+      },
+      BillingLine,
+    );
+  });
+  // 设置里的价格行：排在 外观 / 字号大小 / 护眼 之后。
+  ctx.slots.inject('settings.general.item', function () {
+    return ctx.slots.register(
+      { name: 'settings.general.item', id: 'billing-prices', order: 13, locale: NS },
+      PricesRow,
+    );
+  });
+}