fix: simplify dashboard and agents canvas panel

webui/src/index.css

@@ -332,25 +332,6 @@ html.theme-dark .brand-button {
   border-radius: var(--radius-panel);
 }
 
-.topology-stream-panel {
-  left: 1rem;
-  right: 1rem;
-  bottom: 1rem;
-  height: 48vh;
-}
-
-@media (min-width: 768px) {
-  .topology-stream-panel {
-    left: auto;
-    right: 1rem;
-    top: 1rem;
-    bottom: 1rem;
-    width: 360px;
-    max-width: calc(100% - 2rem);
-    height: auto;
-  }
-}
-
 .rounded-xl {
   border-radius: var(--radius-button) !important;
 }

webui/src/pages/Dashboard.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { RefreshCw, Activity, MessageSquare, Clock, Server, Wrench, Sparkles, AlertTriangle, Workflow } from 'lucide-react';
+import { RefreshCw, Activity, MessageSquare, Wrench, Sparkles, AlertTriangle, Workflow } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import StatCard from '../components/StatCard';
@@ -9,8 +9,6 @@ const Dashboard: React.FC = () => {
   const {
     isGatewayOnline,
     sessions,
-    cron,
-    nodes,
     refreshAll,
     gatewayVersion,
     webuiVersion,
@@ -20,30 +18,6 @@ const Dashboard: React.FC = () => {
     ekgSummary,
   } = useAppContext();
 
-  const parsedNodes = useMemo(() => {
-    try {
-      const arr = JSON.parse(nodes);
-      return Array.isArray(arr) ? arr : [];
-    } catch {
-      return [];
-    }
-  }, [nodes]);
-
-  const onlineNodes = useMemo(
-    () => parsedNodes.filter((n: any) => n?.online).length,
-    [parsedNodes],
-  );
-
-  const pausedCron = useMemo(
-    () => cron.filter((job) => !job.enabled).length,
-    [cron],
-  );
-
-  const enabledCron = useMemo(
-    () => cron.filter((job) => job.enabled).length,
-    [cron],
-  );
-
   const subagentCount = useMemo(() => {
     const subagents = (cfg as any)?.agents?.subagents || {};
     return Object.keys(subagents).length;
@@ -79,13 +53,12 @@ const Dashboard: React.FC = () => {
         </button>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-6 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4">
         <StatCard title={t('gatewayStatus')} value={isGatewayOnline ? t('online') : t('offline')} icon={<Activity className={`w-6 h-6 ${isGatewayOnline ? 'text-emerald-400' : 'text-red-400'}`} />} />
         <StatCard title={t('activeSessions')} value={sessions.length} icon={<MessageSquare className="w-6 h-6 text-blue-400" />} />
-        <StatCard title={t('nodesOnline')} value={onlineNodes} icon={<Server className="w-6 h-6 text-amber-400" />} />
-        <StatCard title={t('cronJobs')} value={cron.length} icon={<Clock className="w-6 h-6 text-purple-400" />} />
         <StatCard title={t('skills')} value={skills.length} icon={<Sparkles className="w-6 h-6 text-pink-400" />} />
         <StatCard title={t('subagentsRuntime')} value={subagentCount} icon={<Wrench className="w-6 h-6 text-cyan-400" />} />
+        <StatCard title={t('taskAudit')} value={recentTasks.length} icon={<Activity className="w-6 h-6 text-amber-400" />} />
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
@@ -115,28 +88,6 @@ const Dashboard: React.FC = () => {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 items-stretch">
-        <div className="brand-card rounded-[30px] border border-zinc-800/80 p-6 min-h-[340px] h-full">
-          <div className="flex items-center gap-2 mb-5 text-zinc-200">
-            <Clock className="w-5 h-5 text-zinc-400" />
-            <h2 className="text-lg font-medium">{t('recentCron')}</h2>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="brand-card-subtle rounded-2xl border border-zinc-800 p-4 min-h-[104px]">
-              <div className="text-[11px] uppercase tracking-widest text-zinc-500">{t('active')}</div>
-              <div className="mt-2 text-2xl font-semibold text-zinc-100">{enabledCron}</div>
-            </div>
-            <div className="brand-card-subtle rounded-2xl border border-zinc-800 p-4 min-h-[104px]">
-              <div className="text-[11px] uppercase tracking-widest text-zinc-500">{t('paused')}</div>
-              <div className="mt-2 text-2xl font-semibold text-zinc-100">{pausedCron}</div>
-            </div>
-          </div>
-          <div className="h-[180px] flex items-center justify-center text-sm text-zinc-500">
-            {cron.length === 0 ? t('noCronJobs') : `${cron.length} ${t('cronJobs')}`}
-          </div>
-        </div>
-      </div>
-
       <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 items-stretch">
         <div className="brand-card rounded-[30px] border border-zinc-800/80 p-6 min-h-[340px] h-full">
           <div className="flex items-center gap-2 mb-5 text-zinc-200">

webui/src/pages/Subagents.tsx

@@ -1174,7 +1174,7 @@ const Subagents: React.FC = () => {
           {selectedAgentID && (
             <div
               onWheelCapture={(event) => event.stopPropagation()}
-              className="topology-stream-panel radius-panel absolute z-20 brand-card border border-zinc-800 shadow-2xl shadow-black/40 backdrop-blur-md overflow-hidden flex flex-col"
+              className="absolute bottom-4 left-4 right-4 z-20 flex h-[46vh] flex-col overflow-hidden border border-zinc-800 brand-card radius-panel shadow-2xl shadow-black/40 backdrop-blur-md md:left-auto md:top-4 md:right-4 md:bottom-4 md:h-auto md:w-[360px] md:max-w-[calc(100%-2rem)] xl:w-[380px]"
             >
               <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-800">
                 <div className="min-w-0">
@@ -1189,7 +1189,7 @@ const Subagents: React.FC = () => {
                     setStreamTask(null);
                     setStreamItems([]);
                   }}
-                  className="px-2 py-1 rounded-xl bg-zinc-800 hover:bg-zinc-700 text-[11px] text-zinc-200"
+                  className="px-2 py-1 rounded-xl text-[11px] control-chip"
                 >
                   {t('close')}
                 </button>