@agenticmail/enterprise 0.5.218 → 0.5.220

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.
Files changed (3) hide show
  1. package/dist/dashboard/pages/task-pipeline.js +34 -18
  2. package/package.json +1 -1
  3. package/src/dashboard/pages/task-pipeline.js +34 -18
package/dist/dashboard/pages/task-pipeline.js CHANGED
@@ -532,6 +532,17 @@ export function TaskPipelinePage() {
532
532
  }, [treeW, treeH]);
533
533
  useEffect(function() { if (nodes.length > 0) fitToView(); }, [nodes.length]);
534
534
 
535
+ // Auto-pan to first active (in_progress) task so it's always visible
536
+ useEffect(function() {
537
+ if (!containerRef.current || !nodes.length) return;
538
+ var activeNode = nodes.find(function(n) { return n.task && n.task.status === 'in_progress'; });
539
+ if (!activeNode) return;
540
+ var rect = containerRef.current.getBoundingClientRect();
541
+ var targetX = -(activeNode.x * zoom) + rect.width * 0.3;
542
+ var targetY = -(activeNode.y * zoom) + rect.height * 0.4;
543
+ setPan({ x: Math.min(targetX, 16), y: Math.min(targetY, 16) });
544
+ }, [nodes.length, zoom]);
545
+
535
546
  // Highlight connected chain on hover
536
547
  var hoveredChainId = null;
537
548
  if (hoveredId) {
@@ -773,11 +784,11 @@ export function TaskPipelinePage() {
773
784
 
774
785
  return h('div', { style: { position: 'absolute', left: flowX, top: flowY, pointerEvents: 'auto', maxWidth: maxFlowW, zIndex: 20 } },
775
786
  // Background card
776
- 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' } },
787
+ h('div', { style: { background: 'var(--bg-primary, rgba(10,12,20,0.95))', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 8, padding: '8px 10px 8px', backdropFilter: 'blur(8px)', overflowX: 'auto', overflowY: 'hidden' } },
777
788
  // Header
778
- h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 } },
779
- h('span', { style: { fontSize: 10, fontWeight: 600, color: 'var(--tp-text-dim)', letterSpacing: '0.06em' } }, 'TASK FLOW'),
780
- 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)),
789
+ h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 } },
790
+ h('span', { style: { fontSize: 9, fontWeight: 600, color: 'var(--tp-text-dim)', letterSpacing: '0.06em' } }, 'TASK FLOW'),
791
+ expandedChain[0].chainId && h('span', { style: { fontSize: 8, color: 'rgba(255,255,255,0.2)', fontFamily: 'var(--font-mono)' } }, '#' + expandedChain[0].chainId.slice(0, 8)),
781
792
  h('div', { style: { flex: 1 } }),
782
793
  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')
783
794
  ),
@@ -786,8 +797,11 @@ export function TaskPipelinePage() {
786
797
  // SVG arrows
787
798
  h('svg', { width: totalW, height: STEP_H + 8, style: { position: 'absolute', top: 0, left: 0, pointerEvents: 'none' } },
788
799
  h('defs', null,
789
- h('marker', { id: 'fc-arr', markerWidth: 6, markerHeight: 4, refX: 6, refY: 2, orient: 'auto' },
790
- h('polygon', { points: '0 0, 6 2, 0 4', fill: 'rgba(99,102,241,0.5)' })
800
+ h('marker', { id: 'fc-arr', markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: 'auto' },
801
+ h('polygon', { points: '0 0, 8 3, 0 6', fill: 'var(--tp-text-dim, rgba(99,102,241,0.6))' })
802
+ ),
803
+ h('marker', { id: 'fc-arr-active', markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: 'auto' },
804
+ h('polygon', { points: '0 0, 8 3, 0 6', fill: STATUS_COLORS.in_progress })
791
805
  )
792
806
  ),
793
807
  steps.map(function(step, i) {
@@ -798,9 +812,11 @@ export function TaskPipelinePage() {
798
812
  var arrowColor = DELEGATION_COLORS[step.arrow] || 'rgba(99,102,241,0.5)';
799
813
  var nextStep = steps[i + 1];
800
814
  var isFlowActive = step.status === 'in_progress' || (nextStep && nextStep.status === 'in_progress');
815
+ var midX = x1 + (x2 - x1) * 0.5;
816
+ var d = 'M ' + x1 + ' ' + y + ' C ' + midX + ' ' + y + ', ' + midX + ' ' + y + ', ' + x2 + ' ' + y;
801
817
  return h(Fragment, { key: 'a' + i },
802
- h('line', { x1: x1, y1: y, x2: x2, y2: y, stroke: arrowColor + '88', strokeWidth: 2, markerEnd: 'url(#fc-arr)' }),
803
- 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 } }),
818
+ h('path', { d: d, stroke: arrowColor, strokeWidth: 2, fill: 'none', markerEnd: 'url(#fc-arr)' }),
819
+ isFlowActive && h('path', { d: d, stroke: STATUS_COLORS.in_progress, strokeWidth: 2, fill: 'none', strokeDasharray: '4 12', className: 'tp-flow-active', style: { opacity: 0.7 }, markerEnd: 'url(#fc-arr-active)' }),
804
820
  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)
805
821
  );
806
822
  })
@@ -821,11 +837,11 @@ export function TaskPipelinePage() {
821
837
  className: 'tp-node',
822
838
  onClick: function(e) { e.stopPropagation(); if (step.taskId) { var ct = expandedChain.find(function(c) { return c.id === step.taskId; }); if (ct) openTaskDetail(ct); } },
823
839
  style: {
824
- position: 'absolute', left: x, top: 4, width: STEP_W, height: STEP_H,
840
+ position: 'absolute', left: x, top: 4, width: isTerminal ? 'auto' : STEP_W, minWidth: isTerminal ? 90 : undefined, height: STEP_H,
825
841
  background: isTerminal ? sc + '15' : isMe ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.02)',
826
- border: '1.5px solid ' + (isTerminal ? sc + '44' : isMe ? sc : 'rgba(255,255,255,0.1)'),
827
- borderRadius: isTerminal ? 22 : 10,
828
- display: 'flex', alignItems: 'center', gap: 8, padding: '0 10px',
842
+ border: '1px solid ' + (isTerminal ? sc + '44' : isMe ? sc : 'rgba(255,255,255,0.1)'),
843
+ borderRadius: isTerminal ? 18 : 6,
844
+ display: 'flex', alignItems: 'center', gap: 6, padding: '0 8px',
829
845
  cursor: step.taskId ? 'pointer' : 'default',
830
846
  },
831
847
  },
@@ -835,23 +851,23 @@ export function TaskPipelinePage() {
835
851
  var stepAgent = step.taskId && expandedChain.find(function(c) { return c.id === step.taskId; });
836
852
  var agentAvatar = stepAgent && agentMap[stepAgent.assignedTo] && agentMap[stepAgent.assignedTo].avatar;
837
853
  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 } });
854
+ return h('img', { src: agentAvatar, style: { width: 18, height: 18, borderRadius: '50%', border: '1px solid ' + sc + '44', objectFit: 'cover', flexShrink: 0 } });
839
855
  }
840
856
  return h('div', { style: {
841
- width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
857
+ width: 18, height: 18, borderRadius: '50%', flexShrink: 0,
842
858
  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
859
  display: 'flex', alignItems: 'center', justifyContent: 'center',
844
- fontSize: isTerminal ? 12 : 10, fontWeight: 700,
860
+ fontSize: isTerminal ? 10 : 8, fontWeight: 700,
845
861
  color: isTerminal ? sc : '#fff',
846
- border: '2px solid ' + (isTerminal ? sc + '44' : 'transparent'),
862
+ border: '1px solid ' + (isTerminal ? sc + '44' : 'transparent'),
847
863
  } },
848
864
  isTerminal ? (step.status === 'completed' ? '\u2714' : '\u2716') : step.label.charAt(0).toUpperCase()
849
865
  );
850
866
  })(),
851
867
  // Info
852
868
  h('div', { style: { overflow: 'hidden', flex: 1, minWidth: 0 } },
853
- h('div', { style: { fontSize: 11, fontWeight: 600, color: isTerminal ? sc : '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, step.label),
854
- !isTerminal && h('div', { style: { fontSize: 9, color: 'var(--tp-text-dim)', marginTop: 1 } },
869
+ h('div', { style: { fontSize: 10, fontWeight: 600, color: isTerminal ? sc : 'var(--tp-text)', whiteSpace: 'nowrap', overflow: isTerminal ? 'visible' : 'hidden', textOverflow: isTerminal ? 'unset' : 'ellipsis' } }, step.label),
870
+ !isTerminal && h('div', { style: { fontSize: 8, color: 'var(--tp-text-dim)', marginTop: 1 } },
855
871
  step.type === 'person' || step.isHuman ? 'Human' : step.type === 'system' ? 'System' : 'Agent',
856
872
  step.duration ? ' \u00B7 ' + formatDuration(step.duration) : '',
857
873
  step.status === 'in_progress' && step.progress > 0 ? ' \u00B7 ' + step.progress + '%' : ''
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agenticmail/enterprise",
3
- "version": "0.5.218",
3
+ "version": "0.5.220",
4
4
  "description": "AgenticMail Enterprise — cloud-hosted AI agent identity, email, auth & compliance for organizations",
5
5
  "type": "module",
6
6
  "bin": {
package/src/dashboard/pages/task-pipeline.js CHANGED
@@ -532,6 +532,17 @@ export function TaskPipelinePage() {
532
532
  }, [treeW, treeH]);
533
533
  useEffect(function() { if (nodes.length > 0) fitToView(); }, [nodes.length]);
534
534
 
535
+ // Auto-pan to first active (in_progress) task so it's always visible
536
+ useEffect(function() {
537
+ if (!containerRef.current || !nodes.length) return;
538
+ var activeNode = nodes.find(function(n) { return n.task && n.task.status === 'in_progress'; });
539
+ if (!activeNode) return;
540
+ var rect = containerRef.current.getBoundingClientRect();
541
+ var targetX = -(activeNode.x * zoom) + rect.width * 0.3;
542
+ var targetY = -(activeNode.y * zoom) + rect.height * 0.4;
543
+ setPan({ x: Math.min(targetX, 16), y: Math.min(targetY, 16) });
544
+ }, [nodes.length, zoom]);
545
+
535
546
  // Highlight connected chain on hover
536
547
  var hoveredChainId = null;
537
548
  if (hoveredId) {
@@ -773,11 +784,11 @@ export function TaskPipelinePage() {
773
784
 
774
785
  return h('div', { style: { position: 'absolute', left: flowX, top: flowY, pointerEvents: 'auto', maxWidth: maxFlowW, zIndex: 20 } },
775
786
  // Background card
776
- 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' } },
787
+ h('div', { style: { background: 'var(--bg-primary, rgba(10,12,20,0.95))', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 8, padding: '8px 10px 8px', backdropFilter: 'blur(8px)', overflowX: 'auto', overflowY: 'hidden' } },
777
788
  // Header
778
- h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 } },
779
- h('span', { style: { fontSize: 10, fontWeight: 600, color: 'var(--tp-text-dim)', letterSpacing: '0.06em' } }, 'TASK FLOW'),
780
- 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)),
789
+ h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 } },
790
+ h('span', { style: { fontSize: 9, fontWeight: 600, color: 'var(--tp-text-dim)', letterSpacing: '0.06em' } }, 'TASK FLOW'),
791
+ expandedChain[0].chainId && h('span', { style: { fontSize: 8, color: 'rgba(255,255,255,0.2)', fontFamily: 'var(--font-mono)' } }, '#' + expandedChain[0].chainId.slice(0, 8)),
781
792
  h('div', { style: { flex: 1 } }),
782
793
  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')
783
794
  ),
@@ -786,8 +797,11 @@ export function TaskPipelinePage() {
786
797
  // SVG arrows
787
798
  h('svg', { width: totalW, height: STEP_H + 8, style: { position: 'absolute', top: 0, left: 0, pointerEvents: 'none' } },
788
799
  h('defs', null,
789
- h('marker', { id: 'fc-arr', markerWidth: 6, markerHeight: 4, refX: 6, refY: 2, orient: 'auto' },
790
- h('polygon', { points: '0 0, 6 2, 0 4', fill: 'rgba(99,102,241,0.5)' })
800
+ h('marker', { id: 'fc-arr', markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: 'auto' },
801
+ h('polygon', { points: '0 0, 8 3, 0 6', fill: 'var(--tp-text-dim, rgba(99,102,241,0.6))' })
802
+ ),
803
+ h('marker', { id: 'fc-arr-active', markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: 'auto' },
804
+ h('polygon', { points: '0 0, 8 3, 0 6', fill: STATUS_COLORS.in_progress })
791
805
  )
792
806
  ),
793
807
  steps.map(function(step, i) {
@@ -798,9 +812,11 @@ export function TaskPipelinePage() {
798
812
  var arrowColor = DELEGATION_COLORS[step.arrow] || 'rgba(99,102,241,0.5)';
799
813
  var nextStep = steps[i + 1];
800
814
  var isFlowActive = step.status === 'in_progress' || (nextStep && nextStep.status === 'in_progress');
815
+ var midX = x1 + (x2 - x1) * 0.5;
816
+ var d = 'M ' + x1 + ' ' + y + ' C ' + midX + ' ' + y + ', ' + midX + ' ' + y + ', ' + x2 + ' ' + y;
801
817
  return h(Fragment, { key: 'a' + i },
802
- h('line', { x1: x1, y1: y, x2: x2, y2: y, stroke: arrowColor + '88', strokeWidth: 2, markerEnd: 'url(#fc-arr)' }),
803
- 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 } }),
818
+ h('path', { d: d, stroke: arrowColor, strokeWidth: 2, fill: 'none', markerEnd: 'url(#fc-arr)' }),
819
+ isFlowActive && h('path', { d: d, stroke: STATUS_COLORS.in_progress, strokeWidth: 2, fill: 'none', strokeDasharray: '4 12', className: 'tp-flow-active', style: { opacity: 0.7 }, markerEnd: 'url(#fc-arr-active)' }),
804
820
  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)
805
821
  );
806
822
  })
@@ -821,11 +837,11 @@ export function TaskPipelinePage() {
821
837
  className: 'tp-node',
822
838
  onClick: function(e) { e.stopPropagation(); if (step.taskId) { var ct = expandedChain.find(function(c) { return c.id === step.taskId; }); if (ct) openTaskDetail(ct); } },
823
839
  style: {
824
- position: 'absolute', left: x, top: 4, width: STEP_W, height: STEP_H,
840
+ position: 'absolute', left: x, top: 4, width: isTerminal ? 'auto' : STEP_W, minWidth: isTerminal ? 90 : undefined, height: STEP_H,
825
841
  background: isTerminal ? sc + '15' : isMe ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.02)',
826
- border: '1.5px solid ' + (isTerminal ? sc + '44' : isMe ? sc : 'rgba(255,255,255,0.1)'),
827
- borderRadius: isTerminal ? 22 : 10,
828
- display: 'flex', alignItems: 'center', gap: 8, padding: '0 10px',
842
+ border: '1px solid ' + (isTerminal ? sc + '44' : isMe ? sc : 'rgba(255,255,255,0.1)'),
843
+ borderRadius: isTerminal ? 18 : 6,
844
+ display: 'flex', alignItems: 'center', gap: 6, padding: '0 8px',
829
845
  cursor: step.taskId ? 'pointer' : 'default',
830
846
  },
831
847
  },
@@ -835,23 +851,23 @@ export function TaskPipelinePage() {
835
851
  var stepAgent = step.taskId && expandedChain.find(function(c) { return c.id === step.taskId; });
836
852
  var agentAvatar = stepAgent && agentMap[stepAgent.assignedTo] && agentMap[stepAgent.assignedTo].avatar;
837
853
  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 } });
854
+ return h('img', { src: agentAvatar, style: { width: 18, height: 18, borderRadius: '50%', border: '1px solid ' + sc + '44', objectFit: 'cover', flexShrink: 0 } });
839
855
  }
840
856
  return h('div', { style: {
841
- width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
857
+ width: 18, height: 18, borderRadius: '50%', flexShrink: 0,
842
858
  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
859
  display: 'flex', alignItems: 'center', justifyContent: 'center',
844
- fontSize: isTerminal ? 12 : 10, fontWeight: 700,
860
+ fontSize: isTerminal ? 10 : 8, fontWeight: 700,
845
861
  color: isTerminal ? sc : '#fff',
846
- border: '2px solid ' + (isTerminal ? sc + '44' : 'transparent'),
862
+ border: '1px solid ' + (isTerminal ? sc + '44' : 'transparent'),
847
863
  } },
848
864
  isTerminal ? (step.status === 'completed' ? '\u2714' : '\u2716') : step.label.charAt(0).toUpperCase()
849
865
  );
850
866
  })(),
851
867
  // Info
852
868
  h('div', { style: { overflow: 'hidden', flex: 1, minWidth: 0 } },
853
- h('div', { style: { fontSize: 11, fontWeight: 600, color: isTerminal ? sc : '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, step.label),
854
- !isTerminal && h('div', { style: { fontSize: 9, color: 'var(--tp-text-dim)', marginTop: 1 } },
869
+ h('div', { style: { fontSize: 10, fontWeight: 600, color: isTerminal ? sc : 'var(--tp-text)', whiteSpace: 'nowrap', overflow: isTerminal ? 'visible' : 'hidden', textOverflow: isTerminal ? 'unset' : 'ellipsis' } }, step.label),
870
+ !isTerminal && h('div', { style: { fontSize: 8, color: 'var(--tp-text-dim)', marginTop: 1 } },
855
871
  step.type === 'person' || step.isHuman ? 'Human' : step.type === 'system' ? 'System' : 'Agent',
856
872
  step.duration ? ' \u00B7 ' + formatDuration(step.duration) : '',
857
873
  step.status === 'in_progress' && step.progress > 0 ? ' \u00B7 ' + step.progress + '%' : ''