@agenticmail/enterprise 0.5.211 → 0.5.212

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

@@ -2,129 +2,154 @@ 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',
-  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();
+// ─── Constants ───────────────────────────────────────────
+var NODE_W = 200;
+var NODE_H = 64;
+var AGENT_W = 160;
+var AGENT_H = 52;
+var H_GAP = 48; // horizontal gap (left→right flow)
+var V_GAP = 24; // vertical gap between lanes
+var PAD = 40;
+
+var STATUS_COLORS = { created: '#6366f1', assigned: '#f59e0b', in_progress: '#06b6d4', completed: '#22c55e', failed: '#ef4444', cancelled: '#6b7394' };
+var PRIORITY_COLORS = { urgent: '#ef4444', high: '#f59e0b', normal: '#6366f1', low: '#6b7394' };
+var DELEGATION_COLORS = { delegation: '#6366f1', review: '#f59e0b', revision: '#f97316', escalation: '#ef4444', return: '#22c55e' };
+var BG = '#0a0c14';
+var EDGE_COLOR = 'rgba(255,255,255,0.18)';
+var EDGE_HL = 'rgba(99,102,241,0.7)';
+
+// ─── CSS Keyframes (injected once) ──────────────────────
+var _injected = false;
+function injectCSS() {
+  if (_injected) return; _injected = true;
+  var style = document.createElement('style');
+  style.textContent = `
+    @keyframes flowDash { to { stroke-dashoffset: -24; } }
+    @keyframes flowPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
+    @keyframes taskPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(6,182,212,0.3); } 50% { box-shadow: 0 0 8px 2px rgba(6,182,212,0.2); } }
+    .tp-flow-active { animation: flowDash 1.2s linear infinite; }
+    .tp-node-active { animation: taskPulse 2s ease-in-out infinite; }
+    .tp-node:hover { transform: scale(1.03); z-index: 10; }
+    .tp-customer-badge { background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 600; }
+    .tp-chain-tag { font-size: 9px; padding: 1px 5px; border-radius: 4px; font-weight: 600; letter-spacing: 0.02em; }
+  `;
+  document.head.appendChild(style);
+}
+
+// ─── Layout: Left-to-Right Chain Flow ────────────────────
+// Tasks flow horizontally. Each chain = a horizontal row.
+// Multiple chains stack vertically. Circular flows curve back.
+
+function layoutChains(tasks) {
+  if (!tasks.length) return { nodes: [], edges: [], width: 0, height: 0, chains: [] };
+
+  // Group by chainId
+  var chainMap = new Map();
+  var orphans = [];
   tasks.forEach(function(t) {
+    if (t.chainId) {
+      if (!chainMap.has(t.chainId)) chainMap.set(t.chainId, []);
+      chainMap.get(t.chainId).push(t);
+    } else {
+      orphans.push(t);
+    }
+  });
+
+  // Sort each chain by chainSeq
+  chainMap.forEach(function(arr) { arr.sort(function(a, b) { return (a.chainSeq || 0) - (b.chainSeq || 0); }); });
+
+  // Also group orphans by agent for a simpler layout
+  var orphansByAgent = new Map();
+  orphans.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);
+    if (!orphansByAgent.has(key)) orphansByAgent.set(key, []);
+    orphansByAgent.get(key).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);
+  var allEdges = [];
+  var chainInfos = [];
+  var y = PAD;
+
+  // Layout each chain as a horizontal row
+  chainMap.forEach(function(chainTasks, chainId) {
+    var x = PAD;
+    var rowNodes = [];
+    var maxH = NODE_H;
+
+    chainTasks.forEach(function(t, i) {
+      var node = { id: t.id, task: t, x: x, y: y, w: NODE_W, h: NODE_H, isAgent: false, chainId: chainId };
+      rowNodes.push(node);
+      allNodes.push(node);
+
+      if (i > 0) {
+        var prev = rowNodes[i - 1];
+        var dtype = t.delegationType || 'delegation';
+        var isReturn = dtype === 'return' || dtype === 'revision';
+        // Check for circular: does this task go back to an agent already seen?
+        var seenAgents = chainTasks.slice(0, i).map(function(ct) { return ct.assignedTo; });
+        var isCircular = seenAgents.indexOf(t.assignedTo) !== -1 && isReturn;
+
+        allEdges.push({
+          from: prev, to: node,
+          delegationType: dtype,
+          isCircular: isCircular,
+          isActive: prev.task.status === 'in_progress' || t.status === 'in_progress',
+        });
+      }
+
+      x += NODE_W + H_GAP;
     });
 
-    // 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);
-      }
+    // Customer context badge on first node
+    var firstTask = chainTasks[0];
+    chainInfos.push({
+      chainId: chainId,
+      y: y,
+      taskCount: chainTasks.length,
+      customer: firstTask.customerContext,
+      status: chainTasks[chainTasks.length - 1].status,
+      title: firstTask.title,
     });
 
-    agent.children = rootTasks;
-    agentRoots.push(agent);
+    y += maxH + V_GAP + 16; // extra space between chains
   });
 
-  // 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 orphans as simple rows per agent
+  orphansByAgent.forEach(function(agentTasks, agentId) {
+    var x = PAD;
+    agentTasks.forEach(function(t) {
+      allNodes.push({ id: t.id, task: t, x: x, y: y, w: NODE_W, h: NODE_H, isAgent: false, chainId: null });
+      x += NODE_W + 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;
+    y += NODE_H + V_GAP;
   });
 
-  // 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); });
+  var maxX = 0;
+  allNodes.forEach(function(n) { maxX = Math.max(maxX, n.x + n.w); });
 
-  return { positioned: allNodes, edges: edgeList, width: maxX + PAD, height: maxY + PAD + 40 };
+  return { nodes: allNodes, edges: allEdges, width: maxX + PAD, height: y + PAD, chains: chainInfos };
 }
 
-// ─── 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;
+// ─── SVG Edge Paths ──────────────────────────────────────
+function horizontalPath(from, to) {
+  var x1 = from.x + from.w;
+  var y1 = from.y + from.h / 2;
+  var x2 = to.x;
+  var y2 = to.y + to.h / 2;
+  var midX = x1 + (x2 - x1) * 0.5;
+  return 'M ' + x1 + ' ' + y1 + ' C ' + midX + ' ' + y1 + ', ' + midX + ' ' + y2 + ', ' + x2 + ' ' + y2;
+}
+
+function circularPath(from, to) {
+  // Arc back: goes up and curves back left
+  var x1 = from.x + from.w;
+  var y1 = from.y + from.h / 2;
+  var x2 = to.x;
+  var y2 = to.y + to.h / 2;
+  var lift = 40;
+  var topY = Math.min(y1, y2) - lift;
+  return 'M ' + x1 + ' ' + y1 + ' C ' + (x1 + 50) + ' ' + topY + ', ' + (x2 - 50) + ' ' + topY + ', ' + x2 + ' ' + y2;
 }
 
 // ─── Helpers ─────────────────────────────────────────────
@@ -137,7 +162,6 @@ function timeAgo(ts) {
   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);
@@ -146,86 +170,136 @@ function formatDuration(ms) {
   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' };
-}
+function tag(color, text) { return h('span', { className: 'tp-chain-tag', style: { background: color + '22', color: color } }, text); }
 
 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',
+  background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.12)',
+  borderRadius: 6, color: '#fff', fontSize: 12, fontWeight: 600, padding: '4px 10px', cursor: 'pointer',
 };
-
 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)
+    h('span', { style: { color: 'rgba(255,255,255,0.5)', fontSize: 11 } }, label)
   );
 }
-
-// ─── 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 };
 
+// ─── Customer Profile Mini-Card ──────────────────────────
+function CustomerBadge(props) {
+  var c = props.customer;
+  if (!c) return null;
+  return h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px', background: 'rgba(99,102,241,0.08)', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 8, fontSize: 11, marginBottom: 4 } },
+    h('div', { style: { width: 20, height: 20, borderRadius: '50%', background: 'linear-gradient(135deg, #6366f1, #a855f7)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 9, fontWeight: 700, flexShrink: 0 } }, (c.name || '?').charAt(0).toUpperCase()),
+    h('div', { style: { overflow: 'hidden' } },
+      h('div', { style: { fontWeight: 600, color: '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, c.name || 'Unknown'),
+      h('div', { style: { color: 'rgba(255,255,255,0.4)', fontSize: 9 } },
+        c.isNew ? 'New customer' : (c.company || c.email || c.channel || '')
+      )
+    )
+  );
+}
+
 // ─── Task Detail Modal ───────────────────────────────────
 function TaskDetail(props) {
   var task = props.task;
+  var chain = props.chain;
   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', onClick: function(e) { e.stopPropagation(); }, style: { width: 640, maxHeight: '85vh', overflow: 'auto' } },
       h('div', { className: 'modal-header' },
-        h('h2', null, task.title),
+        h('h2', { style: { fontSize: 16 } }, 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)
+        // Status badges
+        h('div', { style: { display: 'flex', gap: 6, marginBottom: 16, alignItems: 'center', flexWrap: 'wrap' } },
+          h('span', { style: { padding: '3px 10px', borderRadius: 12, fontSize: 11, 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: 11, background: (PRIORITY_COLORS[task.priority] || '#6366f1') + '22', color: PRIORITY_COLORS[task.priority] || '#6366f1' } }, task.priority.toUpperCase()),
+          task.chainId && h('span', { style: { padding: '3px 10px', borderRadius: 12, fontSize: 11, background: 'rgba(99,102,241,0.1)', color: '#6366f1', fontFamily: 'var(--font-mono)' } }, 'Chain #' + task.chainId.slice(0, 8)),
+          task.delegationType && tag(DELEGATION_COLORS[task.delegationType] || '#6b7394', task.delegationType)
         ),
+
+        // Customer context
+        task.customerContext && h('div', { style: { padding: 12, background: 'rgba(99,102,241,0.06)', border: '1px solid rgba(99,102,241,0.15)', borderRadius: 'var(--radius)', marginBottom: 16 } },
+          h('div', { style: { fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.5)', marginBottom: 8 } }, 'CUSTOMER'),
+          h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 16px', fontSize: 13 } },
+            task.customerContext.name && h(Fragment, null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11 } }, 'Name'), h('div', null, task.customerContext.name)),
+            task.customerContext.email && h(Fragment, null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11 } }, 'Email'), h('div', null, task.customerContext.email)),
+            task.customerContext.company && h(Fragment, null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11 } }, 'Company'), h('div', null, task.customerContext.company)),
+            task.customerContext.channel && h(Fragment, null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11 } }, 'Channel'), h('div', null, task.customerContext.channel)),
+            h(Fragment, null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11 } }, 'Type'), h('div', null, task.customerContext.isNew ? 'New Customer' : 'Returning'))
+          )
+        ),
+
         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: { 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: { height: '100%', width: task.progress + '%', background: STATUS_COLORS.in_progress, borderRadius: 3, transition: 'width 0.3s' } })
           )
         ),
-        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 24px', fontSize: 13, marginBottom: 16 } },
+
+        // Grid details
+        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 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 chain timeline (if part of a chain)
+        chain && chain.length > 1 && h('div', { style: { marginBottom: 16 } },
+          h('div', { style: { fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 8 } }, 'DELEGATION CHAIN'),
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 0, overflow: 'auto', padding: '8px 0' } },
+            chain.map(function(ct, i) {
+              var isMe = ct.id === task.id;
+              var sc = STATUS_COLORS[ct.status] || '#6b7394';
+              return h(Fragment, { key: ct.id },
+                i > 0 && h('div', { style: { display: 'flex', alignItems: 'center', flexShrink: 0 } },
+                  h('div', { style: { width: 32, height: 2, background: (DELEGATION_COLORS[ct.delegationType] || '#6366f1') + '66' } }),
+                  h('div', { style: { fontSize: 8, color: 'rgba(255,255,255,0.4)', position: 'relative', top: -8 } }, ct.delegationType || '')
+                ),
+                h('div', { style: {
+                  padding: '6px 10px', borderRadius: 8, fontSize: 11, flexShrink: 0,
+                  background: isMe ? sc + '22' : 'rgba(255,255,255,0.03)',
+                  border: '1px solid ' + (isMe ? sc : 'rgba(255,255,255,0.1)'),
+                  fontWeight: isMe ? 700 : 400, color: isMe ? sc : 'rgba(255,255,255,0.6)',
+                } },
+                  h('div', { style: { fontWeight: 600 } }, ct.assignedToName || ct.assignedTo),
+                  h('div', { style: { fontSize: 9, marginTop: 2, opacity: 0.6 } }, ct.status.replace('_', ' '))
+                )
+              );
+            })
+          )
+        ),
+
+        // Activity log
+        task.activityLog && task.activityLog.length > 0 && h('div', { style: { marginBottom: 16 } },
+          h('div', { style: { fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 8 } }, 'ACTIVITY LOG'),
+          h('div', { style: { maxHeight: 180, overflow: 'auto', border: '1px solid var(--border)', borderRadius: 'var(--radius)' } },
+            task.activityLog.map(function(entry, i) {
+              return h('div', { key: i, style: { display: 'flex', gap: 8, padding: '6px 10px', borderBottom: '1px solid var(--border)', fontSize: 11 } },
+                h('span', { style: { color: 'var(--text-muted)', flexShrink: 0, fontFamily: 'var(--font-mono)', fontSize: 10 } }, entry.ts ? new Date(entry.ts).toLocaleTimeString() : ''),
+                h('span', { style: { fontWeight: 600, flexShrink: 0, minWidth: 60 } }, entry.type),
+                h('span', { style: { color: 'var(--text-secondary)' } }, entry.detail)
+              );
+            })
+          )
         ),
+
+        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),
+
+        // 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')
         )
@@ -234,22 +308,147 @@ function TaskDetail(props) {
   );
 }
 
+// ─── Metrics Bar ─────────────────────────────────────────
+function MetricsBar(props) {
+  var s = props.stats;
+  function chip(label, value, color) {
+    return h('div', { style: { display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', background: 'rgba(255,255,255,0.04)', borderRadius: 6 } },
+      h('span', { style: { fontSize: 10, color: 'rgba(255,255,255,0.35)' } }, label),
+      h('span', { style: { fontSize: 11, fontWeight: 700, color: color } }, value)
+    );
+  }
+  var hasActivity = s.total > 0;
+
+  return h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, padding: '6px 16px', borderBottom: '1px solid rgba(255,255,255,0.06)', background: 'rgba(0,0,0,0.12)', flexShrink: 0, overflowX: 'auto', fontSize: 11 } },
+    h('span', { style: { fontSize: 9, color: 'rgba(255,255,255,0.25)', fontWeight: 600, letterSpacing: '0.06em', marginRight: 2 } }, 'TODAY'),
+    chip('Done', s.todayCompleted || 0, '#22c55e'),
+    chip('Active', s.inProgress || 0, '#06b6d4'),
+    chip('New', s.todayCreated || 0, '#f59e0b'),
+    s.todayFailed > 0 && chip('Failed', s.todayFailed, '#ef4444'),
+    hasActivity && h('div', { style: { width: 1, height: 14, background: 'rgba(255,255,255,0.08)' } }),
+    hasActivity && h('span', { style: { fontSize: 9, color: 'rgba(255,255,255,0.25)', fontWeight: 600, letterSpacing: '0.06em' } }, 'ALL'),
+    hasActivity && chip('Total', s.total, 'rgba(255,255,255,0.6)'),
+    s.avgDurationMs > 0 && chip('Avg', formatDuration(s.avgDurationMs), '#fff'),
+    s.totalTokens > 0 && chip('Tokens', s.totalTokens > 999999 ? (s.totalTokens / 1000000).toFixed(1) + 'M' : s.totalTokens > 999 ? (s.totalTokens / 1000).toFixed(1) + 'K' : s.totalTokens, '#a855f7'),
+    s.totalCost > 0 && chip('Cost', '$' + s.totalCost.toFixed(2), '#22c55e'),
+    s.topAgents && s.topAgents.length > 0 && h(Fragment, null,
+      h('div', { style: { width: 1, height: 14, background: 'rgba(255,255,255,0.08)' } }),
+      s.topAgents.slice(0, 3).map(function(a) {
+        return h('div', { key: a.agent, style: { display: 'flex', alignItems: 'center', gap: 3, padding: '2px 6px', background: 'rgba(255,255,255,0.04)', borderRadius: 6 } },
+          h('div', { style: { width: 12, height: 12, borderRadius: '50%', background: '#6366f133', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, fontWeight: 700, color: '#6366f1' } }, (a.name || '?').charAt(0).toUpperCase()),
+          h('span', { style: { fontSize: 10, color: '#fff', fontWeight: 600 } }, a.name),
+          h('span', { style: { fontSize: 9, color: 'rgba(255,255,255,0.3)' } }, a.completed + '/' + a.active)
+        );
+      })
+    )
+  );
+}
+
+// ─── Inline Chain Flowchart (appears below canvas when task expanded) ─
+function ChainFlowInline(props) {
+  var chain = props.chain;
+  var taskId = props.taskId;
+  var onClose = props.onClose;
+  var onClickTask = props.onClickTask;
+  if (!chain || chain.length === 0) return null;
+
+  var MINI_W = 180;
+  var MINI_H = 56;
+  var MINI_GAP = 40;
+  var totalW = chain.length * MINI_W + (chain.length - 1) * MINI_GAP + 40;
+
+  return h('div', { style: { borderTop: '1px solid rgba(255,255,255,0.08)', background: 'rgba(0,0,0,0.25)', padding: '12px 16px', flexShrink: 0, overflow: 'auto' } },
+    h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 } },
+      h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+        h('span', { style: { fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.06em' } }, 'TASK FLOW'),
+        h('span', { style: { fontSize: 10, color: 'rgba(255,255,255,0.3)', fontFamily: 'var(--font-mono)' } }, chain[0].chainId ? '#' + chain[0].chainId.slice(0, 8) : ''),
+        h('span', { style: { fontSize: 10, color: 'rgba(255,255,255,0.3)' } }, chain.length + ' step' + (chain.length > 1 ? 's' : ''))
+      ),
+      h('button', { onClick: onClose, style: { background: 'none', border: 'none', color: 'rgba(255,255,255,0.3)', cursor: 'pointer', fontSize: 16, padding: '0 4px' } }, '\u00D7')
+    ),
+    h('div', { style: { position: 'relative', height: MINI_H + 20, minWidth: totalW } },
+      // SVG arrows
+      h('svg', { width: totalW, height: MINI_H + 20, style: { position: 'absolute', top: 0, left: 0, pointerEvents: 'none' } },
+        h('defs', null,
+          h('marker', { id: 'cf-arr', markerWidth: 6, markerHeight: 4, refX: 6, refY: 2, orient: 'auto' },
+            h('polygon', { points: '0 0, 6 2, 0 4', fill: 'rgba(99,102,241,0.5)' })
+          )
+        ),
+        chain.map(function(ct, i) {
+          if (i === 0) return null;
+          var x1 = 20 + (i - 1) * (MINI_W + MINI_GAP) + MINI_W;
+          var x2 = 20 + i * (MINI_W + MINI_GAP);
+          var y = 10 + MINI_H / 2;
+          var dType = ct.delegationType || 'delegation';
+          var color = DELEGATION_COLORS[dType] || 'rgba(99,102,241,0.5)';
+          var isActive = chain[i - 1].status === 'in_progress' || ct.status === 'in_progress';
+          return h(Fragment, { key: 'e' + i },
+            h('line', { x1: x1, y1: y, x2: x2, y2: y, stroke: color + '88', strokeWidth: 2, markerEnd: 'url(#cf-arr)' }),
+            isActive && h('line', { x1: x1, y1: y, x2: x2, y2: y, stroke: STATUS_COLORS.in_progress, strokeWidth: 2, strokeDasharray: '4 12', className: 'tp-flow-active', style: { opacity: 0.7 } }),
+            dType !== 'delegation' && h('text', { x: (x1 + x2) / 2, y: y - 6, fill: color, fontSize: 8, textAnchor: 'middle', fontWeight: 600 }, dType)
+          );
+        })
+      ),
+      // Task nodes
+      chain.map(function(ct, i) {
+        var x = 20 + i * (MINI_W + MINI_GAP);
+        var sc = STATUS_COLORS[ct.status] || '#6b7394';
+        var isMe = ct.id === taskId;
+        var isActive = ct.status === 'in_progress';
+        return h('div', {
+          key: ct.id,
+          onClick: function() { if (onClickTask) onClickTask(ct); },
+          style: {
+            position: 'absolute', left: x, top: 10, width: MINI_W, height: MINI_H,
+            background: isMe ? sc + '15' : 'rgba(255,255,255,0.02)',
+            border: '1.5px solid ' + (isMe ? sc : 'rgba(255,255,255,0.1)'),
+            borderLeft: '3px solid ' + sc,
+            borderRadius: 8, padding: '6px 10px', cursor: 'pointer',
+            display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 3,
+            transition: 'all 0.15s',
+          },
+          onMouseEnter: function(e) { e.currentTarget.style.background = 'rgba(255,255,255,0.05)'; },
+          onMouseLeave: function(e) { e.currentTarget.style.background = isMe ? sc + '15' : 'rgba(255,255,255,0.02)'; },
+        },
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 5 } },
+            h('div', { style: { width: 16, height: 16, borderRadius: '50%', background: sc + '33', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, fontWeight: 700, color: sc, flexShrink: 0 } },
+              (ct.assignedToName || '?').charAt(0).toUpperCase()
+            ),
+            h('span', { style: { fontSize: 10, fontWeight: 600, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 } }, ct.assignedToName || ct.assignedTo)
+          ),
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 4 } },
+            tag(sc, ct.status.replace('_', ' ')),
+            h('span', { style: { fontSize: 8, color: 'rgba(255,255,255,0.3)' } }, timeAgo(ct.createdAt)),
+            ct.actualDurationMs && h('span', { style: { fontSize: 8, color: 'rgba(255,255,255,0.3)', marginLeft: 'auto' } }, formatDuration(ct.actualDurationMs))
+          ),
+          isActive && ct.progress > 0 && h('div', { style: { height: 2, background: 'rgba(255,255,255,0.08)', borderRadius: 1, overflow: 'hidden' } },
+            h('div', { style: { height: '100%', width: ct.progress + '%', background: sc, borderRadius: 1 } })
+          )
+        );
+      })
+    )
+  );
+}
+
 // ─── Main Page ───────────────────────────────────────────
 export function TaskPipelinePage() {
+  injectCSS();
   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 = useState({ created: 0, assigned: 0, inProgress: 0, completed: 0, failed: 0, cancelled: 0, total: 0, todayCompleted: 0, todayFailed: 0, todayCreated: 0, avgDurationMs: 0, totalCost: 0, totalTokens: 0, topAgents: [] });
   var stats = _stats[0]; var setStats = _stats[1];
+  var _expandedTaskId = useState(null);
+  var expandedTaskId = _expandedTaskId[0]; var setExpandedTaskId = _expandedTaskId[1];
   var _loading = useState(true);
   var loading = _loading[0]; var setLoading = _loading[1];
   var _selectedTask = useState(null);
   var selectedTask = _selectedTask[0]; var setSelectedTask = _selectedTask[1];
+  var _selectedChain = useState(null);
+  var selectedChain = _selectedChain[0]; var setSelectedChain = _selectedChain[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 });
@@ -260,6 +459,8 @@ export function TaskPipelinePage() {
   var dragStart = _dragStart[0]; var setDragStart = _dragStart[1];
   var _filter = useState('active');
   var filter = _filter[0]; var setFilter = _filter[1];
+  var _mousePos = useState({ x: 0, y: 0 });
+  var mousePos = _mousePos[0]; var setMousePos = _mousePos[1];
   var containerRef = useRef(null);
 
   var loadData = useCallback(function() {
@@ -270,9 +471,8 @@ export function TaskPipelinePage() {
     ]).then(function(res) {
       setTasks(res[0]?.tasks || []);
       setStats(res[1] || stats);
-    }).catch(function(err) {
-      console.error('[TaskPipeline] load:', err);
-    }).finally(function() { setLoading(false); });
+    }).catch(function(err) { console.error('[TaskPipeline]', err); })
+      .finally(function() { setLoading(false); });
   }, []);
 
   // SSE
@@ -299,10 +499,9 @@ export function TaskPipelinePage() {
               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;
-            });
+            setSelectedTask(function(prev) { return prev && prev.id === event.task.id ? event.task : prev; });
+            // Refresh stats on every task event for real-time metrics
+            engineCall('/task-pipeline/stats').then(function(s) { if (s) setStats(s); }).catch(function() {});
           }
         } catch (err) {}
       };
@@ -310,11 +509,10 @@ export function TaskPipelinePage() {
     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);
+    }, 15000);
     return function() { clearInterval(iv); };
   }, []);
 
@@ -326,6 +524,34 @@ export function TaskPipelinePage() {
     }).catch(function(err) { toast(err.message || 'Failed', 'error'); });
   }, []);
 
+  function openTaskDetail(t) {
+    setSelectedTask(t);
+    if (t.chainId) {
+      var chainTasks = tasks.filter(function(ct) { return ct.chainId === t.chainId; });
+      chainTasks.sort(function(a, b) { return (a.chainSeq || 0) - (b.chainSeq || 0); });
+      setSelectedChain(chainTasks.length > 1 ? chainTasks : null);
+    } else {
+      setSelectedChain(null);
+    }
+  }
+
+  // Toggle inline chain flowchart (single click on node)
+  function toggleExpand(t) {
+    if (expandedTaskId === t.id) {
+      setExpandedTaskId(null);
+      setSelectedChain(null);
+    } else {
+      setExpandedTaskId(t.id);
+      if (t.chainId) {
+        var chainTasks = tasks.filter(function(ct) { return ct.chainId === t.chainId; });
+        chainTasks.sort(function(a, b) { return (a.chainSeq || 0) - (b.chainSeq || 0); });
+        setSelectedChain(chainTasks.length > 0 ? chainTasks : [t]);
+      } else {
+        setSelectedChain([t]);
+      }
+    }
+  }
+
   // Filter
   var filtered = tasks.filter(function(t) {
     if (filter === 'active') return t.status === 'created' || t.status === 'assigned' || t.status === 'in_progress';
@@ -335,34 +561,28 @@ export function TaskPipelinePage() {
   });
 
   // Layout
-  var layout = layoutPipeline(filtered);
-  var positioned = layout.positioned;
+  var layout = layoutChains(filtered);
+  var nodes = layout.nodes;
   var edges = layout.edges;
   var treeW = layout.width;
   var treeH = layout.height;
+  var chainInfos = layout.chains;
 
-  // Zoom
+  // Zoom/Pan handlers
   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)); });
+    setZoom(function(z) { return Math.min(3, Math.max(0.15, z + (e.deltaY > 0 ? -0.08 : 0.08))); });
   }, []);
-
-  // Pan
   var handleMouseDown = useCallback(function(e) {
-    if (e.button !== 0) return;
-    if (e.target.closest('.task-node')) return;
+    if (e.button !== 0 || e.target.closest('.tp-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);
@@ -371,7 +591,6 @@ export function TaskPipelinePage() {
     }
   }, [dragging, handleMouseMove, handleMouseUp]);
 
-  // Fit
   var fitToView = useCallback(function() {
     if (!containerRef.current || !treeW || !treeH) return;
     var rect = containerRef.current.getBoundingClientRect();
@@ -379,128 +598,96 @@ export function TaskPipelinePage() {
     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 });
+    setPan({ x: (rect.width - treeW * scale) / 2, y: 20 });
   }, [treeW, treeH]);
+  useEffect(function() { if (nodes.length > 0) fitToView(); }, [nodes.length]);
 
-  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;
+  // Highlight connected chain on hover
+  var hoveredChainId = null;
+  if (hoveredId) {
+    var hn = nodes.find(function(n) { return n.id === hoveredId; });
+    if (hn) hoveredChainId = hn.chainId;
+  }
 
-  // Hovered node for tooltip
-  var hoveredNode = hoveredId ? positioned.find(function(n) { return (n.id || n.agentId) === hoveredId; }) : null;
+  var hoveredNode = hoveredId ? nodes.find(function(n) { return n.id === hoveredId; }) : null;
+
+  // ─── Toolbar ─────────────────────────────────────────
+  var toolbar = h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, padding: '10px 16px', 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: 14, color: '#fff', display: 'flex', alignItems: 'center', gap: 6 } },
+      I.workflow(), 'Task Pipeline',
+      h(HelpButton, { label: 'Task Pipeline' },
+        h('p', null, 'Visual flow of all agent tasks. Tasks flow left-to-right showing delegation chains, multi-agent handoffs, and circular review loops.'),
+        h('h4', { style: _h4 }, 'Features'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Horizontal flow'), ' \u2014 Tasks move left to right through agents'),
+          h('li', null, h('strong', null, 'Chain tracking'), ' \u2014 When a manager delegates to a junior, the chain shows the full flow'),
+          h('li', null, h('strong', null, 'Circular flows'), ' \u2014 If a task returns (revision/review), the arc curves back'),
+          h('li', null, h('strong', null, 'Animated lines'), ' \u2014 Active tasks show flowing dashes on their connections'),
+          h('li', null, h('strong', null, 'Customer profiles'), ' \u2014 Support tasks show the customer\'s info'),
+          h('li', null, h('strong', null, 'Real-time SSE'), ' \u2014 Updates stream live, no refresh needed')
+        ),
+        h('h4', { style: _h4 }, 'Interactions'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Hover'), ' \u2014 Highlights the entire chain'),
+          h('li', null, h('strong', null, 'Click'), ' \u2014 Opens detail modal with chain timeline, activity log, customer context'),
+          h('li', null, h('strong', null, 'Scroll'), ' \u2014 Zoom'),
+          h('li', null, h('strong', null, 'Drag'), ' \u2014 Pan')
+        ),
+        h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Each task has a unique chain ID linking all delegation steps. Even circular review loops (agent A \u2192 B \u2192 A) are tracked.')
+      )
+    ),
+    h('div', { style: { display: 'flex', alignItems: 'center', gap: 4 } },
+      h('div', { style: { width: 8, height: 8, borderRadius: '50%', background: '#22c55e', animation: 'flowPulse 2s infinite' } }),
+      h('span', { style: { color: 'rgba(255,255,255,0.4)', fontSize: 11 } }, 'Live')
+    ),
+    h('div', { style: { color: 'rgba(255,255,255,0.4)', fontSize: 11 } },
+      (stats.inProgress || 0) + ' active \u00B7 ' + (stats.completed || 0) + ' done \u00B7 ' + (stats.total || 0) + ' total'
+    ),
+    h('div', { style: { flex: 1 } }),
+    // Filters
+    ['active', 'all', 'completed', 'failed'].map(function(f) {
+      return h('button', { key: f, onClick: function() { setFilter(f); }, style: Object.assign({}, toolbarBtnStyle, { fontSize: 11, background: filter === f ? 'rgba(99,102,241,0.3)' : toolbarBtnStyle.background }) }, f.charAt(0).toUpperCase() + f.slice(1));
+    }),
+    h('div', { style: { width: 1, height: 14, background: 'rgba(255,255,255,0.12)' } }),
+    legendDot(STATUS_COLORS.in_progress, 'Active'),
+    legendDot(STATUS_COLORS.completed, 'Done'),
+    legendDot(STATUS_COLORS.failed, 'Failed'),
+    h('div', { style: { width: 1, height: 14, background: 'rgba(255,255,255,0.12)' } }),
+    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: 11, minWidth: 36, 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: toolbarBtnStyle }, 'Fit'),
+    h('button', { onClick: loadData, style: toolbarBtnStyle }, 'Refresh'),
+  );
 
   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(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 }, 'How It Works'),
-          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('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: Tasks will appear here as agents are assigned work. Sub-tasks show as children connected by arrows.')
-        )
-      ),
-    ),
+  if (nodes.length === 0) return h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', background: BG, borderRadius: 'var(--radius-lg)', overflow: 'hidden' } },
+    toolbar,
+    h(MetricsBar, { stats: stats }),
     h('div', { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' } },
-      h('div', { style: { 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.')
+      h('div', { style: { width: 48, height: 48, borderRadius: 12, background: 'rgba(99,102,241,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16, color: '#6366f1' } }, I.workflow()),
+      h('div', { style: { fontSize: 16, fontWeight: 600, marginBottom: 6, color: '#fff' } }, 'No Tasks in Pipeline'),
+      h('div', { style: { color: 'rgba(255,255,255,0.5)', fontSize: 13 } }, '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'),
-    ),
+  // Build expanded chain for inline flowchart
+  var expandedChain = null;
+  if (expandedTaskId) {
+    var et = tasks.find(function(t) { return t.id === expandedTaskId; });
+    if (et && et.chainId) {
+      expandedChain = tasks.filter(function(ct) { return ct.chainId === et.chainId; });
+      expandedChain.sort(function(a, b) { return (a.chainSeq || 0) - (b.chainSeq || 0); });
+    } else if (et) {
+      expandedChain = [et];
+    }
+  }
 
+  return h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', background: BG, borderRadius: 'var(--radius-lg)', overflow: 'hidden' } },
+    toolbar,
+    // Metrics bar
+    h(MetricsBar, { stats: stats }),
     // Canvas
     h('div', {
       ref: containerRef,
@@ -509,109 +696,110 @@ export function TaskPipelinePage() {
       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' } },
+
+        // Chain labels (left side)
+        chainInfos.map(function(ci, i) {
+          return h('div', { key: ci.chainId, style: { position: 'absolute', left: 4, top: ci.y - 2, fontSize: 9, color: 'rgba(255,255,255,0.25)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', maxWidth: PAD - 8, overflow: 'hidden' } },
+            ci.customer && h(CustomerBadge, { customer: ci.customer })
+          );
+        }),
+
+        // SVG edges with animated flow
+        h('svg', { width: treeW + 100, height: treeH + 100, style: { position: 'absolute', top: 0, left: 0, pointerEvents: 'none', overflow: 'visible' } },
           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: 'tp-arr', markerWidth: 7, markerHeight: 5, refX: 7, refY: 2.5, orient: 'auto' },
+              h('polygon', { points: '0 0, 7 2.5, 0 5', fill: EDGE_COLOR })
+            ),
+            h('marker', { id: 'tp-arr-hl', markerWidth: 7, markerHeight: 5, refX: 7, refY: 2.5, orient: 'auto' },
+              h('polygon', { points: '0 0, 7 2.5, 0 5', fill: EDGE_HL })
             ),
-            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 })
+            // Animated glow filter
+            h('filter', { id: 'tp-glow' },
+              h('feGaussianBlur', { stdDeviation: 2, result: 'blur' }),
+              h('feMerge', null, h('feMergeNode', { in: 'blur' }), h('feMergeNode', { in: 'SourceGraphic' }))
             )
           ),
           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 },
-            });
+            var fromId = e.from.id;
+            var toId = e.to.id;
+            var isHl = hoveredChainId && e.from.chainId === hoveredChainId;
+            var dim = hoveredChainId && !isHl;
+            var dType = e.delegationType || 'delegation';
+            var edgeColor = isHl ? EDGE_HL : dim ? 'rgba(255,255,255,0.06)' : (DELEGATION_COLORS[dType] || EDGE_COLOR) + '88';
+            var d = e.isCircular ? circularPath(e.from, e.to) : horizontalPath(e.from, e.to);
+
+            return h(Fragment, { key: i },
+              // Base path
+              h('path', {
+                d: d, stroke: edgeColor, strokeWidth: isHl ? 2.5 : 1.5, fill: 'none',
+                markerEnd: isHl ? 'url(#tp-arr-hl)' : 'url(#tp-arr)',
+                style: { transition: 'stroke 0.2s, opacity 0.2s', opacity: dim ? 0.2 : 1 },
+              }),
+              // Animated flow dash overlay for active tasks
+              e.isActive && h('path', {
+                d: d, stroke: STATUS_COLORS.in_progress, strokeWidth: 2, fill: 'none',
+                strokeDasharray: '6 18',
+                className: 'tp-flow-active',
+                filter: 'url(#tp-glow)',
+                style: { opacity: dim ? 0.1 : 0.7 },
+              }),
+              // Delegation type label on edge
+              !dim && dType !== 'delegation' && h('text', {
+                x: (e.from.x + e.from.w + e.to.x) / 2,
+                y: (e.from.y + e.to.y) / 2 + (e.from.h / 2) - (e.isCircular ? 20 : 6),
+                fill: (DELEGATION_COLORS[dType] || 'rgba(255,255,255,0.3)') + (dim ? '33' : ''),
+                fontSize: 8, textAnchor: 'middle', fontWeight: 600,
+              }, dType)
+            );
           })
         ),
 
-        // 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
+        // Task nodes
+        nodes.map(function(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';
+          var sc = STATUS_COLORS[t.status] || '#6b7394';
+          var isHovered = hoveredId === node.id;
+          var isChainHl = hoveredChainId && node.chainId === hoveredChainId;
+          var dim = hoveredChainId && !isChainHl;
+          var isActive = t.status === 'in_progress';
 
+          var isExpanded = expandedTaskId === node.id;
           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 }); },
+            key: node.id,
+            className: 'tp-node' + (isActive ? ' tp-node-active' : ''),
+            onClick: function() { toggleExpand(t); },
+            onDoubleClick: function() { openTaskDetail(t); },
+            onMouseEnter: function(ev) { setHoveredId(node.id); setMousePos({ x: ev.clientX, y: ev.clientY }); },
+            onMouseMove: function(ev) { setMousePos({ x: ev.clientX, y: ev.clientY }); },
             onMouseLeave: function() { setHoveredId(null); },
             style: {
-              position: 'absolute', left: node.x, top: node.y, width: NODE_W, height: NODE_H,
+              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',
+              border: '1px solid ' + (isExpanded ? sc : isHovered || isChainHl ? sc + '66' : 'rgba(255,255,255,0.1)'),
+              borderLeft: '3px solid ' + sc,
+              borderRadius: 10, padding: '6px 10px', cursor: 'pointer',
+              transition: 'all 0.15s', opacity: dim ? 0.15 : 1,
+              backdropFilter: 'blur(6px)',
+              display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 3, 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)
+            // Agent + title row
+            h('div', { style: { display: 'flex', alignItems: 'center', gap: 5 } },
+              h('div', { style: { width: 18, height: 18, borderRadius: '50%', background: sc + '33', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8, fontWeight: 700, color: sc, flexShrink: 0, border: '1px solid ' + sc + '44' } },
+                (t.assignedToName || t.assignedTo || '?').charAt(0).toUpperCase()
+              ),
+              h('span', { style: { fontSize: 11, fontWeight: 600, color: '#fff', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, t.title)
             ),
-            // Status + priority + time
+            // Status + agent name + 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))
+              tag(sc, t.status.replace('_', ' ')),
+              h('span', { style: { fontSize: 9, color: 'rgba(255,255,255,0.4)' } }, t.assignedToName || t.assignedTo),
+              t.delegationType && tag(DELEGATION_COLORS[t.delegationType] || '#6b7394', t.delegationType),
+              h('span', { style: { fontSize: 9, color: 'rgba(255,255,255,0.3)', 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 } })
+            isActive && t.progress > 0 && h('div', { style: { height: 2, background: 'rgba(255,255,255,0.08)', borderRadius: 1, overflow: 'hidden', marginTop: 1 } },
+              h('div', { style: { height: '100%', width: t.progress + '%', background: sc, borderRadius: 1, transition: 'width 0.3s' } })
             )
           );
         })
@@ -619,43 +807,37 @@ export function TaskPipelinePage() {
     ),
 
     // Hover tooltip
-    hoveredNode && !hoveredNode.isAgent && hoveredNode.task && h('div', { style: {
+    hoveredNode && 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,
+      padding: '10px 14px', pointerEvents: 'none', zIndex: 1000, minWidth: 180, maxWidth: 280,
     }},
-      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)
+      hoveredNode.task.customerContext && h(CustomerBadge, { customer: hoveredNode.task.customerContext }),
+      h('div', { style: { fontSize: 12, fontWeight: 600, color: '#fff', marginBottom: 6 } }, hoveredNode.task.title),
+      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 3, fontSize: 11 } },
+        h('div', { style: { display: 'flex', justifyContent: 'space-between' } }, h('span', { style: { color: 'rgba(255,255,255,0.4)' } }, 'Agent'), h('span', { style: { fontWeight: 600 } }, hoveredNode.task.assignedToName || '-')),
+        h('div', { style: { display: 'flex', justifyContent: 'space-between' } }, h('span', { style: { color: 'rgba(255,255,255,0.4)' } }, 'Status'), h('span', { style: { color: STATUS_COLORS[hoveredNode.task.status] } }, hoveredNode.task.status.replace('_', ' '))),
+        hoveredNode.task.chainId && h('div', { style: { display: 'flex', justifyContent: 'space-between' } }, h('span', { style: { color: 'rgba(255,255,255,0.4)' } }, 'Chain Step'), h('span', null, '#' + ((hoveredNode.task.chainSeq || 0) + 1))),
+        hoveredNode.task.delegationType && h('div', { style: { display: 'flex', justifyContent: 'space-between' } }, h('span', { style: { color: 'rgba(255,255,255,0.4)' } }, 'Type'), h('span', { style: { color: DELEGATION_COLORS[hoveredNode.task.delegationType] } }, hoveredNode.task.delegationType)),
+        hoveredNode.task.progress > 0 && h('div', { style: { display: 'flex', justifyContent: 'space-between' } }, h('span', { style: { color: 'rgba(255,255,255,0.4)' } }, 'Progress'), h('span', { style: { color: STATUS_COLORS.in_progress } }, hoveredNode.task.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)
-    ),
+    // Inline chain flowchart (shown when a task is clicked)
+    expandedChain && expandedChain.length > 0 && h(ChainFlowInline, {
+      chain: expandedChain,
+      taskId: expandedTaskId,
+      onClose: function() { setExpandedTaskId(null); },
+      onClickTask: function(t) { openTaskDetail(t); }
+    }),
 
-    // Task detail modal
-    selectedTask && h(TaskDetail, { task: selectedTask, onClose: function() { setSelectedTask(null); }, onCancel: cancelTask })
+    // Detail modal (double-click)
+    selectedTask && h(TaskDetail, { task: selectedTask, chain: selectedChain, onClose: function() { setSelectedTask(null); setSelectedChain(null); }, onCancel: cancelTask })
   );
 }
 
-// ─── Agent Task Pipeline (for agent-detail workforce tab) ─
-// Reusable mini version scoped to a single agent
+// ─── Agent Task Pipeline (reusable mini for agent-detail workforce tab) ─
 export function AgentTaskPipeline(props) {
   var agentId = props.agentId;
   var _tasks = useState([]);
@@ -672,8 +854,6 @@ export function AgentTaskPipeline(props) {
     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 {
@@ -709,57 +889,46 @@ export function AgentTaskPipeline(props) {
   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';
+    var sc = STATUS_COLORS[t.status] || '#6b7394';
     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',
-      },
+      style: { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', 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: { width: 6, height: 6, borderRadius: '50%', background: sc, flexShrink: 0 } }),
       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))
+        h('div', { style: { fontSize: 12, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, t.title),
+        h('div', { style: { fontSize: 10, color: 'var(--text-muted)', marginTop: 2, display: 'flex', gap: 4, alignItems: 'center' } },
+          t.category,
+          t.delegationType && h('span', { style: { color: DELEGATION_COLORS[t.delegationType] || '#6b7394' } }, '\u2192 ' + t.delegationType),
+          h('span', null, '\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))
+      t.status === 'in_progress' && t.progress > 0 && h('span', { style: { fontSize: 10, color: sc, fontWeight: 600 } }, t.progress + '%'),
+      h('span', { style: { padding: '2px 6px', borderRadius: 8, fontSize: 9, fontWeight: 600, background: sc + '22', color: sc, flexShrink: 0 } }, t.status.replace('_', ' ')),
+      t.actualDurationMs && h('span', { style: { fontSize: 10, 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.length > 0 && h('div', { style: { marginBottom: 12 } },
+      h('div', { style: { fontSize: 11, fontWeight: 600, color: STATUS_COLORS.in_progress, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 4 } },
+        h('div', { style: { width: 6, height: 6, borderRadius: '50%', background: STATUS_COLORS.in_progress, animation: 'flowPulse 2s infinite' } }),
         'Active (' + active.length + ')'
       ),
-      h('div', { style: { border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' } },
-        active.map(renderTaskRow)
-      )
+      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')
+    completed.length > 0 && h('div', { style: { marginBottom: 12 } },
+      h('div', { style: { fontSize: 11, fontWeight: 600, color: STATUS_COLORS.completed, marginBottom: 6 } }, '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: 6, textAlign: 'center', fontSize: 11, 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)
-      )
+    failed.length > 0 && h('div', { style: { marginBottom: 12 } },
+      h('div', { style: { fontSize: 11, fontWeight: 600, color: STATUS_COLORS.failed, marginBottom: 6 } }, '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 })
+    selectedTask && h(TaskDetail, { task: selectedTask, chain: null, onClose: function() { setSelectedTask(null); }, onCancel: cancelTask })
   );
 }