diff --git a/.geminiignore b/.geminiignore
new file mode 100644
index 000000000..d34c2ef7e
--- /dev/null
+++ b/.geminiignore
@@ -0,0 +1,21 @@
+.git/
+node_modules/
+vendor/
+dist/
+build/
+.next/
+*.log
+.DS_Store
+
+# Performance Optimization: Ignore large generated files and caches
+pnpm-lock.yaml
+go.sum
+package-lock.json
+yarn.lock
+.pnpm-store/
+.cache/
+.turbo/
+coverage/
+.vercel/
+.netlify/
+.expo/
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index 5800f54d9..4d9d68357 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -6,11 +6,14 @@ on:
       - "v*"
   workflow_dispatch:
 
+# Set GITHUB_TOKEN permissions to allow deployment to GitHub Pages
 permissions:
   contents: write
   pages: write
   id-token: write
 
+# Allow only one concurrent deployment, skipping runs between the currently running and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
   group: pages
   cancel-in-progress: false
@@ -24,7 +27,7 @@ jobs:
         uses: actions/checkout@v4
         with:
           ref: main
-          fetch-depth: 0
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
       
       - name: Setup Node
         uses: actions/setup-node@v4
diff --git a/.gitignore b/.gitignore
index d15e6eea0..2fb2cba6d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -88,6 +88,7 @@ Thumbs.db
 # Temporary files
 *.tmp
 *.temp
+*.bak
 .cache/
 tmp/
 
@@ -109,3 +110,9 @@ data
 _main-ref/
 .toolkit/
 /scripts/vendor
+design-env/
+GEMINI.md
+Design*.md
+design*.md
+detail-design-2.0-docs/
+.gemini/settings.json
diff --git a/.husky/check-go b/.husky/check-go
index 1ebe32e15..c72513fdb 100644
--- a/.husky/check-go
+++ b/.husky/check-go
@@ -2,5 +2,10 @@
 
 export PATH="$HOME/.local/share/mise/shims:$HOME/.local/bin:$HOME/.npm-global/bin:/opt/homebrew/bin:/usr/local/bin:$PATH"
 
+if ! command -v golangci-lint >/dev/null 2>&1; then
+  echo "golangci-lint not found, skipping Go lint..."
+  exit 0
+fi
+
 echo "Check Go lint..."
 golangci-lint run ./...
diff --git a/.husky/check-go-test b/.husky/check-go-test
index d8335ca05..e0de38a48 100644
--- a/.husky/check-go-test
+++ b/.husky/check-go-test
@@ -2,5 +2,10 @@
 
 export PATH="$HOME/.local/share/mise/shims:$HOME/.local/bin:$HOME/.npm-global/bin:/opt/homebrew/bin:/usr/local/bin:$PATH"
 
+if ! command -v go >/dev/null 2>&1; then
+  echo "go not found, skipping Go test..."
+  exit 0
+fi
+
 echo "Check Go test..."
 go test ./...
diff --git a/apps/desktop/AGENTS.md b/apps/desktop/AGENTS.md
index 646eb20f5..59259f5d4 100644
--- a/apps/desktop/AGENTS.md
+++ b/apps/desktop/AGENTS.md
@@ -138,11 +138,25 @@ typecheck.
 real `exports` field. So bundle behaviour is unchanged; only `vue-tsc`
 follows the stubs.
 
+The typecheck import graph must still mirror the runtime import graph. When
+desktop reuses workspace package exports, source files must import through
+the same public module specifiers that Vite bundles at runtime, and the
+renderer stubs must model that same surface. Do not paper over `vue-tsc`
+errors by swapping imports to aliases or private source paths unless both
+Vite and `tsconfig.web.json` intentionally resolve that specifier to the
+same module. A resolver mismatch can make one pipeline pass while the other
+fails, or make typecheck validate a different module than the one packaged
+at runtime.
+
 When you add a new `@memohai/web/*` import in the desktop renderer, add a
 matching `declare module` to `web-stubs.d.ts`. The wildcard
 `declare module '@memohai/web/*.vue'` already covers any `.vue` SFC reached
 through the wildcard `./*` export.
 
+When you import a new component directly from `@memohai/ui`, add that
+component to `ui-stubs.d.ts` as well. The package may export it correctly,
+but desktop's renderer typecheck only sees the stubbed surface.
+
 ## Multi-Window Lifecycle
 
 ### Main process (`src/main/index.ts`)
@@ -552,6 +566,14 @@ list to check.
 - **Update both `tsconfig.web.json` paths and `web-stubs.d.ts`** when adding
   a new `@memohai/web/foo` import. Forgetting the stub yields
   `TS2307: Cannot find module` even though the bundle works.
+- **Keep typecheck resolution and runtime resolution isomorphic.** Desktop
+  renderer code must import reused workspace modules through the same public
+  specifiers that Vite bundles at runtime, then model that surface in the
+  stubs. Do not mix in alternate aliases or private source paths unless both
+  Vite and `tsconfig.web.json` intentionally resolve them to the same target.
+- **Update `ui-stubs.d.ts` for direct `@memohai/ui` imports.** A component
+  exported by the real UI package still needs to exist in the desktop stub
+  if desktop imports it directly.
 - **Run `pnpm --filter @memohai/desktop typecheck` after every renderer
   change.** It's fast (only types desktop's own code thanks to the stubs)
   and catches the common drift cases (missing stub, wrong store/component
diff --git a/apps/desktop/src/renderer/src/settings/App.vue b/apps/desktop/src/renderer/src/settings/App.vue
index cb724c1f6..6af77d669 100644
--- a/apps/desktop/src/renderer/src/settings/App.vue
+++ b/apps/desktop/src/renderer/src/settings/App.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
-import { provide } from 'vue'
-import { Toaster, SidebarInset } from '@memohai/ui'
+import { provide, computed, toValue } from 'vue'
+import { useRoute } from 'vue-router'
+import { useQuery } from '@pinia/colada'
+import { getBotsById } from '@memohai/sdk'
+import {
+  Toaster, SidebarInset,
+  Breadcrumb, BreadcrumbList, BreadcrumbItem,
+  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
+} from '@memohai/ui'
 import 'vue-sonner/style.css'
 import MainLayout from '@memohai/web/layout/main-layout/index.vue'
 import SettingsSidebar from '@memohai/web/components/settings-sidebar/index.vue'
@@ -9,6 +16,51 @@ import { DesktopShellKey } from '@memohai/web/lib/desktop-shell'
 
 provide(DesktopShellKey, true)
 useSettingsStore()
+
+const route = useRoute()
+
+// Fetch bot data in the layout to ensure reactive breadcrumb updates for bot-detail
+const { data: bot } = useQuery({
+  key: () => ['bot', route.params.botId as string],
+  query: async () => {
+    const { data } = await getBotsById({
+      path: { id: route.params.botId as string },
+      throwOnError: true,
+    })
+    return data
+  },
+  enabled: () => route.name === 'bot-detail' && !!route.params.botId,
+})
+
+const breadcrumbs = computed(() => {
+  const items = []
+  const matched = route.matched
+  for (const m of matched) {
+    if (m.meta && m.meta.breadcrumb) {
+      let label = ''
+      // Special case for bot-detail to use the reactive display name
+      if (m.name === 'bot-detail' && bot.value?.display_name) {
+        label = bot.value.display_name
+      } else {
+        const b = m.meta.breadcrumb
+        label = typeof b === 'function' ? b(route) : toValue(b)
+      }
+
+      if (label) {
+        items.push({
+          label,
+          to: m.name ? { name: m.name } : m.path,
+          isLast: false,
+        })
+      }
+    }
+  }
+  if (items.length > 0) {
+    const lastItem = items[items.length - 1]
+    if (lastItem) lastItem.isLast = true
+  }
+  return items
+})
 </script>
 
 <template>
@@ -42,7 +94,50 @@ useSettingsStore()
       </template>
       <template #main>
         <SidebarInset class="flex flex-col overflow-hidden">
-          <section class="flex-1 overflow-y-auto">
+          <!-- Universal Settings Breadcrumb per Figma 5:937 & 5:807 -->
+          <header
+            v-if="breadcrumbs.length > 0"
+            class="h-10 flex items-center px-6 shrink-0 border-b border-border/40"
+          >
+            <Breadcrumb class="w-full">
+              <BreadcrumbList class="gap-1.5 flex-nowrap">
+                <template
+                  v-for="(item, index) in breadcrumbs"
+                  :key="index"
+                >
+                  <BreadcrumbItem
+                    v-if="!item.isLast"
+                    class="shrink-0"
+                  >
+                    <BreadcrumbLink
+                      as-child
+                      class="text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      <router-link :to="item.to">
+                        <span class="text-[11px] font-medium leading-none">{{ item.label }}</span>
+                      </router-link>
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator
+                    v-if="!item.isLast"
+                    class="text-muted-foreground/50 shrink-0 select-none"
+                  >
+                    <span class="text-[10px] font-normal">/</span>
+                  </BreadcrumbSeparator>
+                  <BreadcrumbItem
+                    v-else
+                    class="min-w-0 flex-1"
+                  >
+                    <BreadcrumbPage class="text-foreground text-[11px] font-medium truncate leading-none">
+                      {{ item.label }}
+                    </BreadcrumbPage>
+                  </BreadcrumbItem>
+                </template>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </header>
+
+          <section class="flex-1 relative min-h-0">
             <router-view v-slot="{ Component }">
               <KeepAlive>
                 <component :is="Component" />
diff --git a/apps/desktop/src/renderer/src/settings/router.ts b/apps/desktop/src/renderer/src/settings/router.ts
index 9c5f43029..e24ce750e 100644
--- a/apps/desktop/src/renderer/src/settings/router.ts
+++ b/apps/desktop/src/renderer/src/settings/router.ts
@@ -1,5 +1,6 @@
-import { createRouter, createMemoryHistory, type RouteRecordRaw } from 'vue-router'
-import { SETTINGS_ROUTE_SPECS, SETTINGS_DEFAULT_PATH } from '../shared/settings-routes'
+import { h } from 'vue'
+import { createRouter, createMemoryHistory, RouterView, type RouteRecordRaw } from 'vue-router'
+import { SETTINGS_ROUTE_SPECS, SETTINGS_DEFAULT_PATH, type SettingsRouteSpec } from '../shared/settings-routes'
 
 // Settings-window router. Mirrors the path layout under `/settings/*` from
 // @memohai/web's main router so the reused @memohai/web `SettingsSidebar`
@@ -8,11 +9,19 @@ import { SETTINGS_ROUTE_SPECS, SETTINGS_DEFAULT_PATH } from '../shared/settings-
 // into `/settings/bots` (or whatever path the chat window asks for via the
 // `settings:navigate` IPC).
 
-const realRoutes: RouteRecordRaw[] = SETTINGS_ROUTE_SPECS.map(({ name, path, loader }) => ({
-  name,
-  path,
-  component: loader,
-}))
+const mapSpecToRoute = (spec: SettingsRouteSpec): RouteRecordRaw => {
+  const route = {
+    path: spec.path,
+    component: spec.loader ?? { render: () => h(RouterView) },
+    ...(spec.name ? { name: spec.name } : {}),
+    ...(spec.meta ? { meta: spec.meta } : {}),
+    ...(spec.children ? { children: spec.children.map(mapSpecToRoute) } : {}),
+  } satisfies RouteRecordRaw
+
+  return route
+}
+
+const realRoutes: RouteRecordRaw[] = SETTINGS_ROUTE_SPECS.map(mapSpecToRoute)
 
 const routes: RouteRecordRaw[] = [
   { path: '/', redirect: SETTINGS_DEFAULT_PATH },
diff --git a/apps/desktop/src/renderer/src/shared/settings-routes.ts b/apps/desktop/src/renderer/src/shared/settings-routes.ts
index 268ea22ee..af14902d0 100644
--- a/apps/desktop/src/renderer/src/shared/settings-routes.ts
+++ b/apps/desktop/src/renderer/src/shared/settings-routes.ts
@@ -7,29 +7,114 @@
 // children — adding a new settings page to web means adding an entry here.
 
 import type { Component } from 'vue'
+import { i18nRef } from '@memohai/web/i18n'
 
 export interface SettingsRouteSpec {
-  name: string
+  name?: string
   path: string
-  loader: () => Promise<Component | { default: Component }>
+  loader?: () => Promise<Component | { default: Component }>
+  meta?: {
+    breadcrumb?: string | { value: string } | ((route: { params: Record<string, string | string[] | undefined> }) => string | undefined)
+  }
+  children?: SettingsRouteSpec[]
 }
 
 export const SETTINGS_ROUTE_SPECS: SettingsRouteSpec[] = [
-  { name: 'bots', path: '/settings/bots', loader: () => import('@memohai/web/pages/bots/index.vue') },
-  { name: 'bot-new', path: '/settings/bots/new', loader: () => import('@memohai/web/pages/bots/new.vue') },
-  { name: 'bot-detail', path: '/settings/bots/:botId', loader: () => import('@memohai/web/pages/bots/detail.vue') },
-  { name: 'providers', path: '/settings/providers', loader: () => import('@memohai/web/pages/providers/index.vue') },
-  { name: 'web-search', path: '/settings/web-search', loader: () => import('@memohai/web/pages/web-search/index.vue') },
-  { name: 'memory', path: '/settings/memory', loader: () => import('@memohai/web/pages/memory/index.vue') },
-  { name: 'speech', path: '/settings/speech', loader: () => import('@memohai/web/pages/speech/index.vue') },
-  { name: 'transcription', path: '/settings/transcription', loader: () => import('@memohai/web/pages/transcription/index.vue') },
-  { name: 'email', path: '/settings/email', loader: () => import('@memohai/web/pages/email/index.vue') },
-  { name: 'usage', path: '/settings/usage', loader: () => import('@memohai/web/pages/usage/index.vue') },
-  { name: 'appearance', path: '/settings/appearance', loader: () => import('@memohai/web/pages/appearance/index.vue') },
-  { name: 'profile', path: '/settings/profile', loader: () => import('@memohai/web/pages/profile/index.vue') },
-  { name: 'platform', path: '/settings/platform', loader: () => import('@memohai/web/pages/platform/index.vue') },
-  { name: 'supermarket', path: '/settings/supermarket', loader: () => import('@memohai/web/pages/supermarket/index.vue') },
-  { name: 'about', path: '/settings/about', loader: () => import('@memohai/web/pages/about/index.vue') },
+  {
+    path: '/settings/bots',
+    meta: { breadcrumb: i18nRef('sidebar.bots') },
+    children: [
+      {
+        name: 'bots',
+        path: '',
+        loader: () => import('@memohai/web/pages/bots/index.vue'),
+      },
+      {
+        name: 'bot-new',
+        path: 'new',
+        loader: () => import('@memohai/web/pages/bots/new.vue'),
+        meta: { breadcrumb: i18nRef('bots.createBot') }
+      },
+      {
+        name: 'bot-detail',
+        path: ':botId',
+        loader: () => import('@memohai/web/pages/bots/detail.vue'),
+        meta: { breadcrumb: (route: { params: { botId?: string } }) => route.params.botId }
+      },
+    ]
+  },
+  {
+    name: 'providers',
+    path: '/settings/providers',
+    loader: () => import('@memohai/web/pages/providers/index.vue'),
+    meta: { breadcrumb: i18nRef('sidebar.providers') }
+  },
+  {
+    name: 'web-search',
+    path: '/settings/web-search',
+    loader: () => import('@memohai/web/pages/web-search/index.vue'),
+    meta: { breadcrumb: i18nRef('sidebar.webSearch') }
+  },
+  {
+    name: 'memory',
+    path: '/settings/memory',
+    loader: () => import('@memohai/web/pages/memory/index.vue'),
+    meta: { breadcrumb: i18nRef('sidebar.memory') }
+  },
+  {
+    name: 'speech',
+    path: '/settings/speech',
+    loader: () => import('@memohai/web/pages/speech/index.vue'),
+    meta: { breadcrumb: i18nRef('sidebar.speech') }
+  },
+  {
+    name: 'transcription',
+    path: '/settings/transcription',
+    loader: () => import('@memohai/web/pages/transcription/index.vue'),
+    meta: { breadcrumb: i18nRef('sidebar.transcription') }
+  },
+  {
+    name: 'email',
+    path: '/settings/email',
+    loader: () => import('@memohai/web/pages/email/index.vue'),
+    meta: { breadcrumb: i18nRef('sidebar.email') }
+  },
+  {
+    name: 'usage',
+    path: '/settings/usage',
+    loader: () => import('@memohai/web/pages/usage/index.vue'),
+    meta: { breadcrumb: i18nRef('sidebar.usage') }
+  },
+  {
+    name: 'appearance',
+    path: '/settings/appearance',
+    loader: () => import('@memohai/web/pages/appearance/index.vue'),
+    meta: { breadcrumb: i18nRef('sidebar.appearance') }
+  },
+  {
+    name: 'profile',
+    path: '/settings/profile',
+    loader: () => import('@memohai/web/pages/profile/index.vue'),
+    meta: { breadcrumb: i18nRef('sidebar.profile') }
+  },
+  {
+    name: 'platform',
+    path: '/settings/platform',
+    loader: () => import('@memohai/web/pages/platform/index.vue'),
+    meta: { breadcrumb: i18nRef('sidebar.platform') }
+  },
+  {
+    name: 'supermarket',
+    path: '/settings/supermarket',
+    loader: () => import('@memohai/web/pages/supermarket/index.vue'),
+    meta: { breadcrumb: i18nRef('sidebar.supermarket') }
+  },
+  {
+    name: 'about',
+    path: '/settings/about',
+    loader: () => import('@memohai/web/pages/about/index.vue'),
+    meta: { breadcrumb: i18nRef('sidebar.about') }
+  },
 ]
 
 // Default landing path used by the settings window's root redirect, and by
diff --git a/apps/desktop/src/renderer/types/ui-stubs.d.ts b/apps/desktop/src/renderer/types/ui-stubs.d.ts
index 7c88d75b6..b9f931c0b 100644
--- a/apps/desktop/src/renderer/types/ui-stubs.d.ts
+++ b/apps/desktop/src/renderer/types/ui-stubs.d.ts
@@ -22,6 +22,12 @@ declare module '@memohai/ui' {
   export const AvatarFallback: LooseComponent
   export const AvatarImage: LooseComponent
   export const Badge: LooseComponent
+  export const Breadcrumb: LooseComponent
+  export const BreadcrumbItem: LooseComponent
+  export const BreadcrumbLink: LooseComponent
+  export const BreadcrumbList: LooseComponent
+  export const BreadcrumbPage: LooseComponent
+  export const BreadcrumbSeparator: LooseComponent
   export const Button: LooseComponent
   export const Card: LooseComponent
   export const CardHeader: LooseComponent
diff --git a/apps/desktop/src/renderer/types/web-stubs.d.ts b/apps/desktop/src/renderer/types/web-stubs.d.ts
index 2831b5270..2ca0e296a 100644
--- a/apps/desktop/src/renderer/types/web-stubs.d.ts
+++ b/apps/desktop/src/renderer/types/web-stubs.d.ts
@@ -17,8 +17,10 @@ declare module '@memohai/web/router' {
 
 declare module '@memohai/web/i18n' {
   import type { I18n } from 'vue-i18n'
+  import type { ComputedRef } from 'vue'
   const i18n: I18n
   export default i18n
+  export function i18nRef(key: string): ComputedRef<string>
 }
 
 declare module '@memohai/web/api-client' {
diff --git a/apps/web/src/components/add-provider/index.vue b/apps/web/src/components/add-provider/index.vue
index c81781687..d4d31f982 100644
--- a/apps/web/src/components/add-provider/index.vue
+++ b/apps/web/src/components/add-provider/index.vue
@@ -11,11 +11,11 @@
     >
       <template #trigger>
         <Button
-          class="w-full shadow-none! text-muted-foreground mb-4"
+          class="w-full shadow-none! text-muted-foreground h-9 px-3 rounded-md border-border bg-background hover:bg-accent"
           variant="outline"
         >
           <Plus
-            class="mr-1"
+            class="mr-1 size-4"
           /> {{ $t('provider.addBtn') }}
         </Button>
       </template>
diff --git a/apps/web/src/components/chat/chat-step/index.vue b/apps/web/src/components/chat/chat-step/index.vue
index 0375d3422..26d8ba51c 100644
--- a/apps/web/src/components/chat/chat-step/index.vue
+++ b/apps/web/src/components/chat/chat-step/index.vue
@@ -2,7 +2,7 @@
   <section
     class="inline-flex items-center ml-1 gap-1 text-xs text-muted-foreground"
   >
-    <i class="w-1.25 aspect-square bg-info rounded-full" />
-    推理中
+    <i class="w-1.25 aspect-square bg-blue-500 rounded-full" />
+    {{ $t('chat.thinkingInProgress') }}
   </section>
 </template>
diff --git a/apps/web/src/components/confirm-popover/index.vue b/apps/web/src/components/confirm-popover/index.vue
index 8226730ac..00d5d1ba3 100644
--- a/apps/web/src/components/confirm-popover/index.vue
+++ b/apps/web/src/components/confirm-popover/index.vue
@@ -4,24 +4,52 @@
       <PopoverTrigger as-child>
         <slot name="trigger" />
       </PopoverTrigger>
-      <PopoverContent class="w-80">
-        <p class="mb-4">
-          {{ message }}
-        </p>
-        <div class="flex justify-end gap-3">
+      <PopoverContent class="w-80 p-0 overflow-hidden border-border shadow-xl">
+        <div class="p-4 space-y-3">
+          <div
+            v-if="title"
+            class="flex items-center gap-2 mb-1"
+          >
+            <div
+              v-if="$slots.icon"
+              class="shrink-0"
+            >
+              <slot name="icon" />
+            </div>
+            <h5 class="text-xs font-bold text-foreground">
+              {{ title }}
+            </h5>
+          </div>
+          
+          <div class="text-[11px] text-muted-foreground leading-relaxed">
+            <slot>
+              {{ message }}
+            </slot>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-end gap-2 px-4 py-3 bg-muted/30 border-t border-border/50">
           <Button
             type="button"
-            variant="outline"
+            variant="ghost"
+            size="sm"
+            class="h-8 text-[11px] font-medium"
             @click="close"
           >
             {{ cancelText || $t('common.cancel') }}
           </Button>
           <Button
             type="button"
+            size="sm"
+            class="h-8 text-[11px] font-bold shadow-sm"
+            :variant="variant"
             :disabled="loading"
             @click="$emit('confirm'); close()"
           >
-            <Spinner v-if="loading" />
+            <Spinner
+              v-if="loading"
+              class="size-3 mr-1"
+            />
             {{ confirmText || $t('common.confirm') }}
           </Button>
         </div>
@@ -40,14 +68,19 @@ import {
 } from '@memohai/ui'
 
 withDefaults(defineProps<{
-  message: string
+  title?: string
+  message?: string
   confirmText?: string
   cancelText?: string
   loading?: boolean
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
 }>(), {
+  title: '',
+  message: '',
   confirmText: '',
   cancelText: '',
   loading: false,
+  variant: 'default'
 })
 
 defineEmits<{
diff --git a/apps/web/src/components/master-detail-sidebar-layout/index.vue b/apps/web/src/components/master-detail-sidebar-layout/index.vue
index da4fe9e58..deb4d6d1c 100644
--- a/apps/web/src/components/master-detail-sidebar-layout/index.vue
+++ b/apps/web/src/components/master-detail-sidebar-layout/index.vue
@@ -4,21 +4,34 @@
     :default-open="true"
   >
     <Sidebar
-      class="relative! **:[[role=navigation]]:relative! sidebar-container h-full!"
+      class="relative! **:[[role=navigation]]:relative! sidebar-container h-full! w-60! border-0! [&_[data-sidebar=sidebar]]:bg-transparent!"
     >
-      <SidebarHeader v-if="slots['sidebar-header']">
-        <slot name="sidebar-header" />
-      </SidebarHeader>
-      <SidebarContent>
-        <ScrollArea class="h-full">
-          <SidebarMenu class="p-2">           
-            <slot name="sidebar-content" />
-          </SidebarMenu>
-        </ScrollArea>
+      <SidebarContent class="overflow-hidden p-2 pb-4 pt-4 h-full flex flex-col">
+        <div class="border border-border/60 bg-muted/10 rounded-lg flex-1 flex flex-col overflow-hidden min-h-0">
+          <!-- Integrated Header (if provided) -->
+          <div
+            v-if="slots['sidebar-header']"
+            class="shrink-0"
+          >
+            <slot name="sidebar-header" />
+          </div>
+          
+          <!-- Content Group with ScrollArea -->
+          <ScrollArea class="flex-1 min-h-0">
+            <div class="p-2 flex flex-col gap-1">
+              <slot name="sidebar-content" />
+            </div>
+          </ScrollArea>
+
+          <!-- Integrated Footer (if provided) -->
+          <SidebarFooter
+            v-if="slots['sidebar-footer']"
+            class="p-2 pt-0"
+          >
+            <slot name="sidebar-footer" />
+          </SidebarFooter>
+        </div>
       </SidebarContent>
-      <SidebarFooter v-if="$slots['sidebar-footer']">
-        <slot name="sidebar-footer" />
-      </SidebarFooter>
     </Sidebar>
 
     <SidebarInset class="min-w-0 overflow-hidden">
@@ -26,9 +39,9 @@
         <slot name="detail" />
       </section>
 
-      <div class="fixed right-4 top-0 h-12 z-1000 md:hidden flex items-center">
+      <div class="absolute right-4 top-0 h-10 z-20 md:hidden flex items-center">
         <Menu
-          class="cursor-pointer p-2"
+          class="cursor-pointer p-2 size-9"
           @click="mobileOpen = !mobileOpen"
         />
       </div>
@@ -78,8 +91,7 @@ import {
   SidebarProvider,
   Sidebar,
   SidebarInset,
-  ScrollArea,
-  SidebarMenu
+  ScrollArea
 } from '@memohai/ui'
 import { useSlots } from 'vue'
 
diff --git a/apps/web/src/components/model-capabilities/index.vue b/apps/web/src/components/model-capabilities/index.vue
index 819f98212..153e2b252 100644
--- a/apps/web/src/components/model-capabilities/index.vue
+++ b/apps/web/src/components/model-capabilities/index.vue
@@ -3,7 +3,7 @@
     v-for="cap in compatibilities"
     :key="cap"
     :title="$t(`models.compatibility.${cap}`, cap)"
-    class="inline-flex items-center justify-center rounded-md border-0 size-5 shrink-0"
+    class="inline-flex items-center justify-center rounded-md border size-5 shrink-0 bg-transparent"
     :class="styleOf(cap)"
   >
     <component
@@ -29,10 +29,10 @@ const ICONS: Record<string, Component> = {
 }
 
 const CLASSES: Record<string, string> = {
-  'tool-call': 'bg-capability-tool-soft text-capability-tool-foreground',
-  'vision': 'bg-capability-vision-soft text-capability-vision-foreground',
-  'image-output': 'bg-capability-image-soft text-capability-image-foreground',
-  'reasoning': 'bg-capability-reasoning-soft text-capability-reasoning-foreground',
+  'tool-call': 'border-blue-500/30 text-blue-600 dark:border-blue-400/30 dark:text-blue-400',
+  'vision': 'border-purple-500/30 text-purple-600 dark:border-purple-400/30 dark:text-purple-400',
+  'image-output': 'border-pink-500/30 text-pink-600 dark:border-pink-400/30 dark:text-pink-400',
+  'reasoning': 'border-amber-500/30 text-amber-600 dark:border-amber-400/30 dark:text-amber-400',
 }
 
 function iconOf(cap: string): Component {
@@ -40,6 +40,6 @@ function iconOf(cap: string): Component {
 }
 
 function styleOf(cap: string): string {
-  return CLASSES[cap] ?? 'bg-accent text-foreground'
+  return CLASSES[cap] ?? 'border-border text-foreground'
 }
 </script>
diff --git a/apps/web/src/components/searchable-select-popover/index.vue b/apps/web/src/components/searchable-select-popover/index.vue
index 1e138610f..006279c5b 100644
--- a/apps/web/src/components/searchable-select-popover/index.vue
+++ b/apps/web/src/components/searchable-select-popover/index.vue
@@ -109,7 +109,7 @@
               >
                 <span
                   v-if="option.description"
-                  class="ml-auto text-xs text-muted-foreground truncate max-w-[50%] text-right"
+                  class="ml-auto text-xs text-muted-foreground truncate max-w-[80%] text-right"
                   :title="option.description"
                 >
                   {{ option.description }}
diff --git a/apps/web/src/components/settings-shell/index.vue b/apps/web/src/components/settings-shell/index.vue
index d3a9eab70..11587fe1f 100644
--- a/apps/web/src/components/settings-shell/index.vue
+++ b/apps/web/src/components/settings-shell/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mx-auto w-full p-4 md:p-6"
+    class="mx-auto w-full px-4 pt-2 pb-10 md:px-6 md:pt-4 md:pb-12"
     :class="widthClass"
   >
     <slot />
diff --git a/apps/web/src/components/settings-sidebar/index.vue b/apps/web/src/components/settings-sidebar/index.vue
index 696445cf6..03409f4ff 100644
--- a/apps/web/src/components/settings-sidebar/index.vue
+++ b/apps/web/src/components/settings-sidebar/index.vue
@@ -14,13 +14,13 @@
         class="p-0 border-0"
       >
         <button
-          class="h-[53px] flex items-center gap-2.5 px-3.5 w-full border-b border-border text-foreground hover:bg-accent/50 transition-colors group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0"
+          class="h-10 flex items-center gap-2.5 px-4 w-full text-foreground hover:bg-accent/50 transition-colors group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0"
           @click="router.push(backToChatRoute)"
         >
           <ChevronLeft
             class="size-3 shrink-0"
           />
-          <span class="text-xs font-semibold group-data-[collapsible=icon]:hidden">
+          <span class="text-xs font-semibold inline-flex items-center leading-none group-data-[collapsible=icon]:hidden">
             {{ t('sidebar.settings') }}
           </span>
         </button>
diff --git a/apps/web/src/i18n/locales/en.json b/apps/web/src/i18n/locales/en.json
index 38b2e7622..c9feea72b 100644
--- a/apps/web/src/i18n/locales/en.json
+++ b/apps/web/src/i18n/locales/en.json
@@ -13,7 +13,13 @@
     "operation": "Actions",
     "enable": "Enable",
     "optional": "optional",
+    "allOptional": "all optional",
+    "placeholderPrefix": "e.g. {example}",
     "advanced": "Advanced",
+    "primary": "Primary",
+    "format": "Format",
+    "dangerZone": "Danger Zone",
+    "viewAll": "View All",
     "import": "Import",
     "export": "Export",
     "copy": "Copy",
@@ -27,12 +33,18 @@
     "batchDeleteConfirm": "Delete {count} selected item(s)?",
     "batchExport": "Batch export",
     "cancelSelection": "Cancel selection",
+    "updatedAt": "Updated",
+    "actions": "Actions",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
     "name": "Name",
     "namePlaceholder": "Enter name",
     "type": "Type",
     "typePlaceholder": "Select type",
     "refresh": "Refresh",
     "status": "Status",
+    "active": "Active",
+    "inactive": "Inactive",
     "loadFailed": "Failed to load",
     "saveFailed": "Failed to save",
     "createdAt": "Created at",
@@ -772,15 +784,105 @@
       "callbackUrl": "Callback URL",
       "callbackUrlHint": "Set this as the callback/redirect URL in your OAuth App settings.",
       "callbackMissingParams": "Missing authorization code or state parameter"
-    }
+    },
+    "servers": "Servers",
+    "addNew": "New Server",
+    "searchServers": "Search servers...",
+    "unnamedServer": "Unnamed Server",
+    "untitled": "Untitled",
+    "unsavedChangesTitle": "Unsaved Changes",
+    "verifyingCancel": "Cancel",
+    "discardDraftConfirm": "Are you sure you want to discard this draft?",
+    "discard": "Discard",
+    "invalidConfig": "Invalid configuration",
+    "handshakeError": "Connection failed",
+    "viewRawLog": "View raw log",
+    "identity": "Identity",
+    "placeholders": {
+      "name": "e.g. Weather API",
+      "url": "https://...",
+      "envKey": "Key",
+      "envValue": "Value",
+      "headerKey": "Header",
+      "headerValue": "Value"
+    },
+    "transportType": "Transport",
+    "payload": "Payload",
+    "endpointUrl": "Endpoint URL",
+    "streamProtocol": "Protocol",
+    "protocol": {
+      "http": "HTTP",
+      "sse": "SSE"
+    },
+    "advancedSettings": "Advanced Settings",
+    "advancedSettingsHint": "Environment variables, headers, and OAuth.",
+    "expand": "Expand",
+    "collapse": "Collapse",
+    "envVars": "Environment Variables",
+    "httpHeaders": "HTTP Headers",
+    "notConfigured": "Not configured",
+    "discoveredTools": "Discovered Tools",
+    "noToolsExposed": "No tools exposed by this server.",
+    "more": "more",
+    "dangerZoneHint": "Permanently remove this server.",
+    "importSandbox": "Import Configuration",
+    "pathCopied": "Path copied to clipboard",
+    "blindImport": "Import",
+    "allTools": "All Tools",
+    "searchTools": "Search tools...",
+    "noDescription": "No description available.",
+    "noToolsMatch": "No tools match your search.",
+    "diagnosticLog": "Diagnostic Log",
+    "noLog": "No diagnostic information available.",
+    "copyLog": "Copy Log",
+    "editValue": "Edit {value}",
+    "editLongTextHint": "Enter or edit your long configuration value here.",
+    "enterContent": "Enter content here...",
+    "unsavedChangesDesc": "You have unsaved changes. Do you want to discard them?",
+    "keepEditing": "Keep Editing",
+    "discardAndSwitch": "Discard & Switch"
   },
   "home": {
     "title": "Home"
   },
   "bots": {
     "toolApproval": {
+      "posture": {
+        "title": "Security Posture",
+        "hardened": "Hardened",
+        "description": "Approval policies are actively enforcing execution boundaries."
+      },
+      "metrics": {
+        "activeRules": "Active rules",
+        "totalDefined": "Total defined",
+        "blockedCount": "Blocks",
+        "sessionTrust": "Session trust"
+      },
+      "recentActivity": "Recent Activity",
+      "trust": "Trust",
+      "actions": {
+        "trustCall": "Trust call",
+        "trustDir": "Trust directory"
+      },
+      "noActivity": "No recent activity.",
+      "warnings": {
+        "disabled": "Tool approval is currently disabled.",
+        "breachRisk": "Resetting will clear all custom security rules."
+      },
+      "restoreSecurity": "Enable Tool Approval",
+      "examples": "Examples",
+      "status": {
+        "active": "Active",
+        "implicitDeny": "Implicit Deny",
+        "sealed": "Sealed"
+      },
+      "dangerZone": "Danger Zone",
+      "dangerZoneDesc": "Manage core security policies.",
+      "resetDefaults": "Reset to Defaults",
+      "confirmReset": "Are you sure you want to reset all tool approval rules to their default state?",
+      "resetWarningExtra": "Custom bypass and review rules will be lost.",
       "title": "Tool Call Approval",
-      "intro": "Require human approval before the bot writes, edits files, or runs commands inside its container. Configure rules per sensitive tool below — bypass templates skip approval automatically, must-review templates always trigger approval.",
+      "intro": "Require approval before the bot modifies files or runs commands. Configure rules for each tool below. Bypass patterns auto-approve; must-review patterns force approval.",
       "tools": {
         "write": "Create new files inside the container",
         "edit": "Modify existing files inside the container",
@@ -802,7 +904,7 @@
     "title": "Bots",
     "searchPlaceholder": "Search bots…",
     "createBot": "New Bot",
-    "createBotWaitHint": "Creating a bot may need to pull the base image on first use. Please wait a moment after submission.",
+    "createBotWaitHint": "First-time creation may pull base images and take a moment.",
     "createBotSuccess": "Bot created successfully.",
     "steps": {
       "basicInfo": "Basic Info",
@@ -827,7 +929,7 @@
     },
     "localWorkspacePath": "Local workspace folder",
     "localWorkspacePathPlaceholder": "Choose a folder on this computer",
-    "localWorkspaceWarning": "Local workspaces can access host files and commands with the server user's permissions.",
+    "localWorkspaceWarning": "Local workspaces run directly on the host using the server's permissions, giving them full access to local files and commands.",
     "editBot": "Edit Bot",
     "deleteConfirm": "Are you sure you want to delete this bot?",
     "renameSuccess": "Bot name updated",
@@ -844,9 +946,9 @@
     "timezoneInherited": "Inherited from user/system",
     "timezoneInheritedHint": "Leave empty to inherit the user's timezone, or fall back to the system timezone.",
     "aclPreset": "Security Policy",
-    "aclPresetDescription": "Choose a common ACL starting point during creation. You can fine-tune it later in Access Control.",
-    "aclPresetHint": "Recommendation: use Private Only for personal assistants, Group Only or Group and Thread for community bots, and Allow All when you want the broadest default.",
-    "aclPresetHelp": "This initializes the bot ACL default effect and preset rules at creation time. You can still edit them later in Access Control.",
+    "aclPresetDescription": "Start with a standard ACL preset. You can tweak it later in Access Control.",
+    "aclPresetHint": "Tip: use 'Private Only' for personal bots, 'Group Only' or 'Group and Thread' for community bots, and 'Allow All' to stay completely open.",
+    "aclPresetHelp": "This sets up your default ACL effect and initial rules. You can adjust them anytime from the Access Control page.",
     "aclPresets": {
       "allowAll": {
         "title": "Allow All",
@@ -891,6 +993,22 @@
       "deleteFailed": "Delete failed"
     },
     "checks": {
+      "lastSync": "Last synced",
+      "statusTitle": "Health Checks",
+      "status": {
+        "issue": "Needs attention",
+        "stable": "Healthy",
+        "ok": "OK",
+        "warn": "WARN",
+        "error": "ERROR",
+        "unknown": "UNKNOWN"
+      },
+      "vitalityTitle": "Vitality",
+      "vitalityUnit": "events",
+      "diagnosticTitle": "Diagnostics",
+      "diagnosticSubtitle": "Real-time system diagnostics.",
+      "expandAll": "Expand all",
+      "collapse": "Collapse",
       "title": "Runtime Checks",
       "subtitle": "View current health status and issue details.",
       "ok": "No issues",
@@ -914,15 +1032,10 @@
         "containerTask": "Container task",
         "containerDataPath": "Container data path",
         "botDelete": "Bot deletion"
-      },
-      "status": {
-        "ok": "OK",
-        "warn": "WARN",
-        "error": "ERROR",
-        "unknown": "UNKNOWN"
       }
     },
     "tabs": {
+      "overviewSubtitle": "System vitality and quick insights.",
       "overview": "Overview",
       "general": "General",
       "desktop": "Desktop",
@@ -944,17 +1057,26 @@
       "settings": "Settings"
     },
     "desktop": {
+      "title": "Desktop Environment",
+      "subtitle": "Manage virtual display and interaction sessions.",
+      "groupInfrastructure": "Infrastructure",
+      "groupEnvironment": "Environment",
+      "groupApplication": "Application",
       "runtimeTitle": "Runtime",
       "runtimeButton": "Runtime",
-      "liveTitle": "Desktop 1",
-      "liveDescription": "Primary live workspace desktop.",
-      "previewTitle": "Other desktops",
-      "previewDescription": "Connected sessions appear here as screenshots.",
-      "previewEmpty": "Waiting for screenshot",
+      "liveTitle": "Primary Display",
+      "liveDescription": "Live preview of the workspace desktop.",
+      "previewTitle": "Active Sessions",
+      "previewDescription": "Screenshots of other connected sessions.",
+      "previewEmpty": "No preview",
       "sessionsTitle": "Sessions",
-      "summaryDisabled": "Desktop is disabled",
-      "summaryReady": "Desktop is ready",
-      "summaryPreparing": "Desktop runtime will be prepared when a window opens",
+      "summaryDisabled": "Disabled",
+      "summaryReady": "Running",
+      "summaryPreparing": "Preparing environment...",
+      "statusReady": "Ready",
+      "statusNotReady": "Not Ready",
+      "statusRunning": "Running",
+      "statusStopped": "Stopped",
       "enabled": "Enabled",
       "runtime": "Runtime",
       "vnc": "VNC",
@@ -965,11 +1087,14 @@
       "session": "Session",
       "state": "State",
       "codec": "Codec",
-      "createdAt": "Created",
+      "createdAt": "Started",
       "actions": "Actions",
-      "noSessions": "No other desktop sessions",
-      "closeSession": "Close session",
-      "closeFailed": "Failed to close desktop session",
+      "noSessions": "No active sessions",
+      "closeSession": "Terminate",
+      "closeSessionConfirm": "Terminate session?",
+      "closeFailed": "Failed to terminate session",
+      "desktopEnabledSuccess": "Desktop environment enabled",
+      "desktopDisabledSuccess": "Desktop environment disabled",
       "unknown": "Unknown"
     },
     "terminal": {
@@ -1041,32 +1166,32 @@
       "sentAt": "Sent"
     },
     "container": {
-      "title": "Container Management",
-      "subtitle": "Manage the runtime container attached to this bot.",
-      "botNotReady": "This bot is in lifecycle transition. Container actions are temporarily disabled.",
-      "empty": "No container found for this bot. Create one to enable runtime tooling.",
-      "legacyWarning": "This container uses an older architecture and needs to be recreated for full compatibility. Your data will be preserved automatically.",
-      "legacyRecreate": "Recreate Container",
-      "legacyRecreateSuccess": "Container recreated successfully",
-      "createHint": "The container is created from the current image. If you explicitly enable restore, preserved data will be restored after creation.",
+      "title": "Container",
+      "subtitle": "Manage the runtime environment for this bot.",
+      "botNotReady": "Bot lifecycle transition in progress. Container actions disabled.",
+      "empty": "No container found. Create one to enable runtime tools.",
+      "legacyWarning": "Old architecture detected. Recreate for full compatibility (data preserved automatically).",
+      "legacyRecreate": "Recreate",
+      "legacyRecreateSuccess": "Container recreated",
+      "createHint": "Container created from current image. Enable restore to recover preserved data.",
       "createRestoreDataLabel": "Restore preserved data after creation",
-      "createRestoreDataDescription": "If a previously exported backup or legacy bind-mounted data exists, it will be restored into `/data` after the container is created.",
+      "createRestoreDataDescription": "Existing backups or legacy data will be restored into `/data` automatically.",
       "createImageLabel": "Base image",
-      "createImageDescription": "Docker image to use as the container base (e.g. debian:bookworm-slim, alpine:latest, ubuntu:24.04). Leave empty for the default.",
+      "createImageDescription": "Docker image for the container base (e.g. debian:bookworm-slim). Leave empty for default.",
       "createAdvancedTitle": "Advanced options",
-      "createAdvancedDescription": "Configure optional GPU access and raw CDI device mappings for this container.",
+      "createAdvancedDescription": "Configure GPU access and raw CDI device mappings.",
       "createGpuLabel": "Enable GPU",
       "createGpuDescription": "Attach host GPU access to the new container.",
       "createGpuDevicesLabel": "CDI devices",
-      "createGpuDevicesDescription": "Enter one CDI device per line or separate them with commas, for example `nvidia.com/gpu=0` or `amd.com/gpu=0`. Turning GPU off explicitly clears the saved GPU preference.",
+      "createGpuDevicesDescription": "Enter one CDI device per line or use commas. Turning GPU off clears saved preferences.",
       "createGpuDevicesPlaceholder": "nvidia.com/gpu=0\namd.com/gpu=0",
-      "gpuDevicesRequired": "At least one CDI device is required when GPU is enabled.",
+      "gpuDevicesRequired": "At least one CDI device is required for GPU.",
       "cdiDevicesEmpty": "No GPU attached",
-      "gpuRecreateHint": "Changing GPU settings requires recreating the container. A simple start or stop will not change the devices already attached.",
-      "deleteConfirm": "Are you sure you want to permanently delete this container? Unpreserved data cannot be recovered.",
-      "deletePreserveConfirm": "Are you sure you want to export `/data` and then delete this container?",
-      "restoreConfirm": "Are you sure you want to restore preserved data into this container's `/data`?",
-      "rollbackConfirm": "Are you sure you want to roll back to this snapshot version?",
+      "gpuRecreateHint": "GPU changes require recreation. A simple start/stop will not update devices.",
+      "deleteConfirm": "Delete this container permanently? Unpreserved data cannot be recovered.",
+      "deletePreserveConfirm": "Export `/data` and then delete this container?",
+      "restoreConfirm": "Restore preserved data into `/data`?",
+      "rollbackConfirm": "Roll back to this snapshot version?",
       "taskRunning": "Running",
       "taskStopped": "Stopped",
       "taskCompleted": "Completed",
@@ -1075,7 +1200,7 @@
       "statusStopped": "Stopped",
       "statusExited": "Exited",
       "statusUnknown": "Unknown",
-      "loadFailed": "Failed to load container information",
+      "loadFailed": "Failed to load container info",
       "actionFailed": "Container action failed",
       "createSuccess": "Container created",
       "createRestoreSuccess": "Container created and data restored",
@@ -1086,25 +1211,28 @@
       "snapshotSuccess": "Snapshot created",
       "exportSuccess": "Data exported",
       "importSuccess": "Data imported",
-      "restoreSuccess": "Preserved data restored",
+      "restoreSuccess": "Data restored",
       "rollbackSuccess": "Snapshot rolled back",
       "pullingImage": "Pulling image...",
       "creatingContainer": "Creating container...",
-      "preservingData": "Backing up data, this may take a while for large volumes...",
-      "restoringData": "Restoring data, this may take a while for large volumes...",
-      "snapshotEmpty": "No snapshots found",
+      "preservingData": "Backing up data...",
+      "restoringData": "Migrating data...",
+      "lifecycleTitle": "Lifecycle",
+      "snapshotTitle": "Snapshots",
+      "snapshotSubtitle": "Capture and rollback container states.",
+      "snapshotEmpty": "No snapshots",
       "snapshotLoadFailed": "Failed to load snapshots",
-      "snapshotNamePlaceholder": "Snapshot display name (optional)",
-      "snapshotNameHint": "This field is only for the user-visible display name. The internal snapshot name is generated automatically.",
-      "metricsTitle": "Resource Status",
-      "metricsSubtitle": "View CPU, memory, and storage usage for the container's entire filesystem.",
-      "metricsLoadFailed": "Failed to load container resource status",
-      "metricsUnsupported": "The current container backend does not support resource monitoring.",
-      "metricsUnavailable": "No resource metrics available.",
-      "metricsStopped": "The container task is not running; CPU and memory metrics are unavailable. Storage information will still be shown if available.",
-      "metricsPath": "Scope",
-      "metricsUnlimited": "No memory limit configured",
-      "currentSample": "Current sample",
+      "snapshotNamePlaceholder": "Display name (optional)",
+      "snapshotNameHint": "User-visible display name; system generates internal name.",
+      "metricsTitle": "Resources",
+      "metricsSubtitle": "CPU, memory, and storage usage.",
+      "metricsLoadFailed": "Failed to load metrics",
+      "metricsUnsupported": "Resource monitoring not supported by backend.",
+      "metricsUnavailable": "No metrics available.",
+      "metricsStopped": "Container not running; viewing storage only.",
+      "metricsPath": "Path",
+      "metricsUnlimited": "No limit",
+      "currentSample": "Current",
       "sampledAt": "Sampled at",
       "metricsLabels": {
         "cpu": "CPU",
@@ -1112,53 +1240,68 @@
         "storage": "Storage"
       },
       "dataTitle": "Data Operations",
-      "dataSubtitle": "Independently manage import, export, and restore for the container `/data` directory.",
+      "dataSubtitle": "Manage import, export, and restore for `/data`.",
       "deleteTitle": "Delete Container",
-      "deleteSubtitle": "Before deletion, explicitly choose whether `/data` should be preserved to avoid accidental data loss.",
-      "preservedDataAvailable": "Preserved data is available and can be restored into the current container.",
+      "deleteSubtitle": "Confirm whether to preserve `/data` before deletion.",
+      "deleteZoneDesc": "Deleting this container cannot be undone. Proceed with caution.",
+      "preservedDataAvailable": "Preserved data available for restoration.",
       "preservedDataAvailableShort": "Available",
       "preservedDataEmpty": "None",
       "sourceManual": "Manual",
-      "sourcePreExec": "Auto before execution",
-      "sourceRollback": "Generated by rollback",
+      "sourcePreExec": "Auto pre-exec",
+      "sourceRollback": "Rollback",
       "fields": {
-        "id": "Container ID",
-        "status": "Container Status",
+        "id": "ID",
+        "status": "Status",
         "task": "Task",
         "namespace": "Namespace",
         "image": "Image",
         "cdiDevices": "CDI Devices",
         "hostPath": "Host Path",
-        "containerPath": "Container Path",
+        "containerPath": "Path",
         "preservedData": "Preserved Data",
-        "createdAt": "Created At",
-        "updatedAt": "Updated At"
+        "createdAt": "Created",
+        "updatedAt": "Updated"
       },
       "snapshotColumns": {
         "name": "Name",
         "version": "Version",
         "source": "Source",
         "parent": "Parent",
-        "createdAt": "Created At",
+        "createdAt": "Created",
         "actions": "Actions"
       },
       "actions": {
-        "create": "Create Container",
+        "create": "Create",
         "start": "Start",
         "stop": "Stop",
-        "delete": "Delete Permanently",
-        "deletePreserve": "Delete and Preserve Data",
-        "snapshot": "Create Snapshot",
-        "exportData": "Export Data",
-        "importData": "Import Data",
-        "restoreData": "Restore Preserved Data",
+        "delete": "Delete",
+        "deletePreserve": "Preserve & Delete",
+        "snapshot": "Create",
+        "exportData": "Export",
+        "importData": "Import",
+        "restoreData": "Restore",
         "rollback": "Rollback"
       }
     },
     "settings": {
+      "blocks": {
+        "context": "Context & Memory",
+        "contextDescription": "Configure how this bot remembers and processes information.",
+        "global": "Global Settings",
+        "globalDescription": "Core preferences for this bot.",
+        "interaction": "Interaction",
+        "interactionDescription": "Configure how the bot engages in conversations.",
+        "multimedia": "Multimedia",
+        "multimediaDescription": "Configure voice and image generation models."
+      },
+      "hideMemoryDetails": "Hide details",
+      "showMemoryDetails": "Show details",
+      "chatLanguage": "Language",
+      "chatLanguagePlaceholder": "e.g., English, zh-CN",
       "chatModel": "Chat Model",
       "titleModel": "Title Model",
-      "titleModelDescription": "Select a small model to auto-generate session titles. Leave empty to disable.",
+      "titleModelDescription": "Pick a lightweight model to automatically title conversations. Leave empty to disable.",
       "titleModelPlaceholder": "Disabled (no auto title)",
       "searchProvider": "Web Search",
       "searchProviderPlaceholder": "Select web search",
@@ -1166,11 +1309,11 @@
       "memoryProviderPlaceholder": "Select memory provider (disabled if empty)",
       "memoryModePreview": "Selected built-in mode: {mode}",
       "sparseStatusTitle": "Sparse Retrieval Status",
-      "sparseStatusHint": "Markdown files remain the only source of truth. Manual sync rebuilds Qdrant from entries under /data/memory.",
+      "sparseStatusHint": "Markdown files are the source of truth. Syncing rebuilds the Qdrant index from /data/memory.",
       "denseStatusTitle": "Dense Retrieval Status",
-      "denseStatusHint": "Markdown files remain the only source of truth. Manual sync rebuilds the dense Qdrant index from entries under /data/memory.",
+      "denseStatusHint": "Markdown files are the source of truth. Syncing rebuilds the dense Qdrant index from /data/memory.",
       "mem0StatusTitle": "Mem0 Sync Status",
-      "mem0StatusHint": "Markdown files remain the only source of truth. Manual sync rebuilds managed Mem0 memories from entries under /data/memory.",
+      "mem0StatusHint": "Markdown files are the source of truth. Syncing rebuilds Mem0 memories from /data/memory.",
       "indexedMemoryStatusPendingSave": "Save the selected memory provider before viewing indexed memory status or running a sync.",
       "memorySyncAction": "Manual Sync",
       "memorySyncSuccess": "Sync completed: {fsCount} source entries, {restoredCount} restored, {storageCount} indexed.",
@@ -1211,20 +1354,22 @@
       "compactionDescription": "Automatically summarize older messages when context gets too large",
       "compactionThreshold": "Compaction Threshold (input tokens)",
       "compactionRatio": "Compaction Ratio (%)",
-      "compactionRatioDescription": "Percentage of older messages to compact. The remaining recent messages are kept intact.",
+      "compactionRatioDescription": "The percentage of older messages to summarize. Recent messages are kept intact.",
       "compactionModel": "Compaction Model",
       "compactionModelDescription": "Select a model for summarization. Defaults to the bot's chat model if not set.",
       "compactionModelPlaceholder": "Use chat model (default)",
       "showToolCallsInIM": "Show Tool Calls in IM",
-      "showToolCallsInIMDescription": "Surface tool execution status (running / completed / failed) as a single message in IM channels. Off by default.",
+      "showToolCallsInIMDescription": "Show live tool execution status (running / complete / failed) directly in the chat. Disabled by default.",
       "displayEnabled": "Enable Workspace Display",
-      "displayEnabledDescription": "Start Xvnc when the container starts. Save and restart the workspace container for this to take effect.",
+      "displayEnabledDescription": "Launch Xvnc alongside the container. Restart the workspace for this to take effect.",
       "desktopEnabled": "Desktop",
-      "desktopEnabledDescription": "Enable the workspace VNC desktop. If runtime packages are missing, Memoh will prepare Debian/Ubuntu or Alpine workspaces when the desktop is opened.",
+      "desktopEnabledDescription": "Enable the VNC desktop. Memoh will automatically provision Debian/Ubuntu or Alpine workspaces if missing.",
       "toolApproval": "Tool Call Approval",
       "toolApprovalDescription": "Require human approval for sensitive write, edit, and exec tool calls, with bypass templates for safe paths or commands.",
       "toolApprovalBypass": "Bypass",
       "toolApprovalMustReview": "Must review",
+      "botStatusTitle": "Bot Status",
+      "botStatusSubtitle": "Current workspace container and base network info.",
       "networkPageTitle": "Network",
       "networkPageSubtitle": "Workspace network status and SD-WAN settings.",
       "networkStatusEmpty": "No status fields to display.",
@@ -1233,6 +1378,7 @@
       "overlayProviderFieldLabel": "Connection type",
       "overlayProviderPlaceholder": "Select a solution (turn off to skip SD-WAN)",
       "overlayProviderRequired": "Choose a connection type before enabling.",
+      "overlayPrimaryConfigTitle": "Primary Configuration",
       "networkStatusPendingSaveTitle": "Pending Save",
       "networkStatusPendingSave": "Network settings changed. Save before checking the current status.",
       "networkWorkspaceStateLabel": "State",
@@ -1260,7 +1406,7 @@
       "networkStatusExitNode": "Exit Node",
       "networkNeedsLoginDescription": "Authentication required. Open the link below to log in to your SD-WAN provider.",
       "networkOpenLoginPage": "Open Login Page",
-      "networkNeedsLoginHint": "After completing login in your browser, return here and refresh the status.",
+      "networkNeedsLoginHint": "Once logged in via your browser, return here to refresh.",
       "networkLogout": "Log Out",
       "networkLogoutSuccess": "Logged out successfully.",
       "networkLogoutFailed": "Logout failed.",
@@ -1282,6 +1428,8 @@
       "searchModel": "Search models…",
       "noModel": "No models available",
       "saveSuccess": "Settings saved",
+      "saveOnly": "Save without Enabling",
+      "saveAndEnable": "Save and Enable",
       "save": "Save Settings",
       "dangerZone": "Danger Zone",
       "deleteBotDescription": "Deleting this bot cannot be undone. Proceed with caution.",
@@ -1299,46 +1447,46 @@
       "blacklistModeDescription": "Allow everyone by default, then block the entries on the blacklist.",
       "blacklistModeHint": "Default is allow. New entries are added to the blacklist.",
       "whitelistMode": "Whitelist Mode",
-      "whitelistModeDescription": "Block everyone by default, then allow only the entries on the whitelist.",
+      "whitelistModeDescription": "Block everyone except those you explicitly allow.",
       "whitelistModeHint": "Default is deny. New entries are added to the whitelist.",
       "blacklistTitle": "Blacklist",
-      "blacklistDescription": "Entries on this list are blocked.",
+      "blacklistDescription": "Anyone on this list is blocked.",
       "whitelistTitle": "Whitelist",
-      "whitelistDescription": "Only entries on this list are allowed.",
+      "whitelistDescription": "Only people on this list get through.",
       "addBlacklistEntry": "Add to Blacklist",
       "addWhitelistEntry": "Add to Whitelist",
-      "blacklistEmpty": "Blacklist is empty",
-      "blacklistEmptyDescription": "No additional blocks. Messages not matched by other rules are allowed.",
-      "whitelistEmpty": "Whitelist is empty",
-      "whitelistEmptyDescription": "No allowed entries yet. Messages not matched by other rules are blocked.",
+      "blacklistEmpty": "Blacklist Is Empty",
+      "blacklistEmptyDescription": "No blocks active. Anyone not matched by other rules is allowed.",
+      "whitelistEmpty": "Whitelist Is Empty",
+      "whitelistEmptyDescription": "No allowed entries yet. Anyone not matched by other rules is blocked.",
       "blacklistPreview": "Add {target} to the blacklist.",
       "whitelistPreview": "Add {target} to the whitelist.",
-      "platformQuestion": "Which platform does this entry apply to?",
-      "userQuestion": "Which user does this entry apply to?",
-      "allPlatforms": "All platforms",
-      "allUsers": "All users",
+      "platformQuestion": "Which Platform Is This For?",
+      "userQuestion": "Which User Does This Apply To?",
+      "allPlatforms": "All Platforms",
+      "allUsers": "All Users",
       "searchPlatform": "Search platforms",
       "noPlatformCandidates": "No platforms available",
       "platformTargetPreview": "all {platform} users",
       "platformUserTargetPreview": "{user} on {platform}",
       "userTargetPreview": "user {user}",
-      "previewScopeAny": "for all chats",
-      "previewScopePrivate": "only in private chats",
-      "previewScopeGroup": "only in groups",
-      "previewScopeThread": "only in threads",
-      "previewScopeSpecific": "only in the selected conversation",
+      "previewScopeAny": "In All Chats",
+      "previewScopePrivate": "Only In DMs",
+      "previewScopeGroup": "Only In Groups",
+      "previewScopeThread": "Only In Threads",
+      "previewScopeSpecific": "Only In The Selected Chat",
       "effectAllow": "Allow",
       "effectDeny": "Deny",
       "rulesTitle": "Rules",
       "addRule": "Add Rule",
       "editRule": "Edit Rule",
-      "rulesEmpty": "No rules",
-      "rulesEmptyDescription": "Add a rule to control access beyond the default effect.",
+      "rulesEmpty": "No Rules",
+      "rulesEmptyDescription": "Add a rule to override the default behavior.",
       "enabled": "Enabled",
-      "effect": "Effect",
-      "matchTarget": "Match Target",
-      "targetQuestion": "Who does this list entry apply to?",
-      "scopeQuestion": "Where should it take effect?",
+      "effect": "Action",
+      "matchTarget": "Applies To",
+      "targetQuestion": "Who Does This Apply To?",
+      "scopeQuestion": "Where Should It Work?",
       "subjectAll": "All",
       "subjectChannelType": "Platform",
       "subjectChannelIdentity": "User",
@@ -1358,49 +1506,49 @@
       "ruleDisabled": "Disabled",
       "enableRule": "Enable",
       "disableRule": "Disable",
-      "saveOnly": "Save without Enabling",
+      "saveOnly": "Save",
       "saveAndEnable": "Save and Enable",
       "saveFailed": "Failed to save",
-      "deleteSuccess": "Rule deleted",
-      "deleteFailed": "Failed to delete rule",
-      "anyConversationScope": "Any chat scope",
+      "deleteSuccess": "Deleted",
+      "deleteFailed": "Failed to delete",
+      "anyConversationScope": "Anywhere",
       "chatScope": "Chat Scope",
-      "chatScopeDescription": "Choose which chat contexts this list entry applies to.",
+      "chatScopeDescription": "Choose where this rule applies.",
       "chatScopeAny": "All chats",
-      "specificConversationTitle": "Limit to one specific chat",
-      "specificConversationDescription": "Usually unnecessary. Use this only when the entry should apply to one group, private chat, or thread.",
-      "sourceChannel": "Source Platform",
-      "anyChannel": "Any platform",
-      "conversationType": "Conversation Type",
-      "anyConversationType": "Any conversation type",
-      "privateConversationType": "Private chats only",
-      "groupConversationType": "Groups only",
-      "threadConversationType": "Threads only",
-      "allowPrivateConversation": "Allow private chats",
-      "allowGroupConversation": "Allow groups",
-      "allowThreadConversation": "Allow threads",
-      "denyPrivateConversation": "Block private chats",
-      "denyGroupConversation": "Block groups",
-      "denyThreadConversation": "Block threads",
-      "privateConversationGroup": "Private Chats",
+      "specificConversationTitle": "Limit to a Specific Chat",
+      "specificConversationDescription": "Most people don't need this. Use it only if you want to target a single group, DM, or thread.",
+      "sourceChannel": "Platform",
+      "anyChannel": "Any Platform",
+      "conversationType": "Type",
+      "anyConversationType": "Any Type",
+      "privateConversationType": "DMs Only",
+      "groupConversationType": "Groups Only",
+      "threadConversationType": "Threads Only",
+      "allowPrivateConversation": "Allow DMs",
+      "allowGroupConversation": "Allow Groups",
+      "allowThreadConversation": "Allow Threads",
+      "denyPrivateConversation": "Block DMs",
+      "denyGroupConversation": "Block Groups",
+      "denyThreadConversation": "Block Threads",
+      "privateConversationGroup": "DMs",
       "groupConversationGroup": "Groups",
       "threadConversationGroup": "Threads",
-      "unknownConversationGroup": "Other Conversations",
-      "conversationSource": "Conversation",
-      "existingConversation": "Existing Conversation",
-      "selectConversationSource": "Search or select a conversation",
-      "searchConversationSource": "Search conversations",
-      "noObservedConversations": "No matching conversations in history yet. Use manual IDs below, or ensure this bot has messages in those chats (including private).",
-      "manualConversationIds": "Can't find it? Enter IDs manually",
-      "manualConversationIdsHint": "Use this only when the target is missing from history. Copy the raw conversation ID and thread ID from the platform.",
-      "pickTargetForConversationSearch": "Choose a platform or user first, then pick from existing conversations.",
-      "pickIdentityForConversationSearch": "Choose a user above to search conversations observed for this bot.",
-      "pickChannelTypeForConversationSearch": "Choose a platform above to search conversations this bot has seen on that platform.",
+      "unknownConversationGroup": "Other",
+      "conversationSource": "Chat",
+      "existingConversation": "Known Chats",
+      "selectConversationSource": "Find a Conversation",
+      "searchConversationSource": "Search chats",
+      "noObservedConversations": "We haven't seen any conversations matching this yet. You can enter IDs manually below, or wait for the bot to show up in those chats.",
+      "manualConversationIds": "Enter IDs Manually",
+      "manualConversationIdsHint": "Only use this if you can't find the chat in history. You'll need to grab the IDs directly from the platform.",
+      "pickTargetForConversationSearch": "Choose a platform or user first to see their conversations.",
+      "pickIdentityForConversationSearch": "Pick a user to search their chat history.",
+      "pickChannelTypeForConversationSearch": "Pick a platform to search its chat history.",
       "conversationId": "Conversation ID",
-      "conversationIdPlaceholder": "Enter conversation ID",
+      "conversationIdPlaceholder": "Enter ID",
       "threadId": "Thread ID",
       "threadIdPlaceholder": "Enter thread ID",
-      "clearSpecificConversation": "Clear Specific Conversation",
+      "clearSpecificConversation": "Clear Selection",
       "lastObserved": "Last seen"
     },
     "channels": {
@@ -1464,6 +1612,8 @@
       }
     },
     "memory": {
+      "unsavedChanges": "Unsaved changes",
+      "emptyHistory": "No history available.",
       "title": "Here lie the memories.",
       "files": "Memory Files",
       "empty": "No memory entries found.",
@@ -1511,8 +1661,8 @@
       "discoverySaveSuccess": "Skill paths saved",
       "discoverySaveFailed": "Failed to save skill paths",
       "addSkill": "New Skill",
-      "emptyTitle": "No Skills",
-      "emptyDescription": "Click above to create a new skill",
+      "emptyTitle": "No Active Skills",
+      "emptyDescription": "Create a managed skill or scan external paths to get started.",
       "managedBadge": "Managed",
       "discoveredBadge": "External",
       "effectiveBadge": "Effective",
@@ -1524,7 +1674,7 @@
       "descriptionPlaceholder": "Enter skill description",
       "content": "Content",
       "contentPlaceholder": "Enter skill content/prompt",
-      "deleteConfirm": "Are you sure you want to delete this skill?",
+      "deleteConfirm": "Permanently delete this managed skill?",
       "overrideTitle": "Edit to create a managed copy",
       "adoptAction": "Copy to Managed Path",
       "adoptBlocked": "A managed copy already exists",
@@ -1541,7 +1691,8 @@
       "deleteFailed": "Failed to delete skill",
       "saveSuccess": "Skill saved",
       "saveFailed": "Failed to save skill",
-      "loadFailed": "Failed to load skills"
+      "loadFailed": "Failed to load skills",
+      "intro": "Configure custom abilities for this bot. Managed skills take precedence."
     },
     "compaction": {
       "title": "Compaction Logs",
@@ -1577,58 +1728,65 @@
       "statusAlert": "Alert",
       "statusError": "Error",
       "filterAll": "All",
-      "noResult": "—"
+      "noResult": "—",
+      "description": "Heartbeat allows the bot to periodically scan for items needing attention, ensuring tasks are processed even when not directly messaged.",
+      "filterEmpty": "No logs matching the selected status filter."
     },
     "schedule": {
-      "title": "Scheduled Tasks",
-      "loadFailed": "Failed to load schedules",
-      "empty": "No scheduled tasks",
+      "title": "Schedule",
+      "subtitle": "Configure automated tasks. Use the visual builder or cron expressions for precise control.",
+      "loadFailed": "Load failed",
+      "empty": "No tasks scheduled",
       "name": "Name",
       "pattern": "Pattern",
       "enabled": "Enabled",
       "calls": "Calls",
       "createdAt": "Created",
       "updatedAt": "Updated",
-      "statusEnabled": "Enabled",
-      "statusDisabled": "Disabled",
-      "unlimited": "∞",
+      "statusEnabled": "Active",
+      "statusDisabled": "Inactive",
+      "unlimited": "Unlimited",
       "actions": "Actions",
-      "create": "New Schedule",
-      "edit": "Edit",
+      "create": "New Task",
+      "edit": "Edit Task",
       "delete": "Delete",
-      "deleteConfirm": "Delete schedule \"{name}\"? This cannot be undone.",
-      "deleteSuccess": "Schedule deleted",
-      "deleteFailed": "Failed to delete schedule",
-      "saveSuccess": "Schedule saved",
-      "saveFailed": "Failed to save schedule",
+      "deleteConfirm": "Delete task \"{name}\"? This cannot be undone.",
+      "deleteSuccess": "Task deleted",
+      "deleteFailed": "Delete failed",
+      "saveSuccess": "Task saved",
+      "saveFailed": "Save failed",
+      "dangerZoneDesc": "Task deletion is permanent. Proceed with caution.",
       "form": {
-        "name": "Name",
-        "namePlaceholder": "e.g. Morning brief",
+        "name": "Task Name",
+        "namePlaceholder": "e.g. Daily Briefing",
         "description": "Description",
-        "descriptionPlaceholder": "What this schedule does",
-        "command": "Instruction",
-        "commandPlaceholder": "Tell the bot what to do when this fires",
-        "commandHint": "This will be delivered to the bot as a message each time the schedule triggers.",
+        "descriptionPlaceholder": "What this task does",
+        "command": "Command",
+        "commandPlaceholder": "Instruction to execute",
+        "commandHint": "This command is sent to the bot as a message upon triggering.",
         "pattern": "Schedule",
         "mode": "Mode",
-        "everyMinutes": "Every N minutes (1-59)",
-        "atMinute": "At minute of each hour (0-59)",
+        "everyMinutes": "Every N mins",
+        "atMinute": "At specific minute",
         "hour": "Hour",
         "hours": "Hours",
-        "hoursHint": "Click to select one or more hours of the day.",
+        "hoursHint": "Select hours of the day.",
         "minute": "Minute",
-        "weekdays": "Days of week",
-        "monthDays": "Days of month",
+        "weekdays": "Weekdays",
+        "monthDays": "Month days",
         "month": "Month",
         "monthDay": "Day",
-        "maxCalls": "Run limit",
-        "maxCallsUnlimited": "Unlimited",
-        "enabled": "Enabled",
-        "patternPreview": "Cron pattern",
+        "maxCalls": "Run Limit",
+        "maxCallsUnlimited": "No limit",
+        "enabled": "Enable Task",
+        "visualBuilder": "Visual Builder",
+        "cronCode": "Cron Expression",
+        "manualEditHint": "Manual edits will sync with the visual builder.",
+        "patternPreview": "Preview Pattern",
         "nextRuns": "Next runs ({tz})",
-        "invalidPattern": "Pattern is invalid",
-        "advancedPattern": "Cron expression",
-        "advancedHint": "Standard cron: minute hour day-of-month month day-of-week. Descriptors like @daily are also accepted."
+        "invalidPattern": "Invalid pattern",
+        "advancedPattern": "Cron Expression",
+        "advancedHint": "Supports standard Cron format and @daily descriptors."
       },
       "mode": {
         "minutes": "Every N minutes",
diff --git a/apps/web/src/i18n/locales/zh.json b/apps/web/src/i18n/locales/zh.json
index e2183bee3..356daf782 100644
--- a/apps/web/src/i18n/locales/zh.json
+++ b/apps/web/src/i18n/locales/zh.json
@@ -13,7 +13,13 @@
     "operation": "操作",
     "enable": "启用",
     "optional": "可选",
-    "advanced": "高级选项",
+    "allOptional": "全部可选",
+    "placeholderPrefix": "比如 {example}",
+    "advanced": "高级",
+    "primary": "主要",
+    "format": "格式化",
+    "dangerZone": "危险区域",
+    "viewAll": "查看全部",
     "import": "导入",
     "export": "导出",
     "copy": "复制",
@@ -27,12 +33,18 @@
     "batchDeleteConfirm": "确定删除选中的 {count} 项？",
     "batchExport": "批量导出",
     "cancelSelection": "取消选择",
+    "updatedAt": "更新时间",
+    "actions": "操作",
+    "enabled": "已启用",
+    "disabled": "已禁用",
     "name": "名称",
     "namePlaceholder": "输入名称",
     "type": "类型",
     "typePlaceholder": "选择类型",
     "refresh": "刷新",
     "status": "状态",
+    "active": "启用",
+    "inactive": "未启用",
     "loadFailed": "加载失败",
     "saveFailed": "保存失败",
     "createdAt": "创建时间",
@@ -768,15 +780,105 @@
       "callbackUrl": "回调地址",
       "callbackUrlHint": "请在 OAuth 应用设置中填入此回调地址。",
       "callbackMissingParams": "缺少授权码或状态参数"
-    }
+    },
+    "servers": "服务器",
+    "addNew": "添加服务器",
+    "searchServers": "搜索服务器...",
+    "unnamedServer": "未命名服务器",
+    "untitled": "无标题",
+    "unsavedChangesTitle": "未保存更改",
+    "verifyingCancel": "取消",
+    "discardDraftConfirm": "确定要放弃当前草稿吗？",
+    "discard": "放弃草稿",
+    "invalidConfig": "配置无效",
+    "handshakeError": "连接失败",
+    "viewRawLog": "查看原始日志",
+    "identity": "身份标识",
+    "placeholders": {
+      "name": "例如：天气 API",
+      "url": "https://...",
+      "envKey": "键",
+      "envValue": "值",
+      "headerKey": "请求头",
+      "headerValue": "值"
+    },
+    "transportType": "传输方式",
+    "payload": "传输配置",
+    "endpointUrl": "服务地址",
+    "streamProtocol": "流协议",
+    "protocol": {
+      "http": "HTTP",
+      "sse": "SSE"
+    },
+    "advancedSettings": "高级设置",
+    "advancedSettingsHint": "配置环境变量、请求头及 OAuth。",
+    "expand": "展开",
+    "collapse": "收起",
+    "envVars": "环境变量",
+    "httpHeaders": "HTTP 请求头",
+    "notConfigured": "未配置",
+    "discoveredTools": "已发现的工具",
+    "noToolsExposed": "该服务器未暴露任何工具。",
+    "more": "更多",
+    "dangerZoneHint": "永久删除此服务器配置。",
+    "importSandbox": "导入配置",
+    "pathCopied": "路径已复制",
+    "blindImport": "导入",
+    "allTools": "全部工具",
+    "searchTools": "搜索工具...",
+    "noDescription": "暂无描述。",
+    "noToolsMatch": "未找到匹配的工具。",
+    "diagnosticLog": "诊断日志",
+    "noLog": "暂无诊断信息。",
+    "copyLog": "复制日志",
+    "editValue": "编辑 {value}",
+    "editLongTextHint": "在此处输入或修改较长的配置值。",
+    "enterContent": "请输入内容...",
+    "unsavedChangesDesc": "你有未保存的更改，要放弃它们并切换吗？",
+    "keepEditing": "继续编辑",
+    "discardAndSwitch": "放弃并切换"
   },
   "home": {
     "title": "首页"
   },
   "bots": {
     "toolApproval": {
+      "posture": {
+        "title": "安全态势",
+        "hardened": "已加固",
+        "description": "审核策略正在积极拦截越权行为。"
+      },
+      "metrics": {
+        "activeRules": "生效规则",
+        "totalDefined": "已定义总数",
+        "blockedCount": "拦截次数",
+        "sessionTrust": "会话信任"
+      },
+      "recentActivity": "近期活动",
+      "trust": "信任",
+      "actions": {
+        "trustCall": "信任此调用",
+        "trustDir": "信任此目录"
+      },
+      "noActivity": "暂无近期活动。",
+      "warnings": {
+        "disabled": "工具审核目前已关闭。",
+        "breachRisk": "重置将清空所有自定义的安全规则。"
+      },
+      "restoreSecurity": "启用工具审核",
+      "examples": "示例",
+      "status": {
+        "active": "生效中",
+        "implicitDeny": "默认拒绝",
+        "sealed": "已封锁"
+      },
+      "dangerZone": "危险操作",
+      "dangerZoneDesc": "管理核心安全策略。",
+      "resetDefaults": "恢复默认设置",
+      "confirmReset": "确定要将所有工具的审核规则恢复到初始状态吗？",
+      "resetWarningExtra": "这将丢失你添加的所有白名单和黑名单。",
       "title": "工具调用审核",
-      "intro": "Bot 在容器内执行写入、修改文件或运行命令前，可以要求人工审核。下方为每类敏感工具单独配置规则——白名单内自动放行，黑名单强制审核。",
+      "intro": "在 Bot 修改文件或运行命令前进行拦截审核。为不同工具配置独立规则：白名单自动放行，黑名单强制审核。",
       "tools": {
         "write": "在容器内创建新文件",
         "edit": "修改容器内已存在的文件",
@@ -798,7 +900,7 @@
     "title": "Bots",
     "searchPlaceholder": "搜索 Bot…",
     "createBot": "新建 Bot",
-    "createBotWaitHint": "首次创建时可能需要拉取基础镜像，提交后请耐心等待片刻。",
+    "createBotWaitHint": "首次创建可能需要拉取基础镜像，请耐心等待。",
     "createBotSuccess": "Bot 创建成功。",
     "steps": {
       "basicInfo": "基本信息",
@@ -823,7 +925,7 @@
     },
     "localWorkspacePath": "本地工作区文件夹",
     "localWorkspacePathPlaceholder": "选择这台电脑上的文件夹",
-    "localWorkspaceWarning": "Local 工作区会以 server 用户权限访问宿主文件和执行命令。",
+    "localWorkspaceWarning": "Local 工作区将直接以服务器用户权限运行，具有操作宿主机文件与执行命令的完整权限。",
     "editBot": "编辑 Bot",
     "deleteConfirm": "确定要删除这个 Bot 吗？",
     "renameSuccess": "Bot 名称已更新",
@@ -840,9 +942,9 @@
     "timezoneInherited": "继承用户或系统时区",
     "timezoneInheritedHint": "留空则继承用户时区，若用户未设置则回退到系统时区。",
     "aclPreset": "安全策略",
-    "aclPresetDescription": "创建时选择一个常见 ACL 场景，后续仍可在访问控制中继续微调。",
+    "aclPresetDescription": "选择初始的访问控制预设，后续可随时调整。",
     "aclPresetHint": "建议：个人助手用“仅私聊”，群机器人用“仅群聊”或“群聊和话题”，不确定时保留“允许全部”。",
-    "aclPresetHelp": "创建时会按所选策略初始化 ACL 默认行为和预设规则，后续仍可在访问控制页面修改。",
+    "aclPresetHelp": "这会配置默认的访问规则。你可以随时在“访问控制”面板中修改。",
     "aclPresets": {
       "allowAll": {
         "title": "允许全部",
@@ -887,6 +989,22 @@
       "deleteFailed": "删除失败"
     },
     "checks": {
+      "lastSync": "上次同步",
+      "statusTitle": "健康检查",
+      "status": {
+        "issue": "需要关注",
+        "stable": "运行正常",
+        "ok": "正常",
+        "warn": "警告",
+        "error": "错误",
+        "unknown": "未知"
+      },
+      "vitalityTitle": "活跃度",
+      "vitalityUnit": "次事件",
+      "diagnosticTitle": "诊断信息",
+      "diagnosticSubtitle": "实时系统诊断指标。",
+      "expandAll": "全部展开",
+      "collapse": "收起",
       "title": "运行时检查",
       "subtitle": "查看当前健康状态与异常详情。",
       "ok": "无异常",
@@ -910,15 +1028,10 @@
         "containerTask": "容器任务",
         "containerDataPath": "容器数据路径",
         "botDelete": "Bot 删除"
-      },
-      "status": {
-        "ok": "正常",
-        "warn": "警告",
-        "error": "错误",
-        "unknown": "未知"
       }
     },
     "tabs": {
+      "overviewSubtitle": "系统健康概览与核心指标。",
       "overview": "概览",
       "general": "通用",
       "desktop": "桌面",
@@ -940,32 +1053,44 @@
       "settings": "设置"
     },
     "desktop": {
-      "runtimeTitle": "运行环境",
+      "title": "桌面环境",
+      "subtitle": "管理虚拟显示器与交互会话。",
+      "groupInfrastructure": "基础架构",
+      "groupEnvironment": "运行环境",
+      "groupApplication": "功能集成",
+      "runtimeTitle": "运行状态",
       "runtimeButton": "运行环境",
-      "liveTitle": "桌面 1",
-      "liveDescription": "主工作区桌面实时画面。",
-      "previewTitle": "其他桌面",
-      "previewDescription": "已连接的会话会以截图形式显示在这里。",
-      "previewEmpty": "等待截图",
+      "liveTitle": "主显示器",
+      "liveDescription": "工作区桌面的实时预览。",
+      "previewTitle": "活动会话",
+      "previewDescription": "其他已连接会话的实时截图。",
+      "previewEmpty": "无预览",
       "sessionsTitle": "会话",
-      "summaryDisabled": "桌面未启用",
-      "summaryReady": "桌面已就绪",
-      "summaryPreparing": "打开窗口时会准备桌面运行环境",
+      "summaryDisabled": "已禁用",
+      "summaryReady": "正在运行",
+      "summaryPreparing": "正在准备环境...",
+      "statusReady": "已就绪",
+      "statusNotReady": "未就绪",
+      "statusRunning": "正在运行",
+      "statusStopped": "已停止",
       "enabled": "已启用",
       "runtime": "运行环境",
       "vnc": "VNC",
       "desktop": "桌面",
       "browser": "浏览器",
-      "toolkit": "Toolkit",
+      "toolkit": "工具箱",
       "system": "系统",
       "session": "会话",
       "state": "状态",
       "codec": "编码",
-      "createdAt": "创建时间",
+      "createdAt": "启动时间",
       "actions": "操作",
-      "noSessions": "没有其他桌面会话",
-      "closeSession": "关闭会话",
-      "closeFailed": "关闭桌面会话失败",
+      "noSessions": "无活动会话",
+      "closeSession": "终止",
+      "closeSessionConfirm": "确认终止会话？",
+      "closeFailed": "终止会话失败",
+      "desktopEnabledSuccess": "桌面环境已开启",
+      "desktopDisabledSuccess": "桌面环境已关闭",
       "unknown": "未知"
     },
     "terminal": {
@@ -1037,32 +1162,32 @@
       "sentAt": "发送时间"
     },
     "container": {
-      "title": "容器管理",
-      "subtitle": "管理当前 Bot 对应的运行容器。",
-      "botNotReady": "当前 Bot 正在生命周期变更中，暂时不可操作容器。",
-      "empty": "当前 Bot 尚未创建容器，创建后可启用运行环境能力。",
-      "legacyWarning": "当前容器使用旧版架构，需要重建以获得完整兼容性。重建时数据会自动保留。",
-      "legacyRecreate": "重建容器",
-      "legacyRecreateSuccess": "容器重建成功",
-      "createHint": "容器会基于当前镜像创建；如你显式开启恢复，则会在创建后尝试恢复已保留的数据。",
+      "title": "容器",
+      "subtitle": "管理此 Bot 的运行环境。",
+      "botNotReady": "Bot 生命周期变更中，暂时无法操作容器。",
+      "empty": "尚未创建容器。创建后即可启用运行环境。",
+      "legacyWarning": "旧版架构。建议重建以获得完整兼容性（数据将自动保留）。",
+      "legacyRecreate": "重建",
+      "legacyRecreateSuccess": "容器已重建",
+      "createHint": "容器基于当前镜像创建。开启恢复可自动找回保留数据。",
       "createRestoreDataLabel": "创建后恢复已保留数据",
-      "createRestoreDataDescription": "如果存在之前导出的备份或旧版 bind mount 数据，将在容器创建后恢复到 `/data`。",
+      "createRestoreDataDescription": "导出的备份或旧版数据将在创建后自动恢复至 /data。",
       "createImageLabel": "基础镜像",
-      "createImageDescription": "作为容器基础环境的 Docker 镜像（如 debian:bookworm-slim、alpine:latest、ubuntu:24.04）。留空则使用默认镜像。",
+      "createImageDescription": "作为基础环境的 Docker 镜像（如 debian:bookworm-slim）。留空使用默认镜像。",
       "createAdvancedTitle": "高级选项",
-      "createAdvancedDescription": "配置该容器的可选 GPU 访问能力与原始 CDI 设备映射。",
+      "createAdvancedDescription": "配置 GPU 访问能力与 CDI 设备映射。",
       "createGpuLabel": "启用 GPU",
-      "createGpuDescription": "为新容器开启宿主机 GPU 访问。",
+      "createGpuDescription": "允许容器使用宿主机的 GPU。",
       "createGpuDevicesLabel": "CDI 设备",
-      "createGpuDevicesDescription": "每行或用逗号填写一个 CDI 设备名，例如 `nvidia.com/gpu=0` 或 `amd.com/gpu=0`。关闭 GPU 后会显式清空已保存的 GPU 偏好。",
+      "createGpuDevicesDescription": "每行或用逗号填写一个 CDI 设备名。关闭 GPU 后将清空已保存的偏好。",
       "createGpuDevicesPlaceholder": "nvidia.com/gpu=0\namd.com/gpu=0",
       "gpuDevicesRequired": "已启用 GPU 时，至少需要填写一个 CDI 设备名。",
       "cdiDevicesEmpty": "未附加 GPU",
-      "gpuRecreateHint": "GPU 配置变更需要重建容器后才会生效，单纯启动或停止不会更新当前已附加的设备。",
-      "deleteConfirm": "确定要彻底删除这个容器吗？未保留的数据将无法恢复。",
-      "deletePreserveConfirm": "确定要先导出 `/data` 再删除这个容器吗？",
-      "restoreConfirm": "确定要将已保留的数据恢复到当前容器的 `/data` 吗？",
-      "rollbackConfirm": "确定要回滚到这个快照版本吗？",
+      "gpuRecreateHint": "GPU 配置变更需要重建容器后生效，单纯启动或停止不会更新设备。",
+      "deleteConfirm": "确定要彻底删除此容器吗？未保留的数据将无法恢复。",
+      "deletePreserveConfirm": "确定要先导出 `/data` 再删除此容器吗？",
+      "restoreConfirm": "确定要将已保留的数据恢复到 `/data` 吗？",
+      "rollbackConfirm": "确定要回滚到此快照版本吗？",
       "taskRunning": "运行中",
       "taskStopped": "已停止",
       "taskCompleted": "已完成",
@@ -1074,7 +1199,7 @@
       "loadFailed": "加载容器信息失败",
       "actionFailed": "容器操作失败",
       "createSuccess": "容器创建成功",
-      "createRestoreSuccess": "容器创建成功，已恢复数据",
+      "createRestoreSuccess": "容器创建成功，数据已恢复",
       "startSuccess": "容器启动成功",
       "stopSuccess": "容器停止成功",
       "deleteSuccess": "容器删除成功",
@@ -1082,24 +1207,27 @@
       "snapshotSuccess": "快照创建成功",
       "exportSuccess": "数据导出成功",
       "importSuccess": "数据导入成功",
-      "restoreSuccess": "已恢复保留数据",
+      "restoreSuccess": "数据恢复成功",
       "rollbackSuccess": "快照回滚成功",
       "pullingImage": "正在拉取镜像...",
       "creatingContainer": "正在创建容器...",
-      "preservingData": "正在备份数据，数据量较大时可能需要一段时间...",
-      "restoringData": "正在迁移数据，数据量较大时可能需要一段时间...",
+      "preservingData": "正在备份数据...",
+      "restoringData": "正在迁移数据...",
+      "lifecycleTitle": "生命周期",
+      "snapshotTitle": "快照管理",
+      "snapshotSubtitle": "保存或回滚容器运行状态。",
       "snapshotEmpty": "暂无快照",
       "snapshotLoadFailed": "加载快照失败",
-      "snapshotNamePlaceholder": "快照显示名称（可选）",
-      "snapshotNameHint": "这里只填写用户可见的显示名称，系统会自动生成内部快照名。",
+      "snapshotNamePlaceholder": "显示名称（可选）",
+      "snapshotNameHint": "用户可见的显示名称，系统将自动生成内部快照名。",
       "metricsTitle": "资源状态",
-      "metricsSubtitle": "查看当前容器的 CPU、内存与整个容器文件系统的存储使用情况。",
-      "metricsLoadFailed": "加载容器资源状态失败",
-      "metricsUnsupported": "当前容器后端暂不支持资源监控。",
-      "metricsUnavailable": "当前暂无可用的资源指标。",
-      "metricsStopped": "容器任务未运行，CPU 和内存指标暂不可用；如有存储信息仍会继续显示。",
+      "metricsSubtitle": "CPU、内存及存储使用情况。",
+      "metricsLoadFailed": "加载资源状态失败",
+      "metricsUnsupported": "当前后端不支持资源监控。",
+      "metricsUnavailable": "暂无可用指标。",
+      "metricsStopped": "容器未运行，仅显示存储使用情况。",
       "metricsPath": "统计范围",
-      "metricsUnlimited": "未配置内存限制",
+      "metricsUnlimited": "未配置限额",
       "currentSample": "当前采样",
       "sampledAt": "采样时间",
       "metricsLabels": {
@@ -1108,24 +1236,25 @@
         "storage": "存储"
       },
       "dataTitle": "数据操作",
-      "dataSubtitle": "独立管理容器 `/data` 目录的导入、导出与恢复。",
+      "dataSubtitle": "管理 `/data` 目录的导入、导出与恢复。",
       "deleteTitle": "删除容器",
-      "deleteSubtitle": "删除容器前请明确选择是否先保留 `/data`，避免误删用户数据。",
-      "preservedDataAvailable": "检测到可恢复的已保留数据，可直接恢复到当前容器。",
+      "deleteSubtitle": "请确认是否在删除前备份 /data。",
+      "deleteZoneDesc": "删除容器操作不可撤销，请谨慎操作。",
+      "preservedDataAvailable": "检测到可恢复的已保留数据。",
       "preservedDataAvailableShort": "可恢复",
       "preservedDataEmpty": "无",
       "sourceManual": "手动创建",
       "sourcePreExec": "执行前自动创建",
       "sourceRollback": "回滚生成",
       "fields": {
-        "id": "容器 ID",
-        "status": "容器状态",
-        "task": "任务状态",
+        "id": "ID",
+        "status": "状态",
+        "task": "任务",
         "namespace": "命名空间",
         "image": "镜像",
         "cdiDevices": "CDI 设备",
         "hostPath": "主机路径",
-        "containerPath": "容器路径",
+        "containerPath": "路径",
         "preservedData": "保留数据",
         "createdAt": "创建时间",
         "updatedAt": "更新时间"
@@ -1139,22 +1268,36 @@
         "actions": "操作"
       },
       "actions": {
-        "create": "创建容器",
+        "create": "创建",
         "start": "启动",
         "stop": "停止",
-        "delete": "彻底删除",
-        "deletePreserve": "保留数据后删除",
-        "snapshot": "创建快照",
-        "exportData": "导出数据",
-        "importData": "导入数据",
-        "restoreData": "恢复保留数据",
+        "delete": "删除",
+        "deletePreserve": "保留并删除",
+        "snapshot": "创建",
+        "exportData": "导出",
+        "importData": "导入",
+        "restoreData": "恢复",
         "rollback": "回滚"
       }
     },
     "settings": {
+      "blocks": {
+        "context": "上下文与记忆",
+        "contextDescription": "配置该 Bot 记忆和处理信息的方式。",
+        "global": "全局设置",
+        "globalDescription": "Bot 的核心偏好配置。",
+        "interaction": "交互方式",
+        "interactionDescription": "配置 Bot 在对话中的行为习惯。",
+        "multimedia": "多媒体",
+        "multimediaDescription": "配置语音与图片生成等相关模型。"
+      },
+      "hideMemoryDetails": "隐藏详情",
+      "showMemoryDetails": "查看详情",
+      "chatLanguage": "语言",
+      "chatLanguagePlaceholder": "例如：English、zh-CN",
       "chatModel": "对话模型",
       "titleModel": "标题模型",
-      "titleModelDescription": "选择一个小模型来自动生成会话标题。留空则禁用自动标题生成。",
+      "titleModelDescription": "选择用于自动生成会话标题的小模型。留空表示禁用该功能。",
       "titleModelPlaceholder": "未启用（不自动生成标题）",
       "searchProvider": "搜索提供方",
       "searchProviderPlaceholder": "选择搜索提供方",
@@ -1162,12 +1305,12 @@
       "memoryProviderPlaceholder": "选择记忆提供方（为空则禁用）",
       "memoryModePreview": "当前内置模式：{mode}",
       "sparseStatusTitle": "稀疏检索状态",
-      "sparseStatusHint": "Markdown 文件是唯一可信源；手动同步会把 /data/memory 下的条目重新写入 Qdrant。",
+      "sparseStatusHint": "Markdown 文件是唯一可信源；手动同步将根据 /data/memory 重新构建 Qdrant 索引。",
       "denseStatusTitle": "稠密检索状态",
-      "denseStatusHint": "Markdown 文件是唯一可信源；手动同步会把 /data/memory 下的条目重新写入稠密 Qdrant 索引。",
+      "denseStatusHint": "Markdown 文件是唯一可信源；手动同步将根据 /data/memory 重建稠密 Qdrant 索引。",
       "mem0StatusTitle": "Mem0 同步状态",
-      "mem0StatusHint": "Markdown 文件是唯一可信源；手动同步会把 /data/memory 下托管的记忆条目重新同步到 Mem0。",
-      "indexedMemoryStatusPendingSave": "请先保存当前记忆提供方选择，再查看索引状态或执行同步。",
+      "mem0StatusHint": "Markdown 文件是唯一可信源；手动同步将把 /data/memory 中的条目重新同步至 Mem0。",
+      "indexedMemoryStatusPendingSave": "请在查看索引状态或执行同步前，先保存所选的记忆提供方。",
       "memorySyncAction": "手动同步",
       "memorySyncSuccess": "同步完成：源条目 {fsCount} 条，修复 {restoredCount} 条，索引现有 {storageCount} 条。",
       "memorySyncFailed": "手动同步失败",
@@ -1196,41 +1339,44 @@
       "reasoningEffortLow": "低",
       "reasoningEffortMedium": "中",
       "reasoningEffortHigh": "高",
-      "reasoningEffortXHigh": "超高",
+      "reasoningEffortXHigh": "极高",
       "heartbeatEnabled": "启用心跳",
-      "heartbeatDescription": "定期触发 Agent 检查是否有需要关注的事项",
+      "heartbeatDescription": "定期唤醒 Agent，检查是否有需要处理的事务。",
       "heartbeatInterval": "心跳间隔（分钟）",
       "heartbeatModel": "心跳模型",
       "heartbeatModelDescription": "选择心跳检查使用的模型，未设置时默认使用聊天模型。",
       "heartbeatModelPlaceholder": "使用聊天模型（默认）",
       "compactionEnabled": "启用上下文压缩",
-      "compactionDescription": "上下文过大时自动摘要旧消息以节省 token",
+      "compactionDescription": "当对话上下文过长时，自动对旧消息进行摘要以节省 Token。",
       "compactionThreshold": "压缩阈值（输入 token 数）",
       "compactionRatio": "压缩比例（%）",
-      "compactionRatioDescription": "压缩较旧消息的百分比，剩余的最近消息保持原始完整度。",
+      "compactionRatioDescription": "指定需要压缩的旧消息比例，最近的消息将保持原样。",
       "compactionModel": "压缩模型",
       "compactionModelDescription": "选择用于摘要的模型，未设置时默认使用聊天模型。",
       "compactionModelPlaceholder": "使用聊天模型（默认）",
       "showToolCallsInIM": "在 IM 中显示工具调用",
-      "showToolCallsInIMDescription": "在 IM 频道中以单条消息持续展示工具执行的状态（进行中 / 已完成 / 失败）。默认关闭。",
+      "showToolCallsInIMDescription": "在聊天中以单条消息实时更新工具的执行状态。默认关闭。",
       "displayEnabled": "启用工作区显示器",
-      "displayEnabledDescription": "在容器启动时启动 Xvnc，保存后需重启工作区容器才会生效。",
+      "displayEnabledDescription": "随容器启动 Xvnc 服务。保存并重启容器后生效。",
       "desktopEnabled": "桌面",
-      "desktopEnabledDescription": "启用工作区 VNC 桌面。缺少运行环境时，Memoh 会在打开桌面时自动准备 Debian/Ubuntu 或 Alpine 工作区。",
+      "desktopEnabledDescription": "启用 VNC 桌面。若缺少环境，Memoh 会在打开时自动配置 Debian/Ubuntu 或 Alpine 工作区。",
       "toolApproval": "工具调用审核",
-      "toolApprovalDescription": "对 write、edit、exec 等敏感工具启用人工审核，可配置可跳过审核的路径或命令。",
+      "toolApprovalDescription": "拦截并人工审核 write、edit、exec 等敏感工具的调用。你可以配置免审核的白名单路径或命令。",
       "toolApprovalBypass": "跳过审核",
       "toolApprovalMustReview": "必须审核",
+      "botStatusTitle": "Bot 运行状态",
+      "botStatusSubtitle": "当前工作区容器与基础网络环境信息。",
       "networkPageTitle": "网络",
-      "networkPageSubtitle": "工作区网络状态与 SD-WAN 相关设置。",
-      "networkStatusEmpty": "暂无可用状态字段。",
+      "networkPageSubtitle": "查看网络状态并配置 SD-WAN。",
+      "networkStatusEmpty": "暂无可用状态。",
       "networkSDWANSectionTitle": "SD-WAN",
-      "networkSDWANSectionHint": "虚拟专网与出站能力。",
+      "networkSDWANSectionHint": "配置虚拟网络与出站流量。",
       "overlayProviderFieldLabel": "接入方式",
-      "overlayProviderPlaceholder": "选择方案（关闭开关可不使用 SD-WAN）",
+      "overlayProviderPlaceholder": "选择接入方案",
       "overlayProviderRequired": "启用前请先选择接入方式。",
+      "overlayPrimaryConfigTitle": "主要配置",
       "networkStatusPendingSaveTitle": "待保存",
-      "networkStatusPendingSave": "网络配置已变更，保存后才能看到当前状态。",
+      "networkStatusPendingSave": "配置已更改，保存后同步状态。",
       "networkWorkspaceStateLabel": "状态",
       "networkWorkspaceContainerID": "容器 ID",
       "networkWorkspaceTaskStatus": "任务状态",
@@ -1239,48 +1385,50 @@
       "networkWorkspaceMessage": "说明",
       "networkWorkspaceState": {
         "workspace_missing": "尚未创建工作区容器",
-        "runtime_unavailable": "无法查询容器任务（运行时未就绪）",
-        "task_stopped": "工作区未运行或任务未启动",
-        "network_target_ready": "工作区运行中，网络目标可用",
+        "runtime_unavailable": "运行时未就绪",
+        "task_stopped": "工作区未启动",
+        "network_target_ready": "工作区已运行，网络就绪",
         "unknown": "未知"
       },
-      "networkActionFailed": "网络检测失败",
+      "networkActionFailed": "检测失败",
       "networkStatusState": "状态",
       "networkStatusIP": "Tailnet IP",
       "networkStatusProxy": "代理地址",
       "networkStatusPID": "进程 PID",
       "networkStatusDNSName": "DNS 名称",
-      "networkStatusBackendState": "Tailscale 后端状态",
+      "networkStatusBackendState": "后端状态",
       "networkStatusHealth": "健康信息",
       "networkStatusSocket": "LocalAPI Socket",
       "networkStatusExitNode": "Exit Node",
-      "networkNeedsLoginDescription": "需要身份认证。点击下方链接登录到 SD-WAN 提供商。",
-      "networkOpenLoginPage": "打开登录页面",
-      "networkNeedsLoginHint": "在浏览器中完成登录后，返回此页面刷新状态。",
+      "networkNeedsLoginDescription": "需要认证，请登录服务商授权。",
+      "networkOpenLoginPage": "前往登录",
+      "networkNeedsLoginHint": "登录完成后，返回此页刷新状态。",
       "networkLogout": "退出登录",
-      "networkLogoutSuccess": "已成功退出登录。",
-      "networkLogoutFailed": "退出登录失败。",
+      "networkLogoutSuccess": "已退出登录。",
+      "networkLogoutFailed": "退出失败。",
       "networkExitNode": "Exit Node",
-      "networkExitNodeSectionHint": "通过 Tailscale Exit Node 路由所有出站流量，实现透明代理。",
+      "networkExitNodeSectionHint": "将出站流量路由至出口节点实现代理。",
       "networkExitNodePlaceholder": "选择 Exit Node",
-      "networkExitNodeDescription": "从当前接入方式返回的候选节点中选择一个出口节点。",
+      "networkExitNodeDescription": "从候选列表中选择出口节点。",
       "networkExitNodeStatus": "节点状态",
       "networkExitNodeAddresses": "节点地址",
       "networkExitNodeOnline": "在线",
       "networkExitNodeOffline": "离线",
-      "networkExitNodeRequired": "透明出站必须选择一个 Exit Node。",
-      "networkNodesPendingSave": "请先保存当前网络配置，再刷新节点列表。",
-      "networkNodesEmpty": "当前没有可用的 Exit Node。请确认 Bot 工作区已运行且网络已连通。",
-      "networkNodesRefreshFailed": "刷新 Exit Node 列表失败",
+      "networkExitNodeRequired": "必须选择一个 Exit Node。",
+      "networkNodesPendingSave": "刷新前请先保存网络配置。",
+      "networkNodesEmpty": "暂无可用节点。请确保网络已连通。",
+      "networkNodesRefreshFailed": "刷新节点列表失败",
       "allowGuest": "ACL 默认行为",
-      "allowGuestPersonalHint": "ACL 规则适用于所有类型的 Bot。",
+      "allowGuestPersonalHint": "ACL 规则将应用于所有类型的 Bot。",
       "loopDetectionTitle": "自动检测并阻止模型循环输出",
       "searchModel": "搜索模型…",
       "noModel": "暂无可选模型",
       "saveSuccess": "设置已保存",
+      "saveOnly": "保存但不启用",
+      "saveAndEnable": "保存并启用",
       "save": "保存设置",
       "dangerZone": "危险操作",
-      "deleteBotDescription": "删除此 Bot 后无法恢复，请谨慎操作。",
+      "deleteBotDescription": "此操作不可逆。删除后 Bot 将无法恢复。",
       "deleteBot": "删除 Bot"
     },
     "access": {
@@ -1292,25 +1440,25 @@
       "modeDescription": "选择默认放行还是默认拦截。名单里的规则会覆盖默认模式。",
       "defaultEffectSaved": "访问模式已更新",
       "blacklistMode": "黑名单模式",
-      "blacklistModeDescription": "默认允许所有消息触发 Bot，只拒绝黑名单中的对象。",
-      "blacklistModeHint": "当前默认允许；新增条目会加入黑名单。",
+      "blacklistModeDescription": "只要没在名单里，谁都能用。",
+      "blacklistModeHint": "默认为允许。新条目将加入黑名单。",
       "whitelistMode": "白名单模式",
-      "whitelistModeDescription": "默认拒绝所有消息触发 Bot，只允许白名单中的对象。",
-      "whitelistModeHint": "当前默认拒绝；新增条目会加入白名单。",
+      "whitelistModeDescription": "只有名单上的人能通过。",
+      "whitelistModeHint": "默认为拒绝。新条目将加入白名单。",
       "blacklistTitle": "黑名单",
-      "blacklistDescription": "名单中的对象会被拒绝。",
+      "blacklistDescription": "这个名单里的人都会被拦住。",
       "whitelistTitle": "白名单",
-      "whitelistDescription": "只有名单中的对象会被允许。",
+      "whitelistDescription": "只有这个名单里的人才会被允许。",
       "addBlacklistEntry": "添加黑名单条目",
       "addWhitelistEntry": "添加白名单条目",
       "blacklistEmpty": "黑名单为空",
-      "blacklistEmptyDescription": "当前没有额外拒绝项，所有未被其他规则命中的消息都会被允许。",
+      "blacklistEmptyDescription": "目前没设任何拦截规则。没被选中的人都能正常通过。",
       "whitelistEmpty": "白名单为空",
-      "whitelistEmptyDescription": "当前没有放行项，所有未被其他规则命中的消息都会被拒绝。",
-      "blacklistPreview": "将 {target} 加入黑名单。",
-      "whitelistPreview": "将 {target} 加入白名单。",
-      "platformQuestion": "这条名单适用于哪个平台？",
-      "userQuestion": "这条名单适用于哪个用户？",
+      "whitelistEmptyDescription": "还没添加放行的人。没在这份名单里的都会被拦截。",
+      "blacklistPreview": "把 {target} 加进黑名单。",
+      "whitelistPreview": "把 {target} 加进白名单。",
+      "platformQuestion": "这条规则在哪用？",
+      "userQuestion": "这条规则针对谁？",
       "allPlatforms": "所有平台",
       "allUsers": "所有用户",
       "searchPlatform": "搜索平台",
@@ -1361,17 +1509,17 @@
       "deleteFailed": "删除规则失败",
       "anyConversationScope": "任何聊天范围",
       "chatScope": "聊天范围",
-      "chatScopeDescription": "选择这条名单规则适用于哪些聊天场景。",
+      "chatScopeDescription": "选一下这条规则在哪些场景生效。",
       "chatScopeAny": "所有聊天",
-      "specificConversationTitle": "只限制某个具体聊天",
-      "specificConversationDescription": "一般不需要设置。只有想让这条名单只在某个群、私聊或话题里生效时再选择。",
-      "sourceChannel": "来源平台",
+      "specificConversationTitle": "只针对某个具体聊天",
+      "specificConversationDescription": "大多数情况下不需要。除非你只想针对某一个特定的群、私聊或话题。",
+      "sourceChannel": "平台",
       "anyChannel": "任意平台",
-      "conversationType": "会话类型",
-      "anyConversationType": "任意会话类型",
-      "privateConversationType": "仅私聊",
-      "groupConversationType": "仅群聊",
-      "threadConversationType": "仅话题",
+      "conversationType": "类型",
+      "anyConversationType": "任意类型",
+      "privateConversationType": "只管私聊",
+      "groupConversationType": "只管群聊",
+      "threadConversationType": "只管话题",
       "allowPrivateConversation": "允许私聊",
       "allowGroupConversation": "允许群聊",
       "allowThreadConversation": "允许话题",
@@ -1381,22 +1529,22 @@
       "privateConversationGroup": "私聊",
       "groupConversationGroup": "群聊",
       "threadConversationGroup": "话题",
-      "unknownConversationGroup": "其他会话",
+      "unknownConversationGroup": "其他",
       "conversationSource": "会话",
-      "existingConversation": "已有会话",
-      "selectConversationSource": "搜索或选择会话",
-      "searchConversationSource": "搜索会话",
-      "noObservedConversations": "暂无符合的历史会话。可手动填写 ID，或确认该 Bot 在对应会话中已有消息（含私聊）。",
-      "manualConversationIds": "找不到会话？手动填写 ID",
-      "manualConversationIdsHint": "仅在历史会话列表没有目标时使用。请从平台复制原始会话 ID、话题 ID。",
-      "pickTargetForConversationSearch": "请选择一个平台或用户后，再从已有会话中选择。",
-      "pickIdentityForConversationSearch": "请先在上方选择用户，才能按历史记录搜索会话。",
-      "pickChannelTypeForConversationSearch": "请先在上方选择平台，才能按该平台上的历史会话搜索。",
+      "existingConversation": "已知会话",
+      "selectConversationSource": "找个会话",
+      "searchConversationSource": "搜搜看",
+      "noObservedConversations": "还没在历史记录里找到匹配的聊天。你可以手动填下 ID，或者等 Bot 在那个频道里露个脸。",
+      "manualConversationIds": "找不到？手动填 ID",
+      "manualConversationIdsHint": "只有找不到聊天记录时才用这个。你需要从聊天平台里手动复制会话或话题 ID。",
+      "pickTargetForConversationSearch": "先选下平台或用户，然后再搜相关的会话。",
+      "pickIdentityForConversationSearch": "先选个用户，才能搜他的聊天历史。",
+      "pickChannelTypeForConversationSearch": "先选个平台，才能搜这个平台上的聊天历史。",
       "conversationId": "会话 ID",
-      "conversationIdPlaceholder": "输入会话 ID",
+      "conversationIdPlaceholder": "输入 ID",
       "threadId": "话题 ID",
       "threadIdPlaceholder": "输入话题 ID",
-      "clearSpecificConversation": "清空指定会话",
+      "clearSpecificConversation": "清空选择",
       "lastObserved": "最近出现"
     },
     "channels": {
@@ -1423,12 +1571,12 @@
       "deleteSuccess": "平台已移除",
       "deleteFailed": "移除平台失败",
       "webhookCallback": "WebHook 回调地址",
-      "webhookCallbackHint": "将该地址配置到对应平台控制台的 Webhook 回调 URL。",
-      "webhookCallbackPending": "保存平台配置后会生成回调地址。",
+      "webhookCallbackHint": "请将此地址填入对应平台控制台的 Webhook 配置中。",
+      "webhookCallbackPending": "保存当前配置后即可生成回调地址。",
       "showSecretField": "显示{field}",
       "hideSecretField": "隐藏{field}",
-      "feishuWebhookSecurityHint": "出于安全考虑，Webhook 模式必须配置 Encrypt Key 或 Verification Token 之一；未受保护的回调地址不应直接暴露在公网上。",
-      "feishuWebhookSecretRequired": "出于安全考虑，请至少配置 Encrypt Key 或 Verification Token 之一。",
+      "feishuWebhookSecurityHint": "为了安全，使用 Webhook 模式时必须配置 Encrypt Key 或 Verification Token；不要将未受保护的回调地址直接暴露。",
+      "feishuWebhookSecretRequired": "为了安全，请至少配置 Encrypt Key 或 Verification Token 其中的一项。",
       "noAvailableTypes": "所有平台类型均已配置",
       "platformKey": "平台标识：{key}",
       "weixinQr": {
@@ -1460,20 +1608,22 @@
       }
     },
     "memory": {
+      "unsavedChanges": "有未保存的更改",
+      "emptyHistory": "暂无对话历史。",
       "title": "所忆皆在此间",
       "files": "记忆文件",
       "empty": "暂无记忆条目",
       "searchPlaceholder": "搜索记忆...",
       "newMemory": "新建记忆",
       "compact": "压缩记忆",
-      "compactConfirm": "确定要压缩记忆吗？这会通过 AI 合并相似内容，可能会减少记忆条目数量。",
+      "compactConfirm": "确定要压缩记忆吗？系统将利用 AI 合并相似内容，这会减少记忆条目的总数。",
       "compactRatio": "压缩率",
       "compactRatioLight": "轻度 (0.8)",
       "compactRatioMedium": "中度 (0.5)",
       "compactRatioAggressive": "重度 (0.3)",
-      "compactRatioLightDesc": "保留大部分细节，主要是去重。",
-      "compactRatioMediumDesc": "合并相似事实，平衡压缩。",
-      "compactRatioAggressiveDesc": "深度整合，仅保留核心事实。",
+      "compactRatioLightDesc": "保留绝大部分细节，主要进行去重处理。",
+      "compactRatioMediumDesc": "合并相似的事实，在细节与容量间保持平衡。",
+      "compactRatioAggressiveDesc": "深度压缩，剔除冗余并仅保留核心事实。",
       "compactDecayDate": "以此日期之前的记忆会被优先压缩",
       "compactSuccess": "记忆压缩成功",
       "compactFailed": "记忆压缩失败",
@@ -1486,15 +1636,15 @@
     "skills": {
       "title": "技能",
       "discoveryTitle": "技能路径",
-      "discoveryDescription": "管理这个 Bot 的托管技能保存位置，以及会扫描哪些外部技能路径。",
+      "discoveryDescription": "配置该 Bot 的托管技能存放位置，并指定需要扫描的外部技能路径。",
       "managedPathLabel": "托管路径",
-      "managedPathDescription": "Memoh 托管技能会保存在这里。",
-      "managedPathHint": "“复制到托管路径”会把外部技能复制到这里。托管副本会优先生效。",
+      "managedPathDescription": "所有由 Memoh 托管的技能文件都将存放在此。",
+      "managedPathHint": "“复制到托管路径”可将外部技能复制至此，执行时托管副本具有最高优先级。",
       "discoveryPathsLabel": "外部技能路径",
-      "discoveryPathsDescription": "Memoh 会扫描这些绝对路径中的兼容外部技能。每行填写一个路径。",
+      "discoveryPathsDescription": "Memoh 会自动扫描这些绝对路径下的可用外部技能。每行一个。",
       "discoveryPathPlaceholder": "/root/.agents/skills",
       "discoveryAddPath": "添加路径",
-      "discoveryEmpty": "当前没有外部技能路径，仅会扫描托管技能和旧版技能。",
+      "discoveryEmpty": "目前未配置外部技能路径。仅扫描托管与旧版的内置技能。",
       "discoveryDefaultHint": "默认外部路径：{paths}",
       "discoveryReset": "重置",
       "discoverySummaryDefault": "默认",
@@ -1502,13 +1652,13 @@
       "discoverySummaryUnsaved": "有未保存修改",
       "discoveryPathRequired": "路径不能为空",
       "discoveryPathAbsolute": "路径必须是绝对路径",
-      "discoveryPathReserved": "这个路径已被 Memoh 托管技能或旧版技能占用",
+      "discoveryPathReserved": "此路径已被 Memoh 托管技能或旧版技能使用。",
       "discoveryPathDuplicate": "路径重复",
       "discoverySaveSuccess": "技能路径已保存",
       "discoverySaveFailed": "保存技能路径失败",
       "addSkill": "新建技能",
-      "emptyTitle": "暂无技能",
-      "emptyDescription": "点击上方按钮创建新技能",
+      "emptyTitle": "技能库为空",
+      "emptyDescription": "请创建新的托管技能，或配置外部扫描路径以引入现有技能。",
       "managedBadge": "托管",
       "discoveredBadge": "外部",
       "effectiveBadge": "生效中",
@@ -1520,8 +1670,8 @@
       "descriptionPlaceholder": "输入技能描述",
       "content": "内容",
       "contentPlaceholder": "输入技能内容/提示词",
-      "deleteConfirm": "确定要删除这个技能吗？",
-      "overrideTitle": "编辑后将创建托管副本",
+      "deleteConfirm": "是否永久删除此托管技能？",
+      "overrideTitle": "编辑此技能将自动创建一份托管副本。",
       "adoptAction": "复制到托管路径",
       "adoptBlocked": "已有托管副本",
       "disableAction": "禁用这个技能来源",
@@ -1532,12 +1682,13 @@
       "disableFailed": "禁用技能失败",
       "enableSuccess": "技能已启用",
       "enableFailed": "启用技能失败",
-      "shadowedBy": "被以下来源覆盖：",
+      "shadowedBy": "被以下规则覆盖：",
       "deleteSuccess": "技能已删除",
       "deleteFailed": "删除技能失败",
       "saveSuccess": "技能已保存",
       "saveFailed": "保存技能失败",
-      "loadFailed": "加载技能失败"
+      "loadFailed": "加载技能失败",
+      "intro": "管理此机器人的专属技能。本地托管副本具有最高优先级。"
     },
     "compaction": {
       "title": "压缩记录",
@@ -1573,58 +1724,65 @@
       "statusAlert": "告警",
       "statusError": "错误",
       "filterAll": "全部",
-      "noResult": "—"
+      "noResult": "—",
+      "description": "心跳机制允许机器人定期扫描需要关注的项目，确保即使在没有直接对话的情况下也能处理任务。",
+      "filterEmpty": "没有匹配当前状态筛选条件的日志。"
     },
     "schedule": {
       "title": "定时任务",
-      "loadFailed": "加载定时任务失败",
+      "subtitle": "配置自动化指令。通过可视化工具或 Cron 表达式控制执行周期。",
+      "loadFailed": "加载失败",
       "empty": "暂无定时任务",
       "name": "名称",
       "pattern": "表达式",
       "enabled": "启用",
-      "calls": "调用次数",
+      "calls": "调用",
       "createdAt": "创建时间",
       "updatedAt": "更新时间",
       "statusEnabled": "已启用",
       "statusDisabled": "已禁用",
-      "unlimited": "无限制",
+      "unlimited": "不限",
       "actions": "操作",
       "create": "新建任务",
-      "edit": "编辑",
+      "edit": "编辑任务",
       "delete": "删除",
-      "deleteConfirm": "确定删除任务 \"{name}\" 吗？此操作无法撤销。",
-      "deleteSuccess": "已删除",
+      "deleteConfirm": "确定删除任务 \"{name}\"？此操作不可撤销。",
+      "deleteSuccess": "任务已删除",
       "deleteFailed": "删除失败",
-      "saveSuccess": "已保存",
+      "saveSuccess": "任务已保存",
       "saveFailed": "保存失败",
+      "dangerZoneDesc": "任务删除后无法恢复，请谨慎操作。",
       "form": {
-        "name": "名称",
-        "namePlaceholder": "例如：每日早报",
-        "description": "描述",
-        "descriptionPlaceholder": "这个任务做什么",
-        "command": "指令",
-        "commandPlaceholder": "每次触发时让 Bot 做什么",
-        "commandHint": "任务触发时，这段内容会作为消息发送给 Bot。",
+        "name": "任务名称",
+        "namePlaceholder": "例如：每日日报",
+        "description": "任务描述",
+        "descriptionPlaceholder": "简述任务用途",
+        "command": "自动化指令",
+        "commandPlaceholder": "触发时执行的指令",
+        "commandHint": "触发时，此指令将作为消息发送给 Bot 执行。",
         "pattern": "调度规则",
-        "mode": "模式",
-        "everyMinutes": "每 N 分钟 (1-59)",
-        "atMinute": "每小时的第 M 分钟 (0-59)",
+        "mode": "调度模式",
+        "everyMinutes": "每 N 分钟",
+        "atMinute": "指定分钟",
         "hour": "小时",
         "hours": "小时",
-        "hoursHint": "点击选择一个或多个小时。",
+        "hoursHint": "选择触发的小时。",
         "minute": "分钟",
         "weekdays": "星期",
-        "monthDays": "每月日期",
+        "monthDays": "日期",
         "month": "月份",
         "monthDay": "日期",
         "maxCalls": "运行次数限制",
-        "maxCallsUnlimited": "不限制",
-        "enabled": "启用",
-        "patternPreview": "Cron 表达式",
-        "nextRuns": "接下来的触发时间（{tz}）",
+        "maxCallsUnlimited": "不限次数",
+        "enabled": "启用任务",
+        "visualBuilder": "可视化配置",
+        "cronCode": "Cron 表达式",
+        "manualEditHint": "手动编辑将同步至可视化配置。",
+        "patternPreview": "预览表达式",
+        "nextRuns": "下次触发 ({tz})",
         "invalidPattern": "表达式无效",
         "advancedPattern": "Cron 表达式",
-        "advancedHint": "标准 cron 格式：分 时 日 月 星期。也支持 @daily 等描述符。"
+        "advancedHint": "支持标准 Cron 格式及 @daily 等描述符。"
       },
       "mode": {
         "minutes": "每 N 分钟",
diff --git a/apps/web/src/layout/main-layout/index.vue b/apps/web/src/layout/main-layout/index.vue
index f2ebe3c59..2cb36a9e1 100644
--- a/apps/web/src/layout/main-layout/index.vue
+++ b/apps/web/src/layout/main-layout/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="flex h-dvh overflow-hidden">
+  <section class="flex w-full h-dvh overflow-hidden">
     <sidebar-provider
       v-model:open="isOpen"
       class="min-h-0 h-full"
diff --git a/apps/web/src/pages/about/index.vue b/apps/web/src/pages/about/index.vue
index e7af62e14..7ba886b85 100644
--- a/apps/web/src/pages/about/index.vue
+++ b/apps/web/src/pages/about/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="max-w-7xl mx-auto p-4 pb-12">
+  <section class="max-w-7xl mx-auto px-4 pt-2 pb-10 md:px-6 md:pt-4 md:pb-12">
     <div class="max-w-3xl mx-auto space-y-6">
       <!-- Header: Logo + Version + Check Button -->
       <div class="flex items-center gap-3">
diff --git a/apps/web/src/pages/appearance/index.vue b/apps/web/src/pages/appearance/index.vue
index b42d5fc22..8f8c3b36b 100644
--- a/apps/web/src/pages/appearance/index.vue
+++ b/apps/web/src/pages/appearance/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="max-w-7xl mx-auto p-4 pb-12">
+  <section class="max-w-7xl mx-auto px-4 pt-2 pb-10 md:px-6 md:pt-4 md:pb-12">
     <div class="max-w-3xl mx-auto space-y-6">
       <div>
         <h1 class="text-lg font-semibold">
diff --git a/apps/web/src/pages/bots/components/bot-access.vue b/apps/web/src/pages/bots/components/bot-access.vue
index 7c20d3fef..7a8610604 100644
--- a/apps/web/src/pages/bots/components/bot-access.vue
+++ b/apps/web/src/pages/bots/components/bot-access.vue
@@ -1,103 +1,121 @@
 <template>
-  <SettingsShell
-    width="wide"
-    class="flex flex-col gap-6"
-  >
-    <header class="flex items-start justify-between gap-6">
+  <div class="max-w-2xl mx-auto pb-6 space-y-5">
+    <!-- Sovereign Header -->
+    <header class="pb-4 border-b border-border/50 sticky top-0 bg-background/95 backdrop-blur z-30 pt-4 -mt-4 flex items-center justify-between">
       <div class="space-y-1">
-        <h2 class="text-base font-medium">
+        <h2 class="text-sm font-semibold text-foreground">
           {{ $t('bots.access.title') }}
         </h2>
-        <p class="max-w-2xl text-xs leading-relaxed text-muted-foreground">
+        <p class="text-[11px] leading-snug text-muted-foreground max-w-md">
           {{ $t('bots.access.subtitle') }}
         </p>
       </div>
-    </header>
 
-    <Separator />
+      <div class="flex items-center gap-2">
+        <Button
+          v-if="!formVisible"
+          size="sm"
+          class="h-8 text-[11px] font-medium px-3 shadow-none"
+          @click="openAddDialog"
+        >
+          <Plus class="mr-1.5 size-3.5" />
+          {{ addListEntryLabel }}
+        </Button>
+      </div>
+    </header>
 
-    <!-- Access Mode -->
-    <section class="space-y-4">
+    <!-- Access Mode (Posture Style) -->
+    <section class="space-y-4 rounded-md border p-4 bg-background/50">
       <div class="space-y-1">
         <p class="text-xs font-medium text-foreground">
           {{ $t('bots.access.modeTitle') }}
         </p>
-        <p class="text-xs text-muted-foreground">
+        <p class="text-[11px] text-muted-foreground">
           {{ $t('bots.access.modeDescription') }}
         </p>
       </div>
       <div class="grid gap-3 md:grid-cols-2">
         <button
           type="button"
-          class="rounded-lg border p-4 text-left transition-colors"
+          class="flex flex-col items-start rounded-lg border p-4 text-left transition-all duration-200 group shadow-none"
           :class="defaultEffectDraft === 'allow'
-            ? 'border-ring bg-secondary text-foreground ring-1 ring-ring/20'
-            : 'border-border bg-background text-foreground hover:bg-accent'"
+            ? 'border-foreground bg-muted text-foreground'
+            : 'border-border/60 bg-background/70 text-foreground hover:bg-accent/50'"
           :disabled="isSavingDefaultEffect"
           @click="handleSetDefaultEffect('allow')"
         >
-          <span class="text-sm font-medium">{{ $t('bots.access.blacklistMode') }}</span>
-          <span
-            class="mt-1 block text-xs text-muted-foreground"
+          <div
+            class="size-8 rounded flex items-center justify-center mb-3 transition-colors shadow-none"
+            :class="defaultEffectDraft === 'allow' ? 'bg-foreground text-background' : 'bg-muted text-muted-foreground group-hover:bg-background'"
           >
+            <ShieldAlert class="size-5" />
+          </div>
+          <span class="text-sm font-semibold mb-1">{{ $t('bots.access.blacklistMode') }}</span>
+          <span class="text-[11px] leading-relaxed text-muted-foreground">
             {{ $t('bots.access.blacklistModeDescription') }}
           </span>
         </button>
+
         <button
           type="button"
-          class="rounded-lg border p-4 text-left transition-colors"
+          class="flex flex-col items-start rounded-lg border p-4 text-left transition-all duration-200 group shadow-none"
           :class="defaultEffectDraft === 'deny'
-            ? 'border-ring bg-secondary text-foreground ring-1 ring-ring/20'
-            : 'border-border bg-background text-foreground hover:bg-accent'"
+            ? 'border-foreground bg-muted text-foreground'
+            : 'border-border/60 bg-background/70 text-foreground hover:bg-accent/50'"
           :disabled="isSavingDefaultEffect"
           @click="handleSetDefaultEffect('deny')"
         >
-          <span class="text-sm font-medium">{{ $t('bots.access.whitelistMode') }}</span>
-          <span
-            class="mt-1 block text-xs text-muted-foreground"
+          <div
+            class="size-8 rounded flex items-center justify-center mb-3 transition-colors shadow-none"
+            :class="defaultEffectDraft === 'deny' ? 'bg-foreground text-background' : 'bg-muted text-muted-foreground group-hover:bg-background'"
           >
+            <ShieldCheck class="size-5" />
+          </div>
+          <span class="text-sm font-semibold mb-1">{{ $t('bots.access.whitelistMode') }}</span>
+          <span class="text-[11px] leading-relaxed text-muted-foreground">
             {{ $t('bots.access.whitelistModeDescription') }}
           </span>
         </button>
       </div>
     </section>
 
-    <Separator />
-
-    <!-- Rules -->
-    <section class="order-20 space-y-4">
+    <!-- Rules List -->
+    <section class="space-y-4">
       <div class="flex items-center justify-between">
         <div class="space-y-1">
           <h3 class="text-xs font-medium text-foreground">
             {{ listTitle }}
           </h3>
-          <p class="text-xs text-muted-foreground">
+          <p class="text-[11px] text-muted-foreground">
             {{ listDescription }}
           </p>
         </div>
-        <Button
-          v-if="!formVisible"
-          size="sm"
-          @click="openAddDialog"
-        >
-          <Plus
-            class="mr-1.5 size-3.5"
-          />
-          {{ addListEntryLabel }}
-        </Button>
       </div>
+
       <div
         v-if="isLoadingRules"
-        class="flex justify-center py-8"
+        class="flex justify-center py-12"
       >
-        <Spinner />
+        <Spinner class="size-6 text-muted-foreground/50" />
       </div>
+
       <Empty
         v-else-if="visibleRules.length === 0"
         :title="emptyTitle"
-        class="empty:hidden"
         :description="emptyDescription"
-      />
+        class="border border-dashed border-border/60 bg-muted/5 rounded-lg py-10"
+      >
+        <Button
+          variant="outline"
+          size="sm"
+          class="mt-4 h-8 text-[11px] border-border/60 shadow-none"
+          @click="openAddDialog"
+        >
+          <Plus class="mr-1.5 size-3.5" />
+          {{ addListEntryLabel }}
+        </Button>
+      </Empty>
+
       <div
         v-else
         class="space-y-2"
@@ -105,61 +123,67 @@
         <div
           v-for="rule in visibleRules"
           :key="rule.id"
-          class="flex items-center gap-3 rounded-md border border-border bg-background px-3 py-3"
+          class="group flex items-center gap-3 rounded-md border border-border/60 bg-background/50 px-3 py-2.5 hover:bg-muted/30 transition-all duration-200"
         >
+          <!-- Avatar size-8 (32px) -->
           <Avatar
             v-if="rule.channel_identity_id"
-            class="size-9 shrink-0"
+            class="size-8 shrink-0 border border-border/40"
           >
             <AvatarImage
               :src="rule.channel_identity_avatar_url"
               :alt="describeRuleTarget(rule)"
             />
-            <AvatarFallback>{{ ruleTargetFallback(rule) }}</AvatarFallback>
+            <AvatarFallback class="text-[10px]">
+              {{ ruleTargetFallback(rule) }}
+            </AvatarFallback>
           </Avatar>
-          <span
+          <div
             v-else-if="rule.subject_channel_type"
-            class="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"
+            class="flex size-8 shrink-0 items-center justify-center rounded bg-background border border-border/50 text-muted-foreground"
           >
             <ChannelIcon
               :channel="rule.subject_channel_type"
-              size="1.1em"
+              size="1em"
             />
-          </span>
-          <span
+          </div>
+          <div
             v-else
-            class="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"
+            class="flex size-8 shrink-0 items-center justify-center rounded bg-background border border-border/50 text-muted-foreground"
           >
             <Users class="size-4" />
-          </span>
+          </div>
 
-          <div class="min-w-0 flex-1 space-y-1">
+          <div class="min-w-0 flex-1 space-y-0.5">
             <div class="flex min-w-0 items-center gap-2">
-              <p class="truncate text-xs font-medium text-foreground">
+              <p class="truncate text-[11px] font-semibold text-foreground">
                 {{ describeRuleTarget(rule) }}
               </p>
-              <span
-                class="shrink-0 rounded-full px-2 py-0.5 text-[11px]"
-                :class="rule.enabled ? 'bg-success-soft text-success-foreground' : 'bg-muted text-muted-foreground'"
+              <Badge
+                variant="outline"
+                class="h-4 px-1.5 text-[9px] font-medium rounded-full shadow-none"
+                :class="rule.enabled ? 'bg-foreground/5 text-foreground border-foreground/20' : 'bg-muted/40 text-muted-foreground border-border/40'"
               >
                 {{ rule.enabled ? $t('bots.access.ruleEnabled') : $t('bots.access.ruleDisabled') }}
-              </span>
+              </Badge>
             </div>
-            <div class="flex min-w-0 items-center text-xs text-muted-foreground">
+            <div class="flex min-w-0 items-center text-[10px] text-muted-foreground">
               <span class="shrink-0">
                 {{ ruleScopePrefix(rule) }}
               </span>
               <template v-if="ruleScopeDetail(rule)">
-                <span class="shrink-0">: </span>
+                <span class="shrink-0 mx-1">: </span>
                 <Avatar
                   v-if="rule.source_conversation_avatar_url"
-                  class="mx-1 size-4 shrink-0"
+                  class="mr-1 size-3.5 shrink-0"
                 >
                   <AvatarImage
                     :src="rule.source_conversation_avatar_url"
                     :alt="rule.source_conversation_name || rule.source_scope?.conversation_id"
                   />
-                  <AvatarFallback>{{ ruleScopeFallback(rule) }}</AvatarFallback>
+                  <AvatarFallback class="text-[8px]">
+                    {{ ruleScopeFallback(rule) }}
+                  </AvatarFallback>
                 </Avatar>
                 <span class="truncate">
                   {{ ruleScopeDetail(rule) }}
@@ -168,31 +192,32 @@
             </div>
             <p
               v-if="rule.description"
-              class="truncate text-xs text-muted-foreground italic"
+              class="truncate text-[10px] text-muted-foreground/70 italic leading-relaxed"
             >
               {{ rule.description }}
             </p>
           </div>
 
-          <!-- Actions -->
-          <div class="shrink-0 flex items-center gap-1">
+          <!-- Icon-Only Actions -->
+          <div class="shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
             <Button
-              variant="outline"
-              size="sm"
-              class="h-7 px-2 text-xs"
+              variant="ghost"
+              size="icon-sm"
+              class="size-7 shadow-none"
+              :class="rule.enabled ? 'text-muted-foreground' : 'text-foreground hover:bg-foreground/5'"
+              :aria-label="rule.enabled ? $t('bots.access.disableRule') : $t('bots.access.enableRule')"
               @click="handleToggleEnabled(rule, !(rule.enabled ?? false))"
             >
-              {{ rule.enabled ? $t('bots.access.disableRule') : $t('bots.access.enableRule') }}
+              <Power class="size-3.5" />
             </Button>
             <Button
               variant="ghost"
               size="icon-sm"
+              class="size-7"
               :aria-label="$t('common.edit')"
               @click="openEditDialog(rule)"
             >
-              <SquarePen
-                class="size-3.5"
-              />
+              <SquarePen class="size-3.5 text-muted-foreground" />
             </Button>
             <ConfirmPopover
               :message="$t('bots.access.deleteConfirmDescription')"
@@ -203,12 +228,10 @@
                 <Button
                   variant="ghost"
                   size="icon-sm"
-                  class="text-destructive hover:text-destructive"
+                  class="size-7 text-destructive/70 hover:text-destructive hover:bg-destructive/10"
                   :aria-label="$t('common.delete')"
                 >
-                  <Trash2
-                    class="size-3.5"
-                  />
+                  <Trash2 class="size-3.5" />
                 </Button>
               </template>
             </ConfirmPopover>
@@ -218,273 +241,177 @@
     </section>
 
     <!-- Inline Add/Edit Rule Form -->
-    <section
-      v-if="formVisible"
-      class="order-10 space-y-4"
-    >
-      <div class="flex items-center justify-between">
-        <h3 class="text-sm font-medium text-foreground">
-          {{ editingRule ? $t('bots.access.editRule') : addListEntryLabel }}
-        </h3>
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          class="size-7"
-          @click="formVisible = false"
-        >
-          <X class="size-4" />
-        </Button>
-      </div>
-
-      <form
-        class="space-y-4"
-        @submit.prevent="handleSaveRule(false)"
+    <Transition name="fade">
+      <section
+        v-if="formVisible"
+        class="space-y-5 rounded-md border border-border/60 bg-muted/10 p-4 relative"
       >
-        <div class="rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
-          {{ rulePreviewText }}
+        <div class="flex items-center justify-between">
+          <h3 class="text-xs font-semibold text-foreground">
+            {{ editingRule ? $t('bots.access.editRule') : addListEntryLabel }}
+          </h3>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            class="size-7"
+            @click="formVisible = false"
+          >
+            <X class="size-4" />
+          </Button>
         </div>
 
-        <!-- Platform Scope -->
-        <div class="space-y-1.5">
-          <div class="flex items-center justify-between gap-2">
-            <Label class="text-xs font-medium text-foreground">{{ $t('bots.access.platformQuestion') }}</Label>
-            <Button
-              v-if="ruleForm.subjectChannelType"
-              type="button"
-              variant="ghost"
-              size="sm"
-              class="h-6 px-2 text-xs"
-              @click="setPlatformScope('')"
-            >
-              {{ $t('bots.access.allPlatforms') }}
-            </Button>
+        <form
+          class="space-y-4"
+          @submit.prevent="handleSaveRule(false)"
+        >
+          <!-- Rule Preview (Code Block Style) -->
+          <div class="rounded-md bg-background/80 border border-border/40 px-3 py-2.5 font-mono text-[10px] leading-relaxed text-muted-foreground">
+            <div class="flex items-center gap-2 mb-1">
+              <div class="size-1.5 rounded-full bg-foreground/40" />
+              <span class="text-foreground/60 uppercase tracking-wider font-bold">Preview</span>
+            </div>
+            {{ rulePreviewText }}
           </div>
-          <SearchableSelectPopover
-            v-model="ruleForm.subjectChannelType"
-            :options="platformOptions"
-            :placeholder="$t('bots.access.allPlatforms')"
-            :aria-label="$t('bots.access.platformQuestion')"
-            :search-placeholder="$t('bots.access.searchPlatform')"
-            :search-aria-label="$t('bots.access.searchPlatform')"
-            :empty-text="$t('bots.access.noPlatformCandidates')"
-            :show-group-headers="false"
-            @update:model-value="setPlatformScope"
-          >
-            <template #trigger="{ open, displayLabel }">
+
+          <!-- Platform Scope -->
+          <div class="space-y-1.5">
+            <div class="flex items-center justify-between gap-2">
+              <Label class="text-[11px] font-medium text-muted-foreground">{{ $t('bots.access.platformQuestion') }}</Label>
               <Button
-                variant="outline"
-                role="combobox"
-                :aria-expanded="open"
-                :aria-label="$t('bots.access.platformQuestion')"
-                class="w-full justify-between font-normal"
+                v-if="ruleForm.subjectChannelType"
+                type="button"
+                variant="ghost"
+                size="sm"
+                class="h-5 px-1.5 text-[10px] text-muted-foreground/60"
+                @click="setPlatformScope('')"
               >
-                <span class="flex min-w-0 items-center gap-2 truncate">
+                {{ $t('bots.access.allPlatforms') }}
+              </Button>
+            </div>
+            <SearchableSelectPopover
+              v-model="ruleForm.subjectChannelType"
+              :options="platformOptions"
+              :placeholder="$t('bots.access.allPlatforms')"
+              :search-placeholder="$t('bots.access.searchPlatform')"
+              :empty-text="$t('bots.access.noPlatformCandidates')"
+              :show-group-headers="false"
+              @update:model-value="setPlatformScope"
+            >
+              <template #trigger="{ open, displayLabel }">
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  :aria-expanded="open"
+                  class="w-full justify-between font-normal h-8 text-[11px] bg-background/50 border-border/50 shadow-none focus-visible:ring-ring/30"
+                >
+                  <span class="flex min-w-0 items-center gap-2 truncate">
+                    <span
+                      v-if="ruleForm.subjectChannelType"
+                      class="flex size-5 shrink-0 items-center justify-center rounded bg-muted/40 text-muted-foreground"
+                    >
+                      <ChannelIcon
+                        :channel="ruleForm.subjectChannelType"
+                        size="1em"
+                      />
+                    </span>
+                    <span class="truncate">
+                      {{ displayLabel || $t('bots.access.allPlatforms') }}
+                    </span>
+                  </span>
+                  <Search class="ml-2 size-3.5 shrink-0 text-muted-foreground/60" />
+                </Button>
+              </template>
+              <template #option-label="{ option }">
+                <div class="flex min-w-0 items-center gap-2 text-left py-0.5">
                   <span
-                    v-if="ruleForm.subjectChannelType"
-                    class="flex size-5 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground"
+                    v-if="option.value"
+                    class="flex size-5 shrink-0 items-center justify-center rounded bg-muted/40 text-muted-foreground"
                   >
                     <ChannelIcon
-                      :channel="ruleForm.subjectChannelType"
+                      :channel="option.value"
                       size="1em"
                     />
                   </span>
-                  <span class="truncate">
-                    {{ displayLabel || $t('bots.access.allPlatforms') }}
-                  </span>
-                </span>
-                <Search class="ml-2 size-3.5 shrink-0 text-muted-foreground" />
-              </Button>
-            </template>
-            <template #option-label="{ option }">
-              <div class="flex min-w-0 items-center gap-2 text-left">
-                <span
-                  v-if="option.value"
-                  class="flex size-5 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground"
-                >
-                  <ChannelIcon
-                    :channel="option.value"
-                    size="1em"
-                  />
-                </span>
-                <span
-                  v-else
-                  class="size-5 shrink-0"
-                />
-                <span class="truncate text-xs">
-                  {{ option.label }}
-                </span>
-              </div>
-            </template>
-          </SearchableSelectPopover>
-        </div>
-
-        <!-- Channel Identity -->
-        <div class="space-y-1.5">
-          <div class="flex items-center justify-between gap-2">
-            <Label class="text-xs font-medium text-foreground">{{ $t('bots.access.userQuestion') }}</Label>
-            <Button
-              v-if="ruleForm.channelIdentityId"
-              type="button"
-              variant="ghost"
-              size="sm"
-              class="h-6 px-2 text-xs"
-              @click="setChannelIdentity('')"
-            >
-              {{ $t('bots.access.allUsers') }}
-            </Button>
-          </div>
-          <SearchableSelectPopover
-            v-model="ruleForm.channelIdentityId"
-            :options="filteredIdentityOptions"
-            :placeholder="$t('bots.access.selectIdentity')"
-            :aria-label="$t('bots.access.selectIdentity')"
-            :search-placeholder="$t('bots.access.searchIdentity')"
-            :search-aria-label="$t('bots.access.searchIdentity')"
-            :empty-text="$t('bots.access.noIdentityCandidates')"
-            @update:model-value="setChannelIdentity"
-          >
-            <template #trigger="{ open, displayLabel }">
-              <Button
-                variant="outline"
-                role="combobox"
-                :aria-expanded="open"
-                :aria-label="$t('bots.access.selectIdentity')"
-                class="w-full justify-between font-normal"
-              >
-                <span class="flex min-w-0 items-center gap-2 truncate">
-                  <Avatar
-                    v-if="selectedIdentityOption"
+                  <span
+                    v-else
                     class="size-5 shrink-0"
-                  >
-                    <AvatarImage
-                      :src="selectedIdentityOption.meta.avatarUrl"
-                      :alt="selectedIdentityOption.label"
-                    />
-                    <AvatarFallback>{{ selectedIdentityOption.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
-                  </Avatar>
-                  <span class="truncate">
-                    {{ displayLabel || $t('bots.access.selectIdentity') }}
-                  </span>
-                </span>
-                <Search class="ml-2 size-3.5 shrink-0 text-muted-foreground" />
-              </Button>
-            </template>
-            <template #option-label="{ option }">
-              <div class="flex min-w-0 items-center gap-2 text-left">
-                <Avatar class="size-6 shrink-0">
-                  <AvatarImage
-                    :src="option.meta?.avatarUrl"
-                    :alt="option.label"
                   />
-                  <AvatarFallback>{{ option.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
-                </Avatar>
-                <div class="min-w-0">
-                  <div class="truncate text-xs">
+                  <span class="truncate text-[11px]">
                     {{ option.label }}
-                  </div>
-                  <div
-                    v-if="option.meta?.channelLabel"
-                    class="truncate text-xs text-muted-foreground"
-                  >
-                    {{ formatIdentityOptionSubtitle(option.meta) }}
-                  </div>
+                  </span>
                 </div>
-              </div>
-            </template>
-          </SearchableSelectPopover>
-        </div>
-
-        <!-- Chat Scope -->
-        <div class="space-y-1.5">
-          <Label class="text-xs font-medium text-foreground">{{ $t('bots.access.scopeQuestion') }}</Label>
-          <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
-            <button
-              v-for="scope in chatScopeOptions"
-              :key="scope.value || 'any'"
-              type="button"
-              class="rounded-md border px-2 py-1.5 text-xs font-medium transition-colors text-center"
-              :class="ruleForm.sourceConversationType === scope.value
-                ? 'border-ring bg-secondary text-foreground ring-1 ring-ring/20'
-                : 'border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground'"
-              @click="setChatScope(scope.value)"
-            >
-              {{ scope.label }}
-            </button>
-          </div>
-        </div>
-
-        <section
-          v-if="showSpecificConversationSection"
-          class="space-y-3 border-l border-border pl-4"
-        >
-          <div class="space-y-1">
-            <p class="text-xs font-medium text-foreground">
-              {{ $t('bots.access.specificConversationTitle') }}
-            </p>
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.access.specificConversationDescription') }}
-            </p>
+              </template>
+            </SearchableSelectPopover>
           </div>
 
-          <div
-            v-if="showConversationSearch"
-            class="space-y-1.5"
-          >
-            <Label>{{ $t('bots.access.existingConversation') }}</Label>
+          <!-- Channel Identity -->
+          <div class="space-y-1.5">
+            <div class="flex items-center justify-between gap-2">
+              <Label class="text-[11px] font-medium text-muted-foreground">{{ $t('bots.access.userQuestion') }}</Label>
+              <Button
+                v-if="ruleForm.channelIdentityId"
+                type="button"
+                variant="ghost"
+                size="sm"
+                class="h-5 px-1.5 text-[10px] text-muted-foreground/60"
+                @click="setChannelIdentity('')"
+              >
+                {{ $t('bots.access.allUsers') }}
+              </Button>
+            </div>
             <SearchableSelectPopover
-              v-model="ruleForm.observedConversationRouteId"
-              :options="observedConversationOptions"
-              :placeholder="$t('bots.access.selectConversationSource')"
-              :aria-label="$t('bots.access.selectConversationSource')"
-              :search-placeholder="$t('bots.access.searchConversationSource')"
-              :search-aria-label="$t('bots.access.searchConversationSource')"
-              :empty-text="observedConversationEmptyText"
-              @update:model-value="onConversationSourceChange"
+              v-model="ruleForm.channelIdentityId"
+              :options="filteredIdentityOptions"
+              :placeholder="$t('bots.access.selectIdentity')"
+              :search-placeholder="$t('bots.access.searchIdentity')"
+              :empty-text="$t('bots.access.noIdentityCandidates')"
+              @update:model-value="setChannelIdentity"
             >
-              <template #trigger="{ open, displayLabel, selectedOption }">
+              <template #trigger="{ open, displayLabel }">
                 <Button
                   variant="outline"
                   role="combobox"
                   :aria-expanded="open"
-                  :aria-label="$t('bots.access.selectConversationSource')"
-                  class="w-full justify-between font-normal"
+                  class="w-full justify-between font-normal h-8 text-[11px] bg-background/50 border-border/50 shadow-none focus-visible:ring-ring/30"
                 >
                   <span class="flex min-w-0 items-center gap-2 truncate">
                     <Avatar
-                      v-if="observedConversationAvatar(selectedOption?.meta)"
-                      class="size-5 shrink-0"
+                      v-if="selectedIdentityOption"
+                      class="size-5 shrink-0 border border-border/40"
                     >
                       <AvatarImage
-                        :src="observedConversationAvatar(selectedOption?.meta)"
-                        :alt="displayLabel"
+                        :src="selectedIdentityOption.meta.avatarUrl"
+                        :alt="selectedIdentityOption.label"
                       />
-                      <AvatarFallback>{{ displayLabel.slice(0, 2).toUpperCase() }}</AvatarFallback>
+                      <AvatarFallback class="text-[8px]">{{ selectedIdentityOption.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
                     </Avatar>
                     <span class="truncate">
-                      {{ displayLabel || $t('bots.access.selectConversationSource') }}
+                      {{ displayLabel || $t('bots.access.selectIdentity') }}
                     </span>
                   </span>
-                  <Search class="ml-2 size-3.5 shrink-0 text-muted-foreground" />
+                  <Search class="ml-2 size-3.5 shrink-0 text-muted-foreground/60" />
                 </Button>
               </template>
               <template #option-label="{ option }">
-                <div class="flex min-w-0 flex-1 items-center gap-2 text-left">
-                  <Avatar
-                    v-if="observedConversationAvatar(option.meta)"
-                    class="size-6 shrink-0"
-                  >
+                <div class="flex min-w-0 items-center gap-2 text-left py-0.5">
+                  <Avatar class="size-6 shrink-0 border border-border/40">
                     <AvatarImage
-                      :src="observedConversationAvatar(option.meta)"
+                      :src="option.meta?.avatarUrl"
                       :alt="option.label"
                     />
-                    <AvatarFallback>{{ option.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
+                    <AvatarFallback class="text-[8px]">
+                      {{ option.label.slice(0, 2).toUpperCase() }}
+                    </AvatarFallback>
                   </Avatar>
                   <div class="min-w-0">
-                    <div class="truncate text-xs">
+                    <div class="truncate text-[11px]">
                       {{ option.label }}
                     </div>
-                    <div class="truncate text-xs text-muted-foreground">
-                      {{ buildConversationStableId(option.meta as AclObservedConversationCandidate | undefined) }}
+                    <div
+                      v-if="option.meta?.channelLabel"
+                      class="truncate text-[10px] text-muted-foreground/60"
+                    >
+                      {{ formatIdentityOptionSubtitle(option.meta) }}
                     </div>
                   </div>
                 </div>
@@ -492,105 +419,211 @@
             </SearchableSelectPopover>
           </div>
 
-          <p
-            v-else
-            class="text-xs text-muted-foreground"
-          >
-            {{ $t('bots.access.pickTargetForConversationSearch') }}
-          </p>
-
-          <div
-            v-if="hasConversationTarget"
-            class="space-y-2"
-          >
-            <p class="text-xs font-medium text-muted-foreground">
-              {{ $t('bots.access.manualConversationIds') }}
-            </p>
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.access.manualConversationIdsHint') }}
-            </p>
-            <div class="grid gap-3 sm:grid-cols-2">
-              <div class="space-y-1.5">
-                <Label>{{ $t('bots.access.conversationId') }}</Label>
-                <Input
-                  v-model="ruleForm.sourceConversationId"
-                  :placeholder="$t('bots.access.conversationIdPlaceholder')"
-                />
-              </div>
-              <div
-                v-if="ruleForm.sourceConversationType === 'thread'"
-                class="space-y-1.5"
+          <!-- Chat Scope -->
+          <div class="space-y-2">
+            <Label class="text-[11px] font-medium text-muted-foreground">{{ $t('bots.access.scopeQuestion') }}</Label>
+            <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
+              <button
+                v-for="scope in chatScopeOptions"
+                :key="scope.value || 'any'"
+                type="button"
+                class="rounded border px-2 py-1.5 text-[10px] font-semibold transition-all text-center h-8 flex items-center justify-center"
+                :class="ruleForm.sourceConversationType === scope.value
+                  ? 'border-foreground/30 bg-foreground/10 text-foreground'
+                  : 'border-border/50 bg-background/50 text-muted-foreground hover:bg-accent hover:text-foreground'"
+                @click="setChatScope(scope.value)"
               >
-                <Label>{{ $t('bots.access.threadId') }}</Label>
-                <Input
-                  v-model="ruleForm.sourceThreadId"
-                  :placeholder="$t('bots.access.threadIdPlaceholder')"
-                />
-              </div>
+                {{ scope.label }}
+              </button>
             </div>
           </div>
 
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            @click="clearScopeFields"
+          <!-- Specific Conversation Section -->
+          <section
+            v-if="showSpecificConversationSection"
+            class="space-y-4 border-l-2 border-border/40 pl-4 py-1"
           >
-            {{ $t('bots.access.clearSpecificConversation') }}
-          </Button>
-        </section>
-
-        <!-- Description -->
-        <div class="space-y-1.5">
-          <Label>{{ $t('bots.access.description') }}</Label>
-          <Input
-            v-model="ruleForm.description"
-            :placeholder="$t('bots.access.descriptionPlaceholder')"
-          />
-        </div>
+            <div class="space-y-1">
+              <p class="text-[11px] font-semibold text-foreground/80">
+                {{ $t('bots.access.specificConversationTitle') }}
+              </p>
+              <p class="text-[10px] text-muted-foreground leading-relaxed">
+                {{ $t('bots.access.specificConversationDescription') }}
+              </p>
+            </div>
 
-        <p
-          v-if="formError"
-          class="text-xs text-destructive"
-        >
-          {{ formError }}
-        </p>
+            <div
+              v-if="showConversationSearch"
+              class="space-y-1.5"
+            >
+              <Label class="text-[10px] font-medium text-muted-foreground uppercase tracking-tight">{{ $t('bots.access.existingConversation') }}</Label>
+              <SearchableSelectPopover
+                v-model="ruleForm.observedConversationRouteId"
+                :options="observedConversationOptions"
+                :placeholder="$t('bots.access.selectConversationSource')"
+                :empty-text="observedConversationEmptyText"
+                @update:model-value="onConversationSourceChange"
+              >
+                <template #trigger="{ open, displayLabel, selectedOption }">
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    :aria-expanded="open"
+                    class="w-full justify-between font-normal h-8 text-[11px] bg-background/50 border-border/50 shadow-none"
+                  >
+                    <span class="flex min-w-0 items-center gap-2 truncate">
+                      <Avatar
+                        v-if="observedConversationAvatar(selectedOption?.meta)"
+                        class="size-5 shrink-0 border border-border/40"
+                      >
+                        <AvatarImage
+                          :src="observedConversationAvatar(selectedOption?.meta)"
+                          :alt="displayLabel"
+                        />
+                        <AvatarFallback class="text-[8px]">{{ displayLabel.slice(0, 2).toUpperCase() }}</AvatarFallback>
+                      </Avatar>
+                      <span class="truncate">
+                        {{ displayLabel || $t('bots.access.selectConversationSource') }}
+                      </span>
+                    </span>
+                    <Search class="ml-2 size-3.5 shrink-0 text-muted-foreground/60" />
+                  </Button>
+                </template>
+                <template #option-label="{ option }">
+                  <div class="flex min-w-0 flex-1 items-center gap-2 text-left py-1">
+                    <Avatar
+                      v-if="observedConversationAvatar(option.meta)"
+                      class="size-7 shrink-0 border border-border/40"
+                    >
+                      <AvatarImage
+                        :src="observedConversationAvatar(option.meta)"
+                        :alt="option.label"
+                      />
+                      <AvatarFallback class="text-[9px]">
+                        {{ option.label.slice(0, 2).toUpperCase() }}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div class="min-w-0">
+                      <div class="truncate text-[11px] font-medium">
+                        {{ option.label }}
+                      </div>
+                      <div class="truncate text-[9px] text-muted-foreground/60 font-mono">
+                        {{ buildConversationStableId(option.meta as AclObservedConversationCandidate | undefined) }}
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </SearchableSelectPopover>
+            </div>
 
-        <div class="flex justify-end gap-2 pt-2">
-          <Button
-            type="submit"
-            variant="outline"
-            size="sm"
-            :disabled="isSavingRule"
-          >
-            <Spinner
-              v-if="savingRuleAction === 'save'"
-              class="mr-1.5"
+            <p
+              v-else
+              class="text-[10px] text-muted-foreground/70 italic"
+            >
+              {{ $t('bots.access.pickTargetForConversationSearch') }}
+            </p>
+
+            <div
+              v-if="hasConversationTarget"
+              class="space-y-3"
+            >
+              <p class="text-[11px] font-medium text-muted-foreground">
+                {{ $t('bots.access.manualConversationIds') }}
+              </p>
+              <div class="grid gap-3 sm:grid-cols-2">
+                <div class="space-y-1.5">
+                  <Label class="text-[10px] font-medium text-muted-foreground">{{ $t('bots.access.conversationId') }}</Label>
+                  <Input
+                    v-model="ruleForm.sourceConversationId"
+                    class="h-8 text-[11px] bg-background/50 border-border/50 focus-visible:ring-ring/30 shadow-none"
+                    :placeholder="$t('bots.access.conversationIdPlaceholder')"
+                  />
+                </div>
+                <div
+                  v-if="ruleForm.sourceConversationType === 'thread'"
+                  class="space-y-1.5"
+                >
+                  <Label class="text-[10px] font-medium text-muted-foreground">{{ $t('bots.access.threadId') }}</Label>
+                  <Input
+                    v-model="ruleForm.sourceThreadId"
+                    class="h-8 text-[11px] bg-background/50 border-border/50 focus-visible:ring-ring/30 shadow-none"
+                    :placeholder="$t('bots.access.threadIdPlaceholder')"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              class="h-7 px-2 text-[10px] text-muted-foreground hover:text-foreground border-border/50 bg-transparent shadow-none"
+              @click="clearScopeFields"
+            >
+              <X class="size-3 mr-1" />
+              {{ $t('bots.access.clearSpecificConversation') }}
+            </Button>
+          </section>
+
+          <!-- Description -->
+          <div class="space-y-1.5">
+            <Label class="text-[11px] font-medium text-muted-foreground">{{ $t('bots.access.description') }}</Label>
+            <Input
+              v-model="ruleForm.description"
+              class="h-8 text-[11px] bg-background/50 border-border/50 focus-visible:ring-ring/30 shadow-none"
+              :placeholder="$t('bots.access.descriptionPlaceholder')"
             />
-            {{ editingRule ? $t('common.save') : $t('bots.access.saveOnly') }}
-          </Button>
-          <Button
-            v-if="!editingRule"
-            type="button"
-            size="sm"
-            :disabled="isSavingRule"
-            @click="handleSaveRule(true)"
+          </div>
+
+          <p
+            v-if="formError"
+            class="text-[10px] text-destructive bg-destructive/5 px-2 py-1 rounded"
           >
-            <Spinner
-              v-if="savingRuleAction === 'enable'"
-              class="mr-1.5"
-            />
-            {{ $t('bots.access.saveAndEnable') }}
-          </Button>
-        </div>
-      </form>
-    </section>
+            {{ formError }}
+          </p>
 
-    <Separator
-      v-if="formVisible"
-      class="order-30"
-    />
-  </SettingsShell>
+          <div class="flex justify-end gap-2 pt-2 border-t border-border/30">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              class="h-8 px-4 text-[11px]"
+              @click="formVisible = false"
+            >
+              {{ $t('common.cancel') }}
+            </Button>
+            <Button
+              type="submit"
+              variant="outline"
+              size="sm"
+              class="h-8 px-4 text-[11px]"
+              :disabled="isSavingRule"
+            >
+              <Spinner
+                v-if="savingRuleAction === 'save'"
+                class="mr-1.5 size-3.5"
+              />
+              {{ editingRule ? $t('common.save') : $t('bots.access.saveOnly') }}
+            </Button>
+            <Button
+              v-if="!editingRule"
+              type="button"
+              size="sm"
+              class="h-8 px-4 text-[11px] shadow-none bg-foreground text-background hover:bg-foreground/90"
+              :disabled="isSavingRule"
+              @click="handleSaveRule(true)"
+            >
+              <Spinner
+                v-if="savingRuleAction === 'enable'"
+                class="mr-1.5 size-3.5"
+              />
+              {{ $t('bots.access.saveAndEnable') }}
+            </Button>
+          </div>
+        </form>
+      </section>
+    </Transition>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -598,7 +631,17 @@ import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
 import { useQuery, useQueryCache } from '@pinia/colada'
-import { Plus, SquarePen, Trash2, X, Search, Users } from 'lucide-vue-next'
+import {
+  Plus,
+  SquarePen,
+  Trash2,
+  X,
+  Search,
+  Users,
+  Power,
+  ShieldCheck,
+  ShieldAlert,
+} from 'lucide-vue-next'
 import {
   Button,
   Input,
@@ -608,12 +651,11 @@ import {
   AvatarFallback,
   Spinner,
   Empty,
-  Separator,
+  Badge,
 } from '@memohai/ui'
 import ConfirmPopover from '@/components/confirm-popover/index.vue'
 import ChannelIcon from '@/components/channel-icon/index.vue'
 import SearchableSelectPopover from '@/components/searchable-select-popover/index.vue'
-import SettingsShell from '@/components/settings-shell/index.vue'
 import { resolveApiErrorMessage } from '@/utils/api-error'
 import { channelTypeDisplayName } from '@/utils/channel-type-label'
 import type { AclObservedConversationCandidate, AclRule, AclSourceScope, HandlersChannelMeta } from '@memohai/sdk'
@@ -1332,3 +1374,15 @@ function describeObservedConversationType(type?: string): string {
   }
 }
 </script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/apps/web/src/pages/bots/components/bot-channels.vue b/apps/web/src/pages/bots/components/bot-channels.vue
index 013189c5e..762169f22 100644
--- a/apps/web/src/pages/bots/components/bot-channels.vue
+++ b/apps/web/src/pages/bots/components/bot-channels.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="flex gap-6 absolute inset-0  mx-auto py-4 pl-4">
-    <!-- Left: Channel list -->
-    <div class="h-full flex-col border rounded-lg overflow-hidden flex sticky top-0">
-      <ScrollArea class="w-60 flex-1 flex flex-col ">
-        <!-- Loading -->
+  <div class="flex gap-6 absolute inset-0 max-w-4xl mx-auto px-4 pt-4 pb-6 w-full">
+    <!-- L3: Silent Hub Rail -->
+    <div class="h-full flex-col border rounded-lg overflow-hidden flex sticky top-0 bg-background/50">
+      <ScrollArea class="w-60 flex-1 flex flex-col">
+        <!-- Skeleton Loading -->
         <div
           v-if="isLoading && configuredChannels.length === 0"
-          class="flex items-center justify-center h-full p-4"
+          class="p-2 space-y-2"
         >
-          <LoaderCircle
-            class="size-4 animate-spin text-muted-foreground"
-          />
+          <Skeleton class="h-10 w-full rounded-md" />
+          <Skeleton class="h-10 w-full rounded-md" />
+          <Skeleton class="h-10 w-full rounded-md" />
         </div>
 
         <!-- Empty -->
@@ -21,76 +21,77 @@
           <p class="text-xs text-muted-foreground">
             {{ $t('bots.channels.emptyTitle') }}
           </p>
-          <p class="mt-1 text-xs text-muted-foreground">
+          <p class="mt-1 text-[11px] text-muted-foreground">
             {{ $t('bots.channels.emptyDescription') }}
           </p>
         </div>
 
-        <!-- Configured channels -->
+        <!-- Platform List (High Density py-1.5) -->
         <div
           v-else
-          class="p-1"
+          class="p-1 space-y-0.5"
         >
           <button
             v-for="item in configuredChannels"
             :key="item.meta.type"
             type="button"
             :aria-pressed="selectedType === item.meta.type"
-            class="flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-xs transition-colors hover:bg-accent"
-            :class="{ 'bg-accent': selectedType === item.meta.type }"
+            class="flex w-full items-center gap-3 rounded-md px-3 py-1.5 text-xs transition-colors hover:bg-accent/50 outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            :class="{ 'bg-accent/40 font-medium text-foreground': selectedType === item.meta.type, 'text-muted-foreground': selectedType !== item.meta.type }"
             @click="selectedType = item.meta.type ?? ''"
           >
-            <span class="flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+            <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-transparent">
               <ChannelIcon
                 :channel="item.meta.type as string"
                 size="1.25em"
               />
             </span>
-            <div class="flex-1 text-left">
-              <div class="font-medium">
+            <div class="flex-1 text-left min-w-0">
+              <div class="truncate flex items-center gap-1">
                 {{ channelTitle(item.meta) }}
+                <!-- Dirty state indicator (*) -->
+                <span
+                  v-if="dirtyStates[item.meta.type ?? '']"
+                  class="text-warning font-bold"
+                  title="Unsaved changes"
+                >*</span>
               </div>
-              <div class="text-xs">
+              <div class="text-[11px] truncate">
                 <span
                   v-if="!item.config?.disabled"
-                  class="text-success-foreground"
-                >
-                  {{ $t('bots.channels.statusActive') }}
-                </span>
+                  class="text-success"
+                >{{ $t('bots.channels.statusActive') }}</span>
                 <span
                   v-else
-                  class="text-muted-foreground"
-                >
-                  {{ $t('bots.channels.configured') }}
-                </span>
+                  class="opacity-70"
+                >{{ $t('bots.channels.configured') }}</span>
               </div>
             </div>
           </button>
         </div>
       </ScrollArea>
-      <!-- Add button -->
-      <div class="border-t p-2  ">
+      
+      <!-- Add Platform Trigger -->
+      <div class="border-t p-2 bg-background">
         <Popover v-model:open="addPopoverOpen">
           <PopoverTrigger as-child>
             <Button
-              variant="outline"
-              class="w-full"
+              variant="ghost"
+              class="w-full h-8 text-xs text-muted-foreground hover:text-foreground"
               size="sm"
               :disabled="unconfiguredChannels.length === 0 && !isLoading"
             >
-              <Plus
-                class="mr-2 size-3"
-              />
+              <Plus class="mr-2 size-3" />
               {{ $t('bots.channels.addChannel') }}
             </Button>
           </PopoverTrigger>
           <PopoverContent
-            class="w-56 p-1"
+            class="w-56 p-1 shadow-md"
             align="start"
           >
             <div
               v-if="unconfiguredChannels.length === 0"
-              class="px-3 py-2 text-xs text-muted-foreground text-center"
+              class="px-3 py-2 text-[11px] text-muted-foreground text-center"
             >
               {{ $t('bots.channels.noAvailableTypes') }}
             </div>
@@ -98,10 +99,10 @@
               v-for="item in unconfiguredChannels"
               :key="item.meta.type"
               type="button"
-              class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-xs hover:bg-accent transition-colors"
+              class="flex w-full items-center gap-3 rounded-md px-3 py-1.5 text-xs hover:bg-accent transition-colors"
               @click="addChannel(item.meta.type ?? '')"
             >
-              <span class="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+              <span class="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
                 <ChannelIcon
                   :channel="item.meta.type ?? ''"
                   size="1em"
@@ -113,22 +114,35 @@
         </Popover>
       </div>
     </div>
-    <!-- Right: Channel settings -->
-    <div class="flex-1 min-w-0">
+
+    <!-- L4: Right Workspace -->
+    <div class="flex-1 min-w-0 pr-4">
       <ScrollArea class="h-full">
-        <div 
+        <div
           v-if="!selectedType || !selectedItem"
           class="flex h-full items-center justify-center text-xs text-muted-foreground"
         >
           {{ configuredChannels.length > 0 ? $t('bots.channels.selectType') : '' }}
         </div>
+        
+        <!-- Skeleton Placeholder -->
+        <div
+          v-else-if="isLoading"
+          class="space-y-6"
+        >
+          <Skeleton class="h-20 w-full rounded-md" />
+          <Skeleton class="h-64 w-full rounded-md" />
+        </div>
 
         <ChannelSettingsPanel
           v-else
           :key="selectedType"
           :bot-id="botId"
           :channel-item="selectedItem"
-          @saved="refetch()"
+          :all-dirty-states="dirtyStates"
+          @update:dirty="(isDirty) => updateDirtyState(selectedType!, isDirty)"
+          @switch-tab="(type) => selectedType = type"
+          @saved="handleSaved"
         />
       </ScrollArea>
     </div>
@@ -136,16 +150,10 @@
 </template>
 
 <script setup lang="ts">
-import { LoaderCircle, Plus } from 'lucide-vue-next'
+import { Plus } from 'lucide-vue-next'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import {
-  Button,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  ScrollArea
-} from '@memohai/ui'
+import { Button, Popover, PopoverTrigger, PopoverContent, ScrollArea, Skeleton } from '@memohai/ui'
 import { useQuery } from '@pinia/colada'
 import { getChannels, getBotsByIdChannelByPlatform } from '@memohai/sdk'
 import type { HandlersChannelMeta, ChannelChannelConfig } from '@memohai/sdk'
@@ -159,12 +167,12 @@ export interface BotChannelItem {
   configured: boolean
 }
 
-const props = defineProps<{
-  botId: string
-}>()
-
+const props = defineProps<{ botId: string }>()
 const { t } = useI18n()
 
+// Dirty state tracking
+const dirtyStates = ref<Record<string, boolean>>({})
+
 function channelTitle(meta: HandlersChannelMeta) {
   return channelTypeDisplayName(t, meta.type, meta.display_name)
 }
@@ -176,21 +184,16 @@ const { data: channels, isLoading, refetch } = useQuery({
   query: async (): Promise<BotChannelItem[]> => {
     const { data: metas } = await getChannels({ throwOnError: true })
     if (!metas) return []
-
     const configurableTypes = metas.filter((m) => !m.configless)
-
     const results = await Promise.all(
       configurableTypes.map(async (meta) => {
         try {
-          const { data: config } = await getBotsByIdChannelByPlatform({
-            path: { id: botIdRef.value, platform: meta.type ?? '' },
-            throwOnError: true,
-          })
+          const { data: config } = await getBotsByIdChannelByPlatform({ path: { id: botIdRef.value, platform: meta.type ?? '' }, throwOnError: true })
           return { meta, config: config ?? null, configured: true } as BotChannelItem
         } catch {
           return { meta, config: null, configured: false } as BotChannelItem
         }
-      }),
+      })
     )
     return results
   },
@@ -202,32 +205,29 @@ const addPopoverOpen = ref(false)
 
 const allChannels = computed<BotChannelItem[]>(() => channels.value ?? [])
 const configuredChannels = computed(() => allChannels.value.filter((c) => c.configured))
-
 const unconfiguredChannels = computed(() => allChannels.value.filter((c) => !c.configured))
 
-const selectedItem = computed(() =>
-  allChannels.value.find((c) => c.meta.type === selectedType.value) ?? null,
-)
+const selectedItem = computed(() => allChannels.value.find((c) => c.meta.type === selectedType.value) ?? null)
 
 watch(configuredChannels, (list) => {
   if (list.length === 0) return
-
-  const first = list[0]
-  if (first && !selectedType.value) {
-    selectedType.value = first.meta.type ?? null
-  }
-
-  const current = selectedType.value
-  if (current && list.some((item) => item.meta.type === current)) {
-    return
+  if (!selectedType.value || !list.some((item) => item.meta.type === selectedType.value)) {
+    const configured = list.find((item) => item.configured)
+    selectedType.value = configured?.meta.type ?? list[0]?.meta.type ?? null
   }
-
-  const configured = list.find((item) => item.configured)
-  selectedType.value = configured?.meta.type ?? list[0]?.meta.type ?? null
 }, { immediate: true })
 
 function addChannel(type: string) {
   addPopoverOpen.value = false
   selectedType.value = type
 }
+
+function updateDirtyState(type: string, isDirty: boolean) {
+  dirtyStates.value[type] = isDirty
+}
+
+function handleSaved() {
+  if (selectedType.value) dirtyStates.value[selectedType.value] = false
+  refetch()
+}
 </script>
diff --git a/apps/web/src/pages/bots/components/bot-compaction.vue b/apps/web/src/pages/bots/components/bot-compaction.vue
index d2330bc49..5fd47c8f9 100644
--- a/apps/web/src/pages/bots/components/bot-compaction.vue
+++ b/apps/web/src/pages/bots/components/bot-compaction.vue
@@ -1,276 +1,5 @@
-<template>
-  <SettingsShell
-    width="wide"
-    class="space-y-6"
-  >
-    <!-- Settings -->
-    <div class="space-y-4">
-      <div class="flex items-center justify-between">
-        <div>
-          <Label>{{ $t('bots.settings.compactionEnabled') }}</Label>
-          <p class="text-xs text-muted-foreground mt-0.5">
-            {{ $t('bots.settings.compactionDescription') }}
-          </p>
-        </div>
-        <Switch
-          :model-value="settingsForm.compaction_enabled"
-          @update:model-value="(val) => settingsForm.compaction_enabled = !!val"
-        />
-      </div>
-      <div
-        v-if="settingsForm.compaction_enabled"
-        class="grid gap-4 md:grid-cols-2"
-      >
-        <div class="space-y-2">
-          <Label>{{ $t('bots.settings.compactionThreshold') }}</Label>
-          <Input
-            v-model.number="settingsForm.compaction_threshold"
-            type="number"
-            :min="1"
-            :placeholder="'100000'"
-            :aria-label="$t('bots.settings.compactionThreshold')"
-          />
-        </div>
-        <div class="space-y-2">
-          <Label>{{ $t('bots.settings.compactionRatio') }}</Label>
-          <p class="text-xs text-muted-foreground mt-0.5">
-            {{ $t('bots.settings.compactionRatioDescription') }}
-          </p>
-          <div class="flex items-center gap-3">
-            <Slider
-              :model-value="[settingsForm.compaction_ratio]"
-              :min="1"
-              :max="100"
-              :step="1"
-              class="flex-1"
-              @update:model-value="(val) => settingsForm.compaction_ratio = val[0]"
-            />
-            <span class="text-sm text-muted-foreground w-10 text-right tabular-nums">{{ settingsForm.compaction_ratio }}%</span>
-          </div>
-        </div>
-        <div class="space-y-2 md:col-span-2">
-          <Label>{{ $t('bots.settings.compactionModel') }}</Label>
-          <p class="text-xs text-muted-foreground mt-0.5">
-            {{ $t('bots.settings.compactionModelDescription') }}
-          </p>
-          <ModelSelect
-            v-model="settingsForm.compaction_model_id"
-            :models="models"
-            :providers="providers"
-            model-type="chat"
-            :placeholder="$t('bots.settings.compactionModelPlaceholder')"
-          />
-        </div>
-      </div>
-      <div class="flex justify-end">
-        <Button
-          size="sm"
-          :disabled="!settingsChanged || isSaving"
-          @click="handleSaveSettings"
-        >
-          <Spinner
-            v-if="isSaving"
-            class="mr-2 size-4"
-          />
-          {{ $t('bots.settings.save') }}
-        </Button>
-      </div>
-    </div>
-
-    <Separator />
-
-    <!-- Logs header -->
-    <div class="flex items-center justify-between">
-      <h3 class="text-sm font-medium">
-        {{ $t('bots.compaction.title') }}
-      </h3>
-      <div class="flex items-center gap-2">
-        <NativeSelect
-          v-model="statusFilter"
-          class="h-9 w-28 text-xs"
-        >
-          <option value="">
-            {{ $t('bots.compaction.filterAll') }}
-          </option>
-          <option value="ok">
-            {{ $t('bots.compaction.statusOk') }}
-          </option>
-          <option value="pending">
-            {{ $t('bots.compaction.statusPending') }}
-          </option>
-          <option value="error">
-            {{ $t('bots.compaction.statusError') }}
-          </option>
-        </NativeSelect>
-        <ConfirmPopover
-          v-if="logs.length > 0"
-          :message="$t('bots.compaction.clearConfirm')"
-          :loading="isClearing"
-          :confirm-text="$t('bots.compaction.clearLogs')"
-          @confirm="handleClear"
-        >
-          <template #trigger>
-            <Button
-              variant="outline"
-              size="sm"
-              :disabled="isClearing"
-            >
-              {{ $t('bots.compaction.clearLogs') }}
-            </Button>
-          </template>
-        </ConfirmPopover>
-        <Button
-          variant="outline"
-          size="sm"
-          :disabled="isLoading"
-          @click="handleRefresh"
-        >
-          <Spinner
-            v-if="isLoading"
-            class="mr-2 size-4"
-          />
-          {{ $t('common.refresh') }}
-        </Button>
-      </div>
-    </div>
-
-    <!-- Loading -->
-    <div
-      v-if="isLoading && logs.length === 0"
-      class="flex items-center justify-center py-8 text-xs text-muted-foreground"
-    >
-      <Spinner class="mr-2" />
-      {{ $t('common.loading') }}
-    </div>
-
-    <!-- Empty -->
-    <div
-      v-else-if="!isLoading && filteredLogs.length === 0"
-      class="flex flex-col items-center justify-center py-12 text-center"
-    >
-      <div class="rounded-full bg-muted p-3 mb-4">
-        <Minimize2
-          class="size-6 text-muted-foreground"
-        />
-      </div>
-      <p class="text-xs text-muted-foreground">
-        {{ $t('bots.compaction.empty') }}
-      </p>
-    </div>
-
-    <!-- Logs -->
-    <template v-else>
-      <div class="rounded-md border">
-        <table class="w-full text-xs">
-          <thead>
-            <tr class="border-b bg-muted/50">
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.compaction.status') }}
-              </th>
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.compaction.time') }}
-              </th>
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.compaction.duration') }}
-              </th>
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.compaction.error') }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="log in filteredLogs"
-              :key="log.id"
-              class="border-b last:border-0 hover:bg-muted/30 cursor-pointer"
-              @click="toggleExpand(log.id)"
-            >
-              <td class="px-4 py-2">
-                <Badge :variant="statusVariant(log.status)">
-                  {{ statusLabel(log.status) }}
-                </Badge>
-              </td>
-              <td class="px-4 py-2 text-muted-foreground">
-                {{ formatDateTime(log.started_at) }}
-              </td>
-              <td class="px-4 py-2 text-muted-foreground">
-                {{ formatDuration(log.started_at, log.completed_at) }}
-              </td>
-              <td class="px-4 py-2">
-                <span
-                  v-if="log.error_message"
-                  class="text-destructive"
-                >{{ log.error_message }}</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Expanded detail -->
-      <div
-        v-for="log in filteredLogs.filter(l => l.id && expandedIds.has(l.id))"
-        :key="'detail-' + log.id"
-        class="rounded-md border bg-muted/20 p-4 text-xs whitespace-pre-wrap wrap-break-word"
-      >
-        <p
-          v-if="log.error_message"
-          class="text-destructive"
-        >
-          {{ log.error_message }}
-        </p>
-        <p
-          v-if="log.usage"
-          class="text-muted-foreground mt-2 text-xs"
-        >
-          Usage: {{ JSON.stringify(log.usage) }}
-        </p>
-      </div>
-
-      <!-- Pagination -->
-      <div
-        v-if="totalPages > 1"
-        class="flex items-center justify-between pt-2"
-      >
-        <span class="text-xs text-muted-foreground whitespace-nowrap">
-          {{ paginationSummary }}
-        </span>
-        <Pagination
-          :total="totalCount"
-          :items-per-page="PAGE_SIZE"
-          :sibling-count="1"
-          :page="currentPage"
-          show-edges
-          @update:page="currentPage = $event"
-        >
-          <PaginationContent v-slot="{ items }">
-            <PaginationFirst />
-            <PaginationPrevious />
-            <template
-              v-for="(item, index) in items"
-              :key="index"
-            >
-              <PaginationEllipsis
-                v-if="item.type === 'ellipsis'"
-                :index="index"
-              />
-              <PaginationItem
-                v-else
-                :value="item.value"
-                :is-active="item.value === currentPage"
-              />
-            </template>
-            <PaginationNext />
-            <PaginationLast />
-          </PaginationContent>
-        </Pagination>
-      </div>
-    </template>
-  </SettingsShell>
-</template>
-
 <script setup lang="ts">
-import { Minimize2 } from 'lucide-vue-next'
+import { Minimize2, RefreshCw, History } from 'lucide-vue-next'
 import { ref, reactive, computed, watch, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
@@ -281,7 +10,6 @@ import {
   PaginationNext, PaginationPrevious,
 } from '@memohai/ui'
 import ConfirmPopover from '@/components/confirm-popover/index.vue'
-import SettingsShell from '@/components/settings-shell/index.vue'
 import ModelSelect from './model-select.vue'
 import {
   getBotsByBotIdSettings, putBotsByBotIdSettings,
@@ -483,3 +211,357 @@ onMounted(() => {
   fetchLogs()
 })
 </script>
+
+<template>
+  <div class="max-w-2xl mx-auto pb-6 space-y-5">
+    <!-- Sovereign Header -->
+    <header class="pb-4 border-b border-border/50 sticky top-0 bg-background/95 backdrop-blur z-30 pt-4 -mt-4 flex items-center justify-between gap-4">
+      <div class="space-y-1">
+        <h2 class="text-sm font-semibold text-foreground flex items-center gap-2">
+          {{ $t('bots.compaction.title') }}
+        </h2>
+        <p class="text-[11px] leading-snug text-muted-foreground max-w-md">
+          {{ $t('bots.settings.compactionDescription') }}
+        </p>
+      </div>
+      <div class="flex shrink-0 flex-wrap justify-end gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          :disabled="isLoading"
+          class="shadow-none"
+          @click="handleRefresh"
+        >
+          <Spinner
+            v-if="isLoading"
+            class="mr-1.5 size-3.5"
+          />
+          <RefreshCw
+            v-else
+            class="mr-1.5 size-3.5 text-muted-foreground"
+          />
+          {{ $t('common.refresh') }}
+        </Button>
+      </div>
+    </header>
+
+    <!-- Settings Bento -->
+    <div class="rounded-md border border-border/60 bg-background overflow-hidden shadow-none">
+      <div class="p-4 space-y-4">
+        <div class="flex items-center justify-between gap-4">
+          <div class="space-y-0.5">
+            <Label class="text-xs font-medium">{{ $t('bots.settings.compactionEnabled') }}</Label>
+            <p class="text-[11px] text-muted-foreground leading-snug">
+              {{ $t('bots.settings.compactionDescription') }}
+            </p>
+          </div>
+          <Switch
+            :model-value="settingsForm.compaction_enabled"
+            class="scale-90"
+            @update:model-value="(val) => settingsForm.compaction_enabled = !!val"
+          />
+        </div>
+
+        <template v-if="settingsForm.compaction_enabled">
+          <Separator class="bg-border/40" />
+
+          <div class="grid gap-4 sm:grid-cols-2">
+            <div class="space-y-1.5">
+              <Label class="text-xs font-medium">{{ $t('bots.settings.compactionThreshold') }}</Label>
+              <Input
+                v-model.number="settingsForm.compaction_threshold"
+                type="number"
+                :min="1"
+                :placeholder="'100000'"
+                class="h-8 text-xs bg-transparent border-border/60 shadow-none font-mono"
+              />
+            </div>
+            <div class="space-y-1.5">
+              <Label class="text-xs font-medium">{{ $t('bots.settings.compactionRatio') }}</Label>
+              <p class="text-[11px] text-muted-foreground leading-snug">
+                {{ $t('bots.settings.compactionRatioDescription') }}
+              </p>
+              <div class="flex items-center gap-3 pt-1">
+                <Slider
+                  :model-value="[settingsForm.compaction_ratio]"
+                  :min="1"
+                  :max="100"
+                  :step="1"
+                  class="flex-1"
+                  @update:model-value="(val) => settingsForm.compaction_ratio = val[0]"
+                />
+                <span class="text-[11px] text-muted-foreground w-8 text-right tabular-nums font-mono">{{ settingsForm.compaction_ratio }}%</span>
+              </div>
+            </div>
+            <div class="space-y-1.5 sm:col-span-2">
+              <Label class="text-xs font-medium">{{ $t('bots.settings.compactionModel') }}</Label>
+              <p class="text-[11px] text-muted-foreground leading-snug">
+                {{ $t('bots.settings.compactionModelDescription') }}
+              </p>
+              <ModelSelect
+                v-model="settingsForm.compaction_model_id"
+                :models="models"
+                :providers="providers"
+                model-type="chat"
+                :placeholder="$t('bots.settings.compactionModelPlaceholder')"
+                class="mt-1"
+              />
+            </div>
+          </div>
+        </template>
+
+        <Separator class="bg-border/40" />
+
+        <div class="flex justify-end">
+          <Button
+            size="sm"
+            :disabled="!settingsChanged || isSaving"
+            class="h-8 text-xs font-medium px-4 shadow-none"
+            @click="handleSaveSettings"
+          >
+            <Spinner
+              v-if="isSaving"
+              class="mr-1.5"
+            />
+            {{ $t('bots.settings.save') }}
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Logs Bento -->
+    <div class="space-y-4">
+      <div class="rounded-md border border-border/60 bg-background overflow-hidden shadow-none">
+        <div class="p-4 space-y-4">
+          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <div class="space-y-0.5">
+              <h4 class="text-xs font-medium text-foreground flex items-center gap-2">
+                <History class="size-3.5 text-muted-foreground" />
+                {{ $t('bots.compaction.title') }}
+              </h4>
+              <p class="text-[11px] text-muted-foreground leading-snug">
+                {{ $t('bots.settings.compactionDescription') }}
+              </p>
+            </div>
+            <div class="flex items-center gap-2 shrink-0 sm:justify-end">
+              <NativeSelect
+                v-model="statusFilter"
+                class="h-8 w-28 text-[11px] bg-transparent border-border/60 shadow-none"
+              >
+                <option value="">
+                  {{ $t('bots.compaction.filterAll') }}
+                </option>
+                <option value="ok">
+                  {{ $t('bots.compaction.statusOk') }}
+                </option>
+                <option value="pending">
+                  {{ $t('bots.compaction.statusPending') }}
+                </option>
+                <option value="error">
+                  {{ $t('bots.compaction.statusError') }}
+                </option>
+              </NativeSelect>
+            </div>
+          </div>
+        </div>
+
+        <Separator class="bg-border/40" />
+
+        <!-- Loading -->
+        <div
+          v-if="isLoading && logs.length === 0"
+          class="flex items-center justify-center py-12 text-[11px] text-muted-foreground"
+        >
+          <Spinner class="mr-2" />
+          {{ $t('common.loading') }}
+        </div>
+
+        <!-- Empty -->
+        <div
+          v-else-if="!isLoading && filteredLogs.length === 0"
+          class="flex flex-col items-center justify-center py-12 text-center"
+        >
+          <div class="size-10 rounded-full bg-muted/20 flex items-center justify-center mb-4">
+            <Minimize2 class="size-5 text-muted-foreground" />
+          </div>
+          <p class="text-[11px] text-muted-foreground">
+            {{ $t('bots.compaction.empty') }}
+          </p>
+        </div>
+
+        <!-- Logs Table -->
+        <template v-else>
+          <div class="overflow-x-auto">
+            <table class="w-full text-[11px]">
+              <thead>
+                <tr class="bg-muted/40 border-b border-border/50">
+                  <th class="px-4 py-2.5 text-left font-medium text-muted-foreground">
+                    {{ $t('bots.compaction.status') }}
+                  </th>
+                  <th class="px-4 py-2.5 text-left font-medium text-muted-foreground">
+                    {{ $t('bots.compaction.time') }}
+                  </th>
+                  <th class="px-4 py-2.5 text-left font-medium text-muted-foreground">
+                    {{ $t('bots.compaction.duration') }}
+                  </th>
+                  <th class="px-4 py-2.5 text-left font-medium text-muted-foreground">
+                    {{ $t('bots.compaction.error') }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-border/40">
+                <template
+                  v-for="log in filteredLogs"
+                  :key="log.id"
+                >
+                  <tr
+                    class="hover:bg-muted/30 transition-colors cursor-pointer group"
+                    @click="toggleExpand(log.id)"
+                  >
+                    <td class="px-4 py-3">
+                      <Badge
+                        :variant="statusVariant(log.status)"
+                        class="h-5 text-[10px] px-1.5 font-mono shadow-none"
+                      >
+                        {{ statusLabel(log.status) }}
+                      </Badge>
+                    </td>
+                    <td class="px-4 py-3 text-muted-foreground font-mono">
+                      {{ formatDateTime(log.started_at) }}
+                    </td>
+                    <td class="px-4 py-3 text-muted-foreground font-mono">
+                      {{ formatDuration(log.started_at, log.completed_at) }}
+                    </td>
+                    <td class="px-4 py-3">
+                      <span
+                        v-if="log.error_message"
+                        class="text-destructive truncate max-w-[200px] block"
+                      >{{ log.error_message }}</span>
+                      <span
+                        v-else
+                        class="text-muted-foreground/40"
+                      >—</span>
+                    </td>
+                  </tr>
+                  <!-- Expanded detail -->
+                  <tr
+                    v-if="log.id && expandedIds.has(log.id)"
+                    class="bg-muted/5 border-t border-border/40"
+                  >
+                    <td
+                      colspan="4"
+                      class="px-4 py-4"
+                    >
+                      <div class="space-y-3">
+                        <div
+                          v-if="log.error_message"
+                          class="rounded-md bg-destructive/5 border border-destructive/10 p-3"
+                        >
+                          <p class="text-destructive font-mono text-[10px] whitespace-pre-wrap">
+                            {{ log.error_message }}
+                          </p>
+                        </div>
+                        <div
+                          v-if="log.usage"
+                          class="space-y-1"
+                        >
+                          <span class="text-[9px] uppercase tracking-wider font-bold text-muted-foreground/60">Usage</span>
+                          <div class="rounded-md bg-muted/20 border border-border/40 p-3 font-mono text-[10px] text-muted-foreground whitespace-pre-wrap">
+                            {{ JSON.stringify(log.usage, null, 2) }}
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- Pagination -->
+          <div
+            v-if="totalPages > 1"
+            class="flex items-center justify-between p-4 border-t border-border/40"
+          >
+            <span class="text-[10px] text-muted-foreground font-mono">
+              {{ paginationSummary }}
+            </span>
+            <Pagination
+              :total="totalCount"
+              :items-per-page="PAGE_SIZE"
+              :sibling-count="1"
+              :page="currentPage"
+              show-edges
+              @update:page="currentPage = $event"
+            >
+              <PaginationContent v-slot="{ items }">
+                <PaginationFirst class="h-7 w-7" />
+                <PaginationPrevious class="h-7 w-7" />
+                <template
+                  v-for="(item, index) in items"
+                  :key="index"
+                >
+                  <PaginationEllipsis
+                    v-if="item.type === 'ellipsis'"
+                    :index="index"
+                    class="h-7 w-7"
+                  />
+                  <PaginationItem
+                    v-else
+                    :value="item.value"
+                    :is-active="item.value === currentPage"
+                    class="h-7 w-7 text-[11px]"
+                  />
+                </template>
+                <PaginationNext class="h-7 w-7" />
+                <PaginationLast class="h-7 w-7" />
+              </PaginationContent>
+            </Pagination>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Danger Zone -->
+    <div
+      v-if="logs.length > 0"
+      class="pt-4"
+    >
+      <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <div class="space-y-0.5">
+            <h4 class="text-xs font-medium text-destructive">
+              {{ $t('common.dangerZone') }}
+            </h4>
+            <p class="text-[11px] text-muted-foreground">
+              Permanently delete all compaction history logs.
+            </p>
+          </div>
+          <div class="flex justify-end shrink-0">
+            <ConfirmPopover
+              :message="$t('bots.compaction.clearConfirm')"
+              :loading="isClearing"
+              :confirm-text="$t('bots.compaction.clearLogs')"
+              @confirm="handleClear"
+            >
+              <template #trigger>
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  :disabled="isClearing"
+                  class="inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-lg gap-1.5 px-3 min-w-28 h-8 text-xs font-medium shadow-none"
+                >
+                  <Spinner
+                    v-if="isClearing"
+                    class="mr-1.5"
+                  />
+                  {{ $t('bots.compaction.clearLogs') }}
+                </Button>
+              </template>
+            </ConfirmPopover>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web/src/pages/bots/components/bot-container.vue b/apps/web/src/pages/bots/components/bot-container.vue
index 18c32c270..4c1802d8b 100644
--- a/apps/web/src/pages/bots/components/bot-container.vue
+++ b/apps/web/src/pages/bots/components/bot-container.vue
@@ -4,7 +4,7 @@ import { toast } from 'vue-sonner'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import { useQuery } from '@pinia/colada'
-import { ChevronRight } from 'lucide-vue-next'
+import { RefreshCw, Play, Square, Box, Database, Settings, History } from 'lucide-vue-next'
 import {
   deleteBotsByBotIdContainer,
   getBotsByBotIdContainer,
@@ -28,7 +28,7 @@ import {
   type ContainerCreateLayerStatus,
   type ContainerCreateStreamEvent,
 } from '@/composables/api/useContainerStream'
-import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger, Input, Label, Separator, Spinner, Switch, Textarea } from '@memohai/ui'
+import { Button, Input, Label, Separator, Spinner, Switch, Textarea } from '@memohai/ui'
 import ConfirmPopover from '@/components/confirm-popover/index.vue'
 import ContainerCreateProgress from './container-create-progress.vue'
 import ContainerMetricsPanel from './container-metrics-panel.vue'
@@ -66,7 +66,6 @@ const createImagePrefilled = ref(false)
 const createGPUEnabled = ref(false)
 const createGPUDevices = ref('')
 const createGPUPrefilled = ref(false)
-const createAdvancedOpen = ref(false)
 const newSnapshotName = ref('')
 const importInputRef = ref<HTMLInputElement | null>(null)
 
@@ -272,6 +271,14 @@ const displayedCDIDevices = computed(() => containerInfo.value?.cdi_devices ?? [
 
 const { isPending: botLifecyclePending } = useBotStatusMeta(bot, t)
 
+const containerStatusColorClass = computed(() => {
+  const status = (containerInfo.value?.status ?? '').trim().toLowerCase()
+  if (status === 'running') return 'bg-success'
+  if (status === 'created') return 'bg-primary'
+  if (status === 'stopped' || status === 'exited') return 'bg-muted-foreground'
+  return 'bg-muted-foreground'
+})
+
 function applyCreateContainerEvent(event: ContainerCreateStreamEvent): boolean {
   switch (event.type) {
     case 'pulling':
@@ -551,10 +558,6 @@ const containerTaskText = computed(() => {
   return info.task_running ? t('bots.container.taskRunning') : t('bots.container.taskStopped')
 })
 
-const preservedDataText = computed(() => hasPreservedData.value
-  ? t('bots.container.preservedDataAvailableShort')
-  : t('bots.container.preservedDataEmpty'))
-
 function formatDate(value: string | undefined): string {
   return formatDateTime(value, { fallback: '-' })
 }
@@ -660,7 +663,6 @@ watch(containerMissing, (missing) => {
   if (!missing) {
     createImagePrefilled.value = false
     createGPUPrefilled.value = false
-    createAdvancedOpen.value = false
   }
 })
 
@@ -689,13 +691,27 @@ watch([activeTab, botId], ([tab]) => {
 </script>
 
 <template>
-  <div class="mx-auto space-y-5">
-    <div class="flex items-start justify-between gap-3">
-      <div class="min-w-0 space-y-1">
-        <h3 class="text-sm font-semibold">
+  <div class="max-w-2xl mx-auto pb-6 space-y-5">
+    <!-- Sovereign Header -->
+    <header class="pb-4 border-b border-border/50 sticky top-0 bg-background/95 backdrop-blur z-30 pt-4 -mt-4 flex items-center justify-between gap-4">
+      <div class="space-y-1">
+        <h2 class="text-sm font-semibold text-foreground flex items-center gap-2">
+          <span
+            v-if="containerInfo"
+            class="relative flex items-center justify-center size-2.5"
+          >
+            <span
+              class="absolute inline-flex h-full w-full rounded-full opacity-20"
+              :class="containerStatusColorClass"
+            />
+            <span
+              class="relative inline-flex rounded-full size-2"
+              :class="containerStatusColorClass"
+            />
+          </span>
           {{ $t('bots.container.title') }}
-        </h3>
-        <p class="text-xs text-muted-foreground">
+        </h2>
+        <p class="text-[11px] leading-snug text-muted-foreground max-w-md">
           {{ $t('bots.container.subtitle') }}
         </p>
       </div>
@@ -704,11 +720,16 @@ watch([activeTab, botId], ([tab]) => {
           variant="outline"
           size="sm"
           :disabled="containerBusy"
+          class="shadow-none"
           @click="handleRefreshContainer"
         >
           <Spinner
             v-if="containerLoading || containerAction === 'refresh'"
-            class="mr-1.5"
+            class="mr-1.5 size-3.5"
+          />
+          <RefreshCw
+            v-else
+            class="mr-1.5 size-3.5 text-muted-foreground"
           />
           {{ $t('common.refresh') }}
         </Button>
@@ -717,24 +738,35 @@ watch([activeTab, botId], ([tab]) => {
           variant="secondary"
           size="sm"
           :disabled="containerBusy || botLifecyclePending"
+          class="shadow-none"
           @click="isContainerTaskRunning ? handleStopContainer() : handleStartContainer()"
         >
           <Spinner
             v-if="containerAction === 'start' || containerAction === 'stop'"
             class="mr-1.5"
           />
+          <Square
+            v-else-if="isContainerTaskRunning"
+            class="mr-1.5 size-3.5"
+          />
+          <Play
+            v-else
+            class="mr-1.5 size-3.5"
+          />
           {{ isContainerTaskRunning ? $t('bots.container.actions.stop') : $t('bots.container.actions.start') }}
         </Button>
       </div>
-    </div>
+    </header>
 
+    <!-- Bot Not Ready -->
     <div
       v-if="botLifecyclePending"
-      class="rounded-md border border-warning-border bg-warning-soft p-3 text-xs text-warning-foreground"
+      class="rounded-md border border-warning-border bg-warning-soft p-3 text-xs text-warning-foreground shadow-none"
     >
       {{ $t('bots.container.botNotReady') }}
     </div>
 
+    <!-- Loading -->
     <div
       v-if="containerLoading && !containerInfo && !containerMissing"
       class="flex items-center gap-2 text-xs text-muted-foreground"
@@ -743,112 +775,101 @@ watch([activeTab, botId], ([tab]) => {
       <span>{{ $t('common.loading') }}</span>
     </div>
 
+    <!-- Empty State (Create) -->
     <div
       v-else-if="containerMissing"
-      class="space-y-4 rounded-md border p-4"
+      class="space-y-6"
     >
-      <p class="text-xs text-muted-foreground">
-        {{ $t('bots.container.empty') }}
-      </p>
-
-      <div class="rounded-md border p-4 space-y-4">
-        <div class="space-y-1">
-          <p class="text-xs font-medium">
-            {{ $t('bots.container.actions.create') }}
-          </p>
-          <p class="text-xs text-muted-foreground">
-            {{ $t('bots.container.createHint') }}
-          </p>
+      <div class="flex flex-col items-center justify-center py-10 border border-border/40 border-dashed rounded-lg bg-muted/5">
+        <div class="size-10 rounded-full bg-muted/20 flex items-center justify-center mb-4">
+          <Box class="size-5 text-muted-foreground" />
         </div>
+        <p class="text-sm font-medium text-foreground mb-1">
+          {{ $t('bots.container.empty') }}
+        </p>
+        <p class="text-[11px] text-muted-foreground text-center max-w-sm">
+          {{ $t('bots.container.createHint') }}
+        </p>
+      </div>
 
-        <div class="flex items-start justify-between gap-4 rounded-md border p-3">
-          <div class="space-y-1">
-            <Label>{{ $t('bots.container.createRestoreDataLabel') }}</Label>
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.container.createRestoreDataDescription') }}
-            </p>
+      <div class="space-y-4">
+        <div class="grid gap-4 sm:grid-cols-2">
+          <!-- Restore Data Switch -->
+          <div class="flex items-start justify-between gap-4 rounded-md border border-border/60 bg-background p-3 shadow-none">
+            <div class="space-y-1">
+              <Label class="text-xs font-medium">{{ $t('bots.container.createRestoreDataLabel') }}</Label>
+              <p class="text-[11px] text-muted-foreground">
+                {{ $t('bots.container.createRestoreDataDescription') }}
+              </p>
+            </div>
+            <Switch
+              :model-value="createRestoreData"
+              :disabled="containerBusy || botLifecyclePending"
+              @update:model-value="(value) => createRestoreData = !!value"
+            />
+          </div>
+
+          <!-- GPU Switch -->
+          <div class="flex items-start justify-between gap-4 rounded-md border border-border/60 bg-background p-3 shadow-none">
+            <div class="space-y-1">
+              <Label class="text-xs font-medium">{{ $t('bots.container.createGpuLabel') }}</Label>
+              <p class="text-[11px] text-muted-foreground">
+                {{ $t('bots.container.createGpuDescription') }}
+              </p>
+            </div>
+            <Switch
+              :model-value="createGPUEnabled"
+              :disabled="containerBusy || botLifecyclePending"
+              @update:model-value="(value) => createGPUEnabled = !!value"
+            />
           </div>
-          <Switch
-            :model-value="createRestoreData"
-            :disabled="containerBusy || botLifecyclePending"
-            @update:model-value="(value) => createRestoreData = !!value"
-          />
         </div>
 
-        <div class="space-y-2">
-          <Label>{{ $t('bots.container.createImageLabel') }}</Label>
+        <!-- Image Input -->
+        <div class="space-y-1.5">
+          <Label class="text-xs font-medium">{{ $t('bots.container.createImageLabel') }}</Label>
           <Input
             v-model="createImage"
             placeholder="debian:bookworm-slim"
             :disabled="containerBusy || botLifecyclePending"
-            class="font-mono"
+            class="font-mono text-xs h-8 shadow-none bg-background border-border/60"
           />
-          <p class="text-xs text-muted-foreground">
+          <p class="text-[11px] text-muted-foreground">
             {{ $t('bots.container.createImageDescription') }}
           </p>
         </div>
 
-        <Collapsible v-model:open="createAdvancedOpen">
-          <div class="rounded-md border">
-            <CollapsibleTrigger class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left hover:bg-accent/40">
-              <div class="space-y-1">
-                <p class="text-xs font-medium">
-                  {{ $t('bots.container.createAdvancedTitle') }}
-                </p>
-                <p class="text-xs text-muted-foreground">
-                  {{ $t('bots.container.createAdvancedDescription') }}
-                </p>
-              </div>
-              <ChevronRight
-                class="size-4 shrink-0 text-muted-foreground transition-transform"
-                :class="{ 'rotate-90': createAdvancedOpen }"
-              />
-            </CollapsibleTrigger>
-
-            <CollapsibleContent>
-              <div class="space-y-4 border-t px-3 py-3">
-                <div class="flex items-start justify-between gap-4 rounded-md border p-3">
-                  <div class="space-y-1">
-                    <Label>{{ $t('bots.container.createGpuLabel') }}</Label>
-                    <p class="text-xs text-muted-foreground">
-                      {{ $t('bots.container.createGpuDescription') }}
-                    </p>
-                  </div>
-                  <Switch
-                    :model-value="createGPUEnabled"
-                    :disabled="containerBusy || botLifecyclePending"
-                    @update:model-value="(value) => createGPUEnabled = !!value"
-                  />
-                </div>
-
-                <div
-                  v-if="createGPUEnabled"
-                  class="space-y-2"
-                >
-                  <Label>{{ $t('bots.container.createGpuDevicesLabel') }}</Label>
-                  <Textarea
-                    v-model="createGPUDevices"
-                    :placeholder="$t('bots.container.createGpuDevicesPlaceholder')"
-                    :disabled="containerBusy || botLifecyclePending"
-                    class="min-h-24 font-mono text-xs"
-                  />
-                  <p class="text-xs text-muted-foreground">
-                    {{ $t('bots.container.createGpuDevicesDescription') }}
-                  </p>
-                </div>
-              </div>
-            </CollapsibleContent>
-          </div>
-        </Collapsible>
+        <!-- GPU Devices Input -->
+        <div
+          v-if="createGPUEnabled"
+          class="space-y-1.5 animate-in fade-in slide-in-from-top-2 duration-200"
+        >
+          <Label class="text-xs font-medium">{{ $t('bots.container.createGpuDevicesLabel') }}</Label>
+          <Textarea
+            v-model="createGPUDevices"
+            :placeholder="$t('bots.container.createGpuDevicesPlaceholder')"
+            :disabled="containerBusy || botLifecyclePending"
+            class="min-h-20 font-mono text-xs shadow-none bg-background border-border/60"
+          />
+          <p class="text-[11px] text-muted-foreground">
+            {{ $t('bots.container.createGpuDevicesDescription') }}
+          </p>
+        </div>
 
-        <div class="flex justify-end">
+        <div class="flex justify-end pt-2">
           <Button
             :disabled="containerBusy || botLifecyclePending"
+            size="sm"
+            class="h-8 text-xs font-medium shadow-none"
             @click="handleCreateContainer"
           >
             <Spinner
               v-if="containerAction === 'create'"
-              class="mr-1.5"
+              class="mr-1.5 size-3.5"
+            />
+            <Play
+              v-else
+              class="mr-1.5 size-3.5"
             />
             {{ $t('bots.container.actions.create') }}
           </Button>
@@ -856,7 +877,7 @@ watch([activeTab, botId], ([tab]) => {
 
         <div
           v-if="createProgress && (containerAction === 'create')"
-          class="space-y-2"
+          class="space-y-2 mt-4"
         >
           <ContainerCreateProgress
             :phase="createProgress.phase"
@@ -867,21 +888,23 @@ watch([activeTab, botId], ([tab]) => {
       </div>
     </div>
 
+    <!-- Active Container -->
     <div
       v-else-if="containerInfo"
-      class="space-y-5"
+      class="space-y-6"
     >
+      <!-- Legacy Warning -->
       <div
         v-if="isLegacy"
-        class="flex items-center justify-between gap-3 rounded-md border border-warning-border bg-warning-soft p-3"
+        class="flex items-center justify-between gap-3 rounded-md border border-warning-border bg-warning-soft p-3 shadow-none"
       >
-        <p class="text-xs text-warning-foreground">
+        <p class="text-[11px] text-warning-foreground">
           {{ $t('bots.container.legacyWarning') }}
         </p>
         <Button
           variant="outline"
           size="sm"
-          class="shrink-0"
+          class="shrink-0 h-7 text-[10px] shadow-none"
           :disabled="containerBusy || botLifecyclePending"
           @click="handleRecreateContainer"
         >
@@ -892,10 +915,9 @@ watch([activeTab, botId], ([tab]) => {
           {{ $t('bots.container.legacyRecreate') }}
         </Button>
       </div>
-
       <div
         v-if="createProgress && containerAction === 'recreate'"
-        class="space-y-2 rounded-md border p-3"
+        class="space-y-2 rounded-md border border-border/60 p-3 shadow-none"
       >
         <ContainerCreateProgress
           :phase="createProgress.phase"
@@ -904,92 +926,66 @@ watch([activeTab, botId], ([tab]) => {
         />
       </div>
 
-      <div class="rounded-md border p-4">
-        <dl class="grid grid-cols-1 gap-3 text-xs sm:grid-cols-2">
-          <div class="space-y-1">
-            <dt class="text-muted-foreground">
-              {{ $t('bots.container.fields.id') }}
-            </dt>
-            <dd class="break-all font-mono">
-              {{ containerInfo.container_id }}
-            </dd>
-          </div>
-          <div class="space-y-1">
-            <dt class="text-muted-foreground">
-              {{ $t('bots.container.fields.status') }}
-            </dt>
-            <dd>{{ containerStatusText }}</dd>
-          </div>
-          <div class="space-y-1">
-            <dt class="text-muted-foreground">
-              {{ $t('bots.container.fields.task') }}
-            </dt>
-            <dd>{{ containerTaskText }}</dd>
-          </div>
-          <div class="space-y-1">
-            <dt class="text-muted-foreground">
-              {{ $t('bots.container.fields.namespace') }}
-            </dt>
-            <dd>{{ containerInfo.namespace }}</dd>
-          </div>
-          <div class="space-y-1 sm:col-span-2">
-            <dt class="text-muted-foreground">
-              {{ $t('bots.container.fields.image') }}
-            </dt>
-            <dd class="break-all">
-              {{ displayedContainerImage }}
-            </dd>
-          </div>
-          <div class="space-y-1 sm:col-span-2">
-            <dt class="text-muted-foreground">
-              {{ $t('bots.container.fields.cdiDevices') }}
-            </dt>
-            <dd
-              v-if="displayedCDIDevices.length === 0"
-              class="text-muted-foreground"
-            >
-              {{ $t('bots.container.cdiDevicesEmpty') }}
-            </dd>
-            <dd
-              v-else
-              class="space-y-1 font-mono text-xs"
-            >
+      <!-- Identity Badges (L3 Meta) -->
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="inline-flex items-center rounded bg-muted/20 px-2 py-0.5 text-[10px] font-mono font-medium text-muted-foreground border border-border/40">
+          ID: {{ containerInfo.container_id }}
+        </span>
+        <span class="inline-flex items-center rounded bg-muted/20 px-2 py-0.5 text-[10px] font-mono font-medium text-muted-foreground border border-border/40">
+          IMG: {{ displayedContainerImage }}
+        </span>
+        <span class="inline-flex items-center rounded bg-muted/20 px-2 py-0.5 text-[10px] font-medium text-muted-foreground border border-border/40">
+          TASK: {{ containerTaskText }}
+        </span>
+      </div>
+
+      <div class="grid grid-cols-12 gap-4">
+        <!-- Static Metadata Bento -->
+        <div class="col-span-12 rounded-md border border-border/60 bg-muted/5 p-4 shadow-none">
+          <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-[11px]">
+            <div class="space-y-1">
+              <span class="text-muted-foreground block">{{ $t('bots.container.fields.status') }}</span>
+              <span class="font-medium text-foreground">{{ containerStatusText }}</span>
+            </div>
+            <div class="space-y-1">
+              <span class="text-muted-foreground block">{{ $t('bots.container.fields.namespace') }}</span>
+              <span class="font-mono text-foreground">{{ containerInfo.namespace }}</span>
+            </div>
+            <div class="space-y-1">
+              <span class="text-muted-foreground block">{{ $t('bots.container.fields.createdAt') }}</span>
+              <span class="text-foreground">{{ formatDate(containerInfo.created_at) }}</span>
+            </div>
+            <div class="space-y-1">
+              <span class="text-muted-foreground block">{{ $t('bots.container.fields.updatedAt') }}</span>
+              <span class="text-foreground">{{ formatDate(containerInfo.updated_at) }}</span>
+            </div>
+            <div class="space-y-1 sm:col-span-2">
+              <span class="text-muted-foreground block">{{ $t('bots.container.fields.containerPath') }}</span>
+              <span class="font-mono text-foreground break-all">{{ containerInfo.container_path }}</span>
+            </div>
+            <div class="space-y-1 sm:col-span-2">
+              <span class="text-muted-foreground block">{{ $t('bots.container.fields.cdiDevices') }}</span>
               <div
-                v-for="device in displayedCDIDevices"
-                :key="device"
-                class="break-all"
+                v-if="displayedCDIDevices.length === 0"
+                class="text-muted-foreground"
               >
-                {{ device }}
+                {{ $t('bots.container.cdiDevicesEmpty') }}
               </div>
-            </dd>
-          </div>
-          <div class="space-y-1 sm:col-span-2">
-            <dt class="text-muted-foreground">
-              {{ $t('bots.container.fields.containerPath') }}
-            </dt>
-            <dd class="break-all">
-              {{ containerInfo.container_path }}
-            </dd>
-          </div>
-          <div class="space-y-1">
-            <dt class="text-muted-foreground">
-              {{ $t('bots.container.fields.preservedData') }}
-            </dt>
-            <dd>{{ preservedDataText }}</dd>
-          </div>
-          <div class="space-y-1">
-            <dt class="text-muted-foreground">
-              {{ $t('bots.container.fields.createdAt') }}
-            </dt>
-            <dd>{{ formatDate(containerInfo.created_at) }}</dd>
-          </div>
-          <div class="space-y-1">
-            <dt class="text-muted-foreground">
-              {{ $t('bots.container.fields.updatedAt') }}
-            </dt>
-            <dd>{{ formatDate(containerInfo.updated_at) }}</dd>
+              <div
+                v-else
+                class="space-y-0.5 font-mono"
+              >
+                <div
+                  v-for="device in displayedCDIDevices"
+                  :key="device"
+                  class="break-all text-foreground"
+                >
+                  {{ device }}
+                </div>
+              </div>
+            </div>
           </div>
-        </dl>
+        </div>
       </div>
 
       <ContainerMetricsPanel
@@ -997,71 +993,111 @@ watch([activeTab, botId], ([tab]) => {
         :loading="metricsLoading"
         :metrics="containerMetrics"
       />
-
-      <div class="rounded-md border px-3 py-2 text-xs text-muted-foreground">
+      <div class="rounded-md border border-border/50 bg-background px-3 py-2 text-[11px] text-muted-foreground shadow-none">
         {{ $t('bots.container.gpuRecreateHint') }}
       </div>
 
-      <div class="space-y-4 rounded-md border p-4">
-        <div class="space-y-1">
-          <h4 class="text-xs font-medium">
-            {{ $t('bots.container.dataTitle') }}
-          </h4>
-          <p class="text-xs text-muted-foreground">
-            {{ $t('bots.container.dataSubtitle') }}
-          </p>
-        </div>
-
-        <div
-          v-if="hasPreservedData"
-          class="rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-xs"
-        >
-          {{ $t('bots.container.preservedDataAvailable') }}
-        </div>
+      <!-- Data Operations -->
+      <div class="space-y-4">
+        <div class="rounded-md border border-border/60 bg-background overflow-hidden shadow-none">
+          <div class="p-4 space-y-4">
+            <!-- Data Pipeline Group -->
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+              <div class="space-y-0.5">
+                <h4 class="text-xs font-medium text-foreground flex items-center gap-2">
+                  <Database class="size-3.5 text-muted-foreground" />
+                  {{ $t('bots.container.dataTitle') }}
+                </h4>
+                <p class="text-[11px] text-muted-foreground leading-snug">
+                  {{ $t('bots.container.dataSubtitle') }}
+                </p>
+                <div
+                  v-if="hasPreservedData"
+                  class="mt-2 inline-flex items-center rounded bg-primary/10 px-2 py-0.5 text-[10px] text-primary"
+                >
+                  {{ $t('bots.container.preservedDataAvailable') }}
+                </div>
+              </div>
+              <div class="flex items-center gap-2 shrink-0 sm:justify-end">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  :disabled="containerBusy || botLifecyclePending"
+                  class="h-8 text-xs shadow-none font-medium border border-border"
+                  @click="handleExportData"
+                >
+                  {{ $t('bots.container.actions.exportData') }}
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  :disabled="containerBusy || botLifecyclePending"
+                  class="h-8 text-xs shadow-none font-medium border border-border"
+                  @click="triggerImportData"
+                >
+                  {{ $t('bots.container.actions.importData') }}
+                </Button>
+                <ConfirmPopover
+                  :message="$t('bots.container.restoreConfirm')"
+                  :loading="containerAction === 'restore'"
+                  @confirm="handleRestorePreservedData"
+                >
+                  <template #trigger>
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      :disabled="containerBusy || botLifecyclePending || !hasPreservedData"
+                      class="h-8 text-xs shadow-none font-medium border border-border"
+                    >
+                      <Spinner
+                        v-if="containerAction === 'restore'"
+                        class="mr-1.5"
+                      />
+                      {{ $t('bots.container.actions.restoreData') }}
+                    </Button>
+                  </template>
+                </ConfirmPopover>
+              </div>
+            </div>
 
-        <div class="flex flex-wrap gap-2">
-          <Button
-            variant="outline"
-            :disabled="containerBusy || botLifecyclePending"
-            @click="handleExportData"
-          >
-            <Spinner
-              v-if="containerAction === 'export'"
-              class="mr-1.5"
-            />
-            {{ $t('bots.container.actions.exportData') }}
-          </Button>
-          <Button
-            variant="outline"
-            :disabled="containerBusy || botLifecyclePending"
-            @click="triggerImportData"
-          >
-            <Spinner
-              v-if="containerAction === 'import'"
-              class="mr-1.5"
-            />
-            {{ $t('bots.container.actions.importData') }}
-          </Button>
-          <ConfirmPopover
-            :message="$t('bots.container.restoreConfirm')"
-            :loading="containerAction === 'restore'"
-            @confirm="handleRestorePreservedData"
-          >
-            <template #trigger>
-              <Button
-                variant="outline"
-                :disabled="containerBusy || botLifecyclePending || !hasPreservedData"
-              >
-                <Spinner
-                  v-if="containerAction === 'restore'"
-                  class="mr-1.5"
-                />
-                {{ $t('bots.container.actions.restoreData') }}
-              </Button>
-            </template>
-          </ConfirmPopover>
+            <Separator class="bg-border/40" />
+
+            <!-- Lifecycle Group -->
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+              <div class="space-y-0.5">
+                <h4 class="text-xs font-medium text-foreground flex items-center gap-2">
+                  <Settings class="size-3.5 text-muted-foreground" />
+                  {{ $t('bots.container.lifecycleTitle') }}
+                </h4>
+                <p class="text-[11px] text-muted-foreground leading-snug">
+                  {{ $t('bots.container.deleteSubtitle') }}
+                </p>
+              </div>
+              <div class="flex justify-end shrink-0">
+                <ConfirmPopover
+                  :message="$t('bots.container.deletePreserveConfirm')"
+                  :loading="containerAction === 'delete-preserve'"
+                  @confirm="handleDeleteContainer(true)"
+                >
+                  <template #trigger>
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      :disabled="containerBusy || botLifecyclePending"
+                      class="h-8 text-xs shadow-none font-medium border border-border"
+                    >
+                      <Spinner
+                        v-if="containerAction === 'delete-preserve'"
+                        class="mr-1.5"
+                      />
+                      {{ $t('bots.container.actions.deletePreserve') }}
+                    </Button>
+                  </template>
+                </ConfirmPopover>
+              </div>
+            </div>
+          </div>
         </div>
-
         <input
           ref="importInputRef"
           type="file"
@@ -1069,160 +1105,143 @@ watch([activeTab, botId], ([tab]) => {
           class="hidden"
           @change="handleImportData"
         >
-        <Separator />
-        <div class="space-y-3">
-          <div class="space-y-1">
-            <h4 class="text-xs font-medium text-destructive">
-              {{ $t('bots.container.deleteTitle') }}
-            </h4>
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.container.deleteSubtitle') }}
-            </p>
+      </div>
+
+      <!-- Danger Zone - Exact replica from ?tab=channels -->
+      <div class="pt-4">
+        <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <div class="space-y-0.5">
+              <h4 class="text-xs font-medium text-destructive">
+                {{ $t('common.dangerZone') }}
+              </h4>
+              <p class="text-[11px] text-muted-foreground">
+                {{ $t('bots.container.deleteZoneDesc') }}
+              </p>
+            </div>
+            <div class="flex justify-end shrink-0">
+              <ConfirmPopover
+                :message="$t('bots.container.deleteConfirm')"
+                :loading="containerAction === 'delete'"
+                @confirm="handleDeleteContainer(false)"
+              >
+                <template #trigger>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    :disabled="containerBusy || botLifecyclePending"
+                    class="inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-lg gap-1.5 px-3 min-w-28 h-8 text-xs font-medium shadow-none"
+                  >
+                    <Spinner
+                      v-if="containerAction === 'delete'"
+                      class="mr-1.5"
+                    />
+                    {{ $t('bots.container.actions.delete') }}
+                  </Button>
+                </template>
+              </ConfirmPopover>
+            </div>
           </div>
+        </div>
+      </div>
 
-          <div class="flex flex-wrap gap-2">
-            <ConfirmPopover
-              :message="$t('bots.container.deletePreserveConfirm')"
-              :loading="containerAction === 'delete-preserve'"
-              @confirm="handleDeleteContainer(true)"
-            >
-              <template #trigger>
-                <Button
-                  variant="outline"
-                  :disabled="containerBusy || botLifecyclePending"
-                >
-                  <Spinner
-                    v-if="containerAction === 'delete-preserve'"
-                    class="mr-1.5"
-                  />
-                  {{ $t('bots.container.actions.deletePreserve') }}
-                </Button>
-              </template>
-            </ConfirmPopover>
+      <Separator
+        v-if="capabilitiesStore.snapshotSupported"
+        class="bg-border/50"
+      />
 
-            <ConfirmPopover
-              :message="$t('bots.container.deleteConfirm')"
-              :loading="containerAction === 'delete'"
-              @confirm="handleDeleteContainer(false)"
-            >
-              <template #trigger>
+      <!-- Snapshots -->
+      <div
+        v-if="capabilitiesStore.snapshotSupported"
+        class="space-y-4"
+      >
+        <div class="rounded-md border border-border/60 bg-background overflow-hidden shadow-none">
+          <!-- Snapshot Management Row -->
+          <div class="p-4 space-y-4">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+              <div class="space-y-0.5">
+                <h4 class="text-xs font-medium text-foreground flex items-center gap-2">
+                  <History class="size-3.5 text-muted-foreground" />
+                  {{ $t('bots.container.snapshotTitle') }}
+                </h4>
+                <p class="text-[11px] text-muted-foreground leading-snug">
+                  {{ $t('bots.container.snapshotSubtitle') }}
+                </p>
+              </div>
+              <div class="flex items-center gap-2 shrink-0 sm:justify-end flex-1 max-w-md">
+                <Input
+                  v-model="newSnapshotName"
+                  :placeholder="$t('bots.container.snapshotNamePlaceholder')"
+                  :disabled="containerBusy || snapshotsLoading || botLifecyclePending"
+                  class="flex-1 h-8 text-xs shadow-none border-border/60 bg-transparent"
+                />
                 <Button
-                  variant="destructive"
-                  :disabled="containerBusy || botLifecyclePending"
+                  size="sm"
+                  :disabled="containerBusy || snapshotsLoading || botLifecyclePending"
+                  class="min-w-28 h-8 text-xs shadow-none font-medium border border-border bg-accent text-foreground hover:bg-accent/80 transition-colors"
+                  @click="handleCreateSnapshot"
                 >
                   <Spinner
-                    v-if="containerAction === 'delete'"
+                    v-if="containerAction === 'snapshot'"
                     class="mr-1.5"
                   />
-                  {{ $t('bots.container.actions.delete') }}
+                  {{ $t('bots.container.actions.snapshot') }}
                 </Button>
-              </template>
-            </ConfirmPopover>
+              </div>
+            </div>
+            <p class="text-[10px] text-muted-foreground/60 leading-none">
+              {{ $t('bots.container.snapshotNameHint') }}
+            </p>
           </div>
-        </div>
-      </div>
 
-      <Separator v-if="capabilitiesStore.snapshotSupported" />
+          <Separator class="bg-border/40" />
 
-      <div
-        v-if="capabilitiesStore.snapshotSupported"
-        class="space-y-3"
-      >
-        <div class="space-y-2">
-          <div class="flex flex-col gap-2 sm:flex-row">
-            <Input
-              v-model="newSnapshotName"
-              :placeholder="$t('bots.container.snapshotNamePlaceholder')"
-              :disabled="containerBusy || snapshotsLoading || botLifecyclePending"
-              class="sm:max-w-72"
-            />
-            <Button
-              :disabled="containerBusy || snapshotsLoading || botLifecyclePending"
-              @click="handleCreateSnapshot"
-            >
-              <Spinner
-                v-if="containerAction === 'snapshot'"
-                class="mr-1.5"
-              />
-              {{ $t('bots.container.actions.snapshot') }}
-            </Button>
+          <!-- List Section -->
+          <div
+            v-if="snapshotsLoading"
+            class="flex items-center gap-2 text-xs text-muted-foreground p-4"
+          >
+            <Spinner /> <span>{{ $t('common.loading') }}</span>
           </div>
-          <p class="text-xs text-muted-foreground">
-            {{ $t('bots.container.snapshotNameHint') }}
-          </p>
-        </div>
-
-        <div
-          v-if="snapshotsLoading"
-          class="flex items-center gap-2 text-xs text-muted-foreground"
-        >
-          <Spinner />
-          <span>{{ $t('common.loading') }}</span>
-        </div>
-        <div
-          v-else-if="sortedSnapshots.length === 0"
-          class="text-xs text-muted-foreground"
-        >
-          {{ $t('bots.container.snapshotEmpty') }}
-        </div>
-        <div
-          v-else
-          class="space-y-3"
-        >
-          <div class="space-y-3 md:hidden">
+          <div
+            v-else-if="sortedSnapshots.length === 0"
+            class="text-[11px] text-muted-foreground py-8 text-center border-dashed border-t border-border/20"
+          >
+            {{ $t('bots.container.snapshotEmpty') }}
+          </div>
+          <div
+            v-else
+            class="divide-y divide-border/40"
+          >
             <div
               v-for="item in sortedSnapshots"
               :key="`${item.snapshotter}:${item.runtime_snapshot_name || item.name}`"
-              class="rounded-md border p-4 space-y-4"
+              class="flex flex-col sm:flex-row sm:items-center justify-between p-3 gap-3 transition-colors hover:bg-muted/20 group"
             >
-              <div class="space-y-1">
-                <p class="text-xs text-muted-foreground">
-                  {{ $t('bots.container.snapshotColumns.name') }}
-                </p>
-                <div class="break-all font-medium">
-                  {{ snapshotDisplayName(item) }}
-                </div>
-                <div
-                  v-if="snapshotRuntimeName(item)"
-                  class="break-all font-mono text-xs text-muted-foreground"
-                >
-                  {{ snapshotRuntimeName(item) }}
-                </div>
-              </div>
-
-              <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                <div class="space-y-1">
-                  <p class="text-xs text-muted-foreground">
-                    {{ $t('bots.container.snapshotColumns.version') }}
-                  </p>
-                  <div>{{ snapshotVersionText(item) }}</div>
+              <div class="flex-1 min-w-0 grid grid-cols-1 sm:grid-cols-12 gap-2 sm:gap-4 items-center">
+                <div class="sm:col-span-4 min-w-0">
+                  <div class="truncate text-xs font-medium text-foreground">
+                    {{ snapshotDisplayName(item) }}
+                  </div>
+                  <div
+                    v-if="snapshotRuntimeName(item)"
+                    class="truncate text-[10px] font-mono text-muted-foreground"
+                  >
+                    {{ snapshotRuntimeName(item) }}
+                  </div>
                 </div>
-                <div class="space-y-1">
-                  <p class="text-xs text-muted-foreground">
-                    {{ $t('bots.container.snapshotColumns.source') }}
-                  </p>
-                  <div>{{ snapshotSourceText(item) }}</div>
+                <div class="sm:col-span-2 text-[11px] text-muted-foreground">
+                  <span class="inline-flex px-1.5 py-0.5 rounded bg-muted/40 border border-border/40">{{ snapshotVersionText(item) }}</span>
                 </div>
-                <div class="space-y-1">
-                  <p class="text-xs text-muted-foreground">
-                    {{ $t('bots.container.snapshotColumns.parent') }}
-                  </p>
-                  <div class="break-all">
-                    {{ item.parent || '-' }}
-                  </div>
+                <div class="sm:col-span-2 text-[11px] text-muted-foreground">
+                  {{ snapshotSourceText(item) }}
                 </div>
-                <div class="space-y-1">
-                  <p class="text-xs text-muted-foreground">
-                    {{ $t('bots.container.snapshotColumns.createdAt') }}
-                  </p>
-                  <div>{{ formatDate(item.created_at) }}</div>
+                <div class="sm:col-span-4 text-[11px] text-muted-foreground truncate">
+                  {{ formatDate(item.created_at) }}
                 </div>
               </div>
 
-              <div class="space-y-1">
-                <p class="text-xs text-muted-foreground">
-                  {{ $t('bots.container.snapshotColumns.actions') }}
-                </p>
+              <div class="shrink-0 flex items-center justify-end">
                 <ConfirmPopover
                   v-if="canRollbackSnapshot(item)"
                   :message="$t('bots.container.rollbackConfirm')"
@@ -1231,10 +1250,10 @@ watch([activeTab, botId], ([tab]) => {
                 >
                   <template #trigger>
                     <Button
-                      variant="outline"
+                      variant="ghost"
                       size="sm"
-                      class="w-full"
                       :disabled="containerBusy || botLifecyclePending"
+                      class="h-6 px-2 text-[11px] text-muted-foreground hover:text-primary hover:bg-primary/10 shadow-none transition-colors"
                     >
                       <Spinner
                         v-if="containerAction === 'rollback' && rollbackVersion === item.version"
@@ -1244,103 +1263,9 @@ watch([activeTab, botId], ([tab]) => {
                     </Button>
                   </template>
                 </ConfirmPopover>
-                <div
-                  v-else
-                  class="text-xs text-muted-foreground"
-                >
-                  -
-                </div>
               </div>
             </div>
           </div>
-
-          <div class="hidden overflow-x-auto rounded-md border md:block">
-            <table class="w-full text-xs">
-              <thead class="bg-muted/50 text-left">
-                <tr>
-                  <th class="px-3 py-2 font-medium">
-                    {{ $t('bots.container.snapshotColumns.name') }}
-                  </th>
-                  <th class="px-3 py-2 font-medium">
-                    {{ $t('bots.container.snapshotColumns.version') }}
-                  </th>
-                  <th class="px-3 py-2 font-medium">
-                    {{ $t('bots.container.snapshotColumns.source') }}
-                  </th>
-                  <th class="px-3 py-2 font-medium">
-                    {{ $t('bots.container.snapshotColumns.parent') }}
-                  </th>
-                  <th class="px-3 py-2 font-medium">
-                    {{ $t('bots.container.snapshotColumns.createdAt') }}
-                  </th>
-                  <th class="px-3 py-2 font-medium">
-                    {{ $t('bots.container.snapshotColumns.actions') }}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr
-                  v-for="item in sortedSnapshots"
-                  :key="`${item.snapshotter}:${item.runtime_snapshot_name || item.name}`"
-                  class="border-t align-top"
-                >
-                  <td class="px-3 py-2">
-                    <div class="space-y-1">
-                      <div class="break-all font-medium">
-                        {{ snapshotDisplayName(item) }}
-                      </div>
-                      <div
-                        v-if="snapshotRuntimeName(item)"
-                        class="break-all font-mono text-xs text-muted-foreground"
-                      >
-                        {{ snapshotRuntimeName(item) }}
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-3 py-2">
-                    {{ snapshotVersionText(item) }}
-                  </td>
-                  <td class="px-3 py-2">
-                    {{ snapshotSourceText(item) }}
-                  </td>
-                  <td class="px-3 py-2 break-all">
-                    {{ item.parent || '-' }}
-                  </td>
-                  <td class="px-3 py-2">
-                    {{ formatDate(item.created_at) }}
-                  </td>
-                  <td class="px-3 py-2">
-                    <ConfirmPopover
-                      v-if="canRollbackSnapshot(item)"
-                      :message="$t('bots.container.rollbackConfirm')"
-                      :loading="containerAction === 'rollback' && rollbackVersion === item.version"
-                      @confirm="handleRollbackSnapshot(item)"
-                    >
-                      <template #trigger>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          :disabled="containerBusy || botLifecyclePending"
-                        >
-                          <Spinner
-                            v-if="containerAction === 'rollback' && rollbackVersion === item.version"
-                            class="mr-1.5"
-                          />
-                          {{ $t('bots.container.actions.rollback') }}
-                        </Button>
-                      </template>
-                    </ConfirmPopover>
-                    <span
-                      v-else
-                      class="text-muted-foreground"
-                    >
-                      -
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
         </div>
       </div>
     </div>
diff --git a/apps/web/src/pages/bots/components/bot-desktop.vue b/apps/web/src/pages/bots/components/bot-desktop.vue
index 8bb5fa93c..09eb1935d 100644
--- a/apps/web/src/pages/bots/components/bot-desktop.vue
+++ b/apps/web/src/pages/bots/components/bot-desktop.vue
@@ -1,166 +1,253 @@
 <template>
-  <SettingsShell
-    width="wide"
-    class="space-y-5"
-  >
-    <div class="flex flex-wrap items-center justify-between gap-4">
-      <div class="min-w-0 space-y-1">
-        <Label>{{ $t('bots.settings.desktopEnabled') }}</Label>
-        <p class="text-xs text-muted-foreground">
-          {{ $t('bots.settings.desktopEnabledDescription') }}
+  <div class="max-w-4xl mx-auto pb-6 space-y-5">
+    <!-- Sovereign Header -->
+    <header class="pb-4 border-b border-border/50 sticky top-0 bg-background/95 backdrop-blur z-30 pt-4 -mt-4 flex items-center justify-between gap-4">
+      <div class="space-y-1">
+        <h2 class="text-sm font-semibold text-foreground flex items-center gap-2">
+          <span class="relative flex items-center justify-center size-2.5">
+            <span
+              class="absolute inline-flex h-full w-full rounded-full opacity-20"
+              :class="statusColorClass"
+            />
+            <span
+              class="relative inline-flex rounded-full size-2"
+              :class="statusColorClass"
+            />
+          </span>
+          {{ $t('bots.desktop.title', 'Desktop Environment') }}
+        </h2>
+        <p class="text-[11px] leading-snug text-muted-foreground max-w-md">
+          {{ $t('bots.desktop.subtitle', 'Manage virtual display and interaction sessions.') }}
         </p>
       </div>
-      <div class="flex items-center gap-2">
+      <div class="flex shrink-0 flex-wrap justify-end gap-2">
         <Button
           variant="outline"
           size="sm"
-          @click="openRuntimeDialog"
-        >
-          <Info class="mr-2 size-4" />
-          {{ $t('bots.desktop.runtimeButton') }}
-        </Button>
-        <Switch
-          :model-value="settingsForm.display_enabled"
-          @update:model-value="(val) => settingsForm.display_enabled = !!val"
-        />
-        <Button
-          size="sm"
-          :disabled="!settingsChanged || isSaving"
-          @click="handleSaveSettings"
+          class="shadow-none"
+          :disabled="isRefreshing || isSessionsFetching || isDisplayFetching"
+          @click="refetchAll"
         >
           <Spinner
-            v-if="isSaving"
-            class="mr-2 size-4"
+            v-if="isRefreshing || isSessionsFetching || isDisplayFetching"
+            class="mr-1.5 size-3.5"
           />
-          {{ $t('bots.settings.save') }}
-        </Button>
-      </div>
-    </div>
-
-    <section class="space-y-3">
-      <div class="flex items-center justify-between gap-3">
-        <div>
-          <h3 class="text-sm font-medium">
-            {{ $t('bots.desktop.liveTitle') }}
-          </h3>
-          <p class="mt-1 text-xs text-muted-foreground">
-            {{ $t('bots.desktop.liveDescription') }}
-          </p>
-        </div>
-        <Button
-          variant="outline"
-          size="sm"
-          :disabled="isSessionsFetching"
-          @click="refetchSessions"
-        >
           <RefreshCw
-            class="mr-2 size-4"
-            :class="{ 'animate-spin': isSessionsFetching }"
+            v-else
+            class="mr-1.5 size-3.5 text-muted-foreground"
           />
           {{ $t('common.refresh') }}
         </Button>
       </div>
+    </header>
+
+    <!-- Telemetry Panel (Diagnostics) -->
+    <section class="rounded-md border border-border/60 bg-muted/5 overflow-hidden shadow-none flex flex-col">
+      <header class="px-4 py-3 border-b border-border/40 flex items-center justify-between bg-muted/10">
+        <h3 class="text-xs font-medium text-foreground flex items-center gap-2">
+          {{ $t('bots.desktop.runtimeTitle') }}
+        </h3>
+        <span
+          class="text-[10px]"
+          :class="isPreparing ? 'text-foreground' : 'text-muted-foreground/60'"
+        >
+          {{ runtimeSummary }}
+        </span>
+      </header>
+      
+      <div class="p-4 space-y-6">
+        <div
+          class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-[11px] tabular-nums transition-all duration-200 ease-in-out"
+          :class="{ 'opacity-40 grayscale-[0.4]': !info.enabled }"
+        >
+          <div
+            v-for="group in runtimeGroups"
+            :key="group.title"
+            class="space-y-4 p-4 rounded-md border border-border/40 bg-background/50 flex flex-col justify-between"
+          >
+            <div class="space-y-4">
+              <div class="text-[11px] font-semibold text-foreground/80 flex items-center gap-2 px-0.5">
+                <component
+                  :is="group.icon"
+                  class="size-3.5 text-muted-foreground/80"
+                />
+                {{ group.title }}
+              </div>
+              <div class="space-y-2.5">
+                <div
+                  v-for="item in group.items"
+                  :key="item.key"
+                  class="flex justify-between items-center border-b border-border/40 pb-2 last:border-0 last:pb-0"
+                >
+                  <span class="text-muted-foreground/70">{{ item.label }}</span>
+                  <div class="flex items-center gap-1.5">
+                    <span
+                      v-if="item.isBoolean"
+                      class="size-2 rounded-full shrink-0 transition-all duration-200 ease-in-out"
+                      :class="!info.enabled ? 'bg-muted-foreground/20' : (item.ok ? 'bg-success' : 'bg-destructive')"
+                    />
+                    <span
+                      v-if="!item.isBoolean"
+                      class="text-foreground font-medium text-right truncate max-w-[120px] sm:max-w-[80px]"
+                      :title="item.value"
+                    >{{ item.value }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
 
-      <div class="relative h-[min(62vh,620px)] min-h-[360px] overflow-hidden rounded-md border border-border bg-black">
-        <DisplayPane
-          v-if="props.botId"
-          :bot-id="props.botId"
-          tab-id="settings-desktop"
-          :title="$t('bots.desktop.liveTitle')"
-          active
-          :closable="false"
-          @snapshot="handleSnapshot"
+    <!-- VNC Viewport -->
+    <section class="relative group border border-border/60 bg-black rounded-md overflow-hidden aspect-[4/3] w-full flex flex-col shadow-none">
+      <!-- Hover Overlay Control -->
+      <div class="absolute top-0 inset-x-0 px-4 py-3 opacity-0 group-hover:opacity-100 z-20 backdrop-blur bg-background/95 border-b border-border/60 flex items-center justify-between">
+        <div class="space-y-0.5">
+          <Label class="text-xs font-medium text-foreground">{{ $t('bots.settings.desktopEnabled') }}</Label>
+          <p class="text-[10px] text-muted-foreground">
+            {{ $t('bots.settings.desktopEnabledDescription') }}
+          </p>
+        </div>
+        <Switch
+          :model-value="settingsForm.display_enabled"
+          :disabled="isSaving"
+          class="scale-90"
+          @update:model-value="(val) => handleToggleDisplay(!!val)"
         />
       </div>
+
+      <!-- Empty State / Preparing State -->
+      <div
+        v-if="!info.enabled"
+        class="absolute inset-0 z-10 flex flex-col items-center justify-center text-muted-foreground"
+      >
+        <MonitorOff class="size-8 mb-3 opacity-20" />
+        <span class="text-xs">{{ $t('bots.desktop.summaryDisabled') }}</span>
+      </div>
+      <div
+        v-else-if="!info.running"
+        class="absolute inset-0 z-10 flex flex-col items-center justify-center text-muted-foreground"
+      >
+        <Monitor class="size-8 mb-3 opacity-20" />
+        <span class="text-xs">{{ runtimeSummary }}</span>
+      </div>
+
+      <!-- Display Pane -->
+      <DisplayPane
+        v-if="props.botId && info.running"
+        :bot-id="props.botId"
+        tab-id="settings-desktop"
+        :title="$t('bots.desktop.liveTitle')"
+        active
+        :closable="false"
+        class="flex-1 w-full h-full z-0"
+        @snapshot="handleSnapshot"
+      />
     </section>
 
-    <section class="space-y-3">
-      <div>
-        <h3 class="text-sm font-medium">
+    <!-- Session Archive -->
+    <section class="space-y-4 pt-2">
+      <div class="flex items-center justify-between">
+        <h3 class="text-xs font-medium text-foreground flex items-center gap-2">
           {{ $t('bots.desktop.previewTitle') }}
         </h3>
-        <p class="mt-1 text-xs text-muted-foreground">
-          {{ $t('bots.desktop.previewDescription') }}
-        </p>
       </div>
 
       <div
-        v-if="previewItems.length"
-        class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3"
+        v-if="isSessionsFetching && !previewItems.length"
+        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"
+      >
+        <div
+          v-for="i in 4"
+          :key="i"
+          class="aspect-[4/3] bg-muted/10 rounded-md border border-border/60 animate-pulse"
+        />
+      </div>
+      
+      <div
+        v-else-if="previewItems.length"
+        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"
       >
         <div
           v-for="item in previewItems"
           :key="item.key"
-          class="group relative aspect-video overflow-hidden rounded-md border border-border bg-muted"
+          class="group flex flex-col rounded-md border border-border/60 bg-muted/5 overflow-hidden shadow-none hover:bg-muted/10 transition-colors"
         >
-          <img
-            v-if="item.snapshot"
-            :src="item.snapshot"
-            :alt="item.title"
-            class="size-full object-cover"
-          >
-          <div
-            v-else
-            class="flex size-full items-center justify-center text-xs text-muted-foreground"
-          >
-            {{ $t('bots.desktop.previewEmpty') }}
+          <!-- Snapshot Image -->
+          <div class="aspect-video bg-black overflow-hidden border-b border-border/60 relative">
+            <img
+              v-if="item.snapshot"
+              :src="item.snapshot"
+              :alt="item.title"
+              class="size-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-300"
+            >
+            <div
+              v-else
+              class="flex size-full items-center justify-center text-[10px] text-muted-foreground bg-muted/10"
+            >
+              {{ $t('bots.desktop.previewEmpty') }}
+            </div>
+            <!-- Session State Dot -->
+            <div class="absolute top-2 right-2 flex items-center justify-center size-2.5">
+              <span
+                class="absolute inline-flex h-full w-full rounded-full opacity-20"
+                :class="item.state === 'connected' ? 'bg-success' : 'bg-muted-foreground'"
+              />
+              <span
+                class="relative inline-flex size-2 rounded-full border border-black/10"
+                :class="item.state === 'connected' ? 'bg-success' : 'bg-muted-foreground'"
+              />
+            </div>
           </div>
-          <div class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-background/90 px-3 py-2 text-xs">
-            <span class="min-w-0 truncate font-mono">{{ item.title }}</span>
-            <Badge :variant="item.state === 'connected' ? 'secondary' : 'default'">
-              {{ item.state || $t('bots.desktop.unknown') }}
-            </Badge>
+          
+          <!-- Metadata & Danger Zone -->
+          <div class="p-3 space-y-3 flex-1 flex flex-col justify-between">
+            <div class="text-[10px] leading-tight text-foreground/80 break-all bg-muted/20 px-1.5 py-1 rounded border border-border/40">
+              <span class="text-muted-foreground/60 mr-1">ID:</span>{{ item.sessionId || item.key }}
+            </div>
+            
+            <div class="pt-2 border-t border-border/40">
+              <ConfirmPopover
+                v-if="item.sessionId"
+                :message="$t('bots.desktop.closeSessionConfirm', 'Terminate session?')"
+                :loading="closingSessionId === item.sessionId"
+                @confirm="handleCloseSession(item.sessionId)"
+              >
+                <template #trigger>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    class="h-7 px-2 text-[10px] text-muted-foreground hover:text-destructive hover:bg-destructive/10 shadow-none justify-center w-full font-medium"
+                  >
+                    <Spinner
+                      v-if="closingSessionId === item.sessionId"
+                      class="mr-1.5 size-3"
+                    />
+                    {{ $t('bots.desktop.closeSession', 'Terminate') }}
+                  </Button>
+                </template>
+              </ConfirmPopover>
+              <div
+                v-else
+                class="h-7 flex items-center justify-center text-[10px] text-muted-foreground/40 w-full uppercase tracking-wider"
+              >
+                Snapshot
+              </div>
+            </div>
           </div>
-          <button
-            v-if="item.sessionId"
-            type="button"
-            class="absolute right-2 top-2 inline-flex size-7 items-center justify-center rounded-md border border-border bg-background/90 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
-            :title="$t('bots.desktop.closeSession')"
-            :aria-label="$t('bots.desktop.closeSession')"
-            @click="handleCloseSession(item.sessionId)"
-          >
-            <Spinner
-              v-if="closingSessionId === item.sessionId"
-              class="size-4"
-            />
-            <X
-              v-else
-              class="size-4"
-            />
-          </button>
         </div>
       </div>
+      
       <div
         v-else
-        class="rounded-md border border-dashed border-border px-3 py-6 text-center text-xs text-muted-foreground"
+        class="rounded-md border border-dashed border-border/60 bg-muted/5 py-12 text-center text-[11px] text-muted-foreground/60 shadow-none"
       >
         {{ $t('bots.desktop.noSessions') }}
       </div>
     </section>
-
-    <Dialog v-model:open="runtimeDialogOpen">
-      <DialogContent class="sm:max-w-xl">
-        <DialogHeader>
-          <DialogTitle>{{ $t('bots.desktop.runtimeTitle') }}</DialogTitle>
-          <DialogDescription>
-            {{ runtimeSummary }}
-          </DialogDescription>
-        </DialogHeader>
-        <div class="grid gap-3 sm:grid-cols-2">
-          <div
-            v-for="item in runtimeItems"
-            :key="item.key"
-            class="flex items-center justify-between rounded-md border border-border px-3 py-2"
-          >
-            <span class="text-xs text-muted-foreground">{{ item.label }}</span>
-            <Badge :variant="item.ok ? 'secondary' : 'destructive'">
-              {{ item.value }}
-            </Badge>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  </SettingsShell>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -170,18 +257,12 @@ import { toast } from 'vue-sonner'
 import { storeToRefs } from 'pinia'
 import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
 import {
-  Badge,
   Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
   Label,
   Spinner,
   Switch,
 } from '@memohai/ui'
-import { Info, RefreshCw, X } from 'lucide-vue-next'
+import { RefreshCw, Monitor, MonitorOff, Layers, Box, Puzzle } from 'lucide-vue-next'
 import {
   deleteBotsByBotIdContainerDisplaySessionsBySessionId,
   getBotsByBotIdContainerDisplay,
@@ -192,8 +273,8 @@ import {
   type HandlersDisplayInfoResponse,
   type SettingsSettings,
 } from '@memohai/sdk'
-import SettingsShell from '@/components/settings-shell/index.vue'
 import { resolveApiErrorMessage } from '@/utils/api-error'
+import ConfirmPopover from '@/components/confirm-popover/index.vue'
 import DisplayPane from '@/pages/home/components/display-pane.vue'
 import { useDisplaySnapshotsStore } from '@/store/display-snapshots'
 
@@ -217,7 +298,7 @@ const { items: snapshotItems } = storeToRefs(displaySnapshots)
 const settingsForm = reactive({
   display_enabled: false,
 })
-const runtimeDialogOpen = ref(false)
+const isRefreshing = ref(false)
 const closingSessionId = ref('')
 const liveSessionId = ref('')
 
@@ -236,6 +317,7 @@ const { data: settings } = useQuery({
 const {
   data: displayInfo,
   refetch: refetchDisplay,
+  isFetching: isDisplayFetching,
 } = useQuery({
   key: () => ['bot-display-info', props.botId],
   query: async () => {
@@ -282,9 +364,18 @@ watch(settings, (value) => {
   settingsForm.display_enabled = value?.display_enabled ?? false
 }, { immediate: true })
 
-const settingsChanged = computed(() =>
-  settingsForm.display_enabled !== (settings.value?.display_enabled ?? false),
-)
+async function handleToggleDisplay(enabled: boolean) {
+  const previous = settingsForm.display_enabled
+  settingsForm.display_enabled = enabled
+  try {
+    await updateSettings({ display_enabled: enabled })
+    await refetchDisplay()
+    toast.success(enabled ? t('bots.desktop.desktopEnabledSuccess') : t('bots.desktop.desktopDisabledSuccess'))
+  } catch (error) {
+    settingsForm.display_enabled = previous
+    toast.error(resolveApiErrorMessage(error, t('common.saveFailed')))
+  }
+}
 
 const sessions = computed<DisplaySessionInfo[]>(() => sessionData.value?.items ?? [])
 const info = computed<HandlersDisplayInfoResponse>(() => displayInfo.value ?? {})
@@ -296,19 +387,42 @@ const runtimeSummary = computed(() => {
   return t('bots.desktop.summaryPreparing')
 })
 
-const runtimeItems = computed(() => [
-  statusItem('enabled', t('bots.desktop.enabled'), info.value.enabled),
-  statusItem('runtime', t('bots.desktop.runtime'), info.value.available),
-  statusItem('vnc', t('bots.desktop.vnc'), info.value.running),
-  statusItem('desktop', t('bots.desktop.desktop'), info.value.desktop_available),
-  statusItem('browser', t('bots.desktop.browser'), info.value.browser_available),
-  statusItem('toolkit', t('bots.desktop.toolkit'), info.value.toolkit_available),
+const isPreparing = computed(() => {
+  return info.value.enabled && (!info.value.available || !info.value.running)
+})
+
+const statusColorClass = computed(() => {
+  if (info.value.running) return 'bg-success'
+  if (info.value.enabled) return 'bg-warning'
+  return 'bg-muted-foreground'
+})
+
+const runtimeGroups = computed(() => [
   {
-    key: 'system',
-    label: t('bots.desktop.system'),
-    ok: info.value.prepare_supported !== false,
-    value: info.value.prepare_system || '-',
+    title: t('bots.desktop.groupInfrastructure'),
+    icon: Layers,
+    items: [
+      { key: 'enabled', label: t('bots.desktop.enabled'), isBoolean: true, ok: info.value.enabled === true, value: info.value.enabled ? t('common.yes') : t('common.no') },
+      { key: 'runtime', label: t('bots.desktop.runtime'), isBoolean: true, ok: info.value.available === true, value: info.value.available ? t('bots.desktop.statusReady') : t('bots.desktop.statusNotReady') },
+      { key: 'system', label: t('bots.desktop.system'), isBoolean: false, ok: info.value.prepare_supported !== false, value: info.value.prepare_system || '-' },
+    ]
   },
+  {
+    title: t('bots.desktop.groupEnvironment'),
+    icon: Box,
+    items: [
+      { key: 'desktop', label: t('bots.desktop.desktop'), isBoolean: true, ok: info.value.desktop_available === true, value: info.value.desktop_available ? t('bots.desktop.statusReady') : t('bots.desktop.statusNotReady') },
+      { key: 'vnc', label: t('bots.desktop.vnc'), isBoolean: true, ok: info.value.running === true, value: info.value.running ? t('bots.desktop.statusRunning') : t('bots.desktop.statusStopped') },
+    ]
+  },
+  {
+    title: t('bots.desktop.groupApplication'),
+    icon: Puzzle,
+    items: [
+      { key: 'browser', label: t('bots.desktop.browser'), isBoolean: true, ok: info.value.browser_available === true, value: info.value.browser_available ? t('bots.desktop.statusReady') : t('bots.desktop.statusNotReady') },
+      { key: 'toolkit', label: t('bots.desktop.toolkit'), isBoolean: true, ok: info.value.toolkit_available === true, value: info.value.toolkit_available ? t('bots.desktop.statusReady') : t('bots.desktop.statusNotReady') },
+    ]
+  }
 ])
 
 const previewItems = computed<PreviewItem[]>(() => {
@@ -320,7 +434,7 @@ const previewItems = computed<PreviewItem[]>(() => {
     items.push({
       key: session.id,
       sessionId: session.id,
-      title: shortSessionID(session.id),
+      title: session.id,
       state: session.state,
       snapshot: displaySnapshots.find(props.botId, session.id)?.dataUrl,
     })
@@ -333,38 +447,19 @@ const previewItems = computed<PreviewItem[]>(() => {
     items.push({
       key: id,
       sessionId: snapshot.sessionId,
-      title: shortSessionID(id),
+      title: id,
       snapshot: snapshot.dataUrl,
     })
   }
   return items
 })
 
-function statusItem(key: string, label: string, value: boolean | undefined) {
-  return {
-    key,
-    label,
-    ok: value === true,
-    value: value ? t('common.yes') : t('common.no'),
-  }
-}
-
-function shortSessionID(value: string) {
-  return value.length > 12 ? value.slice(0, 8) : value
-}
-
-async function openRuntimeDialog() {
-  runtimeDialogOpen.value = true
-  await refetchDisplay()
-}
-
-async function handleSaveSettings() {
+async function refetchAll() {
+  isRefreshing.value = true
   try {
-    await updateSettings({ display_enabled: settingsForm.display_enabled })
-    await refetchDisplay()
-    toast.success(t('bots.settings.saveSuccess'))
-  } catch (error) {
-    toast.error(resolveApiErrorMessage(error, t('common.saveFailed')))
+    await Promise.all([refetchDisplay(), refetchSessions()])
+  } finally {
+    isRefreshing.value = false
   }
 }
 
diff --git a/apps/web/src/pages/bots/components/bot-email.vue b/apps/web/src/pages/bots/components/bot-email.vue
index 570fea9e0..0aa6dcb5d 100644
--- a/apps/web/src/pages/bots/components/bot-email.vue
+++ b/apps/web/src/pages/bots/components/bot-email.vue
@@ -1,195 +1,207 @@
 <template>
-  <div class="max-w-4xl mx-auto space-y-5">
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-3">
-      <div class="space-y-1 min-w-0">
-        <h3 class="text-sm font-semibold">
+  <div class="max-w-2xl mx-auto pb-6 space-y-4">
+    <!-- Top Action Bar -->
+    <div class="flex items-center justify-between pb-4 border-b border-border/50">
+      <div class="space-y-1">
+        <h3 class="text-sm font-semibold text-foreground">
           {{ $t('bots.email.title') }}
         </h3>
-        <p class="text-xs text-muted-foreground">
+        <p class="text-[11px] text-muted-foreground">
           {{ $t('bots.email.subtitle') }}
         </p>
       </div>
     </div>
 
-    <!-- Bindings section -->
-    <div class="space-y-3">
-      <div class="flex items-center justify-between">
-        <h4 class="text-xs font-medium">
-          {{ $t('bots.email.bindings') }}
-        </h4>
-        <Popover>
-          <PopoverTrigger as-child>
-            <Button
-              size="sm"
-              :disabled="!unboundProviders.length"
+    <!-- Standardized Card Container -->
+    <div class="space-y-4">
+      <!-- Bindings section -->
+      <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+        <div class="flex items-center justify-between space-y-0.5">
+          <h4 class="text-xs font-medium text-foreground">
+            {{ $t('bots.email.bindings') }}
+          </h4>
+          <Popover>
+            <PopoverTrigger as-child>
+              <Button
+                size="sm"
+                :disabled="!unboundProviders.length"
+                class="h-8 text-xs shadow-none"
+              >
+                <Plus class="mr-1.5 size-3.5" />
+                {{ $t('bots.email.addBinding') }}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              class="w-56 p-1"
+              align="end"
             >
-              <Plus class="mr-1.5" />
-              {{ $t('bots.email.addBinding') }}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent
-            class="w-56 p-1"
-            align="end"
+              <button
+                v-for="p in unboundProviders"
+                :key="p.id"
+                type="button"
+                class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs transition-colors hover:bg-accent"
+                :disabled="addingBinding"
+                @click="handleAddBinding(p)"
+              >
+                <Spinner
+                  v-if="addingProviderId === p.id"
+                  class="size-3"
+                />
+                {{ p.name }}
+                <span class="text-xs text-muted-foreground ml-auto">{{ p.provider }}</span>
+              </button>
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        <div class="pt-1">
+          <div
+            v-if="bindingsLoading"
+            class="flex items-center justify-center text-xs text-muted-foreground py-4 border rounded-md border-dashed"
           >
-            <button
-              v-for="p in unboundProviders"
-              :key="p.id"
-              type="button"
-              class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs transition-colors hover:bg-accent"
-              :disabled="addingBinding"
-              @click="handleAddBinding(p)"
-            >
-              <Spinner
-                v-if="addingProviderId === p.id"
-                class="size-3"
-              />
-              {{ p.name }}
-              <span class="text-xs text-muted-foreground ml-auto">{{ p.provider }}</span>
-            </button>
-          </PopoverContent>
-        </Popover>
-      </div>
-      <div
-        v-if="bindingsLoading"
-        class="flex items-center gap-2 text-xs text-muted-foreground p-4"
-      >
-        <Spinner />
-        <span>{{ $t('common.loading') }}</span>
-      </div>
+            <Spinner class="inline-block mr-2 align-text-bottom size-3" />
+            <span>{{ $t('common.loading') }}</span>
+          </div>
 
-      <div
-        v-else-if="!bindings?.length"
-        class="rounded-md border p-4"
-      >
-        <p class="text-xs text-muted-foreground">
-          {{ $t('bots.email.noBindings') }}
-        </p>
-      </div>
+          <div
+            v-else-if="!bindings?.length"
+            class="text-xs text-muted-foreground py-4 text-center border rounded-md border-dashed"
+          >
+            {{ $t('bots.email.noBindings') }}
+          </div>
 
-      <div
-        v-else
-        class="space-y-2"
-      >
-        <div
-          v-for="binding in bindings"
-          :key="binding.id"
-          class="rounded-md border p-4"
-        >
-          <div class="flex items-center justify-between">
-            <div class="min-w-0">
-              <p class="font-medium text-xs">
-                {{ providerNameMap[binding.email_provider_id!] || binding.email_provider_id }}
-              </p>
-              <p
-                v-if="binding.email_address"
-                class="text-xs text-muted-foreground mt-0.5"
-              >
-                {{ binding.email_address }}
-              </p>
-            </div>
-            <ConfirmPopover
-              :message="$t('bots.email.unbindConfirm')"
-              :loading="deletingId === binding.id"
-              @confirm="handleDeleteBinding(binding.id!)"
+          <div
+            v-else
+            class="space-y-2"
+          >
+            <div
+              v-for="binding in bindings"
+              :key="binding.id"
+              class="rounded-md border p-3 bg-muted/20 shadow-none"
             >
-              <template #trigger>
-                <Button
-                  variant="destructive"
-                  size="sm"
+              <div class="flex items-center justify-between">
+                <div class="min-w-0">
+                  <p class="font-medium text-xs text-foreground">
+                    {{ providerNameMap[binding.email_provider_id!] || binding.email_provider_id }}
+                  </p>
+                  <p
+                    v-if="binding.email_address"
+                    class="text-[11px] text-muted-foreground mt-0.5"
+                  >
+                    {{ binding.email_address }}
+                  </p>
+                </div>
+                <ConfirmPopover
+                  :message="$t('bots.email.unbindConfirm')"
+                  :loading="deletingId === binding.id"
+                  @confirm="handleDeleteBinding(binding.id!)"
                 >
-                  {{ $t('bots.email.unbind') }}
-                </Button>
-              </template>
-            </ConfirmPopover>
-          </div>
-          <Separator class="my-3" />
-          <div class="flex gap-6 text-xs">
-            <label class="flex items-center gap-2 cursor-pointer">
-              <Switch
-                :model-value="binding.can_read"
-                @update:model-value="(v) => handleTogglePerm(binding, 'can_read', !!v)"
-              />
-              <span>{{ $t('bots.email.canRead') }}</span>
-            </label>
-            <label class="flex items-center gap-2 cursor-pointer">
-              <Switch
-                :model-value="binding.can_write"
-                @update:model-value="(v) => handleTogglePerm(binding, 'can_write', !!v)"
-              />
-              <span>{{ $t('bots.email.canWrite') }}</span>
-            </label>
+                  <template #trigger>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      class="h-7 px-3 text-xs shadow-none"
+                    >
+                      {{ $t('bots.email.unbind') }}
+                    </Button>
+                  </template>
+                </ConfirmPopover>
+              </div>
+              <Separator class="my-3" />
+              <div class="flex gap-6 text-xs">
+                <label class="flex items-center gap-2 cursor-pointer text-foreground">
+                  <Switch
+                    :model-value="binding.can_read"
+                    @update:model-value="(v) => handleTogglePerm(binding, 'can_read', !!v)"
+                  />
+                  <span>{{ $t('bots.email.canRead') }}</span>
+                </label>
+                <label class="flex items-center gap-2 cursor-pointer text-foreground">
+                  <Switch
+                    :model-value="binding.can_write"
+                    @update:model-value="(v) => handleTogglePerm(binding, 'can_write', !!v)"
+                  />
+                  <span>{{ $t('bots.email.canWrite') }}</span>
+                </label>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <Separator />
+      <!-- Outbox (audit) -->
+      <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+        <div class="space-y-0.5">
+          <h4 class="text-xs font-medium text-foreground">
+            {{ $t('bots.email.outbox') }}
+          </h4>
+        </div>
 
-    <!-- Outbox (audit) -->
-    <div class="space-y-3">
-      <h4 class="text-xs font-medium">
-        {{ $t('bots.email.outbox') }}
-      </h4>
-      <div
-        v-if="outboxLoading"
-        class="flex items-center gap-2 text-xs text-muted-foreground p-4"
-      >
-        <Spinner />
-        <span>{{ $t('common.loading') }}</span>
-      </div>
-      <div
-        v-else-if="!outboxItems?.length"
-        class="rounded-md border p-4"
-      >
-        <p class="text-xs text-muted-foreground">
-          {{ $t('bots.email.noEmails') }}
-        </p>
-      </div>
-      <div
-        v-else
-        class="overflow-x-auto rounded-md border"
-      >
-        <table class="w-full text-xs">
-          <thead class="bg-muted/50 text-left">
-            <tr>
-              <th class="px-3 py-2 font-medium">
-                {{ $t('bots.email.to') }}
-              </th>
-              <th class="px-3 py-2 font-medium">
-                {{ $t('bots.email.subject') }}
-              </th>
-              <th class="px-3 py-2 font-medium">
-                {{ $t('bots.email.status') }}
-              </th>
-              <th class="px-3 py-2 font-medium">
-                {{ $t('bots.email.sentAt') }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="item in outboxItems"
-              :key="item.id"
-              class="border-t"
-            >
-              <td class="px-3 py-2 text-xs">
-                {{ Array.isArray(item.to) ? item.to.join(', ') : item.to }}
-              </td>
-              <td class="px-3 py-2">
-                {{ item.subject }}
-              </td>
-              <td class="px-3 py-2">
-                <Badge :variant="item.status === 'failed' ? 'destructive' : 'secondary'">
-                  {{ item.status }}
-                </Badge>
-              </td>
-              <td class="px-3 py-2 text-xs text-muted-foreground whitespace-nowrap">
-                {{ formatDate(item.sent_at) }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="pt-1">
+          <div
+            v-if="outboxLoading"
+            class="flex items-center justify-center text-xs text-muted-foreground py-4 border rounded-md border-dashed"
+          >
+            <Spinner class="inline-block mr-2 align-text-bottom size-3" />
+            <span>{{ $t('common.loading') }}</span>
+          </div>
+          
+          <div
+            v-else-if="!outboxItems?.length"
+            class="text-xs text-muted-foreground py-4 text-center border rounded-md border-dashed"
+          >
+            {{ $t('bots.email.noEmails') }}
+          </div>
+
+          <div
+            v-else
+            class="overflow-x-auto rounded-md border shadow-none"
+          >
+            <table class="w-full text-xs">
+              <thead class="bg-muted/30 text-left">
+                <tr>
+                  <th class="px-3 py-2 font-medium text-foreground">
+                    {{ $t('bots.email.to') }}
+                  </th>
+                  <th class="px-3 py-2 font-medium text-foreground">
+                    {{ $t('bots.email.subject') }}
+                  </th>
+                  <th class="px-3 py-2 font-medium text-foreground">
+                    {{ $t('bots.email.status') }}
+                  </th>
+                  <th class="px-3 py-2 font-medium text-foreground">
+                    {{ $t('bots.email.sentAt') }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in outboxItems"
+                  :key="item.id"
+                  class="border-t"
+                >
+                  <td class="px-3 py-2 text-[11px] text-foreground">
+                    {{ Array.isArray(item.to) ? item.to.join(', ') : item.to }}
+                  </td>
+                  <td class="px-3 py-2 text-[11px] text-foreground">
+                    {{ item.subject }}
+                  </td>
+                  <td class="px-3 py-2">
+                    <Badge
+                      :variant="item.status === 'failed' ? 'destructive' : 'secondary'"
+                      class="text-[10px]"
+                    >
+                      {{ item.status }}
+                    </Badge>
+                  </td>
+                  <td class="px-3 py-2 text-[11px] text-muted-foreground whitespace-nowrap">
+                    {{ formatDate(item.sent_at) }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/apps/web/src/pages/bots/components/bot-heartbeat.vue b/apps/web/src/pages/bots/components/bot-heartbeat.vue
index fe29d2075..b1982220e 100644
--- a/apps/web/src/pages/bots/components/bot-heartbeat.vue
+++ b/apps/web/src/pages/bots/components/bot-heartbeat.vue
@@ -1,76 +1,19 @@
 <template>
-  <SettingsShell
-    width="wide"
-    class="space-y-6"
-  >
-    <!-- Settings -->
-    <div class="space-y-4">
-      <div class="flex items-center justify-between">
-        <div>
-          <Label>{{ $t('bots.settings.heartbeatEnabled') }}</Label>
-          <p class="text-xs text-muted-foreground mt-0.5">
-            {{ $t('bots.settings.heartbeatDescription') }}
-          </p>
-        </div>
-        <Switch
-          :model-value="settingsForm.heartbeat_enabled"
-          @update:model-value="(val) => settingsForm.heartbeat_enabled = !!val"
-        />
-      </div>
-      <div
-        v-if="settingsForm.heartbeat_enabled"
-        class="grid gap-4 md:grid-cols-2"
-      >
-        <div class="space-y-2">
-          <Label>{{ $t('bots.settings.heartbeatInterval') }}</Label>
-          <Input
-            v-model.number="settingsForm.heartbeat_interval"
-            type="number"
-            :min="1"
-            :placeholder="'30'"
-            :aria-label="$t('bots.settings.heartbeatInterval')"
-          />
-        </div>
-        <div class="space-y-2 md:col-span-2">
-          <Label>{{ $t('bots.settings.heartbeatModel') }}</Label>
-          <p class="text-xs text-muted-foreground mt-0.5">
-            {{ $t('bots.settings.heartbeatModelDescription') }}
-          </p>
-          <ModelSelect
-            v-model="settingsForm.heartbeat_model_id"
-            :models="models"
-            :providers="providers"
-            model-type="chat"
-            :placeholder="$t('bots.settings.heartbeatModelPlaceholder')"
-          />
-        </div>
-      </div>
-      <div class="flex justify-end">
-        <Button
-          size="sm"
-          :disabled="!settingsChanged || isSaving"
-          @click="handleSaveSettings"
-        >
-          <Spinner
-            v-if="isSaving"
-            class="mr-2 size-4"
-          />
-          {{ $t('bots.settings.save') }}
-        </Button>
+  <div class="max-w-2xl mx-auto pb-6 space-y-5">
+    <!-- Sovereign Header -->
+    <header class="pb-4 border-b border-border/50 sticky top-0 bg-background/95 backdrop-blur z-30 pt-4 -mt-4 flex items-center justify-between">
+      <div class="space-y-1">
+        <h2 class="text-sm font-semibold text-foreground">
+          {{ $t('bots.heartbeat.title') }}
+        </h2>
+        <p class="text-[11px] leading-snug text-muted-foreground max-w-md">
+          {{ $t('bots.settings.heartbeatDescription') }}
+        </p>
       </div>
-    </div>
-
-    <Separator />
-
-    <!-- Logs header -->
-    <div class="flex items-center justify-between">
-      <h3 class="text-sm font-medium">
-        {{ $t('bots.heartbeat.title') }}
-      </h3>
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-2 shrink-0">
         <NativeSelect
           v-model="statusFilter"
-          class="h-9 w-28 text-xs"
+          class="h-8 w-24 text-[11px] shadow-none bg-background/50 border-border/50"
         >
           <option value="">
             {{ $t('bots.heartbeat.filterAll') }}
@@ -85,6 +28,7 @@
             {{ $t('bots.heartbeat.statusError') }}
           </option>
         </NativeSelect>
+
         <ConfirmPopover
           v-if="logs.length > 0"
           :message="$t('bots.heartbeat.clearConfirm')"
@@ -94,132 +38,228 @@
         >
           <template #trigger>
             <Button
-              variant="outline"
+              variant="ghost"
               size="sm"
+              class="h-8 text-xs font-medium px-3 shadow-none text-muted-foreground hover:text-destructive"
               :disabled="isClearing"
             >
+              <Trash2 class="mr-2 size-3.5" />
               {{ $t('bots.heartbeat.clearLogs') }}
             </Button>
           </template>
         </ConfirmPopover>
+
         <Button
           variant="outline"
           size="sm"
+          class="h-8 text-xs font-medium px-3 shadow-none border-border/50 bg-background/60 backdrop-blur-sm"
           :disabled="isLoading"
           @click="handleRefresh"
         >
-          <Spinner
-            v-if="isLoading"
-            class="mr-2 size-4"
+          <RotateCw
+            class="mr-2 size-3.5"
+            :class="{ 'animate-spin': isLoading }"
           />
           {{ $t('common.refresh') }}
         </Button>
       </div>
-    </div>
+    </header>
 
-    <!-- Loading -->
-    <div
-      v-if="isLoading && logs.length === 0"
-      class="flex items-center justify-center py-8 text-xs text-muted-foreground"
-    >
-      <Spinner class="mr-2" />
-      {{ $t('common.loading') }}
-    </div>
-
-    <!-- Empty -->
-    <div
-      v-else-if="!isLoading && filteredLogs.length === 0"
-      class="flex flex-col items-center justify-center py-12 text-center"
-    >
-      <div class="rounded-full bg-muted p-3 mb-4">
-        <HeartPulse
-          class="size-6 text-muted-foreground"
+    <!-- Configuration Panel (Compact) -->
+    <section class="rounded-md border border-border/60 bg-background p-4 shadow-sm space-y-4">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2.5">
+          <div class="p-1.5 rounded bg-muted/30">
+            <HeartPulse class="size-4 text-muted-foreground" />
+          </div>
+          <div>
+            <h3 class="text-xs font-semibold text-foreground">
+              {{ $t('bots.settings.heartbeatEnabled') }}
+            </h3>
+            <p class="text-[10px] text-muted-foreground">
+              {{ $t('bots.settings.heartbeatModelDescription') }}
+            </p>
+          </div>
+        </div>
+        <Switch
+          :model-value="settingsForm.heartbeat_enabled"
+          @update:model-value="(val) => settingsForm.heartbeat_enabled = !!val"
         />
       </div>
-      <p class="text-xs text-muted-foreground">
-        {{ $t('bots.heartbeat.empty') }}
-      </p>
-    </div>
 
-    <!-- Logs -->
-    <template v-else>
-      <div class="rounded-md border">
-        <table class="w-full text-xs">
-          <thead>
-            <tr class="border-b bg-muted/50">
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.heartbeat.status') }}
-              </th>
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.heartbeat.time') }}
-              </th>
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.heartbeat.duration') }}
-              </th>
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.heartbeat.result') }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="log in filteredLogs"
-              :key="log.id"
-              class="border-b last:border-0 hover:bg-muted/30 cursor-pointer"
-              @click="toggleExpand(log.id)"
-            >
-              <td class="px-4 py-2">
-                <Badge :variant="statusVariant(log.status)">
-                  {{ statusLabel(log.status) }}
-                </Badge>
-              </td>
-              <td class="px-4 py-2 text-muted-foreground">
-                {{ formatDateTime(log.started_at) }}
-              </td>
-              <td class="px-4 py-2 text-muted-foreground">
-                {{ formatDuration(log.started_at, log.completed_at) }}
-              </td>
-              <td class="px-4 py-2">
-                <span
-                  v-if="log.status === 'error'"
-                  class="text-destructive"
-                >{{ log.error_message || $t('bots.heartbeat.noResult') }}</span>
-                <span v-else>{{ truncateText(log.result_text) || $t('bots.heartbeat.noResult') }}</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+      <Transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="transform -translate-y-2 opacity-0"
+        enter-to-class="transform translate-y-0 opacity-100"
+        leave-active-class="transition duration-150 ease-in"
+        leave-from-class="transform translate-y-0 opacity-100"
+        leave-to-class="transform -translate-y-2 opacity-0"
+      >
+        <div
+          v-if="settingsForm.heartbeat_enabled"
+          class="grid gap-4 md:grid-cols-3 pt-2 border-t border-border/40"
+        >
+          <div class="space-y-1.5">
+            <Label class="text-[11px] font-medium text-foreground">{{ $t('bots.settings.heartbeatInterval') }}</Label>
+            <Input
+              v-model.number="settingsForm.heartbeat_interval"
+              type="number"
+              :min="1"
+              class="h-8 text-[11px] font-mono bg-muted/5 border-border/50 shadow-none"
+              :placeholder="'30'"
+            />
+          </div>
+          <div class="space-y-1.5 md:col-span-2">
+            <Label class="text-[11px] font-medium text-foreground">{{ $t('bots.settings.heartbeatModel') }}</Label>
+            <ModelSelect
+              v-model="settingsForm.heartbeat_model_id"
+              :models="models"
+              :providers="providers"
+              model-type="chat"
+              class="h-8 text-[11px]"
+            />
+          </div>
+        </div>
+      </Transition>
+
+      <div class="flex justify-end pt-1">
+        <Button
+          size="sm"
+          class="h-8 text-xs font-medium px-4 shadow-none bg-foreground text-background hover:bg-foreground/90"
+          :disabled="!settingsChanged || isSaving"
+          @click="handleSaveSettings"
+        >
+          <Spinner
+            v-if="isSaving"
+            class="mr-2 size-3.5"
+          />
+          {{ $t('bots.settings.save') }}
+        </Button>
       </div>
+    </section>
 
-      <!-- Expanded detail -->
+    <!-- Logs List -->
+    <div class="space-y-3">
+      <!-- Loading State -->
       <div
-        v-for="log in filteredLogs.filter(l => l.id && expandedIds.has(l.id))"
-        :key="'detail-' + log.id"
-        class="rounded-md border bg-muted/20 p-4 text-xs whitespace-pre-wrap wrap-break-word"
+        v-if="isLoading && logs.length === 0"
+        class="flex items-center justify-center py-12 text-xs text-muted-foreground"
       >
-        <p v-if="log.result_text">
-          {{ log.result_text }}
-        </p>
-        <p
-          v-if="log.error_message"
-          class="text-destructive mt-2"
-        >
-          {{ log.error_message }}
-        </p>
-        <p
-          v-if="log.usage"
-          class="text-muted-foreground mt-2 text-xs"
+        <Spinner class="mr-2 size-4" />
+        {{ $t('common.loading') }}
+      </div>
+
+      <!-- Empty State -->
+      <div
+        v-else-if="!isLoading && filteredLogs.length === 0"
+        class="flex flex-col items-center justify-center py-16 text-center border border-dashed border-border/50 bg-muted/5 rounded-lg relative overflow-hidden"
+      >
+        <!-- Blueprint Grid Background -->
+        <div class="absolute inset-0 opacity-[0.03] pointer-events-none bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
+        
+        <div class="relative z-10 flex flex-col items-center">
+          <div class="rounded-md bg-background border border-border/50 p-2.5 mb-4 shadow-sm">
+            <Zap class="size-5 text-muted-foreground" />
+          </div>
+          <h3 class="text-sm font-medium text-foreground">
+            {{ $t('bots.heartbeat.empty') }}
+          </h3>
+          <p class="text-[11px] text-muted-foreground mt-1.5 max-w-sm">
+            {{ statusFilter ? $t('bots.heartbeat.filterEmpty') : $t('bots.heartbeat.description') }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Log Cards -->
+      <div
+        v-else
+        class="space-y-2"
+      >
+        <div
+          v-for="log in filteredLogs"
+          :key="log.id"
+          class="group rounded-md border border-border/60 bg-background hover:bg-accent/30 transition-colors duration-75 p-3 flex flex-col gap-2 relative cursor-pointer"
+          @click="toggleExpand(log.id)"
         >
-          Usage: {{ JSON.stringify(log.usage) }}
-        </p>
+          <!-- Card Header -->
+          <div class="flex items-center justify-between gap-3">
+            <div class="flex items-center gap-2.5 min-w-0">
+              <div 
+                class="size-1.5 rounded-full shrink-0"
+                :class="statusColorClass(log.status)"
+              />
+              <span class="font-mono text-[11px] font-semibold text-foreground uppercase tracking-tight">
+                {{ statusLabel(log.status) }}
+              </span>
+              <span class="font-mono text-[10px] text-muted-foreground/60">
+                {{ formatDateTime(log.started_at) }}
+              </span>
+            </div>
+
+            <div class="flex items-center gap-3 shrink-0">
+              <span class="font-mono text-[10px] text-muted-foreground/80 px-1.5 py-0.5 rounded bg-muted/40">
+                {{ formatDuration(log.started_at, log.completed_at) }}
+              </span>
+              <ChevronDown 
+                class="size-3 text-muted-foreground/40 transition-transform duration-200"
+                :class="{ 'rotate-180': log.id && expandedIds.has(log.id) }"
+              />
+            </div>
+          </div>
+
+          <!-- Card Body / Result Summary -->
+          <div 
+            v-if="!expandedIds.has(log.id)"
+            class="pl-4"
+          >
+            <p 
+              class="text-[11px] leading-snug line-clamp-1 break-words"
+              :class="log.status === 'error' ? 'text-destructive/80' : 'text-muted-foreground'"
+            >
+              {{ log.status === 'error' ? (log.error_message || $t('bots.heartbeat.noResult')) : (truncateText(log.result_text) || $t('bots.heartbeat.noResult')) }}
+            </p>
+          </div>
+
+          <!-- Expanded Detail Section -->
+          <div
+            v-if="log.id && expandedIds.has(log.id)"
+            class="pl-4 pt-1 space-y-3"
+          >
+            <div class="p-3 rounded-md bg-muted/20 border border-border/40 overflow-hidden shadow-inner">
+              <pre class="font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-all text-foreground/90">{{ log.result_text || $t('bots.heartbeat.noResult') }}</pre>
+            </div>
+            
+            <div 
+              v-if="log.error_message"
+              class="p-3 rounded-md bg-destructive/5 border border-destructive/20"
+            >
+              <p class="font-mono text-[11px] text-destructive leading-normal">
+                {{ log.error_message }}
+              </p>
+            </div>
+
+            <div 
+              v-if="log.usage"
+              class="flex flex-wrap gap-2 pt-1"
+            >
+              <div 
+                v-for="(val, key) in (log.usage as any)"
+                :key="key"
+                class="px-1.5 py-0.5 rounded border border-border/40 bg-muted/10 font-mono text-[9px] text-muted-foreground"
+              >
+                {{ key }}: {{ val }}
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- Pagination -->
       <div
         v-if="totalPages > 1"
-        class="flex items-center justify-between pt-2"
+        class="flex items-center justify-between pt-4 border-t border-border/40"
       >
-        <span class="text-xs text-muted-foreground whitespace-nowrap">
+        <span class="font-mono text-[10px] text-muted-foreground whitespace-nowrap">
           {{ paginationSummary }}
         </span>
         <Pagination
@@ -231,8 +271,8 @@
           @update:page="currentPage = $event"
         >
           <PaginationContent v-slot="{ items }">
-            <PaginationFirst />
-            <PaginationPrevious />
+            <PaginationFirst class="h-8 w-8" />
+            <PaginationPrevious class="h-8 w-8" />
             <template
               v-for="(item, index) in items"
               :key="index"
@@ -245,30 +285,30 @@
                 v-else
                 :value="item.value"
                 :is-active="item.value === currentPage"
+                class="h-8 w-8 text-[11px]"
               />
             </template>
-            <PaginationNext />
-            <PaginationLast />
+            <PaginationNext class="h-8 w-8" />
+            <PaginationLast class="h-8 w-8" />
           </PaginationContent>
         </Pagination>
       </div>
-    </template>
-  </SettingsShell>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { HeartPulse } from 'lucide-vue-next'
+import { HeartPulse, Trash2, RotateCw, Zap, ChevronDown } from 'lucide-vue-next'
 import { ref, reactive, computed, watch, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
 import {
-  Button, Badge, Spinner, NativeSelect, Label, Switch, Input, Separator,
+  Button, Spinner, NativeSelect, Label, Switch, Input,
   Pagination, PaginationContent, PaginationEllipsis,
   PaginationFirst, PaginationItem, PaginationLast,
   PaginationNext, PaginationPrevious,
 } from '@memohai/ui'
 import ConfirmPopover from '@/components/confirm-popover/index.vue'
-import SettingsShell from '@/components/settings-shell/index.vue'
 import ModelSelect from './model-select.vue'
 import {
   getBotsByBotIdSettings, putBotsByBotIdSettings,
@@ -391,10 +431,10 @@ watch(currentPage, () => {
   fetchLogs()
 })
 
-function statusVariant(status: string | undefined) {
-  if (status === 'ok') return 'secondary' as const
-  if (status === 'alert') return 'default' as const
-  return 'destructive' as const
+function statusColorClass(status: string | undefined) {
+  if (status === 'ok') return 'bg-green-500'
+  if (status === 'alert') return 'bg-yellow-500'
+  return 'bg-destructive shadow-[0_0_8px_rgba(239,68,68,0.4)]'
 }
 
 function statusLabel(status: string | undefined) {
@@ -410,7 +450,7 @@ function formatDuration(startedAt: string | undefined, completedAt: string | nul
   return `${(ms / 1000).toFixed(1)}s`
 }
 
-function truncateText(text: string | undefined, maxLen = 80) {
+function truncateText(text: string | undefined, maxLen = 120) {
   if (!text) return ''
   if (text === 'HEARTBEAT_OK') return 'HEARTBEAT_OK'
   return text.length > maxLen ? text.slice(0, maxLen) + '…' : text
@@ -472,3 +512,4 @@ onMounted(() => {
   fetchLogs()
 })
 </script>
+
diff --git a/apps/web/src/pages/bots/components/bot-mcp.vue b/apps/web/src/pages/bots/components/bot-mcp.vue
index 0a596f327..910d631f8 100644
--- a/apps/web/src/pages/bots/components/bot-mcp.vue
+++ b/apps/web/src/pages/bots/components/bot-mcp.vue
@@ -1,290 +1,277 @@
 <template>
-  <MasterDetailSidebarLayout>
-    <template #sidebar-header>
-      <InputGroup class="shadow-none">
-        <InputGroupInput
-          v-model="searchText"
-          :placeholder="$t('mcp.searchPlaceholder')"
-          aria-label="Search MCP servers"
-        />
-        <InputGroupAddon align="inline-end">
-          <InputGroupButton
-            type="button"
-            size="icon-xs"
-            aria-label="Search"
-          >
-            <Search />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </template>
-
-    <template #sidebar-content>
+  <div
+    class="flex gap-6 h-full absolute inset-0 px-4 pt-4 pb-6 w-full max-w-4xl mx-auto font-sans"
+    :style="{ fontFamily: 'system-ui, -apple-system, sans-serif' }"
+  >
+    <!-- Left: Server List (L3 Rail) -->
+    <div 
+      class="shrink-0 flex flex-col border border-border rounded-lg overflow-hidden max-h-full bg-background shadow-sm transition-all duration-300"
+      :class="isMobileCollapsed ? 'w-12 items-center' : 'w-60'"
+    >
       <div
-        v-if="loading && items.length === 0"
-        class="flex items-center gap-2 text-xs text-muted-foreground p-4"
-      >
-        <Spinner />
-        <span>{{ $t('common.loading') }}</span>
-      </div>
-      <SidebarMenu
-        v-for="item in filteredItems"
-        v-else
-        :key="item.id || '_draft'"
+        class="p-3 pb-2 border-b border-border/50 space-y-3 shrink-0 w-full"
+        :class="{'px-1': isMobileCollapsed}"
       >
-        <SidebarMenuItem>
-          <SidebarMenuButton
-            as-child
-            class="justify-start py-5! px-4"
+        <div class="flex items-center justify-between">
+          <h4
+            v-if="!isMobileCollapsed"
+            class="text-xs font-medium"
+          >
+            {{ $t('mcp.servers') }}
+          </h4>
+          <div
+            class="flex items-center gap-1"
+            :class="{'flex-col': isMobileCollapsed}"
           >
-            <Toggle
-              :class="['py-4 border w-full text-left', selectedItem?.id === item.id ? 'border-border' : 'border-transparent']"
-              :model-value="selectedItem?.id === item.id"
-              @update:model-value="(v) => { if (v) selectItem(item) }"
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              class="size-7 text-muted-foreground hover:text-foreground"
+              :title="$t('mcp.addNew')"
+              @click="handleAddNewDraft"
             >
-              <div class="flex items-center gap-2 w-full min-w-0">
-                <span
-                  class="size-2 rounded-full shrink-0"
-                  :class="statusDotClass(item)"
-                />
-                <span class="truncate flex-1">
-                  {{ item.name }}
-                  <span
-                    v-if="!item.id"
-                    class="text-muted-foreground text-xs"
-                  >*</span>
-                </span>
-                <Badge
-                  v-if="item.id"
-                  variant="outline"
-                  class="shrink-0 text-[10px]"
-                >
-                  {{ item.type }}
-                </Badge>
-                <Badge
-                  v-else
-                  variant="secondary"
-                  class="shrink-0 text-[10px]"
-                >
-                  {{ $t('mcp.draft') }}
-                </Badge>
-              </div>
-            </Toggle>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarMenu>
-    </template>
-
-    <template #sidebar-footer>
-      <div class="flex gap-2 p-2">
-        <Button
-          class="flex-1"
-          size="sm"
-          @click="openCreateDialog"
-        >
-          <Plus
-            class="mr-1.5"
-          />
-          {{ $t('common.add') }}
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          @click="openImportDialog"
+              <Plus class="size-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              class="size-7 text-muted-foreground hover:text-foreground"
+              :title="$t('common.import')"
+              @click="startImport"
+            >
+              <Download class="size-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              class="size-7 md:hidden"
+              @click="isMobileCollapsed = !isMobileCollapsed"
+            >
+              <Menu class="size-4" />
+            </Button>
+          </div>
+        </div>
+        <div
+          v-if="!isMobileCollapsed"
+          class="relative"
         >
-          {{ $t('common.import') }}
-        </Button>
+          <Search class="absolute left-2.5 top-1/2 -translate-y-1/2 size-3 text-muted-foreground" />
+          <input 
+            v-model="searchText"
+            class="w-full min-w-0 rounded-lg border border-border bg-background px-3 py-2 text-foreground placeholder:text-muted-foreground transition-all outline-none focus:border-ring focus:ring-2 focus:ring-ring/20 disabled:opacity-50 pl-8 h-8 text-xs shadow-none" 
+            :placeholder="$t('mcp.searchServers')" 
+          >
+        </div>
       </div>
-    </template>
-
-    <template #detail>
+      
       <ScrollArea
-        v-if="selectedItem"
-        class="max-h-full h-full"
+        ref="sidebarScrollRef"
+        class="flex-1 min-h-0 bg-muted/5 w-full"
       >
-        <SettingsShell
-          width="wide"
-          class="space-y-6"
-        >
-          <div class="flex items-center justify-between">
-            <h3 class="text-sm font-semibold">
-              {{ selectedItem.name }}
-            </h3>
-            <div class="flex items-center gap-2">
-              <Button
-                v-if="selectedItem.id"
-                variant="outline"
-                size="sm"
-                @click="handleExportSingle"
-              >
-                {{ $t('common.export') }}
-              </Button>
-              <ConfirmPopover
-                :message="$t('mcp.deleteConfirm')"
-                @confirm="handleDelete(selectedItem!)"
-              >
-                <template #trigger>
-                  <Button
-                    variant="destructive"
-                    size="sm"
-                  >
-                    {{ $t('common.delete') }}
-                  </Button>
-                </template>
-              </ConfirmPopover>
+        <section class="p-2 space-y-0.5">
+          <div
+            v-if="loading && items.length === 0"
+            class="flex justify-center p-4"
+          >
+            <Spinner class="size-4 text-muted-foreground" />
+          </div>
+          <button 
+            v-for="item in filteredItems" 
+            :key="item.id === DRAFT_ID ? `_draft_${blinkKey}` : item.id"
+            class="w-full text-left px-3 py-1.5 rounded-md text-xs transition-colors hover:bg-accent/40 group relative text-muted-foreground flex items-center gap-2"
+            :class="{
+              'bg-accent/60 text-foreground': selectedItem?.id === item.id
+            }"
+            @click="attemptSelectItem(item)"
+          >
+            <span
+              class="size-2 rounded-full shrink-0 transition-colors"
+              :class="statusDotClass(item)"
+            />
+            <span
+              v-if="!isMobileCollapsed"
+              class="truncate flex-1"
+            >
+              {{ item.name || (item.id === DRAFT_ID ? $t('mcp.unnamedServer') : $t('mcp.untitled')) }}
+              <span
+                v-if="!item.id"
+                class="text-muted-foreground font-italic"
+              > ({{ $t('mcp.draft') }})</span>
+            </span>
+            <span
+              v-if="!isMobileCollapsed && isItemDirty(item)"
+              class="size-1.5 rounded-full bg-muted-foreground shrink-0"
+              :title="$t('mcp.unsavedChangesTitle')"
+            />
+          </button>
+        </section>
+      </ScrollArea>
+    </div>
+
+    <!-- Right: Workspace (L4) -->
+    <div 
+      class="relative flex-1 flex flex-col border rounded-lg overflow-hidden bg-background shadow-sm"
+    >
+      <!-- Blink Overlay (Avoids child z-index clipping) -->
+      <div 
+        class="pointer-events-none absolute inset-0 z-50 rounded-lg transition-opacity duration-500"
+        :class="isBlinking ? 'opacity-100 ring-2 ring-foreground ring-inset' : 'opacity-0'"
+        aria-hidden="true"
+      />
+      
+      <!-- Normal Workspace -->
+      <template v-if="selectedItem">
+        <!-- Sovereign Header -->
+        <div class="pb-4 border-b border-border/50 sticky top-0 bg-background/95 backdrop-blur z-10 p-4 shrink-0 flex items-start justify-between">
+          <div class="flex items-center gap-3">
+            <span class="flex size-10 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/30 text-muted-foreground shadow-sm">
+              <Plug class="size-4" />
+            </span>
+            <div class="space-y-0.5 flex flex-col justify-center">
+              <h3 class="text-sm font-semibold text-foreground flex items-center gap-2">
+                {{ formData.name || (selectedItem.id === DRAFT_ID ? $t('mcp.unnamedServer') : selectedItem.name) }}
+                <span
+                  class="size-2 rounded-full shrink-0 transition-colors"
+                  :class="statusDotClass(selectedItem)"
+                />
+              </h3>
+              <p class="text-[11px] text-muted-foreground font-mono leading-none">
+                {{ $t('mcp.lastProbed') }}: {{ formatDate(selectedItem.last_probed_at) || $t('mcp.statusUnknown') }}
+              </p>
             </div>
           </div>
+          <div class="flex items-center gap-3 mt-1 shrink-0">
+            <!-- Dynamic context micro-copy -->
+            <Transition name="fade">
+              <div
+                v-if="selectedItem && isItemDirty(selectedItem)"
+                class="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-muted/40 border border-border/50"
+              >
+                <div class="size-1 rounded-full bg-muted-foreground/40" />
+                <span class="text-[10px] text-muted-foreground font-medium whitespace-nowrap">
+                  Unsaved
+                </span>
+              </div>
+            </Transition>
 
-          <form
-            class="grid gap-4 md:grid-cols-2"
-            @submit.prevent="handleSubmit"
-          >
-            <div class="space-y-1.5">
-              <Label>{{ $t('common.name') }}</Label>
-              <Input
-                v-model="formData.name"
-                :placeholder="$t('common.namePlaceholder')"
+            <button 
+              v-if="selectedItem.id"
+              type="button"
+              class="inline-flex items-center justify-center whitespace-nowrap transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer border border-border bg-background hover:bg-accent rounded-lg gap-1.5 px-3 h-8 text-xs font-medium shadow-none"
+              @click="handleExportSingle"
+            >
+              <Download class="size-3.5" /> {{ $t('common.export') }}
+            </button>
+            <button 
+              v-if="selectedItem"
+              type="button"
+              :disabled="saveState === 'syncing' || !canProbe"
+              class="inline-flex items-center justify-center whitespace-nowrap transition-all disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer border border-border bg-background hover:bg-accent rounded-lg gap-1.5 px-3 h-8 text-xs font-medium shadow-none group relative"
+              @click="handleProbeInterruption"
+            >
+              <template v-if="saveState === 'verifying'">
+                <X class="size-3.5 hidden group-hover:block text-destructive" />
+                <RefreshCw class="size-3.5 animate-spin group-hover:hidden" />
+                <span class="group-hover:text-destructive">{{ $t('mcp.verifyingCancel') }}</span>
+              </template>
+              <template v-else>
+                <RefreshCw class="size-3.5" /> {{ $t('mcp.probe') }}
+              </template>
+            </button>
+            <div
+              class="w-px h-4 bg-border mx-1"
+              aria-hidden="true"
+            />
+            <ConfirmPopover
+              v-if="isDraft"
+              :message="$t('mcp.discardDraftConfirm')"
+              @confirm="removeDraft"
+            >
+              <template #trigger>
+                <button 
+                  type="button"
+                  class="inline-flex items-center justify-center whitespace-nowrap transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer border border-border bg-background hover:bg-accent rounded-lg gap-1.5 px-3 h-8 text-xs font-medium shadow-none"
+                >
+                  {{ $t('mcp.discard') }}
+                </button>
+              </template>
+            </ConfirmPopover>
+            <button 
+              type="button"
+              :disabled="saveState === 'syncing' || saveState === 'verifying'"
+              class="inline-flex items-center justify-center whitespace-nowrap transition-all disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer rounded-lg gap-1.5 px-3 h-8 text-xs font-medium min-w-24 shadow-none"
+              :class="saveBtnClass"
+              @click="handleSave"
+            >
+              <Loader2
+                v-if="saveState === 'syncing'"
+                class="size-3.5 animate-spin"
               />
-            </div>
+              <Check
+                v-else-if="saveState === 'connected'"
+                class="size-3.5"
+              />
+              <Save
+                v-else
+                class="size-3.5"
+              />
+              {{ saveBtnText }}
+            </button>
+          </div>
+        </div>
 
-            <div class="space-y-1.5">
-              <Label>{{ $t('common.type') }}</Label>
-              <Select v-model="connectionType">
-                <SelectTrigger class="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="stdio">
-                      {{ $t('mcp.types.stdio') }}
-                    </SelectItem>
-                    <SelectItem value="remote">
-                      {{ $t('mcp.types.remote') }}
-                    </SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
+        <ScrollArea class="flex-1 min-h-0 bg-muted/5">
+          <section class="max-w-2xl mx-auto p-4 pb-12 space-y-4">
+            <!-- Tier 1 Error Contextual Helper (Sync Error) -->
+            <div
+              v-if="tier1Error"
+              class="rounded-md border border-destructive/50 bg-destructive/5 p-3 flex items-start gap-2"
+            >
+              <AlertCircle class="size-4 text-destructive shrink-0 mt-0.5" />
+              <div class="text-xs text-destructive flex-1">
+                <strong class="font-medium">{{ $t('mcp.saveFailed') }}:</strong> {{ tier1ErrorMessage }}
+                <p class="text-[10px] opacity-80 mt-1 leading-relaxed">
+                  {{ $t('mcp.invalidConfig') }}
+                </p>
+              </div>
             </div>
 
-            <template v-if="connectionType === 'stdio'">
-              <div class="space-y-1.5 md:col-span-2">
-                <Label>{{ $t('mcp.command') }}</Label>
-                <Input
-                  v-model="formData.command"
-                  :placeholder="$t('mcp.commandPlaceholder')"
-                />
-              </div>
-              <div class="space-y-1.5 md:col-span-2">
-                <Label>{{ $t('mcp.arguments') }}</Label>
-                <TagsInput
-                  v-model="argsTags"
-                  :add-on-blur="true"
-                  :duplicate="true"
-                >
-                  <TagsInputItem
-                    v-for="tag in argsTags"
-                    :key="tag"
-                    :value="tag"
+            <!-- Tier 2 Error Contextual Helper (Probe Error) -->
+            <div
+              v-if="tier2Error"
+              class="rounded-md border border-warning/30 bg-warning/5 p-3 flex items-start gap-2"
+            >
+              <ZapOff class="size-4 text-warning shrink-0 mt-0.5" />
+              <div class="text-xs text-warning flex-1">
+                <strong class="font-medium">{{ $t('mcp.probeFailed') }}:</strong> {{ selectedItem?.status_message || $t('mcp.handshakeError') }}
+                <div class="mt-2">
+                  <button
+                    type="button"
+                    class="inline-flex items-center justify-center whitespace-nowrap transition-all outline-none cursor-pointer border border-warning/30 bg-transparent hover:bg-warning/10 rounded-lg px-2 h-6 text-[10px] font-medium text-warning shadow-none"
+                    @click="showRawLog = true"
                   >
-                    <TagsInputItemText />
-                    <TagsInputItemDelete />
-                  </TagsInputItem>
-                  <TagsInputInput
-                    :placeholder="$t('mcp.argumentsPlaceholder')"
-                    class="w-full py-1"
-                  />
-                </TagsInput>
-              </div>
-              <div class="space-y-1.5 md:col-span-2">
-                <Label>{{ $t('mcp.env') }}</Label>
-                <KeyValueEditor
-                  v-model="envPairs"
-                  key-placeholder="KEY"
-                  value-placeholder="VALUE"
-                />
-              </div>
-              <div class="space-y-1.5 md:col-span-2">
-                <Label>{{ $t('mcp.cwd') }}</Label>
-                <Input
-                  v-model="formData.cwd"
-                  :placeholder="$t('mcp.cwdPlaceholder')"
-                />
-              </div>
-            </template>
-
-            <template v-else>
-              <div class="space-y-1.5 md:col-span-2">
-                <Label>URL</Label>
-                <Input
-                  v-model="formData.url"
-                  placeholder="https://example.com/mcp"
-                />
-              </div>
-              <div class="space-y-1.5 md:col-span-2">
-                <Label>Headers</Label>
-                <KeyValueEditor
-                  v-model="headerPairs"
-                  key-placeholder="Header-Name"
-                  value-placeholder="Header-Value"
-                />
-              </div>
-              <div class="space-y-1.5">
-                <Label>Transport</Label>
-                <Select
-                  v-model="formData.transport"
-                >
-                  <SelectTrigger class="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectItem value="http">
-                        HTTP (Streamable)
-                      </SelectItem>
-                      <SelectItem value="sse">
-                        SSE
-                      </SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </div>
-            </template>
-
-            <div class="flex items-center justify-between pt-2 border-t md:col-span-2">
-              <div class="flex items-center gap-2">
-                <Label class="text-xs font-normal">{{ $t('mcp.active') }}</Label>
-                <Switch
-                  :model-value="formData.active"
-                  @update:model-value="(val) => (formData.active = !!val)"
-                />
+                    {{ $t('mcp.viewRawLog') }}
+                  </button>
+                </div>
               </div>
-              <Button
-                type="submit"
-                :disabled="submitting || !formData.name.trim()"
-              >
-                <Spinner
-                  v-if="submitting"
-                  class="mr-1.5"
-                />
-                {{ $t('common.save') }}
-              </Button>
             </div>
-          </form>
 
-          <!-- Probe status & tools -->
-          <div
-            v-if="selectedItem.id"
-            class="border-t pt-4 space-y-4"
-          >
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-2">
+            <!-- Block A: Identity & Protocol -->
+            <div 
+              class="rounded-md border border-border bg-background p-4 shadow-none space-y-4 transition-opacity duration-300" 
+              :class="[
+                tier1Error ? 'border-destructive/50' : '',
+                (isOAuthSpotlight && !showAdvanced) ? 'opacity-40 pointer-events-none' : ''
+              ]"
+            >
+              <div class="space-y-1">
                 <h4 class="text-xs font-medium">
-                  {{ $t('mcp.tools') }}
+                  {{ $t('mcp.identity') }}
                 </h4>
                 <Badge
                   v-if="selectedItem.status === 'connected'"
                   variant="outline"
-                  class="text-[10px] text-success-foreground"
+                  class="text-[10px] text-success"
                 >
                   {{ $t('mcp.statusConnected') }}
                 </Badge>
@@ -303,412 +290,698 @@
                   {{ $t('mcp.statusUnknown') }}
                 </Badge>
               </div>
-              <Button
-                variant="outline"
-                size="sm"
-                :disabled="probing"
-                @click="handleProbe(selectedItem!)"
-              >
-                <Spinner
-                  v-if="probing"
-                  class="mr-1.5"
-                />
-                <RefreshCw
-                  v-else
-                  class="mr-1.5"
-                />
-                {{ probing ? $t('mcp.probing') : $t('mcp.probe') }}
-              </Button>
+              <div class="space-y-4 pt-2">
+                <div class="space-y-1.5 flex flex-col">
+                  <label class="flex items-center gap-2 select-none text-xs font-medium">{{ $t('common.name') }}</label>
+                  <input
+                    v-model="formData.name"
+                    class="w-full min-w-0 rounded-lg border border-border bg-background px-3 py-2 text-foreground placeholder:text-muted-foreground transition-all outline-none focus:border-ring focus:ring-2 focus:ring-ring/20 h-8 text-xs shadow-none"
+                    :placeholder="$t('mcp.placeholders.name')"
+                  >
+                </div>
+                <div class="space-y-1.5 flex flex-col">
+                  <label class="flex items-center gap-2 select-none text-xs font-medium">{{ $t('mcp.transportType') }}</label>
+                  <div class="flex bg-muted/50 p-1 rounded-lg h-9 border border-border/50 gap-1">
+                    <button
+                      type="button"
+                      class="flex-1 text-xs font-medium rounded-md transition-all duration-200 flex items-center justify-center gap-1.5"
+                      :class="connectionType === 'stdio' ? 'bg-background shadow-sm text-foreground ring-1 ring-border/50' : 'text-muted-foreground hover:text-foreground hover:bg-muted/80'"
+                      @click="connectionType = 'stdio'"
+                    >
+                      <Check
+                        v-if="connectionType === 'stdio'"
+                        class="size-3"
+                      />
+                      {{ $t('mcp.types.stdio') }}
+                    </button>
+                    <button
+                      type="button"
+                      class="flex-1 text-xs font-medium rounded-md transition-all duration-200 flex items-center justify-center gap-1.5"
+                      :class="connectionType === 'remote' ? 'bg-background shadow-sm text-foreground ring-1 ring-border/50' : 'text-muted-foreground hover:text-foreground hover:bg-muted/80'"
+                      @click="connectionType = 'remote'"
+                    >
+                      <Check
+                        v-if="connectionType === 'remote'"
+                        class="size-3"
+                      />
+                      {{ $t('mcp.types.remote') }}
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
 
-            <div
-              v-if="selectedItem.status_message && selectedItem.status === 'error'"
-              class="text-xs text-destructive bg-destructive/5 rounded-md p-3"
+            <!-- Block B: Technical Payload -->
+            <div 
+              class="rounded-md border border-border bg-background p-4 shadow-none space-y-4 transition-opacity duration-300"
+              :class="(isOAuthSpotlight && !showAdvanced) ? 'opacity-40 pointer-events-none' : ''"
             >
-              {{ selectedItem.status_message }}
-            </div>
+              <div class="space-y-1">
+                <h4 class="text-xs font-medium">
+                  {{ $t('mcp.payload') }}
+                </h4>
+              </div>
+              
+              <div class="space-y-4 pt-2">
+                <template v-if="connectionType === 'stdio'">
+                  <div class="space-y-1.5 flex flex-col">
+                    <label class="flex items-center gap-2 select-none text-xs font-medium">{{ $t('mcp.command') }}</label>
+                    <input
+                      v-model="formData.command"
+                      class="w-full min-w-0 rounded-lg border border-border bg-background px-3 py-2 text-foreground placeholder:text-muted-foreground transition-all outline-none focus:border-ring focus:ring-2 focus:ring-ring/20 h-8 text-xs shadow-none font-mono"
+                      :placeholder="$t('mcp.commandPlaceholder')"
+                    >
+                  </div>
+                  <div class="space-y-1.5 flex flex-col">
+                    <label class="flex items-center gap-2 select-none text-xs font-medium">{{ $t('mcp.arguments') }}</label>
+                    <TagsInput
+                      v-model="argsTags"
+                      :add-on-blur="true"
+                      :duplicate="true"
+                      class="text-xs min-h-8 font-mono border-border bg-transparent shadow-none rounded-lg"
+                    >
+                      <TagsInputItem
+                        v-for="tag in argsTags"
+                        :key="tag"
+                        :value="tag"
+                      >
+                        <TagsInputItemText />
+                        <TagsInputItemDelete />
+                      </TagsInputItem>
+                      <TagsInputInput
+                        :placeholder="$t('mcp.argumentsPlaceholder')"
+                        class="w-full py-1 text-xs"
+                      />
+                    </TagsInput>
+                  </div>
+                  <div class="space-y-1.5 flex flex-col">
+                    <label class="flex items-center gap-2 select-none text-xs font-medium">{{ $t('mcp.cwd') }}</label>
+                    <input
+                      v-model="formData.cwd"
+                      class="w-full min-w-0 rounded-lg border border-border bg-background px-3 py-2 text-foreground placeholder:text-muted-foreground transition-all outline-none focus:border-ring focus:ring-2 focus:ring-ring/20 h-8 text-xs shadow-none font-mono"
+                      :placeholder="$t('mcp.cwdPlaceholder')"
+                    >
+                  </div>
+                </template>
 
-            <div
-              v-if="probeAuthRequired"
-              class="text-xs text-warning-foreground bg-warning-soft rounded-md p-3 flex items-center gap-2"
-            >
-              <Lock />
-              {{ $t('mcp.authRequired') }}
+                <template v-else>
+                  <div class="space-y-1.5 flex flex-col">
+                    <label class="flex items-center gap-2 select-none text-xs font-medium">{{ $t('mcp.endpointUrl') }}</label>
+                    <div class="relative">
+                      <input
+                        v-model="formData.url"
+                        class="w-full min-w-0 rounded-lg border border-border bg-background px-3 py-2 text-foreground placeholder:text-muted-foreground transition-all outline-none focus:border-ring focus:ring-2 focus:ring-ring/20 h-8 text-xs shadow-none font-mono pr-8"
+                        :placeholder="$t('mcp.placeholders.url')"
+                        @blur="validateUrl"
+                      >
+                      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center">
+                        <Check
+                          v-if="isUrlValid === true"
+                          class="size-3.5 text-success"
+                        />
+                        <AlertCircle
+                          v-else-if="isUrlValid === false"
+                          class="size-3.5 text-destructive"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="space-y-1.5 flex flex-col">
+                    <label class="flex items-center gap-2 select-none text-xs font-medium">{{ $t('mcp.streamProtocol') }}</label>
+                    <Select v-model="formData.transport">
+                      <SelectTrigger class="h-8 text-xs shadow-none border-border rounded-lg bg-background">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem
+                          value="http"
+                          class="text-xs"
+                        >
+                          {{ $t('mcp.protocol.http') }}
+                        </SelectItem>
+                        <SelectItem
+                          value="sse"
+                          class="text-xs"
+                        >
+                          {{ $t('mcp.protocol.sse') }}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </template>
+              </div>
             </div>
 
-            <!-- OAuth section (remote connections only) -->
+            <!-- Advanced Settings Collapsible Area -->
             <div
-              v-if="selectedItem.type !== 'stdio' && (probeAuthRequired || selectedItem.auth_type === 'oauth' || oauthStatus)"
-              class="border rounded-md p-4 space-y-3"
+              class="rounded-md border border-border bg-background p-4 shadow-none space-y-4 transition-all duration-300"
+              :class="{'ring-2 ring-primary/20 border-primary/30 shadow-md': isOAuthSpotlight}"
             >
               <div class="flex items-center justify-between">
-                <h4 class="text-xs font-medium">
-                  {{ $t('mcp.oauth.title') }}
-                </h4>
-                <Badge
-                  v-if="oauthStatus?.has_token && !oauthStatus?.expired"
-                  variant="outline"
-                  class="text-[10px] text-success-foreground"
-                >
-                  {{ $t('mcp.oauth.authorized') }}
-                </Badge>
-                <Badge
-                  v-else-if="oauthStatus?.has_token && oauthStatus?.expired"
-                  variant="outline"
-                  class="text-[10px] text-warning-foreground"
-                >
-                  {{ $t('mcp.oauth.expired') }}
-                </Badge>
-                <Badge
-                  v-else-if="oauthStatus?.configured"
-                  variant="outline"
-                  class="text-[10px] text-muted-foreground"
-                >
-                  {{ $t('mcp.oauth.notConfigured') }}
-                </Badge>
+                <div class="space-y-1">
+                  <h4 class="text-xs font-medium">
+                    {{ $t('mcp.advancedSettings') }}
+                  </h4>
+                  <p class="text-[11px] text-muted-foreground">
+                    {{ $t('mcp.advancedSettingsHint') }}
+                  </p>
+                </div>
+                <div class="flex gap-2">
+                  <button
+                    v-if="!showAdvanced"
+                    type="button"
+                    class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer hover:bg-accent bg-transparent rounded-lg h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+                    @click="showAdvanced = true"
+                  >
+                    {{ $t('mcp.expand') }}
+                  </button>
+                  <button
+                    v-if="showAdvanced"
+                    type="button"
+                    class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer hover:bg-accent bg-transparent rounded-lg h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+                    @click="showAdvanced = false"
+                  >
+                    {{ $t('mcp.collapse') }}
+                  </button>
+                </div>
               </div>
-
+              
               <div
-                v-if="oauthStatus?.auth_server"
-                class="text-xs text-muted-foreground"
+                class="pt-4 border-t border-border/50 space-y-4"
+                :style="{ display: showAdvanced || isOAuthSpotlight ? 'block' : 'none' }"
               >
-                {{ $t('mcp.oauth.authServer') }}: {{ oauthStatus.auth_server }}
-              </div>
-
-              <!-- Client ID input (shown when server doesn't support DCR) -->
-              <div
-                v-if="oauthNeedsClientId && (!oauthStatus?.has_token || oauthStatus?.expired)"
-                class="space-y-2"
-              >
-                <p class="text-xs text-muted-foreground">
-                  {{ $t('mcp.oauth.clientIdHint') }}
-                </p>
-                <div class="space-y-1.5">
-                  <Label class="text-xs">
-                    {{ $t('mcp.oauth.clientId') }}
-                  </Label>
-                  <Input
-                    v-model="oauthClientId"
-                    :placeholder="$t('mcp.oauth.clientIdPlaceholder')"
-                    class="font-mono text-xs"
-                  />
-                </div>
-                <div class="space-y-1.5">
-                  <Label class="text-xs">
-                    {{ $t('mcp.oauth.clientSecret') }}
-                  </Label>
-                  <Input
-                    v-model="oauthClientSecret"
-                    type="password"
-                    :placeholder="$t('mcp.oauth.clientSecretPlaceholder')"
-                    class="font-mono text-xs"
-                  />
+                <!-- Sub Block: Environment / Headers -->
+                <div class="space-y-3">
+                  <h5 class="text-[11px] font-medium text-foreground uppercase tracking-wider">
+                    {{ connectionType === 'stdio' ? $t('mcp.envVars') : $t('mcp.httpHeaders') }}
+                  </h5>
+                  <div v-if="connectionType === 'stdio'">
+                    <KeyValueEditor
+                      v-model="envPairs"
+                      :key-placeholder="$t('mcp.placeholders.envKey')"
+                      :value-placeholder="$t('mcp.placeholders.envValue')"
+                    />
+                  </div>
+                  <div v-else>
+                    <KeyValueEditor
+                      v-model="headerPairs"
+                      :key-placeholder="$t('mcp.placeholders.headerKey')"
+                      :value-placeholder="$t('mcp.placeholders.headerValue')"
+                    />
+                  </div>
                 </div>
+
+                <!-- Sub Block: OAuth (Remote Only) -->
                 <div
-                  v-if="oauthCallbackUrl"
-                  class="space-y-1"
+                  v-if="connectionType === 'remote'"
+                  class="space-y-3 pt-2 border-t border-border/50"
                 >
-                  <Label class="text-xs">
-                    {{ $t('mcp.oauth.callbackUrl') }}
-                  </Label>
-                  <div class="flex items-center gap-1.5">
-                    <code class="text-xs bg-muted px-2 py-1 rounded flex-1 break-all select-all">{{ oauthCallbackUrl }}</code>
-                    <Button
-                      variant="ghost"
-                      size="icon-xs"
-                      @click="copyText(oauthCallbackUrl); toast.success($t('common.copied'))"
+                  <div class="flex items-center justify-between">
+                    <h5 class="text-[11px] font-medium text-foreground uppercase tracking-wider flex items-center gap-2">
+                      <Lock class="size-3 text-muted-foreground" /> {{ $t('mcp.oauth.title') }}
+                    </h5>
+                    <div
+                      class="inline-flex items-center justify-center rounded-sm border font-medium w-fit whitespace-nowrap shrink-0 px-2 py-0.5 text-[9px] shadow-none uppercase tracking-wide"
+                      :class="oauthStatus?.has_token ? 'bg-success/10 text-success border-success/20' : 'text-muted-foreground bg-muted border-border'"
                     >
-                      <Copy />
-                    </Button>
+                      {{ oauthStatus?.has_token ? $t('mcp.oauth.authorized') : $t('mcp.notConfigured') }}
+                    </div>
+                  </div>
+                  
+                  <div
+                    v-if="oauthNeedsClientId && (!oauthStatus?.has_token || oauthStatus?.expired)"
+                    class="space-y-3 p-3 bg-muted/20 border border-border/50 rounded-lg"
+                  >
+                    <div class="space-y-1.5 flex flex-col">
+                      <label class="flex items-center gap-2 select-none text-xs font-medium">{{ $t('mcp.oauth.clientId') }}</label>
+                      <input
+                        v-model="oauthClientId"
+                        class="w-full min-w-0 rounded-lg border border-border bg-background px-3 py-2 text-foreground placeholder:text-muted-foreground transition-all outline-none focus:border-ring focus:ring-2 focus:ring-ring/20 h-8 text-xs shadow-none font-mono"
+                        :placeholder="$t('mcp.oauth.clientIdPlaceholder')"
+                      >
+                    </div>
+                    <div class="space-y-1.5 flex flex-col">
+                      <label class="flex items-center gap-2 select-none text-xs font-medium">{{ $t('mcp.oauth.clientSecret') }}</label>
+                      <div class="relative">
+                        <input
+                          v-model="oauthClientSecret"
+                          :type="showSecret ? 'text' : 'password'"
+                          class="w-full min-w-0 rounded-lg border border-border bg-background px-3 py-2 text-foreground placeholder:text-muted-foreground transition-all outline-none focus:border-ring focus:ring-2 focus:ring-ring/20 h-8 text-xs shadow-none font-mono pr-16"
+                          :placeholder="$t('mcp.oauth.clientSecretPlaceholder')"
+                        >
+                        <div class="absolute right-1 top-1/2 -translate-y-1/2 flex gap-1">
+                          <button
+                            type="button"
+                            class="inline-flex items-center justify-center whitespace-nowrap text-muted-foreground hover:text-foreground bg-transparent rounded-md size-6 p-0 outline-none"
+                            @click="showSecret = !showSecret"
+                          >
+                            <Eye
+                              v-if="!showSecret"
+                              class="size-3.5"
+                            />
+                            <EyeOff
+                              v-else
+                              class="size-3.5"
+                            />
+                          </button>
+                          <button
+                            type="button"
+                            class="inline-flex items-center justify-center whitespace-nowrap text-muted-foreground hover:text-foreground bg-transparent rounded-md size-6 p-0 outline-none"
+                            @click="openModalEditor($t('mcp.oauth.clientSecret'), oauthClientSecret, (v: string) => oauthClientSecret = v)"
+                          >
+                            <Maximize2 class="size-3.5" />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <div>
+                    <button
+                      v-if="!oauthStatus?.has_token"
+                      type="button"
+                      :disabled="oauthDiscovering || oauthAuthorizing"
+                      class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer rounded-lg gap-1.5 px-3 h-8 text-xs shadow-none bg-foreground text-background hover:bg-foreground/90"
+                      @click="handleOAuthFlow"
+                    >
+                      <Loader2
+                        v-if="oauthDiscovering || oauthAuthorizing"
+                        class="size-3.5 mr-1.5 animate-spin"
+                      />
+                      <KeyRound
+                        v-else
+                        class="size-3.5 mr-1.5"
+                      />
+                      {{ oauthDiscovering ? $t('mcp.oauth.discovering') : $t('mcp.oauth.authorize') }}
+                    </button>
+                    <button
+                      v-else
+                      type="button"
+                      class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all outline-none cursor-pointer border border-border bg-background hover:bg-accent rounded-lg gap-1.5 px-3 h-8 text-xs shadow-none"
+                      @click="handleOAuthRevoke"
+                    >
+                      {{ $t('mcp.oauth.revoke') }}
+                    </button>
                   </div>
-                  <p class="text-xs text-muted-foreground">
-                    {{ $t('mcp.oauth.callbackUrlHint') }}
-                  </p>
                 </div>
               </div>
+            </div>
 
-              <div class="flex gap-2">
-                <Button
-                  v-if="!oauthStatus?.has_token || oauthStatus?.expired"
-                  variant="outline"
-                  size="sm"
-                  :disabled="oauthDiscovering || oauthAuthorizing || (oauthNeedsClientId && !oauthClientId.trim())"
-                  @click="handleOAuthFlow"
+            <!-- Discovered Tools Summary -->
+            <div
+              v-if="selectedItem.id && selectedItem.status === 'connected'"
+              class="rounded-md border border-border bg-background p-4 shadow-none space-y-3"
+            >
+              <div class="flex items-center justify-between border-b border-border/50 pb-2">
+                <h4 class="text-xs font-medium flex items-center gap-2">
+                  <Wrench class="size-3 text-muted-foreground" /> {{ $t('mcp.discoveredTools') }}
+                </h4>
+                <button
+                  type="button"
+                  class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all outline-none cursor-pointer hover:underline text-[10px] text-muted-foreground hover:text-foreground"
+                  @click="openToolsModal"
+                >
+                  {{ $t('common.viewAll') }} ({{ displayTools.length }})
+                </button>
+              </div>
+              <div
+                v-if="displayTools.length === 0"
+                class="text-[11px] text-muted-foreground py-1"
+              >
+                {{ $t('mcp.noToolsExposed') }}
+              </div>
+              <div
+                v-else
+                class="flex flex-wrap gap-1.5"
+              >
+                <Badge
+                  v-for="tool in displayTools.slice(0, 5)"
+                  :key="tool.name"
+                  variant="secondary"
+                  class="text-[10px] font-mono hover:bg-secondary/80 cursor-default shadow-none border border-border bg-muted max-w-[140px] truncate block"
+                  :title="tool.description"
                 >
-                  <Spinner
-                    v-if="oauthDiscovering || oauthAuthorizing"
-                    class="mr-1.5"
-                  />
-                  <KeyRound
-                    v-else
-                    class="mr-1.5"
-                  />
-                  {{ oauthDiscovering ? $t('mcp.oauth.discovering') : oauthAuthorizing ? $t('mcp.oauth.authorizing') : $t('mcp.oauth.authorize') }}
-                </Button>
-                <Button
-                  v-if="oauthStatus?.has_token"
-                  variant="ghost"
-                  size="sm"
-                  @click="handleOAuthRevoke"
+                  {{ tool.name }}
+                </Badge>
+                <button
+                  v-if="displayTools.length > 5"
+                  type="button"
+                  class="text-[10px] font-medium text-muted-foreground hover:text-foreground transition-colors ml-1"
+                  @click="openToolsModal"
                 >
-                  {{ $t('mcp.oauth.revoke') }}
-                </Button>
+                  +{{ displayTools.length - 5 }} {{ $t('mcp.more') }}
+                </button>
               </div>
             </div>
 
+            <!-- Stoic Danger Zone -->
             <div
-              v-if="displayTools.length > 0"
-              class="space-y-1"
+              v-if="selectedItem.id && selectedItem.id !== DRAFT_ID"
+              class="pt-4 mt-8"
             >
-              <p class="text-xs text-muted-foreground mb-2">
-                {{ $t('mcp.toolsCount', { count: displayTools.length }) }}
-              </p>
-              <div
-                v-for="tool in displayTools"
-                :key="tool.name"
-                class="flex items-start gap-2 py-1.5 px-2 rounded text-xs hover:bg-accent/50"
-              >
-                <Wrench
-                  class="mt-1 text-muted-foreground shrink-0 text-xs"
-                />
-                <div class="min-w-0">
-                  <span class="font-mono text-xs font-medium">{{ tool.name }}</span>
-                  <p
-                    v-if="tool.description"
-                    class="text-xs text-muted-foreground truncate"
-                  >
-                    {{ tool.description }}
-                  </p>
+              <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                  <div class="space-y-0.5">
+                    <h4 class="text-xs font-medium text-destructive">
+                      {{ $t('common.dangerZone') }}
+                    </h4>
+                    <p class="text-[11px] text-muted-foreground">
+                      {{ $t('mcp.dangerZoneHint') }}
+                    </p>
+                  </div>
+                  <div class="flex justify-end shrink-0">
+                    <ConfirmPopover
+                      :message="$t('mcp.deleteConfirm')"
+                      @confirm="handleDelete(selectedItem!)"
+                    >
+                      <template #trigger>
+                        <button
+                          type="button"
+                          class="inline-flex items-center justify-center whitespace-nowrap transition-all outline-none cursor-pointer bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-lg px-3 min-w-28 h-8 text-xs font-medium shadow-none"
+                        >
+                          {{ $t('common.delete') }}
+                        </button>
+                      </template>
+                    </ConfirmPopover>
+                  </div>
                 </div>
               </div>
             </div>
-            <p
-              v-else-if="selectedItem.status === 'connected'"
-              class="text-xs text-muted-foreground"
-            >
-              {{ $t('mcp.toolsEmpty') }}
-            </p>
+          </section>
+        </ScrollArea>
+      </template>
 
-            <p
-              v-if="selectedItem.last_probed_at"
-              class="text-xs text-muted-foreground"
-            >
-              {{ $t('mcp.lastProbed') }}: {{ formatDate(selectedItem.last_probed_at) }}
-            </p>
-          </div>
-        </SettingsShell>
-      </ScrollArea>
-
-      <Empty
+      <!-- Empty State Workspace -->
+      <div
         v-else
-        class="h-full flex justify-center items-center"
+        class="flex-1 flex flex-col items-center justify-center bg-muted/5 p-8"
       >
-        <EmptyHeader>
-          <EmptyMedia variant="icon">
-            <Plug />
-          </EmptyMedia>
-        </EmptyHeader>
-        <EmptyTitle>{{ $t('mcp.emptyTitle') }}</EmptyTitle>
-        <EmptyDescription>{{ $t('mcp.emptyDescription') }}</EmptyDescription>
-        <EmptyContent>
-          <Button
-            variant="outline"
-            @click="openCreateDialog"
-          >
-            {{ $t('common.add') }}
-          </Button>
-        </EmptyContent>
-      </Empty>
-    </template>
-  </MasterDetailSidebarLayout>
-
-  <!-- Create dialog -->
-  <Dialog v-model:open="createDialogOpen">
-    <DialogContent class="sm:max-w-md">
-      <DialogHeader>
-        <DialogTitle>{{ $t('mcp.addTitle') }}</DialogTitle>
-      </DialogHeader>
-      <form
-        class="mt-4 flex flex-col gap-4"
-        @submit.prevent="handleCreateDraft"
-      >
-        <div class="space-y-1.5">
-          <Label>{{ $t('common.name') }}</Label>
-          <Input
-            v-model="createName"
-            :placeholder="$t('common.namePlaceholder')"
-          />
+        <div class="mb-4 flex shrink-0 items-center justify-center bg-transparent">
+          <Plug class="size-8 text-muted-foreground opacity-50" />
         </div>
-        <div class="space-y-1.5">
-          <Label>{{ $t('common.type') }}</Label>
-          <Select v-model="createType">
-            <SelectTrigger class="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectItem value="stdio">
-                  {{ $t('mcp.types.stdio') }}
-                </SelectItem>
-                <SelectItem value="remote">
-                  {{ $t('mcp.types.remote') }}
-                </SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
+        <h2 class="tracking-tight text-xs font-medium mt-4">
+          {{ $t('mcp.emptyTitle') }}
+        </h2>
+        <p class="text-[11px] text-muted-foreground text-center max-w-sm mt-2 mb-6 leading-relaxed">
+          {{ $t('mcp.emptyDescription') }}
+        </p>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center whitespace-nowrap text-xs font-medium transition-all outline-none cursor-pointer border border-border bg-background hover:bg-accent h-8 rounded-lg gap-1.5 px-3 has-[>svg]:px-2.5 w-fit shadow-none"
+          @click="handleAddNewDraft"
+        >
+          <Plus class="size-4 mr-1.5" /> {{ $t('mcp.addNew') }}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Dialogs & Modals Below -->
+
+  <!-- Import Modal (Centered, Large Editor) -->
+  <Dialog v-model:open="importDialogOpen">
+    <DialogContent
+      :show-close-button="false"
+      class="sm:max-w-4xl p-0 overflow-hidden border border-border shadow-2xl h-[85vh] flex flex-col bg-background"
+    >
+      <div class="px-5 py-4 border-b border-border/50 bg-muted/10 flex justify-between items-center shrink-0">
+        <div class="space-y-1">
+          <h2 class="text-sm font-medium text-foreground">
+            {{ $t('mcp.importSandbox') }}
+          </h2>
+          <div class="flex items-center gap-2">
+            <p class="text-[10px] text-muted-foreground font-mono bg-background border border-border px-1.5 py-0.5 rounded">
+              .gemini/config/mcpServers.json
+            </p>
+            <button
+              type="button"
+              class="inline-flex items-center justify-center size-5 rounded hover:bg-background text-muted-foreground hover:text-foreground transition-colors"
+              @click="copyText('.gemini/config/mcpServers.json'); toast.success($t('mcp.pathCopied'))"
+            >
+              <Copy class="size-3" />
+            </button>
+          </div>
         </div>
-        <DialogFooter>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center whitespace-nowrap outline-none cursor-pointer border border-border bg-background hover:bg-accent rounded-lg px-2 h-7 text-[10px] font-medium shadow-none text-muted-foreground hover:text-foreground"
+            @click="formatImportJson"
+          >
+            { } {{ $t('common.format') }}
+          </button>
           <DialogClose as-child>
-            <Button variant="outline">
-              {{ $t('common.cancel') }}
-            </Button>
+            <button
+              type="button"
+              class="inline-flex items-center justify-center size-7 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <X class="size-4" />
+            </button>
           </DialogClose>
-          <Button
-            type="submit"
-            :disabled="!createName.trim()"
-          >
-            {{ $t('common.confirm') }}
-          </Button>
-        </DialogFooter>
-      </form>
-    </DialogContent>
-  </Dialog>
+        </div>
+      </div>
+      
+      <div class="flex-1 min-h-0 bg-muted/5 p-4 flex flex-col relative">
+        <div class="flex-1 rounded-md border border-border overflow-hidden shadow-none bg-background relative z-0">
+          <MonacoEditor
+            v-model="importJson"
+            language="json"
+          />
+        </div>
+      </div>
 
-  <!-- Import dialog -->
-  <Dialog v-model:open="importDialogOpen">
-    <DialogContent class="sm:max-w-lg w-[calc(100vw-2rem)] max-w-[calc(100vw-2rem)] sm:w-auto">
-      <DialogHeader>
-        <DialogTitle>{{ $t('common.import') }} MCP Servers</DialogTitle>
-      </DialogHeader>
-      <p class="text-xs text-muted-foreground mt-2">
-        {{ $t('mcp.importHint') }}
-      </p>
-      <div class="h-87.5 rounded-md border overflow-hidden mt-3">
-        <MonacoEditor
-          v-model="importJson"
-          language="json"
-        />
+      <!-- Sticky Error Banner -->
+      <div
+        v-if="importError"
+        class="px-5 py-3 border-t border-destructive/30 bg-destructive/10 flex items-center gap-2 shrink-0"
+      >
+        <AlertCircle class="size-4 text-destructive shrink-0" />
+        <p class="text-xs text-destructive flex-1 font-mono">
+          {{ importError }}
+        </p>
       </div>
-      <DialogFooter class="mt-4">
+
+      <div class="px-5 py-4 border-t border-border/50 bg-muted/10 flex justify-end gap-2 shrink-0">
         <DialogClose as-child>
-          <Button variant="outline">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center whitespace-nowrap outline-none cursor-pointer border border-border bg-background hover:bg-accent rounded-lg px-3 h-8 text-xs font-medium shadow-none"
+          >
             {{ $t('common.cancel') }}
-          </Button>
+          </button>
         </DialogClose>
-        <Button
+        <button
+          type="button"
           :disabled="importSubmitting || !importJson.trim()"
-          @click="handleImportFromDialog"
+          class="inline-flex items-center justify-center whitespace-nowrap outline-none cursor-pointer bg-foreground text-background hover:bg-foreground/90 rounded-lg px-3 h-8 text-xs font-medium shadow-none disabled:opacity-50"
+          @click="executeImport"
         >
-          <Spinner
+          <Loader2
             v-if="importSubmitting"
-            class="mr-1.5"
+            class="size-3.5 mr-1.5 animate-spin"
           />
-          {{ $t('common.import') }}
-        </Button>
-      </DialogFooter>
+          {{ $t('mcp.blindImport') }}
+        </button>
+      </div>
+    </DialogContent>
+  </Dialog>
+
+  <!-- Complete Tools List Modal -->
+  <Dialog v-model:open="showToolsModal">
+    <DialogContent
+      :show-close-button="false"
+      class="sm:max-w-3xl p-0 overflow-hidden border border-border shadow-2xl h-[80vh] flex flex-col bg-background"
+    >
+      <div class="px-5 py-4 border-b border-border/50 bg-muted/10 flex justify-between items-center shrink-0">
+        <h2 class="text-sm font-medium text-foreground">
+          {{ $t('mcp.allTools') }}
+        </h2>
+        <DialogClose as-child>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center size-7 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <X class="size-4" />
+          </button>
+        </DialogClose>
+      </div>
+      <div class="p-4 border-b border-border/50 bg-background shrink-0">
+        <div class="relative">
+          <Search class="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
+          <input
+            v-model="toolsSearchText"
+            class="w-full min-w-0 rounded-lg border border-border bg-background px-3 py-2 text-foreground placeholder:text-muted-foreground transition-all outline-none focus:border-ring focus:ring-2 focus:ring-ring/20 h-9 text-xs shadow-none pl-9"
+            :placeholder="$t('mcp.searchTools')"
+          >
+        </div>
+      </div>
+      <ScrollArea class="flex-1 bg-muted/5 p-4">
+        <section class="space-y-3 max-w-3xl mx-auto pb-8">
+          <div
+            v-for="tool in filteredTools"
+            :key="tool.name"
+            class="p-4 rounded-md border border-border bg-background shadow-none space-y-2"
+          >
+            <h4 class="text-xs font-medium font-mono text-foreground">
+              {{ tool.name }}
+            </h4>
+            <p class="text-[11px] text-muted-foreground leading-relaxed">
+              {{ tool.description || $t('mcp.noDescription') }}
+            </p>
+          </div>
+          <div
+            v-if="filteredTools.length === 0"
+            class="text-xs text-muted-foreground text-center py-12"
+          >
+            {{ $t('mcp.noToolsMatch') }}
+          </div>
+        </section>
+      </ScrollArea>
     </DialogContent>
   </Dialog>
 
-  <!-- Export dialog -->
-  <Dialog v-model:open="exportDialogOpen">
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>{{ $t('common.export') }} mcpServers</DialogTitle>
-      </DialogHeader>
-      <div class="h-87.5 rounded-md border overflow-hidden mt-4">
-        <MonacoEditor
-          :model-value="exportJson"
-          language="json"
-          :readonly="true"
-        />
+  <!-- Diagnostics Raw Log Popover (Tier 2 Error) -->
+  <Dialog v-model:open="showRawLog">
+    <DialogContent
+      :show-close-button="false"
+      class="sm:max-w-2xl p-0 overflow-hidden border border-border shadow-2xl bg-background"
+    >
+      <div class="px-4 py-3 border-b border-border/50 bg-muted/10 flex justify-between items-center">
+        <h2 class="text-xs font-medium text-foreground">
+          {{ $t('mcp.diagnosticLog') }}
+        </h2>
+        <DialogClose as-child>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center size-7 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <X class="size-4" />
+          </button>
+        </DialogClose>
       </div>
-      <DialogFooter class="mt-4">
-        <Button
-          variant="outline"
-          @click="handleCopyExport"
+      <ScrollArea class="h-64 bg-background">
+        <pre class="p-4 text-[10px] font-mono text-muted-foreground whitespace-pre-wrap break-all">{{ selectedItem?.status_message || $t('mcp.noLog') }}</pre>
+      </ScrollArea>
+      <div class="p-3 border-t border-border/50 bg-muted/10 flex justify-end">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center whitespace-nowrap outline-none cursor-pointer border border-border bg-background hover:bg-accent rounded-lg px-3 h-7 text-[10px] font-medium shadow-none"
+          @click="copyText(selectedItem?.status_message || ''); toast.success($t('common.copied'))"
         >
-          {{ $t('common.copy') }}
-        </Button>
+          {{ $t('mcp.copyLog') }}
+        </button>
+      </div>
+    </DialogContent>
+  </Dialog>
+
+  <!-- Modal Editor (Long Text Focused Edit) -->
+  <Dialog v-model:open="showModalEditor">
+    <DialogContent
+      :show-close-button="false"
+      class="sm:max-w-4xl p-0 overflow-hidden border border-border shadow-2xl h-[85vh] flex flex-col bg-background"
+    >
+      <div class="px-5 py-4 border-b border-border/50 bg-muted/10 flex justify-between items-center shrink-0">
+        <h2 class="text-sm font-medium text-foreground">
+          {{ $t('mcp.editValue', { value: modalEditorTitle }) }}
+        </h2>
         <DialogClose as-child>
-          <Button>
-            {{ $t('common.confirm') }}
-          </Button>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center size-7 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <X class="size-4" />
+          </button>
         </DialogClose>
-      </DialogFooter>
+      </div>
+      <div class="flex-1 flex min-h-0 bg-background">
+        <div class="w-1/2 border-r border-border p-5 flex flex-col bg-muted/5">
+          <p class="text-[11px] text-muted-foreground leading-relaxed">
+            {{ $t('mcp.editLongTextHint') }}
+          </p>
+        </div>
+        <div class="w-1/2 p-4">
+          <textarea
+            v-model="modalEditorValue"
+            class="w-full h-full resize-none border-0 rounded-md text-xs font-mono text-foreground focus:outline-none focus:ring-0 bg-transparent"
+            :placeholder="$t('mcp.enterContent')"
+          />
+        </div>
+      </div>
+      <div class="px-5 py-4 border-t border-border/50 bg-muted/10 flex justify-end gap-2 shrink-0">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center whitespace-nowrap outline-none cursor-pointer border border-border bg-background hover:bg-accent rounded-lg px-3 h-8 text-xs font-medium shadow-none"
+          @click="showModalEditor = false"
+        >
+          {{ $t('common.cancel') }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center whitespace-nowrap outline-none cursor-pointer bg-foreground text-background hover:bg-foreground/90 rounded-lg px-3 h-8 text-xs font-medium shadow-none"
+          @click="confirmModalEditor"
+        >
+          {{ $t('common.confirm') }}
+        </button>
+      </div>
+    </DialogContent>
+  </Dialog>
+
+  <!-- Route Intercept Dialog -->
+  <Dialog v-model:open="showInterceptDialog">
+    <DialogContent class="sm:max-w-sm p-0 overflow-hidden border border-border shadow-2xl bg-background">
+      <div class="p-5 bg-background space-y-3">
+        <h3 class="text-sm font-medium text-foreground">
+          {{ $t('mcp.unsavedChangesTitle') }}
+        </h3>
+        <p class="text-xs text-muted-foreground leading-relaxed">
+          {{ $t('mcp.unsavedChangesDesc') }}
+        </p>
+      </div>
+      <div class="p-4 border-t border-border/50 bg-muted/10 flex justify-end gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center whitespace-nowrap outline-none cursor-pointer border border-border bg-background hover:bg-accent rounded-lg px-3 h-8 text-xs font-medium shadow-none"
+          @click="showInterceptDialog = false"
+        >
+          {{ $t('mcp.keepEditing') }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center whitespace-nowrap outline-none cursor-pointer bg-foreground text-background hover:bg-foreground/90 rounded-lg px-3 h-8 text-xs font-medium shadow-none"
+          @click="confirmIntercept"
+        >
+          {{ $t('mcp.discardAndSwitch') }}
+        </button>
+      </div>
     </DialogContent>
   </Dialog>
 </template>
 
 <script setup lang="ts">
-import { Search, Plus, RefreshCw, Lock, Copy, KeyRound, Wrench, Plug } from 'lucide-vue-next'
-import { computed, ref, watch } from 'vue'
+import { 
+  Search, Plus, RefreshCw, Lock, Copy, KeyRound, Wrench, Plug, Check, AlertCircle, ZapOff, 
+  Maximize2, Eye, EyeOff, Loader2, Save, X, Download, Menu
+} from 'lucide-vue-next'
+import { computed, nextTick, ref, watch, type ComponentPublicInstance } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
 import { useQueryCache } from '@pinia/colada'
 import {
-  Badge,
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-  Input,
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  Label,
-  ScrollArea,
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  Spinner,
-  Switch,
-  TagsInput,
-  TagsInputInput,
-  TagsInputItem,
-  TagsInputItemDelete,
-  TagsInputItemText,
-  Toggle,
+  Badge, Button, Dialog, DialogClose, DialogContent, ScrollArea, Select, 
+  SelectContent, SelectItem, SelectTrigger, SelectValue, Spinner, TagsInput, TagsInputInput, 
+  TagsInputItem, TagsInputItemDelete, TagsInputItemText
 } from '@memohai/ui'
-import MasterDetailSidebarLayout from '@/components/master-detail-sidebar-layout/index.vue'
-import SettingsShell from '@/components/settings-shell/index.vue'
 import MonacoEditor from '@/components/monaco-editor/index.vue'
 import KeyValueEditor from '@/components/key-value-editor/index.vue'
 import type { KeyValuePair } from '@/components/key-value-editor/index.vue'
 import ConfirmPopover from '@/components/confirm-popover/index.vue'
 import {
-  getBotsByBotIdMcp,
-  postBotsByBotIdMcp,
-  putBotsByBotIdMcpById,
-  deleteBotsByBotIdMcpById,
-  postBotsByBotIdMcpByIdProbe,
-  putBotsByBotIdMcpImport,
-  getBotsByBotIdMcpByIdOauthStatus,
-  postBotsByBotIdMcpByIdOauthDiscover,
-  postBotsByBotIdMcpByIdOauthAuthorize,
-  deleteBotsByBotIdMcpByIdOauthToken,
+  getBotsByBotIdMcp, postBotsByBotIdMcp, putBotsByBotIdMcpById, deleteBotsByBotIdMcpById,
+  postBotsByBotIdMcpByIdProbe, putBotsByBotIdMcpImport, getBotsByBotIdMcpByIdOauthStatus,
+  postBotsByBotIdMcpByIdOauthDiscover, postBotsByBotIdMcpByIdOauthAuthorize, deleteBotsByBotIdMcpByIdOauthToken,
 } from '@memohai/sdk'
 import type {
-  McpUpsertRequest,
-  McpImportRequest,
-  McpToolDescriptor,
-  McpMcpServerEntry,
-  McpOAuthStatus,
+  McpUpsertRequest, McpImportRequest, McpToolDescriptor, McpMcpServerEntry, McpOAuthStatus,
 } from '@memohai/sdk'
 import { resolveApiErrorMessage } from '@/utils/api-error'
 import { useClipboard } from '@/composables/useClipboard'
@@ -729,37 +1002,69 @@ interface McpItem {
 }
 
 const DRAFT_ID = ''
-
-const IMPORT_EXAMPLE = JSON.stringify({
-  mcpServers: {
-    'example-stdio': {
-      command: 'npx',
-      args: ['-y', '@example/mcp-server'],
-      env: { API_KEY: 'your-api-key' },
-    },
-    'example-remote': {
-      url: 'https://example.com/mcp',
-      headers: { Authorization: 'Bearer your-token' },
-      transport: 'sse',
-    },
-  },
-}, null, 2)
-
 const props = defineProps<{ botId: string }>()
 const { t } = useI18n()
 const { copyText } = useClipboard()
+const queryCache = useQueryCache()
 
 const loading = ref(false)
 const items = ref<McpItem[]>([])
 const selectedItem = ref<McpItem | null>(null)
 const selectedMcpId = useSyncedQueryParam('mcpId', '')
 const searchText = ref('')
-const submitting = ref(false)
-const probing = ref(false)
+
+const isMobileCollapsed = ref(false)
+
+const isBlinking = ref(false)
+const blinkKey = ref(0)
+const sidebarScrollRef = ref<ComponentPublicInstance | null>(null)
+
+// Automata Flow States
+const saveState = ref<'idle' | 'syncing' | 'verifying' | 'connected' | 'error'>('idle')
+const tier1Error = ref(false)
+const tier1ErrorMessage = ref('')
+const tier2Error = ref(false)
+let probeAbortController: AbortController | null = null
+
+// Import Flow
+const importDialogOpen = ref(false)
+const importJson = ref('{\n  "mcpServers": {\n    \n  }\n}')
+const importSubmitting = ref(false)
+const importError = ref('')
+
+// Modals & UI Toggles
+const showAdvanced = ref(false)
+const showSecret = ref(false)
+const isOAuthSpotlight = computed(() => {
+  return connectionType.value === 'remote' && probeAuthRequired.value && !oauthStatus.value?.has_token
+})
+
+const showRawLog = ref(false)
+const showToolsModal = ref(false)
+const toolsSearchText = ref('')
+
+// Modal Editor
+const showModalEditor = ref(false)
+const modalEditorTitle = ref('')
+const modalEditorValue = ref('')
+let modalEditorCallback: ((val: string) => void) | null = null
+
+// Intercept Flow
+const showInterceptDialog = ref(false)
+let interceptTargetItem: McpItem | null = null
+let isCreatingNewAfterDiscard = false
+
+// Form State
+const connectionType = ref<'stdio' | 'remote'>('stdio')
+const formData = ref({ name: '', command: '', url: '', cwd: '', transport: 'http' as 'http'|'sse', active: true })
+const argsTags = ref<string[]>([])
+const envPairs = ref<KeyValuePair[]>([])
+const headerPairs = ref<KeyValuePair[]>([])
+
+// OAuth State
 const probeAuthRequired = ref(false)
 const oauthDiscovering = ref(false)
 const oauthAuthorizing = ref(false)
-
 const oauthStatus = ref<McpOAuthStatus | null>(null)
 const oauthClientId = ref('')
 const oauthClientSecret = ref('')
@@ -767,107 +1072,154 @@ const oauthNeedsClientId = ref(false)
 const oauthCallbackUrl = ref('')
 const oauthDiscovered = ref(false)
 
-const createDialogOpen = ref(false)
-const createName = ref('')
-const importDialogOpen = ref(false)
-const exportDialogOpen = ref(false)
-const importJson = ref('')
-const importSubmitting = ref(false)
-const exportJson = ref('')
-
-const createType = ref<'stdio' | 'remote'>('stdio')
-const connectionType = ref<'stdio' | 'remote'>('stdio')
-const formData = ref({
-  name: '',
-  command: '',
-  url: '',
-  cwd: '',
-  transport: 'http' as 'http' | 'sse',
-  active: true,
-})
-const argsTags = ref<string[]>([])
-const envPairs = ref<KeyValuePair[]>([])
-const headerPairs = ref<KeyValuePair[]>([])
+const isUrlValid = ref<boolean | null>(null)
 
+// Computeds
 const isDraft = computed(() => selectedItem.value?.id === DRAFT_ID)
-
+const canProbe = computed(() => {
+  if (!selectedItem.value) return false
+  if (connectionType.value === 'stdio') {
+    return formData.value.command.trim() !== ''
+  } else {
+    return formData.value.url.trim() !== '' && isUrlValid.value !== false
+  }
+})
 const filteredItems = computed(() => {
   if (!searchText.value) return items.value
   const kw = searchText.value.toLowerCase()
-  return items.value.filter((i) => i.id === DRAFT_ID || i.name.toLowerCase().includes(kw))
+  return items.value.filter(i => i.id === DRAFT_ID || i.name.toLowerCase().includes(kw))
+})
+const displayTools = computed(() => selectedItem.value?.tools_cache ?? [])
+const filteredTools = computed(() => {
+  if (!toolsSearchText.value) return displayTools.value
+  const kw = toolsSearchText.value.toLowerCase()
+  return displayTools.value.filter(t => (t.name || '').toLowerCase().includes(kw) || (t.description || '').toLowerCase().includes(kw))
 })
 
-const displayTools = computed<McpToolDescriptor[]>(() => {
-  if (!selectedItem.value) return []
-  return selectedItem.value.tools_cache ?? []
+const saveBtnText = computed(() => {
+  if (saveState.value === 'syncing') return t('mcp.syncing')
+  if (saveState.value === 'verifying') return t('mcp.verifying')
+  if (saveState.value === 'connected') return t('mcp.statusConnected')
+  return isDraft.value ? t('mcp.createServer') : t('mcp.saveConfig')
+})
+
+const saveBtnClass = computed(() => {
+  if (saveState.value === 'connected') return 'bg-success hover:bg-success/90 text-success-solid-foreground border-success'
+  if (saveState.value === 'error') return 'bg-destructive hover:bg-destructive/90 text-white border-destructive'
+  return 'bg-foreground text-background hover:bg-foreground/90 border-foreground'
 })
 
 function statusDotClass(item: McpItem): string {
-  if (!item.id) return 'bg-muted-foreground/40'
-  if (!item.is_active) return 'bg-muted-foreground/40'
-  switch (item.status) {
-    case 'connected': return 'bg-success'
-    case 'error': return 'bg-destructive'
-    default: return 'bg-warning'
-  }
+  if (!item.id || !item.is_active) return 'bg-muted-foreground/40'
+  if (item.status === 'connected') return 'bg-success'
+  if (item.status === 'error') return 'bg-destructive'
+  return 'bg-warning'
 }
 
-function formatDate(dateStr: string | null): string {
+function formatDate(dateStr: string | null) {
   if (!dateStr) return ''
-  try {
-    return new Date(dateStr).toLocaleString()
-  } catch {
-    return dateStr
+  try { return new Date(dateStr).toLocaleString() } catch { return dateStr }
+}
+
+function isItemDirty(item: McpItem) {
+  if (item.id !== selectedItem.value?.id) return false
+  
+  // For drafts, we consider it dirty if any key field is filled
+  if (item.id === DRAFT_ID) {
+    return formData.value.name.trim() !== '' || 
+           (connectionType.value === 'stdio' && formData.value.command.trim() !== '') ||
+           (connectionType.value === 'remote' && formData.value.url.trim() !== '')
   }
+
+  return saveState.value === 'idle' && (
+     formData.value.name !== item.name ||
+     (connectionType.value === 'stdio' && formData.value.command !== configValue(item.config, 'command')) ||
+     (connectionType.value === 'remote' && formData.value.url !== configValue(item.config, 'url'))
+  )
 }
 
-function configValue(config: Record<string, unknown>, key: string): string {
-  const val = config?.[key]
-  return typeof val === 'string' ? val : ''
+function validateUrl() {
+  if (!formData.value.url) { isUrlValid.value = null; return }
+  isUrlValid.value = formData.value.url.startsWith('http://') || formData.value.url.startsWith('https://')
 }
 
-function configArray(config: Record<string, unknown>, key: string): string[] {
-  const val = config?.[key]
-  if (Array.isArray(val)) return val.map(String)
-  return []
+function openModalEditor(title: string, currentVal: string, callback: (v: string) => void) {
+  modalEditorTitle.value = title
+  modalEditorValue.value = currentVal
+  modalEditorCallback = callback
+  showModalEditor.value = true
+}
+
+function confirmModalEditor() {
+  if (modalEditorCallback) modalEditorCallback(modalEditorValue.value)
+  showModalEditor.value = false
+}
+
+function openToolsModal() {
+  toolsSearchText.value = ''
+  showToolsModal.value = true
 }
 
+// Data Mapping Utilities
+function configValue(config: Record<string, unknown>, key: string): string {
+  const val = config?.[key]; return typeof val === 'string' ? val : ''
+}
+function configArray(config: Record<string, unknown>, key: string): string[] {
+  const val = config?.[key]; return Array.isArray(val) ? val.map(String) : []
+}
 function configMap(config: Record<string, unknown>, key: string): Record<string, string> {
   const val = config?.[key]
   if (val && typeof val === 'object' && !Array.isArray(val)) {
     const out: Record<string, string> = {}
-    for (const [k, v] of Object.entries(val)) {
-      out[k] = String(v)
-    }
+    for (const [k, v] of Object.entries(val)) out[k] = String(v)
     return out
   }
   return {}
 }
-
 function recordToPairs(record: Record<string, string>): KeyValuePair[] {
   return Object.entries(record).map(([key, value]) => ({ key, value }))
 }
-
 function pairsToRecord(pairs: KeyValuePair[]): Record<string, string> {
   const out: Record<string, string> = {}
-  for (const p of pairs) {
-    if (p.key.trim()) out[p.key.trim()] = p.value
-  }
+  for (const p of pairs) if (p.key.trim()) out[p.key.trim()] = p.value
   return out
 }
 
+// Navigation & Actions
+function attemptSelectItem(item: McpItem) {
+  if (selectedItem.value && isItemDirty(selectedItem.value) && selectedItem.value.id !== item.id) {
+     interceptTargetItem = item
+     showInterceptDialog.value = true
+  } else {
+     selectItem(item)
+  }
+}
+
+function confirmIntercept() {
+  showInterceptDialog.value = false
+  if (isCreatingNewAfterDiscard) {
+    isCreatingNewAfterDiscard = false
+    createNewDraftInternal()
+  } else if (interceptTargetItem) {
+    selectItem(interceptTargetItem)
+  }
+}
+
 function selectItem(item: McpItem) {
   selectedItem.value = item
   probeAuthRequired.value = false
   oauthStatus.value = null
-  oauthClientId.value = ''
-  oauthClientSecret.value = ''
-  oauthNeedsClientId.value = false
-  oauthCallbackUrl.value = ''
-  oauthDiscovered.value = false
-  if (item.id && item.type !== 'stdio') {
-    loadOAuthStatus(item)
+  showAdvanced.value = false
+  tier1Error.value = false
+  tier2Error.value = false
+  saveState.value = 'idle'
+  if (probeAbortController) {
+    probeAbortController.abort()
+    probeAbortController = null
   }
+  
+  if (item.id && item.type !== 'stdio') loadOAuthStatus(item)
+  
   const cfg = item.config ?? {}
   connectionType.value = item.type === 'stdio' ? 'stdio' : 'remote'
   formData.value = {
@@ -884,104 +1236,100 @@ function selectItem(item: McpItem) {
 }
 
 function removeDraft() {
-  items.value = items.value.filter((i) => i.id !== DRAFT_ID)
-}
-
-function openCreateDialog() {
-  createName.value = ''
-  createType.value = 'stdio'
-  createDialogOpen.value = true
-}
-
-function openImportDialog() {
-  importJson.value = IMPORT_EXAMPLE
-  importDialogOpen.value = true
+  const draft = items.value.find(i => i.id === DRAFT_ID)
+  if (draft) {
+    items.value = items.value.filter(i => i.id !== DRAFT_ID)
+    if (selectedItem.value?.id === DRAFT_ID) {
+      selectedItem.value = null
+    }
+  }
 }
 
-function handleCreateDraft() {
-  const name = createName.value.trim()
-  if (!name) return
+function createNewDraftInternal() {
   removeDraft()
   const draft: McpItem = {
-    id: DRAFT_ID,
-    name,
-    type: createType.value === 'stdio' ? 'stdio' : 'http',
-    config: {},
-    is_active: true,
-    status: 'unknown',
-    tools_cache: [],
-    last_probed_at: null,
-    status_message: '',
-    auth_type: 'none',
+    id: DRAFT_ID, name: '', type: 'stdio',
+    config: {}, is_active: true, status: 'unknown', tools_cache: [],
+    last_probed_at: null, status_message: '', auth_type: 'none'
   }
   items.value = [draft, ...items.value]
   selectItem(draft)
-  createDialogOpen.value = false
 }
 
-function itemToExportEntry(item: McpItem): McpMcpServerEntry {
-  const cfg = item.config ?? {}
-  if (item.type === 'stdio') {
-    return {
-      command: configValue(cfg, 'command') || undefined,
-      args: configArray(cfg, 'args').length ? configArray(cfg, 'args') : undefined,
-      cwd: configValue(cfg, 'cwd') || undefined,
-      env: Object.keys(configMap(cfg, 'env')).length ? configMap(cfg, 'env') : undefined,
-    }
+function handleAddNewDraft() {
+  const existingDraft = items.value.find(i => i.id === DRAFT_ID)
+  if (existingDraft && isItemDirty(existingDraft)) {
+    isCreatingNewAfterDiscard = true
+    interceptTargetItem = null
+    showInterceptDialog.value = true
+    return
   }
-  return {
-    url: configValue(cfg, 'url') || undefined,
-    headers: Object.keys(configMap(cfg, 'headers')).length ? configMap(cfg, 'headers') : undefined,
-    transport: item.type === 'sse' ? 'sse' : undefined,
+
+  if (existingDraft) {
+    selectItem(existingDraft)
+    // Reset and Trigger blink micro-interaction
+    isBlinking.value = false
+    nextTick(() => {
+      blinkKey.value++
+      isBlinking.value = true
+      
+      // Auto reset after animation duration (400ms)
+      setTimeout(() => {
+        isBlinking.value = false
+      }, 400)
+    })
+    
+    // Scroll to top to ensure draft is visible
+    const viewport = sidebarScrollRef.value?.$el?.querySelector('[data-radix-scroll-area-viewport]')
+    if (viewport) {
+      viewport.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  } else {
+    createNewDraftInternal()
   }
 }
 
-function buildRequestBody(
-  fd: typeof formData.value,
-  mode: 'stdio' | 'remote',
-  args: string[],
-  env: KeyValuePair[],
-  headers: KeyValuePair[],
-): McpUpsertRequest {
-  const body: McpUpsertRequest = {
-    name: fd.name.trim(),
-    is_active: fd.active,
+function startImport() {
+  importJson.value = '{\n  "mcpServers": {\n    \n  }\n}'
+  importError.value = ''
+  importDialogOpen.value = true
+}
+
+function formatImportJson() {
+  try {
+     const parsed = JSON.parse(importJson.value)
+     importJson.value = JSON.stringify(parsed, null, 2)
+     importError.value = ''
+  } catch {
+     importError.value = t('mcp.importErrorJson')
   }
-  if (mode === 'stdio') {
-    body.command = fd.command.trim()
-    if (args.length > 0) body.args = args
-    const envRecord = pairsToRecord(env)
+}
+
+// Backend Interactions
+function buildRequestBody(): McpUpsertRequest {
+  const body: McpUpsertRequest = { name: formData.value.name.trim() || t('mcp.unnamedServer'), is_active: formData.value.active }
+  if (connectionType.value === 'stdio') {
+    body.command = formData.value.command.trim()
+    if (argsTags.value.length > 0) body.args = argsTags.value
+    const envRecord = pairsToRecord(envPairs.value)
     if (Object.keys(envRecord).length > 0) body.env = envRecord
-    if (fd.cwd.trim()) body.cwd = fd.cwd.trim()
+    if (formData.value.cwd.trim()) body.cwd = formData.value.cwd.trim()
   } else {
-    body.url = fd.url.trim()
-    const headerRecord = pairsToRecord(headers)
+    body.url = formData.value.url.trim()
+    const headerRecord = pairsToRecord(headerPairs.value)
     if (Object.keys(headerRecord).length > 0) body.headers = headerRecord
-    if (fd.transport === 'sse') body.transport = 'sse'
+    if (formData.value.transport === 'sse') body.transport = 'sse'
   }
   return body
 }
 
-const queryCache = useQueryCache()
-
-function invalidateSidebarMcp() {
-  queryCache.invalidateQueries({ key: ['bot-mcp', props.botId] })
-}
-
 async function loadList() {
   loading.value = true
   try {
-    const { data } = await getBotsByBotIdMcp({
-      path: { bot_id: props.botId },
-      throwOnError: true,
-    })
+    const { data } = await getBotsByBotIdMcp({ path: { bot_id: props.botId } as unknown as { bot_id: string }, throwOnError: true })
     const serverItems: McpItem[] = (data.items ?? []).map((item: Record<string, unknown>) => ({
-      ...item,
-      status: item.status ?? 'unknown',
-      tools_cache: item.tools_cache ?? [],
-      last_probed_at: item.last_probed_at ?? null,
-      status_message: item.status_message ?? '',
-      auth_type: item.auth_type ?? 'none',
+      ...item as unknown as McpItem, status: (item.status as string) ?? 'unknown', tools_cache: (item.tools_cache as McpToolDescriptor[]) ?? [],
+      last_probed_at: (item.last_probed_at as string) ?? null, status_message: (item.status_message as string) ?? '', auth_type: (item.auth_type as string) ?? 'none'
     }))
     const draft = items.value.find((i) => i.id === DRAFT_ID)
     items.value = draft ? [draft, ...serverItems] : serverItems
@@ -991,12 +1339,6 @@ async function loadList() {
       if (still) selectItem(still)
       else selectedItem.value = null
     }
-    if (!selectedItem.value && items.value.length > 0) {
-      const fromUrl = selectedMcpId.value
-        ? items.value.find((i) => i.id === selectedMcpId.value)
-        : null
-      selectItem(fromUrl ?? items.value[0])
-    }
   } catch (error) {
     toast.error(resolveApiErrorMessage(error, t('mcp.loadFailed')))
   } finally {
@@ -1004,167 +1346,166 @@ async function loadList() {
   }
 }
 
-async function handleProbe(item: McpItem) {
-  if (!item.id) return
-  probing.value = true
-  probeAuthRequired.value = false
-  try {
-    const { data } = await postBotsByBotIdMcpByIdProbe({
-      path: { bot_id: props.botId, id: item.id },
-      throwOnError: true,
-    })
-    if (data) {
-      item.status = data.status ?? item.status
-      item.tools_cache = data.tools ?? []
-      item.status_message = data.error ?? ''
-      item.last_probed_at = new Date().toISOString()
-      probeAuthRequired.value = !!data.auth_required
-      if (data.status === 'connected') {
-        toast.success(t('mcp.probeSuccess'))
-      } else if (data.auth_required) {
-        toast.warning(t('mcp.authRequired'))
-      } else {
-        toast.error(data.error || t('mcp.probeFailed'))
-      }
-    }
-  } catch (error) {
-    toast.error(resolveApiErrorMessage(error, t('mcp.probeFailed')))
-  } finally {
-    probing.value = false
-  }
-}
-
-async function handleSubmit() {
+async function handleSave() {
   if (!selectedItem.value) return
-  submitting.value = true
+  saveState.value = 'syncing'
+  tier1Error.value = false
+  tier2Error.value = false
+  
   try {
-    const body = buildRequestBody(formData.value, connectionType.value, argsTags.value, envPairs.value, headerPairs.value)
+    const body = buildRequestBody()
     let savedId: string | undefined
     if (isDraft.value) {
-      const { data } = await postBotsByBotIdMcp({
-        path: { bot_id: props.botId },
-        body,
-        throwOnError: true,
-      })
+      const { data } = await postBotsByBotIdMcp({ path: { bot_id: props.botId } as unknown as { bot_id: string }, body, throwOnError: true })
       savedId = data?.id
       removeDraft()
+      toast.success(t('mcp.createSuccess'))
       await loadList()
-      invalidateSidebarMcp()
-      const created = items.value.find((i) => i.id === savedId) ?? items.value.find((i) => i.name === body.name)
+      const created = items.value.find(i => i.id === savedId) || items.value.find(i => i.name === body.name)
       if (created) selectItem(created)
-      toast.success(t('mcp.createSuccess'))
     } else {
       savedId = selectedItem.value.id
-      await putBotsByBotIdMcpById({
-        path: { bot_id: props.botId, id: selectedItem.value.id },
-        body,
-        throwOnError: true,
-      })
-      await loadList()
-      invalidateSidebarMcp()
+      await putBotsByBotIdMcpById({ path: { bot_id: props.botId, id: selectedItem.value.id } as unknown as { bot_id: string, id: string }, body, throwOnError: true })
       toast.success(t('mcp.updateSuccess'))
+      await loadList()
     }
+    
+    // Auto Probe
     if (savedId && selectedItem.value) {
       handleProbe(selectedItem.value)
+    } else {
+      saveState.value = 'idle'
     }
   } catch (error) {
-    toast.error(resolveApiErrorMessage(error, t('common.saveFailed')))
-  } finally {
-    submitting.value = false
+    tier1Error.value = true
+    tier1ErrorMessage.value = resolveApiErrorMessage(error, t('mcp.invalidConfig'))
+    saveState.value = 'error'
+    setTimeout(() => { if (saveState.value === 'error') saveState.value = 'idle' }, 3000)
   }
 }
 
-async function handleDelete(item: McpItem) {
-  if (item.id === DRAFT_ID) {
-    removeDraft()
-    selectedItem.value = items.value.length > 0 ? items.value[0] : null
-    if (selectedItem.value) selectItem(selectedItem.value)
-    return
+function handleProbeInterruption() {
+  if (saveState.value === 'verifying' && probeAbortController) {
+    probeAbortController.abort()
+    probeAbortController = null
+    saveState.value = 'idle'
+    toast.info(t('mcp.probeAborted'))
+  } else if (selectedItem.value) {
+    if (isDraft.value) {
+      handleSave()
+    } else if (selectedItem.value.id) {
+      handleProbe(selectedItem.value)
+    }
   }
+}
+
+async function handleProbe(item: McpItem) {
+  if (!item.id) return
+  saveState.value = 'verifying'
+  probeAuthRequired.value = false
+  tier2Error.value = false
+  
+  if (probeAbortController) probeAbortController.abort()
+  probeAbortController = new AbortController()
+  
   try {
-    await deleteBotsByBotIdMcpById({
-      path: { bot_id: props.botId, id: item.id },
-      throwOnError: true,
-    })
-    if (selectedItem.value?.id === item.id) selectedItem.value = null
-    await loadList()
-    invalidateSidebarMcp()
-    toast.success(t('mcp.deleteSuccess'))
+    const { data } = await postBotsByBotIdMcpByIdProbe({ path: { bot_id: props.botId, id: item.id } as unknown as { bot_id: string, id: string }, throwOnError: true })
+    if (data) {
+      item.status = data.status ?? item.status
+      item.tools_cache = data.tools ?? []
+      item.status_message = data.error ?? ''
+      item.last_probed_at = new Date().toISOString()
+      probeAuthRequired.value = !!data.auth_required
+      
+      if (data.status === 'connected') {
+        saveState.value = 'connected'
+        setTimeout(() => { if (saveState.value === 'connected') saveState.value = 'idle' }, 2000)
+      } else {
+        tier2Error.value = true
+        saveState.value = 'error'
+        setTimeout(() => { if (saveState.value === 'error') saveState.value = 'idle' }, 3000)
+      }
+    }
   } catch (error) {
-    toast.error(resolveApiErrorMessage(error, t('mcp.deleteFailed')))
+    if (error instanceof DOMException && error.name === 'AbortError') return // Interrupted by user
+    tier2Error.value = true
+    item.status_message = resolveApiErrorMessage(error, t('mcp.probeFailedNetwork'))
+    saveState.value = 'error'
+    setTimeout(() => { if (saveState.value === 'error') saveState.value = 'idle' }, 3000)
+  } finally {
+    probeAbortController = null
   }
 }
 
-async function handleImportFromDialog() {
+async function executeImport() {
   importSubmitting.value = true
+  importError.value = ''
   try {
     let parsed: McpImportRequest = JSON.parse(importJson.value)
     if (!parsed.mcpServers && typeof parsed === 'object') {
       parsed = { mcpServers: parsed as McpImportRequest['mcpServers'] }
     }
-    await putBotsByBotIdMcpImport({
-      path: { bot_id: props.botId },
-      body: parsed,
-      throwOnError: true,
-    })
+    await putBotsByBotIdMcpImport({ path: { bot_id: props.botId } as unknown as { bot_id: string }, body: parsed, throwOnError: true })
     importDialogOpen.value = false
     importJson.value = ''
     await loadList()
-    invalidateSidebarMcp()
     toast.success(t('mcp.importSuccess'))
   } catch (error) {
-    toast.error(resolveApiErrorMessage(error, t('mcp.importFailed')))
+     if (error instanceof SyntaxError) {
+        importError.value = t('mcp.importErrorJson')
+     } else {
+        importError.value = resolveApiErrorMessage(error, t('mcp.importErrorFormat'))
+     }
   } finally {
     importSubmitting.value = false
   }
 }
 
+async function handleDelete(item: McpItem) {
+  try {
+    await deleteBotsByBotIdMcpById({ path: { bot_id: props.botId, id: item.id } as unknown as { bot_id: string, id: string }, throwOnError: true })
+    selectedItem.value = null
+    await loadList()
+    toast.success(t('mcp.deleteSuccess'))
+  } catch {
+    toast.error(t('mcp.deleteFailed'))
+  }
+}
+
 function handleExportSingle() {
   if (!selectedItem.value || !selectedItem.value.id) return
   const mcpServers: Record<string, McpMcpServerEntry> = {
-    [selectedItem.value.name]: itemToExportEntry(selectedItem.value),
+    [selectedItem.value.name]: {
+      command: selectedItem.value.type === 'stdio' ? configValue(selectedItem.value.config, 'command') || undefined : undefined,
+      args: selectedItem.value.type === 'stdio' && configArray(selectedItem.value.config, 'args').length ? configArray(selectedItem.value.config, 'args') : undefined,
+      env: selectedItem.value.type === 'stdio' && Object.keys(configMap(selectedItem.value.config, 'env')).length ? configMap(selectedItem.value.config, 'env') : undefined,
+      cwd: selectedItem.value.type === 'stdio' ? configValue(selectedItem.value.config, 'cwd') || undefined : undefined,
+      url: selectedItem.value.type !== 'stdio' ? configValue(selectedItem.value.config, 'url') || undefined : undefined,
+      headers: selectedItem.value.type !== 'stdio' && Object.keys(configMap(selectedItem.value.config, 'headers')).length ? configMap(selectedItem.value.config, 'headers') : undefined,
+      transport: selectedItem.value.type === 'sse' ? 'sse' : undefined,
+    }
   }
-  exportJson.value = JSON.stringify({ mcpServers }, null, 2)
-  exportDialogOpen.value = true
-}
-
-function handleCopyExport() {
-  void copyText(exportJson.value)
-  toast.success(t('common.copied'))
+  copyText(JSON.stringify({ mcpServers }, null, 2))
+  toast.success(t('mcp.copySuccess'))
 }
 
+// OAuth Handlers
 async function loadOAuthStatus(item: McpItem) {
-  if (!item.id || item.type === 'stdio') {
-    oauthStatus.value = null
-    return
-  }
+  if (!item.id || item.type === 'stdio') { oauthStatus.value = null; return }
   try {
-    const { data } = await getBotsByBotIdMcpByIdOauthStatus({
-      path: { bot_id: props.botId, id: item.id },
-      throwOnError: true,
-    })
+    const { data } = await getBotsByBotIdMcpByIdOauthStatus({ path: { bot_id: props.botId, id: item.id } as unknown as { bot_id: string, id: string }, throwOnError: true })
     oauthStatus.value = data ?? null
     oauthCallbackUrl.value = `${window.location.origin}/oauth/mcp/callback`
-  } catch {
-    oauthStatus.value = null
-  }
+  } catch { oauthStatus.value = null }
 }
 
 async function handleOAuthDiscover() {
-  if (!selectedItem.value?.id) return
-  const item = selectedItem.value
-
+  if (!selectedItem.value?.id) return false
   oauthDiscovering.value = true
   oauthNeedsClientId.value = false
   try {
-    const { data } = await postBotsByBotIdMcpByIdOauthDiscover({
-      path: { bot_id: props.botId, id: item.id },
-      throwOnError: true,
-    })
-    toast.success(t('mcp.oauth.discoverSuccess'))
-    if (!data?.registration_endpoint) {
-      oauthNeedsClientId.value = true
-    }
+    const { data } = await postBotsByBotIdMcpByIdOauthDiscover({ path: { bot_id: props.botId, id: selectedItem.value.id } as unknown as { bot_id: string, id: string }, throwOnError: true })
+    if (!data?.registration_endpoint) oauthNeedsClientId.value = true
   } catch (error) {
     toast.error(resolveApiErrorMessage(error, t('mcp.oauth.discoverFailed')))
     oauthDiscovering.value = false
@@ -1176,21 +1517,17 @@ async function handleOAuthDiscover() {
 
 async function handleOAuthFlow() {
   if (!selectedItem.value?.id) return
-  const item = selectedItem.value
-
   if (!oauthDiscovered.value) {
     const discovered = await handleOAuthDiscover()
     if (!discovered) return
     oauthDiscovered.value = true
-    if (oauthNeedsClientId.value && !oauthClientId.value.trim()) {
-      return
-    }
+    if (oauthNeedsClientId.value && !oauthClientId.value.trim()) return
   }
 
   oauthAuthorizing.value = true
   try {
     const { data } = await postBotsByBotIdMcpByIdOauthAuthorize({
-      path: { bot_id: props.botId, id: item.id },
+      path: { bot_id: props.botId, id: selectedItem.value.id } as unknown as { bot_id: string, id: string },
       body: {
         client_id: oauthClientId.value.trim() || undefined,
         client_secret: oauthClientSecret.value.trim() || undefined,
@@ -1198,22 +1535,17 @@ async function handleOAuthFlow() {
       },
       throwOnError: true,
     })
-    if (!data?.authorization_url) {
-      toast.error(t('mcp.oauth.authFailed'))
-      oauthAuthorizing.value = false
-      return
-    }
-
+    if (!data?.authorization_url) throw new Error('No authorization URL returned')
+    
     const popup = window.open(data.authorization_url, 'mcp-oauth', 'width=600,height=700')
-
     const onMessage = async (event: MessageEvent) => {
       if (event.data?.type === 'mcp-oauth-callback') {
         window.removeEventListener('message', onMessage)
         oauthAuthorizing.value = false
         if (event.data.status === 'success') {
           toast.success(t('mcp.oauth.authSuccess'))
-          await loadOAuthStatus(item)
-          handleProbe(item)
+          await loadOAuthStatus(selectedItem.value!)
+          handleProbe(selectedItem.value!)
         } else {
           toast.error(event.data.error || t('mcp.oauth.authFailed'))
         }
@@ -1226,11 +1558,11 @@ async function handleOAuthFlow() {
         clearInterval(pollTimer)
         window.removeEventListener('message', onMessage)
         oauthAuthorizing.value = false
-        loadOAuthStatus(item)
+        loadOAuthStatus(selectedItem.value!)
       }
     }, 500)
   } catch (error) {
-    toast.error(resolveApiErrorMessage(error, t('mcp.oauth.authFailed')))
+    toast.error(resolveApiErrorMessage(error, t('mcp.oauth.flowInitFailed')))
     oauthAuthorizing.value = false
   }
 }
@@ -1238,91 +1570,34 @@ async function handleOAuthFlow() {
 async function handleOAuthRevoke() {
   if (!selectedItem.value?.id) return
   try {
-    await deleteBotsByBotIdMcpByIdOauthToken({
-      path: { bot_id: props.botId, id: selectedItem.value.id },
-      throwOnError: true,
-    })
+    await deleteBotsByBotIdMcpByIdOauthToken({ path: { bot_id: props.botId, id: selectedItem.value.id } as unknown as { bot_id: string, id: string }, throwOnError: true })
     toast.success(t('mcp.oauth.revokeSuccess'))
     oauthDiscovered.value = false
     oauthNeedsClientId.value = false
     oauthClientId.value = ''
     oauthClientSecret.value = ''
     await loadOAuthStatus(selectedItem.value)
-  } catch (error) {
-    toast.error(resolveApiErrorMessage(error, t('mcp.oauth.revokeFailed')))
+  } catch {
+    toast.error(t('mcp.oauth.revokeFailed'))
   }
 }
 
-watch(connectionType, (mode) => {
-  if (mode === 'stdio') {
-    formData.value.url = ''
-    formData.value.transport = 'http'
-    headerPairs.value = []
-  } else {
-    formData.value.command = ''
-    formData.value.cwd = ''
-    argsTags.value = []
-    envPairs.value = []
-  }
-})
-
 const { consumePendingDraft } = useSupermarketMcpDraft()
-
 function applyPendingDraft() {
   const entry = consumePendingDraft()
   if (!entry) return
-
   removeDraft()
   const isStdio = entry.transport === 'stdio'
-  const cfg: Record<string, unknown> = {}
-
-  if (isStdio) {
-    if (entry.command) cfg.command = entry.command
-    if (entry.args?.length) cfg.args = entry.args
-    const envMap: Record<string, string> = {}
-    if (entry.env) {
-      for (const e of entry.env) {
-        if (e.key) envMap[e.key] = e.defaultValue ?? ''
-      }
-    }
-    if (Object.keys(envMap).length) cfg.env = envMap
-  } else {
-    if (entry.url) cfg.url = entry.url
-    const headerMap: Record<string, string> = {}
-    if (entry.headers) {
-      for (const h of entry.headers) {
-        if (h.key) headerMap[h.key] = h.defaultValue ?? ''
-      }
-    }
-    if (Object.keys(headerMap).length) cfg.headers = headerMap
-  }
-
   const draft: McpItem = {
-    id: DRAFT_ID,
-    name: entry.name ?? '',
-    type: isStdio ? 'stdio' : (entry.transport === 'sse' ? 'sse' : 'http'),
-    config: cfg,
-    is_active: true,
-    status: 'unknown',
-    tools_cache: [],
-    last_probed_at: null,
-    status_message: '',
-    auth_type: 'none',
+    id: DRAFT_ID, name: entry.name ?? '', type: isStdio ? 'stdio' : (entry.transport === 'sse' ? 'sse' : 'http'),
+    config: {}, is_active: true, status: 'unknown', tools_cache: [], last_probed_at: null, status_message: '', auth_type: 'none'
   }
-  items.value = [draft, ...items.value.filter((i) => i.id !== DRAFT_ID)]
+  items.value = [draft, ...items.value]
   selectItem(draft)
 }
 
-watch(() => props.botId, async () => {
-  if (props.botId) {
-    selectedItem.value = null
-    await loadList()
-    applyPendingDraft()
-  }
-}, { immediate: true })
+watch(() => props.botId, async () => { if (props.botId) { await loadList(); applyPendingDraft() } }, { immediate: true })
 
-// Refresh local list when chat-sidebar invalidates the shared MCP cache
-// (e.g. user toggled is_active in the chat sidebar).
 watch(
   () => {
     const entries = queryCache.getEntries({ key: ['bot-mcp', props.botId] })
@@ -1335,19 +1610,15 @@ watch(
   },
 )
 
-// Keep ?mcpId in sync with the currently selected connection (drafts ignored).
 watch(selectedItem, (item) => {
   const next = item?.id && item.id !== DRAFT_ID ? item.id : ''
-  if (selectedMcpId.value !== next) {
-    selectedMcpId.value = next
-  }
+  if (selectedMcpId.value !== next) selectedMcpId.value = next
 })
 
-// React to URL changes mid-session (e.g. arriving from the chat-home MCP tab).
 watch(selectedMcpId, (id) => {
-  if (!id) return
-  if (selectedItem.value?.id === id) return
+  if (!id || selectedItem.value?.id === id) return
   const target = items.value.find((i) => i.id === id)
   if (target) selectItem(target)
 })
+
 </script>
diff --git a/apps/web/src/pages/bots/components/bot-memory.vue b/apps/web/src/pages/bots/components/bot-memory.vue
index 294766035..4e12a6941 100644
--- a/apps/web/src/pages/bots/components/bot-memory.vue
+++ b/apps/web/src/pages/bots/components/bot-memory.vue
@@ -1,66 +1,203 @@
 <template>
-  <div class="flex gap-6 h-full absolute inset-0 p-4 mx-auto">
+  <div class="flex gap-6 h-full absolute inset-0 px-4 pt-4 pb-6 w-full max-w-4xl mx-auto">
     <!-- Left: File list -->
-    <div class="w-64 shrink-0 flex flex-col border rounded-lg overflow-hidden max-h-full">
-      <div class="p-3 border-b space-y-3 shrink-0">
+    <div class="w-60 shrink-0 flex flex-col border rounded-lg overflow-hidden max-h-full bg-background shadow-sm">
+      <div class="p-3 pb-2 border-b space-y-3 shrink-0">
         <div class="flex items-center justify-between">
           <h4 class="text-xs font-medium">
             {{ $t('bots.memory.files') }}
           </h4>
           <div class="flex items-center gap-1">
-            <Button
-              variant="ghost"
-              size="sm"
-              type="button"
-              class="size-8 p-0"
-              :disabled="loading || compactLoading || memories.length === 0"
-              :title="$t('bots.memory.compact')"
-              :aria-label="$t('bots.memory.compact')"
-              @click="openCompactDialog"
-            >
-              <Brain
-                class="size-3.5 text-primary"
-              />
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              type="button"
-              class="size-8 p-0"
-              :disabled="loading"
-              :aria-label="$t('common.refresh')"
-              @click="loadMemories"
-            >
-              <RefreshCw
-                :class="{ 'animate-spin': loading }"
-                class="size-3.5"
-              />
-            </Button>
+            <Popover v-model:open="compactPopoverOpen">
+              <PopoverAnchor as-child>
+                <div class="inline-block">
+                  <TooltipProvider>
+                    <Tooltip
+                      :delay-duration="300"
+                      :open="compactPopoverOpen ? false : undefined"
+                    >
+                      <TooltipTrigger as-child>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          type="button"
+                          class="size-8 p-0 hover:bg-muted/50 group"
+                          :disabled="loading || compactLoading || memories.length === 0"
+                          :aria-label="$t('bots.memory.compact')"
+                          @click="openCompactDialog"
+                        >
+                          <Brain class="size-3.5 text-foreground/70 group-hover:text-foreground transition-colors" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent
+                        side="bottom"
+                        align="center"
+                      >
+                        <p class="text-[11px]">
+                          {{ $t('bots.memory.compact') }}
+                        </p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+              </PopoverAnchor>
+
+              <PopoverContent
+                side="bottom"
+                align="start"
+                class="w-72 p-3 flex flex-col gap-3 shadow-md"
+                :side-offset="4"
+              >
+                <div class="space-y-1">
+                  <h4 class="text-xs font-semibold text-foreground leading-none">
+                    {{ $t('bots.memory.compact') }}
+                  </h4>
+                  <p class="text-[10px] text-muted-foreground leading-snug">
+                    {{ $t('bots.memory.compactConfirm') }}
+                  </p>
+                </div>
+
+                <div class="space-y-1.5">
+                  <Label class="text-[9px] font-semibold text-muted-foreground uppercase tracking-wider">{{ $t('bots.memory.compactRatio') }}</Label>
+                  <RadioGroup
+                    v-model="compactRatio"
+                    class="grid grid-cols-1 gap-1"
+                  >
+                    <Label
+                      class="flex items-center gap-2.5 p-1.5 rounded-md border cursor-pointer hover:bg-muted/40 transition-colors"
+                      :class="{ 'bg-muted/50 border-foreground/40': compactRatio === '0.8' }"
+                    >
+                      <RadioGroupItem
+                        value="0.8"
+                        class="size-3"
+                      />
+                      <Zap class="size-3.5 text-muted-foreground shrink-0" />
+                      <div class="min-w-0">
+                        <p class="text-[10px] font-medium text-foreground leading-none">{{ $t('bots.memory.compactRatioLight') }}</p>
+                      </div>
+                    </Label>
+                    <Label
+                      class="flex items-center gap-2.5 p-1.5 rounded-md border cursor-pointer hover:bg-muted/40 transition-colors"
+                      :class="{ 'bg-muted/50 border-foreground/40': compactRatio === '0.5' }"
+                    >
+                      <RadioGroupItem
+                        value="0.5"
+                        class="size-3"
+                      />
+                      <BrainCircuit class="size-3.5 text-muted-foreground shrink-0" />
+                      <div class="min-w-0">
+                        <p class="text-[10px] font-medium text-foreground leading-none">{{ $t('bots.memory.compactRatioMedium') }}</p>
+                      </div>
+                    </Label>
+                    <Label
+                      class="flex items-center gap-2.5 p-1.5 rounded-md border cursor-pointer hover:bg-muted/40 transition-colors"
+                      :class="{ 'bg-muted/50 border-foreground/40': compactRatio === '0.3' }"
+                    >
+                      <RadioGroupItem
+                        value="0.3"
+                        class="size-3"
+                      />
+                      <Brain class="size-3.5 text-muted-foreground shrink-0" />
+                      <div class="min-w-0">
+                        <p class="text-[10px] font-medium text-foreground leading-none">{{ $t('bots.memory.compactRatioAggressive') }}</p>
+                      </div>
+                    </Label>
+                  </RadioGroup>
+                </div>
+
+                <div class="space-y-1.5">
+                  <Label class="text-[9px] font-semibold text-muted-foreground uppercase tracking-wider">
+                    {{ $t('bots.memory.compactDecayDate') }}
+                    <span class="text-muted-foreground/60 normal-case tracking-normal">({{ $t('common.optional') }})</span>
+                  </Label>
+                  <Input
+                    v-model="compactDecayDate"
+                    type="date"
+                    class="w-full h-7 text-[10px] px-2 shadow-none border-border"
+                  />
+                  <p
+                    v-if="compactDecayDays > 0"
+                    class="text-[9px] text-muted-foreground"
+                  >
+                    Calculated: {{ compactDecayDays }} days old
+                  </p>
+                </div>
+
+                <div class="flex items-center justify-end gap-2 pt-2 mt-1 border-t">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    class="h-6 text-[10px] font-medium px-2 shadow-none"
+                    @click="compactPopoverOpen = false"
+                  >
+                    {{ $t('common.cancel') }}
+                  </Button>
+                  <Button
+                    size="sm"
+                    class="h-6 text-[10px] font-medium px-3 shadow-none"
+                    :disabled="compactLoading"
+                    @click="handleCompact"
+                  >
+                    <Spinner
+                      v-if="compactLoading"
+                      class="mr-1 size-2.5"
+                    />
+                    {{ $t('common.confirm') }}
+                  </Button>
+                </div>
+              </PopoverContent>
+            </Popover>
+
+            <TooltipProvider>
+              <Tooltip :delay-duration="300">
+                <TooltipTrigger as-child>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    type="button"
+                    class="size-8 p-0 hover:bg-muted/50 group"
+                    :disabled="loading"
+                    :aria-label="$t('common.refresh')"
+                    @click="loadMemories"
+                  >
+                    <RefreshCw
+                      :class="{ 'animate-spin': loading }"
+                      class="size-3.5 text-foreground/70 group-hover:text-foreground transition-colors"
+                    />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="bottom"
+                  align="center"
+                >
+                  <p class="text-[11px]">
+                    {{ $t('common.refresh') }}
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </div>
         </div>
         <div class="relative">
-          <Search
-            class="absolute left-2.5 top-1/2 -translate-y-1/2 size-3 text-muted-foreground"
-          />
+          <Search class="absolute left-2.5 top-1/2 -translate-y-1/2 size-3 text-muted-foreground" />
           <Input
             v-model="searchQuery"
             :placeholder="$t('bots.memory.searchPlaceholder')"
-            class="pl-8 h-8 text-xs"
+            class="pl-8 h-8 text-xs bg-transparent shadow-none"
           />
         </div>
       </div>
 
-      <ScrollArea class="flex-1 min-h-0 ">
-        <div class="p-2 space-y-1">
-          <div
-            v-if="loading && memories.length === 0"
-            class="p-4 text-center"
-          >
-            <Spinner class="mx-auto" />
-          </div>
+      <ScrollArea class="flex-1 min-h-0">
+        <div class="p-2 space-y-0.5">
+          <template v-if="loading && memories.length === 0">
+            <Skeleton class="h-10 w-full rounded-md" />
+            <Skeleton class="h-10 w-full rounded-md" />
+            <Skeleton class="h-10 w-full rounded-md" />
+          </template>
           <div
             v-else-if="filteredMemories.length === 0"
-            class="p-4 text-center text-xs text-muted-foreground"
+            class="p-4 text-center text-[11px] text-muted-foreground"
           >
             {{ $t('bots.memory.empty') }}
           </div>
@@ -68,109 +205,149 @@
             v-for="item in filteredMemories"
             :key="item.id"
             type="button"
-            class="w-full text-left px-3 py-2 rounded-md text-xs transition-colors hover:bg-accent group relative"
-            :class="{ 'bg-accent font-medium text-primary': selectedId === item.id }"
+            class="w-full text-left px-3 py-1.5 rounded-md text-xs transition-colors hover:bg-accent/40 group relative"
+            :class="{ 'bg-accent/40 font-medium text-foreground': selectedId === item.id, 'text-muted-foreground': selectedId !== item.id }"
             :aria-label="`Open memory ${formatDate(item.created_at)}`"
             @click="selectMemory(item)"
           >
             <div class="flex items-center gap-2">
-              <FileText
-                class="size-3 shrink-0 opacity-70"
-              />
-              <span class="truncate pr-4">{{ formatDate(item.created_at) }}</span>
+              <FileText class="size-3 shrink-0 opacity-70" />
+              <span class="truncate pr-4 flex-1">{{ formatDate(item.created_at) }}</span>
+              <span
+                v-if="isDirty && selectedId === item.id"
+                class="text-foreground shrink-0 text-xs font-bold leading-none select-none"
+              >*</span>
             </div>
-            <div class="mt-1 text-[10px] text-muted-foreground truncate opacity-70 group-hover:opacity-100">
+            <div
+              class="mt-0.5 text-[10px] truncate opacity-70 group-hover:opacity-100"
+              :class="{ 'text-muted-foreground': selectedId !== item.id, 'text-foreground/70': selectedId === item.id }"
+            >
               {{ item.memory.length > 60 ? item.memory.slice(0, 60) + '...' : item.memory }}
             </div>
           </button>
         </div>
       </ScrollArea>
 
-      <div class="p-2 border-t mt-auto">
-        <Button
-          variant="outline"
-          size="sm"
-          class="w-full h-8 text-xs"
+      <div class="border-t p-2 bg-background shrink-0">
+        <button
+          class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer hover:bg-accent bg-transparent rounded-lg gap-1.5 px-3 w-full h-8 text-xs text-muted-foreground hover:text-foreground"
+          type="button"
           @click="openNewMemoryDialog"
         >
-          <Plus
-            class="mr-2 size-3"
-          />
+          <Plus class="mr-2 size-3" />
           {{ $t('bots.memory.newMemory') }}
-        </Button>
+        </button>
       </div>
     </div>
 
     <!-- Right: Editor/Preview -->
-    <div class="flex-1 flex flex-col border rounded-lg overflow-hidden ">
+    <div class="flex-1 flex flex-col border rounded-lg overflow-hidden bg-background shadow-sm">
       <template v-if="selectedMemory">
-        <div class="flex-1 flex flex-col min-h-0">
-          <div class="p-3 border-b flex items-center justify-between bg-muted/30 shrink-0">
-            <div class="flex items-center gap-3 min-w-0">
-              <FileText
-                class="size-4 text-muted-foreground shrink-0"
-              />
-              <div class="min-w-0">
-                <h4 class="text-xs font-medium truncate">
-                  {{ formatDate(selectedMemory.created_at) }}
-                </h4>
-                <div class="flex items-center gap-1.5 text-[10px] text-muted-foreground mt-0.5">
-                  <span class="font-mono">ID: {{ selectedMemory.id }}</span>
-                  <button
-                    type="button"
-                    class="hover:text-foreground transition-colors"
-                    :title="$t('common.copy')"
-                    :aria-label="$t('common.copy')"
-                    @click="copyToClipboard(selectedMemory.id)"
+        <!-- L4 Header -->
+        <div class="pb-4 border-b border-border/50 sticky top-0 bg-background/95 backdrop-blur z-10 p-4 shrink-0 flex items-start justify-between">
+          <div class="flex items-start gap-3 min-w-0">
+            <FileText class="size-4 text-muted-foreground shrink-0 mt-0.5" />
+            <div class="min-w-0 space-y-0.5">
+              <h4 class="text-xs font-medium text-foreground truncate">
+                {{ formatDate(selectedMemory.created_at) }}
+              </h4>
+              <TooltipProvider>
+                <Tooltip :delay-duration="300">
+                  <TooltipTrigger as-child>
+                    <button
+                      type="button"
+                      class="flex items-center gap-1.5 text-[10px] text-muted-foreground hover:text-foreground font-mono transition-colors outline-none focus-visible:ring-1 focus-visible:ring-ring rounded-sm -ml-1 px-1"
+                      @click="copyToClipboard(selectedMemory.id)"
+                    >
+                      <span class="truncate">ID: {{ selectedMemory.id }}</span>
+                      <Copy class="size-2.5 shrink-0" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent
+                    side="bottom"
+                    align="start"
                   >
-                    <Copy
-                      class="size-2.5"
-                    />
-                  </button>
-                </div>
-              </div>
+                    <p class="text-[11px]">
+                      Click to copy
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </div>
-            <div class="flex items-center gap-2 shrink-0">
-              <ConfirmPopover
-                :message="$t('bots.memory.deleteConfirm')"
-                @confirm="handleDelete"
-              >
-                <template #trigger>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    type="button"
-                    class="size-8 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
-                    :disabled="actionLoading"
-                    :aria-label="$t('common.delete')"
-                  >
-                    <Trash2
-                      class="size-3.5"
-                    />
-                  </Button>
-                </template>
-              </ConfirmPopover>
-              <Button
-                size="sm"
-                class="h-8 px-3 text-xs"
-                :disabled="actionLoading || !isDirty"
-                @click="handleSave"
+          </div>
+          <div class="flex items-center shrink-0 gap-3">
+            <Transition name="fade">
+              <div
+                v-if="isDirty"
+                class="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-muted/40 border border-border/50"
               >
-                <Spinner
-                  v-if="actionLoading"
-                  class="mr-1.5 size-3"
+                <div class="size-1 rounded-full bg-muted-foreground/40" />
+                <span class="text-[10px] text-muted-foreground font-medium whitespace-nowrap">
+                  Unsaved
+                </span>
+              </div>
+            </Transition>
+
+            <Button
+              size="sm"
+              class="h-8 px-4 text-xs font-medium shadow-none min-w-24"
+              :disabled="actionLoading || !isDirty"
+              @click="handleSave"
+            >
+              <Spinner
+                v-if="actionLoading"
+                class="mr-1.5 size-3"
+              />
+              {{ $t('common.save') }}
+            </Button>
+          </div>
+        </div>
+
+        <div class="flex-1 flex flex-col min-h-0 overflow-y-auto">
+          <!-- Box-in-Box Editor -->
+          <div class="p-4 flex-1 flex flex-col min-h-0">
+            <Card class="flex-1 overflow-hidden focus-within:border-foreground/50 transition-colors shadow-none bg-background border min-h-[300px]">
+              <CardContent class="p-0 h-full relative">
+                <Textarea
+                  v-model="editContent"
+                  class="absolute inset-0 w-full h-full resize-none border-0 rounded-none focus-visible:ring-0 font-mono text-xs p-4 bg-transparent"
+                  placeholder="Write your memory content here (Markdown)..."
                 />
-                {{ $t('common.save') }}
-              </Button>
+              </CardContent>
+            </Card>
+
+            <!-- Danger Zone -->
+            <div class="pt-8 mt-auto">
+              <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                  <div class="space-y-0.5">
+                    <h4 class="text-xs font-medium text-destructive">
+                      Danger Zone
+                    </h4>
+                    <p class="text-[11px] text-muted-foreground">
+                      Deleting this memory cannot be undone. Proceed with caution.
+                    </p>
+                  </div>
+                  <div class="flex justify-end shrink-0">
+                    <ConfirmPopover
+                      :message="$t('bots.memory.deleteConfirm')"
+                      @confirm="handleDelete"
+                    >
+                      <template #trigger>
+                        <Button
+                          variant="destructive"
+                          class="h-8 text-xs font-medium shadow-none min-w-28"
+                          :disabled="actionLoading"
+                        >
+                          {{ $t('common.delete') }}
+                        </Button>
+                      </template>
+                    </ConfirmPopover>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-          <div class="flex-1 relative">
-            <Textarea
-              v-model="editContent"
-              class="absolute inset-0 resize-none border-0 rounded-none focus-visible:ring-0 font-mono text-xs p-4 h-full"
-              placeholder="Write your memory content here (Markdown)..."
-            />
-          </div>
         </div>
 
         <!-- Charts Section -->
@@ -178,14 +355,14 @@
           v-if="showChartSection"
           class="h-60 border-t flex flex-col bg-muted/5 shrink-0"
         >
-          <div class="px-3 py-1.5 border-b bg-muted/10 flex items-center justify-between shrink-0">
+          <div class="px-4 py-2 border-b bg-muted/10 flex items-center justify-between shrink-0">
             <h5 class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70">
               Vector Manifold
             </h5>
           </div>
-          <div class="flex-1 flex min-h-0 divide-x overflow-hidden">
+          <div class="flex-1 flex min-h-0 overflow-hidden">
             <!-- Sparse: Top K Buckets -->
-            <div class="flex-1 flex flex-col p-3 min-w-0">
+            <div class="flex-1 flex flex-col p-4 min-w-0">
               <p class="text-[9px] font-semibold text-muted-foreground/60 mb-2 uppercase shrink-0">
                 {{ chartLeftTitle }}
               </p>
@@ -196,8 +373,13 @@
               />
             </div>
 
+            <Separator
+              orientation="vertical"
+              class="opacity-30 h-auto"
+            />
+
             <!-- Sparse/Dense secondary chart -->
-            <div class="flex-1 flex flex-col p-3 min-w-0">
+            <div class="flex-1 flex flex-col p-4 min-w-0">
               <p class="text-[9px] font-semibold text-muted-foreground/60 mb-2 uppercase shrink-0">
                 {{ chartRightTitle }}
               </p>
@@ -210,116 +392,153 @@
           </div>
         </div>
       </template>
-      <div
+
+      <!-- Empty State -->
+      <Empty
         v-else
-        class="flex-1 flex flex-col items-center justify-center text-muted-foreground p-8 text-center"
+        class="flex-1 flex flex-col items-center justify-center p-8 bg-muted/5"
       >
-        <div class="size-12 rounded-full bg-muted flex items-center justify-center mb-4">
-          <Brain
-            class="size-6 opacity-20"
-          />
-        </div>
-        <h3 class="text-xs font-medium text-foreground">
+        <EmptyMedia>
+          <Brain class="size-6 text-muted-foreground opacity-50" />
+        </EmptyMedia>
+        <EmptyTitle class="text-xs font-medium mt-4">
           {{ $t('bots.memory.title') }}
-        </h3>
-        <p class="text-xs mt-1 max-w-60">
+        </EmptyTitle>
+        <EmptyDescription class="text-[11px] mt-1.5 max-w-xs text-center text-muted-foreground">
           Select a file from the sidebar to view or edit, or create a new one to persist long-term information for your bot.
-        </p>
+        </EmptyDescription>
         <Button
           variant="outline"
           size="sm"
-          class="mt-6"
+          class="mt-6 h-8 text-xs font-medium shadow-none"
           @click="openNewMemoryDialog"
         >
           {{ $t('bots.memory.newMemory') }}
         </Button>
-      </div>
+      </Empty>
     </div>
 
     <!-- New Memory Dialog -->
     <Dialog v-model:open="newMemoryDialogOpen">
-      <DialogContent class="sm:max-w-2xl max-h-[80vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>{{ $t('bots.memory.newMemory') }}</DialogTitle>
-        </DialogHeader>
+      <DialogContent class="sm:max-w-4xl max-h-[85vh] p-0 flex flex-col gap-0 overflow-hidden bg-background">
+        <div class="px-5 py-4 border-b shrink-0 flex items-center justify-between bg-muted/10">
+          <DialogTitle class="text-sm font-medium">
+            {{ $t('bots.memory.newMemory') }}
+          </DialogTitle>
+        </div>
 
-        <div class="flex-1 min-h-0 overflow-hidden flex flex-col gap-4 py-4">
-          <div class="flex items-center gap-4 shrink-0">
-            <Button
-              variant="outline"
-              size="sm"
-              class="text-xs h-8"
-              @click="loadHistory"
+        <!-- Side-by-Side Container -->
+        <div class="flex-1 flex min-h-0 overflow-hidden">
+          <!-- LEFT: History Selection -->
+          <div class="w-1/2 flex flex-col border-r min-w-0 bg-background">
+            <div class="px-4 h-10 border-b flex items-center justify-between shrink-0">
+              <Label class="text-xs font-medium text-foreground">{{ $t('bots.memory.fromConversation') }}</Label>
+              <Button
+                variant="ghost"
+                size="sm"
+                class="h-7 px-2 -mr-2 text-xs text-muted-foreground hover:text-foreground shadow-none"
+                @click="loadHistory"
+              >
+                <RefreshCw
+                  :class="{ 'animate-spin': historyLoading }"
+                  class="mr-1.5 size-3"
+                />
+                {{ $t('common.refresh') }}
+              </Button>
+            </div>
+
+            <div
+              v-if="historyLoading"
+              class="flex-1 flex items-center justify-center bg-muted/5"
             >
-              <RefreshCw
-                :class="{ 'animate-spin': historyLoading }"
-                class="mr-1.5 size-3"
-              />
-              {{ $t('bots.memory.fromConversation') }}
-            </Button>
+              <Spinner />
+            </div>
+            <div
+              v-else-if="historyMessages.length === 0"
+              class="flex-1 flex flex-col items-center justify-center p-8 bg-muted/5"
+            >
+              <div class="border-2 border-dashed border-border/50 rounded-md p-6 flex flex-col items-center justify-center text-center max-w-xs w-full">
+                <p class="text-xs text-muted-foreground">
+                  {{ $t('bots.memory.emptyHistory') }}
+                </p>
+              </div>
+            </div>
+            <ScrollArea
+              v-else
+              class="flex-1 min-h-0 bg-muted/5"
+            >
+              <div class="p-3 space-y-2">
+                <button
+                  v-for="(msg, idx) in historyMessages"
+                  :key="idx"
+                  type="button"
+                  class="w-full text-left flex items-start gap-3 p-3 rounded-md border transition-colors group cursor-pointer"
+                  :class="selectedHistoryMessages.includes(msg) ? 'bg-primary/5 border-primary/30' : 'bg-background border-border hover:border-foreground/30'"
+                  @click="toggleMessageSelection(msg)"
+                >
+                  <div
+                    class="mt-0.5 size-4 shrink-0 rounded-sm border flex items-center justify-center transition-colors"
+                    :class="selectedHistoryMessages.includes(msg) ? 'bg-primary border-primary text-primary-foreground' : 'border-input bg-background group-hover:border-foreground/30'"
+                  >
+                    <Check
+                      v-if="selectedHistoryMessages.includes(msg)"
+                      class="size-3"
+                    />
+                  </div>
+                  <div class="min-w-0 space-y-1.5 flex-1">
+                    <Badge
+                      variant="outline"
+                      class="text-[9px] font-medium uppercase px-1.5 py-0 h-4 border-foreground/10 shadow-none"
+                      :class="msg.role === 'user' ? 'bg-muted text-muted-foreground' : 'bg-primary/10 text-primary border-primary/20'"
+                    >
+                      {{ msg.role }}
+                    </Badge>
+                    <p class="text-[11px] text-foreground/90 wrap-break-word line-clamp-4 leading-relaxed font-mono">
+                      {{ extractMessageText(msg.content) }}
+                    </p>
+                  </div>
+                </button>
+              </div>
+            </ScrollArea>
           </div>
 
-          <div
-            v-if="historyLoading"
-            class="h-40 flex items-center justify-center border rounded-md bg-muted/10 shrink-0"
-          >
-            <Spinner />
-          </div>
-          <ScrollArea
-            v-else-if="historyMessages.length > 0"
-            class="h-48 border rounded-md p-2 bg-muted/10 shrink-0"
-          >
-            <div class="space-y-2">
-              <button
-                v-for="(msg, idx) in historyMessages"
-                :key="idx"
-                type="button"
-                class="w-full text-left flex items-start gap-2 p-2 rounded hover:bg-muted/50 transition-colors group cursor-pointer"
-                :aria-pressed="selectedHistoryMessages.includes(msg)"
-                @click="toggleMessageSelection(msg)"
-              >
-                <div
-                  class="mt-1 size-4 shrink-0 rounded border border-primary flex items-center justify-center transition-colors"
-                  :class="selectedHistoryMessages.includes(msg) ? 'bg-primary text-primary-foreground' : 'bg-background'"
-                >
-                  <Check
-                    v-if="selectedHistoryMessages.includes(msg)"
-                    class="size-2.5"
+          <!-- RIGHT: Memory Content Editing -->
+          <div class="w-1/2 flex flex-col min-w-0 bg-background">
+            <div class="px-4 h-10 border-b flex items-center justify-between shrink-0">
+              <Label class="flex items-center gap-1 text-xs font-medium text-foreground">
+                Memory Content
+                <span
+                  v-if="newMemoryContent.trim()"
+                  class="text-foreground shrink-0 text-xs font-bold leading-none select-none"
+                >*</span>
+              </Label>
+            </div>
+            <div class="flex-1 flex flex-col min-h-0 p-3 bg-muted/5">
+              <Card class="flex-1 overflow-hidden rounded-md shadow-none bg-background border focus-within:border-foreground/50 transition-colors">
+                <CardContent class="p-0 h-full relative">
+                  <Textarea
+                    v-model="newMemoryContent"
+                    class="absolute inset-0 w-full h-full resize-none border-0 rounded-none focus-visible:ring-0 font-mono text-xs p-3 bg-transparent leading-relaxed"
+                    placeholder="Select from history on the left, or manually write memory content here..."
                   />
-                </div>
-                <div class="min-w-0">
-                  <Badge
-                    variant="outline"
-                    class="text-[9px] uppercase px-1 py-0 h-3.5 mb-1"
-                  >
-                    {{ msg.role }}
-                  </Badge>
-                  <p class="text-xs text-foreground wrap-break-word line-clamp-3">
-                    {{ extractMessageText(msg.content) }}
-                  </p>
-                </div>
-              </button>
+                </CardContent>
+              </Card>
             </div>
-          </ScrollArea>
-
-          <div class="space-y-2 flex-1 min-h-0 flex flex-col">
-            <Label class="text-xs font-medium shrink-0">Memory Content</Label>
-            <Textarea
-              v-model="newMemoryContent"
-              class="flex-1 font-mono text-xs resize-none min-h-0"
-              placeholder="Paste content or select from history above..."
-            />
           </div>
         </div>
 
-        <DialogFooter>
+        <DialogFooter class="p-4 border-t bg-muted/10 shrink-0 flex items-center justify-end gap-2">
           <Button
             variant="outline"
+            size="sm"
+            class="h-8 text-xs font-medium shadow-none min-w-20"
             @click="newMemoryDialogOpen = false"
           >
             {{ $t('common.cancel') }}
           </Button>
           <Button
+            size="sm"
+            class="h-8 text-xs font-medium shadow-none min-w-24"
             :disabled="actionLoading || !newMemoryContent.trim()"
             @click="handleCreateMemory"
           >
@@ -332,116 +551,16 @@
         </DialogFooter>
       </DialogContent>
     </Dialog>
-
-    <!-- Compact Memory Dialog -->
-    <Dialog v-model:open="compactDialogOpen">
-      <DialogContent class="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>{{ $t('bots.memory.compact') }}</DialogTitle>
-        </DialogHeader>
-
-        <div class="py-4 space-y-6">
-          <p class="text-xs text-muted-foreground">
-            {{ $t('bots.memory.compactConfirm') }}
-          </p>
-
-          <div class="space-y-3">
-            <Label>{{ $t('bots.memory.compactRatio') }}</Label>
-            <RadioGroup
-              v-model="compactRatio"
-              class="grid grid-cols-1 gap-3"
-            >
-              <Label
-                class="flex items-start gap-3 p-3 rounded-md border cursor-pointer hover:bg-muted/50 transition-colors"
-                :class="{ 'bg-muted border-primary': compactRatio === '0.8' }"
-              >
-                <RadioGroupItem
-                  value="0.8"
-                  class="mt-1"
-                />
-                <div class="min-w-0">
-                  <p class="text-xs font-medium">{{ $t('bots.memory.compactRatioLight') }}</p>
-                  <p class="text-xs text-muted-foreground">{{ $t('bots.memory.compactRatioLightDesc') }}</p>
-                </div>
-              </Label>
-              <Label
-                class="flex items-start gap-3 p-3 rounded-md border cursor-pointer hover:bg-muted/50 transition-colors"
-                :class="{ 'bg-muted border-primary': compactRatio === '0.5' }"
-              >
-                <RadioGroupItem
-                  value="0.5"
-                  class="mt-1"
-                />
-                <div class="min-w-0">
-                  <p class="text-xs font-medium">{{ $t('bots.memory.compactRatioMedium') }}</p>
-                  <p class="text-xs text-muted-foreground">{{ $t('bots.memory.compactRatioMediumDesc') }}</p>
-                </div>
-              </Label>
-              <Label
-                class="flex items-start gap-3 p-3 rounded-md border cursor-pointer hover:bg-muted/50 transition-colors"
-                :class="{ 'bg-muted border-primary': compactRatio === '0.3' }"
-              >
-                <RadioGroupItem
-                  value="0.3"
-                  class="mt-1"
-                />
-                <div class="min-w-0">
-                  <p class="text-xs font-medium">{{ $t('bots.memory.compactRatioAggressive') }}</p>
-                  <p class="text-xs text-muted-foreground">{{ $t('bots.memory.compactRatioAggressiveDesc') }}</p>
-                </div>
-              </Label>
-            </RadioGroup>
-          </div>
-
-          <div class="space-y-3">
-            <Label>{{ $t('bots.memory.compactDecayDate') }} ({{ $t('common.optional') }})</Label>
-            <Input
-              v-model="compactDecayDate"
-              type="date"
-              class="w-full"
-            />
-            <p
-              v-if="compactDecayDays > 0"
-              class="text-[10px] text-muted-foreground"
-            >
-              Calculated: {{ compactDecayDays }} days old
-            </p>
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button
-            variant="outline"
-            @click="compactDialogOpen = false"
-          >
-            {{ $t('common.cancel') }}
-          </Button>
-          <Button
-            :disabled="compactLoading"
-            @click="handleCompact"
-          >
-            <Spinner
-              v-if="compactLoading"
-              class="mr-1.5 size-3"
-            />
-            {{ $t('common.confirm') }}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Brain, RefreshCw, Search, FileText, Plus, Copy, Trash2, Check } from 'lucide-vue-next'
+import { Brain, RefreshCw, Search, FileText, Plus, Copy, Check, Zap, BrainCircuit } from 'lucide-vue-next'
 import { computed, ref, onMounted, watch } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart, BarChart } from 'echarts/charts'
-import {
-  GridComponent,
-  TooltipComponent,
-} from 'echarts/components'
+import { GridComponent, TooltipComponent } from 'echarts/components'
 import VChart from 'vue-echarts'
 import { useColorMode } from '@vueuse/core'
 import {
@@ -452,13 +571,27 @@ import {
   Textarea,
   Dialog,
   DialogContent,
-  DialogHeader,
   DialogTitle,
   DialogFooter,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
   Badge,
   Label,
   RadioGroup,
   RadioGroupItem,
+  Card,
+  CardContent,
+  Tooltip,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipContent,
+  Empty,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyMedia,
+  Separator,
+  Skeleton
 } from '@memohai/ui'
 import {
   getBotsByBotIdMemory,
@@ -536,15 +669,15 @@ const selectedId = ref<string | null>(null)
 const editContent = ref('')
 const originalContent = ref('')
 
-// New memory dialog
+// State: New Memory Modal configuration
 const newMemoryDialogOpen = ref(false)
 const newMemoryContent = ref('')
 const historyLoading = ref(false)
 const historyMessages = ref<Message[]>([])
 const selectedHistoryMessages = ref<Message[]>([])
 
-// Compact memory dialog
-const compactDialogOpen = ref(false)
+// State: Compact Memory Popover configuration
+const compactPopoverOpen = ref(false)
 const compactRatio = ref('0.5')
 const compactDecayDate = ref('')
 
@@ -1157,9 +1290,13 @@ async function handleDelete() {
 }
 
 function openCompactDialog() {
-  compactRatio.value = '0.5'
-  compactDecayDate.value = ''
-  compactDialogOpen.value = true
+  if (loading.value || compactLoading.value || memories.value.length === 0) return
+
+  if (!compactPopoverOpen.value) {
+    compactRatio.value = '0.5'
+    compactDecayDate.value = ''
+  }
+  compactPopoverOpen.value = !compactPopoverOpen.value
 }
 
 async function handleCompact() {
@@ -1174,7 +1311,7 @@ async function handleCompact() {
       throwOnError: true,
     })
     toast.success(t('bots.memory.compactSuccess'))
-    compactDialogOpen.value = false
+    compactPopoverOpen.value = false
     await loadMemories()
     selectedId.value = null
   } catch (error) {
diff --git a/apps/web/src/pages/bots/components/bot-network.vue b/apps/web/src/pages/bots/components/bot-network.vue
index 2882a8ec6..ef33d6fc8 100644
--- a/apps/web/src/pages/bots/components/bot-network.vue
+++ b/apps/web/src/pages/bots/components/bot-network.vue
@@ -1,282 +1,757 @@
 <template>
-  <div class="mx-auto space-y-5">
-    <div class="flex items-start justify-between gap-3">
-      <div class="min-w-0 space-y-1">
-        <h3 class="text-sm font-semibold">
+  <div class="max-w-2xl mx-auto pb-6 space-y-4">
+    <!-- Sovereign Header -->
+    <div class="flex items-center justify-between pb-4 border-b border-border/50">
+      <div class="space-y-1">
+        <h3 class="text-sm font-semibold text-foreground">
           {{ $t('bots.settings.networkPageTitle') }}
         </h3>
-        <p class="text-xs text-muted-foreground">
+        <p class="text-[11px] text-muted-foreground">
           {{ $t('bots.settings.networkPageSubtitle') }}
         </p>
       </div>
-      <Button
-        variant="outline"
-        size="sm"
-        class="shrink-0"
-        :disabled="!props.botId || isNetworkStatusFetching"
-        @click="handleRefreshNetworkStatus"
-      >
-        <Spinner
-          v-if="isNetworkStatusFetching"
-          class="mr-1.5"
-        />
-        {{ $t('common.refresh') }}
-      </Button>
+
+      <div class="flex items-center gap-3 shrink-0">
+        <Transition name="fade">
+          <div
+            v-if="hasChanges"
+            class="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-muted/40 border border-border/50"
+          >
+            <div class="size-1 rounded-full bg-muted-foreground/40" />
+            <span class="text-[10px] text-muted-foreground font-medium whitespace-nowrap">Unsaved</span>
+          </div>
+        </Transition>
+
+        <Button
+          variant="outline"
+          size="sm"
+          class="h-8 text-xs font-medium min-w-24 shadow-none"
+          :disabled="!props.botId || isNetworkStatusFetching"
+          @click="handleRefreshNetworkStatus"
+        >
+          <Spinner
+            v-if="isNetworkStatusFetching"
+            class="mr-1.5 size-3"
+          />
+          {{ $t('common.refresh') }}
+        </Button>
+
+        <Button
+          size="sm"
+          :disabled="!hasChanges || isSaving"
+          class="h-8 text-xs font-medium min-w-24 shadow-none"
+          @click="handleSave"
+        >
+          <Spinner
+            v-if="isSaving"
+            class="mr-1.5 size-3"
+          />
+          {{ $t('bots.settings.save') }}
+        </Button>
+      </div>
     </div>
 
-    <!-- Status card -->
+    <!-- Workspace Status Card -->
     <div
-      v-if="props.botId"
-      class="rounded-md border p-4 space-y-4"
+      v-if="props.botId && workspaceStatusFields.length"
+      class="space-y-6 rounded-md border border-border bg-background p-5 shadow-none"
     >
-      <div
-        v-if="isNetworkStatusLoading && !networkStatusCard"
-        class="flex items-center gap-2 text-xs text-muted-foreground"
-      >
-        <Spinner />
-        <span>{{ $t('common.loading') }}</span>
+      <div class="space-y-1">
+        <h4 class="text-xs font-semibold text-foreground">
+          {{ $t('bots.settings.botStatusTitle') }}
+        </h4>
+        <p class="text-[10px] text-muted-foreground">
+          {{ $t('bots.settings.botStatusSubtitle') }}
+        </p>
       </div>
 
-      <template v-else-if="networkStatusCard">
-        <template v-if="isNetworkStatusPendingSave">
-          <div class="space-y-1">
-            <p class="text-xs font-medium text-foreground">
-              {{ networkStatusCard.title || networkStatusCard.state }}
-            </p>
-            <p
-              v-if="networkStatusCard.description"
-              class="text-xs text-muted-foreground"
-            >
-              {{ networkStatusCard.description }}
-            </p>
+      <div class="space-y-6">
+        <div
+          v-for="(item, idx) in workspaceStatusFields"
+          :key="`ws-${idx}-${item.label}`"
+          class="space-y-1.5"
+        >
+          <div class="text-[11px] font-medium text-muted-foreground/90">
+            {{ item.label }}
           </div>
-        </template>
+          <div class="font-mono text-[11px] text-foreground/90 break-all leading-relaxed">
+            {{ item.value }}
+          </div>
+        </div>
+      </div>
+    </div>
 
-        <template v-else>
-          <dl
-            v-if="workspaceStatusFields.length"
-            class="grid grid-cols-1 gap-3 text-xs sm:grid-cols-2"
-          >
-            <div
-              v-for="(item, idx) in workspaceStatusFields"
-              :key="`ws-${idx}-${item.label}`"
-              class="space-y-1"
-            >
-              <dt class="text-muted-foreground">
-                {{ item.label }}
-              </dt>
-              <dd class="break-all font-mono text-xs">
-                {{ item.value }}
-              </dd>
-            </div>
-          </dl>
-          <p
-            v-else
-            class="text-xs text-muted-foreground"
-          >
-            {{ $t('bots.settings.networkStatusEmpty') }}
-          </p>
+    <!-- SD-WAN Status Card -->
+    <div
+      v-if="props.botId && (showOverlayStatusInNetworkCard || isNetworkStatusPendingSave || isNetworkStatusLoading)"
+      class="space-y-6 rounded-md border border-border bg-background p-5 shadow-none"
+    >
+      <div class="space-y-1">
+        <h4 class="text-xs font-semibold text-foreground">
+          {{ $t('bots.settings.networkSDWANSectionTitle') }}
+        </h4>
+        <p class="text-[10px] text-muted-foreground">
+          {{ $t('bots.settings.networkSDWANSectionHint') }}
+        </p>
+      </div>
 
+      <div class="space-y-6">
+        <!-- Loading State -->
+        <div
+          v-if="isNetworkStatusLoading && !networkStatusCard"
+          class="flex items-center gap-2 text-[11px] text-muted-foreground py-2"
+        >
+          <Spinner class="size-3" />
+          <span>{{ $t('common.loading') }}</span>
+        </div>
+
+        <!-- Status Fields -->
+        <template v-else-if="networkStatusCard">
+          <!-- Pending Save Banner -->
           <div
-            v-if="showOverlayStatusInNetworkCard"
-            class="space-y-3 border-t border-border pt-3"
+            v-if="isNetworkStatusPendingSave"
+            class="border-l-2 border-warning/50 bg-warning/5 px-3 py-2 rounded-r-md flex items-center gap-2"
           >
-            <h4 class="text-xs font-medium">
-              {{ $t('bots.settings.networkSDWANSectionTitle') }}
-            </h4>
+            <div class="size-1 rounded-full bg-warning animate-pulse" />
+            <p class="text-[10px] text-warning font-medium">
+              {{ $t('bots.settings.networkStatusPendingSave') }}
+            </p>
+          </div>
 
-            <!-- needs_login: prominent login banner -->
+          <!-- Overlay Fields -->
+          <div
+            v-if="showOverlayStatusInNetworkCard && overlayNetworkStatusFields.length"
+            class="space-y-6"
+          >
+            <!-- Auth Required -->
             <div
               v-if="overlayState === 'needs_login'"
-              class="space-y-3"
+              class="border-l-2 border-primary/50 bg-muted/20 px-3 py-2.5 rounded-r-md flex flex-col items-start gap-2"
             >
-              <p class="text-xs text-muted-foreground">
-                {{ $t('bots.settings.networkNeedsLoginDescription') }}
-              </p>
+              <div class="space-y-0.5">
+                <p class="text-[11px] font-medium text-foreground">
+                  Action Required
+                </p>
+                <p class="text-[10px] text-muted-foreground">
+                  {{ $t('bots.settings.networkNeedsLoginDescription') }}
+                </p>
+              </div>
               <Button
                 v-if="overlayAuthURL"
                 size="sm"
+                variant="outline"
+                class="h-7 text-[10px] shadow-none bg-background"
                 @click="openAuthURL"
               >
                 {{ $t('bots.settings.networkOpenLoginPage') }}
               </Button>
-              <p class="text-xs text-muted-foreground">
-                {{ $t('bots.settings.networkNeedsLoginHint') }}
-              </p>
             </div>
 
-            <template v-else>
-              <div class="space-y-1">
-                <p class="text-xs font-medium text-foreground">
-                  {{ networkStatusCard.title || networkStatusCard.state }}
-                </p>
-                <p
-                  v-if="networkStatusCard.description"
-                  class="text-xs text-muted-foreground"
-                >
-                  {{ networkStatusCard.description }}
-                </p>
+            <div
+              v-for="(item, idx) in overlayNetworkStatusFields"
+              :key="`ov-${idx}-${item.label}`"
+              class="space-y-1.5"
+            >
+              <div class="text-[11px] font-medium text-muted-foreground/90">
+                {{ item.label }}
               </div>
+              <div class="font-mono text-[11px] text-foreground/90 break-all leading-relaxed">
+                {{ item.value }}
+              </div>
+            </div>
 
-              <dl
-                v-if="overlayNetworkStatusFields.length"
-                class="grid grid-cols-1 gap-3 text-xs sm:grid-cols-2"
-              >
-                <div
-                  v-for="(item, idx) in overlayNetworkStatusFields"
-                  :key="`ov-${idx}-${item.label}`"
-                  class="space-y-1"
-                >
-                  <dt class="text-muted-foreground">
-                    {{ item.label }}
-                  </dt>
-                  <dd class="break-all font-mono text-xs">
-                    {{ item.value }}
-                  </dd>
-                </div>
-              </dl>
-            </template>
-
-            <!-- Logout button — shown whenever sidecar exists (connected or waiting login) -->
+            <!-- Logout -->
             <div
               v-if="showLogoutButton"
-              class="pt-1"
+              class="pt-2"
             >
               <Button
-                variant="outline"
+                variant="ghost"
                 size="sm"
+                class="h-7 text-[10px] text-muted-foreground hover:text-destructive px-2 -ml-2"
                 :disabled="isLoggingOut"
                 @click="handleLogout"
               >
                 <Spinner
                   v-if="isLoggingOut"
-                  class="mr-1.5"
+                  class="mr-1.5 size-3"
                 />
                 {{ $t('bots.settings.networkLogout') }}
               </Button>
             </div>
           </div>
         </template>
-      </template>
+        <div
+          v-else
+          class="text-[11px] text-muted-foreground py-2 italic"
+        >
+          {{ $t('bots.settings.networkStatusEmpty') }}
+        </div>
+      </div>
     </div>
 
-    <!-- Configuration card -->
+    <!-- SD-WAN Configuration Card -->
     <div
       v-if="props.botId"
-      class="rounded-md border p-4 space-y-4"
+      class="space-y-6 rounded-md border border-border bg-background p-5 shadow-none"
     >
       <div class="space-y-1">
-        <div class="flex items-center justify-between gap-3">
-          <h4 class="text-xs font-medium">
-            {{ $t('bots.settings.networkSDWANSectionTitle') }}
-          </h4>
-          <Switch
-            class="shrink-0"
-            :model-value="form.overlay_enabled"
-            @update:model-value="(value) => form.overlay_enabled = !!value"
-          />
-        </div>
-        <p class="text-xs text-muted-foreground">
+        <h4 class="text-xs font-semibold text-foreground">
+          {{ $t('bots.settings.networkSDWANSectionTitle') }}
+        </h4>
+        <p class="text-[10px] text-muted-foreground">
           {{ $t('bots.settings.networkSDWANSectionHint') }}
         </p>
       </div>
 
-      <div
-        v-if="form.overlay_enabled"
-        class="space-y-4"
-      >
-        <div class="space-y-2">
-          <Label>{{ $t('bots.settings.overlayProviderFieldLabel') }}</Label>
-          <OverlayProviderSelect
-            v-model="form.overlay_provider"
-            :providers="overlayProviderMeta"
-            :placeholder="$t('bots.settings.overlayProviderPlaceholder')"
-          />
+      <div class="space-y-6">
+        <!-- Enable SD-WAN Toggle -->
+        <div class="flex items-center justify-between gap-6">
+          <div class="space-y-0.5 flex-1 pr-4">
+            <Label class="text-[11px] font-medium text-foreground/70">{{ $t('common.enable') }}</Label>
+          </div>
+          <div class="shrink-0 flex justify-end">
+            <Switch
+              :model-value="form.overlay_enabled"
+              @update:model-value="(val) => form.overlay_enabled = val"
+            />
+          </div>
         </div>
 
-        <!-- Unified config form.
-             When connected, auth fields (auth_key, control_url, setup_key, management_url)
-             are rendered as readonly to prevent accidental identity changes. -->
-        <ConfigSchemaForm
-          v-if="showOverlayConfig"
-          v-model="form.overlay_config"
-          :schema="selectedOverlayProviderSchema"
-          id-prefix="bot-network-config"
-        />
+        <template v-if="form.overlay_enabled">
+          <!-- Connection Type (Provider) -->
+          <div class="flex items-center justify-between gap-6 pt-4 border-t border-border/40">
+            <div class="space-y-0.5 flex-1 pr-4">
+              <Label class="text-[11px] font-medium text-foreground/70">{{ $t('bots.settings.overlayProviderFieldLabel') }}</Label>
+            </div>
+            <div class="shrink-0 flex justify-end min-w-[160px] max-w-[320px] w-full">
+              <OverlayProviderSelect
+                v-model="form.overlay_provider"
+                :providers="overlayProviderMeta"
+                :placeholder="$t('bots.settings.overlayProviderPlaceholder')"
+              />
+            </div>
+          </div>
+
+          <!-- Configuration Sub-Boxes -->
+          <div
+            v-if="showOverlayConfig"
+            class="pt-4 border-t border-border/50 space-y-4"
+          >
+            <!-- Primary Configuration -->
+            <div
+              v-if="primarySchema?.fields?.length"
+              class="space-y-4 rounded-md border border-border/50 bg-background/50 p-4 shadow-none"
+            >
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-1.5 text-xs font-medium text-foreground">
+                  {{ $t('bots.settings.overlayPrimaryConfigTitle') }}
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  class="h-6 px-2 text-[10px] text-muted-foreground"
+                  @click="isEditorDialogOpen = true"
+                >
+                  <SquarePen class="mr-1.5 size-3" />
+                  Edit JSON
+                </Button>
+              </div>
+
+              <div class="pt-4 border-t border-border/50 space-y-1">
+                <template
+                  v-for="field in primarySchema.fields"
+                  :key="field.key"
+                >
+                  <!-- Multiline Fields (Boxed) -->
+                  <div 
+                    v-if="isMultilineField(field)"
+                    class="space-y-2.5 p-4 bg-muted/20 rounded-md border border-border/40 my-3"
+                  >
+                    <div class="space-y-1">
+                      <Label
+                        :for="`bot-network-config-primary-${field.key}`"
+                        class="text-[11px] font-semibold text-foreground/70"
+                      >
+                        {{ field.title || field.key }}
+                      </Label>
+                      <p
+                        v-if="field.description"
+                        class="text-[10px] text-muted-foreground/80 leading-relaxed"
+                      >
+                        {{ field.description }}
+                      </p>
+                    </div>
+                    <Textarea
+                      :id="`bot-network-config-primary-${field.key}`"
+                      :model-value="stringValue(field)"
+                      :placeholder="placeholderOf(field)"
+                      :readonly="field.readonly"
+                      rows="4"
+                      class="text-xs shadow-none resize-none bg-background/50 focus:bg-background transition-colors border-border/60"
+                      @update:model-value="(val: string) => updateValue(field.key, val)"
+                    />
+                  </div>
+
+                  <!-- Standard Fields (Horizontal) -->
+                  <div 
+                    v-else
+                    class="flex items-center justify-between gap-6 py-4 border-b border-border/40 last:border-0 min-h-[64px]"
+                  >
+                    <div class="space-y-0.5 flex-1 pr-4">
+                      <Label
+                        :for="`bot-network-config-primary-${field.key}`"
+                        class="text-[11px] font-semibold text-foreground/70"
+                      >
+                        {{ field.title || field.key }}
+                      </Label>
+                      <p
+                        v-if="field.description"
+                        class="text-[10px] text-muted-foreground/80 leading-relaxed"
+                      >
+                        {{ field.description }}
+                      </p>
+                    </div>
+
+                    <div class="shrink-0 flex justify-end min-w-[160px] max-w-[320px] w-full">
+                      <!-- Switch for Bool -->
+                      <Switch
+                        v-if="field.type === 'bool'"
+                        :model-value="!!getFieldValue(field)"
+                        :disabled="field.readonly"
+                        @update:model-value="(val: boolean) => updateValue(field.key, !!val)"
+                      />
+
+                      <!-- Select for Enum -->
+                      <Select
+                        v-else-if="field.type === 'enum' && field.enum"
+                        :model-value="stringValue(field)"
+                        :disabled="field.readonly"
+                        @update:model-value="(val: string) => updateValue(field.key, val)"
+                      >
+                        <SelectTrigger class="h-8 text-xs w-full shadow-none bg-background/50 border-border/60">
+                          <SelectValue :placeholder="placeholderOf(field)" />
+                        </SelectTrigger>
+                        <SelectContent class="w-[--reka-select-trigger-width]">
+                          <SelectItem
+                            v-for="option in field.enum"
+                            :key="option"
+                            :value="option"
+                          >
+                            {{ option }}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+
+                      <!-- Secret Input -->
+                      <div
+                        v-else-if="field.type === 'secret'"
+                        class="relative w-full"
+                      >
+                        <Input
+                          :id="`bot-network-config-primary-${field.key}`"
+                          :model-value="stringValue(field)"
+                          :type="visibleSecrets[field.key] ? 'text' : 'password'"
+                          :placeholder="placeholderOf(field)"
+                          :readonly="field.readonly"
+                          class="h-8 text-xs shadow-none pr-8 bg-background/50 border-border/60 focus:bg-background transition-colors w-full"
+                          @update:model-value="(val: string) => updateValue(field.key, val)"
+                        />
+                        <button
+                          type="button"
+                          class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                          @click="visibleSecrets[field.key] = !visibleSecrets[field.key]"
+                        >
+                          <component
+                            :is="visibleSecrets[field.key] ? EyeOff : Eye"
+                            class="size-3.5"
+                          />
+                        </button>
+                      </div>
+
+                      <!-- Number Input -->
+                      <Input
+                        v-else-if="field.type === 'number'"
+                        :id="`bot-network-config-primary-${field.key}`"
+                        :model-value="numberValue(field)"
+                        type="number"
+                        :placeholder="placeholderOf(field)"
+                        :readonly="field.readonly"
+                        :min="field.constraint?.min"
+                        :max="field.constraint?.max"
+                        :step="field.constraint?.step ?? 1"
+                        :class="[
+                          'h-8 text-xs shadow-none w-full bg-background/50 border-border/60 focus:bg-background transition-colors',
+                          field.key.toLowerCase().includes('port') ? '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none' : ''
+                        ]"
+                        @update:model-value="(val: string) => updateNumber(field.key, val)"
+                      />
+
+                      <!-- Default Text Input -->
+                      <Input
+                        v-else
+                        :id="`bot-network-config-primary-${field.key}`"
+                        :model-value="stringValue(field)"
+                        type="text"
+                        :placeholder="placeholderOf(field)"
+                        :readonly="field.readonly"
+                        class="h-8 text-xs shadow-none w-full bg-background/50 border-border/60 focus:bg-background transition-colors"
+                        @update:model-value="(val: string) => updateValue(field.key, val)"
+                      />
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
+
+            <!-- Advanced Configuration -->
+            <div
+              v-if="advancedSchema?.fields?.length"
+              class="rounded-md border border-border/50 bg-background/50 p-4 shadow-none transition-all duration-200"
+              :class="showAdvancedConfig ? 'space-y-4' : 'space-y-0'"
+            >
+              <button
+                type="button"
+                class="flex items-center gap-1.5 text-xs font-medium text-foreground hover:text-foreground transition-colors w-full outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+                @click="showAdvancedConfig = !showAdvancedConfig"
+              >
+                {{ $t('common.advanced') }}
+                <span class="text-[10px] text-muted-foreground font-normal ml-1">({{ $t('common.allOptional') }})</span>
+                <component
+                  :is="showAdvancedConfig ? ChevronDown : ChevronRight"
+                  class="size-3.5 shrink-0 ml-auto"
+                />
+              </button>
+                  
+              <div
+                v-show="showAdvancedConfig"
+                class="pt-4 border-t border-border/50 space-y-8"
+              >
+                <div
+                  v-for="group in advancedSchemaGroups"
+                  :key="group.title"
+                  class="space-y-2"
+                >
+                  <div class="flex items-center pt-2 pb-1 border-b border-border/20 mb-1">
+                    <span class="text-[10px] font-bold text-foreground/50 shrink-0">
+                      {{ group.title }}
+                    </span>
+                  </div>
+
+                  <div class="space-y-1">
+                    <template
+                      v-for="field in group.fields"
+                      :key="field.key"
+                    >
+                      <!-- Multiline Fields (Boxed) -->
+                      <div 
+                        v-if="isMultilineField(field)"
+                        class="space-y-2.5 p-4 bg-muted/20 rounded-md border border-border/40 my-3"
+                      >
+                        <div class="space-y-1">
+                          <Label
+                            :for="`bot-network-config-advanced-${field.key}`"
+                            class="text-[11px] font-semibold text-foreground/70"
+                          >
+                            {{ field.title || field.key }}
+                          </Label>
+                          <p
+                            v-if="field.description"
+                            class="text-[10px] text-muted-foreground/80 leading-relaxed"
+                          >
+                            {{ field.description }}
+                          </p>
+                        </div>
+                        <Textarea
+                          :id="`bot-network-config-advanced-${field.key}`"
+                          :model-value="stringValue(field)"
+                          :placeholder="placeholderOf(field)"
+                          :readonly="field.readonly"
+                          rows="4"
+                          class="text-xs shadow-none resize-none bg-background/50 focus:bg-background transition-colors border-border/60"
+                          @update:model-value="(val: string) => updateValue(field.key, val)"
+                        />
+                      </div>
+
+                      <!-- Standard Fields (Horizontal) -->
+                      <div 
+                        v-else
+                        class="flex items-center justify-between gap-6 py-4 border-b border-border/40 last:border-0 min-h-[64px]"
+                      >
+                        <div class="space-y-0.5 flex-1 pr-4">
+                          <Label
+                            :for="`bot-network-config-advanced-${field.key}`"
+                            class="text-[11px] font-semibold text-foreground/70"
+                          >
+                            {{ field.title || field.key }}
+                          </Label>
+                          <p
+                            v-if="field.description"
+                            class="text-[10px] text-muted-foreground/80 leading-relaxed"
+                          >
+                            {{ field.description }}
+                          </p>
+                        </div>
+
+                        <div class="shrink-0 flex justify-end min-w-[160px] max-w-[320px] w-full">
+                          <!-- Switch for Bool -->
+                          <Switch
+                            v-if="field.type === 'bool'"
+                            :model-value="!!getFieldValue(field)"
+                            :disabled="field.readonly"
+                            @update:model-value="(val: boolean) => updateValue(field.key, !!val)"
+                          />
+
+                          <!-- Select for Enum -->
+                          <Select
+                            v-else-if="field.type === 'enum' && field.enum"
+                            :model-value="stringValue(field)"
+                            :disabled="field.readonly"
+                            @update:model-value="(val: string) => updateValue(field.key, val)"
+                          >
+                            <SelectTrigger class="h-8 text-xs w-full shadow-none bg-background/50 border-border/60">
+                              <SelectValue :placeholder="placeholderOf(field)" />
+                            </SelectTrigger>
+                            <SelectContent class="w-[--reka-select-trigger-width]">
+                              <SelectItem
+                                v-for="option in field.enum"
+                                :key="option"
+                                :value="option"
+                              >
+                                {{ option }}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+
+                          <!-- Secret Input -->
+                          <div
+                            v-else-if="field.type === 'secret'"
+                            class="relative w-full"
+                          >
+                            <Input
+                              :id="`bot-network-config-advanced-${field.key}`"
+                              :model-value="stringValue(field)"
+                              :type="visibleSecrets[field.key] ? 'text' : 'password'"
+                              :placeholder="placeholderOf(field)"
+                              :readonly="field.readonly"
+                              class="h-8 text-xs shadow-none pr-8 bg-background/50 border-border/60 focus:bg-background transition-colors w-full"
+                              @update:model-value="(val: string) => updateValue(field.key, val)"
+                            />
+                            <button
+                              type="button"
+                              class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                              @click="visibleSecrets[field.key] = !visibleSecrets[field.key]"
+                            >
+                              <component
+                                :is="visibleSecrets[field.key] ? EyeOff : Eye"
+                                class="size-3.5"
+                              />
+                            </button>
+                          </div>
+
+                          <!-- Number Input -->
+                          <Input
+                            v-else-if="field.type === 'number'"
+                            :id="`bot-network-config-advanced-${field.key}`"
+                            :model-value="numberValue(field)"
+                            type="number"
+                            :placeholder="placeholderOf(field)"
+                            :readonly="field.readonly"
+                            :min="field.constraint?.min"
+                            :max="field.constraint?.max"
+                            :step="field.constraint?.step ?? 1"
+                            :class="[
+                              'h-8 text-xs shadow-none w-full bg-background/50 border-border/60 focus:bg-background transition-colors',
+                              field.key.toLowerCase().includes('port') ? '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none' : ''
+                            ]"
+                            @update:model-value="(val: string) => updateNumber(field.key, val)"
+                          />
+
+                          <!-- Default Text Input -->
+                          <Input
+                            v-else
+                            :id="`bot-network-config-advanced-${field.key}`"
+                            :model-value="stringValue(field)"
+                            type="text"
+                            :placeholder="placeholderOf(field)"
+                            :readonly="field.readonly"
+                            class="h-8 text-xs shadow-none w-full bg-background/50 border-border/60 focus:bg-background transition-colors"
+                            @update:model-value="(val: string) => updateValue(field.key, val)"
+                          />
+                        </div>
+                      </div>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- SD-WAN Actions -->
+          <div class="flex justify-end gap-2 pt-2 border-t border-border/30">
+            <Button
+              variant="ghost"
+              size="sm"
+              class="h-8 text-[11px] font-medium px-4 shadow-none"
+              @click="handleCancel"
+            >
+              {{ $t('common.cancel') }}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              class="h-8 text-[11px] font-medium px-4 shadow-none"
+              :disabled="!hasChanges || isSaving"
+              @click="handleSaveWithEnable(false)"
+            >
+              <Spinner
+                v-if="isSaving && !form.overlay_enabled"
+                class="mr-1.5 size-3"
+              />
+              {{ $t('bots.settings.saveOnly') }}
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              class="h-8 text-[11px] font-medium px-4 shadow-none"
+              :disabled="!hasChanges || isSaving"
+              @click="handleSaveWithEnable(true)"
+            >
+              <Spinner
+                v-if="isSaving && form.overlay_enabled"
+                class="mr-1.5 size-3"
+              />
+              {{ $t('bots.settings.saveAndEnable') }}
+            </Button>
+          </div>
+        </template>
       </div>
     </div>
 
-    <!-- Exit Node card — independent from config form -->
+    <!-- Exit Node independent block -->
     <div
       v-if="showExitNodeSelector"
-      class="rounded-md border p-4 space-y-4"
+      class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none"
     >
-      <div class="space-y-1">
-        <div class="flex items-center justify-between gap-3">
-          <h4 class="text-xs font-medium">
+      <div class="flex items-start justify-between gap-3">
+        <div class="space-y-1">
+          <h4 class="text-xs font-medium text-foreground">
             {{ $t('bots.settings.networkExitNode') }}
           </h4>
-          <Button
-            variant="outline"
-            size="sm"
-            class="shrink-0"
-            :disabled="!shouldLoadNodeOptions || isNodeListLoading"
-            @click="handleRefreshNodes"
-          >
-            <Spinner
-              v-if="isNodeListLoading"
-              class="mr-1.5"
-            />
-            {{ $t('common.refresh') }}
-          </Button>
+          <p class="text-[11px] text-muted-foreground">
+            {{ $t('bots.settings.networkExitNodeSectionHint') }}
+          </p>
         </div>
-        <p class="text-xs text-muted-foreground">
-          {{ $t('bots.settings.networkExitNodeSectionHint') }}
-        </p>
+        <Button
+          variant="ghost"
+          size="sm"
+          class="shrink-0 h-7 text-[10px] text-muted-foreground px-2"
+          :disabled="!shouldLoadNodeOptions || isNodeListLoading"
+          @click="handleRefreshNodes"
+        >
+          <Spinner
+            v-if="isNodeListLoading"
+            class="mr-1.5 size-3"
+          />
+          {{ $t('common.refresh') }}
+        </Button>
       </div>
 
-      <NetworkNodeSelect
-        v-model="exitNodeValue"
-        :nodes="exitNodeOptions"
-        :placeholder="$t('bots.settings.networkExitNodePlaceholder')"
-      />
-
-      <p class="text-xs text-muted-foreground">
-        {{ nodeListHint }}
-      </p>
+      <div class="space-y-1.5">
+        <NetworkNodeSelect
+          v-model="exitNodeValue"
+          :nodes="exitNodeOptions"
+          :placeholder="$t('bots.settings.networkExitNodePlaceholder')"
+        />
+        <p class="text-[10px] text-muted-foreground">
+          {{ nodeListHint }}
+        </p>
+      </div>
 
+      <!-- Node Meta details (Single Column) -->
       <div
         v-if="selectedExitNodeMeta"
-        class="grid gap-3 md:grid-cols-2"
+        class="space-y-3 pt-3 border-t border-border/50"
       >
-        <div class="rounded-md border border-border bg-background/60 px-3 py-2">
-          <p class="text-xs text-muted-foreground">
+        <div class="space-y-1">
+          <div class="text-[11px] font-medium text-muted-foreground">
             {{ $t('bots.settings.networkExitNodeStatus') }}
-          </p>
-          <p class="mt-1 text-xs font-medium text-foreground">
+          </div>
+          <div class="font-mono text-[10px] leading-relaxed tracking-tight break-all rounded px-2 py-1 bg-secondary/30 opacity-60 grayscale border border-transparent">
             {{ selectedExitNodeMeta.online ? $t('bots.settings.networkExitNodeOnline') : $t('bots.settings.networkExitNodeOffline') }}
-          </p>
+          </div>
         </div>
-        <div class="rounded-md border border-border bg-background/60 px-3 py-2">
-          <p class="text-xs text-muted-foreground">
+        <div class="space-y-1">
+          <div class="text-[11px] font-medium text-muted-foreground">
             {{ $t('bots.settings.networkExitNodeAddresses') }}
-          </p>
-          <p class="mt-1 text-xs font-medium text-foreground break-all">
+          </div>
+          <div class="font-mono text-[10px] leading-relaxed tracking-tight break-all rounded px-2 py-1 bg-secondary/30 opacity-60 grayscale border border-transparent">
             {{ (selectedExitNodeMeta.addresses ?? []).join(', ') || '-' }}
-          </p>
+          </div>
         </div>
       </div>
     </div>
 
-    <div class="flex justify-end">
-      <Button
-        :disabled="!hasChanges || isSaving"
-        @click="handleSave"
-      >
-        <Spinner v-if="isSaving" />
-        {{ $t('bots.settings.save') }}
-      </Button>
-    </div>
+    <!-- Edit Dialog (Modal IDE for Raw JSON) -->
+    <Dialog v-model:open="isEditorDialogOpen">
+      <DialogContent class="sm:max-w-3xl max-h-[calc(100vh - 2rem)] sm:h-[70vh] flex flex-col overflow-hidden p-0 gap-0">
+        <DialogHeader class="shrink-0 p-4 border-b border-border/50 bg-background">
+          <DialogTitle class="text-sm font-semibold">
+            Edit Raw SD-WAN Configuration
+          </DialogTitle>
+          <DialogDescription class="text-[11px] leading-snug">
+            Advanced configuration via raw JSON. Modifications will reflect in the visual form.
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div class="flex-1 min-h-0 relative p-4 bg-muted/5">
+          <div class="absolute inset-4 rounded-md border border-border/50 bg-background/50 overflow-hidden flex flex-col shadow-sm">
+            <MonacoEditor
+              v-model="editorDraftRaw"
+              language="json"
+              class="flex-1 min-h-0"
+              :options="{
+                automaticLayout: true,
+                fixedOverflowWidgets: true,
+                minimap: { enabled: false },
+                scrollBeyondLastLine: false,
+                formatOnPaste: true,
+                formatOnType: true
+              }"
+            />
+          </div>
+        </div>
+
+        <DialogFooter class="shrink-0 p-4 border-t border-border/50 bg-background flex items-center justify-between gap-2">
+          <p
+            v-if="editorError"
+            class="text-[10px] text-warning/80"
+          >
+            {{ editorError }}
+          </p>
+          <div v-else />
+          <div class="flex items-center gap-2">
+            <DialogClose as-child>
+              <Button
+                variant="ghost"
+                size="sm"
+                class="h-8 text-xs font-medium px-4 shadow-none"
+              >
+                {{ $t('common.cancel') }}
+              </Button>
+            </DialogClose>
+            <Button
+              size="sm"
+              class="h-8 text-xs font-medium px-4 min-w-24 shadow-none bg-foreground text-background hover:bg-foreground/90"
+              :disabled="!!editorError"
+              @click="handleEditorSave"
+            >
+              {{ $t('common.save') }}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>
 
@@ -286,19 +761,24 @@ import {
   Button,
   Spinner,
   Switch,
+  Input,
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+  Textarea,
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose,
 } from '@memohai/ui'
-import { reactive, computed, watch, nextTick, onBeforeUnmount } from 'vue'
+import { SquarePen, ChevronDown, ChevronRight, Eye, EyeOff } from 'lucide-vue-next'
+import { reactive, computed, watch, nextTick, onBeforeUnmount, ref } from 'vue'
 import { toast } from 'vue-sonner'
 import { useI18n } from 'vue-i18n'
 import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
 import { getBotsByBotIdSettings, putBotsByBotIdSettings } from '@memohai/sdk'
 import type { SettingsSettings } from '@memohai/sdk'
-import ConfigSchemaForm from '@/components/config-schema-form/index.vue'
-import { cloneConfig } from '@/components/config-schema-form/utils'
-import type { ConfigSchema } from '@/components/config-schema-form/types'
+import { cloneConfig, getPathValue, setPathValue } from '@/components/config-schema-form/utils'
+import type { ConfigSchema, ConfigSchemaField } from '@/components/config-schema-form/types'
 import { resolveApiErrorMessage } from '@/utils/api-error'
 import OverlayProviderSelect from './network-provider-select.vue'
 import NetworkNodeSelect from './network-node-select.vue'
+import MonacoEditor from '@/components/monaco-editor/index.vue'
 import {
   getBotNetworkStatus,
   executeBotNetworkAction,
@@ -346,7 +826,8 @@ const selectedOverlayProviderMeta = computed(() =>
 const selectedNetworkCapabilities = computed(() =>
   selectedOverlayProviderMeta.value?.capabilities ?? null,
 )
-// Config schema excludes exit_node (managed by the dedicated Exit Node card).
+
+// Primary and Advanced schemas computed locally to avoid modifying the generic ConfigSchemaForm
 const selectedOverlayProviderSchema = computed<ConfigSchema | undefined>(() => {
   const schema = selectedOverlayProviderMeta.value?.config_schema as ConfigSchema | undefined
   if (!schema) return undefined
@@ -355,11 +836,122 @@ const selectedOverlayProviderSchema = computed<ConfigSchema | undefined>(() => {
     fields: (schema.fields ?? []).filter(field => field.key !== 'exit_node'),
   }
 })
+
+const primarySchema = computed<ConfigSchema | undefined>(() => {
+  if (!selectedOverlayProviderSchema.value) return undefined
+  return {
+    ...selectedOverlayProviderSchema.value,
+    fields: selectedOverlayProviderSchema.value.fields.filter(f => !f.collapsed)
+  }
+})
+
+const advancedSchema = computed<ConfigSchema | undefined>(() => {
+  if (!selectedOverlayProviderSchema.value) return undefined
+  // Map collapsed to false so the ConfigSchemaForm renders them flat. We handle the wrapper.
+  return {
+    ...selectedOverlayProviderSchema.value,
+    fields: selectedOverlayProviderSchema.value.fields
+      .filter(f => f.collapsed)
+      .map(f => ({ ...f, collapsed: false }))
+  }
+})
+
+const advancedSchemaGroups = computed(() => {
+  if (!advancedSchema.value) return []
+  const fields = advancedSchema.value.fields
+
+  const auth = fields.filter(f => (f.order ?? 0) >= 10 && (f.order ?? 0) < 12)
+  const network = fields.filter(f => (f.order ?? 0) >= 12 && (f.order ?? 0) < 20)
+  const environment = fields.filter(f => (f.order ?? 0) >= 20 && (f.order ?? 0) < 30)
+  const others = fields.filter(f => (f.order ?? 0) >= 30)
+
+  const groups = []
+  if (auth.length) groups.push({ title: t('mcp.oauth.title'), fields: auth })
+  if (network.length) groups.push({ title: t('sidebar.network'), fields: network })
+  if (environment.length) groups.push({ title: t('mcp.env'), fields: environment })
+  if (others.length) groups.push({ title: t('common.advanced'), fields: others })
+
+  return groups.map(g => ({
+    ...g,
+    fields: g.fields
+  }))
+})
+
 const showOverlayConfig = computed(() =>
   !!form.overlay_enabled
   && !!form.overlay_provider
   && !!selectedOverlayProviderSchema.value?.fields?.length,
 )
+
+const showAdvancedConfig = ref(false)
+
+// ---------------------------------------------------------------------------
+// Manual Field Rendering Helpers
+// ---------------------------------------------------------------------------
+const visibleSecrets = reactive<Record<string, boolean>>({})
+
+function getFieldValue(field: ConfigSchemaField) {
+  const current = getPathValue(form.overlay_config, field.key)
+  if (current !== undefined) return current
+  return field.default
+}
+
+function stringValue(field: ConfigSchemaField) {
+  const value = getFieldValue(field)
+  return typeof value === 'string' ? value : value == null ? '' : String(value)
+}
+
+function numberValue(field: ConfigSchemaField) {
+  const value = getFieldValue(field)
+  return typeof value === 'number' ? String(value) : value == null ? '' : String(value)
+}
+
+function placeholderOf(field: ConfigSchemaField) {
+  let base = field.placeholder || (field.example != null ? String(field.example) : '')
+
+  if (!base) {
+    const key = field.key.toLowerCase()
+    if (key.includes('key') || key.includes('token') || key.includes('secret')) {
+      base = 'tskey-auth-kru6P22CNTRL-...'
+    } else if (key.includes('url')) {
+      base = 'https://example.com'
+    } else if (key.includes('port')) {
+      base = '1080'
+    } else if (key.includes('host') || key.includes('addr')) {
+      base = '192.168.1.1'
+    } else if (key.includes('tag')) {
+      base = 'tag:bot,tag:server'
+    } else if (key.includes('arg') || key.includes('cmd')) {
+      base = '--verbose'
+    } else if (key.includes('user')) {
+      base = 'admin'
+    } else if (field.type === 'number') {
+      base = '60'
+    } else if (field.type === 'textarea') {
+      base = t('common.enterContent')
+    } else {
+      base = '...'
+    }
+  }
+
+  return t('common.placeholderPrefix', { example: base })
+}
+
+function updateValue(path: string, value: unknown) {
+  const next = cloneConfig(form.overlay_config)
+  setPathValue(next, path, value)
+  form.overlay_config = next
+}
+
+function updateNumber(path: string, value: string) {
+  const nextValue = value === '' ? undefined : Number(value)
+  updateValue(path, nextValue)
+}
+
+function isMultilineField(field: ConfigSchemaField) {
+  return field.type === 'textarea' || field.multiline
+}
+
 // Exit node selection only makes sense after the sidecar is authenticated and connected.
 const showExitNodeSelector = computed(() =>
   !!form.overlay_enabled
@@ -381,8 +973,7 @@ const isSelectedNetworkPersisted = computed(() =>
 const shouldLoadNetworkStatus = computed(() =>
   !!props.botId
   && persistedOverlayEnabled.value
-  && !!persistedOverlayProvider.value
-  && isSelectedNetworkPersisted.value,
+  && !!persistedOverlayProvider.value,
 )
 const shouldLoadNodeOptions = computed(() =>
   !!props.botId
@@ -443,6 +1034,40 @@ const { mutateAsync: runNetworkAction, isLoading: isLoggingOut } = useMutation({
   },
 })
 
+// ---------------------------------------------------------------------------
+// Editor state
+// ---------------------------------------------------------------------------
+const isEditorDialogOpen = ref(false)
+const editorDraftRaw = ref('')
+const editorError = ref('')
+
+watch(isEditorDialogOpen, (open) => {
+  if (open) {
+    editorDraftRaw.value = JSON.stringify(form.overlay_config, null, 2)
+    editorError.value = ''
+  }
+})
+
+watch(editorDraftRaw, (val) => {
+  try {
+    JSON.parse(val)
+    editorError.value = ''
+  } catch {
+    editorError.value = 'Invalid JSON format'
+  }
+})
+
+function handleEditorSave() {
+  try {
+    const parsed = JSON.parse(editorDraftRaw.value)
+    form.overlay_config = cloneConfig(parsed)
+    isEditorDialogOpen.value = false
+  } catch {
+    // Should be caught by watcher, but just in case
+    editorError.value = 'Invalid JSON format'
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Overlay state helpers
 // ---------------------------------------------------------------------------
@@ -512,7 +1137,6 @@ const isNetworkStatusPendingSave = computed(() =>
 
 const showOverlayStatusInNetworkCard = computed(() =>
   shouldLoadNetworkStatus.value
-  && !isNetworkStatusPendingSave.value
   && !!networkStatusData.value,
 )
 
@@ -527,9 +1151,8 @@ function workspaceStateDisplay(state: string) {
 }
 
 const workspaceStatusFields = computed(() => {
-  const status = networkStatusCard.value as NetworkBotStatus | { state: string; title?: string; description?: string } | null
-  if (!status || status.state === 'pending_save') return []
-  if (!('workspace' in status) || !status.workspace) return []
+  const status = networkStatusData.value
+  if (!status || !status.workspace) return []
   const ws = status.workspace
   const items: { label: string; value: string }[] = [
     { label: t('bots.settings.networkWorkspaceStateLabel'), value: workspaceStateDisplay(ws.state) },
@@ -545,8 +1168,8 @@ const workspaceStatusFields = computed(() => {
 })
 
 const overlayNetworkStatusFields = computed(() => {
-  const status = networkStatusCard.value as NetworkBotStatus | null
-  if (!status || status.state === 'pending_save') return []
+  const status = networkStatusData.value
+  if (!status) return []
   const details = status.details ?? {}
   const items = [
     { label: t('bots.settings.networkStatusState'), value: status.state },
@@ -631,6 +1254,23 @@ async function handleSave() {
   }
 }
 
+function handleCancel() {
+  if (settings.value) {
+    skipProviderChangeReset = true
+    form.overlay_enabled = settings.value.overlay_enabled ?? false
+    form.overlay_provider = settings.value.overlay_provider ?? ''
+    form.overlay_config = cloneConfig((settings.value.overlay_config as Record<string, unknown> | undefined) ?? {})
+    void nextTick(() => {
+      skipProviderChangeReset = false
+    })
+  }
+}
+
+async function handleSaveWithEnable(enable: boolean) {
+  form.overlay_enabled = enable
+  await handleSave()
+}
+
 async function handleRefreshNodes() {
   try {
     await refetchNodeList()
@@ -654,3 +1294,6 @@ async function handleLogout() {
   }
 }
 </script>
+
+<style scoped>
+</style>
diff --git a/apps/web/src/pages/bots/components/bot-overview.vue b/apps/web/src/pages/bots/components/bot-overview.vue
index 67d999de9..e51b9a898 100644
--- a/apps/web/src/pages/bots/components/bot-overview.vue
+++ b/apps/web/src/pages/bots/components/bot-overview.vue
@@ -1,40 +1,298 @@
+<template>
+  <div class="max-w-2xl mx-auto pb-12 space-y-5">
+    <!-- Top Action Bar -->
+    <div class="flex items-start justify-between pb-4 border-b border-border/50">
+      <div class="space-y-1">
+        <h3 class="text-sm font-semibold text-foreground">
+          {{ $t('bots.tabs.overview') }}
+        </h3>
+        <p class="text-[11px] text-muted-foreground">
+          {{ $t('bots.tabs.overviewSubtitle') }}
+        </p>
+      </div>
+      <div class="flex items-center gap-3">
+        <p class="text-[11px] text-muted-foreground/60 hidden sm:block mt-1 tracking-wide">
+          {{ $t('bots.checks.lastSync', { time: lastSyncTime }) }}
+        </p>
+        <Button
+          size="sm"
+          class="h-8 text-xs font-medium min-w-24 shadow-none mt-1"
+          :disabled="checksLoading"
+          @click="handleRefreshChecks"
+        >
+          <RotateCcw
+            v-if="!checksLoading"
+            class="size-3.5 shrink-0 mr-1.5"
+          />
+          <Spinner
+            v-else
+            class="size-3.5 shrink-0 mr-1.5"
+          />
+          {{ $t('common.refresh') }}
+        </Button>
+      </div>
+    </div>
+
+    <!-- Hero Section -->
+    <div class="space-y-4 rounded-md border p-4">
+      <!-- Section Header -->
+      <div class="space-y-1">
+        <h4 class="text-xs font-medium">
+          {{ $t('bots.checks.title') }}
+        </h4>
+        <p class="text-xs text-muted-foreground">
+          {{ $t('bots.checks.subtitle') }}
+        </p>
+      </div>
+
+      <!-- Metrics Grid -->
+      <div class="grid gap-3 sm:grid-cols-2">
+        <!-- Health Status Card -->
+        <div class="rounded-md border bg-background/70 p-3 flex flex-col justify-between">
+          <div class="space-y-2">
+            <p class="text-xs text-muted-foreground">
+              {{ $t('bots.checks.statusTitle') }}
+            </p>
+            <div class="flex items-center gap-2 mt-2">
+              <component 
+                :is="hasIssue ? AlertCircle : CheckCircle2" 
+                :class="[
+                  'w-5 h-5 shrink-0 transition-colors',
+                  hasIssue ? 'text-destructive' : 'text-foreground'
+                ]"
+              />
+              <p class="text-2xl font-semibold">
+                {{ hasIssue ? $t('bots.checks.status.issue') : $t('bots.checks.status.stable') }}
+              </p>
+            </div>
+          </div>
+          <div class="mt-3 min-h-[32px] flex items-center">
+            <p class="text-[11px] leading-4 text-muted-foreground break-words">
+              {{ checksSummaryText }}
+            </p>
+          </div>
+        </div>
+
+        <!-- System Vitality Card -->
+        <div class="rounded-md border bg-background/70 p-3 flex flex-col justify-between">
+          <div class="space-y-2">
+            <p class="text-xs text-muted-foreground">
+              {{ $t('bots.checks.vitalityTitle') }}
+            </p>
+            <div class="mt-2">
+              <span class="text-2xl font-semibold">{{ okCount }}</span>
+              <span class="text-xs font-medium text-muted-foreground ml-1">/ {{ totalCount }} {{ $t('bots.checks.vitalityUnit') }}</span>
+            </div>
+          </div>
+          
+          <!-- Segmented Progress Bar -->
+          <div class="mt-3 min-h-[32px] flex items-center w-full">
+            <div class="flex gap-1 h-1.5 w-full">
+              <div 
+                v-for="(check, index) in checks" 
+                :key="index"
+                class="h-full rounded-full transition-all duration-500"
+                :class="[
+                  check.status === 'ok' ? 'bg-brand' : 
+                  check.status === 'error' ? 'bg-destructive' : 'bg-muted-foreground/40',
+                  'flex-1'
+                ]"
+              />
+              <div
+                v-if="checks.length === 0"
+                class="h-full w-full bg-muted rounded-full"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Diagnostic Log Section -->
+    <div class="space-y-4 rounded-md border p-4">
+      <!-- Diagnostic Header and Controls -->
+      <div class="flex items-center justify-between">
+        <div class="space-y-1">
+          <h4 class="text-xs font-medium">
+            {{ $t('bots.checks.diagnosticTitle') }}
+          </h4>
+          <p class="text-xs text-muted-foreground">
+            {{ $t('bots.checks.diagnosticSubtitle') }}
+          </p>
+        </div>
+        <div
+          v-if="checks.length > 0"
+          class="flex gap-2"
+        >
+          <Button 
+            variant="ghost" 
+            size="sm" 
+            class="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+            @click="toggleAll(true)"
+          >
+            {{ $t('bots.checks.expandAll') }}
+          </Button>
+          <Button 
+            variant="ghost" 
+            size="sm" 
+            class="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+            @click="toggleAll(false)"
+          >
+            {{ $t('bots.checks.collapse') }}
+          </Button>
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <div 
+        v-if="!checksLoading && checks.length === 0" 
+        class="rounded-md border border-dashed p-4 text-center py-10"
+      >
+        <Activity class="w-5 h-5 text-muted-foreground/50 mx-auto mb-2" />
+        <p class="text-xs text-muted-foreground">
+          {{ $t('bots.checks.empty') }}
+        </p>
+      </div>
+
+      <!-- Loading State -->
+      <div
+        v-else-if="checksLoading && checks.length === 0"
+        class="space-y-2"
+      >
+        <div
+          v-for="i in 5"
+          :key="i"
+          class="rounded-md border transition-opacity opacity-60"
+        >
+          <div class="flex w-full items-center justify-between gap-3 px-3 py-2">
+            <div class="flex items-center gap-3 min-w-0 w-full">
+              <div class="w-4 h-4 shrink-0 rounded-full bg-muted/40 animate-pulse" />
+              <div class="min-w-0 space-y-0.5 w-full">
+                <div class="h-3 w-32 rounded bg-muted/40 animate-pulse" />
+              </div>
+            </div>
+            <div class="size-4 shrink-0 rounded-sm bg-muted/40 animate-pulse" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Smart Collapsible List -->
+      <div
+        v-else
+        class="space-y-2"
+      >
+        <Collapsible
+          v-for="item in checks"
+          :key="item.id"
+          :open="expandedIds.has(item.id)"
+          class="rounded-md border transition-opacity"
+          :class="item.status === 'ok' ? 'opacity-60 hover:opacity-100' : 'opacity-100'"
+        >
+          <CollapsibleTrigger 
+            class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left hover:bg-accent/40"
+            @click="toggleItem(item.id)"
+          >
+            <div class="flex items-center gap-3 min-w-0">
+              <component 
+                :is="getStatusIcon(item.status)" 
+                :class="['w-4 h-4 shrink-0', getStatusColor(item.status)]"
+              />
+              <div class="min-w-0 space-y-0.5">
+                <p class="text-xs font-medium leading-none truncate">
+                  {{ checkTitleLabel(item) }}
+                </p>
+                <p
+                  v-if="item.subtitle"
+                  class="text-[10px] text-muted-foreground truncate"
+                >
+                  {{ item.subtitle }}
+                </p>
+              </div>
+            </div>
+            <ChevronRight 
+              class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"
+              :class="{ 'rotate-90': expandedIds.has(item.id) }"
+            />
+          </CollapsibleTrigger>
+          
+          <CollapsibleContent>
+            <div class="space-y-3 border-t px-3 py-3">
+              <p class="text-xs text-foreground leading-relaxed">
+                {{ item.summary }}
+              </p>
+              
+              <!-- Code Block with Syntax Highlighting -->
+              <div
+                v-if="item.detail"
+                class="group/code relative rounded border bg-muted/30"
+              >
+                <div class="absolute right-1.5 top-1.5 opacity-0 group-hover/code:opacity-100 transition-opacity">
+                  <Button 
+                    variant="ghost" 
+                    size="icon" 
+                    class="h-6 w-6" 
+                    @click.stop="copyToClipboard(item.detail)"
+                  >
+                    <Copy class="w-3 h-3" />
+                  </Button>
+                </div>
+                <!-- eslint-disable-next-line vue/no-v-html -->
+                <pre class="p-3 font-mono text-[11px] leading-relaxed overflow-x-auto max-h-[240px] overflow-y-auto select-text whitespace-pre-wrap"><code v-html="highlightCode(item.detail)" /></pre>
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
-import { ref,computed,watch } from 'vue'
-import  {
-  type BotsBotCheck,
-  getBotsByIdChecks,
-  getBotsById
+import { ref, computed, watch } from 'vue'
+import { 
+  getBotsByIdChecks, 
+  getBotsById, 
+  type BotsBotCheck 
 } from '@memohai/sdk'
 import { useRoute } from 'vue-router'
 import { toast } from 'vue-sonner'
+import { useI18n } from 'vue-i18n'
+import { useQuery } from '@pinia/colada'
+import { 
+  Button, 
+  Spinner, 
+  Collapsible, 
+  CollapsibleTrigger, 
+  CollapsibleContent 
+} from '@memohai/ui'
+import { 
+  CheckCircle2, 
+  AlertCircle, 
+  AlertTriangle, 
+  XCircle, 
+  ChevronRight, 
+  RotateCcw, 
+  Activity,
+  Copy,
+  HelpCircle
+} from 'lucide-vue-next'
 import { resolveApiErrorMessage } from '@/utils/api-error'
 import { useBotStatusMeta } from '@/composables/useBotStatusMeta'
-import { useQuery } from '@pinia/colada'
-import { useI18n } from 'vue-i18n'
-import { Badge,Button,Spinner } from '@memohai/ui'
 import { useSyncedQueryParam } from '@/composables/useSyncedQueryParam'
 
+type BotCheck = BotsBotCheck
 
 const checksLoading = ref(false)
-
 const checks = ref<BotCheck[]>([])
+const expandedIds = ref<Set<string>>(new Set())
+const lastSyncTime = ref('--:--')
 
 const route = useRoute()
-
 const botId = computed(() => route.params.botId as string)
-
 const activeTab = useSyncedQueryParam('tab', 'overview')
-
-watch([activeTab, botId], ([tab]) => {
-  if (!botId.value) {
-    return
-  }
-  if (tab === 'overview') {
-    void loadChecks(true)
-  }
-}, { immediate: true })
-
 const { t } = useI18n()
+
+// Data Fetching
 const { data: bot } = useQuery({
   key: () => ['bot', botId.value],
   query: async () => {
@@ -44,170 +302,101 @@ const { data: bot } = useQuery({
   enabled: () => !!botId.value,
 })
 
+const { hasIssue } = useBotStatusMeta(bot, t)
 
-const {
-  hasIssue
-} = useBotStatusMeta(bot, t)
-
-type BotCheck = BotsBotCheck
-
-
-
-async function fetchChecks(id: string): Promise<BotCheck[]> {
-  const { data } = await getBotsByIdChecks({ path: { id }, throwOnError: true })
-  return data?.items ?? []
-}
+const okCount = computed(() => checks.value.filter(c => c.status === 'ok').length)
+const totalCount = computed(() => checks.value.length)
 
+// Watchers
+watch([activeTab, botId], ([tab]) => {
+  if (botId.value && tab === 'overview') {
+    void loadChecks(true)
+  }
+}, { immediate: true })
 
 async function loadChecks(showToast: boolean) {
   checksLoading.value = true
-  checks.value = []
   try {
-    checks.value = await fetchChecks(botId.value)
+    const { data } = await getBotsByIdChecks({ path: { id: botId.value }, throwOnError: true })
+    checks.value = data?.items ?? []
+    lastSyncTime.value = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+    
+    // Smart collapse logic: expand abnormal items by default
+    expandedIds.value = new Set(
+      checks.value.filter(c => c.status !== 'ok').map(c => c.id)
+    )
   } catch (error) {
     if (showToast) {
-      toast.error(resolveErrorMessage(error, t('bots.checks.loadFailed')))
+      toast.error(resolveApiErrorMessage(error, t('bots.checks.loadFailed')))
     }
   } finally {
     checksLoading.value = false
   }
 }
 
+// Interactivity
+function toggleItem(id: string) {
+  if (expandedIds.value.has(id)) {
+    expandedIds.value.delete(id)
+  } else {
+    expandedIds.value.add(id)
+  }
+}
+
+function toggleAll(expand: boolean) {
+  if (expand) {
+    expandedIds.value = new Set(checks.value.map(c => c.id))
+  } else {
+    expandedIds.value.clear()
+  }
+}
+
 async function handleRefreshChecks() {
   await loadChecks(true)
+  toast.info(t('common.refresh')) 
 }
 
-function resolveErrorMessage(error: unknown, fallback: string): string {
-  return resolveApiErrorMessage(error, fallback)
+function copyToClipboard(text: string) {
+  navigator.clipboard.writeText(text)
+  toast.success(t('common.copied'))
 }
 
-const checksSummaryText = computed(() => {
-  const issueCount = checks.value.filter((item) => item.status === 'warn' || item.status === 'error').length
-  if (issueCount > 0) {
-    return t('bots.checks.issueCount', { count: issueCount })
-  }
-  if (checks.value.length === 0) {
-    return t('bots.checks.empty')
-  }
-  return t('bots.checks.ok')
-})
+// Helper: Syntax Highlighting
+function highlightCode(text: string): string {
+  return text
+    .replace(/(error|fail|failed|denied)/gi, '<span class="text-destructive font-bold">$1</span>')
+    .replace(/(warn|warning)/gi, '<span class="text-warning font-bold">$1</span>')
+    .replace(/(\/([^\s\/\:]+\/)*[^\s\/\:]+)/g, '<span class="text-foreground underline decoration-muted-foreground/30">$1</span>')
+}
 
+// Helper: Icons & Colors
+function getStatusIcon(status: BotCheck['status']) {
+  if (status === 'error') return XCircle
+  if (status === 'warn') return AlertTriangle
+  if (status === 'ok') return CheckCircle2
+  return HelpCircle
+}
 
-function checkStatusLabel(status: BotCheck['status']): string {
-  if (status === 'error') return t('bots.checks.status.error')
-  if (status === 'warn') return t('bots.checks.status.warn')
-  if (status === 'unknown') return t('bots.checks.status.unknown')
-  return t('bots.checks.status.ok')
+function getStatusColor(status: BotCheck['status']) {
+  if (status === 'error') return 'text-destructive'
+  if (status === 'warn') return 'text-warning'
+  if (status === 'ok') return 'text-foreground/40' 
+  return 'text-muted-foreground'
 }
 
+// Original labels mapping (Locked Business Logic)
 function checkTitleLabel(item: BotCheck): string {
   const titleKey = (item.title_key ?? '').trim()
   if (titleKey) {
     const translated = t(titleKey)
-    if (translated !== titleKey) {
-      return translated
-    }
+    if (translated !== titleKey) return translated
   }
   return (item.type ?? '').trim() || (item.id ?? '').trim() || '-'
 }
 
-function checkStatusVariant(status: BotCheck['status']): 'default' | 'secondary' | 'destructive' {
-  if (status === 'error') return 'destructive'
-  if (status === 'warn') return 'secondary'
-  if (status === 'unknown') return 'secondary'
-  return 'default'
-}
-
+const checksSummaryText = computed(() => {
+  const issueCount = checks.value.filter((item) => item.status === 'warn' || item.status === 'error').length
+  if (issueCount > 0) return t('bots.checks.issueCount', { count: issueCount })
+  return checks.value.length === 0 ? t('bots.checks.empty') : t('bots.checks.ok')
+})
 </script>
-
-<template>
-  <div>
-    <div class="rounded-md border p-4">
-      <div class="flex items-center justify-between gap-2">
-        <div>
-          <p class="text-xs font-medium">
-            {{ $t('bots.checks.title') }}
-          </p>
-          <p class="text-xs text-muted-foreground">
-            {{ $t('bots.checks.subtitle') }}
-          </p>
-        </div>
-        <Button
-          variant="outline"
-          size="sm"
-          :disabled="checksLoading"
-          @click="handleRefreshChecks"
-        >
-          <Spinner
-            v-if="checksLoading"
-            class="mr-1.5"
-          />
-          {{ $t('common.refresh') }}
-        </Button>
-      </div>
-      <div class="mt-3 flex items-center gap-2 text-xs">
-        <Badge
-          :variant="hasIssue ? 'destructive' : 'default'"
-          class="text-xs"
-        >
-          {{ checksSummaryText }}
-        </Badge>
-      </div>
-
-      <div
-        v-if="checksLoading && checks.length === 0"
-        class="mt-4 flex items-center gap-2 text-xs text-muted-foreground"
-      >
-        <Spinner />
-        <span>{{ $t('common.loading') }}</span>
-      </div>
-
-      <p
-        v-else-if="checks.length === 0"
-        class="mt-4 text-xs text-muted-foreground"
-      >
-        {{ $t('bots.checks.empty') }}
-      </p>
-
-      <ul
-        v-else
-        class="mt-4 divide-y"
-      >
-        <li
-          v-for="item in checks"
-          :key="item.id"
-          class="py-3 first:pt-0 last:pb-0"
-        >
-          <div class="flex items-center justify-between gap-2">
-            <div class="min-w-0">
-              <p class="font-mono text-xs">
-                {{ checkTitleLabel(item) }}
-              </p>
-              <p
-                v-if="item.subtitle"
-                class="mt-0.5 text-xs text-muted-foreground"
-              >
-                {{ item.subtitle }}
-              </p>
-            </div>
-            <Badge
-              :variant="checkStatusVariant(item.status)"
-              class="text-[10px]"
-            >
-              {{ checkStatusLabel(item.status) }}
-            </Badge>
-          </div>
-          <p class="mt-2 text-xs">
-            {{ item.summary }}
-          </p>
-          <p
-            v-if="item.detail"
-            class="mt-1 text-xs text-muted-foreground break-all"
-          >
-            {{ item.detail }}
-          </p>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/apps/web/src/pages/bots/components/bot-schedule.vue b/apps/web/src/pages/bots/components/bot-schedule.vue
index e0907e52a..c9a6870d3 100644
--- a/apps/web/src/pages/bots/components/bot-schedule.vue
+++ b/apps/web/src/pages/bots/components/bot-schedule.vue
@@ -1,364 +1,511 @@
 <template>
-  <div class="space-y-4">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <h3 class="text-sm font-medium">
+  <div class="max-w-4xl mx-auto pb-6 space-y-5">
+    <!-- Sovereign Header -->
+    <header class="pb-4 border-b border-border/50 sticky top-0 bg-background/95 backdrop-blur z-30 pt-4 -mt-4 flex items-center justify-between gap-4">
+      <div class="space-y-1">
+        <h2 class="text-sm font-semibold text-foreground flex items-center gap-2">
           {{ $t('bots.schedule.title') }}
-        </h3>
-        <Badge
-          v-if="schedules.length"
-          variant="secondary"
-          class="text-xs"
-        >
-          {{ schedules.length }}
-        </Badge>
+          <Badge
+            v-if="schedules.length"
+            variant="secondary"
+            class="text-[10px] h-5 px-1.5 font-mono"
+          >
+            {{ schedules.length }}
+          </Badge>
+        </h2>
+        <p class="text-[11px] leading-snug text-muted-foreground max-w-md">
+          {{ $t('bots.schedule.subtitle') }}
+        </p>
       </div>
-      <div class="flex items-center gap-2">
+      <div class="flex shrink-0 flex-wrap justify-end gap-2">
         <Button
           variant="outline"
           size="sm"
-          :disabled="isLoading"
+          :disabled="isLoading || isRefreshing"
+          class="shadow-none"
           @click="handleRefresh"
         >
           <Spinner
-            v-if="isLoading"
-            class="mr-2 size-4"
+            v-if="isLoading || isRefreshing"
+            class="mr-1.5"
+          />
+          <RefreshCw
+            v-else
+            class="mr-1.5 size-3.5 text-muted-foreground"
           />
           {{ $t('common.refresh') }}
         </Button>
         <Button
           v-if="!formVisible"
+          variant="secondary"
           size="sm"
+          class="shadow-none"
           @click="handleNew"
         >
-          <Plus class="mr-1 size-4" />
+          <Plus class="mr-1.5 size-3.5" />
           {{ $t('bots.schedule.create') }}
         </Button>
       </div>
-    </div>
+    </header>
 
-    <!-- Inline form -->
-    <div
-      v-if="formVisible"
-      class="rounded-md border p-4 space-y-4"
-    >
-      <div class="flex items-center justify-between">
-        <h4 class="text-sm font-medium">
-          {{ formMode === 'create' ? $t('bots.schedule.create') : $t('bots.schedule.edit') }}
-        </h4>
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          class="size-7"
-          @click="handleFormCancel"
-        >
-          <X class="size-4" />
-        </Button>
+    <div class="space-y-6">
+      <!-- Loading State -->
+      <div
+        v-if="isLoading && schedules.length === 0"
+        class="flex items-center gap-2 text-xs text-muted-foreground"
+      >
+        <Spinner />
+        <span>{{ $t('common.loading') }}</span>
       </div>
 
-      <form @submit.prevent="handleFormSubmit">
-        <div class="flex flex-col gap-4">
-          <div class="flex items-end gap-3">
-            <div class="space-y-1.5 flex-1 min-w-0">
-              <Label for="schedule-name">
-                {{ $t('bots.schedule.form.name') }}
-              </Label>
-              <Input
-                id="schedule-name"
-                v-model="form.name"
-                :placeholder="$t('bots.schedule.form.namePlaceholder')"
-              />
-            </div>
-            <div class="flex items-center gap-2 h-9 shrink-0">
-              <Label
-                class="cursor-pointer text-xs"
-                @click="form.enabled = !form.enabled"
-              >
-                {{ $t('bots.schedule.form.enabled') }}
-              </Label>
-              <Switch
-                :model-value="form.enabled"
-                @update:model-value="(v: boolean) => form.enabled = !!v"
-              />
-            </div>
-          </div>
-
-          <div class="space-y-1.5">
-            <Label
-              for="schedule-description"
-              class="flex items-center gap-1.5"
-            >
-              {{ $t('bots.schedule.form.description') }}
-              <span class="text-[11px] text-muted-foreground font-normal">
-                ({{ $t('common.optional') }})
-              </span>
-            </Label>
-            <Input
-              id="schedule-description"
-              v-model="form.description"
-              :placeholder="$t('bots.schedule.form.descriptionPlaceholder')"
-            />
-          </div>
-
-          <div class="space-y-1.5">
-            <Label for="schedule-command">
-              {{ $t('bots.schedule.form.command') }}
-            </Label>
-            <Textarea
-              id="schedule-command"
-              v-model="form.command"
-              class="text-xs"
-              :placeholder="$t('bots.schedule.form.commandPlaceholder')"
-              rows="3"
-            />
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.schedule.form.commandHint') }}
-            </p>
-          </div>
-
-          <div class="space-y-1.5">
-            <Label>{{ $t('bots.schedule.form.pattern') }}</Label>
-            <SchedulePatternBuilder
-              :state="patternState"
-              :timezone="botTimezone"
-              @update:state="(next) => patternState = next"
-            />
+      <!-- Empty State -->
+      <div
+        v-else-if="!isLoading && schedules.length === 0 && !formVisible"
+        class="space-y-6"
+      >
+        <div class="flex flex-col items-center justify-center py-10 border border-border/40 border-dashed rounded-lg bg-muted/5">
+          <div class="size-10 rounded-full bg-muted/20 flex items-center justify-center mb-4">
+            <Calendar class="size-5 text-muted-foreground" />
           </div>
+          <p class="text-sm font-medium text-foreground mb-1">
+            {{ $t('bots.schedule.empty') }}
+          </p>
+          <Button
+            size="sm"
+            variant="outline"
+            class="shadow-none h-8 text-xs mt-3 bg-background border-border/40"
+            @click="handleNew"
+          >
+            <Plus class="mr-1.5 size-3.5" />
+            {{ $t('bots.schedule.create') }}
+          </Button>
+        </div>
+      </div>
 
-          <div class="space-y-1.5">
-            <div class="flex items-center justify-between">
-              <Label>{{ $t('bots.schedule.form.maxCalls') }}</Label>
-              <div class="flex items-center gap-2">
-                <Switch
-                  :model-value="maxCallsUnlimited"
-                  @update:model-value="(v: boolean) => handleMaxCallsUnlimited(!!v)"
-                />
-                <span class="text-xs text-muted-foreground">
-                  {{ $t('bots.schedule.form.maxCallsUnlimited') }}
-                </span>
+      <template v-else>
+        <!-- Top Pinned Form -->
+        <div
+          v-if="formVisible"
+          class="bg-background border border-border/60 rounded-md flex flex-col shadow-none"
+        >
+          <div class="p-4 border-b border-border/40 flex items-center justify-between bg-muted/10">
+            <div class="space-y-0.5">
+              <h4 class="text-sm font-semibold text-foreground">
+                {{ formMode === 'create' ? $t('bots.schedule.create') : $t('bots.schedule.edit') }}
+              </h4>
+              <div
+                v-if="editingSchedule"
+                class="text-[10px] text-muted-foreground/80 font-mono flex items-center gap-1.5"
+              >
+                <span>ID: {{ editingSchedule.id }}</span>
               </div>
             </div>
-            <Input
-              v-if="!maxCallsUnlimited"
-              :model-value="form.maxCalls ?? 1"
-              type="number"
-              :min="1"
-              :placeholder="'1'"
-              @update:model-value="(v) => form.maxCalls = Math.max(1, Math.floor(Number(v) || 1))"
-            />
-          </div>
-
-          <p
-            v-if="submitError"
-            class="text-xs text-destructive"
-          >
-            {{ submitError }}
-          </p>
-
-          <div class="flex justify-end gap-2 pt-2">
             <Button
-              type="button"
-              variant="outline"
-              size="sm"
+              variant="ghost"
+              size="icon"
+              class="size-7 text-muted-foreground hover:bg-accent/40"
               @click="handleFormCancel"
             >
-              {{ $t('common.cancel') }}
-            </Button>
-            <Button
-              type="submit"
-              size="sm"
-              :disabled="!canSubmit || isSaving"
-            >
-              <Spinner
-                v-if="isSaving"
-                class="mr-1"
-              />
-              {{ formMode === 'create' ? $t('common.create') : $t('common.save') }}
+              <X class="size-4" />
             </Button>
           </div>
-        </div>
-      </form>
-    </div>
-
-    <!-- Loading -->
-    <div
-      v-if="isLoading && schedules.length === 0"
-      class="flex items-center justify-center py-8 text-xs text-muted-foreground"
-    >
-      <Spinner class="mr-2" />
-      {{ $t('common.loading') }}
-    </div>
+          
+          <form
+            class="p-4 space-y-6"
+            @submit.prevent="handleFormSubmit"
+          >
+            <div class="space-y-4">
+              <!-- Name & Enabled -->
+              <div class="flex items-end gap-4">
+                <div class="space-y-1.5 flex-1 min-w-0">
+                  <Label
+                    for="schedule-name"
+                    class="text-xs font-medium"
+                  >{{ $t('bots.schedule.form.name') }}</Label>
+                  <Input
+                    id="schedule-name"
+                    v-model="form.name"
+                    :placeholder="$t('bots.schedule.form.namePlaceholder')"
+                    class="h-8 text-xs shadow-none border-border/60 bg-transparent"
+                  />
+                </div>
+                <div class="flex items-center gap-2 h-8 shrink-0 bg-muted/20 px-3 rounded-md border border-border/40">
+                  <Label
+                    class="cursor-pointer text-[11px] text-muted-foreground"
+                    @click="form.enabled = !form.enabled"
+                  >
+                    {{ $t('bots.schedule.form.enabled') }}
+                  </Label>
+                  <Switch
+                    :model-value="form.enabled"
+                    @update:model-value="(v: boolean) => form.enabled = !!v"
+                  />
+                </div>
+              </div>
 
-    <!-- Empty -->
-    <div
-      v-else-if="!isLoading && schedules.length === 0 && !formVisible"
-      class="flex flex-col items-center justify-center py-12 text-center"
-    >
-      <div class="rounded-full bg-muted p-3 mb-4">
-        <Calendar
-          class="size-6 text-muted-foreground"
-        />
-      </div>
-      <p class="text-xs text-muted-foreground mb-3">
-        {{ $t('bots.schedule.empty') }}
-      </p>
-      <Button
-        size="sm"
-        variant="outline"
-        @click="handleNew"
-      >
-        <Plus class="mr-1 size-4" />
-        {{ $t('bots.schedule.create') }}
-      </Button>
-    </div>
+              <!-- Description -->
+              <div class="space-y-1.5">
+                <Label
+                  for="schedule-description"
+                  class="text-xs font-medium flex items-center gap-1.5"
+                >
+                  {{ $t('bots.schedule.form.description') }}
+                  <span class="text-[10px] text-muted-foreground font-normal">({{ $t('common.optional') }})</span>
+                </Label>
+                <Input
+                  id="schedule-description"
+                  v-model="form.description"
+                  :placeholder="$t('bots.schedule.form.descriptionPlaceholder')"
+                  class="h-8 text-xs shadow-none border-border/60 bg-transparent"
+                />
+              </div>
+              
+              <!-- Command -->
+              <div class="space-y-1.5">
+                <Label
+                  for="schedule-command"
+                  class="text-xs font-medium"
+                >{{ $t('bots.schedule.form.command') }}</Label>
+                <div class="relative">
+                  <Textarea
+                    id="schedule-command"
+                    v-model="form.command"
+                    class="text-xs shadow-none border-border/60 min-h-[60px] bg-transparent font-mono pr-8"
+                    :placeholder="$t('bots.schedule.form.commandPlaceholder')"
+                    rows="2"
+                  />
+                </div>
+                <p class="text-[10px] text-muted-foreground">
+                  {{ $t('bots.schedule.form.commandHint') }}
+                </p>
+              </div>
 
-    <!-- Table -->
-    <template v-else-if="schedules.length > 0">
-      <div class="rounded-md border overflow-hidden">
-        <table class="w-full text-xs">
-          <thead>
-            <tr class="border-b bg-muted/50">
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.schedule.name') }}
-              </th>
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.schedule.pattern') }}
-              </th>
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.schedule.enabled') }}
-              </th>
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.schedule.calls') }}
-              </th>
-              <th class="px-4 py-2 text-left font-medium">
-                {{ $t('bots.schedule.updatedAt') }}
-              </th>
-              <th class="px-4 py-2 text-right font-medium w-[1%]">
-                {{ $t('bots.schedule.actions') }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="item in pagedSchedules"
-              :key="item.id"
-              class="border-b last:border-0 hover:bg-muted/30"
-            >
-              <td class="px-4 py-2 font-medium align-top">
-                <div>{{ item.name }}</div>
-                <div class="text-xs text-muted-foreground line-clamp-1">
-                  {{ item.description }}
+              <!-- Pattern Section -->
+              <div class="space-y-3 relative">
+                <!-- Sticky Header Container -->
+                <div class="sticky top-[56px] z-20 bg-background/95 backdrop-blur-md pt-2 pb-1 -mt-2">
+                  <Label class="text-xs font-medium block mb-2">{{ $t('bots.schedule.form.pattern') }}</Label>
+                  
+                  <!-- Cron Expression Card -->
+                  <div class="bg-muted/10 border border-border/40 rounded-lg p-4 space-y-3">
+                    <div class="flex items-center justify-between">
+                      <Label class="text-[11px] font-medium text-muted-foreground">{{ $t('bots.schedule.form.cronCode') }}</Label>
+                      <div class="flex items-center gap-3">
+                        <p
+                          v-if="!isValidCron(manualCron)"
+                          class="text-[11px] text-destructive tracking-tight"
+                        >
+                          {{ $t('bots.schedule.form.invalidPattern') }}
+                        </p>
+                        <p class="text-[10px] text-muted-foreground">
+                          {{ $t('bots.schedule.form.manualEditHint') }}
+                        </p>
+                      </div>
+                    </div>
+                    <Input
+                      v-model="manualCron"
+                      class="w-full bg-background border border-border/40 rounded-md px-3 py-2 font-mono text-[11px] text-foreground focus:outline-none shadow-none h-8"
+                    />
+                  </div>
                 </div>
-              </td>
-              <td class="px-4 py-2 align-top">
-                <code class="text-xs bg-muted px-1.5 py-0.5 rounded font-mono">
-                  {{ item.pattern }}
-                </code>
-                <div
-                  v-if="describeItem(item.pattern)"
-                  class="text-[11px] text-muted-foreground mt-1"
-                >
-                  {{ describeItem(item.pattern) }}
+
+                <!-- Visual Builder Card -->
+                <div class="bg-muted/10 rounded-lg border border-border/40 p-4 space-y-4">
+                  <Label class="text-[11px] font-medium text-muted-foreground">{{ $t('bots.schedule.form.visualBuilder') }}</Label>
+                  <SchedulePatternBuilder
+                    :state="patternState"
+                    :timezone="botTimezone"
+                    @update:state="(next) => patternState = next"
+                  />
                 </div>
-              </td>
-              <td class="px-4 py-2 align-top">
+              </div>
+
+              <!-- Max Calls -->
+              <div class="bg-muted/10 border border-border/40 rounded-lg p-4 flex items-center justify-between gap-4">
+                <Label class="text-xs font-medium shrink-0">{{ $t('bots.schedule.form.maxCalls') }}</Label>
                 <div class="flex items-center gap-2">
-                  <Switch
-                    :model-value="!!item.enabled"
-                    :disabled="busyIds.has(item.id || '')"
-                    @update:model-value="(val: boolean) => handleToggleEnabled(item, !!val)"
+                  <Input 
+                    v-if="!maxCallsUnlimited" 
+                    :model-value="form.maxCalls ?? 1" 
+                    type="number" 
+                    :min="1" 
+                    placeholder="1" 
+                    class="h-8 text-xs shadow-none border-border/60 bg-transparent w-20 px-2" 
+                    @update:model-value="(v) => form.maxCalls = Math.max(1, Math.floor(Number(v) || 1))" 
                   />
-                  <span class="text-xs text-muted-foreground">
-                    {{ item.enabled ? $t('bots.schedule.statusEnabled') : $t('bots.schedule.statusDisabled') }}
-                  </span>
+                  <div class="flex items-center gap-2 h-8 shrink-0 bg-muted/20 px-3 rounded-md border border-border/40">
+                    <Label
+                      class="cursor-pointer text-[11px] text-muted-foreground"
+                      @click="handleMaxCallsUnlimited(!maxCallsUnlimited)"
+                    >
+                      {{ $t('bots.schedule.form.maxCallsUnlimited') }}
+                    </Label>
+                    <Switch
+                      :model-value="maxCallsUnlimited"
+                      @update:model-value="(v: boolean) => handleMaxCallsUnlimited(!!v)"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <p
+                v-if="submitError"
+                class="text-[11px] text-destructive"
+              >
+                {{ submitError }}
+              </p>
+            </div>
+
+            <!-- Form Actions -->
+            <div class="flex justify-end gap-2 pt-4 border-t border-border/40">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                class="shadow-none h-8 text-xs font-medium"
+                @click="handleFormCancel"
+              >
+                {{ $t('common.cancel') }}
+              </Button>
+              <Button
+                type="submit"
+                size="sm"
+                :disabled="!canSubmit || isSaving"
+                class="shadow-none h-8 text-xs font-medium"
+              >
+                <Spinner
+                  v-if="isSaving"
+                  class="mr-1.5 size-3.5"
+                />
+                {{ formMode === 'create' ? $t('common.create') : $t('common.save') }}
+              </Button>
+            </div>
+          </form>
+
+          <!-- Danger Zone (Only for Edit) -->
+          <div
+            v-if="formMode === 'edit' && editingSchedule"
+            class="p-4 pt-0"
+          >
+            <div class="pt-4">
+              <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                  <div class="space-y-0.5">
+                    <h4 class="text-xs font-medium text-destructive">
+                      {{ $t('common.dangerZone') }}
+                    </h4>
+                    <p class="text-[11px] text-muted-foreground">
+                      {{ $t('bots.schedule.dangerZoneDesc') }}
+                    </p>
+                  </div>
+                  <div class="flex justify-end shrink-0">
+                    <ConfirmPopover
+                      :message="$t('bots.schedule.deleteConfirm', { name: editingSchedule.name })"
+                      :confirm-text="$t('bots.schedule.delete')"
+                      :loading="busyIds.has(editingSchedule.id || '')"
+                      @confirm="handleDelete(editingSchedule); formVisible = false"
+                    >
+                      <template #trigger>
+                        <button
+                          data-slot="popover-trigger"
+                          class="[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 has-[>svg]:px-2.5 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-lg gap-1.5 px-3 min-w-28 h-8 text-xs font-medium shadow-none"
+                          type="button"
+                          aria-haspopup="dialog"
+                          aria-expanded="false"
+                        >
+                          <Spinner
+                            v-if="busyIds.has(editingSchedule.id || '')"
+                            class="mr-1.5 size-3.5"
+                          />
+                          {{ $t('common.delete') }}
+                        </button>
+                      </template>
+                    </ConfirmPopover>
+                  </div>
                 </div>
-              </td>
-              <td class="px-4 py-2 text-muted-foreground align-top">
-                {{ item.current_calls ?? 0 }} / {{ formatMaxCalls(item) }}
-              </td>
-              <td class="px-4 py-2 text-muted-foreground align-top">
-                {{ formatDateTime(item.updated_at) }}
-              </td>
-              <td class="px-4 py-2 align-top text-right whitespace-nowrap">
-                <div class="flex items-center justify-end gap-1">
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    class="size-7"
-                    :aria-label="$t('bots.schedule.edit')"
-                    @click="handleEdit(item)"
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- High Density List (Table Mode) -->
+        <div
+          v-if="schedules.length > 0"
+          class="bg-background border border-border/60 rounded-md shadow-none flex flex-col overflow-hidden"
+        >
+          <div class="overflow-x-auto">
+            <table class="w-full text-xs border-collapse min-w-[800px]">
+              <thead>
+                <tr class="border-b border-border/50 bg-muted/40">
+                  <th class="px-4 py-2.5 text-left font-semibold text-foreground/80 whitespace-nowrap">
+                    {{ $t('common.name') }}
+                  </th>
+                  <th class="px-4 py-2.5 text-left font-semibold text-foreground/80 whitespace-nowrap">
+                    {{ $t('bots.schedule.form.pattern') }}
+                  </th>
+                  <th class="px-4 py-2.5 text-left font-semibold text-foreground/80 whitespace-nowrap">
+                    {{ $t('bots.schedule.form.enabled') }}
+                  </th>
+                  <th class="px-4 py-2.5 text-left font-semibold text-foreground/80 whitespace-nowrap">
+                    {{ $t('bots.schedule.form.maxCalls') }}
+                  </th>
+                  <th class="px-4 py-2.5 text-left font-semibold text-foreground/80 whitespace-nowrap">
+                    {{ $t('common.updatedAt') }}
+                  </th>
+                  <th class="px-4 py-2.5 text-right font-semibold text-foreground/80 w-[1%] whitespace-nowrap">
+                    {{ $t('common.actions') }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-border/50">
+                <tr 
+                  v-for="item in pagedSchedules" 
+                  :key="item.id" 
+                  class="hover:bg-muted/30 transition-colors group cursor-pointer" 
+                  @click="handleEdit(item)"
+                >
+                  <!-- Identity -->
+                  <td class="px-4 py-3 align-middle min-w-[200px]">
+                    <div class="font-medium text-foreground">
+                      {{ item.name }}
+                    </div>
+                    <div
+                      v-if="item.description"
+                      class="text-[11px] text-muted-foreground mt-0.5 line-clamp-1 leading-relaxed"
+                    >
+                      {{ item.description }}
+                    </div>
+                    <div class="text-[9px] font-mono text-muted-foreground/80 mt-2 uppercase tracking-tight">
+                      ID: {{ item.id }}
+                    </div>
+                  </td>
+
+                  <!-- Pattern -->
+                  <td class="px-4 py-3 align-middle whitespace-nowrap">
+                    <div class="font-mono text-[10px] text-foreground font-medium">
+                      {{ item.pattern }}
+                    </div>
+                    <div class="text-[11px] text-muted-foreground mt-1 line-clamp-1">
+                      {{ describeItem(item.pattern) || '-' }}
+                    </div>
+                  </td>
+
+                  <!-- Enabled -->
+                  <td
+                    class="px-4 py-3 align-middle whitespace-nowrap"
+                    @click.stop
                   >
-                    <Pencil class="size-3.5" />
-                  </Button>
-                  <ConfirmPopover
-                    :message="$t('bots.schedule.deleteConfirm', { name: item.name })"
-                    :confirm-text="$t('bots.schedule.delete')"
-                    :loading="busyIds.has(item.id || '')"
-                    @confirm="handleDelete(item)"
+                    <div class="flex items-center gap-2.5">
+                      <Switch 
+                        :model-value="!!item.enabled" 
+                        :disabled="busyIds.has(item.id || '')" 
+                        class="scale-90 origin-left" 
+                        @update:model-value="(val: boolean) => handleToggleEnabled(item, !!val)"
+                      />
+                      <span
+                        class="text-[11px] font-semibold min-w-[42px] transition-colors"
+                        :class="item.enabled ? 'text-emerald-600 dark:text-emerald-400' : 'text-foreground/70'"
+                      >
+                        {{ item.enabled ? $t('common.enabled') : $t('common.disabled') }}
+                      </span>
+                    </div>
+                  </td>
+
+                  <!-- Telemetry -->
+                  <td class="px-4 py-3 align-middle whitespace-nowrap text-[11px]">
+                    <div class="flex items-center gap-1.5">
+                      <span class="text-foreground font-semibold">{{ item.current_calls ?? 0 }}</span>
+                      <span class="text-muted-foreground/30 text-[10px]">/</span>
+                      <span class="text-muted-foreground font-medium">{{ formatMaxCalls(item) }}</span>
+                    </div>
+                  </td>
+
+                  <!-- Timestamp -->
+                  <td class="px-4 py-3 align-middle text-[11px] text-muted-foreground/90 whitespace-nowrap font-medium">
+                    {{ formatDateTime(item.updated_at) }}
+                  </td>
+
+                  <!-- Actions -->
+                  <td
+                    class="px-4 py-3 align-middle text-right whitespace-nowrap"
+                    @click.stop
                   >
-                    <template #trigger>
-                      <Button
-                        size="icon"
-                        variant="ghost"
-                        class="size-7 text-destructive hover:text-destructive"
-                        :aria-label="$t('bots.schedule.delete')"
+                    <div class="flex items-center justify-end gap-1">
+                      <Button 
+                        variant="ghost" 
+                        size="icon" 
+                        class="size-7 text-foreground/70 hover:text-foreground hover:bg-accent/40 shadow-none transition-colors"
+                        @click="handleEdit(item)"
                       >
-                        <Trash2 class="size-3.5" />
+                        <Pencil class="size-3.5" />
                       </Button>
-                    </template>
-                  </ConfirmPopover>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+                      <ConfirmPopover
+                        :message="$t('bots.schedule.deleteConfirm', { name: item.name })"
+                        :confirm-text="$t('bots.schedule.delete')"
+                        :loading="busyIds.has(item.id || '')"
+                        @confirm="handleDelete(item)"
+                      >
+                        <template #trigger>
+                          <Button 
+                            variant="ghost" 
+                            size="icon" 
+                            class="size-7 text-foreground/70 hover:text-destructive hover:bg-destructive/10 shadow-none transition-colors"
+                          >
+                            <Trash2 class="size-3.5" />
+                          </Button>
+                        </template>
+                      </ConfirmPopover>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
 
-      <!-- Pagination -->
-      <div
-        v-if="totalPages > 1"
-        class="flex items-center justify-between pt-4"
-      >
-        <span class="text-xs text-muted-foreground whitespace-nowrap">
-          {{ paginationSummary }}
-        </span>
-        <Pagination
-          :total="schedules.length"
-          :items-per-page="PAGE_SIZE"
-          :sibling-count="1"
-          :page="currentPage"
-          show-edges
-          @update:page="currentPage = $event"
-        >
-          <PaginationContent v-slot="{ items }">
-            <PaginationFirst />
-            <PaginationPrevious />
-            <template
-              v-for="(item, index) in items"
-              :key="index"
+          <!-- Pagination -->
+          <div
+            v-if="totalPages > 1"
+            class="flex items-center justify-between p-4 border-t border-border/40 bg-muted/5"
+          >
+            <span class="text-[11px] text-muted-foreground whitespace-nowrap">{{ paginationSummary }}</span>
+            <Pagination
+              :total="schedules.length"
+              :items-per-page="PAGE_SIZE"
+              :sibling-count="1"
+              :page="currentPage"
+              show-edges
+              @update:page="currentPage = $event"
             >
-              <PaginationEllipsis
-                v-if="item.type === 'ellipsis'"
-                :index="index"
-              />
-              <PaginationItem
-                v-else
-                :value="item.value"
-                :is-active="item.value === currentPage"
-              />
-            </template>
-            <PaginationNext />
-            <PaginationLast />
-          </PaginationContent>
-        </Pagination>
-      </div>
-    </template>
+              <PaginationContent v-slot="{ items }">
+                <PaginationFirst />
+                <PaginationPrevious />
+                <template
+                  v-for="(item, index) in items"
+                  :key="index"
+                >
+                  <PaginationEllipsis
+                    v-if="item.type === 'ellipsis'"
+                    :index="index"
+                  />
+                  <PaginationItem
+                    v-else
+                    :value="item.value"
+                    :is-active="item.value === currentPage"
+                  />
+                </template>
+                <PaginationNext />
+                <PaginationLast />
+              </PaginationContent>
+            </Pagination>
+          </div>
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Calendar, Pencil, Plus, Trash2, X } from 'lucide-vue-next'
+import { Calendar, Pencil, Plus, Trash2, X, RefreshCw } from 'lucide-vue-next'
 import { ref, computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
@@ -401,6 +548,7 @@ const props = defineProps<{
 const { t, locale } = useI18n()
 
 const isLoading = ref(false)
+const isRefreshing = ref(false)
 const schedules = ref<ScheduleSchedule[]>([])
 const currentPage = ref(1)
 const PAGE_SIZE = 10
@@ -431,6 +579,7 @@ const form = reactive<SchedulePlainForm>({
 })
 
 const patternState = ref<ScheduleFormState>(defaultScheduleFormState())
+const manualCron = ref('')
 
 const maxCallsUnlimited = computed(() => form.maxCalls === null)
 
@@ -438,11 +587,25 @@ function handleMaxCallsUnlimited(v: boolean) {
   form.maxCalls = v ? null : 1
 }
 
-const derivedPattern = computed(() => {
-  try {
-    return toCron(patternState.value).trim()
-  } catch {
-    return ''
+// Sync Visual Builder -> Cron Code
+watch(
+  () => patternState.value,
+  (next) => {
+    const canonical = toCron(next)
+    // Only update if the current manual input doesn't already represent this state
+    if (toCron(fromCron(manualCron.value)) !== canonical) {
+      manualCron.value = canonical
+    }
+  },
+  { deep: true },
+)
+
+// Sync Cron Code -> Visual Builder
+watch(manualCron, (next) => {
+  const nextState = fromCron(next)
+  // Only update state if it's different to avoid loops
+  if (JSON.stringify(patternState.value) !== JSON.stringify(nextState)) {
+    patternState.value = nextState
   }
 })
 
@@ -450,8 +613,8 @@ const canSubmit = computed(() => {
   if (isSaving.value) return false
   if (!form.name.trim()) return false
   if (!form.command.trim()) return false
-  if (!derivedPattern.value) return false
-  if (patternState.value.mode === 'advanced' && !isValidCron(derivedPattern.value)) return false
+  if (!manualCron.value) return false
+  if (!isValidCron(manualCron.value)) return false
   if (!maxCallsUnlimited.value && (form.maxCalls === null || form.maxCalls < 1)) return false
   return true
 })
@@ -463,6 +626,7 @@ function resetForm() {
   form.maxCalls = null
   form.enabled = true
   patternState.value = defaultScheduleFormState()
+  manualCron.value = toCron(patternState.value)
   submitError.value = null
 }
 
@@ -474,6 +638,7 @@ function hydrateForm(s: ScheduleSchedule) {
   form.maxCalls = (typeof maxCallsRaw === 'number' && maxCallsRaw > 0) ? maxCallsRaw : null
   form.enabled = s.enabled ?? true
   patternState.value = fromCron(s.pattern ?? '')
+  manualCron.value = s.pattern ?? ''
   submitError.value = null
 }
 
@@ -503,7 +668,7 @@ function describeItem(pattern: string | undefined): string | undefined {
 function formatMaxCalls(item: ScheduleSchedule): string {
   const raw = item.max_calls as unknown
   if (typeof raw === 'number' && raw > 0) return String(raw)
-  return t('bots.schedule.unlimited')
+  return '∞'
 }
 
 const queryCache = useQueryCache()
@@ -543,8 +708,13 @@ async function fetchBotSettings() {
 }
 
 async function handleRefresh() {
+  isRefreshing.value = true
   currentPage.value = 1
-  await fetchSchedules()
+  try {
+    await fetchSchedules()
+  } finally {
+    isRefreshing.value = false
+  }
 }
 
 function handleNew() {
@@ -572,7 +742,7 @@ async function handleFormSubmit() {
   submitError.value = null
   isSaving.value = true
   try {
-    const pattern = derivedPattern.value
+    const pattern = manualCron.value.trim()
     const maxCallsWire = form.maxCalls ?? null
     if (formMode.value === 'create') {
       const body = {
diff --git a/apps/web/src/pages/bots/components/bot-settings.vue b/apps/web/src/pages/bots/components/bot-settings.vue
index a343001cf..f7aab299d 100644
--- a/apps/web/src/pages/bots/components/bot-settings.vue
+++ b/apps/web/src/pages/bots/components/bot-settings.vue
@@ -1,381 +1,102 @@
 <template>
-  <div class="max-w-2xl mx-auto space-y-6">
-    <!-- Chat Model -->
-    <div class="space-y-2">
-      <Label>{{ $t('bots.settings.chatModel') }}</Label>
-      <ModelSelect
-        v-model="form.chat_model_id"
-        :models="models"
-        :providers="providers"
-        model-type="chat"
-        :placeholder="$t('bots.settings.chatModel')"
-      />
-    </div>
-
-    <!-- Title Model -->
-    <div class="space-y-2">
-      <Label>{{ $t('bots.settings.titleModel') }}</Label>
-      <p class="text-xs text-muted-foreground">
-        {{ $t('bots.settings.titleModelDescription') }}
-      </p>
-      <ModelSelect
-        v-model="form.title_model_id"
-        :models="models"
-        :providers="providers"
-        model-type="chat"
-        :placeholder="$t('bots.settings.titleModelPlaceholder')"
-      />
-    </div>
-
-    <!-- Memory Provider -->
-    <div class="space-y-2">
-      <Label>{{ $t('bots.settings.memoryProvider') }}</Label>
-      <MemoryProviderSelect
-        v-model="form.memory_provider_id"
-        :providers="memoryProviders"
-        :placeholder="$t('bots.settings.memoryProviderPlaceholder')"
-      />
-      <div
-        v-if="selectedBuiltinMemoryProvider"
-        class="rounded-md border border-border bg-card px-3 py-2 text-xs text-muted-foreground"
-      >
-        {{ $t('bots.settings.memoryModePreview', {
-          mode: $t(`memory.modeNames.${selectedBuiltinMemoryMode}`),
-        }) }}
+  <div class="max-w-2xl mx-auto pb-6 space-y-4">
+    <!-- Top Action Bar -->
+    <div class="flex items-center justify-between pb-4 border-b border-border/50">
+      <div class="space-y-1">
+        <h3 class="text-sm font-semibold text-foreground">
+          {{ $t('bots.tabs.settings') }}
+        </h3>
+        <p class="text-[11px] text-muted-foreground">
+          Manage system behaviors and global parameters.
+        </p>
       </div>
-      <div
-        v-if="showMemoryProviderStatusCard"
-        class="rounded-lg border border-border bg-card p-4 space-y-4"
-      >
-        <div class="flex items-start justify-between gap-3">
-          <div class="space-y-1">
-            <p class="text-xs font-medium text-foreground">
-              {{ indexedMemoryStatusTitle }}
-            </p>
-            <p class="text-xs text-muted-foreground">
-              {{ isSelectedMemoryProviderPersisted
-                ? indexedMemoryStatusHint
-                : $t('bots.settings.indexedMemoryStatusPendingSave') }}
-            </p>
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            :disabled="!isSelectedMemoryProviderPersisted || isRebuilding || !memoryStatus?.can_manual_sync"
-            @click="handleMemorySync"
-          >
-            <Spinner
-              v-if="isRebuilding"
-              class="mr-1.5"
-            />
-            {{ $t('bots.settings.memorySyncAction') }}
-          </Button>
-        </div>
-
-        <div
-          v-if="isMemoryStatusLoading"
-          class="text-xs text-muted-foreground"
-        >
-          {{ $t('common.loading') }}
-        </div>
 
-        <div
-          v-else-if="statusCardData"
-          class="grid gap-3 md:grid-cols-2"
-        >
-          <div class="rounded-md border border-border bg-background/60 px-3 py-2">
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.settings.memorySourceDir') }}
-            </p>
-            <p class="mt-1 text-xs font-medium text-foreground break-all">
-              {{ statusCardData.source_dir || '-' }}
-            </p>
-          </div>
-          <div class="rounded-md border border-border bg-background/60 px-3 py-2">
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.settings.memoryOverviewPath') }}
-            </p>
-            <p class="mt-1 text-xs font-medium text-foreground break-all">
-              {{ statusCardData.overview_path || '-' }}
-            </p>
-          </div>
-          <div class="rounded-md border border-border bg-background/60 px-3 py-2">
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.settings.memoryMarkdownFiles') }}
-            </p>
-            <p class="mt-1 text-xs font-medium text-foreground">
-              {{ statusCardData.markdown_file_count ?? 0 }}
-            </p>
-          </div>
-          <div class="rounded-md border border-border bg-background/60 px-3 py-2">
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.settings.memorySourceEntries') }}
-            </p>
-            <p class="mt-1 text-xs font-medium text-foreground">
-              {{ statusCardData.source_count ?? 0 }}
-            </p>
-          </div>
-          <div class="rounded-md border border-border bg-background/60 px-3 py-2">
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.settings.memoryIndexedEntries') }}
-            </p>
-            <p class="mt-1 text-xs font-medium text-foreground">
-              {{ statusCardData.indexed_count ?? 0 }}
-            </p>
-          </div>
-          <div
-            v-if="showQdrantDetails"
-            class="rounded-md border border-border bg-background/60 px-3 py-2"
-          >
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.settings.memoryQdrantCollection') }}
-            </p>
-            <p class="mt-1 text-xs font-medium text-foreground break-all">
-              {{ statusCardData.qdrant_collection || '-' }}
-            </p>
-          </div>
+      <div class="flex items-center gap-3 shrink-0">
+        <Transition name="fade">
           <div
-            v-if="showEncoderHealth"
-            class="rounded-md border border-border bg-background/60 px-3 py-2"
+            v-if="hasChanges"
+            class="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-muted/40 border border-border/50"
           >
-            <p class="text-xs text-muted-foreground">
-              {{ encoderHealthLabel }}
-            </p>
-            <p
-              class="mt-1 text-xs font-medium"
-              :class="healthTextClass(statusCardData.encoder?.ok)"
-            >
-              {{ healthLabel(statusCardData.encoder?.ok, statusCardData.encoder?.error) }}
-            </p>
+            <div class="size-1 rounded-full bg-muted-foreground/40" />
+            <span class="text-[10px] text-muted-foreground font-medium whitespace-nowrap">Unsaved</span>
           </div>
-          <div
-            v-if="showQdrantHealth"
-            class="rounded-md border border-border bg-background/60 px-3 py-2"
-          >
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.settings.memoryQdrantHealth') }}
-            </p>
-            <p
-              class="mt-1 text-xs font-medium"
-              :class="healthTextClass(statusCardData.qdrant?.ok)"
-            >
-              {{ healthLabel(statusCardData.qdrant?.ok, statusCardData.qdrant?.error) }}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Search Provider -->
-    <div class="space-y-2">
-      <Label>{{ $t('bots.settings.searchProvider') }}</Label>
-      <SearchProviderSelect
-        v-model="form.search_provider_id"
-        :providers="searchProviders"
-        :placeholder="$t('bots.settings.searchProviderPlaceholder')"
-      />
-    </div>
-
-    <!-- TTS Model -->
-    <div class="space-y-2">
-      <Label>{{ $t('bots.settings.ttsModel') }}</Label>
-      <TtsModelSelect
-        v-model="form.tts_model_id"
-        :models="ttsModels"
-        :providers="ttsProviders"
-        :placeholder="$t('bots.settings.ttsModelPlaceholder')"
-      />
-    </div>
+        </Transition>
 
-    <!-- Transcription Model -->
-    <div class="space-y-2">
-      <Label>{{ $t('bots.settings.transcriptionModel') }}</Label>
-      <TtsModelSelect
-        v-model="form.transcription_model_id"
-        :models="transcriptionModels"
-        :providers="ttsProviders"
-        :placeholder="$t('bots.settings.transcriptionModelPlaceholder')"
-      />
+        <Button
+          size="sm"
+          :disabled="!hasChanges || saveLoading"
+          class="h-8 text-xs font-medium min-w-24 shadow-none"
+          @click="handleSave"
+        >
+          <Spinner
+            v-if="saveLoading"
+            class="mr-1.5 size-3"
+          />
+          {{ $t('bots.settings.save') }}
+        </Button>
+      </div>
     </div>
 
-    <!-- Image Generation Model -->
-    <div class="space-y-2">
-      <Label>{{ $t('bots.settings.imageModel') }}</Label>
-      <p class="text-xs text-muted-foreground">
-        {{ $t('bots.settings.imageModelDescription') }}
-      </p>
-      <ModelSelect
-        v-model="form.image_model_id"
-        :models="imageCapableModels"
+    <!-- Standardized Card Container -->
+    <div class="space-y-4">
+      <SettingsGlobalCard :form="form" />
+      
+      <SettingsInteractionCard
+        :form="form"
+        :models="models"
         :providers="providers"
-        model-type="chat"
-        :placeholder="$t('bots.settings.imageModelPlaceholder')"
       />
-    </div>
 
-    <!-- Timezone -->
-    <div class="space-y-2">
-      <Label>{{ $t('bots.timezone') }}</Label>
-      <TimezoneSelect
-        :model-value="form.timezone || emptyTimezoneValue"
-        :placeholder="$t('bots.timezonePlaceholder')"
-        allow-empty
-        :empty-label="$t('bots.timezoneInherited')"
-        @update:model-value="(val: string) => form.timezone = val === emptyTimezoneValue ? '' : val"
+      <SettingsContextCard
+        :form="form"
+        :search-providers="searchProviders"
+        :memory-providers="memoryProviders"
+        :persisted-memory-provider-i-d="persistedMemoryProviderID"
+        :memory-status="memoryStatus"
+        :is-memory-status-loading="isMemoryStatusLoading"
+        :is-rebuilding="isRebuilding"
+        @sync-memory="handleMemorySync"
       />
-    </div>
-
-    <Separator />
-    <!-- Language -->
-    <div class="space-y-2">
-      <Label>{{ $t('bots.settings.language') }}</Label>
-      <Input
-        v-model="form.language"
-        type="text"
-        :aria-label="$t('bots.settings.language')"
+      
+      <SettingsMultimediaCard
+        :form="form"
+        :tts-models="ttsModels"
+        :tts-providers="ttsProviders"
+        :transcription-models="transcriptionModels"
+        :image-capable-models="imageCapableModels"
+        :providers="providers"
       />
     </div>
 
-    <!-- Timezone -->
-    <div class="space-y-2">
-      <Label>{{ $t('bots.timezone') }}</Label>
-      <TimezoneSelect
-        :model-value="form.timezone || emptyTimezoneValue"
-        :placeholder="$t('bots.timezonePlaceholder')"
-        allow-empty
-        :empty-label="$t('bots.timezoneInherited')"
-        @update:model-value="(val: string) => form.timezone = val === emptyTimezoneValue ? '' : val"
+    <!-- Danger Zone: Isolated with top margin -->
+    <div class="pt-4">
+      <SettingsDangerZone
+        :delete-loading="deleteLoading"
+        @delete="handleDeleteBot"
       />
     </div>
-
-    <Separator />
-
-    <!-- Reasoning -->
-    <div class="space-y-2">
-      <Label>{{ $t('bots.settings.reasoningEffort') }}</Label>
-      <Popover v-model:open="reasoningPopoverOpen">
-        <PopoverTrigger as-child>
-          <Button
-            variant="outline"
-            role="combobox"
-            :disabled="!chatModelSupportsReasoning"
-            class="w-full justify-between font-normal"
-          >
-            <span class="flex items-center gap-2">
-              <Lightbulb
-                class="size-3.5"
-                :style="{ opacity: EFFORT_OPACITY[reasoningFormValue] ?? 0.5 }"
-              />
-              {{ reasoningFormValue === 'off' ? $t('chat.reasoningOff') : $t(EFFORT_LABELS[reasoningFormValue] ?? reasoningFormValue) }}
-            </span>
-            <ChevronDown class="size-3.5 shrink-0 text-muted-foreground" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent
-          class="w-[--reka-popover-trigger-width] p-0"
-          align="start"
-        >
-          <ReasoningEffortSelect
-            v-model="reasoningFormValue"
-            :efforts="availableReasoningEfforts"
-            @update:model-value="reasoningPopoverOpen = false"
-          />
-        </PopoverContent>
-      </Popover>
-    </div>
-
-    <!-- Show Tool Calls in IM -->
-    <div class="flex items-center justify-between">
-      <div class="space-y-1">
-        <Label>{{ $t('bots.settings.showToolCallsInIM') }}</Label>
-        <p class="text-xs text-muted-foreground">
-          {{ $t('bots.settings.showToolCallsInIMDescription') }}
-        </p>
-      </div>
-      <Switch
-        :model-value="form.show_tool_calls_in_im"
-        @update:model-value="(val) => form.show_tool_calls_in_im = !!val"
-      />
-    </div>
-
-    <!-- Save -->
-    <div class="flex justify-end">
-      <Button
-        :disabled="!hasChanges || saveLoading"
-        @click="handleSave"
-      >
-        <Spinner v-if="saveLoading" />
-        {{ $t('bots.settings.save') }}
-      </Button>
-    </div>
-
-    <Separator />
-
-    <!-- Danger Zone -->
-    <div class="rounded-lg border border-destructive/50 bg-destructive/5 p-4 space-y-3">
-      <h3 class="text-xs font-semibold text-destructive">
-        {{ $t('bots.settings.dangerZone') }}
-      </h3>
-      <p class="text-xs text-muted-foreground">
-        {{ $t('bots.settings.deleteBotDescription') }}
-      </p>
-      <div class="flex items-center justify-end">
-        <ConfirmPopover
-          :message="$t('bots.deleteConfirm')"
-          :loading="deleteLoading"
-          :confirm-text="$t('common.delete')"
-          @confirm="handleDeleteBot"
-        >
-          <template #trigger>
-            <Button
-              variant="destructive"
-              :disabled="deleteLoading"
-            >
-              <Spinner
-                v-if="deleteLoading"
-                class="mr-1.5"
-              />
-              {{ $t('bots.settings.deleteBot') }}
-            </Button>
-          </template>
-        </ConfirmPopover>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import {
-  Label,
-  Input,
   Button,
-  Separator,
   Spinner,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  Switch,
 } from '@memohai/ui'
-import { Lightbulb, ChevronDown } from 'lucide-vue-next'
-import { reactive, computed, ref, watch } from 'vue'
+import { reactive, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 import { useI18n } from 'vue-i18n'
-import ConfirmPopover from '@/components/confirm-popover/index.vue'
-import TimezoneSelect from '@/components/timezone-select/index.vue'
-import ModelSelect from './model-select.vue'
-import ReasoningEffortSelect from './reasoning-effort-select.vue'
-import { EFFORT_LABELS, EFFORT_OPACITY } from './reasoning-effort'
-import SearchProviderSelect from './search-provider-select.vue'
-import MemoryProviderSelect from './memory-provider-select.vue'
-import TtsModelSelect from './tts-model-select.vue'
+import SettingsGlobalCard from './settings-global-card.vue'
+import SettingsInteractionCard from './settings-interaction-card.vue'
+import SettingsContextCard from './settings-context-card.vue'
+import SettingsMultimediaCard from './settings-multimedia-card.vue'
+import SettingsDangerZone from './settings-danger-zone.vue'
 import { useQuery, useMutation, useQueryCache } from '@pinia/colada'
 import { getBotsById, putBotsById, getBotsByBotIdSettings, putBotsByBotIdSettings, deleteBotsById, getModels, getProviders, getSearchProviders, getMemoryProviders, getSpeechProviders, getSpeechModels, getTranscriptionProviders, getTranscriptionModels, getBotsByBotIdMemoryStatus, postBotsByBotIdMemoryRebuild } from '@memohai/sdk'
 import type { SettingsSettings } from '@memohai/sdk'
-import { getBotsQueryKey } from '@memohai/sdk/colada'
 import type { Ref } from 'vue'
 import { resolveApiErrorMessage } from '@/utils/api-error'
-import { emptyTimezoneValue } from '@/utils/timezones'
 
 const props = defineProps<{
   botId: string
@@ -408,7 +129,7 @@ const { data: bot } = useQuery({
 })
 
 const { data: modelData } = useQuery({
-  key: ['models'],
+  key: ['all-models'],
   query: async () => {
     const { data } = await getModels({ throwOnError: true })
     return data
@@ -416,7 +137,7 @@ const { data: modelData } = useQuery({
 })
 
 const { data: providerData } = useQuery({
-  key: ['providers'],
+  key: ['all-providers'],
   query: async () => {
     const { data } = await getProviders({ throwOnError: true })
     return data
@@ -424,7 +145,7 @@ const { data: providerData } = useQuery({
 })
 
 const { data: searchProviderData } = useQuery({
-  key: ['search-providers'],
+  key: ['all-search-providers'],
   query: async () => {
     const { data } = await getSearchProviders({ throwOnError: true })
     return data
@@ -432,7 +153,7 @@ const { data: searchProviderData } = useQuery({
 })
 
 const { data: memoryProviderData } = useQuery({
-  key: ['memory-providers'],
+  key: ['all-memory-providers'],
   query: async () => {
     const { data } = await getMemoryProviders({ throwOnError: true })
     return data
@@ -494,7 +215,7 @@ const { mutateAsync: updateBot, isLoading: isUpdatingBot } = useMutation({
   },
   onSettled: () => {
     queryCache.invalidateQueries({ key: ['bot', botIdRef.value] })
-    queryCache.invalidateQueries({ key: getBotsQueryKey() })
+    queryCache.invalidateQueries({ key: ['bots'] })
   },
 })
 
@@ -503,7 +224,7 @@ const { mutateAsync: deleteBot, isLoading: deleteLoading } = useMutation({
     await deleteBotsById({ path: { id: botIdRef.value }, throwOnError: true })
   },
   onSettled: () => {
-    queryCache.invalidateQueries({ key: getBotsQueryKey() })
+    queryCache.invalidateQueries({ key: ['bots'] })
     queryCache.invalidateQueries({ key: ['bot'] })
   },
 })
@@ -521,6 +242,7 @@ const transcriptionProviders = computed(() => (transcriptionProviderData.value ?
 const enabledTranscriptionProviderIds = computed(() => new Set(transcriptionProviders.value.map((p: Record<string, unknown>) => p.id as string)))
 const ttsModels = computed(() => (ttsModelData.value ?? []).filter((m: Record<string, unknown>) => enabledTtsProviderIds.value.has(m.provider_id as string)))
 const transcriptionModels = computed(() => (transcriptionModelData.value ?? []).filter((m: Record<string, unknown>) => enabledTranscriptionProviderIds.value.has(m.provider_id as string)))
+
 // ---- Form ----
 const form = reactive({
   chat_model_id: '',
@@ -535,90 +257,9 @@ const form = reactive({
   reasoning_enabled: false,
   reasoning_effort: 'medium',
   show_tool_calls_in_im: false,
-  display_enabled: false,
 })
 
-const selectedMemoryProvider = computed(() =>
-  memoryProviders.value.find((provider) => provider.id === form.memory_provider_id),
-)
-const selectedMemoryProviderType = computed(() =>
-  selectedMemoryProvider.value?.provider ?? '',
-)
-const selectedBuiltinMemoryProvider = computed(() =>
-  selectedMemoryProvider.value?.provider === 'builtin' ? selectedMemoryProvider.value : null,
-)
-const selectedMem0MemoryProvider = computed(() =>
-  selectedMemoryProvider.value?.provider === 'mem0' ? selectedMemoryProvider.value : null,
-)
-const selectedBuiltinMemoryMode = computed(() =>
-  (selectedBuiltinMemoryProvider.value?.config as Record<string, string> | undefined)?.memory_mode || 'off',
-)
 const persistedMemoryProviderID = computed(() => settings.value?.memory_provider_id ?? '')
-const isSelectedMemoryProviderPersisted = computed(() =>
-  !!form.memory_provider_id && form.memory_provider_id === persistedMemoryProviderID.value,
-)
-const showBuiltinIndexedMemoryStatus = computed(() =>
-  selectedBuiltinMemoryMode.value === 'sparse' || selectedBuiltinMemoryMode.value === 'dense',
-)
-const showMem0MemoryStatus = computed(() =>
-  !!selectedMem0MemoryProvider.value,
-)
-const showMemoryProviderStatusCard = computed(() =>
-  showBuiltinIndexedMemoryStatus.value || showMem0MemoryStatus.value,
-)
-const shouldLoadMemoryStatus = computed(() =>
-  !!botIdRef.value
-  && showMemoryProviderStatusCard.value
-  && isSelectedMemoryProviderPersisted.value,
-)
-const indexedMemoryStatusTitle = computed(() =>
-  selectedMemoryProviderType.value === 'mem0'
-    ? t('bots.settings.mem0StatusTitle')
-    : selectedBuiltinMemoryMode.value === 'dense'
-    ? t('bots.settings.denseStatusTitle')
-    : t('bots.settings.sparseStatusTitle'),
-)
-const indexedMemoryStatusHint = computed(() =>
-  selectedMemoryProviderType.value === 'mem0'
-    ? t('bots.settings.mem0StatusHint')
-    : selectedBuiltinMemoryMode.value === 'dense'
-    ? t('bots.settings.denseStatusHint')
-    : t('bots.settings.sparseStatusHint'),
-)
-
-const chatModelSupportsReasoning = computed(() => {
-  if (!form.chat_model_id) return false
-  const m = models.value.find((m) => m.id === form.chat_model_id)
-  return !!m?.config?.compatibilities?.includes('reasoning')
-})
-
-const availableReasoningEfforts = computed(() => {
-  if (!form.chat_model_id) return ['low', 'medium', 'high']
-  const model = models.value.find((m) => m.id === form.chat_model_id)
-  const efforts = ((model?.config as { reasoning_efforts?: string[] } | undefined)?.reasoning_efforts ?? [])
-    .filter((effort) => ['none', 'low', 'medium', 'high', 'xhigh'].includes(effort))
-  return efforts.length > 0 ? efforts : ['low', 'medium', 'high']
-})
-
-watch(availableReasoningEfforts, (efforts) => {
-  if (!efforts.includes(form.reasoning_effort)) {
-    form.reasoning_effort = efforts.includes('medium') ? 'medium' : efforts[0] ?? 'medium'
-  }
-}, { immediate: true })
-
-const reasoningPopoverOpen = ref(false)
-
-const reasoningFormValue = computed({
-  get: () => form.reasoning_enabled ? form.reasoning_effort : 'off',
-  set: (v: string) => {
-    if (v === 'off') {
-      form.reasoning_enabled = false
-    } else {
-      form.reasoning_enabled = true
-      form.reasoning_effort = v
-    }
-  },
-})
 
 const { data: memoryStatusData, isLoading: isMemoryStatusLoading } = useQuery({
   key: () => ['bot-memory-status', botIdRef.value, persistedMemoryProviderID.value],
@@ -629,7 +270,7 @@ const { data: memoryStatusData, isLoading: isMemoryStatusLoading } = useQuery({
     })
     return data
   },
-  enabled: () => shouldLoadMemoryStatus.value,
+  enabled: () => !!botIdRef.value,
 })
 
 const { mutateAsync: rebuildMemory, isLoading: isRebuilding } = useMutation({
@@ -646,21 +287,6 @@ const { mutateAsync: rebuildMemory, isLoading: isRebuilding } = useMutation({
 })
 
 const memoryStatus = computed(() => memoryStatusData.value ?? null)
-const statusCardData = computed(() => memoryStatus.value)
-const showQdrantDetails = computed(() =>
-  selectedBuiltinMemoryMode.value === 'sparse' || selectedBuiltinMemoryMode.value === 'dense',
-)
-const showEncoderHealth = computed(() =>
-  selectedBuiltinMemoryMode.value === 'sparse' || selectedBuiltinMemoryMode.value === 'dense',
-)
-const showQdrantHealth = computed(() =>
-  selectedBuiltinMemoryMode.value === 'sparse' || selectedBuiltinMemoryMode.value === 'dense',
-)
-const encoderHealthLabel = computed(() =>
-  selectedBuiltinMemoryMode.value === 'dense'
-    ? t('bots.settings.memoryDenseEmbeddingHealth')
-    : t('bots.settings.memoryEncoderHealth'),
-)
 
 watch(settings, (val) => {
   if (val) {
@@ -676,7 +302,6 @@ watch(settings, (val) => {
     form.reasoning_enabled = val.reasoning_enabled ?? false
     form.reasoning_effort = val.reasoning_effort || 'medium'
     form.show_tool_calls_in_im = val.show_tool_calls_in_im ?? false
-    form.display_enabled = val.display_enabled ?? false
   }
 }, { immediate: true })
 
@@ -700,7 +325,6 @@ const hasSettingsChanges = computed(() => {
     || form.reasoning_enabled !== (s.reasoning_enabled ?? false)
     || form.reasoning_effort !== (s.reasoning_effort || 'medium')
     || form.show_tool_calls_in_im !== (s.show_tool_calls_in_im ?? false)
-    || form.display_enabled !== (s.display_enabled ?? false)
   )
 })
 
@@ -723,21 +347,7 @@ async function handleSave() {
   }
 }
 
-function healthTextClass(ok: boolean | undefined) {
-  return ok ? 'text-foreground' : 'text-destructive'
-}
-
-function healthLabel(ok: boolean | undefined, error?: string) {
-  if (ok) return t('bots.settings.memoryHealthOk')
-  if (error) return error
-  return t('bots.settings.memoryHealthUnavailable')
-}
-
 async function handleMemorySync() {
-  if (!isSelectedMemoryProviderPersisted.value) {
-    toast.error(t('bots.settings.indexedMemoryStatusPendingSave'))
-    return
-  }
   try {
     const result = await rebuildMemory()
     toast.success(t('bots.settings.memorySyncSuccess', {
diff --git a/apps/web/src/pages/bots/components/bot-skills.vue b/apps/web/src/pages/bots/components/bot-skills.vue
index fc56e8586..088c834be 100644
--- a/apps/web/src/pages/bots/components/bot-skills.vue
+++ b/apps/web/src/pages/bots/components/bot-skills.vue
@@ -1,64 +1,91 @@
 <template>
-  <div class="space-y-4">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div>
-        <h3 class="text-sm font-medium">
+  <div class="max-w-4xl mx-auto pb-6 space-y-5">
+    <!-- Sovereign Header -->
+    <header class="pb-4 border-b border-border/50 sticky top-0 bg-background/95 backdrop-blur z-30 pt-4 -mt-4 flex items-center justify-between">
+      <div class="space-y-1">
+        <h2 class="text-sm font-semibold text-foreground">
           {{ $t('bots.skills.title') }}
-        </h3>
+        </h2>
+        <p class="text-[11px] leading-snug text-muted-foreground max-w-md">
+          {{ $t('bots.skills.intro') }}
+        </p>
       </div>
-      <div class="flex items-center gap-1">
+      <div
+        v-if="skills.length > 0"
+        class="flex items-center gap-2 shrink-0"
+      >
         <Button
           variant="ghost"
           size="sm"
-          class="text-muted-foreground"
+          class="h-8 text-xs font-medium px-3 shadow-none text-muted-foreground"
           :title="$t('bots.skills.discoveryTitle')"
           @click="isDiscoveryDialogOpen = true"
         >
-          <SlidersHorizontal class="mr-2 size-4" />
+          <SlidersHorizontal class="mr-2 size-3.5" />
           {{ $t('bots.skills.discoveryTitle') }}
           <span
             v-if="showDiscoveryIndicator"
-            class="ml-2 inline-block size-2 shrink-0 rounded-full bg-primary/80"
+            class="ml-1.5 inline-block size-1.5 rounded-full bg-primary"
           />
         </Button>
         <Button
           size="sm"
+          class="h-8 text-xs font-medium px-4 shadow-none bg-foreground text-background hover:bg-foreground/90"
           @click="handleCreate"
         >
-          <Plus
-            class="mr-2"
-          />
+          <Plus class="mr-2 size-3.5" />
           {{ $t('bots.skills.addSkill') }}
         </Button>
       </div>
-    </div>
+    </header>
 
     <!-- Loading State -->
     <div
       v-if="isLoading"
-      class="flex items-center justify-center py-8 text-xs text-muted-foreground"
+      class="flex items-center justify-center py-12 text-xs text-muted-foreground"
     >
-      <Spinner class="mr-2" />
+      <Spinner class="mr-2 size-4" />
       {{ $t('common.loading') }}
     </div>
 
     <!-- Empty State -->
     <div
       v-else-if="!skills.length"
-      class="flex flex-col items-center justify-center py-12 text-center"
+      class="flex flex-col items-center justify-center py-16 text-center border border-dashed border-border/50 bg-muted/5 rounded-lg relative overflow-hidden"
     >
-      <div class="rounded-full bg-muted p-3 mb-4">
-        <Zap
-          class="size-6 text-muted-foreground"
-        />
+      <!-- Blueprint Grid Background -->
+      <div class="absolute inset-0 opacity-[0.03] pointer-events-none bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
+      
+      <div class="relative z-10 flex flex-col items-center">
+        <div class="rounded-md bg-background border border-border/50 p-2.5 mb-4 shadow-sm">
+          <Zap class="size-5 text-muted-foreground" />
+        </div>
+        <h3 class="text-sm font-medium text-foreground">
+          {{ $t('bots.skills.emptyTitle') }}
+        </h3>
+        <p class="text-[11px] text-muted-foreground mt-1.5 max-w-sm">
+          {{ $t('bots.skills.emptyDescription') }}
+        </p>
+        <div class="flex items-center gap-3 mt-6">
+          <Button
+            size="sm"
+            class="h-8 text-xs px-4 shadow-none bg-foreground text-background hover:bg-foreground/90"
+            @click="handleCreate"
+          >
+            <Plus class="mr-2 size-3.5" />
+            {{ $t('bots.skills.addSkill') }}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            class="h-8 text-xs px-4 shadow-none border-border/50 bg-background/60 backdrop-blur-sm"
+            @click="isDiscoveryDialogOpen = true"
+          >
+            <SlidersHorizontal class="mr-2 size-3.5" />
+            {{ $t('bots.skills.discoveryTitle') }}
+          </Button>
+        </div>
       </div>
-      <h3 class="text-sm font-medium">
-        {{ $t('bots.skills.emptyTitle') }}
-      </h3>
-      <p class="text-xs text-muted-foreground mt-1">
-        {{ $t('bots.skills.emptyDescription') }}
-      </p>
     </div>
 
     <!-- Skills Grid -->
@@ -66,180 +93,224 @@
       v-else
       class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
     >
-      <Card
+      <div
         v-for="skill in skills"
         :key="skillKey(skill)"
-        class="flex min-w-0 flex-col overflow-hidden"
+        class="rounded-md border p-3 flex flex-col justify-between min-h-[110px] group transition-colors duration-75 relative"
+        :class="[
+          skill.state === 'shadowed' 
+            ? 'border-solid border-border/40 bg-background/40' 
+            : 'border-border/60 bg-background hover:bg-accent/30 hover:border-border'
+        ]"
       >
-        <CardHeader class="min-w-0 pb-3">
-          <div class="flex min-w-0 items-center justify-between gap-2">
-            <CardTitle
-              class="min-w-0 flex-1 truncate text-sm"
+        <!-- Top Row / Header -->
+        <div class="flex items-center justify-between gap-2 mb-2">
+          <div class="flex items-center gap-2 min-w-0">
+            <div 
+              class="shrink-0"
+              :class="[
+                skill.state === 'disabled' || skill.state === 'shadowed' 
+                  ? 'size-1.5 rounded-full border border-muted-foreground bg-transparent' 
+                  : 'size-1.5 rounded-full bg-foreground'
+              ]" 
+            />
+            <h4 
+              class="font-mono text-[11px] font-semibold truncate"
+              :class="[
+                skill.state === 'shadowed' ? 'line-through text-muted-foreground/70' : 'text-foreground'
+              ]"
               :title="skill.name"
             >
               {{ skill.name }}
-            </CardTitle>
-            <div class="flex items-center gap-1 shrink-0">
-              <Button
-                variant="ghost"
-                size="sm"
-                class="size-8 p-0"
-                :title="!skill.managed ? $t('bots.skills.overrideTitle') : $t('common.edit')"
-                @click="handleEdit(skill)"
-              >
-                <SquarePen
-                  class="size-3.5"
-                />
-              </Button>
-              <Button
-                v-if="skill.state === 'disabled'"
-                variant="ghost"
-                size="sm"
-                class="size-8 p-0"
-                :disabled="isActioning"
-                :title="$t('bots.skills.enableAction')"
-                @click="handleSkillAction('enable', skill)"
-              >
-                <Spinner
-                  v-if="isSkillActionPending(skill, 'enable')"
-                  class="size-3.5"
-                />
-                <EyeOff
-                  v-else
-                  class="size-3.5"
-                />
-              </Button>
-              <Button
-                v-else
-                variant="ghost"
-                size="sm"
-                class="size-8 p-0"
-                :disabled="isActioning"
-                :title="$t('bots.skills.disableAction')"
-                @click="handleSkillAction('disable', skill)"
-              >
-                <Spinner
-                  v-if="isSkillActionPending(skill, 'disable')"
-                  class="size-3.5"
-                />
-                <Eye
-                  v-else
-                  class="size-3.5"
-                />
-              </Button>
-              <Button
-                v-if="!skill.managed"
-                variant="ghost"
-                size="sm"
-                class="size-8 p-0"
-                :disabled="isActioning || skill.state === 'shadowed'"
-                :title="skill.state === 'shadowed' ? $t('bots.skills.adoptBlocked') : $t('bots.skills.adoptAction')"
-                @click="handleSkillAction('adopt', skill)"
-              >
-                <Spinner
-                  v-if="isSkillActionPending(skill, 'adopt')"
-                  class="size-3.5"
-                />
-                <ArrowDownToLine
-                  v-else
-                  class="size-3.5"
-                />
-              </Button>
-              <ConfirmPopover
-                v-if="skill.managed"
-                :message="$t('bots.skills.deleteConfirm')"
-                :loading="isDeleting && deletingName === skill.name"
-                @confirm="handleDelete(skill.name)"
-              >
-                <template #trigger>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    class="size-8 p-0 text-destructive hover:text-destructive"
-                    :disabled="isDeleting"
-                    :title="$t('common.delete')"
-                  >
-                    <Trash2
-                      class="size-3.5"
-                    />
-                  </Button>
-                </template>
-              </ConfirmPopover>
+            </h4>
+          </div>
+          
+          <div class="flex items-center gap-1.5 shrink-0">
+            <span
+              v-if="skill.state === 'shadowed'"
+              class="text-[9px] font-mono text-muted-foreground/70"
+            >
+              ↳ Shadowed
+            </span>
+            <div
+              v-if="skill.managed"
+              class="h-5 px-1.5 flex items-center text-[9px] uppercase tracking-wider rounded-full bg-muted/40 text-muted-foreground font-medium"
+            >
+              {{ $t('bots.skills.managedBadge') }}
+            </div>
+            <div
+              v-else
+              class="h-5 px-1.5 flex items-center text-[9px] uppercase tracking-wider rounded-full bg-primary/10 text-primary border border-primary/20 font-medium"
+            >
+              {{ $t('bots.skills.discoveredBadge') }}
             </div>
           </div>
-          <CardDescription
-            class="min-w-0 overflow-hidden line-clamp-2 break-words [overflow-wrap:anywhere]"
+        </div>
+
+        <!-- Middle Row / Body -->
+        <div class="mb-3 flex-1">
+          <p 
+            class="text-[11px] leading-snug line-clamp-2 break-words [overflow-wrap:anywhere]"
+            :class="[
+              skill.state === 'shadowed' ? 'text-muted-foreground/50' : 'text-muted-foreground'
+            ]"
             :title="skill.description"
           >
             {{ skill.description || '-' }}
-          </CardDescription>
-        </CardHeader>
-        <CardContent class="mt-auto min-w-0 space-y-1.5 pt-0">
-          <div class="flex flex-wrap items-center gap-1.5">
-            <Badge
-              variant="secondary"
+          </p>
+        </div>
+
+        <!-- Bottom Row / Footer & Action Panel -->
+        <div class="flex items-center justify-between gap-2 mt-auto">
+          <div 
+            class="font-mono text-[9px] truncate px-1.5 py-0.5 rounded bg-muted/30"
+            :class="skill.state === 'shadowed' ? 'text-muted-foreground/50' : 'text-muted-foreground'"
+            :title="sourceSummary(skill)"
+          >
+            {{ sourceSummary(skill) }}
+          </div>
+          
+          <!-- Actions (Revealed on Hover) -->
+          <div class="flex items-center gap-0.5 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+            <!-- Edit / View -->
+            <Button
+              variant="ghost"
+              size="sm"
+              class="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+              :title="!skill.managed ? $t('bots.skills.overrideTitle') : $t('common.edit')"
+              @click="handleEdit(skill)"
+            >
+              <SquarePen class="size-3" />
+            </Button>
+            
+            <!-- Enable / Disable -->
+            <Button
+              v-if="skill.state === 'disabled'"
+              variant="ghost"
               size="sm"
-              class="rounded-full"
+              class="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+              :disabled="isActioning"
+              :title="$t('bots.skills.enableAction')"
+              @click="handleSkillAction('enable', skill)"
             >
-              {{ skill.managed ? $t('bots.skills.managedBadge') : $t('bots.skills.discoveredBadge') }}
-            </Badge>
-            <Badge
-              variant="outline"
+              <Spinner
+                v-if="isSkillActionPending(skill, 'enable')"
+                class="size-3"
+              />
+              <EyeOff
+                v-else
+                class="size-3"
+              />
+            </Button>
+            <Button
+              v-else
+              variant="ghost"
               size="sm"
-              class="rounded-full"
+              class="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+              :disabled="isActioning"
+              :title="$t('bots.skills.disableAction')"
+              @click="handleSkillAction('disable', skill)"
+            >
+              <Spinner
+                v-if="isSkillActionPending(skill, 'disable')"
+                class="size-3"
+              />
+              <Eye
+                v-else
+                class="size-3"
+              />
+            </Button>
+
+            <!-- Adopt -->
+            <Button
+              v-if="!skill.managed"
+              variant="ghost"
+              size="sm"
+              class="h-6 w-6 p-0 text-muted-foreground hover:text-primary transition-colors"
+              :disabled="isActioning || skill.state === 'shadowed'"
+              :title="skill.state === 'shadowed' ? $t('bots.skills.adoptBlocked') : $t('bots.skills.adoptAction')"
+              @click="handleSkillAction('adopt', skill)"
+            >
+              <Spinner
+                v-if="isSkillActionPending(skill, 'adopt')"
+                class="size-3"
+              />
+              <ArrowDownToLine
+                v-else
+                class="size-3"
+              />
+            </Button>
+
+            <!-- Delete -->
+            <ConfirmPopover
+              v-if="skill.managed"
+              :message="$t('bots.skills.deleteConfirm')"
+              :loading="isDeleting && deletingName === skill.name"
+              @confirm="handleDelete(skill.name)"
             >
-              {{ stateLabel(skill.state) }}
-            </Badge>
+              <template #trigger>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  class="h-6 w-6 p-0 text-muted-foreground hover:text-destructive transition-colors"
+                  :disabled="isDeleting"
+                  :title="$t('common.delete')"
+                >
+                  <Trash2 class="size-3" />
+                </Button>
+              </template>
+            </ConfirmPopover>
           </div>
-          <p
-            v-if="skill.shadowed_by"
-            class="text-[11px] text-muted-foreground truncate"
-            :title="skill.shadowed_by"
-          >
-            {{ $t('bots.skills.shadowedBy') }} {{ skill.shadowed_by }}
-          </p>
-          <p
-            v-if="skill.source_path"
-            class="text-[11px] text-muted-foreground truncate"
-            :title="sourceSummary(skill)"
-          >
-            {{ sourceSummary(skill) }}
-          </p>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
 
-    <!-- Edit Dialog -->
+    <!-- Edit Dialog (Modal IDE) -->
     <Dialog v-model:open="isDialogOpen">
-      <DialogContent class="sm:max-w-2xl max-h-[calc(100dvh-2rem)] flex flex-col overflow-hidden">
-        <DialogHeader class="shrink-0">
-          <DialogTitle>{{ isEditing ? $t('common.edit') : $t('bots.skills.addSkill') }}</DialogTitle>
+      <DialogContent class="sm:max-w-4xl max-h-[calc(100vh-2rem)] sm:h-[85vh] flex flex-col overflow-hidden p-0 gap-0">
+        <DialogHeader class="shrink-0 p-4 border-b border-border/50 bg-background">
+          <DialogTitle class="text-sm font-semibold">
+            {{ isEditing ? $t('common.edit') : $t('bots.skills.addSkill') }}
+          </DialogTitle>
         </DialogHeader>
-        <div class="basis-[400px] flex-1 min-h-0 py-4">
-          <div class="h-full rounded-md border overflow-hidden">
+        
+        <div class="flex-1 min-h-0 relative p-4 bg-muted/5">
+          <div class="absolute inset-4 rounded-md border border-border/50 bg-background/50 overflow-hidden flex flex-col shadow-sm">
             <MonacoEditor
               v-model="draftRaw"
               language="markdown"
               :readonly="isSaving"
+              class="flex-1 min-h-0"
+              :options="{
+                automaticLayout: true,
+                fixedOverflowWidgets: true,
+                minimap: { enabled: false },
+                scrollBeyondLastLine: false
+              }"
             />
           </div>
         </div>
-        <DialogFooter class="shrink-0">
+
+        <DialogFooter class="shrink-0 p-4 border-t border-border/50 bg-background flex items-center justify-end gap-2">
           <DialogClose as-child>
             <Button
-              variant="outline"
+              variant="ghost"
+              size="sm"
+              class="h-8 text-xs font-medium px-4 shadow-none"
               :disabled="isSaving"
             >
               {{ $t('common.cancel') }}
             </Button>
           </DialogClose>
           <Button
+            size="sm"
+            class="h-8 text-xs font-medium px-4 min-w-24 shadow-none bg-foreground text-background hover:bg-foreground/90"
             :disabled="!canSave || isSaving"
             @click="handleSave"
           >
             <Spinner
               v-if="isSaving"
-              class="mr-2 size-4"
+              class="mr-2 size-3.5"
             />
             {{ $t('common.save') }}
           </Button>
@@ -247,82 +318,90 @@
       </DialogContent>
     </Dialog>
 
+    <!-- Discovery Modal -->
     <Dialog v-model:open="isDiscoveryDialogOpen">
-      <DialogContent class="sm:max-w-xl">
+      <DialogContent class="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>{{ $t('bots.skills.discoveryTitle') }}</DialogTitle>
-          <DialogDescription class="text-xs">
+          <DialogTitle class="text-sm font-semibold">
+            {{ $t('bots.skills.discoveryTitle') }}
+          </DialogTitle>
+          <DialogDescription class="text-[11px] leading-snug">
             {{ $t('bots.skills.discoveryDescription') }}
           </DialogDescription>
         </DialogHeader>
 
-        <div class="space-y-4 py-2">
-          <div class="space-y-2">
-            <Label class="text-xs font-medium">
+        <div class="space-y-5 py-3">
+          <div class="space-y-1.5">
+            <Label class="text-[11px] font-medium text-foreground">
               {{ $t('bots.skills.managedPathLabel') }}
             </Label>
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.skills.managedPathDescription') }}
-            </p>
-            <div class="rounded-md border bg-muted/30 px-3 py-2 font-mono text-xs text-foreground break-all">
+            <div class="rounded border border-border/50 bg-muted/20 px-2.5 py-1.5 font-mono text-[10px] text-muted-foreground break-all">
               {{ MANAGED_SKILL_PATH }}
             </div>
-            <p class="text-xs text-muted-foreground">
+            <p class="text-[10px] text-muted-foreground">
               {{ $t('bots.skills.managedPathHint') }}
             </p>
           </div>
 
-          <div class="space-y-2">
-            <Label class="text-xs font-medium">
+          <div class="space-y-1.5">
+            <Label class="text-[11px] font-medium text-foreground">
               {{ $t('bots.skills.discoveryPathsLabel') }}
             </Label>
-            <p class="text-xs text-muted-foreground">
-              {{ $t('bots.skills.discoveryPathsDescription') }}
-            </p>
             <Textarea
               v-model="discoveryRootsDraft"
               :disabled="discoveryControlsDisabled"
               :placeholder="$t('bots.skills.discoveryPathPlaceholder')"
-              class="min-h-32 font-mono text-xs"
+              class="min-h-24 font-mono text-[11px] bg-muted/10 border-border/50 shadow-none"
+              :class="{ 'border-warning/40 focus-visible:ring-warning/30': hasDiscoveryRootErrors }"
             />
             <p
               v-if="discoveryRootError"
-              class="text-xs text-destructive"
+              class="text-[10px] text-warning/80"
             >
               {{ discoveryRootError }}
             </p>
+            <p
+              v-else
+              class="text-[10px] text-muted-foreground"
+            >
+              {{ $t('bots.skills.discoveryDefaultHint', { paths: DEFAULT_DISCOVERY_ROOTS.join(', ') }) }}
+            </p>
           </div>
-
-          <p class="text-xs text-muted-foreground">
-            {{ $t('bots.skills.discoveryDefaultHint', { paths: DEFAULT_DISCOVERY_ROOTS.join(', ') }) }}
-          </p>
         </div>
 
-        <DialogFooter>
+        <DialogFooter class="gap-2 sm:space-x-0">
           <Button
-            variant="outline"
+            variant="ghost"
+            size="sm"
+            class="h-8 text-[11px] px-3 shadow-none text-muted-foreground"
             :disabled="discoveryControlsDisabled || !isDiscoveryRootsDirty"
             @click="resetDiscoveryRoots"
           >
             {{ $t('bots.skills.discoveryReset') }}
           </Button>
-          <Button
-            variant="outline"
-            :disabled="isSavingDiscoveryRoots"
-            @click="closeDiscoveryDialog"
-          >
-            {{ $t('common.cancel') }}
-          </Button>
-          <Button
-            :disabled="!canSaveDiscoveryRoots"
-            @click="handleSaveDiscoveryRoots"
-          >
-            <Spinner
-              v-if="isSavingDiscoveryRoots"
-              class="mr-2 size-4"
-            />
-            {{ $t('common.save') }}
-          </Button>
+          <div class="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              class="h-8 text-xs font-medium px-4 shadow-none"
+              :disabled="isSavingDiscoveryRoots"
+              @click="closeDiscoveryDialog"
+            >
+              {{ $t('common.cancel') }}
+            </Button>
+            <Button
+              size="sm"
+              class="h-8 text-xs font-medium px-4 min-w-24 shadow-none bg-foreground text-background hover:bg-foreground/90"
+              :disabled="!canSaveDiscoveryRoots"
+              @click="handleSaveDiscoveryRoots"
+            >
+              <Spinner
+                v-if="isSavingDiscoveryRoots"
+                class="mr-2 size-3.5"
+              />
+              {{ $t('common.save') }}
+            </Button>
+          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -336,7 +415,7 @@ import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
 import { useQuery, useQueryCache } from '@pinia/colada'
 import {
-  Badge, Button, Card, CardContent, CardHeader, CardTitle, CardDescription,
+  Button,
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose,
   Label, Spinner, Textarea,
 } from '@memohai/ui'
@@ -610,17 +689,6 @@ function sourceSummary(skill: SkillItem) {
   return `${sourceKindLabel(skill.source_kind)} · ${sourcePath}`
 }
 
-function stateLabel(state?: string) {
-  switch (state) {
-    case 'disabled':
-      return t('bots.skills.disabledBadge')
-    case 'shadowed':
-      return t('bots.skills.shadowedBadge')
-    default:
-      return t('bots.skills.effectiveBadge')
-  }
-}
-
 async function handleSkillAction(action: 'adopt' | 'disable' | 'enable', skill: SkillItem) {
   if (!skill.source_path) return
   isActioning.value = true
diff --git a/apps/web/src/pages/bots/components/bot-tool-approval.vue b/apps/web/src/pages/bots/components/bot-tool-approval.vue
index 7423fed48..a086669f1 100644
--- a/apps/web/src/pages/bots/components/bot-tool-approval.vue
+++ b/apps/web/src/pages/bots/components/bot-tool-approval.vue
@@ -1,136 +1,227 @@
 <template>
-  <SettingsShell
-    width="wide"
-    class="space-y-6"
-  >
-    <header class="flex items-start justify-between gap-6">
+  <div class="max-w-2xl mx-auto pb-6 space-y-5">
+    <!-- Sovereign Header -->
+    <header class="pb-4 border-b border-border/50 sticky top-0 bg-background/95 backdrop-blur z-30 pt-4 -mt-4 flex items-center justify-between">
       <div class="space-y-1">
-        <h2 class="text-base font-medium">
+        <h2 class="text-sm font-semibold text-foreground">
           {{ $t('bots.toolApproval.title') }}
         </h2>
-        <p class="max-w-2xl text-xs leading-relaxed text-muted-foreground">
+        <p class="text-[11px] leading-snug text-muted-foreground max-w-md">
           {{ $t('bots.toolApproval.intro') }}
         </p>
       </div>
-      <Switch
-        :model-value="form.tool_approval_config.enabled"
-        @update:model-value="(val) => form.tool_approval_config.enabled = !!val"
-      />
+
+      <div class="flex items-center gap-3 shrink-0">
+        <Transition name="fade">
+          <div
+            v-if="hasChanges"
+            class="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-muted/40 border border-border/50"
+          >
+            <div class="size-1 rounded-full bg-muted-foreground/40" />
+            <span class="text-[10px] text-muted-foreground font-medium whitespace-nowrap">Unsaved</span>
+          </div>
+        </Transition>
+
+        <Button
+          size="sm"
+          class="h-8 text-xs font-medium px-4 shadow-none min-w-24"
+          :variant="hasChanges ? 'default' : 'secondary'"
+          :disabled="!hasChanges || saveLoading"
+          @click="handleSave"
+        >
+          <Spinner
+            v-if="saveLoading"
+            class="mr-2 size-4"
+          />
+          {{ $t('bots.settings.save') }}
+        </Button>
+      </div>
     </header>
 
-    <Separator />
+    <!-- Metrics Section (Overview Style) -->
+    <div class="space-y-4 rounded-md border p-4">
+      <!-- Section Header -->
+      <div class="space-y-1">
+        <h4 class="text-xs font-medium">
+          {{ $t('bots.toolApproval.posture.title') }}
+        </h4>
+        <p class="text-xs text-muted-foreground">
+          {{ $t('bots.toolApproval.posture.description') }}
+        </p>
+      </div>
+
+      <!-- Metrics Grid -->
+      <div class="grid gap-3 sm:grid-cols-3">
+        <!-- Status Card -->
+        <div
+          class="rounded-md border bg-background/70 p-3 flex flex-col justify-between transition-all duration-200"
+          :class="{ 'border-success/20 bg-success/5': form.tool_approval_config.enabled }"
+        >
+          <div class="space-y-2">
+            <div class="flex items-center justify-between">
+              <p class="text-xs text-muted-foreground">
+                {{ $t('common.status') }}
+              </p>
+              <Switch
+                :model-value="form.tool_approval_config.enabled"
+                class="scale-90"
+                @update:model-value="(val) => form.tool_approval_config.enabled = !!val"
+              />
+            </div>
+            <div class="flex items-center gap-2 mt-2">
+              <ShieldCheck
+                v-if="form.tool_approval_config.enabled"
+                class="w-5 h-5 shrink-0 text-success"
+              />
+              <ShieldOff
+                v-else
+                class="w-5 h-5 shrink-0 text-muted-foreground"
+              />
+              <p class="text-2xl font-semibold">
+                {{ form.tool_approval_config.enabled ? $t('bots.toolApproval.posture.hardened') : $t('common.inactive') }}
+              </p>
+            </div>
+          </div>
+          <div class="mt-3 min-h-[32px] flex items-center">
+            <p class="text-[11px] leading-4 text-muted-foreground">
+              {{ form.tool_approval_config.enabled ? $t('bots.toolApproval.posture.description') : $t('bots.toolApproval.warnings.disabled') }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Active Tools Card -->
+        <div class="rounded-md border bg-background/70 p-3 flex flex-col justify-between">
+          <div class="space-y-2">
+            <p class="text-xs text-muted-foreground">
+              {{ $t('bots.toolApproval.metrics.activeRules') }}
+            </p>
+            <div class="mt-2">
+              <span class="text-2xl font-semibold">{{ activeToolsCount }}</span>
+              <span class="text-xs font-medium text-muted-foreground ml-1">/ {{ approvalTools.length }}</span>
+            </div>
+          </div>
+          <div class="mt-3 min-h-[32px] flex items-center">
+            <p class="text-[11px] leading-4 text-muted-foreground">
+              {{ $t('bots.toolApproval.metrics.totalDefined') }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Rules Count Card -->
+        <div class="rounded-md border bg-background/70 p-3 flex flex-col justify-between">
+          <div class="space-y-2">
+            <p class="text-xs text-muted-foreground">
+              {{ $t('bots.toolApproval.metrics.totalDefined') }}
+            </p>
+            <div class="mt-2">
+              <span class="text-2xl font-semibold">{{ totalRulesCount }}</span>
+            </div>
+          </div>
+          <div class="mt-3 min-h-[32px] flex items-center">
+            <p class="text-[11px] leading-4 text-muted-foreground">
+              {{ $t('bots.toolApproval.metrics.blockedCount') }} & Bypasses
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
 
+    <!-- Tool Configurations -->
     <div
-      class="space-y-6 transition-opacity"
-      :class="{ 'opacity-60 pointer-events-none': !form.tool_approval_config.enabled }"
-      :aria-disabled="!form.tool_approval_config.enabled"
+      class="space-y-4 transition-all duration-300"
+      :class="{ 'opacity-50 grayscale pointer-events-none': !form.tool_approval_config.enabled }"
     >
-      <template
-        v-for="(tool, idx) in approvalTools"
+      <div
+        v-for="tool in approvalTools"
         :key="tool"
+        class="rounded-md border border-border/60 bg-background overflow-hidden"
       >
-        <section class="space-y-4">
-          <div class="flex items-start justify-between gap-4">
-            <div class="flex items-start gap-3">
+        <div class="bg-muted/10 p-3 border-b border-border/40 flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <div
+              class="size-8 rounded flex items-center justify-center bg-background border border-border/50"
+              :class="{ 'text-success border-success/20 bg-success/5': toolApprovalPolicy(tool).require_approval }"
+            >
               <component
                 :is="TOOL_META[tool].icon"
-                class="size-5 mt-0.5 shrink-0 text-muted-foreground"
+                class="size-4"
               />
-              <div class="space-y-0.5">
-                <h3 class="font-mono text-sm font-medium">
+            </div>
+            <div class="space-y-0.5">
+              <div class="flex items-center gap-2">
+                <span class="font-mono text-[11px] font-semibold text-foreground">
                   {{ tool }}
-                </h3>
-                <p class="text-xs text-muted-foreground">
-                  {{ $t(TOOL_META[tool].descKey) }}
-                </p>
+                </span>
+                <Badge
+                  v-if="toolApprovalPolicy(tool).require_approval"
+                  variant="outline"
+                  class="h-4 px-1.5 text-[9px] font-medium bg-success/10 text-success border-success/20 rounded-full"
+                >
+                  {{ $t('common.active') }}
+                </Badge>
               </div>
+              <p class="text-[11px] text-muted-foreground">
+                {{ $t(TOOL_META[tool].descKey) }}
+              </p>
             </div>
-            <Switch
-              :model-value="toolApprovalPolicy(tool).require_approval"
-              @update:model-value="(val) => toolApprovalPolicy(tool).require_approval = !!val"
-            />
           </div>
-
-          <p
+          <Switch
+            :model-value="toolApprovalPolicy(tool).require_approval"
+            class="scale-90"
+            @update:model-value="(val) => toolApprovalPolicy(tool).require_approval = !!val"
+          />
+        </div>
+
+        <div class="p-3 space-y-4">
+          <div
             v-if="!toolApprovalPolicy(tool).require_approval"
-            class="rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground"
+            class="flex items-center gap-2 rounded border border-warning/10 bg-warning/5 px-3 py-1.5 text-[11px] text-warning"
           >
+            <ShieldAlert class="size-3.5" />
             {{ $t('bots.toolApproval.toolDisabledHint') }}
-          </p>
+          </div>
 
           <div class="grid gap-4 md:grid-cols-2 items-stretch">
             <div class="flex flex-col gap-2">
               <div class="flex items-center justify-between">
-                <Label class="flex items-center gap-1.5 text-xs font-medium">
-                  <ShieldCheck class="size-3.5 text-success-foreground" />
+                <Label class="flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground">
+                  <ShieldCheck class="size-3.5 text-success" />
                   {{ $t('bots.toolApproval.bypass') }}
                 </Label>
-                <span class="text-xs text-muted-foreground tabular-nums">
+                <span class="text-[10px] font-mono text-muted-foreground tabular-nums">
                   {{ bypassList(tool).length }}
                 </span>
               </div>
-              <p class="text-xs text-muted-foreground">
-                {{ $t('bots.toolApproval.bypassHint') }}
-              </p>
               <Textarea
                 :model-value="approvalBypassText(tool)"
                 :placeholder="bypassPlaceholder(tool)"
-                class="min-h-32 flex-1 resize-none font-mono text-xs"
+                class="min-h-24 flex-1 resize-none font-mono text-[11px] bg-muted/20 border-border/50 rounded-md focus-visible:ring-success/30 shadow-none"
                 @update:model-value="(val) => updateApprovalBypass(tool, String(val))"
               />
             </div>
 
             <div class="flex flex-col gap-2">
               <div class="flex items-center justify-between">
-                <Label class="flex items-center gap-1.5 text-xs font-medium">
-                  <ShieldAlert class="size-3.5 text-warning-foreground" />
+                <Label class="flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground">
+                  <ShieldAlert class="size-3.5 text-warning" />
                   {{ $t('bots.toolApproval.mustReview') }}
                 </Label>
-                <span class="text-xs text-muted-foreground tabular-nums">
+                <span class="text-[10px] font-mono text-muted-foreground tabular-nums">
                   {{ forceReviewList(tool).length }}
                 </span>
               </div>
-              <p class="text-xs text-muted-foreground">
-                {{ $t('bots.toolApproval.mustReviewHint') }}
-              </p>
               <Textarea
                 :model-value="approvalForceReviewText(tool)"
                 :placeholder="forceReviewPlaceholder(tool)"
-                class="min-h-32 flex-1 resize-none font-mono text-xs"
+                class="min-h-24 flex-1 resize-none font-mono text-[11px] bg-muted/20 border-border/50 rounded-md focus-visible:ring-warning/30 shadow-none"
                 @update:model-value="(val) => updateApprovalForceReview(tool, String(val))"
               />
             </div>
           </div>
-        </section>
-
-        <Separator
-          v-if="idx < approvalTools.length - 1"
-        />
-      </template>
-    </div>
-
-    <Separator />
-
-    <div class="flex items-center justify-end gap-3 pt-1">
-      <span
-        v-if="hasChanges"
-        class="text-xs text-muted-foreground"
-      >
-        {{ $t('bots.toolApproval.unsavedChanges') }}
-      </span>
-      <Button
-        size="sm"
-        :disabled="!hasChanges || saveLoading"
-        @click="handleSave"
-      >
-        <Spinner
-          v-if="saveLoading"
-          class="mr-2 size-4"
-        />
-        {{ $t('bots.settings.save') }}
-      </Button>
+        </div>
+      </div>
     </div>
-  </SettingsShell>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -140,7 +231,7 @@ import {
   Button,
   Spinner,
   Switch,
-  Separator,
+  Badge,
 } from '@memohai/ui'
 import {
   FilePlus2,
@@ -148,6 +239,7 @@ import {
   SquareTerminal,
   ShieldCheck,
   ShieldAlert,
+  ShieldOff,
 } from 'lucide-vue-next'
 import { reactive, computed, watch } from 'vue'
 import type { Component, Ref } from 'vue'
@@ -156,7 +248,6 @@ import { useI18n } from 'vue-i18n'
 import { useQuery, useMutation, useQueryCache } from '@pinia/colada'
 import { getBotsByBotIdSettings, putBotsByBotIdSettings } from '@memohai/sdk'
 import type { SettingsSettings } from '@memohai/sdk'
-import SettingsShell from '@/components/settings-shell/index.vue'
 import { resolveApiErrorMessage } from '@/utils/api-error'
 
 const props = defineProps<{
@@ -330,6 +421,16 @@ watch(settings, (val) => {
   }
 }, { immediate: true })
 
+const activeToolsCount = computed(() => {
+  return approvalTools.filter(t => form.tool_approval_config[t].require_approval).length
+})
+
+const totalRulesCount = computed(() => {
+  return approvalTools.reduce((acc, t) => {
+    return acc + bypassList(t).length + forceReviewList(t).length
+  }, 0)
+})
+
 const hasChanges = computed(() => {
   if (!settings.value) return false
   const current = normalizeToolApprovalConfig(
@@ -347,3 +448,5 @@ async function handleSave() {
   }
 }
 </script>
+
+
diff --git a/apps/web/src/pages/bots/components/channel-settings-panel.vue b/apps/web/src/pages/bots/components/channel-settings-panel.vue
index 18f191692..a7d3d8676 100644
--- a/apps/web/src/pages/bots/components/channel-settings-panel.vue
+++ b/apps/web/src/pages/bots/components/channel-settings-panel.vue
@@ -1,275 +1,421 @@
 <template>
-  <div class="space-y-6 mr-4">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
+  <div class="max-w-2xl mx-auto pb-6 space-y-4">
+    <!-- Top Action Bar -->
+    <div class="flex items-center justify-between pb-4 border-b border-border/50 sticky top-0 bg-background/95 backdrop-blur z-10 pt-1">
       <div class="flex items-center gap-3">
-        <span class="flex size-10 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+        <span class="flex size-10 shrink-0 items-center justify-center rounded-lg border bg-muted/30 text-muted-foreground shadow-sm">
           <ChannelIcon
             :channel="platformType"
             size="1.5em"
           />
         </span>
-        <div>
-          <h3 class="text-sm font-semibold">
+        <div class="space-y-0.5">
+          <h3 class="text-sm font-semibold text-foreground flex items-center gap-2">
             {{ channelTitle }}
           </h3>
-          <p class="text-xs text-muted-foreground">
+          <p class="text-[11px] text-muted-foreground font-mono">
             {{ platformKeyLine }}
           </p>
         </div>
       </div>
-      <div class="flex items-center gap-2">
+      
+      <!-- Actions: Status + Save -->
+      <div class="flex items-center gap-3 shrink-0">
+        <!-- Dynamic context micro-copy -->
+        <Transition name="fade">
+          <div
+            v-if="dirtyPrompt"
+            class="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-muted/40 border border-border/50"
+          >
+            <div class="size-1 rounded-full bg-muted-foreground/40" />
+            <span class="text-[10px] text-muted-foreground font-medium whitespace-nowrap">
+              Unsaved
+              <template v-if="dirtyPrompt.type === 'other'">
+                in <a
+                  href="#"
+                  class="underline hover:text-foreground font-medium"
+                  @click.prevent="$emit('switch-tab', dirtyPrompt.channel)"
+                >{{ dirtyPrompt.channelName }}</a>
+              </template>
+            </span>
+          </div>
+        </Transition>
+
         <template v-if="isEditMode">
           <Button
             variant="outline"
             size="sm"
             :disabled="isBusy"
+            class="h-8 text-xs font-medium shadow-none"
             @click="handleToggleDisabled"
           >
             <Spinner
               v-if="action === 'toggle'"
-              class="mr-1.5"
+              class="mr-1.5 size-3"
             />
             {{ form.disabled ? $t('bots.channels.actionEnable') : $t('bots.channels.actionDisable') }}
           </Button>
-          <ConfirmPopover
-            :message="$t('bots.channels.deleteConfirm')"
-            :loading="action === 'delete'"
-            @confirm="handleDelete"
-          >
-            <template #trigger>
-              <Button
-                variant="destructive"
-                size="sm"
-                :disabled="isBusy"
-              >
-                <Spinner
-                  v-if="action === 'delete'"
-                  class="mr-1.5"
-                />
-                {{ $t('common.delete') }}
-              </Button>
-            </template>
-          </ConfirmPopover>
+          <div
+            class="w-px h-4 bg-border mx-1"
+            aria-hidden="true"
+          />
         </template>
+
+        <Button 
+          size="sm" 
+          :disabled="(!isFormDirty && isEditMode) || isBusy" 
+          class="h-8 text-xs font-medium min-w-24 shadow-none" 
+          @click="handleSave"
+        >
+          <Spinner
+            v-if="action === 'save'"
+            class="mr-1.5 size-3"
+          />
+          {{ $t('bots.settings.save') }}
+        </Button>
       </div>
     </div>
 
+    <!-- WeChat Configuration Area -->
+    <div
+      v-if="channelItem.meta.type === 'weixin'"
+      class="pt-2"
+    >
+      <WeixinQrLogin
+        :bot-id="botId"
+        @login-success="handleWeixinLoginSuccess"
+      />
+    </div>
+
+    <!-- Standard Form Body -->
     <div
-      v-if="showWebhookCallback"
-      class="space-y-2"
+      v-else
+      class="space-y-4"
     >
-      <h4 class="text-xs font-medium">
-        {{ $t('bots.channels.webhookCallback') }}
-      </h4>
-      <p class="text-xs text-muted-foreground">
-        {{ $t('bots.channels.webhookCallbackHint') }}
-      </p>
-      <template v-if="webhookCallbackUrl">
-        <div class="flex gap-2">
+      <!-- Webhook URL (Read-only mode) -->
+      <div
+        v-if="showWebhookCallback"
+        class="rounded-md border border-border bg-background p-4 shadow-none space-y-4"
+      >
+        <div class="space-y-1">
+          <h4 class="text-xs font-medium">
+            {{ $t('bots.channels.webhookCallback') }}
+          </h4>
+          <p class="text-[11px] text-muted-foreground">
+            {{ $t('bots.channels.webhookCallbackHint') }}
+          </p>
+        </div>
+        <div
+          v-if="webhookCallbackUrl"
+          class="flex gap-2"
+        >
           <Input
             :model-value="webhookCallbackUrl"
             readonly
-            class="font-mono text-xs"
+            class="font-mono text-[11px] h-8 shadow-none"
           />
           <Button
             variant="outline"
             size="sm"
+            class="h-8 text-xs shadow-none"
             @click="copyWebhookCallback"
           >
             {{ $t('common.copy') }}
           </Button>
         </div>
-      </template>
-      <p
-        v-else
-        class="text-xs text-muted-foreground"
-      >
-        {{ $t('bots.channels.webhookCallbackPending') }}
-      </p>
-    </div>
-
-    <!-- WeChat QR Login -->
-    <div v-if="channelItem.meta.type === 'weixin'">
-      <WeixinQrLogin
-        :bot-id="botId"
-        @login-success="handleWeixinLoginSuccess"
-      />
-      <Separator class="mt-4" />
-    </div>
-
-    <Separator v-else />
+        <p
+          v-else
+          class="text-[11px] text-muted-foreground italic"
+        >
+          {{ $t('bots.channels.webhookCallbackPending') }}
+        </p>
+      </div>
 
-    <!-- Credentials form (dynamic from config_schema) -->
-    <div class="space-y-4">
-      <h4 class="text-xs font-medium">
-        {{ $t('bots.channels.credentials') }}
-      </h4>
-      <p
-        v-if="showWebhookCallback"
-        class="text-xs text-muted-foreground"
+      <!-- Required Core Area (Core Credentials) -->
+      <div
+        v-if="requiredFieldsKeys.length > 0"
+        class="rounded-md border border-border bg-background p-4 shadow-none space-y-4"
       >
-        {{ $t('bots.channels.feishuWebhookSecurityHint') }}
-      </p>
-
-      <div class="grid gap-4 md:grid-cols-2">
-        <div
-          v-for="(field, key) in orderedFields"
-          :key="key"
-          class="space-y-2"
-          :class="isWideChannelField(field, String(key)) ? 'md:col-span-2' : ''"
-        >
-          <Label :for="field.type === 'bool' || field.type === 'enum' ? undefined : `channel-field-${key}`">
-            {{ field.title || key }}
-            <span
-              v-if="!field.required"
-              class="text-xs text-muted-foreground ml-1"
-            >({{ $t('common.optional') }})</span>
-          </Label>
+        <div class="space-y-1">
+          <h4 class="text-xs font-medium">
+            {{ $t('bots.channels.credentials') }}
+          </h4>
           <p
-            v-if="field.description"
-            class="text-xs text-muted-foreground"
+            v-if="showWebhookCallback"
+            class="text-[11px] text-muted-foreground text-warning/80"
           >
-            {{ field.description }}
+            {{ $t('bots.channels.feishuWebhookSecurityHint') }}
           </p>
-
-          <!-- Secret field -->
+        </div>
+        <div class="grid gap-4 md:grid-cols-2 pt-2">
           <div
-            v-if="field.type === 'secret'"
-            class="relative"
+            v-for="key in requiredFieldsKeys"
+            :key="key"
+            class="space-y-1.5"
+            :class="isWideChannelField(orderedFields[key], key) ? 'md:col-span-2' : ''"
           >
+            <Label
+              :for="`channel-field-${key}`"
+              class="text-xs font-medium"
+            >{{ orderedFields[key].title || key }}</Label>
+            <p
+              v-if="orderedFields[key].description"
+              class="text-[11px] text-muted-foreground leading-tight"
+            >
+              {{ orderedFields[key].description }}
+            </p>
+            
+            <!-- Dynamic Field Render -->
+            <div
+              v-if="orderedFields[key].type === 'secret'"
+              class="relative"
+            >
+              <Input
+                :id="`channel-field-${key}`"
+                :model-value="credentialStringValue(key)"
+                :type="visibleSecrets[key] ? 'text' : 'password'"
+                :placeholder="orderedFields[key].example ? String(orderedFields[key].example) : ''"
+                class="h-8 text-xs shadow-none pr-8"
+                @update:model-value="(val) => setCredentialStringValue(key, val)"
+              />
+              <button
+                type="button"
+                class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                @click="toggleSecret(key)"
+              >
+                <component
+                  :is="visibleSecrets[key] ? EyeOff : Eye"
+                  class="size-3.5"
+                />
+              </button>
+            </div>
+            <Switch
+              v-else-if="orderedFields[key].type === 'bool'"
+              :model-value="!!form.credentials[key]"
+              @update:model-value="(val) => form.credentials[key] = !!val"
+            />
+            <Input
+              v-else-if="orderedFields[key].type === 'number'"
+              :id="`channel-field-${key}`"
+              :model-value="credentialNumberValue(key)"
+              type="number"
+              :placeholder="orderedFields[key].example ? String(orderedFields[key].example) : ''"
+              class="h-8 text-xs shadow-none"
+              @update:model-value="(val) => setCredentialNumberValue(key, val)"
+            />
+            <Select
+              v-else-if="orderedFields[key].type === 'enum' && orderedFields[key].enum"
+              :model-value="String(form.credentials[key] || '')"
+              @update:model-value="(val) => form.credentials[key] = val"
+            >
+              <SelectTrigger class="h-8 text-xs shadow-none">
+                <SelectValue :placeholder="orderedFields[key].title || key" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem
+                  v-for="opt in orderedFields[key].enum"
+                  :key="opt"
+                  :value="opt"
+                  class="text-xs"
+                >
+                  {{ opt }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
             <Input
+              v-else
               :id="`channel-field-${key}`"
               :model-value="credentialStringValue(key)"
-              :type="visibleSecrets[key] ? 'text' : 'password'"
-              :placeholder="field.example ? String(field.example) : ''"
+              type="text"
+              :placeholder="orderedFields[key].example ? String(orderedFields[key].example) : ''"
+              class="h-8 text-xs shadow-none"
               @update:model-value="(val) => setCredentialStringValue(key, val)"
             />
+          </div>
+        </div>
+      </div>
+
+      <!-- Advanced Settings Collapsible Area -->
+      <div class="rounded-md border border-border bg-background p-4 shadow-none space-y-4">
+        <div class="flex items-center justify-between">
+          <div class="space-y-1">
+            <h4 class="text-xs font-medium">
+              Advanced Settings
+            </h4>
+            <p class="text-[11px] text-muted-foreground">
+              Optional configuration parameters for this integration.
+            </p>
+          </div>
+          <div class="flex gap-2">
             <button
-              type="button"
-              class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-              :aria-label="secretToggleLabel(key, field.title || key)"
-              :aria-pressed="!!visibleSecrets[key]"
-              @click="visibleSecrets[key] = !visibleSecrets[key]"
+              :disabled="optionalFieldsKeys.length === 0"
+              class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer hover:bg-accent bg-transparent rounded-lg h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+              @click="isAdvancedExpanded = true"
             >
-              <component
-                :is="visibleSecrets[key] ? EyeOff : Eye"
-                class="size-3.5"
-              />
+              Expand All
+            </button>
+            <button
+              :disabled="optionalFieldsKeys.length === 0"
+              class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer hover:bg-accent bg-transparent rounded-lg h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+              @click="isAdvancedExpanded = false"
+            >
+              Collapse
             </button>
           </div>
-
-          <!-- Boolean field -->
-          <Switch
-            v-else-if="field.type === 'bool'"
-            :model-value="!!form.credentials[key]"
-            @update:model-value="(val) => form.credentials[key] = !!val"
-          />
-
-          <!-- Number field -->
-          <Input
-            v-else-if="field.type === 'number'"
-            :id="`channel-field-${key}`"
-            :model-value="credentialNumberValue(key)"
-            type="number"
-            :placeholder="field.example ? String(field.example) : ''"
-            @update:model-value="(val) => setCredentialNumberValue(key, val)"
-          />
-
-          <!-- Enum field -->
-          <Select
-            v-else-if="field.type === 'enum' && field.enum"
-            :model-value="String(form.credentials[key] || '')"
-            @update:model-value="(val) => form.credentials[key] = val"
+        </div>
+        
+        <div
+          v-show="isAdvancedExpanded"
+          class="pt-4 border-t border-border/50"
+        >
+          <div
+            v-if="optionalFieldsKeys.length > 0"
+            class="grid gap-4 md:grid-cols-2"
           >
-            <SelectTrigger :aria-label="field.title || key">
-              <SelectValue :placeholder="field.title" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem
-                v-for="opt in field.enum"
-                :key="opt"
-                :value="opt"
+            <div
+              v-for="key in optionalFieldsKeys"
+              :key="key"
+              class="space-y-1.5"
+              :class="isWideChannelField(orderedFields[key], key) ? 'md:col-span-2' : ''"
+            >
+              <Label
+                :for="`channel-field-${key}`"
+                class="text-xs font-medium"
+              >{{ orderedFields[key].title || key }}</Label>
+              <p
+                v-if="orderedFields[key].description"
+                class="text-[11px] text-muted-foreground leading-tight"
               >
-                {{ opt }}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-
-          <!-- String field (default) -->
-          <Input
+                {{ orderedFields[key].description }}
+              </p>
+                
+              <!-- Dynamic Field Render -->
+              <div
+                v-if="orderedFields[key].type === 'secret'"
+                class="relative"
+              >
+                <Input
+                  :id="`channel-field-${key}`"
+                  :model-value="credentialStringValue(key)"
+                  :type="visibleSecrets[key] ? 'text' : 'password'"
+                  :placeholder="orderedFields[key].example ? String(orderedFields[key].example) : ''"
+                  class="h-8 text-xs shadow-none pr-8"
+                  @update:model-value="(val) => setCredentialStringValue(key, val)"
+                />
+                <button
+                  type="button"
+                  class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                  @click="toggleSecret(key)"
+                >
+                  <component
+                    :is="visibleSecrets[key] ? EyeOff : Eye"
+                    class="size-3.5"
+                  />
+                </button>
+              </div>
+              <Switch
+                v-else-if="orderedFields[key].type === 'bool'"
+                :model-value="!!form.credentials[key]"
+                @update:model-value="(val) => form.credentials[key] = !!val"
+              />
+              <Input
+                v-else-if="orderedFields[key].type === 'number'"
+                :id="`channel-field-${key}`"
+                :model-value="credentialNumberValue(key)"
+                type="number"
+                :placeholder="orderedFields[key].example ? String(orderedFields[key].example) : ''"
+                class="h-8 text-xs shadow-none"
+                @update:model-value="(val) => setCredentialNumberValue(key, val)"
+              />
+              <Select
+                v-else-if="orderedFields[key].type === 'enum' && orderedFields[key].enum"
+                :model-value="String(form.credentials[key] || '')"
+                @update:model-value="(val) => form.credentials[key] = val"
+              >
+                <SelectTrigger class="h-8 text-xs shadow-none">
+                  <SelectValue :placeholder="orderedFields[key].title || key" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem
+                    v-for="opt in orderedFields[key].enum"
+                    :key="opt"
+                    :value="opt"
+                    class="text-xs"
+                  >
+                    {{ opt }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <Input
+                v-else
+                :id="`channel-field-${key}`"
+                :model-value="credentialStringValue(key)"
+                type="text"
+                :placeholder="orderedFields[key].example ? String(orderedFields[key].example) : ''"
+                class="h-8 text-xs shadow-none"
+                @update:model-value="(val) => setCredentialStringValue(key, val)"
+              />
+            </div>
+          </div>
+          <div
             v-else
-            :id="`channel-field-${key}`"
-            :model-value="credentialStringValue(key)"
-            type="text"
-            :placeholder="field.example ? String(field.example) : ''"
-            @update:model-value="(val) => setCredentialStringValue(key, val)"
-          />
+            class="text-[11px] text-muted-foreground text-center py-2 italic"
+          >
+            No advanced options available for this platform.
+          </div>
         </div>
       </div>
     </div>
 
-    <Separator />
-
-    <div class="flex justify-end gap-2 ">
-      <template v-if="isEditMode">
-        <Button
-          :disabled="isBusy"
-          @click="handleEditSave"
-        >
-          <Spinner
-            v-if="action === 'save'"
-            class="mr-1.5"
-          />
-          {{ $t('common.save') }}
-        </Button>
-      </template>
-      <template v-else>
-        <Button
-          variant="outline"
-          :disabled="isBusy"
-          @click="handleCreateSaveOnly"
-        >
-          <Spinner
-            v-if="action === 'save'"
-            class="mr-1.5"
-          />
-          {{ $t('bots.channels.saveOnly') }}
-        </Button>
-        <Button
-          :disabled="isBusy"
-          @click="handleCreateSaveAndEnable"
-        >
-          <Spinner
-            v-if="action === 'save'"
-            class="mr-1.5"
-          />
-          {{ $t('bots.channels.saveAndEnable') }}
-        </Button>
-      </template>
+    <!-- Stoic Danger Zone -->
+    <div
+      v-if="isEditMode"
+      class="pt-4"
+    >
+      <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <div class="space-y-0.5">
+            <h4 class="text-xs font-medium text-destructive">
+              Danger Zone
+            </h4>
+            <p class="text-[11px] text-muted-foreground">
+              Deleting this connection cannot be undone. Proceed with caution.
+            </p>
+          </div>
+          <div class="flex justify-end shrink-0">
+            <ConfirmPopover
+              :message="$t('bots.channels.deleteConfirm')"
+              :loading="action === 'delete'"
+              @confirm="handleDelete"
+            >
+              <template #trigger>
+                <button 
+                  type="button" 
+                  :disabled="isBusy"
+                  class="inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-lg gap-1.5 px-3 min-w-28 h-8 text-xs font-medium shadow-none"
+                >
+                  <Spinner
+                    v-if="action === 'delete'"
+                    class="mr-1.5 size-3"
+                  />
+                  {{ $t('common.delete') }}
+                </button>
+              </template>
+            </ConfirmPopover>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  Button,
-  Input,
-  Label,
-  Separator,
-  Switch,
-  Spinner,
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from '@memohai/ui'
+import { Button, Input, Label, Switch, Spinner, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@memohai/ui'
 import { Eye, EyeOff } from 'lucide-vue-next'
-import { reactive, watch, computed, ref } from 'vue'
+import { reactive, watch, computed, ref, toRaw } from 'vue'
 import { toast } from 'vue-sonner'
 import { useI18n } from 'vue-i18n'
-import { useMutation, useQueryCache } from '@pinia/colada'
+import { useMutation } from '@pinia/colada'
 import { putBotsByIdChannelByPlatform, deleteBotsByIdChannelByPlatform, patchBotsByIdChannelByPlatformStatus } from '@memohai/sdk'
 import type { HandlersChannelMeta, ChannelChannelConfig, ChannelFieldSchema, ChannelUpsertConfigRequest } from '@memohai/sdk'
 import { client } from '@memohai/sdk/client'
@@ -278,7 +424,7 @@ import ChannelIcon from '@/components/channel-icon/index.vue'
 import WeixinQrLogin from './weixin-qr-login.vue'
 import { channelTypeDisplayName } from '@/utils/channel-type-label'
 
-interface BotChannelItem {
+export interface BotChannelItem {
   meta: HandlersChannelMeta
   config: ChannelChannelConfig | null
   configured: boolean
@@ -287,63 +433,45 @@ interface BotChannelItem {
 const props = defineProps<{
   botId: string
   channelItem: BotChannelItem
+  allDirtyStates: Record<string, boolean>
 }>()
 
 const emit = defineEmits<{
   saved: []
+  'update:dirty': [isDirty: boolean]
+  'switch-tab': [channel: string]
 }>()
 
 const { t } = useI18n()
 const botIdRef = computed(() => props.botId)
 const platformType = computed(() => String(props.channelItem.meta.type || '').trim())
+const channelTitle = computed(() => channelTypeDisplayName(t, props.channelItem.meta.type, props.channelItem.meta.display_name))
+const platformKeyLine = computed(() => t('bots.channels.platformKey', { key: platformType.value }))
+// queryCache removed
 
-const channelTitle = computed(() =>
-  channelTypeDisplayName(t, props.channelItem.meta.type, props.channelItem.meta.display_name),
-)
-const platformKeyLine = computed(() =>
-  t('bots.channels.platformKey', { key: platformType.value }),
-)
-const queryCache = useQueryCache()
-const { mutateAsync: upsertChannel, isLoading } = useMutation({
-  mutation: async ({ platform, data }: { platform: string; data: ChannelUpsertConfigRequest }) => {
-    const { data: result } = await putBotsByIdChannelByPlatform({
-      path: { id: botIdRef.value, platform },
-      body: data,
-      throwOnError: true,
-    })
-    return result
-  },
-  onSettled: () => queryCache.invalidateQueries({ key: ['bot-channels', botIdRef.value] }),
-})
-const { mutateAsync: updateChannelStatus, isLoading: isStatusLoading } = useMutation({
-  mutation: async ({ platform, disabled }: { platform: string; disabled: boolean }) => {
-    const { data } = await patchBotsByIdChannelByPlatformStatus({
-      path: { id: botIdRef.value, platform },
-      body: { disabled },
-      throwOnError: true,
-    })
-    return data
-  },
-  onSettled: () => queryCache.invalidateQueries({ key: ['bot-channels', botIdRef.value] }),
-})
 const action = ref<'save' | 'toggle' | 'delete' | ''>('')
-const isBusy = computed(() => isLoading.value || isStatusLoading.value || action.value !== '')
+const isBusy = computed(() => action.value !== '')
 const isEditMode = computed(() => props.channelItem.configured)
 const lastSavedConfigId = ref('')
 
-// ---- Form state ----
+const form = reactive<{ credentials: Record<string, unknown>; disabled: boolean }>({ credentials: {}, disabled: false })
+const initialCredentialsString = ref('')
+const visibleSecrets = reactive<Record<string, boolean>>({})
+const isAdvancedExpanded = ref(false)
 
-const form = reactive<{
-  credentials: Record<string, unknown>
-  disabled: boolean
-}>({
-  credentials: {},
-  disabled: false,
+const { mutateAsync: upsertChannel } = useMutation({
+  mutation: async ({ platform, data }: { platform: string; data: ChannelUpsertConfigRequest }) => {
+    const { data: result } = await putBotsByIdChannelByPlatform({ path: { id: botIdRef.value, platform }, body: data, throwOnError: true })
+    return result
+  }
+})
+const { mutateAsync: updateChannelStatus } = useMutation({
+  mutation: async ({ platform, disabled }: { platform: string; disabled: boolean }) => {
+    const { data } = await patchBotsByIdChannelByPlatformStatus({ path: { id: botIdRef.value, platform }, body: { disabled }, throwOnError: true })
+    return data
+  }
 })
 
-const visibleSecrets = reactive<Record<string, boolean>>({})
-
-// Schema fields sorted: required first. Exclude "status"/"disabled" from credential form.
 function isWideChannelField(field: ChannelFieldSchema, key: string): boolean {
   if (field.type === 'secret') return true
   const lower = key.toLowerCase()
@@ -354,190 +482,108 @@ function isWideChannelField(field: ChannelFieldSchema, key: string): boolean {
 
 const orderedFields = computed(() => {
   const fields = props.channelItem.meta.config_schema?.fields ?? {}
-  const hiddenFields = new Set(['status', 'disabled'])
-  const entries = Object.entries(fields).filter(([key]) => !hiddenFields.has(key))
+  const entries = Object.entries(fields).filter(([key]) => key !== 'status' && key !== 'disabled')
   entries.sort(([keyA, a], [keyB, b]) => {
     if (a.required && !b.required) return -1
     if (!a.required && b.required) return 1
     const orderA = a.order ?? Number.MAX_SAFE_INTEGER
     const orderB = b.order ?? Number.MAX_SAFE_INTEGER
-    if (orderA !== orderB) return orderA - orderB
-    return keyA.localeCompare(keyB)
+    return orderA !== orderB ? orderA - orderB : keyA.localeCompare(keyB)
   })
   return Object.fromEntries(entries) as Record<string, ChannelFieldSchema>
 })
 
-const currentInboundMode = computed(() => {
-  const value = form.credentials.inboundMode ?? form.credentials.inbound_mode
-  if (typeof value !== 'string') return ''
-  return value.trim().toLowerCase()
-})
-
-const showWebhookCallback = computed(() => {
-  return supportsWebhookCallback(platformType.value, currentInboundMode.value)
-})
+const requiredFieldsKeys = computed(() => Object.keys(orderedFields.value).filter(k => orderedFields.value[k].required))
+const optionalFieldsKeys = computed(() => Object.keys(orderedFields.value).filter(k => !orderedFields.value[k].required))
 
+const currentInboundMode = computed(() => String(form.credentials.inboundMode ?? form.credentials.inbound_mode ?? '').trim().toLowerCase())
+const showWebhookCallback = computed(() => platformType.value === 'feishu' ? currentInboundMode.value === 'webhook' : platformType.value === 'wechatoa')
 const webhookCallbackUrl = computed(() => {
   if (!showWebhookCallback.value) return ''
   const configId = String(props.channelItem.config?.id || lastSavedConfigId.value || '').trim()
-  if (!configId) return ''
-  return buildWebhookCallbackUrl(configId)
+  return configId ? buildWebhookCallbackUrl(configId) : ''
 })
 
 function initForm() {
   const schema = props.channelItem.meta.config_schema?.fields ?? {}
   const existingCredentials = props.channelItem.config?.credentials ?? {}
-
   const creds: Record<string, unknown> = {}
+  
+  let hasPopulatedOptional = false
   for (const [key, field] of Object.entries(schema)) {
-    const existingValue = existingCredentials[key]
-    if (existingValue !== undefined) {
-      creds[key] = existingValue
-      continue
-    }
-    if (field.type === 'bool') {
-      creds[key] = undefined
-      continue
+    if (existingCredentials[key] !== undefined) {
+      creds[key] = existingCredentials[key]
+      if (!field.required && creds[key] && String(creds[key]).trim() !== '') hasPopulatedOptional = true
+    } else {
+      creds[key] = field.type === 'bool' ? undefined : ''
     }
-    creds[key] = ''
   }
   form.credentials = creds
   form.disabled = props.channelItem.config?.disabled ?? false
   lastSavedConfigId.value = String(props.channelItem.config?.id || '').trim()
+  initialCredentialsString.value = JSON.stringify(creds)
+  
+  // Smart expansion of Advanced Settings
+  isAdvancedExpanded.value = hasPopulatedOptional
+  emit('update:dirty', false)
 }
 
-watch(
-  () => props.channelItem,
-  () => initForm(),
-  { immediate: true },
-)
-
-function validateRequired(): boolean {
-  const schema = props.channelItem.meta.config_schema?.fields ?? {}
-  for (const [key, field] of Object.entries(schema)) {
-    if (field.required) {
-      const val = form.credentials[key]
-      if (!val || (typeof val === 'string' && val.trim() === '')) {
-        toast.error(t('bots.channels.requiredField', { field: field.title || key }))
-        return false
-      }
-    }
-  }
-  return true
-}
-
-function validateFeishuWebhookSecrets(): boolean {
-  if (props.channelItem.meta.type !== 'feishu' || currentInboundMode.value !== 'webhook') {
-    return true
-  }
-  const encryptKey = String(form.credentials.encryptKey ?? form.credentials.encrypt_key ?? '').trim()
-  const verificationToken = String(form.credentials.verificationToken ?? form.credentials.verification_token ?? '').trim()
-  if (encryptKey !== '' || verificationToken !== '') {
-    return true
-  }
-  toast.error(t('bots.channels.feishuWebhookSecretRequired'))
-  return false
-}
-
-function buildCredentials(): Record<string, unknown> {
-  const credentials: Record<string, unknown> = {}
-  for (const [key, val] of Object.entries(form.credentials)) {
-    if (key === 'status' || key === 'disabled') continue
-    if (val === '' || val === undefined || val === null) continue
-    credentials[key] = val
-  }
-  return credentials
-}
+watch(() => props.channelItem, initForm, { immediate: true })
 
-function credentialStringValue(key: string): string | number | undefined {
-  const value = form.credentials[key]
-  if (typeof value === 'string' || typeof value === 'number') {
-    return value
-  }
-  return undefined
-}
+const isFormDirty = computed(() => JSON.stringify(toRaw(form.credentials)) !== initialCredentialsString.value)
+watch(isFormDirty, (val) => emit('update:dirty', val))
 
-function setCredentialStringValue(key: string, value: string | number) {
-  form.credentials[key] = value
-}
+const dirtyPrompt = computed(() => {
+  if (isFormDirty.value) return { type: 'current', channel: platformType.value, channelName: channelTitle.value }
+  const otherDirty = Object.keys(props.allDirtyStates).find(k => props.allDirtyStates[k] && k !== platformType.value)
+  if (otherDirty) return { type: 'other', channel: otherDirty, channelName: channelTypeDisplayName(t, otherDirty, otherDirty) }
+  return null
+})
 
-function credentialNumberValue(key: string): string | number | undefined {
-  const value = form.credentials[key]
-  if (typeof value === 'number' || typeof value === 'string') {
-    return value
+function validateRequired(): boolean {
+  for (const key of requiredFieldsKeys.value) {
+    const val = form.credentials[key]
+    if (!val || (typeof val === 'string' && val.trim() === '')) {
+      toast.error(t('bots.channels.requiredField', { field: orderedFields.value[key].title || key }))
+      return false
+    }
   }
-  return undefined
-}
-
-function setCredentialNumberValue(key: string, value: string | number) {
-  if (value === '') {
-    form.credentials[key] = ''
-    return
+  if (platformType.value === 'feishu' && currentInboundMode.value === 'webhook') {
+    if (!String(form.credentials.encryptKey || form.credentials.encrypt_key || '').trim() && !String(form.credentials.verificationToken || form.credentials.verification_token || '').trim()) {
+      toast.error(t('bots.channels.feishuWebhookSecretRequired'))
+      return false
+    }
   }
-  const numericValue = typeof value === 'number' ? value : Number(value)
-  form.credentials[key] = Number.isNaN(numericValue) ? '' : numericValue
-}
-
-function secretToggleLabel(key: string, label: string): string {
-  return visibleSecrets[key]
-    ? t('bots.channels.hideSecretField', { field: label })
-    : t('bots.channels.showSecretField', { field: label })
+  return true
 }
 
-async function saveChannel(disabled: boolean, nextAction: 'save' | 'toggle') {
+async function handleSave() {
   if (!validateRequired()) return
-  if (!validateFeishuWebhookSecrets()) return
-  action.value = nextAction
+  action.value = 'save'
   try {
-    const result = await upsertChannel({
-      platform: platformType.value,
-      data: {
-        credentials: buildCredentials(),
-        disabled,
-      },
-    })
+    const cleanCreds = Object.fromEntries(Object.entries(form.credentials).filter(([k, v]) => k !== 'status' && k !== 'disabled' && v !== '' && v !== undefined && v !== null))
+    const result = await upsertChannel({ platform: platformType.value, data: { credentials: cleanCreds, disabled: form.disabled } })
     lastSavedConfigId.value = String(result?.id || lastSavedConfigId.value || '').trim()
-    form.disabled = disabled
+    initialCredentialsString.value = JSON.stringify(toRaw(form.credentials))
     toast.success(t('bots.channels.saveSuccess'))
+    emit('update:dirty', false)
     emit('saved')
   } catch (err) {
-    let detail = ''
-    if (err instanceof Error) {
-      detail = err.message
-    }
-    toast.error(detail ? `${t('bots.channels.saveFailed')}: ${detail}` : t('bots.channels.saveFailed'))
+    toast.error(err.message ? `${t('bots.channels.saveFailed')}: ${err.message}` : t('bots.channels.saveFailed'))
   } finally {
     action.value = ''
   }
 }
 
-async function handleCreateSaveOnly() {
-  await saveChannel(true, 'save')
-}
-
-async function handleCreateSaveAndEnable() {
-  await saveChannel(false, 'save')
-}
-
-async function handleEditSave() {
-  await saveChannel(form.disabled, 'save')
-}
-
 async function handleToggleDisabled() {
+  action.value = 'toggle'
   try {
-    const nextDisabled = !form.disabled
-    if (!nextDisabled && !validateFeishuWebhookSecrets()) return
-    action.value = 'toggle'
-    const result = await updateChannelStatus({
-      platform: platformType.value,
-      disabled: nextDisabled,
-    })
+    const result = await updateChannelStatus({ platform: platformType.value, disabled: !form.disabled })
     form.disabled = !!result?.disabled
     toast.success(t('bots.channels.saveSuccess'))
     emit('saved')
   } catch (err) {
-    const detail = err instanceof Error ? err.message : ''
-    toast.error(detail ? `${t('bots.channels.saveFailed')}: ${detail}` : t('bots.channels.saveFailed'))
+    toast.error(err.message ? `${t('bots.channels.saveFailed')}: ${err.message}` : t('bots.channels.saveFailed'))
   } finally {
     action.value = ''
   }
@@ -546,10 +592,7 @@ async function handleToggleDisabled() {
 async function handleDelete() {
   action.value = 'delete'
   try {
-    await deleteBotsByIdChannelByPlatform({
-      path: { id: botIdRef.value, platform: platformType.value },
-      throwOnError: true,
-    })
+    await deleteBotsByIdChannelByPlatform({ path: { id: botIdRef.value, platform: platformType.value }, throwOnError: true })
     lastSavedConfigId.value = ''
     toast.success(t('bots.channels.deleteSuccess'))
     emit('saved')
@@ -561,79 +604,56 @@ async function handleDelete() {
   }
 }
 
-function buildWebhookCallbackUrl(configId: string): string {
-  const normalizedBase = resolveWebhookCallbackBaseUrl()
-  if (!normalizedBase) return ''
-  if (typeof window !== 'undefined') {
-    const baseUrl = new URL(normalizedBase, window.location.origin)
-    baseUrl.pathname = `${baseUrl.pathname.replace(/\/+$/, '')}/channels/${encodeURIComponent(platformType.value)}/webhook/${encodeURIComponent(configId)}`
-    baseUrl.search = ''
-    baseUrl.hash = ''
-    return baseUrl.toString()
-  }
-  const base = normalizedBase.replace(/\/+$/, '')
-  return `${base}/channels/${encodeURIComponent(platformType.value)}/webhook/${encodeURIComponent(configId)}`
-}
-
-function resolveWebhookCallbackBaseUrl(): string {
-  const explicitRaw = String(
-    import.meta.env.VITE_WEBHOOK_PUBLIC_BASE_URL?.trim() ||
-    import.meta.env.VITE_API_PUBLIC_URL?.trim() ||
-    '',
-  ).trim()
-  if (isAbsoluteHttpUrl(explicitRaw)) {
-    return explicitRaw
-  }
+function toggleSecret(key: string) { visibleSecrets[key] = !visibleSecrets[key] }
 
-  const apiBase = String(client.getConfig().baseUrl || import.meta.env.VITE_API_URL?.trim() || '').trim()
-  if (isAbsoluteHttpUrl(apiBase)) {
-    return apiBase
-  }
-
-  if (typeof window === 'undefined') {
-    return ''
-  }
-  const fallbackApiPort = String(import.meta.env.VITE_API_PORT || '8080').trim()
-  const fallback = new URL(window.location.origin)
-  if (fallbackApiPort) {
-    fallback.port = fallbackApiPort
+function credentialStringValue(key: string): string | undefined {
+  const value = form.credentials[key]
+  if (typeof value === 'string' || typeof value === 'number') {
+    return String(value)
   }
-  fallback.search = ''
-  fallback.hash = ''
-  return fallback.toString().replace(/\/+$/, '')
+  return undefined
 }
 
-function isAbsoluteHttpUrl(value: string): boolean {
-  return /^https?:\/\//i.test(value)
+function setCredentialStringValue(key: string, value: string | number) {
+  form.credentials[key] = value
 }
 
-function supportsWebhookCallback(channelType: string, inboundMode: string): boolean {
-  if (channelType === 'feishu') {
-    return inboundMode === 'webhook'
+function credentialNumberValue(key: string): string | number | undefined {
+  const value = form.credentials[key]
+  if (typeof value === 'number' || typeof value === 'string') {
+    return value
   }
-  if (channelType === 'wechatoa') {
-    return true
+  return undefined
+}
+
+function setCredentialNumberValue(key: string, value: string | number) {
+  if (value === '') {
+    form.credentials[key] = ''
+    return
   }
-  return false
+  const numericValue = typeof value === 'number' ? value : Number(value)
+  form.credentials[key] = Number.isNaN(numericValue) ? '' : numericValue
 }
 
-function handleWeixinLoginSuccess() {
-  queryCache.invalidateQueries({ key: ['bot-channels', botIdRef.value] })
-  emit('saved')
+function buildWebhookCallbackUrl(configId: string): string {
+  const base = (import.meta.env.VITE_WEBHOOK_PUBLIC_BASE_URL?.trim() || import.meta.env.VITE_API_PUBLIC_URL?.trim() || client.getConfig().baseUrl || import.meta.env.VITE_API_URL?.trim() || (typeof window !== 'undefined' ? new URL(window.location.origin).toString() : '')).replace(/\/+$/, '')
+  return `${base}/channels/${encodeURIComponent(platformType.value)}/webhook/${encodeURIComponent(configId)}`
 }
 
 async function copyWebhookCallback() {
-  if (!webhookCallbackUrl.value) return
-  try {
-    if (typeof navigator !== 'undefined' && navigator.clipboard) {
-      await navigator.clipboard.writeText(webhookCallbackUrl.value)
-      toast.success(t('common.copied'))
-      return
-    }
+  if (webhookCallbackUrl.value && typeof navigator !== 'undefined' && navigator.clipboard) {
+    await navigator.clipboard.writeText(webhookCallbackUrl.value)
+    toast.success(t('common.copied'))
+  } else {
     toast.error(t('bots.channels.copyFailed'))
-  } catch (err) {
-    const detail = err instanceof Error ? err.message : ''
-    toast.error(detail ? `${t('bots.channels.copyFailed')}: ${detail}` : t('bots.channels.copyFailed'))
   }
 }
+
+function handleWeixinLoginSuccess() { emit('saved') }
 </script>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+</style>
+
diff --git a/apps/web/src/pages/bots/components/memory-provider-select.vue b/apps/web/src/pages/bots/components/memory-provider-select.vue
index 44bdef23e..1f6b1b865 100644
--- a/apps/web/src/pages/bots/components/memory-provider-select.vue
+++ b/apps/web/src/pages/bots/components/memory-provider-select.vue
@@ -15,7 +15,7 @@
         role="combobox"
         :aria-expanded="open"
         :aria-label="placeholder || 'Select memory provider'"
-        class="w-full justify-between font-normal"
+        class="w-full justify-between font-normal text-xs shadow-none h-9"
       >
         <span class="flex min-w-0 items-center gap-2 truncate">
           <Brain
diff --git a/apps/web/src/pages/bots/components/model-options.vue b/apps/web/src/pages/bots/components/model-options.vue
index 25e5e163b..2d3f2bb0c 100644
--- a/apps/web/src/pages/bots/components/model-options.vue
+++ b/apps/web/src/pages/bots/components/model-options.vue
@@ -102,6 +102,8 @@ const props = defineProps<{
   providers: ProvidersGetResponse[]
   modelType: 'chat' | 'embedding'
   open?: boolean
+  showTags?: boolean
+  showIcons?: boolean
 }>()
 
 defineEmits<{
diff --git a/apps/web/src/pages/bots/components/model-select.vue b/apps/web/src/pages/bots/components/model-select.vue
index e464d8175..3dda97a00 100644
--- a/apps/web/src/pages/bots/components/model-select.vue
+++ b/apps/web/src/pages/bots/components/model-select.vue
@@ -6,7 +6,7 @@
         role="combobox"
         :aria-expanded="open"
         :aria-label="placeholder || 'Select model'"
-        class="w-full justify-between font-normal"
+        class="w-full justify-between font-normal shadow-none h-9 text-xs"
       >
         <span
           class="truncate"
@@ -20,7 +20,7 @@
       </Button>
     </PopoverTrigger>
     <PopoverContent
-      class="w-[--reka-popover-trigger-width] p-0"
+      class="w-[--reka-popover-trigger-width] p-0 shadow-md rounded-[8px]"
       align="start"
     >
       <ModelOptions
diff --git a/apps/web/src/pages/bots/components/schedule-pattern-builder.vue b/apps/web/src/pages/bots/components/schedule-pattern-builder.vue
index 9fcc5081a..19a1c3345 100644
--- a/apps/web/src/pages/bots/components/schedule-pattern-builder.vue
+++ b/apps/web/src/pages/bots/components/schedule-pattern-builder.vue
@@ -66,26 +66,62 @@
     <!-- daily -->
     <div
       v-else-if="state.mode === 'daily'"
-      class="space-y-3"
+      class="space-y-4"
     >
-      <div class="space-y-2">
-        <Label>{{ $t('bots.schedule.form.hours') }}</Label>
-        <p class="text-xs text-muted-foreground">
-          {{ $t('bots.schedule.form.hoursHint') }}
-        </p>
-        <div class="grid grid-cols-8 gap-1.5">
-          <button
-            v-for="h in 24"
-            :key="h - 1"
-            type="button"
-            class="h-8 rounded-md border text-xs font-mono transition-colors"
-            :class="state.hours.includes(h - 1)
-              ? 'bg-primary text-primary-foreground border-primary'
-              : 'bg-background hover:bg-accent'"
-            @click="toggleHour(h - 1)"
-          >
-            {{ pad2(h - 1) }}
-          </button>
+      <div class="space-y-3">
+        <div class="space-y-1.5">
+          <Label>{{ $t('bots.schedule.form.hours') }}</Label>
+          <p class="text-xs text-muted-foreground">
+            {{ $t('bots.schedule.form.hoursHint') }}
+          </p>
+        </div>
+
+        <!-- AM Row -->
+        <div class="space-y-2">
+          <div class="flex items-center gap-1.5 text-muted-foreground">
+            <Sun class="size-3.5" />
+            <h3 class="text-[10px] font-semibold uppercase tracking-wider">
+              AM
+            </h3>
+          </div>
+          <div class="grid grid-cols-6 sm:grid-cols-12 gap-1.5">
+            <button
+              v-for="h in 12"
+              :key="h - 1"
+              type="button"
+              class="h-8 rounded-md border text-[11px] font-mono transition-colors"
+              :class="state.hours.includes(h - 1)
+                ? 'bg-primary text-primary-foreground border-primary'
+                : 'bg-background hover:bg-accent'"
+              @click="toggleHour(h - 1)"
+            >
+              {{ pad2(h - 1) }}
+            </button>
+          </div>
+        </div>
+
+        <!-- PM Row -->
+        <div class="space-y-2">
+          <div class="flex items-center gap-1.5 text-muted-foreground">
+            <Moon class="size-3.5" />
+            <h3 class="text-[10px] font-semibold uppercase tracking-wider">
+              PM
+            </h3>
+          </div>
+          <div class="grid grid-cols-6 sm:grid-cols-12 gap-1.5">
+            <button
+              v-for="h in 12"
+              :key="h + 11"
+              type="button"
+              class="h-8 rounded-md border text-[11px] font-mono transition-colors"
+              :class="state.hours.includes(h + 11)
+                ? 'bg-primary text-primary-foreground border-primary'
+                : 'bg-background hover:bg-accent'"
+              @click="toggleHour(h + 11)"
+            >
+              {{ pad2(h + 11) }}
+            </button>
+          </div>
         </div>
       </div>
       <div class="space-y-2">
@@ -314,6 +350,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { Sun, Moon } from 'lucide-vue-next'
 import { Input, Label, NativeSelect } from '@memohai/ui'
 import {
   describeCron,
diff --git a/apps/web/src/pages/bots/components/search-provider-select.vue b/apps/web/src/pages/bots/components/search-provider-select.vue
index 22cd1d4ed..6923d7bd3 100644
--- a/apps/web/src/pages/bots/components/search-provider-select.vue
+++ b/apps/web/src/pages/bots/components/search-provider-select.vue
@@ -15,7 +15,7 @@
         role="combobox"
         :aria-expanded="open"
         :aria-label="placeholder || 'Select search provider'"
-        class="w-full justify-between font-normal"
+        class="w-full justify-between font-normal text-xs shadow-none h-9"
       >
         <span class="flex min-w-0 items-center gap-2 truncate">
           <SearchProviderLogo
diff --git a/apps/web/src/pages/bots/components/settings-context-card.vue b/apps/web/src/pages/bots/components/settings-context-card.vue
new file mode 100644
index 000000000..71948ff4c
--- /dev/null
+++ b/apps/web/src/pages/bots/components/settings-context-card.vue
@@ -0,0 +1,285 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+    <!-- Header Section -->
+    <div class="space-y-0.5">
+      <h4 class="text-xs font-medium text-foreground">
+        {{ $t('bots.settings.blocks.context') }}
+      </h4>
+      <p class="text-[11px] text-muted-foreground">
+        {{ $t('bots.settings.blocks.contextDescription') }}
+      </p>
+    </div>
+
+    <!-- Configuration inputs with compact spacing -->
+    <div class="space-y-3 pt-1">
+      <div class="space-y-1.5">
+        <Label class="text-xs font-medium text-foreground">{{ $t('bots.settings.searchProvider') }}</Label>
+        <SearchProviderSelect
+          v-model="form.search_provider_id"
+          :providers="searchProviders"
+          :placeholder="$t('bots.settings.searchProviderPlaceholder')"
+        />
+      </div>
+
+      <div class="space-y-1.5">
+        <Label class="text-xs font-medium text-foreground">{{ $t('bots.settings.memoryProvider') }}</Label>
+        <MemoryProviderSelect
+          v-model="form.memory_provider_id"
+          :providers="memoryProviders"
+          :placeholder="$t('bots.settings.memoryProviderPlaceholder')"
+        />
+        
+        <!-- Bento-style memory status refactoring -->
+        <div
+          v-if="showMemoryProviderStatusCard"
+          class="mt-3 space-y-2"
+        >
+          <div class="flex items-center justify-between rounded-md border border-border bg-muted/20 px-3 py-2 shadow-none">
+            <div class="space-y-0.5">
+              <p class="text-xs font-medium text-foreground">
+                {{ indexedMemoryStatusTitle }}
+              </p>
+              <p class="text-[10px] text-muted-foreground">
+                {{ isSelectedMemoryProviderPersisted ? $t('bots.settings.memoryHealthOk') : $t('bots.settings.indexedMemoryStatusPendingSave') }}
+              </p>
+            </div>
+            <div class="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                :disabled="!isSelectedMemoryProviderPersisted || isRebuilding || !memoryStatus?.can_manual_sync"
+                class="shadow-none h-7 px-3 text-xs bg-background"
+                @click="$emit('sync-memory')"
+              >
+                <Spinner
+                  v-if="isRebuilding"
+                  class="mr-1.5 size-3"
+                />
+                {{ $t('bots.settings.memorySyncAction') }}
+              </Button>
+              <Button
+                v-if="isSelectedMemoryProviderPersisted"
+                variant="ghost"
+                size="sm"
+                class="h-7 px-3 text-xs text-muted-foreground hover:text-foreground shadow-none"
+                @click="showDetails = !showDetails"
+              >
+                {{ showDetails ? $t('bots.settings.hideMemoryDetails') : $t('bots.settings.showMemoryDetails') }}
+                <ChevronDown
+                  class="ml-1 size-3.5 transition-transform"
+                  :class="showDetails ? 'rotate-180' : ''"
+                />
+              </Button>
+            </div>
+          </div>
+          
+          <div
+            v-if="showDetails && isSelectedMemoryProviderPersisted"
+            class="grid gap-2 sm:grid-cols-3"
+          >
+            <div
+              v-if="isMemoryStatusLoading"
+              class="text-xs text-muted-foreground col-span-full py-4 text-center border rounded-md border-dashed"
+            >
+              <Spinner class="inline-block mr-2 align-text-bottom size-3" />
+              {{ $t('common.loading') }}
+            </div>
+            
+            <template v-else-if="statusCardData">
+              <div class="rounded-md border border-border bg-background p-3 flex flex-col justify-between min-h-[70px]">
+                <p class="text-[10px] text-muted-foreground tracking-tight">
+                  {{ $t('bots.settings.memorySourceDir') }}
+                </p>
+                <p class="mt-1 text-xs font-mono font-medium text-foreground break-all leading-snug">
+                  {{ statusCardData.source_dir || '-' }}
+                </p>
+              </div>
+
+              <div class="rounded-md border border-border bg-background p-3 flex flex-col justify-between min-h-[70px]">
+                <p class="text-[10px] text-muted-foreground tracking-tight">
+                  {{ $t('bots.settings.memoryOverviewPath') }}
+                </p>
+                <p class="mt-1 text-xs font-mono font-medium text-foreground break-all leading-snug">
+                  {{ statusCardData.overview_path || '-' }}
+                </p>
+              </div>
+
+              <div class="rounded-md border border-border bg-background p-3 flex flex-col justify-between min-h-[70px]">
+                <p class="text-[10px] text-muted-foreground tracking-tight">
+                  {{ $t('bots.settings.memoryMarkdownFiles') }}
+                </p>
+                <p class="mt-1 text-base font-mono font-semibold text-foreground leading-none">
+                  {{ statusCardData.markdown_file_count ?? 0 }}
+                </p>
+              </div>
+
+              <div class="rounded-md border border-border bg-background p-3 flex flex-col justify-between min-h-[70px]">
+                <p class="text-[10px] text-muted-foreground tracking-tight">
+                  {{ $t('bots.settings.memorySourceEntries') }}
+                </p>
+                <p class="mt-1 text-base font-mono font-semibold text-foreground leading-none">
+                  {{ statusCardData.source_count ?? 0 }}
+                </p>
+              </div>
+
+              <div class="rounded-md border border-border bg-background p-3 flex flex-col justify-between min-h-[70px]">
+                <p class="text-[10px] text-muted-foreground tracking-tight">
+                  {{ $t('bots.settings.memoryIndexedEntries') }}
+                </p>
+                <p class="mt-1 text-base font-mono font-semibold text-foreground leading-none">
+                  {{ statusCardData.indexed_count ?? 0 }}
+                </p>
+              </div>
+
+              <div
+                v-if="showQdrantDetails"
+                class="rounded-md border border-border bg-background p-3 flex flex-col justify-between min-h-[70px] sm:col-span-1"
+              >
+                <p class="text-[10px] text-muted-foreground tracking-tight">
+                  {{ $t('bots.settings.memoryQdrantCollection') }}
+                </p>
+                <p class="mt-1 text-xs font-mono font-medium text-foreground break-all leading-snug">
+                  {{ statusCardData.qdrant_collection || '-' }}
+                </p>
+              </div>
+
+              <div
+                v-if="showEncoderHealth"
+                class="rounded-md border border-border bg-background p-3 flex flex-col justify-between min-h-[70px]"
+              >
+                <p class="text-[10px] text-muted-foreground tracking-tight">
+                  {{ encoderHealthLabel }}
+                </p>
+                <div class="flex items-center gap-1.5 mt-1">
+                  <div
+                    class="size-1.5 rounded-full"
+                    :class="statusCardData.encoder?.ok ? 'bg-foreground' : 'bg-destructive'"
+                  />
+                  <p
+                    class="text-xs font-medium leading-none"
+                    :class="healthTextClass(statusCardData.encoder?.ok)"
+                  >
+                    {{ healthLabel(statusCardData.encoder?.ok, statusCardData.encoder?.error) }}
+                  </p>
+                </div>
+              </div>
+
+              <div
+                v-if="showQdrantHealth"
+                class="rounded-md border border-border bg-background p-3 flex flex-col justify-between min-h-[70px]"
+              >
+                <p class="text-[10px] text-muted-foreground tracking-tight">
+                  {{ $t('bots.settings.memoryQdrantHealth') }}
+                </p>
+                <div class="flex items-center gap-1.5 mt-1">
+                  <div
+                    class="size-1.5 rounded-full"
+                    :class="statusCardData.qdrant?.ok ? 'bg-foreground' : 'bg-destructive'"
+                  />
+                  <p
+                    class="text-xs font-medium leading-none"
+                    :class="healthTextClass(statusCardData.qdrant?.ok)"
+                  >
+                    {{ healthLabel(statusCardData.qdrant?.ok, statusCardData.qdrant?.error) }}
+                  </p>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Label, Button, Spinner } from '@memohai/ui'
+import { ChevronDown } from 'lucide-vue-next'
+import { useI18n } from 'vue-i18n'
+import SearchProviderSelect from './search-provider-select.vue'
+import MemoryProviderSelect from './memory-provider-select.vue'
+import type { 
+  SettingsSettings, 
+  AdaptersProviderGetResponse, 
+  AdaptersMemoryStatusResponse 
+} from '@memohai/sdk'
+
+const props = defineProps<{
+  form: SettingsSettings
+  searchProviders: AdaptersProviderGetResponse[]
+  memoryProviders: AdaptersProviderGetResponse[]
+  persistedMemoryProviderID: string
+  memoryStatus: AdaptersMemoryStatusResponse | null
+  isMemoryStatusLoading: boolean
+  isRebuilding: boolean
+}>()
+
+defineEmits<{
+  'sync-memory': []
+}>()
+
+const { t } = useI18n()
+
+const showDetails = ref(false)
+
+const selectedMemoryProvider = computed(() =>
+  props.memoryProviders.find((provider) => provider.id === props.form.memory_provider_id),
+)
+const selectedMemoryProviderType = computed(() =>
+  selectedMemoryProvider.value?.provider ?? '',
+)
+const selectedBuiltinMemoryProvider = computed(() =>
+  selectedMemoryProvider.value?.provider === 'builtin' ? selectedMemoryProvider.value : null,
+)
+const selectedMem0MemoryProvider = computed(() =>
+  selectedMemoryProvider.value?.provider === 'mem0' ? selectedMemoryProvider.value : null,
+)
+const selectedBuiltinMemoryMode = computed(() =>
+  (selectedBuiltinMemoryProvider.value?.config as Record<string, string> | undefined)?.memory_mode || 'off',
+)
+const isSelectedMemoryProviderPersisted = computed(() =>
+  !!props.form.memory_provider_id && props.form.memory_provider_id === props.persistedMemoryProviderID,
+)
+const showBuiltinIndexedMemoryStatus = computed(() =>
+  selectedBuiltinMemoryMode.value === 'sparse' || selectedBuiltinMemoryMode.value === 'dense',
+)
+const showMemoryProviderStatusCard = computed(() =>
+  showBuiltinIndexedMemoryStatus.value || !!selectedMem0MemoryProvider.value,
+)
+
+const indexedMemoryStatusTitle = computed(() =>
+  selectedMemoryProviderType.value === 'mem0'
+    ? t('bots.settings.mem0StatusTitle')
+    : selectedBuiltinMemoryMode.value === 'dense'
+    ? t('bots.settings.denseStatusTitle')
+    : t('bots.settings.sparseStatusTitle'),
+)
+
+const statusCardData = computed(() => props.memoryStatus)
+const showQdrantDetails = computed(() =>
+  selectedBuiltinMemoryMode.value === 'sparse' || selectedBuiltinMemoryMode.value === 'dense',
+)
+const showEncoderHealth = computed(() =>
+  selectedBuiltinMemoryMode.value === 'sparse' || selectedBuiltinMemoryMode.value === 'dense',
+)
+const showQdrantHealth = computed(() =>
+  selectedBuiltinMemoryMode.value === 'sparse' || selectedBuiltinMemoryMode.value === 'dense',
+)
+const encoderHealthLabel = computed(() =>
+  selectedBuiltinMemoryMode.value === 'dense'
+    ? t('bots.settings.memoryDenseEmbeddingHealth')
+    : t('bots.settings.memoryEncoderHealth'),
+)
+
+function healthTextClass(ok: boolean | undefined) {
+  return ok ? 'text-foreground' : 'text-destructive'
+}
+
+function healthLabel(ok: boolean | undefined, error?: string) {
+  if (ok) return t('bots.settings.memoryHealthOk')
+  if (error) return error
+  return t('bots.settings.memoryHealthUnavailable')
+}
+</script>
diff --git a/apps/web/src/pages/bots/components/settings-danger-zone.vue b/apps/web/src/pages/bots/components/settings-danger-zone.vue
new file mode 100644
index 000000000..9983b6fa2
--- /dev/null
+++ b/apps/web/src/pages/bots/components/settings-danger-zone.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+    <!-- Danger Zone: High-visibility title without background highlight -->
+    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+      <div class="space-y-0.5">
+        <h4 class="text-xs font-medium text-destructive">
+          {{ $t('bots.settings.dangerZone') }}
+        </h4>
+        <p class="text-[11px] text-muted-foreground">
+          {{ $t('bots.settings.deleteBotDescription') }}
+        </p>
+      </div>
+      
+      <div class="flex justify-end shrink-0">
+        <ConfirmPopover
+          :message="$t('bots.deleteConfirm')"
+          :loading="deleteLoading"
+          :confirm-text="$t('common.delete')"
+          @confirm="$emit('delete')"
+        >
+          <template #trigger>
+            <Button
+              variant="destructive"
+              size="sm"
+              :disabled="deleteLoading"
+              class="min-w-28 h-8 text-xs font-medium shadow-none"
+            >
+              <Spinner
+                v-if="deleteLoading"
+                class="mr-1.5 size-3"
+              />
+              {{ $t('bots.settings.deleteBot') }}
+            </Button>
+          </template>
+        </ConfirmPopover>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Button, Spinner } from '@memohai/ui'
+import ConfirmPopover from '@/components/confirm-popover/index.vue'
+
+defineProps<{
+  deleteLoading: boolean
+}>()
+
+defineEmits<{
+  'delete': []
+}>()
+</script>
diff --git a/apps/web/src/pages/bots/components/settings-global-card.vue b/apps/web/src/pages/bots/components/settings-global-card.vue
new file mode 100644
index 000000000..1e1bcb870
--- /dev/null
+++ b/apps/web/src/pages/bots/components/settings-global-card.vue
@@ -0,0 +1,114 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+    <!-- Header Section -->
+    <div class="space-y-0.5">
+      <h4 class="text-xs font-medium text-foreground">
+        {{ $t('bots.settings.blocks.global') }}
+      </h4>
+      <p class="text-[11px] text-muted-foreground">
+        {{ $t('bots.settings.blocks.globalDescription') }}
+      </p>
+    </div>
+
+    <!-- Configuration inputs with paragraph-like spacing -->
+    <div class="space-y-3 pt-1">
+      <div class="space-y-1.5">
+        <Label class="text-xs font-medium text-foreground">{{ $t('bots.settings.chatLanguage') }}</Label>
+        <SearchableSelectPopover
+          :model-value="form.language || 'auto'"
+          :options="languageOptions"
+          :placeholder="$t('bots.settings.chatLanguagePlaceholder')"
+          :search-placeholder="$t('common.search')"
+          :empty-text="$t('common.noData')"
+          :show-group-headers="false"
+          @update:model-value="(v) => form.language = (v === 'auto' ? '' : v)"
+        >
+          <template #trigger="{ open, displayLabel, selectedOption }">
+            <Button
+              variant="outline"
+              role="combobox"
+              :aria-expanded="open"
+              :aria-label="$t('bots.settings.chatLanguage')"
+              class="shadow-none border-border bg-transparent rounded-md text-xs h-8 w-full font-normal justify-between"
+            >
+              <span class="flex min-w-0 items-center gap-2 truncate">
+                <Sparkles 
+                  v-if="selectedOption?.value === 'auto' || !selectedOption" 
+                  class="size-3.5 shrink-0 text-primary" 
+                />
+                <span
+                  class="truncate"
+                  :title="displayLabel || $t('bots.settings.chatLanguagePlaceholder')"
+                >{{ displayLabel || $t('bots.settings.chatLanguagePlaceholder') }}</span>
+              </span>
+              <Search
+                class="ml-2 size-3.5 shrink-0 text-muted-foreground"
+              />
+            </Button>
+          </template>
+          <template #option-icon="{ option }">
+            <Sparkles 
+              v-if="option.value === 'auto'" 
+              class="size-3.5 shrink-0 text-primary" 
+            />
+          </template>
+          <template #option-label="{ option }">
+            <span
+              class="truncate flex-1 text-left text-xs"
+              :class="{ 'text-muted-foreground': option.value === 'auto' }"
+              :title="option.label"
+            >
+              {{ option.label }}
+            </span>
+          </template>
+        </SearchableSelectPopover>
+      </div>
+
+      <div class="space-y-1.5">
+        <Label class="text-xs font-medium text-foreground">{{ $t('bots.timezone') }}</Label>
+        <TimezoneSelect
+          :model-value="form.timezone || emptyTimezoneValue"
+          :placeholder="$t('bots.timezonePlaceholder')"
+          allow-empty
+          :empty-label="$t('bots.timezoneInherited')"
+          class="text-xs h-8"
+          @update:model-value="(val: string) => form.timezone = val === emptyTimezoneValue ? '' : val"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Label, Button } from '@memohai/ui'
+import { Search, Sparkles } from 'lucide-vue-next'
+import TimezoneSelect from '@/components/timezone-select/index.vue'
+import { emptyTimezoneValue } from '@/utils/timezones'
+import SearchableSelectPopover from '@/components/searchable-select-popover/index.vue'
+import type { SearchableSelectOption } from '@/components/searchable-select-popover/index.vue'
+import { ISO639_LANGUAGES } from '@/utils/languages'
+import type { SettingsSettings } from '@memohai/sdk'
+
+const { t } = useI18n()
+
+defineProps<{
+  form: SettingsSettings
+}>()
+
+const languageOptions = computed<SearchableSelectOption[]>(() => {
+  const autoOption: SearchableSelectOption = {
+    value: 'auto',
+    label: t('languages.auto') || t('bots.settings.chatLanguagePlaceholder'),
+    keywords: ['auto', t('languages.auto'), t('bots.settings.chatLanguagePlaceholder')],
+  }
+  const codeOptions: SearchableSelectOption[] = ISO639_LANGUAGES.map((lang) => ({
+    value: lang.code,
+    label: `${lang.code} (${lang.name} / ${lang.nativeName})`,
+    keywords: [lang.code, lang.name, lang.nativeName],
+  }))
+  return [autoOption, ...codeOptions]
+})
+</script>
diff --git a/apps/web/src/pages/bots/components/settings-interaction-card.vue b/apps/web/src/pages/bots/components/settings-interaction-card.vue
new file mode 100644
index 000000000..9ec519077
--- /dev/null
+++ b/apps/web/src/pages/bots/components/settings-interaction-card.vue
@@ -0,0 +1,149 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+    <!-- Header Section -->
+    <div class="space-y-0.5">
+      <h4 class="text-xs font-medium text-foreground">
+        {{ $t('bots.settings.blocks.interaction') }}
+      </h4>
+      <p class="text-[11px] text-muted-foreground">
+        {{ $t('bots.settings.blocks.interactionDescription') }}
+      </p>
+    </div>
+    
+    <!-- Model selection inputs with compact spacing -->
+    <div class="space-y-3 pt-1">
+      <div class="space-y-1.5">
+        <Label class="text-xs font-medium text-foreground">{{ $t('bots.settings.chatModel') }}</Label>
+        <ModelSelect
+          v-model="form.chat_model_id"
+          :models="models"
+          :providers="providers"
+          model-type="chat"
+          :placeholder="$t('bots.settings.chatModel')"
+        />
+      </div>
+
+      <div class="space-y-1.5">
+        <div class="space-y-0.5">
+          <Label class="text-xs font-medium text-foreground">{{ $t('bots.settings.titleModel') }}</Label>
+          <p class="text-[10px] text-muted-foreground">
+            {{ $t('bots.settings.titleModelDescription') }}
+          </p>
+        </div>
+        <ModelSelect
+          v-model="form.title_model_id"
+          :models="models"
+          :providers="providers"
+          model-type="chat"
+          :placeholder="$t('bots.settings.titleModelPlaceholder')"
+        />
+      </div>
+    </div>
+
+    <Separator class="bg-border my-4" />
+
+    <div class="space-y-3">
+      <div class="space-y-1.5">
+        <Label class="text-xs font-medium text-foreground">{{ $t('bots.settings.reasoningEffort') }}</Label>
+        <Popover v-model:open="reasoningPopoverOpen">
+          <PopoverTrigger as-child>
+            <Button
+              variant="outline"
+              role="combobox"
+              :disabled="!chatModelSupportsReasoning"
+              class="w-full justify-between font-normal shadow-none h-8 bg-transparent text-xs"
+            >
+              <span class="flex items-center gap-2">
+                <Lightbulb
+                  class="size-3"
+                  :style="{ opacity: EFFORT_OPACITY[reasoningFormValue] ?? 0.5 }"
+                />
+                {{ reasoningFormValue === 'off' ? $t('chat.reasoningOff') : $t(EFFORT_LABELS[reasoningFormValue] ?? reasoningFormValue) }}
+              </span>
+              <ChevronDown class="size-3.5 shrink-0 text-muted-foreground" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            class="w-[--reka-popover-trigger-width] p-0 shadow-md rounded-md"
+            align="start"
+          >
+            <ReasoningEffortSelect
+              v-model="reasoningFormValue"
+              :efforts="availableReasoningEfforts"
+              @update:model-value="reasoningPopoverOpen = false"
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      <div class="flex items-center justify-between gap-4 rounded-md border border-border p-3 shadow-none bg-background">
+        <div class="space-y-0.5">
+          <Label class="text-xs font-medium text-foreground">{{ $t('bots.settings.showToolCallsInIM') }}</Label>
+          <p class="text-[10px] text-muted-foreground">
+            {{ $t('bots.settings.showToolCallsInIMDescription') }}
+          </p>
+        </div>
+        <Switch
+          :model-value="form.show_tool_calls_in_im"
+          class="shadow-none scale-[0.8] origin-right"
+          @update:model-value="(val) => form.show_tool_calls_in_im = !!val"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { Label, Separator, Popover, PopoverTrigger, PopoverContent, Button, Switch } from '@memohai/ui'
+import { Lightbulb, ChevronDown } from 'lucide-vue-next'
+import ModelSelect from './model-select.vue'
+import ReasoningEffortSelect from './reasoning-effort-select.vue'
+import { EFFORT_LABELS, EFFORT_OPACITY } from './reasoning-effort'
+import type { SettingsSettings, ModelsGetResponse, ProvidersGetResponse } from '@memohai/sdk'
+
+const props = defineProps<{
+  form: SettingsSettings
+  models: ModelsGetResponse[]
+  providers: ProvidersGetResponse[]
+}>()
+
+const chatModelSupportsReasoning = computed(() => {
+  if (!props.form.chat_model_id) return false
+  const m = props.models.find((m) => m.id === props.form.chat_model_id)
+  return !!m?.config?.compatibilities?.includes('reasoning')
+})
+
+const availableReasoningEfforts = computed(() => {
+  if (!props.form.chat_model_id) return ['low', 'medium', 'high']
+  const model = props.models.find((m) => m.id === props.form.chat_model_id)
+  const efforts = ((model?.config as { reasoning_efforts?: string[] } | undefined)?.reasoning_efforts ?? [])
+    .filter((effort) => ['none', 'low', 'medium', 'high', 'xhigh'].includes(effort))
+  return efforts.length > 0 ? efforts : ['low', 'medium', 'high']
+})
+
+watch(availableReasoningEfforts, (efforts) => {
+  if (!efforts.includes(props.form.reasoning_effort)) {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.form.reasoning_effort = efforts.includes('medium') ? 'medium' : efforts[0] ?? 'medium'
+  }
+}, { immediate: true })
+
+const reasoningPopoverOpen = ref(false)
+
+const reasoningFormValue = computed({
+  get: () => props.form.reasoning_enabled ? props.form.reasoning_effort : 'off',
+  set: (v: string) => {
+    if (v === 'off') {
+      // eslint-disable-next-line vue/no-mutating-props
+      props.form.reasoning_enabled = false
+    } else {
+      // eslint-disable-next-line vue/no-mutating-props
+      props.form.reasoning_enabled = true
+      // eslint-disable-next-line vue/no-mutating-props
+      props.form.reasoning_effort = v
+    }
+  },
+})
+</script>
diff --git a/apps/web/src/pages/bots/components/settings-multimedia-card.vue b/apps/web/src/pages/bots/components/settings-multimedia-card.vue
new file mode 100644
index 000000000..ec8673e55
--- /dev/null
+++ b/apps/web/src/pages/bots/components/settings-multimedia-card.vue
@@ -0,0 +1,78 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <div class="space-y-4 rounded-md border border-border bg-background p-4 shadow-none">
+    <!-- Header Section -->
+    <div class="space-y-0.5">
+      <h4 class="text-xs font-medium text-foreground">
+        {{ $t('bots.settings.blocks.multimedia') }}
+      </h4>
+      <p class="text-[11px] text-muted-foreground">
+        {{ $t('bots.settings.blocks.multimediaDescription') }}
+      </p>
+    </div>
+    
+    <!-- Configuration inputs with compact spacing -->
+    <div class="space-y-3 pt-1">
+      <div class="space-y-1.5">
+        <Label class="text-xs font-medium text-foreground">{{ $t('bots.settings.ttsModel') }}</Label>
+        <TtsModelSelect
+          v-model="form.tts_model_id"
+          :models="ttsModels"
+          :providers="ttsProviders"
+          :placeholder="$t('bots.settings.ttsModelPlaceholder')"
+          show-icons
+        />
+      </div>
+
+      <div class="space-y-1.5">
+        <Label class="text-xs font-medium text-foreground">{{ $t('bots.settings.transcriptionModel') }}</Label>
+        <TtsModelSelect
+          v-model="form.transcription_model_id"
+          :models="transcriptionModels"
+          :providers="ttsProviders"
+          :placeholder="$t('bots.settings.transcriptionModelPlaceholder')"
+          show-icons
+        />
+      </div>
+
+      <div class="space-y-1.5">
+        <div class="space-y-0.5">
+          <Label class="text-xs font-medium text-foreground">{{ $t('bots.settings.imageModel') }}</Label>
+          <p class="text-[10px] text-muted-foreground">
+            {{ $t('bots.settings.imageModelDescription') }}
+          </p>
+        </div>
+        <ModelSelect
+          v-model="form.image_model_id"
+          :models="imageCapableModels"
+          :providers="providers"
+          model-type="chat"
+          :placeholder="$t('bots.settings.imageModelPlaceholder')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Label } from '@memohai/ui'
+import ModelSelect from './model-select.vue'
+import TtsModelSelect from './tts-model-select.vue'
+import type { 
+  SettingsSettings, 
+  AudioSpeechModelResponse, 
+  AudioSpeechProviderResponse, 
+  AudioTranscriptionModelResponse,
+  ModelsGetResponse,
+  ProvidersGetResponse
+} from '@memohai/sdk'
+
+defineProps<{
+  form: SettingsSettings
+  ttsModels: AudioSpeechModelResponse[]
+  ttsProviders: AudioSpeechProviderResponse[]
+  transcriptionModels: AudioTranscriptionModelResponse[]
+  imageCapableModels: ModelsGetResponse[]
+  providers: ProvidersGetResponse[]
+}>()
+</script>
diff --git a/apps/web/src/pages/bots/components/tts-model-select.vue b/apps/web/src/pages/bots/components/tts-model-select.vue
index 8dcd2011b..75428e2ea 100644
--- a/apps/web/src/pages/bots/components/tts-model-select.vue
+++ b/apps/web/src/pages/bots/components/tts-model-select.vue
@@ -14,7 +14,7 @@
         role="combobox"
         :aria-expanded="open"
         :aria-label="placeholder || 'Select TTS model'"
-        class="w-full justify-between font-normal"
+        class="w-full justify-between font-normal text-xs shadow-none h-9"
       >
         <span class="flex min-w-0 items-center gap-2 truncate">
           <Volume2
@@ -34,7 +34,7 @@
 
     <template #option-icon="{ option }">
       <Volume2
-        v-if="option.value"
+        v-if="option.value && showIcons"
         class="size-3.5 shrink-0 text-muted-foreground"
       />
     </template>
@@ -77,6 +77,7 @@ const props = defineProps<{
   models: TtsModelOption[]
   providers: TtsProviderOption[]
   placeholder?: string
+  showIcons?: boolean
 }>()
 const { t } = useI18n()
 
diff --git a/apps/web/src/pages/bots/detail.vue b/apps/web/src/pages/bots/detail.vue
index efe2fe01e..5e0f94a65 100644
--- a/apps/web/src/pages/bots/detail.vue
+++ b/apps/web/src/pages/bots/detail.vue
@@ -1,133 +1,209 @@
 <template>
-  <section class=" mx-auto absolute inset-0  flex flex-col">
-    <!-- Header -->
-    <div class="flex p-4 items-center gap-4">
-      <div class="group/avatar relative size-16 shrink-0 rounded-full overflow-hidden">
-        <Avatar class="size-16 rounded-full">
-          <AvatarImage
-            v-if="bot?.avatar_url"
-            :src="bot.avatar_url"
-            :alt="bot.display_name"
-          />
-          <AvatarFallback class="text-xl">
-            {{ avatarFallback }}
-          </AvatarFallback>
-        </Avatar>
-        <button
-          type="button"
-          class="absolute inset-0 flex items-center justify-center rounded-full bg-black/40 opacity-0 transition-opacity group-hover/avatar:opacity-100"
-          :title="$t('common.edit')"
-          :aria-label="$t('common.edit')"
-          :disabled="!bot || botLifecyclePending"
-          @click="handleEditAvatar"
-        >
-          <SquarePen
-            class="size-6 text-white"
-          />
-        </button>
-      </div>
-      <div class="min-w-0">
-        <div class="flex items-center gap-2">
-          <template v-if="isEditingBotName && bot">
-            <Input
-              v-model="botNameDraft"
-              class="h-9 max-w-xl"
-              :placeholder="$t('bots.displayNamePlaceholder')"
-              :disabled="isSavingBotName"
-              @keydown.enter.prevent="handleConfirmBotName"
-              @keydown.esc.prevent="handleCancelBotName"
-            />
-            <LoadingButton
-              size="sm"
-              :loading="isSavingBotName"
-              :disabled="!canConfirmBotName"
-              @click="handleConfirmBotName"
-            >
-              {{ $t('common.confirm') }}
-            </LoadingButton>
-            <Button
-              variant="ghost"
-              size="sm"
-              :disabled="isSavingBotName"
-              @click="handleCancelBotName"
-            >
-              {{ $t('common.cancel') }}
-            </Button>
-          </template>
-          <template v-else>
-            <h2 class="truncate text-sm font-medium">
-              {{ botNameDraft.trim() || bot?.display_name || botId }}
-            </h2>
-            <Button
-              v-if="bot"
-              type="button"
-              variant="ghost"
-              size="sm"
-              class="size-7 p-0"
-              :disabled="botLifecyclePending"
-              :title="$t('common.edit')"
-              :aria-label="$t('common.edit')"
-              @click="handleStartEditBotName"
-            >
-              <SquarePen
-                class="size-3.5"
-              />
-            </Button>
-          </template>
-        </div>
-        <div class="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
-          <Badge
-            v-if="bot"
-            :variant="statusVariant"
-            class="text-xs"
-            :title="hasIssue ? issueTitle : undefined"
-          >
-            <LoaderCircle
-              v-if="bot.status === 'creating' || bot.status === 'deleting'"
-              class="mr-1 size-3 animate-spin"
-            />
-            {{ statusLabel }}
-          </Badge>
-          <span v-if="bot?.type">{{ botTypeLabel }}</span>
-        </div>
-      </div>
-    </div>
-    <Separator />
+  <section class="mx-auto absolute inset-0 flex flex-col bg-background">
     <div class="flex-1 relative">
       <MasterDetailSidebarLayout
         class="[&_td:last-child]:w-45"
       >
+        <template #sidebar-header>
+          <!-- Bot Identity Header -->
+          <div class="p-4 pb-3 flex flex-col">
+            <div class="flex items-center gap-3">
+              <!-- Avatar -->
+              <div class="group/avatar relative size-12 shrink-0 rounded-full overflow-hidden bg-muted">
+                <Avatar class="size-12 rounded-full">
+                  <AvatarImage
+                    v-if="bot?.avatar_url"
+                    :src="bot.avatar_url"
+                    :alt="bot.display_name"
+                  />
+                  <AvatarFallback class="text-lg">
+                    {{ avatarFallback }}
+                  </AvatarFallback>
+                </Avatar>
+                <!-- Edit Overlay -->
+                <button
+                  type="button"
+                  class="absolute inset-0 flex items-center justify-center rounded-full bg-black/40 opacity-0 transition-opacity group-hover/avatar:opacity-100"
+                  :title="$t('common.edit')"
+                  :aria-label="$t('common.edit')"
+                  :disabled="!bot || botLifecyclePending"
+                  @click="handleEditAvatar"
+                >
+                  <SquarePen class="size-4 text-white" />
+                </button>
+              </div>
+              
+              <!-- Info Block -->
+              <div class="min-w-0 flex-1 flex flex-col justify-center">
+                <div class="group/name flex items-center gap-1 relative min-w-0">
+                  <template v-if="isEditingBotName && bot">
+                    <Input
+                      ref="editNameInputRef"
+                      v-model="botNameDraft"
+                      class="h-7 w-full text-xs px-2 pr-6 shadow-none"
+                      :placeholder="$t('bots.displayNamePlaceholder')"
+                      :disabled="isSavingBotName"
+                      @keydown.enter.prevent="handleConfirmBotName"
+                      @keydown.esc.prevent="handleCancelBotName"
+                      @blur="handleConfirmBotName"
+                    />
+                    <div class="absolute right-1.5 top-1/2 -translate-y-1/2 opacity-50 pointer-events-none">
+                      <Check class="size-3" />
+                    </div>
+                  </template>
+                  <template v-else>
+                    <h2 class="truncate text-sm font-semibold text-foreground">
+                      {{ botNameDraft.trim() || bot?.display_name || botId }}
+                    </h2>
+                    <button
+                      v-if="bot"
+                      type="button"
+                      class="opacity-0 group-hover/name:opacity-100 p-1 shrink-0"
+                      :disabled="botLifecyclePending"
+                      @click="handleStartEditBotName"
+                    >
+                      <SquarePen class="size-3 text-muted-foreground" />
+                    </button>
+                  </template>
+                </div>
+                
+                <!-- Status Badge (Flat Industrial Style) -->
+                <div class="mt-0.5">
+                  <div
+                    v-if="bot"
+                    class="inline-flex items-center h-5 bg-[#27272a] rounded-full px-2 gap-1.5"
+                    :title="hasIssue ? issueTitle : undefined"
+                  >
+                    <LoaderCircle
+                      v-if="bot.status === 'creating' || bot.status === 'deleting'"
+                      class="size-2.5 animate-spin text-[#d0d0d4]"
+                    />
+                    <div
+                      v-else
+                      class="size-1.5 rounded-full"
+                      :class="statusVariant === 'destructive' ? 'bg-destructive' : 'bg-success'"
+                    />
+                    <span class="text-[10px] font-medium text-[#d0d0d4]">{{ statusLabel }}</span>
+                  </div>
+                  <span
+                    v-if="bot?.type"
+                    class="text-[10px] text-muted-foreground ml-1.5"
+                  >{{ botTypeLabel }}</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Search Input -->
+            <div class="mt-4 relative">
+              <Search class="absolute left-2.5 top-1/2 -translate-y-1/2 size-3 text-muted-foreground" />
+              <Input
+                v-model="searchQuery"
+                type="text"
+                class="pl-8 h-8 text-xs bg-transparent shadow-none focus-visible:ring-0"
+                :placeholder="$t('common.search')"
+              />
+              <button
+                v-if="searchQuery"
+                type="button"
+                class="absolute right-2 top-1/2 -translate-y-1/2 size-4 flex items-center justify-center rounded-full hover:bg-muted text-muted-foreground shrink-0"
+                @click="searchQuery = ''"
+              >
+                <X class="size-2.5" />
+              </button>
+            </div>
+          </div>
+        </template>
+
         <template #sidebar-content>
-          <SidebarMenu
-            v-for="tab in tabList"
-            :key="tab.value"
+          <!-- Search Results View -->
+          <div
+            v-if="searchQuery"
+            class="flex flex-col gap-1"
           >
-            <SidebarMenuItem>
-              <SidebarMenuButton
-                as-child
-                class="justify-start py-5! px-4"
+            <div
+              v-if="searchResults.length === 0"
+              class="px-3 py-4 text-xs text-muted-foreground text-center"
+            >
+              {{ $t('common.noData') }}
+            </div>
+            <SidebarMenu
+              v-else
+              class="m-0 p-0 gap-1"
+            >
+              <SidebarMenuItem
+                v-for="(result, idx) in searchResults"
+                :key="idx"
               >
-                <Toggle
-                  :class="`py-4 border border-transparent ${activeTab === tab.value ? 'border-inherit' : ''}`"
-                  :model-value="isActive(tab.value as string).value"
-                  @update:model-value="(isSelect: boolean) => {
-                    if (isSelect) {
-                      activeTab = tab.value
-                    }
-                  }"
+                <SidebarMenuButton
+                  as-child
+                  class="justify-start py-0! px-0 h-11 before:hidden"
                 >
-                  {{ $t(tab.label) }}
-                </Toggle>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
+                  <button
+                    class="w-full flex flex-col items-start justify-center py-2 px-3 text-left border border-transparent transition-colors hover:bg-accent hover:text-accent-foreground rounded-md group/result"
+                    @click="() => { activeTab = result.tab; searchQuery = '' }"
+                  >
+                    <span class="text-xs font-medium text-foreground group-hover/result:text-accent-foreground">{{ result.translatedTitle }}</span>
+                    <span class="text-[10px] text-muted-foreground mt-1 flex items-center gap-1 group-hover/result:text-accent-foreground/70">
+                      <component
+                        :is="tabList.find(t => t.value === result.tab)?.icon"
+                        class="size-3 opacity-70"
+                      />
+                      {{ $t(`bots.tabs.${result.tab}`) }}
+                    </span>
+                  </button>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </div>
+
+          <!-- Normal Grouped View -->
+          <template v-else>
+            <div
+              v-for="(group, idx) in groupedTabs"
+              :key="group.key"
+              :class="idx > 0 ? 'mt-4' : ''"
+              class="flex flex-col gap-0.5"
+            >
+              <SidebarMenu
+                v-for="tab in group.items"
+                :key="tab.value"
+                class="m-0 p-0"
+              >
+                <SidebarMenuItem>
+                  <SidebarMenuButton
+                    as-child
+                    :is-active="activeTab === tab.value"
+                    class="justify-start py-0! px-0 h-10 before:hidden"
+                  >
+                    <Toggle
+                      class="w-full justify-start h-10 px-3 text-xs font-medium border-0 bg-transparent! transition-colors gap-3"
+                      :model-value="isActive(tab.value).value"
+                      @update:model-value="(isSelect: boolean) => {
+                        if (isSelect) {
+                          activeTab = tab.value
+                        }
+                      }"
+                    >
+                      <component
+                        :is="tab.icon"
+                        v-if="tab.icon"
+                        class="size-4 shrink-0"
+                      />
+                      <span class="truncate">{{ $t(tab.label) }}</span>
+                    </Toggle>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </div>
+          </template>
         </template>
 
         <template #sidebar-footer />
 
         <template #detail>
-          <div class="absolute inset-0 overflow-y-auto">
-            <div class="p-4">
+          <div class="absolute inset-0 overflow-y-auto bg-background">
+            <!-- Ensure consistent padding matching Box-in-Box bento architecture -->
+            <div class="px-6 pt-4 pb-12 max-w-4xl mx-auto">
               <KeepAlive>
                 <component
                   :is="activeComponent?.component"
@@ -150,20 +226,15 @@
 
 <script setup lang="ts">
 import {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  Badge,
-  Button,
-  Input,
-  Separator,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  Toggle
+  Avatar, AvatarImage, AvatarFallback, Input,
+  SidebarMenu, SidebarMenuButton, SidebarMenuItem, Toggle
 } from '@memohai/ui'
-import { SquarePen, LoaderCircle } from 'lucide-vue-next'
-import { computed, ref, watch, onMounted, toValue } from 'vue'
+import {
+  SquarePen, LoaderCircle, Check, Search, X, LayoutDashboard, Settings, MessageSquare,
+  BrainCircuit, ShieldAlert, HeartPulse, Database, Mail, Link, Clock, Server, FileBox, Zap,
+  Monitor, Globe
+} from 'lucide-vue-next'
+import { computed, ref, watch, onMounted, toValue, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 import { toast } from 'vue-sonner'
 import { useI18n } from 'vue-i18n'
@@ -180,7 +251,7 @@ import type {
   HandlersListSnapshotsResponse,
 } from '@memohai/sdk'
 import { useCapabilitiesStore } from '@/store/capabilities'
-import LoadingButton from '@/components/loading-button/index.vue'
+
 import BotSettings from './components/bot-settings.vue'
 import BotToolApproval from './components/bot-tool-approval.vue'
 import BotDesktop from './components/bot-desktop.vue'
@@ -209,7 +280,10 @@ type BotContainerSnapshot = HandlersListSnapshotsResponse extends { snapshots?:
 
 const route = useRoute()
 const { t } = useI18n()
-const botId = computed(() => route.params.botId as string)
+const botId = computed(() => {
+  const id = route.params.botId
+  return typeof id === 'string' ? id : ''
+})
 
 const { data: bot } = useQuery({
   key: () => ['bot', botId.value],
@@ -229,23 +303,21 @@ const isLocalWorkspace = computed(() =>
 const tabList = computed(() => {
   const bot_id = toValue(botId)
   const tabs = [
-    {
-      value: 'overview', label: 'bots.tabs.overview', component: BotOverview, params: {}
-    },
-    { value: 'general', label: 'bots.tabs.general', component: BotSettings, params: { 'bot-id': bot_id, 'bot-type': bot.value?.type } },
-    { value: 'desktop', label: 'bots.tabs.desktop', component: BotDesktop, params: { 'bot-id': bot_id } },
-    { value: 'container', label: 'bots.tabs.container', component: BotContainer, params: {} },
-    { value: 'network', label: 'bots.tabs.network', component: BotNetwork, params: { 'bot-id': bot_id } },
-    { value: 'memory', label: 'bots.tabs.memory', component: BotMemory, params: { 'bot-id': bot_id } },
-    { value: 'channels', label: 'bots.tabs.channels', component: BotChannels, params: { 'bot-id': bot_id } },
-    { value: 'access', label: 'bots.tabs.access', component: BotAccess, params: { 'bot-id': bot_id, 'bot-type': bot.value?.type } },
-    { value: 'tool-approval', label: 'bots.tabs.toolApproval', component: BotToolApproval, params: { 'bot-id': bot_id } },
-    { value: 'email', label: 'bots.tabs.email', component: BotEmail, params: { 'bot-id': bot_id } },
-    { value: 'mcp', label: 'bots.tabs.mcp', component: BotMcp, params: { 'bot-id': bot_id } },
-    { value: 'heartbeat', label: 'bots.tabs.heartbeat', component: BotHeartbeat, params: { 'bot-id': bot_id } },
-    { value: 'compaction', label: 'bots.tabs.compaction', component: BotCompaction, params: { 'bot-id': bot_id } },
-    { value: 'schedule', label: 'bots.tabs.schedule', component: BotSchedule, params: { 'bot-id': bot_id } },
-    { value: 'skills', label: 'bots.tabs.skills', component: BotSkills, params: { 'bot-id': bot_id } },
+    { value: 'overview', label: 'bots.tabs.overview', icon: LayoutDashboard, component: BotOverview, params: {} },
+    { value: 'general', label: 'bots.tabs.general', icon: Settings, component: BotSettings, params: { 'bot-id': bot_id, 'bot-type': bot.value?.type } },
+    { value: 'desktop', label: 'bots.tabs.desktop', icon: Monitor, component: BotDesktop, params: { 'bot-id': bot_id } },
+    { value: 'container', label: 'bots.tabs.container', icon: Server, component: BotContainer, params: {} },
+    { value: 'network', label: 'bots.tabs.network', icon: Globe, component: BotNetwork, params: { 'bot-id': bot_id } },
+    { value: 'memory', label: 'bots.tabs.memory', icon: Database, component: BotMemory, params: { 'bot-id': bot_id } },
+    { value: 'channels', label: 'bots.tabs.channels', icon: MessageSquare, component: BotChannels, params: { 'bot-id': bot_id } },
+    { value: 'access', label: 'bots.tabs.access', icon: ShieldAlert, component: BotAccess, params: { 'bot-id': bot_id, 'bot-type': bot.value?.type } },
+    { value: 'tool-approval', label: 'bots.tabs.toolApproval', icon: Zap, component: BotToolApproval, params: { 'bot-id': bot_id } },
+    { value: 'email', label: 'bots.tabs.email', icon: Mail, component: BotEmail, params: { 'bot-id': bot_id } },
+    { value: 'mcp', label: 'bots.tabs.mcp', icon: Link, component: BotMcp, params: { 'bot-id': bot_id } },
+    { value: 'heartbeat', label: 'bots.tabs.heartbeat', icon: HeartPulse, component: BotHeartbeat, params: { 'bot-id': bot_id } },
+    { value: 'compaction', label: 'bots.tabs.compaction', icon: FileBox, component: BotCompaction, params: { 'bot-id': bot_id } },
+    { value: 'schedule', label: 'bots.tabs.schedule', icon: Clock, component: BotSchedule, params: { 'bot-id': bot_id } },
+    { value: 'skills', label: 'bots.tabs.skills', icon: BrainCircuit, component: BotSkills, params: { 'bot-id': bot_id } },
   ]
   if (isLocalWorkspace.value) {
     return tabs.filter(tab => tab.value !== 'container' && tab.value !== 'network' && tab.value !== 'desktop')
@@ -253,6 +325,58 @@ const tabList = computed(() => {
   return tabs
 })
 
+const searchQuery = ref('')
+
+const searchIndex = computed(() => {
+  return [
+    { tab: 'general', key: 'bots.settings.blocks.global', keywords: ['name', 'avatar', 'description', 'timezone'] },
+    { tab: 'general', key: 'bots.settings.blocks.interaction', keywords: ['language', 'chat model', 'reasoning'] },
+    { tab: 'general', key: 'bots.settings.blocks.context', keywords: ['browser', 'search', 'provider'] },
+    { tab: 'general', key: 'bots.settings.blocks.multimedia', keywords: ['image', 'tts', 'transcription'] },
+    { tab: 'general', key: 'bots.settings.dangerZone', keywords: ['delete', 'remove'] },
+    { tab: 'container', key: 'bots.container.dataTitle', keywords: ['docker', 'image', 'gpu', 'volume'] },
+    { tab: 'container', key: 'bots.container.metricsTitle', keywords: ['cpu', 'ram', 'storage'] },
+    { tab: 'memory', key: 'bots.memory.title', keywords: ['vector', 'database', 'qdrant', 'embed'] },
+    { tab: 'channels', key: 'bots.channels.configured', keywords: ['telegram', 'discord', 'wechat', 'slack'] },
+    { tab: 'access', key: 'bots.access.title', keywords: ['permissions', 'acl', 'rules', 'allow', 'deny'] },
+    { tab: 'tool-approval', key: 'bots.toolApproval.title', keywords: ['mcp', 'tools', 'review', 'bypass', 'approval'] },
+    { tab: 'email', key: 'bots.email.title', keywords: ['smtp', 'imap', 'mailbox', 'bindings'] },
+    { tab: 'mcp', key: 'bots.tabs.mcp', keywords: ['servers', 'connect', 'plugins'] },
+    { tab: 'heartbeat', key: 'bots.heartbeat.title', keywords: ['cron', 'ping', 'alive'] },
+    { tab: 'compaction', key: 'bots.compaction.title', keywords: ['compress', 'summarize', 'context window'] },
+    { tab: 'schedule', key: 'bots.schedule.title', keywords: ['cron', 'jobs', 'tasks', 'automation'] },
+    { tab: 'skills', key: 'bots.skills.title', keywords: ['prompts', 'instructions', 'system prompt'] },
+  ].map(item => ({
+    ...item,
+    translatedTitle: t(item.key)
+  }))
+})
+
+const searchResults = computed(() => {
+  const query = searchQuery.value.toLowerCase().trim()
+  if (!query) return []
+  
+  return searchIndex.value.filter(item => {
+    return item.translatedTitle.toLowerCase().includes(query) || 
+           item.keywords.some(k => k.toLowerCase().includes(query)) ||
+           t(`bots.tabs.${item.tab}`).toLowerCase().includes(query) ||
+           item.tab.toLowerCase().includes(query)
+  })
+})
+
+const groupedTabs = computed(() => {
+  const coreKeys = ['overview', 'general', 'channels']
+  const capabilityKeys = ['skills', 'tool-approval', 'mcp', 'memory']
+  const runtimeKeys = ['desktop', 'container', 'network', 'schedule', 'compaction', 'heartbeat']
+  const securityKeys = ['access', 'email']
+
+  return [
+    { key: 'core', items: tabList.value.filter(t => coreKeys.includes(t.value)) },
+    { key: 'capabilities', items: tabList.value.filter(t => capabilityKeys.includes(t.value)) },
+    { key: 'runtime', items: tabList.value.filter(t => runtimeKeys.includes(t.value)) },
+    { key: 'security', items: tabList.value.filter(t => securityKeys.includes(t.value)) },
+  ].filter(g => g.items.length > 0)
+})
 
 const isActive = (name: string) => computed(() => {
   return activeTab.value === name
@@ -267,8 +391,6 @@ onMounted(() => {
   void capabilitiesStore.load()
 })
 
-
-
 const queryCache = useQueryCache()
 const { mutateAsync: updateBot, isLoading: updateBotLoading } = useMutation({
   mutation: async ({ id, ...body }: Record<string, unknown> & { id: string }) => {
@@ -288,6 +410,7 @@ async function fetchChecks(id: string): Promise<BotCheck[]> {
 
 const isEditingBotName = ref(false)
 const botNameDraft = ref('')
+const editNameInputRef = ref<InstanceType<typeof Input> | null>(null)
 
 // Replace breadcrumb bot id with display name when available.
 watch(bot, (val) => {
@@ -376,8 +499,6 @@ watch([activeTab, botId], ([tab]) => {
   }
 }, { immediate: true })
 
-
-
 function resolveErrorMessage(error: unknown, fallback: string): string {
   return resolveApiErrorMessage(error, fallback)
 }
@@ -391,6 +512,13 @@ function handleStartEditBotName() {
   if (!bot.value) return
   isEditingBotName.value = true
   botNameDraft.value = bot.value.display_name || ''
+  nextTick(() => {
+    const el = editNameInputRef.value?.$el
+    if (el) {
+      const input = el instanceof HTMLInputElement ? el : el.querySelector('input')
+      if (input) input.focus()
+    }
+  })
 }
 
 function handleCancelBotName() {
@@ -417,7 +545,6 @@ async function handleConfirmBotName() {
   }
 }
 
-
 async function loadChecks(showToast: boolean) {
   checksLoading.value = true
   checks.value = []
@@ -476,5 +603,4 @@ async function loadSnapshots() {
     snapshotsLoading.value = false
   }
 }
-
 </script>
diff --git a/apps/web/src/pages/bots/index.vue b/apps/web/src/pages/bots/index.vue
index ae6d8f4e0..c0b027f12 100644
--- a/apps/web/src/pages/bots/index.vue
+++ b/apps/web/src/pages/bots/index.vue
@@ -1,10 +1,7 @@
 <template>
-  <section class="p-4 mx-auto">
+  <section class="px-4 pt-2 pb-10 md:px-6 md:pt-4 md:pb-12 mx-auto">
     <!-- Header: search + create -->
-    <div class="flex items-center justify-between mb-6 flex-wrap">
-      <h2 class="text-xs font-medium max-md:hidden">
-        {{ $t('bots.title') }}
-      </h2>
+    <div class="flex items-center justify-end mb-6 flex-wrap">
       <div class="flex items-center gap-3">
         <div class="relative">
           <Search
diff --git a/apps/web/src/pages/bots/new.vue b/apps/web/src/pages/bots/new.vue
index 1c2032be8..a87331810 100644
--- a/apps/web/src/pages/bots/new.vue
+++ b/apps/web/src/pages/bots/new.vue
@@ -1,9 +1,5 @@
 <template>
-  <section class="p-4 mx-auto max-w-2xl">
-    <h2 class="text-lg font-semibold mb-6">
-      {{ $t('bots.createBot') }}
-    </h2>
-
+  <section class="px-4 pt-2 pb-10 md:px-6 md:pt-4 md:pb-12 mx-auto max-w-2xl">
     <form @submit.prevent="handleSubmit">
       <!-- Basic Info -->
       <div>
diff --git a/apps/web/src/pages/email/components/add-email-provider.vue b/apps/web/src/pages/email/components/add-email-provider.vue
index 9ed969b63..09d1dad77 100644
--- a/apps/web/src/pages/email/components/add-email-provider.vue
+++ b/apps/web/src/pages/email/components/add-email-provider.vue
@@ -11,11 +11,11 @@
     >
       <template #trigger>
         <Button
-          class="w-full shadow-none! text-muted-foreground mb-4"
+          class="w-full shadow-none! text-muted-foreground h-9 px-3 rounded-md border-border bg-background hover:bg-accent"
           variant="outline"
         >
           <Plus
-            class="mr-1"
+            class="mr-1 size-4"
           /> {{ $t('email.add') }}
         </Button>
       </template>
diff --git a/apps/web/src/pages/email/index.vue b/apps/web/src/pages/email/index.vue
index 1c2a46efe..8869ca87d 100644
--- a/apps/web/src/pages/email/index.vue
+++ b/apps/web/src/pages/email/index.vue
@@ -70,14 +70,16 @@ const openStatus = reactive({ addOpen: false })
         <SidebarMenuItem>
           <SidebarMenuButton
             as-child
-            class="justify-start py-5! px-4"
+            :is-active="curProvider?.id === item.id"
+            class="justify-start py-0! px-0 h-11 before:hidden"
           >
             <Toggle
-              :class="['py-4 border', curProvider?.id === item.id ? 'border-border' : 'border-transparent']"
+              class="w-full justify-start h-11 px-3 border-0 bg-transparent! transition-colors gap-3"
               :model-value="selectProvider(item.name ?? '').value"
               @update:model-value="(isSelect) => { if (isSelect) curProvider = item }"
             >
-              {{ item.name }}
+              <Mail class="size-4 shrink-0" />
+              <span class="truncate text-xs font-medium">{{ item.name }}</span>
             </Toggle>
           </SidebarMenuButton>
         </SidebarMenuItem>
diff --git a/apps/web/src/pages/main-section/index.vue b/apps/web/src/pages/main-section/index.vue
index 8355e414e..d0b1fd3c0 100644
--- a/apps/web/src/pages/main-section/index.vue
+++ b/apps/web/src/pages/main-section/index.vue
@@ -1,14 +1,12 @@
 <template>
-  <section>
-    <MainLayout>
-      <template #sidebar>
-        <SideBar />
-      </template>
-      <template #main>
-        <MainContainer />
-      </template>
-    </MainLayout>
-  </section>
+  <MainLayout>
+    <template #sidebar>
+      <SideBar />
+    </template>
+    <template #main>
+      <MainContainer />
+    </template>
+  </MainLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/web/src/pages/memory/components/add-memory-provider.vue b/apps/web/src/pages/memory/components/add-memory-provider.vue
index 1b4102b48..b9ba95c29 100644
--- a/apps/web/src/pages/memory/components/add-memory-provider.vue
+++ b/apps/web/src/pages/memory/components/add-memory-provider.vue
@@ -3,10 +3,10 @@
     <DialogTrigger as-child>
       <Button
         variant="outline"
-        class="w-full mb-4 text-muted-foreground"
+        class="w-full shadow-none! text-muted-foreground h-9 px-3 rounded-md border-border bg-background hover:bg-accent"
       >
         <Plus
-          class="mr-2"
+          class="mr-1 size-4"
         />
         {{ $t('memory.add') }}
       </Button>
diff --git a/apps/web/src/pages/memory/index.vue b/apps/web/src/pages/memory/index.vue
index 430f0e521..8aae8877f 100644
--- a/apps/web/src/pages/memory/index.vue
+++ b/apps/web/src/pages/memory/index.vue
@@ -63,17 +63,18 @@ const openStatus = reactive({ addOpen: false })
         <SidebarMenuItem>
           <SidebarMenuButton
             as-child
-            class="justify-start py-5! px-4"
+            :is-active="selectProvider(item.name).value"
+            class="justify-start py-0! px-0 h-11 before:hidden"
           >
             <Toggle
-              :class="`py-4 border border-transparent ${curProvider?.id === item.id ? 'border-inherit' : ''}`"
+              class="w-full justify-start h-11 px-3 border-0 bg-transparent! transition-colors gap-3"
               :model-value="selectProvider(item.name).value"
               @update:model-value="(isSelect) => { if (isSelect) curProvider = item }"
             >
               <Brain
-                class="mr-2 size-4 text-primary"
+                class="size-4 shrink-0"
               />
-              {{ item.name }}
+              <span class="truncate text-xs font-medium">{{ item.name }}</span>
             </Toggle>
           </SidebarMenuButton>
         </SidebarMenuItem>
diff --git a/apps/web/src/pages/profile/index.vue b/apps/web/src/pages/profile/index.vue
index 0ba721ae8..e95c8332b 100644
--- a/apps/web/src/pages/profile/index.vue
+++ b/apps/web/src/pages/profile/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="max-w-7xl mx-auto p-4 pb-12">
+  <section class="max-w-7xl mx-auto px-4 pt-2 pb-10 md:px-6 md:pt-4 md:pb-12">
     <div class="max-w-3xl mx-auto space-y-8">
       <!-- Avatar & name -->
       <div class="flex items-center gap-4">
diff --git a/apps/web/src/pages/providers/index.vue b/apps/web/src/pages/providers/index.vue
index 0fa6e3cb6..15dd79425 100644
--- a/apps/web/src/pages/providers/index.vue
+++ b/apps/web/src/pages/providers/index.vue
@@ -94,13 +94,11 @@ const openStatus = reactive({
         <SidebarMenuItem>
           <SidebarMenuButton
             as-child
-            class="justify-start py-5! px-4"
+            :is-active="selectProvider(providerItem.id ?? '').value"
+            class="justify-start py-0! px-0 h-11 before:hidden"
           >
             <Toggle
-              :class="[
-                'py-4 border',
-                curProvider?.id === providerItem.id ? 'border-border' : 'border-transparent',
-              ]"
+              class="w-full justify-start h-11 px-3 border-0 bg-transparent! transition-colors gap-3"
               :model-value="selectProvider(providerItem.id ?? '').value"
               @update:model-value="(isSelect) => {
                 if (isSelect) {
@@ -109,15 +107,15 @@ const openStatus = reactive({
               }"
             >
               <span class="relative shrink-0">
-                <span class="flex size-7 items-center justify-center rounded-full bg-muted">
+                <span class="flex size-6 items-center justify-center rounded-full bg-muted">
                   <ProviderIcon
                     v-if="providerItem.icon"
                     :icon="providerItem.icon"
-                    size="1.25em"
+                    size="1em"
                   />
                   <span
                     v-else
-                    class="text-xs font-medium text-muted-foreground"
+                    class="text-[10px] font-medium text-muted-foreground"
                   >
                     {{ getInitials(providerItem.name) }}
                   </span>
@@ -128,7 +126,7 @@ const openStatus = reactive({
                   variant="success"
                 />
               </span>
-              <span class="truncate">{{ providerItem.name }}</span>
+              <span class="truncate text-xs font-medium">{{ providerItem.name }}</span>
             </Toggle>
           </SidebarMenuButton>
         </SidebarMenuItem>
diff --git a/apps/web/src/pages/settings-section/index.vue b/apps/web/src/pages/settings-section/index.vue
index 577df9a58..bf4f3c574 100644
--- a/apps/web/src/pages/settings-section/index.vue
+++ b/apps/web/src/pages/settings-section/index.vue
@@ -1,26 +1,123 @@
 <template>
-  <section>
-    <MainLayout>
-      <template #sidebar>
-        <SettingsSidebar />
-      </template>
-      <template #main>
-        <SidebarInset class="flex flex-col overflow-hidden">
-          <section class="flex-1 overflow-y-auto">
-            <router-view v-slot="{ Component }">
-              <KeepAlive>
-                <component :is="Component" />
-              </KeepAlive>
-            </router-view>
-          </section>
-        </SidebarInset>
-      </template>
-    </MainLayout>
-  </section>
+  <MainLayout>
+    <template #sidebar>
+      <SettingsSidebar />
+    </template>
+    <template #main>
+      <SidebarInset class="flex flex-col overflow-hidden">
+        <!-- Universal Settings Breadcrumb per Figma 5:937 & 5:807 -->
+        <header
+          v-if="breadcrumbs.length > 0"
+          class="h-10 flex items-center px-6 shrink-0 border-b border-border/40"
+        >
+          <Breadcrumb class="w-full">
+            <BreadcrumbList class="gap-1.5 flex-nowrap">
+              <template
+                v-for="(item, index) in breadcrumbs"
+                :key="index"
+              >
+                <BreadcrumbItem
+                  v-if="!item.isLast"
+                  class="shrink-0"
+                >
+                  <BreadcrumbLink
+                    as-child
+                    class="text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    <router-link :to="item.to">
+                      <span class="text-[11px] font-medium leading-none">{{ item.label }}</span>
+                    </router-link>
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator
+                  v-if="!item.isLast"
+                  class="text-muted-foreground/50 shrink-0 select-none"
+                >
+                  <span class="text-[10px] font-normal">/</span>
+                </BreadcrumbSeparator>
+                <BreadcrumbItem
+                  v-else
+                  class="min-w-0 flex-1"
+                >
+                  <BreadcrumbPage class="text-foreground text-[11px] font-medium truncate leading-none">
+                    {{ item.label }}
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </template>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+
+        <section class="flex-1 relative min-h-0 overflow-y-auto">
+          <router-view v-slot="{ Component }">
+            <KeepAlive>
+              <component :is="Component" />
+            </KeepAlive>
+          </router-view>
+        </section>
+      </SidebarInset>
+    </template>
+  </MainLayout>
 </template>
 
 <script setup lang="ts">
-import { SidebarInset } from '@memohai/ui'
+import { computed, toValue } from 'vue'
+import { useRoute } from 'vue-router'
+import { useQuery } from '@pinia/colada'
+import { getBotsById } from '@memohai/sdk'
+import {
+  SidebarInset,
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@memohai/ui'
 import MainLayout from '@/layout/main-layout/index.vue'
 import SettingsSidebar from '@/components/settings-sidebar/index.vue'
+
+const route = useRoute()
+
+// Fetch bot data in the layout to ensure reactive breadcrumb updates for bot-detail
+const { data: bot } = useQuery({
+  key: () => ['bot', route.params.botId as string],
+  query: async () => {
+    const { data } = await getBotsById({
+      path: { id: route.params.botId as string },
+      throwOnError: true,
+    })
+    return data
+  },
+  enabled: () => route.name === 'bot-detail' && !!route.params.botId,
+})
+
+const breadcrumbs = computed(() => {
+  const items = []
+  const matched = route.matched
+  for (const m of matched) {
+    if (m.meta && m.meta.breadcrumb) {
+      let label = ''
+      // Special case for bot-detail to use the reactive display name
+      if (m.name === 'bot-detail' && bot.value?.display_name) {
+        label = bot.value.display_name
+      } else {
+        const b = m.meta.breadcrumb
+        label = typeof b === 'function' ? b(route) : toValue(b)
+      }
+
+      if (label) {
+        items.push({
+          label,
+          to: m.name ? { name: m.name } : m.path,
+          isLast: false,
+        })
+      }
+    }
+  }
+  if (items.length > 0) {
+    items[items.length - 1].isLast = true
+  }
+  return items
+})
 </script>
diff --git a/apps/web/src/pages/supermarket/index.vue b/apps/web/src/pages/supermarket/index.vue
index 87c2347aa..48ed5fa55 100644
--- a/apps/web/src/pages/supermarket/index.vue
+++ b/apps/web/src/pages/supermarket/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-6 max-w-6xl mx-auto space-y-6">
+  <div class="px-4 pt-2 pb-10 md:px-6 md:pt-4 md:pb-12 max-w-6xl mx-auto space-y-6">
     <!-- Header: Title + Submit Button -->
     <div class="flex items-center justify-between">
       <h1 class="text-lg font-semibold">
diff --git a/apps/web/src/pages/usage/index.vue b/apps/web/src/pages/usage/index.vue
index 4ac941c9b..affc25e30 100644
--- a/apps/web/src/pages/usage/index.vue
+++ b/apps/web/src/pages/usage/index.vue
@@ -1,9 +1,6 @@
 <template>
-  <div class="p-6 max-w-7xl mx-auto space-y-6">
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-semibold tracking-tight">
-        {{ $t('usage.title') }}
-      </h1>
+  <div class="px-4 pt-2 pb-10 md:px-6 md:pt-4 md:pb-12 max-w-7xl mx-auto space-y-6">
+    <div class="flex items-center justify-end">
       <Button
         variant="outline"
         size="sm"
diff --git a/apps/web/src/pages/web-search/components/add-search-provider.vue b/apps/web/src/pages/web-search/components/add-search-provider.vue
index 3109e72fe..6ec5a1dad 100644
--- a/apps/web/src/pages/web-search/components/add-search-provider.vue
+++ b/apps/web/src/pages/web-search/components/add-search-provider.vue
@@ -11,10 +11,10 @@
     >
       <template #trigger>
         <Button
-          class="w-full shadow-none! text-muted-foreground mb-4"
+          class="w-full shadow-none! text-muted-foreground h-9 px-3 rounded-md border-border bg-background hover:bg-accent"
           variant="outline"
         >
-          <Plus class="mr-1" /> {{ $t('webSearch.add') }}
+          <Plus class="mr-1 size-4" /> {{ $t('webSearch.add') }}
         </Button>
       </template>
       <template #body>
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
index 709e6a90a..3201e6818 100644
--- a/apps/web/src/style.css
+++ b/apps/web/src/style.css
@@ -144,3 +144,41 @@
 .markstream-vue .link-node:hover {
   text-decoration-color: var(--color-foreground);
 }
+
+/* Global Harmonious Scrollbar */
+@layer base {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklch, var(--color-border) 70%, transparent) transparent;
+  }
+
+  /* Webkit browsers (Chrome, Safari, Edge) */
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: color-mix(in oklch, var(--color-border) 40%, transparent);
+    border-radius: 10px;
+    transition: background 0.2s ease;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklch, var(--color-border) 80%, transparent);
+  }
+
+  /* Dark mode adjustments if needed */
+  .dark ::-webkit-scrollbar-thumb {
+    background: color-mix(in oklch, var(--color-border) 30%, transparent);
+  }
+
+  .dark ::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklch, var(--color-border) 60%, transparent);
+  }
+}
+
diff --git a/apps/web/src/utils/languages.ts b/apps/web/src/utils/languages.ts
new file mode 100644
index 000000000..abfd3a7b6
--- /dev/null
+++ b/apps/web/src/utils/languages.ts
@@ -0,0 +1,47 @@
+export interface LanguageOption {
+  code: string
+  name: string
+  nativeName: string
+}
+
+export const ISO639_LANGUAGES: LanguageOption[] = [
+  { code: 'ar', name: 'Arabic', nativeName: 'العربية' },
+  { code: 'bg', name: 'Bulgarian', nativeName: 'Български' },
+  { code: 'bn', name: 'Bengali', nativeName: 'বাংলা' },
+  { code: 'cs', name: 'Czech', nativeName: 'Čeština' },
+  { code: 'da', name: 'Danish', nativeName: 'Dansk' },
+  { code: 'de', name: 'German', nativeName: 'Deutsch' },
+  { code: 'el', name: 'Greek', nativeName: 'Ελληνικά' },
+  { code: 'en', name: 'English', nativeName: 'English' },
+  { code: 'es', name: 'Spanish', nativeName: 'Español' },
+  { code: 'et', name: 'Estonian', nativeName: 'Eesti' },
+  { code: 'fa', name: 'Persian', nativeName: 'فارسی' },
+  { code: 'fi', name: 'Finnish', nativeName: 'Suomi' },
+  { code: 'fr', name: 'French', nativeName: 'Français' },
+  { code: 'hi', name: 'Hindi', nativeName: 'हिन्दी' },
+  { code: 'hu', name: 'Hungarian', nativeName: 'Magyar' },
+  { code: 'id', name: 'Indonesian', nativeName: 'Bahasa Indonesia' },
+  { code: 'it', name: 'Italian', nativeName: 'Italiano' },
+  { code: 'he', name: 'Hebrew', nativeName: 'עברית' },
+  { code: 'ja', name: 'Japanese', nativeName: '日本語' },
+  { code: 'ko', name: 'Korean', nativeName: '한국어' },
+  { code: 'lt', name: 'Lithuanian', nativeName: 'Lietuvių' },
+  { code: 'lv', name: 'Latvian', nativeName: 'Latviešu' },
+  { code: 'ms', name: 'Malay', nativeName: 'Bahasa Melayu' },
+  { code: 'nl', name: 'Dutch', nativeName: 'Nederlands' },
+  { code: 'no', name: 'Norwegian', nativeName: 'Norsk' },
+  { code: 'pl', name: 'Polish', nativeName: 'Polski' },
+  { code: 'pt', name: 'Portuguese', nativeName: 'Português' },
+  { code: 'ro', name: 'Romanian', nativeName: 'Română' },
+  { code: 'ru', name: 'Russian', nativeName: 'Русский' },
+  { code: 'sk', name: 'Slovak', nativeName: 'Slovenčina' },
+  { code: 'sl', name: 'Slovenian', nativeName: 'Slovenščina' },
+  { code: 'sv', name: 'Swedish', nativeName: 'Svenska' },
+  { code: 'th', name: 'Thai', nativeName: 'ไทย' },
+  { code: 'tr', name: 'Turkish', nativeName: 'Türkçe' },
+  { code: 'uk', name: 'Ukrainian', nativeName: 'Українська' },
+  { code: 'ur', name: 'Urdu', nativeName: 'اردو' },
+  { code: 'vi', name: 'Vietnamese', nativeName: 'Tiếng Việt' },
+  { code: 'zh-cn', name: 'Chinese (Simplified)', nativeName: '简体中文' },
+  { code: 'zh-tw', name: 'Chinese (Traditional)', nativeName: '繁體中文' },
+]
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 94a9b3542..34cea8e49 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -6,7 +6,7 @@ import vue from 'eslint-plugin-vue'
 export default [
   ...tseslint.configs.recommended,
   ...vue.configs['flat/recommended'],
-  { ignores: ['**/node_modules/**', '**/dist/**', '**/cache/**', '**/target/**', 'packages/sdk/src/**'] },
+  { ignores: ['**/node_modules/**', '**/dist/**', '**/out/**', '**/cache/**', '**/target/**', 'packages/sdk/src/**'] },
   {
     files: ['packages/**/*.{js,jsx,ts,tsx}', 'apps/**/*.{js,jsx,ts,tsx}'],
     languageOptions: {
diff --git a/mise.toml b/mise.toml
index 07708ab04..f9285e661 100644
--- a/mise.toml
+++ b/mise.toml
@@ -235,26 +235,41 @@ run = "docker build -f docker/Dockerfile.vnc -t memohai/vnc:debian ."
 
 [tasks.lint]
 description = "Run all linters"
-depends = [
-  "//:lint:go",
-  "//:lint:es",
+env = { CI = "true", MISE_YES = "1" }
+run = [
+  "mise run lint:es",
+  "mise run lint:go",
 ]
 
 [tasks."lint:fix"]
 description = "Run all linters with auto-fix"
-depends = [
-  "//:lint:go:fix",
-  "//:lint:es:fix",
+env = { CI = "true", MISE_YES = "1" }
+run = [
+  "mise run lint:es:fix",
+  "mise run lint:go:fix",
 ]
 
 [tasks."lint:go"]
 description = "Run Go linter"
+depends = ["//:go-install"]
 run = "golangci-lint run ./..."
 
 [tasks."lint:go:fix"]
 description = "Run Go linter with auto-fix"
+depends = ["//:go-install"]
 run = "golangci-lint run --fix ./..."
 
+[tasks."lint:clean"]
+description = "Clear linter caches"
+run = """
+#!/bin/bash
+set -e
+golangci-lint cache clean
+# Clear ESLint cache if it exists (ESLint 9 default is usually no cache unless enabled)
+find . -name ".eslintcache" -delete
+echo '✓ Linter caches cleared'
+"""
+
 [tasks."lint:es"]
 description = "Run ESLint"
 run = "pnpm lint"
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue b/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue
index 6751b188c..34ee659db 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <li
     data-slot="breadcrumb-item"
-    :class="cn('inline-flex items-center gap-1.5', props.class)"
+    :class="cn('inline-flex items-center gap-1.5 leading-none [&>*]:leading-none', props.class)"
   >
     <slot />
   </li>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue b/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
index 276bc426a..5e8d2c292 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes
     data-slot="breadcrumb-link"
     :as="as"
     :as-child="asChild"
-    :class="cn('hover:text-foreground transition-colors text-muted-foreground', props.class)"
+    :class="cn('hover:text-foreground transition-colors text-muted-foreground inline-flex items-center leading-none [&>*]:leading-none', props.class)"
   >
     <slot />
   </Primitive>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue b/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue
index 5ed9d63f6..123fb12d5 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
     role="link"
     aria-disabled="true"
     aria-current="page"
-    :class="cn('text-foreground font-normal', props.class)"
+    :class="cn('text-foreground font-normal inline-flex items-center leading-none [&>*]:leading-none', props.class)"
   >
     <slot />
   </span>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue b/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
index 8bcfc2877..42dece016 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
     data-slot="breadcrumb-separator"
     role="presentation"
     aria-hidden="true"
-    :class="cn('[&>svg]:size-3.5 text-muted-foreground', props.class)"
+    :class="cn('inline-flex items-center [&>svg]:size-3.5 text-muted-foreground leading-none [&>*]:leading-none', props.class)"
   >
     <slot>
       <ChevronRight />
diff --git a/packages/ui/src/components/scroll-area/ScrollBar.vue b/packages/ui/src/components/scroll-area/ScrollBar.vue
index 0f31b8b38..dae350161 100644
--- a/packages/ui/src/components/scroll-area/ScrollBar.vue
+++ b/packages/ui/src/components/scroll-area/ScrollBar.vue
@@ -17,16 +17,16 @@ const delegatedProps = reactiveOmit(props, 'class')
     data-slot="scroll-area-scrollbar"
     v-bind="delegatedProps"
     :class="
-      cn('flex touch-none p-px transition-colors select-none',
+      cn('flex touch-none p-0.5 transition-colors select-none justify-center',
          orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent',
+           && 'h-full w-2 border-l border-l-transparent',
          orientation === 'horizontal'
-           && 'h-2.5 flex-col border-t border-t-transparent',
+           && 'h-2 flex-col border-t border-t-transparent',
          props.class)"
   >
     <ScrollAreaThumb
       data-slot="scroll-area-thumb"
-      class="bg-border relative flex-1 rounded-full"
+      class="bg-border/40 hover:bg-border/80 transition-colors relative flex-1 rounded-full"
     />
   </ScrollAreaScrollbar>
 </template>