@flrande/bak-extension 0.6.4 → 0.6.6

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,
@@ -307,7 +411,7 @@ function emitSessionBindingUpdated(
   });
 }
 
-const sessionBindingBrowser: SessionBindingBrowser = {
+const sessionBindingBrowser: SessionBindingBrowser = {
   async getTab(tabId) {
     try {
       return toTabInfo(await chrome.tabs.get(tabId));
@@ -364,34 +468,71 @@ const sessionBindingBrowser: SessionBindingBrowser = {
       return null;
     }
   },
-  async createWindow(options) {
-    const previouslyFocusedWindow =
-      options.focused === true
-        ? null
-        : (await chrome.windows.getAll()).find((window) => window.focused === true && typeof window.id === 'number') ?? null;
-    const previouslyFocusedTab =
-      previouslyFocusedWindow?.id !== undefined
-        ? (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',
-      focused: true
-    });
-    if (!created || typeof created.id !== 'number') {
-      throw new Error('Window missing id');
-    }
-    if (options.focused !== true && previouslyFocusedWindow?.id && previouslyFocusedWindow.id !== created.id) {
-      await chrome.windows.update(previouslyFocusedWindow.id, { focused: true });
-      if (typeof previouslyFocusedTab?.id === 'number') {
-        await chrome.tabs.update(previouslyFocusedTab.id, { active: true });
-      }
+  async createWindow(options) {
+    const previouslyFocusedWindow =
+      options.focused === true
+        ? null
+        : (await chrome.windows.getAll()).find((window) => window.focused === true && typeof window.id === 'number') ?? null;
+    const previouslyFocusedTabs =
+      previouslyFocusedWindow?.id !== undefined ? 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: number): Promise<chrome.tabs.Tab | null> => {
+      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') {
+        await chrome.tabs.update(previouslyFocusedTab.id, { active: true });
+      }
     }
     const finalWindow = await chrome.windows.get(created.id);
-    return {
-      id: finalWindow.id!,
-      focused: Boolean(finalWindow.focused)
-    };
-  },
+    return {
+      id: finalWindow.id!,
+      focused: Boolean(finalWindow.focused),
+      initialTabId: seedTab?.id ?? null
+    };
+  },
   async updateWindow(windowId, options) {
     const updated = await chrome.windows.update(windowId, {
       focused: options.focused
@@ -2336,14 +2477,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 +2509,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 +2549,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 +2640,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 +2667,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;
+});