diff --git a/desktop/package-lock.json b/desktop/package-lock.json
index 62e134f..a306110 100644
--- a/desktop/package-lock.json
+++ b/desktop/package-lock.json
@@ -469,106 +469,6 @@
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/@electron/windows-sign": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmmirror.com/@electron/windows-sign/-/windows-sign-1.2.2.tgz",
-      "integrity": "sha512-dfZeox66AvdPtb2lD8OsIIQh12Tp0GNCRUDfBHIKGpbmopZto2/A8nSpYYLoedPIHpqkeblZ/k8OV0Gy7PYuyQ==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "cross-dirname": "^0.1.0",
-        "debug": "^4.3.4",
-        "fs-extra": "^11.1.1",
-        "minimist": "^1.2.8",
-        "postject": "^1.0.0-alpha.6"
-      },
-      "bin": {
-        "electron-windows-sign": "bin/electron-windows-sign.js"
-      },
-      "engines": {
-        "node": ">=14.14"
-      }
-    },
-    "node_modules/@electron/windows-sign/node_modules/fs-extra": {
-      "version": "11.3.4",
-      "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.3.4.tgz",
-      "integrity": "sha512-CTXd6rk/M3/ULNQj8FBqBWHYBVYybQ3VPBw0xGKFe3tuH7ytT6ACnvzpIQ3UZtB8yvUKC2cXn1a+x+5EVQLovA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14.14"
-      }
-    },
-    "node_modules/@electron/windows-sign/node_modules/jsonfile": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.2.1.tgz",
-      "integrity": "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/@electron/windows-sign/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/@emnapi/core": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmmirror.com/@emnapi/core/-/core-1.10.0.tgz",
-      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.1",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmmirror.com/@emnapi/runtime/-/runtime-1.10.0.tgz",
-      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmmirror.com/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
-      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.9.1",
       "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
@@ -1520,6 +1420,14 @@
         "node": "^20.19.0 || >=22.12.0"
       }
     },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "dev": true,
+      "optional": true
+    },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
       "version": "1.0.0-rc.17",
       "resolved": "https://registry.npmmirror.com/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.17.tgz",
@@ -3089,15 +2997,6 @@
         "buffer": "^5.1.0"
       }
     },
-    "node_modules/cross-dirname": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmmirror.com/cross-dirname/-/cross-dirname-0.1.0.tgz",
-      "integrity": "sha512-+R08/oI0nl3vfPcqftZRpytksBXDzOUveBq/NBVx0sUp1axwzPQrKinNx5yd5sxPu8j1wIy8AfnVQ+5eFdha6Q==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3538,19 +3437,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/electron-builder-squirrel-windows": {
-      "version": "26.8.1",
-      "resolved": "https://registry.npmmirror.com/electron-builder-squirrel-windows/-/electron-builder-squirrel-windows-26.8.1.tgz",
-      "integrity": "sha512-o288fIdgPLHA76eDrFADHPoo7VyGkDCYbLV1GzndaMSAVBoZrGvM9m2IehdcVMzdAZJ2eV9bgyissQXHv5tGzA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "app-builder-lib": "26.8.1",
-        "builder-util": "26.8.1",
-        "electron-winstaller": "5.4.0"
-      }
-    },
     "node_modules/electron-builder/node_modules/fs-extra": {
       "version": "10.1.0",
       "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -3657,44 +3543,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/electron-winstaller": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmmirror.com/electron-winstaller/-/electron-winstaller-5.4.0.tgz",
-      "integrity": "sha512-bO3y10YikuUwUuDUQRM4KfwNkKhnpVO7IPdbsrejwN9/AABJzzTQ4GeHwyzNSrVO+tEH3/Np255a3sVZpZDjvg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@electron/asar": "^3.2.1",
-        "debug": "^4.1.1",
-        "fs-extra": "^7.0.1",
-        "lodash": "^4.17.21",
-        "temp": "^0.9.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "optionalDependencies": {
-        "@electron/windows-sign": "^1.1.2"
-      }
-    },
-    "node_modules/electron-winstaller/node_modules/fs-extra": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-7.0.1.tgz",
-      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=6 <7 || >=8"
-      }
-    },
     "node_modules/electron/node_modules/@types/node": {
       "version": "20.19.39",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.19.39.tgz",
@@ -5571,20 +5419,6 @@
         "node": ">= 18"
       }
     },
-    "node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
@@ -6103,36 +5937,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postject": {
-      "version": "1.0.0-alpha.6",
-      "resolved": "https://registry.npmmirror.com/postject/-/postject-1.0.0-alpha.6.tgz",
-      "integrity": "sha512-b9Eb8h2eVqNE8edvKdwqkrY6O7kAwmI8kcnBv1NScolYJbo59XUF0noFq+lxbC1yN20bmC0WBEbDC5H/7ASb0A==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "commander": "^9.4.0"
-      },
-      "bin": {
-        "postject": "dist/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/postject/node_modules/commander": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmmirror.com/commander/-/commander-9.5.0.tgz",
-      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": "^12.20.0 || >=14"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -6345,21 +6149,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/rimraf": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-2.6.3.tgz",
-      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "dev": true,
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
     "node_modules/roarr": {
       "version": "2.15.4",
       "resolved": "https://registry.npmmirror.com/roarr/-/roarr-2.15.4.tgz",
@@ -6787,21 +6576,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/temp": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmmirror.com/temp/-/temp-0.9.4.tgz",
-      "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "mkdirp": "^0.5.1",
-        "rimraf": "~2.6.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/temp-file": {
       "version": "3.4.0",
       "resolved": "https://registry.npmmirror.com/temp-file/-/temp-file-3.4.0.tgz",
diff --git a/desktop/renderer/package-lock.json b/desktop/renderer/package-lock.json
index 3dd1bbb..6fda6ef 100644
--- a/desktop/renderer/package-lock.json
+++ b/desktop/renderer/package-lock.json
@@ -5169,7 +5169,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -5475,31 +5475,6 @@
         }
       }
     },
-    "node_modules/vue-eslint-parser": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-10.4.0.tgz",
-      "integrity": "sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "debug": "^4.4.0",
-        "eslint-scope": "^8.2.0 || ^9.0.0",
-        "eslint-visitor-keys": "^4.2.0 || ^5.0.0",
-        "espree": "^10.3.0 || ^11.0.0",
-        "esquery": "^1.6.0",
-        "semver": "^7.6.3"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0"
-      }
-    },
     "node_modules/vue-router": {
       "version": "4.6.4",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.6.4.tgz",
diff --git a/desktop/renderer/src/App.vue b/desktop/renderer/src/App.vue
index e5ec171..88cb08d 100644
--- a/desktop/renderer/src/App.vue
+++ b/desktop/renderer/src/App.vue
@@ -82,7 +82,6 @@
       </div>
       <router-view />
     </main>
-    <UsagePanel />
   </div>
 
   <!-- Integrity Alert Dialog (shown immediately on launch or mid-session) -->
@@ -151,7 +150,6 @@ import { ElMessage } from "element-plus";
 import SidePanel from "@/components/SidePanel.vue";
 import GatewayLoading from "@/components/GatewayLoading.vue";
 import PermissionDialog from "@/components/PermissionDialog.vue";
-import UsagePanel from "@/components/UsagePanel.vue";
 import { useAgentStore } from "@/stores/agents";
 import { useGatewayStore } from "@/stores/gateway";
 import { useChatStore } from "@/stores/chat";
diff --git a/desktop/renderer/src/components/ChatWelcome.vue b/desktop/renderer/src/components/ChatWelcome.vue
index 3738668..f8c0a5d 100644
--- a/desktop/renderer/src/components/ChatWelcome.vue
+++ b/desktop/renderer/src/components/ChatWelcome.vue
@@ -78,7 +78,8 @@ const defaultCards = computed(() => {
       title: t("home.card.news.title"),
       desc: t("home.card.news.desc"),
       prompt: t("home.card.news.prompt"),
-      style: "--rot: 12deg; --dx: clamp(35px, 6vw, 75px); z-index: 3",
+      style:
+        "--rot: 12deg; --dx: clamp(35px, 6vw, 75px); --hover-dx: clamp(22px, 2.8vw, 38px); --hover-dy: -24px; z-index: 3",
     },
     {
       id: "desktop",
@@ -86,7 +87,7 @@ const defaultCards = computed(() => {
       title: t("home.card.desktop.title"),
       desc: t("home.card.desktop.desc"),
       prompt: t("home.card.desktop.prompt"),
-      style: "--rot: 0deg; z-index: 2",
+      style: "--rot: 0deg; --hover-dx: 0px; --hover-dy: -36px; z-index: 2",
     },
     {
       id: "travel",
@@ -94,7 +95,8 @@ const defaultCards = computed(() => {
       title: t("home.card.travel.title"),
       desc: t("home.card.travel.desc"),
       prompt: t("home.card.travel.prompt"),
-      style: "--rot: -12deg; --dx: clamp(-75px, -6vw, -35px); z-index: 1",
+      style:
+        "--rot: -12deg; --dx: clamp(-75px, -6vw, -35px); --hover-dx: clamp(-38px, -2.8vw, -22px); --hover-dy: -24px; z-index: 1",
     },
   ];
 });
@@ -169,7 +171,7 @@ function onSuggestionsScroll() {
   font-weight: 500;
   color: var(--text-secondary);
   text-align: center;
-  margin-bottom: clamp(16px, 4vh, 56px);
+  margin-bottom: clamp(28px, 6vh, 84px);
   position: relative;
   z-index: 10;
 }
@@ -204,7 +206,12 @@ function onSuggestionsScroll() {
 }
 
 .fan-card:hover {
-  transform: translateX(var(--dx, 0px)) rotate(var(--rot)) translateY(-36px) translateZ(0);
+  transform:
+    translateX(calc(var(--dx, 0px) + var(--hover-dx, 0px)))
+    rotate(var(--rot))
+    translateY(var(--hover-dy, -36px))
+    translateZ(0);
+  z-index: 10 !important;
   box-shadow: var(--card-shadow-hover);
 }
 
diff --git a/desktop/renderer/src/components/SidePanel.vue b/desktop/renderer/src/components/SidePanel.vue
index c5fb22b..d24419d 100644
--- a/desktop/renderer/src/components/SidePanel.vue
+++ b/desktop/renderer/src/components/SidePanel.vue
@@ -4,18 +4,82 @@
     <div class="sp-drag-region"></div>
 
     <!-- Brand / avatar row -->
-    <div class="sp-brand">
-      <div class="sp-brand-inner" @click="toggleMode">
+    <div class="sp-brand" ref="brandTriggerRef">
+      <div class="sp-brand-inner" @click="toggleAgentFlyout">
         <img class="sp-brand-avatar" :src="currentAgent.avatar" :alt="currentAgent.name" />
         <div>
           <div class="sp-brand-name">{{ currentAgent.name }}</div>
           <div class="sp-brand-tagline">{{ t("sidebar.tagline") }}</div>
         </div>
+        <span class="sp-conn-dot" :title="t('sidebar.connected')" :aria-label="t('sidebar.connected')"></span>
       </div>
     </div>
 
-    <!-- Navigation (default) -->
-    <nav v-if="panelMode === 'chats'" class="sp-nav">
+    <Teleport to="body">
+      <div
+        v-if="isAgentFlyoutOpen"
+        ref="flyoutRef"
+        class="sp-agent-flyout"
+        :style="flyoutStyle"
+        @click.stop
+      >
+        <div class="sp-agent-flyout-header">
+          <button class="sp-agent-flyout-search-btn" @click="focusAgentSearch">
+            {{ t("sidebar.agents") }}
+          </button>
+          <button
+            class="sp-agent-flyout-add-btn"
+            :title="t('sidebar.newAgent')"
+            :aria-label="t('sidebar.newAgent')"
+            @click="handleCreateAgent"
+          >
+            <IconPlus :size="16" />
+          </button>
+        </div>
+
+        <input
+          ref="flyoutSearchInputRef"
+          v-model="agentQuery"
+          class="sp-agent-flyout-input"
+          :placeholder="t('sidebar.searchAgents')"
+          type="text"
+        />
+
+        <div class="sp-agent-avatar-list">
+          <button
+            v-for="agent in filteredAgents"
+            :key="agent.id"
+            class="sp-agent-avatar-item"
+            :class="{ active: agentStore.currentAgentId === agent.id }"
+            :title="agent.name"
+            @click="handleAgentSelect(agent.id)"
+          >
+            <img class="sp-agent-avatar-img" :src="agent.avatar" :alt="agent.name" />
+            <span class="sp-agent-avatar-name">{{ agent.name }}</span>
+          </button>
+        </div>
+
+        <button class="sp-agent-flyout-footer" @click="handleExploreAgents">
+          <span>{{ t("sidebar.explorePopularAgents") }}</span>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="m9 18 6-6-6-6" />
+          </svg>
+        </button>
+      </div>
+    </Teleport>
+
+    <!-- Navigation -->
+    <nav class="sp-nav">
       <!-- Create new chat button -->
       <button class="sp-create-btn" @click="createNewChat">
         <IconPlus :size="18" />
@@ -87,25 +151,6 @@
         <span>{{ t("sidebar.phone") }}</span>
       </button>
 
-      <!-- Usage -->
-      <button class="sp-menu-item" :class="{ active: route.path === '/usage' }" @click="openUsage">
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.8"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <rect x="3" y="12" width="3" height="8" rx="1" />
-          <rect x="8.5" y="8" width="3" height="12" rx="1" />
-          <rect x="14" y="4" width="3" height="16" rx="1" />
-        </svg>
-        <span>{{ t("sidebar.usage") }}</span>
-      </button>
-
       <!-- Settings -->
       <button
         class="sp-menu-item"
@@ -131,67 +176,68 @@
       </button>
     </nav>
 
-    <!-- Agent list (after clicking brand) -->
-    <div v-else class="sp-nav sp-agent-section">
-      <AgentSearch v-model="searchQuery" :placeholder="t('sidebar.searchAgents')" />
-      <button class="sp-create-btn" @click="handleCreateAgent">
-        <IconPlus :size="18" />
-        <span>{{ t("sidebar.newAgent") }}</span>
-      </button>
-      <div class="sp-agent-list">
-        <AgentListItem
-          v-for="agent in filteredAgents"
-          :key="agent.id"
-          :agent="agent"
-          :is-active="agentStore.currentAgentId === agent.id"
-          @select="handleAgentSelect"
-          @quick-task="handleQuickTask"
-        />
-      </div>
-    </div>
-
-    <!-- Bottom user info -->
-    <div class="sp-footer">
-      <div class="sp-user">
-        <div class="sp-user-avatar">
+    <section class="sp-usage-snapshot" aria-live="polite">
+      <div class="sp-usage-head">
+        <span class="sp-usage-title">{{ t("sidebar.usageSnapshotTitle") }}</span>
+        <button
+          class="sp-usage-toggle"
+          :title="usageCollapsed ? t('sidebar.usageSnapshotExpand') : t('sidebar.usageSnapshotCollapse')"
+          :aria-label="
+            usageCollapsed ? t('sidebar.usageSnapshotExpand') : t('sidebar.usageSnapshotCollapse')
+          "
+          @click="toggleUsageCollapsed"
+        >
           <svg
-            width="18"
-            height="18"
+            class="sp-usage-toggle-icon"
+            :class="{ collapsed: usageCollapsed }"
+            width="12"
+            height="12"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
+            aria-hidden="true"
           >
-            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-            <circle cx="12" cy="7" r="4" />
+            <path d="m6 9 6 6 6-6" />
           </svg>
-        </div>
-        <div class="sp-user-info">
-          <div class="sp-user-name">{{ t("sidebar.userName") }}</div>
-          <div class="sp-user-status">
-            <span class="sp-status-dot"></span>
-            {{ t("sidebar.connected") }}
+        </button>
+      </div>
+
+      <template v-if="!usageCollapsed">
+        <div v-if="usageLoading" class="sp-usage-state">{{ t("settings.usageLoading") }}</div>
+        <div v-else-if="usageSnapshot" class="sp-usage-grid">
+          <div class="sp-usage-card">
+            <span class="sp-usage-label">{{ t("sidebar.usageSnapshotSpend") }}</span>
+            <span class="sp-usage-value">{{ formatUsd(usageSnapshot.totalSpend) }}</span>
+          </div>
+          <div class="sp-usage-card">
+            <span class="sp-usage-label">{{ t("sidebar.usageSnapshotTokens") }}</span>
+            <span class="sp-usage-value">{{ formatCompact(usageSnapshot.totalTokens) }}</span>
           </div>
         </div>
-      </div>
-    </div>
+        <div v-else-if="!gatewayOnline" class="sp-usage-state">{{ t("sidebar.usageSnapshotOffline") }}</div>
+        <div v-else class="sp-usage-state">{{ t("sidebar.usageSnapshotNoData") }}</div>
+
+        <div class="sp-usage-foot">
+          <span>{{ t("sidebar.usageSnapshotPeriod") }}</span>
+          <span v-if="lastUpdatedLabel">{{ t("sidebar.usageSnapshotUpdated", { time: lastUpdatedLabel }) }}</span>
+        </div>
+      </template>
+    </section>
+
   </aside>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, nextTick, onMounted, onUnmounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useGatewayStore } from "@/stores/gateway";
 import { useChatStore } from "@/stores/chat";
 import { useSessionStore } from "@/stores/sessions";
 import { useAgentStore } from "@/stores/agents";
-import { useAgentList } from "@/composables/useAgentList";
 import { t } from "@/i18n";
-import { useUsagePanel } from "@/composables/useUsagePanel";
-import AgentSearch from "@/components/agent/AgentSearch.vue";
-import AgentListItem from "@/components/agent/AgentListItem.vue";
 import IconPlus from "@/components/icons/IconPlus.vue";
 import IconChevronDown from "@/components/icons/IconChevronDown.vue";
 import IconClose from "@/components/icons/IconClose.vue";
@@ -202,12 +248,47 @@ const gateway = useGatewayStore();
 const chatStore = useChatStore();
 const sessionStore = useSessionStore();
 const agentStore = useAgentStore();
-const { searchQuery, filteredAgents } = useAgentList(computed(() => agentStore.addedAgents));
 
-const { open: openUsage } = useUsagePanel();
+interface UsageSnapshot {
+  totalSpend: number;
+  totalTokens: number;
+}
+
+const usageSnapshot = ref<UsageSnapshot | null>(null);
+const usageLoading = ref(false);
+const usageLastUpdated = ref<Date | null>(null);
+const usageCollapsed = ref(false);
+let usageRefreshTimer: ReturnType<typeof setInterval> | null = null;
 
 const chatExpanded = ref(true);
-const panelMode = ref<"chats" | "agents">("chats");
+const isAgentFlyoutOpen = ref(false);
+const agentQuery = ref("");
+const flyoutRef = ref<HTMLElement | null>(null);
+const brandTriggerRef = ref<HTMLElement | null>(null);
+const flyoutSearchInputRef = ref<HTMLInputElement | null>(null);
+const flyoutTop = ref(0);
+const flyoutLeft = ref(0);
+
+const flyoutStyle = computed(() => ({
+  top: `${flyoutTop.value}px`,
+  left: `${flyoutLeft.value}px`,
+}));
+
+const gatewayOnline = computed(() => gateway.ready && gateway.status === "running");
+const lastUpdatedLabel = computed(() => {
+  if (!usageLastUpdated.value) return "";
+  return usageLastUpdated.value.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+});
+
+const filteredAgents = computed(() => {
+  const q = agentQuery.value.trim().toLowerCase();
+  if (!q) return agentStore.agents;
+  return agentStore.agents.filter((agent) => {
+    const name = agent.name.toLowerCase();
+    const desc = (agent.description || "").toLowerCase();
+    return name.includes(q) || desc.includes(q);
+  });
+});
 
 const currentAgent = computed(() => {
   const session = sessionStore.sessions.find((s) => s.key === chatStore.sessionKey);
@@ -217,8 +298,91 @@ const currentAgent = computed(() => {
 
 onMounted(() => {
   gateway.refreshWeixinStatus();
+  try {
+    usageCollapsed.value = localStorage.getItem("microclaw:usageSnapshotCollapsed") === "1";
+  } catch {}
+  document.addEventListener("mousedown", handleDocumentPointerDown);
+  document.addEventListener("keydown", handleDocumentKeyDown);
+  window.addEventListener("resize", handleWindowResize);
+  window.addEventListener("scroll", handleWindowScroll, true);
+  void loadUsageSnapshot();
+  usageRefreshTimer = setInterval(() => {
+    void loadUsageSnapshot();
+  }, 60_000);
 });
 
+onUnmounted(() => {
+  document.removeEventListener("mousedown", handleDocumentPointerDown);
+  document.removeEventListener("keydown", handleDocumentKeyDown);
+  window.removeEventListener("resize", handleWindowResize);
+  window.removeEventListener("scroll", handleWindowScroll, true);
+  if (usageRefreshTimer) {
+    clearInterval(usageRefreshTimer);
+    usageRefreshTimer = null;
+  }
+});
+
+async function loadUsageSnapshot() {
+  if (usageLoading.value) return;
+  usageLoading.value = true;
+  try {
+    const usageApi = window.openclaw?.usage?.getStats;
+    if (!gatewayOnline.value || typeof usageApi !== "function") {
+      if (import.meta.env.DEV) {
+        applyMockSnapshot();
+      } else {
+        usageSnapshot.value = null;
+      }
+      return;
+    }
+
+    const stats = await usageApi();
+    usageSnapshot.value = {
+      totalSpend: Number(stats?.totalSpend || 0),
+      totalTokens: Number(stats?.totalTokens || 0),
+    };
+    usageLastUpdated.value = new Date();
+  } catch {
+    if (import.meta.env.DEV) {
+      applyMockSnapshot();
+    } else {
+      usageSnapshot.value = null;
+    }
+  } finally {
+    usageLoading.value = false;
+  }
+}
+
+function applyMockSnapshot() {
+  usageSnapshot.value = {
+    totalSpend: 42.35,
+    totalTokens: 128400,
+  };
+  usageLastUpdated.value = new Date();
+}
+
+function toggleUsageCollapsed() {
+  usageCollapsed.value = !usageCollapsed.value;
+  try {
+    localStorage.setItem("microclaw:usageSnapshotCollapsed", usageCollapsed.value ? "1" : "0");
+  } catch {}
+}
+
+function formatCompact(value: number) {
+  return new Intl.NumberFormat(undefined, {
+    notation: "compact",
+    maximumFractionDigits: 1,
+  }).format(value || 0);
+}
+
+function formatUsd(value: number) {
+  return new Intl.NumberFormat(undefined, {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 2,
+  }).format(value || 0);
+}
+
 /**
  * Ensure the active chat is a fresh session bound to the currently-selected agent.
  * Starts a new session when the current chat already has messages, OR when it
@@ -238,16 +402,67 @@ function ensureEmptySession() {
   }
 }
 
-function toggleMode() {
-  if (panelMode.value === "chats") {
-    panelMode.value = "agents";
-    ensureEmptySession();
-    router.push(`/chat/${agentStore.currentAgentId}`);
-  } else {
-    panelMode.value = "chats";
-    const currentSession = sessionStore.sessions.find((s) => s.key === chatStore.sessionKey);
-    const agentId = currentSession?.agentId || "main";
-    router.push(`/chat/${agentId}`);
+function toggleAgentFlyout() {
+  isAgentFlyoutOpen.value = !isAgentFlyoutOpen.value;
+  if (isAgentFlyoutOpen.value) {
+    nextTick(() => {
+      updateFlyoutPosition();
+      flyoutSearchInputRef.value?.focus();
+    });
+  }
+}
+
+function closeAgentFlyout() {
+  isAgentFlyoutOpen.value = false;
+}
+
+function focusAgentSearch() {
+  if (!isAgentFlyoutOpen.value) {
+    isAgentFlyoutOpen.value = true;
+  }
+  nextTick(() => {
+    updateFlyoutPosition();
+    flyoutSearchInputRef.value?.focus();
+  });
+}
+
+function updateFlyoutPosition() {
+  const trigger = brandTriggerRef.value;
+  if (!trigger) return;
+  const rect = trigger.getBoundingClientRect();
+  const gap = 12;
+  const flyoutWidth = flyoutRef.value?.offsetWidth || 260;
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const maxTop = viewportHeight - 120;
+
+  flyoutLeft.value = Math.min(rect.right + gap, viewportWidth - flyoutWidth - 12);
+  flyoutTop.value = Math.max(8, Math.min(rect.top, maxTop));
+}
+
+function handleWindowResize() {
+  if (isAgentFlyoutOpen.value) {
+    updateFlyoutPosition();
+  }
+}
+
+function handleWindowScroll() {
+  if (isAgentFlyoutOpen.value) {
+    updateFlyoutPosition();
+  }
+}
+
+function handleDocumentPointerDown(event: MouseEvent) {
+  if (!isAgentFlyoutOpen.value) return;
+  const target = event.target as Node;
+  if (flyoutRef.value?.contains(target)) return;
+  if (brandTriggerRef.value?.contains(target)) return;
+  closeAgentFlyout();
+}
+
+function handleDocumentKeyDown(event: KeyboardEvent) {
+  if (event.key === "Escape") {
+    closeAgentFlyout();
   }
 }
 
@@ -281,17 +496,20 @@ function clearComposeDraft() {
 function handleAgentSelect(agentId: string) {
   clearComposeDraft();
   agentStore.selectAgent(agentId);
-  ensureEmptySession();
-  router.push(`/chat/${agentId}`);
+  if (route.path.startsWith("/chat")) {
+    ensureEmptySession();
+    router.push(`/chat/${agentId}`);
+  }
+  closeAgentFlyout();
 }
 
-async function handleQuickTask(task: string) {
-  const agentId = agentStore.currentAgentId;
-  await router.push(`/chat/${agentId}`);
-  chatStore.pendingPrompt = task;
+function handleCreateAgent() {
+  closeAgentFlyout();
+  router.push("/chat/market");
 }
 
-function handleCreateAgent() {
+function handleExploreAgents() {
+  closeAgentFlyout();
   router.push("/chat/market");
 }
 </script>
@@ -316,7 +534,7 @@ html.dark .side-panel {
 }
 
 .sp-drag-region {
-  height: 36px;
+  height: 12px;
   -webkit-app-region: drag;
   flex-shrink: 0;
 }
@@ -327,6 +545,7 @@ html.dark .side-panel {
 }
 
 .sp-brand-inner {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 12px;
@@ -358,6 +577,21 @@ html.dark .sp-brand-inner:hover {
   flex-shrink: 0;
 }
 
+.sp-conn-dot {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--success);
+  border: 2px solid #f9f5f2;
+}
+
+html.dark .sp-conn-dot {
+  border-color: var(--bg-tertiary);
+}
+
 .sp-brand-name {
   font-size: 16px;
   font-weight: 600;
@@ -370,13 +604,182 @@ html.dark .sp-brand-inner:hover {
   margin-top: 2px;
 }
 
+.sp-agent-flyout {
+  position: fixed;
+  width: min(260px, calc(100vw - 24px));
+  max-height: min(62vh, 520px);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  background: #fff;
+  border: 1px solid #e9e5e1;
+  border-radius: 14px;
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
+  z-index: 30;
+}
+
+html.dark .sp-agent-flyout {
+  background: var(--bg-secondary);
+  border-color: var(--border);
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
+}
+
+.sp-agent-flyout-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sp-agent-flyout-search-btn {
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 4px 2px;
+  font-family: inherit;
+}
+
+.sp-agent-flyout-search-btn:hover {
+  color: var(--text-primary);
+}
+
+.sp-agent-flyout-add-btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 8px;
+  background: #f4efea;
+  color: var(--text-primary);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.sp-agent-flyout-add-btn:hover {
+  background: #e9e2dc;
+}
+
+html.dark .sp-agent-flyout-add-btn {
+  background: var(--bg-tertiary);
+}
+
+html.dark .sp-agent-flyout-add-btn:hover {
+  background: var(--border);
+}
+
+.sp-agent-flyout-input {
+  width: 100%;
+  border: 1px solid #e3ddd7;
+  border-radius: 10px;
+  background: #fff;
+  color: var(--text-primary);
+  font-size: 13px;
+  padding: 8px 10px;
+  outline: none;
+}
+
+.sp-agent-flyout-input:focus {
+  border-color: #c9beb3;
+}
+
+html.dark .sp-agent-flyout-input {
+  background: var(--bg-primary);
+  border-color: var(--border);
+}
+
+.sp-agent-avatar-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+.sp-agent-avatar-item {
+  width: 100%;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.sp-agent-avatar-item:hover {
+  background: #f7f2ee;
+}
+
+html.dark .sp-agent-avatar-item:hover {
+  background: var(--bg-tertiary);
+}
+
+.sp-agent-avatar-item.active {
+  background: #efe8e1;
+}
+
+html.dark .sp-agent-avatar-item.active {
+  background: var(--bg-tertiary);
+}
+
+.sp-agent-avatar-img {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.sp-agent-avatar-name {
+  flex: 1;
+  text-align: left;
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  line-height: 1.25;
+}
+
+.sp-agent-flyout-footer {
+  margin-top: 2px;
+  border: none;
+  border-top: 1px solid #ece7e2;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 10px 4px 2px;
+  text-align: right;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.sp-agent-flyout-footer:hover {
+  color: var(--text-primary);
+}
+
+html.dark .sp-agent-flyout-footer {
+  border-top-color: var(--border);
+}
+
 /* ── Create chat button ── */
 .sp-create-btn {
   width: 100%;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 8px;
-  padding: 10px 16px;
+  padding: 10px 20px 10px 16px;
   margin-bottom: 16px;
   background: #1d1d1f;
   border: none;
@@ -410,6 +813,109 @@ html.dark .sp-create-btn:hover {
   min-height: 0;
 }
 
+.sp-usage-snapshot {
+  padding: 10px clamp(8px, 1.5vw, 16px) 12px;
+  background: #fbfbf9;
+}
+
+html.dark .sp-usage-snapshot {
+  background: var(--bg-secondary);
+}
+
+.sp-usage-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.sp-usage-title {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.sp-usage-toggle {
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  line-height: 1;
+  display: grid;
+  place-items: center;
+  border-radius: 4px;
+  font-size: 11px;
+}
+
+.sp-usage-toggle-icon {
+  transition: transform 0.2s ease;
+}
+
+.sp-usage-toggle-icon.collapsed {
+  transform: rotate(-90deg);
+}
+
+.sp-usage-toggle:hover {
+  background: #f0ece7;
+  color: var(--text-primary);
+}
+
+html.dark .sp-usage-toggle:hover {
+  background: var(--bg-tertiary);
+}
+
+.sp-usage-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.sp-usage-card {
+  border: 1px solid #ece7e2;
+  border-radius: 8px;
+  padding: 6px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+html.dark .sp-usage-card {
+  border-color: var(--border);
+  background: var(--bg-primary);
+}
+
+.sp-usage-label {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.sp-usage-value {
+  font-size: 12px;
+  color: var(--text-primary);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.sp-usage-state {
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 4px 0;
+}
+
+.sp-usage-foot {
+  margin-top: 8px;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
 /* ── Chat section ── */
 .sp-section {
   margin-bottom: 8px;
@@ -569,60 +1075,6 @@ html.dark .sp-menu-item.active {
   color: var(--text-primary);
 }
 
-/* ── Footer ── */
-.sp-footer {
-  padding: 12px clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px);
-}
-
-.sp-user {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.sp-user-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: #8a9ba8;
-  color: #fff;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-}
-
-html.dark .sp-user-avatar {
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-}
-
-.sp-user-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.sp-user-name {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.sp-user-status {
-  font-size: 11px;
-  color: var(--text-muted);
-  margin-top: 2px;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.sp-status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--success);
-}
-
 /* ── Agent section ── */
 .sp-agent-section {
   display: flex;
@@ -640,4 +1092,5 @@ html.dark .sp-user-avatar {
   flex-direction: column;
   gap: 4px;
 }
+
 </style>
diff --git a/desktop/renderer/src/i18n/en-US.ts b/desktop/renderer/src/i18n/en-US.ts
index 972e820..6a683a7 100644
--- a/desktop/renderer/src/i18n/en-US.ts
+++ b/desktop/renderer/src/i18n/en-US.ts
@@ -40,11 +40,27 @@ export default {
   "sidebar.points": "Available: 500 Credits",
   "sidebar.settings": "Settings",
   "sidebar.usage": "Usage",
-  "sidebar.createChat": "Create Chat",
+  "sidebar.createChat": "Create New Chat",
   "sidebar.chats": "Chats",
   "sidebar.noChats": "No chats yet",
+  "sidebar.agents": "Agents",
+  "sidebar.explorePopularAgents": "Explore more popular agents",
   "sidebar.phone": "Phone",
   "sidebar.tagline": "Weave the future through conversation",
+  "sidebar.usageSnapshotTitle": "Usage",
+  "sidebar.usageSnapshotViewDetails": "Details",
+  "sidebar.usageSnapshotSpend": "Spend",
+  "sidebar.usageSnapshotTokens": "Tokens",
+  "sidebar.usageSnapshotRequests": "Requests",
+  "sidebar.usageSnapshotHealth": "Health",
+  "sidebar.usageSnapshotOffline": "Gateway offline",
+  "sidebar.usageSnapshotNoData": "No usage data yet",
+  "sidebar.usageSnapshotPeriod": "Last 30 days",
+  "sidebar.usageSnapshotUpdated": "Updated {time}",
+  "sidebar.usageSnapshotExpand": "Expand usage snapshot",
+  "sidebar.usageSnapshotCollapse": "Collapse usage snapshot",
+  "sidebar.usageSnapshotMock": "Mock data",
+  "sidebar.usageSnapshotSimulated": "Simulated",
 
   // ── HomeView ──
   "home.heading": "Ready? Pick a task below to start exploring!",
diff --git a/desktop/renderer/src/i18n/zh-CN.ts b/desktop/renderer/src/i18n/zh-CN.ts
index 70cf6d7..214f7ee 100644
--- a/desktop/renderer/src/i18n/zh-CN.ts
+++ b/desktop/renderer/src/i18n/zh-CN.ts
@@ -38,11 +38,27 @@ export default {
   "sidebar.points": "可用：500 积分",
   "sidebar.settings": "设置",
   "sidebar.usage": "使用情况",
-  "sidebar.createChat": "创建对话",
+  "sidebar.createChat": "创建新对话",
   "sidebar.chats": "对话",
   "sidebar.noChats": "暂无对话",
+  "sidebar.agents": "Agent 列表",
+  "sidebar.explorePopularAgents": "探索更多热门 Agent",
   "sidebar.phone": "手机",
   "sidebar.tagline": "透过对话，编织万物未来",
+  "sidebar.usageSnapshotTitle": "使用情况",
+  "sidebar.usageSnapshotViewDetails": "查看详情",
+  "sidebar.usageSnapshotSpend": "花费",
+  "sidebar.usageSnapshotTokens": "Tokens",
+  "sidebar.usageSnapshotRequests": "请求",
+  "sidebar.usageSnapshotHealth": "状态",
+  "sidebar.usageSnapshotOffline": "网关未连接",
+  "sidebar.usageSnapshotNoData": "暂无用量数据",
+  "sidebar.usageSnapshotPeriod": "最近 30 天",
+  "sidebar.usageSnapshotUpdated": "更新于 {time}",
+  "sidebar.usageSnapshotExpand": "展开使用概览",
+  "sidebar.usageSnapshotCollapse": "收起使用概览",
+  "sidebar.usageSnapshotMock": "模拟数据",
+  "sidebar.usageSnapshotSimulated": "模拟",
 
   // ── HomeView ──
   "home.heading": "准备好了？从下面挑一个任务开始探索吧！",
diff --git a/desktop/renderer/src/views/ChatView.vue b/desktop/renderer/src/views/ChatView.vue
index 687d1c8..0f50b73 100644
--- a/desktop/renderer/src/views/ChatView.vue
+++ b/desktop/renderer/src/views/ChatView.vue
@@ -488,8 +488,8 @@ function handleThreadClick(e: MouseEvent) {
 .mode-toggle-bar {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 8px clamp(12px, 3vw, 32px) 4px;
+  gap: 8px;
+  padding: clamp(8px, 2vw, 20px) clamp(8px, 2vw, 20px) 4px;
   flex-shrink: 0;
 }