@flrande/bak-extension 0.6.4 → 0.6.5

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

@@ -1 +1 @@
-2026-03-12T15:53:45.600Z
+2026-03-13T06:30:44.568Z

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.5",
     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",
@@ -838,22 +838,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
         };
       }
@@ -1333,11 +1320,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 +1364,7 @@
       reconnectTimer = null;
     }
     nextReconnectInMs = null;
+    nextReconnectAt = null;
   }
   function sendResponse(payload) {
     if (ws && ws.readyState === WebSocket.OPEN) {
@@ -1469,6 +1460,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 +1542,8 @@
     };
   }
   function emitSessionBindingUpdated(bindingId, reason, state, extras = {}) {
+    lastBindingUpdateAt = Date.now();
+    lastBindingUpdateReason = reason;
     sendEvent("sessionBinding.updated", {
       bindingId,
       reason,
@@ -3311,9 +3363,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 +3388,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 +3425,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 +3449,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 +3509,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 +3529,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 +3541,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 +3550,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.5",
   "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.5",
   "type": "module",
   "dependencies": {
-    "@flrande/bak-protocol": "0.6.4"
+    "@flrande/bak-protocol": "0.6.5"
   },
   "devDependencies": {
     "@types/chrome": "^0.1.14",

package/public/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/src/background.ts

@@ -59,11 +59,47 @@ interface ExtensionConfig {
   debugRichText: boolean;
 }
 
-interface RuntimeErrorDetails {
-  message: string;
-  context: 'config' | 'socket' | 'request' | 'parse';
-  at: number;
-}
+interface RuntimeErrorDetails {
+  message: string;
+  context: 'config' | 'socket' | 'request' | 'parse';
+  at: number;
+}
+
+interface PopupSessionBindingSummary {
+  id: string;
+  label: string;
+  tabCount: number;
+  activeTabId: number | null;
+  windowId: number | null;
+  groupId: number | null;
+  detached: boolean;
+}
+
+interface PopupState {
+  ok: true;
+  connected: boolean;
+  connectionState: 'connected' | 'connecting' | 'reconnecting' | 'disconnected' | 'manual' | 'missing-token';
+  hasToken: boolean;
+  port: number;
+  wsUrl: string;
+  debugRichText: boolean;
+  lastError: string | null;
+  lastErrorAt: number | null;
+  lastErrorContext: RuntimeErrorDetails['context'] | null;
+  reconnectAttempt: number;
+  nextReconnectInMs: number | null;
+  manualDisconnect: boolean;
+  extensionVersion: string;
+  lastBindingUpdateAt: number | null;
+  lastBindingUpdateReason: string | null;
+  sessionBindings: {
+    count: number;
+    attachedCount: number;
+    detachedCount: number;
+    tabCount: number;
+    items: PopupSessionBindingSummary[];
+  };
+}
 
 const DEFAULT_PORT = 17373;
 const STORAGE_KEY_TOKEN = 'pairToken';
@@ -112,11 +148,14 @@ const REPLAY_FORBIDDEN_HEADER_NAMES = new Set([
 let ws: WebSocket | null = null;
 let reconnectTimer: number | null = null;
 let nextReconnectInMs: number | null = null;
+let nextReconnectAt: number | null = null;
 let reconnectAttempt = 0;
 let lastError: RuntimeErrorDetails | null = null;
 let manualDisconnect = false;
 let sessionBindingStateMutationQueue: Promise<void> = Promise.resolve();
 let preserveHumanFocusDepth = 0;
+let lastBindingUpdateAt: number | null = null;
+let lastBindingUpdateReason: string | null = null;
 
 async function getConfig(): Promise<ExtensionConfig> {
   const stored = await chrome.storage.local.get([STORAGE_KEY_TOKEN, STORAGE_KEY_PORT, STORAGE_KEY_DEBUG_RICH_TEXT]);
@@ -151,13 +190,14 @@ function setRuntimeError(message: string, context: RuntimeErrorDetails['context'
   };
 }
 
-function clearReconnectTimer(): void {
-  if (reconnectTimer !== null) {
-    clearTimeout(reconnectTimer);
-    reconnectTimer = null;
-  }
-  nextReconnectInMs = null;
-}
+function clearReconnectTimer(): void {
+  if (reconnectTimer !== null) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+  nextReconnectInMs = null;
+  nextReconnectAt = null;
+}
 
 function sendResponse(payload: CliResponse): void {
   if (ws && ws.readyState === WebSocket.OPEN) {
@@ -264,9 +304,71 @@ async function loadSessionBindingState(bindingId: string): Promise<SessionBindin
   return stateMap[bindingId] ?? null;
 }
 
-async function listSessionBindingStates(): Promise<SessionBindingRecord[]> {
-  return Object.values(await loadSessionBindingStateMap());
-}
+async function listSessionBindingStates(): Promise<SessionBindingRecord[]> {
+  return Object.values(await loadSessionBindingStateMap());
+}
+
+function summarizeSessionBindings(states: SessionBindingRecord[]): PopupState['sessionBindings'] {
+  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
+    } satisfies PopupSessionBindingSummary;
+  });
+  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(): Promise<PopupState> {
+  const config = await getConfig();
+  const sessionBindings = summarizeSessionBindings(await listSessionBindingStates());
+  const reconnectRemainingMs = nextReconnectAt === null ? null : Math.max(0, nextReconnectAt - Date.now());
+  let connectionState: PopupState['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: SessionBindingRecord): Promise<void> {
   await mutateSessionBindingStateMap((stateMap) => {
@@ -299,6 +401,8 @@ function emitSessionBindingUpdated(
   state: SessionBindingRecord | null,
   extras: Record<string, unknown> = {}
 ): void {
+  lastBindingUpdateAt = Date.now();
+  lastBindingUpdateReason = reason;
   sendEvent('sessionBinding.updated', {
     bindingId,
     reason,
@@ -2336,14 +2440,16 @@ function scheduleReconnect(reason: string): void {
     return;
   }
 
-  const delayMs = computeReconnectDelayMs(reconnectAttempt);
-  reconnectAttempt += 1;
-  nextReconnectInMs = delayMs;
-  reconnectTimer = setTimeout(() => {
-    reconnectTimer = null;
-    nextReconnectInMs = null;
-    void connectWebSocket();
-  }, delayMs) as unknown as number;
+  const delayMs = computeReconnectDelayMs(reconnectAttempt);
+  reconnectAttempt += 1;
+  nextReconnectInMs = delayMs;
+  nextReconnectAt = Date.now() + delayMs;
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    nextReconnectInMs = null;
+    nextReconnectAt = null;
+    void connectWebSocket();
+  }, delayMs) as unknown as number;
 
   if (!lastError) {
     setRuntimeError(`Reconnect scheduled: ${reason}`, 'socket');
@@ -2366,26 +2472,30 @@ async function connectWebSocket(): Promise<void> {
     return;
   }
 
-  const url = `ws://127.0.0.1:${config.port}/extension?token=${encodeURIComponent(config.token)}`;
-  ws = new WebSocket(url);
-
-  ws.addEventListener('open', () => {
-    manualDisconnect = false;
-    reconnectAttempt = 0;
-    lastError = null;
-    ws?.send(JSON.stringify({
+  const url = `ws://127.0.0.1:${config.port}/extension?token=${encodeURIComponent(config.token)}`;
+  const socket = new WebSocket(url);
+  ws = socket;
+
+  socket.addEventListener('open', () => {
+    if (ws !== socket) {
+      return;
+    }
+    manualDisconnect = false;
+    reconnectAttempt = 0;
+    lastError = null;
+    socket.send(JSON.stringify({
       type: 'hello',
       role: 'extension',
       version: EXTENSION_VERSION,
       ts: Date.now()
     }));
   });
-
-  ws.addEventListener('message', (event) => {
-    try {
-      const request = JSON.parse(String(event.data)) as CliRequest;
-      if (!request.id || !request.method) {
-        return;
+
+  socket.addEventListener('message', (event) => {
+    try {
+      const request = JSON.parse(String(event.data)) as CliRequest;
+      if (!request.id || !request.method) {
+        return;
       }
       void handleRequest(request)
         .then((result) => {
@@ -2402,29 +2512,40 @@ async function connectWebSocket(): Promise<void> {
         ok: false,
         error: toError('E_INTERNAL', error instanceof Error ? error.message : String(error))
       });
-    }
-  });
-
-  ws.addEventListener('close', () => {
-    ws = null;
-    scheduleReconnect('socket-closed');
-  });
-
-  ws.addEventListener('error', () => {
-    setRuntimeError('Cannot connect to bak cli', 'socket');
-    ws?.close();
-  });
-}
+    }
+  });
+
+  socket.addEventListener('close', () => {
+    if (ws !== socket) {
+      return;
+    }
+    ws = null;
+    scheduleReconnect('socket-closed');
+  });
+
+  socket.addEventListener('error', () => {
+    if (ws !== socket) {
+      return;
+    }
+    setRuntimeError('Cannot connect to bak cli', 'socket');
+    socket.close();
+  });
+}
 
 chrome.tabs.onRemoved.addListener((tabId) => {
   dropNetworkCapture(tabId);
   void mutateSessionBindingStateMap((stateMap) => {
-    const updates: Array<{ bindingId: string; state: SessionBindingRecord }> = [];
+    const updates: Array<{ bindingId: string; state: SessionBindingRecord | null }> = [];
     for (const [bindingId, state] of Object.entries(stateMap)) {
       if (!state.tabIds.includes(tabId)) {
         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: SessionBindingRecord = {
         ...state,
@@ -2482,21 +2603,13 @@ chrome.tabs.onActivated.addListener((activeInfo) => {
 
 chrome.windows.onRemoved.addListener((windowId) => {
   void mutateSessionBindingStateMap((stateMap) => {
-    const updates: Array<{ bindingId: string; state: SessionBindingRecord }> = [];
+    const updates: Array<{ bindingId: string; state: SessionBindingRecord | null }> = [];
     for (const [bindingId, state] of Object.entries(stateMap)) {
       if (state.windowId !== windowId) {
         continue;
       }
-      const nextState: SessionBindingRecord = {
-        ...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) => {
@@ -2517,48 +2630,49 @@ chrome.runtime.onStartup.addListener(() => {
 void connectWebSocket();
 
 chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-  if (message?.type === 'bak.updateConfig') {
-    manualDisconnect = false;
-    void setConfig({
-      token: message.token,
-      port: Number(message.port ?? DEFAULT_PORT),
-      debugRichText: message.debugRichText === true
-    }).then(() => {
-      ws?.close();
-      void connectWebSocket().then(() => sendResponse({ ok: true }));
-    });
-    return true;
-  }
-
-  if (message?.type === 'bak.getState') {
-    void getConfig().then((config) => {
-      sendResponse({
-        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
-      });
-    });
-    return true;
-  }
-
-  if (message?.type === 'bak.disconnect') {
-    manualDisconnect = true;
-    clearReconnectTimer();
-    reconnectAttempt = 0;
-    ws?.close();
-    ws = null;
-    sendResponse({ ok: true });
-    return false;
-  }
+  if (message?.type === 'bak.updateConfig') {
+    manualDisconnect = false;
+    const token = typeof message.token === 'string' ? message.token.trim() : '';
+    void setConfig({
+      ...(token ? { token } : {}),
+      port: Number(message.port ?? DEFAULT_PORT),
+      debugRichText: message.debugRichText === true
+    }).then(() => {
+      ws?.close();
+      void connectWebSocket().then(() => sendResponse({ ok: true }));
+    });
+    return true;
+  }
 
-  return false;
-});
+  if (message?.type === 'bak.getState') {
+    void buildPopupState().then((state) => {
+      sendResponse(state);
+    });
+    return true;
+  }
+
+  if (message?.type === 'bak.disconnect') {
+    manualDisconnect = true;
+    clearReconnectTimer();
+    reconnectAttempt = 0;
+    lastError = null;
+    ws?.close();
+    ws = null;
+    sendResponse({ ok: true });
+    return false;
+  }
+
+  if (message?.type === 'bak.reconnectNow') {
+    manualDisconnect = false;
+    clearReconnectTimer();
+    reconnectAttempt = 0;
+    ws?.close();
+    ws = null;
+    void connectWebSocket().then(() => sendResponse({ ok: true }));
+    return true;
+  }
+
+  return false;
+});
 
 

package/src/popup.ts

@@ -3,28 +3,140 @@ const tokenInput = document.getElementById('token') as HTMLInputElement;
 const portInput = document.getElementById('port') as HTMLInputElement;
 const debugRichTextInput = document.getElementById('debugRichText') as HTMLInputElement;
 const saveBtn = document.getElementById('save') as HTMLButtonElement;
+const reconnectBtn = document.getElementById('reconnect') as HTMLButtonElement;
 const disconnectBtn = document.getElementById('disconnect') as HTMLButtonElement;
+const connectionStateEl = document.getElementById('connectionState') as HTMLDivElement;
+const tokenStateEl = document.getElementById('tokenState') as HTMLDivElement;
+const reconnectStateEl = document.getElementById('reconnectState') as HTMLDivElement;
+const connectionUrlEl = document.getElementById('connectionUrl') as HTMLDivElement;
+const lastErrorEl = document.getElementById('lastError') as HTMLDivElement;
+const lastBindingUpdateEl = document.getElementById('lastBindingUpdate') as HTMLDivElement;
+const extensionVersionEl = document.getElementById('extensionVersion') as HTMLDivElement;
+const sessionSummaryEl = document.getElementById('sessionSummary') as HTMLDivElement;
+const sessionListEl = document.getElementById('sessionList') as HTMLUListElement;
+
+interface PopupState {
+  ok: boolean;
+  connected: boolean;
+  connectionState: 'connected' | 'connecting' | 'reconnecting' | 'disconnected' | 'manual' | 'missing-token';
+  hasToken: boolean;
+  port: number;
+  wsUrl: string;
+  debugRichText: boolean;
+  lastError: string | null;
+  lastErrorAt: number | null;
+  lastErrorContext: string | null;
+  reconnectAttempt: number;
+  nextReconnectInMs: number | null;
+  manualDisconnect: boolean;
+  extensionVersion: string;
+  lastBindingUpdateAt: number | null;
+  lastBindingUpdateReason: string | null;
+  sessionBindings: {
+    count: number;
+    attachedCount: number;
+    detachedCount: number;
+    tabCount: number;
+    items: Array<{
+      id: string;
+      label: string;
+      tabCount: number;
+      activeTabId: number | null;
+      windowId: number | null;
+      groupId: number | null;
+      detached: boolean;
+    }>;
+  };
+}
+let latestState: PopupState | null = null;
 
 function setStatus(text: string, bad = false): void {
   statusEl.textContent = text;
   statusEl.style.color = bad ? '#dc2626' : '#0f172a';
 }
 
+function formatTimeAgo(at: number | null): string {
+  if (typeof at !== 'number') {
+    return 'never';
+  }
+  const deltaSeconds = Math.max(0, Math.round((Date.now() - at) / 1000));
+  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: PopupState['sessionBindings']): void {
+  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: PopupState): void {
+  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(): Promise<void> {
-  const state = (await chrome.runtime.sendMessage({ type: 'bak.getState' })) as {
-    ok: boolean;
-    connected: boolean;
-    hasToken: boolean;
-    port: number;
-    debugRichText: boolean;
-    lastError: string | null;
-  };
+  const state = (await chrome.runtime.sendMessage({ type: 'bak.getState' })) as PopupState;
 
   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 {
@@ -37,7 +149,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;
   }
@@ -49,11 +161,17 @@ saveBtn.addEventListener('click', async () => {
 
   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();
 });
 
@@ -62,4 +180,10 @@ disconnectBtn.addEventListener('click', async () => {
   await refreshState();
 });
 
-void refreshState();
+void refreshState();
+const refreshInterval = window.setInterval(() => {
+  void refreshState();
+}, 1000);
+window.addEventListener('unload', () => {
+  window.clearInterval(refreshInterval);
+});

package/src/session-binding.ts

@@ -451,22 +451,9 @@ class SessionBindingManager {
     const remainingTabIds = ensured.binding.tabIds.filter((candidate) => candidate !== resolvedTabId);
 
     if (remainingTabIds.length === 0) {
-      const emptied: SessionBindingRecord = {
-        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
       };
     }