promethios-bridge 2.1.8 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "promethios-bridge",
-  "version": "2.1.8",
+  "version": "2.2.1",
   "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

@@ -39,7 +39,12 @@ const { initAndroidTools } = require('./tools/android');
 
 // Optional: Electron overlay window (bundled in src/overlay — gracefully skipped if Electron not available)
 let launchOverlay = null;
-try { launchOverlay = require('./overlay/launcher').launchOverlay; } catch { /* overlay launcher not found */ }
+let isDesktopInstalled = null;
+try {
+  const overlayLauncher = require('./overlay/launcher');
+  launchOverlay = overlayLauncher.launchOverlay;
+  isDesktopInstalled = overlayLauncher.isDesktopInstalled;
+} catch { /* overlay launcher not found */ }
 
 const HEARTBEAT_INTERVAL = 30_000; // 30s
 const POLL_INTERVAL = 1_000;       // 1s — poll for pending tool calls
@@ -485,9 +490,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 +717,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 +808,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 +910,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 +1060,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>
-<div id="input-row">
-  <textarea id="input" placeholder="Ask Promethios..." rows="1"></textarea>
-  <button id="send" title="Send (Enter)">&#9650;</button>
+<!-- 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>
+<!-- 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 +1099,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 +1116,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 +1153,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 +1172,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 +1364,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 +1372,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>
@@ -948,17 +1435,27 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
   overlayAuthToken = authToken;
   bridgeUsername = require('os').userInfo().username;
 
-  // Try Electron first (available when installed globally or via postinstall).
-  // Fall back to opening the browser-based overlay at http://localhost:<port>/overlay.
+  // ── Option C: Try Electron first; only fall back to browser overlay if not installed ──
+  // isDesktopInstalled() scans standard install paths (postinstall dir + OS program dirs).
+  // If the EXE is found, we launch it and skip the browser overlay entirely.
+  // If not found, we open the browser overlay as a fallback.
   let overlayLaunched = false;
+
+  const desktopInstalled = isDesktopInstalled && isDesktopInstalled();
+
   if (launchOverlay) {
     try {
       const overlayChild = launchOverlay({ authToken, apiBase, dev });
       if (overlayChild) {
         overlayLaunched = true;
-        console.log(chalk.cyan('  ⬡ Promethios overlay launched — floating chat is ready'));
+        console.log(chalk.cyan('  ⬡ Promethios Desktop launched — floating overlay is ready'));
         console.log(chalk.gray('    Hotkey: Ctrl+Shift+P (Win/Linux) or Cmd+Shift+P (Mac)'));
         console.log('');
+      } else if (desktopInstalled) {
+        // findDesktopBinary found a path but spawn returned null — EXE may already be running
+        overlayLaunched = true;
+        console.log(chalk.cyan('  ⬡ Promethios Desktop is running'));
+        console.log('');
       }
     } catch (err) {
       log('Electron overlay launch failed (non-critical):', err.message);
@@ -966,8 +1463,8 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
   }
 
   if (!overlayLaunched) {
-    // Electron not available — open the lightweight browser overlay instead.
-    // This is a small chat UI served by the bridge's own Express server.
+    // Electron Desktop not installed — open the lightweight browser overlay instead.
+    // This is the full-featured chat + Providers UI served by the bridge's Express server.
     const overlayUrl = `http://127.0.0.1:${port}/overlay`;
     const openedInBrowser = await openInBrowser(overlayUrl, log);
     if (openedInBrowser) {

package/src/overlay/launcher.js

@@ -2,13 +2,15 @@
  * launcher.js — Promethios Bridge
  *
  * Called by bridge.js after successful authentication.
- * Finds the pre-built Promethios Desktop binary (downloaded by postinstall.js
- * into ~/.promethios/desktop/) and spawns it with auth credentials via env vars.
+ * Finds the pre-built Promethios Desktop binary and spawns it with auth
+ * credentials via env vars.
  *
  * Binary search order:
  *   1. PROMETHIOS_DESKTOP_BIN environment variable (dev override)
  *   2. ~/.promethios/desktop/  — where postinstall.js places the binary
- *   3. Electron source-mode fallback (dev only, requires electron in node_modules)
+ *   3. Standard OS install paths (Windows: %LOCALAPPDATA%\Programs\Promethios\,
+ *      macOS: /Applications/Promethios.app, Linux: /opt/Promethios/)
+ *   4. Electron source-mode fallback (dev only, requires electron in node_modules)
  *
  * The pre-built binary reads its config from env vars:
  *   PROMETHIOS_TOKEN, PROMETHIOS_API_BASE, PROMETHIOS_THREAD_ID, PROMETHIOS_DEV
@@ -30,18 +32,17 @@ function findDesktopBinary() {
     return process.env.PROMETHIOS_DESKTOP_BIN;
   }
 
-  // 2. Scan ~/.promethios/desktop/ for a matching binary
+  // 2. Scan ~/.promethios/desktop/ for a matching binary (postinstall download location)
   if (fs.existsSync(INSTALL_DIR)) {
     const files = fs.readdirSync(INSTALL_DIR);
     const exts  = process.platform === 'win32'  ? ['.exe']
-                : process.platform === 'darwin' ? ['.dmg', '.app']
+                : process.platform === 'darwin' ? ['.app']
                 : ['.AppImage'];
 
     for (const ext of exts) {
-      const match = files.find(f => f.endsWith(ext));
+      const match = files.find(f => f.endsWith(ext) && !f.includes('Setup'));
       if (match) {
         const full = path.join(INSTALL_DIR, match);
-        // Ensure executable bit is set on Unix
         try {
           if (process.platform !== 'win32') fs.chmodSync(full, 0o755);
         } catch {}
@@ -50,6 +51,67 @@ function findDesktopBinary() {
     }
   }
 
+  // 3. Standard OS install paths (when user installed via the installer EXE/DMG)
+  if (process.platform === 'win32') {
+    const localAppData = process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local');
+    const programFiles = process.env.PROGRAMFILES || 'C:\\Program Files';
+    const programFilesX86 = process.env['PROGRAMFILES(X86)'] || 'C:\\Program Files (x86)';
+
+    const candidates = [
+      // Electron-builder default: %LOCALAPPDATA%\Programs\Promethios\Promethios.exe
+      path.join(localAppData, 'Programs', 'Promethios', 'Promethios.exe'),
+      path.join(localAppData, 'Programs', 'promethios', 'Promethios.exe'),
+      // Per-machine install
+      path.join(programFiles, 'Promethios', 'Promethios.exe'),
+      path.join(programFilesX86, 'Promethios', 'Promethios.exe'),
+      // Alternate casing
+      path.join(localAppData, 'Programs', 'Promethios Desktop', 'Promethios Desktop.exe'),
+      path.join(localAppData, 'Programs', 'Promethios', 'Promethios Desktop.exe'),
+    ];
+
+    for (const c of candidates) {
+      if (fs.existsSync(c)) return c;
+    }
+
+    // Scan %LOCALAPPDATA%\Programs\ for any Promethios*.exe
+    const programsDir = path.join(localAppData, 'Programs');
+    if (fs.existsSync(programsDir)) {
+      try {
+        const dirs = fs.readdirSync(programsDir);
+        for (const dir of dirs) {
+          if (dir.toLowerCase().includes('promethios')) {
+            const dirPath = path.join(programsDir, dir);
+            const files = fs.readdirSync(dirPath);
+            const exe = files.find(f => f.endsWith('.exe') && !f.includes('Uninstall') && !f.includes('Update'));
+            if (exe) return path.join(dirPath, exe);
+          }
+        }
+      } catch {}
+    }
+  } else if (process.platform === 'darwin') {
+    const candidates = [
+      '/Applications/Promethios.app/Contents/MacOS/Promethios',
+      '/Applications/Promethios Desktop.app/Contents/MacOS/Promethios Desktop',
+      path.join(os.homedir(), 'Applications', 'Promethios.app', 'Contents', 'MacOS', 'Promethios'),
+    ];
+    for (const c of candidates) {
+      if (fs.existsSync(c)) return c;
+    }
+  } else {
+    // Linux
+    const candidates = [
+      '/opt/Promethios/promethios',
+      '/usr/local/bin/promethios',
+      path.join(os.homedir(), '.local', 'share', 'promethios', 'promethios'),
+    ];
+    for (const c of candidates) {
+      if (fs.existsSync(c)) {
+        try { fs.chmodSync(c, 0o755); } catch {}
+        return c;
+      }
+    }
+  }
+
   return null;
 }
 
@@ -131,4 +193,9 @@ function launchOverlay({ authToken, apiBase = 'https://api.promethios.ai', threa
   return child;
 }
 
-module.exports = { launchOverlay };
+// ── Check if Electron is installed (without launching) ───────────────────────
+function isDesktopInstalled() {
+  return !!findDesktopBinary();
+}
+
+module.exports = { launchOverlay, isDesktopInstalled, findDesktopBinary };