@agenticmail/enterprise 0.5.228 → 0.5.230

package/src/dashboard/pages/agent-detail/whatsapp.js

@@ -563,7 +563,7 @@ function ConversationsCard(props) {
     !loading && convos.length > 0 && h('div', null,
       convos.map(function(c) {
         var initial = (c.name || c.contactId || '?').charAt(0).toUpperCase();
-        var colors = ['#6366f1', '#ec4899', '#f59e0b', '#15803d', '#8b5cf6', '#ef4444', '#06b6d4', '#84cc16'];
+        var colors = ['#6366f1', '#9d174d', '#f59e0b', '#15803d', '#8b5cf6', '#ef4444', '#06b6d4', '#84cc16'];
         var colorIdx = (initial.charCodeAt(0) || 0) % colors.length;
         return h('div', { key: c.contactId,
           style: { display: 'flex', alignItems: 'center', gap: '12px', padding: '12px', borderRadius: '10px', cursor: 'pointer', transition: 'background 0.15s', marginBottom: '2px' },

package/src/dashboard/pages/guardrails.js

@@ -8,7 +8,7 @@ var POLICY_CATEGORIES = [
   { value: 'code_of_conduct', label: 'Code of Conduct', color: '#6366f1' },
   { value: 'communication', label: 'Communication', color: '#0ea5e9' },
   { value: 'data_handling', label: 'Data Handling', color: '#f59e0b' },
-  { value: 'brand_voice', label: 'Brand Voice', color: '#ec4899' },
+  { value: 'brand_voice', label: 'Brand Voice', color: '#9d174d' },
   { value: 'security', label: 'Security', color: '#ef4444' },
   { value: 'escalation', label: 'Escalation', color: '#8b5cf6' },
   { value: 'custom', label: 'Custom', color: '#64748b' },
@@ -27,7 +27,7 @@ var MEMORY_CATEGORIES = [
   { value: 'correction', label: 'Correction', color: '#f59e0b' },
   { value: 'skill', label: 'Skill', color: '#8b5cf6' },
   { value: 'context', label: 'Context', color: '#64748b' },
-  { value: 'reflection', label: 'Reflection', color: '#ec4899' },
+  { value: 'reflection', label: 'Reflection', color: '#9d174d' },
 ];
 
 var RULE_CATEGORIES = [

package/src/dashboard/pages/knowledge-contributions.js

@@ -618,7 +618,7 @@ export function KnowledgeContributionsPage() {
   useEffect(function() { if (tab === 'stats') loadTimeline(); }, [tab, loadTimeline]);
 
   // SVG chart helpers — clean background, dark mode, hover tooltips
-  var CHART_COLORS = ['#6366f1', '#15803d', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899', '#14b8a6'];
+  var CHART_COLORS = ['#6366f1', '#15803d', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#9d174d', '#14b8a6'];
   var [tooltip, setTooltip] = useState(null); // { x, y, lines: [] }
 
   // Shared tooltip overlay (rendered once, positioned absolutely)

package/src/dashboard/pages/login.js

@@ -2,6 +2,10 @@ import { h, useState, useEffect, useCallback, Fragment } from '../components/uti
 import { apiCall, authCall, engineCall } from '../components/utils.js';
 import { I } from '../components/icons.js';
 
+var _b = typeof window !== 'undefined' && window.__EM_BRANDING__ || {};
+var _brandLogo = _b.login_logo || _b.logo || _brandLogo;
+var _brandBg = _b.login_bg || null;
+
 export function LoginPage({ onLogin }) {
   var [tab, setTab] = useState('password'); // 'password' | 'apikey' | 'sso'
   var [email, setEmail] = useState('');
@@ -76,10 +80,10 @@ export function LoginPage({ onLogin }) {
   // ─── 2FA Verification Screen ──────────────────────────
 
   if (needs2fa) {
-    return h('div', { className: 'login-page' },
+    return h('div', { className: 'login-page', style: _brandBg ? { backgroundImage: 'url(' + _brandBg + ')', backgroundSize: 'cover', backgroundPosition: 'center' } : {} },
       h('div', { className: 'login-card' },
         h('div', { className: 'login-logo' },
-          h('img', { src: '/dashboard/assets/logo.png', alt: 'AgenticMail', style: { width: 48, height: 48, objectFit: 'contain' } }),
+          h('img', { src: _brandLogo, alt: 'AgenticMail', style: { width: 48, height: 48, objectFit: 'contain' } }),
           h('h1', null, 'Two-Factor Authentication'),
           h('p', null, 'Enter the code from your authenticator app')
         ),
@@ -108,10 +112,10 @@ export function LoginPage({ onLogin }) {
 
   // ─── Main Login Screen ────────────────────────────────
 
-  return h('div', { className: 'login-page' },
+  return h('div', { className: 'login-page', style: _brandBg ? { backgroundImage: 'url(' + _brandBg + ')', backgroundSize: 'cover', backgroundPosition: 'center' } : {} },
     h('div', { className: 'login-card' },
       h('div', { className: 'login-logo' },
-        h('img', { src: '/dashboard/assets/logo.png', alt: 'AgenticMail', style: { width: 48, height: 48, objectFit: 'contain' } }),
+        h('img', { src: _brandLogo, alt: 'AgenticMail', style: { width: 48, height: 48, objectFit: 'contain' } }),
         h('h1', null, 'AgenticMail Enterprise'),
         h('p', null, 'AI Agent Identity & Management Platform')
       ),

package/src/dashboard/pages/settings.js

@@ -279,6 +279,106 @@ export function SettingsPage() {
         )
       ),
 
+      // ─── Branding & Assets ──────────────────────────────
+      h('div', { className: 'card', style: { marginBottom: 16 } },
+        h('div', { className: 'card-header' }, h('h3', { style: { display: 'flex', alignItems: 'center' } }, 'Branding & Assets', h(HelpButton, { label: 'Branding & Assets' },
+          h('p', null, 'Upload your company logo, favicon, and login page assets. The system automatically generates all required icon sizes (16px, 32px, 48px, 180px, 192px, 512px) and favicon from your logo.'),
+          h('p', { style: { marginTop: 8 } }, h('strong', null, 'Supported formats: '), 'PNG, JPG, SVG, WebP, GIF'),
+          h('p', { style: { marginTop: 8, padding: 8, background: 'var(--bg-secondary)', borderRadius: 6, fontSize: 13 } }, h('strong', null, 'Tip: '), 'Upload a square PNG logo (512x512 or larger) for best results. The system auto-converts it to favicon.ico and all app icon sizes.')
+        ))),
+        h('div', { className: 'card-body' },
+          h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
+            // Company Logo
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Company Logo'),
+              h('p', { className: 'form-help', style: { marginBottom: 8 } }, 'Used in dashboard sidebar, emails, and auto-generates favicon + app icons'),
+              (settings.branding && settings.branding.logo) && h('div', { style: { marginBottom: 8, padding: 8, background: 'var(--bg-tertiary)', borderRadius: 'var(--radius)', display: 'inline-block' } },
+                h('img', { src: settings.branding.logo, style: { maxWidth: 120, maxHeight: 60, objectFit: 'contain' } })
+              ),
+              h('input', { type: 'file', accept: 'image/*', style: { fontSize: 12 }, onChange: function(e) {
+                var file = e.target.files && e.target.files[0];
+                if (!file) return;
+                if (file.size > 5 * 1024 * 1024) { toast('File too large (max 5MB)', 'error'); return; }
+                var reader = new FileReader();
+                reader.onload = function() {
+                  apiCall('/settings/branding', { method: 'POST', body: JSON.stringify({ type: 'logo', data: reader.result, filename: file.name }) })
+                    .then(function(r) { setSettings(function(s) { return Object.assign({}, s, { branding: r.branding }); }); toast('Logo uploaded! Favicon and icons auto-generated. Refresh to see changes.', 'success'); })
+                    .catch(function(err) { toast(err.message, 'error'); });
+                };
+                reader.readAsDataURL(file);
+              } })
+            ),
+            // Login Page Logo (separate from main logo)
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Login Page Logo'),
+              h('p', { className: 'form-help', style: { marginBottom: 8 } }, 'Shown on the login page. Falls back to company logo if not set.'),
+              (settings.branding && settings.branding.login_logo) && h('div', { style: { marginBottom: 8, padding: 8, background: 'var(--bg-tertiary)', borderRadius: 'var(--radius)', display: 'inline-block' } },
+                h('img', { src: settings.branding.login_logo, style: { maxWidth: 120, maxHeight: 60, objectFit: 'contain' } })
+              ),
+              h('input', { type: 'file', accept: 'image/*', style: { fontSize: 12 }, onChange: function(e) {
+                var file = e.target.files && e.target.files[0];
+                if (!file) return;
+                if (file.size > 5 * 1024 * 1024) { toast('File too large (max 5MB)', 'error'); return; }
+                var reader = new FileReader();
+                reader.onload = function() {
+                  apiCall('/settings/branding', { method: 'POST', body: JSON.stringify({ type: 'login_logo', data: reader.result, filename: file.name }) })
+                    .then(function(r) { setSettings(function(s) { return Object.assign({}, s, { branding: r.branding }); }); toast('Login logo saved!', 'success'); })
+                    .catch(function(err) { toast(err.message, 'error'); });
+                };
+                reader.readAsDataURL(file);
+              } })
+            ),
+            // Login Background
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Login Page Background'),
+              h('p', { className: 'form-help', style: { marginBottom: 8 } }, 'Background image for the login page'),
+              (settings.branding && settings.branding.login_bg) && h('div', { style: { marginBottom: 8, padding: 4, background: 'var(--bg-tertiary)', borderRadius: 'var(--radius)', display: 'inline-block' } },
+                h('img', { src: settings.branding.login_bg, style: { maxWidth: 160, maxHeight: 80, objectFit: 'cover', borderRadius: 'var(--radius)' } })
+              ),
+              h('input', { type: 'file', accept: 'image/*', style: { fontSize: 12 }, onChange: function(e) {
+                var file = e.target.files && e.target.files[0];
+                if (!file) return;
+                if (file.size > 10 * 1024 * 1024) { toast('File too large (max 10MB)', 'error'); return; }
+                var reader = new FileReader();
+                reader.onload = function() {
+                  apiCall('/settings/branding', { method: 'POST', body: JSON.stringify({ type: 'login_bg', data: reader.result, filename: file.name }) })
+                    .then(function(r) { setSettings(function(s) { return Object.assign({}, s, { branding: r.branding }); }); toast('Login background saved!', 'success'); })
+                    .catch(function(err) { toast(err.message, 'error'); });
+                };
+                reader.readAsDataURL(file);
+              } })
+            ),
+            // Favicon (manual override)
+            h('div', { className: 'form-group' },
+              h('label', { className: 'form-label' }, 'Custom Favicon'),
+              h('p', { className: 'form-help', style: { marginBottom: 8 } }, 'Override the auto-generated favicon. Upload .ico or .png'),
+              (settings.branding && settings.branding.favicon) && h('div', { style: { marginBottom: 8, display: 'inline-flex', alignItems: 'center', gap: 8 } },
+                h('img', { src: settings.branding.favicon, style: { width: 32, height: 32, objectFit: 'contain' } }),
+                h('span', { style: { fontSize: 11, color: 'var(--text-muted)' } }, 'Current favicon')
+              ),
+              h('input', { type: 'file', accept: '.ico,.png,.svg', style: { fontSize: 12 }, onChange: function(e) {
+                var file = e.target.files && e.target.files[0];
+                if (!file) return;
+                var reader = new FileReader();
+                reader.onload = function() {
+                  apiCall('/settings/branding', { method: 'POST', body: JSON.stringify({ type: 'favicon', data: reader.result, filename: file.name }) })
+                    .then(function(r) { setSettings(function(s) { return Object.assign({}, s, { branding: r.branding }); }); toast('Favicon saved! Refresh to see changes.', 'success'); })
+                    .catch(function(err) { toast(err.message, 'error'); });
+                };
+                reader.readAsDataURL(file);
+              } })
+            )
+          ),
+          // Current branding status
+          (settings.branding && Object.keys(settings.branding).length > 0) && h('div', { style: { marginTop: 12, padding: 10, background: 'var(--bg-tertiary)', borderRadius: 'var(--radius)', fontSize: 12 } },
+            h('strong', null, 'Active branding: '),
+            Object.keys(settings.branding).filter(function(k) { return settings.branding[k]; }).map(function(k) {
+              return h('span', { key: k, style: { display: 'inline-block', padding: '2px 8px', margin: '2px 4px', background: 'var(--success-soft)', color: 'var(--success)', borderRadius: 4, fontSize: 11 } }, k.replace(/_/g, ' '));
+            })
+          )
+        )
+      ),
+
       // ─── Email Signature Template ─────────────────────
       h('div', { className: 'card' },
         h('div', { className: 'card-header' },

package/src/server.ts

@@ -11,6 +11,7 @@ import type { AppEnv } from './types/hono-env.js';
 import { cors } from 'hono/cors';
 import { serve } from '@hono/node-server';
 import { readFileSync, existsSync } from 'fs';
+import { homedir } from 'os';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 import { createRequire } from 'module';
@@ -438,6 +439,15 @@ export function createServer(config: ServerConfig): ServerInstance {
       html = html.replace('</head>', injection + '</head>');
     }
 
+    // Inject branding config
+    try {
+      const settings0 = await config.db.getSettings();
+      if (settings0?.branding) {
+        const brandScript = `<script>window.__EM_BRANDING__=${JSON.stringify(settings0.branding)};</script>`;
+        html = html.replace('</head>', brandScript + '</head>');
+      }
+    } catch { /* non-blocking */ }
+
     // Inject domain verification status (informational, does not block)
     try {
       const settings = await config.db.getSettings();
@@ -456,6 +466,21 @@ export function createServer(config: ServerConfig): ServerInstance {
     return c.html(html);
   }
 
+  // Serve branding assets from ~/.agenticmail/branding/
+  app.get('/branding/*', (c) => {
+    const reqPath = c.req.path.replace('/branding/', '');
+    if (reqPath.includes('..')) return c.json({ error: 'Forbidden' }, 403);
+    const ext = reqPath.substring(reqPath.lastIndexOf('.'));
+    const mimeMap: Record<string, string> = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.svg': 'image/svg+xml', '.ico': 'image/x-icon', '.gif': 'image/gif', '.webp': 'image/webp' };
+    const mime = mimeMap[ext];
+    if (!mime) return c.json({ error: 'Not found' }, 404);
+    const brandDir = join(homedir(), '.agenticmail', 'branding');
+    const filePath = join(brandDir, reqPath);
+    if (!filePath.startsWith(brandDir) || !existsSync(filePath)) return c.json({ error: 'Not found' }, 404);
+    const content = readFileSync(filePath);
+    return new Response(content, { status: 200, headers: { 'Content-Type': mime, 'Cache-Control': 'public, max-age=3600' } });
+  });
+
   app.get('/', (c) => c.redirect('/dashboard'));
   app.get('/dashboard', serveDashboard);