@agenticmail/enterprise 0.5.200 → 0.5.201

package/dist/runtime-6WFHCG3N.js

@@ -0,0 +1,45 @@
+import {
+  AgentRuntime,
+  EmailChannel,
+  FollowUpScheduler,
+  SessionManager,
+  SubAgentManager,
+  ToolRegistry,
+  callLLM,
+  createAgentRuntime,
+  createNoopHooks,
+  createRuntimeHooks,
+  estimateMessageTokens,
+  estimateTokens,
+  executeTool,
+  runAgentLoop,
+  toolsToDefinitions
+} from "./chunk-5C3SCMY5.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-BENJQHTB.js

@@ -0,0 +1,15 @@
+import {
+  createServer
+} from "./chunk-ZR4Z42HT.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-7RQIFV5Y.js

@@ -0,0 +1,20 @@
+import {
+  promptCompanyInfo,
+  promptDatabase,
+  promptDeployment,
+  promptDomain,
+  promptRegistration,
+  provision,
+  runSetupWizard
+} from "./chunk-6OZYUTPL.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.200",
+  "version": "0.5.201",
   "description": "AgenticMail Enterprise — cloud-hosted AI agent identity, email, auth & compliance for organizations",
   "type": "module",
   "bin": {

package/src/dashboard/app.js

@@ -25,6 +25,7 @@ import { KnowledgeContributionsPage } from './pages/knowledge-contributions.js';
 import { SkillConnectionsPage } from './pages/skill-connections.js';
 import { VaultPage } from './pages/vault.js';
 import { OrgChartPage } from './pages/org-chart.js';
+import { TaskPipelinePage } from './pages/task-pipeline.js';
 
 // ─── Toast System ────────────────────────────────────────
 let toastId = 0;
@@ -161,6 +162,7 @@ function App() {
     ]},
     { section: 'Management', items: [
       { id: 'org-chart', icon: I.orgChart, label: 'Org Chart' },
+      { id: 'task-pipeline', icon: I.workflow, label: 'Task Pipeline' },
       { id: 'workforce', icon: I.clock, label: 'Workforce' },
       { id: 'messages', icon: I.messages, label: 'Messages' },
       { id: 'guardrails', icon: I.guardrails, label: 'Guardrails' },
@@ -199,6 +201,7 @@ function App() {
     'skill-connections': SkillConnectionsPage,
     vault: VaultPage,
     'org-chart': OrgChartPage,
+    'task-pipeline': TaskPipelinePage,
   };
 
   const navigateToAgent = (agentId) => { _setSelectedAgentId(agentId); history.pushState(null, '', '/dashboard/agents/' + agentId); };

package/src/dashboard/components/icons.js

@@ -43,6 +43,7 @@ export const I = {
   link: () => h('svg', S, h('path', { d: 'M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71' }), h('path', { d: 'M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71' })),
   folder: () => h('svg', S, h('path', { d: 'M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z' })),
   globe: () => h('svg', S, h('circle', { cx: 12, cy: 12, r: 10 }), h('line', { x1: 2, y1: 12, x2: 22, y2: 12 }), h('path', { d: 'M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z' })),
+  workflow: () => h('svg', S, h('rect', { x: 3, y: 3, width: 6, height: 6, rx: 1 }), h('rect', { x: 15, y: 3, width: 6, height: 6, rx: 1 }), h('rect', { x: 9, y: 15, width: 6, height: 6, rx: 1 }), h('line', { x1: 9, y1: 6, x2: 15, y2: 6 }), h('line', { x1: 12, y1: 9, x2: 12, y2: 15 }), h('line', { x1: 6, y1: 9, x2: 6, y2: 18 }), h('line', { x1: 6, y1: 18, x2: 9, y2: 18 }), h('line', { x1: 18, y1: 9, x2: 18, y2: 18 }), h('line', { x1: 18, y1: 18, x2: 15, y2: 18 })),
   orgChart: () => h('svg', S, h('rect', { x: 8, y: 2, width: 8, height: 5, rx: 1 }), h('rect', { x: 1, y: 17, width: 8, height: 5, rx: 1 }), h('rect', { x: 15, y: 17, width: 8, height: 5, rx: 1 }), h('line', { x1: 12, y1: 7, x2: 12, y2: 12 }), h('line', { x1: 5, y1: 12, x2: 19, y2: 12 }), h('line', { x1: 5, y1: 12, x2: 5, y2: 17 }), h('line', { x1: 19, y1: 12, x2: 19, y2: 17 })),
   terminal: () => h('svg', S, h('polyline', { points: '4 17 10 11 4 5' }), h('line', { x1: 12, y1: 19, x2: 20, y2: 19 })),
   chart: () => h('svg', S, h('line', { x1: 18, y1: 20, x2: 18, y2: 10 }), h('line', { x1: 12, y1: 20, x2: 12, y2: 4 }), h('line', { x1: 6, y1: 20, x2: 6, y2: 14 })),

package/src/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
+    })
+  );
+}