@agenticmail/enterprise 0.5.210 → 0.5.211

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agenticmail/enterprise",
-  "version": "0.5.210",
+  "version": "0.5.211",
   "description": "AgenticMail Enterprise — cloud-hosted AI agent identity, email, auth & compliance for organizations",
   "type": "module",
   "bin": {

package/src/dashboard/pages/task-pipeline.js

@@ -308,6 +308,133 @@ function TaskDetail(props) {
   );
 }
 
+// ─── Metrics Bar ─────────────────────────────────────────
+function MetricsBar(props) {
+  var s = props.stats;
+  var metricStyle = { display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '8px 16px', minWidth: 80 };
+  var numStyle = function(color) { return { fontSize: 20, fontWeight: 700, color: color, lineHeight: 1 }; };
+  var lblStyle = { fontSize: 9, color: 'rgba(255,255,255,0.4)', marginTop: 3, textTransform: 'uppercase', letterSpacing: '0.06em' };
+  var divider = h('div', { style: { width: 1, height: 32, background: 'rgba(255,255,255,0.08)', flexShrink: 0 } });
+
+  return h('div', { style: { display: 'flex', alignItems: 'center', padding: '6px 16px', borderBottom: '1px solid rgba(255,255,255,0.06)', background: 'rgba(0,0,0,0.15)', flexShrink: 0, overflowX: 'auto', gap: 0 } },
+    h('div', metricStyle, h('div', numStyle('#22c55e'), s.todayCompleted || 0), h('div', lblStyle, 'Done Today')),
+    divider,
+    h('div', metricStyle, h('div', numStyle('#06b6d4'), s.inProgress || 0), h('div', lblStyle, 'In Progress')),
+    divider,
+    h('div', metricStyle, h('div', numStyle('#f59e0b'), s.todayCreated || 0), h('div', lblStyle, 'Created Today')),
+    divider,
+    h('div', metricStyle, h('div', numStyle('#ef4444'), s.todayFailed || 0), h('div', lblStyle, 'Failed Today')),
+    divider,
+    h('div', metricStyle, h('div', numStyle('#fff'), formatDuration(s.avgDurationMs)), h('div', lblStyle, 'Avg Duration')),
+    divider,
+    h('div', metricStyle, h('div', numStyle('#a855f7'), (s.totalTokens || 0) > 999999 ? ((s.totalTokens / 1000000).toFixed(1) + 'M') : (s.totalTokens || 0) > 999 ? ((s.totalTokens / 1000).toFixed(1) + 'K') : (s.totalTokens || 0)), h('div', lblStyle, 'Tokens')),
+    divider,
+    h('div', metricStyle, h('div', numStyle('#22c55e'), '$' + (s.totalCost || 0).toFixed(2)), h('div', lblStyle, 'Total Cost')),
+    divider,
+    h('div', metricStyle, h('div', numStyle('rgba(255,255,255,0.6)'), s.total || 0), h('div', lblStyle, 'All Time')),
+    // Top agents mini
+    s.topAgents && s.topAgents.length > 0 && h(Fragment, null,
+      divider,
+      h('div', { style: { display: 'flex', gap: 6, padding: '4px 12px', alignItems: 'center' } },
+        h('div', { style: { fontSize: 9, color: 'rgba(255,255,255,0.3)', marginRight: 4 } }, 'TOP'),
+        s.topAgents.slice(0, 3).map(function(a) {
+          return h('div', { key: a.agent, style: { display: 'flex', alignItems: 'center', gap: 4, padding: '2px 8px', background: 'rgba(255,255,255,0.04)', borderRadius: 6, fontSize: 10 } },
+            h('div', { style: { width: 14, height: 14, borderRadius: '50%', background: '#6366f1' + '33', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, fontWeight: 700, color: '#6366f1' } }, (a.name || '?').charAt(0).toUpperCase()),
+            h('span', { style: { color: '#fff', fontWeight: 600 } }, a.name),
+            h('span', { style: { color: 'rgba(255,255,255,0.3)' } }, a.completed + '/' + a.active)
+          );
+        })
+      )
+    )
+  );
+}
+
+// ─── Inline Chain Flowchart (appears below canvas when task expanded) ─
+function ChainFlowInline(props) {
+  var chain = props.chain;
+  var taskId = props.taskId;
+  var onClose = props.onClose;
+  var onClickTask = props.onClickTask;
+  if (!chain || chain.length === 0) return null;
+
+  var MINI_W = 180;
+  var MINI_H = 56;
+  var MINI_GAP = 40;
+  var totalW = chain.length * MINI_W + (chain.length - 1) * MINI_GAP + 40;
+
+  return h('div', { style: { borderTop: '1px solid rgba(255,255,255,0.08)', background: 'rgba(0,0,0,0.25)', padding: '12px 16px', flexShrink: 0, overflow: 'auto' } },
+    h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 } },
+      h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+        h('span', { style: { fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.06em' } }, 'TASK FLOW'),
+        h('span', { style: { fontSize: 10, color: 'rgba(255,255,255,0.3)', fontFamily: 'var(--font-mono)' } }, chain[0].chainId ? '#' + chain[0].chainId.slice(0, 8) : ''),
+        h('span', { style: { fontSize: 10, color: 'rgba(255,255,255,0.3)' } }, chain.length + ' step' + (chain.length > 1 ? 's' : ''))
+      ),
+      h('button', { onClick: onClose, style: { background: 'none', border: 'none', color: 'rgba(255,255,255,0.3)', cursor: 'pointer', fontSize: 16, padding: '0 4px' } }, '\u00D7')
+    ),
+    h('div', { style: { position: 'relative', height: MINI_H + 20, minWidth: totalW } },
+      // SVG arrows
+      h('svg', { width: totalW, height: MINI_H + 20, style: { position: 'absolute', top: 0, left: 0, pointerEvents: 'none' } },
+        h('defs', null,
+          h('marker', { id: 'cf-arr', markerWidth: 6, markerHeight: 4, refX: 6, refY: 2, orient: 'auto' },
+            h('polygon', { points: '0 0, 6 2, 0 4', fill: 'rgba(99,102,241,0.5)' })
+          )
+        ),
+        chain.map(function(ct, i) {
+          if (i === 0) return null;
+          var x1 = 20 + (i - 1) * (MINI_W + MINI_GAP) + MINI_W;
+          var x2 = 20 + i * (MINI_W + MINI_GAP);
+          var y = 10 + MINI_H / 2;
+          var dType = ct.delegationType || 'delegation';
+          var color = DELEGATION_COLORS[dType] || 'rgba(99,102,241,0.5)';
+          var isActive = chain[i - 1].status === 'in_progress' || ct.status === 'in_progress';
+          return h(Fragment, { key: 'e' + i },
+            h('line', { x1: x1, y1: y, x2: x2, y2: y, stroke: color + '88', strokeWidth: 2, markerEnd: 'url(#cf-arr)' }),
+            isActive && h('line', { x1: x1, y1: y, x2: x2, y2: y, stroke: STATUS_COLORS.in_progress, strokeWidth: 2, strokeDasharray: '4 12', className: 'tp-flow-active', style: { opacity: 0.7 } }),
+            dType !== 'delegation' && h('text', { x: (x1 + x2) / 2, y: y - 6, fill: color, fontSize: 8, textAnchor: 'middle', fontWeight: 600 }, dType)
+          );
+        })
+      ),
+      // Task nodes
+      chain.map(function(ct, i) {
+        var x = 20 + i * (MINI_W + MINI_GAP);
+        var sc = STATUS_COLORS[ct.status] || '#6b7394';
+        var isMe = ct.id === taskId;
+        var isActive = ct.status === 'in_progress';
+        return h('div', {
+          key: ct.id,
+          onClick: function() { if (onClickTask) onClickTask(ct); },
+          style: {
+            position: 'absolute', left: x, top: 10, width: MINI_W, height: MINI_H,
+            background: isMe ? sc + '15' : 'rgba(255,255,255,0.02)',
+            border: '1.5px solid ' + (isMe ? sc : 'rgba(255,255,255,0.1)'),
+            borderLeft: '3px solid ' + sc,
+            borderRadius: 8, padding: '6px 10px', cursor: 'pointer',
+            display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 3,
+            transition: 'all 0.15s',
+          },
+          onMouseEnter: function(e) { e.currentTarget.style.background = 'rgba(255,255,255,0.05)'; },
+          onMouseLeave: function(e) { e.currentTarget.style.background = isMe ? sc + '15' : 'rgba(255,255,255,0.02)'; },
+        },
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 5 } },
+            h('div', { style: { width: 16, height: 16, borderRadius: '50%', background: sc + '33', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, fontWeight: 700, color: sc, flexShrink: 0 } },
+              (ct.assignedToName || '?').charAt(0).toUpperCase()
+            ),
+            h('span', { style: { fontSize: 10, fontWeight: 600, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 } }, ct.assignedToName || ct.assignedTo)
+          ),
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 4 } },
+            tag(sc, ct.status.replace('_', ' ')),
+            h('span', { style: { fontSize: 8, color: 'rgba(255,255,255,0.3)' } }, timeAgo(ct.createdAt)),
+            ct.actualDurationMs && h('span', { style: { fontSize: 8, color: 'rgba(255,255,255,0.3)', marginLeft: 'auto' } }, formatDuration(ct.actualDurationMs))
+          ),
+          isActive && ct.progress > 0 && h('div', { style: { height: 2, background: 'rgba(255,255,255,0.08)', borderRadius: 1, overflow: 'hidden' } },
+            h('div', { style: { height: '100%', width: ct.progress + '%', background: sc, borderRadius: 1 } })
+          )
+        );
+      })
+    )
+  );
+}
+
 // ─── Main Page ───────────────────────────────────────────
 export function TaskPipelinePage() {
   injectCSS();
@@ -315,8 +442,10 @@ export function TaskPipelinePage() {
   var toast = app.toast;
   var _tasks = useState([]);
   var tasks = _tasks[0]; var setTasks = _tasks[1];
-  var _stats = useState({ created: 0, assigned: 0, inProgress: 0, completed: 0, failed: 0, cancelled: 0, total: 0 });
+  var _stats = useState({ created: 0, assigned: 0, inProgress: 0, completed: 0, failed: 0, cancelled: 0, total: 0, todayCompleted: 0, todayFailed: 0, todayCreated: 0, avgDurationMs: 0, totalCost: 0, totalTokens: 0, topAgents: [] });
   var stats = _stats[0]; var setStats = _stats[1];
+  var _expandedTaskId = useState(null);
+  var expandedTaskId = _expandedTaskId[0]; var setExpandedTaskId = _expandedTaskId[1];
   var _loading = useState(true);
   var loading = _loading[0]; var setLoading = _loading[1];
   var _selectedTask = useState(null);
@@ -376,6 +505,8 @@ export function TaskPipelinePage() {
               return [event.task].concat(prev);
             });
             setSelectedTask(function(prev) { return prev && prev.id === event.task.id ? event.task : prev; });
+            // Refresh stats on every task event for real-time metrics
+            engineCall('/task-pipeline/stats').then(function(s) { if (s) setStats(s); }).catch(function() {});
           }
         } catch (err) {}
       };
@@ -386,7 +517,7 @@ export function TaskPipelinePage() {
   useEffect(function() {
     var iv = setInterval(function() {
       engineCall('/task-pipeline/stats').then(function(s) { if (s) setStats(s); }).catch(function() {});
-    }, 30000);
+    }, 15000);
     return function() { clearInterval(iv); };
   }, []);
 
@@ -400,7 +531,6 @@ export function TaskPipelinePage() {
 
   function openTaskDetail(t) {
     setSelectedTask(t);
-    // Load full chain if task has one
     if (t.chainId) {
       var chainTasks = tasks.filter(function(ct) { return ct.chainId === t.chainId; });
       chainTasks.sort(function(a, b) { return (a.chainSeq || 0) - (b.chainSeq || 0); });
@@ -410,6 +540,23 @@ export function TaskPipelinePage() {
     }
   }
 
+  // Toggle inline chain flowchart (single click on node)
+  function toggleExpand(t) {
+    if (expandedTaskId === t.id) {
+      setExpandedTaskId(null);
+      setSelectedChain(null);
+    } else {
+      setExpandedTaskId(t.id);
+      if (t.chainId) {
+        var chainTasks = tasks.filter(function(ct) { return ct.chainId === t.chainId; });
+        chainTasks.sort(function(a, b) { return (a.chainSeq || 0) - (b.chainSeq || 0); });
+        setSelectedChain(chainTasks.length > 0 ? chainTasks : [t]);
+      } else {
+        setSelectedChain([t]);
+      }
+    }
+  }
+
   // Filter
   var filtered = tasks.filter(function(t) {
     if (filter === 'active') return t.status === 'created' || t.status === 'assigned' || t.status === 'in_progress';
@@ -522,6 +669,7 @@ export function TaskPipelinePage() {
 
   if (nodes.length === 0) return h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', background: BG, borderRadius: 'var(--radius-lg)', overflow: 'hidden' } },
     toolbar,
+    h(MetricsBar, { stats: stats }),
     h('div', { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' } },
       h('div', { style: { width: 48, height: 48, borderRadius: 12, background: 'rgba(99,102,241,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16, color: '#6366f1' } }, I.workflow()),
       h('div', { style: { fontSize: 16, fontWeight: 600, marginBottom: 6, color: '#fff' } }, 'No Tasks in Pipeline'),
@@ -529,8 +677,22 @@ export function TaskPipelinePage() {
     )
   );
 
+  // Build expanded chain for inline flowchart
+  var expandedChain = null;
+  if (expandedTaskId) {
+    var et = tasks.find(function(t) { return t.id === expandedTaskId; });
+    if (et && et.chainId) {
+      expandedChain = tasks.filter(function(ct) { return ct.chainId === et.chainId; });
+      expandedChain.sort(function(a, b) { return (a.chainSeq || 0) - (b.chainSeq || 0); });
+    } else if (et) {
+      expandedChain = [et];
+    }
+  }
+
   return h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', background: BG, borderRadius: 'var(--radius-lg)', overflow: 'hidden' } },
     toolbar,
+    // Metrics bar
+    h(MetricsBar, { stats: stats }),
     // Canvas
     h('div', {
       ref: containerRef,
@@ -606,17 +768,19 @@ export function TaskPipelinePage() {
           var dim = hoveredChainId && !isChainHl;
           var isActive = t.status === 'in_progress';
 
+          var isExpanded = expandedTaskId === node.id;
           return h('div', {
             key: node.id,
             className: 'tp-node' + (isActive ? ' tp-node-active' : ''),
-            onClick: function() { openTaskDetail(t); },
+            onClick: function() { toggleExpand(t); },
+            onDoubleClick: function() { openTaskDetail(t); },
             onMouseEnter: function(ev) { setHoveredId(node.id); setMousePos({ x: ev.clientX, y: ev.clientY }); },
             onMouseMove: function(ev) { setMousePos({ x: ev.clientX, y: ev.clientY }); },
             onMouseLeave: function() { setHoveredId(null); },
             style: {
               position: 'absolute', left: node.x, top: node.y, width: node.w, height: node.h,
               background: isHovered ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.02)',
-              border: '1px solid ' + (isHovered || isChainHl ? sc + '66' : 'rgba(255,255,255,0.1)'),
+              border: '1px solid ' + (isExpanded ? sc : isHovered || isChainHl ? sc + '66' : 'rgba(255,255,255,0.1)'),
               borderLeft: '3px solid ' + sc,
               borderRadius: 10, padding: '6px 10px', cursor: 'pointer',
               transition: 'all 0.15s', opacity: dim ? 0.15 : 1,
@@ -665,7 +829,15 @@ export function TaskPipelinePage() {
       )
     ),
 
-    // Detail modal
+    // Inline chain flowchart (shown when a task is clicked)
+    expandedChain && expandedChain.length > 0 && h(ChainFlowInline, {
+      chain: expandedChain,
+      taskId: expandedTaskId,
+      onClose: function() { setExpandedTaskId(null); },
+      onClickTask: function(t) { openTaskDetail(t); }
+    }),
+
+    // Detail modal (double-click)
     selectedTask && h(TaskDetail, { task: selectedTask, chain: selectedChain, onClose: function() { setSelectedTask(null); setSelectedChain(null); }, onCancel: cancelTask })
   );
 }

package/src/engine/task-queue.ts

@@ -385,8 +385,21 @@ export class TaskQueueManager {
     return this.getAllTasks(orgId, limit);
   }
 
-  getPipelineStats(orgId?: string): { created: number; assigned: number; inProgress: number; completed: number; failed: number; cancelled: number; total: number } {
-    const stats = { created: 0, assigned: 0, inProgress: 0, completed: 0, failed: 0, cancelled: 0, total: 0 };
+  getPipelineStats(orgId?: string): {
+    created: number; assigned: number; inProgress: number; completed: number; failed: number; cancelled: number; total: number;
+    todayCompleted: number; todayFailed: number; todayCreated: number; avgDurationMs: number; totalCost: number; totalTokens: number;
+    topAgents: Array<{ agent: string; name: string; completed: number; active: number }>;
+  } {
+    const stats = {
+      created: 0, assigned: 0, inProgress: 0, completed: 0, failed: 0, cancelled: 0, total: 0,
+      todayCompleted: 0, todayFailed: 0, todayCreated: 0, avgDurationMs: 0, totalCost: 0, totalTokens: 0,
+      topAgents: [] as Array<{ agent: string; name: string; completed: number; active: number }>,
+    };
+    const todayStart = new Date(); todayStart.setHours(0, 0, 0, 0);
+    const todayMs = todayStart.getTime();
+    let durationSum = 0; let durationCount = 0;
+    const agentMap = new Map<string, { name: string; completed: number; active: number }>();
+
     for (const t of this.tasks.values()) {
       if (orgId && t.orgId !== orgId) continue;
       stats.total++;
@@ -396,7 +409,31 @@ export class TaskQueueManager {
       else if (t.status === 'completed') stats.completed++;
       else if (t.status === 'failed') stats.failed++;
       else if (t.status === 'cancelled') stats.cancelled++;
+
+      // Today metrics
+      const createdMs = new Date(t.createdAt).getTime();
+      if (createdMs >= todayMs) stats.todayCreated++;
+      if (t.completedAt && new Date(t.completedAt).getTime() >= todayMs) {
+        if (t.status === 'completed') stats.todayCompleted++;
+        if (t.status === 'failed') stats.todayFailed++;
+      }
+      if (t.actualDurationMs) { durationSum += t.actualDurationMs; durationCount++; }
+      stats.totalCost += t.costUsd || 0;
+      stats.totalTokens += t.tokensUsed || 0;
+
+      // Per-agent
+      if (t.assignedTo) {
+        if (!agentMap.has(t.assignedTo)) agentMap.set(t.assignedTo, { name: t.assignedToName || t.assignedTo, completed: 0, active: 0 });
+        const a = agentMap.get(t.assignedTo)!;
+        if (t.status === 'completed') a.completed++;
+        if (t.status === 'in_progress' || t.status === 'assigned') a.active++;
+      }
     }
+    stats.avgDurationMs = durationCount > 0 ? Math.round(durationSum / durationCount) : 0;
+    stats.topAgents = Array.from(agentMap.entries())
+      .map(([agent, d]) => ({ agent, ...d }))
+      .sort((a, b) => (b.completed + b.active) - (a.completed + a.active))
+      .slice(0, 5);
     return stats;
   }