@agenticmail/enterprise 0.5.198 → 0.5.200

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

@@ -1,6 +1,12 @@
 import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall, engineCall, formatUptime, buildAgentDataMap, renderAgentBadge, showConfirm, getOrgId } 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';
+
+// ─── Help tooltip 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 };
 
 // ─── Voice Voices ───
 
@@ -38,7 +44,7 @@ var rowStyle = { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 };
 
 function CardHeader(props) {
   return h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
-    h('h4', { style: { margin: 0, fontSize: 14, fontWeight: 600 } }, props.title),
+    h('h4', { style: { margin: 0, fontSize: 14, fontWeight: 600, display: 'flex', alignItems: 'center' } }, props.title, props.help || null),
     props.onEdit && !props.editing
       ? h('button', { className: 'btn btn-ghost btn-sm', onClick: props.onEdit }, 'Edit')
       : props.editing
@@ -270,6 +276,16 @@ export function ConfigurationSection(props) {
     h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
       h(CardHeader, {
         title: 'Default LLM Model',
+        help: h(HelpButton, { label: 'Default LLM Model' },
+          h('p', null, 'The primary AI model this agent uses for all conversations and tasks.'),
+          h('h4', { style: _h4 }, 'Settings'),
+          h('ul', { style: _ul },
+            h('li', null, h('strong', null, 'Provider'), ' — The AI provider (Anthropic, OpenAI, Google, etc.). Must have an API key configured in Settings > API Keys.'),
+            h('li', null, h('strong', null, 'Model'), ' — The specific model to use (e.g., claude-sonnet-4-20250514, gpt-4o). Newer models are generally smarter but cost more.'),
+            h('li', null, h('strong', null, 'Thinking Level'), ' — Extended reasoning capability. Higher levels let the model "think step by step" before responding, improving quality for complex tasks at the cost of more tokens.')
+          ),
+          h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Use Model Routing below to assign different models for different task types — e.g., a cheaper model for chat and a smarter one for complex tasks.')
+        ),
         editing: editingModel,
         saving: saving,
         onEdit: function() {
@@ -323,6 +339,19 @@ export function ConfigurationSection(props) {
     h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
       h(CardHeader, {
         title: 'Model Routing',
+        help: h(HelpButton, { label: 'Model Routing' },
+          h('p', null, 'Assign different AI models to different types of tasks. This lets you optimize for cost and quality.'),
+          h('h4', { style: _h4 }, 'Task Types'),
+          h('ul', { style: _ul },
+            h('li', null, h('strong', null, 'Chat'), ' — Real-time conversations (Slack, Teams, WhatsApp). Usually benefits from a fast model.'),
+            h('li', null, h('strong', null, 'Meeting'), ' — Meeting summaries and follow-ups. Often needs a larger context window.'),
+            h('li', null, h('strong', null, 'Email'), ' — Composing and replying to emails. Benefits from a capable writing model.'),
+            h('li', null, h('strong', null, 'Task'), ' — Delegated tasks from managers or other agents.'),
+            h('li', null, h('strong', null, 'Scheduling'), ' — Calendar management and scheduling tasks.')
+          ),
+          h('p', null, 'Leave a route empty to use the Default LLM Model for that task type.'),
+          h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Use cheaper models (e.g., claude-haiku, gpt-4o-mini) for simple chat and expensive ones (claude-opus, gpt-4o) for complex tasks to save costs.')
+        ),
         editing: editingRouting,
         saving: saving,
         onEdit: function() {
@@ -397,6 +426,14 @@ export function ConfigurationSection(props) {
     h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
       h(CardHeader, {
         title: 'Meeting Voice (ElevenLabs)',
+        help: h(HelpButton, { label: 'Meeting Voice' },
+          h('p', null, 'Configure a text-to-speech voice for this agent to use in meetings and voice interactions via ElevenLabs.'),
+          h('ul', { style: _ul },
+            h('li', null, 'The voice ID comes from your ElevenLabs dashboard (elevenlabs.io > Voices > Copy Voice ID).'),
+            h('li', null, 'Name is just a label for your reference.')
+          ),
+          h('div', { style: _tip }, h('strong', null, 'Tip: '), 'ElevenLabs offers free tier voices. Clone a custom voice for your agent\'s unique identity.')
+        ),
         editing: editingVoice,
         saving: saving,
         onEdit: function() {
@@ -432,6 +469,10 @@ export function ConfigurationSection(props) {
     h('div', { className: 'card', style: { padding: 20, marginBottom: 20 } },
       h(CardHeader, {
         title: 'Description',
+        help: h(HelpButton, { label: 'Agent Description' },
+          h('p', null, 'A human-readable description of what this agent does. This is shown to other agents and team members, and is included in the agent\'s system prompt to help it understand its role.'),
+          h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Be specific about the agent\'s responsibilities. "Handles customer support for billing questions" is better than "support agent".')
+        ),
         editing: editingDesc,
         saving: saving,
         onEdit: function() {

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

@@ -1,6 +1,7 @@
 import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall, engineCall, formatUptime, buildAgentDataMap, renderAgentBadge, showConfirm, getOrgId } 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';
 import { TagInput } from '../../components/tag-input.js';
 import { Badge, StatCard, EmptyState } from './shared.js?v=4';
 
@@ -208,19 +209,29 @@ export function DeploymentSection(props) {
       .catch(function(err) { toast(err.message, 'error'); });
   };
 
-  var deleteAgent = function() {
-    showConfirm({
-      title: 'Delete Agent',
-      message: 'Are you sure you want to delete agent "' + (ea.name || identity.name || agentId) + '"? This will remove all associated data.',
-      warning: 'This action cannot be undone.',
-      danger: true,
-      confirmText: 'Delete Agent'
-    }).then(function(confirmed) {
-      if (!confirmed) return;
-      apiCall('/bridge/agents/' + agentId, { method: 'DELETE' })
-        .then(function() { toast('Agent deleted', 'success'); if (onBack) onBack(); })
-        .catch(function(err) { toast(err.message, 'error'); });
-    });
+  // 5-step delete confirmation flow
+  var [deleteStep, setDeleteStep] = useState(0);
+  var [deleteTyped, setDeleteTyped] = useState('');
+  var _agentName = ea.name || identity.name || agentId;
+
+  var startDelete = function() { setDeleteStep(1); setDeleteTyped(''); };
+  var cancelDelete = function() { setDeleteStep(0); setDeleteTyped(''); };
+  var [deleting, setDeleting] = useState(false);
+
+  var advanceDelete = async function() {
+    if (deleteStep < 5) { setDeleteStep(deleteStep + 1); return; }
+    if (deleteStep === 5) {
+      if (deleteTyped.trim().toLowerCase() !== _agentName.trim().toLowerCase()) {
+        toast('Agent name does not match', 'error'); return;
+      }
+      setDeleting(true);
+      try {
+        await apiCall('/bridge/agents/' + agentId, { method: 'DELETE' });
+        toast('Agent deleted', 'success');
+        if (onBack) onBack();
+      } catch (err) { toast(err.message, 'error'); }
+      setDeleting(false); setDeleteStep(0);
+    }
   };
 
   if (loading) {
@@ -232,7 +243,18 @@ export function DeploymentSection(props) {
     // ─── Deployment Edit Card ─────────────────────────────
     editingDeploy && h('div', { className: 'card', style: { marginBottom: 20, border: '2px solid var(--accent)' } },
       h('div', { className: 'card-header', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-        h('span', null, 'Edit Deployment Configuration'),
+        h('span', { style: { display: 'flex', alignItems: 'center' } }, 'Edit Deployment Configuration',
+          h(HelpButton, { label: 'Deployment Configuration' },
+            h('p', null, 'Configure where and how this agent is deployed. These settings control the agent\'s runtime environment.'),
+            h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+              h('li', null, h('strong', null, 'Target'), ' — The cloud platform or infrastructure (Fly.io, AWS, GCP, local, etc.).'),
+              h('li', null, h('strong', null, 'Region'), ' — Where the agent runs. Choose a region close to your users for lower latency.'),
+              h('li', null, h('strong', null, 'Resources'), ' — CPU/memory allocation. More resources = faster responses but higher cost.'),
+              h('li', null, h('strong', null, 'Environment Variables'), ' — Secrets and config values injected at runtime. Never hard-code API keys in agent code.')
+            ),
+            h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Use the smallest resource allocation that handles your load. You can always scale up later.')
+          )
+        ),
         h('div', { style: { display: 'flex', gap: 8 } },
           h('button', { className: 'btn btn-ghost btn-sm', onClick: function() { setEditingDeploy(false); } }, 'Cancel'),
           h('button', { className: 'btn btn-primary btn-sm', disabled: savingDeploy, onClick: saveDeploy }, savingDeploy ? 'Saving...' : 'Save')
@@ -658,7 +680,13 @@ export function DeploymentSection(props) {
 
     // ─── Knowledge Bases Card ───────────────────────────
     h('div', { className: 'card', style: { marginBottom: 20 } },
-      h('div', { className: 'card-header' }, h('span', null, 'Knowledge Bases')),
+      h('div', { className: 'card-header' }, h('span', { style: { display: 'flex', alignItems: 'center' } }, 'Knowledge Bases',
+        h(HelpButton, { label: 'Knowledge Bases' },
+          h('p', null, 'Connect knowledge bases to give this agent access to your organization\'s documents, FAQs, and reference material.'),
+          h('p', null, 'When a knowledge base is connected, the agent can search and retrieve relevant information during conversations — this is called Retrieval-Augmented Generation (RAG).'),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Create knowledge bases from the Knowledge page first, then connect them here. An agent can have multiple knowledge bases.')
+        )
+      )),
       knowledgeBases.length > 0
         ? h('div', { className: 'card-body-flush' },
             h('table', { className: 'data-table' },
@@ -759,7 +787,110 @@ export function DeploymentSection(props) {
             h('div', { style: { fontSize: 14, fontWeight: 600, marginBottom: 4 } }, 'Delete Agent'),
             h('div', { style: { fontSize: 12, color: 'var(--text-muted)' } }, 'Permanently delete this agent and all associated data. This action cannot be undone.')
           ),
-          h('button', { className: 'btn btn-danger btn-sm', onClick: deleteAgent }, I.trash(), ' Delete Agent')
+          h('button', { className: 'btn btn-danger btn-sm', onClick: startDelete }, I.trash(), ' Delete Agent')
+        )
+      )
+    ),
+
+    // ─── 5-Step Delete Confirmation Modal ──────────────────
+    deleteStep >= 1 && h('div', { className: 'modal-overlay', onClick: cancelDelete },
+      h('div', { className: 'modal', onClick: function(e) { e.stopPropagation(); }, style: { width: 480 } },
+        h('div', { className: 'modal-header' },
+          h('h2', { style: { color: 'var(--danger)' } },
+            ['', 'Step 1: Are you sure?', 'Step 2: Data Loss Warning', 'Step 3: Memory & Knowledge Loss', 'Step 4: Communication & Integration Impact', 'Step 5: Final Confirmation'][deleteStep]
+          ),
+          h('button', { className: 'btn btn-ghost btn-icon', onClick: cancelDelete }, '\u00D7')
+        ),
+        h('div', { style: { display: 'flex', gap: 4, padding: '0 20px', paddingTop: 12 } },
+          [1,2,3,4,5].map(function(s) {
+            return h('div', { key: s, style: { flex: 1, height: 4, borderRadius: 2, background: s <= deleteStep ? 'var(--danger)' : 'var(--border)' } });
+          })
+        ),
+        h('div', { className: 'modal-body', style: { padding: 20 } },
+          deleteStep === 1 && h(Fragment, null,
+            h('p', { style: { marginBottom: 12 } }, 'You are about to delete agent ', h('strong', null, _agentName), '.'),
+            h('p', { style: { color: 'var(--text-muted)', fontSize: 13, marginBottom: 12 } }, 'This is a destructive action that will permanently remove this agent and everything associated with it. There is no undo, no recycle bin, and no way to recover.'),
+            h('p', { style: { fontSize: 13 } }, 'Please proceed through the next steps to understand exactly what will be lost.'),
+            h('div', { style: { display: 'flex', gap: 8, marginTop: 20, justifyContent: 'flex-end' } },
+              h('button', { className: 'btn btn-secondary', onClick: cancelDelete }, 'Cancel'),
+              h('button', { className: 'btn btn-danger', onClick: advanceDelete }, 'I understand, continue')
+            )
+          ),
+          deleteStep === 2 && h(Fragment, null,
+            h('div', { style: { background: 'var(--danger-soft)', border: '1px solid var(--danger)', borderRadius: 'var(--radius)', padding: 12, marginBottom: 16 } },
+              h('strong', { style: { color: 'var(--danger)', display: 'block', marginBottom: 6 } }, 'ALL AGENT DATA WILL BE DESTROYED'),
+              h('ul', { style: { margin: '4px 0 0', paddingLeft: 18, fontSize: 13 } },
+                h('li', null, 'All email messages (inbox, sent, drafts, folders)'),
+                h('li', null, 'All conversation sessions and chat history'),
+                h('li', null, 'All tool execution logs and audit trails'),
+                h('li', null, 'All configuration, settings, and deployment config'),
+                h('li', null, 'All scheduled jobs, cron tasks, and automations')
+              )
+            ),
+            h('p', { style: { fontSize: 13, color: 'var(--text-muted)' } }, 'If you need any of this data, export it BEFORE proceeding.'),
+            h('div', { style: { display: 'flex', gap: 8, marginTop: 20, justifyContent: 'flex-end' } },
+              h('button', { className: 'btn btn-secondary', onClick: cancelDelete }, 'Cancel'),
+              h('button', { className: 'btn btn-danger', onClick: advanceDelete }, 'Continue anyway')
+            )
+          ),
+          deleteStep === 3 && h(Fragment, null,
+            h('div', { style: { background: 'var(--danger-soft)', border: '1px solid var(--danger)', borderRadius: 'var(--radius)', padding: 12, marginBottom: 16 } },
+              h('strong', { style: { color: 'var(--danger)', display: 'block', marginBottom: 6 } }, 'MEMORY & KNOWLEDGE PERMANENTLY LOST'),
+              h('ul', { style: { margin: '4px 0 0', paddingLeft: 18, fontSize: 13 } },
+                h('li', null, 'All long-term memory entries the agent has built over time'),
+                h('li', null, 'All learned preferences, patterns, and behavioral adaptations'),
+                h('li', null, 'All knowledge base contributions and embeddings'),
+                h('li', null, 'All training data, fine-tuning, and custom instructions'),
+                h('li', null, 'The agent\'s entire personality and relationship context')
+              )
+            ),
+            h('p', { style: { fontSize: 13, color: 'var(--text-muted)' } }, 'This agent has been learning and building context. Once deleted, this knowledge cannot be reconstructed even if you create a new agent with the same name.'),
+            h('div', { style: { display: 'flex', gap: 8, marginTop: 20, justifyContent: 'flex-end' } },
+              h('button', { className: 'btn btn-secondary', onClick: cancelDelete }, 'Cancel'),
+              h('button', { className: 'btn btn-danger', onClick: advanceDelete }, 'Continue anyway')
+            )
+          ),
+          deleteStep === 4 && h(Fragment, null,
+            h('div', { style: { background: 'var(--danger-soft)', border: '1px solid var(--danger)', borderRadius: 'var(--radius)', padding: 12, marginBottom: 16 } },
+              h('strong', { style: { color: 'var(--danger)', display: 'block', marginBottom: 6 } }, 'COMMUNICATION & INTEGRATION IMPACT'),
+              h('ul', { style: { margin: '4px 0 0', paddingLeft: 18, fontSize: 13 } },
+                h('li', null, 'The agent\'s email address will stop working immediately'),
+                h('li', null, 'Any external services or APIs relying on this agent will break'),
+                h('li', null, 'Other agents that communicate with this agent will lose their connection'),
+                h('li', null, 'Active workflows, approval chains, and escalation paths will be disrupted'),
+                h('li', null, 'Contacts and external parties will receive bounced emails')
+              )
+            ),
+            h('p', { style: { fontSize: 13, color: 'var(--text-muted)' } }, 'If this agent is part of a team or workflow, consider reassigning its responsibilities first.'),
+            h('div', { style: { display: 'flex', gap: 8, marginTop: 20, justifyContent: 'flex-end' } },
+              h('button', { className: 'btn btn-secondary', onClick: cancelDelete }, 'Cancel'),
+              h('button', { className: 'btn btn-danger', onClick: advanceDelete }, 'I accept the consequences')
+            )
+          ),
+          deleteStep === 5 && h(Fragment, null,
+            h('div', { style: { background: 'var(--danger-soft)', border: '1px solid var(--danger)', borderRadius: 'var(--radius)', padding: 12, marginBottom: 16, textAlign: 'center' } },
+              h('strong', { style: { color: 'var(--danger)', fontSize: 15 } }, 'THIS ACTION IS PERMANENT AND IRREVERSIBLE')
+            ),
+            h('p', { style: { marginBottom: 12 } }, 'To confirm deletion, type the agent name ', h('strong', { style: { fontFamily: 'var(--font-mono)', background: 'var(--bg-tertiary)', padding: '2px 6px', borderRadius: 4 } }, _agentName), ' below:'),
+            h('input', {
+              type: 'text',
+              className: 'form-control',
+              placeholder: 'Type agent name to confirm...',
+              value: deleteTyped,
+              autoFocus: true,
+              onInput: function(e) { setDeleteTyped(e.target.value); },
+              onKeyDown: function(e) { if (e.key === 'Enter') advanceDelete(); },
+              style: { marginBottom: 16, borderColor: deleteTyped.trim().toLowerCase() === _agentName.trim().toLowerCase() ? 'var(--danger)' : 'var(--border)' }
+            }),
+            h('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' } },
+              h('button', { className: 'btn btn-secondary', onClick: cancelDelete }, 'Cancel'),
+              h('button', {
+                className: 'btn btn-danger',
+                disabled: deleteTyped.trim().toLowerCase() !== _agentName.trim().toLowerCase() || deleting,
+                onClick: advanceDelete
+              }, deleting ? 'Deleting...' : 'Permanently delete agent')
+            )
+          )
         )
       )
     )

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

@@ -3,6 +3,7 @@ import { I } from '../../components/icons.js';
 import { E } from '../../assets/icons/emoji-icons.js';
 import { ProviderLogo } from '../../assets/provider-logos.js';
 import { Badge, EmptyState } from './shared.js?v=4';
+import { HelpButton } from '../../components/help-button.js';
 
 export function EmailSection(props) {
   var agentId = props.agentId;
@@ -222,7 +223,15 @@ export function EmailSection(props) {
   return h('div', { className: 'card' },
     h('div', { className: 'card-header', style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
       h('div', null,
-        h('h3', { className: 'card-title' }, 'Email Connection'),
+        h('h3', { className: 'card-title', style: { display: 'flex', alignItems: 'center' } }, 'Email Connection', h(HelpButton, { label: 'Email Connection' },
+          h('p', null, 'Connect this agent to an email account so it can send and receive emails autonomously. Supports IMAP/SMTP (any provider), Microsoft OAuth, and Google OAuth.'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'Email + Password'), ' — Works with any email provider. Use app passwords with 2FA.'),
+            h('li', null, h('strong', null, 'Microsoft OAuth'), ' — For Microsoft 365 / Outlook. Requires Azure AD app registration.'),
+            h('li', null, h('strong', null, 'Google OAuth'), ' — For Google Workspace / Gmail. Requires Google Cloud project.')
+          ),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Create a dedicated email address for each agent (e.g., support-agent@company.com). Don\'t share your personal email — agents need their own accounts.')
+        )),
         h('p', { style: { fontSize: 12, color: 'var(--text-muted)', margin: '2px 0 0' } }, 'Connect this agent to an email account so it can send and receive emails.')
       ),
       statusBadge

package/src/dashboard/pages/agent-detail/guardrails.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 { TagInput } from '../../components/tag-input.js';
+import { HelpButton } from '../../components/help-button.js';
 import { Badge, EmptyState } from './shared.js?v=4';
 
 // ════════════════════════════════════════════════════════════
@@ -301,7 +302,18 @@ export function GuardrailsSection(props) {
 
     // ─── Interventions Tab ──────────────────────────────
     subTab === 'interventions' && h('div', { className: 'card' },
-      h('div', { className: 'card-header' }, h('span', null, 'Interventions')),
+      h('div', { className: 'card-header' }, h('span', { style: { display: 'flex', alignItems: 'center' } }, 'Interventions',
+        h(HelpButton, { label: 'Guardrail Interventions' },
+          h('p', null, 'A log of every time a guardrail rule was triggered for this agent. Each entry shows what happened and what action was taken.'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'Log'), ' — The event was recorded but no action was taken.'),
+            h('li', null, h('strong', null, 'Warn'), ' — The agent was warned about the violation and continued.'),
+            h('li', null, h('strong', null, 'Pause'), ' — The agent was automatically paused and needs manual resume.'),
+            h('li', null, h('strong', null, 'Block'), ' — The specific action was blocked but the agent continued.')
+          ),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Frequent interventions from the same rule may mean the agent\'s instructions conflict with the guardrail — review and adjust either one.')
+        )
+      )),
       interventions.length > 0
         ? h('div', { style: { padding: 0 } },
             interventions.map(function(inv, i) {
@@ -322,7 +334,13 @@ export function GuardrailsSection(props) {
 
     // ─── DLP Tab ────────────────────────────────────────
     subTab === 'dlp' && h('div', { className: 'card' },
-      h('div', { className: 'card-header' }, h('span', null, 'DLP Violations')),
+      h('div', { className: 'card-header' }, h('span', { style: { display: 'flex', alignItems: 'center' } }, 'DLP Violations',
+        h(HelpButton, { label: 'DLP Violations' },
+          h('p', null, 'Data Loss Prevention (DLP) violations occur when the agent attempts to share sensitive data (PII, credentials, proprietary info) in a way that violates your DLP policies.'),
+          h('p', null, 'Each entry shows what data was detected, the severity level, and what action was taken (redacted, blocked, or logged).'),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Configure DLP rules at the organization level in the DLP page. Agent-specific overrides can be set here.')
+        )
+      )),
       dlpViolations.length > 0
         ? h('div', { style: { padding: 0 } },
             dlpViolations.map(function(v, i) {
@@ -371,7 +389,13 @@ export function GuardrailsSection(props) {
     // ─── Approvals Tab ──────────────────────────────────
     subTab === 'approvals' && h('div', null,
       pendingApprovals.length > 0 && h('div', { className: 'card', style: { marginBottom: 12 } },
-        h('div', { className: 'card-header' }, h('span', null, 'Pending Approvals (' + pendingApprovals.length + ')')),
+        h('div', { className: 'card-header' }, h('span', { style: { display: 'flex', alignItems: 'center' } }, 'Pending Approvals (' + pendingApprovals.length + ')',
+          h(HelpButton, { label: 'Pending Approvals' },
+            h('p', null, 'Actions the agent wants to take that require human approval before proceeding. This is part of the human-in-the-loop safety system.'),
+            h('p', null, 'Review each request and approve or reject it. The agent will be notified and continue or find an alternative approach.'),
+            h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'If you find yourself always approving the same type of request, consider updating the guardrail rule to auto-approve that action.')
+          )
+        )),
         h('div', { style: { padding: 0 } },
           pendingApprovals.map(function(a) {
             return h('div', { key: a.id, style: { display: 'flex', gap: 10, padding: '10px 16px', borderBottom: '1px solid var(--border)', fontSize: 12, alignItems: 'center' } },

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

@@ -1,6 +1,7 @@
 import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall, engineCall, formatUptime, buildAgentDataMap, renderAgentBadge, showConfirm, getOrgId } 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';
 import { Badge, EmptyState, formatTime } from './shared.js?v=4';
 
 // ════════════════════════════════════════════════════════════
@@ -277,7 +278,20 @@ export function ManagerCatchUpSection(props) {
 
   return h(Fragment, null,
     h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 } },
-      h('h3', { style: { margin: 0, fontSize: 16, fontWeight: 600 } }, 'Manager & Daily Catch-Up'),
+      h('h3', { style: { margin: 0, fontSize: 16, fontWeight: 600, display: 'flex', alignItems: 'center' } }, 'Manager & Daily Catch-Up',
+        h(HelpButton, { label: 'Manager & Daily Catch-Up' },
+          h('p', null, 'Define who this agent reports to and configure automated daily briefings.'),
+          h('h4', { style: { marginTop: 16, marginBottom: 8, fontSize: 14 } }, 'Manager'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'Internal Manager'), ' — Another agent in your organization that supervises this one. Escalations and reports go to them.'),
+            h('li', null, h('strong', null, 'External Manager'), ' — A human outside the system (e.g., via email). The agent sends reports and escalations to this email address.'),
+            h('li', null, h('strong', null, 'No Manager'), ' — The agent operates independently. Escalations go to the system admin.')
+          ),
+          h('h4', { style: { marginTop: 16, marginBottom: 8, fontSize: 14 } }, 'Daily Catch-Up'),
+          h('p', null, 'When enabled, the agent sends a daily summary to its manager covering what it did, any issues encountered, and upcoming tasks. You can choose which platforms (email, chat, etc.) receive the catch-up.'),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Daily catch-ups help you stay aware of what the agent is doing without manually checking. Start with email summaries, then add chat if you want real-time updates.')
+        )
+      ),
       h('button', { className: 'btn btn-primary btn-sm', onClick: startEdit }, I.journal(), ' Edit')
     ),
 

package/src/dashboard/pages/agent-detail/meeting-browser.js

@@ -3,6 +3,7 @@ import { I } from '../../components/icons.js';
 import { E } from '../../assets/icons/emoji-icons.js';
 import { ProviderLogo } from '../../assets/provider-logos.js';
 import { Badge, EmptyState } from './shared.js?v=4';
+import { HelpButton } from '../../components/help-button.js';
 
 // ════════════════════════════════════════════════════════════
 // BROWSER CONFIG CARD — Configurable browser settings per agent
@@ -348,7 +349,15 @@ export function BrowserConfigCard(props) {
       onClick: function() { setCollapsed(!collapsed); }
     },
       h('span', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
-        '\uD83C\uDF10 Browser & Web Automation',
+        '\uD83C\uDF10 Browser & Web Automation', h(HelpButton, { label: 'Browser & Web Automation' },
+          h('p', null, 'Configure how this agent accesses web pages. Choose from local Chromium, remote browsers (CDP), or cloud browser services.'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'Local Chromium'), ' — Built-in headless browser. Best for most automation tasks.'),
+            h('li', null, h('strong', null, 'Remote CDP'), ' — Connect to a browser on another machine. Required for video calls.'),
+            h('li', null, h('strong', null, 'Cloud services'), ' — Browserless, Browserbase, Steel, ScrapingBee for scalable browser access.')
+          ),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Local Chromium works for most tasks. Use Remote CDP or cloud services when you need persistent sessions, anti-detection, or video call support.')
+        ),
         cfg.provider && cfg.provider !== 'local' && h('span', { className: 'badge', style: { fontSize: 10, padding: '1px 6px', background: 'var(--accent-soft)', color: 'var(--accent)' } },
           providers.find(function(p) { return p.id === cfg.provider; })?.name || cfg.provider
         )
@@ -801,7 +810,10 @@ export function ToolRestrictionsCard(props) {
       style: { cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
       onClick: function() { setCollapsed(!collapsed); }
     },
-      h('span', null, '\uD83D\uDD12 Tool Restrictions'),
+      h('span', { style: { display: 'flex', alignItems: 'center' } }, '\uD83D\uDD12 Tool Restrictions', h(HelpButton, { label: 'Tool Restrictions' },
+        h('p', null, 'Per-agent restrictions on file sizes, shell access, web fetching, email sending, database access, and file sharing. These are independent of tool security sandboxes.'),
+        h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Use these to limit what an agent can do beyond its tool security settings. For example, block shell execution for agents that only need email access.')
+      )),
       h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } }, collapsed ? E.triangleDown(12) : E.triangleUp(12))
     ),
     !collapsed && h('div', { style: { padding: 16, display: 'grid', gap: 16 } },

package/src/dashboard/pages/agent-detail/memory.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 { Badge, StatCard, EmptyState, formatTime, MEMORY_CATEGORIES, memCatColor, memCatLabel, importanceBadgeColor } from './shared.js?v=4';
+import { HelpButton } from '../../components/help-button.js';
 
 // --- MemorySection --------------------------------------------------
 
@@ -164,9 +165,27 @@ export function MemorySection(props) {
   var fmtDate = function(d) { if (!d) return '-'; var dt = new Date(d); return dt.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }); };
   var fmtTime = function(d) { if (!d) return ''; var dt = new Date(d); return dt.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }); };
 
+  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: 'card' },
     h('div', { className: 'card-header', style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
-      h('h3', { style: { margin: 0, fontSize: 15, fontWeight: 600 } }, 'Memory'),
+      h('h3', { style: { margin: 0, fontSize: 15, fontWeight: 600, display: 'flex', alignItems: 'center' } }, 'Memory', h(HelpButton, { label: 'Memory' },
+        h('p', null, 'Agent memory stores learned facts, preferences, interaction patterns, and organizational knowledge. Memories persist across sessions so the agent can recall context.'),
+        h('h4', { style: _h4 }, 'Key Concepts'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Categories'), ' — Classify memories (org knowledge, preferences, skills, etc.) to keep them organized.'),
+          h('li', null, h('strong', null, 'Confidence'), ' — How certain the agent is about this memory. Decays over time if not accessed.'),
+          h('li', null, h('strong', null, 'Importance'), ' — Critical, high, normal, or low. Affects retrieval priority.')
+        ),
+        h('h4', { style: _h4 }, 'Actions'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Prune'), ' — Removes expired/stale entries with low confidence.'),
+          h('li', null, h('strong', null, 'Decay'), ' — Reduces confidence of memories not accessed recently (simulates forgetting).')
+        ),
+        h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Regularly prune stale memories to keep the agent focused on relevant, high-quality knowledge.')
+      )),
       h('div', { style: { display: 'flex', gap: 6 } },
         h('button', { className: 'btn btn-ghost btn-sm', onClick: pruneStale, title: 'Prune stale entries' }, I.trash()),
         h('button', { className: 'btn btn-ghost btn-sm', onClick: runDecay, title: 'Run confidence decay' }, I.clock()),
@@ -178,10 +197,10 @@ export function MemorySection(props) {
 
       // Compact stats bar
       h('div', { style: { display: 'flex', gap: 24, padding: '10px 16px', borderBottom: '1px solid var(--border)', fontSize: 13 } },
-        h('span', { style: { color: 'var(--text-muted)' } }, 'Total: ', h('strong', null, totalMemories)),
-        h('span', { style: { color: 'var(--text-muted)' } }, 'Categories: ', h('strong', null, categoriesUsed)),
-        h('span', { style: { color: 'var(--text-muted)' } }, 'Avg Conf: ', h('strong', null, avgConfidence)),
-        h('span', { style: { color: 'var(--text-muted)' } }, 'Sources: ', h('strong', null, sourcesCount)),
+        h('span', { style: { color: 'var(--text-muted)', display: 'flex', alignItems: 'center' } }, 'Total: ', h('strong', null, totalMemories), h(HelpButton, { label: 'Total Memories' }, h('p', null, 'Total number of memory entries stored for this agent.'))),
+        h('span', { style: { color: 'var(--text-muted)', display: 'flex', alignItems: 'center' } }, 'Categories: ', h('strong', null, categoriesUsed), h(HelpButton, { label: 'Categories Used' }, h('p', null, 'Number of distinct memory categories in use. More categories means broader knowledge coverage.'))),
+        h('span', { style: { color: 'var(--text-muted)', display: 'flex', alignItems: 'center' } }, 'Avg Conf: ', h('strong', null, avgConfidence), h(HelpButton, { label: 'Average Confidence' }, h('p', null, 'Average confidence score across all memories. Higher is better — it means the agent trusts its stored knowledge. Confidence decays over time for unused memories.'))),
+        h('span', { style: { color: 'var(--text-muted)', display: 'flex', alignItems: 'center' } }, 'Sources: ', h('strong', null, sourcesCount), h(HelpButton, { label: 'Sources' }, h('p', null, 'Number of distinct sources that contributed memories (e.g., email processing, user input, agent reflection).'))),
         h('div', { style: { flex: 1 } }),
         h('span', { style: { color: 'var(--text-muted)' } }, 'Showing ', h('strong', null, filtered.length), ' of ', totalMemories)
       ),