dsh-whale-widget 0.2.2 → 0.2.5

package/README.md

@@ -1,6 +1,8 @@
 # DSH 小鲸鱼余额挂件（DeepSeek Balance Whale Widget）
 
-DeepSeek Harness（DSH）Web 界面右下角的常驻余额挂件：小鲸鱼气泡图 + DeepSeek API 余额 + 今日已用，每次打开界面自动启用。本项目是标准 DSH 插件包，可通过 `dsh plugin` 安装/卸载。
+![DSH 小鲸鱼余额挂件](assets/DSH2.png)
+
+DeepSeek Harness（DSH）Web 界面右下角的常驻余额挂件：小鲸鱼气泡图 + DeepSeek API 余额 + 今日已用 + 每轮对话消耗统计，每次打开界面自动启用。本项目是标准 DSH 插件包，可通过 `dsh plugin` 安装/卸载。
 
 ## 特性
 
@@ -9,12 +11,15 @@ DeepSeek Harness（DSH）Web 界面右下角的常驻余额挂件：小鲸鱼气
 - 📊 **今日已用**：两种模式任选（见下），显示今日消耗金额
   - **小鲸鱼记账（推荐，免令牌）**：不需要任何会话令牌，鲸鱼娘每次观测余额后用余额差值自动记账（`.dshw-usage.json`，跨天自动归零归档）
   - **实时·令牌**：填入平台会话令牌后直接调用平台用量接口，按**峰谷定价**（空闲 9:00–12:00 与 14:00–18:00 之外 / 高峰 9–12 与 14–18 点）实时换算今日已用
+- 💬 **每轮对话消耗统计**：监听本机会话事件，每轮对话结束后弹出本轮消耗金额（精确 usage，非估算）
+  - 菜单可开关「每轮对话后自动显示消耗金额」；「自动关闭时间」可自定义秒数（填 0 表示不自动关闭）
+  - 消耗金额泡泡显示期间，余额变动不弹普通泡泡
 - 🖱️ **拖拽 + 四边四分之一吸附**（左/右/上/下，角落可组合）
 - 🔄 左吸附时整体**水平镜像翻转**（文字同步反向、带动画）
 - 🧸 **按压 Q 弹**玩偶效果（按压时底部坐标不变）
-- 🎚️ **汉堡菜单**（悬停鲸鱼右上角出现）：大小滑块（0.6–2.5 倍，尺寸记忆）、音效切换（小黄鸭 / 音效1）、音量调节、用量模式选择
+- 🎚️ **汉堡菜单**（悬停鲸鱼右上角出现）：大小滑块（0.6–2.5 倍）、音效切换（小黄鸭 / 音效1）、音量调节、用量模式、峰谷提示文案（默认 / 梁文峰谷 / !?强强?!）、气泡开关、每轮消耗开关与自动关闭时间
 - 🔊 **音效**：按压/松手音效（可选包内 mp3，缺失时静默降级）
-- 💬 **随机台词**：点击气泡切换随机台词段（6 组加权随机，含峰谷提示/今日已用/卖萌吐槽），再点一次关闭；气泡总显示 5 秒自动收起
+- 💬 **随机台词**：点击气泡切换随机台词段（加权随机，含峰谷提示/今日已用/gif 动图/卖萌吐槽），再点一次关闭；气泡总显示 5 秒自动收起
 - 📐 随浏览器窗口自动缩放；文字位置/字号与图片联动
 
 ## 目录结构
@@ -27,7 +32,10 @@ dsh-whale-widget/
 ├── lib/
 │   └── index.js          # 宿主侧插件本体
 ├── assets/
+│   ├── DSH2.png          # README 顶部展示图
 │   ├── DSniang1.png      # 小鲸鱼本体（cut-out，气泡由代码绘制）
+│   ├── DSniang02.png     # 备用整图（兼容旧版手动安装路径）
+│   ├── rua.gif           # 随机台词 gif（可选）
 │   ├── Ya1.mp3 / Ya2.mp3 # 小黄鸭音效（可选）
 │   └── D1.mp3 / D2.mp3   # 音效1（可选）
 └── whale-widget-prompt.md # 完整规格/维护提示词
@@ -69,6 +77,12 @@ npm publish
 dsh plugin --profile web add dsh-whale-widget
 ```
 
+### 关于令牌（安装后必读）
+
+> **默认不需要任何令牌。** 安装后只需配置 `DEEPSEEK_API_KEY`（拉取余额必需），「今日已用」会自动使用默认的**小鲸鱼记账**模式（余额差值本地记账），开箱即用。
+>
+> 「实时·令牌」模式用到的 `DEEPSEEK_PLATFORM_TOKEN`（DeepSeek 平台网页会话令牌）是**可选的**，仅在你想要更精确的实时用量换算时才需要配置。获取方式见下方「用量模式使用教程」。
+
 ## 卸载
 
 ```powershell
@@ -104,11 +118,48 @@ Remove-Item "$web\DSniang02.png" -ErrorAction SilentlyContinue
 
 清理后再执行上面的安装命令。
 
-## 凭据与用量模式
+## 用量模式使用教程
+
+### 必需的凭据
+
+- **`DEEPSEEK_API_KEY`**（必需）：DeepSeek API 密钥，用于拉取余额（`api.deepseek.com/user/balance`）。在 DSH 凭据服务中配置即可（`dsh` 的凭据管理界面 / `.dsh/.credentials.yaml`）。
+
+### 两种用量模式
+
+挂件的「今日已用」有两种模式，在**菜单 → 用量**中选择：
+
+**① 小鲸鱼记账（推荐，默认）—— 完全不需要额外配置**
+
+鲸鱼娘自己用**余额差值**记账：每次观测到余额下降就把差值累加到当天用量，跨天自动归零归档（保留 30 天）。只要配好了 `DEEPSEEK_API_KEY` 就能用，**开箱即用**。
+
+- 账本文件：`$DSH_HOME/.dshw-usage.json`（自动生成）
+- 优点：零配置、免令牌
+- 说明：依赖「观测到的余额下降」累计，若 DSH 关闭期间有消耗会漏记；要精确请用令牌模式
+
+**② 实时·令牌（可选）—— 需要 `DEEPSEEK_PLATFORM_TOKEN`**
+
+鲸鱼娘直接调用 DeepSeek 平台用量接口，按**峰谷定价**实时换算今日已用，**精确到每小时的 token 用量**。
+
+**令牌在哪获取：**
+1. 浏览器打开并登录 **https://platform.deepseek.com**
+2. 按 **F12** 打开开发者工具 → 切到 **Network（网络）** 标签
+3. 在平台页面点击「用量」或刷新页面，找到名为 `usage/by_api_key/amount` 的请求
+4. 点开该请求 → **Request Headers（请求标头）** → 复制 `Authorization` 的值（形如 `Bearer eyJ...` 的一长串）
+5. 把整段值（含 `Bearer` 前缀或只要后面的 token 部分均可）配置为 DSH 凭据 `DEEPSEEK_PLATFORM_TOKEN`：
+   ```powershell
+   # 在 DSH 凭据服务中设置，例如编辑 $env:USERPROFILE\.dsh\.credentials.yaml
+   # DEEPSEEK_PLATFORM_TOKEN: <你复制的令牌>
+   ```
+6. 重启 `dsh web`，在**菜单 → 用量**里选择「实时·令牌」
+
+**说明：**
+- ⚠️ **令牌非必需**：不配置时挂件自动使用默认的「小鲸鱼记账」模式，功能不受影响
+- 该令牌是 DeepSeek **平台网页的会话令牌**（不是 `sk-` 开头的 API key），仅在登录平台网页时有效；重新登录后可能需要重新获取
+- 接口不返回金额，只返回 token 分桶，挂件会按内置峰谷定价表换算成金额；定价表在 `lib/index.js` 顶部 `PRICING` 常量，DeepSeek 调价时可自行修改
+
+### 每轮对话消耗（无需任何凭据）
 
-- **余额**：需要 `DEEPSEEK_API_KEY`（在 DSH 凭据服务中配置），用于 `api.deepseek.com/user/balance`
-- **实时·令牌模式**：需要 `DEEPSEEK_PLATFORM_TOKEN`（平台会话令牌，从浏览器 DevTools 的用量请求 `Authorization` 头获取），用于 `platform.deepseek.com/api/v0/usage/by_api_key/amount`
-- **小鲸鱼记账模式（默认）**：不需要平台令牌，鲸鱼娘用余额差值自动记账，跨天自动归档
+「每轮对话消耗统计」直接监听 DSH 本机会话事件，按模型真实 usage 换算金额（与今日已用同一套峰谷定价表），**不需要** `DEEPSEEK_PLATFORM_TOKEN`。
 
 ## 验证
 
@@ -118,11 +169,13 @@ dsh --profile web --dump-config | Select-String -Pattern "whale"
 curl http://127.0.0.1:3080/dsh-whale/image.png
 curl http://127.0.0.1:3080/dsh-whale/balance.json
 curl http://127.0.0.1:3080/dsh-whale/size.json
+curl http://127.0.0.1:3080/dsh-whale/last-turn.json
 ```
 
 - `/dsh-whale/image.png` → 200 `image/png`
 - `/dsh-whale/balance.json` → 200，含 `{"ok":true,"totalBalance":...,"currency":"CNY","todayUsage":...}`
-- `/dsh-whale/size.json` → GET 返回 `{scale,sound,vol,soundSet,usageMode}`；PUT 写入
+- `/dsh-whale/size.json` → GET 返回配置；PUT 写入
+- `/dsh-whale/last-turn.json` → 200，含最近一轮对话消耗 `{seq, turn, amount, tokens}`
 - 浏览器 F5 后右下角出现挂件
 
 ## 常见问题
@@ -131,6 +184,7 @@ curl http://127.0.0.1:3080/dsh-whale/size.json
 - **图片不显示**：确认 `assets/DSniang1.png` 在插件包内，且没有把旧文件放在 profile 里占用了同名路由。
 - **余额报「未配置 DEEPSEEK_API_KEY」**：去 DSH 配置凭据。
 - **今日已用显示 --**：记账模式下需要先跑一次余额观测（60 秒内自动完成）；令牌模式需要配置 `DEEPSEEK_PLATFORM_TOKEN`。
+- **每轮消耗不显示**：确认菜单「每轮对话后自动显示消耗金额」已勾选；一轮对话必须完整结束（turn/end）才会结算。
 - **没有声音**：确认 `assets/*.mp3` 在包内；若不想带音效文件，静默降级为无声音。
 - **本地开发改了代码不生效**：使用 `link:` 安装时，修改源码后重启 `dsh web`（ESM 模块缓存）；如果用已发布版本，需要 `npm publish` 新版本后 `dsh plugin --profile web update dsh-whale-widget`。
 - **自定义图片**：气泡由代码绘制（SVG），鲸鱼本体为 cut-out PNG，放在右下角 59.45%；换图需保证透明背景 cut-out，否则按 `whale-widget-prompt.md` 调整几何参数。

package/lib/index.js

@@ -3,7 +3,7 @@ import os from 'node:os'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-// Package root: lib/index.js -> package root. This keeps the bundle relocatable
+// Package root: lib/index.js -> package root. Keeps the bundle relocatable
 // when installed as a normal DSH npm plugin (node_modules or a local link).
 const PACKAGE_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
 
@@ -11,11 +11,10 @@ const PACKAGE_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)),
 // be read-only or cleaned on update.
 const DSH_HOME = process.env.DSH_HOME || path.join(os.homedir(), '.dsh')
 
-// Resolve the whale image relative to the package first, so the bundle works
-// no matter where it is installed. Legacy absolute paths remain as harmless
-// fallbacks for older manual installs.
+// Whale image: package-relative first, legacy absolute paths as fallback.
 const IMAGE_CANDIDATES = [
   path.join(PACKAGE_ROOT, 'assets', 'DSniang1.png'),
+  path.join(PACKAGE_ROOT, 'assets', 'DSniang02.png'),
   'D:/TestBox/deepseek/DSniang1.png',
   'D:/TestBox/deepseek/DSniang02.png',
   'D:/TestBox/deepseek/skin/DSniang02.png',
@@ -37,8 +36,8 @@ const USAGE_FILE_CANDIDATES = [
   'D:/TestBox/deepseek/skin/.dshw-usage.json',
 ]
 
-// Sound assets: package-relative first (optional — ship Ya1/Ya2/D1/D2.mp3 in
-// assets/ if you want sounds to work out of the box), legacy paths as fallback.
+// Sound assets: package-relative first (ship Ya1/Ya2/D1/D2.mp3 in assets/ for
+// sounds out of the box), legacy paths as fallback.
 const SOUND_SETS = {
   duck: {
     press: [path.join(PACKAGE_ROOT, 'assets', 'Ya1.mp3'), 'D:/TestBox/deepseek/skin/Ya1.mp3'],
@@ -58,6 +57,11 @@ function soundSetFromUrl(url) {
 }
 const BALANCE_URL = 'https://api.deepseek.com/user/balance'
 const BALANCE_TTL_MS = 25000
+const RUA_GIF_CANDIDATES = [
+  path.join(PACKAGE_ROOT, 'assets', 'rua.gif'),
+  'D:/TestBox/deepseek/skin/rua.gif',
+  'D:/TestBox/deepseek/rua.gif',
+]
 // DeepSeek CNY prices per million tokens: [空闲时段价, 高峰时段价].
 // 高峰时段：每日 9:00–12:00 和 14:00–18:00（北京时间）。Adjust here if DeepSeek changes pricing.
 const PEAK_HOURS = [
@@ -112,6 +116,7 @@ var FETCH_TIMEOUT_MS = 25000
 var BALANCE_URL = '/dsh-whale/balance.json'
 var SIZE_URL = '/dsh-whale/size.json'
 var IMG_URL = '/dsh-whale/image.png?v=2'
+var GIF_URL = '/dsh-whale/rua.gif'
 
 var css = [
   '.dshwv-root{position:fixed;right:0;bottom:0;--dshw-scale:1;--dshw-base:clamp(122px,calc(min(250px,min(100vw,100vh) * 0.28) * var(--dshw-scale)),625px);width:var(--dshw-base);height:var(--dshw-base);pointer-events:none;user-select:none;-webkit-user-select:none;z-index:9999;font-family:inherit;transition:left .16s ease,top .16s ease,transform .3s ease}',
@@ -119,26 +124,29 @@ var css = [
   '.dshwv-root.dshwv-dragging{cursor:grabbing;transition:none}',
   '.dshwv-body{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:50% 100%;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}',
   '.dshwv-img{position:absolute;right:0;bottom:0;width:59.45%;height:59.45%;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}',
-  '.dshwv-bubble{position:absolute;left:0;top:0;width:100%;aspect-ratio:1026/700;pointer-events:none;z-index:1}',
+  '.dshwv-bubble{position:absolute;left:0;top:0;width:100%;aspect-ratio:1026/700;pointer-events:none;z-index:1;--dshw-u:calc(var(--dshw-base) / 1026)}',
   '.dshwv-bubble svg{display:block;width:100%;height:100%;pointer-events:none}',
   '.dshwv-bubble svg path,.dshwv-bubble svg ellipse{pointer-events:none;cursor:pointer}',
   '.dshwv-bubble.dshwv-bubble-open svg path,.dshwv-bubble.dshwv-bubble-open svg ellipse{pointer-events:visiblePainted}',
   '.dshwv-bubble .dshwv-bshape,.dshwv-bubble .dshwv-b1,.dshwv-bubble .dshwv-b2{opacity:0;transform:scale(.7);transform-box:fill-box;transform-origin:50% 50%;transition:opacity .2s ease,transform .2s ease}',
   '.dshwv-bubble.dshwv-bubble-open .dshwv-bshape,.dshwv-bubble.dshwv-bubble-open .dshwv-b1,.dshwv-bubble.dshwv-bubble-open .dshwv-b2{opacity:1;transform:none}',
+  '.dshwv-gif{position:absolute;left:44.25%;top:38%;transform:translate(-50%,-50%);max-width:calc(var(--dshw-u) * 560);max-height:calc(var(--dshw-u) * 400);display:none;opacity:0;transition:opacity .2s ease;pointer-events:none;-webkit-user-drag:none;user-select:none;object-fit:contain}',
+  '.dshwv-root.dshwv-left .dshwv-gif{transform:translate(-50%,-50%) scaleX(-1)}',
+  '.dshwv-bubble.dshwv-bubble-open .dshwv-gif{opacity:1}',
   '.dshwv-bubble.dshwv-bubble-open .dshwv-b2{transition-delay:0s}',
   '.dshwv-bubble.dshwv-bubble-open .dshwv-b1{transition-delay:.13s}',
   '.dshwv-bubble.dshwv-bubble-open .dshwv-bshape{transition-delay:.26s}',
   '.dshwv-bubble .dshwv-bshape{transition-delay:.1s}',
   '.dshwv-bubble .dshwv-b1{transition-delay:.2s}',
   '.dshwv-bubble .dshwv-b2{transition-delay:.3s}',
-  '.dshwv-text{position:absolute;left:44.25%;top:38%;transform:translate(-50%,-50%);text-align:center;color:#536ba9;line-height:1.15;white-space:nowrap;--dshw-u:calc(var(--dshw-base) / 1026);pointer-events:none;opacity:0;transition:opacity .16s ease,transform .3s ease}',
+  '.dshwv-text{position:absolute;left:44.25%;top:38%;transform:translate(-50%,-50%);text-align:center;color:#536ba9;line-height:1.15;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .16s ease,transform .3s ease}',
   '.dshwv-bubble.dshwv-bubble-open .dshwv-text{opacity:1;transition:opacity .16s ease .36s,transform .3s ease}',
   '.dshwv-root.dshwv-left .dshwv-text{transform:translate(-50%,-50%) scaleX(-1)}',
   '.dshwv-label{font-size:calc(var(--dshw-u) * 66);font-weight:600;letter-spacing:.06em}',
   '.dshwv-amount{font-size:calc(var(--dshw-u) * 128);font-weight:800;line-height:1.05}',
   '.dshwv-period{font-size:calc(var(--dshw-u) * 104);font-weight:800;line-height:1.05}',
   '.dshwv-wrap{white-space:normal;max-width:calc(var(--dshw-u) * 560);line-height:1.2}',
-  '.dshwv-hint{font-size:calc(var(--dshw-u) * 56);color:#9fb0d9;letter-spacing:.02em;margin-top:calc(var(--dshw-u) * 9)}',
+  '.dshwv-hint{font-size:calc(var(--dshw-u) * 56);color:#9fb0d9;letter-spacing:.02em;margin-top:calc(var(--dshw-u) * 9);min-height:calc(var(--dshw-u) * 64);line-height:1.15}',
   '.dshwv-menu-btn{position:absolute;top:calc(40.55% + 4px);right:4px;width:26px;height:26px;border:none;border-radius:6px;background:rgba(32,49,112,.85);cursor:pointer;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;z-index:2;opacity:0;transition:opacity .15s ease}',
   '.dshwv-menu-btn.dshwv-menu-btn-visible{opacity:1}',
   '.dshwv-menu-btn span{display:block;width:14px;height:2px;background:#fff;border-radius:1px}',
@@ -150,6 +158,8 @@ var css = [
   '.dshwv-number{width:46px;border:1px solid rgba(32,49,112,.4);border-radius:6px;padding:2px 4px;font-size:12px;color:#203170;background:#fff}',
   '.dshwv-sound{flex:1;border:1px solid rgba(32,49,112,.4);border-radius:6px;background:rgba(32,49,112,.08);color:#203170;font-size:12px;padding:3px 0;cursor:pointer}',
   '.dshwv-sound:hover{background:rgba(32,49,112,.16)}',
+  '.dshwv-check{width:16px;height:16px;accent-color:#203170;cursor:pointer;flex:0 0 auto}',
+  '.dshwv-menu-sep{height:1px;background:rgba(32,49,112,.25);margin:6px 0}',
   '.dshwv-volpct{width:36px;text-align:right;color:#203170;font-size:12px}'
 ].join('\\n')
 
@@ -224,6 +234,32 @@ usageSelect.className = 'dshwv-sound'
 usageSelect.appendChild(soundOpt('ledger', '小鲸鱼记账 (推荐)'))
 usageSelect.appendChild(soundOpt('token', '实时·令牌 (用法：去问dsh)'))
 usageSelect.addEventListener('change', function () { setUsageMode(usageSelect.value) })
+var peakSelect = document.createElement('select')
+peakSelect.className = 'dshwv-sound'
+peakSelect.appendChild(soundOpt('default', '默认'))
+peakSelect.appendChild(soundOpt('liangwen', '梁文峰谷'))
+peakSelect.appendChild(soundOpt('qiangqiang', '!?强强?!'))
+peakSelect.addEventListener('change', function () { setPeakMode(peakSelect.value) })
+var bubbleToggle = document.createElement('input')
+bubbleToggle.type = 'checkbox'
+bubbleToggle.className = 'dshwv-check'
+bubbleToggle.checked = true
+bubbleToggle.title = '开启/关闭思考气泡'
+bubbleToggle.addEventListener('change', function () { setBubbleOn(bubbleToggle.checked) })
+var turnCostToggle = document.createElement('input')
+turnCostToggle.type = 'checkbox'
+turnCostToggle.className = 'dshwv-check'
+turnCostToggle.checked = true
+turnCostToggle.title = '每轮对话结束后自动显示本轮消耗金额'
+turnCostToggle.addEventListener('change', function () { setTurnCostOn(turnCostToggle.checked) })
+var turnCostCloseInput = document.createElement('input')
+turnCostCloseInput.type = 'number'
+turnCostCloseInput.min = '0'
+turnCostCloseInput.step = '1'
+turnCostCloseInput.className = 'dshwv-number'
+turnCostCloseInput.value = '5'
+turnCostCloseInput.title = '填 0 表示不自动关闭，需手动点击关闭'
+turnCostCloseInput.addEventListener('change', function () { setTurnCostClose(turnCostCloseInput.value) })
 var row1 = menuRow()
 row1.appendChild(menuLabel('大小'))
 row1.appendChild(scaleInput)
@@ -249,10 +285,30 @@ row3.appendChild(volPct)
 var row4 = menuRow()
 row4.appendChild(menuLabel('用量'))
 row4.appendChild(usageSelect)
+var row5 = menuRow()
+row5.appendChild(menuLabel('峰谷'))
+row5.appendChild(peakSelect)
+var row6 = menuRow()
+row6.appendChild(menuLabel('气泡'))
+row6.appendChild(bubbleToggle)
+var menuSep1 = document.createElement('div')
+menuSep1.className = 'dshwv-menu-sep'
+var row7 = menuRow()
+row7.appendChild(menuLabel('每轮消耗'))
+row7.appendChild(turnCostToggle)
+var row8 = menuRow()
+row8.appendChild(menuLabel('自动关闭时间'))
+row8.appendChild(turnCostCloseInput)
+row8.appendChild(menuLabel('秒'))
 menuBox.appendChild(row1)
 menuBox.appendChild(row2)
 menuBox.appendChild(row3)
 menuBox.appendChild(row4)
+menuBox.appendChild(row5)
+menuBox.appendChild(row6)
+menuBox.appendChild(menuSep1)
+menuBox.appendChild(row7)
+menuBox.appendChild(row8)
 
 var textBox = document.createElement('div')
 textBox.className = 'dshwv-text'
@@ -274,10 +330,21 @@ bubbleBox.innerHTML = '<svg viewBox="0 0 1026 700" preserveAspectRatio="xMidYMid
   '<ellipse class="dshwv-b1" cx="352" cy="561" rx="37.5" ry="26" fill="#FFFFFF" stroke="#203170" stroke-width="18"/>' +
   '<ellipse class="dshwv-b2" cx="442" cy="646" rx="24.5" ry="18" fill="#FFFFFF" stroke="#203170" stroke-width="18"/>' +
   '</svg>'
+var gifEl = document.createElement('img')
+gifEl.className = 'dshwv-gif'
+gifEl.src = GIF_URL
+gifEl.alt = ''
+gifEl.draggable = false
+bubbleBox.appendChild(gifEl)
 bubbleBox.appendChild(textBox)
 bubbleBox.addEventListener('click', function (e) {
   e.stopPropagation()
   if (!bubbleShown) return
+  if (costBubbleActive) {
+    // 消耗金额泡泡：点击关闭（确认）
+    hideCostBubble()
+    return
+  }
   if (bubbleRandomActive) {
     // 再次点击：关闭
     hideBubble()
@@ -333,18 +400,27 @@ function pickOne(arr) { return arr[Math.floor(Math.random() * arr.length)] }
 function singleCenter(style, text, color, wrap) { return [null, { t: text, s: style, c: color || '', w: !!wrap }, null] }
 function buildGroup1() {
   var peak = !!state.isPeak
+  var offText = '空闲时段'
+  var peakText = '高峰时段'
+  if (peakMode === 'liangwen') {
+    offText = '梁文谷'
+    peakText = '梁文峰'
+  } else if (peakMode === 'qiangqiang') {
+    offText = '!?谷谷?!'
+    peakText = '!?峰峰?!'
+  }
   return [
     { t: '当前时间段为:', s: 'A', c: '' },
-    { t: peak ? '高峰时段' : '空闲时段', s: 'P', c: peak ? '#e0433f' : '#2fa24c' },
+    { t: peak ? peakText : offText, s: 'P', c: peak ? '#e0433f' : '#2fa24c' },
     { t: '今日已用 ' + fmt(state.todayUsage, state.currency), s: 'C', c: '' },
   ]
 }
 var RANDOM_GROUPS = [
-  { w: 20, lines: buildGroup1 },
+  { w: 45, lines: buildGroup1 },
   { w: 7, lines: function () { return singleCenter('B', pickOne(['好模型... ↓', '好女孩...↓'])) } },
   { w: 7, lines: function () { return singleCenter('A', pickOne(['不知道用户有什么用，先赶走吧~', '我...我...我也要挣钱吗？', '我去吃饭啦，测完叫我', '压力一只蓝色大肥鱼？！', 'DeepSleep...', '坏了...用户彻底怒了！']), '', true) } },
+  { w: 10, lines: function () { return { gif: true } } },
   { w: 3, lines: function () { return singleCenter('A', pickOne(['你目录里的dsh是什么...大烧货吗...?', '恭喜你实现token自由！token全跑了！', '真当我是便宜货啊...']), '', true) } },
-  { w: 1, lines: function () { return [{ t: '这个', s: 'A', c: '' }, { t: '凶', s: 'B', c: '' }, { t: '是什么意思呀...', s: 'A', c: '' }] } },
   { w: 1, lines: function () { return singleCenter('B', '哦鲸鲸... ') } },
 ]
 function pickRandomLines() {
@@ -358,6 +434,19 @@ function pickRandomLines() {
   return RANDOM_GROUPS[RANDOM_GROUPS.length - 1].lines()
 }
 function applyBubbleLines(lines) {
+  if (lines && lines.gif) {
+    // gif 台词组：只显示 gif，隐藏三行文字（display 必须显式覆盖 CSS 的 none）
+    if (gifFadeTimer) { clearTimeout(gifFadeTimer); gifFadeTimer = null }
+    gifEl.style.display = 'block'
+    gifEl.style.opacity = ''
+    labelEl.style.display = 'none'
+    amountEl.style.display = 'none'
+    hintEl.style.display = 'none'
+    return
+  }
+  if (gifFadeTimer) { clearTimeout(gifFadeTimer); gifFadeTimer = null }
+  gifEl.style.display = 'none'
+  gifEl.style.opacity = ''
   var els = [labelEl, amountEl, hintEl]
   for (var i = 0; i < 3; i++) {
     var el = els[i]
@@ -376,13 +465,16 @@ function applyBubbleLines(lines) {
 }
 var bubbleSwapTimer = null
 var hintFadeTimer = null
+var gifFadeTimer = null
 var lastHintText = null
 function setHint(text) {
-  // 「加载中…」→「今日已用」等提示行变化时做淡出淡入，其余直接替换
+  // 首次/恢复（lastHintText===null）时直接写文本，不做淡出淡入——否则
+  // 气泡打开或按压重开时会先淡出再淡入，造成「消失一下又出现」。
+  // 只有气泡打开期间的内容变化（加载中→今日已用）才走动画。
   if (text === lastHintText) return
+  var first = lastHintText === null
   lastHintText = text
-  if (hintFadeTimer) { clearTimeout(hintFadeTimer); hintFadeTimer = null }
-  if (!bubbleShown) {
+  if (first || !bubbleShown) {
     hintEl.textContent = text
     return
   }
@@ -415,21 +507,30 @@ function swapBubbleContent(applyFn) {
 function restoreBubbleLines() {
   if (bubbleSwapTimer) { clearTimeout(bubbleSwapTimer); bubbleSwapTimer = null }
   if (hintFadeTimer) { clearTimeout(hintFadeTimer); hintFadeTimer = null }
+  if (gifFadeTimer) { clearTimeout(gifFadeTimer); gifFadeTimer = null }
   lastHintText = null
   textBox.style.transition = ''
   textBox.style.opacity = ''
+  gifEl.style.display = 'none'
+  gifEl.style.opacity = ''
   labelEl.style.display = ''
   labelEl.className = 'dshwv-label'
   labelEl.textContent = 'DeepSeek 余额'
   labelEl.style.color = ''
+  amountEl.style.display = ''
   amountEl.className = 'dshwv-amount'
   amountEl.style.color = ''
+  hintEl.style.display = ''
   hintEl.className = 'dshwv-hint'
   hintEl.style.color = ''
   render()
 }
 function showBubble() {
+  if (!bubbleOn) return
+  // 消耗金额泡泡显示期间，余额变动不再弹出普通泡泡
+  if (costBubbleActive) return
   if (bubbleTimer) { clearTimeout(bubbleTimer); bubbleTimer = null }
+  if (gifFadeTimer) { clearTimeout(gifFadeTimer); gifFadeTimer = null }
   bubbleShown = true
   bubbleRandomActive = false
   restoreBubbleLines()
@@ -448,7 +549,53 @@ function hideBubble() {
   bubbleRandomActive = false
   bubbleRandomLines = null
   bubbleShown = false
+  // 只销毁 gif 显示；三行文字保持现状让气泡自然淡出——不能在关闭瞬间
+  // 恢复成余额内容（否则随机台词界面会闪现余额）。文字恢复交给下次
+  // showBubble() 的 restoreBubbleLines()（那时气泡隐藏，恢复过程不可见）。
   bubbleBox.classList.remove('dshwv-bubble-open')
+  // gif 靠 CSS opacity 过渡淡出；display:none 会跳过过渡，须等淡出完成再隐藏
+  gifFadeTimer = setTimeout(function () {
+    gifFadeTimer = null
+    gifEl.style.display = 'none'
+  }, 240)
+}
+
+// —— 每轮对话消耗金额泡泡 ——
+var costBubbleTimer = null
+function showCostBubble(amount) {
+  if (!bubbleOn || !turnCostOn) return
+  if (costBubbleTimer) { clearTimeout(costBubbleTimer); costBubbleTimer = null }
+  if (bubbleTimer) { clearTimeout(bubbleTimer); bubbleTimer = null }
+  if (gifFadeTimer) { clearTimeout(gifFadeTimer); gifFadeTimer = null }
+  costBubbleActive = true
+  bubbleRandomActive = false
+  bubbleShown = true
+  lastHintText = null
+  // 样式：第一行 A（标签），第二行 B（红色金额），居中两行
+  gifEl.style.display = 'none'
+  gifEl.style.opacity = ''
+  labelEl.style.display = ''
+  labelEl.className = 'dshwv-label'
+  labelEl.textContent = '上一轮对话消耗:'
+  labelEl.style.color = ''
+  amountEl.style.display = ''
+  amountEl.className = 'dshwv-amount'
+  amountEl.textContent = '¥ ' + (isFinite(amount) ? Number(amount).toFixed(2) : '--')
+  amountEl.style.color = '#e0433f'
+  hintEl.style.display = 'none'
+  hintEl.textContent = ''
+  hintEl.style.color = ''
+  textBox.style.transition = ''
+  textBox.style.opacity = ''
+  bubbleBox.classList.add('dshwv-bubble-open')
+  if (turnCostCloseMs > 0) {
+    costBubbleTimer = setTimeout(hideCostBubble, turnCostCloseMs)
+  }
+}
+function hideCostBubble() {
+  if (costBubbleTimer) { clearTimeout(costBubbleTimer); costBubbleTimer = null }
+  costBubbleActive = false
+  hideBubble()
 }
 
 function clamp(v, lo, hi) { return v < lo ? lo : (v > hi ? hi : v) }
@@ -464,6 +611,8 @@ function fmt(balance, currency) {
   return currency === 'CNY' ? '¥ ' + fixed : fixed + ' ' + currency
 }
 function animateAmount(from, to, currency, duration) {
+  // 消耗金额泡泡显示期间，余额数字滚动不触碰金额行
+  if (costBubbleActive) return
   if (animId) cancelAnimationFrame(animId)
   if (from === null || !isFinite(from)) from = to
   if (from === to) {
@@ -489,6 +638,8 @@ function animateAmount(from, to, currency, duration) {
   animId = requestAnimationFrame(step)
 }
 function render() {
+  // 消耗金额泡泡显示期间，余额渲染不覆盖其内容（金额行/标题行/提示行）
+  if (costBubbleActive) return
   var amount, hint
   if (state.status === 'error') {
     amount = shown !== null ? fmt(shown, state.currency) : '--'
@@ -610,9 +761,15 @@ var soundOn = true
 var soundVol = 0.9
 var soundSet = 'duck'
 var usageMode = 'ledger'
+var peakMode = 'default'
+var bubbleOn = true
+var turnCostOn = true
+var turnCostCloseMs = 5000
+var lastCostSeq = 0
+var costBubbleActive = false
 function saveConfig() {
   try {
-    fetch(SIZE_URL, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ scale: state.scale, sound: soundOn, vol: soundVol, soundSet: soundSet, usageMode: usageMode }) })
+    fetch(SIZE_URL, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ scale: state.scale, sound: soundOn, vol: soundVol, soundSet: soundSet, usageMode: usageMode, peakMode: peakMode, bubbleOn: bubbleOn, turnCostOn: turnCostOn, turnCostCloseMs: turnCostCloseMs }) })
   } catch (err) {}
 }
 function setUsageMode(v) {
@@ -621,6 +778,29 @@ function setUsageMode(v) {
   saveConfig()
   refresh(false)
 }
+function setPeakMode(v) {
+  peakMode = v === 'liangwen' || v === 'qiangqiang' ? v : 'default'
+  peakSelect.value = peakMode
+  saveConfig()
+}
+function setBubbleOn(v) {
+  bubbleOn = !!v
+  bubbleToggle.checked = bubbleOn
+  saveConfig()
+  if (!bubbleOn) hideBubble()
+}
+function setTurnCostOn(v) {
+  turnCostOn = !!v
+  turnCostToggle.checked = turnCostOn
+  saveConfig()
+  if (!turnCostOn) hideCostBubble()
+}
+function setTurnCostClose(v) {
+  var n = Math.max(0, Math.round(Number(v) || 0))
+  turnCostCloseMs = n * 1000
+  turnCostCloseInput.value = String(n)
+  saveConfig()
+}
 function scaleToDisplay(s) {
   return Math.round((s - MIN_SCALE) / ((MAX_SCALE - MIN_SCALE) / 19)) + 1
 }
@@ -996,10 +1176,54 @@ fetch(SIZE_URL, { cache: 'no-store' })
       usageMode = d.usageMode === 'token' ? 'token' : 'ledger'
       usageSelect.value = usageMode
     }
+    if (d && typeof d.peakMode === 'string') {
+      peakMode = d.peakMode === 'liangwen' || d.peakMode === 'qiangqiang' ? d.peakMode : 'default'
+      peakSelect.value = peakMode
+    }
+    if (d && typeof d.bubbleOn === 'boolean') {
+      bubbleOn = d.bubbleOn
+      bubbleToggle.checked = bubbleOn
+    }
+    if (d && typeof d.turnCostOn === 'boolean') {
+      turnCostOn = d.turnCostOn
+      turnCostToggle.checked = turnCostOn
+    }
+    if (d && typeof d.turnCostCloseMs === 'number') {
+      turnCostCloseMs = d.turnCostCloseMs > 0 ? d.turnCostCloseMs : 0
+      turnCostCloseInput.value = String(Math.round(turnCostCloseMs / 1000))
+    }
     refresh(false)
   })
   .catch(function () { refresh(false) })
 setInterval(function () { refresh(false) }, REFRESH_MS)
+
+// —— 每轮对话消耗检测：轮询 last-turn.json，出现新 seq 时弹消耗金额泡泡 ——
+var LAST_TURN_URL = '/dsh-whale/last-turn.json'
+var lastCostSeq = 0
+var lastCostAligned = false
+function pollLastTurn() {
+  try {
+    fetch(LAST_TURN_URL, { cache: 'no-store' })
+      .then(function (r) { return r.json() })
+      .then(function (d) {
+        if (!d || !d.ok || typeof d.seq !== 'number') return
+        if (!lastCostAligned) {
+          // 首次拿到数据：只对齐 seq，不弹旧轮次
+          lastCostSeq = d.seq
+          lastCostAligned = true
+          return
+        }
+        if (d.seq > lastCostSeq) {
+          lastCostSeq = d.seq
+          if (d.turn !== null && d.amount !== null) {
+            showCostBubble(Number(d.amount))
+          }
+        }
+      })
+      .catch(function () {})
+  } catch (err) {}
+}
+setInterval(pollLastTurn, 1000)
 })()`
 
 
@@ -1010,6 +1234,79 @@ function apply(ctx) {
     let imageBytes = null
     let balanceCache = null
     let balanceInFlight = null
+    let gifBytes = null
+    // 每轮对话消耗统计：turn -> 聚合中的成本/分词；完成后写入 lastTurn
+    let turnAgg = null // { turn, cost, tokens, lastTs }
+    let lastTurn = null // { turn, amount, tokens, ts }
+    let lastTurnSeq = 0
+    const disposers = []
+
+    function resetTurnAgg() {
+      turnAgg = null
+    }
+    function finalizeTurn() {
+      if (turnAgg && turnAgg.cost > 0) {
+        lastTurn = { turn: turnAgg.turn, amount: turnAgg.cost, tokens: turnAgg.tokens, ts: turnAgg.lastTs }
+        lastTurnSeq++
+      }
+      turnAgg = null
+    }
+    // 监听会话事件流：assistant/message 携带每步真实 usage，按 turn 聚合；
+    // turn/end 时结算本轮并写入 lastTurn
+    function handleSessionEvent(event) {
+      try {
+        const type = event && event.type
+        const d = event && event.data
+        if (!d || typeof d !== 'object') return
+        if (type === 'turn/end') {
+          // 一轮对话结束：结算并清空聚合
+          finalizeTurn()
+          return
+        }
+        if (type !== 'assistant/message') return
+        const turn = Number(d.turn)
+        const usage = d.usage
+        if (!usage || typeof usage !== 'object' || !isFinite(turn)) return
+        if (!turnAgg || turnAgg.turn !== turn) {
+          if (turnAgg && turnAgg.turn !== turn) finalizeTurn()
+          if (!turnAgg || turnAgg.turn !== turn) turnAgg = { turn, cost: 0, tokens: 0, lastTs: Date.now() }
+        }
+        const input = Number(usage.inputTokens) || 0
+        const cache = Number(usage.cacheReadTokens) || 0
+        const output = Number(usage.outputTokens) || 0
+        const reasoning = Number(usage.reasoningTokens) || 0
+        turnAgg.tokens += input + cache + output + reasoning
+        // 定价换算（CNY/百万 token；缓存命中=输入价，其余按各自档位）
+        const model = d.message && d.message.source ? d.message.source.model : ''
+        const p = priceFor(model)
+        const off = isPeakTime(Math.floor(Date.now() / 1000)) ? 1 : 0
+        turnAgg.cost += (cache / 1e6) * p.hit[off] + (input / 1e6) * p.miss[off] + ((output + reasoning) / 1e6) * p.out[off]
+        turnAgg.lastTs = Date.now()
+      } catch (err) {}
+    }
+
+    // 监听所有会话的追加事件；turn/end 时结算本轮
+    disposers.push(ctx.on('session/event', (session, event) => {
+      // [debug] 确认事件是否到达（下个版本移除）
+      if (event && (event.type === 'turn/end' || event.type === 'assistant/message')) {
+        try { console.error('[whale-balance:event]', event.type, 'turn=' + (event.data && event.data.turn), 'usage=' + (event.data && event.data.usage ? 'yes' : 'no')) } catch (err) {}
+      }
+      handleSessionEvent(event)
+    }))
+
+    function loadGif() {
+      if (gifBytes) return gifBytes
+      for (const p of RUA_GIF_CANDIDATES) {
+        try {
+          const bytes = fs.readFileSync(p)
+          if (bytes && bytes.length > 0) {
+            gifBytes = bytes
+            return bytes
+          }
+        } catch (err) {}
+      }
+      throw new Error('rua gif not found')
+    }
 
     function loadImage() {
       if (imageBytes) return imageBytes
@@ -1267,6 +1564,10 @@ function apply(ctx) {
               vol: typeof parsed.vol === 'number' ? parsed.vol : 0.9,
               soundSet: parsed.soundSet === 'fx1' ? 'fx1' : 'duck',
               usageMode: normalizeUsageMode(parsed.usageMode),
+              peakMode: parsed.peakMode === 'liangwen' || parsed.peakMode === 'qiangqiang' ? parsed.peakMode : 'default',
+              bubbleOn: parsed.bubbleOn !== false,
+              turnCostOn: parsed.turnCostOn !== false,
+              turnCostCloseMs: typeof parsed.turnCostCloseMs === 'number' ? parsed.turnCostCloseMs : 5000,
             }
           }
         } catch (err) {}
@@ -1274,14 +1575,22 @@ function apply(ctx) {
       return null
     }
 
-    function writeSizeConfig(scale, sound, vol, soundSet, usageMode) {
+    function writeSizeConfig(scale, sound, vol, soundSet, usageMode, peakMode, bubbleOn, turnCostOn, turnCostCloseMs) {
       const um = normalizeUsageMode(usageMode)
+      const pm = peakMode === 'liangwen' || peakMode === 'qiangqiang' ? peakMode : 'default'
+      const bo = bubbleOn !== false
+      const tco = turnCostOn !== false
+      const tcc = typeof turnCostCloseMs === 'number' && turnCostCloseMs > 0 ? turnCostCloseMs : 5000
       const body = JSON.stringify({
         scale: scale,
         sound: sound !== false,
         vol: typeof vol === 'number' ? vol : 0.9,
         soundSet: soundSet === 'fx1' ? 'fx1' : 'duck',
         usageMode: um,
+        peakMode: pm,
+        bubbleOn: bo,
+        turnCostOn: tco,
+        turnCostCloseMs: tcc,
         updatedAt: new Date().toISOString(),
       })
       for (const p of SIZE_FILE_CANDIDATES) {
@@ -1294,6 +1603,10 @@ function apply(ctx) {
             vol: typeof vol === 'number' ? vol : 0.9,
             soundSet: soundSet === 'fx1' ? 'fx1' : 'duck',
             usageMode: um,
+            peakMode: pm,
+            bubbleOn: bo,
+            turnCostOn: tco,
+            turnCostCloseMs: tcc,
           }
         } catch (err) {}
       }
@@ -1318,8 +1631,6 @@ function apply(ctx) {
       })
     }
 
-    const disposers = []
-
     disposers.push(ctx.webServer.register({
       kind: 'exact',
       path: '/dsh-whale/image.png',
@@ -1339,6 +1650,25 @@ function apply(ctx) {
       },
     }))
 
+    disposers.push(ctx.webServer.register({
+      kind: 'exact',
+      path: '/dsh-whale/rua.gif',
+      handler: (req, res) => {
+        try {
+          const bytes = loadGif()
+          res.writeHead(200, {
+            'Content-Type': 'image/gif',
+            'Cache-Control': 'no-store',
+            'Content-Length': String(bytes.length),
+          })
+          res.end(bytes)
+        } catch (err) {
+          res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' })
+          res.end('rua gif unavailable: ' + String((err && err.message) || err))
+        }
+      },
+    }))
+
     disposers.push(ctx.webServer.register({
       kind: 'exact',
       path: '/dsh-whale/balance.json',
@@ -1354,6 +1684,19 @@ function apply(ctx) {
       },
     }))
 
+    disposers.push(ctx.webServer.register({
+      kind: 'exact',
+      path: '/dsh-whale/last-turn.json',
+      handler: (req, res) => {
+        // 返回最近一轮已完成的对话消耗；seq 递增供前端判断「新的一轮」
+        const payload = lastTurn
+          ? { ok: true, seq: lastTurnSeq, turn: lastTurn.turn, amount: lastTurn.amount, tokens: lastTurn.tokens, ts: lastTurn.ts }
+          : { ok: true, seq: 0, turn: null, amount: null, tokens: null, ts: null }
+        res.writeHead(200, JSON_HEADERS)
+        res.end(JSON.stringify(payload))
+      },
+    }))
+
     disposers.push(ctx.webServer.register({
       kind: 'exact',
       path: '/dsh-whale/size.json',
@@ -1375,7 +1718,7 @@ function apply(ctx) {
                 balanceCache = null
               }
             }
-            const result = writeSizeConfig(scale, parsed.sound !== false, parsed.vol, parsed.soundSet, parsed.usageMode)
+            const result = writeSizeConfig(scale, parsed.sound !== false, parsed.vol, parsed.soundSet, parsed.usageMode, parsed.peakMode, parsed.bubbleOn, parsed.turnCostOn, parsed.turnCostCloseMs)
             res.writeHead(result.ok ? 200 : 500, JSON_HEADERS)
             res.end(JSON.stringify(result))
           } catch (err) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-whale-widget",
-  "version": "0.2.2",
-  "description": "DSH Web 界面右下角的 DeepSeek 余额小鲸鱼挂件（含今日已用、峰谷定价、随机台词与音效）",
+  "version": "0.2.5",
+  "description": "DSH Web 界面右下角的 DeepSeek 余额小鲸鱼挂件（含今日已用、峰谷定价、随机台词、音效与每轮消耗统计）",
   "keywords": [
     "dsh",
     "dsh-plugin",