@flrande/bak-extension 0.6.6 → 0.6.8

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

@@ -1 +1 @@
-2026-03-13T07:15:48.660Z
+2026-03-13T08:51:15.417Z

package/dist/background.global.js

@@ -62,7 +62,7 @@
   // package.json
   var package_default = {
     name: "@flrande/bak-extension",
-    version: "0.6.6",
+    version: "0.6.8",
     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",
@@ -563,26 +563,37 @@
         }
       }
       if (!window2) {
-        const createdWindow = await this.browser.createWindow({
-          url: initialUrl,
-          focused: options.focus === true
-        });
-        state.windowId = createdWindow.id;
-        state.groupId = null;
-        state.tabIds = [];
-        state.activeTabId = null;
-        state.primaryTabId = null;
-        window2 = createdWindow;
-        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 = initialTab?.id ?? tabs[0]?.id ?? null;
-        }
-        if (state.activeTabId === null) {
-          state.activeTabId = tabs.find((tab) => tab.active)?.id ?? initialTab?.id ?? tabs[0]?.id ?? null;
-        }
-        repairActions.push(created ? "created-window" : "recreated-window");
+        const sharedWindow = await this.findSharedBindingWindow(bindingId);
+        if (sharedWindow) {
+          state.windowId = sharedWindow.id;
+          state.groupId = null;
+          state.tabIds = [];
+          state.activeTabId = null;
+          state.primaryTabId = null;
+          window2 = sharedWindow;
+          repairActions.push("attached-shared-window");
+        } else {
+          const createdWindow = await this.browser.createWindow({
+            url: initialUrl,
+            focused: options.focus === true
+          });
+          state.windowId = createdWindow.id;
+          state.groupId = null;
+          state.tabIds = [];
+          state.activeTabId = null;
+          state.primaryTabId = null;
+          window2 = createdWindow;
+          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 = initialTab?.id ?? tabs[0]?.id ?? null;
+          }
+          if (state.activeTabId === null) {
+            state.activeTabId = tabs.find((tab) => tab.active)?.id ?? initialTab?.id ?? tabs[0]?.id ?? null;
+          }
+          repairActions.push(created ? "created-window" : "recreated-window");
+        }
       }
       tabs = tabs.length > 0 ? tabs : await this.readTrackedTabs(state.tabIds, state.windowId);
       const recoveredTabs = await this.recoverBindingTabs(state, tabs);
@@ -596,12 +607,12 @@
       state.tabIds = tabs.map((tab) => tab.id);
       if (state.windowId !== null) {
         const ownership = await this.inspectBindingWindowOwnership(state, state.windowId);
-        if (ownership.foreignTabs.length > 0) {
-          const migrated = await this.moveBindingIntoDedicatedWindow(state, ownership, initialUrl);
+        if (ownership.foreignTabs.length > 0 && ownership.bindingTabs.length > 0) {
+          const migrated = await this.moveBindingIntoBakWindow(state, ownership, initialUrl);
           window2 = migrated.window;
           tabs = migrated.tabs;
           state.tabIds = tabs.map((tab) => tab.id);
-          repairActions.push("migrated-dirty-window");
+          repairActions.push("evacuated-foreign-window");
         }
       }
       if (tabs.length === 0) {
@@ -698,7 +709,7 @@
       const desiredUrl = options.url ?? DEFAULT_SESSION_BINDING_URL;
       let reusablePrimaryTab = await this.resolveReusablePrimaryTab(
         state,
-        ensured.created || ensured.repairActions.includes("recreated-window") || ensured.repairActions.includes("created-primary-tab") || ensured.repairActions.includes("migrated-dirty-window")
+        ensured.created || ensured.repairActions.includes("recreated-window") || ensured.repairActions.includes("created-primary-tab")
       );
       let createdTab;
       try {
@@ -831,29 +842,32 @@
       return { ok: true, binding: refreshed.binding };
     }
     async closeTab(bindingId, tabId) {
-      const ensured = await this.ensureBinding({ bindingId, focus: false });
-      const resolvedTabId = typeof tabId === "number" ? tabId : ensured.binding.activeTabId ?? ensured.binding.primaryTabId ?? ensured.binding.tabs[0]?.id;
-      if (typeof resolvedTabId !== "number" || !ensured.binding.tabIds.includes(resolvedTabId)) {
+      const binding = await this.inspectBinding(bindingId);
+      if (!binding) {
+        throw new Error(`Binding ${bindingId} does not exist`);
+      }
+      const resolvedTabId = typeof tabId === "number" ? tabId : binding.activeTabId ?? binding.primaryTabId ?? binding.tabs[0]?.id;
+      if (typeof resolvedTabId !== "number" || !binding.tabIds.includes(resolvedTabId)) {
         throw new Error(`Tab ${tabId ?? "active"} does not belong to binding ${bindingId}`);
       }
       await this.browser.closeTab(resolvedTabId);
-      const remainingTabIds = ensured.binding.tabIds.filter((candidate) => candidate !== resolvedTabId);
+      const remainingTabIds = binding.tabIds.filter((candidate) => candidate !== resolvedTabId);
       if (remainingTabIds.length === 0) {
-        await this.storage.delete(ensured.binding.id);
+        await this.storage.delete(binding.id);
         return {
           binding: null,
           closedTabId: resolvedTabId
         };
       }
       const tabs = await this.readLooseTrackedTabs(remainingTabIds);
-      const nextPrimaryTabId = ensured.binding.primaryTabId === resolvedTabId ? tabs[0]?.id ?? null : ensured.binding.primaryTabId;
-      const nextActiveTabId = ensured.binding.activeTabId === resolvedTabId ? tabs.find((candidate) => candidate.active)?.id ?? nextPrimaryTabId ?? tabs[0]?.id ?? null : ensured.binding.activeTabId;
+      const nextPrimaryTabId = binding.primaryTabId === resolvedTabId ? tabs[0]?.id ?? null : binding.primaryTabId;
+      const nextActiveTabId = binding.activeTabId === resolvedTabId ? tabs.find((candidate) => candidate.active)?.id ?? nextPrimaryTabId ?? tabs[0]?.id ?? null : binding.activeTabId;
       const nextState = {
-        id: ensured.binding.id,
-        label: ensured.binding.label,
-        color: ensured.binding.color,
-        windowId: tabs[0]?.windowId ?? ensured.binding.windowId,
-        groupId: tabs[0]?.groupId ?? ensured.binding.groupId,
+        id: binding.id,
+        label: binding.label,
+        color: binding.color,
+        windowId: tabs[0]?.windowId ?? binding.windowId,
+        groupId: tabs[0]?.groupId ?? binding.groupId,
         tabIds: tabs.map((candidate) => candidate.id),
         activeTabId: nextActiveTabId,
         primaryTabId: nextPrimaryTabId
@@ -882,7 +896,7 @@
         return { ok: true };
       }
       await this.storage.delete(bindingId);
-      const trackedTabs = await this.readLooseTrackedTabs(this.collectCandidateTabIds(state));
+      const trackedTabs = await this.collectBindingTabsForClose(state);
       for (const trackedTab of trackedTabs) {
         try {
           await this.browser.closeTab(trackedTab.id);
@@ -1069,24 +1083,59 @@
     }
     async inspectBindingWindowOwnership(state, windowId) {
       const windowTabs = await this.waitForWindowTabs(windowId, 500);
-      const trackedIds = new Set(this.collectCandidateTabIds(state));
+      const bindingTabIds = new Set(this.collectCandidateTabIds(state));
+      const peerBindings = (await this.storage.list()).filter((candidate) => candidate.id !== state.id);
+      const peerTabIds = /* @__PURE__ */ new Set();
+      const peerGroupIds = /* @__PURE__ */ new Set();
+      for (const peer of peerBindings) {
+        for (const tabId of this.collectCandidateTabIds(peer)) {
+          peerTabIds.add(tabId);
+        }
+        if (peer.groupId !== null) {
+          peerGroupIds.add(peer.groupId);
+        }
+      }
+      const bindingTabs = [];
+      const sharedBindingTabs = [];
+      const foreignTabs = [];
+      for (const tab of windowTabs) {
+        if (bindingTabIds.has(tab.id) || state.groupId !== null && tab.groupId === state.groupId) {
+          bindingTabs.push(tab);
+          continue;
+        }
+        if (peerTabIds.has(tab.id) || tab.groupId !== null && peerGroupIds.has(tab.groupId)) {
+          sharedBindingTabs.push(tab);
+          continue;
+        }
+        foreignTabs.push(tab);
+      }
       return {
-        bindingTabs: windowTabs.filter((tab) => trackedIds.has(tab.id) || state.groupId !== null && tab.groupId === state.groupId),
-        foreignTabs: windowTabs.filter((tab) => !trackedIds.has(tab.id) && (state.groupId === null || tab.groupId !== state.groupId))
+        bindingTabs,
+        sharedBindingTabs,
+        foreignTabs
       };
     }
-    async moveBindingIntoDedicatedWindow(state, ownership, initialUrl) {
+    async moveBindingIntoBakWindow(state, ownership, initialUrl) {
       const sourceTabs = this.orderSessionBindingTabsForMigration(state, ownership.bindingTabs);
       const seedUrl = sourceTabs[0]?.url ?? initialUrl;
-      const window2 = await this.browser.createWindow({
+      const sharedWindow = await this.findSharedBindingWindow(state.id, state.windowId === null ? [] : [state.windowId]);
+      const window2 = sharedWindow ?? await this.browser.createWindow({
         url: seedUrl || DEFAULT_SESSION_BINDING_URL,
         focused: false
       });
-      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 initialTab = sharedWindow || typeof window2.initialTabId !== "number" ? null : await this.waitForTrackedTab(window2.initialTabId, window2.id);
+      const recreatedTabs = [];
       const tabIdMap = /* @__PURE__ */ new Map();
-      if (sourceTabs[0] && firstTab) {
+      if (sourceTabs[0]) {
+        const firstTab = initialTab ? await this.browser.updateTab(initialTab.id, {
+          url: sourceTabs[0].url,
+          active: false
+        }) : await this.createBindingTab({
+          windowId: window2.id,
+          url: sourceTabs[0].url,
+          active: false
+        });
+        recreatedTabs.push(firstTab);
         tabIdMap.set(sourceTabs[0].id, firstTab.id);
       }
       for (const sourceTab of sourceTabs.slice(1)) {
@@ -1098,7 +1147,7 @@
         recreatedTabs.push(recreated);
         tabIdMap.set(sourceTab.id, recreated.id);
       }
-      const nextPrimaryTabId = (state.primaryTabId !== null ? tabIdMap.get(state.primaryTabId) : void 0) ?? firstTab?.id ?? recreatedTabs[0]?.id ?? null;
+      const nextPrimaryTabId = (state.primaryTabId !== null ? tabIdMap.get(state.primaryTabId) : void 0) ?? recreatedTabs[0]?.id ?? null;
       const nextActiveTabId = (state.activeTabId !== null ? tabIdMap.get(state.activeTabId) : void 0) ?? nextPrimaryTabId ?? recreatedTabs[0]?.id ?? null;
       if (nextActiveTabId !== null) {
         await this.browser.updateTab(nextActiveTabId, { active: true });
@@ -1113,7 +1162,10 @@
         tabIds: [...state.tabIds]
       });
       for (const bindingTab of ownership.bindingTabs) {
-        await this.browser.closeTab(bindingTab.id);
+        try {
+          await this.browser.closeTab(bindingTab.id);
+        } catch {
+        }
       }
       return {
         window: window2,
@@ -1145,6 +1197,57 @@
       }
       return ordered;
     }
+    async findSharedBindingWindow(bindingId, excludedWindowIds = []) {
+      const peers = (await this.storage.list()).filter((candidate) => candidate.id !== bindingId);
+      const candidateWindowIds = [];
+      const peerTabIds = /* @__PURE__ */ new Set();
+      const peerGroupIds = /* @__PURE__ */ new Set();
+      const pushWindowId = (windowId) => {
+        if (typeof windowId !== "number") {
+          return;
+        }
+        if (excludedWindowIds.includes(windowId) || candidateWindowIds.includes(windowId)) {
+          return;
+        }
+        candidateWindowIds.push(windowId);
+      };
+      for (const peer of peers) {
+        pushWindowId(peer.windowId);
+        if (peer.groupId !== null) {
+          peerGroupIds.add(peer.groupId);
+          const group = await this.waitForGroup(peer.groupId, 300);
+          pushWindowId(group?.windowId);
+        }
+        const trackedTabIds = this.collectCandidateTabIds(peer);
+        for (const trackedTabId of trackedTabIds) {
+          peerTabIds.add(trackedTabId);
+        }
+        const trackedTabs = await this.readLooseTrackedTabs(trackedTabIds);
+        for (const tab of trackedTabs) {
+          pushWindowId(tab.windowId);
+        }
+      }
+      for (const windowId of candidateWindowIds) {
+        const window2 = await this.waitForWindow(windowId, 300);
+        if (window2) {
+          const windowTabs = await this.waitForWindowTabs(window2.id, 300);
+          const ownedTabs = windowTabs.filter(
+            (tab) => peerTabIds.has(tab.id) || tab.groupId !== null && peerGroupIds.has(tab.groupId)
+          );
+          if (ownedTabs.length === 0) {
+            continue;
+          }
+          const foreignTabs = windowTabs.filter(
+            (tab) => !peerTabIds.has(tab.id) && (tab.groupId === null || !peerGroupIds.has(tab.groupId))
+          );
+          if (foreignTabs.length > 0) {
+            continue;
+          }
+          return window2;
+        }
+      }
+      return null;
+    }
     async recoverBindingTabs(state, existingTabs) {
       if (state.windowId === null) {
         return existingTabs;
@@ -1171,6 +1274,19 @@
       }
       return existingTabs;
     }
+    async collectBindingTabsForClose(state) {
+      const trackedTabs = await this.readLooseTrackedTabs(this.collectCandidateTabIds(state));
+      if (state.windowId === null || state.groupId === null) {
+        return trackedTabs;
+      }
+      const windowTabs = await this.waitForWindowTabs(state.windowId, 300);
+      const groupedTabs = windowTabs.filter((tab) => tab.groupId === state.groupId);
+      const merged = /* @__PURE__ */ new Map();
+      for (const tab of [...trackedTabs, ...groupedTabs]) {
+        merged.set(tab.id, tab);
+      }
+      return [...merged.values()];
+    }
     async createBindingTab(options) {
       if (options.windowId === null) {
         throw new Error("Binding window is unavailable");
@@ -1200,6 +1316,7 @@
         return null;
       }
       let tabs = await this.readTrackedTabs(state.tabIds, state.windowId);
+      tabs = await this.recoverBindingTabs(state, tabs);
       const activeTab = state.activeTabId !== null ? await this.waitForTrackedTab(state.activeTabId, state.windowId, 300) : null;
       if (activeTab && !tabs.some((tab) => tab.id === activeTab.id)) {
         tabs = [...tabs, activeTab];

package/dist/manifest.json

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

package/dist/popup.global.js

@@ -2,10 +2,12 @@
 (() => {
   // src/popup.ts
   var statusEl = document.getElementById("status");
+  var statusNoteEl = document.getElementById("statusNote");
   var tokenInput = document.getElementById("token");
   var portInput = document.getElementById("port");
   var debugRichTextInput = document.getElementById("debugRichText");
   var saveBtn = document.getElementById("save");
+  var saveRowEl = document.getElementById("saveRow");
   var reconnectBtn = document.getElementById("reconnect");
   var disconnectBtn = document.getElementById("disconnect");
   var connectionStateEl = document.getElementById("connectionState");
@@ -18,9 +20,24 @@
   var sessionSummaryEl = document.getElementById("sessionSummary");
   var sessionListEl = document.getElementById("sessionList");
   var latestState = null;
-  function setStatus(text, bad = false) {
+  function setStatus(text, tone = "neutral") {
     statusEl.textContent = text;
-    statusEl.style.color = bad ? "#dc2626" : "#0f172a";
+    if (tone === "success") {
+      statusEl.style.color = "#166534";
+      return;
+    }
+    if (tone === "warning") {
+      statusEl.style.color = "#b45309";
+      return;
+    }
+    if (tone === "error") {
+      statusEl.style.color = "#dc2626";
+      return;
+    }
+    statusEl.style.color = "#0f172a";
+  }
+  function pluralize(count, singular, plural = `${singular}s`) {
+    return `${count} ${count === 1 ? singular : plural}`;
   }
   function formatTimeAgo(at) {
     if (typeof at !== "number") {
@@ -41,7 +58,11 @@
     return `${deltaHours}h ago`;
   }
   function renderSessionBindings(state) {
-    sessionSummaryEl.textContent = `${state.count} sessions, ${state.attachedCount} attached, ${state.tabCount} tabs, ${state.detachedCount} detached`;
+    if (state.count === 0) {
+      sessionSummaryEl.textContent = "No remembered sessions";
+    } else {
+      sessionSummaryEl.textContent = `${pluralize(state.count, "session")}, ${pluralize(state.attachedCount, "attached binding")}, ${pluralize(state.tabCount, "tab")}, ${pluralize(state.detachedCount, "detached binding")}`;
+    }
     sessionListEl.replaceChildren();
     for (const item of state.items) {
       const li = document.createElement("li");
@@ -54,8 +75,25 @@
       sessionListEl.appendChild(li);
     }
   }
+  function describeConnectionState(connectionState) {
+    switch (connectionState) {
+      case "connected":
+        return "connected";
+      case "connecting":
+        return "waiting for runtime";
+      case "reconnecting":
+        return "retrying connection";
+      case "manual":
+        return "manually disconnected";
+      case "missing-token":
+        return "token required";
+      case "disconnected":
+      default:
+        return "disconnected";
+    }
+  }
   function renderConnectionDetails(state) {
-    connectionStateEl.textContent = state.connectionState;
+    connectionStateEl.textContent = describeConnectionState(state.connectionState);
     tokenStateEl.textContent = state.hasToken ? "configured" : "missing";
     connectionUrlEl.textContent = state.wsUrl;
     extensionVersionEl.textContent = state.extensionVersion;
@@ -81,38 +119,110 @@
       lastBindingUpdateEl.textContent = "none";
     }
   }
+  function parsePortValue() {
+    const port = Number.parseInt(portInput.value.trim(), 10);
+    return Number.isInteger(port) && port > 0 ? port : null;
+  }
+  function isFormDirty(state) {
+    if (!state) {
+      return tokenInput.value.trim().length > 0;
+    }
+    return tokenInput.value.trim().length > 0 || portInput.value.trim() !== String(state.port) || debugRichTextInput.checked !== Boolean(state.debugRichText);
+  }
+  function getConfigValidationMessage(state) {
+    if (!tokenInput.value.trim() && state?.hasToken !== true) {
+      return "Pair token is required";
+    }
+    if (parsePortValue() === null) {
+      return "Port is invalid";
+    }
+    return null;
+  }
+  function updateSaveState(state) {
+    const dirty = isFormDirty(state);
+    const validationError = getConfigValidationMessage(state);
+    saveRowEl.hidden = !dirty;
+    saveBtn.disabled = !dirty || validationError !== null;
+    saveBtn.textContent = state?.hasToken ? "Save settings" : "Save token";
+  }
+  function describeStatus(state) {
+    const combinedError = `${state.lastErrorContext ?? ""} ${state.lastError ?? ""}`.toLowerCase();
+    const runtimeOffline = combinedError.includes("cannot connect to bak cli");
+    if (state.connected) {
+      return {
+        text: "Connected to local bak runtime",
+        note: "Use the bak CLI to start browser work. This popup is mainly for status and configuration.",
+        tone: "success"
+      };
+    }
+    if (state.connectionState === "missing-token") {
+      return {
+        text: "Pair token is required",
+        note: "Paste a token once, then save it. Future reconnects happen automatically.",
+        tone: "error"
+      };
+    }
+    if (state.connectionState === "manual") {
+      return {
+        text: "Extension bridge is paused",
+        note: "Normal browser work starts from the bak CLI. Open Advanced only if you need to reconnect manually.",
+        tone: "warning"
+      };
+    }
+    if (runtimeOffline) {
+      return {
+        text: "Waiting for local bak runtime",
+        note: "Run any bak command, such as `bak doctor`, and the extension will reconnect automatically.",
+        tone: "warning"
+      };
+    }
+    if (state.connectionState === "reconnecting") {
+      return {
+        text: "Trying to reconnect",
+        note: "The extension is retrying in the background. You usually do not need to press anything here.",
+        tone: "warning"
+      };
+    }
+    if (state.lastError) {
+      return {
+        text: "Connection problem",
+        note: "Check the last error below. The extension keeps retrying automatically unless you disconnect it manually.",
+        tone: "error"
+      };
+    }
+    return {
+      text: "Not connected yet",
+      note: "Once the local bak runtime is available, the extension reconnects automatically.",
+      tone: "neutral"
+    };
+  }
   async function refreshState() {
     const state = await chrome.runtime.sendMessage({ type: "bak.getState" });
     if (state.ok) {
+      const shouldSyncForm = !isFormDirty(latestState);
       latestState = state;
-      portInput.value = String(state.port);
-      debugRichTextInput.checked = Boolean(state.debugRichText);
+      if (shouldSyncForm) {
+        portInput.value = String(state.port);
+        debugRichTextInput.checked = Boolean(state.debugRichText);
+        tokenInput.value = "";
+      }
       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 {
-        setStatus("Disconnected");
-      }
+      updateSaveState(state);
+      const status = describeStatus(state);
+      setStatus(status.text, status.tone);
+      statusNoteEl.textContent = status.note;
     }
   }
   saveBtn.addEventListener("click", async () => {
     const token = tokenInput.value.trim();
-    const port = Number.parseInt(portInput.value.trim(), 10);
+    const port = parsePortValue();
     if (!token && latestState?.hasToken !== true) {
-      setStatus("Pair token is required", true);
+      setStatus("Pair token is required", "error");
       return;
     }
-    if (!Number.isInteger(port) || port <= 0) {
-      setStatus("Port is invalid", true);
+    if (port === null) {
+      setStatus("Port is invalid", "error");
       return;
     }
     await chrome.runtime.sendMessage({
@@ -132,6 +242,14 @@
     await chrome.runtime.sendMessage({ type: "bak.disconnect" });
     await refreshState();
   });
+  for (const element of [tokenInput, portInput, debugRichTextInput]) {
+    element.addEventListener("input", () => {
+      updateSaveState(latestState);
+    });
+    element.addEventListener("change", () => {
+      updateSaveState(latestState);
+    });
+  }
   void refreshState();
   var refreshInterval = window.setInterval(() => {
     void refreshState();

package/dist/popup.html

@@ -54,6 +54,9 @@
         gap: 8px;
         margin-top: 12px;
       }
+      .row[hidden] {
+        display: none;
+      }
       button {
         flex: 1;
         border: none;
@@ -62,6 +65,10 @@
         font-size: 12px;
         cursor: pointer;
       }
+      button:disabled {
+        opacity: 0.55;
+        cursor: default;
+      }
       #save {
         background: #0f172a;
         color: #fff;
@@ -79,6 +86,12 @@
         font-size: 12px;
         font-weight: 600;
       }
+      #statusNote {
+        margin-top: 4px;
+        font-size: 11px;
+        line-height: 1.45;
+        color: #475569;
+      }
       .panel {
         margin-top: 12px;
         padding: 10px;
@@ -120,6 +133,30 @@
         font-size: 11px;
         color: #334155;
       }
+      .hint.compact {
+        margin-top: 8px;
+      }
+      details.panel {
+        padding-bottom: 12px;
+      }
+      details.panel summary {
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 600;
+        list-style: none;
+      }
+      details.panel summary::-webkit-details-marker {
+        display: none;
+      }
+      details.panel summary::after {
+        content: "Show";
+        float: right;
+        font-size: 11px;
+        color: #64748b;
+      }
+      details.panel[open] summary::after {
+        content: "Hide";
+      }
     </style>
   </head>
   <body>
@@ -136,14 +173,11 @@
       <input id="debugRichText" type="checkbox" />
       <span class="toggle-text">Allow richer text capture for debugging (still redacted, off by default)</span>
     </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 id="statusNote">The extension reconnects automatically when the local bak runtime wakes up.</div>
+    <div class="row" id="saveRow" hidden>
+      <button id="save">Save settings</button>
+    </div>
     <div class="panel">
       <h2>Connection</h2>
       <dl class="meta-grid">
@@ -171,6 +205,14 @@
       </dl>
       <ul id="sessionList"></ul>
     </div>
+    <details class="panel" id="advancedPanel">
+      <summary>Advanced bridge controls</summary>
+      <div class="hint compact">These controls are only for debugging the extension bridge. Normal browser work should start from the bak CLI.</div>
+      <div class="row">
+        <button id="reconnect">Reconnect bridge</button>
+        <button id="disconnect">Disconnect bridge</button>
+      </div>
+    </details>
     <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.6",
+  "version": "0.6.8",
   "type": "module",
   "dependencies": {
-    "@flrande/bak-protocol": "0.6.6"
+    "@flrande/bak-protocol": "0.6.8"
   },
   "devDependencies": {
     "@types/chrome": "^0.1.14",