@cassius0924/dsh-usage-dashboard 0.4.0 → 0.6.0

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();
     }
@@ -190,6 +190,26 @@ async function fetchUsage(force = false) {
   return task;
 }
 var sessionUsageInflight = /* @__PURE__ */ new Map();
+var sessionUsageCache = /* @__PURE__ */ new Map();
+var sessionUsageListeners = /* @__PURE__ */ new Map();
+var getCachedSessionUsage = (sessionId) => sessionUsageCache.get(sessionId) ?? null;
+var subscribeSessionUsage = (sessionId, fn) => {
+  let listeners = sessionUsageListeners.get(sessionId);
+  if (listeners === void 0) {
+    listeners = /* @__PURE__ */ new Set();
+    sessionUsageListeners.set(sessionId, listeners);
+  }
+  listeners.add(fn);
+  return () => {
+    listeners?.delete(fn);
+    if (listeners?.size === 0) sessionUsageListeners.delete(sessionId);
+  };
+};
+var publishSessionUsage = (sessionId, response) => {
+  if (!response.ok) return;
+  sessionUsageCache.set(sessionId, response);
+  for (const listener of [...sessionUsageListeners.get(sessionId) ?? []]) listener();
+};
 async function fetchSessionUsage(sessionId, force = false) {
   if (typeof sessionId !== "string" || sessionId === "") {
     return { ok: false, error: "\u7F3A\u5C11\u4F1A\u8BDD id" };
@@ -198,7 +218,10 @@ async function fetchSessionUsage(sessionId, force = false) {
     const inflight = sessionUsageInflight.get(sessionId);
     if (inflight !== void 0) return inflight;
   }
-  const task = getJson(`/api/dsh-usage-dashboard/session?id=${encodeURIComponent(sessionId)}`, "no-store");
+  const task = getJson(`/api/dsh-usage-dashboard/session?id=${encodeURIComponent(sessionId)}`, "no-store").then((response) => {
+    publishSessionUsage(sessionId, response);
+    return response;
+  });
   if (force) return task;
   const tracked = task.finally(() => {
     if (sessionUsageInflight.get(sessionId) === tracked) sessionUsageInflight.delete(sessionId);
@@ -309,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",
@@ -352,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}%",
@@ -484,7 +516,10 @@ var zh = {
   "links.status": "\u670D\u52A1\u72B6\u6001",
   "settings.title": "\u8BBE\u7F6E",
   "settings.widget": "\u5728\u5176\u4ED6\u9875\u9762\u663E\u793A\u53F3\u4E0B\u89D2\u60AC\u6D6E\u989D\u5EA6\u7A97\u53E3",
-  "settings.widgetHint": "\u5F53\u524D\u989D\u5EA6\u9875\u5DF2\u5C55\u793A\u5B8C\u6574\u6570\u636E\uFF0C\u60AC\u6D6E\u7A97\u4F1A\u81EA\u52A8\u9690\u85CF\uFF1B\u5207\u56DE Chat \u6216 Trajectory \u540E\u6062\u590D\u3002",
+  "settings.widgetHint": "\u989D\u5EA6\u9875\u4F1A\u81EA\u52A8\u9690\u85CF\u6D6E\u7A97\uFF1B\u5176\u4ED6\u9875\u9762\u662F\u5426\u5C55\u793A\u7531\u4E0B\u65B9\u9009\u62E9\u51B3\u5B9A\u3002",
+  "settings.widgetTabs": "\u5C55\u793A\u6D6E\u7A97\u7684\u9875\u9762",
+  "settings.widgetTabsHint": "\u9875\u9762\u5217\u8868\u6765\u81EA DSH \u7684\u5B9E\u65F6 Tab \u6CE8\u518C\u8868\uFF1B\u5176\u4ED6\u63D2\u4EF6\u65B0\u589E\u7684 Tab \u4E5F\u4F1A\u81EA\u52A8\u51FA\u73B0\u5728\u8FD9\u91CC\u3002",
+  "settings.widgetTabsEmpty": "\u5F53\u524D\u6CA1\u6709\u53EF\u914D\u7F6E\u7684\u4F1A\u8BDD\u9875\u9762\u3002",
   "settings.lowBalance": "\u4F59\u989D\u9884\u8B66\u7EBF",
   "settings.lowBalanceOn": "\u4F59\u989D\u4F4E\u4E8E {amount} {currency} \u65F6\uFF0C\u8FD9\u91CC\u548C\u60AC\u6D6E\u7A97\u90FD\u4F1A\u8F6C\u4E3A\u8B66\u793A\u8272\u3002\u586B 0 \u5173\u95ED\u3002",
   "settings.lowBalanceOff": "\u5DF2\u5173\u95ED\u4F59\u989D\u9884\u8B66\u3002\u586B\u4E00\u4E2A\u5927\u4E8E 0 \u7684\u6570\u5F00\u542F\u3002",
@@ -497,6 +532,8 @@ var zh = {
   "widget.lowTitle": "\u4F59\u989D\u4F4E\u4E8E\u9884\u8B66\u7EBF {amount}",
   "widget.todayCostTitle": "\u4ECA\u65E5\u6D88\u8017\uFF08\u4F30\u7B97\uFF09\xB7 {age}",
   "widget.todayCost": "\u4ECA\u65E5\u6D88\u8017",
+  "widget.sessionCostTitle": "\u5F53\u524D\u4F1A\u8BDD\u7D2F\u8BA1\u6D88\u8017\uFF08\u4F30\u7B97\uFF09",
+  "widget.sessionCost": "\u5F53\u524D\u4F1A\u8BDD",
   "widget.noBalance": "\u6682\u65E0\u4F59\u989D\u6570\u636E",
   "widget.dragCard": "\u62D6\u52A8\u5230\u56DB\u4E2A\u89D2\u843D",
   "widget.dragGrip": "\u62D6\u52A8\u4EE5\u79FB\u52A8",
@@ -505,6 +542,9 @@ var zh = {
   "widget.collapse": "\u6536\u8D77",
   "widget.expandAria": "\u5C55\u5F00\u989D\u5EA6\u7A97\u53E3",
   "widget.collapseAria": "\u6536\u8D77\u989D\u5EA6\u7A97\u53E3",
+  "messageCost.label": "\u672C\u8F6E\u8D39\u7528",
+  "messageCost.tooltip": "\u7531 dsh-usage-dashboard \u63D0\u4F9B \xB7 \u672C\u8F6E\u5BF9\u8BDD\u8D39\u7528\u4E3A\u4F30\u7B97\u503C",
+  "messageCost.aria": "{amount}\uFF0C\u672C\u8F6E\u5BF9\u8BDD\u4F30\u7B97\u8D39\u7528\uFF0C\u7531 dsh-usage-dashboard \u63D0\u4F9B",
   "boundary.title": "\u989D\u5EA6\u9762\u677F\u51FA\u9519\u4E86",
   "boundary.body": "\u6E32\u67D3\u65F6\u629B\u4E86\u5F02\u5E38\uFF0C\u901A\u5E38\u662F\u6D4F\u89C8\u5668\u91CC\u5B58\u7740\u65E7\u7248\u672C\u7684\u7F13\u5B58\u6570\u636E\u3002\u6E05\u6389\u672C\u63D2\u4EF6\u7684\u672C\u5730\u6570\u636E\u518D\u91CD\u65B0\u52A0\u8F7D\u5C31\u80FD\u6062\u590D\u3002",
   "boundary.reset": "\u6E05\u9664\u672C\u5730\u6570\u636E\u5E76\u91CD\u65B0\u52A0\u8F7D"
@@ -550,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",
@@ -593,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",
@@ -725,7 +774,10 @@ var en = {
   "links.status": "Service status",
   "settings.title": "Settings",
   "settings.widget": "Show the floating balance widget on other views",
-  "settings.widgetHint": "The widget hides while this full dashboard is open, then returns on Chat or Trajectory.",
+  "settings.widgetHint": "The widget always hides on Usage; choose its other views below.",
+  "settings.widgetTabs": "Show widget on",
+  "settings.widgetTabsHint": "This live list comes from DSH\u2019s tab registry, including tabs added by other plugins.",
+  "settings.widgetTabsEmpty": "There are no configurable conversation views right now.",
   "settings.lowBalance": "Balance warning",
   "settings.lowBalanceOn": "This page and the widget turn amber below {amount} {currency}. Enter 0 to disable.",
   "settings.lowBalanceOff": "Balance warnings are off. Enter an amount above 0 to enable them.",
@@ -738,6 +790,8 @@ var en = {
   "widget.lowTitle": "Balance below warning threshold {amount}",
   "widget.todayCostTitle": "Today\u2019s spend (estimated) \xB7 {age}",
   "widget.todayCost": "Today\u2019s spend",
+  "widget.sessionCostTitle": "Estimated spend for the current session",
+  "widget.sessionCost": "Current session",
   "widget.noBalance": "No balance data",
   "widget.dragCard": "Drag to any corner",
   "widget.dragGrip": "Drag to move",
@@ -746,6 +800,9 @@ var en = {
   "widget.collapse": "Collapse",
   "widget.expandAria": "Expand balance widget",
   "widget.collapseAria": "Collapse balance widget",
+  "messageCost.label": "Turn cost",
+  "messageCost.tooltip": "Provided by dsh-usage-dashboard \xB7 estimated cost for this turn",
+  "messageCost.aria": "{amount}, estimated cost for this turn, provided by dsh-usage-dashboard",
   "boundary.title": "The usage dashboard crashed",
   "boundary.body": "Rendering failed, usually because this browser still has cached data from an older version. Clear this plugin\u2019s local data and reload to recover.",
   "boundary.reset": "Clear local data and reload"
@@ -1098,9 +1155,34 @@ 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");
+  const tablist = header?.querySelector('[role="tablist"]') ?? null;
+  if (tablist === null) return viewIds[0] ?? null;
+  const tabs = [...tablist.querySelectorAll('[role="tab"]')];
+  const activeIndex = tabs.findIndex((tab) => tab.getAttribute("aria-selected") === "true");
+  return activeIndex < 0 ? viewIds[0] ?? null : viewIds[activeIndex] ?? null;
+}
 
 // src/client/export.ts
 var BEIJING_OFFSET_MS2 = 8 * 60 * 60 * 1e3;
@@ -1240,6 +1322,8 @@ function createStore(key, isValid, fallback) {
 }
 var isThreshold = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0;
 var widgetVisibleStore = createStore("widget.visible", isBoolean, true);
+var isWidgetTabIds = (value) => value === null || Array.isArray(value) && value.every((id) => typeof id === "string" && id !== "") && new Set(value).size === value.length;
+var widgetTabIdsStore = createStore("widget.tabIds", isWidgetTabIds, null);
 var lowBalanceStore = createStore("alert.lowBalance", isThreshold, 10);
 var monthlyBudgetStore = createStore("budget.monthly", isThreshold, 0);
 var isUsageWindowDays = (value) => typeof value === "number" && USAGE_WINDOW_DAYS.some((days) => days === value);
@@ -1393,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) }),
@@ -1426,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")
       ] })
     ] })
@@ -1678,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",
@@ -1715,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")
     ] })
   ] });
 }
@@ -1978,6 +2088,9 @@ function BalanceDashboard(props) {
   const [freshnessNow, setFreshnessNow] = (0, import_react4.useState)(Date.now());
   const hadDataRef = (0, import_react4.useRef)(cachedBalance !== null || cachedUsage !== null);
   const [widgetOn, setWidgetOn] = (0, import_react4.useState)(widgetVisibleStore.get());
+  const [widgetTabIds, setWidgetTabIds] = (0, import_react4.useState)(widgetTabIdsStore.get());
+  const [viewTabs, setViewTabs] = (0, import_react4.useState)(() => props.views.list());
+  (0, import_react4.useEffect)(() => props.views.subscribe(() => setViewTabs(props.views.list())), [props.views]);
   const [lowBalance, setLowBalance] = (0, import_react4.useState)(lowBalanceStore.get());
   const [monthlyBudget, setMonthlyBudget] = (0, import_react4.useState)(monthlyBudgetStore.get());
   const [barMode, setBarMode] = (0, import_react4.useState)("daily");
@@ -1986,9 +2099,12 @@ function BalanceDashboard(props) {
   const [chartMetric, setChartMetric] = (0, import_react4.useState)(chartMetricStore.get());
   const [runwayHovering, setRunwayHovering] = (0, import_react4.useState)(false);
   const [runwayManuallyOpened, setRunwayManuallyOpened] = (0, import_react4.useState)(false);
+  const [remainingHovering, setRemainingHovering] = (0, import_react4.useState)(false);
+  const [remainingManuallyOpened, setRemainingManuallyOpened] = (0, import_react4.useState)(false);
   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);
@@ -2000,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);
@@ -2018,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);
@@ -2118,6 +2246,13 @@ function BalanceDashboard(props) {
     setWidgetOn(next);
     widgetVisibleStore.set(next);
   };
+  const widgetTabs = viewTabs.filter((tab) => tab.id !== "balance");
+  const toggleWidgetTab = (id) => {
+    const selected = widgetTabIds ?? widgetTabs.map((tab) => tab.id);
+    const next = selected.includes(id) ? selected.filter((tabId) => tabId !== id) : [...selected, id];
+    setWidgetTabIds(next);
+    widgetTabIdsStore.set(next);
+  };
   const changeLowBalance = (value) => {
     setLowBalance(value);
     lowBalanceStore.set(value);
@@ -2220,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: [
@@ -2273,17 +2412,36 @@ function BalanceDashboard(props) {
       primary !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-balance-grid", 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("balance.remaining") }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("details", { className: "dq-stat-value dq-remaining", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("summary", { title: t("balance.breakdownTitle"), children: [
-              fmt(primary.total),
-              " ",
-              primary.currency
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-remaining-breakdown", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: t("balance.toppedUp", { amount: fmt(primary.toppedUp) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-remaining-granted", children: t("balance.granted", { amount: fmt(primary.granted) }) })
-            ] })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "details",
+            {
+              className: "dq-stat-value dq-remaining",
+              open: remainingHovering || remainingManuallyOpened,
+              onPointerEnter: () => setRemainingHovering(true),
+              onPointerLeave: () => setRemainingHovering(false),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  "summary",
+                  {
+                    title: t("balance.breakdownTitle"),
+                    onClick: (e) => {
+                      e.preventDefault();
+                      setRemainingManuallyOpened((v) => !v);
+                    },
+                    children: [
+                      fmt(primary.total),
+                      " ",
+                      primary.currency
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-remaining-breakdown", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: t("balance.toppedUp", { amount: fmt(primary.toppedUp) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-remaining-granted", children: t("balance.granted", { amount: fmt(primary.granted) }) })
+                ] })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-stat", children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-stat-label", children: t("balance.runway") }),
@@ -2345,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") }),
@@ -2421,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 }),
@@ -2465,6 +2648,23 @@ function BalanceDashboard(props) {
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: t("settings.widget") })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-toggle-hint", children: t("settings.widgetHint") }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting dq-setting--tabs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-setting-label", id: "dq-widget-tabs-label", children: t("settings.widgetTabs") }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting-control dq-widget-tabs", role: "group", "aria-labelledby": "dq-widget-tabs-label", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-widget-tab-list", children: widgetTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "dq-widget-tab", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: widgetTabIds === null || widgetTabIds.includes(tab.id),
+                onChange: () => toggleWidgetTab(tab.id)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: tab.label })
+          ] }, tab.id)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-setting-hint", children: widgetTabs.length === 0 ? t("settings.widgetTabsEmpty") : t("settings.widgetTabsHint") })
+        ] })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting", children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "dq-setting-label", htmlFor: "dq-low-balance", children: t("settings.lowBalance") }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting-control", children: [
@@ -2503,14 +2703,55 @@ 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" })
   ] });
 }
 
+// src/client/message-cost.tsx
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var fmtTurnCost = (cost) => cost.toLocaleString(void 0, {
+  minimumFractionDigits: cost > 0 && cost < 0.01 ? 4 : 2,
+  maximumFractionDigits: cost > 0 && cost < 0.01 ? 6 : 4
+});
+var cachedData = (sessionId) => {
+  const response = getCachedSessionUsage(sessionId);
+  return response?.ok === true ? response.data ?? null : null;
+};
+function MessageCost({ sessionId, messageId }) {
+  const { t } = useI18n();
+  const [data, setData] = (0, import_react5.useState)(() => cachedData(sessionId));
+  (0, import_react5.useEffect)(() => {
+    setData(cachedData(sessionId));
+    const unsubscribe = subscribeSessionUsage(sessionId, () => setData(cachedData(sessionId)));
+    const hit = cachedData(sessionId)?.turns.some((turn2) => turn2.messageId === messageId) ?? false;
+    if (!hit) void fetchSessionUsage(sessionId);
+    return unsubscribe;
+  }, [messageId, sessionId]);
+  const turn = data?.turns.find((candidate) => candidate.messageId === messageId);
+  if (turn === void 0) return null;
+  const amount = `\xA5 ${fmtTurnCost(turn.cost)}`;
+  const tooltip = t("messageCost.tooltip");
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "span",
+    {
+      className: "dq-message-cost",
+      tabIndex: 0,
+      "data-dq-tooltip": tooltip,
+      "aria-label": t("messageCost.aria", { amount }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dq-message-cost-separator", "aria-hidden": true, children: "\xB7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dq-message-cost-amount", children: amount })
+      ]
+    }
+  );
+}
+
 // src/client/styles.ts
 var css = `
 .dsh-quota-root{position:absolute;right:16px;bottom:16px;z-index:2147483000;pointer-events:auto;opacity:1;visibility:visible;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:13px;line-height:1.45;color:var(--dsw-alias-label-primary,#1f2328);transition:left .28s cubic-bezier(.22,1,.36,1),top .28s cubic-bezier(.22,1,.36,1),opacity .16s ease-out,visibility 0s linear}
-.dsh-quota-root.dsh-quota-root--dashboard{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease-out,visibility 0s linear .14s}
+.dsh-quota-root.dsh-quota-root--hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease-out,visibility 0s linear .14s}
 .dsh-quota-root.dsh-quota-dragging{transition:none}
 .dsh-quota-card,.dsh-quota-card *{box-sizing:border-box}
 .dsh-quota-card{background:var(--dsw-alias-bg-overlay,#ffffff);border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.12));border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:12px 14px;min-width:208px;max-width:270px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
@@ -2540,12 +2781,28 @@ var css = `
 .dsh-quota-label{color:var(--dsw-alias-label-secondary,#59636e)}
 .dsh-quota-value{color:var(--dsw-alias-label-primary,#1f2328);font-variant-numeric:tabular-nums}
 .dsh-quota-error{color:var(--dsw-alias-state-error-primary,#cf222e)}
+.dq-message-cost{position:relative;display:inline-flex;align-items:center;order:10;gap:10px;height:28px;color:var(--dsw-alias-label-tertiary,#59636e);font-size:12px;line-height:20px;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:help}
+.dq-message-cost-separator{cursor:default}
+.dq-message-cost-amount{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:currentColor;text-underline-offset:4px}
+.dq-message-cost:hover{color:var(--dsw-alias-label-secondary,#3f4852)}
+.dq-message-cost:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px;border-radius:4px}
+.dq-message-cost::after{content:attr(data-dq-tooltip);position:absolute;left:0;top:calc(100% + 6px);z-index:2147483001;width:max-content;max-width:min(240px,calc(100vw - 24px));padding:6px 9px;border-radius:8px;background:var(--dsw-alias-bg-inverse,#1f2328);color:var(--dsw-alias-label-inverse,#fff);box-shadow:0 6px 18px rgba(0,0,0,.22);font-size:12px;font-weight:400;line-height:1.45;text-align:left;white-space:normal;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .12s ease-out,transform .12s cubic-bezier(.22,1,.36,1),visibility 0s linear .12s}
+.dq-message-cost:hover::after,.dq-message-cost:focus-visible::after{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .12s ease-out,transform .12s cubic-bezier(.22,1,.36,1),visibility 0s linear}
+@media (hover:hover){
+  [data-time-hover-root] .dq-message-cost{opacity:0;transition:opacity 80ms ease}
+  [data-time-hover-root]:hover .dq-message-cost,[data-time-hover-root]:focus-within .dq-message-cost{opacity:1}
+}
 /* \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}
@@ -2606,12 +2863,15 @@ var css = `
 .dq-runway[open] .dq-runway-detail{display:block}
 /* hero number for the balance, matching .dq-period-cost; relies on cascade order (declared after
    .dq-stat-value, same specificity) to win over the .dq-stat-value it's paired with in JSX \u2014 keep it below */
+/* \u8F6E\u6B21 47: .dq-remaining is a controlled <details> too now (see dashboard.tsx), same reason as
+   .dq-runway above \u2014 an unopened <details>'s non-summary children don't actually render in current
+   Chromium regardless of author display value, so the old :hover{display:flex} branch was dead code. */
 .dq-remaining{position:relative;font-size:22px;font-weight:680;letter-spacing:-.01em;line-height:1.25}
 .dq-remaining>summary{display:inline-block;list-style:none;border-radius:4px;cursor:pointer;text-decoration:underline dotted var(--dsw-alias-border-l2,rgba(0,0,0,.25));text-underline-offset:4px}
 .dq-remaining>summary::-webkit-details-marker{display:none}
 .dq-remaining>summary:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:3px}
 .dq-remaining-breakdown{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:20;flex-direction:column;gap:4px;padding:8px 10px;background:var(--dsw-alias-bg-overlay,#ffffff);border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.12));border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);white-space:nowrap;font-size:12px;font-weight:500;color:var(--dsw-alias-label-primary,#1f2328)}
-.dq-remaining:hover .dq-remaining-breakdown,.dq-remaining[open] .dq-remaining-breakdown{display:flex}
+.dq-remaining[open] .dq-remaining-breakdown{display:flex}
 .dq-remaining-granted{color:var(--dsw-alias-label-tertiary,#59636e);font-weight:400;font-size:11px}
 /* narrow screens: .dq-balance-grid wraps its 3 stats onto separate lines, so the absolutely-positioned
    .dq-remaining-breakdown/.dq-runway-detail popovers can float down over whichever stat now sits in the
@@ -2758,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}
@@ -2772,7 +3035,11 @@ p.dq-session-sub{margin:8px 0}
 .dq-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;margin-top:14px;padding-top:14px;border-top:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.08))}
 .dq-toggle input{width:16px;height:16px;accent-color:var(--dsw-alias-state-business-primary,#0969da);cursor:pointer}
 .dq-toggle-hint{margin:5px 0 0 26px;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-secondary,#59636e)}
-.dq-toggle input:focus-visible,.dq-model-item input:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px}
+.dq-widget-tabs{align-items:flex-start;flex-direction:column;gap:7px}
+.dq-widget-tab-list{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
+.dq-widget-tab{display:inline-flex;align-items:center;gap:7px;min-height:28px;color:var(--dsw-alias-label-primary,#1f2328);font-size:12px;cursor:pointer}
+.dq-widget-tab input{width:14px;height:14px;margin:0;accent-color:var(--dsw-alias-state-business-primary,#0969da);cursor:pointer;flex:none}
+.dq-toggle input:focus-visible,.dq-model-item input:focus-visible,.dq-widget-tab input:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px}
 .dq-link:focus-visible,.dq-model-btn:focus-visible,.dq-chart-switch-btn:focus-visible,.dq-export-btn:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px}
 .dq-usage-totals{display:flex;flex-wrap:wrap;gap:12px 24px;margin-bottom:16px}
 /* value itself (number+unit, e.g. "9999.9\u4E07") must never break across lines inside its own column \u2014
@@ -2780,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}
@@ -2882,14 +3159,15 @@ p.dq-session-sub{margin:8px 0}
 @media (prefers-reduced-motion:reduce){
   .dsh-quota-root,.dsh-quota-root *,
   .dsh-quota-root *::before,.dsh-quota-root *::after,
+  .dq-message-cost,.dq-message-cost::after,
   .dq-balance,.dq-balance *,
   .dq-balance *::before,.dq-balance *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 }
 `;
 
 // src/client/widget.tsx
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var MARGIN = 16;
 var CORNER_KEY = "widget.corner";
 var COLLAPSED_KEY = "widget.collapsed";
@@ -2937,30 +3215,68 @@ function cornerPos(corner, node, bounds) {
   if (corner === "bl") return { x: xLeft, y: yBottom };
   return { x: xRight, y: yBottom };
 }
-function QuotaWidget() {
+function QuotaWidget(props) {
   const { t } = useI18n();
-  const [visible, setVisible] = (0, import_react5.useState)(widgetVisibleStore.get());
-  (0, import_react5.useEffect)(() => widgetVisibleStore.subscribe(() => setVisible(widgetVisibleStore.get())), []);
-  const [quotaViewActive2, setQuotaViewActive] = (0, import_react5.useState)(quotaViewActiveStore.get());
-  (0, import_react5.useEffect)(() => quotaViewActiveStore.subscribe(() => setQuotaViewActive(quotaViewActiveStore.get())), []);
-  const [lowBalance, setLowBalance] = (0, import_react5.useState)(lowBalanceStore.get());
-  (0, import_react5.useEffect)(() => lowBalanceStore.subscribe(() => setLowBalance(lowBalanceStore.get())), []);
+  const sessionId = props.useSessions((state) => state.current);
+  const [visible, setVisible] = (0, import_react6.useState)(widgetVisibleStore.get());
+  (0, import_react6.useEffect)(() => widgetVisibleStore.subscribe(() => setVisible(widgetVisibleStore.get())), []);
+  const [quotaViewActive2, setQuotaViewActive] = (0, import_react6.useState)(quotaViewActiveStore.get());
+  (0, import_react6.useEffect)(() => quotaViewActiveStore.subscribe(() => setQuotaViewActive(quotaViewActiveStore.get())), []);
+  const [lowBalance, setLowBalance] = (0, import_react6.useState)(lowBalanceStore.get());
+  (0, import_react6.useEffect)(() => lowBalanceStore.subscribe(() => setLowBalance(lowBalanceStore.get())), []);
+  const [selectedTabIds, setSelectedTabIds] = (0, import_react6.useState)(widgetTabIdsStore.get());
+  (0, import_react6.useEffect)(() => widgetTabIdsStore.subscribe(() => setSelectedTabIds(widgetTabIdsStore.get())), []);
+  const [viewTabs, setViewTabs] = (0, import_react6.useState)(() => props.views.list());
+  (0, import_react6.useEffect)(() => props.views.subscribe(() => setViewTabs(props.views.list())), [props.views]);
+  const [activeViewId, setActiveViewId] = (0, import_react6.useState)(null);
   const cachedBalance = getCachedBalance();
-  const [data, setData] = (0, import_react5.useState)(cachedBalance?.data ?? null);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const [loading, setLoading] = (0, import_react5.useState)(cachedBalance === null);
-  const [collapsed, setCollapsed] = (0, import_react5.useState)(() => loadPref(COLLAPSED_KEY, isBoolean, false));
-  const [pos, setPos] = (0, import_react5.useState)(null);
-  const [corner, setCorner] = (0, import_react5.useState)(() => loadPref(CORNER_KEY, isCorner, "br"));
-  const [dragging, setDragging] = (0, import_react5.useState)(false);
-  const rootRef = (0, import_react5.useRef)(null);
-  const dragRef = (0, import_react5.useRef)(null);
+  const [data, setData] = (0, import_react6.useState)(cachedBalance?.data ?? null);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const [loading, setLoading] = (0, import_react6.useState)(cachedBalance === null);
+  const [collapsed, setCollapsed] = (0, import_react6.useState)(() => loadPref(COLLAPSED_KEY, isBoolean, false));
+  const [pos, setPos] = (0, import_react6.useState)(null);
+  const [corner, setCorner] = (0, import_react6.useState)(() => loadPref(CORNER_KEY, isCorner, "br"));
+  const [dragging, setDragging] = (0, import_react6.useState)(false);
+  const rootRef = (0, import_react6.useRef)(null);
+  const dragRef = (0, import_react6.useRef)(null);
   const readUsage = () => {
     const cached = getCachedUsage();
     return { data: cached?.ok === true ? cached.data ?? null : null, at: getCachedUsageAt() };
   };
-  const [usage, setUsage] = (0, import_react5.useState)(readUsage);
-  (0, import_react5.useEffect)(() => subscribeUsage(() => setUsage(readUsage())), []);
+  const [usage, setUsage] = (0, import_react6.useState)(readUsage);
+  (0, import_react6.useEffect)(() => subscribeUsage(() => setUsage(readUsage())), []);
+  const readSessionUsage = (id) => {
+    if (id === void 0) return null;
+    const response = getCachedSessionUsage(id);
+    return response?.ok === true ? response.data ?? null : null;
+  };
+  const [sessionUsage, setSessionUsage] = (0, import_react6.useState)(() => readSessionUsage(sessionId));
+  (0, import_react6.useEffect)(() => {
+    setSessionUsage(readSessionUsage(sessionId));
+    if (sessionId === void 0) return;
+    const unsubscribe = subscribeSessionUsage(sessionId, () => setSessionUsage(readSessionUsage(sessionId)));
+    void fetchSessionUsage(sessionId);
+    return unsubscribe;
+  }, [sessionId]);
+  (0, import_react6.useLayoutEffect)(() => {
+    const viewIds = viewTabs.map((tab) => tab.id);
+    const read = () => {
+      const next = getActiveConversationViewId(getShellFrame(rootRef.current), viewIds);
+      setActiveViewId((previous) => previous === next ? previous : next);
+    };
+    read();
+    const frame = getShellFrame(rootRef.current);
+    let observer = null;
+    if (frame !== null && typeof MutationObserver === "function") {
+      observer = new MutationObserver(read);
+      observer.observe(frame, { subtree: true, childList: true, attributes: true, attributeFilter: ["aria-selected"] });
+    }
+    const poll = setInterval(read, 1e3);
+    return () => {
+      observer?.disconnect();
+      clearInterval(poll);
+    };
+  }, [sessionId, viewTabs]);
   const load = async (showLoading, force = false) => {
     if (showLoading) setLoading(true);
     try {
@@ -2979,14 +3295,14 @@ function QuotaWidget() {
       setLoading(false);
     }
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     void load(true);
     const id = setInterval(() => {
       void load(false);
     }, 6e4);
     return () => clearInterval(id);
   }, []);
-  (0, import_react5.useLayoutEffect)(() => {
+  (0, import_react6.useLayoutEffect)(() => {
     if (!visible || quotaViewActive2) return;
     const node = rootRef.current;
     if (node === null) return;
@@ -3106,49 +3422,68 @@ function QuotaWidget() {
     endDrag(true);
   };
   if (!visible) return null;
+  const allowedOnActiveView = activeViewId === null ? sessionId === void 0 : activeViewId !== "balance" && (selectedTabIds === null || selectedTabIds.includes(activeViewId));
+  const hidden = quotaViewActive2 || !allowedOnActiveView;
   const primary = data !== null && data.balances.length > 0 ? data.balances[0] : null;
   const balanceValue = primary !== null ? Number(primary.total) : Number.NaN;
   const low = lowBalance > 0 && Number.isFinite(balanceValue) && balanceValue < lowBalance;
   const dotClass = primary === null ? "dsh-quota-dot dsh-quota-dot--idle" : data?.isAvailable === false ? "dsh-quota-dot dsh-quota-dot--error" : low ? "dsh-quota-dot dsh-quota-dot--warn" : "dsh-quota-dot";
   const ageMinutes = usage.at === null ? null : Math.floor((Date.now() - usage.at) / 6e4);
   const usageAgeText = ageMinutes === null || ageMinutes < 1 ? t("widget.updatedNow") : t("widget.stale", { minutes: ageMinutes });
+  const sessionCostRow = sessionUsage === null ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "dsh-quota-row", title: t("widget.sessionCostTitle"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "dsh-quota-label", children: t("widget.sessionCost") }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "dsh-quota-value", children: [
+      "\xA5 ",
+      fmtTurnCost(sessionUsage.cost)
+    ] })
+  ] });
   let body = null;
   if (!collapsed) {
     if (loading && data === null && error === null) {
-      body = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dsh-quota-body", children: t("widget.loading") });
+      body = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "dsh-quota-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: t("widget.loading") }),
+        sessionCostRow
+      ] });
     } else if (error !== null && data === null) {
-      body = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dsh-quota-body dsh-quota-error", children: localizeApiError(error, t, "error.query") });
+      body = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "dsh-quota-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "dsh-quota-error", children: localizeApiError(error, t, "error.query") }),
+        sessionCostRow
+      ] });
     } else if (primary !== null) {
-      body = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "dsh-quota-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dsh-quota-remaining-label", children: t("balance.remaining") }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { title: low ? t("widget.lowTitle", { amount: fmt(lowBalance) }) : void 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `dsh-quota-total${low ? " dsh-quota-total--low" : ""}`, children: fmt(primary.total) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-quota-currency", children: primary.currency })
+      body = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "dsh-quota-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "dsh-quota-remaining-label", children: t("balance.remaining") }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { title: low ? t("widget.lowTitle", { amount: fmt(lowBalance) }) : void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `dsh-quota-total${low ? " dsh-quota-total--low" : ""}`, children: fmt(primary.total) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "dsh-quota-currency", children: primary.currency })
         ] }),
-        usage.data !== null && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "dsh-quota-row", title: t("widget.todayCostTitle", { age: usageAgeText }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-quota-label", children: t("widget.todayCost") }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "dsh-quota-value", children: [
+        usage.data !== null && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "dsh-quota-row", title: t("widget.todayCostTitle", { age: usageAgeText }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "dsh-quota-label", children: t("widget.todayCost") }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "dsh-quota-value", children: [
             "\xA5 ",
             fmt(usage.data.summary.today.cost)
           ] })
         ] }),
-        data?.isAvailable === false && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "dsh-quota-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-quota-label", children: t("common.status") }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-quota-value dsh-quota-error", children: t("common.unavailable") })
+        sessionCostRow,
+        data?.isAvailable === false && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "dsh-quota-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "dsh-quota-label", children: t("common.status") }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "dsh-quota-value dsh-quota-error", children: t("common.unavailable") })
         ] })
       ] });
     } else {
-      body = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dsh-quota-body dsh-quota-error", children: t("widget.noBalance") });
+      body = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "dsh-quota-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "dsh-quota-error", children: t("widget.noBalance") }),
+        sessionCostRow
+      ] });
     }
   }
   const style = pos !== null ? { left: `${pos.x}px`, top: `${pos.y}px`, right: "auto", bottom: "auto" } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
-      className: `dsh-quota-root${dragging ? " dsh-quota-dragging" : ""}${quotaViewActive2 ? " dsh-quota-root--dashboard" : ""}`,
+      className: `dsh-quota-root${dragging ? " dsh-quota-dragging" : ""}${hidden ? " dsh-quota-root--hidden" : ""}`,
       style,
-      "aria-hidden": quotaViewActive2,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "aria-hidden": hidden,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "div",
         {
           ref: rootRef,
@@ -3160,14 +3495,14 @@ function QuotaWidget() {
           onPointerCancel: () => endDrag(false),
           onLostPointerCapture: () => endDrag(false),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "dsh-quota-header", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "dsh-quota-title", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-quota-grip", title: t("widget.dragGrip"), children: "\u2807" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: dotClass }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dsh-quota-name", children: t("widget.title") })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "dsh-quota-header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "dsh-quota-title", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "dsh-quota-grip", title: t("widget.dragGrip"), children: "\u2807" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: dotClass }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "dsh-quota-name", children: t("widget.title") })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "dsh-quota-actions", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "dsh-quota-actions", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "button",
                   {
                     className: "dsh-quota-btn",
@@ -3178,11 +3513,12 @@ function QuotaWidget() {
                     onClick: () => {
                       void load(true, true);
                       void fetchUsage(true);
+                      if (sessionId !== void 0) void fetchSessionUsage(sessionId, true);
                     },
                     children: "\u21BB"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "button",
                   {
                     className: "dsh-quota-btn",
@@ -3200,7 +3536,7 @@ function QuotaWidget() {
                 )
               ] })
             ] }),
-            collapsed && primary !== null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dsh-quota-collapsed-total-row", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: `dsh-quota-collapsed-total${low ? " dsh-quota-total--low" : ""}`, children: [
+            collapsed && primary !== null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "dsh-quota-collapsed-total-row", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: `dsh-quota-collapsed-total${low ? " dsh-quota-total--low" : ""}`, children: [
               fmt(primary.total),
               " ",
               primary.currency
@@ -3213,13 +3549,31 @@ function QuotaWidget() {
   );
 }
 
+// src/client/views.ts
+var labelOf = (entry) => {
+  const { id = "", label } = entry.options;
+  try {
+    const resolved = typeof label === "function" ? label() : label;
+    return typeof resolved === "string" && resolved !== "" ? resolved : id;
+  } catch {
+    return id;
+  }
+};
+function conversationViewsSource(slots) {
+  return {
+    list: () => slots.entries("conversation.view").flatMap((entry) => entry.options.id === void 0 ? [] : [{ id: entry.options.id, label: labelOf(entry) }]),
+    subscribe: (fn) => slots.subscribe("conversation.view", fn)
+  };
+}
+
 // src/client/index.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var name = "dsh-usage-dashboard";
 var inject = ["slots", "locale"];
 function apply(ctx) {
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-usage-dashboard: browser dictionaries");
   const t = ctx.locale.bind(NS);
+  const views = conversationViewsSource(ctx.slots);
   if (typeof document !== "undefined") {
     const tag = document.createElement("style");
     tag.dataset.plugin = "dsh-usage-dashboard";
@@ -3232,7 +3586,17 @@ function apply(ctx) {
   });
   ctx.slots.inject("shell.overlay", () => ctx.slots.register(
     { name: "shell.overlay", id: "deepseek-quota", order: 1e3, locale: NS, label: () => t("widget.title") },
-    ({ t: slotT }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorBoundary, { t: slotT, silent: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(QuotaWidget, {}) }) })
+    ({ t: slotT, useSessions }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorBoundary, { t: slotT, silent: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(QuotaWidget, { useSessions, views }) }) })
+  ));
+  ctx.slots.inject("conversation.chat.assistant-actions", () => ctx.slots.register(
+    {
+      name: "conversation.chat.assistant-actions",
+      id: "dsh-usage-turn-cost",
+      order: 5,
+      locale: NS,
+      label: () => t("messageCost.label")
+    },
+    ({ t: slotT, sessionId, messageId }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorBoundary, { t: slotT, silent: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageCost, { sessionId, messageId }) }) })
   ));
   ctx.slots.inject("conversation.view", () => ctx.slots.register(
     { name: "conversation.view", id: "balance", order: 20, locale: NS, label: () => t("nav.quota") },
@@ -3243,7 +3607,7 @@ function apply(ctx) {
     // `sessionId` is typed optional defensively even though the host is
     // expected to always supply it: BalanceDashboard renders the current-
     // session card only when it actually has one, never throws either way.
-    ({ t: slotT, sessionId }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorBoundary, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BalanceDashboard, { sessionId }) }) })
+    ({ t: slotT, sessionId }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorBoundary, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BalanceDashboard, { sessionId, views }) }) })
   ));
 }
 return module.exports; } });