@agenticmail/enterprise 0.3.2 → 0.4.0

package/dashboards/html/src/pages/api-keys.js

@@ -0,0 +1,80 @@
+// API Keys page — list, create modal, revoke, key banner
+
+import { api } from '../api.js';
+import { esc } from '../utils/escape.js';
+import { toast } from '../utils/toast.js';
+import { openModal, closeModal } from '../components/modal.js';
+import { renderTable } from '../components/table.js';
+
+export function loadApiKeys() {
+  var el = document.getElementById('page-content');
+  el.innerHTML = '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px"><div><h2 class="page-title">API Keys</h2><p class="page-desc" style="margin:0">Manage programmatic access</p></div><button class="btn btn-primary" style="width:auto" id="btn-new-apikey">+ New Key</button></div><div id="apikey-banner"></div><div class="card"><div class="page-desc">Loading...</div></div>';
+
+  document.getElementById('btn-new-apikey').onclick = function() {
+    openModal('modal-apikey');
+  };
+
+  api('/api-keys').then(function(d) {
+    var keys = d.keys || [];
+    if (keys.length === 0) {
+      el.querySelector('.card').innerHTML = '<div class="empty"><div class="empty-icon">\ud83d\udd11</div>No API keys</div>';
+      return;
+    }
+    var rows = keys.map(function(k) {
+      return '<tr><td style="font-weight:600">' + esc(k.name) + '</td><td><code style="font-size:12px">' + esc(k.keyPrefix) + '...</code></td><td style="font-size:12px">' + (k.scopes || []).join(', ') + '</td><td style="color:var(--text-muted);font-size:12px">' + (k.lastUsedAt ? new Date(k.lastUsedAt).toLocaleString() : 'Never') + '</td><td><span class="badge ' + (k.revoked ? 'badge-archived' : 'badge-active') + '">' + (k.revoked ? 'revoked' : 'active') + '</span></td><td>' + (!k.revoked ? '<button class="btn btn-sm btn-danger" data-revoke-key="' + k.id + '">Revoke</button>' : '') + '</td></tr>';
+    }).join('');
+    el.querySelector('.card').innerHTML = renderTable(['Name', 'Key', 'Scopes', 'Last Used', 'Status', ''], rows);
+
+    // Bind revoke buttons
+    el.querySelectorAll('[data-revoke-key]').forEach(function(btn) {
+      btn.onclick = function() {
+        revokeApiKey(btn.getAttribute('data-revoke-key'));
+      };
+    });
+  });
+}
+
+function revokeApiKey(id) {
+  api('/api-keys/' + id, { method: 'DELETE' })
+    .then(function() { toast('Key revoked', 'success'); loadApiKeys(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}
+
+export function initApiKeyModal() {
+  var form = document.querySelector('#modal-apikey form');
+  if (form) {
+    form.onsubmit = function(e) {
+      createApiKey(e);
+    };
+  }
+  var cancelBtn = document.querySelector('#modal-apikey .btn[type="button"]');
+  if (cancelBtn) {
+    cancelBtn.onclick = function() {
+      closeModal('modal-apikey');
+    };
+  }
+}
+
+function createApiKey(e) {
+  e.preventDefault();
+  api('/api-keys', {
+    method: 'POST',
+    body: { name: document.getElementById('apikey-name').value },
+  })
+    .then(function(d) {
+      closeModal('modal-apikey');
+      var banner = document.getElementById('apikey-banner');
+      if (banner) {
+        banner.innerHTML = '<div class="card" style="border-color:var(--warning);background:var(--warning-bg)"><div style="font-weight:600;color:var(--warning);margin-bottom:8px">\u26a0\ufe0f Copy this key now \u2014 it won\'t be shown again</div><code style="display:block;background:var(--bg);padding:10px 14px;border-radius:var(--radius);font-size:13px;word-break:break-all;cursor:pointer" id="copy-new-key">' + d.plaintext + '</code><button class="btn btn-sm" style="margin-top:8px" id="dismiss-key-banner">Dismiss</button></div>';
+        document.getElementById('copy-new-key').onclick = function() {
+          navigator.clipboard.writeText(d.plaintext);
+          toast('Copied!', 'success');
+        };
+        document.getElementById('dismiss-key-banner').onclick = function() {
+          this.parentElement.remove();
+        };
+      }
+      loadApiKeys();
+    })
+    .catch(function(err) { toast(err.message, 'error'); });
+}

package/dashboards/html/src/pages/audit.js

@@ -0,0 +1,50 @@
+// Audit log page — paginated table
+
+import { api } from '../api.js';
+import { esc } from '../utils/escape.js';
+import { renderPageHeader } from '../components/layout.js';
+import { renderTable } from '../components/table.js';
+import { renderPagination } from '../components/pagination.js';
+
+var auditPage = 0;
+
+export function loadAudit(page) {
+  if (typeof page === 'number') {
+    auditPage = page;
+  }
+  var el = document.getElementById('page-content');
+  el.innerHTML = renderPageHeader('Audit Log', 'Loading...');
+  api('/audit?limit=25&offset=' + (auditPage * 25)).then(function(d) {
+    var events = d.events || [];
+    var total = d.total || 0;
+    if (events.length === 0) {
+      el.innerHTML = renderPageHeader('Audit Log', '0 events') +
+        '<div class="card"><div class="empty"><div class="empty-icon">\ud83d\udccb</div>No audit events yet</div></div>';
+      return;
+    }
+    var rows = events.map(function(e) {
+      return '<tr><td style="font-size:12px;color:var(--text-muted);white-space:nowrap">' + new Date(e.timestamp).toLocaleString() + '</td><td>' + esc(e.actor) + '</td><td style="color:var(--primary);font-weight:500">' + esc(e.action) + '</td><td style="font-size:12px">' + esc(e.resource) + '</td><td style="font-size:12px;color:var(--text-muted)">' + (e.ip || '-') + '</td></tr>';
+    }).join('');
+    el.innerHTML = renderPageHeader('Audit Log', total + ' total events') +
+      '<div class="card">' +
+      renderTable(['Time', 'Actor', 'Action', 'Resource', 'IP'], rows) +
+      renderPagination(auditPage, total, 25, 'audit-prev', 'audit-next') +
+      '</div>';
+
+    // Bind pagination buttons
+    var prevBtn = document.getElementById('audit-prev');
+    var nextBtn = document.getElementById('audit-next');
+    if (prevBtn) {
+      prevBtn.onclick = function() {
+        auditPage--;
+        loadAudit();
+      };
+    }
+    if (nextBtn) {
+      nextBtn.onclick = function() {
+        auditPage++;
+        loadAudit();
+      };
+    }
+  });
+}

package/dashboards/html/src/pages/compliance.js

@@ -0,0 +1,69 @@
+// Compliance page — generate and review reports
+
+import { api } from '../api.js';
+import { esc } from '../utils/escape.js';
+import { toast } from '../utils/toast.js';
+import { openModal, closeModal } from '../components/modal.js';
+import { renderTable } from '../components/table.js';
+
+export function loadCompliance() {
+  var el = document.getElementById('page-content');
+  el.innerHTML = '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px"><div><h2 class="page-title">Compliance</h2><p class="page-desc" style="margin:0">Generate and review compliance reports for regulatory frameworks</p></div><button class="btn btn-primary" style="width:auto" id="btn-new-report">+ Generate Report</button></div><div class="card"><div class="page-desc">Loading...</div></div>';
+
+  document.getElementById('btn-new-report').onclick = function() {
+    openModal('modal-compliance');
+  };
+
+  api('/engine/compliance/reports').then(function(d) {
+    var reports = d.reports || [];
+    if (reports.length === 0) {
+      el.querySelector('.card').innerHTML = '<div class="empty"><div class="empty-icon">&#128203;</div>No compliance reports yet. Generate your first one!</div>';
+      return;
+    }
+    var rows = reports.map(function(r) {
+      return '<tr><td style="font-weight:600">' + esc(r.name || r.type) + '</td><td>' + esc(r.framework || r.standard) + '</td><td><span class="badge badge-' + (r.status || 'generated') + '">' + (r.status || 'generated') + '</span></td><td style="color:var(--text-muted)">' + (r.score != null ? r.score + '%' : '-') + '</td><td style="color:var(--text-muted);font-size:12px">' + new Date(r.created_at || r.createdAt).toLocaleDateString() + '</td></tr>';
+    }).join('');
+    el.querySelector('.card').innerHTML = renderTable(['Report', 'Framework', 'Status', 'Score', 'Generated'], rows);
+  }).catch(function() {
+    el.querySelector('.card').innerHTML = '<div class="empty"><div class="empty-icon">&#128203;</div>No compliance reports yet.</div>';
+  });
+}
+
+export function initComplianceModal() {
+  var form = document.querySelector('#modal-compliance form');
+  if (form) {
+    form.onsubmit = function(e) {
+      generateReport(e);
+    };
+  }
+  var cancelBtn = document.querySelector('#modal-compliance .btn[type="button"]');
+  if (cancelBtn) {
+    cancelBtn.onclick = function() {
+      closeModal('modal-compliance');
+    };
+  }
+}
+
+function generateReport(e) {
+  e.preventDefault();
+  var framework = document.getElementById('compliance-framework').value;
+  var endpoints = {
+    soc2: '/engine/compliance/reports/soc2',
+    gdpr: '/engine/compliance/reports/gdpr',
+    audit: '/engine/compliance/reports/audit',
+  };
+  var endpoint = endpoints[framework] || endpoints.soc2;
+
+  api(endpoint, {
+    method: 'POST',
+    body: {
+      name: document.getElementById('compliance-name').value || undefined,
+    },
+  })
+    .then(function() {
+      toast(framework.toUpperCase() + ' report generated!', 'success');
+      closeModal('modal-compliance');
+      loadCompliance();
+    })
+    .catch(function(err) { toast(err.message, 'error'); });
+}

package/dashboards/html/src/pages/dashboard.js

@@ -0,0 +1,25 @@
+// Dashboard page — stats + recent audit
+
+import { api } from '../api.js';
+import { esc } from '../utils/escape.js';
+import { renderStats } from '../components/stat-card.js';
+import { renderPageHeader } from '../components/layout.js';
+
+export function loadDashboard() {
+  var el = document.getElementById('page-content');
+  el.innerHTML = renderPageHeader('Dashboard', 'Loading...');
+  api('/stats').then(function(s) {
+    api('/audit?limit=8').then(function(a) {
+      var events = (a.events || []).map(function(e) {
+        return '<div style="padding:10px 0;border-bottom:1px solid var(--border);font-size:13px">' +
+          '<span style="color:var(--primary);font-weight:500">' + esc(e.action) + '</span> on ' + esc(e.resource) +
+          '<div style="font-size:11px;color:var(--text-muted)">' + new Date(e.timestamp).toLocaleString() + (e.ip ? ' \u00b7 ' + e.ip : '') + '</div></div>';
+      }).join('');
+      el.innerHTML = renderPageHeader('Dashboard', 'Overview of your AgenticMail instance') +
+        renderStats(s) +
+        '<div class="card"><div class="card-title">Recent Activity</div>' +
+        (events || '<div class="empty"><div class="empty-icon">\ud83d\udccb</div>No activity yet</div>') +
+        '</div>';
+    });
+  });
+}

package/dashboards/html/src/pages/dlp.js

@@ -0,0 +1,112 @@
+// DLP page — rules, violations, scanning
+
+import { api } from '../api.js';
+import { esc } from '../utils/escape.js';
+import { toast } from '../utils/toast.js';
+import { openModal, closeModal } from '../components/modal.js';
+import { renderTable } from '../components/table.js';
+
+export function loadDlp() {
+  var el = document.getElementById('page-content');
+  el.innerHTML = '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px"><div><h2 class="page-title">Data Loss Prevention</h2><p class="page-desc" style="margin:0">Protect sensitive data with pattern-based scanning rules</p></div><button class="btn btn-primary" style="width:auto" id="btn-new-dlp-rule">+ New Rule</button></div><div class="card"><h3>Scan Content</h3><div style="display:flex;gap:8px"><textarea id="dlp-scan-input" class="input" rows="2" placeholder="Paste content to test against DLP rules..." style="flex:1"></textarea><button class="btn btn-primary" style="width:auto;align-self:flex-end" id="btn-dlp-scan">Scan</button></div></div><div class="card"><h3>DLP Rules</h3><div class="page-desc">Loading...</div></div><div class="card"><h3>Recent Violations</h3><div class="page-desc">Loading...</div></div>';
+
+  document.getElementById('btn-new-dlp-rule').onclick = function() {
+    openModal('modal-dlp-rule');
+  };
+
+  document.getElementById('btn-dlp-scan').onclick = function() {
+    scanContent();
+  };
+
+  var cards = el.querySelectorAll('.card');
+
+  api('/engine/dlp/rules?orgId=default').then(function(d) {
+    var rules = d.rules || [];
+    if (rules.length === 0) {
+      cards[1].innerHTML = '<h3>DLP Rules</h3><div class="empty"><div class="empty-icon">&#128274;</div>No DLP rules defined. Create your first one!</div>';
+      return;
+    }
+    var rows = rules.map(function(r) {
+      return '<tr><td style="font-weight:600">' + esc(r.name) + '</td><td><code>' + esc(r.pattern) + '</code></td><td>' + esc(r.action || 'block') + '</td><td><span class="badge badge-' + (r.status || 'enabled') + '">' + (r.status || 'enabled') + '</span></td><td><button class="btn btn-sm btn-danger" data-delete-dlp-rule="' + r.id + '">Delete</button></td></tr>';
+    }).join('');
+    cards[1].innerHTML = '<h3>DLP Rules (' + rules.length + ')</h3>' + renderTable(['Name', 'Pattern', 'Action', 'Status', ''], rows);
+
+    el.querySelectorAll('[data-delete-dlp-rule]').forEach(function(btn) {
+      btn.onclick = function() {
+        deleteDlpRule(btn.getAttribute('data-delete-dlp-rule'));
+      };
+    });
+  }).catch(function() {
+    cards[1].innerHTML = '<h3>DLP Rules</h3><div class="empty"><div class="empty-icon">&#128274;</div>No DLP rules defined.</div>';
+  });
+
+  api('/engine/dlp/violations').then(function(d) {
+    var violations = d.violations || [];
+    if (violations.length === 0) {
+      cards[2].innerHTML = '<h3>Recent Violations</h3><div class="empty"><div class="empty-icon">&#9989;</div>No DLP violations detected.</div>';
+      return;
+    }
+    var rows = violations.map(function(v) {
+      return '<tr><td style="font-weight:600">' + esc(v.rule_name || v.ruleName) + '</td><td><code>' + esc(v.matched || v.content) + '</code></td><td>' + esc(v.agent || v.sender) + '</td><td style="color:var(--text-muted);font-size:12px">' + new Date(v.created_at || v.createdAt).toLocaleDateString() + '</td></tr>';
+    }).join('');
+    cards[2].innerHTML = '<h3>Recent Violations (' + violations.length + ')</h3>' + renderTable(['Rule', 'Matched Content', 'Agent/Sender', 'Time'], rows);
+  }).catch(function() {
+    cards[2].innerHTML = '<h3>Recent Violations</h3><div class="empty"><div class="empty-icon">&#9989;</div>No violations detected.</div>';
+  });
+}
+
+function deleteDlpRule(id) {
+  if (!confirm('Delete this DLP rule?')) return;
+  api('/engine/dlp/rules/' + id, { method: 'DELETE' })
+    .then(function() { toast('DLP rule deleted', 'success'); loadDlp(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}
+
+function scanContent() {
+  var content = document.getElementById('dlp-scan-input').value;
+  if (!content.trim()) return toast('Enter content to scan', 'error');
+  api('/engine/dlp/scan', { method: 'POST', body: { content: content } })
+    .then(function(d) {
+      var matches = d.matches || d.violations || [];
+      if (matches.length > 0) {
+        toast('Scan complete: ' + matches.length + ' violation(s) found', 'warning');
+      } else {
+        toast('Scan complete: no violations found', 'success');
+      }
+    })
+    .catch(function(err) { toast(err.message, 'error'); });
+}
+
+export function initDlpModal() {
+  var form = document.querySelector('#modal-dlp-rule form');
+  if (form) {
+    form.onsubmit = function(e) {
+      createDlpRule(e);
+    };
+  }
+  var cancelBtn = document.querySelector('#modal-dlp-rule .btn[type="button"]');
+  if (cancelBtn) {
+    cancelBtn.onclick = function() {
+      closeModal('modal-dlp-rule');
+    };
+  }
+}
+
+function createDlpRule(e) {
+  e.preventDefault();
+  api('/engine/dlp/rules', {
+    method: 'POST',
+    body: {
+      name: document.getElementById('dlp-rule-name').value,
+      pattern: document.getElementById('dlp-rule-pattern').value,
+      action: document.getElementById('dlp-rule-action').value,
+      description: document.getElementById('dlp-rule-description').value || undefined,
+    },
+  })
+    .then(function() {
+      toast('DLP rule created!', 'success');
+      closeModal('modal-dlp-rule');
+      loadDlp();
+    })
+    .catch(function(err) { toast(err.message, 'error'); });
+}

package/dashboards/html/src/pages/guardrails.js

@@ -0,0 +1,127 @@
+// Guardrails page — interventions, anomaly rules, pause/resume/kill
+
+import { api } from '../api.js';
+import { esc } from '../utils/escape.js';
+import { toast } from '../utils/toast.js';
+import { openModal, closeModal } from '../components/modal.js';
+import { renderTable } from '../components/table.js';
+
+export function loadGuardrails() {
+  var el = document.getElementById('page-content');
+  el.innerHTML = '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px"><div><h2 class="page-title">Guardrails</h2><p class="page-desc" style="margin:0">Monitor and control AI agent behavior</p></div><button class="btn btn-primary" style="width:auto" id="btn-new-anomaly-rule">+ New Anomaly Rule</button></div><div class="card"><h3>Active Interventions</h3><div class="page-desc">Loading...</div></div><div class="card"><h3>Anomaly Rules</h3><div class="page-desc">Loading...</div></div>';
+
+  document.getElementById('btn-new-anomaly-rule').onclick = function() {
+    openModal('modal-anomaly-rule');
+  };
+
+  var cards = el.querySelectorAll('.card');
+
+  api('/engine/guardrails/interventions').then(function(d) {
+    var interventions = d.interventions || [];
+    if (interventions.length === 0) {
+      cards[0].innerHTML = '<h3>Active Interventions</h3><div class="empty"><div class="empty-icon">&#128737;</div>No active interventions.</div>';
+      return;
+    }
+    var rows = interventions.map(function(i) {
+      var st = (i.status || '').toLowerCase();
+      var actions = '';
+      if (st === 'active' || st === 'running') {
+        actions = '<button class="btn btn-sm btn-warning" data-pause-intervention="' + i.id + '">Pause</button> <button class="btn btn-sm btn-danger" data-kill-intervention="' + i.id + '">Kill</button>';
+      } else if (st === 'paused') {
+        actions = '<button class="btn btn-sm btn-primary" data-resume-intervention="' + i.id + '">Resume</button> <button class="btn btn-sm btn-danger" data-kill-intervention="' + i.id + '">Kill</button>';
+      }
+      return '<tr><td style="font-weight:600">' + esc(i.agent || i.agentName) + '</td><td>' + esc(i.reason || i.type) + '</td><td><span class="badge badge-' + (i.status || 'active') + '">' + (i.status || 'active') + '</span></td><td style="color:var(--text-muted);font-size:12px">' + new Date(i.created_at || i.createdAt).toLocaleDateString() + '</td><td>' + actions + '</td></tr>';
+    }).join('');
+    cards[0].innerHTML = '<h3>Active Interventions (' + interventions.length + ')</h3>' + renderTable(['Agent', 'Reason', 'Status', 'Time', 'Actions'], rows);
+
+    el.querySelectorAll('[data-pause-intervention]').forEach(function(btn) {
+      btn.onclick = function() { pauseIntervention(btn.getAttribute('data-pause-intervention')); };
+    });
+    el.querySelectorAll('[data-resume-intervention]').forEach(function(btn) {
+      btn.onclick = function() { resumeIntervention(btn.getAttribute('data-resume-intervention')); };
+    });
+    el.querySelectorAll('[data-kill-intervention]').forEach(function(btn) {
+      btn.onclick = function() { killIntervention(btn.getAttribute('data-kill-intervention')); };
+    });
+  }).catch(function() {
+    cards[0].innerHTML = '<h3>Active Interventions</h3><div class="empty"><div class="empty-icon">&#128737;</div>No active interventions.</div>';
+  });
+
+  api('/engine/anomaly-rules').then(function(d) {
+    var rules = d.rules || [];
+    if (rules.length === 0) {
+      cards[1].innerHTML = '<h3>Anomaly Rules</h3><div class="empty"><div class="empty-icon">&#128208;</div>No anomaly rules defined. Create your first one!</div>';
+      return;
+    }
+    var rows = rules.map(function(r) {
+      return '<tr><td style="font-weight:600">' + esc(r.name) + '</td><td><code>' + esc(r.condition || r.type) + '</code></td><td>' + esc(r.action || 'alert') + '</td><td><span class="badge badge-' + (r.status || 'enabled') + '">' + (r.status || 'enabled') + '</span></td><td><button class="btn btn-sm btn-danger" data-delete-anomaly-rule="' + r.id + '">Delete</button></td></tr>';
+    }).join('');
+    cards[1].innerHTML = '<h3>Anomaly Rules (' + rules.length + ')</h3>' + renderTable(['Name', 'Condition', 'Action', 'Status', ''], rows);
+
+    el.querySelectorAll('[data-delete-anomaly-rule]').forEach(function(btn) {
+      btn.onclick = function() { deleteAnomalyRule(btn.getAttribute('data-delete-anomaly-rule')); };
+    });
+  }).catch(function() {
+    cards[1].innerHTML = '<h3>Anomaly Rules</h3><div class="empty"><div class="empty-icon">&#128208;</div>No anomaly rules defined.</div>';
+  });
+}
+
+function pauseIntervention(id) {
+  api('/engine/guardrails/pause/' + id, { method: 'POST' })
+    .then(function() { toast('Intervention paused', 'success'); loadGuardrails(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}
+
+function resumeIntervention(id) {
+  api('/engine/guardrails/resume/' + id, { method: 'POST' })
+    .then(function() { toast('Intervention resumed', 'success'); loadGuardrails(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}
+
+function killIntervention(id) {
+  if (!confirm('Kill this intervention?')) return;
+  api('/engine/guardrails/kill/' + id, { method: 'POST' })
+    .then(function() { toast('Intervention killed', 'success'); loadGuardrails(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}
+
+function deleteAnomalyRule(id) {
+  if (!confirm('Delete this anomaly rule?')) return;
+  api('/engine/anomaly-rules/' + id, { method: 'DELETE' })
+    .then(function() { toast('Anomaly rule deleted', 'success'); loadGuardrails(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}
+
+export function initAnomalyRuleModal() {
+  var form = document.querySelector('#modal-anomaly-rule form');
+  if (form) {
+    form.onsubmit = function(e) {
+      createAnomalyRule(e);
+    };
+  }
+  var cancelBtn = document.querySelector('#modal-anomaly-rule .btn[type="button"]');
+  if (cancelBtn) {
+    cancelBtn.onclick = function() {
+      closeModal('modal-anomaly-rule');
+    };
+  }
+}
+
+function createAnomalyRule(e) {
+  e.preventDefault();
+  api('/engine/anomaly-rules', {
+    method: 'POST',
+    body: {
+      name: document.getElementById('anomaly-rule-name').value,
+      condition: document.getElementById('anomaly-rule-condition').value,
+      action: document.getElementById('anomaly-rule-action').value,
+      description: document.getElementById('anomaly-rule-description').value || undefined,
+    },
+  })
+    .then(function() {
+      toast('Anomaly rule created!', 'success');
+      closeModal('modal-anomaly-rule');
+      loadGuardrails();
+    })
+    .catch(function(err) { toast(err.message, 'error'); });
+}

package/dashboards/html/src/pages/journal.js

@@ -0,0 +1,54 @@
+// Journal page — action log with rollback
+
+import { api } from '../api.js';
+import { esc } from '../utils/escape.js';
+import { toast } from '../utils/toast.js';
+import { renderTable } from '../components/table.js';
+
+export function loadJournal() {
+  var el = document.getElementById('page-content');
+  el.innerHTML = '<div style="margin-bottom:24px"><h2 class="page-title">Journal</h2><p class="page-desc" style="margin:0">Track and rollback agent actions with a complete audit trail</p></div><div class="stats-row" style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px"><div class="card" style="text-align:center" id="journal-stat-total"><div style="font-size:28px;font-weight:700;color:var(--primary)">-</div><div style="color:var(--text-dim);font-size:13px">Total Entries</div></div><div class="card" style="text-align:center" id="journal-stat-completed"><div style="font-size:28px;font-weight:700;color:#22c55e">-</div><div style="color:var(--text-dim);font-size:13px">Completed</div></div><div class="card" style="text-align:center" id="journal-stat-rolledback"><div style="font-size:28px;font-weight:700;color:#f59e0b">-</div><div style="color:var(--text-dim);font-size:13px">Rolled Back</div></div><div class="card" style="text-align:center" id="journal-stat-failed"><div style="font-size:28px;font-weight:700;color:#ef4444">-</div><div style="color:var(--text-dim);font-size:13px">Failed</div></div></div><div class="card"><h3>Journal Entries</h3><div class="page-desc">Loading...</div></div>';
+
+  api('/engine/journal/stats/default').then(function(stats) {
+    var setVal = function(id, val) {
+      var s = document.getElementById(id);
+      if (s) s.querySelector('div').textContent = val;
+    };
+    setVal('journal-stat-total', stats.total || 0);
+    setVal('journal-stat-completed', stats.completed || 0);
+    setVal('journal-stat-rolledback', stats.rolled_back || stats.rolledBack || 0);
+    setVal('journal-stat-failed', stats.failed || 0);
+  }).catch(function() {});
+
+  var card = el.querySelector('.card:last-child');
+
+  api('/engine/journal').then(function(d) {
+    var entries = d.entries || [];
+    if (entries.length === 0) {
+      card.innerHTML = '<h3>Journal Entries</h3><div class="empty"><div class="empty-icon">&#128216;</div>No journal entries yet.</div>';
+      return;
+    }
+    var rows = entries.map(function(e) {
+      var rollback = (e.status || '').toLowerCase() !== 'rolled_back'
+        ? '<button class="btn btn-sm btn-warning" data-rollback-journal="' + e.id + '">Rollback</button>'
+        : '<span class="badge badge-default">Rolled back</span>';
+      return '<tr><td style="font-weight:600">' + esc(e.action || e.type) + '</td><td>' + esc(e.agent || e.agentName) + '</td><td><code>' + esc(e.resource || e.target) + '</code></td><td><span class="badge badge-' + (e.status || 'completed') + '">' + (e.status || 'completed') + '</span></td><td style="color:var(--text-muted);font-size:12px">' + new Date(e.created_at || e.createdAt).toLocaleDateString() + '</td><td>' + rollback + '</td></tr>';
+    }).join('');
+    card.innerHTML = '<h3>Journal Entries (' + entries.length + ')</h3>' + renderTable(['Action', 'Agent', 'Resource', 'Status', 'Time', ''], rows);
+
+    el.querySelectorAll('[data-rollback-journal]').forEach(function(btn) {
+      btn.onclick = function() {
+        rollbackEntry(btn.getAttribute('data-rollback-journal'));
+      };
+    });
+  }).catch(function() {
+    card.innerHTML = '<h3>Journal Entries</h3><div class="empty"><div class="empty-icon">&#128216;</div>No journal entries yet.</div>';
+  });
+}
+
+function rollbackEntry(id) {
+  if (!confirm('Rollback this action? This cannot be undone.')) return;
+  api('/engine/journal/' + id + '/rollback', { method: 'POST' })
+    .then(function() { toast('Action rolled back', 'success'); loadJournal(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}

package/dashboards/html/src/pages/login.js

@@ -0,0 +1,84 @@
+// Login page — form handler
+
+import { getApiUrl, setToken } from '../api.js';
+
+export var currentUser = null;
+
+var _showAppCallback = null;
+
+export function setShowAppCallback(fn) {
+  _showAppCallback = fn;
+}
+
+export function setCurrentUser(u) {
+  currentUser = u;
+}
+
+export function initLogin() {
+  var form = document.querySelector('#login-box form');
+  if (form) {
+    form.onsubmit = function(e) {
+      doLogin(e);
+    };
+  }
+}
+
+function doLogin(e) {
+  e.preventDefault();
+  var btn = document.getElementById('login-btn');
+  btn.textContent = 'Signing in...';
+  btn.disabled = true;
+  fetch(getApiUrl() + '/auth/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      email: document.getElementById('login-email').value,
+      password: document.getElementById('login-password').value,
+    }),
+  })
+    .then(function(r) { return r.json(); })
+    .then(function(d) {
+      if (d.error) throw new Error(d.error);
+      setToken(d.token);
+      localStorage.setItem('am_token', d.token);
+      currentUser = d.user;
+      if (_showAppCallback) _showAppCallback();
+    })
+    .catch(function(err) {
+      document.getElementById('login-error').style.display = 'block';
+      document.getElementById('login-error').textContent = err.message;
+    })
+    .finally(function() {
+      btn.textContent = 'Sign In';
+      btn.disabled = false;
+    });
+}
+
+export function doLogout() {
+  localStorage.removeItem('am_token');
+  setToken(null);
+  currentUser = null;
+  document.getElementById('app').style.display = 'none';
+  document.getElementById('login-screen').style.display = 'flex';
+}
+
+export function checkAuth() {
+  var storedToken = localStorage.getItem('am_token');
+  if (!storedToken) return;
+  setToken(storedToken);
+  fetch(getApiUrl() + '/auth/me', {
+    headers: { 'Authorization': 'Bearer ' + storedToken },
+  })
+    .then(function(r) {
+      if (!r.ok) throw new Error();
+      return r.json();
+    })
+    .then(function(u) {
+      currentUser = u;
+      if (_showAppCallback) _showAppCallback();
+    })
+    .catch(function() {
+      localStorage.removeItem('am_token');
+      setToken(null);
+    });
+}