fix: make the browser bridge actually connect (offscreen path + popup status) + e2e verified (#1)

Author: karngyan

packages/extension/src/background.ts

@@ -21,7 +21,7 @@ function ensureOffscreen(): Promise<void> {
     offscreenPromise = (async () => {
       if (!(await chrome.offscreen.hasDocument())) {
         await chrome.offscreen.createDocument({
-          url: "offscreen.html",
+          url: "src/offscreen.html",
           reasons: [chrome.offscreen.Reason.WORKERS],
           justification:
             "Maintain a persistent WebSocket connection to the local reins MCP server.",

packages/extension/src/lib/backoff.test.ts

@@ -9,6 +9,6 @@ describe("nextBackoff", () => {
   });
 
   it("caps at the maximum delay", () => {
-    expect(nextBackoff(20)).toBe(30_000);
+    expect(nextBackoff(20)).toBe(5_000);
   });
 });

packages/extension/src/lib/backoff.ts

@@ -1,4 +1,4 @@
 /** Exponential backoff (ms) for the M1 WS reconnect loop. */
-export function nextBackoff(attempt: number, baseMs = 500, maxMs = 30_000): number {
+export function nextBackoff(attempt: number, baseMs = 500, maxMs = 5_000): number {
   return Math.min(baseMs * 2 ** attempt, maxMs);
 }

packages/extension/src/popup.ts

@@ -1,5 +1,6 @@
 import "./popup.css";
 import { clearPairing, loadPairing, savePairing } from "./lib/pairing.js";
+import { normalizeStatus } from "./lib/status.js";
 
 type Status = "idle" | "connecting" | "connected" | "error";
 
@@ -17,7 +18,13 @@ const STATUS_LABELS: Record<Status, string> = {
   error: "Auth failed",
 };
 
-function setStatus(status: Status, label = STATUS_LABELS[status]): void {
+/** Idle means "not connected": label depends on whether a pairing is saved. */
+function labelFor(status: Status): string {
+  if (status === "idle") return tokenInput.value.trim() ? "Paired" : "Not paired";
+  return STATUS_LABELS[status];
+}
+
+function setStatus(status: Status, label = labelFor(status)): void {
   statusEl.className = `reins__status reins__status--${status}`;
   statusLabel.textContent = label;
 }
@@ -31,19 +38,38 @@ function notifyBackground(type: string): void {
   }
 }
 
+/** Ask the worker for the live connection status; falls back to idle. */
+async function queryStatus(): Promise<Status> {
+  try {
+    const res = (await chrome.runtime.sendMessage({ type: "reins:status" })) as
+      | { status?: unknown }
+      | undefined;
+    return normalizeStatus(res?.status);
+  } catch {
+    return "idle";
+  }
+}
+
 async function refresh(): Promise<void> {
   const pairing = await loadPairing();
   if (pairing) {
     urlInput.value = pairing.url;
     tokenInput.value = pairing.token;
     disconnectBtn.hidden = false;
-    setStatus("idle", "Paired");
+    setStatus(await queryStatus());
   } else {
     disconnectBtn.hidden = true;
     setStatus("idle");
   }
 }
 
+// Live-update the pill when the worker/offscreen reports a status change.
+chrome.runtime.onMessage.addListener((msg: unknown) => {
+  if (!msg || typeof msg !== "object") return;
+  const message = msg as Record<string, unknown>;
+  if (message.type === "reins:status-update") setStatus(normalizeStatus(message.status));
+});
+
 form.addEventListener("submit", async (event) => {
   event.preventDefault();
   const url = urlInput.value.trim();

packages/mcp/src/bridge.ts

@@ -33,7 +33,10 @@ export class BridgeHost implements BridgePort {
   start(): Promise<void> {
     return new Promise((resolve, reject) => {
       const wss = new WebSocketServer({ host: "127.0.0.1", port: this.#requestedPort });
-      wss.on("listening", () => resolve());
+      wss.on("listening", () => {
+        process.stderr.write(`reins-mcp: bridge listening on 127.0.0.1:${this.port}\n`);
+        resolve();
+      });
       wss.on("error", (err) => {
         // Don't retain a server that never bound (e.g. EADDRINUSE) — avoids a leak on retry.
         this.#wss = undefined;
@@ -55,7 +58,9 @@ export class BridgeHost implements BridgePort {
   }
 
   #onConnection(ws: WebSocket, origin: string | undefined): void {
+    process.stderr.write(`reins-mcp: connection from origin=${origin}\n`);
     if (!origin?.startsWith(this.#originPrefix)) {
+      process.stderr.write(`reins-mcp: rejected: origin not allowed (${origin})\n`);
       ws.close(4003, "origin not allowed");
       return;
     }
@@ -68,11 +73,15 @@ export class BridgeHost implements BridgePort {
         if (hello.success && hello.data.token === this.#token) {
           authed = true;
           if (this.#client && this.#client !== ws && this.#client.readyState === WebSocket.OPEN) {
+            process.stderr.write("reins-mcp: client replaced by new connection\n");
             this.#client.close(4002, "replaced by a new connection");
           }
           this.#client = ws;
+          const browser = hello.data.browser;
+          process.stderr.write(`reins-mcp: authed${browser ? ` (browser=${browser})` : ""}\n`);
           ws.send(JSON.stringify(WelcomeFrame.parse({ type: "welcome", server: "reins" })));
         } else {
+          process.stderr.write("reins-mcp: rejected: bad token\n");
           ws.close(4001, "bad token");
         }
         return;
@@ -82,7 +91,8 @@ export class BridgeHost implements BridgePort {
         this.#settle(response.data.id, response.data);
       }
     });
-    ws.on("close", () => {
+    ws.on("close", (code) => {
+      process.stderr.write(`reins-mcp: connection closed (code=${code})\n`);
       if (this.#client === ws) {
         this.#client = undefined;
         // Spec §7: fail fast — don't leave in-flight requests hanging to timeout.