fix(preview): apply viewport changes when the panel is hidden

preview_resize only updated the CSS/React chrome. If the browser panel
was hidden, the guest never changed size and wait timed out.

Resize now persists the setting, then applies a CDP device-metrics
override so the guest viewport changes even when the tab is not visible.

Author: gbarros-dev

apps/desktop/src/ipc/channels.ts

@@ -75,6 +75,7 @@ export const PREVIEW_AUTOMATION_PRESS_CHANNEL = "desktop:preview-automation-pres
 export const PREVIEW_AUTOMATION_SCROLL_CHANNEL = "desktop:preview-automation-scroll";
 export const PREVIEW_AUTOMATION_EVALUATE_CHANNEL = "desktop:preview-automation-evaluate";
 export const PREVIEW_AUTOMATION_WAIT_FOR_CHANNEL = "desktop:preview-automation-wait-for";
+export const PREVIEW_AUTOMATION_SET_VIEWPORT_CHANNEL = "desktop:preview-automation-set-viewport";
 export const PREVIEW_RECORDING_START_CHANNEL = "desktop:preview-recording-start";
 export const PREVIEW_RECORDING_STOP_CHANNEL = "desktop:preview-recording-stop";
 export const PREVIEW_RECORDING_SAVE_CHANNEL = "desktop:preview-recording-save";

apps/desktop/src/ipc/methods/preview.ts

@@ -2,6 +2,7 @@ import {
   DesktopPreviewAnnotationThemeInputSchema,
   DesktopPreviewArtifactInputSchema,
   DesktopPreviewAutomationClickInputSchema,
+  DesktopPreviewAutomationSetViewportInputSchema,
   DesktopPreviewAutomationEvaluateInputSchema,
   DesktopPreviewAutomationPressInputSchema,
   DesktopPreviewAutomationScrollInputSchema,
@@ -289,6 +290,19 @@ export const automationSnapshot = DesktopIpc.makeIpcMethod({
   }),
 });
 
+export const automationSetViewport = DesktopIpc.makeIpcMethod({
+  channel: IpcChannels.PREVIEW_AUTOMATION_SET_VIEWPORT_CHANNEL,
+  payload: DesktopPreviewAutomationSetViewportInputSchema,
+  result: Schema.Void,
+  handler: Effect.fn("desktop.ipc.preview.automationSetViewport")(function* (input) {
+    const manager = yield* PreviewManager.PreviewManager;
+    yield* manager.automationSetViewport(
+      input.tabId,
+      "clear" in input ? { clear: true } : { width: input.width, height: input.height },
+    );
+  }),
+});
+
 export const automationClick = DesktopIpc.makeIpcMethod({
   channel: IpcChannels.PREVIEW_AUTOMATION_CLICK_CHANNEL,
   payload: DesktopPreviewAutomationClickInputSchema,
@@ -386,6 +400,7 @@ export const methods = [
   closePictureInPicture,
   automationStatus,
   automationSnapshot,
+  automationSetViewport,
   automationClick,
   automationType,
   automationPress,

apps/desktop/src/preload.ts

@@ -232,6 +232,11 @@ contextBridge.exposeInMainWorld("desktopBridge", {
         ipcRenderer.invoke(IpcChannels.PREVIEW_AUTOMATION_STATUS_CHANNEL, { tabId }),
       snapshot: (tabId) =>
         ipcRenderer.invoke(IpcChannels.PREVIEW_AUTOMATION_SNAPSHOT_CHANNEL, { tabId }),
+      setViewport: (tabId, input) =>
+        ipcRenderer.invoke(IpcChannels.PREVIEW_AUTOMATION_SET_VIEWPORT_CHANNEL, {
+          tabId,
+          ...input,
+        }),
       click: (tabId, input) =>
         ipcRenderer.invoke(IpcChannels.PREVIEW_AUTOMATION_CLICK_CHANNEL, { tabId, input }),
       type: (tabId, input) =>

apps/desktop/src/preview/Manager.ts

@@ -2251,6 +2251,23 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
     yield* applyColorScheme(tabId, wc, colorScheme);
   });
 
+  const automationSetViewport = Effect.fn("PreviewManager.automationSetViewport")(function* (
+    tabId: string,
+    input: { readonly width: number; readonly height: number } | { readonly clear: true },
+  ) {
+    const wc = yield* requireWebContents(tabId);
+    yield* withControlSession(tabId, wc, "resize", (send) =>
+      "clear" in input
+        ? send("Emulation.clearDeviceMetricsOverride")
+        : send("Emulation.setDeviceMetricsOverride", {
+            width: input.width,
+            height: input.height,
+            deviceScaleFactor: 1,
+            mobile: input.width < 768,
+          }),
+    );
+  });
+
   const captureScreenshot = Effect.fn("PreviewManager.captureScreenshot")(function* (
     tabId: string,
   ) {
@@ -3544,6 +3561,7 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
     saveRecording,
     setAnnotationTheme,
     setColorScheme,
+    automationSetViewport,
     setMainWindow,
     startRecording,
     closePictureInPicture,
@@ -3846,6 +3864,10 @@ export class PreviewManager extends Context.Service<
       tabId: string,
       colorScheme: DesktopPreviewColorScheme,
     ) => Effect.Effect<void, PreviewManagerError>;
+    readonly automationSetViewport: (
+      tabId: string,
+      input: { readonly width: number; readonly height: number } | { readonly clear: true },
+    ) => Effect.Effect<void, PreviewManagerError>;
     readonly openDevTools: (tabId: string) => Effect.Effect<void, PreviewManagerError>;
     readonly clearCookies: () => Effect.Effect<void, PreviewManagerError>;
     readonly clearCache: () => Effect.Effect<void, PreviewManagerError>;
@@ -3944,6 +3966,7 @@ export const make = Effect.gen(function* PreviewManagerMake() {
     reapplyZoom: operations.reapplyZoom,
     hardReload: operations.hardReload,
     setColorScheme: operations.setColorScheme,
+    automationSetViewport: operations.automationSetViewport,
     openDevTools: operations.openDevTools,
     clearCookies: Effect.fn("PreviewManager.clearCookies")(function* () {
       yield* browserSession

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

@@ -48,6 +48,7 @@ import { useAtomQueryRunner } from "~/state/use-atom-query-runner";
 import { useAtomCommand } from "~/state/use-atom-command";
 
 import { previewBridge } from "./previewBridge";
+import { applyPreviewGuestViewport } from "./previewGuestViewport";
 import {
   PreviewAutomationOperationError,
   PreviewAutomationOverlayTimeoutError,
@@ -178,6 +179,14 @@ const waitForRenderedViewport = async (
       const appliedSettingKey = webview?.getAttribute("data-preview-viewport-key") ?? null;
       const declaredViewport = readDeclaredViewport(webview);
       const renderedViewport = webview ? await readWebviewViewport(webview) : null;
+      if (
+        setting._tag !== "fill" &&
+        renderedViewport &&
+        Math.abs(renderedViewport.width - setting.width) <= 1 &&
+        Math.abs(renderedViewport.height - setting.height) <= 1
+      ) {
+        return renderedViewport;
+      }
       if (
         renderedViewport &&
         isPreviewViewportReady({
@@ -497,7 +506,8 @@ function PreviewAutomationHost(props: { readonly environmentId: EnvironmentId })
             const ready = await requireReadyTab();
             const input = request.input as PreviewAutomationResizeInput;
             const setting = resolvePreviewViewport(input);
-            const applied = await runBrowserViewportMutation(ready.runtimeTabId, async () => {
+            const setViewport = ready.bridge.automation.setViewport;
+            const persistViewport = async () => {
               const operationState = assertPreviewRuntimeCurrent(
                 threadRef,
                 ready.tabId,
@@ -518,11 +528,22 @@ function PreviewAutomationHost(props: { readonly environmentId: EnvironmentId })
                 return raiseAtomCommandFailure(result);
               }
               updatePreviewServerSnapshot(threadRef, result.value);
+              try {
+                await applyPreviewGuestViewport(setViewport, ready.runtimeTabId, setting);
+              } catch (error) {
+                await applyPreviewGuestViewport(
+                  setViewport,
+                  ready.runtimeTabId,
+                  previousSetting,
+                ).catch(() => undefined);
+                throw error;
+              }
               return {
                 previousSetting,
                 serverEpoch: operationState.serverEpoch,
               };
-            });
+            };
+            const applied = await runBrowserViewportMutation(ready.runtimeTabId, persistViewport);
             let viewport: PreviewRenderedViewportSize;
             try {
               viewport = await waitForRenderedViewport(
@@ -562,6 +583,11 @@ function PreviewAutomationHost(props: { readonly environmentId: EnvironmentId })
                   });
                   if (rollback._tag !== "Failure") {
                     updatePreviewServerSnapshot(threadRef, rollback.value);
+                    await applyPreviewGuestViewport(
+                      setViewport,
+                      ready.runtimeTabId,
+                      applied.previousSetting,
+                    ).catch(() => undefined);
                   }
                 }
               });

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

@@ -34,6 +34,7 @@ import { selectThreadPreviewMiniPlayer, usePreviewMiniPlayerStore } from "~/prev
 import { useRightPanelStore } from "~/rightPanelStore";
 
 import { previewBridge } from "./previewBridge";
+import { applyPreviewGuestViewport } from "./previewGuestViewport";
 import { subscribePreviewAction } from "./previewActionBus";
 import { openPreviewSession } from "./openPreviewSession";
 import { PreviewChromeRow } from "./PreviewChromeRow";
@@ -239,8 +240,15 @@ export function PreviewView({
         throw error;
       }
       updatePreviewServerSnapshot(threadRef, result.value);
+      if (runtimeTabId) {
+        await applyPreviewGuestViewport(
+          previewBridge?.automation.setViewport,
+          runtimeTabId,
+          nextViewport,
+        );
+      }
     },
-    [resize, tabId, threadRef],
+    [resize, runtimeTabId, tabId, threadRef],
   );
 
   const handleToggleDeviceToolbar = () => {

apps/web/src/components/preview/previewGuestViewport.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it, vi } from "vite-plus/test";
+
+import { applyPreviewGuestViewport, previewGuestViewportOverride } from "./previewGuestViewport";
+
+describe("previewGuestViewportOverride", () => {
+  it("clears fill mode and uses explicit dimensions for fixed viewports", () => {
+    expect(previewGuestViewportOverride({ _tag: "fill" })).toEqual({ clear: true });
+    expect(previewGuestViewportOverride({ _tag: "freeform", width: 1024, height: 768 })).toEqual({
+      width: 1024,
+      height: 768,
+    });
+    expect(
+      previewGuestViewportOverride({
+        _tag: "preset",
+        presetId: "iphone-12-pro",
+        width: 390,
+        height: 844,
+      }),
+    ).toEqual({ width: 390, height: 844 });
+  });
+});
+
+describe("applyPreviewGuestViewport", () => {
+  it("skips older desktops and applies the mapped override otherwise", async () => {
+    await applyPreviewGuestViewport(undefined, "tab-1", { _tag: "fill" });
+
+    const setViewport = vi.fn(async () => undefined);
+    await applyPreviewGuestViewport(setViewport, "tab-1", {
+      _tag: "freeform",
+      width: 800,
+      height: 600,
+    });
+    expect(setViewport).toHaveBeenCalledWith("tab-1", { width: 800, height: 600 });
+  });
+});

apps/web/src/components/preview/previewGuestViewport.ts

@@ -0,0 +1,29 @@
+import type { PreviewViewportSetting } from "@t3tools/contracts";
+
+export type PreviewGuestViewportOverride =
+  | { readonly clear: true }
+  | { readonly width: number; readonly height: number };
+
+export type PreviewGuestViewportApplier = (
+  tabId: string,
+  input: PreviewGuestViewportOverride,
+) => Promise<void>;
+
+/** Maps a stored viewport setting onto the desktop CDP override. */
+export function previewGuestViewportOverride(
+  setting: PreviewViewportSetting,
+): PreviewGuestViewportOverride {
+  return setting._tag === "fill"
+    ? { clear: true }
+    : { width: setting.width, height: setting.height };
+}
+
+/** Applies or clears the guest CDP metrics override. No-op on older desktops. */
+export async function applyPreviewGuestViewport(
+  setViewport: PreviewGuestViewportApplier | undefined,
+  tabId: string,
+  setting: PreviewViewportSetting,
+): Promise<void> {
+  if (!setViewport) return;
+  await setViewport(tabId, previewGuestViewportOverride(setting));
+}

packages/contracts/src/ipc.ts

@@ -974,6 +974,18 @@ export interface DesktopPreviewTabDefaults {
   readonly colorScheme?: DesktopPreviewColorScheme | undefined;
 }
 
+export const DesktopPreviewAutomationSetViewportInputSchema = Schema.Union([
+  Schema.Struct({
+    tabId: DesktopPreviewTabIdSchema,
+    width: Schema.Int.check(Schema.isGreaterThan(0)),
+    height: Schema.Int.check(Schema.isGreaterThan(0)),
+  }),
+  Schema.Struct({
+    tabId: DesktopPreviewTabIdSchema,
+    clear: Schema.Literal(true),
+  }),
+]);
+
 export const DesktopPreviewRegisterWebviewInputSchema = Schema.Struct({
   tabId: DesktopPreviewTabIdSchema,
   webContentsId: Schema.Int.check(Schema.isGreaterThan(0)),
@@ -1187,6 +1199,10 @@ export interface DesktopPreviewBridge {
   automation: {
     status: (tabId: string) => Promise<PreviewAutomationStatus>;
     snapshot: (tabId: string) => Promise<PreviewAutomationSnapshot>;
+    setViewport: (
+      tabId: string,
+      input: { readonly width: number; readonly height: number } | { readonly clear: true },
+    ) => Promise<void>;
     click: (tabId: string, input: PreviewAutomationClickInput) => Promise<void>;
     type: (tabId: string, input: PreviewAutomationTypeInput) => Promise<void>;
     press: (tabId: string, input: PreviewAutomationPressInput) => Promise<void>;

packages/contracts/src/preview.test.ts

@@ -11,6 +11,7 @@ import {
   PreviewSessionSnapshot,
   PreviewViewportSetting,
 } from "./preview.ts";
+import { DesktopPreviewAutomationSetViewportInputSchema } from "./ipc.ts";
 import {
   PreviewAutomationHost,
   PreviewAutomationError,
@@ -32,6 +33,9 @@ const decodeResizeResult = Schema.decodeUnknownSync(PreviewAutomationResizeResul
 const decodeAutomationHost = Schema.decodeUnknownSync(PreviewAutomationHost);
 const decodeAutomationError = Schema.decodeUnknownSync(PreviewAutomationError);
 const decodeAutomationStatus = Schema.decodeUnknownSync(PreviewAutomationStatus);
+const decodeSetViewportInput = Schema.decodeUnknownSync(
+  DesktopPreviewAutomationSetViewportInputSchema,
+);
 
 describe("PreviewAutomationOpenInput", () => {
   it("accepts the inline preview visibility flag", () => {
@@ -223,6 +227,22 @@ describe("PreviewAutomationStatus", () => {
   });
 });
 
+describe("DesktopPreviewAutomationSetViewportInputSchema", () => {
+  it("accepts a complete size or an explicit clear, and rejects a partial size", () => {
+    expect(decodeSetViewportInput({ tabId: "tab-1", width: 800, height: 600 })).toEqual({
+      tabId: "tab-1",
+      width: 800,
+      height: 600,
+    });
+    expect(decodeSetViewportInput({ tabId: "tab-1", clear: true })).toEqual({
+      tabId: "tab-1",
+      clear: true,
+    });
+    expect(() => decodeSetViewportInput({ tabId: "tab-1", width: 800 })).toThrow();
+    expect(() => decodeSetViewportInput({ tabId: "tab-1" })).toThrow();
+  });
+});
+
 describe("PreviewEvent", () => {
   it("decodes opened", () => {
     const event = decodePreviewEvent({