feat: add usage statistics page, CLI improvements, and UI enhancements

- Add Usage Stats page with token breakdown, model distribution, and 30-day trend
- Pass through cache/cost token fields in BFF (cache_read/write_tokens, reasoning_tokens, actual_cost_usd)
- Add CLI commands: -v/--version, -h/--help, update/upgrade with auto-restart
- Auto-open browser on startup, auto-kill port conflicts (cross-platform)
- Validate all api_server config fields on startup (enabled, host, port, key, cors_origins)
- Add streaming thinking video animation with tool calls panel
- Add context token usage display (used / total) in chat header
- Sidebar: white logo area with shadow, dance video beside logo (canvas seamless loop)
- Fix sidebar nav scroll (app-main overflow-y: auto)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/usage/StatCards.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useUsageStore } from '@/stores/usage'
+
+const { t } = useI18n()
+const usageStore = useUsageStore()
+
+function formatTokens(n: number): string {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M'
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'K'
+  return String(n)
+}
+
+function formatCost(n: number): string {
+  if (n === 0) return '$0.00'
+  if (n < 0.01) return '<$0.01'
+  return '$' + n.toFixed(2)
+}
+</script>
+
+<template>
+  <div class="stat-cards">
+    <div class="stat-card">
+      <div class="stat-label">{{ t('usage.totalTokens') }}</div>
+      <div class="stat-value">{{ formatTokens(usageStore.totalTokens) }}</div>
+      <div class="stat-sub">
+        {{ formatTokens(usageStore.totalInputTokens) }} {{ t('usage.inputTokens') }} /
+        {{ formatTokens(usageStore.totalOutputTokens) }} {{ t('usage.outputTokens') }}
+      </div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">{{ t('usage.totalSessions') }}</div>
+      <div class="stat-value">{{ usageStore.totalSessions }}</div>
+      <div class="stat-sub">{{ t('usage.avgPerDay', { n: usageStore.avgSessionsPerDay.toFixed(1) }) }}</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">{{ t('usage.estimatedCost') }}</div>
+      <div class="stat-value">{{ formatCost(usageStore.estimatedCost) }}</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">{{ t('usage.cacheHitRate') }}</div>
+      <div class="stat-value">{{ usageStore.cacheHitRate !== null ? usageStore.cacheHitRate.toFixed(1) + '%' : '--' }}</div>
+      <div class="stat-sub" v-if="usageStore.cacheHitRate !== null">
+        {{ formatTokens(usageStore.totalCacheTokens) }} tokens
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as *;
+
+.stat-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  background: $bg-card;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  padding: 16px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: $text-muted;
+  margin-bottom: 6px;
+}
+
+.stat-value {
+  font-size: 22px;
+  font-weight: 600;
+  color: $text-primary;
+  line-height: 1.2;
+}
+
+.stat-sub {
+  font-size: 11px;
+  color: $text-muted;
+  margin-top: 4px;
+}
+
+@media (max-width: 768px) {
+  .stat-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>