@agenticmail/enterprise 0.5.215 → 0.5.217

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,13 +3,13 @@ import { I } from '../components/icons.js';
3
3
  import { HelpButton } from '../components/help-button.js';
4
4
 
5
5
  // ─── Constants ───────────────────────────────────────────
6
- var NODE_W = 200;
7
- var NODE_H = 64;
8
- var AGENT_W = 160;
9
- var AGENT_H = 52;
10
- var H_GAP = 48; // horizontal gap (left→right flow)
11
- var V_GAP = 24; // vertical gap between lanes
12
- var PAD = 40;
6
+ var NODE_W = 160;
7
+ var NODE_H = 48;
8
+ var AGENT_W = 130;
9
+ var AGENT_H = 40;
10
+ var H_GAP = 32; // horizontal gap (left→right flow)
11
+ var V_GAP = 12; // vertical gap between lanes
12
+ var PAD = 16;
13
13
 
14
14
  var STATUS_COLORS = { created: '#6366f1', assigned: '#f59e0b', in_progress: '#06b6d4', completed: '#22c55e', failed: '#ef4444', cancelled: '#6b7394' };
15
15
  var PRIORITY_COLORS = { urgent: '#ef4444', high: '#f59e0b', normal: '#6366f1', low: '#6b7394' };
@@ -116,7 +116,7 @@ function layoutChains(tasks) {
116
116
  title: firstTask.title,
117
117
  });
118
118
 
119
- y += maxH + V_GAP + 16; // extra space between chains
119
+ y += maxH + V_GAP + 8; // space between chains
120
120
  });
121
121
 
122
122
  // Layout orphans as simple rows per agent
@@ -151,7 +151,7 @@ function circularPath(from, to) {
151
151
  var y1 = from.y + from.h / 2;
152
152
  var x2 = to.x;
153
153
  var y2 = to.y + to.h / 2;
154
- var lift = 40;
154
+ var lift = 28;
155
155
  var topY = Math.min(y1, y2) - lift;
156
156
  return 'M ' + x1 + ' ' + y1 + ' C ' + (x1 + 50) + ' ' + topY + ', ' + (x2 - 50) + ' ' + topY + ', ' + x2 + ' ' + y2;
157
157
  }
@@ -383,14 +383,24 @@ export function TaskPipelinePage() {
383
383
  var mousePos = _mousePos[0]; var setMousePos = _mousePos[1];
384
384
  var containerRef = useRef(null);
385
385
 
386
+ var _agents = useState({});
387
+ var agentMap = _agents[0]; var setAgentMap = _agents[1];
388
+
386
389
  var loadData = useCallback(function() {
387
390
  setLoading(true);
388
391
  Promise.all([
389
392
  engineCall('/task-pipeline?limit=200'),
390
393
  engineCall('/task-pipeline/stats'),
394
+ engineCall('/agents?orgId=' + getOrgId()).catch(function() { return { agents: [] }; }),
391
395
  ]).then(function(res) {
392
396
  setTasks(res[0]?.tasks || []);
393
397
  setStats(res[1] || stats);
398
+ // Build agent avatar/name map
399
+ var map = {};
400
+ (res[2]?.agents || []).forEach(function(a) {
401
+ map[a.id] = { name: a.config?.name || a.id, avatar: a.config?.identity?.avatar || a.config?.avatar || a.config?.persona?.avatar || null };
402
+ });
403
+ setAgentMap(map);
394
404
  }).catch(function(err) { console.error('[TaskPipeline]', err); })
395
405
  .finally(function() { setLoading(false); });
396
406
  }, []);
@@ -518,7 +528,7 @@ export function TaskPipelinePage() {
518
528
  var scaleY = (rect.height - 40) / treeH;
519
529
  var scale = Math.min(scaleX, scaleY, 1.5);
520
530
  setZoom(scale);
521
- setPan({ x: (rect.width - treeW * scale) / 2, y: 20 });
531
+ setPan({ x: 16, y: 16 });
522
532
  }, [treeW, treeH]);
523
533
  useEffect(function() { if (nodes.length > 0) fitToView(); }, [nodes.length]);
524
534
 
@@ -696,8 +706,8 @@ export function TaskPipelinePage() {
696
706
  position: 'absolute', left: node.x, top: node.y, width: node.w, height: node.h,
697
707
  background: isHovered ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.02)',
698
708
  border: '1px solid ' + (isExpanded ? sc : isHovered || isChainHl ? sc + '66' : 'rgba(255,255,255,0.1)'),
699
- borderLeft: '3px solid ' + sc,
700
- borderRadius: 10, padding: '6px 10px', cursor: 'pointer',
709
+ /* borderLeft removed */
710
+ borderRadius: 6, padding: '4px 8px', cursor: 'pointer',
701
711
  transition: 'all 0.15s', opacity: dim ? 0.15 : 1,
702
712
  backdropFilter: 'blur(6px)',
703
713
  display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 3, userSelect: 'none',
@@ -705,10 +715,12 @@ export function TaskPipelinePage() {
705
715
  },
706
716
  // Agent + title row
707
717
  h('div', { style: { display: 'flex', alignItems: 'center', gap: 5 } },
708
- 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' } },
709
- (t.assignedToName || t.assignedTo || '?').charAt(0).toUpperCase()
710
- ),
711
- h('span', { style: { fontSize: 11, fontWeight: 600, color: 'var(--tp-text)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, t.title)
718
+ (agentMap[t.assignedTo] && agentMap[t.assignedTo].avatar)
719
+ ? h('img', { src: agentMap[t.assignedTo].avatar, style: { width: 16, height: 16, borderRadius: '50%', border: '1px solid ' + sc + '66', objectFit: 'cover', flexShrink: 0 } })
720
+ : 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, border: '1px solid ' + sc + '44' } },
721
+ (t.assignedToName || t.assignedTo || '?').charAt(0).toUpperCase()
722
+ ),
723
+ h('span', { style: { fontSize: 10, fontWeight: 600, color: 'var(--tp-text)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, t.title)
712
724
  ),
713
725
  // Status + agent name + time
714
726
  h('div', { style: { display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' } },
@@ -731,9 +743,9 @@ export function TaskPipelinePage() {
731
743
  if (!anchor) return null;
732
744
  var flowY = anchor.y + anchor.h + 20;
733
745
  var flowX = anchor.x;
734
- var STEP_W = 120;
735
- var STEP_H = 44;
736
- var STEP_GAP = 48;
746
+ var STEP_W = 100;
747
+ var STEP_H = 36;
748
+ var STEP_GAP = 32;
737
749
  var ARROW_W = STEP_GAP;
738
750
 
739
751
  // Build person-centric flow steps: createdBy → assignedTo for each chain task, then final status
@@ -818,16 +830,24 @@ export function TaskPipelinePage() {
818
830
  },
819
831
  },
820
832
  // Avatar
821
- h('div', { style: {
822
- width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
823
- 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)',
824
- display: 'flex', alignItems: 'center', justifyContent: 'center',
825
- fontSize: isTerminal ? 12 : 10, fontWeight: 700,
826
- color: isTerminal ? sc : '#fff',
827
- border: '2px solid ' + (isTerminal ? sc + '44' : 'transparent'),
828
- } },
829
- isTerminal ? (step.status === 'completed' ? '\u2714' : step.status === 'failed' ? '\u2716' : '\u2716') : step.label.charAt(0).toUpperCase()
830
- ),
833
+ (function() {
834
+ // Check if we have an agent avatar for this step
835
+ var stepAgent = step.taskId && expandedChain.find(function(c) { return c.id === step.taskId; });
836
+ var agentAvatar = stepAgent && agentMap[stepAgent.assignedTo] && agentMap[stepAgent.assignedTo].avatar;
837
+ if (!isTerminal && agentAvatar) {
838
+ return h('img', { src: agentAvatar, style: { width: 26, height: 26, borderRadius: '50%', border: '2px solid ' + sc + '44', objectFit: 'cover', flexShrink: 0 } });
839
+ }
840
+ return h('div', { style: {
841
+ width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
842
+ 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)',
843
+ display: 'flex', alignItems: 'center', justifyContent: 'center',
844
+ fontSize: isTerminal ? 12 : 10, fontWeight: 700,
845
+ color: isTerminal ? sc : '#fff',
846
+ border: '2px solid ' + (isTerminal ? sc + '44' : 'transparent'),
847
+ } },
848
+ isTerminal ? (step.status === 'completed' ? '\u2714' : '\u2716') : step.label.charAt(0).toUpperCase()
849
+ );
850
+ })(),
831
851
  // Info
832
852
  h('div', { style: { overflow: 'hidden', flex: 1, minWidth: 0 } },
833
853
  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() {
854
874
  padding: '10px 14px', pointerEvents: 'none', zIndex: 1000, minWidth: 180, maxWidth: 280,
855
875
  }},
856
876
  hoveredNode.task.customerContext && h(CustomerBadge, { customer: hoveredNode.task.customerContext }),
857
- h('div', { style: { fontSize: 12, fontWeight: 600, color: 'var(--tp-text)', marginBottom: 6 } }, hoveredNode.task.title),
877
+ h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 } },
878
+ (agentMap[hoveredNode.task.assignedTo] && agentMap[hoveredNode.task.assignedTo].avatar)
879
+ ? 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 } })
880
+ : null,
881
+ h('div', { style: { fontSize: 12, fontWeight: 600, color: 'var(--tp-text)' } }, hoveredNode.task.title)
882
+ ),
858
883
  h('div', { style: { display: 'flex', flexDirection: 'column', gap: 3, fontSize: 11 } },
859
884
  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 || '-')),
860
885
  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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agenticmail/enterprise",
3
- "version": "0.5.215",
3
+ "version": "0.5.217",
4
4
  "description": "AgenticMail Enterprise — cloud-hosted AI agent identity, email, auth & compliance for organizations",
5
5
  "type": "module",
6
6
  "bin": {
@@ -3,13 +3,13 @@ import { I } from '../components/icons.js';
3
3
  import { HelpButton } from '../components/help-button.js';
4
4
 
5
5
  // ─── Constants ───────────────────────────────────────────
6
- var NODE_W = 200;
7
- var NODE_H = 64;
8
- var AGENT_W = 160;
9
- var AGENT_H = 52;
10
- var H_GAP = 48; // horizontal gap (left→right flow)
11
- var V_GAP = 24; // vertical gap between lanes
12
- var PAD = 40;
6
+ var NODE_W = 160;
7
+ var NODE_H = 48;
8
+ var AGENT_W = 130;
9
+ var AGENT_H = 40;
10
+ var H_GAP = 32; // horizontal gap (left→right flow)
11
+ var V_GAP = 12; // vertical gap between lanes
12
+ var PAD = 16;
13
13
 
14
14
  var STATUS_COLORS = { created: '#6366f1', assigned: '#f59e0b', in_progress: '#06b6d4', completed: '#22c55e', failed: '#ef4444', cancelled: '#6b7394' };
15
15
  var PRIORITY_COLORS = { urgent: '#ef4444', high: '#f59e0b', normal: '#6366f1', low: '#6b7394' };
@@ -116,7 +116,7 @@ function layoutChains(tasks) {
116
116
  title: firstTask.title,
117
117
  });
118
118
 
119
- y += maxH + V_GAP + 16; // extra space between chains
119
+ y += maxH + V_GAP + 8; // space between chains
120
120
  });
121
121
 
122
122
  // Layout orphans as simple rows per agent
@@ -151,7 +151,7 @@ function circularPath(from, to) {
151
151
  var y1 = from.y + from.h / 2;
152
152
  var x2 = to.x;
153
153
  var y2 = to.y + to.h / 2;
154
- var lift = 40;
154
+ var lift = 28;
155
155
  var topY = Math.min(y1, y2) - lift;
156
156
  return 'M ' + x1 + ' ' + y1 + ' C ' + (x1 + 50) + ' ' + topY + ', ' + (x2 - 50) + ' ' + topY + ', ' + x2 + ' ' + y2;
157
157
  }
@@ -383,14 +383,24 @@ export function TaskPipelinePage() {
383
383
  var mousePos = _mousePos[0]; var setMousePos = _mousePos[1];
384
384
  var containerRef = useRef(null);
385
385
 
386
+ var _agents = useState({});
387
+ var agentMap = _agents[0]; var setAgentMap = _agents[1];
388
+
386
389
  var loadData = useCallback(function() {
387
390
  setLoading(true);
388
391
  Promise.all([
389
392
  engineCall('/task-pipeline?limit=200'),
390
393
  engineCall('/task-pipeline/stats'),
394
+ engineCall('/agents?orgId=' + getOrgId()).catch(function() { return { agents: [] }; }),
391
395
  ]).then(function(res) {
392
396
  setTasks(res[0]?.tasks || []);
393
397
  setStats(res[1] || stats);
398
+ // Build agent avatar/name map
399
+ var map = {};
400
+ (res[2]?.agents || []).forEach(function(a) {
401
+ map[a.id] = { name: a.config?.name || a.id, avatar: a.config?.identity?.avatar || a.config?.avatar || a.config?.persona?.avatar || null };
402
+ });
403
+ setAgentMap(map);
394
404
  }).catch(function(err) { console.error('[TaskPipeline]', err); })
395
405
  .finally(function() { setLoading(false); });
396
406
  }, []);
@@ -518,7 +528,7 @@ export function TaskPipelinePage() {
518
528
  var scaleY = (rect.height - 40) / treeH;
519
529
  var scale = Math.min(scaleX, scaleY, 1.5);
520
530
  setZoom(scale);
521
- setPan({ x: (rect.width - treeW * scale) / 2, y: 20 });
531
+ setPan({ x: 16, y: 16 });
522
532
  }, [treeW, treeH]);
523
533
  useEffect(function() { if (nodes.length > 0) fitToView(); }, [nodes.length]);
524
534
 
@@ -696,8 +706,8 @@ export function TaskPipelinePage() {
696
706
  position: 'absolute', left: node.x, top: node.y, width: node.w, height: node.h,
697
707
  background: isHovered ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.02)',
698
708
  border: '1px solid ' + (isExpanded ? sc : isHovered || isChainHl ? sc + '66' : 'rgba(255,255,255,0.1)'),
699
- borderLeft: '3px solid ' + sc,
700
- borderRadius: 10, padding: '6px 10px', cursor: 'pointer',
709
+ /* borderLeft removed */
710
+ borderRadius: 6, padding: '4px 8px', cursor: 'pointer',
701
711
  transition: 'all 0.15s', opacity: dim ? 0.15 : 1,
702
712
  backdropFilter: 'blur(6px)',
703
713
  display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 3, userSelect: 'none',
@@ -705,10 +715,12 @@ export function TaskPipelinePage() {
705
715
  },
706
716
  // Agent + title row
707
717
  h('div', { style: { display: 'flex', alignItems: 'center', gap: 5 } },
708
- 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' } },
709
- (t.assignedToName || t.assignedTo || '?').charAt(0).toUpperCase()
710
- ),
711
- h('span', { style: { fontSize: 11, fontWeight: 600, color: 'var(--tp-text)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, t.title)
718
+ (agentMap[t.assignedTo] && agentMap[t.assignedTo].avatar)
719
+ ? h('img', { src: agentMap[t.assignedTo].avatar, style: { width: 16, height: 16, borderRadius: '50%', border: '1px solid ' + sc + '66', objectFit: 'cover', flexShrink: 0 } })
720
+ : 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, border: '1px solid ' + sc + '44' } },
721
+ (t.assignedToName || t.assignedTo || '?').charAt(0).toUpperCase()
722
+ ),
723
+ h('span', { style: { fontSize: 10, fontWeight: 600, color: 'var(--tp-text)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, t.title)
712
724
  ),
713
725
  // Status + agent name + time
714
726
  h('div', { style: { display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' } },
@@ -731,9 +743,9 @@ export function TaskPipelinePage() {
731
743
  if (!anchor) return null;
732
744
  var flowY = anchor.y + anchor.h + 20;
733
745
  var flowX = anchor.x;
734
- var STEP_W = 120;
735
- var STEP_H = 44;
736
- var STEP_GAP = 48;
746
+ var STEP_W = 100;
747
+ var STEP_H = 36;
748
+ var STEP_GAP = 32;
737
749
  var ARROW_W = STEP_GAP;
738
750
 
739
751
  // Build person-centric flow steps: createdBy → assignedTo for each chain task, then final status
@@ -818,16 +830,24 @@ export function TaskPipelinePage() {
818
830
  },
819
831
  },
820
832
  // Avatar
821
- h('div', { style: {
822
- width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
823
- 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)',
824
- display: 'flex', alignItems: 'center', justifyContent: 'center',
825
- fontSize: isTerminal ? 12 : 10, fontWeight: 700,
826
- color: isTerminal ? sc : '#fff',
827
- border: '2px solid ' + (isTerminal ? sc + '44' : 'transparent'),
828
- } },
829
- isTerminal ? (step.status === 'completed' ? '\u2714' : step.status === 'failed' ? '\u2716' : '\u2716') : step.label.charAt(0).toUpperCase()
830
- ),
833
+ (function() {
834
+ // Check if we have an agent avatar for this step
835
+ var stepAgent = step.taskId && expandedChain.find(function(c) { return c.id === step.taskId; });
836
+ var agentAvatar = stepAgent && agentMap[stepAgent.assignedTo] && agentMap[stepAgent.assignedTo].avatar;
837
+ if (!isTerminal && agentAvatar) {
838
+ return h('img', { src: agentAvatar, style: { width: 26, height: 26, borderRadius: '50%', border: '2px solid ' + sc + '44', objectFit: 'cover', flexShrink: 0 } });
839
+ }
840
+ return h('div', { style: {
841
+ width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
842
+ 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)',
843
+ display: 'flex', alignItems: 'center', justifyContent: 'center',
844
+ fontSize: isTerminal ? 12 : 10, fontWeight: 700,
845
+ color: isTerminal ? sc : '#fff',
846
+ border: '2px solid ' + (isTerminal ? sc + '44' : 'transparent'),
847
+ } },
848
+ isTerminal ? (step.status === 'completed' ? '\u2714' : '\u2716') : step.label.charAt(0).toUpperCase()
849
+ );
850
+ })(),
831
851
  // Info
832
852
  h('div', { style: { overflow: 'hidden', flex: 1, minWidth: 0 } },
833
853
  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() {
854
874
  padding: '10px 14px', pointerEvents: 'none', zIndex: 1000, minWidth: 180, maxWidth: 280,
855
875
  }},
856
876
  hoveredNode.task.customerContext && h(CustomerBadge, { customer: hoveredNode.task.customerContext }),
857
- h('div', { style: { fontSize: 12, fontWeight: 600, color: 'var(--tp-text)', marginBottom: 6 } }, hoveredNode.task.title),
877
+ h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 } },
878
+ (agentMap[hoveredNode.task.assignedTo] && agentMap[hoveredNode.task.assignedTo].avatar)
879
+ ? 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 } })
880
+ : null,
881
+ h('div', { style: { fontSize: 12, fontWeight: 600, color: 'var(--tp-text)' } }, hoveredNode.task.title)
882
+ ),
858
883
  h('div', { style: { display: 'flex', flexDirection: 'column', gap: 3, fontSize: 11 } },
859
884
  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 || '-')),
860
885
  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('_', ' '))),