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/chat/ChatPanel.vue

@@ -109,6 +109,57 @@ const activeSessionTitle = computed(() =>
   chatStore.activeSession?.title || t('chat.newChat'),
 )
 
+const totalTokens = computed(() => {
+  const input = chatStore.activeSession?.inputTokens ?? 0
+  const output = chatStore.activeSession?.outputTokens ?? 0
+  return input + output
+})
+
+const MODEL_CONTEXT: Record<string, number> = {
+  'claude-opus-4': 200000,
+  'claude-sonnet-4': 200000,
+  'claude-haiku-4': 200000,
+  'claude-3.5-sonnet': 200000,
+  'claude-3.5-haiku': 200000,
+  'claude-3-opus': 200000,
+  'claude-3-sonnet': 200000,
+  'claude-3-haiku': 200000,
+  'gpt-4o': 128000,
+  'gpt-4o-mini': 128000,
+  'gpt-4-turbo': 128000,
+  'gpt-4': 8192,
+  'gpt-3.5-turbo': 16385,
+  'o1': 200000,
+  'o1-mini': 128000,
+  'o3': 200000,
+  'o3-mini': 200000,
+  'o4-mini': 200000,
+  'deepseek-chat': 65536,
+  'deepseek-reasoner': 65536,
+  'gemini-2.5-pro': 1000000,
+  'gemini-2.5-flash': 1000000,
+  'gemini-2.0-flash': 1000000,
+  'glm-4-plus': 128000,
+  'glm-4': 128000,
+  'qwen-max': 128000,
+  'qwen-plus': 128000,
+  'qwen-turbo': 128000,
+}
+
+const contextWindow = computed(() => {
+  const model = chatStore.activeSession?.model || ''
+  for (const [key, val] of Object.entries(MODEL_CONTEXT)) {
+    if (model.includes(key)) return val
+  }
+  return null
+})
+
+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)
+}
+
 const activeSessionSource = computed(() =>
   chatStore.activeSession?.source || '',
 )
@@ -310,6 +361,9 @@ async function handleRenameConfirm() {
       </header>
 
       <MessageList />
+      <div v-if="contextWindow !== null" class="context-info">
+        <span>{{ formatTokens(totalTokens) }} / {{ formatTokens(contextWindow) }}</span>
+      </div>
       <ChatInput />
     </div>
   </div>
@@ -542,4 +596,11 @@ async function handleRenameConfirm() {
   gap: 4px;
   flex-shrink: 0;
 }
+
+.context-info {
+  padding: 0 20px 4px;
+  font-size: 11px;
+  color: $text-muted;
+  flex-shrink: 0;
+}
 </style>