@rayadesu/dsh-client-ui-billing 0.3.10 → 0.3.12

package/README.i18n.yaml

@@ -2,5 +2,5 @@
 # last confirmed-consistent state. Both languages carry equal authority; after
 # editing either side, bring the other along and re-record both hashes with:
 #   git hash-object README.md README.zh.md
-README.md: cd35c163925d48ff81774fefd45ea8deb06d59bd
-README.zh.md: 7d06d48a6da7337faa1acea887b59a6624a81ea3
+README.md: a866a9fc6e47278d35a8acf3a797a6230b8314e2
+README.zh.md: 3a6993fc7690572fb3d30f084882c6f2e72d207d

package/README.md

@@ -4,18 +4,20 @@ English | [中文](README.zh.md)
 
 Web billing feature owner: contributes one entry to `conversation.session.header.utilities` that mounts its own `billing` Remote and renders the DeepSeek account balance, this session's billed spend (read from the host-pushed `billingTodaySpend` projection, with `billing/getSessionSpend` as the fallback when the projection registry is absent), today's spend across every session (`billing/getTodaySpend`), today's per-session ranking (`billing/getTodaySessionsSpend`), and per-turn costs (`billing/getSessionTurnSpends`) as a top-right label box. The host half of the capability lives in [`dsh-llm-billing`](../llm-billing/README.md), which owns the `/user/balance` transport, the peak/off-peak pricing table, and the `billing` Remote namespace; this package mounts that Remote and renders what it returns.
 
-The trigger shows two lines — the remaining balance and this conversation's billed spend ("本轮对话花费 ¥X") — and renders immediately from the last settled balance (kept per plugin instance), revalidating in the background; before the first balance ever lands it renders nothing. Clicking it opens a label box with the remaining amount, this session's billed spend (本会话花费, priced per usage sample at the official peak/off-peak rate — peak windows apply weekdays Mon–Fri only, weekends are off-peak; a forked session prices only its own post-fork work) with today's all-session spend beside it (今日共花费), one priced row per model with the cache-hit / cache-miss-input / output cost breakdown ("缓存命中 ¥X · 未命中输入 ¥Y · 输出 ¥Z"), a manual refresh action, and a spend disclaimer. The remaining-amount row (`API 剩余金额`) renders larger than the spend rows below it. Below the model rows the panel ends with the **today session-spend ranking** (`今日会话花费`): sessions sorted by today's cost, highest first, each row a fixed right-aligned rank column, then the same middot separator the cost breakdown uses ("·" with the same size, tone, and spacing), then the session's durable title (renames sync automatically), then its amount — the title keeps its indented rank column; at most `SESSION_RANKING_LIMIT` (10) rows render, with a "…还有 N 个会话" hint for the rest. Refreshing keeps the last values visible rather than blanking them, and a refresh failure retains the last good value. A session or day without priced usage shows a "no usage recorded" word rather than a fabricated figure. A failure — no API key configured, a rejected credential, a transport error — renders a muted "Balance unavailable" word whose tooltip carries the Remote's own error message.
+The trigger shows two lines — the remaining balance and this conversation's billed spend ("本轮对话花费 ¥X") — and renders immediately from the last settled balance (kept per plugin instance), revalidating in the background; before the first balance ever lands it renders nothing. Clicking it opens a label box with the remaining amount, then today's billed token count with today's all-session spend beside it (今日 Token / 今日花费, one row; the count sums the three billed buckets of every priced row, so a cache-hit input token and an output token each count once, and it renders in DSH's own compact notation with DSH's ` tok` unit — `517 tok`, `12.2K tok`, `1.2M tok`: below 1e3 the plain integer, below 1e6 the shared `K` unit, otherwise `M`, keeping one decimal under 100 and rounding from 100 up), then this session's billed spend on its own line under them (本会话花费, priced per usage sample at the official peak/off-peak rate — peak windows apply weekdays Mon–Fri only, weekends are off-peak; a forked session prices only its own post-fork work); a bare parenthesized amount rides right after the session amount (（¥X）) — that is **this session's share of today**, taken from the already-fetched today-session ranking and matched by the current session id, so it is neither the ranking's first row nor the day's total. It renders **only when the two amounts disagree**, which is exactly the day-crossing case; an unsettled ranking renders nothing (unknown is not a disagreement, and a session that has not crossed a Beijing day bills exactly its own total today, so the share would just repeat the amount beside it); next come one priced row per model with the cost breakdown under DSH's own bucket wording and row order ("未缓存输入 ¥X · 缓存读取 ¥Y · 输出 ¥Z" — DSH's `message.turnUsage` labels; the host prices cache writes at the miss rate, so they ride the uncached-input bucket), a manual refresh action, and a short spend disclaimer on the `?` button (only DeepSeek and MiMo models are estimated, each message priced at its own peak/off-peak rate; the next line names the parenthesized amount on the session row — this session's spend today — and the last line is a bare version like `v0.3.12`, stamped in at build time from this package's manifest, so a report can name the build; the full rate schedule lives in the host README, because the DSH tooltip bubble fits a short label only, is clipped at the viewport edge when long, and cannot be hovered — the hint is placed below the button, the side whose viewport fit can flip). The remaining-amount row (`API 剩余金额`) renders larger than the spend rows below it (今日 Token and 今日花费, and 本会话花费 with its parenthesized today share). Below the model rows the panel ends with the **today session-spend ranking** (`今日会话花费`): sessions sorted by today's cost, highest first, each row a fixed right-aligned rank column, then the same middot separator the cost breakdown uses ("·" with the same size, tone, and spacing), then the session's durable title (renames sync automatically), then its amount — the title keeps its indented rank column; at most `SESSION_RANKING_LIMIT` (10) rows render, with a "…还有 N 个会话" hint for the rest. Refreshing keeps the last values visible rather than blanking them, and a refresh failure retains the last good value. A session or day without priced usage shows a "no usage recorded" word rather than a fabricated figure. A failure — no API key configured, a rejected credential, a transport error — renders a muted "Balance unavailable" word whose tooltip carries the Remote's own error message.
 
 The package also contributes the **turn-cost entry** (`billing-turn-cost`, order 20) to ui-chat's `conversation.chat.assistant-actions` list slot — the same strip `ui-message-feedback` uses, so entries coexist; the entry's own CSS `order: 1` sorts it after every order-0 sibling, so the amount lands at the **end** of the actions row (after the clock). The entry renders a plain static `¥X` (no icon, no label, no interaction) for each completed turn's closing assistant message, resolved from a shared per-session `messageId → cost` map (`billing/getSessionTurnSpends`, one fetch per session, coalesced across concurrently mounting rows; a message id the map does not know triggers exactly one refetch for a newly completed turn). Turns that priced to zero (no DeepSeek usage) and failed loads render nothing, so a Remote outage never clutters the row.
 
+A third entry, the **composer spend card**, is **built but not registered** — its source (`SpendCard.tsx`, `spendBuckets.ts`, `useCardDialog.ts`, `icons.tsx`), its locale keys, and its test suite all live here, and the registration block is parked as a comment in `src/client/index.ts`. It targeted ui-conversation's `conversation.composer.dock` list slot (the row under the input box that ui-chat's own token and time pills occupy), which cannot host it: a dock entry is a list row of its own and the composer stacks those rows in a column, so the pill could only ever render as a second centred row *below* the built-in one, never beside it. Re-enabling it waits on the host offering a real seat — a child slot inside the stats row, or row grouping on the dock's list spec — at which point the parked block is uncommented as-is (plus its one import). As built, the entry was one money-bag pill (the in-house hollow-outline glyph, 14px, tertiary tone, tabular `¥X`) showing the conversation's billed spend, opening a cost card that reproduces ui-chat's token-usage dialog skin token for token (menu surface, 12px radius, elevation-prominent, 16px padding, heading row with its headline amount and a 0.5px rule, right-aligned tabular detail grid): the heading is `花费金额` / `Spend`, and its three rows are the spend's three billing buckets under the wording that token card uses — **未缓存输入 / 缓存读取 / 输出**. The amounts came from the pushed `billingTodaySpend` projection (no Remote call of its own; `spendBuckets.ts` sums the per-model rows and absorbs the four-decimal float residual into the largest bucket, so the three rows always add up to the total the heading shows) with `billing/getSessionSpend` as the projection-less fallback, and DSH keeps its own equivalent dialog seat in a private client bundle, so dismissal and placement were rebuilt from the two public primitives (`useAnchoredPosition` plus `useDismissOnOutsidePointer`).
+
 The badge is account-level even though the slot is session-scoped: the header utilities row is simply the one always-visible title-bar seat the shell offers, and the balance it shows does not vary by session — but the spend lines do, because they price the current session's own usage (the pushed projection, or `billing/getSessionSpend`) and every session's usage through `billing/getTodaySpend`. Copy goes through the package's own `billing` locale namespace; styling uses tokens only.
 
 ## Refresh mechanics
 
 The spends follow the conversation and the balance is cached, not polled:
 
-- **Session spend is pushed, not fetched** — the host folds each session's spend into the client-visible `billingTodaySpend` projection and pushes every change; the badge subscribes with the framework `useProjection` seat, so the session line is live with zero Remote calls while the projection registry is composed. When the key is absent, the same line falls back to `billing/getSessionSpend`.
-- **Today's spend follows settled turns, debounced** — the component subscribes to the current session's running flag through the framework `useSession` seat. When a prompt turn settles (the flag flips back to idle) it recomputes today's spend (`billing/getTodaySpend`); the recompute is debounced for two seconds, so a burst of turns (an agent continuing across turns) prices once instead of once per turn. The ranking (`billing/getTodaySessionsSpend`) is fetched only while the detail panel is open (and on refresh), so a badge that stays closed never pays for the all-session scan.
+- **Session spend is pushed, not fetched** — the host folds each session's spend into the client-visible `billingTodaySpend` projection and pushes every change; the badge subscribes with the framework `useProjection` seat, so the session line is live with zero Remote calls while the projection registry is composed. When the key is absent, the same line falls back to `billing/getSessionSpend` — the same face and ladder the unregistered composer spend card reads.
+- **Today's spend follows settled turns, debounced** — the component subscribes to the current session's running flag through the framework `useSession` seat. When a prompt turn settles (the flag flips back to idle) it recomputes today's spend (`billing/getTodaySpend`; the 今日 Token figure on that same row is summed from the returned model rows in place, with no extra request); the recompute is debounced for two seconds, so a burst of turns (an agent continuing across turns) prices once instead of once per turn. The ranking (`billing/getTodaySessionsSpend`) is fetched only while the detail panel is open (and on refresh), so a badge that stays closed never pays for the all-session scan; the parenthesized today share on the 本会话花费 row reads that same fetch, so it costs no extra request and moves with the ranking (and until that ranking settles no share is rendered at all, because only a disagreement between the two amounts shows one).
 - **Balance is TTL-cached** — the account balance is fetched on mount, on session switch, and on the explicit refresh action. The host reuses one snapshot for up to 15 seconds (`force` on the manual refresh bypasses it) and aborts a request after 5 seconds; the browser keeps the last settled value so a session switch renders the amount immediately. There is still no polling and no automatic refetch.
 - **Refresh keeps the last values** — an in-flight refresh leaves the previous values on screen, and a failed refresh retains the last good value instead of blanking it. The refresh action calls `billing/getBalance(true)`, `billing/getTodaySpend(true)`, and `billing/getTodaySessionsSpend(true)`, which bypass the host-side caches; the turn-triggered recompute and the mount/session-switch reads use the cached path.
 
@@ -32,4 +34,6 @@ None; the package never assembles or sends provider requests, and its one RPC is
 - **First balance line only** — the balance reads the primary (`balance_infos[0]`) currency line; other currency lines are not shown.
 - **Ranking capped at 10** — the panel shows at most `SESSION_RANKING_LIMIT` sessions, with a "…N more sessions" hint.
 - **Turn cost needs a finalized closing message** — interrupted turns have no actions row, so no turn cost is shown for them.
+- **Today's tokens count priced rows only** — the figure sums the three billing buckets of the model rows `billing/getTodaySpend` returns (models with a rate row), so a model without one contributes no tokens; cache writes ride the cache-miss bucket.
+- **The composer spend card has no seat yet** — its registration is parked (see above) until the host exposes a child slot in the composer stats row or row grouping on the dock's list spec; until then the input box shows only the built-in token/time pills. It prices what the host's table prices (DeepSeek and MiMo) while that token row counts every token, and cache writes ride its uncached-input row.
 - **Balance is up to 15s stale** — the host reuses one snapshot for 15 seconds and the browser keeps the last settled value: spending from another client does not move the shown value until the TTL expires, a manual refresh, or a browser reload (there is no polling).

package/README.zh.md

@@ -4,18 +4,20 @@
 
 Web 额度特性的归属方：向 `conversation.session.header.utilities` 贡献一个条目，自己挂载 `billing` Remote，并渲染 DeepSeek 账户余额、本会话的计费花费（读宿主推送的 `billingTodaySpend` 投影，投影注册表不存在时回退 `billing/getSessionSpend`）、今日所有会话的计费花费（`billing/getTodaySpend`）、今日按会话的排行（`billing/getTodaySessionsSpend`）与各回合花费（`billing/getSessionTurnSpends`），在右上角渲染成一个标签框。该能力的宿主侧在 [`dsh-llm-billing`](../llm-billing/README.md)，它拥有 `/user/balance` 传输、峰谷计价表与 `billing` Remote 命名空间；本包挂载那个 Remote 并渲染它返回的内容。
 
-触发器显示两行——剩余额度与本轮对话的计费花费（「本轮对话花费 ¥X」）——有上次已落定的余额就立即渲染（按插件实例保留），后台校验；首次余额尚未到达时不渲染任何东西。点击后展开一个标签框：剩余金额、本会话的计费花费（本会话花费，按官方峰/谷单价逐条用量样本计价——高峰窗口仅周一至周五适用，周末按低谷价——分叉会话只按分叉后的自有工作计价——右侧并列今日所有会话的合计「今日共花费」）、每个模型一行的花费及其缓存命中/未命中输入/输出分项（「缓存命中 ¥X · 未命中输入 ¥Y · 输出 ¥Z」）、手动刷新按钮与花费说明。剩余金额行（`API 剩余金额`）字号大于下方花费行。模型行下方是**今日会话花费排行**（`今日会话花费`）：按今日花费从高到低排列的会话列表，每行以右对齐的名次列开头，后接与花费分项相同的小圆点分隔符（「·」，字号、色调与间距一致），再是会话的持久标题（重命名自动同步），最后是金额——标题在名次列后缩进对齐；最多渲染 `SESSION_RANKING_LIMIT`（10）行，其余以「…还有 N 个会话」提示。刷新时旧值不消失，刷新失败保留上一次有效值。没有可计价消耗的会话或日子显示「暂无消耗记录」而不是编造数字。失败——未配置 API key、凭据被拒绝、传输错误——渲染弱化的「额度不可用」，其提示携带 Remote 自己的错误信息。
+触发器显示两行——剩余额度与本轮对话的计费花费（「本轮对话花费 ¥X」）——有上次已落定的余额就立即渲染（按插件实例保留），后台校验；首次余额尚未到达时不渲染任何东西。点击后展开一个标签框：剩余金额、今日计费 token 数与今日所有会话合计（「今日 Token」与「今日花费」同一行——token 数把每个计价行的三个计费桶相加，缓存读取与输出各算一个 token，并按 DSH 自己的紧凑记数法加 ` tok` 单位渲染：`517 tok`、`12.2K tok`、`1.2M tok`——<1e3 原整数、<1e6 用共享 `K` 单位、再往上用 `M`，缩放值 <100 保留一位小数、≥100 取整）、再下一行是本会话的计费花费（「本会话花费」，按官方峰/谷单价逐条用量样本计价——高峰窗口仅周一至周五适用，周末按低谷价——分叉会话只按分叉后的自有工作计价；金额后可能紧跟一个括号括起来的纯金额（`（¥X）`），那是**本会话今日份**的花费，取自已拉取的今日会话排行、按当前会话 id 匹配，所以既不是排行首行、也不是当日合计——**只在两个金额对不上时才渲染**，也就是会话跨了北京时间自然日的情况；排行未落定则不渲染任何括号，因为「未知」不算对不上，而没跨天的会话今日份恰好等于会话总额、括号只会重复旁边的数字）、每个模型一行的花费及其分项（用 DSH 自己的桶名与行序：「未缓存输入 ¥X · 缓存读取 ¥Y · 输出 ¥Z」，即 ui-chat `message.turnUsage` 那套文案；宿主把缓存写入按未命中单价计价，所以它并入「未缓存输入」桶）、手动刷新按钮，以及「?」按钮上的一句简短花费说明（只估算 DeepSeek 与 MiMo 模型、按每条消息自身时刻的峰谷单价计价；下一行说明会话行括号里的金额就是本会话今日花费，最后一行顶格是纯版本号（如 `v0.3.12`）——构建期从本包 manifest 注入，便于反馈时指明所用版本；费率明细在宿主 README —— DSH 的悬停气泡只装得下短文案，过长会在视口边缘被裁掉且无法悬停阅读，所以说明放在按钮下方，纵向适配可翻转的那一侧）。剩余金额行（`API 剩余金额`）字号大于下方花费行（`今日 Token`／`今日花费`，以及带括号金额的 `本会话花费`）。模型行下方是**今日会话花费排行**（`今日会话花费`）：按今日花费从高到低排列的会话列表，每行以右对齐的名次列开头，后接与花费分项相同的小圆点分隔符（「·」，字号、色调与间距一致），再是会话的持久标题（重命名自动同步），最后是金额——标题在名次列后缩进对齐；最多渲染 `SESSION_RANKING_LIMIT`（10）行，其余以「…还有 N 个会话」提示。刷新时旧值不消失，刷新失败保留上一次有效值。没有可计价消耗的会话或日子显示「暂无消耗记录」而不是编造数字。失败——未配置 API key、凭据被拒绝、传输错误——渲染弱化的「额度不可用」，其提示携带 Remote 自己的错误信息。
 
 本包还贡献**本轮花费条目**（`billing-turn-cost`，order 20）到 ui-chat 的 `conversation.chat.assistant-actions` list slot——与 `ui-message-feedback` 同一条操作条，多条目共存；条目自身的 CSS `order: 1` 把它排到所有 order-0 兄弟之后，金额因此落在操作行**行尾**（时钟之后）。它为每个已完成回合的收尾助手消息渲染一个纯静态 `¥X`（无图标、无文字标签、不可点击），金额来自每会话共享的 `messageId → 金额` 映射（`billing/getSessionTurnSpends`，每会话只拉一次，并发挂载的行共享同一请求；映射里没有的消息 id 只触发一次重拉，对应当前刚完成的回合）。回合没有 DeepSeek 用量（花费为 0）或加载失败时不渲染，Remote 故障不会污染操作行。
 
+第三个条目是**输入框花费卡片**，**已实现但未注册**——源码（`SpendCard.tsx`、`spendBuckets.ts`、`useCardDialog.ts`、`icons.tsx`）、locale 键与全套用例都在本包，注册块以注释形式停在 `src/client/index.ts` 里。它原本挂在 ui-conversation 的 `conversation.composer.dock` list slot（ui-chat 自己的 token/时间 pill 所在的输入框下方行），但那个槽放不下它：dock 条目各自独占一行、由输入框纵向堆叠，所以 pill 只能渲染成官方行**下面**第二条居中行，永远无法与官方 pill 并排。重新启用要等宿主给出真正的席位——统计行内部的子插槽，或 dock list 规格上的同行分组——届时把那段注释块原样放开即可（外加它那一行 import）。按已实现形态：这一行是一枚钱袋 pill（自制描边图标，14px、三级色调、等宽 `¥X`），显示本会话的计费花费；点击向上弹出逐 token 复刻 ui-chat token 用量对话框皮肤的花费卡片（菜单底、12px 圆角、elevation-prominent、16px 内边距、标题行带主金额与 0.5px 分隔线、右对齐等宽数字网格）——标题是「花费金额」，三行就是花费的三个计费桶，用的正是 token 卡那套文案：**未缓存输入 / 缓存读取 / 输出**。金额来自推送的 `billingTodaySpend` 投影（卡片自己不发 Remote 调用；`spendBuckets.ts` 把每模型行相加，并把四位小数的浮点残差并入最大桶，保证三行之和恒等于标题里的总额），投影缺失时回退 `billing/getSessionSpend`；而 DSH 自带的同款 dialog 席位在其私有客户端 bundle 里、无法导入，所以定位与关闭由两个公开原语重建（`useAnchoredPosition` 与 `useDismissOnOutsidePointer`）。
+
 角标是账户级的，尽管插槽是会话作用域：顶栏工具行不过是外壳提供的那个始终可见的标题栏席位，余额并不随会话变化——但花费行会，因为它按当前会话自己的用量（推送的投影，或 `billing/getSessionSpend`）计价、通过 `billing/getTodaySpend` 按所有会话的用量计价。文案走本包自己的 `billing` locale 命名空间；样式只用 token。
 
 ## 数据更新机制
 
 花费跟随会话、额度带缓存但不轮询：
 
-- **本会话花费靠推送，不靠拉取** —— 宿主把每个会话的花费折进客户端可见的 `billingTodaySpend` 投影并推送每次变化；徽标用框架 `useProjection` 座位订阅，因此投影注册表装配时该行零 Remote 调用、实时更新。键不存在时同一行回退到 `billing/getSessionSpend`。
-- **今日共花费随回合结束更新（去抖）** —— 组件通过框架 `useSession` 座位订阅当前会话的「运行中」标志。每当一轮 prompt 回合结束（标志翻回空闲）就重算**今日共花费**（`billing/getTodaySpend`）；重算有 2 秒去抖，回合突发（agent 连续多轮）只计价一次。**排行**（`billing/getTodaySessionsSpend`）只在详情面板打开时（以及手动刷新时）拉取，徽标一直关着就不会为全量会话扫描买单。
+- **本会话花费靠推送，不靠拉取** —— 宿主把每个会话的花费折进客户端可见的 `billingTodaySpend` 投影并推送每次变化；徽标用框架 `useProjection` 座位订阅，因此投影注册表装配时该行零 Remote 调用、实时更新。键不存在时同一行回退到 `billing/getSessionSpend` —— 与未注册的输入框花费卡片读的是同一个面、同一条回退。
+- **今日花费随回合结束更新（去抖）** —— 组件通过框架 `useSession` 座位订阅当前会话的「运行中」标志。每当一轮 prompt 回合结束（标志翻回空闲）就重算**今日花费**（`billing/getTodaySpend`；同一行的**今日 Token** 由这次读取的模型行原地求和，不发额外请求）；重算有 2 秒去抖，回合突发（agent 连续多轮）只计价一次。**排行**（`billing/getTodaySessionsSpend`）只在详情面板打开时（以及手动刷新时）拉取，徽标一直关着就不会为全量会话扫描买单；「本会话花费」行括号里的今日份金额也来自这次排行读取，所以它不额外发请求，代价是与排行同进同退（排行未落定时不渲染括号——两个金额对不上才显示，而「未知」不算对不上）。
 - **额度带 TTL 缓存** —— 账户余额在挂载、切换会话、点刷新按钮时拉取。宿主 15 秒内复用同一份快照（手动刷新带 `force` 绕过），单次请求 5 秒超时；浏览器保留最后一次已落定值，切会话时立即渲染。仍然**没有轮询、不会自动重拉**。
 - **刷新保留旧值** —— 刷新在途时旧值留在屏幕上，刷新失败保留上一次有效值，不清空。刷新按钮调用 `billing/getBalance(true)`、`billing/getTodaySpend(true)` 与 `billing/getTodaySessionsSpend(true)`，绕过宿主侧缓存；回合结束触发的重算与挂载/切换会话的读取走缓存路径。
 
@@ -32,4 +34,6 @@ Web 额度特性的归属方：向 `conversation.session.header.utilities` 贡
 - **只取首条余额线** —— 余额读取主要（`balance_infos[0]`）币种行；其它币种行不显示。
 - **排行上限 10** —— 面板最多显示 `SESSION_RANKING_LIMIT` 个会话，其余以「…还有 N 个会话」提示。
 - **本轮花费需要已定稿的收尾消息** —— 中断的回合没有操作行，不显示本轮花费。
+- **今日 Token 只数计价行** —— 它统计的是 `billing/getTodaySpend` 返回的那些模型行（即价目表里有费率行的模型）的三个计费桶之和；没有费率行的模型不计 token，缓存写入并入「未缓存输入」桶（与分项同一口径）。
+- **输入框花费卡片暂无席位** —— 注册已暂停（见上），等宿主在输入框统计行里开放子插槽、或在 dock list 规格上加同行分组；在那之前输入框下方只有官方自带的 token/时间 pill。它只计价宿主费率表覆盖的模型（DeepSeek 与 MiMo），而上面那条 token 行统计的是会话全部 token，缓存写入并入它的「未缓存输入」行。
 - **额度最多旧 15 秒** —— 宿主 15 秒内复用同一份快照、浏览器保留最后一次已落定值：其他客户端产生的消耗不会让界面数值自动变化，需等 TTL 过期、手动刷新或刷新浏览器（仍无轮询）。

package/lib/client.js

@@ -4364,9 +4364,58 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		function formatSpend(amount) {
 			return `¥${amount.toFixed(4).replace(/\.?0+$/, "")}`;
 		}
+		/**
+		* A token count in DSH's own compact notation: `517` / `12.2K` / `517K` / `1.2M`.
+		*
+		* Mirrors ui-chat's `formatTokens` (`packages/client/ui-chat/src/client/chat/
+		* token-format.ts`) rule for rule, so one shell never renders the same count two
+		* ways. That rule reads: below 1e3 the plain integer (no digit grouping); below
+		* 1e6 the shared `number.thousand` unit (`{value}K`); otherwise the shared
+		* `number.million` unit (`{value}M`). A scaled value keeps one decimal while it
+		* is below 100 and rounds to a whole number from 100 up (`12.2K`, but `517K`),
+		* and there is no third unit, so 1.2e9 renders as `1200M` — exactly as DSH
+		* renders it. The unit letters are identical in both DSH dictionaries, so they
+		* are literals here rather than a locale lookup into the shared vocabulary.
+		* @param count - the token count to render.
+		* @returns the compact count, without the label's own ` tok` suffix.
+		*/
+		function formatTokens(count) {
+			const scaled = (value) => value >= 100 ? String(Math.round(value)) : String(Math.round(value * 10) / 10);
+			if (count < 1e3) return String(count);
+			if (count < 1e6) return `${scaled(count / 1e3)}K`;
+			return `${scaled(count / 1e6)}M`;
+		}
+		/**
+		* The total billed tokens of a priced row: the three buckets summed. Tokens are
+		* already counted per bucket when they were priced, so a cache-hit input token
+		* and an output token are both one token here — the number answers "how many
+		* tokens did this cost", not "how many characters were sent".
+		* @param row - one priced model row.
+		* @returns the row's total token count.
+		*/
+		function rowTokens(row) {
+			return row.cacheHitInputTokens + row.cacheMissInputTokens + row.outputTokens;
+		}
+		//#endregion
+		//#region lib/types/client/version.js
+		/**
+		* The plugin's own version, reported in the spend-hint bubble so a report can
+		* name the build actually in use.
+		*
+		* The value is stamped in at build time rather than read at runtime: a browser
+		* bundle has no manifest to read. `packages/tsdown.client.ts` defines
+		* `__DSH_PLUGIN_VERSION__` from this package's own `package.json` (the three
+		* published packages share one version), and `vitest.config.ts` defines the
+		* same constant from the same manifest so the suites see what a release ships.
+		* The `typeof` guard keeps a source run without either definition (a foreign
+		* bundler, a bare `tsc` check) from throwing on the undeclared global.
+		* @module @rayadesu/dsh-client-ui-billing/version
+		*/
+		/** The installed plugin version, e.g. `0.3.10`; `dev` when nothing stamped one. */
+		const PLUGIN_VERSION = "0.3.12";
 		//#endregion
 		//#region \0dsh-css:C:\Users\admin\Desktop\me\code\DeepSeek-Harness-chat-billing\packages\ui-billing\src\client\BalanceBadge.module.css.mjs
-		const css$1 = "._4_Wqcq_root{position:relative}._4_Wqcq_trigger{background:var(--dsw-alias-fill-l2);min-height:32px;color:var(--dsw-alias-label-secondary);cursor:pointer;border:0;border-radius:8px;align-items:center;gap:4px;padding:4px 8px;display:inline-flex}._4_Wqcq_trigger:hover,._4_Wqcq_trigger:focus-visible{color:var(--dsw-alias-label-primary)}._4_Wqcq_trigger svg{transition:transform .12s}._4_Wqcq_chevronOpen{transform:rotate(180deg)}._4_Wqcq_triggerLines{text-align:left;flex-direction:column;align-items:flex-start;gap:0;display:flex}._4_Wqcq_linePrimary{font-variant-numeric:tabular-nums;font-size:12px;line-height:16px}._4_Wqcq_lineSecondary{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;font-size:11px;line-height:15px}._4_Wqcq_unavailable{color:var(--dsw-alias-label-tertiary)}._4_Wqcq_inlineIcon{color:var(--dsw-alias-label-tertiary);flex:none}._4_Wqcq_spinning{color:var(--dsw-alias-label-tertiary);flex:none;animation:.8s linear infinite _4_Wqcq_spin}@keyframes _4_Wqcq_spin{to{transform:rotate(360deg)}}._4_Wqcq_panel{z-index:100;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-specific-menu);width:336px;max-width:min(360px,100vw - 32px);box-shadow:var(--dsw-shadow-lv3);border-radius:12px;flex-direction:column;gap:2px;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);right:0}._4_Wqcq_amountRow{border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;display:flex}._4_Wqcq_amountLabel{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-size:13px;line-height:18px}._4_Wqcq_amountRow>._4_Wqcq_amountLabel{font-size:15px;line-height:22px}._4_Wqcq_spendRow{border-top:1px solid var(--dsw-alias-border-l2);border-radius:0;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;display:flex}._4_Wqcq_costRow{align-items:center;padding:2px 8px 6px;display:flex}._4_Wqcq_costBreakdown{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;font-size:11px;line-height:16px}._4_Wqcq_amountActions{align-items:center;gap:2px;display:inline-flex}._4_Wqcq_infoButton,._4_Wqcq_refreshButton{width:24px;height:24px;color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._4_Wqcq_infoButton:hover,._4_Wqcq_infoButton:focus-visible,._4_Wqcq_refreshButton:hover,._4_Wqcq_refreshButton:focus-visible{color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-fill-l2)}._4_Wqcq_modelRow{border-radius:8px;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 8px;display:flex}._4_Wqcq_modelName{color:var(--dsw-alias-label-secondary);flex:none;font-size:12px;line-height:18px}._4_Wqcq_tasks{text-align:right;min-width:0;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-size:12px;line-height:18px}._4_Wqcq_ranking{border-top:1px solid var(--dsw-alias-border-l2);flex-direction:column;gap:0;padding-top:2px;display:flex}._4_Wqcq_rankingTitle{color:var(--dsw-alias-label-secondary);padding:6px 8px 2px;font-size:12px;line-height:18px}._4_Wqcq_rankingRow{border-radius:8px;align-items:baseline;gap:0;min-width:0;padding:3px 8px;display:flex}._4_Wqcq_rankingRow:hover{background:var(--dsw-alias-fill-l2)}._4_Wqcq_rankingIndex{width:16px;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;text-align:right;flex:none;font-size:11px;line-height:16px}._4_Wqcq_rankingDot{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;white-space:pre;flex:none;font-size:11px;line-height:16px}._4_Wqcq_rankingName{min-width:0;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px;line-height:16px;overflow:hidden}._4_Wqcq_rankingAmount{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;flex:none;margin-left:8px;font-size:11px;line-height:16px}._4_Wqcq_rankingMore{color:var(--dsw-alias-label-tertiary);padding:2px 8px 4px;font-size:11px;line-height:16px}";
+		const css$1 = "._4_Wqcq_root{position:relative}._4_Wqcq_trigger{background:var(--dsw-alias-fill-l2);min-height:32px;color:var(--dsw-alias-label-secondary);cursor:pointer;border:0;border-radius:8px;align-items:center;gap:4px;padding:4px 8px;display:inline-flex}._4_Wqcq_trigger:hover,._4_Wqcq_trigger:focus-visible{color:var(--dsw-alias-label-primary)}._4_Wqcq_trigger svg{transition:transform .12s}._4_Wqcq_chevronOpen{transform:rotate(180deg)}._4_Wqcq_triggerLines{text-align:left;flex-direction:column;align-items:flex-start;gap:0;display:flex}._4_Wqcq_linePrimary{font-variant-numeric:tabular-nums;font-size:12px;line-height:16px}._4_Wqcq_lineSecondary{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;font-size:11px;line-height:15px}._4_Wqcq_unavailable{color:var(--dsw-alias-label-tertiary)}._4_Wqcq_inlineIcon{color:var(--dsw-alias-label-tertiary);flex:none}._4_Wqcq_spinning{color:var(--dsw-alias-label-tertiary);flex:none;animation:.8s linear infinite _4_Wqcq_spin}@keyframes _4_Wqcq_spin{to{transform:rotate(360deg)}}._4_Wqcq_panel{z-index:100;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-specific-menu);width:336px;max-width:min(360px,100vw - 32px);box-shadow:var(--dsw-shadow-lv3);border-radius:12px;flex-direction:column;gap:2px;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);right:0}._4_Wqcq_amountRow{border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;display:flex}._4_Wqcq_amountLabel{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-size:13px;line-height:18px}._4_Wqcq_amountRow>._4_Wqcq_amountLabel{font-size:15px;line-height:22px}._4_Wqcq_spendToday{color:var(--dsw-alias-label-tertiary);font-size:12px}._4_Wqcq_spendRow{border-top:1px solid var(--dsw-alias-border-l2);border-radius:0;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;display:flex}._4_Wqcq_costRow{align-items:center;padding:2px 8px 6px;display:flex}._4_Wqcq_costBreakdown{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;font-size:11px;line-height:16px}._4_Wqcq_amountActions{align-items:center;gap:2px;display:inline-flex}._4_Wqcq_infoButton,._4_Wqcq_refreshButton{width:24px;height:24px;color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._4_Wqcq_infoButton:hover,._4_Wqcq_infoButton:focus-visible,._4_Wqcq_refreshButton:hover,._4_Wqcq_refreshButton:focus-visible{color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-fill-l2)}._4_Wqcq_modelRow{border-radius:8px;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 8px;display:flex}._4_Wqcq_modelName{color:var(--dsw-alias-label-secondary);flex:none;font-size:12px;line-height:18px}._4_Wqcq_tasks{text-align:right;min-width:0;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-size:12px;line-height:18px}._4_Wqcq_ranking{border-top:1px solid var(--dsw-alias-border-l2);flex-direction:column;gap:0;padding-top:2px;display:flex}._4_Wqcq_rankingTitle{color:var(--dsw-alias-label-secondary);padding:6px 8px 2px;font-size:12px;line-height:18px}._4_Wqcq_rankingRow{border-radius:8px;align-items:baseline;gap:0;min-width:0;padding:3px 8px;display:flex}._4_Wqcq_rankingRow:hover{background:var(--dsw-alias-fill-l2)}._4_Wqcq_rankingIndex{width:16px;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;text-align:right;flex:none;font-size:11px;line-height:16px}._4_Wqcq_rankingDot{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;white-space:pre;flex:none;font-size:11px;line-height:16px}._4_Wqcq_rankingName{min-width:0;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px;line-height:16px;overflow:hidden}._4_Wqcq_rankingAmount{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;flex:none;margin-left:8px;font-size:11px;line-height:16px}._4_Wqcq_rankingMore{color:var(--dsw-alias-label-tertiary);padding:2px 8px 4px;font-size:11px;line-height:16px}";
 		const tagId$1 = "@rayadesu/dsh-client-ui-billing/BalanceBadge.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
 			const tag = document.createElement("style");
@@ -4400,6 +4449,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			"refreshButton": "_4_Wqcq_refreshButton",
 			"root": "_4_Wqcq_root",
 			"spendRow": "_4_Wqcq_spendRow",
+			"spendToday": "_4_Wqcq_spendToday",
 			"spin": "_4_Wqcq_spin",
 			"spinning": "_4_Wqcq_spinning",
 			"tasks": "_4_Wqcq_tasks",
@@ -4407,8 +4457,20 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			"triggerLines": "_4_Wqcq_triggerLines",
 			"unavailable": "_4_Wqcq_unavailable"
 		};
+		/**
+		* Tolerance for "the session total and its share of today are the same number".
+		* Both are sums of the same priced samples, so a same-day session yields
+		* bit-identical floats; the slack only absorbs the accumulation-order noise a
+		* float sum can pick up on the way (a 1e-9 CNY difference is not a real one).
+		*/
+		const SPEND_SAME_EPSILON = 1e-9;
 		/** The detail box opened from the badge trigger. */
-		function BalancePanel({ amount, spend, todaySpend, sessionsSpend, refreshing, onRefresh, t }) {
+		function BalancePanel({ amount, sessionId, spend, todaySpend, sessionsSpend, refreshing, onRefresh, t }) {
+			const sessionToday = sessionsSpend === null ? void 0 : sessionsSpend.sessions.find((row) => row.sessionId === sessionId)?.total ?? 0;
+			const sessionTodayShare = spend !== null && sessionToday !== void 0 && Math.abs(spend.total - sessionToday) > SPEND_SAME_EPSILON ? sessionToday : null;
+			const sessionAmount = spend === null ? "—" : spend.models.length === 0 ? t("stat.none") : formatSpend(spend.total);
+			const todayTokens = todaySpend === null ? "—" : todaySpend.models.length === 0 ? t("stat.none") : t("unit.tokens", { count: formatTokens(todaySpend.models.reduce((sum, row) => sum + rowTokens(row), 0)) });
+			const todayAmount = todaySpend === null ? "—" : todaySpend.models.length === 0 ? t("stat.none") : formatSpend(todaySpend.total);
 			return (0, react_jsx_runtime.jsxs)("div", {
 				className: BalanceBadge_module_css_default.panel,
 				role: "dialog",
@@ -4422,9 +4484,10 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 						}), (0, react_jsx_runtime.jsxs)("span", {
 							className: BalanceBadge_module_css_default.amountActions,
 							children: [(0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
-								label: t("info.hint"),
+								label: t("info.hint", { version: PLUGIN_VERSION }),
+								side: "bottom",
 								delayMs: 200,
-								maxWidth: 340,
+								maxWidth: 300,
 								children: (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									className: BalanceBadge_module_css_default.infoButton,
@@ -4445,12 +4508,22 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 						className: BalanceBadge_module_css_default.spendRow,
 						children: [(0, react_jsx_runtime.jsx)("span", {
 							className: BalanceBadge_module_css_default.amountLabel,
-							children: t("label.sessionSpend", { amount: spend === null ? "—" : spend.models.length === 0 ? t("stat.none") : formatSpend(spend.total) })
+							children: t("label.todayTokens", { count: todayTokens })
 						}), (0, react_jsx_runtime.jsx)("span", {
 							className: BalanceBadge_module_css_default.amountLabel,
-							children: t("label.todaySpend", { amount: todaySpend === null ? "—" : todaySpend.models.length === 0 ? t("stat.none") : formatSpend(todaySpend.total) })
+							children: t("label.todaySpend", { amount: todayAmount })
 						})]
 					}),
+					(0, react_jsx_runtime.jsx)("div", {
+						className: BalanceBadge_module_css_default.spendRow,
+						children: (0, react_jsx_runtime.jsxs)("span", {
+							className: BalanceBadge_module_css_default.amountLabel,
+							children: [t("label.sessionSpend", { amount: sessionAmount }), sessionTodayShare !== null ? (0, react_jsx_runtime.jsx)("span", {
+								className: BalanceBadge_module_css_default.spendToday,
+								children: t("label.sessionSpend.today", { amount: formatSpend(sessionTodayShare) })
+							}) : null]
+						})
+					}),
 					spend?.models.map((model) => (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [(0, react_jsx_runtime.jsxs)("div", {
 						className: BalanceBadge_module_css_default.modelRow,
 						children: [(0, react_jsx_runtime.jsx)("span", {
@@ -4465,10 +4538,10 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 						children: (0, react_jsx_runtime.jsxs)("span", {
 							className: BalanceBadge_module_css_default.costBreakdown,
 							children: [
-								t("label.cost.hit", { amount: formatSpend(model.cacheHitInputCost) }),
-								" · ",
 								t("label.cost.input", { amount: formatSpend(model.cacheMissInputCost) }),
 								" · ",
+								t("label.cost.cacheRead", { amount: formatSpend(model.cacheHitInputCost) }),
+								" · ",
 								t("label.cost.output", { amount: formatSpend(model.outputCost) })
 							]
 						})
@@ -4731,6 +4804,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					t
 				}), open ? (0, react_jsx_runtime.jsx)(BalancePanel, {
 					amount,
+					sessionId,
 					spend,
 					todaySpend,
 					sessionsSpend,
@@ -4859,16 +4933,24 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			"trigger.conversationSpend": "本轮对话花费：{amount}",
 			"label.amount": "API 剩余金额：{amount}",
 			"label.sessionSpend": "本会话花费：{amount}",
-			"label.todaySpend": "今日共花费：{amount}",
-			"label.cost.hit": "缓存命中 {amount}",
-			"label.cost.input": "未命中输入 {amount}",
+			"label.sessionSpend.today": "（{amount}）",
+			"label.todaySpend": "今日花费：{amount}",
+			"label.todayTokens": "今日 Token：{count}",
+			"unit.tokens": "{count} tok",
+			"label.cost.input": "未缓存输入 {amount}",
+			"label.cost.cacheRead": "缓存读取 {amount}",
 			"label.cost.output": "输出 {amount}",
+			"card.title": "花费金额",
+			"card.input": "未缓存输入",
+			"card.cacheRead": "缓存读取",
+			"card.output": "输出",
+			"card.aria": "本轮对话花费：{amount}",
 			"stat.none": "暂无消耗记录",
 			"stat.untitled": "未命名",
 			"state.unavailable": "额度不可用",
 			"action.refresh": "刷新",
 			"info.aria": "花费说明",
-			"info.hint": "仅能预估 DeepSeek 及 MiMo 相关模型。本会话花费按每条消息的发生时刻（北京时间）所在峰谷时段单价计费：缓存命中输入、未命中输入（含缓存写入）、输出（含推理）分别计价。基础费率按 DeepSeek 8 月 17 日实行的标准，其中 flash 系列（V4.1 Flash / V4 Flash / Vision Exp）自 9 月 10 日 12:00 起执行新价（谷时 0.02 / 1.0 / 4.0 元每百万 token，峰时为其两倍），该时刻之前的消息仍按原价；V4 Pro 自 9 月 14 日 12:00 起改由 V4.1 Flash 服务并按其实施费率计费。高峰时段为北京时间周一至周五 9:00–12:00、14:00–18:00，周末全天按低谷价计费；MiMo 系列不区分峰谷，统一费率。",
+			"info.hint": "估算：仅 DeepSeek 与 MiMo 模型，按每条消息自身时刻的峰谷官方单价计价（高峰：工作日 9:00–12:00、14:00–18:00）。\n括号内为本会话今日花费。\nv{version}",
 			"badge.aria": "DeepSeek 额度：{amount}",
 			"panel.aria": "DeepSeek 额度详情",
 			"label.sessionRanking": "今日会话花费",
@@ -4880,16 +4962,24 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			"trigger.conversationSpend": "This conversation: {amount}",
 			"label.amount": "API balance: {amount}",
 			"label.sessionSpend": "This session: {amount}",
-			"label.todaySpend": "Today total: {amount}",
-			"label.cost.hit": "Cache hit {amount}",
-			"label.cost.input": "Missed input {amount}",
+			"label.sessionSpend.today": " ({amount})",
+			"label.todaySpend": "Today spend: {amount}",
+			"label.todayTokens": "Today tokens: {count}",
+			"unit.tokens": "{count} tok",
+			"label.cost.input": "Uncached input {amount}",
+			"label.cost.cacheRead": "Cached input {amount}",
 			"label.cost.output": "Output {amount}",
+			"card.title": "Spend",
+			"card.input": "Uncached input",
+			"card.cacheRead": "Cached input",
+			"card.output": "Output",
+			"card.aria": "This conversation’s spend: {amount}",
 			"stat.none": "No usage recorded",
 			"stat.untitled": "Untitled",
 			"state.unavailable": "Balance unavailable",
 			"action.refresh": "Refresh",
 			"info.aria": "About this spend",
-			"info.hint": "Only DeepSeek and MiMo models are estimated. This session's spend is priced per message at the rate of its Beijing-time peak/off-peak hour: cache-hit input, cache-miss input (including cache writes), and output (including reasoning) are billed separately. The base rates follow DeepSeek's August 17 pricing; the flash series (V4.1 Flash, V4 Flash, Vision Exp) was re-priced from September 10, 12:00 Beijing time (off-peak 0.02 / 1.0 / 4.0 CNY per 1M tokens, peak at twice those prices) while messages from before that instant keep the earlier rates, and V4 Pro switches to V4.1 Flash and its rates from September 14, 12:00 Beijing time. Peak hours are Beijing time Monday–Friday 09:00–12:00 and 14:00–18:00, and weekends are billed at off-peak prices all day. MiMo series uses a flat rate with no peak/off-peak distinction.",
+			"info.hint": "Estimate: DeepSeek and MiMo models only, each message priced at the official peak/off-peak rate of its own time (peak: weekdays 09:00–12:00, 14:00–18:00).\nThe parenthesized amount is this session's spend today.\nv{version}",
 			"badge.aria": "DeepSeek balance {amount}",
 			"panel.aria": "DeepSeek balance details",
 			"label.sessionRanking": "Today session spend",

package/lib/types/client/BalancePanel.d.ts

@@ -1,12 +1,17 @@
 import type { DeepSeekSessionSpend, DeepSeekTodaySessionsSpend, DeepSeekTodaySpend } from '@rayadesu/dsh-llm-billing/types';
+import type { SessionId } from '@deepseek-ai/dsh-session/types';
 import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
 import { NS } from './locales.ts';
-/** How many per-session ranking rows the panel shows before the overflow hint. */
+/**
+ * How many per-session ranking rows the panel shows before the overflow hint.
+ */
 export declare const SESSION_RANKING_LIMIT = 10;
 /** Panel props: precomputed amount plus the same spend values the badge holds. */
 export interface BalancePanelProps {
     /** Primary balance line, e.g. `¥123.45`; `—` when the provider reports none. */
     amount: string;
+    /** The session this panel belongs to: the row looked up in today's ranking. */
+    sessionId: SessionId;
     spend: DeepSeekSessionSpend | null;
     todaySpend: DeepSeekTodaySpend | null;
     sessionsSpend: DeepSeekTodaySessionsSpend | null;
@@ -15,5 +20,5 @@ export interface BalancePanelProps {
     t: PropsLocale<typeof NS>['t'];
 }
 /** The detail box opened from the badge trigger. */
-export declare function BalancePanel({ amount, spend, todaySpend, sessionsSpend, refreshing, onRefresh, t }: BalancePanelProps): import("react").JSX.Element;
+export declare function BalancePanel({ amount, sessionId, spend, todaySpend, sessionsSpend, refreshing, onRefresh, t }: BalancePanelProps): import("react").JSX.Element;
 //# sourceMappingURL=BalancePanel.d.ts.map

package/lib/types/client/SpendCard.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Composer spend card: the money-bag pill under the input box that opens this
+ * conversation's billed-cost card. The card reproduces DSH's own token-usage
+ * dialog skin row for row (same surface, radius, elevation, title rule, and
+ * right-aligned tabular amounts) with the spend's three billing buckets where
+ * that card shows its token buckets: uncached input, cache read, output.
+ *
+ * The amounts ride the host-pushed `billingTodaySpend` projection, so the card
+ * is live with zero Remote calls; `billing/getSessionSpend` is the fallback for
+ * an assembly whose projection registry is absent (the same ladder the header
+ * badge walks in `useBillingData`).
+ * @module @rayadesu/dsh-client-ui-billing/SpendCard
+ */
+import type { DeepSeekSessionSpend } from '@rayadesu/dsh-llm-billing/types';
+import type { SessionId } from '@deepseek-ai/dsh-session/types';
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots';
+import { NS } from './locales.ts';
+/** Injected face: this conversation's priced spend, for the projection-less fallback. */
+export interface SpendCardInjected {
+    /** Read one session's billed spend across its own events (Remote fallback). */
+    getSessionSpend: (sessionId: SessionId) => Promise<DeepSeekSessionSpend>;
+}
+/**
+ * Full props of the composer spend entry. The owner share arrives from
+ * ui-conversation's declared `conversation.composer.dock` list slot (it passes
+ * no owner values); the session runtime share adds the identity and the
+ * projection reader, as it does for every session-scoped slot.
+ */
+export type SpendCardProps = PropsRuntime<'conversation.composer.dock'> & InjectFace<SpendCardInjected> & PropsLocale<typeof NS>;
+/**
+ * Render the composer spend pill, and the cost card it opens.
+ *
+ * The pill mirrors DSH's own composer stat pills (14px glyph, tertiary tone,
+ * tabular amount, hover pill) in its own row under the input box, because the
+ * composer dock is a list slot whose entries the composer stacks. A session
+ * that priced nothing renders no row at all.
+ * @param props - the session identity, the projection reader, the Remote fallback, and the locale seat.
+ * @returns the pill plus its portaled card, or null when there is nothing to show.
+ */
+export declare function SpendCard({ sessionId, useProjection, getSessionSpend, t }: SpendCardProps): import("react").JSX.Element | null;
+//# sourceMappingURL=SpendCard.d.ts.map

package/lib/types/client/format.d.ts

@@ -1,8 +1,8 @@
 /**
  * Shared display formatting for the billing badges: the balance-line currency
- * prefix and the CNY spend amount renderer. Both the header badge and the
- * per-turn cost label format through these, so the two entries cannot drift
- * apart.
+ * prefix, the CNY spend amount renderer, and the token-count renderer. Both the
+ * header badge and the per-turn cost label format through these, so the two
+ * entries cannot drift apart.
  */
 import type { DeepSeekBalance } from '@rayadesu/dsh-llm-billing/types';
 /** Currency prefix for one balance line; unknown codes render as a literal prefix. */
@@ -14,4 +14,38 @@ export declare function primaryLine(balance: DeepSeekBalance): {
 } | undefined;
 /** CNY amount, up to four decimals with trailing zeros trimmed. */
 export declare function formatSpend(amount: number): string;
+/**
+ * A token count in DSH's own compact notation: `517` / `12.2K` / `517K` / `1.2M`.
+ *
+ * Mirrors ui-chat's `formatTokens` (`packages/client/ui-chat/src/client/chat/
+ * token-format.ts`) rule for rule, so one shell never renders the same count two
+ * ways. That rule reads: below 1e3 the plain integer (no digit grouping); below
+ * 1e6 the shared `number.thousand` unit (`{value}K`); otherwise the shared
+ * `number.million` unit (`{value}M`). A scaled value keeps one decimal while it
+ * is below 100 and rounds to a whole number from 100 up (`12.2K`, but `517K`),
+ * and there is no third unit, so 1.2e9 renders as `1200M` — exactly as DSH
+ * renders it. The unit letters are identical in both DSH dictionaries, so they
+ * are literals here rather than a locale lookup into the shared vocabulary.
+ * @param count - the token count to render.
+ * @returns the compact count, without the label's own ` tok` suffix.
+ */
+export declare function formatTokens(count: number): string;
+/** Every billed token bucket of one priced model row. */
+export interface TokenBuckets {
+    /** Cache-hit input tokens. */
+    cacheHitInputTokens: number;
+    /** Cache-miss input tokens (uncached input plus cache writes). */
+    cacheMissInputTokens: number;
+    /** Output tokens (reasoning included). */
+    outputTokens: number;
+}
+/**
+ * The total billed tokens of a priced row: the three buckets summed. Tokens are
+ * already counted per bucket when they were priced, so a cache-hit input token
+ * and an output token are both one token here — the number answers "how many
+ * tokens did this cost", not "how many characters were sent".
+ * @param row - one priced model row.
+ * @returns the row's total token count.
+ */
+export declare function rowTokens(row: TokenBuckets): number;
 //# sourceMappingURL=format.d.ts.map

package/lib/types/client/icons.d.ts

@@ -0,0 +1,20 @@
+/**
+ * In-house glyphs shared by this plugin's entries. Today's only member is the
+ * money bag the composer spend card and the per-turn cost label both lead with,
+ * so the two spend surfaces cannot drift apart iconographically.
+ * @module @rayadesu/dsh-client-ui-billing/icons
+ */
+/**
+ * In-house money-bag glyph in the hollow-outline style (16px viewBox, stroke
+ * currentColor, fill none), referencing the 💰 emoji: a bag outline with a
+ * tie knot at the neck and a centered yuan mark on the body. The drawing
+ * fills the 16px box like the other glyphs; a host that renders it at 14px
+ * (the DSH glyph tier) keeps the same geometry and only scales down.
+ * @param props - optional size and class.
+ * @returns the money-bag icon.
+ */
+export declare function WalletIcon({ size, className }: {
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/lib/types/client/index.d.ts

@@ -2,6 +2,7 @@
 import type { Context as ClientContext } from '@deepseek-ai/cordis';
 import { type BillingKey } from './locales.ts';
 export type { BalanceBadgeInjected, BalanceBadgeProps } from './BalanceBadge.tsx';
+export type { SpendCardInjected, SpendCardProps } from './SpendCard.tsx';
 export type { TurnCostActionInjected, TurnCostActionProps } from './TurnCostAction.tsx';
 export { createTurnCostStore, TURN_COST_STORE_LIMIT, type TurnCostStore } from './turnCostStore.ts';
 export type { BillingKey } from './locales.ts';

package/lib/types/client/locales.d.ts

@@ -7,16 +7,24 @@ export declare const zh: {
     readonly 'trigger.conversationSpend': "本轮对话花费：{amount}";
     readonly 'label.amount': "API 剩余金额：{amount}";
     readonly 'label.sessionSpend': "本会话花费：{amount}";
-    readonly 'label.todaySpend': "今日共花费：{amount}";
-    readonly 'label.cost.hit': "缓存命中 {amount}";
-    readonly 'label.cost.input': "未命中输入 {amount}";
+    readonly 'label.sessionSpend.today': "（{amount}）";
+    readonly 'label.todaySpend': "今日花费：{amount}";
+    readonly 'label.todayTokens': "今日 Token：{count}";
+    readonly 'unit.tokens': "{count} tok";
+    readonly 'label.cost.input': "未缓存输入 {amount}";
+    readonly 'label.cost.cacheRead': "缓存读取 {amount}";
     readonly 'label.cost.output': "输出 {amount}";
+    readonly 'card.title': "花费金额";
+    readonly 'card.input': "未缓存输入";
+    readonly 'card.cacheRead': "缓存读取";
+    readonly 'card.output': "输出";
+    readonly 'card.aria': "本轮对话花费：{amount}";
     readonly 'stat.none': "暂无消耗记录";
     readonly 'stat.untitled': "未命名";
     readonly 'state.unavailable': "额度不可用";
     readonly 'action.refresh': "刷新";
     readonly 'info.aria': "花费说明";
-    readonly 'info.hint': "仅能预估 DeepSeek 及 MiMo 相关模型。本会话花费按每条消息的发生时刻（北京时间）所在峰谷时段单价计费：缓存命中输入、未命中输入（含缓存写入）、输出（含推理）分别计价。基础费率按 DeepSeek 8 月 17 日实行的标准，其中 flash 系列（V4.1 Flash / V4 Flash / Vision Exp）自 9 月 10 日 12:00 起执行新价（谷时 0.02 / 1.0 / 4.0 元每百万 token，峰时为其两倍），该时刻之前的消息仍按原价；V4 Pro 自 9 月 14 日 12:00 起改由 V4.1 Flash 服务并按其实施费率计费。高峰时段为北京时间周一至周五 9:00–12:00、14:00–18:00，周末全天按低谷价计费；MiMo 系列不区分峰谷，统一费率。";
+    readonly 'info.hint': "估算：仅 DeepSeek 与 MiMo 模型，按每条消息自身时刻的峰谷官方单价计价（高峰：工作日 9:00–12:00、14:00–18:00）。\n括号内为本会话今日花费。\nv{version}";
     readonly 'badge.aria': "DeepSeek 额度：{amount}";
     readonly 'panel.aria': "DeepSeek 额度详情";
     readonly 'label.sessionRanking': "今日会话花费";

package/lib/types/client/spendBuckets.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The composer spend card's three bucket amounts, derived from the pushed
+ * `billingTodaySpend` projection. The host fold already prices every sample
+ * into the three disjoint billing buckets (cache-hit input, cache-miss input —
+ * which includes cache writes, output including reasoning), so the card sums
+ * the session's priced model rows instead of adding a Remote call or a second
+ * fold. Keeping the derivation here (pure, no React) lets the sum and its
+ * float reconciliation be tested on their own.
+ * @module @rayadesu/dsh-client-ui-billing/spendBuckets
+ */
+import type { DeepSeekTodaySpend } from '@rayadesu/dsh-llm-billing/types';
+/** One priced row's cost split across the three billing buckets, in CNY. */
+export interface SpendBuckets {
+    /** Uncached (cache-miss) input cost, cache writes included. */
+    uncachedInput: number;
+    /** Cache-hit (cache-read) input cost. */
+    cacheRead: number;
+    /** Output cost, reasoning included. */
+    output: number;
+    /** Billed total the three rows must add up to. */
+    total: number;
+}
+/**
+ * Fold one spend's model rows into the card's three bucket amounts.
+ *
+ * The rows carry float costs, so the three independently rendered values can
+ * miss the displayed total by one unit in the last rendered decimal after each
+ * is formatted to four decimals. The residual is absorbed by the largest
+ * bucket — the only one where a 1e-4 nudge cannot be seen — so the card's rows
+ * always add up to the total it shows in its header.
+ * @param spend - the session bucket of the `billingTodaySpend` projection
+ *   (the session's own events, every Beijing day).
+ * @returns the three bucket totals plus the billed total.
+ */
+export declare function spendBucketsOf(spend: DeepSeekTodaySpend): SpendBuckets;
+/** Whether a spend has any priced amount to show (a zero card stays hidden). */
+export declare function hasBilledSpend(spend: DeepSeekTodaySpend): boolean;
+//# sourceMappingURL=spendBuckets.d.ts.map

package/lib/types/client/useCardDialog.d.ts

@@ -0,0 +1,34 @@
+/**
+ * One trigger-anchored dialog seat for the composer spend card, mirroring the
+ * behaviour of DSH's own composer stat dialogs: the panel portals above the
+ * trigger, the position is clamped inside the viewport, an outside pointerdown
+ * or Escape closes it.
+ *
+ * DSH's `ui-chat` keeps its equivalent seat in its own private client bundle,
+ * so this plugin cannot import it; the two primitives it is built from are
+ * public (`@deepseek-ai/dsh-client-ui-primitives`), and the CSS skin they are
+ * paired with is reproduced in `SpendCard.module.css` from the same tokens.
+ * @module @rayadesu/dsh-client-ui-billing/useCardDialog
+ */
+import { type CSSProperties, type MutableRefObject } from 'react';
+/**
+ * Unplaced portal panel: hidden but laid out, so the clamp's measure pass sees
+ * the panel's real dimensions instead of clamping a zero-size box.
+ */
+export declare const MEASURE_STYLE: CSSProperties;
+/** Open state, the two refs, and the clamped placement of one card dialog. */
+export interface CardDialogSeat {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    /** Anchor: wraps the trigger pill so the clamp measures the pill, not the page. */
+    rootRef: MutableRefObject<HTMLSpanElement | null>;
+    panelRef: MutableRefObject<HTMLDivElement | null>;
+    /** Clamped placement; `null` during the measure pass (use {@link MEASURE_STYLE}). */
+    pos: CSSProperties | null;
+}
+/**
+ * Own the card's open state, placement, and dismissal.
+ * @returns the seat; spread `pos ?? MEASURE_STYLE` onto the portaled panel.
+ */
+export declare function useCardDialog(): CardDialogSeat;
+//# sourceMappingURL=useCardDialog.d.ts.map

package/lib/types/client/version.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The plugin's own version, reported in the spend-hint bubble so a report can
+ * name the build actually in use.
+ *
+ * The value is stamped in at build time rather than read at runtime: a browser
+ * bundle has no manifest to read. `packages/tsdown.client.ts` defines
+ * `__DSH_PLUGIN_VERSION__` from this package's own `package.json` (the three
+ * published packages share one version), and `vitest.config.ts` defines the
+ * same constant from the same manifest so the suites see what a release ships.
+ * The `typeof` guard keeps a source run without either definition (a foreign
+ * bundler, a bare `tsc` check) from throwing on the undeclared global.
+ * @module @rayadesu/dsh-client-ui-billing/version
+ */
+/** The installed plugin version, e.g. `0.3.10`; `dev` when nothing stamped one. */
+export declare const PLUGIN_VERSION: string;
+//# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rayadesu/dsh-client-ui-billing",
   "description": "Session-header DeepSeek account-balance and conversation-spend badge over the billing Remote",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",
@@ -47,7 +47,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@rayadesu/dsh-llm-billing": "^0.3.10",
+    "@rayadesu/dsh-llm-billing": "^0.3.12",
     "@deepseek-ai/dsh-client-locale": "^0.1.2-alpha.5",
     "@deepseek-ai/dsh-client-ui-conversation": "^0.1.2-alpha.5",
     "@deepseek-ai/dsh-typert-protocol": "^0.1.2-alpha.5",
@@ -58,7 +58,7 @@
     "@deepseek-ai/dsh-session": "^0.1.2-alpha.5"
   },
   "devDependencies": {
-    "@rayadesu/dsh-llm-billing": "^0.3.10",
+    "@rayadesu/dsh-llm-billing": "^0.3.12",
     "@deepseek-ai/dsh-api-gateway": "^0.1.2-alpha.5",
     "@deepseek-ai/dsh-client-locale": "^0.1.2-alpha.5",
     "@deepseek-ai/dsh-client-store": "^0.1.2-alpha.5",
@@ -72,6 +72,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "use-sync-external-store": "^1.2.0",