promethios-overlay 1.0.0

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "promethios-overlay",
+  "version": "1.0.0",
+  "description": "Always-on-top floating chat overlay for Promethios — works across all apps on Windows, Mac, and Linux. Pill mode, watching toggle, ambient context bar, and hotkey support.",
+  "main": "src/main.js",
+  "scripts": {
+    "start": "electron .",
+    "dev": "electron . --dev",
+    "build:win": "electron-builder --win",
+    "build:mac": "electron-builder --mac",
+    "build:linux": "electron-builder --linux"
+  },
+  "keywords": [
+    "promethios",
+    "ai",
+    "overlay",
+    "electron",
+    "always-on-top",
+    "agent",
+    "ambient",
+    "floating"
+  ],
+  "author": "Promethios <hello@promethios.ai>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wesheets/promethios.git",
+    "directory": "promethios-overlay"
+  },
+  "homepage": "https://promethios.ai/local-bridge",
+  "bugs": {
+    "url": "https://github.com/wesheets/promethios/issues"
+  },
+  "files": [
+    "src/",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "electron": "^29.0.0"
+  },
+  "devDependencies": {
+    "electron-builder": "^24.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "build": {
+    "appId": "ai.promethios.overlay",
+    "productName": "Promethios",
+    "files": ["src/**/*"],
+    "win": {
+      "target": "nsis",
+      "icon": "assets/icon.ico"
+    },
+    "mac": {
+      "target": "dmg",
+      "icon": "assets/icon.icns"
+    },
+    "linux": {
+      "target": "AppImage",
+      "icon": "assets/icon.png"
+    }
+  }
+}

package/src/launcher.js

@@ -0,0 +1,75 @@
+/**
+ * launcher.js
+ *
+ * Called by the bridge CLI after successful authentication.
+ * Spawns the Electron overlay window as a detached child process.
+ *
+ * Usage (from bridge CLI):
+ *   const { launchOverlay } = require('promethios-overlay/src/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 alongside this package
+    path.join(__dirname, '..', 'node_modules', '.bin', 'electron'),
+    path.join(__dirname, '..', 'node_modules', '.bin', 'electron.cmd'),
+    // Installed in the bridge CLI's node_modules
+    path.join(__dirname, '..', '..', 'promethios-bridge', 'node_modules', '.bin', 'electron'),
+    // Global electron
+    '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/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/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/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/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>');
+}