perf(agent-control): reduce proposal countdown churn

src/scaffold/GlobalSpotlight/palettes/AgentControlPalette/countdownScheduler.test.ts

@@ -0,0 +1,77 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { CountdownScheduler } from "./countdownScheduler";
+
+describe("CountdownScheduler", () => {
+  let documentTarget: EventTarget & { visibilityState: string };
+  let now: number;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    now = 1_000;
+    documentTarget = Object.assign(new EventTarget(), {
+      visibilityState: "visible",
+    });
+    vi.stubGlobal(
+      "window",
+      Object.assign(new EventTarget(), {
+        clearTimeout: globalThis.clearTimeout,
+        setTimeout: globalThis.setTimeout,
+      })
+    );
+    vi.stubGlobal("document", documentTarget);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.useRealTimers();
+  });
+
+  it("updates at most once per second and stops at expiry", () => {
+    const onUpdate = vi.fn();
+    const scheduler = new CountdownScheduler(3_500, onUpdate, () => now);
+    scheduler.start();
+
+    expect(onUpdate).toHaveBeenLastCalledWith(2_500);
+    now = 2_000;
+    vi.advanceTimersByTime(1_000);
+    expect(onUpdate).toHaveBeenLastCalledWith(1_500);
+    now = 3_500;
+    vi.advanceTimersByTime(1_000);
+    expect(onUpdate).toHaveBeenLastCalledWith(0);
+
+    vi.advanceTimersByTime(10_000);
+    expect(onUpdate).toHaveBeenCalledTimes(3);
+    scheduler.stop();
+  });
+
+  it("pauses while hidden and recalculates once when visible", () => {
+    const onUpdate = vi.fn();
+    const scheduler = new CountdownScheduler(10_000, onUpdate, () => now);
+    scheduler.start();
+
+    documentTarget.visibilityState = "hidden";
+    document.dispatchEvent(new Event("visibilitychange"));
+    now = 7_000;
+    vi.advanceTimersByTime(10_000);
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+
+    documentTarget.visibilityState = "visible";
+    document.dispatchEvent(new Event("visibilitychange"));
+    expect(onUpdate).toHaveBeenLastCalledWith(3_000);
+    expect(onUpdate).toHaveBeenCalledTimes(2);
+    scheduler.stop();
+  });
+
+  it("removes timers and listeners on stop", () => {
+    const onUpdate = vi.fn();
+    const scheduler = new CountdownScheduler(10_000, onUpdate, () => now);
+    scheduler.start();
+    scheduler.stop();
+
+    now = 5_000;
+    vi.advanceTimersByTime(10_000);
+    document.dispatchEvent(new Event("visibilitychange"));
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+  });
+});

src/scaffold/GlobalSpotlight/palettes/AgentControlPalette/countdownScheduler.ts

@@ -0,0 +1,68 @@
+export function getCountdownRemaining(
+  expiresAt: number,
+  now: () => number = Date.now
+): number {
+  return Math.max(0, expiresAt - now());
+}
+
+/**
+ * Owns the proposal countdown's single timer and visibility listener.
+ *
+ * The UI label only changes once per second, so frame-rate updates would
+ * needlessly re-render the full proposal creator. Hidden windows keep no timer;
+ * returning to the foreground recalculates from the absolute expiry time.
+ */
+export class CountdownScheduler {
+  private timeoutId: number | undefined;
+  private running = false;
+
+  constructor(
+    private readonly expiresAt: number,
+    private readonly onUpdate: (remaining: number) => void,
+    private readonly now: () => number = Date.now
+  ) {}
+
+  start(): void {
+    this.stop();
+    this.running = true;
+    document.addEventListener("visibilitychange", this.handleVisibilityChange);
+    this.updateAndSchedule();
+  }
+
+  stop(): void {
+    this.running = false;
+    this.clearScheduledUpdate();
+    document.removeEventListener(
+      "visibilitychange",
+      this.handleVisibilityChange
+    );
+  }
+
+  private clearScheduledUpdate(): void {
+    if (this.timeoutId === undefined) return;
+    window.clearTimeout(this.timeoutId);
+    this.timeoutId = undefined;
+  }
+
+  private updateAndSchedule = (): void => {
+    this.clearScheduledUpdate();
+    if (!this.running) return;
+
+    const remaining = getCountdownRemaining(this.expiresAt, this.now);
+    this.onUpdate(remaining);
+    if (remaining > 0 && document.visibilityState !== "hidden") {
+      this.timeoutId = window.setTimeout(
+        this.updateAndSchedule,
+        Math.min(1000, remaining)
+      );
+    }
+  };
+
+  private handleVisibilityChange = (): void => {
+    if (document.visibilityState === "hidden") {
+      this.clearScheduledUpdate();
+      return;
+    }
+    this.updateAndSchedule();
+  };
+}

src/scaffold/GlobalSpotlight/palettes/AgentControlPalette/index.tsx

@@ -14,6 +14,10 @@ import { PaletteBody, SpotlightShell } from "../../shell";
 import { AgentControlInputTrailing } from "./AgentControlInputTrailing";
 import { AgentControlStatus } from "./AgentControlStatus";
 import { AgentControlToolbar } from "./AgentControlToolbar";
+import {
+  CountdownScheduler,
+  getCountdownRemaining,
+} from "./countdownScheduler";
 import { useAgentControlPalette } from "./useAgentControlPalette";
 
 export type { AdeManagerSubmitDetail } from "./types";
@@ -26,55 +30,15 @@ export {
 
 const TOTAL_MS = 5 * 60 * 1000;
 
-function getCountdownRemaining(expiresAt: number): number {
-  return Math.max(0, expiresAt - Date.now());
-}
-
 function useCountdown(expiresAt: number) {
   const [remaining, setRemaining] = useState(() =>
     getCountdownRemaining(expiresAt)
   );
 
   useEffect(() => {
-    let timeoutId: number | undefined;
-
-    const clearScheduledUpdate = () => {
-      if (timeoutId !== undefined) {
-        window.clearTimeout(timeoutId);
-        timeoutId = undefined;
-      }
-    };
-
-    const updateAndSchedule = () => {
-      clearScheduledUpdate();
-      const nextRemaining = getCountdownRemaining(expiresAt);
-      setRemaining(nextRemaining);
-
-      if (nextRemaining > 0 && document.visibilityState !== "hidden") {
-        timeoutId = window.setTimeout(
-          updateAndSchedule,
-          Math.min(1000, nextRemaining)
-        );
-      }
-    };
-
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === "hidden") {
-        clearScheduledUpdate();
-      } else {
-        updateAndSchedule();
-      }
-    };
-
-    // The label only changes once per second. Updating React state every frame
-    // needlessly re-rendered the entire proposal creator (including ChatPanel)
-    // at ~60 FPS for the full five-minute lifetime.
-    updateAndSchedule();
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () => {
-      clearScheduledUpdate();
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
+    const scheduler = new CountdownScheduler(expiresAt, setRemaining);
+    scheduler.start();
+    return () => scheduler.stop();
   }, [expiresAt]);
 
   const seconds = Math.ceil(remaining / 1000);