openclacky 1.3.1 → 1.3.3

data/lib/clacky/web/{billing.js → features/billing/view.js}

@@ -1,114 +1,45 @@
-// billing.js — Billing panel logic
-// Handles displaying billing summary, daily breakdown, and usage statistics.
-
-const Billing = (() => {
-  let _summary = null;
-  let _daily = [];
-  let _sessions = []; // 会话列表
-  let _allModels = []; // 保存完整的模型列表
-  let _currentPeriod = "day";
-  let _currentModel = "all";
+// ── Billing · view — dashboard rendering, charts, tooltips, DOM wiring ─────
+//
+// Owns every render function (stats, heatmap, trend, breakdowns, sessions),
+// tooltip binding, and the clear-data popup. Reads through BillingStore.state
+// and currency helpers; period / model / clear / share go through store actions.
+//
+// Augments the `Billing` facade with onPanelShow.
+//
+// Depends on: BillingStore, I18n, Share (optional).
+// ───────────────────────────────────────────────────────────────────────────
+
+const BillingView = (() => {
   let _clearPopupVisible = false;
 
-  // ── Currency Settings ─────────────────────────────────────────────────────
-  const CURRENCY_STORAGE_KEY = "clacky-currency";
-  const EXCHANGE_RATE_STORAGE_KEY = "clacky-exchange-rate";
-  const DEFAULT_USD_TO_CNY_RATE = 6.7944; // Default exchange rate: 1 USD ≈ 6.7944 CNY
+  // ── Loading / error ───────────────────────────────────────────────────────
 
-  function _getCurrency() {
-    try { return localStorage.getItem(CURRENCY_STORAGE_KEY) || "USD"; } catch (_) { return "USD"; }
-  }
-
-  function _getExchangeRate() {
-    try {
-      const rate = localStorage.getItem(EXCHANGE_RATE_STORAGE_KEY);
-      if (rate) {
-        const parsed = parseFloat(rate);
-        if (!isNaN(parsed) && parsed > 0) return parsed;
-      }
-    } catch (_) {}
-    return DEFAULT_USD_TO_CNY_RATE;
-  }
-
-  function _setExchangeRate(rate) {
-    try {
-      if (rate && !isNaN(rate) && rate > 0) {
-        localStorage.setItem(EXCHANGE_RATE_STORAGE_KEY, rate.toString());
-        document.dispatchEvent(new CustomEvent("currencychange"));
-      }
-    } catch (_) {}
-  }
-
-  function _convertCost(usdCost) {
-    const currency = _getCurrency();
-    if (currency === "CNY") {
-      return usdCost * _getExchangeRate();
-    }
-    return usdCost;
-  }
-
-  function _getCurrencySymbol() {
-    return _getCurrency() === "CNY" ? "¥" : "$";
-  }
-
-  // ── Public API ──────────────────────────────────────────────────────────────
-
-  function open() {
-    _load();
-    // Listen for currency changes
-    document.removeEventListener("currencychange", _onCurrencyChange);
-    document.addEventListener("currencychange", _onCurrencyChange);
-  }
-
-  function _onCurrencyChange() {
-    if (_summary) _render();
-  }
-
-  // ── Data Loading ────────────────────────────────────────────────────────────
-
-  async function _load() {
+  function _onLoading(payload) {
     const container = document.getElementById("billing-content");
     if (!container) return;
 
-    const isFirstLoad = !_summary;
-    if (isFirstLoad) {
+    if (payload.isFirstLoad) {
       container.innerHTML = _renderSkeleton();
-    } else {
-      const existing = container.querySelector(".billing-dashboard");
-      if (existing && !existing.querySelector(".billing-skel-overlay")) {
-        const topBar = existing.querySelector(".billing-top-bar");
-        const topBarH = topBar ? topBar.offsetHeight + 20 : 0;
-        existing.insertAdjacentHTML("beforeend", `<div class="billing-skel-overlay" style="top:${topBarH}px">${_renderSkeletonBody()}</div>`);
-      }
+      return;
     }
+    const existing = container.querySelector(".billing-dashboard");
+    if (existing && !existing.querySelector(".billing-skel-overlay")) {
+      const topBar = existing.querySelector(".billing-top-bar");
+      const topBarH = topBar ? topBar.offsetHeight + 20 : 0;
+      existing.insertAdjacentHTML("beforeend", `<div class="billing-skel-overlay" style="top:${topBarH}px">${_renderSkeletonBody()}</div>`);
+    }
+  }
 
-    try {
-      const modelParam = (_currentModel && _currentModel !== "all") ? `&model=${encodeURIComponent(_currentModel)}` : "";
-      const [summaryRes, dailyRes, sessionsRes] = await Promise.all([
-        fetch(`/api/billing/summary?period=${_currentPeriod}${modelParam}`),
-        fetch(`/api/billing/daily?days=30${modelParam}`),
-        fetch(`/api/billing/sessions?period=${_currentPeriod}${modelParam}&limit=100`)
-      ]);
-
-      _summary = await summaryRes.json();
-      const dailyData = await dailyRes.json();
-      _daily = dailyData.days || [];
-
-      const sessionsData = await sessionsRes.json();
-      _sessions = sessionsData.sessions || [];
-
-      // 保存完整模型列表（仅在未筛选时更新）
-      if (!_currentModel || _currentModel === "all") {
-        _allModels = _summary.by_model ? Object.keys(_summary.by_model) : [];
-      }
+  function _onError(payload) {
+    const container = document.getElementById("billing-content");
+    if (container) container.innerHTML = `<div class="billing-error">${I18n.t("billing.error") || "Failed to load billing data"}: ${payload.message}</div>`;
+  }
 
-      _render();
-    } catch (e) {
-      container.innerHTML = `<div class="billing-error">${I18n.t("billing.error") || "Failed to load billing data"}: ${e.message}</div>`;
-    }
+  function _onActionError(payload) {
+    alert(payload.message);
   }
 
-  // ── Rendering ───────────────────────────────────────────────────────────────
+  // ── Skeletons ─────────────────────────────────────────────────────────────
 
   function _renderSkeletonBody() {
     return `
@@ -178,20 +109,22 @@ const Billing = (() => {
     `;
   }
 
+  // ── Main render ─────────────────────────────────────────────────────────────
+
   function _render() {
     const container = document.getElementById("billing-content");
-    if (!container || !_summary) return;
+    const summary = BillingStore.state.summary;
+    if (!container || !summary) return;
 
-    // Period button group
     const periods = ["day", "week", "month", "year", "all"];
-    const periodBtns = periods.map(p => 
-      `<button class="billing-period-btn ${p === _currentPeriod ? 'active' : ''}" data-period="${p}">${_periodLabel(p)}</button>`
+    const periodBtns = periods.map(p =>
+      `<button class="billing-period-btn ${p === BillingStore.state.currentPeriod ? 'active' : ''}" data-period="${p}">${_periodLabel(p)}</button>`
     ).join("");
 
-    // Model filter options (使用完整模型列表)
-    const models = _allModels.length > 0 ? _allModels : (_summary.by_model ? Object.keys(_summary.by_model) : []);
+    const allModels = BillingStore.state.allModels;
+    const models = allModels.length > 0 ? allModels : (summary.by_model ? Object.keys(summary.by_model) : []);
     const modelOptions = [`<option value="all">${I18n.t("billing.allModels") || "All Models"}</option>`]
-      .concat(models.filter(m => m).map(m => `<option value="${_esc(m)}" ${m === _currentModel ? "selected" : ""}>${_esc(m)}</option>`))
+      .concat(models.filter(m => m).map(m => `<option value="${_esc(m)}" ${m === BillingStore.state.currentModel ? "selected" : ""}>${_esc(m)}</option>`))
       .join("");
 
     container.innerHTML = `
@@ -225,7 +158,7 @@ const Billing = (() => {
               <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.5"/><path d="M10 6v1m0 6v1M7.5 10a2.5 2.5 0 0 0 2.5 2.5c1.38 0 2.5-.56 2.5-1.25S11.38 10 10 10c-1.38 0-2.5-.56-2.5-1.25S8.62 7.5 10 7.5A2.5 2.5 0 0 1 12.5 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
             </div>
             <div class="billing-stat-content">
-              <div class="billing-stat-value">${_getCurrencySymbol()}${_formatCost(_convertCost(_summary.total_cost))}</div>
+              <div class="billing-stat-value">${Billing.getCurrencySymbol()}${_formatCost(Billing.convertCost(summary.total_cost))}</div>
               <div class="billing-stat-label">${I18n.t("billing.totalCost") || "Total Cost"}</div>
             </div>
           </div>
@@ -234,7 +167,7 @@ const Billing = (() => {
               <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="11" width="3" height="6" rx="1" fill="currentColor" opacity=".4"/><rect x="8.5" y="7" width="3" height="10" rx="1" fill="currentColor" opacity=".7"/><rect x="14" y="3" width="3" height="14" rx="1" fill="currentColor"/></svg>
             </div>
             <div class="billing-stat-content">
-              <div class="billing-stat-value">${_formatCompact(_summary.total_tokens)}</div>
+              <div class="billing-stat-value">${_formatCompact(summary.total_tokens)}</div>
               <div class="billing-stat-label">${I18n.t("billing.totalTokens") || "Total Tokens"}</div>
             </div>
           </div>
@@ -243,7 +176,7 @@ const Billing = (() => {
               <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 3a7 7 0 1 1 0 14A7 7 0 0 1 10 3Z" stroke="currentColor" stroke-width="1.5"/><path d="M10 7v3l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
             </div>
             <div class="billing-stat-content">
-              <div class="billing-stat-value">${_formatNumber(_summary.record_count)}</div>
+              <div class="billing-stat-value">${_formatNumber(summary.record_count)}</div>
               <div class="billing-stat-label">${I18n.t("billing.requests") || "Requests"}</div>
             </div>
           </div>
@@ -278,52 +211,43 @@ const Billing = (() => {
       </div>
     `;
 
-    // Bind period button handlers
     document.querySelectorAll(".billing-period-btn").forEach(btn => {
-      btn.addEventListener("click", (e) => {
-        _currentPeriod = e.target.dataset.period;
-        _load();
-      });
+      btn.addEventListener("click", (e) => Billing.setPeriod(e.target.dataset.period));
     });
 
-    // Bind model filter handler
     document.getElementById("billing-model-filter")?.addEventListener("change", (e) => {
-      _currentModel = e.target.value;
-      _load();
+      Billing.setModel(e.target.value);
     });
 
-    // Bind clear button handlers
     _bindClearHandlers();
-
-    // Bind scorecard share button
     document.getElementById("billing-share-btn")?.addEventListener("click", _openScorecardShare);
 
-    // Bind chart tooltip handlers
     _bindChartTooltip();
     _bindHeatmapTooltip();
     _bindTrendTooltip();
   }
 
-  // Builds the per-period scorecard numbers from a raw summary object, using
-  // the same currency / formatting conventions as the billing dashboard.
+  // ── Scorecard ───────────────────────────────────────────────────────────────
+
   function _scorecardStatsFor(summary, periodKey) {
-    const prompt = summary.prompt_tokens || 0;
-    const cacheRead = summary.cache_read_tokens || 0;
-    const rate = prompt === 0 ? "0" : ((cacheRead / prompt) * 100).toFixed(1);
     return {
       key:          periodKey,
       period:       _periodLabel(periodKey),
-      cacheHitRate: rate,
-      costStr:      `${_getCurrencySymbol()}${_formatCost(_convertCost(summary.total_cost || 0))}`,
+      cacheHitRate: _cacheHitRateOf(summary),
+      costStr:      `${Billing.getCurrencySymbol()}${_formatCost(Billing.convertCost(summary.total_cost || 0))}`,
       tokensStr:    _formatCompact(summary.total_tokens || 0),
       requests:     _formatNumber(summary.record_count || 0)
     };
   }
 
-  // Daily token totals for the heatmap (GitHub-contribution style), oldest →
-  // newest. Each entry: { date: "YYYY-MM-DD", tokens: <total> }.
+  function _cacheHitRateOf(summary) {
+    const prompt = summary.prompt_tokens || 0;
+    const cacheRead = summary.cache_read_tokens || 0;
+    return prompt === 0 ? "0" : ((cacheRead / prompt) * 100).toFixed(1);
+  }
+
   function _heatmapDays() {
-    return (_daily || []).map((d) => ({
+    return (BillingStore.state.daily || []).map((d) => ({
       date:   d.date,
       tokens: (d.prompt_tokens || 0) + (d.completion_tokens || 0),
       cost:   d.cost || 0
@@ -331,29 +255,27 @@ const Billing = (() => {
   }
 
   function _openScorecardShare() {
-    if (!_summary || typeof Share === "undefined" || !Share.openScorecard) return;
-    const modelParam = (_currentModel && _currentModel !== "all") ? `&model=${encodeURIComponent(_currentModel)}` : "";
+    const summary = BillingStore.state.summary;
+    if (!summary || typeof Share === "undefined" || !Share.openScorecard) return;
+    const currentPeriod = BillingStore.state.currentPeriod;
 
-    // Open instantly with the period the dashboard already has, then fetch the
-    // other periods in the background and hot-swap them in (no blocking await).
     const periods = {};
-    periods[_currentPeriod] = _scorecardStatsFor(_summary, _currentPeriod);
+    periods[currentPeriod] = _scorecardStatsFor(summary, currentPeriod);
 
     Share.openScorecard({
       periods:       periods,
-      defaultPeriod: _currentPeriod,
+      defaultPeriod: currentPeriod,
       heatmap:       _heatmapDays(),
-      period:        periods[_currentPeriod].period,
-      cacheHitRate:  periods[_currentPeriod].cacheHitRate,
-      costStr:       periods[_currentPeriod].costStr,
-      tokensStr:     periods[_currentPeriod].tokensStr,
-      requests:      periods[_currentPeriod].requests
+      period:        periods[currentPeriod].period,
+      cacheHitRate:  periods[currentPeriod].cacheHitRate,
+      costStr:       periods[currentPeriod].costStr,
+      tokensStr:     periods[currentPeriod].tokensStr,
+      requests:      periods[currentPeriod].requests
     });
 
-    const others = ["day", "week", "month"].filter((p) => p !== _currentPeriod);
+    const others = ["day", "week", "month"].filter((p) => p !== currentPeriod);
     others.forEach((p) => {
-      fetch(`/api/billing/summary?period=${p}${modelParam}`)
-        .then((r) => r.json())
+      Billing.fetchSummary(p)
         .then((summary) => {
           if (Share.addScorecardPeriod) Share.addScorecardPeriod(p, _scorecardStatsFor(summary, p));
         })
@@ -361,6 +283,8 @@ const Billing = (() => {
     });
   }
 
+  // ── Tooltips ─────────────────────────────────────────────────────────────────
+
   function _bindChartTooltip() {
     const container = document.getElementById("billing-chart-container");
     const tooltip = document.getElementById("billing-tooltip");
@@ -406,8 +330,6 @@ const Billing = (() => {
         </div>
       `;
       tooltip.style.display = "block";
-
-      // Position tooltip following mouse
       tooltip.style.left = `${e.clientX + 15}px`;
       tooltip.style.top = `${e.clientY - 10}px`;
     });
@@ -488,6 +410,8 @@ const Billing = (() => {
     });
   }
 
+  // ── Clear popup ────────────────────────────────────────────────────────────
+
   function _bindClearHandlers() {
     const clearBtn = document.getElementById("billing-clear-btn");
     const clearPopup = document.getElementById("billing-clear-popup");
@@ -496,74 +420,51 @@ const Billing = (() => {
 
     if (!clearBtn || !clearPopup) return;
 
-    // Toggle popup on button click
     clearBtn.addEventListener("click", (e) => {
       e.stopPropagation();
       _clearPopupVisible = !_clearPopupVisible;
       clearPopup.style.display = _clearPopupVisible ? "flex" : "none";
     });
 
-    // Clear today
-    clearToday?.addEventListener("click", async (e) => {
+    clearToday?.addEventListener("click", (e) => {
       e.stopPropagation();
-      await _clearData("today");
+      _hideClearPopup();
+      Billing.clearData("today");
     });
 
-    // Clear all
-    clearAll?.addEventListener("click", async (e) => {
+    clearAll?.addEventListener("click", (e) => {
       e.stopPropagation();
-      await _clearData("all");
+      _hideClearPopup();
+      Billing.clearData("all");
     });
 
-    // Close popup when clicking outside
     document.addEventListener("click", _closeClearPopup);
   }
 
+  function _hideClearPopup() {
+    const clearPopup = document.getElementById("billing-clear-popup");
+    if (clearPopup) clearPopup.style.display = "none";
+    _clearPopupVisible = false;
+  }
+
   function _closeClearPopup(e) {
     const clearPopup = document.getElementById("billing-clear-popup");
     const clearBtn = document.getElementById("billing-clear-btn");
     if (!clearPopup || !clearBtn) return;
-
-    // Check if click is outside popup and button
-    if (!clearPopup.contains(e.target) && !clearBtn.contains(e.target)) {
-      _clearPopupVisible = false;
-      clearPopup.style.display = "none";
-    }
+    if (!clearPopup.contains(e.target) && !clearBtn.contains(e.target)) _hideClearPopup();
   }
 
-  async function _clearData(scope) {
-    const clearPopup = document.getElementById("billing-clear-popup");
-    if (clearPopup) {
-      clearPopup.style.display = "none";
-      _clearPopupVisible = false;
-    }
-
-    try {
-      const res = await fetch(`/api/billing/clear?scope=${scope}`, { method: "DELETE" });
-      const data = await res.json();
-      if (res.ok) {
-        // Reload data after clearing
-        _load();
-      } else {
-        alert(data.error || "Failed to clear data");
-      }
-    } catch (e) {
-      alert(`Error clearing data: ${e.message}`);
-    }
-  }
+  // ── Section renderers ────────────────────────────────────────────────────────
 
-  // Helper functions for new UI
   function _getSummaryHint() {
-    const cost = _convertCost(_summary.total_cost || 0);
-    const tokens = _summary.total_tokens || 0;
-    return `${_formatCompact(tokens)} tokens · ${_getCurrencySymbol()}${_formatCost(cost)}`;
+    const summary = BillingStore.state.summary;
+    const cost = Billing.convertCost(summary.total_cost || 0);
+    const tokens = summary.total_tokens || 0;
+    return `${_formatCompact(tokens)} tokens · ${Billing.getCurrencySymbol()}${_formatCost(cost)}`;
   }
 
   function _getCacheHitRate() {
-    const prompt = _summary.prompt_tokens || 0;
-    const cacheRead = _summary.cache_read_tokens || 0;
-    if (prompt === 0) return "0";
-    return ((cacheRead / prompt) * 100).toFixed(1);
+    return _cacheHitRateOf(BillingStore.state.summary);
   }
 
   function _formatCompact(num) {
@@ -574,10 +475,11 @@ const Billing = (() => {
   }
 
   function _renderTokenBreakdown() {
-    const totalTokens = _summary.total_tokens || 0;
-    const promptTokens = _summary.prompt_tokens || 0;
-    const completionTokens = _summary.completion_tokens || 0;
-    const cacheReadTokens = _summary.cache_read_tokens || 0;
+    const summary = BillingStore.state.summary;
+    const totalTokens = summary.total_tokens || 0;
+    const promptTokens = summary.prompt_tokens || 0;
+    const completionTokens = summary.completion_tokens || 0;
+    const cacheReadTokens = summary.cache_read_tokens || 0;
     const cacheMissTokens = promptTokens - cacheReadTokens;
 
     return `
@@ -631,8 +533,9 @@ const Billing = (() => {
   }
 
   function _renderModelBreakdown() {
-    const hasData = _summary.by_model && Object.keys(_summary.by_model).length > 0;
-    
+    const summary = BillingStore.state.summary;
+    const hasData = summary.by_model && Object.keys(summary.by_model).length > 0;
+
     if (!hasData) {
       return `
         <div class="billing-section billing-model-section">
@@ -642,10 +545,10 @@ const Billing = (() => {
       `;
     }
 
-    const entries = Object.entries(_summary.by_model)
+    const entries = Object.entries(summary.by_model)
       .filter(([_, data]) => (typeof data === "object" ? data.cost : data) > 0)
       .sort((a, b) => (b[1].cost || b[1]) - (a[1].cost || a[1]));
-    
+
     const totalCost = entries.reduce((sum, [, data]) => sum + (typeof data === "object" ? data.cost : data), 0) || 1;
 
     const rows = entries.map(([model, data]) => {
@@ -661,7 +564,7 @@ const Billing = (() => {
           <div class="billing-model-bar-track">
             <div class="billing-model-bar-fill" style="width: ${percent}%"></div>
           </div>
-          <div class="billing-model-cost">${_getCurrencySymbol()}${_formatCost(_convertCost(cost))}</div>
+          <div class="billing-model-cost">${Billing.getCurrencySymbol()}${_formatCost(Billing.convertCost(cost))}</div>
         </div>
       `;
     }).join("");
@@ -689,7 +592,7 @@ const Billing = (() => {
     days.forEach((d) => {
       const ratio = d.tokens / maxTok;
       const lvl = d.tokens === 0 ? 0 : ratio >= 0.75 ? 5 : ratio >= 0.5 ? 4 : ratio >= 0.25 ? 3 : ratio >= 0.08 ? 2 : 1;
-      const costStr = `${_getCurrencySymbol()}${_formatCost(_convertCost(d.cost))}`;
+      const costStr = `${Billing.getCurrencySymbol()}${_formatCost(Billing.convertCost(d.cost))}`;
       cells.push(`<div class="billing-heat-cell" data-level="${lvl}" data-date="${d.date}" data-tokens="${_formatCompact(d.tokens)}" data-cost="${costStr}"></div>`);
     });
 
@@ -717,12 +620,13 @@ const Billing = (() => {
   }
 
   function _renderCostTrend() {
-    if (!_daily || _daily.length < 2) {
+    const daily = BillingStore.state.daily;
+    if (!daily || daily.length < 2) {
       return `<div class="billing-chart-card billing-trend-card"><div class="billing-chart-empty">${I18n.t("billing.noData") || "No data available"}</div></div>`;
     }
 
-    const days = _daily.slice(-30);
-    const costs = days.map(d => _convertCost(d.cost || 0));
+    const days = daily.slice(-30);
+    const costs = days.map(d => Billing.convertCost(d.cost || 0));
     const maxCost = Math.max(...costs, 0.0001);
     const minCost = Math.min(...costs);
 
@@ -762,7 +666,7 @@ const Billing = (() => {
       xLabels.push({ date: d.date.slice(5), x });
     });
 
-    const currencySymbol = _getCurrencySymbol();
+    const currencySymbol = Billing.getCurrencySymbol();
 
     return `
       <div class="billing-chart-card billing-trend-card">
@@ -799,35 +703,32 @@ const Billing = (() => {
   }
 
   function _renderCombinedChart() {
-    if (!_daily || _daily.length === 0) {
+    const daily = BillingStore.state.daily;
+    if (!daily || daily.length === 0) {
       return `<div class="billing-chart-card billing-chart-wide"><div class="billing-chart-empty">${I18n.t("billing.noData") || "No data available"}</div></div>`;
     }
 
-    const recentDays = _daily.slice(-14);
-    // Max values for scaling
+    const recentDays = daily.slice(-14);
     const maxInput = Math.max(...recentDays.map(d => d.prompt_tokens || 0), 1);
-    const maxOutput = Math.max(...recentDays.map(d => d.completion_tokens || 0), 1);    const maxVal = Math.max(maxInput, maxOutput);
+    const maxOutput = Math.max(...recentDays.map(d => d.completion_tokens || 0), 1);
+    const maxVal = Math.max(maxInput, maxOutput);
 
-    // Chart height in pixels
     const chartHeight = 120;
 
-    // Generate bars: each date has Input (stacked: cache hit + cache miss) and Output
     const chartBars = recentDays.map((d, i) => {
-      const cacheHit = d.cache_read_tokens || 0;        // 命中缓存
-      const totalPrompt = d.prompt_tokens || 0;         // 全部输入token
-      const cacheMiss = totalPrompt - cacheHit;         // 未命中缓存 = 全部输入 - 命中
+      const cacheHit = d.cache_read_tokens || 0;
+      const totalPrompt = d.prompt_tokens || 0;
+      const cacheMiss = totalPrompt - cacheHit;
       const output = d.completion_tokens || 0;
       const totalInput = totalPrompt;
       const totalTokens = totalInput + output;
 
-      // Calculate heights in pixels
       const cacheHitPx = Math.max((cacheHit / maxVal) * chartHeight, cacheHit > 0 ? 2 : 0);
       const cacheMissPx = Math.max((cacheMiss / maxVal) * chartHeight, cacheMiss > 0 ? 2 : 0);
       const outputPx = Math.max((output / maxVal) * chartHeight, output > 0 ? 2 : 0);
       const date = d.date.slice(5);
       const showLabel = i % 2 === 0 || i === recentDays.length - 1;
 
-      // Tooltip data attributes for custom tooltip
       const tooltipData = `data-date="${d.date}" data-total="${_formatCompact(totalTokens)}" data-cache-hit="${_formatCompact(cacheHit)}" data-cache-miss="${_formatCompact(cacheMiss)}" data-output="${_formatCompact(output)}"`;
 
       return `
@@ -876,21 +777,22 @@ const Billing = (() => {
   }
 
   function _renderSessionList() {
-    if (!_sessions || _sessions.length === 0) {
+    const sessions = BillingStore.state.sessions;
+    if (!sessions || sessions.length === 0) {
       return `
-        <div class="billing-section billing-sessions-section">
+        <div class="billing-sessions-section">
           <h3>${I18n.t("billing.sessions") || "Sessions"}</h3>
           <div class="billing-sessions-empty">${I18n.t("billing.noSessions") || "No session data"}</div>
         </div>
       `;
     }
 
-    const rows = _sessions.map((s, index) => {
+    const rows = sessions.map((s, index) => {
       const sessionId = s.session_id || "unknown";
       const isDeleted = s.is_deleted;
       const sessionName = s.session_name || sessionId;
       const displayName = isDeleted ? (I18n.t("billing.deletedSessions") || "已删除会话") : (sessionName.length > 25 ? sessionName.slice(0, 25) + "..." : sessionName);
-      const totalCost = _convertCost(s.total_cost || 0);
+      const totalCost = Billing.convertCost(s.total_cost || 0);
       const totalTokens = s.total_tokens || 0;
       const promptTokens = s.prompt_tokens || 0;
       const cacheHit = s.cache_read_tokens || 0;
@@ -912,13 +814,13 @@ const Billing = (() => {
           <div class="billing-cell billing-cell-number billing-cell-hit">${_formatCompact(cacheHit)}</div>
           <div class="billing-cell billing-cell-number billing-cell-miss">${_formatCompact(cacheMiss)}</div>
           <div class="billing-cell billing-cell-number">${_formatCompact(completionTokens)}</div>
-          <div class="billing-cell billing-cell-cost">${_getCurrencySymbol()}${_formatCost(totalCost)}</div>
+          <div class="billing-cell billing-cell-cost">${Billing.getCurrencySymbol()}${_formatCost(totalCost)}</div>
           <div class="billing-cell billing-cell-time">${lastRequest}</div>
           <div class="billing-session-numbers-row">
             <span class="billing-cell-number">${_formatCompact(totalTokens)} tok</span>
             <span class="billing-cell-number billing-cell-hit">${_formatCompact(cacheHit)} hit</span>
             <span class="billing-cell-number">${_formatCompact(completionTokens)} out</span>
-            <span class="billing-cell-cost">${_getCurrencySymbol()}${_formatCost(totalCost)}</span>
+            <span class="billing-cell-cost">${Billing.getCurrencySymbol()}${_formatCost(totalCost)}</span>
             <span class="billing-cell-time">${lastRequest}</span>
           </div>
         </div>
@@ -926,7 +828,7 @@ const Billing = (() => {
     }).join("");
 
     return `
-      <div class="billing-section billing-sessions-section">
+      <div class="billing-sessions-section">
         <h3>${I18n.t("billing.sessions") || "Sessions"}</h3>
         <div class="billing-sessions-header">
           <span class="billing-cell billing-cell-index">#</span>
@@ -945,7 +847,7 @@ const Billing = (() => {
     `;
   }
 
-  // ── Helpers ─────────────────────────────────────────────────────────────────
+  // ── Helpers ───────────────────────────────────────────────────────────────
 
   function _formatCost(cost) {
     if (cost == null || cost === 0) return "0.0000";
@@ -957,17 +859,6 @@ const Billing = (() => {
     return num.toLocaleString();
   }
 
-  function _periodLabelShort(period) {
-    const labels = {
-      day: I18n.t("billing.period.day") || "Today",
-      week: I18n.t("billing.period.weekShort") || "Week",
-      month: I18n.t("billing.period.monthShort") || "Month",
-      year: I18n.t("billing.period.yearShort") || "Year",
-      all: I18n.t("billing.period.allShort") || "All"
-    };
-    return labels[period] || period;
-  }
-
   function _periodLabel(period) {
     const labels = {
       day: I18n.t("billing.period.day") || "Today",
@@ -986,14 +877,15 @@ const Billing = (() => {
     return div.innerHTML;
   }
 
-  // ── Expose Public API ───────────────────────────────────────────────────────
+  function _subscribe() {
+    Billing.on("billing:loading", _onLoading);
+    Billing.on("billing:changed", _render);
+    Billing.on("billing:error", _onError);
+    Billing.on("billing:actionError", _onActionError);
+    document.addEventListener("currencychange", () => Billing.refreshView());
+  }
 
-  return { 
-    open,
-    // Expose currency utilities for other modules
-    getCurrency: _getCurrency,
-    convertCost: _convertCost,
-    getCurrencySymbol: _getCurrencySymbol,
-    getExchangeRate: _getExchangeRate
-  };
+  return { init: _subscribe };
 })();
+
+BillingView.init();