Fix stale viewport update after timeout by passing AbortSignal to handler

When runHandlerWithTimeout times out, the underlying handler continues
executing. If a newer commit completes first, the timed-out handler's
eventual resolution would call updatePreviewServerSnapshot with stale
dimensions, overwriting the correct newer state.

Fix: Pass an AbortSignal from runHandlerWithTimeout to the handler.
The signal is aborted on timeout, and handleViewportChange checks
signal.aborted before applying side effects.

Author: cursoragent

apps/web/src/browser/browserViewportActions.test.ts

@@ -21,7 +21,10 @@ describe("browserViewportActions", () => {
       height: 700,
     });
     expect(first).not.toHaveBeenCalled();
-    expect(second).toHaveBeenCalledWith({ _tag: "freeform", width: 900, height: 700 });
+    expect(second).toHaveBeenCalledWith(
+      { _tag: "freeform", width: 900, height: 700 },
+      expect.any(AbortSignal),
+    );
 
     unsubscribeSecond();
     await expect(
@@ -75,7 +78,9 @@ describe("browserViewportActions", () => {
     vi.useFakeTimers();
     try {
       const never = new Promise<void>(() => undefined);
-      const handler = vi.fn(async (_setting: PreviewViewportSetting): Promise<void> => undefined);
+      const handler = vi.fn(
+        async (_setting: PreviewViewportSetting, _signal: AbortSignal): Promise<void> => undefined,
+      );
       handler.mockImplementationOnce(() => never).mockResolvedValueOnce(undefined);
       const unsubscribe = subscribeBrowserViewportChange("tab-timeout", handler);
       const first = commitBrowserViewportChange("tab-timeout", {
@@ -97,7 +102,11 @@ describe("browserViewportActions", () => {
       await second;
 
       expect(handler).toHaveBeenCalledTimes(2);
+      expect(handler.mock.calls[0]?.[1]).toBeInstanceOf(AbortSignal);
+      expect((handler.mock.calls[0]?.[1] as AbortSignal).aborted).toBe(true);
       expect(handler.mock.calls[1]?.[0]).toMatchObject({ width: 900, height: 700 });
+      expect(handler.mock.calls[1]?.[1]).toBeInstanceOf(AbortSignal);
+      expect((handler.mock.calls[1]?.[1] as AbortSignal).aborted).toBe(false);
       unsubscribe();
     } finally {
       vi.useRealTimers();

apps/web/src/browser/browserViewportActions.ts

@@ -1,6 +1,9 @@
 import type { PreviewViewportSetting } from "@t3tools/contracts";
 
-type BrowserViewportHandler = (setting: PreviewViewportSetting) => Promise<void>;
+type BrowserViewportHandler = (
+  setting: PreviewViewportSetting,
+  signal: AbortSignal,
+) => Promise<void>;
 
 export const BROWSER_VIEWPORT_COMMIT_TIMEOUT_MS = 15_000;
 
@@ -20,14 +23,18 @@ const runHandlerWithTimeout = (
   handler: BrowserViewportHandler,
   setting: PreviewViewportSetting,
 ): Promise<void> => {
+  const controller = new AbortController();
   let timeoutId: ReturnType<typeof setTimeout> | undefined;
   const timeout = new Promise<never>((_resolve, reject) => {
-    timeoutId = setTimeout(
-      () => reject(new BrowserViewportCommitTimeoutError(tabId)),
-      BROWSER_VIEWPORT_COMMIT_TIMEOUT_MS,
-    );
+    timeoutId = setTimeout(() => {
+      controller.abort();
+      reject(new BrowserViewportCommitTimeoutError(tabId));
+    }, BROWSER_VIEWPORT_COMMIT_TIMEOUT_MS);
   });
-  return Promise.race([Promise.resolve().then(() => handler(setting)), timeout]).finally(() => {
+  return Promise.race([
+    Promise.resolve().then(() => handler(setting, controller.signal)),
+    timeout,
+  ]).finally(() => {
     if (timeoutId !== undefined) clearTimeout(timeoutId);
   });
 };

apps/web/src/components/preview/PreviewView.tsx

@@ -152,7 +152,7 @@ export function PreviewView({ threadRef, tabId: requestedTabId, configuredUrls,
   }, [tabId]);
 
   const handleViewportChange = useCallback(
-    async (nextViewport: PreviewViewportSetting) => {
+    async (nextViewport: PreviewViewportSetting, signal: AbortSignal) => {
       if (!tabId) return;
       const result = await resize({
         environmentId: threadRef.environmentId,
@@ -162,6 +162,7 @@ export function PreviewView({ threadRef, tabId: requestedTabId, configuredUrls,
           viewport: nextViewport,
         },
       });
+      if (signal.aborted) return;
       if (result._tag === "Failure") {
         const error = squashAtomCommandFailure(result);
         toastManager.add({