From 018053db193ec56dcb6c34c312d92cb03d95542b Mon Sep 17 00:00:00 2001
From: Desmond Zhang <zjjsmail@gmail.com>
Date: Sat, 2 May 2026 10:36:33 +1000
Subject: [PATCH] feat(usage): expanded daily stats with detailed token
 breakdown (#385)

* feat(usage): expanded daily stats with detailed token breakdown

* feat(usage): separate cache read and cache write in daily trend table
---
 packages/client/src/api/hermes/sessions.ts    |  7 ++-
 .../components/hermes/usage/DailyTrend.vue    | 63 +++++++++++--------
 packages/client/src/i18n/locales/de.ts        |  2 +
 packages/client/src/i18n/locales/en.ts        |  2 +
 packages/client/src/i18n/locales/es.ts        |  4 +-
 packages/client/src/i18n/locales/fr.ts        |  2 +
 packages/client/src/i18n/locales/ja.ts        |  2 +
 packages/client/src/i18n/locales/ko.ts        |  2 +
 packages/client/src/i18n/locales/pt.ts        |  2 +
 packages/client/src/i18n/locales/zh.ts        |  2 +
 packages/client/src/stores/hermes/usage.ts    |  7 ++-
 .../server/src/controllers/hermes/sessions.ts |  9 ++-
 packages/server/src/db/hermes/sessions-db.ts  | 13 ++--
 packages/server/src/db/hermes/usage-store.ts  | 17 +++--
 14 files changed, 88 insertions(+), 46 deletions(-)

diff --git a/packages/client/src/api/hermes/sessions.ts b/packages/client/src/api/hermes/sessions.ts
index 785f0aa..e122a40 100644
--- a/packages/client/src/api/hermes/sessions.ts
+++ b/packages/client/src/api/hermes/sessions.ts
@@ -153,9 +153,12 @@ export interface UsageStatsResponse {
   }>
   daily_usage: Array<{
     date: string
-    tokens: number
-    cache: number
+    input_tokens: number
+    output_tokens: number
+    cache_read_tokens: number
+    cache_write_tokens: number
     sessions: number
+    errors: number
     cost: number
   }>
 }
diff --git a/packages/client/src/components/hermes/usage/DailyTrend.vue b/packages/client/src/components/hermes/usage/DailyTrend.vue
index 630dd8f..44fdf19 100644
--- a/packages/client/src/components/hermes/usage/DailyTrend.vue
+++ b/packages/client/src/components/hermes/usage/DailyTrend.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useUsageStore } from '@/stores/hermes/usage'
 
@@ -17,13 +18,15 @@ function formatCost(n: number): string {
   return '$' + n.toFixed(2)
 }
 
-const maxTokens = computed(() =>
-  Math.max(...usageStore.dailyUsage.map(d => d.tokens), 1),
-)
-</script>
+function cacheHitRate(d: { input_tokens: number; cache_read_tokens: number }): string {
+  const total = d.input_tokens + d.cache_read_tokens
+  if (total === 0) return '--'
+  return ((d.cache_read_tokens / total) * 100).toFixed(1) + '%'
+}
 
-<script lang="ts">
-import { computed } from 'vue'
+const maxTokens = computed(() =>
+  Math.max(...usageStore.dailyUsage.map(d => d.input_tokens + d.output_tokens), 1),
+)
 </script>
 
 <template>
@@ -39,13 +42,19 @@ import { computed } from 'vue'
         <div class="bar-track">
           <div
             class="bar-fill"
-            :style="{ height: (d.tokens / maxTokens * 100) + '%' }"
+            :style="{
+              height: ((d.input_tokens + d.output_tokens) / maxTokens * 100) + '%',
+              '--output-pct': (d.output_tokens / Math.max(d.input_tokens + d.output_tokens, 1) * 100) + '%',
+            }"
           />
         </div>
         <div class="bar-tooltip">
           <div class="tooltip-date">{{ d.date }}</div>
-          <div class="tooltip-row">{{ t('usage.tokens') }}: {{ formatTokens(d.tokens) }}</div>
-          <div class="tooltip-row">{{ t('usage.cache') }}: {{ formatTokens(d.cache) }}</div>
+          <div class="tooltip-row">{{ t('usage.inputTokens') }}: {{ formatTokens(d.input_tokens) }}</div>
+          <div class="tooltip-row">{{ t('usage.outputTokens') }}: {{ formatTokens(d.output_tokens) }}</div>
+          <div class="tooltip-row">{{ t('usage.cacheRead') }}: {{ formatTokens(d.cache_read_tokens) }}</div>
+          <div class="tooltip-row">{{ t('usage.cacheWrite') }}: {{ formatTokens(d.cache_write_tokens) }}</div>
+          <div class="tooltip-row">{{ t('usage.cacheHitRate') }}: {{ cacheHitRate(d) }}</div>
           <div class="tooltip-row">{{ t('usage.sessions') }}: {{ d.sessions }}</div>
           <div class="tooltip-row">{{ t('usage.cost') }}: {{ formatCost(d.cost) }}</div>
         </div>
@@ -61,8 +70,11 @@ import { computed } from 'vue'
         <thead>
           <tr>
             <th>{{ t('usage.date') }}</th>
-            <th>{{ t('usage.tokens') }}</th>
-            <th>{{ t('usage.cache') }}</th>
+            <th>{{ t('usage.inputTokens') }}</th>
+            <th>{{ t('usage.outputTokens') }}</th>
+            <th>{{ t('usage.cacheRead') }}</th>
+            <th>{{ t('usage.cacheWrite') }}</th>
+            <th>{{ t('usage.cacheHitRate') }}</th>
             <th>{{ t('usage.sessions') }}</th>
             <th>{{ t('usage.cost') }}</th>
           </tr>
@@ -70,8 +82,11 @@ import { computed } from 'vue'
         <tbody>
           <tr v-for="d in [...usageStore.dailyUsage].reverse().slice(0, 30)" :key="d.date">
             <td>{{ d.date }}</td>
-            <td>{{ formatTokens(d.tokens) }}</td>
-            <td>{{ formatTokens(d.cache) }}</td>
+            <td>{{ formatTokens(d.input_tokens) }}</td>
+            <td>{{ formatTokens(d.output_tokens) }}</td>
+            <td>{{ formatTokens(d.cache_read_tokens) }}</td>
+            <td>{{ formatTokens(d.cache_write_tokens) }}</td>
+            <td>{{ cacheHitRate(d) }}</td>
             <td>{{ d.sessions }}</td>
             <td>{{ formatCost(d.cost) }}</td>
           </tr>
@@ -110,6 +125,7 @@ import { computed } from 'vue'
   display: flex;
   flex-direction: column;
   align-items: center;
+  position: relative;
 }
 
 .bar-track {
@@ -123,18 +139,17 @@ import { computed } from 'vue'
 
 .bar-fill {
   width: 100%;
-  background: $text-primary;
   border-radius: 2px 2px 0 0;
   min-height: 0;
   transition: height 0.3s ease;
-
-  .dark & {
-    background: #66bb6a;
-  }
-}
-
-.bar-col {
-  position: relative;
+  /* Bottom = output (teal), top = input (blue) */
+  background: linear-gradient(
+    to top,
+    #26a69a 0%,
+    #26a69a var(--output-pct, 50%),
+    #5c6bc0 var(--output-pct, 50%),
+    #5c6bc0 100%
+  );
 }
 
 .bar-tooltip {
@@ -178,10 +193,6 @@ import { computed } from 'vue'
   line-height: 1.5;
 }
 
-.bar-label {
-  display: none;
-}
-
 .bar-dates {
   display: flex;
   justify-content: space-between;
diff --git a/packages/client/src/i18n/locales/de.ts b/packages/client/src/i18n/locales/de.ts
index 4e2bb87..e34029d 100644
--- a/packages/client/src/i18n/locales/de.ts
+++ b/packages/client/src/i18n/locales/de.ts
@@ -558,6 +558,8 @@ jobTriggered: 'Job ausgelost',
     date: 'Datum',
     tokens: 'Tokens',
     cache: 'Cache',
+    cacheRead: 'Cache Read',
+    cacheWrite: 'Cache Write',
     sessions: 'Sitzungen',
     cost: 'Kosten',
     noData: 'Keine Nutzungsdaten',
diff --git a/packages/client/src/i18n/locales/en.ts b/packages/client/src/i18n/locales/en.ts
index ef6bbff..690a707 100644
--- a/packages/client/src/i18n/locales/en.ts
+++ b/packages/client/src/i18n/locales/en.ts
@@ -666,6 +666,8 @@ export default {
     date: 'Date',
     tokens: 'Tokens',
     cache: 'Cache',
+    cacheRead: 'Cache Read',
+    cacheWrite: 'Cache Write',
     sessions: 'Sessions',
     cost: 'Cost',
     noData: 'No usage data',
diff --git a/packages/client/src/i18n/locales/es.ts b/packages/client/src/i18n/locales/es.ts
index 96ce598..eb0f10b 100644
--- a/packages/client/src/i18n/locales/es.ts
+++ b/packages/client/src/i18n/locales/es.ts
@@ -557,7 +557,9 @@ jobTriggered: 'Job ejecutado',
     dailyTrend: 'Uso diario (ultimos 30 dias)',
     date: 'Fecha',
     tokens: 'Tokens',
-    cache: 'Cache',
+    cache: 'Caché',
+    cacheRead: 'Cache Read',
+    cacheWrite: 'Cache Write',
     sessions: 'Sesiones',
     cost: 'Costo',
     noData: 'Sin datos de uso',
diff --git a/packages/client/src/i18n/locales/fr.ts b/packages/client/src/i18n/locales/fr.ts
index ba2cae3..61de30a 100644
--- a/packages/client/src/i18n/locales/fr.ts
+++ b/packages/client/src/i18n/locales/fr.ts
@@ -558,6 +558,8 @@ jobTriggered: 'Job declenche',
     date: 'Date',
     tokens: 'Jetons',
     cache: 'Cache',
+    cacheRead: 'Cache Read',
+    cacheWrite: 'Cache Write',
     sessions: 'Sessions',
     cost: 'Cout',
     noData: 'Aucune donnee d\'utilisation',
diff --git a/packages/client/src/i18n/locales/ja.ts b/packages/client/src/i18n/locales/ja.ts
index 3466a5e..6e4a93d 100644
--- a/packages/client/src/i18n/locales/ja.ts
+++ b/packages/client/src/i18n/locales/ja.ts
@@ -558,6 +558,8 @@ export default {
     date: '日付',
     tokens: 'トークン',
     cache: 'キャッシュ',
+    cacheRead: 'キャッシュ読み取り',
+    cacheWrite: 'キャッシュ書き込み',
     sessions: 'セッション',
     cost: 'コスト',
     noData: '使用データがありません',
diff --git a/packages/client/src/i18n/locales/ko.ts b/packages/client/src/i18n/locales/ko.ts
index 472f7ed..54c25ae 100644
--- a/packages/client/src/i18n/locales/ko.ts
+++ b/packages/client/src/i18n/locales/ko.ts
@@ -558,6 +558,8 @@ export default {
     date: '날짜',
     tokens: '토큰',
     cache: '캐시',
+    cacheRead: '캐시 읽기',
+    cacheWrite: '캐시 쓰기',
     sessions: '세션',
     cost: '비용',
     noData: '사용량 데이터 없음',
diff --git a/packages/client/src/i18n/locales/pt.ts b/packages/client/src/i18n/locales/pt.ts
index 159b385..99c2108 100644
--- a/packages/client/src/i18n/locales/pt.ts
+++ b/packages/client/src/i18n/locales/pt.ts
@@ -558,6 +558,8 @@ jobTriggered: 'Job acionado',
     date: 'Data',
     tokens: 'Tokens',
     cache: 'Cache',
+    cacheRead: 'Cache Read',
+    cacheWrite: 'Cache Write',
     sessions: 'Sessoes',
     cost: 'Custo',
     noData: 'Sem dados de uso',
diff --git a/packages/client/src/i18n/locales/zh.ts b/packages/client/src/i18n/locales/zh.ts
index 1a663ed..6c26cf3 100644
--- a/packages/client/src/i18n/locales/zh.ts
+++ b/packages/client/src/i18n/locales/zh.ts
@@ -668,6 +668,8 @@ export default {
     date: '日期',
     tokens: 'Token',
     cache: '缓存',
+    cacheRead: '缓存读取',
+    cacheWrite: '缓存写入',
     sessions: '会话',
     cost: '费用',
     noData: '暂无用量数据',
diff --git a/packages/client/src/stores/hermes/usage.ts b/packages/client/src/stores/hermes/usage.ts
index 501c9c6..9121ece 100644
--- a/packages/client/src/stores/hermes/usage.ts
+++ b/packages/client/src/stores/hermes/usage.ts
@@ -4,9 +4,12 @@ import { computed, ref } from 'vue'
 
 interface DailyUsage {
   date: string
-  tokens: number
-  cache: number
+  input_tokens: number
+  output_tokens: number
+  cache_read_tokens: number
+  cache_write_tokens: number
   sessions: number
+  errors: number
   cost: number
 }
 
diff --git a/packages/server/src/controllers/hermes/sessions.ts b/packages/server/src/controllers/hermes/sessions.ts
index ac00737..7091e5b 100644
--- a/packages/server/src/controllers/hermes/sessions.ts
+++ b/packages/server/src/controllers/hermes/sessions.ts
@@ -409,15 +409,14 @@ export async function usageStats(ctx: any) {
     const d = new Date(now)
     d.setDate(d.getDate() - i)
     const key = d.toISOString().slice(0, 10)
-    dayMap.set(key, { date: key, tokens: 0, cache: 0, sessions: 0, cost: 0 })
+    dayMap.set(key, { date: key, input_tokens: 0, output_tokens: 0, cache_read_tokens: 0, cache_write_tokens: 0, sessions: 0, errors: 0, cost: 0 })
   }
   for (const d of [...local.by_day, ...hermes.by_day]) {
     const existing = dayMap.get(d.date)
     if (existing) {
-      existing.tokens += d.tokens
-      existing.cache += d.cache
-      existing.sessions += d.sessions
-      existing.cost += d.cost
+      existing.input_tokens += d.input_tokens; existing.output_tokens += d.output_tokens
+      existing.cache_read_tokens += d.cache_read_tokens; existing.cache_write_tokens += d.cache_write_tokens
+      existing.sessions += d.sessions; existing.errors += d.errors; existing.cost += d.cost
     }
   }
 
diff --git a/packages/server/src/db/hermes/sessions-db.ts b/packages/server/src/db/hermes/sessions-db.ts
index ae9bed2..c81e813 100644
--- a/packages/server/src/db/hermes/sessions-db.ts
+++ b/packages/server/src/db/hermes/sessions-db.ts
@@ -783,8 +783,10 @@ export async function getUsageStatsFromDb(
     const byDay = db.prepare(`
       SELECT
         date(started_at, 'unixepoch') AS date,
-        COALESCE(SUM(COALESCE(input_tokens, 0) + COALESCE(output_tokens, 0)), 0) AS tokens,
-        COALESCE(SUM(cache_read_tokens), 0) AS cache,
+        COALESCE(SUM(input_tokens), 0) AS input_tokens,
+        COALESCE(SUM(output_tokens), 0) AS output_tokens,
+        COALESCE(SUM(cache_read_tokens), 0) AS cache_read_tokens,
+        COALESCE(SUM(cache_write_tokens), 0) AS cache_write_tokens,
         COUNT(*) AS sessions,
         COALESCE(SUM(COALESCE(actual_cost_usd, estimated_cost_usd, 0)), 0) AS cost
       FROM sessions
@@ -793,9 +795,12 @@ export async function getUsageStatsFromDb(
       ORDER BY date ASC
     `).all(since).map(row => ({
       date: String(row.date || ''),
-      tokens: normalizeNumber(row.tokens),
-      cache: normalizeNumber(row.cache),
+      input_tokens: normalizeNumber(row.input_tokens),
+      output_tokens: normalizeNumber(row.output_tokens),
+      cache_read_tokens: normalizeNumber(row.cache_read_tokens),
+      cache_write_tokens: normalizeNumber(row.cache_write_tokens),
       sessions: normalizeNumber(row.sessions),
+      errors: 0,
       cost: normalizeNumber(row.cost),
     }))
 
diff --git a/packages/server/src/db/hermes/usage-store.ts b/packages/server/src/db/hermes/usage-store.ts
index 9859e7d..4420181 100644
--- a/packages/server/src/db/hermes/usage-store.ts
+++ b/packages/server/src/db/hermes/usage-store.ts
@@ -137,9 +137,12 @@ export interface UsageStatsModelRow {
 
 export interface UsageStatsDailyRow {
   date: string
-  tokens: number
-  cache: number
+  input_tokens: number
+  output_tokens: number
+  cache_read_tokens: number
+  cache_write_tokens: number
   sessions: number
+  errors: number
   cost: number
 }
 
@@ -200,14 +203,16 @@ export function getLocalUsageStats(profile?: string, days = 30): LocalUsageStats
 
   const byDay = db.prepare(`
     SELECT DATE(created_at / 1000, 'unixepoch') as date,
-      COALESCE(SUM(input_tokens + output_tokens),0) as tokens,
-      COALESCE(SUM(cache_read_tokens),0) as cache,
+      COALESCE(SUM(input_tokens),0) as input_tokens,
+      COALESCE(SUM(output_tokens),0) as output_tokens,
+      COALESCE(SUM(cache_read_tokens),0) as cache_read_tokens,
+      COALESCE(SUM(cache_write_tokens),0) as cache_write_tokens,
       COUNT(DISTINCT session_id) as sessions
     FROM ${TABLE}
     ${whereClause}
     GROUP BY date
     ORDER BY date
-  `).all(...params) as Array<{ date: string; tokens: number; cache: number; sessions: number }>
+  `).all(...params) as Array<{ date: string; input_tokens: number; output_tokens: number; cache_read_tokens: number; cache_write_tokens: number; sessions: number }>
 
   return {
     input_tokens: totals.input_tokens,
@@ -217,6 +222,6 @@ export function getLocalUsageStats(profile?: string, days = 30): LocalUsageStats
     reasoning_tokens: totals.reasoning_tokens,
     sessions: totals.sessions,
     by_model: byModel,
-    by_day: byDay.map(d => ({ ...d, cost: 0 })),
+    by_day: byDay.map(d => ({ ...d, errors: 0, cost: 0 })),
   }
 }