From b5bb9a33e7ae7be231cbd8f6f16f9b8258c38753 Mon Sep 17 00:00:00 2001
From: lpf <lipengfei886@qq.com>
Date: Sat, 7 Mar 2026 14:23:48 +0800
Subject: [PATCH] Refine webui layout and config defaults

---
 cmd/clawgo/cmd_gateway.go            |   2 +
 cmd/clawgo/main.go                   |   2 +-
 config.example.json                  |   8 +-
 pkg/api/server.go                    |  93 ++--
 webui/src/components/Header.tsx      |  16 +-
 webui/src/components/Layout.tsx      |   2 +-
 webui/src/components/NavItem.tsx     |   8 +-
 webui/src/components/Sidebar.tsx     |  84 ++--
 webui/src/components/StatCard.tsx    |   2 +-
 webui/src/context/AppContext.tsx     |  89 +++-
 webui/src/i18n/index.ts              |  66 +++
 webui/src/pages/Chat.tsx             | 608 +++++++++++++++++++++++----
 webui/src/pages/Config.tsx           |  15 +-
 webui/src/pages/Cron.tsx             |   8 +-
 webui/src/pages/Dashboard.tsx        | 210 ++++++---
 webui/src/pages/EKG.tsx              | 178 ++++++--
 webui/src/pages/LogCodes.tsx         |   6 +-
 webui/src/pages/Logs.tsx             |   6 +-
 webui/src/pages/Memory.tsx           |   8 +-
 webui/src/pages/Skills.tsx           |  27 +-
 webui/src/pages/SubagentProfiles.tsx |  27 +-
 webui/src/pages/Subagents.tsx        |  22 +-
 webui/src/pages/TaskAudit.tsx        |   2 +-
 23 files changed, 1132 insertions(+), 357 deletions(-)

diff --git a/cmd/clawgo/cmd_gateway.go b/cmd/clawgo/cmd_gateway.go
index c927976..41ca30d 100644
--- a/cmd/clawgo/cmd_gateway.go
+++ b/cmd/clawgo/cmd_gateway.go
@@ -129,6 +129,8 @@ func gatewayCmd() {
 	}
 
 	registryServer := api.NewServer(cfg.Gateway.Host, cfg.Gateway.Port, cfg.Gateway.Token, nodes.DefaultManager())
+	registryServer.SetGatewayVersion(version)
+	registryServer.SetWebUIVersion(version)
 	registryServer.SetConfigPath(getConfigPath())
 	registryServer.SetWorkspacePath(cfg.WorkspacePath())
 	registryServer.SetLogFilePath(cfg.LogFilePath())
diff --git a/cmd/clawgo/main.go b/cmd/clawgo/main.go
index c536ee0..27a2f5d 100644
--- a/cmd/clawgo/main.go
+++ b/cmd/clawgo/main.go
@@ -19,7 +19,7 @@ import (
 //go:embed workspace
 var embeddedFiles embed.FS
 
-var version = "0.1.0"
+var version = "dev"
 var buildTime = "unknown"
 
 const logo = "🦞"
diff --git a/config.example.json b/config.example.json
index 0414940..0b4d71c 100644
--- a/config.example.json
+++ b/config.example.json
@@ -73,6 +73,7 @@
       "main": {
         "enabled": true,
         "type": "router",
+        "notify_main_policy": "final_only",
         "display_name": "Main Agent",
         "role": "orchestrator",
         "system_prompt_file": "agents/main/AGENT.md",
@@ -85,7 +86,6 @@
         "runtime": {
           "proxy": "proxy",
           "temperature": 0.2,
-          "timeout_sec": 900,
           "max_retries": 1,
           "retry_backoff_ms": 1000,
           "max_parallel_runs": 4
@@ -94,6 +94,7 @@
       "coder": {
         "enabled": true,
         "type": "worker",
+        "notify_main_policy": "final_only",
         "display_name": "Code Agent",
         "role": "code",
         "system_prompt_file": "agents/coder/AGENT.md",
@@ -106,7 +107,6 @@
         "runtime": {
           "proxy": "proxy",
           "temperature": 0.2,
-          "timeout_sec": 1200,
           "max_retries": 1,
           "retry_backoff_ms": 1000,
           "max_task_chars": 20000,
@@ -117,6 +117,7 @@
       "tester": {
         "enabled": true,
         "type": "worker",
+        "notify_main_policy": "on_blocked",
         "display_name": "Test Agent",
         "role": "test",
         "system_prompt_file": "agents/tester/AGENT.md",
@@ -129,7 +130,6 @@
         "runtime": {
           "proxy": "proxy",
           "temperature": 0.1,
-          "timeout_sec": 1200,
           "max_retries": 1,
           "retry_backoff_ms": 1000,
           "max_parallel_runs": 2
@@ -141,11 +141,11 @@
         "transport": "node",
         "node_id": "edge-dev",
         "parent_agent_id": "main",
+        "notify_main_policy": "internal_only",
         "display_name": "Edge Dev Main Agent",
         "role": "remote_main",
         "memory_namespace": "node.edge-dev.main",
         "runtime": {
-          "timeout_sec": 1200,
           "max_retries": 1,
           "retry_backoff_ms": 1000,
           "max_parallel_runs": 1
diff --git a/pkg/api/server.go b/pkg/api/server.go
index 1edbd5f..b1fac5f 100644
--- a/pkg/api/server.go
+++ b/pkg/api/server.go
@@ -32,24 +32,26 @@ import (
 )
 
 type Server struct {
-	addr          string
-	token         string
-	mgr           *nodes.Manager
-	server        *http.Server
-	configPath    string
-	workspacePath string
-	logFilePath   string
-	onChat        func(ctx context.Context, sessionKey, content string) (string, error)
-	onChatHistory func(sessionKey string) []map[string]interface{}
-	onConfigAfter func()
-	onCron        func(action string, args map[string]interface{}) (interface{}, error)
-	onSubagents   func(ctx context.Context, action string, args map[string]interface{}) (interface{}, error)
-	webUIDir      string
-	ekgCacheMu    sync.Mutex
-	ekgCachePath  string
-	ekgCacheStamp time.Time
-	ekgCacheSize  int64
-	ekgCacheRows  []map[string]interface{}
+	addr           string
+	token          string
+	mgr            *nodes.Manager
+	server         *http.Server
+	gatewayVersion string
+	webuiVersion   string
+	configPath     string
+	workspacePath  string
+	logFilePath    string
+	onChat         func(ctx context.Context, sessionKey, content string) (string, error)
+	onChatHistory  func(sessionKey string) []map[string]interface{}
+	onConfigAfter  func()
+	onCron         func(action string, args map[string]interface{}) (interface{}, error)
+	onSubagents    func(ctx context.Context, action string, args map[string]interface{}) (interface{}, error)
+	webUIDir       string
+	ekgCacheMu     sync.Mutex
+	ekgCachePath   string
+	ekgCacheStamp  time.Time
+	ekgCacheSize   int64
+	ekgCacheRows   []map[string]interface{}
 }
 
 func NewServer(host string, port int, token string, mgr *nodes.Manager) *Server {
@@ -79,7 +81,9 @@ func (s *Server) SetCronHandler(fn func(action string, args map[string]interface
 func (s *Server) SetSubagentHandler(fn func(ctx context.Context, action string, args map[string]interface{}) (interface{}, error)) {
 	s.onSubagents = fn
 }
-func (s *Server) SetWebUIDir(dir string) { s.webUIDir = strings.TrimSpace(dir) }
+func (s *Server) SetWebUIDir(dir string)     { s.webUIDir = strings.TrimSpace(dir) }
+func (s *Server) SetGatewayVersion(v string) { s.gatewayVersion = strings.TrimSpace(v) }
+func (s *Server) SetWebUIVersion(v string)   { s.webuiVersion = strings.TrimSpace(v) }
 
 func (s *Server) Start(ctx context.Context) error {
 	if s.mgr == nil {
@@ -583,8 +587,8 @@ func (s *Server) handleWebUIVersion(w http.ResponseWriter, r *http.Request) {
 	}
 	_ = json.NewEncoder(w).Encode(map[string]interface{}{
 		"ok":              true,
-		"gateway_version": gatewayBuildVersion(),
-		"webui_version":   detectWebUIVersion(strings.TrimSpace(s.webUIDir)),
+		"gateway_version": firstNonEmptyString(s.gatewayVersion, gatewayBuildVersion()),
+		"webui_version":   firstNonEmptyString(s.webuiVersion, detectWebUIVersion(strings.TrimSpace(s.webUIDir))),
 	})
 }
 
@@ -1334,24 +1338,17 @@ func gatewayBuildVersion() string {
 }
 
 func detectWebUIVersion(webUIDir string) string {
-	if strings.TrimSpace(webUIDir) == "" {
-		return "unknown"
-	}
-	assets := filepath.Join(webUIDir, "assets")
-	entries, err := os.ReadDir(assets)
-	if err != nil {
-		return "unknown"
-	}
-	for _, e := range entries {
-		name := e.Name()
-		if strings.HasPrefix(name, "index-") && strings.HasSuffix(name, ".js") {
-			mid := strings.TrimSuffix(strings.TrimPrefix(name, "index-"), ".js")
-			if mid != "" {
-				return mid
-			}
+	_ = webUIDir
+	return "dev"
+}
+
+func firstNonEmptyString(values ...string) string {
+	for _, v := range values {
+		if strings.TrimSpace(v) != "" {
+			return strings.TrimSpace(v)
 		}
 	}
-	return "unknown"
+	return ""
 }
 
 func detectLocalIP() string {
@@ -2715,6 +2712,9 @@ func (s *Server) handleWebUIEKGStats(w http.ResponseWriter, r *http.Request) {
 		errSig := strings.TrimSpace(fmt.Sprintf("%v", row["errsig"]))
 		source := strings.ToLower(strings.TrimSpace(fmt.Sprintf("%v", row["source"])))
 		channel := strings.ToLower(strings.TrimSpace(fmt.Sprintf("%v", row["channel"])))
+		if source == "heartbeat" {
+			continue
+		}
 		if source == "" {
 			source = "unknown"
 		}
@@ -2723,33 +2723,22 @@ func (s *Server) handleWebUIEKGStats(w http.ResponseWriter, r *http.Request) {
 		}
 		sourceStats[source]++
 		channelStats[channel]++
-		isHeartbeat := source == "heartbeat"
 		if provider != "" {
 			switch status {
 			case "success":
 				providerScore[provider] += 1
-				if !isHeartbeat {
-					providerScoreWorkload[provider] += 1
-				}
+				providerScoreWorkload[provider] += 1
 			case "suppressed":
 				providerScore[provider] += 0.2
-				if !isHeartbeat {
-					providerScoreWorkload[provider] += 0.2
-				}
+				providerScoreWorkload[provider] += 0.2
 			case "error":
 				providerScore[provider] -= 1
-				if !isHeartbeat {
-					providerScoreWorkload[provider] -= 1
-				}
+				providerScoreWorkload[provider] -= 1
 			}
 		}
 		if errSig != "" && status == "error" {
 			errSigCount[errSig]++
-			if isHeartbeat {
-				errSigHeartbeat[errSig]++
-			} else {
-				errSigWorkload[errSig]++
-			}
+			errSigWorkload[errSig]++
 		}
 	}
 	toTopScore := func(m map[string]float64, n int) []kv {
diff --git a/webui/src/components/Header.tsx b/webui/src/components/Header.tsx
index 0066378..9c9fbde 100644
--- a/webui/src/components/Header.tsx
+++ b/webui/src/components/Header.tsx
@@ -5,7 +5,7 @@ import { useAppContext } from '../context/AppContext';
 
 const Header: React.FC = () => {
   const { t, i18n } = useTranslation();
-  const { isGatewayOnline, setSidebarOpen } = useAppContext();
+  const { isGatewayOnline, setSidebarOpen, sidebarCollapsed } = useAppContext();
 
   const toggleLang = () => {
     const nextLang = i18n.language === 'en' ? 'zh' : 'en';
@@ -18,10 +18,18 @@ const Header: React.FC = () => {
         <button className="md:hidden p-2 rounded-lg hover:bg-zinc-800 text-zinc-300" onClick={() => setSidebarOpen(true)}>
           <Menu className="w-5 h-5" />
         </button>
-        <div className="w-8 h-8 md:w-9 md:h-9 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20 shrink-0">
-          <Terminal className="w-4 h-4 md:w-5 md:h-5 text-white" />
+        <div className="hidden md:flex items-center gap-3 rounded-xl px-2 py-1.5 min-w-0">
+          <div className="w-9 h-9 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20 shrink-0">
+            <Terminal className="w-5 h-5 text-white" />
+          </div>
+          {!sidebarCollapsed && (
+            <span className="font-semibold text-lg md:text-xl tracking-tight truncate">{t('appName')}</span>
+          )}
         </div>
-        <span className="hidden md:inline font-semibold text-lg md:text-xl tracking-tight truncate">{t('appName')}</span>
+        <div className="md:hidden w-8 h-8 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20 shrink-0">
+          <Terminal className="w-4 h-4 text-white" />
+        </div>
+        <span className="md:hidden font-semibold text-lg tracking-tight truncate">{t('appName')}</span>
       </div>
       
       <div className="flex items-center gap-2 md:gap-6">
diff --git a/webui/src/components/Layout.tsx b/webui/src/components/Layout.tsx
index f25206f..e107459 100644
--- a/webui/src/components/Layout.tsx
+++ b/webui/src/components/Layout.tsx
@@ -25,7 +25,7 @@ const Layout: React.FC = () => {
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -10 }}
               transition={{ duration: 0.2 }}
-              className="absolute inset-0 overflow-y-auto"
+              className="absolute inset-0 overflow-y-auto overflow-x-hidden"
             >
               <Outlet />
             </motion.div>
diff --git a/webui/src/components/NavItem.tsx b/webui/src/components/NavItem.tsx
index 0d58f0d..6044b38 100644
--- a/webui/src/components/NavItem.tsx
+++ b/webui/src/components/NavItem.tsx
@@ -5,19 +5,21 @@ interface NavItemProps {
   icon: React.ReactNode;
   label: string;
   to: string;
+  collapsed?: boolean;
 }
 
-const NavItem: React.FC<NavItemProps> = ({ icon, label, to }) => (
+const NavItem: React.FC<NavItemProps> = ({ icon, label, to, collapsed = false }) => (
   <NavLink 
     to={to}
-    className={({ isActive }) => `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
+    title={collapsed ? label : undefined}
+    className={({ isActive }) => `w-full flex items-center ${collapsed ? 'justify-center' : 'gap-3'} px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
       isActive
         ? 'bg-indigo-500/15 text-indigo-300 border border-indigo-500/30'
         : 'text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200 border border-transparent'
     }`}
   >
     {icon}
-    {label}
+    {!collapsed && label}
   </NavLink>
 );
 
diff --git a/webui/src/components/Sidebar.tsx b/webui/src/components/Sidebar.tsx
index fcdb5c1..ee323c1 100644
--- a/webui/src/components/Sidebar.tsx
+++ b/webui/src/components/Sidebar.tsx
@@ -1,72 +1,92 @@
 import React from 'react';
-import { LayoutDashboard, MessageSquare, Settings, Clock, Terminal, Zap, FolderOpen, ClipboardList, BrainCircuit, Hash, Bot, Boxes } from 'lucide-react';
+import { LayoutDashboard, MessageSquare, Settings, Clock, Terminal, Zap, FolderOpen, ClipboardList, BrainCircuit, Hash, Bot, Boxes, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import NavItem from './NavItem';
 
 const Sidebar: React.FC = () => {
   const { t } = useTranslation();
-  const { token, setToken, sidebarOpen } = useAppContext();
+  const { token, setToken, sidebarOpen, sidebarCollapsed, setSidebarCollapsed } = useAppContext();
 
   const sections = [
     {
-      title: t('sidebarCore'),
+      title: t('sidebarMain'),
       items: [
         { icon: <LayoutDashboard className="w-5 h-5" />, label: t('dashboard'), to: '/' },
         { icon: <MessageSquare className="w-5 h-5" />, label: t('chat'), to: '/chat' },
         { icon: <Boxes className="w-5 h-5" />, label: t('subagentsRuntime'), to: '/subagents' },
-        { icon: <Terminal className="w-5 h-5" />, label: t('logs'), to: '/logs' },
-        { icon: <Hash className="w-5 h-5" />, label: t('logCodes'), to: '/log-codes' },
-        { icon: <Zap className="w-5 h-5" />, label: t('skills'), to: '/skills' },
       ],
     },
     {
-      title: t('sidebarSystem'),
-      items: [
-        { icon: <Settings className="w-5 h-5" />, label: t('config'), to: '/config' },
-        { icon: <Clock className="w-5 h-5" />, label: t('cronJobs'), to: '/cron' },
-        { icon: <FolderOpen className="w-5 h-5" />, label: t('memory'), to: '/memory' },
-        { icon: <Bot className="w-5 h-5" />, label: t('subagentProfiles'), to: '/subagent-profiles' },
-      ],
-    },
-    {
-      title: t('sidebarOps'),
+      title: t('sidebarRuntime'),
       items: [
         { icon: <ClipboardList className="w-5 h-5" />, label: t('taskAudit'), to: '/task-audit' },
+        { icon: <Terminal className="w-5 h-5" />, label: t('logs'), to: '/logs' },
+        { icon: <BrainCircuit className="w-5 h-5" />, label: t('ekg'), to: '/ekg' },
       ],
     },
     {
-      title: t('sidebarInsights'),
+      title: t('sidebarConfig'),
       items: [
-        { icon: <BrainCircuit className="w-5 h-5" />, label: t('ekg'), to: '/ekg' },
+        { icon: <Settings className="w-5 h-5" />, label: t('config'), to: '/config' },
+        { icon: <Bot className="w-5 h-5" />, label: t('subagentProfiles'), to: '/subagent-profiles' },
+        { icon: <Clock className="w-5 h-5" />, label: t('cronJobs'), to: '/cron' },
+      ],
+    },
+    {
+      title: t('sidebarKnowledge'),
+      items: [
+        { icon: <FolderOpen className="w-5 h-5" />, label: t('memory'), to: '/memory' },
+        { icon: <Zap className="w-5 h-5" />, label: t('skills'), to: '/skills' },
+        { icon: <Hash className="w-5 h-5" />, label: t('logCodes'), to: '/log-codes' },
       ],
     },
   ];
 
   return (
-    <aside className={`fixed md:static inset-y-16 left-0 z-40 w-64 border-r border-zinc-800 bg-zinc-900/95 md:bg-zinc-900/40 backdrop-blur-sm flex flex-col shrink-0 transform transition-transform duration-200 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}>
-      <nav className="flex-1 px-3 py-4 space-y-3 overflow-y-auto">
+    <aside className={`fixed md:static inset-y-14 md:inset-y-16 left-0 z-40 ${sidebarCollapsed ? 'md:w-20' : 'md:w-64'} w-[86vw] max-w-72 border-r border-zinc-800 bg-zinc-900/95 md:bg-zinc-900/40 backdrop-blur-sm flex flex-col shrink-0 transform transition-all duration-200 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}>
+      <nav className={`flex-1 ${sidebarCollapsed ? 'px-2' : 'px-3'} py-4 space-y-3 overflow-y-auto`}>
         {sections.map((sec) => (
-          <div key={sec.title} className="rounded-xl border border-zinc-800/60 bg-zinc-900/30 p-2">
-            <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest px-2 pb-2">{sec.title}</div>
+          <div key={sec.title} className={`rounded-xl border border-zinc-800/60 bg-zinc-900/30 ${sidebarCollapsed ? 'p-2' : 'p-2'}`}>
+            {!sidebarCollapsed && <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest px-2 pb-2">{sec.title}</div>}
             <div className="space-y-1">
               {sec.items.map((it) => (
-                <NavItem key={it.to} icon={it.icon} label={it.label} to={it.to} />
+                <NavItem key={it.to} icon={it.icon} label={it.label} to={it.to} collapsed={sidebarCollapsed} />
               ))}
             </div>
           </div>
         ))}
       </nav>
 
-      <div className="p-3 border-t border-zinc-800 bg-zinc-900/60">
-        <div className="text-[11px] font-medium text-zinc-500 mb-1 uppercase tracking-wider px-1">{t('gatewayToken')}</div>
-        <input
-          type="password"
-          value={token}
-          onChange={(e) => setToken(e.target.value)}
-          placeholder={t('enterToken')}
-          className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors placeholder:text-zinc-600"
-        />
+      {!sidebarCollapsed ? (
+        <div className="p-3 border-t border-zinc-800 bg-zinc-900/60">
+          <div className="text-[11px] font-medium text-zinc-500 mb-1 uppercase tracking-wider px-1">{t('gatewayToken')}</div>
+          <input
+            type="password"
+            value={token}
+            onChange={(e) => setToken(e.target.value)}
+            placeholder={t('enterToken')}
+            className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors placeholder:text-zinc-600"
+          />
+        </div>
+      ) : (
+        <div className="hidden md:flex justify-center p-3 border-t border-zinc-800 bg-zinc-900/60">
+          <div className="w-2 h-2 rounded-full bg-zinc-600" title={t('gatewayToken')} />
+        </div>
+      )}
+      <div className={`hidden md:flex border-t border-zinc-800 bg-zinc-900/60 ${sidebarCollapsed ? 'justify-center p-3' : 'p-3'}`}>
+        <button
+          onClick={() => setSidebarCollapsed((prev) => !prev)}
+          className={`flex items-center ${sidebarCollapsed ? 'justify-center' : 'justify-between'} gap-3 rounded-xl border border-zinc-800 bg-zinc-950/70 hover:bg-zinc-900 text-zinc-300 transition-colors ${sidebarCollapsed ? 'w-11 h-11' : 'w-full px-3 py-2.5'}`}
+          title={sidebarCollapsed ? t('expand') : t('collapse')}
+        >
+          {sidebarCollapsed ? <PanelLeftOpen className="w-4 h-4" /> : (
+            <>
+              <span className="text-sm font-medium">{t('collapse')}</span>
+              <PanelLeftClose className="w-4 h-4 shrink-0" />
+            </>
+          )}
+        </button>
       </div>
     </aside>
   );
diff --git a/webui/src/components/StatCard.tsx b/webui/src/components/StatCard.tsx
index 0db5e19..4d4d223 100644
--- a/webui/src/components/StatCard.tsx
+++ b/webui/src/components/StatCard.tsx
@@ -7,7 +7,7 @@ interface StatCardProps {
 }
 
 const StatCard: React.FC<StatCardProps> = ({ title, value, icon }) => (
-  <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-center gap-4">
+  <div className="h-full min-h-[124px] bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-center gap-4">
     <div className="w-12 h-12 rounded-xl bg-zinc-800/50 flex items-center justify-center border border-zinc-700/50">
       {icon}
     </div>
diff --git a/webui/src/context/AppContext.tsx b/webui/src/context/AppContext.tsx
index 68bd1d8..ab76eb2 100644
--- a/webui/src/context/AppContext.tsx
+++ b/webui/src/context/AppContext.tsx
@@ -5,6 +5,8 @@ interface AppContextType {
   token: string;
   sidebarOpen: boolean;
   setSidebarOpen: (open: boolean) => void;
+  sidebarCollapsed: boolean;
+  setSidebarCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
   setToken: (token: string) => void;
   isGatewayOnline: boolean;
   setIsGatewayOnline: (online: boolean) => void;
@@ -12,6 +14,8 @@ interface AppContextType {
   setCfg: React.Dispatch<React.SetStateAction<Cfg>>;
   cfgRaw: string;
   setCfgRaw: (raw: string) => void;
+  configEditing: boolean;
+  setConfigEditing: React.Dispatch<React.SetStateAction<boolean>>;
   nodes: string;
   setNodes: (nodes: string) => void;
   nodeTrees: string;
@@ -24,13 +28,19 @@ interface AppContextType {
   clawhubPath: string;
   sessions: Session[];
   setSessions: React.Dispatch<React.SetStateAction<Session[]>>;
+  taskQueueItems: any[];
+  setTaskQueueItems: React.Dispatch<React.SetStateAction<any[]>>;
+  ekgSummary: Record<string, any>;
+  setEkgSummary: React.Dispatch<React.SetStateAction<Record<string, any>>>;
   refreshAll: () => Promise<void>;
   refreshCron: () => Promise<void>;
   refreshNodes: () => Promise<void>;
   refreshSkills: () => Promise<void>;
   refreshSessions: () => Promise<void>;
+  refreshTaskQueue: () => Promise<void>;
+  refreshEKGSummary: () => Promise<void>;
   refreshVersion: () => Promise<void>;
-  loadConfig: () => Promise<void>;
+  loadConfig: (force?: boolean) => Promise<void>;
   gatewayVersion: string;
   webuiVersion: string;
   hotReloadFields: string[];
@@ -51,9 +61,17 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children
   })();
   const [token, setToken] = useState(initialToken);
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(() => {
+    try {
+      return window.localStorage.getItem('ui.sidebarCollapsed') === '1';
+    } catch {
+      return false;
+    }
+  });
   const [isGatewayOnline, setIsGatewayOnline] = useState(true);
   const [cfg, setCfg] = useState<Cfg>({});
   const [cfgRaw, setCfgRaw] = useState('{}');
+  const [configEditing, setConfigEditing] = useState(false);
   const [nodes, setNodes] = useState('[]');
   const [nodeTrees, setNodeTrees] = useState('[]');
   const [cron, setCron] = useState<CronJob[]>([]);
@@ -61,6 +79,8 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const [clawhubInstalled, setClawhubInstalled] = useState(false);
   const [clawhubPath, setClawhubPath] = useState('');
   const [sessions, setSessions] = useState<Session[]>([{ key: 'main', title: 'main' }]);
+  const [taskQueueItems, setTaskQueueItems] = useState<any[]>([]);
+  const [ekgSummary, setEkgSummary] = useState<Record<string, any>>({});
   const [gatewayVersion, setGatewayVersion] = useState('unknown');
   const [webuiVersion, setWebuiVersion] = useState('unknown');
   const [hotReloadFields, setHotReloadFields] = useState<string[]>([]);
@@ -68,7 +88,7 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children
 
   const q = token ? `?token=${encodeURIComponent(token)}` : '';
 
-  const loadConfig = useCallback(async () => {
+  const loadConfig = useCallback(async (force = false) => {
     try {
       const hotQ = q ? `${q}&include_hot_reload_fields=1` : '?include_hot_reload_fields=1';
       const r = await fetch(`/webui/api/config${hotQ}`);
@@ -77,24 +97,30 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children
       try {
         const parsed = JSON.parse(txt);
         if (parsed && parsed.config) {
-          setCfg(parsed.config);
-          setCfgRaw(JSON.stringify(parsed.config, null, 2));
+          if (!configEditing || force) {
+            setCfg(parsed.config);
+            setCfgRaw(JSON.stringify(parsed.config, null, 2));
+          }
           setHotReloadFields(Array.isArray(parsed.hot_reload_fields) ? parsed.hot_reload_fields : []);
           setHotReloadFieldDetails(Array.isArray(parsed.hot_reload_field_details) ? parsed.hot_reload_field_details : []);
         } else {
-          setCfg(parsed || {});
-          setCfgRaw(txt);
+          if (!configEditing || force) {
+            setCfg(parsed || {});
+            setCfgRaw(txt);
+          }
         }
       } catch {
-        setCfgRaw(txt);
-        try { setCfg(JSON.parse(txt)); } catch { setCfg({}); }
+        if (!configEditing || force) {
+          setCfgRaw(txt);
+          try { setCfg(JSON.parse(txt)); } catch { setCfg({}); }
+        }
       }
       setIsGatewayOnline(true);
     } catch (e) {
       setIsGatewayOnline(false);
       console.error(e);
     }
-  }, [q]);
+  }, [q, configEditing]);
 
   const refreshNodes = useCallback(async () => {
     try {
@@ -164,9 +190,31 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   }, [q]);
 
+  const refreshTaskQueue = useCallback(async () => {
+    try {
+      const r = await fetch(`/webui/api/task_queue${q ? `${q}&limit=30` : '?limit=30'}`);
+      if (!r.ok) throw new Error('Failed to load task queue');
+      const j = await r.json();
+      setTaskQueueItems(Array.isArray(j.items) ? j.items : []);
+    } catch (e) {
+      console.error(e);
+    }
+  }, [q]);
+
+  const refreshEKGSummary = useCallback(async () => {
+    try {
+      const r = await fetch(`/webui/api/ekg_stats${q ? `${q}&window=24h` : '?window=24h'}`);
+      if (!r.ok) throw new Error('Failed to load ekg summary');
+      const j = await r.json();
+      setEkgSummary(j && typeof j === 'object' ? j : {});
+    } catch (e) {
+      console.error(e);
+    }
+  }, [q]);
+
   const refreshAll = useCallback(async () => {
-    await Promise.all([loadConfig(), refreshCron(), refreshNodes(), refreshSkills(), refreshSessions(), refreshVersion()]);
-  }, [loadConfig, refreshCron, refreshNodes, refreshSkills, refreshSessions, refreshVersion]);
+    await Promise.all([loadConfig(), refreshCron(), refreshNodes(), refreshSkills(), refreshSessions(), refreshVersion(), refreshTaskQueue(), refreshEKGSummary()]);
+  }, [loadConfig, refreshCron, refreshNodes, refreshSkills, refreshSessions, refreshVersion, refreshTaskQueue, refreshEKGSummary]);
 
   useEffect(() => {
     refreshAll();
@@ -177,17 +225,28 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children
       refreshSkills();
       refreshSessions();
       refreshVersion();
+      refreshTaskQueue();
+      refreshEKGSummary();
     }, 10000);
     return () => clearInterval(interval);
-  }, [token, refreshAll, loadConfig, refreshCron, refreshNodes, refreshSkills, refreshSessions, refreshVersion]);
+  }, [token, refreshAll, loadConfig, refreshCron, refreshNodes, refreshSkills, refreshSessions, refreshVersion, refreshTaskQueue, refreshEKGSummary]);
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem('ui.sidebarCollapsed', sidebarCollapsed ? '1' : '0');
+    } catch {
+      // ignore persistence failures
+    }
+  }, [sidebarCollapsed]);
 
   return (
     <AppContext.Provider value={{
-      token, setToken, sidebarOpen, setSidebarOpen, isGatewayOnline, setIsGatewayOnline,
-      cfg, setCfg, cfgRaw, setCfgRaw, nodes, setNodes, nodeTrees, setNodeTrees,
+      token, setToken, sidebarOpen, setSidebarOpen, sidebarCollapsed, setSidebarCollapsed, isGatewayOnline, setIsGatewayOnline,
+      cfg, setCfg, cfgRaw, setCfgRaw, configEditing, setConfigEditing, nodes, setNodes, nodeTrees, setNodeTrees,
       cron, setCron, skills, setSkills, clawhubInstalled, clawhubPath,
       sessions, setSessions,
-      refreshAll, refreshCron, refreshNodes, refreshSkills, refreshSessions, refreshVersion, loadConfig,
+      taskQueueItems, setTaskQueueItems, ekgSummary, setEkgSummary,
+      refreshAll, refreshCron, refreshNodes, refreshSkills, refreshSessions, refreshTaskQueue, refreshEKGSummary, refreshVersion, loadConfig,
       gatewayVersion, webuiVersion, hotReloadFields, hotReloadFieldDetails, q
     }}>
       {children}
diff --git a/webui/src/i18n/index.ts b/webui/src/i18n/index.ts
index c68951a..6e524ef 100644
--- a/webui/src/i18n/index.ts
+++ b/webui/src/i18n/index.ts
@@ -76,6 +76,10 @@ const resources = {
       subagentDeleteConfirmTitle: 'Delete Subagent Profile',
       subagentDeleteConfirmMessage: 'Delete subagent profile "{{id}}" permanently?',
       sidebarCore: 'Core',
+      sidebarMain: 'Main',
+      sidebarRuntime: 'Runtime',
+      sidebarConfig: 'Configuration',
+      sidebarKnowledge: 'Knowledge',
       sidebarSystem: 'System',
       sidebarOps: 'Operations',
       sidebarInsights: 'Insights',
@@ -117,7 +121,32 @@ const resources = {
       noNodes: 'No nodes available',
       sessions: 'Sessions',
       mainChat: 'Main Chat',
+      internalStream: 'Internal Stream',
+      enable: 'Enable',
+      disable: 'Disable',
+      maxRetries: 'Max Retries',
+      retryBackoffMs: 'Retry Backoff (ms)',
+      agentPromptContentPlaceholder: 'AGENT.md content...',
+      ekgOverviewHint: 'Runtime health, provider pressure, and error signature distribution.',
+      ekgActiveSources: 'active sources',
+      ekgActiveChannels: 'active channels',
+      ekgErrorsCount: 'errors',
+      dashboardTopErrorSignature: 'Top error signature',
+      dashboardWorkloadSnapshot: '24h workload pressure snapshot',
+      dashboardRecentFailedTasks: 'recent failed tasks',
       subagentGroup: 'Subagent Group',
+      allAgents: 'All Agents',
+      agents: 'Agents',
+      subagentDispatch: 'Subagent Dispatch',
+      subagentDispatchHint: 'Operator-only panel. Dispatch a task directly to a subagent without going through the main chat loop.',
+      dispatchToSubagent: 'Dispatch Task',
+      subagentTaskPlaceholder: 'Describe the task to run on the selected subagent...',
+      subagentLabelPlaceholder: 'Optional task label...',
+      subagentTaskDispatched: 'Subagent task dispatched.',
+      replyTo: 'Reply To',
+      toAgent: 'To',
+      selfRefresh: 'Self Refresh',
+      internalEvent: 'Internal Event',
       noSubagentStream: 'No subagent internal stream yet.',
       subagentGroupReadonly: 'Subagent group is read-only.',
       startConversation: 'Start a conversation',
@@ -229,6 +258,7 @@ const resources = {
       skillsDeleteMessage: 'Are you sure you want to delete this skill?',
       skillsClawhubMissingTitle: 'clawhub not detected',
       skillsClawhubMissingMessage: 'clawhub is not installed. Install dependencies and clawhub automatically?',
+      skillsInstallPanelHint: 'Click "Install now" to bootstrap the skill environment. If Node.js/npm is missing, ClawGo will install it first, then install clawhub.',
       skillsInstallNow: 'Install now',
       skillsInstallingDeps: 'Installing node/npm and clawhub...',
       skillsInstallFailedTitle: 'Install failed',
@@ -275,6 +305,7 @@ const resources = {
       sourceMemoryTodo: 'memory_todo',
       statusRunning: 'running',
       statusWaiting: 'waiting',
+      idle: 'idle',
       statusBlocked: 'blocked',
       statusSuccess: 'success',
       statusError: 'error',
@@ -299,6 +330,8 @@ const resources = {
       recipientId: 'recipient id',
       languageZh: '中文',
       languageEn: 'English',
+      expand: 'Expand',
+      collapse: 'Collapse',
       configRoot: '(root)',
       configCommaSeparatedHint: ', a, b',
       configLabels: {
@@ -535,6 +568,10 @@ const resources = {
       subagentDeleteConfirmTitle: '删除子代理档案',
       subagentDeleteConfirmMessage: '确认永久删除子代理档案 "{{id}}"？',
       sidebarCore: '核心',
+      sidebarMain: '主入口',
+      sidebarRuntime: '运行态',
+      sidebarConfig: '配置',
+      sidebarKnowledge: '知识与调试',
       sidebarSystem: '系统',
       sidebarOps: '运维',
       sidebarInsights: '洞察',
@@ -576,7 +613,32 @@ const resources = {
       noNodes: '无可用节点',
       sessions: '会话',
       mainChat: '主对话',
+      internalStream: '内部流',
+      enable: '启用',
+      disable: '停用',
+      maxRetries: '最大重试次数',
+      retryBackoffMs: '重试退避（毫秒）',
+      agentPromptContentPlaceholder: 'AGENT.md 内容...',
+      ekgOverviewHint: '运行时健康、Provider 压力与错误签名分布。',
+      ekgActiveSources: '活跃来源',
+      ekgActiveChannels: '活跃通道',
+      ekgErrorsCount: '错误数',
+      dashboardTopErrorSignature: 'Top 错误签名',
+      dashboardWorkloadSnapshot: '24 小时业务负载快照',
+      dashboardRecentFailedTasks: '最近失败任务',
       subagentGroup: '子代理群组',
+      allAgents: '全部代理',
+      agents: '代理',
+      subagentDispatch: '子代理派发',
+      subagentDispatchHint: '仅用于运维/调试。可直接向子代理发任务，不经过主对话链路。',
+      dispatchToSubagent: '发起任务',
+      subagentTaskPlaceholder: '描述要发给当前子代理的任务...',
+      subagentLabelPlaceholder: '可选任务标签...',
+      subagentTaskDispatched: '子代理任务已发起。',
+      replyTo: '回复给',
+      toAgent: '发送给',
+      selfRefresh: '自我刷新',
+      internalEvent: '内部事件',
       noSubagentStream: '当前还没有子代理内部流。',
       subagentGroupReadonly: '子代理群组为只读视图。',
       startConversation: '开始对话',
@@ -688,6 +750,7 @@ const resources = {
       skillsDeleteMessage: '确认删除这个技能吗？',
       skillsClawhubMissingTitle: '未检测到 clawhub',
       skillsClawhubMissingMessage: '检测到系统中未安装 clawhub。是否自动安装依赖环境并安装 clawhub？',
+      skillsInstallPanelHint: '点击“立即安装”即可初始化技能环境。如果系统缺少 Node.js/npm，ClawGo 会先安装它们，再安装 clawhub。',
       skillsInstallNow: '立即安装',
       skillsInstallingDeps: '正在安装 node/npm 与 clawhub...',
       skillsInstallFailedTitle: '安装失败',
@@ -734,6 +797,7 @@ const resources = {
       sourceMemoryTodo: 'memory_todo',
       statusRunning: 'running',
       statusWaiting: 'waiting',
+      idle: '空闲',
       statusBlocked: 'blocked',
       statusSuccess: 'success',
       statusError: 'error',
@@ -758,6 +822,8 @@ const resources = {
       recipientId: '接收者 ID',
       languageZh: '中文',
       languageEn: 'English',
+      expand: '展开',
+      collapse: '收起',
       configRoot: '（根）',
       configCommaSeparatedHint: '，例如 a,b',
       configLabels: {
diff --git a/webui/src/pages/Chat.tsx b/webui/src/pages/Chat.tsx
index 02c3d23..ef82d12 100644
--- a/webui/src/pages/Chat.tsx
+++ b/webui/src/pages/Chat.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Paperclip, Send, MessageSquare, RefreshCw } from 'lucide-react';
 import { motion } from 'motion/react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
+import { useUI } from '../context/UIContext';
 import { ChatItem } from '../types';
 
 type StreamItem = {
@@ -17,31 +18,147 @@ type StreamItem = {
   content?: string;
   from_agent?: string;
   to_agent?: string;
+  reply_to?: string;
+  message_id?: string;
   status?: string;
 };
 
+type RenderedChatItem = ChatItem & {
+  id: string;
+  actorKey?: string;
+  actorName?: string;
+  avatarText?: string;
+  avatarClassName?: string;
+  metaLine?: string;
+  isReadonlyGroup?: boolean;
+};
+
+type RegistryAgent = {
+  agent_id?: string;
+  display_name?: string;
+  role?: string;
+  enabled?: boolean;
+  transport?: string;
+};
+
+type RuntimeTask = {
+  id?: string;
+  agent_id?: string;
+  status?: string;
+  updated?: number;
+  created?: number;
+  waiting_for_reply?: boolean;
+};
+
+type AgentRuntimeBadge = {
+  status: 'running' | 'waiting' | 'failed' | 'completed' | 'idle';
+  text: string;
+};
+
+function formatAgentName(agentID?: string): string {
+  const normalized = String(agentID || '').trim();
+  if (!normalized) return 'Unknown Agent';
+  if (normalized === 'main') return 'Main Agent';
+  return normalized
+    .split(/[-_.:]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+function avatarSeed(key?: string): string {
+  const palette = [
+    'bg-emerald-600/80 text-white',
+    'bg-sky-600/80 text-white',
+    'bg-violet-600/80 text-white',
+    'bg-amber-600/80 text-white',
+    'bg-rose-600/80 text-white',
+    'bg-cyan-600/80 text-white',
+    'bg-fuchsia-600/80 text-white',
+  ];
+  const source = String(key || 'agent');
+  let hash = 0;
+  for (let i = 0; i < source.length; i += 1) {
+    hash = (hash * 31 + source.charCodeAt(i)) | 0;
+  }
+  return palette[Math.abs(hash) % palette.length];
+}
+
+function avatarText(name?: string): string {
+  const parts = String(name || '')
+    .split(/\s+/)
+    .filter(Boolean);
+  if (parts.length === 0) return 'A';
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return `${parts[0][0] || ''}${parts[1][0] || ''}`.toUpperCase();
+}
+
+function messageActorKey(item: StreamItem): string {
+  return String(item.from_agent || item.agent_id || item.to_agent || 'subagent').trim() || 'subagent';
+}
+
+function collectActors(items: StreamItem[]): string[] {
+  const set = new Set<string>();
+  items.forEach((item) => {
+    [item.agent_id, item.from_agent, item.to_agent].forEach((value) => {
+      const v = String(value || '').trim();
+      if (v) set.add(v);
+    });
+  });
+  return Array.from(set).sort((a, b) => a.localeCompare(b));
+}
+
 const Chat: React.FC = () => {
   const { t } = useTranslation();
   const { q, sessions } = useAppContext();
-  const [chat, setChat] = useState<ChatItem[]>([]);
+  const ui = useUI();
+  const [mainChat, setMainChat] = useState<RenderedChatItem[]>([]);
+  const [subagentStream, setSubagentStream] = useState<StreamItem[]>([]);
+  const [registryAgents, setRegistryAgents] = useState<RegistryAgent[]>([]);
   const [msg, setMsg] = useState('');
   const [fileSelected, setFileSelected] = useState(false);
   const [chatTab, setChatTab] = useState<'main' | 'subagents'>('main');
-  const [sessionKey, setSessionKey] = useState('main');
+  const [sessionKey, setSessionKey] = useState('');
+  const [selectedStreamAgents, setSelectedStreamAgents] = useState<string[]>([]);
+  const [dispatchAgentID, setDispatchAgentID] = useState('');
+  const [dispatchTask, setDispatchTask] = useState('');
+  const [dispatchLabel, setDispatchLabel] = useState('');
+  const [runtimeTasks, setRuntimeTasks] = useState<RuntimeTask[]>([]);
   const chatEndRef = useRef<HTMLDivElement>(null);
+  const chatScrollRef = useRef<HTMLDivElement>(null);
+  const shouldAutoScrollRef = useRef(true);
+  const historyRequestRef = useRef(0);
+
+  const isNearBottom = () => {
+    const container = chatScrollRef.current;
+    if (!container) return true;
+    const threshold = 64;
+    return container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
+  };
+
+  const scrollToBottom = (behavior: ScrollBehavior = 'smooth') => {
+    chatEndRef.current?.scrollIntoView({ behavior });
+  };
 
   useEffect(() => {
-    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [chat]);
+    if (shouldAutoScrollRef.current) {
+      scrollToBottom(chatTab === 'main' ? 'smooth' : 'auto');
+    }
+  }, [chatTab, mainChat, subagentStream]);
 
-  const loadHistory = async () => {
+  const loadHistory = async (requestedSessionKey?: string) => {
+    const targetSessionKey = String(requestedSessionKey || sessionKey || '').trim();
+    if (!targetSessionKey) return;
+    const requestID = ++historyRequestRef.current;
     try {
-      const qs = q ? `${q}&session=${encodeURIComponent(sessionKey)}` : `?session=${encodeURIComponent(sessionKey)}`;
+      shouldAutoScrollRef.current = isNearBottom() || chatTab !== 'main';
+      const qs = q ? `${q}&session=${encodeURIComponent(targetSessionKey)}` : `?session=${encodeURIComponent(targetSessionKey)}`;
       const r = await fetch(`/webui/api/chat/history${qs}`);
       if (!r.ok) return;
       const j = await r.json();
+      if (requestID !== historyRequestRef.current) return;
       const arr = Array.isArray(j.messages) ? j.messages : [];
-      const mapped: ChatItem[] = arr.map((m: any) => {
+      const mapped: RenderedChatItem[] = arr.map((m: any, index: number) => {
         const baseRole = String(m.role || 'assistant');
         let role: ChatItem['role'] = 'assistant';
         if (baseRole === 'user') role = 'user';
@@ -59,9 +176,27 @@ const Chat: React.FC = () => {
         if (baseRole === 'tool') {
           text = `[${t('toolOutput')}]\n${text}`;
         }
-        return { role, text, label };
+
+        const actorName = role === 'user' ? t('user') : role === 'tool' || role === 'exec' ? t('exec') : role === 'system' ? t('system') : t('agent');
+        const avatarClassName = role === 'user'
+          ? 'bg-indigo-600/90 text-white'
+          : role === 'tool' || role === 'exec'
+            ? 'bg-amber-600/80 text-white'
+            : role === 'system'
+              ? 'bg-zinc-700 text-zinc-100'
+              : 'bg-emerald-600/80 text-white';
+
+        return {
+          id: `${targetSessionKey}-${index}`,
+          role,
+          text,
+          label,
+          actorName,
+          avatarText: role === 'user' ? 'U' : role === 'tool' || role === 'exec' ? 'E' : role === 'system' ? 'S' : 'A',
+          avatarClassName,
+        };
       });
-      setChat(mapped);
+      setMainChat(mapped);
     } catch (e) {
       console.error(e);
     }
@@ -69,27 +204,52 @@ const Chat: React.FC = () => {
 
   const loadSubagentGroup = async () => {
     try {
+      shouldAutoScrollRef.current = isNearBottom() || chatTab !== 'subagents';
       const r = await fetch(`/webui/api/subagents_runtime${q}`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'stream_all', limit: 200, task_limit: 24 }),
+        body: JSON.stringify({ action: 'stream_all', limit: 300, task_limit: 36 }),
       });
       if (!r.ok) return;
       const j = await r.json();
       const arr = Array.isArray(j?.result?.items) ? j.result.items : [];
-      const mapped: ChatItem[] = arr.map((item: StreamItem) => {
-        const isEvent = item.kind === 'event';
-        const label = isEvent
-          ? `${item.agent_id || 'subagent'} · ${item.event_type || 'event'}`
-          : `${item.from_agent || '-'} -> ${item.to_agent || '-'} · ${item.message_type || 'message'}`;
-        const body = isEvent ? (item.message || '') : (item.content || '');
-        return {
-          role: 'assistant',
-          label,
-          text: `${body}${item.status ? `\n\nstatus: ${item.status}` : ''}`,
-        };
+      setSubagentStream(arr);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const loadRegistryAgents = async () => {
+    try {
+      const r = await fetch(`/webui/api/subagents_runtime${q}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'registry' }),
       });
-      setChat(mapped);
+      if (!r.ok) return;
+      const j = await r.json();
+      const items = Array.isArray(j?.result?.items) ? j.result.items : [];
+      const filtered = items.filter((item: RegistryAgent) => item?.agent_id && item.enabled !== false);
+      setRegistryAgents(filtered);
+      if (!dispatchAgentID && filtered.length > 0) {
+        setDispatchAgentID(String(filtered[0].agent_id || ''));
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const loadRuntimeTasks = async () => {
+    try {
+      const r = await fetch(`/webui/api/subagents_runtime${q}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'list' }),
+      });
+      if (!r.ok) return;
+      const j = await r.json();
+      const items = Array.isArray(j?.result?.items) ? j.result.items : [];
+      setRuntimeTasks(items);
     } catch (e) {
       console.error(e);
     }
@@ -103,17 +263,28 @@ const Chat: React.FC = () => {
     const f = input?.files?.[0];
 
     if (f) {
-      const fd = new FormData(); fd.append('file', f);
+      const fd = new FormData();
+      fd.append('file', f);
       try {
         const ur = await fetch(`/webui/api/upload${q}`, { method: 'POST', body: fd });
-        const uj = await ur.json(); media = uj.path || '';
+        const uj = await ur.json();
+        media = uj.path || '';
       } catch (e) {
         console.error('L0053', e);
       }
     }
 
     const userText = msg + (media ? `\n[Attached File: ${f?.name}]` : '');
-    setChat((prev) => [...prev, { role: 'user', text: userText, label: t('user') }]);
+    shouldAutoScrollRef.current = true;
+    setMainChat((prev) => [...prev, {
+      id: `local-user-${Date.now()}`,
+      role: 'user',
+      text: userText,
+      label: t('user'),
+      actorName: t('user'),
+      avatarText: 'U',
+      avatarClassName: 'bg-indigo-600/90 text-white',
+    }]);
 
     const currentMsg = msg;
     setMsg('');
@@ -133,39 +304,63 @@ const Chat: React.FC = () => {
       const decoder = new TextDecoder();
       let assistantText = '';
 
-      setChat((prev) => [...prev, { role: 'assistant', text: '', label: t('agent') }]);
+      setMainChat((prev) => [...prev, {
+        id: `local-assistant-${Date.now()}`,
+        role: 'assistant',
+        text: '',
+        label: t('agent'),
+        actorName: t('agent'),
+        avatarText: 'A',
+        avatarClassName: 'bg-emerald-600/80 text-white',
+      }]);
 
       while (true) {
         const { value, done } = await reader.read();
         if (done) break;
         const chunk = decoder.decode(value, { stream: true });
         assistantText += chunk;
-        setChat((prev) => {
+        setMainChat((prev) => {
           const next = [...prev];
-          next[next.length - 1] = { role: 'assistant', text: assistantText, label: t('agent') };
+          next[next.length - 1] = {
+            ...next[next.length - 1],
+            text: assistantText,
+          };
           return next;
         });
       }
 
-      // refresh full persisted history (includes tool/internal traces)
       loadHistory();
     } catch (e) {
-      setChat((prev) => [...prev, { role: 'system', text: t('chatServerError'), label: t('system') }]);
+      setMainChat((prev) => [...prev, {
+        id: `local-system-${Date.now()}`,
+        role: 'system',
+        text: t('chatServerError'),
+        label: t('system'),
+        actorName: t('system'),
+        avatarText: 'S',
+        avatarClassName: 'bg-zinc-700 text-zinc-100',
+      }]);
     }
   }
 
   useEffect(() => {
+    shouldAutoScrollRef.current = true;
     if (chatTab === 'main') {
-      loadHistory();
+      if (sessionKey) {
+        loadHistory(sessionKey);
+      }
       return;
     }
     loadSubagentGroup();
+    loadRegistryAgents();
+    loadRuntimeTasks();
   }, [q, chatTab, sessionKey]);
 
   useEffect(() => {
     if (chatTab !== 'subagents') return;
     const timer = window.setInterval(() => {
       loadSubagentGroup();
+      loadRuntimeTasks();
     }, 5000);
     return () => window.clearInterval(timer);
   }, [q, chatTab]);
@@ -175,21 +370,161 @@ const Chat: React.FC = () => {
   useEffect(() => {
     if (chatTab !== 'main') return;
     if (!userSessions.length) return;
-    if (!userSessions.some((s: any) => s.key === sessionKey)) {
+    if (!sessionKey || !userSessions.some((s: any) => s.key === sessionKey)) {
       setSessionKey(userSessions[0].key);
     }
   }, [chatTab, sessionKey, userSessions]);
 
+  const streamActors = useMemo(() => collectActors(subagentStream), [subagentStream]);
+
+  useEffect(() => {
+    setSelectedStreamAgents((prev) => prev.filter((agent) => streamActors.includes(agent)));
+  }, [streamActors]);
+
+  const renderedSubagentChat = useMemo<RenderedChatItem[]>(() => {
+    const replyIndex = new Map<string, { actor: string; messageType: string }>();
+    subagentStream.forEach((item) => {
+      const messageID = String(item.message_id || '').trim();
+      if (!messageID) return;
+      replyIndex.set(messageID, {
+        actor: formatAgentName(item.from_agent || item.agent_id),
+        messageType: String(item.message_type || 'message'),
+      });
+    });
+
+    return subagentStream
+      .filter((item) => {
+        if (selectedStreamAgents.length === 0) return true;
+        const actors = [item.agent_id, item.from_agent, item.to_agent]
+          .map((value) => String(value || '').trim())
+          .filter(Boolean);
+        return actors.some((actor) => selectedStreamAgents.includes(actor));
+      })
+      .map((item, index) => {
+        const actorKey = messageActorKey(item);
+        const actorName = formatAgentName(actorKey);
+        let metaLine = '';
+
+        if (item.kind === 'message') {
+          const replyMeta = String(item.reply_to || '').trim() ? replyIndex.get(String(item.reply_to || '').trim()) : null;
+          if (replyMeta) {
+            metaLine = `${t('replyTo')}: ${replyMeta.actor}`;
+          } else if (item.from_agent && item.to_agent && item.from_agent === item.to_agent) {
+            metaLine = t('selfRefresh');
+          } else if (item.to_agent) {
+            metaLine = `${t('toAgent')}: ${formatAgentName(item.to_agent)}`;
+          }
+          if (item.message_type) {
+            metaLine = metaLine ? `${metaLine} · ${item.message_type}` : String(item.message_type);
+          }
+        } else {
+          metaLine = item.event_type === 'resumed' || item.event_type === 'recovered'
+            ? t('selfRefresh')
+            : String(item.event_type || t('internalEvent'));
+        }
+
+        const text = item.kind === 'event' ? (item.message || '') : (item.content || '');
+        const label = item.kind === 'event'
+          ? `${actorName} · ${item.event_type || t('internalEvent')}`
+          : actorName;
+
+        return {
+          id: `${item.kind || 'item'}-${item.message_id || item.task_id || item.at || index}-${index}`,
+          role: 'assistant',
+          text: text || t('empty'),
+          label,
+          actorKey,
+          actorName,
+          avatarText: avatarText(actorName),
+          avatarClassName: avatarSeed(actorKey),
+          metaLine,
+          isReadonlyGroup: true,
+        };
+      });
+  }, [selectedStreamAgents, subagentStream, t]);
+
+  const displayedChat = chatTab === 'main' ? mainChat : renderedSubagentChat;
+
+  const runtimeBadgeByAgent = useMemo<Record<string, AgentRuntimeBadge>>(() => {
+    const latest = new Map<string, RuntimeTask>();
+    runtimeTasks.forEach((task) => {
+      const agentID = String(task.agent_id || '').trim();
+      if (!agentID) return;
+      const current = latest.get(agentID);
+      const taskTime = Math.max(Number(task.updated || 0), Number(task.created || 0));
+      const currentTime = current ? Math.max(Number(current.updated || 0), Number(current.created || 0)) : 0;
+      if (!current || taskTime >= currentTime) {
+        latest.set(agentID, task);
+      }
+    });
+    const out: Record<string, AgentRuntimeBadge> = {};
+    latest.forEach((task, agentID) => {
+      if (task.waiting_for_reply) {
+        out[agentID] = { status: 'waiting', text: t('statusWaiting') };
+        return;
+      }
+      switch (String(task.status || '').trim()) {
+        case 'running':
+          out[agentID] = { status: 'running', text: t('statusRunning') };
+          break;
+        case 'failed':
+          out[agentID] = { status: 'failed', text: t('statusError') };
+          break;
+        case 'completed':
+          out[agentID] = { status: 'completed', text: t('statusSuccess') };
+          break;
+        default:
+          out[agentID] = { status: 'idle', text: t('idle') };
+      }
+    });
+    return out;
+  }, [runtimeTasks, t]);
+
+  const dispatchSubagentTask = async () => {
+    const task = dispatchTask.trim();
+    const agentID = dispatchAgentID.trim();
+    if (!task || !agentID) return;
+    await ui.withLoading(async () => {
+      const r = await fetch(`/webui/api/subagents_runtime${q}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          action: 'spawn',
+          agent_id: agentID,
+          task,
+          label: dispatchLabel.trim(),
+          origin_channel: 'webui',
+          origin_chat_id: 'subagent-group',
+        }),
+      });
+      if (!r.ok) {
+        throw new Error(await r.text());
+      }
+      setDispatchTask('');
+      setDispatchLabel('');
+      await Promise.all([loadSubagentGroup(), loadRegistryAgents(), loadRuntimeTasks()]);
+      await ui.notify({ title: t('saved'), message: t('subagentTaskDispatched') });
+    }, t('creating')).catch(async (err) => {
+      await ui.notify({ title: t('requestFailed'), message: err instanceof Error ? err.message : String(err) });
+    });
+  };
+
+  const toggleStreamAgent = (agent: string) => {
+    setSelectedStreamAgents((prev) => (
+      prev.includes(agent) ? prev.filter((item) => item !== agent) : [...prev, agent]
+    ));
+  };
+
   return (
-    <div className="flex h-full">
+    <div className="flex h-full min-w-0">
       <div className="flex-1 flex flex-col bg-zinc-950/50">
         <div className="px-4 py-3 border-b border-zinc-800 flex items-center justify-between gap-3 flex-wrap">
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 flex-wrap min-w-0">
             <button
               onClick={() => setChatTab('main')}
               className={`px-3 py-1.5 rounded-lg text-xs ${chatTab === 'main' ? 'bg-indigo-600 text-white' : 'bg-zinc-900 border border-zinc-700 text-zinc-300'}`}
             >
-              Main Chat
+              {t('mainChat')}
             </button>
             <button
               onClick={() => setChatTab('subagents')}
@@ -198,66 +533,165 @@ const Chat: React.FC = () => {
               {t('subagentGroup')}
             </button>
             {chatTab === 'main' && (
-              <select value={sessionKey} onChange={(e) => setSessionKey(e.target.value)} className="bg-zinc-900 border border-zinc-700 rounded px-2 py-1 text-xs text-zinc-200">
+              <select value={sessionKey} onChange={(e) => setSessionKey(e.target.value)} className="max-w-full bg-zinc-900 border border-zinc-700 rounded px-2 py-1 text-xs text-zinc-200">
                 {userSessions.map((s: any) => <option key={s.key} value={s.key}>{s.title || s.key}</option>)}
               </select>
             )}
           </div>
-          <button onClick={chatTab === 'main' ? loadHistory : loadSubagentGroup} className="flex items-center gap-1 px-2 py-1 text-xs rounded bg-zinc-800 hover:bg-zinc-700"><RefreshCw className="w-3 h-3"/>{t('reloadHistory')}</button>
+          <button onClick={chatTab === 'main' ? loadHistory : loadSubagentGroup} className="flex items-center gap-1 px-2 py-1 text-xs rounded bg-zinc-800 hover:bg-zinc-700"><RefreshCw className="w-3 h-3" />{t('reloadHistory')}</button>
         </div>
 
-        <div className="flex-1 overflow-y-auto p-6 space-y-6">
-          {chat.length === 0 ? (
-            <div className="h-full flex flex-col items-center justify-center text-zinc-500 space-y-4">
-              <div className="w-16 h-16 rounded-2xl bg-zinc-900 flex items-center justify-center border border-zinc-800">
-                <MessageSquare className="w-8 h-8 text-zinc-600" />
+        {chatTab === 'subagents' && (
+          <div className="px-4 py-3 border-b border-zinc-800 bg-zinc-950/40 flex flex-wrap gap-2">
+            <button
+              onClick={() => setSelectedStreamAgents([])}
+              className={`px-2.5 py-1 rounded-full text-xs border ${selectedStreamAgents.length === 0 ? 'bg-amber-600 text-white border-amber-500' : 'bg-zinc-900 border-zinc-700 text-zinc-300'}`}
+            >
+              {t('allAgents')}
+            </button>
+            {streamActors.map((agent) => (
+              <button
+                key={agent}
+                onClick={() => toggleStreamAgent(agent)}
+                className={`px-2.5 py-1 rounded-full text-xs border ${selectedStreamAgents.includes(agent) ? 'bg-zinc-100 text-zinc-950 border-zinc-100' : 'bg-zinc-900 border-zinc-700 text-zinc-300'}`}
+              >
+                {formatAgentName(agent)}
+              </button>
+            ))}
+          </div>
+        )}
+
+        <div className="flex-1 min-h-0 flex flex-col xl:flex-row">
+          {chatTab === 'subagents' && (
+            <div className="w-full xl:w-[320px] xl:shrink-0 border-b xl:border-b-0 xl:border-r border-zinc-800 bg-zinc-950/70 p-4 flex flex-col gap-4 max-h-[46vh] xl:max-h-none overflow-y-auto">
+              <div>
+                <div className="text-xs uppercase tracking-wider text-zinc-500 mb-1">{t('subagentDispatch')}</div>
+                <div className="text-sm text-zinc-300">{t('subagentDispatchHint')}</div>
               </div>
-              <p className="text-sm font-medium">{chatTab === 'main' ? t('startConversation') : t('noSubagentStream')}</p>
-            </div>
-          ) : (
-            chat.map((m, i) => {
-              const isUser = m.role === 'user';
-              const isExec = m.role === 'tool' || m.role === 'exec';
-              const isSystem = m.role === 'system';
-              const avatar = isUser ? 'U' : isExec ? 'E' : isSystem ? 'S' : 'A';
-              const avatarClass = isUser
-                ? 'bg-indigo-600/90 text-white'
-                : isExec
-                  ? 'bg-amber-600/80 text-white'
-                  : isSystem
-                    ? 'bg-zinc-700 text-zinc-100'
-                    : 'bg-emerald-600/80 text-white';
-              const bubbleClass = isUser
-                ? 'bg-indigo-600 text-white rounded-br-sm'
-                : isExec
-                  ? 'bg-amber-500/10 text-amber-100 rounded-bl-sm border border-amber-500/30'
-                  : isSystem
-                    ? 'bg-zinc-700/40 text-zinc-100 rounded-bl-sm border border-zinc-600/40'
-                    : 'bg-zinc-800/80 text-zinc-200 rounded-bl-sm border border-zinc-700/50';
-
-              return (
-                <motion.div
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  key={i}
-                  className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}
+              <div className="space-y-3">
+                <select
+                  value={dispatchAgentID}
+                  onChange={(e) => setDispatchAgentID(e.target.value)}
+                  className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-3 py-2 text-sm text-zinc-200"
                 >
-                  <div className={`flex items-start gap-2 max-w-[96%] ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
-                    <div className={`w-7 h-7 mt-1 rounded-full text-xs font-bold flex items-center justify-center shrink-0 ${avatarClass}`}>{avatar}</div>
-                    <div className={`max-w-[92%] rounded-2xl px-4 py-3 shadow-sm ${bubbleClass}`}>
-                      <div className="text-[11px] opacity-80 mb-1">{m.label || (isUser ? t('user') : isExec ? t('exec') : isSystem ? t('system') : t('agent'))}</div>
-                      <p className="whitespace-pre-wrap text-[14px] leading-relaxed">{m.text}</p>
-                    </div>
-                  </div>
-                </motion.div>
-              );
-            })
+                  {registryAgents.map((agent) => (
+                    <option key={agent.agent_id} value={agent.agent_id}>
+                      {formatAgentName(agent.display_name || agent.agent_id)} · {agent.role || '-'}
+                    </option>
+                  ))}
+                </select>
+                <textarea
+                  value={dispatchTask}
+                  onChange={(e) => setDispatchTask(e.target.value)}
+                  placeholder={t('subagentTaskPlaceholder')}
+                  className="w-full min-h-[180px] resize-none bg-zinc-900 border border-zinc-800 rounded-xl px-3 py-3 text-sm text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-amber-500"
+                />
+                <input
+                  value={dispatchLabel}
+                  onChange={(e) => setDispatchLabel(e.target.value)}
+                  placeholder={t('subagentLabelPlaceholder')}
+                  className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-3 py-2 text-sm text-zinc-200 placeholder:text-zinc-500 focus:outline-none focus:border-amber-500"
+                />
+                <button
+                  onClick={dispatchSubagentTask}
+                  disabled={!dispatchAgentID.trim() || !dispatchTask.trim()}
+                  className="w-full px-3 py-2 rounded-xl bg-amber-600 hover:bg-amber-500 disabled:opacity-50 text-white text-sm font-medium"
+                >
+                  {t('dispatchToSubagent')}
+                </button>
+              </div>
+              <div className="border-t border-zinc-800 pt-4 min-h-0 flex flex-col">
+                <div className="text-xs uppercase tracking-wider text-zinc-500 mb-2">{t('agents')}</div>
+                <div className="overflow-y-auto space-y-2 min-h-0">
+                  {registryAgents.map((agent) => {
+                    const active = dispatchAgentID === agent.agent_id;
+                    const badge = runtimeBadgeByAgent[String(agent.agent_id || '')];
+                    const badgeClass = badge?.status === 'running'
+                      ? 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30'
+                      : badge?.status === 'waiting'
+                        ? 'bg-amber-500/15 text-amber-300 border-amber-500/30'
+                        : badge?.status === 'failed'
+                          ? 'bg-rose-500/15 text-rose-300 border-rose-500/30'
+                          : badge?.status === 'completed'
+                            ? 'bg-sky-500/15 text-sky-300 border-sky-500/30'
+                            : 'bg-zinc-800 text-zinc-400 border-zinc-700';
+                    return (
+                      <button
+                        key={agent.agent_id}
+                        onClick={() => setDispatchAgentID(String(agent.agent_id || ''))}
+                        className={`w-full text-left rounded-xl border px-3 py-2 ${active ? 'border-amber-500 bg-amber-500/10' : 'border-zinc-800 bg-zinc-900/70 hover:bg-zinc-900'}`}
+                      >
+                        <div className="flex items-center justify-between gap-2">
+                          <div className="text-sm font-medium text-zinc-100">{formatAgentName(agent.display_name || agent.agent_id)}</div>
+                          <span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] ${badgeClass}`}>{badge?.text || t('idle')}</span>
+                        </div>
+                        <div className="text-xs text-zinc-500">{agent.agent_id} · {agent.role || '-'}</div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
           )}
-          <div ref={chatEndRef} />
+          <div
+            ref={chatScrollRef}
+            onScroll={() => {
+              shouldAutoScrollRef.current = isNearBottom();
+            }}
+            className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-4 sm:space-y-6 min-w-0"
+          >
+            {displayedChat.length === 0 ? (
+              <div className="h-full flex flex-col items-center justify-center text-zinc-500 space-y-4">
+                <div className="w-16 h-16 rounded-2xl bg-zinc-900 flex items-center justify-center border border-zinc-800">
+                  <MessageSquare className="w-8 h-8 text-zinc-600" />
+                </div>
+                <p className="text-sm font-medium">{chatTab === 'main' ? t('startConversation') : t('noSubagentStream')}</p>
+              </div>
+            ) : (
+              displayedChat.map((m, i) => {
+                const isUser = m.role === 'user';
+                const isExec = m.role === 'tool' || m.role === 'exec';
+                const isSystem = m.role === 'system';
+                const bubbleClass = isUser
+                  ? 'bg-indigo-600 text-white rounded-br-sm'
+                  : isExec
+                    ? 'bg-amber-500/10 text-amber-100 rounded-bl-sm border border-amber-500/30'
+                    : isSystem
+                      ? 'bg-zinc-700/40 text-zinc-100 rounded-bl-sm border border-zinc-600/40'
+                      : m.isReadonlyGroup
+                        ? 'bg-zinc-900/85 text-zinc-200 rounded-bl-sm border border-zinc-700/60'
+                        : 'bg-zinc-800/80 text-zinc-200 rounded-bl-sm border border-zinc-700/50';
+
+                return (
+                  <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    key={m.id || i}
+                    className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}
+                  >
+                    <div className={`flex items-start gap-2 max-w-full sm:max-w-[96%] ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
+                      <div className={`w-9 h-9 mt-1 rounded-full text-[11px] font-bold flex items-center justify-center shrink-0 ${m.avatarClassName || (isUser ? 'bg-indigo-600/90 text-white' : 'bg-emerald-600/80 text-white')}`}>{m.avatarText || (isUser ? 'U' : 'A')}</div>
+                      <div className={`max-w-[calc(100vw-6rem)] sm:max-w-[92%] rounded-2xl px-4 py-3 shadow-sm ${bubbleClass}`}>
+                        <div className="flex items-center justify-between gap-3 mb-1">
+                          <div className="text-[11px] opacity-85">{m.actorName || m.label || (isUser ? t('user') : isExec ? t('exec') : isSystem ? t('system') : t('agent'))}</div>
+                          {m.metaLine && <div className="text-[11px] text-zinc-400">{m.metaLine}</div>}
+                        </div>
+                        {m.label && m.actorName && m.label !== m.actorName && (
+                          <div className="text-[11px] text-zinc-500 mb-2">{m.label}</div>
+                        )}
+                        <p className="whitespace-pre-wrap text-[14px] leading-relaxed">{m.text}</p>
+                      </div>
+                    </div>
+                  </motion.div>
+                );
+              })
+            )}
+            <div ref={chatEndRef} />
+          </div>
         </div>
 
-        <div className="p-4 bg-zinc-950 border-t border-zinc-800">
-          <div className="max-w-4xl mx-auto relative flex items-center">
+        <div className="p-3 sm:p-4 bg-zinc-950 border-t border-zinc-800">
+          <div className="w-full relative flex items-center">
             <input
               type="file"
               id="file"
@@ -266,9 +700,7 @@ const Chat: React.FC = () => {
             />
             <label
               htmlFor="file"
-              className={`absolute left-3 p-2 rounded-full cursor-pointer transition-colors ${
-                fileSelected ? 'text-indigo-400 bg-indigo-500/10' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200'
-              }`}
+              className={`absolute left-3 p-2 rounded-full cursor-pointer transition-colors ${fileSelected ? 'text-indigo-400 bg-indigo-500/10' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200'}`}
             >
               <Paperclip className="w-5 h-5" />
             </label>
diff --git a/webui/src/pages/Config.tsx b/webui/src/pages/Config.tsx
index 734bcaf..20ef292 100644
--- a/webui/src/pages/Config.tsx
+++ b/webui/src/pages/Config.tsx
@@ -21,7 +21,7 @@ function setPath(obj: any, path: string, value: any) {
 const Config: React.FC = () => {
   const { t } = useTranslation();
   const ui = useUI();
-  const { cfg, setCfg, cfgRaw, setCfgRaw, loadConfig, hotReloadFieldDetails, q } = useAppContext();
+  const { cfg, setCfg, cfgRaw, setCfgRaw, loadConfig, hotReloadFieldDetails, q, setConfigEditing } = useAppContext();
   const [showRaw, setShowRaw] = useState(false);
   const [basicMode, setBasicMode] = useState(true);
   const [hotOnly, setHotOnly] = useState(false);
@@ -87,12 +87,22 @@ const Config: React.FC = () => {
     return out;
   }, [baseline, currentPayload]);
 
+  const isDirty = useMemo(() => {
+    if (baseline == null) return false;
+    return JSON.stringify(baseline) !== JSON.stringify(currentPayload || {});
+  }, [baseline, currentPayload]);
+
   useEffect(() => {
     if (baseline == null && cfg && Object.keys(cfg).length > 0) {
       setBaseline(JSON.parse(JSON.stringify(cfg)));
     }
   }, [cfg, baseline]);
 
+  useEffect(() => {
+    setConfigEditing(isDirty);
+    return () => setConfigEditing(false);
+  }, [isDirty, setConfigEditing]);
+
   function updateProxyField(name: string, field: string, value: any) {
     setCfg((v) => setPath(v, `providers.proxies.${name}.${field}`, value));
   }
@@ -187,6 +197,7 @@ const Config: React.FC = () => {
 
       await ui.notify({ title: t('saved'), message: t('configSaved') });
       setBaseline(JSON.parse(JSON.stringify(payload)));
+      setConfigEditing(false);
       setShowDiff(false);
     } catch (e) {
       await ui.notify({ title: t('requestFailed'), message: `${t('saveConfigFailed')}: ${e}` });
@@ -205,7 +216,7 @@ const Config: React.FC = () => {
 
       <div className="flex items-center justify-between gap-3 flex-wrap">
         <div className="flex items-center gap-3 flex-wrap">
-          <button onClick={async () => { await loadConfig(); setTimeout(() => setBaseline(JSON.parse(JSON.stringify(cfg))), 0); }} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors">
+          <button onClick={async () => { await loadConfig(true); setTimeout(() => setBaseline(JSON.parse(JSON.stringify(cfg))), 0); }} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors">
             <RefreshCw className="w-4 h-4" /> {t('reload')}
           </button>
           <button onClick={() => setShowDiff(true)} className="px-3 py-2 bg-zinc-900 border border-zinc-800 rounded-lg text-sm">{t('configDiffPreview')}</button>
diff --git a/webui/src/pages/Cron.tsx b/webui/src/pages/Cron.tsx
index 82bbde2..42a5678 100644
--- a/webui/src/pages/Cron.tsx
+++ b/webui/src/pages/Cron.tsx
@@ -168,10 +168,10 @@ const Cron: React.FC = () => {
   }
 
   return (
-    <div className="p-8 max-w-7xl mx-auto space-y-8">
-      <div className="flex items-center justify-between">
+    <div className="p-4 md:p-6 xl:p-8 w-full space-y-6 xl:space-y-8">
+      <div className="flex items-center justify-between flex-wrap gap-3">
         <h1 className="text-2xl font-semibold tracking-tight">{t('cronJobs')}</h1>
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-3 flex-wrap">
           <button onClick={() => refreshCron()} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors">
             <RefreshCw className="w-4 h-4" /> {t('refresh')}
           </button>
@@ -181,7 +181,7 @@ const Cron: React.FC = () => {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6">
         {cron.map((j) => {
           const schedule = formatSchedule(j, t);
           return (
diff --git a/webui/src/pages/Dashboard.tsx b/webui/src/pages/Dashboard.tsx
index 1834ab7..96cd8e1 100644
--- a/webui/src/pages/Dashboard.tsx
+++ b/webui/src/pages/Dashboard.tsx
@@ -1,92 +1,182 @@
 import React, { useMemo } from 'react';
-import { RefreshCw, Activity, MessageSquare, Clock, Server, CheckCircle2, Pause } from 'lucide-react';
+import { RefreshCw, Activity, MessageSquare, Clock, Server, Wrench, Sparkles, AlertTriangle, Workflow } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import StatCard from '../components/StatCard';
 
 const Dashboard: React.FC = () => {
   const { t } = useTranslation();
-  const { isGatewayOnline, sessions, cron, nodes, refreshAll, gatewayVersion, webuiVersion } = useAppContext();
+  const {
+    isGatewayOnline,
+    sessions,
+    cron,
+    nodes,
+    refreshAll,
+    gatewayVersion,
+    webuiVersion,
+    skills,
+    cfg,
+    taskQueueItems,
+    ekgSummary,
+  } = useAppContext();
 
-  const onlineNodes = useMemo(() => {
+  const parsedNodes = useMemo(() => {
     try {
       const arr = JSON.parse(nodes);
-      return Array.isArray(arr) ? arr.filter((n: any) => n?.online).length : 0;
+      return Array.isArray(arr) ? arr : [];
     } catch {
-      return 0;
+      return [];
     }
   }, [nodes]);
 
+  const onlineNodes = useMemo(
+    () => parsedNodes.filter((n: any) => n?.online).length,
+    [parsedNodes],
+  );
+
+  const pausedCron = useMemo(
+    () => cron.filter((job) => !job.enabled).length,
+    [cron],
+  );
+
+  const enabledCron = useMemo(
+    () => cron.filter((job) => job.enabled).length,
+    [cron],
+  );
+
+  const subagentCount = useMemo(() => {
+    const subagents = (cfg as any)?.agents?.subagents || {};
+    return Object.keys(subagents).length;
+  }, [cfg]);
+
+  const recentTasks = useMemo(() => {
+    return [...taskQueueItems]
+      .sort((a: any, b: any) => String(b.time || '').localeCompare(String(a.time || '')))
+      .slice(0, 8);
+  }, [taskQueueItems]);
+
+  const recentFailures = useMemo(() => {
+    return recentTasks.filter((item: any) => String(item.status || '').toLowerCase() === 'error').slice(0, 5);
+  }, [recentTasks]);
+
+  const ekgEscalationCount = Number(ekgSummary?.escalation_count || 0);
+  const ekgTopProvider = (Array.isArray(ekgSummary?.provider_top_workload) ? ekgSummary.provider_top_workload[0]?.key : '') || '-';
+  const ekgTopErrSig = (Array.isArray(ekgSummary?.errsig_top_workload) ? ekgSummary.errsig_top_workload[0]?.key : '') || '-';
+
   return (
-    <div className="p-4 md:p-8 max-w-7xl mx-auto space-y-5 md:space-y-8">
-      <div className="flex items-center justify-between gap-3 flex-wrap">
+    <div className="p-4 md:p-6 xl:p-8 w-full space-y-6 xl:space-y-8">
+      <div className="flex items-start justify-between gap-4 flex-wrap">
         <div>
-          <h1 className="text-xl md:text-2xl font-semibold tracking-tight">{t('dashboard')}</h1>
-          <div className="mt-1 text-xs text-zinc-500">{t('gateway')}: {gatewayVersion} · {t('webui')}: {webuiVersion}</div>
+          <h1 className="text-2xl font-semibold tracking-tight">{t('dashboard')}</h1>
+          <div className="mt-2 text-sm text-zinc-500">
+            {t('gateway')}: <span className="font-mono text-zinc-300">{gatewayVersion}</span>
+            {' · '}
+            {t('webui')}: <span className="font-mono text-zinc-300">{webuiVersion}</span>
+          </div>
         </div>
-        <button onClick={refreshAll} className="flex items-center gap-2 px-3 md:px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors shrink-0">
+        <button onClick={refreshAll} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors shrink-0">
           <RefreshCw className="w-4 h-4" /> {t('refreshAll')}
         </button>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-6 gap-4">
         <StatCard title={t('gatewayStatus')} value={isGatewayOnline ? t('online') : t('offline')} icon={<Activity className={`w-6 h-6 ${isGatewayOnline ? 'text-emerald-400' : 'text-red-400'}`} />} />
         <StatCard title={t('activeSessions')} value={sessions.length} icon={<MessageSquare className="w-6 h-6 text-blue-400" />} />
-        <StatCard title={t('cronJobs')} value={cron.length} icon={<Clock className="w-6 h-6 text-purple-400" />} />
         <StatCard title={t('nodesOnline')} value={onlineNodes} icon={<Server className="w-6 h-6 text-amber-400" />} />
+        <StatCard title={t('cronJobs')} value={cron.length} icon={<Clock className="w-6 h-6 text-purple-400" />} />
+        <StatCard title={t('skills')} value={skills.length} icon={<Sparkles className="w-6 h-6 text-pink-400" />} />
+        <StatCard title={t('subagentsRuntime')} value={subagentCount} icon={<Wrench className="w-6 h-6 text-cyan-400" />} />
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6">
-          <h2 className="text-lg font-medium mb-4 flex items-center gap-2 text-zinc-200">
-            <Clock className="w-5 h-5 text-zinc-400"/> {t('recentCron')}
-          </h2>
-          <div className="space-y-3">
-            {cron.slice(0, 5).map(j => (
-              <div key={j.id} className="flex items-center justify-between p-3 bg-zinc-950/50 rounded-xl border border-zinc-800/50">
-                <span className="font-medium text-sm text-zinc-300">{j.name || j.id}</span>
-                {j.enabled ? (
-                  <span className="flex items-center gap-1.5 text-xs font-medium text-emerald-400 bg-emerald-400/10 px-2.5 py-1 rounded-full">
-                    <CheckCircle2 className="w-3.5 h-3.5"/> {t('active')}
-                  </span>
-                ) : (
-                  <span className="flex items-center gap-1.5 text-xs font-medium text-zinc-400 bg-zinc-800 px-2.5 py-1 rounded-full">
-                    <Pause className="w-3.5 h-3.5"/> {t('paused')}
-                  </span>
-                )}
-              </div>
-            ))}
-            {cron.length === 0 && <div className="text-sm text-zinc-500 text-center py-8">{t('noCronJobs')}</div>}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5 min-h-[148px]">
+          <div className="flex items-center gap-2 text-zinc-200 mb-2">
+            <AlertTriangle className="w-4 h-4 text-amber-400" />
+            <div className="text-sm font-medium">{t('ekgEscalations')}</div>
+          </div>
+          <div className="text-3xl font-semibold text-zinc-100">{ekgEscalationCount}</div>
+          <div className="mt-2 text-xs text-zinc-500">{t('dashboardTopErrorSignature')}: {ekgTopErrSig}</div>
+        </div>
+        <div className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5 min-h-[148px]">
+          <div className="flex items-center gap-2 text-zinc-200 mb-2">
+            <Workflow className="w-4 h-4 text-sky-400" />
+            <div className="text-sm font-medium">{t('ekgTopProvidersWorkload')}</div>
+          </div>
+          <div className="text-2xl font-semibold text-zinc-100 truncate">{ekgTopProvider}</div>
+          <div className="mt-2 text-xs text-zinc-500">{t('dashboardWorkloadSnapshot')}</div>
+        </div>
+        <div className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5 min-h-[148px]">
+          <div className="flex items-center gap-2 text-zinc-200 mb-2">
+            <Activity className="w-4 h-4 text-rose-400" />
+            <div className="text-sm font-medium">{t('taskAudit')}</div>
+          </div>
+          <div className="text-3xl font-semibold text-zinc-100">{recentFailures.length}</div>
+          <div className="mt-2 text-xs text-zinc-500">{t('dashboardRecentFailedTasks')}</div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 items-stretch">
+        <div className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6 min-h-[340px] h-full">
+          <div className="flex items-center gap-2 mb-5 text-zinc-200">
+            <Clock className="w-5 h-5 text-zinc-400" />
+            <h2 className="text-lg font-medium">{t('recentCron')}</h2>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="rounded-xl border border-zinc-800 bg-zinc-950/60 p-4 min-h-[104px]">
+              <div className="text-[11px] uppercase tracking-widest text-zinc-500">{t('active')}</div>
+              <div className="mt-2 text-2xl font-semibold text-zinc-100">{enabledCron}</div>
+            </div>
+            <div className="rounded-xl border border-zinc-800 bg-zinc-950/60 p-4 min-h-[104px]">
+              <div className="text-[11px] uppercase tracking-widest text-zinc-500">{t('paused')}</div>
+              <div className="mt-2 text-2xl font-semibold text-zinc-100">{pausedCron}</div>
+            </div>
+          </div>
+          <div className="h-[180px] flex items-center justify-center text-sm text-zinc-500">
+            {cron.length === 0 ? t('noCronJobs') : `${cron.length} ${t('cronJobs')}`}
           </div>
         </div>
-        <div className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6 flex flex-col h-[400px]">
-          <h2 className="text-lg font-medium mb-4 flex items-center gap-2 text-zinc-200">
-            <Server className="w-5 h-5 text-zinc-400"/> {t('nodesSnapshot')}
-          </h2>
-          <div className="flex-1 bg-zinc-950/80 rounded-xl border border-zinc-800/50 p-4 overflow-auto">
-            {(() => {
-              try {
-                const parsedNodes = JSON.parse(nodes);
-                if (!Array.isArray(parsedNodes) || parsedNodes.length === 0) {
-                  return <div className="text-sm text-zinc-500 text-center py-8">{t('noNodes')}</div>;
-                }
-                return (
-                  <div className="space-y-3">
-                    {parsedNodes.map((node: any, i: number) => (
-                      <div key={node.id || i} className="flex items-center justify-between p-3 bg-zinc-900/50 rounded-xl border border-zinc-800/50">
-                        <div className="flex items-center gap-3">
-                          <div className={`w-2 h-2 rounded-full ${node.online ? 'bg-emerald-500' : 'bg-red-500'}`} />
-                          <span className="font-medium text-sm text-zinc-300">{node.name || node.id || `Node ${i + 1}`}</span>
-                        </div>
-                        <span className="text-xs font-mono text-zinc-500">{node.version || node.ip || ''}</span>
-                      </div>
-                    ))}
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 items-stretch">
+        <div className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6 min-h-[340px] h-full">
+          <div className="flex items-center gap-2 mb-5 text-zinc-200">
+            <Activity className="w-5 h-5 text-zinc-400" />
+            <h2 className="text-lg font-medium">{t('taskAudit')}</h2>
+          </div>
+          <div className="space-y-3">
+            {recentTasks.length === 0 ? (
+              <div className="text-sm text-zinc-500 text-center py-10">-</div>
+            ) : recentTasks.map((task: any, index: number) => (
+              <div key={`${task.task_id || 'task'}-${index}`} className="rounded-xl border border-zinc-800 bg-zinc-950/60 p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="text-sm font-medium text-zinc-200 truncate">{task.task_id || `task-${index + 1}`}</div>
+                    <div className="text-xs text-zinc-500 truncate">{task.channel || '-'} · {task.source || '-'}</div>
                   </div>
-                );
-              } catch (e) {
-                return <pre className="font-mono text-[13px] leading-relaxed text-zinc-400">{nodes}</pre>;
-              }
-            })()}
+                  <div className={`shrink-0 rounded-full px-2.5 py-1 text-[11px] font-medium ${String(task.status || '').toLowerCase() === 'error' ? 'bg-rose-500/10 text-rose-300' : String(task.status || '').toLowerCase() === 'running' ? 'bg-emerald-500/10 text-emerald-300' : 'bg-zinc-800 text-zinc-400'}`}>
+                    {task.status || '-'}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6 min-h-[340px] h-full">
+          <div className="flex items-center gap-2 mb-5 text-zinc-200">
+            <AlertTriangle className="w-5 h-5 text-zinc-400" />
+            <h2 className="text-lg font-medium">{t('statusError')}</h2>
+          </div>
+          <div className="space-y-3">
+            {recentFailures.length === 0 ? (
+              <div className="text-sm text-zinc-500 text-center py-10">-</div>
+            ) : recentFailures.map((task: any, index: number) => (
+              <div key={`${task.task_id || 'failed'}-${index}`} className="rounded-xl border border-zinc-800 bg-zinc-950/60 p-4">
+                <div className="text-sm font-medium text-zinc-200 truncate">{task.task_id || `task-${index + 1}`}</div>
+                <div className="text-xs text-zinc-500 truncate mt-1">{task.source || '-'} · {task.channel || '-'}</div>
+                <div className="text-xs text-rose-300 mt-2 break-all">{task.error || task.block_reason || '-'}</div>
+              </div>
+            ))}
           </div>
         </div>
       </div>
diff --git a/webui/src/pages/EKG.tsx b/webui/src/pages/EKG.tsx
index 74ef976..207e3d9 100644
--- a/webui/src/pages/EKG.tsx
+++ b/webui/src/pages/EKG.tsx
@@ -1,9 +1,109 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { AlertTriangle, RefreshCw, Route, ServerCrash, Workflow } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 
 type EKGKV = { key?: string; score?: number; count?: number };
 
+function StatCard({
+  title,
+  value,
+  subtitle,
+  accent,
+  icon,
+}: {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  accent: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="text-[11px] uppercase tracking-widest text-zinc-500">{title}</div>
+          <div className="mt-2 text-3xl font-semibold text-zinc-100">{value}</div>
+          {subtitle && <div className="mt-1 text-xs text-zinc-500">{subtitle}</div>}
+        </div>
+        <div className={`flex h-10 w-10 items-center justify-center rounded-xl ${accent}`}>{icon}</div>
+      </div>
+    </div>
+  );
+}
+
+function KVDistributionCard({
+  title,
+  data,
+}: {
+  title: string;
+  data: Record<string, number>;
+}) {
+  const entries = useMemo(() => (
+    Object.entries(data).sort((a, b) => b[1] - a[1])
+  ), [data]);
+  const maxValue = entries.length > 0 ? Math.max(...entries.map(([, value]) => value)) : 0;
+
+  return (
+    <div className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5">
+      <div className="mb-4 text-sm font-medium text-zinc-200">{title}</div>
+      <div className="space-y-3">
+        {entries.length === 0 ? (
+          <div className="text-sm text-zinc-500">-</div>
+        ) : entries.map(([key, value]) => (
+          <div key={key} className="space-y-1">
+            <div className="flex items-center justify-between gap-3 text-xs">
+              <div className="truncate text-zinc-300">{key}</div>
+              <div className="shrink-0 font-mono text-zinc-500">{value}</div>
+            </div>
+            <div className="h-2 rounded-full bg-zinc-800 overflow-hidden">
+              <div
+                className="h-full rounded-full bg-gradient-to-r from-amber-500/70 to-orange-400/80"
+                style={{ width: `${maxValue > 0 ? (value / maxValue) * 100 : 0}%` }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function RankingCard({
+  title,
+  items,
+  valueMode,
+}: {
+  title: string;
+  items: EKGKV[];
+  valueMode: 'score' | 'count';
+}) {
+  return (
+    <div className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5">
+      <div className="mb-4 text-sm font-medium text-zinc-200">{title}</div>
+      <div className="space-y-2">
+        {items.length === 0 ? (
+          <div className="text-sm text-zinc-500">-</div>
+        ) : items.map((item, index) => (
+          <div key={`${item.key || '-'}-${index}`} className="flex items-start gap-3 rounded-xl border border-zinc-800 bg-zinc-950/60 px-3 py-2">
+            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-[11px] font-semibold text-zinc-300">
+              {index + 1}
+            </div>
+            <div className="min-w-0 flex-1">
+              <div className="truncate text-sm text-zinc-200">{item.key || '-'}</div>
+              <div className="text-xs text-zinc-500">
+                {valueMode === 'score'
+                  ? Number(item.score || 0).toFixed(2)
+                  : `x${item.count || 0}`}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 const EKG: React.FC = () => {
   const { t } = useTranslation();
   const { q } = useAppContext();
@@ -15,7 +115,6 @@ const EKG: React.FC = () => {
   const [providerTop, setProviderTop] = useState<EKGKV[]>([]);
   const [providerTopWorkload, setProviderTopWorkload] = useState<EKGKV[]>([]);
   const [errsigTop, setErrsigTop] = useState<EKGKV[]>([]);
-  const [errsigTopHeartbeat, setErrsigTopHeartbeat] = useState<EKGKV[]>([]);
   const [errsigTopWorkload, setErrsigTopWorkload] = useState<EKGKV[]>([]);
   const [sourceStats, setSourceStats] = useState<Record<string, number>>({});
   const [channelStats, setChannelStats] = useState<Record<string, number>>({});
@@ -31,7 +130,6 @@ const EKG: React.FC = () => {
       setProviderTop(Array.isArray(ej.provider_top) ? ej.provider_top : []);
       setProviderTopWorkload(Array.isArray(ej.provider_top_workload) ? ej.provider_top_workload : []);
       setErrsigTop(Array.isArray(ej.errsig_top) ? ej.errsig_top : []);
-      setErrsigTopHeartbeat(Array.isArray(ej.errsig_top_heartbeat) ? ej.errsig_top_heartbeat : []);
       setErrsigTopWorkload(Array.isArray(ej.errsig_top_workload) ? ej.errsig_top_workload : []);
       setSourceStats(ej.source_stats && typeof ej.source_stats === 'object' ? ej.source_stats : {});
       setChannelStats(ej.channel_stats && typeof ej.channel_stats === 'object' ? ej.channel_stats : {});
@@ -48,59 +146,53 @@ const EKG: React.FC = () => {
     if (typeof window !== 'undefined') window.localStorage.setItem('taskAudit.ekgWindow', ekgWindow);
   }, [ekgWindow]);
 
+  const sourceCount = Object.keys(sourceStats).length;
+  const channelCount = Object.keys(channelStats).length;
+  const totalErrorHits = errsigTop.reduce((sum, item) => sum + Number(item.count || 0), 0);
+  const topWorkloadProvider = providerTopWorkload[0]?.key || '-';
+
   return (
-    <div className="h-full p-4 md:p-6 flex flex-col gap-4">
-      <div className="flex items-center justify-between gap-2 flex-wrap">
-        <h1 className="text-xl md:text-2xl font-semibold">{t('ekg')}</h1>
+    <div className="h-full w-full p-4 md:p-6 xl:p-8 flex flex-col gap-6">
+      <div className="flex items-start justify-between gap-4 flex-wrap">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">{t('ekg')}</h1>
+          <div className="mt-1 text-sm text-zinc-500">{t('ekgOverviewHint')}</div>
+        </div>
         <div className="flex items-center gap-2">
-          <select value={ekgWindow} onChange={(e)=>setEkgWindow(e.target.value as '6h' | '24h' | '7d')} className="bg-zinc-900 border border-zinc-700 rounded px-2 py-1 text-xs">
+          <select value={ekgWindow} onChange={(e) => setEkgWindow(e.target.value as '6h' | '24h' | '7d')} className="bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-sm">
             <option value="6h">6h</option>
             <option value="24h">24h</option>
             <option value="7d">7d</option>
           </select>
-          <button onClick={fetchData} className="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-sm">{loading ? t('loading') : t('refresh')}</button>
+          <button onClick={fetchData} className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-sm">
+            <RefreshCw className="w-4 h-4" />
+            {loading ? t('loading') : t('refresh')}
+          </button>
         </div>
       </div>
 
-      <div className="grid grid-cols-1 xl:grid-cols-3 gap-3 text-xs">
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900/40 p-3">
-          <div className="text-zinc-500 mb-1">{t('ekgEscalations')}</div>
-          <div className="text-zinc-100 text-2xl font-semibold">{escalationCount}</div>
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
+        <StatCard title={t('ekgEscalations')} value={escalationCount} subtitle={`${ekgWindow} window`} accent="bg-amber-500/10 text-amber-300 border border-amber-500/20" icon={<AlertTriangle className="w-5 h-5" />} />
+        <StatCard title={t('ekgSourceStats')} value={sourceCount} subtitle={t('ekgActiveSources')} accent="bg-sky-500/10 text-sky-300 border border-sky-500/20" icon={<Workflow className="w-5 h-5" />} />
+        <StatCard title={t('ekgChannelStats')} value={channelCount} subtitle={t('ekgActiveChannels')} accent="bg-violet-500/10 text-violet-300 border border-violet-500/20" icon={<Route className="w-5 h-5" />} />
+        <StatCard title={t('ekgTopProvidersWorkload')} value={topWorkloadProvider} subtitle={`${t('ekgErrorsCount')} ${totalErrorHits}`} accent="bg-rose-500/10 text-rose-300 border border-rose-500/20" icon={<ServerCrash className="w-5 h-5" />} />
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-[1.1fr_1fr] gap-6 min-h-0">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 min-h-0">
+          <KVDistributionCard title={t('ekgSourceStats')} data={sourceStats} />
+          <KVDistributionCard title={t('ekgChannelStats')} data={channelStats} />
         </div>
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900/40 p-3">
-          <div className="text-zinc-500 mb-1">{t('ekgSourceStats')}</div>
-          <div className="space-y-1">{Object.keys(sourceStats).length === 0 ? <div className="text-zinc-500">-</div> : Object.entries(sourceStats).map(([k,v]) => <div key={k} className="text-zinc-200">{k}: <span className="text-zinc-400">{v}</span></div>)}</div>
-        </div>
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900/40 p-3">
-          <div className="text-zinc-500 mb-1">{t('ekgChannelStats')}</div>
-          <div className="space-y-1">{Object.keys(channelStats).length === 0 ? <div className="text-zinc-500">-</div> : Object.entries(channelStats).map(([k,v]) => <div key={k} className="text-zinc-200">{k}: <span className="text-zinc-400">{v}</span></div>)}</div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 min-h-0">
+          <RankingCard title={t('ekgTopProvidersWorkload')} items={providerTopWorkload} valueMode="score" />
+          <RankingCard title={t('ekgTopProvidersAll')} items={providerTop} valueMode="score" />
         </div>
       </div>
 
-      <div className="grid grid-cols-1 xl:grid-cols-2 gap-3 text-xs">
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900/40 p-3">
-          <div className="text-zinc-500 mb-1">{t('ekgTopProvidersWorkload')}</div>
-          <div className="space-y-1">{providerTopWorkload.length === 0 ? <div className="text-zinc-500">-</div> : providerTopWorkload.map((x,i)=><div key={i} className="text-zinc-200">{x.key} <span className="text-zinc-500">({Number(x.score||0).toFixed(2)})</span></div>)}</div>
-        </div>
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900/40 p-3">
-          <div className="text-zinc-500 mb-1">{t('ekgTopProvidersAll')}</div>
-          <div className="space-y-1">{providerTop.length === 0 ? <div className="text-zinc-500">-</div> : providerTop.map((x,i)=><div key={i} className="text-zinc-200">{x.key} <span className="text-zinc-500">({Number(x.score||0).toFixed(2)})</span></div>)}</div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 xl:grid-cols-3 gap-3 text-xs flex-1 min-h-0">
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900/40 p-3 overflow-y-auto">
-          <div className="text-zinc-500 mb-1">{t('ekgTopErrsigWorkload')}</div>
-          <div className="space-y-1">{errsigTopWorkload.length === 0 ? <div className="text-zinc-500">-</div> : errsigTopWorkload.map((x,i)=><div key={i} className="text-zinc-200 truncate">{x.key} <span className="text-zinc-500">(x{x.count||0})</span></div>)}</div>
-        </div>
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900/40 p-3 overflow-y-auto">
-          <div className="text-zinc-500 mb-1">{t('ekgTopErrsigHeartbeat')}</div>
-          <div className="space-y-1">{errsigTopHeartbeat.length === 0 ? <div className="text-zinc-500">-</div> : errsigTopHeartbeat.map((x,i)=><div key={i} className="text-zinc-200 truncate">{x.key} <span className="text-zinc-500">(x{x.count||0})</span></div>)}</div>
-        </div>
-        <div className="rounded-xl border border-zinc-800 bg-zinc-900/40 p-3 overflow-y-auto">
-          <div className="text-zinc-500 mb-1">{t('ekgTopErrsigAll')}</div>
-          <div className="space-y-1">{errsigTop.length === 0 ? <div className="text-zinc-500">-</div> : errsigTop.map((x,i)=><div key={i} className="text-zinc-200 truncate">{x.key} <span className="text-zinc-500">(x{x.count||0})</span></div>)}</div>
-        </div>
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 min-h-0 flex-1">
+        <RankingCard title={t('ekgTopErrsigWorkload')} items={errsigTopWorkload} valueMode="count" />
+        <RankingCard title={t('ekgTopErrsigAll')} items={errsigTop} valueMode="count" />
       </div>
     </div>
   );
diff --git a/webui/src/pages/LogCodes.tsx b/webui/src/pages/LogCodes.tsx
index 4af2172..983ce69 100644
--- a/webui/src/pages/LogCodes.tsx
+++ b/webui/src/pages/LogCodes.tsx
@@ -40,14 +40,14 @@ const LogCodes: React.FC = () => {
   }, [items, kw]);
 
   return (
-    <div className="p-8 max-w-7xl mx-auto space-y-6">
-      <div className="flex items-center justify-between gap-3">
+    <div className="p-4 md:p-6 xl:p-8 w-full space-y-6">
+      <div className="flex items-center justify-between gap-3 flex-wrap">
         <h1 className="text-2xl font-semibold tracking-tight">{t('logCodes')}</h1>
         <input
           value={kw}
           onChange={(e) => setKw(e.target.value)}
           placeholder={t('logCodesSearchPlaceholder')}
-          className="w-72 bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500"
+          className="w-full sm:w-80 bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500"
         />
       </div>
 
diff --git a/webui/src/pages/Logs.tsx b/webui/src/pages/Logs.tsx
index e42b880..accbc73 100644
--- a/webui/src/pages/Logs.tsx
+++ b/webui/src/pages/Logs.tsx
@@ -165,8 +165,8 @@ const Logs: React.FC = () => {
   };
 
   return (
-    <div className="p-8 max-w-7xl mx-auto space-y-6 h-full flex flex-col">
-      <div className="flex items-center justify-between">
+    <div className="p-4 md:p-6 xl:p-8 w-full space-y-6 h-full flex flex-col">
+      <div className="flex items-start justify-between gap-3 flex-wrap">
         <div className="flex items-center gap-3">
           <h1 className="text-2xl font-semibold tracking-tight">{t('logs')}</h1>
           <div className={`flex items-center gap-1.5 px-2.5 py-0.5 rounded-md text-[10px] font-bold uppercase tracking-wider border ${
@@ -176,7 +176,7 @@ const Logs: React.FC = () => {
             {isStreaming ? t('live') : t('paused')}
           </div>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-wrap">
           <button
             onClick={() => setShowRaw(!showRaw)}
             className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors text-zinc-300"
diff --git a/webui/src/pages/Memory.tsx b/webui/src/pages/Memory.tsx
index 65d08e1..74d03bd 100644
--- a/webui/src/pages/Memory.tsx
+++ b/webui/src/pages/Memory.tsx
@@ -111,8 +111,8 @@ const Memory: React.FC = () => {
   }, [q]);
 
   return (
-    <div className="flex h-full">
-      <aside className="w-72 border-r border-zinc-800 p-4 space-y-2 overflow-y-auto">
+    <div className="flex h-full flex-col lg:flex-row">
+      <aside className="w-full lg:w-72 border-b lg:border-b-0 lg:border-r border-zinc-800 p-4 space-y-2 overflow-y-auto">
         <div className="flex items-center justify-between">
           <h2 className="font-semibold">{t('memoryFiles')}</h2>
           <button onClick={createFile} className="px-2 py-1 rounded bg-zinc-800">+</button>
@@ -124,12 +124,12 @@ const Memory: React.FC = () => {
           </div>
         ))}
       </aside>
-      <main className="flex-1 p-4 space-y-3">
+      <main className="flex-1 p-4 md:p-6 space-y-3 min-h-0">
         <div className="flex items-center justify-between">
           <h2 className="font-semibold">{active || t('noFileSelected')}</h2>
           <button onClick={saveFile} className="px-3 py-1 rounded bg-indigo-600">{t('save')}</button>
         </div>
-        <textarea value={content} onChange={(e) => setContent(e.target.value)} className="w-full h-[80vh] bg-zinc-900 border border-zinc-800 rounded p-3" />
+        <textarea value={content} onChange={(e) => setContent(e.target.value)} className="w-full h-[50vh] lg:h-[80vh] bg-zinc-900 border border-zinc-800 rounded p-3" />
       </main>
     </div>
   );
diff --git a/webui/src/pages/Skills.tsx b/webui/src/pages/Skills.tsx
index 06846fc..70bce7c 100644
--- a/webui/src/pages/Skills.tsx
+++ b/webui/src/pages/Skills.tsx
@@ -183,13 +183,13 @@ const Skills: React.FC = () => {
   }
 
   return (
-    <div className="p-8 max-w-7xl mx-auto space-y-8">
+    <div className="p-4 md:p-6 xl:p-8 w-full space-y-6 xl:space-y-8">
       <input ref={uploadRef} type="file" accept=".zip,.tar,.tar.gz,.tgz" className="hidden" onChange={onArchiveSelected} />
 
-      <div className="flex items-center justify-between gap-3 flex-wrap">
+      <div className="flex items-start justify-between gap-3 flex-wrap">
         <h1 className="text-2xl font-semibold tracking-tight">{t('skills')}</h1>
-        <div className="flex items-center gap-2">
-          <input disabled={installingSkill} value={installName} onChange={(e) => setInstallName(e.target.value)} placeholder={t('skillsNamePlaceholder')} className="px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-sm disabled:opacity-60" />
+        <div className="flex items-center gap-2 flex-wrap w-full xl:w-auto">
+          <input disabled={installingSkill} value={installName} onChange={(e) => setInstallName(e.target.value)} placeholder={t('skillsNamePlaceholder')} className="w-full sm:w-72 px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-sm disabled:opacity-60" />
           <button disabled={installingSkill} onClick={installSkill} className="px-3 py-2 bg-emerald-600 hover:bg-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed text-white rounded-lg text-sm font-medium">{installingSkill ? t('loading') : t('install')}</button>
           <label className="flex items-center gap-2 text-xs text-zinc-400">
             <input
@@ -201,10 +201,18 @@ const Skills: React.FC = () => {
             {t('skillsIgnoreSuspicious')}
           </label>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-3 flex-wrap">
           <div className={`text-xs px-2 py-1 rounded-md border ${clawhubInstalled ? 'text-emerald-300 border-emerald-700/50 bg-emerald-900/20' : 'text-amber-300 border-amber-700/50 bg-amber-900/20'}`} title={clawhubPath || t('skillsClawhubNotFound')}>
             {t('skillsClawhubStatus')}: {clawhubInstalled ? t('installed') : t('notInstalled')}
           </div>
+          {!clawhubInstalled && (
+            <button
+              onClick={installClawHubIfNeeded}
+              className="flex items-center gap-2 px-4 py-2 bg-amber-600 hover:bg-amber-500 text-white rounded-lg text-sm font-medium transition-colors shadow-sm"
+            >
+              <Zap className="w-4 h-4" /> {t('skillsInstallNow')}
+            </button>
+          )}
           <button onClick={() => refreshSkills()} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors">
             <RefreshCw className="w-4 h-4" /> {t('refresh')}
           </button>
@@ -214,7 +222,14 @@ const Skills: React.FC = () => {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {!clawhubInstalled && (
+        <div className="rounded-2xl border border-amber-700/40 bg-amber-950/20 p-4 text-sm text-amber-100">
+          <div className="font-medium mb-1">{t('skillsClawhubMissingTitle')}</div>
+          <div className="text-amber-200/90">{t('skillsInstallPanelHint')}</div>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
         {skills.map(s => (
           <div key={s.id} className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6 flex flex-col shadow-sm group hover:border-zinc-700/50 transition-colors">
             <div className="flex items-start justify-between mb-4">
diff --git a/webui/src/pages/SubagentProfiles.tsx b/webui/src/pages/SubagentProfiles.tsx
index 2da7c87..5357f85 100644
--- a/webui/src/pages/SubagentProfiles.tsx
+++ b/webui/src/pages/SubagentProfiles.tsx
@@ -14,7 +14,6 @@ type SubagentProfile = {
   memory_namespace?: string;
   max_retries?: number;
   retry_backoff_ms?: number;
-  timeout_sec?: number;
   max_task_chars?: number;
   max_result_chars?: number;
   status?: 'active' | 'disabled' | string;
@@ -41,7 +40,6 @@ const emptyDraft: SubagentProfile = {
   tool_allowlist: [],
   max_retries: 0,
   retry_backoff_ms: 1000,
-  timeout_sec: 0,
   max_task_chars: 0,
   max_result_chars: 0,
 };
@@ -90,7 +88,6 @@ const SubagentProfiles: React.FC = () => {
       tool_allowlist: Array.isArray(next.tool_allowlist) ? next.tool_allowlist : [],
       max_retries: Number(next.max_retries || 0),
       retry_backoff_ms: Number(next.retry_backoff_ms || 1000),
-      timeout_sec: Number(next.timeout_sec || 0),
       max_task_chars: Number(next.max_task_chars || 0),
       max_result_chars: Number(next.max_result_chars || 0),
     });
@@ -152,7 +149,6 @@ const SubagentProfiles: React.FC = () => {
       tool_allowlist: Array.isArray(p.tool_allowlist) ? p.tool_allowlist : [],
       max_retries: Number(p.max_retries || 0),
       retry_backoff_ms: Number(p.retry_backoff_ms || 1000),
-      timeout_sec: Number(p.timeout_sec || 0),
       max_task_chars: Number(p.max_task_chars || 0),
       max_result_chars: Number(p.max_result_chars || 0),
     });
@@ -206,7 +202,6 @@ const SubagentProfiles: React.FC = () => {
           tool_allowlist: draft.tool_allowlist || [],
           max_retries: Number(draft.max_retries || 0),
           retry_backoff_ms: Number(draft.retry_backoff_ms || 0),
-          timeout_sec: Number(draft.timeout_sec || 0),
           max_task_chars: Number(draft.max_task_chars || 0),
           max_result_chars: Number(draft.max_result_chars || 0),
         }),
@@ -277,7 +272,7 @@ const SubagentProfiles: React.FC = () => {
   };
 
   return (
-    <div className="h-full p-4 md:p-6 flex flex-col gap-4">
+    <div className="h-full p-4 md:p-6 xl:p-8 flex flex-col gap-4">
       <div className="flex items-center justify-between">
         <h1 className="text-xl md:text-2xl font-semibold">{t('subagentProfiles')}</h1>
         <div className="flex items-center gap-2">
@@ -429,7 +424,7 @@ const SubagentProfiles: React.FC = () => {
                 value={promptFileContent}
                 onChange={(e) => setPromptFileContent(e.target.value)}
                 className="w-full px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded min-h-[220px]"
-                placeholder="AGENT.md content..."
+                placeholder={t('agentPromptContentPlaceholder')}
               />
               <div className="mt-2 flex items-center gap-2">
                 <button
@@ -443,7 +438,7 @@ const SubagentProfiles: React.FC = () => {
               </div>
             </div>
             <div>
-              <div className="text-xs text-zinc-400 mb-1">Max Retries</div>
+              <div className="text-xs text-zinc-400 mb-1">{t('maxRetries')}</div>
               <input
                 type="number"
                 min={0}
@@ -453,7 +448,7 @@ const SubagentProfiles: React.FC = () => {
               />
             </div>
             <div>
-              <div className="text-xs text-zinc-400 mb-1">Retry Backoff (ms)</div>
+              <div className="text-xs text-zinc-400 mb-1">{t('retryBackoffMs')}</div>
               <input
                 type="number"
                 min={0}
@@ -462,16 +457,6 @@ const SubagentProfiles: React.FC = () => {
                 className="w-full px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded"
               />
             </div>
-            <div>
-              <div className="text-xs text-zinc-400 mb-1">Timeout (sec)</div>
-              <input
-                type="number"
-                min={0}
-                value={Number(draft.timeout_sec || 0)}
-                onChange={(e) => setDraft({ ...draft, timeout_sec: Number(e.target.value) || 0 })}
-                className="w-full px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded"
-              />
-            </div>
             <div>
               <div className="text-xs text-zinc-400 mb-1">Max Task Chars</div>
               <input
@@ -507,14 +492,14 @@ const SubagentProfiles: React.FC = () => {
               disabled={!draft.agent_id}
               className="px-3 py-1.5 text-xs rounded bg-emerald-700/70 hover:bg-emerald-600 disabled:opacity-50"
             >
-              Enable
+              {t('enable')}
             </button>
             <button
               onClick={() => setStatus('disabled')}
               disabled={!draft.agent_id}
               className="px-3 py-1.5 text-xs rounded bg-amber-700/70 hover:bg-amber-600 disabled:opacity-50"
             >
-              Disable
+              {t('disable')}
             </button>
             <button
               onClick={remove}
diff --git a/webui/src/pages/Subagents.tsx b/webui/src/pages/Subagents.tsx
index 7496e4b..50e8f1e 100644
--- a/webui/src/pages/Subagents.tsx
+++ b/webui/src/pages/Subagents.tsx
@@ -17,7 +17,6 @@ type SubagentTask = {
   max_retries?: number;
   retry_count?: number;
   retry_backoff?: number;
-  timeout_sec?: number;
   max_task_chars?: number;
   max_result_chars?: number;
   created?: number;
@@ -345,7 +344,6 @@ const Subagents: React.FC = () => {
   const [dispatchTask, setDispatchTask] = useState('');
   const [dispatchAgentID, setDispatchAgentID] = useState('');
   const [dispatchRole, setDispatchRole] = useState('');
-  const [dispatchWaitTimeout, setDispatchWaitTimeout] = useState('120');
   const [dispatchReply, setDispatchReply] = useState<RouterReply | null>(null);
   const [dispatchMerged, setDispatchMerged] = useState('');
   const [threadDetail, setThreadDetail] = useState<AgentThread | null>(null);
@@ -790,6 +788,9 @@ const Subagents: React.FC = () => {
     if (!viewport) return;
 
     const handleWheel = (e: WheelEvent) => {
+      if (!(e.ctrlKey || e.metaKey)) {
+        return;
+      }
       e.preventDefault();
 
       const rect = viewport.getBoundingClientRect();
@@ -960,14 +961,14 @@ const Subagents: React.FC = () => {
   }, [selectedAgentLatestTask?.id, q, items.length]);
 
   return (
-    <div className="h-full p-4 md:p-6 flex flex-col gap-4">
-      <div className="flex items-center justify-between">
+    <div className="h-full p-4 md:p-6 xl:p-8 flex flex-col gap-4">
+      <div className="flex items-center justify-between gap-3 flex-wrap">
         <h1 className="text-xl md:text-2xl font-semibold">{t('subagentsRuntime')}</h1>
         <button onClick={() => load()} className="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-sm">{t('refresh')}</button>
       </div>
 
       <div className="flex-1 min-h-0 border border-zinc-800 rounded-2xl bg-zinc-900/40 p-4 flex flex-col gap-3">
-        <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center justify-between gap-3 flex-wrap">
           <div>
             <div className="text-xs text-zinc-400 uppercase tracking-wider">{t('agentTopology')}</div>
             <div className="text-sm text-zinc-500">{t('agentTopologyHint')}</div>
@@ -1073,7 +1074,7 @@ const Subagents: React.FC = () => {
             stopTopologyDrag();
             clearTopologyTooltip();
           }}
-          className="relative flex-1 min-h-[620px] xl:min-h-[760px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950"
+          className="relative flex-1 min-h-[420px] sm:min-h-[560px] xl:min-h-[760px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950"
           style={{ cursor: topologyDragging ? 'grabbing' : 'grab' }}
         >
           <SpaceParticles />
@@ -1171,10 +1172,13 @@ const Subagents: React.FC = () => {
             </div>
           )}
           {selectedAgentID && (
-            <div className="absolute top-4 right-4 bottom-4 z-20 w-[360px] rounded-2xl border border-zinc-800 bg-zinc-950/92 shadow-2xl shadow-black/40 backdrop-blur-md overflow-hidden flex flex-col">
+            <div
+              onWheelCapture={(event) => event.stopPropagation()}
+              className="absolute left-4 right-4 bottom-4 z-20 h-[48vh] xl:left-auto xl:right-4 xl:top-4 xl:bottom-4 xl:h-auto xl:w-[360px] rounded-2xl border border-zinc-800 bg-zinc-950/92 shadow-2xl shadow-black/40 backdrop-blur-md overflow-hidden flex flex-col"
+            >
               <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-800">
                 <div className="min-w-0">
-                  <div className="text-xs text-zinc-500 uppercase tracking-wider">Internal Stream</div>
+                  <div className="text-xs text-zinc-500 uppercase tracking-wider">{t('internalStream')}</div>
                   <div className="text-sm font-semibold text-zinc-100 truncate">{selectedAgentDisplayName}</div>
                   <div className="text-[11px] text-zinc-500 truncate">{selectedAgentID}</div>
                 </div>
@@ -1187,7 +1191,7 @@ const Subagents: React.FC = () => {
                   }}
                   className="px-2 py-1 rounded bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
                 >
-                  Close
+                  {t('close')}
                 </button>
               </div>
               <div className="px-4 py-3 border-b border-zinc-800 text-xs text-zinc-400">
diff --git a/webui/src/pages/TaskAudit.tsx b/webui/src/pages/TaskAudit.tsx
index d840b3b..9626bd9 100644
--- a/webui/src/pages/TaskAudit.tsx
+++ b/webui/src/pages/TaskAudit.tsx
@@ -67,7 +67,7 @@ const TaskAudit: React.FC = () => {
   const selectedPretty = useMemo(() => selected ? JSON.stringify(selected, null, 2) : '', [selected]);
 
   return (
-    <div className="h-full p-4 md:p-6 flex flex-col gap-4">
+    <div className="h-full p-4 md:p-6 xl:p-8 flex flex-col gap-4">
       <div className="flex items-center justify-between flex-wrap gap-3">
         <h1 className="text-xl md:text-2xl font-semibold">{t('taskAudit')}</h1>
         <div className="flex items-center gap-2">