openclacky 1.2.18 → 1.3.1

data/lib/clacky/web/app.js

@@ -171,7 +171,7 @@ const Router = (() => {
         // Input field remains usable so user can type while waiting
         $("btn-send").disabled = true;
         WS.send({ type: "subscribe", session_id: id });
-        Sessions.renderList();
+        Sessions.renderList({ scrollToActive: true });
         $("user-input").focus();
 
         // Load session-scoped skill list (filtered by agent profile) for slash autocomplete
@@ -513,6 +513,57 @@ if ($("btn-toggle-sidebar")) {
 // Tap overlay to close sidebar on mobile
 $("sidebar-overlay").addEventListener("click", _closeSidebar);
 
+// ── Sidebar resize ──────────────────────────────────────────────────────
+(function _initSidebarResize() {
+  const sidebar = $("sidebar");
+  const handle = $("sidebar-resize-handle");
+  if (!sidebar || !handle) return;
+
+  const MIN_W = 12;  // rem
+  const MAX_W = 32;  // rem
+  const baseFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+  let startX = 0;
+  let startW = 0;
+
+  // Restore saved width
+  const saved = localStorage.getItem("sidebar-width");
+  if (saved) {
+    const w = parseFloat(saved);
+    if (w >= MIN_W && w <= MAX_W) {
+      sidebar.style.setProperty("--sidebar-width", w + "rem");
+    }
+  }
+
+  function _getWidth() {
+    return parseFloat(getComputedStyle(sidebar).getPropertyValue("--sidebar-width"));
+  }
+
+  handle.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    startX = e.clientX;
+    startW = _getWidth();
+    handle.classList.add("active");
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  });
+
+  document.addEventListener("mousemove", (e) => {
+    if (!handle.classList.contains("active")) return;
+    const dx = (e.clientX - startX) / baseFontSize;
+    const newW = Math.min(MAX_W, Math.max(MIN_W, startW + dx));
+    sidebar.style.setProperty("--sidebar-width", newW + "rem");
+  });
+
+  document.addEventListener("mouseup", () => {
+    if (!handle.classList.contains("active")) return;
+    handle.classList.remove("active");
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    localStorage.setItem("sidebar-width", _getWidth());
+  });
+})();
+
 // On mobile: start with sidebar hidden
 if (_isMobile()) _closeSidebar();
 
@@ -641,3 +692,24 @@ window.bootAfterBrand = async function() {
 
 // Session Info Bar (model switcher + working-directory switcher) moved to sessions.js
 
+// Logo hover shake with debounce
+(function () {
+  const logo = document.getElementById('header-logo-img');
+  if (!logo) return;
+  let timer = null;
+  logo.addEventListener('mouseenter', function () {
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      logo.style.animation = 'none';
+      logo.offsetHeight;
+      logo.style.animation = 'logo-shake 0.5s ease';
+    }, 100);
+  });
+  logo.addEventListener('mouseleave', function () {
+    clearTimeout(timer);
+  });
+  logo.addEventListener('animationend', function () {
+    logo.style.animation = 'none';
+  });
+})();
+

data/lib/clacky/web/backup.js

@@ -0,0 +1,119 @@
+// backup.js — Backup settings panel (Settings → General → Backup).
+//
+// Talks to /api/backup/{status,config,download}. Lets the user toggle automatic
+// backups (handled by the server-side Scheduler — fixed daily at 03:00, keeps 7)
+// and download a one-off archive directly to the browser.
+
+const Backup = (() => {
+
+  let _status = null;
+  let _saving = false;
+
+  async function load() {
+    try {
+      const res = await fetch("/api/backup/status");
+      _status = await res.json();
+      _render();
+    } catch (e) {
+      // Backup section is non-critical; fail quietly.
+    }
+  }
+
+  function _render() {
+    if (!_status) return;
+    const cfg = _status.config || {};
+
+    const incl = $("backup-include-sessions");
+    if (incl) incl.checked = cfg.include_sessions !== false;
+
+    const autoToggle = $("backup-auto-toggle");
+    if (autoToggle) autoToggle.checked = !!cfg.enabled;
+
+    _renderLastRun(cfg);
+  }
+
+  function _renderLastRun(cfg) {
+    const el = $("backup-status");
+    if (!el) return;
+    if (!cfg.last_run_at) { el.textContent = ""; el.className = "model-test-result"; return; }
+    if (cfg.last_status === "error") {
+      el.textContent = I18n.t("settings.backup.lastError", { msg: cfg.last_error || "" });
+      el.className = "model-test-result error";
+    } else {
+      el.textContent = I18n.t("settings.backup.lastOk", { time: _fmtDate(cfg.last_run_at) });
+      el.className = "model-test-result success";
+    }
+  }
+
+  async function _downloadNow() {
+    const btn = $("btn-backup-now");
+    const el = $("backup-status");
+    if (btn) btn.disabled = true;
+    if (el) { el.textContent = I18n.t("settings.backup.running"); el.className = "model-test-result"; }
+    try {
+      const res = await fetch("/api/backup/download");
+      if (!res.ok) {
+        let msg = "failed";
+        try { msg = (await res.json()).error || msg; } catch (e) {}
+        throw new Error(msg);
+      }
+      const blob = await res.blob();
+      const cd = res.headers.get("Content-Disposition") || "";
+      const m = cd.match(/filename="?([^"]+)"?/);
+      const name = (m && m[1]) || "clacky-backup.tar.gz";
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = name;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+      if (el) { el.textContent = I18n.t("settings.backup.downloaded"); el.className = "model-test-result success"; }
+    } catch (e) {
+      if (el) { el.textContent = I18n.t("settings.backup.lastError", { msg: e.message }); el.className = "model-test-result error"; }
+    } finally {
+      if (btn) btn.disabled = false;
+    }
+  }
+
+  async function _saveConfig(patch) {
+    if (_saving) return;
+    _saving = true;
+    try {
+      const res = await fetch("/api/backup/config", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(patch)
+      });
+      const data = await res.json();
+      if (data.ok) { _status = data.status; _render(); }
+    } catch (e) {
+      // ignore — next load will resync
+    } finally {
+      _saving = false;
+    }
+  }
+
+  function _fmtDate(iso) {
+    if (!iso) return "";
+    try { return new Date(iso).toLocaleString(); } catch (e) { return iso; }
+  }
+
+  function _bind() {
+    const btn = $("btn-backup-now");
+    if (btn) btn.addEventListener("click", _downloadNow);
+
+    const autoToggle = $("backup-auto-toggle");
+    if (autoToggle) autoToggle.addEventListener("change", () => _saveConfig({ enabled: autoToggle.checked }));
+
+    const incl = $("backup-include-sessions");
+    if (incl) incl.addEventListener("change", () => _saveConfig({ include_sessions: incl.checked }));
+  }
+
+  document.addEventListener("DOMContentLoaded", _bind);
+
+  return { load };
+})();
+
+window.Backup = Backup;

data/lib/clacky/web/billing.js

@@ -70,7 +70,17 @@ const Billing = (() => {
     const container = document.getElementById("billing-content");
     if (!container) return;
 
-    container.innerHTML = `<div class="billing-loading">${I18n.t("billing.loading") || "Loading billing data..."}</div>`;
+    const isFirstLoad = !_summary;
+    if (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>`);
+      }
+    }
 
     try {
       const modelParam = (_currentModel && _currentModel !== "all") ? `&model=${encodeURIComponent(_currentModel)}` : "";
@@ -100,6 +110,74 @@ const Billing = (() => {
 
   // ── Rendering ───────────────────────────────────────────────────────────────
 
+  function _renderSkeletonBody() {
+    return `
+      <div class="billing-stats-row">
+        ${[0,1,2,3].map(() => `
+          <div class="billing-stat-card">
+            <div class="skel skel-icon"></div>
+            <div class="billing-stat-content">
+              <div class="skel skel-value"></div>
+              <div class="skel skel-label"></div>
+            </div>
+          </div>
+        `).join("")}
+      </div>
+      <div class="billing-heatmap-row">
+        <div class="billing-chart-card billing-heatmap-card">
+          <div class="skel skel-heatmap"></div>
+        </div>
+        <div class="billing-chart-card billing-trend-card">
+          <div class="skel skel-block-sm"></div>
+        </div>
+      </div>
+      <div class="billing-bottom-grid">
+        <div class="billing-section"><div class="skel skel-block"></div></div>
+        <div class="billing-section"><div class="skel skel-block"></div></div>
+      </div>
+    `;
+  }
+
+  function _renderSkeleton() {
+    return `
+      <div class="billing-dashboard billing-skeleton">
+        <div class="billing-top-bar">
+          <div class="billing-title-row">
+            <div class="skel skel-title"></div>
+            <div class="skel skel-subtitle"></div>
+          </div>
+          <div class="billing-controls">
+            <div class="skel skel-tabs"></div>
+            <div class="skel skel-select"></div>
+          </div>
+        </div>
+        <div class="billing-stats-row">
+          ${[0,1,2,3].map(() => `
+            <div class="billing-stat-card">
+              <div class="skel skel-icon"></div>
+              <div class="billing-stat-content">
+                <div class="skel skel-value"></div>
+                <div class="skel skel-label"></div>
+              </div>
+            </div>
+          `).join("")}
+        </div>
+        <div class="billing-heatmap-row">
+          <div class="billing-chart-card billing-heatmap-card">
+            <div class="skel skel-heatmap"></div>
+          </div>
+          <div class="billing-chart-card billing-trend-card">
+            <div class="skel skel-block-sm"></div>
+          </div>
+        </div>
+        <div class="billing-bottom-grid">
+          <div class="billing-section"><div class="skel skel-block"></div></div>
+          <div class="billing-section"><div class="skel skel-block"></div></div>
+        </div>
+      </div>
+    `;
+  }
+
   function _render() {
     const container = document.getElementById("billing-content");
     if (!container || !_summary) return;
@@ -113,7 +191,7 @@ const Billing = (() => {
     // Model filter options (使用完整模型列表)
     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.map(m => `<option value="${_esc(m)}" ${m === _currentModel ? "selected" : ""}>${_esc(m)}</option>`))
+      .concat(models.filter(m => m).map(m => `<option value="${_esc(m)}" ${m === _currentModel ? "selected" : ""}>${_esc(m)}</option>`))
       .join("");
 
     container.innerHTML = `
@@ -131,7 +209,7 @@ const Billing = (() => {
             </button>
             <div class="billing-clear-container">
               <button id="billing-clear-btn" class="billing-clear-btn" title="${I18n.t('billing.clearData') || 'Clear Data'}">
-                🗑️
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 11v6M14 11v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
               </button>
               <div id="billing-clear-popup" class="billing-clear-popup" style="display: none;">
                 <button id="billing-clear-today" class="billing-clear-option">${I18n.t('billing.clearToday') || 'Clear Today'}</button>
@@ -142,29 +220,37 @@ const Billing = (() => {
         </div>
 
         <div class="billing-stats-row">
-          <div class="billing-stat-card billing-stat-primary">
-            <div class="billing-stat-icon">💰</div>
+          <div class="billing-stat-card">
+            <div class="billing-stat-icon billing-stat-icon-cost">
+              <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-label">${I18n.t("billing.totalCost") || "Total Cost"}</div>
             </div>
           </div>
           <div class="billing-stat-card">
-            <div class="billing-stat-icon">📊</div>
+            <div class="billing-stat-icon billing-stat-icon-tokens">
+              <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-label">${I18n.t("billing.totalTokens") || "Total Tokens"}</div>
             </div>
           </div>
           <div class="billing-stat-card">
-            <div class="billing-stat-icon">🔄</div>
+            <div class="billing-stat-icon billing-stat-icon-requests">
+              <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-label">${I18n.t("billing.requests") || "Requests"}</div>
             </div>
           </div>
           <div class="billing-stat-card">
-            <div class="billing-stat-icon">⚡</div>
+            <div class="billing-stat-icon billing-stat-icon-cache">
+              <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2L3 11h6l-1 7 8-10h-6l1-6z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
+            </div>
             <div class="billing-stat-content">
               <div class="billing-stat-value">${_getCacheHitRate()}%</div>
               <div class="billing-stat-label">${I18n.t("billing.cacheHit") || "Cache Hit"}</div>
@@ -174,6 +260,7 @@ const Billing = (() => {
 
         <div class="billing-heatmap-row">
           ${_renderHeatmap()}
+          ${_renderCostTrend()}
         </div>
 
         <div class="billing-bottom-grid">
@@ -214,6 +301,7 @@ const Billing = (() => {
     // Bind chart tooltip handlers
     _bindChartTooltip();
     _bindHeatmapTooltip();
+    _bindTrendTooltip();
   }
 
   // Builds the per-period scorecard numbers from a raw summary object, using
@@ -365,6 +453,41 @@ const Billing = (() => {
     });
   }
 
+  function _bindTrendTooltip() {
+    const svg = document.querySelector(".billing-trend-svg");
+    const tooltip = document.getElementById("billing-tooltip");
+    if (!svg || !tooltip) return;
+
+    svg.addEventListener("mousemove", (e) => {
+      const dot = e.target.closest(".billing-trend-dot");
+      if (!dot) {
+        tooltip.style.display = "none";
+        return;
+      }
+      tooltip.innerHTML = `
+        <div class="tooltip-header">
+          <span class="tooltip-date">${dot.dataset.date}</span>
+        </div>
+        <div class="tooltip-row">
+          <span class="tooltip-label">${I18n.t("billing.cost") || "Cost"}</span>
+          <span class="tooltip-value">${dot.dataset.cost}</span>
+        </div>
+      `;
+      tooltip.style.display = "block";
+      tooltip.style.visibility = "hidden";
+      const rect = tooltip.getBoundingClientRect();
+      const ovf = e.clientX + 15 + rect.width - window.innerWidth;
+      tooltip.style.left = ovf > 0 ? `${e.clientX - 15 - rect.width}px` : `${e.clientX + 15}px`;
+      tooltip.style.top = `${e.clientY - 10}px`;
+      tooltip.style.visibility = "visible";
+    });
+
+    svg.addEventListener("mouseleave", () => {
+      tooltip.style.display = "none";
+      tooltip.style.visibility = "";
+    });
+  }
+
   function _bindClearHandlers() {
     const clearBtn = document.getElementById("billing-clear-btn");
     const clearPopup = document.getElementById("billing-clear-popup");
@@ -520,6 +643,7 @@ const Billing = (() => {
     }
 
     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;
@@ -573,7 +697,7 @@ const Billing = (() => {
     const dowHeader = dowLabels.map(l => `<span class="billing-heat-dow">${_esc(l)}</span>`).join("");
 
     return `
-      <div class="billing-chart-card billing-chart-wide billing-heatmap-card">
+      <div class="billing-chart-card billing-heatmap-card">
         <div class="billing-chart-header">
           <h4>${I18n.t("billing.heatmap.title") || "Activity"}</h4>
           <div class="billing-heat-legend">
@@ -592,6 +716,88 @@ const Billing = (() => {
     `;
   }
 
+  function _renderCostTrend() {
+    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 maxCost = Math.max(...costs, 0.0001);
+    const minCost = Math.min(...costs);
+
+    const pad = { top: 20, right: 16, bottom: 22, left: 48 };
+    const w = 400;
+    const h = 140;
+    const plotW = w - pad.left - pad.right;
+    const plotH = h - pad.top - pad.bottom;
+
+    const range = maxCost - minCost || 1;
+    const xStep = days.length > 1 ? plotW / (days.length - 1) : plotW;
+    const points = costs.map((c, i) => {
+      const x = pad.left + i * xStep;
+      const y = pad.top + plotH - ((c - minCost) / range) * plotH;
+      return `${x},${y}`;
+    }).join(" ");
+
+    const areaPoints = costs.length > 0
+      ? `${pad.left},${pad.top + plotH} ${points} ${pad.left + (costs.length - 1) * xStep},${pad.top + plotH}`
+      : "";
+
+    const yTicks = 4;
+    const yLabels = Array.from({ length: yTicks + 1 }, (_, i) => {
+      const val = minCost + (range / yTicks) * i;
+      const y = pad.top + plotH - ((val - minCost) / range) * plotH;
+      return { val, y };
+    });
+
+    const showEvery = days.length > 20 ? 10 : days.length > 10 ? 5 : days.length > 5 ? 3 : 1;
+    const xLabels = [];
+    let lastX = -50;
+    days.forEach((d, i) => {
+      if (i % showEvery !== 0 && i !== days.length - 1) return;
+      const x = pad.left + i * xStep;
+      if (x - lastX < 40) return;
+      lastX = x;
+      xLabels.push({ date: d.date.slice(5), x });
+    });
+
+    const currencySymbol = _getCurrencySymbol();
+
+    return `
+      <div class="billing-chart-card billing-trend-card">
+        <div class="billing-chart-header">
+          <h4>${I18n.t("billing.costTrend") || "Cost Trend"}</h4>
+          <span class="billing-trend-total">${currencySymbol}${_formatCost(costs.reduce((a, b) => a + b, 0))}</span>
+        </div>
+        <div class="billing-trend-chart">
+          <svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="xMidYMid meet" class="billing-trend-svg">
+            ${yLabels.map(l => `
+              <line x1="${pad.left}" y1="${l.y}" x2="${w - pad.right}" y2="${l.y}" class="billing-trend-grid-line" />
+              <text x="${pad.left - 6}" y="${l.y + 4}" class="billing-trend-y-label">${currencySymbol}${_formatCost(l.val)}</text>
+            `).join("")}
+            ${xLabels.map(l => `
+              <text x="${l.x}" y="${h - 4}" class="billing-trend-x-label">${l.date}</text>
+            `).join("")}
+            <defs>
+              <linearGradient id="billing-trend-grad" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="#4f46e5" stop-opacity="0.15" />
+                <stop offset="100%" stop-color="#4f46e5" stop-opacity="0.02" />
+              </linearGradient>
+            </defs>
+            <polygon points="${areaPoints}" fill="url(#billing-trend-grad)" class="billing-trend-area" />
+            <polyline points="${points}" fill="none" class="billing-trend-line" />
+            ${costs.map((c, i) => {
+              const cx = pad.left + i * xStep;
+              const cy = pad.top + plotH - ((c - minCost) / range) * plotH;
+              return `<circle cx="${cx}" cy="${cy}" r="3" class="billing-trend-dot" data-date="${days[i].date}" data-cost="${currencySymbol}${_formatCost(c)}" />`;
+            }).join("")}
+          </svg>
+        </div>
+      </div>
+    `;
+  }
+
   function _renderCombinedChart() {
     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>`;
@@ -698,16 +904,23 @@ const Billing = (() => {
       return `
         <div class="${rowClass}" data-session-id="${_esc(sessionId)}">
           <div class="billing-cell billing-cell-index">${index + 1}</div>
-          <div class="billing-cell billing-cell-session" title="${_esc(sessionName)}">
+          <div class="billing-cell billing-cell-session" data-tooltip="${_esc(sessionName)}" data-tooltip-pos="top">
             <span class="billing-cell-main">${_esc(displayName)}</span>
             <span class="billing-cell-sub">${requests} ${I18n.t("billing.requests") || "req"} · ${_esc(models)}</span>
           </div>
-          <div class="billing-cell billing-cell-number">${_formatCompact(totalTokens)}</div>
+          <div class="billing-cell billing-cell-number billing-cell-total">${_formatCompact(totalTokens)}</div>
           <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-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-time">${lastRequest}</span>
+          </div>
         </div>
       `;
     }).join("");