@agenticmail/enterprise 0.5.241 → 0.5.243

package/src/dashboard/pages/skill-connections.js

@@ -3,515 +3,734 @@ import { I } from '../components/icons.js';
 import { Modal } from '../components/modal.js';
 import { HelpButton } from '../components/help-button.js';
 
-// Auth help: where to get API keys/tokens for each skill
-var AUTH_HELP = {
-  'intercom-support': { provider: 'Intercom', url: 'https://developers.intercom.com/docs/build-an-integration/getting-started/', steps: 'Create an Intercom app at developers.intercom.com, then copy the Access Token from Authentication.' },
-  'zendesk-tickets': { provider: 'Zendesk', url: 'https://support.zendesk.com/hc/en-us/articles/4408889192858', steps: 'Go to Zendesk Admin > Apps & Integrations > APIs > Zendesk API, then generate an API token.' },
-  'github-issues': { provider: 'GitHub', url: 'https://github.com/settings/tokens', steps: 'Go to GitHub Settings > Developer Settings > Personal Access Tokens > Generate new token. Select repo and issues scopes.' },
-  'github-actions': { provider: 'GitHub', url: 'https://github.com/settings/tokens', steps: 'Generate a Personal Access Token with workflow and actions:read scopes.' },
-  'slack-notifications': { provider: 'Slack', url: 'https://api.slack.com/apps', steps: 'Create a Slack app at api.slack.com/apps, install to workspace, copy the Bot User OAuth Token (xoxb-...).' },
-  'jira-integration': { provider: 'Atlassian', url: 'https://id.atlassian.com/manage-profile/security/api-tokens', steps: 'Go to Atlassian account > Security > API tokens > Create API token. Use with your email as username.' },
-  'stripe-billing': { provider: 'Stripe', url: 'https://dashboard.stripe.com/apikeys', steps: 'Go to Stripe Dashboard > Developers > API keys. Copy the Secret key (sk_live_... or sk_test_...).' },
-  'notion-sync': { provider: 'Notion', url: 'https://www.notion.so/my-integrations', steps: 'Create an integration at notion.so/my-integrations. Copy the Internal Integration Secret. Share pages with the integration.' },
-  'salesforce-crm': { provider: 'Salesforce', url: 'https://help.salesforce.com/s/articleView?id=sf.connected_app_create_api_integration.htm', steps: 'Create a Connected App in Salesforce Setup. Use OAuth 2.0 client credentials flow. Copy Consumer Key and Secret.' },
-  'hubspot-crm': { provider: 'HubSpot', url: 'https://developers.hubspot.com/docs/api/private-apps', steps: 'Go to HubSpot Settings > Integrations > Private Apps > Create. Select required scopes and copy the access token.' },
-  'twilio-sms': { provider: 'Twilio', url: 'https://console.twilio.com/', steps: 'Sign up at twilio.com. Copy Account SID and Auth Token from the Console dashboard. Get a phone number for SMS.' },
-  'sendgrid-email': { provider: 'SendGrid', url: 'https://app.sendgrid.com/settings/api_keys', steps: 'Go to SendGrid Settings > API Keys > Create API Key. Select Full Access or restricted permissions.' },
-  'google-workspace': { provider: 'Google', url: 'https://console.cloud.google.com/apis/credentials', steps: 'Create a project in Google Cloud Console. Enable required APIs. Create OAuth 2.0 credentials or a Service Account key.' },
-  'shopify-store': { provider: 'Shopify', url: 'https://partners.shopify.com/', steps: 'Create a custom app in your Shopify admin > Settings > Apps. Copy the Admin API access token.' },
-  'openai-models': { provider: 'OpenAI', url: 'https://platform.openai.com/api-keys', steps: 'Go to platform.openai.com > API Keys > Create new secret key. Copy it immediately — it won\'t be shown again.' },
-  'anthropic-models': { provider: 'Anthropic', url: 'https://console.anthropic.com/settings/keys', steps: 'Go to console.anthropic.com > Settings > API Keys > Create Key.' },
+// ═══════════════════════════════════════════════════════════
+// Skill Connections & MCP Hub — Enterprise Integration Center
+// ═══════════════════════════════════════════════════════════
+
+// Category display metadata
+var CATEGORY_META = {
+  'crm': { label: 'CRM & Sales', icon: 'users' },
+  'communication': { label: 'Communication', icon: 'messages' },
+  'productivity': { label: 'Productivity', icon: 'dashboard' },
+  'devops': { label: 'DevOps & CI/CD', icon: 'code' },
+  'finance': { label: 'Finance & Billing', icon: 'activity' },
+  'marketing': { label: 'Marketing', icon: 'globe' },
+  'hr': { label: 'HR & People', icon: 'users' },
+  'ecommerce': { label: 'E-Commerce', icon: 'upload' },
+  'infrastructure': { label: 'Infrastructure', icon: 'settings' },
+  'design': { label: 'Design & Media', icon: 'journal' },
+  'security': { label: 'Security', icon: 'shield' },
+  'monitoring': { label: 'Monitoring', icon: 'activity' },
+  'social': { label: 'Social Media', icon: 'globe' },
+  'data-ai': { label: 'Data & AI', icon: 'code' },
+  'enterprise': { label: 'Enterprise', icon: 'settings' },
+  'cms': { label: 'CMS', icon: 'journal' },
+  'general': { label: 'General', icon: 'settings' },
 };
 
-function getAuthHelp(skillId) {
-  if (AUTH_HELP[skillId]) return AUTH_HELP[skillId];
-  // Fallback: check if skill manifest has authHelp
-  return null;
-}
+var AUTH_TYPE_LABELS = {
+  'oauth2': 'OAuth 2.0',
+  'api_key': 'API Key',
+  'token': 'Bearer Token',
+  'credentials': 'Credentials',
+};
 
-export function SkillConnectionsPage() {
-  const { toast } = useApp();
-  const [installed, setInstalled] = useState([]);
-  const [statuses, setStatuses] = useState({});
-  const [providers, setProviders] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  // Config modal state
-  const [configSkill, setConfigSkill] = useState(null);
-  const [configSchema, setConfigSchema] = useState(null);
-  const [configValues, setConfigValues] = useState({});
-  const [configLoading, setConfigLoading] = useState(false);
-  const [configSaving, setConfigSaving] = useState(false);
-
-  // OAuth popup ref
-  const [connectingSkillId, setConnectingSkillId] = useState(null);
-
-  const loadStatuses = useCallback(function(skills) {
-    var promises = skills.map(function(skill) {
-      return engineCall('/oauth/status/' + skill.skillId)
-        .then(function(d) { return { skillId: skill.skillId, status: d }; })
-        .catch(function() { return { skillId: skill.skillId, status: { connected: false, provider: null, expiresAt: null } }; });
-    });
-    Promise.all(promises).then(function(results) {
-      var map = {};
-      results.forEach(function(r) { map[r.skillId] = r.status; });
-      setStatuses(map);
-    });
-  }, []);
+// ── Section 1: MCP Servers ──────────────────────────────
 
-  const load = useCallback(function() {
-    setLoading(true);
-    setError(null);
+function McpServersSection() {
+  var app = useApp(); var toast = app.toast;
+  var _servers = useState([]); var servers = _servers[0]; var setServers = _servers[1];
+  var _loading = useState(true); var loading = _loading[0]; var setLoading = _loading[1];
+  var _showAdd = useState(false); var showAdd = _showAdd[0]; var setShowAdd = _showAdd[1];
+  var _editServer = useState(null); var editServer = _editServer[0]; var setEditServer = _editServer[1];
+  var _testing = useState(null); var testing = _testing[0]; var setTesting = _testing[1];
 
-    engineCall('/community/installed')
-      .then(function(d) {
-        var skills = d.installed || [];
-        setInstalled(skills);
-        loadStatuses(skills);
-      })
-      .catch(function(e) { setError(e.message || 'Failed to load installed skills'); })
-      .finally(function() { setLoading(false); });
+  // Add/edit form
+  var _form = useState({ name: '', type: 'stdio', command: '', args: '', url: '', apiKey: '', headers: '{}', env: '{}', enabled: true, description: '', autoRestart: true, timeout: 30 });
+  var form = _form[0]; var setForm = _form[1];
 
-    engineCall('/oauth/providers')
-      .then(function(d) { setProviders(d.providers || []); })
-      .catch(function() {});
-  }, [loadStatuses]);
+  var load = useCallback(function() {
+    setLoading(true);
+    engineCall('/mcp-servers')
+      .then(function(d) { setServers(d.servers || []); })
+      .catch(function() { setServers([]); })
+      .finally(function() { setLoading(false); });
+  }, []);
 
   useEffect(function() { load(); }, [load]);
 
-  // Listen for OAuth popup messages
-  useEffect(function() {
-    function handleMessage(event) {
-      if (event.data && event.data.type === 'oauth-result') {
-        if (event.data.status === 'success') {
-          toast('OAuth connected successfully', 'success');
-          // Refresh status for the skill that was being connected
-          if (connectingSkillId) {
-            engineCall('/oauth/status/' + connectingSkillId)
-              .then(function(d) {
-                setStatuses(function(prev) {
-                  var updated = Object.assign({}, prev);
-                  updated[connectingSkillId] = d;
-                  return updated;
-                });
-              })
-              .catch(function() {});
-          }
-          setConnectingSkillId(null);
-        } else {
-          toast(event.data.message || 'OAuth connection failed', 'error');
-          setConnectingSkillId(null);
-        }
-      }
-    }
-    window.addEventListener('message', handleMessage);
-    return function() { window.removeEventListener('message', handleMessage); };
-  }, [connectingSkillId, toast]);
-
-  // Connect OAuth
-  var connectOAuth = async function(skillId) {
-    setConnectingSkillId(skillId);
-    try {
-      var result = await engineCall('/oauth/authorize/' + skillId);
-      if (result.authUrl) {
-        var w = 600;
-        var ht = 700;
-        var left = (window.screen.width - w) / 2;
-        var top = (window.screen.height - ht) / 2;
-        window.open(
-          result.authUrl,
-          'oauth_popup',
-          'width=' + w + ',height=' + ht + ',left=' + left + ',top=' + top + ',scrollbars=yes,resizable=yes'
-        );
-      } else {
-        toast('No authorization URL returned', 'error');
-        setConnectingSkillId(null);
-      }
-    } catch (e) {
-      toast(e.message || 'Failed to start OAuth flow', 'error');
-      setConnectingSkillId(null);
-    }
+  var resetForm = function() {
+    setForm({ name: '', type: 'stdio', command: '', args: '', url: '', apiKey: '', headers: '{}', env: '{}', enabled: true, description: '', autoRestart: true, timeout: 30 });
   };
 
-  // Disconnect OAuth
-  var disconnectOAuth = async function(skillId) {
-    try {
-      await engineCall('/oauth/disconnect/' + skillId, { method: 'DELETE' });
-      toast('Disconnected successfully', 'success');
-      setStatuses(function(prev) {
-        var updated = Object.assign({}, prev);
-        updated[skillId] = { connected: false, provider: null, expiresAt: null };
-        return updated;
-      });
-    } catch (e) {
-      toast(e.message || 'Disconnect failed', 'error');
-    }
+  var openAdd = function() { resetForm(); setEditServer(null); setShowAdd(true); };
+
+  var openEdit = function(server) {
+    setForm({
+      name: server.name || '',
+      type: server.type || 'stdio',
+      command: server.command || '',
+      args: (server.args || []).join(' '),
+      url: server.url || '',
+      apiKey: server.apiKey || '',
+      headers: JSON.stringify(server.headers || {}, null, 2),
+      env: JSON.stringify(server.env || {}, null, 2),
+      enabled: server.enabled !== false,
+      description: server.description || '',
+      autoRestart: server.autoRestart !== false,
+      timeout: server.timeout || 30,
+    });
+    setEditServer(server);
+    setShowAdd(true);
   };
 
-  // Open config modal
-  var openConfig = async function(skill) {
-    setConfigSkill(skill);
-    setConfigLoading(true);
-    setConfigSchema(null);
-    setConfigValues(skill.config || {});
-
-    try {
-      var d = await engineCall('/community/skills/' + skill.skillId + '/config-schema');
-      setConfigSchema(d.configSchema || {});
-    } catch (e) {
-      toast(e.message || 'Failed to load config schema', 'error');
-      setConfigSchema({});
+  var saveServer = function() {
+    var payload = {
+      name: form.name.trim(),
+      type: form.type,
+      enabled: form.enabled,
+      description: form.description.trim(),
+      autoRestart: form.autoRestart,
+      timeout: parseInt(form.timeout) || 30,
+    };
+    if (form.type === 'stdio') {
+      payload.command = form.command.trim();
+      payload.args = form.args.trim().split(/\s+/).filter(Boolean);
+      try { payload.env = JSON.parse(form.env || '{}'); } catch { payload.env = {}; }
+    } else {
+      payload.url = form.url.trim();
+      if (form.apiKey) payload.apiKey = form.apiKey;
+      try { payload.headers = JSON.parse(form.headers || '{}'); } catch { payload.headers = {}; }
     }
-    setConfigLoading(false);
-  };
 
-  // Save config
-  var saveConfig = async function() {
-    if (!configSkill) return;
-    setConfigSaving(true);
-    try {
-      await engineCall('/community/skills/' + configSkill.skillId + '/config', {
-        method: 'PUT',
-        body: JSON.stringify(configValues)
-      });
-      toast('Configuration saved', 'success');
-      // Update local installed list with new config
-      setInstalled(function(prev) {
-        return prev.map(function(s) {
-          if (s.skillId === configSkill.skillId) {
-            return Object.assign({}, s, { config: Object.assign({}, configValues) });
-          }
-          return s;
-        });
-      });
-      setConfigSkill(null);
-    } catch (e) {
-      toast(e.message || 'Failed to save configuration', 'error');
-    }
-    setConfigSaving(false);
-  };
+    if (!payload.name) { toast('Server name is required', 'error'); return; }
+    if (form.type === 'stdio' && !payload.command) { toast('Command is required for stdio servers', 'error'); return; }
+    if (form.type !== 'stdio' && !payload.url) { toast('URL is required for HTTP/SSE servers', 'error'); return; }
 
-  // Helpers
-  var providerMap = {};
-  providers.forEach(function(p) { providerMap[p.id] = p; });
+    var method = editServer ? 'PUT' : 'POST';
+    var url = editServer ? '/mcp-servers/' + editServer.id : '/mcp-servers';
+    engineCall(url, { method: method, body: JSON.stringify(payload) })
+      .then(function(d) {
+        if (d.error) { toast(d.error, 'error'); return; }
+        toast(editServer ? 'Server updated' : 'Server added', 'success');
+        setShowAdd(false); load();
+      })
+      .catch(function(e) { toast(e.message, 'error'); });
+  };
 
-  var getSkillStatus = function(skillId) {
-    return statuses[skillId] || { connected: false, provider: null, expiresAt: null };
+  var deleteServer = function(id) {
+    if (!confirm('Remove this MCP server? Agents will lose access to its tools.')) return;
+    engineCall('/mcp-servers/' + id, { method: 'DELETE' })
+      .then(function() { toast('Server removed', 'success'); load(); })
+      .catch(function(e) { toast(e.message, 'error'); });
   };
 
-  var hasOAuthProvider = function(skill) {
-    var status = getSkillStatus(skill.skillId);
-    return !!status.provider || providers.some(function(p) { return p.id === skill.skillId; });
+  var toggleServer = function(server) {
+    engineCall('/mcp-servers/' + server.id, { method: 'PUT', body: JSON.stringify({ enabled: !server.enabled }) })
+      .then(function() { toast(server.enabled ? 'Server disabled' : 'Server enabled', 'success'); load(); })
+      .catch(function(e) { toast(e.message, 'error'); });
   };
 
-  var hasConfigFields = function(skill) {
-    return skill.config && typeof skill.config === 'object' && Object.keys(skill.config).length > 0;
+  var testServer = function(server) {
+    setTesting(server.id);
+    engineCall('/mcp-servers/' + server.id + '/test', { method: 'POST' })
+      .then(function(d) {
+        if (d.error) toast('Connection failed: ' + d.error, 'error');
+        else toast('Connected! ' + (d.tools || 0) + ' tools discovered', 'success');
+        load();
+      })
+      .catch(function(e) { toast(e.message, 'error'); })
+      .finally(function() { setTesting(null); });
   };
 
-  var needsConfig = function(skill) {
-    var status = getSkillStatus(skill.skillId);
-    return !status.connected && hasConfigFields(skill);
+  var typeLabel = function(t) {
+    if (t === 'stdio') return 'Local Process (stdio)';
+    if (t === 'sse') return 'Server-Sent Events (SSE)';
+    return 'HTTP (Streamable)';
   };
 
-  // Computed stats
-  var totalInstalled = installed.length;
-  var connectedCount = installed.filter(function(s) { return getSkillStatus(s.skillId).connected; }).length;
-  var needsConfigCount = installed.filter(function(s) { return needsConfig(s); }).length;
-
-  // Status badge
-  var statusBadge = function(skill) {
-    var status = getSkillStatus(skill.skillId);
-    if (status.connected) {
-      return h('span', {
-        className: 'badge',
-        style: { background: 'var(--success)', color: '#fff', fontSize: 11 }
-      }, 'Connected');
-    }
-    if (needsConfig(skill)) {
-      return h('span', {
-        className: 'badge',
-        style: { background: 'var(--warning)', color: '#fff', fontSize: 11 }
-      }, 'Needs Config');
-    }
-    return h('span', {
-      className: 'badge',
-      style: { background: 'var(--text-muted)', color: '#fff', fontSize: 11 }
-    }, 'Not Connected');
+  var statusDot = function(server) {
+    var color = server.status === 'connected' ? 'var(--success)' : server.status === 'error' ? 'var(--danger)' : server.enabled ? 'var(--warning)' : 'var(--text-muted)';
+    return h('span', { style: { width: 8, height: 8, borderRadius: '50%', background: color, display: 'inline-block', flexShrink: 0 } });
   };
 
-  // Render config form field
-  var renderConfigField = function(fieldName, schema) {
-    var value = configValues[fieldName];
-    var type = schema.type || 'string';
-
-    if (type === 'boolean') {
-      return h('div', { className: 'form-group', key: fieldName },
-        h('label', { style: { display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' } },
-          h('input', {
-            type: 'checkbox',
-            checked: !!value,
-            onChange: function(e) {
-              setConfigValues(function(prev) {
-                var updated = Object.assign({}, prev);
-                updated[fieldName] = e.target.checked;
-                return updated;
-              });
-            }
-          }),
-          h('span', { className: 'form-label', style: { marginBottom: 0 } }, schema.label || fieldName)
-        ),
-        schema.description && h('p', { className: 'form-help' }, schema.description)
-      );
-    }
+  return h('div', null,
+    // Header
+    h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
+      h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+        h('h2', { style: { fontSize: 16, fontWeight: 700, margin: 0 } }, 'MCP Servers'),
+        h(HelpButton, { label: 'MCP Servers' },
+          h('p', null, 'Connect external Model Context Protocol (MCP) servers to give your agents access to additional tools and capabilities.'),
+          h('h4', { style: { marginTop: 12, marginBottom: 6, fontSize: 14 } }, 'Connection Types'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'Local Process (stdio)'), ' — Runs a command on your server. The MCP server communicates via stdin/stdout. Best for locally installed tools.'),
+            h('li', null, h('strong', null, 'SSE (Server-Sent Events)'), ' — Connects to a remote MCP server via HTTP with SSE for streaming. Best for remote/cloud MCP servers.'),
+            h('li', null, h('strong', null, 'HTTP (Streamable)'), ' — Standard HTTP transport. Stateless request/response pattern.')
+          ),
+          h('h4', { style: { marginTop: 12, marginBottom: 6, fontSize: 14 } }, 'How it works'),
+          h('p', null, 'When you add an MCP server, we automatically discover all available tools it provides. These tools become available to your agents alongside the built-in integrations.'),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary)', borderRadius: 8, fontSize: 13 } },
+            h('strong', null, 'Examples: '),
+            'npx @modelcontextprotocol/server-filesystem /path/to/dir, ',
+            'npx @modelcontextprotocol/server-github, ',
+            'docker run -i mcp/postgres, ',
+            'Any MCP-compatible server'
+          )
+        )
+      ),
+      h('button', { className: 'btn btn-primary btn-sm', onClick: openAdd }, I.plus(), ' Add MCP Server')
+    ),
 
-    if (type === 'select') {
-      return h('div', { className: 'form-group', key: fieldName },
-        h('label', { className: 'form-label' },
-          schema.label || fieldName,
-          schema.required && h('span', { style: { color: 'var(--danger)', marginLeft: 4 } }, '*')
+    // Server list
+    loading ? h('div', { style: { padding: 32, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 } }, 'Loading MCP servers...')
+    : servers.length === 0 ? h('div', { style: { padding: 32, textAlign: 'center', border: '2px dashed var(--border)', borderRadius: 'var(--radius-lg)', color: 'var(--text-muted)' } },
+        h('div', { style: { marginBottom: 8 } }, I.code()),
+        h('p', { style: { fontSize: 14, fontWeight: 500, marginBottom: 4 } }, 'No MCP servers connected'),
+        h('p', { style: { fontSize: 12 } }, 'Add an MCP server to extend your agents with external tools'),
+        h('button', { className: 'btn btn-secondary btn-sm', style: { marginTop: 12 }, onClick: openAdd }, I.plus(), ' Add Your First Server')
+      )
+    : h('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
+        servers.map(function(server) {
+          var isTesting = testing === server.id;
+          return h('div', { key: server.id, style: {
+            padding: '14px 16px', background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)',
+            opacity: server.enabled === false ? 0.6 : 1,
+          } },
+            h('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
+              statusDot(server),
+              h('div', { style: { flex: 1, minWidth: 0 } },
+                h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+                  h('span', { style: { fontWeight: 600, fontSize: 14 } }, server.name),
+                  h('span', { className: 'badge badge-neutral', style: { fontSize: 10 } }, server.type === 'stdio' ? 'stdio' : server.type === 'sse' ? 'SSE' : 'HTTP'),
+                  server.toolCount > 0 && h('span', { className: 'badge', style: { fontSize: 10, background: 'var(--accent-soft)', color: 'var(--accent)' } }, server.toolCount + ' tools'),
+                  !server.enabled && h('span', { className: 'badge', style: { fontSize: 10, background: 'var(--bg-tertiary)', color: 'var(--text-muted)' } }, 'Disabled')
+                ),
+                h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } },
+                  server.type === 'stdio'
+                    ? (server.command + ' ' + (server.args || []).join(' ')).trim()
+                    : server.url || ''
+                ),
+                server.description && h('div', { style: { fontSize: 11, color: 'var(--text-secondary)', marginTop: 2 } }, server.description)
+              ),
+              h('div', { style: { display: 'flex', gap: 4, flexShrink: 0 } },
+                h('button', { className: 'btn btn-ghost btn-sm', title: 'Test connection', disabled: isTesting, onClick: function() { testServer(server); } },
+                  isTesting ? '...' : I.refresh()),
+                h('button', { className: 'btn btn-ghost btn-sm', title: server.enabled ? 'Disable' : 'Enable', onClick: function() { toggleServer(server); } },
+                  server.enabled ? I.pause() : I.play()),
+                h('button', { className: 'btn btn-ghost btn-sm', title: 'Edit', onClick: function() { openEdit(server); } }, I.settings()),
+                h('button', { className: 'btn btn-ghost btn-sm', title: 'Remove', style: { color: 'var(--danger)' }, onClick: function() { deleteServer(server.id); } }, I.x())
+              )
+            ),
+            // Show tools if expanded (server has discovered tools)
+            server.tools && server.tools.length > 0 && h('div', { style: { marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--border)', display: 'flex', flexWrap: 'wrap', gap: 4 } },
+              server.tools.slice(0, 20).map(function(tool) {
+                return h('span', { key: tool.name, style: {
+                  fontSize: 10, padding: '2px 6px', borderRadius: 4,
+                  background: 'var(--bg-tertiary)', color: 'var(--text-secondary)',
+                  whiteSpace: 'nowrap',
+                } }, tool.name);
+              }),
+              server.tools.length > 20 && h('span', { style: { fontSize: 10, color: 'var(--text-muted)', padding: '2px 4px' } }, '+' + (server.tools.length - 20) + ' more')
+            )
+          );
+        })
+      ),
+
+    // Add/Edit modal
+    showAdd && h(Modal, {
+      title: editServer ? 'Edit MCP Server' : 'Add MCP Server',
+      onClose: function() { setShowAdd(false); },
+      footer: h(Fragment, null,
+        h('button', { className: 'btn btn-secondary', onClick: function() { setShowAdd(false); } }, 'Cancel'),
+        h('button', { className: 'btn btn-primary', onClick: saveServer }, editServer ? 'Save Changes' : 'Add Server')
+      )
+    },
+      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
+        // Name
+        h('div', { className: 'form-group' },
+          h('label', { className: 'form-label' }, 'Server Name *'),
+          h('input', { className: 'input', placeholder: 'e.g., GitHub MCP, Filesystem, Database', value: form.name,
+            onChange: function(e) { setForm(Object.assign({}, form, { name: e.target.value })); } })
         ),
-        h('select', {
-          className: 'input',
-          value: value || schema.default || '',
-          onChange: function(e) {
-            setConfigValues(function(prev) {
-              var updated = Object.assign({}, prev);
-              updated[fieldName] = e.target.value;
-              return updated;
-            });
-          }
-        },
-          h('option', { value: '' }, '-- Select --'),
-          (schema.options || []).map(function(opt) {
-            var optValue = typeof opt === 'string' ? opt : opt.value;
-            var optLabel = typeof opt === 'string' ? opt : opt.label;
-            return h('option', { key: optValue, value: optValue }, optLabel);
-          })
+        // Description
+        h('div', { className: 'form-group' },
+          h('label', { className: 'form-label' }, 'Description'),
+          h('input', { className: 'input', placeholder: 'What does this server provide?', value: form.description,
+            onChange: function(e) { setForm(Object.assign({}, form, { description: e.target.value })); } })
         ),
-        schema.description && h('p', { className: 'form-help' }, schema.description)
-      );
-    }
+        // Type selector
+        h('div', { className: 'form-group' },
+          h('label', { className: 'form-label' }, 'Connection Type *'),
+          h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 } },
+            ['stdio', 'sse', 'http'].map(function(t) {
+              var selected = form.type === t;
+              return h('div', {
+                key: t,
+                onClick: function() { setForm(Object.assign({}, form, { type: t })); },
+                style: {
+                  padding: '10px 12px', borderRadius: 'var(--radius)', cursor: 'pointer', textAlign: 'center',
+                  border: '2px solid ' + (selected ? 'var(--accent)' : 'var(--border)'),
+                  background: selected ? 'var(--accent-soft)' : 'var(--bg-secondary)',
+                }
+              },
+                h('div', { style: { fontWeight: 600, fontSize: 12 } }, t === 'stdio' ? 'Local Process' : t === 'sse' ? 'SSE' : 'HTTP'),
+                h('div', { style: { fontSize: 10, color: 'var(--text-muted)', marginTop: 2 } },
+                  t === 'stdio' ? 'stdin/stdout' : t === 'sse' ? 'Server-Sent Events' : 'Streamable HTTP')
+              );
+            })
+          )
+        ),
+        // stdio fields
+        form.type === 'stdio' && h(Fragment, null,
+          h('div', { className: 'form-group' },
+            h('label', { className: 'form-label' }, 'Command *'),
+            h('input', { className: 'input', placeholder: 'npx, node, python, docker...', value: form.command,
+              onChange: function(e) { setForm(Object.assign({}, form, { command: e.target.value })); } }),
+            h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 4 } }, 'The executable to run. Must be installed on this machine.')
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { className: 'form-label' }, 'Arguments'),
+            h('input', { className: 'input', placeholder: '@modelcontextprotocol/server-filesystem /home/user/docs', value: form.args,
+              onChange: function(e) { setForm(Object.assign({}, form, { args: e.target.value })); } }),
+            h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 4 } }, 'Space-separated arguments passed to the command.')
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { className: 'form-label' }, 'Environment Variables'),
+            h('textarea', { className: 'input', rows: 3, placeholder: '{\n  "GITHUB_TOKEN": "ghp_...",\n  "DATABASE_URL": "postgres://..."\n}', value: form.env,
+              style: { fontFamily: 'var(--font-mono, monospace)', fontSize: 12 },
+              onChange: function(e) { setForm(Object.assign({}, form, { env: e.target.value })); } }),
+            h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 4 } }, 'JSON object of environment variables. Secrets are encrypted at rest.')
+          )
+        ),
+        // HTTP/SSE fields
+        form.type !== 'stdio' && h(Fragment, null,
+          h('div', { className: 'form-group' },
+            h('label', { className: 'form-label' }, 'Server URL *'),
+            h('input', { className: 'input', placeholder: form.type === 'sse' ? 'https://mcp.example.com/sse' : 'https://mcp.example.com/mcp', value: form.url,
+              onChange: function(e) { setForm(Object.assign({}, form, { url: e.target.value })); } })
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { className: 'form-label' }, 'API Key / Bearer Token'),
+            h('input', { className: 'input', type: 'password', placeholder: 'Optional — for authenticated endpoints', value: form.apiKey,
+              onChange: function(e) { setForm(Object.assign({}, form, { apiKey: e.target.value })); } })
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { className: 'form-label' }, 'Custom Headers'),
+            h('textarea', { className: 'input', rows: 2, placeholder: '{\n  "X-Custom-Header": "value"\n}', value: form.headers,
+              style: { fontFamily: 'var(--font-mono, monospace)', fontSize: 12 },
+              onChange: function(e) { setForm(Object.assign({}, form, { headers: e.target.value })); } })
+          )
+        ),
+        // Common settings
+        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
+          h('div', { className: 'form-group' },
+            h('label', { className: 'form-label' }, 'Connection Timeout (s)'),
+            h('input', { className: 'input', type: 'number', min: 5, max: 300, value: form.timeout,
+              onChange: function(e) { setForm(Object.assign({}, form, { timeout: e.target.value })); } })
+          ),
+          h('div', { className: 'form-group' },
+            h('label', { style: { display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13, marginTop: 24 } },
+              h('input', { type: 'checkbox', checked: form.autoRestart,
+                onChange: function(e) { setForm(Object.assign({}, form, { autoRestart: e.target.checked })); } }),
+              'Auto-restart on failure'
+            )
+          )
+        ),
+        // Preset templates
+        !editServer && h('div', { style: { paddingTop: 12, borderTop: '1px solid var(--border)' } },
+          h('div', { style: { fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 8 } }, 'Quick Start Templates'),
+          h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 6 } },
+            [
+              { label: 'Filesystem', name: 'Filesystem', cmd: 'npx', args: '-y @modelcontextprotocol/server-filesystem /home' },
+              { label: 'GitHub', name: 'GitHub', cmd: 'npx', args: '-y @modelcontextprotocol/server-github', envs: '{"GITHUB_PERSONAL_ACCESS_TOKEN": ""}' },
+              { label: 'PostgreSQL', name: 'PostgreSQL', cmd: 'npx', args: '-y @modelcontextprotocol/server-postgres', envs: '{"DATABASE_URL": ""}' },
+              { label: 'Brave Search', name: 'Brave Search', cmd: 'npx', args: '-y @modelcontextprotocol/server-brave-search', envs: '{"BRAVE_API_KEY": ""}' },
+              { label: 'Puppeteer', name: 'Puppeteer', cmd: 'npx', args: '-y @modelcontextprotocol/server-puppeteer' },
+              { label: 'Slack', name: 'Slack', cmd: 'npx', args: '-y @modelcontextprotocol/server-slack', envs: '{"SLACK_BOT_TOKEN": "", "SLACK_TEAM_ID": ""}' },
+              { label: 'Google Drive', name: 'Google Drive', cmd: 'npx', args: '-y @modelcontextprotocol/server-gdrive' },
+              { label: 'Memory', name: 'Memory', cmd: 'npx', args: '-y @modelcontextprotocol/server-memory' },
+              { label: 'Sentry', name: 'Sentry', cmd: 'npx', args: '-y @modelcontextprotocol/server-sentry', envs: '{"SENTRY_AUTH_TOKEN": ""}' },
+              { label: 'Fetch', name: 'Fetch', cmd: 'npx', args: '-y @modelcontextprotocol/server-fetch' },
+            ].map(function(tpl) {
+              return h('button', {
+                key: tpl.label,
+                className: 'btn btn-ghost btn-sm',
+                style: { fontSize: 11, padding: '4px 8px' },
+                onClick: function() { setForm(Object.assign({}, form, { name: tpl.name, type: 'stdio', command: tpl.cmd, args: tpl.args, env: tpl.envs || '{}' })); }
+              }, tpl.label);
+            })
+          )
+        )
+      )
+    )
+  );
+}
 
-    // Default: string or secret
-    return h('div', { className: 'form-group', key: fieldName },
-      h('label', { className: 'form-label' },
-        schema.label || fieldName,
-        schema.required && h('span', { style: { color: 'var(--danger)', marginLeft: 4 } }, '*')
-      ),
-      h('input', {
-        className: 'input',
-        type: type === 'secret' ? 'password' : 'text',
-        value: value || '',
-        placeholder: schema.placeholder || schema.default || '',
-        onChange: function(e) {
-          setConfigValues(function(prev) {
-            var updated = Object.assign({}, prev);
-            updated[fieldName] = e.target.value;
-            return updated;
-          });
-        }
-      }),
-      schema.description && h('p', { className: 'form-help' }, schema.description)
-    );
+// ── Section 2: Built-in Integrations ─────────────────────
+
+function IntegrationsSection() {
+  var app = useApp(); var toast = app.toast;
+  var _catalog = useState([]); var catalog = _catalog[0]; var setCatalog = _catalog[1];
+  var _categories = useState({}); var categories = _categories[0]; var setCategories = _categories[1];
+  var _loading = useState(true); var loading = _loading[0]; var setLoading = _loading[1];
+  var _search = useState(''); var search = _search[0]; var setSearch = _search[1];
+  var _catFilter = useState('all'); var catFilter = _catFilter[0]; var setCatFilter = _catFilter[1];
+  var _configModal = useState(null); var configModal = _configModal[0]; var setConfigModal = _configModal[1];
+  var _configValues = useState({}); var configValues = _configValues[0]; var setConfigValues = _configValues[1];
+  var _saving = useState(false); var saving = _saving[0]; var setSaving = _saving[1];
+  var _showAll = useState(false); var showAll = _showAll[0]; var setShowAll = _showAll[1];
+
+  var load = useCallback(function() {
+    setLoading(true);
+    engineCall('/integrations/catalog')
+      .then(function(d) { setCatalog(d.catalog || []); setCategories(d.categories || {}); })
+      .catch(function() {})
+      .finally(function() { setLoading(false); });
+  }, []);
+
+  useEffect(function() { load(); }, [load]);
+
+  // Filtering
+  var filtered = catalog.filter(function(item) {
+    if (catFilter !== 'all' && item.category !== catFilter) return false;
+    if (search) {
+      var q = search.toLowerCase();
+      return item.name.toLowerCase().includes(q) || item.skillId.toLowerCase().includes(q) || (item.category || '').toLowerCase().includes(q);
+    }
+    return true;
+  });
+
+  var connectedCount = catalog.filter(function(i) { return i.connected; }).length;
+  var cats = {};
+  catalog.forEach(function(i) { cats[i.category] = (cats[i.category] || 0) + 1; });
+
+  // Save credentials
+  var saveCredentials = function() {
+    if (!configModal) return;
+    setSaving(true);
+    engineCall('/integrations/' + configModal.skillId + '/credentials', {
+      method: 'PUT',
+      body: JSON.stringify(configValues)
+    })
+      .then(function(d) {
+        if (d.error) { toast(d.error, 'error'); }
+        else { toast(configModal.name + ' connected!', 'success'); setConfigModal(null); load(); }
+      })
+      .catch(function(e) { toast(e.message, 'error'); })
+      .finally(function() { setSaving(false); });
   };
 
-  // Loading state
-  if (loading) {
-    return h('div', { style: { textAlign: 'center', padding: 60, color: 'var(--text-muted)' } }, 'Loading skill connections...');
-  }
-
-  // Error state
-  if (error) {
-    return h(Fragment, null,
-      h('div', { style: { marginBottom: 20 } },
-        h('h1', { style: { fontSize: 20, fontWeight: 700 } }, 'Skill Connections'),
-        h('p', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'Connect external services and configure skill settings')
-      ),
-      h('div', { style: { textAlign: 'center', padding: 60 } },
-        h('p', { style: { color: 'var(--danger)', marginBottom: 12 } }, error),
-        h('button', { className: 'btn btn-primary', onClick: load }, I.refresh(), ' Retry')
-      )
-    );
-  }
+  var disconnectIntegration = function(skillId) {
+    engineCall('/integrations/' + skillId + '/credentials', { method: 'DELETE' })
+      .then(function() { toast('Disconnected', 'success'); load(); })
+      .catch(function(e) { toast(e.message, 'error'); });
+  };
 
-  var _h4 = { marginTop: 16, marginBottom: 8, fontSize: 14 };
-  var _ul = { paddingLeft: 20, margin: '4px 0 8px' };
-  var _tip = { marginTop: 12, padding: 12, background: 'var(--bg-secondary, #1e293b)', borderRadius: 'var(--radius, 8px)', fontSize: 13 };
+  var openConnect = function(item) {
+    if (item.authType === 'oauth2') {
+      // Start OAuth flow
+      engineCall('/oauth/authorize/' + item.skillId)
+        .then(function(d) {
+          if (d.authUrl) {
+            var w = 600, ht = 700;
+            window.open(d.authUrl, 'oauth_popup', 'width=' + w + ',height=' + ht + ',left=' + (screen.width - w) / 2 + ',top=' + (screen.height - ht) / 2);
+          }
+        })
+        .catch(function(e) { toast(e.message, 'error'); });
+    } else {
+      // Open credentials modal
+      var vals = {};
+      if (item.fields) item.fields.forEach(function(f) { vals[f] = ''; });
+      else vals.token = '';
+      setConfigValues(vals);
+      setConfigModal(item);
+    }
+  };
 
-  return h(Fragment, null,
-    // Page Header
-    h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 } },
-      h('div', null,
-        h('h1', { style: { fontSize: 20, fontWeight: 700, display: 'flex', alignItems: 'center' } }, 'Skill Connections', h(HelpButton, { label: 'Skill Connections' },
-          h('p', null, 'Manage the authentication and configuration for your installed community skills. Each skill needs to be connected to its external service before agents can use it.'),
-          h('h4', { style: _h4 }, 'Connection Types'),
-          h('ul', { style: _ul },
-            h('li', null, h('strong', null, 'OAuth'), ' — Secure token-based auth. Click "Connect" to authorize via the service\'s login page.'),
-            h('li', null, h('strong', null, 'API Key / Token'), ' — Paste credentials from the service\'s developer portal.'),
-            h('li', null, h('strong', null, 'Configure'), ' — Set custom options like default channels, project IDs, or behavior tweaks.')
+  var displayItems = showAll ? filtered : filtered.slice(0, 24);
+
+  if (loading) return h('div', { style: { padding: 32, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 } }, 'Loading integrations...');
+
+  return h('div', null,
+    // Header
+    h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
+      h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+        h('h2', { style: { fontSize: 16, fontWeight: 700, margin: 0 } }, 'Built-in Integrations'),
+        h('span', { className: 'badge badge-neutral', style: { fontSize: 10 } }, catalog.length),
+        h('span', { className: 'badge', style: { fontSize: 10, background: 'var(--success)', color: '#fff' } }, connectedCount + ' connected'),
+        h(HelpButton, { label: 'Built-in Integrations' },
+          h('p', null, 'AgenticMail includes ' + catalog.length + ' pre-built integrations powered by MCP adapters. Each integration provides tools that agents can use to interact with external services.'),
+          h('h4', { style: { marginTop: 12, marginBottom: 6, fontSize: 14 } }, 'Authentication Types'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'OAuth 2.0'), ' — Click "Connect" to authorize via the service\'s login page. Tokens auto-refresh.'),
+            h('li', null, h('strong', null, 'API Key'), ' — Paste a key from the service\'s developer settings.'),
+            h('li', null, h('strong', null, 'Credentials'), ' — Multiple fields (key + domain, key + project ID, etc.).')
           ),
-          h('div', { style: _tip }, h('strong', null, 'Tip: '), 'Look for the "How to connect" box on each skill card — it links directly to where you get credentials.')
-        )),
-        h('p', { style: { color: 'var(--text-muted)', fontSize: 13 } }, 'Connect external services and configure skill settings')
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary)', borderRadius: 8, fontSize: 13 } },
+            h('strong', null, 'Security: '), 'All credentials are encrypted in the vault. OAuth tokens auto-refresh before expiry.')
+        )
       ),
-      h('button', { className: 'btn btn-secondary', onClick: load }, I.refresh(), ' Refresh')
+      h('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
+        h('input', { className: 'input', placeholder: 'Search integrations...', value: search,
+          style: { width: 220, fontSize: 12 },
+          onChange: function(e) { setSearch(e.target.value); } }),
+        h('select', { className: 'input', value: catFilter, style: { width: 160, fontSize: 12 },
+          onChange: function(e) { setCatFilter(e.target.value); } },
+          h('option', { value: 'all' }, 'All categories (' + catalog.length + ')'),
+          Object.keys(cats).sort().map(function(cat) {
+            var meta = CATEGORY_META[cat] || { label: cat };
+            return h('option', { key: cat, value: cat }, meta.label + ' (' + cats[cat] + ')');
+          })
+        )
+      )
     ),
 
-    // Stats Bar
-    h('div', { className: 'stat-grid', style: { marginBottom: 20 } },
-      h('div', { className: 'stat-card' },
-        h('div', { className: 'stat-label', style: { display: 'flex', alignItems: 'center' } }, 'Total Installed', h(HelpButton, { label: 'Total Installed' }, h('p', null, 'The number of community skills you\'ve installed from the marketplace. These are available to connect and use with your agents.'))),
-        h('div', { className: 'stat-value' }, totalInstalled)
-      ),
-      h('div', { className: 'stat-card' },
-        h('div', { className: 'stat-label', style: { display: 'flex', alignItems: 'center' } }, 'Connected', h(HelpButton, { label: 'Connected' }, h('p', null, 'Skills that have been successfully authenticated with their external service. Connected skills are ready for agents to use.'))),
-        h('div', { className: 'stat-value', style: { color: 'var(--success)' } }, connectedCount)
-      ),
-      h('div', { className: 'stat-card' },
-        h('div', { className: 'stat-label', style: { display: 'flex', alignItems: 'center' } }, 'Needs Configuration', h(HelpButton, { label: 'Needs Configuration' }, h('p', null, 'Skills that are installed but not yet connected. They need API keys, OAuth authorization, or other credentials before agents can use them.'))),
-        h('div', { className: 'stat-value', style: { color: needsConfigCount > 0 ? 'var(--warning)' : 'var(--text-muted)' } }, needsConfigCount)
-      )
+    // Grid
+    h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 8 } },
+      displayItems.map(function(item) {
+        var meta = CATEGORY_META[item.category] || {};
+        return h('div', { key: item.skillId, style: {
+          padding: '12px 14px', background: 'var(--bg-card)', border: '1px solid ' + (item.connected ? 'rgba(21,128,61,0.3)' : 'var(--border)'),
+          borderRadius: 'var(--radius)', display: 'flex', alignItems: 'center', gap: 10,
+        } },
+          h('div', { style: { flex: 1, minWidth: 0 } },
+            h('div', { style: { display: 'flex', alignItems: 'center', gap: 6 } },
+              h('span', { style: { fontWeight: 600, fontSize: 13 } }, item.name),
+              item.connected && h('span', { style: { width: 6, height: 6, borderRadius: '50%', background: 'var(--success)', flexShrink: 0 } })
+            ),
+            h('div', { style: { fontSize: 10, color: 'var(--text-muted)', marginTop: 2, display: 'flex', gap: 6 } },
+              h('span', null, (meta.label || item.category)),
+              h('span', null, '\u00B7'),
+              h('span', null, AUTH_TYPE_LABELS[item.authType] || item.authType),
+              h('span', null, '\u00B7'),
+              h('span', null, item.toolCount + ' tools')
+            )
+          ),
+          item.connected
+            ? h('button', { className: 'btn btn-ghost btn-sm', style: { fontSize: 11, color: 'var(--danger)', flexShrink: 0 },
+                onClick: function() { disconnectIntegration(item.skillId); } }, 'Disconnect')
+            : h('button', { className: 'btn btn-primary btn-sm', style: { fontSize: 11, flexShrink: 0 },
+                onClick: function() { openConnect(item); } }, 'Connect')
+        );
+      })
     ),
 
-    // Empty state
-    installed.length === 0 && h('div', { style: { textAlign: 'center', padding: 60, color: 'var(--text-muted)' } },
-      h('div', { style: { fontSize: 48, marginBottom: 16 } }, '\uD83D\uDD17'),
-      h('p', { style: { fontSize: 15, fontWeight: 500, marginBottom: 8 } }, 'No community skills installed'),
-      h('p', { style: { fontSize: 13 } }, 'Install skills from the Community Marketplace to manage their connections here.')
+    // Show more
+    filtered.length > 24 && !showAll && h('div', { style: { textAlign: 'center', marginTop: 12 } },
+      h('button', { className: 'btn btn-secondary btn-sm', onClick: function() { setShowAll(true); } },
+        'Show all ' + filtered.length + ' integrations')
     ),
 
-    // Skill Cards Grid
-    installed.length > 0 && h('div', {
-      style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))', gap: 16 }
+    // Credentials modal
+    configModal && h(Modal, {
+      title: 'Connect ' + configModal.name,
+      onClose: function() { setConfigModal(null); },
+      footer: h(Fragment, null,
+        h('button', { className: 'btn btn-secondary', onClick: function() { setConfigModal(null); } }, 'Cancel'),
+        h('button', { className: 'btn btn-primary', disabled: saving, onClick: saveCredentials }, saving ? 'Saving...' : 'Connect')
+      )
     },
-      installed.map(function(skill) {
-        var status = getSkillStatus(skill.skillId);
-        var meta = skill.skill || skill.manifest || skill;
-        var skillName = meta.name || skill.skillId;
-        var skillDesc = meta.description || '';
-        var isConnecting = connectingSkillId === skill.skillId;
-
-        return h('div', { key: skill.skillId, className: 'card', style: { padding: 20 } },
-          // Card header: name + status badge
-          h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 } },
-            h('div', { style: { flex: 1, minWidth: 0 } },
-              h('div', { style: { fontWeight: 600, fontSize: 15, marginBottom: 4 } }, skillName),
-              skillDesc && h('div', { style: { fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.4 } }, skillDesc)
-            ),
-            h('div', { style: { marginLeft: 12, flexShrink: 0 } }, statusBadge(skill))
-          ),
+      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
+        h('p', { style: { fontSize: 13, color: 'var(--text-secondary)' } },
+          'Enter the credentials for ', h('strong', null, configModal.name), '. All values are encrypted in the vault.'
+        ),
+        configModal.fields ? configModal.fields.map(function(field) {
+          var label = (configModal.fieldLabels || {})[field] || field;
+          var isSecret = /key|token|secret|password/i.test(field);
+          return h('div', { className: 'form-group', key: field },
+            h('label', { className: 'form-label' }, label),
+            h('input', {
+              className: 'input',
+              type: isSecret ? 'password' : 'text',
+              value: configValues[field] || '',
+              placeholder: label,
+              onChange: function(e) {
+                setConfigValues(function(prev) { var u = Object.assign({}, prev); u[field] = e.target.value; return u; });
+              }
+            })
+          );
+        })
+        : h('div', { className: 'form-group' },
+            h('label', { className: 'form-label' }, configModal.authType === 'api_key' ? 'API Key' : 'Access Token'),
+            h('input', {
+              className: 'input', type: 'password',
+              value: configValues.token || '',
+              placeholder: 'Paste your ' + (configModal.authType === 'api_key' ? 'API key' : 'access token'),
+              onChange: function(e) { setConfigValues({ token: e.target.value }); }
+            })
+          )
+      )
+    )
+  );
+}
 
-          // Connection info
-          status.connected && status.provider && h('div', {
-            style: { fontSize: 12, color: 'var(--text-secondary)', marginBottom: 12, padding: '8px 10px', background: 'var(--bg-tertiary)', borderRadius: 6 }
-          },
-            h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-              h('span', null, 'Provider: ', h('strong', null, status.provider)),
-              status.expiresAt && h('span', { style: { color: 'var(--text-muted)', fontSize: 11 } },
-                'Expires: ' + new Date(status.expiresAt).toLocaleDateString()
-              )
-            )
-          ),
+// ── Section 3: Community Skills ──────────────────────────
 
-          // Auth help info (show when not connected)
-          !status.connected && (function() {
-            var help = getAuthHelp(skill.skillId) || (meta.authHelp ? meta.authHelp : null);
-            if (!help) return null;
-            return h('div', {
-              style: { fontSize: 12, color: 'var(--text-secondary)', marginBottom: 12, padding: '10px 12px', background: 'var(--bg-tertiary)', borderRadius: 6, border: '1px solid var(--border)' }
-            },
-              h('div', { style: { fontWeight: 600, marginBottom: 4, fontSize: 11, textTransform: 'uppercase', color: 'var(--primary)' } }, 'How to connect'),
-              h('div', { style: { lineHeight: 1.5, marginBottom: 6 } }, help.steps || help.description),
-              help.url && h('a', { href: help.url, target: '_blank', rel: 'noopener', style: { color: 'var(--primary)', fontSize: 12, textDecoration: 'none' } }, 'Get credentials at ' + (help.provider || 'provider') + ' \u2192')
-            );
-          })(),
-
-          // Action buttons
-          h('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 'auto' } },
-            // Connect / Disconnect
-            status.connected
-              ? h('button', {
-                  className: 'btn btn-danger btn-sm',
-                  onClick: function() { disconnectOAuth(skill.skillId); }
-                }, 'Disconnect')
-              : hasOAuthProvider(skill) && h('button', {
-                  className: 'btn btn-primary btn-sm',
-                  disabled: isConnecting,
-                  onClick: function() { connectOAuth(skill.skillId); }
-                }, isConnecting ? 'Connecting...' : 'Connect'),
-
-            // Configure button (always available if skill has config potential)
-            h('button', {
-              className: 'btn btn-secondary btn-sm',
-              onClick: function() { openConfig(skill); }
-            }, I.settings(), ' Configure')
-          )
-        );
+function CommunitySkillsSection() {
+  var app = useApp(); var toast = app.toast;
+  var _installed = useState([]); var installed = _installed[0]; var setInstalled = _installed[1];
+  var _statuses = useState({}); var statuses = _statuses[0]; var setStatuses = _statuses[1];
+  var _loading = useState(true); var loading = _loading[0]; var setLoading = _loading[1];
+  var _configSkill = useState(null); var configSkill = _configSkill[0]; var setConfigSkill = _configSkill[1];
+  var _configSchema = useState(null); var configSchema = _configSchema[0]; var setConfigSchema = _configSchema[1];
+  var _configValues = useState({}); var configValues = _configValues[0]; var setConfigValues = _configValues[1];
+  var _configSaving = useState(false); var configSaving = _configSaving[0]; var setConfigSaving = _configSaving[1];
+
+  var load = useCallback(function() {
+    setLoading(true);
+    engineCall('/community/installed')
+      .then(function(d) {
+        var skills = d.installed || [];
+        setInstalled(skills);
+        // Load statuses
+        var promises = skills.map(function(skill) {
+          return engineCall('/oauth/status/' + skill.skillId)
+            .then(function(d) { return { skillId: skill.skillId, status: d }; })
+            .catch(function() { return { skillId: skill.skillId, status: { connected: false } }; });
+        });
+        Promise.all(promises).then(function(results) {
+          var map = {};
+          results.forEach(function(r) { map[r.skillId] = r.status; });
+          setStatuses(map);
+        });
       })
+      .catch(function() {})
+      .finally(function() { setLoading(false); });
+  }, []);
+
+  useEffect(function() { load(); }, [load]);
+
+  var openConfig = function(skill) {
+    setConfigSkill(skill);
+    setConfigValues(skill.config || {});
+    engineCall('/community/skills/' + skill.skillId + '/config-schema')
+      .then(function(d) { setConfigSchema(d.configSchema || {}); })
+      .catch(function() { setConfigSchema({}); });
+  };
+
+  var saveConfig = function() {
+    if (!configSkill) return;
+    setConfigSaving(true);
+    engineCall('/community/skills/' + configSkill.skillId + '/config', { method: 'PUT', body: JSON.stringify(configValues) })
+      .then(function() { toast('Saved', 'success'); setConfigSkill(null); load(); })
+      .catch(function(e) { toast(e.message, 'error'); })
+      .finally(function() { setConfigSaving(false); });
+  };
+
+  if (loading) return h('div', { style: { padding: 32, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 } }, 'Loading community skills...');
+
+  return h('div', null,
+    h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
+      h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+        h('h2', { style: { fontSize: 16, fontWeight: 700, margin: 0 } }, 'Community Skills'),
+        h('span', { className: 'badge badge-neutral', style: { fontSize: 10 } }, installed.length),
+        h(HelpButton, { label: 'Community Skills' },
+          h('p', null, 'Skills installed from the Community Marketplace. These are custom skill packages that add specialized capabilities to your agents.'),
+          h('div', { style: { marginTop: 12, padding: 12, background: 'var(--bg-secondary)', borderRadius: 8, fontSize: 13 } },
+            h('strong', null, 'Tip: '), 'Install more skills from the Community Skills page in the sidebar.')
+        )
+      ),
+      h('button', { className: 'btn btn-secondary btn-sm', onClick: load }, I.refresh())
     ),
 
-    // Config Modal
+    installed.length === 0
+      ? h('div', { style: { padding: 32, textAlign: 'center', border: '2px dashed var(--border)', borderRadius: 'var(--radius-lg)', color: 'var(--text-muted)' } },
+          h('p', { style: { fontSize: 13 } }, 'No community skills installed. Visit the marketplace to add some.')
+        )
+      : h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 8 } },
+          installed.map(function(skill) {
+            var status = statuses[skill.skillId] || {};
+            var meta = skill.skill || skill.manifest || skill;
+            return h('div', { key: skill.skillId, style: {
+              padding: '12px 14px', background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius)',
+              display: 'flex', alignItems: 'center', gap: 10,
+            } },
+              h('div', { style: { flex: 1, minWidth: 0 } },
+                h('div', { style: { fontWeight: 600, fontSize: 13 } }, meta.name || skill.skillId),
+                meta.description && h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 2 } }, meta.description)
+              ),
+              h('div', { style: { display: 'flex', gap: 4, flexShrink: 0 } },
+                status.connected
+                  ? h('span', { className: 'badge', style: { background: 'var(--success)', color: '#fff', fontSize: 10 } }, 'Connected')
+                  : h('span', { className: 'badge badge-neutral', style: { fontSize: 10 } }, 'Not connected'),
+                h('button', { className: 'btn btn-ghost btn-sm', onClick: function() { openConfig(skill); } }, I.settings())
+              )
+            );
+          })
+        ),
+
+    // Config modal
     configSkill && h(Modal, {
-      title: 'Configure ' + (configSkill.skill?.name || configSkill.manifest?.name || configSkill.skillId),
+      title: 'Configure ' + (configSkill.skill?.name || configSkill.skillId),
       onClose: function() { setConfigSkill(null); },
       footer: h(Fragment, null,
         h('button', { className: 'btn btn-secondary', onClick: function() { setConfigSkill(null); } }, 'Cancel'),
-        h('button', {
-          className: 'btn btn-primary',
-          onClick: saveConfig,
-          disabled: configSaving || configLoading
-        }, configSaving ? 'Saving...' : 'Save Configuration')
+        h('button', { className: 'btn btn-primary', disabled: configSaving, onClick: saveConfig }, configSaving ? 'Saving...' : 'Save')
       )
     },
-      configLoading
-        ? h('div', { style: { textAlign: 'center', padding: 24, color: 'var(--text-muted)' } }, 'Loading configuration schema...')
-        : configSchema && Object.keys(configSchema).length > 0
-          ? h('div', null,
-              // Show auth help in modal too
-              (function() {
-                var help = getAuthHelp(configSkill.skillId) || (configSkill.skill?.authHelp || configSkill.manifest?.authHelp);
-                if (!help) return null;
-                return h('div', {
-                  style: { marginBottom: 16, padding: '12px 14px', background: 'var(--bg-tertiary)', borderRadius: 8, border: '1px solid var(--border)' }
-                },
-                  h('div', { style: { fontWeight: 600, marginBottom: 4, fontSize: 12, color: 'var(--primary)' } }, 'Where to get credentials'),
-                  h('div', { style: { fontSize: 13, lineHeight: 1.5, color: 'var(--text-secondary)', marginBottom: 6 } }, help.steps || help.description),
-                  help.url && h('a', { href: help.url, target: '_blank', rel: 'noopener', style: { color: 'var(--primary)', fontSize: 13 } }, 'Open ' + (help.provider || 'provider') + ' developer portal \u2192')
-                );
-              })(),
-              h('p', { style: { fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 } },
-                'Configure the settings for this skill. Fields marked with * are required.'
-              ),
-              Object.entries(configSchema).map(function(entry) {
-                return renderConfigField(entry[0], entry[1]);
-              })
-            )
-          : h('div', null,
-              h('p', { style: { fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 } },
-                'This skill accepts custom configuration. Enter key-value pairs below.'
-              ),
-              // Fallback: show existing config as editable key-value pairs
-              Object.entries(configValues).map(function(entry) {
-                return h('div', { className: 'form-group', key: entry[0] },
-                  h('label', { className: 'form-label' }, entry[0]),
-                  h('input', {
-                    className: 'input',
-                    value: entry[1] || '',
-                    onChange: function(e) {
-                      setConfigValues(function(prev) {
-                        var updated = Object.assign({}, prev);
-                        updated[entry[0]] = e.target.value;
-                        return updated;
-                      });
-                    }
-                  })
-                );
-              }),
-              Object.keys(configValues).length === 0 && h('div', {
-                style: { textAlign: 'center', padding: 20, color: 'var(--text-muted)' }
-              }, 'No configuration schema available for this skill.')
-            )
+      configSchema && Object.keys(configSchema).length > 0
+        ? h('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
+            Object.entries(configSchema).map(function(entry) {
+              var fieldName = entry[0]; var schema = entry[1];
+              var isSecret = schema.type === 'secret' || /key|token|secret/i.test(fieldName);
+              return h('div', { className: 'form-group', key: fieldName },
+                h('label', { className: 'form-label' }, schema.label || fieldName),
+                h('input', {
+                  className: 'input',
+                  type: isSecret ? 'password' : 'text',
+                  value: configValues[fieldName] || '',
+                  placeholder: schema.placeholder || schema.default || '',
+                  onChange: function(e) { setConfigValues(function(p) { var u = Object.assign({}, p); u[fieldName] = e.target.value; return u; }); }
+                }),
+                schema.description && h('div', { style: { fontSize: 11, color: 'var(--text-muted)', marginTop: 4 } }, schema.description)
+              );
+            })
+          )
+        : h('div', { style: { padding: 20, textAlign: 'center', color: 'var(--text-muted)' } }, 'No configuration options available.')
     )
   );
 }
+
+// ═══════════════════════════════════════════════════════════
+// Main Page
+// ═══════════════════════════════════════════════════════════
+
+export function SkillConnectionsPage() {
+  var _tab = useState('mcp'); var tab = _tab[0]; var setTab = _tab[1];
+
+  var _h4 = { marginTop: 16, marginBottom: 8, fontSize: 14 };
+  var _tip = { marginTop: 12, padding: 12, background: 'var(--bg-secondary)', borderRadius: 8, fontSize: 13 };
+
+  return h(Fragment, null,
+    // Page Header
+    h('div', { style: { marginBottom: 20 } },
+      h('h1', { style: { fontSize: 20, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 8 } },
+        'Integrations & MCP Hub',
+        h(HelpButton, { label: 'Integrations & MCP Hub' },
+          h('p', null, 'The central hub for connecting your AI agents to external tools, services, and MCP servers. Everything your agents need to interact with the outside world is managed here.'),
+          h('h4', { style: _h4 }, 'Three connection types'),
+          h('ul', { style: { paddingLeft: 20, margin: '4px 0 8px' } },
+            h('li', null, h('strong', null, 'MCP Servers'), ' — Connect external Model Context Protocol servers (like Claude Code\'s MCP system). Agents get access to all tools the server provides.'),
+            h('li', null, h('strong', null, 'Built-in Integrations'), ' — 145+ pre-built adapters for popular services (Slack, GitHub, Salesforce, etc.). Just add credentials.'),
+            h('li', null, h('strong', null, 'Community Skills'), ' — Custom skill packages from the marketplace. Install and configure them here.')
+          ),
+          h('div', { style: _tip }, h('strong', null, 'MCP Protocol: '), 'MCP (Model Context Protocol) is an open standard by Anthropic for connecting AI models to external tools. Any MCP-compatible server works here — same format as Claude Code, Cursor, and other AI tools.')
+        )
+      ),
+      h('p', { style: { color: 'var(--text-muted)', fontSize: 13, marginTop: 4 } },
+        'Connect MCP servers, built-in integrations, and community skills to extend your agents')
+    ),
+
+    // Tab bar
+    h('div', { className: 'tabs', style: { marginBottom: 20 } },
+      h('div', { className: 'tab' + (tab === 'mcp' ? ' active' : ''), onClick: function() { setTab('mcp'); } }, I.code(), ' MCP Servers'),
+      h('div', { className: 'tab' + (tab === 'integrations' ? ' active' : ''), onClick: function() { setTab('integrations'); } }, I.globe(), ' Built-in Integrations'),
+      h('div', { className: 'tab' + (tab === 'community' ? ' active' : ''), onClick: function() { setTab('community'); } }, I.users(), ' Community Skills')
+    ),
+
+    // Tab content
+    tab === 'mcp' && h(McpServersSection),
+    tab === 'integrations' && h(IntegrationsSection),
+    tab === 'community' && h(CommunitySkillsSection)
+  );
+}