dsh-consumption-badge 1.1.0 → 1.2.2

package/lib/client.js

@@ -107,12 +107,263 @@ window.__ModuleLoader__.load({
 
     // 同源取数：Host 半边的只读路由，失败一律转成 store 里的错误文案。
     async function fetchJson(path) {
-      if (typeof fetch !== 'function') throw new Error('fetch 不可用')
+      if (typeof fetch !== 'function') throw new Error(tt('fetch 不可用'))
       const res = await fetch(path, { headers: { accept: 'application/json' }, credentials: 'same-origin' })
       if (!res.ok) throw new Error('HTTP ' + String(res.status))
       return await res.json()
     }
 
+    /* ============ i18n: follow the shell locale (zh / en) ============ */
+    // Design: the Chinese copy IS the dictionary key. Under `zh` no dictionary is
+    // needed (the key is the text); under `en` DICT_EN supplies the translation.
+    // Anything missing from DICT_EN falls back to the key, so a gap can only show
+    // Chinese — never an empty string.
+    //
+    // No manual re-render plumbing for slot-mounted UI: dsh-client-web-react's
+    // SlotOutlet subscribes to the locale face revision (useLocaleRevision), so
+    // every outlet re-renders on a language switch and these module-level calls
+    // pick up the new locale. Only the personalization page's own React root
+    // (rendered outside the slot system) subscribes explicitly.
+    const LOCALE_NS = 'consumption-badge'
+    const DICT_EN = {
+      /* badge + panel */
+      '本会话消耗（点击查看逐轮明细）': 'Session usage (click for per-turn details)',
+      '本会话消耗': 'Session usage',
+      '⛽ 本会话消耗': '⛽ Session usage',
+      '刷新余额': 'Refresh balance',
+      'Esc 关闭': 'Esc to close',
+      '累计 Token': 'Total tokens',
+      '估算金额': 'Estimated cost',
+      '当前时段': 'Current window',
+      '账户余额': 'Account balance',
+      '逐轮消耗趋势': 'Per-turn usage trend',
+      '命中 {hit} · 未命中 {miss} · 输出 {out}': 'hit {hit} · miss {miss} · output {out}',
+      '{id}（按 flash 估算）': '{id} (priced as flash)',
+      ' · 峰时 ×2': ' · peak ×2',
+      ' · 谷时': ' · off-peak ×1',
+      '高峰': 'Peak',
+      '空闲': 'Off-peak',
+      '峰': 'Peak',
+      '谷': 'Off-peak',
+      '峰时': 'Peak',
+      '谷时': 'Off-peak',
+      '北京时间 工作日 09:00-12:00 / 14:00-18:00': 'Beijing time, weekdays 09:00-12:00 / 14:00-18:00',
+      '金额按 DeepSeek 官方价估算（谷/峰 ×1/×2），仅供参考；数据源为本会话日志，刷新后自动恢复。': 'Costs are estimated from DeepSeek list prices (off-peak/peak ×1/×2) and are for reference only; the source is this session log, restored automatically after a refresh.',
+      /* chart tooltips */
+      '本会话还没有可统计的轮次': 'No turns to chart in this session yet',
+      '输入命中': 'Cache hit',
+      '输入未命中': 'Cache miss',
+      '输出': 'Output',
+      '本轮合计': 'Turn total',
+      '每轮 Token': 'Tokens per turn',
+      '每轮估算金额': 'Cost per turn',
+      '{n} 轮': '{n} turns',
+      '当日合计': 'Total',
+      '模型': 'Model',
+      /* balance + error copy */
+      '打开面板时请求一次': 'Fetched once per panel open',
+      '打开设置页时请求一次': 'Fetched once per settings open',
+      '读取中…': 'Loading…',
+      '获取失败': 'Failed',
+      '余额接口不可用': 'Balance API unavailable',
+      '余额不足': 'Insufficient balance',
+      '请前往 DeepSeek 开放平台充值': 'Top up at the DeepSeek open platform',
+      '赠送 ¥{v}': 'granted ¥{v}',
+      '充值 ¥{v}': 'topped up ¥{v}',
+      'DeepSeek 账户余额': 'DeepSeek account balance',
+      '空响应': 'Empty response',
+      '余额获取失败': 'Balance request failed',
+      '余额获取失败：{msg}': 'Balance request failed: {msg}',
+      '会话消耗读取失败：{msg}': 'Failed to read session usage: {msg}',
+      'fetch 不可用': 'fetch is not available',
+      /* host error codes (lib/index.js) → zh copy; DICT_EN supplies the English */
+      'credentials 服务不可用': 'The credentials service is unavailable.',
+      '读取 API Key 失败：{detail}': 'Failed to read the API key: {detail}',
+      '未配置 {detail}': 'No API key configured ({detail}).',
+      'subprocess 服务不可用': 'The subprocess service is unavailable.',
+      'curl 没有输出：{detail}': 'curl produced no output: {detail}',
+      'curl 启动失败：{detail}': 'curl could not be started: {detail}',
+      '响应解析失败：{detail}': 'Could not parse the response: {detail}',
+      '余额接口请求失败': 'The balance request failed.',
+      '缺少 sessionId': 'Missing sessionId.',
+      '会话日志不可用': 'The session log is unavailable.',
+      /* settings page */
+      '消耗统计': 'Usage statistics',
+      '本地估算，非官方账单': 'Local estimate, not an official bill',
+      '今天': 'Today',
+      '近一周': 'Last 7 days',
+      '近一月': 'Last 30 days',
+      '近一年': 'Last 12 months',
+      '全部历史 · 含所有工作区': 'All history · every workspace',
+      ' · 全部历史逐轮计价': ' · per-turn pricing over all history',
+      '时间范围': 'Time range',
+      '自定义区间': 'Custom range',
+      '工作区': 'Workspace',
+      '全部工作区': 'All workspaces',
+      '未归属工作区': 'Unassigned',
+      '日历选择（覆盖时间范围）': 'Calendar (overrides the range)',
+      '清除': 'Clear',
+      '数据': 'Data',
+      '刷新': 'Refresh',
+      '估算金额（右轴）': 'Estimated cost (right axis)',
+      'Token（左轴，默认隐藏）': 'Tokens (left axis, hidden by default)',
+      '该范围内暂无消耗记录': 'No usage recorded in this range',
+      '总消耗 ': 'Total cost ',
+      '总 Token ': 'Total tokens ',
+      '记录 ': 'Records ',
+      ' 条': '',
+      '峰时 ': 'Peak ',
+      '谷时 ': 'Off-peak ',
+      '粒度 ': 'Bucket ',
+      '按月': 'monthly',
+      '按日': 'daily',
+      '按小时': 'hourly',
+      '数据源：本机逐轮记录（localStorage {prefix}<sessionId>:<turn>）；按北京时间聚合（今天与单日区间逐小时，多日逐日，近一年逐月）{worker}。金额按 DeepSeek 官方价估算（谷/峰 ×1/×2），仅供参考。': 'Source: local per-turn records (localStorage {prefix}<sessionId>:<turn>), aggregated in Beijing time (hourly for today and single-day ranges, daily for multi-day ranges, monthly for the last 12 months){worker}. Costs are estimated from DeepSeek list prices (off-peak/peak ×1/×2) and are for reference only.',
+      '；聚合已在 Web Worker 中完成': '; aggregation ran in a Web Worker',
+      /* personalization page block */
+      '消耗弹窗': 'Usage popup',
+      '背景': 'Background',
+      '点击对话里的 ⛽ 胶囊弹出的消耗面板': 'The usage panel opened by the ⛽ pill in the chat',
+      '消耗弹窗背景': 'Usage popup background',
+      '默认': 'Default',
+      '毛玻璃': 'Glass',
+      '自定义背景': 'Custom image',
+      '纯色': 'Solid color',
+      '弹窗底色；文字颜色会按明暗自动切换': 'Popup base color; text color adapts automatically to lightness',
+      '正在保存…': 'Saving…',
+      '已保存到本机': 'Saved on this device',
+      '取回失败，请重新选择': 'Could not read it back — please pick again',
+      '当前：本地图片（{status}）': 'Using: local image ({status})',
+      '当前：本地图片（已保存到本机）': 'Using: local image (saved on this device)',
+      '当前：图片 URL': 'Using: image URL',
+      '未设置图片（此时按默认背景显示）': 'No image set (falls back to the default background)',
+      '图片': 'Image',
+      '；可选 URL 或本地图片，不限大小': '; a URL or a local image, any size',
+      '更换图片…': 'Change image…',
+      '选择图片…': 'Choose image…',
+      '已使用本地图片，输入 URL 可替换': 'Local image in use — enter a URL to replace it',
+      '不透明度': 'Opacity',
+      '背景图片自身的透明度（0% 完全不可见，100% 完整显示）': 'Opacity of the background image itself (0% invisible, 100% fully visible)',
+      '把背景图片磨砂化（对图片做真模糊）': 'Frost the background image (a real blur on the image)',
+      '底色半透明并模糊背后的页面': 'Translucent base that blurs the page behind it',
+      '毛玻璃强度': 'Glass strength',
+      '模糊半径（0–48px）': 'Blur radius (0–48px)',
+      '消耗徽章弹层的背景样式；不影响对话区与侧边栏背景。{tag}': 'Background style of the badge popup; it does not affect the chat or sidebar background. {tag}',
+      '重置本栏': 'Reset this section',
+      '消耗弹窗设置需要 react-dom，当前环境不可用。': 'Popup settings need react-dom, which is not available here.',
+      'error: IndexedDB 与 FileReader 都不可用': 'error: IndexedDB and FileReader are both unavailable',
+      'IndexedDB 与 FileReader 都不可用': 'IndexedDB and FileReader are both unavailable',
+      /* update notice */
+      '消耗徽章有新版本': 'A new version of the usage badge is available',
+      '当前 v{current} → 最新 v{latest}': 'current v{current} → latest v{latest}',
+      '复制更新命令': 'Copy update command',
+      '已复制': 'Copied',
+      '忽略此版本': 'Ignore this version',
+      '稍后提醒': 'Remind me later',
+      '更新后需重启 dsh 进程': 'Restart the dsh process after updating',
+      '版本来自 npm registry（24h 缓存）；「忽略此版本」会记住，直到出现更高版本。': 'Versions come from the npm registry (24h cache); “Ignore this version” is remembered until a higher version appears.',
+      /* slot labels */
+      '消耗': 'Usage',
+    }
+
+    let boundTranslate = null
+    let localeService = null
+    let appCtx = null
+
+    /** Fill `{name}` placeholders (same template syntax as the locale service). */
+    function applyParams(template, params) {
+      if (!params) return String(template)
+      return String(template).replace(/\{(\w+)\}/g, function (all, name) {
+        return Object.prototype.hasOwnProperty.call(params, name) ? String(params[name]) : all
+      })
+    }
+
+    /**
+     * Bind the shell's locale service when the composition provides one.
+     * Optional dependency on purpose: without the service every string falls
+     * back to its Chinese key, so the plugin still works standalone.
+     * @param ctx client cordis context.
+     */
+    function attachLocale(ctx) {
+      if (localeService !== null) return
+      let service = null
+      try {
+        // ctx.get(name, strict = true) throws when the service is missing: this is an
+        // optional dependency, so read it non-strictly. The try/catch also covers
+        // contexts without a get() (older shells, test doubles).
+        if (ctx && typeof ctx.get === 'function') service = ctx.get('locale', false) || null
+      } catch (e) {
+        service = null
+      }
+      if (service === null || typeof service.register !== 'function' || typeof service.bind !== 'function') return
+      try {
+        // Only the `en` side is registered: the key already is the `zh` copy, and
+        // the locale service resolves a miss to the key itself.
+        service.register(LOCALE_NS, 'en', DICT_EN)
+      } catch (e) {
+        // Already registered (hot re-mount of the same fiber) — binding is enough.
+      }
+      boundTranslate = service.bind(LOCALE_NS)
+      localeService = service
+    }
+
+    /**
+     * Late-binding guard: the locale service may be provided after this plugin's
+     * apply() ran (boot order differs between compositions), so the first render
+     * retries the bind. Costs one ctx.get per tt() call while unbound.
+     */
+    function ensureLocaleBound() {
+      if (localeService !== null || appCtx === null) return
+      attachLocale(appCtx)
+    }
+
+    /** Translate a key with the active locale; falls back to the key itself. */
+    function tt(key, params) {
+      if (localeService === null) ensureLocaleBound()
+      if (boundTranslate !== null) {
+        try {
+          return boundTranslate(key, params)
+        } catch (e) { /* fall through to the key */ }
+      }
+      return applyParams(key, params)
+    }
+
+    /** Subscribe to locale switches (only the self-built React root needs this). */
+    function subscribeLocale(fn) {
+      const service = localeService
+      if (service === null || typeof service.subscribe !== 'function') return function () {}
+      try {
+        const off = service.subscribe(fn)
+        return typeof off === 'function' ? off : function () {}
+      } catch (e) {
+        return function () {}
+      }
+    }
+
+    /* Host error codes (lib/index.js) → the Chinese key tt() translates. */
+    const HOST_ERROR_KEYS = {
+      'no-credentials': 'credentials 服务不可用',
+      'key-read-failed': '读取 API Key 失败：{detail}',
+      'no-key': '未配置 {detail}',
+      'no-subprocess': 'subprocess 服务不可用',
+      'curl-empty': 'curl 没有输出：{detail}',
+      'spawn-failed': 'curl 启动失败：{detail}',
+      'bad-response': '响应解析失败：{detail}',
+      'balance-request-failed': '余额接口请求失败',
+      'missing-session-id': '缺少 sessionId',
+      'log-unavailable': '会话日志不可用',
+    }
+
+    /**
+     * Render a host error payload in the active locale. Unknown codes fall back
+     * to the host's own (English) message so nothing is ever swallowed.
+     */
+    function hostErrorText(code, detail, fallback) {
+      const key = typeof code === 'string' ? HOST_ERROR_KEYS[code] : undefined
+      if (key === undefined) return typeof fallback === 'string' ? fallback : ''
+      return tt(key, { detail: typeof detail === 'string' ? detail : '' })
+    }
+
     /* local persistence: one record per <sessionId>:<turn> */
     function lsGet(key) {
       try {
@@ -201,6 +452,376 @@ window.__ModuleLoader__.load({
       return merged
     }
 
+    /* ================= 消耗弹窗背景样式（与个性化插件联动） ================= */
+    const MODAL_STYLE_KEY = 'dsh-consumption:modal-style'
+    const BUILD_TAG = 'dcb-1.2.2'
+    // 本地版本：本包是零构建的手写客户端包，无法 import package.json，因此把版本号作为常量维护，
+    // 并由 check.mjs 守卫与 package.json 严格一致（发布前不一致直接失败）。
+    const PLUGIN_VERSION = '1.2.2'
+    const PKG_NAME = 'dsh-consumption-badge'
+    const UPDATE_REGISTRY_URL = 'https://registry.npmjs.org/' + PKG_NAME + '/latest'
+    const UPDATE_COMMAND = 'dsh plugin --profile web update ' + PKG_NAME
+    // 与 dsh-plugin-personalization 同口径：registry 结果缓存 24h；
+    // 「忽略此版本」持久化；「稍后提醒」只关闭本次会话（不写忽略键，下次启动仍会检测）。
+    const LS_UPDATE_CHECK = 'dsh-consumption:update-check'
+    const LS_IGNORED_UPDATE = 'dsh-consumption:ignored-update-version'
+    const UPDATE_CHECK_TTL = 24 * 60 * 60 * 1000
+    const UPDATE_FETCH_TIMEOUT = 5000
+    // opacity：背景图片自身的不透明度（0–100，与个性化插件其它背景栏同口径）；
+    // 旧版的 scrim（压暗遮罩）在读取时折算成 100 - scrim，老配置不会丢。
+    const DEFAULT_MODAL_STYLE = { mode: 'default', color: '#17181c', image: '', imageKey: '', opacity: 85, glass: false, blur: 22 }
+    // label 是词典 key（中文原文），渲染时统一走 tt(mode.label)，所以这里不能直接显示。
+    const MODAL_MODES = [
+      { value: 'default', label: '默认' },
+      { value: 'glass', label: '毛玻璃' },
+      { value: 'image', label: '自定义背景' },
+      { value: 'solid', label: '纯色' },
+    ]
+
+    /* ---- 弹窗背景图片的本地存储：IndexedDB 存 Blob，localStorage 只留一个 key ---- */
+    const IMG_DB_NAME = 'dsh-consumption-assets'
+    const IMG_STORE = 'images'
+    let imgDbPromise = null
+
+    /** 打开（或首次创建）图片库；环境不支持 IndexedDB 时返回 null。 */
+    function imageDb() {
+      if (typeof indexedDB === 'undefined' || indexedDB === null) return Promise.resolve(null)
+      if (imgDbPromise !== null) return imgDbPromise
+      imgDbPromise = new Promise(function (resolve) {
+        let req = null
+        try {
+          req = indexedDB.open(IMG_DB_NAME, 1)
+        } catch (e) {
+          resolve(null)
+          return
+        }
+        req.onupgradeneeded = function () {
+          try {
+            req.result.createObjectStore(IMG_STORE)
+          } catch (e) { /* 已存在 */ }
+        }
+        req.onsuccess = function () { resolve(req.result) }
+        req.onerror = function () { resolve(null) }
+        req.onblocked = function () { resolve(null) }
+      })
+      return imgDbPromise
+    }
+
+    /** 写入一张图片（File/Blob 直接入库存，不做 base64，因此没有大小上限）。 */
+    function idbPutImage(key, blob) {
+      return imageDb().then(function (db) {
+        if (db === null) return false
+        return new Promise(function (resolve) {
+          try {
+            const tx = db.transaction(IMG_STORE, 'readwrite')
+            tx.objectStore(IMG_STORE).put(blob, key)
+            tx.oncomplete = function () { resolve(true) }
+            tx.onerror = function () { resolve(false) }
+            tx.onabort = function () { resolve(false) }
+          } catch (e) {
+            resolve(false)
+          }
+        })
+      })
+    }
+
+    /** 读回一张图片。 */
+    function idbGetImage(key) {
+      return imageDb().then(function (db) {
+        if (db === null || !key) return null
+        return new Promise(function (resolve) {
+          try {
+            const tx = db.transaction(IMG_STORE, 'readonly')
+            const req = tx.objectStore(IMG_STORE).get(key)
+            req.onsuccess = function () { resolve(req.result === undefined ? null : req.result) }
+            req.onerror = function () { resolve(null) }
+          } catch (e) {
+            resolve(null)
+          }
+        })
+      })
+    }
+
+    /** 删除一张图片。 */
+    function idbDeleteImage(key) {
+      if (!key) return Promise.resolve()
+      return imageDb().then(function (db) {
+        if (db === null) return
+        try {
+          db.transaction(IMG_STORE, 'readwrite').objectStore(IMG_STORE).delete(key)
+        } catch (e) { /* ignore */ }
+      })
+    }
+
+    /** 读弹窗背景配置（本地偏好，非会话数据），损坏则回默认。 */
+    function readModalStyle() {
+      const out = {
+        mode: DEFAULT_MODAL_STYLE.mode,
+        color: DEFAULT_MODAL_STYLE.color,
+        image: DEFAULT_MODAL_STYLE.image,
+        imageKey: DEFAULT_MODAL_STYLE.imageKey,
+        opacity: DEFAULT_MODAL_STYLE.opacity,
+        blur: DEFAULT_MODAL_STYLE.blur,
+        glass: DEFAULT_MODAL_STYLE.glass,
+      }
+      const raw = lsGet(MODAL_STYLE_KEY)
+      if (!raw) return out
+      try {
+        const rec = JSON.parse(raw)
+        if (!rec || typeof rec !== 'object') return out
+        if (rec.mode === 'default' || rec.mode === 'glass' || rec.mode === 'image' || rec.mode === 'solid') out.mode = rec.mode
+        if (typeof rec.color === 'string' && /^#[0-9a-fA-F]{6}$/.test(rec.color)) out.color = rec.color
+        if (typeof rec.image === 'string') out.image = rec.image
+        if (typeof rec.imageKey === 'string') out.imageKey = rec.imageKey
+        if (typeof rec.opacity === 'number' && rec.opacity >= 0 && rec.opacity <= 100) {
+          out.opacity = rec.opacity
+        } else if (typeof rec.scrim === 'number' && rec.scrim >= 0 && rec.scrim <= 100) {
+          // 旧配置：压暗 62% ⇒ 图片不透明度 38%
+          out.opacity = Math.max(0, Math.min(100, 100 - rec.scrim))
+        }
+        if (typeof rec.blur === 'number' && rec.blur >= 0 && rec.blur <= 48) out.blur = rec.blur
+        if (rec.glass === true) out.glass = true
+      } catch (e) { /* 忽略损坏配置 */ }
+      return out
+    }
+
+    /**
+     * 浅/深底上的墨色调色板：只作用于弹窗子树（覆盖主题 token 的局部值）。
+     * 连 `--dsw-alias-bg-overlay` 一起覆盖，否则 tooltip 会用主题的浅色底配我们强制出来的浅色字 = 看不见。
+     */
+    function inkPalette(dark) {
+      if (dark) {
+        return {
+          '--dsw-alias-bg-base': 'rgba(12,14,18,.58)',
+          '--dsw-alias-bg-layer-1': 'rgba(12,14,18,.55)',
+          '--dsw-alias-bg-layer-2': 'rgba(255,255,255,.12)',
+          '--dsw-alias-bg-overlay': 'rgba(16,18,24,.95)',
+          '--dsw-alias-label-primary': 'rgba(255,255,255,.96)',
+          '--dsw-alias-label-secondary': 'rgba(255,255,255,.74)',
+          '--dsw-alias-border-l1': 'rgba(255,255,255,.16)',
+          '--dsw-alias-border-l2': 'rgba(255,255,255,.28)',
+        }
+      }
+      return {
+        '--dsw-alias-bg-base': 'rgba(255,255,255,.6)',
+        '--dsw-alias-bg-layer-1': 'rgba(255,255,255,.66)',
+        '--dsw-alias-bg-layer-2': 'rgba(0,0,0,.06)',
+        '--dsw-alias-bg-overlay': 'rgba(255,255,255,.97)',
+        '--dsw-alias-label-primary': 'rgba(0,0,0,.88)',
+        '--dsw-alias-label-secondary': 'rgba(0,0,0,.62)',
+        '--dsw-alias-border-l1': 'rgba(0,0,0,.12)',
+        '--dsw-alias-border-l2': 'rgba(0,0,0,.22)',
+      }
+    }
+
+    /** 十六进制颜色的相对亮度（判断该配深色字还是浅色字）。 */
+    function hexLuma(hex) {
+      const v = parseInt(String(hex).slice(1), 16)
+      const r = (v >> 16) & 255
+      const g = (v >> 8) & 255
+      const b = v & 255
+      return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255
+    }
+
+    /**
+     * 由配置算出弹窗的 class + 自定义属性。真正的观感全部交给 CSS 变量 + backdrop-filter：
+     *  - 毛玻璃：不加压暗底色，靠 `backdrop-filter` 模糊背后的页面（与个性化插件的设置面板同款做法）；
+     *  - 自定义背景：图片走伪元素 `--dcb-bg-layer`，因此可以单独对图片做模糊；
+     *  - 纯色：只给 `--dcb-solid`，由 CSS 决定透明度（开毛玻璃时半透明 + 模糊）。
+     * @param style 偏好配置。
+     * @param imageUrl 已解析好的图片地址（URL 或 IndexedDB 里取出来的 blob: 地址）。
+     */
+    function modalSurface(style, imageUrl) {
+      const cfg = style || DEFAULT_MODAL_STYLE
+      const src = typeof imageUrl === 'string' && imageUrl !== '' ? imageUrl : (typeof cfg.image === 'string' ? cfg.image : '')
+      const hasImage = cfg.mode === 'image' && !!(cfg.imageKey || src)
+      const mode = cfg.mode === 'glass' ? 'glass' : (cfg.mode === 'solid' ? 'solid' : (hasImage ? 'image' : 'default'))
+      const glassed = cfg.mode === 'glass' || cfg.glass === true
+      const classes = ['dcb-modal']
+      if (mode === 'glass') classes.push('is-glass')
+      if (mode === 'solid') classes.push('has-solid')
+      if (mode === 'image') classes.push('has-image')
+      // 毛玻璃只对「有底」的三种形态有意义；图片被清除后回落默认外观，不再挂玻璃。
+      if (glassed && mode !== 'glass' && mode !== 'default') classes.push('is-glass')
+      const inline = {}
+      if (glassed) {
+        inline['--dcb-glass-blur'] = (typeof cfg.blur === 'number' ? cfg.blur : DEFAULT_MODAL_STYLE.blur) + 'px'
+      }
+      if (mode === 'solid') {
+        const dark = hexLuma(cfg.color) < 0.5
+        Object.assign(inline, inkPalette(dark))
+        inline['--dcb-solid'] = cfg.color
+      } else if (mode === 'image') {
+        // 与个性化插件其它背景栏同口径：图片自身带 opacity（真半透明，不与底色混成发白），
+        // 底下垫的是主题面板色，所以透明度越低越"淡"，而不是越"暗"。
+        inline['--dcb-bg-image'] = 'url("' + String(src).replace(/"/g, '%22') + '")'
+        const alpha = Math.min(1, Math.max(0, (typeof cfg.opacity === 'number' ? cfg.opacity : DEFAULT_MODAL_STYLE.opacity) / 100))
+        inline['--dcb-bg-opacity'] = String(alpha)
+      }
+      // 遮罩层永远不参与毛玻璃：模糊只发生在弹窗本体（`.dcb-modal.is-glass` 的 backdrop-filter）。
+      return {
+        className: classes.join(' '),
+        style: inline,
+        glass: glassed || mode === 'glass',
+      }
+    }
+
+    /* ===================== 更新检测（对齐个性化插件的口径） ===================== */
+
+    /** 解析版本号：`1.2.3-rc.1` → { numbers:[1,2,3], pre:['rc','1'] }。 */
+    function parseVersionText(value) {
+      const text = typeof value === 'string' ? value.trim().replace(/^v/i, '') : ''
+      const dash = text.indexOf('-')
+      const core = dash >= 0 ? text.slice(0, dash) : text
+      const pre = dash >= 0 ? text.slice(dash + 1) : ''
+      const numbers = [0, 0, 0]
+      const parts = core.split('.')
+      for (let i = 0; i < 3; i += 1) {
+        const n = parseInt(parts[i] === undefined ? '0' : parts[i], 10)
+        numbers[i] = Number.isFinite(n) ? n : 0
+      }
+      return { numbers: numbers, pre: pre === '' ? [] : pre.split('.') }
+    }
+
+    /** 预发布段比较：数字段按数值、字母段按字典序，缺段者更高（1.0.0 > 1.0.0-rc.1）。 */
+    function comparePrerelease(a, b) {
+      if (a.length === 0 && b.length === 0) return 0
+      if (a.length === 0) return 1
+      if (b.length === 0) return -1
+      const len = Math.max(a.length, b.length)
+      for (let i = 0; i < len; i += 1) {
+        if (a[i] === undefined) return -1
+        if (b[i] === undefined) return 1
+        const an = Number(a[i])
+        const bn = Number(b[i])
+        const aNum = Number.isFinite(an) && String(an) === String(a[i])
+        const bNum = Number.isFinite(bn) && String(bn) === String(b[i])
+        if (aNum && bNum) {
+          if (an !== bn) return an < bn ? -1 : 1
+        } else if (a[i] !== b[i]) {
+          return a[i] < b[i] ? -1 : 1
+        }
+      }
+      return 0
+    }
+
+    /** 语义化版本比较：a<b 返回 -1，相等 0，a>b 返回 1。 */
+    function compareVersions(local, latest) {
+      const a = parseVersionText(local)
+      const b = parseVersionText(latest)
+      for (let i = 0; i < 3; i += 1) {
+        if (a.numbers[i] !== b.numbers[i]) return a.numbers[i] < b.numbers[i] ? -1 : 1
+      }
+      return comparePrerelease(a.pre, b.pre)
+    }
+
+    /** 读 registry 结果缓存 `{latestVersion, checkedAt}`；结构非法一律视为无缓存。 */
+    function readUpdateCache() {
+      const raw = lsGet(LS_UPDATE_CHECK)
+      if (typeof raw !== 'string' || raw === '') return null
+      try {
+        const parsed = JSON.parse(raw)
+        if (!parsed || typeof parsed !== 'object') return null
+        const latest = typeof parsed.latestVersion === 'string' ? parsed.latestVersion : ''
+        const checkedAt = Number(parsed.checkedAt)
+        if (latest === '' || !Number.isFinite(checkedAt)) return null
+        return { latestVersion: latest, checkedAt: checkedAt }
+      } catch (e) {
+        return null
+      }
+    }
+
+    function writeUpdateCache(info) {
+      if (!info || typeof info !== 'object') return
+      lsSet(LS_UPDATE_CHECK, JSON.stringify({ latestVersion: String(info.latestVersion), checkedAt: Number(info.checkedAt) }))
+    }
+
+    function readIgnoredVersion() {
+      const raw = lsGet(LS_IGNORED_UPDATE)
+      return typeof raw === 'string' && raw !== '' ? raw : null
+    }
+
+    function writeIgnoredVersion(version) {
+      if (version === null || version === undefined || version === '') return
+      lsSet(LS_IGNORED_UPDATE, String(version))
+    }
+
+    /**
+     * 请求 npm registry 的最新版本（5s 超时、静默失败）。
+     * 浏览器直连 registry 可行：它的 GET 响应带 `access-control-allow-origin: *`。
+     * @returns 版本号字符串，任何异常返回 null。
+     */
+    function fetchLatestVersion() {
+      if (typeof fetch !== 'function') return Promise.resolve(null)
+      const options = { headers: { Accept: 'application/vnd.npm.install-v1+json' } }
+      let controller = null
+      if (typeof AbortController === 'function') {
+        try {
+          controller = new AbortController()
+          options.signal = controller.signal
+        } catch (e) {
+          controller = null
+        }
+      }
+      const request = fetch(UPDATE_REGISTRY_URL, options)
+        .then(function (response) {
+          if (!response || response.ok === false) throw new Error('registry status ' + (response && response.status))
+          return response.json()
+        })
+        .then(function (data) {
+          const latest = data && typeof data.version === 'string' ? data.version.trim() : ''
+          return latest !== '' ? latest : null
+        })
+        .catch(function (err) {
+          console.warn('[consumption-badge] update check failed (silent): ' + (err && err.message ? err.message : String(err)))
+          return null
+        })
+      if (controller === null) return request
+      return new Promise(function (resolve) {
+        const timer = setTimeout(function () {
+          try {
+            controller.abort()
+          } catch (e) { /* ignore */ }
+          resolve(null)
+        }, UPDATE_FETCH_TIMEOUT)
+        request.then(function (value) {
+          clearTimeout(timer)
+          resolve(value)
+        })
+      })
+    }
+
+    /**
+     * 主流程：缓存命中（< TTL）直接用缓存比较，过期/缺失才请求 registry。
+     * 任何失败都返回 hasUpdate:false，绝不 reject —— 调用方无需 try/catch。
+     * @returns Promise<{hasUpdate, latestVersion, currentVersion, fromCache}>
+     */
+    function checkForUpdate() {
+      const current = PLUGIN_VERSION
+      const ignored = readIgnoredVersion()
+      const cached = readUpdateCache()
+      const fresh = cached !== null && Date.now() - cached.checkedAt < UPDATE_CHECK_TTL
+      const base = fresh
+        ? Promise.resolve(cached.latestVersion)
+        : fetchLatestVersion().then(function (latest) {
+            if (latest === null) return cached !== null ? cached.latestVersion : null
+            writeUpdateCache({ latestVersion: latest, checkedAt: Date.now() })
+            return latest
+          })
+      return base.then(function (latest) {
+        if (latest === null || latest === undefined) {
+          return { hasUpdate: false, latestVersion: null, currentVersion: current, fromCache: fresh, ignored: false }
+        }
+        return {
+          hasUpdate: compareVersions(current, latest) < 0 && latest !== ignored,
+          latestVersion: latest,
+          currentVersion: current,
+          fromCache: fresh,
+          ignored: latest === ignored,
+        }
+      })
+    }
+
     /* shared store: every pill and the single overlay panel read this */
     function createStore() {
       const state = {
@@ -211,11 +832,29 @@ window.__ModuleLoader__.load({
         turns: [],
         turnsState: 'idle',
         turnsError: '',
+        // Error copy is stored language-neutral: the kind names the sentence and
+        // the raw detail rides turnsError, so a locale switch re-renders the text.
+        turnsErrorKind: '',
+        turnsErrorCode: '',
+        turnsErrorFallback: '',
         account: null,
         accountState: 'idle',
+        integrations: null,
+        modalStyle: readModalStyle(),
+        // 已解析的弹窗背景图地址：URL 直接用，本地图片是 IndexedDB 里的 blob: 地址。
+        modalImageUrl: '',
+        // 图片保存过程的可观测状态：'' | 'saving' | 'saved' | 以 'error:' 开头的失败原因
+        modalImageStatus: '',
+        // 更新提示弹窗：'idle' | 'checking' | 'ready'；laterDismissed 只在本次会话有效
+        updateState: 'idle',
+        updateInfo: null,
+        updateDismissed: false,
         balance: null,
         balanceState: 'idle',
         balanceError: '',
+        balanceErrorKind: '',
+        balanceErrorCode: '',
+        balanceErrorFallback: '',
         balanceAt: 0,
       }
       const listeners = new Set()
@@ -243,6 +882,7 @@ window.__ModuleLoader__.load({
           .then(function () { return fetchJson(API + '/account') })
           .then(function (res) {
             if (res && typeof res === 'object') state.account = res
+            if (res && res.integrations && typeof res.integrations === 'object') state.integrations = res.integrations
             state.accountState = 'ready'
             emit()
           })
@@ -283,13 +923,26 @@ window.__ModuleLoader__.load({
             }
             state.turns = restoreTurns(sessionId, normalized)
             state.turnsState = res && res.ok === false ? 'error' : 'ready'
-            state.turnsError = res && typeof res.error === 'string' ? res.error : ''
+            if (res && res.ok === false) {
+              state.turnsErrorKind = 'host'
+              state.turnsErrorCode = typeof res.code === 'string' ? res.code : ''
+              state.turnsError = typeof res.detail === 'string' ? res.detail : ''
+              state.turnsErrorFallback = typeof res.error === 'string' ? res.error : ''
+            } else {
+              state.turnsErrorKind = ''
+              state.turnsErrorCode = ''
+              state.turnsError = ''
+              state.turnsErrorFallback = ''
+            }
             persistTurns(sessionId, normalized)
             emit()
           })
           .catch(function (e) {
             state.turnsState = 'error'
-            state.turnsError = '会话消耗读取失败：' + msgOf(e)
+            state.turnsErrorKind = 'read'
+            state.turnsErrorCode = ''
+            state.turnsError = msgOf(e)
+            state.turnsErrorFallback = ''
             emit()
           })
           .then(function () { turnsInFlight = null })
@@ -304,17 +957,35 @@ window.__ModuleLoader__.load({
         balanceInFlight = Promise.resolve()
           .then(function () { return fetchJson(API + '/balance' + (force ? '?force=1' : '')) })
           .then(function (res) {
-            const value = res && typeof res === 'object' ? res : { ok: false, error: '空响应' }
+            const value = res && typeof res === 'object' ? res : { ok: false }
             state.balance = value
             state.balanceAt = Date.now()
             state.balanceState = 'ready'
-            state.balanceError = value.ok ? '' : (typeof value.error === 'string' ? value.error : '余额获取失败')
+            if (!res || typeof res !== 'object') {
+              state.balanceErrorKind = 'empty'
+              state.balanceError = ''
+              state.balanceErrorCode = ''
+              state.balanceErrorFallback = ''
+            } else if (value.ok) {
+              state.balanceErrorKind = ''
+              state.balanceError = ''
+              state.balanceErrorCode = ''
+              state.balanceErrorFallback = ''
+            } else {
+              state.balanceErrorKind = 'host'
+              state.balanceErrorCode = typeof value.code === 'string' ? value.code : ''
+              state.balanceError = typeof value.detail === 'string' ? value.detail : ''
+              state.balanceErrorFallback = typeof value.error === 'string' ? value.error : ''
+            }
             emit()
           })
           .catch(function (e) {
             state.balance = null
             state.balanceState = 'error'
-            state.balanceError = '余额获取失败：' + msgOf(e)
+            state.balanceErrorKind = 'fetch'
+            state.balanceErrorCode = ''
+            state.balanceError = msgOf(e)
+            state.balanceErrorFallback = ''
             emit()
           })
           .then(function () { balanceInFlight = null })
@@ -337,6 +1008,159 @@ window.__ModuleLoader__.load({
       function bump() {
         emit()
       }
+      /** 更新弹窗背景配置：合并 → 落本地偏好 → 通知所有订阅者（弹层即时重绘）。 */
+      function setModalStyle(patch) {
+        const prev = state.modalStyle
+        const next = {
+          mode: prev.mode,
+          color: prev.color,
+          image: typeof prev.image === 'string' ? prev.image : '',
+          imageKey: typeof prev.imageKey === 'string' ? prev.imageKey : '',
+          opacity: typeof prev.opacity === 'number' ? prev.opacity : DEFAULT_MODAL_STYLE.opacity,
+          blur: typeof prev.blur === 'number' ? prev.blur : DEFAULT_MODAL_STYLE.blur,
+          glass: prev.glass === true,
+        }
+        if (patch && typeof patch === 'object') {
+          if (patch.mode === 'default' || patch.mode === 'glass' || patch.mode === 'image' || patch.mode === 'solid') next.mode = patch.mode
+          if (typeof patch.color === 'string' && /^#[0-9a-fA-F]{6}$/.test(patch.color)) next.color = patch.color
+          if (typeof patch.image === 'string') next.image = patch.image
+          if (typeof patch.imageKey === 'string') next.imageKey = patch.imageKey
+          if (typeof patch.opacity === 'number' && patch.opacity >= 0 && patch.opacity <= 100) next.opacity = patch.opacity
+          if (typeof patch.blur === 'number' && patch.blur >= 0 && patch.blur <= 48) next.blur = patch.blur
+          if (typeof patch.glass === 'boolean') next.glass = patch.glass
+        }
+        state.modalStyle = next
+        lsSet(MODAL_STYLE_KEY, JSON.stringify(next))
+        emit()
+      }
+
+      /** 切换 blob: 地址时先回收旧的，避免内存泄漏。 */
+      function setResolvedImageUrl(url) {
+        const prev = state.modalImageUrl
+        state.modalImageUrl = url
+        if (prev && prev.indexOf('blob:') === 0 && prev !== url && typeof URL !== 'undefined' && typeof URL.revokeObjectURL === 'function') {
+          try {
+            URL.revokeObjectURL(prev)
+          } catch (e) { /* ignore */ }
+        }
+      }
+
+      /**
+       * 存一张本地图片：Blob 进 IndexedDB（不做 base64、无大小上限），偏好里只记 key。
+       * 任何一步失败都会写进 `modalImageStatus` 并在控制台留一行带标记的日志，
+       * 这样界面上能直接看到原因，不再是"静默失败 + 显示未设置"。
+       * @param file 用户选择的 File。
+       */
+      function setModalImage(file) {
+        if (!file) return Promise.resolve()
+        state.modalImageStatus = 'saving'
+        emit()
+        const key = 'modal-bg-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8)
+        return idbPutImage(key, file).then(function (stored) {
+          if (stored !== true) {
+            console.warn('[consumption-badge] IndexedDB write failed, falling back to a data URL')
+            return readAsDataUrl(file).then(function (dataUrl) {
+              if (!dataUrl) {
+                state.modalImageStatus = 'error: ' + tt('IndexedDB 与 FileReader 都不可用')
+                emit()
+                return
+              }
+              setModalStyle({ mode: 'image', image: dataUrl, imageKey: '' })
+              state.modalImageStatus = 'saved'
+              emit()
+            })
+          }
+          return idbGetImage(key).then(function (blob) {
+            const prevKey = state.modalStyle.imageKey
+            setModalStyle({ mode: 'image', image: '', imageKey: key })
+            if (typeof URL !== 'undefined' && typeof URL.createObjectURL === 'function' && blob) {
+              setResolvedImageUrl(URL.createObjectURL(blob))
+            } else if (blob === null) {
+              console.warn('[consumption-badge] image stored but could not be read back', key)
+            }
+            if (prevKey && prevKey !== key) idbDeleteImage(prevKey)
+            state.modalImageStatus = 'saved'
+            emit()
+          })
+        }).catch(function (err) {
+          const text = err && err.message ? err.message : String(err)
+          console.error('[consumption-badge] failed to save the image: ' + text)
+          state.modalImageStatus = 'error: ' + text
+          emit()
+        })
+      }
+
+      /** FileReader 兜底：把文件读成 dataURL（无大小限制，能存多少算多少）。 */
+      function readAsDataUrl(file) {
+        if (typeof FileReader !== 'function') return Promise.resolve('')
+        return new Promise(function (resolve) {
+          try {
+            const reader = new FileReader()
+            reader.onload = function () { resolve(typeof reader.result === 'string' ? reader.result : '') }
+            reader.onerror = function () { resolve('') }
+            reader.readAsDataURL(file)
+          } catch (e) {
+            resolve('')
+          }
+        })
+      }
+
+      /** 清除本地图片：库里的记录、blob: 地址、偏好键一起清。 */
+      function clearModalImage() {
+        const prevKey = state.modalStyle.imageKey
+        setResolvedImageUrl('')
+        setModalStyle({ image: '', imageKey: '' })
+        state.modalImageStatus = ''
+        emit()
+        return idbDeleteImage(prevKey)
+      }
+
+      /** 启动时把已保存的本地图片取回来（生成新的 blob: 地址）。 */
+      function hydrateModalImage() {
+        const key = state.modalStyle.imageKey
+        if (!key) return Promise.resolve()
+        return idbGetImage(key).then(function (blob) {
+          if (!blob) return
+          if (typeof URL !== 'undefined' && typeof URL.createObjectURL === 'function') {
+            setResolvedImageUrl(URL.createObjectURL(blob))
+            emit()
+          }
+        })
+      }
+
+      /** 启动后异步检查更新（绝不阻塞首屏）；失败静默。 */
+      function checkUpdates() {
+        if (state.updateState === 'checking') return Promise.resolve(state.updateInfo)
+        state.updateState = 'checking'
+        emit()
+        return checkForUpdate()
+          .then(function (info) {
+            state.updateInfo = info
+            state.updateState = 'ready'
+            emit()
+            return info
+          })
+          .catch(function () {
+            state.updateState = 'ready'
+            state.updateInfo = null
+            emit()
+            return null
+          })
+      }
+
+      /**
+       * 关闭更新提示。
+       * @param kind 'later' 只关本次会话；'ignore' 永久忽略该版本（写忽略键，与个性化插件同口径）。
+       */
+      function dismissUpdate(kind) {
+        if (kind === 'ignore' && state.updateInfo && state.updateInfo.latestVersion) {
+          writeIgnoredVersion(state.updateInfo.latestVersion)
+          if (state.updateInfo) state.updateInfo.hasUpdate = false
+        }
+        state.updateDismissed = true
+        emit()
+      }
+
       return {
         state: state,
         subscribe: subscribe,
@@ -345,6 +1169,12 @@ window.__ModuleLoader__.load({
         ensureBalance: ensureBalance,
         openPanel: openPanel,
         closePanel: closePanel,
+        setModalStyle: setModalStyle,
+        setModalImage: setModalImage,
+        clearModalImage: clearModalImage,
+        hydrateModalImage: hydrateModalImage,
+        checkUpdates: checkUpdates,
+        dismissUpdate: dismissUpdate,
         bump: bump,
       }
     }
@@ -392,7 +1222,7 @@ window.__ModuleLoader__.load({
       const holder = React.useState(-1)
       const hover = holder[0]
       const setHover = holder[1]
-      if (!series.length) return h('div', { className: 'dcb-empty' }, '本会话还没有可统计的轮次')
+      if (!series.length) return h('div', { className: 'dcb-empty' }, tt('本会话还没有可统计的轮次'))
       const innerW = CHART_W - CHART_PAD.l - CHART_PAD.r
       const innerH = CHART_H - CHART_PAD.t - CHART_PAD.b
       let maxToken = 1
@@ -459,18 +1289,18 @@ window.__ModuleLoader__.load({
             h('div', { className: 'dcb-tooltip-title' },
               '#' + String(hovered.turn),
               h('span', { className: 'dcb-tooltip-model' }, hovered.model || DEFAULT_MODEL),
-              h('span', { className: hovered.peak ? 'dcb-tag is-peak' : 'dcb-tag is-valley' }, hovered.peak ? '峰时' : '谷时')),
-            h('div', { className: 'dcb-tooltip-row' }, h('span', null, '输入命中'), h('b', null, fmtTokens(hovered.hit))),
-            h('div', { className: 'dcb-tooltip-row' }, h('span', null, '输入未命中'), h('b', null, fmtTokens(hovered.miss))),
-            h('div', { className: 'dcb-tooltip-row' }, h('span', null, '输出'), h('b', null, fmtTokens(hovered.out))),
-            h('div', { className: 'dcb-tooltip-row dcb-tooltip-total' }, h('span', null, '本轮合计'), h('b', null, fmtTokens(hovered.tokens))),
-            h('div', { className: 'dcb-tooltip-row dcb-tooltip-total' }, h('span', null, '估算金额'), h('b', null, '≈¥' + fmtYuan(hovered.cost))))
+              h('span', { className: hovered.peak ? 'dcb-tag is-peak' : 'dcb-tag is-valley' }, tt(hovered.peak ? '峰时' : '谷时'))),
+            h('div', { className: 'dcb-tooltip-row' }, h('span', null, tt('输入命中')), h('b', null, fmtTokens(hovered.hit))),
+            h('div', { className: 'dcb-tooltip-row' }, h('span', null, tt('输入未命中')), h('b', null, fmtTokens(hovered.miss))),
+            h('div', { className: 'dcb-tooltip-row' }, h('span', null, tt('输出')), h('b', null, fmtTokens(hovered.out))),
+            h('div', { className: 'dcb-tooltip-row dcb-tooltip-total' }, h('span', null, tt('本轮合计')), h('b', null, fmtTokens(hovered.tokens))),
+            h('div', { className: 'dcb-tooltip-row dcb-tooltip-total' }, h('span', null, tt('估算金额')), h('b', null, '≈¥' + fmtYuan(hovered.cost))))
         : null
 
       return h('div', { className: 'dcb-chart-wrap' },
         h('div', { className: 'dcb-chart-legend' },
-          h('span', { className: 'dcb-legend-item' }, h('i', { className: 'dcb-legend-dot' }), '每轮 Token'),
-          h('span', { className: 'dcb-legend-item' }, h('i', { className: 'dcb-legend-dot dcb-dot-cost' }), '每轮估算金额')),
+          h('span', { className: 'dcb-legend-item' }, h('i', { className: 'dcb-legend-dot' }), tt('每轮 Token')),
+          h('span', { className: 'dcb-legend-item' }, h('i', { className: 'dcb-legend-dot dcb-dot-cost' }), tt('每轮估算金额'))),
         h('div', { className: 'dcb-chart-body' },
           h('svg', {
             className: 'dcb-chart-svg',
@@ -492,6 +1322,24 @@ window.__ModuleLoader__.load({
 
     /* components: one store per plugin instance */
     const store = createStore()
+
+    /* Error copy is composed at render time (not at fetch time) so it follows the locale. */
+    function turnsErrorText() {
+      const st = store.state
+      if (st.turnsErrorKind === 'host') return hostErrorText(st.turnsErrorCode, st.turnsError, st.turnsErrorFallback)
+      if (st.turnsErrorKind === 'read') return tt('会话消耗读取失败：{msg}', { msg: st.turnsError })
+      return st.turnsError
+    }
+    function balanceErrorText() {
+      const st = store.state
+      if (st.balanceErrorKind === 'empty') return tt('空响应')
+      if (st.balanceErrorKind === 'host') {
+        const text = hostErrorText(st.balanceErrorCode, st.balanceError, st.balanceErrorFallback)
+        return text === '' ? tt('余额获取失败') : text
+      }
+      if (st.balanceErrorKind === 'fetch') return tt('余额获取失败：{msg}', { msg: st.balanceError })
+      return st.balanceError
+    }
     // Assigned by the overlay's callback ref, so Esc can reach a focused node without useRef.
     let panelRootEl = null
 
@@ -545,7 +1393,7 @@ window.__ModuleLoader__.load({
       return h('button', {
         type: 'button',
         className: 'dcb-pill',
-        title: '本会话消耗（点击查看逐轮明细）',
+        title: tt('本会话消耗（点击查看逐轮明细）'),
         onClick: function (event) {
           try {
             event.preventDefault()
@@ -559,7 +1407,7 @@ window.__ModuleLoader__.load({
         h('span', { className: 'dcb-pill-sep' }, '|'),
         h('span', null, pending ? '…' : '≈¥' + fmtYuan(cost)),
         h('span', { className: 'dcb-pill-sep' }, '|'),
-        h('span', { className: peak ? 'dcb-tag is-peak' : 'dcb-tag is-valley' }, peak ? '峰' : '谷'))
+        h('span', { className: peak ? 'dcb-tag is-peak' : 'dcb-tag is-valley' }, tt(peak ? '峰' : '谷')))
     }
 
     function ConsumptionPanel() {
@@ -589,6 +1437,7 @@ window.__ModuleLoader__.load({
       if (!open) return null
 
       const now = Date.now()
+      const surface = modalSurface(state.modalStyle, state.modalImageUrl)
       const model = state.account && typeof state.account.model === 'string' && state.account.model ? state.account.model : DEFAULT_MODEL
       const price = priceFor(model)
       const peak = isPeakAt(now)
@@ -598,27 +1447,28 @@ window.__ModuleLoader__.load({
       const totalCost = costOf(aggregated, price.table, peak)
       const balance = state.balance
       const loading = state.balanceState === 'loading'
+      const balanceErr = balanceErrorText()
       let balanceValue = '—'
-      let balanceHint = state.balanceError || '打开面板时请求一次'
+      let balanceHint = balanceErr || tt('打开面板时请求一次')
       let balanceClass = 'dcb-card-value'
       if (loading && !balance) {
-        balanceValue = '读取中…'
+        balanceValue = tt('读取中…')
         balanceHint = 'GET /user/balance'
       } else if (balance && balance.ok === false) {
-        balanceValue = '获取失败'
-        balanceHint = state.balanceError || '余额接口不可用'
+        balanceValue = tt('获取失败')
+        balanceHint = balanceErr || tt('余额接口不可用')
         balanceClass = 'dcb-card-value dcb-bad'
       } else if (balance && balance.available === false) {
-        balanceValue = '余额不足'
-        balanceHint = '请前往 DeepSeek 开放平台充值'
+        balanceValue = tt('余额不足')
+        balanceHint = tt('请前往 DeepSeek 开放平台充值')
         balanceClass = 'dcb-card-value dcb-bad'
       } else if (balance) {
         const symbol = balance.currency && balance.currency !== 'CNY' ? String(balance.currency) + ' ' : '¥'
         balanceValue = symbol + fmtYuan(balance.total)
         const parts = []
-        if (typeof balance.granted === 'number') parts.push('赠送 ¥' + fmtYuan(balance.granted))
-        if (typeof balance.toppedUp === 'number') parts.push('充值 ¥' + fmtYuan(balance.toppedUp))
-        balanceHint = parts.length ? parts.join(' · ') : 'DeepSeek 账户余额'
+        if (typeof balance.granted === 'number') parts.push(tt('赠送 ¥{v}', { v: fmtYuan(balance.granted) }))
+        if (typeof balance.toppedUp === 'number') parts.push(tt('充值 ¥{v}', { v: fmtYuan(balance.toppedUp) }))
+        balanceHint = parts.length ? parts.join(' · ') : tt('DeepSeek 账户余额')
       }
 
       function close() {
@@ -643,27 +1493,1128 @@ window.__ModuleLoader__.load({
           if (event && event.target === event.currentTarget) close()
         },
       },
-        h('div', { className: 'dcb-modal', role: 'dialog', 'aria-label': '本会话消耗' },
+        h('div', {
+          className: surface.className,
+          role: 'dialog',
+          'aria-label': tt('本会话消耗'),
+          style: surface.style,
+        },
           h('div', { className: 'dcb-head' },
-            h('div', { className: 'dcb-head-title' }, '⛽ 本会话消耗'),
+            h('div', { className: 'dcb-head-title' }, tt('⛽ 本会话消耗')),
             h('div', { className: 'dcb-head-actions' },
-              h('button', { type: 'button', className: 'dcb-btn', onClick: function () { store.ensureBalance(true) } }, '刷新余额'),
-              h('button', { type: 'button', className: 'dcb-btn dcb-btn-close', onClick: close, title: 'Esc 关闭' }, '✕'))),
+              h('button', { type: 'button', className: 'dcb-btn', onClick: function () { store.ensureBalance(true) } }, tt('刷新余额')),
+              h('button', { type: 'button', className: 'dcb-btn dcb-btn-close', onClick: close, title: tt('Esc 关闭') }, '✕'))),
           h('div', { className: 'dcb-cards' },
-            h(Card, { label: '累计 Token', value: fmtTokens(tokens), hint: '命中 ' + fmtTokens(aggregated.hit) + ' · 未命中 ' + fmtTokens(aggregated.miss) + ' · 输出 ' + fmtTokens(aggregated.out) }),
-            h(Card, { label: '估算金额', value: '≈¥' + fmtYuan(totalCost), hint: (price.known ? price.id : price.id + '（按 flash 估算）') + (peak ? ' · 峰时 ×2' : ' · 谷时') }),
-            h(Card, { label: '当前时段', value: peak ? '高峰' : '空闲', hint: '北京时间 工作日 09:00-12:00 / 14:00-18:00' }),
+            h(Card, { label: tt('累计 Token'), value: fmtTokens(tokens), hint: tt('命中 {hit} · 未命中 {miss} · 输出 {out}', { hit: fmtTokens(aggregated.hit), miss: fmtTokens(aggregated.miss), out: fmtTokens(aggregated.out) }) }),
+            h(Card, { label: tt('估算金额'), value: '≈¥' + fmtYuan(totalCost), hint: (price.known ? price.id : tt('{id}（按 flash 估算）', { id: price.id })) + tt(peak ? ' · 峰时 ×2' : ' · 谷时') }),
+            h(Card, { label: tt('当前时段'), value: tt(peak ? '高峰' : '空闲'), hint: tt('北京时间 工作日 09:00-12:00 / 14:00-18:00') }),
             h('div', { className: 'dcb-card' },
-              h('div', { className: 'dcb-card-label' }, '账户余额'),
+              h('div', { className: 'dcb-card-label' }, tt('账户余额')),
               h('div', { className: balanceClass }, balanceValue),
               h('div', { className: 'dcb-card-hint' }, balanceHint))),
-          h('div', { className: 'dcb-section-title' }, '逐轮消耗趋势'),
+          h('div', { className: 'dcb-section-title' }, tt('逐轮消耗趋势')),
           h(UsageChart, { series: series }),
           h('div', { className: 'dcb-foot' },
-            state.turnsError ? h('span', { className: 'dcb-foot-warn' }, state.turnsError + ' ') : null,
-            '金额按 DeepSeek 官方价估算（谷/峰 ×1/×2），仅供参考；数据源为本会话日志，刷新后自动恢复。')))
+            state.turnsError ? h('span', { className: 'dcb-foot-warn' }, turnsErrorText() + ' ') : null,
+            tt('金额按 DeepSeek 官方价估算（谷/峰 ×1/×2），仅供参考；数据源为本会话日志，刷新后自动恢复。'))))
+    }
+
+    /* ===================== settings section: history page ===================== */
+
+    // 逐轮记录超过这个条数就改在 Web Worker 里聚合（Worker 不可用时退回主线程）。
+    const WORKER_THRESHOLD = 5000
+    // 工作区下拉里的“未归属”哨兵：没有 session→workspace 映射的记录（例如会话已删除）。
+    const UNKNOWN_WORKSPACE = '__none__'
+    let aggSeq = 0
+    let aggSeqAll = 0
+
+    /**
+     * 读出全部逐轮记录。键结构沿用徽章既有存储：`dsh-consumption:<sessionId>:<turn>`，
+     * 值 {hit, miss, out, time, model}。不新增任何存储。
+     * @returns 记录数组（损坏/空记录跳过）。
+     */
+    function readAllRecords() {
+      const out = []
+      const keys = lsKeys(LS_PREFIX)
+      for (let i = 0; i < keys.length; i += 1) {
+        const key = keys[i]
+        const rest = key.slice(LS_PREFIX.length)
+        const sep = rest.lastIndexOf(':')
+        if (sep <= 0) continue
+        const sid = rest.slice(0, sep)
+        const turn = Number(rest.slice(sep + 1))
+        const raw = lsGet(key)
+        if (!raw) continue
+        try {
+          const rec = JSON.parse(raw)
+          if (!rec || typeof rec !== 'object') continue
+          const hit = num(rec.hit)
+          const miss = num(rec.miss)
+          const produced = num(rec.out)
+          if (hit + miss + produced === 0) continue
+          out.push({
+            sid: sid,
+            turn: Number.isFinite(turn) ? turn : 0,
+            time: typeof rec.time === 'number' ? rec.time : 0,
+            model: typeof rec.model === 'string' ? rec.model : '',
+            hit: hit,
+            miss: miss,
+            out: produced,
+          })
+        } catch (e) { /* 跳过损坏记录 */ }
+      }
+      return out
+    }
+
+    /**
+     * 解析 useWorkspaces 的签名串：既得到下拉选项，也得到**精确**的 session→workspace 映射
+     * （WorkspaceView.sessionIds 就是归属账本，无需按路径猜）。
+     * @param sig 由 useWorkspaces 选择器拼出的 `wid\u0001title\u0001sid,sid` 以 \u0002 连接。
+     */
+    function buildWorkspaceIndex(sig) {
+      const list = []
+      const bySession = {}
+      if (!sig) return { list: list, bySession: bySession }
+      const groups = String(sig).split('\u0002')
+      for (let i = 0; i < groups.length; i += 1) {
+        const parts = groups[i].split('\u0001')
+        if (parts.length < 3) continue
+        const wid = parts[0]
+        if (!wid) continue
+        list.push({ id: wid, title: parts[1] || wid })
+        const ids = parts[2] ? parts[2].split(',') : []
+        for (let j = 0; j < ids.length; j += 1) {
+          if (ids[j]) bySession[ids[j]] = wid
+        }
+      }
+      return { list: list, bySession: bySession }
+    }
+
+    /** 北京时间当日 00:00 的毫秒值。 */
+    function bjDayStart(ms) {
+      const t = new Date(ms + 8 * 3600 * 1000)
+      return Date.UTC(t.getUTCFullYear(), t.getUTCMonth(), t.getUTCDate()) - 8 * 3600 * 1000
+    }
+
+    /** 北京时间某月 1 日 00:00 的毫秒值（monthDelta 可为负）。 */
+    function bjMonthStart(ms, monthDelta) {
+      const t = new Date(ms + 8 * 3600 * 1000)
+      return Date.UTC(t.getUTCFullYear(), t.getUTCMonth() + (monthDelta || 0), 1) - 8 * 3600 * 1000
     }
 
+    /** `<input type="date">` 的值 → 北京时间当日 00:00 / 23:59:59.999。 */
+    function parseDateInput(value, endOfDay) {
+      if (!value) return 0
+      const ms = Date.parse(String(value) + (endOfDay ? 'T23:59:59.999+08:00' : 'T00:00:00+08:00'))
+      return Number.isFinite(ms) ? ms : 0
+    }
+
+    /**
+     * 时间范围解析。日历区间优先（覆盖下拉预设），否则按预设取北京时间自然日：
+     * 今天=当日 00:00→现在（**按小时**）；近一周=含今天在内 7 天；近一月=30 天；近一年=12 个自然月。
+     */
+    function resolveRange(rangeKey, calFrom, calTo, now) {
+      if (calFrom || calTo) {
+        const a = parseDateInput(calFrom, false)
+        const b = parseDateInput(calTo, true)
+        const lo = Math.min(a > 0 ? a : 0, b > 0 ? b : now)
+        const hi = Math.max(a > 0 ? a : 0, b > 0 ? b : now)
+        const days = Math.round((hi - lo) / 86400000) + 1
+        // 单日区间（含“今天”）按小时看更有意义，多日再退回按日、跨度大按月。
+        if (hi - lo <= 36 * 3600000) return { from: lo, to: hi, granularity: 'hour' }
+        return { from: lo, to: hi, granularity: days > 92 ? 'month' : 'day' }
+      }
+      if (rangeKey === 'today') return { from: bjDayStart(now), to: now, granularity: 'hour' }
+      if (rangeKey === 'month') return { from: bjDayStart(now - 29 * 86400000), to: now, granularity: 'day' }
+      if (rangeKey === 'year') return { from: bjMonthStart(now, -11), to: now, granularity: 'month' }
+      return { from: bjDayStart(now - 6 * 86400000), to: now, granularity: 'day' }
+    }
+
+    /**
+     * 纯聚合：时间过滤 → 工作区过滤 → 按小时/日/月分桶（空桶补 0）→ 峰谷与金额拆分。
+     * 刻意自包含（只读 input，不引用闭包变量），所以能直接 String() 进 Web Worker。
+     * @param input {records, from, to, wid, granularity: 'hour'|'day'|'month', prices, holidays, windows}
+     */
+    function computeConsumptionStats(input) {
+      const records = input.records || []
+      const prices = input.prices || {}
+      const holidays = input.holidays || {}
+      const windows = input.windows || []
+      const from = typeof input.from === 'number' ? input.from : 0
+      const to = typeof input.to === 'number' ? input.to : 0
+      const wid = typeof input.wid === 'string' ? input.wid : ''
+      const granularity = input.granularity === 'month' ? 'month' : (input.granularity === 'hour' ? 'hour' : 'day')
+      // noFill：只要合计不要时间轴（设置页顶部的“累计”卡片用），跳过分桶补齐。
+      const noFill = input.noFill === true
+      const OFF = 8 * 3600 * 1000
+
+      function n(v) { return typeof v === 'number' && isFinite(v) && v > 0 ? v : 0 }
+      function p2(v) { return v < 10 ? '0' + String(v) : String(v) }
+      function clock(ms) {
+        const t = new Date(ms + OFF)
+        return {
+          y: t.getUTCFullYear(),
+          m: t.getUTCMonth() + 1,
+          d: t.getUTCDate(),
+          h: t.getUTCHours(),
+          dow: t.getUTCDay(),
+          minutes: t.getUTCHours() * 60 + t.getUTCMinutes(),
+          mmdd: p2(t.getUTCMonth() + 1) + '-' + p2(t.getUTCDate()),
+        }
+      }
+      function isPeak(ms) {
+        const c = clock(ms)
+        if (c.dow === 0 || c.dow === 6) return false
+        if (holidays[c.mmdd]) return false
+        for (let i = 0; i < windows.length; i += 1) {
+          if (c.minutes >= windows[i][0] && c.minutes < windows[i][1]) return true
+        }
+        return false
+      }
+      function priceOf(model) {
+        const id = typeof model === 'string' ? model : ''
+        if (prices[id]) return prices[id]
+        if (id.toLowerCase().indexOf('pro') >= 0) return prices['deepseek-v4-pro'] || prices['deepseek-flash']
+        return prices['deepseek-flash']
+      }
+      function keyOf(ms) {
+        const c = clock(ms)
+        if (granularity === 'month') return c.y + '-' + p2(c.m)
+        if (granularity === 'hour') return c.y + '-' + p2(c.m) + '-' + p2(c.d) + ' ' + p2(c.h)
+        return c.y + '-' + p2(c.m) + '-' + p2(c.d)
+      }
+
+      const buckets = {}
+      const totals = { tokens: 0, cost: 0, peakTokens: 0, peakCost: 0, valleyTokens: 0, valleyCost: 0, hit: 0, miss: 0, out: 0 }
+      let count = 0
+      let unknownWorkspace = false
+      for (let i = 0; i < records.length; i += 1) {
+        const r = records[i]
+        if (!r) continue
+        const t = typeof r.time === 'number' ? r.time : 0
+        if (!(t >= from && t <= to)) continue
+        const rowWid = typeof r.wid === 'string' ? r.wid : ''
+        if (wid) {
+          if (wid === '__none__') { if (rowWid) continue; unknownWorkspace = true } else if (rowWid !== wid) continue
+        }
+        const hit = n(r.hit)
+        const miss = n(r.miss)
+        const produced = n(r.out)
+        const tokens = hit + miss + produced
+        if (tokens === 0) continue
+        const peak = isPeak(t)
+        const table = priceOf(r.model)
+        const k = peak ? 2 : 1
+        const cost = ((hit / 1e6) * table.hit + (miss / 1e6) * table.miss + (produced / 1e6) * table.out) * k
+        const key = keyOf(t)
+        let b = buckets[key]
+        if (!b) {
+          b = { key: key, tokens: 0, cost: 0, peakTokens: 0, peakCost: 0, valleyTokens: 0, valleyCost: 0, models: [], records: 0 }
+          buckets[key] = b
+        }
+        b.tokens += tokens
+        b.cost += cost
+        b.records += 1
+        totals.tokens += tokens
+        totals.cost += cost
+        totals.hit += hit
+        totals.miss += miss
+        totals.out += produced
+        if (peak) {
+          b.peakTokens += tokens
+          b.peakCost += cost
+          totals.peakTokens += tokens
+          totals.peakCost += cost
+        } else {
+          b.valleyTokens += tokens
+          b.valleyCost += cost
+          totals.valleyTokens += tokens
+          totals.valleyCost += cost
+        }
+        const model = typeof r.model === 'string' && r.model ? r.model : 'unknown'
+        if (b.models.indexOf(model) < 0) b.models.push(model)
+        count += 1
+      }
+
+      const points = []
+      function push(key, ms) {
+        const b = buckets[key]
+        const point = b || { key: key, tokens: 0, cost: 0, peakTokens: 0, peakCost: 0, valleyTokens: 0, valleyCost: 0, models: [], records: 0 }
+        if (granularity === 'month') point.label = key
+        else if (granularity === 'hour') point.label = key.slice(11) + ':00'
+        else point.label = key.slice(5)
+        point.stamp = ms
+        points.push(point)
+      }
+      if (noFill) {
+        // 合计已经在记录循环里累加完，这里不再铺时间轴。
+      } else if (granularity === 'month') {
+        const a = clock(from)
+        const b = clock(to)
+        let y = a.y
+        let m = a.m
+        let guard = 0
+        while ((y < b.y || (y === b.y && m <= b.m)) && guard < 400) {
+          push(y + '-' + p2(m), Date.UTC(y, m - 1, 1) - OFF)
+          m += 1
+          if (m > 12) {
+            m = 1
+            y += 1
+          }
+          guard += 1
+        }
+      } else if (granularity === 'hour') {
+        let guard = 0
+        for (let t = from; t <= to && guard < 48; t += 3600000) {
+          push(keyOf(t), t)
+          guard += 1
+        }
+      } else {
+        let guard = 0
+        for (let t = from; t <= to && guard < 800; t += 86400000) {
+          push(keyOf(t), t)
+          guard += 1
+        }
+      }
+
+      return {
+        points: points,
+        count: count,
+        totalTokens: totals.tokens,
+        totalCost: totals.cost,
+        totalHit: totals.hit,
+        totalMiss: totals.miss,
+        totalOut: totals.out,
+        peakTokens: totals.peakTokens,
+        peakCost: totals.peakCost,
+        valleyTokens: totals.valleyTokens,
+        valleyCost: totals.valleyCost,
+        granularity: granularity,
+        from: from,
+        to: to,
+        hasUnknownWorkspace: unknownWorkspace,
+      }
+    }
+
+    /**
+     * 记录多时在 Web Worker 里聚合，避免阻塞 UI；Worker 不可用（CSP/浏览器限制）时退回主线程。
+     * @param input computeConsumptionStats 的入参。
+     */
+    function aggregateAsync(input) {
+      const many = (input.records || []).length > WORKER_THRESHOLD
+      const canWorker = typeof Worker === 'function' && typeof Blob === 'function'
+        && typeof URL !== 'undefined' && typeof URL.createObjectURL === 'function'
+      if (many && canWorker) {
+        return new Promise(function (resolve, reject) {
+          let url = ''
+          let worker = null
+          try {
+            const src = 'self.onmessage=function(e){try{self.postMessage((' + String(computeConsumptionStats) + ')(e.data))}catch(err){self.postMessage({workerError:String(err&&err.message||err)})}}'
+            url = URL.createObjectURL(new Blob([src], { type: 'application/javascript' }))
+            worker = new Worker(url)
+          } catch (e) {
+            reject(e)
+            return
+          }
+          function cleanup() {
+            try {
+              worker.terminate()
+            } catch (e) { /* 已结束 */ }
+            try {
+              URL.revokeObjectURL(url)
+            } catch (e) { /* 已释放 */ }
+          }
+          worker.onmessage = function (event) {
+            cleanup()
+            const payload = event && event.data
+            if (!payload || payload.workerError) {
+              reject(new Error(payload && payload.workerError ? payload.workerError : 'worker failed'))
+              return
+            }
+            payload.via = 'worker'
+            resolve(payload)
+          }
+          worker.onerror = function () {
+            cleanup()
+            reject(new Error('worker failed'))
+          }
+          worker.postMessage(input)
+        })
+      }
+      return Promise.resolve().then(function () {
+        const out = computeConsumptionStats(input)
+        out.via = 'main'
+        return out
+      })
+    }
+
+    /* ---- history chart: dual axis, cost by default, tokens toggle ---- */
+    const HIST_W = 760
+    const HIST_H = 280
+    const HIST_PAD = { l: 56, r: 58, t: 16, b: 26 }
+
+    function HistoryChart(props) {
+      const points = props.points || []
+      const showTokens = props.showTokens === true
+      const holder = React.useState(-1)
+      const hover = holder[0]
+      const setHover = holder[1]
+      const innerW = HIST_W - HIST_PAD.l - HIST_PAD.r
+      const innerH = HIST_H - HIST_PAD.t - HIST_PAD.b
+      let maxToken = 1
+      let maxCost = 0
+      for (let i = 0; i < points.length; i += 1) {
+        if (points[i].tokens > maxToken) maxToken = points[i].tokens
+        if (points[i].cost > maxCost) maxCost = points[i].cost
+      }
+      const topToken = niceMax(maxToken)
+      const topCost = niceMax(maxCost > 0 ? maxCost : 1e-6)
+      const n = points.length
+      function xAt(i) {
+        return n <= 1 ? HIST_PAD.l + innerW / 2 : HIST_PAD.l + (i / (n - 1)) * innerW
+      }
+      function yToken(v) { return HIST_PAD.t + innerH - (v / topToken) * innerH }
+      function yCost(v) { return HIST_PAD.t + innerH - (v / topCost) * innerH }
+
+      const costPts = []
+      const tokenPts = []
+      for (let i = 0; i < n; i += 1) {
+        costPts.push(xAt(i).toFixed(2) + ',' + yCost(points[i].cost).toFixed(2))
+        tokenPts.push(xAt(i).toFixed(2) + ',' + yToken(points[i].tokens).toFixed(2))
+      }
+
+      const grid = []
+      const rightLabels = []
+      const leftLabels = []
+      for (let g = 0; g <= 4; g += 1) {
+        const ratio = g / 4
+        const y = HIST_PAD.t + innerH * ratio
+        grid.push(h('line', { key: 'hg' + g, x1: HIST_PAD.l, x2: HIST_PAD.l + innerW, y1: y, y2: y, className: 'dcb-grid-line' }))
+        rightLabels.push(h('text', { key: 'hr' + g, x: HIST_PAD.l + innerW + 8, y: y + 3.5, textAnchor: 'start', className: 'dcb-axis-label' }, '¥' + fmtYuan(topCost * (1 - ratio))))
+        if (showTokens) {
+          leftLabels.push(h('text', { key: 'hl' + g, x: HIST_PAD.l - 8, y: y + 3.5, textAnchor: 'end', className: 'dcb-axis-label' }, fmtTokens(topToken * (1 - ratio))))
+        }
+      }
+
+      const step = Math.max(1, Math.ceil(n / 10))
+      const xLabels = []
+      for (let i = 0; i < n; i += 1) {
+        if (i % step !== 0 && i !== n - 1) continue
+        xLabels.push(h('text', { key: 'hx' + i, x: xAt(i), y: HIST_H - 8, textAnchor: 'middle', className: 'dcb-axis-label' }, points[i].label))
+      }
+
+      const dots = []
+      for (let i = 0; i < n; i += 1) {
+        const active = hover === i
+        if (points[i].records > 0) {
+          dots.push(h('circle', { key: 'hc' + i, cx: xAt(i), cy: yCost(points[i].cost), r: active ? 4 : 2.2, className: 'dcb-dot dcb-dot-cost' }))
+        }
+        if (showTokens && points[i].records > 0) {
+          dots.push(h('circle', { key: 'ht' + i, cx: xAt(i), cy: yToken(points[i].tokens), r: active ? 4 : 2.2, className: 'dcb-dot' }))
+        }
+      }
+
+      const hovered = hover >= 0 && hover < n ? points[hover] : null
+      const crosshair = hovered
+        ? h('line', { x1: xAt(hover), x2: xAt(hover), y1: HIST_PAD.t, y2: HIST_PAD.t + innerH, className: 'dcb-hover-line' })
+        : null
+
+      function onMove(event) {
+        try {
+          const rect = event.currentTarget.getBoundingClientRect()
+          if (!rect || rect.width <= 0) return
+          const px = ((event.clientX - rect.left) / rect.width) * HIST_W
+          const within = Math.min(1, Math.max(0, (px - HIST_PAD.l) / innerW))
+          const idx = n <= 1 ? 0 : Math.round(within * (n - 1))
+          if (idx !== hover) setHover(idx)
+        } catch (e) { /* 忽略异常坐标 */ }
+      }
+
+      const tooltip = hovered
+        ? h('div', { className: 'dcb-tooltip', style: { left: String((xAt(hover) / HIST_W) * 100) + '%' } },
+            h('div', { className: 'dcb-tooltip-title' },
+              hovered.label,
+              h('span', { className: 'dcb-tooltip-model' }, tt('{n} 轮', { n: hovered.records }))),
+            h('div', { className: 'dcb-tooltip-row dcb-tooltip-total' }, h('span', null, tt('当日合计')), h('b', null, '≈¥' + fmtYuan(hovered.cost))),
+            h('div', { className: 'dcb-tooltip-row' }, h('span', null, 'Token'), h('b', null, fmtTokens(hovered.tokens))),
+            h('div', { className: 'dcb-tooltip-row' }, h('span', null, tt('峰时')), h('b', null, '≈¥' + fmtYuan(hovered.peakCost) + ' / ' + fmtTokens(hovered.peakTokens))),
+            h('div', { className: 'dcb-tooltip-row' }, h('span', null, tt('谷时')), h('b', null, '≈¥' + fmtYuan(hovered.valleyCost) + ' / ' + fmtTokens(hovered.valleyTokens))),
+            h('div', { className: 'dcb-tooltip-row' }, h('span', null, tt('模型')), h('b', null, hovered.models.length ? hovered.models.join(', ') : '—')))
+        : null
+
+      return h('div', { className: 'dcb-chart-body' },
+        h('svg', {
+          className: 'dcb-hist-svg',
+          viewBox: '0 0 ' + HIST_W + ' ' + HIST_H,
+          preserveAspectRatio: 'none',
+          onMouseMove: onMove,
+          onMouseLeave: function () { setHover(-1) },
+        },
+          h('g', null, grid),
+          crosshair,
+          showTokens ? h('polyline', { className: 'dcb-line', points: tokenPts.join(' ') }) : null,
+          h('polyline', { className: 'dcb-line dcb-line-cost', points: costPts.join(' ') }),
+          h('g', null, dots),
+          h('g', null, leftLabels),
+          h('g', null, rightLabels),
+          h('g', null, xLabels)),
+        tooltip)
+    }
+
+    /** 设置页「消耗」整页：三个筛选 + 折线 + 汇总。筛选状态不持久化，每次打开回到“近一周 / 全部工作区”。 */
+    function ConsumptionSettings(props) {
+      const s0 = React.useState('week')
+      const rangeKey = s0[0]
+      const setRangeKey = s0[1]
+      const s1 = React.useState('')
+      const wid = s1[0]
+      const setWid = s1[1]
+      const s2 = React.useState('')
+      const calFrom = s2[0]
+      const setCalFrom = s2[1]
+      const s3 = React.useState('')
+      const calTo = s3[0]
+      const setCalTo = s3[1]
+      const s4 = React.useState(null)
+      const records = s4[0]
+      const setRecords = s4[1]
+      const s5 = React.useState(null)
+      const stats = s5[0]
+      const setStats = s5[1]
+      const s6 = React.useState(0)
+      const reloadTick = s6[0]
+      const setReloadTick = s6[1]
+      const s7 = React.useState(false)
+      const showTokens = s7[0]
+      const setShowTokens = s7[1]
+      const s8 = React.useState(null)
+      const allStats = s8[0]
+      const setAllStats = s8[1]
+      const s9 = React.useState(0)
+      const setStoreTick = s9[1]
+
+      // 账户/余额复用徽章共用的 store（同一份 60s 缓存，不额外发请求）。
+      React.useEffect(function () {
+        return store.subscribe(function () { setStoreTick(function (v) { return v + 1 }) })
+      }, [])
+      React.useEffect(function () {
+        store.ensureAccount()
+        store.ensureBalance(false)
+        return everyTick(60000, function () { store.ensureBalance(false) })
+      }, [])
+
+      // 工作区签名：id + 标题 + 归属会话（WorkspaceView.sessionIds 即归属账本）。
+      const wsSig = props && typeof props.useWorkspaces === 'function'
+        ? props.useWorkspaces(function (w) {
+            const items = w && w.items ? w.items : []
+            const out = []
+            for (let i = 0; i < items.length; i += 1) {
+              const it = items[i]
+              if (!it) continue
+              out.push(String(it.workspaceId || '') + '\u0001' + String(it.title || '') + '\u0001' + (it.sessionIds || []).join(','))
+            }
+            return out.join('\u0002')
+          })
+        : ''
+
+      React.useEffect(function () {
+        setRecords(readAllRecords())
+      }, [reloadTick])
+
+      React.useEffect(function () {
+        if (!records) return undefined
+        const now = Date.now()
+        const range = resolveRange(rangeKey, calFrom, calTo, now)
+        const index = buildWorkspaceIndex(wsSig)
+        const rows = []
+        for (let i = 0; i < records.length; i += 1) {
+          const r = records[i]
+          rows.push({ time: r.time, hit: r.hit, miss: r.miss, out: r.out, model: r.model, wid: index.bySession[r.sid] || '' })
+        }
+        const input = {
+          records: rows,
+          from: range.from,
+          to: range.to,
+          wid: wid,
+          granularity: range.granularity,
+          prices: PRICES,
+          holidays: CN_FIXED_HOLIDAYS,
+          windows: PEAK_WINDOWS,
+        }
+        const seq = ++aggSeq
+        aggregateAsync(input).then(function (result) {
+          if (seq === aggSeq) setStats(result)
+        }).catch(function () {
+          if (seq !== aggSeq) return
+          const fallback = computeConsumptionStats(input)
+          fallback.via = 'main'
+          setStats(fallback)
+        })
+        return undefined
+      }, [records, rangeKey, wid, calFrom, calTo, wsSig])
+
+      // 顶部“累计”卡片：全部历史合计（不受筛选影响），只算合计不铺时间轴。
+      React.useEffect(function () {
+        if (!records) return undefined
+        const index = buildWorkspaceIndex(wsSig)
+        const rows = []
+        for (let i = 0; i < records.length; i += 1) {
+          const r = records[i]
+          rows.push({ time: r.time, hit: r.hit, miss: r.miss, out: r.out, model: r.model, wid: index.bySession[r.sid] || '' })
+        }
+        const input = {
+          records: rows,
+          from: 0,
+          to: Date.now(),
+          wid: '',
+          granularity: 'day',
+          noFill: true,
+          prices: PRICES,
+          holidays: CN_FIXED_HOLIDAYS,
+          windows: PEAK_WINDOWS,
+        }
+        const seq = ++aggSeqAll
+        aggregateAsync(input).then(function (result) {
+          if (seq === aggSeqAll) setAllStats(result)
+        }).catch(function () {
+          if (seq !== aggSeqAll) return
+          setAllStats(computeConsumptionStats(input))
+        })
+        return undefined
+      }, [records, wsSig])
+
+      const st = store.state
+      const accountModel = st.account && typeof st.account.model === 'string' && st.account.model ? st.account.model : DEFAULT_MODEL
+      const accountPrice = priceFor(accountModel)
+      const nowPeak = isPeakAt(Date.now())
+      const balance = st.balance
+      const balanceLoading = st.balanceState === 'loading'
+      const balanceErr = balanceErrorText()
+      let balanceValue = '—'
+      let balanceHint = balanceErr || tt('打开设置页时请求一次')
+      let balanceClass = 'dcb-card-value'
+      if (balanceLoading && !balance) {
+        balanceValue = tt('读取中…')
+        balanceHint = 'GET /user/balance'
+      } else if (balance && balance.ok === false) {
+        balanceValue = tt('获取失败')
+        balanceHint = balanceErr || tt('余额接口不可用')
+        balanceClass = 'dcb-card-value dcb-bad'
+      } else if (balance && balance.available === false) {
+        balanceValue = tt('余额不足')
+        balanceHint = tt('请前往 DeepSeek 开放平台充值')
+        balanceClass = 'dcb-card-value dcb-bad'
+      } else if (balance) {
+        const symbol = balance.currency && balance.currency !== 'CNY' ? String(balance.currency) + ' ' : '¥'
+        balanceValue = symbol + fmtYuan(balance.total)
+        const parts = []
+        if (typeof balance.granted === 'number') parts.push(tt('赠送 ¥{v}', { v: fmtYuan(balance.granted) }))
+        if (typeof balance.toppedUp === 'number') parts.push(tt('充值 ¥{v}', { v: fmtYuan(balance.toppedUp) }))
+        balanceHint = parts.length ? parts.join(' · ') : tt('DeepSeek 账户余额')
+      }
+
+      const index = buildWorkspaceIndex(wsSig)
+      const points = stats ? stats.points : []
+      const hasData = !!stats && stats.count > 0
+      const rangeOptions = [
+        { id: 'today', label: tt('今天') },
+        { id: 'week', label: tt('近一周') },
+        { id: 'month', label: tt('近一月') },
+        { id: 'year', label: tt('近一年') },
+      ]
+
+      return h('div', { className: 'dcb-set' },
+        h('div', { className: 'dcb-set-head' },
+          h('div', { className: 'dcb-set-title' }, tt('消耗统计')),
+          h('div', { className: 'dcb-set-note' }, tt('本地估算，非官方账单'))),
+        // 顶部四卡：累计（全部历史，不受下面筛选影响）+ 当前时段 + 账户余额
+        h('div', { className: 'dcb-cards dcb-cards-set' },
+          h(Card, {
+            label: tt('累计 Token'),
+            value: allStats ? fmtTokens(allStats.totalTokens) : '—',
+            hint: allStats
+              ? tt('命中 {hit} · 未命中 {miss} · 输出 {out}', { hit: fmtTokens(allStats.totalHit), miss: fmtTokens(allStats.totalMiss), out: fmtTokens(allStats.totalOut) })
+              : tt('全部历史 · 含所有工作区'),
+          }),
+          h(Card, {
+            label: tt('估算金额'),
+            value: allStats ? '≈¥' + fmtYuan(allStats.totalCost) : '—',
+            hint: (accountPrice.known ? accountPrice.id : tt('{id}（按 flash 估算）', { id: accountPrice.id })) + tt(' · 全部历史逐轮计价'),
+          }),
+          h(Card, {
+            label: tt('当前时段'),
+            value: tt(nowPeak ? '高峰' : '空闲'),
+            hint: tt('北京时间 工作日 09:00-12:00 / 14:00-18:00'),
+          }),
+          h('div', { className: 'dcb-card' },
+            h('div', { className: 'dcb-card-label' }, tt('账户余额')),
+            h('div', { className: balanceClass }, balanceValue),
+            h('div', { className: 'dcb-card-hint' }, balanceHint))),
+        h('div', { className: 'dcb-set-controls' },
+          h('div', { className: 'dcb-field' },
+            h('label', { className: 'dcb-field-label', htmlFor: 'dcb-range-select' }, tt('时间范围')),
+            h('select', {
+              id: 'dcb-range-select',
+              className: 'dcb-select',
+              value: calFrom || calTo ? 'custom' : rangeKey,
+              onChange: function (event) {
+                setRangeKey(event.target.value)
+                setCalFrom('')
+                setCalTo('')
+              },
+            },
+              rangeOptions.map(function (opt) { return h('option', { key: opt.id, value: opt.id }, opt.label) }),
+              (calFrom || calTo) ? h('option', { key: 'custom', value: 'custom' }, tt('自定义区间')) : null)),
+          h('div', { className: 'dcb-field' },
+            h('label', { className: 'dcb-field-label', htmlFor: 'dcb-workspace-select' }, tt('工作区')),
+            h('select', {
+              id: 'dcb-workspace-select',
+              className: 'dcb-select',
+              value: wid,
+              onChange: function (event) { setWid(event.target.value) },
+            },
+              h('option', { key: 'all', value: '' }, tt('全部工作区')),
+              index.list.map(function (it) { return h('option', { key: it.id, value: it.id }, it.title) }),
+              h('option', { key: 'none', value: UNKNOWN_WORKSPACE }, tt('未归属工作区')))),
+          h('div', { className: 'dcb-field' },
+            h('span', { className: 'dcb-field-label' }, tt('日历选择（覆盖时间范围）')),
+            h('div', { className: 'dcb-range' },
+              h('input', {
+                type: 'date',
+                className: 'dcb-date',
+                value: calFrom,
+                onChange: function (event) { setCalFrom(event.target.value) },
+              }),
+              h('span', { className: 'dcb-range-sep' }, '～'),
+              h('input', {
+                type: 'date',
+                className: 'dcb-date',
+                value: calTo,
+                onChange: function (event) { setCalTo(event.target.value) },
+              }),
+              (calFrom || calTo)
+                ? h('button', { type: 'button', className: 'dcb-btn', onClick: function () { setCalFrom(''); setCalTo('') } }, tt('清除'))
+                : null)),
+          h('div', { className: 'dcb-field' },
+            h('span', { className: 'dcb-field-label' }, tt('数据')),
+            h('button', { type: 'button', className: 'dcb-btn', onClick: function () { setReloadTick(function (v) { return v + 1 }) } }, tt('刷新')))),
+        h('div', { className: 'dcb-set-body' },
+          h('div', { className: 'dcb-hist-legend' },
+            h('span', { className: 'dcb-tog dcb-tog-cost is-on' }, h('i', null), tt('估算金额（右轴）')),
+            h('button', {
+              type: 'button',
+              className: showTokens ? 'dcb-tog is-on' : 'dcb-tog',
+              onClick: function () { setShowTokens(function (v) { return v === true ? false : true }) },
+            }, h('i', null), tt('Token（左轴，默认隐藏）'))),
+          hasData
+            ? h(HistoryChart, { points: points, showTokens: showTokens })
+            : h('div', { className: 'dcb-hist-empty' }, tt('该范围内暂无消耗记录'))),
+        hasData
+          ? h('div', { className: 'dcb-sum' },
+              h('span', null, tt('总消耗 '), h('b', null, '≈¥' + fmtYuan(stats.totalCost))),
+              h('span', null, tt('总 Token '), h('b', null, fmtTokens(stats.totalTokens))),
+              h('span', null, tt('记录 '), h('b', null, String(stats.count)), tt(' 条')),
+              h('span', null, tt('峰时 '), h('b', null, '≈¥' + fmtYuan(stats.peakCost))),
+              h('span', null, tt('谷时 '), h('b', null, '≈¥' + fmtYuan(stats.valleyCost))),
+              h('span', null, tt('粒度 '), h('b', null, tt(stats.granularity === 'month' ? '按月' : (stats.granularity === 'hour' ? '按小时' : '按日')))))
+          : null,
+        h('div', { className: 'dcb-hist-aside' },
+          tt('数据源：本机逐轮记录（localStorage {prefix}<sessionId>:<turn>）；按北京时间聚合（今天与单日区间逐小时，多日逐日，近一年逐月）{worker}。金额按 DeepSeek 官方价估算（谷/峰 ×1/×2），仅供参考。', {
+            prefix: LS_PREFIX,
+            worker: stats && stats.via === 'worker' ? tt('；聚合已在 Web Worker 中完成') : '',
+          })))
+    }
+
+    /* ============ 与 dsh-plugin-personalization 联动：个性化页内新增「消耗弹窗」栏 ============ */
+    // 取官方 UI 组件（与个性化页其他选项同款外观）；取不到时退回普通元素。
+    let dcbPrimitives = null
+    try {
+      dcbPrimitives = require('@deepseek-ai/dsh-client-ui-primitives')
+    } catch (e) {
+      dcbPrimitives = null
+    }
+
+    function ModalPill(props) {
+      const Pill = dcbPrimitives && dcbPrimitives.Pill ? dcbPrimitives.Pill : null
+      if (typeof Pill === 'function') {
+        return h(Pill, { active: props.active, onClick: props.onClick }, props.children)
+      }
+      return h('button', {
+        type: 'button',
+        className: props.active ? 'dcb-tog is-on' : 'dcb-tog',
+        onClick: props.onClick,
+      }, props.children)
+    }
+
+    /** 注入到「个性化」页里的「消耗弹窗」栏目：排版沿用 pp-block / pp-field / pp-modes。 */
+    function ConsumptionModalSettings() {
+      const tick = React.useState(0)
+      const setTick = tick[1]
+      const fileRef = React.useRef(null)
+      React.useEffect(function () {
+        return store.subscribe(function () { setTick(function (v) { return v + 1 }) })
+      }, [])
+      // This block renders in its own React root outside the slot system, so it
+      // subscribes to the locale face itself (slot outlets do that for us).
+      React.useEffect(function () {
+        return subscribeLocale(function () { setTick(function (v) { return v + 1 }) })
+      }, [])
+      const cfg = store.state.modalStyle
+
+      function patch(next) {
+        store.setModalStyle(next)
+      }
+
+      /** 清除图片：库里的图片、数据、URL 输入、文件选择框一起清（否则选同一个文件不会再触发 change）。 */
+      function clearImage() {
+        const input = fileRef.current
+        if (input) {
+          try {
+            input.value = ''
+          } catch (e) { /* ignore */ }
+        }
+        store.clearModalImage()
+      }
+
+      /** 选图：Blob 直接进 IndexedDB，不做 base64、不设大小上限。 */
+      function onPickFile(event) {
+        const input = event && event.target ? event.target : null
+        const file = input && input.files && input.files.length > 0 ? input.files[0] : null
+        if (!file) return
+        store.setModalImage(file).then(function () {
+          const el = fileRef.current
+          if (el) {
+            try {
+              el.value = ''
+            } catch (e) { /* ignore */ }
+          }
+        })
+      }
+
+      const rows = []
+      rows.push(h('div', { className: 'pp-field', key: 'mode' },
+        h('div', { className: 'pp-fieldLabelWrap' },
+          h('span', { className: 'pp-fieldLabel' }, tt('背景')),
+          h('span', { className: 'pp-fieldHint' }, tt('点击对话里的 ⛽ 胶囊弹出的消耗面板'))),
+        h('div', { className: 'pp-fieldControl' },
+          h('div', { className: 'pp-modes', role: 'radiogroup', 'aria-label': tt('消耗弹窗背景') },
+            MODAL_MODES.map(function (mode) {
+              return h(ModalPill, {
+                key: mode.value,
+                active: cfg.mode === mode.value,
+                onClick: function () { patch({ mode: mode.value }) },
+              }, tt(mode.label))
+            })))))
+
+      if (cfg.mode === 'solid') {
+        rows.push(h('div', { className: 'pp-field', key: 'solid' },
+          h('div', { className: 'pp-fieldLabelWrap' },
+            h('span', { className: 'pp-fieldLabel' }, tt('纯色')),
+            h('span', { className: 'pp-fieldHint' }, tt('弹窗底色；文字颜色会按明暗自动切换'))),
+          h('div', { className: 'pp-fieldControl' },
+            h('div', { className: 'pp-colorRow' },
+              h('input', {
+                type: 'color',
+                className: 'pp-colorSwatch',
+                value: cfg.color,
+                onChange: function (event) { patch({ color: event.target.value }) },
+              }),
+              h('input', {
+                type: 'text',
+                className: 'dcb-date',
+                style: { minWidth: '96px' },
+                value: cfg.color,
+                onChange: function (event) { patch({ color: event.target.value }) },
+              })))))
+      }
+
+      if (cfg.mode === 'image') {
+        // 只要「有 key」或「内存里已有 blob: 地址」都算已选：避免持久化失败时界面谎报未设置。
+        const localImage = (typeof cfg.imageKey === 'string' && cfg.imageKey !== '')
+          || String(store.state.modalImageUrl).indexOf('blob:') === 0
+        const urlImage = typeof cfg.image === 'string' && cfg.image !== ''
+        const hasImage = localImage || urlImage
+        const previewSrc = localImage ? store.state.modalImageUrl : cfg.image
+        const status = store.state.modalImageStatus
+        let statusText = ''
+        if (status === 'saving') statusText = tt('正在保存…')
+        else if (status === 'saved') statusText = tt('已保存到本机')
+        else if (typeof status === 'string' && status.indexOf('error:') === 0) statusText = status
+        else if (localImage && !store.state.modalImageUrl) statusText = tt('取回失败，请重新选择')
+        const summary = localImage
+          ? (statusText ? tt('当前：本地图片（{status}）', { status: statusText }) : tt('当前：本地图片（已保存到本机）'))
+          : (urlImage ? tt('当前：图片 URL') : tt('未设置图片（此时按默认背景显示）'))
+        rows.push(h('div', { className: 'pp-field', key: 'image' },
+          h('div', { className: 'pp-fieldLabelWrap' },
+            h('span', { className: 'pp-fieldLabel' }, tt('图片')),
+            h('span', { className: 'pp-fieldHint' }, summary + tt('；可选 URL 或本地图片，不限大小'))),
+          h('div', { className: 'pp-fieldControl' },
+            h('div', { className: 'pp-urlRow' },
+              // 原生 file 输入隐藏起来：它在保存后必然显示"未选择文件"，容易误判成没存上。
+              h('input', {
+                ref: fileRef,
+                type: 'file',
+                accept: 'image/*',
+                style: { display: 'none' },
+                onChange: onPickFile,
+              }),
+              h('button', {
+                type: 'button',
+                className: 'pp-blockReset',
+                onClick: function () {
+                  const el = fileRef.current
+                  if (el && typeof el.click === 'function') el.click()
+                },
+              }, hasImage ? tt('更换图片…') : tt('选择图片…')),
+              h('button', {
+                type: 'button',
+                className: 'pp-blockReset',
+                disabled: !hasImage,
+                onClick: clearImage,
+              }, tt('清除')),
+              previewSrc
+                ? h('img', { className: 'pp-thumb', src: previewSrc, alt: '' })
+                : null,
+              h('input', {
+                type: 'text',
+                className: 'dcb-date',
+                style: { flex: '1 1 160px', minWidth: '0' },
+                placeholder: localImage ? tt('已使用本地图片，输入 URL 可替换') : 'https://…',
+                value: localImage ? '' : cfg.image,
+                onChange: function (event) { patch({ image: event.target.value, imageKey: '' }) },
+              })))))
+        rows.push(h('div', { className: 'pp-field', key: 'opacity' },
+          h('div', { className: 'pp-fieldLabelWrap' },
+            h('span', { className: 'pp-fieldLabel' }, tt('不透明度')),
+            h('span', { className: 'pp-fieldHint' }, tt('背景图片自身的透明度（0% 完全不可见，100% 完整显示）'))),
+          h('div', { className: 'pp-fieldControl' },
+            h('div', { className: 'pp-opacityRow' },
+              h('input', {
+                className: 'pp-range',
+                type: 'range',
+                min: '0',
+                max: '100',
+                step: '1',
+                'aria-label': tt('不透明度'),
+                value: String(typeof cfg.opacity === 'number' ? cfg.opacity : DEFAULT_MODAL_STYLE.opacity),
+                onChange: function (event) { patch({ opacity: Number(event.target.value) }) },
+              }),
+              h('span', { className: 'pp-opacityValue' },
+                String(typeof cfg.opacity === 'number' ? cfg.opacity : DEFAULT_MODAL_STYLE.opacity) + '%')))))
+      }
+
+      // 毛玻璃开关 + 强度：自定义背景 / 纯色 都能叠加（「毛玻璃」选项本身已隐含开启）。
+      if (cfg.mode === 'image' || cfg.mode === 'solid') {
+        rows.push(h('div', { className: 'pp-field', key: 'glass' },
+          h('div', { className: 'pp-fieldLabelWrap' },
+            h('span', { className: 'pp-fieldLabel' }, tt('毛玻璃')),
+            h('span', { className: 'pp-fieldHint' },
+              tt(cfg.mode === 'image' ? '把背景图片磨砂化（对图片做真模糊）' : '底色半透明并模糊背后的页面'))),
+          h('div', { className: 'pp-fieldControl' },
+            h('button', {
+              type: 'button',
+              role: 'switch',
+              'aria-checked': cfg.glass === true ? 'true' : 'false',
+              className: cfg.glass === true ? 'pp-switch pp-switchOn' : 'pp-switch',
+              onClick: function () { patch({ glass: cfg.glass !== true }) },
+            }))))
+      }
+
+      // 毛玻璃强度：只要当前处于玻璃态（选了「毛玻璃」或打开了开关）就露出滑杆。
+      if (cfg.mode === 'glass' || cfg.glass === true) {
+        rows.push(h('div', { className: 'pp-field', key: 'blur' },
+          h('div', { className: 'pp-fieldLabelWrap' },
+            h('span', { className: 'pp-fieldLabel' }, tt('毛玻璃强度')),
+            h('span', { className: 'pp-fieldHint' }, tt('模糊半径（0–48px）'))),
+          h('div', { className: 'pp-fieldControl' },
+            h('div', { className: 'pp-opacityRow' },
+              h('input', {
+                type: 'range',
+                min: '0',
+                max: '48',
+                step: '1',
+                value: String(typeof cfg.blur === 'number' ? cfg.blur : DEFAULT_MODAL_STYLE.blur),
+                onChange: function (event) { patch({ blur: Number(event.target.value) }) },
+              }),
+              h('span', { className: 'pp-fieldHint' }, String(typeof cfg.blur === 'number' ? cfg.blur : DEFAULT_MODAL_STYLE.blur) + 'px')))))
+      }
+
+      return h('section', { className: 'pp-block', 'data-section': 'dcb-consumption', 'data-dcb-build': BUILD_TAG },
+        h('header', { className: 'pp-blockHead' },
+          h('div', { className: 'pp-blockHeadMain' },
+            h('h3', { className: 'pp-blockTitle' }, tt('消耗弹窗')),
+            h('p', { className: 'pp-blockDesc' }, tt('消耗徽章弹层的背景样式；不影响对话区与侧边栏背景。{tag}', { tag: BUILD_TAG }))),
+          h('button', {
+            type: 'button',
+            className: 'pp-blockReset',
+            onClick: function () {
+              store.setModalStyle(DEFAULT_MODAL_STYLE)
+              const input = fileRef.current
+              if (input) {
+                try {
+                  input.value = ''
+                } catch (e) { /* ignore */ }
+              }
+            },
+          }, tt('重置本栏'))),
+        h('div', { className: 'pp-blockBody' }, rows))
+    }
+
+    /**
+     * 把「消耗弹窗」栏注入个性化页。个性化插件没有暴露子插槽，因此：
+     *  - 只在页面上真的出现 `section.pp-block`（即个性化页已挂载）时才注入，等价于“同时安装”的运行时探测；
+     *  - 自建容器 + 自建 React root，个性化页重渲染把我的节点摘掉时，把**同一个容器**重新挂回去（状态不丢）。
+     */
+    function startPersonalizationBridge() {
+      if (typeof document === 'undefined' || typeof MutationObserver !== 'function') {
+        return function () {}
+      }
+      let container = null
+      let root = null
+      let scheduled = false
+      let stopped = false
+      let announced = false
+      let reactDom = null
+      try {
+        reactDom = require('react-dom/client')
+      } catch (e) {
+        reactDom = null
+      }
+
+      function ensureContainer() {
+        if (container) return container
+        container = document.createElement('div')
+        container.setAttribute('data-dcb-personalization', '1')
+        if (reactDom !== null && typeof reactDom.createRoot === 'function') {
+          root = reactDom.createRoot(container)
+          root.render(h(ConsumptionModalSettings, null))
+        } else {
+          container.textContent = tt('消耗弹窗设置需要 react-dom，当前环境不可用。')
+        }
+        return container
+      }
+
+      function attach() {
+        if (stopped) return
+        // 快路径：已经挂在文档里就不用再找页面（避免每次 DOM 变动都查一次 selector）。
+        if (container && container.isConnected) return
+        const anchor = document.querySelector('section.pp-block')
+        if (!anchor || !anchor.parentElement) return
+        const page = anchor.parentElement
+        const node = ensureContainer()
+        if (node.parentNode !== page) page.appendChild(node)
+        if (!announced) {
+          announced = true
+          console.log('[consumption-badge] dsh-plugin-personalization detected: injected the usage popup section into its settings page')
+        }
+      }
+
+      function schedule() {
+        if (stopped || scheduled) return
+        scheduled = true
+        setTimeout(function () {
+          scheduled = false
+          try {
+            attach()
+          } catch (e) { /* 注入失败不影响主功能 */ }
+        }, 0)
+      }
+
+      const observer = new MutationObserver(schedule)
+      observer.observe(document.body, { childList: true, subtree: true })
+      schedule()
+
+      return function () {
+        stopped = true
+        try {
+          observer.disconnect()
+        } catch (e) { /* 已断开 */ }
+        if (root !== null && typeof root.unmount === 'function') {
+          try {
+            root.unmount()
+          } catch (e) { /* 已卸载 */ }
+        }
+        if (container && container.parentNode) {
+          try {
+            container.parentNode.removeChild(container)
+          } catch (e) { /* 已移除 */ }
+        }
+        container = null
+        root = null
+      }
+    }
+
+    /* ============== 更新提示弹窗（仿 dsh-plugin-personalization 的 UpdateNotice） ============== */
+    /**
+     * 右下角浮层弹窗：只在「本地版本 < 最新版本」且未被忽略、未在本次会话点过「稍后提醒」时出现。
+     * 结构照抄个性化插件的提示条（标题 / 版本行 / 命令框 / 复制·忽略·稍后提醒），但不依赖它的样式表，
+     * 自带 dcb-* 样式，因此没有装个性化插件也能显示。
+     */
+    function UpdatePopup() {
+      const state = store.state
+      const tick = React.useState(0)
+      const setTick = tick[1]
+      const copiedState = React.useState(false)
+      const copied = copiedState[0]
+      const setCopied = copiedState[1]
+      React.useEffect(function () {
+        return store.subscribe(function () { setTick(function (v) { return v + 1 }) })
+      }, [])
+      React.useEffect(function () {
+        if (copied !== true) return undefined
+        return everyTick(2000, function () { setCopied(false) })
+      }, [copied])
+
+      const info = state.updateInfo
+      const visible = state.updateState === 'ready'
+        && state.updateDismissed !== true
+        && !!info
+        && info.hasUpdate === true
+      if (!visible) return null
+
+      function copyCommand() {
+        const clipboard = typeof navigator !== 'undefined' && navigator !== null ? navigator.clipboard : null
+        if (clipboard === null || clipboard === undefined || typeof clipboard.writeText !== 'function') {
+          console.warn('[consumption-badge] clipboard unavailable, copy the command manually')
+          return
+        }
+        try {
+          const pending = clipboard.writeText(UPDATE_COMMAND)
+          if (pending && typeof pending.then === 'function') {
+            pending.then(function () { setCopied(true) }, function () {
+              console.warn('[consumption-badge] clipboard write failed')
+            })
+            return
+          }
+          setCopied(true)
+        } catch (e) {
+          console.warn('[consumption-badge] clipboard write threw')
+        }
+      }
+
+      return h('div', { className: 'dcb-notice', role: 'status', 'aria-live': 'polite' },
+        h('div', { className: 'dcb-notice-head' },
+          h('span', { className: 'dcb-notice-title' }, tt('消耗徽章有新版本')),
+          h('span', { className: 'dcb-notice-versions' },
+            tt('当前 v{current} → 最新 v{latest}', { current: String(info.currentVersion), latest: String(info.latestVersion) })),
+          h('button', {
+            type: 'button',
+            className: 'dcb-notice-x',
+            title: tt('稍后提醒'),
+            onClick: function () { store.dismissUpdate('later') },
+          }, '✕')),
+        h('div', { className: 'dcb-notice-cmd', title: UPDATE_COMMAND }, UPDATE_COMMAND),
+        h('div', { className: 'dcb-notice-actions' },
+          h('button', { type: 'button', className: 'dcb-btn dcb-btn-primary', onClick: copyCommand },
+            copied ? tt('已复制') : tt('复制更新命令')),
+          h('button', { type: 'button', className: 'dcb-btn', onClick: function () { store.dismissUpdate('ignore') } }, tt('忽略此版本')),
+          h('button', { type: 'button', className: 'dcb-btn', onClick: function () { store.dismissUpdate('later') } }, tt('稍后提醒')),
+          h('span', { className: 'dcb-notice-hint' }, tt('更新后需重启 dsh 进程'))),
+        h('div', { className: 'dcb-notice-foot' },
+          tt('版本来自 npm registry（24h 缓存）；「忽略此版本」会记住，直到出现更高版本。')))
+    }
+
+    /* styles + registration */
     const CSS = `
 .dcb-pill{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);font-size:11px;line-height:1;font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}
 .dcb-pill:hover{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary)}
@@ -672,8 +2623,25 @@ window.__ModuleLoader__.load({
 .dcb-tag{font-weight:600}
 .dcb-tag.is-peak{color:var(--dsw-alias-state-error-primary)}
 .dcb-tag.is-valley{color:var(--dsw-alias-state-success-primary)}
-.dcb-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:rgba(12,14,18,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:dcb-fade .16s ease-out;outline:none}
-.dcb-modal{width:min(780px,94vw);max-height:88vh;overflow:auto;border-radius:16px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-overlay);color:var(--dsw-alias-label-primary);box-shadow:0 24px 60px rgba(0,0,0,.3);padding:18px 20px 14px;animation:dcb-pop .18s ease-out}
+/* 遮罩层只做压暗/淡纱，永远不做毛玻璃（周围不模糊）。注意：不写任何 backdrop-filter。 */
+.dcb-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:color-mix(in srgb,var(--dsw-alias-bg-base) 46%,transparent);animation:dcb-fade .16s ease-out;outline:none}
+.dcb-modal{width:min(780px,94vw);max-height:88vh;overflow:auto;border-radius:16px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-overlay);color:var(--dsw-alias-label-primary);box-shadow:0 24px 60px rgba(0,0,0,.3);padding:18px 20px 14px;animation:dcb-pop .18s ease-out;position:relative;isolation:isolate}
+/* 毛玻璃：不压暗，纯 backdrop-filter（与 dsh-plugin-personalization 的设置面板同款做法） */
+.dcb-modal.is-glass{background:color-mix(in srgb,var(--dsw-alias-bg-overlay) 18%,transparent);-webkit-backdrop-filter:blur(var(--dcb-glass-blur,22px)) saturate(1.6);backdrop-filter:blur(var(--dcb-glass-blur,22px)) saturate(1.6);border-color:color-mix(in srgb,var(--dsw-alias-border-l2) 70%,transparent);box-shadow:0 24px 60px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.12)}
+/* 纯色：底色只给变量，透明度由是否毛玻璃决定 */
+.dcb-modal.has-solid{background:var(--dcb-solid,#17181c)}
+.dcb-modal.has-solid.is-glass{background:color-mix(in srgb,var(--dcb-solid,#17181c) 52%,transparent);-webkit-backdrop-filter:blur(calc(var(--dcb-glass-blur,22px) * 0.8)) saturate(1.3);backdrop-filter:blur(calc(var(--dcb-glass-blur,22px) * 0.8)) saturate(1.3)}
+/* 自定义背景：图片放在伪元素上，opacity 作用在图片自身（真半透明，不与底色混成发白）；
+   底下垫主题面板色，所以不透明度越低越淡，而不是越暗；开毛玻璃时对图片本身做模糊。 */
+.dcb-modal.has-image{background:var(--dsw-alias-bg-overlay)}
+.dcb-modal.has-image::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:var(--dcb-bg-image);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:var(--dcb-bg-opacity,.85)}
+.dcb-modal.has-image.is-glass{background:color-mix(in srgb,var(--dsw-alias-bg-overlay) 18%,transparent)}
+.dcb-modal.has-image.is-glass::before{-webkit-filter:blur(var(--dcb-glass-blur,22px)) saturate(1.15);filter:blur(var(--dcb-glass-blur,22px)) saturate(1.15);transform:scale(1.06)}
+@supports not (background: color-mix(in srgb, red 50%, transparent)){
+.dcb-overlay{background:rgba(18,20,26,.42)}
+.dcb-modal.is-glass{background:rgba(127,127,127,.16)}
+.dcb-modal.has-solid.is-glass{background:rgba(127,127,127,.18)}
+}
 .dcb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
 .dcb-head-title{font-size:14px;font-weight:600;letter-spacing:.2px}
 .dcb-head-actions{display:flex;gap:8px}
@@ -712,6 +2680,47 @@ window.__ModuleLoader__.load({
 .dcb-foot-warn{color:var(--dsw-alias-state-error-primary)}
 @keyframes dcb-fade{from{opacity:0}to{opacity:1}}
 @keyframes dcb-pop{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
+/* ---- settings section: history page ---- */
+.dcb-set{padding:2px 2px 18px;color:var(--dsw-alias-label-primary)}
+.dcb-set-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
+.dcb-set-title{font-size:15px;font-weight:600;letter-spacing:.2px}
+.dcb-set-note{font-size:10.5px;color:var(--dsw-alias-label-secondary);opacity:.9;white-space:nowrap}
+.dcb-set-controls{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin-bottom:14px}
+.dcb-field{display:flex;flex-direction:column;gap:5px;min-width:0}
+.dcb-field-label{font-size:11px;color:var(--dsw-alias-label-secondary)}
+.dcb-select,.dcb-date{height:28px;padding:0 8px;border-radius:8px;border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-size:12px;min-width:0}
+.dcb-select{min-width:132px;cursor:pointer}
+.dcb-date{min-width:126px}
+.dcb-select:focus,.dcb-date:focus{outline:none;border-color:var(--dsw-alias-brand-primary)}
+.dcb-range{display:flex;align-items:center;gap:6px}
+.dcb-range-sep{color:var(--dsw-alias-label-secondary);font-size:12px}
+.dcb-set-body{border:1px solid var(--dsw-alias-border-l1);border-radius:12px;background:var(--dsw-alias-bg-layer-1);padding:10px 12px 8px}
+.dcb-hist-svg{display:block;width:100%;height:280px}
+.dcb-hist-legend{display:flex;gap:14px;font-size:11px;color:var(--dsw-alias-label-secondary);margin-bottom:6px;flex-wrap:wrap}
+.dcb-tog{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);font-size:11px;cursor:pointer;line-height:16px}
+.dcb-tog.is-on{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l2)}
+.dcb-tog i{display:inline-block;width:12px;height:3px;border-radius:2px;background:currentColor;opacity:.55}
+.dcb-tog.is-on i{opacity:1;background:var(--dsw-alias-brand-primary)}
+.dcb-tog.dcb-tog-cost.is-on i{background:var(--dsw-alias-state-success-primary)}
+.dcb-sum{margin-top:12px;display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--dsw-alias-label-secondary)}
+.dcb-sum b{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-weight:600}
+.dcb-cards-set{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:14px}
+/* ---- 更新提示弹窗（右下角浮层；结构对齐个性化插件的 pp-notice 提示条）---- */
+.dcb-notice{position:fixed;right:18px;bottom:18px;z-index:70;width:min(420px,calc(100vw - 32px));display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:var(--pp-radius-lg,12px);border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-overlay);color:var(--dsw-alias-label-primary);box-shadow:0 18px 44px rgba(0,0,0,.24);pointer-events:auto;animation:dcb-pop .18s ease-out}
+.dcb-notice-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
+.dcb-notice-title{font-size:14px;line-height:22px;font-weight:600}
+.dcb-notice-versions{font-size:12px;line-height:20px;color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums}
+.dcb-notice-x{margin-left:auto;flex:none;width:22px;height:22px;padding:0;border:none;background:transparent;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1;cursor:pointer;border-radius:6px}
+.dcb-notice-x:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2)}
+.dcb-notice-cmd{min-width:0;padding:8px 10px;border-radius:8px;border:1px dashed var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11.5px;line-height:18px;color:var(--dsw-alias-label-secondary);overflow-wrap:anywhere}
+.dcb-notice-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
+.dcb-notice-hint{flex:1 1 160px;min-width:0;font-size:11px;line-height:18px;color:var(--dsw-alias-label-secondary)}
+.dcb-notice-foot{font-size:11px;line-height:17px;color:var(--dsw-alias-label-secondary);opacity:.85}
+.dcb-btn-primary{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-brand-primary)}
+.dcb-set .dcb-card{padding:9px 11px}
+.dcb-set .dcb-card-value{font-size:17px}
+.dcb-hist-empty{padding:56px 0;text-align:center;font-size:12.5px;color:var(--dsw-alias-label-secondary)}
+.dcb-hist-aside{font-size:10.5px;color:var(--dsw-alias-label-secondary);margin-top:6px;opacity:.85}
 `
 
     /** 样式标签：覆盖式写入（外壳热重挂插件时旧标签可能还在），随插件卸载摘除。 */
@@ -736,9 +2745,15 @@ window.__ModuleLoader__.load({
 
     exports.apply = function apply(ctx) {
       insertCss(ctx)
+      // Bind the shell locale first: every render below reads through tt().
+      appCtx = ctx
+      attachLocale(ctx)
+      // Slot labels are thunks so the settings nav / action row re-read the copy
+      // after a language switch (the slot system resolves labels at read time).
+      const labelThunk = function () { return tt('消耗') }
       ctx.slots.inject('conversation.chat.assistant-actions', function () {
         const dispose = ctx.slots.register(
-          { name: 'conversation.chat.assistant-actions', id: 'consumption', order: 20, label: '消耗' },
+          { name: 'conversation.chat.assistant-actions', id: 'consumption', order: 20, label: labelThunk },
           function (props) { return h(ConsumptionBadge, props) },
         )
         return function () { dispose() }
@@ -750,6 +2765,30 @@ window.__ModuleLoader__.load({
         )
         return function () { dispose() }
       })
+      // 设置页整页：settings.section（不是 settings.plugin.item 的卡片位）。
+      ctx.slots.inject('settings.section', function () {
+        const dispose = ctx.slots.register(
+          { name: 'settings.section', id: 'balance-dsh-consumption', order: 26, label: labelThunk },
+          function (props) { return h(ConsumptionSettings, props) },
+        )
+        return function () { dispose() }
+      })
+      // 与 dsh-plugin-personalization 联动：在它的设置页注入「消耗弹窗」背景控制。
+      ctx.effect(function () { return startPersonalizationBridge() })
+      // 把已存进 IndexedDB 的背景图取回来（生成新的 blob: 地址）。
+      store.hydrateModalImage()
+      // 更新提示弹窗：启动后延迟异步检查，绝不阻塞首屏；显示在右下角浮层，不遮挡任何控件。
+      ctx.slots.inject('shell.overlay', function () {
+        const dispose = ctx.slots.register(
+          { name: 'shell.overlay', id: 'consumption-update-notice', order: 50 },
+          function () { return h(UpdatePopup, null) },
+        )
+        return function () { dispose() }
+      })
+      ctx.effect(function () {
+        const timer = setTimeout(function () { store.checkUpdates() }, 2500)
+        return function () { clearTimeout(timer) }
+      })
     }
 
     return module.exports