@agenticmail/enterprise 0.3.2 → 0.4.0

package/src/dashboard/components/persona-fields.js

@@ -0,0 +1,271 @@
+/**
+ * Shared Persona / Identity fields
+ *
+ * Reusable constants, avatar-upload handler, and PersonaForm component
+ * used by both the Create-Agent wizard and the Agent-Detail "Personal" tab.
+ */
+
+import { h, useState, useRef, Fragment } from './utils.js';
+
+// ─── Constants ───────────────────────────────────────────
+
+export var CULTURES = [
+  { id: 'north-american', name: 'North American', desc: 'Direct communication, informal greetings, action-oriented' },
+  { id: 'british-european', name: 'British / European', desc: 'Polite understatement, structured formality, measured tone' },
+  { id: 'latin-american', name: 'Latin American', desc: 'Warm, relationship-first, expressive and personable' },
+  { id: 'middle-eastern', name: 'Middle Eastern', desc: 'Respectful, hospitable, context-aware formality' },
+  { id: 'east-asian', name: 'East Asian', desc: 'Indirect harmony, respectful hierarchy, thoughtful precision' },
+  { id: 'south-asian', name: 'South Asian', desc: 'Respectful, adaptable formality, relationship-aware' },
+  { id: 'southeast-asian', name: 'Southeast Asian', desc: 'Gentle, diplomatic, consensus-seeking' },
+  { id: 'african', name: 'African', desc: 'Community-oriented, warm, storytelling-rich' },
+  { id: 'caribbean', name: 'Caribbean', desc: 'Friendly, vibrant, approachable warmth' },
+  { id: 'australian-pacific', name: 'Australian / Pacific', desc: 'Casual, straightforward, egalitarian humor' },
+];
+
+export var LANGUAGES = [
+  { id: 'en-us', name: 'English (American)' },
+  { id: 'en-gb', name: 'English (British)' },
+  { id: 'en-au', name: 'English (Australian)' },
+  { id: 'es', name: 'Spanish' },
+  { id: 'pt', name: 'Portuguese' },
+  { id: 'fr', name: 'French' },
+  { id: 'de', name: 'German' },
+  { id: 'ja', name: 'Japanese' },
+  { id: 'ko', name: 'Korean' },
+  { id: 'zh', name: 'Mandarin' },
+  { id: 'hi', name: 'Hindi' },
+  { id: 'ar', name: 'Arabic' },
+  { id: 'yo', name: 'Yoruba' },
+  { id: 'ig', name: 'Igbo' },
+  { id: 'sw', name: 'Swahili' },
+  { id: 'it', name: 'Italian' },
+  { id: 'nl', name: 'Dutch' },
+  { id: 'ru', name: 'Russian' },
+  { id: 'tr', name: 'Turkish' },
+  { id: 'pl', name: 'Polish' },
+  { id: 'th', name: 'Thai' },
+  { id: 'vi', name: 'Vietnamese' },
+  { id: 'id', name: 'Indonesian' },
+  { id: 'ms', name: 'Malay' },
+  { id: 'tl', name: 'Filipino (Tagalog)' },
+];
+
+export var GENDER_OPTIONS = [
+  { id: 'male', label: 'Male' },
+  { id: 'female', label: 'Female' },
+  { id: 'non-binary', label: 'Non-binary' },
+  { id: '', label: 'Not specified' },
+];
+
+export var MARITAL_OPTIONS = [
+  { id: 'single', label: 'Single' },
+  { id: 'married', label: 'Married' },
+  { id: 'divorced', label: 'Divorced' },
+  { id: '', label: 'Not specified' },
+];
+
+export var DEFAULT_TRAITS = {
+  communication: 'direct',
+  detail: 'detail-oriented',
+  energy: 'calm',
+  humor: 'warm',
+  formality: 'adaptive',
+  empathy: 'moderate',
+  patience: 'patient',
+  creativity: 'creative',
+};
+
+export var TRAIT_DEFINITIONS = [
+  { key: 'communication', label: 'Style', options: [{ id: 'direct', label: 'Direct' }, { id: 'diplomatic', label: 'Diplomatic' }] },
+  { key: 'detail', label: 'Focus', options: [{ id: 'big-picture', label: 'Big-picture' }, { id: 'detail-oriented', label: 'Detail-oriented' }] },
+  { key: 'energy', label: 'Energy', options: [{ id: 'enthusiastic', label: 'Enthusiastic' }, { id: 'calm', label: 'Calm & measured' }] },
+  { key: 'humor', label: 'Humor', options: [{ id: 'witty', label: 'Witty' }, { id: 'dry', label: 'Dry' }, { id: 'warm', label: 'Warm' }, { id: 'none', label: 'None' }] },
+  { key: 'formality', label: 'Formality', options: [{ id: 'formal', label: 'Formal' }, { id: 'casual', label: 'Casual' }, { id: 'adaptive', label: 'Adaptive' }] },
+  { key: 'empathy', label: 'Empathy', options: [{ id: 'high', label: 'High' }, { id: 'moderate', label: 'Moderate' }, { id: 'reserved', label: 'Reserved' }] },
+  { key: 'patience', label: 'Patience', options: [{ id: 'patient', label: 'Patient' }, { id: 'efficient', label: 'Efficient' }] },
+  { key: 'creativity', label: 'Creativity', options: [{ id: 'creative', label: 'Creative' }, { id: 'conventional', label: 'Conventional' }] },
+];
+
+// ─── Avatar Upload Helper ────────────────────────────────
+
+/**
+ * Reads an image File, auto-resizes if too large, and calls onResult(dataUrl).
+ * @param {File} file
+ * @param {(dataUrl: string) => void} onResult
+ * @param {(msg: string, level: string) => void} toast
+ */
+export function handleAvatarFile(file, onResult, toast) {
+  if (!file) return;
+  if (!file.type.match(/^image\/(jpeg|png|webp)$/)) {
+    toast('Please upload a JPG, PNG, or WebP image', 'error');
+    return;
+  }
+  var reader = new FileReader();
+  reader.onload = function(e) {
+    var dataUrl = e.target.result;
+    if (dataUrl.length <= 512000) {
+      onResult(dataUrl);
+      return;
+    }
+    var img = new Image();
+    img.onload = function() {
+      var canvas = document.createElement('canvas');
+      var maxDim = 256;
+      var w = img.width; var ht = img.height;
+      if (w > ht) { ht = Math.round(ht * maxDim / w); w = maxDim; }
+      else { w = Math.round(w * maxDim / ht); ht = maxDim; }
+      canvas.width = w; canvas.height = ht;
+      canvas.getContext('2d').drawImage(img, 0, 0, w, ht);
+      var quality = 0.8;
+      var result = canvas.toDataURL('image/jpeg', quality);
+      while (result.length > 512000 && quality > 0.1) {
+        quality -= 0.1;
+        result = canvas.toDataURL('image/jpeg', quality);
+      }
+      onResult(result);
+      toast('Image auto-resized to fit', 'info');
+    };
+    img.src = dataUrl;
+  };
+  reader.readAsDataURL(file);
+}
+
+// ─── Computed Age ────────────────────────────────────────
+
+export function computeAge(dateOfBirth) {
+  if (!dateOfBirth) return null;
+  var dob = new Date(dateOfBirth);
+  var today = new Date();
+  var age = today.getFullYear() - dob.getFullYear();
+  var m = today.getMonth() - dob.getMonth();
+  if (m < 0 || (m === 0 && today.getDate() < dob.getDate())) age--;
+  return age;
+}
+
+// ─── PersonaForm Component ──────────────────────────────
+//
+// Renders the full persona editing UI — avatar upload, DOB,
+// gender, marital status, cultural background, language, and
+// personality trait toggles.
+//
+// Props:
+//   form      — object with { avatar, dateOfBirth, gender, maritalStatus,
+//                              culturalBackground, language, traits }
+//   set       — (key, value) => void   — updates a single form field
+//   toast     — (msg, level) => void
+//   compact   — (optional) if true, uses a slightly tighter layout
+
+export function PersonaForm(props) {
+  var form = props.form;
+  var set = props.set;
+  var toast = props.toast;
+  var fileInputRef = useRef(null);
+
+  var onAvatarFile = function(file) {
+    handleAvatarFile(file, function(dataUrl) { set('avatar', dataUrl); }, toast);
+  };
+
+  var traits = form.traits || DEFAULT_TRAITS;
+
+  var setTrait = function(key, value) {
+    set('traits', Object.assign({}, traits, (function() { var o = {}; o[key] = value; return o; })()));
+  };
+
+  var maxDob = new Date(new Date().getFullYear() - 18, new Date().getMonth(), new Date().getDate()).toISOString().split('T')[0];
+  var age = computeAge(form.dateOfBirth);
+
+  return h(Fragment, null,
+    // ─── Avatar + DOB + Gender + Marital ─────────────
+    h('div', { style: { display: 'flex', gap: 24, marginBottom: 24, alignItems: 'flex-start' } },
+
+      // Avatar upload
+      h('div', { style: { textAlign: 'center' } },
+        h('div', {
+          className: 'avatar-upload',
+          onClick: function() { fileInputRef.current && fileInputRef.current.click(); },
+          onDragOver: function(e) { e.preventDefault(); e.stopPropagation(); },
+          onDrop: function(e) { e.preventDefault(); e.stopPropagation(); onAvatarFile(e.dataTransfer.files[0]); }
+        },
+          form.avatar
+            ? h('img', { src: form.avatar, alt: 'Avatar' })
+            : h('div', { className: 'avatar-upload-hint' }, h('div', { style: { fontSize: 24, marginBottom: 2 } }, '+'), 'Upload', h('br'), 'photo'),
+          h('input', { ref: fileInputRef, type: 'file', accept: 'image/jpeg,image/png,image/webp', style: { display: 'none' }, onChange: function(e) { onAvatarFile(e.target.files[0]); } })
+        ),
+        form.avatar && h('button', { className: 'btn btn-ghost btn-sm', style: { marginTop: 6, fontSize: 11 }, onClick: function() { set('avatar', null); } }, 'Remove'),
+        h('p', { className: 'form-help', style: { marginTop: 4 } }, 'JPG, PNG, WebP. Large images auto-resized.')
+      ),
+
+      // DOB + Gender + Marital
+      h('div', { style: { flex: 1 } },
+
+        // Date of birth + computed age
+        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'end' } },
+          h('div', { className: 'form-group' },
+            h('label', { className: 'form-label' }, 'Date of Birth'),
+            h('input', { className: 'input', type: 'date', value: form.dateOfBirth || '', onChange: function(e) { set('dateOfBirth', e.target.value); }, max: maxDob }),
+            h('p', { className: 'form-help' }, 'They\'ll age naturally — and get a birthday email each year')
+          ),
+          age !== null && h('div', { style: { padding: '8px 14px', background: 'var(--accent-soft)', borderRadius: 'var(--radius)', fontSize: 13, fontWeight: 600, color: 'var(--accent-text)', whiteSpace: 'nowrap', marginBottom: 24 } }, age + ' years old')
+        ),
+
+        // Gender
+        h('div', { className: 'form-group' },
+          h('label', { className: 'form-label' }, 'Gender'),
+          h('div', { className: 'persona-cards' },
+            GENDER_OPTIONS.map(function(g) {
+              return h('div', { key: g.id, className: 'persona-card' + (form.gender === g.id ? ' selected' : ''), onClick: function() { set('gender', g.id); } }, g.label);
+            })
+          )
+        ),
+
+        // Marital status
+        h('div', { className: 'form-group' },
+          h('label', { className: 'form-label' }, 'Marital Status'),
+          h('div', { className: 'persona-cards' },
+            MARITAL_OPTIONS.map(function(m) {
+              return h('div', { key: m.id, className: 'persona-card' + (form.maritalStatus === m.id ? ' selected' : ''), onClick: function() { set('maritalStatus', m.id); } }, m.label);
+            })
+          )
+        )
+      )
+    ),
+
+    // ─── Cultural Background ─────────────────────────
+    h('div', { className: 'form-group', style: { marginBottom: 20 } },
+      h('label', { className: 'form-label' }, 'Cultural Background'),
+      h('p', { className: 'form-help', style: { marginTop: -2, marginBottom: 8 } }, 'Shapes communication style, formality, greetings, and cultural references.'),
+      h('div', { className: 'culture-grid' },
+        CULTURES.map(function(c) {
+          return h('div', { key: c.id, className: 'culture-card' + (form.culturalBackground === c.id ? ' selected' : ''), onClick: function() { set('culturalBackground', form.culturalBackground === c.id ? '' : c.id); } },
+            h('h4', null, c.name),
+            h('p', null, c.desc)
+          );
+        })
+      )
+    ),
+
+    // ─── Language ────────────────────────────────────
+    h('div', { className: 'form-group', style: { marginBottom: 20 } },
+      h('label', { className: 'form-label' }, 'Language & Dialect'),
+      h('select', { className: 'input', value: form.language || 'en-us', onChange: function(e) { set('language', e.target.value); }, style: { maxWidth: 300 } },
+        LANGUAGES.map(function(l) { return h('option', { key: l.id, value: l.id }, l.name); })
+      )
+    ),
+
+    // ─── Personality Traits ──────────────────────────
+    h('div', { className: 'form-group' },
+      h('label', { className: 'form-label' }, 'Personality Traits'),
+      h('p', { className: 'form-help', style: { marginTop: -2, marginBottom: 10 } }, 'Fine-tune how this agent expresses itself.'),
+      TRAIT_DEFINITIONS.map(function(td) {
+        return h('div', { key: td.key, className: 'trait-row' },
+          h('span', { className: 'trait-label' }, td.label),
+          h('div', { className: 'trait-toggle' },
+            td.options.map(function(opt) {
+              return h('div', { key: opt.id, className: 'trait-option' + (traits[td.key] === opt.id ? ' active' : ''), onClick: function() { setTrait(td.key, opt.id); } }, opt.label);
+            })
+          )
+        );
+      })
+    )
+  );
+}

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

@@ -0,0 +1,191 @@
+import { h } from './utils.js';
+
+var _h4 = { marginTop: 16, marginBottom: 8, fontSize: 14 };
+var _ul = { paddingLeft: 20, margin: '4px 0 8px' };
+var _tip = { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 };
+
+export var SETTINGS_HELP = {
+
+  general: {
+    label: 'General Settings',
+    content: function() {
+      return h('div', null,
+        h('p', null, 'The General tab is where you configure your organization\'s basic identity and email delivery. These are the foundational settings that affect how your AgenticMail instance looks and operates.'),
+        h('h4', { style: _h4 }, 'Organization'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Company Name'), ' \u2014 The name that appears throughout the dashboard and in email headers sent by your agents.'),
+          h('li', null, h('strong', null, 'Domain'), ' \u2014 Your company\'s primary domain (e.g., agenticmail.io). Used for agent email addresses and identifying your organization.'),
+          h('li', null, h('strong', null, 'Subdomain'), ' \u2014 Your unique identifier on the AgenticMail cloud platform. Your dashboard is accessible at <subdomain>.agenticmail.io.'),
+          h('li', null, h('strong', null, 'Plan'), ' \u2014 Controls how many agents you can create and which features are available. Self-hosted installations have no restrictions.'),
+          h('li', null, h('strong', null, 'Logo URL'), ' \u2014 A link to your company logo. It appears in the top-left of the dashboard and in agent-sent emails.'),
+          h('li', null, h('strong', null, 'Primary Brand Color'), ' \u2014 Customizes the accent color across the entire dashboard to match your brand identity.')
+        ),
+        h('h4', { style: _h4 }, 'SMTP Configuration'),
+        h('p', null, 'Controls how outgoing emails are delivered. Leave these blank to use the default AgenticMail relay. Configure a custom SMTP server if you want emails to come from your own mail infrastructure.'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'SMTP Host / Port'), ' \u2014 The address and port of your email server (e.g., smtp.gmail.com on port 587).'),
+          h('li', null, h('strong', null, 'SMTP Username / Password'), ' \u2014 Credentials for authenticating with your email server. For Gmail, use an App Password (not your regular password).'),
+          h('li', null, h('strong', null, 'DKIM Private Key'), ' \u2014 Optional. If provided, outgoing emails are cryptographically signed, improving deliverability and preventing spoofing.')
+        )
+      );
+    }
+  },
+
+  'api-keys': {
+    label: 'API Keys',
+    content: function() {
+      return h('div', null,
+        h('p', null, 'API keys let external applications and scripts interact with your AgenticMail instance programmatically. Use them to integrate AgenticMail with your existing tools, CI/CD pipelines, or custom applications.'),
+        h('h4', { style: _h4 }, 'When to use API keys'),
+        h('ul', { style: _ul },
+          h('li', null, 'Connecting a custom application that needs to create, manage, or monitor agents.'),
+          h('li', null, 'Building automated workflows that trigger agent actions from external systems.'),
+          h('li', null, 'Integrating with third-party platforms that need to read or write data through AgenticMail.')
+        ),
+        h('h4', { style: _h4 }, 'Key concepts'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Key Name'), ' \u2014 A label to help you remember what each key is used for (e.g., "Production Backend" or "CI/CD Pipeline").'),
+          h('li', null, h('strong', null, 'Key Prefix'), ' \u2014 The visible portion of the key shown in the table for identification. The full key is only shown once when created.'),
+          h('li', null, h('strong', null, 'Scopes'), ' \u2014 What the key can do: read (view data), write (create and update), or admin (full access including deleting resources).'),
+          h('li', null, h('strong', null, 'Revoke'), ' \u2014 Permanently disables a key. Any application using that key will immediately lose access. This cannot be undone.')
+        ),
+        h('div', { style: _tip }, 'Important: Copy your API key immediately after creation. For security, the full key is never shown again.')
+      );
+    }
+  },
+
+  authentication: {
+    label: 'Authentication',
+    content: function() {
+      return h('div', null,
+        h('p', null, 'Authentication settings control how team members sign in to the dashboard. By default, users sign in with a username and password. You can add Single Sign-On (SSO) so team members use their existing corporate login instead.'),
+        h('h4', { style: _h4 }, 'What is Single Sign-On (SSO)?'),
+        h('p', null, 'SSO lets team members sign in using their existing company credentials (such as Google Workspace, Microsoft 365, or Okta). This is more secure and convenient because users don\'t need a separate password for AgenticMail.'),
+        h('h4', { style: _h4 }, 'SAML 2.0'),
+        h('p', null, 'Best for large organizations using Okta, OneLogin, or Azure Active Directory.'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Entity ID'), ' \u2014 A unique identifier your identity provider uses to recognize AgenticMail.'),
+          h('li', null, h('strong', null, 'SSO URL'), ' \u2014 The web address where users are redirected to sign in.'),
+          h('li', null, h('strong', null, 'Certificate'), ' \u2014 A security certificate from your identity provider that verifies sign-in responses are genuine.')
+        ),
+        h('h4', { style: _h4 }, 'OpenID Connect (OIDC)'),
+        h('p', null, 'Best for organizations using Google Workspace, Microsoft 365, Auth0, or any modern OAuth provider.'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Client ID & Secret'), ' \u2014 Credentials you receive when you register AgenticMail as an application in your identity provider.'),
+          h('li', null, h('strong', null, 'Discovery URL'), ' \u2014 A URL that automatically configures the connection. The Quick Setup buttons pre-fill this for popular providers.')
+        ),
+        h('div', { style: _tip }, 'Tip: The provider buttons below the SSO forms pre-fill the Discovery URL. You still need to create an OAuth application in that provider\'s admin console and enter the Client ID and Secret it gives you.')
+      );
+    }
+  },
+
+  email: {
+    label: 'Email & Domain',
+    content: function() {
+      return h('div', null,
+        h('p', null, 'This tab controls how your AI agents send and receive email. There are two approaches depending on your needs.'),
+        h('h4', { style: _h4 }, 'Gmail / Outlook Relay'),
+        h('p', null, 'The quickest way to get started. Agents send email through your existing Gmail or Outlook account using "plus addressing" (e.g., yourname+agent@gmail.com). Good for testing and small teams.'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Email Address'), ' \u2014 Your Gmail or Outlook address that agents will send from.'),
+          h('li', null, h('strong', null, 'App Password'), ' \u2014 A special password generated by Google or Microsoft specifically for third-party apps. This is NOT your regular account password.')
+        ),
+        h('h4', { style: _h4 }, 'Custom Domain'),
+        h('p', null, 'The professional setup for production. Agents send from addresses like agent@yourdomain.com with full email authentication (DKIM, SPF, DMARC).'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Domain'), ' \u2014 The domain you want agents to send email from.'),
+          h('li', null, h('strong', null, 'Cloudflare API Token'), ' \u2014 Used to automatically configure DNS records for email authentication. You can generate this from your Cloudflare dashboard under API Tokens.'),
+          h('li', null, h('strong', null, 'Cloudflare Account ID'), ' \u2014 Found in the Cloudflare dashboard sidebar. Identifies which account manages your domain\'s DNS.')
+        ),
+        h('div', { style: _tip }, 'Tip: Start with relay mode for testing and switch to a custom domain when you\'re ready for production.')
+      );
+    }
+  },
+
+  deployments: {
+    label: 'Deployments',
+    content: function() {
+      return h('div', null,
+        h('p', null, 'Deploy credentials let AgenticMail deploy your AI agents to various hosting platforms. Think of these as saved login information for your deployment targets, so agents can be published with one click.'),
+        h('h4', { style: _h4 }, 'When to use this'),
+        h('p', null, 'If you want agents to run as standalone services (not just within the main AgenticMail server), you need deploy credentials for where they will be hosted.'),
+        h('h4', { style: _h4 }, 'Supported targets'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Docker Registry'), ' \u2014 Push agent containers to a Docker registry (Docker Hub, GitHub Container Registry, AWS ECR, etc.). Enter the registry URL and login credentials.'),
+          h('li', null, h('strong', null, 'SSH / VPS'), ' \u2014 Deploy agents directly to a virtual private server. Provide the host address, SSH port, username, and private key.'),
+          h('li', null, h('strong', null, 'Fly.io'), ' \u2014 Deploy to Fly.io\'s global edge network. Enter your Fly.io API token from the Fly.io dashboard.'),
+          h('li', null, h('strong', null, 'Railway'), ' \u2014 Deploy to Railway\'s managed platform. Enter your Railway API token and project ID.')
+        ),
+        h('div', { style: _tip }, 'Credentials are stored securely and encrypted at rest. Deleting a credential will cause any active deployments using it to fail on their next update.')
+      );
+    }
+  },
+
+  security: {
+    label: 'Tool Security',
+    content: function() {
+      return h('div', null,
+        h('p', null, 'Tool Security controls what your AI agents are allowed to do at the system level. These are safety guardrails that prevent agents from accidentally or maliciously accessing sensitive resources. These are organization-wide defaults \u2014 individual agents can have stricter (but not looser) overrides.'),
+        h('h4', { style: _h4 }, 'Security Sandboxes'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Path Sandbox'), ' \u2014 Restricts which folders agents can read from or write to. Prevents access to sensitive files like configuration, passwords, or encryption keys. Add directories to "Allowed" to grant access; add patterns to "Blocked" to deny access.'),
+          h('li', null, h('strong', null, 'SSRF Protection'), ' \u2014 Prevents agents from making network requests to internal services, cloud metadata endpoints (like AWS 169.254.x.x), or private IP ranges. This stops a misbehaving agent from probing your internal network.'),
+          h('li', null, h('strong', null, 'Command Sanitizer'), ' \u2014 Controls which shell commands agents can execute. In Blocklist mode, known dangerous patterns are blocked. In Allowlist mode, agents can only run commands you explicitly permit.')
+        ),
+        h('h4', { style: _h4 }, 'Middleware & Observability'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Audit Logging'), ' \u2014 Records every tool action an agent takes: what it did, when, success/failure, and duration. Sensitive fields like passwords are automatically redacted.'),
+          h('li', null, h('strong', null, 'Rate Limiting'), ' \u2014 Limits how many times each tool can be called per minute per agent. Prevents any single agent from overwhelming the system. Adjust limits per tool type in the table.'),
+          h('li', null, h('strong', null, 'Circuit Breaker'), ' \u2014 Automatically pauses a tool that keeps failing (after 5 consecutive errors). Waits 30 seconds before retrying. Prevents error cascading when an external service is down.'),
+          h('li', null, h('strong', null, 'Telemetry'), ' \u2014 Collects performance metrics: call duration, success rates, and output sizes. Useful for identifying slow tools or agents using resources inefficiently.')
+        )
+      );
+    }
+  },
+
+  network: {
+    label: 'Network & Firewall',
+    content: function() {
+      return h('div', null,
+        h('p', null, 'Network & Firewall controls who can access your AgenticMail instance and what your agents can reach on the internet. Use these settings to lock down your deployment for production security.'),
+        h('h4', { style: _h4 }, 'IP Access Control'),
+        h('p', null, 'Restricts which IP addresses can reach the dashboard, APIs, and engine. In Allowlist mode, only listed IPs can connect. In Blocklist mode, all IPs are allowed except those you block. Use "Test an IP" to verify rules before saving.'),
+        h('h4', { style: _h4 }, 'Outbound Egress Rules'),
+        h('p', null, 'Controls which external websites and services your agents can reach. Allowlist mode means agents can only connect to hosts you approve. Blocklist mode lets agents reach everything except blocked hosts.'),
+        h('h4', { style: _h4 }, 'Proxy & Trusted Proxies'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Proxy Configuration'), ' \u2014 If your network requires a proxy for outbound internet access (common in corporate environments), configure the HTTP/HTTPS proxy URLs here. "No-Proxy Hosts" bypass the proxy.'),
+          h('li', null, h('strong', null, 'Trusted Proxies'), ' \u2014 If AgenticMail is behind a load balancer or reverse proxy (Nginx, Traefik, AWS ALB), list those proxy IPs here so IP-based access control uses the real client IP.')
+        ),
+        h('h4', { style: _h4 }, 'Network & Deployment Settings'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'CORS Origins'), ' \u2014 If you embed AgenticMail in another website, list that website\'s address here. Leave empty to allow all origins.'),
+          h('li', null, h('strong', null, 'Rate Limiting'), ' \u2014 Limits API requests per IP per minute. Protects against abuse and denial-of-service. "Skip Paths" excludes health-check endpoints.'),
+          h('li', null, h('strong', null, 'HTTPS Enforcement'), ' \u2014 Forces all connections to use encrypted HTTPS. Highly recommended for production.'),
+          h('li', null, h('strong', null, 'Security Headers'), ' \u2014 Browser security policies: HSTS forces HTTPS, X-Frame-Options prevents clickjacking, Content-Type-Options prevents MIME sniffing. The defaults are recommended for most deployments.')
+        )
+      );
+    }
+  },
+
+  integrations: {
+    label: 'Integrations',
+    content: function() {
+      return h('div', null,
+        h('p', null, 'Integrations connect your AI agents to external services and platforms. Once connected, agents can read from and write to these services as part of their workflows \u2014 for example, reading Jira tickets, posting Slack messages, or creating GitHub pull requests.'),
+        h('h4', { style: _h4 }, 'How integrations work'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'OAuth integrations'), ' \u2014 Services like Slack, GitHub, and Salesforce use OAuth. Clicking "Connect" opens a popup where you sign in and grant AgenticMail permission. Credentials are stored securely.'),
+          h('li', null, h('strong', null, 'Token-based integrations'), ' \u2014 Services like Discord and Linear require you to paste an API key or bot token that you generate in that service\'s admin panel.')
+        ),
+        h('h4', { style: _h4 }, 'Managing integrations'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Connected (green border)'), ' \u2014 The integration is active and agents can use it.'),
+          h('li', null, h('strong', null, 'Disconnect'), ' \u2014 Removes stored credentials. Agents using this integration will immediately lose access.'),
+          h('li', null, 'You can reconnect at any time by clicking "Connect" again.')
+        ),
+        h('div', { style: _tip }, 'Tip: Only connect integrations your agents actually need. Each connection is a potential access point that should be reviewed periodically.')
+      );
+    }
+  }
+};

package/src/dashboard/components/tag-input.js

@@ -0,0 +1,96 @@
+/**
+ * TagInput — Reusable tag/list input component
+ *
+ * For managing string arrays (allowedDirs, blockedPatterns, allowedHosts, etc.)
+ * Renders list of badges with X remove buttons + an input field + Enter to add.
+ *
+ * Props:
+ *   value: string[]        — current array of tags
+ *   onChange: fn(string[])  — called when array changes
+ *   placeholder: string     — input placeholder text
+ *   label: string           — form label (optional)
+ *   mono: boolean           — use monospace font for tags
+ *   disabled: boolean       — disable input and remove buttons
+ */
+import { h, useState } from './utils.js';
+
+var badgeStyle = {
+  display: 'inline-flex', alignItems: 'center', gap: 4,
+  padding: '3px 8px', borderRadius: 4,
+  background: 'var(--bg-secondary)', border: '1px solid var(--border)',
+  fontSize: 12, lineHeight: 1.4, maxWidth: '100%', wordBreak: 'break-all'
+};
+
+var removeBtnStyle = {
+  background: 'none', border: 'none', cursor: 'pointer', padding: 0,
+  fontSize: 14, lineHeight: 1, color: 'var(--text-muted)', fontWeight: 700,
+  marginLeft: 2, flexShrink: 0
+};
+
+export function TagInput(props) {
+  var value = props.value || [];
+  var onChange = props.onChange || function() {};
+  var disabled = props.disabled || false;
+
+  var _input = useState('');
+  var input = _input[0]; var setInput = _input[1];
+
+  var addTag = function() {
+    var trimmed = input.trim();
+    if (!trimmed || value.indexOf(trimmed) !== -1) return;
+    onChange(value.concat([trimmed]));
+    setInput('');
+  };
+
+  var removeTag = function(idx) {
+    var next = value.slice();
+    next.splice(idx, 1);
+    onChange(next);
+  };
+
+  var tagStyle = props.mono
+    ? Object.assign({}, badgeStyle, { fontFamily: 'var(--font-mono, monospace)', fontSize: 11 })
+    : badgeStyle;
+
+  return h('div', { style: { marginBottom: 12 } },
+    props.label && h('label', {
+      style: { display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }
+    }, props.label),
+
+    // Tags list
+    value.length > 0 && h('div', {
+      style: { display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 8 }
+    },
+      value.map(function(tag, i) {
+        return h('span', { key: i, style: tagStyle },
+          h('span', null, tag),
+          !disabled && h('button', {
+            style: removeBtnStyle,
+            onClick: function() { removeTag(i); },
+            title: 'Remove'
+          }, '\u00D7')
+        );
+      })
+    ),
+
+    // Input row
+    !disabled && h('div', { style: { display: 'flex', gap: 6 } },
+      h('input', {
+        className: 'input',
+        style: { flex: 1, fontSize: 13 },
+        value: input,
+        onChange: function(e) { setInput(e.target.value); },
+        onKeyDown: function(e) {
+          if (e.key === 'Enter') { e.preventDefault(); addTag(); }
+        },
+        placeholder: props.placeholder || 'Type and press Enter'
+      }),
+      h('button', {
+        className: 'btn btn-secondary btn-sm',
+        onClick: addTag,
+        disabled: !input.trim(),
+        style: { whiteSpace: 'nowrap' }
+      }, '+ Add')
+    )
+  );
+}