@agenticmail/enterprise 0.5.201 → 0.5.202

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

@@ -2,6 +2,13 @@ import { h, useState, useEffect, useCallback, useRef, Fragment, useApp, engineCa
 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',
@@ -12,34 +19,115 @@ const STATUS_COLORS = {
   cancelled: '#6b7394',
 };
 const PRIORITY_COLORS = { urgent: '#ef4444', high: '#f59e0b', normal: '#6366f1', low: '#6b7394' };
-const 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' };
-const BG = '#0a0c14';
 const ACCENT = '#6366f1';
+const EDGE_COLOR = 'rgba(255,255,255,0.25)';
+const EDGE_HIGHLIGHT = 'rgba(99,102,241,0.7)';
+const BG = '#0a0c14';
 
-// ─── Styles ──────────────────────────────────────────────
-const _h4 = { marginTop: 16, marginBottom: 8, fontSize: 14 };
-const _ul = { paddingLeft: 20, margin: '4px 0 8px' };
-const _tip = { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 };
+// ─── 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);
+  });
 
-// ─── Pipeline Columns (Kanban) ───────────────────────────
-const COLUMNS = [
-  { key: 'created', label: 'Queued', color: STATUS_COLORS.created },
-  { key: 'assigned', label: 'Assigned', color: STATUS_COLORS.assigned },
-  { key: 'in_progress', label: 'In Progress', color: STATUS_COLORS.in_progress },
-  { key: 'completed', label: 'Completed', color: STATUS_COLORS.completed },
-  { key: 'failed', label: 'Failed', color: STATUS_COLORS.failed },
-];
+  // 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);
+      }
+    });
 
-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';
-  var hr = Math.floor(m / 60);
-  return hr + 'h ' + (m % 60) + 'm';
+    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();
@@ -50,51 +138,57 @@ function timeAgo(ts) {
   return Math.floor(diff / 86400000) + 'd ago';
 }
 
-// ─── Task Card Component ─────────────────────────────────
-function TaskCard({ task, onSelect }) {
-  var priColor = PRIORITY_COLORS[task.priority] || PRIORITY_COLORS.normal;
-  var catIcon = CATEGORY_ICONS[task.category] || CATEGORY_ICONS.custom;
-
-  return h('div', {
-    onClick: function() { onSelect(task); },
-    style: {
-      background: 'var(--bg-secondary, #111827)',
-      border: '1px solid var(--border, #1e293b)',
-      borderLeft: '3px solid ' + priColor,
-      borderRadius: 'var(--radius, 8px)',
-      padding: 12,
-      marginBottom: 8,
-      cursor: 'pointer',
-      transition: 'transform 0.1s, box-shadow 0.1s',
-    },
-    onMouseEnter: function(e) { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.3)'; },
-    onMouseLeave: function(e) { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; },
-  },
-    // Header: icon + title
-    h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 } },
-      h('span', { style: { fontSize: 14 } }, catIcon),
-      h('span', { style: { fontSize: 13, fontWeight: 600, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, task.title)
-    ),
-    // Agent + time
-    h('div', { style: { display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-muted)' } },
-      h('span', null, task.assignedToName || task.assignedTo || '-'),
-      h('span', null, timeAgo(task.createdAt))
-    ),
-    // Progress bar (if in progress)
-    task.status === 'in_progress' && task.progress > 0 && h('div', { style: { marginTop: 6, height: 3, background: 'var(--border)', borderRadius: 2, overflow: 'hidden' } },
-      h('div', { style: { height: '100%', width: task.progress + '%', background: STATUS_COLORS.in_progress, borderRadius: 2, transition: 'width 0.3s' } })
-    ),
-    // Tags
-    task.tags && task.tags.length > 0 && h('div', { style: { display: 'flex', gap: 4, marginTop: 6, flexWrap: 'wrap' } },
-      task.tags.map(function(tag) {
-        return h('span', { key: tag, style: { fontSize: 10, padding: '1px 6px', borderRadius: 10, background: 'var(--accent-soft, rgba(99,102,241,0.15))', color: 'var(--accent, #6366f1)' } }, tag);
-      })
-    )
+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({ task, onClose, onCancel }) {
+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';
 
@@ -105,34 +199,18 @@ function TaskDetail({ task, onClose, onCancel }) {
         h('button', { className: 'btn btn-ghost btn-icon', onClick: onClose }, '\u00D7')
       ),
       h('div', { className: 'modal-body', style: { padding: 20 } },
-        // Status badge
-        h('div', { style: { display: 'flex', gap: 8, marginBottom: 16, alignItems: 'center' } },
-          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
-          )
+        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)
         ),
-
-        // Description
         task.description && h('div', { style: { marginBottom: 16, fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)' } }, task.description),
-
-        // Progress
         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: { 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 } })
           )
         ),
-
-        // Metadata grid
         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 || '-')),
@@ -143,21 +221,11 @@ function TaskDetail({ task, onClose, onCancel }) {
           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)))
         ),
-
-        // Error
-        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
-        ),
-
-        // Result
+        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)
-          )
+          h('pre', { style: { fontSize: 12, background: 'var(--bg-tertiary)', padding: 12, borderRadius: 'var(--radius)', overflow: 'auto', maxHeight: 200 } }, JSON.stringify(task.result, null, 2))
         ),
-
-        // Actions
         (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')
         )
@@ -166,290 +234,512 @@ function TaskDetail({ task, onClose, onCancel }) {
   );
 }
 
-// ─── Stats Bar ───────────────────────────────────────────
-function StatsBar({ stats }) {
-  var items = [
-    { label: 'Queued', value: stats.created, color: STATUS_COLORS.created },
-    { label: 'Assigned', value: stats.assigned, color: STATUS_COLORS.assigned },
-    { label: 'In Progress', value: stats.inProgress, color: STATUS_COLORS.in_progress },
-    { label: 'Completed', value: stats.completed, color: STATUS_COLORS.completed },
-    { label: 'Failed', value: stats.failed, color: STATUS_COLORS.failed },
-  ];
-  return h('div', { style: { display: 'flex', gap: 16, marginBottom: 20, flexWrap: 'wrap' } },
-    items.map(function(it) {
-      return h('div', { key: it.label, style: { background: 'var(--bg-secondary)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: '12px 20px', minWidth: 120, textAlign: 'center' } },
-        h('div', { style: { fontSize: 28, fontWeight: 700, color: it.color, lineHeight: 1 } }, it.value),
-        h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 4 } }, it.label)
-      );
-    })
-  );
-}
-
-// ─── Main Page Component ─────────────────────────────────
+// ─── Main Page ───────────────────────────────────────────
 export function TaskPipelinePage() {
-  var { toast } = useApp();
-  var [tasks, setTasks] = useState([]);
-  var [stats, setStats] = useState({ created: 0, assigned: 0, inProgress: 0, completed: 0, failed: 0, cancelled: 0, total: 0 });
-  var [selectedTask, setSelectedTask] = useState(null);
-  var [view, setView] = useState('kanban'); // 'kanban' | 'list' | 'timeline'
-  var [filter, setFilter] = useState('all'); // 'all' | 'active' | 'completed' | 'failed'
-  var [loading, setLoading] = useState(true);
-  var eventSourceRef = useRef(null);
-
-  // Fetch initial data
+  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(results) {
-      setTasks(results[0]?.tasks || []);
-      setStats(results[1] || stats);
+    ]).then(function(res) {
+      setTasks(res[0]?.tasks || []);
+      setStats(res[1] || stats);
     }).catch(function(err) {
-      console.error('[TaskPipeline] load error:', err);
+      console.error('[TaskPipeline] load:', err);
     }).finally(function() { setLoading(false); });
   }, []);
 
-  // SSE for real-time updates
+  // SSE
   useEffect(function() {
     loadData();
-
-    // Connect to SSE stream
-    var baseUrl = window.__ENGINE_BASE || '/engine';
-    var es = new EventSource(baseUrl + '/task-pipeline/stream');
-    eventSourceRef.current = es;
-
-    es.onmessage = function(e) {
-      try {
-        var event = JSON.parse(e.data);
-        if (event.type === 'init') {
-          // Initial state from SSE
-          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) {
-          // Real-time task event
-          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);
-          });
-          // Update stats locally
-          setStats(function(prev) {
-            var s = Object.assign({}, prev);
-            if (event.type === 'task_created') { s.created++; s.total++; }
-            else if (event.type === 'task_completed') { s.completed++; s.inProgress = Math.max(0, s.inProgress - 1); }
-            else if (event.type === 'task_failed') { s.failed++; s.inProgress = Math.max(0, s.inProgress - 1); }
-            return s;
-          });
-          // Update selected task if viewing it
-          setSelectedTask(function(prev) {
-            if (prev && prev.id === event.task.id) return event.task;
-            return prev;
-          });
-        }
-      } catch (err) { /* ignore parse errors */ }
-    };
-
-    es.onerror = function() {
-      // Reconnect handled by browser
-    };
-
-    return function() {
-      if (es) es.close();
-    };
+    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 refresh
+  // Periodic stats
   useEffect(function() {
-    var interval = setInterval(function() {
+    var iv = setInterval(function() {
       engineCall('/task-pipeline/stats').then(function(s) { if (s) setStats(s); }).catch(function() {});
     }, 30000);
-    return function() { clearInterval(interval); };
+    return function() { clearInterval(iv); };
   }, []);
 
   var cancelTask = useCallback(function(taskId) {
-    engineCall('/task-pipeline/' + taskId + '/cancel', { method: 'POST' })
-      .then(function(res) {
-        toast('Task cancelled', 'success');
-        setSelectedTask(null);
-        loadData();
-      })
-      .catch(function(err) { toast(err.message || 'Failed to cancel', 'error'); });
+    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 tasks
-  var filteredTasks = tasks.filter(function(t) {
+  // 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;
   });
 
-  // Group by status for kanban
-  var columns = {};
-  COLUMNS.forEach(function(col) { columns[col.key] = []; });
-  filteredTasks.forEach(function(t) {
-    if (columns[t.status]) columns[t.status].push(t);
-    else if (t.status === 'cancelled' && columns.failed) columns.failed.push(t);
-  });
+  // 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)); });
+  }, []);
 
-  if (loading) {
-    return h('div', { style: { padding: 40, textAlign: 'center', color: 'var(--text-muted)' } }, 'Loading task pipeline...');
-  }
+  // 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]);
 
-  return h(Fragment, null,
-    // ─── Header ────────────────────────────────────────
-    h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 } },
-      h('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
-        h('h1', { style: { fontSize: 22, fontWeight: 700 } }, I.workflow(), ' Task Pipeline'),
-        h(HelpButton, { title: 'Task Pipeline' },
-          h('p', null, 'The centralized task pipeline shows every task assigned to agents across your organization in real-time.'),
-          h('h4', { style: _h4 }, 'How It Works'),
+  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, 'Tasks are automatically recorded when agents are spawned for work'),
-            h('li', null, 'The pipeline tracks task status from creation through completion'),
-            h('li', null, 'Real-time updates via SSE — no need to refresh'),
-            h('li', null, 'Smart metadata extraction categorizes tasks automatically')
+            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'), ' — Task created, waiting to be assigned'),
+            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'), ' — Agent actively working'),
-            h('li', null, h('strong', null, 'Completed'), ' — Task finished successfully'),
-            h('li', null, h('strong', null, 'Failed'), ' — Task encountered an error')
+            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: Click any task card to see full details including model used, tokens consumed, duration, and results.')
+          h('div', { style: _tip }, 'Tip: Sub-tasks appear as children of their parent task. The arrow system shows task delegation flow.')
         )
       ),
-      h('div', { style: { display: 'flex', gap: 8 } },
-        // View toggle
-        h('div', { style: { display: 'flex', border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' } },
-          ['kanban', 'list'].map(function(v) {
-            return h('button', {
-              key: v,
-              className: 'btn btn-sm ' + (view === v ? 'btn-primary' : 'btn-ghost'),
-              onClick: function() { setView(v); },
-              style: { borderRadius: 0, textTransform: 'capitalize', fontSize: 12 }
-            }, v);
+      // 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 },
+            });
           })
         ),
-        // Filter
-        h('select', {
-          className: 'form-control',
-          value: filter,
-          onChange: function(e) { setFilter(e.target.value); },
-          style: { fontSize: 12, padding: '4px 8px', width: 'auto' }
-        },
-          h('option', { value: 'all' }, 'All Tasks'),
-          h('option', { value: 'active' }, 'Active Only'),
-          h('option', { value: 'completed' }, 'Completed'),
-          h('option', { value: 'failed' }, 'Failed / Cancelled')
-        ),
-        h('button', { className: 'btn btn-secondary btn-sm', onClick: loadData }, I.refresh(), ' Refresh')
+
+        // 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 } })
+            )
+          );
+        })
       )
     ),
 
-    // ─── Stats Bar ─────────────────────────────────────
-    h(StatsBar, { stats: stats }),
+    // 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)
+      )
+    ),
 
-    // ─── Live indicator ────────────────────────────────
-    h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginBottom: 16, fontSize: 12, color: 'var(--text-muted)' } },
-      h('div', { style: { width: 8, height: 8, borderRadius: '50%', background: '#22c55e', animation: 'pulse 2s infinite' } }),
-      'Live — updates in real-time',
-      h('span', { style: { marginLeft: 'auto' } }, filteredTasks.length + ' tasks')
+    // 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)
     ),
 
-    // ─── Kanban View ───────────────────────────────────
-    view === 'kanban' && h('div', {
+    // 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: 'grid',
-        gridTemplateColumns: 'repeat(' + COLUMNS.length + ', 1fr)',
-        gap: 12,
-        minHeight: 400,
-      }
+        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 = ''; },
     },
-      COLUMNS.map(function(col) {
-        var colTasks = columns[col.key] || [];
-        return h('div', { key: col.key, style: { background: 'var(--bg-primary)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' } },
-          // Column header
-          h('div', { style: { padding: '10px 12px', borderBottom: '2px solid ' + col.color, display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-            h('span', { style: { fontSize: 13, fontWeight: 600 } }, col.label),
-            h('span', { style: { fontSize: 11, padding: '2px 8px', borderRadius: 10, background: col.color + '22', color: col.color, fontWeight: 600 } }, colTasks.length)
-          ),
-          // Cards
-          h('div', { style: { padding: 8, maxHeight: 500, overflowY: 'auto' } },
-            colTasks.length === 0
-              ? h('div', { style: { padding: 20, textAlign: 'center', color: 'var(--text-muted)', fontSize: 12 } }, 'No tasks')
-              : colTasks.map(function(t) {
-                  return h(TaskCard, { key: t.id, task: t, onSelect: setSelectedTask });
-                })
-          )
-        );
-      })
-    ),
+      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))
+    );
+  }
 
-    // ─── List View ─────────────────────────────────────
-    view === 'list' && h('div', { className: 'card' },
-      h('div', { style: { overflowX: 'auto' } },
-        h('table', { className: 'table' },
-          h('thead', null,
-            h('tr', null,
-              h('th', null, 'Task'),
-              h('th', null, 'Agent'),
-              h('th', null, 'Status'),
-              h('th', null, 'Priority'),
-              h('th', null, 'Category'),
-              h('th', null, 'Created'),
-              h('th', null, 'Duration'),
-              h('th', null, 'Model')
-            )
-          ),
-          h('tbody', null,
-            filteredTasks.length === 0
-              ? h('tr', null, h('td', { colSpan: 8, style: { textAlign: 'center', color: 'var(--text-muted)', padding: 40 } }, 'No tasks found'))
-              : filteredTasks.map(function(t) {
-                  var statusColor = STATUS_COLORS[t.status] || '#6b7394';
-                  return h('tr', {
-                    key: t.id,
-                    onClick: function() { setSelectedTask(t); },
-                    style: { cursor: 'pointer' }
-                  },
-                    h('td', { style: { maxWidth: 250, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: 500 } }, t.title),
-                    h('td', { style: { fontSize: 13 } }, t.assignedToName || '-'),
-                    h('td', null,
-                      h('span', { style: { padding: '2px 8px', borderRadius: 10, fontSize: 11, fontWeight: 600, background: statusColor + '22', color: statusColor } },
-                        t.status.replace('_', ' ')
-                      )
-                    ),
-                    h('td', null,
-                      h('span', { style: { fontSize: 11, color: PRIORITY_COLORS[t.priority] || '#6366f1' } }, t.priority)
-                    ),
-                    h('td', { style: { fontSize: 12 } }, (CATEGORY_ICONS[t.category] || '') + ' ' + t.category),
-                    h('td', { style: { fontSize: 12, color: 'var(--text-muted)' } }, timeAgo(t.createdAt)),
-                    h('td', { style: { fontSize: 12 } }, formatDuration(t.actualDurationMs)),
-                    h('td', { style: { fontSize: 12, fontFamily: 'var(--font-mono)' } }, t.modelUsed || t.model || '-')
-                  );
-                })
-          )
-        )
+  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)
       )
     ),
-
-    // ─── Task Detail Modal ─────────────────────────────
-    selectedTask && h(TaskDetail, {
-      task: selectedTask,
-      onClose: function() { setSelectedTask(null); },
-      onCancel: cancelTask
-    })
+    // 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 })
   );
 }