perf(webapp): only poll the wake feed for a browser that knows a watch exists

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx

@@ -20,6 +20,7 @@ import {
   writeAgentFullscreen,
 } from "./panel-layout";
 import { startWakePolling } from "./wake-poll";
+import { hasWatchActivity, subscribeWatchActivity } from "./watch-activity";
 import {
   showWatchWakesSummaryToast,
   showWatchWakeToast,
@@ -136,8 +137,18 @@ export function DashboardAgent({
     setWatchRequest((current) => ({ spec, seq: (current?.seq ?? 0) + 1 }));
   }, []);
 
+  // Nothing to be woken about means nothing to poll for. Once this browser has seen a watch it
+  // keeps polling, so a wake still reaches a tab that was open before the watch existed.
+  const [watching, setWatching] = useState(false);
   useEffect(() => {
-    if (!hasAccess) return;
+    if (hasWatchActivity(organization.id)) setWatching(true);
+    return subscribeWatchActivity(() => {
+      if (hasWatchActivity(organization.id)) setWatching(true);
+    });
+  }, [organization.id]);
+
+  useEffect(() => {
+    if (!hasAccess || !watching) return;
 
     let cancelled = false;
     const load = async () => {
@@ -183,7 +194,7 @@ export function DashboardAgent({
       cancelled = true;
       stop();
     };
-  }, [hasAccess, actionPath, setPanelOpen, openChat]);
+  }, [hasAccess, watching, actionPath, setPanelOpen, openChat]);
 
   // Zeroes the dot right away; the poll restores the truth if another chat has one.
   const markChatRead = useCallback(

apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx

@@ -18,6 +18,7 @@ import {
 import { DashboardAgentDraft } from "./DashboardAgentDraft";
 import { WatchCard } from "./WatchCard";
 import { watchDraftFor } from "./watch-card";
+import { forgetWatchActivity, rememberWatchActivity } from "./watch-activity";
 import type { TurnActivity } from "./DashboardAgentMessages";
 import { DashboardAgentHeader } from "./DashboardAgentHeader";
 import type { DashboardAgentChat as DashboardAgentChatListItem } from "./DashboardAgentHistory";
@@ -146,10 +147,14 @@ export function DashboardAgentPanel({
         const data = (await res.json()) as { chats?: DashboardAgentChatListItem[] };
         const read = justRead.current;
         justRead.current = new Set();
+        const chats = data.chats ?? [];
+        // Reloaded after every turn and after a watch is created, so this is where the browser
+        // learns whether the wake feed is worth polling.
+        const pending = chats.some((chat) => chat.hasActiveWatch || chat.hasUnreadWake);
+        if (pending) rememberWatchActivity(organization.id);
+        else forgetWatchActivity(organization.id);
         setChats(
-          (data.chats ?? []).map((chat) =>
-            read.has(chat.id) ? { ...chat, hasUnreadWake: false } : chat
-          )
+          chats.map((chat) => (read.has(chat.id) ? { ...chat, hasUnreadWake: false } : chat))
         );
       } catch (error) {
         console.error("Dashboard agent: failed to load chat history", error);
@@ -160,7 +165,7 @@ export function DashboardAgentPanel({
     })();
     historyInFlight.current = request;
     return request;
-  }, [actionPath, toast]);
+  }, [actionPath, organization.id, toast]);
 
   // Bumped on each open so a slower earlier open can't overwrite a newer one.
   const openChatRequestSeq = useRef(0);

apps/webapp/app/components/dashboard-agent/watch-activity.test.ts

@@ -0,0 +1,93 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+type StorageListener = (event: { key: string | null }) => void;
+
+const store = new Map<string, string>();
+const storageListeners = new Set<StorageListener>();
+
+// A minimal `window`: these tests run without a DOM.
+const windowStub = {
+  localStorage: {
+    getItem: (key: string) => store.get(key) ?? null,
+    setItem: (key: string, value: string) => void store.set(key, value),
+  },
+  addEventListener: (_type: string, listener: StorageListener) =>
+    void storageListeners.add(listener),
+  removeEventListener: (_type: string, listener: StorageListener) =>
+    void storageListeners.delete(listener),
+};
+
+const { forgetWatchActivity, hasWatchActivity, rememberWatchActivity, subscribeWatchActivity } =
+  await import("./watch-activity");
+
+/** What another tab writing the key looks like here. */
+function otherTabWrote(organizationId: string) {
+  store.set("tdev:dashboard-agent:watching", JSON.stringify([organizationId]));
+  for (const listener of storageListeners) listener({ key: "tdev:dashboard-agent:watching" });
+}
+
+describe("watch activity", () => {
+  beforeEach(() => {
+    store.clear();
+    storageListeners.clear();
+    vi.stubGlobal("window", windowStub);
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("knows nothing until a watch shows up", () => {
+    expect(hasWatchActivity("org_1")).toBe(false);
+
+    rememberWatchActivity("org_1");
+    expect(hasWatchActivity("org_1")).toBe(true);
+    expect(hasWatchActivity("org_2")).toBe(false);
+  });
+
+  it("survives a reload", () => {
+    rememberWatchActivity("org_1");
+    storageListeners.clear();
+
+    expect(hasWatchActivity("org_1")).toBe(true);
+  });
+
+  it("tells a tab that was already open", () => {
+    const woken: number[] = [];
+    const unsubscribe = subscribeWatchActivity(() => woken.push(1));
+
+    rememberWatchActivity("org_1");
+    expect(woken).toHaveLength(1);
+
+    unsubscribe();
+    rememberWatchActivity("org_2");
+    expect(woken).toHaveLength(1);
+  });
+
+  it("tells a tab about a watch another tab created", () => {
+    const woken: number[] = [];
+    const unsubscribe = subscribeWatchActivity(() => woken.push(1));
+
+    otherTabWrote("org_1");
+
+    expect(woken).toHaveLength(1);
+    expect(hasWatchActivity("org_1")).toBe(true);
+    unsubscribe();
+  });
+
+  it("forgets one organization without forgetting the others", () => {
+    rememberWatchActivity("org_1");
+    rememberWatchActivity("org_2");
+
+    forgetWatchActivity("org_1");
+
+    expect(hasWatchActivity("org_1")).toBe(false);
+    expect(hasWatchActivity("org_2")).toBe(true);
+  });
+
+  it("remembers at most ten organizations", () => {
+    for (let index = 0; index < 12; index++) rememberWatchActivity(`org_${index}`);
+
+    expect(hasWatchActivity("org_0")).toBe(false);
+    expect(hasWatchActivity("org_11")).toBe(true);
+  });
+});

apps/webapp/app/components/dashboard-agent/watch-activity.ts

@@ -0,0 +1,70 @@
+/**
+ * Which organizations this browser has seen agent watches in. The wake feed costs a request per
+ * open tab per minute, so only a browser that knows a watch exists polls it — and once it knows,
+ * it keeps polling. Shared through `localStorage`, so a watch created in one tab wakes the others.
+ */
+
+const STORAGE_KEY = "tdev:dashboard-agent:watching";
+
+// Newest ids only, so the key can't grow unbounded.
+const MAX_REMEMBERED = 10;
+
+const listeners = new Set<() => void>();
+
+function read(): string[] {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    return raw ? (JSON.parse(raw) as string[]) : [];
+  } catch {
+    // Storage unavailable; treated as "nothing known yet".
+    return [];
+  }
+}
+
+export function hasWatchActivity(organizationId: string): boolean {
+  if (typeof window === "undefined") return false;
+  return read().includes(organizationId);
+}
+
+/** Called whenever a watch shows up for this org: the poll starts from here. */
+export function rememberWatchActivity(organizationId: string): void {
+  if (typeof window === "undefined" || hasWatchActivity(organizationId)) return;
+  try {
+    window.localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify([...read(), organizationId].slice(-MAX_REMEMBERED))
+    );
+  } catch {
+    // Same as the read. This tab still starts polling for the rest of the session.
+  }
+  for (const listener of listeners) listener();
+}
+
+/**
+ * Called when nothing is left to be woken about. The current tab keeps polling for the rest of
+ * the session; the next reload starts quiet.
+ */
+export function forgetWatchActivity(organizationId: string): void {
+  if (typeof window === "undefined" || !hasWatchActivity(organizationId)) return;
+  try {
+    window.localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify(read().filter((id) => id !== organizationId))
+    );
+  } catch {
+    // Same as the read.
+  }
+}
+
+/** Fires when this browser learns of a watch, in this tab or — via `storage` — in another one. */
+export function subscribeWatchActivity(listener: () => void): () => void {
+  listeners.add(listener);
+  const onStorage = (event: StorageEvent) => {
+    if (event.key === null || event.key === STORAGE_KEY) listener();
+  };
+  window.addEventListener("storage", onStorage);
+  return () => {
+    listeners.delete(listener);
+    window.removeEventListener("storage", onStorage);
+  };
+}