@flrande/bak-extension 0.6.3 → 0.6.5

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

@@ -88,18 +88,20 @@ interface SessionBindingWindowOwnership {
   foreignTabs: SessionBindingTab[];
 }
 
-export interface SessionBindingEnsureOptions {
-  bindingId?: string;
-  focus?: boolean;
-  initialUrl?: string;
-}
-
-export interface SessionBindingOpenTabOptions {
-  bindingId?: string;
-  url?: string;
-  active?: boolean;
-  focus?: boolean;
-}
+export interface SessionBindingEnsureOptions {
+  bindingId?: string;
+  focus?: boolean;
+  initialUrl?: string;
+  label?: string;
+}
+
+export interface SessionBindingOpenTabOptions {
+  bindingId?: string;
+  url?: string;
+  active?: boolean;
+  focus?: boolean;
+  label?: string;
+}
 
 export interface SessionBindingResolveTargetOptions {
   tabId?: number;
@@ -120,13 +122,13 @@ class SessionBindingManager {
     return this.inspectBinding(bindingId);
   }
 
-  async ensureBinding(options: SessionBindingEnsureOptions = {}): Promise<SessionBindingEnsureResult> {
-    const bindingId = this.normalizeBindingId(options.bindingId);
-    const repairActions: string[] = [];
-    const initialUrl = options.initialUrl ?? DEFAULT_SESSION_BINDING_URL;
-    const persisted = await this.storage.load(bindingId);
-    const created = !persisted;
-    let state = this.normalizeState(persisted, bindingId);
+  async ensureBinding(options: SessionBindingEnsureOptions = {}): Promise<SessionBindingEnsureResult> {
+    const bindingId = this.normalizeBindingId(options.bindingId);
+    const repairActions: string[] = [];
+    const initialUrl = options.initialUrl ?? DEFAULT_SESSION_BINDING_URL;
+    const persisted = await this.storage.load(bindingId);
+    const created = !persisted;
+    let state = this.normalizeState(persisted, bindingId, options.label);
 
     const originalWindowId = state.windowId;
     let window = state.windowId !== null ? await this.waitForWindow(state.windowId) : null;
@@ -266,14 +268,15 @@ class SessionBindingManager {
     };
   }
 
-  async openTab(options: SessionBindingOpenTabOptions = {}): Promise<{ binding: SessionBindingInfo; tab: SessionBindingTab }> {
-    const bindingId = this.normalizeBindingId(options.bindingId);
-    const hadBinding = (await this.loadBindingRecord(bindingId)) !== null;
-    const ensured = await this.ensureBinding({
-      bindingId,
-      focus: false,
-      initialUrl: hadBinding ? options.url ?? DEFAULT_SESSION_BINDING_URL : DEFAULT_SESSION_BINDING_URL
-    });
+  async openTab(options: SessionBindingOpenTabOptions = {}): Promise<{ binding: SessionBindingInfo; tab: SessionBindingTab }> {
+    const bindingId = this.normalizeBindingId(options.bindingId);
+    const hadBinding = (await this.loadBindingRecord(bindingId)) !== null;
+    const ensured = await this.ensureBinding({
+      bindingId,
+      focus: false,
+      initialUrl: hadBinding ? options.url ?? DEFAULT_SESSION_BINDING_URL : DEFAULT_SESSION_BINDING_URL,
+      label: options.label
+    });
     let state = { ...ensured.binding, tabIds: [...ensured.binding.tabIds], tabs: [...ensured.binding.tabs] };
     if (state.windowId !== null && state.tabs.length === 0) {
       const rebound = await this.rebindBindingWindow(state);
@@ -309,11 +312,12 @@ class SessionBindingManager {
       if (!this.isMissingWindowError(error)) {
         throw error;
       }
-      const repaired = await this.ensureBinding({
-        bindingId,
-        focus: false,
-        initialUrl: desiredUrl
-      });
+      const repaired = await this.ensureBinding({
+        bindingId,
+        focus: false,
+        initialUrl: desiredUrl,
+        label: options.label
+      });
       state = { ...repaired.binding };
       reusablePrimaryTab = await this.resolveReusablePrimaryTab(state, true);
       createdTab = reusablePrimaryTab
@@ -421,44 +425,94 @@ class SessionBindingManager {
     };
   }
 
-  async focus(bindingId: string): Promise<{ ok: true; binding: SessionBindingInfo }> {
-    const ensured = await this.ensureBinding({ bindingId, focus: false });
-    if (ensured.binding.activeTabId !== null) {
-      await this.browser.updateTab(ensured.binding.activeTabId, { active: true });
-    }
+  async focus(bindingId: string): Promise<{ ok: true; binding: SessionBindingInfo }> {
+    const ensured = await this.ensureBinding({ bindingId, focus: false });
+    if (ensured.binding.activeTabId !== null) {
+      await this.browser.updateTab(ensured.binding.activeTabId, { active: true });
+    }
     if (ensured.binding.windowId !== null) {
       await this.browser.updateWindow(ensured.binding.windowId, { focused: true });
     }
-    const refreshed = await this.ensureBinding({ bindingId, focus: false });
-    return { ok: true, binding: refreshed.binding };
-  }
-
-  async reset(options: SessionBindingEnsureOptions = {}): Promise<SessionBindingEnsureResult> {
-    const bindingId = this.normalizeBindingId(options.bindingId);
-    await this.close(bindingId);
+    const refreshed = await this.ensureBinding({ bindingId, focus: false });
+    return { ok: true, binding: refreshed.binding };
+  }
+
+  async closeTab(bindingId: string, tabId?: number): Promise<{ binding: SessionBindingInfo | null; closedTabId: number }> {
+    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)) {
+      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);
+
+    if (remainingTabIds.length === 0) {
+      await this.storage.delete(ensured.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 nextState: SessionBindingRecord = {
+      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,
+      tabIds: tabs.map((candidate) => candidate.id),
+      activeTabId: nextActiveTabId,
+      primaryTabId: nextPrimaryTabId
+    };
+    await this.storage.save(nextState);
+    return {
+      binding: {
+        ...nextState,
+        tabs
+      },
+      closedTabId: resolvedTabId
+    };
+  }
+
+  async reset(options: SessionBindingEnsureOptions = {}): Promise<SessionBindingEnsureResult> {
+    const bindingId = this.normalizeBindingId(options.bindingId);
+    await this.close(bindingId);
     return this.ensureBinding({
       ...options,
       bindingId
     });
   }
 
-  async close(bindingId: string): Promise<{ ok: true }> {
-    const state = await this.loadBindingRecord(bindingId);
-    if (!state) {
-      await this.storage.delete(bindingId);
-      return { ok: true };
-    }
-    // Clear persisted state before closing the window so tab/window removal
-    // listeners cannot race and resurrect an empty binding record.
-    await this.storage.delete(bindingId);
-    if (state.windowId !== null) {
-      const existingWindow = await this.browser.getWindow(state.windowId);
-      if (existingWindow) {
-        await this.browser.closeWindow(state.windowId);
-      }
-    }
-    return { ok: true };
-  }
+  async close(bindingId: string): Promise<{ ok: true }> {
+    const state = await this.loadBindingRecord(bindingId);
+    if (!state) {
+      await this.storage.delete(bindingId);
+      return { ok: true };
+    }
+    // Clear persisted state before closing the window so tab/window removal
+    // listeners cannot race and resurrect an empty binding record.
+    await this.storage.delete(bindingId);
+    const trackedTabs = await this.readLooseTrackedTabs(this.collectCandidateTabIds(state));
+    for (const trackedTab of trackedTabs) {
+      try {
+        await this.browser.closeTab(trackedTab.id);
+      } catch {
+        // Ignore tabs that were already removed before explicit close.
+      }
+    }
+    return { ok: true };
+  }
 
   async resolveTarget(options: SessionBindingResolveTargetOptions = {}): Promise<SessionBindingTargetResolution> {
     if (typeof options.tabId === 'number') {
@@ -511,13 +565,13 @@ class SessionBindingManager {
     return candidate;
   }
 
-  private normalizeState(state: SessionBindingRecord | null, bindingId: string): SessionBindingRecord {
-    return {
-      id: bindingId,
-      label: state?.label ?? DEFAULT_SESSION_BINDING_LABEL,
-      color: state?.color ?? DEFAULT_SESSION_BINDING_COLOR,
-      windowId: state?.windowId ?? null,
-      groupId: state?.groupId ?? null,
+  private normalizeState(state: SessionBindingRecord | null, bindingId: string, label?: string): SessionBindingRecord {
+    return {
+      id: bindingId,
+      label: label?.trim() ? label.trim() : state?.label ?? DEFAULT_SESSION_BINDING_LABEL,
+      color: state?.color ?? DEFAULT_SESSION_BINDING_COLOR,
+      windowId: state?.windowId ?? null,
+      groupId: state?.groupId ?? null,
       tabIds: state?.tabIds ?? [],
       activeTabId: state?.activeTabId ?? null,
       primaryTabId: state?.primaryTabId ?? null
@@ -710,12 +764,16 @@ class SessionBindingManager {
       await this.browser.updateTab(nextActiveTabId, { active: true });
     }
 
-    state.windowId = window.id;
-    state.groupId = null;
-    state.tabIds = recreatedTabs.map((tab) => tab.id);
-    state.primaryTabId = nextPrimaryTabId;
-    state.activeTabId = nextActiveTabId;
-
+    state.windowId = window.id;
+    state.groupId = null;
+    state.tabIds = recreatedTabs.map((tab) => tab.id);
+    state.primaryTabId = nextPrimaryTabId;
+    state.activeTabId = nextActiveTabId;
+    await this.storage.save({
+      ...state,
+      tabIds: [...state.tabIds]
+    });
+
     for (const bindingTab of ownership.bindingTabs) {
       await this.browser.closeTab(bindingTab.id);
     }