@agenticmail/enterprise 0.5.199 → 0.5.200

package/dist/dashboard/pages/activity.js

@@ -1,5 +1,6 @@
 import { h, useState, useEffect, useCallback, Fragment, engineCall, buildAgentDataMap, renderAgentBadge, getOrgId } from '../components/utils.js';
 import { DetailModal } from '../components/modal.js';
+import { HelpButton } from '../components/help-button.js';
 
 const PAGE_SIZE = 25;
 
@@ -85,9 +86,21 @@ export function ActivityPage() {
   const eventsPages = Math.ceil(eventsTotal / PAGE_SIZE);
   const toolsPages = Math.ceil(toolsTotal / 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: { marginBottom: 20 } },
-      h('h1', { style: { fontSize: 20, fontWeight: 700 } }, 'Activity'),
+      h('h1', { style: { fontSize: 20, fontWeight: 700, display: 'flex', alignItems: 'center' } }, 'Activity', h(HelpButton, { label: 'Activity' },
+        h('p', null, 'A real-time feed of everything your agents are doing — events they generate and tools they call.'),
+        h('h4', { style: _h4 }, 'Two views'),
+        h('ul', { style: _ul },
+          h('li', null, h('strong', null, 'Events'), ' — High-level actions: agent started, stopped, deployed, errored, etc.'),
+          h('li', null, h('strong', null, 'Tool Calls'), ' — Granular tool usage: which tool, duration, success/failure, parameters and results.')
+        ),
+        h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Use the agent and type filters to zero in on specific behavior. Click any row to see full details.')
+      )),
       h('p', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'Real-time activity and tool usage across all agents')
     ),
 

package/dist/dashboard/pages/agent-detail/activity.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 { DetailModal } from '../../components/modal.js';
+import { HelpButton } from '../../components/help-button.js';
 
 // --- ActivitySection ------------------------------------------------
 
@@ -136,7 +137,22 @@ export function ActivitySection(props) {
 
   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 } }, 'Activity'),
+      h('h3', { style: { margin: 0, fontSize: 15, fontWeight: 600, display: 'flex', alignItems: 'center' } }, 'Activity',
+        h(HelpButton, { label: 'Agent Activity Log' },
+          h('p', null, 'A chronological log of everything this agent has done — conversations, tasks completed, emails sent, tools used, errors encountered, and guardrail interventions.'),
+          h('h4', { style: { marginTop: 16, marginBottom: 8, fontSize: 14 } }, 'Event Types'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'Message'), ' — Chat messages sent or received.'),
+            h('li', null, h('strong', null, 'Task'), ' — Tasks started, completed, or failed.'),
+            h('li', null, h('strong', null, 'Tool Use'), ' — External tools or APIs the agent called.'),
+            h('li', null, h('strong', null, 'Error'), ' — Failures, timeouts, or API errors.'),
+            h('li', null, h('strong', null, 'Guardrail'), ' — Policy violations or interventions.'),
+            h('li', null, h('strong', null, 'System'), ' — Deploy, restart, config changes.')
+          ),
+          h('p', null, 'Click on any event to see full details including request/response data.'),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Use filters to narrow down to specific event types. If debugging an issue, start with "Error" events.')
+        )
+      ),
       h('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
         h('span', { style: { fontSize: 11, color: 'var(--text-muted)' } }, filtered.length + ' items'),
         h('button', { className: 'btn btn-ghost btn-sm', onClick: refreshCurrent }, I.refresh())

package/dist/dashboard/pages/agent-detail/autonomy.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, EmptyState } from './shared.js?v=4';
+import { HelpButton } from '../../components/help-button.js';
 
 // ════════════════════════════════════════════════════════════
 // AGENT DETAIL PAGE  (Main Orchestrator)
@@ -118,7 +119,22 @@ export function AutonomySection(props) {
     // Header
     h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
       h('div', null,
-        h('div', { style: { fontSize: 15, fontWeight: 600 } }, 'Agent Autonomy Settings'),
+        h('div', { style: { fontSize: 15, fontWeight: 600, display: 'flex', alignItems: 'center' } }, 'Agent Autonomy Settings',
+          h(HelpButton, { label: 'Autonomy Settings' },
+            h('p', null, 'Autonomy settings control what the agent does automatically without being asked. Think of it as the agent\'s daily routine.'),
+            h('h4', { style: { marginTop: 16, marginBottom: 8, fontSize: 14 } }, 'Automated Behaviors'),
+            h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+              h('li', null, h('strong', null, 'Auto Clock-In/Out'), ' — Agent automatically starts and stops work based on its schedule in the Workforce tab.'),
+              h('li', null, h('strong', null, 'Daily Catch-up'), ' — At a set time each day, the agent reviews unread emails, messages, and pending tasks to stay on top of things.'),
+              h('li', null, h('strong', null, 'Weekly Catch-up'), ' — A deeper weekly review that may include summaries, reports, or planning.'),
+              h('li', null, h('strong', null, 'Goal Check'), ' — Periodic check-ins against assigned goals/OKRs.'),
+              h('li', null, h('strong', null, 'Knowledge Contributions'), ' — Agent periodically contributes learnings to the organization\'s knowledge base.'),
+              h('li', null, h('strong', null, 'Escalation'), ' — Automatically escalates issues it can\'t handle to its manager.'),
+              h('li', null, h('strong', null, 'Guardrail Enforcement'), ' — Self-monitors for compliance with organizational policies.')
+            ),
+            h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Start with daily catch-up enabled and add more behaviors as the agent proves reliable. The master switch lets you disable all autonomy instantly.')
+          )
+        ),
         h('div', { style: { fontSize: 12, color: 'var(--text-muted)' } }, 'Configure automated behaviors — all times use agent timezone')
       ),
       h('div', { style: { display: 'flex', gap: 8 } },

package/dist/dashboard/pages/agent-detail/budget.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 { StatCard, ProgressBar, formatNumber, formatCost } from './shared.js?v=4';
+import { HelpButton } from '../../components/help-button.js';
 
 // ════════════════════════════════════════════════════════════
 // BUDGET SECTION
@@ -117,7 +118,19 @@ export function BudgetSection(props) {
     // ─── Budget Limits Card ─────────────────────────────
     h('div', { className: 'card', style: { marginBottom: 20 } },
       h('div', { className: 'card-header', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-        h('span', null, 'Budget Limits'),
+        h('span', { style: { display: 'flex', alignItems: 'center' } }, 'Budget Limits',
+          h(HelpButton, { label: 'Budget Limits' },
+            h('p', null, 'Set spending caps to prevent this agent from exceeding your API budget. When a limit is reached, the agent is automatically paused.'),
+            h('h4', { style: { marginTop: 16, marginBottom: 8, fontSize: 14 } }, 'Limit Types'),
+            h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+              h('li', null, h('strong', null, 'Daily Limit'), ' — Maximum spend per day (resets at midnight UTC). Prevents runaway costs from a single day\'s usage.'),
+              h('li', null, h('strong', null, 'Monthly Limit'), ' — Maximum spend per calendar month. Your overall budget control.'),
+              h('li', null, h('strong', null, 'Per-Request Limit'), ' — Maximum cost for a single API call. Prevents accidentally using expensive models or very long prompts.')
+            ),
+            h('p', null, 'Set to 0 or leave blank for no limit. The progress bars show current usage against each limit.'),
+            h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Start with a conservative daily limit, monitor usage for a week, then adjust. It\'s easier to raise limits than to deal with a surprise $500 bill.')
+          )
+        ),
         !editing && h('button', { className: 'btn btn-secondary btn-sm', onClick: function() { setEditing(true); } }, 'Edit Budget')
       ),
       h('div', { className: 'card-body' },
@@ -177,7 +190,17 @@ export function BudgetSection(props) {
 
     // ─── Budget Alerts Table ────────────────────────────
     h('div', { className: 'card', style: { marginBottom: 20 } },
-      h('div', { className: 'card-header' }, h('span', null, 'Budget Alerts')),
+      h('div', { className: 'card-header' }, h('span', { style: { display: 'flex', alignItems: 'center' } }, 'Budget Alerts',
+        h(HelpButton, { label: 'Budget Alerts' },
+          h('p', null, 'Get notified when the agent approaches or exceeds budget thresholds.'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'Warning'), ' — Sent when usage reaches a percentage of the limit (e.g., 80%). Agent continues running.'),
+            h('li', null, h('strong', null, 'Critical'), ' — Sent when usage is very close to the limit (e.g., 95%). Consider pausing non-essential tasks.'),
+            h('li', null, h('strong', null, 'Exceeded'), ' — The limit was hit and the agent was automatically paused. Requires manual resume or limit increase.')
+          ),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Alerts are sent to the agent\'s manager (if configured) and to the admin email.')
+        )
+      )),
       budgetAlerts.length > 0
         ? h('div', { className: 'card-body-flush' },
             h('table', { className: 'data-table' },

package/dist/dashboard/pages/agent-detail/channels.js

@@ -1,6 +1,7 @@
 import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall, engineCall, 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';
 
 // ─── Styles ───
 
@@ -449,7 +450,15 @@ export function ChannelsSection(props) {
   var noChannels = !caps?.whatsapp && !caps?.telegram;
 
   return h('div', null,
-    h('h2', { style: { fontSize: '20px', marginBottom: '16px' } }, 'Manager Messaging Channels'),
+    h('h2', { style: { fontSize: '20px', marginBottom: '16px', display: 'flex', alignItems: 'center' } }, 'Manager Messaging Channels', h(HelpButton, { label: 'Manager Messaging Channels' },
+      h('p', null, 'Connect personal messaging platforms so you can chat with your AI agent directly from WhatsApp or Telegram. These are your private channels — for customer-facing messaging, use the WhatsApp Business tab.'),
+      h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+        h('li', null, h('strong', null, 'Manager Identity'), ' — Set your phone number/user ID so the agent recognizes you across platforms.'),
+        h('li', null, h('strong', null, 'WhatsApp'), ' — Link via QR code. Uses your personal WhatsApp as a linked device.'),
+        h('li', null, h('strong', null, 'Telegram'), ' — Create a bot via @BotFather and paste the token.')
+      ),
+      h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Add trusted contacts to control who can message the agent. Only trusted contacts get responses — everyone else gets an auto-reply.')
+    )),
 
     noChannels && h('div', { style: Object.assign({}, cardStyle, { textAlign: 'center', padding: '40px' }) },
       h('div', { style: { marginBottom: '12px' } }, E.chat(40)),

package/dist/dashboard/pages/agent-detail/communication.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, EmptyState } from './shared.js?v=4';
+import { HelpButton } from '../../components/help-button.js';
 
 // --- CommunicationSection -------------------------------------------
 
@@ -126,7 +127,15 @@ export function CommunicationSection(props) {
 
   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 } }, 'Communication'),
+      h('h3', { style: { margin: 0, fontSize: 15, fontWeight: 600, display: 'flex', alignItems: 'center' } }, 'Communication', h(HelpButton, { label: 'Communication' },
+        h('p', null, 'Inter-agent messaging system. Agents can send messages to each other for coordination, task delegation, and information sharing.'),
+        h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+          h('li', null, h('strong', null, 'All Messages'), ' — Complete message history (sent and received).'),
+          h('li', null, h('strong', null, 'Inbox'), ' — Unread messages waiting for this agent. Mark as read after review.'),
+          h('li', null, h('strong', null, 'Topology'), ' — Visual map of which agents communicate with each other and how frequently.')
+        ),
+        h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 } }, h('strong', null, 'Tip: '), 'Use priority levels (urgent, high, normal, low) to help agents triage incoming messages.')
+      )),
       h('div', { style: { display: 'flex', gap: 8 } },
         h('button', { className: 'btn btn-primary btn-sm', onClick: function() { setShowSend(true); } }, I.plus(), ' Send Message'),
         h('button', { className: 'btn btn-ghost btn-sm', onClick: refreshCurrent }, I.refresh(), ' Refresh')

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