diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index 4e86e68..053c79d 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -2,7 +2,7 @@ import React, { Suspense, lazy } from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { AppProvider } from './context/AppContext';
 import { UIProvider } from './context/UIContext';
-import Layout from './components/Layout';
+import Layout from './components/layout/Layout';
 
 const Dashboard = lazy(() => import('./pages/Dashboard'));
 const Chat = lazy(() => import('./pages/Chat'));
diff --git a/webui/src/components/SectionPanel.tsx b/webui/src/components/SectionPanel.tsx
deleted file mode 100644
index d411cfb..0000000
--- a/webui/src/components/SectionPanel.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-
-type SectionPanelProps = {
-  actions?: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-  headerClassName?: string;
-  icon?: React.ReactNode;
-  subtitle?: React.ReactNode;
-  title?: React.ReactNode;
-};
-
-function joinClasses(...values: Array<string | undefined | false>) {
-  return values.filter(Boolean).join(' ');
-}
-
-const SectionPanel: React.FC<SectionPanelProps> = ({
-  actions,
-  children,
-  className,
-  headerClassName,
-  icon,
-  subtitle,
-  title,
-}) => {
-  return (
-    <div className={joinClasses('brand-card rounded-[30px] border border-zinc-800/80 p-6', className)}>
-      {title || subtitle || actions || icon ? (
-        <div className={joinClasses('mb-5 flex items-center justify-between gap-3 flex-wrap', headerClassName)}>
-          <div>
-            {title ? (
-              <div className="flex items-center gap-2 text-zinc-200">
-                {icon}
-                <h2 className="text-lg font-medium">{title}</h2>
-              </div>
-            ) : null}
-            {subtitle ? <div className="mt-1 text-xs text-zinc-500">{subtitle}</div> : null}
-          </div>
-          {actions ? <div className="text-xs text-zinc-500">{actions}</div> : null}
-        </div>
-      ) : null}
-      {children}
-    </div>
-  );
-};
-
-export default SectionPanel;
diff --git a/webui/src/components/channel/ChannelFieldRenderer.tsx b/webui/src/components/channel/ChannelFieldRenderer.tsx
index 883d8fb..2544323 100644
--- a/webui/src/components/channel/ChannelFieldRenderer.tsx
+++ b/webui/src/components/channel/ChannelFieldRenderer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Check, ShieldCheck, Users, Wifi } from 'lucide-react';
-import { CheckboxCardField, FieldBlock, TextField } from '../FormControls';
+import { CheckboxCardField, FieldBlock, TextField } from '../ui/FormControls';
 import type { ChannelField, ChannelKey } from './channelSchema';
 
 type Translate = (key: string, options?: any) => string;
diff --git a/webui/src/components/channel/WhatsAppQRCodePanel.tsx b/webui/src/components/channel/WhatsAppQRCodePanel.tsx
index 3c6e3dd..5a23fe5 100644
--- a/webui/src/components/channel/WhatsAppQRCodePanel.tsx
+++ b/webui/src/components/channel/WhatsAppQRCodePanel.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { QrCode, Smartphone } from 'lucide-react';
 import ChannelSectionCard from './ChannelSectionCard';
-import EmptyState from '../EmptyState';
+import EmptyState from '../data-display/EmptyState';
 
 type Translate = (key: string, options?: any) => string;
 
diff --git a/webui/src/components/channel/WhatsAppStatusPanel.tsx b/webui/src/components/channel/WhatsAppStatusPanel.tsx
index a471bc5..b71f54d 100644
--- a/webui/src/components/channel/WhatsAppStatusPanel.tsx
+++ b/webui/src/components/channel/WhatsAppStatusPanel.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { LogOut, Wifi, WifiOff } from 'lucide-react';
-import { FixedButton } from '../Button';
+import { FixedButton } from '../ui/Button';
 import ChannelSectionCard from './ChannelSectionCard';
-import InfoTile from '../InfoTile';
-import NoticePanel from '../NoticePanel';
+import InfoTile from '../data-display/InfoTile';
+import NoticePanel from '../layout/NoticePanel';
 
 type Translate = (key: string, options?: any) => string;
 
diff --git a/webui/src/components/chat/ChatComposer.tsx b/webui/src/components/chat/ChatComposer.tsx
index aedbfcf..6786725 100644
--- a/webui/src/components/chat/ChatComposer.tsx
+++ b/webui/src/components/chat/ChatComposer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Paperclip, Send } from 'lucide-react';
-import { TextField } from '../FormControls';
+import { TextField } from '../ui/FormControls';
 
 type ChatComposerProps = {
   chatTab: 'main' | 'subagents';
diff --git a/webui/src/components/chat/SubagentSidebar.tsx b/webui/src/components/chat/SubagentSidebar.tsx
index 0061f6f..56a3d6f 100644
--- a/webui/src/components/chat/SubagentSidebar.tsx
+++ b/webui/src/components/chat/SubagentSidebar.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Button } from '../Button';
-import { SelectField, TextField, TextareaField } from '../FormControls';
+import { Button } from '../ui/Button';
+import { SelectField, TextField, TextareaField } from '../ui/FormControls';
 import type { AgentRuntimeBadge, RegistryAgent } from './chatUtils';
 
 type SubagentSidebarProps = {
@@ -103,15 +103,15 @@ const SubagentSidebar: React.FC<SubagentSidebarProps> = ({
               <button
                 key={agent.agent_id}
                 onClick={() => onAgentChange(String(agent.agent_id || ''))}
-                className={`w-full text-left rounded-2xl border px-3 py-2.5 ${active ? 'ui-card-active-warning' : 'ui-border-subtle ui-surface-muted ui-row-hover'}`}
+                className={`w-full text-left rounded-2xl border px-3 py-2.5 transition-all duration-300 hover-lift ${active ? 'ui-card-active-warning shadow-sm border-amber-500/30' : 'ui-border-subtle bg-zinc-900/40 hover:bg-zinc-800/60 hover:border-zinc-700'}`}
               >
-                <div className="flex items-center justify-between gap-2">
-                  <div className="ui-text-primary text-sm font-medium">{formatAgentName(agent.display_name || agent.agent_id)}</div>
-                  <span className={`ui-pill inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] ${badgeClassName(badge?.status)}`}>
+                <div className="flex items-center justify-between gap-2 mb-0.5">
+                  <div className="ui-text-primary text-sm font-semibold truncate">{formatAgentName(agent.display_name || agent.agent_id)}</div>
+                  <span className={`ui-pill shrink-0 inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] uppercase font-bold tracking-wider ${badgeClassName(badge?.status)}`}>
                     {badge?.text || idleLabel}
                   </span>
                 </div>
-                <div className="ui-text-muted text-xs">{agent.agent_id} · {agent.role || '-'}</div>
+                <div className="ui-text-muted text-xs truncate">{agent.agent_id} · {agent.role || '-'}</div>
               </button>
             );
           })}
diff --git a/webui/src/components/chat/SubagentStreamFilters.tsx b/webui/src/components/chat/SubagentStreamFilters.tsx
index 110f661..815742e 100644
--- a/webui/src/components/chat/SubagentStreamFilters.tsx
+++ b/webui/src/components/chat/SubagentStreamFilters.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '../Button';
+import { Button } from '../ui/Button';
 
 type SubagentStreamFiltersProps = {
   agents: string[];
diff --git a/webui/src/components/config/ConfigPageChrome.tsx b/webui/src/components/config/ConfigPageChrome.tsx
index 5c6b966..c7467b3 100644
--- a/webui/src/components/config/ConfigPageChrome.tsx
+++ b/webui/src/components/config/ConfigPageChrome.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { RefreshCw, Save } from 'lucide-react';
-import { Button, FixedButton } from '../Button';
-import { TextField, ToolbarCheckboxField } from '../FormControls';
-import { ModalBackdrop, ModalCard, ModalHeader, ModalShell } from '../ModalFrame';
+import { Button, FixedButton } from '../ui/Button';
+import { TextField, ToolbarCheckboxField } from '../ui/FormControls';
+import CodeBlockPanel from '../data-display/CodeBlockPanel';
+import { ModalBackdrop, ModalCard, ModalHeader, ModalShell } from '../ui/ModalFrame';
 
 type Translate = (key: string, options?: any) => string;
 
@@ -95,18 +96,21 @@ export function ConfigSidebar({
   t,
 }: ConfigSidebarProps) {
   return (
-    <aside className="sidebar-section ui-border-subtle w-44 md:w-56 border-r p-2 md:p-3 overflow-y-auto shrink-0">
-      <div className="ui-text-secondary text-xs uppercase tracking-widest mb-2 px-2">{t('configTopLevel')}</div>
-      <div className="space-y-1">
-        {filteredTopKeys.map((key) => (
-          <button
-            key={key}
-            onClick={() => onSelectTop(key)}
-            className={`w-full text-left px-3 py-2 rounded-xl text-sm transition-colors ${activeTop === key ? 'nav-item-active ui-text-primary' : 'ui-text-primary ui-row-hover'}`}
-          >
-            {key === hotReloadTabKey ? t('configHotFieldsFull') : (configLabels[key] || key)}
-          </button>
-        ))}
+    <aside className="sidebar-section w-44 md:w-56 border-r border-zinc-800/60 p-2 md:p-3 overflow-y-auto shrink-0 flex flex-col gap-1">
+      <div className="ui-text-secondary text-[10px] uppercase font-bold tracking-widest mb-1 px-3">{t('configTopLevel')}</div>
+      <div className="space-y-0.5">
+        {filteredTopKeys.map((key) => {
+          const isActive = activeTop === key;
+          return (
+            <button
+              key={key}
+              onClick={() => onSelectTop(key)}
+              className={`w-full text-left px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-300 border hover-lift ${isActive ? 'nav-item-active text-indigo-700 border-indigo-500/30 shadow-[0_4px_20px_rgba(79,70,229,0.15)]' : 'text-zinc-400 border-transparent hover:bg-zinc-800/40 hover:text-zinc-200'}`}
+            >
+              {key === hotReloadTabKey ? t('configHotFieldsFull') : (configLabels[key] || key)}
+            </button>
+          );
+        })}
       </div>
     </aside>
   );
diff --git a/webui/src/components/config/GatewayConfigSection.tsx b/webui/src/components/config/GatewayConfigSection.tsx
index 84a71dd..1838343 100644
--- a/webui/src/components/config/GatewayConfigSection.tsx
+++ b/webui/src/components/config/GatewayConfigSection.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Plus, Trash2 } from 'lucide-react';
-import { FixedButton } from '../Button';
-import { CheckboxField, PanelField, SelectField, TextField, TextareaField } from '../FormControls';
+import { FixedButton } from '../ui/Button';
+import { CheckboxField, PanelField, SelectField, TextField, TextareaField } from '../ui/FormControls';
 
 type Translate = (key: string) => string;
 
diff --git a/webui/src/components/config/ProviderConfigSection.tsx b/webui/src/components/config/ProviderConfigSection.tsx
index 05acd0d..5d6d472 100644
--- a/webui/src/components/config/ProviderConfigSection.tsx
+++ b/webui/src/components/config/ProviderConfigSection.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Download, FolderOpen, LogIn, LogOut, Plus, RefreshCw, RotateCcw, ShieldCheck, Trash2, Upload, Wallet, X } from 'lucide-react';
-import { Button, FixedButton } from '../Button';
-import { CheckboxField, InlineCheckboxField, PanelField, SelectField, TextField, ToolbarCheckboxField } from '../FormControls';
+import { Button, FixedButton } from '../ui/Button';
+import { CheckboxField, InlineCheckboxField, PanelField, SelectField, TextField, ToolbarCheckboxField } from '../ui/FormControls';
 
 function joinClasses(...values: Array<string | undefined | false>) {
   return values.filter(Boolean).join(' ');
diff --git a/webui/src/components/config/ProviderModelPickerModal.tsx b/webui/src/components/config/ProviderModelPickerModal.tsx
index 94752c7..c91bb57 100644
--- a/webui/src/components/config/ProviderModelPickerModal.tsx
+++ b/webui/src/components/config/ProviderModelPickerModal.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
-import { Button } from '../Button';
-import { TextField } from '../FormControls';
+import { Button } from '../ui/Button';
+import { TextField } from '../ui/FormControls';
 
 type ProviderModelPickerModalProps = {
   initialValue?: string;
diff --git a/webui/src/components/ArtifactPreviewCard.tsx b/webui/src/components/data-display/ArtifactPreviewCard.tsx
similarity index 100%
rename from webui/src/components/ArtifactPreviewCard.tsx
rename to webui/src/components/data-display/ArtifactPreviewCard.tsx
diff --git a/webui/src/components/CodeBlockPanel.tsx b/webui/src/components/data-display/CodeBlockPanel.tsx
similarity index 100%
rename from webui/src/components/CodeBlockPanel.tsx
rename to webui/src/components/data-display/CodeBlockPanel.tsx
diff --git a/webui/src/components/DetailGrid.tsx b/webui/src/components/data-display/DetailGrid.tsx
similarity index 100%
rename from webui/src/components/DetailGrid.tsx
rename to webui/src/components/data-display/DetailGrid.tsx
diff --git a/webui/src/components/EmptyState.tsx b/webui/src/components/data-display/EmptyState.tsx
similarity index 100%
rename from webui/src/components/EmptyState.tsx
rename to webui/src/components/data-display/EmptyState.tsx
diff --git a/webui/src/components/FieldCard.tsx b/webui/src/components/data-display/FieldCard.tsx
similarity index 100%
rename from webui/src/components/FieldCard.tsx
rename to webui/src/components/data-display/FieldCard.tsx
diff --git a/webui/src/components/InfoBlock.tsx b/webui/src/components/data-display/InfoBlock.tsx
similarity index 100%
rename from webui/src/components/InfoBlock.tsx
rename to webui/src/components/data-display/InfoBlock.tsx
diff --git a/webui/src/components/InfoTile.tsx b/webui/src/components/data-display/InfoTile.tsx
similarity index 100%
rename from webui/src/components/InfoTile.tsx
rename to webui/src/components/data-display/InfoTile.tsx
diff --git a/webui/src/components/InsetCard.tsx b/webui/src/components/data-display/InsetCard.tsx
similarity index 51%
rename from webui/src/components/InsetCard.tsx
rename to webui/src/components/data-display/InsetCard.tsx
index bba8907..c81e375 100644
--- a/webui/src/components/InsetCard.tsx
+++ b/webui/src/components/data-display/InsetCard.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { motion } from 'motion/react';
 
 type InsetCardProps = {
   children: React.ReactNode;
@@ -11,10 +12,14 @@ function joinClasses(...values: Array<string | undefined | false>) {
 
 const InsetCard: React.FC<InsetCardProps> = ({ children, className }) => {
   return (
-    <div className={joinClasses('brand-card-subtle rounded-2xl border border-zinc-800 p-4', className)}>
+    <motion.div 
+      whileHover={{ scale: 1.01, backgroundColor: 'var(--card-bg-a)' }}
+      transition={{ duration: 0.2 }}
+      className={joinClasses('glass-panel rounded-2xl p-4 transition-colors', className)}
+    >
       {children}
-    </div>
+    </motion.div>
   );
 };
 
-export default InsetCard;
+export default React.memo(InsetCard);
diff --git a/webui/src/components/MetricPanel.tsx b/webui/src/components/data-display/MetricPanel.tsx
similarity index 55%
rename from webui/src/components/MetricPanel.tsx
rename to webui/src/components/data-display/MetricPanel.tsx
index 1382abf..e2a113d 100644
--- a/webui/src/components/MetricPanel.tsx
+++ b/webui/src/components/data-display/MetricPanel.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { motion } from 'motion/react';
 
 type MetricPanelProps = {
   className?: string;
@@ -13,7 +14,7 @@ type MetricPanelProps = {
   valueClassName?: string;
 };
 
-const BASE_CLASS_NAME = 'brand-card ui-border-subtle rounded-[28px] border p-5 min-h-[148px]';
+const BASE_CLASS_NAME = 'brand-card hover-lift glow-effect ui-border-subtle rounded-[28px] border p-5 min-h-[148px]';
 
 const MetricPanel: React.FC<MetricPanelProps> = ({
   className,
@@ -29,8 +30,12 @@ const MetricPanel: React.FC<MetricPanelProps> = ({
 }) => {
   if (layout === 'split') {
     return (
-      <div className={`${BASE_CLASS_NAME} ${className || ''}`.trim()}>
-        <div className="flex h-full items-start justify-between gap-3">
+      <motion.div 
+        whileHover={{ scale: 1.015 }}
+        transition={{ type: "spring", stiffness: 300, damping: 20 }}
+        className={`${BASE_CLASS_NAME} ${className || ''}`.trim()}
+      >
+        <div className="flex h-full items-start justify-between gap-3 relative z-10">
           <div className="flex min-h-full flex-1 flex-col">
             <div className={titleClassName || 'ui-text-muted text-[11px] uppercase tracking-widest'}>{title}</div>
             <div className={valueClassName || 'ui-text-primary mt-2 text-3xl font-semibold'}>{value}</div>
@@ -42,20 +47,26 @@ const MetricPanel: React.FC<MetricPanelProps> = ({
             </div>
           ) : null}
         </div>
-      </div>
+      </motion.div>
     );
   }
 
   return (
-    <div className={`${BASE_CLASS_NAME} ${className || ''}`.trim()}>
-      <div className="ui-text-secondary flex items-center gap-2 mb-2">
-        {icon}
-        <div className={titleClassName || 'text-sm font-medium'}>{title}</div>
+    <motion.div 
+      whileHover={{ scale: 1.015 }}
+      transition={{ type: "spring", stiffness: 300, damping: 20 }}
+      className={`${BASE_CLASS_NAME} ${className || ''}`.trim()}
+    >
+      <div className="relative z-10">
+        <div className="ui-text-secondary flex items-center gap-2 mb-2">
+          {icon}
+          <div className={titleClassName || 'text-sm font-medium'}>{title}</div>
+        </div>
+        <div className={valueClassName || 'ui-text-primary text-3xl font-semibold'}>{value}</div>
+        {subtitle ? <div className={subtitleClassName || 'ui-text-muted mt-2 text-xs'}>{subtitle}</div> : null}
       </div>
-      <div className={valueClassName || 'ui-text-primary text-3xl font-semibold'}>{value}</div>
-      {subtitle ? <div className={subtitleClassName || 'ui-text-muted mt-2 text-xs'}>{subtitle}</div> : null}
-    </div>
+    </motion.div>
   );
 };
 
-export default MetricPanel;
+export default React.memo(MetricPanel);
diff --git a/webui/src/components/SpaceParticles.tsx b/webui/src/components/data-display/SpaceParticles.tsx
similarity index 100%
rename from webui/src/components/SpaceParticles.tsx
rename to webui/src/components/data-display/SpaceParticles.tsx
diff --git a/webui/src/components/StatCard.tsx b/webui/src/components/data-display/StatCard.tsx
similarity index 62%
rename from webui/src/components/StatCard.tsx
rename to webui/src/components/data-display/StatCard.tsx
index 33e3d9c..9788cb0 100644
--- a/webui/src/components/StatCard.tsx
+++ b/webui/src/components/data-display/StatCard.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { motion } from 'motion/react';
 
 interface StatCardProps {
   title: string;
@@ -7,7 +8,12 @@ interface StatCardProps {
 }
 
 const StatCard: React.FC<StatCardProps> = ({ title, value, icon }) => (
-  <div className="brand-card h-full min-h-[124px] border border-zinc-800 p-6 flex items-center gap-4">
+  <motion.div 
+    whileHover={{ scale: 1.02 }}
+    whileTap={{ scale: 0.98 }}
+    transition={{ type: "spring", stiffness: 400, damping: 25 }}
+    className="brand-card hover-lift h-full min-h-[124px] border border-zinc-800 p-6 flex items-center gap-4 cursor-pointer"
+  >
     <div className="card-icon-shell w-12 h-12 rounded-2xl bg-zinc-800/50 flex items-center justify-center border border-zinc-700/50 relative z-[1]">
       {icon}
     </div>
@@ -15,7 +21,7 @@ const StatCard: React.FC<StatCardProps> = ({ title, value, icon }) => (
       <div className="text-zinc-500 text-[11px] uppercase tracking-[0.24em] font-semibold mb-1">{title}</div>
       <div className="text-2xl font-semibold text-zinc-100">{value}</div>
     </div>
-  </div>
+  </motion.div>
 );
 
-export default StatCard;
+export default React.memo(StatCard);
diff --git a/webui/src/components/Header.tsx b/webui/src/components/layout/Header.tsx
similarity index 96%
rename from webui/src/components/Header.tsx
rename to webui/src/components/layout/Header.tsx
index 98c19d4..a533756 100644
--- a/webui/src/components/Header.tsx
+++ b/webui/src/components/layout/Header.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Github, Moon, RefreshCw, SunMedium, Terminal } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { useAppContext } from '../context/AppContext';
-import { useUI } from '../context/UIContext';
-import { FixedButton, FixedLinkButton } from './Button';
+import { useAppContext } from '../../context/AppContext';
+import { useUI } from '../../context/UIContext';
+import { FixedButton, FixedLinkButton } from '../ui/Button';
 
 const REPO_URL = 'https://github.com/YspCoder/clawgo';
 
diff --git a/webui/src/components/Layout.tsx b/webui/src/components/layout/Layout.tsx
similarity index 95%
rename from webui/src/components/Layout.tsx
rename to webui/src/components/layout/Layout.tsx
index 04dc708..478236e 100644
--- a/webui/src/components/Layout.tsx
+++ b/webui/src/components/layout/Layout.tsx
@@ -3,7 +3,7 @@ import { Outlet, useLocation } from 'react-router-dom';
 import { motion, AnimatePresence } from 'motion/react';
 import Header from './Header';
 import Sidebar from './Sidebar';
-import { useAppContext } from '../context/AppContext';
+import { useAppContext } from '../../context/AppContext';
 
 const Layout: React.FC = () => {
   const location = useLocation();
diff --git a/webui/src/components/ListPanel.tsx b/webui/src/components/layout/ListPanel.tsx
similarity index 100%
rename from webui/src/components/ListPanel.tsx
rename to webui/src/components/layout/ListPanel.tsx
diff --git a/webui/src/components/NavItem.tsx b/webui/src/components/layout/NavItem.tsx
similarity index 100%
rename from webui/src/components/NavItem.tsx
rename to webui/src/components/layout/NavItem.tsx
diff --git a/webui/src/components/NoticePanel.tsx b/webui/src/components/layout/NoticePanel.tsx
similarity index 100%
rename from webui/src/components/NoticePanel.tsx
rename to webui/src/components/layout/NoticePanel.tsx
diff --git a/webui/src/components/PageHeader.tsx b/webui/src/components/layout/PageHeader.tsx
similarity index 100%
rename from webui/src/components/PageHeader.tsx
rename to webui/src/components/layout/PageHeader.tsx
diff --git a/webui/src/components/PanelHeader.tsx b/webui/src/components/layout/PanelHeader.tsx
similarity index 100%
rename from webui/src/components/PanelHeader.tsx
rename to webui/src/components/layout/PanelHeader.tsx
diff --git a/webui/src/components/SectionHeader.tsx b/webui/src/components/layout/SectionHeader.tsx
similarity index 100%
rename from webui/src/components/SectionHeader.tsx
rename to webui/src/components/layout/SectionHeader.tsx
diff --git a/webui/src/components/layout/SectionPanel.tsx b/webui/src/components/layout/SectionPanel.tsx
new file mode 100644
index 0000000..93e704c
--- /dev/null
+++ b/webui/src/components/layout/SectionPanel.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { motion } from 'motion/react';
+
+type SectionPanelProps = {
+  actions?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  headerClassName?: string;
+  icon?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  title?: React.ReactNode;
+};
+
+function joinClasses(...values: Array<string | undefined | false>) {
+  return values.filter(Boolean).join(' ');
+}
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05
+    }
+  }
+};
+
+const SectionPanel: React.FC<SectionPanelProps> = ({
+  actions,
+  children,
+  className,
+  headerClassName,
+  icon,
+  subtitle,
+  title,
+}) => {
+  return (
+    <motion.div 
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+      className={joinClasses('brand-card glass-panel rounded-[30px] border border-zinc-800/80 p-6 glow-effect', className)}
+    >
+      <div className="relative z-10">
+        {title || subtitle || actions || icon ? (
+          <motion.div 
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className={joinClasses('mb-5 flex items-center justify-between gap-3 flex-wrap', headerClassName)}
+          >
+            <div>
+              {title ? (
+                <div className="flex items-center gap-2 text-zinc-200">
+                  {icon}
+                  <h2 className="text-lg font-medium">{title}</h2>
+                </div>
+              ) : null}
+              {subtitle ? <div className="mt-1 text-xs text-zinc-500">{subtitle}</div> : null}
+            </div>
+            {actions ? <div className="text-xs text-zinc-500">{actions}</div> : null}
+          </motion.div>
+        ) : null}
+        {children}
+      </div>
+    </motion.div>
+  );
+};
+
+export default React.memo(SectionPanel);
diff --git a/webui/src/components/Sidebar.tsx b/webui/src/components/layout/Sidebar.tsx
similarity index 74%
rename from webui/src/components/Sidebar.tsx
rename to webui/src/components/layout/Sidebar.tsx
index 40d992b..4e8b5cd 100644
--- a/webui/src/components/Sidebar.tsx
+++ b/webui/src/components/layout/Sidebar.tsx
@@ -2,21 +2,20 @@ import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 import { LayoutDashboard, MessageSquare, Settings, Clock, Terminal, Zap, FolderOpen, ClipboardList, BrainCircuit, Hash, Bot, Boxes, PanelLeftClose, PanelLeftOpen, Plug, Smartphone, ChevronDown, Radio, MonitorSmartphone, Cpu } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { useAppContext } from '../context/AppContext';
+import { useAppContext } from '../../context/AppContext';
 import NavItem from './NavItem';
-import { TextField } from './FormControls';
+import { TextField } from '../ui/FormControls';
 
 const Sidebar: React.FC = () => {
   const { t } = useTranslation();
   const { token, setToken, sidebarOpen, sidebarCollapsed, setSidebarCollapsed, compiledChannels } = useAppContext();
   const location = useLocation();
   const [expandedSections, setExpandedSections] = React.useState<Record<string, boolean>>({
-    main: true,
-    agents: false,
-    ops: false,
-    config: false,
-    knowledge: false,
-    insights: false,
+    workspace: true,
+    agents_knowledge: false,
+    infra_network: false,
+    system_settings: false,
+    monitoring_audit: false,
     channels: false,
   });
 
@@ -32,36 +31,30 @@ const Sidebar: React.FC = () => {
 
   const sections = [
     {
-      id: 'main',
-      title: t('sidebarMain'),
+      id: 'workspace',
+      title: t('sidebarWorkspace'),
       items: [
         { icon: <LayoutDashboard className="w-5 h-5" />, label: t('dashboard'), to: '/' },
         { icon: <MessageSquare className="w-5 h-5" />, label: t('chat'), to: '/chat' },
       ],
     },
     {
-      id: 'agents',
-      title: t('sidebarAgents'),
+      id: 'agents_knowledge',
+      title: t('sidebarAgentsKnowledge'),
       items: [
-        { icon: <Boxes className="w-5 h-5" />, label: t('subagentsRuntime'), to: '/subagents' },
         { icon: <Bot className="w-5 h-5" />, label: t('subagentProfiles'), to: '/subagent-profiles' },
+        { icon: <Boxes className="w-5 h-5" />, label: t('subagentsRuntime'), to: '/subagents' },
+        { icon: <Zap className="w-5 h-5" />, label: t('skills'), to: '/skills' },
+        { icon: <FolderOpen className="w-5 h-5" />, label: t('memory'), to: '/memory' },
+        { icon: <Plug className="w-5 h-5" />, label: t('mcpServices'), to: '/mcp' },
       ],
     },
     {
-      id: 'ops',
-      title: t('sidebarOps'),
+      id: 'infra_network',
+      title: t('sidebarInfraNetwork'),
       items: [
         { icon: <Terminal className="w-5 h-5" />, label: t('nodes'), to: '/nodes' },
         { icon: <FolderOpen className="w-5 h-5" />, label: t('nodeArtifacts'), to: '/node-artifacts' },
-        { icon: <ClipboardList className="w-5 h-5" />, label: t('taskAudit'), to: '/task-audit' },
-      ],
-    },
-    {
-      id: 'config',
-      title: t('sidebarConfig'),
-      items: [
-        { icon: <Settings className="w-5 h-5" />, label: t('config'), to: '/config' },
-        { icon: <Cpu className="w-5 h-5" />, label: t('providers'), to: '/providers' },
         {
           icon: <Smartphone className="w-5 h-5" />,
           label: t('channelsGroup'),
@@ -72,18 +65,18 @@ const Sidebar: React.FC = () => {
       ],
     },
     {
-      id: 'knowledge',
-      title: t('sidebarKnowledge'),
+      id: 'system_settings',
+      title: t('sidebarSystemSettings'),
       items: [
-        { icon: <Plug className="w-5 h-5" />, label: t('mcpServices'), to: '/mcp' },
-        { 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: <Settings className="w-5 h-5" />, label: t('config'), to: '/config' },
+        { icon: <Cpu className="w-5 h-5" />, label: t('providers'), to: '/providers' },
       ],
     },
     {
-      id: 'insights',
-      title: t('sidebarInsights'),
+      id: 'monitoring_audit',
+      title: t('sidebarMonitoringAudit'),
       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' },
         { icon: <Hash className="w-5 h-5" />, label: t('logCodes'), to: '/log-codes' },
@@ -99,17 +92,17 @@ const Sidebar: React.FC = () => {
   const isSubmenuActive = (items: Array<{ to: string }>) => items.some((item) => location.pathname === item.to);
 
   return (
-    <aside className={`sidebar-shell 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 backdrop-blur-xl flex flex-col shrink-0 transform transition-all duration-200 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}>
+    <aside className={`sidebar-shell glass-panel 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/80 flex flex-col shrink-0 transform transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] ${sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}>
       <nav className={`flex-1 ${sidebarCollapsed ? 'px-2' : 'px-3'} py-3 space-y-2 overflow-y-auto`}>
         {normalizedSections.map((sec) => (
           <div key={sec.title} className={`sidebar-section rounded-2xl border border-zinc-800/60 ${sidebarCollapsed ? 'p-2' : 'p-2'}`}>
             {!sidebarCollapsed && (
               <button
                 onClick={() => toggle(sec.id)}
-                className="flex w-full items-center justify-between px-2 pb-1.5 text-[10px] font-bold uppercase tracking-widest text-zinc-500"
+                className="flex w-full items-center justify-between px-2 pb-1.5 text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-zinc-300 transition-colors"
               >
                 <span>{sec.title}</span>
-                <ChevronDown className={`h-3.5 w-3.5 transition-transform ${expandedSections[sec.id] ? 'rotate-0' : '-rotate-90'}`} />
+                <ChevronDown className={`h-3.5 w-3.5 transition-transform duration-300 ${expandedSections[sec.id] ? 'rotate-0' : '-rotate-90'}`} />
               </button>
             )}
             {(sidebarCollapsed || expandedSections[sec.id]) && (
@@ -124,16 +117,16 @@ const Sidebar: React.FC = () => {
                     <div key={it.childrenId} className="space-y-1">
                       <button
                         onClick={() => !sidebarCollapsed && toggle(it.childrenId)}
-                        className={`w-full flex items-center ${sidebarCollapsed ? 'justify-center' : 'gap-3'} px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 border ${
-                          submenuActive ? 'nav-item-active text-indigo-700 border-indigo-500/30' : 'text-zinc-400 border-transparent'
+                        className={`w-full hover-lift flex items-center ${sidebarCollapsed ? 'justify-center' : 'gap-3'} px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-300 border ${
+                          submenuActive ? 'nav-item-active text-indigo-700 border-indigo-500/30 shadow-[0_4px_20px_rgba(79,70,229,0.15)]' : 'text-zinc-400 border-transparent hover:bg-zinc-800/40 hover:text-zinc-200'
                         }`}
                         title={sidebarCollapsed ? it.label : undefined}
                       >
-                        <span className="shrink-0">{it.icon}</span>
+                        <span className="shrink-0 transition-transform duration-300 hover:scale-110">{it.icon}</span>
                         {!sidebarCollapsed && (
                           <>
                             <span className="min-w-0 flex-1 truncate text-left">{it.label}</span>
-                            <ChevronDown className={`h-4 w-4 transition-transform ${childrenOpen ? 'rotate-0' : '-rotate-90'}`} />
+                            <ChevronDown className={`h-4 w-4 transition-transform duration-300 ${childrenOpen ? 'rotate-0' : '-rotate-90'}`} />
                           </>
                         )}
                       </button>
@@ -154,28 +147,28 @@ const Sidebar: React.FC = () => {
       </nav>
 
       {!sidebarCollapsed ? (
-        <div className="p-3 border-t border-zinc-800 bg-zinc-900/20">
+        <div className="p-3 border-t border-zinc-800/60 bg-zinc-900/40 backdrop-blur-md">
           <div className="text-[11px] font-medium text-zinc-500 mb-1 uppercase tracking-wider px-1">{t('gatewayToken')}</div>
           <TextField
             type="password"
             value={token}
             onChange={(e) => setToken(e.target.value)}
             placeholder={t('enterToken')}
-            className="w-full py-2.5 placeholder:text-zinc-600"
+            className="w-full py-2.5 placeholder:text-zinc-600 transition-shadow focus:shadow-[0_0_0_2px_rgba(99,102,241,0.2)]"
           />
         </div>
       ) : (
-        <div className="hidden md:flex justify-center p-3 border-t border-zinc-800 bg-zinc-900/20">
+        <div className="hidden md:flex justify-center p-3 border-t border-zinc-800/60 bg-zinc-900/40 backdrop-blur-md">
           <div className="gateway-token-indicator w-2.5 h-2.5 rounded-full" title={t('gatewayToken')} />
         </div>
       )}
-      <div className={`hidden md:flex border-t border-zinc-800 bg-zinc-900/20 ${sidebarCollapsed ? 'justify-center p-3' : 'justify-end p-3'}`}>
+      <div className={`hidden md:flex border-t border-zinc-800/60 bg-zinc-900/40 backdrop-blur-md ${sidebarCollapsed ? 'justify-center p-3' : 'justify-end p-3'}`}>
         <button
           onClick={() => setSidebarCollapsed((prev) => !prev)}
-          className="flex h-11 w-11 items-center justify-center rounded-2xl border border-zinc-800 brand-card-subtle hover:bg-zinc-900/40 text-zinc-300 transition-colors"
+          className="hover-lift flex h-11 w-11 items-center justify-center rounded-2xl border border-zinc-800 brand-card-subtle text-zinc-300"
           title={sidebarCollapsed ? t('expand') : t('collapse')}
         >
-          {sidebarCollapsed ? <PanelLeftOpen className="w-4 h-4" /> : <PanelLeftClose className="w-4 h-4" />}
+          {sidebarCollapsed ? <PanelLeftOpen className="w-4 h-4 transition-transform hover:scale-110" /> : <PanelLeftClose className="w-4 h-4 transition-transform hover:scale-110" />}
         </button>
       </div>
     </aside>
diff --git a/webui/src/components/ToolbarRow.tsx b/webui/src/components/layout/ToolbarRow.tsx
similarity index 100%
rename from webui/src/components/ToolbarRow.tsx
rename to webui/src/components/layout/ToolbarRow.tsx
diff --git a/webui/src/components/FileListItem.tsx b/webui/src/components/list/FileListItem.tsx
similarity index 100%
rename from webui/src/components/FileListItem.tsx
rename to webui/src/components/list/FileListItem.tsx
diff --git a/webui/src/components/SelectableListItem.tsx b/webui/src/components/list/SelectableListItem.tsx
similarity index 100%
rename from webui/src/components/SelectableListItem.tsx
rename to webui/src/components/list/SelectableListItem.tsx
diff --git a/webui/src/components/SummaryListItem.tsx b/webui/src/components/list/SummaryListItem.tsx
similarity index 100%
rename from webui/src/components/SummaryListItem.tsx
rename to webui/src/components/list/SummaryListItem.tsx
diff --git a/webui/src/components/mcp/MCPServerCard.tsx b/webui/src/components/mcp/MCPServerCard.tsx
index ca4fc09..d448c17 100644
--- a/webui/src/components/mcp/MCPServerCard.tsx
+++ b/webui/src/components/mcp/MCPServerCard.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Pencil, Trash2 } from 'lucide-react';
-import { FixedButton } from '../Button';
-import InfoTile from '../InfoTile';
-import NoticePanel from '../NoticePanel';
+import { FixedButton } from '../ui/Button';
+import InfoTile from '../data-display/InfoTile';
+import NoticePanel from '../layout/NoticePanel';
 
 type MCPServerCheck = {
   name: string;
diff --git a/webui/src/components/mcp/MCPServerEditor.tsx b/webui/src/components/mcp/MCPServerEditor.tsx
index 9304e2e..f684da7 100644
--- a/webui/src/components/mcp/MCPServerEditor.tsx
+++ b/webui/src/components/mcp/MCPServerEditor.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Package, Wrench } from 'lucide-react';
-import { Button, FixedButton } from '../Button';
-import { CheckboxCardField, SelectField, TextField } from '../FormControls';
-import NoticePanel from '../NoticePanel';
+import { Button, FixedButton } from '../ui/Button';
+import { CheckboxCardField, SelectField, TextField } from '../ui/FormControls';
+import NoticePanel from '../layout/NoticePanel';
 
 type MCPDraftServer = {
   enabled: boolean;
diff --git a/webui/src/components/nodes/AgentTreePanel.tsx b/webui/src/components/nodes/AgentTreePanel.tsx
index 0703294..90fba74 100644
--- a/webui/src/components/nodes/AgentTreePanel.tsx
+++ b/webui/src/components/nodes/AgentTreePanel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import EmptyState from '../EmptyState';
-import InfoBlock from '../InfoBlock';
+import EmptyState from '../data-display/EmptyState';
+import InfoBlock from '../data-display/InfoBlock';
 
 type AgentTreePanelProps = {
   emptyLabel: string;
diff --git a/webui/src/components/nodes/DispatchArtifactPreviewSection.tsx b/webui/src/components/nodes/DispatchArtifactPreviewSection.tsx
index c785937..8b79402 100644
--- a/webui/src/components/nodes/DispatchArtifactPreviewSection.tsx
+++ b/webui/src/components/nodes/DispatchArtifactPreviewSection.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import ArtifactPreviewCard from '../ArtifactPreviewCard';
-import EmptyState from '../EmptyState';
-import InfoBlock from '../InfoBlock';
+import ArtifactPreviewCard from '../data-display/ArtifactPreviewCard';
+import EmptyState from '../data-display/EmptyState';
+import InfoBlock from '../data-display/InfoBlock';
 
 type DispatchArtifactPreviewSectionProps = {
   artifacts: any[];
diff --git a/webui/src/components/nodes/DispatchReplayPanel.tsx b/webui/src/components/nodes/DispatchReplayPanel.tsx
index 8a7e037..14a879a 100644
--- a/webui/src/components/nodes/DispatchReplayPanel.tsx
+++ b/webui/src/components/nodes/DispatchReplayPanel.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import CodeBlockPanel from '../CodeBlockPanel';
-import NoticePanel from '../NoticePanel';
-import { SelectField, TextField, TextareaField } from '../FormControls';
+import CodeBlockPanel from '../data-display/CodeBlockPanel';
+import NoticePanel from '../layout/NoticePanel';
+import { SelectField, TextField, TextareaField } from '../ui/FormControls';
 
 type DispatchReplayPanelProps = {
   argsLabel: string;
diff --git a/webui/src/components/nodes/NodeP2PPanel.tsx b/webui/src/components/nodes/NodeP2PPanel.tsx
index 0875532..05379a3 100644
--- a/webui/src/components/nodes/NodeP2PPanel.tsx
+++ b/webui/src/components/nodes/NodeP2PPanel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import EmptyState from '../EmptyState';
-import InfoBlock from '../InfoBlock';
+import EmptyState from '../data-display/EmptyState';
+import InfoBlock from '../data-display/InfoBlock';
 
 type NodeP2PPanelProps = {
   emptyLabel: string;
diff --git a/webui/src/components/subagentProfiles/ProfileEditorPanel.tsx b/webui/src/components/subagentProfiles/ProfileEditorPanel.tsx
index a9f58ba..4d5f1de 100644
--- a/webui/src/components/subagentProfiles/ProfileEditorPanel.tsx
+++ b/webui/src/components/subagentProfiles/ProfileEditorPanel.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Save, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button, FixedButton } from '../Button';
-import { CheckboxCardField, FieldBlock, SelectField, TextField, TextareaField } from '../FormControls';
+import { Button, FixedButton } from '../ui/Button';
+import { CheckboxCardField, FieldBlock, SelectField, TextField, TextareaField } from '../ui/FormControls';
 import type { SubagentProfile, ToolAllowlistGroup } from './profileDraft';
 import { parseAllowlist } from './profileDraft';
 
diff --git a/webui/src/components/subagentProfiles/ProfileListPanel.tsx b/webui/src/components/subagentProfiles/ProfileListPanel.tsx
index 1d04557..cefcdfa 100644
--- a/webui/src/components/subagentProfiles/ProfileListPanel.tsx
+++ b/webui/src/components/subagentProfiles/ProfileListPanel.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import ListPanel from '../ListPanel';
-import PanelHeader from '../PanelHeader';
-import SummaryListItem from '../SummaryListItem';
+import ListPanel from '../layout/ListPanel';
+import PanelHeader from '../layout/PanelHeader';
+import SummaryListItem from '../list/SummaryListItem';
 import type { SubagentProfile } from './profileDraft';
 
 type ProfileListPanelProps = {
diff --git a/webui/src/components/subagents/TopologyCanvas.tsx b/webui/src/components/subagents/TopologyCanvas.tsx
index f3b5210..cbb02cc 100644
--- a/webui/src/components/subagents/TopologyCanvas.tsx
+++ b/webui/src/components/subagents/TopologyCanvas.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SpaceParticles } from '../SpaceParticles';
+import { SpaceParticles } from '../data-display/SpaceParticles';
 import type { GraphLineSpec } from './topologyTypes';
 
 type TopologyCanvasProps = {
diff --git a/webui/src/components/subagents/TopologyTooltip.tsx b/webui/src/components/subagents/TopologyTooltip.tsx
index 2def123..6c0f90f 100644
--- a/webui/src/components/subagents/TopologyTooltip.tsx
+++ b/webui/src/components/subagents/TopologyTooltip.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import InsetCard from '../InsetCard';
+import InsetCard from '../data-display/InsetCard';
 import type { StreamItem, SubagentTask } from './subagentTypes';
 
 type StreamPreview = {
diff --git a/webui/src/components/Button.tsx b/webui/src/components/ui/Button.tsx
similarity index 100%
rename from webui/src/components/Button.tsx
rename to webui/src/components/ui/Button.tsx
diff --git a/webui/src/components/Checkbox.tsx b/webui/src/components/ui/Checkbox.tsx
similarity index 100%
rename from webui/src/components/Checkbox.tsx
rename to webui/src/components/ui/Checkbox.tsx
diff --git a/webui/src/components/FormControls.tsx b/webui/src/components/ui/FormControls.tsx
similarity index 67%
rename from webui/src/components/FormControls.tsx
rename to webui/src/components/ui/FormControls.tsx
index aa00f65..7655bdc 100644
--- a/webui/src/components/FormControls.tsx
+++ b/webui/src/components/ui/FormControls.tsx
@@ -66,7 +66,7 @@ export function TextField({ dense = false, monospace = false, className, ...prop
     <input
       {...props}
       className={joinClasses(
-        'ui-input',
+        'ui-input transition-all duration-200 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 outline-none hover:border-zinc-700 w-full',
         dense ? 'rounded-lg px-2 py-1 text-xs' : 'rounded-xl px-3 py-2 text-sm',
         monospace && 'font-mono',
         className,
@@ -80,7 +80,7 @@ export function SelectField({ dense = false, className, children, ...props }: Se
     <select
       {...props}
       className={joinClasses(
-        'ui-select',
+        'ui-select transition-all duration-200 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 outline-none hover:border-zinc-700 cursor-pointer w-full',
         dense ? 'rounded-lg px-2 py-1 text-xs' : 'rounded-xl px-3 py-2 text-sm',
         className,
       )}
@@ -95,7 +95,7 @@ export function TextareaField({ dense = false, monospace = false, className, ...
     <textarea
       {...props}
       className={joinClasses(
-        'ui-textarea',
+        'ui-textarea transition-all duration-200 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 outline-none hover:border-zinc-700 w-full',
         dense ? 'rounded-lg px-2 py-1 text-xs' : 'rounded-xl px-3 py-2 text-sm',
         monospace && 'font-mono',
         className,
@@ -105,7 +105,7 @@ export function TextareaField({ dense = false, monospace = false, className, ...
 }
 
 export function CheckboxField({ className, ...props }: CheckboxFieldProps) {
-  return <input {...props} type="checkbox" className={joinClasses('ui-checkbox', className)} />;
+  return <input {...props} type="checkbox" className={joinClasses('ui-checkbox transition-all duration-200 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 outline-none hover:border-zinc-500 w-4 h-4 shrink-0', className)} />;
 }
 
 export function CheckboxCardField({
@@ -116,12 +116,12 @@ export function CheckboxCardField({
   onChange,
 }: CheckboxCardFieldProps) {
   return (
-    <label className={joinClasses('ui-toggle-card ui-checkbox-field cursor-pointer', className)}>
-      <div className="space-y-1">
+    <label className={joinClasses('ui-toggle-card ui-checkbox-field p-4 rounded-2xl cursor-pointer transition-all duration-200 hover:bg-zinc-800/50 border hover:border-zinc-700 border-zinc-800/60 flex flex-row items-start gap-4', className)}>
+      <div className="space-y-1.5 flex-1">
         <div className="ui-text-primary text-sm font-semibold">{label}</div>
-        {help ? <div className="ui-form-help">{help}</div> : null}
+        {help ? <div className="ui-form-help text-xs text-zinc-400 whitespace-pre-wrap">{help}</div> : null}
       </div>
-      <div className="pt-2">
+      <div className="pt-0.5 flex shrink-0">
         <CheckboxField checked={checked} onChange={(e) => onChange(e.target.checked)} />
       </div>
     </label>
@@ -136,7 +136,7 @@ export function ToolbarCheckboxField({
   onChange,
 }: ToolbarCheckboxFieldProps) {
   return (
-    <label className={joinClasses('ui-toolbar-checkbox cursor-pointer', className)}>
+    <label className={joinClasses('ui-toolbar-checkbox cursor-pointer transition-colors duration-200 hover:bg-zinc-800/50', className)}>
       <div className="min-w-0 space-y-0.5">
         <div className="ui-text-primary text-xs font-semibold leading-tight">{label}</div>
         {help ? <div className="ui-form-help text-[10px] leading-tight">{help}</div> : null}
@@ -154,10 +154,10 @@ export function InlineCheckboxField({
   onChange,
 }: InlineCheckboxFieldProps) {
   return (
-    <label className={joinClasses('flex items-center justify-between gap-3 rounded-xl border border-zinc-800 bg-zinc-900/30 px-3 py-2.5 cursor-pointer', className)}>
-      <div className="min-w-0 space-y-0.5">
+    <label className={joinClasses('flex items-center justify-between gap-3 rounded-xl border border-zinc-800/60 bg-zinc-900/40 px-3 py-3 cursor-pointer transition-all duration-200 hover:bg-zinc-800/60 hover:border-zinc-700 shadow-sm', className)}>
+      <div className="min-w-0 space-y-1">
         <div className="ui-text-primary text-sm font-semibold leading-tight">{label}</div>
-        {help ? <div className="ui-form-help text-[10px] leading-tight">{help}</div> : null}
+        {help ? <div className="ui-form-help text-xs text-zinc-400 leading-snug whitespace-pre-wrap">{help}</div> : null}
       </div>
       <CheckboxField checked={checked} onChange={(e) => onChange(e.target.checked)} />
     </label>
@@ -166,14 +166,14 @@ export function InlineCheckboxField({
 
 export function FieldBlock({ label, help, meta, className, children }: FieldBlockProps) {
   return (
-    <div className={joinClasses('space-y-1', className)}>
+    <div className={joinClasses('flex flex-col gap-1.5', className)}>
       {(label || help || meta) && (
-        <div className="flex min-h-[18px] flex-wrap items-center justify-between gap-x-3 gap-y-1">
-          <div className="min-w-0 flex flex-1 items-center gap-x-2 gap-y-1 overflow-hidden">
-            {label ? <div className="ui-form-label shrink-0 leading-none">{label}</div> : null}
-            {help ? <div className="ui-form-help truncate text-[10px] leading-none">{help}</div> : null}
+        <div className="flex flex-col gap-1.5 mb-1.5">
+          <div className="flex items-center justify-between gap-3">
+            {label ? <div className="ui-form-label text-sm font-semibold text-zinc-200">{label}</div> : null}
+            {meta ? <div className="ui-form-help shrink-0 text-xs font-medium text-zinc-500">{meta}</div> : null}
           </div>
-          {meta ? <div className="ui-form-help shrink-0 text-[10px] leading-none">{meta}</div> : null}
+          {help ? <div className="ui-form-help text-xs text-zinc-400 leading-relaxed whitespace-pre-wrap">{help}</div> : null}
         </div>
       )}
       {children}
@@ -186,8 +186,8 @@ export function PanelField({ dense = false, className, ...props }: PanelFieldPro
     <FieldBlock
       {...props}
       className={joinClasses(
-        'rounded-xl border border-zinc-800 bg-zinc-900/30',
-        dense ? 'p-2 space-y-2' : 'p-3 space-y-2',
+        'glass-panel rounded-xl border border-zinc-800/60 bg-zinc-900/40 shadow-sm',
+        dense ? 'p-3 space-y-2' : 'p-4 space-y-3',
         className,
       )}
     />
diff --git a/webui/src/components/FormField.tsx b/webui/src/components/ui/FormField.tsx
similarity index 100%
rename from webui/src/components/FormField.tsx
rename to webui/src/components/ui/FormField.tsx
diff --git a/webui/src/components/GlobalDialog.tsx b/webui/src/components/ui/GlobalDialog.tsx
similarity index 100%
rename from webui/src/components/GlobalDialog.tsx
rename to webui/src/components/ui/GlobalDialog.tsx
diff --git a/webui/src/components/Input.tsx b/webui/src/components/ui/Input.tsx
similarity index 100%
rename from webui/src/components/Input.tsx
rename to webui/src/components/ui/Input.tsx
diff --git a/webui/src/components/ModalFrame.tsx b/webui/src/components/ui/ModalFrame.tsx
similarity index 100%
rename from webui/src/components/ModalFrame.tsx
rename to webui/src/components/ui/ModalFrame.tsx
diff --git a/webui/src/components/RecursiveConfig.tsx b/webui/src/components/ui/RecursiveConfig.tsx
similarity index 98%
rename from webui/src/components/RecursiveConfig.tsx
rename to webui/src/components/ui/RecursiveConfig.tsx
index ca08b69..45e9b0d 100644
--- a/webui/src/components/RecursiveConfig.tsx
+++ b/webui/src/components/ui/RecursiveConfig.tsx
@@ -33,7 +33,7 @@ const PrimitiveArrayEditor: React.FC<{
   const [selected, setSelected] = useState('');
 
   const suggestions = useMemo(() => {
-    // 基础建议项：从当前值推导 + 针对常见配置路径补充
+    // 基础建议项：从当前值推�?+ 针对常见配置路径补充
     const base = new Set<string>(value.map((v) => String(v)));
     if (path.includes('tools') || path.includes('tool')) {
       ['read', 'write', 'edit', 'exec', 'process', 'message', 'nodes', 'memory_search'].forEach((x) => base.add(x));
diff --git a/webui/src/components/Select.tsx b/webui/src/components/ui/Select.tsx
similarity index 100%
rename from webui/src/components/Select.tsx
rename to webui/src/components/ui/Select.tsx
diff --git a/webui/src/components/Textarea.tsx b/webui/src/components/ui/Textarea.tsx
similarity index 100%
rename from webui/src/components/Textarea.tsx
rename to webui/src/components/ui/Textarea.tsx
diff --git a/webui/src/context/UIContext.tsx b/webui/src/context/UIContext.tsx
index 65b8164..90b6dc1 100644
--- a/webui/src/context/UIContext.tsx
+++ b/webui/src/context/UIContext.tsx
@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { useTranslation } from 'react-i18next';
-import { GlobalDialog, DialogOptions } from '../components/GlobalDialog';
+import { GlobalDialog, DialogOptions } from '../components/ui/GlobalDialog';
 
 type ThemeMode = 'light' | 'dark';
 
diff --git a/webui/src/hooks/useChatStream.ts b/webui/src/hooks/useChatStream.ts
new file mode 100644
index 0000000..ca2e914
--- /dev/null
+++ b/webui/src/hooks/useChatStream.ts
@@ -0,0 +1,102 @@
+import { useState, useRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { RenderedChatItem } from '../components/chat/chatUtils';
+
+interface UseChatStreamOptions {
+  q: string;
+  onHistoryRequest: () => void;
+  setMainChat: React.Dispatch<React.SetStateAction<RenderedChatItem[]>>;
+}
+
+export function useChatStream({ q, onHistoryRequest, setMainChat }: UseChatStreamOptions) {
+  const { t } = useTranslation();
+  
+  const sendMessageStream = useCallback(async (sessionKey: string, currentMsg: string, media: string) => {
+    try {
+      const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const url = new URL(`${proto}//${window.location.host}/webui/api/chat/live`);
+      const token = new URLSearchParams(q.startsWith('?') ? q.slice(1) : q).get('token');
+      if (token) url.searchParams.set('token', token);
+      
+      let assistantText = '';
+
+      setMainChat((prev) => [...prev, {
+        id: `local-assistant-${Date.now()}`,
+        role: 'assistant',
+        text: '',
+        label: t('agent'),
+        actorName: t('agent'),
+        avatarText: 'A',
+        avatarClassName: 'avatar-agent',
+      }]);
+
+      await new Promise<void>((resolve, reject) => {
+        const ws = new WebSocket(url.toString());
+        let settled = false;
+        
+        ws.onopen = () => {
+          ws.send(JSON.stringify({ session: sessionKey, message: currentMsg, media }));
+        };
+        
+        ws.onmessage = (event) => {
+          try {
+            const payload = JSON.parse(event.data);
+            if (payload?.type === 'chat_chunk' && typeof payload?.delta === 'string') {
+              assistantText += payload.delta;
+              setMainChat((prev) => {
+                const next = [...prev];
+                next[next.length - 1] = {
+                  ...next[next.length - 1],
+                  text: assistantText,
+                };
+                return next;
+              });
+              return;
+            }
+            if (payload?.type === 'chat_done') {
+              settled = true;
+              ws.close();
+              resolve();
+              return;
+            }
+            if (payload?.type === 'chat_error') {
+              settled = true;
+              ws.close();
+              reject(new Error(payload?.error || 'Chat request failed'));
+            }
+          } catch (e) {
+            settled = true;
+            ws.close();
+            reject(e);
+          }
+        };
+        
+        ws.onerror = () => {
+          settled = true;
+          ws.close();
+          reject(new Error('Chat request failed'));
+        };
+        
+        ws.onclose = () => {
+          if (!settled && !assistantText) {
+            reject(new Error('Chat request failed'));
+          }
+        };
+      });
+
+      onHistoryRequest();
+    } catch (e) {
+      setMainChat((prev) => [...prev, {
+        id: `local-system-${Date.now()}`,
+        role: 'system',
+        text: t('chatServerError'),
+        label: t('system'),
+        actorName: t('system'),
+        avatarText: 'S',
+        avatarClassName: 'avatar-system',
+      }]);
+    }
+  }, [q, t, setMainChat, onHistoryRequest]);
+
+  return { sendMessageStream };
+}
diff --git a/webui/src/hooks/useLogStream.ts b/webui/src/hooks/useLogStream.ts
new file mode 100644
index 0000000..e28a8eb
--- /dev/null
+++ b/webui/src/hooks/useLogStream.ts
@@ -0,0 +1,103 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { LogEntry } from '../types';
+
+interface UseLogStreamOptions {
+  q: string;
+}
+
+export function useLogStream({ q }: UseLogStreamOptions) {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [isStreaming, setIsStreaming] = useState(true);
+  const socketRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<number | null>(null);
+
+  const normalizeLog = useCallback((v: any): LogEntry => ({
+    time: typeof v?.time === 'string' && v.time ? v.time : (typeof v?.timestamp === 'string' && v.timestamp ? v.timestamp : new Date().toISOString()),
+    level: typeof v?.level === 'string' && v.level ? v.level : 'INFO',
+    code: typeof v?.code === 'number' ? v.code : undefined,
+    msg: typeof v?.msg === 'string' ? v.msg : (typeof v?.message === 'string' ? v.message : JSON.stringify(v)),
+    __raw: JSON.stringify(v),
+    ...v,
+  }), []);
+
+  const loadRecent = useCallback(async () => {
+    try {
+      const r = await fetch(`/webui/api/logs/recent${q ? `${q}&limit=10` : '?limit=10'}`);
+      if (!r.ok) return;
+      const j = await r.json();
+      if (Array.isArray(j.logs)) {
+        setLogs(j.logs.map(normalizeLog));
+      }
+    } catch (e) {
+      console.error('L0096', e);
+    }
+  }, [q, normalizeLog]);
+
+  const closeSocket = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    if (socketRef.current) {
+      socketRef.current.close();
+      socketRef.current = null;
+    }
+  }, []);
+
+  const startStreaming = useCallback(() => {
+    closeSocket();
+    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const url = new URL(`${proto}//${window.location.host}/webui/api/logs/live`);
+    const token = new URLSearchParams(q.startsWith('?') ? q.slice(1) : q).get('token');
+    if (token) url.searchParams.set('token', token);
+
+    const ws = new WebSocket(url.toString());
+    socketRef.current = ws;
+    ws.onmessage = (event) => {
+      try {
+        const payload = JSON.parse(event.data);
+        const log = normalizeLog(payload?.entry ?? payload);
+        setLogs(prev => [...prev.slice(-1000), log]);
+      } catch (e) {
+        console.error('L0097', e);
+      }
+    };
+    ws.onerror = (e) => {
+      console.error('L0097', e);
+    };
+    ws.onclose = (event) => {
+      if (socketRef.current === ws) {
+        socketRef.current = null;
+        if (event.code !== 1000 && event.code !== 1005) { // 1000 is Normal Closure, 1005 is No Status Received
+          reconnectTimeoutRef.current = window.setTimeout(() => {
+            startStreaming();
+          }, 3000);
+        }
+      }
+    };
+  }, [q, normalizeLog, closeSocket]);
+
+  useEffect(() => {
+    loadRecent();
+    if (isStreaming) {
+      startStreaming();
+    } else {
+      closeSocket();
+    }
+
+    return () => {
+      closeSocket();
+    };
+  }, [isStreaming, q, loadRecent, startStreaming, closeSocket]);
+
+  const clearLogs = useCallback(() => {
+    setLogs([]);
+  }, []);
+
+  return {
+    logs,
+    isStreaming,
+    setIsStreaming,
+    clearLogs
+  };
+}
diff --git a/webui/src/i18n/index.ts b/webui/src/i18n/index.ts
index 255917c..bcf338e 100644
--- a/webui/src/i18n/index.ts
+++ b/webui/src/i18n/index.ts
@@ -153,12 +153,11 @@ const resources = {
       memoryNamespace: 'Memory Namespace',
       subagentDeleteConfirmTitle: 'Delete Subagent Profile',
       subagentDeleteConfirmMessage: 'Delete subagent profile "{{id}}" permanently?',
-      sidebarMain: 'Main',
-      sidebarAgents: 'Agents',
-      sidebarConfig: 'Configuration',
-      sidebarKnowledge: 'Knowledge',
-      sidebarOps: 'Operations',
-      sidebarInsights: 'Insights',
+      sidebarWorkspace: 'Workspace',
+      sidebarAgentsKnowledge: 'Agents & Knowledge',
+      sidebarInfraNetwork: 'Infrastructure & Network',
+      sidebarSystemSettings: 'System Settings',
+      sidebarMonitoringAudit: 'Monitoring & Audit',
       ekg: 'EKG',
       ekgEscalations: 'Escalations',
       ekgSourceStats: 'Source Stats',
@@ -436,6 +435,8 @@ const resources = {
       id: 'ID',
       files: 'Files',
       close: 'Close',
+      openMenu: 'Open Menu',
+      closeMenu: 'Close Menu',
       path: 'Path',
       before: 'Before',
       after: 'After',
@@ -889,33 +890,6 @@ const resources = {
         remote: '远端',
       },
       clearFocus: '清除聚焦',
-      zoomIn: '放大',
-      zoomOut: '缩小',
-      fitView: '适应视图',
-      noLiveTasks: '当前没有活动任务',
-      remoteTasksUnavailable: '远端任务细节暂未镜像回来。',
-      savePromptFile: '保存 AGENT.md',
-      promptFileSaved: '提示词文件已保存。',
-      promptFileReady: 'AGENT.md 已就绪',
-      promptFileMissing: 'AGENT.md 缺失',
-      newProfile: '新建档案',
-      spawn: '创建',
-      dispatch: '派发',
-      toolAllowlist: '工具白名单',
-      memoryNamespace: '记忆命名空间',
-      subagentDeleteConfirmTitle: '删除子代理档案',
-      subagentDeleteConfirmMessage: '确认永久删除子代理档案 "{{id}}"？',
-      sidebarMain: '主入口',
-      sidebarAgents: 'Agents',
-      sidebarConfig: '配置',
-      sidebarKnowledge: '知识与调试',
-      sidebarOps: '运维',
-      sidebarInsights: '洞察',
-      ekg: 'EKG',
-      ekgEscalations: '升级拦截次数',
-      ekgSourceStats: '来源统计',
-      ekgChannelStats: '通道统计',
-      ekgTopProvidersWorkload: 'Top Providers（业务负载）',
       ekgTopProvidersAll: 'Top Providers（全量）',
       ekgTopErrsigWorkload: 'Top 错误签名（业务负载）',
       ekgTopErrsigAll: 'Top 错误签名（全量）',
@@ -1188,6 +1162,8 @@ const resources = {
       id: 'ID',
       files: '文件',
       close: '关闭',
+      openMenu: '展开侧边栏',
+      closeMenu: '收起侧边栏',
       path: '路径',
       before: '变更前',
       after: '变更后',
diff --git a/webui/src/pages/ChannelSettings.tsx b/webui/src/pages/ChannelSettings.tsx
index 87d3643..8b795e3 100644
--- a/webui/src/pages/ChannelSettings.tsx
+++ b/webui/src/pages/ChannelSettings.tsx
@@ -4,7 +4,7 @@ import { RefreshCw, Save } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import { useUI } from '../context/UIContext';
-import { Button, FixedButton } from '../components/Button';
+import { Button, FixedButton } from '../components/ui/Button';
 import ChannelSectionCard from '../components/channel/ChannelSectionCard';
 import ChannelFieldRenderer from '../components/channel/ChannelFieldRenderer';
 import {
@@ -15,8 +15,8 @@ import {
 } from '../components/channel/channelSchema';
 import WhatsAppQRCodePanel from '../components/channel/WhatsAppQRCodePanel';
 import WhatsAppStatusPanel from '../components/channel/WhatsAppStatusPanel';
-import { CheckboxField } from '../components/FormControls';
-import PageHeader from '../components/PageHeader';
+import { CheckboxField } from '../components/ui/FormControls';
+import PageHeader from '../components/layout/PageHeader';
 import type { ChannelKey } from '../components/channel/channelSchema';
 import { cloneJSON } from '../utils/object';
 
diff --git a/webui/src/pages/Chat.tsx b/webui/src/pages/Chat.tsx
index d6c577f..3ea2a27 100644
--- a/webui/src/pages/Chat.tsx
+++ b/webui/src/pages/Chat.tsx
@@ -4,7 +4,7 @@ import { motion } from 'motion/react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import { useUI } from '../context/UIContext';
-import { Button, FixedButton } from '../components/Button';
+import { Button, FixedButton } from '../components/ui/Button';
 import ChatComposer from '../components/chat/ChatComposer';
 import ChatEmptyState from '../components/chat/ChatEmptyState';
 import ChatMessageList from '../components/chat/ChatMessageList';
@@ -24,8 +24,9 @@ import {
   type StreamItem,
 } from '../components/chat/chatUtils';
 import { useSubagentChatRuntime } from '../components/chat/useSubagentChatRuntime';
-import { SelectField } from '../components/FormControls';
+import { SelectField } from '../components/ui/FormControls';
 import { ChatItem } from '../types';
+import { useChatStream } from '../hooks/useChatStream';
 
 const Chat: React.FC = () => {
   const { t } = useTranslation();
@@ -133,6 +134,12 @@ const Chat: React.FC = () => {
     }
   };
 
+  const { sendMessageStream } = useChatStream({
+    q,
+    onHistoryRequest: () => loadHistory(),
+    setMainChat,
+  });
+
   async function send() {
     if (!msg.trim() && !fileSelected) return;
 
@@ -169,85 +176,7 @@ const Chat: React.FC = () => {
     setFileSelected(false);
     if (input) input.value = '';
 
-    try {
-      const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-      const url = new URL(`${proto}//${window.location.host}/webui/api/chat/live`);
-      const token = new URLSearchParams(q.startsWith('?') ? q.slice(1) : q).get('token');
-      if (token) url.searchParams.set('token', token);
-      let assistantText = '';
-
-      setMainChat((prev) => [...prev, {
-        id: `local-assistant-${Date.now()}`,
-        role: 'assistant',
-        text: '',
-        label: t('agent'),
-        actorName: t('agent'),
-        avatarText: 'A',
-        avatarClassName: 'avatar-agent',
-      }]);
-
-      await new Promise<void>((resolve, reject) => {
-        const ws = new WebSocket(url.toString());
-        let settled = false;
-        ws.onopen = () => {
-          ws.send(JSON.stringify({ session: sessionKey, message: currentMsg, media }));
-        };
-        ws.onmessage = (event) => {
-          try {
-            const payload = JSON.parse(event.data);
-            if (payload?.type === 'chat_chunk' && typeof payload?.delta === 'string') {
-              assistantText += payload.delta;
-              setMainChat((prev) => {
-                const next = [...prev];
-                next[next.length - 1] = {
-                  ...next[next.length - 1],
-                  text: assistantText,
-                };
-                return next;
-              });
-              return;
-            }
-            if (payload?.type === 'chat_done') {
-              settled = true;
-              ws.close();
-              resolve();
-              return;
-            }
-            if (payload?.type === 'chat_error') {
-              settled = true;
-              ws.close();
-              reject(new Error(payload?.error || 'Chat request failed'));
-            }
-          } catch (e) {
-            settled = true;
-            ws.close();
-            reject(e);
-          }
-        };
-        ws.onerror = () => {
-          settled = true;
-          ws.close();
-          reject(new Error('Chat request failed'));
-        };
-        ws.onclose = () => {
-          if (!settled && !assistantText) {
-            reject(new Error('Chat request failed'));
-          }
-        };
-      });
-
-      loadHistory();
-    } catch (e) {
-      setMainChat((prev) => [...prev, {
-        id: `local-system-${Date.now()}`,
-        role: 'system',
-        text: t('chatServerError'),
-        label: t('system'),
-        actorName: t('system'),
-        avatarText: 'S',
-        avatarClassName: 'avatar-system',
-      }]);
-    }
+    await sendMessageStream(sessionKey, currentMsg, media);
   }
 
   useEffect(() => {
@@ -420,7 +349,7 @@ const Chat: React.FC = () => {
   };
 
   return (
-    <div className="flex h-full min-w-0 p-4 md:p-5 xl:p-6">
+    <div className="flex h-full min-w-0 p-4 md:p-6 xl:p-8">
       <div className="flex-1 flex flex-col brand-card ui-panel rounded-[30px] overflow-hidden">
         <div className="ui-surface-muted ui-border-subtle px-4 py-3 border-b flex items-center gap-2 min-w-0 overflow-x-auto">
           <div className="flex items-center gap-2 min-w-0 shrink-0">
diff --git a/webui/src/pages/Config.tsx b/webui/src/pages/Config.tsx
index 59cd328..192918c 100644
--- a/webui/src/pages/Config.tsx
+++ b/webui/src/pages/Config.tsx
@@ -2,14 +2,14 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import { useUI } from '../context/UIContext';
-import { TextareaField } from '../components/FormControls';
+import { TextareaField } from '../components/ui/FormControls';
 import { GatewayArtifactsSection, GatewayDispatchSection, GatewayP2PSection } from '../components/config/GatewayConfigSection';
 import { ConfigDiffModal, ConfigHeader, ConfigSidebar, ConfigToolbar } from '../components/config/ConfigPageChrome';
 import { buildDiffRows, formatTagRuleText, parseTagRuleText, setPath } from '../components/config/configUtils';
 import { useConfigGatewayActions } from '../components/config/useConfigGatewayActions';
 import { useConfigNavigation } from '../components/config/useConfigNavigation';
 import { useConfigSaveAction } from '../components/config/useConfigSaveAction';
-import RecursiveConfig from '../components/RecursiveConfig';
+import RecursiveConfig from '../components/ui/RecursiveConfig';
 import { cloneJSON } from '../utils/object';
 
 const Config: React.FC = () => {
diff --git a/webui/src/pages/Cron.tsx b/webui/src/pages/Cron.tsx
index 0bf9dc4..1451d4b 100644
--- a/webui/src/pages/Cron.tsx
+++ b/webui/src/pages/Cron.tsx
@@ -4,11 +4,11 @@ import { motion, AnimatePresence } from 'motion/react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import { useUI } from '../context/UIContext';
-import { Button, FixedButton } from '../components/Button';
-import EmptyState from '../components/EmptyState';
-import { CheckboxCardField, FieldBlock, SelectField, TextField, TextareaField } from '../components/FormControls';
-import { ModalBackdrop, ModalBody, ModalCard, ModalFooter, ModalHeader, ModalShell } from '../components/ModalFrame';
-import PageHeader from '../components/PageHeader';
+import { Button, FixedButton } from '../components/ui/Button';
+import EmptyState from '../components/data-display/EmptyState';
+import { CheckboxCardField, FieldBlock, SelectField, TextField, TextareaField } from '../components/ui/FormControls';
+import { ModalBackdrop, ModalBody, ModalCard, ModalFooter, ModalHeader, ModalShell } from '../components/ui/ModalFrame';
+import PageHeader from '../components/layout/PageHeader';
 import { CronJob } from '../types';
 import { formatLocalDateTime } from '../utils/time';
 
diff --git a/webui/src/pages/Dashboard.tsx b/webui/src/pages/Dashboard.tsx
index 2c963d3..4f12644 100644
--- a/webui/src/pages/Dashboard.tsx
+++ b/webui/src/pages/Dashboard.tsx
@@ -2,16 +2,15 @@ import React, { useMemo } from 'react';
 import { RefreshCw, Activity, MessageSquare, Wrench, Sparkles, AlertTriangle, Workflow } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
-import ArtifactPreviewCard from '../components/ArtifactPreviewCard';
-import StatCard from '../components/StatCard';
-import { FixedButton } from '../components/Button';
-import DetailGrid from '../components/DetailGrid';
-import InfoTile from '../components/InfoTile';
-import InsetCard from '../components/InsetCard';
-import MetricPanel from '../components/MetricPanel';
-import PageHeader from '../components/PageHeader';
-import SectionPanel from '../components/SectionPanel';
-import { dataUrlForArtifact, formatArtifactBytes } from '../utils/artifacts';
+import ArtifactPreviewCard from '../components/data-display/ArtifactPreviewCard';
+import StatCard from '../components/data-display/StatCard';
+import { FixedButton } from '../components/ui/Button';
+import DetailGrid from '../components/data-display/DetailGrid';
+import InfoTile from '../components/data-display/InfoTile';
+import InsetCard from '../components/data-display/InsetCard';
+import MetricPanel from '../components/data-display/MetricPanel';
+import PageHeader from '../components/layout/PageHeader';
+import SectionPanel from '../components/layout/SectionPanel';
 import { formatRuntimeTime } from '../utils/runtime';
 
 const Dashboard: React.FC = () => {
@@ -58,42 +57,6 @@ const Dashboard: React.FC = () => {
   const p2pRetryCount = Array.isArray(nodeP2P?.nodes)
     ? nodeP2P.nodes.reduce((sum: number, session: any) => sum + Number(session?.retry_count || 0), 0)
     : 0;
-  const p2pNodeSessions = useMemo(() => {
-    if (!Array.isArray(nodeP2P?.nodes)) return [];
-    return [...nodeP2P.nodes]
-      .map((session: any) => ({
-        node: String(session?.node || '-'),
-        status: String(session?.status || 'unknown'),
-        retryCount: Number(session?.retry_count || 0),
-        lastError: String(session?.last_error || '').trim(),
-        lastReadyAt: formatRuntimeTime(session?.last_ready_at),
-        lastAttempt: formatRuntimeTime(session?.last_attempt),
-        createdAt: formatRuntimeTime(session?.created_at),
-      }))
-      .sort((a, b) => a.node.localeCompare(b.node));
-  }, [nodeP2P]);
-  const artifactRetentionEnabled = Boolean(nodeArtifactRetention?.enabled);
-  const artifactRetentionPruned = Number(nodeArtifactRetention?.pruned || 0);
-  const artifactRetentionRemaining = Number(nodeArtifactRetention?.remaining || 0);
-  const artifactRetentionLastRun = formatRuntimeTime(nodeArtifactRetention?.last_run_at);
-  const recentNodeDispatches = useMemo(() => {
-    return [...nodeDispatchItems]
-      .slice(0, 8)
-      .map((item: any, index: number) => ({
-        id: `${item?.time || 'dispatch'}-${index}`,
-        time: formatRuntimeTime(item?.time),
-        node: String(item?.node || '-'),
-        action: String(item?.action || '-'),
-        usedTransport: String(item?.used_transport || '-'),
-        fallbackFrom: String(item?.fallback_from || '').trim(),
-        durationMs: Number(item?.duration_ms || 0),
-        artifactCount: Number(item?.artifact_count || 0),
-        artifactKinds: Array.isArray(item?.artifact_kinds) ? item.artifact_kinds.map((kind: any) => String(kind || '').trim()).filter(Boolean) : [],
-        artifacts: Array.isArray(item?.artifacts) ? item.artifacts : [],
-        ok: Boolean(item?.ok),
-        error: String(item?.error || '').trim(),
-      }));
-  }, [nodeDispatchItems]);
   const topNodeAlerts = useMemo(() => {
     return [...(Array.isArray(nodeAlerts) ? nodeAlerts : [])].slice(0, 6);
   }, [nodeAlerts]);
@@ -147,31 +110,7 @@ const Dashboard: React.FC = () => {
         />
       </div>
 
-      <SectionPanel
-        title={t('nodeArtifactsRetention')}
-        subtitle={t('nodeArtifactsRetentionHint')}
-        icon={<Activity className="w-5 h-5 text-zinc-400" />}
-        actions={
-          <div className={`ui-pill rounded-full px-2.5 py-1 text-[11px] font-medium ${artifactRetentionEnabled ? 'ui-pill-success' : 'ui-pill-neutral'}`}>
-            {artifactRetentionEnabled ? t('enabled') : t('disabled')}
-          </div>
-        }
-      >
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-3 text-sm">
-          <InfoTile label={t('nodeArtifactsRetentionPruned')} className="brand-card-subtle rounded-2xl border border-zinc-800" contentClassName="text-xl font-semibold text-zinc-100">
-            {artifactRetentionPruned}
-          </InfoTile>
-          <InfoTile label={t('nodeArtifactsRetentionRemaining')} className="brand-card-subtle rounded-2xl border border-zinc-800" contentClassName="text-xl font-semibold text-zinc-100">
-            {artifactRetentionRemaining}
-          </InfoTile>
-          <InfoTile label={t('nodeArtifactsRetentionKeepLatest')} className="brand-card-subtle rounded-2xl border border-zinc-800" contentClassName="text-xl font-semibold text-zinc-100">
-            {Number(nodeArtifactRetention?.keep_latest || 0) || '-'}
-          </InfoTile>
-          <InfoTile label={t('time')} className="brand-card-subtle rounded-2xl border border-zinc-800" contentClassName="text-sm font-medium text-zinc-100">
-            {artifactRetentionLastRun}
-          </InfoTile>
-        </div>
-      </SectionPanel>
+
 
       <SectionPanel title={t('nodeAlerts')} icon={<AlertTriangle className="w-5 h-5 text-amber-400" />}>
         {topNodeAlerts.length === 0 ? (
@@ -235,147 +174,7 @@ const Dashboard: React.FC = () => {
         </SectionPanel>
       </div>
 
-      <SectionPanel
-        title={t('dashboardNodeP2PSessions')}
-        subtitle={t('dashboardNodeP2PDetail', { transport: p2pTransport, sessions: p2pSessions, retries: p2pRetryCount })}
-        icon={<Workflow className="w-5 h-5 text-zinc-400" />}
-        actions={`${p2pConfiguredIce} ICE · ${p2pConfiguredStun} STUN`}
-      >
-        {p2pNodeSessions.length === 0 ? (
-          <div className="text-sm text-zinc-500 text-center py-8">{t('dashboardNodeP2PSessionsEmpty')}</div>
-        ) : (
-          <div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
-            {p2pNodeSessions.map((session) => {
-              const isOpen = session.status.toLowerCase() === 'open';
-              const isConnecting = session.status.toLowerCase() === 'connecting';
-              return (
-                <InsetCard key={session.node}>
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0">
-                      <div className="text-sm font-medium text-zinc-100 truncate">{session.node}</div>
-                      <div className="text-xs text-zinc-500 mt-1">
-                        {t('dashboardNodeP2PSessionCreated')}: {session.createdAt}
-                      </div>
-                    </div>
-                  <div className={`ui-pill shrink-0 rounded-full px-2.5 py-1 text-[11px] font-medium ${isOpen ? 'ui-pill-success' : isConnecting ? 'ui-pill-warning' : 'ui-pill-danger'}`}>
-                    {session.status}
-                  </div>
-                </div>
-                  <DetailGrid
-                    className="mt-4 text-xs"
-                    columnsClassName="grid-cols-1 md:grid-cols-2"
-                    items={[
-                      {
-                        key: 'retry',
-                        label: t('dashboardNodeP2PSessionRetries'),
-                        value: session.retryCount,
-                        valueClassName: 'text-zinc-200 mt-1',
-                      },
-                      {
-                        key: 'ready',
-                        label: t('dashboardNodeP2PSessionReady'),
-                        value: session.lastReadyAt,
-                        valueClassName: 'text-zinc-200 mt-1',
-                      },
-                      {
-                        key: 'attempt',
-                        label: t('dashboardNodeP2PSessionAttempt'),
-                        value: session.lastAttempt,
-                        valueClassName: 'text-zinc-200 mt-1',
-                      },
-                      {
-                        key: 'error',
-                        label: t('dashboardNodeP2PSessionError'),
-                        value: session.lastError || '-',
-                        valueClassName: `mt-1 break-all ${session.lastError ? 'text-rose-300' : 'text-zinc-500'}`,
-                      },
-                    ]}
-                  />
-                </InsetCard>
-              );
-            })}
-          </div>
-        )}
-      </SectionPanel>
 
-      <SectionPanel
-        title={t('dashboardNodeDispatches')}
-        subtitle={t('dashboardNodeDispatchesHint')}
-        icon={<Activity className="w-5 h-5 text-zinc-400" />}
-      >
-        {recentNodeDispatches.length === 0 ? (
-          <div className="text-sm text-zinc-500 text-center py-8">{t('dashboardNodeDispatchesEmpty')}</div>
-        ) : (
-          <div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
-            {recentNodeDispatches.map((item) => (
-              <InsetCard key={item.id}>
-                <div className="flex items-start justify-between gap-3">
-                  <div className="min-w-0">
-                    <div className="text-sm font-medium text-zinc-100 truncate">{`${item.node} · ${item.action}`}</div>
-                    <div className="text-xs text-zinc-500 mt-1">{item.time}</div>
-                  </div>
-                  <div className={`ui-pill shrink-0 rounded-full px-2.5 py-1 text-[11px] font-medium ${item.ok ? 'ui-pill-success' : 'ui-pill-danger'}`}>
-                    {item.ok ? 'ok' : 'error'}
-                  </div>
-                </div>
-                <DetailGrid
-                  className="mt-4 text-xs"
-                  columnsClassName="grid-cols-1 md:grid-cols-2"
-                  items={[
-                    {
-                      key: 'transport',
-                      label: t('dashboardNodeDispatchTransport'),
-                      value: item.usedTransport,
-                      valueClassName: 'text-zinc-200 mt-1',
-                    },
-                    {
-                      key: 'fallback',
-                      label: t('dashboardNodeDispatchFallback'),
-                      value: item.fallbackFrom || '-',
-                      valueClassName: 'text-zinc-200 mt-1',
-                    },
-                    {
-                      key: 'duration',
-                      label: t('dashboardNodeDispatchDuration'),
-                      value: `${item.durationMs}ms`,
-                      valueClassName: 'text-zinc-200 mt-1',
-                    },
-                    {
-                      key: 'artifacts',
-                      label: t('dashboardNodeDispatchArtifacts'),
-                      value: item.artifactCount > 0 ? `${item.artifactCount}${item.artifactKinds.length ? ` · ${item.artifactKinds.join(', ')}` : ''}` : '-',
-                      valueClassName: 'text-zinc-200 mt-1',
-                    },
-                    {
-                      key: 'error',
-                      label: t('dashboardNodeDispatchError'),
-                      value: item.error || '-',
-                      valueClassName: `mt-1 break-all ${item.error ? 'text-rose-300' : 'text-zinc-500'}`,
-                    },
-                  ]}
-                />
-                {item.artifacts.length > 0 && (
-                  <div className="mt-4 space-y-3">
-                    <div className="text-zinc-400 text-xs">{t('dashboardNodeDispatchArtifactPreview')}</div>
-                    {item.artifacts.slice(0, 2).map((artifact: any, artifactIndex: number) => {
-                      const dataUrl = dataUrlForArtifact(artifact);
-                      return (
-                        <ArtifactPreviewCard
-                          key={`${item.id}-artifact-${artifactIndex}`}
-                          artifact={artifact}
-                          dataUrl={dataUrl}
-                          fallbackName={`artifact-${artifactIndex + 1}`}
-                          formatBytes={formatArtifactBytes}
-                        />
-                      );
-                    })}
-                  </div>
-                )}
-              </InsetCard>
-            ))}
-          </div>
-        )}
-      </SectionPanel>
     </div>
   );
 };
diff --git a/webui/src/pages/EKG.tsx b/webui/src/pages/EKG.tsx
index 5c0470b..5e4fe8d 100644
--- a/webui/src/pages/EKG.tsx
+++ b/webui/src/pages/EKG.tsx
@@ -2,11 +2,11 @@ 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';
-import { FixedButton } from '../components/Button';
+import { FixedButton } from '../components/ui/Button';
 import EKGDistributionCard from '../components/ekg/EKGDistributionCard';
 import EKGRankingCard from '../components/ekg/EKGRankingCard';
-import { SelectField } from '../components/FormControls';
-import MetricPanel from '../components/MetricPanel';
+import { SelectField } from '../components/ui/FormControls';
+import MetricPanel from '../components/data-display/MetricPanel';
 
 type EKGKV = { key?: string; score?: number; count?: number };
 
diff --git a/webui/src/pages/LogCodes.tsx b/webui/src/pages/LogCodes.tsx
index e6b62b8..5b5daee 100644
--- a/webui/src/pages/LogCodes.tsx
+++ b/webui/src/pages/LogCodes.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
-import { TextField } from '../components/FormControls';
-import PageHeader from '../components/PageHeader';
+import { TextField } from '../components/ui/FormControls';
+import PageHeader from '../components/layout/PageHeader';
 
 type CodeItem = {
   code: number;
diff --git a/webui/src/pages/Logs.tsx b/webui/src/pages/Logs.tsx
index e41f0cf..c2cd3ce 100644
--- a/webui/src/pages/Logs.tsx
+++ b/webui/src/pages/Logs.tsx
@@ -3,71 +3,22 @@ import { Terminal, Trash2, Play, Square } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import { useUI } from '../context/UIContext';
-import EmptyState from '../components/EmptyState';
+import EmptyState from '../components/data-display/EmptyState';
 import { LogEntry } from '../types';
 import { formatLocalTime } from '../utils/time';
-import { Button, FixedButton } from '../components/Button';
-import PageHeader from '../components/PageHeader';
-import ToolbarRow from '../components/ToolbarRow';
+import { Button, FixedButton } from '../components/ui/Button';
+import PageHeader from '../components/layout/PageHeader';
+import ToolbarRow from '../components/layout/ToolbarRow';
+import { useLogStream } from '../hooks/useLogStream';
 
 const Logs: React.FC = () => {
   const { t } = useTranslation();
   const ui = useUI();
   const { q } = useAppContext();
-  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const { logs, isStreaming, setIsStreaming, clearLogs: hookClearLogs } = useLogStream({ q });
   const [codeMap, setCodeMap] = useState<Record<number, string>>({});
-  const [isStreaming, setIsStreaming] = useState(true);
   const [showRaw, setShowRaw] = useState(false);
   const logEndRef = useRef<HTMLDivElement>(null);
-  const socketRef = useRef<WebSocket | null>(null);
-
-  const loadRecent = async () => {
-    try {
-      const r = await fetch(`/webui/api/logs/recent${q ? `${q}&limit=10` : '?limit=10'}`);
-      if (!r.ok) return;
-      const j = await r.json();
-      if (Array.isArray(j.logs)) {
-        setLogs(j.logs.map(normalizeLog));
-      }
-    } catch (e) {
-      console.error('L0096', e);
-    }
-  };
-
-  const closeSocket = () => {
-    if (socketRef.current) {
-      socketRef.current.close();
-      socketRef.current = null;
-    }
-  };
-
-  const startStreaming = () => {
-    closeSocket();
-    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const url = new URL(`${proto}//${window.location.host}/webui/api/logs/live`);
-    const token = new URLSearchParams(q.startsWith('?') ? q.slice(1) : q).get('token');
-    if (token) url.searchParams.set('token', token);
-
-    const ws = new WebSocket(url.toString());
-    socketRef.current = ws;
-    ws.onmessage = (event) => {
-      try {
-        const payload = JSON.parse(event.data);
-        const log = normalizeLog(payload?.entry ?? payload);
-        setLogs(prev => [...prev.slice(-1000), log]);
-      } catch (e) {
-        console.error('L0097', e);
-      }
-    };
-    ws.onerror = (e) => {
-      console.error('L0097', e);
-    };
-    ws.onclose = () => {
-      if (socketRef.current === ws) {
-        socketRef.current = null;
-      }
-    };
-  };
 
   const loadCodeMap = async () => {
     try {
@@ -96,19 +47,6 @@ const Logs: React.FC = () => {
     loadCodeMap();
   }, [q]);
 
-  useEffect(() => {
-    loadRecent();
-    if (isStreaming) {
-      startStreaming();
-    } else {
-      closeSocket();
-    }
-
-    return () => {
-      closeSocket();
-    };
-  }, [isStreaming, q]);
-
   useEffect(() => {
     logEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [logs]);
@@ -121,18 +59,9 @@ const Logs: React.FC = () => {
       confirmText: t('clear'),
     });
     if (!ok) return;
-    setLogs([]);
+    hookClearLogs();
   };
 
-  const normalizeLog = (v: any): LogEntry => ({
-    time: typeof v?.time === 'string' && v.time ? v.time : (typeof v?.timestamp === 'string' && v.timestamp ? v.timestamp : new Date().toISOString()),
-    level: typeof v?.level === 'string' && v.level ? v.level : 'INFO',
-    code: typeof v?.code === 'number' ? v.code : undefined,
-    msg: typeof v?.msg === 'string' ? v.msg : (typeof v?.message === 'string' ? v.message : JSON.stringify(v)),
-    __raw: JSON.stringify(v),
-    ...v,
-  });
-
   const toCode = (v: any): number | undefined => {
     if (typeof v === 'number' && Number.isFinite(v) && v > 0) return v;
     if (typeof v === 'string') {
@@ -166,7 +95,7 @@ const Logs: React.FC = () => {
   };
 
   return (
-    <div className="p-4 md:p-5 xl:p-6 w-full space-y-4 h-full flex flex-col">
+    <div className="p-4 md:p-6 xl:p-8 w-full space-y-4 h-full flex flex-col">
       <PageHeader
         title={t('logs')}
         titleClassName="ui-text-primary"
diff --git a/webui/src/pages/MCP.tsx b/webui/src/pages/MCP.tsx
index 67cc3e9..17abe3d 100644
--- a/webui/src/pages/MCP.tsx
+++ b/webui/src/pages/MCP.tsx
@@ -4,14 +4,14 @@ import { Plus, RefreshCw, Save, Trash2, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import { useUI } from '../context/UIContext';
-import { Button, FixedButton } from '../components/Button';
-import EmptyState from '../components/EmptyState';
-import { ModalBackdrop, ModalBody, ModalCard, ModalFooter, ModalHeader, ModalShell } from '../components/ModalFrame';
+import { Button, FixedButton } from '../components/ui/Button';
+import EmptyState from '../components/data-display/EmptyState';
+import { ModalBackdrop, ModalBody, ModalCard, ModalFooter, ModalHeader, ModalShell } from '../components/ui/ModalFrame';
 import MCPServerCard from '../components/mcp/MCPServerCard';
 import MCPServerEditor from '../components/mcp/MCPServerEditor';
-import PageHeader from '../components/PageHeader';
-import SectionHeader from '../components/SectionHeader';
-import ToolbarRow from '../components/ToolbarRow';
+import PageHeader from '../components/layout/PageHeader';
+import SectionHeader from '../components/layout/SectionHeader';
+import ToolbarRow from '../components/layout/ToolbarRow';
 import { cloneJSON } from '../utils/object';
 
 type MCPDraftServer = {
diff --git a/webui/src/pages/Memory.tsx b/webui/src/pages/Memory.tsx
index 1438eca..3e51b40 100644
--- a/webui/src/pages/Memory.tsx
+++ b/webui/src/pages/Memory.tsx
@@ -3,9 +3,9 @@ import { Save, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import { useUI } from '../context/UIContext';
-import { Button, FixedButton } from '../components/Button';
-import { TextareaField } from '../components/FormControls';
-import FileListItem from '../components/FileListItem';
+import { Button, FixedButton } from '../components/ui/Button';
+import { TextareaField } from '../components/ui/FormControls';
+import FileListItem from '../components/list/FileListItem';
 
 const Memory: React.FC = () => {
   const { t } = useTranslation();
diff --git a/webui/src/pages/NodeArtifacts.tsx b/webui/src/pages/NodeArtifacts.tsx
index b5e7d08..9ff1b9d 100644
--- a/webui/src/pages/NodeArtifacts.tsx
+++ b/webui/src/pages/NodeArtifacts.tsx
@@ -3,13 +3,13 @@ import { Download, RefreshCw, Scissors, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
 import { useAppContext } from '../context/AppContext';
-import ArtifactPreviewCard from '../components/ArtifactPreviewCard';
-import { FixedButton, FixedLinkButton, LinkButton } from '../components/Button';
-import CodeBlockPanel from '../components/CodeBlockPanel';
-import EmptyState from '../components/EmptyState';
-import { SelectField, TextField } from '../components/FormControls';
-import ListPanel from '../components/ListPanel';
-import SummaryListItem from '../components/SummaryListItem';
+import ArtifactPreviewCard from '../components/data-display/ArtifactPreviewCard';
+import { FixedButton, FixedLinkButton, LinkButton } from '../components/ui/Button';
+import CodeBlockPanel from '../components/data-display/CodeBlockPanel';
+import EmptyState from '../components/data-display/EmptyState';
+import { SelectField, TextField } from '../components/ui/FormControls';
+import ListPanel from '../components/layout/ListPanel';
+import SummaryListItem from '../components/list/SummaryListItem';
 import { dataUrlForArtifact, formatArtifactBytes } from '../utils/artifacts';
 import { formatLocalDateTime } from '../utils/time';
 
diff --git a/webui/src/pages/Nodes.tsx b/webui/src/pages/Nodes.tsx
index 1dcdec2..01f3cbe 100644
--- a/webui/src/pages/Nodes.tsx
+++ b/webui/src/pages/Nodes.tsx
@@ -5,21 +5,21 @@ import { Check, Download, Play, RefreshCw, RotateCcw } from 'lucide-react';
 import { useAppContext } from '../context/AppContext';
 import { dataUrlForArtifact, formatArtifactBytes } from '../utils/artifacts';
 import { formatLocalDateTime } from '../utils/time';
-import { Button, FixedButton, FixedLinkButton } from '../components/Button';
-import DetailGrid from '../components/DetailGrid';
-import CodeBlockPanel from '../components/CodeBlockPanel';
-import EmptyState from '../components/EmptyState';
-import InfoBlock from '../components/InfoBlock';
-import ListPanel from '../components/ListPanel';
+import { Button, FixedButton, FixedLinkButton } from '../components/ui/Button';
+import DetailGrid from '../components/data-display/DetailGrid';
+import CodeBlockPanel from '../components/data-display/CodeBlockPanel';
+import EmptyState from '../components/data-display/EmptyState';
+import InfoBlock from '../components/data-display/InfoBlock';
+import ListPanel from '../components/layout/ListPanel';
 import DispatchArtifactPreviewSection from '../components/nodes/DispatchArtifactPreviewSection';
 import DispatchReplayPanel from '../components/nodes/DispatchReplayPanel';
 import AgentTreePanel from '../components/nodes/AgentTreePanel';
 import NodeP2PPanel from '../components/nodes/NodeP2PPanel';
-import PageHeader from '../components/PageHeader';
-import PanelHeader from '../components/PanelHeader';
-import { SelectField, TextField } from '../components/FormControls';
-import SectionHeader from '../components/SectionHeader';
-import SummaryListItem from '../components/SummaryListItem';
+import PageHeader from '../components/layout/PageHeader';
+import PanelHeader from '../components/layout/PanelHeader';
+import { SelectField, TextField } from '../components/ui/FormControls';
+import SectionHeader from '../components/layout/SectionHeader';
+import SummaryListItem from '../components/list/SummaryListItem';
 
 const Nodes: React.FC = () => {
   const { t } = useTranslation();
diff --git a/webui/src/pages/Providers.tsx b/webui/src/pages/Providers.tsx
index 47e83fa..2ff66b5 100644
--- a/webui/src/pages/Providers.tsx
+++ b/webui/src/pages/Providers.tsx
@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { RefreshCw, Save } from 'lucide-react';
 import { useAppContext } from '../context/AppContext';
 import { useUI } from '../context/UIContext';
-import { Button, FixedButton } from '../components/Button';
-import PageHeader from '../components/PageHeader';
+import { Button, FixedButton } from '../components/ui/Button';
+import PageHeader from '../components/layout/PageHeader';
 import { ConfigDiffModal } from '../components/config/ConfigPageChrome';
 import { ProviderProxyCard, ProviderRuntimeDrawer, ProviderRuntimeSummary, ProviderRuntimeToolbar } from '../components/config/ProviderConfigSection';
 import { buildDiffRows, RuntimeWindow } from '../components/config/configUtils';
diff --git a/webui/src/pages/Skills.tsx b/webui/src/pages/Skills.tsx
index 0f229bd..50dcb1a 100644
--- a/webui/src/pages/Skills.tsx
+++ b/webui/src/pages/Skills.tsx
@@ -4,12 +4,12 @@ import { motion, AnimatePresence } from 'motion/react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import { useUI } from '../context/UIContext';
-import { Button, FixedButton } from '../components/Button';
-import { TextField, TextareaField, ToolbarCheckboxField } from '../components/FormControls';
-import { ModalBackdrop, ModalBody, ModalCard, ModalHeader, ModalShell } from '../components/ModalFrame';
-import PageHeader from '../components/PageHeader';
-import ToolbarRow from '../components/ToolbarRow';
-import FileListItem from '../components/FileListItem';
+import { Button, FixedButton } from '../components/ui/Button';
+import { TextField, TextareaField, ToolbarCheckboxField } from '../components/ui/FormControls';
+import { ModalBackdrop, ModalBody, ModalCard, ModalHeader, ModalShell } from '../components/ui/ModalFrame';
+import PageHeader from '../components/layout/PageHeader';
+import ToolbarRow from '../components/layout/ToolbarRow';
+import FileListItem from '../components/list/FileListItem';
 
 const Skills: React.FC = () => {
   const { t } = useTranslation();
diff --git a/webui/src/pages/SubagentProfiles.tsx b/webui/src/pages/SubagentProfiles.tsx
index 00a6f46..abdc021 100644
--- a/webui/src/pages/SubagentProfiles.tsx
+++ b/webui/src/pages/SubagentProfiles.tsx
@@ -3,8 +3,8 @@ import { Plus, RefreshCw } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import { useUI } from '../context/UIContext';
-import { FixedButton } from '../components/Button';
-import PageHeader from '../components/PageHeader';
+import { FixedButton } from '../components/ui/Button';
+import PageHeader from '../components/layout/PageHeader';
 import ProfileEditorPanel from '../components/subagentProfiles/ProfileEditorPanel';
 import ProfileListPanel from '../components/subagentProfiles/ProfileListPanel';
 import { emptyDraft, toProfileDraft, type SubagentProfile, type ToolAllowlistGroup } from '../components/subagentProfiles/profileDraft';
diff --git a/webui/src/pages/Subagents.tsx b/webui/src/pages/Subagents.tsx
index 5a06878..16a29d3 100644
--- a/webui/src/pages/Subagents.tsx
+++ b/webui/src/pages/Subagents.tsx
@@ -2,9 +2,9 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import { RefreshCw } from 'lucide-react';
-import { FixedButton } from '../components/Button';
-import PageHeader from '../components/PageHeader';
-import SectionPanel from '../components/SectionPanel';
+import { FixedButton } from '../components/ui/Button';
+import PageHeader from '../components/layout/PageHeader';
+import SectionPanel from '../components/layout/SectionPanel';
 import GraphCard from '../components/subagents/GraphCard';
 import TopologyCanvas from '../components/subagents/TopologyCanvas';
 import TopologyControls from '../components/subagents/TopologyControls';
diff --git a/webui/src/pages/TaskAudit.tsx b/webui/src/pages/TaskAudit.tsx
index 7d42952..d9cb6a9 100644
--- a/webui/src/pages/TaskAudit.tsx
+++ b/webui/src/pages/TaskAudit.tsx
@@ -1,20 +1,20 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RefreshCw } from 'lucide-react';
-import ArtifactPreviewCard from '../components/ArtifactPreviewCard';
+import ArtifactPreviewCard from '../components/data-display/ArtifactPreviewCard';
 import { useAppContext } from '../context/AppContext';
 import { dataUrlForArtifact, formatArtifactBytes } from '../utils/artifacts';
-import CodeBlockPanel from '../components/CodeBlockPanel';
-import DetailGrid from '../components/DetailGrid';
-import EmptyState from '../components/EmptyState';
-import { FixedButton } from '../components/Button';
-import InfoBlock from '../components/InfoBlock';
-import ListPanel from '../components/ListPanel';
-import PageHeader from '../components/PageHeader';
-import PanelHeader from '../components/PanelHeader';
-import { SelectField } from '../components/FormControls';
-import SummaryListItem from '../components/SummaryListItem';
-import ToolbarRow from '../components/ToolbarRow';
+import CodeBlockPanel from '../components/data-display/CodeBlockPanel';
+import DetailGrid from '../components/data-display/DetailGrid';
+import EmptyState from '../components/data-display/EmptyState';
+import { FixedButton } from '../components/ui/Button';
+import InfoBlock from '../components/data-display/InfoBlock';
+import ListPanel from '../components/layout/ListPanel';
+import PageHeader from '../components/layout/PageHeader';
+import PanelHeader from '../components/layout/PanelHeader';
+import { SelectField } from '../components/ui/FormControls';
+import SummaryListItem from '../components/list/SummaryListItem';
+import ToolbarRow from '../components/layout/ToolbarRow';
 import { formatLocalDateTime } from '../utils/time';
 
 type TaskAuditItem = {