admin/Hermes-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

* feat(usage): separate cache read and cache write in daily trend table
This commit is contained in:
Desmond Zhang
2026-05-02 10:36:33 +10:00
committed by GitHub
parent acf4e225e6
commit 018053db19
14 changed files with 88 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/client/src/api/hermes/sessions.ts
+5 -2
View File
@@ -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
}>
}
packages/client/src/components/hermes/usage/DailyTrend.vue
+37 -26
View File
@@ -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;
packages/client/src/i18n/locales/de.ts
+2
View File
@@ -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',
packages/client/src/i18n/locales/en.ts
+2
View File
@@ -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',
packages/client/src/i18n/locales/es.ts
+3 -1
View File
@@ -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',
packages/client/src/i18n/locales/fr.ts
+2
View File
@@ -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',
packages/client/src/i18n/locales/ja.ts
+2
View File
@@ -558,6 +558,8 @@ export default {
date: '日付',
tokens: 'トークン',
cache: 'キャッシュ',
cacheRead: 'キャッシュ読み取り',
cacheWrite: 'キャッシュ書き込み',
sessions: 'セッション',
cost: 'コスト',
noData: '使用データがありません',
packages/client/src/i18n/locales/ko.ts
+2
View File
@@ -558,6 +558,8 @@ export default {
date: '날짜',
tokens: '토큰',
cache: '캐시',
cacheRead: '캐시 읽기',
cacheWrite: '캐시 쓰기',
sessions: '세션',
cost: '비용',
noData: '사용량 데이터 없음',
packages/client/src/i18n/locales/pt.ts
+2
View File
@@ -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',
packages/client/src/i18n/locales/zh.ts
+2
View File
@@ -668,6 +668,8 @@ export default {
date: '日期',
tokens: 'Token',
cache: '缓存',
cacheRead: '缓存读取',
cacheWrite: '缓存写入',
sessions: '会话',
cost: '费用',
noData: '暂无用量数据',
packages/client/src/stores/hermes/usage.ts
+5 -2
View File
@@ -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
}
packages/server/src/controllers/hermes/sessions.ts
+4 -5
View File
@@ -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
}
}
packages/server/src/db/hermes/sessions-db.ts
+9 -4
View File
@@ -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),
}))
packages/server/src/db/hermes/usage-store.ts
+11 -6
View File
@@ -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 })),
}
}