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/MessageList.vue

@@ -1,13 +1,30 @@
 <script setup lang="ts">
-import { ref, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import MessageItem from './MessageItem.vue'
 import { useChatStore } from '@/stores/chat'
+import thinkingVideo from '@/assets/thinking.mp4'
 
 const chatStore = useChatStore()
 const { t } = useI18n()
 const listRef = ref<HTMLElement>()
 
+const displayMessages = computed(() =>
+  chatStore.messages.filter(m => m.role !== 'tool'),
+)
+
+const currentToolCalls = computed(() => {
+  const msgs = chatStore.messages
+  // Find the last user message index
+  let lastUserIdx = -1
+  for (let i = msgs.length - 1; i >= 0; i--) {
+    if (msgs[i].role === 'user') { lastUserIdx = i; break }
+  }
+  // Only tool calls after the last user message, newest on top
+  const tools = msgs.filter((m, i) => m.role === 'tool' && i > lastUserIdx)
+  return [...tools].reverse()
+})
+
 function scrollToBottom() {
   nextTick(() => {
     if (listRef.value) {
@@ -19,6 +36,7 @@ function scrollToBottom() {
 watch(() => chatStore.messages.length, scrollToBottom)
 watch(() => chatStore.messages[chatStore.messages.length - 1]?.content, scrollToBottom)
 watch(() => chatStore.isStreaming, (v) => { if (v) scrollToBottom() })
+watch(currentToolCalls, scrollToBottom)
 </script>
 
 <template>
@@ -28,13 +46,38 @@ watch(() => chatStore.isStreaming, (v) => { if (v) scrollToBottom() })
       <p>{{ t('chat.emptyState') }}</p>
     </div>
     <MessageItem
-      v-for="msg in chatStore.messages"
+      v-for="msg in displayMessages"
       :key="msg.id"
       :message="msg"
     />
-    <div v-if="chatStore.isStreaming" class="streaming-indicator">
-      <span></span><span></span><span></span>
-    </div>
+    <Transition name="fade">
+      <div v-if="chatStore.isStreaming" class="streaming-indicator">
+        <video :src="thinkingVideo" autoplay loop muted playsinline class="thinking-video" />
+        <div v-if="currentToolCalls.length > 0" class="tool-calls-panel">
+          <div
+            v-for="tc in currentToolCalls"
+            :key="tc.id"
+            class="tool-call-item"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              class="tool-call-icon"
+            >
+              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+            </svg>
+            <span class="tool-call-name">{{ tc.toolName }}</span>
+            <span v-if="tc.toolPreview" class="tool-call-preview">{{ tc.toolPreview }}</span>
+            <span v-if="tc.toolStatus === 'running'" class="tool-call-spinner"></span>
+            <span v-if="tc.toolStatus === 'error'" class="tool-call-error">{{ t('chat.error') }}</span>
+          </div>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -48,6 +91,7 @@ watch(() => chatStore.isStreaming, (v) => { if (v) scrollToBottom() })
   display: flex;
   flex-direction: column;
   gap: 16px;
+  background-color: #ffffff;
 }
 
 .empty-state {
@@ -70,27 +114,91 @@ watch(() => chatStore.isStreaming, (v) => { if (v) scrollToBottom() })
   }
 }
 
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.4s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 .streaming-indicator {
   display: flex;
-  align-items: center;
-  gap: 4px;
+  align-items: flex-start;
+  gap: 12px;
   padding: 4px;
-  color: $text-muted;
 
-  span {
-    width: 5px;
-    height: 5px;
-    background-color: $text-muted;
-    border-radius: 50%;
-    animation: stream-pulse 1.4s infinite ease-in-out;
-
-    &:nth-child(2) { animation-delay: 0.2s; }
-    &:nth-child(3) { animation-delay: 0.4s; }
+  .thinking-video {
+    width: 120px;
+    height: 120px;
+    border-radius: $radius-md;
+    object-fit: contain;
+    flex-shrink: 0;
   }
 }
 
-@keyframes stream-pulse {
-  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
-  40% { opacity: 1; transform: scale(1); }
+.tool-calls-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 120px;
+  overflow-y: auto;
+  padding-top: 4px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar { display: none; }
+}
+
+.tool-call-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: $text-secondary;
+  padding: 3px 8px;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: $radius-sm;
+
+  .tool-call-icon {
+    flex-shrink: 0;
+    color: $text-muted;
+  }
+
+  .tool-call-name {
+    font-family: $font-code;
+    flex-shrink: 0;
+  }
+
+  .tool-call-preview {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 300px;
+    color: $text-muted;
+  }
+}
+
+.tool-call-spinner {
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid $text-muted;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+.tool-call-error {
+  font-size: 9px;
+  color: $error;
+  background: rgba($error, 0.08);
+  padding: 0 4px;
+  border-radius: 3px;
+  line-height: 14px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 </style>