fix(desktop): preserve screenshot detail in scaled previews

apps/desktop/src/preview/Manager.test.ts

@@ -357,7 +357,9 @@ const makeTestHostWebContents = (): TestHostWebContents => {
   return {
     id: 7,
     mainFrame: { frameTreeNodeId: 7 },
-    executeJavaScript: vi.fn(async () => true),
+    executeJavaScript: vi.fn(async (expression: string) =>
+      expression.includes(DESKTOP_PREVIEW_RECORDING_CAPTURE_TRIGGER),
+    ),
     isDestroyed: () => false,
     session: {
       setDisplayMediaRequestHandler: vi.fn((next: TestDisplayMediaHandler) => {
@@ -2939,6 +2941,43 @@ describe("PreviewManager", () => {
     ),
   );
 
+  effectIt.effect("allows scaled capture setup to exceed one second", () =>
+    withManager((manager) =>
+      Effect.gen(function* () {
+        const image = {
+          toPNG: () => Buffer.from("scaled-png"),
+          toJPEG: () => Buffer.from("scaled-jpeg"),
+          toDataURL: () => "data:image/png;base64,cG5n",
+          getSize: () => ({ width: 100, height: 80 }),
+        };
+        const pending = Promise.withResolvers<void>();
+        const setupStarted = Promise.withResolvers<void>();
+        const host = makeTestHostWebContents();
+        host.executeJavaScript.mockImplementation(async (expression: string) => {
+          if (expression.includes("getComputedStyle")) return true;
+          if (expression.includes("frozen.decode")) {
+            setupStarted.resolve();
+            await pending.promise;
+          }
+          return undefined;
+        });
+        const capturePage = vi.fn(async () => image);
+        fromId.mockReturnValue(makeTestPreviewWebContents(capturePage, 42, host));
+        yield* manager.createTab("tab_1");
+        yield* manager.registerWebview("tab_1", 42);
+        const fiber = yield* manager.captureScreenshot("tab_1").pipe(Effect.forkChild);
+        yield* Effect.promise(() => setupStarted.promise);
+        yield* TestClock.adjust("2 seconds");
+        expect(fiber.pollUnsafe()).toBeUndefined();
+        pending.resolve();
+        const artifact = yield* Fiber.join(fiber);
+        expect(capturePage).toHaveBeenCalledTimes(2);
+        expect(writeFile).toHaveBeenCalledWith(artifact.path, image.toPNG());
+        expect(host.executeJavaScript).toHaveBeenCalledWith(expect.stringContaining("?.remove()"));
+      }),
+    ),
+  );
+
   effectIt.effect("discards a screenshot that resolves after its guest is replaced", () =>
     withManager((manager) =>
       Effect.gen(function* () {

apps/desktop/src/preview/Manager.ts

@@ -81,6 +81,7 @@ import {
   START_PICK_CHANNEL,
 } from "./GuestProtocol.ts";
 import { isPreviewAnnotationPayload } from "./PickedElementPayload.ts";
+import { capturePreviewPage } from "./PreviewCapture.ts";
 import { captureFavicon, safeHttpOrigin, selectFaviconCandidates } from "./FaviconCapture.ts";
 import { DEFAULT_RECORDING_INPUT_OPTIONS, type RecordingInputOptions } from "./RecordingInput.ts";
 
@@ -138,7 +139,6 @@ const PICTURE_IN_PICTURE_JPEG_QUALITY = 80;
  */
 const CAPTURE_PAGE_RETRY_ATTEMPTS = 3;
 const CAPTURE_PAGE_RETRY_DELAY_MS = 120;
-const CAPTURE_PAGE_ATTEMPT_TIMEOUT_MS = 1_000;
 const PICTURE_IN_PICTURE_INITIAL_WIDTH = 480;
 const PICTURE_IN_PICTURE_INITIAL_HEIGHT = 320;
 const PICTURE_IN_PICTURE_MIN_WIDTH = 240;
@@ -623,16 +623,14 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
     const capture = Effect.gen(function* () {
       // Check after the retry delay, and again before accepting its result.
       yield* requireCurrentGuest;
-      const image = yield* Effect.tryPromise({
-        // An abort-signal parameter makes a stalled promise interruptible.
-        try: (_signal) => wc.capturePage(),
-        catch: (cause) => new PreviewOperationError({ ...errorContext, cause }),
-      }).pipe(
-        Effect.timeout(CAPTURE_PAGE_ATTEMPT_TIMEOUT_MS),
-        Effect.catchTags({
-          TimeoutError: (cause) =>
-            Effect.fail(new PreviewOperationError({ ...errorContext, cause })),
-        }),
+      const image = yield* capturePreviewPage(tabId, wc).pipe(
+        Effect.mapError(
+          (error) =>
+            new PreviewOperationError({
+              ...errorContext,
+              cause: "cause" in error ? error.cause : error,
+            }),
+        ),
       );
       yield* requireCurrentGuest;
       return image;

apps/desktop/src/preview/PreviewCapture.ts

@@ -0,0 +1,81 @@
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+import * as Semaphore from "effect/Semaphore";
+
+const encodeString = Schema.encodeSync(Schema.fromJsonString(Schema.String));
+let captureSequence = 0;
+const captureLocks = new WeakMap<Electron.WebContents, Semaphore.Semaphore>();
+
+// Chromium rasterizes CSS-scaled guests at their displayed size, even for capturePage.
+// Freeze only that preview while capturing unscaled pixels; never change its viewport.
+export const capturePreviewPage = (tabId: string, wc: Electron.WebContents) => {
+  let lock = captureLocks.get(wc);
+  if (!lock) {
+    lock = Semaphore.makeUnsafe(1);
+    captureLocks.set(wc, lock);
+  }
+  const capture = Effect.tryPromise((_signal) => wc.capturePage());
+  const unscaledCapture = capture.pipe(Effect.timeout("1 second"));
+  return lock
+    .withPermit(
+      Effect.gen(function* () {
+        const host = wc.hostWebContents;
+        if (!host || host.isDestroyed()) return yield* unscaledCapture;
+        const scaled = yield* Effect.tryPromise((_signal) =>
+          host.executeJavaScript(`(() => {
+          const view = document.querySelector("webview[data-preview-tab=" + CSS.escape(${encodeString(tabId)}) + "]");
+          return !!view && getComputedStyle(view).transform !== "none";
+        })()`),
+        );
+        if (scaled !== true) return yield* unscaledCapture;
+        const frozen = yield* Effect.tryPromise((_signal) => wc.capturePage());
+        const token = `preview-capture-${++captureSequence}`;
+        return yield* Effect.tryPromise((_signal) =>
+          host.executeJavaScript(`(async () => {
+            const view = document.querySelector("webview[data-preview-tab=" + CSS.escape(${encodeString(tabId)}) + "]");
+            if (!view || view.getWebContentsId() !== ${wc.id}) throw new Error("Preview guest detached before capture");
+            const frozen = document.createElement("img");
+            frozen.src = ${encodeString(frozen.toDataURL())};
+            frozen.alt = "";
+            frozen.className = view.className;
+            frozen.style.cssText = view.style.cssText;
+            frozen.style.pointerEvents = "none";
+            frozen.style.maxWidth = "none";
+            const holder = document.createElement("span");
+            holder.id = ${encodeString(token)};
+            holder.style.display = "contents";
+            const style = document.createElement("style");
+            style.textContent = 'webview[data-preview-tab="' + CSS.escape(view.dataset.previewTab) + '"] { transform: none !important; opacity: 0 !important; pointer-events: none !important; }';
+            holder.append(frozen);
+            view.after(holder);
+            await frozen.decode();
+            if (holder.isConnected && view.isConnected) holder.append(style);
+          })()`),
+        ).pipe(
+          Effect.andThen(
+            Effect.tryPromise((_signal) =>
+              host.executeJavaScript(
+                "new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))",
+              ),
+            ),
+          ),
+          Effect.andThen(capture),
+          Effect.ensuring(
+            Effect.suspend(() =>
+              host.isDestroyed()
+                ? Effect.void
+                : Effect.tryPromise((_signal) =>
+                    host.executeJavaScript(
+                      `document.getElementById(${encodeString(token)})?.remove()`,
+                    ),
+                  ).pipe(Effect.timeout("1 second"), Effect.ignore),
+            ),
+          ),
+        );
+      }),
+    )
+    .pipe(
+      // Bound queueing and overlay setup as well as both scaled captures.
+      Effect.timeout("5 seconds"),
+    );
+};