Browser Preview renders pixelated at high viewport resolutions (e.g. 2160×2160)

[alexfosterinvisible]

Description

When using agent-browser set viewport 2160 2160 to fill the Browser Preview panel, the rendered page appears pixelated/blurry. The viewport dimensions are correctly applied (confirmed via window.innerWidth/innerHeight), but the stream displayed in the Mux Browser Preview panel looks low-resolution — as if the browser is rendering at 1x DPI and then being scaled up.

Steps to reproduce

1. Start a dev server (e.g. kedro viz run --port 4141)
2. Close any existing agent-browser session: agent-browser close
3. Open with streaming: export AGENT_BROWSER_STREAM_PORT=9223 && agent-browser open http://127.0.0.1:4141/ --session default
4. Set a high-res viewport: agent-browser set viewport 2160 2160
5. Observe the Browser Preview panel in Mux — the content is visibly pixelated

Expected behavior

The Browser Preview should render at the native resolution (or at least respect deviceScaleFactor for Retina/HiDPI displays). On a MacBook with 2x Retina display, a 2160×2160 viewport should look crisp.

Actual behavior

The preview appears to stream at a lower internal resolution and scale up, resulting in blurry/pixelated text and UI elements.

Possible fix

The streaming pipeline may need to respect deviceScaleFactor (e.g. 2 on Retina Macs) when capturing frames. Playwright supports deviceScaleFactor in browser launch options and via page.setViewportSize() — the stream encoder may need to match.

Environment

• Mux: latest (worktree runtime, macOS)
• agent-browser: 0.16.3
• Playwright Chromium build: 1208 (symlinked from 1217)
• macOS on Apple Silicon (Retina display)
• kedro-viz 12.3.0 as test page (any page reproduces it)

Workaround

Use the system browser directly (open http://127.0.0.1:4141/) instead of Browser Preview for high-fidelity viewing.