@agenticmail/enterprise 0.5.200 → 0.5.202

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

@@ -0,0 +1,745 @@
+import { h, useState, useEffect, useCallback, useRef, Fragment, useApp, engineCall, getOrgId } from '../components/utils.js';
+import { I } from '../components/icons.js';
+import { HelpButton } from '../components/help-button.js';
+
+// ─── Layout Constants (matches org-chart) ────────────────
+const NODE_W = 240;
+const NODE_H = 80;
+const H_GAP = 32;
+const V_GAP = 64;
+const PAD = 60;
+
+// ─── Colors ──────────────────────────────────────────────
+const STATUS_COLORS = {
+  created: '#6366f1',
+  assigned: '#f59e0b',
+  in_progress: '#06b6d4',
+  completed: '#22c55e',
+  failed: '#ef4444',
+  cancelled: '#6b7394',
+};
+const PRIORITY_COLORS = { urgent: '#ef4444', high: '#f59e0b', normal: '#6366f1', low: '#6b7394' };
+const ACCENT = '#6366f1';
+const EDGE_COLOR = 'rgba(255,255,255,0.25)';
+const EDGE_HIGHLIGHT = 'rgba(99,102,241,0.7)';
+const BG = '#0a0c14';
+
+// ─── Tree Layout ─────────────────────────────────────────
+// Groups tasks by agent → builds hierarchy: agent nodes at top, task nodes as children
+// Sub-tasks appear as children of their parent task
+function layoutPipeline(tasks, agents) {
+  if (!tasks || !tasks.length) return { positioned: [], edges: [], width: 0, height: 0 };
+
+  // Group tasks by agent
+  var agentMap = new Map();
+  tasks.forEach(function(t) {
+    var key = t.assignedTo || 'unassigned';
+    if (!agentMap.has(key)) agentMap.set(key, { agentId: key, name: t.assignedToName || key, tasks: [], children: [], x: 0, y: 0, subtreeW: 0, isAgent: true });
+    agentMap.get(key).tasks.push(t);
+  });
+
+  // Build task nodes under each agent
+  var allNodes = [];
+  var edgeList = [];
+  var agentRoots = [];
+
+  agentMap.forEach(function(agent) {
+    agent.subtreeW = 0;
+    var taskNodes = [];
+    var taskById = new Map();
+
+    // Create task nodes
+    agent.tasks.forEach(function(t) {
+      var node = { id: t.id, task: t, children: [], x: 0, y: 0, subtreeW: 0, isAgent: false, agentId: agent.agentId };
+      taskById.set(t.id, node);
+      taskNodes.push(node);
+    });
+
+    // Link sub-tasks to parents
+    var rootTasks = [];
+    taskNodes.forEach(function(tn) {
+      if (tn.task.parentTaskId && taskById.has(tn.task.parentTaskId)) {
+        taskById.get(tn.task.parentTaskId).children.push(tn);
+      } else {
+        rootTasks.push(tn);
+      }
+    });
+
+    agent.children = rootTasks;
+    agentRoots.push(agent);
+  });
+
+  // Compute subtree widths
+  function computeW(node) {
+    var w = node.isAgent ? NODE_W : NODE_W;
+    if (node.children.length === 0) { node.subtreeW = w; return w; }
+    var total = 0;
+    node.children.forEach(function(c) { total += computeW(c); });
+    total += (node.children.length - 1) * H_GAP;
+    node.subtreeW = Math.max(w, total);
+    return node.subtreeW;
+  }
+
+  // Assign positions
+  function assignPos(node, x, y) {
+    var w = node.isAgent ? NODE_W : NODE_W;
+    node.x = x + node.subtreeW / 2 - w / 2;
+    node.y = y;
+    if (node.children.length === 0) return;
+    var childrenW = node.children.reduce(function(s, c) { return s + c.subtreeW; }, 0) + (node.children.length - 1) * H_GAP;
+    var cx = node.x + w / 2 - childrenW / 2;
+    node.children.forEach(function(c) {
+      assignPos(c, cx, y + NODE_H + V_GAP);
+      cx += c.subtreeW + H_GAP;
+    });
+  }
+
+  // Layout agent roots side by side
+  agentRoots.forEach(function(r) { computeW(r); });
+  var cx = PAD;
+  agentRoots.forEach(function(r) {
+    assignPos(r, cx, PAD);
+    cx += r.subtreeW + H_GAP * 2;
+  });
+
+  // Flatten + collect edges
+  var maxX = 0, maxY = 0;
+  function flatten(node, parent) {
+    allNodes.push(node);
+    var w = NODE_W;
+    maxX = Math.max(maxX, node.x + w);
+    maxY = Math.max(maxY, node.y + NODE_H);
+    if (parent) edgeList.push({ parent: parent, child: node });
+    node.children.forEach(function(c) { flatten(c, node); });
+  }
+  agentRoots.forEach(function(r) { flatten(r, null); });
+
+  return { positioned: allNodes, edges: edgeList, width: maxX + PAD, height: maxY + PAD + 40 };
+}
+
+// ─── SVG Edge (curved, matches org-chart) ────────────────
+function edgePath(parent, child) {
+  var x1 = parent.x + NODE_W / 2;
+  var y1 = parent.y + NODE_H;
+  var x2 = child.x + NODE_W / 2;
+  var y2 = child.y;
+  var midY = y1 + (y2 - y1) * 0.5;
+  return 'M ' + x1 + ' ' + y1 + ' C ' + x1 + ' ' + midY + ', ' + x2 + ' ' + midY + ', ' + x2 + ' ' + y2;
+}
+
+// ─── Helpers ─────────────────────────────────────────────
+function timeAgo(ts) {
+  if (!ts) return '-';
+  var diff = Date.now() - new Date(ts).getTime();
+  if (diff < 5000) return 'just now';
+  if (diff < 60000) return Math.floor(diff / 1000) + 's ago';
+  if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
+  if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
+  return Math.floor(diff / 86400000) + 'd ago';
+}
+
+function formatDuration(ms) {
+  if (!ms) return '-';
+  var s = Math.floor(ms / 1000);
+  if (s < 60) return s + 's';
+  var m = Math.floor(s / 60);
+  if (m < 60) return m + 'm ' + (s % 60) + 's';
+  return Math.floor(m / 60) + 'h ' + (m % 60) + 'm';
+}
+
+var CATEGORY_ICONS = { email: '\u2709', research: '\uD83D\uDD0D', meeting: '\uD83D\uDCC5', workflow: '\u2699', writing: '\u270F', deployment: '\uD83D\uDE80', review: '\u2714', monitoring: '\uD83D\uDCE1', custom: '\uD83D\uDCCB' };
+
+function tagStyle(color) {
+  return { fontSize: 9, fontWeight: 600, padding: '1px 5px', borderRadius: 4, background: color + '22', color: color, letterSpacing: '0.02em' };
+}
+
+var toolbarBtnStyle = {
+  background: 'rgba(255,255,255,0.08)',
+  border: '1px solid rgba(255,255,255,0.12)',
+  borderRadius: 6,
+  color: '#fff',
+  fontSize: 14,
+  fontWeight: 600,
+  padding: '4px 8px',
+  cursor: 'pointer',
+  lineHeight: '1.2',
+};
+
+function legendDot(color, label) {
+  return h('div', { style: { display: 'flex', alignItems: 'center', gap: 4 } },
+    h('div', { style: { width: 8, height: 8, borderRadius: '50%', background: color } }),
+    h('span', { style: { color: 'rgba(255,255,255,0.5)', fontSize: 12 } }, label)
+  );
+}
+
+function tooltipRow(label, value, color) {
+  return h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11 } },
+    h('span', { style: { color: 'rgba(255,255,255,0.4)' } }, label),
+    h('span', { style: { fontWeight: 600, color: color || '#fff' } }, value)
+  );
+}
+
+// ─── Help tooltip styles ─────────────────────────────────
+var _h4 = { marginTop: 16, marginBottom: 8, fontSize: 14 };
+var _ul = { paddingLeft: 20, margin: '4px 0 8px' };
+var _tip = { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 };
+
+// ─── Task Detail Modal ───────────────────────────────────
+function TaskDetail(props) {
+  var task = props.task;
+  var onClose = props.onClose;
+  var onCancel = props.onCancel;
+  if (!task) return null;
+  var statusColor = STATUS_COLORS[task.status] || '#6b7394';
+
+  return h('div', { className: 'modal-overlay', onClick: onClose },
+    h('div', { className: 'modal', onClick: function(e) { e.stopPropagation(); }, style: { width: 560, maxHeight: '80vh', overflow: 'auto' } },
+      h('div', { className: 'modal-header' },
+        h('h2', null, task.title),
+        h('button', { className: 'btn btn-ghost btn-icon', onClick: onClose }, '\u00D7')
+      ),
+      h('div', { className: 'modal-body', style: { padding: 20 } },
+        h('div', { style: { display: 'flex', gap: 8, marginBottom: 16, alignItems: 'center', flexWrap: 'wrap' } },
+          h('span', { style: { padding: '3px 10px', borderRadius: 12, fontSize: 12, fontWeight: 600, background: statusColor + '22', color: statusColor, border: '1px solid ' + statusColor + '44' } }, task.status.replace('_', ' ').toUpperCase()),
+          h('span', { style: { padding: '3px 10px', borderRadius: 12, fontSize: 12, background: (PRIORITY_COLORS[task.priority] || '#6366f1') + '22', color: PRIORITY_COLORS[task.priority] || '#6366f1' } }, task.priority.toUpperCase()),
+          h('span', { style: { padding: '3px 10px', borderRadius: 12, fontSize: 12, background: 'var(--bg-tertiary)', color: 'var(--text-muted)' } }, (CATEGORY_ICONS[task.category] || '') + ' ' + task.category)
+        ),
+        task.description && h('div', { style: { marginBottom: 16, fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)' } }, task.description),
+        task.status === 'in_progress' && h('div', { style: { marginBottom: 16 } },
+          h('div', { style: { display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 } }, h('span', null, 'Progress'), h('span', null, task.progress + '%')),
+          h('div', { style: { height: 6, background: 'var(--border)', borderRadius: 3, overflow: 'hidden' } },
+            h('div', { style: { height: '100%', width: task.progress + '%', background: STATUS_COLORS.in_progress, borderRadius: 3 } })
+          )
+        ),
+        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 24px', fontSize: 13, marginBottom: 16 } },
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Assigned To'), h('div', null, task.assignedToName || task.assignedTo || '-')),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Created By'), h('div', null, task.createdByName || task.createdBy || '-')),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Created'), h('div', null, task.createdAt ? new Date(task.createdAt).toLocaleString() : '-')),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Started'), h('div', null, task.startedAt ? new Date(task.startedAt).toLocaleString() : '-')),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Completed'), h('div', null, task.completedAt ? new Date(task.completedAt).toLocaleString() : '-')),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Duration'), h('div', null, formatDuration(task.actualDurationMs))),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Model'), h('div', null, task.modelUsed || task.model || '-')),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Tokens / Cost'), h('div', null, (task.tokensUsed || 0).toLocaleString() + ' / $' + (task.costUsd || 0).toFixed(4)))
+        ),
+        task.error && h('div', { style: { padding: 12, background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.3)', borderRadius: 'var(--radius)', marginBottom: 16, fontSize: 13, color: '#ef4444' } }, h('strong', null, 'Error: '), task.error),
+        task.result && h('div', { style: { marginBottom: 16 } },
+          h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Result'),
+          h('pre', { style: { fontSize: 12, background: 'var(--bg-tertiary)', padding: 12, borderRadius: 'var(--radius)', overflow: 'auto', maxHeight: 200 } }, JSON.stringify(task.result, null, 2))
+        ),
+        (task.status === 'created' || task.status === 'assigned' || task.status === 'in_progress') && h('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 16, borderTop: '1px solid var(--border)', paddingTop: 16 } },
+          h('button', { className: 'btn btn-danger btn-sm', onClick: function() { onCancel(task.id); } }, 'Cancel Task')
+        )
+      )
+    )
+  );
+}
+
+// ─── Main Page ───────────────────────────────────────────
+export function TaskPipelinePage() {
+  var app = useApp();
+  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 = _stats[0]; var setStats = _stats[1];
+  var _loading = useState(true);
+  var loading = _loading[0]; var setLoading = _loading[1];
+  var _selectedTask = useState(null);
+  var selectedTask = _selectedTask[0]; var setSelectedTask = _selectedTask[1];
+  var _hoveredId = useState(null);
+  var hoveredId = _hoveredId[0]; var setHoveredId = _hoveredId[1];
+  var _mousePos = useState({ x: 0, y: 0 });
+  var mousePos = _mousePos[0]; var setMousePos = _mousePos[1];
+  var _zoom = useState(1);
+  var zoom = _zoom[0]; var setZoom = _zoom[1];
+  var _pan = useState({ x: 0, y: 0 });
+  var pan = _pan[0]; var setPan = _pan[1];
+  var _dragging = useState(false);
+  var dragging = _dragging[0]; var setDragging = _dragging[1];
+  var _dragStart = useState({ x: 0, y: 0 });
+  var dragStart = _dragStart[0]; var setDragStart = _dragStart[1];
+  var _filter = useState('active');
+  var filter = _filter[0]; var setFilter = _filter[1];
+  var containerRef = useRef(null);
+
+  var loadData = useCallback(function() {
+    setLoading(true);
+    Promise.all([
+      engineCall('/task-pipeline?limit=200'),
+      engineCall('/task-pipeline/stats'),
+    ]).then(function(res) {
+      setTasks(res[0]?.tasks || []);
+      setStats(res[1] || stats);
+    }).catch(function(err) {
+      console.error('[TaskPipeline] load:', err);
+    }).finally(function() { setLoading(false); });
+  }, []);
+
+  // SSE
+  useEffect(function() {
+    loadData();
+    var baseUrl = window.__ENGINE_BASE || '/api/engine';
+    var es;
+    try {
+      es = new EventSource(baseUrl + '/task-pipeline/stream');
+      es.onmessage = function(e) {
+        try {
+          var event = JSON.parse(e.data);
+          if (event.type === 'init') {
+            if (event.tasks) setTasks(function(prev) {
+              var map = new Map();
+              prev.forEach(function(t) { map.set(t.id, t); });
+              event.tasks.forEach(function(t) { map.set(t.id, t); });
+              return Array.from(map.values()).sort(function(a, b) { return new Date(b.createdAt) - new Date(a.createdAt); });
+            });
+            if (event.stats) setStats(event.stats);
+          } else if (event.task) {
+            setTasks(function(prev) {
+              var idx = prev.findIndex(function(t) { return t.id === event.task.id; });
+              if (idx >= 0) { var next = prev.slice(); next[idx] = event.task; return next; }
+              return [event.task].concat(prev);
+            });
+            setSelectedTask(function(prev) {
+              if (prev && prev.id === event.task.id) return event.task;
+              return prev;
+            });
+          }
+        } catch (err) {}
+      };
+    } catch (err) {}
+    return function() { if (es) es.close(); };
+  }, []);
+
+  // Periodic stats
+  useEffect(function() {
+    var iv = setInterval(function() {
+      engineCall('/task-pipeline/stats').then(function(s) { if (s) setStats(s); }).catch(function() {});
+    }, 30000);
+    return function() { clearInterval(iv); };
+  }, []);
+
+  var cancelTask = useCallback(function(taskId) {
+    engineCall('/task-pipeline/' + taskId + '/cancel', { method: 'POST' }).then(function() {
+      toast('Task cancelled', 'success');
+      setSelectedTask(null);
+      loadData();
+    }).catch(function(err) { toast(err.message || 'Failed', 'error'); });
+  }, []);
+
+  // Filter
+  var filtered = tasks.filter(function(t) {
+    if (filter === 'active') return t.status === 'created' || t.status === 'assigned' || t.status === 'in_progress';
+    if (filter === 'completed') return t.status === 'completed';
+    if (filter === 'failed') return t.status === 'failed' || t.status === 'cancelled';
+    return true;
+  });
+
+  // Layout
+  var layout = layoutPipeline(filtered);
+  var positioned = layout.positioned;
+  var edges = layout.edges;
+  var treeW = layout.width;
+  var treeH = layout.height;
+
+  // Zoom
+  var handleWheel = useCallback(function(e) {
+    e.preventDefault();
+    var delta = e.deltaY > 0 ? -0.08 : 0.08;
+    setZoom(function(z) { return Math.min(3, Math.max(0.15, z + delta)); });
+  }, []);
+
+  // Pan
+  var handleMouseDown = useCallback(function(e) {
+    if (e.button !== 0) return;
+    if (e.target.closest('.task-node')) return;
+    setDragging(true);
+    setDragStart({ x: e.clientX - pan.x, y: e.clientY - pan.y });
+  }, [pan]);
+
+  var handleMouseMove = useCallback(function(e) {
+    if (!dragging) return;
+    setPan({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y });
+  }, [dragging, dragStart]);
+
+  var handleMouseUp = useCallback(function() { setDragging(false); }, []);
+
+  useEffect(function() {
+    if (dragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      return function() { window.removeEventListener('mousemove', handleMouseMove); window.removeEventListener('mouseup', handleMouseUp); };
+    }
+  }, [dragging, handleMouseMove, handleMouseUp]);
+
+  // Fit
+  var fitToView = useCallback(function() {
+    if (!containerRef.current || !treeW || !treeH) return;
+    var rect = containerRef.current.getBoundingClientRect();
+    var scaleX = (rect.width - 40) / treeW;
+    var scaleY = (rect.height - 40) / treeH;
+    var scale = Math.min(scaleX, scaleY, 1.5);
+    setZoom(scale);
+    setPan({ x: (rect.width - treeW * scale) / 2, y: (rect.height - treeH * scale) / 2 });
+  }, [treeW, treeH]);
+
+  useEffect(function() { if (positioned.length > 0) fitToView(); }, [positioned.length]);
+
+  // Connected highlight
+  var getConnected = useCallback(function(id) {
+    var connected = new Set([id]);
+    var byId = new Map();
+    positioned.forEach(function(n) { byId.set(n.id || n.agentId, n); });
+    // Children
+    function addDesc(node) {
+      (node.children || []).forEach(function(c) { connected.add(c.id || c.agentId); addDesc(c); });
+    }
+    var node = byId.get(id);
+    if (node) addDesc(node);
+    // Parent edges
+    edges.forEach(function(e) {
+      var cId = e.child.id || e.child.agentId;
+      var pId = e.parent.id || e.parent.agentId;
+      if (cId === id) connected.add(pId);
+    });
+    return connected;
+  }, [positioned, edges]);
+
+  var connected = hoveredId ? getConnected(hoveredId) : null;
+
+  // Hovered node for tooltip
+  var hoveredNode = hoveredId ? positioned.find(function(n) { return (n.id || n.agentId) === hoveredId; }) : null;
+
+  if (loading) return h('div', { style: { padding: 40, textAlign: 'center', color: 'var(--text-muted)' } }, 'Loading task pipeline...');
+
+  if (positioned.length === 0) return h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', background: BG, borderRadius: 'var(--radius-lg)', overflow: 'hidden' } },
+    // Toolbar even when empty
+    h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, padding: '12px 20px', borderBottom: '1px solid rgba(255,255,255,0.08)', background: 'rgba(0,0,0,0.3)' } },
+      h('div', { style: { fontWeight: 700, fontSize: 16, color: '#fff', display: 'flex', alignItems: 'center', gap: 8 } }, I.workflow(), ' Task Pipeline'),
+    ),
+    h('div', { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' } },
+      h('div', { style: { fontSize: 48, marginBottom: 16 } }, '\uD83D\uDCCB'),
+      h('div', { style: { fontSize: 18, fontWeight: 600, marginBottom: 8, color: '#fff' } }, 'No Tasks in Pipeline'),
+      h('div', { style: { color: 'rgba(255,255,255,0.5)' } }, 'Tasks will appear here as agents are assigned work.')
+    )
+  );
+
+  return h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', background: BG, borderRadius: 'var(--radius-lg)', overflow: 'hidden' } },
+    // Toolbar
+    h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, padding: '12px 20px', borderBottom: '1px solid rgba(255,255,255,0.08)', background: 'rgba(0,0,0,0.3)', flexShrink: 0, flexWrap: 'wrap' } },
+      h('div', { style: { fontWeight: 700, fontSize: 16, color: '#fff', display: 'flex', alignItems: 'center', gap: 8 } },
+        I.workflow(), ' Task Pipeline',
+        h(HelpButton, { label: 'Task Pipeline' },
+          h('p', null, 'Visual hierarchy of all agent tasks in your organization. Tasks flow from agents (top) to individual tasks and sub-tasks (below), connected by arrows.'),
+          h('h4', { style: _h4 }, 'Interactions'),
+          h('ul', { style: _ul },
+            h('li', null, h('strong', null, 'Hover'), ' — Highlights the task chain and shows detail tooltip'),
+            h('li', null, h('strong', null, 'Click'), ' — Opens full task detail modal'),
+            h('li', null, h('strong', null, 'Scroll'), ' — Zoom in/out'),
+            h('li', null, h('strong', null, 'Drag'), ' — Pan the canvas')
+          ),
+          h('h4', { style: _h4 }, 'Task Lifecycle'),
+          h('ul', { style: _ul },
+            h('li', null, h('strong', null, 'Queued'), ' — Waiting to be picked up'),
+            h('li', null, h('strong', null, 'Assigned'), ' — Agent selected, about to start'),
+            h('li', null, h('strong', null, 'In Progress'), ' — Actively executing'),
+            h('li', null, h('strong', null, 'Completed'), ' — Finished successfully'),
+            h('li', null, h('strong', null, 'Failed'), ' — Encountered an error')
+          ),
+          h('div', { style: _tip }, 'Tip: Sub-tasks appear as children of their parent task. The arrow system shows task delegation flow.')
+        )
+      ),
+      // Live dot
+      h('div', { style: { display: 'flex', alignItems: 'center', gap: 4 } },
+        h('div', { style: { width: 8, height: 8, borderRadius: '50%', background: '#22c55e', animation: 'pulse 2s infinite' } }),
+        h('span', { style: { color: 'rgba(255,255,255,0.4)', fontSize: 12 } }, 'Live')
+      ),
+      // Stats
+      h('div', { style: { color: 'rgba(255,255,255,0.4)', fontSize: 12 } },
+        (stats.inProgress || 0) + ' active \u00B7 ' + (stats.completed || 0) + ' done \u00B7 ' + (stats.total || 0) + ' total'
+      ),
+      h('div', { style: { flex: 1 } }),
+      // Filter
+      ['active', 'all', 'completed', 'failed'].map(function(f) {
+        return h('button', {
+          key: f,
+          onClick: function() { setFilter(f); },
+          style: Object.assign({}, toolbarBtnStyle, { fontSize: 11, padding: '4px 10px', background: filter === f ? 'rgba(99,102,241,0.3)' : toolbarBtnStyle.background, borderColor: filter === f ? 'rgba(99,102,241,0.5)' : toolbarBtnStyle.border })
+        }, f.charAt(0).toUpperCase() + f.slice(1));
+      }),
+      h('div', { style: { width: 1, height: 16, background: 'rgba(255,255,255,0.12)' } }),
+      // Legend
+      legendDot(STATUS_COLORS.in_progress, 'Active'),
+      legendDot(STATUS_COLORS.assigned, 'Assigned'),
+      legendDot(STATUS_COLORS.completed, 'Done'),
+      legendDot(STATUS_COLORS.failed, 'Failed'),
+      h('div', { style: { width: 1, height: 16, background: 'rgba(255,255,255,0.12)' } }),
+      // Zoom
+      h('button', { onClick: function() { setZoom(function(z) { return Math.min(3, z + 0.2); }); }, style: toolbarBtnStyle }, '+'),
+      h('div', { style: { color: 'rgba(255,255,255,0.5)', fontSize: 12, minWidth: 40, textAlign: 'center' } }, Math.round(zoom * 100) + '%'),
+      h('button', { onClick: function() { setZoom(function(z) { return Math.max(0.15, z - 0.2); }); }, style: toolbarBtnStyle }, '\u2212'),
+      h('button', { onClick: fitToView, style: Object.assign({}, toolbarBtnStyle, { fontSize: 11, padding: '4px 10px' }) }, 'Fit'),
+      h('button', { onClick: loadData, style: Object.assign({}, toolbarBtnStyle, { fontSize: 11, padding: '4px 10px' }) }, 'Refresh'),
+    ),
+
+    // Canvas
+    h('div', {
+      ref: containerRef,
+      style: { flex: 1, overflow: 'hidden', cursor: dragging ? 'grabbing' : 'grab', position: 'relative' },
+      onMouseDown: handleMouseDown,
+      onWheel: handleWheel,
+    },
+      h('div', { style: { transform: 'translate(' + pan.x + 'px, ' + pan.y + 'px) scale(' + zoom + ')', transformOrigin: '0 0', position: 'absolute', top: 0, left: 0 } },
+        // SVG edges
+        h('svg', { width: treeW, height: treeH, style: { position: 'absolute', top: 0, left: 0, pointerEvents: 'none' } },
+          h('defs', null,
+            h('marker', { id: 'task-arrow', markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: 'auto' },
+              h('polygon', { points: '0 0, 8 3, 0 6', fill: EDGE_COLOR })
+            ),
+            h('marker', { id: 'task-arrow-hl', markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: 'auto' },
+              h('polygon', { points: '0 0, 8 3, 0 6', fill: EDGE_HIGHLIGHT })
+            )
+          ),
+          edges.map(function(e, i) {
+            var pId = e.parent.id || e.parent.agentId;
+            var cId = e.child.id || e.child.agentId;
+            var isHl = connected && connected.has(pId) && connected.has(cId);
+            var dim = connected && !isHl;
+            return h('path', {
+              key: i,
+              d: edgePath(e.parent, e.child),
+              stroke: isHl ? EDGE_HIGHLIGHT : dim ? 'rgba(255,255,255,0.06)' : EDGE_COLOR,
+              strokeWidth: isHl ? 2.5 : 1.5,
+              fill: 'none',
+              markerEnd: isHl ? 'url(#task-arrow-hl)' : 'url(#task-arrow)',
+              style: { transition: 'stroke 0.2s, opacity 0.2s', opacity: dim ? 0.3 : 1 },
+            });
+          })
+        ),
+
+        // Nodes
+        positioned.map(function(node) {
+          var nodeId = node.id || node.agentId;
+          var isHovered = hoveredId === nodeId;
+          var dim = connected && !connected.has(nodeId);
+
+          if (node.isAgent) {
+            // Agent node (top-level, like org-chart node)
+            var taskCount = (node.children || []).length;
+            return h('div', {
+              key: nodeId,
+              className: 'task-node',
+              onMouseEnter: function(ev) { setHoveredId(nodeId); setMousePos({ x: ev.clientX, y: ev.clientY }); },
+              onMouseMove: function(ev) { if (isHovered) 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(99,102,241,0.12)' : 'rgba(255,255,255,0.03)',
+                border: '1.5px solid ' + (isHovered ? 'rgba(99,102,241,0.5)' : 'rgba(255,255,255,0.12)'),
+                borderRadius: 12, padding: '10px 14px', cursor: 'default',
+                transition: 'all 0.2s', opacity: dim ? 0.2 : 1,
+                backdropFilter: 'blur(8px)',
+                display: 'flex', alignItems: 'center', gap: 10, userSelect: 'none',
+              },
+            },
+              h('div', { style: { width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg, ' + ACCENT + '44, ' + ACCENT + '11)', border: '2px solid ' + ACCENT, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, color: ACCENT, flexShrink: 0 } },
+                (node.name || '?').charAt(0).toUpperCase()
+              ),
+              h('div', { style: { overflow: 'hidden', flex: 1, minWidth: 0 } },
+                h('div', { style: { fontSize: 13, fontWeight: 600, color: '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, node.name),
+                h('div', { style: { fontSize: 11, color: 'rgba(255,255,255,0.45)', marginTop: 2 } }, 'Agent'),
+                h('div', { style: { display: 'flex', gap: 4, marginTop: 4 } },
+                  h('span', { style: tagStyle(ACCENT) }, taskCount + ' task' + (taskCount !== 1 ? 's' : ''))
+                )
+              )
+            );
+          }
+
+          // Task node
+          var t = node.task;
+          var statusColor = STATUS_COLORS[t.status] || '#6b7394';
+          var priColor = PRIORITY_COLORS[t.priority] || '#6366f1';
+          var catIcon = CATEGORY_ICONS[t.category] || '\uD83D\uDCCB';
+
+          return h('div', {
+            key: nodeId,
+            className: 'task-node',
+            onClick: function() { setSelectedTask(t); },
+            onMouseEnter: function(ev) { setHoveredId(nodeId); setMousePos({ x: ev.clientX, y: ev.clientY }); },
+            onMouseMove: function(ev) { if (isHovered) 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: '1.5px solid ' + (isHovered ? statusColor + '88' : 'rgba(255,255,255,0.12)'),
+              borderLeft: '3px solid ' + statusColor,
+              borderRadius: 12, padding: '8px 12px', cursor: 'pointer',
+              transition: 'all 0.2s', opacity: dim ? 0.2 : 1,
+              backdropFilter: 'blur(8px)',
+              display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 4, userSelect: 'none',
+            },
+          },
+            // Title row
+            h('div', { style: { display: 'flex', alignItems: 'center', gap: 6 } },
+              h('span', { style: { fontSize: 12 } }, catIcon),
+              h('span', { style: { fontSize: 12, fontWeight: 600, color: '#fff', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, t.title)
+            ),
+            // Status + priority + time
+            h('div', { style: { display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' } },
+              h('span', { style: tagStyle(statusColor) }, t.status.replace('_', ' ')),
+              h('span', { style: tagStyle(priColor) }, t.priority),
+              h('span', { style: { fontSize: 10, color: 'rgba(255,255,255,0.35)', marginLeft: 'auto' } }, timeAgo(t.createdAt))
+            ),
+            // Progress bar
+            t.status === 'in_progress' && t.progress > 0 && h('div', { style: { height: 2, background: 'rgba(255,255,255,0.1)', borderRadius: 1, overflow: 'hidden', marginTop: 2 } },
+              h('div', { style: { height: '100%', width: t.progress + '%', background: STATUS_COLORS.in_progress, borderRadius: 1 } })
+            )
+          );
+        })
+      )
+    ),
+
+    // Hover tooltip
+    hoveredNode && !hoveredNode.isAgent && hoveredNode.task && h('div', { style: {
+      position: 'fixed', left: mousePos.x + 16, top: mousePos.y - 10,
+      background: 'rgba(15,17,23,0.95)', backdropFilter: 'blur(12px)',
+      border: '1px solid rgba(255,255,255,0.15)', borderRadius: 10,
+      padding: '12px 16px', pointerEvents: 'none', zIndex: 1000, minWidth: 200, maxWidth: 300,
+    }},
+      h('div', { style: { fontSize: 13, fontWeight: 600, color: '#fff', marginBottom: 8 } }, hoveredNode.task.title),
+      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 4 } },
+        tooltipRow('Status', hoveredNode.task.status.replace('_', ' '), STATUS_COLORS[hoveredNode.task.status]),
+        tooltipRow('Priority', hoveredNode.task.priority, PRIORITY_COLORS[hoveredNode.task.priority]),
+        tooltipRow('Agent', hoveredNode.task.assignedToName || '-'),
+        tooltipRow('Category', hoveredNode.task.category),
+        hoveredNode.task.modelUsed && tooltipRow('Model', hoveredNode.task.modelUsed),
+        hoveredNode.task.startedAt && tooltipRow('Started', timeAgo(hoveredNode.task.startedAt)),
+        hoveredNode.task.actualDurationMs && tooltipRow('Duration', formatDuration(hoveredNode.task.actualDurationMs)),
+        hoveredNode.task.progress > 0 && tooltipRow('Progress', hoveredNode.task.progress + '%', STATUS_COLORS.in_progress)
+      )
+    ),
+
+    // Agent hover tooltip
+    hoveredNode && hoveredNode.isAgent && h('div', { style: {
+      position: 'fixed', left: mousePos.x + 16, top: mousePos.y - 10,
+      background: 'rgba(15,17,23,0.95)', backdropFilter: 'blur(12px)',
+      border: '1px solid rgba(255,255,255,0.15)', borderRadius: 10,
+      padding: '12px 16px', pointerEvents: 'none', zIndex: 1000, minWidth: 180,
+    }},
+      h('div', { style: { fontSize: 13, fontWeight: 600, color: '#fff', marginBottom: 6 } }, hoveredNode.name),
+      tooltipRow('Tasks', String((hoveredNode.children || []).length), ACCENT)
+    ),
+
+    // Task detail modal
+    selectedTask && h(TaskDetail, { task: selectedTask, onClose: function() { setSelectedTask(null); }, onCancel: cancelTask })
+  );
+}
+
+// ─── Agent Task Pipeline (for agent-detail workforce tab) ─
+// Reusable mini version scoped to a single agent
+export function AgentTaskPipeline(props) {
+  var agentId = props.agentId;
+  var _tasks = useState([]);
+  var tasks = _tasks[0]; var setTasks = _tasks[1];
+  var _loading = useState(true);
+  var loading = _loading[0]; var setLoading = _loading[1];
+  var _selectedTask = useState(null);
+  var selectedTask = _selectedTask[0]; var setSelectedTask = _selectedTask[1];
+  var app = useApp();
+  var toast = app.toast;
+
+  useEffect(function() {
+    setLoading(true);
+    engineCall('/task-pipeline/agent/' + agentId + '?completed=true').then(function(res) {
+      setTasks(res?.tasks || []);
+    }).catch(function() {}).finally(function() { setLoading(false); });
+
+    // SSE
+    var baseUrl = window.__ENGINE_BASE || '/api/engine';
+    var es;
+    try {
+      es = new EventSource(baseUrl + '/task-pipeline/stream');
+      es.onmessage = function(e) {
+        try {
+          var event = JSON.parse(e.data);
+          if (event.task && event.task.assignedTo === agentId) {
+            setTasks(function(prev) {
+              var idx = prev.findIndex(function(t) { return t.id === event.task.id; });
+              if (idx >= 0) { var next = prev.slice(); next[idx] = event.task; return next; }
+              return [event.task].concat(prev);
+            });
+          }
+        } catch (err) {}
+      };
+    } catch (err) {}
+    return function() { if (es) es.close(); };
+  }, [agentId]);
+
+  var cancelTask = useCallback(function(taskId) {
+    engineCall('/task-pipeline/' + taskId + '/cancel', { method: 'POST' }).then(function() {
+      toast('Task cancelled', 'success');
+      setSelectedTask(null);
+    }).catch(function(err) { toast(err.message, 'error'); });
+  }, []);
+
+  if (loading) return h('div', { style: { padding: 20, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 } }, 'Loading tasks...');
+  if (!tasks.length) return h('div', { style: { padding: 20, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 } }, 'No pipeline tasks for this agent yet.');
+
+  var active = tasks.filter(function(t) { return t.status === 'created' || t.status === 'assigned' || t.status === 'in_progress'; });
+  var completed = tasks.filter(function(t) { return t.status === 'completed'; });
+  var failed = tasks.filter(function(t) { return t.status === 'failed' || t.status === 'cancelled'; });
+
+  function renderTaskRow(t) {
+    var statusColor = STATUS_COLORS[t.status] || '#6b7394';
+    var catIcon = CATEGORY_ICONS[t.category] || '\uD83D\uDCCB';
+    return h('div', {
+      key: t.id,
+      onClick: function() { setSelectedTask(t); },
+      style: {
+        display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px',
+        borderBottom: '1px solid var(--border)', cursor: 'pointer',
+        transition: 'background 0.15s',
+      },
+      onMouseEnter: function(e) { e.currentTarget.style.background = 'var(--bg-secondary)'; },
+      onMouseLeave: function(e) { e.currentTarget.style.background = ''; },
+    },
+      h('span', { style: { fontSize: 14, flexShrink: 0 } }, catIcon),
+      h('div', { style: { flex: 1, minWidth: 0 } },
+        h('div', { style: { fontSize: 13, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, t.title),
+        h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 2 } }, t.category + ' \u00B7 ' + timeAgo(t.createdAt))
+      ),
+      t.status === 'in_progress' && t.progress > 0 && h('div', { style: { width: 40, fontSize: 11, color: STATUS_COLORS.in_progress, fontWeight: 600 } }, t.progress + '%'),
+      h('span', { style: { padding: '2px 8px', borderRadius: 10, fontSize: 10, fontWeight: 600, background: statusColor + '22', color: statusColor, flexShrink: 0 } }, t.status.replace('_', ' ')),
+      t.actualDurationMs && h('span', { style: { fontSize: 11, color: 'var(--text-muted)', flexShrink: 0 } }, formatDuration(t.actualDurationMs))
+    );
+  }
+
+  return h(Fragment, null,
+    // Active
+    active.length > 0 && h('div', { style: { marginBottom: 16 } },
+      h('div', { style: { fontSize: 12, fontWeight: 600, color: STATUS_COLORS.in_progress, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 } },
+        h('div', { style: { width: 6, height: 6, borderRadius: '50%', background: STATUS_COLORS.in_progress, animation: 'pulse 2s infinite' } }),
+        'Active (' + active.length + ')'
+      ),
+      h('div', { style: { border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' } },
+        active.map(renderTaskRow)
+      )
+    ),
+    // Completed
+    completed.length > 0 && h('div', { style: { marginBottom: 16 } },
+      h('div', { style: { fontSize: 12, fontWeight: 600, color: STATUS_COLORS.completed, marginBottom: 8 } }, 'Completed (' + completed.length + ')'),
+      h('div', { style: { border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' } },
+        completed.slice(0, 10).map(renderTaskRow)
+      ),
+      completed.length > 10 && h('div', { style: { padding: 8, textAlign: 'center', fontSize: 12, color: 'var(--text-muted)' } }, '+ ' + (completed.length - 10) + ' more')
+    ),
+    // Failed
+    failed.length > 0 && h('div', { style: { marginBottom: 16 } },
+      h('div', { style: { fontSize: 12, fontWeight: 600, color: STATUS_COLORS.failed, marginBottom: 8 } }, 'Failed (' + failed.length + ')'),
+      h('div', { style: { border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' } },
+        failed.slice(0, 5).map(renderTaskRow)
+      )
+    ),
+    // Detail modal
+    selectedTask && h(TaskDetail, { task: selectedTask, onClose: function() { setSelectedTask(null); }, onCancel: cancelTask })
+  );
+}