@btraut/browser-bridge 0.12.0 → 0.12.1

package/CHANGELOG.md

@@ -8,6 +8,16 @@ The format is based on "Keep a Changelog", and this project adheres to Semantic
 
 _TBD_
 
+## [0.12.1] - 2026-02-17
+
+### Changed
+
+- Extension popup now shows a compact `Connected` indicator (green/red) instead of the verbose connection diagnostics panel.
+
+### Fixed
+
+- Extension background now preflights Core `/health` before dialing websocket, avoiding noisy `ERR_CONNECTION_REFUSED` extension errors while Core is offline.
+
 ## [0.12.0] - 2026-02-17
 
 ### Changed

package/README.md

@@ -318,7 +318,7 @@ tail -n 80 .context/logs/browser-bridge/mcp-adapter.jsonl
 - CLI: `browser-bridge diagnostics doctor --session-id <id>`
 - Reports extension and debugger status alongside session state.
 - Includes runtime context for caller, Core, and extension endpoints so mismatch causes are visible in one run.
-- Popup health panel shows live connection state (`connecting`, `connected`, `disconnected`, `backoff`), endpoint/source, and latest failure summary.
+- Popup shows a simple `Connected` indicator (`green` when connected, `red` otherwise).
 
 ### End-to-End Connection Troubleshooting Flow
 
@@ -336,17 +336,15 @@ browser-bridge dev info --json
 browser-bridge diagnostics doctor --json
 ```
 
-3. Open extension popup and compare:
-   - `Connection` state
-   - `Endpoint`
-   - `Source`
-   - `Last failure`
+3. Open the extension popup and check `Connected`:
+   - Green dot: extension is currently connected to Core.
+   - Red dot: extension is disconnected or reconnecting.
 
-4. If caller/core/extension endpoints differ:
+4. If caller/core/extension endpoints differ in the diagnostics report:
    - Default mode: remove custom host/port env overrides and retry (`BROWSER_BRIDGE_CORE_HOST`, `BROWSER_BRIDGE_CORE_PORT`).
    - Isolated mode: re-run `browser-bridge dev activate --extension-id <id>` for the intended worktree.
 
-5. If state is `backoff` and failures continue:
+5. If the popup stays red and failures continue:
    - Inspect logs:
 
 ```bash

package/extension/assets/ui.css

@@ -68,111 +68,35 @@ body.bb-page.bb-page--popup {
   padding: 2px;
 }
 
-.bb-health {
+.bb-connection {
   border: 1px solid var(--bb-border-2);
   border-radius: var(--bb-radius-sm);
   background: var(--bb-bg);
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
   padding: 10px 12px;
   margin: 0 0 10px;
-}
-
-.bb-health-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.bb-health-label {
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  color: var(--bb-ink-2);
-  text-transform: uppercase;
-}
-
-.bb-health-state {
-  border: 1px solid var(--bb-border);
-  border-radius: 999px;
-  padding: 2px 8px;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: capitalize;
-  color: var(--bb-ink);
-  background: rgba(0, 0, 0, 0.04);
-}
-
-.bb-health-state[data-state='connected'] {
-  color: #1f6f3f;
-  border-color: rgba(31, 111, 63, 0.35);
-  background: rgba(31, 111, 63, 0.12);
 }
 
-.bb-health-state[data-state='connecting'],
-.bb-health-state[data-state='backoff'] {
-  color: #8a5200;
-  border-color: rgba(138, 82, 0, 0.35);
-  background: rgba(138, 82, 0, 0.12);
-}
-
-.bb-health-state[data-state='disconnected'] {
-  color: #a22b2b;
-  border-color: rgba(162, 43, 43, 0.35);
-  background: rgba(162, 43, 43, 0.12);
-}
-
-.bb-health-grid {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 6px 8px;
-  margin: 0;
-}
-
-.bb-health-grid dt {
-  margin: 0;
-  font-size: 11px;
-  color: var(--bb-ink-2);
-}
-
-.bb-health-grid dd {
-  margin: 0;
-  font-size: 12px;
-  color: var(--bb-ink);
-  overflow-wrap: anywhere;
-}
-
-.bb-health-error {
-  min-height: 14px;
-  margin: 8px 0 0;
-  font-size: 11px;
-  color: #a22b2b;
-}
-
-.bb-health-actions {
-  margin-top: 6px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.bb-health-copy {
-  border: 1px solid var(--bb-border);
-  border-radius: 8px;
-  background: var(--bb-bg);
+.bb-connection-label {
+  font-size: 14px;
+  font-weight: 600;
   color: var(--bb-ink);
-  padding: 5px 8px;
-  font-size: 12px;
-  cursor: pointer;
 }
 
-.bb-health-copy:hover {
-  background: var(--bb-hover);
+.bb-connection-dot {
+  width: 11px;
+  height: 11px;
+  border-radius: 999px;
+  border: 1px solid rgba(162, 43, 43, 0.35);
+  background: #c93939;
 }
 
-.bb-health-copy-status {
-  font-size: 11px;
-  color: var(--bb-ink-2);
+.bb-connection-dot[data-connected='true'] {
+  border-color: rgba(31, 111, 63, 0.4);
+  background: #2b9a52;
 }
 
 .bb-popup-head {

package/extension/dist/background.js

@@ -488,6 +488,8 @@ var ConnectionStateTracker = class {
 var DEFAULT_CORE_PORT = 3210;
 var CORE_PORT_KEY = "corePort";
 var CORE_WS_PATH = "/drive";
+var CORE_HEALTH_PATH = "/health";
+var CORE_HEALTH_TIMEOUT_MS = 1200;
 var DEBUGGER_PROTOCOL_VERSION = "1.3";
 var DEBUGGER_IDLE_TIMEOUT_KEY = "debuggerIdleTimeoutMs";
 var DEFAULT_DEBUGGER_IDLE_TIMEOUT_MS = 15e3;
@@ -1153,6 +1155,7 @@ var getWsEndpoint = async () => {
     url: `ws://${endpoint.host}:${endpoint.port}${CORE_WS_PATH}`
   };
 };
+var getHealthEndpoint = (endpoint) => `http://${endpoint.host}:${endpoint.port}${CORE_HEALTH_PATH}`;
 var DriveSocket = class {
   constructor() {
     this.socket = null;
@@ -1209,6 +1212,16 @@ var DriveSocket = class {
   async connect() {
     const { endpoint, url } = await getWsEndpoint();
     this.connection.setEndpoint(endpoint);
+    const health = await this.checkCoreHealth(endpoint);
+    if (!health.ok) {
+      this.connection.markDisconnected();
+      this.recordConnectionFailure(
+        "core unavailable",
+        new Error(health.detail)
+      );
+      this.scheduleReconnect();
+      return;
+    }
     try {
       const socket2 = new WebSocket(url);
       this.socket = socket2;
@@ -1241,6 +1254,39 @@ var DriveSocket = class {
       this.scheduleReconnect();
     }
   }
+  async checkCoreHealth(endpoint) {
+    const controller = new AbortController();
+    const timeoutId = self.setTimeout(() => {
+      controller.abort();
+    }, CORE_HEALTH_TIMEOUT_MS);
+    try {
+      const response = await fetch(getHealthEndpoint(endpoint), {
+        method: "GET",
+        cache: "no-store",
+        signal: controller.signal
+      });
+      if (!response.ok) {
+        return {
+          ok: false,
+          detail: `health returned HTTP ${response.status}`
+        };
+      }
+      return { ok: true, detail: "ok" };
+    } catch (error) {
+      if (error instanceof DOMException && error.name === "AbortError") {
+        return {
+          ok: false,
+          detail: `health timed out after ${CORE_HEALTH_TIMEOUT_MS}ms`
+        };
+      }
+      return {
+        ok: false,
+        detail: error instanceof Error && error.message.length > 0 ? error.message : "health check failed"
+      };
+    } finally {
+      clearTimeout(timeoutId);
+    }
+  }
   getConnectionStatus() {
     return this.connection.getStatus();
   }