promethios-bridge 1.7.0 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "promethios-bridge",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "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": {
@@ -9,7 +9,7 @@
   "scripts": {
     "start": "node src/cli.js",
     "dev": "node src/cli.js --dev",
-    "postinstall": "node node_modules/playwright/cli.js install chromium || npx playwright install chromium || true"
+    "postinstall": "node src/postinstall.js"
   },
   "keywords": [
     "promethios",

package/src/bridge.js

@@ -22,14 +22,56 @@ const fetch = require('node-fetch');
 const { executeLocalTool } = require('./executor');
 const { captureContext } = require('./contextCapture');
 
-// Optional: Electron overlay window (gracefully skipped if not installed)
+// Optional: Electron overlay window (bundled in src/overlay — gracefully skipped if Electron not available)
 let launchOverlay = null;
-try { launchOverlay = require('promethios-overlay/src/launcher').launchOverlay; } catch { /* overlay not installed */ }
+try { launchOverlay = require('./overlay/launcher').launchOverlay; } catch { /* overlay launcher not found */ }
 
 const HEARTBEAT_INTERVAL = 30_000; // 30s
 const POLL_INTERVAL = 1_000;       // 1s — poll for pending tool calls
 const CONTEXT_PUSH_INTERVAL = 5_000; // 5s — push ambient context snapshot
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Check npm registry for a newer version (non-blocking, best-effort)
+// ─────────────────────────────────────────────────────────────────────────────
+async function checkForUpdates(currentVersion, log) {
+  try {
+    const res = await fetch('https://registry.npmjs.org/promethios-bridge/latest', {
+      headers: { Accept: 'application/json' },
+      timeout: 5000,
+    });
+    if (!res.ok) return;
+    const data = await res.json();
+    const latestVersion = data.version;
+    if (!latestVersion) return;
+    // Simple semver comparison: split into [major, minor, patch] and compare
+    const toNum = v => v.split('.').map(Number);
+    const [cMaj, cMin, cPat] = toNum(currentVersion);
+    const [lMaj, lMin, lPat] = toNum(latestVersion);
+    const isOutdated =
+      lMaj > cMaj ||
+      (lMaj === cMaj && lMin > cMin) ||
+      (lMaj === cMaj && lMin === cMin && lPat > cPat);
+    if (isOutdated) {
+      console.log('');
+      console.log(chalk.yellow('  ┌─────────────────────────────────────────────────────────┐'));
+      console.log(chalk.yellow('  │  🔄  Update available: v' + currentVersion + ' → v' + latestVersion + ' '.repeat(Math.max(0, 28 - currentVersion.length - latestVersion.length)) + '│'));
+      console.log(chalk.yellow('  │                                                         │'));
+      console.log(chalk.yellow('  │  To update, close this window and re-run the            │'));
+      console.log(chalk.yellow('  │  installer script from Promethios, or run:               │'));
+      console.log(chalk.yellow('  │                                                         │'));
+      console.log(chalk.yellow('  │  ' + chalk.white('npx promethios-bridge@latest --token <your-token>') + '   │'));
+      console.log(chalk.yellow('  │                                                         │'));
+      console.log(chalk.yellow('  │  Your current version will continue to work.            │'));
+      console.log(chalk.yellow('  └─────────────────────────────────────────────────────────┘'));
+      console.log('');
+    } else {
+      log('Version check: up to date (v' + currentVersion + ')');
+    }
+  } catch (err) {
+    log('Version check failed (non-critical):', err.message);
+  }
+}
+
 async function startBridge({ setupToken, apiBase, port, dev }) {
   const log = dev
     ? (...args) => console.log(chalk.gray('  [debug]'), ...args)
@@ -165,6 +207,10 @@ async function startBridge({ setupToken, apiBase, port, dev }) {
     process.exit(1);
   }
 
+  // ── Step 3b: Check for updates (non-blocking) ───────────────────────────
+  const currentVersion = require('../package.json').version;
+  checkForUpdates(currentVersion, log).catch(() => {}); // fire-and-forget
+
   // ── Step 4: Show status and keep alive ───────────────────────────────────
   console.log('');
   console.log(chalk.bold.green('  ✓ Promethios Local Bridge is running'));

package/src/overlay/launcher.js

@@ -0,0 +1,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.
+ *
+ * Usage (from bridge CLI):
+ *   const { launchOverlay } = require('./overlay/launcher');
+ *   launchOverlay({ authToken, apiBase, threadId, dev });
+ */
+
+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).
+ */
+function launchOverlay({ authToken, apiBase = 'https://api.promethios.ai', threadId = '', dev = false } = {}) {
+  // Find electron binary — try local node_modules first, then global
+  let electronBin = null;
+
+  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',
+  ];
+
+  for (const candidate of candidates) {
+    try {
+      if (candidate === 'electron') {
+        // Try to resolve globally
+        require.resolve('electron');
+        electronBin = candidate;
+        break;
+      }
+      if (fs.existsSync(candidate)) {
+        electronBin = candidate;
+        break;
+      }
+    } catch { /* not found */ }
+  }
+
+  if (!electronBin) {
+    if (dev) console.log('[overlay] Electron not found — overlay will not launch. Install with: npm install -g electron');
+    return null;
+  }
+
+  const mainScript = path.join(__dirname, 'main.js');
+
+  const args = [mainScript];
+  if (authToken) { args.push('--token', authToken); }
+  if (apiBase)   { args.push('--api', apiBase); }
+  if (threadId)  { args.push('--thread', threadId); }
+  if (dev)       { args.push('--dev'); }
+
+  const child = spawn(electronBin, args, {
+    detached: true,
+    stdio: 'ignore',
+    env: { ...process.env, ELECTRON_NO_ATTACH_CONSOLE: '1' },
+  });
+
+  child.unref(); // Don't keep bridge CLI alive waiting for overlay
+
+  if (dev) console.log(`[overlay] Launched (pid ${child.pid})`);
+
+  return child;
+}
+
+module.exports = { launchOverlay };

package/src/overlay/main.js

@@ -0,0 +1,192 @@
+/**
+ * promethios-overlay — Electron main process
+ *
+ * Creates an always-on-top floating chat window that works across all apps
+ * on Windows, Mac, and Linux. Launched by the bridge CLI after authentication.
+ *
+ * Launch args (passed from bridge CLI via child_process.spawn):
+ *   --token <authToken>   Bearer token for Promethios API
+ *   --api <apiBase>       API base URL (default: https://api.promethios.ai)
+ *   --thread <threadId>   Optional: open a specific thread on launch
+ *   --dev                 Enable verbose logging
+ */
+
+const { app, BrowserWindow, globalShortcut, ipcMain, screen, Tray, Menu, nativeImage } = require('electron');
+const path = require('path');
+
+// ── Parse launch args ────────────────────────────────────────────────────────
+const args = process.argv.slice(2);
+const getArg = (name) => {
+  const idx = args.indexOf(`--${name}`);
+  return idx !== -1 ? args[idx + 1] : null;
+};
+const AUTH_TOKEN = getArg('token') || '';
+const API_BASE   = getArg('api')   || 'https://api.promethios.ai';
+const THREAD_ID  = getArg('thread') || '';
+const DEV        = args.includes('--dev');
+
+// ── Window state ─────────────────────────────────────────────────────────────
+let overlayWindow = null;
+let tray = null;
+let isExpanded = false;
+
+// Pill dimensions (collapsed)
+const PILL_W = 220;
+const PILL_H = 52;
+
+// Chat dimensions (expanded)
+const CHAT_W = 380;
+const CHAT_H = 560;
+
+// ── App ready ────────────────────────────────────────────────────────────────
+app.whenReady().then(() => {
+  createOverlayWindow();
+  registerHotkey();
+  createTray();
+});
+
+app.on('window-all-closed', () => {
+  // Keep app alive even if window is closed — user can restore via tray
+  if (process.platform !== 'darwin') {
+    // On Windows/Linux, keep running in tray
+  }
+});
+
+app.on('will-quit', () => {
+  globalShortcut.unregisterAll();
+});
+
+// ── Create the overlay window ────────────────────────────────────────────────
+function createOverlayWindow() {
+  const { width: screenW, height: screenH } = screen.getPrimaryDisplay().workAreaSize;
+
+  overlayWindow = new BrowserWindow({
+    width: PILL_W,
+    height: PILL_H,
+    x: screenW - PILL_W - 24,
+    y: screenH - PILL_H - 24,
+    frame: false,
+    transparent: true,
+    alwaysOnTop: true,
+    skipTaskbar: true,
+    resizable: false,
+    movable: true,
+    hasShadow: true,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      preload: path.join(__dirname, 'preload.js'),
+    },
+  });
+
+  // Always on top — level 'floating' keeps it above most apps including full-screen
+  overlayWindow.setAlwaysOnTop(true, 'floating');
+  overlayWindow.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
+
+  overlayWindow.loadFile(path.join(__dirname, 'renderer', 'index.html'));
+
+  // Pass config to renderer once DOM is ready
+  overlayWindow.webContents.on('did-finish-load', () => {
+    overlayWindow.webContents.send('config', {
+      authToken: AUTH_TOKEN,
+      apiBase: API_BASE,
+      threadId: THREAD_ID,
+      dev: DEV,
+    });
+  });
+
+  if (DEV) {
+    overlayWindow.webContents.openDevTools({ mode: 'detach' });
+  }
+}
+
+// ── Toggle between pill and expanded chat ────────────────────────────────────
+function toggleExpanded(expand) {
+  if (expand === undefined) expand = !isExpanded;
+  isExpanded = expand;
+
+  const { width: screenW, height: screenH } = screen.getPrimaryDisplay().workAreaSize;
+
+  if (isExpanded) {
+    const x = screenW - CHAT_W - 24;
+    const y = screenH - CHAT_H - 24;
+    overlayWindow.setBounds({ x, y, width: CHAT_W, height: CHAT_H }, true);
+    overlayWindow.webContents.send('expand', true);
+  } else {
+    const x = screenW - PILL_W - 24;
+    const y = screenH - PILL_H - 24;
+    overlayWindow.setBounds({ x, y, width: PILL_W, height: PILL_H }, true);
+    overlayWindow.webContents.send('expand', false);
+  }
+}
+
+// ── IPC from renderer ────────────────────────────────────────────────────────
+ipcMain.on('toggle-expand', (_, expand) => toggleExpanded(expand));
+
+ipcMain.on('set-watching', (_, watching) => {
+  // Relay to renderer (already handled there) — also log for debug
+  if (DEV) console.log('[overlay] watching:', watching);
+});
+
+ipcMain.on('close-overlay', () => {
+  overlayWindow.hide();
+});
+
+ipcMain.on('show-overlay', () => {
+  overlayWindow.show();
+});
+
+// ── Global hotkey: Ctrl+Shift+P (Win/Linux) or Cmd+Shift+P (Mac) ─────────────
+function registerHotkey() {
+  const hotkey = process.platform === 'darwin' ? 'Command+Shift+P' : 'Control+Shift+P';
+  const registered = globalShortcut.register(hotkey, () => {
+    if (overlayWindow.isVisible()) {
+      toggleExpanded();
+    } else {
+      overlayWindow.show();
+      toggleExpanded(true);
+    }
+  });
+  if (DEV) console.log(`[overlay] Hotkey ${hotkey} registered:`, registered);
+}
+
+// ── System tray icon ─────────────────────────────────────────────────────────
+function createTray() {
+  // Use a simple 16x16 template image (will be replaced with real icon in production)
+  const iconSize = process.platform === 'darwin' ? 16 : 32;
+  const trayIcon = nativeImage.createEmpty();
+  tray = new Tray(trayIcon);
+
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: 'Show Promethios',
+      click: () => {
+        overlayWindow.show();
+        toggleExpanded(true);
+      },
+    },
+    {
+      label: 'Hide',
+      click: () => overlayWindow.hide(),
+    },
+    { type: 'separator' },
+    {
+      label: 'Quit',
+      click: () => {
+        app.quit();
+      },
+    },
+  ]);
+
+  tray.setToolTip('Promethios AI Overlay');
+  tray.setContextMenu(contextMenu);
+
+  tray.on('click', () => {
+    if (overlayWindow.isVisible()) {
+      toggleExpanded();
+    } else {
+      overlayWindow.show();
+      toggleExpanded(true);
+    }
+  });
+}

package/src/overlay/preload.js

@@ -0,0 +1,25 @@
+/**
+ * preload.js — Electron contextBridge
+ *
+ * Exposes a safe, limited API to the renderer process.
+ * No direct Node.js access in the renderer — all IPC goes through here.
+ */
+
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('promethios', {
+  // Receive config from main process (authToken, apiBase, threadId)
+  onConfig: (cb) => ipcRenderer.on('config', (_, data) => cb(data)),
+
+  // Receive expand/collapse state changes from main process
+  onExpand: (cb) => ipcRenderer.on('expand', (_, expanded) => cb(expanded)),
+
+  // Tell main process to toggle expand/collapse
+  toggleExpand: (expand) => ipcRenderer.send('toggle-expand', expand),
+
+  // Tell main process about watching state change
+  setWatching: (watching) => ipcRenderer.send('set-watching', watching),
+
+  // Close the overlay window
+  close: () => ipcRenderer.send('close-overlay'),
+});

package/src/overlay/renderer/index.html

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Promethios</title>
+  <style>
+    /* ── Reset ─────────────────────────────────────────────────────────────── */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: 100%; height: 100%; overflow: hidden; background: transparent; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+
+    /* ── Pill (collapsed state) ─────────────────────────────────────────────── */
+    #pill {
+      position: fixed; bottom: 0; right: 0;
+      width: 220px; height: 52px;
+      background: rgba(15, 15, 20, 0.92);
+      backdrop-filter: blur(16px);
+      border: 1px solid rgba(139, 92, 246, 0.4);
+      border-radius: 26px;
+      display: flex; align-items: center; gap: 10px;
+      padding: 0 14px;
+      cursor: pointer;
+      -webkit-app-region: drag;
+      box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(139,92,246,0.15);
+      transition: border-color 0.2s, box-shadow 0.2s;
+      user-select: none;
+    }
+    #pill:hover {
+      border-color: rgba(139, 92, 246, 0.7);
+      box-shadow: 0 4px 32px rgba(139,92,246,0.25), 0 0 0 1px rgba(139,92,246,0.3);
+    }
+
+    /* Logo mark */
+    .pill-logo {
+      width: 28px; height: 28px; border-radius: 8px;
+      background: linear-gradient(135deg, #7c3aed, #a855f7);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 14px; flex-shrink: 0;
+      -webkit-app-region: no-drag;
+    }
+
+    .pill-label {
+      flex: 1;
+      font-size: 13px; font-weight: 600;
+      color: #e2e8f0;
+      letter-spacing: 0.01em;
+      -webkit-app-region: no-drag;
+    }
+
+    /* Status dot — green=watching, yellow=paused */
+    #status-dot {
+      width: 8px; height: 8px; border-radius: 50%;
+      background: #22c55e;
+      flex-shrink: 0;
+      cursor: pointer;
+      -webkit-app-region: no-drag;
+      transition: background 0.3s;
+      position: relative;
+    }
+    #status-dot.paused { background: #eab308; }
+    #status-dot::after {
+      content: attr(data-tooltip);
+      position: absolute; bottom: 14px; right: 0;
+      background: rgba(15,15,20,0.95); color: #e2e8f0;
+      font-size: 11px; padding: 3px 8px; border-radius: 4px;
+      white-space: nowrap; pointer-events: none;
+      opacity: 0; transition: opacity 0.15s;
+    }
+    #status-dot:hover::after { opacity: 1; }
+
+    /* ── Chat window (expanded state) ───────────────────────────────────────── */
+    #chat {
+      display: none;
+      position: fixed; bottom: 0; right: 0;
+      width: 380px; height: 560px;
+      background: rgba(10, 10, 16, 0.96);
+      backdrop-filter: blur(20px);
+      border: 1px solid rgba(139, 92, 246, 0.35);
+      border-radius: 16px;
+      flex-direction: column;
+      overflow: hidden;
+      box-shadow: 0 8px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(139,92,246,0.1);
+    }
+    #chat.visible { display: flex; }
+
+    /* Header */
+    .chat-header {
+      display: flex; align-items: center; gap: 10px;
+      padding: 12px 14px;
+      background: rgba(139, 92, 246, 0.08);
+      border-bottom: 1px solid rgba(139, 92, 246, 0.2);
+      -webkit-app-region: drag;
+      flex-shrink: 0;
+    }
+    .chat-header .logo {
+      width: 26px; height: 26px; border-radius: 7px;
+      background: linear-gradient(135deg, #7c3aed, #a855f7);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 13px; flex-shrink: 0;
+      -webkit-app-region: no-drag;
+    }
+    .chat-header .title {
+      flex: 1; font-size: 13px; font-weight: 600; color: #e2e8f0;
+      -webkit-app-region: no-drag;
+    }
+    .header-actions {
+      display: flex; align-items: center; gap: 8px;
+      -webkit-app-region: no-drag;
+    }
+    .header-btn {
+      width: 26px; height: 26px; border-radius: 6px;
+      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
+      color: #94a3b8; font-size: 12px;
+      display: flex; align-items: center; justify-content: center;
+      cursor: pointer; transition: background 0.15s, color 0.15s;
+    }
+    .header-btn:hover { background: rgba(255,255,255,0.12); color: #e2e8f0; }
+
+    /* Watching toggle in header */
+    #watching-toggle {
+      display: flex; align-items: center; gap: 5px;
+      font-size: 11px; color: #94a3b8; cursor: pointer;
+      padding: 3px 8px; border-radius: 12px;
+      background: rgba(255,255,255,0.05);
+      border: 1px solid rgba(255,255,255,0.08);
+      transition: background 0.15s;
+      -webkit-app-region: no-drag;
+    }
+    #watching-toggle:hover { background: rgba(255,255,255,0.1); }
+    #watching-toggle .dot {
+      width: 6px; height: 6px; border-radius: 50%;
+      background: #22c55e; transition: background 0.3s;
+    }
+    #watching-toggle.paused .dot { background: #eab308; }
+    #watching-toggle.paused .watch-label::after { content: 'Paused'; }
+    #watching-toggle:not(.paused) .watch-label::after { content: 'Watching'; }
+
+    /* Ambient context bar */
+    #context-bar {
+      padding: 7px 14px;
+      background: rgba(139, 92, 246, 0.05);
+      border-bottom: 1px solid rgba(139, 92, 246, 0.12);
+      font-size: 11px; color: #7c6fa0;
+      display: flex; align-items: center; gap: 6px;
+      flex-shrink: 0; min-height: 30px;
+    }
+    #context-bar .ctx-icon { font-size: 12px; }
+    #context-bar .ctx-text {
+      flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+    #context-bar.hidden { display: none; }
+
+    /* Messages area */
+    #messages {
+      flex: 1; overflow-y: auto; padding: 12px 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: rgba(139,92,246,0.3); border-radius: 2px; }
+
+    .msg { display: flex; flex-direction: column; gap: 2px; max-width: 88%; }
+    .msg.user { align-self: flex-end; align-items: flex-end; }
+    .msg.agent { align-self: flex-start; align-items: flex-start; }
+
+    .msg-bubble {
+      padding: 8px 12px; border-radius: 12px;
+      font-size: 13px; line-height: 1.5; color: #e2e8f0;
+      word-break: break-word;
+    }
+    .msg.user .msg-bubble {
+      background: linear-gradient(135deg, #7c3aed, #6d28d9);
+      border-bottom-right-radius: 4px;
+    }
+    .msg.agent .msg-bubble {
+      background: rgba(255,255,255,0.07);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-bottom-left-radius: 4px;
+    }
+    .msg-time { font-size: 10px; color: #4b5563; }
+
+    /* Typing indicator */
+    #typing {
+      display: none; align-self: flex-start;
+      padding: 8px 14px; background: rgba(255,255,255,0.07);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 12px; border-bottom-left-radius: 4px;
+    }
+    #typing.visible { display: flex; gap: 4px; align-items: center; }
+    .dot-pulse { width: 6px; height: 6px; border-radius: 50%; background: #7c3aed; animation: pulse 1.2s infinite; }
+    .dot-pulse:nth-child(2) { animation-delay: 0.2s; }
+    .dot-pulse:nth-child(3) { animation-delay: 0.4s; }
+    @keyframes pulse { 0%,80%,100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
+
+    /* Input area */
+    .chat-input-area {
+      padding: 10px 12px;
+      border-top: 1px solid rgba(255,255,255,0.07);
+      display: flex; align-items: flex-end; gap: 8px;
+      flex-shrink: 0;
+      -webkit-app-region: no-drag;
+    }
+    #msg-input {
+      flex: 1; background: rgba(255,255,255,0.06);
+      border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
+      color: #e2e8f0; font-size: 13px; padding: 8px 12px;
+      resize: none; outline: none; max-height: 100px;
+      font-family: inherit; line-height: 1.4;
+      transition: border-color 0.15s;
+    }
+    #msg-input::placeholder { color: #4b5563; }
+    #msg-input:focus { border-color: rgba(139,92,246,0.5); }
+
+    #send-btn {
+      width: 34px; height: 34px; border-radius: 9px;
+      background: linear-gradient(135deg, #7c3aed, #6d28d9);
+      border: none; cursor: pointer; color: white; font-size: 14px;
+      display: flex; align-items: center; justify-content: center;
+      transition: opacity 0.15s, transform 0.1s; flex-shrink: 0;
+    }
+    #send-btn:hover { opacity: 0.85; }
+    #send-btn:active { transform: scale(0.95); }
+    #send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+    /* Empty state */
+    #empty-state {
+      flex: 1; display: flex; flex-direction: column;
+      align-items: center; justify-content: center; gap: 8px;
+      color: #4b5563; text-align: center; padding: 20px;
+    }
+    #empty-state .empty-icon { font-size: 32px; }
+    #empty-state .empty-title { font-size: 14px; font-weight: 600; color: #6b7280; }
+    #empty-state .empty-sub { font-size: 12px; line-height: 1.5; }
+  </style>
+</head>
+<body>
+
+  <!-- ── Pill (collapsed) ──────────────────────────────────────────────────── -->
+  <div id="pill">
+    <div class="pill-logo">⬡</div>
+    <span class="pill-label">Promethios</span>
+    <div id="status-dot" data-tooltip="Watching — click to pause"></div>
+  </div>
+
+  <!-- ── Chat window (expanded) ────────────────────────────────────────────── -->
+  <div id="chat">
+
+    <!-- Header -->
+    <div class="chat-header">
+      <div class="logo">⬡</div>
+      <span class="title">Promethios</span>
+      <div class="header-actions">
+        <!-- Watching toggle -->
+        <div id="watching-toggle" title="Toggle context watching">
+          <div class="dot"></div>
+          <span class="watch-label"></span>
+        </div>
+        <!-- Collapse to pill -->
+        <div class="header-btn" id="collapse-btn" title="Collapse">╌</div>
+      </div>
+    </div>
+
+    <!-- Ambient context bar -->
+    <div id="context-bar" class="hidden">
+      <span class="ctx-icon">⚡</span>
+      <span class="ctx-text" id="ctx-text">Watching your screen...</span>
+    </div>
+
+    <!-- Messages -->
+    <div id="messages">
+      <div id="empty-state">
+        <div class="empty-icon">🤖</div>
+        <div class="empty-title">Promethios is ready</div>
+        <div class="empty-sub">Ask anything — I can see what you're working on and help without you switching tabs.</div>
+      </div>
+    </div>
+
+    <!-- Typing indicator -->
+    <div id="typing">
+      <div class="dot-pulse"></div>
+      <div class="dot-pulse"></div>
+      <div class="dot-pulse"></div>
+    </div>
+
+    <!-- Input -->
+    <div class="chat-input-area">
+      <textarea id="msg-input" rows="1" placeholder="Ask anything..."></textarea>
+      <button id="send-btn">↑</button>
+    </div>
+
+  </div>
+
+  <script src="overlay.js"></script>
+</body>
+</html>

package/src/overlay/renderer/overlay.js

@@ -0,0 +1,311 @@
+/**
+ * overlay.js — Renderer process logic
+ *
+ * Handles:
+ * - Config injection from main process (authToken, apiBase, threadId)
+ * - Pill ↔ chat expand/collapse
+ * - Watching toggle (green/yellow dot)
+ * - Ambient context display in the context bar
+ * - Chat message sending via Promethios API
+ * - Streaming response rendering
+ */
+
+// ── State ────────────────────────────────────────────────────────────────────
+let config = { authToken: '', apiBase: 'https://api.promethios.ai', threadId: '', dev: false };
+let isExpanded = false;
+let isWatching = true;
+let messages = [];
+let isStreaming = false;
+let contextPollTimer = null;
+
+// ── DOM refs ─────────────────────────────────────────────────────────────────
+const pill           = document.getElementById('pill');
+const chat           = document.getElementById('chat');
+const statusDot      = document.getElementById('status-dot');
+const watchingToggle = document.getElementById('watching-toggle');
+const collapseBtn    = document.getElementById('collapse-btn');
+const contextBar     = document.getElementById('context-bar');
+const ctxText        = document.getElementById('ctx-text');
+const messagesEl     = document.getElementById('messages');
+const emptyState     = document.getElementById('empty-state');
+const typingEl       = document.getElementById('typing');
+const msgInput       = document.getElementById('msg-input');
+const sendBtn        = document.getElementById('send-btn');
+
+// ── Receive config from main process ─────────────────────────────────────────
+window.promethios.onConfig((data) => {
+  config = { ...config, ...data };
+  if (config.dev) console.log('[overlay] Config received:', config);
+  startContextPoll();
+});
+
+// ── Receive expand/collapse from main process ─────────────────────────────────
+window.promethios.onExpand((expanded) => {
+  setExpanded(expanded);
+});
+
+// ── Pill click → expand ───────────────────────────────────────────────────────
+pill.addEventListener('click', (e) => {
+  if (e.target === statusDot) return; // handled separately
+  window.promethios.toggleExpand(true);
+});
+
+// ── Status dot click → toggle watching ───────────────────────────────────────
+statusDot.addEventListener('click', (e) => {
+  e.stopPropagation();
+  toggleWatching();
+});
+
+watchingToggle.addEventListener('click', () => {
+  toggleWatching();
+});
+
+// ── Collapse button ───────────────────────────────────────────────────────────
+collapseBtn.addEventListener('click', () => {
+  window.promethios.toggleExpand(false);
+});
+
+// ── Send message ──────────────────────────────────────────────────────────────
+sendBtn.addEventListener('click', sendMessage);
+msgInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    sendMessage();
+  }
+});
+
+// Auto-resize textarea
+msgInput.addEventListener('input', () => {
+  msgInput.style.height = 'auto';
+  msgInput.style.height = Math.min(msgInput.scrollHeight, 100) + 'px';
+});
+
+// ── Expand / collapse ─────────────────────────────────────────────────────────
+function setExpanded(expanded) {
+  isExpanded = expanded;
+  if (expanded) {
+    pill.style.display = 'none';
+    chat.classList.add('visible');
+    msgInput.focus();
+  } else {
+    pill.style.display = 'flex';
+    chat.classList.remove('visible');
+  }
+}
+
+// ── Watching toggle ───────────────────────────────────────────────────────────
+function toggleWatching() {
+  isWatching = !isWatching;
+
+  // Update pill dot
+  statusDot.classList.toggle('paused', !isWatching);
+  statusDot.setAttribute('data-tooltip', isWatching
+    ? 'Watching — click to pause'
+    : 'Paused — click to resume watching');
+
+  // Update header toggle
+  watchingToggle.classList.toggle('paused', !isWatching);
+
+  // Hide/show context bar
+  if (!isWatching) {
+    contextBar.classList.add('hidden');
+    ctxText.textContent = '';
+  }
+
+  // Notify main process
+  window.promethios.setWatching(isWatching);
+
+  // Tell the API to pause/resume context capture
+  if (config.authToken) {
+    fetch(`${config.apiBase}/api/local-bridge/context/watching`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${config.authToken}`, 'Content-Type': 'application/json' },
+      body: JSON.stringify({ watching: isWatching }),
+    }).catch(() => {});
+  }
+}
+
+// ── Context polling ───────────────────────────────────────────────────────────
+function startContextPoll() {
+  if (contextPollTimer) clearInterval(contextPollTimer);
+  contextPollTimer = setInterval(fetchContext, 5000);
+  fetchContext(); // immediate first fetch
+}
+
+async function fetchContext() {
+  if (!isWatching || !config.authToken) return;
+  try {
+    const res = await fetch(`${config.apiBase}/api/local-bridge/context`, {
+      headers: { Authorization: `Bearer ${config.authToken}` },
+    });
+    if (!res.ok) return;
+    const ctx = await res.json();
+    updateContextBar(ctx);
+  } catch { /* ignore */ }
+}
+
+function updateContextBar(ctx) {
+  if (!ctx || (!ctx.active_app && !ctx.active_url)) {
+    contextBar.classList.add('hidden');
+    return;
+  }
+  contextBar.classList.remove('hidden');
+
+  let label = '';
+  if (ctx.active_url) {
+    try {
+      const url = new URL(ctx.active_url);
+      label = url.hostname.replace('www.', '');
+      if (ctx.active_window?.title) {
+        const title = ctx.active_window.title.replace(/ [-–|].*$/, '').trim();
+        if (title && title.length < 50) label = `${title} · ${label}`;
+      }
+    } catch {
+      label = ctx.active_url.slice(0, 60);
+    }
+  } else if (ctx.active_app) {
+    label = ctx.active_app;
+    if (ctx.active_window?.title) {
+      const title = ctx.active_window.title.replace(/ [-–|].*$/, '').trim();
+      if (title && title.length < 50 && title !== ctx.active_app) label = `${title} · ${ctx.active_app}`;
+    }
+  }
+
+  ctxText.textContent = label;
+}
+
+// ── Send message ──────────────────────────────────────────────────────────────
+async function sendMessage() {
+  const text = msgInput.value.trim();
+  if (!text || isStreaming) return;
+  if (!config.authToken) {
+    appendMessage('agent', 'Not connected. Please restart the bridge with a valid token.');
+    return;
+  }
+
+  // Clear input
+  msgInput.value = '';
+  msgInput.style.height = 'auto';
+
+  // Add user message to UI
+  appendMessage('user', text);
+  hideEmptyState();
+
+  // Show typing indicator
+  setStreaming(true);
+
+  try {
+    // Use the Promethios chat/stream API
+    // If we have a threadId, send to that thread; otherwise create a new one
+    const endpoint = config.threadId
+      ? `${config.apiBase}/api/chat/stream`
+      : `${config.apiBase}/api/chat/stream`;
+
+    const body = {
+      message: text,
+      threadId: config.threadId || null,
+      source: 'overlay',
+      overlayMode: true,
+    };
+
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${config.authToken}`,
+        'Content-Type': 'application/json',
+        Accept: 'text/event-stream',
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!res.ok) {
+      const err = await res.text();
+      appendMessage('agent', `Error: ${res.status} — ${err.slice(0, 200)}`);
+      setStreaming(false);
+      return;
+    }
+
+    // Stream the response
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let agentMsgEl = null;
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop(); // keep incomplete line
+
+      for (const line of lines) {
+        if (!line.startsWith('data: ')) continue;
+        const data = line.slice(6).trim();
+        if (data === '[DONE]') continue;
+        try {
+          const parsed = JSON.parse(data);
+          const delta = parsed.choices?.[0]?.delta?.content || parsed.delta?.text || parsed.text || '';
+          if (delta) {
+            if (!agentMsgEl) {
+              agentMsgEl = appendMessage('agent', '', true);
+            }
+            agentMsgEl.querySelector('.msg-bubble').textContent += delta;
+            scrollToBottom();
+          }
+          // Capture threadId if returned
+          if (parsed.threadId && !config.threadId) {
+            config.threadId = parsed.threadId;
+          }
+        } catch { /* non-JSON line, skip */ }
+      }
+    }
+
+    if (!agentMsgEl) {
+      appendMessage('agent', '(No response)');
+    }
+
+  } catch (err) {
+    appendMessage('agent', `Connection error: ${err.message}`);
+  }
+
+  setStreaming(false);
+}
+
+// ── UI helpers ────────────────────────────────────────────────────────────────
+function appendMessage(role, text, returnEl = false) {
+  const now = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const div = document.createElement('div');
+  div.className = `msg ${role}`;
+  div.innerHTML = `
+    <div class="msg-bubble">${escapeHtml(text)}</div>
+    <span class="msg-time">${now}</span>
+  `;
+  messagesEl.appendChild(div);
+  scrollToBottom();
+  if (returnEl) return div;
+}
+
+function hideEmptyState() {
+  if (emptyState) emptyState.style.display = 'none';
+}
+
+function setStreaming(streaming) {
+  isStreaming = streaming;
+  typingEl.classList.toggle('visible', streaming);
+  sendBtn.disabled = streaming;
+  scrollToBottom();
+}
+
+function scrollToBottom() {
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/\n/g, '<br>');
+}

package/src/postinstall.js

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+/**
+ * Promethios Bridge — Post-Install Script
+ * Silently installs Electron and Playwright Chromium after the main package installs.
+ * Both are optional — the bridge works without them, but the overlay and browser tools
+ * require them. We install in the background so the user doesn't have to do anything.
+ */
+
+const { execSync, spawn } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+const PKG_DIR = path.resolve(__dirname, '..');
+
+function log(msg) {
+  process.stdout.write(`\x1b[36m[Promethios]\x1b[0m ${msg}\n`);
+}
+
+function installElectron() {
+  try {
+    // Check if electron is already available
+    require.resolve('electron');
+    log('Electron already installed — overlay ready.');
+    return;
+  } catch (_) {
+    // Not installed yet — install it
+  }
+
+  log('Installing Electron for the floating overlay (this may take a moment)...');
+  try {
+    execSync('npm install --no-save electron@^29.0.0', {
+      cwd: PKG_DIR,
+      stdio: 'pipe',
+      timeout: 120000
+    });
+    log('Electron installed — floating overlay is ready.');
+  } catch (err) {
+    // Non-fatal — bridge works without overlay
+    log('Note: Electron install skipped (overlay will be unavailable). Run `npm install electron` in the bridge directory to enable it.');
+  }
+}
+
+function installPlaywright() {
+  try {
+    const playwrightCli = path.join(PKG_DIR, 'node_modules', 'playwright', 'cli.js');
+    if (fs.existsSync(playwrightCli)) {
+      log('Installing Playwright Chromium for browser tools...');
+      execSync(`node "${playwrightCli}" install chromium`, {
+        cwd: PKG_DIR,
+        stdio: 'pipe',
+        timeout: 180000
+      });
+      log('Playwright Chromium installed — browser tools ready.');
+    }
+  } catch (_) {
+    // Non-fatal
+  }
+}
+
+// Run installs
+installElectron();
+installPlaywright();