promethios-bridge 1.7.7 → 1.7.8

package/package.json

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

package/src/bridge.js

@@ -73,36 +73,84 @@ async function checkForUpdates(currentVersion, log) {
 }
 
 /**
- * Open a URL in the user's default browser.
- * Uses platform-native commands for maximum reliability:
- *   Windows: cmd /c start "" "<url>"
- *   macOS:   open <url>
- *   Linux:   xdg-open <url>
- * Falls back to the `open` npm package if the native command fails.
- * Returns true if the browser was successfully opened, false otherwise.
+ * 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 } = require('child_process');
+  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') {
-      // On Windows, `start` requires an empty title arg before the URL
-      // to prevent issues with URLs containing special characters.
       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;
-      }
-      // Native command failed — try the `open` npm package as fallback
+      if (!err) { resolve(true); return; }
       log('Native browser open failed, trying open package:', err.message);
       try {
         const openModule = require('open');
@@ -236,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>
@@ -251,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');
@@ -313,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);
@@ -348,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>