feat: enhance usage analytics dashboard (#666)

- visualize input, output, and cache token segments in usage charts
- add usage period selector for 7d, 30d, 90d, and 365d
- guard usage stats against stale overlapping period requests
- normalize blank model usage into unknown buckets
- add client and server coverage for usage analytics behavior

packages/client/src/views/hermes/UsageView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { NButton } from 'naive-ui'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useUsageStore } from '@/stores/hermes/usage'
 import StatCards from '@/components/hermes/usage/StatCards.vue'
@@ -10,8 +10,22 @@ import DailyTrend from '@/components/hermes/usage/DailyTrend.vue'
 const { t } = useI18n()
 const usageStore = useUsageStore()
 
+const periodOptions = [
+  { label: '7d', days: 7 },
+  { label: '30d', days: 30 },
+  { label: '90d', days: 90 },
+  { label: '365d', days: 365 },
+] as const
+
+const selectedPeriod = ref(30)
+
+function loadUsage(days = selectedPeriod.value) {
+  selectedPeriod.value = days
+  usageStore.loadSessions(days)
+}
+
 onMounted(() => {
-  usageStore.loadSessions()
+  loadUsage(30)
 })
 </script>
 
@@ -19,9 +33,26 @@ onMounted(() => {
   <div class="usage-view">
     <header class="page-header">
       <h2 class="header-title">{{ t('usage.title') }}</h2>
-      <NButton size="small" quaternary :loading="usageStore.isLoading" @click="usageStore.loadSessions()">
-        {{ t('usage.refresh') }}
-      </NButton>
+      <div class="usage-toolbar">
+        <div class="period-selector" role="group" aria-label="Usage statistics period">
+          <NButton
+            v-for="option in periodOptions"
+            :key="option.days"
+            class="period-option"
+            size="small"
+            :type="selectedPeriod === option.days ? 'primary' : 'default'"
+            :secondary="selectedPeriod === option.days"
+            :quaternary="selectedPeriod !== option.days"
+            :aria-pressed="selectedPeriod === option.days"
+            @click="loadUsage(option.days)"
+          >
+            {{ option.label }}
+          </NButton>
+        </div>
+        <NButton class="refresh-button" size="small" quaternary :loading="usageStore.isLoading" @click="loadUsage()">
+          {{ t('usage.refresh') }}
+        </NButton>
+      </div>
     </header>
 
     <div class="usage-content">
@@ -51,6 +82,37 @@ onMounted(() => {
   flex-direction: column;
 }
 
+.page-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 21px 20px;
+  border-bottom: 1px solid $border-color;
+}
+
+.header-title {
+  margin: 0;
+  color: $text-primary;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.usage-toolbar,
+.period-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.period-selector {
+  padding: 2px;
+  border: 1px solid $border-light;
+  border-radius: $radius-sm;
+  background: $bg-secondary;
+}
+
 .usage-content {
   flex: 1;
   overflow-y: auto;
@@ -73,4 +135,20 @@ onMounted(() => {
   color: $text-muted;
   font-size: 14px;
 }
+
+@media (max-width: $breakpoint-mobile) {
+  .page-header,
+  .usage-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .usage-toolbar {
+    width: 100%;
+  }
+
+  .period-selector {
+    flex-wrap: wrap;
+  }
+}
 </style>