@agenticmail/enterprise 0.5.214 → 0.5.216

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

@@ -383,14 +383,24 @@ export function TaskPipelinePage() {
   var mousePos = _mousePos[0]; var setMousePos = _mousePos[1];
   var containerRef = useRef(null);
 
+  var _agents = useState({});
+  var agentMap = _agents[0]; var setAgentMap = _agents[1];
+
   var loadData = useCallback(function() {
     setLoading(true);
     Promise.all([
       engineCall('/task-pipeline?limit=200'),
       engineCall('/task-pipeline/stats'),
+      engineCall('/agents?orgId=' + getOrgId()).catch(function() { return { agents: [] }; }),
     ]).then(function(res) {
       setTasks(res[0]?.tasks || []);
       setStats(res[1] || stats);
+      // Build agent avatar/name map
+      var map = {};
+      (res[2]?.agents || []).forEach(function(a) {
+        map[a.id] = { name: a.config?.name || a.id, avatar: a.config?.identity?.avatar || a.config?.avatar || a.config?.persona?.avatar || null };
+      });
+      setAgentMap(map);
     }).catch(function(err) { console.error('[TaskPipeline]', err); })
       .finally(function() { setLoading(false); });
   }, []);
@@ -518,7 +528,7 @@ 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: 20 });
+    setPan({ x: 16, y: 16 });
   }, [treeW, treeH]);
   useEffect(function() { if (nodes.length > 0) fitToView(); }, [nodes.length]);
 
@@ -705,9 +715,11 @@ export function TaskPipelinePage() {
           },
             // 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()
-              ),
+              (agentMap[t.assignedTo] && agentMap[t.assignedTo].avatar)
+                ? h('img', { src: agentMap[t.assignedTo].avatar, style: { width: 20, height: 20, borderRadius: '50%', border: '1.5px solid ' + sc + '66', objectFit: 'cover', flexShrink: 0 } })
+                : h('div', { style: { width: 20, height: 20, 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: 'var(--tp-text)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, t.title)
             ),
             // Status + agent name + time
@@ -818,16 +830,24 @@ export function TaskPipelinePage() {
                     },
                   },
                     // 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()
-                    ),
+                    (function() {
+                      // Check if we have an agent avatar for this step
+                      var stepAgent = step.taskId && expandedChain.find(function(c) { return c.id === step.taskId; });
+                      var agentAvatar = stepAgent && agentMap[stepAgent.assignedTo] && agentMap[stepAgent.assignedTo].avatar;
+                      if (!isTerminal && agentAvatar) {
+                        return h('img', { src: agentAvatar, style: { width: 26, height: 26, borderRadius: '50%', border: '2px solid ' + sc + '44', objectFit: 'cover', flexShrink: 0 } });
+                      }
+                      return 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' ? 'var(--tp-card)' : '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' : '\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),
@@ -854,7 +874,12 @@ 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: 'var(--tp-text)', marginBottom: 6 } }, hoveredNode.task.title),
+      h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 } },
+        (agentMap[hoveredNode.task.assignedTo] && agentMap[hoveredNode.task.assignedTo].avatar)
+          ? h('img', { src: agentMap[hoveredNode.task.assignedTo].avatar, style: { width: 22, height: 22, borderRadius: '50%', border: '1.5px solid ' + (STATUS_COLORS[hoveredNode.task.status] || '#6366f1'), objectFit: 'cover', flexShrink: 0 } })
+          : null,
+        h('div', { style: { fontSize: 12, fontWeight: 600, color: 'var(--tp-text)' } }, 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: '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('_', ' '))),

package/package.json

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