@agenticmail/enterprise 0.5.297 → 0.5.299

package/dist/dashboard/pages/organizations.js

@@ -0,0 +1,335 @@
+import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall } from '../components/utils.js';
+import { I } from '../components/icons.js';
+import { Modal } from '../components/modal.js';
+import { HelpButton } from '../components/help-button.js';
+
+function slugify(text) {
+  return (text || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+}
+
+export function OrganizationsPage() {
+  var app = useApp();
+  var toast = app.toast;
+
+  var _orgs = useState([]);
+  var orgs = _orgs[0]; var setOrgs = _orgs[1];
+  var _loading = useState(true);
+  var loading = _loading[0]; var setLoading = _loading[1];
+  var _showCreate = useState(false);
+  var showCreate = _showCreate[0]; var setShowCreate = _showCreate[1];
+  var _editOrg = useState(null);
+  var editOrg = _editOrg[0]; var setEditOrg = _editOrg[1];
+  var _detailOrg = useState(null);
+  var detailOrg = _detailOrg[0]; var setDetailOrg = _detailOrg[1];
+  var _detailAgents = useState([]);
+  var detailAgents = _detailAgents[0]; var setDetailAgents = _detailAgents[1];
+  var _allAgents = useState([]);
+  var allAgents = _allAgents[0]; var setAllAgents = _allAgents[1];
+  var _assignAgentId = useState('');
+  var assignAgentId = _assignAgentId[0]; var setAssignAgentId = _assignAgentId[1];
+  var _acting = useState('');
+  var acting = _acting[0]; var setActing = _acting[1];
+
+  // Form state
+  var _fname = useState('');
+  var fname = _fname[0]; var setFname = _fname[1];
+  var _fslug = useState('');
+  var fslug = _fslug[0]; var setFslug = _fslug[1];
+  var _fcontact = useState('');
+  var fcontact = _fcontact[0]; var setFcontact = _fcontact[1];
+  var _femail = useState('');
+  var femail = _femail[0]; var setFemail = _femail[1];
+  var _fdesc = useState('');
+  var fdesc = _fdesc[0]; var setFdesc = _fdesc[1];
+  var _slugManual = useState(false);
+  var slugManual = _slugManual[0]; var setSlugManual = _slugManual[1];
+
+  var loadOrgs = useCallback(function() {
+    setLoading(true);
+    apiCall('/organizations').then(function(data) {
+      setOrgs(data.organizations || []);
+    }).catch(function(err) {
+      toast(err.message, 'error');
+    }).finally(function() { setLoading(false); });
+  }, []);
+
+  useEffect(function() { loadOrgs(); }, []);
+
+  var loadAllAgents = function() {
+    apiCall('/agents?limit=200').then(function(data) {
+      setAllAgents(data.agents || []);
+    }).catch(function() {});
+  };
+
+  var openCreate = function() {
+    setFname(''); setFslug(''); setFcontact(''); setFemail(''); setFdesc(''); setSlugManual(false);
+    setShowCreate(true);
+  };
+
+  var openEdit = function(org) {
+    setFname(org.name || ''); setFslug(org.slug || ''); setFcontact(org.contact_name || ''); setFemail(org.contact_email || ''); setFdesc(org.description || '');
+    setEditOrg(org);
+  };
+
+  var openDetail = function(org) {
+    setDetailOrg(org);
+    loadAllAgents();
+    apiCall('/organizations/' + org.id).then(function(data) {
+      setDetailAgents(data.agents || []);
+      setDetailOrg(data);
+    }).catch(function(err) { toast(err.message, 'error'); });
+  };
+
+  var doCreate = function() {
+    setActing('create');
+    apiCall('/organizations', {
+      method: 'POST',
+      body: JSON.stringify({ name: fname, slug: fslug, contact_name: fcontact, contact_email: femail, description: fdesc })
+    }).then(function() {
+      toast('Organization created', 'success');
+      setShowCreate(false);
+      loadOrgs();
+    }).catch(function(err) { toast(err.message, 'error'); })
+    .finally(function() { setActing(''); });
+  };
+
+  var doEdit = function() {
+    setActing('edit');
+    apiCall('/organizations/' + editOrg.id, {
+      method: 'PATCH',
+      body: JSON.stringify({ name: fname, contact_name: fcontact, contact_email: femail, description: fdesc })
+    }).then(function() {
+      toast('Organization updated', 'success');
+      setEditOrg(null);
+      loadOrgs();
+    }).catch(function(err) { toast(err.message, 'error'); })
+    .finally(function() { setActing(''); });
+  };
+
+  var doToggle = function(org) {
+    setActing('toggle-' + org.id);
+    apiCall('/organizations/' + org.id + '/toggle', { method: 'POST' })
+    .then(function() {
+      toast('Organization ' + (org.is_active ? 'deactivated' : 'activated'), 'success');
+      loadOrgs();
+      if (detailOrg && detailOrg.id === org.id) openDetail(org);
+    }).catch(function(err) { toast(err.message, 'error'); })
+    .finally(function() { setActing(''); });
+  };
+
+  var doDelete = function(org) {
+    if (!window.__showConfirm) return;
+    window.__showConfirm({ title: 'Delete Organization', message: 'Are you sure you want to delete "' + org.name + '"? This cannot be undone.' }).then(function(confirmed) {
+      if (!confirmed) return;
+      setActing('delete-' + org.id);
+      apiCall('/organizations/' + org.id, { method: 'DELETE' })
+      .then(function() {
+        toast('Organization deleted', 'success');
+        loadOrgs();
+        if (detailOrg && detailOrg.id === org.id) setDetailOrg(null);
+      }).catch(function(err) { toast(err.message, 'error'); })
+      .finally(function() { setActing(''); });
+    });
+  };
+
+  var doAssignAgent = function() {
+    if (!assignAgentId || !detailOrg) return;
+    setActing('assign');
+    apiCall('/agents/' + assignAgentId + '/assign-org', {
+      method: 'POST',
+      body: JSON.stringify({ orgId: detailOrg.id })
+    }).then(function() {
+      toast('Agent assigned', 'success');
+      setAssignAgentId('');
+      openDetail(detailOrg);
+      loadOrgs();
+    }).catch(function(err) { toast(err.message, 'error'); })
+    .finally(function() { setActing(''); });
+  };
+
+  var doUnassignAgent = function(agentId) {
+    setActing('unassign-' + agentId);
+    apiCall('/agents/' + agentId + '/unassign-org', { method: 'POST' })
+    .then(function() {
+      toast('Agent unassigned', 'success');
+      openDetail(detailOrg);
+      loadOrgs();
+    }).catch(function(err) { toast(err.message, 'error'); })
+    .finally(function() { setActing(''); });
+  };
+
+  var unassignedAgents = allAgents.filter(function(a) {
+    return !a.client_org_id && detailAgents.every(function(da) { return da.id !== a.id; });
+  });
+
+  if (loading) return h('div', { style: { padding: 40, textAlign: 'center', color: 'var(--text-muted)' } }, 'Loading organizations...');
+
+  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: 8 } },
+        h('h1', { style: { fontSize: 20, fontWeight: 700 } }, 'Organizations'),
+        h(HelpButton, { label: 'Organizations' },
+          h('p', null, 'Manage client organizations and assign agents to them. Each organization represents a tenant or client that your agents serve.'),
+          h('ul', { style: { paddingLeft: 20, margin: '8px 0' } },
+            h('li', null, 'Create organizations for each client or department'),
+            h('li', null, 'Assign agents to organizations to control access'),
+            h('li', null, 'Toggle organizations active/inactive to suspend all linked agents'),
+            h('li', null, 'Delete organizations only after unassigning all agents')
+          )
+        )
+      ),
+      h('button', { className: 'btn btn-primary', onClick: openCreate }, I.plus(), ' New Organization')
+    ),
+
+    // Org cards
+    orgs.length === 0
+      ? h('div', { className: 'card', style: { textAlign: 'center', padding: 40 } },
+          h('div', { style: { fontSize: 48, marginBottom: 12 } }, '🏢'),
+          h('div', { style: { fontSize: 15, fontWeight: 600, marginBottom: 4 } }, 'No organizations yet'),
+          h('div', { style: { color: 'var(--text-muted)', fontSize: 13, marginBottom: 16 } }, 'Create your first client organization to start managing multi-tenant agent deployments.'),
+          h('button', { className: 'btn btn-primary', onClick: openCreate }, I.plus(), ' Create Organization')
+        )
+      : h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))', gap: 16 } },
+          orgs.map(function(org) {
+            return h('div', { key: org.id, className: 'card', style: { cursor: 'pointer', transition: 'border-color 0.15s', position: 'relative' }, onClick: function() { openDetail(org); } },
+              h('div', { className: 'card-body' },
+                h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 } },
+                  h('div', null,
+                    h('div', { style: { fontSize: 16, fontWeight: 700, marginBottom: 2 } }, org.name),
+                    h('div', { style: { fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-mono, monospace)' } }, org.slug)
+                  ),
+                  h('span', { className: 'badge badge-' + (org.is_active ? 'success' : 'warning') }, org.is_active ? 'Active' : 'Inactive')
+                ),
+                org.description && h('div', { style: { fontSize: 13, color: 'var(--text-secondary)', marginBottom: 12, lineHeight: 1.5 } }, org.description),
+                h('div', { style: { display: 'flex', gap: 16, fontSize: 12, color: 'var(--text-muted)' } },
+                  h('span', null, I.agents(), ' ', (org.agent_count || 0), ' agent', (org.agent_count || 0) !== 1 ? 's' : ''),
+                  org.contact_email && h('span', null, '✉ ', org.contact_email),
+                  org.created_at && h('span', null, new Date(org.created_at).toLocaleDateString())
+                ),
+                h('div', { style: { display: 'flex', gap: 6, marginTop: 12, borderTop: '1px solid var(--border)', paddingTop: 10 }, onClick: function(e) { e.stopPropagation(); } },
+                  h('button', { className: 'btn btn-ghost btn-sm', onClick: function() { openEdit(org); } }, I.edit(), ' Edit'),
+                  h('button', { className: 'btn btn-ghost btn-sm', disabled: acting === 'toggle-' + org.id, onClick: function() { doToggle(org); } },
+                    org.is_active ? 'Deactivate' : 'Activate'
+                  ),
+                  (org.agent_count || 0) === 0 && h('button', { className: 'btn btn-ghost btn-sm', style: { color: 'var(--danger)' }, disabled: acting === 'delete-' + org.id, onClick: function() { doDelete(org); } }, I.trash(), ' Delete')
+                )
+              )
+            );
+          })
+        ),
+
+    // Create Modal
+    showCreate && h(Modal, { title: 'Create Organization', onClose: function() { setShowCreate(false); } },
+      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14, padding: 4 } },
+        h('div', null,
+          h('label', { style: { fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4 } }, 'Name *'),
+          h('input', { className: 'input', value: fname, onInput: function(e) { setFname(e.target.value); if (!slugManual) setFslug(slugify(e.target.value)); }, placeholder: 'Acme Corporation' })
+        ),
+        h('div', null,
+          h('label', { style: { fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4 } }, 'Slug *'),
+          h('input', { className: 'input', value: fslug, onInput: function(e) { setFslug(e.target.value); setSlugManual(true); }, placeholder: 'acme-corporation', style: { fontFamily: 'var(--font-mono, monospace)' } })
+        ),
+        h('div', null,
+          h('label', { style: { fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4 } }, 'Contact Name'),
+          h('input', { className: 'input', value: fcontact, onInput: function(e) { setFcontact(e.target.value); }, placeholder: 'John Doe' })
+        ),
+        h('div', null,
+          h('label', { style: { fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4 } }, 'Contact Email'),
+          h('input', { className: 'input', type: 'email', value: femail, onInput: function(e) { setFemail(e.target.value); }, placeholder: 'john@acme.com' })
+        ),
+        h('div', null,
+          h('label', { style: { fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4 } }, 'Description'),
+          h('textarea', { className: 'input', value: fdesc, onInput: function(e) { setFdesc(e.target.value); }, placeholder: 'Brief description...', rows: 3, style: { resize: 'vertical' } })
+        ),
+        h('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 8 } },
+          h('button', { className: 'btn btn-secondary', onClick: function() { setShowCreate(false); } }, 'Cancel'),
+          h('button', { className: 'btn btn-primary', disabled: !fname || !fslug || acting === 'create', onClick: doCreate }, acting === 'create' ? 'Creating...' : 'Create')
+        )
+      )
+    ),
+
+    // Edit Modal
+    editOrg && h(Modal, { title: 'Edit Organization', onClose: function() { setEditOrg(null); } },
+      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14, padding: 4 } },
+        h('div', null,
+          h('label', { style: { fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4 } }, 'Name'),
+          h('input', { className: 'input', value: fname, onInput: function(e) { setFname(e.target.value); } })
+        ),
+        h('div', null,
+          h('label', { style: { fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4 } }, 'Slug'),
+          h('input', { className: 'input', value: fslug, disabled: true, style: { fontFamily: 'var(--font-mono, monospace)', opacity: 0.6 } })
+        ),
+        h('div', null,
+          h('label', { style: { fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4 } }, 'Contact Name'),
+          h('input', { className: 'input', value: fcontact, onInput: function(e) { setFcontact(e.target.value); } })
+        ),
+        h('div', null,
+          h('label', { style: { fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4 } }, 'Contact Email'),
+          h('input', { className: 'input', type: 'email', value: femail, onInput: function(e) { setFemail(e.target.value); } })
+        ),
+        h('div', null,
+          h('label', { style: { fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4 } }, 'Description'),
+          h('textarea', { className: 'input', value: fdesc, onInput: function(e) { setFdesc(e.target.value); }, rows: 3, style: { resize: 'vertical' } })
+        ),
+        h('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 8 } },
+          h('button', { className: 'btn btn-secondary', onClick: function() { setEditOrg(null); } }, 'Cancel'),
+          h('button', { className: 'btn btn-primary', disabled: !fname || acting === 'edit', onClick: doEdit }, acting === 'edit' ? 'Saving...' : 'Save Changes')
+        )
+      )
+    ),
+
+    // Detail Modal
+    detailOrg && h(Modal, { title: detailOrg.name || 'Organization Detail', onClose: function() { setDetailOrg(null); }, wide: true },
+      h('div', { style: { padding: 4 } },
+        // Org info
+        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginBottom: 20 } },
+          h('div', null,
+            h('div', { style: { fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 } }, 'Slug'),
+            h('div', { style: { fontFamily: 'var(--font-mono, monospace)', fontSize: 13 } }, detailOrg.slug)
+          ),
+          h('div', null,
+            h('div', { style: { fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 } }, 'Status'),
+            h('span', { className: 'badge badge-' + (detailOrg.is_active ? 'success' : 'warning') }, detailOrg.is_active ? 'Active' : 'Inactive')
+          ),
+          h('div', null,
+            h('div', { style: { fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 } }, 'Contact'),
+            h('div', { style: { fontSize: 13 } }, detailOrg.contact_name || '—'),
+            detailOrg.contact_email && h('div', { style: { fontSize: 12, color: 'var(--text-muted)' } }, detailOrg.contact_email)
+          )
+        ),
+        detailOrg.description && h('div', { style: { fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16, padding: 12, background: 'var(--bg-tertiary)', borderRadius: 'var(--radius)' } }, detailOrg.description),
+
+        // Linked agents
+        h('div', { style: { fontSize: 14, fontWeight: 700, marginBottom: 10 } }, 'Linked Agents (' + detailAgents.length + ')'),
+        detailAgents.length > 0
+          ? h('div', { style: { display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 16 } },
+              detailAgents.map(function(a) {
+                var stateColor = { active: 'success', running: 'success', suspended: 'warning', archived: 'neutral' }[a.status] || 'neutral';
+                return h('div', { key: a.id, style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg-tertiary)', borderRadius: 'var(--radius)' } },
+                  h('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
+                    h('span', { style: { fontWeight: 600, fontSize: 13 } }, a.name),
+                    h('span', { style: { fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-mono, monospace)' } }, a.email),
+                    h('span', { className: 'badge badge-' + stateColor, style: { fontSize: 10 } }, a.status)
+                  ),
+                  h('button', { className: 'btn btn-ghost btn-sm', style: { color: 'var(--danger)' }, disabled: acting === 'unassign-' + a.id, onClick: function() { doUnassignAgent(a.id); } }, 'Unassign')
+                );
+              })
+            )
+          : h('div', { style: { padding: 16, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13, background: 'var(--bg-tertiary)', borderRadius: 'var(--radius)', marginBottom: 16 } }, 'No agents assigned to this organization'),
+
+        // Assign agent
+        h('div', { style: { fontSize: 14, fontWeight: 700, marginBottom: 8 } }, 'Assign Agent'),
+        h('div', { style: { display: 'flex', gap: 8 } },
+          h('select', { className: 'input', value: assignAgentId, onChange: function(e) { setAssignAgentId(e.target.value); }, style: { flex: 1 } },
+            h('option', { value: '' }, '— Select an unassigned agent —'),
+            unassignedAgents.map(function(a) {
+              return h('option', { key: a.id, value: a.id }, a.name + (a.role ? ' (' + a.role + ')' : ''));
+            })
+          ),
+          h('button', { className: 'btn btn-primary btn-sm', disabled: !assignAgentId || acting === 'assign', onClick: doAssignAgent }, acting === 'assign' ? 'Assigning...' : 'Assign')
+        )
+      )
+    )
+  );
+}

package/dist/dashboard/pages/users.js

@@ -6,23 +6,37 @@ import { HelpButton } from '../components/help-button.js';
 // ─── Permission Editor Component ───────────────────
 
 function PermissionEditor({ userId, userName, currentPerms, pageRegistry, onSave, onClose }) {
-  // Deep clone perms
+  // Deep clone perms (skip _allowedAgents from page grants)
   var [grants, setGrants] = useState(function() {
     if (currentPerms === '*') {
-      // Start with all pages selected (all tabs)
       var all = {};
       Object.keys(pageRegistry).forEach(function(pid) { all[pid] = true; });
       return all;
     }
-    // Clone existing
     var c = {};
     Object.keys(currentPerms || {}).forEach(function(pid) {
+      if (pid === '_allowedAgents') return; // skip agent field
       var g = currentPerms[pid];
       c[pid] = g === true ? true : (Array.isArray(g) ? g.slice() : true);
     });
     return c;
   });
   var [fullAccess, setFullAccess] = useState(currentPerms === '*');
+
+  // Agent access control
+  var [agents, setAgents] = useState([]);
+  var [allowedAgents, setAllowedAgents] = useState(function() {
+    if (currentPerms === '*') return '*';
+    return (currentPerms || {})._allowedAgents || '*';
+  });
+  var [allAgentsAccess, setAllAgentsAccess] = useState(function() {
+    if (currentPerms === '*') return true;
+    return (currentPerms || {})._allowedAgents === '*' || !(currentPerms || {})._allowedAgents;
+  });
+
+  useEffect(function() {
+    apiCall('/agents').then(function(d) { setAgents(d.agents || d || []); }).catch(function() {});
+  }, []);
   var [saving, setSaving] = useState(false);
   var [expandedPage, setExpandedPage] = useState(null);
 
@@ -86,8 +100,11 @@ function PermissionEditor({ userId, userName, currentPerms, pageRegistry, onSave
       var all = {};
       Object.keys(pageRegistry).forEach(function(pid) { all[pid] = true; });
       setGrants(all);
+      setAllAgentsAccess(true);
+      setAllowedAgents('*');
     } else {
       setGrants({});
+      setAllAgentsAccess(true);
     }
   };
 
@@ -101,7 +118,17 @@ function PermissionEditor({ userId, userName, currentPerms, pageRegistry, onSave
   var doSave = async function() {
     setSaving(true);
     try {
-      var permsToSave = fullAccess ? '*' : grants;
+      var permsToSave;
+      if (fullAccess) {
+        permsToSave = '*';
+      } else {
+        permsToSave = Object.assign({}, grants);
+        if (!allAgentsAccess && Array.isArray(allowedAgents)) {
+          permsToSave._allowedAgents = allowedAgents;
+        } else {
+          permsToSave._allowedAgents = '*';
+        }
+      }
       await onSave(permsToSave);
     } catch(e) { /* handled by parent */ }
     setSaving(false);
@@ -201,11 +228,61 @@ function PermissionEditor({ userId, userName, currentPerms, pageRegistry, onSave
       })
     ),
 
+    // ─── Agent Access ──────────────────────────
+    !fullAccess && h('div', { style: { marginTop: 16 } },
+      h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 } },
+        h('div', null,
+          h('strong', { style: { fontSize: 13 } }, 'Agent Access'),
+          h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 1 } }, 'Which agents this user can see and manage')
+        ),
+        h('label', { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, cursor: 'pointer' } },
+          h('input', { type: 'checkbox', checked: allAgentsAccess, onChange: function() {
+            var newVal = !allAgentsAccess;
+            setAllAgentsAccess(newVal);
+            if (newVal) setAllowedAgents('*');
+            else setAllowedAgents([]);
+          }, style: _checkbox }),
+          'All Agents'
+        )
+      ),
+      !allAgentsAccess && h('div', { style: { maxHeight: 180, overflowY: 'auto', border: '1px solid var(--border)', borderRadius: 8 } },
+        agents.length === 0
+          ? h('div', { style: { padding: 16, textAlign: 'center', color: 'var(--text-muted)', fontSize: 12 } }, 'No agents found')
+          : agents.map(function(a) {
+              var checked = Array.isArray(allowedAgents) && allowedAgents.indexOf(a.id) >= 0;
+              return h('div', {
+                key: a.id,
+                style: Object.assign({}, _cs, checked ? { background: 'var(--bg-tertiary)' } : {}),
+                onClick: function() {
+                  setAllowedAgents(function(prev) {
+                    var arr = Array.isArray(prev) ? prev.slice() : [];
+                    var idx = arr.indexOf(a.id);
+                    if (idx >= 0) arr.splice(idx, 1);
+                    else arr.push(a.id);
+                    return arr;
+                  });
+                }
+              },
+                h('input', { type: 'checkbox', checked: checked, readOnly: true, style: _checkbox }),
+                h('div', { style: { flex: 1 } },
+                  h('div', { style: { fontWeight: 500, fontSize: 13 } }, a.displayName || a.name || a.id),
+                  a.role && h('div', { style: { fontSize: 11, color: 'var(--text-muted)' } }, a.role)
+                ),
+                a.status && h('span', { className: 'badge badge-' + (a.status === 'active' || a.status === 'running' ? 'success' : 'neutral'), style: { fontSize: 9 } }, a.status)
+              );
+            })
+      ),
+      !allAgentsAccess && Array.isArray(allowedAgents) && h('div', { style: { marginTop: 4, fontSize: 11, color: 'var(--text-muted)' } },
+        allowedAgents.length === 0 ? 'No agents selected — user will see no agents' : allowedAgents.length + ' agent' + (allowedAgents.length !== 1 ? 's' : '') + ' selected'
+      )
+    ),
+
     // Summary
     h('div', { style: { marginTop: 12, padding: 8, background: 'var(--bg-tertiary)', borderRadius: 6, fontSize: 11, color: 'var(--text-muted)' } },
       fullAccess
-        ? 'This user has full access to all pages and tabs.'
-        : 'Access to ' + Object.keys(grants).length + ' of ' + Object.keys(pageRegistry).length + ' pages.'
+        ? 'This user has full access to all pages, tabs, and agents.'
+        : 'Access to ' + Object.keys(grants).length + ' of ' + Object.keys(pageRegistry).length + ' pages' +
+          (allAgentsAccess ? ', all agents.' : ', ' + (Array.isArray(allowedAgents) ? allowedAgents.length : 0) + ' agents.')
     )
   );
 }
@@ -214,15 +291,31 @@ function PermissionEditor({ userId, userName, currentPerms, pageRegistry, onSave
 
 function InlinePermissionPicker({ permissions, pageRegistry, onChange }) {
   var [expandedPage, setExpandedPage] = useState(null);
-
-  // Resolve grants from permissions
-  var grants = permissions === '*' ? (function() { var a = {}; Object.keys(pageRegistry).forEach(function(p) { a[p] = true; }); return a; })() : (permissions || {});
+  var [agents, setAgents] = useState([]);
+  useEffect(function() { apiCall('/agents').then(function(d) { setAgents(d.agents || d || []); }).catch(function() {}); }, []);
+
+  // Resolve grants from permissions (skip _allowedAgents)
+  var rawGrants = permissions === '*' ? (function() { var a = {}; Object.keys(pageRegistry).forEach(function(p) { a[p] = true; }); return a; })() : (permissions || {});
+  var grants = {};
+  Object.keys(rawGrants).forEach(function(k) { if (k !== '_allowedAgents') grants[k] = rawGrants[k]; });
+  var currentAllowed = permissions === '*' ? '*' : (rawGrants._allowedAgents || '*');
+  var allAgentsMode = currentAllowed === '*';
+
+  var emitChange = function(nextGrants, nextAllowed) {
+    var result = Object.assign({}, nextGrants);
+    if (nextAllowed !== undefined) result._allowedAgents = nextAllowed;
+    else if (currentAllowed !== '*') result._allowedAgents = currentAllowed;
+    var allPages = Object.keys(nextGrants).length === Object.keys(pageRegistry).length && Object.values(nextGrants).every(function(v) { return v === true; });
+    var allAg = (result._allowedAgents || '*') === '*';
+    if (allPages && allAg) return onChange('*');
+    onChange(result);
+  };
 
   var togglePage = function(pid) {
     var next = Object.assign({}, grants);
     if (next[pid]) { delete next[pid]; if (expandedPage === pid) setExpandedPage(null); }
     else { next[pid] = true; }
-    onChange(Object.keys(next).length === Object.keys(pageRegistry).length ? '*' : next);
+    emitChange(next);
   };
 
   var toggleTab = function(pid, tabId) {
@@ -243,7 +336,7 @@ function InlinePermissionPicker({ permissions, pageRegistry, onChange }) {
         next[pid] = newArr.length === allTabs.length ? true : newArr;
       }
     }
-    onChange(Object.keys(next).length === Object.keys(pageRegistry).length && Object.values(next).every(function(v) { return v === true; }) ? '*' : next);
+    emitChange(next);
   };
 
   var isTabChecked = function(pid, tabId) {
@@ -288,7 +381,30 @@ function InlinePermissionPicker({ permissions, pageRegistry, onChange }) {
           );
         })
       );
-    })
+    }),
+    // Agent access section
+    agents.length > 0 && h('div', { style: { marginTop: 8 } },
+      h('div', { style: { fontSize: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-muted)', padding: '4px 10px 2px' } }, 'Agent Access'),
+      h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '4px 10px', fontSize: 12, cursor: 'pointer' }, onClick: function() {
+        emitChange(grants, allAgentsMode ? [] : '*');
+      } },
+        h('input', { type: 'checkbox', checked: allAgentsMode, readOnly: true, style: { width: 14, height: 14, accentColor: 'var(--primary)', cursor: 'pointer' } }),
+        h('span', { style: { fontWeight: 500 } }, 'All Agents')
+      ),
+      !allAgentsMode && agents.map(function(a) {
+        var checked = Array.isArray(currentAllowed) && currentAllowed.indexOf(a.id) >= 0;
+        return h('div', { key: a.id, style: { display: 'flex', alignItems: 'center', gap: 8, padding: '3px 10px 3px 28px', fontSize: 11, cursor: 'pointer' }, onClick: function() {
+          var arr = Array.isArray(currentAllowed) ? currentAllowed.slice() : [];
+          var idx = arr.indexOf(a.id);
+          if (idx >= 0) arr.splice(idx, 1); else arr.push(a.id);
+          emitChange(grants, arr);
+        } },
+          h('input', { type: 'checkbox', checked: checked, readOnly: true, style: { width: 13, height: 13, accentColor: 'var(--primary)', cursor: 'pointer' } }),
+          h('span', null, a.displayName || a.name || a.id),
+          a.role && h('span', { style: { color: 'var(--text-muted)', marginLeft: 4 } }, '(' + a.role + ')')
+        );
+      })
+    )
   );
 }
 

package/dist/factory-4JY52C3T.js

@@ -0,0 +1,9 @@
+import {
+  createAdapter,
+  getSupportedDatabases
+} from "./chunk-55QVWFKC.js";
+import "./chunk-KFQGP6VL.js";
+export {
+  createAdapter,
+  getSupportedDatabases
+};

package/dist/index.js

@@ -1,7 +1,7 @@
 import {
   provision,
   runSetupWizard
-} from "./chunk-A5LURBEY.js";
+} from "./chunk-633X6XDY.js";
 import {
   AgenticMailManager,
   GoogleEmailProvider,
@@ -42,7 +42,7 @@ import {
   requireRole,
   securityHeaders,
   validate
-} from "./chunk-WQRGOMQJ.js";
+} from "./chunk-7FEEWUNJ.js";
 import "./chunk-OF4MUWWS.js";
 import {
   PROVIDER_REGISTRY,
@@ -113,7 +113,7 @@ import {
 import {
   createAdapter,
   getSupportedDatabases
-} from "./chunk-Y3WLLVOK.js";
+} from "./chunk-55QVWFKC.js";
 import {
   AGENTICMAIL_TOOLS,
   ALL_TOOLS,