dsh-model-billing 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,11 +1,31 @@
-# Changelog
-
-## [0.1.0] - 2026-10-20
-
-### Added
-
-- Custom ordering for configured models in the composer model picker.
-- Three editable per-million-token prices per model: cache-hit input, cache-miss input, and output.
-- Built-in official DeepSeek peak/off-peak prices for `deepseek-flash` and `deepseek-v4-pro`, selected from each usage event's Beijing time.
-- Per-turn and session cost estimates with a composer summary, turn-tail amount, and a detail panel grouped by turn and model.
-- Local persistence at `~/.dsh/model-billing.json` with atomic writes.
+# Changelog
+
+## [0.1.2] - 2026-10-22
+
+### Added
+
+- Turn-tail display settings under Settings → Models & Cost: choose models, model provider, cost, tokens, cache-hit rate, and text labels; adjust font size, spacing, and weight.
+- A switch to let another picker take over the composer model selector; turning it off restores the built-in DSH picker.
+- Declared the supported DSH host range in `peerDependencies` so dsh-market can show host compatibility.
+
+### Changed
+
+- Turn-tail values now use the same secondary text color as the surrounding chat metadata instead of bright white.
+- Turn-tail fields are separated by spacing rather than middle dots, and the hover explanation has been removed.
+- The model column in the cost details panel is wide enough to show `DeepSeek-V4.1-Flash` without truncation.
+
+## [0.1.1] - 2026-10-21
+
+### Added
+
+- Show the model or models used by each turn at the end of that turn, next to the per-turn cost.
+
+## [0.1.0] - 2026-10-20
+
+### Added
+
+- Custom ordering for configured models in the composer model picker.
+- Three editable per-million-token prices per model: cache-hit input, cache-miss input, and output.
+- Built-in official DeepSeek peak/off-peak prices for `deepseek-flash` and `deepseek-v4-pro`, selected from each usage event's Beijing time.
+- Per-turn and session cost estimates with a composer summary, turn-tail amount, and a detail panel grouped by turn and model.
+- Local persistence at `~/.dsh/model-billing.json` with atomic writes.

package/README.md

@@ -1,173 +1,227 @@
-<p align="center">
-  <img src="icon.svg" width="72" height="72" alt="dsh-model-billing icon">
-</p>
-
-<h1 align="center">dsh-model-billing</h1>
-
-<p align="center">为 DeepSeek Harness Web GUI 调整模型顺序，并按轮次估算模型费用。</p>
-
-<p align="center">
-  <a href="#中文">中文</a> · <a href="#english">English</a> · <a href="CHANGELOG.md">Changelog</a>
-</p>
-
-## 中文
-
-`dsh-model-billing` 是一个 DSH Web 客户端插件。它接管输入框右下角的模型选择器，让你按自己的顺序排列模型，并为每个模型维护三档 token 价格；会话过程中按实际 usage 估算每一轮和整个会话的费用。
-
-### 功能
-
-- **自定义模型顺序**：在“设置 → 模型与费用”中用 ↑ / ↓ 调整已配置模型的顺序。模型选择器按这个顺序展示，跨提供方也保持你排的顺序，并用提供方名称分组。
-- **三档 token 价格**：每个非 DeepSeek 模型可填写每百万 tokens 的缓存命中输入、缓存未命中输入、输出价格。`0` 是有效价格，留空表示未设置。
-- **DeepSeek 官方价内置**：`deepseek-flash` 和 `deepseek-v4-pro` 直接使用 DeepSeek 官网的峰谷价，只读展示，不需要填写。
-- **逐轮费用**：每轮结束后在轮尾显示该轮费用。
-- **本会话费用**：输入框下方显示本会话累计估算、最近一轮费用和缓存命中率；展开后可查看按轮次和按模型的明细。
-- **DeepSeek 也计入金额**：每条 usage 按事件发生时的北京时间自动选择高峰或空闲价，与第三方模型一起进入统计。
-
-### 估算口径
-
-```text
-缓存命中输入 × 命中价
-+（未缓存输入 + 缓存写入）× 未命中价
-+ 输出 × 输出价
-```
-
-价格单位是“元 / 百万 tokens”。缓存写入按缓存未命中价计算，这是三档价格模型下的近似处理。金额来自会话日志中的 provider usage，实际账单以 provider 为准。
-
-### DeepSeek 官方价
-
-以下价格内置在 [`host.js`](host.js) 的 `DEEPSEEK_PRICES` 中，单位“元 / 百万 tokens”。来源：[DeepSeek 模型 & 价格](https://api-docs.deepseek.com/zh-cn/quick_start/pricing/)（查询于 2026-10-19）。
-
-| 模型 | 时段 | 缓存命中 | 缓存未命中 | 输出 |
-|---|---|---:|---:|---:|
-| deepseek-flash | 高峰 | 0.04 | 2 | 8 |
-| deepseek-flash | 空闲 | 0.02 | 1 | 4 |
-| deepseek-v4-pro | 高峰 | 0.30 | 9 | 27 |
-| deepseek-v4-pro | 空闲 | 0.15 | 4.5 | 13.5 |
-
-高峰时段为北京时间周一至周五 `9:00–12:00`、`14:00–18:00`（中国法定节假日除外）；其余时间、周末和法定节假日全天为空闲时段。空闲价是高峰价的一半。
-
-DeepSeek 价格只读，不写入本地价格配置。官网调价或节假日安排变化后，需要更新 `host.js` 中的 `DEEPSEEK_PRICES` 和 `DEEPSEEK_HOLIDAYS`；目前内置的是 2026 年节假日。
-
-### 其他模型价格
-
-插件**不预置**第三方模型价格。首次使用时，在“设置 → 模型与费用”中按 provider 的官方价填写三档价格即可；未填完整价格的模型不会产生金额，界面会标记“未定价”或“部分未定价”。
-
-不同平台的缓存折扣、上下文阶梯价和活动价差异较大，建议直接使用你的实际结算价。插件不做自动抓取，也不猜测默认价。
-
-### 安装
-
-**从 dsh-market 安装（上架后）**
-
-在 dsh-market 中搜索 `dsh-model-billing` 安装。
-
-**从 GitHub Release 手动安装**
-
-1. 从 [Releases](https://github.com/likaileave/dsh-model-billing/releases) 下载 `dsh-model-billing.tgz`。
-2. 执行：
-
-```sh
-dsh plugin --profile desktop add ./dsh-model-billing.tgz
-```
-
-把 `desktop` 换成你实际使用的 profile。
-
-**从源码安装**
-
-```sh
-git clone https://github.com/likaileave/dsh-model-billing.git
-dsh plugin --profile desktop add ./dsh-model-billing
-```
-
-安装或更新后刷新 Web 页面。设置页位于“模型与费用”。
-
-### 数据位置
-
-模型顺序和价格保存在：
-
-```text
-~/.dsh/model-billing.json
-```
-
-若设置了 `DSH_HOME`，则为 `$DSH_HOME/model-billing.json`。保存时先写临时文件再原子替换；文件损坏时回退为空配置，不会在未保存的情况下覆盖原文件。
-
-### 已知限制
-
-- 模型选择器由本插件接管，依赖 `ctx.modelDirectories`。该服务不可用时，插件不会强行覆盖内置选择器，价格和费用统计不受影响。
-- `/model` 命令仍由 DSH 自带实现，顺序不保证与右下角选择器一致。
-- 一轮里的多次模型尝试（重试、失败等）会分别计入；失败调用如果 provider 没有返回 usage，则无法计入。
-- 只统计当前载入 Host 的会话；未打开的历史会话在进入后按需计算。
-- 第三方价格是静态配置，不会自动跟随官网调价。
-
-### 开发
-
-```sh
-node --check host.js
-node --check client.js
-node --test test/host.test.mjs test/routes.test.mjs
-```
-
-当前 10 个测试通过。插件没有运行时 npm 依赖。
-
-### License
-
-[MIT](LICENSE) © 2026 likaileave
-
----
-
-## English
-
-`dsh-model-billing` is a DSH Web GUI plugin that takes over the composer's model picker, lets you order configured models yourself, stores three per-million-token prices per model, and estimates per-turn and session cost from provider usage.
-
-### Features
-
-- **Custom model order** in Settings → Models & Cost; the composer picker follows that order across providers and groups models by provider.
-- **Three prices per model**: cache-hit input, cache-miss input, and output, in CNY per million tokens. `0` is a valid price; blank means unset.
-- **Built-in official DeepSeek pricing** for `deepseek-flash` and `deepseek-v4-pro`, selected per usage event between peak and off-peak Beijing time.
-- **Per-turn amount** at the end of each turn.
-- **Session summary** below the composer plus a detail panel grouped by turn and by model.
-- **DeepSeek is billed too**, using the same three-price formula and the event's timestamp.
-
-### Cost formula
-
-```text
-cache-hit input × hit price
-+ (uncached input + cache write) × miss price
-+ output × output price
-```
-
-Prices are CNY per million tokens. Cache writes are approximated at the cache-miss price. Figures come from provider usage in the session log; the provider's invoice is authoritative.
-
-The plugin ships **no third-party price defaults**. Enter your provider's actual rates in Settings → Models & Cost. Models without a complete three-price set are marked as unpriced and contribute no amount. DeepSeek prices are read-only and built into `host.js`.
-
-### Install
-
-From dsh-market after listing, or manually from a [Release](https://github.com/likaileave/dsh-model-billing/releases):
-
-```sh
-dsh plugin --profile desktop add ./dsh-model-billing.tgz
-```
-
-From a checkout:
-
-```sh
-git clone https://github.com/likaileave/dsh-model-billing.git
-dsh plugin --profile desktop add ./dsh-model-billing
-```
-
-Refresh the Web page after installing or updating.
-
-### Data
-
-Order and prices live in `~/.dsh/model-billing.json` (or `$DSH_HOME/model-billing.json`). Writes use a temporary file plus atomic replace.
-
-### Limitations
-
-- The custom picker depends on `ctx.modelDirectories`; when that service is unavailable the plugin leaves the built-in picker alone.
-- The `/model` command is still implemented by DSH and may not follow the custom order.
-- Multiple attempts within a turn are counted separately; failed calls without provider usage cannot be counted.
-- Only sessions loaded by the current Host are counted.
-- Third-party prices are static and are not refreshed automatically.
-
-### License
-
-[MIT](LICENSE) © 2026 likaileave
+<p align="center">
+  <img src="https://unpkg.com/dsh-model-billing@latest/icon.svg" width="72" height="72" alt="dsh-model-billing icon">
+</p>
+
+<h1 align="center">dsh-model-billing</h1>
+
+<p align="center">为 DeepSeek Harness Web GUI 调整模型顺序，并按轮次估算模型费用。</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/dsh-model-billing"><img alt="npm version" src="https://img.shields.io/npm/v/dsh-model-billing.svg"></a>
+  <a href="https://github.com/likaileave/dsh-model-billing/releases"><img alt="GitHub release" src="https://img.shields.io/github/v/release/likaileave/dsh-model-billing"></a>
+  <a href="LICENSE"><img alt="License" src="https://img.shields.io/github/license/likaileave/dsh-model-billing"></a>
+  <a href="https://github.com/topics/dsh-plugin"><img alt="DeepSeek Harness plugin" src="https://img.shields.io/badge/DeepSeek%20Harness-dsh--plugin-4D6BFE"></a>
+  <a href="https://awesome-dsh-plugin.com"><img alt="Awesome DSH Plugin" src="https://awesome-dsh-plugin.com/badge.svg"></a>
+</p>
+
+<p align="center">
+  <a href="#中文">中文</a> · <a href="#english">English</a> · <a href="CHANGELOG.md">Changelog</a>
+</p>
+
+> **AI 生成声明**：本项目的代码、文档和图标由 AI 辅助生成，并经人工审核、修改和测试；发布者对最终发布内容负责。
+>
+> **AI-generated notice**: The code, documentation, and icon in this project were generated with AI assistance, then reviewed, modified, and tested by a human; the publisher is responsible for the released content.
+
+## 中文
+
+`dsh-model-billing` 是一个 DSH Web 客户端插件。它可以接管输入框右下角的模型选择器，让你按自己的顺序排列模型，并为每个模型维护三档 token 价格；会话过程中按实际 usage 估算每一轮和整个会话的费用。
+
+### 功能
+
+- **自定义模型顺序**：在“设置 → 模型与费用”中用 ↑ / ↓ 调整已配置模型的顺序。模型选择器按这个顺序展示，跨提供方也保持你排的顺序，并用提供方名称分组。
+- **三档 token 价格**：每个非 DeepSeek 模型可填写每百万 tokens 的缓存命中输入、缓存未命中输入、输出价格。`0` 是有效价格，留空表示未设置。
+- **DeepSeek 官方价内置**：`deepseek-flash` 和 `deepseek-v4-pro` 直接使用 DeepSeek 官网的峰谷价，只读展示，不需要填写。
+- **逐轮费用与使用模型**：每轮结束后在轮尾显示这一轮使用的模型，以及该轮费用和缓存命中率。
+- **可配置轮尾**：在设置中开关使用模型、模型提供商、费用、token、缓存命中率、文字标签，并调整字号、间距和字重；也可以关闭选择器接管，恢复 DSH 内置模型选择器。
+- **本会话费用**：输入框下方显示本会话累计估算、最近一轮费用和缓存命中率；展开后可查看按轮次和按模型的明细。
+- **DeepSeek 也计入金额**：每条 usage 按事件发生时的北京时间自动选择高峰或空闲价，与第三方模型一起进入统计。
+
+### 估算口径
+
+```text
+缓存命中输入 × 命中价
++（未缓存输入 + 缓存写入）× 未命中价
++ 输出 × 输出价
+```
+
+价格单位是“元 / 百万 tokens”。缓存写入按缓存未命中价计算，这是三档价格模型下的近似处理。金额来自会话日志中的 provider usage，实际账单以 provider 为准。
+
+### DeepSeek 官方价
+
+以下价格内置在 [`host.js`](host.js) 的 `DEEPSEEK_PRICES` 中，单位“元 / 百万 tokens”。来源：[DeepSeek 模型 & 价格](https://api-docs.deepseek.com/zh-cn/quick_start/pricing/)（查询于 2026-10-19）。
+
+| 模型 | 时段 | 缓存命中 | 缓存未命中 | 输出 |
+|---|---|---:|---:|---:|
+| deepseek-flash | 高峰 | 0.04 | 2 | 8 |
+| deepseek-flash | 空闲 | 0.02 | 1 | 4 |
+| deepseek-v4-pro | 高峰 | 0.30 | 9 | 27 |
+| deepseek-v4-pro | 空闲 | 0.15 | 4.5 | 13.5 |
+
+高峰时段为北京时间周一至周五 `9:00–12:00`、`14:00–18:00`（中国法定节假日除外）；其余时间、周末和法定节假日全天为空闲时段。空闲价是高峰价的一半。
+
+DeepSeek 价格只读，不写入本地价格配置。官网调价或节假日安排变化后，需要更新 `host.js` 中的 `DEEPSEEK_PRICES` 和 `DEEPSEEK_HOLIDAYS`；目前内置的是 2026 年节假日。
+
+### 其他模型价格
+
+插件**不预置**第三方模型价格。首次使用时，在“设置 → 模型与费用”中按 provider 的官方价填写三档价格即可；未填完整价格的模型不会产生金额，界面会标记“未定价”或“部分未定价”。
+
+不同平台的缓存折扣、上下文阶梯价和活动价差异较大，建议直接使用你的实际结算价。插件不做自动抓取，也不猜测默认价。
+
+### 安装
+
+需要 DSH `^0.2.0-rc.2`。
+
+**npm**
+
+```sh
+dsh plugin --profile desktop add dsh-model-billing
+```
+
+**从 dsh-market 安装**
+
+在 dsh-market 中搜索 `dsh-model-billing` 安装。
+
+**从 GitHub Release 手动安装**
+
+1. 从 [Releases](https://github.com/likaileave/dsh-model-billing/releases) 下载 `dsh-model-billing.tgz`。
+2. 执行：
+
+```sh
+dsh plugin --profile desktop add ./dsh-model-billing.tgz
+```
+
+把 `desktop` 换成你实际使用的 profile。
+
+**从源码安装**
+
+```sh
+git clone https://github.com/likaileave/dsh-model-billing.git
+dsh plugin --profile desktop add ./dsh-model-billing
+```
+
+安装或更新后刷新 Web 页面。设置页位于“模型与费用”。
+
+### 发布
+
+npm 包和 GitHub Release 使用相同版本号，两个渠道分别发布：
+
+- npm：<https://www.npmjs.com/package/dsh-model-billing>
+- GitHub Releases：<https://github.com/likaileave/dsh-model-billing/releases>
+
+两个渠道是并列的发布渠道，不承诺自动同步。
+
+### 数据位置
+
+模型顺序和价格保存在：
+
+```text
+~/.dsh/model-billing.json
+```
+
+若设置了 `DSH_HOME`，则为 `$DSH_HOME/model-billing.json`。保存时先写临时文件再原子替换；文件损坏时回退为空配置，不会在未保存的情况下覆盖原文件。
+
+### 已知限制
+
+- 模型选择器由本插件接管，依赖 `ctx.modelDirectories`。该服务不可用时，插件不会强行覆盖内置选择器，价格和费用统计不受影响。
+- `/model` 命令仍由 DSH 自带实现，顺序不保证与右下角选择器一致。
+- 一轮里的多次模型尝试（重试、失败等）会分别计入；失败调用如果 provider 没有返回 usage，则无法计入。
+- 只统计当前载入 Host 的会话；未打开的历史会话在进入后按需计算。
+- 第三方价格是静态配置，不会自动跟随官网调价。
+
+### 开发
+
+```sh
+node --check host.js
+node --check client.js
+node --test test/host.test.mjs test/routes.test.mjs
+```
+
+当前 10 个测试通过。插件没有运行时 npm 依赖。
+
+### License
+
+[MIT](LICENSE) © 2026 likaileave
+
+---
+
+## English
+
+`dsh-model-billing` is a DSH Web GUI plugin that can take over the composer's model picker, lets you order configured models yourself, stores three per-million-token prices per model, and estimates per-turn and session cost from provider usage.
+
+### Features
+
+- **Custom model order** in Settings → Models & Cost; the composer picker follows that order across providers and groups models by provider.
+- **Three prices per model**: cache-hit input, cache-miss input, and output, in CNY per million tokens. `0` is a valid price; blank means unset.
+- **Built-in official DeepSeek pricing** for `deepseek-flash` and `deepseek-v4-pro`, selected per usage event between peak and off-peak Beijing time.
+- **Per-turn model and amount** at the end of each turn, together with the turn's cache-hit rate.
+- **Configurable turn tail**: toggle models, provider names, cost, tokens, cache-hit rate, and text labels; adjust font size, spacing, and weight; or disable the picker takeover to restore the built-in DSH picker.
+- **Session summary** below the composer plus a detail panel grouped by turn and by model.
+- **DeepSeek is billed too**, using the same three-price formula and the event's timestamp.
+
+### Cost formula
+
+```text
+cache-hit input × hit price
++ (uncached input + cache write) × miss price
++ output × output price
+```
+
+Prices are CNY per million tokens. Cache writes are approximated at the cache-miss price. Figures come from provider usage in the session log; the provider's invoice is authoritative.
+
+The plugin ships **no third-party price defaults**. Enter your provider's actual rates in Settings → Models & Cost. Models without a complete three-price set are marked as unpriced and contribute no amount. DeepSeek prices are read-only and built into `host.js`.
+
+### Install
+
+Requires DSH `^0.2.0-rc.2`.
+
+**npm**
+
+```sh
+dsh plugin --profile desktop add dsh-model-billing
+```
+
+**From dsh-market**
+
+Search for `dsh-model-billing` in dsh-market.
+
+**From a GitHub Release**
+
+Download `dsh-model-billing.tgz` from [Releases](https://github.com/likaileave/dsh-model-billing/releases), then:
+
+```sh
+dsh plugin --profile desktop add ./dsh-model-billing.tgz
+```
+
+**From a checkout**
+
+```sh
+git clone https://github.com/likaileave/dsh-model-billing.git
+dsh plugin --profile desktop add ./dsh-model-billing
+```
+
+Refresh the Web page after installing or updating.
+
+### Release channels
+
+The npm package and the GitHub Release use the same version number and are published separately:
+
+- npm: <https://www.npmjs.com/package/dsh-model-billing>
+- GitHub Releases: <https://github.com/likaileave/dsh-model-billing/releases>
+
+They are parallel distribution channels, not an automatic mirror.
+
+### Data
+
+Order and prices live in `~/.dsh/model-billing.json` (or `$DSH_HOME/model-billing.json`). Writes use a temporary file plus atomic replace.
+
+### Limitations
+
+- The custom picker depends on `ctx.modelDirectories`; when that service is unavailable the plugin leaves the built-in picker alone.
+- The `/model` command is still implemented by DSH and may not follow the custom order.
+- Multiple attempts within a turn are counted separately; failed calls without provider usage cannot be counted.
+- Only sessions loaded by the current Host are counted.
+- Third-party prices are static and are not refreshed automatically.
+
+### License
+
+[MIT](LICENSE) © 2026 likaileave

package/client.js

@@ -78,8 +78,30 @@ window.__ModuleLoader__.load({
         partialShort: '部分未定价',
         partialNote: '有非 DeepSeek 调用尚未配置完整价格，合计只包含已定价部分。',
         estimateNote: '金额由会话日志中的 token 用量和缓存命中估算；DeepSeek 按事件时间使用内置峰谷价，实际账单以提供方为准。',
+        listSep: '、',
         turnCost: '费用',
-        turnCostTitle: '根据本轮 token 用量、缓存命中与价格估算',
+        turnTokens: '本轮 Token',
+        displaySection: '轮尾显示',
+        displayHint: '控制每轮结束后在对话尾部显示的内容；修改后点“保存”生效。',
+        displayModels: '使用模型',
+        displayProvider: '模型提供商',
+        displayCost: '本轮费用',
+        displayTokens: 'Token 用量',
+        displayCacheHit: '缓存命中率',
+        displayLabels: '显示文字标签',
+        displayFontSize: '字号',
+        displayDensity: '间距',
+        displayWeight: '字重',
+        fontSizeSmall: '小',
+        fontSizeNormal: '标准',
+        fontSizeLarge: '大',
+        densityCompact: '紧凑',
+        densityComfortable: '舒适',
+        weightNormal: '常规',
+        weightBold: '加粗',
+        pickerSection: '模型选择器',
+        takeoverPicker: '接管模型选择器',
+        takeoverHint: '开启后使用本插件按自定义顺序排列的模型选择器；关闭后恢复 DSH 内置选择器。',
         chooseModel: '选择模型',
         loadingModels: '加载模型…',
         searchModel: '搜索模型',
@@ -150,8 +172,30 @@ window.__ModuleLoader__.load({
         partialShort: 'partly unpriced',
         partialNote: 'Some non-DeepSeek calls do not have a complete price set; the total includes only priced calls.',
         estimateNote: 'Amounts are estimated from token usage and cache hits in the session log; DeepSeek uses built-in peak/off-peak prices at the event time, and the provider bill is authoritative.',
+        listSep: ', ',
         turnCost: 'Cost',
-        turnCostTitle: 'Estimated from this turn’s tokens, cache hits and prices',
+        turnTokens: 'Turn tokens',
+        displaySection: 'Turn-tail display',
+        displayHint: 'Choose what appears below each completed turn; click Save to apply.',
+        displayModels: 'Models used',
+        displayProvider: 'Model provider',
+        displayCost: 'Turn cost',
+        displayTokens: 'Token usage',
+        displayCacheHit: 'Cache hit rate',
+        displayLabels: 'Show text labels',
+        displayFontSize: 'Font size',
+        displayDensity: 'Spacing',
+        displayWeight: 'Font weight',
+        fontSizeSmall: 'Small',
+        fontSizeNormal: 'Normal',
+        fontSizeLarge: 'Large',
+        densityCompact: 'Compact',
+        densityComfortable: 'Comfortable',
+        weightNormal: 'Regular',
+        weightBold: 'Bold',
+        pickerSection: 'Model picker',
+        takeoverPicker: 'Take over the model picker',
+        takeoverHint: 'On: use this plugin’s picker with your custom model order. Off: restore the built-in DSH picker.',
         chooseModel: 'Select model',
         loadingModels: 'Loading models…',
         searchModel: 'Search models',
@@ -213,6 +257,57 @@ window.__ModuleLoader__.load({
       return t
     }
 
+    const DISPLAY_DEFAULTS = Object.freeze({
+      showModels: true,
+      showProvider: false,
+      showCost: true,
+      showTokens: false,
+      showCacheHit: false,
+      showLabels: true,
+      takeoverPicker: true,
+      fontSize: 'normal',
+      density: 'comfortable',
+      fontWeight: 'normal',
+    })
+
+    const DISPLAY_STORAGE_KEY = 'dsh-model-billing.display'
+
+    function readStoredDisplay() {
+      try {
+        const raw = localStorage.getItem(DISPLAY_STORAGE_KEY)
+        if (raw === null) return null
+        const parsed = JSON.parse(raw)
+        return parsed !== null && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : null
+      } catch {
+        return null
+      }
+    }
+
+    function writeStoredDisplay(value) {
+      try {
+        localStorage.setItem(DISPLAY_STORAGE_KEY, JSON.stringify(value))
+      } catch {
+        // Storage may be unavailable in restricted browser contexts.
+      }
+    }
+
+    function clearStoredDisplay() {
+      try {
+        localStorage.removeItem(DISPLAY_STORAGE_KEY)
+      } catch {
+        // Ignore unavailable storage.
+      }
+    }
+
+    function readDisplay(data) {
+      const source = data?.display
+      const server = source !== null && typeof source === 'object' && !Array.isArray(source)
+        ? { ...DISPLAY_DEFAULTS, ...source }
+        : { ...DISPLAY_DEFAULTS }
+      const stored = readStoredDisplay()
+      return stored === null ? server : { ...server, ...stored }
+    }
+
     // ---------------------------------------------------------------------
     // Shared catalog state
     // ---------------------------------------------------------------------
@@ -497,17 +592,37 @@ window.__ModuleLoader__.load({
       .mb-turn-table { table-layout: fixed; }
       .mb-turn-table th, .mb-turn-table td, .mb-turn-table th.num, .mb-turn-table td.num { text-align: left; }
       .mb-turn-table th:nth-child(1), .mb-turn-table td:nth-child(1) { width: 5%; }
-      .mb-turn-table th:nth-child(2), .mb-turn-table td:nth-child(2) { width: 26.5%; }
+      .mb-turn-table th:nth-child(2), .mb-turn-table td:nth-child(2) { width: 25.5%; }
       .mb-turn-table th:nth-child(3), .mb-turn-table td:nth-child(3) { width: 12.5%; }
-      .mb-turn-table th:nth-child(4), .mb-turn-table td:nth-child(4) { width: 20%; }
+      .mb-turn-table th:nth-child(4), .mb-turn-table td:nth-child(4) { width: 21%; }
       .mb-turn-table th:nth-child(5), .mb-turn-table td:nth-child(5) { width: 10%; }
       .mb-turn-table th:nth-child(6), .mb-turn-table td:nth-child(6) { width: 16%; }
       .mb-turn-table th:nth-child(7), .mb-turn-table td:nth-child(7) { width: 10%; }
       .mb-turn-preview, .mb-turn-model { color: var(--dsw-alias-label-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
       .mb-turn-model { color: var(--dsw-alias-label-primary); }
       .mb-panel-note { margin: 9px 0 0; color: var(--dsw-alias-label-secondary); font-size: 11px; }
-      .mb-turn { color: var(--dsw-alias-label-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
-      .mb-turn strong { color: var(--dsw-alias-label-primary); font-weight: 600; }
+      .mb-turn { color: var(--dsw-alias-label-secondary); font-size: 12px; font-variant-numeric: tabular-nums; display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; max-width: 100%; }
+      .mb-turn[data-size="small"] { font-size: 11px; }
+      .mb-turn[data-size="large"] { font-size: 13px; }
+      .mb-turn[data-density="compact"] { column-gap: 6px; }
+      .mb-turn-item { white-space: nowrap; }
+      .mb-turn strong { color: inherit; font-weight: 600; }
+      .mb-turn[data-weight="normal"] { font-weight: 400; }
+      .mb-turn[data-weight="normal"] strong { font-weight: 400; }
+      .mb-turn[data-weight="bold"] { font-weight: 600; }
+      .mb-turn[data-weight="bold"] strong { font-weight: 600; }
+      .mb-turn-partial { color: var(--dsw-alias-state-warn-primary); }
+      .mb-display { border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; padding: 12px 14px; margin: 10px 0 14px; background: var(--dsw-alias-bg-layer-2); }
+      .mb-display-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
+      .mb-display-title { font-weight: 600; }
+      .mb-display-hint { color: var(--dsw-alias-label-secondary); font-size: 12px; }
+      .mb-check-grid { display: flex; flex-wrap: wrap; gap: 8px 18px; }
+      .mb-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
+      .mb-check.is-disabled { opacity: .55; cursor: default; }
+      .mb-check input { width: 15px; height: 15px; accent-color: var(--dsw-alias-brand-primary); }
+      .mb-display-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
+      .mb-select { height: 30px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; background: var(--dsw-alias-bg-base); color: var(--dsw-alias-label-primary); padding: 0 8px; font: inherit; }
+      .mb-select:focus { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: -1px; }
       .mb-picker { position: relative; display: flex; min-width: 0; }
       .mb-picker-trigger { border-radius: var(--dsw-radius-sm); min-width: 0; max-width: min(360px, 45cqw); height: 28px; color: var(--dsw-alias-label-secondary); cursor: pointer; background: 0 0; border: none; outline: none; align-items: center; gap: 4px; padding: 0 4px 0 8px; font-size: 13px; font-weight: 400; line-height: 20px; display: flex; }
       .mb-picker-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
@@ -598,6 +713,7 @@ window.__ModuleLoader__.load({
       const translate = useT()
       const snap = useCatalog()
       const [draft, setDraft] = useState(null)
+      const [display, setDisplay] = useState(null)
       const [dirty, setDirty] = useState(false)
       const [saving, setSaving] = useState(false)
       const [status, setStatus] = useState(null)
@@ -605,6 +721,7 @@ window.__ModuleLoader__.load({
       useEffect(() => {
         if (snap.data === null) return
         setDraft(toDraft(snap.data.models))
+        setDisplay(readDisplay(snap.data))
         setDirty(false)
       }, [snap.data])
 
@@ -637,11 +754,89 @@ window.__ModuleLoader__.load({
       }
 
       const reset = () => {
-        if (snap.data !== null) setDraft(toDraft(snap.data.models))
+        clearStoredDisplay()
+        emitCatalog()
+        if (snap.data !== null) {
+          setDraft(toDraft(snap.data.models))
+          setDisplay(readDisplay(snap.data))
+        }
         setDirty(false)
         setStatus(null)
       }
 
+      const displayValue = display ?? readDisplay(snap.data)
+
+      const updateDisplay = (change) => {
+        setDisplay((current) => ({ ...(current ?? readDisplay(snap.data)), ...change }))
+        setDirty(true)
+        setStatus(null)
+      }
+
+      const renderDisplaySettings = () => h(Fragment, null,
+        h('div', { className: 'mb-display' },
+          h('div', { className: 'mb-display-head' },
+            h('div', { className: 'mb-display-title' }, translate('displaySection')),
+            h('div', { className: 'mb-display-hint' }, translate('displayHint'))),
+          h('div', { className: 'mb-check-grid' },
+            [
+              ['showProvider', 'displayProvider'],
+              ['showModels', 'displayModels'],
+              ['showCost', 'displayCost'],
+              ['showTokens', 'displayTokens'],
+              ['showCacheHit', 'displayCacheHit'],
+              ['showLabels', 'displayLabels'],
+            ].map(([field, label]) => h('label', {
+              className: `mb-check${field === 'showProvider' && displayValue.showModels !== true ? ' is-disabled' : ''}`,
+              key: field,
+            },
+              h('input', {
+                type: 'checkbox',
+                checked: displayValue[field] === true,
+                disabled: field === 'showProvider' && displayValue.showModels !== true,
+                onChange: (event) => updateDisplay({ [field]: event.target.checked }),
+              }),
+              h('span', null, translate(label))))),
+          h('div', { className: 'mb-display-controls' },
+            h('label', { className: 'mb-field' },
+              h('span', { className: 'mb-field-label' }, translate('displayFontSize')),
+              h('select', {
+                className: 'mb-select',
+                value: displayValue.fontSize,
+                onChange: (event) => updateDisplay({ fontSize: event.target.value }),
+              },
+                h('option', { value: 'small' }, translate('fontSizeSmall')),
+                h('option', { value: 'normal' }, translate('fontSizeNormal')),
+                h('option', { value: 'large' }, translate('fontSizeLarge')))),
+            h('label', { className: 'mb-field' },
+              h('span', { className: 'mb-field-label' }, translate('displayDensity')),
+              h('select', {
+                className: 'mb-select',
+                value: displayValue.density,
+                onChange: (event) => updateDisplay({ density: event.target.value }),
+              },
+                h('option', { value: 'compact' }, translate('densityCompact')),
+                h('option', { value: 'comfortable' }, translate('densityComfortable')))),
+            h('label', { className: 'mb-field' },
+              h('span', { className: 'mb-field-label' }, translate('displayWeight')),
+              h('select', {
+                className: 'mb-select',
+                value: displayValue.fontWeight,
+                onChange: (event) => updateDisplay({ fontWeight: event.target.value }),
+              },
+                h('option', { value: 'normal' }, translate('weightNormal')),
+                h('option', { value: 'bold' }, translate('weightBold')))))),
+        h('div', { className: 'mb-display' },
+          h('div', { className: 'mb-display-head' },
+            h('div', { className: 'mb-display-title' }, translate('pickerSection')),
+            h('div', { className: 'mb-display-hint' }, translate('takeoverHint'))),
+          h('label', { className: 'mb-check' },
+            h('input', {
+              type: 'checkbox',
+              checked: displayValue.takeoverPicker === true,
+              onChange: (event) => updateDisplay({ takeoverPicker: event.target.checked }),
+            }),
+            h('span', null, translate('takeoverPicker')))))
+
       const save = async () => {
         if (draft === null) return
         const payload = []
@@ -667,8 +862,9 @@ window.__ModuleLoader__.load({
           await requestJson('/model-billing/save', {
             method: 'POST',
             headers: { 'content-type': 'application/json' },
-            body: JSON.stringify({ models: payload }),
+            body: JSON.stringify({ models: payload, display: displayValue }),
           })
+          writeStoredDisplay(displayValue)
           setDirty(false)
           setStatus({ tone: 'success', text: translate('saved') })
           await ensureCatalog(true)
@@ -706,6 +902,7 @@ window.__ModuleLoader__.load({
           h('section', { className: 'mb-page' },
             h('h2', { className: 'mb-title' }, translate('title')),
             h('p', { className: 'mb-intro' }, translate('intro')),
+            renderDisplaySettings(),
             h('div', { className: 'mb-empty' }, translate('noModels'))))
       }
 
@@ -721,6 +918,7 @@ window.__ModuleLoader__.load({
             h('button', { type: 'button', className: 'mb-btn', disabled: !dirty || saving, onClick: reset }, translate('undo')),
             h('button', { type: 'button', className: 'mb-btn mb-btn-primary', disabled: !dirty || saving, onClick: () => void save() }, saving ? translate('saving') : translate('save'))),
           status === null ? null : h('div', { className: 'mb-status', 'data-tone': status.tone, role: 'status' }, status.text),
+          renderDisplaySettings(),
           h('p', { className: 'mb-note' }, translate('orderHint')),
           h('ul', { className: 'mb-list' },
             models.map((entry, index) => h(SettingsModelCard, {
@@ -1030,23 +1228,83 @@ window.__ModuleLoader__.load({
     // Per-turn cost chip
     // ---------------------------------------------------------------------
 
-    function TurnCost({ turn, sessionId, useProjection }) {
+    function turnModelText(models, translate, showProvider, catalogModels) {
+      const findModel = (entry) => {
+        if (entry.provider === undefined || entry.model === undefined) return undefined
+        return (catalogModels ?? []).find((candidate) => candidate.provider === entry.provider && candidate.model === entry.model)
+      }
+      const names = (models ?? []).map((entry) => {
+        if (entry === undefined || entry === null) return null
+        const matched = findModel(entry)
+        const modelName = typeof matched?.name === 'string' && matched.name !== ''
+          ? matched.name
+          : typeof entry.name === 'string' && entry.name !== ''
+            ? entry.name
+            : typeof entry.model === 'string' && entry.model !== '' ? entry.model : null
+        if (modelName === null) return null
+        if (!showProvider) return modelName
+        const providerName = typeof matched?.providerName === 'string' && matched.providerName !== ''
+          ? matched.providerName
+          : typeof entry.providerName === 'string' && entry.providerName !== ''
+            ? entry.providerName
+            : typeof entry.provider === 'string' && entry.provider !== '' ? entry.provider : null
+        return providerName === null ? modelName : `${providerName} / ${modelName}`
+      }).filter((name) => name !== null)
+      if (names.length === 0) return null
+      return names.join(translate('listSep'))
+    }
+
+    function TurnCost(props) {
+      const { turn } = props
+      // The turnTail owner hands over the whole folded turn life cycle, not just its number.
+      const turnNumber = turn === null || turn === undefined
+        ? undefined
+        : typeof turn === 'number' ? turn : turn.turn
+      const sessionId = props.sessionId
+      const useProjection = props.useProjection
       const translate = useT()
-      const tokenUsage = useProjection('tokenUsage')
+      const catalogSnap = useCatalog()
+      const display = readDisplay(catalogSnap.data)
+      const tokenUsage = typeof useProjection === 'function' ? useProjection('tokenUsage') : undefined
       const revision = tokenUsageRevision(tokenUsage)
       const usage = useSessionUsage(sessionId, revision)
-      const row = usage.data?.turns?.find((entry) => entry.turn === turn)
-      if (row === undefined || row.hasBillable !== true) return null
+      const rows = usage.data?.turns
+      const row = rows?.find((entry) => entry.turn === turnNumber)
+      if (row === undefined) return null
       const costText = row.costKnown
         ? `≈ ${formatMoney(row.cost)}`
         : row.pricedAttempts > 0 ? `≈ ${formatMoney(row.cost)}*` : translate('pricePlaceholder')
+      const modelText = turnModelText(row.models, translate, display.showProvider === true, catalogSnap.data?.models)
+      const label = (key) => display.showLabels ? `${translate(key)} ` : ''
+      const parts = []
+      if (display.showModels && modelText !== null) {
+        parts.push(h('span', { className: 'mb-turn-item', key: 'model' },
+          label('model'), h('strong', null, modelText)))
+      }
+      if (display.showCost) {
+        parts.push(h('span', { className: 'mb-turn-item', key: 'cost' },
+          label('turnCost'), h('strong', null, costText)))
+      }
+      const promptTokens = Number.isFinite(row.promptTokens) ? row.promptTokens : 0
+      const outputTokens = Number.isFinite(row.outputTokens) ? row.outputTokens : 0
+      if (display.showTokens && (promptTokens > 0 || outputTokens > 0)) {
+        parts.push(h('span', { className: 'mb-turn-item', key: 'tokens' },
+          label('turnTokens'), h('strong', null, `${formatTokens(promptTokens)} / ${formatTokens(outputTokens)}`)))
+      }
+      if (display.showCacheHit && row.cacheHit !== null && row.cacheHit !== undefined) {
+        parts.push(h('span', { className: 'mb-turn-item', key: 'cache' },
+          label('cacheHit'), h('strong', null, formatPercent(row.cacheHit))))
+      }
+      if (row.partial) {
+        parts.push(h('span', { className: 'mb-turn-item mb-turn-partial', key: 'partial' }, translate('partialShort')))
+      }
+      if (parts.length === 0) return null
       return h('span', {
         className: 'mb-turn',
-        title: translate('turnCostTitle'),
-      },
-        translate('turnCost'), ' ', h('strong', null, costText),
-        row.cacheHit === null ? null : ` · ${translate('cacheHit')} ${formatPercent(row.cacheHit)}`,
-        row.partial ? ` · ${translate('partialShort')}` : '')
+        'data-size': display.fontSize,
+        'data-density': display.density,
+        'data-weight': display.fontWeight,
+      }, parts)
     }
 
     // ---------------------------------------------------------------------
@@ -1459,6 +1717,13 @@ window.__ModuleLoader__.load({
         open ? ReactDOM.createPortal(menu, document.body) : null)
     }
 
+    function ModelPickerSeat(props) {
+      const catalogSnap = useCatalog()
+      const display = readDisplay(catalogSnap.data)
+      if (!display.takeoverPicker) return null
+      return h(OrderedModelPicker, props)
+    }
+
     return {
       inject: ['slots', 'locale'],
       apply(ctx) {
@@ -1466,10 +1731,34 @@ window.__ModuleLoader__.load({
         publishModelDirectories(ctx.get('modelDirectories'))
         ctx.inject(['modelDirectories'], (scope) => {
           publishModelDirectories(scope.modelDirectories)
-          scope.slots.inject('conversation.input.model', () => scope.slots.register({
-            name: 'conversation.input.model',
-            priority: -1,
-          }, OrderedModelPicker))
+          let seat = null
+          const takeoverEnabled = () => readDisplay(catalog.snap.data).takeoverPicker !== false
+          const syncSeat = () => {
+            if (takeoverEnabled()) {
+              if (seat === null) {
+                seat = scope.slots.register({
+                  name: 'conversation.input.model',
+                  priority: -1,
+                }, ModelPickerSeat)
+              }
+              return
+            }
+            if (seat !== null) {
+              seat()
+              seat = null
+            }
+          }
+          scope.slots.inject('conversation.input.model', () => {
+            const unsubscribe = subscribeCatalog(syncSeat)
+            syncSeat()
+            return () => {
+              unsubscribe()
+              if (seat !== null) {
+                seat()
+                seat = null
+              }
+            }
+          })
         })
 
         void ensureCatalog()

package/host.js

@@ -25,6 +25,22 @@ const MAX_STORED_PRICES = 2000
 const MAX_BODY_BYTES = 256 * 1024
 const PRICE_FIELDS = ['cacheHit', 'cacheMiss', 'output']
 const KEY_SEPARATOR = '\u0000'
+const DISPLAY_DEFAULTS = Object.freeze({
+  showModels: true,
+  showProvider: false,
+  showCost: true,
+  showTokens: false,
+  showCacheHit: false,
+  showLabels: true,
+  takeoverPicker: true,
+  fontSize: 'normal',
+  density: 'comfortable',
+  fontWeight: 'normal',
+})
+const DISPLAY_FLAGS = ['showModels', 'showProvider', 'showCost', 'showTokens', 'showCacheHit', 'showLabels', 'takeoverPicker']
+const DISPLAY_FONT_SIZES = new Set(['small', 'normal', 'large'])
+const DISPLAY_DENSITIES = new Set(['compact', 'comfortable'])
+const DISPLAY_FONT_WEIGHTS = new Set(['normal', 'bold'])
 const DEEPSEEK_PRICING_SCHEDULE = '北京时间周一至周五 9:00–12:00、14:00–18:00（法定节假日除外）'
 const DEEPSEEK_PRICES = {
   'deepseek-flash': {
@@ -174,6 +190,7 @@ function stateEnvelope(state) {
     stateVersion: STATE_VERSION,
     savedAt: state.savedAt,
     order: state.order.map((entry) => ({ provider: entry.provider, model: entry.model })),
+    display: { ...state.display },
   }
 }
 
@@ -614,12 +631,26 @@ async function loadState(ctx) {
   }
 }
 
+/** Validate persisted turn-tail display settings, keeping unknown keys out. */
+function normalizeDisplay(raw) {
+  const source = raw !== null && typeof raw === 'object' && !Array.isArray(raw) ? raw : {}
+  const display = { ...DISPLAY_DEFAULTS }
+  for (const key of DISPLAY_FLAGS) {
+    if (typeof source[key] === 'boolean') display[key] = source[key]
+  }
+  if (DISPLAY_FONT_SIZES.has(source.fontSize)) display.fontSize = source.fontSize
+  if (DISPLAY_DENSITIES.has(source.density)) display.density = source.density
+  if (DISPLAY_FONT_WEIGHTS.has(source.fontWeight)) display.fontWeight = source.fontWeight
+  return display
+}
+
 /** Validate a persisted state document into the current shape. */
 function normalizeState(raw) {
   const state = {
     version: STATE_VERSION,
     order: [],
     pricing: {},
+    display: normalizeDisplay(raw?.display),
     savedAt: typeof raw?.savedAt === 'number' && Number.isFinite(raw.savedAt) ? raw.savedAt : 0,
   }
   const seen = new Set()
@@ -674,6 +705,10 @@ async function saveOrderAndPrices(ctx, body) {
     throw new BillingRefusal(400, 'bad-request', `models must be an array of at most ${MAX_MODELS} entries`)
   }
   const state = await loadState(ctx)
+  if (body?.display !== undefined && (body.display === null || typeof body.display !== 'object' || Array.isArray(body.display))) {
+    throw new BillingRefusal(400, 'bad-request', 'display must be an object')
+  }
+  const display = body?.display === undefined ? state.display : normalizeDisplay(body.display)
   const order = []
   const seen = new Set()
   const pricing = { ...state.pricing }
@@ -693,6 +728,7 @@ async function saveOrderAndPrices(ctx, body) {
     version: STATE_VERSION,
     order,
     pricing,
+    display,
     savedAt: Date.now(),
   }
   await enqueueWrite(ctx, next)
@@ -888,6 +924,7 @@ export const __test = {
   isDeepSeekRoute,
   loadState,
   modelKey,
+  normalizeDisplay,
   normalizeState,
   normalizeUsage,
   priceSetComplete,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-billing",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "Reorder models in the DSH composer picker, store three per-million-token prices, and estimate per-turn and session cost with built-in DeepSeek peak/off-peak rates.",
   "keywords": [
@@ -22,6 +22,14 @@
   "bugs": {
     "url": "https://github.com/likaileave/dsh-model-billing/issues"
   },
+  "peerDependencies": {
+    "@deepseek-ai/dsh": "^0.2.0-rc.2"
+  },
+  "peerDependenciesMeta": {
+    "@deepseek-ai/dsh": {
+      "optional": true
+    }
+  },
   "icon": "./icon.svg",
   "meta": {
     "title": "模型与费用 / Models & Cost",