@flrande/bak-extension 0.6.4 → 0.6.6

package/dist/.bak-e2e-build-stamp

@@ -1 +1 @@
-2026-03-12T15:53:45.600Z
+2026-03-13T07:15:48.660Z

package/dist/background.global.js

@@ -62,7 +62,7 @@
   // package.json
   var package_default = {
     name: "@flrande/bak-extension",
-    version: "0.6.4",
+    version: "0.6.6",
     type: "module",
     scripts: {
       build: "tsup src/background.ts src/content.ts src/popup.ts --format iife --out-dir dist --clean && node scripts/copy-assets.mjs",
@@ -573,13 +573,14 @@
         state.activeTabId = null;
         state.primaryTabId = null;
         window2 = createdWindow;
-        tabs = await this.waitForWindowTabs(createdWindow.id);
+        const initialTab = typeof createdWindow.initialTabId === "number" ? await this.waitForTrackedTab(createdWindow.initialTabId, createdWindow.id) : null;
+        tabs = initialTab ? [initialTab] : await this.waitForWindowTabs(createdWindow.id);
         state.tabIds = tabs.map((tab) => tab.id);
         if (state.primaryTabId === null) {
-          state.primaryTabId = tabs[0]?.id ?? null;
+          state.primaryTabId = initialTab?.id ?? tabs[0]?.id ?? null;
         }
         if (state.activeTabId === null) {
-          state.activeTabId = tabs.find((tab) => tab.active)?.id ?? tabs[0]?.id ?? null;
+          state.activeTabId = tabs.find((tab) => tab.active)?.id ?? initialTab?.id ?? tabs[0]?.id ?? null;
         }
         repairActions.push(created ? "created-window" : "recreated-window");
       }
@@ -838,22 +839,9 @@
       await this.browser.closeTab(resolvedTabId);
       const remainingTabIds = ensured.binding.tabIds.filter((candidate) => candidate !== resolvedTabId);
       if (remainingTabIds.length === 0) {
-        const emptied = {
-          id: ensured.binding.id,
-          label: ensured.binding.label,
-          color: ensured.binding.color,
-          windowId: null,
-          groupId: null,
-          tabIds: [],
-          activeTabId: null,
-          primaryTabId: null
-        };
-        await this.storage.save(emptied);
+        await this.storage.delete(ensured.binding.id);
         return {
-          binding: {
-            ...emptied,
-            tabs: []
-          },
+          binding: null,
           closedTabId: resolvedTabId
         };
       }
@@ -1094,7 +1082,8 @@
         url: seedUrl || DEFAULT_SESSION_BINDING_URL,
         focused: false
       });
-      const recreatedTabs = await this.waitForWindowTabs(window2.id);
+      const initialTab = typeof window2.initialTabId === "number" ? await this.waitForTrackedTab(window2.initialTabId, window2.id) : null;
+      const recreatedTabs = initialTab ? [initialTab] : await this.waitForWindowTabs(window2.id);
       const firstTab = recreatedTabs[0] ?? null;
       const tabIdMap = /* @__PURE__ */ new Map();
       if (sourceTabs[0] && firstTab) {
@@ -1333,11 +1322,14 @@
   var ws = null;
   var reconnectTimer = null;
   var nextReconnectInMs = null;
+  var nextReconnectAt = null;
   var reconnectAttempt = 0;
   var lastError = null;
   var manualDisconnect = false;
   var sessionBindingStateMutationQueue = Promise.resolve();
   var preserveHumanFocusDepth = 0;
+  var lastBindingUpdateAt = null;
+  var lastBindingUpdateReason = null;
   async function getConfig() {
     const stored = await chrome.storage.local.get([STORAGE_KEY_TOKEN, STORAGE_KEY_PORT, STORAGE_KEY_DEBUG_RICH_TEXT]);
     return {
@@ -1374,6 +1366,7 @@
       reconnectTimer = null;
     }
     nextReconnectInMs = null;
+    nextReconnectAt = null;
   }
   function sendResponse(payload) {
     if (ws && ws.readyState === WebSocket.OPEN) {
@@ -1469,6 +1462,65 @@
   async function listSessionBindingStates() {
     return Object.values(await loadSessionBindingStateMap());
   }
+  function summarizeSessionBindings(states) {
+    const items = states.map((state) => {
+      const detached = state.windowId === null || state.tabIds.length === 0;
+      return {
+        id: state.id,
+        label: state.label,
+        tabCount: state.tabIds.length,
+        activeTabId: state.activeTabId,
+        windowId: state.windowId,
+        groupId: state.groupId,
+        detached
+      };
+    });
+    return {
+      count: items.length,
+      attachedCount: items.filter((item) => !item.detached).length,
+      detachedCount: items.filter((item) => item.detached).length,
+      tabCount: items.reduce((sum, item) => sum + item.tabCount, 0),
+      items
+    };
+  }
+  async function buildPopupState() {
+    const config = await getConfig();
+    const sessionBindings = summarizeSessionBindings(await listSessionBindingStates());
+    const reconnectRemainingMs = nextReconnectAt === null ? null : Math.max(0, nextReconnectAt - Date.now());
+    let connectionState;
+    if (!config.token) {
+      connectionState = "missing-token";
+    } else if (ws?.readyState === WebSocket.OPEN) {
+      connectionState = "connected";
+    } else if (ws?.readyState === WebSocket.CONNECTING) {
+      connectionState = "connecting";
+    } else if (manualDisconnect) {
+      connectionState = "manual";
+    } else if (nextReconnectInMs !== null) {
+      connectionState = "reconnecting";
+    } else {
+      connectionState = "disconnected";
+    }
+    return {
+      ok: true,
+      connected: ws?.readyState === WebSocket.OPEN,
+      connectionState,
+      hasToken: Boolean(config.token),
+      port: config.port,
+      wsUrl: `ws://127.0.0.1:${config.port}/extension`,
+      debugRichText: config.debugRichText,
+      lastError: lastError?.message ?? null,
+      lastErrorAt: lastError?.at ?? null,
+      lastErrorContext: lastError?.context ?? null,
+      reconnectAttempt,
+      nextReconnectInMs: reconnectRemainingMs,
+      manualDisconnect,
+      extensionVersion: EXTENSION_VERSION,
+      lastBindingUpdateAt,
+      lastBindingUpdateReason,
+      sessionBindings
+    };
+  }
   async function saveSessionBindingState(state) {
     await mutateSessionBindingStateMap((stateMap) => {
       stateMap[state.id] = state;
@@ -1492,6 +1544,8 @@
     };
   }
   function emitSessionBindingUpdated(bindingId, reason, state, extras = {}) {
+    lastBindingUpdateAt = Date.now();
+    lastBindingUpdateReason = reason;
     sendEvent("sessionBinding.updated", {
       bindingId,
       reason,
@@ -1556,14 +1610,42 @@
     },
     async createWindow(options) {
       const previouslyFocusedWindow = options.focused === true ? null : (await chrome.windows.getAll()).find((window2) => window2.focused === true && typeof window2.id === "number") ?? null;
-      const previouslyFocusedTab = previouslyFocusedWindow?.id !== void 0 ? (await chrome.tabs.query({ windowId: previouslyFocusedWindow.id, active: true })).find((tab) => typeof tab.id === "number") ?? null : null;
-      const created = await chrome.windows.create({
-        url: options.url ?? "about:blank",
+      const previouslyFocusedTabs = previouslyFocusedWindow?.id !== void 0 ? await chrome.tabs.query({ windowId: previouslyFocusedWindow.id }) : [];
+      const previouslyFocusedTabIds = new Set(
+        previouslyFocusedTabs.flatMap((tab) => typeof tab.id === "number" ? [tab.id] : [])
+      );
+      const previouslyFocusedTab = previouslyFocusedTabs.find((tab) => tab.active === true && typeof tab.id === "number") ?? null;
+      const desiredUrl = options.url ?? "about:blank";
+      let created = await chrome.windows.create({
+        url: desiredUrl,
         focused: true
       });
       if (!created || typeof created.id !== "number") {
         throw new Error("Window missing id");
       }
+      const pickSeedTab = async (windowId) => {
+        const tabs = await chrome.tabs.query({ windowId });
+        const newlyCreatedTab = windowId === previouslyFocusedWindow?.id ? tabs.find((tab) => typeof tab.id === "number" && !previouslyFocusedTabIds.has(tab.id)) : null;
+        const normalizedDesiredUrl = normalizeComparableTabUrl(desiredUrl);
+        return newlyCreatedTab ?? tabs.find((tab) => {
+          const pendingUrl = "pendingUrl" in tab && typeof tab.pendingUrl === "string" ? tab.pendingUrl : "";
+          return normalizeComparableTabUrl(tab.url ?? pendingUrl) === normalizedDesiredUrl;
+        }) ?? tabs.find((tab) => tab.active === true && typeof tab.id === "number") ?? tabs.find((tab) => typeof tab.id === "number") ?? null;
+      };
+      let seedTab = await pickSeedTab(created.id);
+      const createdWindowTabs = await chrome.tabs.query({ windowId: created.id });
+      const createdWindowReusedFocusedWindow = previouslyFocusedWindow?.id === created.id;
+      const createdWindowLooksDirty = createdWindowTabs.length > 1;
+      if ((createdWindowReusedFocusedWindow || createdWindowLooksDirty) && typeof seedTab?.id === "number") {
+        created = await chrome.windows.create({
+          tabId: seedTab.id,
+          focused: true
+        });
+        if (!created || typeof created.id !== "number") {
+          throw new Error("Lifted window missing id");
+        }
+        seedTab = await pickSeedTab(created.id);
+      }
       if (options.focused !== true && previouslyFocusedWindow?.id && previouslyFocusedWindow.id !== created.id) {
         await chrome.windows.update(previouslyFocusedWindow.id, { focused: true });
         if (typeof previouslyFocusedTab?.id === "number") {
@@ -1573,7 +1655,8 @@
       const finalWindow = await chrome.windows.get(created.id);
       return {
         id: finalWindow.id,
-        focused: Boolean(finalWindow.focused)
+        focused: Boolean(finalWindow.focused),
+        initialTabId: seedTab?.id ?? null
       };
     },
     async updateWindow(windowId, options) {
@@ -3311,9 +3394,11 @@
     const delayMs = computeReconnectDelayMs(reconnectAttempt);
     reconnectAttempt += 1;
     nextReconnectInMs = delayMs;
+    nextReconnectAt = Date.now() + delayMs;
     reconnectTimer = setTimeout(() => {
       reconnectTimer = null;
       nextReconnectInMs = null;
+      nextReconnectAt = null;
       void connectWebSocket();
     }, delayMs);
     if (!lastError) {
@@ -3334,19 +3419,23 @@
       return;
     }
     const url = `ws://127.0.0.1:${config.port}/extension?token=${encodeURIComponent(config.token)}`;
-    ws = new WebSocket(url);
-    ws.addEventListener("open", () => {
+    const socket = new WebSocket(url);
+    ws = socket;
+    socket.addEventListener("open", () => {
+      if (ws !== socket) {
+        return;
+      }
       manualDisconnect = false;
       reconnectAttempt = 0;
       lastError = null;
-      ws?.send(JSON.stringify({
+      socket.send(JSON.stringify({
         type: "hello",
         role: "extension",
         version: EXTENSION_VERSION,
         ts: Date.now()
       }));
     });
-    ws.addEventListener("message", (event) => {
+    socket.addEventListener("message", (event) => {
       try {
         const request = JSON.parse(String(event.data));
         if (!request.id || !request.method) {
@@ -3367,13 +3456,19 @@
         });
       }
     });
-    ws.addEventListener("close", () => {
+    socket.addEventListener("close", () => {
+      if (ws !== socket) {
+        return;
+      }
       ws = null;
       scheduleReconnect("socket-closed");
     });
-    ws.addEventListener("error", () => {
+    socket.addEventListener("error", () => {
+      if (ws !== socket) {
+        return;
+      }
       setRuntimeError("Cannot connect to bak cli", "socket");
-      ws?.close();
+      socket.close();
     });
   }
   chrome.tabs.onRemoved.addListener((tabId) => {
@@ -3385,6 +3480,11 @@
           continue;
         }
         const nextTabIds = state.tabIds.filter((id) => id !== tabId);
+        if (nextTabIds.length === 0) {
+          delete stateMap[bindingId];
+          updates.push({ bindingId, state: null });
+          continue;
+        }
         const fallbackTabId = nextTabIds[0] ?? null;
         const nextState = {
           ...state,
@@ -3440,16 +3540,8 @@
         if (state.windowId !== windowId) {
           continue;
         }
-        const nextState = {
-          ...state,
-          windowId: null,
-          groupId: null,
-          tabIds: [],
-          activeTabId: null,
-          primaryTabId: null
-        };
-        stateMap[bindingId] = nextState;
-        updates.push({ bindingId, state: nextState });
+        delete stateMap[bindingId];
+        updates.push({ bindingId, state: null });
       }
       return updates;
     }).then((updates) => {
@@ -3468,8 +3560,9 @@
   chrome.runtime.onMessage.addListener((message, _sender, sendResponse2) => {
     if (message?.type === "bak.updateConfig") {
       manualDisconnect = false;
+      const token = typeof message.token === "string" ? message.token.trim() : "";
       void setConfig({
-        token: message.token,
+        ...token ? { token } : {},
         port: Number(message.port ?? DEFAULT_PORT),
         debugRichText: message.debugRichText === true
       }).then(() => {
@@ -3479,19 +3572,8 @@
       return true;
     }
     if (message?.type === "bak.getState") {
-      void getConfig().then((config) => {
-        sendResponse2({
-          ok: true,
-          connected: ws?.readyState === WebSocket.OPEN,
-          hasToken: Boolean(config.token),
-          port: config.port,
-          debugRichText: config.debugRichText,
-          lastError: lastError?.message ?? null,
-          lastErrorAt: lastError?.at ?? null,
-          lastErrorContext: lastError?.context ?? null,
-          reconnectAttempt,
-          nextReconnectInMs
-        });
+      void buildPopupState().then((state) => {
+        sendResponse2(state);
       });
       return true;
     }
@@ -3499,11 +3581,21 @@
       manualDisconnect = true;
       clearReconnectTimer();
       reconnectAttempt = 0;
+      lastError = null;
       ws?.close();
       ws = null;
       sendResponse2({ ok: true });
       return false;
     }
+    if (message?.type === "bak.reconnectNow") {
+      manualDisconnect = false;
+      clearReconnectTimer();
+      reconnectAttempt = 0;
+      ws?.close();
+      ws = null;
+      void connectWebSocket().then(() => sendResponse2({ ok: true }));
+      return true;
+    }
     return false;
   });
 })();

package/dist/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Browser Agent Kit",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "action": {
     "default_popup": "popup.html"
   },

package/dist/popup.global.js

@@ -6,18 +6,97 @@
   var portInput = document.getElementById("port");
   var debugRichTextInput = document.getElementById("debugRichText");
   var saveBtn = document.getElementById("save");
+  var reconnectBtn = document.getElementById("reconnect");
   var disconnectBtn = document.getElementById("disconnect");
+  var connectionStateEl = document.getElementById("connectionState");
+  var tokenStateEl = document.getElementById("tokenState");
+  var reconnectStateEl = document.getElementById("reconnectState");
+  var connectionUrlEl = document.getElementById("connectionUrl");
+  var lastErrorEl = document.getElementById("lastError");
+  var lastBindingUpdateEl = document.getElementById("lastBindingUpdate");
+  var extensionVersionEl = document.getElementById("extensionVersion");
+  var sessionSummaryEl = document.getElementById("sessionSummary");
+  var sessionListEl = document.getElementById("sessionList");
+  var latestState = null;
   function setStatus(text, bad = false) {
     statusEl.textContent = text;
     statusEl.style.color = bad ? "#dc2626" : "#0f172a";
   }
+  function formatTimeAgo(at) {
+    if (typeof at !== "number") {
+      return "never";
+    }
+    const deltaSeconds = Math.max(0, Math.round((Date.now() - at) / 1e3));
+    if (deltaSeconds < 5) {
+      return "just now";
+    }
+    if (deltaSeconds < 60) {
+      return `${deltaSeconds}s ago`;
+    }
+    const deltaMinutes = Math.round(deltaSeconds / 60);
+    if (deltaMinutes < 60) {
+      return `${deltaMinutes}m ago`;
+    }
+    const deltaHours = Math.round(deltaMinutes / 60);
+    return `${deltaHours}h ago`;
+  }
+  function renderSessionBindings(state) {
+    sessionSummaryEl.textContent = `${state.count} sessions, ${state.attachedCount} attached, ${state.tabCount} tabs, ${state.detachedCount} detached`;
+    sessionListEl.replaceChildren();
+    for (const item of state.items) {
+      const li = document.createElement("li");
+      const location = item.windowId === null ? "no window" : `window ${item.windowId}`;
+      const active = item.activeTabId === null ? "no active tab" : `active ${item.activeTabId}`;
+      li.textContent = `${item.label}: ${item.tabCount} tabs, ${location}, ${active}`;
+      if (item.detached) {
+        li.style.color = "#b45309";
+      }
+      sessionListEl.appendChild(li);
+    }
+  }
+  function renderConnectionDetails(state) {
+    connectionStateEl.textContent = state.connectionState;
+    tokenStateEl.textContent = state.hasToken ? "configured" : "missing";
+    connectionUrlEl.textContent = state.wsUrl;
+    extensionVersionEl.textContent = state.extensionVersion;
+    if (state.manualDisconnect) {
+      reconnectStateEl.textContent = "manual disconnect";
+    } else if (typeof state.nextReconnectInMs === "number") {
+      const seconds = Math.max(0, Math.ceil(state.nextReconnectInMs / 100) / 10);
+      reconnectStateEl.textContent = `attempt ${state.reconnectAttempt}, retry in ${seconds}s`;
+    } else if (state.connected) {
+      reconnectStateEl.textContent = "connected";
+    } else {
+      reconnectStateEl.textContent = "idle";
+    }
+    if (state.lastError) {
+      const context = state.lastErrorContext ? `${state.lastErrorContext}: ` : "";
+      lastErrorEl.textContent = `${context}${state.lastError} (${formatTimeAgo(state.lastErrorAt)})`;
+    } else {
+      lastErrorEl.textContent = "none";
+    }
+    if (state.lastBindingUpdateReason) {
+      lastBindingUpdateEl.textContent = `${state.lastBindingUpdateReason} (${formatTimeAgo(state.lastBindingUpdateAt)})`;
+    } else {
+      lastBindingUpdateEl.textContent = "none";
+    }
+  }
   async function refreshState() {
     const state = await chrome.runtime.sendMessage({ type: "bak.getState" });
     if (state.ok) {
+      latestState = state;
       portInput.value = String(state.port);
       debugRichTextInput.checked = Boolean(state.debugRichText);
+      renderConnectionDetails(state);
+      renderSessionBindings(state.sessionBindings);
       if (state.connected) {
         setStatus("Connected to bak CLI");
+      } else if (state.connectionState === "missing-token") {
+        setStatus("Pair token is required", true);
+      } else if (state.connectionState === "manual") {
+        setStatus("Disconnected manually");
+      } else if (state.connectionState === "reconnecting") {
+        setStatus("Reconnecting to bak CLI", true);
       } else if (state.lastError) {
         setStatus(`Disconnected: ${state.lastError}`, true);
       } else {
@@ -28,7 +107,7 @@
   saveBtn.addEventListener("click", async () => {
     const token = tokenInput.value.trim();
     const port = Number.parseInt(portInput.value.trim(), 10);
-    if (!token) {
+    if (!token && latestState?.hasToken !== true) {
       setStatus("Pair token is required", true);
       return;
     }
@@ -38,10 +117,15 @@
     }
     await chrome.runtime.sendMessage({
       type: "bak.updateConfig",
-      token,
+      ...token ? { token } : {},
       port,
       debugRichText: debugRichTextInput.checked
     });
+    tokenInput.value = "";
+    await refreshState();
+  });
+  reconnectBtn.addEventListener("click", async () => {
+    await chrome.runtime.sendMessage({ type: "bak.reconnectNow" });
     await refreshState();
   });
   disconnectBtn.addEventListener("click", async () => {
@@ -49,4 +133,10 @@
     await refreshState();
   });
   void refreshState();
+  var refreshInterval = window.setInterval(() => {
+    void refreshState();
+  }, 1e3);
+  window.addEventListener("unload", () => {
+    window.clearInterval(refreshInterval);
+  });
 })();

package/dist/popup.html

@@ -70,9 +70,50 @@
         background: #e2e8f0;
         color: #0f172a;
       }
+      #reconnect {
+        background: #dbeafe;
+        color: #1d4ed8;
+      }
       #status {
         margin-top: 10px;
         font-size: 12px;
+        font-weight: 600;
+      }
+      .panel {
+        margin-top: 12px;
+        padding: 10px;
+        border: 1px solid #cbd5e1;
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.8);
+      }
+      .panel h2 {
+        margin: 0 0 8px;
+        font-size: 12px;
+      }
+      .meta-grid {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 6px 10px;
+        font-size: 11px;
+      }
+      .meta-grid dt {
+        color: #475569;
+      }
+      .meta-grid dd {
+        margin: 0;
+        color: #0f172a;
+        word-break: break-word;
+      }
+      #sessionList {
+        margin: 0;
+        padding-left: 16px;
+        font-size: 11px;
+        color: #0f172a;
+      }
+      #sessionList:empty::before {
+        content: "No tracked sessions";
+        color: #64748b;
+        margin-left: -16px;
       }
       .hint {
         margin-top: 10px;
@@ -85,7 +126,7 @@
     <h1>Browser Agent Kit</h1>
     <label>
       Pair token
-      <input id="token" placeholder="paste token from `bak pair`" />
+      <input id="token" placeholder="paste token from `bak pair` or leave blank to keep the saved token" />
     </label>
     <label>
       CLI port
@@ -97,9 +138,39 @@
     </label>
     <div class="row">
       <button id="save">Save & Connect</button>
+      <button id="reconnect">Reconnect</button>
+    </div>
+    <div class="row">
       <button id="disconnect">Disconnect</button>
     </div>
     <div id="status">Checking...</div>
+    <div class="panel">
+      <h2>Connection</h2>
+      <dl class="meta-grid">
+        <dt>State</dt>
+        <dd id="connectionState">-</dd>
+        <dt>Token</dt>
+        <dd id="tokenState">-</dd>
+        <dt>Reconnect</dt>
+        <dd id="reconnectState">-</dd>
+        <dt>CLI URL</dt>
+        <dd id="connectionUrl">-</dd>
+        <dt>Last error</dt>
+        <dd id="lastError">-</dd>
+        <dt>Last binding</dt>
+        <dd id="lastBindingUpdate">-</dd>
+        <dt>Extension</dt>
+        <dd id="extensionVersion">-</dd>
+      </dl>
+    </div>
+    <div class="panel">
+      <h2>Sessions</h2>
+      <dl class="meta-grid">
+        <dt>Tracked</dt>
+        <dd id="sessionSummary">-</dd>
+      </dl>
+      <ul id="sessionList"></ul>
+    </div>
     <div class="hint">Extension only connects to ws://127.0.0.1</div>
     <script src="./popup.global.js"></script>
   </body>

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@flrande/bak-extension",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "type": "module",
   "dependencies": {
-    "@flrande/bak-protocol": "0.6.4"
+    "@flrande/bak-protocol": "0.6.6"
   },
   "devDependencies": {
     "@types/chrome": "^0.1.14",