@agenticmail/enterprise 0.3.2 → 0.4.0

package/dashboards/dotnet/Services/HtmlBuilder.cs

@@ -0,0 +1,249 @@
+using System.Text.Json;
+using System.Web;
+
+namespace AgenticMailDashboard.Services;
+
+/// <summary>
+/// Static methods for generating all HTML fragments: Layout, LoginPage, badges,
+/// stat cards, tables, modals, pagination, flash messages, and utilities.
+/// </summary>
+public static class HtmlBuilder
+{
+    // --- Escaping ---
+
+    public static string Esc(string? s) => HttpUtility.HtmlEncode(s ?? "");
+
+    // --- Time formatting ---
+
+    public static string TimeAgo(string? iso)
+    {
+        if (string.IsNullOrEmpty(iso)) return "N/A";
+        if (!DateTimeOffset.TryParse(iso, out var dt)) return iso;
+        var diff = (int)(DateTimeOffset.UtcNow - dt).TotalSeconds;
+        if (diff < 0) diff = 0;
+        return diff switch
+        {
+            < 60 => $"{diff}s ago",
+            < 3600 => $"{diff / 60}m ago",
+            < 86400 => $"{diff / 3600}h ago",
+            _ => $"{diff / 86400}d ago"
+        };
+    }
+
+    // --- Badges ---
+
+    public static string Badge(string? text, string variant = "default")
+        => $"<span class='badge badge-{Esc(variant)}'>{Esc(text)}</span>";
+
+    public static string StatusBadge(string? status)
+    {
+        var s = (status ?? "").ToLower();
+        var variant = s switch
+        {
+            "active" or "enabled" or "running" or "success" => "success",
+            "archived" or "disabled" or "revoked" => "danger",
+            "pending" or "paused" => "warning",
+            "admin" => "primary",
+            "owner" => "owner",
+            "member" => "member",
+            "viewer" => "viewer",
+            _ => "default"
+        };
+        return Badge(status, variant);
+    }
+
+    // --- Stat Card ---
+
+    public static string StatCard(string label, object value, string extraClass = "")
+        => $@"<div class='stat-card'>
+            <div class='label'>{Esc(label)}</div>
+            <div class='value {Esc(extraClass)}'>{Esc(value?.ToString())}</div>
+        </div>";
+
+    // --- Table ---
+
+    public static string Table(string[] headers, string rowsHtml, string emptyIcon = "", string emptyText = "No data")
+    {
+        if (string.IsNullOrEmpty(rowsHtml))
+            return $"<div class='empty'><span class='icon'>{emptyIcon}</span>{Esc(emptyText)}</div>";
+
+        var ths = string.Join("", headers.Select(h => $"<th>{Esc(h)}</th>"));
+        return $@"<div class='table-wrap'>
+            <table>
+                <thead><tr>{ths}</tr></thead>
+                <tbody>{rowsHtml}</tbody>
+            </table>
+        </div>";
+    }
+
+    // --- Modal (confirmation dialog) ---
+
+    public static string Modal(string id, string title, string bodyHtml, string confirmAction, string confirmLabel = "Confirm", string confirmClass = "btn-danger")
+        => $@"<div class='modal-overlay' id='{Esc(id)}'>
+            <div class='modal'>
+                <h3>{Esc(title)}</h3>
+                <div>{bodyHtml}</div>
+                <div class='modal-actions'>
+                    <button class='btn' onclick=""document.getElementById('{Esc(id)}').classList.remove('open')"">Cancel</button>
+                    <form method='POST' action='{Esc(confirmAction)}' style='display:inline'>
+                        <button class='btn {Esc(confirmClass)}' type='submit'>{Esc(confirmLabel)}</button>
+                    </form>
+                </div>
+            </div>
+        </div>";
+
+    // --- Pagination ---
+
+    public static string Pagination(int currentPage, int perPage, int total, string baseUrl)
+    {
+        var totalPages = total > 0 ? (int)Math.Ceiling((double)total / perPage) : 1;
+        var prev = currentPage > 1
+            ? $"<a href='{Esc(baseUrl)}?page={currentPage - 1}'>&laquo; Previous</a>"
+            : "";
+        var next = currentPage < totalPages
+            ? $"<a href='{Esc(baseUrl)}?page={currentPage + 1}'>Next &raquo;</a>"
+            : "";
+        return $@"<div class='pagination'>
+            {prev}
+            <span class='current'>Page {currentPage}</span>
+            {next}
+            <span style='color:var(--text-muted);font-size:12px;margin-left:auto'>{total} total events</span>
+        </div>";
+    }
+
+    // --- Flash messages ---
+
+    public static string Flash(HttpContext ctx)
+    {
+        var msg = ctx.Session.GetString("flash");
+        if (string.IsNullOrEmpty(msg)) return "";
+        var type = ctx.Session.GetString("flash_type") ?? "info";
+        ctx.Session.Remove("flash");
+        ctx.Session.Remove("flash_type");
+        return $"<div class='flash flash-{Esc(type)}'>{Esc(msg)}</div>";
+    }
+
+    public static void SetFlash(HttpContext ctx, string message, string type = "info")
+    {
+        ctx.Session.SetString("flash", message);
+        ctx.Session.SetString("flash_type", type);
+    }
+
+    // --- Nav item ---
+
+    private static string NavItem(string href, string icon, string label, string activePath)
+    {
+        var active = href == activePath ? "active" : "";
+        return $"<a href='{Esc(href)}' class='{active}'>{icon} <span>{Esc(label)}</span></a>";
+    }
+
+    // --- Login Page ---
+
+    public static string LoginPage(string? error = null)
+    {
+        var errorHtml = string.IsNullOrEmpty(error)
+            ? ""
+            : $"<div class='login-error'>{Esc(error)}</div>";
+
+        return $@"<!DOCTYPE html>
+<html lang='en'>
+<head>
+<meta charset='utf-8'>
+<meta name='viewport' content='width=device-width,initial-scale=1'>
+<title>Sign In - AgenticMail Enterprise</title>
+<link rel='stylesheet' href='/styles.css'>
+</head>
+<body class='login-screen'>
+<div class='login-box'>
+    <h1>&#127970; AgenticMail Enterprise</h1>
+    <p class='subtitle'>Admin Dashboard &middot; .NET</p>
+    <div class='login-card'>
+        {errorHtml}
+        <form method='POST' action='/login'>
+            <div class='form-group'>
+                <label>Email</label>
+                <input type='email' name='email' required autofocus placeholder='admin@company.com'>
+            </div>
+            <div class='form-group'>
+                <label>Password</label>
+                <input type='password' name='password' required placeholder='Enter password'>
+            </div>
+            <button class='btn btn-primary btn-block' type='submit'>Sign In</button>
+        </form>
+    </div>
+</div>
+</body>
+</html>";
+    }
+
+    // --- Layout (main chrome with sidebar) ---
+
+    public static string Layout(string activePath, string userName, string userEmail, string content, HttpContext ctx)
+    {
+        var flash = Flash(ctx);
+
+        return $@"<!DOCTYPE html>
+<html lang='en'>
+<head>
+<meta charset='utf-8'>
+<meta name='viewport' content='width=device-width,initial-scale=1'>
+<title>AgenticMail Enterprise - .NET</title>
+<link rel='stylesheet' href='/styles.css'>
+</head>
+<body style='display:flex;min-height:100vh'>
+<aside class='sidebar'>
+    <div class='sidebar-brand'>
+        &#127970; AgenticMail Enterprise
+        <small>Admin Dashboard &middot; .NET</small>
+    </div>
+    <nav class='sidebar-nav'>
+        {NavItem("/", "&#128202;", "Dashboard", activePath)}
+        {NavItem("/agents", "&#129302;", "Agents", activePath)}
+        {NavItem("/users", "&#128101;", "Users", activePath)}
+        {NavItem("/api-keys", "&#128273;", "API Keys", activePath)}
+        {NavItem("/audit", "&#128220;", "Audit Log", activePath)}
+        {NavItem("/dlp", "&#128737;", "DLP", activePath)}
+        {NavItem("/compliance", "&#128203;", "Compliance", activePath)}
+        <div style='padding:12px 16px 4px;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)'>Management</div>
+        {NavItem("/messages", "&#9993;&#65039;", "Messages", activePath)}
+        {NavItem("/guardrails", "&#128737;", "Guardrails", activePath)}
+        {NavItem("/journal", "&#128214;", "Journal", activePath)}
+        {NavItem("/settings", "&#9881;&#65039;", "Settings", activePath)}
+        <div style='padding:12px 16px 4px;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)'>System</div>
+        {NavItem("/vault", "&#128272;", "Vault", activePath)}
+        {NavItem("/skills", "&#9889;", "Skills", activePath)}
+    </nav>
+    <div class='sidebar-footer'>
+        <div style='margin-bottom:6px'>{Esc(string.IsNullOrEmpty(userName) ? "Admin" : userName)}</div>
+        <div style='font-size:11px;color:var(--text-muted);margin-bottom:6px'>{Esc(userEmail)}</div>
+        <a href='/logout'>Sign out</a>
+        &nbsp;&middot;&nbsp;
+        <button class='theme-toggle' onclick=""toggleTheme()"" title='Toggle dark mode'>&#127763;</button>
+    </div>
+</aside>
+<main class='main'>
+    {flash}
+    {content}
+</main>
+<script>
+if(localStorage.getItem('dark')==='1') document.documentElement.setAttribute('data-theme','dark');
+function toggleTheme(){{
+    const d=document.documentElement.hasAttribute('data-theme');
+    if(d){{document.documentElement.removeAttribute('data-theme');localStorage.removeItem('dark')}}
+    else{{document.documentElement.setAttribute('data-theme','dark');localStorage.setItem('dark','1')}}
+}}
+</script>
+</body>
+</html>";
+    }
+
+    /// <summary>
+    /// Renders a full page within the Layout. Reads session for user info.
+    /// </summary>
+    public static string Page(HttpContext ctx, string activePath, string content)
+    {
+        var name = ctx.Session.GetString("userName") ?? "";
+        var email = ctx.Session.GetString("userEmail") ?? "";
+        return Layout(activePath, name, email, content, ctx);
+    }
+}

package/dashboards/dotnet/wwwroot/styles.css

@@ -0,0 +1,284 @@
+/*
+ * AgenticMail Enterprise Dashboard — Shared Design System
+ * Used by all 11 dashboard implementations.
+ * Copy this into your dashboard's public/ or static/ folder.
+ */
+
+/* ─── Theme Variables ─────────────────────────────────── */
+:root, [data-theme="light"] {
+  --bg: #f8f9fa; --surface: #fff; --surface-hover: #f1f3f5;
+  --border: #dee2e6; --border-hover: #ced4da;
+  --text: #212529; --text-dim: #495057; --text-muted: #868e96;
+  --primary: #e84393; --primary-hover: #d63384; --primary-bg: rgba(232,67,147,0.08);
+  --success: #2b8a3e; --success-bg: rgba(43,138,62,0.08);
+  --warning: #e67700; --warning-bg: rgba(230,119,0,0.08);
+  --danger: #c92a2a; --danger-bg: rgba(201,42,42,0.08);
+  --radius: 6px; --radius-lg: 10px;
+  --shadow: 0 1px 3px rgba(0,0,0,0.08);
+  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+  color-scheme: light dark;
+}
+[data-theme="dark"] {
+  --bg: #0f1114; --surface: #16181d; --surface-hover: #1c1f26;
+  --border: #2c3038; --border-hover: #3b414c;
+  --text: #e1e4e8; --text-dim: #b0b8c4; --text-muted: #6b7280;
+  --primary: #f06595; --primary-hover: #f783ac; --primary-bg: rgba(240,101,149,0.1);
+  --success: #37b24d; --success-bg: rgba(55,178,77,0.1);
+  --warning: #f08c00; --warning-bg: rgba(240,140,0,0.1);
+  --danger: #f03e3e; --danger-bg: rgba(240,62,62,0.1);
+  --shadow: 0 1px 3px rgba(0,0,0,0.3);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #0f1114; --surface: #16181d; --surface-hover: #1c1f26;
+    --border: #2c3038; --border-hover: #3b414c;
+    --text: #e1e4e8; --text-dim: #b0b8c4; --text-muted: #6b7280;
+    --primary: #f06595; --primary-hover: #f783ac; --primary-bg: rgba(240,101,149,0.1);
+    --success: #37b24d; --success-bg: rgba(55,178,77,0.1);
+    --warning: #f08c00; --warning-bg: rgba(240,140,0,0.1);
+    --danger: #f03e3e; --danger-bg: rgba(240,62,62,0.1);
+    --shadow: 0 1px 3px rgba(0,0,0,0.3);
+  }
+}
+
+/* ─── Reset ───────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--primary); text-decoration: none; }
+a:hover { text-decoration: underline; }
+code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.9em; }
+
+/* ─── Login Page ──────────────────────────────────────── */
+.login-screen {
+  display: flex; align-items: center; justify-content: center; min-height: 100vh;
+}
+.login-box {
+  width: 380px; max-width: 90vw;
+}
+.login-box h1 {
+  text-align: center; font-size: 16px; color: var(--primary); margin-bottom: 6px;
+}
+.login-box .subtitle {
+  text-align: center; color: var(--text-muted); font-size: 12px; margin-bottom: 28px;
+}
+.login-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 28px;
+}
+.login-error {
+  color: var(--danger); font-size: 13px; text-align: center; margin-bottom: 16px;
+  padding: 10px; background: var(--danger-bg); border-radius: var(--radius);
+}
+
+/* ─── Sidebar ─────────────────────────────────────────── */
+.sidebar {
+  width: 240px; background: var(--surface); border-right: 1px solid var(--border);
+  display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 10;
+}
+.sidebar-brand {
+  padding: 20px; font-size: 14px; font-weight: 700;
+  border-bottom: 1px solid var(--border); color: var(--primary); line-height: 1.4;
+}
+.sidebar-brand small {
+  display: block; font-weight: 400; color: var(--text-muted); font-size: 11px; margin-top: 2px;
+}
+.sidebar-nav { flex: 1; padding: 12px 0; }
+.sidebar-nav a {
+  display: flex; align-items: center; gap: 10px; padding: 10px 20px;
+  color: var(--text-dim); font-size: 14px; border-left: 3px solid transparent;
+  transition: all 0.15s;
+}
+.sidebar-nav a:hover {
+  background: var(--bg); color: var(--text); text-decoration: none;
+}
+.sidebar-nav a.active {
+  color: var(--primary); border-left-color: var(--primary);
+  background: var(--bg); font-weight: 600;
+}
+.sidebar-footer {
+  padding: 16px 20px; border-top: 1px solid var(--border);
+  font-size: 12px; color: var(--text-muted);
+}
+.sidebar-footer a { color: var(--danger); font-size: 12px; }
+
+/* ─── Main Content ────────────────────────────────────── */
+.main {
+  margin-left: 240px; flex: 1; padding: 32px; max-width: 1100px; width: 100%;
+}
+.page-header { margin-bottom: 28px; }
+.page-header h1 { font-size: 22px; font-weight: 700; color: var(--text); }
+.page-header p { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
+
+/* ─── Cards ───────────────────────────────────────────── */
+.card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px;
+  box-shadow: var(--shadow);
+}
+.card h3 {
+  font-size: 14px; font-weight: 600; margin-bottom: 14px; color: var(--text-dim);
+}
+.card-header {
+  display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
+}
+
+/* ─── Stat Cards ──────────────────────────────────────── */
+.stats-grid {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px; margin-bottom: 24px;
+}
+.stat-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 20px;
+}
+.stat-card .label {
+  font-size: 11px; color: var(--text-muted); text-transform: uppercase;
+  letter-spacing: 0.06em; margin-bottom: 6px;
+}
+.stat-card .value {
+  font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: -0.03em;
+}
+.stat-card .value.pink { color: var(--primary); }
+
+/* ─── Tables ──────────────────────────────────────────── */
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; font-size: 14px; }
+th {
+  text-align: left; padding: 10px 12px; color: var(--text-muted);
+  font-weight: 600; font-size: 12px; text-transform: uppercase;
+  letter-spacing: 0.05em; border-bottom: 2px solid var(--border);
+}
+td {
+  padding: 10px 12px; border-bottom: 1px solid var(--border);
+  color: var(--text-dim); vertical-align: middle;
+}
+tr:hover td { background: var(--surface-hover); }
+
+/* ─── Badges ──────────────────────────────────────────── */
+.badge {
+  display: inline-block; padding: 3px 10px; border-radius: 999px;
+  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
+}
+.badge-default { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
+.badge-success, .badge-active { background: var(--success-bg); color: var(--success); }
+.badge-danger, .badge-archived, .badge-revoked { background: var(--danger-bg); color: var(--danger); }
+.badge-warning, .badge-pending { background: var(--warning-bg); color: var(--warning); }
+.badge-primary, .badge-admin { background: var(--primary-bg); color: var(--primary); }
+.badge-owner { background: var(--warning-bg); color: var(--warning); }
+.badge-member { background: rgba(136,136,160,0.08); color: var(--text-dim); }
+.badge-viewer { background: rgba(136,136,160,0.06); color: var(--text-muted); }
+
+/* ─── Forms ───────────────────────────────────────────── */
+.form-group { margin-bottom: 16px; }
+.form-group label {
+  display: block; font-size: 13px; font-weight: 600;
+  color: var(--text-dim); margin-bottom: 5px;
+}
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
+  border-radius: var(--radius); background: var(--bg); color: var(--text);
+  font-size: 14px; outline: none; transition: border-color 0.15s;
+}
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus { border-color: var(--primary); }
+.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+
+/* ─── Buttons ─────────────────────────────────────────── */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 8px 18px; border-radius: var(--radius); font-size: 13px;
+  font-weight: 600; border: 1px solid var(--border); background: var(--surface);
+  color: var(--text-dim); cursor: pointer; transition: all 0.15s; text-decoration: none;
+}
+.btn:hover { background: var(--surface-hover); text-decoration: none; }
+.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
+.btn-primary:hover { background: var(--primary-hover); opacity: 0.9; color: #fff; }
+.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
+.btn-danger:hover { opacity: 0.9; color: #fff; }
+.btn-sm { padding: 5px 12px; font-size: 12px; }
+.btn-block { width: 100%; }
+
+/* ─── Modals ──────────────────────────────────────────── */
+.modal-overlay {
+  display: none; position: fixed; inset: 0;
+  background: rgba(0,0,0,0.6); align-items: center; justify-content: center; z-index: 100;
+}
+.modal-overlay.open { display: flex; }
+.modal {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 24px; width: 440px;
+  max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+}
+.modal h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
+.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
+
+/* ─── Flash Messages ──────────────────────────────────── */
+.flash {
+  padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px;
+  font-size: 14px; border: 1px solid var(--border);
+}
+.flash-success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
+.flash-danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
+.flash-info { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }
+
+/* ─── Toast ───────────────────────────────────────────── */
+.toast {
+  position: fixed; bottom: 24px; right: 24px; padding: 12px 20px;
+  background: var(--surface); border: 1px solid var(--success);
+  border-radius: var(--radius); font-size: 13px; z-index: 200;
+  display: none; animation: slideUp 0.2s ease;
+}
+.toast.error { border-color: var(--danger); }
+.toast.show { display: block; }
+@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+/* ─── Pagination ──────────────────────────────────────── */
+.pagination { display: flex; gap: 8px; margin-top: 20px; align-items: center; }
+.pagination a, .pagination span {
+  padding: 6px 14px; border-radius: var(--radius); font-size: 13px;
+  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
+}
+.pagination a:hover { background: var(--surface-hover); text-decoration: none; }
+.pagination span.current { background: var(--primary); color: #fff; border-color: var(--primary); }
+
+/* ─── Empty State ─────────────────────────────────────── */
+.empty { text-align: center; padding: 48px 20px; color: var(--text-muted); font-size: 14px; }
+.empty .icon { font-size: 36px; margin-bottom: 12px; display: block; }
+
+/* ─── Key Banner (API key reveal) ─────────────────────── */
+.key-banner {
+  background: var(--warning-bg); border: 1px solid var(--warning);
+  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px;
+  font-size: 13px; color: var(--warning);
+}
+.key-banner code {
+  display: block; margin-top: 6px; padding: 8px 12px; background: var(--bg);
+  border-radius: var(--radius); font-size: 12px; color: var(--text);
+  word-break: break-all;
+}
+
+/* ─── Dark Mode Toggle ────────────────────────────────── */
+.theme-toggle {
+  cursor: pointer; background: none; border: none;
+  color: var(--text-muted); font-size: 16px; padding: 4px;
+}
+
+/* ─── Responsive ──────────────────────────────────────── */
+@media (max-width: 768px) {
+  .sidebar { width: 56px; }
+  .sidebar-brand, .sidebar-nav a span, .sidebar-footer { display: none; }
+  .sidebar-nav a { justify-content: center; padding: 14px 0; font-size: 18px; }
+  .main { margin-left: 56px; padding: 16px; }
+  .form-row { grid-template-columns: 1fr; }
+  .stats-grid { grid-template-columns: 1fr 1fr; }
+}