@flrande/bak-extension 0.6.11 → 0.6.13

package/src/popup.ts

@@ -1,5 +1,8 @@
+const statusPanelEl = document.getElementById('statusPanel') as HTMLDivElement;
+const statusBadgeEl = document.getElementById('statusBadge') as HTMLSpanElement;
 const statusEl = document.getElementById('status') as HTMLDivElement;
-const statusNoteEl = document.getElementById('statusNote') as HTMLDivElement;
+const statusBodyEl = document.getElementById('statusBody') as HTMLDivElement;
+const recoveryListEl = document.getElementById('recoveryList') as HTMLUListElement;
 const tokenInput = document.getElementById('token') as HTMLInputElement;
 const portInput = document.getElementById('port') as HTMLInputElement;
 const debugRichTextInput = document.getElementById('debugRichText') as HTMLInputElement;
@@ -15,7 +18,9 @@ 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;
+const sessionCardsEl = document.getElementById('sessionCards') as HTMLDivElement;
+
+type PopupTone = 'neutral' | 'success' | 'warning' | 'error';
 
 interface PopupState {
   ok: boolean;
@@ -44,31 +49,27 @@ interface PopupState {
       label: string;
       tabCount: number;
       activeTabId: number | null;
+      activeTabTitle: string | null;
+      activeTabUrl: string | null;
       windowId: number | null;
       groupId: number | null;
       detached: boolean;
+      lastBindingUpdateAt: number | null;
+      lastBindingUpdateReason: string | null;
     }>;
   };
 }
-let latestState: PopupState | null = null;
 
-function setStatus(text: string, tone: 'neutral' | 'success' | 'warning' | 'error' = 'neutral'): void {
-  statusEl.textContent = text;
-  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';
+interface StatusDescriptor {
+  badge: string;
+  title: string;
+  body: string;
+  tone: PopupTone;
+  recoverySteps: string[];
 }
 
+let latestState: PopupState | null = null;
+
 function pluralize(count: number, singular: string, plural = `${singular}s`): string {
   return `${count} ${count === 1 ? singular : plural}`;
 }
@@ -89,25 +90,31 @@ function formatTimeAgo(at: number | null): string {
     return `${deltaMinutes}m ago`;
   }
   const deltaHours = Math.round(deltaMinutes / 60);
-  return `${deltaHours}h ago`;
+  if (deltaHours < 48) {
+    return `${deltaHours}h ago`;
+  }
+  const deltaDays = Math.round(deltaHours / 24);
+  return `${deltaDays}d ago`;
 }
 
-function renderSessionBindings(state: PopupState['sessionBindings']): void {
-  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')}`;
+function truncate(value: string, maxLength: number): string {
+  if (value.length <= maxLength) {
+    return value;
   }
-  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);
+  return `${value.slice(0, Math.max(0, maxLength - 1))}...`;
+}
+
+function formatUrl(url: string | null): string {
+  if (!url) {
+    return 'No active tab URL';
+  }
+  try {
+    const parsed = new URL(url);
+    const trimmedPath = parsed.pathname === '/' ? '' : parsed.pathname;
+    const trimmedQuery = parsed.search.length > 0 ? parsed.search : '';
+    return truncate(`${parsed.host}${trimmedPath}${trimmedQuery}`, 64);
+  } catch {
+    return truncate(url, 64);
   }
 }
 
@@ -129,6 +136,127 @@ function describeConnectionState(connectionState: PopupState['connectionState'])
   }
 }
 
+function setStatus(descriptor: StatusDescriptor): void {
+  statusPanelEl.dataset.tone = descriptor.tone;
+  statusBadgeEl.dataset.tone = descriptor.tone;
+  statusBadgeEl.textContent = descriptor.badge;
+  statusEl.textContent = descriptor.title;
+  statusBodyEl.textContent = descriptor.body;
+  recoveryListEl.replaceChildren();
+  for (const step of descriptor.recoverySteps) {
+    const li = document.createElement('li');
+    li.textContent = step;
+    recoveryListEl.appendChild(li);
+  }
+}
+
+function describeStatus(state: PopupState): StatusDescriptor {
+  const lastError = `${state.lastErrorContext ?? ''} ${state.lastError ?? ''}`.toLowerCase();
+  const runtimeOffline = lastError.includes('cannot connect to bak cli');
+
+  if (state.connected) {
+    const body =
+      state.sessionBindings.detachedCount > 0
+        ? `${pluralize(state.sessionBindings.detachedCount, 'remembered session')} are detached. Check the cards below before you continue browser work.`
+        : 'The extension bridge is healthy and ready for CLI-driven browser work.';
+    return {
+      badge: 'Ready',
+      title: 'Connected to the local bak runtime',
+      body,
+      tone: 'success',
+      recoverySteps: state.sessionBindings.detachedCount > 0
+        ? [
+            'Resume or recreate detached work from the bak CLI before sending new page commands.',
+            'Use the Sessions panel below to confirm which remembered session lost its owned tabs.'
+          ]
+        : [
+            'Start browser work from the bak CLI.',
+            'Use Reconnect bridge only when you intentionally changed token or port settings.'
+          ]
+    };
+  }
+
+  if (state.connectionState === 'missing-token') {
+    return {
+      badge: 'Action needed',
+      title: 'Pair token is required',
+      body: 'This browser profile does not have a saved token yet, so the extension cannot pair with bak.',
+      tone: 'error',
+      recoverySteps: [
+        'Run `bak setup` if you need a fresh token.',
+        `Paste the token above, keep CLI port ${state.port}, and click Save settings.`,
+        'If the bridge still stays disconnected after saving, click Reconnect bridge below.'
+      ]
+    };
+  }
+
+  if (state.connectionState === 'manual') {
+    return {
+      badge: 'Paused',
+      title: 'Extension bridge is paused',
+      body: 'The bridge was manually disconnected. It will stay idle until you reconnect it.',
+      tone: 'warning',
+      recoverySteps: [
+        'Click Reconnect bridge below when you want the extension live again.',
+        'If you changed the token or port, save the new settings first.'
+      ]
+    };
+  }
+
+  if (runtimeOffline) {
+    return {
+      badge: 'Runtime offline',
+      title: 'The local bak runtime is not reachable',
+      body: `The extension cannot reach ${state.wsUrl}, so browser work cannot start yet.`,
+      tone: 'warning',
+      recoverySteps: [
+        `Run \`bak doctor --port ${state.port}\` in PowerShell 7.`,
+        'If you just upgraded bak, reload the unpacked extension in chrome://extensions or edge://extensions.',
+        'Leave this popup open for a moment after doctor so the bridge can retry.'
+      ]
+    };
+  }
+
+  if (state.connectionState === 'reconnecting') {
+    return {
+      badge: 'Retrying',
+      title: 'The extension is trying to reconnect',
+      body: 'The bridge is retrying in the background. You only need to intervene if the retry loop keeps failing.',
+      tone: 'warning',
+      recoverySteps: [
+        'Wait for the current retry window to finish.',
+        'If you changed the token or port, click Save settings.',
+        'Use Reconnect bridge below if you want to retry immediately.'
+      ]
+    };
+  }
+
+  if (state.lastError) {
+    return {
+      badge: 'Check setup',
+      title: 'The bridge needs attention',
+      body: `Last error: ${state.lastError}`,
+      tone: 'error',
+      recoverySteps: [
+        `Confirm the saved token and CLI port ${state.port}.`,
+        `Run \`bak doctor --port ${state.port}\` from the bak CLI.`,
+        'Reload the unpacked extension if the runtime and token both look correct.'
+      ]
+    };
+  }
+
+  return {
+    badge: 'Waiting',
+    title: 'Not connected yet',
+    body: 'The extension is ready to pair, but it is still waiting for the local bak runtime to come online.',
+    tone: 'neutral',
+    recoverySteps: [
+      `Run \`bak doctor --port ${state.port}\` or another bak CLI command to wake the runtime.`,
+      'Return here and confirm the bridge reconnects automatically.'
+    ]
+  };
+}
+
 function renderConnectionDetails(state: PopupState): void {
   connectionStateEl.textContent = describeConnectionState(state.connectionState);
   tokenStateEl.textContent = state.hasToken ? 'configured' : 'missing';
@@ -160,6 +288,107 @@ function renderConnectionDetails(state: PopupState): void {
   }
 }
 
+function createMetaRow(label: string, value: string): HTMLDivElement {
+  const row = document.createElement('div');
+  row.className = 'session-meta-row';
+
+  const labelEl = document.createElement('span');
+  labelEl.className = 'session-meta-label';
+  labelEl.textContent = label;
+
+  const valueEl = document.createElement('span');
+  valueEl.className = 'session-meta-value';
+  valueEl.textContent = value;
+
+  row.append(labelEl, valueEl);
+  return row;
+}
+
+function renderSessionBindings(state: PopupState['sessionBindings']): void {
+  if (state.count === 0) {
+    sessionSummaryEl.textContent = 'No remembered sessions';
+  } else {
+    sessionSummaryEl.textContent =
+      `${pluralize(state.count, 'session')}, ` +
+      `${pluralize(state.attachedCount, 'attached binding')}, ` +
+      `${pluralize(state.detachedCount, 'detached binding')}, ` +
+      `${pluralize(state.tabCount, 'tracked tab')}`;
+  }
+
+  sessionCardsEl.replaceChildren();
+
+  if (state.items.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'session-empty';
+    empty.textContent = 'No tracked sessions yet. Resolve a session from the bak CLI and it will appear here.';
+    sessionCardsEl.appendChild(empty);
+    return;
+  }
+
+  for (const item of state.items) {
+    const card = document.createElement('section');
+    card.className = 'session-card';
+    card.dataset.detached = item.detached ? 'true' : 'false';
+
+    const header = document.createElement('div');
+    header.className = 'session-card-header';
+
+    const titleWrap = document.createElement('div');
+    titleWrap.className = 'session-card-title-wrap';
+
+    const title = document.createElement('div');
+    title.className = 'session-card-title';
+    title.textContent = item.label;
+
+    const subtitle = document.createElement('div');
+    subtitle.className = 'session-card-subtitle';
+    subtitle.textContent = item.id;
+
+    titleWrap.append(title, subtitle);
+
+    const badge = document.createElement('span');
+    badge.className = 'session-badge';
+    badge.dataset.detached = item.detached ? 'true' : 'false';
+    badge.textContent = item.detached ? 'Detached' : 'Attached';
+
+    header.append(titleWrap, badge);
+
+    const activeTitle = document.createElement('div');
+    activeTitle.className = 'session-active-title';
+    activeTitle.textContent = item.activeTabTitle ? truncate(item.activeTabTitle, 72) : 'No active tab title';
+    activeTitle.title = item.activeTabTitle ?? '';
+
+    const activeUrl = document.createElement('div');
+    activeUrl.className = 'session-active-url';
+    activeUrl.textContent = formatUrl(item.activeTabUrl);
+    activeUrl.title = item.activeTabUrl ?? '';
+
+    const meta = document.createElement('div');
+    meta.className = 'session-meta-grid';
+    meta.append(
+      createMetaRow('Active tab', item.activeTabId === null ? 'none' : `${item.activeTabId}`),
+      createMetaRow('Tabs', `${item.tabCount}`),
+      createMetaRow('Window', item.windowId === null ? 'none' : `${item.windowId}`),
+      createMetaRow('Group', item.groupId === null ? 'none' : `${item.groupId}`),
+      createMetaRow(
+        'Last binding',
+        item.lastBindingUpdateReason
+          ? `${item.lastBindingUpdateReason} (${formatTimeAgo(item.lastBindingUpdateAt)})`
+          : 'none this session'
+      )
+    );
+
+    const footer = document.createElement('div');
+    footer.className = 'session-card-footer';
+    footer.textContent = item.detached
+      ? 'bak still remembers this session, but its owned tabs or window are missing.'
+      : 'The saved binding still points at live browser tabs.';
+
+    card.append(header, activeTitle, activeUrl, meta, footer);
+    sessionCardsEl.appendChild(card);
+  }
+}
+
 function parsePortValue(): number | null {
   const port = Number.parseInt(portInput.value.trim(), 10);
   return Number.isInteger(port) && port > 0 ? port : null;
@@ -194,83 +423,25 @@ function updateSaveState(state: PopupState | null): void {
   saveBtn.textContent = state?.hasToken ? 'Save settings' : 'Save token';
 }
 
-function describeStatus(state: PopupState): { text: string; note: string; tone: 'neutral' | 'success' | 'warning' | 'error' } {
-  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'
-    };
-  }
+async function refreshState(): Promise<void> {
+  const state = (await chrome.runtime.sendMessage({ type: 'bak.getState' })) as PopupState;
 
-  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.ok) {
+    return;
   }
 
-  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'
-    };
+  const shouldSyncForm = !isFormDirty(latestState);
+  latestState = state;
+  if (shouldSyncForm) {
+    portInput.value = String(state.port);
+    debugRichTextInput.checked = Boolean(state.debugRichText);
+    tokenInput.value = '';
   }
 
-  return {
-    text: 'Not connected yet',
-    note: 'Once the local bak runtime is available, the extension reconnects automatically.',
-    tone: 'neutral'
-  };
-}
-
-async function refreshState(): Promise<void> {
-  const state = (await chrome.runtime.sendMessage({ type: 'bak.getState' })) as PopupState;
-
-  if (state.ok) {
-    const shouldSyncForm = !isFormDirty(latestState);
-    latestState = state;
-    if (shouldSyncForm) {
-      portInput.value = String(state.port);
-      debugRichTextInput.checked = Boolean(state.debugRichText);
-      tokenInput.value = '';
-    }
-    renderConnectionDetails(state);
-    renderSessionBindings(state.sessionBindings);
-    updateSaveState(state);
-    const status = describeStatus(state);
-    setStatus(status.text, status.tone);
-    statusNoteEl.textContent = status.note;
-  }
+  renderConnectionDetails(state);
+  renderSessionBindings(state.sessionBindings);
+  updateSaveState(state);
+  setStatus(describeStatus(state));
 }
 
 saveBtn.addEventListener('click', async () => {
@@ -278,12 +449,24 @@ saveBtn.addEventListener('click', async () => {
   const port = parsePortValue();
 
   if (!token && latestState?.hasToken !== true) {
-    setStatus('Pair token is required', 'error');
+    setStatus({
+      badge: 'Action needed',
+      title: 'Pair token is required',
+      body: 'Save a token before the extension can reconnect.',
+      tone: 'error',
+      recoverySteps: ['Paste a valid token above, then click Save settings.']
+    });
     return;
   }
 
   if (port === null) {
-    setStatus('Port is invalid', 'error');
+    setStatus({
+      badge: 'Invalid input',
+      title: 'CLI port is invalid',
+      body: 'Use a positive integer port before saving settings.',
+      tone: 'error',
+      recoverySteps: ['Correct the port value above and try again.']
+    });
     return;
   }