@angelyeye/dsh-cost-tracker 1.7.0

package/client.js

@@ -0,0 +1,1255 @@
+// ============================================================
+// DSH 花费统计插件 —— Client 半端（静态版）
+// 由动态版 cost-tracker.client.js 改造而来：
+//   host.call     → fetch('/api/cost-tracker/<method>')
+//   styles.insert → 原生 <style> 标签注入
+//   React         → require('react')
+// 输出为浏览器 ModuleLoader bundle：exports.apply / exports.inject
+// ============================================================
+window.__ModuleLoader__.load({
+	id: "dsh-cost-tracker",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		const React = require("react");
+
+		// ---------- api helper (replaces host.call) ----------
+		function apiCall(method, args) {
+			return fetch("/api/cost-tracker/" + method, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(args || {}),
+			}).then((r) => r.json());
+		}
+
+		const e = React.createElement;
+		const useState = React.useState;
+		const useEffect = React.useEffect;
+		const useRef = React.useRef;
+
+		const BLUE = "var(--dsw-alias-state-business-primary, #4176e6)";
+		const AMBER = "var(--dsw-alias-state-warn-primary, #d97706)";
+		const GREEN = "var(--dsw-alias-state-success-primary, #16a34a)";
+		const RED = "var(--dsw-alias-state-error-primary, #dc2626)";
+		const GRAY = "var(--dsw-alias-label-tertiary, #9ca3af)";
+		const INK2 = "var(--dsw-alias-label-secondary, #6b7280)";
+		const GRID = "var(--dsw-alias-border-l1, #e5e7eb)";
+		const TOKEN_COLORS = ["rgb(30,64,175)", "rgb(37,99,235)", "rgb(96,165,250)", "rgb(191,219,254)"];
+		const TOKEN_NAMES = ["输入", "缓存写入", "输出", "缓存命中"];
+		// 「顺序渐变色阶」配色方案：第 1 名（总消费最高）最深垫底，名次越靠后越浅，
+		// 色相按各自方向轻微漂移。三套可选（页内切换，localStorage 记忆）：
+		//   橙→黄：hue 20°→64°  蓝→紫：hue 212°→250°  蓝→浅蓝：hue 212°→200°
+		const COLOR_SCHEMES = {
+			"orange-yellow": { label: "橙→黄", dot: "#F96100", hue: 20, sat: 95, hueStep: 4 },
+			"blue-purple": { label: "蓝→紫", dot: "#2E7CE6", hue: 212, sat: 75, hueStep: 3.5 },
+			"blue-light": { label: "蓝→浅蓝", dot: "#7CC0F5", hue: 212, sat: 75, hueStep: -1 },
+		};
+		function schemeColor(i, s) {
+			const light = Math.min(50 + i * 5, 78);
+			const hue = s.hue + i * s.hueStep;
+			const sat = Math.max(s.sat - i * 2, 65);
+			return "hsl(" + hue + ", " + sat + "%, " + light + "%)";
+		}
+		// 色款：该方案从深（底）到浅（顶）的渐变条，直观展示色阶走向
+		function schemeSwatch(k) {
+			const s = COLOR_SCHEMES[k];
+			return "linear-gradient(to top, " + schemeColor(0, s) + ", " + schemeColor(7, s) + ")";
+		}
+		const MEMBERSHIP = { LEVEL_FREE: "免费版", LEVEL_BASIC: "基础版", LEVEL_INTERMEDIATE: "进阶版", LEVEL_ADVANCED: "高级版" };
+
+		// ---------- styles ----------
+		function applyStyles(ctx) {
+			const css = `
+.cost-wrap { padding: 4px 2px 28px; color: var(--dsw-alias-label-primary, #171a1f); font-size: 13px; }
+.cost-h1 { font-size: 16px; font-weight: 600; margin: 2px 0 12px; display: flex; align-items: center; gap: 8px; }
+.cost-h1 .cost-icon { flex: none; }
+.cost-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.cost-spacer { flex: 1; }
+.cost-hint { color: var(--dsw-alias-label-secondary, #5b6472); font-size: 12px; }
+.cost-err { color: var(--dsw-alias-state-error-primary, #dc2626); font-size: 12px; }
+.cost-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
+.cost-card { background: var(--dsw-alias-bg-layer-1, #fff); border: 1px solid var(--dsw-alias-border-l1, #e5e7eb); border-radius: 10px; padding: 14px 16px; }
+.cost-card-title { color: var(--dsw-alias-label-secondary, #5b6472); font-size: 12px; }
+.cost-card-value { font-size: 24px; font-weight: 650; margin-top: 6px; font-variant-numeric: tabular-nums; }
+.cost-card-sub { color: var(--dsw-alias-label-secondary, #5b6472); font-size: 12px; margin-top: 6px; }
+.cost-panel { background: var(--dsw-alias-bg-layer-1, #fff); border: 1px solid var(--dsw-alias-border-l1, #e5e7eb); border-radius: 10px; padding: 14px 16px; margin: 12px 0; }
+.cost-panel-title { font-size: 14px; font-weight: 600; }
+.cost-tabs { display: inline-flex; border: 1px solid var(--dsw-alias-border-l1, #e5e7eb); border-radius: 999px; overflow: hidden; }
+.cost-tab { padding: 3px 12px; font-size: 12px; cursor: pointer; background: transparent; border: none; color: var(--dsw-alias-label-secondary, #5b6472); }
+.cost-tab-on { background: var(--dsw-alias-state-business-primary, #4176e6); color: #fff; }
+.cost-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); color: var(--dsw-alias-label-secondary, #5b6472); }
+.cost-btn { padding: 4px 12px; font-size: 12px; border-radius: 6px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #171a1f); cursor: pointer; }
+.cost-btn:hover { background: var(--dsw-alias-bg-layer-2, #f3f4f6); }
+.cost-btn:disabled { opacity: 0.6; cursor: default; }
+.cost-select { padding: 4px 8px; font-size: 12px; border-radius: 6px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #171a1f); }
+.cost-input { padding: 4px 8px; font-size: 12px; border-radius: 6px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #171a1f); width: 220px; }
+.cost-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--dsw-alias-label-secondary, #5b6472); }
+.cost-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
+.cost-bar-track { height: 8px; border-radius: 999px; background: var(--dsw-alias-bg-layer-2, #eef0f3); overflow: hidden; margin-top: 6px; }
+.cost-bar-fill { height: 100%; border-radius: 999px; }
+.cost-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
+.cost-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+.cost-table th { text-align: left; color: var(--dsw-alias-label-secondary, #5b6472); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--dsw-alias-border-l1, #e5e7eb); }
+.cost-table td { padding: 6px 8px; border-bottom: 1px solid var(--dsw-alias-border-l1, #eef0f2); font-variant-numeric: tabular-nums; }
+.cost-dock { font-size: 12px; color: var(--dsw-alias-label-secondary, #5b6472); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; line-height: 1; }
+.cost-seg { display: inline-flex; align-items: center; gap: 6px; padding-right: 2px; }
+.cost-seg + .cost-seg::before { content: ""; display: inline-block; width: 1px; height: 14px; margin-right: 6px; background: var(--dsw-alias-border-l2, #d1d5db); vertical-align: middle; }
+.cost-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); background: var(--dsw-alias-bg-layer-2, #f3f4f6); line-height: 1.3; }
+.cost-dock-main { color: var(--dsw-alias-label-primary, #171a1f); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.2px; }
+.cost-pill-sub { font-variant-numeric: tabular-nums; }
+.cost-chip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); color: var(--dsw-alias-label-secondary, #5b6472); background: var(--dsw-alias-bg-layer-1, #fff); font-variant-numeric: tabular-nums; }
+.cost-pill-sub-badge { border-color: var(--dsw-alias-state-warn-primary, #d97706); color: var(--dsw-alias-state-warn-primary, #d97706); background: color-mix(in srgb, var(--dsw-alias-state-warn-primary, #d97706) 8%, transparent); font-weight: 500; }
+.cost-model-toggle { padding: 1px 6px; font-size: 11px; line-height: 1.4; border-radius: 6px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); background: transparent; color: var(--dsw-alias-label-secondary, #5b6472); cursor: pointer; }
+.cost-model-toggle:hover { background: var(--dsw-alias-bg-layer-2, #f3f4f6); }
+.cost-chart-host { position: relative; }
+.cost-tip { position: absolute; top: 4px; background: var(--dsw-alias-bg-layer-1, #fff); border: 1px solid var(--dsw-alias-border-l1, #e5e7eb); border-radius: 10px; padding: 9px 12px; box-shadow: 0 6px 20px rgba(15, 23, 42, .10); font-size: 12px; pointer-events: none; white-space: nowrap; z-index: 10; }
+.cost-tip-title { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-weight: 600; margin-bottom: 5px; }
+.cost-tip-title .cost-tip-total { font-variant-numeric: tabular-nums; }
+.cost-tip-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
+.cost-tip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; }
+.cost-tip-name { flex: 1; color: var(--dsw-alias-label-secondary, #5b6472); padding-right: 20px; }
+.cost-tip-val { font-variant-numeric: tabular-nums; text-align: right; }
+/* 用量热力图（Codex 风格 26 周方格） */
+.cost-ug { display: flex; flex-direction: column; gap: 12px; }
+.cost-ug-total { font-size: 13px; color: var(--dsw-alias-label-primary, #171a1f); }
+.cost-ug-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); gap: 3px; width: 100%; }
+.cost-ug-cell { width: 100%; aspect-ratio: 1/1; border-radius: 3px; box-sizing: border-box; background: color-mix(in srgb, var(--dsw-alias-label-primary, #171a1f) 8%, transparent); border: 1px solid var(--dsw-alias-border-l1, #e5e7eb); cursor: default; }
+.cost-ug-cell.l1 { background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #4176e6) 25%, var(--dsw-alias-bg-layer-3, #eef0f3)); border-color: transparent; }
+.cost-ug-cell.l2 { background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #4176e6) 50%, var(--dsw-alias-bg-layer-3, #eef0f3)); border-color: transparent; }
+.cost-ug-cell.l3 { background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #4176e6) 75%, var(--dsw-alias-bg-layer-3, #eef0f3)); border-color: transparent; }
+.cost-ug-cell.l4 { background: var(--dsw-alias-state-business-primary, #4176e6); border-color: transparent; }
+.cost-ug-cell.today { outline: 1px solid var(--dsw-alias-label-secondary, #6b7280); outline-offset: 1px; }
+.cost-ug-months { display: grid; grid-auto-flow: column; gap: 3px; width: 100%; font-size: 10px; color: var(--dsw-alias-label-tertiary, #9ca3af); margin-top: 4px; }
+.cost-ug-month { white-space: nowrap; }
+.cost-ug-host { position: relative; }
+.cost-ug-tip { position: absolute; background: var(--dsw-alias-bg-layer-1, #fff); border: 1px solid var(--dsw-alias-border-l1, #e5e7eb); border-radius: 10px; padding: 9px 12px; box-shadow: 0 6px 20px rgba(15, 23, 42, .10); font-size: 12px; pointer-events: none; white-space: nowrap; z-index: 10; }
+.cost-ug-tip-total { font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
+.cost-ug-tip-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
+.cost-ug-tip-name { flex: 1; color: var(--dsw-alias-label-secondary, #5b6472); padding-right: 16px; }
+.cost-ug-tip-val { font-variant-numeric: tabular-nums; text-align: right; }
+/* 峰谷时段条（侧边栏 / 设置面板）——对标 dsh-cost-meter */
+.cost-ps { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
+.cost-ps-stack { flex-direction: column; align-items: stretch; gap: 4px; }
+/* 双行紧凑：column 布局下轨道的 flex-basis(72px) 会落到纵轴变成高度，须收回，保持与单行一致的 6px 细条 */
+.cost-ps-stack .cost-ps-track { flex: 0 0 auto; width: 100%; min-width: 0; }
+.cost-ps-track { position: relative; display: flex; flex: 1 1 72px; min-width: 72px; height: 6px; border-radius: 999px; overflow: hidden; border: 1px solid var(--dsw-alias-border-l1, #e5e7eb); background: var(--dsw-alias-bg-layer-3, #eef0f3); }
+.cost-ps-seg { height: 100%; flex: 1; }
+/* 单行紧凑：24h 比例轨道（橙=高峰/蓝=平价按窗口比例绝对定位，白线=实时进度） */
+.cost-ps-track .cost-ps-seg { position: absolute; top: 0; bottom: 0; flex: none; }
+.cost-ps-peakseg { background: #ff9800; }
+.cost-ps-offseg { background: var(--dsw-alias-state-business-primary, #4176e6); }
+.cost-ps-marker { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: var(--dsw-alias-bg-base, #fff); box-shadow: 0 0 0 1px var(--dsw-alias-label-tertiary, #9ca3af); transform: translateX(-50%); transition: left .4s ease; z-index: 2; }
+.cost-ps-chip { font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--dsw-alias-label-secondary, #5b6472); }
+.cost-ps.peak .cost-ps-chip { color: #ff9800; }
+.cost-ps.off .cost-ps-chip { color: var(--dsw-alias-state-business-primary, #4176e6); }
+.cost-ps.weekend .cost-ps-chip { color: #34a853; }
+.cost-ps-foot { font-size: 11px; color: var(--dsw-alias-label-tertiary, #9ca3af); white-space: nowrap; }
+/* 环形表盘（classic 改造）：24h 中空圆环，蓝=平价、橙=高峰、绿=周末 */
+.cost-ps-ring { flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
+.cost-ps-ring svg { display: block; max-width: 100%; }
+.cost-ps-ringfoot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
+/* 窄栏（rail）态：只显示竖排短词 */
+.cost-ps-rail { display: inline-flex; flex-direction: column; gap: 1px; }
+.cost-ps-rail .cost-ps-word { font-size: 10px; font-weight: 600; line-height: 1.1; white-space: nowrap; color: var(--dsw-alias-label-secondary, #5b6472); }
+.cost-ps-rail.peak .cost-ps-word { color: #ff9800; }
+.cost-ps-rail.off .cost-ps-word { color: var(--dsw-alias-state-business-primary, #4176e6); }
+.cost-ps-rail.weekend .cost-ps-word { color: #34a853; }
+/* 侧边栏底部(sidebar.footer.action)多插件 UI 兼容：
+   DSH 渲染器把该槽锚点设为 display:contents(见 dsh-client-ui-renderer ANCHOR_STYLE)，
+   多个插件内容会被并进同一行(如与 linxin666/dsh-web-ui-all 冲突)；改为纵向堆叠即可共存。
+   采用稳定 data-slot 选择器，收起(rail)态仅显示短词、内容极窄，天然不受影响。 */
+[data-slot="sidebar.footer.action"] { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 4px !important; flex: 1 1 auto !important; min-width: 0 !important; }
+/* 峰谷切换前弹窗 */
+.cost-pa { position: fixed; z-index: 9999; width: 340px; max-width: calc(100vw - 32px); padding: 14px 16px; border-radius: 14px; background: var(--dsw-alias-bg-layer-2, #fff); border: 1px solid var(--dsw-alias-border-l2, #d1d5db); box-shadow: 0 14px 36px rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 8px; font-size: 13px; animation: cost-pa-in .22s cubic-bezier(.2,.8,.2,1); }
+.cost-pa.cost-pa-corner { right: 20px; bottom: 20px; }
+.cost-pa.cost-pa-center { top: 50%; left: 50%; transform: translate(-50%,-50%); animation-name: cost-pa-in-center; }
+.cost-pa-peak { border-top: 3px solid var(--dsw-alias-state-warn-primary, #d97706); }
+.cost-pa-offpeak { border-top: 3px solid var(--dsw-alias-state-info-primary, #3b82f6); }
+.cost-pa-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
+.cost-pa-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent); }
+.cost-pa-peak .cost-pa-badge { color: var(--dsw-alias-state-warn-primary, #d97706); }
+.cost-pa-offpeak .cost-pa-badge { color: var(--dsw-alias-state-info-primary, #3b82f6); }
+.cost-pa-title { font-size: 14px; font-weight: 600; color: var(--dsw-alias-label-primary, #171a1f); }
+.cost-pa-body { color: var(--dsw-alias-label-secondary, #5b6472); line-height: 1.55; }
+.cost-pa-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
+@keyframes cost-pa-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
+@keyframes cost-pa-in-center { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%,-50%); } }
+`;
+			const tag = document.createElement("style");
+			tag.setAttribute("data-plugin-css", "cost-tracker-plugin");
+			tag.textContent = css;
+			document.head.appendChild(tag);
+			ctx.effect(() => () => { tag.remove(); }, "cost-tracker: styles");
+		}
+
+		function pluginIcon(size) {
+			const s = size || 16;
+			return e("svg", {
+				className: "cost-icon", width: s, height: s, viewBox: "0 0 16 16",
+				fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true",
+			},
+				e("rect", { x: 1.5, y: 8.6, width: 3.1, height: 5.9, rx: 0.9, fill: "currentColor" }),
+				e("rect", { x: 5.9, y: 5.2, width: 3.1, height: 9.3, rx: 0.9, fill: "currentColor" }),
+				e("g", { fill: "none", stroke: "currentColor", strokeWidth: 1.3, strokeLinecap: "round", strokeLinejoin: "round" },
+					e("path", { d: "M10.7 4.9 L12.3 7.2 L13.9 4.9" }),
+					e("path", { d: "M12.3 7.2 L12.3 10.9" }),
+					e("path", { d: "M10.9 7.8 L13.7 7.8" }),
+					e("path", { d: "M10.9 9.5 L13.7 9.5" })));
+		}
+
+		function fmtInt(n) { return String(Math.round(Number(n) || 0)).replace(/\B(?=(\d{3})+(?!\d))/g, ","); }
+		function fmtMoney(n) {
+			const x = Number(n) || 0;
+			const s = Math.abs(x) >= 1 ? x.toFixed(2) : x.toFixed(4);
+			const parts = s.split(".");
+			parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+			return parts.join(".");
+		}
+		function fmtCompact(n) {
+			n = Number(n) || 0;
+			if (n >= 1000000) return (n / 1000000).toFixed(1) + "M";
+			if (n >= 1000) return (n / 1000).toFixed(1) + "K";
+			return String(Math.round(n));
+		}
+		// 热力图 token 显示：<1000 原样；≥1000 用 K（≥100 时取整），≥1000000 用 M（≥100 时取整）
+		function fmtTokens(n) {
+			const v = Math.max(0, Number(n) || 0);
+			const scaled = (x) => (x >= 100 ? String(Math.round(x)) : String(Math.round(x * 10) / 10));
+			if (v < 1000) return String(Math.round(v));
+			if (v < 1000000) return scaled(v / 1000) + "K";
+			return scaled(v / 1000000) + "M";
+		}
+		function fmtAxisMoney(v) {
+			if (v <= 0) return "0";
+			if (v >= 1000) return (v / 1000).toFixed(1) + "k";
+			if (v >= 100) return String(Math.round(v));
+			if (v >= 1) return v.toFixed(1);
+			return v.toFixed(2);
+		}
+		function fmtTickInt(v) { return v >= 1000 ? fmtCompact(v) : String(Math.round(v)); }
+		function periodText(p) { return p === "peak" ? "高峰" : p === "off-peak" ? "闲时" : "平峰"; }
+		function shortModel(m) { const i = m.lastIndexOf("/"); return i >= 0 ? m.slice(i + 1) : m; }
+		// 订阅套餐友好名称：kimi-coding / kimi → Kimi Coding Plan，其余保留 provider 名
+		function subPlanName(p) {
+			const np = String(p || "").toLowerCase().replace(/-official$/, "");
+			if (np === "kimi-coding" || np === "kimi") return "Kimi Coding Plan";
+			return np || "订阅";
+		}
+		function countdown(resetTime, now) {
+			const t = Date.parse(resetTime);
+			if (!t) return "";
+			let ms = t - now;
+			if (ms <= 0) return "即将重置";
+			const d = Math.floor(ms / 86400000); ms -= d * 86400000;
+			const h = Math.floor(ms / 3600000); ms -= h * 3600000;
+			const m = Math.floor(ms / 60000);
+			return (d > 0 ? d + " 天 " : "") + h + " 小时 " + m + " 分钟后重置";
+		}
+		function windowLabel(w) {
+			if (w.timeUnit === "TIME_UNIT_MINUTE") {
+				return (w.duration >= 60 ? (Math.round(w.duration / 6) / 10) + " 小时" : w.duration + " 分钟") + "滚动窗口限额";
+			}
+			if (w.timeUnit === "TIME_UNIT_HOUR") return w.duration + " 小时滚动窗口限额";
+			if (w.timeUnit === "TIME_UNIT_DAY") return w.duration + " 天滚动窗口限额";
+			return w.duration + " " + (w.timeUnit || "") + " 窗口限额";
+		}
+
+		function legendRow(segs) {
+			return e("div", { className: "cost-legend" }, segs.map((s, i) =>
+				e("span", { key: i }, e("span", { className: "cost-dot", style: { background: s.color } }), s.name)));
+		}
+
+		function StackedBarsChart(props) {
+			const labels = props.labels;
+			const titles = props.titles || props.labels;
+			const segs = props.segs;
+			const rows = props.rows;
+			const daySegs = props.daySegs; // 可选：按天预排好的段列表 [{name,color,value}]（大段在前/底部）
+			const fmtY = props.fmtY;
+			const fmtValue = props.fmtValue || props.fmtY;
+			const [hover, setHover] = useState(-1);
+			const W = 640, H = 200, ml = 44, mr = 6, mt = 8, mb = 20;
+			const pw = W - ml - mr, ph = H - mt - mb;
+			const n = daySegs ? daySegs.length : rows.length;
+			const perDay = (i) => daySegs ? daySegs[i] : rows[i].map((v, j) => ({ name: segs[j].name, color: segs[j].color, value: v }));
+			let max = 0;
+			for (let i = 0; i < n; i++) { let s = 0; for (const sg of perDay(i)) s += sg.value; if (s > max) max = s; }
+			if (max <= 0) max = 1;
+			const step = n > 0 ? pw / n : 0;
+			const children = [];
+			const ticks = [0, max / 2, max];
+			for (let ti = 0; ti < 3; ti++) {
+				const t = ticks[ti];
+				const y = mt + ph - (t / max) * ph;
+				children.push(e("line", { key: "g" + ti, x1: ml, y1: y, x2: W - mr, y2: y, strokeWidth: 1, style: { stroke: GRID } }));
+				children.push(e("text", { key: "t" + ti, x: ml - 5, y: y + 3, textAnchor: "end", fontSize: 10, style: { fill: INK2 } }, fmtY(t)));
+			}
+			if (n > 0) {
+				const bw = Math.max(2, Math.min(36, step * 0.55));
+				const stride = Math.max(1, Math.ceil(n / 6));
+				for (let i = 0; i < n; i++) {
+					let acc = 0;
+					const x = ml + i * step + (step - bw) / 2;
+					const r = perDay(i);
+					for (let j = 0; j < r.length; j++) {
+						const v = r[j].value;
+						if (v > 0) {
+							const h = Math.max(0.6, (v / max) * ph);
+							const y = mt + ph - ((acc + v) / max) * ph;
+							children.push(e("rect", { key: "b" + i + "-" + j, x: x, y: y, width: bw, height: h, rx: 1, style: { fill: r[j].color } }));
+						}
+						acc += v;
+					}
+					if (i % stride === 0 || i === n - 1) {
+						children.push(e("text", { key: "x" + i, x: ml + i * step + step / 2, y: H - 5, textAnchor: "middle", fontSize: 10, style: { fill: INK2 } }, labels[i]));
+					}
+				}
+			}
+			if (hover >= 0 && hover < n) {
+				const ix = ml + hover * step + step / 2;
+				children.push(e("line", { key: "hover", x1: ix, y1: mt, x2: ix, y2: mt + ph, strokeDasharray: "3 3", strokeWidth: 1, style: { stroke: INK2 } }));
+			}
+			function onMove(ev) {
+				if (n <= 0) { setHover(-1); return; }
+				const rect = ev.currentTarget.getBoundingClientRect();
+				const vx = (ev.clientX - rect.left) / rect.width * W;
+				const i = Math.floor((vx - ml) / step);
+				setHover(i >= 0 && i < n ? i : -1);
+			}
+			function onLeave() { setHover(-1); }
+			let tip = null;
+			if (hover >= 0 && hover < n) {
+				const row = perDay(hover);
+				let total = 0;
+				for (const sg of row) total += sg.value;
+				const segRows = [];
+				for (let j = 0; j < row.length; j++) {
+					const sg = row[j];
+					if (sg.value <= 0) continue;
+					segRows.push(e("div", { key: j, className: "cost-tip-row" },
+						e("span", { className: "cost-tip-dot", style: { background: sg.color } }),
+						e("span", { className: "cost-tip-name" }, sg.name),
+						e("span", { className: "cost-tip-val" }, fmtValue(sg.value))));
+				}
+				const pct = (ml + hover * step + step / 2) / W * 100;
+				const flip = pct > 62;
+				tip = e("div", { className: "cost-tip", style: { left: pct + "%", transform: flip ? "translateX(calc(-100% - 8px))" : "translateX(8px)" } },
+					e("div", { className: "cost-tip-title" },
+						e("span", null, titles[hover] !== undefined ? titles[hover] : labels[hover]),
+						e("span", { className: "cost-tip-total" }, fmtValue(total))),
+					segRows);
+			}
+			return e("div", { className: "cost-chart-host", onMouseMove: onMove, onMouseLeave: onLeave },
+				e("svg", { viewBox: "0 0 " + W + " " + H, width: "100%", preserveAspectRatio: "xMidYMid meet" }, children),
+				tip);
+		}
+
+		function AreaChart(props) {
+			const labels = props.labels;
+			const titles = props.titles || props.labels;
+			const values = props.values;
+			const fmtY = props.fmtY;
+			const fmtValue = props.fmtValue || props.fmtY;
+			const valueLabel = props.valueLabel || "";
+			const gid = props.gid;
+			const [hover, setHover] = useState(-1);
+			const W = 640, H = 180, ml = 40, mr = 6, mt = 8, mb = 20;
+			const pw = W - ml - mr, ph = H - mt - mb;
+			const n = values.length;
+			let max = 0;
+			for (const v of values) if (v > max) max = v;
+			if (max <= 0) max = 1;
+			const stepX = n > 1 ? pw / (n - 1) : 0;
+			const children = [];
+			const ticks = [0, max / 2, max];
+			for (let ti = 0; ti < 3; ti++) {
+				const t = ticks[ti];
+				const y = mt + ph - (t / max) * ph;
+				children.push(e("line", { key: "g" + ti, x1: ml, y1: y, x2: W - mr, y2: y, strokeWidth: 1, style: { stroke: GRID } }));
+				children.push(e("text", { key: "t" + ti, x: ml - 5, y: y + 3, textAnchor: "end", fontSize: 10, style: { fill: INK2 } }, fmtY(t)));
+			}
+			const pts = [];
+			if (n > 0) {
+				for (let i = 0; i < n; i++) {
+					pts.push({ x: n > 1 ? ml + i * stepX : ml + pw / 2, y: mt + ph - (values[i] / max) * ph });
+				}
+				let line = "";
+				for (let i = 0; i < pts.length; i++) line += (i === 0 ? "M" : "L") + pts[i].x.toFixed(1) + " " + pts[i].y.toFixed(1);
+				const base = mt + ph;
+				const area = line + "L" + pts[pts.length - 1].x.toFixed(1) + " " + base + "L" + pts[0].x.toFixed(1) + " " + base + "Z";
+				children.push(e("defs", { key: "d" }, e("linearGradient", { id: gid, x1: 0, y1: 0, x2: 0, y2: 1 },
+					e("stop", { offset: "0%", style: { stopColor: BLUE, stopOpacity: 0.3 } }),
+					e("stop", { offset: "100%", style: { stopColor: BLUE, stopOpacity: 0.02 } }))));
+				children.push(e("path", { key: "a", d: area, style: { fill: "url(#" + gid + ")" } }));
+				children.push(e("path", { key: "l", d: line, fill: "none", strokeWidth: 1.5, style: { stroke: BLUE } }));
+				if (n === 1) children.push(e("circle", { key: "p0", cx: pts[0].x, cy: pts[0].y, r: 2.5, style: { fill: BLUE } }));
+				const stride = Math.max(1, Math.ceil(n / 6));
+				for (let i = 0; i < n; i++) {
+					if (i % stride === 0 || i === n - 1) {
+						children.push(e("text", { key: "x" + i, x: pts[i].x, y: H - 5, textAnchor: "middle", fontSize: 10, style: { fill: INK2 } }, labels[i]));
+					}
+				}
+			}
+			if (hover >= 0 && hover < n) {
+				const px = pts[hover].x, py = pts[hover].y;
+				children.push(e("line", { key: "hover", x1: px, y1: mt, x2: px, y2: mt + ph, strokeDasharray: "3 3", strokeWidth: 1, style: { stroke: INK2 } }));
+				children.push(e("circle", { key: "hoverdot", cx: px, cy: py, r: 3.5, strokeWidth: 2, style: { fill: BLUE, stroke: "var(--dsw-alias-bg-layer-1, #fff)" } }));
+			}
+			function onMove(ev) {
+				if (n <= 0) { setHover(-1); return; }
+				if (n === 1) { setHover(0); return; }
+				const rect = ev.currentTarget.getBoundingClientRect();
+				const vx = (ev.clientX - rect.left) / rect.width * W;
+				const i = Math.round((vx - ml) / stepX);
+				setHover(i >= 0 && i < n ? i : -1);
+			}
+			function onLeave() { setHover(-1); }
+			let tip = null;
+			if (hover >= 0 && hover < n) {
+				const pct = pts[hover].x / W * 100;
+				const flip = pct > 62;
+				tip = e("div", { className: "cost-tip", style: { left: pct + "%", transform: flip ? "translateX(calc(-100% - 8px))" : "translateX(8px)" } },
+					e("div", { className: "cost-tip-title" },
+						e("span", null, titles[hover] !== undefined ? titles[hover] : labels[hover])),
+					e("div", { className: "cost-tip-row" },
+						e("span", { className: "cost-tip-dot", style: { background: BLUE } }),
+						e("span", { className: "cost-tip-name" }, valueLabel),
+						e("span", { className: "cost-tip-val" }, fmtValue(values[hover]))));
+			}
+			return e("div", { className: "cost-chart-host", onMouseMove: onMove, onMouseLeave: onLeave },
+				e("svg", { viewBox: "0 0 " + W + " " + H, width: "100%", preserveAspectRatio: "xMidYMid meet" }, children),
+				tip);
+		}
+
+		function progressBar(label, used, limit, remaining, resetTime, now) {
+			const pct = limit > 0 ? Math.min(100, Math.round(used / limit * 100)) : 0;
+			const color = pct >= 90 ? RED : pct >= 70 ? AMBER : BLUE;
+			return e("div", { style: { marginTop: "10px" } },
+				e("div", { className: "cost-row" },
+					e("span", { className: "cost-hint" }, label),
+					e("span", { className: "cost-spacer" }),
+					e("span", { style: { fontVariantNumeric: "tabular-nums" } }, fmtInt(used) + " / " + fmtInt(limit) + " · " + pct + "%")),
+				e("div", { className: "cost-bar-track" },
+					e("div", { className: "cost-bar-fill", style: { width: Math.max(pct, used > 0 ? 1 : 0) + "%", background: color } })),
+				e("div", { className: "cost-hint", style: { marginTop: "4px" } }, "剩余 " + fmtInt(remaining) + (resetTime ? " · " + countdown(resetTime, now) : "")));
+		}
+
+		function statCard(title, value, sub) {
+			return e("div", { className: "cost-card" },
+				e("div", { className: "cost-card-title" }, title),
+				e("div", { className: "cost-card-value" }, value),
+				e("div", { className: "cost-card-sub" }, sub));
+		}
+
+		function filterRow(days, setDays, onExport, onRefresh, msg, busy, peakWindows) {
+			return e("div", { className: "cost-row" },
+				e("select", { className: "cost-select", value: String(days), onChange: ev => setDays(parseInt(ev.target.value, 10)) },
+					e("option", { value: "7" }, "近 7 天"),
+					e("option", { value: "14" }, "近 14 天"),
+					e("option", { value: "30" }, "近 30 天"),
+					e("option", { value: "0" }, "全部")),
+				e("button", { className: "cost-btn", onClick: onExport, disabled: busy }, "导出 CSV"),
+				e("button", { className: "cost-btn", onClick: onRefresh, disabled: busy }, busy ? "刷新中…" : "刷新"),
+				msg ? e("span", { className: "cost-hint" }, msg) : null,
+				e("span", { className: "cost-spacer" }),
+				e("span", { className: "cost-hint" }, "峰谷时段（北京时间）：" + peakWindows + " · 闲时半价"));
+		}
+
+		function statCards(dash, balance) {
+			const today = dash.today || { real: 0, calls: 0, tokens: 0, sub: 0, subCalls: 0, subTokens: 0 };
+			const month = dash.month || { real: 0, calls: 0, tokens: 0, sub: 0, subCalls: 0, subTokens: 0 };
+			const all = dash.all || { real: 0, calls: 0, tokens: 0, sub: 0, subCalls: 0, subTokens: 0 };
+			// 金额卡：主值为按量消费（不含订阅会员等效费用）；副行附注订阅等效
+			const moneySub = (t) => "调用 " + fmtInt(t.calls) + " 次 · Tokens " + fmtCompact(t.tokens) + (t.sub > 0 ? " · 订阅 ¥" + fmtMoney(t.sub) : "");
+			// 余额卡
+			let balValue = "—", balSub = "查询中…";
+			if (balance && balance.ok) {
+				balValue = "¥" + (balance.total || "0");
+				balSub = (balance.available ? "可用" : "不可用") + " · 充值 ¥" + (balance.toppedUp || "0") + " · 赠送 ¥" + (balance.granted || "0") + " · " + (balance.keySource || "");
+			} else if (balance && balance.error) {
+				balSub = balance.error;
+			}
+			return e("div", { className: "cost-cards" },
+				statCard("今日费用（CNY）", "¥" + fmtMoney(today.real), moneySub(today)),
+				statCard("本月费用（CNY）", "¥" + fmtMoney(month.real), moneySub(month)),
+				statCard("总花费（CNY）", "¥" + fmtMoney(all.real), "调用 " + fmtInt(all.calls) + " 次 · Tokens " + fmtCompact(all.tokens) + (all.sub > 0 ? " · 订阅 ¥" + fmtMoney(all.sub) : "")),
+				statCard("API 请求次数", fmtInt(all.calls + all.subCalls),
+					"按量 " + fmtInt(all.calls) + " · 订阅 " + fmtInt(all.subCalls)),
+				statCard("Tokens", fmtInt(all.tokens + all.subTokens),
+					"按量 " + fmtCompact(all.tokens) + " · 订阅 " + fmtCompact(all.subTokens)),
+				statCard("总余额（CNY）", balValue, balSub));
+		}
+
+		function mainPanel(dash, tab, setTab, scheme, setScheme) {
+			let chart = null;
+			let legend = [];
+			const labels = dash.byDay.map(d => d.label);
+			const titles = dash.byDay.map(d => d.date);
+			const fmtMoneyValue = (v) => "¥" + fmtMoney(v);
+			if (tab === "period") {
+				const segs = [{ name: "闲时", color: BLUE }, { name: "高峰", color: AMBER }, { name: "平峰", color: GRAY }];
+				const rows = dash.byDay.map(d => [d.off, d.peak, d.flat]);
+				chart = e(StackedBarsChart, { labels, titles, segs, rows, fmtY: fmtAxisMoney, fmtValue: fmtMoneyValue });
+				legend = segs;
+			} else {
+				// 模型按总消费降序排名（byModelDay 已按费用降序），全部展示、不合并、不循环：
+				// 第 1 名取色阶首色（最深，垫底），名次越靠后越浅；色相按所选方案漂移
+				const models = dash.byModelDay.filter(m => !m.subscription);
+				const sc = COLOR_SCHEMES[scheme] || COLOR_SCHEMES["orange-yellow"];
+				const segs = models.map((m, i) => ({ name: shortModel(m.model), color: schemeColor(i, sc) }));
+				const daySegs = dash.byDay.map((d, di) => {
+					const list = [];
+					for (let i = 0; i < models.length; i++) {
+						const c = models[i].days[di] ? models[i].days[di].cost : 0;
+						if (c > 0) list.push({ name: segs[i].name, color: segs[i].color, value: c });
+					}
+					return list;
+				});
+				chart = e(StackedBarsChart, { labels, titles, segs, daySegs, rows: [], fmtY: fmtAxisMoney, fmtValue: fmtMoneyValue });
+				legend = segs;
+			}
+			return e("div", { className: "cost-panel" },
+				e("div", { className: "cost-row" },
+					e("span", { className: "cost-panel-title" }, "消费金额（CNY）¥" + fmtMoney(dash.realCost)),
+					tab === "model" ? e("span", { style: { display: "inline-flex", alignItems: "center", gap: "4px", marginLeft: "10px" } },
+						Object.keys(COLOR_SCHEMES).map(k => e("button", {
+							key: k,
+							className: "cost-tab" + (scheme === k ? " cost-tab-on" : ""),
+							onClick: () => setScheme(k),
+							title: COLOR_SCHEMES[k].label,
+							style: { padding: "3px 4px" },
+						},
+							e("span", { style: { display: "block", width: "20px", height: "14px", borderRadius: "2px", background: schemeSwatch(k) } })))) : null,
+					e("span", { className: "cost-spacer" }),
+					e("span", { className: "cost-tabs" },
+						e("button", { className: "cost-tab" + (tab === "period" ? " cost-tab-on" : ""), onClick: () => setTab("period") }, "按峰谷"),
+						e("button", { className: "cost-tab" + (tab === "model" ? " cost-tab-on" : ""), onClick: () => setTab("model") }, "按模型"))),
+				e("div", { style: { marginTop: "10px" } }, chart),
+				legendRow(legend),
+				e("div", { className: "cost-hint", style: { marginTop: "6px" } }, "仅含按量计费模型；订阅制套餐不计入消费金额。"));
+		}
+
+		function subPanel(kimi, dash, now, onForce) {
+			const ok = kimi && kimi.ok;
+			const level = ok ? (MEMBERSHIP[kimi.membership] || kimi.membership || "未知等级") : "";
+			let body;
+			if (!kimi) {
+				body = e("div", { className: "cost-hint", style: { marginTop: "8px" } }, "配额查询中…");
+			} else if (!kimi.ok) {
+				body = e("div", { style: { marginTop: "8px" } },
+					e("div", { className: "cost-err" }, "配额查询不可用：" + (kimi.error || "未知错误")),
+					e("div", { className: "cost-hint", style: { marginTop: "4px" } }, "需要 Kimi Coding Plan 的 API Key（形如 sk-kimi-…，通常配置为 KIMI_CODING_API_KEY）。当前尝试的 Key：" + (kimi.keyEnv || "未知") + "（来源：" + (kimi.keySource || "无") + "）。"));
+			} else {
+				const bars = [progressBar("本周配额", kimi.weekly.used, kimi.weekly.limit, kimi.weekly.remaining, kimi.weekly.resetTime, now)];
+				const wins = kimi.windows || [];
+				for (let i = 0; i < wins.length; i++) {
+					const w = wins[i];
+					bars.push(e("div", { key: "w" + i }, progressBar(windowLabel(w), w.used, w.limit, w.remaining, w.resetTime, now)));
+				}
+				body = e("div", null, bars);
+			}
+			const stats = dash
+				? "累计请求 " + fmtInt(dash.subCalls) + " 次 · Tokens " + fmtInt(dash.subTokens) + " · 等效按量费用 ¥" + fmtMoney(dash.subEquivalent)
+				: "加载中…";
+			return e("div", { className: "cost-panel" },
+				e("div", { className: "cost-row" },
+					e("span", { className: "cost-panel-title" }, "订阅套餐用量 · Kimi Coding Plan"),
+					ok ? e("span", { className: "cost-badge" }, level) : null,
+					ok && kimi.parallel ? e("span", { className: "cost-badge" }, "并发上限 " + kimi.parallel) : null,
+					e("span", { className: "cost-spacer" }),
+					e("button", { className: "cost-btn", onClick: onForce }, "刷新配额")),
+				body,
+				e("div", { className: "cost-hint", style: { marginTop: "10px" } }, "订阅用量统计：" + stats + "（订阅已覆盖，等效费用仅供参考）"));
+		}
+
+		function kv(k, v) {
+			return e("span", { style: { marginRight: "18px" } },
+				e("span", { className: "cost-hint" }, k + "："),
+				e("span", { style: { fontWeight: 600 } }, v));
+		}
+
+		function balancePanel(balance, manualKey, setManualKey, onQuery) {
+			let body;
+			if (!balance) {
+				body = e("div", { className: "cost-hint" }, "查询中…");
+			} else if (!balance.ok) {
+				body = e("div", { className: "cost-err" }, "余额查询失败：" + (balance.error || "未知错误"));
+			} else {
+				body = e("div", { className: "cost-row", style: { gap: "4px" } },
+					kv("总余额", "¥" + balance.total),
+					kv("充值余额", "¥" + balance.toppedUp),
+					kv("赠送余额", "¥" + balance.granted),
+					kv("状态", balance.available ? "可用" : "不可用"),
+					e("span", { className: "cost-hint" }, "Key 来源：" + balance.keySource));
+			}
+			return e("div", { className: "cost-panel" },
+				e("div", { className: "cost-row" }, e("span", { className: "cost-panel-title" }, "账户余额 · DeepSeek")),
+				e("div", { style: { marginTop: "8px" } }, body),
+				e("div", { className: "cost-row", style: { marginTop: "10px" } },
+					e("input", { className: "cost-input", placeholder: "手动输入 DeepSeek API Key（sk-…）", value: manualKey, onChange: ev => setManualKey(ev.target.value) }),
+					e("button", { className: "cost-btn", onClick: () => onQuery(manualKey) }, "查询")));
+		}
+
+		function modelSections(dash) {
+			if (!dash.byModelDay || dash.byModelDay.length === 0) return null;
+			return dash.byModelDay.map((m, idx) => {
+				const badge = m.subscription ? "订阅制 · 金额为等效按量参考" : (m.estimated ? "按量计费 · 价格为估算" : "按量计费");
+				const labels = [];
+				const titles = [];
+				const calls = [];
+				const tokenRows = [];
+				for (const d of m.days) {
+					labels.push(d.label);
+					titles.push(d.date);
+					calls.push(d.calls);
+					tokenRows.push([d.input, d.cacheWrite, d.output, d.cacheRead]);
+				}
+				const gid = "cost-g-" + idx;
+				const tokenSegs = TOKEN_NAMES.map((name, i) => ({ name, color: TOKEN_COLORS[i] }));
+				return e("div", { className: "cost-panel", key: m.model },
+					e("div", { className: "cost-row" },
+						e("span", { className: "cost-panel-title" }, m.model),
+						e("span", { className: "cost-badge" }, badge)),
+					e("div", { className: "cost-grid2", style: { marginTop: "10px" } },
+						e("div", null,
+							e("div", { className: "cost-hint" }, "API 请求次数"),
+							e(AreaChart, { labels, titles, values: calls, fmtY: fmtTickInt, fmtValue: fmtInt, valueLabel: "请求次数", gid })),
+						e("div", null,
+							e("div", { className: "cost-hint" }, "Tokens"),
+							e(StackedBarsChart, { labels, titles, segs: tokenSegs, rows: tokenRows, fmtY: fmtCompact, fmtValue: fmtInt }),
+							legendRow(tokenSegs))));
+			});
+		}
+
+		function recentPanel(dash) {
+			const rows = [];
+			for (let i = 0; i < dash.recent.length; i++) {
+				const r = dash.recent[i];
+				rows.push(e("tr", { key: i },
+					e("td", null, r.time),
+					e("td", null, r.provider + "/" + r.model),
+					e("td", null, r.subscription ? e("span", { className: "cost-badge" }, "订阅") : periodText(r.period)),
+					e("td", null, fmtInt(r.input + r.cacheRead + r.cacheWrite) + " / " + fmtInt(r.output)),
+					e("td", null, "¥" + fmtMoney(r.cost))));
+			}
+			return e("div", { className: "cost-panel" },
+				e("div", { className: "cost-row" }, e("span", { className: "cost-panel-title" }, "最近记录")),
+				e("div", { style: { marginTop: "8px", overflowX: "auto" } },
+					e("table", { className: "cost-table" },
+						e("thead", null, e("tr", null,
+							e("th", null, "时间"), e("th", null, "模型"), e("th", null, "时段"), e("th", null, "入/出 Tokens"), e("th", null, "费用"))),
+						e("tbody", null, rows.length ? rows : e("tr", null, e("td", { colSpan: 5 }, e("span", { className: "cost-hint" }, "暂无记录")))))));
+		}
+
+		function UsageHeatmap(props) {
+			const data = props.data;
+			const days = Array.isArray(data.days) ? data.days : [];
+			const byDate = new Map();
+			for (const d of days) byDate.set(d.date, d);
+			const total = data.total || { tokens: 0, input: 0, cache: 0, output: 0, calls: 0, cost: 0 };
+			const [tip, setTip] = useState(null);
+			const hostRef = useRef(null);
+
+			// 与服务端 dayKey 同口径：一律按北京时间（UTC+8）生成 YYYY-MM-DD，
+			// 以「北京日序号」D = floor((ts+8h)/天) 表示，读 UTC 分量即为北京日期。
+			const DAY_MS = 86400000;
+			const pad2 = (n) => String(n).padStart(2, "0");
+			const keyOfDay = (D) => {
+				const d = new Date(D * DAY_MS);
+				return d.getUTCFullYear() + "-" + pad2(d.getUTCMonth() + 1) + "-" + pad2(d.getUTCDate());
+			};
+			const D0 = Math.floor((Date.now() + 28800000) / DAY_MS); // 今天的北京日序号
+			const todayDOW = new Date(D0 * DAY_MS).getUTCDay(); // 0=周日
+			const Dend = D0 + (6 - ((todayDOW + 6) % 7)); // 本周周日（北京）
+
+			const WEEKS = 26;
+			const columns = [];
+			const monthLabels = [];
+			let lastMonth = -1;
+			for (let w = WEEKS - 1; w >= 0; w -= 1) {
+				for (let i = 0; i < 7; i += 1) {
+					const Dcell = Dend - (w * 7 + (6 - i));
+					const key = keyOfDay(Dcell);
+					const day = byDate.get(key);
+					columns.push(day !== undefined ? { day, tokens: day.tokens } : { day: { date: key, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, calls: 0, cost: 0, tokens: 0 }, tokens: 0 });
+				}
+				const m = new Date((Dend - (w * 7 + 6)) * DAY_MS);
+				monthLabels.push(m.getUTCMonth() !== lastMonth ? String(m.getUTCMonth() + 1) + "月" : "");
+				lastMonth = m.getUTCMonth();
+			}
+			const todayKey = keyOfDay(D0);
+
+			let maxDay = 0;
+			for (const c of columns) if (c.tokens > maxDay) maxDay = c.tokens;
+			if (maxDay <= 0) maxDay = 1;
+			const levelOf = (tokens) => {
+				const ratio = tokens / maxDay;
+				return ratio < 0.25 ? 1 : ratio < 0.5 ? 2 : ratio < 0.75 ? 3 : 4;
+			};
+
+			function onCellEnter(ev, entry) {
+				const host = hostRef.current;
+				if (!host) return;
+				const hr = host.getBoundingClientRect();
+				const cr = ev.currentTarget.getBoundingClientRect();
+				const cellLeft = cr.left - hr.left;
+				const cellRight = cr.right - hr.left;
+				const cellCenter = cellLeft + cr.width / 2;
+				const top = cr.top - hr.top;
+				const hostWidth = hr.width;
+				setTip({ entry, cellLeft, cellRight, cellCenter, top, hostWidth });
+			}
+
+			const t = total;
+			const cells = columns.map((entry, i) => {
+				const day = entry.day;
+				const tokens = entry.tokens;
+				const cls = "cost-ug-cell" + (tokens > 0 ? " l" + levelOf(tokens) : "") + (day.date === todayKey ? " today" : "");
+				return e("div", {
+					key: i, className: cls,
+					onMouseEnter: (ev) => onCellEnter(ev, entry),
+					onMouseLeave: () => setTip(null),
+				});
+			});
+
+			let tipEl = null;
+			if (tip) {
+				const day = tip.entry.day;
+				const tokens = tip.entry.tokens;
+				const top = tip.top;
+				// 浮层自适应水平定位：默认以格中心居中；若靠近左/右边界则改为贴边对齐，避免被裁剪
+				const tipWidth = 170; // 估算浮层宽度（px）
+				let left = tip.cellCenter;
+				let transform = "translate(-50%, -100%)";
+				if (tip.cellCenter - tipWidth / 2 < 4) {
+					left = tip.cellLeft;
+					transform = "translate(0, -100%)";
+				} else if (tip.cellCenter + tipWidth / 2 > tip.hostWidth - 4) {
+					left = tip.cellRight;
+					transform = "translate(-100%, -100%)";
+				}
+				// 顶部格子：浮层上移后可能顶到容器顶边，改为贴底显示，避免被上边界裁掉
+				if (top < 60) {
+					transform = transform.replace(", -100%)", ", 8px)");
+				}
+				tipEl = e("div", {
+					className: "cost-ug-tip",
+					style: { left: left + "px", top: top + "px", transform: transform },
+				},
+					e("div", { className: "cost-ug-tip-total" }, day.date + " · " + fmtTokens(tokens) + " tokens" + (day.calls ? " · " + fmtInt(day.calls) + " 次调用" : "")),
+					e("div", { className: "cost-ug-tip-row" }, e("span", { className: "cost-ug-tip-name" }, "输入"), e("span", { className: "cost-ug-tip-val" }, fmtTokens(day.input))),
+					e("div", { className: "cost-ug-tip-row" }, e("span", { className: "cost-ug-tip-name" }, "缓存"), e("span", { className: "cost-ug-tip-val" }, fmtTokens((day.cacheRead || 0) + (day.cacheWrite || 0)))),
+					e("div", { className: "cost-ug-tip-row" }, e("span", { className: "cost-ug-tip-name" }, "输出"), e("span", { className: "cost-ug-tip-val" }, fmtTokens(day.output))),
+					e("div", { className: "cost-ug-tip-row" }, e("span", { className: "cost-ug-tip-name" }, "费用"), e("span", { className: "cost-ug-tip-val" }, "¥" + fmtMoney(day.cost))));
+			}
+
+			return e("div", { className: "cost-ug" },
+				e("div", { className: "cost-ug-total" },
+					"累计 " + fmtTokens(t.tokens) + " tokens · 输入 " + fmtTokens(t.input) + " · 缓存 " + fmtTokens(t.cache) + " · 输出 " + fmtTokens(t.output) + " · " + fmtInt(t.calls) + " 次调用"),
+				e("div", { className: "cost-ug-host", ref: hostRef },
+					e("div", { className: "cost-ug-grid", style: { gridTemplateColumns: "repeat(" + WEEKS + ", 1fr)" } }, cells),
+					tipEl),
+				e("div", { className: "cost-ug-months", style: { gridTemplateColumns: "repeat(" + WEEKS + ", 1fr)" } },
+					monthLabels.map((m, i) => e("span", { key: "m" + i, className: "cost-ug-month" }, m))));
+		}
+
+		// ---------- 峰谷计价提示 ----------
+		// 相位助记（与 dsh-cost-meter 一致）：weekend → 「周末全谷」；inPeak → 「峰时」；否则「平价」。
+		function peakWord(p) {
+			if (!p) return "";
+			if (p.weekend) return "周末全谷";
+			return p.inPeak ? "峰时" : "平价";
+		}
+		function peakWordClass(p) {
+			if (!p) return "";
+			return p.weekend ? " weekend" : p.inPeak ? " peak" : " off";
+		}
+		// 倒计时文本：向上取整到分钟。与 dsh-cost-meter 一致：{time}后进入高峰/平价。
+		function peakCountdown(p, now) {
+			if (!p) return "";
+			return peakCountdownTime(p, now) + "后进入" + (p.nextIntoPeak ? "高峰" : "平价");
+		}
+		// 仅倒计时（分钟粒度的时长文本），用于弹窗正文「约 X 后…」。
+		function peakCountdownTime(p, now) {
+			if (!p) return "";
+			const ms = Math.max(0, p.nextAtMs - now);
+			const totalMin = Math.max(1, Math.ceil(ms / 60000));
+			const h = Math.floor(totalMin / 60);
+			const m = totalMin % 60;
+			return h > 0 ? (m > 0 ? h + "小时" + m + "分" : h + "小时") : m + "分";
+		}
+		// 当前相位在轨道上的标记位置：峰=25%、平价=75%；周末中点=50%。
+		function peakMarkerLeft(p) {
+			if (!p) return "50%";
+			if (p.weekend) return "50%";
+			return p.inPeak ? "25%" : "75%";
+		}
+		// 24h 环形表盘（classic 改造）：中空圆环。底环蓝=平价铺满 24h，高峰窗口叠加橙色弧段，
+		// 指针随当前时刻旋转，圆心显示相位 + 倒计时。窗口缺口数据来自后端 peakHours，与 isPeak/peakPhaseAt 同口径。
+		function peakBeijingMinute(now) {
+			const d = new Date((Number.isFinite(now) ? now : Date.now()) + 28800000);
+			return d.getUTCHours() * 60 + d.getUTCMinutes();
+		}
+		function PeakDial(props) {
+			const p = props.phase;
+			if (!p) return null;
+			const now = props.now || Date.now();
+			const windows = props.windows && props.windows.length ? props.windows : [{ start: 9, end: 12 }, { start: 14, end: 18 }];
+			const size = props.size || 150;
+			const showTimeLabels = props.showTimeLabels !== false;
+			const CX = 90, CY = 90, R = 62, SW = 18; // viewBox 180
+			const peakC = "#ff9800", offC = "#4176e6", weekC = "#34a853";
+			const dim = "#9ca3af";
+			const deg = (h) => h * 15; // 0:00 = 顶部，顺时针；6:00 右 · 12:00 底 · 18:00 左
+			const polar = (d, r) => [CX + r * Math.sin(d * Math.PI / 180), CY - r * Math.cos(d * Math.PI / 180)];
+			const children = [
+				// 平价底环（蓝）
+				e("circle", { cx: CX, cy: CY, r: R, fill: "none", stroke: offC, "stroke-width": SW }),
+			];
+			// 高峰弧（橙）；周末则不画任何峰时弧段
+			if (!p.weekend) {
+				for (const w of windows) {
+					const a = deg(w.start), b = deg(w.end);
+					const s = polar(a, R), e2 = polar(b, R);
+					const large = ((b - a) % 360) > 180 ? 1 : 0;
+					children.push(e("path", { d: "M " + s[0] + " " + s[1] + " A " + R + " " + R + " 0 " + large + " 1 " + e2[0] + " " + e2[1], fill: "none", stroke: peakC, "stroke-width": SW }));
+				}
+			}
+			// 时间刻度（每 3h 一个标签，随缩放等比；可由「显示时间」开关控制）
+			if (showTimeLabels) {
+				for (let h = 0; h < 24; h += 3) {
+					const pt = polar(deg(h), R + SW / 2 + 13);
+					children.push(e("text", { x: pt[0], y: pt[1], "text-anchor": "middle", "dominant-baseline": "middle", "font-size": "8.5", fill: dim }, (h < 10 ? "0" : "") + h + ":00"));
+				}
+			}
+			// 当前相位颜色（峰橙 / 平蓝 / 周末绿）—— 同时用于标记点与圆心文案
+			const color = p.weekend ? weekC : p.inPeak ? peakC : offC;
+			const word = p.weekend ? "周末全谷" : p.inPeak ? "高峰时段" : "平价时段";
+			// 当前时刻标记：相位色点（环上，随相位变色 + 白色描边）
+			const m = peakBeijingMinute(now);
+			const tip = polar(m / 1440 * 360, R);
+			children.push(e("circle", { cx: tip[0], cy: tip[1], r: "7", fill: color, stroke: "#fff", "stroke-width": "2.5" }));
+			// 圆心：当前相位 + 倒计时
+			children.push(e("text", { x: CX, y: CY - 4, "text-anchor": "middle", "dominant-baseline": "middle", "font-size": "12", "font-weight": "700", fill: color }, word));
+			children.push(e("text", { x: CX, y: CY + 12, "text-anchor": "middle", "dominant-baseline": "middle", "font-size": "8.5", fill: dim }, peakCountdown(p, now)));
+			return e("svg", { viewBox: "0 0 180 180", width: size, height: size, role: "img", style: { overflow: "visible" } }, ...children);
+		}
+		// 单行时段条：两段轨道（橙+蓝）+ 标记线 + 着色 chip。对标 dsh-cost-meter 简洁款。
+		function PeakStrip(props) {
+			const snap = props.snap;
+			const style = props.style || "compact";
+			const wide = props.wide !== false;
+			if (!snap || !snap.phase || snap.notice === false) return null;
+			const p = snap.phase;
+			const now = props.now || Date.now();
+			const countdown = peakCountdown(p, now);
+			const wordClass = peakWordClass(p);
+			if (!wide) {
+				// 窄栏（rail）：竖排短词
+				return e("div", { className: "cost-ps-rail" + wordClass, title: peakWord(p) + " · " + countdown },
+					e("span", { className: "cost-ps-word" }, peakWord(p)));
+			}
+			if (style === "classic") {
+				// 环形表盘（classic 改造）：24h 中空圆环 + 圆心相位/倒计时
+				return e("div", { className: "cost-ps cost-ps-ring" + wordClass, title: countdown },
+					e(PeakDial, { phase: p, windows: snap.peakHours, now: now, size: props.ringSize || 150, showTimeLabels: !snap.config || snap.config.peakShowTickLabels !== false }),
+					e("div", { className: "cost-ps-ringfoot" },
+						e("span", { className: "cost-ps-chip" }, peakWord(p) + " · " + countdown)));
+			}
+			// compact：单行「24h 比例轨道（橙=高峰/蓝=平价）+ 白色实时进度线 + chip·倒计时」
+			const win = snap.peakHours && snap.peakHours.length ? snap.peakHours : [{ start: 9, end: 12 }, { start: 14, end: 18 }];
+			const segs = [
+				// 平价底（蓝）铺满 24h
+				e("div", { className: "cost-ps-seg cost-ps-offseg", style: { left: "0%", width: "100%" } }),
+			];
+			// 高峰段（橙）按窗口在 24h 中的比例定位
+			if (!p.weekend) {
+				for (const w of win) {
+					segs.push(e("div", { className: "cost-ps-seg cost-ps-peakseg", style: { left: (w.start / 24 * 100) + "%", width: ((w.end - w.start) / 24 * 100) + "%" } }));
+				}
+			}
+			// 白色分割线：实时进度（北京时间当日占比）
+			segs.push(e("div", { className: "cost-ps-marker", style: { left: (peakBeijingMinute(now) / 1440 * 100) + "%" } }));
+			const track = e("div", { className: "cost-ps-track" }, segs);
+			const chip = e("span", { className: "cost-ps-chip" }, peakWord(p) + " · " + countdown);
+			const cfg = snap.config || {};
+			// 双行紧凑：勾选后由左右单行改为上下布局，可选「条上文下」或「文上条下」
+			if (cfg.peakCompactStack === true) {
+				const kids = cfg.peakCompactOrder === "text-first" ? [chip, track] : [track, chip];
+				return e("div", { className: "cost-ps cost-ps-stack" + wordClass, title: countdown }, kids[0], kids[1]);
+			}
+			return e("div", { className: "cost-ps" + wordClass, title: countdown }, track, chip);
+		}
+
+		// ---------- 峰谷切换前弹窗（真实 + 预览） ----------
+		// 常驻挂在 sidebar.footer.action；用 nextAtMs 作为唯一提醒点，同一切换点只提醒一次。
+		const PEAK_PREVIEW_EVENT = "dsh-cost-tracker-peak-preview";
+		let lastPeakNotifyAtMs = 0;
+		function PeakAlertPopup(props) {
+			const snap = props.snap;
+			const now = props.now || Date.now();
+			const onDismiss = props.onDismiss || (() => {});
+			if (!snap) return null;
+			const cfg = snap.config || {};
+			const alert = snap.alert || {};
+			// 定位/外观统一由宿主 snap 决定；可被预览配置覆盖。
+			const intoPeak = props.preview
+				? props.preview === "peak"
+				: (snap.phase ? snap.phase.nextIntoPeak === true : false);
+			const position = props.position || (alert.position === "center" ? "cost-pa-center" : "cost-pa-corner");
+			const title = intoPeak ? "即将进入峰时" : "即将进入谷时";
+			const body = "约 " + (props.countdownText || (snap.phase ? peakCountdownTime(snap.phase, now) : "2 分")) + " 后计费档位切换为" + (intoPeak ? "峰时" : "谷时") + "价，请注意本时段调用成本。";
+			const badge = intoPeak ? "峰价提醒" : "谷价提醒";
+			return e("div", { className: "cost-pa " + position + " " + (intoPeak ? "cost-pa-peak" : "cost-pa-offpeak"), role: "alert" },
+				e("div", { className: "cost-pa-badge" }, badge),
+				e("div", { className: "cost-pa-title" }, title),
+				e("div", { className: "cost-pa-body" }, body),
+				e("div", { className: "cost-pa-actions" },
+					e("button", { className: "cost-btn", onClick: onDismiss }, "知道了")));
+		}
+
+		// 侧边栏峰谷组件：时段条 + 切换前弹窗宿主（常驻，无需活跃会话）。
+		function PeakSidebar(props) {
+			const wide = props && props.wide !== false;
+			const [snap, setSnap] = useState(null);
+			const [now, setNow] = useState(Date.now());
+			const [dismissedAt, setDismissedAt] = useState(null);
+			const [preview, setPreview] = useState(null);
+			useEffect(() => {
+				let alive = true;
+				function load() {
+					apiCall("peak", {}).then(v => { if (alive && v && v.ok) setSnap(v); }).catch(() => {});
+				}
+				load();
+				const id = setInterval(load, 30000);
+				return () => { alive = false; clearInterval(id); };
+			}, []);
+			useEffect(() => {
+				const id = setInterval(() => setNow(Date.now()), 10000);
+				return () => clearInterval(id);
+			}, []);
+			// 预览通道（设置面板触发）
+			useEffect(() => {
+				const onPreview = (event) => {
+					const kind = event.detail && event.detail.kind === "offpeak" ? "offpeak" : "peak";
+					setPreview(kind);
+					// 预览系统通知
+					const cfg = snap && snap.config;
+					if (cfg && cfg.peakAlertWebNotify === true && window.Notification && Notification.permission === "granted") {
+						try {
+							new Notification((kind === "peak" ? "即将进入峰时" : "即将进入谷时") + "（预览）",
+								{ body: "约 2 分 后计费档位切换为" + (kind === "peak" ? "峰时" : "谷时") + "价。" });
+						} catch (_) {}
+					}
+				};
+				window.addEventListener(PEAK_PREVIEW_EVENT, onPreview);
+				return () => window.removeEventListener(PEAK_PREVIEW_EVENT, onPreview);
+			}, [snap]);
+			// 真实弹窗判定：提醒开启 + 峰谷启用生效 + 距下次切换 <= ahead + 类型匹配 + 未关闭过该切换点
+			let real = null;
+			if (snap && snap.enabled && snap.effective && snap.alert && snap.alert.enabled && snap.phase) {
+				const aheadMs = (Number.isFinite(snap.alert.ahead) && snap.alert.ahead >= 1 ? snap.alert.ahead : 2) * 60000;
+				const tgt = snap.alert.target || "both";
+				const intoPeak = snap.phase.nextIntoPeak === true;
+				if ((tgt === "both" || tgt === (intoPeak ? "peak" : "offpeak"))
+					&& now >= snap.phase.nextAtMs - aheadMs && now < snap.phase.nextAtMs && dismissedAt !== snap.phase.nextAtMs) real = snap.phase;
+			}
+			// 系统通知（Web）：与弹窗同判定，用 nextAtMs 去重
+			useEffect(() => {
+				if (!snap || !snap.enabled || !snap.effective) return;
+				const alert = snap.alert || {};
+				if (alert.enabled !== true || alert.webNotify !== true || !window.Notification || Notification.permission !== "granted") return;
+				if (!snap.phase) return;
+				const aheadMs = (Number.isFinite(alert.ahead) && alert.ahead >= 1 ? alert.ahead : 2) * 60000;
+				const intoPeak = snap.phase.nextIntoPeak === true;
+				const tgt = alert.target || "both";
+				if (now < snap.phase.nextAtMs - aheadMs || now >= snap.phase.nextAtMs) return;
+				if ((tgt !== "both" && tgt !== (intoPeak ? "peak" : "offpeak"))) return;
+				if (lastPeakNotifyAtMs === snap.phase.nextAtMs) return;
+				lastPeakNotifyAtMs = snap.phase.nextAtMs;
+				try {
+					new Notification(intoPeak ? "即将进入峰时" : "即将进入谷时",
+						{ body: peakCountdownTime(snap.phase, now) + " 后计费档位切换为" + (intoPeak ? "峰时" : "谷时") + "价。" });
+				} catch (_) {}
+			}, [now, snap]);
+			let popup = null;
+			if (real !== null) {
+				popup = e(PeakAlertPopup, { snap, now, onDismiss: () => setDismissedAt(real.nextAtMs) });
+			} else if (preview !== null) {
+				// 预览跟随用户配置的弹窗位置（右下角 / 屏幕中心），不强制覆盖
+				popup = e(PeakAlertPopup, { snap, preview, now: now + 120000, countdownText: "2 分", onDismiss: () => setPreview(null) });
+			}
+			return e("div", null,
+				e(PeakStrip, { snap, style: snap ? snap.style : "compact", wide, now, ringSize: 112 }),
+				popup);
+		}
+
+		// 设置面板：峰谷计价与提示
+		function PeakPanel(props) {
+			const [snap, setSnap] = useState(null);
+			const [draft, setDraft] = useState(null);
+			const [now, setNow] = useState(Date.now());
+			const [savedMsg, setSavedMsg] = useState("");
+			function load() {
+				apiCall("peak", {}).then(v => {
+					if (v && v.ok) {
+						setSnap(v);
+						setDraft(Object.assign({}, v.config || {}));
+					}
+				}).catch(() => {});
+			}
+			useEffect(() => { load(); }, []);
+			useEffect(() => {
+				const id = setInterval(() => setNow(Date.now()), 30000);
+				return () => clearInterval(id);
+			}, []);
+			function setField(k, v) {
+				setDraft(d => Object.assign({}, d, { [k]: v }));
+			}
+			function save() {
+				apiCall("peak-config", draft || {}).then(v => {
+					if (v && typeof v === 'object') {
+						setSnap(s => Object.assign({}, s, { config: v, enabled: v.peakEnabled, notice: v.peakNotice, style: v.peakStyle, alert: { enabled: v.peakAlertEnabled, ahead: v.peakAlertAhead, target: v.peakAlertTarget, position: v.peakAlertPosition, webNotify: v.peakAlertWebNotify } }));
+						setDraft(Object.assign({}, v));
+						setSavedMsg("已保存");
+						setTimeout(() => setSavedMsg(""), 2000);
+					}
+				}).catch(() => setSavedMsg("保存失败"));
+			}
+			function preview(kind) {
+				window.dispatchEvent(new CustomEvent(PEAK_PREVIEW_EVENT, { detail: { kind } }));
+			}
+			const d = draft || {};
+			const cfgSnap = snap ? Object.assign({}, snap, { config: d }) : null;
+			const noticeOn = snap && snap.notice !== false && d.peakNotice !== false;
+			return e("div", { className: "cost-panel" },
+				e("div", { className: "cost-row" },
+					e("span", { className: "cost-panel-title" }, "峰谷计价与提示"),
+					e("span", { className: "cost-spacer" }),
+					e("button", { className: "cost-btn", onClick: save, disabled: !draft }, "保存设置")),
+				e("div", { style: { marginTop: "8px", display: "grid", gap: "6px" } },
+					e("label", { className: "cost-row", style: { gap: "8px" } },
+						e("input", { type: "checkbox", checked: d.peakEnabled !== false, onChange: ev => setField("peakEnabled", ev.target.checked) }),
+						e("span", null, "启用 DeepSeek 峰谷时段价格")),
+					e("label", { className: "cost-row", style: { gap: "8px" } },
+						e("input", { type: "checkbox", checked: d.peakNotice !== false, onChange: ev => setField("peakNotice", ev.target.checked) }),
+						e("span", null, "峰时高价时段显著提示（时段条显示）")),
+					e("div", { className: "cost-row", style: { gap: "8px" } },
+						e("span", null, "时段条样式"),
+						e("select", { className: "cost-select", value: d.peakStyle === "classic" ? "classic" : "compact", onChange: ev => setField("peakStyle", ev.target.value) },
+							e("option", { value: "compact" }, "简洁（单行紧凑）"),
+							e("option", { value: "classic" }, "环形表盘（24h）"))),
+					d.peakStyle === "classic" ? e("label", { className: "cost-row", style: { gap: "8px" } },
+						e("input", { type: "checkbox", checked: d.peakShowTickLabels !== false, onChange: ev => setField("peakShowTickLabels", ev.target.checked) }),
+						e("span", null, "显示时间（00:00–21:00 刻度）"))
+						: e("label", { className: "cost-row", style: { gap: "8px" } },
+							e("input", { type: "checkbox", checked: d.peakCompactStack === true, onChange: ev => setField("peakCompactStack", ev.target.checked) }),
+							e("span", null, "双行紧凑（上下布局）"),
+							d.peakCompactStack === true ? e("select", { className: "cost-select", value: d.peakCompactOrder === "text-first" ? "text-first" : "bar-first", onChange: ev => setField("peakCompactOrder", ev.target.value) },
+								e("option", { value: "bar-first" }, "时段条在上·文字在下"),
+								e("option", { value: "text-first" }, "文字在上·时段条在下"))
+								: null),
+					e("label", { className: "cost-row", style: { gap: "8px" } },
+						e("input", { type: "checkbox", checked: d.peakAlertEnabled !== false, onChange: ev => setField("peakAlertEnabled", ev.target.checked) }),
+						e("span", null, "峰/谷切换前弹窗提醒")),
+					d.peakAlertEnabled !== false ? e("div", { className: "cost-row", style: { gap: "8px" } },
+						e("span", null, "提前提醒（分钟，1-30）"),
+						e("input", { className: "cost-input", style: { width: "80px" }, type: "number", min: 1, max: 30, value: String(d.peakAlertAhead == null ? 2 : d.peakAlertAhead), onChange: ev => { const n = parseInt(ev.target.value, 10); if (Number.isInteger(n) && n >= 1 && n <= 30) setField("peakAlertAhead", n); } }),
+						e("span", null, "提醒类型"),
+						e("select", { className: "cost-select", value: d.peakAlertTarget === "peak" || d.peakAlertTarget === "offpeak" ? d.peakAlertTarget : "both", onChange: ev => setField("peakAlertTarget", ev.target.value) },
+							e("option", { value: "both" }, "峰和谷"),
+							e("option", { value: "peak" }, "进入峰时"),
+							e("option", { value: "offpeak" }, "进入谷时")),
+						e("span", null, "弹窗位置"),
+						e("select", { className: "cost-select", value: d.peakAlertPosition === "center" ? "center" : "corner", onChange: ev => setField("peakAlertPosition", ev.target.value) },
+							e("option", { value: "corner" }, "右下角"),
+							e("option", { value: "center" }, "屏幕中心")))
+						: null,
+					e("label", { className: "cost-row", style: { gap: "8px" } },
+						e("input", { type: "checkbox", checked: d.peakAlertWebNotify === true, onChange: ev => setField("peakAlertWebNotify", ev.target.checked) }),
+						e("span", null, "同步发送系统通知（需授权通知权限）")),
+					e("div", { className: "cost-row", style: { gap: "8px", marginTop: "4px" } },
+						e("span", null, "预览弹窗"),
+						e("button", { className: "cost-btn", onClick: () => preview("peak") }, "预览进入峰"),
+						e("button", { className: "cost-btn", onClick: () => preview("offpeak") }, "预览进入谷"),
+						savedMsg ? e("span", { className: "cost-hint" }, savedMsg) : null),
+					e("div", { className: "cost-hint", style: { marginTop: "6px" } },
+						"峰时段（北京时间）：" + (snap ? snap.peakWindows : "周一至周五 9:00-12:00 · 14:00-18:00（周末全天闲时）") + "。生效时间：" + (snap ? snap.effectiveAt : "2026-08-01T00:00:00Z") + "。当前：" + (cfgSnap && cfgSnap.phase ? (cfgSnap.phase.weekend ? "周末全谷价" : cfgSnap.phase.inPeak ? "高峰时段" : "平价时段") : "…"))),
+				noticeOn ? e("div", { style: { marginTop: "8px" } }, e(PeakStrip, { snap: cfgSnap, style: d.peakStyle || "compact", wide: true, now, ringSize: 150 }))
+					: e("p", { className: "cost-hint", style: { marginTop: "8px" } }, "提示已隐藏：需启用峰谷计价并开启「峰时高价时段显著提示」。"));
+		}
+
+		function Dashboard() {
+			const [days, setDays] = useState(7);
+			const [dash, setDash] = useState(null);
+			const [dashErr, setDashErr] = useState("");
+			const [kimi, setKimi] = useState(null);
+			const [balance, setBalance] = useState(null);
+			const [tab, setTab] = useState("period");
+			const [scheme, setSchemeState] = useState(() => {
+				try { return localStorage.getItem("dsh-cost-tracker-scheme") || "orange-yellow" } catch (e) { return "orange-yellow" }
+			});
+			function setScheme(k) {
+				setSchemeState(k);
+				try { localStorage.setItem("dsh-cost-tracker-scheme", k) } catch (e) {}
+			}
+			const [msg, setMsg] = useState("");
+			const [busy, setBusy] = useState(false);
+			const [now, setNow] = useState(Date.now());
+			const [manualKey, setManualKey] = useState("");
+			const [usage, setUsage] = useState(null);
+			const [usageErr, setUsageErr] = useState("");
+
+			function loadDash(d) {
+				apiCall("dashboard", { days: d }).then(v => {
+					if (v && v.ok) { setDash(v); setDashErr(""); }
+					else setDashErr(v && v.error ? String(v.error) : "数据加载失败");
+				}).catch(err => setDashErr(String(err && err.message ? err.message : err)));
+			}
+			function loadKimi(force) {
+				apiCall("kimi-usage", { force: !!force }).then(v => setKimi(v)).catch(() => {});
+			}
+			function loadUsage() {
+				apiCall("usage", {}).then(v => {
+					if (v && v.ok) { setUsage(v); setUsageErr(""); }
+					else setUsageErr(v && v.error ? String(v.error) : "数据加载失败");
+				}).catch(err => setUsageErr(String(err && err.message ? err.message : err)));
+			}
+			function loadBalance(key) {
+				apiCall("balance", key ? { apiKey: key } : {}).then(v => setBalance(v)).catch(() => {});
+			}
+			function onExport() {
+				setBusy(true); setMsg("导出中…");
+				apiCall("export", {}).then(v => {
+					setBusy(false);
+					setMsg(v && v.ok ? "已导出 " + v.count + " 条到 " + v.path : "导出失败：" + (v && v.error ? v.error : "未知错误"));
+				}).catch(err => { setBusy(false); setMsg("导出失败：" + String(err && err.message ? err.message : err)); });
+			}
+			function onRefresh() {
+				setBusy(true);
+				apiCall("dashboard", { days }).then(v => { if (v && v.ok) setDash(v); }).catch(() => {});
+				apiCall("usage", {}).then(v => {
+					if (v && v.ok) { setUsage(v); setUsageErr(""); }
+					else setUsageErr(v && v.error ? String(v.error) : "数据加载失败");
+				}).catch(err => setUsageErr(String(err && err.message ? err.message : err)));
+				apiCall("kimi-usage", { force: false }).then(v => setKimi(v)).catch(() => {});
+				apiCall("balance", {}).then(v => { setBalance(v); setBusy(false); }).catch(() => setBusy(false));
+			}
+
+			useEffect(() => { loadDash(days); }, [days]);
+			useEffect(() => { loadKimi(false); loadBalance(""); loadUsage(); }, []);
+			useEffect(() => {
+				const id = setInterval(() => setNow(Date.now()), 30000);
+				return () => clearInterval(id);
+			}, []);
+
+			return e("div", { className: "cost-wrap" },
+				e("div", { className: "cost-h1" }, pluginIcon(18), "花费统计"),
+				filterRow(days, setDays, onExport, onRefresh, msg, busy, dash ? dash.peakWindows : "周一至周五 9:00-12:00 · 14:00-18:00（周末全天闲时）"),
+				dashErr ? e("div", { className: "cost-err", style: { marginTop: "8px" } }, dashErr) : null,
+				!dash && !dashErr ? e("div", { className: "cost-hint", style: { marginTop: "12px" } }, "加载中…") : null,
+				dash ? statCards(dash, balance) : null,
+				dash ? mainPanel(dash, tab, setTab, scheme, setScheme) : null,
+				e("div", { className: "cost-panel" },
+					e("div", { className: "cost-row" }, e("span", { className: "cost-panel-title" }, "Token 用量统计")),
+					e("div", { style: { marginTop: "8px" } },
+						usage ? e(UsageHeatmap, { data: usage })
+							: usageErr ? e("div", { className: "cost-err" }, "加载失败：" + usageErr)
+							: e("div", { className: "cost-hint" }, "加载中…"))),
+				subPanel(kimi, dash, now, () => loadKimi(true)),
+				balancePanel(balance, manualKey, setManualKey, k => loadBalance(k)),
+				dash ? modelSections(dash) : null,
+				dash ? recentPanel(dash) : null,
+				e(PeakPanel, {}));
+		}
+
+		function StatusLine(props) {
+			const sessionId = props && props.sessionId ? String(props.sessionId) : "";
+			const [s, setS] = useState(null);
+			const [expanded, setExpanded] = useState(false);
+			useEffect(() => {
+				let alive = true;
+				function load() {
+					apiCall("summary", { sessionId }).then(v => { if (alive) setS(v); }).catch(() => {});
+				}
+				load();
+				const id = setInterval(load, 30000);
+				return () => { alive = false; clearInterval(id); };
+			}, [sessionId]);
+			if (!s) return null;
+			// 按会话实际内容决定显示（而不是按当前选中的模型）：
+			//  - realModels 按量模型 / subModels 订阅模型（分开）
+			//  - 订阅只用一个着色徽标展示套餐名 + 总等效费用，订阅模型不再单独进模型区（避免重复）
+			// 布局：胶囊分段（主胶囊 / 订阅胶囊 / 模型胶囊），用细竖线分隔，悬停或点击展开模型。
+			const realModels = Array.isArray(s.sessionRealModels) ? s.sessionRealModels : [];
+			const subModels = Array.isArray(s.sessionSubModels) ? s.sessionSubModels : [];
+			const hasReal = realModels.length > 0 || s.sessionCost > 0;
+			const hasSub = subModels.length > 0 || s.sessionSub > 0;
+			const chip = (m, i) => e("span", { key: "r" + i, className: "cost-chip", title: m.model },
+				shortModel(m.model) + " ¥" + fmtMoney(m.cost));
+			// 主胶囊：标明「本会话」+ 本会话花费（不需要累计）
+			const costPill = e("span", { className: "cost-pill" },
+				e("span", { className: "cost-hint" }, "本会话"),
+				e("span", { className: "cost-dock-main" }, "¥" + fmtMoney(s.sessionCost)));
+			// 订阅徽标（单个着色胶囊，不再把订阅模型放进模型区）
+			let subPill = null;
+			if (hasSub) {
+				const plan = subPlanName(subModels.length ? subModels[0].provider : s.provider);
+				subPill = e("span", { className: "cost-badge cost-pill-sub-badge" }, plan + " · ¥" + fmtMoney(s.sessionSub));
+			}
+			// 模型胶囊：默认 top2 汇总，点击展开全部（仅按量模型）
+			let modelPill = null;
+			const modelCount = realModels.length;
+			if (realModels.length > 0) {
+				const topN = realModels.slice(0, 2);
+				const extraReal = realModels.length - 2;
+				const toggle = e("button", {
+					className: "cost-model-toggle",
+					onClick: () => setExpanded(!expanded),
+					title: expanded ? "收起模型明细" : "展开模型明细",
+					"aria-expanded": expanded,
+				}, expanded ? "▾" : "▸");
+				const modelLabel = e("span", { className: "cost-hint" }, "模型 ×" + modelCount + " ");
+				if (expanded) {
+					modelPill = e("span", { className: "cost-pill" }, modelLabel,
+						realModels.map((m, i) => chip(m, i)), toggle);
+				} else {
+					const topChips = topN.map((m, i) => chip(m, i));
+					const more = extraReal > 0 ? e("span", { className: "cost-hint" }, "+" + extraReal) : null;
+					modelPill = e("span", { className: "cost-pill" }, modelLabel, topChips, more, toggle);
+				}
+			}
+			// 分段组装：主胶囊 | 订阅胶囊 | 模型胶囊（细竖线分隔，换行时自动分段）
+			const segs = [];
+			segs.push(costPill);
+			if (subPill) segs.push(subPill);
+			if (modelPill) segs.push(modelPill);
+			return e("div", { className: "cost-dock" }, segs.map((seg, i) => e("span", { key: "seg" + i, className: "cost-seg" }, seg)));
+		}
+
+		const inject = ["slots"];
+		function apply(ctx) {
+			applyStyles(ctx);
+			const slots = ctx.get("slots");
+			if (slots === undefined) return;
+			slots.inject("settings.section", () => slots.register(
+				{ name: "settings.section", id: "cost-dashboard", order: 30, label: "花费统计" },
+				() => e(Dashboard, {}),
+			));
+			slots.inject("conversation.composer.dock", () => slots.register(
+				{ name: "conversation.composer.dock", id: "cost", order: 1 },
+				(props) => e(StatusLine, props || {}),
+			));
+			// 侧边栏底部峰谷时段条 + 切换前弹窗（常驻，无需活跃会话；wide=false 为窄栏态）
+			slots.inject("sidebar.footer.action", () => slots.register(
+				{ name: "sidebar.footer.action", id: "cost-peak", order: 8 },
+				(props) => e(PeakSidebar, props || {}),
+			));
+		}
+
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});