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

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: 72a43fe5a4e2fd6cb5f0e95232387a3418a4abf8
-README.zh.md: 8f3c5aad147d645af91214f4b35015a413722baf
+README.md: cd35c163925d48ff81774fefd45ea8deb06d59bd
+README.zh.md: 7d06d48a6da7337faa1acea887b59a6624a81ea3

package/README.md

@@ -2,21 +2,22 @@
 
 English | [中文](README.zh.md)
 
-Web billing feature owner: contributes one entry to `conversation.session.header.utilities` that mounts its own `billing` Remote, reads the DeepSeek account balance, this session's billed spend, today's spend across every session, today's per-session ranking, and one turn's cost through `billing/getBalance`, `billing/getSessionSpend`, `billing/getTodaySpend`, `billing/getTodaySessionsSpend`, and `billing/getTurnSpend`, and renders them 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.
+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 nothing while the first fetch is in flight. Clicking it opens a label box with the remaining amount, this session's billed spend (本会话花费, priced per message 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, 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 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 uses flex `order: -1` to sit at the **front** of the actions row (before the copy control). For each completed turn's closing assistant message, the entry reads `billing/getTurnSpend` (memoized per session + message, since settled turns never change) and renders `本轮花费 ¥X` — the "本轮花费" word in the usage-card title tone and the amount in the summary tone, **always visible** (the hover rule only targets the clock text). Turns that priced to zero (no DeepSeek usage) and failed loads render nothing, so a Remote outage never clutters the row.
+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.
 
-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 token usage through `billing/getSessionSpend` and every session's usage through `billing/getTodaySpend`. Copy goes through the package's own `billing` locale namespace; styling uses tokens only.
+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 stays a manual snapshot:
+The spends follow the conversation and the balance is cached, not polled:
 
-- **Spends follow 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 this session's spend (`billing/getSessionSpend`), today's spend (`billing/getTodaySpend`), and the ranking (`billing/getTodaySessionsSpend`), local pricing passes with no network request, so the spend lines stay live during an ongoing conversation. 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 host-side cache (see `dsh-llm-billing`) then serves the first miss for the rest of the minute.
-- **Balance is manual** — the account balance is fetched on mount, on session switch, and on the explicit refresh action (`billing/getBalance`). There is no polling and no automatic refetch: the balance line only changes when one of those events happens.
-- **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/getTodaySpend(true)` and `billing/getTodaySessionsSpend(true)`, which bypass the host-side cache; the turn-triggered recompute and the mount/session-switch read use the cached path.
+- **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.
+- **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.
 
 ## Model Experience
 
@@ -31,4 +32,4 @@ 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.
-- **Balance does not follow automatically** — the balance is a manual snapshot (no polling): spending from another client does not move the shown value until a refresh or browser reload.
+- **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

@@ -2,21 +2,22 @@
 
 [English](README.md) | 中文
 
-Web 额度特性的归属方：向 `conversation.session.header.utilities` 贡献一个条目，自己挂载 `billing` Remote，通过 `billing/getBalance`、`billing/getSessionSpend`、`billing/getTodaySpend`、`billing/getTodaySessionsSpend` 与 `billing/getTurnSpend` 读取 DeepSeek 账户余额、本会话的计费花费、今日所有会话的计费花费、今日按会话的排行与单个回合的花费，并在右上角渲染成一个标签框。该能力的宿主侧在 [`dsh-llm-billing`](../llm-billing/README.md)，它拥有 `/user/balance` 传输、峰谷计价表与 `billing` Remote 命名空间；本包挂载那个 Remote 并渲染它返回的内容。
+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」）——有上次已落定的余额就立即渲染（按插件实例保留），后台校验；首次余额尚未到达时不渲染任何东西。点击后展开一个标签框：剩余金额、本会话的计费花费（本会话花费，按官方峰/谷单价逐条用量样本计价——高峰窗口仅周一至周五适用，周末按低谷价——分叉会话只按分叉后的自有工作计价——右侧并列今日所有会话的合计「今日共花费」）、每个模型一行的花费及其缓存命中/未命中输入/输出分项（「缓存命中 ¥X · 未命中输入 ¥Y · 输出 ¥Z」）、手动刷新按钮与花费说明。剩余金额行（`API 剩余金额`）字号大于下方花费行。模型行下方是**今日会话花费排行**（`今日会话花费`）：按今日花费从高到低排列的会话列表，每行以右对齐的名次列开头，后接与花费分项相同的小圆点分隔符（「·」，字号、色调与间距一致），再是会话的持久标题（重命名自动同步），最后是金额——标题在名次列后缩进对齐；最多渲染 `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` 排到操作行**最前**（复制按钮之前）。对每条已完成回合的收尾助手消息，条目通过 `billing/getTurnSpend` 读取花费（按会话 + 消息 memo，回合落定后不再变化），渲染「本轮花费 ¥X」——「本轮花费」用卡片标题色、金额用卡片摘要色，**始终显示**（悬停规则只作用于时钟文本）。回合没有 DeepSeek 用量（花费为 0）或加载失败时不渲染，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 故障不会污染操作行。
 
-角标是账户级的，尽管插槽是会话作用域：顶栏工具行不过是外壳提供的那个始终可见的标题栏席位，余额并不随会话变化——但花费行会，因为它通过 `billing/getSessionSpend` 按当前会话自己的 token 用量计价、通过 `billing/getTodaySpend` 按所有会话的用量计价。文案走本包自己的 `billing` locale 命名空间；样式只用 token。
+角标是账户级的，尽管插槽是会话作用域：顶栏工具行不过是外壳提供的那个始终可见的标题栏席位，余额并不随会话变化——但花费行会，因为它按当前会话自己的用量（推送的投影，或 `billing/getSessionSpend`）计价、通过 `billing/getTodaySpend` 按所有会话的用量计价。文案走本包自己的 `billing` locale 命名空间；样式只用 token。
 
 ## 数据更新机制
 
-花费跟随会话、额度保持手动快照：
+花费跟随会话、额度带缓存但不轮询：
 
-- **花费随回合结束自动更新（去抖）** —— 组件通过框架 `useSession` 座位订阅当前会话的「运行中」标志。每当一轮 prompt 回合结束（标志翻回空闲），就只重算**本会话的花费**（`billing/getSessionSpend`）、**今日共花费**（`billing/getTodaySpend`）与**排行**（`billing/getTodaySessionsSpend`，纯本地计价、不发网络请求），连续对话时花费行实时跟随。重算有 2 秒去抖，回合突发（agent 连续多轮）只计价一次；宿主侧缓存（见 `dsh-llm-billing`）随后在一分钟内服务首次未命中。
-- **额度保持手动** —— 账户余额在挂载、切换会话、点刷新按钮时拉取（`billing/getBalance`）。**没有轮询、不会自动重拉**：余额行只在这几个时机变化。
-- **刷新保留旧值** —— 刷新在途时旧值留在屏幕上，刷新失败保留上一次有效值，不清空。刷新按钮调用 `billing/getTodaySpend(true)` 与 `billing/getTodaySessionsSpend(true)`，绕过宿主侧缓存；回合结束触发的重算与挂载/切换会话的读取走缓存路径。
+- **本会话花费靠推送，不靠拉取** —— 宿主把每个会话的花费折进客户端可见的 `billingTodaySpend` 投影并推送每次变化；徽标用框架 `useProjection` 座位订阅，因此投影注册表装配时该行零 Remote 调用、实时更新。键不存在时同一行回退到 `billing/getSessionSpend`。
+- **今日共花费随回合结束更新（去抖）** —— 组件通过框架 `useSession` 座位订阅当前会话的「运行中」标志。每当一轮 prompt 回合结束（标志翻回空闲）就重算**今日共花费**（`billing/getTodaySpend`）；重算有 2 秒去抖，回合突发（agent 连续多轮）只计价一次。**排行**（`billing/getTodaySessionsSpend`）只在详情面板打开时（以及手动刷新时）拉取，徽标一直关着就不会为全量会话扫描买单。
+- **额度带 TTL 缓存** —— 账户余额在挂载、切换会话、点刷新按钮时拉取。宿主 15 秒内复用同一份快照（手动刷新带 `force` 绕过），单次请求 5 秒超时；浏览器保留最后一次已落定值，切会话时立即渲染。仍然**没有轮询、不会自动重拉**。
+- **刷新保留旧值** —— 刷新在途时旧值留在屏幕上，刷新失败保留上一次有效值，不清空。刷新按钮调用 `billing/getBalance(true)`、`billing/getTodaySpend(true)` 与 `billing/getTodaySessionsSpend(true)`，绕过宿主侧缓存；回合结束触发的重算与挂载/切换会话的读取走缓存路径。
 
 ## 模型体验
 
@@ -31,4 +32,4 @@ Web 额度特性的归属方：向 `conversation.session.header.utilities` 贡
 - **只取首条余额线** —— 余额读取主要（`balance_infos[0]`）币种行；其它币种行不显示。
 - **排行上限 10** —— 面板最多显示 `SESSION_RANKING_LIMIT` 个会话，其余以「…还有 N 个会话」提示。
 - **本轮花费需要已定稿的收尾消息** —— 中断的回合没有操作行，不显示本轮花费。
-- **额度不自动跟随** —— 余额保持手动快照（无轮询）：其他客户端产生的消耗不会让界面数值自动变化，需手动刷新或刷新浏览器。
+- **额度最多旧 15 秒** —— 宿主 15 秒内复用同一份快照、浏览器保留最后一次已落定值：其他客户端产生的消耗不会让界面数值自动变化，需等 TTL 过期、手动刷新或刷新浏览器（仍无轮询）。

package/lib/client.js

@@ -5,8 +5,8 @@ window.__ModuleLoader__.load({
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let react_jsx_runtime = require("react/jsx-runtime");
-		let react = require("react");
 		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+		let react = require("react");
 		//#region ../../node_modules/.pnpm/zod@4.4.3/node_modules/zod/v4/core/core.js
 		var _a$1;
 		function $constructor(name, initializer, params) {
@@ -4094,6 +4094,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		}
 		//#endregion
 		//#region ../llm-billing/lib/typert.remote-client.js
+		const _rayadesu_dsh_llm_billing_billing_getBalance_parameter_0$schema = union([
+			_undefined(),
+			literal(false),
+			literal(true)
+		]);
 		const _rayadesu_dsh_llm_billing_billing_getBalance_result$schema = object({
 			"isAvailable": boolean(),
 			"lines": array(object({
@@ -4120,6 +4125,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				"outputCost": number()
 			}))
 		});
+		const _rayadesu_dsh_llm_billing_billing_getSessionTurnSpends_parameter_0$schema = intersection(string(), unknown());
+		const _rayadesu_dsh_llm_billing_billing_getSessionTurnSpends_result$schema = object({ "turns": array(object({
+			"messageId": string(),
+			"total": number()
+		})) });
 		const _rayadesu_dsh_llm_billing_billing_getTodaySessionsSpend_parameter_0$schema = union([
 			_undefined(),
 			literal(false),
@@ -4163,7 +4173,17 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					namespace: "billing",
 					method: "getBalance",
 					invocation: { kind: "direct" },
-					parameters: [],
+					parameters: [{
+						name: "force",
+						wire: "force",
+						source: "json",
+						acceptsUndefined: true,
+						codec: {
+							mode: "strict",
+							typeSymbol: "@rayadesu/dsh-llm-billing#billing/getBalance:force",
+							schema: _rayadesu_dsh_llm_billing_billing_getBalance_parameter_0$schema
+						}
+					}],
 					result: {
 						mode: "strict",
 						typeSymbol: "@rayadesu/dsh-llm-billing/types#DeepSeekBalance",
@@ -4171,7 +4191,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/llm-billing/src/balance.ts",
-						"line": 154,
+						"line": 165,
 						"column": 3
 					}
 				},
@@ -4198,7 +4218,34 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/llm-billing/src/balance.ts",
-						"line": 165,
+						"line": 176,
+						"column": 3
+					}
+				},
+				{
+					id: "@rayadesu/dsh-llm-billing#billing/getSessionTurnSpends",
+					service: "billing",
+					namespace: "billing",
+					method: "getSessionTurnSpends",
+					invocation: { kind: "direct" },
+					parameters: [{
+						name: "sessionId",
+						wire: "sessionId",
+						source: "json",
+						codec: {
+							mode: "strict",
+							typeSymbol: "@rayadesu/dsh-llm-billing#billing/getSessionTurnSpends:sessionId",
+							schema: _rayadesu_dsh_llm_billing_billing_getSessionTurnSpends_parameter_0$schema
+						}
+					}],
+					result: {
+						mode: "strict",
+						typeSymbol: "@rayadesu/dsh-llm-billing/types#DeepSeekSessionTurnSpends",
+						schema: _rayadesu_dsh_llm_billing_billing_getSessionTurnSpends_result$schema
+					},
+					sourceLocation: {
+						"file": "packages/llm-billing/src/balance.ts",
+						"line": 227,
 						"column": 3
 					}
 				},
@@ -4226,7 +4273,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/llm-billing/src/balance.ts",
-						"line": 192,
+						"line": 202,
 						"column": 3
 					}
 				},
@@ -4254,7 +4301,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/llm-billing/src/balance.ts",
-						"line": 178,
+						"line": 189,
 						"column": 3
 					}
 				},
@@ -4290,13 +4337,34 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					},
 					sourceLocation: {
 						"file": "packages/llm-billing/src/balance.ts",
-						"line": 205,
+						"line": 215,
 						"column": 3
 					}
 				}
 			]
 		};
 		//#endregion
+		//#region lib/types/client/format.js
+		/** Currency prefix for one balance line; unknown codes render as a literal prefix. */
+		function currencySymbol(currency) {
+			if (currency === "CNY") return "¥";
+			if (currency === "USD") return "$";
+			return `${currency} `;
+		}
+		/** The primary balance line, or undefined when the provider reports none. */
+		function primaryLine(balance) {
+			const line = balance.lines[0];
+			if (line === void 0) return void 0;
+			return {
+				symbol: currencySymbol(line.currency),
+				total: line.total
+			};
+		}
+		/** CNY amount, up to four decimals with trailing zeros trimmed. */
+		function formatSpend(amount) {
+			return `¥${amount.toFixed(4).replace(/\.?0+$/, "")}`;
+		}
+		//#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 tagId$1 = "@rayadesu/dsh-client-ui-billing/BalanceBadge.module.css";
@@ -4339,28 +4407,147 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			"triggerLines": "_4_Wqcq_triggerLines",
 			"unavailable": "_4_Wqcq_unavailable"
 		};
-		//#endregion
-		//#region lib/types/client/BalanceBadge.js
-		/** Session-header billing badge: balance plus the current conversation's billed spend. */
-		/** Currency prefix for one balance line; unknown codes render as a literal prefix. */
-		function currencySymbol(currency) {
-			if (currency === "CNY") return "¥";
-			if (currency === "USD") return "$";
-			return `${currency} `;
-		}
-		/** The primary balance line, or undefined when the provider reports none. */
-		function primaryLine(balance) {
-			const line = balance.lines[0];
-			if (line === void 0) return void 0;
-			return {
-				symbol: currencySymbol(line.currency),
-				total: line.total
-			};
+		/** The detail box opened from the badge trigger. */
+		function BalancePanel({ amount, spend, todaySpend, sessionsSpend, refreshing, onRefresh, t }) {
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: BalanceBadge_module_css_default.panel,
+				role: "dialog",
+				"aria-label": t("panel.aria"),
+				children: [
+					(0, react_jsx_runtime.jsxs)("div", {
+						className: BalanceBadge_module_css_default.amountRow,
+						children: [(0, react_jsx_runtime.jsx)("span", {
+							className: BalanceBadge_module_css_default.amountLabel,
+							children: t("label.amount", { amount })
+						}), (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"),
+								delayMs: 200,
+								maxWidth: 340,
+								children: (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: BalanceBadge_module_css_default.infoButton,
+									"aria-label": t("info.aria"),
+									children: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconQuestionOutline14, { className: BalanceBadge_module_css_default.inlineIcon })
+								})
+							}), (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: BalanceBadge_module_css_default.refreshButton,
+								onClick: onRefresh,
+								"aria-label": t("action.refresh"),
+								"data-refreshing": refreshing || void 0,
+								children: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutline14, { className: refreshing ? BalanceBadge_module_css_default.spinning : BalanceBadge_module_css_default.inlineIcon })
+							})]
+						})]
+					}),
+					(0, react_jsx_runtime.jsxs)("div", {
+						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) })
+						}), (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) })
+						})]
+					}),
+					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", {
+							className: BalanceBadge_module_css_default.modelName,
+							children: model.displayName
+						}), (0, react_jsx_runtime.jsx)("span", {
+							className: BalanceBadge_module_css_default.tasks,
+							children: formatSpend(model.cost)
+						})]
+					}), (0, react_jsx_runtime.jsx)("div", {
+						className: BalanceBadge_module_css_default.costRow,
+						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.output", { amount: formatSpend(model.outputCost) })
+							]
+						})
+					})] }, model.model)),
+					sessionsSpend !== null && sessionsSpend.sessions.length > 0 && (0, react_jsx_runtime.jsxs)("div", {
+						className: BalanceBadge_module_css_default.ranking,
+						children: [
+							(0, react_jsx_runtime.jsx)("div", {
+								className: BalanceBadge_module_css_default.rankingTitle,
+								children: t("label.sessionRanking")
+							}),
+							sessionsSpend.sessions.slice(0, 10).map((row, index) => (0, react_jsx_runtime.jsxs)("div", {
+								className: BalanceBadge_module_css_default.rankingRow,
+								children: [
+									(0, react_jsx_runtime.jsx)("span", {
+										className: BalanceBadge_module_css_default.rankingIndex,
+										children: index + 1
+									}),
+									(0, react_jsx_runtime.jsx)("span", {
+										className: BalanceBadge_module_css_default.rankingDot,
+										"aria-hidden": true,
+										children: " · "
+									}),
+									(0, react_jsx_runtime.jsx)("span", {
+										className: BalanceBadge_module_css_default.rankingName,
+										title: row.title ?? void 0,
+										children: row.title ?? t("stat.untitled")
+									}),
+									(0, react_jsx_runtime.jsx)("span", {
+										className: BalanceBadge_module_css_default.rankingAmount,
+										children: formatSpend(row.total)
+									})
+								]
+							}, row.sessionId)),
+							sessionsSpend.sessions.length > 10 && (0, react_jsx_runtime.jsx)("div", {
+								className: BalanceBadge_module_css_default.rankingMore,
+								children: t("label.sessionRanking.more", { count: sessionsSpend.sessions.length - 10 })
+							})
+						]
+					})
+				]
+			});
 		}
-		/** CNY amount, up to four decimals with trailing zeros trimmed. */
-		function formatSpend$1(amount) {
-			return `¥${amount.toFixed(4).replace(/\.?0+$/, "")}`;
+		//#endregion
+		//#region lib/types/client/BalanceTrigger.js
+		/**
+		* Session-header billing trigger: the balance plus the conversation-spend
+		* line. Pure view over the data hook's values — no state, no effects.
+		*/
+		/** The badge button: balance line, spend line, and the open-state chevron. */
+		function BalanceTrigger({ amount, spendLine, open, onToggle, t }) {
+			return (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: BalanceBadge_module_css_default.trigger,
+				"aria-expanded": open,
+				"aria-label": t("badge.aria", { amount }),
+				onClick: onToggle,
+				children: [(0, react_jsx_runtime.jsxs)("span", {
+					className: BalanceBadge_module_css_default.triggerLines,
+					children: [(0, react_jsx_runtime.jsx)("span", {
+						className: BalanceBadge_module_css_default.linePrimary,
+						children: t("trigger.balance", { amount })
+					}), spendLine !== void 0 && (0, react_jsx_runtime.jsx)("span", {
+						className: BalanceBadge_module_css_default.lineSecondary,
+						children: spendLine
+					})]
+				}), (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutline14, { className: open ? BalanceBadge_module_css_default.chevronOpen : void 0 })]
+			});
 		}
+		//#endregion
+		//#region lib/types/client/useBillingData.js
+		/**
+		* Billing badge data hook: owns the balance/session/today states, the
+		* mount+refresh fetch, the turn-settled recompute, and the click-outside
+		* close. The trigger and the panel are pure views over the returned values,
+		* so the concurrency/race handling lives in exactly one file.
+		*/
+		/** Debounce for the turn-settled recompute: a burst of turns prices once. */
+		const TURN_SETTLE_DEBOUNCE_MS = 2e3;
 		/**
 		* Run one fetch line: the fetch is deferred to a microtask so the effect's
 		* render commits before any state update lands; a settled value is stored
@@ -4376,23 +4563,16 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			});
 		}
 		/**
-		* Render the billing badge in the session-header utilities row. The trigger
-		* shows the remaining balance and this conversation's billed spend and opens
-		* a label box with the amount, this session's spend with its cache-hit /
-		* cache-miss-input / output cost breakdown per model, today's spend across
-		* every session, a refresh action, and a spend disclaimer. Refreshing keeps
-		* the last values visible rather than blanking them.
-		*
-		* The spend follows the conversation: when a prompt turn settles in the
-		* current session, the badge recomputes only the (local, network-free)
-		* session spend and today's spend through `getSessionSpend` /
-		* `getTodaySpend`; the balance stays a manual-refresh snapshot and is never
-		* refetched on its own.
-		* @param props - Remote face, locale, and the standard session-header runtime share.
-		* @returns the badge, or null until the first balance fetch settles.
+		* Start the badge's data lifecycle for one session. The spend follows the
+		* conversation: the host-pushed `billingTodaySpend` projection drives the
+		* session line live (zero Remote calls), with `getSessionSpend` as the
+		* bootstrap/fallback when the projection key is absent; today's spend is
+		* recomputed through `getTodaySpend` when a turn settles; the balance stays a
+		* manual-refresh snapshot and is never refetched on its own.
+		* @param props - the badge's injected face and session runtime share.
 		*/
-		function BalanceBadge({ getBalance, getSessionSpend, getTodaySpend, getTodaySessionsSpend, sessionId, useSession, t }) {
-			const [balance, setBalance] = (0, react.useState)(null);
+		function useBillingData({ getBalance, getCachedBalance, getSessionSpend, getTodaySpend, getTodaySessionsSpend, sessionId, useSession, useProjection }) {
+			const [balance, setBalance] = (0, react.useState)(getCachedBalance);
 			const [spend, setSpend] = (0, react.useState)(null);
 			const [todaySpend, setTodaySpend] = (0, react.useState)(null);
 			const [sessionsSpend, setSessionsSpend] = (0, react.useState)(null);
@@ -4401,22 +4581,27 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			const [open, setOpen] = (0, react.useState)(false);
 			const [request, setRequest] = (0, react.useState)(0);
 			const rootRef = (0, react.useRef)(null);
+			const projected = useProjection("billingTodaySpend");
 			const running = useSession((snapshot) => snapshot.running);
 			const pricedRunningRef = (0, react.useRef)(running);
+			const balanceRef = (0, react.useRef)(balance);
+			balanceRef.current = balance;
+			const openRef = (0, react.useRef)(open);
+			openRef.current = open;
 			(0, react.useEffect)(() => {
 				let current = true;
 				const isCurrent = () => current;
-				setRefreshing(balance !== null);
+				setRefreshing(balanceRef.current !== null);
 				Promise.resolve().then(() => {
-					const balanceRequest = fetchLine(isCurrent, getBalance, (value) => {
+					const balanceRequest = fetchLine(isCurrent, () => getBalance(request > 0), (value) => {
 						setBalance(value);
 						setError(null);
 					}, (reason) => {
-						if (balance === null) setError(reason instanceof Error ? reason.message : String(reason));
+						if (balanceRef.current === null) setError(reason instanceof Error ? reason.message : String(reason));
 					});
 					const sessionSpendRequest = fetchLine(isCurrent, () => getSessionSpend(sessionId), setSpend);
 					const todaySpendRequest = fetchLine(isCurrent, () => getTodaySpend(request > 0), setTodaySpend);
-					const sessionsSpendRequest = fetchLine(isCurrent, () => getTodaySessionsSpend(request > 0), setSessionsSpend);
+					const sessionsSpendRequest = openRef.current ? fetchLine(isCurrent, () => getTodaySessionsSpend(request > 0), setSessionsSpend) : Promise.resolve();
 					Promise.allSettled([
 						balanceRequest,
 						sessionSpendRequest,
@@ -4437,6 +4622,14 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				sessionId,
 				request
 			]);
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				let current = true;
+				fetchLine(() => current, () => getTodaySessionsSpend(), setSessionsSpend);
+				return () => {
+					current = false;
+				};
+			}, [getTodaySessionsSpend, open]);
 			(0, react.useEffect)(() => {
 				if (running === pricedRunningRef.current) return;
 				pricedRunningRef.current = running;
@@ -4446,8 +4639,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				const timer = setTimeout(() => {
 					fetchLine(isCurrent, () => getSessionSpend(sessionId), setSpend);
 					fetchLine(isCurrent, () => getTodaySpend(), setTodaySpend);
-					fetchLine(isCurrent, () => getTodaySessionsSpend(), setSessionsSpend);
-				}, 2e3);
+					if (openRef.current) fetchLine(isCurrent, () => getTodaySessionsSpend(), setSessionsSpend);
+				}, TURN_SETTLE_DEBOUNCE_MS);
 				return () => {
 					clearTimeout(timer);
 					current = false;
@@ -4469,6 +4662,44 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					document.removeEventListener("pointerdown", closeOutside);
 				};
 			}, [open]);
+			return {
+				balance,
+				spend: projected === void 0 ? spend : projected.session,
+				todaySpend,
+				sessionsSpend,
+				error,
+				refreshing,
+				open,
+				rootRef,
+				refresh: () => {
+					setRequest((value) => value + 1);
+				},
+				toggleOpen: () => {
+					setOpen((value) => !value);
+				}
+			};
+		}
+		//#endregion
+		//#region lib/types/client/BalanceBadge.js
+		/**
+		* Render the billing badge in the session-header utilities row: the trigger
+		* shows the remaining balance and this conversation's billed spend, and opens
+		* the detail panel (amount, per-model spend breakdown, today's spend, ranking,
+		* refresh, disclaimer).
+		* @param props - Remote face, locale, and the standard session-header runtime share.
+		* @returns the badge, or null until the first balance fetch settles.
+		*/
+		function BalanceBadge({ getBalance, getCachedBalance, getSessionSpend, getTodaySpend, getTodaySessionsSpend, sessionId, useSession, useProjection, t }) {
+			const { balance, spend, todaySpend, sessionsSpend, error, refreshing, open, rootRef, refresh, toggleOpen } = useBillingData({
+				getBalance,
+				getCachedBalance,
+				getSessionSpend,
+				getTodaySpend,
+				getTodaySessionsSpend,
+				sessionId,
+				useSession,
+				useProjection
+			});
 			if (balance === null) {
 				if (error === null) return null;
 				return (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
@@ -4477,9 +4708,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					children: (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						className: BalanceBadge_module_css_default.trigger,
-						onClick: () => {
-							setRequest((value) => value + 1);
-						},
+						onClick: refresh,
 						"aria-label": t("action.refresh"),
 						children: [(0, react_jsx_runtime.jsx)("span", {
 							className: BalanceBadge_module_css_default.unavailable,
@@ -4488,134 +4717,26 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					})
 				});
 			}
-			const refresh = () => {
-				setRequest((value) => value + 1);
-			};
 			const line = primaryLine(balance);
 			const amount = line === void 0 ? "—" : `${line.symbol}${line.total}`;
-			const spendLine = spend !== null && spend.models.length > 0 ? t("trigger.conversationSpend", { amount: formatSpend$1(spend.total) }) : void 0;
+			const spendLine = spend !== null && spend.models.length > 0 ? t("trigger.conversationSpend", { amount: formatSpend(spend.total) }) : void 0;
 			return (0, react_jsx_runtime.jsxs)("div", {
 				ref: rootRef,
 				className: BalanceBadge_module_css_default.root,
-				children: [(0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					className: BalanceBadge_module_css_default.trigger,
-					"aria-expanded": open,
-					"aria-label": t("badge.aria", { amount }),
-					onClick: () => {
-						setOpen((value) => !value);
-					},
-					children: [(0, react_jsx_runtime.jsxs)("span", {
-						className: BalanceBadge_module_css_default.triggerLines,
-						children: [(0, react_jsx_runtime.jsx)("span", {
-							className: BalanceBadge_module_css_default.linePrimary,
-							children: t("trigger.balance", { amount })
-						}), spendLine !== void 0 && (0, react_jsx_runtime.jsx)("span", {
-							className: BalanceBadge_module_css_default.lineSecondary,
-							children: spendLine
-						})]
-					}), (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutline14, { className: open ? BalanceBadge_module_css_default.chevronOpen : void 0 })]
-				}), open ? (0, react_jsx_runtime.jsxs)("div", {
-					className: BalanceBadge_module_css_default.panel,
-					role: "dialog",
-					"aria-label": t("panel.aria"),
-					children: [
-						(0, react_jsx_runtime.jsxs)("div", {
-							className: BalanceBadge_module_css_default.amountRow,
-							children: [(0, react_jsx_runtime.jsx)("span", {
-								className: BalanceBadge_module_css_default.amountLabel,
-								children: t("label.amount", { amount })
-							}), (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"),
-									delayMs: 200,
-									maxWidth: 340,
-									children: (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: BalanceBadge_module_css_default.infoButton,
-										"aria-label": t("info.aria"),
-										children: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconQuestionOutline14, { className: BalanceBadge_module_css_default.inlineIcon })
-									})
-								}), (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: BalanceBadge_module_css_default.refreshButton,
-									onClick: refresh,
-									"aria-label": t("action.refresh"),
-									"data-refreshing": refreshing || void 0,
-									children: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutline14, { className: refreshing ? BalanceBadge_module_css_default.spinning : BalanceBadge_module_css_default.inlineIcon })
-								})]
-							})]
-						}),
-						(0, react_jsx_runtime.jsxs)("div", {
-							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$1(spend.total) })
-							}), (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$1(todaySpend.total) })
-							})]
-						}),
-						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", {
-								className: BalanceBadge_module_css_default.modelName,
-								children: model.displayName
-							}), (0, react_jsx_runtime.jsx)("span", {
-								className: BalanceBadge_module_css_default.tasks,
-								children: formatSpend$1(model.cost)
-							})]
-						}), (0, react_jsx_runtime.jsx)("div", {
-							className: BalanceBadge_module_css_default.costRow,
-							children: (0, react_jsx_runtime.jsxs)("span", {
-								className: BalanceBadge_module_css_default.costBreakdown,
-								children: [
-									t("label.cost.hit", { amount: formatSpend$1(model.cacheHitInputCost) }),
-									" · ",
-									t("label.cost.input", { amount: formatSpend$1(model.cacheMissInputCost) }),
-									" · ",
-									t("label.cost.output", { amount: formatSpend$1(model.outputCost) })
-								]
-							})
-						})] }, model.model)),
-						sessionsSpend !== null && sessionsSpend.sessions.length > 0 && (0, react_jsx_runtime.jsxs)("div", {
-							className: BalanceBadge_module_css_default.ranking,
-							children: [
-								(0, react_jsx_runtime.jsx)("div", {
-									className: BalanceBadge_module_css_default.rankingTitle,
-									children: t("label.sessionRanking")
-								}),
-								sessionsSpend.sessions.slice(0, 10).map((row, index) => (0, react_jsx_runtime.jsxs)("div", {
-									className: BalanceBadge_module_css_default.rankingRow,
-									children: [
-										(0, react_jsx_runtime.jsx)("span", {
-											className: BalanceBadge_module_css_default.rankingIndex,
-											children: index + 1
-										}),
-										(0, react_jsx_runtime.jsx)("span", {
-											className: BalanceBadge_module_css_default.rankingDot,
-											"aria-hidden": true,
-											children: " · "
-										}),
-										(0, react_jsx_runtime.jsx)("span", {
-											className: BalanceBadge_module_css_default.rankingName,
-											title: row.title ?? void 0,
-											children: row.title ?? t("stat.untitled")
-										}),
-										(0, react_jsx_runtime.jsx)("span", {
-											className: BalanceBadge_module_css_default.rankingAmount,
-											children: formatSpend$1(row.total)
-										})
-									]
-								}, row.sessionId)),
-								sessionsSpend.sessions.length > 10 && (0, react_jsx_runtime.jsx)("div", {
-									className: BalanceBadge_module_css_default.rankingMore,
-									children: t("label.sessionRanking.more", { count: sessionsSpend.sessions.length - 10 })
-								})
-							]
-						})
-					]
+				children: [(0, react_jsx_runtime.jsx)(BalanceTrigger, {
+					amount,
+					spendLine,
+					open,
+					onToggle: toggleOpen,
+					t
+				}), open ? (0, react_jsx_runtime.jsx)(BalancePanel, {
+					amount,
+					spend,
+					todaySpend,
+					sessionsSpend,
+					refreshing,
+					onRefresh: refresh,
+					t
 				}) : null]
 			});
 		}
@@ -4634,21 +4755,6 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		//#endregion
 		//#region lib/types/client/TurnCostAction.js
 		/** Per-turn billed-cost label in the closing assistant message's actions row. */
-		/** CNY amount, up to four decimals with trailing zeros trimmed. */
-		function formatSpend(amount) {
-			return `¥${amount.toFixed(4).replace(/\.?0+$/, "")}`;
-		}
-		const turnCostCache = /* @__PURE__ */ new Map();
-		const TURN_COST_CACHE_LIMIT = 1024;
-		async function cachedTurnCost(sessionId, messageId, getTurnSpend) {
-			const key = `${sessionId}\0${messageId}`;
-			const cached = turnCostCache.get(key);
-			if (cached !== void 0) return cached;
-			const spend = await getTurnSpend(sessionId, messageId);
-			if (turnCostCache.size >= TURN_COST_CACHE_LIMIT) turnCostCache.clear();
-			turnCostCache.set(key, spend);
-			return spend;
-		}
 		/**
 		* Render one Turn's billed cost as a plain, non-interactive `¥金额` at the
 		* end of the closing message's actions row. The DOM stays inside the
@@ -4658,18 +4764,18 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		* row's 8px gap spaces it from the clock, so the amount reads as one trailing
 		* meta line with the time; no icon, label or hover behavior of its own (the
 		* row's hover reveal shows it with the clock). It appears only after the
-		* Remote settles and hides again when the Turn priced to zero (no DeepSeek
+		* shared map resolves and hides again when the Turn priced to zero (no DeepSeek
 		* usage); a failed fetch stays hidden so a Remote outage never clutters the
 		* row.
 		* @param props - the closing message id, the session runtime share, and the injected cost reader.
 		* @returns the cost text, or null while loading, on failure, or for zero cost.
 		*/
-		function TurnCostAction({ messageId, sessionId, getTurnSpend }) {
+		function TurnCostAction({ messageId, sessionId, getTurnCost }) {
 			const [cost, setCost] = (0, react.useState)(null);
 			(0, react.useEffect)(() => {
 				let current = true;
-				Promise.resolve().then(() => cachedTurnCost(sessionId, messageId, getTurnSpend)).then((value) => {
-					if (current) setCost(value);
+				Promise.resolve().then(() => getTurnCost(sessionId, messageId)).then((value) => {
+					if (current) setCost(value ?? null);
 				}, () => {
 					if (current) setCost(null);
 				});
@@ -4677,18 +4783,72 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					current = false;
 				};
 			}, [
-				getTurnSpend,
+				getTurnCost,
 				messageId,
 				sessionId
 			]);
-			if (cost === null || cost.total <= 0) return null;
+			if (cost === null || cost <= 0) return null;
 			return (0, react_jsx_runtime.jsx)("span", {
 				className: TurnCostAction_module_css_default.cost,
 				"data-turn-cost": true,
-				children: formatSpend(cost.total)
+				children: formatSpend(cost)
 			});
 		}
 		//#endregion
+		//#region lib/types/client/turnCostStore.js
+		/** Max sessions whose maps are kept before the oldest is evicted. */
+		const TURN_COST_STORE_LIMIT = 32;
+		/**
+		* Build the shared store over one batch fetcher.
+		* @param fetch - the `getSessionTurnSpends` call.
+		* @returns the store.
+		*/
+		function createTurnCostStore(fetch) {
+			const entries = /* @__PURE__ */ new Map();
+			const entryFor = (sessionId) => {
+				let entry = entries.get(sessionId);
+				if (entry === void 0) {
+					entry = {
+						turns: /* @__PURE__ */ new Map(),
+						inflight: void 0
+					};
+					entries.set(sessionId, entry);
+					while (entries.size > 32) {
+						const oldest = entries.keys().next().value;
+						if (oldest === void 0) break;
+						entries.delete(oldest);
+					}
+				}
+				return entry;
+			};
+			const refresh = (sessionId, entry) => {
+				if (entry.inflight !== void 0) return entry.inflight;
+				const run = (async () => {
+					try {
+						const result = await fetch(sessionId);
+						entry.turns = new Map(result.turns.map((row) => [row.messageId, row.total]));
+					} finally {
+						entry.inflight = void 0;
+					}
+				})();
+				entry.inflight = run;
+				return run;
+			};
+			return {
+				async get(sessionId, messageId) {
+					const entry = entryFor(sessionId);
+					const cached = entry.turns.get(messageId);
+					if (cached !== void 0) return cached;
+					await refresh(sessionId, entry).catch(() => {});
+					return entry.turns.get(messageId);
+				},
+				invalidate(sessionId) {
+					if (sessionId === void 0) entries.clear();
+					else entries.delete(sessionId);
+				}
+			};
+		}
+		//#endregion
 		//#region lib/types/client/locales.js
 		/** `billing` namespace dictionaries. */
 		/** Dictionary namespace owned by this plugin. */
@@ -4708,7 +4868,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			"state.unavailable": "额度不可用",
 			"action.refresh": "刷新",
 			"info.aria": "花费说明",
-			"info.hint": "仅能预估 DeepSeek 及 MiMo 相关模型。本会话花费按每条消息的发生时刻（北京时间）所在峰谷时段单价计费：缓存命中输入、未命中输入（含缓存写入）、输出（含推理）分别计价。DeepSeek 费率按 8 月 17 日实行的标准，高峰时段为北京时间周一至周五 9:00–12:00、14:00–18:00，周末全天按低谷价计费；MiMo 系列不区分峰谷，统一费率。",
+			"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 系列不区分峰谷，统一费率。",
 			"badge.aria": "DeepSeek 额度：{amount}",
 			"panel.aria": "DeepSeek 额度详情",
 			"label.sessionRanking": "今日会话花费",
@@ -4729,7 +4889,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			"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. DeepSeek rates follow the August 17 pricing; 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": "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.",
 			"badge.aria": "DeepSeek balance {amount}",
 			"panel.aria": "DeepSeek balance details",
 			"label.sessionRanking": "Today session spend",
@@ -4762,12 +4922,17 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				zh,
 				en
 			}), "ui-billing: dictionaries");
+			let lastBalance = null;
 			const injected = {
-				getBalance: async () => unwrap("billing.getBalance", await billing.getBalance()),
+				getBalance: async (force) => {
+					const value = unwrap("billing.getBalance", await billing.getBalance(force));
+					lastBalance = value;
+					return value;
+				},
+				getCachedBalance: () => lastBalance,
 				getSessionSpend: async (sessionId) => unwrap("billing.getSessionSpend", await billing.getSessionSpend(sessionId)),
 				getTodaySpend: async (force) => unwrap("billing.getTodaySpend", await billing.getTodaySpend(force)),
-				getTodaySessionsSpend: async (force) => unwrap("billing.getTodaySessionsSpend", await billing.getTodaySessionsSpend(force)),
-				getTurnSpend: async (sessionId, messageId) => unwrap("billing.getTurnSpend", await billing.getTurnSpend(sessionId, messageId))
+				getTodaySessionsSpend: async (force) => unwrap("billing.getTodaySessionsSpend", await billing.getTodaySessionsSpend(force))
 			};
 			ctx.slots.inject("conversation.session.header.utilities", () => ctx.slots.register({
 				name: "conversation.session.header.utilities",
@@ -4776,7 +4941,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				locale: NS,
 				inject: () => injected
 			}, BalanceBadge));
-			const turnCostInjected = { getTurnSpend: injected.getTurnSpend };
+			const turnCosts = createTurnCostStore(async (sessionId) => unwrap("billing.getSessionTurnSpends", await billing.getSessionTurnSpends(sessionId)));
+			const turnCostInjected = { getTurnCost: (sessionId, messageId) => turnCosts.get(sessionId, messageId) };
 			ctx.slots.inject("conversation.chat.assistant-actions", () => ctx.slots.register({
 				name: "conversation.chat.assistant-actions",
 				id: "billing-turn-cost",
@@ -4786,7 +4952,9 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			}, TurnCostAction));
 		}
 		//#endregion
+		exports.TURN_COST_STORE_LIMIT = TURN_COST_STORE_LIMIT;
 		exports.apply = apply;
+		exports.createTurnCostStore = createTurnCostStore;
 		exports.inject = inject;
 		return module.exports;
 	}

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

@@ -1,12 +1,31 @@
-/** Session-header billing badge: balance plus the current conversation's billed spend. */
-import type { DeepSeekBalance, DeepSeekSessionSpend, DeepSeekTodaySessionsSpend, DeepSeekTodaySpend, DeepSeekTurnSpend } from '@rayadesu/dsh-llm-billing/types';
+/**
+ * Session-header billing badge: balance plus the current conversation's billed
+ * spend. Composition root: the data lifecycle lives in {@link useBillingData},
+ * and the trigger / detail panel are pure views. The badge renders null until
+ * the first balance fetch settles, and a refresh keeps the last values
+ * visible rather than blanking them.
+ */
+import type { DeepSeekBalance, DeepSeekSessionSpend, DeepSeekTodaySessionsSpend, DeepSeekTodaySpend } 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';
+export { SESSION_RANKING_LIMIT } from './BalancePanel.tsx';
+export { TURN_SETTLE_DEBOUNCE_MS } from './useBillingData.ts';
 /** Registration-side Remote face used by the header badge. */
 export interface BalanceBadgeInjected {
-    /** Read the account balance; rejects with the Remote error message. */
-    getBalance: () => Promise<DeepSeekBalance>;
+    /**
+     * Read the account balance; rejects with the Remote error message. `force`
+     * bypasses the host-side TTL — the manual refresh passes it, a mount does
+     * not (a snapshot younger than the TTL is reused, so switching sessions
+     * costs no provider call).
+     */
+    getBalance: (force?: boolean) => Promise<DeepSeekBalance>;
+    /**
+     * The last balance this browser half settled, or `null` before the first
+     * one. Synchronous: a badge mount renders the amount immediately and
+     * revalidates in the background.
+     */
+    getCachedBalance: () => DeepSeekBalance | null;
     /** Read one session's billed spend; rejects with the Remote error message. */
     getSessionSpend: (sessionId: SessionId) => Promise<DeepSeekSessionSpend>;
     /**
@@ -20,28 +39,16 @@ export interface BalanceBadgeInjected {
      * with the Remote error message. `force` behaves as in {@link getTodaySpend}.
      */
     getTodaySessionsSpend: (force?: boolean) => Promise<DeepSeekTodaySessionsSpend>;
-    /** Read one completed Turn's billed cost, located by its closing message id. */
-    getTurnSpend: (sessionId: SessionId, messageId: string) => Promise<DeepSeekTurnSpend>;
 }
 /** Full props assembled by the header utilities slot renderer. */
 export type BalanceBadgeProps = PropsRuntime<'conversation.session.header.utilities'> & InjectFace<BalanceBadgeInjected> & PropsLocale<typeof NS>;
-/** How many per-session ranking rows the panel shows before the overflow hint. */
-export declare const SESSION_RANKING_LIMIT = 10;
 /**
- * Render the billing badge in the session-header utilities row. The trigger
- * shows the remaining balance and this conversation's billed spend and opens
- * a label box with the amount, this session's spend with its cache-hit /
- * cache-miss-input / output cost breakdown per model, today's spend across
- * every session, a refresh action, and a spend disclaimer. Refreshing keeps
- * the last values visible rather than blanking them.
- *
- * The spend follows the conversation: when a prompt turn settles in the
- * current session, the badge recomputes only the (local, network-free)
- * session spend and today's spend through `getSessionSpend` /
- * `getTodaySpend`; the balance stays a manual-refresh snapshot and is never
- * refetched on its own.
+ * Render the billing badge in the session-header utilities row: the trigger
+ * shows the remaining balance and this conversation's billed spend, and opens
+ * the detail panel (amount, per-model spend breakdown, today's spend, ranking,
+ * refresh, disclaimer).
  * @param props - Remote face, locale, and the standard session-header runtime share.
  * @returns the badge, or null until the first balance fetch settles.
  */
-export declare function BalanceBadge({ getBalance, getSessionSpend, getTodaySpend, getTodaySessionsSpend, sessionId, useSession, t }: BalanceBadgeProps): import("react").JSX.Element | null;
+export declare function BalanceBadge({ getBalance, getCachedBalance, getSessionSpend, getTodaySpend, getTodaySessionsSpend, sessionId, useSession, useProjection, t }: BalanceBadgeProps): import("react").JSX.Element | null;
 //# sourceMappingURL=BalanceBadge.d.ts.map

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

@@ -0,0 +1,19 @@
+import type { DeepSeekSessionSpend, DeepSeekTodaySessionsSpend, DeepSeekTodaySpend } from '@rayadesu/dsh-llm-billing/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. */
+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;
+    spend: DeepSeekSessionSpend | null;
+    todaySpend: DeepSeekTodaySpend | null;
+    sessionsSpend: DeepSeekTodaySessionsSpend | null;
+    refreshing: boolean;
+    onRefresh: () => void;
+    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;
+//# sourceMappingURL=BalancePanel.d.ts.map

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

@@ -0,0 +1,17 @@
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import { NS } from './locales.ts';
+/** Trigger props: the rendered strings come precomputed from the parent. */
+export interface BalanceTriggerProps {
+    /** Primary line amount, e.g. `¥123.45`; `—` when the provider reports none. */
+    amount: string;
+    /** Secondary conversation-spend line; absent when the session has no priced usage. */
+    spendLine: string | undefined;
+    /** Whether the detail panel is open (chevron + aria-expanded). */
+    open: boolean;
+    /** Toggle the panel. */
+    onToggle: () => void;
+    t: PropsLocale<typeof NS>['t'];
+}
+/** The badge button: balance line, spend line, and the open-state chevron. */
+export declare function BalanceTrigger({ amount, spendLine, open, onToggle, t }: BalanceTriggerProps): import("react").JSX.Element;
+//# sourceMappingURL=BalanceTrigger.d.ts.map

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

@@ -1,12 +1,15 @@
 /** Per-turn billed-cost label in the closing assistant message's actions row. */
-import type { DeepSeekTurnSpend } 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: one Turn's billed cost through the billing Remote. */
+/** Injected face: one message's Turn cost, served from a shared per-session map. */
 export interface TurnCostActionInjected {
-    /** Read one completed Turn's billed cost, located by its closing message id. */
-    getTurnSpend: (sessionId: SessionId, messageId: string) => Promise<DeepSeekTurnSpend>;
+    /**
+     * Resolve one completed Turn's billed cost by its message id. The underlying
+     * `getSessionTurnSpends` fetch happens once per session (shared by every row
+     * and coalesced across concurrent mounts), not once per rendered message.
+     */
+    getTurnCost: (sessionId: SessionId, messageId: string) => Promise<number | undefined>;
 }
 /**
  * Full props of the per-turn cost entry. The slot's owner share
@@ -24,11 +27,11 @@ export type TurnCostActionProps = PropsRuntime<'conversation.chat.assistant-acti
  * row's 8px gap spaces it from the clock, so the amount reads as one trailing
  * meta line with the time; no icon, label or hover behavior of its own (the
  * row's hover reveal shows it with the clock). It appears only after the
- * Remote settles and hides again when the Turn priced to zero (no DeepSeek
+ * shared map resolves and hides again when the Turn priced to zero (no DeepSeek
  * usage); a failed fetch stays hidden so a Remote outage never clutters the
  * row.
  * @param props - the closing message id, the session runtime share, and the injected cost reader.
  * @returns the cost text, or null while loading, on failure, or for zero cost.
  */
-export declare function TurnCostAction({ messageId, sessionId, getTurnSpend }: TurnCostActionProps): import("react").JSX.Element | null;
+export declare function TurnCostAction({ messageId, sessionId, getTurnCost }: TurnCostActionProps): import("react").JSX.Element | null;
 //# sourceMappingURL=TurnCostAction.d.ts.map

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

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+import type { DeepSeekBalance } from '@rayadesu/dsh-llm-billing/types';
+/** Currency prefix for one balance line; unknown codes render as a literal prefix. */
+export declare function currencySymbol(currency: string): string;
+/** The primary balance line, or undefined when the provider reports none. */
+export declare function primaryLine(balance: DeepSeekBalance): {
+    symbol: string;
+    total: string;
+} | undefined;
+/** CNY amount, up to four decimals with trailing zeros trimmed. */
+export declare function formatSpend(amount: number): string;
+//# sourceMappingURL=format.d.ts.map

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

@@ -3,6 +3,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 { TurnCostActionInjected, TurnCostActionProps } from './TurnCostAction.tsx';
+export { createTurnCostStore, TURN_COST_STORE_LIMIT, type TurnCostStore } from './turnCostStore.ts';
 export type { BillingKey } from './locales.ts';
 declare module '@deepseek-ai/dsh-client-ui-slots' {
     interface LocaleNamespaceMap {

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

@@ -16,7 +16,7 @@ export declare const zh: {
     readonly 'state.unavailable': "额度不可用";
     readonly 'action.refresh': "刷新";
     readonly 'info.aria': "花费说明";
-    readonly 'info.hint': "仅能预估 DeepSeek 及 MiMo 相关模型。本会话花费按每条消息的发生时刻（北京时间）所在峰谷时段单价计费：缓存命中输入、未命中输入（含缓存写入）、输出（含推理）分别计价。DeepSeek 费率按 8 月 17 日实行的标准，高峰时段为北京时间周一至周五 9:00–12:00、14:00–18:00，周末全天按低谷价计费；MiMo 系列不区分峰谷，统一费率。";
+    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 'badge.aria': "DeepSeek 额度：{amount}";
     readonly 'panel.aria': "DeepSeek 额度详情";
     readonly 'label.sessionRanking': "今日会话花费";

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

@@ -0,0 +1,30 @@
+/**
+ * Shared per-session Turn-cost map: one `getSessionTurnSpends` fetch serves
+ * every cost row of a session, instead of one Remote call per rendered
+ * message. Concurrent row mounts join the in-flight fetch, and a message id
+ * the map does not know triggers exactly one refetch (a newly completed Turn),
+ * so a transcript of N rows costs O(1) calls plus one per new Turn.
+ */
+import type { SessionId } from '@deepseek-ai/dsh-session/types';
+import type { DeepSeekSessionTurnSpends } from '@rayadesu/dsh-llm-billing/types';
+/** Max sessions whose maps are kept before the oldest is evicted. */
+export declare const TURN_COST_STORE_LIMIT = 32;
+/** The shared store surface the cost row consumes. */
+export interface TurnCostStore {
+    /**
+     * Resolve one message's Turn cost, fetching the session's map on a miss.
+     * @param sessionId - the session owning the message.
+     * @param messageId - the assistant message id.
+     * @returns the Turn cost in CNY, or `undefined` when the message is not in a completed Turn.
+     */
+    get(sessionId: SessionId, messageId: string): Promise<number | undefined>;
+    /** Drop one session's map (or every map) so the next read refetches. */
+    invalidate(sessionId?: SessionId): void;
+}
+/**
+ * Build the shared store over one batch fetcher.
+ * @param fetch - the `getSessionTurnSpends` call.
+ * @returns the store.
+ */
+export declare function createTurnCostStore(fetch: (sessionId: SessionId) => Promise<DeepSeekSessionTurnSpends>): TurnCostStore;
+//# sourceMappingURL=turnCostStore.d.ts.map

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

@@ -0,0 +1,30 @@
+import type { RefObject } from 'react';
+import type { DeepSeekBalance, DeepSeekSessionSpend, DeepSeekTodaySessionsSpend, DeepSeekTodaySpend } from '@rayadesu/dsh-llm-billing/types';
+import type { BalanceBadgeProps } from './BalanceBadge.tsx';
+/** Debounce for the turn-settled recompute: a burst of turns prices once. */
+export declare const TURN_SETTLE_DEBOUNCE_MS = 2000;
+/** The data surface the trigger and the panel render from. */
+export interface BillingData {
+    balance: DeepSeekBalance | null;
+    spend: DeepSeekSessionSpend | null;
+    todaySpend: DeepSeekTodaySpend | null;
+    sessionsSpend: DeepSeekTodaySessionsSpend | null;
+    /** Balance fetch failure while no value is present yet. */
+    error: string | null;
+    refreshing: boolean;
+    open: boolean;
+    rootRef: RefObject<HTMLDivElement>;
+    refresh: () => void;
+    toggleOpen: () => void;
+}
+/**
+ * Start the badge's data lifecycle for one session. The spend follows the
+ * conversation: the host-pushed `billingTodaySpend` projection drives the
+ * session line live (zero Remote calls), with `getSessionSpend` as the
+ * bootstrap/fallback when the projection key is absent; today's spend is
+ * recomputed through `getTodaySpend` when a turn settles; the balance stays a
+ * manual-refresh snapshot and is never refetched on its own.
+ * @param props - the badge's injected face and session runtime share.
+ */
+export declare function useBillingData({ getBalance, getCachedBalance, getSessionSpend, getTodaySpend, getTodaySessionsSpend, sessionId, useSession, useProjection, }: Pick<BalanceBadgeProps, 'getBalance' | 'getCachedBalance' | 'getSessionSpend' | 'getTodaySpend' | 'getTodaySessionsSpend' | 'sessionId' | 'useSession' | 'useProjection'>): BillingData;
+//# sourceMappingURL=useBillingData.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.8",
+  "version": "0.3.10",
   "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.8",
+    "@rayadesu/dsh-llm-billing": "^0.3.10",
     "@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.8",
+    "@rayadesu/dsh-llm-billing": "^0.3.10",
     "@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",