@agenticmail/enterprise 0.5.212 → 0.5.214

package/dist/runtime-MNKA2HG6.js

@@ -0,0 +1,45 @@
+import {
+  AgentRuntime,
+  EmailChannel,
+  FollowUpScheduler,
+  SessionManager,
+  SubAgentManager,
+  ToolRegistry,
+  callLLM,
+  createAgentRuntime,
+  createNoopHooks,
+  createRuntimeHooks,
+  estimateMessageTokens,
+  estimateTokens,
+  executeTool,
+  runAgentLoop,
+  toolsToDefinitions
+} from "./chunk-NJRHVKVY.js";
+import {
+  PROVIDER_REGISTRY,
+  listAllProviders,
+  resolveApiKeyForProvider,
+  resolveProvider
+} from "./chunk-UF3ZJMJO.js";
+import "./chunk-KFQGP6VL.js";
+export {
+  AgentRuntime,
+  EmailChannel,
+  FollowUpScheduler,
+  PROVIDER_REGISTRY,
+  SessionManager,
+  SubAgentManager,
+  ToolRegistry,
+  callLLM,
+  createAgentRuntime,
+  createNoopHooks,
+  createRuntimeHooks,
+  estimateMessageTokens,
+  estimateTokens,
+  executeTool,
+  listAllProviders,
+  resolveApiKeyForProvider,
+  resolveProvider,
+  runAgentLoop,
+  toolsToDefinitions
+};

package/dist/server-ZDEYMGB5.js

@@ -0,0 +1,15 @@
+import {
+  createServer
+} from "./chunk-IP5HZWZM.js";
+import "./chunk-OF4MUWWS.js";
+import "./chunk-UF3ZJMJO.js";
+import "./chunk-3OC6RH7W.js";
+import "./chunk-2DDKGTD6.js";
+import "./chunk-YVK6F5OD.js";
+import "./chunk-MKRNEM5A.js";
+import "./chunk-DRXMYYKN.js";
+import "./chunk-6WSX7QXF.js";
+import "./chunk-KFQGP6VL.js";
+export {
+  createServer
+};

package/dist/setup-RWUGYHIU.js

@@ -0,0 +1,20 @@
+import {
+  promptCompanyInfo,
+  promptDatabase,
+  promptDeployment,
+  promptDomain,
+  promptRegistration,
+  provision,
+  runSetupWizard
+} from "./chunk-QRRW3LES.js";
+import "./chunk-VQQ4SYYQ.js";
+import "./chunk-KFQGP6VL.js";
+export {
+  promptCompanyInfo,
+  promptDatabase,
+  promptDeployment,
+  promptDomain,
+  promptRegistration,
+  provision,
+  runSetupWizard
+};

package/package.json

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

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

@@ -14,8 +14,10 @@ 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)';
+// Theme-aware: use CSS variables where possible, detect dark/light
+function isDark() { try { return window.matchMedia('(prefers-color-scheme: dark)').matches || document.documentElement.classList.contains('dark') || document.body.getAttribute('data-theme') === 'dark'; } catch(e) { return true; } }
+var BG = 'var(--bg-canvas, var(--bg-primary, #0a0c14))';
+var EDGE_COLOR = 'var(--tp-edge, rgba(128,128,128,0.25))';
 var EDGE_HL = 'rgba(99,102,241,0.7)';
 
 // ─── CSS Keyframes (injected once) ──────────────────────
@@ -24,13 +26,15 @@ function injectCSS() {
   if (_injected) return; _injected = true;
   var style = document.createElement('style');
   style.textContent = `
+    :root { --tp-bg: #0a0c14; --tp-text: #fff; --tp-text-dim: rgba(255,255,255,0.4); --tp-text-faint: rgba(255,255,255,0.15); --tp-border: rgba(255,255,255,0.08); --tp-card: rgba(255,255,255,0.02); --tp-card-hover: rgba(255,255,255,0.06); --tp-edge: rgba(255,255,255,0.18); --tp-toolbar: rgba(0,0,0,0.3); --tp-metrics: rgba(0,0,0,0.12); }
+    [data-theme="light"], .light, :root:not(.dark) { --tp-bg: var(--bg-primary, #f8fafc); --tp-text: var(--text-primary, #1e293b); --tp-text-dim: var(--text-muted, #64748b); --tp-text-faint: rgba(0,0,0,0.06); --tp-border: var(--border, rgba(0,0,0,0.08)); --tp-card: rgba(0,0,0,0.02); --tp-card-hover: rgba(0,0,0,0.05); --tp-edge: rgba(0,0,0,0.2); --tp-toolbar: rgba(0,0,0,0.03); --tp-metrics: rgba(0,0,0,0.02); }
+    @media (prefers-color-scheme: light) { :root:not(.dark) { --tp-bg: var(--bg-primary, #f8fafc); --tp-text: var(--text-primary, #1e293b); --tp-text-dim: var(--text-muted, #64748b); --tp-text-faint: rgba(0,0,0,0.06); --tp-border: var(--border, rgba(0,0,0,0.08)); --tp-card: rgba(0,0,0,0.02); --tp-card-hover: rgba(0,0,0,0.05); --tp-edge: rgba(0,0,0,0.2); --tp-toolbar: rgba(0,0,0,0.03); --tp-metrics: rgba(0,0,0,0.02); } }
     @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);
@@ -173,13 +177,13 @@ function formatDuration(ms) {
 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: 12, fontWeight: 600, padding: '4px 10px', cursor: 'pointer',
+  background: 'var(--tp-border)', border: '1px solid rgba(255,255,255,0.12)',
+  borderRadius: 6, color: 'var(--tp-text)', 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: 11 } }, label)
+    h('span', { style: { color: 'var(--tp-text-dim)', fontSize: 11 } }, label)
   );
 }
 var _h4 = { marginTop: 16, marginBottom: 8, fontSize: 14 };
@@ -191,10 +195,10 @@ 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: { width: 20, height: 20, borderRadius: '50%', background: 'linear-gradient(135deg, #6366f1, #a855f7)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--tp-text)', 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 } },
+      h('div', { style: { fontWeight: 600, color: 'var(--tp-text)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, c.name || 'Unknown'),
+      h('div', { style: { color: 'var(--tp-text-dim)', fontSize: 9 } },
         c.isNew ? 'New customer' : (c.company || c.email || c.channel || '')
       )
     )
@@ -227,7 +231,7 @@ function TaskDetail(props) {
 
         // 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: { fontSize: 11, fontWeight: 600, color: 'var(--tp-text-dim)', 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)),
@@ -267,7 +271,7 @@ function TaskDetail(props) {
               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: { fontSize: 8, color: 'var(--tp-text-dim)', position: 'relative', top: -8 } }, ct.delegationType || '')
                 ),
                 h('div', { style: {
                   padding: '6px 10px', borderRadius: 8, fontSize: 11, flexShrink: 0,
@@ -312,123 +316,39 @@ function TaskDetail(props) {
 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),
+    return h('div', { style: { display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', background: 'var(--tp-card)', borderRadius: 6 } },
+      h('span', { style: { fontSize: 10, color: 'var(--tp-text-dim)' } }, 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'),
+  return h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, padding: '6px 16px', borderBottom: '1px solid var(--tp-border)', background: 'var(--tp-metrics)', flexShrink: 0, overflowX: 'auto', fontSize: 11 } },
+    h('span', { style: { fontSize: 9, color: 'var(--tp-text-faint)', 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 && h('div', { style: { width: 1, height: 14, background: 'var(--tp-border)' } }),
+    hasActivity && h('span', { style: { fontSize: 9, color: 'var(--tp-text-faint)', 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)' } }),
+      h('div', { style: { width: 1, height: 14, background: 'var(--tp-border)' } }),
       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 } },
+        return h('div', { key: a.agent, style: { display: 'flex', alignItems: 'center', gap: 3, padding: '2px 6px', background: 'var(--tp-card)', 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)
+          h('span', { style: { fontSize: 10, color: 'var(--tp-text)', fontWeight: 600 } }, a.name),
+          h('span', { style: { fontSize: 9, color: 'var(--tp-text-dim)' } }, 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 } })
-          )
-        );
-      })
-    )
-  );
-}
+// (ChainFlowInline removed — chain flow now renders inline on canvas)
 
 // ─── Main Page ───────────────────────────────────────────
 export function TaskPipelinePage() {
@@ -612,8 +532,8 @@ export function TaskPipelinePage() {
   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 } },
+  var toolbar = h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, padding: '10px 16px', borderBottom: '1px solid var(--tp-border)', background: 'var(--tp-toolbar)', flexShrink: 0, flexWrap: 'wrap' } },
+    h('div', { style: { fontWeight: 700, fontSize: 14, color: 'var(--tp-text)', 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.'),
@@ -638,9 +558,9 @@ export function TaskPipelinePage() {
     ),
     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('span', { style: { color: 'var(--tp-text-dim)', fontSize: 11 } }, 'Live')
     ),
-    h('div', { style: { color: 'rgba(255,255,255,0.4)', fontSize: 11 } },
+    h('div', { style: { color: 'var(--tp-text-dim)', fontSize: 11 } },
       (stats.inProgress || 0) + ' active \u00B7 ' + (stats.completed || 0) + ' done \u00B7 ' + (stats.total || 0) + ' total'
     ),
     h('div', { style: { flex: 1 } }),
@@ -654,7 +574,7 @@ export function TaskPipelinePage() {
     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('div', { style: { color: 'var(--tp-text-dim)', 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'),
@@ -662,13 +582,13 @@ export function TaskPipelinePage() {
 
   if (loading) return h('div', { style: { padding: 40, textAlign: 'center', color: 'var(--text-muted)' } }, 'Loading task pipeline...');
 
-  if (nodes.length === 0) return h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', background: BG, borderRadius: 'var(--radius-lg)', overflow: 'hidden' } },
+  if (nodes.length === 0) return h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--tp-bg)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' } },
     toolbar,
     h(MetricsBar, { stats: stats }),
     h('div', { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' } },
       h('div', { style: { width: 48, height: 48, borderRadius: 12, background: 'rgba(99,102,241,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16, color: '#6366f1' } }, I.workflow()),
-      h('div', { style: { fontSize: 16, fontWeight: 600, marginBottom: 6, color: '#fff' } }, 'No Tasks in Pipeline'),
-      h('div', { style: { color: 'rgba(255,255,255,0.5)', fontSize: 13 } }, 'Tasks will appear here as agents are assigned work.')
+      h('div', { style: { fontSize: 16, fontWeight: 600, marginBottom: 6, color: 'var(--tp-text)' } }, 'No Tasks in Pipeline'),
+      h('div', { style: { color: 'var(--tp-text-dim)', fontSize: 13 } }, 'Tasks will appear here as agents are assigned work.')
     )
   );
 
@@ -684,7 +604,7 @@ export function TaskPipelinePage() {
     }
   }
 
-  return h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', background: BG, borderRadius: 'var(--radius-lg)', overflow: 'hidden' } },
+  return h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--tp-bg)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' } },
     toolbar,
     // Metrics bar
     h(MetricsBar, { stats: stats }),
@@ -699,7 +619,7 @@ export function TaskPipelinePage() {
 
         // 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' } },
+          return h('div', { key: ci.chainId, style: { position: 'absolute', left: 4, top: ci.y - 2, fontSize: 9, color: 'var(--tp-text-faint)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', maxWidth: PAD - 8, overflow: 'hidden' } },
             ci.customer && h(CustomerBadge, { customer: ci.customer })
           );
         }),
@@ -788,21 +708,141 @@ export function TaskPipelinePage() {
               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)
+              h('span', { style: { fontSize: 11, fontWeight: 600, color: 'var(--tp-text)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, t.title)
             ),
             // Status + agent name + time
             h('div', { style: { display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' } },
               tag(sc, t.status.replace('_', ' ')),
-              h('span', { style: { fontSize: 9, color: 'rgba(255,255,255,0.4)' } }, t.assignedToName || t.assignedTo),
+              h('span', { style: { fontSize: 9, color: 'var(--tp-text-dim)' } }, 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))
+              h('span', { style: { fontSize: 9, color: 'var(--tp-text-dim)', marginLeft: 'auto' } }, timeAgo(t.createdAt))
             ),
             // Progress bar
-            isActive && t.progress > 0 && h('div', { style: { height: 2, background: 'rgba(255,255,255,0.08)', borderRadius: 1, overflow: 'hidden', marginTop: 1 } },
+            isActive && t.progress > 0 && h('div', { style: { height: 2, background: 'var(--tp-border)', borderRadius: 1, overflow: 'hidden', marginTop: 1 } },
               h('div', { style: { height: '100%', width: t.progress + '%', background: sc, borderRadius: 1, transition: 'width 0.3s' } })
             )
           );
-        })
+        }),
+
+        // ── Expanded chain flow (rendered ON the canvas below clicked node) ──
+        expandedChain && expandedChain.length > 0 && (function() {
+          // Find the clicked node position to anchor below it
+          var anchor = nodes.find(function(n) { return n.id === expandedTaskId; });
+          if (!anchor) return null;
+          var flowY = anchor.y + anchor.h + 20;
+          var flowX = anchor.x;
+          var STEP_W = 120;
+          var STEP_H = 44;
+          var STEP_GAP = 48;
+          var ARROW_W = STEP_GAP;
+
+          // Build person-centric flow steps: createdBy → assignedTo for each chain task, then final status
+          var steps = [];
+          expandedChain.forEach(function(ct, i) {
+            if (i === 0 && ct.createdBy && ct.createdBy !== 'system') {
+              steps.push({ label: ct.createdByName || ct.createdBy, type: 'person', isHuman: ct.createdBy.indexOf('agent') === -1 && ct.createdBy !== 'system', status: null, arrow: ct.delegationType || 'assigned' });
+            } else if (i === 0 && ct.createdBy === 'system') {
+              steps.push({ label: 'System', type: 'system', isHuman: false, status: null, arrow: 'assigned' });
+            }
+            steps.push({ label: ct.assignedToName || ct.assignedTo, type: 'agent', isHuman: false, status: ct.status, taskId: ct.id, arrow: i < expandedChain.length - 1 ? (expandedChain[i + 1].delegationType || 'delegation') : null, duration: ct.actualDurationMs, progress: ct.progress });
+          });
+          // Add final status node
+          var lastTask = expandedChain[expandedChain.length - 1];
+          var isDone = lastTask.status === 'completed' || lastTask.status === 'failed' || lastTask.status === 'cancelled';
+          if (isDone) {
+            steps.push({ label: lastTask.status === 'completed' ? 'Completed!' : lastTask.status === 'failed' ? 'Failed' : 'Cancelled', type: 'terminal', isHuman: false, status: lastTask.status, arrow: null });
+          }
+
+          var totalW = steps.length * STEP_W + (steps.length - 1) * STEP_GAP;
+
+          var maxFlowW = Math.max(totalW + 40, 400);
+          var containerW = (containerRef.current ? containerRef.current.getBoundingClientRect().width / zoom : 800) - flowX;
+          if (maxFlowW > containerW) maxFlowW = Math.max(containerW, 320);
+
+          return h('div', { style: { position: 'absolute', left: flowX, top: flowY, pointerEvents: 'auto', maxWidth: maxFlowW, zIndex: 20 } },
+            // Background card
+            h('div', { style: { background: 'var(--bg-primary, rgba(10,12,20,0.95))', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 12, padding: '14px 16px 12px', backdropFilter: 'blur(8px)', overflowX: 'auto', overflowY: 'hidden' } },
+              // Header
+              h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 } },
+                h('span', { style: { fontSize: 10, fontWeight: 600, color: 'var(--tp-text-dim)', letterSpacing: '0.06em' } }, 'TASK FLOW'),
+                expandedChain[0].chainId && h('span', { style: { fontSize: 9, color: 'rgba(255,255,255,0.2)', fontFamily: 'var(--font-mono)' } }, '#' + expandedChain[0].chainId.slice(0, 8)),
+                h('div', { style: { flex: 1 } }),
+                h('button', { className: 'tp-node', onClick: function() { setExpandedTaskId(null); }, style: { background: 'none', border: 'none', color: 'var(--tp-text-dim)', cursor: 'pointer', fontSize: 14, padding: '0 2px' } }, '\u00D7')
+              ),
+              // Flow
+              h('div', { style: { position: 'relative', height: STEP_H + 8, minWidth: totalW } },
+                // SVG arrows
+                h('svg', { width: totalW, height: STEP_H + 8, style: { position: 'absolute', top: 0, left: 0, pointerEvents: 'none' } },
+                  h('defs', null,
+                    h('marker', { id: 'fc-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)' })
+                    )
+                  ),
+                  steps.map(function(step, i) {
+                    if (i === steps.length - 1 || !step.arrow) return null;
+                    var x1 = i * (STEP_W + STEP_GAP) + STEP_W;
+                    var x2 = (i + 1) * (STEP_W + STEP_GAP);
+                    var y = 4 + STEP_H / 2;
+                    var arrowColor = DELEGATION_COLORS[step.arrow] || 'rgba(99,102,241,0.5)';
+                    var nextStep = steps[i + 1];
+                    var isFlowActive = step.status === 'in_progress' || (nextStep && nextStep.status === 'in_progress');
+                    return h(Fragment, { key: 'a' + i },
+                      h('line', { x1: x1, y1: y, x2: x2, y2: y, stroke: arrowColor + '88', strokeWidth: 2, markerEnd: 'url(#fc-arr)' }),
+                      isFlowActive && 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 } }),
+                      step.arrow !== 'assigned' && step.arrow !== 'delegation' && h('text', { x: (x1 + x2) / 2, y: y - 6, fill: arrowColor, fontSize: 8, textAnchor: 'middle', fontWeight: 600 }, step.arrow)
+                    );
+                  })
+                ),
+                // Step nodes
+                steps.map(function(step, i) {
+                  var x = i * (STEP_W + STEP_GAP);
+                  var sc = step.type === 'terminal'
+                    ? (STATUS_COLORS[step.status] || '#22c55e')
+                    : step.type === 'person' || step.isHuman
+                      ? '#f59e0b'
+                      : step.status ? (STATUS_COLORS[step.status] || '#6366f1') : '#6366f1';
+                  var isTerminal = step.type === 'terminal';
+                  var isMe = step.taskId === expandedTaskId;
+
+                  return h('div', {
+                    key: i,
+                    className: 'tp-node',
+                    onClick: function(e) { e.stopPropagation(); if (step.taskId) { var ct = expandedChain.find(function(c) { return c.id === step.taskId; }); if (ct) openTaskDetail(ct); } },
+                    style: {
+                      position: 'absolute', left: x, top: 4, width: STEP_W, height: STEP_H,
+                      background: isTerminal ? sc + '15' : isMe ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.02)',
+                      border: '1.5px solid ' + (isTerminal ? sc + '44' : isMe ? sc : 'rgba(255,255,255,0.1)'),
+                      borderRadius: isTerminal ? 22 : 10,
+                      display: 'flex', alignItems: 'center', gap: 8, padding: '0 10px',
+                      cursor: step.taskId ? 'pointer' : 'default',
+                    },
+                  },
+                    // Avatar
+                    h('div', { style: {
+                      width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
+                      background: isTerminal ? sc + '33' : step.isHuman || step.type === 'person' ? 'linear-gradient(135deg, #f59e0b, #f97316)' : step.type === 'system' ? 'rgba(255,255,255,0.1)' : 'linear-gradient(135deg, #6366f1, #8b5cf6)',
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      fontSize: isTerminal ? 12 : 10, fontWeight: 700,
+                      color: isTerminal ? sc : '#fff',
+                      border: '2px solid ' + (isTerminal ? sc + '44' : 'transparent'),
+                    } },
+                      isTerminal ? (step.status === 'completed' ? '\u2714' : step.status === 'failed' ? '\u2716' : '\u2716') : step.label.charAt(0).toUpperCase()
+                    ),
+                    // Info
+                    h('div', { style: { overflow: 'hidden', flex: 1, minWidth: 0 } },
+                      h('div', { style: { fontSize: 11, fontWeight: 600, color: isTerminal ? sc : '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, step.label),
+                      !isTerminal && h('div', { style: { fontSize: 9, color: 'var(--tp-text-dim)', marginTop: 1 } },
+                        step.type === 'person' || step.isHuman ? 'Human' : step.type === 'system' ? 'System' : 'Agent',
+                        step.duration ? ' \u00B7 ' + formatDuration(step.duration) : '',
+                        step.status === 'in_progress' && step.progress > 0 ? ' \u00B7 ' + step.progress + '%' : ''
+                      )
+                    )
+                  );
+                })
+              )
+            )
+          );
+        })()
       )
     ),
 
@@ -814,24 +854,16 @@ export function TaskPipelinePage() {
       padding: '10px 14px', pointerEvents: 'none', zIndex: 1000, minWidth: 180, maxWidth: 280,
     }},
       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: { fontSize: 12, fontWeight: 600, color: 'var(--tp-text)', 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 + '%'))
+        h('div', { style: { display: 'flex', justifyContent: 'space-between' } }, h('span', { style: { color: 'var(--tp-text-dim)' } }, 'Agent'), h('span', { style: { fontWeight: 600 } }, hoveredNode.task.assignedToName || '-')),
+        h('div', { style: { display: 'flex', justifyContent: 'space-between' } }, h('span', { style: { color: 'var(--tp-text-dim)' } }, '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: 'var(--tp-text-dim)' } }, '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: 'var(--tp-text-dim)' } }, '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: 'var(--tp-text-dim)' } }, 'Progress'), h('span', { style: { color: STATUS_COLORS.in_progress } }, hoveredNode.task.progress + '%'))
       )
     ),
 
-    // Inline chain flowchart (shown when a task is clicked)
-    expandedChain && expandedChain.length > 0 && h(ChainFlowInline, {
-      chain: expandedChain,
-      taskId: expandedTaskId,
-      onClose: function() { setExpandedTaskId(null); },
-      onClickTask: function(t) { openTaskDetail(t); }
-    }),
-
     // Detail modal (double-click)
     selectedTask && h(TaskDetail, { task: selectedTask, chain: selectedChain, onClose: function() { setSelectedTask(null); setSelectedChain(null); }, onCancel: cancelTask })
   );

package/src/engine/task-queue-routes.ts

@@ -28,9 +28,9 @@ export function createTaskQueueRoutes(taskQueue: TaskQueueManager) {
   });
 
   // GET /task-pipeline/stats — pipeline statistics
-  router.get('/stats', (c) => {
+  router.get('/stats', async (c) => {
     const orgId = c.req.query('orgId') || '';
-    const stats = taskQueue.getPipelineStats(orgId);
+    const stats = await taskQueue.getPipelineStats(orgId);
     return c.json(stats);
   });
 

package/src/engine/task-queue.ts

@@ -385,11 +385,11 @@ export class TaskQueueManager {
     return this.getAllTasks(orgId, limit);
   }
 
-  getPipelineStats(orgId?: string): {
+  async getPipelineStats(orgId?: string): Promise<{
     created: number; assigned: number; inProgress: number; completed: number; failed: number; cancelled: number; total: number;
     todayCompleted: number; todayFailed: number; todayCreated: number; avgDurationMs: number; totalCost: number; totalTokens: number;
     topAgents: Array<{ agent: string; name: string; completed: number; active: number }>;
-  } {
+  }> {
     const stats = {
       created: 0, assigned: 0, inProgress: 0, completed: 0, failed: 0, cancelled: 0, total: 0,
       todayCompleted: 0, todayFailed: 0, todayCreated: 0, avgDurationMs: 0, totalCost: 0, totalTokens: 0,
@@ -434,6 +434,34 @@ export class TaskQueueManager {
       .map(([agent, d]) => ({ agent, ...d }))
       .sort((a, b) => (b.completed + b.active) - (a.completed + a.active))
       .slice(0, 5);
+
+    // If DB available, also query today's stats from DB to catch anything not in memory
+    if (this.db) {
+      try {
+        const todayISO = todayStart.toISOString();
+        const dbToday = await this.db.get(
+          `SELECT COUNT(*) FILTER (WHERE status='completed' AND completed_at >= ?) as dc,
+                  COUNT(*) FILTER (WHERE status='failed' AND completed_at >= ?) as df,
+                  COUNT(*) FILTER (WHERE created_at >= ?) as dn
+           FROM task_pipeline` + (orgId ? ` WHERE org_id = ?` : ''),
+          orgId ? [todayISO, todayISO, todayISO, orgId] : [todayISO, todayISO, todayISO]
+        ).catch(() => null);
+        // Postgres FILTER may not work on all DBs, fallback to separate counts
+        if (!dbToday || dbToday.dc === undefined) {
+          const r1 = await this.db.get(`SELECT COUNT(*) as c FROM task_pipeline WHERE status='completed' AND completed_at >= ?`, [todayISO]).catch(() => null);
+          const r2 = await this.db.get(`SELECT COUNT(*) as c FROM task_pipeline WHERE status='failed' AND completed_at >= ?`, [todayISO]).catch(() => null);
+          const r3 = await this.db.get(`SELECT COUNT(*) as c FROM task_pipeline WHERE created_at >= ?`, [todayISO]).catch(() => null);
+          if (r1?.c > stats.todayCompleted) stats.todayCompleted = r1.c;
+          if (r2?.c > stats.todayFailed) stats.todayFailed = r2.c;
+          if (r3?.c > stats.todayCreated) stats.todayCreated = r3.c;
+        } else {
+          if (dbToday.dc > stats.todayCompleted) stats.todayCompleted = dbToday.dc;
+          if (dbToday.df > stats.todayFailed) stats.todayFailed = dbToday.df;
+          if (dbToday.dn > stats.todayCreated) stats.todayCreated = dbToday.dn;
+        }
+      } catch { /* ignore — in-memory stats are fine */ }
+    }
+
     return stats;
   }