@cassius0924/dsh-usage-dashboard 0.8.3 → 0.9.0

package/lib/client.js

@@ -26,7 +26,7 @@ __export(index_exports, {
   name: () => name
 });
 module.exports = __toCommonJS(index_exports);
-var import_react10 = require("react");
+var import_react8 = require("react");
 
 // src/client/boundary.tsx
 var import_react = require("react");
@@ -89,9 +89,9 @@ function loadPersisted(storageKey, isUsable) {
 function pruneOldVersions(storageKey) {
   if (typeof localStorage === "undefined") return;
   try {
-    const current2 = `${storageKey}:v${LS_VERSION}`;
+    const current = `${storageKey}:v${LS_VERSION}`;
     for (const key of Object.keys(localStorage)) {
-      if (key.startsWith(`${storageKey}:v`) && key !== current2) localStorage.removeItem(key);
+      if (key.startsWith(`${storageKey}:v`) && key !== current) localStorage.removeItem(key);
     }
   } catch {
   }
@@ -118,17 +118,6 @@ function createCache(ttlMs, storageKey, isUsable) {
 
 // src/contract.ts
 var USAGE_WINDOW_DAYS = [7, 30, 90, 365];
-var SESSION_ID_PATTERN = /^[A-Za-z0-9_-]{1,128}$/;
-var isValidSessionId = (id) => SESSION_ID_PATTERN.test(id);
-var BREAKER_API = {
-  state: "/api/dsh-usage-dashboard/breaker",
-  release: "/api/dsh-usage-dashboard/breaker/release"
-};
-var isBreakerSettings = (value) => {
-  if (typeof value !== "object" || value === null) return false;
-  const candidate = value;
-  return typeof candidate.enabled === "boolean" && Array.isArray(candidate.sessions) && candidate.sessions.every((session) => typeof session === "string" && isValidSessionId(session));
-};
 
 // src/client/api.ts
 var BALANCE_TTL_MS = 6e4;
@@ -206,15 +195,15 @@ var sessionUsageCache = /* @__PURE__ */ new Map();
 var sessionUsageListeners = /* @__PURE__ */ new Map();
 var getCachedSessionUsage = (sessionId) => sessionUsageCache.get(sessionId) ?? null;
 var subscribeSessionUsage = (sessionId, fn) => {
-  let listeners2 = sessionUsageListeners.get(sessionId);
-  if (listeners2 === void 0) {
-    listeners2 = /* @__PURE__ */ new Set();
-    sessionUsageListeners.set(sessionId, listeners2);
+  let listeners = sessionUsageListeners.get(sessionId);
+  if (listeners === void 0) {
+    listeners = /* @__PURE__ */ new Set();
+    sessionUsageListeners.set(sessionId, listeners);
   }
-  listeners2.add(fn);
+  listeners.add(fn);
   return () => {
-    listeners2?.delete(fn);
-    if (listeners2?.size === 0) sessionUsageListeners.delete(sessionId);
+    listeners?.delete(fn);
+    if (listeners?.size === 0) sessionUsageListeners.delete(sessionId);
   };
 };
 var publishSessionUsage = (sessionId, response) => {
@@ -241,118 +230,20 @@ async function fetchSessionUsage(sessionId, force = false) {
   sessionUsageInflight.set(sessionId, tracked);
   return tracked;
 }
-async function breakerRequest(url, init) {
-  try {
-    const response = await fetch(url, {
-      method: init.method,
-      cache: "no-store",
-      headers: init.body === void 0 ? { accept: "application/json" } : { accept: "application/json", "content-type": "application/json" },
-      ...init.body === void 0 ? {} : { body: init.body }
-    });
-    if (!response.ok) return { ok: false, error: `HTTP ${response.status}` };
-    return await response.json();
-  } catch (error) {
-    return { ok: false, error: error instanceof Error ? error.message : String(error) };
-  }
-}
-async function fetchBreaker() {
-  return breakerRequest(BREAKER_API.state, { method: "GET" });
-}
-async function updateBreaker(request) {
-  return breakerRequest(BREAKER_API.state, { method: "PUT", body: JSON.stringify(request) });
-}
-async function releaseBreaker(request) {
-  return breakerRequest(
-    BREAKER_API.release,
-    request === void 0 ? { method: "POST" } : { method: "POST", body: JSON.stringify(request) }
-  );
-}
 
 // src/client/dashboard.tsx
-var import_react5 = require("react");
-
-// src/client/breaker.ts
-var BEIJING_OFFSET_MS = 8 * 60 * 60 * 1e3;
-var SHORT_SESSION_ID = 8;
-function breakerIsUsable(res) {
-  if (res === null || res === void 0 || res.ok !== true) return false;
-  const data = res.data;
-  if (data === void 0 || data === null) return false;
-  return isBreakerSettings(data) && Array.isArray(data.holding) && data.holding.every((id) => typeof id === "string") && typeof data.now === "string" && typeof data.peak === "boolean" && (data.resumeAt === null || typeof data.resumeAt === "string") && Array.isArray(data.peakWindows) && data.peakWindows.every((window2) => typeof window2 === "string");
-}
-function beijingClock(iso) {
-  if (typeof iso !== "string" || iso === "") return null;
-  const ms = Date.parse(iso);
-  if (!Number.isFinite(ms)) return null;
-  const beijing = new Date(ms + BEIJING_OFFSET_MS);
-  const hours = String(beijing.getUTCHours()).padStart(2, "0");
-  const minutes = String(beijing.getUTCMinutes()).padStart(2, "0");
-  return `${hours}:${minutes}`;
-}
-function isSessionOptedIn(data, sessionId) {
-  if (data === null || sessionId === null || sessionId === void 0 || sessionId === "") return false;
-  return Array.isArray(data.sessions) && data.sessions.includes(sessionId);
-}
-function isSessionEnabled(data, sessionId) {
-  if (data === null || data.enabled !== true) return false;
-  return isSessionOptedIn(data, sessionId);
-}
-function sessionBreakerState(data, sessionId) {
-  if (!isSessionEnabled(data, sessionId)) return "off";
-  return data !== null && Array.isArray(data.holding) && data.holding.includes(sessionId) ? "holding" : "on";
-}
-function withSessionToggled(data, sessionId, enabled) {
-  if (data === null) return null;
-  const sessions = enabled ? data.sessions.includes(sessionId) ? data.sessions : [...data.sessions, sessionId] : data.sessions.filter((id) => id !== sessionId);
-  const holding = enabled ? data.holding : data.holding.filter((id) => id !== sessionId);
-  return { ...data, sessions, holding };
-}
-function withMasterToggled(data, enabled) {
-  if (data === null) return null;
-  return { ...data, enabled, holding: enabled ? data.holding : [] };
-}
-function shortSessionId(sessionId) {
-  const trimmed = sessionId.trim();
-  return trimmed.length <= SHORT_SESSION_ID ? trimmed : `${trimmed.slice(0, SHORT_SESSION_ID)}\u2026`;
-}
-function breakerPhase(data) {
-  if (data === null) return "unavailable";
-  if (!data.enabled) return "masterOff";
-  if (!data.peak) return "offPeak";
-  return data.holding.length > 0 ? "peakHolding" : "peak";
-}
-
-// src/client/breaker-state.ts
-var import_react2 = require("react");
-var current = null;
-var listeners = /* @__PURE__ */ new Set();
-function getBreakerData() {
-  return current;
-}
-function publishBreakerData(data) {
-  current = data;
-  for (const listener of [...listeners]) listener();
-}
-function subscribeBreakerData(listener) {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-  };
-}
-function useBreakerData() {
-  return (0, import_react2.useSyncExternalStore)(subscribeBreakerData, getBreakerData, getBreakerData);
-}
+var import_react4 = require("react");
 
 // src/client/budget.ts
-var BEIJING_OFFSET_MS2 = 8 * 60 * 60 * 1e3;
+var BEIJING_OFFSET_MS = 8 * 60 * 60 * 1e3;
 function budgetSnapshot(spentValue, budgetValue, nowMs = Date.now()) {
   const spent = Number.isFinite(spentValue) ? Math.max(0, spentValue) : 0;
   const budget = Number.isFinite(budgetValue) ? Math.max(0, budgetValue) : 0;
-  const beijingNow = new Date(nowMs + BEIJING_OFFSET_MS2);
+  const beijingNow = new Date(nowMs + BEIJING_OFFSET_MS);
   const year = beijingNow.getUTCFullYear();
   const month = beijingNow.getUTCMonth();
-  const start = Date.UTC(year, month, 1) - BEIJING_OFFSET_MS2;
-  const end = Date.UTC(year, month + 1, 1) - BEIJING_OFFSET_MS2;
+  const start = Date.UTC(year, month, 1) - BEIJING_OFFSET_MS;
+  const end = Date.UTC(year, month + 1, 1) - BEIJING_OFFSET_MS;
   const elapsedRatio = Math.min(1, Math.max(1 / (end - start), (nowMs - start) / (end - start)));
   const forecast = spent / elapsedRatio;
   const ratio = budget > 0 ? spent / budget : 0;
@@ -363,12 +254,12 @@ function budgetSnapshot(spentValue, budgetValue, nowMs = Date.now()) {
 }
 
 // src/client/charts.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 
 // src/client/chart-focus.ts
-function nextChartFocus(current2, count, key, horizontalStep = 1) {
+function nextChartFocus(current, count, key, horizontalStep = 1) {
   if (count <= 0) return 0;
-  const index = Math.min(Math.max(0, current2), count - 1);
+  const index = Math.min(Math.max(0, current), count - 1);
   if (key === "Home") return 0;
   if (key === "End") return count - 1;
   const step = key === "ArrowLeft" || key === "ArrowRight" ? Math.max(1, horizontalStep) : 1;
@@ -381,8 +272,8 @@ function lastPopulatedIndex(values) {
   }
   return Math.max(0, values.length - 1);
 }
-function nextPinnedIndex(current2, tapped) {
-  return current2 === tapped ? null : tapped;
+function nextPinnedIndex(current, tapped) {
+  return current === tapped ? null : tapped;
 }
 function isTapGesture(dx, dy, dt, moveThreshold = 10, timeThreshold = 500) {
   return Math.hypot(dx, dy) <= moveThreshold && dt <= timeThreshold;
@@ -397,7 +288,7 @@ function maxOrOne(values) {
 }
 
 // src/client/i18n.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 
 // src/client/locales.ts
 var NS = "dsh-usage-dashboard";
@@ -472,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",
@@ -555,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",
@@ -620,18 +518,28 @@ 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",
   "settings.widgetTabsHint": "\u5217\u8868\u4F1A\u968F\u5DF2\u5B89\u88C5\u7684\u9875\u9762\u81EA\u52A8\u66F4\u65B0\u3002",
   "settings.widgetTabsEmpty": "\u5F53\u524D\u6CA1\u6709\u53EF\u914D\u7F6E\u7684\u4F1A\u8BDD\u9875\u9762\u3002",
-  "settings.peakPause": "\u9AD8\u5CF0\u6682\u505C",
-  "settings.peakPauseHint": "\u603B\u5F00\u5173\uFF1B\u5173\u95ED\u540E\u6240\u6709\u4F1A\u8BDD\u90FD\u4E0D\u6682\u505C\u3002\u6BCF\u4E2A\u4F1A\u8BDD\u7684\u5F00\u5173\u4F1A\u4FDD\u7559\uFF0C\u53EF\u968F\u65F6\u91CD\u65B0\u6253\u5F00\u3002",
-  "settings.peakPauseLoading": "\u6B63\u5728\u8BFB\u53D6\u603B\u5F00\u5173\u72B6\u6001\u2026",
   "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",
@@ -648,32 +556,6 @@ var zh = {
   "settings.tabDragAria": "\u62D6\u52A8\u300C\u989D\u5EA6\u300D\u8C03\u6574\u6807\u7B7E\u4F4D\u7F6E",
   "settings.tabMoveEarlier": "\u524D\u79FB",
   "settings.tabMoveLater": "\u540E\u79FB",
-  "breaker.title": "\u9AD8\u5CF0\u6682\u505C",
-  "breaker.desc": "\u5728\u5BF9\u8BDD\u8F93\u5165\u6846\u65C1\u6309\u4F1A\u8BDD\u5F00\u542F\uFF1B\u9AD8\u5CF0\u65F6\u6BB5\u81EA\u52A8\u6682\u505C\u8BE5\u4F1A\u8BDD\uFF0C18:00 \u7EE7\u7EED\u3002\u81EA\u52A8\u5316\u4EFB\u52A1\u4E0D\u53D7\u5F71\u54CD\uFF1B\u603B\u5F00\u5173\u5728\u300C\u8BBE\u7F6E\u300D\u5361\u91CC\u3002",
-  "breaker.pillOff": "\u9AD8\u5CF0\u6682\u505C \xB7 \u5173",
-  "breaker.pillOn": "\u9AD8\u5CF0\u6682\u505C \xB7 \u5F00",
-  "breaker.pillHolding": "\u5DF2\u6682\u505C \xB7 {clock}",
-  "breaker.pillAriaOff": "\u9AD8\u5CF0\u6682\u505C\uFF1A\u672C\u4F1A\u8BDD\u5173\u95ED\uFF0C\u70B9\u51FB\u5F00\u542F",
-  "breaker.pillAriaOn": "\u9AD8\u5CF0\u6682\u505C\uFF1A\u672C\u4F1A\u8BDD\u5F00\u542F\uFF0C{clock} \u7EE7\u7EED\uFF0C\u70B9\u51FB\u5173\u95ED",
-  "breaker.pillAriaHolding": "\u9AD8\u5CF0\u6682\u505C\uFF1A\u672C\u4F1A\u8BDD\u6B63\u5728\u6682\u505C\uFF0C{clock} \u7EE7\u7EED\uFF0C\u70B9\u51FB\u5173\u95ED",
-  "breaker.pillAriaMasterOff": "\u9AD8\u5CF0\u6682\u505C\uFF1A\u603B\u5F00\u5173\u5DF2\u5173\u95ED\uFF0C\u672C\u4F1A\u8BDD\u4E0D\u4F1A\u6682\u505C\uFF1B\u70B9\u51FB\u53EA\u5207\u6362\u672C\u4F1A\u8BDD\u5F00\u5173",
-  "breaker.pillTitleOff": "\u9AD8\u5CF0\u65F6\u6BB5\u6682\u505C\u672C\u4F1A\u8BDD\uFF1A\u5F53\u524D\u5173\u95ED\uFF0C\u70B9\u51FB\u5F00\u542F",
-  "breaker.pillTitleOn": "\u9AD8\u5CF0\u65F6\u6BB5\u6682\u505C\u672C\u4F1A\u8BDD\uFF1A\u5F53\u524D\u5F00\u542F\uFF0C{clock} \u7EE7\u7EED\uFF1B\u70B9\u51FB\u5173\u95ED",
-  "breaker.pillTitleHolding": "\u672C\u4F1A\u8BDD\u6B63\u5728\u6682\u505C\uFF0C{clock} \u7EE7\u7EED\uFF1B\u70B9\u51FB\u5173\u95ED",
-  "breaker.pillTitleMasterOff": "\u9AD8\u5CF0\u6682\u505C\u7684\u603B\u5F00\u5173\u5DF2\u5728\u989D\u5EA6\u9875\u5173\u95ED\uFF0C\u672C\u4F1A\u8BDD\u4E0D\u4F1A\u6682\u505C\uFF1B\u70B9\u51FB\u53EA\u5207\u6362\u672C\u4F1A\u8BDD\u5F00\u5173",
-  "breaker.actionError": "\u64CD\u4F5C\u5931\u8D25\uFF1A{error}",
-  "breaker.loading": "\u8F7D\u5165\u4E2D\u2026",
-  "breaker.statusUnavailable": "\u72B6\u6001\u6682\u4E0D\u53EF\u7528",
-  "breaker.statusMasterOff": "\u603B\u5F00\u5173\u5DF2\u5173\u95ED\uFF0C\u6240\u6709\u4F1A\u8BDD\u90FD\u4E0D\u6682\u505C\uFF1B\u53EF\u5728\u300C\u8BBE\u7F6E\u300D\u5361\u91CD\u65B0\u6253\u5F00",
-  "breaker.statusOffPeak": "\u95F2\u65F6 \xB7 \u4E0D\u6682\u505C\u4F1A\u8BDD",
-  "breaker.statusPeak": "\u9AD8\u5CF0\u65F6\u6BB5 \xB7 \u5F00\u542F\u7684\u4F1A\u8BDD\u4F1A\u81EA\u52A8\u6682\u505C",
-  "breaker.statusHolding": "\u5DF2\u6682\u505C {count} \u4E2A\u4F1A\u8BDD \xB7 {clock} \u7EE7\u7EED",
-  "breaker.statusHoldingNoClock": "\u5DF2\u6682\u505C {count} \u4E2A\u4F1A\u8BDD",
-  "breaker.release": "\u7ACB\u5373\u5168\u90E8\u7EE7\u7EED",
-  "breaker.releaseBusy": "\u6B63\u5728\u7EE7\u7EED\u2026",
-  "breaker.empty": "\u8FD8\u6CA1\u6709\u4F1A\u8BDD\u5F00\u542F\u9AD8\u5CF0\u6682\u505C\u3002\u5728\u5BF9\u8BDD\u8F93\u5165\u6846\u65C1\u7684\u300C\u9AD8\u5CF0\u6682\u505C\u300D\u5F00\u5173\u91CC\u5F00\u542F\u3002",
-  "breaker.rowDisableAria": "\u5173\u95ED\u300C{title}\u300D\u7684\u9AD8\u5CF0\u6682\u505C",
-  "breaker.holding": "\u6682\u505C\u4E2D \xB7 {clock}",
   "panel.caption": "\u8D26\u6237\u7EA7 \xB7 \u8DE8\u5168\u90E8\u4F1A\u8BDD",
   "panel.openAria": "\u6253\u5F00\u989D\u5EA6\u9875",
   "widget.updatedNow": "\u521A\u521A\u66F4\u65B0",
@@ -773,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",
@@ -856,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",
@@ -921,18 +810,28 @@ 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",
   "settings.widgetTabsHint": "Updates automatically as views are installed.",
   "settings.widgetTabsEmpty": "There are no configurable conversation views right now.",
-  "settings.peakPause": "Peak pause",
-  "settings.peakPauseHint": "Master switch; when off no conversation pauses. Per-conversation switches are kept and can be turned back on at any time.",
-  "settings.peakPauseLoading": "Reading the master switch\u2026",
   "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.",
@@ -949,32 +848,6 @@ var en = {
   "settings.tabDragAria": "Drag Usage to change its tab position",
   "settings.tabMoveEarlier": "Move earlier",
   "settings.tabMoveLater": "Move later",
-  "breaker.title": "Peak pause",
-  "breaker.desc": "Turn it on per conversation beside the composer; during peak hours that session pauses and resumes at 18:00. Automated tasks are unaffected; the master switch is in Settings.",
-  "breaker.pillOff": "Peak pause \xB7 off",
-  "breaker.pillOn": "Peak pause \xB7 on",
-  "breaker.pillHolding": "Paused \xB7 {clock}",
-  "breaker.pillAriaOff": "Peak pause: off for this conversation, click to turn on",
-  "breaker.pillAriaOn": "Peak pause: on for this conversation, resumes at {clock}, click to turn off",
-  "breaker.pillAriaHolding": "Peak pause: this conversation is paused now, resumes at {clock}, click to turn off",
-  "breaker.pillAriaMasterOff": "Peak pause: the master switch is off, so this conversation will not pause; clicking only flips this conversation",
-  "breaker.pillTitleOff": "Pause this conversation during peak hours: currently off, click to turn on",
-  "breaker.pillTitleOn": "Pause this conversation during peak hours: currently on, resumes at {clock}; click to turn off",
-  "breaker.pillTitleHolding": "This conversation is paused and resumes at {clock}; click to turn off",
-  "breaker.pillTitleMasterOff": "The Peak pause master switch is off on the Usage page, so this conversation will not pause; clicking only flips this conversation",
-  "breaker.actionError": "Action failed: {error}",
-  "breaker.loading": "Loading\u2026",
-  "breaker.statusUnavailable": "Status unavailable",
-  "breaker.statusMasterOff": "Master switch is off; no conversation pauses. Turn it back on in Settings.",
-  "breaker.statusOffPeak": "Off-peak \xB7 nothing is paused",
-  "breaker.statusPeak": "Peak hours \xB7 conversations with it on pause automatically",
-  "breaker.statusHolding": "{count} conversations paused \xB7 resumes at {clock}",
-  "breaker.statusHoldingNoClock": "{count} conversations paused",
-  "breaker.release": "Resume all now",
-  "breaker.releaseBusy": "Resuming\u2026",
-  "breaker.empty": "No conversation has Peak pause on yet. Turn it on with the Peak pause switch beside the composer.",
-  "breaker.rowDisableAria": "Turn off Peak pause for {title}",
-  "breaker.holding": "Paused \xB7 {clock}",
   "panel.caption": "Account-wide \xB7 across all sessions",
   "panel.openAria": "Open Usage",
   "widget.updatedNow": "Updated just now",
@@ -1018,12 +891,12 @@ var fallbackT = (key, params) => {
   if (params === void 0) return template;
   return template.replace(/\{(\w+)\}/g, (match, name2) => name2 in params ? String(params[name2]) : match);
 };
-var TranslationContext = (0, import_react3.createContext)(fallbackT);
+var TranslationContext = (0, import_react2.createContext)(fallbackT);
 function LocaleProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TranslationContext.Provider, { value: props.t, children: props.children });
 }
 function useI18n() {
-  const t = (0, import_react3.useContext)(TranslationContext);
+  const t = (0, import_react2.useContext)(TranslationContext);
   return { t, locale: t("meta.locale") === "en" ? "en" : "zh" };
 }
 function localizeApiError(message, t, fallback) {
@@ -1054,11 +927,11 @@ function localizeApiError(message, t, fallback) {
 // src/client/charts.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function useChartTip() {
-  const wrapRef = (0, import_react4.useRef)(null);
-  const [tip, setTip] = (0, import_react4.useState)(null);
-  const [pinned, setPinned] = (0, import_react4.useState)(null);
-  const pinnedRef = (0, import_react4.useRef)(null);
-  const touchStart = (0, import_react4.useRef)(null);
+  const wrapRef = (0, import_react3.useRef)(null);
+  const [tip, setTip] = (0, import_react3.useState)(null);
+  const [pinned, setPinned] = (0, import_react3.useState)(null);
+  const pinnedRef = (0, import_react3.useRef)(null);
+  const touchStart = (0, import_react3.useRef)(null);
   const setPin = (next) => {
     pinnedRef.current = next;
     setPinned(next);
@@ -1097,7 +970,7 @@ function useChartTip() {
     if (next === null) setTip(null);
     else showAt(e.currentTarget, text, e.clientX, e.clientY);
   };
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (pinned === null) return void 0;
     const onDocPointerDown = (e) => {
       const wrap = wrapRef.current;
@@ -1111,9 +984,9 @@ function useChartTip() {
   return { wrapRef, tip, pinned, show, showFocused, hide, onPointStart, onPointEnd };
 }
 function useRovingChartPoints(count, initial, horizontalStep = 1) {
-  const refs = (0, import_react4.useRef)([]);
-  const [active, setActive] = (0, import_react4.useState)(initial);
-  (0, import_react4.useEffect)(() => setActive(Math.min(Math.max(0, initial), Math.max(0, count - 1))), [count, initial]);
+  const refs = (0, import_react3.useRef)([]);
+  const [active, setActive] = (0, import_react3.useState)(initial);
+  (0, import_react3.useEffect)(() => setActive(Math.min(Math.max(0, initial), Math.max(0, count - 1))), [count, initial]);
   const onKeyDown = (event, index) => {
     if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
     event.preventDefault();
@@ -1137,11 +1010,12 @@ 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_react4.useRef)(null);
+  const scrollRef = (0, import_react3.useRef)(null);
   const initialFocus = lastPopulatedIndex(data.map((datum) => datum.value));
   const roving = useRovingChartPoints(data.length, initialFocus);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const scroll = scrollRef.current;
     if (scroll !== null && minWidth !== void 0) scroll.scrollLeft = scroll.scrollWidth;
   }, [data.length, minWidth]);
@@ -1149,87 +1023,102 @@ 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_react4.useRef)(null);
+  const scrollRef = (0, import_react3.useRef)(null);
   const count = series.length > 0 ? series[0].bars.length : 0;
   const pointValues = Array.from({ length: count }, (_, i) => series.map((s) => s.bars[i]?.value ?? 0)).flat();
   const roving = useRovingChartPoints(pointValues.length, lastPopulatedIndex(pointValues));
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     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 })
   ] });
 }
@@ -1389,9 +1278,9 @@ function getActiveConversationViewId(frame, viewIds) {
 }
 
 // src/client/export.ts
-var BEIJING_OFFSET_MS3 = 8 * 60 * 60 * 1e3;
+var BEIJING_OFFSET_MS2 = 8 * 60 * 60 * 1e3;
 function exportDateStamp(nowMs = Date.now()) {
-  const date = new Date(nowMs + BEIJING_OFFSET_MS3);
+  const date = new Date(nowMs + BEIJING_OFFSET_MS2);
   return [
     date.getUTCFullYear(),
     String(date.getUTCMonth() + 1).padStart(2, "0"),
@@ -1507,19 +1396,19 @@ var isBoolean = (value) => typeof value === "boolean";
 
 // src/client/store.ts
 function createStore(key, isValid, fallback) {
-  let current2 = loadPref(key, isValid, fallback);
-  const listeners2 = /* @__PURE__ */ new Set();
+  let current = loadPref(key, isValid, fallback);
+  const listeners = /* @__PURE__ */ new Set();
   return {
-    get: () => current2,
+    get: () => current,
     set: (value) => {
-      current2 = value;
+      current = value;
       savePref(key, value);
-      for (const listener of [...listeners2]) listener();
+      for (const listener of [...listeners]) listener();
     },
     subscribe: (fn) => {
-      listeners2.add(fn);
+      listeners.add(fn);
       return () => {
-        listeners2.delete(fn);
+        listeners.delete(fn);
       };
     }
   };
@@ -1582,16 +1471,6 @@ function needsTopUp(balance, warningLine) {
 // src/client/dashboard.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var COMPOSER_FALLBACK_PX = 126;
-function usageTitleMap(usage) {
-  const titles = /* @__PURE__ */ new Map();
-  for (const session of usage?.sessions ?? []) titles.set(session.id, session.title);
-  for (const window2 of usage?.windows ?? []) {
-    for (const session of window2.sessions) {
-      if (!titles.has(session.id)) titles.set(session.id, session.title);
-    }
-  }
-  return titles;
-}
 function Skel(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-skel", style: { width: `${props.w}px`, height: `${props.h}px` } });
 }
@@ -1641,18 +1520,19 @@ function HeatmapSkeleton() {
 }
 function Delta(props) {
   const { t } = useI18n();
-  const { current: current2, previous, label } = props;
+  const { current, previous, label } = props;
   if (previous <= 0) {
-    if (current2 <= 0) return null;
+    if (current <= 0) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-delta dq-delta--new", title: t("delta.noBaselineTitle", { label }), children: t("delta.noBaseline") });
   }
-  const percent = Math.round((current2 - previous) / previous * 100);
+  const percent = Math.round((current - previous) / previous * 100);
   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 })
   ] });
@@ -1734,7 +1614,7 @@ function PricingNote(props) {
           /* @__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_react5.Fragment, { children: [
+        /* @__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: 2, children: tier.model }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: t("pricing.peak") }),
@@ -1810,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 }),
@@ -1821,13 +1832,13 @@ function Link(props) {
 }
 function ExportMenu(props) {
   const { t } = useI18n();
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [done, setDone] = (0, import_react5.useState)(false);
-  const rootRef = (0, import_react5.useRef)(null);
-  const triggerRef = (0, import_react5.useRef)(null);
-  const menuRef = (0, import_react5.useRef)(null);
-  const doneTimerRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [done, setDone] = (0, import_react4.useState)(false);
+  const rootRef = (0, import_react4.useRef)(null);
+  const triggerRef = (0, import_react4.useRef)(null);
+  const menuRef = (0, import_react4.useRef)(null);
+  const doneTimerRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     if (!open) return;
     const onDown = (event) => {
       if (rootRef.current !== null && !rootRef.current.contains(event.target)) setOpen(false);
@@ -1845,7 +1856,7 @@ function ExportMenu(props) {
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  (0, import_react5.useEffect)(() => () => {
+  (0, import_react4.useEffect)(() => () => {
     if (doneTimerRef.current !== null) window.clearTimeout(doneTimerRef.current);
   }, []);
   const finish = () => {
@@ -2015,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) {
@@ -2058,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",
       {
@@ -2092,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) {
@@ -2119,8 +2161,8 @@ function SessionDetail(props) {
 function SessionRanking(props) {
   const { t, locale } = useI18n();
   const { sessions, count, totalCost } = props;
-  const [details, setDetails] = (0, import_react5.useState)({});
-  const startedRef = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
+  const [details, setDetails] = (0, import_react4.useState)({});
+  const startedRef = (0, import_react4.useRef)(/* @__PURE__ */ new Set());
   const loadDetail = (id) => {
     if (startedRef.current.has(id)) return;
     startedRef.current.add(id);
@@ -2221,11 +2263,11 @@ function ModelRanking(props) {
 function ModelPicker(props) {
   const { t, locale } = useI18n();
   const { models } = props;
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const rootRef = (0, import_react5.useRef)(null);
-  const triggerRef = (0, import_react5.useRef)(null);
-  const menuRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const rootRef = (0, import_react4.useRef)(null);
+  const triggerRef = (0, import_react4.useRef)(null);
+  const menuRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     if (!open) return;
     const onDown = (e) => {
       if (rootRef.current !== null && !rootRef.current.contains(e.target)) setOpen(false);
@@ -2327,55 +2369,46 @@ function BalanceDashboard(props) {
   const cachedBalance = getCachedBalance();
   const cachedUsage = getCachedUsage();
   const cachedUsageAt = getCachedUsageAt();
-  const [balance, setBalance] = (0, import_react5.useState)(cachedBalance?.data ?? null);
-  const [usage, setUsage] = (0, import_react5.useState)(cachedUsage?.data ?? null);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const [notice, setNotice] = (0, import_react5.useState)(null);
-  const [loadingBalance, setLoadingBalance] = (0, import_react5.useState)(cachedBalance === null);
-  const [loadingUsage, setLoadingUsage] = (0, import_react5.useState)(cachedUsage === null);
-  const [refreshing, setRefreshing] = (0, import_react5.useState)(false);
-  const [usageUpdatedAt, setUsageUpdatedAt] = (0, import_react5.useState)(cachedUsageAt);
-  const [syncState, setSyncState] = (0, import_react5.useState)(cachedUsageAt === null ? "syncing" : "cached");
-  const [freshnessNow, setFreshnessNow] = (0, import_react5.useState)(Date.now());
-  const hadDataRef = (0, import_react5.useRef)(cachedBalance !== null || cachedUsage !== null);
-  const [widgetOn, setWidgetOn] = (0, import_react5.useState)(widgetVisibleStore.get());
-  const [widgetTabIds, setWidgetTabIds] = (0, import_react5.useState)(widgetTabIdsStore.get());
-  const [viewTabs, setViewTabs] = (0, import_react5.useState)(() => props.views.list());
-  (0, import_react5.useEffect)(() => props.views.subscribe(() => setViewTabs(props.views.list())), [props.views]);
-  const [lowBalance, setLowBalance] = (0, import_react5.useState)(lowBalanceStore.get());
-  const [monthlyBudget, setMonthlyBudget] = (0, import_react5.useState)(monthlyBudgetStore.get());
-  const breakerData = useBreakerData();
-  const [breakerLoadError, setBreakerLoadError] = (0, import_react5.useState)(null);
-  const [breakerActionError, setBreakerActionError] = (0, import_react5.useState)(null);
-  const [breakerReleasing, setBreakerReleasing] = (0, import_react5.useState)(false);
-  const [breakerSavingId, setBreakerSavingId] = (0, import_react5.useState)(null);
-  const [breakerSavingMaster, setBreakerSavingMaster] = (0, import_react5.useState)(false);
-  const [breakerTitles, setBreakerTitles] = (0, import_react5.useState)({});
-  const breakerTitleRequests = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
-  const breakerMutationSeq = (0, import_react5.useRef)(0);
-  const breakerMounted = (0, import_react5.useRef)(true);
-  const [barMode, setBarMode] = (0, import_react5.useState)("daily");
-  const [selectedModels, setSelectedModels] = (0, import_react5.useState)([]);
-  const [windowDays, setWindowDays] = (0, import_react5.useState)(usageWindowStore.get());
-  const [chartMetric, setChartMetric] = (0, import_react5.useState)(chartMetricStore.get());
-  const [sidebarEntry, setSidebarEntry] = (0, import_react5.useState)(sidebarEntryStore.get());
-  (0, import_react5.useEffect)(() => sidebarEntryStore.subscribe(() => setSidebarEntry(sidebarEntryStore.get())), []);
-  const [tabDragging, setTabDragging] = (0, import_react5.useState)(false);
-  const [tabDropTarget, setTabDropTarget] = (0, import_react5.useState)(null);
-  const [retainedVision, setRetainedVision] = (0, import_react5.useState)(null);
-  const [runwayHovering, setRunwayHovering] = (0, import_react5.useState)(false);
-  const [runwayManuallyOpened, setRunwayManuallyOpened] = (0, import_react5.useState)(false);
-  const [remainingHovering, setRemainingHovering] = (0, import_react5.useState)(false);
-  const [remainingManuallyOpened, setRemainingManuallyOpened] = (0, import_react5.useState)(false);
-  const budgetInputRef = (0, import_react5.useRef)(null);
-  const rootRef = (0, import_react5.useRef)(null);
-  const [composerHeight, setComposerHeight] = (0, import_react5.useState)(null);
-  const [composerWidth, setComposerWidth] = (0, import_react5.useState)(null);
-  const [sessionUsage, setSessionUsage] = (0, import_react5.useState)(null);
-  const [loadingSessionUsage, setLoadingSessionUsage] = (0, import_react5.useState)(props.sessionId !== void 0 && props.sessionId !== "");
-  const [sessionUsageError, setSessionUsageError] = (0, import_react5.useState)(null);
-  const sessionUsageIdRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useLayoutEffect)(() => {
+  const [balance, setBalance] = (0, import_react4.useState)(cachedBalance?.data ?? null);
+  const [usage, setUsage] = (0, import_react4.useState)(cachedUsage?.data ?? null);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const [notice, setNotice] = (0, import_react4.useState)(null);
+  const [loadingBalance, setLoadingBalance] = (0, import_react4.useState)(cachedBalance === null);
+  const [loadingUsage, setLoadingUsage] = (0, import_react4.useState)(cachedUsage === null);
+  const [refreshing, setRefreshing] = (0, import_react4.useState)(false);
+  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());
+  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");
+  const [selectedModels, setSelectedModels] = (0, import_react4.useState)([]);
+  const [windowDays, setWindowDays] = (0, import_react4.useState)(usageWindowStore.get());
+  const [chartMetric, setChartMetric] = (0, import_react4.useState)(chartMetricStore.get());
+  const [sidebarEntry, setSidebarEntry] = (0, import_react4.useState)(sidebarEntryStore.get());
+  (0, import_react4.useEffect)(() => sidebarEntryStore.subscribe(() => setSidebarEntry(sidebarEntryStore.get())), []);
+  const [tabDragging, setTabDragging] = (0, import_react4.useState)(false);
+  const [tabDropTarget, setTabDropTarget] = (0, import_react4.useState)(null);
+  const [retainedVision, setRetainedVision] = (0, import_react4.useState)(null);
+  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);
+  const sessionUsageIdRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useLayoutEffect)(() => {
     const node = rootRef.current;
     if (node === null) return;
     const measure = () => {
@@ -2406,13 +2439,13 @@ function BalanceDashboard(props) {
       window.removeEventListener("resize", measure);
     };
   }, []);
-  (0, import_react5.useLayoutEffect)(() => {
+  (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_react5.useLayoutEffect)(() => {
+  (0, import_react4.useLayoutEffect)(() => {
     quotaViewActiveStore.set(true);
     return () => quotaViewActiveStore.set(false);
   }, []);
@@ -2486,10 +2519,10 @@ function BalanceDashboard(props) {
       if (sessionUsageIdRef.current === id) setLoadingSessionUsage(false);
     }
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     void load(false);
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const id = props.sessionId;
     sessionUsageIdRef.current = id ?? null;
     if (id === void 0 || id === "") {
@@ -2503,57 +2536,7 @@ function BalanceDashboard(props) {
     setLoadingSessionUsage(true);
     void loadSessionUsage(id, false);
   }, [props.sessionId]);
-  (0, import_react5.useEffect)(() => {
-    let cancelled = false;
-    let timer;
-    let fast = false;
-    const pull = async () => {
-      const seqAtStart = breakerMutationSeq.current;
-      const res = await fetchBreaker();
-      if (cancelled) return;
-      if (!breakerIsUsable(res)) {
-        setBreakerLoadError(res.error ?? "");
-        return;
-      }
-      fast = res.data.enabled && res.data.peak && res.data.sessions.length > 0;
-      setBreakerLoadError(null);
-      if (seqAtStart !== breakerMutationSeq.current) return;
-      publishBreakerData(res.data);
-    };
-    const loop = async () => {
-      await pull();
-      if (cancelled) return;
-      timer = window.setTimeout(() => {
-        void loop();
-      }, fast ? 5e3 : 3e4);
-    };
-    void loop();
-    return () => {
-      cancelled = true;
-      if (timer !== void 0) window.clearTimeout(timer);
-    };
-  }, []);
-  (0, import_react5.useEffect)(() => {
-    breakerMounted.current = true;
-    return () => {
-      breakerMounted.current = false;
-    };
-  }, []);
-  (0, import_react5.useEffect)(() => {
-    if (breakerData === null) return;
-    const known = usageTitleMap(usage);
-    for (const sessionId of breakerData.sessions) {
-      if (known.has(sessionId) || breakerTitles[sessionId] !== void 0) continue;
-      if (breakerTitleRequests.current.has(sessionId)) continue;
-      breakerTitleRequests.current.add(sessionId);
-      void fetchSessionUsage(sessionId).then((res) => {
-        if (!breakerMounted.current) return;
-        const title = res.ok === true ? res.data?.title?.trim() ?? "" : "";
-        setBreakerTitles((current2) => ({ ...current2, [sessionId]: title }));
-      });
-    }
-  }, [breakerData, usage, breakerTitles]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const timer = window.setInterval(() => setFreshnessNow(Date.now()), 3e4);
     return () => window.clearInterval(timer);
   }, []);
@@ -2577,66 +2560,6 @@ function BalanceDashboard(props) {
     setMonthlyBudget(value);
     monthlyBudgetStore.set(value);
   };
-  const disableBreakerSession = async (sessionId) => {
-    if (breakerSavingId !== null || breakerReleasing || breakerSavingMaster) return;
-    const previous = breakerData;
-    publishBreakerData(withSessionToggled(previous, sessionId, false));
-    setBreakerActionError(null);
-    setBreakerSavingId(sessionId);
-    const seq = ++breakerMutationSeq.current;
-    try {
-      const res = await updateBreaker({ sessionId, enabled: false });
-      if (seq !== breakerMutationSeq.current) return;
-      if (breakerIsUsable(res)) {
-        publishBreakerData(res.data);
-        setBreakerLoadError(null);
-      } else {
-        publishBreakerData(previous);
-        setBreakerActionError(res.error ?? "");
-      }
-    } finally {
-      setBreakerSavingId(null);
-    }
-  };
-  const toggleBreakerMaster = async (enabled) => {
-    if (breakerSavingMaster || breakerSavingId !== null || breakerReleasing) return;
-    const previous = breakerData;
-    publishBreakerData(withMasterToggled(previous, enabled));
-    setBreakerActionError(null);
-    setBreakerSavingMaster(true);
-    const seq = ++breakerMutationSeq.current;
-    try {
-      const res = await updateBreaker({ enabled });
-      if (seq !== breakerMutationSeq.current) return;
-      if (breakerIsUsable(res)) {
-        publishBreakerData(res.data);
-        setBreakerLoadError(null);
-      } else {
-        publishBreakerData(previous);
-        setBreakerActionError(res.error ?? "");
-      }
-    } finally {
-      setBreakerSavingMaster(false);
-    }
-  };
-  const releaseBreakerNow = async () => {
-    if (breakerReleasing || breakerSavingId !== null || breakerSavingMaster) return;
-    setBreakerActionError(null);
-    setBreakerReleasing(true);
-    const seq = ++breakerMutationSeq.current;
-    try {
-      const res = await releaseBreaker();
-      if (seq !== breakerMutationSeq.current) return;
-      if (breakerIsUsable(res)) {
-        publishBreakerData(res.data);
-        setBreakerLoadError(null);
-      } else {
-        setBreakerActionError(res.error ?? "");
-      }
-    } finally {
-      setBreakerReleasing(false);
-    }
-  };
   const changeWindowDays = (value) => {
     setWindowDays(value);
     usageWindowStore.set(value);
@@ -2732,7 +2655,7 @@ function BalanceDashboard(props) {
     costTotal: window2.totals.cost
   });
   const liveVision = visionOpen && activeWindow !== null && visionStats !== void 0 ? visionPayload(activeWindow, visionStats, activeWindowName) : null;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (visionOpen && activeWindow !== null && visionStats !== void 0) {
       setRetainedVision(visionPayload(activeWindow, visionStats, activeWindowName));
       return;
@@ -2816,15 +2739,6 @@ function BalanceDashboard(props) {
     { error: localizeApiError(notice.error, t, "error.query") }
   );
   const errorText = error === null ? null : localizeApiError(error, t, "error.query");
-  const breakerPhaseNow = breakerLoadError !== null ? "unavailable" : breakerPhase(breakerData);
-  const breakerResumeClock = beijingClock(breakerData?.resumeAt ?? null);
-  const breakerHeldCount = breakerData?.holding.length ?? 0;
-  const breakerStatusText = breakerPhaseNow === "unavailable" ? t("breaker.statusUnavailable") : breakerPhaseNow === "masterOff" ? t("breaker.statusMasterOff") : breakerPhaseNow === "peakHolding" ? breakerResumeClock === null ? t("breaker.statusHoldingNoClock", { count: breakerHeldCount }) : t("breaker.statusHolding", { count: breakerHeldCount, clock: breakerResumeClock }) : breakerPhaseNow === "peak" ? t("breaker.statusPeak") : t("breaker.statusOffPeak");
-  const breakerUsageTitles = usageTitleMap(usage);
-  const breakerTitleFor = (sessionId) => {
-    const title = breakerUsageTitles.get(sessionId) ?? breakerTitles[sessionId];
-    return title !== void 0 && title !== "" ? title : shortSessionId(sessionId);
-  };
   const composerSafeAreaStyle = {
     "--dq-composer-h": `${composerHeight ?? COMPOSER_FALLBACK_PX}px`,
     // Only set once measured; .dq-balance's max-width falls back to 860px
@@ -2832,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)(
@@ -2851,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: "!" }),
@@ -2949,6 +2890,144 @@ function BalanceDashboard(props) {
         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") })
@@ -2975,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 })
@@ -3103,339 +3185,13 @@ 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("breaker.title") }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-setting-hint dq-breaker-desc", children: t("breaker.desc") }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dq-breaker-status", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "span",
-          {
-            role: "status",
-            className: breakerPhaseNow === "peakHolding" ? "dq-warn" : void 0,
-            title: breakerLoadError !== null && breakerLoadError !== "" ? breakerLoadError : void 0,
-            children: breakerStatusText
-          }
-        ),
-        breakerPhaseNow === "peakHolding" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "dq-refresh-btn",
-            disabled: breakerReleasing || breakerSavingId !== null,
-            "aria-busy": breakerReleasing,
-            onClick: () => {
-              void releaseBreakerNow();
-            },
-            children: breakerReleasing ? t("breaker.releaseBusy") : t("breaker.release")
-          }
-        )
-      ] }),
-      breakerData === null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-empty", children: breakerLoadError === null ? t("breaker.loading") : t("breaker.statusUnavailable") }) : breakerData.sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-empty", children: t("breaker.empty") }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: `dq-breaker-list${breakerPhaseNow === "masterOff" ? " dq-breaker-list--muted" : ""}`, children: breakerData.sessions.map((sessionId) => {
-        const title = breakerTitleFor(sessionId);
-        const holding = breakerData.holding.includes(sessionId);
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { className: "dq-breaker-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "dq-breaker-row-main", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-breaker-row-title", title, children: title }),
-            holding && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dq-breaker-row-state", children: t("breaker.holding", { clock: breakerResumeClock ?? "18:00" }) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "dq-breaker-switch", title: t("breaker.rowDisableAria", { title }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "input",
-            {
-              type: "checkbox",
-              checked: true,
-              disabled: breakerSavingId !== null || breakerReleasing || breakerSavingMaster,
-              "aria-label": t("breaker.rowDisableAria", { title }),
-              onChange: () => {
-                void disableBreakerSession(sessionId);
-              }
-            }
-          ) })
-        ] }, sessionId);
-      }) }),
-      breakerActionError !== null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dq-breaker-error dq-error", role: "alert", children: t("breaker.actionError", { error: localizeApiError(breakerActionError, t, "error.query") }) })
-    ] }),
-    /* @__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)("label", { className: "dq-toggle", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "input",
-          {
-            type: "checkbox",
-            checked: breakerData === null ? true : breakerData.enabled,
-            disabled: breakerData === null || breakerSavingMaster,
-            "aria-describedby": "dq-peak-pause-hint",
-            onChange: (e) => {
-              void toggleBreakerMaster(e.target.checked);
-            }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: t("settings.peakPause") })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: "dq-peak-pause-hint", className: "dq-toggle-hint", children: breakerData === null ? breakerLoadError === null ? t("settings.peakPauseLoading") : t("breaker.statusUnavailable") : t("settings.peakPauseHint") }),
-      /* @__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 current2 = tab.id === "balance";
-                const dropTarget = tabDragging && !current2 && tabDropTarget === index;
-                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "span",
-                  {
-                    className: `dq-tab-chip${current2 ? " dq-tab-chip--current" : ""}${current2 && tabDragging ? " dq-tab-chip--dragging" : ""}${dropTarget ? " dq-tab-chip--drop-target" : ""}`,
-                    draggable: current2,
-                    tabIndex: current2 ? 0 : void 0,
-                    role: current2 ? "button" : void 0,
-                    "aria-label": current2 ? t("settings.tabDragAria") : void 0,
-                    onDragStart: current2 ? onQuotaTabDragStart : void 0,
-                    onDragEnd: current2 ? endTabDrag : void 0,
-                    onDragOver: (event) => onChipDragOver(event, index),
-                    onDrop: (event) => onChipDrop(event, index),
-                    onKeyDown: current2 ? 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.3" })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "dq-footer", children: "@cassius0924/dsh-usage-dashboard v0.9.0" })
   ] });
 }
 
-// src/client/breaker-pill.tsx
-var import_react6 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var POLL_MS = 1e4;
-function BreakerIcon({ state }) {
-  if (state === "off") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "svg",
-      {
-        width: "14",
-        height: "14",
-        viewBox: "0 0 16 16",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "1.2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        "aria-hidden": "true",
-        focusable: "false",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "8", cy: "8", r: "5.9" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6.5 5.9v4.2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M9.5 5.9v4.2" })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M8 1.6a6.4 6.4 0 1 0 0 12.8A6.4 6.4 0 0 0 8 1.6Zm-1.85 3.5h1.3v5.8h-1.3V5.1Zm2.4 0h1.3v5.8h-1.3V5.1Z"
-    }
-  ) });
-}
-function BreakerPill({ sessionId }) {
-  const { t } = useI18n();
-  const data = useBreakerData();
-  const [loadError, setLoadError] = (0, import_react6.useState)(null);
-  const [actionError, setActionError] = (0, import_react6.useState)(null);
-  const [saving, setSaving] = (0, import_react6.useState)(false);
-  const savingRef = (0, import_react6.useRef)(false);
-  const mutationSeq = (0, import_react6.useRef)(0);
-  const sessionIdRef = (0, import_react6.useRef)(sessionId);
-  (0, import_react6.useEffect)(() => {
-    sessionIdRef.current = sessionId;
-  }, [sessionId]);
-  (0, import_react6.useEffect)(() => {
-    if (sessionId === void 0 || sessionId === "") return;
-    let cancelled = false;
-    setLoadError(null);
-    setActionError(null);
-    const pull = async () => {
-      const seqAtStart = mutationSeq.current;
-      const res = await fetchBreaker();
-      if (cancelled) return;
-      if (!breakerIsUsable(res)) {
-        setLoadError(res.error ?? "");
-        return;
-      }
-      setLoadError(null);
-      if (seqAtStart !== mutationSeq.current || savingRef.current) return;
-      publishBreakerData(res.data);
-    };
-    void pull();
-    const timer = window.setInterval(() => {
-      void pull();
-    }, POLL_MS);
-    return () => {
-      cancelled = true;
-      window.clearInterval(timer);
-    };
-  }, [sessionId]);
-  if (sessionId === void 0 || sessionId === "") return null;
-  const state = sessionBreakerState(data, sessionId);
-  const on = state !== "off";
-  const masterOff = data !== null && !data.enabled;
-  const optedIn = isSessionOptedIn(data, sessionId);
-  const resumeClock = beijingClock(data?.resumeAt ?? null) ?? "18:00";
-  const errorSource = actionError ?? loadError;
-  const errorText = errorSource === null ? null : t("breaker.actionError", { error: localizeApiError(errorSource, t, "error.query") });
-  const label = state === "holding" ? t("breaker.pillHolding", { clock: resumeClock }) : state === "on" ? t("breaker.pillOn") : t("breaker.pillOff");
-  const baseTitle = masterOff ? t("breaker.pillTitleMasterOff") : state === "holding" ? t("breaker.pillTitleHolding", { clock: resumeClock }) : state === "on" ? t("breaker.pillTitleOn", { clock: resumeClock }) : t("breaker.pillTitleOff");
-  const title = errorText === null ? baseTitle : `${baseTitle} \xB7 ${errorText}`;
-  const baseAria = masterOff ? t("breaker.pillAriaMasterOff") : state === "holding" ? t("breaker.pillAriaHolding", { clock: resumeClock }) : state === "on" ? t("breaker.pillAriaOn", { clock: resumeClock }) : t("breaker.pillAriaOff");
-  const ariaLabel = errorText === null ? baseAria : `${baseAria} \xB7 ${errorText}`;
-  const toggle = async () => {
-    if (savingRef.current) return;
-    const next = !optedIn;
-    const previous = data;
-    publishBreakerData(withSessionToggled(previous, sessionId, next));
-    setActionError(null);
-    savingRef.current = true;
-    setSaving(true);
-    const seq = ++mutationSeq.current;
-    try {
-      const res = await updateBreaker({ sessionId, enabled: next });
-      if (seq !== mutationSeq.current || sessionIdRef.current !== sessionId) return;
-      if (breakerIsUsable(res)) {
-        publishBreakerData(res.data);
-        setLoadError(null);
-        return;
-      }
-      publishBreakerData(previous);
-      setActionError(res.error ?? "");
-    } finally {
-      savingRef.current = false;
-      setSaving(false);
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dq-cost-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "button",
-    {
-      type: "button",
-      className: `dq-cost-pill dq-breaker-pill dq-breaker-pill--${state}`,
-      "aria-pressed": on,
-      "aria-busy": saving,
-      "aria-label": ariaLabel,
-      title,
-      disabled: saving,
-      onClick: () => {
-        void toggle();
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BreakerIcon, { state }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dq-cost-pill-label", children: label })
-      ]
-    }
-  ) });
-}
-
 // src/client/message-cost.tsx
-var import_react7 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+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
@@ -3446,8 +3202,8 @@ var cachedData = (sessionId) => {
 };
 function MessageCost({ sessionId, messageId }) {
   const { t } = useI18n();
-  const [data, setData] = (0, import_react7.useState)(() => cachedData(sessionId));
-  (0, import_react7.useEffect)(() => {
+  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;
@@ -3458,7 +3214,7 @@ function MessageCost({ sessionId, messageId }) {
   if (turn === void 0) return null;
   const amount = `\xA5${fmtTurnCost(turn.cost)}`;
   const tooltip = t("messageCost.tooltip");
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "span",
     {
       className: "dq-message-cost",
@@ -3466,15 +3222,15 @@ function MessageCost({ sessionId, messageId }) {
       "data-dq-tooltip": tooltip,
       "aria-label": t("messageCost.aria", { amount }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "dq-message-cost-separator", "aria-hidden": true, children: "\xB7" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "dq-message-cost-amount", children: amount })
+        /* @__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/session-cost-pill.tsx
-var import_react8 = require("react");
+var import_react6 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/pricing.ts
@@ -3482,7 +3238,7 @@ var PEAK_PRICING_FROM_MS = Date.UTC(2026, 7, 16, 16, 0, 0);
 var V41_FLASH_PRICING_FROM_MS = Date.UTC(2026, 8, 10, 4, 0, 0);
 var PRO_ROUTED_TO_FLASH_FROM_MS = Date.UTC(2026, 8, 14, 4, 0, 0);
 var PEAK_WINDOWS = [[9, 12], [14, 18]];
-var BEIJING_OFFSET_MS4 = 8 * 36e5;
+var BEIJING_OFFSET_MS3 = 8 * 36e5;
 var FLAT_RATES = {
   pro: { cacheHit: 0.025, input: 3, output: 6 },
   flash: { cacheHit: 0.02, input: 1, output: 2 },
@@ -3527,12 +3283,12 @@ function billedTierOf(timeMs, model) {
   return tier === "pro" && timeMs >= PRO_ROUTED_TO_FLASH_FROM_MS ? "flash" : tier;
 }
 function isBeijingWeekday(timeMs) {
-  const day = new Date(timeMs + BEIJING_OFFSET_MS4).getUTCDay();
+  const day = new Date(timeMs + BEIJING_OFFSET_MS3).getUTCDay();
   return day >= 1 && day <= 5;
 }
 function isPeak(timeMs) {
   if (eraAt(timeMs).weekdaysOnly && !isBeijingWeekday(timeMs)) return false;
-  const hour = Math.floor(((timeMs + BEIJING_OFFSET_MS4) % 864e5 + 864e5) % 864e5 / 36e5);
+  const hour = Math.floor(((timeMs + BEIJING_OFFSET_MS3) % 864e5 + 864e5) % 864e5 / 36e5);
   return PEAK_WINDOWS.some(([from, to]) => hour >= from && hour < to);
 }
 function ratesAt(timeMs, model) {
@@ -3542,7 +3298,7 @@ function ratesAt(timeMs, model) {
 }
 
 // src/client/session-cost-pill.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var PANEL_MARGIN = 12;
 var PANEL_GAP = 8;
 var cachedData2 = (sessionId) => {
@@ -3550,7 +3306,7 @@ var cachedData2 = (sessionId) => {
   return response?.ok === true ? response.data ?? null : null;
 };
 function CostIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "svg",
     {
       width: "14",
@@ -3564,32 +3320,32 @@ function CostIcon() {
       "aria-hidden": "true",
       focusable: "false",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "8", cy: "8", r: "6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5.5 5.3 8 8.4l2.5-3.1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 8.4v2.9" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5.8 9.5h4.4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5.8 10.9h4.4" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "8", cy: "8", r: "6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M5.5 5.3 8 8.4l2.5-3.1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 8.4v2.9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M5.8 9.5h4.4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M5.8 10.9h4.4" })
       ]
     }
   );
 }
 function SessionCostPill({ sessionId }) {
   const { t, locale } = useI18n();
-  const [data, setData] = (0, import_react8.useState)(
+  const [data, setData] = (0, import_react6.useState)(
     () => sessionId === void 0 || sessionId === "" ? null : cachedData2(sessionId)
   );
-  const [open, setOpen] = (0, import_react8.useState)(false);
-  const anchorRef = (0, import_react8.useRef)(null);
-  const panelRef = (0, import_react8.useRef)(null);
-  const [pos, setPos] = (0, import_react8.useState)(null);
-  (0, import_react8.useEffect)(() => {
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const anchorRef = (0, import_react6.useRef)(null);
+  const panelRef = (0, import_react6.useRef)(null);
+  const [pos, setPos] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => {
     if (sessionId === void 0 || sessionId === "") return;
     setData(cachedData2(sessionId));
     const unsubscribe = subscribeSessionUsage(sessionId, () => setData(cachedData2(sessionId)));
     if (getCachedSessionUsage(sessionId) === null) void fetchSessionUsage(sessionId);
     return unsubscribe;
   }, [sessionId]);
-  (0, import_react8.useLayoutEffect)(() => {
+  (0, import_react6.useLayoutEffect)(() => {
     if (!open) {
       setPos(null);
       return;
@@ -3604,7 +3360,7 @@ function SessionCostPill({ sessionId }) {
       bottom: window.innerHeight - pill.top + PANEL_GAP
     });
   }, [open, data]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!open) return;
     const close = () => setOpen(false);
     const onPointerDown = (event) => {
@@ -3656,8 +3412,8 @@ function SessionCostPill({ sessionId }) {
     hour12: false
   });
   const range = data.firstActive !== null && data.lastActive !== null ? `${rangeTime.format(data.firstActive)} \u2013 ${rangeTime.format(data.lastActive)}` : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ref: anchorRef, className: "dq-cost-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { ref: anchorRef, className: "dq-cost-anchor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "button",
       {
         type: "button",
@@ -3667,13 +3423,13 @@ function SessionCostPill({ sessionId }) {
         "aria-label": t("sessionCost.aria", { amount }),
         onClick: () => setOpen((value) => !value),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CostIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dq-cost-pill-label", children: amount })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CostIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "dq-cost-pill-label", children: amount })
         ]
       }
     ) }),
     open && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "div",
         {
           ref: panelRef,
@@ -3682,35 +3438,35 @@ function SessionCostPill({ sessionId }) {
           "aria-label": t("sessionCost.title"),
           style: pos === null ? { visibility: "hidden", left: 0, top: 0 } : { visibility: "visible", left: pos.left, bottom: pos.bottom, top: "auto" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dq-cost-panel-title", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "dq-cost-panel-title-label", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CostIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "dq-cost-panel-title", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "dq-cost-panel-title-label", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CostIcon, {}),
                 t("sessionCost.title")
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dq-cost-panel-value", children: amount })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "dq-cost-panel-value", children: amount })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "dq-cost-panel-rule", "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("dl", { className: "dq-cost-details", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dt", { children: t("common.input") }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("dd", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "dq-cost-panel-rule", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("dl", { className: "dq-cost-details", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dt", { children: t("common.input") }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("dd", { children: [
                 "\xA5",
                 fmtTurnCost(split.input)
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dt", { children: t("common.cacheHit") }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("dd", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dt", { children: t("common.cacheHit") }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("dd", { children: [
                 "\xA5",
                 fmtTurnCost(split.cache)
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dt", { children: t("common.output") }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("dd", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dt", { children: t("common.output") }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("dd", { children: [
                 "\xA5",
                 fmtTurnCost(split.output)
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dt", { children: t("sessionUsage.calls") }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dd", { children: fmtInt(data.calls) }),
-              range !== null && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dt", { children: t("sessionCost.active") }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dd", { children: range })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dt", { children: t("sessionUsage.calls") }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dd", { children: fmtInt(data.calls) }),
+              range !== null && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dt", { children: t("sessionCost.active") }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dd", { children: range })
               ] })
             ] })
           ]
@@ -3773,18 +3529,6 @@ var css = `
 .dq-cost-pill:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px}
 .dq-cost-pill svg{flex:none}
 .dq-cost-pill-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
-/* \u9AD8\u5CF0\u6682\u505C pill: same dock/skin as the cost pill. The three states never rely
-   on colour alone \u2014 copy changes and the glyph switches outline\u2192solid \u2014 but the
-   tone reinforces them: off stays neutral tertiary, on uses the primary colour,
-   holding uses the warn tone. Nothing here may widen the dock row. */
-.dq-breaker-pill{font-variant-numeric:normal}
-.dq-breaker-pill--off{color:var(--dsw-alias-label-tertiary,#59636e)}
-.dq-breaker-pill--off:hover{color:var(--dsw-alias-label-secondary,#59636e)}
-.dq-breaker-pill--on{color:var(--dsw-alias-state-business-primary,#0969da)}
-.dq-breaker-pill--on:hover{color:var(--dsw-alias-state-business-primary,#0969da)}
-.dq-breaker-pill--holding{color:var(--dq-text-warn,#9a6700)}
-.dq-breaker-pill--holding:hover{color:var(--dq-text-warn,#9a6700)}
-.dq-breaker-pill:disabled{cursor:default;opacity:.7}
 /* Click-open breakdown: the host stat-dialog skin (menu surface, prominent
    elevation, 12/18 rows), portaled to the body and placed above the pill. */
 .dq-cost-panel{position:fixed;z-index:1100;box-sizing:border-box;width:max-content;min-width:min(300px,calc(100vw - 24px));max-width:min(440px,calc(100vw - 24px));padding:16px;border:0;border-radius:var(--dsw-radius-lg,16px);background:var(--dsw-specific-menu,var(--dsw-alias-bg-overlay,#fff));-webkit-backdrop-filter:var(--dsw-menu-backdrop-filter,blur(40px) saturate(150%));backdrop-filter:var(--dsw-menu-backdrop-filter,blur(40px) saturate(150%));box-shadow:var(--dsw-elevation-prominent,0 12px 32px rgba(0,0,0,.24));font-family:var(--dsw-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif);font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary,#59636e);cursor:default}
@@ -3955,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))}
@@ -3987,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}
@@ -4054,28 +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}
-/* \u9AD8\u5CF0\u6682\u505C\u5361\uFF1A\u8BF4\u660E\u3001\u72B6\u6001\u884C\u4E0E\u4F1A\u8BDD\u5217\u8868\u3002320px \u4E0B\u6807\u9898\u7701\u7565\u3001\u72B6\u6001\u4E0E\u5F00\u5173\u6362\u884C\uFF0C
-   \u5217\u8868\u884C\u4E0D\u5141\u8BB8\u6491\u51FA\u5361\u7247\u5BBD\u5EA6\u3002\u603B\u5F00\u5173\u5173\u95ED\u65F6\u5217\u8868\u6574\u4F53\u5F31\u5316\uFF0C\u4F46\u6BCF\u4F1A\u8BDD\u5F00\u5173\u4ECD\u53EF\u64CD\u4F5C\u3002 */
-.dq-breaker-desc{margin:-6px 0 0}
-.dq-breaker-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;margin-top:10px;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-secondary,#59636e)}
-.dq-breaker-list{display:flex;flex-direction:column;margin:12px 0 0;padding:0;list-style:none;min-width:0}
-.dq-breaker-list--muted{opacity:.62}
-.dq-breaker-row{display:flex;align-items:center;gap:12px;min-width:0;padding:9px 0;border-top:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.10))}
-.dq-breaker-row:first-child{border-top:0;padding-top:0}
-.dq-breaker-row-main{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;flex:1 1 auto;min-width:0}
-.dq-breaker-row-title{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--dsw-alias-label-primary,#1f2328)}
-.dq-breaker-row-state{font-size:12px;line-height:1.5;white-space:nowrap;color:var(--dq-text-warn)}
-.dq-breaker-switch{display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
-.dq-breaker-switch input{width:16px;height:16px;margin:0;accent-color:var(--dsw-alias-state-business-primary,#0969da);cursor:pointer}
-.dq-breaker-switch input:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0969da);outline-offset:2px}
-.dq-breaker-switch input:disabled{cursor:default;opacity:.6}
-.dq-breaker-error{margin-top:8px;font-size:12px;line-height:1.5}
 .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)}
@@ -4142,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}
@@ -4163,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}
@@ -4203,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}
@@ -4290,7 +4071,7 @@ html[data-dq-quota-view] .dq-balance{padding-bottom:48px}
 `;
 
 // src/client/widget.tsx
-var import_react9 = require("react");
+var import_react7 = require("react");
 
 // src/client/sessions.ts
 function currentSessionIdOf(state) {
@@ -4299,7 +4080,7 @@ function currentSessionIdOf(state) {
 }
 
 // src/client/widget.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MARGIN = 16;
 var CORNER_KEY = "widget.corner";
 var COLLAPSED_KEY = "widget.collapsed";
@@ -4350,47 +4131,47 @@ function cornerPos(corner, node, bounds) {
 function QuotaWidget(props) {
   const { t } = useI18n();
   const sessionId = props.useSessions(currentSessionIdOf);
-  const [visible, setVisible] = (0, import_react9.useState)(widgetVisibleStore.get());
-  (0, import_react9.useEffect)(() => widgetVisibleStore.subscribe(() => setVisible(widgetVisibleStore.get())), []);
-  const [quotaViewActive2, setQuotaViewActive] = (0, import_react9.useState)(quotaViewActiveStore.get());
-  (0, import_react9.useEffect)(() => quotaViewActiveStore.subscribe(() => setQuotaViewActive(quotaViewActiveStore.get())), []);
-  const [lowBalance, setLowBalance] = (0, import_react9.useState)(lowBalanceStore.get());
-  (0, import_react9.useEffect)(() => lowBalanceStore.subscribe(() => setLowBalance(lowBalanceStore.get())), []);
-  const [selectedTabIds, setSelectedTabIds] = (0, import_react9.useState)(widgetTabIdsStore.get());
-  (0, import_react9.useEffect)(() => widgetTabIdsStore.subscribe(() => setSelectedTabIds(widgetTabIdsStore.get())), []);
-  const [viewTabs, setViewTabs] = (0, import_react9.useState)(() => props.views.list());
-  (0, import_react9.useEffect)(() => props.views.subscribe(() => setViewTabs(props.views.list())), [props.views]);
-  const [activeViewId, setActiveViewId] = (0, import_react9.useState)(null);
+  const [visible, setVisible] = (0, import_react7.useState)(widgetVisibleStore.get());
+  (0, import_react7.useEffect)(() => widgetVisibleStore.subscribe(() => setVisible(widgetVisibleStore.get())), []);
+  const [quotaViewActive2, setQuotaViewActive] = (0, import_react7.useState)(quotaViewActiveStore.get());
+  (0, import_react7.useEffect)(() => quotaViewActiveStore.subscribe(() => setQuotaViewActive(quotaViewActiveStore.get())), []);
+  const [lowBalance, setLowBalance] = (0, import_react7.useState)(lowBalanceStore.get());
+  (0, import_react7.useEffect)(() => lowBalanceStore.subscribe(() => setLowBalance(lowBalanceStore.get())), []);
+  const [selectedTabIds, setSelectedTabIds] = (0, import_react7.useState)(widgetTabIdsStore.get());
+  (0, import_react7.useEffect)(() => widgetTabIdsStore.subscribe(() => setSelectedTabIds(widgetTabIdsStore.get())), []);
+  const [viewTabs, setViewTabs] = (0, import_react7.useState)(() => props.views.list());
+  (0, import_react7.useEffect)(() => props.views.subscribe(() => setViewTabs(props.views.list())), [props.views]);
+  const [activeViewId, setActiveViewId] = (0, import_react7.useState)(null);
   const cachedBalance = getCachedBalance();
-  const [data, setData] = (0, import_react9.useState)(cachedBalance?.data ?? null);
-  const [error, setError] = (0, import_react9.useState)(null);
-  const [loading, setLoading] = (0, import_react9.useState)(cachedBalance === null);
-  const [collapsed, setCollapsed] = (0, import_react9.useState)(() => loadPref(COLLAPSED_KEY, isBoolean, false));
-  const [pos, setPos] = (0, import_react9.useState)(null);
-  const [corner, setCorner] = (0, import_react9.useState)(() => loadPref(CORNER_KEY, isCorner, "br"));
-  const [dragging, setDragging] = (0, import_react9.useState)(false);
-  const rootRef = (0, import_react9.useRef)(null);
-  const dragRef = (0, import_react9.useRef)(null);
+  const [data, setData] = (0, import_react7.useState)(cachedBalance?.data ?? null);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [loading, setLoading] = (0, import_react7.useState)(cachedBalance === null);
+  const [collapsed, setCollapsed] = (0, import_react7.useState)(() => loadPref(COLLAPSED_KEY, isBoolean, false));
+  const [pos, setPos] = (0, import_react7.useState)(null);
+  const [corner, setCorner] = (0, import_react7.useState)(() => loadPref(CORNER_KEY, isCorner, "br"));
+  const [dragging, setDragging] = (0, import_react7.useState)(false);
+  const rootRef = (0, import_react7.useRef)(null);
+  const dragRef = (0, import_react7.useRef)(null);
   const readUsage = () => {
     const cached = getCachedUsage();
     return { data: cached?.ok === true ? cached.data ?? null : null, at: getCachedUsageAt() };
   };
-  const [usage, setUsage] = (0, import_react9.useState)(readUsage);
-  (0, import_react9.useEffect)(() => subscribeUsage(() => setUsage(readUsage())), []);
+  const [usage, setUsage] = (0, import_react7.useState)(readUsage);
+  (0, import_react7.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_react9.useState)(() => readSessionUsage(sessionId));
-  (0, import_react9.useEffect)(() => {
+  const [sessionUsage, setSessionUsage] = (0, import_react7.useState)(() => readSessionUsage(sessionId));
+  (0, import_react7.useEffect)(() => {
     setSessionUsage(readSessionUsage(sessionId));
     if (sessionId === void 0) return;
     const unsubscribe = subscribeSessionUsage(sessionId, () => setSessionUsage(readSessionUsage(sessionId)));
     void fetchSessionUsage(sessionId);
     return unsubscribe;
   }, [sessionId]);
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react7.useLayoutEffect)(() => {
     const viewIds = viewTabs.map((tab) => tab.id);
     const read = () => {
       const next = getActiveConversationViewId(getShellFrame(rootRef.current), viewIds);
@@ -4427,14 +4208,14 @@ function QuotaWidget(props) {
       setLoading(false);
     }
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     void load(true);
     const id = setInterval(() => {
       void load(false);
     }, 6e4);
     return () => clearInterval(id);
   }, []);
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react7.useLayoutEffect)(() => {
     if (!visible || quotaViewActive2) return;
     const node = rootRef.current;
     if (node === null) return;
@@ -4562,9 +4343,9 @@ function QuotaWidget(props) {
   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_runtime8.jsxs)("div", { className: "dsh-quota-row", title: t("widget.sessionCostTitle"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dsh-quota-label", children: t("widget.sessionCost") }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "dsh-quota-value", children: [
+  const sessionCostRow = sessionUsage === null ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dsh-quota-row", title: t("widget.sessionCostTitle"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dsh-quota-label", children: t("widget.sessionCost") }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "dsh-quota-value", children: [
       "\xA5",
       fmtTurnCost(sessionUsage.cost)
     ] })
@@ -4572,50 +4353,50 @@ function QuotaWidget(props) {
   let body = null;
   if (!collapsed) {
     if (loading && data === null && error === null) {
-      body = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dsh-quota-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: t("widget.loading") }),
+      body = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dsh-quota-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: t("widget.loading") }),
         sessionCostRow
       ] });
     } else if (error !== null && data === null) {
-      body = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dsh-quota-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "dsh-quota-error", children: localizeApiError(error, t, "error.query") }),
+      body = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dsh-quota-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "dsh-quota-error", children: localizeApiError(error, t, "error.query") }),
         sessionCostRow
       ] });
     } else if (primary !== null) {
-      body = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dsh-quota-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "dsh-quota-remaining-label", children: t("balance.remaining") }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { title: low ? t("widget.lowTitle", { amount: fmt(lowBalance) }) : void 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `dsh-quota-total${low ? " dsh-quota-total--low" : ""}`, children: fmt(primary.total) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dsh-quota-currency", children: primary.currency })
+      body = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dsh-quota-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "dsh-quota-remaining-label", children: t("balance.remaining") }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { title: low ? t("widget.lowTitle", { amount: fmt(lowBalance) }) : void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `dsh-quota-total${low ? " dsh-quota-total--low" : ""}`, children: fmt(primary.total) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dsh-quota-currency", children: primary.currency })
         ] }),
-        usage.data !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dsh-quota-row", title: t("widget.todayCostTitle", { age: usageAgeText }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dsh-quota-label", children: t("widget.todayCost") }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "dsh-quota-value", children: [
+        usage.data !== null && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dsh-quota-row", title: t("widget.todayCostTitle", { age: usageAgeText }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dsh-quota-label", children: t("widget.todayCost") }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "dsh-quota-value", children: [
             "\xA5",
             fmt(usage.data.summary.today.cost)
           ] })
         ] }),
         sessionCostRow,
-        data?.isAvailable === false && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dsh-quota-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dsh-quota-label", children: t("common.status") }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dsh-quota-value dsh-quota-error", children: t("common.unavailable") })
+        data?.isAvailable === false && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dsh-quota-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dsh-quota-label", children: t("common.status") }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dsh-quota-value dsh-quota-error", children: t("common.unavailable") })
         ] })
       ] });
     } else {
-      body = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dsh-quota-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "dsh-quota-error", children: t("widget.noBalance") }),
+      body = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dsh-quota-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: `dsh-quota-root${dragging ? " dsh-quota-dragging" : ""}${hidden ? " dsh-quota-root--hidden" : ""}`,
       style,
       "aria-hidden": hidden,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "div",
         {
           ref: rootRef,
@@ -4627,14 +4408,14 @@ function QuotaWidget(props) {
           onPointerCancel: () => endDrag(false),
           onLostPointerCapture: () => endDrag(false),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dsh-quota-header", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dsh-quota-title", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dsh-quota-grip", title: t("widget.dragGrip"), children: "\u2807" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: dotClass }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dsh-quota-name", children: t("widget.title") })
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dsh-quota-header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dsh-quota-title", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dsh-quota-grip", title: t("widget.dragGrip"), children: "\u2807" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: dotClass }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dsh-quota-name", children: t("widget.title") })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dsh-quota-actions", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dsh-quota-actions", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     className: "dsh-quota-btn",
@@ -4650,7 +4431,7 @@ function QuotaWidget(props) {
                     children: "\u21BB"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     className: "dsh-quota-btn",
@@ -4668,7 +4449,7 @@ function QuotaWidget(props) {
                 )
               ] })
             ] }),
-            collapsed && primary !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "dsh-quota-collapsed-total-row", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: `dsh-quota-collapsed-total${low ? " dsh-quota-total--low" : ""}`, children: [
+            collapsed && primary !== null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "dsh-quota-collapsed-total-row", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: `dsh-quota-collapsed-total${low ? " dsh-quota-total--low" : ""}`, children: [
               fmt(primary.total),
               " ",
               primary.currency
@@ -4699,7 +4480,7 @@ function conversationViewsSource(slots) {
 }
 
 // src/client/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var name = "dsh-usage-dashboard";
 var inject = ["slots", "locale", "layout"];
 var openQuotaTab = null;
@@ -4720,15 +4501,11 @@ 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, useSessions }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorBoundary, { t: slotT, silent: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(QuotaWidget, { useSessions, views }) }) })
+    ({ t: slotT, useSessions }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorBoundary, { t: slotT, silent: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(QuotaWidget, { useSessions, views }) }) })
   ));
   ctx.slots.inject("conversation.composer.dock", () => ctx.slots.register(
     { name: "conversation.composer.dock", id: "quota-cost", order: 2, locale: NS },
-    ({ t: slotT, sessionId }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorBoundary, { t: slotT, silent: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SessionCostPill, { sessionId }) }) })
-  ));
-  ctx.slots.inject("conversation.composer.dock", () => ctx.slots.register(
-    { name: "conversation.composer.dock", id: "peak-breaker", order: 3, locale: NS },
-    ({ t: slotT, sessionId }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorBoundary, { t: slotT, silent: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BreakerPill, { sessionId }) }) })
+    ({ t: slotT, sessionId }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorBoundary, { t: slotT, silent: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SessionCostPill, { sessionId }) }) })
   ));
   ctx.slots.inject("conversation.chat.assistant-actions", () => ctx.slots.register(
     {
@@ -4738,13 +4515,13 @@ function apply(ctx) {
       locale: NS,
       label: () => t("messageCost.label")
     },
-    ({ t: slotT, sessionId, messageId }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorBoundary, { t: slotT, silent: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MessageCost, { sessionId, messageId }) }) })
+    ({ t: slotT, sessionId, messageId }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorBoundary, { t: slotT, silent: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MessageCost, { sessionId, messageId }) }) })
   ));
   const QuotaView = ({ t: slotT, sessionId, openView }) => {
-    (0, import_react10.useEffect)(() => {
+    (0, import_react8.useEffect)(() => {
       if (openView !== void 0) openQuotaTab = openView;
     }, [openView]);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorBoundary, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BalanceDashboard, { sessionId, views }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorBoundary, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BalanceDashboard, { sessionId, views }) }) });
   };
   ctx.effect(() => {
     let disposeView = null;
@@ -4780,14 +4557,14 @@ function apply(ctx) {
       disposeView?.();
     };
   }, "dsh-usage-dashboard: quota tab registration");
-  const QuotaPanel = ({ t: slotT }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dq-panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dq-panel-head", "data-window-drag": true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "dq-panel-title", children: slotT("nav.quota") }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dq-panel-caption", children: slotT("panel.caption") })
+  const QuotaPanel = ({ t: slotT }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dq-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dq-panel-head", "data-window-drag": true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h1", { className: "dq-panel-title", children: slotT("nav.quota") }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dq-panel-caption", children: slotT("panel.caption") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorBoundary, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BalanceDashboard, { views }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LocaleProvider, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorBoundary, { t: slotT, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BalanceDashboard, { views }) }) })
   ] });
-  const QuotaGlyph = ({ size, active }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  const QuotaGlyph = ({ size, active }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       className: "dq-side-icon",
@@ -4803,23 +4580,23 @@ function apply(ctx) {
       "aria-hidden": "true",
       focusable: "false",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 3.3 8 8.7l4.5-5.4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M8 8.7V13.2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 10.2h9" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 12.1h9" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M3.5 3.3 8 8.7l4.5-5.4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M8 8.7V13.2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M3.5 10.2h9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M3.5 12.1h9" })
       ]
     }
   );
   const QuotaFooterButton = ({ wide, t: slotT }) => {
-    const [active, setActive] = (0, import_react10.useState)(() => ctx.layout.panelInfo.getSnapshot().activePanelId === QUOTA_PANEL_ID);
-    (0, import_react10.useEffect)(() => {
+    const [active, setActive] = (0, import_react8.useState)(() => ctx.layout.panelInfo.getSnapshot().activePanelId === QUOTA_PANEL_ID);
+    (0, import_react8.useEffect)(() => {
       const sync = () => {
         setActive(ctx.layout.panelInfo.getSnapshot().activePanelId === QUOTA_PANEL_ID);
       };
       sync();
       return ctx.layout.panelInfo.subscribe(sync);
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "button",
       {
         type: "button",
@@ -4831,8 +4608,8 @@ function apply(ctx) {
           ctx.layout.selectPanel(active ? null : QUOTA_PANEL_ID);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dq-side-entry-icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(QuotaGlyph, { size: 16 }) }),
-          wide && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dq-side-entry-label", children: slotT("nav.quota") })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dq-side-entry-icon", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(QuotaGlyph, { size: 16 }) }),
+          wide && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dq-side-entry-label", children: slotT("nav.quota") })
         ]
       }
     );