promethios-bridge 1.7.6 → 1.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "promethios-bridge",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "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": {
@@ -49,8 +49,7 @@
     "express": "^4.18.2",
     "open": "^8.4.2",
     "ora": "^5.4.1",
-    "node-fetch": "^2.7.0",
-    "playwright": "^1.42.0"
+    "node-fetch": "^2.7.0"
   },
   "optionalDependencies": {
     "playwright": "^1.42.0",

package/src/bridge.js

@@ -72,6 +72,100 @@ async function checkForUpdates(currentVersion, log) {
   }
 }
 
+/**
+ * Open the overlay URL as a standalone app window (no tabs, no address bar).
+ *
+ * Strategy (in order):
+ *   1. Chrome/Edge --app flag: opens a frameless app window with no tabs
+ *   2. Firefox --new-window: opens in a new window (has address bar)
+ *   3. platform-native fallback: cmd start / open / xdg-open (opens as tab)
+ *
+ * Returns true if any method succeeded, false otherwise.
+ */
+async function openInBrowser(url, log) {
+  const { exec, execFile } = require('child_process');
+  const { existsSync } = require('fs');
+  const platform = process.platform;
+
+  // ── Try to open as a standalone app window (Chrome/Edge --app flag) ──────
+  // This gives the closest experience to the Electron overlay:
+  // no address bar, no tabs, no bookmarks bar.
+  if (platform === 'win32') {
+    const chromeCandidates = [
+      process.env['PROGRAMFILES'] + '\\Google\\Chrome\\Application\\chrome.exe',
+      process.env['PROGRAMFILES(X86)'] + '\\Google\\Chrome\\Application\\chrome.exe',
+      process.env['LOCALAPPDATA'] + '\\Google\\Chrome\\Application\\chrome.exe',
+      process.env['PROGRAMFILES'] + '\\Microsoft\\Edge\\Application\\msedge.exe',
+      process.env['PROGRAMFILES(X86)'] + '\\Microsoft\\Edge\\Application\\msedge.exe',
+    ].filter(Boolean);
+
+    for (const chromePath of chromeCandidates) {
+      if (existsSync(chromePath)) {
+        const launched = await new Promise((resolve) => {
+          const child = require('child_process').spawn(
+            chromePath,
+            [`--app=${url}`, '--window-size=440,720', '--window-position=50,50'],
+            { detached: true, stdio: 'ignore' }
+          );
+          child.on('error', () => resolve(false));
+          child.unref();
+          // If spawn didn't immediately error, assume success
+          setTimeout(() => resolve(true), 500);
+        });
+        if (launched) {
+          log('Opened overlay as Chrome/Edge app window:', chromePath);
+          return true;
+        }
+      }
+    }
+  } else if (platform === 'darwin') {
+    // macOS: try Chrome --app flag
+    const chromeMac = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';
+    const edgeMac   = '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge';
+    for (const chromePath of [chromeMac, edgeMac]) {
+      if (existsSync(chromePath)) {
+        const launched = await new Promise((resolve) => {
+          const child = require('child_process').spawn(
+            chromePath,
+            [`--app=${url}`, '--window-size=440,720'],
+            { detached: true, stdio: 'ignore' }
+          );
+          child.on('error', () => resolve(false));
+          child.unref();
+          setTimeout(() => resolve(true), 500);
+        });
+        if (launched) return true;
+      }
+    }
+  }
+
+  // ── Fallback: open in default browser (may open as tab) ──────────────────
+  return new Promise((resolve) => {
+    let cmd;
+    if (platform === 'win32') {
+      cmd = `cmd /c start "" "${url}"`;
+    } else if (platform === 'darwin') {
+      cmd = `open "${url}"`;
+    } else {
+      cmd = `xdg-open "${url}"`;
+    }
+    exec(cmd, { timeout: 5000 }, (err) => {
+      if (!err) { resolve(true); return; }
+      log('Native browser open failed, trying open package:', err.message);
+      try {
+        const openModule = require('open');
+        openModule(url).then(() => resolve(true)).catch((e) => {
+          log('open package also failed:', e.message);
+          resolve(false);
+        });
+      } catch (e) {
+        log('open package not available:', e.message);
+        resolve(false);
+      }
+    });
+  });
+}
+
 async function startBridge({ setupToken, apiBase, port, dev }) {
   const log = dev
     ? (...args) => console.log(chalk.gray('  [debug]'), ...args)
@@ -190,13 +284,36 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
   });
 
   // ── Overlay route: serves the floating chat UI in the default browser ────
-  // This is the fallback when Electron is not available (e.g. running via npx).
-  // The overlay HTML is stored inline here so no file path resolution is needed.
+  // Chat messages are proxied through the bridge's own Express server to avoid
+  // CORS issues (the browser cannot call the remote API directly from localhost).
   let overlayAuthToken = null; // set after authentication
+
+  // ── /chat-proxy: forwards messages to the Promethios API on behalf of the overlay ──
+  // This avoids CORS entirely — the browser talks to 127.0.0.1, the bridge
+  // talks to the remote API using the stored auth token.
+  app.post('/chat-proxy', express.json(), async (req, res) => {
+    const token = overlayAuthToken;
+    if (!token) { return res.status(401).json({ error: 'Not authenticated' }); }
+    try {
+      const upstream = await fetch(`${apiBase}/api/chat/quick`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`,
+        },
+        body: JSON.stringify(req.body),
+      });
+      const data = await upstream.json();
+      res.status(upstream.status).json(data);
+    } catch (err) {
+      res.status(502).json({ error: 'Bridge proxy error: ' + err.message });
+    }
+  });
+
   app.get('/overlay', (req, res) => {
-    const token = overlayAuthToken || '';
-    const apiBase_ = apiBase;
     res.setHeader('Content-Type', 'text/html; charset=utf-8');
+    // NOTE: The overlay HTML talks to /chat-proxy (same origin, no CORS).
+    // It never calls the remote API directly.
     res.send(`<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -205,61 +322,179 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
 <title>Promethios</title>
 <style>
   * { box-sizing: border-box; margin: 0; padding: 0; }
-  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    background: #0f0f11; color: #e4e4e7; height: 100vh; display: flex;
-    flex-direction: column; overflow: hidden; }
-  #header { background: #18181b; border-bottom: 1px solid #27272a;
-    padding: 10px 14px; display: flex; align-items: center; gap: 8px;
-    flex-shrink: 0; }
-  #header .dot { width: 8px; height: 8px; border-radius: 50%;
-    background: #22c55e; flex-shrink: 0; }
-  #header .title { font-size: 13px; font-weight: 600; color: #a1a1aa; }
-  #header .status { font-size: 11px; color: #22c55e; margin-left: auto; }
-  #messages { flex: 1; overflow-y: auto; padding: 12px; display: flex;
-    flex-direction: column; gap: 8px; }
-  .msg { max-width: 85%; padding: 8px 12px; border-radius: 12px;
-    font-size: 13px; line-height: 1.5; word-break: break-word; }
-  .msg.user { background: #3f3f46; align-self: flex-end; color: #e4e4e7; }
-  .msg.ai { background: #1e1e2e; border: 1px solid #27272a;
-    align-self: flex-start; color: #c4b5fd; }
-  .msg.system { background: transparent; border: none;
-    color: #52525b; font-size: 11px; align-self: center; font-style: italic; }
-  #input-row { padding: 10px 12px; background: #18181b;
-    border-top: 1px solid #27272a; display: flex; gap: 8px; flex-shrink: 0; }
-  #input { flex: 1; background: #27272a; border: 1px solid #3f3f46;
-    border-radius: 8px; padding: 8px 12px; color: #e4e4e7; font-size: 13px;
-    outline: none; resize: none; height: 36px; font-family: inherit; }
-  #input:focus { border-color: #6d28d9; }
-  #send { background: #6d28d9; color: white; border: none; border-radius: 8px;
-    padding: 0 14px; font-size: 13px; cursor: pointer; height: 36px;
-    flex-shrink: 0; }
-  #send:hover { background: #7c3aed; }
-  #send:disabled { background: #3f3f46; cursor: not-allowed; }
-  ::-webkit-scrollbar { width: 4px; }
-  ::-webkit-scrollbar-track { background: transparent; }
-  ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 2px; }
+  html, body { height: 100%; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
+    background: #09090b;
+    color: #e4e4e7;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+  }
+  /* ── Header ── */
+  #header {
+    background: #111113;
+    border-bottom: 1px solid #1f1f23;
+    padding: 0 16px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+    user-select: none;
+  }
+  #header .logo {
+    width: 22px; height: 22px;
+    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
+    border-radius: 6px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 11px; font-weight: 700; color: white; letter-spacing: -0.5px;
+    flex-shrink: 0;
+  }
+  #header .brand { font-size: 14px; font-weight: 600; color: #e4e4e7; }
+  #header .badge {
+    font-size: 10px; font-weight: 500; color: #a855f7;
+    background: #1e1030; border: 1px solid #3b1f6b;
+    border-radius: 4px; padding: 1px 6px; margin-left: 2px;
+  }
+  #status-dot {
+    width: 7px; height: 7px; border-radius: 50%;
+    background: #22c55e; margin-left: auto; flex-shrink: 0;
+    box-shadow: 0 0 6px #22c55e88;
+  }
+  #status-text { font-size: 11px; color: #71717a; }
+  /* ── Messages ── */
+  #messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    scroll-behavior: smooth;
+  }
+  #messages::-webkit-scrollbar { width: 4px; }
+  #messages::-webkit-scrollbar-track { background: transparent; }
+  #messages::-webkit-scrollbar-thumb { background: #27272a; border-radius: 2px; }
+  .msg {
+    max-width: 88%;
+    padding: 9px 13px;
+    border-radius: 14px;
+    font-size: 13px;
+    line-height: 1.55;
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+  .msg.user {
+    background: #3b1f6b;
+    border: 1px solid #5b21b6;
+    align-self: flex-end;
+    color: #ede9fe;
+    border-bottom-right-radius: 4px;
+  }
+  .msg.ai {
+    background: #111113;
+    border: 1px solid #1f1f23;
+    align-self: flex-start;
+    color: #d4d4d8;
+    border-bottom-left-radius: 4px;
+  }
+  .msg.system {
+    background: transparent;
+    border: none;
+    color: #3f3f46;
+    font-size: 11px;
+    align-self: center;
+    font-style: italic;
+    max-width: 100%;
+    text-align: center;
+  }
+  .msg.thinking {
+    background: #111113;
+    border: 1px solid #1f1f23;
+    align-self: flex-start;
+    color: #52525b;
+    font-size: 12px;
+    font-style: italic;
+    border-bottom-left-radius: 4px;
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+  @keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
+  /* ── Input row ── */
+  #input-row {
+    padding: 10px 12px 12px;
+    background: #111113;
+    border-top: 1px solid #1f1f23;
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+    align-items: flex-end;
+  }
+  #input {
+    flex: 1;
+    background: #18181b;
+    border: 1px solid #27272a;
+    border-radius: 10px;
+    padding: 9px 13px;
+    color: #e4e4e7;
+    font-size: 13px;
+    font-family: inherit;
+    outline: none;
+    resize: none;
+    min-height: 38px;
+    max-height: 120px;
+    line-height: 1.4;
+    transition: border-color 0.15s;
+  }
+  #input::placeholder { color: #3f3f46; }
+  #input:focus { border-color: #7c3aed; }
+  #send {
+    background: #7c3aed;
+    color: white;
+    border: none;
+    border-radius: 10px;
+    width: 38px; height: 38px;
+    font-size: 16px;
+    cursor: pointer;
+    flex-shrink: 0;
+    display: flex; align-items: center; justify-content: center;
+    transition: background 0.15s;
+  }
+  #send:hover { background: #6d28d9; }
+  #send:disabled { background: #27272a; cursor: not-allowed; }
 </style>
 </head>
 <body>
 <div id="header">
-  <div class="dot"></div>
-  <span class="title">Promethios</span>
-  <span class="status" id="status">Connected</span>
+  <div class="logo">P</div>
+  <span class="brand">Promethios</span>
+  <span class="badge">Local Bridge</span>
+  <span id="status-text">Connected</span>
+  <div id="status-dot"></div>
 </div>
 <div id="messages">
-  <div class="msg system">Bridge connected — ready to help</div>
+  <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">Send</button>
+  <button id="send" title="Send (Enter)">&#9650;</button>
 </div>
 <script>
-  const AUTH_TOKEN = '${token}';
-  const API_BASE = '${apiBase_}';
+  // Chat is proxied through the bridge's own server (/chat-proxy)
+  // to avoid CORS — the browser never calls the remote API directly.
+  const PROXY = 'http://127.0.0.1:${port}/chat-proxy';
   const messagesEl = document.getElementById('messages');
-  const inputEl = document.getElementById('input');
-  const sendBtn = document.getElementById('send');
-  const statusEl = document.getElementById('status');
+  const inputEl    = document.getElementById('input');
+  const sendBtn    = document.getElementById('send');
+  const statusTxt  = document.getElementById('status-text');
+  const statusDot  = document.getElementById('status-dot');
+
+  function setStatus(text, ok) {
+    statusTxt.textContent = text;
+    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');
@@ -267,33 +502,40 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
     d.textContent = text;
     messagesEl.appendChild(d);
     messagesEl.scrollTop = messagesEl.scrollHeight;
+    return d;
   }
 
   async function sendMessage() {
     const text = inputEl.value.trim();
-    if (!text) return;
+    if (!text || sendBtn.disabled) return;
     inputEl.value = '';
+    inputEl.style.height = 'auto';
     addMsg('user', text);
     sendBtn.disabled = true;
-    statusEl.textContent = 'Thinking...';
+    setStatus('Thinking…', true);
+    const thinking = addMsg('thinking', 'Promethios is thinking…');
     try {
-      const res = await fetch(API_BASE + '/api/chat/quick', {
+      const res = await fetch(PROXY, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json',
-          'Authorization': 'Bearer ' + AUTH_TOKEN },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ message: text, source: 'overlay' }),
       });
+      thinking.remove();
       if (res.ok) {
         const data = await res.json();
         addMsg('ai', data.reply || data.message || JSON.stringify(data));
       } else {
-        addMsg('system', 'Error: ' + res.status);
+        const err = await res.json().catch(() => ({}));
+        addMsg('system', 'Error ' + res.status + (err.error ? ': ' + err.error : ''));
       }
     } catch (e) {
-      addMsg('system', 'Could not reach Promethios: ' + e.message);
+      thinking.remove();
+      addMsg('system', 'Connection error: ' + e.message);
+      setStatus('Reconnecting…', false);
+      setTimeout(() => setStatus('Connected', true), 3000);
     }
     sendBtn.disabled = false;
-    statusEl.textContent = 'Connected';
+    setStatus('Connected', true);
   }
 
   sendBtn.addEventListener('click', sendMessage);
@@ -302,7 +544,7 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
   });
   inputEl.addEventListener('input', () => {
     inputEl.style.height = 'auto';
-    inputEl.style.height = Math.min(inputEl.scrollHeight, 100) + 'px';
+    inputEl.style.height = Math.min(inputEl.scrollHeight, 120) + 'px';
   });
 <\/script>
 </body>
@@ -366,17 +608,15 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
     // Electron not available — open the lightweight browser overlay instead.
     // This is a small chat UI served by the bridge's own Express server.
     const overlayUrl = `http://127.0.0.1:${port}/overlay`;
-    try {
-      const openModule = require('open');
-      await openModule(overlayUrl);
+    const openedInBrowser = await openInBrowser(overlayUrl, log);
+    if (openedInBrowser) {
       console.log(chalk.cyan('  ⬡ Promethios overlay opened in your browser'));
       console.log(chalk.gray(`    URL: ${overlayUrl}`));
-      console.log('');
-    } catch (err) {
-      log('Browser overlay launch failed (non-critical):', err.message);
-      console.log(chalk.gray(`  ℹ  Open ${overlayUrl} in your browser for the chat overlay`));
-      console.log('');
+    } else {
+      console.log(chalk.gray(`  ℹ  Open this URL in your browser for the chat overlay:`));
+      console.log(chalk.cyan(`    ${overlayUrl}`));
     }
+    console.log('');
   }
 
   // Heartbeat loop

package/src/overlay/launcher.js

@@ -2,56 +2,74 @@
  * launcher.js
  *
  * Called by the bridge CLI after successful authentication.
- * Spawns the Electron overlay window as a detached child process.
- * Bundled inside promethios-bridge — no separate install required.
+ * Attempts to launch the Electron overlay window. Returns null if Electron
+ * is not available (which is the case when running via `npx`, since optional
+ * dependencies are not installed in the npx cache).
  *
- * Usage (from bridge CLI):
- *   const { launchOverlay } = require('./overlay/launcher');
- *   launchOverlay({ authToken, apiBase, threadId, dev });
+ * IMPORTANT: We check for the actual Electron binary on disk, NOT just whether
+ * the `electron` npm package is present. When running via `npx`, the electron
+ * package IS downloaded (it's a listed optionalDependency), but its postinstall
+ * script downloads the real binary separately — that binary may not exist yet.
+ * Using require.resolve('electron') would return true even without the binary,
+ * causing spawn() to fail silently and the browser fallback to never be reached.
  */
 
+'use strict';
+
 const { spawn } = require('child_process');
 const path = require('path');
 const fs = require('fs');
 
 /**
- * Launch the Promethios overlay Electron window.
- * Returns the child process (or null if Electron is not available).
- *
- * IMPORTANT: When running via `npx`, optional dependencies (including electron)
- * are NOT installed in the npx cache. The spawn() call may therefore fail with
- * ENOENT. We attach an 'error' handler before unref() to silently absorb this
- * instead of crashing the bridge process with an unhandled error event.
+ * Find the actual Electron binary on disk.
+ * Returns the path string if found and executable, or null if not available.
  */
-function launchOverlay({ authToken, apiBase = 'https://api.promethios.ai', threadId = '', dev = false } = {}) {
-  // Find electron binary — try local node_modules first, then global
-  let electronBin = null;
+function findElectronBinary() {
+  const isWin = process.platform === 'win32';
 
+  // Candidate paths for the real Electron binary (not just the npm package stub)
   const candidates = [
-    // Installed inside promethios-bridge's own node_modules (postinstall puts it here)
-    path.join(__dirname, '..', '..', 'node_modules', '.bin', 'electron'),
-    path.join(__dirname, '..', '..', 'node_modules', '.bin', 'electron.cmd'),
-    // Global electron fallback
-    'electron',
+    // 1. Installed inside promethios-bridge's own node_modules (full npm install, not npx)
+    path.join(__dirname, '..', '..', 'node_modules', 'electron', 'dist',
+      isWin ? 'electron.exe' : process.platform === 'darwin' ? 'Electron.app/Contents/MacOS/Electron' : 'electron'),
+    // 2. .bin shim (only works if the real binary was downloaded by postinstall)
+    path.join(__dirname, '..', '..', 'node_modules', '.bin', isWin ? 'electron.cmd' : 'electron'),
+    // 3. Global electron install
+    path.join(require('os').homedir(), '.npm', '_npx', '**', 'node_modules', 'electron', 'dist', isWin ? 'electron.exe' : 'electron'),
   ];
 
   for (const candidate of candidates) {
+    // Skip glob-style paths (we can't expand them here)
+    if (candidate.includes('**')) continue;
     try {
-      if (candidate === 'electron') {
-        // Try to resolve globally — throws if not installed
-        require.resolve('electron');
-        electronBin = candidate;
-        break;
-      }
       if (fs.existsSync(candidate)) {
-        electronBin = candidate;
-        break;
+        // Extra check: the .bin shim always exists even without the real binary.
+        // For the .bin shim, also verify the actual dist binary exists.
+        if (candidate.includes('.bin')) {
+          const distBin = path.join(
+            path.dirname(candidate), '..', 'electron', 'dist',
+            isWin ? 'electron.exe' : process.platform === 'darwin'
+              ? 'Electron.app/Contents/MacOS/Electron' : 'electron'
+          );
+          if (!fs.existsSync(distBin)) continue;
+        }
+        return candidate;
       }
-    } catch { /* not found */ }
+    } catch { /* ignore */ }
   }
 
+  return null;
+}
+
+/**
+ * Launch the Promethios overlay Electron window.
+ * Returns the child process if Electron was found and launched, or null otherwise.
+ */
+function launchOverlay({ authToken, apiBase = 'https://api.promethios.ai', threadId = '', dev = false } = {}) {
+  const electronBin = findElectronBinary();
+
   if (!electronBin) {
-    if (dev) console.log('[overlay] Electron not found — overlay will not launch.');
+    if (dev) console.log('[overlay] Electron binary not found on disk — skipping Electron overlay.');
     return null;
   }
 
@@ -70,16 +88,13 @@ function launchOverlay({ authToken, apiBase = 'https://api.promethios.ai', threa
   });
 
   // Attach error handler BEFORE unref() to prevent unhandled 'error' event crashes.
-  // When running via npx, optional deps like electron are not installed, so spawn
-  // may emit ENOENT. We catch it silently — the bridge works fine without the overlay.
   child.on('error', (err) => {
     if (dev) console.log(`[overlay] Spawn error (non-critical): ${err.message}`);
-    // No-op: overlay is optional, bridge continues running normally
   });
 
-  child.unref(); // Don't keep bridge CLI alive waiting for overlay
+  child.unref();
 
-  if (dev) console.log(`[overlay] Launched (pid ${child.pid})`);
+  if (dev) console.log(`[overlay] Launched Electron (pid ${child.pid})`);
 
   return child;
 }