feat(ui): refactor style ui & add Models page with provider settings (#379)

.npmrc

@@ -0,0 +1 @@
+package-import-method=copy

electron/utils/openclaw-auth.ts

@@ -882,6 +882,46 @@ export async function sanitizeOpenClawConfig(): Promise<void> {
     }
   }
 
+  // ── plugins section ──────────────────────────────────────────────
+  // Remove absolute paths in plugins that no longer exist or are bundled (preventing hardlink validation errors)
+  const plugins = config.plugins;
+  if (plugins) {
+    if (Array.isArray(plugins)) {
+      const validPlugins: unknown[] = [];
+      for (const p of plugins) {
+        if (typeof p === 'string' && p.startsWith('/')) {
+          if (p.includes('node_modules/openclaw/extensions') || !(await fileExists(p))) {
+            console.log(`[sanitize] Removing stale/bundled plugin path "${p}" from openclaw.json`);
+            modified = true;
+          } else {
+            validPlugins.push(p);
+          }
+        } else {
+          validPlugins.push(p);
+        }
+      }
+      if (modified) config.plugins = validPlugins;
+    } else if (typeof plugins === 'object') {
+      const pluginsObj = plugins as Record<string, unknown>;
+      if (Array.isArray(pluginsObj.load)) {
+        const validLoad: unknown[] = [];
+        for (const p of pluginsObj.load) {
+          if (typeof p === 'string' && p.startsWith('/')) {
+            if (p.includes('node_modules/openclaw/extensions') || !(await fileExists(p))) {
+              console.log(`[sanitize] Removing stale/bundled plugin path "${p}" from openclaw.json`);
+              modified = true;
+            } else {
+              validLoad.push(p);
+            }
+          } else {
+            validLoad.push(p);
+          }
+        }
+        if (modified) pluginsObj.load = validLoad;
+      }
+    }
+  }
+
   // ── commands section ───────────────────────────────────────────
   // Required for SIGUSR1 in-process reload authorization.
   const commands = (

package.json

@@ -106,5 +106,5 @@
         "zustand": "^5.0.11",
         "zx": "^8.8.5"
     },
-    "packageManager": "pnpm@10.29.2+sha512.bef43fa759d91fd2da4b319a5a0d13ef7a45bb985a3d7342058470f9d2051a3ba8674e629672654686ef9443ad13a82da2beb9eeb3e0221c87b8154fff9d74b8"
+    "packageManager": "pnpm@10.31.0+sha512.e3927388bfaa8078ceb79b748ffc1e8274e84d75163e67bc22e06c0d3aed43dd153151cbf11d7f8301ff4acb98c68bdc5cadf6989532801ffafe3b3e4a63c268"
 }

src/App.tsx

@@ -10,6 +10,7 @@ import i18n from './i18n';
 import { MainLayout } from './components/layout/MainLayout';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { Dashboard } from './pages/Dashboard';
+import { Models } from './pages/Models';
 import { Chat } from './pages/Chat';
 import { Channels } from './pages/Channels';
 import { Skills } from './pages/Skills';
@@ -164,6 +165,7 @@ function App() {
           {/* Main application routes */}
           <Route element={<MainLayout />}>
             <Route path="/" element={<Chat />} />
+            <Route path="/models" element={<Models />} />
             <Route path="/dashboard" element={<Dashboard />} />
             <Route path="/channels" element={<Channels />} />
             <Route path="/skills" element={<Skills />} />

src/assets/channels/dingtalk.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21 12a9 9 0 1 1 -18 0a9 9 0 0 1 18 0" />
+  <path d="M8 7.5l7.02 2.632a1 1 0 0 1 .567 1.33l-1.087 2.538h1.5l-5 4l1 -4c-3.1 .03 -3.114 -3.139 -4 -6.5" />
+</svg>

src/assets/channels/discord.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
+</svg>

src/assets/channels/feishu.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.062 10.395L6.685 1.09l-3.325.045c-1.127.014-2.02.936-1.996 2.063l.115 5.512c.023 1.107.925 2 2.032 2.016l4.24.062 4.311-.393z"/>
+  <path d="M12.062 10.395l-4.311.393-4.24-.062c-1.107-.016-1.986.877-1.961 1.984l.116 5.343c.025 1.127.947 2.028 2.074 2l3.418-.083 4.904-9.575z" fillOpacity=".8"/>
+  <path d="M12.062 10.395l4.904 9.575 3.51-.086c1.127-.028 2.028-.949 2-2.076l-.116-5.342c-.024-1.107-.936-1.985-2.043-1.96l-4.14.098-4.115.391z" fillOpacity=".6"/>
+  <path d="M12.062 10.395l4.115-.391 4.14-.098c1.107-.025 2.02-.926 1.997-2.033l-.116-5.511c-.024-1.127-.946-2.035-2.073-2.008l-3.325.081-4.738 9.96z" fillOpacity=".4"/>
+</svg>

src/assets/channels/telegram.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
+</svg>

src/assets/channels/whatsapp.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
+</svg>

src/components/layout/Sidebar.tsx

@@ -6,17 +6,18 @@
 import { useEffect, useState } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import {
-  Home,
+  Network,
-  MessageSquare,
-  Radio,
   Puzzle,
   Clock,
-  Settings,
+  Settings as SettingsIcon,
-  ChevronLeft,
+  PanelLeftClose,
-  ChevronRight,
+  PanelLeft,
+  Plus,
   Terminal,
   ExternalLink,
   Trash2,
+  Cpu,
+  LayoutDashboard,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useSettingsStore } from '@/stores/settings';
@@ -26,6 +27,7 @@ import { Badge } from '@/components/ui/badge';
 import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import { hostApiFetch } from '@/lib/host-api';
 import { useTranslation } from 'react-i18next';
+import logoSvg from '@/assets/logo.svg';
 
 type SessionBucketKey =
   | 'today'
@@ -51,23 +53,29 @@ function NavItem({ to, icon, label, badge, collapsed, onClick }: NavItemProps) {
       onClick={onClick}
       className={({ isActive }) =>
         cn(
-          'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+          'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[14px] font-medium transition-colors',
-          'hover:bg-accent hover:text-accent-foreground',
+          'hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80',
           isActive
-            ? 'bg-accent text-accent-foreground'
+            ? 'bg-black/5 dark:bg-white/10 text-foreground'
-            : 'text-muted-foreground',
+            : '',
-          collapsed && 'justify-center px-2'
+          collapsed && 'justify-center px-0'
         )
       }
     >
-      {icon}
+      {({ isActive }) => (
-      {!collapsed && (
         <>
-          <span className="flex-1">{label}</span>
+          <div className={cn("flex shrink-0 items-center justify-center", isActive ? "text-foreground" : "text-muted-foreground")}>
-          {badge && (
+            {icon}
-            <Badge variant="secondary" className="ml-auto">
+          </div>
-              {badge}
+          {!collapsed && (
-            </Badge>
+            <>
+              <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{label}</span>
+              {badge && (
+                <Badge variant="secondary" className="ml-auto shrink-0">
+                  {badge}
+                </Badge>
+              )}
+            </>
           )}
         </>
       )}
@@ -161,23 +169,46 @@ export function Sidebar() {
   }
 
   const navItems = [
-    { to: '/cron', icon: <Clock className="h-5 w-5" />, label: t('sidebar.cronTasks') },
+    { to: '/models', icon: <Cpu className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.models', 'Models') },
-    { to: '/skills', icon: <Puzzle className="h-5 w-5" />, label: t('sidebar.skills') },
+    { to: '/channels', icon: <Network className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.channels') },
-    { to: '/channels', icon: <Radio className="h-5 w-5" />, label: t('sidebar.channels') },
+    { to: '/skills', icon: <Puzzle className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.skills') },
-    { to: '/dashboard', icon: <Home className="h-5 w-5" />, label: t('sidebar.dashboard') },
+    { to: '/cron', icon: <Clock className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.cronTasks') },
-    { to: '/settings', icon: <Settings className="h-5 w-5" />, label: t('sidebar.settings') },
+    { to: '/dashboard', icon: <LayoutDashboard className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.dashboard') },
   ];
 
   return (
     <aside
       className={cn(
-        'flex shrink-0 flex-col border-r bg-background transition-all duration-300',
+        'flex shrink-0 flex-col border-r bg-[#eae8e1]/60 dark:bg-background transition-all duration-300',
         sidebarCollapsed ? 'w-16' : 'w-64'
       )}
     >
+      {/* Top Header Toggle */}
+      <div className={cn("flex items-center p-2 h-12", sidebarCollapsed ? "justify-center" : "justify-between")}>
+        {!sidebarCollapsed && (
+          <div className="flex items-center gap-2 px-2 overflow-hidden">
+            <img src={logoSvg} alt="ClawX" className="h-5 w-auto shrink-0" />
+            <span className="text-sm font-semibold truncate whitespace-nowrap text-foreground/90">
+              ClawX
+            </span>
+          </div>
+        )}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 shrink-0 text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10"
+          onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+        >
+          {sidebarCollapsed ? (
+            <PanelLeft className="h-[18px] w-[18px]" />
+          ) : (
+            <PanelLeftClose className="h-[18px] w-[18px]" />
+          )}
+        </Button>
+      </div>
+
       {/* Navigation */}
-      <nav className="flex-1 overflow-hidden flex flex-col p-2 gap-1">
+      <nav className="flex flex-col px-2 gap-0.5">
-        {/* Chat nav item: acts as "New Chat" button, never highlighted as active */}
         <button
           onClick={() => {
             const { messages } = useChatStore.getState();
@@ -185,13 +216,15 @@ export function Sidebar() {
             navigate('/');
           }}
           className={cn(
-            'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+            'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-[14px] font-medium transition-colors mb-2',
-            'hover:bg-accent hover:text-accent-foreground text-muted-foreground',
+            'bg-white dark:bg-accent shadow-sm border border-black/5 dark:border-white/10 text-foreground',
-            sidebarCollapsed && 'justify-center px-2',
+            sidebarCollapsed && 'justify-center px-0',
           )}
         >
-          <MessageSquare className="h-5 w-5 shrink-0" />
+          <div className="flex shrink-0 items-center justify-center text-foreground/80">
-          {!sidebarCollapsed && <span className="flex-1 text-left">{t('sidebar.newChat')}</span>}
+            <Plus className="h-[18px] w-[18px]" strokeWidth={2} />
+          </div>
+          {!sidebarCollapsed && <span className="flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap">{t('sidebar.newChat')}</span>}
         </button>
 
         {navItems.map((item) => (
@@ -201,83 +234,93 @@ export function Sidebar() {
             collapsed={sidebarCollapsed}
           />
         ))}
-
-        {/* Session list — below Settings, only when expanded */}
-        {!sidebarCollapsed && sessions.length > 0 && (
-          <div className="mt-1 overflow-y-auto max-h-72 space-y-0.5">
-            {sessionBuckets.map((bucket) => (
-              bucket.sessions.length > 0 ? (
-                <div key={bucket.key} className="pt-1">
-                  <div className="px-3 py-1 text-[11px] font-medium text-muted-foreground/80">
-                    {bucket.label}
-                  </div>
-                  {bucket.sessions.map((s) => (
-                    <div key={s.key} className="group relative flex items-center">
-                      <button
-                        onClick={() => { switchSession(s.key); navigate('/'); }}
-                        className={cn(
-                          'w-full text-left rounded-md px-3 py-1.5 text-sm truncate transition-colors pr-7',
-                          'hover:bg-accent hover:text-accent-foreground',
-                          isOnChat && currentSessionKey === s.key
-                            ? 'bg-accent/60 text-accent-foreground font-medium'
-                            : 'text-muted-foreground',
-                        )}
-                      >
-                        {getSessionLabel(s.key, s.displayName, s.label)}
-                      </button>
-                      <button
-                        aria-label="Delete session"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          setSessionToDelete({
-                            key: s.key,
-                            label: getSessionLabel(s.key, s.displayName, s.label),
-                          });
-                        }}
-                        className={cn(
-                          'absolute right-1 flex items-center justify-center rounded p-0.5 transition-opacity',
-                          'opacity-0 group-hover:opacity-100',
-                          'text-muted-foreground hover:text-destructive hover:bg-destructive/10',
-                        )}
-                      >
-                        <Trash2 className="h-3.5 w-3.5" />
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              ) : null
-            ))}
-          </div>
-        )}
       </nav>
 
+      {/* Session list — below Settings, only when expanded */}
+      {!sidebarCollapsed && sessions.length > 0 && (
+        <div className="flex-1 overflow-y-auto overflow-x-hidden px-2 mt-4 space-y-0.5 pb-2">
+          {sessionBuckets.map((bucket) => (
+            bucket.sessions.length > 0 ? (
+              <div key={bucket.key} className="pt-2">
+                <div className="px-2.5 pb-1 text-[11px] font-medium text-muted-foreground/60 tracking-tight">
+                  {bucket.label}
+                </div>
+                {bucket.sessions.map((s) => (
+                  <div key={s.key} className="group relative flex items-center">
+                    <button
+                      onClick={() => { switchSession(s.key); navigate('/'); }}
+                      className={cn(
+                        'w-full text-left rounded-lg px-2.5 py-1.5 text-[13px] truncate transition-colors pr-7',
+                        'hover:bg-black/5 dark:hover:bg-white/5',
+                        isOnChat && currentSessionKey === s.key
+                          ? 'bg-black/5 dark:bg-white/10 text-foreground font-medium'
+                          : 'text-foreground/75',
+                      )}
+                    >
+                      {getSessionLabel(s.key, s.displayName, s.label)}
+                    </button>
+                    <button
+                      aria-label="Delete session"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setSessionToDelete({
+                          key: s.key,
+                          label: getSessionLabel(s.key, s.displayName, s.label),
+                        });
+                      }}
+                      className={cn(
+                        'absolute right-1 flex items-center justify-center rounded p-0.5 transition-opacity',
+                        'opacity-0 group-hover:opacity-100',
+                        'text-muted-foreground hover:text-destructive hover:bg-destructive/10',
+                      )}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            ) : null
+          ))}
+        </div>
+      )}
+
       {/* Footer */}
-      <div className="p-2 space-y-2">
+      <div className="p-2 mt-auto">
         {devModeUnlocked && !sidebarCollapsed && (
           <Button
             variant="ghost"
             size="sm"
-            className="w-full justify-start"
+            className="w-full justify-start mb-1 hover:bg-black/5 dark:hover:bg-white/5"
             onClick={openDevConsole}
           >
-            <Terminal className="h-4 w-4 mr-2" />
+            <div className="flex shrink-0 items-center justify-center text-muted-foreground">
-            {t('sidebar.devConsole')}
+              <Terminal className="h-[18px] w-[18px] mr-2.5" strokeWidth={2} />
-            <ExternalLink className="h-3 w-3 ml-auto" />
+            </div>
+            <span className="font-medium text-[14px] flex-1 text-left text-foreground/80 overflow-hidden text-ellipsis whitespace-nowrap">{t('sidebar.devConsole')}</span>
+            <ExternalLink className="h-3 w-3 shrink-0 ml-auto opacity-50 text-muted-foreground" />
           </Button>
         )}
 
-        <Button
+        <NavLink
-          variant="ghost"
+            to="/settings"
-          size="icon"
+            className={({ isActive }) =>
-          className="w-full"
+              cn(
-          onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+                'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[14px] font-medium transition-colors',
-        >
+                'hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80',
-          {sidebarCollapsed ? (
+                isActive && 'bg-black/5 dark:bg-white/10 text-foreground',
-            <ChevronRight className="h-4 w-4" />
+                sidebarCollapsed ? 'justify-center px-0' : ''
-          ) : (
+              )
-            <ChevronLeft className="h-4 w-4" />
+            }
+          >
+          {({ isActive }) => (
+            <>
+              <div className={cn("flex shrink-0 items-center justify-center", isActive ? "text-foreground" : "text-muted-foreground")}>
+                <SettingsIcon className="h-[18px] w-[18px]" strokeWidth={2} />
+              </div>
+              {!sidebarCollapsed && <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{t('sidebar.settings')}</span>}
+            </>
           )}
-        </Button>
+        </NavLink>
       </div>
 
       <ConfirmDialog

src/components/ui/sheet.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/30 dark:bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-2xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/pages/Channels/index.tsx

@@ -4,12 +4,8 @@
  */
 import { useState, useEffect, useCallback, useRef } from 'react';
 import {
-  Plus,
-  Radio,
   RefreshCw,
   Trash2,
-  Power,
-  PowerOff,
   QrCode,
   Loader2,
   X,
@@ -31,11 +27,11 @@ import { Badge } from '@/components/ui/badge';
 import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import { useChannelsStore } from '@/stores/channels';
 import { useGatewayStore } from '@/stores/gateway';
-import { StatusBadge, type Status } from '@/components/common/StatusBadge';
 import { LoadingSpinner } from '@/components/common/LoadingSpinner';
 import { hostApiFetch } from '@/lib/host-api';
 import { subscribeHostEvent } from '@/lib/host-events';
 import { invokeIpc } from '@/lib/api-client';
+import { cn } from '@/lib/utils';
 import {
   CHANNEL_ICONS,
   CHANNEL_NAMES,
@@ -49,6 +45,12 @@ import {
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 
+import telegramIcon from '@/assets/channels/telegram.svg';
+import discordIcon from '@/assets/channels/discord.svg';
+import whatsappIcon from '@/assets/channels/whatsapp.svg';
+import dingtalkIcon from '@/assets/channels/dingtalk.svg';
+import feishuIcon from '@/assets/channels/feishu.svg';
+
 export function Channels() {
   const { t } = useTranslation('channels');
   const { channels, loading, error, fetchChannels, deleteChannel } = useChannelsStore();
@@ -99,171 +101,131 @@ export function Channels() {
   // Get channel types to display
   const displayedChannelTypes = getPrimaryChannels();
 
-  // Connected/disconnected channel counts
-  const connectedCount = channels.filter((c) => c.status === 'connected').length;
-
   if (loading) {
     return (
-      <div className="flex h-96 items-center justify-center">
+      <div className="flex flex-col -m-6 dark:bg-background min-h-[calc(100vh-2.5rem)] items-center justify-center">
         <LoadingSpinner size="lg" />
       </div>
     );
   }
 
   return (
-    <div className="space-y-6">
+    <div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
-      {/* Header */}
+      <div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16">
-      <div className="flex items-center justify-between">
+        
-        <div>
+        {/* Header */}
-          <h1 className="text-2xl font-bold">{t('title')}</h1>
+        <div className="flex flex-col md:flex-row md:items-start justify-between mb-12 shrink-0 gap-4">
-          <p className="text-muted-foreground">
+          <div>
-            {t('subtitle')}
+            <h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
-          </p>
+              {t('title', 'Messaging Channels')}
+            </h1>
+            <p className="text-[17px] text-foreground/80 font-medium">
+              {t('subtitle', 'Manage your messaging channels and connections')}
+            </p>
+          </div>
+          
+          <div className="flex items-center gap-3 md:mt-2">
+            <Button
+              variant="outline"
+              onClick={fetchChannels}
+              className="h-9 text-[13px] font-medium rounded-full px-4 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 shadow-none text-foreground/80 hover:text-foreground transition-colors"
+            >
+              <RefreshCw className="h-3.5 w-3.5 mr-2" />
+              {t('refresh')}
+            </Button>
+          </div>
         </div>
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={fetchChannels}>
-            <RefreshCw className="h-4 w-4 mr-2" />
-            {t('refresh')}
-          </Button>
-          <Button onClick={() => setShowAddDialog(true)}>
-            <Plus className="h-4 w-4 mr-2" />
-            {t('addChannel')}
-          </Button>
-        </div>
-      </div>
 
-      {/* Stats */}
+        {/* Content Area */}
-      <div className="grid grid-cols-3 gap-4">
+        <div className="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 -mr-2">
-        <Card>
+          
-          <CardContent className="pt-6">
+          {/* Gateway Warning */}
-            <div className="flex items-center gap-4">
+          {gatewayStatus.state !== 'running' && (
-              <div className="rounded-full bg-primary/10 p-3">
+            <div className="mb-8 p-4 rounded-xl border border-yellow-500/50 bg-yellow-500/10 flex items-center gap-3">
-                <Radio className="h-6 w-6 text-primary" />
+              <AlertCircle className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
-              </div>
+              <span className="text-yellow-700 dark:text-yellow-400 text-sm font-medium">
-              <div>
+                {t('gatewayWarning')}
-                <p className="text-2xl font-bold">{channels.length}</p>
+              </span>
-                <p className="text-sm text-muted-foreground">{t('stats.total')}</p>
+            </div>
+          )}
+
+          {/* Error Display */}
+          {error && (
+            <div className="mb-8 p-4 rounded-xl border border-destructive/50 bg-destructive/10 flex items-center gap-3">
+              <AlertCircle className="h-5 w-5 text-destructive" />
+              <span className="text-destructive text-sm font-medium">
+                {error}
+              </span>
+            </div>
+          )}
+
+          {/* Available Channels (Configured) */}
+          {channels.length > 0 && (
+            <div className="mb-12">
+              <h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
+                Available Channels
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                {channels.map((channel) => (
+                  <ChannelCard
+                    key={channel.id}
+                    channel={channel}
+                    onDelete={() => setChannelToDelete({ id: channel.id })}
+                  />
+                ))}
               </div>
             </div>
-          </CardContent>
+          )}
-        </Card>
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="rounded-full bg-green-100 p-3 dark:bg-green-900">
-                <Power className="h-6 w-6 text-green-600" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold">{connectedCount}</p>
-                <p className="text-sm text-muted-foreground">{t('stats.connected')}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="rounded-full bg-slate-100 p-3 dark:bg-slate-800">
-                <PowerOff className="h-6 w-6 text-slate-600" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold">{channels.length - connectedCount}</p>
-                <p className="text-sm text-muted-foreground">{t('stats.disconnected')}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
 
-      {/* Gateway Warning */}
+          {/* Supported Channels (Not yet configured) */}
-      {gatewayStatus.state !== 'running' && (
+          <div className="mb-8">
-        <Card className="border-yellow-500 bg-yellow-50 dark:bg-yellow-900/10">
+            <h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
-          <CardContent className="py-4 flex items-center gap-3">
+              Supported Channels
-            <AlertCircle className="h-5 w-5 text-yellow-500" />
+            </h2>
-            <span className="text-yellow-700 dark:text-yellow-400">
-              {t('gatewayWarning')}
-            </span>
-          </CardContent>
-        </Card>
-      )}
             
-      {/* Error Display */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
-      {error && (
+              {displayedChannelTypes.map((type) => {
-        <Card className="border-destructive">
+                const meta = CHANNEL_META[type];
-          <CardContent className="py-4 text-destructive">
+                const isConfigured = channels.some(c => c.type === type) || configuredTypes.includes(type);
-            {error}
-          </CardContent>
-        </Card>
-      )}
                 
-      {/* Configured Channels */}
+                // Hide already configured channels from "Supported Channels" section
-      {channels.length > 0 && (
+                if (isConfigured) return null;
-        <Card>
-          <CardHeader>
-            <CardTitle>{t('configured')}</CardTitle>
-            <CardDescription>{t('configuredDesc')}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-              {channels.map((channel) => (
-                <ChannelCard
-                  key={channel.id}
-                  channel={channel}
-                  onDelete={() => setChannelToDelete({ id: channel.id })}
-                />
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
                 
-      {/* Available Channels */}
+                return (
-      <Card>
+                  <button
-        <CardHeader>
+                    key={type}
-          <div className="flex items-center justify-between">
+                    onClick={() => {
-            <div>
+                      setSelectedChannelType(type);
-              <CardTitle>{t('available')}</CardTitle>
+                      setShowAddDialog(true);
-              <CardDescription>
+                    }}
-                {t('availableDesc')}
+                    className={cn(
-              </CardDescription>
+                      "group flex items-start gap-4 p-4 rounded-2xl transition-all text-left border relative overflow-hidden bg-transparent border-transparent hover:bg-black/5 dark:hover:bg-white/5"
+                    )}
+                  >
+                    <div className="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-foreground bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-full shadow-sm mb-3">
+                      <ChannelLogo type={type} />
+                    </div>
+                    <div className="flex flex-col flex-1 min-w-0 py-0.5 mt-1">
+                      <div className="flex items-center gap-2 mb-1">
+                        <h3 className="text-[16px] font-semibold text-foreground truncate">{meta.name}</h3>
+                        {meta.isPlugin && (
+                          <Badge variant="secondary" className="font-mono text-[10px] font-medium px-2 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] border-0 shadow-none text-foreground/70">
+                            {t('pluginBadge', 'Plugin')}
+                          </Badge>
+                        )}
+                      </div>
+                      <p className="text-[13.5px] text-muted-foreground line-clamp-2 leading-[1.5]">
+                        {t(meta.description.replace('channels:', ''))}
+                      </p>
+                    </div>
+                  </button>
+                );
+              })}
             </div>
           </div>
-        </CardHeader>
+          
-        <CardContent>
+        </div>
-          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+      </div>
-            {displayedChannelTypes.map((type) => {
-              const meta = CHANNEL_META[type];
-              const isConfigured = configuredTypes.includes(type);
-              return (
-                <button
-                  key={type}
-                  className={`p-4 rounded-lg border hover:bg-accent transition-colors text-left relative ${isConfigured ? 'border-green-500/50 bg-green-500/5' : ''}`}
-                  onClick={() => {
-                    setSelectedChannelType(type);
-                    setShowAddDialog(true);
-                  }}
-                >
-                  <span className="text-3xl">{meta.icon}</span>
-                  <p className="font-medium mt-2">{meta.name}</p>
-                  <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
-                    {meta.description}
-                  </p>
-                  {isConfigured && (
-                    <Badge className="absolute top-2 right-2 text-xs bg-green-600 hover:bg-green-600">
-                      {t('configuredBadge')}
-                    </Badge>
-                  )}
-                  {!isConfigured && meta.isPlugin && (
-                    <Badge variant="secondary" className="absolute top-2 right-2 text-xs">
-                      {t('pluginBadge')}
-                    </Badge>
-                  )}
-                </button>
-              );
-            })}
-          </div>
-        </CardContent>
-      </Card>
 
       {/* Add Channel Dialog */}
       {showAddDialog && (
@@ -293,6 +255,9 @@ export function Channels() {
         onConfirm={async () => {
           if (channelToDelete) {
             await deleteChannel(channelToDelete.id);
+            // Immediately update configuredTypes state so it disappears from available and appears in supported
+            const channelType = channelToDelete.id.split('-')[0];
+            setConfiguredTypes((prev) => prev.filter((type) => type !== channelType));
             setChannelToDelete(null);
           }
         }}
@@ -302,6 +267,24 @@ export function Channels() {
   );
 }
 
+// ==================== Channel Logo Component ====================
+function ChannelLogo({ type }: { type: ChannelType }) {
+  switch (type) {
+    case 'telegram':
+      return <img src={telegramIcon} alt="Telegram" className="w-[22px] h-[22px] dark:invert" />;
+    case 'discord':
+      return <img src={discordIcon} alt="Discord" className="w-[22px] h-[22px] dark:invert" />;
+    case 'whatsapp':
+      return <img src={whatsappIcon} alt="WhatsApp" className="w-[22px] h-[22px] dark:invert" />;
+    case 'dingtalk':
+      return <img src={dingtalkIcon} alt="DingTalk" className="w-[22px] h-[22px] dark:invert" />;
+    case 'feishu':
+      return <img src={feishuIcon} alt="Feishu" className="w-[22px] h-[22px] dark:invert" />;
+    default:
+      return <span className="text-[22px]">{CHANNEL_ICONS[type] || '💬'}</span>;
+  }
+}
+
 // ==================== Channel Card Component ====================
 
 interface ChannelCardProps {
@@ -310,40 +293,59 @@ interface ChannelCardProps {
 }
 
 function ChannelCard({ channel, onDelete }: ChannelCardProps) {
+  const { t } = useTranslation('channels');
+  const meta = CHANNEL_META[channel.type];
+
   return (
-    <Card>
+    <div className="group flex items-start gap-4 p-4 rounded-2xl transition-all text-left border relative overflow-hidden bg-transparent border-transparent hover:bg-black/5 dark:hover:bg-white/5">
-      <CardHeader className="pb-3">
+      <div className="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-foreground bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-full shadow-sm mb-3">
-        <div className="flex items-start justify-between">
+        <ChannelLogo type={channel.type} />
-          <div className="flex items-center gap-3">
+      </div>
-            <span className="text-2xl">
+      <div className="flex flex-col flex-1 min-w-0 py-0.5 mt-1">
-              {CHANNEL_ICONS[channel.type]}
+        <div className="flex items-center justify-between gap-2 mb-1">
-            </span>
+          <div className="flex items-center gap-2 min-w-0">
-            <div>
+            <h3 className="text-[16px] font-semibold text-foreground truncate">{channel.name}</h3>
-              <CardTitle className="text-base">{channel.name}</CardTitle>
+            {meta?.isPlugin && (
-              <CardDescription className="text-xs">
+              <Badge variant="secondary" className="font-mono text-[10px] font-medium px-2 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] border-0 shadow-none text-foreground/70">
-                {CHANNEL_NAMES[channel.type]}
+                {t('pluginBadge', 'Plugin')}
-              </CardDescription>
+              </Badge>
-            </div>
+            )}
+            <div 
+              className={cn(
+                "w-2 h-2 rounded-full shrink-0",
+                channel.status === 'connected' ? "bg-green-500" :
+                channel.status === 'connecting' ? "bg-yellow-500 animate-pulse" :
+                channel.status === 'error' ? "bg-destructive" :
+                "bg-muted-foreground"
+              )} 
+              title={channel.status}
+            />
           </div>
-          <StatusBadge status={channel.status as Status} />
+          
-        </div>
-      </CardHeader>
-      <CardContent className="pt-0">
-        {channel.error && (
-          <p className="text-xs text-destructive mb-3">{channel.error}</p>
-        )}
-        <div className="flex gap-2">
           <Button
             variant="ghost"
-            size="sm"
+            size="icon"
-            className="text-destructive hover:text-destructive"
+            className="opacity-0 group-hover:opacity-100 h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-all shrink-0 -mr-2"
-            onClick={onDelete}
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
           >
             <Trash2 className="h-4 w-4" />
           </Button>
         </div>
-      </CardContent>
+        
-    </Card>
+        {channel.error ? (
+          <p className="text-[13.5px] text-destructive line-clamp-2 leading-[1.5]">
+            {channel.error}
+          </p>
+        ) : (
+          <p className="text-[13.5px] text-muted-foreground line-clamp-2 leading-[1.5]">
+            {meta ? t(meta.description.replace('channels:', '')) : CHANNEL_NAMES[channel.type]}
+          </p>
+        )}
+      </div>
+    </div>
   );
 }
 
@@ -638,7 +640,7 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
 
   const openDocs = () => {
     if (meta?.docsUrl) {
-      const url = t(meta.docsUrl);
+      const url = t(meta.docsUrl.replace('channels:', ''));
       try {
         if (window.electron?.openExternal) {
           window.electron.openExternal(url);
@@ -674,27 +676,27 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
 
   return (
     <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
-      <Card className="w-full max-w-lg max-h-[90vh] overflow-y-auto">
+      <Card className="w-full max-w-lg max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-[#1a1a19] overflow-hidden">
-        <CardHeader className="flex flex-row items-start justify-between">
+        <CardHeader className="flex flex-row items-start justify-between pb-2 shrink-0">
           <div>
-            <CardTitle>
+            <CardTitle className="text-2xl font-serif font-normal">
               {selectedType
                 ? isExistingConfig
                   ? t('dialog.updateTitle', { name: CHANNEL_NAMES[selectedType] })
                   : t('dialog.configureTitle', { name: CHANNEL_NAMES[selectedType] })
                 : t('dialog.addTitle')}
             </CardTitle>
-            <CardDescription>
+            <CardDescription className="text-[15px] mt-1 text-foreground/70">
               {selectedType && isExistingConfig
                 ? t('dialog.existingDesc')
-                : meta ? t(meta.description) : t('dialog.selectDesc')}
+                : meta ? t(meta.description.replace('channels:', '')) : t('dialog.selectDesc')}
             </CardDescription>
           </div>
-          <Button variant="ghost" size="icon" onClick={onClose}>
+          <Button variant="ghost" size="icon" onClick={onClose} className="rounded-full h-8 w-8 -mr-2 -mt-2 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5">
             <X className="h-4 w-4" />
           </Button>
         </CardHeader>
-        <CardContent className="space-y-4">
+        <CardContent className="space-y-6 pt-4 overflow-y-auto flex-1 p-6">
           {!selectedType ? (
             // Channel type selection
             <div className="grid grid-cols-2 gap-4">
@@ -704,11 +706,13 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
                   <button
                     key={type}
                     onClick={() => onSelectType(type)}
-                    className="p-4 rounded-lg border hover:bg-accent transition-colors text-left"
+                    className="p-4 rounded-2xl border border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/5 transition-all text-left group"
                   >
-                    <span className="text-3xl">{channelMeta.icon}</span>
+                    <div className="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-foreground bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-full shadow-sm mb-3 group-hover:scale-105 transition-transform">
-                    <p className="font-medium mt-2">{channelMeta.name}</p>
+                      <ChannelLogo type={type} />
-                    <p className="text-xs text-muted-foreground mt-1">
+                    </div>
+                    <p className="font-semibold text-[15px]">{channelMeta.name}</p>
+                    <p className="text-[13px] text-muted-foreground mt-0.5">
                       {channelMeta.connectionType === 'qr' ? t('dialog.qrCode') : t('dialog.token')}
                     </p>
                   </button>
@@ -717,75 +721,76 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
             </div>
           ) : qrCode ? (
             // QR Code display
-            <div className="text-center space-y-4">
+            <div className="text-center space-y-5 py-4">
-              <div className="bg-white p-4 rounded-lg inline-block shadow-sm border">
+              <div className="bg-white p-5 rounded-3xl inline-block shadow-sm border border-black/5">
                 {qrCode.startsWith('data:image') ? (
                   <img src={qrCode} alt="Scan QR Code" className="w-64 h-64 object-contain" />
                 ) : (
-                  <div className="w-64 h-64 bg-gray-100 flex items-center justify-center">
+                  <div className="w-64 h-64 bg-gray-50 rounded-2xl flex items-center justify-center">
-                    <QrCode className="h-32 w-32 text-gray-400" />
+                    <QrCode className="h-24 w-24 text-gray-300" />
                   </div>
                 )}
               </div>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-[14px] text-muted-foreground font-medium">
                 {t('dialog.scanQR', { name: meta?.name })}
               </p>
-              <div className="flex justify-center gap-2">
+              <div className="flex justify-center gap-2 pt-2">
                 <Button variant="outline" onClick={() => {
                   setQrCode(null);
                   handleConnect(); // Retry
-                }}>
+                }} className="rounded-full px-6 h-[42px] text-[13px] font-semibold border-black/20 dark:border-white/20 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground shadow-sm">
                   {t('dialog.refreshCode')}
                 </Button>
               </div>
             </div>
           ) : loadingConfig ? (
             // Loading saved config
-            <div className="flex items-center justify-center py-8">
+            <div className="flex flex-col items-center justify-center py-12 space-y-4">
-              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground/50" />
-              <span className="ml-2 text-sm text-muted-foreground">{t('dialog.loadingConfig')}</span>
+              <span className="text-[14px] font-medium text-muted-foreground">{t('dialog.loadingConfig')}</span>
             </div>
           ) : (
             // Connection form
             <div className="space-y-4">
               {/* Existing config hint */}
               {isExistingConfig && (
-                <div className="bg-blue-500/10 text-blue-600 dark:text-blue-400 p-3 rounded-lg text-sm flex items-center gap-2">
+                <div className="bg-[#eeece3] dark:bg-[#151514] text-foreground/80 font-medium p-4 rounded-2xl text-[13.5px] flex items-center gap-2.5 shadow-sm border border-black/5 dark:border-white/5">
-                  <CheckCircle className="h-4 w-4 shrink-0" />
+                  <CheckCircle className="h-4 w-4 shrink-0 text-blue-500" />
                   <span>{t('dialog.existingHint')}</span>
                 </div>
               )}
 
               {/* Instructions */}
-              <div className="bg-muted p-4 rounded-lg space-y-3">
+              <div className="bg-[#eeece3] dark:bg-[#151514] p-5 rounded-2xl space-y-3 shadow-sm border border-black/5 dark:border-white/5">
                 <div className="flex items-center justify-between">
-                  <p className="font-medium text-sm">{t('dialog.howToConnect')}</p>
+                  <p className="font-semibold text-[14px] text-foreground/80">{t('dialog.howToConnect')}</p>
                   <Button
                     variant="link"
-                    className="p-0 h-auto text-sm"
+                    className="p-0 h-auto text-[13px] text-muted-foreground hover:text-foreground"
                     onClick={openDocs}
                   >
-                    <BookOpen className="h-3 w-3 mr-1" />
+                    <BookOpen className="h-3.5 w-3.5 mr-1.5" />
                     {t('dialog.viewDocs')}
                     <ExternalLink className="h-3 w-3 ml-1" />
                   </Button>
                 </div>
-                <ol className="list-decimal list-inside text-sm text-muted-foreground space-y-1">
+                <ol className="list-decimal list-inside text-[13.5px] text-muted-foreground space-y-1.5 leading-relaxed">
                   {meta?.instructions.map((instruction, i) => (
-                    <li key={i}>{t(instruction)}</li>
+                    <li key={i}>{t(instruction.replace('channels:', ''))}</li>
                   ))}
                 </ol>
               </div>
 
               {/* Channel name */}
-              <div className="space-y-2">
+              <div className="space-y-2.5">
-                <Label htmlFor="name">{t('dialog.channelName')}</Label>
+                <Label htmlFor="name" className="text-[14px] text-foreground/80 font-bold">{t('dialog.channelName')}</Label>
                 <Input
                   ref={firstInputRef}
                   id="name"
                   placeholder={t('dialog.channelNamePlaceholder', { name: meta?.name })}
                   value={channelName}
                   onChange={(e) => setChannelName(e.target.value)}
+                  className="h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"
                 />
               </div>
 
@@ -803,35 +808,35 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
 
               {/* Validation Results */}
               {validationResult && (
-                <div className={`p-4 rounded-lg text-sm ${validationResult.valid ? 'bg-green-500/10 text-green-600 dark:text-green-400' : 'bg-destructive/10 text-destructive'
+                <div className={`p-4 rounded-2xl text-[13.5px] shadow-sm border border-black/5 dark:border-white/5 ${validationResult.valid ? 'bg-[#eeece3] dark:bg-[#151514] text-foreground/80' : 'bg-destructive/10 text-destructive'
                   }`}>
-                  <div className="flex items-start gap-2">
+                  <div className="flex items-start gap-2.5">
                     {validationResult.valid ? (
-                      <CheckCircle className="h-4 w-4 mt-0.5 shrink-0" />
+                      <CheckCircle className="h-4 w-4 mt-0.5 shrink-0 text-green-500" />
                     ) : (
                       <AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
                     )}
                     <div className="min-w-0">
-                      <h4 className="font-medium mb-1">
+                      <h4 className="font-bold mb-1">
                         {validationResult.valid ? t('dialog.credentialsVerified') : t('dialog.validationFailed')}
                       </h4>
                       {validationResult.errors.length > 0 && (
-                        <ul className="list-disc list-inside space-y-0.5">
+                        <ul className="list-disc list-inside space-y-0.5 font-medium">
                           {validationResult.errors.map((err, i) => (
                             <li key={i}>{err}</li>
                           ))}
                         </ul>
                       )}
                       {validationResult.valid && validationResult.warnings.length > 0 && (
-                        <div className="mt-1 text-green-600 dark:text-green-400 space-y-0.5">
+                        <div className="mt-1 text-green-600 dark:text-green-500 space-y-0.5 font-medium">
                           {validationResult.warnings.map((info, i) => (
-                            <p key={i} className="text-xs">{info}</p>
+                            <p key={i} className="text-[13px]">{info}</p>
                           ))}
                         </div>
                       )}
                       {!validationResult.valid && validationResult.warnings.length > 0 && (
-                        <div className="mt-2 text-yellow-600 dark:text-yellow-500">
+                        <div className="mt-2 text-yellow-600 dark:text-yellow-500 font-medium">
-                          <p className="font-medium text-xs uppercase mb-1">{t('dialog.warnings')}</p>
+                          <p className="font-bold text-[12px] uppercase mb-1">{t('dialog.warnings')}</p>
                           <ul className="list-disc list-inside space-y-0.5">
                             {validationResult.warnings.map((warn, i) => (
                               <li key={i}>{warn}</li>
@@ -844,19 +849,17 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
                 </div>
               )}
 
-              <Separator />
+              <Separator className="bg-black/10 dark:bg-white/10" />
 
-              <div className="flex justify-between">
+              <div className="flex justify-end pt-4">
-                <Button variant="outline" onClick={() => onSelectType(null)}>
+                <div className="flex gap-3">
-                  {t('dialog.back')}
-                </Button>
-                <div className="flex gap-2">
                   {/* Validation Button - Only for token-based channels for now */}
                   {meta?.connectionType === 'token' && (
                     <Button
                       variant="secondary"
                       onClick={handleValidate}
                       disabled={validating}
+                      className="rounded-full px-6 h-[42px] text-[13px] font-semibold bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 text-foreground shadow-sm"
                     >
                       {validating ? (
                         <>
@@ -874,6 +877,7 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
                   <Button
                     onClick={handleConnect}
                     disabled={connecting || !isFormValid()}
+                    className="rounded-full px-6 h-[42px] text-[13px] font-semibold bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border border-transparent transition-all"
                   >
                     {connecting ? (
                       <>
@@ -914,19 +918,19 @@ function ConfigField({ field, value, onChange, showSecret, onToggleSecret }: Con
   const isPassword = field.type === 'password';
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-2.5">
-      <Label htmlFor={field.key}>
+      <Label htmlFor={field.key} className="text-[14px] text-foreground/80 font-bold">
-        {t(field.label)}
+        {t(field.label.replace('channels:', ''))}
         {field.required && <span className="text-destructive ml-1">*</span>}
       </Label>
       <div className="flex gap-2">
         <Input
           id={field.key}
           type={isPassword && !showSecret ? 'password' : 'text'}
-          placeholder={field.placeholder ? t(field.placeholder) : undefined}
+          placeholder={field.placeholder ? t(field.placeholder.replace('channels:', '')) : undefined}
           value={value}
           onChange={(e) => onChange(e.target.value)}
-          className="font-mono text-sm"
+          className="h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"
         />
         {isPassword && (
           <Button
@@ -934,18 +938,19 @@ function ConfigField({ field, value, onChange, showSecret, onToggleSecret }: Con
             variant="outline"
             size="icon"
             onClick={onToggleSecret}
+            className="h-[44px] w-[44px] rounded-xl bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 text-muted-foreground hover:text-foreground shrink-0 shadow-sm"
           >
             {showSecret ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
           </Button>
         )}
       </div>
       {field.description && (
-        <p className="text-xs text-muted-foreground">
+        <p className="text-[13px] text-muted-foreground leading-relaxed">
-          {t(field.description)}
+          {t(field.description.replace('channels:', ''))}
         </p>
       )}
       {field.envVar && (
-        <p className="text-xs text-muted-foreground">
+        <p className="text-[12px] text-muted-foreground/70 font-mono">
           {t('dialog.envVar', { var: field.envVar })}
         </p>
       )}

src/pages/Chat/ChatInput.tsx

@@ -7,11 +7,12 @@
  * are sent with the message (no base64 over WebSocket).
  */
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { Send, Square, X, Paperclip, FileText, Film, Music, FileArchive, File, Loader2 } from 'lucide-react';
+import { SendHorizontal, Square, X, Paperclip, FileText, Film, Music, FileArchive, File, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { hostApiFetch } from '@/lib/host-api';
 import { invokeIpc } from '@/lib/api-client';
+import { cn } from '@/lib/utils';
 
 // ── Types ────────────────────────────────────────────────────────
 
@@ -31,6 +32,7 @@ interface ChatInputProps {
   onStop?: () => void;
   disabled?: boolean;
   sending?: boolean;
+  isEmpty?: boolean;
 }
 
 // ── Helpers ──────────────────────────────────────────────────────
@@ -77,7 +79,7 @@ function readFileAsBase64(file: globalThis.File): Promise<string> {
 
 // ── Component ────────────────────────────────────────────────────
 
-export function ChatInput({ onSend, onStop, disabled = false, sending = false }: ChatInputProps) {
+export function ChatInput({ onSend, onStop, disabled = false, sending = false, isEmpty = false }: ChatInputProps) {
   const [input, setInput] = useState('');
   const [attachments, setAttachments] = useState<FileAttachment[]>([]);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -326,15 +328,18 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
 
   return (
     <div
-      className="bg-background p-4"
+      className={cn(
+        "p-4 pb-6 w-full mx-auto transition-all duration-300",
+        isEmpty ? "max-w-3xl" : "max-w-4xl"
+      )}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <div className="max-w-4xl mx-auto">
+      <div className="w-full">
         {/* Attachment Previews */}
         {attachments.length > 0 && (
-          <div className="flex gap-2 mb-2 flex-wrap">
+          <div className="flex gap-2 mb-3 flex-wrap">
             {attachments.map((att) => (
               <AttachmentPreview
                 key={att.id}
@@ -346,13 +351,13 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
         )}
 
         {/* Input Row */}
-        <div className={`flex items-end gap-2 ${dragOver ? 'ring-2 ring-primary rounded-lg' : ''}`}>
+        <div className={`flex items-end gap-1.5 bg-white dark:bg-accent/50 rounded-[28px] shadow-sm border border-black/5 dark:border-white/10 p-1.5 transition-shadow ${dragOver ? 'ring-2 ring-primary' : 'focus-within:ring-1 focus-within:ring-black/5 dark:focus-within:ring-white/10'}`}>
 
           {/* Attach Button */}
           <Button
             variant="ghost"
             size="icon"
-            className="shrink-0 h-[44px] w-[44px]"
+            className="shrink-0 h-10 w-10 rounded-full text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10 hover:text-foreground transition-colors"
             onClick={pickFiles}
             disabled={disabled || sending}
             title="Attach files"
@@ -374,9 +379,9 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
                 isComposingRef.current = false;
               }}
               onPaste={handlePaste}
-              placeholder={disabled ? 'Gateway not connected...' : 'Message (Enter to send, Shift+Enter for new line)'}
+              placeholder={disabled ? 'Gateway not connected...' : ''}
               disabled={disabled}
-              className="min-h-[44px] max-h-[200px] resize-none pr-4"
+              className="min-h-[40px] max-h-[200px] resize-none border-0 focus-visible:ring-0 shadow-none bg-transparent py-2.5 px-2 text-[15px] placeholder:text-muted-foreground/60 leading-relaxed"
               rows={1}
             />
           </div>
@@ -386,24 +391,28 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
             onClick={sending ? handleStop : handleSend}
             disabled={sending ? !canStop : !canSend}
             size="icon"
-            className="shrink-0 h-[44px] w-[44px]"
+            className={`shrink-0 h-10 w-10 rounded-full transition-colors ${
-            variant={sending ? 'destructive' : 'default'}
+              (sending || canSend) 
+                ? 'bg-black/5 dark:bg-white/10 text-foreground hover:bg-black/10 dark:hover:bg-white/20' 
+                : 'text-muted-foreground/50 hover:bg-transparent bg-transparent'
+            }`}
+            variant="ghost"
             title={sending ? 'Stop' : 'Send'}
           >
             {sending ? (
-              <Square className="h-4 w-4" />
+              <Square className="h-4 w-4" fill="currentColor" />
             ) : (
-              <Send className="h-4 w-4" />
+              <SendHorizontal className="h-[18px] w-[18px]" strokeWidth={2} />
             )}
           </Button>
         </div>
-        <div className="mt-1 flex items-center justify-between gap-2 text-xs text-muted-foreground">
+        <div className="mt-2.5 flex items-center justify-between gap-2 text-[11px] text-muted-foreground/60 px-4">
           <span>Tip: switch sessions from the sidebar to keep context clean.</span>
           {hasFailedAttachments && (
             <Button
               variant="link"
               size="sm"
-              className="h-auto p-0 text-xs"
+              className="h-auto p-0 text-[11px]"
               onClick={() => {
                 setAttachments((prev) => prev.filter((att) => att.status !== 'error'));
                 void pickFiles();

src/pages/Chat/index.tsx

@@ -5,8 +5,7 @@
  * are in the toolbar; messages render with markdown + streaming.
  */
 import { useEffect, useRef, useState } from 'react';
-import { AlertCircle, Bot, Loader2, MessageSquare, Sparkles } from 'lucide-react';
+import { AlertCircle, Loader2, Sparkles } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
 import { useChatStore, type RawMessage } from '@/stores/chat';
 import { useGatewayStore } from '@/stores/gateway';
 import { LoadingSpinner } from '@/components/common/LoadingSpinner';
@@ -15,6 +14,7 @@ import { ChatInput } from './ChatInput';
 import { ChatToolbar } from './ChatToolbar';
 import { extractImages, extractText, extractThinking, extractToolUse } from './message-utils';
 import { useTranslation } from 'react-i18next';
+import { cn } from '@/lib/utils';
 
 export function Chat() {
   const { t } = useTranslation('chat');
@@ -105,8 +105,10 @@ export function Chat() {
   const shouldRenderStreaming = sending && (hasStreamText || hasStreamThinking || hasStreamTools || hasStreamImages || hasStreamToolStatus);
   const hasAnyStreamContent = hasStreamText || hasStreamThinking || hasStreamTools || hasStreamImages || hasStreamToolStatus;
 
+  const isEmpty = messages.length === 0 && !loading && !sending;
+
   return (
-    <div className="flex flex-col -m-6" style={{ height: 'calc(100vh - 2.5rem)' }}>
+    <div className={cn("flex flex-col -m-6 transition-colors duration-500 dark:bg-background")} style={{ height: 'calc(100vh - 2.5rem)' }}>
       {/* Toolbar */}
       <div className="flex shrink-0 items-center justify-end px-4 py-2">
         <ChatToolbar />
@@ -116,10 +118,10 @@ export function Chat() {
       <div className="flex-1 overflow-y-auto px-4 py-4">
         <div className="max-w-4xl mx-auto space-y-4">
           {loading && !sending ? (
-            <div className="flex h-full items-center justify-center py-20">
+            <div className="flex h-[60vh] items-center justify-center">
               <LoadingSpinner size="lg" />
             </div>
-          ) : messages.length === 0 && !sending ? (
+          ) : isEmpty ? (
             <WelcomeScreen />
           ) : (
             <>
@@ -193,6 +195,7 @@ export function Chat() {
         onStop={abortRun}
         disabled={!isGatewayRunning}
         sending={sending}
+        isEmpty={isEmpty}
       />
     </div>
   );
@@ -201,29 +204,23 @@ export function Chat() {
 // ── Welcome Screen ──────────────────────────────────────────────
 
 function WelcomeScreen() {
-  const { t } = useTranslation('chat');
   return (
-    <div className="flex flex-col items-center justify-center text-center py-20">
+    <div className="flex flex-col items-center justify-center text-center h-[60vh]">
-      <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mb-6">
+      <h1 className="text-6xl md:text-7xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
-        <Bot className="h-8 w-8 text-white" />
+        Welcome
-      </div>
+      </h1>
-      <h2 className="text-2xl font-bold mb-2">{t('welcome.title')}</h2>
+      <p className="text-[17px] text-foreground/80 mb-8 font-medium">
-      <p className="text-muted-foreground mb-8 max-w-md">
+        Your AI assistant is ready. Start a conversation below.
-        {t('welcome.subtitle')}
       </p>
 
-      <div className="grid grid-cols-2 gap-4 max-w-lg w-full">
+      <div className="flex flex-wrap items-center justify-center gap-2.5 max-w-lg w-full">
-        {[
+        {['Ask Questions', 'Creative Tasks', 'Brainstorming'].map((label, i) => (
-          { icon: MessageSquare, title: t('welcome.askQuestions'), desc: t('welcome.askQuestionsDesc') },
+          <button 
-          { icon: Sparkles, title: t('welcome.creativeTasks'), desc: t('welcome.creativeTasksDesc') },
+            key={i} 
-        ].map((item, i) => (
+            className="px-4 py-1.5 rounded-full border border-black/10 dark:border-white/10 text-[13px] font-medium text-foreground/70 hover:bg-black/5 dark:hover:bg-white/5 transition-colors bg-black/[0.02]"
-          <Card key={i} className="text-left">
+          >
-            <CardContent className="p-4">
+            {label}
-              <item.icon className="h-6 w-6 text-primary mb-2" />
+          </button>
-              <h3 className="font-medium">{item.title}</h3>
-              <p className="text-sm text-muted-foreground">{item.desc}</p>
-            </CardContent>
-          </Card>
         ))}
       </div>
     </div>

src/pages/Cron/index.tsx

@@ -7,9 +7,7 @@ import {
   Plus,
   Clock,
   Play,
-  Pause,
   Trash2,
-  Edit,
   RefreshCw,
   X,
   Calendar,
@@ -20,10 +18,10 @@ import {
   Loader2,
   Timer,
   History,
+  Pause,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
 import { Switch } from '@/components/ui/switch';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -236,43 +234,45 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
 
   return (
     <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" onClick={onClose}>
-      <Card className="w-full max-w-lg max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+      <Card className="w-full max-w-lg max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-[#1a1a19] overflow-hidden" onClick={(e) => e.stopPropagation()}>
-        <CardHeader className="flex flex-row items-start justify-between">
+        <CardHeader className="flex flex-row items-start justify-between pb-2 shrink-0">
           <div>
-            <CardTitle>{job ? t('dialog.editTitle') : t('dialog.createTitle')}</CardTitle>
+            <CardTitle className="text-2xl font-serif font-normal">{job ? t('dialog.editTitle') : t('dialog.createTitle')}</CardTitle>
-            <CardDescription>{t('dialog.description')}</CardDescription>
+            <CardDescription className="text-[15px] mt-1 text-foreground/70">{t('dialog.description')}</CardDescription>
           </div>
-          <Button variant="ghost" size="icon" onClick={onClose}>
+          <Button variant="ghost" size="icon" onClick={onClose} className="rounded-full h-8 w-8 -mr-2 -mt-2 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5">
             <X className="h-4 w-4" />
           </Button>
         </CardHeader>
-        <CardContent className="space-y-4">
+        <CardContent className="space-y-6 pt-4 overflow-y-auto flex-1 p-6">
           {/* Name */}
-          <div className="space-y-2">
+          <div className="space-y-2.5">
-            <Label htmlFor="name">{t('dialog.taskName')}</Label>
+            <Label htmlFor="name" className="text-[14px] text-foreground/80 font-bold">{t('dialog.taskName')}</Label>
             <Input
               id="name"
               placeholder={t('dialog.taskNamePlaceholder')}
               value={name}
               onChange={(e) => setName(e.target.value)}
+              className="h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"
             />
           </div>
 
           {/* Message */}
-          <div className="space-y-2">
+          <div className="space-y-2.5">
-            <Label htmlFor="message">{t('dialog.message')}</Label>
+            <Label htmlFor="message" className="text-[14px] text-foreground/80 font-bold">{t('dialog.message')}</Label>
             <Textarea
               id="message"
               placeholder={t('dialog.messagePlaceholder')}
               value={message}
               onChange={(e) => setMessage(e.target.value)}
               rows={3}
+              className="rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40 resize-none"
             />
           </div>
 
           {/* Schedule */}
-          <div className="space-y-2">
+          <div className="space-y-2.5">
-            <Label>{t('dialog.schedule')}</Label>
+            <Label className="text-[14px] text-foreground/80 font-bold">{t('dialog.schedule')}</Label>
             {!useCustom ? (
               <div className="grid grid-cols-2 gap-2">
                 {schedulePresets.map((preset) => (
@@ -282,9 +282,14 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
                     variant={schedule === preset.value ? 'default' : 'outline'}
                     size="sm"
                     onClick={() => setSchedule(preset.value)}
-                    className="justify-start"
+                    className={cn(
+                      "justify-start h-10 rounded-xl font-medium text-[13px] transition-all",
+                      schedule === preset.value 
+                        ? "bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border-transparent" 
+                        : "bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground"
+                    )}
                   >
-                    <Timer className="h-4 w-4 mr-2" />
+                    <Timer className="h-4 w-4 mr-2 opacity-70" />
                     {t(`presets.${preset.key}` as const)}
                   </Button>
                 ))}
@@ -294,27 +299,30 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
                 placeholder={t('dialog.cronPlaceholder')}
                 value={customSchedule}
                 onChange={(e) => setCustomSchedule(e.target.value)}
+                className="h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"
               />
             )}
-            <Button
+            <div className="flex items-center justify-between mt-2">
-              type="button"
+              <p className="text-[12px] text-muted-foreground/80 font-medium">
-              variant="ghost"
+                {schedulePreview ? `${t('card.next')}: ${schedulePreview}` : t('dialog.cronPlaceholder')}
-              size="sm"
+              </p>
-              onClick={() => setUseCustom(!useCustom)}
+              <Button
-              className="text-xs"
+                type="button"
-            >
+                variant="ghost"
-              {useCustom ? t('dialog.usePresets') : t('dialog.useCustomCron')}
+                size="sm"
-            </Button>
+                onClick={() => setUseCustom(!useCustom)}
-            <p className="text-xs text-muted-foreground">
+                className="text-[12px] h-7 px-2 text-foreground/60 hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5 rounded-lg"
-              {schedulePreview ? `${t('card.next')}: ${schedulePreview}` : t('dialog.cronPlaceholder')}
+              >
-            </p>
+                {useCustom ? t('dialog.usePresets') : t('dialog.useCustomCron')}
+              </Button>
+            </div>
           </div>
 
           {/* Enabled */}
-          <div className="flex items-center justify-between">
+          <div className="flex items-center justify-between bg-[#eeece3] dark:bg-[#151514] p-4 rounded-2xl shadow-sm border border-black/5 dark:border-white/5">
             <div>
-              <Label>{t('dialog.enableImmediately')}</Label>
+              <Label className="text-[14px] text-foreground/80 font-bold">{t('dialog.enableImmediately')}</Label>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-[13px] text-muted-foreground mt-0.5">
                 {t('dialog.enableImmediatelyDesc')}
               </p>
             </div>
@@ -322,11 +330,11 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
           </div>
 
           {/* Actions */}
-          <div className="flex justify-end gap-2 pt-4 border-t">
+          <div className="flex justify-end gap-3 pt-4">
-            <Button variant="outline" onClick={onClose}>
+            <Button variant="outline" onClick={onClose} className="rounded-full px-6 h-[42px] text-[13px] font-semibold border-black/20 dark:border-white/20 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground shadow-sm">
               {t('common:actions.cancel', 'Cancel')}
             </Button>
-            <Button onClick={handleSubmit} disabled={saving}>
+            <Button onClick={handleSubmit} disabled={saving} className="rounded-full px-6 h-[42px] text-[13px] font-semibold bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border border-transparent transition-all">
               {saving ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
@@ -359,7 +367,8 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
   const { t } = useTranslation('cron');
   const [triggering, setTriggering] = useState(false);
 
-  const handleTrigger = async () => {
+  const handleTrigger = async (e: React.MouseEvent) => {
+    e.stopPropagation();
     setTriggering(true);
     try {
       await onTrigger();
@@ -372,81 +381,79 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
     }
   };
 
-  const handleDelete = () => {
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
     onDelete();
   };
 
   return (
-    <Card className={cn(
+    <div 
-      'transition-colors',
+      className="group flex flex-col p-5 rounded-2xl bg-transparent border border-transparent hover:bg-black/5 dark:hover:bg-white/5 transition-all relative overflow-hidden cursor-pointer"
-      job.enabled && 'border-primary/30'
+      onClick={onEdit}
-    )}>
+    >
-      <CardHeader className="pb-3">
+      <div className="flex items-start justify-between mb-4">
-        <div className="flex items-start justify-between">
+        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-3">
+          <div className="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-foreground bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-full shadow-sm group-hover:scale-105 transition-transform">
-            <div className={cn(
+            <Clock className={cn("h-5 w-5", job.enabled ? "text-foreground" : "text-muted-foreground")} />
-              'rounded-full p-2',
-              job.enabled
-                ? 'bg-green-100 dark:bg-green-900/30'
-                : 'bg-muted'
-            )}>
-              <Clock className={cn(
-                'h-5 w-5',
-                job.enabled ? 'text-green-600' : 'text-muted-foreground'
-              )} />
-            </div>
-            <div>
-              <CardTitle className="text-lg">{job.name}</CardTitle>
-              <CardDescription className="flex items-center gap-2">
-                <Timer className="h-3 w-3" />
-                {parseCronSchedule(job.schedule, t)}
-              </CardDescription>
-            </div>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex flex-col min-w-0">
-            <Badge variant={job.enabled ? 'success' : 'secondary'}>
+            <div className="flex items-center gap-2 mb-1">
-              {job.enabled ? t('stats.active') : t('stats.paused')}
+              <h3 className="text-[16px] font-semibold text-foreground truncate">{job.name}</h3>
-            </Badge>
+              <div 
-            <Switch
+                className={cn(
-              checked={job.enabled}
+                  "w-2 h-2 rounded-full shrink-0",
-              onCheckedChange={onToggle}
+                  job.enabled ? "bg-green-500" : "bg-muted-foreground"
-            />
+                )} 
+                title={job.enabled ? t('stats.active') : t('stats.paused')}
+              />
+            </div>
+            <p className="text-[13px] text-muted-foreground flex items-center gap-1.5">
+              <Timer className="h-3.5 w-3.5" />
+              {parseCronSchedule(job.schedule, t)}
+            </p>
           </div>
         </div>
-      </CardHeader>
+        
-      <CardContent className="space-y-4">
+        <div className="flex items-center gap-2" onClick={e => e.stopPropagation()}>
-        {/* Message Preview */}
+          <Switch
-        <div className="flex items-start gap-2 p-3 rounded-lg bg-muted/50">
+            checked={job.enabled}
-          <MessageSquare className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
+            onCheckedChange={onToggle}
-          <p className="text-sm text-muted-foreground line-clamp-2">
+          />
+        </div>
+      </div>
+      
+      <div className="flex-1 flex flex-col justify-end mt-2 pl-[62px]">
+        <div className="flex items-start gap-2 mb-3">
+          <MessageSquare className="h-3.5 w-3.5 mt-0.5 text-muted-foreground shrink-0" />
+          <p className="text-[13.5px] text-muted-foreground line-clamp-2 leading-[1.5]">
             {job.message}
           </p>
         </div>
 
         {/* Metadata */}
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-[12px] text-muted-foreground/80 font-medium mb-3">
           {job.target && (
-            <span className="flex items-center gap-1">
+            <span className="flex items-center gap-1.5">
               {CHANNEL_ICONS[job.target.channelType as ChannelType]}
               {job.target.channelName}
             </span>
           )}
 
           {job.lastRun && (
-            <span className="flex items-center gap-1">
+            <span className="flex items-center gap-1.5">
-              <History className="h-4 w-4" />
+              <History className="h-3.5 w-3.5" />
               {t('card.last')}: {formatRelativeTime(job.lastRun.time)}
               {job.lastRun.success ? (
-                <CheckCircle2 className="h-4 w-4 text-green-500" />
+                <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
               ) : (
-                <XCircle className="h-4 w-4 text-red-500" />
+                <XCircle className="h-3.5 w-3.5 text-red-500" />
               )}
             </span>
           )}
 
           {job.nextRun && job.enabled && (
-            <span className="flex items-center gap-1">
+            <span className="flex items-center gap-1.5">
-              <Calendar className="h-4 w-4" />
+              <Calendar className="h-3.5 w-3.5" />
               {t('card.next')}: {new Date(job.nextRun).toLocaleString()}
             </span>
           )}
@@ -454,38 +461,40 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
 
         {/* Last Run Error */}
         {job.lastRun && !job.lastRun.success && job.lastRun.error && (
-          <div className="flex items-start gap-2 p-2 rounded-lg bg-red-50 dark:bg-red-900/20 text-sm text-red-600 dark:text-red-400">
+          <div className="flex items-start gap-2 p-2.5 mb-3 rounded-xl bg-destructive/10 border border-destructive/20 text-[13px] text-destructive">
             <AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
-            <span>{job.lastRun.error}</span>
+            <span className="line-clamp-2">{job.lastRun.error}</span>
           </div>
         )}
 
         {/* Actions */}
-        <div className="flex justify-end gap-1 pt-2 border-t">
+        <div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity mt-auto">
           <Button
             variant="ghost"
             size="sm"
             onClick={handleTrigger}
             disabled={triggering}
+            className="h-8 px-3 text-foreground/70 hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5 rounded-lg text-[13px] font-medium transition-colors"
           >
             {triggering ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
+              <Loader2 className="h-3.5 w-3.5 animate-spin mr-1.5" />
             ) : (
-              <Play className="h-4 w-4" />
+              <Play className="h-3.5 w-3.5 mr-1.5" />
             )}
-            <span className="ml-1">{t('card.runNow')}</span>
+            {t('card.runNow')}
           </Button>
-          <Button variant="ghost" size="sm" onClick={onEdit}>
+          <Button 
-            <Edit className="h-4 w-4" />
+            variant="ghost" 
-            <span className="ml-1">{t('common:actions.edit', 'Edit')}</span>
+            size="sm" 
-          </Button>
+            onClick={handleDelete}
-          <Button variant="ghost" size="sm" onClick={handleDelete}>
+            className="h-8 px-3 text-destructive/70 hover:text-destructive hover:bg-destructive/10 rounded-lg text-[13px] font-medium transition-colors"
-            <Trash2 className="h-4 w-4 text-destructive" />
+          >
-            <span className="ml-1 text-destructive">{t('common:actions.delete', 'Delete')}</span>
+            <Trash2 className="h-3.5 w-3.5 mr-1.5" />
+            {t('common:actions.delete', 'Delete')}
           </Button>
         </div>
-      </CardContent>
+      </div>
-    </Card>
+    </div>
   );
 }
 
@@ -532,156 +541,162 @@ export function Cron() {
 
   if (loading) {
     return (
-      <div className="flex h-96 items-center justify-center">
+      <div className="flex flex-col -m-6 dark:bg-background min-h-[calc(100vh-2.5rem)] items-center justify-center">
         <LoadingSpinner size="lg" />
       </div>
     );
   }
 
   return (
-    <div className="space-y-6">
+    <div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
-      {/* Header */}
+      <div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16">
-      <div className="flex items-center justify-between">
+        {/* Header */}
-        <div>
+        <div className="flex flex-col md:flex-row md:items-start justify-between mb-12 shrink-0 gap-4">
-          <h1 className="text-2xl font-bold">{t('title')}</h1>
+          <div>
-          <p className="text-muted-foreground">
+            <h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
-            {t('subtitle')}
+              {t('title')}
-          </p>
+            </h1>
-        </div>
+            <p className="text-[17px] text-foreground/80 font-medium">
-        <div className="flex gap-2">
+              {t('subtitle')}
-          <Button variant="outline" onClick={fetchJobs} disabled={!isGatewayRunning}>
-            <RefreshCw className="h-4 w-4 mr-2" />
-            {t('refresh')}
-          </Button>
-          <Button
-            onClick={() => {
-              setEditingJob(undefined);
-              setShowDialog(true);
-            }}
-            disabled={!isGatewayRunning}
-          >
-            <Plus className="h-4 w-4 mr-2" />
-            {t('newTask')}
-          </Button>
-        </div>
-      </div>
-
-      {/* Gateway Warning */}
-      {!isGatewayRunning && (
-        <Card className="border-yellow-500 bg-yellow-50 dark:bg-yellow-900/10">
-          <CardContent className="py-4 flex items-center gap-3">
-            <AlertCircle className="h-5 w-5 text-yellow-600" />
-            <span className="text-yellow-700 dark:text-yellow-400">
-              {t('gatewayWarning')}
-            </span>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Statistics */}
-      <div className="grid grid-cols-4 gap-4">
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="rounded-full bg-primary/10 p-3">
-                <Clock className="h-6 w-6 text-primary" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold">{jobs.length}</p>
-                <p className="text-sm text-muted-foreground">{t('stats.total')}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="rounded-full bg-green-100 p-3 dark:bg-green-900/30">
-                <Play className="h-6 w-6 text-green-600" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold">{activeJobs.length}</p>
-                <p className="text-sm text-muted-foreground">{t('stats.active')}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="rounded-full bg-yellow-100 p-3 dark:bg-yellow-900/30">
-                <Pause className="h-6 w-6 text-yellow-600" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold">{pausedJobs.length}</p>
-                <p className="text-sm text-muted-foreground">{t('stats.paused')}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-4">
-              <div className="rounded-full bg-red-100 p-3 dark:bg-red-900/30">
-                <XCircle className="h-6 w-6 text-red-600" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold">{failedJobs.length}</p>
-                <p className="text-sm text-muted-foreground">{t('stats.failed')}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Error Display */}
-      {error && (
-        <Card className="border-destructive">
-          <CardContent className="py-4 text-destructive flex items-center gap-2">
-            <AlertCircle className="h-5 w-5" />
-            {error}
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Jobs List */}
-      {jobs.length === 0 ? (
-        <Card>
-          <CardContent className="flex flex-col items-center justify-center py-12">
-            <Clock className="h-12 w-12 text-muted-foreground mb-4" />
-            <h3 className="text-lg font-medium mb-2">{t('empty.title')}</h3>
-            <p className="text-muted-foreground text-center mb-4 max-w-md">
-              {t('empty.description')}
             </p>
+          </div>
+          <div className="flex items-center gap-3 md:mt-2">
+            <Button
+              variant="outline"
+              onClick={fetchJobs}
+              disabled={!isGatewayRunning}
+              className="h-9 text-[13px] font-medium rounded-full px-4 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 shadow-none text-foreground/80 hover:text-foreground transition-colors"
+            >
+              <RefreshCw className="h-3.5 w-3.5 mr-2" />
+              {t('refresh')}
+            </Button>
             <Button
               onClick={() => {
                 setEditingJob(undefined);
                 setShowDialog(true);
               }}
               disabled={!isGatewayRunning}
+              className="h-9 text-[13px] font-medium rounded-full px-4 shadow-none"
             >
-              <Plus className="h-4 w-4 mr-2" />
+              <Plus className="h-3.5 w-3.5 mr-2" />
-              {t('empty.create')}
+              {t('newTask')}
             </Button>
-          </CardContent>
+          </div>
-        </Card>
-      ) : (
-        <div className="space-y-4">
-          {jobs.map((job) => (
-            <CronJobCard
-              key={job.id}
-              job={job}
-              onToggle={(enabled) => handleToggle(job.id, enabled)}
-              onEdit={() => {
-                setEditingJob(job);
-                setShowDialog(true);
-              }}
-              onDelete={() => setJobToDelete({ id: job.id })}
-              onTrigger={() => triggerJob(job.id)}
-            />
-          ))}
         </div>
-      )}
+
+        {/* Content Area */}
+        <div className="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 -mr-2">
+          {/* Gateway Warning */}
+          {!isGatewayRunning && (
+            <div className="mb-8 p-4 rounded-xl border border-yellow-500/50 bg-yellow-500/10 flex items-center gap-3">
+              <AlertCircle className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
+              <span className="text-yellow-700 dark:text-yellow-400 text-sm font-medium">
+                {t('gatewayWarning')}
+              </span>
+            </div>
+          )}
+
+          {/* Error Display */}
+          {error && (
+            <div className="mb-8 p-4 rounded-xl border border-destructive/50 bg-destructive/10 flex items-center gap-3">
+              <AlertCircle className="h-5 w-5 text-destructive" />
+              <span className="text-destructive text-sm font-medium">
+                {error}
+              </span>
+            </div>
+          )}
+
+          {/* Statistics */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+            <div className="p-5 rounded-[24px] bg-black/5 dark:bg-white/5 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden group hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
+              <div className="flex items-center justify-between">
+                <div className="h-11 w-11 rounded-full bg-primary/10 flex items-center justify-center">
+                  <Clock className="h-5 w-5 text-primary" />
+                </div>
+              </div>
+              <div className="mt-4 flex items-baseline gap-3">
+                <p className="text-[40px] leading-none font-serif text-foreground">{jobs.length}</p>
+                <p className="text-[14px] font-medium text-muted-foreground">{t('stats.total')}</p>
+              </div>
+            </div>
+            
+            <div className="p-5 rounded-[24px] bg-black/5 dark:bg-white/5 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden group hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
+              <div className="flex items-center justify-between">
+                <div className="h-11 w-11 rounded-full bg-green-500/10 flex items-center justify-center">
+                  <Play className="h-5 w-5 text-green-600 dark:text-green-500 ml-0.5" />
+                </div>
+              </div>
+              <div className="mt-4 flex items-baseline gap-3">
+                <p className="text-[40px] leading-none font-serif text-foreground">{activeJobs.length}</p>
+                <p className="text-[14px] font-medium text-muted-foreground">{t('stats.active')}</p>
+              </div>
+            </div>
+
+            <div className="p-5 rounded-[24px] bg-black/5 dark:bg-white/5 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden group hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
+              <div className="flex items-center justify-between">
+                <div className="h-11 w-11 rounded-full bg-yellow-500/10 flex items-center justify-center">
+                  <Pause className="h-5 w-5 text-yellow-600 dark:text-yellow-500" />
+                </div>
+              </div>
+              <div className="mt-4 flex items-baseline gap-3">
+                <p className="text-[40px] leading-none font-serif text-foreground">{pausedJobs.length}</p>
+                <p className="text-[14px] font-medium text-muted-foreground">{t('stats.paused')}</p>
+              </div>
+            </div>
+
+            <div className="p-5 rounded-[24px] bg-black/5 dark:bg-white/5 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden group hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
+              <div className="flex items-center justify-between">
+                <div className="h-11 w-11 rounded-full bg-destructive/10 flex items-center justify-center">
+                  <XCircle className="h-5 w-5 text-destructive" />
+                </div>
+              </div>
+              <div className="mt-4 flex items-baseline gap-3">
+                <p className="text-[40px] leading-none font-serif text-foreground">{failedJobs.length}</p>
+                <p className="text-[14px] font-medium text-muted-foreground">{t('stats.failed')}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Jobs List */}
+          {jobs.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-20 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
+              <Clock className="h-10 w-10 mb-4 opacity-50" />
+              <h3 className="text-lg font-medium mb-2 text-foreground">{t('empty.title')}</h3>
+              <p className="text-[14px] text-center mb-6 max-w-md">
+                {t('empty.description')}
+              </p>
+              <Button
+                onClick={() => {
+                  setEditingJob(undefined);
+                  setShowDialog(true);
+                }}
+                disabled={!isGatewayRunning}
+                className="rounded-full px-6 h-10"
+              >
+                <Plus className="h-4 w-4 mr-2" />
+                {t('empty.create')}
+              </Button>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+              {jobs.map((job) => (
+                <CronJobCard
+                  key={job.id}
+                  job={job}
+                  onToggle={(enabled) => handleToggle(job.id, enabled)}
+                  onEdit={() => {
+                    setEditingJob(job);
+                    setShowDialog(true);
+                  }}
+                  onDelete={() => setJobToDelete({ id: job.id })}
+                  onTrigger={() => triggerJob(job.id)}
+                />
+              ))}
+            </div>
+          )}
+
+        </div>
+      </div>
 
       {/* Create/Edit Dialog */}
       {showDialog && (

src/pages/Dashboard/index.tsx

@@ -12,8 +12,6 @@ import {
   Settings,
   Plus,
   Terminal,
-  ChevronLeft,
-  ChevronRight,
   Wrench,
 } from 'lucide-react';
 import { Link } from 'react-router-dom';
@@ -30,23 +28,6 @@ import { hostApiFetch } from '@/lib/host-api';
 import { trackUiEvent } from '@/lib/telemetry';
 import { useTranslation } from 'react-i18next';
 
-type UsageHistoryEntry = {
-  timestamp: string;
-  sessionId: string;
-  agentId: string;
-  model?: string;
-  provider?: string;
-  inputTokens: number;
-  outputTokens: number;
-  cacheReadTokens: number;
-  cacheWriteTokens: number;
-  totalTokens: number;
-  costUsd?: number;
-};
-
-type UsageWindow = '7d' | '30d' | 'all';
-type UsageGroupBy = 'model' | 'day';
-
 export function Dashboard() {
   const { t } = useTranslation('dashboard');
   const gatewayStatus = useGatewayStore((state) => state.status);
@@ -56,10 +37,6 @@ export function Dashboard() {
 
   const isGatewayRunning = gatewayStatus.state === 'running';
   const [uptime, setUptime] = useState(0);
-  const [usageHistory, setUsageHistory] = useState<UsageHistoryEntry[]>([]);
-  const [usageGroupBy, setUsageGroupBy] = useState<UsageGroupBy>('model');
-  const [usageWindow, setUsageWindow] = useState<UsageWindow>('7d');
-  const [usagePage, setUsagePage] = useState(1);
 
   // Track page view on mount only.
   useEffect(() => {
@@ -71,28 +48,12 @@ export function Dashboard() {
     if (isGatewayRunning) {
       fetchChannels();
       fetchSkills();
-      hostApiFetch<UsageHistoryEntry[]>('/api/usage/recent-token-history')
-        .then((entries) => {
-          setUsageHistory(Array.isArray(entries) ? entries : []);
-          setUsagePage(1);
-        })
-        .catch(() => {
-          setUsageHistory([]);
-        });
     }
   }, [fetchChannels, fetchSkills, isGatewayRunning]);
 
   // Calculate statistics safely
   const connectedChannels = Array.isArray(channels) ? channels.filter((c) => c.status === 'connected').length : 0;
   const enabledSkills = Array.isArray(skills) ? skills.filter((s) => s.enabled).length : 0;
-  const visibleUsageHistory = isGatewayRunning ? usageHistory : [];
-  const filteredUsageHistory = filterUsageHistoryByWindow(visibleUsageHistory, usageWindow);
-  const usageGroups = groupUsageHistory(filteredUsageHistory, usageGroupBy);
-  const usagePageSize = 5;
-  const usageTotalPages = Math.max(1, Math.ceil(filteredUsageHistory.length / usagePageSize));
-  const safeUsagePage = Math.min(usagePage, usageTotalPages);
-  const pagedUsageHistory = filteredUsageHistory.slice((safeUsagePage - 1) * usagePageSize, safeUsagePage * usagePageSize);
-  const usageLoading = isGatewayRunning && visibleUsageHistory.length === 0;
 
   // Update uptime periodically
   useEffect(() => {
@@ -339,160 +300,6 @@ export function Dashboard() {
           </CardContent>
         </Card>
       </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-lg">{t('recentTokenHistory.title')}</CardTitle>
-          <CardDescription>{t('recentTokenHistory.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {usageLoading ? (
-            <FeedbackState state="loading" title={t('recentTokenHistory.loading')} />
-          ) : visibleUsageHistory.length === 0 ? (
-            <FeedbackState state="empty" title={t('recentTokenHistory.empty')} />
-          ) : filteredUsageHistory.length === 0 ? (
-            <FeedbackState state="empty" title={t('recentTokenHistory.emptyForWindow')} />
-          ) : (
-            <div className="space-y-5">
-              <div className="flex flex-wrap items-center justify-between gap-3">
-                <div className="flex flex-wrap items-center gap-3">
-                  <div className="flex rounded-lg border p-1">
-                    <Button
-                      variant={usageGroupBy === 'model' ? 'secondary' : 'ghost'}
-                      size="sm"
-                      onClick={() => {
-                        setUsageGroupBy('model');
-                        setUsagePage(1);
-                      }}
-                    >
-                      {t('recentTokenHistory.groupByModel')}
-                    </Button>
-                    <Button
-                      variant={usageGroupBy === 'day' ? 'secondary' : 'ghost'}
-                      size="sm"
-                      onClick={() => {
-                        setUsageGroupBy('day');
-                        setUsagePage(1);
-                      }}
-                    >
-                      {t('recentTokenHistory.groupByTime')}
-                    </Button>
-                  </div>
-                  <div className="flex rounded-lg border p-1">
-                    <Button
-                      variant={usageWindow === '7d' ? 'secondary' : 'ghost'}
-                      size="sm"
-                      onClick={() => {
-                        setUsageWindow('7d');
-                        setUsagePage(1);
-                      }}
-                    >
-                      {t('recentTokenHistory.last7Days')}
-                    </Button>
-                    <Button
-                      variant={usageWindow === '30d' ? 'secondary' : 'ghost'}
-                      size="sm"
-                      onClick={() => {
-                        setUsageWindow('30d');
-                        setUsagePage(1);
-                      }}
-                    >
-                      {t('recentTokenHistory.last30Days')}
-                    </Button>
-                    <Button
-                      variant={usageWindow === 'all' ? 'secondary' : 'ghost'}
-                      size="sm"
-                      onClick={() => {
-                        setUsageWindow('all');
-                        setUsagePage(1);
-                      }}
-                    >
-                      {t('recentTokenHistory.allTime')}
-                    </Button>
-                  </div>
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  {t('recentTokenHistory.showingLast', { count: filteredUsageHistory.length })}
-                </p>
-              </div>
-
-              <UsageBarChart
-                groups={usageGroups}
-                emptyLabel={t('recentTokenHistory.empty')}
-                totalLabel={t('recentTokenHistory.totalTokens')}
-                inputLabel={t('recentTokenHistory.inputShort')}
-                outputLabel={t('recentTokenHistory.outputShort')}
-                cacheLabel={t('recentTokenHistory.cacheShort')}
-              />
-
-              <div className="space-y-3">
-                {pagedUsageHistory.map((entry) => (
-                  <div
-                    key={`${entry.sessionId}-${entry.timestamp}`}
-                    className="rounded-lg border p-3"
-                  >
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="min-w-0">
-                        <p className="font-medium truncate">
-                          {entry.model || t('recentTokenHistory.unknownModel')}
-                        </p>
-                        <p className="text-xs text-muted-foreground truncate">
-                          {[entry.provider, entry.agentId, entry.sessionId].filter(Boolean).join(' • ')}
-                        </p>
-                      </div>
-                      <div className="text-right shrink-0">
-                        <p className="font-semibold">{formatTokenCount(entry.totalTokens)}</p>
-                        <p className="text-xs text-muted-foreground">
-                          {formatUsageTimestamp(entry.timestamp)}
-                        </p>
-                      </div>
-                    </div>
-                    <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
-                      <span>{t('recentTokenHistory.input', { value: formatTokenCount(entry.inputTokens) })}</span>
-                      <span>{t('recentTokenHistory.output', { value: formatTokenCount(entry.outputTokens) })}</span>
-                      {entry.cacheReadTokens > 0 && (
-                        <span>{t('recentTokenHistory.cacheRead', { value: formatTokenCount(entry.cacheReadTokens) })}</span>
-                      )}
-                      {entry.cacheWriteTokens > 0 && (
-                        <span>{t('recentTokenHistory.cacheWrite', { value: formatTokenCount(entry.cacheWriteTokens) })}</span>
-                      )}
-                      {typeof entry.costUsd === 'number' && Number.isFinite(entry.costUsd) && (
-                        <span>{t('recentTokenHistory.cost', { amount: entry.costUsd.toFixed(4) })}</span>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              <div className="flex items-center justify-between gap-3 border-t pt-3">
-                <p className="text-xs text-muted-foreground">
-                  {t('recentTokenHistory.page', { current: safeUsagePage, total: usageTotalPages })}
-                </p>
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setUsagePage((page) => Math.max(1, page - 1))}
-                    disabled={safeUsagePage <= 1}
-                  >
-                    <ChevronLeft className="h-4 w-4 mr-1" />
-                    {t('recentTokenHistory.prev')}
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setUsagePage((page) => Math.min(usageTotalPages, page + 1))}
-                    disabled={safeUsagePage >= usageTotalPages}
-                  >
-                    {t('recentTokenHistory.next')}
-                    <ChevronRight className="h-4 w-4 ml-1" />
-                  </Button>
-                </div>
-              </div>
-            </div>
-          )}
-        </CardContent>
-      </Card>
     </div>
   );
 }
@@ -514,183 +321,4 @@ function formatUptime(seconds: number): string {
   }
 }
 
-function formatTokenCount(value: number): string {
-  return Intl.NumberFormat().format(value);
-}
-
-function formatUsageTimestamp(timestamp: string): string {
-  const date = new Date(timestamp);
-  if (Number.isNaN(date.getTime())) return timestamp;
-  return new Intl.DateTimeFormat(undefined, {
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  }).format(date);
-}
-
-function groupUsageHistory(
-  entries: UsageHistoryEntry[],
-  groupBy: UsageGroupBy,
-): Array<{
-  label: string;
-  totalTokens: number;
-  inputTokens: number;
-  outputTokens: number;
-  cacheTokens: number;
-  sortKey: number | string;
-}> {
-  const grouped = new Map<string, {
-    label: string;
-    totalTokens: number;
-    inputTokens: number;
-    outputTokens: number;
-    cacheTokens: number;
-    sortKey: number | string;
-  }>();
-
-  for (const entry of entries) {
-    const label = groupBy === 'model'
-      ? (entry.model || 'Unknown')
-      : formatUsageDay(entry.timestamp);
-    const current = grouped.get(label) ?? {
-      label,
-      totalTokens: 0,
-      inputTokens: 0,
-      outputTokens: 0,
-      cacheTokens: 0,
-      sortKey: groupBy === 'day' ? getUsageDaySortKey(entry.timestamp) : label.toLowerCase(),
-    };
-    current.totalTokens += entry.totalTokens;
-    current.inputTokens += entry.inputTokens;
-    current.outputTokens += entry.outputTokens;
-    current.cacheTokens += entry.cacheReadTokens + entry.cacheWriteTokens;
-    grouped.set(label, current);
-  }
-
-  return Array.from(grouped.values())
-    .sort((a, b) => {
-      if (groupBy === 'day') {
-        return Number(a.sortKey) - Number(b.sortKey);
-      }
-      return b.totalTokens - a.totalTokens;
-    })
-    .slice(0, 8);
-}
-
-function formatUsageDay(timestamp: string): string {
-  const date = new Date(timestamp);
-  if (Number.isNaN(date.getTime())) return timestamp;
-  return new Intl.DateTimeFormat(undefined, {
-    month: 'short',
-    day: 'numeric',
-  }).format(date);
-}
-
-function getUsageDaySortKey(timestamp: string): number {
-  const date = new Date(timestamp);
-  if (Number.isNaN(date.getTime())) return 0;
-  date.setHours(0, 0, 0, 0);
-  return date.getTime();
-}
-
-function filterUsageHistoryByWindow(entries: UsageHistoryEntry[], window: UsageWindow): UsageHistoryEntry[] {
-  if (window === 'all') return entries;
-
-  const now = Date.now();
-  const days = window === '7d' ? 7 : 30;
-  const cutoff = now - days * 24 * 60 * 60 * 1000;
-
-  return entries.filter((entry) => {
-    const timestamp = Date.parse(entry.timestamp);
-    return Number.isFinite(timestamp) && timestamp >= cutoff;
-  });
-}
-
-function UsageBarChart({
-  groups,
-  emptyLabel,
-  totalLabel,
-  inputLabel,
-  outputLabel,
-  cacheLabel,
-}: {
-  groups: Array<{
-    label: string;
-    totalTokens: number;
-    inputTokens: number;
-    outputTokens: number;
-    cacheTokens: number;
-  }>;
-  emptyLabel: string;
-  totalLabel: string;
-  inputLabel: string;
-  outputLabel: string;
-  cacheLabel: string;
-}) {
-  if (groups.length === 0) {
-    return (
-      <div className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
-        {emptyLabel}
-      </div>
-    );
-  }
-
-  const maxTokens = Math.max(...groups.map((group) => group.totalTokens), 1);
-
-  return (
-    <div className="space-y-3">
-      <div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
-        <span className="inline-flex items-center gap-2">
-          <span className="h-2.5 w-2.5 rounded-full bg-sky-500" />
-          {inputLabel}
-        </span>
-        <span className="inline-flex items-center gap-2">
-          <span className="h-2.5 w-2.5 rounded-full bg-violet-500" />
-          {outputLabel}
-        </span>
-        <span className="inline-flex items-center gap-2">
-          <span className="h-2.5 w-2.5 rounded-full bg-amber-500" />
-          {cacheLabel}
-        </span>
-      </div>
-      {groups.map((group) => (
-        <div key={group.label} className="space-y-1">
-          <div className="flex items-center justify-between gap-3 text-sm">
-            <span className="truncate font-medium">{group.label}</span>
-            <span className="text-muted-foreground">
-              {totalLabel}: {formatTokenCount(group.totalTokens)}
-            </span>
-          </div>
-          <div className="h-3 overflow-hidden rounded-full bg-muted">
-            <div
-              className="flex h-full overflow-hidden rounded-full"
-              style={{ width: `${Math.max((group.totalTokens / maxTokens) * 100, 6)}%` }}
-            >
-              {group.inputTokens > 0 && (
-                <div
-                  className="h-full bg-sky-500"
-                  style={{ width: `${(group.inputTokens / group.totalTokens) * 100}%` }}
-                />
-              )}
-              {group.outputTokens > 0 && (
-                <div
-                  className="h-full bg-violet-500"
-                  style={{ width: `${(group.outputTokens / group.totalTokens) * 100}%` }}
-                />
-              )}
-              {group.cacheTokens > 0 && (
-                <div
-                  className="h-full bg-amber-500"
-                  style={{ width: `${(group.cacheTokens / group.totalTokens) * 100}%` }}
-                />
-              )}
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
 export default Dashboard;

src/pages/Models/index.tsx

@@ -0,0 +1,441 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useGatewayStore } from '@/stores/gateway';
+import { hostApiFetch } from '@/lib/host-api';
+import { trackUiEvent } from '@/lib/telemetry';
+import { ProvidersSettings } from '@/components/settings/ProvidersSettings';
+import { FeedbackState } from '@/components/common/FeedbackState';
+
+type UsageHistoryEntry = {
+  timestamp: string;
+  sessionId: string;
+  agentId: string;
+  model?: string;
+  provider?: string;
+  inputTokens: number;
+  outputTokens: number;
+  cacheReadTokens: number;
+  cacheWriteTokens: number;
+  totalTokens: number;
+  costUsd?: number;
+};
+
+type UsageWindow = '7d' | '30d' | 'all';
+type UsageGroupBy = 'model' | 'day';
+
+export function Models() {
+  const { t } = useTranslation(['dashboard', 'settings']);
+  const gatewayStatus = useGatewayStore((state) => state.status);
+  const isGatewayRunning = gatewayStatus.state === 'running';
+
+  const [usageHistory, setUsageHistory] = useState<UsageHistoryEntry[]>([]);
+  const [usageGroupBy, setUsageGroupBy] = useState<UsageGroupBy>('model');
+  const [usageWindow, setUsageWindow] = useState<UsageWindow>('7d');
+  const [usagePage, setUsagePage] = useState(1);
+
+  useEffect(() => {
+    trackUiEvent('models.page_viewed');
+  }, []);
+
+  useEffect(() => {
+    if (isGatewayRunning) {
+      hostApiFetch<UsageHistoryEntry[]>('/api/usage/recent-token-history')
+        .then((entries) => {
+          setUsageHistory(Array.isArray(entries) ? entries : []);
+          setUsagePage(1);
+        })
+        .catch(() => {
+          setUsageHistory([]);
+        });
+    }
+  }, [isGatewayRunning]);
+
+  const visibleUsageHistory = isGatewayRunning ? usageHistory : [];
+  const filteredUsageHistory = filterUsageHistoryByWindow(visibleUsageHistory, usageWindow);
+  const usageGroups = groupUsageHistory(filteredUsageHistory, usageGroupBy);
+  const usagePageSize = 5;
+  const usageTotalPages = Math.max(1, Math.ceil(filteredUsageHistory.length / usagePageSize));
+  const safeUsagePage = Math.min(usagePage, usageTotalPages);
+  const pagedUsageHistory = filteredUsageHistory.slice((safeUsagePage - 1) * usagePageSize, safeUsagePage * usagePageSize);
+  const usageLoading = isGatewayRunning && visibleUsageHistory.length === 0;
+
+  return (
+    <div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
+      <div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16">
+        
+        {/* Header */}
+        <div className="flex flex-col md:flex-row md:items-start justify-between mb-12 shrink-0 gap-4">
+          <div>
+            <h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
+              Models
+            </h1>
+            <p className="text-[17px] text-foreground/80 font-medium">
+              Manage your AI providers and monitor token usage.
+            </p>
+          </div>
+        </div>
+
+        {/* Content Area */}
+        <div className="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 -mr-2 space-y-12">
+          
+          {/* AI Providers Section */}
+          <ProvidersSettings />
+
+          {/* Token Usage History Section */}
+          <div>
+            <h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
+              {t('dashboard:recentTokenHistory.title', 'Token Usage History')}
+            </h2>
+            <div>
+              {usageLoading ? (
+                <div className="flex items-center justify-center py-12 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
+                  <FeedbackState state="loading" title={t('dashboard:recentTokenHistory.loading')} />
+                </div>
+              ) : visibleUsageHistory.length === 0 ? (
+                <div className="flex items-center justify-center py-12 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
+                  <FeedbackState state="empty" title={t('dashboard:recentTokenHistory.empty')} />
+                </div>
+              ) : filteredUsageHistory.length === 0 ? (
+                <div className="flex items-center justify-center py-12 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
+                  <FeedbackState state="empty" title={t('dashboard:recentTokenHistory.emptyForWindow')} />
+                </div>
+              ) : (
+                <div className="space-y-6">
+                  <div className="flex flex-wrap items-center justify-between gap-3">
+                    <div className="flex flex-wrap items-center gap-3">
+                      <div className="flex rounded-xl bg-transparent p-1 border border-black/10 dark:border-white/10">
+                        <Button
+                          variant={usageGroupBy === 'model' ? 'secondary' : 'ghost'}
+                          size="sm"
+                          onClick={() => {
+                            setUsageGroupBy('model');
+                            setUsagePage(1);
+                          }}
+                          className={usageGroupBy === 'model' ? "rounded-lg bg-black/5 dark:bg-white/10 text-foreground" : "rounded-lg text-muted-foreground"}
+                        >
+                          {t('dashboard:recentTokenHistory.groupByModel')}
+                        </Button>
+                        <Button
+                          variant={usageGroupBy === 'day' ? 'secondary' : 'ghost'}
+                          size="sm"
+                          onClick={() => {
+                            setUsageGroupBy('day');
+                            setUsagePage(1);
+                          }}
+                          className={usageGroupBy === 'day' ? "rounded-lg bg-black/5 dark:bg-white/10 text-foreground" : "rounded-lg text-muted-foreground"}
+                        >
+                          {t('dashboard:recentTokenHistory.groupByTime')}
+                        </Button>
+                      </div>
+                      <div className="flex rounded-xl bg-transparent p-1 border border-black/10 dark:border-white/10">
+                        <Button
+                          variant={usageWindow === '7d' ? 'secondary' : 'ghost'}
+                          size="sm"
+                          onClick={() => {
+                            setUsageWindow('7d');
+                            setUsagePage(1);
+                          }}
+                          className={usageWindow === '7d' ? "rounded-lg bg-black/5 dark:bg-white/10 text-foreground" : "rounded-lg text-muted-foreground"}
+                        >
+                          {t('dashboard:recentTokenHistory.last7Days')}
+                        </Button>
+                        <Button
+                          variant={usageWindow === '30d' ? 'secondary' : 'ghost'}
+                          size="sm"
+                          onClick={() => {
+                            setUsageWindow('30d');
+                            setUsagePage(1);
+                          }}
+                          className={usageWindow === '30d' ? "rounded-lg bg-black/5 dark:bg-white/10 text-foreground" : "rounded-lg text-muted-foreground"}
+                        >
+                          {t('dashboard:recentTokenHistory.last30Days')}
+                        </Button>
+                        <Button
+                          variant={usageWindow === 'all' ? 'secondary' : 'ghost'}
+                          size="sm"
+                          onClick={() => {
+                            setUsageWindow('all');
+                            setUsagePage(1);
+                          }}
+                          className={usageWindow === 'all' ? "rounded-lg bg-black/5 dark:bg-white/10 text-foreground" : "rounded-lg text-muted-foreground"}
+                        >
+                          {t('dashboard:recentTokenHistory.allTime')}
+                        </Button>
+                      </div>
+                    </div>
+                    <p className="text-[13px] font-medium text-muted-foreground">
+                      {t('dashboard:recentTokenHistory.showingLast', { count: filteredUsageHistory.length })}
+                    </p>
+                  </div>
+
+                  <UsageBarChart
+                    groups={usageGroups}
+                    emptyLabel={t('dashboard:recentTokenHistory.empty')}
+                    totalLabel={t('dashboard:recentTokenHistory.totalTokens')}
+                    inputLabel={t('dashboard:recentTokenHistory.inputShort')}
+                    outputLabel={t('dashboard:recentTokenHistory.outputShort')}
+                    cacheLabel={t('dashboard:recentTokenHistory.cacheShort')}
+                  />
+
+                  <div className="space-y-3 pt-2">
+                    {pagedUsageHistory.map((entry) => (
+                      <div
+                        key={`${entry.sessionId}-${entry.timestamp}`}
+                        className="rounded-2xl bg-transparent border border-black/10 dark:border-white/10 p-5 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+                      >
+                        <div className="flex items-start justify-between gap-3">
+                          <div className="min-w-0">
+                            <p className="font-semibold text-[15px] text-foreground truncate">
+                              {entry.model || t('dashboard:recentTokenHistory.unknownModel')}
+                            </p>
+                            <p className="text-[13px] text-muted-foreground truncate mt-0.5">
+                              {[entry.provider, entry.agentId, entry.sessionId].filter(Boolean).join(' • ')}
+                            </p>
+                          </div>
+                          <div className="text-right shrink-0">
+                            <p className="font-bold text-[15px]">{formatTokenCount(entry.totalTokens)}</p>
+                            <p className="text-[12px] text-muted-foreground mt-0.5">
+                              {formatUsageTimestamp(entry.timestamp)}
+                            </p>
+                          </div>
+                        </div>
+                        <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 text-[12.5px] font-medium text-muted-foreground">
+                          <span className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-sky-500"></div>{t('dashboard:recentTokenHistory.input', { value: formatTokenCount(entry.inputTokens) })}</span>
+                          <span className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-violet-500"></div>{t('dashboard:recentTokenHistory.output', { value: formatTokenCount(entry.outputTokens) })}</span>
+                          {entry.cacheReadTokens > 0 && (
+                            <span className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-amber-500"></div>{t('dashboard:recentTokenHistory.cacheRead', { value: formatTokenCount(entry.cacheReadTokens) })}</span>
+                          )}
+                          {entry.cacheWriteTokens > 0 && (
+                            <span className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-amber-500"></div>{t('dashboard:recentTokenHistory.cacheWrite', { value: formatTokenCount(entry.cacheWriteTokens) })}</span>
+                          )}
+                          {typeof entry.costUsd === 'number' && Number.isFinite(entry.costUsd) && (
+                            <span className="flex items-center gap-1.5 ml-auto text-foreground/80 bg-black/5 dark:bg-white/5 px-2 py-0.5 rounded-md">{t('dashboard:recentTokenHistory.cost', { amount: entry.costUsd.toFixed(4) })}</span>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+
+                  <div className="flex items-center justify-between gap-3 pt-2">
+                    <p className="text-[13px] font-medium text-muted-foreground">
+                      {t('dashboard:recentTokenHistory.page', { current: safeUsagePage, total: usageTotalPages })}
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setUsagePage((page) => Math.max(1, page - 1))}
+                        disabled={safeUsagePage <= 1}
+                        className="rounded-full px-4 h-9 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5"
+                      >
+                        <ChevronLeft className="h-4 w-4 mr-1" />
+                        {t('dashboard:recentTokenHistory.prev')}
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setUsagePage((page) => Math.min(usageTotalPages, page + 1))}
+                        disabled={safeUsagePage >= usageTotalPages}
+                        className="rounded-full px-4 h-9 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5"
+                      >
+                        {t('dashboard:recentTokenHistory.next')}
+                        <ChevronRight className="h-4 w-4 ml-1" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function formatTokenCount(value: number): string {
+  return Intl.NumberFormat().format(value);
+}
+
+function formatUsageTimestamp(timestamp: string): string {
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return timestamp;
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+}
+
+function groupUsageHistory(
+  entries: UsageHistoryEntry[],
+  groupBy: UsageGroupBy,
+): Array<{
+  label: string;
+  totalTokens: number;
+  inputTokens: number;
+  outputTokens: number;
+  cacheTokens: number;
+  sortKey: number | string;
+}> {
+  const grouped = new Map<string, {
+    label: string;
+    totalTokens: number;
+    inputTokens: number;
+    outputTokens: number;
+    cacheTokens: number;
+    sortKey: number | string;
+  }>();
+
+  for (const entry of entries) {
+    const label = groupBy === 'model'
+      ? (entry.model || 'Unknown')
+      : formatUsageDay(entry.timestamp);
+    const current = grouped.get(label) ?? {
+      label,
+      totalTokens: 0,
+      inputTokens: 0,
+      outputTokens: 0,
+      cacheTokens: 0,
+      sortKey: groupBy === 'day' ? getUsageDaySortKey(entry.timestamp) : label.toLowerCase(),
+    };
+    current.totalTokens += entry.totalTokens;
+    current.inputTokens += entry.inputTokens;
+    current.outputTokens += entry.outputTokens;
+    current.cacheTokens += entry.cacheReadTokens + entry.cacheWriteTokens;
+    grouped.set(label, current);
+  }
+
+  return Array.from(grouped.values())
+    .sort((a, b) => {
+      if (groupBy === 'day') {
+        return Number(a.sortKey) - Number(b.sortKey);
+      }
+      return b.totalTokens - a.totalTokens;
+    })
+    .slice(0, 8);
+}
+
+function formatUsageDay(timestamp: string): string {
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return timestamp;
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+  }).format(date);
+}
+
+function getUsageDaySortKey(timestamp: string): number {
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return 0;
+  date.setHours(0, 0, 0, 0);
+  return date.getTime();
+}
+
+function filterUsageHistoryByWindow(entries: UsageHistoryEntry[], window: UsageWindow): UsageHistoryEntry[] {
+  if (window === 'all') return entries;
+
+  const now = Date.now();
+  const days = window === '7d' ? 7 : 30;
+  const cutoff = now - days * 24 * 60 * 60 * 1000;
+
+  return entries.filter((entry) => {
+    const timestamp = Date.parse(entry.timestamp);
+    return Number.isFinite(timestamp) && timestamp >= cutoff;
+  });
+}
+
+function UsageBarChart({
+  groups,
+  emptyLabel,
+  totalLabel,
+  inputLabel,
+  outputLabel,
+  cacheLabel,
+}: {
+  groups: Array<{
+    label: string;
+    totalTokens: number;
+    inputTokens: number;
+    outputTokens: number;
+    cacheTokens: number;
+  }>;
+  emptyLabel: string;
+  totalLabel: string;
+  inputLabel: string;
+  outputLabel: string;
+  cacheLabel: string;
+}) {
+  if (groups.length === 0) {
+    return (
+      <div className="rounded-2xl border border-dashed border-black/10 dark:border-white/10 p-8 text-center text-[14px] font-medium text-muted-foreground">
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  const maxTokens = Math.max(...groups.map((group) => group.totalTokens), 1);
+
+  return (
+    <div className="space-y-4 bg-transparent p-5 rounded-2xl border border-black/10 dark:border-white/10">
+      <div className="flex flex-wrap gap-4 text-[13px] font-medium text-muted-foreground mb-2">
+        <span className="inline-flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-full bg-sky-500" />
+          {inputLabel}
+        </span>
+        <span className="inline-flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-full bg-violet-500" />
+          {outputLabel}
+        </span>
+        <span className="inline-flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-full bg-amber-500" />
+          {cacheLabel}
+        </span>
+      </div>
+      {groups.map((group) => (
+        <div key={group.label} className="space-y-1.5">
+          <div className="flex items-center justify-between gap-3 text-[13.5px]">
+            <span className="truncate font-semibold text-foreground">{group.label}</span>
+            <span className="text-muted-foreground font-medium">
+              {totalLabel}: {formatTokenCount(group.totalTokens)}
+            </span>
+          </div>
+          <div className="h-3.5 overflow-hidden rounded-full bg-black/5 dark:bg-white/5">
+            <div
+              className="flex h-full overflow-hidden rounded-full"
+              style={{ width: `${Math.max((group.totalTokens / maxTokens) * 100, 6)}%` }}
+            >
+              {group.inputTokens > 0 && (
+                <div
+                  className="h-full bg-sky-500"
+                  style={{ width: `${(group.inputTokens / group.totalTokens) * 100}%` }}
+                />
+              )}
+              {group.outputTokens > 0 && (
+                <div
+                  className="h-full bg-violet-500"
+                  style={{ width: `${(group.outputTokens / group.totalTokens) * 100}%` }}
+                />
+              )}
+              {group.cacheTokens > 0 && (
+                <div
+                  className="h-full bg-amber-500"
+                  style={{ width: `${(group.cacheTokens / group.totalTokens) * 100}%` }}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default Models;

src/pages/Settings/index.tsx

@@ -8,13 +8,12 @@ import {
   Moon,
   Monitor,
   RefreshCw,
-  ChevronDown,
-  ChevronRight,
   Terminal,
   ExternalLink,
-  Key,
   Download,
   Copy,
+  ChevronDown,
+  ChevronRight,
   FileText,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -28,7 +27,6 @@ import { toast } from 'sonner';
 import { useSettingsStore } from '@/stores/settings';
 import { useGatewayStore } from '@/stores/gateway';
 import { useUpdateStore } from '@/stores/update';
-import { ProvidersSettings } from '@/components/settings/ProvidersSettings';
 import { UpdateSettings } from '@/components/settings/UpdateSettings';
 import {
   getGatewayWsDiagnosticEnabled,
@@ -454,20 +452,6 @@ export function Settings() {
         </CardContent>
       </Card>
 
-      {/* AI Providers */}
-      <Card className="order-2">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Key className="h-5 w-5" />
-            {t('aiProviders.title')}
-          </CardTitle>
-          <CardDescription>{t('aiProviders.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ProvidersSettings />
-        </CardContent>
-      </Card>
-
       {/* Gateway */}
       <Card className="order-1">
         <CardHeader>

src/styles/globals.css

@@ -4,7 +4,8 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    /* #f1ede1 */
+    --background: 45 36.4% 91.4%;
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
@@ -53,6 +54,7 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
@@ -151,9 +153,13 @@
 
 /* Typing indicator animation */
 @keyframes bounce {
-  0%, 60%, 100% {
+
+  0%,
+  60%,
+  100% {
     transform: translateY(0);
   }
+
   30% {
     transform: translateY(-4px);
   }