@melaya/runner 1.1.10 → 1.1.12

package/dist/browserBridge.d.ts

@@ -109,6 +109,14 @@ export interface BrowserBridge {
      * The flag is cleared on teardownRun / session teardown.
      */
     setPaused(paused: boolean, sessionId?: string): void;
+    /**
+     * Switch the active tab for an interactive session to the page identified
+     * by `ref` (the opaque string returned by getTabRef). The frame producer
+     * follows the new active page on its next tick.
+     *
+     * Returns true if the tab was found and switched, false otherwise.
+     */
+    switchTabForSession(sessionId: string, ref: string): boolean;
     shutdown(): Promise<void>;
 }
 export declare function startBrowserBridge(opts: {

package/dist/browserBridge.js

@@ -48,6 +48,9 @@ import { runSandboxedScript } from "./codeWorker.js";
 // Palette: cyan #22D3EE primary accent, indigo #7C6FF0 subtle secondary,
 // slate/navy #0F172A base. Less purple than the prior version.
 const MELAYA_BRAND_SCRIPT = `(() => {
+  // Top document ONLY: injecting into sub-frames (e.g. the Google Sign-In
+  // iframe) rendered a stray badge on top of third-party widgets.
+  try { if (window.top !== window.self) return; } catch (e) { return; }
   if (window.__melayaBrand) return; window.__melayaBrand = true;
   const ID = "__melaya_brand";
   const LOGO = "data:image/png;base64,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";
@@ -56,7 +59,7 @@ const MELAYA_BRAND_SCRIPT = `(() => {
     if (document.getElementById(ID + "_border")) return;
     const style = document.createElement("style");
     style.id = ID + "_style";
-    style.textContent = "@keyframes melBrandPulse{0%,100%{box-shadow:inset 0 0 9px 2px rgba(34,211,238,.5),inset 0 0 30px 7px rgba(124,111,240,.18)}50%{box-shadow:inset 0 0 16px 4px rgba(34,211,238,.8),inset 0 0 54px 13px rgba(124,111,240,.32)}}@keyframes melBrandGlow{0%,100%{opacity:.78}50%{opacity:1}}#" + ID + "_border{position:fixed;inset:0;pointer-events:none;z-index:2147483647;border-radius:7px;animation:melBrandPulse 2.6s ease-in-out infinite}#" + ID + "_badge{position:fixed;top:10px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:2147483647;font:600 12px/1 -apple-system,Segoe UI,Roboto,sans-serif;color:#E2E8F0;background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(15,23,42,.82));padding:5px 13px 5px 7px;border-radius:999px;letter-spacing:.2px;border:1px solid rgba(34,211,238,.45);box-shadow:0 0 16px 1px rgba(34,211,238,.4),0 4px 14px rgba(0,0,0,.45);display:flex;align-items:center;gap:8px;backdrop-filter:blur(6px);animation:melBrandGlow 2.6s ease-in-out infinite}#" + ID + "_logo{height:16px;width:auto;display:block;filter:drop-shadow(0 0 4px rgba(34,211,238,.55))}";
+    style.textContent = "@keyframes melBrandPulse{0%,100%{box-shadow:inset 0 0 9px 2px rgba(34,211,238,.5),inset 0 0 30px 7px rgba(124,111,240,.18)}50%{box-shadow:inset 0 0 16px 4px rgba(34,211,238,.8),inset 0 0 54px 13px rgba(124,111,240,.32)}}@keyframes melBrandGlow{0%,100%{opacity:.78}50%{opacity:1}}#" + ID + "_border{position:fixed;inset:0;pointer-events:none;z-index:2147483647;border-radius:7px;animation:melBrandPulse 2.6s ease-in-out infinite}#" + ID + "_badge{position:fixed;top:10px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:2147483647;font-family:-apple-system,Segoe UI,Roboto,sans-serif;font-weight:600;font-size:12px;line-height:1;white-space:nowrap;max-width:calc(100vw - 24px);box-sizing:border-box;color:#E2E8F0;background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(15,23,42,.82));padding:5px 13px 5px 7px;border-radius:999px;letter-spacing:.2px;border:1px solid rgba(34,211,238,.45);box-shadow:0 0 16px 1px rgba(34,211,238,.4),0 4px 14px rgba(0,0,0,.45);display:flex;align-items:center;gap:8px;backdrop-filter:blur(6px);animation:melBrandGlow 2.6s ease-in-out infinite}#" + ID + "_logo{height:16px;width:auto;display:block;filter:drop-shadow(0 0 4px rgba(34,211,238,.55))}@media (max-width:600px){#" + ID + "_badge{font-size:10px;padding:4px 10px 4px 6px;gap:6px;top:6px}#" + ID + "_logo{height:13px}}";
     (document.head || root).appendChild(style);
     const border = document.createElement("div"); border.id = ID + "_border";
     const badge = document.createElement("div"); badge.id = ID + "_badge";
@@ -136,6 +139,21 @@ export async function startBrowserBridge(opts) {
     // Active tab per run: tracks which page is currently active so tab ops
     // and the frame-producer all follow the same page pointer.
     const activePageByRunId = new Map();
+    // The active page for a SESSION (used by the interactive frame producer so the
+    // live mirror follows whichever tab the agent opened/switched to). The agent
+    // drives via a grant-run ATTACHED to the interactive session, so the active
+    // page is tracked under the grant-run's id; resolve it back to the session via
+    // the grant's browserSession claim. Falls back to the newest open tab.
+    function activePageForSession(sessionId) {
+        for (const [runId, pg] of activePageByRunId) {
+            if (pg.isClosed())
+                continue;
+            const r = byRunId.get(runId);
+            if (r && r.spec.grant.browserSession === sessionId)
+                return pg;
+        }
+        return null;
+    }
     // Interactive sessions: launched via launchInteractive(), tracked by the
     // sessionId from the browser:launch socket event. The sessionManager record
     // is stored here as well as in sessions (keyed by sessionId as runId) so
@@ -1026,11 +1044,14 @@ export async function startBrowserBridge(opts) {
     }
     // sessionId -> WatchLease
     const watchLeases = new Map();
-    function postFrame(lease, jpegB64) {
+    function postFrame(lease, jpegB64, tabs) {
         // Never send if the lease has been deactivated concurrently.
         if (!lease.active)
             return;
-        const body = JSON.stringify({ sessionId: lease.sessionId, runId: lease.runId, jpegB64 });
+        const bodyObj = { sessionId: lease.sessionId, runId: lease.runId, jpegB64 };
+        if (tabs !== undefined)
+            bodyObj.tabs = tabs;
+        const body = JSON.stringify(bodyObj);
         const url = lease.framePostUrl;
         try {
             const u = new URL(url);
@@ -1069,13 +1090,15 @@ export async function startBrowserBridge(opts) {
             const isInteractive = interactiveSessions.has(lease.runId) ||
                 (interactiveSessions.has(lease.sessionId) && lease.sessionId === lease.runId);
             if (isInteractive) {
-                // Interactive: grab the first page in the context, or create one.
+                // Interactive: mirror the tab the agent is CURRENTLY driving (active
+                // page for this session), else the newest open tab, else the first.
                 const context = rec.context;
                 if (!context) {
                     lease.active = false;
                     return;
                 }
-                let page = context.pages()[0];
+                const openPages = context.pages().filter((p) => !p.isClosed());
+                let page = activePageForSession(lease.sessionId) ?? openPages[openPages.length - 1] ?? context.pages()[0];
                 if (!page) {
                     try {
                         page = await context.newPage();
@@ -1086,8 +1109,12 @@ export async function startBrowserBridge(opts) {
                     }
                 }
                 // Lease the page under a stable "interactive" ref. leaseTarget is
-                // idempotent (returns existing lease if the ref already exists).
+                // idempotent (returns existing lease if the ref already exists); when the
+                // active tab changed, repoint the existing lease at the new page so the
+                // captured frames follow it.
                 targetLease = sessions.leaseTarget(rec, "interactive", page);
+                if (targetLease.page !== page)
+                    targetLease.page = page;
             }
             else {
                 const reg = byRunId.get(lease.runId);
@@ -1106,11 +1133,46 @@ export async function startBrowserBridge(opts) {
                     return;
                 }
             }
+            // Compute the tab list for this session (interactive sessions only).
+            // Done defensively after the screenshot so a failing title/url read
+            // never blocks frame delivery. Sent only when the list changed.
+            let tabsPayload = undefined;
+            if (isInteractive) {
+                const context = rec.context;
+                if (context) {
+                    const openPages = context.pages().filter((p) => !p.isClosed());
+                    const activePg = activePageForSession(lease.sessionId) ?? openPages[openPages.length - 1] ?? null;
+                    // Build tab descriptors synchronously where possible; fetch titles async.
+                    const tabDescs = openPages.map((p) => ({
+                        ref: getTabRef(p),
+                        title: "",
+                        url: p.url().slice(0, 200),
+                        active: p === activePg,
+                    }));
+                    // Fetch titles best-effort; skip any that reject or time out.
+                    await Promise.all(openPages.map(async (p, i) => {
+                        try {
+                            tabDescs[i].title = (await p.title()).slice(0, 80);
+                        }
+                        catch { /* skip */ }
+                    }));
+                    const tabsJson = JSON.stringify(tabDescs);
+                    if (tabsJson !== lease.lastTabsJson) {
+                        lease.lastTabsJson = tabsJson;
+                        tabsPayload = tabDescs;
+                    }
+                }
+            }
             const { image_b64: jpegB64 } = await takeScreenshot(targetLease);
             const changed = jpegB64 !== lease.lastJpegB64;
             if (changed) {
                 lease.lastJpegB64 = jpegB64;
-                postFrame(lease, jpegB64);
+                postFrame(lease, jpegB64, tabsPayload);
+            }
+            else if (tabsPayload !== undefined) {
+                // Tabs changed but frame did not; send frame anyway so the tab update
+                // is not dropped (the frame body carries the tabs field).
+                postFrame(lease, jpegB64, tabsPayload);
             }
             // Adaptive FPS: 250 ms (4 fps) when changed, 500 ms (2 fps) when
             // the page is static. The cap is 4 fps; do not go lower than 2 fps
@@ -1199,6 +1261,7 @@ export async function startBrowserBridge(opts) {
             active: true,
             timer: null,
             lastJpegB64: "",
+            lastTabsJson: "",
         };
         watchLeases.set(sessionId, lease);
         log(`[watch] frame producer started for session ${sessionId.slice(0, 16)} run=${matchedRunId.slice(0, 10)}`);
@@ -1656,6 +1719,36 @@ export async function startBrowserBridge(opts) {
         }));
         return closed;
     };
+    // switchTabForSession: repoints the active page for an interactive session
+    // so the frame producer + page-event handling follow the new tab.
+    // The caller supplies the opaque tab ref from getTabRef.
+    function switchTabForSession(sessionId, ref) {
+        const rec = interactiveSessions.get(sessionId);
+        if (!rec || rec.state === "closed" || rec.state === "crashed")
+            return false;
+        const context = rec.context;
+        if (!context)
+            return false;
+        const pages = context.pages().filter((p) => !p.isClosed());
+        const target = pages.find((p) => getTabRef(p) === ref);
+        if (!target)
+            return false;
+        // Update the active page for every grant-run attached to this session,
+        // and also force the watch-lease lastTabsJson to "" so the next frame
+        // tick re-broadcasts the updated active flag to the client.
+        for (const [runId, reg] of byRunId) {
+            if (String(reg.spec.grant.browserSession || "") === sessionId) {
+                activePageByRunId.set(runId, target);
+            }
+        }
+        // Reset the tab change sentinel so the next frame pick broadcasts the new state.
+        const wl = watchLeases.get(sessionId);
+        if (wl)
+            wl.lastTabsJson = "";
+        // Bring the tab to front best-effort (headed sessions).
+        target.bringToFront().catch(() => { });
+        return true;
+    }
     return {
         url: `http://127.0.0.1:${port}`,
         port,
@@ -1670,6 +1763,7 @@ export async function startBrowserBridge(opts) {
         setWatchLease,
         killInteractive,
         setPaused,
+        switchTabForSession,
         async shutdown() {
             // Stop all watch-lease producers before closing sessions.
             for (const sid of [...watchLeases.keys()])

package/dist/connection.js

@@ -382,6 +382,26 @@ export async function connect(opts) {
             console.log(chalk.gray(`  [browser-takeover] paused=${paused} sessionId=${sessionId ? sessionId.slice(0, 16) : "(all)"}`));
         }
     });
+    // ── BrowserControlPage tab switch (browser:switch-tab) ───────────────
+    // The server emits browser:switch-tab { sessionId, ref } when the user
+    // clicks a non-active tab in the live-mirror tab strip. The bridge
+    // repoints the active page for that interactive session so the frame
+    // producer and any attached agent ops follow the new tab.
+    socket.on("browser:switch-tab", (payload) => {
+        const sessionId = String(payload?.sessionId || "");
+        const ref = String(payload?.ref || "");
+        if (!sessionId || !ref)
+            return;
+        if (!browserBridge) {
+            if (opts.verbose)
+                console.log(chalk.gray("  [browser-switch-tab] bridge not ready, ignoring"));
+            return;
+        }
+        const switched = browserBridge.switchTabForSession(sessionId, ref);
+        if (opts.verbose) {
+            console.log(chalk.gray(`  [browser-switch-tab] sessionId=${sessionId.slice(0, 16)} ref=${ref} switched=${switched}`));
+        }
+    });
     // ── Heartbeat ──────────────────────────────────────────────────────
     setInterval(() => {
         if (socket.connected)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melaya/runner",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "description": "Run Melaya AI pipelines locally with your own LM Studio or Ollama models",
   "license": "UNLICENSED",
   "private": false,