@agenticmail/enterprise 0.5.80 → 0.5.81

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

@@ -3993,12 +3993,14 @@ function BrowserConfigCard(props) {
   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];
+  var _testing = useState(false); var testing = _testing[0]; var setTesting = _testing[1];
+  var _testResult = useState(null); var testResult = _testResult[0]; var setTestResult = _testResult[1];
+  var _collapsed = useState(false); 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({}); });
+      .then(function(d) { setCfg(d.config || { provider: 'local' }); })
+      .catch(function() { setCfg({ provider: 'local' }); });
   }
 
   useEffect(function() { load(); }, [agentId]);
@@ -4012,14 +4014,37 @@ function BrowserConfigCard(props) {
       .catch(function(e) { toast(e.message, 'error'); setSaving(false); });
   }
 
+  function testConnection() {
+    setTesting(true); setTestResult(null);
+    engineCall('/bridge/agents/' + agentId + '/browser-config/test', { method: 'POST' })
+      .then(function(d) { setTestResult(d); setTesting(false); })
+      .catch(function(e) { setTestResult({ error: e.message }); setTesting(false); });
+  }
+
   function update(key, value) {
     setCfg(function(prev) { var n = Object.assign({}, prev); n[key] = value; return n; });
   }
 
   if (!cfg) return null;
 
+  var provider = cfg.provider || 'local';
   var labelStyle = { display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 };
   var helpStyle = { fontSize: 11, color: 'var(--text-muted)', marginTop: 2 };
+  var sectionStyle = { padding: '12px 0', borderBottom: '1px solid var(--border)' };
+  var sectionTitle = function(icon, text) {
+    return h('div', { style: { fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 6 } },
+      h('span', null, icon), text);
+  };
+
+  // Provider descriptions
+  var providers = [
+    { id: 'local', name: 'Local Chromium', icon: '\uD83D\uDCBB', desc: 'Built-in headless Chromium on this server. Best for web automation, scraping, screenshots, form filling.' },
+    { id: 'remote-cdp', name: 'Remote Browser (CDP)', icon: '\uD83C\uDF10', desc: 'Connect to a Chrome/Chromium instance via Chrome DevTools Protocol. Required for headed mode, video calls, persistent sessions.' },
+    { id: 'browserless', name: 'Browserless.io', icon: '\u2601\uFE0F', desc: 'Cloud browser service. Scalable, managed infrastructure. Supports stealth mode, residential proxies, and concurrent sessions.' },
+    { id: 'browserbase', name: 'Browserbase', icon: '\uD83D\uDE80', desc: 'AI-native cloud browser. Built for agent automation with session replay, anti-detection, and managed infrastructure.' },
+    { id: 'steel', name: 'Steel.dev', icon: '\u26A1', desc: 'Open-source browser API designed for AI agents. Self-hostable, session management, built-in stealth.' },
+    { id: 'scrapingbee', name: 'ScrapingBee', icon: '\uD83D\uDC1D', desc: 'Web scraping API with browser rendering, proxy rotation, and CAPTCHA solving.' },
+  ];
 
   return h('div', { className: 'card', style: { marginTop: 16 } },
     h('div', {
@@ -4027,118 +4052,461 @@ function BrowserConfigCard(props) {
       style: { cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
       onClick: function() { setCollapsed(!collapsed); }
     },
-      h('span', null, '\uD83C\uDF10 Browser Configuration'),
+      h('span', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+        '\uD83C\uDF10 Browser & Web Automation',
+        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
+        )
+      ),
       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.')
+    !collapsed && h('div', { style: { padding: 16 } },
+
+      // ─── Section 1: Browser Provider ─────────────────
+      h('div', { style: sectionStyle },
+        sectionTitle('\uD83D\uDD27', 'Browser Provider'),
+        h('div', { style: { display: 'grid', gap: 8, gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' } },
+          providers.map(function(p) {
+            var selected = provider === p.id;
+            return h('div', {
+              key: p.id,
+              onClick: function() { update('provider', p.id); },
+              style: {
+                padding: '12px 14px', borderRadius: 'var(--radius)', cursor: 'pointer',
+                border: '2px solid ' + (selected ? 'var(--accent)' : 'var(--border)'),
+                background: selected ? 'var(--accent-soft)' : 'var(--bg-secondary)',
+                transition: 'all 0.15s',
+              }
+            },
+              h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 } },
+                h('span', { style: { fontSize: 18 } }, p.icon),
+                h('span', { style: { fontWeight: 600, fontSize: 13 } }, p.name),
+                selected && h('span', { style: { marginLeft: 'auto', color: 'var(--accent)', fontSize: 14 } }, '\u2713')
+              ),
+              h('div', { style: { fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.4 } }, p.desc)
+            );
+          })
+        )
       ),
 
-      // 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')
+      // ─── Section 2: Provider-Specific Config ─────────
+      h('div', { style: sectionStyle },
+
+        // Local Chromium
+        provider === 'local' && h(Fragment, null,
+          sectionTitle('\uD83D\uDCBB', 'Local Chromium Settings'),
+          h('div', { style: { display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr' } },
+            h('div', { className: 'form-group' },
+              h('label', { style: labelStyle }, 'Display 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 window)'),
+                h('option', { value: 'false' }, 'Headed (visible window)')
+              ),
+              h('div', { style: helpStyle }, 'Headed mode requires a display server (X11/Wayland).')
+            ),
+            h('div', { className: 'form-group' },
+              h('label', { style: labelStyle }, 'Executable Path'),
+              h('input', { className: 'input', placeholder: 'Auto-detect (recommended)',
+                value: cfg.executablePath || '',
+                onChange: function(e) { update('executablePath', e.target.value || undefined); }
+              }),
+              h('div', { style: helpStyle }, 'Leave empty to use bundled Chromium.')
+            ),
+            h('div', { className: 'form-group' },
+              h('label', { style: labelStyle }, 'User Data Directory'),
+              h('input', { className: 'input', placeholder: 'Temporary (new profile each session)',
+                value: cfg.userDataDir || '',
+                onChange: function(e) { update('userDataDir', e.target.value || undefined); }
+              }),
+              h('div', { style: helpStyle }, 'Persist cookies, logins, and extensions across sessions.')
+            ),
+            h('div', { className: 'form-group' },
+              h('label', { style: labelStyle }, 'Extra Chrome Args'),
+              h('input', { className: 'input', placeholder: '--no-sandbox, --disable-gpu',
+                value: (cfg.extraArgs || []).join(', '),
+                onChange: function(e) { update('extraArgs', e.target.value.split(',').map(function(s) { return s.trim(); }).filter(Boolean)); }
+              }),
+              h('div', { style: helpStyle }, 'Additional Chromium launch arguments.')
+            )
+          )
         ),
-        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')
-        )
-      ),
+        // Remote CDP
+        provider === 'remote-cdp' && h(Fragment, null,
+          sectionTitle('\uD83C\uDF10', 'Remote Browser Connection'),
+          h('div', { style: { padding: '10px 14px', background: 'var(--info-soft)', borderRadius: 'var(--radius)', marginBottom: 12, fontSize: 12, lineHeight: 1.5 } },
+            h('strong', null, 'How it works: '),
+            'The agent connects to a Chrome/Chromium browser running on another machine via the Chrome DevTools Protocol (CDP). ',
+            'This is required for video calls (Google Meet, Teams, Zoom) where the browser needs a camera, microphone, and display. ',
+            h('br', null), h('br', null),
+            h('strong', null, 'Setup options:'), h('br', null),
+            '\u2022 Run Chrome with --remote-debugging-port=9222 on a VM/desktop', h('br', null),
+            '\u2022 Use a cloud desktop (AWS WorkSpaces, Azure Virtual Desktop, Hetzner)', h('br', null),
+            '\u2022 Set up a dedicated browser VM with virtual camera/audio for meetings', h('br', null),
+            '\u2022 Use SSH tunneling to expose Chrome DevTools securely'
+          ),
+          h('div', { style: { display: 'grid', gap: 12 } },
+            h('div', { className: 'form-group' },
+              h('label', { style: labelStyle }, 'CDP WebSocket URL *'),
+              h('input', { className: 'input', placeholder: 'ws://192.168.1.100:9222/devtools/browser/...',
+                value: cfg.cdpUrl || '',
+                onChange: function(e) { update('cdpUrl', e.target.value); }
+              }),
+              h('div', { style: helpStyle }, 'WebSocket URL from chrome://inspect or --remote-debugging-port output. Format: ws://host:port/devtools/browser/<id>')
+            ),
+            h('div', { style: { display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr' } },
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'Auth Token'),
+                h('input', { className: 'input', type: 'password', placeholder: 'Optional — for authenticated CDP endpoints',
+                  value: cfg.cdpAuthToken || '',
+                  onChange: function(e) { update('cdpAuthToken', e.target.value || undefined); }
+                })
+              ),
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'Connection Timeout (ms)'),
+                h('input', { className: 'input', type: 'number', min: 5000, max: 60000,
+                  value: cfg.cdpTimeout || 30000,
+                  onChange: function(e) { update('cdpTimeout', parseInt(e.target.value) || 30000); }
+                })
+              )
+            ),
+            h('div', { className: 'form-group' },
+              h('label', { style: labelStyle }, 'SSH Tunnel (auto-connect)'),
+              h('input', { className: 'input', placeholder: 'ssh -L 9222:localhost:9222 user@remote-host (optional)',
+                value: cfg.sshTunnel || '',
+                onChange: function(e) { update('sshTunnel', e.target.value || undefined); }
+              }),
+              h('div', { style: helpStyle }, 'SSH command to establish tunnel before connecting. Agent will run this automatically.')
+            )
+          )
+        ),
 
-      // 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')
-        )
-      ),
+        // Browserless
+        provider === 'browserless' && h(Fragment, null,
+          sectionTitle('\u2601\uFE0F', 'Browserless.io Configuration'),
+          h('div', { style: { display: 'grid', gap: 12 } },
+            h('div', { className: 'form-group' },
+              h('label', { style: labelStyle }, 'API Token *'),
+              h('input', { className: 'input', type: 'password', placeholder: 'Your Browserless API token',
+                value: cfg.browserlessToken || '',
+                onChange: function(e) { update('browserlessToken', e.target.value); }
+              }),
+              h('div', { style: helpStyle }, h('a', { href: 'https://www.browserless.io/dashboard', target: '_blank', style: { color: 'var(--accent)' } }, 'Get your API token'), ' from the Browserless dashboard.')
+            ),
+            h('div', { style: { display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr' } },
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'Endpoint'),
+                h('input', { className: 'input', placeholder: 'wss://chrome.browserless.io (default)',
+                  value: cfg.browserlessEndpoint || '',
+                  onChange: function(e) { update('browserlessEndpoint', e.target.value || undefined); }
+                }),
+                h('div', { style: helpStyle }, 'Custom endpoint for self-hosted or enterprise plans.')
+              ),
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'Concurrent Sessions'),
+                h('input', { className: 'input', type: 'number', min: 1, max: 100,
+                  value: cfg.browserlessConcurrency || 5,
+                  onChange: function(e) { update('browserlessConcurrency', parseInt(e.target.value) || 5); }
+                })
+              )
+            ),
+            h('div', { style: { display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr' } },
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'Stealth Mode'),
+                h('select', { className: 'input', value: cfg.browserlessStealth ? 'true' : 'false',
+                  onChange: function(e) { update('browserlessStealth', e.target.value === 'true'); }
+                },
+                  h('option', { value: 'false' }, 'Off'),
+                  h('option', { value: 'true' }, 'On — Evade bot detection')
+                )
+              ),
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'Proxy'),
+                h('input', { className: 'input', placeholder: 'Optional proxy URL',
+                  value: cfg.browserlessProxy || '',
+                  onChange: function(e) { update('browserlessProxy', e.target.value || undefined); }
+                })
+              )
+            )
+          )
+        ),
 
-      // 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.')
-      ),
+        // Browserbase
+        provider === 'browserbase' && h(Fragment, null,
+          sectionTitle('\uD83D\uDE80', 'Browserbase Configuration'),
+          h('div', { style: { display: 'grid', gap: 12 } },
+            h('div', { className: 'form-group' },
+              h('label', { style: labelStyle }, 'API Key *'),
+              h('input', { className: 'input', type: 'password', placeholder: 'Your Browserbase API key',
+                value: cfg.browserbaseApiKey || '',
+                onChange: function(e) { update('browserbaseApiKey', e.target.value); }
+              }),
+              h('div', { style: helpStyle }, h('a', { href: 'https://www.browserbase.com/settings', target: '_blank', style: { color: 'var(--accent)' } }, 'Get your API key'), ' from Browserbase settings.')
+            ),
+            h('div', { className: 'form-group' },
+              h('label', { style: labelStyle }, 'Project ID *'),
+              h('input', { className: 'input', placeholder: 'Your Browserbase project ID',
+                value: cfg.browserbaseProjectId || '',
+                onChange: function(e) { update('browserbaseProjectId', e.target.value); }
+              })
+            ),
+            h('div', { style: { display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr' } },
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'Session Recording'),
+                h('select', { className: 'input', value: cfg.browserbaseRecording !== false ? 'true' : 'false',
+                  onChange: function(e) { update('browserbaseRecording', e.target.value === 'true'); }
+                },
+                  h('option', { value: 'true' }, 'Enabled — Record sessions for replay'),
+                  h('option', { value: 'false' }, 'Disabled')
+                )
+              ),
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'Keep Session Alive'),
+                h('select', { className: 'input', value: cfg.browserbaseKeepAlive ? 'true' : 'false',
+                  onChange: function(e) { update('browserbaseKeepAlive', e.target.value === 'true'); }
+                },
+                  h('option', { value: 'false' }, 'Close after task'),
+                  h('option', { value: 'true' }, 'Keep alive for reuse')
+                )
+              )
+            )
+          )
+        ),
 
-      // 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.')
+        // Steel
+        provider === 'steel' && h(Fragment, null,
+          sectionTitle('\u26A1', 'Steel.dev Configuration'),
+          h('div', { style: { display: 'grid', gap: 12 } },
+            h('div', { className: 'form-group' },
+              h('label', { style: labelStyle }, 'API Key *'),
+              h('input', { className: 'input', type: 'password', placeholder: 'Your Steel API key',
+                value: cfg.steelApiKey || '',
+                onChange: function(e) { update('steelApiKey', e.target.value); }
+              }),
+              h('div', { style: helpStyle }, h('a', { href: 'https://app.steel.dev', target: '_blank', style: { color: 'var(--accent)' } }, 'Get your API key'), ' — or self-host Steel for free.')
+            ),
+            h('div', { style: { display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr' } },
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'Endpoint'),
+                h('input', { className: 'input', placeholder: 'https://api.steel.dev (default)',
+                  value: cfg.steelEndpoint || '',
+                  onChange: function(e) { update('steelEndpoint', e.target.value || undefined); }
+                })
+              ),
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'Session Duration (min)'),
+                h('input', { className: 'input', type: 'number', min: 1, max: 120,
+                  value: cfg.steelSessionDuration || 15,
+                  onChange: function(e) { update('steelSessionDuration', parseInt(e.target.value) || 15); }
+                })
+              )
+            )
+          )
+        ),
+
+        // ScrapingBee
+        provider === 'scrapingbee' && h(Fragment, null,
+          sectionTitle('\uD83D\uDC1D', 'ScrapingBee Configuration'),
+          h('div', { style: { display: 'grid', gap: 12 } },
+            h('div', { className: 'form-group' },
+              h('label', { style: labelStyle }, 'API Key *'),
+              h('input', { className: 'input', type: 'password', placeholder: 'Your ScrapingBee API key',
+                value: cfg.scrapingbeeApiKey || '',
+                onChange: function(e) { update('scrapingbeeApiKey', e.target.value); }
+              }),
+              h('div', { style: helpStyle }, h('a', { href: 'https://www.scrapingbee.com/dashboard', target: '_blank', style: { color: 'var(--accent)' } }, 'Get your API key'), ' from ScrapingBee dashboard.')
+            ),
+            h('div', { style: { display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr 1fr' } },
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'JavaScript Rendering'),
+                h('select', { className: 'input', value: cfg.scrapingbeeJsRendering !== false ? 'true' : 'false',
+                  onChange: function(e) { update('scrapingbeeJsRendering', e.target.value === 'true'); }
+                },
+                  h('option', { value: 'true' }, 'Enabled'),
+                  h('option', { value: 'false' }, 'Disabled (faster)')
+                )
+              ),
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'Premium Proxy'),
+                h('select', { className: 'input', value: cfg.scrapingbeePremiumProxy ? 'true' : 'false',
+                  onChange: function(e) { update('scrapingbeePremiumProxy', e.target.value === 'true'); }
+                },
+                  h('option', { value: 'false' }, 'Standard'),
+                  h('option', { value: 'true' }, 'Premium (residential IPs)')
+                )
+              ),
+              h('div', { className: 'form-group' },
+                h('label', { style: labelStyle }, 'Country'),
+                h('input', { className: 'input', placeholder: 'us, gb, de...',
+                  value: cfg.scrapingbeeCountry || '',
+                  onChange: function(e) { update('scrapingbeeCountry', e.target.value || undefined); }
+                })
+              )
+            )
+          )
+        )
       ),
 
-      // 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.')
+      // ─── Section 3: Security & Limits ────────────────
+      h('div', { style: sectionStyle },
+        sectionTitle('\uD83D\uDD12', 'Security & Limits'),
+        h('div', { style: { display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr' } },
+          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 URL restrictions'),
+              h('option', { value: 'permissive' }, 'Permissive — Block dangerous URLs'),
+              h('option', { value: 'strict' }, 'Strict — Allowlist only')
+            )
+          ),
+          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'),
+              h('option', { value: 'false' }, 'Blocked')
+            )
+          ),
+          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'),
+              h('option', { value: 'true' }, 'Allowed')
+            )
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { style: labelStyle }, 'Max Concurrent Tabs'),
+            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', { 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', { className: 'form-group' },
+            h('label', { style: labelStyle }, 'Idle Timeout (min)'),
+            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', { className: 'form-group', style: { marginTop: 12 } },
+          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)); }
+          })
+        ),
+        cfg.ssrfProtection === 'strict' && h('div', { className: 'form-group', style: { marginTop: 8 } },
+          h('label', { style: labelStyle }, 'Allowed URL Patterns'),
+          h('input', { className: 'input', placeholder: '*://example.com/*, *://app.service.com/*',
+            value: (cfg.allowedUrlPatterns || []).join(', '),
+            onChange: function(e) { update('allowedUrlPatterns', e.target.value.split(',').map(function(s) { return s.trim(); }).filter(Boolean)); }
+          })
+        )
       ),
 
-      // 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 *).')
+      // ─── Section 4: Meeting & Video Capabilities ─────
+      h('div', { style: sectionStyle },
+        sectionTitle('\uD83C\uDFA5', 'Meeting & Video Call Capabilities'),
+        h('div', { style: { padding: '10px 14px', background: 'var(--bg-secondary)', borderRadius: 'var(--radius)', marginBottom: 12, fontSize: 12, lineHeight: 1.6 } },
+          h('div', { style: { fontWeight: 600, marginBottom: 6 } }, 'For Google Meet, Teams, and Zoom:'),
+          h('div', null, '\u2022 Use ', h('strong', null, 'Remote Browser (CDP)'), ' provider pointed at a VM with display + virtual camera'),
+          h('div', null, '\u2022 The remote machine needs: X11/Wayland display, PulseAudio/PipeWire (audio), v4l2loopback (virtual camera)'),
+          h('div', null, '\u2022 Agent will navigate to meeting URL, handle permissions, and interact with the meeting UI'),
+          h('div', null, '\u2022 For voice participation: integrate with a Speech-to-Text / Text-to-Speech service'),
+          h('div', { style: { marginTop: 8 } },
+            h('strong', null, 'Quick VM Setup (Linux):'),
+            h('pre', { style: { margin: '6px 0', padding: 8, background: 'var(--bg-tertiary)', borderRadius: 4, fontSize: 11, overflow: 'auto' } },
+              '# Install deps\nsudo apt install -y xvfb pulseaudio chromium v4l2loopback-dkms\n\n# Start virtual display + audio\nXvfb :99 -screen 0 1920x1080x24 &\nexport DISPLAY=:99\npulseaudio --start\n\n# Launch Chrome with remote debugging\nchromium --remote-debugging-port=9222 \\\n  --no-first-run --disable-gpu \\\n  --use-fake-ui-for-media-stream \\\n  --use-fake-device-for-media-stream \\\n  --auto-accept-camera-and-microphone-capture'
+            )
+          )
+        ),
+        h('div', { style: { display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr' } },
+          h('div', { className: 'form-group' },
+            h('label', { style: labelStyle }, 'Auto-Accept Permissions'),
+            h('select', { className: 'input', value: cfg.autoAcceptPermissions !== false ? 'true' : 'false',
+              onChange: function(e) { update('autoAcceptPermissions', e.target.value === 'true'); }
+            },
+              h('option', { value: 'true' }, 'Yes — Auto-grant camera/microphone access'),
+              h('option', { value: 'false' }, 'No — Require manual permission grants')
+            )
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { style: labelStyle }, 'Virtual Camera Feed'),
+            h('input', { className: 'input', placeholder: '/dev/video0 or URL to video feed',
+              value: cfg.virtualCameraSource || '',
+              onChange: function(e) { update('virtualCameraSource', e.target.value || undefined); }
+            }),
+            h('div', { style: helpStyle }, 'Video source for the agent\'s "camera" in meetings.')
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { style: labelStyle }, 'Audio Input'),
+            h('input', { className: 'input', placeholder: 'PulseAudio source (e.g. virtual_mic)',
+              value: cfg.audioInput || '',
+              onChange: function(e) { update('audioInput', e.target.value || undefined); }
+            }),
+            h('div', { style: helpStyle }, 'Audio source for the agent to speak in meetings.')
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { style: labelStyle }, 'Audio Output'),
+            h('input', { className: 'input', placeholder: 'PulseAudio sink (e.g. virtual_speaker)',
+              value: cfg.audioOutput || '',
+              onChange: function(e) { update('audioOutput', e.target.value || undefined); }
+            }),
+            h('div', { style: helpStyle }, 'Audio sink for the agent to hear meeting participants.')
+          )
+        )
       ),
 
-      // 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.')
+      // ─── Section 5: Persistent Sessions ──────────────
+      h('div', { style: { paddingTop: 12 } },
+        sectionTitle('\uD83D\uDD04', 'Session Persistence'),
+        h('div', { style: { display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr' } },
+          h('div', { className: 'form-group' },
+            h('label', { style: labelStyle }, 'Persist Login Sessions'),
+            h('select', { className: 'input', value: cfg.persistSessions ? 'true' : 'false',
+              onChange: function(e) { update('persistSessions', e.target.value === 'true'); }
+            },
+              h('option', { value: 'false' }, 'No — Fresh session each time'),
+              h('option', { value: 'true' }, 'Yes — Keep cookies, localStorage, logins')
+            ),
+            h('div', { style: helpStyle }, 'Persistent sessions let agents stay logged into web apps.')
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { style: labelStyle }, 'Session Storage Path'),
+            h('input', { className: 'input', placeholder: '/data/browser-sessions/' + agentId.slice(0, 8),
+              value: cfg.sessionStoragePath || '',
+              onChange: function(e) { update('sessionStoragePath', e.target.value || undefined); }
+            }),
+            h('div', { style: helpStyle }, 'Directory to store persistent browser state.')
+          )
+        )
       ),
 
-      // Save button
-      h('div', { style: { display: 'flex', justifyContent: 'flex-end', paddingTop: 8 } },
+      // ─── Actions Bar ─────────────────────────────────
+      h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 16, marginTop: 8, borderTop: '1px solid var(--border)' } },
+        h('div', { style: { display: 'flex', gap: 8 } },
+          h('button', { className: 'btn btn-sm', disabled: testing, onClick: testConnection },
+            testing ? 'Testing...' : '\u{1F50C} Test Connection'
+          ),
+          testResult && h('span', { style: { fontSize: 12, color: testResult.error ? 'var(--danger)' : 'var(--success)', alignSelf: 'center' } },
+            testResult.error ? '\u274C ' + testResult.error : '\u2705 Connected — ' + (testResult.browserVersion || 'OK')
+          )
+        ),
         h('button', { className: 'btn', disabled: saving, onClick: save }, saving ? 'Saving...' : 'Save Browser Config')
       )
     )