@agenticmail/enterprise 0.5.198 → 0.5.200

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

@@ -3,6 +3,7 @@ import { I } from '../../components/icons.js';
 import { E } from '../../assets/icons/emoji-icons.js';
 import { Badge, EmptyState } from './shared.js?v=4';
 import { BrowserConfigCard, ToolRestrictionsCard } from './meeting-browser.js?v=4';
+import { HelpButton } from '../../components/help-button.js';
 
 // ════════════════════════════════════════════════════════════
 // TOOL SECURITY SECTION
@@ -166,7 +167,15 @@ export function ToolsSection(props) {
     // Stats bar
     h('div', { style: { display: 'flex', gap: 16, marginBottom: 16, flexWrap: 'wrap', alignItems: 'center' } },
       h('div', { className: 'card', style: { padding: '12px 16px', flex: '1 1 auto', minWidth: 150 } },
-        h('div', { style: { fontSize: 24, fontWeight: 700, color: 'var(--accent)' } }, stats.enabled || 0),
+        h('div', { style: { fontSize: 24, fontWeight: 700, color: 'var(--accent)', display: 'flex', alignItems: 'center' } }, stats.enabled || 0, h(HelpButton, { label: 'Tools' },
+          h('p', null, 'Tools are the individual functions an agent can call — like sending email, reading files, searching the web, or executing commands.'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'Always On'), ' — Core tools that cannot be disabled (e.g., memory, basic utilities).'),
+            h('li', null, h('strong', null, 'OAuth Required'), ' — Tools that need an OAuth connection (e.g., Google Workspace).'),
+            h('li', null, h('strong', null, 'Integration'), ' — Tools requiring external service configuration.')
+          ),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Click any tool category to expand and see the individual tools it contains. Use the toggle to enable/disable entire categories at once.')
+        )),
         h('div', { style: { fontSize: 12, color: 'var(--text-muted)' } }, 'of ' + (stats.total || 0) + ' tools enabled')
       ),
       h('div', { style: { display: 'flex', gap: 8 } },

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

@@ -1,5 +1,6 @@
 import { h, useState, useEffect, Fragment, useApp, engineCall } from '../../components/utils.js';
 import { E } from '../../assets/icons/emoji-icons.js';
+import { HelpButton } from '../../components/help-button.js';
 
 // ─── Styles ───
 var card = { background: 'var(--bg-secondary)', borderRadius: '12px', padding: '24px', marginBottom: '16px', border: '1px solid var(--border)' };
@@ -775,7 +776,16 @@ export function WhatsAppSection(props) {
     h('div', { style: { display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' } },
       E.whatsapp(28),
       h('div', null,
-        h('h2', { style: { margin: 0, fontSize: '20px' } }, 'WhatsApp Business'),
+        h('h2', { style: { margin: 0, fontSize: '20px', display: 'flex', alignItems: 'center' } }, 'WhatsApp Business', h(HelpButton, { label: 'WhatsApp Business' },
+          h('p', null, 'Connect a dedicated business phone number for customer support. Customers message this number and your agent handles their queries automatically.'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'Same number mode'), ' — Use your personal WhatsApp for both personal and business messages. The agent recognizes your manager number.'),
+            h('li', null, h('strong', null, 'Separate number'), ' — Dedicated business number. Personal WhatsApp stays private.'),
+            h('li', null, h('strong', null, 'Customer pairing'), ' — New customers get a code and await approval before chatting.'),
+            h('li', null, h('strong', null, 'Prompt injection protection'), ' — Customer messages are sandboxed to prevent manipulation.')
+          ),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Start with same-number mode for simplicity. Switch to a separate number when you need clear separation between personal and business messages.')
+        )),
         h('p', { style: { margin: 0, fontSize: '13px', color: 'var(--text-secondary)' } }, 'Connect a dedicated business number for customer support \u2014 separate from your personal WhatsApp')
       )
     ),

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

@@ -3,6 +3,7 @@ import { I } from '../../components/icons.js';
 import { E } from '../../assets/icons/emoji-icons.js';
 import { TimezoneSelect } from '../../components/timezones.js';
 import { Badge, StatCard, EmptyState, formatTime } from './shared.js?v=4';
+import { HelpButton } from '../../components/help-button.js';
 
 // ════════════════════════════════════════════════════════════
 // WORKFORCE SECTION
@@ -212,7 +213,10 @@ export function WorkforceSection(props) {
     // ─── Status Card (Real-Time) ──────────────────────────
     h('div', { className: 'card', style: { marginBottom: 20 } },
       h('div', { className: 'card-header', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-        h('span', null, 'Agent Status'),
+        h('span', { style: { display: 'flex', alignItems: 'center' } }, 'Agent Status', h(HelpButton, { label: 'Agent Status' },
+          h('p', null, 'Real-time status of this agent. Shows whether the agent is online, idle, or has errors. Clock in/out controls the agent\'s work schedule.'),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Clock-in/out can be enforced by the schedule. When clocked out, the agent pauses or queues incoming work depending on off-hours settings.')
+        )),
         h('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
           rtStatus && h('span', {
             className: 'badge badge-' + (rtStatus.status === 'online' ? 'success' : rtStatus.status === 'idle' ? 'info' : rtStatus.status === 'error' ? 'danger' : 'neutral'),
@@ -242,7 +246,14 @@ export function WorkforceSection(props) {
     // ─── Schedule Card ──────────────────────────────────
     h('div', { className: 'card', style: { marginBottom: 20 } },
       h('div', { className: 'card-header', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-        h('span', null, 'Schedule'),
+        h('span', { style: { display: 'flex', alignItems: 'center' } }, 'Schedule', h(HelpButton, { label: 'Schedule' },
+          h('p', null, 'Define when this agent is active. Supports standard hours (e.g., 9-5 M-F), shift patterns, or custom schedules.'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'Enforce Clock-In/Out'), ' — Agent must be clocked in to work.'),
+            h('li', null, h('strong', null, 'Auto-Wake'), ' — Automatically start the agent at schedule start.'),
+            h('li', null, h('strong', null, 'Off-Hours Action'), ' — Pause, stop, or queue work outside schedule.')
+          )
+        )),
         !editing && h('button', { className: 'btn btn-ghost btn-sm', onClick: startEdit }, I.edit(), schedule ? ' Edit' : ' Configure')
       ),
       h('div', { className: 'card-body' },
@@ -392,7 +403,9 @@ export function WorkforceSection(props) {
     // ─── Task Queue ─────────────────────────────────────
     h('div', { className: 'card', style: { marginBottom: 20 } },
       h('div', { className: 'card-header', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-        h('span', null, 'Task Queue'),
+        h('span', { style: { display: 'flex', alignItems: 'center' } }, 'Task Queue', h(HelpButton, { label: 'Task Queue' },
+          h('p', null, 'Manually assign tasks to this agent. Tasks have priority (urgent/high/normal/low) and type (email/research/communication/general). The agent processes tasks based on priority order.')
+        )),
         h('button', { className: 'btn btn-primary btn-sm', onClick: function() { setShowAddTask(true); } }, I.plus(), ' Add Task')
       ),
       tasks.length > 0
@@ -457,7 +470,9 @@ export function WorkforceSection(props) {
 
       return h('div', { className: 'card', style: { marginBottom: 20 } },
         h('div', { className: 'card-header', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-          h('span', null, 'Clock History'),
+          h('span', { style: { display: 'flex', alignItems: 'center' } }, 'Clock History', h(HelpButton, { label: 'Clock History' },
+            h('p', null, 'Complete record of all clock-in and clock-out events for this agent. Useful for tracking work hours, debugging scheduling issues, and generating time reports. Click any record for details.')
+          )),
           h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } }, totalFiltered + ' record' + (totalFiltered !== 1 ? 's' : ''))
         ),
         // Filters

package/src/dashboard/pages/agents.js

@@ -2,6 +2,7 @@ import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall, engineC
 import { I } from '../components/icons.js';
 import { E } from '../assets/icons/emoji-icons.js';
 import { CULTURES, LANGUAGES, PersonaForm } from '../components/persona-fields.js';
+import { HelpButton } from '../components/help-button.js';
 
 // ════════════════════════════════════════════════════════════
 // DEPLOY MODAL
@@ -1133,9 +1134,22 @@ export function AgentsPage({ onSelectAgent }) {
 
   // Delete moved to agent detail overview tab with triple confirmation
 
+  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 };
+
   return h(Fragment, null,
     h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 } },
-      h('div', null, h('h1', { style: { fontSize: 20, fontWeight: 700 } }, 'Agents'), h('p', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'Manage your AI agents — create, configure, deploy, and monitor')),
+      h('div', null, h('h1', { style: { fontSize: 20, fontWeight: 700, display: 'flex', alignItems: 'center' } }, 'Agents', h(HelpButton, { label: 'Agents' },
+        h('p', null, 'Your AI workforce. Each agent has its own email identity, personality, skills, permissions, and deployment target.'),
+        h('h4', { style: _h4 }, 'Agent lifecycle'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Create'), ' — Use the wizard to pick a role template, configure skills and permissions.'),
+          h('li', null, h('strong', null, 'Deploy'), ' — Send the agent to Fly.io, Docker, Railway, VPS, or run locally.'),
+          h('li', null, h('strong', null, 'Monitor'), ' — Click any agent to see their activity, emails, sessions, and journal.')
+        ),
+        h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Click an agent\'s name to access their full detail page with logs, email, workforce schedule, and more.')
+      )), h('p', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'Manage your AI agents — create, configure, deploy, and monitor')),
       h('button', { className: 'btn btn-primary', onClick: () => setCreating(true) }, I.plus(), ' Create Agent')
     ),
     creating && h(CreateAgentWizard, { onClose: () => setCreating(false), onCreated: load, toast }),

package/src/dashboard/pages/approvals.js

@@ -1,5 +1,6 @@
 import { h, useState, useEffect, Fragment, useApp, engineCall, showConfirm, buildAgentEmailMap, buildAgentDataMap, resolveAgentEmail, renderAgentBadge, getOrgId } from '../components/utils.js';
 import { I } from '../components/icons.js';
+import { HelpButton } from '../components/help-button.js';
 
 export function ApprovalsPage() {
   const { toast } = useApp();
@@ -27,9 +28,22 @@ export function ApprovalsPage() {
     } catch (e) { toast(e.message, 'error'); }
   };
 
+  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 };
+
   return h(Fragment, null,
     h('div', { style: { marginBottom: 20 } },
-      h('h1', { style: { fontSize: 20, fontWeight: 700 } }, 'Approvals'),
+      h('h1', { style: { fontSize: 20, fontWeight: 700, display: 'flex', alignItems: 'center' } }, 'Approvals', h(HelpButton, { label: 'Approvals' },
+        h('p', null, 'The human-in-the-loop checkpoint. When agents attempt sensitive actions (based on your permission settings), they pause and wait for your approval here.'),
+        h('h4', { style: _h4 }, 'How it works'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Agent triggers action'), ' — e.g., sending an email, deleting data, or making a financial call.'),
+          h('li', null, h('strong', null, 'Request appears here'), ' — with full context: which agent, what action, risk level.'),
+          h('li', null, h('strong', null, 'You decide'), ' — approve or reject. The agent resumes or aborts accordingly.')
+        ),
+        h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Configure which actions require approval in each agent\'s Permissions settings. Start strict, then loosen as you build trust.')
+      )),
       h('p', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'Review and approve agent actions that require human oversight')
     ),
     h('div', { className: 'tabs' },

package/src/dashboard/pages/audit.js

@@ -1,6 +1,7 @@
 import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall } from '../components/utils.js';
 import { I } from '../components/icons.js';
 import { DetailModal } from '../components/modal.js';
+import { HelpButton } from '../components/help-button.js';
 
 var PAGE_SIZE = 50;
 
@@ -78,10 +79,31 @@ export function AuditPage() {
 
   var totalPages = Math.max(1, Math.ceil((total || (hasMore ? (page + 2) * PAGE_SIZE : (page + 1) * PAGE_SIZE)) / PAGE_SIZE));
 
+  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 };
+
   return h(Fragment, null,
     h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 } },
       h('div', null,
-        h('h1', { style: { fontSize: 20, fontWeight: 700 } }, 'Audit Log'),
+        h('h1', { style: { fontSize: 20, fontWeight: 700, display: 'flex', alignItems: 'center' } }, 'Audit Log', h(HelpButton, { label: 'Audit Log' },
+          h('p', null, 'A tamper-evident record of every administrative action performed in your organization. Essential for security investigations, compliance audits, and change tracking.'),
+          h('h4', { style: _h4 }, 'What gets logged'),
+          h('ul', { style: _ul },
+            h('li', null, h('strong', null, 'User actions'), ' — logins, role changes, user creation/deletion.'),
+            h('li', null, h('strong', null, 'Agent changes'), ' — configuration updates, deployments, pauses, kills.'),
+            h('li', null, h('strong', null, 'Policy updates'), ' — guardrail rule changes, DLP rule modifications.'),
+            h('li', null, h('strong', null, 'System events'), ' — automated interventions, scheduled tasks.')
+          ),
+          h('h4', { style: _h4 }, 'Color coding'),
+          h('ul', { style: _ul },
+            h('li', null, h('strong', null, 'Green'), ' — Create/add actions.'),
+            h('li', null, h('strong', null, 'Red'), ' — Delete/remove/revoke actions.'),
+            h('li', null, h('strong', null, 'Yellow'), ' — Update/edit actions.'),
+            h('li', null, h('strong', null, 'Blue'), ' — Login/auth actions.')
+          ),
+          h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Use the filter box to search across actions, users, and targets. Click any row to see full details including IP address and metadata.')
+        )),
         h('p', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'Complete record of all administrative actions and changes')
       ),
       h('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },

package/src/dashboard/pages/compliance.js

@@ -1,5 +1,6 @@
 import { h, useState, useEffect, Fragment, useApp, engineCall, buildAgentEmailMap, buildAgentDataMap, resolveAgentEmail, renderAgentBadge, getOrgId } from '../components/utils.js';
 import { I } from '../components/icons.js';
+import { HelpButton } from '../components/help-button.js';
 
 export function CompliancePage() {
   const { toast } = useApp();
@@ -34,14 +35,35 @@ export function CompliancePage() {
     window.open('/api/engine/compliance/reports/' + id + '/download?format=' + format, '_blank');
   };
 
+  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 };
+
   return h('div', { className: 'page-inner' },
-    h('div', { className: 'page-header' }, h('h1', null, 'Compliance Reporting')),
+    h('div', { className: 'page-header' }, h('h1', { style: { display: 'flex', alignItems: 'center' } }, 'Compliance Reporting', h(HelpButton, { label: 'Compliance Reporting' },
+      h('p', null, 'Generate and manage compliance reports for regulatory frameworks. Supports SOC2 summaries, GDPR data exports, and audit summaries.'),
+      h('h4', { style: _h4 }, 'Report types'),
+      h('ul', { style: _ul },
+        h('li', null, h('strong', null, 'SOC2 Summary'), ' — Documents security controls, access patterns, and policy enforcement for SOC2 auditors.'),
+        h('li', null, h('strong', null, 'GDPR Export'), ' — Generates a data subject access report for a specific agent, showing all personal data processed.'),
+        h('li', null, h('strong', null, 'Audit Summary'), ' — Aggregated view of all administrative actions over a date range.')
+      ),
+      h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Generate reports before compliance audits. Download in JSON for programmatic processing or CSV for spreadsheet review.')
+    ))),
     h('div', { className: 'tabs', style: { marginBottom: 16 } },
       ['reports', 'generate'].map(t => h('button', { key: t, className: 'tab' + (tab === t ? ' active' : ''), onClick: () => setTab(t) }, t.charAt(0).toUpperCase() + t.slice(1)))
     ),
     tab === 'generate' && h('div', { className: 'card' },
       h('div', { className: 'card-body' },
-        h('h3', { style: { marginBottom: 16 } }, 'Generate Report'),
+        h('h3', { style: { marginBottom: 16, display: 'flex', alignItems: 'center' } }, 'Generate Report', h(HelpButton, { label: 'Generate Report' },
+          h('p', null, 'Create a new compliance report. Select the report type, date range, and optionally scope to a specific agent.'),
+          h('ul', { style: _ul },
+            h('li', null, 'SOC2 and Audit reports use a date range to scope the data.'),
+            h('li', null, 'GDPR exports require selecting a specific agent.'),
+            h('li', null, 'Reports are generated asynchronously and appear in the Reports tab when complete.')
+          ),
+          h('div', { style: _tip }, h('strong', null, 'Tip: '), 'For SOC2 audits, generate monthly reports to maintain a continuous compliance record.')
+        )),
         h('label', { className: 'field-label' }, 'Report Type'),
         h('select', { className: 'input', value: form.type, onChange: e => setForm({ ...form, type: e.target.value }) }, h('option', { value: 'soc2' }, 'SOC2 Summary'), h('option', { value: 'gdpr' }, 'GDPR Export'), h('option', { value: 'audit' }, 'Audit Summary')),
         form.type !== 'gdpr' && h('div', { style: { display: 'flex', gap: 12, marginTop: 8 } },

package/src/dashboard/pages/dashboard.js

@@ -1,6 +1,7 @@
 import { h, useState, useEffect, Fragment, buildAgentEmailMap, buildAgentDataMap, resolveAgentEmail, renderAgentBadge, getOrgId, useApp, apiCall, engineCall } from '../components/utils.js';
 import { I } from '../components/icons.js';
 import { DetailModal } from '../components/modal.js';
+import { HelpButton } from '../components/help-button.js';
 
 export function SetupChecklist({ onNavigate }) {
   const [status, setStatus] = useState(null);
@@ -67,18 +68,33 @@ export function DashboardPage() {
   const agentData = buildAgentDataMap(mergedForMap);
   const { setPage: navTo } = useApp();
 
+  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 };
+
   return h(Fragment, null,
     h(SetupChecklist, { onNavigate: function(pg) { if (navTo) navTo(pg); } }),
     h('div', { className: 'stat-grid' },
-      h('div', { className: 'stat-card' }, h('div', { className: 'stat-label' }, 'Total Agents'), h('div', { className: 'stat-value' }, stats?.totalAgents ?? agents.length ?? '-')),
-      h('div', { className: 'stat-card' }, h('div', { className: 'stat-label' }, 'Active Agents'), h('div', { className: 'stat-value', style: { color: 'var(--success)' } }, (stats?.activeAgents ?? agents.filter(function(a) { return a.status === 'active'; }).length) || '-')),
-      h('div', { className: 'stat-card' }, h('div', { className: 'stat-label' }, 'Users'), h('div', { className: 'stat-value' }, stats?.totalUsers ?? '-')),
-      h('div', { className: 'stat-card' }, h('div', { className: 'stat-label' }, 'Audit Events'), h('div', { className: 'stat-value' }, stats?.totalAuditEvents ?? '-'))
+      h('div', { className: 'stat-card' }, h('div', { className: 'stat-label', style: { display: 'flex', alignItems: 'center' } }, 'Total Agents', h(HelpButton, { label: 'Total Agents' },
+        h('p', null, 'The total number of agents created in your organization, including active, paused, and archived agents.')
+      )), h('div', { className: 'stat-value' }, stats?.totalAgents ?? agents.length ?? '-')),
+      h('div', { className: 'stat-card' }, h('div', { className: 'stat-label', style: { display: 'flex', alignItems: 'center' } }, 'Active Agents', h(HelpButton, { label: 'Active Agents' },
+        h('p', null, 'Agents currently running and available to process tasks. If this is lower than Total Agents, some agents may be paused or archived.')
+      )), h('div', { className: 'stat-value', style: { color: 'var(--success)' } }, (stats?.activeAgents ?? agents.filter(function(a) { return a.status === 'active'; }).length) || '-')),
+      h('div', { className: 'stat-card' }, h('div', { className: 'stat-label', style: { display: 'flex', alignItems: 'center' } }, 'Users', h(HelpButton, { label: 'Users' },
+        h('p', null, 'Human team members with access to this dashboard. Manage users and invite team members from the Users page.')
+      )), h('div', { className: 'stat-value' }, stats?.totalUsers ?? '-')),
+      h('div', { className: 'stat-card' }, h('div', { className: 'stat-label', style: { display: 'flex', alignItems: 'center' } }, 'Audit Events', h(HelpButton, { label: 'Audit Events' },
+        h('p', null, 'Total logged events across all agents — tool calls, deployments, errors, etc. Visit the Activity page for full details.')
+      )), h('div', { className: 'stat-value' }, stats?.totalAuditEvents ?? '-'))
     ),
 
     h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
       h('div', { className: 'card' },
-        h('div', { className: 'card-header' }, h('h3', null, 'Agents'), h('button', { className: 'btn btn-sm btn-secondary', onClick: function() { navTo('agents'); } }, 'View all')),
+        h('div', { className: 'card-header' }, h('h3', { style: { display: 'flex', alignItems: 'center' } }, 'Agents', h(HelpButton, { label: 'Agents' },
+          h('p', null, 'A quick overview of your agents. Click "View all" to manage them — create new agents, configure skills, deploy, and monitor.'),
+          h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Click an agent\'s name to see their full detail page with logs, email, sessions, and more.')
+        )), h('button', { className: 'btn btn-sm btn-secondary', onClick: function() { navTo('agents'); } }, 'View all')),
         h('div', { className: 'card-body-flush' },
           agents.length === 0
             ? h('div', { className: 'empty-state' }, h('h3', null, 'No agents yet'), h('p', null, 'Create your first agent to get started'))
@@ -96,7 +112,10 @@ export function DashboardPage() {
       ),
 
       h('div', { className: 'card' },
-        h('div', { className: 'card-header' }, h('h3', null, 'Recent Activity'), h('button', { className: 'btn btn-sm btn-secondary', onClick: function() { navTo('activity'); } }, 'View all')),
+        h('div', { className: 'card-header' }, h('h3', { style: { display: 'flex', alignItems: 'center' } }, 'Recent Activity', h(HelpButton, { label: 'Recent Activity' },
+          h('p', null, 'The latest events across all agents — deployments, tool calls, errors, and status changes. Shows the 8 most recent events.'),
+          h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Click any event to see its full details. Red badges indicate errors that may need attention.')
+        )), h('button', { className: 'btn btn-sm btn-secondary', onClick: function() { navTo('activity'); } }, 'View all')),
         h('div', { className: 'card-body' },
           events.length === 0
             ? h('div', { style: { textAlign: 'center', padding: 24, color: 'var(--text-muted)', fontSize: 13 } }, 'No activity yet')

package/src/dashboard/pages/dlp.js

@@ -1,5 +1,6 @@
 import { h, useState, useEffect, Fragment, useApp, engineCall, buildAgentEmailMap, buildAgentDataMap, resolveAgentEmail, renderAgentBadge, getOrgId } from '../components/utils.js';
 import { I } from '../components/icons.js';
+import { HelpButton } from '../components/help-button.js';
 
 export function DLPPage() {
   const { toast } = useApp();
@@ -36,8 +37,25 @@ export function DLPPage() {
 
   const severityColor = (s) => s === 'critical' ? 'var(--danger)' : s === 'high' ? 'var(--warning)' : s === 'medium' ? 'var(--info)' : 'var(--text-muted)';
 
+  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 };
+
   return h('div', { className: 'page-inner' },
-    h('div', { className: 'page-header' }, h('h1', null, 'Data Loss Prevention'), h('button', { className: 'btn btn-primary', onClick: () => setShowModal(true) }, I.plus(), ' Add Rule')),
+    h('div', { className: 'page-header' }, h('h1', { style: { display: 'flex', alignItems: 'center' } }, 'Data Loss Prevention', h(HelpButton, { label: 'Data Loss Prevention' },
+      h('p', null, 'DLP prevents agents from accidentally leaking sensitive data like API keys, passwords, credit card numbers, or personal information in emails and tool outputs.'),
+      h('h4', { style: _h4 }, 'How it works'),
+      h('ul', { style: _ul },
+        h('li', null, h('strong', null, 'Rules'), ' — Define patterns (regex, keywords, or PII types) to detect sensitive data.'),
+        h('li', null, h('strong', null, 'Actions'), ' — Block, redact, warn, or log when a match is found.'),
+        h('li', null, h('strong', null, 'Violations'), ' — Every detection is logged for audit and investigation.')
+      ),
+      h('h4', { style: _h4 }, 'Built-in PII types'),
+      h('ul', { style: _ul },
+        h('li', null, 'email, ssn, credit_card, phone, api_key, aws_key')
+      ),
+      h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Use the Test tab to validate your rules against sample content before deploying them.')
+    )), h('button', { className: 'btn btn-primary', onClick: () => setShowModal(true) }, I.plus(), ' Add Rule')),
     h('div', { className: 'tabs', style: { marginBottom: 16 } },
       ['rules', 'violations', 'test'].map(t => h('button', { key: t, className: 'tab' + (tab === t ? ' active' : ''), onClick: () => setTab(t) }, t.charAt(0).toUpperCase() + t.slice(1)))
     ),
@@ -75,7 +93,10 @@ export function DLPPage() {
     ),
     tab === 'test' && h('div', { className: 'card' },
       h('div', { className: 'card-body' },
-        h('h3', { style: { marginBottom: 12 } }, 'Test DLP Scan'),
+        h('h3', { style: { marginBottom: 12, display: 'flex', alignItems: 'center' } }, 'Test DLP Scan', h(HelpButton, { label: 'Test DLP Scan' },
+          h('p', null, 'Paste any content here to test it against all active DLP rules. Shows which rules match and how many times.'),
+          h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Test with realistic data samples before deploying new rules to avoid false positives.')
+        )),
         h('textarea', { className: 'input', style: { minHeight: 100, marginBottom: 12 }, placeholder: 'Paste content to test against DLP rules...', value: testContent, onChange: (e) => setTestContent(e.target.value) }),
         h('button', { className: 'btn btn-primary', onClick: testScan }, 'Run Scan'),
         testResults && h('div', { style: { marginTop: 16 } },

package/src/dashboard/pages/domain-status.js

@@ -1,6 +1,7 @@
 import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall, showConfirm } from '../components/utils.js';
 import { I } from '../components/icons.js';
 import { E } from '../assets/icons/emoji-icons.js';
+import { HelpButton } from '../components/help-button.js';
 
 export function DomainStatusPage() {
   var { toast } = useApp();
@@ -165,6 +166,9 @@ export function DomainStatusPage() {
   var sub = data && data.subdomain;
 
   // ─── Styles ──────────────────────────────────
+  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 };
   var card = { padding: 24, background: 'var(--bg-secondary)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)', marginBottom: 16 };
   var labelSt = { fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 10 };
   var rowSt = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid var(--border)' };
@@ -172,7 +176,18 @@ export function DomainStatusPage() {
   return h(Fragment, null,
     // ─── Page Header ──────────────────────────────
     h('div', { style: { marginBottom: 24 } },
-      h('h1', { style: { fontSize: 20, fontWeight: 700 } }, 'Domain & Deployment'),
+      h('h1', { style: { fontSize: 20, fontWeight: 700, display: 'flex', alignItems: 'center' } }, 'Domain & Deployment', h(HelpButton, { label: 'Domain & Deployment' },
+        h('p', null, 'Configure how your AgenticMail Enterprise instance is accessed on the internet. Set up subdomains, custom domains, CORS policies, and deployment tunnels.'),
+        h('h4', { style: _h4 }, 'Sections'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Current Deployment'), ' — The URL where your dashboard is running right now.'),
+          h('li', null, h('strong', null, 'Subdomain'), ' — Your free agenticmail.io subdomain.'),
+          h('li', null, h('strong', null, 'Custom Domain'), ' — Use your own domain with DNS verification.'),
+          h('li', null, h('strong', null, 'CORS'), ' — Control which origins can make API requests.'),
+          h('li', null, h('strong', null, 'Migration'), ' — Move your deployment to another machine.')
+        ),
+        h('div', { style: _tip }, h('strong', null, 'Tip: '), 'If running locally, use the "Deploy to Production" section to expose your instance via a Cloudflare Tunnel.')
+      )),
       h('p', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'Manage the domain and URL for your AgenticMail Enterprise deployment')
     ),
 
@@ -185,7 +200,10 @@ export function DomainStatusPage() {
     // SECTION 1: Current Deployment
     // ═══════════════════════════════════════════════
     h('div', { style: card },
-      h('div', { style: labelSt }, 'Current Deployment'),
+      h('div', { style: Object.assign({}, labelSt, { display: 'flex', alignItems: 'center' }) }, 'Current Deployment', h(HelpButton, { label: 'Current Deployment' },
+        h('p', null, 'This shows the URL you\'re currently accessing the dashboard from. This is where your team and agents connect.'),
+        h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Share this URL with your team. If it shows localhost, you\'ll need to set up a tunnel or deploy to a server for external access.')
+      )),
       h('div', { style: { padding: '14px 16px', background: 'var(--bg-primary)', borderRadius: 'var(--radius)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', border: '1px solid var(--border)', marginBottom: 12 } },
         h('span', { style: { fontSize: 15, fontFamily: 'var(--font-mono, monospace)', color: 'var(--accent)', wordBreak: 'break-all' } }, actualUrl),
         h('button', { className: 'btn btn-sm', onClick: function() { navigator.clipboard.writeText(actualUrl); toast('Copied!', 'success'); } }, 'Copy')
@@ -200,7 +218,10 @@ export function DomainStatusPage() {
     // ═══════════════════════════════════════════════
     h('div', { style: card },
       h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 } },
-        h('div', { style: labelSt }, 'AgenticMail Subdomain'),
+        h('div', { style: Object.assign({}, labelSt, { display: 'flex', alignItems: 'center' }) }, 'AgenticMail Subdomain', h(HelpButton, { label: 'AgenticMail Subdomain' },
+          h('p', null, 'A free subdomain on agenticmail.io (e.g., yourcompany.agenticmail.io). This gives you a public URL without needing your own domain.'),
+          h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Changing the subdomain requires updating DNS records and any bookmarks or integrations that reference the old URL.')
+        )),
         !showEditSub && sub && h('button', { className: 'btn btn-sm', onClick: function() { setShowEditSub(true); setNewSub(sub || ''); setSubError(''); } }, 'Change')
       ),
 
@@ -268,7 +289,16 @@ export function DomainStatusPage() {
     h('div', { style: card },
       h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
         h('div', null,
-          h('div', { style: labelSt }, 'Custom Domain'),
+          h('div', { style: Object.assign({}, labelSt, { display: 'flex', alignItems: 'center' }) }, 'Custom Domain', h(HelpButton, { label: 'Custom Domain' },
+            h('p', null, 'Use your own domain (e.g., agents.yourcompany.com) for a professional, branded deployment. Requires DNS verification to prove ownership.'),
+            h('h4', { style: _h4 }, 'Setup Process'),
+            h('ul', { style: _ul },
+              h('li', null, h('strong', null, 'Register'), ' — Enter your domain and get DNS challenge records.'),
+              h('li', null, h('strong', null, 'Add DNS records'), ' — Add TXT (verification) and CNAME/A (routing) records at your DNS provider.'),
+              h('li', null, h('strong', null, 'Verify'), ' — Click "Verify DNS Now" once records propagate (up to 48 hours).')
+            ),
+            h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Use a subdomain like agents.yourcompany.com instead of the root domain — it\'s easier to set up and doesn\'t affect your main website.')
+          )),
           h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginTop: -6 } }, 'Deploy on your own domain — either a subdomain (agents.yourcompany.com) or root domain (yourcompany.com)')
         )
       ),
@@ -399,7 +429,15 @@ export function DomainStatusPage() {
     // ═══════════════════════════════════════════════
     h('div', { style: card },
       h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 } },
-        h('div', { style: labelSt }, 'Allowed Origins (CORS)'),
+        h('div', { style: Object.assign({}, labelSt, { display: 'flex', alignItems: 'center' }) }, 'Allowed Origins (CORS)', h(HelpButton, { label: 'Allowed Origins (CORS)' },
+          h('p', null, 'CORS (Cross-Origin Resource Sharing) controls which websites can make API requests to your AgenticMail server. This is a security measure to prevent unauthorized access.'),
+          h('h4', { style: _h4 }, 'What This Means'),
+          h('ul', { style: _ul },
+            h('li', null, h('strong', null, 'No origins listed'), ' — Any website can make API requests (open access). Fine for development, risky for production.'),
+            h('li', null, h('strong', null, 'Origins listed'), ' — Only those specific domains can make API requests.')
+          ),
+          h('div', { style: _tip }, h('strong', null, 'Tip: '), 'CORS is auto-updated when you change your subdomain or custom domain. For manual control, go to Settings → Network & Firewall.')
+        )),
         h('a', { href: '/dashboard/settings#network', style: { fontSize: 12, color: 'var(--accent)', textDecoration: 'none', fontWeight: 500 } }, 'Manage in Settings \u2192')
       ),
       corsOrigins.length === 0
@@ -424,7 +462,10 @@ export function DomainStatusPage() {
       h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 } },
         h('span', { style: { fontSize: 20 } }, '\uD83D\uDCE6'),
         h('div', null,
-          h('div', { style: { fontSize: 14, fontWeight: 700 } }, 'Migrate to Another Machine'),
+          h('div', { style: { fontSize: 14, fontWeight: 700, display: 'flex', alignItems: 'center' } }, 'Migrate to Another Machine', h(HelpButton, { label: 'Migration' },
+            h('p', null, 'Move your entire AgenticMail deployment to a different server or computer. All you need is the .env file — it contains all configuration and encryption keys.'),
+            h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Always back up your .env file securely. Without the VAULT_KEY, encrypted credentials cannot be recovered.')
+          )),
           h('div', { style: { fontSize: 12, color: 'var(--text-muted)' } }, 'Move your entire deployment to a new server or computer')
         )
       ),
@@ -467,7 +508,10 @@ export function DomainStatusPage() {
     // CLI Reference
     // ═══════════════════════════════════════════════
     h('div', { style: card },
-      h('div', { style: labelSt }, 'CLI Commands'),
+      h('div', { style: Object.assign({}, labelSt, { display: 'flex', alignItems: 'center' }) }, 'CLI Commands', h(HelpButton, { label: 'CLI Commands' },
+        h('p', null, 'Common command-line commands for managing your AgenticMail Enterprise installation. Run these in your terminal on the server where AgenticMail is installed.'),
+        h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Use "npx @agenticmail/enterprise@latest" to always run the latest version without manually updating.')
+      )),
       h('div', { style: { display: 'grid', gap: 8 } },
         cliRow('Initial setup', 'npx @agenticmail/enterprise setup'),
         cliRow('Start server', 'npx @agenticmail/enterprise start'),

package/src/dashboard/pages/guardrails.js

@@ -1,5 +1,6 @@
 import { h, useState, useEffect, useCallback, Fragment, useApp, engineCall, buildAgentEmailMap, resolveAgentEmail, buildAgentDataMap, renderAgentBadge, getOrgId } from '../components/utils.js';
 import { I } from '../components/icons.js';
+import { HelpButton } from '../components/help-button.js';
 
 // ─── Constants ──────────────────────────────────────────
 
@@ -111,8 +112,23 @@ export function GuardrailsPage() {
     { id: 'rules', label: 'Rules & Interventions' },
   ];
 
+  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 };
+
   return h('div', { className: 'page-inner' },
-    h('div', { className: 'page-header' }, h('h1', null, 'Guardrails & Intervention')),
+    h('div', { className: 'page-header' }, h('h1', { style: { display: 'flex', alignItems: 'center' } }, 'Guardrails & Intervention', h(HelpButton, { label: 'Guardrails & Intervention' },
+      h('p', null, 'Central control panel for agent safety. Define policies agents must follow, configure automated rules that trigger interventions, manage onboarding, and inspect agent memory.'),
+      h('h4', { style: _h4 }, 'Tabs overview'),
+      h('ul', { style: _ul },
+        h('li', null, h('strong', null, 'Overview'), ' — Quick stats, agent controls (pause/resume/kill), onboarding status, and recent interventions.'),
+        h('li', null, h('strong', null, 'Policies'), ' — Define behavioral rules agents must acknowledge and follow.'),
+        h('li', null, h('strong', null, 'Onboarding'), ' — Track which agents have acknowledged org policies.'),
+        h('li', null, h('strong', null, 'Agent Memory'), ' — View and manage what agents remember.'),
+        h('li', null, h('strong', null, 'Rules & Interventions'), ' — Automated guardrail rules, anomaly detection, and intervention history.')
+      ),
+      h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Start with the Overview tab for a quick health check, then drill into specific tabs for detailed management.')
+    ))),
     h('div', { className: 'tabs', style: { marginBottom: 16 } },
       TABS.map(function(t) { return h('button', { key: t.id, className: 'tab' + (activeTab === t.id ? ' active' : ''), onClick: function() { setTab(t.id); } }, t.label); })
     ),
@@ -208,7 +224,14 @@ function OverviewTab(props) {
     ),
     // Onboarding progress summary
     onboardingData.length > 0 && h('div', { className: 'card', style: { marginBottom: 16 } },
-      h('div', { className: 'card-header' }, h('h3', null, 'Agent Onboarding Status')),
+      h('div', { className: 'card-header' }, h('h3', { style: { display: 'flex', alignItems: 'center' } }, 'Agent Onboarding Status', h(HelpButton, { label: 'Agent Onboarding Status' },
+        h('p', null, 'Shows which agents have acknowledged your organization\'s policies. Agents must complete onboarding before they can operate fully.'),
+        h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+          h('li', null, h('strong', null, 'Green'), ' — Completed all required policy acknowledgments.'),
+          h('li', null, h('strong', null, 'Yellow'), ' — In progress, some policies still pending.'),
+          h('li', null, h('strong', null, 'Red'), ' — Needs renewal due to policy changes.')
+        )
+      ))),
       h('div', { className: 'card-body' },
         onboardingData.slice(0, 8).map(function(ag) {
           var statusColor = ag.overallStatus === 'completed' ? '#10b981' : ag.overallStatus === 'in_progress' ? '#f59e0b' : ag.overallStatus === 'needs_renewal' ? '#ef4444' : '#64748b';
@@ -223,7 +246,10 @@ function OverviewTab(props) {
     ),
     // Recent interventions
     h('div', { className: 'card' },
-      h('div', { className: 'card-header' }, h('h3', null, 'Recent Interventions')),
+      h('div', { className: 'card-header' }, h('h3', { style: { display: 'flex', alignItems: 'center' } }, 'Recent Interventions', h(HelpButton, { label: 'Recent Interventions' },
+        h('p', null, 'Log of recent agent interventions — pauses, kills, and resumes. Shows what happened, which agent was affected, and who triggered it.'),
+        h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'If an agent was paused by an automated rule, you can resume it directly from the Actions column.')
+      ))),
       interventions.length === 0
         ? h(EmptyState, { message: 'No interventions recorded' })
         : h('table', { className: 'data-table' },