fix: enforce subagent prompt files and refine webui

webui/src/components/Header.tsx

@@ -54,11 +54,10 @@ const Header: React.FC = () => {
 
         <button
           onClick={toggleTheme}
-          className="flex items-center gap-2 text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 px-3 py-1.5 rounded-lg"
+          className="inline-flex h-9 w-9 items-center justify-center text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-lg"
           title={theme === 'dark' ? t('themeLight') : t('themeDark')}
         >
           {theme === 'dark' ? <SunMedium className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-          <span className="hidden sm:inline">{theme === 'dark' ? t('themeLight') : t('themeDark')}</span>
         </button>
         
         <button 

webui/src/components/NavItem.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import { Check } from 'lucide-react';
 
 interface NavItemProps {
   icon: React.ReactNode;
@@ -9,17 +10,26 @@ interface NavItemProps {
 }
 
 const NavItem: React.FC<NavItemProps> = ({ icon, label, to, collapsed = false }) => (
-  <NavLink 
+  <NavLink
     to={to}
     title={collapsed ? label : undefined}
-    className={({ isActive }) => `w-full flex items-center ${collapsed ? 'justify-center' : 'gap-3'} px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
+    className={({ isActive }) => `w-full flex items-center ${collapsed ? 'justify-center' : 'gap-3'} px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 border ${
       isActive
-        ? 'nav-item-active text-indigo-700 border border-indigo-500/30'
-        : 'text-zinc-400 hover:bg-zinc-800/30 hover:text-zinc-200 border border-transparent'
+        ? 'nav-item-active text-indigo-700 border-indigo-500/30'
+        : 'text-zinc-400 border-transparent'
     }`}
   >
-    {icon}
-    {!collapsed && label}
+    {({ isActive }) => (
+      <>
+        <span className="shrink-0">{icon}</span>
+        {!collapsed && <span className="min-w-0 flex-1 truncate">{label}</span>}
+        {!collapsed && isActive && (
+          <span className="ml-auto inline-flex h-5 w-5 items-center justify-center rounded-full bg-indigo-500/15 text-indigo-300">
+            <Check className="w-3.5 h-3.5" />
+          </span>
+        )}
+      </>
+    )}
   </NavLink>
 );
 

webui/src/components/Sidebar.tsx

@@ -14,17 +14,21 @@ const Sidebar: React.FC = () => {
       items: [
         { icon: <LayoutDashboard className="w-5 h-5" />, label: t('dashboard'), to: '/' },
         { icon: <MessageSquare className="w-5 h-5" />, label: t('chat'), to: '/chat' },
-        { icon: <Boxes className="w-5 h-5" />, label: t('subagentsRuntime'), to: '/subagents' },
       ],
     },
     {
-      title: t('sidebarRuntime'),
+      title: t('sidebarAgents'),
+      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' },
+      ],
+    },
+    {
+      title: t('sidebarOps'),
       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' },
-        { icon: <Terminal className="w-5 h-5" />, label: t('logs'), to: '/logs' },
-        { icon: <BrainCircuit className="w-5 h-5" />, label: t('ekg'), to: '/ekg' },
       ],
     },
     {
@@ -32,7 +36,6 @@ const Sidebar: React.FC = () => {
       items: [
         { icon: <Settings className="w-5 h-5" />, label: t('config'), to: '/config' },
         { icon: <Plug className="w-5 h-5" />, label: t('mcpServices'), to: '/mcp' },
-        { icon: <Bot className="w-5 h-5" />, label: t('subagentProfiles'), to: '/subagent-profiles' },
         { icon: <Clock className="w-5 h-5" />, label: t('cronJobs'), to: '/cron' },
       ],
     },
@@ -41,6 +44,13 @@ const Sidebar: React.FC = () => {
       items: [
         { icon: <FolderOpen className="w-5 h-5" />, label: t('memory'), to: '/memory' },
         { icon: <Zap className="w-5 h-5" />, label: t('skills'), to: '/skills' },
+      ],
+    },
+    {
+      title: t('sidebarInsights'),
+      items: [
+        { 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' },
       ],
     },
@@ -80,15 +90,10 @@ const Sidebar: React.FC = () => {
       <div className={`hidden md:flex border-t border-zinc-800 bg-zinc-900/20 ${sidebarCollapsed ? 'justify-center p-3' : 'p-3'}`}>
         <button
           onClick={() => setSidebarCollapsed((prev) => !prev)}
-          className={`flex items-center ${sidebarCollapsed ? 'justify-center' : 'justify-between'} gap-3 rounded-2xl border border-zinc-800 brand-card-subtle hover:bg-zinc-900/40 text-zinc-300 transition-colors ${sidebarCollapsed ? 'w-11 h-11' : 'w-full px-3 py-2.5'}`}
+          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"
           title={sidebarCollapsed ? t('expand') : t('collapse')}
         >
-          {sidebarCollapsed ? <PanelLeftOpen className="w-4 h-4" /> : (
-            <>
-              <span className="text-sm font-medium">{t('collapse')}</span>
-              <PanelLeftClose className="w-4 h-4 shrink-0" />
-            </>
-          )}
+          {sidebarCollapsed ? <PanelLeftOpen className="w-4 h-4" /> : <PanelLeftClose className="w-4 h-4" />}
         </button>
       </div>
     </aside>