@cassius0924/dsh-usage-dashboard 0.8.1 → 0.9.0

package/lib/client.js

@@ -363,17 +363,24 @@ var zh = {
   "export.jsonHint": "\u542B\u56FE\u8868\u4E0E\u6392\u884C",
   "cache.empty": "\u6682\u65E0\u7F13\u5B58\u547D\u4E2D\u6570\u636E\u3002",
   "cache.rate": "\u7F13\u5B58\u547D\u4E2D\u7387",
-  "cache.saved": "\u5DF2\u8282\u7701\u8D39\u7528\uFF08\u4F30\u7B97\uFF09",
-  "cache.allMiss": "\u82E5\u5168\u90E8\u672A\u547D\u4E2D",
+  "cache.saved": "\u8F83\u5168\u672A\u547D\u4E2D\u7701\u4E0B",
+  "cache.allMiss": "\u82E5\u5168\u672A\u547D\u4E2D",
   "cache.aria": "\u7F13\u5B58\u547D\u4E2D {hit}%\uFF0C\u672A\u547D\u4E2D {miss}%",
   "cache.hitLegend": "\u7F13\u5B58\u547D\u4E2D {tokens}",
   "cache.missLegend": "\u672A\u547D\u4E2D {tokens}\uFF08\u6309\u672A\u547D\u4E2D\u4EF7\u8BA1\u8D39\uFF09",
+  "cache.basis": "\u5B9E\u4ED8 \xA5{cost}\uFF1B\u82E5\u5168\u90E8\u672A\u547D\u4E2D\u7EA6 \xA5{miss}\uFF0C\u4E24\u8005\u5DEE\u989D\u5373\u547D\u4E2D\u7F13\u5B58\u7701\u4E0B\u7684\u8D39\u7528\u3002",
   "peak.empty": "\u6682\u65E0\u7528\u91CF\u3002",
   "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.shift": "\u82E5\u9AD8\u5CF0\u7528\u91CF\u90FD\u632A\u5230\u95F2\u65F6",
-  "peak.saving": "\u53EF\u7701 \xA5{amount}",
+  "peak.shift": "\u9AD8\u5CF0\u6539\u8D70\u95F2\u65F6\u53EF\u7701",
+  "peak.saving": "\xA5{amount}",
+  "peak.basis": "\u5168\u90E8\u6539\u8D70\u95F2\u65F6\u7EA6 \xA5{total}\uFF1B\u6B64\u5904\u6309\u5F53\u524D\u4EF7\u76EE\u4F30\u7B97\uFF0C\u4E0E\u300C\u6D88\u8017\u6982\u89C8 \xB7 \u7D2F\u8BA1\u300D\u7684\u5B9E\u9645\u82B1\u8D39\u53E3\u5F84\u4E0D\u540C\u3002",
+  "peak.clockTitle": "\u4ECA\u65E5\u4EF7\u683C\u65F6\u6BB5",
+  "peak.nowPeak": "\u73B0\u5728\u9AD8\u5CF0 \xB7 \u5168\u4EF7",
+  "peak.nowOff": "\u73B0\u5728\u95F2\u65F6 \xB7 \u534A\u4EF7",
+  "peak.clockAria": "24 \u5C0F\u65F6\u4EF7\u683C\u65F6\u6BB5\uFF0C{state}",
+  "peak.clockHint": "\u5DE5\u4F5C\u65E5 09\u201312\u300114\u201318 \u4E3A\u9AD8\u5CF0\uFF0C\u5176\u4F59\u65F6\u6BB5\u534A\u4EF7\uFF08\u5317\u4EAC\u65F6\u95F4\uFF09",
   "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",
@@ -446,7 +453,7 @@ var zh = {
   "sync.first": "\u9996\u6B21\u540C\u6B65\u4E2D",
   "sync.syncing": "\u540C\u6B65\u4E2D \xB7 \u5F53\u524D\u6570\u636E{age}",
   "sync.fresh": "\u5DF2\u540C\u6B65 \xB7 {age}",
-  "sync.cached": "\u7F13\u5B58\u6570\u636E \xB7 {age}",
+  "sync.cached": "\u672C\u5730\u7F13\u5B58 \xB7 {age}",
   "sync.fallback": "\u7F13\u5B58\u56DE\u9000 \xB7 {age}",
   "sync.error": "\u540C\u6B65\u5931\u8D25 \xB7 \u6682\u65E0\u53EF\u663E\u793A\u7684\u7528\u91CF",
   "status.neverSynced": "\u8FD8\u6CA1\u6709\u6210\u529F\u540C\u6B65\u8FC7\u7528\u91CF\u6570\u636E",
@@ -481,6 +488,7 @@ var zh = {
   "balance.granted": "\u8D60\u9001\u989D\u5EA6 {amount}",
   "balance.runway": "\u9884\u8BA1\u53EF\u7528",
   "balance.runwayBreakdownTitle": "\u67E5\u770B\u9884\u8BA1\u53EF\u7528\u5929\u6570\u8BF4\u660E",
+  "balance.topUpTitle": "\u4F59\u989D\u504F\u4F4E\uFF0C\u524D\u5F80 DeepSeek \u5F00\u653E\u5E73\u53F0\u5145\u503C\uFF08\u65B0\u6807\u7B7E\u9875\u6253\u5F00\uFF09",
   "balance.days": "{count} \u5929",
   "balance.overYear": "> 365 \u5929",
   "balance.noRunway": "\u8FD1 {days} \u5929\u6CA1\u6709\u7528\u91CF\uFF0C\u65E0\u6CD5\u4F30\u7B97",
@@ -510,10 +518,23 @@ var zh = {
   "models.title": "\u6A21\u578B\u6210\u672C\u6392\u884C",
   "sessions.title": "\u4F1A\u8BDD\u6210\u672C\u6392\u884C",
   "links.title": "\u5FEB\u6377\u5165\u53E3",
+  "nav.label": "\u9875\u9762\u5927\u7EB2",
+  "nav.balance": "\u4F59\u989D",
+  "nav.session": "\u5F53\u524D\u4F1A\u8BDD",
+  "nav.overview": "\u6D88\u8017\u6982\u89C8",
+  "nav.trend": "\u7528\u91CF\u8D8B\u52BF",
+  "nav.heatmap": "\u7528\u91CF\u70ED\u529B\u56FE",
+  "nav.models": "\u6A21\u578B\u6210\u672C\u6392\u884C",
+  "nav.sessions": "\u4F1A\u8BDD\u6210\u672C\u6392\u884C",
+  "nav.peakcache": "\u9AD8\u5CF0 / \u7F13\u5B58",
+  "nav.settings": "\u8BBE\u7F6E",
   "links.usage": "\u67E5\u770B\u989D\u5EA6 / \u7528\u91CF",
   "links.apiKey": "\u751F\u6210 API Key",
   "links.status": "\u670D\u52A1\u72B6\u6001",
   "settings.title": "\u8BBE\u7F6E",
+  "settings.groupDisplay": "\u663E\u793A",
+  "settings.groupAlerts": "\u63D0\u9192",
+  "settings.groupLayout": "\u5E03\u5C40\u4E0E\u5165\u53E3",
   "settings.widget": "\u5728\u5176\u4ED6\u9875\u9762\u663E\u793A\u53F3\u4E0B\u89D2\u60AC\u6D6E\u989D\u5EA6\u7A97\u53E3",
   "settings.widgetHint": "\u989D\u5EA6\u9875\u81EA\u52A8\u9690\u85CF\uFF1B\u5176\u4ED6\u9875\u9762\u6309\u4E0B\u65B9\u9009\u62E9\u663E\u793A\u3002",
   "settings.widgetTabs": "\u5C55\u793A\u6D6E\u7A97\u7684\u9875\u9762",
@@ -634,17 +655,24 @@ var en = {
   "export.jsonHint": "Charts and rankings included",
   "cache.empty": "No cache data yet.",
   "cache.rate": "Cache hit rate",
-  "cache.saved": "Estimated savings",
-  "cache.allMiss": "Cost with no hits",
+  "cache.saved": "Saved vs. all-miss",
+  "cache.allMiss": "Cost if all miss",
   "cache.aria": "{hit}% cache hits, {miss}% misses",
   "cache.hitLegend": "Cache hits {tokens}",
   "cache.missLegend": "Misses {tokens} (charged at miss rate)",
+  "cache.basis": "You paid \xA5{cost}; with no cache hits it would be about \xA5{miss}. The difference is what caching saved.",
   "peak.empty": "No usage yet.",
   "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.shift": "If all peak usage moved off-peak",
-  "peak.saving": "Save \xA5{amount}",
+  "peak.shift": "Saving if peak runs off-peak",
+  "peak.saving": "\xA5{amount}",
+  "peak.basis": "All off-peak would cost about \xA5{total}, estimated at current prices \u2014 a different basis from \u201CSpend overview \xB7 All time\u201D.",
+  "peak.clockTitle": "Today's price windows",
+  "peak.nowPeak": "Peak now \xB7 full price",
+  "peak.nowOff": "Off-peak now \xB7 half price",
+  "peak.clockAria": "24-hour price schedule, {state}",
+  "peak.clockHint": "Peak 09\u201312 & 14\u201318 on weekdays; half price otherwise (Beijing time)",
   "vision.empty": "No image input in {window}.",
   "vision.title": "Image / multimodal usage",
   "vision.images": "Images",
@@ -717,7 +745,7 @@ var en = {
   "sync.first": "Syncing for the first time",
   "sync.syncing": "Syncing \xB7 current data {age}",
   "sync.fresh": "Synced \xB7 {age}",
-  "sync.cached": "Cached data \xB7 {age}",
+  "sync.cached": "Local cache \xB7 {age}",
   "sync.fallback": "Using cache \xB7 {age}",
   "sync.error": "Sync failed \xB7 no usage to display",
   "status.neverSynced": "Usage has not synced successfully yet",
@@ -752,6 +780,7 @@ var en = {
   "balance.granted": "Granted {amount}",
   "balance.runway": "Estimated runway",
   "balance.runwayBreakdownTitle": "View estimated runway details",
+  "balance.topUpTitle": "Low balance \u2014 top up on the DeepSeek platform (opens a new tab)",
   "balance.days": "{count} days",
   "balance.overYear": "> 365 days",
   "balance.noRunway": "No usage in the last {days} days, so runway cannot be estimated",
@@ -781,10 +810,23 @@ var en = {
   "models.title": "Model cost ranking",
   "sessions.title": "Session cost ranking",
   "links.title": "Quick Links",
+  "nav.label": "On this page",
+  "nav.balance": "Balance",
+  "nav.session": "This session",
+  "nav.overview": "Spend overview",
+  "nav.trend": "Usage trend",
+  "nav.heatmap": "Usage heatmap",
+  "nav.models": "Model cost",
+  "nav.sessions": "Session cost",
+  "nav.peakcache": "Peak & cache",
+  "nav.settings": "Settings",
   "links.usage": "View balance / usage",
   "links.apiKey": "Create API key",
   "links.status": "Service status",
   "settings.title": "Settings",
+  "settings.groupDisplay": "Display",
+  "settings.groupAlerts": "Alerts",
+  "settings.groupLayout": "Layout & entry",
   "settings.widget": "Show the floating balance widget on other views",
   "settings.widgetHint": "Hidden on Usage; shown on the views selected below.",
   "settings.widgetTabs": "Show widget on",
@@ -837,6 +879,13 @@ var en = {
 
 // src/client/i18n.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var INTL_LOCALES = {
+  zh: "zh-CN",
+  en: "en-US"
+};
+function intlLocale(locale) {
+  return INTL_LOCALES[locale];
+}
 var fallbackT = (key, params) => {
   const template = zh[key];
   if (params === void 0) return template;
@@ -961,6 +1010,7 @@ function ChartTip(props) {
 var MODEL_COLORS = ["#4176e6", "#2da44e", "#e16f24", "#8250df", "#bf8700", "#cf222e", "#1f883d", "#0969da"];
 function Bars(props) {
   const { data, height = 120, labelEvery = 1, minWidth } = props;
+  const { locale } = useI18n();
   const { wrapRef, tip, pinned, show, showFocused, hide, onPointStart, onPointEnd } = useChartTip();
   const scrollRef = (0, import_react3.useRef)(null);
   const initialFocus = lastPopulatedIndex(data.map((datum) => datum.value));
@@ -973,39 +1023,46 @@ function Bars(props) {
   for (const datum of data) if (datum.value > max) max = datum.value;
   const scale = max > 0 ? max : 1;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dq-chart-wrap", ref: wrapRef, onPointerLeave: hide, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bars-scroll", ref: scrollRef, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bars", style: { height: `${height + 18}px`, minWidth: minWidth === void 0 ? void 0 : `${minWidth}px` }, children: data.map((datum, i) => {
-      const h = Math.max(1, Math.round(datum.value / scale * height));
-      const text = datum.title ?? `${datum.label}: ${datum.value.toLocaleString()}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        "div",
-        {
-          className: `dq-bar-col${pinned === i ? " dq-bar-col--pinned" : ""}`,
-          role: "img",
-          "aria-label": text,
-          "aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Home End",
-          tabIndex: i === roving.active ? 0 : -1,
-          ref: (element) => {
-            roving.refs.current[i] = element;
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dq-plot", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dq-yaxis", style: { height: `${height}px` }, "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: max > 0 ? fmtCompact(max, locale) : "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "0" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bars-scroll", ref: scrollRef, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bars", style: { height: `${height + 18}px`, minWidth: minWidth === void 0 ? void 0 : `${minWidth}px` }, children: data.map((datum, i) => {
+        const h = Math.max(1, Math.round(datum.value / scale * height));
+        const text = datum.title ?? `${datum.label}: ${datum.value.toLocaleString()}`;
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            className: `dq-bar-col${pinned === i ? " dq-bar-col--pinned" : ""}`,
+            role: "img",
+            "aria-label": text,
+            "aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Home End",
+            tabIndex: i === roving.active ? 0 : -1,
+            ref: (element) => {
+              roving.refs.current[i] = element;
+            },
+            onPointerMove: (e) => show(e, text),
+            onPointerDown: onPointStart,
+            onPointerUp: (e) => onPointEnd(e, i, text),
+            onFocus: (e) => showFocused(e, text),
+            onBlur: hide,
+            onKeyDown: (e) => roving.onKeyDown(e, i),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bar", style: { height: `${h}px` } }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bar-label", style: { visibility: i % labelEvery === 0 ? "visible" : "hidden" }, children: datum.label })
+            ]
           },
-          onPointerMove: (e) => show(e, text),
-          onPointerDown: onPointStart,
-          onPointerUp: (e) => onPointEnd(e, i, text),
-          onFocus: (e) => showFocused(e, text),
-          onBlur: hide,
-          onKeyDown: (e) => roving.onKeyDown(e, i),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bar", style: { height: `${h}px` } }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bar-label", style: { visibility: i % labelEvery === 0 ? "visible" : "hidden" }, children: datum.label })
-          ]
-        },
-        i
-      );
-    }) }) }),
+          i
+        );
+      }) }) })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartTip, { tip })
   ] });
 }
 function GroupedBars(props) {
   const { series, height = 120, labelEvery = 1, minWidth } = props;
+  const { locale } = useI18n();
   const { wrapRef, tip, pinned, show, showFocused, hide, onPointStart, onPointEnd } = useChartTip();
   const scrollRef = (0, import_react3.useRef)(null);
   const count = series.length > 0 ? series[0].bars.length : 0;
@@ -1015,45 +1072,53 @@ function GroupedBars(props) {
     const scroll = scrollRef.current;
     if (scroll !== null && minWidth !== void 0) scroll.scrollLeft = scroll.scrollWidth;
   }, [count, minWidth]);
-  const scale = maxOrOne(stackedTotals(series, count));
+  const totals = stackedTotals(series, count);
+  const scale = maxOrOne(totals);
+  const axisMax = totals.reduce((m, v) => Math.max(m, v), 0);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dq-chart-wrap", ref: wrapRef, onPointerLeave: hide, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bars-scroll", ref: scrollRef, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bars", style: { height: `${height + 18}px`, minWidth: minWidth === void 0 ? void 0 : `${minWidth}px` }, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        className: "dq-bar-col",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bar-group", children: series.map((s, seriesIndex) => {
-            const datum = s.bars[i];
-            const h = Math.max(1, Math.round(datum.value / scale * height));
-            const text = datum.title ?? `${s.key}: ${datum.value.toLocaleString()}`;
-            const pointIndex = i * series.length + seriesIndex;
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "div",
-              {
-                className: `dq-bar${pinned === pointIndex ? " dq-bar--pinned" : ""}`,
-                style: { height: `${h}px`, background: s.color },
-                role: "img",
-                "aria-label": text,
-                "aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Home End",
-                tabIndex: pointIndex === roving.active ? 0 : -1,
-                ref: (element) => {
-                  roving.refs.current[pointIndex] = element;
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dq-plot", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dq-yaxis", style: { height: `${height}px` }, "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: axisMax > 0 ? fmtCompact(axisMax, locale) : "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "0" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bars-scroll", ref: scrollRef, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bars", style: { height: `${height + 18}px`, minWidth: minWidth === void 0 ? void 0 : `${minWidth}px` }, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: "dq-bar-col",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bar-group", children: series.map((s, seriesIndex) => {
+              const datum = s.bars[i];
+              const h = Math.max(1, Math.round(datum.value / scale * height));
+              const text = datum.title ?? `${s.key}: ${datum.value.toLocaleString()}`;
+              const pointIndex = i * series.length + seriesIndex;
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  className: `dq-bar${pinned === pointIndex ? " dq-bar--pinned" : ""}`,
+                  style: { height: `${h}px`, background: s.color },
+                  role: "img",
+                  "aria-label": text,
+                  "aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Home End",
+                  tabIndex: pointIndex === roving.active ? 0 : -1,
+                  ref: (element) => {
+                    roving.refs.current[pointIndex] = element;
+                  },
+                  onPointerMove: (e) => show(e, text),
+                  onPointerDown: onPointStart,
+                  onPointerUp: (e) => onPointEnd(e, pointIndex, text),
+                  onFocus: (e) => showFocused(e, text),
+                  onBlur: hide,
+                  onKeyDown: (e) => roving.onKeyDown(e, pointIndex)
                 },
-                onPointerMove: (e) => show(e, text),
-                onPointerDown: onPointStart,
-                onPointerUp: (e) => onPointEnd(e, pointIndex, text),
-                onFocus: (e) => showFocused(e, text),
-                onBlur: hide,
-                onKeyDown: (e) => roving.onKeyDown(e, pointIndex)
-              },
-              s.key
-            );
-          }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bar-label", style: { visibility: i % labelEvery === 0 ? "visible" : "hidden" }, children: series[0].bars[i].label })
-        ]
-      },
-      i
-    )) }) }),
+                s.key
+              );
+            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-bar-label", style: { visibility: i % labelEvery === 0 ? "visible" : "hidden" }, children: series[0].bars[i].label })
+          ]
+        },
+        i
+      )) }) })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartTip, { tip })
   ] });
 }
@@ -1102,7 +1167,7 @@ function Heatmap(props) {
         if (datum === null) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dq-heat-cell dq-heat-cell--pad" }, d);
         const text = t("chart.tooltip", {
           head: datum.date,
-          tokens: datum.total.toLocaleString(locale === "en" ? "en-US" : "zh-CN"),
+          tokens: datum.total.toLocaleString(intlLocale(locale)),
           cost: datum.cost.toFixed(2),
           calls: t("common.calls", { count: datum.calls })
         });
@@ -1395,6 +1460,14 @@ function viewOrderForIndex(entries, index, selfId = "balance", fallback = 20) {
   return previous >= next ? previous + 0.5 : (previous + next) / 2;
 }
 
+// src/client/top-up.ts
+var TOP_UP_URL = "https://platform.deepseek.com/top_up";
+var TOP_UP_FLOOR = 10;
+function needsTopUp(balance, warningLine) {
+  if (!Number.isFinite(balance)) return false;
+  return balance < TOP_UP_FLOOR || warningLine > 0 && balance < warningLine;
+}
+
 // src/client/dashboard.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var COMPOSER_FALLBACK_PX = 126;
@@ -1456,9 +1529,10 @@ function Delta(props) {
   const title = `${label} \xA5${fmt(previous)}`;
   if (percent === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-delta dq-delta--flat", title, children: t("delta.flat") });
   const up = percent > 0;
+  const magnitude = Math.abs(percent) >= 1e3 ? "999+" : String(Math.abs(percent));
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: `dq-delta ${up ? "dq-delta--up" : "dq-delta--down"}`, title, children: [
     up ? "\u2191" : "\u2193",
-    Math.abs(percent),
+    magnitude,
     "% ",
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-delta-label", children: label })
   ] });
@@ -1569,7 +1643,7 @@ function CoverageDiagnostics(props) {
   const { t, locale } = useI18n();
   const { coverage } = props;
   const hasGaps = coverage.failedSessions > 0 || coverage.skippedRecords > 0 || coverage.scannedSessions < coverage.listedSessions;
-  const coverageTime = new Intl.DateTimeFormat(locale === "en" ? "en-US" : "zh-CN", {
+  const coverageTime = new Intl.DateTimeFormat(intlLocale(locale), {
     timeZone: "Asia/Shanghai",
     year: "numeric",
     month: "numeric",
@@ -1616,6 +1690,137 @@ function CardTitle(props) {
     props.caption !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-card-caption", children: props.caption })
   ] });
 }
+function SectionNav(props) {
+  const { rootRef, label, sections } = props;
+  const [targets, setTargets] = (0, import_react4.useState)([]);
+  const [active, setActive] = (0, import_react4.useState)(0);
+  const [pos, setPos] = (0, import_react4.useState)({ right: 0, visible: false });
+  const signature = sections.map((section) => `${section.key}:${section.label}`).join("|");
+  (0, import_react4.useEffect)(() => {
+    const root = rootRef.current;
+    if (root === null) return;
+    const nodes = Array.from(root.querySelectorAll(":scope > .dq-card, :scope > .dq-card-pair"));
+    setTargets(nodes.map((el, i) => ({ el, label: sections[i]?.label ?? "" })).filter((item) => item.label !== ""));
+  }, [rootRef, signature]);
+  (0, import_react4.useEffect)(() => {
+    const root = rootRef.current;
+    if (root === null) return;
+    const scrollport = root.closest("[data-conversation-scroll]");
+    const measure = () => {
+      const rect = root.getBoundingClientRect();
+      setPos({ right: window.innerWidth - rect.left + 12, visible: window.innerWidth >= 1200 && rect.left >= 170 });
+    };
+    measure();
+    const scroller = scrollport ?? window;
+    scroller.addEventListener("scroll", measure, { passive: true });
+    window.addEventListener("resize", measure);
+    return () => {
+      scroller.removeEventListener("scroll", measure);
+      window.removeEventListener("resize", measure);
+    };
+  }, [rootRef]);
+  (0, import_react4.useEffect)(() => {
+    if (targets.length === 0) return;
+    const root = rootRef.current;
+    if (root === null) return;
+    const scrollport = root.closest("[data-conversation-scroll]");
+    const onScroll = () => {
+      const base = scrollport === null ? 0 : scrollport.getBoundingClientRect().top;
+      let current = 0;
+      targets.forEach((target, i) => {
+        if (target.el.getBoundingClientRect().top - base <= 120) current = i;
+      });
+      setActive(current);
+    };
+    onScroll();
+    const scroller = scrollport ?? window;
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    return () => scroller.removeEventListener("scroll", onScroll);
+  }, [targets, rootRef]);
+  if (targets.length < 3) return null;
+  const go = (el) => {
+    const root = rootRef.current;
+    const scrollport = root?.closest("[data-conversation-scroll]");
+    const reduce = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const behavior = reduce ? "auto" : "smooth";
+    if (scrollport !== null) {
+      const base = scrollport.getBoundingClientRect().top;
+      scrollport.scrollTo({ top: scrollport.scrollTop + el.getBoundingClientRect().top - base - 12, behavior });
+    } else {
+      window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 12, behavior });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("nav", { className: `dq-sectionnav${pos.visible ? "" : " dq-sectionnav--hidden"}`, style: { right: `${pos.right}px` }, "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ol", { children: targets.map((target, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: `dq-sectionnav-dot${i === active ? " dq-sectionnav-dot--active" : ""}`,
+      "aria-current": i === active ? "true" : void 0,
+      onClick: () => go(target.el),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-sectionnav-label", children: target.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-sectionnav-pip", "aria-hidden": "true" })
+      ]
+    }
+  ) }, `${target.label}-${String(i)}`)) }) });
+}
+function Collapsible(props) {
+  const ref = (0, import_react4.useRef)(null);
+  const animationRef = (0, import_react4.useRef)(null);
+  const open = props.open;
+  (0, import_react4.useLayoutEffect)(() => {
+    const el = ref.current;
+    if (el === null) return;
+    animationRef.current?.cancel();
+    animationRef.current = null;
+    const reduce = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const canAnimate = typeof el.animate === "function" && !reduce;
+    const reset = () => {
+      el.style.height = "";
+      el.style.overflow = "";
+      el.style.opacity = "";
+    };
+    if (open) {
+      if (!canAnimate) {
+        el.style.display = "";
+        reset();
+        return;
+      }
+      el.style.display = "block";
+      el.style.overflow = "hidden";
+      el.style.height = "0px";
+      el.style.opacity = "0";
+      const height2 = el.scrollHeight;
+      const animation2 = el.animate(
+        [{ height: "0px", opacity: 0 }, { height: `${height2}px`, opacity: 1 }],
+        { duration: 300, easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
+      );
+      animationRef.current = animation2;
+      animation2.addEventListener("finish", reset);
+      return () => animation2.cancel();
+    }
+    if (el.style.display === "none") return;
+    if (!canAnimate) {
+      reset();
+      el.style.display = "none";
+      return;
+    }
+    const height = el.getBoundingClientRect().height || el.scrollHeight;
+    el.style.overflow = "hidden";
+    el.style.height = `${height}px`;
+    const animation = el.animate(
+      [{ height: `${height}px`, opacity: 1 }, { height: "0px", opacity: 0 }],
+      { duration: 220, easing: "cubic-bezier(0.4, 0, 1, 1)" }
+    );
+    animationRef.current = animation;
+    animation.addEventListener("finish", () => {
+      reset();
+      el.style.display = "none";
+    });
+    return () => animation.cancel();
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, children: props.children });
+}
 function Stat(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-stat", children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-stat-label", children: props.label }),
@@ -1711,7 +1916,7 @@ function SessionUsageCard(props) {
   const { t, locale } = useI18n();
   const { data } = props;
   if (data.calls === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-empty", children: t("sessionUsage.empty") });
-  const rangeTime = new Intl.DateTimeFormat(locale === "en" ? "en-US" : "zh-CN", {
+  const rangeTime = new Intl.DateTimeFormat(intlLocale(locale), {
     timeZone: "Asia/Shanghai",
     year: "numeric",
     month: "numeric",
@@ -1821,7 +2026,8 @@ function CacheCard(props) {
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-legend-swatch dq-legend-swatch--miss" }),
         t("cache.missLegend", { tokens: fmtCompact(totals.input, locale) })
       ] })
-    ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "dq-cache-foot", children: t("cache.basis", { cost: fmt(totals.cost), miss: fmt(wouldHaveCost) }) })
   ] });
 }
 function VisionCard(props) {
@@ -1864,11 +2070,44 @@ function VisionCard(props) {
 function PeakCard(props) {
   const { t, locale } = useI18n();
   const { split, pricing } = props;
+  const [nowMs, setNowMs] = (0, import_react4.useState)(() => Date.now());
+  (0, import_react4.useEffect)(() => {
+    const id = setInterval(() => setNowMs(Date.now()), 6e4);
+    return () => clearInterval(id);
+  }, []);
   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 beijing = new Date(nowMs + 8 * 36e5);
+  const hour = beijing.getUTCHours();
+  const minute = beijing.getUTCMinutes();
+  const weekday = beijing.getUTCDay();
+  const weekend = weekday === 0 || weekday === 6;
+  const windows = pricing.peakWindows.map((w) => w.match(/(\d{1,2}):\d{2}\D+(\d{1,2}):\d{2}/)).filter((m) => m !== null).map((m) => [Number(m[1]), Number(m[2])]);
+  const isPeakNow = !weekend && windows.some(([from, to]) => hour >= from && hour < to);
+  const nowPercent = (hour + minute / 60) / 24 * 100;
+  const clockCells = Array.from({ length: 24 }, (_, h) => !weekend && windows.some(([from, to]) => h >= from && h < to));
+  const nowState = isPeakNow ? t("peak.nowPeak") : t("peak.nowOff");
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-peak", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-clock", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-clock-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-clock-title", children: t("peak.clockTitle") }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `dq-clock-status ${isPeakNow ? "dq-clock-status--peak" : "dq-clock-status--off"}`, children: nowState })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-clock-track", role: "img", "aria-label": t("peak.clockAria", { state: nowState }), children: [
+        clockCells.map((peak, h) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `dq-clock-cell${peak ? " dq-clock-cell--peak" : ""}` }, h)),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-clock-now", style: { left: `${nowPercent}%` }, "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-clock-scale", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "24" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "dq-clock-hint", children: t("peak.clockHint") })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       {
@@ -1898,12 +2137,9 @@ function PeakCard(props) {
     ] }),
     /* @__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.jsx)("div", { className: "dq-stat-value dq-stat-value--ok", children: t("peak.saving", { amount: fmt(shiftSaving) }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "dq-peak-foot", children: t("peak.basis", { total: fmt(split.offPeakEraCost) }) })
   ] });
 }
 function agoText(ms, t) {
@@ -2143,6 +2379,7 @@ function BalanceDashboard(props) {
   const [usageUpdatedAt, setUsageUpdatedAt] = (0, import_react4.useState)(cachedUsageAt);
   const [syncState, setSyncState] = (0, import_react4.useState)(cachedUsageAt === null ? "syncing" : "cached");
   const [freshnessNow, setFreshnessNow] = (0, import_react4.useState)(Date.now());
+  const [settingsOpen, setSettingsOpen] = (0, import_react4.useState)(false);
   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());
@@ -2401,6 +2638,7 @@ function BalanceDashboard(props) {
   const avgDailyCost = recentDays.length > 0 ? recentDays.reduce((sum, d) => sum + d.cost, 0) / recentDays.length : 0;
   const balanceValue = primary !== null ? Number(primary.total) : Number.NaN;
   const balanceLow = lowBalance > 0 && Number.isFinite(balanceValue) && balanceValue < lowBalance;
+  const topUpPrompt = needsTopUp(balanceValue, lowBalance);
   const daysLeft = avgDailyCost > 0 && Number.isFinite(balanceValue) ? balanceValue / avgDailyCost : null;
   const daysLeftText = daysLeft === null ? "\u2014" : daysLeft >= 365 ? t("balance.overYear") : t("balance.days", { count: daysLeft < 10 ? daysLeft.toFixed(1) : Math.round(daysLeft) });
   const runwayTitle = daysLeft === null ? t("balance.noRunway", { days: recentDays.length || 7 }) : t("balance.runwayTitle", { days: recentDays.length, cost: fmt(avgDailyCost) });
@@ -2508,7 +2746,18 @@ function BalanceDashboard(props) {
     // column, then narrows in place — no flash of the old width).
     ...composerWidth !== null ? { "--dq-composer-w": `${composerWidth}px` } : {}
   };
+  const navSections = [
+    { key: "balance", label: t("nav.balance") },
+    ...props.sessionId !== void 0 && props.sessionId !== "" ? [{ key: "session", label: t("nav.session") }] : [],
+    { key: "overview", label: t("nav.overview") },
+    { key: "trend", label: t("nav.trend") },
+    { key: "heatmap", label: t("nav.heatmap") },
+    { key: "models", label: t("nav.models") },
+    { key: "sessions", label: t("nav.sessions") },
+    { key: "peakcache", label: t("nav.peakcache") }
+  ];
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-balance", ref: rootRef, style: composerSafeAreaStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SectionNav, { rootRef, label: t("nav.label"), sections: navSections }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-status-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-status-messages", children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -2517,7 +2766,7 @@ function BalanceDashboard(props) {
             className: `dq-sync dq-sync--${syncState}`,
             role: "status",
             "aria-live": "polite",
-            title: usageUpdatedAt === null ? t("status.neverSynced") : t("status.usageTime", { time: new Date(usageUpdatedAt).toLocaleString(locale === "en" ? "en-US" : "zh-CN", { timeZone: "Asia/Shanghai" }) }),
+            title: usageUpdatedAt === null ? t("status.neverSynced") : t("status.usageTime", { time: new Date(usageUpdatedAt).toLocaleString(intlLocale(locale), { timeZone: "Asia/Shanghai" }) }),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-sync-dot", "aria-hidden": "true" }),
               syncStatusText(syncState, usageUpdatedAt, freshnessNow, t)
@@ -2527,23 +2776,39 @@ function BalanceDashboard(props) {
         noticeText !== null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-warn", children: noticeText }),
         errorText !== null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-error", children: errorText })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-        "button",
-        {
-          type: "button",
-          className: "dq-refresh-btn",
-          title: t("status.forceRefresh"),
-          disabled: refreshing,
-          "aria-busy": refreshing,
-          onClick: () => {
-            void load(true);
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `dq-refresh-icon${refreshing ? " dq-refresh-icon--spin" : ""}`, children: "\u21BB" }),
-            refreshing ? t("status.refreshing") : t("status.refresh")
-          ]
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-status-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "dq-settings-btn",
+            "aria-expanded": settingsOpen,
+            "aria-controls": "dq-settings-panel",
+            onClick: () => setSettingsOpen((open) => !open),
+            children: [
+              t("settings.title"),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `dq-settings-caret${settingsOpen ? " dq-settings-caret--open" : ""}`, "aria-hidden": "true", children: "\u25BE" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "dq-refresh-btn",
+            title: t("status.forceRefresh"),
+            disabled: refreshing,
+            "aria-busy": refreshing,
+            onClick: () => {
+              void load(true);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `dq-refresh-icon${refreshing ? " dq-refresh-icon--spin" : ""}`, children: "\u21BB" }),
+              refreshing ? t("status.refreshing") : t("status.refresh")
+            ]
+          }
+        )
+      ] })
     ] }),
     balanceLow && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-alert", role: "status", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-alert-icon", "aria-hidden": "true", children: "!" }),
@@ -2551,7 +2816,7 @@ function BalanceDashboard(props) {
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: t("alert.lowTitle", { balance: fmt(balanceValue), currency: primary?.currency, threshold: fmt(lowBalance) }) }),
         daysLeft !== null && t("alert.runway", { days: daysLeftText }),
         t("common.period"),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "dq-alert-link", href: "https://platform.deepseek.com/top_up", target: "_blank", rel: "noreferrer", children: t("alert.topUp") })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "dq-alert-link", href: TOP_UP_URL, target: "_blank", rel: "noreferrer", children: t("alert.topUp") })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-card dq-card--hero", children: [
@@ -2592,33 +2857,177 @@ function BalanceDashboard(props) {
         ] }),
         /* @__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") }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "details",
-            {
-              className: `dq-stat-value dq-runway${daysLeft !== null && daysLeft < 3 ? " dq-stat-value--bad" : ""}`,
-              open: runwayHovering || runwayManuallyOpened,
-              onPointerEnter: () => setRunwayHovering(true),
-              onPointerLeave: () => setRunwayHovering(false),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "summary",
-                  {
-                    title: t("balance.runwayBreakdownTitle"),
-                    onClick: (e) => {
-                      e.preventDefault();
-                      setRunwayManuallyOpened((v) => !v);
-                    },
-                    children: daysLeftText
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-runway-detail", children: runwayTitle })
-              ]
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-runway-line", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "details",
+              {
+                className: `dq-stat-value dq-runway${daysLeft !== null && daysLeft < 3 ? " dq-stat-value--bad" : ""}`,
+                open: runwayHovering || runwayManuallyOpened,
+                onPointerEnter: () => setRunwayHovering(true),
+                onPointerLeave: () => setRunwayHovering(false),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "summary",
+                    {
+                      title: t("balance.runwayBreakdownTitle"),
+                      onClick: (e) => {
+                        e.preventDefault();
+                        setRunwayManuallyOpened((v) => !v);
+                      },
+                      children: daysLeftText
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-runway-detail", children: runwayTitle })
+                ]
+              }
+            ),
+            topUpPrompt && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("a", { className: "dq-topup", href: TOP_UP_URL, target: "_blank", rel: "noreferrer", title: t("balance.topUpTitle"), children: [
+              t("alert.topUp"),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-topup-arrow", "aria-hidden": "true", children: "\u2197" })
+            ] })
+          ] })
         ] }),
         balance?.isAvailable === false && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Stat, { label: t("common.status"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-stat-value dq-stat-value--bad", children: t("common.unavailable") }) })
       ] }) : loadingBalance ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BalanceSkeleton, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-empty", children: t("balance.empty") })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Collapsible, { open: settingsOpen, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-settings-panel", id: "dq-settings-panel", role: "region", "aria-label": t("settings.title"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardTitle, { children: t("settings.title") }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-setting-group-title", children: t("settings.groupDisplay") }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "dq-toggle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", checked: widgetOn, onChange: toggle }),
+          /* @__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-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-setting-group-title", children: t("settings.groupAlerts") }),
+        /* @__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: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                id: "dq-low-balance",
+                className: "dq-number",
+                type: "number",
+                min: 0,
+                step: 1,
+                value: lowBalance,
+                onChange: (e) => changeLowBalance(Math.max(0, Number(e.target.value) || 0))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-setting-hint", children: lowBalance > 0 ? t("settings.lowBalanceOn", { amount: fmt(lowBalance), currency: primary?.currency ?? "CNY" }) : t("settings.lowBalanceOff") })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "dq-setting-label", htmlFor: "dq-monthly-budget", children: t("settings.monthlyBudget") }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting-control", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                ref: budgetInputRef,
+                id: "dq-monthly-budget",
+                className: "dq-number",
+                type: "number",
+                min: 0,
+                step: 10,
+                value: monthlyBudget,
+                "aria-describedby": "dq-monthly-budget-hint",
+                onChange: (e) => changeMonthlyBudget(Math.max(0, Number(e.target.value) || 0))
+              }
+            ),
+            /* @__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.jsxs)("div", { className: "dq-setting-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-setting-group-title", children: t("settings.groupLayout") }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "dq-setting-label", htmlFor: "dq-sidebar-entry", children: t("settings.sidebarEntry") }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting-control", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "select",
+              {
+                id: "dq-sidebar-entry",
+                className: "dq-select",
+                value: sidebarEntry,
+                onChange: (e) => changeSidebarEntry(e.target.value),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "off", children: t("settings.sidebarEntryOff") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "top", children: t("settings.sidebarEntryTop") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "bottom", children: t("settings.sidebarEntryBottom") })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-setting-hint", children: t("settings.sidebarEntryHint") })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-setting-label", id: "dq-tab-order-label", children: t("settings.tabPosition") }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting-control", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "div",
+              {
+                className: "dq-tab-order",
+                role: "group",
+                "aria-labelledby": "dq-tab-order-label",
+                "aria-describedby": "dq-tab-order-hint",
+                onDragOver: onOrderDragOver,
+                onDrop: onOrderDrop,
+                children: viewTabs.map((tab, index) => {
+                  const current = tab.id === "balance";
+                  const dropTarget = tabDragging && !current && tabDropTarget === index;
+                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "span",
+                    {
+                      className: `dq-tab-chip${current ? " dq-tab-chip--current" : ""}${current && tabDragging ? " dq-tab-chip--dragging" : ""}${dropTarget ? " dq-tab-chip--drop-target" : ""}`,
+                      draggable: current,
+                      tabIndex: current ? 0 : void 0,
+                      role: current ? "button" : void 0,
+                      "aria-label": current ? t("settings.tabDragAria") : void 0,
+                      onDragStart: current ? onQuotaTabDragStart : void 0,
+                      onDragEnd: current ? endTabDrag : void 0,
+                      onDragOver: (event) => onChipDragOver(event, index),
+                      onDrop: (event) => onChipDrop(event, index),
+                      onKeyDown: current ? onQuotaTabKeyDown : void 0,
+                      children: tab.label
+                    },
+                    tab.id
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: "dq-tab-order-hint", className: "dq-setting-hint", children: t("settings.tabPositionHint") })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-setting-group-title", children: t("links.title") }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-links", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Link, { href: "https://platform.deepseek.com/usage", children: t("links.usage") }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Link, { href: "https://platform.deepseek.com/api_keys", children: t("links.apiKey") }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Link, { href: "https://status.deepseek.com", children: t("links.status") })
+        ] })
+      ] })
+    ] }) }),
     props.sessionId !== void 0 && props.sessionId !== "" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-card dq-card--primary", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardTitle, { caption: t("common.estimated"), children: t("sessionUsage.title") }),
       sessionUsage !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SessionUsageCard, { data: sessionUsage }) : loadingSessionUsage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SessionUsageSkeleton, {}) : sessionUsageError !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-empty dq-empty--error", children: localizeApiError(sessionUsageError, t, "error.query") }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-empty", children: t("sessionUsage.empty") })
@@ -2645,7 +3054,10 @@ function BalanceDashboard(props) {
         {
           spent: usage.summary.month.cost,
           budget: monthlyBudget,
-          onConfigure: () => budgetInputRef.current?.focus()
+          onConfigure: () => {
+            setSettingsOpen(true);
+            window.setTimeout(() => budgetInputRef.current?.focus(), 80);
+          }
         }
       ),
       usage !== null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PricingNote, { pricing: usage.pricing })
@@ -2773,134 +3185,7 @@ function BalanceDashboard(props) {
         ] }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-empty", children: t("cache.empty") })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardTitle, { children: t("settings.title") }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-links-title", children: t("links.title") }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-links", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Link, { href: "https://platform.deepseek.com/usage", children: t("links.usage") }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Link, { href: "https://platform.deepseek.com/api_keys", children: t("links.apiKey") }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Link, { href: "https://status.deepseek.com", children: t("links.status") })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "dq-toggle", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", checked: widgetOn, onChange: toggle }),
-        /* @__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: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "input",
-            {
-              id: "dq-low-balance",
-              className: "dq-number",
-              type: "number",
-              min: 0,
-              step: 1,
-              value: lowBalance,
-              onChange: (e) => changeLowBalance(Math.max(0, Number(e.target.value) || 0))
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-setting-hint", children: lowBalance > 0 ? t("settings.lowBalanceOn", { amount: fmt(lowBalance), currency: primary?.currency ?? "CNY" }) : t("settings.lowBalanceOff") })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "dq-setting-label", htmlFor: "dq-monthly-budget", children: t("settings.monthlyBudget") }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting-control", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "input",
-            {
-              ref: budgetInputRef,
-              id: "dq-monthly-budget",
-              className: "dq-number",
-              type: "number",
-              min: 0,
-              step: 10,
-              value: monthlyBudget,
-              "aria-describedby": "dq-monthly-budget-hint",
-              onChange: (e) => changeMonthlyBudget(Math.max(0, Number(e.target.value) || 0))
-            }
-          ),
-          /* @__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.jsxs)("div", { className: "dq-setting", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "dq-setting-label", htmlFor: "dq-sidebar-entry", children: t("settings.sidebarEntry") }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting-control", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "select",
-            {
-              id: "dq-sidebar-entry",
-              className: "dq-select",
-              value: sidebarEntry,
-              onChange: (e) => changeSidebarEntry(e.target.value),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "off", children: t("settings.sidebarEntryOff") }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "top", children: t("settings.sidebarEntryTop") }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "bottom", children: t("settings.sidebarEntryBottom") })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-setting-hint", children: t("settings.sidebarEntryHint") })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-setting-label", id: "dq-tab-order-label", children: t("settings.tabPosition") }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-setting-control", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "div",
-            {
-              className: "dq-tab-order",
-              role: "group",
-              "aria-labelledby": "dq-tab-order-label",
-              "aria-describedby": "dq-tab-order-hint",
-              onDragOver: onOrderDragOver,
-              onDrop: onOrderDrop,
-              children: viewTabs.map((tab, index) => {
-                const current = tab.id === "balance";
-                const dropTarget = tabDragging && !current && tabDropTarget === index;
-                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "span",
-                  {
-                    className: `dq-tab-chip${current ? " dq-tab-chip--current" : ""}${current && tabDragging ? " dq-tab-chip--dragging" : ""}${dropTarget ? " dq-tab-chip--drop-target" : ""}`,
-                    draggable: current,
-                    tabIndex: current ? 0 : void 0,
-                    role: current ? "button" : void 0,
-                    "aria-label": current ? t("settings.tabDragAria") : void 0,
-                    onDragStart: current ? onQuotaTabDragStart : void 0,
-                    onDragEnd: current ? endTabDrag : void 0,
-                    onDragOver: (event) => onChipDragOver(event, index),
-                    onDrop: (event) => onChipDrop(event, index),
-                    onKeyDown: current ? onQuotaTabKeyDown : void 0,
-                    children: tab.label
-                  },
-                  tab.id
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: "dq-tab-order-hint", className: "dq-setting-hint", children: t("settings.tabPositionHint") })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "dq-footer", children: "@cassius0924/dsh-usage-dashboard v0.8.1" })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "dq-footer", children: "@cassius0924/dsh-usage-dashboard v0.9.0" })
   ] });
 }
 
@@ -3350,6 +3635,17 @@ var css = `
 .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;line-height:1.5;color:var(--dsw-alias-label-primary,#1f2328)}
 .dq-remaining[open] .dq-remaining-breakdown{display:flex}
 .dq-remaining-granted{color:var(--dsw-alias-label-secondary,#59636e);font-weight:400;font-size:12px}
+/* Low-balance top-up shortcut beside the runway value. It is an <a>, not a
+   <button>, because it leaves the app; the \u2197 glyph states that. Colours come
+   from the host's primary-button tokens (the same pair DSH's own filled
+   buttons use) so the page keeps exactly one filled call to action instead of
+   reading as another filter chip. Height stays on the runway text line so the
+   hero row does not grow. */
+.dq-runway-line{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
+.dq-topup{display:inline-flex;align-items:center;gap:2px;height:26px;padding:0 10px;border-radius:var(--dsw-radius-sm,8px);background:var(--dsw-alias-button-primary-fill,#0969da);color:var(--dsw-alias-label-primary-foreground,#fff);font-size:12px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:background .15s ease}
+.dq-topup:hover{background:var(--dsw-alias-button-primary-hover,#0757ba)}
+.dq-topup:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px}
+.dq-topup-arrow{font-size:10px;line-height:1;transform:translateY(-1px)}
 /* 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
    next row (e.g. "\u4F59\u989D\u660E\u7EC6" open covering "\u9884\u8BA1\u53EF\u7528"'s clickable summary) \u2014 force each stat onto its own
@@ -3403,7 +3699,11 @@ var css = `
 .dq-pricing-table{border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;min-width:100%}
 .dq-pricing-table th{text-align:left;font-weight:500;color:var(--dsw-alias-label-secondary,#59636e);padding:4px 12px 4px 0;white-space:nowrap;border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.08))}
 .dq-pricing-table td{padding:4px 12px 4px 0;color:var(--dsw-alias-label-primary,#1f2328);white-space:nowrap;vertical-align:top}
-.dq-pricing-table th:nth-child(n+3),.dq-pricing-table td:nth-child(n+3){text-align:right}
+/* Align by counting from the end: a peak row starts with the rowSpan'd model
+   cell (5 cells) while its off-peak pair starts at \u65F6\u6BB5 (4 cells), so
+   nth-child(n+3) left the off-peak cache-hit price stranded under \u65F6\u6BB5. The
+   last three cells are the three price columns in both row shapes. */
+.dq-pricing-table th:nth-last-child(-n+3),.dq-pricing-table td:nth-last-child(-n+3){text-align:right}
 .dq-pricing-table th:last-child,.dq-pricing-table td:last-child{padding-right:0}
 .dq-pricing-table tbody td:first-child{font-weight:500}
 .dq-pricing-table tbody tr+tr td{border-top:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.05))}
@@ -3435,8 +3735,23 @@ var css = `
 .dq-legend-swatch--peak{background:var(--dsw-alias-state-warning-primary,#bf8700)}
 .dq-legend-swatch--offpeak{background:var(--dsw-alias-state-success-primary,#2da44e);opacity:.85}
 .dq-peak-figures{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:16px}
-.dq-peak-delta{font-size:12px;font-weight:500;margin-left:8px;color:var(--dq-text-warn)}
-.dq-peak-delta--save{color:var(--dq-text-success)}
+.dq-peak-foot{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--dsw-alias-label-secondary,#59636e);text-wrap:pretty}
+.dq-clock{margin-bottom:16px}
+.dq-clock-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
+.dq-clock-title{font-size:12px;font-weight:600;color:var(--dsw-alias-label-secondary,#59636e)}
+.dq-clock-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
+.dq-clock-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
+.dq-clock-status--peak{color:var(--dq-text-warn);background:rgba(191,135,0,.12)}
+.dq-clock-status--off{color:var(--dq-text-success);background:rgba(45,164,78,.12)}
+.dq-clock-track{position:relative;display:flex;gap:1px;height:10px}
+.dq-clock-cell{flex:1 1 0;height:100%;background:var(--dsw-alias-state-success-primary,#2da44e);opacity:.55}
+.dq-clock-cell--peak{background:var(--dsw-alias-state-warning-primary,#bf8700);opacity:.92}
+.dq-clock-cell:first-child{border-radius:999px 0 0 999px}
+.dq-clock-cell:last-child{border-radius:0 999px 999px 0}
+.dq-clock-now{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--dsw-alias-label-primary,#1f2328);border-radius:2px;transform:translateX(-1px)}
+.dq-clock-now::before{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--dsw-alias-label-primary,#1f2328)}
+.dq-clock-scale{display:flex;justify-content:space-between;margin-top:4px;font-size:10px;color:var(--dsw-alias-label-tertiary,#59636e);font-variant-numeric:tabular-nums}
+.dq-clock-hint{margin:6px 0 0;font-size:11px;line-height:1.5;color:var(--dsw-alias-label-secondary,#59636e)}
 .dq-cache-figures{display:flex;flex-wrap:wrap;gap:12px 32px;margin-bottom:12px}
 @media (max-width:620px){.dq-cache-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}.dq-cache-figures .dq-stat{min-width:0}}
 .dq-muted-value{color:var(--dsw-alias-label-secondary,#59636e)!important;font-weight:500}
@@ -3502,12 +3817,29 @@ var css = `
 .dq-setting-label{width:128px;font-size:13px;font-weight:500;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}
+.dq-setting-group{margin-top:28px}
+.dq-setting-group:first-of-type{margin-top:0}
+.dq-setting-group-title{font-size:12px;font-weight:600;color:var(--dsw-alias-label-secondary,#59636e);margin:0 0 10px;letter-spacing:.02em}
+.dq-setting-group .dq-toggle{margin-top:0}
+.dq-setting-group .dq-setting{margin-top:16px}
 /* 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:16px 0 0;font-size:12px;text-align:center;color:var(--dsw-alias-label-tertiary,#59636e)}
+.dq-sectionnav{position:fixed;top:50%;transform:translateY(-50%);z-index:20;width:max-content;pointer-events:none}
+.dq-sectionnav--hidden{display:none}
+.dq-sectionnav ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;pointer-events:auto}
+.dq-sectionnav li{display:flex;justify-content:flex-end}
+.dq-sectionnav-dot{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;padding:4px 2px;border:0;background:transparent;border-radius:6px;cursor:pointer;color:var(--dsw-alias-label-secondary,#59636e);font-size:12px;line-height:1.2;white-space:nowrap;transition:color .15s ease,background .15s ease}
+.dq-sectionnav-dot:hover,.dq-sectionnav-dot:focus-visible{color:var(--dsw-alias-label-primary,#1f2328);background:var(--dsw-alias-bg-layer-2,rgba(120,130,150,.10))}
+.dq-sectionnav-dot:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:1px}
+.dq-sectionnav-label{font-size:12px;color:inherit}
+.dq-sectionnav-pip{flex:none;width:9px;height:9px;border-radius:50%;background:var(--dsw-alias-border-l2,rgba(0,0,0,.22));transition:background .15s ease,transform .15s ease}
+.dq-sectionnav-dot:hover .dq-sectionnav-pip{background:var(--dsw-alias-label-secondary,#59636e)}
+.dq-sectionnav-dot--active{color:var(--dsw-alias-label-primary,#1f2328);font-weight:600}
+.dq-sectionnav-dot--active .dq-sectionnav-pip{background:var(--dsw-alias-state-business-primary,#0969da);transform:scale(1.25)}
+@media (max-width:1199px){.dq-sectionnav{display:none}}
 .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:13px;font-weight:500;color:var(--dsw-alias-label-primary,#1f2328);margin:0 0 12px}
 .dq-links{display:flex;flex-wrap:wrap;gap:8px}
 .dq-link{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));border-radius:8px;background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-primary,#1f2328);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer}
 .dq-link::after{content:"\u2197";font-size:12px;color:var(--dsw-alias-label-secondary,#59636e)}
@@ -3574,7 +3906,10 @@ var css = `
 .dq-chart-switch-btn:hover{color:var(--dsw-alias-label-primary,#1f2328)}
 .dq-chart-switch-btn--on{background:var(--dsw-alias-bg-overlay,#fff);color:var(--dsw-alias-label-primary,#1f2328);box-shadow:0 1px 3px rgba(0,0,0,.14)}
 .dq-chart-wrap{position:relative}
-.dq-bars-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
+.dq-plot{display:flex;align-items:flex-end;gap:8px}
+.dq-yaxis{flex:none;width:46px;display:flex;flex-direction:column;justify-content:space-between;margin-bottom:18px;font-size:11px;line-height:1;color:var(--dsw-alias-label-secondary,#59636e);font-variant-numeric:tabular-nums;text-align:right;pointer-events:none}
+.dq-yaxis span{white-space:nowrap}
+.dq-bars-scroll{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
 .dq-tip{position:absolute;transform:translate(-50%,14px);z-index:40;pointer-events:none;background:var(--dsw-alias-tooltip-bg,#1f2328);color:var(--dsw-static-neutral-bluish-00,#fff);border-radius:8px;padding:7px 10px;font-size:12px;line-height:1.5;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.28);font-variant-numeric:tabular-nums}
 .dq-tip--above{transform:translate(-50%,calc(-100% - 8px))}
 .dq-tip-head{font-weight:600;margin-bottom:2px}
@@ -3595,13 +3930,13 @@ var css = `
 .dq-heat-cell--pinned{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:1px;position:relative;z-index:2}
 .dq-bar-label{font-size:12px;color:var(--dsw-alias-label-secondary,#59636e);text-align:center;margin-top:4px;overflow:visible;white-space:nowrap}
 .dq-heat{display:flex;flex-direction:column;gap:8px;max-width:100%}
-.dq-heat-scroll{overflow-x:auto;padding-bottom:2px}
-.dq-heatmap{display:flex;gap:3px}
-.dq-heat-week{display:flex;flex:1 1 0;min-width:6px;flex-direction:column;gap:3px}
-.dq-heat-cell{width:100%;aspect-ratio:1/1;border-radius:3px;flex:none}
+.dq-heat-scroll{overflow:hidden;padding-bottom:2px}
+.dq-heatmap{display:flex;gap:2px}
+.dq-heat-week{display:flex;flex:1 1 0;min-width:0;flex-direction:column;gap:2px}
+.dq-heat-cell{width:100%;aspect-ratio:1/1;border-radius:2px;flex:none;min-width:0}
 .dq-heat-cell--pad{background:transparent}
-.dq-heat-months{display:flex;gap:3px;margin-top:4px}
-.dq-heat-month{flex:1 1 0;min-width:6px;font-size:12px;line-height:15px;color:var(--dsw-alias-label-secondary,#59636e);white-space:nowrap;overflow:visible}
+.dq-heat-months{display:flex;gap:2px;margin-top:4px}
+.dq-heat-month{flex:1 1 0;min-width:0;font-size:12px;line-height:15px;color:var(--dsw-alias-label-secondary,#59636e);white-space:nowrap;overflow:visible}
 .dq-heat-key{width:12px;height:12px;border-radius:2px;flex:none}
 .dq-heat-scale{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--dsw-alias-label-secondary,#59636e);align-self:flex-end}
 .dq-heat-scale>span:first-child{margin-right:2px}
@@ -3635,6 +3970,20 @@ var css = `
 .dq-sync--error .dq-sync-dot{background:var(--dsw-alias-state-error-primary,#cf222e)}
 @keyframes dq-sync-pulse{50%{opacity:.35;transform:scale(.8)}}
 .dq-refresh-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-secondary,#59636e);border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer;transition:border-color .15s ease,color .15s ease}
+.dq-status-actions{display:flex;align-items:center;gap:8px;flex:none}
+.dq-settings-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-secondary,#59636e);border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer;transition:border-color .15s ease,color .15s ease}
+.dq-settings-btn:hover{border-color:var(--dsw-alias-state-business-primary,#0969da);color:var(--dsw-alias-state-business-primary,#0969da)}
+.dq-settings-btn:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px}
+.dq-settings-caret{font-size:10px;line-height:1;transition:transform .2s cubic-bezier(.16,1,.3,1)}
+.dq-settings-caret--open{transform:rotate(180deg)}
+.dq-settings-panel{box-sizing:border-box;min-width:0;max-width:100%;padding:20px;background:var(--dsw-alias-bg-layer-1,#ffffff);border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.10));border-radius:12px}
+/* Motion: eased (easeOutExpo) arrivals. Operate surface \u2014 fast, purposeful,
+   and fully disabled under prefers-reduced-motion (see the global reduce block). */
+.dq-export-menu,.dq-model-menu{transform-origin:top right;animation:dq-pop .18s cubic-bezier(.16,1,.3,1)}
+@keyframes dq-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
+.dq-alert{animation:dq-alert-in .28s cubic-bezier(.16,1,.3,1)}
+@keyframes dq-alert-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
+@media (max-width:620px){.dq-settings-panel{padding:16px}}
 .dq-refresh-btn:hover:not(:disabled){border-color:var(--dsw-alias-state-business-primary,#0969da);color:var(--dsw-alias-state-business-primary,#0969da)}
 .dq-refresh-btn:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px}
 .dq-refresh-btn:disabled{cursor:default;opacity:.6}