@agenticmail/enterprise 0.3.2 → 0.4.0

package/dist/dashboard/pages/compliance.js

@@ -0,0 +1,81 @@
+import { h, useState, useEffect, Fragment, useApp, engineCall, buildAgentEmailMap, buildAgentDataMap, resolveAgentEmail, renderAgentBadge } from '../components/utils.js';
+import { I } from '../components/icons.js';
+
+export function CompliancePage() {
+  const { toast } = useApp();
+  const [reports, setReports] = useState([]);
+  const [tab, setTab] = useState('reports');
+  const [generating, setGenerating] = useState(false);
+  const [form, setForm] = useState({ type: 'soc2', orgId: 'default', agentId: '', from: new Date(Date.now() - 30 * 86400000).toISOString().split('T')[0], to: new Date().toISOString().split('T')[0] });
+
+  const [agents, setAgents] = useState([]);
+
+  const load = () => {
+    engineCall('/compliance/reports?orgId=default').then(d => setReports(d.reports || [])).catch(() => {});
+    engineCall('/agents?orgId=default').then(d => setAgents(d.agents || [])).catch(() => {});
+  };
+  useEffect(load, []);
+
+  const generate = async () => {
+    setGenerating(true);
+    try {
+      const endpoint = '/compliance/reports/' + form.type;
+      const body = form.type === 'gdpr'
+        ? { orgId: form.orgId, agentId: form.agentId }
+        : { orgId: form.orgId, dateRange: { from: form.from, to: form.to }, agentIds: form.agentId ? [form.agentId] : undefined };
+      await engineCall(endpoint, { method: 'POST', body: JSON.stringify(body) });
+      toast('Report generated', 'success');
+      load();
+    } catch (e) { toast(e.message, 'error'); }
+    setGenerating(false);
+  };
+
+  const download = (id, format) => {
+    window.open('/api/engine/compliance/reports/' + id + '/download?format=' + format, '_blank');
+  };
+
+  return h('div', { className: 'page-inner' },
+    h('div', { className: 'page-header' }, h('h1', null, 'Compliance Reporting')),
+    h('div', { className: 'tabs', style: { marginBottom: 16 } },
+      ['reports', 'generate'].map(t => h('button', { key: t, className: 'tab' + (tab === t ? ' active' : ''), onClick: () => setTab(t) }, t.charAt(0).toUpperCase() + t.slice(1)))
+    ),
+    tab === 'generate' && h('div', { className: 'card' },
+      h('div', { className: 'card-body' },
+        h('h3', { style: { marginBottom: 16 } }, 'Generate Report'),
+        h('label', { className: 'field-label' }, 'Report Type'),
+        h('select', { className: 'input', value: form.type, onChange: e => setForm({ ...form, type: e.target.value }) }, h('option', { value: 'soc2' }, 'SOC2 Summary'), h('option', { value: 'gdpr' }, 'GDPR Export'), h('option', { value: 'audit' }, 'Audit Summary')),
+        form.type !== 'gdpr' && h('div', { style: { display: 'flex', gap: 12, marginTop: 8 } },
+          h('div', { style: { flex: 1 } }, h('label', { className: 'field-label' }, 'From'), h('input', { className: 'input', type: 'date', value: form.from, onChange: e => setForm({ ...form, from: e.target.value }) })),
+          h('div', { style: { flex: 1 } }, h('label', { className: 'field-label' }, 'To'), h('input', { className: 'input', type: 'date', value: form.to, onChange: e => setForm({ ...form, to: e.target.value }) }))
+        ),
+        (form.type === 'gdpr' || form.type === 'audit') && h('div', { style: { marginTop: 8 } },
+          h('label', { className: 'field-label' }, form.type === 'gdpr' ? 'Agent (required)' : 'Agent (optional)'),
+          h('select', { className: 'input', value: form.agentId, onChange: e => setForm({ ...form, agentId: e.target.value }) },
+            h('option', { value: '' }, form.type === 'gdpr' ? '-- Select Agent --' : '-- All Agents --'),
+            agents.map(a => h('option', { key: a.id, value: a.id }, (a.config?.displayName || a.config?.name || a.name || 'Agent') + (a.config?.email?.address ? ' (' + a.config.email.address + ')' : '')))
+          )
+        ),
+        h('button', { className: 'btn btn-primary', style: { marginTop: 16 }, onClick: generate, disabled: generating }, generating ? 'Generating...' : 'Generate Report')
+      )
+    ),
+    tab === 'reports' && h('div', { className: 'card' },
+      h('table', { className: 'data-table' },
+        h('thead', null, h('tr', null, h('th', null, 'Title'), h('th', null, 'Type'), h('th', null, 'Status'), h('th', null, 'Generated'), h('th', null, 'By'), h('th', null, 'Actions'))),
+        h('tbody', null, reports.length === 0
+          ? h('tr', null, h('td', { colSpan: 6, style: { textAlign: 'center', color: 'var(--text-muted)', padding: 40 } }, 'No reports generated yet. Go to Generate tab to create one.'))
+          : reports.map(r => h('tr', { key: r.id },
+            h('td', null, h('strong', null, r.title)),
+            h('td', null, h('span', { className: 'badge-tag' }, r.type.toUpperCase())),
+            h('td', null, h('span', { className: 'status-badge status-' + (r.status === 'completed' ? 'success' : r.status === 'failed' ? 'error' : 'warning') }, r.status)),
+            h('td', null, new Date(r.createdAt).toLocaleString()),
+            h('td', null, r.generatedBy),
+            h('td', null, r.status === 'completed' && h('div', { style: { display: 'flex', gap: 4 } },
+              h('button', { className: 'btn btn-ghost btn-sm', onClick: () => download(r.id, 'json') }, I.download(), ' JSON'),
+              h('button', { className: 'btn btn-ghost btn-sm', onClick: () => download(r.id, 'csv') }, I.download(), ' CSV')
+            ))
+          ))
+        )
+      )
+    )
+  );
+}

package/dist/dashboard/pages/dashboard.js

@@ -0,0 +1,150 @@
+import { h, useState, useEffect, Fragment, buildAgentEmailMap, buildAgentDataMap, resolveAgentEmail, renderAgentBadge } from '../components/utils.js';
+import { useApp, apiCall, engineCall } from '../components/utils.js';
+import { I } from '../components/icons.js';
+import { DetailModal } from '../components/modal.js';
+
+export function SetupChecklist({ onNavigate }) {
+  const [status, setStatus] = useState(null);
+  const [dismissed, setDismissed] = useState(localStorage.getItem('em_checklist_dismissed') === 'true');
+
+  useEffect(() => {
+    fetch('/auth/setup-status', { credentials: 'same-origin' }).then(r => r.ok ? r.json() : null).then(d => { if (d) setStatus(d); }).catch(() => {});
+  }, []);
+
+  if (dismissed || !status) return null;
+
+  var cl = status.checklist || status;
+  const items = [
+    { key: 'admin', label: 'Admin account created', done: cl.adminCreated, nav: 'users' },
+    { key: 'company', label: 'Company configured', done: cl.companyConfigured, nav: 'settings' },
+    { key: 'email', label: 'Email configured', done: cl.emailConfigured, nav: 'settings' },
+    { key: 'agent', label: 'First agent created', done: cl.agentCreated, nav: 'agents' },
+    { key: 'invite', label: 'Invite team members', done: cl.teamInvited, nav: 'users' },
+  ];
+
+  const doneCount = items.filter(i => i.done).length;
+  if (doneCount === items.length) return null;
+
+  const dismiss = () => { setDismissed(true); localStorage.setItem('em_checklist_dismissed', 'true'); };
+
+  return h('div', { className: 'setup-checklist' },
+    h('h3', null,
+      'Setup Checklist (' + doneCount + '/' + items.length + ')',
+      h('button', { className: 'dismiss', onClick: dismiss }, 'Dismiss')
+    ),
+    h('div', { className: 'checklist-progress' },
+      h('div', { className: 'checklist-progress-bar', style: { width: Math.round((doneCount / items.length) * 100) + '%' } })
+    ),
+    items.map(item =>
+      h('div', { key: item.key, className: 'checklist-item' },
+        h('div', { className: 'check-circle' + (item.done ? ' done' : '') }, item.done ? h('svg', { viewBox: '0 0 24 24', width: 12, height: 12, fill: 'none', stroke: 'currentColor', strokeWidth: 3 }, h('polyline', { points: '20 6 9 17 4 12' })) : null),
+        h('span', null, item.label),
+        !item.done && h('span', { className: 'check-action', onClick: () => onNavigate && onNavigate(item.nav) }, 'Set up \u2192')
+      )
+    )
+  );
+}
+
+export function DashboardPage() {
+  const [stats, setStats] = useState(null);
+  const [agents, setAgents] = useState([]);
+  const [events, setEvents] = useState([]);
+
+  var _engineAgents = useState([]);
+  var engineAgents = _engineAgents[0]; var setEngineAgents = _engineAgents[1];
+  var _selectedEvent = useState(null);
+  var selectedEvent = _selectedEvent[0]; var setSelectedEvent = _selectedEvent[1];
+
+  useEffect(() => {
+    apiCall('/stats').then(setStats).catch(() => {});
+    apiCall('/agents').then(d => setAgents(d.agents || d || [])).catch(() => {});
+    engineCall('/agents?orgId=default').then(d => setEngineAgents(d.agents || [])).catch(() => {});
+    engineCall('/activity/events?limit=10').then(d => setEvents(d.events || [])).catch(() => {});
+  }, []);
+
+  // Merge admin + engine agents; engine agents (appended last) win in the data map
+  var mergedForMap = [].concat(agents, engineAgents);
+  const emailMap = buildAgentEmailMap(mergedForMap);
+  const agentData = buildAgentDataMap(mergedForMap);
+  const { setPage: navTo } = useApp();
+
+  return h(Fragment, null,
+    h(SetupChecklist, { onNavigate: function(pg) { if (navTo) navTo(pg); } }),
+    h('div', { className: 'stat-grid' },
+      h('div', { className: 'stat-card' }, h('div', { className: 'stat-label' }, 'Total Agents'), h('div', { className: 'stat-value' }, stats?.totalAgents ?? agents.length ?? '-')),
+      h('div', { className: 'stat-card' }, h('div', { className: 'stat-label' }, 'Active Agents'), h('div', { className: 'stat-value', style: { color: 'var(--success)' } }, (stats?.activeAgents ?? agents.filter(function(a) { return a.status === 'active'; }).length) || '-')),
+      h('div', { className: 'stat-card' }, h('div', { className: 'stat-label' }, 'Users'), h('div', { className: 'stat-value' }, stats?.totalUsers ?? '-')),
+      h('div', { className: 'stat-card' }, h('div', { className: 'stat-label' }, 'Audit Events'), h('div', { className: 'stat-value' }, stats?.totalAuditEvents ?? '-'))
+    ),
+
+    h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
+      h('div', { className: 'card' },
+        h('div', { className: 'card-header' }, h('h3', null, 'Agents'), h('button', { className: 'btn btn-sm btn-secondary', onClick: function() { navTo('agents'); } }, 'View all')),
+        h('div', { className: 'card-body-flush' },
+          agents.length === 0
+            ? h('div', { className: 'empty-state' }, h('h3', null, 'No agents yet'), h('p', null, 'Create your first agent to get started'))
+            : h('table', null,
+                h('thead', null, h('tr', null, h('th', null, 'Name'), h('th', null, 'Role'), h('th', null, 'Status'))),
+                h('tbody', null, agents.slice(0, 5).map(a =>
+                  h('tr', { key: a.id },
+                    h('td', null, h('strong', null, a.name)),
+                    h('td', null, a.role || '-'),
+                    h('td', null, h('span', { className: 'badge badge-' + (a.status === 'active' ? 'success' : a.status === 'archived' ? 'neutral' : 'warning') }, a.status || 'active'))
+                  )
+                ))
+              )
+        )
+      ),
+
+      h('div', { className: 'card' },
+        h('div', { className: 'card-header' }, h('h3', null, 'Recent Activity'), h('button', { className: 'btn btn-sm btn-secondary', onClick: function() { navTo('activity'); } }, 'View all')),
+        h('div', { className: 'card-body' },
+          events.length === 0
+            ? h('div', { style: { textAlign: 'center', padding: 24, color: 'var(--text-muted)', fontSize: 13 } }, 'No activity yet')
+            : events.slice(0, 8).map(function(ev, i) {
+                var evAgent = ev.agentId ? agentData[ev.agentId] : null;
+                var evName = evAgent ? (evAgent.name || 'Agent') : null;
+                var typeColor = ev.type === 'error' ? 'var(--danger)' : ev.type === 'deployed' || ev.type === 'started' ? 'var(--success)' : ev.type === 'stopped' ? 'var(--warning)' : 'var(--accent)';
+                return h('div', { key: i, onClick: function() { setSelectedEvent(ev); }, style: { display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < 7 && i < events.length - 1 ? '1px solid var(--border)' : 'none', fontSize: 13, cursor: 'pointer', borderRadius: 4 } },
+                  h('span', { style: { color: 'var(--text-muted)', fontSize: 11, minWidth: 70, flexShrink: 0 } }, new Date(ev.timestamp).toLocaleTimeString()),
+                  evAgent && evAgent.avatar
+                    ? h('img', { src: evAgent.avatar, style: { width: 22, height: 22, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 } })
+                    : evName
+                      ? h('div', { style: { width: 22, height: 22, borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent-text)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 600, flexShrink: 0 } }, evName.charAt(0).toUpperCase())
+                      : null,
+                  h('span', { style: { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } },
+                    evName ? h('strong', { style: { marginRight: 4 } }, evName) : null,
+                    ev.type
+                  ),
+                  h('span', { className: 'badge', style: { background: typeColor, color: '#fff', fontSize: 10, flexShrink: 0 } }, ev.type)
+                );
+              })
+        )
+      )
+    ),
+
+    // ─── Event Detail Modal ──────────────────────────────
+    selectedEvent && (function() {
+      var ev = selectedEvent;
+      var evAgent = ev.agentId ? agentData[ev.agentId] : null;
+      var evName = evAgent ? (evAgent.name || 'Agent') : null;
+      var typeColor = ev.type === 'error' ? 'var(--danger)' : ev.type === 'deployed' || ev.type === 'started' ? 'var(--success)' : ev.type === 'stopped' ? 'var(--warning)' : 'var(--accent)';
+      return h(DetailModal, {
+        title: 'Activity Event',
+        onClose: function() { setSelectedEvent(null); },
+        badge: { label: ev.type, color: typeColor },
+        header: evName ? h('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
+          evAgent && evAgent.avatar
+            ? h('img', { src: evAgent.avatar, style: { width: 32, height: 32, borderRadius: '50%', objectFit: 'cover' } })
+            : h('div', { style: { width: 32, height: 32, borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent-text)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 600 } }, evName.charAt(0).toUpperCase()),
+          h('div', null,
+            h('div', { style: { fontWeight: 600, fontSize: 14 } }, evName),
+            evAgent && evAgent.email ? h('div', { style: { fontSize: 12, color: 'var(--text-muted)' } }, evAgent.email) : null
+          )
+        ) : null,
+        data: ev,
+        exclude: ['agentId']
+      });
+    })()
+  );
+}

package/dist/dashboard/pages/dlp.js

@@ -0,0 +1,107 @@
+import { h, useState, useEffect, Fragment, useApp, engineCall, buildAgentEmailMap, buildAgentDataMap, resolveAgentEmail, renderAgentBadge } from '../components/utils.js';
+import { I } from '../components/icons.js';
+
+export function DLPPage() {
+  const { toast } = useApp();
+  const [rules, setRules] = useState([]);
+  const [violations, setViolations] = useState([]);
+  const [tab, setTab] = useState('rules');
+  const [showModal, setShowModal] = useState(false);
+  const [form, setForm] = useState({ name: '', orgId: 'default', patternType: 'regex', pattern: '', action: 'block', appliesTo: 'both', severity: 'high', enabled: true });
+  const [testContent, setTestContent] = useState('');
+  const [testResults, setTestResults] = useState(null);
+
+  const [agents, setAgents] = useState([]);
+
+  const load = () => {
+    engineCall('/dlp/rules?orgId=default').then(d => setRules(d.rules || [])).catch(() => {});
+    engineCall('/dlp/violations?orgId=default&limit=100').then(d => setViolations(d.violations || [])).catch(() => {});
+    engineCall('/agents?orgId=default').then(d => setAgents(d.agents || [])).catch(() => {});
+  };
+  useEffect(load, []);
+
+  const emailMap = buildAgentEmailMap(agents);
+  const agentData = buildAgentDataMap(agents);
+
+  const createRule = async () => {
+    try { await engineCall('/dlp/rules', { method: 'POST', body: JSON.stringify(form) }); toast('DLP rule created', 'success'); setShowModal(false); load(); } catch (e) { toast(e.message, 'error'); }
+  };
+  const deleteRule = async (id) => {
+    try { await engineCall('/dlp/rules/' + id, { method: 'DELETE' }); toast('Rule deleted', 'success'); load(); } catch (e) { toast(e.message, 'error'); }
+  };
+  const testScan = async () => {
+    if (!testContent) return;
+    try { const r = await engineCall('/dlp/scan', { method: 'POST', body: JSON.stringify({ orgId: 'default', content: testContent }) }); setTestResults(r); } catch (e) { toast(e.message, 'error'); }
+  };
+
+  const severityColor = (s) => s === 'critical' ? 'var(--danger)' : s === 'high' ? 'var(--warning)' : s === 'medium' ? 'var(--info)' : 'var(--text-muted)';
+
+  return h('div', { className: 'page-inner' },
+    h('div', { className: 'page-header' }, h('h1', null, 'Data Loss Prevention'), h('button', { className: 'btn btn-primary', onClick: () => setShowModal(true) }, I.plus(), ' Add Rule')),
+    h('div', { className: 'tabs', style: { marginBottom: 16 } },
+      ['rules', 'violations', 'test'].map(t => h('button', { key: t, className: 'tab' + (tab === t ? ' active' : ''), onClick: () => setTab(t) }, t.charAt(0).toUpperCase() + t.slice(1)))
+    ),
+    tab === 'rules' && h('div', { className: 'card' },
+      h('table', { className: 'data-table' },
+        h('thead', null, h('tr', null, h('th', null, 'Name'), h('th', null, 'Type'), h('th', null, 'Pattern'), h('th', null, 'Action'), h('th', null, 'Severity'), h('th', null, 'Actions'))),
+        h('tbody', null, rules.length === 0
+          ? h('tr', null, h('td', { colSpan: 6, style: { textAlign: 'center', color: 'var(--text-muted)', padding: 40 } }, 'No DLP rules configured'))
+          : rules.map(r => h('tr', { key: r.id },
+            h('td', null, h('strong', null, r.name)),
+            h('td', null, h('span', { className: 'badge-tag' }, r.patternType)),
+            h('td', null, h('code', { style: { fontSize: 11 } }, r.pattern.substring(0, 40) + (r.pattern.length > 40 ? '...' : ''))),
+            h('td', null, h('span', { className: 'status-badge status-' + (r.action === 'block' ? 'error' : r.action === 'redact' ? 'warning' : 'info') }, r.action)),
+            h('td', null, h('span', { style: { color: severityColor(r.severity), fontWeight: 600 } }, r.severity)),
+            h('td', null, h('button', { className: 'btn btn-ghost btn-sm', onClick: () => deleteRule(r.id) }, I.trash()))
+          ))
+        )
+      )
+    ),
+    tab === 'violations' && h('div', { className: 'card' },
+      h('table', { className: 'data-table' },
+        h('thead', null, h('tr', null, h('th', null, 'Time'), h('th', null, 'Agent'), h('th', null, 'Tool'), h('th', null, 'Action'), h('th', null, 'Direction'), h('th', null, 'Match'))),
+        h('tbody', null, violations.length === 0
+          ? h('tr', null, h('td', { colSpan: 6, style: { textAlign: 'center', color: 'var(--text-muted)', padding: 40 } }, 'No violations recorded'))
+          : violations.map(v => h('tr', { key: v.id },
+            h('td', null, new Date(v.createdAt).toLocaleString()),
+            h('td', null, renderAgentBadge(v.agentId, agentData)),
+            h('td', null, v.toolId),
+            h('td', null, h('span', { className: 'status-badge status-' + (v.actionTaken === 'blocked' ? 'error' : v.actionTaken === 'redacted' ? 'warning' : 'info') }, v.actionTaken)),
+            h('td', null, v.direction),
+            h('td', null, h('code', { style: { fontSize: 11 } }, v.matchContext || '-'))
+          ))
+        )
+      )
+    ),
+    tab === 'test' && h('div', { className: 'card' },
+      h('div', { className: 'card-body' },
+        h('h3', { style: { marginBottom: 12 } }, 'Test DLP Scan'),
+        h('textarea', { className: 'input', style: { minHeight: 100, marginBottom: 12 }, placeholder: 'Paste content to test against DLP rules...', value: testContent, onChange: (e) => setTestContent(e.target.value) }),
+        h('button', { className: 'btn btn-primary', onClick: testScan }, 'Run Scan'),
+        testResults && h('div', { style: { marginTop: 16 } },
+          h('h4', null, 'Results: ' + (testResults.matches?.length || 0) + ' matches'),
+          (testResults.matches || []).map((m, i) => h('div', { key: i, style: { padding: 8, background: 'var(--bg-tertiary)', borderRadius: 6, marginTop: 8 } },
+            h('strong', null, m.ruleName), ' \u2014 ', m.matchCount, ' matches'
+          ))
+        )
+      )
+    ),
+    showModal && h('div', { className: 'modal-overlay', onClick: () => setShowModal(false) },
+      h('div', { className: 'modal', onClick: e => e.stopPropagation() },
+        h('div', { className: 'modal-header' }, h('h2', null, 'Create DLP Rule'), h('button', { className: 'btn btn-ghost btn-icon', onClick: () => setShowModal(false) }, I.x())),
+        h('div', { className: 'modal-body' },
+          h('label', { className: 'field-label' }, 'Name'), h('input', { className: 'input', value: form.name, onChange: e => setForm({ ...form, name: e.target.value }) }),
+          h('label', { className: 'field-label' }, 'Pattern Type'),
+          h('select', { className: 'input', value: form.patternType, onChange: e => setForm({ ...form, patternType: e.target.value }) }, h('option', { value: 'regex' }, 'Regex'), h('option', { value: 'keyword' }, 'Keyword'), h('option', { value: 'pii_type' }, 'PII Type')),
+          h('label', { className: 'field-label' }, form.patternType === 'pii_type' ? 'PII Type (email, ssn, credit_card, phone, api_key, aws_key)' : 'Pattern'),
+          h('input', { className: 'input', value: form.pattern, onChange: e => setForm({ ...form, pattern: e.target.value }) }),
+          h('label', { className: 'field-label' }, 'Action'),
+          h('select', { className: 'input', value: form.action, onChange: e => setForm({ ...form, action: e.target.value }) }, h('option', { value: 'block' }, 'Block'), h('option', { value: 'redact' }, 'Redact'), h('option', { value: 'warn' }, 'Warn'), h('option', { value: 'log' }, 'Log')),
+          h('label', { className: 'field-label' }, 'Severity'),
+          h('select', { className: 'input', value: form.severity, onChange: e => setForm({ ...form, severity: e.target.value }) }, h('option', { value: 'critical' }, 'Critical'), h('option', { value: 'high' }, 'High'), h('option', { value: 'medium' }, 'Medium'), h('option', { value: 'low' }, 'Low'))
+        ),
+        h('div', { className: 'modal-footer' }, h('button', { className: 'btn btn-ghost', onClick: () => setShowModal(false) }, 'Cancel'), h('button', { className: 'btn btn-primary', onClick: createRule }, 'Create Rule'))
+      )
+    )
+  );
+}

package/dist/dashboard/pages/domain-status.js

@@ -0,0 +1,123 @@
+import { h, useState, useEffect, useCallback, useApp, engineCall } from '../components/utils.js';
+import { I } from '../components/icons.js';
+
+export function DomainStatusPage() {
+  const { toast } = useApp();
+  const [state, setState] = useState(window.__EM_DOMAIN_STATE__ || null);
+  const [checking, setChecking] = useState(false);
+
+  const checkVerification = useCallback(async () => {
+    if (!state?.domain) return;
+    setChecking(true);
+    try {
+      const r = await engineCall('/domain/verify', { method: 'POST', body: JSON.stringify({ domain: state.domain }) });
+      if (r.verified) {
+        setState(s => ({ ...s, status: 'verified', verifiedAt: new Date().toISOString() }));
+        toast('Domain verified successfully!', 'success');
+      } else {
+        toast('DNS record not detected yet. Changes can take up to 48 hours.', 'warning');
+      }
+    } catch {
+      toast('Could not check verification status', 'error');
+    } finally {
+      setChecking(false);
+    }
+  }, [state?.domain, toast]);
+
+  // Unregistered / no domain state
+  if (!state || !state.domain) {
+    return h('div', { className: 'page-content' },
+      h('div', { style: { maxWidth: 640, margin: '40px auto' } },
+        h('div', { className: 'card', style: { textAlign: 'center', padding: 48 } },
+          h('div', { style: { marginBottom: 20, opacity: 0.5 } }, I.shield()),
+          h('h2', { style: { marginBottom: 8 } }, 'Domain Protection'),
+          h('p', { style: { color: 'var(--text-secondary)', lineHeight: 1.6, maxWidth: 480, margin: '0 auto' } },
+            'Domain registration locks your deployment to a specific domain, preventing unauthorized duplication. Register your domain during setup or using the CLI:'
+          ),
+          h('pre', { style: { marginTop: 20, padding: 16, background: 'var(--bg-secondary)', borderRadius: 'var(--radius)', fontSize: 13, textAlign: 'left', overflow: 'auto' } },
+            'npx @agenticmail/enterprise recover --domain your.domain.com'
+          )
+        )
+      )
+    );
+  }
+
+  // Verified state
+  if (state.status === 'verified') {
+    return h('div', { className: 'page-content' },
+      h('div', { style: { maxWidth: 640, margin: '40px auto' } },
+        h('div', { className: 'card', style: { padding: 32 } },
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 } },
+            h('div', { style: { width: 48, height: 48, borderRadius: '50%', background: 'var(--success-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--success)', flexShrink: 0 } }, I.shield()),
+            h('div', null,
+              h('h2', { style: { margin: 0 } }, 'Domain Verified'),
+              h('p', { style: { margin: '4px 0 0', color: 'var(--text-secondary)', fontSize: 14 } }, 'Your deployment is protected')
+            )
+          ),
+          h('div', { style: { display: 'grid', gap: 16 } },
+            infoRow('Domain', state.domain),
+            infoRow('Status', h('span', { style: { color: 'var(--success)', fontWeight: 600 } }, 'Verified')),
+            state.verifiedAt && infoRow('Verified', new Date(state.verifiedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }))
+          ),
+          h('div', { style: { marginTop: 24, padding: 16, background: 'var(--bg-secondary)', borderRadius: 'var(--radius)', fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6 } },
+            'This domain is locked to your deployment. No other AgenticMail Enterprise instance can claim it. Your system operates fully offline — no outbound calls are made after verification.'
+          )
+        )
+      )
+    );
+  }
+
+  // Pending DNS state
+  return h('div', { className: 'page-content' },
+    h('div', { style: { maxWidth: 640, margin: '40px auto' } },
+      h('div', { className: 'card', style: { padding: 32 } },
+        h('div', { style: { display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 } },
+          h('div', { style: { width: 48, height: 48, borderRadius: '50%', background: 'var(--warning-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--warning)', flexShrink: 0 } }, I.shield()),
+          h('div', null,
+            h('h2', { style: { margin: 0 } }, 'DNS Verification Pending'),
+            h('p', { style: { margin: '4px 0 0', color: 'var(--text-secondary)', fontSize: 14 } }, 'Add the TXT record below to verify ownership')
+          )
+        ),
+
+        h('div', { style: { padding: 20, background: 'var(--bg-secondary)', borderRadius: 'var(--radius)', marginBottom: 20 } },
+          h('div', { style: { fontSize: 12, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 12, fontWeight: 600 } }, 'DNS Record to Add'),
+          dnsRow('Host', '_agenticmail-verify.' + state.domain),
+          dnsRow('Type', 'TXT'),
+          state.dnsChallenge
+            ? dnsRow('Value', state.dnsChallenge)
+            : dnsRow('Value', '(check your setup records or CLI output)')
+        ),
+
+        h('div', { style: { display: 'grid', gap: 16, marginBottom: 24 } },
+          infoRow('Domain', state.domain),
+          infoRow('Status', h('span', { style: { color: 'var(--warning)', fontWeight: 600 } }, 'Pending DNS Verification'))
+        ),
+
+        h('div', { style: { display: 'flex', gap: 12 } },
+          h('button', { className: 'btn btn-primary', onClick: checkVerification, disabled: checking },
+            checking ? 'Checking...' : 'Check DNS Now'
+          )
+        ),
+
+        h('div', { style: { marginTop: 20, fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6 } },
+          'DNS changes can take up to 48 hours to propagate. You can also verify from the CLI: ',
+          h('code', { style: { fontSize: 12 } }, 'npx @agenticmail/enterprise verify-domain')
+        )
+      )
+    )
+  );
+}
+
+function infoRow(label, value) {
+  return h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid var(--border)' } },
+    h('span', { style: { color: 'var(--text-secondary)', fontSize: 13 } }, label),
+    h('span', { style: { fontSize: 14 } }, value)
+  );
+}
+
+function dnsRow(label, value) {
+  return h('div', { style: { display: 'flex', gap: 12, alignItems: 'baseline', marginBottom: 8 } },
+    h('span', { style: { fontWeight: 600, fontSize: 13, minWidth: 48, color: 'var(--text-secondary)' } }, label),
+    h('code', { style: { fontSize: 13, wordBreak: 'break-all', color: 'var(--primary)' } }, value)
+  );
+}