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
}