@btraut/browser-bridge 0.11.0 → 0.12.0

package/extension/assets/ui.css

@@ -36,7 +36,7 @@ body.bb-page {
 body.bb-page.bb-page--popup {
   height: auto;
   padding: 10px 10px 12px;
-  min-width: 260px;
+  min-width: 300px;
   background: var(--bb-surface);
 }
 
@@ -68,6 +68,113 @@ body.bb-page.bb-page--popup {
   padding: 2px;
 }
 
+.bb-health {
+  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);
+  color: var(--bb-ink);
+  padding: 5px 8px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.bb-health-copy:hover {
+  background: var(--bb-hover);
+}
+
+.bb-health-copy-status {
+  font-size: 11px;
+  color: var(--bb-ink-2);
+}
+
 .bb-popup-head {
   display: flex;
   align-items: center;

package/extension/dist/background.js

@@ -410,6 +410,80 @@ var PermissionPromptController = class {
   }
 };
 
+// packages/extension/src/connection-state.ts
+var toIso = (ms) => new Date(ms).toISOString();
+var ConnectionStateTracker = class {
+  constructor(now = Date.now, failureLogThrottleMs = 15e3) {
+    this.now = now;
+    this.failureLogThrottleMs = failureLogThrottleMs;
+    this.state = "disconnected";
+    this.consecutiveFailures = 0;
+    this.lastFailureLogAt = 0;
+    this.suppressedFailureLogs = 0;
+  }
+  setEndpoint(endpoint) {
+    this.endpoint = endpoint;
+  }
+  markConnecting() {
+    this.state = "connecting";
+    this.reconnectDelayMs = void 0;
+    this.retryAt = void 0;
+  }
+  markConnected() {
+    this.state = "connected";
+    this.lastConnectedAt = toIso(this.now());
+    this.reconnectDelayMs = void 0;
+    this.retryAt = void 0;
+    this.consecutiveFailures = 0;
+  }
+  markDisconnected() {
+    this.state = "disconnected";
+    this.reconnectDelayMs = void 0;
+    this.retryAt = void 0;
+    this.lastDisconnectedAt = toIso(this.now());
+  }
+  markBackoff(delayMs2) {
+    this.state = "backoff";
+    this.reconnectDelayMs = delayMs2;
+    this.retryAt = toIso(this.now() + Math.max(0, delayMs2));
+  }
+  recordFailure(message) {
+    this.lastErrorAt = toIso(this.now());
+    this.lastErrorMessage = message;
+    this.consecutiveFailures += 1;
+  }
+  consumeFailureLogBudget() {
+    const now = this.now();
+    if (this.lastFailureLogAt === 0 || now - this.lastFailureLogAt >= this.failureLogThrottleMs) {
+      const suppressedCount = this.suppressedFailureLogs;
+      this.suppressedFailureLogs = 0;
+      this.lastFailureLogAt = now;
+      return { shouldLog: true, suppressedCount };
+    }
+    this.suppressedFailureLogs += 1;
+    return { shouldLog: false, suppressedCount: this.suppressedFailureLogs };
+  }
+  flushSuppressedFailureLogs() {
+    const count = this.suppressedFailureLogs;
+    this.suppressedFailureLogs = 0;
+    return count;
+  }
+  getStatus() {
+    return {
+      state: this.state,
+      endpoint: this.endpoint,
+      ws_url: this.endpoint ? `ws://${this.endpoint.host}:${this.endpoint.port}/drive` : void 0,
+      reconnect_delay_ms: this.reconnectDelayMs,
+      retry_at: this.retryAt,
+      last_connected_at: this.lastConnectedAt,
+      last_disconnected_at: this.lastDisconnectedAt,
+      last_error_at: this.lastErrorAt,
+      last_error_message: this.lastErrorMessage,
+      consecutive_failures: this.consecutiveFailures
+    };
+  }
+};
+
 // packages/extension/src/background.ts
 var DEFAULT_CORE_PORT = 3210;
 var CORE_PORT_KEY = "corePort";
@@ -423,13 +497,10 @@ var HISTORY_DISPATCH_TIMEOUT_MS = 2e3;
 var HISTORY_NAVIGATION_SIGNAL_TIMEOUT_MS = 8e3;
 var HISTORY_POST_NAV_DOM_GRACE_TIMEOUT_MS = 2e3;
 var AGENT_TAB_ID_KEY = "agentTabId";
-var AGENT_TAB_GROUP_TITLE = "\u{1F309} Browser Bridge";
-var AGENT_TAB_FAVICON_ASSET_PATH = "assets/icons/icon-32.png";
+var AGENT_TAB_GROUP_TITLE = "Browser Bridge";
+var AGENT_TAB_BOOTSTRAP_PATH = "agent-tab.html";
 var getAgentTabBootstrapUrl = () => {
-  const faviconUrl = typeof chrome.runtime?.getURL === "function" ? chrome.runtime.getURL(AGENT_TAB_FAVICON_ASSET_PATH) : AGENT_TAB_FAVICON_ASSET_PATH;
-  return `data:text/html;charset=UTF-8,${encodeURIComponent(
-    `<!doctype html><html><head><meta charset="utf-8"><title>${AGENT_TAB_GROUP_TITLE}</title><link rel="icon" type="image/png" href="${faviconUrl}"></head><body></body></html>`
-  )}`;
+  return typeof chrome.runtime?.getURL === "function" ? chrome.runtime.getURL(AGENT_TAB_BOOTSTRAP_PATH) : AGENT_TAB_BOOTSTRAP_PATH;
 };
 var nowIso = () => (/* @__PURE__ */ new Date()).toISOString();
 var makeEventId = /* @__PURE__ */ (() => {
@@ -601,24 +672,36 @@ var renderDataUrlToFormat = async (dataUrl, format, quality) => {
     bitmap.close();
   }
 };
-var readCorePort = async () => {
+var readCoreEndpointConfig = async () => {
   return await new Promise((resolve) => {
     chrome.storage.local.get(
       [CORE_PORT_KEY],
       (result) => {
         const raw = result?.[CORE_PORT_KEY];
         if (typeof raw === "number" && Number.isFinite(raw)) {
-          resolve(raw);
+          resolve({
+            host: "127.0.0.1",
+            port: raw,
+            portSource: "storage"
+          });
           return;
         }
         if (typeof raw === "string") {
           const parsed = Number(raw);
           if (Number.isFinite(parsed)) {
-            resolve(parsed);
+            resolve({
+              host: "127.0.0.1",
+              port: parsed,
+              portSource: "storage"
+            });
             return;
           }
         }
-        resolve(DEFAULT_CORE_PORT);
+        resolve({
+          host: "127.0.0.1",
+          port: DEFAULT_CORE_PORT,
+          portSource: "default"
+        });
       }
     );
   });
@@ -1063,9 +1146,12 @@ var waitForDomContentLoaded = async (tabId, timeoutMs) => {
     }, timeoutMs);
   });
 };
-var getWsUrl = async () => {
-  const port = await readCorePort();
-  return `ws://127.0.0.1:${port}${CORE_WS_PATH}`;
+var getWsEndpoint = async () => {
+  const endpoint = await readCoreEndpointConfig();
+  return {
+    endpoint,
+    url: `ws://${endpoint.host}:${endpoint.port}${CORE_WS_PATH}`
+  };
 };
 var DriveSocket = class {
   constructor() {
@@ -1077,10 +1163,12 @@ var DriveSocket = class {
     this.keepAliveIntervalMs = 3e4;
     this.debuggerSessions = /* @__PURE__ */ new Map();
     this.debuggerIdleTimeoutMs = null;
+    this.connection = new ConnectionStateTracker();
   }
   start() {
+    this.connection.markConnecting();
     void this.connect().catch((error) => {
-      console.error("DriveSocket connect failed:", error);
+      this.recordConnectionFailure("initial connect", error);
     });
   }
   stop() {
@@ -1093,6 +1181,7 @@ var DriveSocket = class {
       this.socket.close();
       this.socket = null;
     }
+    this.connection.markDisconnected();
   }
   sendTabReport() {
     void this.emitTabReport().catch((error) => {
@@ -1104,10 +1193,12 @@ var DriveSocket = class {
       return;
     }
     const delay2 = this.reconnectDelayMs;
+    this.connection.markBackoff(delay2);
     this.reconnectTimer = self.setTimeout(() => {
       this.reconnectTimer = null;
+      this.connection.markConnecting();
       void this.connect().catch((error) => {
-        console.error("DriveSocket reconnect failed:", error);
+        this.recordConnectionFailure("reconnect", error);
       });
     }, delay2);
     this.reconnectDelayMs = Math.min(
@@ -1116,12 +1207,20 @@ var DriveSocket = class {
     );
   }
   async connect() {
-    const url = await getWsUrl();
+    const { endpoint, url } = await getWsEndpoint();
+    this.connection.setEndpoint(endpoint);
     try {
       const socket2 = new WebSocket(url);
       this.socket = socket2;
       socket2.addEventListener("open", () => {
         this.reconnectDelayMs = 1e3;
+        this.connection.markConnected();
+        const suppressed = this.connection.flushSuppressedFailureLogs();
+        if (suppressed > 0) {
+          console.info(
+            `DriveSocket reconnected after suppressing ${suppressed} repeated connection failures.`
+          );
+        }
         this.startKeepAlive();
         void this.sendHello().catch((error) => {
           console.error("DriveSocket hello failed:", error);
@@ -1131,22 +1230,49 @@ var DriveSocket = class {
         this.handleMessage(event.data);
       });
       socket2.addEventListener("close", () => {
-        this.socket = null;
-        this.stopKeepAlive();
-        this.scheduleReconnect();
+        this.handleSocketUnavailable(socket2, "socket closed");
       });
       socket2.addEventListener("error", () => {
-        this.socket = null;
-        this.stopKeepAlive();
-        this.scheduleReconnect();
+        this.handleSocketUnavailable(socket2, "socket error");
       });
     } catch (error) {
-      console.debug("DriveSocket connect failed, scheduling reconnect.", error);
+      this.recordConnectionFailure("connect", error);
+      this.connection.markDisconnected();
       this.scheduleReconnect();
     }
   }
+  getConnectionStatus() {
+    return this.connection.getStatus();
+  }
+  handleSocketUnavailable(socket2, reason) {
+    if (this.socket !== socket2) {
+      return;
+    }
+    this.socket = null;
+    this.stopKeepAlive();
+    this.connection.markDisconnected();
+    this.recordConnectionFailure(reason, new Error(reason));
+    this.scheduleReconnect();
+  }
+  recordConnectionFailure(context, error) {
+    const detail = error instanceof Error ? error.message : typeof error === "string" ? error : "Unknown error";
+    this.connection.recordFailure(`${context}: ${detail}`);
+    const budget = this.connection.consumeFailureLogBudget();
+    if (!budget.shouldLog) {
+      return;
+    }
+    if (budget.suppressedCount > 0) {
+      console.warn(
+        `DriveSocket ${context} failed (${budget.suppressedCount} repeated failures suppressed).`,
+        error
+      );
+      return;
+    }
+    console.warn(`DriveSocket ${context} failed.`, error);
+  }
   async sendHello() {
     const manifest = chrome.runtime.getManifest();
+    const endpoint = await readCoreEndpointConfig();
     let tabs = [];
     try {
       tabs = await queryTabs();
@@ -1156,6 +1282,9 @@ var DriveSocket = class {
     }
     const params = {
       version: manifest.version,
+      core_host: endpoint.host,
+      core_port: endpoint.port,
+      core_port_source: endpoint.portSource,
       tabs
     };
     this.sendEvent("drive.hello", params);
@@ -3191,5 +3320,17 @@ chrome.debugger.onDetach.addListener(
     });
   }
 );
+chrome.runtime.onMessage.addListener(
+  (message, _sender, sendResponse) => {
+    if (!message || typeof message !== "object" || message.action !== "drive.connection_status") {
+      return void 0;
+    }
+    sendResponse({
+      ok: true,
+      result: socket.getConnectionStatus()
+    });
+    return true;
+  }
+);
 socket.start();
 //# sourceMappingURL=background.js.map