@agenticmail/enterprise 0.5.198 → 0.5.200

package/dist/dashboard/pages/agent-detail/tool-security.js

@@ -3,6 +3,7 @@ import { I } from '../../components/icons.js';
 import { E } from '../../assets/icons/emoji-icons.js';
 import { TagInput } from '../../components/tag-input.js';
 import { Badge, EmptyState } from './shared.js?v=4';
+import { HelpButton } from '../../components/help-button.js';
 
 var _tsCardStyle = { border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: 20, marginBottom: 16 };
 var _tsCardTitle = { fontSize: 15, fontWeight: 600, marginBottom: 4, display: 'flex', alignItems: 'center', gap: 8 };
@@ -232,7 +233,17 @@ export function ToolSecuritySection(props) {
     // Header
     h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 } },
       h('div', null,
-        h('h3', { style: { margin: 0, fontSize: 18, fontWeight: 600 } }, 'Tool Security'),
+        h('h3', { style: { margin: 0, fontSize: 18, fontWeight: 600, display: 'flex', alignItems: 'center' } }, 'Tool Security', h(HelpButton, { label: 'Tool Security' },
+          h('p', null, 'Configure security sandboxes and middleware for this agent\'s tool usage. Unmodified settings inherit from organization defaults.'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'Path Sandbox'), ' — Restricts which directories the agent can read/write.'),
+            h('li', null, h('strong', null, 'SSRF Protection'), ' — Blocks access to internal networks and metadata endpoints.'),
+            h('li', null, h('strong', null, 'Command Sanitizer'), ' — Controls which shell commands are allowed.'),
+            h('li', null, h('strong', null, 'Rate Limiting'), ' — Per-tool call limits to prevent runaway behavior.'),
+            h('li', null, h('strong', null, 'Circuit Breaker'), ' — Auto-stops calling failing tools after repeated errors.')
+          ),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Only override settings you need to change. Agent-level overrides take precedence over org defaults. Use "Reset to Org Defaults" to remove all overrides.')
+        )),
         h('p', { style: { margin: '4px 0 0', fontSize: 13, color: 'var(--text-muted)' } },
           'Configure tool security overrides for this agent. Unmodified settings inherit from ',
           h('strong', null, 'org defaults'),
@@ -273,7 +284,10 @@ export function ToolSecuritySection(props) {
 
       // Path Sandbox
       h('div', { style: _tsCardStyle },
-        h('div', { style: _tsCardTitle }, I.folder(), ' Path Sandbox'),
+        h('div', { style: _tsCardTitle }, I.folder(), ' Path Sandbox', h(HelpButton, { label: 'Path Sandbox' },
+          h('p', null, 'Restricts file system access to specific directories. Prevents agents from reading sensitive files like .env, SSH keys, or system configs.'),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Add your project directory to allowed dirs. Use blocked patterns to exclude sensitive files like .env or credentials.')
+        )),
         h('div', { style: _tsCardDesc }, 'Controls which directories this agent can read/write.'),
         h(TSToggle, { label: 'Enable path sandboxing', checked: ps.enabled !== false, inherited: !isOverridden('pathSandbox', 'enabled'), onChange: function(v) { patchSec('pathSandbox', 'enabled', v); } }),
         h(TagInput, { label: 'Allowed Directories', value: ps.allowedDirs || [], onChange: function(v) { patchSec('pathSandbox', 'allowedDirs', v); }, placeholder: '/path/to/allow', mono: true }),
@@ -282,7 +296,9 @@ export function ToolSecuritySection(props) {
 
       // SSRF Guard
       h('div', { style: _tsCardStyle },
-        h('div', { style: _tsCardTitle }, I.globe(), ' SSRF Protection'),
+        h('div', { style: _tsCardTitle }, I.globe(), ' SSRF Protection', h(HelpButton, { label: 'SSRF Protection' },
+          h('p', null, 'Server-Side Request Forgery protection prevents the agent from accessing internal infrastructure like cloud metadata endpoints (169.254.x.x), private networks (10.x.x.x), or localhost services.')
+        )),
         h('div', { style: _tsCardDesc }, 'Blocks this agent from accessing internal networks and metadata endpoints.'),
         h(TSToggle, { label: 'Enable SSRF protection', checked: ssrf.enabled !== false, inherited: !isOverridden('ssrf', 'enabled'), onChange: function(v) { patchSec('ssrf', 'enabled', v); } }),
         h(TagInput, { label: 'Allowed Hosts', value: ssrf.allowedHosts || [], onChange: function(v) { patchSec('ssrf', 'allowedHosts', v); }, placeholder: 'api.example.com', mono: true }),
@@ -292,7 +308,10 @@ export function ToolSecuritySection(props) {
 
     // Command Sanitizer (full width)
     h('div', { style: _tsCardStyle },
-      h('div', { style: _tsCardTitle }, I.terminal(), ' Command Sanitizer'),
+      h('div', { style: _tsCardTitle }, I.terminal(), ' Command Sanitizer', h(HelpButton, { label: 'Command Sanitizer' },
+        h('p', null, 'Controls shell command execution. Use blocklist mode to deny dangerous commands, or allowlist mode to only permit specific safe commands.'),
+        h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Allowlist mode is more secure but requires listing every allowed command. Blocklist mode is easier — just block dangerous patterns like "rm -rf" or "curl | sh".')
+      )),
       h('div', { style: _tsCardDesc }, 'Controls which shell commands this agent can execute.'),
       h(TSToggle, { label: 'Enable command validation', checked: cs.enabled !== false, inherited: !isOverridden('commandSanitizer', 'enabled'), onChange: function(v) { patchSec('commandSanitizer', 'enabled', v); } }),
       h('div', { style: { marginBottom: 12 } },
@@ -314,7 +333,9 @@ export function ToolSecuritySection(props) {
 
       // Audit Logging
       h('div', { style: _tsCardStyle },
-        h('div', { style: _tsCardTitle }, I.journal(), ' Audit Logging'),
+        h('div', { style: _tsCardTitle }, I.journal(), ' Audit Logging', h(HelpButton, { label: 'Audit Logging' },
+          h('p', null, 'Records every tool call this agent makes. Essential for compliance, debugging, and understanding agent behavior. Sensitive values are automatically redacted.')
+        )),
         h('div', { style: _tsCardDesc }, 'Logs every tool invocation for this agent.'),
         h(TSToggle, { label: 'Enable audit logging', checked: audit.enabled !== false, inherited: !isOverridden('audit', 'enabled'), onChange: function(v) { patchMw('audit', 'enabled', v); } }),
         h(TagInput, { label: 'Keys to Redact', value: audit.redactKeys || [], onChange: function(v) { patchMw('audit', 'redactKeys', v); }, placeholder: 'custom_secret', mono: true })
@@ -322,7 +343,9 @@ export function ToolSecuritySection(props) {
 
       // Rate Limiting
       h('div', { style: _tsCardStyle },
-        h('div', { style: _tsCardTitle }, I.clock(), ' Rate Limiting'),
+        h('div', { style: _tsCardTitle }, I.clock(), ' Rate Limiting', h(HelpButton, { label: 'Rate Limiting' },
+          h('p', null, 'Sets maximum calls per minute for each tool. Prevents runaway loops where the agent calls the same tool hundreds of times. Each tool has a token bucket that refills at the configured rate.')
+        )),
         h('div', { style: _tsCardDesc }, 'Per-tool rate limits for this agent.'),
         h(TSToggle, { label: 'Enable rate limiting', checked: rl.enabled !== false, inherited: !isOverridden('rateLimit', 'enabled'), onChange: function(v) { patchMw('rateLimit', 'enabled', v); } }),
         h(TSRateLimitEditor, { overrides: rl.overrides || {}, onChange: function(v) { patchMw('rateLimit', 'overrides', v); } })
@@ -330,14 +353,18 @@ export function ToolSecuritySection(props) {
 
       // Circuit Breaker
       h('div', { style: _tsCardStyle },
-        h('div', { style: _tsCardTitle }, I.pause(), ' Circuit Breaker'),
+        h('div', { style: _tsCardTitle }, I.pause(), ' Circuit Breaker', h(HelpButton, { label: 'Circuit Breaker' },
+          h('p', null, 'Automatically stops calling a tool after consecutive failures. Prevents wasting tokens and API calls on broken integrations. The circuit "opens" after failures and "closes" after a cooldown period.')
+        )),
         h('div', { style: _tsCardDesc }, 'Auto-stops calling failing tools after consecutive failures.'),
         h(TSToggle, { label: 'Enable circuit breaker', checked: cb.enabled !== false, inherited: !isOverridden('circuitBreaker', 'enabled'), onChange: function(v) { patchMw('circuitBreaker', 'enabled', v); } })
       ),
 
       // Telemetry
       h('div', { style: _tsCardStyle },
-        h('div', { style: _tsCardTitle }, I.chart(), ' Telemetry'),
+        h('div', { style: _tsCardTitle }, I.chart(), ' Telemetry', h(HelpButton, { label: 'Telemetry' },
+          h('p', null, 'Collects timing data, success rates, and usage patterns for this agent\'s tools. Useful for identifying slow tools, optimizing workflows, and capacity planning.')
+        )),
         h('div', { style: _tsCardDesc }, 'Collects execution timing and metrics for this agent\'s tools.'),
         h(TSToggle, { label: 'Enable telemetry', checked: tel.enabled !== false, inherited: !isOverridden('telemetry', 'enabled'), onChange: function(v) { patchMw('telemetry', 'enabled', v); } })
       )

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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 } },