@agenticmail/enterprise 0.5.77 → 0.5.79

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

@@ -3802,6 +3802,494 @@ var _tsToggleRow = { display: 'flex', alignItems: 'center', justifyContent: 'spa
 var _tsGrid = { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 };
 // --- EmailSection -------------------------------------------------------
 
+// ════════════════════════════════════════════════════════════
+// TOOLS SECTION — Toggle tool categories per agent
+// ════════════════════════════════════════════════════════════
+
+function ToolsSection(props) {
+  var agentId = props.agentId;
+  var _d = useApp(); var toast = _d.toast;
+  var _loading = useState(true); var loading = _loading[0]; var setLoading = _loading[1];
+  var _cats = useState([]); var cats = _cats[0]; var setCats = _cats[1];
+  var _stats = useState({}); var stats = _stats[0]; var setStats = _stats[1];
+  var _saving = useState(false); var saving = _saving[0]; var setSaving = _saving[1];
+  var _filter = useState('all'); var filter = _filter[0]; var setFilter = _filter[1];
+  var _expanded = useState(null); var expanded = _expanded[0]; var setExpanded = _expanded[1];
+
+  function load() {
+    setLoading(true);
+    engineCall('/bridge/agents/' + agentId + '/tools')
+      .then(function(d) {
+        setCats(d.categories || []);
+        setStats({ total: d.totalTools, enabled: d.enabledTools });
+        setLoading(false);
+      })
+      .catch(function() { setLoading(false); });
+  }
+
+  useEffect(function() { load(); }, [agentId]);
+
+  function toggle(catId, currentEnabled) {
+    setSaving(true);
+    var body = {};
+    body[catId] = !currentEnabled;
+    engineCall('/bridge/agents/' + agentId + '/tools', {
+      method: 'PUT',
+      body: JSON.stringify(body),
+    }).then(function() {
+      setCats(function(prev) {
+        return prev.map(function(c) {
+          return c.id === catId ? Object.assign({}, c, { enabled: !currentEnabled }) : c;
+        });
+      });
+      setStats(function(prev) {
+        var cat = cats.find(function(c) { return c.id === catId; });
+        var delta = currentEnabled ? -(cat?.toolCount || 0) : (cat?.toolCount || 0);
+        return Object.assign({}, prev, { enabled: (prev.enabled || 0) + delta });
+      });
+      toast((!currentEnabled ? 'Enabled' : 'Disabled') + ' tools', 'success');
+      setSaving(false);
+    }).catch(function(e) { toast(e.message, 'error'); setSaving(false); });
+  }
+
+  function toggleAll(enable) {
+    setSaving(true);
+    var body = {};
+    cats.forEach(function(c) { if (!c.alwaysOn) body[c.id] = enable; });
+    engineCall('/bridge/agents/' + agentId + '/tools', {
+      method: 'PUT',
+      body: JSON.stringify(body),
+    }).then(function() {
+      load();
+      toast(enable ? 'All tools enabled' : 'All optional tools disabled', 'success');
+      setSaving(false);
+    }).catch(function(e) { toast(e.message, 'error'); setSaving(false); });
+  }
+
+  if (loading) return h('div', { className: 'card', style: { padding: 40, textAlign: 'center' } }, 'Loading tools...');
+
+  var filtered = cats.filter(function(c) {
+    if (filter === 'enabled') return c.enabled;
+    if (filter === 'disabled') return !c.enabled;
+    if (filter === 'google') return c.requiresOAuth === 'google';
+    if (filter === 'enterprise') return c.id.startsWith('enterprise_');
+    return true;
+  });
+
+  var googleCats = cats.filter(function(c) { return c.requiresOAuth === 'google'; });
+  var googleAvailable = googleCats.some(function(c) { return c.isAvailable; });
+
+  return h('div', null,
+    // 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: 12, color: 'var(--text-muted)' } }, 'of ' + (stats.total || 0) + ' tools enabled')
+      ),
+      h('div', { style: { display: 'flex', gap: 8 } },
+        h('button', { className: 'btn btn-sm', disabled: saving, onClick: function() { toggleAll(true); } }, 'Enable All'),
+        h('button', { className: 'btn btn-sm btn-danger', disabled: saving, onClick: function() { toggleAll(false); } }, 'Disable Optional')
+      )
+    ),
+
+    // Google Workspace notice
+    !googleAvailable && googleCats.length > 0 && h('div', { style: { padding: '12px 16px', background: 'var(--warning-soft)', borderRadius: 'var(--radius)', marginBottom: 16, fontSize: 12 } },
+      h('strong', null, '\u26A0\uFE0F Google Workspace tools require OAuth'), ' — ',
+      'Connect a Google account in the ', h('strong', null, 'Email'), ' tab to unlock Gmail, Calendar, Drive, Sheets, Docs, and Contacts tools.'
+    ),
+
+    // Filter tabs
+    h('div', { className: 'tabs', style: { marginBottom: 16 } },
+      [
+        { id: 'all', label: 'All' },
+        { id: 'enabled', label: 'Enabled' },
+        { id: 'disabled', label: 'Disabled' },
+        { id: 'google', label: 'Google Workspace' },
+        { id: 'enterprise', label: 'Enterprise' },
+      ].map(function(f) {
+        return h('div', { key: f.id, className: 'tab' + (filter === f.id ? ' active' : ''), onClick: function() { setFilter(f.id); } }, f.label);
+      })
+    ),
+
+    // Tool category cards
+    h('div', { style: { display: 'grid', gap: 12 } },
+      filtered.map(function(cat) {
+        var isExpanded = expanded === cat.id;
+        return h('div', {
+          key: cat.id,
+          className: 'card',
+          style: { opacity: !cat.isAvailable && cat.requiresOAuth ? 0.6 : 1 }
+        },
+          h('div', {
+            style: { display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', cursor: 'pointer' },
+            onClick: function() { setExpanded(isExpanded ? null : cat.id); }
+          },
+            // Icon
+            h('div', { style: { fontSize: 22, width: 36, textAlign: 'center', flexShrink: 0 } }, cat.icon),
+            // Info
+            h('div', { style: { flex: 1, minWidth: 0 } },
+              h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 } },
+                h('span', { style: { fontWeight: 600, fontSize: 14 } }, cat.name),
+                h('span', { className: 'badge', style: { fontSize: 10, padding: '1px 6px', background: 'var(--bg-tertiary)', color: 'var(--text-muted)' } }, cat.toolCount + ' tools'),
+                !cat.isAvailable && cat.requiresOAuth && h('span', { className: 'badge badge-warning', style: { fontSize: 10, padding: '1px 6px' } }, 'OAuth Required'),
+                cat.alwaysOn && h('span', { className: 'badge badge-info', style: { fontSize: 10, padding: '1px 6px' } }, 'Always On')
+              ),
+              h('div', { style: { fontSize: 12, color: 'var(--text-muted)' } }, cat.description)
+            ),
+            // Toggle
+            !cat.alwaysOn && h('div', {
+              onClick: function(e) { e.stopPropagation(); if (!saving && (cat.isAvailable || cat.enabled)) toggle(cat.id, cat.enabled); },
+              style: {
+                width: 44, height: 24, borderRadius: 12, position: 'relative', cursor: saving ? 'not-allowed' : 'pointer',
+                background: cat.enabled ? 'var(--accent)' : 'var(--border)', transition: 'background 0.2s', flexShrink: 0,
+              },
+            },
+              h('div', { style: {
+                width: 20, height: 20, borderRadius: 10, background: '#fff', position: 'absolute', top: 2,
+                left: cat.enabled ? 22 : 2, transition: 'left 0.2s',
+                boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+              } })
+            ),
+            cat.alwaysOn && h('div', { style: { width: 44, height: 24, flexShrink: 0 } }),
+            // Expand arrow
+            h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginLeft: 4 } }, isExpanded ? '\u25B2' : '\u25BC')
+          ),
+
+          // Expanded tool list
+          isExpanded && h('div', { style: { borderTop: '1px solid var(--border)', padding: '12px 16px', background: 'var(--bg-secondary)' } },
+            h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 6 } },
+              cat.tools.map(function(t) {
+                return h('span', {
+                  key: t,
+                  style: {
+                    display: 'inline-block', padding: '3px 10px', borderRadius: 4, fontSize: 11,
+                    fontFamily: 'var(--font-mono)', background: cat.enabled ? 'var(--accent-soft)' : 'var(--bg-tertiary)',
+                    color: cat.enabled ? 'var(--accent)' : 'var(--text-muted)', border: '1px solid ' + (cat.enabled ? 'var(--accent)' : 'var(--border)'),
+                  }
+                }, t);
+              })
+            )
+          )
+        );
+      })
+    ),
+
+    filtered.length === 0 && h('div', { style: { textAlign: 'center', padding: 40, color: 'var(--text-muted)' } }, 'No tools match this filter.'),
+
+    // ─── Browser Configuration ─────────────────────────
+    h(BrowserConfigCard, { agentId: agentId }),
+
+    // ─── Tool Restrictions ─────────────────────────────
+    h(ToolRestrictionsCard, { agentId: agentId })
+  );
+}
+
+// ════════════════════════════════════════════════════════════
+// BROWSER CONFIG CARD — Configurable browser settings per agent
+// ════════════════════════════════════════════════════════════
+
+function BrowserConfigCard(props) {
+  var agentId = props.agentId;
+  var _d = useApp(); var toast = _d.toast;
+  var _cfg = useState(null); var cfg = _cfg[0]; var setCfg = _cfg[1];
+  var _saving = useState(false); var saving = _saving[0]; var setSaving = _saving[1];
+  var _collapsed = useState(true); var collapsed = _collapsed[0]; var setCollapsed = _collapsed[1];
+
+  function load() {
+    engineCall('/bridge/agents/' + agentId + '/browser-config')
+      .then(function(d) { setCfg(d.config || {}); })
+      .catch(function() { setCfg({}); });
+  }
+
+  useEffect(function() { load(); }, [agentId]);
+
+  function save() {
+    setSaving(true);
+    engineCall('/bridge/agents/' + agentId + '/browser-config', {
+      method: 'PUT',
+      body: JSON.stringify(cfg),
+    }).then(function() { toast('Browser config saved', 'success'); setSaving(false); })
+      .catch(function(e) { toast(e.message, 'error'); setSaving(false); });
+  }
+
+  function update(key, value) {
+    setCfg(function(prev) { var n = Object.assign({}, prev); n[key] = value; return n; });
+  }
+
+  if (!cfg) return null;
+
+  var labelStyle = { display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 };
+  var helpStyle = { fontSize: 11, color: 'var(--text-muted)', marginTop: 2 };
+
+  return h('div', { className: 'card', style: { marginTop: 16 } },
+    h('div', {
+      className: 'card-header',
+      style: { cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
+      onClick: function() { setCollapsed(!collapsed); }
+    },
+      h('span', null, '\uD83C\uDF10 Browser Configuration'),
+      h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } }, collapsed ? '\u25BC' : '\u25B2')
+    ),
+    !collapsed && h('div', { style: { padding: 16, display: 'grid', gap: 16 } },
+      // Headless mode
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'Headless Mode'),
+        h('select', {
+          className: 'input', value: cfg.headless !== false ? 'true' : 'false',
+          onChange: function(e) { update('headless', e.target.value === 'true'); }
+        },
+          h('option', { value: 'true' }, 'Headless (no visible browser window)'),
+          h('option', { value: 'false' }, 'Headed (visible browser — needed for Meet/Teams)')
+        ),
+        h('div', { style: helpStyle }, 'Use headed mode for video calls (Google Meet, Teams) or visual debugging.')
+      ),
+
+      // SSRF Protection
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'URL Protection'),
+        h('select', {
+          className: 'input', value: cfg.ssrfProtection || 'permissive',
+          onChange: function(e) { update('ssrfProtection', e.target.value); }
+        },
+          h('option', { value: 'off' }, 'Off — No restrictions (full internet access)'),
+          h('option', { value: 'permissive' }, 'Permissive — Block known dangerous URLs only'),
+          h('option', { value: 'strict' }, 'Strict — Block private IPs, require allowlist')
+        ),
+        h('div', { style: helpStyle }, 'Controls which URLs the agent can navigate to.')
+      ),
+
+      // Allow JS Evaluation
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'JavaScript Evaluation'),
+        h('select', {
+          className: 'input', value: cfg.allowEvaluate !== false ? 'true' : 'false',
+          onChange: function(e) { update('allowEvaluate', e.target.value === 'true'); }
+        },
+          h('option', { value: 'true' }, 'Allowed — Agent can run JS in page context'),
+          h('option', { value: 'false' }, 'Blocked — No arbitrary JS execution')
+        )
+      ),
+
+      // Allow File URLs
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'File URLs (file://)'),
+        h('select', {
+          className: 'input', value: cfg.allowFileUrls ? 'true' : 'false',
+          onChange: function(e) { update('allowFileUrls', e.target.value === 'true'); }
+        },
+          h('option', { value: 'false' }, 'Blocked — Cannot access local files'),
+          h('option', { value: 'true' }, 'Allowed — Can open local file:// URLs')
+        )
+      ),
+
+      // Max Contexts
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'Max Browser Contexts'),
+        h('input', {
+          className: 'input', type: 'number', min: 1, max: 50,
+          value: cfg.maxContexts || 10,
+          onChange: function(e) { update('maxContexts', parseInt(e.target.value) || 10); }
+        }),
+        h('div', { style: helpStyle }, 'Maximum concurrent browser windows/tabs.')
+      ),
+
+      // Navigation Timeout
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'Navigation Timeout (ms)'),
+        h('input', {
+          className: 'input', type: 'number', min: 5000, max: 120000, step: 1000,
+          value: cfg.navigationTimeoutMs || 30000,
+          onChange: function(e) { update('navigationTimeoutMs', parseInt(e.target.value) || 30000); }
+        }),
+        h('div', { style: helpStyle }, 'Maximum time to wait for page loads.')
+      ),
+
+      // Idle Timeout
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'Idle Timeout (minutes)'),
+        h('input', {
+          className: 'input', type: 'number', min: 1, max: 60,
+          value: Math.round((cfg.idleTimeoutMs || 300000) / 60000),
+          onChange: function(e) { update('idleTimeoutMs', (parseInt(e.target.value) || 5) * 60000); }
+        }),
+        h('div', { style: helpStyle }, 'Close browser after this many minutes of inactivity.')
+      ),
+
+      // Blocked URL Patterns
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'Blocked URL Patterns'),
+        h('input', {
+          className: 'input', placeholder: '*://169.254.*, *://metadata.google.*',
+          value: (cfg.blockedUrlPatterns || []).join(', '),
+          onChange: function(e) { update('blockedUrlPatterns', e.target.value.split(',').map(function(s) { return s.trim(); }).filter(Boolean)); }
+        }),
+        h('div', { style: helpStyle }, 'Comma-separated URL patterns to block (supports *).')
+      ),
+
+      // Allowed URL Patterns (only for strict mode)
+      cfg.ssrfProtection === 'strict' && h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'Allowed URL Patterns (Strict Mode)'),
+        h('input', {
+          className: 'input', placeholder: '*://example.com/*, *://api.service.com/*',
+          value: (cfg.allowedUrlPatterns || []).join(', '),
+          onChange: function(e) { update('allowedUrlPatterns', e.target.value.split(',').map(function(s) { return s.trim(); }).filter(Boolean)); }
+        }),
+        h('div', { style: helpStyle }, 'Only these URLs are allowed in strict mode.')
+      ),
+
+      // Save button
+      h('div', { style: { display: 'flex', justifyContent: 'flex-end', paddingTop: 8 } },
+        h('button', { className: 'btn', disabled: saving, onClick: save }, saving ? 'Saving...' : 'Save Browser Config')
+      )
+    )
+  );
+}
+
+// ════════════════════════════════════════════════════════════
+// TOOL RESTRICTIONS CARD — Per-agent restrictions
+// ════════════════════════════════════════════════════════════
+
+function ToolRestrictionsCard(props) {
+  var agentId = props.agentId;
+  var _d = useApp(); var toast = _d.toast;
+  var _cfg = useState(null); var cfg = _cfg[0]; var setCfg = _cfg[1];
+  var _saving = useState(false); var saving = _saving[0]; var setSaving = _saving[1];
+  var _collapsed = useState(true); var collapsed = _collapsed[0]; var setCollapsed = _collapsed[1];
+
+  function load() {
+    engineCall('/bridge/agents/' + agentId + '/tool-restrictions')
+      .then(function(d) { setCfg(d.restrictions || {}); })
+      .catch(function() { setCfg({}); });
+  }
+
+  useEffect(function() { load(); }, [agentId]);
+
+  function save() {
+    setSaving(true);
+    engineCall('/bridge/agents/' + agentId + '/tool-restrictions', {
+      method: 'PUT',
+      body: JSON.stringify(cfg),
+    }).then(function() { toast('Restrictions saved', 'success'); setSaving(false); })
+      .catch(function(e) { toast(e.message, 'error'); setSaving(false); });
+  }
+
+  function update(key, value) {
+    setCfg(function(prev) { var n = Object.assign({}, prev); n[key] = value; return n; });
+  }
+
+  if (!cfg) return null;
+
+  var labelStyle = { display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 };
+  var helpStyle = { fontSize: 11, color: 'var(--text-muted)', marginTop: 2 };
+
+  return h('div', { className: 'card', style: { marginTop: 16 } },
+    h('div', {
+      className: 'card-header',
+      style: { cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
+      onClick: function() { setCollapsed(!collapsed); }
+    },
+      h('span', null, '\uD83D\uDD12 Tool Restrictions'),
+      h('span', { style: { fontSize: 12, color: 'var(--text-muted)' } }, collapsed ? '\u25BC' : '\u25B2')
+    ),
+    !collapsed && h('div', { style: { padding: 16, display: 'grid', gap: 16 } },
+      // Max file size for read/write
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'Max File Size (MB)'),
+        h('input', {
+          className: 'input', type: 'number', min: 1, max: 1000,
+          value: cfg.maxFileSizeMb || 50,
+          onChange: function(e) { update('maxFileSizeMb', parseInt(e.target.value) || 50); }
+        }),
+        h('div', { style: helpStyle }, 'Maximum file size the agent can read or write.')
+      ),
+
+      // Shell command execution
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'Shell Command Execution'),
+        h('select', {
+          className: 'input', value: cfg.shellExecution || 'allowed',
+          onChange: function(e) { update('shellExecution', e.target.value); }
+        },
+          h('option', { value: 'allowed' }, 'Allowed — Full shell access'),
+          h('option', { value: 'sandboxed' }, 'Sandboxed — Limited to safe commands'),
+          h('option', { value: 'blocked' }, 'Blocked — No shell execution')
+        ),
+        h('div', { style: helpStyle }, 'Controls whether the agent can run shell commands.')
+      ),
+
+      // Web fetch restrictions
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'Web Fetch'),
+        h('select', {
+          className: 'input', value: cfg.webFetch || 'allowed',
+          onChange: function(e) { update('webFetch', e.target.value); }
+        },
+          h('option', { value: 'allowed' }, 'Allowed — Can fetch any URL'),
+          h('option', { value: 'restricted' }, 'Restricted — Only allowed domains'),
+          h('option', { value: 'blocked' }, 'Blocked — No web fetching')
+        )
+      ),
+
+      // Email sending restrictions
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'Email Sending'),
+        h('select', {
+          className: 'input', value: cfg.emailSending || 'allowed',
+          onChange: function(e) { update('emailSending', e.target.value); }
+        },
+          h('option', { value: 'allowed' }, 'Allowed — Can send to anyone'),
+          h('option', { value: 'internal' }, 'Internal Only — Same domain only'),
+          h('option', { value: 'approval' }, 'Requires Approval — Manager must approve'),
+          h('option', { value: 'blocked' }, 'Blocked — No email sending')
+        ),
+        h('div', { style: helpStyle }, 'Controls who the agent can email.')
+      ),
+
+      // Database access
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'Database Access'),
+        h('select', {
+          className: 'input', value: cfg.databaseAccess || 'readwrite',
+          onChange: function(e) { update('databaseAccess', e.target.value); }
+        },
+          h('option', { value: 'readwrite' }, 'Read + Write — Full database access'),
+          h('option', { value: 'readonly' }, 'Read Only — SELECT queries only'),
+          h('option', { value: 'blocked' }, 'Blocked — No database access')
+        )
+      ),
+
+      // Drive/file sharing
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'File Sharing (Drive)'),
+        h('select', {
+          className: 'input', value: cfg.fileSharing || 'allowed',
+          onChange: function(e) { update('fileSharing', e.target.value); }
+        },
+          h('option', { value: 'allowed' }, 'Allowed — Can share files externally'),
+          h('option', { value: 'internal' }, 'Internal Only — Share within org only'),
+          h('option', { value: 'blocked' }, 'Blocked — No file sharing')
+        )
+      ),
+
+      // Rate limiting
+      h('div', { className: 'form-group' },
+        h('label', { style: labelStyle }, 'Rate Limit (calls per minute)'),
+        h('input', {
+          className: 'input', type: 'number', min: 0, max: 1000,
+          value: cfg.rateLimit || 0,
+          onChange: function(e) { update('rateLimit', parseInt(e.target.value) || 0); }
+        }),
+        h('div', { style: helpStyle }, '0 = no limit. Applies across all tool calls.')
+      ),
+
+      // Save button
+      h('div', { style: { display: 'flex', justifyContent: 'flex-end', paddingTop: 8 } },
+        h('button', { className: 'btn', disabled: saving, onClick: save }, saving ? 'Saving...' : 'Save Restrictions')
+      )
+    )
+  );
+}
+
 function EmailSection(props) {
   var agentId = props.agentId;
   var engineAgent = props.engineAgent || {};
@@ -4588,8 +5076,8 @@ function AgentDetailPage(props) {
   var _agents = useState([]);
   var agents = _agents[0]; var setAgents = _agents[1];
 
-  var TABS = ['overview', 'personal', 'email', 'configuration', 'manager', 'skills', 'permissions', 'activity', 'communication', 'workforce', 'memory', 'guardrails', 'budget', 'tool-security', 'deployment'];
-  var TAB_LABELS = { 'tool-security': 'Tool Security', 'manager': 'Manager & Catch-Up', 'email': 'Email' };
+  var TABS = ['overview', 'personal', 'email', 'configuration', 'manager', 'tools', 'skills', 'permissions', 'activity', 'communication', 'workforce', 'memory', 'guardrails', 'budget', 'tool-security', 'deployment'];
+  var TAB_LABELS = { 'tool-security': 'Tool Security', 'manager': 'Manager & Catch-Up', 'email': 'Email', 'tools': 'Tools' };
 
   var load = function() {
     setLoading(true);
@@ -4713,6 +5201,7 @@ function AgentDetailPage(props) {
     tab === 'email' && h(EmailSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
     tab === 'configuration' && h(ConfigurationSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
     tab === 'manager' && h(ManagerCatchUpSection, { agentId: agentId, engineAgent: engineAgent, agents: agents, reload: load }),
+    tab === 'tools' && h(ToolsSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
     tab === 'skills' && h(SkillsSection, { agentId: agentId, engineAgent: engineAgent, reload: load }),
     tab === 'permissions' && h(PermissionsSection, { agentId: agentId, profile: profile, reload: load }),
     tab === 'activity' && h(ActivitySection, { agentId: agentId }),