fix: prevent agent resize from switching active tab and serialize toolbar toggle viewport changes

Bug 1: applyPreviewServerSnapshot always set activeTabId to the incoming
snapshot's tabId. When the automation host applied a resize result or
synced sessions from listPreviews, this would switch the user's visible
preview tab. Add a preserveActiveTab option and use it in the automation
host's resize and session-sync paths, matching the behavior of the
resized server event which deliberately preserves activeTabId.

Bug 2: handleToggleDeviceToolbar called handleViewportChange directly,
bypassing the commitBrowserViewportChange queue that serializes per-tab
viewport commits. Route it through commitBrowserViewportChange so it
cannot race with concurrent drag or toolbar resize operations.

Author: cursoragent

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

@@ -278,7 +278,7 @@ function PreviewAutomationHost(props: { readonly environmentId: EnvironmentId })
             throw squashAtomCommandFailure(result);
           }
           for (const snapshot of result.value.sessions) {
-            applyPreviewServerSnapshot(threadRef, snapshot);
+            applyPreviewServerSnapshot(threadRef, snapshot, { preserveActiveTab: true });
           }
           state = readThreadPreviewState(threadRef);
         }
@@ -374,7 +374,7 @@ function PreviewAutomationHost(props: { readonly environmentId: EnvironmentId })
             if (result._tag === "Failure") {
               throw squashAtomCommandFailure(result);
             }
-            applyPreviewServerSnapshot(threadRef, result.value);
+            applyPreviewServerSnapshot(threadRef, result.value, { preserveActiveTab: true });
             const viewport = await waitForRenderedViewport(
               ready.tabId,
               setting,

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

@@ -29,7 +29,10 @@ import { PreviewChromeRow } from "./PreviewChromeRow";
 import { formatPreviewUrl } from "./previewUrlPresentation";
 import { PreviewEmptyState } from "./PreviewEmptyState";
 import { PreviewMoreMenu } from "./PreviewMoreMenu";
-import { subscribeBrowserViewportChange } from "~/browser/browserViewportActions";
+import {
+  commitBrowserViewportChange,
+  subscribeBrowserViewportChange,
+} from "~/browser/browserViewportActions";
 import { resolveResponsiveBrowserViewportSize } from "~/browser/browserViewportLayout";
 import { PreviewUnreachable } from "./PreviewUnreachable";
 import { revealInFileExplorerLabel } from "./fileExplorerLabel";
@@ -174,15 +177,18 @@ export function PreviewView({ threadRef, tabId: requestedTabId, configuredUrls,
   );
 
   const handleToggleDeviceToolbar = () => {
+    if (!tabId) return;
     if (viewport._tag !== "fill") {
-      void handleViewportChange(FILL_PREVIEW_VIEWPORT).catch(() => undefined);
+      void commitBrowserViewportChange(tabId, FILL_PREVIEW_VIEWPORT).catch(() => undefined);
       return;
     }
 
     const responsiveSize = panelRect
       ? resolveResponsiveBrowserViewportSize(panelRect, desktopOverlay?.zoomFactor)
       : { width: 1024, height: 768 };
-    void handleViewportChange({ _tag: "freeform", ...responsiveSize }).catch(() => undefined);
+    void commitBrowserViewportChange(tabId, { _tag: "freeform", ...responsiveSize }).catch(
+      () => undefined,
+    );
   };
 
   useEffect(() => {

apps/web/src/previewStateStore.ts

@@ -213,6 +213,7 @@ export function applyPreviewServerEvent(ref: ScopedThreadRef, event: PreviewEven
 export function applyPreviewServerSnapshot(
   ref: ScopedThreadRef,
   snapshot: PreviewSessionSnapshot | null,
+  options?: { preserveActiveTab?: boolean },
 ): void {
   updateThreadPreviewState(ref, (current) => {
     if (!snapshot && current.snapshot === null) return current;
@@ -233,12 +234,16 @@ export function applyPreviewServerSnapshot(
       snapshot.navStatus._tag !== "Idle"
         ? dedupeRecentUrls(current.recentlySeenUrls, snapshot.navStatus.url)
         : current.recentlySeenUrls;
+    const sessions = { ...current.sessions, [snapshot.tabId]: snapshot };
+    const keepActive = options?.preserveActiveTab && current.activeTabId !== null;
+    const activeTabId = keepActive ? current.activeTabId : snapshot.tabId;
+    const activeSnapshot = sessions[activeTabId!] ?? snapshot;
     return {
       ...current,
-      snapshot,
-      sessions: { ...current.sessions, [snapshot.tabId]: snapshot },
-      activeTabId: snapshot.tabId,
-      desktopOverlay: current.desktopByTabId[snapshot.tabId] ?? null,
+      snapshot: activeSnapshot,
+      sessions,
+      activeTabId,
+      desktopOverlay: current.desktopByTabId[activeTabId!] ?? null,
       recentlySeenUrls,
     };
   });