@agenticmail/enterprise 0.3.2 → 0.4.0

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

@@ -0,0 +1,114 @@
+// Skills page — builtin catalog + installed community skills
+
+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 loadSkills() {
+  var el = document.getElementById('page-content');
+  el.innerHTML = '<div><h2 class="page-title">Skills</h2><p class="page-desc">Builtin capabilities and community skill extensions</p></div>' +
+    '<div class="card"><h3>Builtin Skills</h3><div class="page-desc">Loading...</div></div>' +
+    '<div class="card"><h3>Installed Community Skills</h3><div class="page-desc">Loading...</div></div>';
+
+  var cards = el.querySelectorAll('.card');
+
+  // Load builtin skills by category
+  api('/engine/skills/by-category').then(function(d) {
+    var categories = d.categories || d || {};
+    var entries = typeof categories === 'object' && !Array.isArray(categories) ? Object.entries(categories) : [];
+
+    if (entries.length === 0) {
+      cards[0].innerHTML = '<h3>Builtin Skills</h3><div class="empty"><div class="empty-icon">&#9889;</div>No builtin skills found.</div>';
+      return;
+    }
+
+    var html = '<h3>Builtin Skills</h3>';
+    entries.forEach(function(entry) {
+      var catName = entry[0];
+      var skills = Array.isArray(entry[1]) ? entry[1] : [];
+      var skillCards = skills.map(function(s) {
+        return '<div style="border:1px solid var(--border);border-radius:8px;padding:14px;background:var(--bg)">' +
+          '<div style="font-weight:600;font-size:14px;margin-bottom:4px">' + esc(s.name || s.id || '-') + '</div>' +
+          '<div style="font-size:12px;color:var(--text-muted);margin-bottom:8px;line-height:1.4">' + esc(s.description || '') + '</div>' +
+          (s.version ? '<span style="font-size:11px;color:var(--text-muted)">v' + esc(s.version) + '</span>' : '') +
+          '</div>';
+      }).join('');
+
+      html += '<div style="margin-bottom:20px">' +
+        '<h4 style="font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:10px">' + esc(catName) + '</h4>' +
+        '<div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:12px">' + skillCards + '</div>' +
+        '</div>';
+    });
+
+    cards[0].innerHTML = html;
+  }).catch(function() {
+    cards[0].innerHTML = '<h3>Builtin Skills</h3><div class="empty"><div class="empty-icon">&#9889;</div>No builtin skills found.</div>';
+  });
+
+  // Load installed community skills
+  api('/engine/community/installed?orgId=default').then(function(d) {
+    var installed = d.skills || (Array.isArray(d) ? d : []);
+
+    if (installed.length === 0) {
+      cards[1].innerHTML = '<h3>Installed Community Skills</h3><div class="empty"><div class="empty-icon">&#128230;</div>No community skills installed.</div>';
+      return;
+    }
+
+    var rows = installed.map(function(s) {
+      var isEnabled = s.enabled !== false && s.status !== 'disabled';
+      var toggleBtn = isEnabled
+        ? '<button class="btn btn-sm" data-disable-skill="' + s.id + '">Disable</button>'
+        : '<button class="btn btn-sm btn-primary" data-enable-skill="' + s.id + '">Enable</button>';
+      var uninstallBtn = '<button class="btn btn-sm btn-danger" data-uninstall-skill="' + s.id + '">Uninstall</button>';
+
+      return '<tr>' +
+        '<td style="font-weight:600">' + esc(s.name || s.id || '-') + '</td>' +
+        '<td style="color:var(--text-muted);font-size:12px">' + esc(s.version || '-') + '</td>' +
+        '<td>' + (isEnabled ? '<span class="badge badge-success">enabled</span>' : '<span class="badge badge-danger">disabled</span>') + '</td>' +
+        '<td>' + toggleBtn + ' ' + uninstallBtn + '</td>' +
+        '</tr>';
+    }).join('');
+
+    cards[1].innerHTML = '<h3>Installed Community Skills (' + installed.length + ')</h3>' + renderTable(['Name', 'Version', 'Status', 'Actions'], rows);
+
+    el.querySelectorAll('[data-enable-skill]').forEach(function(btn) {
+      btn.onclick = function() {
+        enableSkill(btn.getAttribute('data-enable-skill'));
+      };
+    });
+
+    el.querySelectorAll('[data-disable-skill]').forEach(function(btn) {
+      btn.onclick = function() {
+        disableSkill(btn.getAttribute('data-disable-skill'));
+      };
+    });
+
+    el.querySelectorAll('[data-uninstall-skill]').forEach(function(btn) {
+      btn.onclick = function() {
+        uninstallSkill(btn.getAttribute('data-uninstall-skill'));
+      };
+    });
+  }).catch(function() {
+    cards[1].innerHTML = '<h3>Installed Community Skills</h3><div class="empty"><div class="empty-icon">&#128230;</div>No community skills installed.</div>';
+  });
+}
+
+function enableSkill(id) {
+  api('/engine/community/skills/' + id + '/enable', { method: 'PUT', body: {} })
+    .then(function() { toast('Skill enabled', 'success'); loadSkills(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}
+
+function disableSkill(id) {
+  api('/engine/community/skills/' + id + '/disable', { method: 'PUT', body: {} })
+    .then(function() { toast('Skill disabled', 'success'); loadSkills(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}
+
+function uninstallSkill(id) {
+  if (!confirm('Uninstall this skill?')) return;
+  api('/engine/community/skills/' + id + '/uninstall', { method: 'DELETE' })
+    .then(function() { toast('Skill uninstalled', 'success'); loadSkills(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}

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

@@ -0,0 +1,62 @@
+// Users page — list, create modal
+
+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 loadUsers() {
+  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">Users</h2><p class="page-desc" style="margin:0">Manage team members</p></div><button class="btn btn-primary" style="width:auto" id="btn-new-user">+ New User</button></div><div class="card"><div class="page-desc">Loading...</div></div>';
+
+  document.getElementById('btn-new-user').onclick = function() {
+    openModal('modal-user');
+  };
+
+  api('/users').then(function(d) {
+    var users = d.users || [];
+    if (users.length === 0) {
+      el.querySelector('.card').innerHTML = '<div class="empty"><div class="empty-icon">\ud83d\udc65</div>No users yet</div>';
+      return;
+    }
+    var rows = users.map(function(u) {
+      return '<tr><td style="font-weight:600">' + esc(u.name) + '</td><td style="color:var(--text-dim)">' + esc(u.email) + '</td><td><span class="badge badge-' + u.role + '">' + u.role + '</span></td><td style="color:var(--text-muted);font-size:12px">' + (u.lastLoginAt ? new Date(u.lastLoginAt).toLocaleString() : 'Never') + '</td></tr>';
+    }).join('');
+    el.querySelector('.card').innerHTML = renderTable(['Name', 'Email', 'Role', 'Last Login'], rows);
+  });
+}
+
+export function initUserModal() {
+  var form = document.querySelector('#modal-user form');
+  if (form) {
+    form.onsubmit = function(e) {
+      createUser(e);
+    };
+  }
+  var cancelBtn = document.querySelector('#modal-user .btn[type="button"]');
+  if (cancelBtn) {
+    cancelBtn.onclick = function() {
+      closeModal('modal-user');
+    };
+  }
+}
+
+function createUser(e) {
+  e.preventDefault();
+  api('/users', {
+    method: 'POST',
+    body: {
+      name: document.getElementById('new-user-name').value,
+      email: document.getElementById('new-user-email').value,
+      role: document.getElementById('new-user-role').value,
+      password: document.getElementById('new-user-password').value,
+    },
+  })
+    .then(function() {
+      toast('User created!', 'success');
+      closeModal('modal-user');
+      loadUsers();
+    })
+    .catch(function(err) { toast(err.message, 'error'); });
+}

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

@@ -0,0 +1,105 @@
+// Vault page — encrypted secrets management
+
+import { api } from '../api.js';
+import { esc } from '../utils/escape.js';
+import { toast } from '../utils/toast.js';
+import { renderTable } from '../components/table.js';
+
+var CATEGORIES = ['deploy', 'cloud_storage', 'api_key', 'skill_credential', 'custom'];
+
+function categoryBadge(category) {
+  var colors = {
+    deploy: 'primary',
+    cloud_storage: 'info',
+    api_key: 'warning',
+    skill_credential: 'success',
+    custom: 'default',
+  };
+  return '<span class="badge badge-' + (colors[category] || 'default') + '">' + esc(category || 'custom') + '</span>';
+}
+
+export function loadVault() {
+  var el = document.getElementById('page-content');
+
+  var categoryOptions = CATEGORIES.map(function(c) {
+    return '<option value="' + esc(c) + '">' + esc(c.replace(/_/g, ' ')) + '</option>';
+  }).join('');
+
+  el.innerHTML = '<div><h2 class="page-title">Vault</h2><p class="page-desc">Encrypted secrets management</p></div>' +
+    '<div class="card"><h3>Add Secret</h3>' +
+    '<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end">' +
+    '<div class="form-group" style="flex:1;min-width:160px"><label class="form-label">Secret Name</label><input class="input" id="vault-name" placeholder="e.g. OPENAI_API_KEY" required></div>' +
+    '<div class="form-group" style="flex:1;min-width:160px"><label class="form-label">Secret Value</label><input class="input" type="password" id="vault-value" placeholder="Enter secret value" required></div>' +
+    '<div class="form-group" style="min-width:140px"><label class="form-label">Category</label><select class="input" id="vault-category">' + categoryOptions + '</select></div>' +
+    '<div class="form-group"><button class="btn btn-primary" style="width:auto" id="btn-add-secret">Add Secret</button></div>' +
+    '</div></div>' +
+    '<div class="card"><h3>Stored Secrets</h3><div class="page-desc">Loading...</div></div>';
+
+  document.getElementById('btn-add-secret').onclick = function() {
+    addSecret();
+  };
+
+  var cards = el.querySelectorAll('.card');
+
+  api('/engine/vault/secrets?orgId=default').then(function(d) {
+    var secrets = d.secrets || [];
+    if (secrets.length === 0) {
+      cards[1].innerHTML = '<h3>Stored Secrets</h3><div class="empty"><div class="empty-icon">&#128274;</div>No secrets stored yet. Add one above.</div>';
+      return;
+    }
+    var rows = secrets.map(function(s) {
+      return '<tr>' +
+        '<td style="font-weight:600">' + esc(s.name || '-') + '</td>' +
+        '<td>' + categoryBadge(s.category) + '</td>' +
+        '<td style="color:var(--text-muted);font-size:12px">' + esc(s.createdBy || s.created_by || '-') + '</td>' +
+        '<td style="color:var(--text-muted);font-size:12px">' + (s.created_at || s.createdAt ? new Date(s.created_at || s.createdAt).toLocaleDateString() : '-') + '</td>' +
+        '<td>' +
+        '<button class="btn btn-sm" data-rotate-secret="' + s.id + '">Rotate</button> ' +
+        '<button class="btn btn-sm btn-danger" data-delete-secret="' + s.id + '">Delete</button>' +
+        '</td></tr>';
+    }).join('');
+    cards[1].innerHTML = '<h3>Stored Secrets (' + secrets.length + ')</h3>' + renderTable(['Name', 'Category', 'Created By', 'Created', 'Actions'], rows);
+
+    el.querySelectorAll('[data-delete-secret]').forEach(function(btn) {
+      btn.onclick = function() {
+        deleteSecret(btn.getAttribute('data-delete-secret'));
+      };
+    });
+
+    el.querySelectorAll('[data-rotate-secret]').forEach(function(btn) {
+      btn.onclick = function() {
+        rotateSecret(btn.getAttribute('data-rotate-secret'));
+      };
+    });
+  }).catch(function() {
+    cards[1].innerHTML = '<h3>Stored Secrets</h3><div class="empty"><div class="empty-icon">&#128274;</div>No secrets stored yet.</div>';
+  });
+}
+
+function addSecret() {
+  var name = document.getElementById('vault-name').value.trim();
+  var value = document.getElementById('vault-value').value;
+  var category = document.getElementById('vault-category').value;
+  if (!name || !value) return toast('Name and value are required', 'error');
+
+  api('/engine/vault/secrets', {
+    method: 'POST',
+    body: { name: name, value: value, category: category, orgId: 'default' },
+  })
+    .then(function() { toast('Secret added', 'success'); loadVault(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}
+
+function deleteSecret(id) {
+  if (!confirm('Delete this secret?')) return;
+  api('/engine/vault/secrets/' + id, { method: 'DELETE' })
+    .then(function() { toast('Secret deleted', 'success'); loadVault(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}
+
+function rotateSecret(id) {
+  if (!confirm('Rotate encryption for this secret?')) return;
+  api('/engine/vault/secrets/' + id + '/rotate', { method: 'POST', body: {} })
+    .then(function() { toast('Secret encryption rotated', 'success'); loadVault(); })
+    .catch(function(err) { toast(err.message, 'error'); });
+}

package/dashboards/html/src/router.js

@@ -0,0 +1,40 @@
+// SPA hash routing
+
+import { updateNav } from './components/layout.js';
+import { loadDashboard } from './pages/dashboard.js';
+import { loadAgents } from './pages/agents.js';
+import { loadUsers } from './pages/users.js';
+import { loadApiKeys } from './pages/api-keys.js';
+import { loadAudit } from './pages/audit.js';
+import { loadSettings } from './pages/settings.js';
+import { loadDlp } from './pages/dlp.js';
+import { loadGuardrails } from './pages/guardrails.js';
+import { loadJournal } from './pages/journal.js';
+import { loadMessages } from './pages/messages.js';
+import { loadCompliance } from './pages/compliance.js';
+import { loadVault } from './pages/vault.js';
+import { loadSkills } from './pages/skills.js';
+
+export let currentPage = 'dashboard';
+
+var pages = {
+  dashboard: loadDashboard,
+  agents: loadAgents,
+  users: loadUsers,
+  'api-keys': loadApiKeys,
+  audit: loadAudit,
+  settings: loadSettings,
+  dlp: loadDlp,
+  guardrails: loadGuardrails,
+  journal: loadJournal,
+  messages: loadMessages,
+  compliance: loadCompliance,
+  vault: loadVault,
+  skills: loadSkills,
+};
+
+export function navigate(page) {
+  currentPage = page;
+  updateNav(page);
+  (pages[page] || loadDashboard)();
+}

package/dashboards/html/src/utils/escape.js

@@ -0,0 +1,7 @@
+// HTML entity escaping
+
+export function esc(s) {
+  var d = document.createElement('div');
+  d.textContent = s || '';
+  return d.innerHTML;
+}

package/dashboards/html/src/utils/time.js

@@ -0,0 +1,16 @@
+// Relative time formatter
+
+export function timeAgo(iso) {
+  var diff = Date.now() - new Date(iso).getTime();
+  var seconds = Math.floor(diff / 1000);
+  if (seconds < 60) return 'just now';
+  var minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return minutes + 'm ago';
+  var hours = Math.floor(minutes / 60);
+  if (hours < 24) return hours + 'h ago';
+  var days = Math.floor(hours / 24);
+  if (days < 30) return days + 'd ago';
+  var months = Math.floor(days / 30);
+  if (months < 12) return months + 'mo ago';
+  return Math.floor(months / 12) + 'y ago';
+}

package/dashboards/html/src/utils/toast.js

@@ -0,0 +1,10 @@
+// Toast notification
+
+export function toast(msg, type) {
+  var el = document.getElementById('toast');
+  el.textContent = msg;
+  el.className = type || '';
+  el.style.display = 'block';
+  clearTimeout(el._t);
+  el._t = setTimeout(function() { el.style.display = 'none'; }, 3000);
+}