@agenticmail/enterprise 0.5.199 → 0.5.201

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

@@ -0,0 +1,455 @@
+import { h, useState, useEffect, useCallback, useRef, Fragment, useApp, engineCall, getOrgId } from '../components/utils.js';
+import { I } from '../components/icons.js';
+import { HelpButton } from '../components/help-button.js';
+
+// ─── Colors ──────────────────────────────────────────────
+const STATUS_COLORS = {
+  created: '#6366f1',
+  assigned: '#f59e0b',
+  in_progress: '#06b6d4',
+  completed: '#22c55e',
+  failed: '#ef4444',
+  cancelled: '#6b7394',
+};
+const PRIORITY_COLORS = { urgent: '#ef4444', high: '#f59e0b', normal: '#6366f1', low: '#6b7394' };
+const CATEGORY_ICONS = { email: '\u2709', research: '\uD83D\uDD0D', meeting: '\uD83D\uDCC5', workflow: '\u2699', writing: '\u270F', deployment: '\uD83D\uDE80', review: '\u2714', monitoring: '\uD83D\uDCE1', custom: '\uD83D\uDCCB' };
+const BG = '#0a0c14';
+const ACCENT = '#6366f1';
+
+// ─── Styles ──────────────────────────────────────────────
+const _h4 = { marginTop: 16, marginBottom: 8, fontSize: 14 };
+const _ul = { paddingLeft: 20, margin: '4px 0 8px' };
+const _tip = { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 };
+
+// ─── Pipeline Columns (Kanban) ───────────────────────────
+const COLUMNS = [
+  { key: 'created', label: 'Queued', color: STATUS_COLORS.created },
+  { key: 'assigned', label: 'Assigned', color: STATUS_COLORS.assigned },
+  { key: 'in_progress', label: 'In Progress', color: STATUS_COLORS.in_progress },
+  { key: 'completed', label: 'Completed', color: STATUS_COLORS.completed },
+  { key: 'failed', label: 'Failed', color: STATUS_COLORS.failed },
+];
+
+function formatDuration(ms) {
+  if (!ms) return '-';
+  var s = Math.floor(ms / 1000);
+  if (s < 60) return s + 's';
+  var m = Math.floor(s / 60);
+  if (m < 60) return m + 'm ' + (s % 60) + 's';
+  var hr = Math.floor(m / 60);
+  return hr + 'h ' + (m % 60) + 'm';
+}
+
+function timeAgo(ts) {
+  if (!ts) return '-';
+  var diff = Date.now() - new Date(ts).getTime();
+  if (diff < 5000) return 'just now';
+  if (diff < 60000) return Math.floor(diff / 1000) + 's ago';
+  if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
+  if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
+  return Math.floor(diff / 86400000) + 'd ago';
+}
+
+// ─── Task Card Component ─────────────────────────────────
+function TaskCard({ task, onSelect }) {
+  var priColor = PRIORITY_COLORS[task.priority] || PRIORITY_COLORS.normal;
+  var catIcon = CATEGORY_ICONS[task.category] || CATEGORY_ICONS.custom;
+
+  return h('div', {
+    onClick: function() { onSelect(task); },
+    style: {
+      background: 'var(--bg-secondary, #111827)',
+      border: '1px solid var(--border, #1e293b)',
+      borderLeft: '3px solid ' + priColor,
+      borderRadius: 'var(--radius, 8px)',
+      padding: 12,
+      marginBottom: 8,
+      cursor: 'pointer',
+      transition: 'transform 0.1s, box-shadow 0.1s',
+    },
+    onMouseEnter: function(e) { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.3)'; },
+    onMouseLeave: function(e) { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; },
+  },
+    // Header: icon + title
+    h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 } },
+      h('span', { style: { fontSize: 14 } }, catIcon),
+      h('span', { style: { fontSize: 13, fontWeight: 600, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, task.title)
+    ),
+    // Agent + time
+    h('div', { style: { display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-muted)' } },
+      h('span', null, task.assignedToName || task.assignedTo || '-'),
+      h('span', null, timeAgo(task.createdAt))
+    ),
+    // Progress bar (if in progress)
+    task.status === 'in_progress' && task.progress > 0 && h('div', { style: { marginTop: 6, height: 3, background: 'var(--border)', borderRadius: 2, overflow: 'hidden' } },
+      h('div', { style: { height: '100%', width: task.progress + '%', background: STATUS_COLORS.in_progress, borderRadius: 2, transition: 'width 0.3s' } })
+    ),
+    // Tags
+    task.tags && task.tags.length > 0 && h('div', { style: { display: 'flex', gap: 4, marginTop: 6, flexWrap: 'wrap' } },
+      task.tags.map(function(tag) {
+        return h('span', { key: tag, style: { fontSize: 10, padding: '1px 6px', borderRadius: 10, background: 'var(--accent-soft, rgba(99,102,241,0.15))', color: 'var(--accent, #6366f1)' } }, tag);
+      })
+    )
+  );
+}
+
+// ─── Task Detail Modal ───────────────────────────────────
+function TaskDetail({ task, onClose, onCancel }) {
+  if (!task) return null;
+  var statusColor = STATUS_COLORS[task.status] || '#6b7394';
+
+  return h('div', { className: 'modal-overlay', onClick: onClose },
+    h('div', { className: 'modal', onClick: function(e) { e.stopPropagation(); }, style: { width: 560, maxHeight: '80vh', overflow: 'auto' } },
+      h('div', { className: 'modal-header' },
+        h('h2', null, task.title),
+        h('button', { className: 'btn btn-ghost btn-icon', onClick: onClose }, '\u00D7')
+      ),
+      h('div', { className: 'modal-body', style: { padding: 20 } },
+        // Status badge
+        h('div', { style: { display: 'flex', gap: 8, marginBottom: 16, alignItems: 'center' } },
+          h('span', { style: { padding: '3px 10px', borderRadius: 12, fontSize: 12, fontWeight: 600, background: statusColor + '22', color: statusColor, border: '1px solid ' + statusColor + '44' } },
+            task.status.replace('_', ' ').toUpperCase()
+          ),
+          h('span', { style: { padding: '3px 10px', borderRadius: 12, fontSize: 12, background: (PRIORITY_COLORS[task.priority] || '#6366f1') + '22', color: PRIORITY_COLORS[task.priority] || '#6366f1' } },
+            task.priority.toUpperCase()
+          ),
+          h('span', { style: { padding: '3px 10px', borderRadius: 12, fontSize: 12, background: 'var(--bg-tertiary)', color: 'var(--text-muted)' } },
+            (CATEGORY_ICONS[task.category] || '') + ' ' + task.category
+          )
+        ),
+
+        // Description
+        task.description && h('div', { style: { marginBottom: 16, fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)' } }, task.description),
+
+        // Progress
+        task.status === 'in_progress' && h('div', { style: { marginBottom: 16 } },
+          h('div', { style: { display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 } },
+            h('span', null, 'Progress'),
+            h('span', null, task.progress + '%')
+          ),
+          h('div', { style: { height: 6, background: 'var(--border)', borderRadius: 3, overflow: 'hidden' } },
+            h('div', { style: { height: '100%', width: task.progress + '%', background: STATUS_COLORS.in_progress, borderRadius: 3 } })
+          )
+        ),
+
+        // Metadata grid
+        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 24px', fontSize: 13, marginBottom: 16 } },
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Assigned To'), h('div', null, task.assignedToName || task.assignedTo || '-')),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Created By'), h('div', null, task.createdByName || task.createdBy || '-')),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Created'), h('div', null, task.createdAt ? new Date(task.createdAt).toLocaleString() : '-')),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Started'), h('div', null, task.startedAt ? new Date(task.startedAt).toLocaleString() : '-')),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Completed'), h('div', null, task.completedAt ? new Date(task.completedAt).toLocaleString() : '-')),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Duration'), h('div', null, formatDuration(task.actualDurationMs))),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Model'), h('div', null, task.modelUsed || task.model || '-')),
+          h('div', null, h('div', { style: { color: 'var(--text-muted)', fontSize: 11, marginBottom: 2 } }, 'Tokens / Cost'), h('div', null, (task.tokensUsed || 0).toLocaleString() + ' / $' + (task.costUsd || 0).toFixed(4)))
+        ),
+
+        // Error
+        task.error && h('div', { style: { padding: 12, background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.3)', borderRadius: 'var(--radius)', marginBottom: 16, fontSize: 13, color: '#ef4444' } },
+          h('strong', null, 'Error: '), task.error
+        ),
+
+        // Result
+        task.result && h('div', { style: { marginBottom: 16 } },
+          h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Result'),
+          h('pre', { style: { fontSize: 12, background: 'var(--bg-tertiary)', padding: 12, borderRadius: 'var(--radius)', overflow: 'auto', maxHeight: 200 } },
+            JSON.stringify(task.result, null, 2)
+          )
+        ),
+
+        // Actions
+        (task.status === 'created' || task.status === 'assigned' || task.status === 'in_progress') && h('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 16, borderTop: '1px solid var(--border)', paddingTop: 16 } },
+          h('button', { className: 'btn btn-danger btn-sm', onClick: function() { onCancel(task.id); } }, 'Cancel Task')
+        )
+      )
+    )
+  );
+}
+
+// ─── Stats Bar ───────────────────────────────────────────
+function StatsBar({ stats }) {
+  var items = [
+    { label: 'Queued', value: stats.created, color: STATUS_COLORS.created },
+    { label: 'Assigned', value: stats.assigned, color: STATUS_COLORS.assigned },
+    { label: 'In Progress', value: stats.inProgress, color: STATUS_COLORS.in_progress },
+    { label: 'Completed', value: stats.completed, color: STATUS_COLORS.completed },
+    { label: 'Failed', value: stats.failed, color: STATUS_COLORS.failed },
+  ];
+  return h('div', { style: { display: 'flex', gap: 16, marginBottom: 20, flexWrap: 'wrap' } },
+    items.map(function(it) {
+      return h('div', { key: it.label, style: { background: 'var(--bg-secondary)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: '12px 20px', minWidth: 120, textAlign: 'center' } },
+        h('div', { style: { fontSize: 28, fontWeight: 700, color: it.color, lineHeight: 1 } }, it.value),
+        h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 4 } }, it.label)
+      );
+    })
+  );
+}
+
+// ─── Main Page Component ─────────────────────────────────
+export function TaskPipelinePage() {
+  var { toast } = useApp();
+  var [tasks, setTasks] = useState([]);
+  var [stats, setStats] = useState({ created: 0, assigned: 0, inProgress: 0, completed: 0, failed: 0, cancelled: 0, total: 0 });
+  var [selectedTask, setSelectedTask] = useState(null);
+  var [view, setView] = useState('kanban'); // 'kanban' | 'list' | 'timeline'
+  var [filter, setFilter] = useState('all'); // 'all' | 'active' | 'completed' | 'failed'
+  var [loading, setLoading] = useState(true);
+  var eventSourceRef = useRef(null);
+
+  // Fetch initial data
+  var loadData = useCallback(function() {
+    setLoading(true);
+    Promise.all([
+      engineCall('/task-pipeline?limit=200'),
+      engineCall('/task-pipeline/stats'),
+    ]).then(function(results) {
+      setTasks(results[0]?.tasks || []);
+      setStats(results[1] || stats);
+    }).catch(function(err) {
+      console.error('[TaskPipeline] load error:', err);
+    }).finally(function() { setLoading(false); });
+  }, []);
+
+  // SSE for real-time updates
+  useEffect(function() {
+    loadData();
+
+    // Connect to SSE stream
+    var baseUrl = window.__ENGINE_BASE || '/engine';
+    var es = new EventSource(baseUrl + '/task-pipeline/stream');
+    eventSourceRef.current = es;
+
+    es.onmessage = function(e) {
+      try {
+        var event = JSON.parse(e.data);
+        if (event.type === 'init') {
+          // Initial state from SSE
+          if (event.tasks) setTasks(function(prev) {
+            var map = new Map();
+            prev.forEach(function(t) { map.set(t.id, t); });
+            event.tasks.forEach(function(t) { map.set(t.id, t); });
+            return Array.from(map.values()).sort(function(a, b) { return new Date(b.createdAt) - new Date(a.createdAt); });
+          });
+          if (event.stats) setStats(event.stats);
+        } else if (event.task) {
+          // Real-time task event
+          setTasks(function(prev) {
+            var idx = prev.findIndex(function(t) { return t.id === event.task.id; });
+            if (idx >= 0) {
+              var next = prev.slice();
+              next[idx] = event.task;
+              return next;
+            }
+            return [event.task].concat(prev);
+          });
+          // Update stats locally
+          setStats(function(prev) {
+            var s = Object.assign({}, prev);
+            if (event.type === 'task_created') { s.created++; s.total++; }
+            else if (event.type === 'task_completed') { s.completed++; s.inProgress = Math.max(0, s.inProgress - 1); }
+            else if (event.type === 'task_failed') { s.failed++; s.inProgress = Math.max(0, s.inProgress - 1); }
+            return s;
+          });
+          // Update selected task if viewing it
+          setSelectedTask(function(prev) {
+            if (prev && prev.id === event.task.id) return event.task;
+            return prev;
+          });
+        }
+      } catch (err) { /* ignore parse errors */ }
+    };
+
+    es.onerror = function() {
+      // Reconnect handled by browser
+    };
+
+    return function() {
+      if (es) es.close();
+    };
+  }, []);
+
+  // Periodic stats refresh
+  useEffect(function() {
+    var interval = setInterval(function() {
+      engineCall('/task-pipeline/stats').then(function(s) { if (s) setStats(s); }).catch(function() {});
+    }, 30000);
+    return function() { clearInterval(interval); };
+  }, []);
+
+  var cancelTask = useCallback(function(taskId) {
+    engineCall('/task-pipeline/' + taskId + '/cancel', { method: 'POST' })
+      .then(function(res) {
+        toast('Task cancelled', 'success');
+        setSelectedTask(null);
+        loadData();
+      })
+      .catch(function(err) { toast(err.message || 'Failed to cancel', 'error'); });
+  }, []);
+
+  // Filter tasks
+  var filteredTasks = tasks.filter(function(t) {
+    if (filter === 'active') return t.status === 'created' || t.status === 'assigned' || t.status === 'in_progress';
+    if (filter === 'completed') return t.status === 'completed';
+    if (filter === 'failed') return t.status === 'failed' || t.status === 'cancelled';
+    return true;
+  });
+
+  // Group by status for kanban
+  var columns = {};
+  COLUMNS.forEach(function(col) { columns[col.key] = []; });
+  filteredTasks.forEach(function(t) {
+    if (columns[t.status]) columns[t.status].push(t);
+    else if (t.status === 'cancelled' && columns.failed) columns.failed.push(t);
+  });
+
+  if (loading) {
+    return h('div', { style: { padding: 40, textAlign: 'center', color: 'var(--text-muted)' } }, 'Loading task pipeline...');
+  }
+
+  return h(Fragment, null,
+    // ─── Header ────────────────────────────────────────
+    h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 } },
+      h('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
+        h('h1', { style: { fontSize: 22, fontWeight: 700 } }, I.workflow(), ' Task Pipeline'),
+        h(HelpButton, { title: 'Task Pipeline' },
+          h('p', null, 'The centralized task pipeline shows every task assigned to agents across your organization in real-time.'),
+          h('h4', { style: _h4 }, 'How It Works'),
+          h('ul', { style: _ul },
+            h('li', null, 'Tasks are automatically recorded when agents are spawned for work'),
+            h('li', null, 'The pipeline tracks task status from creation through completion'),
+            h('li', null, 'Real-time updates via SSE — no need to refresh'),
+            h('li', null, 'Smart metadata extraction categorizes tasks automatically')
+          ),
+          h('h4', { style: _h4 }, 'Task Lifecycle'),
+          h('ul', { style: _ul },
+            h('li', null, h('strong', null, 'Queued'), ' — Task created, waiting to be assigned'),
+            h('li', null, h('strong', null, 'Assigned'), ' — Agent selected, about to start'),
+            h('li', null, h('strong', null, 'In Progress'), ' — Agent actively working'),
+            h('li', null, h('strong', null, 'Completed'), ' — Task finished successfully'),
+            h('li', null, h('strong', null, 'Failed'), ' — Task encountered an error')
+          ),
+          h('div', { style: _tip }, 'Tip: Click any task card to see full details including model used, tokens consumed, duration, and results.')
+        )
+      ),
+      h('div', { style: { display: 'flex', gap: 8 } },
+        // View toggle
+        h('div', { style: { display: 'flex', border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' } },
+          ['kanban', 'list'].map(function(v) {
+            return h('button', {
+              key: v,
+              className: 'btn btn-sm ' + (view === v ? 'btn-primary' : 'btn-ghost'),
+              onClick: function() { setView(v); },
+              style: { borderRadius: 0, textTransform: 'capitalize', fontSize: 12 }
+            }, v);
+          })
+        ),
+        // Filter
+        h('select', {
+          className: 'form-control',
+          value: filter,
+          onChange: function(e) { setFilter(e.target.value); },
+          style: { fontSize: 12, padding: '4px 8px', width: 'auto' }
+        },
+          h('option', { value: 'all' }, 'All Tasks'),
+          h('option', { value: 'active' }, 'Active Only'),
+          h('option', { value: 'completed' }, 'Completed'),
+          h('option', { value: 'failed' }, 'Failed / Cancelled')
+        ),
+        h('button', { className: 'btn btn-secondary btn-sm', onClick: loadData }, I.refresh(), ' Refresh')
+      )
+    ),
+
+    // ─── Stats Bar ─────────────────────────────────────
+    h(StatsBar, { stats: stats }),
+
+    // ─── Live indicator ────────────────────────────────
+    h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginBottom: 16, fontSize: 12, color: 'var(--text-muted)' } },
+      h('div', { style: { width: 8, height: 8, borderRadius: '50%', background: '#22c55e', animation: 'pulse 2s infinite' } }),
+      'Live — updates in real-time',
+      h('span', { style: { marginLeft: 'auto' } }, filteredTasks.length + ' tasks')
+    ),
+
+    // ─── Kanban View ───────────────────────────────────
+    view === 'kanban' && h('div', {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(' + COLUMNS.length + ', 1fr)',
+        gap: 12,
+        minHeight: 400,
+      }
+    },
+      COLUMNS.map(function(col) {
+        var colTasks = columns[col.key] || [];
+        return h('div', { key: col.key, style: { background: 'var(--bg-primary)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' } },
+          // Column header
+          h('div', { style: { padding: '10px 12px', borderBottom: '2px solid ' + col.color, display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+            h('span', { style: { fontSize: 13, fontWeight: 600 } }, col.label),
+            h('span', { style: { fontSize: 11, padding: '2px 8px', borderRadius: 10, background: col.color + '22', color: col.color, fontWeight: 600 } }, colTasks.length)
+          ),
+          // Cards
+          h('div', { style: { padding: 8, maxHeight: 500, overflowY: 'auto' } },
+            colTasks.length === 0
+              ? h('div', { style: { padding: 20, textAlign: 'center', color: 'var(--text-muted)', fontSize: 12 } }, 'No tasks')
+              : colTasks.map(function(t) {
+                  return h(TaskCard, { key: t.id, task: t, onSelect: setSelectedTask });
+                })
+          )
+        );
+      })
+    ),
+
+    // ─── List View ─────────────────────────────────────
+    view === 'list' && h('div', { className: 'card' },
+      h('div', { style: { overflowX: 'auto' } },
+        h('table', { className: 'table' },
+          h('thead', null,
+            h('tr', null,
+              h('th', null, 'Task'),
+              h('th', null, 'Agent'),
+              h('th', null, 'Status'),
+              h('th', null, 'Priority'),
+              h('th', null, 'Category'),
+              h('th', null, 'Created'),
+              h('th', null, 'Duration'),
+              h('th', null, 'Model')
+            )
+          ),
+          h('tbody', null,
+            filteredTasks.length === 0
+              ? h('tr', null, h('td', { colSpan: 8, style: { textAlign: 'center', color: 'var(--text-muted)', padding: 40 } }, 'No tasks found'))
+              : filteredTasks.map(function(t) {
+                  var statusColor = STATUS_COLORS[t.status] || '#6b7394';
+                  return h('tr', {
+                    key: t.id,
+                    onClick: function() { setSelectedTask(t); },
+                    style: { cursor: 'pointer' }
+                  },
+                    h('td', { style: { maxWidth: 250, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: 500 } }, t.title),
+                    h('td', { style: { fontSize: 13 } }, t.assignedToName || '-'),
+                    h('td', null,
+                      h('span', { style: { padding: '2px 8px', borderRadius: 10, fontSize: 11, fontWeight: 600, background: statusColor + '22', color: statusColor } },
+                        t.status.replace('_', ' ')
+                      )
+                    ),
+                    h('td', null,
+                      h('span', { style: { fontSize: 11, color: PRIORITY_COLORS[t.priority] || '#6366f1' } }, t.priority)
+                    ),
+                    h('td', { style: { fontSize: 12 } }, (CATEGORY_ICONS[t.category] || '') + ' ' + t.category),
+                    h('td', { style: { fontSize: 12, color: 'var(--text-muted)' } }, timeAgo(t.createdAt)),
+                    h('td', { style: { fontSize: 12 } }, formatDuration(t.actualDurationMs)),
+                    h('td', { style: { fontSize: 12, fontFamily: 'var(--font-mono)' } }, t.modelUsed || t.model || '-')
+                  );
+                })
+          )
+        )
+      )
+    ),
+
+    // ─── Task Detail Modal ─────────────────────────────
+    selectedTask && h(TaskDetail, {
+      task: selectedTask,
+      onClose: function() { setSelectedTask(null); },
+      onCancel: cancelTask
+    })
+  );
+}

package/dist/dashboard/pages/users.js

@@ -1,6 +1,7 @@
 import { h, useState, useEffect, Fragment, useApp, apiCall, showConfirm } from '../components/utils.js';
 import { I } from '../components/icons.js';
 import { Modal } from '../components/modal.js';
+import { HelpButton } from '../components/help-button.js';
 
 export function UsersPage() {
   var { toast } = useApp();
@@ -58,7 +59,19 @@ export function UsersPage() {
 
   return h(Fragment, null,
     h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 } },
-      h('div', null, h('h1', { style: { fontSize: 20, fontWeight: 700 } }, 'Users'), h('p', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'Manage team members and their access')),
+      h('div', null, h('h1', { style: { fontSize: 20, fontWeight: 700, display: 'flex', alignItems: 'center' } }, 'Users', h(HelpButton, { label: 'Users' },
+        h('p', null, 'Manage dashboard users who can access and administer the AgenticMail Enterprise console. Each user has a role that controls what they can see and do.'),
+        h('h4', { style: { marginTop: 16, marginBottom: 8, fontSize: 14 } }, 'Roles'),
+        h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+          h('li', null, h('strong', null, 'Owner'), ' — Full access including billing, user management, and destructive actions.'),
+          h('li', null, h('strong', null, 'Admin'), ' — Can manage agents, policies, and most settings. Cannot manage billing.'),
+          h('li', null, h('strong', null, 'Member'), ' — Can view dashboards and interact with agents. Limited config access.'),
+          h('li', null, h('strong', null, 'Viewer'), ' — Read-only access to dashboards and reports.')
+        ),
+        h('h4', { style: { marginTop: 16, marginBottom: 8, fontSize: 14 } }, '2FA (Two-Factor Authentication)'),
+        h('p', null, 'Users can enable TOTP-based 2FA for extra security. The 2FA column shows whether it\'s active.'),
+        h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Use the lock icon to reset a user\'s password. The "Generate" button creates a secure random password.')
+      )), h('p', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'Manage team members and their access')),
       h('button', { className: 'btn btn-primary', onClick: function() { setCreating(true); } }, I.plus(), ' Add User')
     ),
 

package/dist/dashboard/pages/vault.js

@@ -1,6 +1,7 @@
 import { h, useState, useEffect, useCallback, Fragment, useApp, engineCall, getOrgId } from '../components/utils.js';
 import { I } from '../components/icons.js';
 import { Modal } from '../components/modal.js';
+import { HelpButton } from '../components/help-button.js';
 
 var PAGE_SIZE = 25;
 
@@ -522,7 +523,16 @@ export function VaultPage() {
 
       h('div', { className: 'card' },
         h('div', { className: 'card-header' },
-          h('h3', { style: { fontSize: 14, fontWeight: 600 } }, 'Secrets by Category')
+          h('h3', { style: { fontSize: 14, fontWeight: 600, display: 'flex', alignItems: 'center' } }, 'Secrets by Category', h(HelpButton, { label: 'Secrets by Category' },
+            h('p', null, 'Breakdown of stored secrets by their category. Helps you understand what types of credentials are in your vault.'),
+            h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+              h('li', null, h('strong', null, 'Deploy Credentials'), ' — Infrastructure and deployment secrets.'),
+              h('li', null, h('strong', null, 'Skill Credentials'), ' — API keys for agent tools (OpenAI, Slack, etc).'),
+              h('li', null, h('strong', null, 'Cloud Storage'), ' — AWS, GCP, and other cloud provider keys.'),
+              h('li', null, h('strong', null, 'API Keys'), ' — General-purpose API keys.'),
+              h('li', null, h('strong', null, 'Custom'), ' — User-defined secrets.')
+            )
+          ))
         ),
         h('div', { className: 'card-body' },
           Object.keys(byCategory).length === 0
@@ -563,7 +573,17 @@ export function VaultPage() {
   return h(Fragment, null,
     h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 } },
       h('div', null,
-        h('h1', { style: { fontSize: 20, fontWeight: 700 } }, 'Vault'),
+        h('h1', { style: { fontSize: 20, fontWeight: 700, display: 'flex', alignItems: 'center' } }, 'Vault', h(HelpButton, { label: 'Vault' },
+          h('p', null, 'Securely store and manage API keys, passwords, and credentials used by your agents. All secrets are encrypted at rest with AES-256-GCM.'),
+          h('h4', { style: { marginTop: 16, marginBottom: 8, fontSize: 14 } }, 'Key features'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'Platform presets'), ' — Quick setup for OpenAI, Anthropic, GitHub, Stripe, and more.'),
+            h('li', null, h('strong', null, 'Key rotation'), ' — Re-encrypt secrets with fresh keys without changing the value.'),
+            h('li', null, h('strong', null, 'Full audit trail'), ' — Every read, create, delete, and rotate is logged.'),
+            h('li', null, h('strong', null, 'Auto-detection'), ' — Secrets stored as skill:<platform>:<key> are auto-detected by agent tools.')
+          ),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Rotate secrets periodically. Use "Rotate All" for bulk re-encryption after a security incident.')
+        )),
         h('p', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'Encrypted secrets management with AES-256-GCM')
       ),
       h('button', { className: 'btn btn-secondary', onClick: function() { loadSecrets(); loadStatus(); if (tab === 'audit') loadAudit(); } }, I.refresh(), ' Refresh')

package/dist/dashboard/pages/workforce.js

@@ -1,6 +1,7 @@
 import { h, useState, useEffect, useCallback, Fragment, useApp, engineCall, buildAgentEmailMap, resolveAgentEmail, buildAgentDataMap, renderAgentBadge, getOrgId } from '../components/utils.js';
 import { I } from '../components/icons.js';
 import { TimezoneSelect } from '../components/timezones.js';
+import { HelpButton } from '../components/help-button.js';
 
 export function WorkforcePage() {
   const { toast } = useApp();
@@ -245,9 +246,24 @@ export function WorkforcePage() {
     { key: 'history', label: 'Clock History' },
   ];
 
+  var _h4 = { marginTop: 16, marginBottom: 8, fontSize: 14 };
+  var _ul = { paddingLeft: 20, margin: '4px 0 8px' };
+  var _tip = { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 };
+
   return h('div', { className: 'page-inner' },
     h('div', { className: 'page-header' },
-      h('h1', null, 'Workforce Management'),
+      h('h1', { style: { display: 'flex', alignItems: 'center' } }, 'Workforce Management', h(HelpButton, { label: 'Workforce Management' },
+        h('p', null, 'Manage your agents like employees — set work schedules, assign tasks, track budgets, and monitor clock-in/out history.'),
+        h('h4', { style: _h4 }, 'Key sections'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Overview'), ' — See which agents are clocked in, off duty, or unscheduled.'),
+          h('li', null, h('strong', null, 'Schedules'), ' — Define working hours, shifts, and auto-wake rules.'),
+          h('li', null, h('strong', null, 'Task Queue'), ' — Assign and track tasks for specific agents.'),
+          h('li', null, h('strong', null, 'Budgets'), ' — Set token caps to control agent spending.'),
+          h('li', null, h('strong', null, 'Clock History'), ' — Audit trail of all clock-in/out events.')
+        ),
+        h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Use schedules with auto-wake to have agents automatically start working at their scheduled time each day.')
+      )),
       h('button', { className: 'btn btn-ghost', onClick: loadData }, I.refresh(), ' Refresh')
     ),
     // Tab bar

package/dist/index.js

@@ -7,7 +7,7 @@ import {
 import {
   provision,
   runSetupWizard
-} from "./chunk-Y4N3XCNP.js";
+} from "./chunk-6OZYUTPL.js";
 import {
   AgenticMailManager,
   GoogleEmailProvider,
@@ -28,7 +28,7 @@ import {
   executeTool,
   runAgentLoop,
   toolsToDefinitions
-} from "./chunk-NJHOYEVI.js";
+} from "./chunk-5C3SCMY5.js";
 import {
   ValidationError,
   auditLogger,
@@ -42,7 +42,7 @@ import {
   requireRole,
   securityHeaders,
   validate
-} from "./chunk-ZZXPEZOC.js";
+} from "./chunk-ZR4Z42HT.js";
 import "./chunk-OF4MUWWS.js";
 import {
   PROVIDER_REGISTRY,