Disable dashboard side-panel action while panel is already open

baboonzero · baboonzero · commit e81811f4bc43 · 2026-02-27T08:55:27.000+08:00
diff --git a/README.md b/README.md
@@ -19,6 +19,7 @@ For complete project history, architecture decisions, execution timeline, built/
   - Search
   - Theme toggle (shared with full dashboard, live sync across open views)
   - `Expand` to full dashboard tab
+  - Full-dashboard `Open Side Panel` button auto-disables while panel is already open in that window
 - Click any entry to focus an existing tab or open it if already closed.
 - Local-only storage (IndexedDB), no cloud sync.
 - Retention defaults to 30 days.
diff --git a/background/service-worker.js b/background/service-worker.js
@@ -23,6 +23,7 @@ const CLEANUP_ALARM = "retention-cleanup";
 const CLEANUP_INTERVAL_MINUTES = 360;
 const RUNTIME_STORAGE_KEY = "runtime_state_v2";
 const FOCUS_MEANINGFUL_THRESHOLD_SEC = 10;
+const PANEL_HEARTBEAT_TTL_MS = 10_000;
 
 const state = {
   focusedWindowId: chrome.windows.WINDOW_ID_NONE,
@@ -33,7 +34,8 @@ const state = {
   theme: "dark",
   openPanelOnActionClick: null,
   lastActionClickResult: null,
-  lastOpenSidePanelResult: null
+  lastOpenSidePanelResult: null,
+  panelHeartbeatByWindow: {}
 };
 
 const sessionEngine = createSessionEngine({
@@ -55,6 +57,64 @@ function broadcastTheme(theme) {
   });
 }
 
+function broadcastSidePanelState(windowId, isOpen) {
+  chrome.runtime.sendMessage({ type: "side-panel-state-changed", windowId, isOpen }).catch(() => {
+    // Ignore when no extension page is listening.
+  });
+}
+
+function prunePanelHeartbeats(now = Date.now()) {
+  for (const [windowIdRaw, lastSeenAtRaw] of Object.entries(state.panelHeartbeatByWindow)) {
+    const windowId = Number(windowIdRaw);
+    const lastSeenAt = Number(lastSeenAtRaw);
+    if (!Number.isFinite(windowId) || !Number.isFinite(lastSeenAt) || now - lastSeenAt > PANEL_HEARTBEAT_TTL_MS) {
+      delete state.panelHeartbeatByWindow[windowIdRaw];
+    }
+  }
+}
+
+function registerPanelHeartbeat(windowId, at = Date.now()) {
+  if (typeof windowId !== "number") {
+    return false;
+  }
+
+  const key = String(windowId);
+  const wasOpen = key in state.panelHeartbeatByWindow;
+  state.panelHeartbeatByWindow[key] = at;
+  if (!wasOpen) {
+    broadcastSidePanelState(windowId, true);
+  }
+  return true;
+}
+
+function markPanelClosed(windowId) {
+  if (typeof windowId !== "number") {
+    return false;
+  }
+
+  const key = String(windowId);
+  const wasOpen = key in state.panelHeartbeatByWindow;
+  delete state.panelHeartbeatByWindow[key];
+  if (wasOpen) {
+    broadcastSidePanelState(windowId, false);
+  }
+  return wasOpen;
+}
+
+function isPanelOpenForWindow(windowId, now = Date.now()) {
+  prunePanelHeartbeats(now);
+  if (typeof windowId !== "number") {
+    return false;
+  }
+
+  const lastSeenAt = Number(state.panelHeartbeatByWindow[String(windowId)]);
+  if (!Number.isFinite(lastSeenAt)) {
+    return false;
+  }
+
+  return now - lastSeenAt <= PANEL_HEARTBEAT_TTL_MS;
+}
+
 function getSenderWindowId(sender) {
   return typeof sender?.tab?.windowId === "number" ? sender.tab.windowId : null;
 }
@@ -331,6 +391,7 @@ async function runRetentionCleanup() {
   const cutoffTimestampMs = Date.now() - retentionDays * 24 * 60 * 60 * 1000;
   await pruneSessionsOlderThan(cutoffTimestampMs);
   await pruneTabActivitiesOlderThan(cutoffTimestampMs);
+  prunePanelHeartbeats();
 
   const snapshots = await listTabSnapshots();
   await Promise.all(
@@ -627,6 +688,10 @@ chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
       return { opened, mode, senderWindowId };
     })()
       .then((result) => {
+        if (result.opened && typeof result.senderWindowId === "number") {
+          registerPanelHeartbeat(result.senderWindowId);
+        }
+
         state.lastOpenSidePanelResult = {
           ok: result.opened,
           opened: result.opened,
@@ -645,6 +710,20 @@ chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
     return true;
   }
 
+  if (message?.type === "panel-heartbeat") {
+    const windowId = typeof message?.windowId === "number" ? message.windowId : getSenderWindowId(_sender);
+    const ok = registerPanelHeartbeat(windowId);
+    sendResponse({ ok, windowId });
+    return false;
+  }
+
+  if (message?.type === "panel-closed") {
+    const windowId = typeof message?.windowId === "number" ? message.windowId : getSenderWindowId(_sender);
+    const closed = markPanelClosed(windowId);
+    sendResponse({ ok: true, windowId, closed });
+    return false;
+  }
+
   if (message?.type === "debug-trigger-action-click") {
     executeActionClick({
       getFocusedWindowId: async () => {
@@ -676,6 +755,10 @@ chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
   }
 
   if (message?.type === "get-runtime-status") {
+    const senderWindowId = getSenderWindowId(_sender);
+    const requestedWindowId = typeof message?.windowId === "number" ? message.windowId : senderWindowId;
+    const sidePanelOpenForWindow = isPanelOpenForWindow(requestedWindowId);
+
     const runtimeState = sessionEngine.readState();
     sendResponse({
       ok: true,
@@ -688,7 +771,9 @@ chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
       sidePanelApiAvailable: Boolean(chrome.sidePanel?.open),
       openPanelOnActionClick: state.openPanelOnActionClick,
       lastActionClickResult: state.lastActionClickResult,
-      lastOpenSidePanelResult: state.lastOpenSidePanelResult
+      lastOpenSidePanelResult: state.lastOpenSidePanelResult,
+      sidePanelOpenForWindow,
+      sidePanelWindowId: requestedWindowId
     });
     return false;
   }
diff --git a/project-history.md b/project-history.md
@@ -200,6 +200,14 @@ Chronological execution log:
       - e2e runtime broadcast tests for dashboard and settings
       - smoke assertions for two-way live sync (`dashboard -> panel` and `panel -> dashboard/settings`)
 
+35. Added side-panel-open state guard for full dashboard action:
+    - introduced panel heartbeat + close signaling (`panel-heartbeat`, `panel-closed`) from side panel UI
+    - service worker now tracks window-scoped side-panel-open state with heartbeat TTL
+    - full dashboard `Open Side Panel` button now disables while panel is open in that window and re-enables after close/expiry
+    - expanded tests:
+      - e2e button disable/re-enable coverage in dashboard spec
+      - smoke assertions for disabled-while-open and enabled-after-close behavior
+
 ## 4. What Were The Decisions That We Took?
 
 ### Product/Architecture Decisions
@@ -315,6 +323,7 @@ Not in MVP (intentionally out of scope):
 - `npm run test:smoke:extension`: passing
 - `npm run test:flows:extension`: passing (`18/18` transition sequences)
 - Cross-surface live theme sync check: passing (`dashboard->panel`, `panel->dashboard/settings`)
+- Side-panel-open guard check: passing (`disabled while open`, `re-enabled after close`)
 - Long-duration headed validation: passing (`runId=20260226-192909`, `allTabsCount=6`, `neverFocused=4`, `retentionDays=30`, `theme=dark`)
 - Action-click config check: passing (`sidePanelApiAvailable=true`, `openPanelOnActionClick=true`)
 
diff --git a/scripts/extension-flow-matrix-test.mjs b/scripts/extension-flow-matrix-test.mjs
@@ -81,14 +81,25 @@ async function transitionOpenDashboard({ page, context }) {
 }
 
 async function transitionOpenSidePanel({ page }) {
-  await page.click("#open-side-panel");
-  await page.waitForTimeout(250);
+  const button = page.locator("#open-side-panel");
+  const isDisabled = await button.isDisabled();
+  if (!isDisabled) {
+    await page.click("#open-side-panel");
+    await page.waitForTimeout(250);
+  }
+
   const runtime = await runtimeStatus(page);
   const result = runtime?.lastOpenSidePanelResult;
+
+  if (isDisabled) {
+    invariant(runtime?.sidePanelOpenForWindow === true, "open-side-panel disabled without an open side panel", {
+      runtime
+    });
+    return;
+  }
+
   invariant(result?.ok === true, "open-side-panel did not report success", { runtime });
-  invariant(["sender_window", "all_windows"].includes(result?.mode), "unexpected open-side-panel mode", {
-    mode: result?.mode
-  });
+  invariant(["sender_window", "all_windows"].includes(result?.mode), "unexpected open-side-panel mode", { mode: result?.mode });
 }
 
 async function transitionToggleTheme({ page }) {
diff --git a/scripts/extension-smoke-test.mjs b/scripts/extension-smoke-test.mjs
@@ -48,8 +48,12 @@ async function run() {
     const panelThemeInitial = await panelPage.getAttribute("body", "data-theme");
     const initialPageCount = context.pages().length;
 
-    await dashboardPage.click("#open-side-panel");
-    await dashboardPage.waitForTimeout(250);
+    const dashboardSidePanelButton = dashboardPage.locator("#open-side-panel");
+    const canRequestDashboardSidePanelOpen = await dashboardSidePanelButton.isEnabled();
+    if (canRequestDashboardSidePanelOpen) {
+      await dashboardPage.click("#open-side-panel");
+      await dashboardPage.waitForTimeout(250);
+    }
     const runtimeAfterDashboardSidePanel = await dashboardPage.evaluate(async () =>
       chrome.runtime.sendMessage({ type: "get-runtime-status" })
     );
@@ -83,6 +87,13 @@ async function run() {
     const panelThemeAfterPanelToggle = await panelPage.getAttribute("body", "data-theme");
     await dashboardPage.waitForFunction(() => document.body?.dataset?.theme === "dark", null, { timeout: 5_000 });
     const dashboardThemeAfterPanelToggle = await dashboardPage.getAttribute("body", "data-theme");
+    const sidePanelButtonDisabledWhenPanelOpen = await dashboardPage.locator("#open-side-panel").isDisabled();
+
+    await panelPage.close();
+    await dashboardPage.waitForFunction(() => document.querySelector("#open-side-panel")?.disabled === false, null, {
+      timeout: 15_000
+    });
+    const sidePanelButtonEnabledAfterPanelClose = !(await dashboardPage.locator("#open-side-panel").isDisabled());
 
     await dashboardPage.click("#open-settings");
     await dashboardPage.waitForURL((url) => url.toString().endsWith("/ui/settings.html"), { timeout: 5_000 });
@@ -148,6 +159,8 @@ async function run() {
       panelThemeAfterDashboardToggle,
       panelThemeAfterPanelToggle,
       dashboardThemeAfterPanelToggle,
+      sidePanelButtonDisabledWhenPanelOpen,
+      sidePanelButtonEnabledAfterPanelClose,
       runtimeAfterDashboardSidePanel,
       runtimeAfterSettingsSidePanel,
       dashboardFaviconHref,
@@ -167,6 +180,20 @@ async function run() {
 
     console.log(JSON.stringify(result, null, 2));
 
+    const dashboardSidePanelRuntimeValid =
+      result.runtimeAfterDashboardSidePanel?.sidePanelOpenForWindow === true &&
+      (
+        !result.runtimeAfterDashboardSidePanel?.lastOpenSidePanelResult ||
+        (
+          result.runtimeAfterDashboardSidePanel?.lastOpenSidePanelResult?.ok === true &&
+          ["sender_window", "all_windows"].includes(result.runtimeAfterDashboardSidePanel?.lastOpenSidePanelResult?.mode)
+        )
+      );
+
+    const settingsSidePanelRuntimeValid =
+      result.runtimeAfterSettingsSidePanel?.lastOpenSidePanelResult?.ok === true &&
+      ["sender_window", "all_windows"].includes(result.runtimeAfterSettingsSidePanel?.lastOpenSidePanelResult?.mode);
+
     if (
       result.dashboardHeading !== "Chrome Activity Reader" ||
       !result.activityListPresent ||
@@ -179,10 +206,8 @@ async function run() {
       result.openPanelOnActionClick !== true ||
       !String(result.dashboardFaviconHref || "").includes("icon-v2-32.png") ||
       !String(result.settingsFaviconHref || "").includes("icon-v2-32.png") ||
-      result.runtimeAfterDashboardSidePanel?.lastOpenSidePanelResult?.ok !== true ||
-      !["sender_window", "all_windows"].includes(result.runtimeAfterDashboardSidePanel?.lastOpenSidePanelResult?.mode) ||
-      result.runtimeAfterSettingsSidePanel?.lastOpenSidePanelResult?.ok !== true ||
-      !["sender_window", "all_windows"].includes(result.runtimeAfterSettingsSidePanel?.lastOpenSidePanelResult?.mode) ||
+      dashboardSidePanelRuntimeValid !== true ||
+      settingsSidePanelRuntimeValid !== true ||
       result.settingsOpenedInCurrentTab !== true ||
       result.dashboardOpenedInCurrentTab !== true ||
       result.pageCountUnchangedOnSettingsRoundTrip !== true ||
@@ -192,6 +217,8 @@ async function run() {
       result.panelThemeAfterDashboardToggle !== "light" ||
       result.panelThemeAfterPanelToggle !== "dark" ||
       result.dashboardThemeAfterPanelToggle !== "dark" ||
+      result.sidePanelButtonDisabledWhenPanelOpen !== true ||
+      result.sidePanelButtonEnabledAfterPanelClose !== true ||
       result.settingsTheme !== "dark" ||
       result.settingsThemeValue !== "dark" ||
       Number(result.themeSelectContrast || 0) < 4.5 ||
diff --git a/tests/e2e/dashboard.spec.js b/tests/e2e/dashboard.spec.js
@@ -71,7 +71,13 @@ test.beforeEach(async ({ page }) => {
   await page.addInitScript(() => {
     window.__queryResult = [];
     window.__calls = [];
-    window.__runtimeMessageListener = null;
+    window.__runtimeMessageListeners = [];
+    window.__runtimeStatus = {
+      ok: true,
+      meaningfulThresholdSec: 10,
+      theme: "dark",
+      sidePanelOpenForWindow: false
+    };
 
     window.chrome = {
       tabs: {
@@ -86,6 +92,7 @@ test.beforeEach(async ({ page }) => {
         }
       },
       windows: {
+        getCurrent: async () => ({ id: 1 }),
         update: async (windowId, options) => {
           window.__calls.push({ api: "windows.update", windowId, options });
           return {};
@@ -98,17 +105,22 @@ test.beforeEach(async ({ page }) => {
         },
         onMessage: {
           addListener: (listener) => {
-            window.__runtimeMessageListener = listener;
+            window.__runtimeMessageListeners.push(listener);
           }
         },
         sendMessage: async (message) => {
           window.__calls.push({ api: "runtime.sendMessage", message });
           if (message?.type === "get-runtime-status") {
-            return { ok: true, meaningfulThresholdSec: 10, theme: "dark" };
+            return { ...window.__runtimeStatus };
           }
           if (message?.type === "set-theme") {
+            window.__runtimeStatus.theme = message.theme;
             return { ok: true, theme: message.theme };
           }
+          if (message?.type === "open-side-panel") {
+            window.__runtimeStatus.sidePanelOpenForWindow = true;
+            return { ok: true, mode: "sender_window" };
+          }
           return { ok: true };
         },
         getURL: (path) => `chrome-extension://test/${path}`
@@ -298,10 +310,56 @@ test("dashboard applies broadcast theme updates from runtime", async ({ page })
   await expect(page.locator("body")).toHaveAttribute("data-theme", "dark");
 
   await page.evaluate(() => {
-    if (typeof window.__runtimeMessageListener === "function") {
-      window.__runtimeMessageListener({ type: "theme-changed", theme: "light" }, {}, () => {});
+    if (Array.isArray(window.__runtimeMessageListeners)) {
+      for (const listener of window.__runtimeMessageListeners) {
+        listener({ type: "theme-changed", theme: "light" }, {}, () => {});
+      }
     }
   });
 
   await expect(page.locator("body")).toHaveAttribute("data-theme", "light");
 });
+
+test("open side panel button is disabled when side panel is already open for this window", async ({ page }) => {
+  await page.goto("/ui/dashboard.html");
+
+  await page.evaluate(() => {
+    window.__runtimeStatus.sidePanelOpenForWindow = true;
+    if (Array.isArray(window.__runtimeMessageListeners)) {
+      for (const listener of window.__runtimeMessageListeners) {
+        listener({ type: "side-panel-state-changed", windowId: 1, isOpen: true }, {}, () => {});
+      }
+    }
+  });
+
+  const openSidePanelButton = page.locator("#open-side-panel");
+  await expect(openSidePanelButton).toBeDisabled();
+  await expect(openSidePanelButton).toHaveText("Side Panel Open");
+});
+
+test("open side panel button re-enables when runtime reports panel closed", async ({ page }) => {
+  await page.goto("/ui/dashboard.html");
+
+  await page.evaluate(() => {
+    window.__runtimeStatus.sidePanelOpenForWindow = true;
+    if (Array.isArray(window.__runtimeMessageListeners)) {
+      for (const listener of window.__runtimeMessageListeners) {
+        listener({ type: "side-panel-state-changed", windowId: 1, isOpen: true }, {}, () => {});
+      }
+    }
+  });
+
+  const openSidePanelButton = page.locator("#open-side-panel");
+  await expect(openSidePanelButton).toBeDisabled();
+
+  await page.evaluate(() => {
+    if (Array.isArray(window.__runtimeMessageListeners)) {
+      for (const listener of window.__runtimeMessageListeners) {
+        listener({ type: "side-panel-state-changed", windowId: 1, isOpen: false }, {}, () => {});
+      }
+    }
+  });
+
+  await expect(openSidePanelButton).toBeEnabled();
+  await expect(openSidePanelButton).toHaveText("Open Side Panel");
+});
diff --git a/ui/activity.css b/ui/activity.css
diff --git a/ui/activity.js b/ui/activity.js
