@rayadesu/dsh-client-ui-billing 0.2.4 → 0.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 WilliamLIiii
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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: b4ac01bab9f32a7bdad2dbd1f86f2f4a53f25af6
-README.zh.md: d7719cf98df1cf5b8c8189c99901019a37f04e45
+README.md: 7d0fbbf1aac701d3c0a8bdaa6be7ad2f1b2775bb
+README.zh.md: 77ceda46ac61f1ed1bf2cb869bad7b2bb40598f3

package/README.md

@@ -6,7 +6,7 @@ Web billing feature owner: contributes one entry to `conversation.session.header
 
 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) 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. Below the model rows the panel ends with the **today session-spend ranking** (`今日会话花费`): sessions sorted by today's cost, highest first, each row carrying the session's durable title (renames sync automatically) and its amount; 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. For each completed turn's closing assistant message, the entry reads `billing/getTurnSpend` (memoized per session + message, since settled turns never change) and renders a muted `本轮花费：¥X` label in the actions row, next to the turn's usage card. 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 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 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.
 

package/README.zh.md

@@ -6,7 +6,7 @@ Web 额度特性的归属方：向 `conversation.session.header.utilities` 贡
 
 触发器显示两行——剩余额度与本轮对话的计费花费（「本轮对话花费 ¥X」）——首个请求在途时不渲染任何东西。点击后展开一个标签框：剩余金额、本会话的计费花费（本会话花费，按官方峰/谷单价逐条消息计价——高峰窗口仅周一至周五适用，周末按低谷价——右侧并列今日所有会话的合计「今日共花费」）、每个模型一行的花费及其缓存命中/未命中输入/输出分项（「缓存命中 ¥X · 未命中输入 ¥Y · 输出 ¥Z」）、手动刷新按钮与花费说明。模型行下方是**今日会话花费排行**（`今日会话花费`）：按今日花费从高到低排列的会话列表，每行带会话的持久标题（重命名自动同步）与金额；最多渲染 `SESSION_RANKING_LIMIT`（10）行，其余以「…还有 N 个会话」提示。刷新时旧值不消失，刷新失败保留上一次有效值。没有可计价消耗的会话或日子显示「暂无消耗记录」而不是编造数字。失败——未配置 API key、凭据被拒绝、传输错误——渲染弱化的「额度不可用」，其提示携带 Remote 自己的错误信息。
 
-本包还贡献**本轮花费条目**（`billing-turn-cost`，order 20）到 ui-chat 的 `conversation.chat.assistant-actions` list slot——与 `ui-message-feedback` 同一条操作条，多条目共存。对每条已完成回合的收尾助手消息，条目通过 `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` 排到操作行**最前**（复制按钮之前）。对每条已完成回合的收尾助手消息，条目通过 `billing/getTurnSpend` 读取花费（按会话 + 消息 memo，回合落定后不再变化），渲染「本轮花费 ¥X」——「本轮花费」用卡片标题色、金额用卡片摘要色，**始终显示**（悬停规则只作用于时钟文本）。回合没有 DeepSeek 用量（花费为 0）或加载失败时不渲染，Remote 故障不会污染操作行。
 
 角标是账户级的，尽管插槽是会话作用域：顶栏工具行不过是外壳提供的那个始终可见的标题栏席位，余额并不随会话变化——但花费行会，因为它通过 `billing/getSessionSpend` 按当前会话自己的 token 用量计价、通过 `billing/getTodaySpend` 按所有会话的用量计价。文案走本包自己的 `billing` locale 命名空间；样式只用 token。
 

package/lib/client.js

@@ -4298,7 +4298,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		};
 		//#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_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-tertiary);padding:6px 8px 2px;font-size:11px;line-height:16px}._4_Wqcq_rankingRow{border-radius:8px;align-items:baseline;gap:8px;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_rankingName{min-width:0;color:var(--dsw-alias-label-secondary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px;line-height:18px;overflow:hidden}._4_Wqcq_rankingAmount{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;flex:none;font-size:12px;line-height:18px}._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_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:8px;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_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;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");
@@ -4615,7 +4615,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		}
 		//#endregion
 		//#region \0dsh-css:C:\Users\admin\Desktop\me\code\DeepSeek-Harness-chat-billing\packages\ui-billing\src\client\TurnCostAction.module.css.mjs
-		const css = ".l2XZIa_cost{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;font-size:12px;line-height:18px}";
+		const css = ".l2XZIa_cost{min-width:0;color:var(--dsw-alias-label-tertiary);font-size:var(--dsh-content-font-size-secondary,13px);font-variant-numeric:tabular-nums;line-height:calc(24px + var(--dsh-content-font-delta,0px));text-overflow:ellipsis;white-space:nowrap;flex:none;order:-1;align-items:center;margin-left:6px;display:inline-flex;overflow:hidden}.l2XZIa_leading{width:calc(16px + var(--dsh-content-font-delta,0px));height:calc(16px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-tertiary);flex:none;justify-content:center;align-items:center;margin-right:6px;display:inline-flex}.l2XZIa_leading svg{width:16px;height:16px}.l2XZIa_costLabel{color:var(--dsw-alias-label-secondary);flex:none}.l2XZIa_separator{background:var(--dsw-alias-label-caption);border-radius:1px;flex:none;width:2px;height:2px;margin:0 8px}.l2XZIa_costValue{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}";
 		const tagId = "@rayadesu/dsh-client-ui-billing/TurnCostAction.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -4624,10 +4624,42 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			tag.textContent = css;
 			document.head.appendChild(tag);
 		}
-		var TurnCostAction_module_css_default = { "cost": "l2XZIa_cost" };
+		var TurnCostAction_module_css_default = {
+			"cost": "l2XZIa_cost",
+			"costLabel": "l2XZIa_costLabel",
+			"costValue": "l2XZIa_costValue",
+			"leading": "l2XZIa_leading",
+			"separator": "l2XZIa_separator"
+		};
 		//#endregion
 		//#region lib/types/client/TurnCostAction.js
 		/** Per-turn billed-cost label in the closing assistant message's actions row. */
+		/**
+		* 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.
+		* @param props - optional size and class (the leading slot scales it to 14px).
+		* @returns the money-bag icon.
+		*/
+		function WalletIcon({ size = 16, className }) {
+			return (0, react_jsx_runtime.jsx)("svg", {
+				width: size,
+				height: size,
+				className,
+				viewBox: "0 0 16 16",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: (0, react_jsx_runtime.jsx)("path", {
+					d: "M4.8 2.7 L5.2 5.2 C2.4 6.6 1.6 9.0 2.7 11.2 C3.4 12.8 5.5 13.6 8 13.6 C10.5 13.6 12.6 12.8 13.3 11.2 C14.4 9.0 13.6 6.6 10.8 5.2 L11.2 2.7 M6.6 1.4 L9.4 2.4 M9.4 1.4 L6.6 2.4 M5.6 5.5 L8 8.2 L10.4 5.5 M8 8.2 V12.4 M5.8 9.2 H10.2 M5.8 10.9 H10.2",
+					stroke: "currentColor",
+					strokeWidth: 1.4,
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					fill: "none"
+				})
+			});
+		}
 		/** CNY amount, up to four decimals with trailing zeros trimmed. */
 		function formatSpend(amount) {
 			return `¥${amount.toFixed(4).replace(/\.?0+$/, "")}`;
@@ -4638,17 +4670,19 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			const key = `${sessionId}\0${messageId}`;
 			const cached = turnCostCache.get(key);
 			if (cached !== void 0) return cached;
-			const { total } = await getTurnSpend(sessionId, messageId);
+			const spend = await getTurnSpend(sessionId, messageId);
 			if (turnCostCache.size >= TURN_COST_CACHE_LIMIT) turnCostCache.clear();
-			turnCostCache.set(key, total);
-			return total;
+			turnCostCache.set(key, spend);
+			return spend;
 		}
 		/**
-		* Render one Turn's billed cost as a muted label inside the closing message's
-		* actions row, between the built-in copy/branch controls and the message
-		* clock. The label appears only after the cost settles 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.
+		* Render one Turn's billed cost inside the closing message's actions row,
+		* before the built-in copy control (flex `order: -1`). The "本轮花费" word
+		* uses the usage-card title tone and the amount the summary tone; unlike the
+		* clock, the label stays visible without hover (the hover rule only targets
+		* the time labels). It appears only after the Remote settles 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 label, or null while loading, on failure, or for zero cost.
 		*/
@@ -4656,8 +4690,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			const [cost, setCost] = (0, react.useState)(null);
 			(0, react.useEffect)(() => {
 				let current = true;
-				Promise.resolve().then(() => cachedTurnCost(sessionId, messageId, getTurnSpend)).then((total) => {
-					if (current) setCost(total);
+				Promise.resolve().then(() => cachedTurnCost(sessionId, messageId, getTurnSpend)).then((value) => {
+					if (current) setCost(value);
 				}, () => {
 					if (current) setCost(null);
 				});
@@ -4669,11 +4703,28 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				messageId,
 				sessionId
 			]);
-			if (cost === null || cost <= 0) return null;
-			return (0, react_jsx_runtime.jsx)("span", {
+			if (cost === null || cost.total <= 0) return null;
+			return (0, react_jsx_runtime.jsxs)("span", {
 				className: TurnCostAction_module_css_default.cost,
 				"data-turn-cost": true,
-				children: t("turnCost", { amount: formatSpend(cost) })
+				children: [
+					(0, react_jsx_runtime.jsx)("span", {
+						className: TurnCostAction_module_css_default.leading,
+						children: (0, react_jsx_runtime.jsx)(WalletIcon, {})
+					}),
+					(0, react_jsx_runtime.jsx)("span", {
+						className: TurnCostAction_module_css_default.costLabel,
+						children: t("turnCost.label")
+					}),
+					(0, react_jsx_runtime.jsx)("span", {
+						className: TurnCostAction_module_css_default.separator,
+						"aria-hidden": true
+					}),
+					(0, react_jsx_runtime.jsx)("span", {
+						className: TurnCostAction_module_css_default.costValue,
+						children: formatSpend(cost.total)
+					})
+				]
 			});
 		}
 		//#endregion
@@ -4699,7 +4750,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			"info.hint": "仅能预估 DeepSeek 相关模型。本会话花费按每条消息的发生时刻（北京时间）所在峰谷时段单价计费：缓存命中输入、未命中输入（含缓存写入）、输出（含推理）分别计价。费率按 8 月 17 日实行的标准，高峰时段为北京时间周一至周五 9:00–12:00、14:00–18:00，周末全天按低谷价计费。",
 			"badge.aria": "DeepSeek 额度：{amount}",
 			"panel.aria": "DeepSeek 额度详情",
-			"turnCost": "本轮花费：{amount}",
+			"turnCost.label": "本轮花费",
 			"label.sessionRanking": "今日会话花费",
 			"label.sessionRanking.more": "…还有 {count} 个会话"
 		};
@@ -4721,7 +4772,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			"info.hint": "Only DeepSeek 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. 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.",
 			"badge.aria": "DeepSeek balance {amount}",
 			"panel.aria": "DeepSeek balance details",
-			"turnCost": "This turn: {amount}",
+			"turnCost.label": "This turn",
 			"label.sessionRanking": "Today session spend",
 			"label.sessionRanking.more": "…{count} more sessions"
 		};

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

@@ -16,11 +16,13 @@ export interface TurnCostActionInjected {
  */
 export type TurnCostActionProps = PropsRuntime<'conversation.chat.assistant-actions'> & InjectFace<TurnCostActionInjected> & PropsLocale<typeof NS>;
 /**
- * Render one Turn's billed cost as a muted label inside the closing message's
- * actions row, between the built-in copy/branch controls and the message
- * clock. The label appears only after the cost settles 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.
+ * Render one Turn's billed cost inside the closing message's actions row,
+ * before the built-in copy control (flex `order: -1`). The "本轮花费" word
+ * uses the usage-card title tone and the amount the summary tone; unlike the
+ * clock, the label stays visible without hover (the hover rule only targets
+ * the time labels). It appears only after the Remote settles 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 label, or null while loading, on failure, or for zero cost.
  */

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

@@ -19,7 +19,7 @@ export declare const zh: {
     readonly 'info.hint': "仅能预估 DeepSeek 相关模型。本会话花费按每条消息的发生时刻（北京时间）所在峰谷时段单价计费：缓存命中输入、未命中输入（含缓存写入）、输出（含推理）分别计价。费率按 8 月 17 日实行的标准，高峰时段为北京时间周一至周五 9:00–12:00、14:00–18:00，周末全天按低谷价计费。";
     readonly 'badge.aria': "DeepSeek 额度：{amount}";
     readonly 'panel.aria': "DeepSeek 额度详情";
-    readonly turnCost: "本轮花费：{amount}";
+    readonly 'turnCost.label': "本轮花费";
     readonly 'label.sessionRanking': "今日会话花费";
     readonly 'label.sessionRanking.more': "…还有 {count} 个会话";
 };

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.2.4",
+  "version": "0.3.1",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",
@@ -32,11 +32,6 @@
       "platform": "web"
     }
   },
-  "scripts": {
-    "bundle": "tsdown",
-    "watch": "tsdown --watch",
-    "prepublishOnly": "node ../../scripts/verify-packages.mjs"
-  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -47,7 +42,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@rayadesu/dsh-llm-billing": "^0.2.4",
+    "@rayadesu/dsh-llm-billing": "^0.3.0",
     "@deepseek-ai/dsh-client-locale": "^0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-conversation": "^0.1.1-rc.2",
     "@deepseek-ai/dsh-typert-protocol": "^0.1.1-rc.2",
@@ -58,7 +53,7 @@
     "@deepseek-ai/dsh-session": "^0.1.1-rc.2"
   },
   "devDependencies": {
-    "@rayadesu/dsh-llm-billing": "^0.2.4",
+    "@rayadesu/dsh-llm-billing": "^0.3.0",
     "@deepseek-ai/dsh-client-locale": "^0.1.1-rc.2",
     "@deepseek-ai/dsh-client-runtime": "^0.1.1-rc.2",
     "@deepseek-ai/dsh-client-test-runtime": "^0.1.1-rc.2",
@@ -83,5 +78,9 @@
     "lib/invariant.js",
     "lib/client.js",
     "lib/types/**/*.d.ts"
-  ]
-}
+  ],
+  "scripts": {
+    "bundle": "tsdown",
+    "watch": "tsdown --watch"
+  }
+}