@agenticmail/enterprise 0.3.2 → 0.4.0

package/src/cli.ts

@@ -2,23 +2,83 @@
 /**
  * AgenticMail Enterprise CLI
  *
- * Interactive setup wizard that provisions a cloud-hosted
- * enterprise dashboard for managing AI agent identities.
+ * Commands:
+ *   (none) / setup     Interactive setup wizard
+ *   validate <path>    Validate a community skill manifest
+ *   build-skill        AI-assisted skill scaffolding
+ *   submit-skill       Submit a skill as a PR to agenticmail/enterprise
+ *   recover            Recover a domain registration on a new machine
+ *   verify-domain      Check DNS verification status for your domain
  *
- * Usage: npx @agenticmail/enterprise
- *
- * The wizard is split into modular steps under setup/:
- *   1. Company info   → setup/company.ts
- *   2. Database       → setup/database.ts
- *   3. Deployment     → setup/deployment.ts
- *   4. Custom domain  → setup/domain.ts
- *   → Provisioning    → setup/provision.ts
- *   → Orchestrator    → setup/index.ts
+ * Usage:
+ *   npx @agenticmail/enterprise
+ *   agenticmail-enterprise validate ./community-skills/my-skill/
+ *   agenticmail-enterprise validate --all
+ *   agenticmail-enterprise build-skill
+ *   agenticmail-enterprise submit-skill ./community-skills/my-skill/
+ *   agenticmail-enterprise recover --domain agents.agenticmail.io
+ *   agenticmail-enterprise verify-domain
  */
 
-import { runSetupWizard } from './setup/index.js';
+const args = process.argv.slice(2);
+const command = args[0];
+
+switch (command) {
+  case 'validate':
+    import('./engine/cli-validate.js').then(m => m.runValidate(args.slice(1))).catch(fatal);
+    break;
+
+  case 'build-skill':
+    import('./engine/cli-build-skill.js').then(m => m.runBuildSkill(args.slice(1))).catch(fatal);
+    break;
+
+  case 'submit-skill':
+    import('./engine/cli-submit-skill.js').then(m => m.runSubmitSkill(args.slice(1))).catch(fatal);
+    break;
+
+  case 'recover':
+    import('./domain-lock/cli-recover.js').then(m => m.runRecover(args.slice(1))).catch(fatal);
+    break;
+
+  case 'verify-domain':
+    import('./domain-lock/cli-verify.js').then(m => m.runVerifyDomain(args.slice(1))).catch(fatal);
+    break;
+
+  case '--help':
+  case '-h':
+    console.log(`
+AgenticMail Enterprise CLI
+
+Commands:
+  setup                   Interactive setup wizard (default)
+  validate <path>         Validate a community skill manifest
+    --all                 Validate all skills in community-skills/
+    --json                Machine-readable output
+  build-skill             AI-assisted skill scaffolding
+  submit-skill <path>     Submit a skill as a PR
+  recover                 Recover a domain registration on a new machine
+  verify-domain           Check DNS verification for your domain
+
+Domain Registration:
+  agenticmail-enterprise recover --domain agents.agenticmail.io --key <hex>
+  agenticmail-enterprise verify-domain
+  agenticmail-enterprise verify-domain --domain agents.agenticmail.io
+
+Skill Development:
+  agenticmail-enterprise validate ./community-skills/github-issues/
+  agenticmail-enterprise validate --all
+  agenticmail-enterprise build-skill
+  agenticmail-enterprise submit-skill ./community-skills/my-skill/
+`);
+    break;
+
+  case 'setup':
+  default:
+    import('./setup/index.js').then(m => m.runSetupWizard()).catch(fatal);
+    break;
+}
 
-runSetupWizard().catch((err) => {
+function fatal(err: Error) {
   console.error('Fatal error:', err.message);
   process.exit(1);
-});
+}

package/src/dashboard/app.js

@@ -0,0 +1,246 @@
+// ─── Imports ─────────────────────────────────────────────
+import { h, useState, useEffect, useCallback, useRef, Fragment, AppContext, useApp, apiCall, authCall, engineCall, applyBrandColor } from './components/utils.js';
+import { I } from './components/icons.js';
+import { ErrorBoundary } from './components/error-boundary.js';
+import { Modal } from './components/modal.js';
+import { LoginPage, OnboardingWizard } from './pages/login.js';
+import { DashboardPage, SetupChecklist } from './pages/dashboard.js';
+import { AgentsPage, AgentDetailPage, CreateAgentWizard, DeployModal } from './pages/agents.js';
+import { SkillsPage } from './pages/skills.js';
+import { KnowledgeBasePage } from './pages/knowledge.js';
+import { ApprovalsPage } from './pages/approvals.js';
+import { ActivityPage } from './pages/activity.js';
+import { UsersPage } from './pages/users.js';
+import { AuditPage } from './pages/audit.js';
+import { SettingsPage } from './pages/settings.js';
+import { DLPPage } from './pages/dlp.js';
+import { GuardrailsPage } from './pages/guardrails.js';
+import { JournalPage } from './pages/journal.js';
+import { MessagesPage } from './pages/messages.js';
+import { CompliancePage } from './pages/compliance.js';
+import { CommunitySkillsPage } from './pages/community-skills.js';
+import { DomainStatusPage } from './pages/domain-status.js';
+import { WorkforcePage } from './pages/workforce.js';
+import { KnowledgeContributionsPage } from './pages/knowledge-contributions.js';
+import { SkillConnectionsPage } from './pages/skill-connections.js';
+import { VaultPage } from './pages/vault.js';
+
+// ─── Toast System ────────────────────────────────────────
+let toastId = 0;
+function ToastContainer() {
+  const { toasts } = useApp();
+  return h('div', { className: 'toast-container' }, toasts.map(t => h('div', { key: t.id, className: 'toast toast-' + t.type }, t.message)));
+}
+
+// ─── Shared Components ───────────────────────────────────
+
+let confirmResolve = null;
+export function ConfirmDialog() {
+  const [state, setState] = useState(null);
+  useEffect(() => { window.__showConfirm = (opts) => new Promise(resolve => { confirmResolve = resolve; setState(opts); }); return () => { window.__showConfirm = null; }; }, []);
+  if (!state) return null;
+  const close = (val) => { setState(null); if (confirmResolve) { confirmResolve(val); confirmResolve = null; } };
+  return h('div', { className: 'modal-overlay', onClick: e => { if (e.target === e.currentTarget) close(false); } },
+    h('div', { className: 'modal', style: { width: 420 } },
+      h('div', { className: 'modal-header' },
+        h('h2', null, state.title || 'Confirm'),
+        h('button', { className: 'btn btn-ghost btn-icon', onClick: () => close(false) }, I.x())
+      ),
+      h('div', { className: 'modal-body' },
+        h('p', { style: { fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6 } }, state.message),
+        state.warning && h('div', { style: { marginTop: 12, padding: 12, background: 'var(--danger-soft)', borderRadius: 'var(--radius)', fontSize: 13, color: 'var(--danger)' } }, state.warning)
+      ),
+      h('div', { className: 'modal-footer' },
+        h('button', { className: 'btn btn-secondary', onClick: () => close(false) }, 'Cancel'),
+        h('button', { className: 'btn ' + (state.danger ? 'btn-danger' : 'btn-primary'), onClick: () => close(true), autoFocus: true }, state.confirmText || 'Confirm')
+      )
+    )
+  );
+}
+export async function showConfirm(opts) { return window.__showConfirm ? window.__showConfirm(opts) : confirm(opts.message); }
+
+// Modal imported from ./components/modal.js
+export { Modal } from './components/modal.js';
+
+// ─── Main App ────────────────────────────────────────────
+function App() {
+  const [authed, setAuthed] = useState(false);
+  const [authChecked, setAuthChecked] = useState(false);
+  const [page, setPage] = useState('dashboard');
+  const [selectedAgentId, setSelectedAgentId] = useState(null);
+  const [theme, setTheme] = useState(localStorage.getItem('em_theme') || 'dark');
+  const [toasts, setToasts] = useState([]);
+  const [user, setUser] = useState(null);
+  const [pendingCount, setPendingCount] = useState(0);
+  const [needsSetup, setNeedsSetup] = useState(null);
+  const [sidebarPinned, setSidebarPinned] = useState(() => localStorage.getItem('em_sidebar_pinned') === 'true');
+  const [sidebarHovered, setSidebarHovered] = useState(false);
+
+  // Check if already authenticated via cookie on mount, and check setup state
+  useEffect(() => {
+    // Check setup state
+    if (window.__EM_SETUP_STATE__ !== undefined) {
+      setNeedsSetup(!!window.__EM_SETUP_STATE__);
+    } else {
+      fetch('/auth/setup-status', { credentials: 'same-origin' }).then(r => r.ok ? r.json() : null).then(d => {
+        if (d && d.needsSetup) setNeedsSetup(true);
+        else setNeedsSetup(false);
+      }).catch(() => setNeedsSetup(false));
+    }
+    // Only call /auth/me if a session cookie exists, to avoid unnecessary 401s
+    if (document.cookie.match(/em_session|em_csrf/)) {
+      authCall('/me').then(d => { setUser(d.user || d); setAuthed(true); setAuthChecked(true); }).catch(() => setAuthChecked(true));
+    } else {
+      setAuthChecked(true);
+    }
+  }, []);
+
+  const toast = useCallback((message, type = 'info') => {
+    const id = ++toastId;
+    setToasts(t => [...t, { id, message, type }]);
+    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3500);
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('em_theme', theme);
+  }, [theme]);
+
+  useEffect(() => {
+    localStorage.setItem('em_sidebar_pinned', sidebarPinned ? 'true' : 'false');
+  }, [sidebarPinned]);
+
+  useEffect(() => {
+    if (!authed) return;
+    engineCall('/approvals/pending').then(d => setPendingCount((d.requests || []).length)).catch(() => {});
+    apiCall('/settings').then(d => { const s = d.settings || d || {}; if (s.primaryColor) applyBrandColor(s.primaryColor); }).catch(() => {});
+  }, [authed]);
+
+  const logout = useCallback(() => { authCall('/logout', { method: 'POST' }).catch(() => {}).finally(() => { setAuthed(false); setUser(null); }); }, []);
+  const toggleSidebarPin = useCallback(() => setSidebarPinned(p => !p), []);
+  const onSidebarEnter = useCallback(() => { if (!sidebarPinned) setSidebarHovered(true); }, [sidebarPinned]);
+  const onSidebarLeave = useCallback(() => setSidebarHovered(false), []);
+
+  // Register global logout so apiCall can trigger it on 401
+  useEffect(() => { window.__emLogout = logout; return () => { window.__emLogout = null; }; }, [logout]);
+
+  if (!authChecked) return h('div', { style: { minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg-primary)', color: 'var(--text-muted)' } }, 'Loading...');
+  if (needsSetup === true && !authed) return h(OnboardingWizard, { onComplete: () => { setNeedsSetup(false); setAuthed(true); authCall('/me').then(d => { setUser(d.user || d); }).catch(() => {}); } });
+  if (!authed) return h(LoginPage, { onLogin: (d) => { setAuthed(true); if (d?.user) setUser(d.user); } });
+
+  const nav = [
+    { section: 'Overview', items: [{ id: 'dashboard', icon: I.dashboard, label: 'Dashboard' }] },
+    { section: 'Management', items: [
+      { id: 'agents', icon: I.agents, label: 'Agents' },
+      { id: 'skills', icon: I.skills, label: 'Skills' },
+      { id: 'community-skills', icon: I.marketplace, label: 'Community Skills' },
+      { id: 'skill-connections', icon: I.link, label: 'Skill Connections' },
+      { id: 'knowledge', icon: I.knowledge, label: 'Knowledge Bases' },
+      { id: 'knowledge-contributions', icon: I.knowledge, label: 'Knowledge Hub' },
+      { id: 'approvals', icon: I.approvals, label: 'Approvals', badge: pendingCount || null },
+    ]},
+    { section: 'Management', items: [
+      { id: 'workforce', icon: I.clock, label: 'Workforce' },
+      { id: 'messages', icon: I.messages, label: 'Messages' },
+      { id: 'guardrails', icon: I.guardrails, label: 'Guardrails' },
+      { id: 'journal', icon: I.journal, label: 'Journal' },
+    ]},
+    { section: 'Administration', items: [
+      { id: 'dlp', icon: I.dlp, label: 'DLP' },
+      { id: 'compliance', icon: I.compliance, label: 'Compliance' },
+      { id: 'domain-status', icon: I.shield, label: 'Domain' },
+      { id: 'users', icon: I.users, label: 'Users' },
+      { id: 'vault', icon: I.lock, label: 'Vault' },
+      { id: 'audit', icon: I.audit, label: 'Audit Log' },
+      { id: 'settings', icon: I.settings, label: 'Settings' },
+    ]}
+  ];
+
+  const pages = {
+    dashboard: DashboardPage,
+    agents: AgentsPage,
+    skills: SkillsPage,
+    knowledge: KnowledgeBasePage,
+    approvals: ApprovalsPage,
+    activity: ActivityPage,
+    users: UsersPage,
+    audit: AuditPage,
+    settings: SettingsPage,
+    dlp: DLPPage,
+    guardrails: GuardrailsPage,
+    journal: JournalPage,
+    messages: MessagesPage,
+    compliance: CompliancePage,
+    'community-skills': CommunitySkillsPage,
+    'domain-status': DomainStatusPage,
+    workforce: WorkforcePage,
+    'knowledge-contributions': KnowledgeContributionsPage,
+    'skill-connections': SkillConnectionsPage,
+    vault: VaultPage,
+  };
+
+  const navigateToAgent = (agentId) => { setSelectedAgentId(agentId); };
+  const PageComponent = pages[page] || DashboardPage;
+  const sidebarClass = 'sidebar' + (sidebarPinned ? ' expanded' : sidebarHovered ? ' hover-expanded' : '');
+
+  return h(AppContext.Provider, { value: { toast, toasts, user, theme, setPage } },
+    h('div', { className: 'app-layout' },
+      // Sidebar
+      h('div', { className: sidebarClass, onMouseEnter: onSidebarEnter, onMouseLeave: onSidebarLeave },
+        h('div', { className: 'sidebar-brand' },
+          h('img', { src: '/dashboard/assets/logo.png', alt: 'AgenticMail', style: { width: 28, height: 28, objectFit: 'contain' } }),
+          h('div', { className: 'sidebar-brand-text' }, h('h2', null, 'AgenticMail'), h('span', null, 'Enterprise')),
+          h('button', { className: 'sidebar-toggle' + (sidebarPinned ? ' pinned' : ''), onClick: toggleSidebarPin, title: sidebarPinned ? 'Unpin sidebar' : 'Pin sidebar' }, sidebarPinned ? I.chevronLeft() : I.panelLeft())
+        ),
+        h('div', { className: 'sidebar-nav' },
+          nav.map((section, si) =>
+            h('div', { key: section.section + si, className: 'sidebar-section' },
+              h('div', { className: 'sidebar-section-title' }, section.section),
+              section.items.map(item =>
+                h('div', { key: item.id, className: 'nav-item' + (page === item.id && !selectedAgentId ? ' active' : ''), onClick: () => { setPage(item.id); setSelectedAgentId(null); }, 'data-tooltip': item.label },
+                  item.icon(),
+                  h('span', { className: 'nav-label' }, item.label),
+                  item.badge && h('span', { className: 'badge' }, item.badge)
+                )
+              )
+            )
+          )
+        ),
+        h('div', { className: 'sidebar-footer' },
+          h('div', { className: 'sidebar-user' },
+            h('div', { className: 'avatar' }, (user?.name || user?.email || '?').charAt(0).toUpperCase()),
+            h('div', { className: 'user-info' },
+              h('div', { className: 'user-name' }, user?.name || user?.email || 'Admin'),
+              h('div', { className: 'user-role' }, user?.role || 'admin')
+            )
+          )
+        )
+      ),
+
+      // Main
+      h('div', { className: 'main-content' },
+        h('div', { className: 'topbar' },
+          h('div', { className: 'topbar-left' },
+            h('span', { className: 'topbar-title' }, (nav.flatMap(s => s.items).find(i => i.id === page)?.label || 'Dashboard'))
+          ),
+          h('div', { className: 'topbar-right' },
+            h('button', { className: 'btn btn-ghost btn-icon', onClick: () => setTheme(theme === 'dark' ? 'light' : 'dark'), title: 'Toggle theme' }, theme === 'dark' ? I.sun() : I.moon()),
+            h('button', { className: 'btn btn-ghost btn-icon', onClick: logout, title: 'Sign out' }, I.logout())
+          )
+        ),
+        h('div', { className: 'page-content' },
+          selectedAgentId
+            ? h(AgentDetailPage, { agentId: selectedAgentId, onBack: () => { setSelectedAgentId(null); setPage('agents'); } })
+            : page === 'agents'
+              ? h(AgentsPage, { onSelectAgent: navigateToAgent })
+              : h(PageComponent)
+        )
+      )
+    ),
+    h(ToastContainer),
+    h(ConfirmDialog)
+  );
+}
+
+// ─── Mount ───────────────────────────────────────────────
+ReactDOM.createRoot(document.getElementById('root')).render(h(ErrorBoundary, null, h(App)));

package/src/dashboard/components/error-boundary.js

@@ -0,0 +1,21 @@
+import { h } from './utils.js';
+
+export class ErrorBoundary extends React.Component {
+  constructor(props) { super(props); this.state = { error: null, errorInfo: null }; }
+  static getDerivedStateFromError(error) { return { error }; }
+  componentDidCatch(error, errorInfo) { this.setState({ errorInfo }); console.error('[ErrorBoundary]', error, errorInfo); }
+  render() {
+    if (this.state.error) {
+      return h('div', { style: { minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg-primary)', color: 'var(--text-primary)', fontFamily: 'var(--font)' } },
+        h('div', { style: { textAlign: 'center', maxWidth: 480, padding: 24 } },
+          h('div', { style: { fontSize: 48, marginBottom: 16 } }, '\u26A0\uFE0F'),
+          h('h1', { style: { fontSize: 20, fontWeight: 700, marginBottom: 8 } }, 'Something went wrong'),
+          h('p', { style: { color: 'var(--text-muted)', fontSize: 14, marginBottom: 20 } }, 'An unexpected error occurred in the dashboard. Try reloading the page.'),
+          h('pre', { style: { textAlign: 'left', fontSize: 11, background: 'var(--bg-secondary)', padding: 12, borderRadius: 8, overflow: 'auto', maxHeight: 160, marginBottom: 20, color: 'var(--danger)' } }, String(this.state.error)),
+          h('button', { onClick: () => window.location.reload(), style: { padding: '10px 24px', background: 'var(--accent)', color: 'white', border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'var(--font)', fontSize: 14, fontWeight: 600 } }, 'Reload Page')
+        )
+      );
+    }
+    return this.props.children;
+  }
+}

package/src/dashboard/components/help-button.js

@@ -0,0 +1,34 @@
+import { h, useState } from './utils.js';
+import { I } from './icons.js';
+import { Modal } from './modal.js';
+
+export function HelpButton(props) {
+  var _open = useState(false);
+  var isOpen = _open[0]; var setOpen = _open[1];
+
+  return h('span', { style: { display: 'inline-flex', alignItems: 'center' } },
+    h('button', {
+      onClick: function(e) { e.stopPropagation(); setOpen(true); },
+      title: 'Learn more about ' + (props.label || 'this section'),
+      style: {
+        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+        width: 22, height: 22, borderRadius: '50%',
+        border: '1.5px solid var(--text-muted, #6b7280)', background: 'transparent',
+        color: 'var(--text-muted, #6b7280)', fontSize: 12, fontWeight: 700,
+        cursor: 'pointer', marginLeft: 8, padding: 0, lineHeight: 1,
+        transition: 'border-color 0.15s, color 0.15s'
+      },
+      onMouseEnter: function(e) { e.currentTarget.style.borderColor = 'var(--brand-color, #6366f1)'; e.currentTarget.style.color = 'var(--brand-color, #6366f1)'; },
+      onMouseLeave: function(e) { e.currentTarget.style.borderColor = 'var(--text-muted, #6b7280)'; e.currentTarget.style.color = 'var(--text-muted, #6b7280)'; }
+    }, '?'),
+    isOpen && h(Modal, {
+      title: props.label || 'Help',
+      onClose: function() { setOpen(false); },
+      large: true
+    },
+      h('div', { style: { fontSize: 14, lineHeight: 1.7, color: 'var(--text-secondary, #9ca3af)', padding: '4px 0' } },
+        props.children
+      )
+    )
+  );
+}

package/src/dashboard/components/icons.js

@@ -0,0 +1,53 @@
+import { h } from './utils.js';
+
+var S = { viewBox: '0 0 24 24', width: 20, height: 20, fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' };
+
+export const I = {
+  dashboard: () => h('svg', S, h('rect', { x: 3, y: 3, width: 7, height: 7 }), h('rect', { x: 14, y: 3, width: 7, height: 7 }), h('rect', { x: 14, y: 14, width: 7, height: 7 }), h('rect', { x: 3, y: 14, width: 7, height: 7 })),
+  agents: () => h('svg', S, h('path', { d: 'M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2' }), h('circle', { cx: 9, cy: 7, r: 4 }), h('path', { d: 'M23 21v-2a4 4 0 00-3-3.87' }), h('path', { d: 'M16 3.13a4 4 0 010 7.75' })),
+  skills: () => h('svg', S, h('path', { d: 'M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z' })),
+  knowledge: () => h('svg', S, h('path', { d: 'M4 19.5A2.5 2.5 0 016.5 17H20' }), h('path', { d: 'M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z' })),
+  approvals: () => h('svg', S, h('path', { d: 'M9 11l3 3L22 4' }), h('path', { d: 'M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11' })),
+  activity: () => h('svg', S, h('polyline', { points: '22 12 18 12 15 21 9 3 6 12 2 12' })),
+  settings: () => h('svg', S, h('circle', { cx: 12, cy: 12, r: 3 }), h('path', { d: 'M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09a1.65 1.65 0 00-1.08-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09a1.65 1.65 0 001.51-1.08 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001.08 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9c.26.604.852.997 1.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1.08z' })),
+  users: () => h('svg', S, h('path', { d: 'M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2' }), h('circle', { cx: 12, cy: 7, r: 4 })),
+  audit: () => h('svg', S, h('path', { d: 'M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z' }), h('polyline', { points: '14 2 14 8 20 8' }), h('line', { x1: 16, y1: 13, x2: 8, y2: 13 }), h('line', { x1: 16, y1: 17, x2: 8, y2: 17 })),
+  key: () => h('svg', S, h('path', { d: 'M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4' })),
+  plus: () => h('svg', S, h('line', { x1: 12, y1: 5, x2: 12, y2: 19 }), h('line', { x1: 5, y1: 12, x2: 19, y2: 12 })),
+  x: () => h('svg', S, h('line', { x1: 18, y1: 6, x2: 6, y2: 18 }), h('line', { x1: 6, y1: 6, x2: 18, y2: 18 })),
+  check: () => h('svg', Object.assign({}, S, { width: 16, height: 16 }), h('polyline', { points: '20 6 9 17 4 12' })),
+  sun: () => h('svg', S, h('circle', { cx: 12, cy: 12, r: 5 }), h('line', { x1: 12, y1: 1, x2: 12, y2: 3 }), h('line', { x1: 12, y1: 21, x2: 12, y2: 23 }), h('line', { x1: 4.22, y1: 4.22, x2: 5.64, y2: 5.64 }), h('line', { x1: 18.36, y1: 18.36, x2: 19.78, y2: 19.78 }), h('line', { x1: 1, y1: 12, x2: 3, y2: 12 }), h('line', { x1: 21, y1: 12, x2: 23, y2: 12 }), h('line', { x1: 4.22, y1: 19.78, x2: 5.64, y2: 18.36 }), h('line', { x1: 18.36, y1: 5.64, x2: 19.78, y2: 4.22 })),
+  moon: () => h('svg', S, h('path', { d: 'M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z' })),
+  logout: () => h('svg', S, h('path', { d: 'M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4' }), h('polyline', { points: '16 17 21 12 16 7' }), h('line', { x1: 21, y1: 12, x2: 9, y2: 12 })),
+  search: () => h('svg', S, h('circle', { cx: 11, cy: 11, r: 8 }), h('line', { x1: 21, y1: 21, x2: 16.65, y2: 16.65 })),
+  shield: () => h('svg', S, h('path', { d: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' })),
+  copy: () => h('svg', S, h('rect', { x: 9, y: 9, width: 13, height: 13, rx: 2, ry: 2 }), h('path', { d: 'M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1' })),
+  play: () => h('svg', S, h('polygon', { points: '5 3 19 12 5 21 5 3' })),
+  stop: () => h('svg', S, h('rect', { x: 3, y: 3, width: 18, height: 18, rx: 2, ry: 2 })),
+  refresh: () => h('svg', S, h('polyline', { points: '23 4 23 10 17 10' }), h('polyline', { points: '1 20 1 14 7 14' }), h('path', { d: 'M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15' })),
+  trash: () => h('svg', S, h('polyline', { points: '3 6 5 6 21 6' }), h('path', { d: 'M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2' })),
+  upload: () => h('svg', S, h('path', { d: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4' }), h('polyline', { points: '17 8 12 3 7 8' }), h('line', { x1: 12, y1: 3, x2: 12, y2: 15 })),
+  org: () => h('svg', S, h('path', { d: 'M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z' }), h('polyline', { points: '9 22 9 12 15 12 15 22' })),
+  dlp: () => h('svg', S, h('path', { d: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' }), h('line', { x1: 12, y1: 8, x2: 12, y2: 12 }), h('line', { x1: 12, y1: 16, x2: 12.01, y2: 16 })),
+  guardrails: () => h('svg', S, h('path', { d: 'M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z' }), h('line', { x1: 12, y1: 9, x2: 12, y2: 13 }), h('line', { x1: 12, y1: 17, x2: 12.01, y2: 17 })),
+  journal: () => h('svg', S, h('path', { d: 'M12 20h9' }), h('path', { d: 'M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z' })),
+  messages: () => h('svg', S, h('path', { d: 'M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z' })),
+  compliance: () => h('svg', S, h('path', { d: 'M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z' }), h('polyline', { points: '14 2 14 8 20 8' }), h('path', { d: 'M9 15l2 2 4-4' })),
+  undo: () => h('svg', S, h('polyline', { points: '1 4 1 10 7 10' }), h('path', { d: 'M3.51 15a9 9 0 102.13-9.36L1 10' })),
+  pause: () => h('svg', S, h('rect', { x: 6, y: 4, width: 4, height: 16 }), h('rect', { x: 14, y: 4, width: 4, height: 16 })),
+  download: () => h('svg', S, h('path', { d: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4' }), h('polyline', { points: '7 10 12 15 17 10' }), h('line', { x1: 12, y1: 15, x2: 12, y2: 3 })),
+  marketplace: () => h('svg', S, h('path', { d: 'M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z' }), h('line', { x1: 3, y1: 6, x2: 21, y2: 6 }), h('path', { d: 'M16 10a4 4 0 01-8 0' })),
+  clock: () => h('svg', S, h('circle', { cx: 12, cy: 12, r: 10 }), h('polyline', { points: '12 6 12 12 16 14' })),
+  calendar: () => h('svg', S, h('rect', { x: 3, y: 4, width: 18, height: 18, rx: 2, ry: 2 }), h('line', { x1: 16, y1: 2, x2: 16, y2: 6 }), h('line', { x1: 8, y1: 2, x2: 8, y2: 6 }), h('line', { x1: 3, y1: 10, x2: 21, y2: 10 })),
+  link: () => h('svg', S, h('path', { d: 'M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71' }), h('path', { d: 'M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71' })),
+  folder: () => h('svg', S, h('path', { d: 'M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z' })),
+  globe: () => h('svg', S, h('circle', { cx: 12, cy: 12, r: 10 }), h('line', { x1: 2, y1: 12, x2: 22, y2: 12 }), h('path', { d: 'M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z' })),
+  terminal: () => h('svg', S, h('polyline', { points: '4 17 10 11 4 5' }), h('line', { x1: 12, y1: 19, x2: 20, y2: 19 })),
+  chart: () => h('svg', S, h('line', { x1: 18, y1: 20, x2: 18, y2: 10 }), h('line', { x1: 12, y1: 20, x2: 12, y2: 4 }), h('line', { x1: 6, y1: 20, x2: 6, y2: 14 })),
+  help: () => h('svg', S, h('circle', { cx: 12, cy: 12, r: 10 }), h('path', { d: 'M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3' }), h('line', { x1: 12, y1: 17, x2: 12.01, y2: 17 })),
+  lock: () => h('svg', S, h('rect', { x: 3, y: 11, width: 18, height: 11, rx: 2, ry: 2 }), h('path', { d: 'M7 11V7a5 5 0 0110 0v4' })),
+  eye: () => h('svg', S, h('path', { d: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z' }), h('circle', { cx: 12, cy: 12, r: 3 })),
+  eyeOff: () => h('svg', S, h('path', { d: 'M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24' }), h('line', { x1: 1, y1: 1, x2: 23, y2: 23 })),
+  panelLeft: () => h('svg', S, h('rect', { x: 3, y: 3, width: 18, height: 18, rx: 2 }), h('line', { x1: 9, y1: 3, x2: 9, y2: 21 })),
+  chevronLeft: () => h('svg', S, h('polyline', { points: '15 18 9 12 15 6' })),
+};

package/src/dashboard/components/modal.js

@@ -0,0 +1,124 @@
+import { h, Fragment } from './utils.js';
+import { I } from './icons.js';
+
+export function Modal({ title, onClose, children, footer, large }) {
+  return h('div', { className: 'modal-overlay', onClick: e => { if (e.target === e.currentTarget) onClose(); } },
+    h('div', { className: 'modal' + (large ? ' modal-lg' : '') },
+      h('div', { className: 'modal-header' },
+        h('h2', null, title),
+        h('button', { className: 'btn btn-ghost btn-icon', onClick: onClose }, I.x())
+      ),
+      h('div', { className: 'modal-body' }, children),
+      footer && h('div', { className: 'modal-footer' }, footer)
+    )
+  );
+}
+
+// ─── Reusable Detail Modal ──────────────────────────────
+//
+// Renders any data object as a formatted detail view inside a Modal.
+//
+// Props:
+//   title    — modal title
+//   data     — object to display (key-value pairs rendered automatically)
+//   onClose  — close handler
+//   badge    — optional { label, color } shown next to the title
+//   header   — optional custom element rendered above the data grid
+//   exclude  — optional array of keys to hide (e.g. ['id', 'orgId'])
+
+var _labelStyle = { fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' };
+var _valueStyle = { fontSize: 13, color: 'var(--text-primary)', wordBreak: 'break-word' };
+var _monoStyle = { fontSize: 12, fontFamily: 'var(--font-mono, monospace)', color: 'var(--text-primary)', background: 'var(--bg-secondary)', padding: '2px 6px', borderRadius: 4 };
+var _jsonStyle = { fontSize: 11, fontFamily: 'var(--font-mono, monospace)', color: 'var(--text-secondary)', background: 'var(--bg-secondary)', padding: '8px 10px', borderRadius: 6, whiteSpace: 'pre-wrap', wordBreak: 'break-all', maxHeight: 200, overflow: 'auto', margin: 0 };
+
+function formatDetailValue(key, value) {
+  if (value == null || value === '') return h('span', { style: { color: 'var(--text-muted)', fontSize: 12 } }, '—');
+
+  // Timestamps
+  if (typeof value === 'string' && (key.toLowerCase().includes('at') || key.toLowerCase().includes('time') || key.toLowerCase().includes('date')) && !isNaN(Date.parse(value))) {
+    return h('span', { style: _valueStyle }, new Date(value).toLocaleString());
+  }
+
+  // Booleans
+  if (typeof value === 'boolean') {
+    return h('span', { className: 'badge badge-' + (value ? 'success' : 'neutral'), style: { fontSize: 11 } }, value ? 'Yes' : 'No');
+  }
+
+  // Arrays
+  if (Array.isArray(value)) {
+    if (value.length === 0) return h('span', { style: { color: 'var(--text-muted)', fontSize: 12 } }, 'None');
+    // Simple string arrays as badges
+    if (value.every(function(v) { return typeof v === 'string' || typeof v === 'number'; })) {
+      return h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 4 } },
+        value.map(function(v, i) { return h('span', { key: i, className: 'badge badge-neutral', style: { fontSize: 11 } }, String(v)); })
+      );
+    }
+    // Complex arrays as JSON
+    return h('pre', { style: _jsonStyle }, JSON.stringify(value, null, 2));
+  }
+
+  // Nested objects
+  if (typeof value === 'object') {
+    var entries = Object.entries(value);
+    if (entries.length === 0) return h('span', { style: { color: 'var(--text-muted)', fontSize: 12 } }, '{}');
+    // Small flat objects as inline key:value
+    if (entries.length <= 4 && entries.every(function(e) { return typeof e[1] !== 'object' || e[1] === null; })) {
+      return h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 6 } },
+        entries.map(function(e) {
+          return h('span', { key: e[0], style: _monoStyle }, e[0] + ': ' + String(e[1] ?? '—'));
+        })
+      );
+    }
+    return h('pre', { style: _jsonStyle }, JSON.stringify(value, null, 2));
+  }
+
+  // UUIDs
+  if (typeof value === 'string' && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(value)) {
+    return h('span', { style: _monoStyle }, value);
+  }
+
+  // Long strings
+  if (typeof value === 'string' && value.length > 120) {
+    return h('pre', { style: Object.assign({}, _jsonStyle, { whiteSpace: 'pre-wrap' }) }, value);
+  }
+
+  return h('span', { style: _valueStyle }, String(value));
+}
+
+function humanizeKey(key) {
+  return key
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, function(c) { return c.toUpperCase(); });
+}
+
+export function DetailModal(props) {
+  var data = props.data || {};
+  var exclude = props.exclude || [];
+  var entries = Object.entries(data).filter(function(e) { return exclude.indexOf(e[0]) === -1; });
+
+  return h(Modal, { title: props.title || 'Details', onClose: props.onClose, large: entries.length > 8 },
+    // Optional badge next to title area
+    props.badge && h('div', { style: { marginBottom: 16 } },
+      h('span', { className: 'badge', style: { background: props.badge.color || 'var(--accent)', color: '#fff', fontSize: 11 } }, props.badge.label)
+    ),
+
+    // Optional custom header content
+    props.header && h('div', { style: { marginBottom: 16 } }, props.header),
+
+    // Data grid
+    entries.length === 0
+      ? h('div', { style: { textAlign: 'center', padding: 20, color: 'var(--text-muted)' } }, 'No data')
+      : h('div', { style: { display: 'grid', gridTemplateColumns: '140px 1fr', gap: '12px 16px', alignItems: 'start' } },
+          entries.map(function(e) {
+            return h(Fragment, { key: e[0] },
+              h('div', { style: _labelStyle }, humanizeKey(e[0])),
+              h('div', null, formatDetailValue(e[0], e[1]))
+            );
+          })
+        ),
+
+    // Optional children below the grid
+    props.children
+  );
+}