From d9ae0f3263dc70c266d44e01dcf85c47b0f44d09 Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Tue, 10 Mar 2026 14:48:54 +0800
Subject: [PATCH] feat(ui): redesign settings page and update sidebar
 navigation (#383)

---
 pnpm-lock.yaml                    | 158 +++--
 src/App.tsx                       |   2 -
 src/components/layout/Sidebar.tsx |  38 +-
 src/pages/Chat/ChatInput.tsx      |   9 +-
 src/pages/Dashboard/index.tsx     | 324 ----------
 src/pages/Settings/index.tsx      | 993 ++++++++++++++----------------
 6 files changed, 618 insertions(+), 906 deletions(-)
 delete mode 100644 src/pages/Dashboard/index.tsx

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3d16afe93..d6cbbb8cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,7 +65,7 @@ importers:
         version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@sliverp/qqbot':
         specifier: ^1.5.4
-        version: 1.5.4(clawdbot@2026.1.24-3(@discordjs/opus@0.10.0(encoding@0.1.13))(@types/express@5.0.6)(devtools-protocol@0.0.1595872)(encoding@0.1.13)(opusscript@0.1.1)(typescript@5.9.3))(moltbot@0.1.0)(openclaw@2026.3.1(@napi-rs/canvas@0.1.95)(@types/express@5.0.6)(encoding@0.1.13)(hono@4.11.8)(node-llama-cpp@3.16.2(typescript@5.9.3)))
+        version: 1.5.4(clawdbot@2026.1.24-3(@discordjs/opus@0.10.0(encoding@0.1.13))(@types/express@5.0.6)(devtools-protocol@0.0.1596832)(encoding@0.1.13)(opusscript@0.1.1)(typescript@5.9.3))(moltbot@0.1.0)(openclaw@2026.3.1(@napi-rs/canvas@0.1.95)(@types/express@5.0.6)(encoding@0.1.13)(hono@4.11.8)(node-llama-cpp@3.16.2(typescript@5.9.3)))
       '@soimy/dingtalk':
         specifier: ^3.1.4
         version: 3.1.4(openclaw@2026.3.1(@napi-rs/canvas@0.1.95)(@types/express@5.0.6)(encoding@0.1.13)(hono@4.11.8)(node-llama-cpp@3.16.2(typescript@5.9.3)))
@@ -1384,6 +1384,34 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@node-llama-cpp/linux-x64-cuda-ext@3.15.0':
+    resolution: {integrity: sha512-wQwgSl7Qm8vH56oBt7IuWWDNNsDECkVMS000C92wl3PkbzjwZFiWzehwa+kF8Lr2BBMiCJNkI5nEabhYH3RN2Q==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@node-llama-cpp/linux-x64-cuda-ext@3.16.2':
+    resolution: {integrity: sha512-47d9myCJauZyzAlN7IK1eIt/4CcBMslF+yHy4q+yJotD/RV/S6qRpK2kGn+ybtdVjkPGNCoPkHKcyla9iIVjbw==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@node-llama-cpp/linux-x64-cuda@3.15.0':
+    resolution: {integrity: sha512-mDjyVulCTRYilm9Emm3lDMx7dbI1vzGqk28Pj28shartjERTUu8aUNDYOmVKNMLpUKS1akw7vy0lMF8t4qswxQ==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@node-llama-cpp/linux-x64-cuda@3.16.2':
+    resolution: {integrity: sha512-LTBQFqjin7tyrLNJz0XWTB5QAHDsZV71/qiiRRjXdBKSZHVVaPLfdgxypGu7ggPeBNsv+MckRXdlH5C7yMtE4A==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@node-llama-cpp/linux-x64-vulkan@3.15.0':
     resolution: {integrity: sha512-htVIthQKq/rr8v5e7NiVtcHsstqTBAAC50kUymmDMbrzAu6d/EHacCJpNbU57b1UUa1nKN5cBqr6Jr+QqEalMA==}
     engines: {node: '>=20.0.0'}
@@ -1448,6 +1476,42 @@ packages:
     cpu: [arm64, x64]
     os: [win32]
 
+  '@node-llama-cpp/win-x64-cuda-ext@3.15.0':
+    resolution: {integrity: sha512-KQoNH9KsVtqGVXaRdPrnHPrg5w3KOM7CfynPmG1m16gmjmDSIspdPg/Dbg6DgHBfkdAzt+duRZEBk8Bg8KbDHw==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@node-llama-cpp/win-x64-cuda-ext@3.16.2':
+    resolution: {integrity: sha512-sdv4Kzn9bOQWNBRvw6B/zcn8dQRfZhjIHv5AfDBIOfRlSCgjebFpBeYUoU4wZPpjr3ISwcqO5MEWsw+AbUdV3Q==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@node-llama-cpp/win-x64-cuda@3.15.0':
+    resolution: {integrity: sha512-2Kyu1roDwXwFLaJgGZQISIXP9lCDZtJCx/DRcmrYRHcSUFCzo5ikOuAECyliSSQmRUAvvlRCuD+GrTcegbhojA==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@node-llama-cpp/win-x64-cuda@3.16.2':
+    resolution: {integrity: sha512-jStDELHrU3rKQMOk5Hs5bWEazyjE2hzHwpNf6SblOpaGkajM/HJtxEZoL0mLHJx5qeXs4oOVkr7AzuLy0WPpNA==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@node-llama-cpp/win-x64-vulkan@3.15.0':
+    resolution: {integrity: sha512-sH+K7lO49WrUvCCC3RPddCBrn2ZQwKCXKL90P/NZicMRgxTPFZEVSU2jXR/bu1K8B+4lNN+z5OEbjSYs7cKEcA==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@node-llama-cpp/win-x64-vulkan@3.16.2':
+    resolution: {integrity: sha512-9xuHFCOhCQjZgQSFrk79EuSKn9nGWt/SAq/3wujQSQLtgp8jGdtZgwcmuDUoemInf10en2dcOmEt7t8dQdC3XA==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [win32]
+
   '@node-llama-cpp/win-x64@3.15.0':
     resolution: {integrity: sha512-gWhtc8l3HOry5guO46YfFohLQnF0NfL4On0GAO8E27JiYYxHO9nHSCfFif4+U03+FfHquZXL0znJ1qPVOiwOPw==}
     engines: {node: '>=20.0.0'}
@@ -3597,8 +3661,8 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  devtools-protocol@0.0.1595872:
-    resolution: {integrity: sha512-kRfgp8vWVjBu/fbYCiVFiOqsCk3CrMKEo3WbgGT2NXK2dG7vawWPBljixajVgGK9II8rDO9G0oD0zLt3I1daRg==}
+  devtools-protocol@0.0.1596832:
+    resolution: {integrity: sha512-IwRVIiCa4mpaKeLcZ2cmGpG0hP8ls3zj3zg87Z/JwULm2xYmhOcMrwdeHos6xaANQHGEXzSCzji+6kEuZu873A==}
 
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
@@ -4141,6 +4205,7 @@ packages:
   glob@11.1.0:
     resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
     engines: {node: 20 || >=22}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@13.0.6:
@@ -4353,11 +4418,6 @@ packages:
     resolution: {integrity: sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg==}
     engines: {node: '>= 10'}
 
-  ipull@3.9.3:
-    resolution: {integrity: sha512-ZMkxaopfwKHwmEuGDYx7giNBdLxbHbRCWcQVA1D2eqE4crUguupfxej6s7UqbidYEwT69dkyumYkY8DPHIxF9g==}
-    engines: {node: '>=18.0.0'}
-    hasBin: true
-
   ipull@3.9.5:
     resolution: {integrity: sha512-5w/yZB5lXmTfsvNawmvkCjYo4SJNuKQz/av8TC1UiOyfOHyaM+DReqbpU2XpWYfmY+NIUbRRH8PUAWsxaS+IfA==}
     engines: {node: '>=18.0.0'}
@@ -6125,6 +6185,7 @@ packages:
   tar@7.5.4:
     resolution: {integrity: sha512-AN04xbWGrSTDmVwlI4/GTlIIwMFk/XEv7uL8aa57zuvRy6s4hdBed+lVq2fAZ89XDa7Us3ANXcE3Tvqvja1kTA==}
     engines: {node: '>=18'}
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   tar@7.5.9:
     resolution: {integrity: sha512-BTLcK0xsDh2+PUe9F6c2TlRp4zOOBMTkoQHQIWSIzI0R7KG46uEwq4OPk2W7bZcprBMsuaeFsqwYr7pjh6CuHg==}
@@ -8273,6 +8334,18 @@ snapshots:
   '@node-llama-cpp/linux-armv7l@3.16.2':
     optional: true
 
+  '@node-llama-cpp/linux-x64-cuda-ext@3.15.0':
+    optional: true
+
+  '@node-llama-cpp/linux-x64-cuda-ext@3.16.2':
+    optional: true
+
+  '@node-llama-cpp/linux-x64-cuda@3.15.0':
+    optional: true
+
+  '@node-llama-cpp/linux-x64-cuda@3.16.2':
+    optional: true
+
   '@node-llama-cpp/linux-x64-vulkan@3.15.0':
     optional: true
 
@@ -8303,6 +8376,24 @@ snapshots:
   '@node-llama-cpp/win-arm64@3.16.2':
     optional: true
 
+  '@node-llama-cpp/win-x64-cuda-ext@3.15.0':
+    optional: true
+
+  '@node-llama-cpp/win-x64-cuda-ext@3.16.2':
+    optional: true
+
+  '@node-llama-cpp/win-x64-cuda@3.15.0':
+    optional: true
+
+  '@node-llama-cpp/win-x64-cuda@3.16.2':
+    optional: true
+
+  '@node-llama-cpp/win-x64-vulkan@3.15.0':
+    optional: true
+
+  '@node-llama-cpp/win-x64-vulkan@3.16.2':
+    optional: true
+
   '@node-llama-cpp/win-x64@3.15.0':
     optional: true
 
@@ -9145,9 +9236,9 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  '@sliverp/qqbot@1.5.4(clawdbot@2026.1.24-3(@discordjs/opus@0.10.0(encoding@0.1.13))(@types/express@5.0.6)(devtools-protocol@0.0.1595872)(encoding@0.1.13)(opusscript@0.1.1)(typescript@5.9.3))(moltbot@0.1.0)(openclaw@2026.3.1(@napi-rs/canvas@0.1.95)(@types/express@5.0.6)(encoding@0.1.13)(hono@4.11.8)(node-llama-cpp@3.16.2(typescript@5.9.3)))':
+  '@sliverp/qqbot@1.5.4(clawdbot@2026.1.24-3(@discordjs/opus@0.10.0(encoding@0.1.13))(@types/express@5.0.6)(devtools-protocol@0.0.1596832)(encoding@0.1.13)(opusscript@0.1.1)(typescript@5.9.3))(moltbot@0.1.0)(openclaw@2026.3.1(@napi-rs/canvas@0.1.95)(@types/express@5.0.6)(encoding@0.1.13)(hono@4.11.8)(node-llama-cpp@3.16.2(typescript@5.9.3)))':
     dependencies:
-      clawdbot: 2026.1.24-3(@discordjs/opus@0.10.0(encoding@0.1.13))(@types/express@5.0.6)(devtools-protocol@0.0.1595872)(encoding@0.1.13)(opusscript@0.1.1)(typescript@5.9.3)
+      clawdbot: 2026.1.24-3(@discordjs/opus@0.10.0(encoding@0.1.13))(@types/express@5.0.6)(devtools-protocol@0.0.1596832)(encoding@0.1.13)(opusscript@0.1.1)(typescript@5.9.3)
       moltbot: 0.1.0
       openclaw: 2026.3.1(@napi-rs/canvas@0.1.95)(@types/express@5.0.6)(encoding@0.1.13)(hono@4.11.8)(node-llama-cpp@3.16.2(typescript@5.9.3))
 
@@ -10373,9 +10464,9 @@ snapshots:
 
   chownr@3.0.0: {}
 
-  chromium-bidi@13.0.1(devtools-protocol@0.0.1595872):
+  chromium-bidi@13.0.1(devtools-protocol@0.0.1596832):
     dependencies:
-      devtools-protocol: 0.0.1595872
+      devtools-protocol: 0.0.1596832
       mitt: 3.0.1
       zod: 3.25.76
 
@@ -10389,7 +10480,7 @@ snapshots:
     dependencies:
       clsx: 2.1.1
 
-  clawdbot@2026.1.24-3(@discordjs/opus@0.10.0(encoding@0.1.13))(@types/express@5.0.6)(devtools-protocol@0.0.1595872)(encoding@0.1.13)(opusscript@0.1.1)(typescript@5.9.3):
+  clawdbot@2026.1.24-3(@discordjs/opus@0.10.0(encoding@0.1.13))(@types/express@5.0.6)(devtools-protocol@0.0.1596832)(encoding@0.1.13)(opusscript@0.1.1)(typescript@5.9.3):
     dependencies:
       '@agentclientprotocol/sdk': 0.13.1(zod@4.3.6)
       '@aws-sdk/client-bedrock': 3.1000.0
@@ -10413,7 +10504,7 @@ snapshots:
       body-parser: 2.2.2
       chalk: 5.6.2
       chokidar: 5.0.0
-      chromium-bidi: 13.0.1(devtools-protocol@0.0.1595872)
+      chromium-bidi: 13.0.1(devtools-protocol@0.0.1596832)
       cli-highlight: 2.1.11
       commander: 14.0.3
       croner: 9.1.0
@@ -10751,7 +10842,7 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  devtools-protocol@0.0.1595872: {}
+  devtools-protocol@0.0.1596832: {}
 
   didyoumean@1.2.2: {}
 
@@ -11710,31 +11801,6 @@ snapshots:
 
   ipaddr.js@2.3.0: {}
 
-  ipull@3.9.3:
-    dependencies:
-      '@tinyhttp/content-disposition': 2.2.4
-      async-retry: 1.3.3
-      chalk: 5.6.2
-      ci-info: 4.4.0
-      cli-spinners: 2.9.2
-      commander: 10.0.1
-      eventemitter3: 5.0.4
-      filenamify: 6.0.0
-      fs-extra: 11.3.3
-      is-unicode-supported: 2.1.0
-      lifecycle-utils: 2.1.0
-      lodash.debounce: 4.0.8
-      lowdb: 7.0.1
-      pretty-bytes: 6.1.1
-      pretty-ms: 8.0.0
-      sleep-promise: 9.1.0
-      slice-ansi: 7.1.2
-      stdout-update: 4.0.1
-      strip-ansi: 7.1.2
-    optionalDependencies:
-      '@reflink/reflink': 0.1.19
-    optional: true
-
   ipull@3.9.5:
     dependencies:
       '@tinyhttp/content-disposition': 2.2.4
@@ -12685,7 +12751,7 @@ snapshots:
       filenamify: 6.0.0
       fs-extra: 11.3.3
       ignore: 7.0.5
-      ipull: 3.9.3
+      ipull: 3.9.5
       is-unicode-supported: 2.1.0
       lifecycle-utils: 3.1.1
       log-symbols: 7.0.1
@@ -12707,11 +12773,16 @@ snapshots:
       '@node-llama-cpp/linux-arm64': 3.15.0
       '@node-llama-cpp/linux-armv7l': 3.15.0
       '@node-llama-cpp/linux-x64': 3.15.0
+      '@node-llama-cpp/linux-x64-cuda': 3.15.0
+      '@node-llama-cpp/linux-x64-cuda-ext': 3.15.0
       '@node-llama-cpp/linux-x64-vulkan': 3.15.0
       '@node-llama-cpp/mac-arm64-metal': 3.15.0
       '@node-llama-cpp/mac-x64': 3.15.0
       '@node-llama-cpp/win-arm64': 3.15.0
       '@node-llama-cpp/win-x64': 3.15.0
+      '@node-llama-cpp/win-x64-cuda': 3.15.0
+      '@node-llama-cpp/win-x64-cuda-ext': 3.15.0
+      '@node-llama-cpp/win-x64-vulkan': 3.15.0
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -12752,11 +12823,16 @@ snapshots:
       '@node-llama-cpp/linux-arm64': 3.16.2
       '@node-llama-cpp/linux-armv7l': 3.16.2
       '@node-llama-cpp/linux-x64': 3.16.2
+      '@node-llama-cpp/linux-x64-cuda': 3.16.2
+      '@node-llama-cpp/linux-x64-cuda-ext': 3.16.2
       '@node-llama-cpp/linux-x64-vulkan': 3.16.2
       '@node-llama-cpp/mac-arm64-metal': 3.16.2
       '@node-llama-cpp/mac-x64': 3.16.2
       '@node-llama-cpp/win-arm64': 3.16.2
       '@node-llama-cpp/win-x64': 3.16.2
+      '@node-llama-cpp/win-x64-cuda': 3.16.2
+      '@node-llama-cpp/win-x64-cuda-ext': 3.16.2
+      '@node-llama-cpp/win-x64-vulkan': 3.16.2
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
diff --git a/src/App.tsx b/src/App.tsx
index 39b37219a..a7b47ea19 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,7 +9,6 @@ import { Toaster } from 'sonner';
 import i18n from './i18n';
 import { MainLayout } from './components/layout/MainLayout';
 import { TooltipProvider } from '@/components/ui/tooltip';
-import { Dashboard } from './pages/Dashboard';
 import { Models } from './pages/Models';
 import { Chat } from './pages/Chat';
 import { Channels } from './pages/Channels';
@@ -166,7 +165,6 @@ function App() {
           <Route element={<MainLayout />}>
             <Route path="/" element={<Chat />} />
             <Route path="/models" element={<Models />} />
-            <Route path="/dashboard" element={<Dashboard />} />
             <Route path="/channels" element={<Channels />} />
             <Route path="/skills" element={<Skills />} />
             <Route path="/cron" element={<Cron />} />
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index a8f29b2c0..e58a19d57 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -17,7 +17,6 @@ import {
   ExternalLink,
   Trash2,
   Cpu,
-  LayoutDashboard,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useSettingsStore } from '@/stores/settings';
@@ -105,7 +104,6 @@ const INITIAL_NOW_MS = Date.now();
 export function Sidebar() {
   const sidebarCollapsed = useSettingsStore((state) => state.sidebarCollapsed);
   const setSidebarCollapsed = useSettingsStore((state) => state.setSidebarCollapsed);
-  const devModeUnlocked = useSettingsStore((state) => state.devModeUnlocked);
 
   const sessions = useChatStore((s) => s.sessions);
   const currentSessionKey = useChatStore((s) => s.currentSessionKey);
@@ -173,7 +171,6 @@ export function Sidebar() {
     { to: '/channels', icon: <Network className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.channels') },
     { to: '/skills', icon: <Puzzle className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.skills') },
     { to: '/cron', icon: <Clock className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.cronTasks') },
-    { to: '/dashboard', icon: <LayoutDashboard className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.dashboard') },
   ];
 
   return (
@@ -286,21 +283,6 @@ export function Sidebar() {
 
       {/* Footer */}
       <div className="p-2 mt-auto">
-        {devModeUnlocked && !sidebarCollapsed && (
-          <Button
-            variant="ghost"
-            size="sm"
-            className="w-full justify-start mb-1 hover:bg-black/5 dark:hover:bg-white/5"
-            onClick={openDevConsole}
-          >
-            <div className="flex shrink-0 items-center justify-center text-muted-foreground">
-              <Terminal className="h-[18px] w-[18px] mr-2.5" strokeWidth={2} />
-            </div>
-            <span className="font-medium text-[14px] flex-1 text-left text-foreground/80 overflow-hidden text-ellipsis whitespace-nowrap">{t('sidebar.devConsole')}</span>
-            <ExternalLink className="h-3 w-3 shrink-0 ml-auto opacity-50 text-muted-foreground" />
-          </Button>
-        )}
-
         <NavLink
             to="/settings"
             className={({ isActive }) =>
@@ -321,6 +303,26 @@ export function Sidebar() {
             </>
           )}
         </NavLink>
+
+        <Button
+          variant="ghost"
+          className={cn(
+            'flex items-center gap-2.5 rounded-lg px-2.5 py-2 h-auto text-[14px] font-medium transition-colors w-full mt-1',
+            'hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80',
+            sidebarCollapsed ? 'justify-center px-0' : 'justify-start'
+          )}
+          onClick={openDevConsole}
+        >
+          <div className="flex shrink-0 items-center justify-center text-muted-foreground">
+            <Terminal className="h-[18px] w-[18px]" strokeWidth={2} />
+          </div>
+          {!sidebarCollapsed && (
+            <>
+              <span className="flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap">OpenClaw Page</span>
+              <ExternalLink className="h-3 w-3 shrink-0 ml-auto opacity-50 text-muted-foreground" />
+            </>
+          )}
+        </Button>
       </div>
 
       <ConfirmDialog
diff --git a/src/pages/Chat/ChatInput.tsx b/src/pages/Chat/ChatInput.tsx
index fba4879b9..9d0f32245 100644
--- a/src/pages/Chat/ChatInput.tsx
+++ b/src/pages/Chat/ChatInput.tsx
@@ -13,6 +13,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { hostApiFetch } from '@/lib/host-api';
 import { invokeIpc } from '@/lib/api-client';
 import { cn } from '@/lib/utils';
+import { useGatewayStore } from '@/stores/gateway';
 
 // ── Types ────────────────────────────────────────────────────────
 
@@ -84,6 +85,7 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
   const [attachments, setAttachments] = useState<FileAttachment[]>([]);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const isComposingRef = useRef(false);
+  const gatewayStatus = useGatewayStore((s) => s.status);
 
   // Auto-resize textarea
   useEffect(() => {
@@ -407,7 +409,12 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
           </Button>
         </div>
         <div className="mt-2.5 flex items-center justify-between gap-2 text-[11px] text-muted-foreground/60 px-4">
-          <span>Tip: switch sessions from the sidebar to keep context clean.</span>
+          <div className="flex items-center gap-1.5">
+            <div className={cn("w-1.5 h-1.5 rounded-full", gatewayStatus.state === 'running' ? "bg-green-500/80" : "bg-red-500/80")} />
+            <span>
+              gateway {gatewayStatus.state === 'running' ? 'connected' : gatewayStatus.state} | port: {gatewayStatus.port} {gatewayStatus.pid ? `| pid: ${gatewayStatus.pid}` : ''}
+            </span>
+          </div>
           {hasFailedAttachments && (
             <Button
               variant="link"
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
deleted file mode 100644
index 8f2e4d6b1..000000000
--- a/src/pages/Dashboard/index.tsx
+++ /dev/null
@@ -1,324 +0,0 @@
-/**
- * Dashboard Page
- * Main overview page showing system status and quick actions
- */
-import { useEffect, useState } from 'react';
-import {
-  Activity,
-  MessageSquare,
-  Radio,
-  Puzzle,
-  Clock,
-  Settings,
-  Plus,
-  Terminal,
-  Wrench,
-} from 'lucide-react';
-import { Link } from 'react-router-dom';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { useGatewayStore } from '@/stores/gateway';
-import { useChannelsStore } from '@/stores/channels';
-import { useSkillsStore } from '@/stores/skills';
-import { useSettingsStore } from '@/stores/settings';
-import { StatusBadge } from '@/components/common/StatusBadge';
-import { FeedbackState } from '@/components/common/FeedbackState';
-import { hostApiFetch } from '@/lib/host-api';
-import { trackUiEvent } from '@/lib/telemetry';
-import { useTranslation } from 'react-i18next';
-
-export function Dashboard() {
-  const { t } = useTranslation('dashboard');
-  const gatewayStatus = useGatewayStore((state) => state.status);
-  const { channels, fetchChannels } = useChannelsStore();
-  const { skills, fetchSkills } = useSkillsStore();
-  const devModeUnlocked = useSettingsStore((state) => state.devModeUnlocked);
-
-  const isGatewayRunning = gatewayStatus.state === 'running';
-  const [uptime, setUptime] = useState(0);
-
-  // Track page view on mount only.
-  useEffect(() => {
-    trackUiEvent('dashboard.page_viewed');
-  }, []);
-
-  // Fetch data only when gateway is running.
-  useEffect(() => {
-    if (isGatewayRunning) {
-      fetchChannels();
-      fetchSkills();
-    }
-  }, [fetchChannels, fetchSkills, isGatewayRunning]);
-
-  // Calculate statistics safely
-  const connectedChannels = Array.isArray(channels) ? channels.filter((c) => c.status === 'connected').length : 0;
-  const enabledSkills = Array.isArray(skills) ? skills.filter((s) => s.enabled).length : 0;
-
-  // Update uptime periodically
-  useEffect(() => {
-    const updateUptime = () => {
-      if (gatewayStatus.connectedAt) {
-        setUptime(Math.floor((Date.now() - gatewayStatus.connectedAt) / 1000));
-      } else {
-        setUptime(0);
-      }
-    };
-
-    // Update immediately
-    updateUptime();
-
-    // Update every second
-    const interval = setInterval(updateUptime, 1000);
-
-    return () => clearInterval(interval);
-  }, [gatewayStatus.connectedAt]);
-
-  const openDevConsole = async () => {
-    try {
-      const result = await hostApiFetch<{
-        success: boolean;
-        url?: string;
-        error?: string;
-      }>('/api/gateway/control-ui');
-      if (result.success && result.url) {
-        trackUiEvent('dashboard.quick_action', { action: 'dev_console' });
-        window.electron.openExternal(result.url);
-      } else {
-        console.error('Failed to get Dev Console URL:', result.error);
-      }
-    } catch (err) {
-      console.error('Error opening Dev Console:', err);
-    }
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Status Cards */}
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-        {/* Gateway Status */}
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium">{t('gateway')}</CardTitle>
-            <Activity className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center gap-2">
-              <StatusBadge status={gatewayStatus.state} />
-            </div>
-            {gatewayStatus.state === 'running' && (
-              <p className="mt-1 text-xs text-muted-foreground">
-                {t('port', { port: gatewayStatus.port })} | {t('pid', { pid: gatewayStatus.pid || 'N/A' })}
-              </p>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* Channels */}
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium">{t('channels')}</CardTitle>
-            <Radio className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{connectedChannels}</div>
-            <p className="text-xs text-muted-foreground">
-              {t('connectedOf', { connected: connectedChannels, total: channels.length })}
-            </p>
-          </CardContent>
-        </Card>
-
-        {/* Skills */}
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium">{t('skills')}</CardTitle>
-            <Puzzle className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{enabledSkills}</div>
-            <p className="text-xs text-muted-foreground">
-              {t('enabledOf', { enabled: enabledSkills, total: skills.length })}
-            </p>
-          </CardContent>
-        </Card>
-
-        {/* Uptime */}
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-sm font-medium">{t('uptime')}</CardTitle>
-            <Clock className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {uptime > 0 ? formatUptime(uptime) : '—'}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {gatewayStatus.state === 'running' ? t('sinceRestart') : t('gatewayNotRunning')}
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Quick Actions */}
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('quickActions.title')}</CardTitle>
-          <CardDescription>{t('quickActions.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
-            <Button variant="outline" className="h-auto flex-col gap-2 py-4" asChild>
-              <Link to="/settings" onClick={() => trackUiEvent('dashboard.quick_action', { action: 'add_provider' })}>
-                <Wrench className="h-5 w-5" />
-                <span>{t('quickActions.addProvider')}</span>
-              </Link>
-            </Button>
-            <Button variant="outline" className="h-auto flex-col gap-2 py-4" asChild>
-              <Link to="/channels" onClick={() => trackUiEvent('dashboard.quick_action', { action: 'add_channel' })}>
-                <Plus className="h-5 w-5" />
-                <span>{t('quickActions.addChannel')}</span>
-              </Link>
-            </Button>
-            <Button variant="outline" className="h-auto flex-col gap-2 py-4" asChild>
-              <Link to="/cron" onClick={() => trackUiEvent('dashboard.quick_action', { action: 'create_cron' })}>
-                <Clock className="h-5 w-5" />
-                <span>{t('quickActions.createCron')}</span>
-              </Link>
-            </Button>
-            <Button variant="outline" className="h-auto flex-col gap-2 py-4" asChild>
-              <Link to="/skills" onClick={() => trackUiEvent('dashboard.quick_action', { action: 'install_skill' })}>
-                <Puzzle className="h-5 w-5" />
-                <span>{t('quickActions.installSkill')}</span>
-              </Link>
-            </Button>
-            <Button variant="outline" className="h-auto flex-col gap-2 py-4" asChild>
-              <Link to="/" onClick={() => trackUiEvent('dashboard.quick_action', { action: 'open_chat' })}>
-                <MessageSquare className="h-5 w-5" />
-                <span>{t('quickActions.openChat')}</span>
-              </Link>
-            </Button>
-            <Button variant="outline" className="h-auto flex-col gap-2 py-4" asChild>
-              <Link to="/settings" onClick={() => trackUiEvent('dashboard.quick_action', { action: 'open_settings' })}>
-                <Settings className="h-5 w-5" />
-                <span>{t('quickActions.settings')}</span>
-              </Link>
-            </Button>
-            {devModeUnlocked && (
-              <Button
-                variant="outline"
-                className="h-auto flex-col gap-2 py-4"
-                onClick={openDevConsole}
-              >
-                <Terminal className="h-5 w-5" />
-                <span>{t('quickActions.devConsole')}</span>
-              </Button>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Recent Activity */}
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-        {/* Connected Channels */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-lg">{t('connectedChannels')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {(!Array.isArray(channels) || channels.length === 0) ? (
-              <FeedbackState
-                state="empty"
-                title={t('noChannels')}
-                action={(
-                  <Button variant="link" asChild className="mt-2">
-                    <Link to="/channels">{t('addFirst')}</Link>
-                  </Button>
-                )}
-              />
-            ) : (
-              <div className="space-y-3">
-                {channels.slice(0, 5).map((channel) => (
-                  <div
-                    key={channel.id}
-                    className="flex items-center justify-between rounded-lg border p-3"
-                  >
-                    <div className="flex items-center gap-3">
-                      <span className="text-lg">
-                        {channel.type === 'whatsapp' && '📱'}
-                        {channel.type === 'telegram' && '✈️'}
-                        {channel.type === 'discord' && '🎮'}
-                      </span>
-                      <div>
-                        <p className="font-medium">{channel.name}</p>
-                        <p className="text-xs text-muted-foreground capitalize">
-                          {channel.type}
-                        </p>
-                      </div>
-                    </div>
-                    <StatusBadge status={channel.status} />
-                  </div>
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* Enabled Skills */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-lg">{t('activeSkills')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {(!Array.isArray(skills) || skills.filter((s) => s.enabled).length === 0) ? (
-              <FeedbackState
-                state="empty"
-                title={t('noSkills')}
-                action={(
-                  <Button variant="link" asChild className="mt-2">
-                    <Link to="/skills">{t('enableSome')}</Link>
-                  </Button>
-                )}
-              />
-            ) : (
-              <div className="flex flex-wrap gap-2">
-                {skills
-                  .filter((s) => s.enabled)
-                  .slice(0, 12)
-                  .map((skill) => (
-                    <Badge key={skill.id} variant="secondary">
-                      {skill.icon && <span className="mr-1">{skill.icon}</span>}
-                      {skill.name}
-                    </Badge>
-                  ))}
-                {skills.filter((s) => s.enabled).length > 12 && (
-                  <Badge variant="outline">
-                    {t('more', { count: skills.filter((s) => s.enabled).length - 12 })}
-                  </Badge>
-                )}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Format uptime in human-readable format
- */
-function formatUptime(seconds: number): string {
-  const days = Math.floor(seconds / 86400);
-  const hours = Math.floor((seconds % 86400) / 3600);
-  const minutes = Math.floor((seconds % 3600) / 60);
-
-  if (days > 0) {
-    return `${days}d ${hours}h`;
-  } else if (hours > 0) {
-    return `${hours}h ${minutes}m`;
-  } else {
-    return `${minutes}m`;
-  }
-}
-
-export default Dashboard;
diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
index 07e5ef60e..037b59d01 100644
--- a/src/pages/Settings/index.tsx
+++ b/src/pages/Settings/index.tsx
@@ -8,16 +8,11 @@ import {
   Moon,
   Monitor,
   RefreshCw,
-  Terminal,
   ExternalLink,
-  Download,
   Copy,
-  ChevronDown,
-  ChevronRight,
   FileText,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { Separator } from '@/components/ui/separator';
@@ -44,6 +39,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { SUPPORTED_LANGUAGES } from '@/i18n';
 import { hostApiFetch } from '@/lib/host-api';
+import { cn } from '@/lib/utils';
 type ControlUiInfo = {
   url: string;
   token: string;
@@ -91,7 +87,6 @@ export function Settings() {
   const [proxyAllServerDraft, setProxyAllServerDraft] = useState('');
   const [proxyBypassRulesDraft, setProxyBypassRulesDraft] = useState('');
   const [proxyEnabledDraft, setProxyEnabledDraft] = useState(false);
-  const [showAdvancedProxy, setShowAdvancedProxy] = useState(false);
   const [savingProxy, setSavingProxy] = useState(false);
   const [wsDiagnosticEnabled, setWsDiagnosticEnabled] = useState(false);
   const [showTelemetryViewer, setShowTelemetryViewer] = useState(false);
@@ -124,27 +119,7 @@ export function Settings() {
     }
   };
 
-  // Open developer console
-  const openDevConsole = async () => {
-    try {
-      const result = await hostApiFetch<{
-        success: boolean;
-        url?: string;
-        token?: string;
-        port?: number;
-        error?: string;
-      }>('/api/gateway/control-ui');
-      if (result.success && result.url && result.token && typeof result.port === 'number') {
-        setControlUiInfo({ url: result.url, token: result.token, port: result.port });
-        trackUiEvent('settings.open_dev_console');
-        window.electron.openExternal(result.url);
-      } else {
-        console.error('Failed to get Dev Console URL:', result.error);
-      }
-    } catch (err) {
-      console.error('Error opening Dev Console:', err);
-    }
-  };
+
 
   const refreshControlUiInfo = async () => {
     try {
@@ -390,164 +365,182 @@ export function Settings() {
   };
 
   return (
-    <div className="flex flex-col gap-6 p-6">
-      <div>
-        <h1 className="text-2xl font-bold">{t('title')}</h1>
-        <p className="text-muted-foreground">
-          {t('subtitle')}
-        </p>
-      </div>
-
-      {/* Appearance */}
-      <Card className="order-2">
-        <CardHeader>
-          <CardTitle>{t('appearance.title')}</CardTitle>
-          <CardDescription>{t('appearance.description')}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <Label>{t('appearance.theme')}</Label>
-            <div className="flex gap-2">
-              <Button
-                variant={theme === 'light' ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setTheme('light')}
-              >
-                <Sun className="h-4 w-4 mr-2" />
-                {t('appearance.light')}
-              </Button>
-              <Button
-                variant={theme === 'dark' ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setTheme('dark')}
-              >
-                <Moon className="h-4 w-4 mr-2" />
-                {t('appearance.dark')}
-              </Button>
-              <Button
-                variant={theme === 'system' ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setTheme('system')}
-              >
-                <Monitor className="h-4 w-4 mr-2" />
-                {t('appearance.system')}
-              </Button>
-            </div>
+    <div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
+      <div className="w-full max-w-4xl mx-auto flex flex-col h-full p-10 pt-16">
+        
+        {/* Header */}
+        <div className="flex flex-col md:flex-row md:items-start justify-between mb-12 shrink-0 gap-4">
+          <div>
+            <h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
+              {t('title')}
+            </h1>
+            <p className="text-[17px] text-foreground/80 font-medium">
+              {t('subtitle')}
+            </p>
           </div>
-          <div className="space-y-2">
-            <Label>{t('appearance.language')}</Label>
-            <div className="flex gap-2">
-              {SUPPORTED_LANGUAGES.map((lang) => (
-                <Button
-                  key={lang.code}
-                  variant={language === lang.code ? 'default' : 'outline'}
-                  size="sm"
-                  onClick={() => setLanguage(lang.code)}
-                >
-                  {lang.label}
-                </Button>
-              ))}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+        </div>
 
-      {/* Gateway */}
-      <Card className="order-1">
-        <CardHeader>
-          <CardTitle>{t('gateway.title')}</CardTitle>
-          <CardDescription>{t('gateway.description')}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <Label>{t('gateway.status')}</Label>
-              <p className="text-sm text-muted-foreground">
-                {t('gateway.port')}: {gatewayStatus.port}
-              </p>
-            </div>
-            <div className="flex items-center gap-2">
-              <Badge
-                variant={
-                  gatewayStatus.state === 'running'
-                    ? 'success'
-                    : gatewayStatus.state === 'error'
-                      ? 'destructive'
-                      : 'secondary'
-                }
-              >
-                {gatewayStatus.state}
-              </Badge>
-              <Button variant="outline" size="sm" onClick={restartGateway}>
-                <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common:actions.restart')}
-              </Button>
-              <Button variant="outline" size="sm" onClick={handleShowLogs}>
-                <FileText className="h-4 w-4 mr-2" />
-                {t('gateway.logs')}
-              </Button>
-            </div>
-          </div>
+        {/* Content Area */}
+        <div className="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 -mr-2 space-y-12">
 
-          {showLogs && (
-            <div className="mt-4 p-4 rounded-lg bg-black/10 dark:bg-black/40 border border-border">
-              <div className="flex items-center justify-between mb-2">
-                <p className="font-medium text-sm">{t('gateway.appLogs')}</p>
-                <div className="flex gap-2">
-                  <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={handleOpenLogDir}>
-                    <ExternalLink className="h-3 w-3 mr-1" />
-                    {t('gateway.openFolder')}
+          {/* Appearance */}
+          <div>
+            <h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
+              {t('appearance.title')}
+            </h2>
+            <div className="space-y-6">
+              <div className="space-y-3">
+                <Label className="text-[15px] font-medium text-foreground/80">{t('appearance.theme')}</Label>
+                <div className="flex flex-wrap gap-2">
+                  <Button
+                    variant={theme === 'light' ? 'secondary' : 'outline'}
+                    className={cn("rounded-full px-5 h-10 border-black/10 dark:border-white/10", theme === 'light' ? "bg-black/5 dark:bg-white/10 text-foreground" : "bg-transparent text-muted-foreground hover:bg-black/5 dark:hover:bg-white/5")}
+                    onClick={() => setTheme('light')}
+                  >
+                    <Sun className="h-4 w-4 mr-2" />
+                    {t('appearance.light')}
                   </Button>
-                  <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => setShowLogs(false)}>
-                    {t('common:actions.close')}
+                  <Button
+                    variant={theme === 'dark' ? 'secondary' : 'outline'}
+                    className={cn("rounded-full px-5 h-10 border-black/10 dark:border-white/10", theme === 'dark' ? "bg-black/5 dark:bg-white/10 text-foreground" : "bg-transparent text-muted-foreground hover:bg-black/5 dark:hover:bg-white/5")}
+                    onClick={() => setTheme('dark')}
+                  >
+                    <Moon className="h-4 w-4 mr-2" />
+                    {t('appearance.dark')}
+                  </Button>
+                  <Button
+                    variant={theme === 'system' ? 'secondary' : 'outline'}
+                    className={cn("rounded-full px-5 h-10 border-black/10 dark:border-white/10", theme === 'system' ? "bg-black/5 dark:bg-white/10 text-foreground" : "bg-transparent text-muted-foreground hover:bg-black/5 dark:hover:bg-white/5")}
+                    onClick={() => setTheme('system')}
+                  >
+                    <Monitor className="h-4 w-4 mr-2" />
+                    {t('appearance.system')}
                   </Button>
                 </div>
               </div>
-              <pre className="text-xs text-muted-foreground bg-background/50 p-3 rounded max-h-60 overflow-auto whitespace-pre-wrap font-mono">
-                {logContent || t('chat:noLogs')}
-              </pre>
+              <div className="space-y-3">
+                <Label className="text-[15px] font-medium text-foreground/80">{t('appearance.language')}</Label>
+                <div className="flex flex-wrap gap-2">
+                  {SUPPORTED_LANGUAGES.map((lang) => (
+                    <Button
+                      key={lang.code}
+                      variant={language === lang.code ? 'secondary' : 'outline'}
+                      className={cn("rounded-full px-5 h-10 border-black/10 dark:border-white/10", language === lang.code ? "bg-black/5 dark:bg-white/10 text-foreground" : "bg-transparent text-muted-foreground hover:bg-black/5 dark:hover:bg-white/5")}
+                      onClick={() => setLanguage(lang.code)}
+                    >
+                      {lang.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
             </div>
-          )}
-
-          <Separator />
-
-          <div className="flex items-center justify-between">
-            <div>
-              <Label>{t('gateway.autoStart')}</Label>
-              <p className="text-sm text-muted-foreground">
-                {t('gateway.autoStartDesc')}
-              </p>
-            </div>
-            <Switch
-              checked={gatewayAutoStart}
-              onCheckedChange={setGatewayAutoStart}
-            />
           </div>
 
-          <Separator />
+          <Separator className="bg-black/5 dark:bg-white/5" />
 
-          {devModeUnlocked ? (
-            <div className="space-y-4">
-              <div className="rounded-md border border-border/60 p-3">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="w-full justify-start"
-                  onClick={() => setShowAdvancedProxy((prev) => !prev)}
-                >
-                  {showAdvancedProxy ? (
-                    <ChevronDown className="h-4 w-4 mr-2" />
-                  ) : (
-                    <ChevronRight className="h-4 w-4 mr-2" />
-                  )}
-                  {showAdvancedProxy ? t('gateway.hideAdvancedProxy') : t('gateway.showAdvancedProxy')}
-                </Button>
-                {showAdvancedProxy && (
-                  <div className="mt-3 space-y-4">
+          {/* Gateway */}
+          <div>
+            <h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
+              {t('gateway.title')}
+            </h2>
+            <div className="space-y-6">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <div>
+                  <Label className="text-[15px] font-medium text-foreground">{t('gateway.status')}</Label>
+                  <p className="text-[13px] text-muted-foreground mt-1">
+                    {t('gateway.port')}: {gatewayStatus.port}
+                  </p>
+                </div>
+                <div className="flex flex-wrap items-center gap-2">
+                  <div className={cn(
+                    "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[13px] font-medium border",
+                    gatewayStatus.state === 'running' ? "bg-green-500/10 text-green-600 dark:text-green-500 border-green-500/20" : 
+                    gatewayStatus.state === 'error' ? "bg-red-500/10 text-red-600 dark:text-red-500 border-red-500/20" : 
+                    "bg-black/5 dark:bg-white/5 text-muted-foreground border-transparent"
+                  )}>
+                    <div className={cn("w-1.5 h-1.5 rounded-full", 
+                      gatewayStatus.state === 'running' ? "bg-green-500" : 
+                      gatewayStatus.state === 'error' ? "bg-red-500" : "bg-muted-foreground"
+                    )} />
+                    {gatewayStatus.state}
+                  </div>
+                  <Button variant="outline" size="sm" onClick={restartGateway} className="rounded-full h-8 px-4 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5">
+                    <RefreshCw className="h-3.5 w-3.5 mr-1.5" />
+                    {t('common:actions.restart')}
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={handleShowLogs} className="rounded-full h-8 px-4 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5">
+                    <FileText className="h-3.5 w-3.5 mr-1.5" />
+                    {t('gateway.logs')}
+                  </Button>
+                </div>
+              </div>
+
+              {showLogs && (
+                <div className="p-4 rounded-2xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5">
+                  <div className="flex items-center justify-between mb-3">
+                    <p className="font-medium text-[14px]">{t('gateway.appLogs')}</p>
+                    <div className="flex gap-2">
+                      <Button variant="ghost" size="sm" className="h-7 text-[12px] rounded-full hover:bg-black/5 dark:hover:bg-white/10" onClick={handleOpenLogDir}>
+                        <ExternalLink className="h-3 w-3 mr-1.5" />
+                        {t('gateway.openFolder')}
+                      </Button>
+                      <Button variant="ghost" size="sm" className="h-7 text-[12px] rounded-full hover:bg-black/5 dark:hover:bg-white/10" onClick={() => setShowLogs(false)}>
+                        {t('common:actions.close')}
+                      </Button>
+                    </div>
+                  </div>
+                  <pre className="text-[12px] text-muted-foreground bg-white dark:bg-[#1a1a19] p-4 rounded-xl max-h-60 overflow-auto whitespace-pre-wrap font-mono border border-black/5 dark:border-white/5 shadow-inner">
+                    {logContent || t('chat:noLogs')}
+                  </pre>
+                </div>
+              )}
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label className="text-[15px] font-medium text-foreground">{t('gateway.autoStart')}</Label>
+                  <p className="text-[13px] text-muted-foreground mt-1">
+                    {t('gateway.autoStartDesc')}
+                  </p>
+                </div>
+                <Switch
+                  checked={gatewayAutoStart}
+                  onCheckedChange={setGatewayAutoStart}
+                />
+              </div>
+
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label className="text-[15px] font-medium text-foreground">{t('advanced.devMode')}</Label>
+                  <p className="text-[13px] text-muted-foreground mt-1">
+                    {t('advanced.devModeDesc')}
+                  </p>
+                </div>
+                <Switch
+                  checked={devModeUnlocked}
+                  onCheckedChange={setDevModeUnlocked}
+                  />
+              </div>
+
+            </div>
+          </div>
+
+
+          {/* Developer */}
+          {devModeUnlocked && (
+            <>
+              <Separator className="bg-black/5 dark:bg-white/5" />
+              <div>
+                <h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
+                  {t('developer.title')}
+                </h2>
+                <div className="space-y-8">
+                  {/* Gateway Proxy */}
+                  <div className="space-y-4">
                     <div className="flex items-center justify-between">
                       <div>
-                        <Label>{t('gateway.proxyTitle')}</Label>
-                        <p className="text-sm text-muted-foreground">
+                        <Label className="text-[14px] font-medium text-foreground/80">Gateway Proxy</Label>
+                        <p className="text-[13px] text-muted-foreground">
                           {t('gateway.proxyDesc')}
                         </p>
                       </div>
@@ -557,387 +550,347 @@ export function Settings() {
                       />
                     </div>
 
-                    <div className="space-y-2">
-                      <Label htmlFor="proxy-server">{t('gateway.proxyServer')}</Label>
-                      <Input
-                        id="proxy-server"
-                        value={proxyServerDraft}
-                        onChange={(event) => setProxyServerDraft(event.target.value)}
-                        placeholder="http://127.0.0.1:7890"
-                      />
-                      <p className="text-xs text-muted-foreground">
-                        {t('gateway.proxyServerHelp')}
-                      </p>
-                    </div>
+                    {proxyEnabledDraft && (
+                      <div className="space-y-4 pt-2">
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                          <div className="space-y-2">
+                            <Label htmlFor="proxy-server" className="text-[13px] text-foreground/80">{t('gateway.proxyServer')}</Label>
+                            <Input
+                              id="proxy-server"
+                              value={proxyServerDraft}
+                              onChange={(event) => setProxyServerDraft(event.target.value)}
+                              placeholder="http://127.0.0.1:7890"
+                              className="h-10 rounded-xl bg-black/5 dark:bg-white/5 border-transparent font-mono text-[13px]"
+                            />
+                            <p className="text-[11px] text-muted-foreground">
+                              {t('gateway.proxyServerHelp')}
+                            </p>
+                          </div>
 
-                    <div className="space-y-2">
-                      <Label htmlFor="proxy-http-server">{t('gateway.proxyHttpServer')}</Label>
-                      <Input
-                        id="proxy-http-server"
-                        value={proxyHttpServerDraft}
-                        onChange={(event) => setProxyHttpServerDraft(event.target.value)}
-                        placeholder={proxyServerDraft || 'http://127.0.0.1:7890'}
-                      />
-                      <p className="text-xs text-muted-foreground">
-                        {t('gateway.proxyHttpServerHelp')}
-                      </p>
-                    </div>
+                          <div className="space-y-2">
+                            <Label htmlFor="proxy-http-server" className="text-[13px] text-foreground/80">{t('gateway.proxyHttpServer')}</Label>
+                            <Input
+                              id="proxy-http-server"
+                              value={proxyHttpServerDraft}
+                              onChange={(event) => setProxyHttpServerDraft(event.target.value)}
+                              placeholder={proxyServerDraft || 'http://127.0.0.1:7890'}
+                              className="h-10 rounded-xl bg-black/5 dark:bg-white/5 border-transparent font-mono text-[13px]"
+                            />
+                            <p className="text-[11px] text-muted-foreground">
+                              {t('gateway.proxyHttpServerHelp')}
+                            </p>
+                          </div>
 
-                    <div className="space-y-2">
-                      <Label htmlFor="proxy-https-server">{t('gateway.proxyHttpsServer')}</Label>
-                      <Input
-                        id="proxy-https-server"
-                        value={proxyHttpsServerDraft}
-                        onChange={(event) => setProxyHttpsServerDraft(event.target.value)}
-                        placeholder={proxyServerDraft || 'http://127.0.0.1:7890'}
-                      />
-                      <p className="text-xs text-muted-foreground">
-                        {t('gateway.proxyHttpsServerHelp')}
-                      </p>
-                    </div>
+                          <div className="space-y-2">
+                            <Label htmlFor="proxy-https-server" className="text-[13px] text-foreground/80">{t('gateway.proxyHttpsServer')}</Label>
+                            <Input
+                              id="proxy-https-server"
+                              value={proxyHttpsServerDraft}
+                              onChange={(event) => setProxyHttpsServerDraft(event.target.value)}
+                              placeholder={proxyServerDraft || 'http://127.0.0.1:7890'}
+                              className="h-10 rounded-xl bg-black/5 dark:bg-white/5 border-transparent font-mono text-[13px]"
+                            />
+                            <p className="text-[11px] text-muted-foreground">
+                              {t('gateway.proxyHttpsServerHelp')}
+                            </p>
+                          </div>
 
-                    <div className="space-y-2">
-                      <Label htmlFor="proxy-all-server">{t('gateway.proxyAllServer')}</Label>
-                      <Input
-                        id="proxy-all-server"
-                        value={proxyAllServerDraft}
-                        onChange={(event) => setProxyAllServerDraft(event.target.value)}
-                        placeholder={proxyServerDraft || 'socks5://127.0.0.1:7891'}
-                      />
-                      <p className="text-xs text-muted-foreground">
-                        {t('gateway.proxyAllServerHelp')}
-                      </p>
-                    </div>
+                          <div className="space-y-2">
+                            <Label htmlFor="proxy-all-server" className="text-[13px] text-foreground/80">{t('gateway.proxyAllServer')}</Label>
+                            <Input
+                              id="proxy-all-server"
+                              value={proxyAllServerDraft}
+                              onChange={(event) => setProxyAllServerDraft(event.target.value)}
+                              placeholder={proxyServerDraft || 'socks5://127.0.0.1:7891'}
+                              className="h-10 rounded-xl bg-black/5 dark:bg-white/5 border-transparent font-mono text-[13px]"
+                            />
+                            <p className="text-[11px] text-muted-foreground">
+                              {t('gateway.proxyAllServerHelp')}
+                            </p>
+                          </div>
+                        </div>
 
-                    <div className="space-y-2">
-                      <Label htmlFor="proxy-bypass">{t('gateway.proxyBypass')}</Label>
-                      <Input
-                        id="proxy-bypass"
-                        value={proxyBypassRulesDraft}
-                        onChange={(event) => setProxyBypassRulesDraft(event.target.value)}
-                        placeholder="<local>;localhost;127.0.0.1;::1"
-                      />
-                      <p className="text-xs text-muted-foreground">
-                        {t('gateway.proxyBypassHelp')}
-                      </p>
-                    </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="proxy-bypass" className="text-[13px] text-foreground/80">{t('gateway.proxyBypass')}</Label>
+                          <Input
+                            id="proxy-bypass"
+                            value={proxyBypassRulesDraft}
+                            onChange={(event) => setProxyBypassRulesDraft(event.target.value)}
+                            placeholder="<local>;localhost;127.0.0.1;::1"
+                            className="h-10 rounded-xl bg-black/5 dark:bg-white/5 border-transparent font-mono text-[13px]"
+                          />
+                          <p className="text-[11px] text-muted-foreground">
+                            {t('gateway.proxyBypassHelp')}
+                          </p>
+                        </div>
 
-                    <div className="flex items-center justify-between gap-3 rounded-lg border border-border/60 bg-background/40 p-3">
-                      <p className="text-sm text-muted-foreground">
-                        {t('gateway.proxyRestartNote')}
-                      </p>
+                        <div className="flex items-center gap-4 pt-2">
+                          <Button
+                            variant="outline"
+                            onClick={handleSaveProxySettings}
+                            disabled={savingProxy}
+                            className="rounded-xl h-10 px-5 bg-transparent border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5"
+                          >
+                            <RefreshCw className={`h-4 w-4 mr-2${savingProxy ? ' animate-spin' : ''}`} />
+                            {savingProxy ? t('common:status.saving') : t('common:actions.save')}
+                          </Button>
+                          <p className="text-[12px] text-muted-foreground">
+                            {t('gateway.proxyRestartNote')}
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                  <div className="space-y-4 pt-4">
+                    <Label className="text-[14px] font-medium text-foreground/80">{t('developer.gatewayToken')}</Label>
+                    <p className="text-[13px] text-muted-foreground">
+                      {t('developer.gatewayTokenDesc')}
+                    </p>
+                    <div className="flex flex-wrap gap-2">
+                      <Input
+                        readOnly
+                        value={controlUiInfo?.token || ''}
+                        placeholder={t('developer.tokenUnavailable')}
+                        className="font-mono text-[13px] h-10 rounded-xl bg-black/5 dark:bg-white/5 border-transparent flex-1 min-w-[200px]"
+                      />
                       <Button
+                        type="button"
                         variant="outline"
-                        onClick={handleSaveProxySettings}
-                        disabled={savingProxy}
+                        onClick={refreshControlUiInfo}
+                        disabled={!devModeUnlocked}
+                        className="rounded-xl h-10 px-4 bg-transparent border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5"
                       >
-                        <RefreshCw className={`h-4 w-4 mr-2${savingProxy ? ' animate-spin' : ''}`} />
-                        {savingProxy ? t('common:status.saving') : t('common:actions.save')}
+                        <RefreshCw className="h-4 w-4 mr-2" />
+                        {t('common:actions.load')}
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={handleCopyGatewayToken}
+                        disabled={!controlUiInfo?.token}
+                        className="rounded-xl h-10 px-4 bg-transparent border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5"
+                      >
+                        <Copy className="h-4 w-4 mr-2" />
+                        {t('common:actions.copy')}
                       </Button>
                     </div>
                   </div>
-                )}
-              </div>
-            </div>
-          ) : (
-            <div className="rounded-md border border-border/60 bg-muted/30 p-4 text-sm text-muted-foreground">
-              {t('advanced.devModeDesc')}
-            </div>
-          )}
-        </CardContent>
-      </Card>
 
-      {/* Updates */}
-      <Card className="order-2">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Download className="h-5 w-5" />
-            {t('updates.title')}
-          </CardTitle>
-          <CardDescription>{t('updates.description')}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <UpdateSettings />
-
-          <Separator />
-
-          <div className="flex items-center justify-between">
-            <div>
-              <Label>{t('updates.autoCheck')}</Label>
-              <p className="text-sm text-muted-foreground">
-                {t('updates.autoCheckDesc')}
-              </p>
-            </div>
-            <Switch
-              checked={autoCheckUpdate}
-              onCheckedChange={setAutoCheckUpdate}
-            />
-          </div>
-
-          <div className="flex items-center justify-between">
-            <div>
-              <Label>{t('updates.autoDownload')}</Label>
-              <p className="text-sm text-muted-foreground">
-                {t('updates.autoDownloadDesc')}
-              </p>
-            </div>
-            <Switch
-              checked={autoDownloadUpdate}
-              onCheckedChange={(value) => {
-                setAutoDownloadUpdate(value);
-                updateSetAutoDownload(value);
-              }}
-            />
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Advanced */}
-      <Card className="order-2">
-        <CardHeader>
-          <CardTitle>{t('advanced.title')}</CardTitle>
-          <CardDescription>{t('advanced.description')}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <Label>{t('advanced.devMode')}</Label>
-              <p className="text-sm text-muted-foreground">
-                {t('advanced.devModeDesc')}
-              </p>
-            </div>
-            <Switch
-              checked={devModeUnlocked}
-              onCheckedChange={setDevModeUnlocked}
-            />
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Developer */}
-      {devModeUnlocked && (
-        <Card className="order-2">
-          <CardHeader>
-            <CardTitle>{t('developer.title')}</CardTitle>
-            <CardDescription>{t('developer.description')}</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <Label>{t('developer.console')}</Label>
-              <p className="text-sm text-muted-foreground">
-                {t('developer.consoleDesc')}
-              </p>
-              <Button variant="outline" onClick={openDevConsole}>
-                <Terminal className="h-4 w-4 mr-2" />
-                {t('developer.openConsole')}
-                <ExternalLink className="h-3 w-3 ml-2" />
-              </Button>
-              <p className="text-xs text-muted-foreground">
-                {t('developer.consoleNote')}
-              </p>
-              <div className="space-y-2 pt-2">
-                <Label>{t('developer.gatewayToken')}</Label>
-                <p className="text-sm text-muted-foreground">
-                  {t('developer.gatewayTokenDesc')}
-                </p>
-                <div className="flex gap-2">
-                  <Input
-                    readOnly
-                    value={controlUiInfo?.token || ''}
-                    placeholder={t('developer.tokenUnavailable')}
-                    className="font-mono"
-                  />
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={refreshControlUiInfo}
-                    disabled={!devModeUnlocked}
-                  >
-                    <RefreshCw className="h-4 w-4 mr-2" />
-                    {t('common:actions.load')}
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={handleCopyGatewayToken}
-                    disabled={!controlUiInfo?.token}
-                  >
-                    <Copy className="h-4 w-4 mr-2" />
-                    {t('common:actions.copy')}
-                  </Button>
-                </div>
-              </div>
-            </div>
-            {showCliTools && (
-              <>
-                <Separator />
-                <div className="space-y-2">
-                  <Label>{t('developer.cli')}</Label>
-                  <p className="text-sm text-muted-foreground">
-                    {t('developer.cliDesc')}
-                  </p>
-                  {isWindows && (
-                    <p className="text-xs text-muted-foreground">
-                      {t('developer.cliPowershell')}
-                    </p>
+                  {showCliTools && (
+                    <div className="space-y-3">
+                      <Label className="text-[15px] font-medium text-foreground">{t('developer.cli')}</Label>
+                      <p className="text-[13px] text-muted-foreground">
+                        {t('developer.cliDesc')}
+                      </p>
+                      {isWindows && (
+                        <p className="text-[12px] text-muted-foreground">
+                          {t('developer.cliPowershell')}
+                        </p>
+                      )}
+                      <div className="flex flex-wrap gap-2">
+                        <Input
+                          readOnly
+                          value={openclawCliCommand}
+                          placeholder={openclawCliError || t('developer.cmdUnavailable')}
+                          className="font-mono text-[13px] h-10 rounded-xl bg-black/5 dark:bg-white/5 border-transparent flex-1 min-w-[200px]"
+                        />
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={handleCopyCliCommand}
+                          disabled={!openclawCliCommand}
+                          className="rounded-xl h-10 px-4 bg-transparent border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5"
+                        >
+                          <Copy className="h-4 w-4 mr-2" />
+                          {t('common:actions.copy')}
+                        </Button>
+                      </div>
+                    </div>
                   )}
-                  <div className="flex gap-2">
-                    <Input
-                      readOnly
-                      value={openclawCliCommand}
-                      placeholder={openclawCliError || t('developer.cmdUnavailable')}
-                      className="font-mono"
-                    />
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={handleCopyCliCommand}
-                      disabled={!openclawCliCommand}
-                    >
-                      <Copy className="h-4 w-4 mr-2" />
-                      {t('common:actions.copy')}
-                    </Button>
+
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between rounded-2xl border border-black/10 dark:border-white/10 p-5 bg-transparent">
+                      <div>
+                        <Label className="text-[14px] font-medium text-foreground">{t('developer.wsDiagnostic')}</Label>
+                        <p className="text-[13px] text-muted-foreground mt-1">
+                          {t('developer.wsDiagnosticDesc')}
+                        </p>
+                      </div>
+                      <Switch
+                        checked={wsDiagnosticEnabled}
+                        onCheckedChange={handleWsDiagnosticToggle}
+                      />
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label className="text-[14px] font-medium text-foreground">{t('developer.telemetryViewer')}</Label>
+                        <p className="text-[13px] text-muted-foreground mt-1">
+                          {t('developer.telemetryViewerDesc')}
+                        </p>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setShowTelemetryViewer((prev) => !prev)}
+                        className="rounded-full px-5 h-9 bg-transparent border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5"
+                      >
+                        {showTelemetryViewer
+                          ? t('common:actions.hide')
+                          : t('common:actions.show')}
+                      </Button>
+                    </div>
+
+                    {showTelemetryViewer && (
+                      <div className="space-y-4 rounded-2xl border border-black/10 dark:border-white/10 p-5 bg-black/5 dark:bg-white/5">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <Badge variant="secondary" className="rounded-full px-3 py-1 bg-white dark:bg-[#1a1a19] border border-black/5 dark:border-white/5">{t('developer.telemetryTotal')}: {telemetryStats.total}</Badge>
+                          <Badge variant={telemetryStats.errorCount > 0 ? 'destructive' : 'secondary'} className={cn("rounded-full px-3 py-1", telemetryStats.errorCount === 0 && "bg-white dark:bg-[#1a1a19] border border-black/5 dark:border-white/5")}>
+                            {t('developer.telemetryErrors')}: {telemetryStats.errorCount}
+                          </Badge>
+                          <Badge variant={telemetryStats.slowCount > 0 ? 'secondary' : 'outline'} className={cn("rounded-full px-3 py-1", telemetryStats.slowCount === 0 && "bg-white dark:bg-[#1a1a19] border border-black/5 dark:border-white/5")}>
+                            {t('developer.telemetrySlow')}: {telemetryStats.slowCount}
+                          </Badge>
+                          <div className="ml-auto flex gap-2">
+                            <Button type="button" variant="outline" size="sm" onClick={handleCopyTelemetry} className="rounded-full h-8 px-4 bg-white dark:bg-[#1a1a19] border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/10">
+                              <Copy className="h-3.5 w-3.5 mr-1.5" />
+                              {t('common:actions.copy')}
+                            </Button>
+                            <Button type="button" variant="outline" size="sm" onClick={handleClearTelemetry} className="rounded-full h-8 px-4 bg-white dark:bg-[#1a1a19] border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/10">
+                              {t('common:actions.clear')}
+                            </Button>
+                          </div>
+                        </div>
+
+                        <div className="max-h-80 overflow-auto rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-[#1a1a19] shadow-inner">
+                          {telemetryByEvent.length > 0 && (
+                            <div className="border-b border-black/5 dark:border-white/5 bg-black/5 dark:bg-white/5 p-3">
+                              <p className="mb-3 text-[12px] font-semibold text-muted-foreground">
+                                {t('developer.telemetryAggregated')}
+                              </p>
+                              <div className="space-y-1.5 text-[12px]">
+                                {telemetryByEvent.map((item) => (
+                                  <div
+                                    key={item.event}
+                                    className="grid grid-cols-[minmax(0,1.6fr)_0.7fr_0.9fr_0.8fr_1fr] gap-2 rounded-lg border border-black/5 dark:border-white/5 bg-white dark:bg-[#1a1a19] px-3 py-2"
+                                  >
+                                    <span className="truncate font-medium" title={item.event}>{item.event}</span>
+                                    <span className="text-muted-foreground">n={item.count}</span>
+                                    <span className="text-muted-foreground">
+                                      avg={item.timedCount > 0 ? Math.round(item.totalDuration / item.timedCount) : 0}ms
+                                    </span>
+                                    <span className="text-muted-foreground">slow={item.slowCount}</span>
+                                    <span className="text-muted-foreground">err={item.errorCount}</span>
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          )}
+                          <div className="space-y-2 p-3 font-mono text-[12px]">
+                            {telemetryEntries.length === 0 ? (
+                              <div className="text-muted-foreground text-center py-4">{t('developer.telemetryEmpty')}</div>
+                            ) : (
+                              telemetryEntries
+                                .slice()
+                                .reverse()
+                                .map((entry) => (
+                                  <div key={entry.id} className="rounded-lg border border-black/5 dark:border-white/5 bg-black/5 dark:bg-white/5 p-3">
+                                    <div className="flex items-center justify-between gap-3 mb-2">
+                                      <span className="font-semibold text-foreground">{entry.event}</span>
+                                      <span className="text-muted-foreground text-[11px]">{entry.ts}</span>
+                                    </div>
+                                    <pre className="whitespace-pre-wrap text-[11px] text-muted-foreground overflow-x-auto">
+                                      {JSON.stringify({ count: entry.count, ...entry.payload }, null, 2)}
+                                    </pre>
+                                  </div>
+                                ))
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    )}
                   </div>
                 </div>
-              </>
-            )}
+              </div>
+            </>
+          )}
 
-            <Separator />
-            <div className="space-y-2">
-              <div className="flex items-center justify-between rounded-md border border-border/60 p-3">
+          <Separator className="bg-black/5 dark:bg-white/5" />
+
+          {/* Updates */}
+          <div>
+            <h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
+              {t('updates.title')}
+            </h2>
+            <div className="space-y-6">
+              <UpdateSettings />
+
+              <div className="flex items-center justify-between">
                 <div>
-                  <Label>{t('developer.wsDiagnostic')}</Label>
-                  <p className="text-sm text-muted-foreground">
-                    {t('developer.wsDiagnosticDesc')}
+                  <Label className="text-[15px] font-medium text-foreground">{t('updates.autoCheck')}</Label>
+                  <p className="text-[13px] text-muted-foreground mt-1">
+                    {t('updates.autoCheckDesc')}
                   </p>
                 </div>
                 <Switch
-                  checked={wsDiagnosticEnabled}
-                  onCheckedChange={handleWsDiagnosticToggle}
+                  checked={autoCheckUpdate}
+                  onCheckedChange={setAutoCheckUpdate}
                 />
               </div>
 
               <div className="flex items-center justify-between">
                 <div>
-                  <Label>{t('developer.telemetryViewer')}</Label>
-                  <p className="text-sm text-muted-foreground">
-                    {t('developer.telemetryViewerDesc')}
+                  <Label className="text-[15px] font-medium text-foreground">{t('updates.autoDownload')}</Label>
+                  <p className="text-[13px] text-muted-foreground mt-1">
+                    {t('updates.autoDownloadDesc')}
                   </p>
                 </div>
+                <Switch
+                  checked={autoDownloadUpdate}
+                  onCheckedChange={(value) => {
+                    setAutoDownloadUpdate(value);
+                    updateSetAutoDownload(value);
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+
+          <Separator className="bg-black/5 dark:bg-white/5" />
+
+          {/* About */}
+          <div>
+            <h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
+              {t('about.title')}
+            </h2>
+            <div className="space-y-3 text-[14px] text-muted-foreground">
+              <p>
+                <strong className="text-foreground font-semibold">{t('about.appName')}</strong> - {t('about.tagline')}
+              </p>
+              <p>{t('about.basedOn')}</p>
+              <p>{t('about.version', { version: currentVersion })}</p>
+              <div className="flex gap-4 pt-3">
                 <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setShowTelemetryViewer((prev) => !prev)}
+                  variant="link"
+                  className="h-auto p-0 text-[14px] text-blue-500 hover:text-blue-600 font-medium"
+                  onClick={() => window.electron.openExternal('https://claw-x.com')}
                 >
-                  {showTelemetryViewer
-                    ? t('common:actions.hide')
-                    : t('common:actions.show')}
+                  {t('about.docs')}
+                </Button>
+                <Button
+                  variant="link"
+                  className="h-auto p-0 text-[14px] text-blue-500 hover:text-blue-600 font-medium"
+                  onClick={() => window.electron.openExternal('https://github.com/ValueCell-ai/ClawX')}
+                >
+                  {t('about.github')}
                 </Button>
               </div>
-
-              {showTelemetryViewer && (
-                <div className="space-y-3 rounded-lg border border-border/60 p-3">
-                  <div className="flex flex-wrap items-center gap-2">
-                    <Badge variant="secondary">{t('developer.telemetryTotal')}: {telemetryStats.total}</Badge>
-                    <Badge variant={telemetryStats.errorCount > 0 ? 'destructive' : 'secondary'}>
-                      {t('developer.telemetryErrors')}: {telemetryStats.errorCount}
-                    </Badge>
-                    <Badge variant={telemetryStats.slowCount > 0 ? 'secondary' : 'outline'}>
-                      {t('developer.telemetrySlow')}: {telemetryStats.slowCount}
-                    </Badge>
-                    <div className="ml-auto flex gap-2">
-                      <Button type="button" variant="outline" size="sm" onClick={handleCopyTelemetry}>
-                        <Copy className="h-4 w-4 mr-2" />
-                        {t('common:actions.copy')}
-                      </Button>
-                      <Button type="button" variant="outline" size="sm" onClick={handleClearTelemetry}>
-                        {t('common:actions.clear')}
-                      </Button>
-                    </div>
-                  </div>
-
-                  <div className="max-h-72 overflow-auto rounded-md border border-border/50 bg-muted/20">
-                    {telemetryByEvent.length > 0 && (
-                      <div className="border-b border-border/50 bg-background/70 p-2">
-                        <p className="mb-2 text-[11px] font-semibold text-muted-foreground">
-                          {t('developer.telemetryAggregated')}
-                        </p>
-                        <div className="space-y-1 text-[11px]">
-                          {telemetryByEvent.map((item) => (
-                            <div
-                              key={item.event}
-                              className="grid grid-cols-[minmax(0,1.6fr)_0.7fr_0.9fr_0.8fr_1fr] gap-2 rounded border border-border/40 px-2 py-1"
-                            >
-                              <span className="truncate font-medium" title={item.event}>{item.event}</span>
-                              <span className="text-muted-foreground">n={item.count}</span>
-                              <span className="text-muted-foreground">
-                                avg={item.timedCount > 0 ? Math.round(item.totalDuration / item.timedCount) : 0}ms
-                              </span>
-                              <span className="text-muted-foreground">slow={item.slowCount}</span>
-                              <span className="text-muted-foreground">err={item.errorCount}</span>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                    <div className="space-y-1 p-2 font-mono text-xs">
-                      {telemetryEntries.length === 0 ? (
-                        <div className="text-muted-foreground">{t('developer.telemetryEmpty')}</div>
-                      ) : (
-                        telemetryEntries
-                          .slice()
-                          .reverse()
-                          .map((entry) => (
-                            <div key={entry.id} className="rounded border border-border/40 bg-background/60 p-2">
-                              <div className="flex items-center justify-between gap-3">
-                                <span className="font-semibold">{entry.event}</span>
-                                <span className="text-muted-foreground">{entry.ts}</span>
-                              </div>
-                              <pre className="mt-1 whitespace-pre-wrap text-[11px] text-muted-foreground">
-                                {JSON.stringify({ count: entry.count, ...entry.payload }, null, 2)}
-                              </pre>
-                            </div>
-                          ))
-                      )}
-                    </div>
-                  </div>
-                </div>
-              )}
             </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* About */}
-      <Card className="order-2">
-        <CardHeader>
-          <CardTitle>{t('about.title')}</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-2 text-sm text-muted-foreground">
-          <p>
-            <strong>{t('about.appName')}</strong> - {t('about.tagline')}
-          </p>
-          <p>{t('about.basedOn')}</p>
-          <p>{t('about.version', { version: currentVersion })}</p>
-          <div className="flex gap-4 pt-2">
-            <Button
-              variant="link"
-              className="h-auto p-0"
-              onClick={() => window.electron.openExternal('https://claw-x.com')}
-            >
-              {t('about.docs')}
-            </Button>
-            <Button
-              variant="link"
-              className="h-auto p-0"
-              onClick={() => window.electron.openExternal('https://github.com/ValueCell-ai/ClawX')}
-            >
-              {t('about.github')}
-            </Button>
           </div>
-        </CardContent>
-      </Card>
+
+        </div>
+      </div>
     </div>
   );
 }