promethios-bridge 1.9.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "promethios-bridge",
-  "version": "1.9.0",
+  "version": "2.0.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": {
@@ -53,7 +53,9 @@
   },
   "optionalDependencies": {
     "playwright": "^1.42.0",
-    "electron": "^29.0.0"
+    "electron": "^29.0.0",
+    "screenshot-desktop": "^1.12.7",
+    "sharp": "^0.33.0"
   },
   "engines": {
     "node": ">=18.0.0"

package/src/bridge.js

@@ -22,7 +22,18 @@ const fetch = require('node-fetch');
 const { executeLocalTool } = require('./executor');
 const { captureContext } = require('./contextCapture');
 const { startMcpServer } = require('./mcp-server');
-const { setPinnedRegion, setPinnedApps } = require('./tools/desktop');
+const { setPinnedRegion, setPinnedApps, registerBrowserPageAccessor } = require('./tools/desktop');
+
+// Wire the browser-dom tools to the shared Playwright context.
+// The context is created lazily in executor.js when browser_control is first used.
+// We expose a getter so browser-dom tools can access the live page.
+registerBrowserPageAccessor(async () => {
+  if (!global.__playwrightContext) {
+    throw new Error('Browser not open. Use the browser_control tool to navigate to a page first, then retry.');
+  }
+  const pages = global.__playwrightContext.pages();
+  return pages.length > 0 ? pages[pages.length - 1] : await global.__playwrightContext.newPage();
+});
 const { initAndroidTools } = require('./tools/android');
 
 // Optional: Electron overlay window (bundled in src/overlay — gracefully skipped if Electron not available)

package/src/overlay/main.js

@@ -573,84 +573,110 @@ function openManusBrowser({ mcpPrompt } = {}) {
   if (DEV) manusBrowserWin.webContents.openDevTools({ mode: 'detach' });
 }
 
-// ── OAuth popup ───────────────────────────────────────────────────────────────
+// ── OAuth via real system browser + localhost callback server ─────────────────
 /**
- * Open a small BrowserWindow pointing at the Promethios OAuth consent page.
- * The consent page at RELAY_URL/api/mcp/oauth/authorize will:
- *   1. Show a "Grant access to <provider>" page
- *   2. On Allow: redirect to promethios://oauth/callback?token=xxx&provider=yyy
- *   3. We intercept that redirect here and forward the result to the renderer
+ * Open OAuth in the user's REAL system browser (Chrome/Edge/Safari/Firefox).
+ *
+ * Why: Electron's Chromium webview is blocked by Google, Meta, and other OAuth
+ * providers with "This browser or app may not be secure". The fix:
+ *   1. Start a temporary localhost HTTP server on port 7826
+ *   2. Build the OAuth URL with redirect_uri=http://localhost:7826/callback
+ *   3. Open that URL in the real system browser via shell.openExternal()
+ *   4. The relay redirects back to localhost:7826/callback?token=xxx
+ *   5. We intercept it, close the server, and deliver the token to the renderer
+ *   6. The localhost page shows "You can close this tab" to the user
  */
+let oauthCallbackServer = null;
+let oauthCallbackPort   = 7826;
+
 function openOAuthPopup(provider) {
-  if (oauthPopup && !oauthPopup.isDestroyed()) {
-    oauthPopup.focus();
-    return;
+  // Close any existing callback server
+  if (oauthCallbackServer) {
+    try { oauthCallbackServer.close(); } catch {}
+    oauthCallbackServer = null;
   }
 
-  // Include the bridge token so the relay can pre-authenticate the user
-  // and skip the "Login Required" page — going straight to the consent screen
-  const tokenParam = AUTH_TOKEN ? `&bridge_token=${encodeURIComponent(AUTH_TOKEN)}` : '';
+  const callbackPort = oauthCallbackPort;
+  const redirectUri  = `http://localhost:${callbackPort}/callback`;
+  const tokenParam   = AUTH_TOKEN ? `&bridge_token=${encodeURIComponent(AUTH_TOKEN)}` : '';
   const authUrl = `${RELAY_URL}/api/mcp/oauth/authorize?` +
     `client_id=${encodeURIComponent(provider)}&` +
     `response_type=code&` +
-    `redirect_uri=${encodeURIComponent('promethios://oauth/callback')}${tokenParam}`;
-
-  oauthPopup = new BrowserWindow({
-    width:  OAUTH_W,
-    height: OAUTH_H,
-    title:  `Connect ${provider} to Promethios`,
-    frame:  true,
-    modal:  false,
-    parent: overlayWindow,
-    webPreferences: {
-      nodeIntegration:  false,
-      contextIsolation: true,
-    },
-  });
-
-  oauthPopup.setMenuBarVisibility(false);
-  oauthPopup.loadURL(authUrl);
+    `redirect_uri=${encodeURIComponent(redirectUri)}${tokenParam}`;
+
+  const successHtml = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Promethios Connected</title>
+<style>*{box-sizing:border-box}body{font-family:system-ui,-apple-system,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,0.15);border:2px solid rgba(139,92,246,0.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,0.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>Connection Failed</title>
+<style>*{box-sizing:border-box}body{font-family:system-ui,-apple-system,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,0.1);border:2px solid rgba(239,68,68,0.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,0.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>`;
+
+  // Start the localhost callback server
+  oauthCallbackServer = http.createServer((req, res) => {
+    const reqUrl = new URL(req.url, `http://localhost:${callbackPort}`);
+    if (reqUrl.pathname !== '/callback') { res.writeHead(404); res.end('Not found'); return; }
+
+    const token    = reqUrl.searchParams.get('token') || reqUrl.searchParams.get('access_token');
+    const code     = reqUrl.searchParams.get('code');
+    const clientId = reqUrl.searchParams.get('client_id') || provider;
+    const error    = reqUrl.searchParams.get('error');
 
-  // Intercept the custom URI scheme redirect
-  oauthPopup.webContents.on('will-redirect', (event, url) => {
-    handleOAuthCallback(url, provider);
-  });
+    if (error) {
+      res.writeHead(200, { 'Content-Type': 'text/html' });
+      res.end(errorHtml(error));
+      if (DEV) console.error(`[OAuth] Error for ${provider}: ${error}`);
+      try { oauthCallbackServer.close(); } catch {}
+      oauthCallbackServer = null;
+      return;
+    }
 
-  // Also handle navigation (some servers do a full navigate instead of redirect)
-  oauthPopup.webContents.on('will-navigate', (event, url) => {
-    if (url.startsWith('promethios://')) {
-      event.preventDefault();
-      handleOAuthCallback(url, provider);
+    if (token) {
+      res.writeHead(200, { 'Content-Type': 'text/html' }); res.end(successHtml);
+      deliverOAuthResult({ provider, token });
+      try { oauthCallbackServer.close(); } catch {}
+      oauthCallbackServer = null;
+    } else if (code) {
+      res.writeHead(200, { 'Content-Type': 'text/html' }); res.end(successHtml);
+      exchangeCodeForToken(code, clientId, provider, redirectUri);
+      try { oauthCallbackServer.close(); } catch {}
+      oauthCallbackServer = null;
+    } else {
+      res.writeHead(400, { 'Content-Type': 'text/html' }); res.end(errorHtml('No token received'));
     }
   });
 
-  // Read auth code from page title after Allow click
-  // The /approve endpoint sets title to: promethios_oauth_success|code=<code>|client=<id>
-  oauthPopup.webContents.on('page-title-updated', (_, title) => {
-    if (title.startsWith('promethios_oauth_success')) {
-      const codeMatch  = title.match(/code=([^|]+)/);
-      const clientMatch = title.match(/client=([^|]+)/);
-      if (codeMatch) {
-        const code     = codeMatch[1];
-        const clientId = clientMatch ? clientMatch[1] : provider;
-        exchangeCodeForToken(code, clientId, provider);
-      }
+  oauthCallbackServer.on('error', (err) => {
+    if (err.code === 'EADDRINUSE') {
+      // Port in use — try next port
+      oauthCallbackPort++;
+      oauthCallbackServer = null;
+      openOAuthPopup(provider);
+    } else {
+      console.error('[OAuth] Callback server error:', err.message);
     }
   });
 
-  oauthPopup.on('closed', () => {
-    oauthPopup = null;
+  oauthCallbackServer.listen(callbackPort, '127.0.0.1', () => {
+    shell.openExternal(authUrl);
+    if (DEV) console.log(`[OAuth] Opened system browser for ${provider}: ${authUrl}`);
+    // Auto-close after 5 minutes if no callback received
+    setTimeout(() => {
+      if (oauthCallbackServer) { try { oauthCallbackServer.close(); } catch {} oauthCallbackServer = null; }
+    }, 5 * 60 * 1000);
   });
-
-  if (DEV) console.log(`[OAuth] Opened popup for ${provider}: ${authUrl}`);
 }
 
 /**
  * Exchange an OAuth auth code for a bridge session token.
  * Called after the consent page sets its title to promethios_oauth_success|code=...
  */
-async function exchangeCodeForToken(code, clientId, provider) {
-  const redirectUri = 'promethios://oauth/callback';
+async function exchangeCodeForToken(code, clientId, provider, redirectUri) {
+  if (!redirectUri) redirectUri = `http://localhost:${oauthCallbackPort}/callback`;
   const tokenUrl = `${RELAY_URL}/api/mcp/oauth/token`;
 
   try {
@@ -695,12 +721,9 @@ async function exchangeCodeForToken(code, clientId, provider) {
       deliverOAuthResult({ provider, token: resp.body.access_token });
     } else {
       console.error('[OAuth] Token exchange failed:', resp.body);
-      // Still close the popup — user can try again
-      if (oauthPopup && !oauthPopup.isDestroyed()) oauthPopup.close();
     }
   } catch (e) {
     console.error('[OAuth] Token exchange error:', e.message);
-    if (oauthPopup && !oauthPopup.isDestroyed()) oauthPopup.close();
   }
 }
 
@@ -730,12 +753,6 @@ function deliverOAuthResult({ provider, token }) {
   connectedProviders[provider] = { token, clientId: provider, ts: Date.now() };
   saveState();
 
-  // Close the popup
-  if (oauthPopup && !oauthPopup.isDestroyed()) {
-    oauthPopup.close();
-    oauthPopup = null;
-  }
-
   // Send result to renderer so it can show the copy-prompt modal
   if (overlayWindow && !overlayWindow.isDestroyed()) {
     overlayWindow.webContents.send('oauth-complete', { provider, token, clientId: provider });

package/src/overlay/renderer/index.html

@@ -824,9 +824,13 @@
 
     <!-- ══ Providers tab ═══════════════════════════════════════════════════ -->
     <div class="tab-content" id="tab-providers">
-
       <div id="providers-list" style="display:flex;flex-direction:column;gap:10px;padding:14px;overflow-y:auto;flex:1;">
-
+        <!-- Section header -->
+        <div style="font-size:10px;font-weight:700;letter-spacing:0.08em;color:rgba(139,92,246,0.8);text-transform:uppercase;margin-bottom:2px;">AI Providers</div>
+        <div style="font-size:10px;color:rgba(255,255,255,0.35);line-height:1.5;margin-bottom:6px;">
+          <strong style="color:rgba(255,255,255,0.55)">Open</strong> launches the provider in your real browser.
+          <strong style="color:rgba(255,255,255,0.55)">Connect</strong> authorizes MCP — sign in first, then connect.
+        </div>
         <!-- Manus -->
         <div class="provider-card" data-provider="manus">
           <div class="provider-icon manus">M</div>
@@ -835,11 +839,10 @@
             <div class="provider-desc">manus.im — autonomous AI agent</div>
           </div>
           <div class="provider-actions">
-            <button class="btn-open" data-url="https://manus.im">Open ↗</button>
+            <button class="btn-open" data-url="https://manus.im" data-provider="manus">Open ↗</button>
             <button class="btn-connect" data-provider="manus" id="connect-manus">Connect</button>
           </div>
         </div>
-
         <!-- Claude -->
         <div class="provider-card" data-provider="claude">
           <div class="provider-icon claude">C</div>
@@ -848,11 +851,10 @@
             <div class="provider-desc">claude.ai — Anthropic's AI assistant</div>
           </div>
           <div class="provider-actions">
-            <button class="btn-open" data-url="https://claude.ai">Open ↗</button>
+            <button class="btn-open" data-url="https://claude.ai" data-provider="claude">Open ↗</button>
             <button class="btn-connect" data-provider="claude" id="connect-claude">Connect</button>
           </div>
         </div>
-
         <!-- ChatGPT -->
         <div class="provider-card" data-provider="chatgpt">
           <div class="provider-icon chatgpt">G</div>
@@ -861,11 +863,10 @@
             <div class="provider-desc">chatgpt.com — OpenAI's assistant</div>
           </div>
           <div class="provider-actions">
-            <button class="btn-open" data-url="https://chatgpt.com">Open ↗</button>
+            <button class="btn-open" data-url="https://chatgpt.com" data-provider="chatgpt">Open ↗</button>
             <button class="btn-connect" data-provider="chatgpt" id="connect-chatgpt">Connect</button>
           </div>
         </div>
-
         <!-- Perplexity -->
         <div class="provider-card" data-provider="perplexity">
           <div class="provider-icon perplexity">P</div>
@@ -874,24 +875,24 @@
             <div class="provider-desc">perplexity.ai — search-powered AI</div>
           </div>
           <div class="provider-actions">
-            <button class="btn-open" data-url="https://perplexity.ai">Open ↗</button>
+            <button class="btn-open" data-url="https://perplexity.ai" data-provider="perplexity">Open ↗</button>
             <button class="btn-connect" data-provider="perplexity" id="connect-perplexity">Connect</button>
           </div>
         </div>
-
         <!-- Gemini -->
         <div class="provider-card" data-provider="gemini">
-          <div class="provider-icon gemini">G</div>
+          <div class="provider-icon gemini">✦</div>
           <div class="provider-info">
             <div class="provider-name">Gemini</div>
             <div class="provider-desc">gemini.google.com — Google's AI</div>
           </div>
           <div class="provider-actions">
-            <button class="btn-open" data-url="https://gemini.google.com">Open ↗</button>
+            <button class="btn-open" data-url="https://gemini.google.com" data-provider="gemini">Open ↗</button>
             <button class="btn-connect" data-provider="gemini" id="connect-gemini">Connect</button>
           </div>
         </div>
-
+        <!-- Inline error/hint row (shown when login check fails) -->
+        <div id="provider-login-hint" style="display:none;margin-top:4px;padding:10px 12px;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);border-radius:8px;font-size:10px;color:rgba(239,68,68,0.9);line-height:1.5;"></div>
       </div>
     </div><!-- /tab-providers -->
 
@@ -1207,14 +1208,12 @@
     document.querySelectorAll('.btn-open').forEach(btn => {
       btn.addEventListener('click', () => {
         const url      = btn.dataset.url;
-        const provider = btn.closest('[data-provider]')?.dataset.provider;
+        const provider = btn.dataset.provider || btn.closest('[data-provider]')?.dataset.provider;
         if (!url) return;
-        // Manus gets the floating branded browser window; others open in system browser
-        if (provider === 'manus') {
-          window.promethios.openManusBrowser({});
-        } else {
-          window.promethios.openExternal(url);
-        }
+        // Always open in the real system browser — OAuth requires it (Google/Meta block Electron webviews)
+        // Manus also gets the system browser so Google login works
+        window.promethios.openExternal(url);
+        hideProviderLoginHint();
       });
     });
 
@@ -1229,10 +1228,33 @@
       });
     });
 
+    // Provider login URLs — used to open the sign-in page if not logged in
+    const PROVIDER_LOGIN_URLS = {
+      manus:      'https://manus.im',
+      claude:     'https://claude.ai/login',
+      chatgpt:    'https://chatgpt.com/auth/login',
+      perplexity: 'https://www.perplexity.ai/',
+      gemini:     'https://gemini.google.com/',
+    };
+
+    function showProviderLoginHint(provider, message) {
+      const hint = document.getElementById('provider-login-hint');
+      if (!hint) return;
+      hint.innerHTML = message;
+      hint.style.display = 'block';
+      setTimeout(() => { hint.style.display = 'none'; }, 12000);
+    }
+
+    function hideProviderLoginHint() {
+      const hint = document.getElementById('provider-login-hint');
+      if (hint) hint.style.display = 'none';
+    }
+
     async function startOAuthFlow(provider) {
+      hideProviderLoginHint();
+
       if (!authToken) {
-        showToast('Paste your bridge token in the Bridge tab first.');
-        // Switch to Bridge tab
+        showToast('Bridge not connected — start the bridge first.');
         document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
         document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
         document.querySelector('.tab[data-tab="bridge"]').classList.add('active');
@@ -1240,7 +1262,7 @@
         return;
       }
 
-      // Find the clicked button and show loading state
+      const info = PROVIDER_LABELS[provider] || { name: provider, color: 'rgba(255,255,255,0.1)', text: '#e2e8f0' };
       const btn = document.querySelector(`.btn-connect[data-provider="${provider}"]`);
       if (btn) { btn.textContent = 'Connecting…'; btn.disabled = true; }
 
@@ -1253,17 +1275,29 @@
         const data = await res.json();
 
         if (!data.success) {
-          showToast(`Connect failed: ${data.error || 'Unknown error'}`);
+          const errMsg = (data.error || '').toLowerCase();
+          const isLoginRequired = errMsg.includes('login') || errMsg.includes('not logged') ||
+                                  errMsg.includes('auth') || errMsg.includes('session') ||
+                                  errMsg.includes('sign in') || res.status === 401;
+
+          if (isLoginRequired) {
+            const loginUrl = PROVIDER_LOGIN_URLS[provider] || `https://${provider}.com`;
+            showProviderLoginHint(provider,
+              `<strong>Sign in to ${info.name} first.</strong><br>` +
+              `Click <strong>Open ↗</strong> next to ${info.name} to sign in, then click <strong>Connect</strong> again.`
+            );
+            window.promethios.openExternal(loginUrl);
+          } else {
+            showToast(`Connect failed: ${data.error || 'Unknown error'}`);
+          }
           if (btn) { btn.textContent = 'Connect'; btn.disabled = false; }
           return;
         }
 
-        // Store the connection
         connectedProviders[provider] = { token: data.token, clientId: provider, ts: Date.now() };
         updateProviderButtons();
+        hideProviderLoginHint();
 
-        // Show copy-prompt modal with the relay-generated prompt
-        const info = PROVIDER_LABELS[provider] || { name: provider, color: 'rgba(255,255,255,0.1)', text: '#e2e8f0' };
         modalProviderName.textContent = info.name;
         modalProviderBadge.textContent = info.name;
         modalProviderBadge.style.background = info.color;
@@ -1272,8 +1306,8 @@
         modalCopyBtn.textContent = '⌘ Copy Prompt';
         modalCopyBtn.classList.remove('copied');
         promptModal.classList.add('open');
-
         showToast(`✓ ${info.name} connected!`);
+
       } catch (err) {
         showToast('Network error — check your connection and try again.');
         if (btn) { btn.textContent = 'Connect'; btn.disabled = false; }