@agenticmail/enterprise 0.5.213 → 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.213",
+  "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,32 +316,32 @@ 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)
         );
       })
     )
@@ -528,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.'),
@@ -554,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 } }),
@@ -570,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'),
@@ -578,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.')
     )
   );
 
@@ -600,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 }),
@@ -615,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 })
           );
         }),
@@ -704,17 +708,17 @@ 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' } })
             )
           );
@@ -751,15 +755,19 @@ export function TaskPipelinePage() {
 
           var totalW = steps.length * STEP_W + (steps.length - 1) * STEP_GAP;
 
-          return h('div', { style: { position: 'absolute', left: flowX, top: flowY, pointerEvents: 'auto' } },
+          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: 'rgba(10,12,20,0.85)', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 12, padding: '14px 16px 12px', backdropFilter: 'blur(8px)' } },
+            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: 'rgba(255,255,255,0.4)', letterSpacing: '0.06em' } }, 'TASK FLOW'),
+                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: 'rgba(255,255,255,0.3)', cursor: 'pointer', fontSize: 14, padding: '0 2px' } }, '\u00D7')
+                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 } },
@@ -823,7 +831,7 @@ export function TaskPipelinePage() {
                     // 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: 'rgba(255,255,255,0.35)', marginTop: 1 } },
+                      !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 + '%' : ''
@@ -846,13 +854,13 @@ 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 + '%'))
       )
     ),
 

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;
   }