openclacky 1.2.7 → 1.2.9

data/lib/clacky/web/app.css

@@ -3858,6 +3858,7 @@ body {
 .model-card-grid-actions {
   display: flex;
   flex-direction: row;
+  align-items: center;
   flex-wrap: wrap;
   gap: 0.5rem;
   padding-top: 0.625rem;
@@ -3867,7 +3868,7 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.25rem;
+  gap: 0.3125rem;
   padding: 0.375rem 0.5rem;
   border: 1px solid var(--color-border-primary);
   border-radius: 6px;
@@ -3877,15 +3878,9 @@ body {
   cursor: pointer;
   transition: all 0.15s;
   white-space: nowrap;
+  min-width: 0;
 }
-.btn-card-grid-action svg {
-  flex-shrink: 0;
-}
-.btn-card-grid-action span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+.btn-card-grid-action svg { flex-shrink: 0; }
 .btn-card-grid-action:hover:not(:disabled) {
   border-color: var(--color-accent-primary);
   color: var(--color-accent-primary);
@@ -3895,13 +3890,22 @@ body {
   opacity: 0.5;
   cursor: not-allowed;
 }
+.btn-card-grid-action-primary {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  font-weight: 500;
+}
 .btn-card-grid-action-danger:hover:not(:disabled) {
   border-color: var(--color-error);
   color: var(--color-error);
   background: color-mix(in srgb, var(--color-error) 8%, transparent);
 }
-a.btn-card-grid-action {
-  text-decoration: none;
+.model-card-grid-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-left: auto;
+  justify-content: flex-end;
 }
 .model-card-grid-footer {
   display: flex;
@@ -9018,11 +9022,10 @@ body.setup-mode[data-theme="dark"] {
   transition: height 0.2s ease;
 }
 .billing-cache-miss {
-  background: #3b82f6;
+  background: #f59e0b;
   width: 100%;
   transition: height 0.2s ease;
-}
-.billing-output-bar {
+}.billing-output-bar {
   width: 12px;
   background: #10b981;
   border-radius: 2px 2px 0 0;
@@ -9038,10 +9041,10 @@ body.setup-mode[data-theme="dark"] {
 }
 
 /* Legend colors */
+.billing-legend-total { background: #6366f1; }
 .billing-legend-cache-hit { background: #93c5fd; }
-.billing-legend-cache-miss { background: #3b82f6; }
+.billing-legend-cache-miss { background: #f59e0b; }
 .billing-legend-output { background: #10b981; }
-
 /* ── Chart Tooltip ───────────────────────────────────────────────────── */
 .billing-chart-tooltip {
   display: none;
@@ -9085,10 +9088,10 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 50%;
   flex-shrink: 0;
 }
+.tooltip-total { background: #6366f1; }
 .tooltip-cache-hit { background: #93c5fd; }
-.tooltip-cache-miss { background: #3b82f6; }
-.tooltip-output { background: #10b981; }
-.tooltip-label {
+.tooltip-cache-miss { background: #f59e0b; }
+.tooltip-output { background: #10b981; }.tooltip-label {
   flex: 1;
   color: var(--color-text-secondary);
 }
@@ -9155,8 +9158,8 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 3px;
   transition: width 0.3s ease;
 }
-.billing-bar-prompt {
-  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
+.billing-bar-total {
+  background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
 }
 .billing-bar-completion {
   background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
@@ -9164,10 +9167,9 @@ body.setup-mode[data-theme="dark"] {
 .billing-bar-cache-read {
   background: linear-gradient(90deg, #93c5fd 0%, #bfdbfe 100%);
 }
-.billing-bar-cache-write {
-  background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
+.billing-bar-cache-miss {
+  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
 }
-
 /* ── Model List ──────────────────────────────────────────────────────── */
 .billing-model-list {
   display: flex;
@@ -9569,3 +9571,303 @@ body.setup-mode[data-theme="dark"] {
   color: var(--color-text-secondary);
   font-weight: 500;
 }
+
+/* ── Sessions List ───────────────────────────────────────────────────── */
+.billing-sessions-row {
+  margin-top: 1rem;
+}
+.billing-sessions-section {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 12px;
+  padding: 1.25rem;
+}
+.billing-sessions-section h3 {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0 0 1rem 0;
+}
+.billing-sessions-empty {
+  text-align: center;
+  padding: 2rem;
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+}
+.billing-sessions-header {
+  display: grid;
+  grid-template-columns: 36px 1.5fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 1fr;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--color-bg-tertiary);
+  border-radius: 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+}
+.billing-sessions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.billing-session-row {
+  display: grid;
+  grid-template-columns: 36px 1.5fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 1fr;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  transition: background 0.15s;
+  align-items: center;
+}
+.billing-session-row:hover {
+  background: var(--color-bg-tertiary);
+}
+.billing-session-deleted {
+  opacity: 0.7;
+  border-left: 3px solid var(--color-warning);
+}
+.billing-session-deleted .billing-cell-main {
+  color: var(--color-text-secondary);
+  font-style: italic;
+}
+.billing-cell {
+  font-size: 0.875rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.billing-cell-index {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+.billing-cell-session {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+.billing-cell-main {
+  font-weight: 500;
+  color: var(--color-text-primary);
+  font-family: var(--font-mono);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.billing-cell-sub {
+  font-size: 0.7rem;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.billing-cell-number {
+  font-family: var(--font-mono);
+  text-align: right;
+  color: var(--color-text-primary);
+}
+.billing-cell-hit {
+  color: #3b82f6;
+}
+.billing-cell-miss {
+  color: #f59e0b;
+}
+.billing-cell-cost {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  color: var(--color-accent);
+  text-align: right;
+}
+.billing-cell-time {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+@media (max-width: 768px) {
+  .billing-sessions-header {
+    display: none;
+  }
+  .billing-session-row {
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+    padding: 1rem;
+  }
+  .billing-cell-index {
+    display: none;
+  }
+  .billing-cell-session {
+    grid-column: 1 / -1;
+  }
+  .billing-cell-number {
+    text-align: left;
+  }
+  .billing-cell-number::before {
+    font-size: 0.625rem;
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    display: block;
+  }
+  .billing-cell-time {
+    grid-column: 1 / -1;
+    text-align: right;
+  }
+}
+
+/* ════ Media generation (Settings → Models tab) ════ */
+.settings-section-desc {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  margin: -0.25rem 0 0.5rem;
+}
+.media-row {
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  background: var(--color-bg-secondary);
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+}
+.media-row.is-expanded {
+  background: var(--color-bg-secondary);
+}
+.media-row-head {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  min-height: 2.25rem;
+}
+.media-row-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  min-width: 3rem;
+}
+.media-row-segmented {
+  display: inline-flex;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  padding: 1px;
+}
+.media-row-segmented button {
+  background: transparent;
+  border: none;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  font-family: inherit;
+}
+.media-row-segmented button:hover:not(.is-active):not(:disabled) {
+  color: var(--color-text-primary);
+}
+.media-row-segmented button.is-active {
+  background: var(--color-button-primary);
+  color: #fff;
+}
+.media-row-segmented button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.media-row-status {
+  margin-left: auto;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 16rem;
+}
+.media-row-detail {
+  border-top: 1px solid var(--color-border-primary);
+  padding: 0.625rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  background: var(--color-bg-primary);
+}
+.media-row-detail.is-warning {
+  color: var(--color-warning, #d97706);
+}
+.media-row-hint {
+  margin-top: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary, var(--color-text-secondary));
+}
+.media-row-detail .media-kv {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 0.25rem 0.75rem;
+  font-size: 0.8125rem;
+}
+.media-row-detail .media-kv-key {
+  color: var(--color-text-secondary);
+}
+.media-row-detail .media-kv-val {
+  color: var(--color-text-primary);
+  font-weight: 500;
+  word-break: break-all;
+}
+.media-row-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  justify-content: flex-end;
+}
+.media-row-btn {
+  background: transparent;
+  border: 1px solid var(--color-border-primary);
+  color: var(--color-text-primary);
+  border-radius: 6px;
+  padding: 0.3125rem 0.75rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  font-family: inherit;
+}
+.media-row-btn:hover {
+  background: var(--color-bg-secondary);
+}
+.media-row-btn.is-primary {
+  background: var(--color-button-primary);
+  color: #fff;
+  border-color: transparent;
+}
+.media-row-btn.is-primary:hover {
+  background: var(--color-button-primary-hover);
+}
+.media-custom-form {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 0.4375rem 0.625rem;
+  align-items: center;
+}
+.media-custom-form label {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+.media-custom-form input {
+  width: 100%;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  color: var(--color-text-primary);
+  border-radius: 6px;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+.media-custom-form .media-form-actions {
+  grid-column: 1 / -1;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-top: 0.25rem;
+}

data/lib/clacky/web/billing.js

@@ -4,6 +4,7 @@
 const Billing = (() => {
   let _summary = null;
   let _daily = [];
+  let _sessions = []; // 会话列表
   let _allModels = []; // 保存完整的模型列表
   let _currentPeriod = "day";
   let _currentModel = "all";
@@ -73,15 +74,19 @@ const Billing = (() => {
 
     try {
       const modelParam = (_currentModel && _currentModel !== "all") ? `&model=${encodeURIComponent(_currentModel)}` : "";
-      const [summaryRes, dailyRes] = await Promise.all([
+      const [summaryRes, dailyRes, sessionsRes] = await Promise.all([
         fetch(`/api/billing/summary?period=${_currentPeriod}${modelParam}`),
-        fetch(`/api/billing/daily?days=30${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) : [];
@@ -172,6 +177,10 @@ const Billing = (() => {
         <div class="billing-chart-row">
           ${_renderCombinedChart()}
         </div>
+
+        <div class="billing-sessions-row">
+          ${_renderSessionList()}
+        </div>
       </div>
     `;
 
@@ -219,14 +228,19 @@ const Billing = (() => {
           <span class="tooltip-date">${date}</span>
           <span class="tooltip-total">${total} tokens</span>
         </div>
+        <div class="tooltip-row">
+          <span class="tooltip-dot tooltip-total"></span>
+          <span class="tooltip-label">${I18n.t("billing.totalTokens") || "Total Tokens"}</span>
+          <span class="tooltip-value">${total}</span>
+        </div>
         <div class="tooltip-row">
           <span class="tooltip-dot tooltip-cache-hit"></span>
-          <span class="tooltip-label">${I18n.t("billing.inputCacheHit") || "Input (Cache Hit)"}</span>
+          <span class="tooltip-label">${I18n.t("billing.inputCacheHit") || "Input (Hit)"}</span>
           <span class="tooltip-value">${cacheHit}</span>
         </div>
         <div class="tooltip-row">
           <span class="tooltip-dot tooltip-cache-miss"></span>
-          <span class="tooltip-label">${I18n.t("billing.inputCacheMiss") || "Input (Cache Miss)"}</span>
+          <span class="tooltip-label">${I18n.t("billing.inputCacheMiss") || "Input (Miss)"}</span>
           <span class="tooltip-value">${cacheMiss}</span>
         </div>
         <div class="tooltip-row">
@@ -333,35 +347,50 @@ 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 cacheMissTokens = promptTokens - cacheReadTokens;
+
     return `
       <div class="billing-section billing-token-section">
         <h3>${I18n.t("billing.tokenBreakdown") || "Token Breakdown"}</h3>
         <div class="billing-token-bars">
           <div class="billing-token-bar-item">
             <div class="billing-token-bar-header">
-              <span class="billing-token-bar-label">${I18n.t("billing.inputCacheHit") || "Input (Cache Hit)"}</span>
-              <span class="billing-token-bar-value">${_formatCompact(_summary.cache_read_tokens)}</span>
+              <span class="billing-token-bar-label">${I18n.t("billing.totalTokens") || "Total Tokens"}</span>
+              <span class="billing-token-bar-value">${_formatCompact(totalTokens)}</span>
             </div>
             <div class="billing-token-bar-track">
-              <div class="billing-token-bar-fill billing-bar-cache-read" style="width: ${_getTokenPercent('cache_read')}%"></div>
+              <div class="billing-token-bar-fill billing-bar-total" style="width: 100%"></div>
             </div>
           </div>
           <div class="billing-token-bar-item">
             <div class="billing-token-bar-header">
-              <span class="billing-token-bar-label">${I18n.t("billing.inputCacheMiss") || "Input (Cache Miss)"}</span>
-              <span class="billing-token-bar-value">${_formatCompact(_summary.prompt_tokens)}</span>
+              <span class="billing-token-bar-label">${I18n.t("billing.inputCacheHit") || "Input (Hit)"}</span>
+              <span class="billing-token-bar-value">${_formatCompact(cacheReadTokens)}</span>
             </div>
             <div class="billing-token-bar-track">
-              <div class="billing-token-bar-fill billing-bar-prompt" style="width: ${_getTokenPercent('prompt')}%"></div>
+              <div class="billing-token-bar-fill billing-bar-cache-read" style="width: ${_getTokenPercent(cacheReadTokens, totalTokens)}%"></div>
+            </div>
+          </div>
+          <div class="billing-token-bar-item">
+            <div class="billing-token-bar-header">
+              <span class="billing-token-bar-label">${I18n.t("billing.inputCacheMiss") || "Input (Miss)"}</span>
+              <span class="billing-token-bar-value">${_formatCompact(cacheMissTokens)}</span>
+            </div>
+            <div class="billing-token-bar-track">
+              <div class="billing-token-bar-fill billing-bar-cache-miss" style="width: ${_getTokenPercent(cacheMissTokens, totalTokens)}%"></div>
             </div>
           </div>
           <div class="billing-token-bar-item">
             <div class="billing-token-bar-header">
               <span class="billing-token-bar-label">${I18n.t("billing.output") || "Output"}</span>
-              <span class="billing-token-bar-value">${_formatCompact(_summary.completion_tokens)}</span>
+              <span class="billing-token-bar-value">${_formatCompact(completionTokens)}</span>
             </div>
             <div class="billing-token-bar-track">
-              <div class="billing-token-bar-fill billing-bar-completion" style="width: ${_getTokenPercent('completion')}%"></div>
+              <div class="billing-token-bar-fill billing-bar-completion" style="width: ${_getTokenPercent(completionTokens, totalTokens)}%"></div>
             </div>
           </div>
         </div>
@@ -369,9 +398,8 @@ const Billing = (() => {
     `;
   }
 
-  function _getTokenPercent(type) {
-    const total = _summary.total_tokens || 1;
-    const value = _summary[type + '_tokens'] || 0;
+  function _getTokenPercent(value, total) {
+    if (!total || total === 0) return 0;
     return Math.min((value / total) * 100, 100).toFixed(1);
   }
 
@@ -427,9 +455,8 @@ const Billing = (() => {
 
     const recentDays = _daily.slice(-14);
     // Max values for scaling
-    const maxInput = Math.max(...recentDays.map(d => (d.prompt_tokens || 0) + (d.cache_read_tokens || 0)), 1);
-    const maxOutput = Math.max(...recentDays.map(d => d.completion_tokens || 0), 1);
-    const maxVal = Math.max(maxInput, maxOutput);
+    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);
 
     // Chart height in pixels
     const chartHeight = 120;
@@ -437,9 +464,10 @@ const Billing = (() => {
     // 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 cacheMiss = d.prompt_tokens || 0;           // 未命中缓存（实际发送的prompt）
+      const totalPrompt = d.prompt_tokens || 0;         // 全部输入token
+      const cacheMiss = totalPrompt - cacheHit;         // 未命中缓存 = 全部输入 - 命中
       const output = d.completion_tokens || 0;
-      const totalInput = cacheHit + cacheMiss;
+      const totalInput = totalPrompt;
       const totalTokens = totalInput + output;
 
       // Calculate heights in pixels
@@ -471,13 +499,17 @@ const Billing = (() => {
         <div class="billing-chart-header">
           <h4>${I18n.t("billing.dailyUsage") || "Usage Details"}</h4>
           <div class="billing-chart-legends">
+            <span class="billing-chart-legend">
+              <span class="billing-legend-dot billing-legend-total"></span>
+              ${I18n.t("billing.totalTokens") || "Total Tokens"}
+            </span>
             <span class="billing-chart-legend">
               <span class="billing-legend-dot billing-legend-cache-hit"></span>
-              ${I18n.t("billing.inputCacheHit") || "Input (Cache Hit)"}
+              ${I18n.t("billing.inputCacheHit") || "Input (Hit)"}
             </span>
             <span class="billing-chart-legend">
               <span class="billing-legend-dot billing-legend-cache-miss"></span>
-              ${I18n.t("billing.inputCacheMiss") || "Input (Cache Miss)"}
+              ${I18n.t("billing.inputCacheMiss") || "Input (Miss)"}
             </span>
             <span class="billing-chart-legend">
               <span class="billing-legend-dot billing-legend-output"></span>
@@ -493,6 +525,69 @@ const Billing = (() => {
     `;
   }
 
+  function _renderSessionList() {
+    if (!_sessions || _sessions.length === 0) {
+      return `
+        <div class="billing-section 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 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 totalTokens = s.total_tokens || 0;
+      const promptTokens = s.prompt_tokens || 0;
+      const cacheHit = s.cache_read_tokens || 0;
+      const cacheMiss = promptTokens - cacheHit;
+      const completionTokens = s.completion_tokens || 0;
+      const requests = s.requests || 0;
+      const models = (s.models || []).join(", ");
+      const lastRequest = s.last_request ? new Date(s.last_request).toLocaleString() : "-";
+      const rowClass = isDeleted ? "billing-session-row billing-session-deleted" : "billing-session-row";
+
+      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)}">
+            <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-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>
+      `;
+    }).join("");
+
+    return `
+      <div class="billing-section billing-sessions-section">
+        <h3>${I18n.t("billing.sessions") || "Sessions"}</h3>
+        <div class="billing-sessions-header">
+          <span class="billing-cell billing-cell-index">#</span>
+          <span class="billing-cell billing-cell-session">${I18n.t("billing.sessionId") || "Session"}</span>
+          <span class="billing-cell billing-cell-number">${I18n.t("billing.headerTotal") || "总消耗"}</span>
+          <span class="billing-cell billing-cell-number">${I18n.t("billing.headerHit") || "命中"}</span>
+          <span class="billing-cell billing-cell-number">${I18n.t("billing.headerMiss") || "未命中"}</span>
+          <span class="billing-cell billing-cell-number">${I18n.t("billing.headerOutput") || "输出"}</span>
+          <span class="billing-cell billing-cell-cost">${I18n.t("billing.cost") || "Cost"}</span>
+          <span class="billing-cell billing-cell-time">${I18n.t("billing.lastRequest") || "Time"}</span>
+        </div>
+        <div class="billing-sessions-list">
+          ${rows}
+        </div>
+      </div>
+    `;
+  }
+
   // ── Helpers ─────────────────────────────────────────────────────────────────
 
   function _formatCost(cost) {