@flrande/bak-extension 0.6.11 → 0.6.13

package/dist/popup.global.js

@@ -1,8 +1,11 @@
 "use strict";
 (() => {
   // src/popup.ts
+  var statusPanelEl = document.getElementById("statusPanel");
+  var statusBadgeEl = document.getElementById("statusBadge");
   var statusEl = document.getElementById("status");
-  var statusNoteEl = document.getElementById("statusNote");
+  var statusBodyEl = document.getElementById("statusBody");
+  var recoveryListEl = document.getElementById("recoveryList");
   var tokenInput = document.getElementById("token");
   var portInput = document.getElementById("port");
   var debugRichTextInput = document.getElementById("debugRichText");
@@ -18,24 +21,8 @@
   var lastBindingUpdateEl = document.getElementById("lastBindingUpdate");
   var extensionVersionEl = document.getElementById("extensionVersion");
   var sessionSummaryEl = document.getElementById("sessionSummary");
-  var sessionListEl = document.getElementById("sessionList");
+  var sessionCardsEl = document.getElementById("sessionCards");
   var latestState = null;
-  function setStatus(text, tone = "neutral") {
-    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";
-  }
   function pluralize(count, singular, plural = `${singular}s`) {
     return `${count} ${count === 1 ? singular : plural}`;
   }
@@ -55,24 +42,29 @@
       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) {
-    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, maxLength) {
+    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) {
+    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);
     }
   }
   function describeConnectionState(connectionState) {
@@ -92,6 +84,113 @@
         return "disconnected";
     }
   }
+  function setStatus(descriptor) {
+    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) {
+    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) {
     connectionStateEl.textContent = describeConnectionState(state.connectionState);
     tokenStateEl.textContent = state.hasToken ? "configured" : "missing";
@@ -119,6 +218,79 @@
       lastBindingUpdateEl.textContent = "none";
     }
   }
+  function createMetaRow(label, value) {
+    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) {
+    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() {
     const port = Number.parseInt(portInput.value.trim(), 10);
     return Number.isInteger(port) && port > 0 ? port : null;
@@ -145,84 +317,44 @@
     saveBtn.disabled = !dirty || validationError !== null;
     saveBtn.textContent = state?.hasToken ? "Save settings" : "Save token";
   }
-  function describeStatus(state) {
-    const combinedError = `${state.lastErrorContext ?? ""} ${state.lastError ?? ""}`.toLowerCase();
-    const runtimeOffline = combinedError.includes("cannot connect to bak cli");
-    if (state.connected) {
-      return {
-        text: "Connected to local bak runtime",
-        note: "Use the bak CLI to start browser work. This popup is mainly for status and configuration.",
-        tone: "success"
-      };
-    }
-    if (state.connectionState === "missing-token") {
-      return {
-        text: "Pair token is required",
-        note: "Paste a token once, then save it. Future reconnects happen automatically.",
-        tone: "error"
-      };
-    }
-    if (state.connectionState === "manual") {
-      return {
-        text: "Extension bridge is paused",
-        note: "Normal browser work starts from the bak CLI. Open Advanced only if you need to reconnect manually.",
-        tone: "warning"
-      };
-    }
-    if (runtimeOffline) {
-      return {
-        text: "Waiting for local bak runtime",
-        note: "Run any bak command, such as `bak doctor`, and the extension will reconnect automatically.",
-        tone: "warning"
-      };
-    }
-    if (state.connectionState === "reconnecting") {
-      return {
-        text: "Trying to reconnect",
-        note: "The extension is retrying in the background. You usually do not need to press anything here.",
-        tone: "warning"
-      };
-    }
-    if (state.lastError) {
-      return {
-        text: "Connection problem",
-        note: "Check the last error below. The extension keeps retrying automatically unless you disconnect it manually.",
-        tone: "error"
-      };
-    }
-    return {
-      text: "Not connected yet",
-      note: "Once the local bak runtime is available, the extension reconnects automatically.",
-      tone: "neutral"
-    };
-  }
   async function refreshState() {
     const state = await chrome.runtime.sendMessage({ type: "bak.getState" });
-    if (state.ok) {
-      const shouldSyncForm = !isFormDirty(latestState);
-      latestState = state;
-      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;
+    if (!state.ok) {
+      return;
+    }
+    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);
+    setStatus(describeStatus(state));
   }
   saveBtn.addEventListener("click", async () => {
     const token = tokenInput.value.trim();
     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;
     }
     await chrome.runtime.sendMessage({