@cassius0924/dsh-usage-dashboard 0.5.0 → 0.6.0

package/README.md

@@ -4,7 +4,7 @@
 [![license](https://img.shields.io/npm/l/@cassius0924/dsh-usage-dashboard?color=blue)](./LICENSE)
 
 在 [DSH](https://github.com/deepseek-ai)（DeepSeek Harness）的 Web GUI 里，随时看得见 DeepSeek 的钱花在哪：
-**余额还能撑几天、今天花了多少、哪个模型最贵、缓存替你省了多少，以及 2026-08-17 峰谷定价之后账单会变成什么样。**
+**余额还能撑几天、今天花了多少、哪个模型最贵、缓存替你省了多少、钱里有多少来自图片**，以及峰谷定价生效后把任务挪到闲时能省多少。
 
 ![dsh-usage-dashboard](docs/hero.png)
 
@@ -23,7 +23,8 @@
 | 今天花了多少？这个月呢？ | 只有「累计」，没有时间感 |
 | 钱花在哪个模型上？ | 不知道 |
 | 缓存到底帮我省了多少？ | 完全看不到 |
-| 8-17 涨价后我的账单会变成多少？ | 只能自己算 |
+| 钱里有多少来自图片？ | 多模态模型上线后更是看不见 |
+| 高峰时段多付了多少？ | 只能自己算 |
 
 这个插件把这些问题逐个翻译成一眼能看懂的数字。**费用全部为估算**，算法与单价公开可查（见[费用是怎么算的](#费用是怎么算的)）。
 
@@ -59,13 +60,13 @@
 
 展开**计价说明**能看到费用估算实际套用的单价表——估算不该是个黑箱。
 
-### 涨价之后会变成多少
+### 高峰时段多付了多少
 
 <img src="docs/peak.png" width="860" alt="高峰 / 闲时分布">
 
 DeepSeek 从 2026-08-17 00:00 起改峰谷定价，高峰（北京时间 09:00–12:00、14:00–18:00）价格是闲时的两倍。
 
-这张卡告诉你用量落在峰谷两侧的比例，并且**在新价生效前就把账单重算一遍**：上图这份用量现价 ¥14.64，新价下是 ¥45.84（+213%）。生效之后，这里会换成「把高峰用量挪到闲时能省多少」。
+这张卡告诉你用量落在峰谷两侧的比例，以及**如果高峰用量都挪到闲时能省多少**——批量、可延后的任务放到闲时跑，同样的 token 只要一半的钱。
 
 ### 缓存替你省了多少
 
@@ -75,6 +76,16 @@ DeepSeek 从 2026-08-17 00:00 起改峰谷定价，高峰（北京时间 09:00
 
 命中率掉到 60% 以下时，文案会换成怎么把它救回来的建议。
 
+### 钱里有多少来自图片
+
+> 截图待补拍：当前机器没有真实图片用量时，卡片显示的是空态，以下先以文字说明功能。
+
+`deepseek-v4-flash-vision-exp` 上线后，图片按尺寸折算成 token 与文本一并计费，但「看了一堆截图」和「纯文本」在账单里长得一模一样。
+
+这张卡重放会话日志时顺手数出图片：用户消息里的附件和 tool result 里的截图都会统计（不用读附件本体，日志里就有宽高）。每组数字给出**图片张数、按官方换算规则估算的 token 与费用，以及占窗口输入 / 费用的比例**，旁边是每天图片数的趋势和「图片最多的会话」排行——一个不停刷截图的循环会话，在这里一眼就能认出来。
+
+图片归属到随后一次模型调用，按该调用的时段与模型单价估算；实际 token 数以接口返回的用量为准。
+
 ### 钱花在哪个模型上
 
 <img src="docs/models.png" width="860" alt="模型成本排行">
@@ -129,23 +140,30 @@ dsh plugin --profile web add ./path/to/dsh-usage-dashboard
 
 装好后打开 GUI，**进入任意一个会话**（「额度」tab 挂在 `conversation.view` 上，New Session 首页没有 tab 栏），顶部就能看到 `Chat / Trajectory / 额度`。
 
+> 兼容性：同时支持两代宿主接口——旧版 `readFrom(id, 0)` 与新版 handle 化 `open(id, 'read')` / `read` / `close`。
+> 宿主升级到移除 `readFrom` 的版本后，插件无需更换版本，会话日志照常重放。
+
 ## 费用是怎么算的
 
 费用是**估算**，不是账单。规则都在 [`src/pricing.ts`](src/pricing.ts) 一个文件里：
 
-- 逐条用量记录按「**模型** + **是否落在高峰时段**」计价，而不是全局一套价。
-- 2026-08-17 00:00（北京时间）之前的记录按旧的固定价；之后按峰谷价，闲时为高峰的一半。
+- 逐条用量记录按「**模型** + **是否落在高峰时段** + **当时的价目表**」计价，而不是全局一套价。
+- 2026-08-17 00:00（北京时间）之前按旧的固定价；之后按峰谷价，闲时为高峰的一半。
+- 2026-09-10 12:00 起 Flash 系列降价（V4.1-Flash），高峰时段同时收紧为**周一至周五**。
+- 2026-09-14 12:00 起 `deepseek-v4-pro` 的请求由 V4.1-Flash 承接，按 Flash 价计费。
 - 高峰时段按**北京时间**判定，不随机器时区漂移。
 - 未识别的模型按 `deepseek-v4-pro`（较贵的一侧）计价。
 
-单价（CNY / 百万 tokens）：
+单价（CNY / 百万 tokens，与官方价目表的两档一致）：
 
 | 模型 | 时段 | 输入·缓存命中 | 输入·未命中 | 输出 |
 |---|---|---|---|---|
-| deepseek-v4-pro | 08-17 前固定 | 0.025 | 3 | 6 |
+| deepseek-flash | 高峰 / 闲时 | 0.04 / 0.02 | 2 / 1 | 8 / 4 |
 | deepseek-v4-pro | 高峰 / 闲时 | 0.3 / 0.15 | 9 / 4.5 | 27 / 13.5 |
-| deepseek-v4-flash | 08-17 前固定 | 0.02 | 1 | 2 |
-| deepseek-v4-flash | 高峰 / 闲时 | 0.1 / 0.05 | 3 / 1.5 | 9 / 4.5 |
+
+`deepseek-v4-flash`、`deepseek-v4-flash-vision-exp` 是旧模型名，现由 `deepseek-flash` 承接、按 Flash 价计费；2026-09-14 12:00 起 `deepseek-v4-pro` 的请求也路由到 V4.1-Flash，按 Flash 价计费。历史各时期单价：08-17 前 pro 0.025/3/6、flash 0.02/1/2；08-17 – 09-10 12:00 的 flash 高峰 0.1/3/9、闲时 0.05/1.5/4.5。
+
+图片不另外收费，而是按尺寸折算成 token 与文本一并计费：官方规则是先把图片按比例缩放到 ~800×800（小于 ~384×384 的放大），token 与缩放后面积成正比、每张上限 384 tokens。多模态卡的估算就套这条规则。
 
 DeepSeek 再调价时，只改这张表。
 
@@ -192,6 +210,7 @@ src/
 
 - 用量数据来自**本机** DSH 会话日志，不含其它机器/账户的用量。
 - 费用是估算：不含 DeepSeek 侧的折扣、赠金消耗顺序等因素，以官方账单为准。
+- 图片 token 按官方换算规则估算，且把图片归属到随后一次模型调用；若缺少图片宽高或图片后没有成功的调用，则不纳入估算（无调用即无计费）。
 - 首次加载用量需要重放全部会话日志（本机实测约 5 秒），因此有 5 分钟的服务端记忆化；界面在此期间显示骨架屏。
 
 ## License

package/lib/client.js

@@ -131,7 +131,7 @@ async function getJson(path, cache) {
 var usageIsUsable = (res) => {
   if (res.ok !== true) return false;
   const data = res.data;
-  return data !== void 0 && Array.isArray(data.daily) && Array.isArray(data.hourly) && Array.isArray(data.heatmap) && Array.isArray(data.models) && Array.isArray(data.sessions) && typeof data.sessionCount === "number" && data.coverage?.scope === "local-dsh-session-logs" && typeof data.coverage.scannedSessions === "number" && typeof data.coverage.skippedRecords === "number" && Array.isArray(data.windows) && data.windows.length === USAGE_WINDOW_DAYS.length && USAGE_WINDOW_DAYS.every((days) => data.windows.some((window2) => window2.days === days)) && data.windows.every((window2) => Array.isArray(window2.daily) && Array.isArray(window2.hourly) && Array.isArray(window2.models) && Array.isArray(window2.sessions)) && data.totals !== void 0 && typeof data.totals.cacheSavings === "number" && data.summary?.today !== void 0 && Array.isArray(data.pricing?.tiers) && data.peakSplit?.peak !== void 0;
+  return data !== void 0 && Array.isArray(data.daily) && Array.isArray(data.hourly) && Array.isArray(data.heatmap) && Array.isArray(data.models) && Array.isArray(data.sessions) && typeof data.sessionCount === "number" && data.coverage?.scope === "local-dsh-session-logs" && typeof data.coverage.scannedSessions === "number" && typeof data.coverage.skippedRecords === "number" && Array.isArray(data.windows) && data.windows.length === USAGE_WINDOW_DAYS.length && USAGE_WINDOW_DAYS.every((days) => data.windows.some((window2) => window2.days === days)) && data.windows.every((window2) => Array.isArray(window2.daily) && Array.isArray(window2.hourly) && Array.isArray(window2.models) && Array.isArray(window2.sessions)) && data.vision !== void 0 && typeof data.vision.images === "number" && typeof data.vision.imageTokens === "number" && typeof data.vision.cost === "number" && Array.isArray(data.visionDaily) && Array.isArray(data.visionSessions) && data.windows.every((window2) => window2.vision !== void 0 && Array.isArray(window2.visionDaily) && Array.isArray(window2.visionSessions)) && data.totals !== void 0 && typeof data.totals.cacheSavings === "number" && data.summary?.today !== void 0 && Array.isArray(data.pricing?.tiers) && data.peakSplit?.peak !== void 0;
 };
 var balanceIsUsable = (res) => res.ok === true && Array.isArray(res.data?.balances);
 var balanceCache = createCache(BALANCE_TTL_MS, "dsh-usage-dashboard:balance", balanceIsUsable);
@@ -174,8 +174,8 @@ async function fetchUsage(force = false) {
     if (usageInflight !== null) return usageInflight;
   }
   const suffix = force ? "?refresh=1" : "";
-  const task = getJson(`/api/dsh-usage-dashboard/usage${suffix}`, force ? "no-store" : "default").then((res) => {
-    if (res.ok) {
+  const task = getJson(`/api/dsh-usage-dashboard/usage${suffix}`, "no-store").then((res) => {
+    if (res.ok && usageIsUsable(res)) {
       usageCache.put(res);
       for (const listener of [...usageListeners]) listener();
     }
@@ -332,16 +332,15 @@ var zh = {
   "pricing.currentOffPeak": "\u5F53\u524D \u95F2\u65F6",
   "pricing.model": "\u6A21\u578B",
   "pricing.period": "\u65F6\u6BB5",
-  "pricing.unitPrice": "\u5355\u4EF7",
   "pricing.inputCacheHit": "\u8F93\u5165\xB7\u7F13\u5B58\u547D\u4E2D",
   "pricing.inputCacheMiss": "\u8F93\u5165\xB7\u672A\u547D\u4E2D",
   "pricing.output": "\u8F93\u51FA",
   "pricing.peak": "\u9AD8\u5CF0",
-  "pricing.fixed": "\u56FA\u5B9A",
   "pricing.offPeak": "\u95F2\u65F6",
   "pricing.unit": "\u5355\u4F4D\uFF1A{currency} / \u767E\u4E07 tokens\u3002",
-  "pricing.splitNote": "\u9AD8\u5CF0\u65F6\u6BB5\u4E3A\u5317\u4EAC\u65F6\u95F4 {windows}\uFF0C\u5176\u4F59\u4E3A\u95F2\u65F6\uFF08\u4EF7\u683C\u51CF\u534A\uFF09\uFF1B{date} \u4E4B\u524D\u7684\u7528\u91CF\u4ECD\u6309\u65E7\u4EF7\u4F30\u7B97\u3002",
-  "pricing.switchNote": "{date} 00:00 \u8D77\u6539\u4E3A\u5CF0\u8C37\u5B9A\u4EF7\uFF08\u9AD8\u5CF0 {windows}\uFF0C\u95F2\u65F6\u4EF7\u683C\u51CF\u534A\uFF09\uFF0C\u5C4A\u65F6\u672C\u9875\u4F1A\u6309\u6BCF\u6761\u8BB0\u5F55\u7684\u65F6\u95F4\u81EA\u52A8\u5206\u6BB5\u8BA1\u4EF7\u3002",
+  "pricing.splitNote": "\u9AD8\u5CF0\u65F6\u6BB5\u4E3A\u5317\u4EAC\u65F6\u95F4 {windows}\uFF08\u5468\u4E00\u81F3\u5468\u4E94\uFF09\uFF0C\u5176\u4F59\u4E3A\u95F2\u65F6\uFF08\u4EF7\u683C\u51CF\u534A\uFF09\uFF1B\u6BCF\u6761\u7528\u91CF\u6309\u53D1\u751F\u65F6\u523B\u751F\u6548\u7684\u5B98\u65B9\u4EF7\u683C\u4F30\u7B97\u3002",
+  "pricing.visionNote": "\u56FE\u7247\u6309\u5C3A\u5BF8\u6298\u7B97 token\uFF0C\u4E0E\u6587\u672C\u4E00\u5E76\u8BA1\u8D39\u3002",
+  "pricing.modelNote": "deepseek-v4-flash\u3001deepseek-v4-flash-vision-exp \u662F\u65E7\u6A21\u578B\u540D\uFF0C\u73B0\u7531 deepseek-flash \u627F\u63A5\u5E76\u6309 Flash \u4EF7\u8BA1\u8D39\uFF1B2026-09-14 12:00 \u8D77 deepseek-v4-pro \u7684\u8BF7\u6C42\u4E5F\u4F1A\u8DEF\u7531\u5230 V4.1-Flash\uFF0C\u6309 Flash \u4EF7\u8BA1\u8D39\u3002",
   "pricing.unknown": "\u672A\u77E5\u6A21\u578B\u6309 deepseek-v4-pro \u8BA1\u4EF7\u3002",
   "coverage.noRange": "\u6682\u65E0\u6709\u6548\u7528\u91CF\u65F6\u95F4",
   "coverage.title": "\u7EDF\u8BA1\u8303\u56F4",
@@ -375,13 +374,23 @@ var zh = {
   "peak.aria": "\u9AD8\u5CF0\u65F6\u6BB5 {peak}%\uFF0C\u95F2\u65F6 {offPeak}%",
   "peak.peakLegend": "\u9AD8\u5CF0 {share}% \xB7 {tokens} tokens \xB7 {calls}",
   "peak.offPeakLegend": "\u95F2\u65F6 {share}% \xB7 {tokens} tokens \xB7 {calls}",
-  "peak.newPrice": "\u540C\u6837\u7528\u91CF\u5728\u65B0\u4EF7\u4E0B",
-  "peak.increase": "\u8F83\u73B0\u4EF7 +{percent}%",
   "peak.shift": "\u82E5\u9AD8\u5CF0\u7528\u91CF\u90FD\u632A\u5230\u95F2\u65F6",
   "peak.saving": "\u53EF\u7701 \xA5{amount}",
-  "peak.schedule": "\u9AD8\u5CF0\u65F6\u6BB5\u4E3A\u5317\u4EAC\u65F6\u95F4 {windows}\uFF0C\u95F2\u65F6\u4EF7\u683C\u51CF\u534A\u3002",
+  "peak.schedule": "\u9AD8\u5CF0\u65F6\u6BB5\u4E3A\u5317\u4EAC\u65F6\u95F4 {windows}\uFF08\u5468\u4E00\u81F3\u5468\u4E94\uFF09\uFF0C\u95F2\u65F6\u4EF7\u683C\u51CF\u534A\u3002",
   "peak.activeHint": "\u628A\u6279\u91CF\u3001\u53EF\u5EF6\u540E\u7684\u4EFB\u52A1\u653E\u5230\u95F2\u65F6\u8DD1\uFF0C\u540C\u6837\u7684 token \u53EA\u8981\u4E00\u534A\u7684\u94B1\u3002",
-  "peak.futureHint": "\u65B0\u4EF7 {date} 00:00 \u751F\u6548\uFF1B\u4E0A\u9762\u4E24\u4E2A\u6570\u5B57\u662F\u6309\u4F60\u5DF2\u6709\u7684\u5168\u90E8\u7528\u91CF\u91CD\u7B97\u7684\u3002",
+  "vision.empty": "{window}\u6CA1\u6709\u56FE\u7247\u8F93\u5165\u3002",
+  "vision.title": "\u56FE\u7247 / \u591A\u6A21\u6001\u7528\u91CF",
+  "vision.images": "\u56FE\u7247\u5F20\u6570",
+  "vision.tokens": "\u4F30\u7B97\u56FE\u7247 tokens",
+  "vision.cost": "\u4F30\u7B97\u8D39\u7528",
+  "vision.tokensShare": "\u5360\u8F93\u5165 {percent}%",
+  "vision.costShare": "\u5360\u8D39\u7528 {percent}%",
+  "vision.note": "\u56FE\u7247\u6309\u5B98\u65B9\u6362\u7B97\u89C4\u5219\u4F30\u7B97\uFF1A\u5148\u6309\u6BD4\u4F8B\u7F29\u653E\uFF08\u4E0A\u9650 ~800\xD7800\u3001\u4E0B\u9650 384\xD7384\uFF09\uFF0Ctoken \u4E0E\u7F29\u653E\u540E\u9762\u79EF\u6210\u6B63\u6BD4\u3001\u6BCF\u5F20\u4E0A\u9650 384\uFF1B\u56FE\u7247\u5F52\u5C5E\u5230\u968F\u540E\u4E00\u6B21\u6A21\u578B\u8C03\u7528\uFF0C\u6309\u8BE5\u8C03\u7528\u7684\u65F6\u6BB5\u4E0E\u6A21\u578B\u5355\u4EF7\u4F30\u7B97\uFF0C\u5B9E\u9645\u4EE5\u63A5\u53E3\u8FD4\u56DE\u7684\u7528\u91CF\u4E3A\u51C6\u3002",
+  "vision.sessionsTitle": "\u56FE\u7247\u6700\u591A\u7684\u4F1A\u8BDD",
+  "vision.sessionRow": "{images} \u5F20 \xB7 \xA5{cost}",
+  "vision.dailyTitle": "{window} \xB7 \u6BCF\u5929\u56FE\u7247\u6570",
+  "vision.barAria": "{date} \xB7 {images} \u5F20\u56FE\u7247 \xB7 \u4F30\u7B97 {tokens} tokens",
+  "vision.barTitle": "{date} \xB7 {images} \u5F20\u56FE\u7247 \xB7 \u4F30\u7B97 {tokens} tokens \xB7 \xA5{cost}",
   "sessions.empty": "\u8FD8\u6CA1\u6709\u4EA7\u751F\u8D39\u7528\u7684\u4F1A\u8BDD\u3002",
   "sessions.detail": "{tokens} tokens \xB7 {calls} \xB7 {ago}",
   "sessions.share": "\u5360 {percent}%",
@@ -581,16 +590,15 @@ var en = {
   "pricing.currentOffPeak": "Off-peak now",
   "pricing.model": "Model",
   "pricing.period": "Period",
-  "pricing.unitPrice": "Rate",
   "pricing.inputCacheHit": "Input \xB7 cache hit",
   "pricing.inputCacheMiss": "Input \xB7 cache miss",
   "pricing.output": "Output",
   "pricing.peak": "Peak",
-  "pricing.fixed": "Fixed",
   "pricing.offPeak": "Off-peak",
   "pricing.unit": "Unit: {currency} / million tokens. ",
-  "pricing.splitNote": "Peak periods are {windows} Beijing time; off-peak rates are half price. Usage before {date} is still estimated at the old rates. ",
-  "pricing.switchNote": "Time-of-use pricing starts at 00:00 on {date} (peak: {windows}; off-peak is half price). This page will price each record by its timestamp. ",
+  "pricing.splitNote": "Peak periods are {windows} Beijing time, Monday to Friday; off-peak rates are half price. Each record is estimated at the official rates in force when it was written. ",
+  "pricing.visionNote": "Images are converted to tokens by size and charged together with text. ",
+  "pricing.modelNote": "deepseek-v4-flash and deepseek-v4-flash-vision-exp are legacy names, now served by deepseek-flash at Flash rates; from 2026-09-14 12:00 deepseek-v4-pro requests are routed to V4.1-Flash and billed at Flash rates. ",
   "pricing.unknown": "Unknown models use deepseek-v4-pro rates.",
   "coverage.noRange": "No valid usage timestamps",
   "coverage.title": "Coverage",
@@ -624,13 +632,23 @@ var en = {
   "peak.aria": "{peak}% peak, {offPeak}% off-peak",
   "peak.peakLegend": "Peak {share}% \xB7 {tokens} tokens \xB7 {calls}",
   "peak.offPeakLegend": "Off-peak {share}% \xB7 {tokens} tokens \xB7 {calls}",
-  "peak.newPrice": "Same usage at new rates",
-  "peak.increase": "+{percent}% vs current rates",
   "peak.shift": "If all peak usage moved off-peak",
   "peak.saving": "Save \xA5{amount}",
-  "peak.schedule": "Peak periods are {windows} Beijing time; off-peak rates are half price. ",
+  "peak.schedule": "Peak periods are {windows} Beijing time, Monday to Friday; off-peak rates are half price. ",
   "peak.activeHint": "Run batch or delay-tolerant work off-peak to pay half as much for the same tokens.",
-  "peak.futureHint": "New rates start at 00:00 on {date}; both figures recalculate all existing usage.",
+  "vision.empty": "No image input in {window}.",
+  "vision.title": "Image / multimodal usage",
+  "vision.images": "Images",
+  "vision.tokens": "Estimated image tokens",
+  "vision.cost": "Estimated cost",
+  "vision.tokensShare": "{percent}% of input",
+  "vision.costShare": "{percent}% of cost",
+  "vision.note": "Images are estimated with the official rule: resized keeping aspect ratio (cap ~800\xD7800, floor 384\xD7384), tokens proportional to the resized area with a 384-token cap per image. Each image is attributed to the next model call and priced at that call's period and model rate; the provider usage numbers remain the source of truth.",
+  "vision.sessionsTitle": "Sessions with the most images",
+  "vision.sessionRow": "{images} images \xB7 \xA5{cost}",
+  "vision.dailyTitle": "{window} \xB7 images per day",
+  "vision.barAria": "{date} \xB7 {images} images \xB7 est. {tokens} tokens",
+  "vision.barTitle": "{date} \xB7 {images} images \xB7 est. {tokens} tokens \xB7 \xA5{cost}",
   "sessions.empty": "No sessions have incurred cost yet.",
   "sessions.detail": "{tokens} tokens \xB7 {calls} \xB7 {ago}",
   "sessions.share": "{percent}% of total",
@@ -1137,9 +1155,25 @@ function getShellFrame(node) {
   return overlay?.parentElement ?? null;
 }
 function getComposerElement(frame) {
-  if (frame === null) return null;
+  if (frame === null) {
+    return slotElement(document.documentElement, "conversation.composer.dock", "ancestor");
+  }
   return slotElement(frame, "conversation.composer.dock", "ancestor");
 }
+function getComposerInputElement(frame) {
+  const root = frame ?? document.documentElement;
+  const textarea = root.querySelector(
+    '[data-slot="conversation.composer"] textarea, [data-slot="conversation.composer.bar"] textarea, textarea'
+  );
+  if (textarea === null) return null;
+  let el = textarea.parentElement;
+  for (let depth = 0; depth < 6 && el !== null; depth++) {
+    const cs = getComputedStyle(el);
+    if (cs.borderRadius !== "0px" && cs.backgroundColor !== "rgba(0, 0, 0, 0)") return el;
+    el = el.parentElement;
+  }
+  return null;
+}
 function getActiveConversationViewId(frame, viewIds) {
   if (viewIds.length === 0) return null;
   const header = frame === null ? null : slotElement(frame, "conversation.session.header", "child");
@@ -1443,30 +1477,29 @@ var rate = (value) => `\xA5${value.toLocaleString(void 0, { maximumFractionDigit
 function PricingNote(props) {
   const { t } = useI18n();
   const { pricing } = props;
-  const split = pricing.splitActive;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("details", { className: "dq-pricing", children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("summary", { className: "dq-pricing-summary", children: [
       t("pricing.title"),
-      split && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `dq-pricing-now${pricing.inPeakNow ? " dq-pricing-now--peak" : ""}`, children: pricing.inPeakNow ? t("pricing.currentPeak") : t("pricing.currentOffPeak") })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `dq-pricing-now${pricing.inPeakNow ? " dq-pricing-now--peak" : ""}`, children: pricing.inPeakNow ? t("pricing.currentPeak") : t("pricing.currentOffPeak") })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-pricing-body", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("table", { className: "dq-pricing-table", children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { children: t("pricing.model") }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { children: split ? t("pricing.period") : t("pricing.unitPrice") }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { children: t("pricing.period") }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { children: t("pricing.inputCacheHit") }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { children: t("pricing.inputCacheMiss") }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { children: t("pricing.output") })
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { children: pricing.tiers.map((tier) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react4.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { rowSpan: tier.offPeak !== null ? 2 : 1, children: tier.model }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: split ? t("pricing.peak") : t("pricing.fixed") }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { rowSpan: 2, children: tier.model }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: t("pricing.peak") }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: rate(tier.peak.cacheHit) }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: rate(tier.peak.input) }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: rate(tier.peak.output) })
           ] }),
-          tier.offPeak !== null && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: t("pricing.offPeak") }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: rate(tier.offPeak.cacheHit) }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: rate(tier.offPeak.input) }),
@@ -1476,7 +1509,9 @@ function PricingNote(props) {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "dq-pricing-foot", children: [
         t("pricing.unit", { currency: pricing.currency }),
-        split ? t("pricing.splitNote", { windows: pricing.peakWindows.join(t("common.listSeparator")), date: pricing.switchDate }) : t("pricing.switchNote", { windows: pricing.peakWindows.join(t("common.listSeparator")), date: pricing.switchDate }),
+        t("pricing.splitNote", { windows: pricing.peakWindows.join(t("common.listSeparator")) }),
+        t("pricing.visionNote"),
+        t("pricing.modelNote"),
         t("pricing.unknown")
       ] })
     ] })
@@ -1728,15 +1763,50 @@ function CacheCard(props) {
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "dq-cache-foot", children: low ? t("cache.lowHint") : t("cache.goodHint") })
   ] });
 }
+function VisionCard(props) {
+  const { t, locale } = useI18n();
+  const { vision, daily, sessions, windowLabel, inputTokens, costTotal } = props;
+  if (vision.images === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-empty", children: t("vision.empty", { window: windowLabel }) });
+  const tokensShare = inputTokens > 0 ? vision.imageTokens / inputTokens * 100 : 0;
+  const costShare = costTotal > 0 ? vision.cost / costTotal * 100 : 0;
+  const labelEvery = daily.length <= 7 ? 1 : daily.length <= 30 ? 5 : daily.length <= 90 ? 15 : 30;
+  const bars = daily.map((d) => ({
+    label: d.date.slice(8, 10),
+    value: d.images,
+    title: t("vision.barTitle", { date: d.date, images: fmtInt(d.images), tokens: fmtCompact(d.imageTokens, locale), cost: fmt(d.cost) })
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-usage-totals", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Stat, { label: t("vision.images"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-stat-value", children: fmtInt(vision.images) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Stat, { label: t("vision.tokens"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-stat-value", children: [
+        fmtCompact(vision.imageTokens, locale),
+        tokensShare > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-vision-share", children: t("vision.tokensShare", { percent: tokensShare.toFixed(1) }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Stat, { label: t("vision.cost"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-stat-value", children: [
+        "\xA5 ",
+        fmt(vision.cost),
+        costShare > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-vision-share", children: t("vision.costShare", { percent: costShare.toFixed(1) }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-chart-title", children: t("vision.dailyTitle", { window: windowLabel }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Bars, { data: bars, height: 80, labelEvery }),
+    sessions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-vision-sessions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-chart-title", children: t("vision.sessionsTitle") }),
+      sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-session", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-session-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-session-title", title: session.id, children: session.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-session-cost", children: t("vision.sessionRow", { images: fmtInt(session.images), cost: fmt(session.cost) }) })
+      ] }) }, session.id))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "dq-cache-foot", children: t("vision.note") })
+  ] });
+}
 function PeakCard(props) {
   const { t, locale } = useI18n();
-  const { split, pricing, currentCost } = props;
+  const { split, pricing } = props;
   const total = split.peak.total + split.offPeak.total;
   if (total === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-empty", children: t("peak.empty") });
   const peakShare = split.peak.total / total;
   const shiftSaving = split.peakEraCost - split.offPeakEraCost;
-  const increase = split.peakEraCost - currentCost;
-  const increasePercent = currentCost > 0 ? increase / currentCost * 100 : 0;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-peak", children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
@@ -1765,27 +1835,17 @@ function PeakCard(props) {
         })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-peak-figures", children: [
-      !pricing.splitActive && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-stat", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-stat-label", children: t("peak.newPrice") }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-stat-value", children: [
-          "\xA5 ",
-          fmt(split.peakEraCost),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-peak-delta", children: t("peak.increase", { percent: increasePercent.toFixed(0) }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-stat", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-stat-label", children: t("peak.shift") }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-stat-value", children: [
-          "\xA5 ",
-          fmt(split.offPeakEraCost),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-peak-delta dq-peak-delta--save", children: t("peak.saving", { amount: fmt(shiftSaving) }) })
-        ] })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-peak-figures", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-stat", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-stat-label", children: t("peak.shift") }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-stat-value", children: [
+        "\xA5 ",
+        fmt(split.offPeakEraCost),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-peak-delta dq-peak-delta--save", children: t("peak.saving", { amount: fmt(shiftSaving) }) })
       ] })
-    ] }),
+    ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "dq-peak-foot", children: [
       t("peak.schedule", { windows: pricing.peakWindows.join(t("common.listSeparator")) }),
-      pricing.splitActive ? t("peak.activeHint") : t("peak.futureHint", { date: pricing.switchDate })
+      t("peak.activeHint")
     ] })
   ] });
 }
@@ -2044,6 +2104,7 @@ function BalanceDashboard(props) {
   const budgetInputRef = (0, import_react4.useRef)(null);
   const rootRef = (0, import_react4.useRef)(null);
   const [composerHeight, setComposerHeight] = (0, import_react4.useState)(null);
+  const [composerWidth, setComposerWidth] = (0, import_react4.useState)(null);
   const [sessionUsage, setSessionUsage] = (0, import_react4.useState)(null);
   const [loadingSessionUsage, setLoadingSessionUsage] = (0, import_react4.useState)(props.sessionId !== void 0 && props.sessionId !== "");
   const [sessionUsageError, setSessionUsageError] = (0, import_react4.useState)(null);
@@ -2055,16 +2116,22 @@ function BalanceDashboard(props) {
       const frame2 = getShellFrame(node);
       const composer2 = getComposerElement(frame2);
       const rect = composer2?.getBoundingClientRect() ?? null;
-      const next = rect !== null && rect.height > 0 ? Math.round(rect.height) : null;
-      setComposerHeight((prev) => prev === next ? prev : next);
+      const nextHeight = rect !== null && rect.height > 0 ? Math.round(rect.height) : null;
+      setComposerHeight((prev) => prev === nextHeight ? prev : nextHeight);
+      const input2 = getComposerInputElement(frame2);
+      const inputRect = input2?.getBoundingClientRect() ?? null;
+      const nextWidth = inputRect !== null && inputRect.width > 0 ? Math.round(inputRect.width) : null;
+      setComposerWidth((prev) => prev === nextWidth ? prev : nextWidth);
     };
     measure();
     const frame = getShellFrame(node);
     const composer = getComposerElement(frame);
+    const input = getComposerInputElement(frame);
     let observer = null;
     if (typeof ResizeObserver === "function") {
       observer = new ResizeObserver(measure);
       if (composer !== null) observer.observe(composer);
+      if (input !== null) observer.observe(input);
       if (frame !== null) observer.observe(frame);
     }
     window.addEventListener("resize", measure);
@@ -2073,6 +2140,12 @@ function BalanceDashboard(props) {
       window.removeEventListener("resize", measure);
     };
   }, []);
+  (0, import_react4.useLayoutEffect)(() => {
+    const node = rootRef.current;
+    if (node === null) return;
+    const scrollport = node.closest("[data-conversation-scroll]");
+    if (scrollport instanceof HTMLElement) scrollport.scrollTop = 0;
+  }, [props.sessionId]);
   (0, import_react4.useLayoutEffect)(() => {
     quotaViewActiveStore.set(true);
     return () => quotaViewActiveStore.set(false);
@@ -2282,7 +2355,11 @@ function BalanceDashboard(props) {
   );
   const errorText = error === null ? null : localizeApiError(error, t, "error.query");
   const composerSafeAreaStyle = {
-    "--dq-composer-h": `${composerHeight ?? COMPOSER_FALLBACK_PX}px`
+    "--dq-composer-h": `${composerHeight ?? COMPOSER_FALLBACK_PX}px`,
+    // Only set once measured; .dq-balance's max-width falls back to 860px
+    // without it (pre-measurement render keeps the settled wide-viewport
+    // column, then narrows in place — no flash of the old width).
+    ...composerWidth !== null ? { "--dq-composer-w": `${composerWidth}px` } : {}
   };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-balance", ref: rootRef, style: composerSafeAreaStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-status-row", children: [
@@ -2426,6 +2503,31 @@ function BalanceDashboard(props) {
       ),
       usage !== null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PricingNote, { pricing: usage.pricing })
     ] }),
+    usage !== null && activeWindow !== null && activeWindow.vision !== void 0 && Array.isArray(activeWindow.visionDaily) && Array.isArray(activeWindow.visionSessions) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-card-title", children: t("vision.title") }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        VisionCard,
+        {
+          vision: activeWindow.vision,
+          daily: activeWindow.visionDaily,
+          sessions: activeWindow.visionSessions,
+          windowLabel: activeWindowName,
+          inputTokens: activeWindow.totals.input,
+          costTotal: activeWindow.totals.cost
+        }
+      )
+    ] }) : usage === null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-card-title", children: t("vision.title") }),
+      loadingUsage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-usage-totals", children: [64, 88, 72].map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-stat", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Skel, { w, h: 11 }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Skel, { w: 72, h: 20 })
+      ] }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-empty", children: t("vision.empty", { window: activeWindowName }) })
+    ] }) : (
+      // Host serving a pre-vision payload (e.g. not restarted yet): hide the
+      // whole card instead of leaving a titled shell — it reappears as soon
+      // as the host half serves the new shape.
+      null
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-card dq-card--primary", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-card-head", children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-card-title", children: t("usage.trendTitle") }),
@@ -2502,7 +2604,7 @@ function BalanceDashboard(props) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-card", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-card-title", children: t("peak.title") }),
-      usage !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PeakCard, { split: usage.peakSplit, pricing: usage.pricing, currentCost: usage.totals.cost }) : loadingUsage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      usage !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PeakCard, { split: usage.peakSplit, pricing: usage.pricing }) : loadingUsage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-peak-track" }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-peak-figures", children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Skel, { w: 120, h: 11 }),
@@ -2601,7 +2703,8 @@ function BalanceDashboard(props) {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: "dq-monthly-budget-hint", className: "dq-setting-hint", children: monthlyBudget > 0 ? t("settings.monthlyBudgetOn", { amount: fmt(monthlyBudget) }) : t("settings.monthlyBudgetOff") })
         ] })
       ] })
-    ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "dq-footer", children: "@cassius0924/dsh-usage-dashboard v0.6.0" })
   ] });
 }
 
@@ -2692,9 +2795,14 @@ var css = `
 /* \u5361\u7247\u95F4\u8DDD\uFF08\u6B64\u5904 gap\uFF09\u523B\u610F\u5927\u4E8E\u5361\u5185\u5C0F\u8282\u95F4\u8DDD\uFF08margin-top:12/14/16px \u90A3\u4E00\u6863\uFF09\uFF0C\u5236\u9020"\u5361\u7247\u5916\u758F\u3001\u5361\u7247\u5185\u5BC6"\u7684
    \u758F\u5BC6\u5BF9\u6BD4\uFF1A24px \u76F8\u5BF9\u5361\u5185\u6700\u5927\u6863 16px \u4ECD\u6709 1.5 \u500D\u7EA7\u5DEE\uFF0C\u76F8\u5BF9\u5E38\u89C1\u6863 12px \u6709 2 \u500D\u7EA7\u5DEE\uFF0C\u4E0D\u4E0E .dq-card \u7684
    padding\uFF0816px/20px\uFF0C\u5361\u7247\u5185\u90E8\u547C\u5438\u611F\uFF0C\u8F6E\u6B21 36 \u5DF2\u5B9A\uFF09\u6DF7\u540C\u3002 */
-.dq-balance{display:flex;flex-direction:column;gap:24px;padding:20px 24px 48px;max-width:860px;margin:0 auto;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:13px;line-height:1.5;color:var(--dsw-alias-label-primary,#1f2328)}
+/* Width parity with the host composer: the dashboard column reserves the
+   same max-width as the conversation reading column (860px, \u8F6E\u6B21 42 kept it
+   deliberately), but on narrower viewports the fixed 860px would overhang
+   the input box \u2014 measured in dashboard.tsx as --dq-composer-w, capped at
+   the reading-column width so wide viewports are unchanged. */
+.dq-balance{display:flex;flex-direction:column;gap:24px;padding:20px 24px 48px;max-width:min(860px,var(--dq-composer-w,860px));margin:0 auto;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:13px;line-height:1.5;color:var(--dsw-alias-label-primary,#1f2328)}
 @media (max-width:620px){.dq-balance{box-sizing:border-box;max-width:calc(100vw - 56px);padding:16px 16px calc(var(--dq-composer-h,126px) + 16px)}}
-.dq-card{background:var(--dsw-alias-bg-layer-1,#ffffff);border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.08));border-radius:12px;padding:16px}
+.dq-card{background:var(--dsw-alias-bg-layer-1,#ffffff);border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.08));border-radius:12px;padding:16px;min-width:0;max-width:100%}
 .dq-card-title{font-size:12px;font-weight:600;color:var(--dsw-alias-label-secondary,#59636e);margin:0 0 12px;letter-spacing:.02em}
 .dq-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
 .dq-card-head .dq-card-title{margin:0}
@@ -2910,6 +3018,9 @@ p.dq-session-sub{margin:8px 0}
 .dq-setting-label{font-size:13px;color:var(--dsw-alias-label-primary,#1f2328);padding-top:6px;flex:none}
 .dq-setting-control{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
 .dq-setting-hint{font-size:12px;color:var(--dsw-alias-label-secondary,#59636e);line-height:1.5}
+/* Page footer: the package name + version, injected at build time from
+   package.json (see build.mjs) so it can never drift from the release. */
+.dq-footer{margin:18px 0 0;font-size:12px;text-align:center;color:var(--dsw-alias-label-tertiary,#59636e)}
 .dq-number{width:82px;padding:5px 8px;font-size:13px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.16));background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-primary,#1f2328);font-variant-numeric:tabular-nums}
 .dq-number:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:1px;border-color:transparent}
 .dq-links-title{font-size:12px;font-weight:600;color:var(--dsw-alias-label-primary,#1f2328);margin:0 0 8px}
@@ -2936,6 +3047,16 @@ p.dq-session-sub{margin:8px 0}
    case is the font-size drop below, which keeps every measured stress value comfortably under the
    83px column width without ever hitting the ellipsis fallback (see round 38 PROGRESS entry) */
 .dq-usage-totals .dq-stat-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.dq-vision-share{display:inline-block;margin-left:6px;font-size:11px;font-weight:550;color:var(--dsw-alias-label-tertiary,#59636e)}
+.dq-vision-sessions{margin-top:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
+/* The vision card's session rows reuse .dq-session-head, but \u2014 unlike the
+   ranking card's rows \u2014 they sit directly under .dq-session with no
+   .dq-session-summary-body wrapper to carry min-width:0. Without the chain
+   below, a long session title (nowrap) sets the row's min-content width and
+   can stretch the card past its siblings / the container. */
+.dq-vision-sessions .dq-session{min-width:0}
+.dq-vision-sessions .dq-session-head{min-width:0}
+.dq-vision-sessions .dq-session-title{flex:1 1 auto;min-width:0}
 @media (max-width:620px){.dq-usage-totals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}.dq-usage-totals .dq-stat{min-width:0}.dq-usage-totals .dq-stat-value{font-size:13px}}
 .dq-chart-peak{margin-left:10px;font-size:11px;font-weight:400;color:var(--dsw-alias-label-tertiary,#59636e);font-variant-numeric:tabular-nums}
 .dq-chart-title{font-size:12px;font-weight:600;color:var(--dsw-alias-label-secondary,#59636e);margin:16px 0 8px}