npm - promethios-bridge - Versions diffs - 2.1.8 → 2.2.0 - Mend

promethios-bridge 2.1.8 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/package.json +1 -1
package/src/bridge.js +534 -52

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "promethios-bridge",
-  "version": "2.1.8",
+  "version": "2.2.0",
   "description": "Run Promethios agent frameworks locally on your computer with full file, terminal, browser access, ambient context capture, and the always-on-top floating chat overlay. Native Framework Mode supports OpenClaw and other frameworks via the bridge.",
   "main": "src/index.js",
   "bin": {

package/src/bridge.js CHANGED Viewed

@@ -485,9 +485,188 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
     }
   });
+  // ── MCP OAuth routes (for the browser-based overlay Providers tab) ──────────
+  // These routes implement the same OAuth flow as the Electron mcp-oauth.js,
+  // but running entirely inside the Express server so the npx bridge can use it.
+  //
+  // Token storage: in-memory map (resets on bridge restart).
+  // For persistence across restarts, tokens are also saved to ~/.promethios/mcp-tokens.json
+  const path = require('path');
+  const fs   = require('fs');
+  const http = require('http');
+  const { URL: NodeURL } = require('url');
+  const crypto = require('crypto');
+  const MCP_TOKENS_PATH = path.join(
+    process.env.HOME || process.env.USERPROFILE || require('os').homedir(),
+    '.promethios', 'mcp-tokens.json'
+  );
+  function loadMcpTokens() {
+    try {
+      fs.mkdirSync(path.dirname(MCP_TOKENS_PATH), { recursive: true });
+      return JSON.parse(fs.readFileSync(MCP_TOKENS_PATH, 'utf8'));
+    } catch { return {}; }
+  }
+  function saveMcpTokens(tokens) {
+    try {
+      fs.mkdirSync(path.dirname(MCP_TOKENS_PATH), { recursive: true });
+      fs.writeFileSync(MCP_TOKENS_PATH, JSON.stringify(tokens, null, 2), 'utf8');
+    } catch (err) { log('[mcp-tokens] save failed:', err.message); }
+  }
+  const mcpTokens = loadMcpTokens(); // { manus: 'tok_...', claude: 'tok_...', ... }
+  const PROVIDER_NAMES = {
+    manus: 'Manus', claude: 'Claude', chatgpt: 'ChatGPT',
+    gemini: 'Gemini', perplexity: 'Perplexity',
+  };
+  // Pending OAuth servers: clientId → { server, resolve, reject }
+  const _pendingOAuth = new Map();
+  let _oauthCallbackPort = 7826;
+  // GET /mcp-oauth-status — return connected providers
+  app.get('/mcp-oauth-status', (req, res) => {
+    const tokens = {};
+    for (const [id, tok] of Object.entries(mcpTokens)) {
+      tokens[id] = { connected: true, tokenPrefix: tok.slice(0, 16) + '...' };
+    }
+    res.json({ ok: true, tokens });
+  });
+  // POST /mcp-oauth-start — start OAuth flow for a provider
+  // Body: { clientId: 'manus' }
+  // Opens the consent page in the system browser and waits for the callback.
+  app.post('/mcp-oauth-start', async (req, res) => {
+    const { clientId } = req.body || {};
+    if (!clientId) return res.status(400).json({ ok: false, error: 'Missing clientId' });
+    // Close any existing pending server for this client
+    if (_pendingOAuth.has(clientId)) {
+      try { _pendingOAuth.get(clientId).server.close(); } catch {}
+      _pendingOAuth.delete(clientId);
+    }
+    const cbPort = _oauthCallbackPort++;
+    const redirectUri = `http://localhost:${cbPort}/callback`;
+    const state = crypto.randomBytes(16).toString('hex');
+    const authorizeUrl = new NodeURL(`${apiBase}/api/mcp/oauth/authorize`);
+    authorizeUrl.searchParams.set('client_id', clientId);
+    authorizeUrl.searchParams.set('redirect_uri', redirectUri);
+    authorizeUrl.searchParams.set('state', state);
+    authorizeUrl.searchParams.set('response_type', 'code');
+    if (authToken) authorizeUrl.searchParams.set('bridge_token', authToken);
+    const successHtml = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Connected</title>
+<style>body{font-family:system-ui,sans-serif;background:#0f0f14;color:#e2e8f0;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;flex-direction:column;gap:16px;}
+.check{width:56px;height:56px;background:rgba(139,92,246,.15);border:2px solid rgba(139,92,246,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;}
+h1{font-size:20px;font-weight:700;margin:0;}p{font-size:13px;color:rgba(255,255,255,.45);margin:0;text-align:center;}</style></head>
+<body><div class="check">&#10003;</div><h1>Connected to Promethios!</h1><p>Authorization complete.<br>You can close this tab and return to the overlay.</p></body></html>`;
+    const errorHtml = (msg) => `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Failed</title>
+<style>body{font-family:system-ui,sans-serif;background:#0f0f14;color:#e2e8f0;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;flex-direction:column;gap:16px;}
+.x{width:56px;height:56px;background:rgba(239,68,68,.1);border:2px solid rgba(239,68,68,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#ef4444;}
+h1{font-size:20px;font-weight:700;margin:0;}p{font-size:13px;color:rgba(255,255,255,.45);margin:0;text-align:center;}</style></head>
+<body><div class="x">&#10007;</div><h1>Connection Failed</h1><p>${msg}<br>Please close this tab and try again.</p></body></html>`;
+    const server = http.createServer(async (cbReq, cbRes) => {
+      const reqUrl = new NodeURL(cbReq.url, `http://localhost:${cbPort}`);
+      if (reqUrl.pathname !== '/callback') { cbRes.writeHead(404); cbRes.end('Not found'); return; }
+      const code     = reqUrl.searchParams.get('code');
+      const retState = reqUrl.searchParams.get('state');
+      const token    = reqUrl.searchParams.get('token') || reqUrl.searchParams.get('access_token');
+      const error    = reqUrl.searchParams.get('error');
+      try { server.close(); } catch {}
+      _pendingOAuth.delete(clientId);
+      if (error) {
+        cbRes.writeHead(200, { 'Content-Type': 'text/html' }); cbRes.end(errorHtml(error));
+        return res.json({ ok: false, error: `Authorization denied: ${error}` });
+      }
+      if (token) {
+        cbRes.writeHead(200, { 'Content-Type': 'text/html' }); cbRes.end(successHtml);
+        mcpTokens[clientId] = token;
+        saveMcpTokens(mcpTokens);
+        return res.json({ ok: true, providerName: PROVIDER_NAMES[clientId] || clientId });
+      }
+      if (!code) {
+        cbRes.writeHead(400, { 'Content-Type': 'text/html' }); cbRes.end(errorHtml('No authorization code received'));
+        return res.json({ ok: false, error: 'No authorization code received' });
+      }
+      if (retState !== state) {
+        cbRes.writeHead(400, { 'Content-Type': 'text/html' }); cbRes.end(errorHtml('State mismatch'));
+        return res.json({ ok: false, error: 'State mismatch — possible CSRF' });
+      }
+      cbRes.writeHead(200, { 'Content-Type': 'text/html' }); cbRes.end(successHtml);
+      try {
+        const tokenRes = await fetch(`${apiBase}/api/mcp/oauth/token`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+          body: new URLSearchParams({
+            grant_type:   'authorization_code',
+            code,
+            client_id:    clientId,
+            redirect_uri: redirectUri,
+          }).toString(),
+        });
+        const tokenData = await tokenRes.json();
+        if (!tokenRes.ok || !tokenData.access_token) {
+          const msg = tokenData.error_description || tokenData.error || 'Token exchange failed';
+          return res.json({ ok: false, error: msg });
+        }
+        const tok = tokenData.access_token;
+        mcpTokens[clientId] = tok;
+        saveMcpTokens(mcpTokens);
+        res.json({ ok: true, providerName: PROVIDER_NAMES[clientId] || clientId });
+      } catch (err) {
+        res.json({ ok: false, error: err.message });
+      }
+    });
+    server.on('error', (err) => {
+      _pendingOAuth.delete(clientId);
+      res.json({ ok: false, error: 'OAuth callback server error: ' + err.message });
+    });
+    _pendingOAuth.set(clientId, { server });
+    server.listen(cbPort, '127.0.0.1', () => {
+      // Open system browser
+      const { exec } = require('child_process');
+      const platform = process.platform;
+      const url = authorizeUrl.toString();
+      let cmd;
+      if (platform === 'win32') cmd = `start "" "${url}"`;
+      else if (platform === 'darwin') cmd = `open "${url}"`;
+      else cmd = `xdg-open "${url}"`;
+      exec(cmd, (err) => { if (err) log('[mcp-oauth] open browser failed:', err.message); });
+      log('[mcp-oauth] Opened browser for', clientId, '→', url);
+      // Auto-timeout after 5 minutes
+      setTimeout(() => {
+        if (_pendingOAuth.has(clientId)) {
+          try { server.close(); } catch {}
+          _pendingOAuth.delete(clientId);
+          if (!res.headersSent) res.json({ ok: false, error: 'Authorization timed out — please try again' });
+        }
+      }, 5 * 60 * 1000);
+    });
+  });
+  // POST /mcp-oauth-disconnect — remove stored token for a provider
+  app.post('/mcp-oauth-disconnect', async (req, res) => {
+    const { clientId } = req.body || {};
+    if (!clientId) return res.status(400).json({ ok: false, error: 'Missing clientId' });
+    const tok = mcpTokens[clientId];
+    if (tok) {
+      // Best-effort server-side revocation
+      try {
+        await fetch(`${apiBase}/api/mcp/oauth/revoke`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+          body: new URLSearchParams({ token: tok, client_id: clientId }).toString(),
+        });
+      } catch {}
+      delete mcpTokens[clientId];
+      saveMcpTokens(mcpTokens);
+    }
+    res.json({ ok: true });
+  });
   app.get('/overlay', (req, res) => {
     res.setHeader('Content-Type', 'text/html; charset=utf-8');
-    // NOTE: The overlay HTML talks to /chat-proxy, /models-proxy, /set-model-proxy
+    // NOTE: The overlay HTML talks to /chat-proxy, /models-proxy, /set-model-proxy,
+    // /mcp-oauth-start, /mcp-oauth-status, /mcp-oauth-disconnect
     // (all same origin, no CORS). It never calls the remote API directly.
     res.send(`<!DOCTYPE html>
 <html lang="en">
@@ -533,7 +712,29 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
     background: #1e1030; border: 1px solid #3b1f6b;
     border-radius: 4px; padding: 1px 6px;
   }
-  /* ── Model selector ── */
+  /* ── Tab bar ── */
+  #tab-bar {
+    display: flex;
+    background: #111113;
+    border-bottom: 1px solid #1f1f23;
+    flex-shrink: 0;
+  }
+  .tab-btn {
+    flex: 1;
+    padding: 9px 0;
+    font-size: 12px;
+    font-weight: 500;
+    color: #52525b;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s;
+    letter-spacing: 0.01em;
+  }
+  .tab-btn:hover { color: #a1a1aa; }
+  .tab-btn.active { color: #a855f7; border-bottom-color: #7c3aed; }
+  /* ── Model selector (in header) ── */
   #model-wrap {
     margin-left: auto;
     position: relative;
@@ -602,7 +803,10 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
     background: #22c55e; flex-shrink: 0;
     box-shadow: 0 0 6px #22c55e88;
   }
-  /* ── Messages ── */
+  /* ── Tab panels ── */
+  .tab-panel { display: none; flex: 1; flex-direction: column; overflow: hidden; }
+  .tab-panel.active { display: flex; }
+  /* ── Chat panel ── */
   #messages {
     flex: 1;
     overflow-y: auto;
@@ -701,6 +905,143 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
   }
   #send:hover { background: #6d28d9; }
   #send:disabled { background: #27272a; cursor: not-allowed; }
+  /* ── Providers tab ── */
+  #providers-panel {
+    flex: 1;
+    overflow-y: auto;
+    padding: 14px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  #providers-panel::-webkit-scrollbar { width: 4px; }
+  #providers-panel::-webkit-scrollbar-track { background: transparent; }
+  #providers-panel::-webkit-scrollbar-thumb { background: #27272a; border-radius: 2px; }
+  .providers-heading {
+    font-size: 11px;
+    font-weight: 600;
+    color: #52525b;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    padding: 4px 2px 8px;
+  }
+  .provider-row {
+    background: #111113;
+    border: 1px solid #1f1f23;
+    border-radius: 12px;
+    padding: 12px 14px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    transition: border-color 0.15s;
+  }
+  .provider-row:hover { border-color: #27272a; }
+  .provider-row.connected { border-color: #1a3a2a; background: #0d1f17; }
+  .provider-icon {
+    font-size: 22px;
+    width: 36px; height: 36px;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    background: #18181b;
+    border-radius: 8px;
+    border: 1px solid #27272a;
+  }
+  .provider-info { flex: 1; min-width: 0; }
+  .provider-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: #e4e4e7;
+    margin-bottom: 2px;
+  }
+  .provider-desc {
+    font-size: 11px;
+    color: #52525b;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .provider-desc.connected-text { color: #22c55e; }
+  .provider-actions {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+  .btn-open {
+    background: #18181b;
+    border: 1px solid #27272a;
+    border-radius: 7px;
+    color: #a1a1aa;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 5px 10px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: border-color 0.15s, color 0.15s;
+    text-decoration: none;
+    display: inline-flex; align-items: center; gap: 4px;
+  }
+  .btn-open:hover { border-color: #7c3aed; color: #e4e4e7; }
+  .btn-connect {
+    background: #1e1030;
+    border: 1px solid #3b1f6b;
+    border-radius: 7px;
+    color: #a855f7;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 5px 10px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
+    display: inline-flex; align-items: center; gap: 4px;
+  }
+  .btn-connect:hover:not(:disabled) { background: #2d1a4a; border-color: #7c3aed; }
+  .btn-connect:disabled { opacity: 0.4; cursor: not-allowed; }
+  .btn-connect.connected-state {
+    background: #0d1f17;
+    border-color: #1a3a2a;
+    color: #22c55e;
+  }
+  .btn-connect.connecting { opacity: 0.7; cursor: wait; }
+  .connect-dot {
+    width: 6px; height: 6px; border-radius: 50%;
+    background: currentColor;
+    display: inline-block;
+  }
+  .providers-footer {
+    margin-top: 8px;
+    padding: 10px 12px;
+    background: #0d0d10;
+    border: 1px solid #1f1f23;
+    border-radius: 10px;
+    font-size: 11px;
+    color: #3f3f46;
+    line-height: 1.6;
+  }
+  .providers-footer a { color: #7c3aed; text-decoration: none; }
+  .providers-footer a:hover { text-decoration: underline; }
+  /* ── Toast notification ── */
+  #toast {
+    position: fixed;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%) translateY(20px);
+    background: #1a1a24;
+    border: 1px solid #2a2a3a;
+    border-radius: 10px;
+    padding: 9px 16px;
+    font-size: 12px;
+    color: #e4e4e7;
+    z-index: 9999;
+    opacity: 0;
+    transition: opacity 0.2s, transform 0.2s;
+    pointer-events: none;
+    white-space: nowrap;
+    max-width: 90vw;
+    text-align: center;
+  }
+  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+  #toast.error { border-color: #7f1d1d; background: #1a0d0d; color: #fca5a5; }
+  #toast.success { border-color: #14532d; background: #0d1f17; color: #86efac; }
 </style>
 </head>
 <body>
@@ -714,19 +1055,38 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
   </div>
   <div id="status-dot"></div>
 </div>
-<div id="messages">
-  <div class="msg system">Your computer is connected. Ask me anything.</div>
+<div id="tab-bar">
+  <button class="tab-btn active" data-tab="chat">Chat</button>
+  <button class="tab-btn" data-tab="providers">Providers</button>
+</div>
+<!-- Chat tab -->
+<div id="tab-chat" class="tab-panel active">
+  <div id="messages">
+    <div class="msg system">Your computer is connected. Ask me anything.</div>
+  </div>
+  <div id="input-row">
+    <textarea id="input" placeholder="Ask Promethios..." rows="1"></textarea>
+    <button id="send" title="Send (Enter)">&#9650;</button>
+  </div>
 </div>
-<div id="input-row">
-  <textarea id="input" placeholder="Ask Promethios..." rows="1"></textarea>
-  <button id="send" title="Send (Enter)">&#9650;</button>
+<!-- Providers tab -->
+<div id="tab-providers" class="tab-panel">
+  <div id="providers-panel">
+    <div class="providers-heading">AI Platforms</div>
+    <!-- Rows injected by JS -->
+    <div id="provider-list"></div>
+    <div class="providers-footer">
+      Connect an AI platform to give it access to your local tools via MCP.<br>
+      Click <strong>Open ↗</strong> to open the platform, then <strong>Connect MCP</strong> to authorize.
+    </div>
+  </div>
 </div>
+<div id="toast"></div>
 <script>
   const BASE       = 'http://127.0.0.1:${port}';
   const PROXY      = BASE + '/chat-proxy';
   const MODELS_URL = BASE + '/models-proxy';
   const SET_MODEL  = BASE + '/set-model-proxy';
   const messagesEl  = document.getElementById('messages');
   const inputEl     = document.getElementById('input');
   const sendBtn     = document.getElementById('send');
@@ -734,19 +1094,15 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
   const modelBtn    = document.getElementById('model-btn');
   const modelLabel  = document.getElementById('model-label');
   const modelDropdown = document.getElementById('model-dropdown');
   // ── Conversation history (multi-turn context) ──────────────────────────────
   const conversationHistory = [];
   // ── Current model state ────────────────────────────────────────────────────
   let currentModel = { provider: null, modelId: null, modelName: null };
   // ── Status helpers ─────────────────────────────────────────────────────────
   function setStatus(ok) {
     statusDot.style.background  = ok ? '#22c55e' : '#f59e0b';
     statusDot.style.boxShadow   = ok ? '0 0 6px #22c55e88' : '0 0 6px #f59e0b88';
   }
   function addMsg(role, text) {
     const d = document.createElement('div');
     d.className = 'msg ' + role;
@@ -755,20 +1111,34 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
     messagesEl.scrollTop = messagesEl.scrollHeight;
     return d;
   }
+  // ── Toast ──────────────────────────────────────────────────────────────────
+  let _toastTimer = null;
+  function showToast(msg, type = '') {
+    const el = document.getElementById('toast');
+    el.textContent = msg;
+    el.className = 'show' + (type ? ' ' + type : '');
+    clearTimeout(_toastTimer);
+    _toastTimer = setTimeout(() => { el.className = ''; }, 3200);
+  }
+  // ── Tab switching ──────────────────────────────────────────────────────────
+  document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const tab = btn.dataset.tab;
+      document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', b === btn));
+      document.querySelectorAll('.tab-panel').forEach(p => p.classList.toggle('active', p.id === 'tab-' + tab));
+      if (tab === 'providers') loadProviders();
+    });
+  });
   // ── Model switcher ─────────────────────────────────────────────────────────
   async function loadModels() {
     try {
       const res = await fetch(MODELS_URL);
       if (!res.ok) { modelLabel.textContent = 'No model'; return; }
       const data = await res.json();
-      // data = { current: { provider, modelId, modelName } | null, groups: [{ provider, label, models }] }
       if (data.current) {
         currentModel = { provider: data.current.provider, modelId: data.current.modelId, modelName: data.current.modelName };
         modelLabel.textContent = data.current.modelName || data.current.modelId;
       } else if (data.groups?.length) {
-        // Pick first available model as default display
         const first = data.groups[0];
         const firstModel = first.models?.[0];
         if (firstModel) {
@@ -778,8 +1148,6 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
       } else {
         modelLabel.textContent = 'No API key';
       }
-      // Build dropdown
       modelDropdown.innerHTML = '';
       if (!data.groups?.length) {
         modelDropdown.innerHTML = '<div class="model-option" style="color:#52525b;cursor:default">No API keys configured</div>';
@@ -799,67 +1167,183 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
           modelDropdown.appendChild(opt);
         }
       }
-    } catch (e) {
-      modelLabel.textContent = 'Error';
-    }
+    } catch { modelLabel.textContent = 'Error'; }
   }
   async function selectModel(provider, modelId, modelName) {
-    currentModel = { provider, modelId, modelName };
-    modelLabel.textContent = modelName;
-    modelDropdown.classList.remove('open');
-    // Persist to Promethios (syncs with main UI)
     try {
-      await fetch(SET_MODEL, {
+      const res = await fetch(SET_MODEL, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ provider, modelId, modelName }),
+        body: JSON.stringify({ provider, modelId }),
       });
-    } catch (_) {}
-    // Rebuild dropdown to show new active state
-    await loadModels();
+      if (res.ok) {
+        currentModel = { provider, modelId, modelName };
+        modelLabel.textContent = modelName;
+        modelDropdown.classList.remove('open');
+        await loadModels();
+      }
+    } catch {}
   }
   modelBtn.addEventListener('click', (e) => {
     e.stopPropagation();
     modelDropdown.classList.toggle('open');
   });
   document.addEventListener('click', () => modelDropdown.classList.remove('open'));
-  modelDropdown.addEventListener('click', e => e.stopPropagation());
-  // ── Chat ───────────────────────────────────────────────────────────────────
+  // ── Providers tab ──────────────────────────────────────────────────────────
+  const PROVIDERS = [
+    { id: 'manus',      name: 'Manus',      icon: '🤖', desc: 'AI agent platform',    url: 'https://manus.im' },
+    { id: 'claude',     name: 'Claude',     icon: '🧠', desc: 'Anthropic AI assistant', url: 'https://claude.ai' },
+    { id: 'chatgpt',    name: 'ChatGPT',    icon: '💬', desc: 'OpenAI ChatGPT',        url: 'https://chatgpt.com' },
+    { id: 'gemini',     name: 'Gemini',     icon: '✨', desc: 'Google Gemini',         url: 'https://gemini.google.com' },
+    { id: 'perplexity', name: 'Perplexity', icon: '🔍', desc: 'Perplexity AI',         url: 'https://perplexity.ai' },
+  ];
+  // Track which providers the user has opened (enables Connect MCP button)
+  const openedProviders = new Set(JSON.parse(localStorage.getItem('prom_opened') || '[]'));
+  // Track connected providers (from server)
+  let connectedProviders = {};
+  // Track in-progress connections
+  const connectingProviders = new Set();
+  async function loadProviders() {
+    try {
+      const res = await fetch(BASE + '/mcp-oauth-status');
+      if (res.ok) {
+        const data = await res.json();
+        connectedProviders = data.tokens || {};
+      }
+    } catch {}
+    renderProviders();
+  }
+  function renderProviders() {
+    const list = document.getElementById('provider-list');
+    list.innerHTML = '';
+    for (const p of PROVIDERS) {
+      const isConnected = !!connectedProviders[p.id];
+      const isOpened = openedProviders.has(p.id);
+      const isConnecting = connectingProviders.has(p.id);
+      const row = document.createElement('div');
+      row.className = 'provider-row' + (isConnected ? ' connected' : '');
+      row.dataset.id = p.id;
+      const connectLabel = isConnected ? '&#10003; Connected' : (isConnecting ? 'Connecting...' : 'Connect MCP');
+      const connectClass = 'btn-connect' +
+        (isConnected ? ' connected-state' : '') +
+        (isConnecting ? ' connecting' : '');
+      row.innerHTML =
+        '<div class="provider-icon">' + p.icon + '</div>' +
+        '<div class="provider-info">' +
+          '<div class="provider-name">' + p.name + '</div>' +
+          '<div class="provider-desc' + (isConnected ? ' connected-text' : '') + '">' +
+            (isConnected ? 'MCP connected · tools available' : p.desc) +
+          '</div>' +
+        '</div>' +
+        '<div class="provider-actions">' +
+          '<button class="btn-open" data-url="' + p.url + '" data-id="' + p.id + '">Open &#8599;</button>' +
+          '<button class="' + connectClass + '"' +
+            (!isOpened && !isConnected ? ' disabled' : '') +
+            (isConnecting ? ' disabled' : '') +
+            ' data-id="' + p.id + '">' +
+            connectLabel +
+          '</button>' +
+        '</div>';
+      list.appendChild(row);
+    }
+    // Attach event listeners
+    list.querySelectorAll('.btn-open').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const id = btn.dataset.id;
+        const url = btn.dataset.url;
+        // Mark as opened so Connect MCP becomes enabled
+        openedProviders.add(id);
+        localStorage.setItem('prom_opened', JSON.stringify([...openedProviders]));
+        // Open via bridge's open-external endpoint (uses system default browser)
+        fetch(BASE + '/open-external', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url }),
+        }).catch(() => {
+          // Fallback: open directly
+          window.open(url, '_blank');
+        });
+        renderProviders();
+      });
+    });
+    list.querySelectorAll('.btn-connect').forEach(btn => {
+      if (btn.disabled) return;
+      const id = btn.dataset.id;
+      if (btn.classList.contains('connected-state')) {
+        // Disconnect
+        btn.addEventListener('click', () => disconnectProvider(id));
+      } else {
+        btn.addEventListener('click', () => connectProvider(id));
+      }
+    });
+  }
+  async function connectProvider(id) {
+    if (connectingProviders.has(id)) return;
+    connectingProviders.add(id);
+    renderProviders();
+    showToast('Opening browser for authorization...', '');
+    try {
+      const res = await fetch(BASE + '/mcp-oauth-start', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ clientId: id }),
+      });
+      const data = await res.json();
+      if (data.ok) {
+        connectedProviders[id] = { connected: true };
+        showToast(data.providerName + ' connected!', 'success');
+      } else {
+        showToast('Connection failed: ' + (data.error || 'Unknown error'), 'error');
+      }
+    } catch (e) {
+      showToast('Connection error: ' + e.message, 'error');
+    }
+    connectingProviders.delete(id);
+    renderProviders();
+  }
+  async function disconnectProvider(id) {
+    try {
+      const res = await fetch(BASE + '/mcp-oauth-disconnect', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ clientId: id }),
+      });
+      const data = await res.json();
+      if (data.ok) {
+        delete connectedProviders[id];
+        showToast('Disconnected', '');
+        renderProviders();
+      }
+    } catch (e) {
+      showToast('Disconnect error: ' + e.message, 'error');
+    }
+  }
+  // ── Chat send ──────────────────────────────────────────────────────────────
   async function sendMessage() {
     const text = inputEl.value.trim();
     if (!text || sendBtn.disabled) return;
     inputEl.value = '';
     inputEl.style.height = 'auto';
-    addMsg('user', text);
     sendBtn.disabled = true;
-    setStatus(true);
-    const thinking = addMsg('thinking', 'Promethios is thinking\u2026');
+    addMsg('user', text);
+    const thinking = addMsg('thinking', 'Thinking…');
+    setStatus(false);
     try {
       const res = await fetch(PROXY, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           message: text,
-          conversationHistory: conversationHistory.slice(-20),
-          source: 'overlay',
+          history: conversationHistory,
+          model: currentModel.modelId ? { provider: currentModel.provider, modelId: currentModel.modelId } : undefined,
         }),
       });
       thinking.remove();
       if (res.ok) {
         const data = await res.json();
-        const reply = data.reply || data.message || JSON.stringify(data);
+        const reply = data.reply || data.content || data.message || JSON.stringify(data);
         addMsg('ai', reply);
-        // Show which model replied (subtle footer on message)
-        if (data.model) {
-          const meta = document.createElement('div');
-          meta.className = 'msg system';
-          meta.textContent = data.provider + ' / ' + data.model;
-          messagesEl.appendChild(meta);
-          messagesEl.scrollTop = messagesEl.scrollHeight;
-        }
+        messagesEl.scrollTop = messagesEl.scrollHeight;
         conversationHistory.push({ role: 'user', content: text });
         conversationHistory.push({ role: 'assistant', content: reply });
       } else {
@@ -875,7 +1359,6 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
     sendBtn.disabled = false;
     setStatus(true);
   }
   sendBtn.addEventListener('click', sendMessage);
   inputEl.addEventListener('keydown', e => {
     if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
@@ -884,7 +1367,6 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
     inputEl.style.height = 'auto';
     inputEl.style.height = Math.min(inputEl.scrollHeight, 120) + 'px';
   });
   // Load models on startup
   loadModels();
 <\/script>