give the pages the CYBER shell they were missing

The token swap made every control dark, but the pages themselves kept
their Arco defaults — bare `padding: 20px` with components laid straight
on the background. That is why the running app still read as "not the
prototype" no matter how many variables were replaced: the prototype's
page structure (panel / panel-h / panel-b / kv / tabs) was never built.

Rather than restate that shell in each of the 25 views, it now lives in
global.scss as .cy-view / .cy-panel / .cy-panel-h / .cy-panel-b /
.cy-kv / .cy-tabs / .cy-tab / .cy-stack / .cy-sec-t, and the settings
components share a global .settings-section + .section-title so all nine
panes pick up the mono section headers at once. The per-component
duplicates of those two rules were deleted.

Settings is converted as the reference case: Arco's a-tabs/a-tab-pane
became the underline tab strip, and the pane body sits in a panel. The
URL-query sync moved to a watcher on activeTab so pane order and deep
links still hold. Pane order is a contract, so it is asserted.

Two tests lock the shell in place — one for the global classes and the
cyan underline selected state, one for the settings structure and pane
order. Without them the next edit easily slides back to bare Arco.

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

@@ -40,20 +40,37 @@ const validTabs = computed(() => new Set([
   "voice",
 ]));
 
+// pane 顺序是契约（见 docs/cli-chat-sessions.md 与原型 renderSettings），不要重排。
+const tabs = computed(() => [
+  { key: "account", label: t("settings.tabs.account") },
+  ...(canManageUsers ? [{ key: "users", label: t("settings.tabs.users") }] : []),
+  { key: "display", label: t("settings.tabs.display") },
+  { key: "proxy", label: t("settings.tabs.proxy") },
+  { key: "agent", label: t("settings.tabs.agent") },
+  { key: "memory", label: t("settings.tabs.memory") },
+  { key: "compression", label: t("settings.tabs.compression") },
+  { key: "session", label: t("settings.tabs.session") },
+  { key: "privacy", label: t("settings.tabs.privacy") },
+  { key: "models", label: t("settings.tabs.models") },
+  { key: "voice", label: t("settings.tabs.voice") },
+]);
+
+const paneCount = computed(() => tabs.value.length);
+
 function normalizeTab(value: unknown): string {
   const tab = typeof value === "string" ? value : "";
   return validTabs.value.has(tab) ? tab : "account";
 }
 
-function handleTabUpdate(tab: string | number) {
-  activeTab.value = normalizeTab(tab);
+// tab 切到 URL query，刷新和分享链接都能停在同一个 pane 上。
+watch(activeTab, (tab) => {
   router.replace({
     query: {
       ...route.query,
-      tab: activeTab.value === "account" ? undefined : activeTab.value,
+      tab: tab === "account" ? undefined : tab,
     },
   });
-}
+});
 
 watch(() => route.query.tab, (tab) => {
   activeTab.value = normalizeTab(tab);
@@ -75,6 +92,9 @@ onMounted(() => {
   <div class="settings-view">
     <header class="page-header">
       <h2 class="header-title">{{ t("settings.title") }}</h2>
+      <div class="header-actions">
+        <span class="header-meta">{{ paneCount }} {{ t("settings.paneUnit") }}</span>
+      </div>
     </header>
 
     <div class="settings-content">
@@ -82,42 +102,37 @@ onMounted(() => {
         :loading="settingsStore.loading || settingsStore.saving"
         :tip="t('common.loading')"
       >
-        <a-tabs v-model:active-key="activeTab" type="line" @change="handleTabUpdate">
-          <a-tab-pane key="account" :title="t('settings.tabs.account')">
-            <AccountSettings />
-          </a-tab-pane>
-          <a-tab-pane v-if="canManageUsers" key="users" :title="t('settings.tabs.users')">
-            <UserManagementSettings />
-          </a-tab-pane>
-          <a-tab-pane key="display" :title="t('settings.tabs.display')">
-            <DisplaySettings />
-          </a-tab-pane>
-          <a-tab-pane key="proxy" :title="t('settings.tabs.proxy')">
-            <ProxySettings />
-          </a-tab-pane>
-          <a-tab-pane key="agent" :title="t('settings.tabs.agent')">
-            <AgentSettings />
-            <GatewayAutoStartSettings />
-          </a-tab-pane>
-          <a-tab-pane key="memory" :title="t('settings.tabs.memory')">
-            <MemorySettings />
-          </a-tab-pane>
-          <a-tab-pane key="compression" :title="t('settings.tabs.compression')">
-            <CompressionSettings />
-          </a-tab-pane>
-          <a-tab-pane key="session" :title="t('settings.tabs.session')">
-            <SessionSettings />
-          </a-tab-pane>
-          <a-tab-pane key="privacy" :title="t('settings.tabs.privacy')">
-            <PrivacySettings />
-          </a-tab-pane>
-          <a-tab-pane key="models" :title="t('settings.tabs.models')">
-            <ModelSettings />
-          </a-tab-pane>
-          <a-tab-pane key="voice" :title="t('settings.tabs.voice')">
-            <VoiceSettings />
-          </a-tab-pane>
-        </a-tabs>
+        <div class="cy-tabs">
+          <button
+            v-for="tab in tabs"
+            :key="tab.key"
+            type="button"
+            class="cy-tab"
+            :class="{ on: tab.key === activeTab }"
+            @click="activeTab = tab.key"
+          >
+            {{ tab.label }}
+          </button>
+        </div>
+
+        <div class="cy-panel">
+          <div class="cy-panel-b">
+            <AccountSettings v-if="activeTab === 'account'" />
+            <UserManagementSettings v-else-if="activeTab === 'users'" />
+            <DisplaySettings v-else-if="activeTab === 'display'" />
+            <ProxySettings v-else-if="activeTab === 'proxy'" />
+            <div v-else-if="activeTab === 'agent'" class="cy-stack">
+              <AgentSettings />
+              <GatewayAutoStartSettings />
+            </div>
+            <MemorySettings v-else-if="activeTab === 'memory'" />
+            <CompressionSettings v-else-if="activeTab === 'compression'" />
+            <SessionSettings v-else-if="activeTab === 'session'" />
+            <PrivacySettings v-else-if="activeTab === 'privacy'" />
+            <ModelSettings v-else-if="activeTab === 'models'" />
+            <VoiceSettings v-else-if="activeTab === 'voice'" />
+          </div>
+        </div>
       </a-spin>
     </div>
   </div>
@@ -135,6 +150,30 @@ onMounted(() => {
 .settings-content {
   flex: 1;
   overflow-y: auto;
-  padding: 20px;
+  padding: 20px 22px 40px;
+
+  :deep(.arco-spin) {
+    display: block;
+  }
+
+  :deep(.arco-tabs-content) {
+    padding-top: 0;
+  }
+}
+
+.header-meta {
+  font-family: $font-code;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: $text-faint;
+}
+
+.cy-panel {
+  margin-top: 16px;
+}
+
+// 各 settings 组件根节点自带 margin-top，在面板里会多出一截
+.settings-content :deep(.settings-section:first-child) {
+  margin-top: 0;
 }
 </style>